Skip to content

Commit 3da5d42

Browse files
artembelikartembelik
authored
chore: added all component usage to dev ssr application (#DS-3964) (#1111)
1 parent 42e4da4 commit 3da5d42

5 files changed

Lines changed: 286 additions & 26 deletions

File tree

‎packages/components-dev/ssr/config.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,11 @@ import { ApplicationConfig } from '@angular/core';
33
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
44
import { provideAnimations } from '@angular/platform-browser/animations';
55
import { provideRouter } from '@angular/router';
6+
import { KBQ_LOCALE_SERVICE, KbqLocaleService } from '@koobiq/components/core';
67

78
export default {
89
providers: [
10+
{ provide: KBQ_LOCALE_SERVICE, useClass: KbqLocaleService },
911
provideRouter([]),
1012
provideHttpClient(withFetch()),
1113
provideClientHydration(withEventReplay()),

‎packages/components-dev/ssr/module.ts‎

Lines changed: 261 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,284 @@
1+
import { CdkScrollable } from '@angular/cdk/scrolling';
12
import { isPlatformBrowser, isPlatformServer } from '@angular/common';
23
import { ChangeDetectionStrategy, Component, inject, PLATFORM_ID, ViewEncapsulation } from '@angular/core';
3-
import { ScrollbarExamplesModule } from 'packages/docs-examples/components/scrollbar';
4-
import { TagExamplesModule } from 'packages/docs-examples/components/tag';
4+
import { AccordionOverviewExample } from 'packages/docs-examples/components/accordion';
5+
import { ActionsPanelOverviewExample } from 'packages/docs-examples/components/actions-panel';
6+
import { AlertStatusExample } from 'packages/docs-examples/components/alert';
7+
import { AppSwitcherOverviewExample } from 'packages/docs-examples/components/app-switcher';
8+
import { AutocompleteOverviewExample } from 'packages/docs-examples/components/autocomplete';
9+
import { BadgeFillAndStyleExample } from 'packages/docs-examples/components/badge';
10+
import { BreadcrumbsOverviewExample } from 'packages/docs-examples/components/breadcrumbs';
11+
import { ButtonOverviewExample } from 'packages/docs-examples/components/button';
12+
import { ButtonToggleAlignmentOverviewExample } from 'packages/docs-examples/components/button-toggle';
13+
import { CheckboxOverviewExample } from 'packages/docs-examples/components/checkbox';
14+
import { ClampedTextOverviewExample } from 'packages/docs-examples/components/clamped-text';
15+
import { CodeBlockWithLineNumbersExample } from 'packages/docs-examples/components/code-block';
16+
import { ContentPanelOverviewExample } from 'packages/docs-examples/components/content-panel';
17+
import { DatepickerOverviewExample } from 'packages/docs-examples/components/datepicker';
18+
import { DividerOverviewExample } from 'packages/docs-examples/components/divider';
19+
import { DlHorizontalOverviewExample } from 'packages/docs-examples/components/dl';
20+
import { DropdownOverviewExample } from 'packages/docs-examples/components/dropdown';
21+
import { DynamicTranslationOverviewExample } from 'packages/docs-examples/components/dynamic-translation';
22+
import { EmptyStateDefaultExample } from 'packages/docs-examples/components/empty-state';
23+
import { FileUploadMultipleDefaultValidationReactiveFormsOverviewExample } from 'packages/docs-examples/components/file-upload';
24+
import { FilterBarOverviewExample } from 'packages/docs-examples/components/filter-bar';
25+
import { FormFieldPasswordOverviewExample } from 'packages/docs-examples/components/form-field';
26+
import { FormFieldsetOverviewExample } from 'packages/docs-examples/components/forms';
27+
import { IconItemDefaultExample } from 'packages/docs-examples/components/icon-item';
28+
import { InlineEditOverviewExample } from 'packages/docs-examples/components/inline-edit';
29+
import { InputNumberOverviewExample } from 'packages/docs-examples/components/input';
30+
import { LinkOverviewExample } from 'packages/docs-examples/components/link';
31+
import { ListOverviewExample } from 'packages/docs-examples/components/list';
32+
import { LoaderOverlayOverviewExample } from 'packages/docs-examples/components/loader-overlay';
33+
import { MarkdownHeadersExample } from 'packages/docs-examples/components/markdown';
34+
import { ModalOverviewExample } from 'packages/docs-examples/components/modal';
35+
import { NavbarOverviewExample } from 'packages/docs-examples/components/navbar';
36+
import { NavbarIcOverviewExample } from 'packages/docs-examples/components/navbar-ic';
37+
import { NotificationCenterOverviewExample } from 'packages/docs-examples/components/notification-center';
38+
import { OverflowItemsOverviewExample } from 'packages/docs-examples/components/overflow-items';
39+
import { PopoverCommonExample } from 'packages/docs-examples/components/popover';
40+
import { ProgressBarOverviewExample } from 'packages/docs-examples/components/progress-bar';
41+
import { ProgressSpinnerOverviewExample } from 'packages/docs-examples/components/progress-spinner';
42+
import { RadioSizeExample } from 'packages/docs-examples/components/radio';
43+
import { ScrollbarWithOptionsExample } from 'packages/docs-examples/components/scrollbar';
44+
import { SearchExpandableOverviewExample } from 'packages/docs-examples/components/search-expandable';
45+
import { SelectOverviewExample } from 'packages/docs-examples/components/select';
46+
import { SidebarOverviewExample } from 'packages/docs-examples/components/sidebar';
47+
import { SidepanelOverlayedExample } from 'packages/docs-examples/components/sidepanel';
48+
import { SplitButtonOverviewExample } from 'packages/docs-examples/components/split-button';
49+
import { SplitterOverviewExample } from 'packages/docs-examples/components/splitter';
50+
import { TableOverviewExample } from 'packages/docs-examples/components/table';
51+
import { TabsNavBarOverviewExample } from 'packages/docs-examples/components/tabs';
52+
import {
53+
TagAutocompleteOverviewExample,
54+
TagEditableExample,
55+
TagInputOverviewExample
56+
} from 'packages/docs-examples/components/tag';
57+
import { TextAreaOverviewExample } from 'packages/docs-examples/components/textarea';
58+
import { TimeRangeOverviewExample } from 'packages/docs-examples/components/time-range';
59+
import { TimepickerValidationSymbolsExample } from 'packages/docs-examples/components/timepicker';
60+
import { TimezoneOverviewExample } from 'packages/docs-examples/components/timezone';
61+
import { TitleOverviewExample } from 'packages/docs-examples/components/title';
62+
import { ToastActionsOverviewExample } from 'packages/docs-examples/components/toast';
63+
import { ToggleOverviewExample } from 'packages/docs-examples/components/toggle';
64+
import { TooltipOverviewExample } from 'packages/docs-examples/components/tooltip';
65+
import { TopBarOverviewExample } from 'packages/docs-examples/components/top-bar';
66+
import { TreeOverviewExample } from 'packages/docs-examples/components/tree';
67+
import { TreeSelectChildSelectionOverviewExample } from 'packages/docs-examples/components/tree-select';
68+
import { UsernameOverviewExample } from 'packages/docs-examples/components/username';
69+
import { DevLocaleSelector } from '../locale-selector';
570
import { DevThemeToggle } from '../theme-toggle';
671
import { DevBreadcrumbsHydration } from './components/breadcrumbs';
772

873
@Component({
974
standalone: true,
10-
imports: [ScrollbarExamplesModule, DevBreadcrumbsHydration, TagExamplesModule],
75+
imports: [
76+
AccordionOverviewExample,
77+
ActionsPanelOverviewExample,
78+
AlertStatusExample,
79+
AppSwitcherOverviewExample,
80+
AutocompleteOverviewExample,
81+
BadgeFillAndStyleExample,
82+
BreadcrumbsOverviewExample,
83+
ButtonOverviewExample,
84+
ButtonToggleAlignmentOverviewExample,
85+
CheckboxOverviewExample,
86+
ClampedTextOverviewExample,
87+
CodeBlockWithLineNumbersExample,
88+
ContentPanelOverviewExample,
89+
DatepickerOverviewExample,
90+
DividerOverviewExample,
91+
DlHorizontalOverviewExample,
92+
DropdownOverviewExample,
93+
DynamicTranslationOverviewExample,
94+
EmptyStateDefaultExample,
95+
IconItemDefaultExample,
96+
// FileUploadCvaOverviewExample,
97+
FileUploadMultipleDefaultValidationReactiveFormsOverviewExample,
98+
FilterBarOverviewExample,
99+
FormFieldPasswordOverviewExample,
100+
FormFieldsetOverviewExample,
101+
InlineEditOverviewExample,
102+
InputNumberOverviewExample,
103+
LinkOverviewExample,
104+
ListOverviewExample,
105+
LoaderOverlayOverviewExample,
106+
MarkdownHeadersExample,
107+
ModalOverviewExample,
108+
NavbarOverviewExample,
109+
NavbarIcOverviewExample,
110+
NotificationCenterOverviewExample,
111+
OverflowItemsOverviewExample,
112+
PopoverCommonExample,
113+
ProgressBarOverviewExample,
114+
ProgressSpinnerOverviewExample,
115+
RadioSizeExample,
116+
SearchExpandableOverviewExample,
117+
SelectOverviewExample,
118+
SidebarOverviewExample,
119+
SidepanelOverlayedExample,
120+
SplitButtonOverviewExample,
121+
SplitterOverviewExample,
122+
ScrollbarWithOptionsExample,
123+
TableOverviewExample,
124+
TabsNavBarOverviewExample,
125+
TagAutocompleteOverviewExample,
126+
TagInputOverviewExample,
127+
TagEditableExample,
128+
TextAreaOverviewExample,
129+
TimeRangeOverviewExample,
130+
TimezoneOverviewExample,
131+
TitleOverviewExample,
132+
ToastActionsOverviewExample,
133+
ToggleOverviewExample,
134+
TooltipOverviewExample,
135+
TopBarOverviewExample,
136+
TreeOverviewExample,
137+
TimepickerValidationSymbolsExample,
138+
TreeSelectChildSelectionOverviewExample,
139+
UsernameOverviewExample
140+
],
11141
selector: 'dev-examples',
12142
template: `
13-
<dev-breadcrumbs-hydration />
143+
<accordion-overview-example />
144+
<hr />
145+
<actions-panel-overview-example />
146+
<hr />
147+
<app-switcher-overview-example />
148+
<hr />
149+
<autocomplete-overview-example />
150+
<hr />
151+
<alert-status-example />
152+
<hr />
153+
<badge-fill-and-style-example />
154+
<hr />
155+
<breadcrumbs-overview-example />
156+
<hr />
157+
<button-overview-example />
158+
<hr />
159+
<button-toggle-alignment-overview-example />
160+
<hr />
161+
<checkbox-overview-example />
162+
<hr />
163+
<clamped-text-overview-example />
164+
<hr />
165+
<code-block-with-line-numbers-example />
166+
<hr />
167+
<icon-item-default-example />
168+
<hr />
169+
<content-panel-overview-example />
170+
<hr />
171+
<datepicker-overview-example />
172+
<hr />
173+
<divider-overview-example />
174+
<hr />
175+
<dl-horizontal-overview-example />
176+
<hr />
177+
<dropdown-overview-example />
178+
<hr />
179+
<dynamic-translation-overview-example />
180+
<hr />
181+
<empty-state-default-example />
182+
<hr />
183+
<!-- <file-upload-cva-overview-example /> -->
184+
<hr />
185+
<file-upload-multiple-default-validation-reactive-forms-overview-example />
186+
<hr />
187+
<filter-bar-overview-example />
188+
<hr />
189+
<form-field-password-overview-example />
190+
<hr />
191+
<form-fieldset-overview-example />
192+
<hr />
193+
<inline-edit-overview-example />
194+
<hr />
195+
<input-number-overview-example />
196+
<hr />
197+
<link-overview-example />
198+
<hr />
199+
<list-overview-example />
200+
<hr />
201+
<loader-overlay-overview-example />
202+
<hr />
203+
<markdown-headers-example />
204+
<hr />
205+
<modal-overview-example />
206+
<hr />
207+
<navbar-overview-example />
208+
<hr />
209+
<navbar-ic-overview-example />
210+
<hr />
211+
<notification-center-overview-example />
212+
<hr />
213+
<overflow-items-overview-example />
214+
<hr />
215+
<popover-common-example />
216+
<hr />
217+
<progress-bar-overview-example />
218+
<hr />
219+
<progress-spinner-overview-example />
220+
<hr />
221+
<radio-size-example />
222+
<hr />
223+
<sidepanel-overlayed-example />
224+
<hr />
225+
<search-expandable-overview-example />
226+
<hr />
227+
<select-overview-example />
228+
<hr />
229+
<sidebar-overview-example />
230+
<hr />
231+
<split-button-overview-example />
232+
<hr />
233+
<splitter-overview-example />
14234
<hr />
15235
<scrollbar-with-options-example />
16236
<hr />
237+
<table-overview-example />
238+
<hr />
239+
<tabs-nav-bar-overview-example />
240+
<hr />
241+
<tag-autocomplete-overview-example />
242+
<hr />
243+
<tag-input-overview-example />
244+
<hr />
17245
<tag-editable-example />
246+
<hr />
247+
<text-area-overview-example />
248+
<hr />
249+
<time-range-overview-example />
250+
<hr />
251+
<timezone-overview-example />
252+
<hr />
253+
<title-overview-example />
254+
<hr />
255+
<toast-actions-overview-example />
256+
<hr />
257+
<toggle-overview-example />
258+
<hr />
259+
<tooltip-overview-example />
260+
<hr />
261+
<top-bar-overview-example />
262+
<hr />
263+
<tree-overview-example />
264+
<hr />
265+
<timepicker-validation-symbols-example />
266+
<hr />
267+
<tree-select-child-selection-overview-example />
268+
<hr />
269+
<username-overview-example />
18270
`,
19271
changeDetection: ChangeDetectionStrategy.OnPush
20272
})
21273
export class DevExamples {}
22274

23275
@Component({
24276
standalone: true,
25-
imports: [DevExamples, DevThemeToggle],
277+
imports: [DevExamples, DevThemeToggle, DevLocaleSelector, DevBreadcrumbsHydration],
278+
hostDirectives: [
279+
// Required for components with overlays that use scrolling strategies
280+
CdkScrollable
281+
],
26282
selector: 'dev-app',
27283
templateUrl: './template.html',
28284
styleUrl: './styles.scss',

‎packages/components-dev/ssr/template.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
1+
<dev-locale-selector />
12
<dev-theme-toggle />
23

34
<hr />
45

56
<dev-examples />
7+
8+
<hr />
9+
10+
<dev-breadcrumbs-hydration />

‎packages/docs-examples/components/dynamic-translation/dynamic-translation-overview/dynamic-translation-overview-example.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { KbqLinkModule } from '@koobiq/components/link';
1414
<a
1515
*kbqDynamicTranslationSlot="'link'; let context"
1616
kbq-link
17-
href="https://koobiq.io/en/dynamic-translation"
17+
href="https://koobiq.io/en/components/dynamic-translation"
1818
target="_blank"
1919
>
2020
{{ context }}

‎packages/docs-examples/components/progress-spinner/progress-spinner-overview/progress-spinner-overview-example.ts‎

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
import { ChangeDetectionStrategy, Component, OnDestroy } from '@angular/core';
2-
import { ThemePalette } from '@koobiq/components/core';
1+
import { afterNextRender, ChangeDetectionStrategy, Component, OnDestroy, signal } from '@angular/core';
32
import { KbqProgressSpinnerModule } from '@koobiq/components/progress-spinner';
43

5-
const INTERVAL: number = 300;
4+
const DELAY: number = 300;
65
const STEP: number = 4;
76
const MAX_PERCENT: number = 100;
87

@@ -13,28 +12,26 @@ const MAX_PERCENT: number = 100;
1312
changeDetection: ChangeDetectionStrategy.OnPush,
1413
standalone: true,
1514
selector: 'progress-spinner-overview-example',
16-
imports: [
17-
KbqProgressSpinnerModule
18-
],
15+
imports: [KbqProgressSpinnerModule],
1916
template: `
20-
<div class="layout-row">
21-
<div style="width: 40px">{{ percent }}%</div>
22-
<kbq-progress-spinner class="layout-margin-right-s" [value]="percent" />
23-
</div>
24-
<div class="layout-row">
25-
<div style="width: 40px">{{ percent }}%</div>
26-
<kbq-progress-spinner class="layout-margin-right-s" [size]="'big'" [value]="percent" />
27-
</div>
28-
`
17+
<small [style.width.px]="40">{{ percent() }}%</small>
18+
<kbq-progress-spinner [value]="percent()" />
19+
`,
20+
host: {
21+
class: 'layout-margin-5xl layout-align-center-center layout-row'
22+
}
2923
})
3024
export class ProgressSpinnerOverviewExample implements OnDestroy {
31-
themePalette = ThemePalette;
32-
33-
percent: number = 0;
34-
intervalId: number;
25+
readonly percent = signal(0);
26+
private intervalId: ReturnType<typeof setInterval>;
3527

3628
constructor() {
37-
setInterval(() => (this.percent = (this.percent + STEP) % (MAX_PERCENT + STEP)), INTERVAL);
29+
afterNextRender(() => {
30+
this.intervalId = setInterval(
31+
() => this.percent.update((value) => (value + STEP) % (MAX_PERCENT + STEP)),
32+
DELAY
33+
);
34+
});
3835
}
3936

4037
ngOnDestroy() {

0 commit comments

Comments
 (0)