diff --git a/projects/demo/src/app/app.component.html b/projects/demo/src/app/app.component.html index bb1cda84..d7c26891 100644 --- a/projects/demo/src/app/app.component.html +++ b/projects/demo/src/app/app.component.html @@ -34,10 +34,9 @@ - + -
-
+
diff --git a/projects/demo/src/app/app.component.ts b/projects/demo/src/app/app.component.ts index 9bdcd4f6..e04309f2 100644 --- a/projects/demo/src/app/app.component.ts +++ b/projects/demo/src/app/app.component.ts @@ -34,67 +34,6 @@ export class AppComponent implements OnInit, OnDestroy { private _subscription = new Subscription(); - public menuConfigs: Menu[] = [ - { - name: 'GET_STARTED', children: [ - { name: 'Home', path: '/index' }, - { name: 'Issue report', path: '/issue-report' }, - ], - }, - { - name: 'DESIGN_DEVELOP', - children: [ - { name: 'DESIGN_DEVELOP_MENU.DESIGN_TOKENS', path: '/design-tokens' }, - { name: 'DESIGN_DEVELOP_MENU.FOUNDATION', path: '/foundation' }, - { - name: 'DESIGN_DEVELOP_MENU.COMPONENTS', - path: '/components', - children: [ - { name: 'COMPONENTS.ACCORDION', path: '/components/accordion' }, - { name: 'COMPONENTS.ACTION_MENU', path: '/components/action-menu' }, - { name: 'COMPONENTS.AVATAR', path: '/components/avatar' }, - { name: 'COMPONENTS.BADGE', path: '/components/badge' }, - { name: 'COMPONENTS.BREADCRUMB', path: '/components/breadcrumb' }, - { name: 'COMPONENTS.BUTTON', path: '/components/button' }, - { name: 'COMPONENTS.CARD', path: '/components/card' }, - { name: 'COMPONENTS.CHECKBOX', path: '/components/checkbox' }, - { name: 'COMPONENTS.CHIP', path: '/components/chip' }, - { name: 'COMPONENTS.DATEPICKER', path: '/components/datepicker' }, - { name: 'COMPONENTS.DIALOG', path: '/components/dialog' }, - { name: 'COMPONENTS.DIVIDER', path: '/components/divider' }, - { name: 'COMPONENTS.FIELDSET', path: '/components/fieldset' }, - { name: 'COMPONENTS.FORM_FIELD', path: '/components/form-field' }, - { name: 'COMPONENTS.ICON', path: '/components/icon' }, - { name: 'COMPONENTS.ICON_BUTTON', path: '/components/icon-button' }, - { name: 'COMPONENTS.MENU_ITEM', path: '/components/menu-item' }, - { name: 'COMPONENTS.NOTIFICATION', path: '/components/notification' }, - { name: 'COMPONENTS.OVERLAY_PANEL', path: '/components/overlay-panel' }, - { name: 'COMPONENTS.PAGINATOR', path: '/components/paginator' }, - { name: 'COMPONENTS.RADIO', path: '/components/radio' }, - { name: 'COMPONENTS.SCROLLBAR', path: '/components/scrollbar' }, - { name: 'COMPONENTS.SEGMENTED_CONTROL', path: '/components/segmented-control' }, - { name: 'COMPONENTS.SEGMENTED_CONTROL_TOGGLE', path: '/components/segmented-control-toggle' }, - { name: 'COMPONENTS.SELECT', path: '/components/select' }, - { name: 'COMPONENTS.SIDE_SHEET', path: '/components/side-sheet' }, - { name: 'COMPONENTS.SIDE_NAV', path: '/components/side-nav' }, - { name: 'COMPONENTS.SNACKBAR', path: '/components/snackbar' }, - { name: 'COMPONENTS.SPINNER', path: '/components/spinner' }, - { name: 'COMPONENTS.SWITCH', path: '/components/switch' }, - { name: 'COMPONENTS.TAB', path: '/components/tab' }, - { name: 'COMPONENTS.TABLE', path: '/components/table' }, - { name: 'COMPONENTS.TAG', path: '/components/tag' }, - { name: 'COMPONENTS.TOOLTIP', path: '/components/tooltip' }, - ], - }, - { - name: 'DESIGN_DEVELOP_MENU.PATTERNS', - path: '/patterns', - }, - ], - }, - { name: 'RESOURCES', children: [] }, - ]; - public darkMode = new FormControl(false); public currentLang = toSignal(this._translate.onLangChange.pipe(map(({ lang }) => lang), startWith(this._translate.currentLang))); @@ -124,7 +63,6 @@ export class AppComponent implements OnInit, OnDestroy { }); } - // Find the deepest level in the Statamic navigation tree private _findDeepestLevel(tree: readonly StatamicNavNode[], currentDepth = 0): number { if (!tree || tree.length === 0) { return currentDepth; @@ -140,7 +78,6 @@ export class AppComponent implements OnInit, OnDestroy { return tree.map((node) => { let path: string | undefined = undefined; if (node.page?.slug) { - // Only link to /components/:slug for component-level items (depth >= _componentLevelDepth) if (this._componentLevelDepth !== undefined && node.depth >= this._componentLevelDepth) { path = `/components/${node.page.slug}`; } else { @@ -180,7 +117,6 @@ export class AppComponent implements OnInit, OnDestroy { } } -// Add StatamicNavNode type interface StatamicNavNode { depth: number; page?: { title?: string; id?: string; slug?: string }; diff --git a/projects/demo/src/app/app.routes.ts b/projects/demo/src/app/app.routes.ts index cf5898df..1e0811e0 100644 --- a/projects/demo/src/app/app.routes.ts +++ b/projects/demo/src/app/app.routes.ts @@ -1,158 +1,157 @@ +import { AccordionDemoService } from './pages/accordion/accordion-demo.service'; +import { ActionMenuDemoService } from './pages/action-menu/action-menu-demo.service'; +import { AvatarDemoService } from './pages/avatar/avatar-demo.service'; +import { BadgeDemoService } from './pages/badge/badge-demo.service'; +import { BreadcrumbDemoService } from './pages/breadcrumb/breadcrumb-demo.service'; +import { ButtonDemoService } from './pages/button/button-demo.service'; +import { CardDemoService } from './pages/card/card-demo.service'; +import { CheckboxDemoService } from './pages/checkbox/checkbox-demo.service'; +import { ChipDemoService } from './pages/chip/chip-demo.service'; import { ComponentDetailsComponent } from './pages/components/component-details/component-details.component'; +import { DatepickerDemoService } from './pages/datepicker/datepicker-demo.service'; +import { DialogDemoService } from './pages/dialog/dialog-demo.service'; +import { DividerDemoService } from './pages/divider/divider-demo.service'; +import { FieldsetDemoService } from './pages/fieldset/fieldset-demo.service'; +import { FormFieldDemoService } from './pages/form-field/form-field-demo.service'; +import { IconDemoService } from './pages/icon/icon-demo.service'; +import { IconButtonDemoService } from './pages/icon-button/icon-button-demo.service'; +import { MenuItemDemoService } from './pages/menu-item/menu-item-demo.service'; +import { NotificationDemoService } from './pages/notification/notification-demo.service'; +import { OverlayPanelDemoService } from './pages/overlay-panel/overlay-panel-demo.service'; +import { PaginatorDemoService } from './pages/paginator/paginator-demo.service'; +import { RadioDemoService } from './pages/radio/radio-demo.service'; +import { ScrollbarDemoService } from './pages/scrollbar/scrollbar-demo.service'; +import { SegmentedControlDemoService } from './pages/segmented-control/segmented-control-demo.service'; +import { SegmentedControlToggleDemoService } from './pages/segmented-control-toggle/segmented-control-toggle-demo.service'; +import { SelectDemoService } from './pages/select/select-demo.service'; +import { SideNavDemoService } from './pages/side-nav/side-nav-demo.service'; +import { SideSheetDemoService } from './pages/side-sheet/side-sheet-demo.service'; +import { SnackbarDemoService } from './pages/snackbar/snackbar-demo.service'; +import { SpinnerDemoService } from './pages/spinner/spinner-demo.service'; +import { SwitchDemoService } from './pages/switch/switch-demo.service'; +import { TabDemoService } from './pages/tab/tab-demo.service'; +import { TableDemoService } from './pages/table/table-demo.service'; +import { TagDemoService } from './pages/tag/tag-demo.service'; +import { TooltipDemoService } from './pages/tooltip/tooltip-demo.service'; -import { Routes } from '@angular/router'; +import { EnvironmentProviders, Provider, Type } from '@angular/core'; +import { Routes, Route } from '@angular/router'; -export const routes: Routes = [ - { - path: 'components/:slug', +const DEMO_IMPORTS: Record Promise>> = { + 'accordion': () => import('./pages/accordion/accordion-demo.component').then((module) => module.AccordionDemoComponent), + 'action-menu': () => import('./pages/action-menu/action-menu-demo.component').then((module) => module.ActionMenuDemoComponent), + 'avatar': () => import('./pages/avatar/avatar-demo.component').then((module) => module.AvatarDemoComponent), + 'badge': () => import('./pages/badge/badge-demo.component').then((module) => module.BadgeDemoComponent), + 'breadcrumb': () => import('./pages/breadcrumb/breadcrumb-demo.component').then((module) => module.BreadcrumbDemoComponent), + 'button': () => import('./pages/button/button-demo.component').then((module) => module.ButtonDemoComponent), + 'card': () => import('./pages/card/card-demo.component').then((module) => module.CardDemoComponent), + 'checkbox': () => import('./pages/checkbox/checkbox-demo.component').then((module) => module.CheckboxDemoComponent), + 'chip': () => import('./pages/chip/chip-demo.component').then((module) => module.ChipDemoComponent), + 'date-picker': () => import('./pages/datepicker/datepicker-demo.component').then((module) => module.DatepickerDemoComponent), + 'dialog': () => import('./pages/dialog/dialog-demo.component').then((module) => module.DialogDemoComponent), + 'divider': () => import('./pages/divider/divider-demo.component').then((module) => module.DividerDemoComponent), + 'fieldset': () => import('./pages/fieldset/fieldset-demo.component').then((module) => module.FieldsetDemoComponent), + 'form-field': () => import('./pages/form-field/form-field-demo.component').then((module) => module.FormFieldDemoComponent), + 'icon': () => import('./pages/icon/icon-demo.component').then((module) => module.IconDemoComponent), + 'icon-button': () => import('./pages/icon-button/icon-button-demo.component').then((module) => module.IconButtonDemoComponent), + 'menu-item': () => import('./pages/menu-item/menu-item-demo.component').then((module) => module.MenuItemDemoComponent), + 'notification': () => import('./pages/notification/notification-demo.component').then((module) => module.NotificationDemoComponent), + 'overlay-panel': () => import('./pages/overlay-panel/overlay-panel-demo.component').then((module) => module.OverlayPanelDemoComponent), + 'paginator': () => import('./pages/paginator/paginator-demo.component').then((module) => module.PaginatorDemoComponent), + 'radio': () => import('./pages/radio/radio-demo.component').then((module) => module.RadioDemoComponent), + 'scrollbar': () => import('./pages/scrollbar/scrollbar-demo.component').then((module) => module.ScrollbarDemoComponent), + 'segmented-control': () => import('./pages/segmented-control/segmented-control-demo.component') + .then((module) => module.SegmentedControlDemoComponent), + 'segmented-control-toggle': () => import('./pages/segmented-control-toggle/segmented-control-toggle-demo.component') + .then((module) => module.SegmentedControlToggleDemoComponent), + 'select': () => import('./pages/select/select-demo.component').then((module) => module.SelectDemoComponent), + 'side-nav': () => import('./pages/side-nav/side-nav-demo.component').then((module) => module.SideNavDemoComponent), + 'side-sheet': () => import('./pages/side-sheet/side-sheet-demo.component').then((module) => module.SideSheetDemoComponent), + 'snackbar': () => import('./pages/snackbar/snackbar-demo.component').then((module) => module.SnackbarDemoComponent), + 'spinner': () => import('./pages/spinner/spinner-demo.component').then((module) => module.SpinnerDemoComponent), + 'switch': () => import('./pages/switch/switch-demo.component').then((module) => module.SwitchDemoComponent), + 'tab': () => import('./pages/tab/tab-demo.component').then((module) => module.TabsDemoComponent), + 'table': () => import('./pages/table/table-demo.component').then((module) => module.TableDemoComponent), + 'tag': () => import('./pages/tag/tag-demo.component').then((module) => module.TagDemoComponent), + 'tooltip': () => import('./pages/tooltip/tooltip-demo.component').then((module) => module.TooltipDemoComponent), +}; + +function buildComponentRoute( + slug: string, + demoService: Provider | EnvironmentProviders, +): Route { + const componentImport = DEMO_IMPORTS[slug]; + if (!componentImport) { + throw new Error(`No component import found for slug: ${slug}`); + } + return { + path: slug, component: ComponentDetailsComponent, - }, - { - path: 'components/component-details', component: ComponentDetailsComponent, - }, - { - path: 'components/accordion', - loadComponent: () => import('./pages/accordion/accordion-demo.component').then((module) => module.AccordionDemoComponent), - }, - { - path: 'components/action-menu', - loadComponent: () => import('./pages/action-menu/action-menu-demo.component').then((module) => module.ActionMenuDemoComponent), - }, - { - path: 'components/avatar', - loadComponent: () => import('./pages/avatar/avatar-demo.component').then((module) => module.AvatarDemoComponent), - }, - { - path: 'components/badge', - loadComponent: () => import('./pages/badge/badge-demo.component').then((module) => module.BadgeDemoComponent), - }, - { - path: 'components/breadcrumb', - loadComponent: () => import('./pages/breadcrumb/breadcrumb-demo.component').then((module) => module.BreadcrumbDemoComponent), - }, - { - path: 'components/button', - loadComponent: () => import('./pages/button/button-demo.component').then((module) => module.ButtonDemoComponent), - }, - { - path: 'components/card', - loadComponent: () => import('./pages/card/card-demo.component').then((module) => module.CardDemoComponent), - }, - { - path: 'components/checkbox', - loadComponent: () => import('./pages/checkbox/checkbox-demo.component').then((module) => module.CheckboxDemoComponent), - }, - { - path: 'components/chip', - loadComponent: () => import('./pages/chip/chip-demo.component').then((module) => module.ChipDemoComponent), - }, - { - path: 'components/datepicker', - loadComponent: () => import('./pages/datepicker/datepicker-demo.component').then((module) => module.DatepickerDemoComponent), - }, - { - path: 'components/dialog', - loadComponent: () => import('./pages/dialog/dialog-demo.component').then((module) => module.DialogDemoComponent), - }, - { - path: 'components/divider', - loadComponent: () => import('./pages/divider/divider-demo.component').then((module) => module.DividerDemoComponent), - }, - { - path: 'components/fieldset', - loadComponent: () => import('./pages/fieldset/fieldset-demo.component').then((module) => module.FieldsetDemoComponent), - }, - { - path: 'components/form-field', - loadComponent: () => import('./pages/form-field/form-field-demo.component').then((module) => module.FormFieldDemoComponent), - }, - { - path: 'components/icon', - loadComponent: () => import('./pages/icon/icon-demo.component').then((module) => module.IconDemoComponent), - }, - { - path: 'components/icon-button', - loadComponent: () => import('./pages/icon-button/icon-button-demo.component').then((module) => module.IconButtonDemoComponent), - }, - { - path: 'components/menu-item', - loadComponent: () => import('./pages/menu-item/menu-item-demo.component').then((module) => module.MenuItemDemoComponent), - }, - { - path: 'components/notification', - loadComponent: () => import('./pages/notification/notification-demo.component').then((module) => module.NotificationDemoComponent), - }, - { - path: 'components/overlay-panel', - loadComponent: () => import('./pages/overlay-panel/overlay-panel-demo.component').then((module) => module.OverlayPanelDemoComponent), - }, - { - path: 'components/paginator', - loadComponent: () => import('./pages/paginator/paginator-demo.component').then((module) => module.PaginatorDemoComponent), - }, - { - path: 'components/radio', - loadComponent: () => import('./pages/radio/radio-demo.component').then((module) => module.RadioDemoComponent), - }, - { - path: 'components/scrollbar', - loadComponent: () => import('./pages/scrollbar/scrollbar-demo.component').then((module) => module.ScrollbarDemoComponent), - }, - { - path: 'components/segmented-control', - loadComponent: () => - import('./pages/segmented-control/segmented-control-demo.component').then((module) => module.SegmentedControlDemoComponent), - }, - { - path: 'components/segmented-control-toggle', - loadComponent: () => - import('./pages/segmented-control-toggle/segmented-control-toggle-demo.component').then( - (module) => module.SegmentedControlToggleDemoComponent, - ), - }, - { - path: 'components/select', - loadComponent: () => import('./pages/select/select-demo.component').then((module) => module.SelectDemoComponent), - }, - { - path: 'components/side-nav', - loadComponent: () => import('./pages/side-nav/side-nav-demo.component').then((module) => module.SideNavDemoComponent), - }, - { - path: 'components/side-sheet', - loadComponent: () => import('./pages/side-sheet/side-sheet-demo.component').then((module) => module.SideSheetDemoComponent), - }, - { - path: 'components/snackbar', - loadComponent: () => import('./pages/snackbar/snackbar-demo.component').then((module) => module.SnackbarDemoComponent), - }, - { - path: 'components/spinner', - loadComponent: () => import('./pages/spinner/spinner-demo.component').then((module) => module.SpinnerDemoComponent), - }, - { - path: 'components/switch', - loadComponent: () => import('./pages/switch/switch-demo.component').then((module) => module.SwitchDemoComponent), - }, - { - path: 'components/tab', - loadComponent: () => import('./pages/tab/tab-demo.component').then((module) => module.TabsDemoComponent), - }, - { - path: 'components/table', - loadComponent: () => import('./pages/table/table-demo.component').then((module) => module.TableDemoComponent), - }, - { - path: 'components/tag', - loadComponent: () => import('./pages/tag/tag-demo.component').then((module) => module.TagDemoComponent), - }, - { - path: 'components/tooltip', - loadComponent: () => import('./pages/tooltip/tooltip-demo.component').then((module) => module.TooltipDemoComponent), - }, + providers: [demoService], + children: [ + { + path: '', redirectTo: 'demo', pathMatch: 'full', + }, + { + path: 'demo', + loadComponent: componentImport, + }, + { + path: 'guidelines', + loadComponent: () => import('./components/tabs/guidelines/guidelines.component').then((module) => module.GuidelinesComponent), + }, + { + path: 'api', + loadComponent: () => import('./components/tabs/api/api.component').then((module) => module.ApiComponent), + }, + ], + }; +} + +export const routes: Routes = [ { path: 'components', - loadComponent: () => import('./pages/components/components.component').then((module) => module.ComponentsComponent), + children: [ + { + path: '', + loadComponent: () => import('./pages/components/components.component').then((module) => module.ComponentsComponent), + }, + + buildComponentRoute('accordion', AccordionDemoService), + buildComponentRoute('action-menu', ActionMenuDemoService), + buildComponentRoute('avatar', AvatarDemoService), + buildComponentRoute('badge', BadgeDemoService), + buildComponentRoute('breadcrumb', BreadcrumbDemoService), + buildComponentRoute('button', ButtonDemoService), + buildComponentRoute('card', CardDemoService), + buildComponentRoute('checkbox', CheckboxDemoService), + buildComponentRoute('chip', ChipDemoService), + buildComponentRoute('date-picker', DatepickerDemoService), + buildComponentRoute('dialog', DialogDemoService), + buildComponentRoute('divider', DividerDemoService), + buildComponentRoute('fieldset', FieldsetDemoService), + buildComponentRoute('form-field', FormFieldDemoService), + buildComponentRoute('icon', IconDemoService), + buildComponentRoute('icon-button', IconButtonDemoService), + buildComponentRoute('menu-item', MenuItemDemoService), + buildComponentRoute('notification', NotificationDemoService), + buildComponentRoute('overlay-panel', OverlayPanelDemoService), + buildComponentRoute('paginator', PaginatorDemoService), + buildComponentRoute('radio', RadioDemoService), + buildComponentRoute('scrollbar', ScrollbarDemoService), + buildComponentRoute('segmented-control', SegmentedControlDemoService), + buildComponentRoute('segmented-control-toggle', SegmentedControlToggleDemoService), + buildComponentRoute('select', SelectDemoService), + buildComponentRoute('side-nav', SideNavDemoService), + buildComponentRoute('side-sheet', SideSheetDemoService), + buildComponentRoute('snackbar', SnackbarDemoService), + buildComponentRoute('spinner', SpinnerDemoService), + buildComponentRoute('switch', SwitchDemoService), + buildComponentRoute('tab', TabDemoService), + buildComponentRoute('table', TableDemoService), + buildComponentRoute('tag', TagDemoService), + buildComponentRoute('tooltip', TooltipDemoService), + ], }, { path: 'index', diff --git a/projects/demo/src/app/components/article-card/article-card.component.ts b/projects/demo/src/app/components/article-card/article-card.component.ts index d08b2160..30ec50d1 100644 --- a/projects/demo/src/app/components/article-card/article-card.component.ts +++ b/projects/demo/src/app/components/article-card/article-card.component.ts @@ -6,7 +6,6 @@ import { IdsCardComponent } from '@i-cell/ids-angular/card'; @Component({ selector: 'app-article-card', - standalone: true, templateUrl: './article-card.component.html', styleUrl: './article-card.component.scss', imports: [ diff --git a/projects/demo/src/app/components/badge/badge.component.ts b/projects/demo/src/app/components/badge/badge.component.ts index 9767389c..56cab527 100644 --- a/projects/demo/src/app/components/badge/badge.component.ts +++ b/projects/demo/src/app/components/badge/badge.component.ts @@ -3,7 +3,6 @@ import { IdsIconComponent } from '@i-cell/ids-angular/icon/icon.component'; @Component({ selector: 'app-badge', - standalone: true, imports: [IdsIconComponent], templateUrl: './badge.component.html', styleUrl: './badge.component.scss', diff --git a/projects/demo/src/app/components/content-card/content-card.component.ts b/projects/demo/src/app/components/content-card/content-card.component.ts index bc983799..4197d30b 100644 --- a/projects/demo/src/app/components/content-card/content-card.component.ts +++ b/projects/demo/src/app/components/content-card/content-card.component.ts @@ -1,7 +1,5 @@ -// import { Badge } from '../../model/badge'; import { ContentCardData } from '../../model/contentCardData'; import { SafeHtmlPipe } from '../../shared/pipes/safe-html.pipe'; -// import { Image } from '../../model/image'; import { BadgeComponent } from '../badge/badge.component'; import { ImageComponent } from '../image/image.component'; @@ -12,7 +10,6 @@ import { IdsCardBodyDirective } from '@i-cell/ids-angular/card/card-body.directi @Component({ selector: 'app-content-card', - standalone: true, imports: [ ImageComponent, IdsCardComponent, diff --git a/projects/demo/src/app/components/control-table/control-table.component.html b/projects/demo/src/app/components/control-table/control-table.component.html index 1ce050a8..2872db54 100644 --- a/projects/demo/src/app/components/control-table/control-table.component.html +++ b/projects/demo/src/app/components/control-table/control-table.component.html @@ -1,95 +1,110 @@ - - + +
+

{{ _caption() | sentenceCase }} controls

+
- - - - - - - - - + + @for (flatControl of _flatControls(); track $index) { +
+
{{ flatControl.name }}
-
- @for (control of _flatControls(); track $index) { - - - - - - - + + } - -
- {{ _caption() | sentenceCase }} controls -
NameDescriptionTypeDefaultValue
{{ control.name }}{{ control.description }} - {{ control.type }} - - {{ control.default }} - - @let disabled = control.disabled ?? false; +
+ @let disabled = flatControl.disabled ?? false; - @switch (control.control) { - @case (_demoControl.CHECKBOX) { - } @case (_demoControl.SELECT) { - + + + + @for (item of flatControl.list; track $index) { + {{ item }} + } + + + } @case (_demoControl.NUMBER) { - + + + } + @case (_demoControl.DATE) { - + + + + + } @case (_demoControl.NUMBERARRAY) { - + + + } @default { - + + + } } -
+ + diff --git a/projects/demo/src/app/components/control-table/control-table.component.scss b/projects/demo/src/app/components/control-table/control-table.component.scss index 0d865b78..53df927b 100644 --- a/projects/demo/src/app/components/control-table/control-table.component.scss +++ b/projects/demo/src/app/components/control-table/control-table.component.scss @@ -1,25 +1,36 @@ -table { - width: 100%; +.ids-card-title { + color: var(--smc-reference-container-color-fg-secondary-fixed-darker-30, #1e293b); + + font-family: Montserrat; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 24px; +} - caption { - text-align-last: left; - font-weight: 600; - color: var(--ids-smc-colors-surface-darker-60); - } +.control-row { + display: flex; + align-items: center; + padding: 10px 0; +} - & > thead > tr > th { - font-size: 0.7rem; - color: var(--ids-smc-colors-surface-darker-50); - font-weight: 500; - } +.control-name { + flex: 0 0 150px; + color: var(--smc-reference-container-color-fg-secondary-fixed-default, #64748b); + font-family: Montserrat; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 24px; + letter-spacing: 0.5px; +} - & > tbody > tr > td { - max-width: 400px; - } +.control-input { + display: flex; + align-items: center; + flex: 1; } -code { - background-color: var(--ids-smc-colors-surface-darker-20); - border-radius: 4px; - padding: 2px 6px; +.component-width { + width: 100%; } diff --git a/projects/demo/src/app/components/control-table/control-table.component.ts b/projects/demo/src/app/components/control-table/control-table.component.ts index 678c7a9e..79ad0b24 100644 --- a/projects/demo/src/app/components/control-table/control-table.component.ts +++ b/projects/demo/src/app/components/control-table/control-table.component.ts @@ -1,16 +1,42 @@ import { DemoControl, DemoControlConfig, DemoControlItem } from '../../../types/demo-control.type'; +import { CommonModule } from '@angular/common'; import { Component, computed, input, model, output } from '@angular/core'; import { FormsModule } from '@angular/forms'; +import { IdsCardBodyDirective, IdsCardComponent, IdsCardHeaderComponent, IdsCardTitleDirective } from '@i-cell/ids-angular/card'; import { IdsSentenceCasePipe } from '@i-cell/ids-angular/core'; +import { IdsDatepickerTriggerComponent, IdsDatepickerDirective } from '@i-cell/ids-angular/datepicker'; +import { + IdsFormFieldComponent, + IdsInputDirective, + IdsOptionComponent, + IdsOptionGroupComponent, + IdsSuffixDirective, +} from '@i-cell/ids-angular/forms'; +import { IdsSelectComponent } from '@i-cell/ids-angular/select'; +import { IdsSwitchComponent } from '@i-cell/ids-angular/switch'; const DEFAULT_CONTROL_TABLE_PADDING = 8; @Component({ selector: 'app-control-table', imports: [ + CommonModule, IdsSentenceCasePipe, FormsModule, + IdsSwitchComponent, + IdsSelectComponent, + IdsFormFieldComponent, + IdsOptionComponent, + IdsOptionGroupComponent, + IdsCardComponent, + IdsCardTitleDirective, + IdsCardBodyDirective, + IdsCardHeaderComponent, + IdsInputDirective, + IdsDatepickerDirective, + IdsSuffixDirective, + IdsDatepickerTriggerComponent, ], templateUrl: './control-table.component.html', styleUrl: './control-table.component.scss', @@ -21,7 +47,7 @@ export class ControlTableComponent> { public controlName = input(); public controlConfig = input>(); public model = model.required(); - + public modelChange = output(); public resetted = output(); protected _demoControl = DemoControl; @@ -41,11 +67,11 @@ export class ControlTableComponent> { ctrl, ]) => { const listToDisplay = ctrl.control === 'select' ? ctrl.list : undefined; - return ({ + return { name: key, ...ctrl, list: listToDisplay, - }); + }; }); }); @@ -60,7 +86,10 @@ export class ControlTableComponent> { } private _stringToArray(value: string): string[] { - const arr = value.split(',').map((item) => item.trim()).filter(Boolean); + const arr = value + .split(',') + .map((item) => item.trim()) + .filter(Boolean); if (arr.length === 0) { return []; } diff --git a/projects/demo/src/app/components/hero/hero.component.html b/projects/demo/src/app/components/hero/hero.component.html index 3426ce29..a29c050e 100644 --- a/projects/demo/src/app/components/hero/hero.component.html +++ b/projects/demo/src/app/components/hero/hero.component.html @@ -3,7 +3,7 @@
@if (heroData().isBackButton) { }

{{ heroData().title }}

diff --git a/projects/demo/src/app/components/hero/hero.component.ts b/projects/demo/src/app/components/hero/hero.component.ts index bb2adfc1..14da54fc 100644 --- a/projects/demo/src/app/components/hero/hero.component.ts +++ b/projects/demo/src/app/components/hero/hero.component.ts @@ -1,4 +1,3 @@ -/* eslint-disable no-magic-numbers */ import { HeroData } from '../../model/heroData'; import { SafeHtmlPipe } from '../../shared/pipes/safe-html.pipe'; @@ -7,9 +6,10 @@ import { Component, input, OnDestroy, OnInit, inject as angularInject } from '@a import { IdsIconComponent } from '@i-cell/ids-angular/icon'; import { IdsIconButtonComponent } from '@i-cell/ids-angular/icon-button'; +const SIGNAL_UPDATE_DELAY_MS = 50; + @Component({ selector: 'app-hero', - standalone: true, imports: [ IdsIconComponent, IdsIconButtonComponent, @@ -19,7 +19,6 @@ import { IdsIconButtonComponent } from '@i-cell/ids-angular/icon-button'; styleUrl: './hero.component.scss', }) export class HeroComponent implements OnDestroy, OnInit { - public static readonly SignalUpdateDelayMs = 50; public heroData = input.required(); public currentImageUrl = ''; private _observer: MutationObserver | undefined; @@ -49,7 +48,7 @@ export class HeroComponent implements OnDestroy, OnInit { // If heroData is empty, wait for signal update before setting image if (!data.imageUrlLight && !data.imageUrlDark && !data.imageUrl) { // Try again after a short delay (wait for signal update) - setTimeout(() => this._updateImageBasedOnTheme(), HeroComponent.SignalUpdateDelayMs); + setTimeout(() => this._updateImageBasedOnTheme(), SIGNAL_UPDATE_DELAY_MS); return; } diff --git a/projects/demo/src/app/components/image/image.component.ts b/projects/demo/src/app/components/image/image.component.ts index fbd5c137..8f489045 100644 --- a/projects/demo/src/app/components/image/image.component.ts +++ b/projects/demo/src/app/components/image/image.component.ts @@ -3,7 +3,6 @@ import { Component, input, OnInit, OnDestroy, computed } from '@angular/core'; @Component({ selector: 'app-image', - standalone: true, imports: [NgClass], templateUrl: './image.component.html', styleUrl: './image.component.scss', diff --git a/projects/demo/src/app/components/prop-table/prop-table-element.ts b/projects/demo/src/app/components/prop-table/prop-table-element.ts new file mode 100644 index 00000000..cbf4bfdd --- /dev/null +++ b/projects/demo/src/app/components/prop-table/prop-table-element.ts @@ -0,0 +1,7 @@ +export interface PropTableElement { + name?: string + description?: string; + type?: string; + values?: string[]; + default?: string; +} diff --git a/projects/demo/src/app/components/prop-table/prop-table.component.html b/projects/demo/src/app/components/prop-table/prop-table.component.html new file mode 100644 index 00000000..a86ea62f --- /dev/null +++ b/projects/demo/src/app/components/prop-table/prop-table.component.html @@ -0,0 +1,24 @@ +
+ + + @if (row.values && row.values.length > 0) { +
    + @for (value of row.values; track value) { +
  • + {{ value }} +
    • + } +
+ } + + +
diff --git a/projects/demo/src/app/pages/accordion/accordion-demo.component.scss b/projects/demo/src/app/components/prop-table/prop-table.component.scss similarity index 100% rename from projects/demo/src/app/pages/accordion/accordion-demo.component.scss rename to projects/demo/src/app/components/prop-table/prop-table.component.scss diff --git a/projects/demo/src/app/components/prop-table/prop-table.component.ts b/projects/demo/src/app/components/prop-table/prop-table.component.ts new file mode 100644 index 00000000..2e43e0f2 --- /dev/null +++ b/projects/demo/src/app/components/prop-table/prop-table.component.ts @@ -0,0 +1,125 @@ +import { PropTableElement } from './prop-table-element'; + +import { CommonModule } from '@angular/common'; +import { Component, input, OnInit, ViewEncapsulation } from '@angular/core'; +import { DemoControlConfig } from '@demo-types/demo-control.type'; +import { IdsTableCellTemplateDirective, IdsTableColumnDef, IdsTableComponent, IdsTableRequestFactory, ServerSideDataSource } from '@i-cell/ids-angular/table'; +import { TranslateModule } from '@ngx-translate/core'; +import { of } from 'rxjs'; + +@Component({ + selector: 'app-prop-table', + templateUrl: './prop-table.component.html', + imports: [ + CommonModule, + IdsTableComponent, + IdsTableCellTemplateDirective, + TranslateModule, + ], + styleUrls: ['./prop-table.component.scss'], + encapsulation: ViewEncapsulation.None, +}) +export class PropTableComponent implements OnInit { + public config = input.required[]>(); + + protected _dataSource: ServerSideDataSource; + + public colDefs: IdsTableColumnDef[] = [ + { + id: 'name', + label: 'Prop name', + field: 'name', + }, + { + id: 'description', + label: 'Description', + field: 'description', + }, + { + id: 'type', + label: 'Type', + field: 'type', + }, + { + id: 'values', + label: 'Value', + field: 'values', + cellRenderer: 'valueListTemplate', + }, + { + id: 'default', + label: 'Default', + field: 'default', + }, + ]; + + constructor() { + this._dataSource = new ServerSideDataSource(() => of({ + resultList: [] as PropTableElement[], + paginationParams: { totalRows: 0, rows: 100, page: 1 }, + })); + } + + public ngOnInit(): void { + this._updateDataSource(); + } + + private _updateDataSource(): void { + let data: PropTableElement[] = []; + + const cfg = this.config(); + + if (Array.isArray(cfg)) { + data = cfg.flatMap((config) => this._transformConfigToRows(config)); + } else { + data = this._transformConfigToRows(cfg); + } + + const requestFactory: IdsTableRequestFactory = () => of({ + resultList: data, + paginationParams: { + totalRows: data.length, + rows: data.length, + page: 1, + }, + }); + + this._dataSource = new ServerSideDataSource(requestFactory); + this._dataSource.refreshData(); + } + + private _transformConfigToRows(config: DemoControlConfig): PropTableElement[] { + type ControlItem = { + list?: string[]; + type?: string; + description?: string; + default?: unknown; + }; + + return Object.entries(config as Record).map(([ + key, + item, + ]) => { + let values: string[] = []; + + if (item.list) { + values = item.list; + } else if (item.type === 'boolean') { + values = [ + 'true', + 'false', + ]; + } else if (!item.list) { + values = ['-']; + } + + return { + name: key, + description: item.description || '', + type: item.type, + values: values, + default: item.default === undefined ? undefined : String(item.default), + }; + }); + } +} diff --git a/projects/demo/src/app/components/tabs/api/api.component.html b/projects/demo/src/app/components/tabs/api/api.component.html new file mode 100644 index 00000000..2ecd5537 --- /dev/null +++ b/projects/demo/src/app/components/tabs/api/api.component.html @@ -0,0 +1,3 @@ +
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum consequuntur voluptas numquam omnis dolorum iure, odio debitis sequi aut fugit magni, ullam eos natus quibusdam, ratione at repellendus harum eum. +
diff --git a/projects/demo/src/app/components/tabs/api/api.component.ts b/projects/demo/src/app/components/tabs/api/api.component.ts new file mode 100644 index 00000000..6a9d54ff --- /dev/null +++ b/projects/demo/src/app/components/tabs/api/api.component.ts @@ -0,0 +1,8 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-api', + templateUrl: './api.component.html', +}) +export class ApiComponent { +} diff --git a/projects/demo/src/app/components/tabs/demo-and-code/demo-and-code.component.html b/projects/demo/src/app/components/tabs/demo-and-code/demo-and-code.component.html new file mode 100644 index 00000000..79ee5a0e --- /dev/null +++ b/projects/demo/src/app/components/tabs/demo-and-code/demo-and-code.component.html @@ -0,0 +1,62 @@ +
+ Updated 25 Feb 2025 +

Examples

+ + +
+
+ +
+
+ +
+
+ @if (isOpen()) { + + } + +
diff --git a/projects/demo/src/app/components/tabs/demo-and-code/demo-and-code.component.scss b/projects/demo/src/app/components/tabs/demo-and-code/demo-and-code.component.scss new file mode 100644 index 00000000..f937ee22 --- /dev/null +++ b/projects/demo/src/app/components/tabs/demo-and-code/demo-and-code.component.scss @@ -0,0 +1,33 @@ +ids-chip, +#copy { + border-style: solid; +} +#demo { + gap: 0px !important; +} +#footer { + @apply border-t border-solid border-ids-page-fg-surface-lighter-40; +} +#header { + @apply border-b border-solid border-ids-page-fg-surface-lighter-40; +} + +:host { + width: 100%; + display: block; +} + +.demohost-container { + display: flex; + flex: 1 0 0; + align-self: stretch; + + &::ng-deep { + > :not(router-outlet) { + width: 100%; + height: 100%; + display: flex; + + } + } +} \ No newline at end of file diff --git a/projects/demo/src/app/components/tabs/demo-and-code/demo-and-code.component.ts b/projects/demo/src/app/components/tabs/demo-and-code/demo-and-code.component.ts new file mode 100644 index 00000000..bf09c9d1 --- /dev/null +++ b/projects/demo/src/app/components/tabs/demo-and-code/demo-and-code.component.ts @@ -0,0 +1,40 @@ +import { CommonModule } from '@angular/common'; +import { Component, EventEmitter, Output, signal } from '@angular/core'; +import { IdsButtonComponent } from '@i-cell/ids-angular/button'; +import { IdsCardComponent } from '@i-cell/ids-angular/card'; +import { IdsChipComponent } from '@i-cell/ids-angular/chip'; +import { IdsIconComponent } from '@i-cell/ids-angular/icon'; +import { IdsIconButtonComponent } from '@i-cell/ids-angular/icon-button'; + +@Component({ + selector: 'app-demo-and-code', + imports: [ + IdsChipComponent, + IdsCardComponent, + IdsIconComponent, + IdsIconButtonComponent, + IdsButtonComponent, + CommonModule, + + ], + templateUrl: './demo-and-code.component.html', +}) +export class DemoAndCodeComponent { + @Output() public resetDemo = new EventEmitter(); + + public isOpen = signal(false); + public isDark = signal(false); + + public toggleFooter(): void { + this.isOpen.update((open) => !open); + } + + public toggleDark(): void { + this.isDark.update((dark) => !dark); + } + + public onResetClick(): void { + this.resetDemo.emit(); + } + +} diff --git a/projects/demo/src/app/components/tabs/guidelines/guidelines.component.html b/projects/demo/src/app/components/tabs/guidelines/guidelines.component.html new file mode 100644 index 00000000..b43e569f --- /dev/null +++ b/projects/demo/src/app/components/tabs/guidelines/guidelines.component.html @@ -0,0 +1,17 @@ +
+
+ Updated 25 Feb 2025 + +
+ + @for (item of componentBlocks; track $index) { + @if (item.type === "heading") { +

+ {{ item.heading }} +

+ } + @if (item.type === "card") { + + } + } +
diff --git a/projects/demo/src/app/components/tabs/guidelines/guidelines.component.ts b/projects/demo/src/app/components/tabs/guidelines/guidelines.component.ts new file mode 100644 index 00000000..d7ad2cab --- /dev/null +++ b/projects/demo/src/app/components/tabs/guidelines/guidelines.component.ts @@ -0,0 +1,20 @@ +import { ContentCardData } from '../../../model/contentCardData'; +import { ContentCardComponent } from '../../content-card/content-card.component'; + +import { Component } from '@angular/core'; +import { IdsChipComponent } from '@i-cell/ids-angular/chip'; + +type ComponentBlock = { type: 'heading'; heading: string } | (ContentCardData & { type: 'card' }); + +@Component({ + selector: 'app-guidelines', + imports: [ + IdsChipComponent, + ContentCardComponent, + ], + templateUrl: './guidelines.component.html', +}) +export class GuidelinesComponent { + public componentBlocks: ComponentBlock[] = []; + +} diff --git a/projects/demo/src/app/components/tryout/tryout-controls.component.html b/projects/demo/src/app/components/tryout/tryout-controls.component.html new file mode 100644 index 00000000..261e13b8 --- /dev/null +++ b/projects/demo/src/app/components/tryout/tryout-controls.component.html @@ -0,0 +1,5 @@ +
+
+ +
+
\ No newline at end of file diff --git a/projects/demo/src/app/components/tryout/tryout-controls.component.ts b/projects/demo/src/app/components/tryout/tryout-controls.component.ts new file mode 100644 index 00000000..c9138412 --- /dev/null +++ b/projects/demo/src/app/components/tryout/tryout-controls.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-tryout-controls', + templateUrl: './tryout-controls.component.html', + styleUrl: './tryout.component.scss', +}) +export class TryoutControlComponent { + +} diff --git a/projects/demo/src/app/components/tryout/tryout.component.html b/projects/demo/src/app/components/tryout/tryout.component.html index d2675070..b705867d 100644 --- a/projects/demo/src/app/components/tryout/tryout.component.html +++ b/projects/demo/src/app/components/tryout/tryout.component.html @@ -1,16 +1,3 @@ -
-

{{ title() }}

- -
-
- -
-
- -
-
diff --git a/projects/demo/src/app/components/tryout/tryout.component.scss b/projects/demo/src/app/components/tryout/tryout.component.scss index 040bfd54..ab7c488b 100644 --- a/projects/demo/src/app/components/tryout/tryout.component.scss +++ b/projects/demo/src/app/components/tryout/tryout.component.scss @@ -3,10 +3,11 @@ display: flex; flex-direction: column; gap: 1rem; - padding: 2rem; box-sizing: border-box; height: 100%; overflow: hidden; + justify-content: center; + align-items: stretch; } .title { @@ -24,14 +25,20 @@ } section { - padding: 2rem; box-sizing: border-box; display: flex; flex-direction: column; - align-items: center; + align-items: stretch; gap: 4rem; &.component { + padding: 2rem; + + display: flex; + justify-content: center; + align-items: center; + flex: 1 0 0; + &.light { color: var(--ids-smc-colors-surface-lighter-10); background-color: var(--ids-smc-colors-surface-darker-80); diff --git a/projects/demo/src/app/components/tryout/tryout.component.ts b/projects/demo/src/app/components/tryout/tryout.component.ts index 9925a3fc..31cdacbe 100644 --- a/projects/demo/src/app/components/tryout/tryout.component.ts +++ b/projects/demo/src/app/components/tryout/tryout.component.ts @@ -1,23 +1,12 @@ -import { Component, input, output } from '@angular/core'; -import { IdsIconComponent } from '@i-cell/ids-angular/icon'; -import { IdsIconButtonComponent } from '@i-cell/ids-angular/icon-button'; +import { Component, input } from '@angular/core'; @Component({ selector: 'app-tryout', - imports: [ - IdsIconButtonComponent, - IdsIconComponent, - ], templateUrl: './tryout.component.html', styleUrl: './tryout.component.scss', }) export class TryoutComponent { - public title = input.required(); - public hasDarkBackground = input(false); - public resetted = output(); + public hasDarkBackground = input(false); - protected _reset(): void { - this.resetted.emit(); - } } diff --git a/projects/demo/src/app/model/componentEntry.ts b/projects/demo/src/app/model/componentEntry.ts index 4700ae3d..3b47eb82 100644 --- a/projects/demo/src/app/model/componentEntry.ts +++ b/projects/demo/src/app/model/componentEntry.ts @@ -1,4 +1,8 @@ +import { ContentCardData } from './contentCardData'; +export type ComponentBlock = { type: 'heading'; heading: string } | (ContentCardData & { type: 'card' }); + export interface ComponentEntry { + componentBlocks: ComponentContent[]; id: string; title: string; slug: string; diff --git a/projects/demo/src/app/pages/accordion/accordion-demo.component.html b/projects/demo/src/app/pages/accordion/accordion-demo.component.html index 4293b7d9..a6b8decf 100644 --- a/projects/demo/src/app/pages/accordion/accordion-demo.component.html +++ b/projects/demo/src/app/pages/accordion/accordion-demo.component.html @@ -1,33 +1,51 @@ - - - - - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text - ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. - - - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text - ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. - - - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text - ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. - - - + +
+ + + + + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy + text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. + + + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy + text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. + + + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy + text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. + + + + +
- - +
+ + + +
+ +
+

Props

+ + +
diff --git a/projects/demo/src/app/pages/accordion/accordion-demo.component.ts b/projects/demo/src/app/pages/accordion/accordion-demo.component.ts index ea0bdca9..afbb9fe5 100644 --- a/projects/demo/src/app/pages/accordion/accordion-demo.component.ts +++ b/projects/demo/src/app/pages/accordion/accordion-demo.component.ts @@ -1,135 +1,46 @@ +import { AccordionDemoService } from './accordion-demo.service'; + import { ControlTableComponent } from '../../components/control-table/control-table.component'; +import { PropTableComponent } from '../../components/prop-table/prop-table.component'; +import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; +import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; -import { Component, viewChild } from '@angular/core'; +import { Component, inject, OnDestroy, OnInit, viewChild } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; -import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; -import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; -import { IDS_ACCORDION_DEFAULT_CONFIG_FACTORY, IdsAccordionAppearance, IdsAccordionAppearanceType, IdsAccordionComponent, IdsAccordionItemComponent } from '@i-cell/ids-angular/accordion'; -import { IdsButtonAppearance, IdsButtonAppearanceType, IdsButtonVariant, IdsButtonVariantType } from '@i-cell/ids-angular/button'; -import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; +import { IdsAccordionComponent, IdsAccordionItemComponent } from '@i-cell/ids-angular/accordion'; import { TranslateModule } from '@ngx-translate/core'; - -const defaultConfig = IDS_ACCORDION_DEFAULT_CONFIG_FACTORY(); - -type AccordionInputControls = { - size: IdsSizeType, - appearance: IdsAccordionAppearanceType, - summary: string, - disabled: boolean, - multi: boolean, - btnSize: IdsSizeType, - btnAppearance: IdsButtonAppearanceType, - btnVariant: IdsButtonVariantType, - expandBtnLabel: string, - collapseBtnLabel: string, - hasLeadingIcon: boolean, - hasTrailingIcon: boolean, -}; +import { Subscription } from 'rxjs'; @Component({ selector: 'app-accordion-demo', imports: [ TryoutComponent, - ControlTableComponent, IdsAccordionComponent, IdsAccordionItemComponent, TranslateModule, FormsModule, + DemoAndCodeComponent, + ControlTableComponent, + TryoutControlComponent, + PropTableComponent, ], templateUrl: './accordion-demo.component.html', - styleUrls: [ - '../demo-page.scss', - './accordion-demo.component.scss', - ], + styleUrls: ['../demo-page.scss'], }) -export class AccordionDemoComponent { - private _accordion = viewChild('accordion'); - protected _inputControlConfig: DemoControlConfig = { - size: { - description: 'Accordion size.', - type: 'IdsSizeType', - default: defaultConfig.size, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - appearance: { - description: 'Accordion appearance.', - type: 'IdsAccordionAppearanceType', - default: defaultConfig.appearance, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsAccordionAppearance), - }, - summary: { - description: 'Summary of accordion', - type: 'string', - default: '-', - demoDefault: 'Summary text', - }, - disabled: { - description: 'Whether the accordion is disabled or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - multi: { - description: 'Allow multiple accordion items to be open.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - btnSize: { - description: 'Button size.', - type: 'IdsSizeType', - default: defaultConfig.btnSize, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - btnAppearance: { - description: 'Button appearance.', - type: 'IdsButtonAppearanceType', - default: defaultConfig.btnAppearance, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsButtonAppearance), - }, - btnVariant: { - description: 'Button variant.', - type: 'IdsButtonVariantType', - default: defaultConfig.btnVariant, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsButtonVariant), - }, - expandBtnLabel: { - description: 'Label for expand all button.', - type: 'string', - default: defaultConfig.expandBtnLabel, - }, - collapseBtnLabel: { - description: 'Label for collapse all button.', - type: 'string', - default: defaultConfig.collapseBtnLabel, - }, - hasLeadingIcon: { - description: 'Whether the button has leading icon or not.', - type: 'boolean', - default: defaultConfig.hasLeadingIcon, - control: DemoControl.CHECKBOX, - }, - hasTrailingIcon: { - description: 'Whether the button has trailing icon or not.', - type: 'boolean', - default: defaultConfig.hasTrailingIcon, - control: DemoControl.CHECKBOX, - }, - }; +export class AccordionDemoComponent implements OnInit, OnDestroy { + protected _accordionDemoService = inject(AccordionDemoService); - public defaults = getDefaultFromDemoConfig(this._inputControlConfig); + private _accordion = viewChild('accordion'); + private _resetSubscription: Subscription | undefined; - public model: AccordionInputControls = { ...this.defaults }; + public ngOnInit(): void { + this._resetSubscription = this._accordionDemoService.reset$.subscribe(() => { + this._accordion()?.closeAll(); + }); + } - public reset(): void { - this._accordion()?.closeAll(); - this.model = { ...this.defaults }; + public ngOnDestroy(): void { + this._resetSubscription?.unsubscribe(); } } diff --git a/projects/demo/src/app/pages/accordion/accordion-demo.service.ts b/projects/demo/src/app/pages/accordion/accordion-demo.service.ts new file mode 100644 index 00000000..204f7230 --- /dev/null +++ b/projects/demo/src/app/pages/accordion/accordion-demo.service.ts @@ -0,0 +1,117 @@ +import { Injectable } from '@angular/core'; +import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; +import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; +import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; +import { IDS_ACCORDION_DEFAULT_CONFIG_FACTORY, IdsAccordionAppearance, IdsAccordionAppearanceType } from '@i-cell/ids-angular/accordion'; +import { IdsButtonAppearance, IdsButtonAppearanceType, IdsButtonVariant, IdsButtonVariantType } from '@i-cell/ids-angular/button'; +import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; +import { Subject } from 'rxjs'; + +const defaultConfig = IDS_ACCORDION_DEFAULT_CONFIG_FACTORY(); + +type AccordionInputControls = { + size: IdsSizeType; + appearance: IdsAccordionAppearanceType; + summary: string; + disabled: boolean; + multi: boolean; + btnSize: IdsSizeType; + btnAppearance: IdsButtonAppearanceType; + btnVariant: IdsButtonVariantType; + expandBtnLabel: string; + collapseBtnLabel: string; + hasLeadingIcon: boolean; + hasTrailingIcon: boolean; +}; +@Injectable() +export class AccordionDemoService { + private _resetSubject = new Subject(); + public reset$ = this._resetSubject.asObservable(); + + public readonly inputControlConfig: DemoControlConfig = { + size: { + description: 'Accordion size.', + type: 'IdsSizeType', + default: defaultConfig.size, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + appearance: { + description: 'Accordion appearance.', + type: 'IdsAccordionAppearanceType', + default: defaultConfig.appearance, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsAccordionAppearance), + }, + summary: { + description: 'Summary of accordion', + type: 'string', + default: '-', + demoDefault: 'Summary text', + }, + disabled: { + description: 'Whether the accordion is disabled or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + multi: { + description: 'Allow multiple accordion items to be open.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + btnSize: { + description: 'Button size.', + type: 'IdsSizeType', + default: defaultConfig.btnSize, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + btnAppearance: { + description: 'Button appearance.', + type: 'IdsButtonAppearanceType', + default: defaultConfig.btnAppearance, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsButtonAppearance), + }, + btnVariant: { + description: 'Button variant.', + type: 'IdsButtonVariantType', + default: defaultConfig.btnVariant, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsButtonVariant), + }, + expandBtnLabel: { + description: 'Label for expand all button.', + type: 'string', + default: defaultConfig.expandBtnLabel, + }, + collapseBtnLabel: { + description: 'Label for collapse all button.', + type: 'string', + default: defaultConfig.collapseBtnLabel, + }, + hasLeadingIcon: { + description: 'Whether the button has leading icon or not.', + type: 'boolean', + default: defaultConfig.hasLeadingIcon, + control: DemoControl.SWITCH, + }, + hasTrailingIcon: { + description: 'Whether the button has trailing icon or not.', + type: 'boolean', + default: defaultConfig.hasTrailingIcon, + control: DemoControl.SWITCH, + }, + }; + + public defaults = getDefaultFromDemoConfig(this.inputControlConfig); + + public model: AccordionInputControls = { ...this.defaults }; + + public reset(): void { + this.model = { ...this.defaults }; + this._resetSubject.next(); + } +} diff --git a/projects/demo/src/app/pages/action-menu/action-menu-demo.component.html b/projects/demo/src/app/pages/action-menu/action-menu-demo.component.html index b8bf7e87..adcfba8a 100644 --- a/projects/demo/src/app/pages/action-menu/action-menu-demo.component.html +++ b/projects/demo/src/app/pages/action-menu/action-menu-demo.component.html @@ -1,109 +1,130 @@ - - - - - - - @for (_ of items; track $index) { - - } + - - - - - @for (_ of items; track $index) { - } - - } - - - + + + + + + + @for (_ of _actionMenuDemoService.items; track $index) { + + } + + + + +
+ +
+ + + + + + +
+ +
+

Props

- - - - - + +
diff --git a/projects/demo/src/app/pages/action-menu/action-menu-demo.component.scss b/projects/demo/src/app/pages/action-menu/action-menu-demo.component.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/projects/demo/src/app/pages/action-menu/action-menu-demo.component.ts b/projects/demo/src/app/pages/action-menu/action-menu-demo.component.ts index 0c951f92..20a7b100 100644 --- a/projects/demo/src/app/pages/action-menu/action-menu-demo.component.ts +++ b/projects/demo/src/app/pages/action-menu/action-menu-demo.component.ts @@ -1,52 +1,23 @@ +import { ActionMenuDemoService } from './action-menu-demo.service'; + import { ControlTableComponent } from '../../components/control-table/control-table.component'; +import { PropTableComponent } from '../../components/prop-table/prop-table.component'; +import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; +import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; -import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; -import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; import { IdsButtonComponent } from '@i-cell/ids-angular/button'; -import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; import { IdsIconComponent } from '@i-cell/ids-angular/icon'; -import { IdsActionMenuTriggerDirective, IdsMenuItemComponent, IdsMenuItemAppearance, IdsMenuItemAppearanceType, IdsMenuItemVariant, IdsMenuItemVariantType, IDS_MENU_ITEM_DEFAULT_CONFIG_FACTORY } from '@i-cell/ids-angular/menu'; -import { IDS_OVERLAY_PANEL_DEFAULT_CONFIG_FACTORY } from '@i-cell/ids-angular/overlay-panel'; +import { IdsActionMenuTriggerDirective, IdsMenuItemComponent } from '@i-cell/ids-angular/menu'; import { IdsOverlayPanelComponent } from '@i-cell/ids-angular/overlay-panel/overlay-panel.component'; -import { IdsOverlayPanelAppearance, IdsOverlayPanelAppearanceType } from '@i-cell/ids-angular/overlay-panel/types/overlay-panel-appearance.type'; -import { IdsOverlayPanelVariant, IdsOverlayPanelVariantType } from '@i-cell/ids-angular/overlay-panel/types/overlay-panel-variant.type'; import { TranslateModule } from '@ngx-translate/core'; -const overlayPanelDefaultConfig = IDS_OVERLAY_PANEL_DEFAULT_CONFIG_FACTORY(); -const menuItemDefaultConfig = IDS_MENU_ITEM_DEFAULT_CONFIG_FACTORY(); - -type OverlayPanelInputControls = { - appearance: IdsOverlayPanelAppearanceType, - size: IdsSizeType, - variant: IdsOverlayPanelVariantType, -}; - -type OverlayPanelHelperControls = { - testBackgroundColor: 'none' | 'dark', -}; - -type MenuItemInputControls = { - appearance: IdsMenuItemAppearanceType, - size: IdsSizeType, - variant: IdsMenuItemVariantType, -}; - -type MenuItemHelperControls = { - hasLeadingIcon: boolean, - hasTrailingIcon: boolean, - hasDisabledItem: boolean, - showFirstItemLabel: boolean; -}; - @Component({ selector: 'app-action-menu-demo', imports: [ TryoutComponent, - ControlTableComponent, IdsActionMenuTriggerDirective, IdsOverlayPanelComponent, IdsMenuItemComponent, @@ -54,119 +25,14 @@ type MenuItemHelperControls = { IdsIconComponent, TranslateModule, FormsModule, + TryoutControlComponent, + ControlTableComponent, + DemoAndCodeComponent, + PropTableComponent, ], templateUrl: './action-menu-demo.component.html', - styleUrls: [ - '../demo-page.scss', - './action-menu-demo.component.scss', - ], + styleUrls: ['../demo-page.scss'], }) export class ActionMenuDemoComponent { - protected _overlayPanelInputControlConfig: DemoControlConfig = { - appearance: { - description: 'Overlay panel appearance.', - type: 'IdsOverlayPanelAppearanceType', - default: overlayPanelDefaultConfig.appearance, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsOverlayPanelAppearance), - }, - size: { - description: 'Overlay panel size.', - type: 'IdsSizeType', - default: overlayPanelDefaultConfig.size, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - variant: { - description: 'Overlay panel variant.', - type: 'IdsOverlayPanelVariantType', - default: overlayPanelDefaultConfig.variant, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsOverlayPanelVariant), - }, - }; - - protected _overlayPanelHelperControlConfig: DemoControlConfig = { - testBackgroundColor: { - description: 'Text of button', - type: 'string', - default: 'none', - control: DemoControl.SELECT, - list: [ - 'none', - 'dark', - ], - }, - }; - - protected _menuItemInputControlConfig: DemoControlConfig = { - appearance: { - description: 'Menu item appearance.', - type: 'IdsMenuItemAppearanceType', - default: menuItemDefaultConfig.appearance, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsMenuItemAppearance), - }, - size: { - description: 'Menu item size.', - type: 'IdsSizeType', - default: menuItemDefaultConfig.size, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - variant: { - description: 'Menu item variant.', - type: 'IdsMenuItemVariantType', - default: menuItemDefaultConfig.variant, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsMenuItemVariant), - }, - }; - - protected _menuItemHelperControlConfig: DemoControlConfig = { - hasLeadingIcon: { - description: 'Whether the menu items have leading icon or not.', - type: 'boolean', - default: true, - control: DemoControl.CHECKBOX, - }, - hasTrailingIcon: { - description: 'Whether the menu items have trailing icon or not.', - type: 'boolean', - default: true, - control: DemoControl.CHECKBOX, - }, - hasDisabledItem: { - description: 'Whether one menu item is disabled or not. For testing purposes this is the first menu item.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - showFirstItemLabel: { - description: 'Show or hide the menu item\'s label. For testing purposes this is the first menu item.', - type: 'boolean', - default: menuItemDefaultConfig.showLabel, - control: DemoControl.CHECKBOX, - }, - }; - - public overlayPanelDefaults = getDefaultFromDemoConfig(this._overlayPanelInputControlConfig); - public overlayPanelHelperDefaults = getDefaultFromDemoConfig(this._overlayPanelHelperControlConfig); - public menuItemDefaults = getDefaultFromDemoConfig(this._menuItemInputControlConfig); - public menuItemHelperDefaults = getDefaultFromDemoConfig(this._menuItemHelperControlConfig); - - public overlayPanelModel: OverlayPanelInputControls = { ...this.overlayPanelDefaults }; - public overlayPanelHelperModel: OverlayPanelHelperControls = { ...this.overlayPanelHelperDefaults }; - public menuItemModel: MenuItemInputControls = { ...this.menuItemDefaults }; - public menuItemHelperModel: MenuItemHelperControls = { ...this.menuItemHelperDefaults }; - - // eslint-disable-next-line no-magic-numbers - public items = Array(3); - - public reset(): void { - this.overlayPanelModel = { ...this.overlayPanelDefaults }; - this.overlayPanelHelperModel = { ...this.overlayPanelHelperDefaults }; - this.menuItemModel = { ...this.menuItemDefaults }; - this.menuItemHelperModel = { ...this.menuItemHelperDefaults }; - } + protected _actionMenuDemoService = inject(ActionMenuDemoService); } diff --git a/projects/demo/src/app/pages/action-menu/action-menu-demo.service.ts b/projects/demo/src/app/pages/action-menu/action-menu-demo.service.ts new file mode 100644 index 00000000..9790f11f --- /dev/null +++ b/projects/demo/src/app/pages/action-menu/action-menu-demo.service.ts @@ -0,0 +1,156 @@ +import { Injectable } from '@angular/core'; +import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; +import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; +import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; +import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; +import { + IDS_MENU_ITEM_DEFAULT_CONFIG_FACTORY, + IdsMenuItemAppearance, + IdsMenuItemAppearanceType, + IdsMenuItemVariant, + IdsMenuItemVariantType, +} from '@i-cell/ids-angular/menu'; +import { + IDS_OVERLAY_PANEL_DEFAULT_CONFIG_FACTORY, + IdsOverlayPanelAppearance, + IdsOverlayPanelAppearanceType, + IdsOverlayPanelVariant, + IdsOverlayPanelVariantType, +} from '@i-cell/ids-angular/overlay-panel'; + +const overlayPanelDefaultConfig = IDS_OVERLAY_PANEL_DEFAULT_CONFIG_FACTORY(); +const menuItemDefaultConfig = IDS_MENU_ITEM_DEFAULT_CONFIG_FACTORY(); +const numberOfItems = 3; + +type OverlayPanelInputControls = { + appearance: IdsOverlayPanelAppearanceType; + size: IdsSizeType; + variant: IdsOverlayPanelVariantType; +}; + +type OverlayPanelHelperControls = { + testBackgroundColor: 'none' | 'dark'; +}; + +type MenuItemInputControls = { + appearance: IdsMenuItemAppearanceType; + size: IdsSizeType; + variant: IdsMenuItemVariantType; +}; + +type MenuItemHelperControls = { + hasLeadingIcon: boolean; + hasTrailingIcon: boolean; + hasDisabledItem: boolean; + showFirstItemLabel: boolean; +}; + +@Injectable() +export class ActionMenuDemoService { + public readonly overlayPanelInputControlConfig: DemoControlConfig = { + appearance: { + description: 'Overlay panel appearance.', + type: 'IdsOverlayPanelAppearanceType', + default: overlayPanelDefaultConfig.appearance, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsOverlayPanelAppearance), + }, + size: { + description: 'Overlay panel size.', + type: 'IdsSizeType', + default: overlayPanelDefaultConfig.size, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + variant: { + description: 'Overlay panel variant.', + type: 'IdsOverlayPanelVariantType', + default: overlayPanelDefaultConfig.variant, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsOverlayPanelVariant), + }, + }; + + public readonly overlayPanelHelperControlConfig: DemoControlConfig = { + testBackgroundColor: { + description: 'Text of button', + type: 'string', + default: 'none', + control: DemoControl.SELECT, + list: [ + 'none', + 'dark', + ], + }, + }; + + public readonly menuItemInputControlConfig: DemoControlConfig = { + appearance: { + description: 'Menu item appearance.', + type: 'IdsMenuItemAppearanceType', + default: menuItemDefaultConfig.appearance, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsMenuItemAppearance), + }, + size: { + description: 'Menu item size.', + type: 'IdsSizeType', + default: menuItemDefaultConfig.size, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + variant: { + description: 'Menu item variant.', + type: 'IdsMenuItemVariantType', + default: menuItemDefaultConfig.variant, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsMenuItemVariant), + }, + }; + + public readonly menuItemHelperControlConfig: DemoControlConfig = { + hasLeadingIcon: { + description: 'Whether the menu items have leading icon or not.', + type: 'boolean', + default: true, + control: DemoControl.SWITCH, + }, + hasTrailingIcon: { + description: 'Whether the menu items have trailing icon or not.', + type: 'boolean', + default: true, + control: DemoControl.SWITCH, + }, + hasDisabledItem: { + description: 'Whether one menu item is disabled or not. For testing purposes this is the first menu item.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + showFirstItemLabel: { + description: 'Show or hide the menu item\'s label. For testing purposes this is the first menu item.', + type: 'boolean', + default: menuItemDefaultConfig.showLabel, + control: DemoControl.SWITCH, + }, + }; + + public overlayPanelDefaults = getDefaultFromDemoConfig(this.overlayPanelInputControlConfig); + public overlayPanelHelperDefaults = getDefaultFromDemoConfig(this.overlayPanelHelperControlConfig); + public menuItemDefaults = getDefaultFromDemoConfig(this.menuItemInputControlConfig); + public menuItemHelperDefaults = getDefaultFromDemoConfig(this.menuItemHelperControlConfig); + + public overlayPanelModel: OverlayPanelInputControls = { ...this.overlayPanelDefaults }; + public overlayPanelHelperModel: OverlayPanelHelperControls = { ...this.overlayPanelHelperDefaults }; + public menuItemModel: MenuItemInputControls = { ...this.menuItemDefaults }; + public menuItemHelperModel: MenuItemHelperControls = { ...this.menuItemHelperDefaults }; + + public items = Array(numberOfItems); + + public reset(): void { + this.overlayPanelModel = { ...this.overlayPanelDefaults }; + this.overlayPanelHelperModel = { ...this.overlayPanelHelperDefaults }; + this.menuItemModel = { ...this.menuItemDefaults }; + this.menuItemHelperModel = { ...this.menuItemHelperDefaults }; + } +} diff --git a/projects/demo/src/app/pages/avatar/avatar-demo.component.html b/projects/demo/src/app/pages/avatar/avatar-demo.component.html index c4d33d4c..20518ebe 100644 --- a/projects/demo/src/app/pages/avatar/avatar-demo.component.html +++ b/projects/demo/src/app/pages/avatar/avatar-demo.component.html @@ -1,26 +1,61 @@ - -
-
-

Initials

- -
-
-

Icon

- - - -
-
-

With image

- - Scarlett Johansson - -
+ +
+ +
+
+

Initials

+ +
+
+

Icon

+ + + +
+
+

With image

+ + Scarlett Johansson + +
+
+
+
+ + + +
+ +
+

Props

- - + +
diff --git a/projects/demo/src/app/pages/avatar/avatar-demo.component.ts b/projects/demo/src/app/pages/avatar/avatar-demo.component.ts index 810adef5..81f2a164 100644 --- a/projects/demo/src/app/pages/avatar/avatar-demo.component.ts +++ b/projects/demo/src/app/pages/avatar/avatar-demo.component.ts @@ -1,40 +1,30 @@ +import { AvatarDemoService } from './avatar-demo.service'; + import { ControlTableComponent } from '../../components/control-table/control-table.component'; +import { PropTableComponent } from '../../components/prop-table/prop-table.component'; +import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; +import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; -import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; -import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; -import { IdsAvatarVariantType, IDS_AVATAR_DEFAULT_CONFIG_FACTORY, IdsAvatarComponent, IdsAvatarImageDirective, IdsAvatarVariant } from '@i-cell/ids-angular/avatar'; -import { - IdsSizeType, - IdsSizeCollectionType, - IdsSize, - IdsSizeCollection, -} from '@i-cell/ids-angular/core'; +import { IdsAvatarComponent, IdsAvatarImageDirective } from '@i-cell/ids-angular/avatar'; import { IdsIconComponent } from '@i-cell/ids-angular/icon'; import { TranslateModule } from '@ngx-translate/core'; -const defaultConfig = IDS_AVATAR_DEFAULT_CONFIG_FACTORY(); - -type AvatarInputControls = { - initials: string, - size: IdsSizeType, - sizeCollection: IdsSizeCollectionType, - variant: IdsAvatarVariantType, -}; - @Component({ selector: 'app-avatar-demo', imports: [ TryoutComponent, - ControlTableComponent, IdsAvatarComponent, IdsIconComponent, IdsAvatarImageDirective, TranslateModule, FormsModule, + DemoAndCodeComponent, + TryoutControlComponent, + ControlTableComponent, + PropTableComponent, ], templateUrl: './avatar-demo.component.html', styleUrls: [ @@ -43,41 +33,5 @@ type AvatarInputControls = { ], }) export class AvatarDemoComponent { - protected _inputControlConfig: DemoControlConfig = { - initials: { - description: 'Avatar initials.', - type: 'string', - default: '-', - demoDefault: 'SJ', - }, - size: { - description: 'Avatar size.', - type: 'IdsSizeType', - default: defaultConfig.size, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - sizeCollection: { - description: 'Avatar sizeCollection.', - type: 'IdsSizeCollectionType', - default: defaultConfig.sizeCollection, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSizeCollection), - }, - variant: { - description: 'Avatar variant.', - type: 'IdsAvatarVariantType', - default: defaultConfig.variant, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsAvatarVariant), - }, - }; - - public defaults = getDefaultFromDemoConfig(this._inputControlConfig); - - public model: AvatarInputControls = { ...this.defaults }; - - public reset(): void { - this.model = { ...this.defaults }; - } + protected _avatarDemoService = inject(AvatarDemoService); } diff --git a/projects/demo/src/app/pages/avatar/avatar-demo.service.ts b/projects/demo/src/app/pages/avatar/avatar-demo.service.ts new file mode 100644 index 00000000..2b8e1b72 --- /dev/null +++ b/projects/demo/src/app/pages/avatar/avatar-demo.service.ts @@ -0,0 +1,56 @@ +import { Injectable } from '@angular/core'; +import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; +import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; +import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; +import { IDS_AVATAR_DEFAULT_CONFIG_FACTORY, IdsAvatarVariant, IdsAvatarVariantType } from '@i-cell/ids-angular/avatar'; +import { IdsSize, IdsSizeCollection, IdsSizeCollectionType, IdsSizeType } from '@i-cell/ids-angular/core'; + +const defaultConfig = IDS_AVATAR_DEFAULT_CONFIG_FACTORY(); + +type AvatarInputControls = { + initials: string; + size: IdsSizeType; + sizeCollection: IdsSizeCollectionType; + variant: IdsAvatarVariantType; +}; + +@Injectable() +export class AvatarDemoService { + public readonly inputControlConfig: DemoControlConfig = { + initials: { + description: 'Avatar initials.', + type: 'string', + default: '-', + demoDefault: 'SJ', + }, + size: { + description: 'Avatar size.', + type: 'IdsSizeType', + default: defaultConfig.size, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + sizeCollection: { + description: 'Avatar sizeCollection.', + type: 'IdsSizeCollectionType', + default: defaultConfig.sizeCollection, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSizeCollection), + }, + variant: { + description: 'Avatar variant.', + type: 'IdsAvatarVariantType', + default: defaultConfig.variant, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsAvatarVariant), + }, + }; + + public defaults = getDefaultFromDemoConfig(this.inputControlConfig); + + public model: AvatarInputControls = { ...this.defaults }; + + public reset(): void { + this.model = { ...this.defaults }; + } +} diff --git a/projects/demo/src/app/pages/badge/badge-demo.component.html b/projects/demo/src/app/pages/badge/badge-demo.component.html index 5ad8f93d..896e5f99 100644 --- a/projects/demo/src/app/pages/badge/badge-demo.component.html +++ b/projects/demo/src/app/pages/badge/badge-demo.component.html @@ -1,30 +1,38 @@ - -
-
- @if (model.hasLeadingIcon) { - - } - Text -
+ +
+ +
+
+ @if (_badgeDemoService.model.hasLeadingIcon) { + + } + Text +
+
+
+
+ + + +
+ +
+

Props

- - + +
diff --git a/projects/demo/src/app/pages/badge/badge-demo.component.ts b/projects/demo/src/app/pages/badge/badge-demo.component.ts index 7b95a835..f8e2c656 100644 --- a/projects/demo/src/app/pages/badge/badge-demo.component.ts +++ b/projects/demo/src/app/pages/badge/badge-demo.component.ts @@ -1,83 +1,31 @@ +import { BadgeDemoService } from './badge-demo.service'; + import { ControlTableComponent } from '../../components/control-table/control-table.component'; +import { PropTableComponent } from '../../components/prop-table/prop-table.component'; +import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; +import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; -import { Component } from '@angular/core'; -import { DemoControlConfig } from '@demo-types/demo-control.type'; -import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; -import { - IDS_BADGE_DEFAULT_CONFIG_FACTORY, - IdsBadgeDirective, - IdsBadgeVariant, - IdsBadgeVariantType, -} from '@i-cell/ids-angular/badge'; -import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; +import { Component, inject } from '@angular/core'; +import { IdsBadgeDirective } from '@i-cell/ids-angular/badge'; import { IdsIconComponent } from '@i-cell/ids-angular/icon'; import { TranslatePipe } from '@ngx-translate/core'; -type BadgeInputControls = { - size: IdsSizeType, - variant: IdsBadgeVariantType, - hasLeadingIcon: boolean, - label: string, - limit: number | null, -}; - -const defaultConfig = IDS_BADGE_DEFAULT_CONFIG_FACTORY(); - @Component({ selector: 'app-badge-demo', - standalone: true, imports: [ IdsBadgeDirective, IdsIconComponent, TryoutComponent, TranslatePipe, + TryoutControlComponent, ControlTableComponent, + DemoAndCodeComponent, + PropTableComponent, ], templateUrl: './badge-demo.component.html', styleUrl: './badge-demo.component.scss', }) export class BadgeDemoComponent { - protected _inputControlConfig: DemoControlConfig = { - size: { - description: 'Badge size.', - type: 'IdsSizeType', - default: defaultConfig.size, - list: Object.values(IdsSize), - control: 'select', - }, - variant: { - description: 'Badge variant.', - type: 'IdsBadgeVariantType', - default: defaultConfig.variant, - list: Object.values(IdsBadgeVariant), - control: 'select', - }, - hasLeadingIcon: { - description: 'Has leading icon.', - type: 'boolean', - control: 'checkbox', - default: defaultConfig.showLeadingElement, - }, - label: { - description: 'Badge text.', - type: 'string', - default: '', - demoDefault: '1000', - }, - limit: { - description: 'Badge limit.', - type: 'number', - default: null, - demoDefault: 100, - }, - }; - - public defaults = getDefaultFromDemoConfig(this._inputControlConfig); - - public model: BadgeInputControls = { ...this.defaults }; - - public reset(): void { - this.model = { ...this.defaults }; - } + protected _badgeDemoService = inject(BadgeDemoService); } diff --git a/projects/demo/src/app/pages/badge/badge-demo.service.ts b/projects/demo/src/app/pages/badge/badge-demo.service.ts new file mode 100644 index 00000000..39f7f5a6 --- /dev/null +++ b/projects/demo/src/app/pages/badge/badge-demo.service.ts @@ -0,0 +1,61 @@ +import { Injectable } from '@angular/core'; +import { DemoControlConfig } from '@demo-types/demo-control.type'; +import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; +import { IDS_BADGE_DEFAULT_CONFIG_FACTORY, IdsBadgeVariant, IdsBadgeVariantType } from '@i-cell/ids-angular/badge'; +import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; + +type BadgeInputControls = { + size: IdsSizeType; + variant: IdsBadgeVariantType; + hasLeadingIcon: boolean; + label: string; + limit: number | null; +}; + +const defaultConfig = IDS_BADGE_DEFAULT_CONFIG_FACTORY(); + +@Injectable() +export class BadgeDemoService { + public readonly inputControlConfig: DemoControlConfig = { + size: { + description: 'Badge size.', + type: 'IdsSizeType', + default: defaultConfig.size, + list: Object.values(IdsSize), + control: 'select', + }, + variant: { + description: 'Badge variant.', + type: 'IdsBadgeVariantType', + default: defaultConfig.variant, + list: Object.values(IdsBadgeVariant), + control: 'select', + }, + hasLeadingIcon: { + description: 'Has leading icon.', + type: 'boolean', + control: 'switch', + default: defaultConfig.showLeadingElement, + }, + label: { + description: 'Badge text.', + type: 'string', + default: '', + demoDefault: '1000', + }, + limit: { + description: 'Badge limit.', + type: 'number', + default: null, + demoDefault: 100, + }, + }; + + public defaults = getDefaultFromDemoConfig(this.inputControlConfig); + + public model: BadgeInputControls = { ...this.defaults }; + + public reset(): void { + this.model = { ...this.defaults }; + } +} diff --git a/projects/demo/src/app/pages/breadcrumb/breadcrumb-demo.component.html b/projects/demo/src/app/pages/breadcrumb/breadcrumb-demo.component.html index 04595edc..b3e6553b 100644 --- a/projects/demo/src/app/pages/breadcrumb/breadcrumb-demo.component.html +++ b/projects/demo/src/app/pages/breadcrumb/breadcrumb-demo.component.html @@ -1,38 +1,51 @@ - -
- - - Breadcrumb size changes won't be applied on truncation panel due to overlay limitations (initial values are passed to the panel). - + +
+ +
+ + + Breadcrumb size changes won't be applied on truncation panel due to overlay limitations (initial values are passed to the panel). + +
+
- +
+ + - - + + +
+ +
+

Props

+ + +
diff --git a/projects/demo/src/app/pages/breadcrumb/breadcrumb-demo.component.scss b/projects/demo/src/app/pages/breadcrumb/breadcrumb-demo.component.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/projects/demo/src/app/pages/breadcrumb/breadcrumb-demo.component.ts b/projects/demo/src/app/pages/breadcrumb/breadcrumb-demo.component.ts index 04e12cbe..580e74bd 100644 --- a/projects/demo/src/app/pages/breadcrumb/breadcrumb-demo.component.ts +++ b/projects/demo/src/app/pages/breadcrumb/breadcrumb-demo.component.ts @@ -1,129 +1,32 @@ +import { BreadcrumbDemoService } from './breadcrumb-demo.service'; + import { ControlTableComponent } from '../../components/control-table/control-table.component'; +import { PropTableComponent } from '../../components/prop-table/prop-table.component'; +import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; +import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; -import { Component } from '@angular/core'; -import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; -import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; -import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; +import { Component, inject } from '@angular/core'; import { IdsBreadcrumbComponent, - IdsBreadcrumbDivider, - IdsBreadcrumbDividerType, - IdsBreadcrumbVariant, - IdsBreadcrumbVariantType, } from '@i-cell/ids-angular/breadcrumb'; -import { IDS_BREADCRUMB_DEFAULT_CONFIG_FACTORY } from '@i-cell/ids-angular/breadcrumb/breadcrumb-defaults'; -import { IdsBreadcrumbHierarchyType } from '@i-cell/ids-angular/breadcrumb/types/breadcrumb-hierarchy.type'; -import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; import { IdsNotificationComponent } from '@i-cell/ids-angular/notification'; -import { - IdsOverlayPanelAppearance, - IdsOverlayPanelAppearanceType, - IdsOverlayPanelVariant, - IdsOverlayPanelVariantType, -} from '@i-cell/ids-angular/overlay-panel'; import { TranslatePipe } from '@ngx-translate/core'; -type BreadcrumbInputControls = { - size: IdsSizeType; - variant: IdsBreadcrumbVariantType; - dividerType: IdsBreadcrumbDividerType; - hierarchy?: IdsBreadcrumbHierarchyType; -}; - -type OverlayPanelInputControls = { - appearance: IdsOverlayPanelAppearanceType; - size: IdsSizeType; - variant: IdsOverlayPanelVariantType; -}; - -const breadcrumbDefaultConfig = IDS_BREADCRUMB_DEFAULT_CONFIG_FACTORY(); - @Component({ selector: 'app-breadcrumb-demo', - standalone: true, imports: [ TryoutComponent, TranslatePipe, - ControlTableComponent, IdsBreadcrumbComponent, IdsNotificationComponent, + DemoAndCodeComponent, + ControlTableComponent, + TryoutControlComponent, + PropTableComponent, ], templateUrl: './breadcrumb-demo.component.html', - styleUrl: './breadcrumb-demo.component.scss', }) export class BreadcrumbDemoComponent { - protected _breadcrumbInputControlConfig: DemoControlConfig = { - size: { - description: 'Breadcrumb size.', - type: 'IdsSizeType', - control: 'select', - list: convertEnumToStringArray(IdsSize), - default: breadcrumbDefaultConfig.size, - }, - variant: { - description: 'Breadcrumb variant.', - type: 'IdsBadgeVariantType', - control: 'select', - list: convertEnumToStringArray(IdsBreadcrumbVariant), - default: breadcrumbDefaultConfig.variant, - }, - dividerType: { - description: 'Divider type.', - type: 'IdsBreadcrumbDividerType', - control: 'select', - list: convertEnumToStringArray(IdsBreadcrumbDivider), - default: breadcrumbDefaultConfig.dividerType, - }, - }; - - protected _overlayPanelInputControlConfig: DemoControlConfig = { - appearance: { - description: 'Overlay panel appearance.', - type: 'IdsOverlayPanelAppearanceType', - default: breadcrumbDefaultConfig.overlayAppearance, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsOverlayPanelAppearance), - }, - size: { - description: 'Overlay panel size.', - type: 'IdsSizeType', - default: breadcrumbDefaultConfig.overlaySize, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - variant: { - description: 'Overlay panel variant.', - type: 'IdsOverlayPanelVariantType', - default: breadcrumbDefaultConfig.overlayVariant, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsOverlayPanelVariant), - }, - }; - - public breadcrumbDefaults = getDefaultFromDemoConfig(this._breadcrumbInputControlConfig); - public overlayPanelDefaults = getDefaultFromDemoConfig(this._overlayPanelInputControlConfig); - - public hierarchy: IdsBreadcrumbHierarchyType[] = [ - { - label: 'Home', - path: '/index', - }, - { - label: 'Components', - path: '/components', - }, - { - label: 'Breadcrumb', - path: '/breadcrumb', - }, - ]; - - public breadcrumbModel: BreadcrumbInputControls = { ...this.breadcrumbDefaults }; - public overlayPanelModel: OverlayPanelInputControls = { ...this.overlayPanelDefaults }; - - public reset(): void { - this.breadcrumbModel = { ...this.breadcrumbDefaults }; - this.overlayPanelModel = { ...this.overlayPanelDefaults }; - } + protected _breadcrumbDemoService = inject(BreadcrumbDemoService); } diff --git a/projects/demo/src/app/pages/breadcrumb/breadcrumb-demo.service.ts b/projects/demo/src/app/pages/breadcrumb/breadcrumb-demo.service.ts new file mode 100644 index 00000000..d8dd56a2 --- /dev/null +++ b/projects/demo/src/app/pages/breadcrumb/breadcrumb-demo.service.ts @@ -0,0 +1,111 @@ +import { Injectable } from '@angular/core'; +import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; +import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; +import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; +import { + IDS_BREADCRUMB_DEFAULT_CONFIG_FACTORY, + IdsBreadcrumbDivider, + IdsBreadcrumbDividerType, + IdsBreadcrumbHierarchyType, + IdsBreadcrumbVariant, + IdsBreadcrumbVariantType, +} from '@i-cell/ids-angular/breadcrumb'; +import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; +import { + IdsOverlayPanelAppearance, + IdsOverlayPanelAppearanceType, + IdsOverlayPanelVariant, + IdsOverlayPanelVariantType, +} from '@i-cell/ids-angular/overlay-panel'; + +type BreadcrumbInputControls = { + size: IdsSizeType; + variant: IdsBreadcrumbVariantType; + dividerType: IdsBreadcrumbDividerType; + hierarchy?: IdsBreadcrumbHierarchyType; +}; + +type OverlayPanelInputControls = { + appearance: IdsOverlayPanelAppearanceType; + size: IdsSizeType; + variant: IdsOverlayPanelVariantType; +}; + +const breadcrumbDefaultConfig = IDS_BREADCRUMB_DEFAULT_CONFIG_FACTORY(); + +@Injectable() +export class BreadcrumbDemoService { + public readonly breadcrumbInputControlConfig: DemoControlConfig = { + size: { + description: 'Breadcrumb size.', + type: 'IdsSizeType', + control: 'select', + list: convertEnumToStringArray(IdsSize), + default: breadcrumbDefaultConfig.size, + }, + variant: { + description: 'Breadcrumb variant.', + type: 'IdsBadgeVariantType', + control: 'select', + list: convertEnumToStringArray(IdsBreadcrumbVariant), + default: breadcrumbDefaultConfig.variant, + }, + dividerType: { + description: 'Divider type.', + type: 'IdsBreadcrumbDividerType', + control: 'select', + list: convertEnumToStringArray(IdsBreadcrumbDivider), + default: breadcrumbDefaultConfig.dividerType, + }, + }; + + public readonly overlayPanelInputControlConfig: DemoControlConfig = { + appearance: { + description: 'Overlay panel appearance.', + type: 'IdsOverlayPanelAppearanceType', + default: breadcrumbDefaultConfig.overlayAppearance, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsOverlayPanelAppearance), + }, + size: { + description: 'Overlay panel size.', + type: 'IdsSizeType', + default: breadcrumbDefaultConfig.overlaySize, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + variant: { + description: 'Overlay panel variant.', + type: 'IdsOverlayPanelVariantType', + default: breadcrumbDefaultConfig.overlayVariant, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsOverlayPanelVariant), + }, + }; + + public breadcrumbDefaults = getDefaultFromDemoConfig(this.breadcrumbInputControlConfig); + public overlayPanelDefaults = getDefaultFromDemoConfig(this.overlayPanelInputControlConfig); + + public hierarchy: IdsBreadcrumbHierarchyType[] = [ + { + label: 'Home', + path: '/index', + }, + { + label: 'Components', + path: '/components', + }, + { + label: 'Breadcrumb', + path: '/breadcrumb', + }, + ]; + + public breadcrumbModel: BreadcrumbInputControls = { ...this.breadcrumbDefaults }; + public overlayPanelModel: OverlayPanelInputControls = { ...this.overlayPanelDefaults }; + + public reset(): void { + this.breadcrumbModel = { ...this.breadcrumbDefaults }; + this.overlayPanelModel = { ...this.overlayPanelDefaults }; + } +} diff --git a/projects/demo/src/app/pages/button/button-demo.component.html b/projects/demo/src/app/pages/button/button-demo.component.html index 767252a0..92930bb3 100644 --- a/projects/demo/src/app/pages/button/button-demo.component.html +++ b/projects/demo/src/app/pages/button/button-demo.component.html @@ -1,70 +1,96 @@ - - -
-
-

{{ "COMMON.STANDALONE" | translate }}

- @if (model.asLink) { - - {{ helperModel.text }} - - } @else { - } - {{ helperModel.text }} - @if (helperModel.hasTrailingIcon) { - - } - - } -
+
-
-

{{ "COMMON.GROUPED" | translate }}

- - - - - -
-
- +
+

{{ "COMMON.GROUPED" | translate }}

+ + + + + +
+
+ + +
- - - + + + + + + + +
+

Props

+ + - +
diff --git a/projects/demo/src/app/pages/button/button-demo.component.ts b/projects/demo/src/app/pages/button/button-demo.component.ts index 72dee2c7..1bd7883c 100644 --- a/projects/demo/src/app/pages/button/button-demo.component.ts +++ b/projects/demo/src/app/pages/button/button-demo.component.ts @@ -1,47 +1,28 @@ +import { ButtonDemoService } from './button-demo.service'; + import { ControlTableComponent } from '../../components/control-table/control-table.component'; +import { PropTableComponent } from '../../components/prop-table/prop-table.component'; +import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; +import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; -import { Component } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; -import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; -import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; -import { IdsButtonComponent, IdsButtonAppearance, IdsButtonAppearanceType, IdsButtonVariant, IdsButtonVariantType, IDS_BUTTON_DEFAULT_CONFIG_FACTORY, IDS_BUTTON_GROUP_DEFAULT_CONFIG_FACTORY, IdsButtonGroupComponent } from '@i-cell/ids-angular/button'; -import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; +import { Component, inject } from '@angular/core'; +import { IdsButtonComponent, IdsButtonGroupComponent } from '@i-cell/ids-angular/button'; import { IdsIconComponent } from '@i-cell/ids-angular/icon'; import { TranslateModule } from '@ngx-translate/core'; -const defaultConfig = IDS_BUTTON_DEFAULT_CONFIG_FACTORY(); -const defaultGroupConfig = IDS_BUTTON_GROUP_DEFAULT_CONFIG_FACTORY(); - -type ButtonInputControls = { - appearance: IdsButtonAppearanceType, - size: IdsSizeType, - variant: IdsButtonVariantType, - disabled: boolean, - asLink: boolean, -}; - -type ButtonHelperControls = { - text: string, - hasLeadingIcon: boolean, - hasTrailingIcon: boolean, -}; - -type ButtonGroupInputControls = { - size: IdsSizeType, -}; - @Component({ selector: 'app-button-demo', imports: [ TryoutComponent, - ControlTableComponent, IdsButtonComponent, IdsButtonGroupComponent, IdsIconComponent, TranslateModule, - FormsModule, + DemoAndCodeComponent, + ControlTableComponent, + TryoutControlComponent, + PropTableComponent, ], templateUrl: './button-demo.component.html', styleUrls: [ @@ -50,89 +31,5 @@ type ButtonGroupInputControls = { ], }) export class ButtonDemoComponent { - protected _inputControlConfig: DemoControlConfig = { - appearance: { - description: 'Button appearance.', - type: 'IdsButtonAppearanceType', - default: defaultConfig.appearance, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsButtonAppearance), - }, - size: { - description: 'Button size.', - type: 'IdsSizeType', - default: defaultConfig.size, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - variant: { - description: 'Button variant.', - type: 'IdsButtonVariantType', - default: defaultConfig.variant, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsButtonVariant), - }, - disabled: { - description: 'Whether the button is disabled or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - asLink: { - description: 'Whether the idsButton is a link (or button).', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - }; - - protected _helperControlConfig: DemoControlConfig = { - text: { - description: 'Text of button', - type: 'string', - default: '-', - demoDefault: 'Sample button', - list: convertEnumToStringArray(IdsButtonAppearance), - }, - hasLeadingIcon: { - description: 'Whether the button has leading icon or not.', - type: 'boolean', - default: true, - control: DemoControl.CHECKBOX, - }, - hasTrailingIcon: { - description: 'Whether the button has trailing icon or not.', - type: 'boolean', - default: true, - control: DemoControl.CHECKBOX, - }, - }; - - protected _groupInputControlConfig: DemoControlConfig = { - size: { - description: 'All button size in a group.', - type: 'IdsSizeType', - default: defaultGroupConfig.size, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - }; - - public defaults = getDefaultFromDemoConfig(this._inputControlConfig); - public helperDefaults = getDefaultFromDemoConfig(this._helperControlConfig); - public groupDefaults = getDefaultFromDemoConfig(this._groupInputControlConfig); - - public model: ButtonInputControls = { ...this.defaults }; - public helperModel: ButtonHelperControls = { ...this.helperDefaults }; - public groupModel: ButtonGroupInputControls = { ...this.groupDefaults }; - - public onClick(buttonName: string): void { - console.info(`${buttonName} button clicked`); - } - - public reset(): void { - this.model = { ...this.defaults }; - this.helperModel = { ...this.helperDefaults }; - this.groupModel = { ...this.groupDefaults }; - } + protected _buttonDemoService = inject(ButtonDemoService); } diff --git a/projects/demo/src/app/pages/button/button-demo.service.ts b/projects/demo/src/app/pages/button/button-demo.service.ts new file mode 100644 index 00000000..8e0efe45 --- /dev/null +++ b/projects/demo/src/app/pages/button/button-demo.service.ts @@ -0,0 +1,123 @@ +import { Injectable } from '@angular/core'; +import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; +import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; +import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; +import { + IDS_BUTTON_DEFAULT_CONFIG_FACTORY, + IDS_BUTTON_GROUP_DEFAULT_CONFIG_FACTORY, + IdsButtonAppearance, + IdsButtonAppearanceType, + IdsButtonVariant, + IdsButtonVariantType, +} from '@i-cell/ids-angular/button'; +import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; + +const defaultConfig = IDS_BUTTON_DEFAULT_CONFIG_FACTORY(); +const defaultGroupConfig = IDS_BUTTON_GROUP_DEFAULT_CONFIG_FACTORY(); + +export type ButtonInputControls = { + appearance: IdsButtonAppearanceType; + size: IdsSizeType; + variant: IdsButtonVariantType; + disabled: boolean; + asLink: boolean; +}; + +export type ButtonHelperControls = { + text: string; + hasLeadingIcon: boolean; + hasTrailingIcon: boolean; +}; + +export type ButtonGroupInputControls = { + size: IdsSizeType; +}; + +@Injectable() +export class ButtonDemoService { + public readonly inputControlConfig: DemoControlConfig = { + appearance: { + description: 'Button appearance.', + type: 'IdsButtonAppearanceType', + default: defaultConfig.appearance, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsButtonAppearance), + }, + size: { + description: 'Button size.', + type: 'IdsSizeType', + default: defaultConfig.size, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + variant: { + description: 'Button variant.', + type: 'IdsButtonVariantType', + default: defaultConfig.variant, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsButtonVariant), + }, + disabled: { + description: 'Whether the button is disabled or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + asLink: { + description: 'Whether the idsButton is a link (or button).', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + }; + + public readonly helperControlConfig: DemoControlConfig = { + text: { + description: 'Text of button', + type: 'string', + default: '-', + demoDefault: 'Sample button', + list: convertEnumToStringArray(IdsButtonAppearance), + }, + hasLeadingIcon: { + description: 'Whether the button has leading icon or not.', + type: 'boolean', + default: true, + control: DemoControl.SWITCH, + }, + hasTrailingIcon: { + description: 'Whether the button has trailing icon or not.', + type: 'boolean', + default: true, + control: DemoControl.SWITCH, + }, + }; + + public readonly groupInputControlConfig: DemoControlConfig = { + size: { + description: 'All button size in a group.', + type: 'IdsSizeType', + default: defaultGroupConfig.size, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + }; + + public defaults = getDefaultFromDemoConfig(this.inputControlConfig); + public helperDefaults = getDefaultFromDemoConfig(this.helperControlConfig); + public groupDefaults = getDefaultFromDemoConfig(this.groupInputControlConfig); + + public model: ButtonInputControls = { ...this.defaults }; + public helperModel: ButtonHelperControls = { ...this.helperDefaults }; + public groupModel: ButtonGroupInputControls = { ...this.groupDefaults }; + + public onClick(buttonName: string): void { + console.info(`${buttonName} button clicked`); + } + + public reset(): void { + this.model = { ...this.defaults }; + this.helperModel = { ...this.helperDefaults }; + this.groupModel = { ...this.groupDefaults }; + } +} diff --git a/projects/demo/src/app/pages/card/card-demo.component.html b/projects/demo/src/app/pages/card/card-demo.component.html index 9df79602..28235ce2 100644 --- a/projects/demo/src/app/pages/card/card-demo.component.html +++ b/projects/demo/src/app/pages/card/card-demo.component.html @@ -1,75 +1,99 @@ - - - @if (helperModel.clickable) { - - @if (model.orientation === "vertical") { -
-

This is the title

-

This is the subtitle

-
+ +
+ + + @if (_cardDemoService.helperModel.clickable) { + + @if (_cardDemoService.model.orientation === "vertical") { +
+

This is the title

+

This is the subtitle

+
+ } + + This is the body + @if (_cardDemoService.model.orientation === "vertical") { +
This is the footer
+ } + + } @else { + + @if (_cardDemoService.model.orientation === "vertical") { +
+

This is the title

+

This is the subtitle

+
+ } + + This is the body + @if (_cardDemoService.model.orientation === "vertical") { +
This is the footer
+ } + } - - This is the body - @if (model.orientation === "vertical") { -
This is the footer
- } - - } @else { - - @if (model.orientation === "vertical") { -
-

This is the title

-

This is the subtitle

-
- } - - This is the body - @if (model.orientation === "vertical") { -
This is the footer
- } - - } - + + +
- - - + + + + + + + + +
+

Props

+ - +
diff --git a/projects/demo/src/app/pages/card/card-demo.component.ts b/projects/demo/src/app/pages/card/card-demo.component.ts index e19ead3b..412b4217 100644 --- a/projects/demo/src/app/pages/card/card-demo.component.ts +++ b/projects/demo/src/app/pages/card/card-demo.component.ts @@ -1,44 +1,26 @@ +import { CardDemoService } from './card-demo.service'; + import { ControlTableComponent } from '../../components/control-table/control-table.component'; +import { PropTableComponent } from '../../components/prop-table/prop-table.component'; +import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; +import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; -import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; -import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; -import { IDS_CARD_DEFAULT_CONFIG_FACTORY, IdsCardAppearance, IdsCardAppearanceType, IdsCardComponent, IdsCardVariant, IdsCardVariantType } from '@i-cell/ids-angular/card'; +import { IdsCardComponent } from '@i-cell/ids-angular/card'; import { IdsCardBodyDirective } from '@i-cell/ids-angular/card/card-body.directive'; import { IdsCardFooterDirective } from '@i-cell/ids-angular/card/card-footer.directive'; import { IdsCardHeaderComponent } from '@i-cell/ids-angular/card/card-header.component'; import { IdsCardMediaDirective } from '@i-cell/ids-angular/card/card-media.directive'; import { IdsCardSubtitleDirective } from '@i-cell/ids-angular/card/card-subtitle.directive'; import { IdsCardTitleDirective } from '@i-cell/ids-angular/card/card-title.directive'; -import { IdsOrientation, IdsOrientationType, IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; import { TranslateModule } from '@ngx-translate/core'; -const defaultConfig = IDS_CARD_DEFAULT_CONFIG_FACTORY(); - -type CardInputControls = { - appearance: IdsCardAppearanceType, - size: IdsSizeType, - variant: IdsCardVariantType, - orientation: IdsOrientationType, - disabled: boolean, -}; - -type CardMediaInputControls = { - stretch: boolean -}; - -type CardHelperControls = { - clickable: boolean, -}; - @Component({ selector: 'app-card-demo', imports: [ TryoutComponent, - ControlTableComponent, IdsCardComponent, IdsCardHeaderComponent, IdsCardBodyDirective, @@ -48,6 +30,10 @@ type CardHelperControls = { IdsCardSubtitleDirective, FormsModule, TranslateModule, + DemoAndCodeComponent, + TryoutControlComponent, + ControlTableComponent, + PropTableComponent, ], templateUrl: './card-demo.component.html', styleUrls: [ @@ -56,76 +42,5 @@ type CardHelperControls = { ], }) export class CardDemoComponent { - protected _inputControlConfig: DemoControlConfig = { - appearance: { - description: 'Card appearance.', - type: 'IdsCardAppearanceType', - default: defaultConfig.appearance, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsCardAppearance), - }, - size: { - description: 'Card size.', - type: 'IdsSizeType', - default: defaultConfig.size, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - variant: { - description: 'Card variant.', - type: 'IdsCardVariantType', - default: defaultConfig.variant, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsCardVariant), - }, - orientation: { - description: 'Card orientation.', - type: 'IdsOrientationType', - default: defaultConfig.orientation, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsOrientation), - }, - disabled: { - description: 'Whether the card is disabled or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - }; - - protected _mediaInputControlConfig: DemoControlConfig = { - stretch: { - description: 'Whether the image is stretchable or not.', - type: 'boolean', - default: true, - control: DemoControl.CHECKBOX, - }, - }; - - protected _helperControlConfig: DemoControlConfig = { - clickable: { - description: 'Whether the card is clickable or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - }; - - public defaults = getDefaultFromDemoConfig(this._inputControlConfig); - public mediaDefaults = getDefaultFromDemoConfig(this._mediaInputControlConfig); - public helperDefaults = getDefaultFromDemoConfig(this._helperControlConfig); - - public model: CardInputControls = { ...this.defaults }; - public mediaModel: CardMediaInputControls = { ...this.mediaDefaults }; - public helperModel: CardHelperControls = { ...this.helperDefaults }; - - public onClick(): void { - alert('Click'); - } - - public reset(): void { - this.model = { ...this.defaults }; - this.mediaModel = { ...this.mediaDefaults }; - this.helperModel = { ...this.helperDefaults }; - } + protected _cardDemoService = inject(CardDemoService); } diff --git a/projects/demo/src/app/pages/card/card-demo.service.ts b/projects/demo/src/app/pages/card/card-demo.service.ts new file mode 100644 index 00000000..d26eef4b --- /dev/null +++ b/projects/demo/src/app/pages/card/card-demo.service.ts @@ -0,0 +1,106 @@ +import { Injectable } from '@angular/core'; +import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; +import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; +import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; +import { + IDS_CARD_DEFAULT_CONFIG_FACTORY, + IdsCardAppearance, + IdsCardAppearanceType, + IdsCardVariant, + IdsCardVariantType, +} from '@i-cell/ids-angular/card'; +import { IdsOrientation, IdsOrientationType, IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; + +const defaultConfig = IDS_CARD_DEFAULT_CONFIG_FACTORY(); + +type CardInputControls = { + appearance: IdsCardAppearanceType; + size: IdsSizeType; + variant: IdsCardVariantType; + orientation: IdsOrientationType; + disabled: boolean; +}; + +type CardMediaInputControls = { + stretch: boolean; +}; + +type CardHelperControls = { + clickable: boolean; +}; + +@Injectable() +export class CardDemoService { + public readonly inputControlConfig: DemoControlConfig = { + appearance: { + description: 'Card appearance.', + type: 'IdsCardAppearanceType', + default: defaultConfig.appearance, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsCardAppearance), + }, + size: { + description: 'Card size.', + type: 'IdsSizeType', + default: defaultConfig.size, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + variant: { + description: 'Card variant.', + type: 'IdsCardVariantType', + default: defaultConfig.variant, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsCardVariant), + }, + orientation: { + description: 'Card orientation.', + type: 'IdsOrientationType', + default: defaultConfig.orientation, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsOrientation), + }, + disabled: { + description: 'Whether the card is disabled or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + }; + + public readonly mediaInputControlConfig: DemoControlConfig = { + stretch: { + description: 'Whether the image is stretchable or not.', + type: 'boolean', + default: true, + control: DemoControl.SWITCH, + }, + }; + + public readonly helperControlConfig: DemoControlConfig = { + clickable: { + description: 'Whether the card is clickable or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + }; + + public defaults = getDefaultFromDemoConfig(this.inputControlConfig); + public mediaDefaults = getDefaultFromDemoConfig(this.mediaInputControlConfig); + public helperDefaults = getDefaultFromDemoConfig(this.helperControlConfig); + + public model: CardInputControls = { ...this.defaults }; + public mediaModel: CardMediaInputControls = { ...this.mediaDefaults }; + public helperModel: CardHelperControls = { ...this.helperDefaults }; + + public onClick(): void { + alert('Click'); + } + + public reset(): void { + this.model = { ...this.defaults }; + this.mediaModel = { ...this.mediaDefaults }; + this.helperModel = { ...this.helperDefaults }; + } +} diff --git a/projects/demo/src/app/pages/checkbox/checkbox-demo.component.html b/projects/demo/src/app/pages/checkbox/checkbox-demo.component.html index b41d9fa3..60f28735 100644 --- a/projects/demo/src/app/pages/checkbox/checkbox-demo.component.html +++ b/projects/demo/src/app/pages/checkbox/checkbox-demo.component.html @@ -1,103 +1,122 @@ - - -
-
-

{{ "COMMON.STANDALONE" | translate }}

-
    -
  • - - {{ helperModel.label }} - @if (helperModel.allowHint) { - {{ helperModel.hintMessage }} - } - -
    • -
  • - - {{ helperModel.label }} - @if (helperModel.allowHint) { - {{ helperModel.hintMessage }} - } - -
    • -
  • - +
    + + +
    +
    +

    {{ "COMMON.STANDALONE" | translate }}

    +
      +
    • + + {{ _checkboxDemoService.helperModel.label }} + @if (_checkboxDemoService.helperModel.allowHint) { + {{ _checkboxDemoService.helperModel.hintMessage }} + } + +
      • +
    • + + {{ _checkboxDemoService.helperModel.label }} + @if (_checkboxDemoService.helperModel.allowHint) { + {{ _checkboxDemoService.helperModel.hintMessage }} + } + +
      • +
    • + + {{ _checkboxDemoService.helperModel.label }} + @if (_checkboxDemoService.helperModel.allowHint) { + {{ _checkboxDemoService.helperModel.hintMessage }} + } + +
      • +
    +
    + +
    +

    {{ "COMMON.GROUPED" | translate }}

    + - {{ helperModel.label }} - @if (helperModel.allowHint) { - {{ helperModel.hintMessage }} - } - -
    • -
-
+ Tooth brushing + Bath + Sleep + +
+ + + + -
-

{{ "COMMON.GROUPED" | translate }}

- - Tooth brushing - Bath - Sleep - -
- - +
+ + + + + +
+ +
+

Props

- - - - +
diff --git a/projects/demo/src/app/pages/checkbox/checkbox-demo.component.ts b/projects/demo/src/app/pages/checkbox/checkbox-demo.component.ts index a0f1bdd2..709a18af 100644 --- a/projects/demo/src/app/pages/checkbox/checkbox-demo.component.ts +++ b/projects/demo/src/app/pages/checkbox/checkbox-demo.component.ts @@ -1,54 +1,31 @@ +import { CheckboxDemoService } from './checkbox-demo.service'; + import { ControlTableComponent } from '../../components/control-table/control-table.component'; +import { PropTableComponent } from '../../components/prop-table/prop-table.component'; +import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; +import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; -import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; -import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; -import { IdsCheckboxVariant, IdsCheckboxVariantType, IDS_CHECKBOX_DEFAULT_CONFIG_FACTORY, IDS_CHECKBOX_GROUP_DEFAULT_CONFIG_FACTORY, IdsCheckboxComponent, IdsCheckboxGroupComponent } from '@i-cell/ids-angular/checkbox'; -import { IdsOrientation, IdsOrientationType, IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; +import { IdsCheckboxComponent, IdsCheckboxGroupComponent } from '@i-cell/ids-angular/checkbox'; import { IdsHintMessageComponent } from '@i-cell/ids-angular/forms'; import { TranslateModule } from '@ngx-translate/core'; -const defaultConfig = IDS_CHECKBOX_DEFAULT_CONFIG_FACTORY(); -const defaultGroupConfig = IDS_CHECKBOX_GROUP_DEFAULT_CONFIG_FACTORY(); - -type CheckboxInputControls = { - size: IdsSizeType, - variant: IdsCheckboxVariantType, - readonly: boolean, - required: boolean, - disabled: boolean, -}; - -type CheckboxHelperControls = { - label: string, - allowHint: boolean, - hintMessage: string, -}; - -type CheckboxGroupInputControls = { - groupLabel: string, - allowParent: boolean, - parentLabel: string, - name: string, - size: IdsSizeType, - variant: IdsCheckboxVariantType, - orientation: IdsOrientationType, -}; - @Component({ selector: 'app-checkbox-demo', imports: [ TryoutComponent, - ControlTableComponent, IdsCheckboxComponent, IdsCheckboxGroupComponent, ReactiveFormsModule, FormsModule, IdsHintMessageComponent, TranslateModule, + DemoAndCodeComponent, + TryoutControlComponent, + ControlTableComponent, + PropTableComponent, ], templateUrl: './checkbox-demo.component.html', styleUrls: [ @@ -57,144 +34,5 @@ type CheckboxGroupInputControls = { ], }) export class CheckboxDemoComponent { - protected _inputControlConfig: DemoControlConfig = { - size: { - description: 'Checkbox size.', - type: 'IdsSizeType', - default: defaultConfig.size, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - variant: { - description: 'Checkbox variant.', - type: 'IdsCheckboxVariantType', - default: defaultConfig.variant, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsCheckboxVariant), - }, - readonly: { - description: 'Whether the checkbox is readonly or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - required: { - description: 'Whether the checkbox is required or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - disabled: { - description: 'Whether the checkbox is disabled or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - }; - - protected _helperControlConfig: DemoControlConfig = { - label: { - description: 'Label of checkbox', - type: 'string', - default: '-', - demoDefault: 'I accept the terms and conditions', - }, - allowHint: { - description: 'Allow hint message', - type: 'boolean', - default: true, - control: DemoControl.CHECKBOX, - }, - hintMessage: { - description: 'Hint message', - type: 'string', - default: '-', - demoDefault: 'Hint message', - }, - }; - - protected _groupInputControlConfig: DemoControlConfig = { - groupLabel: { - description: 'Checkbox group\'s label.', - type: 'string', - default: '-', - demoDefault: 'Everyday todos', - }, - allowParent: { - description: 'Whether to allow parent checkbox or not.', - type: 'boolean', - default: defaultGroupConfig.allowParent, - control: DemoControl.CHECKBOX, - }, - parentLabel: { - description: 'Parent checkbox label.', - type: 'string', - default: '-', - demoDefault: 'Parent todo', - }, - name: { - description: 'Name for checkboxes.', - type: 'string', - default: '-', - demoDefault: 'todo', - }, - size: { - description: 'Checkbox group size.', - type: 'IdsSizeType', - default: defaultGroupConfig.size, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - variant: { - description: 'Checkbox group variant.', - type: 'IdsCheckboxVariantType', - default: defaultGroupConfig.variant, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsCheckboxVariant), - }, - orientation: { - description: 'Checkbox group variant.', - type: 'IdsOrientationType', - default: defaultGroupConfig.orientation, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsOrientation), - }, - }; - - public defaults = getDefaultFromDemoConfig(this._inputControlConfig); - public helperDefaults = getDefaultFromDemoConfig(this._helperControlConfig); - public groupDefaults = getDefaultFromDemoConfig(this._groupInputControlConfig); - - public model: CheckboxInputControls = { ...this.defaults }; - public helperModel: CheckboxHelperControls = { ...this.helperDefaults }; - public groupModel: CheckboxGroupInputControls = { ...this.groupDefaults }; - - public reset(): void { - this.model = { ...this.defaults }; - this.helperModel = { ...this.helperDefaults }; - this.groupModel = { ...this.groupDefaults }; - - this.standalone = { - unselected: false, - indeterminate: false, - selected: true, - }; - this.group = { - toothBrushing: true, - bath: true, - sleep: false, - }; - } - - public standalone = { - unselected: false, - indeterminate: false, - selected: true, - }; - - public group = { - toothBrushing: true, - bath: true, - sleep: false, - }; + protected _checkboxDemoService = inject(CheckboxDemoService); } diff --git a/projects/demo/src/app/pages/checkbox/checkbox-demo.service.ts b/projects/demo/src/app/pages/checkbox/checkbox-demo.service.ts new file mode 100644 index 00000000..7fbed1ac --- /dev/null +++ b/projects/demo/src/app/pages/checkbox/checkbox-demo.service.ts @@ -0,0 +1,182 @@ +import { Injectable } from '@angular/core'; +import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; +import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; +import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; +import { + IDS_CHECKBOX_DEFAULT_CONFIG_FACTORY, + IDS_CHECKBOX_GROUP_DEFAULT_CONFIG_FACTORY, + IdsCheckboxVariant, + IdsCheckboxVariantType, +} from '@i-cell/ids-angular/checkbox'; +import { IdsOrientation, IdsOrientationType, IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; + +const defaultConfig = IDS_CHECKBOX_DEFAULT_CONFIG_FACTORY(); +const defaultGroupConfig = IDS_CHECKBOX_GROUP_DEFAULT_CONFIG_FACTORY(); + +type CheckboxInputControls = { + size: IdsSizeType; + variant: IdsCheckboxVariantType; + readonly: boolean; + required: boolean; + disabled: boolean; +}; + +type CheckboxHelperControls = { + label: string; + allowHint: boolean; + hintMessage: string; +}; + +type CheckboxGroupInputControls = { + groupLabel: string; + allowParent: boolean; + parentLabel: string; + name: string; + size: IdsSizeType; + variant: IdsCheckboxVariantType; + orientation: IdsOrientationType; +}; + +@Injectable() +export class CheckboxDemoService { + public readonly inputControlConfig: DemoControlConfig = { + size: { + description: 'Checkbox size.', + type: 'IdsSizeType', + default: defaultConfig.size, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + variant: { + description: 'Checkbox variant.', + type: 'IdsCheckboxVariantType', + default: defaultConfig.variant, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsCheckboxVariant), + }, + readonly: { + description: 'Whether the checkbox is readonly or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + required: { + description: 'Whether the checkbox is required or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + disabled: { + description: 'Whether the checkbox is disabled or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + }; + + public readonly helperControlConfig: DemoControlConfig = { + label: { + description: 'Label of checkbox', + type: 'string', + default: '-', + demoDefault: 'I accept the terms and conditions', + }, + allowHint: { + description: 'Allow hint message', + type: 'boolean', + default: true, + control: DemoControl.SWITCH, + }, + hintMessage: { + description: 'Hint message', + type: 'string', + default: '-', + demoDefault: 'Hint message', + }, + }; + + public readonly groupInputControlConfig: DemoControlConfig = { + groupLabel: { + description: 'Checkbox group\'s label.', + type: 'string', + default: '-', + demoDefault: 'Everyday todos', + }, + allowParent: { + description: 'Whether to allow parent checkbox or not.', + type: 'boolean', + default: defaultGroupConfig.allowParent, + control: DemoControl.SWITCH, + }, + parentLabel: { + description: 'Parent checkbox label.', + type: 'string', + default: '-', + demoDefault: 'Parent todo', + }, + name: { + description: 'Name for checkboxes.', + type: 'string', + default: '-', + demoDefault: 'todo', + }, + size: { + description: 'Checkbox group size.', + type: 'IdsSizeType', + default: defaultGroupConfig.size, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + variant: { + description: 'Checkbox group variant.', + type: 'IdsCheckboxVariantType', + default: defaultGroupConfig.variant, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsCheckboxVariant), + }, + orientation: { + description: 'Checkbox group variant.', + type: 'IdsOrientationType', + default: defaultGroupConfig.orientation, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsOrientation), + }, + }; + + public defaults = getDefaultFromDemoConfig(this.inputControlConfig); + public helperDefaults = getDefaultFromDemoConfig(this.helperControlConfig); + public groupDefaults = getDefaultFromDemoConfig(this.groupInputControlConfig); + + public model: CheckboxInputControls = { ...this.defaults }; + public helperModel: CheckboxHelperControls = { ...this.helperDefaults }; + public groupModel: CheckboxGroupInputControls = { ...this.groupDefaults }; + + public reset(): void { + this.model = { ...this.defaults }; + this.helperModel = { ...this.helperDefaults }; + this.groupModel = { ...this.groupDefaults }; + + this.standalone = { + unselected: false, + indeterminate: false, + selected: true, + }; + this.group = { + toothBrushing: true, + bath: true, + sleep: false, + }; + } + + public standalone = { + unselected: false, + indeterminate: false, + selected: true, + }; + + public group = { + toothBrushing: true, + bath: true, + sleep: false, + }; +} diff --git a/projects/demo/src/app/pages/chip/chip-demo.component.html b/projects/demo/src/app/pages/chip/chip-demo.component.html index 36be38f2..eca8089d 100644 --- a/projects/demo/src/app/pages/chip/chip-demo.component.html +++ b/projects/demo/src/app/pages/chip/chip-demo.component.html @@ -1,140 +1,177 @@ - -
-
-

{{ "COMMON.NON-INTERACTIVE" | translate }}

- - @if (helperModel.hasAvatar) { - - - - } - @if (helperModel.hasLeadingIcon) { - - } - {{ helperModel.label }} - @if (helperModel.hasTrailingIconButton) { - - } - -
+ +
+ +
+
+

{{ "COMMON.NON-INTERACTIVE" | translate }}

+ + @if (_chipDemoService.helperModel.hasAvatar) { + + + + } + @if (_chipDemoService.helperModel.hasLeadingIcon) { + + } + {{ _chipDemoService.helperModel.label }} + @if (_chipDemoService.helperModel.hasTrailingIconButton) { + + } + +
-
-

{{ "COMMON.INTERACTIVE" | translate }}

- @if (interactivChipIsVisible) { - - } - - } -
- -
-

{{ "COMMON.GROUPED" | translate }}

- @if (groupHelperModel.chipsAreInteractive) { - - @for (chip of chipList; track chip.label) { +
+

{{ "COMMON.INTERACTIVE" | translate }}

+ @if (_chipDemoService.interactivChipIsVisible) { } } - - } @else { - - @for (chip of chipList; track chip.label) { - - @if (helperModel.hasAvatar) { - - - - } - @if (helperModel.hasLeadingIcon) { - - } - {{ chip.label }} - @if (helperModel.hasTrailingIconButton) { -
+ +
+

{{ "COMMON.GROUPED" | translate }}

+ @if (_chipDemoService.groupHelperModel.chipsAreInteractive) { + + @for (chip of _chipDemoService.chipList; track chip.label) { + + } } - + + } @else { + + @for (chip of _chipDemoService.chipList; track chip.label) { + + @if (_chipDemoService.helperModel.hasAvatar) { + + + + } + @if (_chipDemoService.helperModel.hasLeadingIcon) { + + } + {{ chip.label }} + @if (_chipDemoService.helperModel.hasTrailingIconButton) { + + } + + } + } - - } -
+
+
+
- - - - + + + + + + +
+ +
+

Props

+ + - +
diff --git a/projects/demo/src/app/pages/chip/chip-demo.component.ts b/projects/demo/src/app/pages/chip/chip-demo.component.ts index 8bd7fedf..a8e16294 100644 --- a/projects/demo/src/app/pages/chip/chip-demo.component.ts +++ b/projects/demo/src/app/pages/chip/chip-demo.component.ts @@ -1,58 +1,24 @@ +import { ChipDemoService } from './chip-demo.service'; + import { ControlTableComponent } from '../../components/control-table/control-table.component'; +import { PropTableComponent } from '../../components/prop-table/prop-table.component'; +import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; +import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; -import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; -import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; import { IdsAvatarComponent } from '@i-cell/ids-angular/avatar'; -import { IdsChipAppearance, IdsChipAppearanceType, IdsChipVariant, IdsChipVariantType, IDS_CHIP_DEFAULT_CONFIG_FACTORY, IdsChipComponent, IdsChipRemoveEvent, IDS_CHIP_GROUP_DEFAULT_CONFIG_FACTORY, IdsChipGroupComponent } from '@i-cell/ids-angular/chip'; -import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; +import { IdsChipComponent, IdsChipGroupComponent } from '@i-cell/ids-angular/chip'; import { IdsPrefixDirective } from '@i-cell/ids-angular/forms'; import { IdsIconComponent } from '@i-cell/ids-angular/icon'; import { IdsIconButtonComponent } from '@i-cell/ids-angular/icon-button'; import { TranslateModule } from '@ngx-translate/core'; -const defaultConfig = IDS_CHIP_DEFAULT_CONFIG_FACTORY(); -const defaultGroupConfig = IDS_CHIP_GROUP_DEFAULT_CONFIG_FACTORY(); - -type ChipInputControls = { - appearance: IdsChipAppearanceType, - size: IdsSizeType, - variant: IdsChipVariantType, - removable: boolean, - disabled: boolean, -}; - -type ChipHelperControls = { - hasAvatar: boolean, - hasLeadingIcon: boolean, - label: string, - hasTrailingIconButton: boolean, -}; - -type ChipGroupInputControls = { - appearance: IdsChipAppearanceType, - size: IdsSizeType, - disabled: boolean, -}; - -type ChipGroupHelperControls = { - chipsAreInteractive: boolean, -}; - -const chipList: { label: string, variant: IdsChipVariantType }[] = [ - { label: 'carrot', variant: IdsChipVariant.PRIMARY }, - { label: 'onion', variant: IdsChipVariant.SECONDARY }, - { label: 'mushroom', variant: IdsChipVariant.SURFACE }, -]; - @Component({ selector: 'app-chip-demo', imports: [ TryoutComponent, - ControlTableComponent, IdsChipGroupComponent, IdsChipComponent, IdsAvatarComponent, @@ -61,6 +27,10 @@ const chipList: { label: string, variant: IdsChipVariantType }[] = [ IdsPrefixDirective, TranslateModule, FormsModule, + DemoAndCodeComponent, + TryoutControlComponent, + ControlTableComponent, + PropTableComponent, ], templateUrl: './chip-demo.component.html', styleUrls: [ @@ -69,132 +39,5 @@ const chipList: { label: string, variant: IdsChipVariantType }[] = [ ], }) export class ChipDemoComponent { - protected _inputControlConfig: DemoControlConfig = { - appearance: { - description: 'Chip appearance.', - type: 'IdsChipAppearanceType', - default: defaultConfig.appearance, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsChipAppearance), - }, - size: { - description: 'Chip size.', - type: 'IdsSizeType', - default: defaultConfig.size, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - variant: { - description: 'Chip variant.', - type: 'IdsChipVariantType', - default: defaultConfig.variant, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsChipVariant), - }, - removable: { - description: 'Whether the chip is removable or not.', - type: 'boolean', - default: defaultConfig.removable, - control: DemoControl.CHECKBOX, - }, - disabled: { - description: 'Whether the chip is disabled or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - }; - - protected _helperControlConfig: DemoControlConfig = { - hasAvatar: { - description: 'Whether the chip has avatar.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - hasLeadingIcon: { - description: 'Whether the chip has leading icon.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - label: { - description: 'Label of chip', - type: 'string', - default: '-', - demoDefault: 'Label', - }, - hasTrailingIconButton: { - description: 'Whether the chip has trailing iconButton.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - }; - - protected _groupInputControlConfig: DemoControlConfig = { - appearance: { - description: 'Chip group appearance.', - type: 'IdsChipAppearanceType', - default: defaultGroupConfig.appearance, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsChipAppearance), - }, - size: { - description: 'Chip group size.', - type: 'IdsSizeType', - default: defaultGroupConfig.size, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - disabled: { - description: 'Whether the chip group is disabled or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - }; - - protected _groupHelperControlConfig: DemoControlConfig = { - chipsAreInteractive: { - description: 'Whether the chip group build from interactive chips or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - }; - - public defaults = getDefaultFromDemoConfig(this._inputControlConfig); - public helperDefaults = getDefaultFromDemoConfig(this._helperControlConfig); - public groupDefaults = getDefaultFromDemoConfig(this._groupInputControlConfig); - public groupHelperDefaults = getDefaultFromDemoConfig(this._groupHelperControlConfig); - - public model: ChipInputControls = { ...this.defaults }; - public helperModel: ChipHelperControls = { ...this.helperDefaults }; - public groupModel: ChipGroupInputControls = { ...this.groupDefaults }; - public groupHelperModel: ChipGroupHelperControls = { ...this.groupHelperDefaults }; - - public chipList = chipList; - - public reset(): void { - this.model = { ...this.defaults }; - this.helperModel = { ...this.helperDefaults }; - this.groupModel = { ...this.groupDefaults }; - this.groupHelperModel = { ...this.groupHelperDefaults }; - this.interactivChipIsVisible = true; - - this.chipList = chipList; - } - - public interactivChipIsVisible = true; - - public onChipRemove(event: IdsChipRemoveEvent): void { - console.info('chip removed:', event.chip.id()); - this.interactivChipIsVisible = false; - } - - public onChipRemoveFromGroup(event: IdsChipRemoveEvent, index: number, label: string): void { - console.info('chip removed:', event.chip.id(), label); - this.chipList = this.chipList.toSpliced(index, 1); - } + protected _chipDemoService = inject(ChipDemoService); } diff --git a/projects/demo/src/app/pages/chip/chip-demo.service.ts b/projects/demo/src/app/pages/chip/chip-demo.service.ts new file mode 100644 index 00000000..8d61c9d8 --- /dev/null +++ b/projects/demo/src/app/pages/chip/chip-demo.service.ts @@ -0,0 +1,180 @@ +import { Injectable } from '@angular/core'; +import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; +import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; +import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; +import { + IDS_CHIP_DEFAULT_CONFIG_FACTORY, + IDS_CHIP_GROUP_DEFAULT_CONFIG_FACTORY, + IdsChipAppearance, + IdsChipAppearanceType, + IdsChipRemoveEvent, + IdsChipVariant, + IdsChipVariantType, +} from '@i-cell/ids-angular/chip'; +import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; + +const defaultConfig = IDS_CHIP_DEFAULT_CONFIG_FACTORY(); +const defaultGroupConfig = IDS_CHIP_GROUP_DEFAULT_CONFIG_FACTORY(); + +type ChipInputControls = { + appearance: IdsChipAppearanceType; + size: IdsSizeType; + variant: IdsChipVariantType; + removable: boolean; + disabled: boolean; +}; + +type ChipHelperControls = { + hasAvatar: boolean; + hasLeadingIcon: boolean; + label: string; + hasTrailingIconButton: boolean; +}; + +type ChipGroupInputControls = { + appearance: IdsChipAppearanceType; + size: IdsSizeType; + disabled: boolean; +}; + +type ChipGroupHelperControls = { + chipsAreInteractive: boolean; +}; + +const chipList: { label: string; variant: IdsChipVariantType }[] = [ + { label: 'carrot', variant: IdsChipVariant.PRIMARY }, + { label: 'onion', variant: IdsChipVariant.SECONDARY }, + { label: 'mushroom', variant: IdsChipVariant.SURFACE }, +]; + +@Injectable() +export class ChipDemoService { + public readonly inputControlConfig: DemoControlConfig = { + appearance: { + description: 'Chip appearance.', + type: 'IdsChipAppearanceType', + default: defaultConfig.appearance, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsChipAppearance), + }, + size: { + description: 'Chip size.', + type: 'IdsSizeType', + default: defaultConfig.size, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + variant: { + description: 'Chip variant.', + type: 'IdsChipVariantType', + default: defaultConfig.variant, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsChipVariant), + }, + removable: { + description: 'Whether the chip is removable or not.', + type: 'boolean', + default: defaultConfig.removable, + control: DemoControl.SWITCH, + }, + disabled: { + description: 'Whether the chip is disabled or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + }; + + public readonly helperControlConfig: DemoControlConfig = { + hasAvatar: { + description: 'Whether the chip has avatar.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + hasLeadingIcon: { + description: 'Whether the chip has leading icon.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + label: { + description: 'Label of chip', + type: 'string', + default: '-', + demoDefault: 'Label', + }, + hasTrailingIconButton: { + description: 'Whether the chip has trailing iconButton.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + }; + + public readonly groupInputControlConfig: DemoControlConfig = { + appearance: { + description: 'Chip group appearance.', + type: 'IdsChipAppearanceType', + default: defaultGroupConfig.appearance, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsChipAppearance), + }, + size: { + description: 'Chip group size.', + type: 'IdsSizeType', + default: defaultGroupConfig.size, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + disabled: { + description: 'Whether the chip group is disabled or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + }; + + public readonly groupHelperControlConfig: DemoControlConfig = { + chipsAreInteractive: { + description: 'Whether the chip group build from interactive chips or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + }; + + public defaults = getDefaultFromDemoConfig(this.inputControlConfig); + public helperDefaults = getDefaultFromDemoConfig(this.helperControlConfig); + public groupDefaults = getDefaultFromDemoConfig(this.groupInputControlConfig); + public groupHelperDefaults = getDefaultFromDemoConfig(this.groupHelperControlConfig); + + public model: ChipInputControls = { ...this.defaults }; + public helperModel: ChipHelperControls = { ...this.helperDefaults }; + public groupModel: ChipGroupInputControls = { ...this.groupDefaults }; + public groupHelperModel: ChipGroupHelperControls = { ...this.groupHelperDefaults }; + + public chipList = chipList; + + public reset(): void { + this.model = { ...this.defaults }; + this.helperModel = { ...this.helperDefaults }; + this.groupModel = { ...this.groupDefaults }; + this.groupHelperModel = { ...this.groupHelperDefaults }; + this.interactivChipIsVisible = true; + + this.chipList = chipList; + } + + public interactivChipIsVisible = true; + + public onChipRemove(event: IdsChipRemoveEvent): void { + console.info('chip removed:', event.chip.id()); + this.interactivChipIsVisible = false; + } + + public onChipRemoveFromGroup(event: IdsChipRemoveEvent, index: number, label: string): void { + console.info('chip removed:', event.chip.id(), label); + this.chipList = this.chipList.toSpliced(index, 1); + } +} diff --git a/projects/demo/src/app/pages/components/component-details/component-details.component.html b/projects/demo/src/app/pages/components/component-details/component-details.component.html index 1aa6dde0..6fcd4d0b 100644 --- a/projects/demo/src/app/pages/components/component-details/component-details.component.html +++ b/projects/demo/src/app/pages/components/component-details/component-details.component.html @@ -1,97 +1,21 @@ -
- - +
@if (heroData; as hero) { } - + -
-
- Updated 25 Feb 2025 - -
- - @for (item of componentBlocks; track $index) { - @if (item.type === "heading") { -

- {{ item.heading }} -

- } - @if (item.type === "card") { - - } - } -
+ + -
- Updated 25 Feb 2025 -

Examples

- - -
-
-

Component

-
-
- controls -
-
- @if (isOpen()) { - - } - -
+ + - Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum consequuntur voluptas numquam omnis dolorum iure, odio debitis sequi - aut fugit magni, ullam eos natus quibusdam, ratione at repellendus harum eum. + + +
diff --git a/projects/demo/src/app/pages/components/component-details/component-details.component.scss b/projects/demo/src/app/pages/components/component-details/component-details.component.scss index f8db0139..8d160482 100644 --- a/projects/demo/src/app/pages/components/component-details/component-details.component.scss +++ b/projects/demo/src/app/pages/components/component-details/component-details.component.scss @@ -11,3 +11,24 @@ ids-chip, #header { @apply border-b border-solid border-ids-page-fg-surface-lighter-40; } + +:host { + display: block; + height: 100%; + width: 100%; +} + +.component-details-host { + height: 100%; +} + +.router-container { + display: flex; + flex-direction: column; + + &::ng-deep > :not(router-outlet) { + display: block; + width: 100%; + height: 100%; + } +} diff --git a/projects/demo/src/app/pages/components/component-details/component-details.component.ts b/projects/demo/src/app/pages/components/component-details/component-details.component.ts index 9b48c99e..b985882a 100644 --- a/projects/demo/src/app/pages/components/component-details/component-details.component.ts +++ b/projects/demo/src/app/pages/components/component-details/component-details.component.ts @@ -1,39 +1,26 @@ +import { IdsTabGroupExtensionDirective } from './ids-tab-group-extension.directive'; + import { IdsTabGroupComponent } from '../../../../../../widgets/tab/tab-group.component'; import { environment } from '../../../../environments/environment.development'; -import { ContentCardComponent } from '../../../components/content-card/content-card.component'; import { HeroComponent } from '../../../components/hero/hero.component'; -import { ComponentEntry } from '../../../model/componentEntry'; -import { ContentCardData } from '../../../model/contentCardData'; +import { ComponentBlock, ComponentContent, ComponentEntry } from '../../../model/componentEntry'; import { HeroData } from '../../../model/heroData'; import { GraphqlService } from '../../../services/graphql.service'; -import { Component, OnInit, inject, signal } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; -import { IdsButtonComponent } from '@i-cell/ids-angular/button'; -import { IdsCardComponent } from '@i-cell/ids-angular/card'; -import { IdsChipComponent } from '@i-cell/ids-angular/chip'; -import { IdsIconComponent } from '@i-cell/ids-angular/icon'; -import { IdsIconButtonComponent } from '@i-cell/ids-angular/icon-button'; +import { Component, OnInit, computed, inject, signal, viewChild } from '@angular/core'; +import { ActivatedRoute, Router, RouterOutlet, RouterModule, NavigationEnd } from '@angular/router'; import { IdsTabComponent } from '@i-cell/ids-angular/tab'; -import { combineLatest, map } from 'rxjs'; - -type ComponentBlock = - | { type: 'heading'; heading: string } - | (ContentCardData & { type: 'card' }); +import { map, filter, switchMap, startWith, distinctUntilChanged } from 'rxjs'; @Component({ selector: 'app-component-details', - standalone: true, imports: [ + RouterOutlet, + RouterModule, HeroComponent, - ContentCardComponent, IdsTabComponent, IdsTabGroupComponent, - IdsChipComponent, - IdsButtonComponent, - IdsCardComponent, - IdsIconComponent, - IdsIconButtonComponent, + IdsTabGroupExtensionDirective, ], templateUrl: './component-details.component.html', styleUrl: './component-details.component.scss', @@ -42,92 +29,134 @@ export class ComponentDetailsComponent implements OnInit { public heroData?: HeroData; public componentBlocks: ComponentBlock[] = []; + public tabGroup = viewChild(IdsTabGroupComponent); + public activeTab = signal('demo'); + protected _selectedTabIndex = 1; + protected _initTabIndex = undefined; + + private _tabs = [ + 'guidelines', + 'demo', + 'api', + ]; + + public targetTabIndex = computed(() => this._tabs.indexOf(this.activeTab())); + private _graphqlService = inject(GraphqlService); private _route = inject(ActivatedRoute); + private _router = inject(Router); + public selectedSection = 'demo'; + + constructor() { + const tabIndex = this._tabs.findIndex((tab) => tab === location.pathname.split('/').pop()); + if (tabIndex > 0) { + this._selectedTabIndex = tabIndex; + } + } + + protected _onSelectedTabChange(index: number): void { + const componentRouteName = this._route.snapshot.url[0]?.path; + + this._selectedTabIndex = index; + + this._router.navigate([ + 'components', + componentRouteName, + this._tabs[this._selectedTabIndex], + ]); + } public ngOnInit(): void { - combineLatest([ - this._route.paramMap, - this._graphqlService.getComponents(), - ]).pipe( - map(([ - params, - result, - ]) => { - const slug = params.get('slug'); - const typedResult = result as { data: { entries: { data: ComponentEntry[] } } }; - const components = typedResult.data.entries.data; - return { slug, components }; - }), - ).subscribe(({ slug, components }) => { - if (!components || components.length === 0) { - this.heroData = undefined; - this.componentBlocks = []; - return; - } - let component: ComponentEntry | undefined = undefined; - if (slug) { - component = components.find((entry) => entry.slug === slug); - } - if (!component) { - component = components[0]; - } - this.heroData = { - id: Number(component.id), - title: component.title, - isBackButton: true, - description: component.comp_description, - imageUrl: component.comp_img_light_mode?.[0]?.url - ? `${environment.cmsBaseUrl}${component.comp_img_light_mode[0].url}` - : '', - imageUrlLight: component.comp_img_light_mode?.[0]?.url - ? `${environment.cmsBaseUrl}${component.comp_img_light_mode[0].url}` - : '', - imageUrlDark: component.comp_img_dark_mode?.[0]?.url - ? `${environment.cmsBaseUrl}${component.comp_img_dark_mode[0].url}` - : '', - }; - const blocks: ComponentBlock[] = []; - for (const block of component.content) { - if (block.__typename === 'Set_Content_Heading') { - blocks.push({ - type: 'heading', - heading: block.heading, - }); - } - if (block.__typename === 'Set_Content_Card') { - blocks.push({ - type: 'card', - id: Number(block.id), - orientation: block.card_properties?.card_orientation?.value ?? 'vertical', - variant: block.card_properties?.card_variant?.value ?? 'surface', - appearance: block.card_properties?.appearance?.value ?? 'filled', - transparent: block.card_properties?.card_bg_transparent ?? false, - filledInContainer: block.group_image?.filled_in_container ?? false, - state: block.group_image?.state?.value, - imageURL: block.group_image?.img_light_mode?.[0]?.url - ? `${environment.cmsBaseUrl}${block.group_image.img_light_mode[0].url}` - : '', - imageUrlLight: block.group_image?.img_light_mode?.[0]?.url - ? `${environment.cmsBaseUrl}${block.group_image.img_light_mode[0].url}` - : '', - imageUrlDark: block.group_image?.img_dark_mode?.[0]?.url - ? `${environment.cmsBaseUrl}${block.group_image.img_dark_mode[0].url}` - : '', - imageCaption: block.group_image?.img_caption, - imageBgColorVariant: block.group_image?.img_bg_color?.value ?? 'surface', - imageBGTransparent: block.group_image?.bg_transparent ?? false, - overTitle: block.content?.content_over_title, - title: block.content?.content_title, - description: block.content?.content_description, - buttonOne: Array.isArray(block.button?.button) ? block.button?.button[0]?.button_label : undefined, - buttonOneUrl: Array.isArray(block.button?.button) ? block.button?.button[0]?.button_url : block.button?.button?.button_url, - buttonTwo: Array.isArray(block.button?.button) ? block.button?.button[1]?.button_label : undefined, - buttonTwoUrl: Array.isArray(block.button?.button) ? block.button?.button[1]?.button_url : block.button?.button?.button_url, - }); + const navigationEnd$ = this._router.events.pipe( + filter((event): event is NavigationEnd => event instanceof NavigationEnd), + startWith(null), + ); + + navigationEnd$ + .pipe( + map(() => { + const urlSegments = this._router.url.split('/'); + return urlSegments[2]; + }), + distinctUntilChanged(), + filter((slug) => !!slug), + switchMap((slug) => + this._graphqlService.getComponents().pipe( + map((result) => { + const typedResult = result as { data: { entries: { data: ComponentEntry[] } } }; + const components = typedResult.data.entries.data; + return components.find((entry) => entry.slug === slug); + }), + ), + ), + ) + .subscribe((component) => { + if (component) { + this._updateHeroAndBlocks(component); + } else { + this.heroData = undefined; + this.componentBlocks = []; } + }); + + navigationEnd$.subscribe(() => { + const childRoute = this._route.firstChild?.snapshot.url[1]?.path ?? 'demo'; + + this.activeTab.set(childRoute); + }); + } + + private _updateHeroAndBlocks(component: ComponentEntry): void { + this.heroData = { + id: Number(component.id), + title: component.title, + isBackButton: true, + description: component.comp_description, + imageUrl: component.comp_img_light_mode?.[0]?.url ? `${environment.cmsBaseUrl}${component.comp_img_light_mode[0].url}` : '', + imageUrlLight: component.comp_img_light_mode?.[0]?.url ? `${environment.cmsBaseUrl}${component.comp_img_light_mode[0].url}` : '', + imageUrlDark: component.comp_img_dark_mode?.[0]?.url ? `${environment.cmsBaseUrl}${component.comp_img_dark_mode[0].url}` : '', + }; + + const blocks: ComponentBlock[] = []; + component.componentBlocks?.forEach((block: ComponentContent) => { + if (block.__typename === 'Set_Content_Heading') { + blocks.push({ + type: 'heading', + heading: block.heading, + }); + } + if (block.__typename === 'Set_Content_Card') { + blocks.push({ + type: 'card', + id: Number(block.id), + orientation: block.card_properties?.card_orientation?.value ?? 'vertical', + variant: block.card_properties?.card_variant?.value ?? 'surface', + appearance: block.card_properties?.appearance?.value ?? 'filled', + transparent: block.card_properties?.card_bg_transparent ?? false, + filledInContainer: block.group_image?.filled_in_container ?? false, + state: block.group_image?.state?.value, + imageURL: block.group_image?.img_light_mode?.[0]?.url + ? `${environment.cmsBaseUrl}${block.group_image.img_light_mode[0].url}` + : '', + imageUrlLight: block.group_image?.img_light_mode?.[0]?.url + ? `${environment.cmsBaseUrl}${block.group_image.img_light_mode[0].url}` + : '', + imageUrlDark: block.group_image?.img_dark_mode?.[0]?.url + ? `${environment.cmsBaseUrl}${block.group_image.img_dark_mode[0].url}` + : '', + imageCaption: block.group_image?.img_caption, + imageBgColorVariant: block.group_image?.img_bg_color?.value ?? 'surface', + imageBGTransparent: block.group_image?.bg_transparent ?? false, + overTitle: block.content?.content_over_title, + title: block.content?.content_title, + description: block.content?.content_description, + buttonOne: Array.isArray(block.button?.button) ? block.button?.button[0]?.button_label : undefined, + buttonOneUrl: Array.isArray(block.button?.button) ? block.button?.button[0]?.button_url : block.button?.button?.button_url, + buttonTwo: Array.isArray(block.button?.button) ? block.button?.button[1]?.button_label : undefined, + buttonTwoUrl: Array.isArray(block.button?.button) ? block.button?.button[1]?.button_url : block.button?.button?.button_url, + }); + this.componentBlocks = blocks; } - this.componentBlocks = blocks; }); } @@ -142,17 +171,6 @@ export class ComponentDetailsComponent implements OnInit { } public trackByCardOrHeading(index: number, item: ComponentBlock): string | number { - return item.type === 'card' ? item.id ?? `card-${index}` : `heading-${index}`; - } - - public isOpen = signal(false); - public isDark = signal(false); - - public toggleFooter(): void { - this.isOpen.update((open) => !open); - } - - public toggleDark(): void { - this.isDark.update((dark) => !dark); + return item.type === 'card' ? (item.id ?? `card-${index}`) : `heading-${index}`; } } diff --git a/projects/demo/src/app/pages/components/component-details/ids-tab-group-extension.directive.ts b/projects/demo/src/app/pages/components/component-details/ids-tab-group-extension.directive.ts new file mode 100644 index 00000000..a0a4b8fd --- /dev/null +++ b/projects/demo/src/app/pages/components/component-details/ids-tab-group-extension.directive.ts @@ -0,0 +1,41 @@ +import { AfterViewInit, DestroyRef, Directive, inject, input, output } from '@angular/core'; +import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'; +import { IdsTabGroupComponent } from '@i-cell/ids-angular/tab'; +// import { isNil } from 'lodash-es'; +import { skip, tap } from 'rxjs'; + +/** + * Extends the functionality of ids-tab-group with + * - input: predefined selected tab + * - output: tab change event emitter + * + * functionalities. + */ +@Directive({ + selector: 'ids-tab-group', +}) +export class IdsTabGroupExtensionDirective implements AfterViewInit { + public selectedTabIndex = input(); + public selectedTabChange = output(); + private _destroyRef = inject(DestroyRef); + private _tabGroup = inject(IdsTabGroupComponent); + + constructor() { + // emit `selectedTabIndex` of `tab-group` host, except initial value + toObservable(this._tabGroup.selectedTabIndex) + .pipe( + skip(1), + tap((index) => this.selectedTabChange.emit(index)), + takeUntilDestroyed(this._destroyRef), + ) + .subscribe(); + } + + public ngAfterViewInit(): void { + const selectedTab = this.selectedTabIndex(); + // when (inner `selectedTabIndex` of) tab-group is initialized and `selectedTabIndex` input(!) is valid + if (selectedTab !== undefined && selectedTab !== null) { + this._tabGroup.selectTab(selectedTab); + } + } +} diff --git a/projects/demo/src/app/pages/components/components.component.html b/projects/demo/src/app/pages/components/components.component.html index 3699a9b3..f013cc40 100644 --- a/projects/demo/src/app/pages/components/components.component.html +++ b/projects/demo/src/app/pages/components/components.component.html @@ -6,4 +6,8 @@ }
- + +
+ +
+ diff --git a/projects/demo/src/app/pages/components/components.component.ts b/projects/demo/src/app/pages/components/components.component.ts index 51185c9b..abdb9cc2 100644 --- a/projects/demo/src/app/pages/components/components.component.ts +++ b/projects/demo/src/app/pages/components/components.component.ts @@ -8,15 +8,16 @@ import { StatamicComponentListItem } from '../../model/statamicComponentListItem import { GraphqlService } from '../../services/graphql.service'; import { Component, inject, OnInit, signal } from '@angular/core'; +import { RouterOutlet } from '@angular/router'; import { ApolloQueryResult } from '@apollo/client/core'; @Component({ - standalone: true, selector: 'app-components', templateUrl: './components.component.html', imports: [ HeroComponent, ArticleCardComponent, + RouterOutlet, ], }) export class ComponentsComponent implements OnInit { @@ -34,8 +35,9 @@ export class ComponentsComponent implements OnInit { private readonly _graphqlService = inject(GraphqlService); public ngOnInit(): void { - this._graphqlService.getComponentsList().subscribe( - (result: ApolloQueryResult<{ entries: { data: StatamicComponentListItem[] }; entry?: EntryData }>) => { + this._graphqlService + .getComponentsList() + .subscribe((result: ApolloQueryResult<{ entries: { data: StatamicComponentListItem[] }; entry?: EntryData }>) => { const baseUrl = environment.cmsBaseUrl.replace(/\/$/, ''); const fallbackImage = 'https://via.placeholder.com/600x400?text=No+Image'; @@ -50,24 +52,20 @@ export class ComponentsComponent implements OnInit { const entry = result.data.entry; let components: ComponentData[] = []; - // Extract from nested navs_field tree if available if (entry?.navs_field) { entry.navs_field[0]?.tree?.forEach((treeNode) => { treeNode.children?.forEach((childNode) => { childNode.children?.forEach((grandchild) => { const page = grandchild.page; if (page?.id) { - // Map Statamic fields to ComponentData components.push({ id: Number(page.id) || 0, title: page.title ?? '', - comp_description: page.comp_description ?? '', // Statamic field - description: page.comp_description ?? '', // For display + comp_description: page.comp_description ?? '', + description: page.comp_description ?? '', slug: page.slug ?? '', imageUrl: - buildCmsUrl(page.comp_img_light_mode?.[0]?.url) || - buildCmsUrl(page.comp_img_dark_mode?.[0]?.url) || - fallbackImage, + buildCmsUrl(page.comp_img_light_mode?.[0]?.url) || buildCmsUrl(page.comp_img_dark_mode?.[0]?.url) || fallbackImage, imageLink: page.slug ? `/components/${page.slug}` : '', comp_img_light_mode: page.comp_img_light_mode, comp_img_dark_mode: page.comp_img_dark_mode, @@ -78,14 +76,13 @@ export class ComponentsComponent implements OnInit { }); } - // Fallback to flat list if nested not available if (components.length === 0) { const componentsList = result.data.entries.data ?? []; components = componentsList.map((componentItem: StatamicComponentListItem) => ({ id: Number(componentItem.id) || 0, title: componentItem.title ?? '', - comp_description: componentItem.comp_description ?? '', // Statamic field - description: componentItem.comp_description ?? '', // For display + comp_description: componentItem.comp_description ?? '', + description: componentItem.comp_description ?? '', slug: componentItem.slug ?? '', imageUrl: buildCmsUrl(componentItem.comp_img_light_mode?.[0]?.url) || @@ -99,14 +96,9 @@ export class ComponentsComponent implements OnInit { this.componentDatas.set(components.sort((a, b) => a.title.localeCompare(b.title))); - // Set heroData signal based on entry or fallback. if (entry) { - const lightUrl = entry.hero_image_light?.url - ? buildCmsUrl(entry.hero_image_light.url) - : ''; - const darkUrl = entry.hero_image_dark?.url - ? buildCmsUrl(entry.hero_image_dark.url) - : ''; + const lightUrl = entry.hero_image_light?.url ? buildCmsUrl(entry.hero_image_light.url) : ''; + const darkUrl = entry.hero_image_dark?.url ? buildCmsUrl(entry.hero_image_dark.url) : ''; this.heroData.set({ title: entry.title ?? 'Components', @@ -138,7 +130,6 @@ export class ComponentsComponent implements OnInit { isBackButton: true, }); } - }, - ); + }); } } diff --git a/projects/demo/src/app/pages/datepicker/datepicker-demo.component.html b/projects/demo/src/app/pages/datepicker/datepicker-demo.component.html index d9202129..741c9b5a 100644 --- a/projects/demo/src/app/pages/datepicker/datepicker-demo.component.html +++ b/projects/demo/src/app/pages/datepicker/datepicker-demo.component.html @@ -1,66 +1,91 @@ -@let templateDrivenFieldName = 'FORM_FIELD.LABEL.DATE_TEMPLATE' | translate; -@let modelDrivenFieldName = 'FORM_FIELD.LABEL.DATE_MODEL' | translate; +@let templateDrivenFieldName = "FORM_FIELD.LABEL.DATE_TEMPLATE" | translate; +@let modelDrivenFieldName = "FORM_FIELD.LABEL.DATE_MODEL" | translate; - -
-
- - {{ templateDrivenFieldName }} - - - - {{ 'FORM_FIELD.ERROR.DATE_FORMAT' | translate: { fieldName: templateDrivenFieldName } }} - {{ 'FORM_FIELD.ERROR.DATE_MIN' | translate: { fieldName: templateDrivenFieldName } }} - {{ 'FORM_FIELD.ERROR.DATE_MAX' | translate: { fieldName: templateDrivenFieldName } }} - - -
+ +
+ +
+
+ + {{ templateDrivenFieldName }} + + + + {{ + "FORM_FIELD.ERROR.DATE_FORMAT" | translate: { fieldName: templateDrivenFieldName } + }} + {{ + "FORM_FIELD.ERROR.DATE_MIN" | translate: { fieldName: templateDrivenFieldName } + }} + {{ + "FORM_FIELD.ERROR.DATE_MAX" | translate: { fieldName: templateDrivenFieldName } + }} + + +
-
- - {{ modelDrivenFieldName }} - - - - {{ 'FORM_FIELD.ERROR.DATE_FORMAT' | translate: { fieldName: modelDrivenFieldName } }} - {{ 'FORM_FIELD.ERROR.DATE_MIN' | translate: { fieldName: modelDrivenFieldName } }} - {{ 'FORM_FIELD.ERROR.DATE_MAX' | translate: { fieldName: modelDrivenFieldName } }} - - -
+
+ + {{ modelDrivenFieldName }} + + + + {{ + "FORM_FIELD.ERROR.DATE_FORMAT" | translate: { fieldName: modelDrivenFieldName } + }} + {{ + "FORM_FIELD.ERROR.DATE_MIN" | translate: { fieldName: modelDrivenFieldName } + }} + {{ + "FORM_FIELD.ERROR.DATE_MAX" | translate: { fieldName: modelDrivenFieldName } + }} + + +
+
+
- - - +
+ + + + +
+ +
+

Props

+ + +
diff --git a/projects/demo/src/app/pages/datepicker/datepicker-demo.component.ts b/projects/demo/src/app/pages/datepicker/datepicker-demo.component.ts index 1f28c88d..3a50f625 100644 --- a/projects/demo/src/app/pages/datepicker/datepicker-demo.component.ts +++ b/projects/demo/src/app/pages/datepicker/datepicker-demo.component.ts @@ -1,34 +1,21 @@ +import { DatepickerDemoService } from './datepicker-demo.service'; + import { ControlTableComponent } from '../../components/control-table/control-table.component'; +import { PropTableComponent } from '../../components/prop-table/prop-table.component'; +import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; +import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; -import { Component } from '@angular/core'; -import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; -import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; -import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; -import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; -import { IDS_DATEPICKER_DEFAULT_CONFIG_FACTORY, IdsDatepickerDirective, IdsDatepickerView, IdsDatepickerViewType, IdsDatepickerTriggerComponent } from '@i-cell/ids-angular/datepicker'; -import { IDS_FORM_FIELD_DEFAULT_CONFIG_FACTORY, IdsErrorMessageComponent, IdsFormFieldComponent, IdsInputDirective, IdsLabelDirective, IdsSuffixDirective, IdsErrorDefinitionDirective } from '@i-cell/ids-angular/forms'; +import { Component, inject } from '@angular/core'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { IdsDatepickerDirective, IdsDatepickerTriggerComponent } from '@i-cell/ids-angular/datepicker'; +import { IdsErrorMessageComponent, IdsFormFieldComponent, IdsInputDirective, IdsLabelDirective, IdsSuffixDirective, IdsErrorDefinitionDirective } from '@i-cell/ids-angular/forms'; import { TranslateModule } from '@ngx-translate/core'; -const formFieldDefaultConfig = IDS_FORM_FIELD_DEFAULT_CONFIG_FACTORY(); -const datepickerDefaultConfig = IDS_DATEPICKER_DEFAULT_CONFIG_FACTORY(); - -type FormFieldInputControls = { - size: IdsSizeType, -}; - -type DatepickerInputControls = { - minDate: string, - maxDate: string, - view: IdsDatepickerViewType, -}; - @Component({ selector: 'app-datepicker-demo', imports: [ TryoutComponent, - ControlTableComponent, IdsFormFieldComponent, IdsLabelDirective, IdsInputDirective, @@ -40,6 +27,10 @@ type DatepickerInputControls = { TranslateModule, IdsDatepickerDirective, IdsDatepickerTriggerComponent, + DemoAndCodeComponent, + TryoutControlComponent, + ControlTableComponent, + PropTableComponent, ], templateUrl: './datepicker-demo.component.html', styleUrls: [ @@ -48,54 +39,5 @@ type DatepickerInputControls = { ], }) export class DatepickerDemoComponent { - protected _formFieldInputControlConfig: DemoControlConfig = { - size: { - description: 'Size of the form field.', - type: 'IdsSizeType', - default: formFieldDefaultConfig.size, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - }; - - protected _datepickerInputControlConfig: DemoControlConfig = { - minDate: { - description: 'The datepicker\'s minimum date', - type: 'Date', - default: '-', - demoDefault: '', - control: DemoControl.DATE, - }, - maxDate: { - description: 'The datepicker\'s maximum date', - type: 'Date', - default: '-', - demoDefault: '', - control: DemoControl.DATE, - }, - view: { - description: 'The starting view of the datepicker\'s calendar popup (day, month, year)', - type: 'IdsDatepickerView', - default: datepickerDefaultConfig.view, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsDatepickerView), - }, - }; - - public formFieldDefaults = getDefaultFromDemoConfig(this._formFieldInputControlConfig); - public datepickerDefaults = getDefaultFromDemoConfig(this._datepickerInputControlConfig); - - public formFieldModel: FormFieldInputControls = { ...this.formFieldDefaults }; - public datepickerModel: DatepickerInputControls = { ...this.datepickerDefaults }; - - public input = ''; - public control = new FormControl(''); - - public reset(): void { - this.formFieldModel = { ...this.formFieldDefaults }; - this.datepickerModel = { ...this.datepickerDefaults }; - - this.input = ''; - this.control.setValue(''); - } + protected _datepickerDemoService = inject(DatepickerDemoService); } diff --git a/projects/demo/src/app/pages/datepicker/datepicker-demo.service.ts b/projects/demo/src/app/pages/datepicker/datepicker-demo.service.ts new file mode 100644 index 00000000..e0f5f4d4 --- /dev/null +++ b/projects/demo/src/app/pages/datepicker/datepicker-demo.service.ts @@ -0,0 +1,75 @@ +import { Injectable } from '@angular/core'; +import { FormControl } from '@angular/forms'; +import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; +import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; +import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; +import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; +import { IDS_DATEPICKER_DEFAULT_CONFIG_FACTORY, IdsDatepickerView, IdsDatepickerViewType } from '@i-cell/ids-angular/datepicker'; +import { IDS_FORM_FIELD_DEFAULT_CONFIG_FACTORY } from '@i-cell/ids-angular/forms'; + +const formFieldDefaultConfig = IDS_FORM_FIELD_DEFAULT_CONFIG_FACTORY(); +const datepickerDefaultConfig = IDS_DATEPICKER_DEFAULT_CONFIG_FACTORY(); + +type FormFieldInputControls = { + size: IdsSizeType, +}; + +type DatepickerInputControls = { + minDate: string, + maxDate: string, + view: IdsDatepickerViewType, +}; + +@Injectable() +export class DatepickerDemoService { + public readonly formFieldInputControlConfig: DemoControlConfig = { + size: { + description: 'Size of the form field.', + type: 'IdsSizeType', + default: formFieldDefaultConfig.size, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + }; + + public readonly datepickerInputControlConfig: DemoControlConfig = { + minDate: { + description: 'The datepicker\'s minimum date', + type: 'Date', + default: '-', + demoDefault: '', + control: DemoControl.DATE, + }, + maxDate: { + description: 'The datepicker\'s maximum date', + type: 'Date', + default: '-', + demoDefault: '', + control: DemoControl.DATE, + }, + view: { + description: 'The starting view of the datepicker\'s calendar popup (day, month, year)', + type: 'IdsDatepickerView', + default: datepickerDefaultConfig.view, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsDatepickerView), + }, + }; + + public formFieldDefaults = getDefaultFromDemoConfig(this.formFieldInputControlConfig); + public datepickerDefaults = getDefaultFromDemoConfig(this.datepickerInputControlConfig); + + public formFieldModel: FormFieldInputControls = { ...this.formFieldDefaults }; + public datepickerModel: DatepickerInputControls = { ...this.datepickerDefaults }; + + public input = ''; + public control = new FormControl(''); + + public reset(): void { + this.formFieldModel = { ...this.formFieldDefaults }; + this.datepickerModel = { ...this.datepickerDefaults }; + + this.input = ''; + this.control.setValue(''); + } +} diff --git a/projects/demo/src/app/pages/dialog/dialog-demo.component.html b/projects/demo/src/app/pages/dialog/dialog-demo.component.html index bdea3248..d10b757d 100644 --- a/projects/demo/src/app/pages/dialog/dialog-demo.component.html +++ b/projects/demo/src/app/pages/dialog/dialog-demo.component.html @@ -1,181 +1,209 @@ - -
-
- - - - @if (helperModel.useCustomHeader) { -
-

This is a custom header!

-
- } - -
- @if (helperModel.useLongContent) { -

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio molestias illo tempore quo quod unde ipsa fugit nihil placeat - dicta eius sit nemo obcaecati soluta nam ea nobis, minima asperiores! Nostrum culpa necessitatibus ratione minima voluptatum - magnam porro optio veniam velit hic aliquid neque, eius corrupti expedita pariatur ab quos adipisci rem aut libero obcaecati - sunt. Debitis, minima. Eligendi, ut. Dolorem, fugit error sit a quae, ex quibusdam fugiat dolore corporis animi velit, iste - beatae nemo at voluptatibus officiis ullam? Nemo quia labore fuga sapiente provident quibusdam veniam laborum dolorem. Cum - excepturi consectetur beatae laudantium blanditiis vero consequatur! Corporis ipsum officiis in repellendus dolorum vero, - possimus tenetur facilis. Voluptatum, deserunt quis. Omnis natus blanditiis vitae, nam earum quo dignissimos illo? Ipsum vitae - natus sapiente, quisquam tempore fugiat quo provident, numquam neque iure voluptas voluptates inventore magnam similique. - Perspiciatis non quos ea, quis laboriosam dolore incidunt, corporis quod iure harum rerum? Cumque animi optio accusamus nulla - cum consequuntur impedit iure. Nobis vero culpa dignissimos animi nulla. Cumque magnam laborum rerum veritatis at fugit - tempore molestiae sed nesciunt unde! Commodi, earum odit? Saepe quos, sequi a soluta labore voluptates earum iure repellendus? - Nihil non amet, quisquam soluta odit tempore eos accusantium! Officia sint amet voluptatibus perferendis labore! Ut dolor rem - distinctio aliquid? Velit exercitationem animi alias minus dignissimos reiciendis atque quia non. Ea aliquid porro vel laborum - soluta, aspernatur eum harum dicta voluptatum perferendis libero ex error distinctio eos odit placeat quidem? Quas modi fuga - laudantium quasi repellendus porro voluptate, magni culpa, ipsum nemo et minus atque a cupiditate consequatur voluptatibus! - Ipsam soluta modi sed veniam quam aspernatur ratione pariatur blanditiis vel. Minus accusamus est dolorem excepturi provident - molestias distinctio iusto aspernatur vel odio unde delectus enim fugiat, officia magni laborum, quia voluptatibus, - repellendus vero. Aut, aperiam? Ratione inventore aspernatur dolor amet! Eos, praesentium non expedita illo alias ullam - voluptas pariatur, quia voluptates aut libero assumenda est laborum veniam placeat quidem sequi vitae minima, doloribus ea - sunt ratione! Saepe maxime ab qui! Nobis eum odit fuga inventore doloribus modi ab a nesciunt rerum earum praesentium, - repudiandae minus pariatur laborum, obcaecati voluptas vel cum? Aliquid deleniti dignissimos delectus modi quibusdam unde - impedit laudantium. Ut, excepturi? Fugiat ab doloremque molestiae dicta assumenda aperiam numquam itaque odio omnis deleniti. - Quam corporis numquam minus et dicta praesentium tempore esse placeat deleniti quia, aperiam, beatae dolorem commodi. - Provident, similique? Corrupti, vitae officiis optio fuga distinctio error aperiam esse doloribus et molestias nihil sequi - quam repellendus repudiandae quos voluptatem similique laboriosam ex id facere animi placeat unde maxime. Dolorum, suscipit - culpa? Eligendi, voluptates. Accusantium atque officia laboriosam impedit vero architecto et deserunt beatae fuga facere - delectus quas mollitia suscipit, nihil veniam reiciendis consectetur, alias libero? Ratione, numquam repellat! Eveniet - inventore distinctio quasi quisquam. Suscipit nobis minus exercitationem dolores nam accusamus voluptatem, eaque temporibus - doloremque distinctio neque nisi aliquid fuga! Labore ullam animi accusantium rem adipisci laudantium ratione magni? Libero - laborum hic deserunt eius modi neque commodi nostrum id! Illum voluptatem minus unde error ea repellendus fuga, mollitia - quisquam ipsum omnis itaque eligendi in id. Quasi fugit quos earum. Consectetur culpa voluptates saepe qui, illo nulla ut - repudiandae distinctio exercitationem nihil dolor esse! Obcaecati quisquam perspiciatis rerum dolore minus sint officia ipsum - doloribus voluptates quod facilis, laboriosam tempore nostrum. Soluta nam architecto doloribus ipsum. Ad aut illo, - voluptatibus nobis aliquam maxime qui! Quos dicta sint quidem voluptates ipsa error aspernatur quae accusantium delectus. - Voluptatibus hic nulla maxime quibusdam qui. Quis non incidunt, iusto est illum maxime amet laboriosam quibusdam consectetur, - maiores minus rerum neque doloribus adipisci ducimus quasi repellendus eos praesentium? Consequuntur molestias possimus ipsum - animi omnis quisquam quia! Voluptatum a harum incidunt, cum voluptatibus dolor magnam recusandae, accusamus, impedit enim - itaque obcaecati amet earum corporis quasi doloribus pariatur. Eos qui praesentium sed? Omnis dolores eum nulla doloribus non. - Veritatis corporis ducimus consequatur reiciendis architecto tempora deleniti ratione accusamus pariatur libero voluptates - repellendus, sapiente nisi commodi dicta asperiores quasi corrupti! Blanditiis repellat nam vitae fuga, praesentium - dignissimos minus tenetur. Autem nam veritatis repellat temporibus perferendis blanditiis illum fugiat repellendus. Possimus, - ducimus eum ipsum adipisci minima corrupti deserunt sunt molestiae. Est earum explicabo voluptates delectus dolor quas - asperiores sit libero? Voluptatem, in! Praesentium suscipit rem placeat cum necessitatibus. Modi accusamus velit corporis - praesentium. Consectetur voluptatem illum, reiciendis in, libero labore nesciunt quia ratione doloribus aliquid fugit a unde - eligendi delectus? Voluptatibus dolor blanditiis eveniet quidem consequatur, a modi sit quis provident molestias pariatur - necessitatibus assumenda in tempora veniam corporis! Id maiores iusto accusamus quidem qui, quasi quibusdam vitae iure magnam. - Laboriosam sit quo tempore beatae, voluptas necessitatibus nihil eligendi id cum expedita, vel explicabo neque accusamus? Qui - perspiciatis dolores mollitia voluptates. Adipisci laboriosam possimus praesentium mollitia minus amet ipsum placeat! Ducimus - at nihil illo eaque voluptas? Doloribus similique, eius, exercitationem deleniti dolorem est pariatur maxime quasi libero, - odio dolores nesciunt ipsa optio suscipit minus cupiditate maiores. Porro asperiores quo neque. Quisquam, praesentium veniam. - Earum temporibus maxime aliquam possimus. Id unde ex quam, eligendi itaque quibusdam saepe laborum rerum vel modi repellendus - asperiores temporibus non consequatur, iste dignissimos, esse sed accusamus. Corrupti quam molestias cumque voluptates - praesentium doloremque repudiandae amet doloribus excepturi molestiae ea dolor obcaecati omnis nesciunt, error reprehenderit - minus veniam vitae rem et voluptas, necessitatibus ut. Doloribus, et quos. Sint velit odio doloribus delectus fugit commodi - nemo vel? Nam sequi nisi, mollitia ea similique vero perspiciatis aliquid, repellendus vel illum omnis non! Eos nulla, quaerat - dolorem libero molestias beatae? Corrupti voluptatum eligendi aliquid quas iure amet a ullam perspiciatis velit soluta. Dicta - earum amet sunt reiciendis corrupti, vitae vero porro assumenda molestias nihil dolore aspernatur repellat neque eos - voluptatem! Commodi corporis odio officiis ullam sit dolorem illo voluptatum alias similique sequi id ducimus, amet debitis - dolorum ipsa minus fugiat ipsam dolor consequatur consectetur vitae. Officiis totam sed modi ex. Nobis veniam commodi hic, - nulla quam ipsam qui! Modi facilis adipisci reprehenderit, consequatur dolore fuga nihil facere ipsa corporis doloremque a - quas quia sit error, autem qui possimus omnis odio. Mollitia ipsa maiores dolore deleniti, voluptatum dignissimos beatae vero - dolor repellendus dolores impedit laboriosam ratione eveniet earum quas voluptate ex tenetur. Nisi nobis enim voluptatum - architecto blanditiis quaerat odit saepe? Reiciendis harum, nihil quibusdam voluptates tenetur fugit iure hic, nam itaque, - eveniet officia asperiores odit. Rerum esse architecto, velit perspiciatis corrupti cumque, dolore recusandae et accusantium, - minus debitis in unde! Cupiditate distinctio cumque quisquam culpa aliquid blanditiis esse, suscipit porro vitae dicta sed - corrupti accusamus molestias libero enim unde placeat ut iusto non cum obcaecati commodi eligendi, laborum ducimus? Quia. Quod - obcaecati, sequi aliquid dolore, vero consequatur ratione unde est, ex laudantium ducimus recusandae. Reprehenderit at, fugiat - non fuga, cumque vel necessitatibus quas sunt optio modi a, accusantium omnis facere? Ratione, libero! Voluptatem doloremque - culpa explicabo distinctio asperiores non ab accusantium deleniti voluptatibus, maxime quas odit fugit vitae eveniet tempora - consequuntur officiis error esse ad numquam, rem nihil, harum commodi? Perferendis architecto placeat pariatur corporis, - voluptatibus provident maxime praesentium, molestiae perspiciatis nemo incidunt nostrum eaque non velit, nihil nam facere quos - suscipit at! Ducimus laudantium quia vel ullam sit amet. Quaerat reprehenderit, voluptate ratione suscipit debitis earum rerum - neque pariatur at ullam doloribus modi laboriosam sit, rem error accusamus deserunt deleniti. Provident ad, libero iste - similique unde explicabo consectetur magni. Est rem animi perspiciatis ex similique eaque impedit sapiente quod et, dolorum - consequatur quos quam eum quibusdam ea perferendis? Earum perspiciatis, voluptatum accusantium sequi illo error minus sed - totam nulla. Animi odio exercitationem natus alias a laboriosam nobis sequi velit ab rem, dicta, quos et deserunt commodi - aperiam voluptate tempora voluptatem ipsam provident consequuntur impedit esse amet. Dolores, at molestias! Ipsa sunt vitae - mollitia tempora laborum voluptates incidunt officiis provident neque omnis, labore iure, reprehenderit sapiente fuga saepe - minima maxime? Repellat laboriosam quod nostrum itaque ratione ipsa, consectetur deserunt animi! Modi magnam mollitia quod - molestiae necessitatibus voluptates cumque ea nam! Cupiditate, nisi voluptatibus porro neque quis error! Obcaecati enim at a - dignissimos veniam placeat dolor nemo sint eligendi voluptatum. Modi. Quibusdam at nulla nemo, molestiae enim laborum dolores - reprehenderit aliquid, nobis consectetur impedit qui repellendus culpa amet excepturi dignissimos labore! Optio atque laborum - hic. Ipsa consectetur minus praesentium atque tenetur! Quia tenetur esse, delectus vel aliquid libero, a iure assumenda - cupiditate iusto nulla repellat consectetur, animi magni porro officia placeat earum ipsum velit sint provident. Facere eos - ullam ab quae? Voluptatibus ullam ipsam corporis a nobis quaerat aliquam eum asperiores numquam? Expedita inventore iusto non - debitis quia minima iste aperiam odit iure maxime rem, atque vel placeat eligendi ab dolorem! Ullam error et placeat facere - provident aut odio vel veritatis maxime dolor distinctio minus fugiat atque quo labore, nemo, quibusdam nesciunt ipsum, - dolorum non corrupti reiciendis rerum. Id, quam aut! Laboriosam atque rem aperiam illo, dignissimos suscipit quis perferendis - at minima dolorem dolor pariatur, corporis a eaque! Harum est nobis commodi non, nisi consectetur facilis. Voluptas magni - doloribus asperiores incidunt! Iure doloremque placeat fugit sit. Molestiae eaque veritatis dolorem recusandae neque totam, - sit voluptate culpa dolores dolore nobis iusto inventore, dignissimos expedita assumenda provident facilis hic, autem soluta - magni ut. -

- } @else { -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac suscipit neque. Suspendisse ultrices quam eu venenatis - ultricies. Mauris vehicula arcu ac elementum laoreet. Nam eleifend mauris quis lorem laoreet rutrum. Pellentesque facilisis - turpis id gravida ullamcorper. Nam ultrices nulla nec dolor consectetur, condimentum molestie ipsum vestibulum. Vestibulum - eget rhoncus felis. -

- } -
- - - - + + + +
+ +
+ - - -
+
+
+ -
- -
+ + +
+ +
+ +
+ - - - - - - -
- -
- +
+ + + +
-
 + +
+

Props

+ + +
diff --git a/projects/demo/src/app/pages/dialog/dialog-demo.component.ts b/projects/demo/src/app/pages/dialog/dialog-demo.component.ts index a09055fc..7418fb83 100644 --- a/projects/demo/src/app/pages/dialog/dialog-demo.component.ts +++ b/projects/demo/src/app/pages/dialog/dialog-demo.component.ts @@ -1,33 +1,19 @@ +import { DialogDemoService } from './dialog-demo.service'; + import { ControlTableComponent } from '../../components/control-table/control-table.component'; +import { PropTableComponent } from '../../components/prop-table/prop-table.component'; +import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; +import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; import { Component, InjectionToken, inject, input } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; -import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; -import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; import { IdsButtonComponent } from '@i-cell/ids-angular/button'; -import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; -import { IDS_DIALOG_DEFAULT_CONFIG_FACTORY, IdsCustomDialogBase, IdsDialogComponent, IdsDialogHeaderDirective, IdsDialogService } from '@i-cell/ids-angular/dialog'; +import { IdsCustomDialogBase, IdsDialogComponent, IdsDialogHeaderDirective, IdsDialogService } from '@i-cell/ids-angular/dialog'; import { TranslateModule } from '@ngx-translate/core'; export const CUSTOM_DIALOG_TOKEN = new InjectionToken('ids-custom-dialog-token'); -const defaultConfig = IDS_DIALOG_DEFAULT_CONFIG_FACTORY(); - -type DialogInputControls = { - size: IdsSizeType, - mainTitle: string, - subTitle: string, - showCloseButton: boolean, - showBackdrop: boolean, -}; - -type DialogHelperControls = { - useCustomHeader: boolean, - useLongContent: boolean, -}; - @Component({ selector: 'app-custom-dialog', imports: [ @@ -36,8 +22,8 @@ type DialogHelperControls = { IdsDialogHeaderDirective, ], template: ` - @let controls = model(); - @let helperControls = helperModel(); + @let controls = dialogDemoService.model; + @let helperControls = dialogDemoService.helperModel; (); - public helperModel = input(); + public dialogDemoService = inject(DialogDemoService); } @Component({ selector: 'app-dialog-demo', imports: [ TryoutComponent, - ControlTableComponent, IdsButtonComponent, IdsDialogComponent, IdsDialogHeaderDirective, TranslateModule, FormsModule, + DemoAndCodeComponent, + TryoutControlComponent, + ControlTableComponent, + PropTableComponent, ], templateUrl: './dialog-demo.component.html', styleUrls: [ @@ -210,60 +198,7 @@ export class CustomDialogComponent extends IdsCustomDialogBase { ], }) export class DialogDemoComponent { - protected _inputControlConfig: DemoControlConfig = { - size: { - description: 'Dialog size.', - type: 'IdsSizeType', - default: defaultConfig.size, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - mainTitle: { - description: 'Dialog main title.', - type: 'string', - default: '-', - demoDefault: 'Dialog main title', - }, - subTitle: { - description: 'Dialog sub title.', - type: 'string', - default: '-', - demoDefault: 'Dialog sub title', - }, - showCloseButton: { - description: 'Whether to show close button or not.', - type: 'boolean', - default: defaultConfig.showCloseButton, - control: DemoControl.CHECKBOX, - }, - showBackdrop: { - description: 'Whether to show dialog backdrop or not.', - type: 'boolean', - default: defaultConfig.showBackdrop, - control: DemoControl.CHECKBOX, - }, - }; - - protected _helperControlConfig: DemoControlConfig = { - useCustomHeader: { - description: 'Whether to use custom header or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - useLongContent: { - description: 'Whether to use long content or not. This is for testing scrollable content.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - }; - - public defaults = getDefaultFromDemoConfig(this._inputControlConfig); - public helperDefaults = getDefaultFromDemoConfig(this._helperControlConfig); - - public model: DialogInputControls = { ...this.defaults }; - public helperModel: DialogHelperControls = { ...this.helperDefaults }; + protected _dialogDemoService = inject(DialogDemoService); private _dialogService = inject(IdsDialogService); @@ -279,17 +214,14 @@ export class DialogDemoComponent { public openCustomDialog(): void { this._dialogService.open(CustomDialogComponent, { - providers: [{ provide: CUSTOM_DIALOG_TOKEN, useValue: 'This text is provided with an InjectionToken' }], + providers: [ + { provide: CUSTOM_DIALOG_TOKEN, useValue: 'This text is provided with an InjectionToken' }, + { provide: DialogDemoService, useValue: this._dialogDemoService }, + ], inputs: { inputData: 'This text is provided using input binding', - model: this.model, - helperModel: this.helperModel, + }, }).subscribe((result) => console.info('Dialog result:', result)); } - - public reset(): void { - this.model = { ...this.defaults }; - this.helperModel = { ...this.helperDefaults }; - } } diff --git a/projects/demo/src/app/pages/dialog/dialog-demo.service.ts b/projects/demo/src/app/pages/dialog/dialog-demo.service.ts new file mode 100644 index 00000000..67c8b164 --- /dev/null +++ b/projects/demo/src/app/pages/dialog/dialog-demo.service.ts @@ -0,0 +1,84 @@ +import { Injectable } from '@angular/core'; +import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; +import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; +import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; +import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; +import { IDS_DIALOG_DEFAULT_CONFIG_FACTORY } from '@i-cell/ids-angular/dialog'; + +const defaultConfig = IDS_DIALOG_DEFAULT_CONFIG_FACTORY(); + +type DialogInputControls = { + size: IdsSizeType, + mainTitle: string, + subTitle: string, + showCloseButton: boolean, + showBackdrop: boolean, +}; + +type DialogHelperControls = { + useCustomHeader: boolean, + useLongContent: boolean, +}; + +@Injectable() +export class DialogDemoService { + public readonly inputControlConfig: DemoControlConfig = { + size: { + description: 'Dialog size.', + type: 'IdsSizeType', + default: defaultConfig.size, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + mainTitle: { + description: 'Dialog main title.', + type: 'string', + default: '-', + demoDefault: 'Dialog main title', + }, + subTitle: { + description: 'Dialog sub title.', + type: 'string', + default: '-', + demoDefault: 'Dialog sub title', + }, + showCloseButton: { + description: 'Whether to show close button or not.', + type: 'boolean', + default: defaultConfig.showCloseButton, + control: DemoControl.SWITCH, + }, + showBackdrop: { + description: 'Whether to show dialog backdrop or not.', + type: 'boolean', + default: defaultConfig.showBackdrop, + control: DemoControl.SWITCH, + }, + }; + + public readonly helperControlConfig: DemoControlConfig = { + useCustomHeader: { + description: 'Whether to use custom header or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + useLongContent: { + description: 'Whether to use long content or not. This is for testing scrollable content.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + }; + + public defaults = getDefaultFromDemoConfig(this.inputControlConfig); + public helperDefaults = getDefaultFromDemoConfig(this.helperControlConfig); + + public model: DialogInputControls = { ...this.defaults }; + public helperModel: DialogHelperControls = { ...this.helperDefaults }; + + public reset(): void { + this.model = { ...this.defaults }; + this.helperModel = { ...this.helperDefaults }; + } +} diff --git a/projects/demo/src/app/pages/divider/divider-demo.component.html b/projects/demo/src/app/pages/divider/divider-demo.component.html index 37ac961e..20829d1b 100644 --- a/projects/demo/src/app/pages/divider/divider-demo.component.html +++ b/projects/demo/src/app/pages/divider/divider-demo.component.html @@ -1,13 +1,36 @@ - -
- + +
+ +
+ +
+
- - +
+ + + +
+ +
+

Props

+ + +
diff --git a/projects/demo/src/app/pages/divider/divider-demo.component.scss b/projects/demo/src/app/pages/divider/divider-demo.component.scss index ebead985..cfc841d1 100644 --- a/projects/demo/src/app/pages/divider/divider-demo.component.scss +++ b/projects/demo/src/app/pages/divider/divider-demo.component.scss @@ -2,8 +2,9 @@ min-height: 10rem; width: 100%; display: grid; - - .ids-divider { + + .ids-divider { place-self: center; } } + diff --git a/projects/demo/src/app/pages/divider/divider-demo.component.ts b/projects/demo/src/app/pages/divider/divider-demo.component.ts index 17e3f5f2..be73b41d 100644 --- a/projects/demo/src/app/pages/divider/divider-demo.component.ts +++ b/projects/demo/src/app/pages/divider/divider-demo.component.ts @@ -1,37 +1,27 @@ +import { DividerDemoService } from './divider-demo.service'; + import { ControlTableComponent } from '../../components/control-table/control-table.component'; +import { PropTableComponent } from '../../components/prop-table/prop-table.component'; +import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; +import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; -import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; -import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; -import { - IdsSize, - IdsSizeType, - IdsOrientationType, - IdsOrientation } from '@i-cell/ids-angular/core'; -import { IDS_DIVIDER_DEFAULT_CONFIG_FACTORY, IdsDividerComponent, IdsDividerVariant, IdsDividerVariantType } from '@i-cell/ids-angular/divider'; +import { IdsDividerComponent } from '@i-cell/ids-angular/divider'; import { TranslateModule } from '@ngx-translate/core'; -const defaultConfig = IDS_DIVIDER_DEFAULT_CONFIG_FACTORY(); - -type DividerInputControls = { - size: IdsSizeType, - variant: IdsDividerVariantType, - orientation: IdsOrientationType, - width: string, - height: string, -}; - @Component({ selector: 'app-divider-demo', imports: [ TryoutComponent, - ControlTableComponent, IdsDividerComponent, TranslateModule, FormsModule, + DemoAndCodeComponent, + TryoutControlComponent, + ControlTableComponent, + PropTableComponent, ], templateUrl: './divider-demo.component.html', styleUrls: [ @@ -40,47 +30,5 @@ type DividerInputControls = { ], }) export class DividerDemoComponent { - protected _inputControlConfig: DemoControlConfig = { - orientation: { - description: 'Divider orientation.', - type: 'IdsOrientationType', - default: defaultConfig.orientation, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsOrientation), - }, - size: { - description: 'Divider size.', - type: 'IdsSizeType', - default: defaultConfig.size, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - variant: { - description: 'Divider variant.', - type: 'IdsDividerVariantType', - default: defaultConfig.variant, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsDividerVariant), - }, - width: { - description: 'Divider width as css property.', - type: 'string', - default: defaultConfig.width, - demoDefault: '100%', - }, - height: { - description: 'Divider height as css property.', - type: 'string', - default: defaultConfig.height, - demoDefault: '100%', - }, - }; - - public defaults = getDefaultFromDemoConfig(this._inputControlConfig); - - public model: DividerInputControls = { ...this.defaults }; - - public reset(): void { - this.model = { ...this.defaults }; - } + protected _dividerDemoService = inject(DividerDemoService); } diff --git a/projects/demo/src/app/pages/divider/divider-demo.service.ts b/projects/demo/src/app/pages/divider/divider-demo.service.ts new file mode 100644 index 00000000..1a4cdc46 --- /dev/null +++ b/projects/demo/src/app/pages/divider/divider-demo.service.ts @@ -0,0 +1,63 @@ +import { Injectable } from '@angular/core'; +import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; +import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; +import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; +import { IdsOrientation, IdsOrientationType, IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; +import { IDS_DIVIDER_DEFAULT_CONFIG_FACTORY, IdsDividerVariant, IdsDividerVariantType } from '@i-cell/ids-angular/divider'; + +const defaultConfig = IDS_DIVIDER_DEFAULT_CONFIG_FACTORY(); + +type DividerInputControls = { + size: IdsSizeType, + variant: IdsDividerVariantType, + orientation: IdsOrientationType, + width: string, + height: string, +}; + +@Injectable() +export class DividerDemoService { + public readonly inputControlConfig: DemoControlConfig = { + orientation: { + description: 'Divider orientation.', + type: 'IdsOrientationType', + default: defaultConfig.orientation, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsOrientation), + }, + size: { + description: 'Divider size.', + type: 'IdsSizeType', + default: defaultConfig.size, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + variant: { + description: 'Divider variant.', + type: 'IdsDividerVariantType', + default: defaultConfig.variant, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsDividerVariant), + }, + width: { + description: 'Divider width as css property.', + type: 'string', + default: defaultConfig.width, + demoDefault: '100%', + }, + height: { + description: 'Divider height as css property.', + type: 'string', + default: defaultConfig.height, + demoDefault: '100%', + }, + }; + + public defaults = getDefaultFromDemoConfig(this.inputControlConfig); + + public model: DividerInputControls = { ...this.defaults }; + + public reset(): void { + this.model = { ...this.defaults }; + } +} diff --git a/projects/demo/src/app/pages/fieldset/fieldset-demo.component.html b/projects/demo/src/app/pages/fieldset/fieldset-demo.component.html index 56df6905..f5ee4e1d 100644 --- a/projects/demo/src/app/pages/fieldset/fieldset-demo.component.html +++ b/projects/demo/src/app/pages/fieldset/fieldset-demo.component.html @@ -1,35 +1,69 @@ - - -
- @if (helperModel.showMessage) { - This is a fieldset message - } - - - First name - - Type your first name - Name is mandatory - - + +
+ + +
+ @if (_fieldsetDemoService.helperModel.showMessage) { + This is a fieldset message + } + + + First name + + Type your first name + Name is mandatory + + - - - Last name - - Type your last name - Name is mandatory - - - Middle name - - Type your middle name - Name is mandatory - - -
- + + + Last name + + Type your last name + Name is mandatory + + + Middle name + + Type your middle name + Name is mandatory + + +
+ + +
- - - +
+ + + + +
+ +
+

Props

+ + +
diff --git a/projects/demo/src/app/pages/fieldset/fieldset-demo.component.ts b/projects/demo/src/app/pages/fieldset/fieldset-demo.component.ts index 3baedf79..b47c3a64 100644 --- a/projects/demo/src/app/pages/fieldset/fieldset-demo.component.ts +++ b/projects/demo/src/app/pages/fieldset/fieldset-demo.component.ts @@ -1,27 +1,25 @@ +import { FieldsetDemoService } from './fieldset-demo.service'; + import { ControlTableComponent } from '../../components/control-table/control-table.component'; +import { PropTableComponent } from '../../components/prop-table/prop-table.component'; +import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; +import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; -import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; -import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; -import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; -import { IdsFormFieldVariant, IdsFormFieldVariantType, IDS_FIELDSET_DEFAULT_CONFIG_FACTORY, IdsErrorMessageComponent, IdsFieldsetComponent, IdsFieldsetMessageDirective, IdsFieldsetRowComponent, IdsFormFieldComponent, IdsHintMessageComponent, IdsInputDirective, IdsLabelDirective } from '@i-cell/ids-angular/forms'; +import { + IdsErrorMessageComponent, + IdsFieldsetComponent, + IdsFieldsetMessageDirective, + IdsFieldsetRowComponent, + IdsFormFieldComponent, + IdsHintMessageComponent, + IdsInputDirective, + IdsLabelDirective, +} from '@i-cell/ids-angular/forms'; import { TranslateModule } from '@ngx-translate/core'; -type FieldsetInputControls = { - size: IdsSizeType, - variant: IdsFormFieldVariantType, - legend: string, -}; - -type FieldsetHelperControls = { - showMessage: boolean, -}; - -const defaultConfig = IDS_FIELDSET_DEFAULT_CONFIG_FACTORY(); - @Component({ selector: 'app-fieldset-demo', imports: [ @@ -37,6 +35,9 @@ const defaultConfig = IDS_FIELDSET_DEFAULT_CONFIG_FACTORY(); IdsErrorMessageComponent, FormsModule, TranslateModule, + DemoAndCodeComponent, + TryoutControlComponent, + PropTableComponent, ], templateUrl: './fieldset-demo.component.html', styleUrls: [ @@ -45,50 +46,14 @@ const defaultConfig = IDS_FIELDSET_DEFAULT_CONFIG_FACTORY(); ], }) export class FieldsetDemoComponent { - protected _inputControlConfig: DemoControlConfig = { - size: { - description: 'Fieldset size.', - type: 'IdsSizeType', - default: defaultConfig.size, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - variant: { - description: 'Fieldset variant.', - type: 'IdsFormFieldVariantType', - default: defaultConfig.variant, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsFormFieldVariant), - }, - legend: { - description: 'Fieldset legend.', - type: 'string', - default: '-', - demoDefault: 'Personal data', - }, - }; - - protected _helperControlConfig: DemoControlConfig = { - showMessage: { - description: 'Whether to show fieldset message or not.', - type: 'boolean', - default: true, - control: DemoControl.CHECKBOX, - }, - }; - - public defaults = getDefaultFromDemoConfig(this._inputControlConfig); - public helperDefaults = getDefaultFromDemoConfig(this._helperControlConfig); - - public model: FieldsetInputControls = { ...this.defaults }; - public helperModel: FieldsetHelperControls = { ...this.helperDefaults }; + protected _fieldsetDemoService = inject(FieldsetDemoService); public first = 'John'; public last = 'Wick'; public middle = 'Sam'; public reset(): void { - this.model = { ...this.defaults }; + this._fieldsetDemoService.reset(); this.first = 'John'; this.last = 'Wick'; this.middle = 'Sam'; diff --git a/projects/demo/src/app/pages/fieldset/fieldset-demo.service.ts b/projects/demo/src/app/pages/fieldset/fieldset-demo.service.ts new file mode 100644 index 00000000..6b8760c9 --- /dev/null +++ b/projects/demo/src/app/pages/fieldset/fieldset-demo.service.ts @@ -0,0 +1,64 @@ +import { Injectable } from '@angular/core'; +import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; +import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; +import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; +import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; +import { IdsFormFieldVariant, IdsFormFieldVariantType, IDS_FIELDSET_DEFAULT_CONFIG_FACTORY } from '@i-cell/ids-angular/forms'; + +type FieldsetInputControls = { + size: IdsSizeType; + variant: IdsFormFieldVariantType; + legend: string; +}; + +type FieldsetHelperControls = { + showMessage: boolean; +}; + +const defaultConfig = IDS_FIELDSET_DEFAULT_CONFIG_FACTORY(); + +@Injectable() +export class FieldsetDemoService { + public readonly inputControlConfig: DemoControlConfig = { + size: { + description: 'Fieldset size.', + type: 'IdsSizeType', + default: defaultConfig.size, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + variant: { + description: 'Fieldset variant.', + type: 'IdsFormFieldVariantType', + default: defaultConfig.variant, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsFormFieldVariant), + }, + legend: { + description: 'Fieldset legend.', + type: 'string', + default: '-', + demoDefault: 'Personal data', + }, + }; + + public readonly helperControlConfig: DemoControlConfig = { + showMessage: { + description: 'Whether to show fieldset message or not.', + type: 'boolean', + default: true, + control: DemoControl.SWITCH, + }, + }; + + public defaults = getDefaultFromDemoConfig(this.inputControlConfig); + public helperDefaults = getDefaultFromDemoConfig(this.helperControlConfig); + + public model: FieldsetInputControls = { ...this.defaults }; + public helperModel: FieldsetHelperControls = { ...this.helperDefaults }; + + public reset(): void { + this.model = { ...this.defaults }; + this.helperModel = { ...this.helperDefaults }; + } +} diff --git a/projects/demo/src/app/pages/form-field/form-field-demo.component.html b/projects/demo/src/app/pages/form-field/form-field-demo.component.html index dd8459a5..f62ee942 100644 --- a/projects/demo/src/app/pages/form-field/form-field-demo.component.html +++ b/projects/demo/src/app/pages/form-field/form-field-demo.component.html @@ -1,106 +1,129 @@ -@let fieldName = 'FORM_FIELD.LABEL.NAME' | translate; +@let fieldName = "FORM_FIELD.LABEL.NAME" | translate; - -
-
-

Input (template driven)

- - {{ formFieldHelperModel.label }} - @if (formFieldHelperModel.hasLeadingIcon) { - - } - @if (formFieldHelperModel.hasPrefix) { - {{ formFieldHelperModel.prefix }} - } - - @if (formFieldHelperModel.hasSuffix) { - {{ formFieldHelperModel.suffix }} - } - @if (formFieldHelperModel.hasTrailingIcon) { - - } - @if (formFieldHelperModel.hasAction) { -
- -
- } - {{ formFieldHelperModel.hintMessage }} - - {{ 'FORM_FIELD.ERROR.REQUIRED' | translate: { fieldName } }} - - @let inputRequiredLength = inputFieldModel.control.errors?.['minlength']?.requiredLength; - {{ 'FORM_FIELD.ERROR.MINLENGTH' | translate: { fieldName, requiredLength: inputRequiredLength } }} - - {{ 'FORM_FIELD.ERROR.PATTERN' | translate: { fieldName } }} - - {{ 'FORM_FIELD.SUCCESS' | translate: { fieldName } }} - -
+ +
+ +
+
+

Input (template driven)

+ + {{ _formFieldDemoService.formFieldHelperModel.label }} + @if (_formFieldDemoService.formFieldHelperModel.hasLeadingIcon) { + + } + @if (_formFieldDemoService.formFieldHelperModel.hasPrefix) { + {{ _formFieldDemoService.formFieldHelperModel.prefix }} + } + + @if (_formFieldDemoService.formFieldHelperModel.hasSuffix) { + {{ _formFieldDemoService.formFieldHelperModel.suffix }} + } + @if (_formFieldDemoService.formFieldHelperModel.hasTrailingIcon) { + + } + @if (_formFieldDemoService.formFieldHelperModel.hasAction) { +
+ +
+ } + {{ _formFieldDemoService.formFieldHelperModel.hintMessage }} + + {{ "FORM_FIELD.ERROR.REQUIRED" | translate: { fieldName } }} + + @let inputRequiredLength = inputFieldModel.control.errors?.["minlength"]?.requiredLength; + {{ "FORM_FIELD.ERROR.MINLENGTH" | translate: { fieldName, requiredLength: inputRequiredLength } }} + + {{ "FORM_FIELD.ERROR.PATTERN" | translate: { fieldName } }} + + {{ "FORM_FIELD.SUCCESS" | translate: { fieldName } }} + +
-
-

Textarea (model driven)

- - {{ formFieldHelperModel.label }} - - {{ formFieldHelperModel.hintMessage }} - - {{ 'FORM_FIELD.ERROR.REQUIRED' | translate: { fieldName } }} - - @let textareaRequiredLength = textarea.errors?.['minlength']?.requiredLength; - {{ 'FORM_FIELD.ERROR.MINLENGTH' | translate: { fieldName, requiredLength: textareaRequiredLength } }} - - {{ 'FORM_FIELD.ERROR.PATTERN' | translate: { fieldName } }} - - {{ 'FORM_FIELD.SUCCESS' | translate: { fieldName } }} - -
+
+

Textarea (model driven)

+ + {{ _formFieldDemoService.formFieldHelperModel.label }} + + {{ _formFieldDemoService.formFieldHelperModel.hintMessage }} + + {{ "FORM_FIELD.ERROR.REQUIRED" | translate: { fieldName } }} + + @let textareaRequiredLength = _formFieldDemoService.textarea.errors?.["minlength"]?.requiredLength; + {{ "FORM_FIELD.ERROR.MINLENGTH" | translate: { fieldName, requiredLength: textareaRequiredLength } }} + + {{ "FORM_FIELD.ERROR.PATTERN" | translate: { fieldName } }} + + {{ "FORM_FIELD.SUCCESS" | translate: { fieldName } }} + +
+
+
- - - + + + + + +
+ +
+

Props

+ + - +
diff --git a/projects/demo/src/app/pages/form-field/form-field-demo.component.ts b/projects/demo/src/app/pages/form-field/form-field-demo.component.ts index 96dac53d..e4f1ddef 100644 --- a/projects/demo/src/app/pages/form-field/form-field-demo.component.ts +++ b/projects/demo/src/app/pages/form-field/form-field-demo.component.ts @@ -1,49 +1,22 @@ +import { FormFieldDemoService } from './form-field-demo.service'; + import { ControlTableComponent } from '../../components/control-table/control-table.component'; +import { PropTableComponent } from '../../components/prop-table/prop-table.component'; +import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; +import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; -import { Component } from '@angular/core'; -import { FormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms'; -import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; -import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; -import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; -import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; -import { IdsFormFieldVariant, IdsFormFieldVariantType, IDS_FORM_FIELD_DEFAULT_CONFIG_FACTORY, IdsErrorMessageComponent, IdsFormFieldComponent, IdsHintMessageComponent, IdsInputDirective, IdsLabelDirective, IdsPrefixDirective, IdsSuffixDirective, IdsFormFieldActionDirective, IdsErrorDefinitionDirective, IdsSuccessMessageComponent } from '@i-cell/ids-angular/forms'; +import { Component, inject } from '@angular/core'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { IdsErrorMessageComponent, IdsFormFieldComponent, IdsHintMessageComponent, IdsInputDirective, IdsLabelDirective, IdsPrefixDirective, IdsSuffixDirective, IdsFormFieldActionDirective, IdsErrorDefinitionDirective, IdsSuccessMessageComponent } from '@i-cell/ids-angular/forms'; import { IdsIconComponent } from '@i-cell/ids-angular/icon'; import { IdsIconButtonComponent } from '@i-cell/ids-angular/icon-button'; import { TranslateModule } from '@ngx-translate/core'; -const defaultConfig = IDS_FORM_FIELD_DEFAULT_CONFIG_FACTORY(); - -type FormFieldInputControls = { - size: IdsSizeType, - variant: IdsFormFieldVariantType, -}; - -type FormFieldHelperControls = { - hasLeadingIcon: boolean, - hasPrefix: boolean, - prefix: string, - hasSuffix: boolean, - suffix: string, - hasTrailingIcon: boolean, - hasAction: boolean, - label: string, - hintMessage: string, -}; - -type InputInputControls = { - placeholder: string, - readonly: boolean, - disabled: boolean, - required: boolean, - canHandleSuccessState: boolean, -}; - @Component({ selector: 'app-form-field-demo', imports: [ TryoutComponent, - ControlTableComponent, IdsFormFieldComponent, IdsLabelDirective, IdsInputDirective, @@ -59,6 +32,10 @@ type InputInputControls = { FormsModule, ReactiveFormsModule, TranslateModule, + DemoAndCodeComponent, + TryoutControlComponent, + ControlTableComponent, + PropTableComponent, ], templateUrl: './form-field-demo.component.html', styleUrls: [ @@ -67,144 +44,5 @@ type InputInputControls = { ], }) export class FormFieldDemoComponent { - protected _formFieldInputControlConfig: DemoControlConfig = { - size: { - description: 'Size of the form field.', - type: 'IdsSizeType', - default: defaultConfig.size, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - variant: { - description: 'Variant of the form field.', - type: 'IdsFormFieldVariantType', - default: defaultConfig.variant, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsFormFieldVariant), - }, - }; - - protected _formFieldHelperControlConfig: DemoControlConfig = { - hasLeadingIcon: { - description: 'Whether the form field has leading icon or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - hasPrefix: { - description: 'Whether the form field has prefix or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - prefix: { - description: 'Prefix for form field.', - type: 'string', - default: '-', - demoDefault: 'Prefix', - }, - hasSuffix: { - description: 'Whether the form field has suffix or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - suffix: { - description: 'Suffix for form field.', - type: 'string', - default: '-', - demoDefault: 'Suffix', - }, - hasTrailingIcon: { - description: 'Whether the form field has trailing icon or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - hasAction: { - description: 'Whether the form field has action or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - label: { - description: 'Label for form field.', - type: 'string', - default: '-', - demoDefault: 'Form field label', - }, - hintMessage: { - description: 'Hint message for form field.', - type: 'string', - default: '-', - demoDefault: 'Type a value', - }, - }; - - protected _inputInputControlConfig: DemoControlConfig = { - placeholder: { - description: 'Input / textarea placeholder.', - type: 'string', - default: '-', - demoDefault: 'Placeholder', - }, - readonly: { - description: 'Whether input / textarea is readonly or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - disabled: { - description: 'Whether input / textarea is disabled or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - onModelChange: (disable?: boolean) => { - if (disable) { - this.textarea.disable(); - } else { - this.textarea.enable(); - } - }, - }, - required: { - description: 'Whether input / textarea is required or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - onModelChange: (isRequired?: boolean) => { - if (isRequired) { - this.textarea.addValidators(Validators.required); - } else { - this.textarea.removeValidators(Validators.required); - } - }, - }, - canHandleSuccessState: { - description: 'Whether input / textarea can handle success state with a success state matcher.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - }; - - public formFieldDefaults = getDefaultFromDemoConfig(this._formFieldInputControlConfig); - public formFieldHelperDefaults = getDefaultFromDemoConfig(this._formFieldHelperControlConfig); - public inputDefaults = getDefaultFromDemoConfig(this._inputInputControlConfig); - - public formFieldModel: FormFieldInputControls = { ...this.formFieldDefaults }; - public formFieldHelperModel: FormFieldHelperControls = { ...this.formFieldHelperDefaults }; - public inputModel: InputInputControls = { ...this.inputDefaults }; - - public input = ''; - public textarea = new FormControl(''); - - public reset(): void { - this.formFieldModel = { ...this.formFieldDefaults }; - this.formFieldHelperModel = { ...this.formFieldHelperDefaults }; - this.inputModel = { ...this.inputDefaults }; - - this.input = ''; - this.textarea.setValue(''); - } + protected _formFieldDemoService = inject(FormFieldDemoService); } diff --git a/projects/demo/src/app/pages/form-field/form-field-demo.service.ts b/projects/demo/src/app/pages/form-field/form-field-demo.service.ts new file mode 100644 index 00000000..2a20b4af --- /dev/null +++ b/projects/demo/src/app/pages/form-field/form-field-demo.service.ts @@ -0,0 +1,178 @@ +import { Injectable } from '@angular/core'; +import { FormControl, Validators } from '@angular/forms'; +import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; +import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; +import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; +import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; +import { IDS_FORM_FIELD_DEFAULT_CONFIG_FACTORY, IdsFormFieldVariant, IdsFormFieldVariantType } from '@i-cell/ids-angular/forms'; + +const defaultConfig = IDS_FORM_FIELD_DEFAULT_CONFIG_FACTORY(); + +type FormFieldInputControls = { + size: IdsSizeType, + variant: IdsFormFieldVariantType, +}; + +type FormFieldHelperControls = { + hasLeadingIcon: boolean, + hasPrefix: boolean, + prefix: string, + hasSuffix: boolean, + suffix: string, + hasTrailingIcon: boolean, + hasAction: boolean, + label: string, + hintMessage: string, +}; + +type InputInputControls = { + placeholder: string, + readonly: boolean, + disabled: boolean, + required: boolean, + canHandleSuccessState: boolean, +}; + +@Injectable() +export class FormFieldDemoService { + public readonly formFieldInputControlConfig: DemoControlConfig = { + size: { + description: 'Size of the form field.', + type: 'IdsSizeType', + default: defaultConfig.size, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + variant: { + description: 'Variant of the form field.', + type: 'IdsFormFieldVariantType', + default: defaultConfig.variant, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsFormFieldVariant), + }, + }; + + public readonly formFieldHelperControlConfig: DemoControlConfig = { + hasLeadingIcon: { + description: 'Whether the form field has leading icon or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + hasPrefix: { + description: 'Whether the form field has prefix or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + prefix: { + description: 'Prefix for form field.', + type: 'string', + default: '-', + demoDefault: 'Prefix', + }, + hasSuffix: { + description: 'Whether the form field has suffix or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + suffix: { + description: 'Suffix for form field.', + type: 'string', + default: '-', + demoDefault: 'Suffix', + }, + hasTrailingIcon: { + description: 'Whether the form field has trailing icon or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + hasAction: { + description: 'Whether the form field has action or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + label: { + description: 'Label for form field.', + type: 'string', + default: '-', + demoDefault: 'Form field label', + }, + hintMessage: { + description: 'Hint message for form field.', + type: 'string', + default: '-', + demoDefault: 'Type a value', + }, + }; + + public readonly inputInputControlConfig: DemoControlConfig = { + placeholder: { + description: 'Input / textarea placeholder.', + type: 'string', + default: '-', + demoDefault: 'Placeholder', + }, + readonly: { + description: 'Whether input / textarea is readonly or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + disabled: { + description: 'Whether input / textarea is disabled or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + onModelChange: (disable?: boolean) => { + if (disable) { + this.textarea.disable(); + } else { + this.textarea.enable(); + } + }, + }, + required: { + description: 'Whether input / textarea is required or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + onModelChange: (isRequired?: boolean) => { + if (isRequired) { + this.textarea.addValidators(Validators.required); + } else { + this.textarea.removeValidators(Validators.required); + } + }, + }, + canHandleSuccessState: { + description: 'Whether input / textarea can handle success state with a success state matcher.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + }; + + public formFieldDefaults = getDefaultFromDemoConfig(this.formFieldInputControlConfig); + public formFieldHelperDefaults = getDefaultFromDemoConfig(this.formFieldHelperControlConfig); + public inputDefaults = getDefaultFromDemoConfig(this.inputInputControlConfig); + + public formFieldModel: FormFieldInputControls = { ...this.formFieldDefaults }; + public formFieldHelperModel: FormFieldHelperControls = { ...this.formFieldHelperDefaults }; + public inputModel: InputInputControls = { ...this.inputDefaults }; + + public input = ''; + public textarea = new FormControl(''); + + public reset(): void { + this.formFieldModel = { ...this.formFieldDefaults }; + this.formFieldHelperModel = { ...this.formFieldHelperDefaults }; + this.inputModel = { ...this.inputDefaults }; + + this.input = ''; + this.textarea.setValue(''); + } +} diff --git a/projects/demo/src/app/pages/icon-button/icon-button-demo.component.html b/projects/demo/src/app/pages/icon-button/icon-button-demo.component.html index 976982dd..aee30a55 100644 --- a/projects/demo/src/app/pages/icon-button/icon-button-demo.component.html +++ b/projects/demo/src/app/pages/icon-button/icon-button-demo.component.html @@ -1,23 +1,57 @@ - - - @if (model.asLink) { - - - } @else { - - } - + +
+ + + @if (_iconButtonDemoService.model.asLink) { + + + } @else { + + } + + +
- - +
+ + + +
+ +
+

Props

+ + +
diff --git a/projects/demo/src/app/pages/icon-button/icon-button-demo.component.scss b/projects/demo/src/app/pages/icon-button/icon-button-demo.component.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/projects/demo/src/app/pages/icon-button/icon-button-demo.component.ts b/projects/demo/src/app/pages/icon-button/icon-button-demo.component.ts index d042ced1..124b0b06 100644 --- a/projects/demo/src/app/pages/icon-button/icon-button-demo.component.ts +++ b/projects/demo/src/app/pages/icon-button/icon-button-demo.component.ts @@ -1,91 +1,33 @@ +import { IconButtonDemoService } from './icon-button-demo.service'; + import { ControlTableComponent } from '../../components/control-table/control-table.component'; +import { PropTableComponent } from '../../components/prop-table/prop-table.component'; +import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; +import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; -import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; -import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; -import { - IdsSize, - IdsSizeType, -} from '@i-cell/ids-angular/core'; import { IdsIconComponent } from '@i-cell/ids-angular/icon'; -import { IdsIconButtonComponent, IdsIconButtonAppearance, IdsIconButtonAppearanceType, IdsIconButtonVariantType, IdsIconButtonVariant, IDS_ICON_BUTTON_DEFAULT_CONFIG_FACTORY } from '@i-cell/ids-angular/icon-button'; +import { IdsIconButtonComponent } from '@i-cell/ids-angular/icon-button'; import { TranslateModule } from '@ngx-translate/core'; -const defaultConfig = IDS_ICON_BUTTON_DEFAULT_CONFIG_FACTORY(); - -type IconButtonInputControls = { - size: IdsSizeType, - variant: IdsIconButtonVariantType, - appearance: IdsIconButtonAppearanceType, - disabled: boolean, - asLink: boolean, -}; - @Component({ selector: 'app-icon-button-demo', imports: [ TryoutComponent, - ControlTableComponent, IdsIconButtonComponent, IdsIconComponent, TranslateModule, FormsModule, + DemoAndCodeComponent, + TryoutControlComponent, + ControlTableComponent, + PropTableComponent, ], templateUrl: './icon-button-demo.component.html', - styleUrls: [ - '../demo-page.scss', - './icon-button-demo.component.scss', - ], + styleUrls: ['../demo-page.scss'], }) export class IconButtonDemoComponent { - protected _inputControlConfig: DemoControlConfig = { - size: { - description: 'Icon Button size.', - type: 'IdsSizeType', - default: defaultConfig.size, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - variant: { - description: 'Icon Button variant.', - type: 'IdsIconButtonVariantType', - default: defaultConfig.variant, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsIconButtonVariant), - }, - appearance: { - description: 'Icon Button appearance.', - type: 'IdsIconButtonAppearanceType', - default: defaultConfig.appearance, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsIconButtonAppearance), - }, - disabled: { - description: 'Whether the icon button is disabled or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - asLink: { - description: 'Whether the idsIconButton is a link (or button).', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - }; - - public onClick(buttonName: string): void { - console.info(`${buttonName} icon button clicked`); - } - - public defaults = getDefaultFromDemoConfig(this._inputControlConfig); - - public model: IconButtonInputControls = { ...this.defaults }; - - public reset(): void { - this.model = { ...this.defaults }; - } + protected _iconButtonDemoService = inject(IconButtonDemoService); } diff --git a/projects/demo/src/app/pages/icon-button/icon-button-demo.service.ts b/projects/demo/src/app/pages/icon-button/icon-button-demo.service.ts new file mode 100644 index 00000000..e92e2c60 --- /dev/null +++ b/projects/demo/src/app/pages/icon-button/icon-button-demo.service.ts @@ -0,0 +1,67 @@ +import { Injectable } from '@angular/core'; +import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; +import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; +import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; +import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; +import { IDS_ICON_BUTTON_DEFAULT_CONFIG_FACTORY, IdsIconButtonAppearance, IdsIconButtonAppearanceType, IdsIconButtonVariant, IdsIconButtonVariantType } from '@i-cell/ids-angular/icon-button'; + +const defaultConfig = IDS_ICON_BUTTON_DEFAULT_CONFIG_FACTORY(); + +type IconButtonInputControls = { + size: IdsSizeType, + variant: IdsIconButtonVariantType, + appearance: IdsIconButtonAppearanceType, + disabled: boolean, + asLink: boolean, +}; + +@Injectable() +export class IconButtonDemoService { + public readonly inputControlConfig: DemoControlConfig = { + size: { + description: 'Icon Button size.', + type: 'IdsSizeType', + default: defaultConfig.size, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + variant: { + description: 'Icon Button variant.', + type: 'IdsIconButtonVariantType', + default: defaultConfig.variant, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsIconButtonVariant), + }, + appearance: { + description: 'Icon Button appearance.', + type: 'IdsIconButtonAppearanceType', + default: defaultConfig.appearance, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsIconButtonAppearance), + }, + disabled: { + description: 'Whether the icon button is disabled or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + asLink: { + description: 'Whether the idsIconButton is a link (or button).', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + }; + + public onClick(buttonName: string): void { + console.info(`${buttonName} icon button clicked`); + } + + public defaults = getDefaultFromDemoConfig(this.inputControlConfig); + + public model: IconButtonInputControls = { ...this.defaults }; + + public reset(): void { + this.model = { ...this.defaults }; + } +} diff --git a/projects/demo/src/app/pages/icon/icon-demo.component.html b/projects/demo/src/app/pages/icon/icon-demo.component.html index a0989e0c..55da3f7a 100644 --- a/projects/demo/src/app/pages/icon/icon-demo.component.html +++ b/projects/demo/src/app/pages/icon/icon-demo.component.html @@ -1,26 +1,53 @@ - -
-
-

Font icon

- -
-
-

SVG icon

- -
+ +
+ +
+
+

Font icon

+ +
+
+

SVG icon

+ +
+
+
- - +
+ + @if (_iconDemoService.isLoaded()) { + + } @else { +
Loading...
+ } + +
+ +
+

Props

+ + +
diff --git a/projects/demo/src/app/pages/icon/icon-demo.component.ts b/projects/demo/src/app/pages/icon/icon-demo.component.ts index b732140c..79f72869 100644 --- a/projects/demo/src/app/pages/icon/icon-demo.component.ts +++ b/projects/demo/src/app/pages/icon/icon-demo.component.ts @@ -1,37 +1,27 @@ +import { IconDemoService } from './icon-demo.service'; + import { ControlTableComponent } from '../../components/control-table/control-table.component'; +import { PropTableComponent } from '../../components/prop-table/prop-table.component'; +import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; +import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; -import { IconService } from '../../core/services/icon.service'; -import { Component, DestroyRef, inject, OnInit } from '@angular/core'; -import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; +import { Component, inject, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; -import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; -import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; -import { IdsSize, IdsSizeCollection, IdsSizeCollectionType, IdsSizeType } from '@i-cell/ids-angular/core'; -import { IdsIconVariant, IdsIconVariantType, IDS_ICON_DEFAULT_CONFIG_FACTORY } from '@i-cell/ids-angular/icon'; import { IdsIconComponent } from '@i-cell/ids-angular/icon/icon.component'; import { TranslateModule } from '@ngx-translate/core'; -const defaultConfig = IDS_ICON_DEFAULT_CONFIG_FACTORY(); - -type IconInputControls = { - size: IdsSizeType, - sizeCollection: IdsSizeCollectionType, - variant: IdsIconVariantType, - fontIcon: string - svgIcon: string, - 'aria-hidden': boolean, -}; - @Component({ selector: 'app-icon-demo', imports: [ TryoutComponent, - ControlTableComponent, IdsIconComponent, TranslateModule, FormsModule, + ControlTableComponent, + TryoutControlComponent, + DemoAndCodeComponent, + PropTableComponent, ], templateUrl: './icon-demo.component.html', styleUrls: [ @@ -40,76 +30,10 @@ type IconInputControls = { ], }) export class IconDemoComponent implements OnInit { - private readonly _iconService = inject(IconService); - private readonly _destroyRef = inject(DestroyRef); - protected _inputControlConfig: DemoControlConfig = { - size: { - description: 'Icon size.', - type: 'IdsSizeType', - default: defaultConfig.size, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - sizeCollection: { - description: 'Icon size collection.', - type: 'IdsSizeCollectionType', - default: defaultConfig.sizeCollection, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSizeCollection), - }, - variant: { - description: 'Icon variant.', - type: 'IdsIconVariantType', - default: defaultConfig.variant, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsIconVariant), - }, - fontIcon: { - description: 'Name of font icon.', - type: 'string', - default: '-', - demoDefault: 'key', - control: DemoControl.SELECT, - list: [], - }, - svgIcon: { - description: 'Name of svg icon file', - type: 'IdsIconVariantType', - default: '-', - demoDefault: 'key', - control: DemoControl.SELECT, - list: [], - }, - 'aria-hidden': { - description: 'Determinate whether the component is hidden or not for screen readers.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - }; + protected _iconDemoService = inject(IconDemoService); public ngOnInit(): void { - this._loadIcons(); - } - - private _loadIcons(): void { - this._iconService.loadIcons().pipe( - takeUntilDestroyed(this._destroyRef), - ).subscribe((list: string[]) => { - this._inputControlConfig = { - ...this._inputControlConfig, - fontIcon: { ...this._inputControlConfig.fontIcon, list }, - svgIcon: { ...this._inputControlConfig.svgIcon, list }, - }; - }); - } - - public defaults = getDefaultFromDemoConfig(this._inputControlConfig); - - public model: IconInputControls = { ...this.defaults }; - - public reset(): void { - this.model = { ...this.defaults }; + this._iconDemoService.loadIcons(); } } diff --git a/projects/demo/src/app/pages/icon/icon-demo.service.ts b/projects/demo/src/app/pages/icon/icon-demo.service.ts new file mode 100644 index 00000000..eac23bbd --- /dev/null +++ b/projects/demo/src/app/pages/icon/icon-demo.service.ts @@ -0,0 +1,100 @@ +import { IconService } from '../../core/services/icon.service'; + +import { DestroyRef, inject, Injectable, signal } from '@angular/core'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; +import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; +import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; +import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; +import { IdsSize, IdsSizeCollection, IdsSizeCollectionType, IdsSizeType } from '@i-cell/ids-angular/core'; +import { IDS_ICON_DEFAULT_CONFIG_FACTORY, IdsIconVariant, IdsIconVariantType } from '@i-cell/ids-angular/icon'; + +const defaultConfig = IDS_ICON_DEFAULT_CONFIG_FACTORY(); + +type IconInputControls = { + size: IdsSizeType, + sizeCollection: IdsSizeCollectionType, + variant: IdsIconVariantType, + fontIcon: string + svgIcon: string, + 'aria-hidden': boolean, +}; +@Injectable() +export class IconDemoService { + private readonly _iconService = inject(IconService); + private readonly _destroyRef = inject(DestroyRef); + + public isLoaded = signal(false); + + public inputControlConfig = signal>({ + size: { + description: 'Icon size.', + type: 'IdsSizeType', + default: defaultConfig.size, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + sizeCollection: { + description: 'Icon size collection.', + type: 'IdsSizeCollectionType', + default: defaultConfig.sizeCollection, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSizeCollection), + }, + variant: { + description: 'Icon variant.', + type: 'IdsIconVariantType', + default: defaultConfig.variant, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsIconVariant), + }, + fontIcon: { + description: 'Name of font icon.', + type: 'string', + default: '-', + demoDefault: 'key', + control: DemoControl.SELECT, + list: [], + }, + svgIcon: { + description: 'Name of svg icon file', + type: 'IdsIconVariantType', + default: '-', + demoDefault: 'key', + control: DemoControl.SELECT, + list: [], + }, + 'aria-hidden': { + description: 'Determinate whether the component is hidden or not for screen readers.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + }); + + public loadIcons(): void { + this._iconService.loadIcons().pipe( + takeUntilDestroyed(this._destroyRef), + ).subscribe((list: string[]) => { + + this.inputControlConfig.update((currentConfig) => ({ + ...currentConfig, + fontIcon: { ...currentConfig.fontIcon, list: list }, + svgIcon: { ...currentConfig.svgIcon, list: list }, + })); + + const currentDefaults = getDefaultFromDemoConfig(this.inputControlConfig()); + this.model = { ...currentDefaults }; + + this.isLoaded.set(true); + }); + } + + public defaults = getDefaultFromDemoConfig(this.inputControlConfig()); + + public model: IconInputControls = { ...this.defaults }; + + public reset(): void { + this.defaults = getDefaultFromDemoConfig(this.inputControlConfig()); + this.model = { ...this.defaults }; + } +} diff --git a/projects/demo/src/app/pages/index/index.component.scss b/projects/demo/src/app/pages/index/index.component.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/projects/demo/src/app/pages/index/index.component.ts b/projects/demo/src/app/pages/index/index.component.ts index 4577c84d..4369a71a 100644 --- a/projects/demo/src/app/pages/index/index.component.ts +++ b/projects/demo/src/app/pages/index/index.component.ts @@ -6,20 +6,22 @@ import { Component, signal } from '@angular/core'; import { IdsCardComponent } from '@i-cell/ids-angular/card'; @Component({ selector: 'app-index', - standalone: true, imports: [ HeroComponent, IdsCardComponent, ], templateUrl: './index.component.html', - styleUrl: './index.component.scss', }) export class IndexComponent { public indexDatas = INDEX_DATA; public heroData = signal({ title: 'Welcome to I-DS Design System ', - // eslint-disable-next-line @stylistic/js/max-len - description: 'Our design system enables us to create consistent web interfaces. We offer comprehensive design principles, technical documentation, and live examples of components to streamline our workflow. While browsing through the components, you can conveniently copy code snippets to enhance efficiency in your work. Additionally, you can easily access the Figma design file for comparative analysis. Our design system not only assists developers and designers but also provides support for testers and analysts actively involved in the design process.', + description: 'Our design system enables us to create consistent web interfaces.' + + ' We offer comprehensive design principles, technical documentation, and live examples of components to streamline our workflow.' + + ' While browsing through the components, you can conveniently copy code snippets to enhance efficiency in your work.' + + ' Additionally, you can easily access the Figma design file for comparative analysis.' + + ' Our design system not only assists developers and designers ' + + 'but also provides support for testers and analysts actively involved in the design process.', localImageUrl: 'assets/images/illustration/ids-illu-comp-general@2x.png', id: 0, imageUrl: '', diff --git a/projects/demo/src/app/pages/issue-report/issue-report.component.scss b/projects/demo/src/app/pages/issue-report/issue-report.component.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/projects/demo/src/app/pages/issue-report/issue-report.component.ts b/projects/demo/src/app/pages/issue-report/issue-report.component.ts index 57094842..f73ec5ec 100644 --- a/projects/demo/src/app/pages/issue-report/issue-report.component.ts +++ b/projects/demo/src/app/pages/issue-report/issue-report.component.ts @@ -19,7 +19,6 @@ type ComponentBlock = ContentCardComponent, ], templateUrl: './issue-report.component.html', - styleUrl: './issue-report.component.scss', }) export class IssueReportComponent implements OnInit, OnDestroy { public indexDatas = ISSUE_DATA; diff --git a/projects/demo/src/app/pages/menu-item/menu-item-demo.component.html b/projects/demo/src/app/pages/menu-item/menu-item-demo.component.html index a0e3accf..f46bf068 100644 --- a/projects/demo/src/app/pages/menu-item/menu-item-demo.component.html +++ b/projects/demo/src/app/pages/menu-item/menu-item-demo.component.html @@ -1,69 +1,90 @@ - - -
-
-

Button

-
- + +
+ + +
+
+

Button

+
+ +
+
+
-
- -
- + + +
+ +
+ + + + +
+ +
+

Props

- - - + +
diff --git a/projects/demo/src/app/pages/menu-item/menu-item-demo.component.ts b/projects/demo/src/app/pages/menu-item/menu-item-demo.component.ts index f8c101e2..d2b1fb01 100644 --- a/projects/demo/src/app/pages/menu-item/menu-item-demo.component.ts +++ b/projects/demo/src/app/pages/menu-item/menu-item-demo.component.ts @@ -1,41 +1,23 @@ +import { MenuItemDemoService } from './menu-item-demo.service'; + import { ControlTableComponent } from '../../components/control-table/control-table.component'; +import { PropTableComponent } from '../../components/prop-table/prop-table.component'; +import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; +import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; import { CdkMenuBar } from '@angular/cdk/menu'; -import { Component, ViewEncapsulation } from '@angular/core'; +import { Component, inject, ViewEncapsulation } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { RouterLink } from '@angular/router'; -import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; -import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; -import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; -import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; import { IdsIconComponent } from '@i-cell/ids-angular/icon'; -import { IDS_MENU_ITEM_DEFAULT_CONFIG_FACTORY, IdsActiveIndicatorDirective, IdsMenuItemAppearance, IdsMenuItemAppearanceType, IdsMenuItemComponent, IdsMenuItemVariant, IdsMenuItemVariantType } from '@i-cell/ids-angular/menu'; +import { IdsActiveIndicatorDirective, IdsMenuItemComponent } from '@i-cell/ids-angular/menu'; import { TranslateModule } from '@ngx-translate/core'; -const menuItemDefaultConfig = IDS_MENU_ITEM_DEFAULT_CONFIG_FACTORY(); - -type MenuItemInputControls = { - appearance: IdsMenuItemAppearanceType, - size: IdsSizeType, - variant: IdsMenuItemVariantType, - disabled: boolean, -}; - -type MenuItemHelperControls = { - hasLeadingIcon: boolean, - hasTrailingIcon: boolean, - showLabel: boolean; - active: boolean; - extraHeight: boolean; - testBackgroundColor: 'none' | 'dark', -}; - @Component({ selector: 'app-menu-item-demo', imports: [ TryoutComponent, - ControlTableComponent, IdsMenuItemComponent, IdsActiveIndicatorDirective, IdsIconComponent, @@ -43,6 +25,10 @@ type MenuItemHelperControls = { RouterLink, TranslateModule, FormsModule, + DemoAndCodeComponent, + ControlTableComponent, + TryoutControlComponent, + PropTableComponent, ], templateUrl: './menu-item-demo.component.html', styleUrls: [ @@ -52,90 +38,5 @@ type MenuItemHelperControls = { encapsulation: ViewEncapsulation.None, }) export class MenuItemDemoComponent { - protected _menuItemInputControlConfig: DemoControlConfig = { - appearance: { - description: 'Menu item appearance.', - type: 'IdsMenuItemAppearanceType', - default: menuItemDefaultConfig.appearance, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsMenuItemAppearance), - }, - size: { - description: 'Menu item size.', - type: 'IdsSizeType', - default: menuItemDefaultConfig.size, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - variant: { - description: 'Menu item variant.', - type: 'IdsMenuItemVariantType', - default: menuItemDefaultConfig.variant, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsMenuItemVariant), - }, - disabled: { - description: 'Whether the menu item is disabled or not', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - }; - - protected _menuItemHelperControlConfig: DemoControlConfig = { - hasLeadingIcon: { - description: 'Whether the menu item has a leading icon or not.', - type: 'boolean', - default: true, - control: DemoControl.CHECKBOX, - }, - hasTrailingIcon: { - description: 'Whether the menu item has a trailing icon or not.', - type: 'boolean', - default: true, - control: DemoControl.CHECKBOX, - }, - showLabel: { - description: 'Show or hide the menu item\'s label.', - type: 'boolean', - default: menuItemDefaultConfig.showLabel, - control: DemoControl.CHECKBOX, - }, - active: { - description: 'Whether the menu item is active or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - extraHeight: { - description: 'Add extra height to the menu item\'s wrapper to distance the active indicator from it (for testing purposes).', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - testBackgroundColor: { - description: 'Text of button', - type: 'string', - default: 'none', - control: DemoControl.SELECT, - list: [ - 'none', - 'dark', - ], - }, - }; - - public menuItemDefaults = getDefaultFromDemoConfig(this._menuItemInputControlConfig); - public menuItemHelperDefaults = getDefaultFromDemoConfig(this._menuItemHelperControlConfig); - - public menuItemModel: MenuItemInputControls = { ...this.menuItemDefaults }; - public menuItemHelperModel: MenuItemHelperControls = { ...this.menuItemHelperDefaults }; - - // eslint-disable-next-line no-magic-numbers - public items = Array(3); - - public reset(): void { - this.menuItemModel = { ...this.menuItemDefaults }; - this.menuItemHelperModel = { ...this.menuItemHelperDefaults }; - } + protected _menuItemDemoService = inject(MenuItemDemoService); } diff --git a/projects/demo/src/app/pages/menu-item/menu-item-demo.service.ts b/projects/demo/src/app/pages/menu-item/menu-item-demo.service.ts new file mode 100644 index 00000000..98078789 --- /dev/null +++ b/projects/demo/src/app/pages/menu-item/menu-item-demo.service.ts @@ -0,0 +1,113 @@ +import { Injectable } from '@angular/core'; +import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; +import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; +import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; +import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; +import { IDS_MENU_ITEM_DEFAULT_CONFIG_FACTORY, IdsMenuItemAppearance, IdsMenuItemAppearanceType, IdsMenuItemVariant, IdsMenuItemVariantType } from '@i-cell/ids-angular/menu'; + +const menuItemDefaultConfig = IDS_MENU_ITEM_DEFAULT_CONFIG_FACTORY(); +const numberOfItems = 3; + +type MenuItemInputControls = { + appearance: IdsMenuItemAppearanceType, + size: IdsSizeType, + variant: IdsMenuItemVariantType, + disabled: boolean, +}; + +type MenuItemHelperControls = { + hasLeadingIcon: boolean, + hasTrailingIcon: boolean, + showLabel: boolean; + active: boolean; + extraHeight: boolean; + testBackgroundColor: 'none' | 'dark', +}; +@Injectable() +export class MenuItemDemoService { + public readonly menuItemInputControlConfig: DemoControlConfig = { + appearance: { + description: 'Menu item appearance.', + type: 'IdsMenuItemAppearanceType', + default: menuItemDefaultConfig.appearance, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsMenuItemAppearance), + }, + size: { + description: 'Menu item size.', + type: 'IdsSizeType', + default: menuItemDefaultConfig.size, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + variant: { + description: 'Menu item variant.', + type: 'IdsMenuItemVariantType', + default: menuItemDefaultConfig.variant, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsMenuItemVariant), + }, + disabled: { + description: 'Whether the menu item is disabled or not', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + }; + + public readonly menuItemHelperControlConfig: DemoControlConfig = { + hasLeadingIcon: { + description: 'Whether the menu item has a leading icon or not.', + type: 'boolean', + default: true, + control: DemoControl.SWITCH, + }, + hasTrailingIcon: { + description: 'Whether the menu item has a trailing icon or not.', + type: 'boolean', + default: true, + control: DemoControl.SWITCH, + }, + showLabel: { + description: 'Show or hide the menu item\'s label.', + type: 'boolean', + default: menuItemDefaultConfig.showLabel, + control: DemoControl.SWITCH, + }, + active: { + description: 'Whether the menu item is active or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + extraHeight: { + description: 'Add extra height to the menu item\'s wrapper to distance the active indicator from it (for testing purposes).', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + testBackgroundColor: { + description: 'Text of button', + type: 'string', + default: 'none', + control: DemoControl.SELECT, + list: [ + 'none', + 'dark', + ], + }, + }; + + public menuItemDefaults = getDefaultFromDemoConfig(this.menuItemInputControlConfig); + public menuItemHelperDefaults = getDefaultFromDemoConfig(this.menuItemHelperControlConfig); + + public menuItemModel: MenuItemInputControls = { ...this.menuItemDefaults }; + public menuItemHelperModel: MenuItemHelperControls = { ...this.menuItemHelperDefaults }; + + public items = Array(numberOfItems); + + public reset(): void { + this.menuItemModel = { ...this.menuItemDefaults }; + this.menuItemHelperModel = { ...this.menuItemHelperDefaults }; + } +} diff --git a/projects/demo/src/app/pages/notification/notification-demo.component.html b/projects/demo/src/app/pages/notification/notification-demo.component.html index 7a2fea57..315a3acb 100644 --- a/projects/demo/src/app/pages/notification/notification-demo.component.html +++ b/projects/demo/src/app/pages/notification/notification-demo.component.html @@ -1,64 +1,106 @@ - - - @if (this.displayComponent()) { - - This is a notification with a long content and an action. Notice how the text wraps to multiple lines when the max-width is reached. - @if (helperModel.showAction1Button) { - } - {{ helperModel.action1Text }} - @if (helperModel.action1HasTrailingIcon) { - + @if (_notificationDemoService.helperModel.showAction2Button) { + } - + + } @else { + } - @if (helperModel.showAction2Button) { - - } - - } @else { - - } - + + +
+ +
+ + @if (_notificationDemoService.isLoaded()) { + + } @else { +
Loading...
+ } + + +
+ +
+

Props

- - - + +
diff --git a/projects/demo/src/app/pages/notification/notification-demo.component.ts b/projects/demo/src/app/pages/notification/notification-demo.component.ts index 3e80c5ae..a8d96cbb 100644 --- a/projects/demo/src/app/pages/notification/notification-demo.component.ts +++ b/projects/demo/src/app/pages/notification/notification-demo.component.ts @@ -1,62 +1,32 @@ +import { NotificationDemoService } from './notification-demo.service'; + import { ControlTableComponent } from '../../components/control-table/control-table.component'; +import { PropTableComponent } from '../../components/prop-table/prop-table.component'; +import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; +import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; -import { IconService } from '../../core/services/icon.service'; -import { Component, DestroyRef, inject, OnInit, signal } from '@angular/core'; -import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; +import { Component, inject, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; -import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; -import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; -import { IdsButtonAppearance, IdsButtonAppearanceType, IdsButtonComponent } from '@i-cell/ids-angular/button'; -import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; +import { IdsButtonComponent } from '@i-cell/ids-angular/button'; import { IdsIconComponent } from '@i-cell/ids-angular/icon'; -import { IdsNotificationComponent, IdsNotificationActionButtonDirective, IdsNotificationVariantType, IdsNotificationAppearanceType, IDS_NOTIFICATION_DEFAULT_CONFIG_FACTORY, IdsNotificationAppearance, IdsNotificationVariant } from '@i-cell/ids-angular/notification'; +import { IdsNotificationComponent, IdsNotificationActionButtonDirective } from '@i-cell/ids-angular/notification'; import { TranslateModule } from '@ngx-translate/core'; -type NotificationInputControls = { - size: IdsSizeType, - appearance: IdsNotificationAppearanceType, - variant: IdsNotificationVariantType, - icon: string, - title: string, - closeButtonSize: IdsSizeType, - closeLabelButtonAppearance: IdsButtonAppearanceType, - closeButtonLabel: string, - urgent: boolean, - displayActionsAtBottom: boolean, -}; - -type NotificationHelperControls = { - showAction1Button: boolean, - showAction2Button: boolean, - action1Appearance: IdsButtonAppearanceType, - action1Size: IdsSizeType, - action1Disabled: boolean, - action1Text: string, - action1HasLeadingIcon: boolean, - action1HasTrailingIcon: boolean, - action2Appearance: IdsButtonAppearanceType, - action2Size: IdsSizeType, - action2Disabled: boolean, - action2Text: string, - action2HasLeadingIcon: boolean, - action2HasTrailingIcon: boolean, -}; - -const defaultConfig = IDS_NOTIFICATION_DEFAULT_CONFIG_FACTORY(); - @Component({ selector: 'app-notification-demo', imports: [ TryoutComponent, - ControlTableComponent, IdsIconComponent, TranslateModule, FormsModule, IdsNotificationComponent, IdsButtonComponent, IdsNotificationActionButtonDirective, + DemoAndCodeComponent, + TryoutControlComponent, + ControlTableComponent, + PropTableComponent, ], templateUrl: './notification-demo.component.html', styleUrls: [ @@ -65,207 +35,11 @@ const defaultConfig = IDS_NOTIFICATION_DEFAULT_CONFIG_FACTORY(); ], }) export class NotificationDemoComponent implements OnInit { - private readonly _iconService = inject(IconService); - private readonly _destroyRef = inject(DestroyRef); - public displayComponent = signal(true); - - protected _inputControlConfig: DemoControlConfig = { - appearance: { - description: 'Notification appearance.', - type: 'IdsNotificationAppearanceType', - default: defaultConfig.appearance, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsNotificationAppearance), - }, - size: { - description: 'Notification size.', - type: 'IdsSizeType', - default: defaultConfig.size, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - variant: { - description: 'Notification variant.', - type: 'IdsNotificationVariantType', - default: defaultConfig.variant, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsNotificationVariant), - }, - icon: { - description: 'Name of leading icon.', - type: 'string', - default: '-', - demoDefault: '', - control: DemoControl.SELECT, - list: [], - }, - title: { - description: 'Title of notification', - type: 'string', - default: '-', - demoDefault: 'Sample Title', - }, - closeButtonSize: { - description: 'Close Button size.', - type: 'IdsSizeType', - default: defaultConfig.closeButtonSize, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - closeButtonLabel: { - description: 'Title of close button', - type: 'string', - default: '-', - demoDefault: '', - }, - closeLabelButtonAppearance: { - description: 'Close Label Button appearance.', - type: 'IdsButtonAppearanceType', - default: defaultConfig.closeLabelButtonAppearance, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsButtonAppearance), - }, - urgent: { - description: 'Whether the notification is urgent or not. It changes the role of the notification.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - displayActionsAtBottom: { - description: 'Whether display the notification actions at bottom or not.', - type: 'boolean', - default: defaultConfig.displayActionsAtBottom, - control: DemoControl.CHECKBOX, - }, - }; - protected _helperControlConfig: DemoControlConfig = { - showAction1Button: { - description: 'Whether display the button or not', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - action1Appearance: { - description: 'Button appearance.', - type: 'IdsButtonAppearanceType', - default: IdsButtonAppearance.TEXT, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsButtonAppearance), - }, - action1Size: { - description: 'Button size.', - type: 'IdsSizeType', - default: IdsSize.COMPACT, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - action1Disabled: { - description: 'Whether the button is disabled or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - action1Text: { - description: 'Text of button', - type: 'string', - default: '-', - demoDefault: 'Action1 button', - }, - action1HasLeadingIcon: { - description: 'Whether the button has leading icon or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - action1HasTrailingIcon: { - description: 'Whether the button has trailing icon or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - showAction2Button: { - description: 'Whether display the button or not', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - action2Appearance: { - description: 'Button appearance.', - type: 'IdsButtonAppearanceType', - default: IdsButtonAppearance.OUTLINED, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsButtonAppearance), - }, - action2Size: { - description: 'Button size.', - type: 'IdsSizeType', - default: IdsSize.COMPACT, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - action2Disabled: { - description: 'Whether the button is disabled or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - action2Text: { - description: 'Text of button', - type: 'string', - default: '-', - demoDefault: 'Action2 button', - }, - action2HasLeadingIcon: { - description: 'Whether the button has leading icon or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - action2HasTrailingIcon: { - description: 'Whether the button has trailing icon or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - }; + protected _notificationDemoService = inject(NotificationDemoService); public ngOnInit(): void { - this._loadIcons(); - } - - private _loadIcons(): void { - this._iconService.loadIcons().pipe( - takeUntilDestroyed(this._destroyRef), - ).subscribe((list: string[]) => { - this._inputControlConfig = { - ...this._inputControlConfig, - icon: { ...this._inputControlConfig.icon, list }, - }; - }); + this._notificationDemoService.loadIcons(); } - public defaults = getDefaultFromDemoConfig(this._inputControlConfig); - public helperDefaults = getDefaultFromDemoConfig(this._helperControlConfig); - - public model: NotificationInputControls = { ...this.defaults }; - public helperModel: NotificationHelperControls = { ...this.helperDefaults }; - - public onClick(buttonName: string): void { - console.info(`${buttonName} button clicked`); - } - - public reset(): void { - this.displayComponent.set(true); - this.model = { ...this.defaults }; - this.helperModel = { ...this.helperDefaults }; - } - - public delete(): void { - this.displayComponent.set(false); - } - - public onRestoreButtonClick(): void { - this.displayComponent.set(true); - } } diff --git a/projects/demo/src/app/pages/notification/notification-demo.service.ts b/projects/demo/src/app/pages/notification/notification-demo.service.ts new file mode 100644 index 00000000..a5f31b30 --- /dev/null +++ b/projects/demo/src/app/pages/notification/notification-demo.service.ts @@ -0,0 +1,253 @@ +import { IconService } from '../../core/services/icon.service'; + +import { DestroyRef, inject, Injectable, signal } from '@angular/core'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; +import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; +import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; +import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; +import { IdsButtonAppearance, IdsButtonAppearanceType } from '@i-cell/ids-angular/button'; +import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; +import { IDS_NOTIFICATION_DEFAULT_CONFIG_FACTORY, IdsNotificationAppearance, IdsNotificationAppearanceType, IdsNotificationVariant, IdsNotificationVariantType } from '@i-cell/ids-angular/notification'; + +type NotificationInputControls = { + size: IdsSizeType, + appearance: IdsNotificationAppearanceType, + variant: IdsNotificationVariantType, + icon: string, + title: string, + closeButtonSize: IdsSizeType, + closeLabelButtonAppearance: IdsButtonAppearanceType, + closeButtonLabel: string, + urgent: boolean, + displayActionsAtBottom: boolean, +}; + +type NotificationHelperControls = { + showAction1Button: boolean, + showAction2Button: boolean, + action1Appearance: IdsButtonAppearanceType, + action1Size: IdsSizeType, + action1Disabled: boolean, + action1Text: string, + action1HasLeadingIcon: boolean, + action1HasTrailingIcon: boolean, + action2Appearance: IdsButtonAppearanceType, + action2Size: IdsSizeType, + action2Disabled: boolean, + action2Text: string, + action2HasLeadingIcon: boolean, + action2HasTrailingIcon: boolean, +}; + +const defaultConfig = IDS_NOTIFICATION_DEFAULT_CONFIG_FACTORY(); + +@Injectable() +export class NotificationDemoService { + private readonly _iconService = inject(IconService); + private readonly _destroyRef = inject(DestroyRef); + public displayComponent = signal(true); + public isLoaded = signal(false); + + public inputControlConfig = signal>({ + appearance: { + description: 'Notification appearance.', + type: 'IdsNotificationAppearanceType', + default: defaultConfig.appearance, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsNotificationAppearance), + }, + size: { + description: 'Notification size.', + type: 'IdsSizeType', + default: defaultConfig.size, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + variant: { + description: 'Notification variant.', + type: 'IdsNotificationVariantType', + default: defaultConfig.variant, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsNotificationVariant), + }, + icon: { + description: 'Name of leading icon.', + type: 'string', + default: '-', + demoDefault: '', + control: DemoControl.SELECT, + list: [], + }, + title: { + description: 'Title of notification', + type: 'string', + default: '-', + demoDefault: 'Sample Title', + }, + closeButtonSize: { + description: 'Close Button size.', + type: 'IdsSizeType', + default: defaultConfig.closeButtonSize, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + closeButtonLabel: { + description: 'Title of close button', + type: 'string', + default: '-', + demoDefault: '', + }, + closeLabelButtonAppearance: { + description: 'Close Label Button appearance.', + type: 'IdsButtonAppearanceType', + default: defaultConfig.closeLabelButtonAppearance, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsButtonAppearance), + }, + urgent: { + description: 'Whether the notification is urgent or not. It changes the role of the notification.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + displayActionsAtBottom: { + description: 'Whether display the notification actions at bottom or not.', + type: 'boolean', + default: defaultConfig.displayActionsAtBottom, + control: DemoControl.SWITCH, + }, + }); + + public readonly helperControlConfig: DemoControlConfig = { + showAction1Button: { + description: 'Whether display the button or not', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + action1Appearance: { + description: 'Button appearance.', + type: 'IdsButtonAppearanceType', + default: IdsButtonAppearance.TEXT, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsButtonAppearance), + }, + action1Size: { + description: 'Button size.', + type: 'IdsSizeType', + default: IdsSize.COMPACT, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + action1Disabled: { + description: 'Whether the button is disabled or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + action1Text: { + description: 'Text of button', + type: 'string', + default: '-', + demoDefault: 'Action1 button', + }, + action1HasLeadingIcon: { + description: 'Whether the button has leading icon or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + action1HasTrailingIcon: { + description: 'Whether the button has trailing icon or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + showAction2Button: { + description: 'Whether display the button or not', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + action2Appearance: { + description: 'Button appearance.', + type: 'IdsButtonAppearanceType', + default: IdsButtonAppearance.OUTLINED, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsButtonAppearance), + }, + action2Size: { + description: 'Button size.', + type: 'IdsSizeType', + default: IdsSize.COMPACT, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + action2Disabled: { + description: 'Whether the button is disabled or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + action2Text: { + description: 'Text of button', + type: 'string', + default: '-', + demoDefault: 'Action2 button', + }, + action2HasLeadingIcon: { + description: 'Whether the button has leading icon or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + action2HasTrailingIcon: { + description: 'Whether the button has trailing icon or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + }; + + public loadIcons(): void { + this._iconService.loadIcons().pipe( + takeUntilDestroyed(this._destroyRef), + ).subscribe((list: string[]) => { + + this.inputControlConfig.update((currentConfig) => ({ + ...currentConfig, + icon: { ...currentConfig.icon, list: list }, + })); + + this.defaults = getDefaultFromDemoConfig(this.inputControlConfig()); + this.model = { ...this.defaults }; + + this.isLoaded.set(true); + }); + } + + public defaults = getDefaultFromDemoConfig(this.inputControlConfig()); + public helperDefaults = getDefaultFromDemoConfig(this.helperControlConfig); + + public model: NotificationInputControls = { ...this.defaults }; + public helperModel: NotificationHelperControls = { ...this.helperDefaults }; + + public onClick(buttonName: string): void { + console.info(`${buttonName} button clicked`); + } + + public reset(): void { + this.displayComponent.set(true); + this.defaults = getDefaultFromDemoConfig(this.inputControlConfig()); + this.model = { ...this.defaults }; + this.helperModel = { ...this.helperDefaults }; + } + + public delete(): void { + this.displayComponent.set(false); + } + + public onRestoreButtonClick(): void { + this.displayComponent.set(true); + } +} diff --git a/projects/demo/src/app/pages/overlay-panel/overlay-panel-demo.component.html b/projects/demo/src/app/pages/overlay-panel/overlay-panel-demo.component.html index 7e9eab6a..cf881f82 100644 --- a/projects/demo/src/app/pages/overlay-panel/overlay-panel-demo.component.html +++ b/projects/demo/src/app/pages/overlay-panel/overlay-panel-demo.component.html @@ -1,61 +1,85 @@ - - - - @for (_ of items; track $index) { - } - @if (menuItemHelperModel.hasTrailingIcon) { - - + + + +
- - - - + + + + + + + + +
+

Props

+ + - +
diff --git a/projects/demo/src/app/pages/overlay-panel/overlay-panel-demo.component.scss b/projects/demo/src/app/pages/overlay-panel/overlay-panel-demo.component.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/projects/demo/src/app/pages/overlay-panel/overlay-panel-demo.component.ts b/projects/demo/src/app/pages/overlay-panel/overlay-panel-demo.component.ts index 1116f808..0423491e 100644 --- a/projects/demo/src/app/pages/overlay-panel/overlay-panel-demo.component.ts +++ b/projects/demo/src/app/pages/overlay-panel/overlay-panel-demo.component.ts @@ -1,162 +1,35 @@ +import { OverlayPanelDemoService } from './overlay-panel-demo.service'; + import { ControlTableComponent } from '../../components/control-table/control-table.component'; +import { PropTableComponent } from '../../components/prop-table/prop-table.component'; +import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; +import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; -import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; -import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; -import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; import { IdsIconComponent } from '@i-cell/ids-angular/icon'; -import { IdsMenuItemComponent, IdsMenuItemAppearance, IdsMenuItemAppearanceType, IdsMenuItemVariant, IdsMenuItemVariantType, IDS_MENU_ITEM_DEFAULT_CONFIG_FACTORY } from '@i-cell/ids-angular/menu'; -import { IDS_OVERLAY_PANEL_DEFAULT_CONFIG_FACTORY } from '@i-cell/ids-angular/overlay-panel'; +import { IdsMenuItemComponent } from '@i-cell/ids-angular/menu'; import { IdsOverlayPanelComponent } from '@i-cell/ids-angular/overlay-panel/overlay-panel.component'; -import { IdsOverlayPanelAppearance, IdsOverlayPanelAppearanceType } from '@i-cell/ids-angular/overlay-panel/types/overlay-panel-appearance.type'; -import { IdsOverlayPanelVariant, IdsOverlayPanelVariantType } from '@i-cell/ids-angular/overlay-panel/types/overlay-panel-variant.type'; import { TranslateModule } from '@ngx-translate/core'; -const overlayPanelDefaultConfig = IDS_OVERLAY_PANEL_DEFAULT_CONFIG_FACTORY(); -const menuItemDefaultConfig = IDS_MENU_ITEM_DEFAULT_CONFIG_FACTORY(); - -type OverlayPanelInputControls = { - appearance: IdsOverlayPanelAppearanceType, - size: IdsSizeType, - variant: IdsOverlayPanelVariantType, -}; - -type OverlayPanelHelperControls = { - testBackgroundColor: 'none' | 'dark', -}; - -type MenuItemInputControls = { - appearance: IdsMenuItemAppearanceType, - size: IdsSizeType, - variant: IdsMenuItemVariantType, -}; - -type MenuItemHelperControls = { - hasLeadingIcon: boolean, - hasTrailingIcon: boolean, - hasDisabledItem: boolean, -}; - @Component({ selector: 'app-overlay-panel-demo', imports: [ TryoutComponent, - ControlTableComponent, IdsOverlayPanelComponent, IdsMenuItemComponent, IdsIconComponent, TranslateModule, FormsModule, + DemoAndCodeComponent, + ControlTableComponent, + TryoutControlComponent, + PropTableComponent, ], templateUrl: './overlay-panel-demo.component.html', - styleUrls: [ - '../demo-page.scss', - './overlay-panel-demo.component.scss', - ], + styleUrls: ['../demo-page.scss'], }) export class OverlayPanelDemoComponent { - protected _overlayPanelInputControlConfig: DemoControlConfig = { - appearance: { - description: 'Overlay panel appearance.', - type: 'IdsOverlayPanelAppearanceType', - default: overlayPanelDefaultConfig.appearance, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsOverlayPanelAppearance), - }, - size: { - description: 'Overlay panel size.', - type: 'IdsSizeType', - default: overlayPanelDefaultConfig.size, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - variant: { - description: 'Overlay panel variant.', - type: 'IdsOverlayPanelVariantType', - default: overlayPanelDefaultConfig.variant, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsOverlayPanelVariant), - }, - }; - - protected _overlayPanelHelperControlConfig: DemoControlConfig = { - testBackgroundColor: { - description: 'Text of button', - type: 'string', - default: 'none', - control: DemoControl.SELECT, - list: [ - 'none', - 'dark', - ], - }, - }; - - protected _menuItemInputControlConfig: DemoControlConfig = { - appearance: { - description: 'Menu item appearance.', - type: 'IdsMenuItemAppearanceType', - default: menuItemDefaultConfig.appearance, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsMenuItemAppearance), - }, - size: { - description: 'Menu item size.', - type: 'IdsSizeType', - default: menuItemDefaultConfig.size, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - variant: { - description: 'Menu item variant.', - type: 'IdsMenuItemVariantType', - default: menuItemDefaultConfig.variant, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsMenuItemVariant), - }, - }; - - protected _menuItemHelperControlConfig: DemoControlConfig = { - hasLeadingIcon: { - description: 'Whether the menu items have leading icon or not.', - type: 'boolean', - default: true, - control: DemoControl.CHECKBOX, - }, - hasTrailingIcon: { - description: 'Whether the menu items have trailing icon or not.', - type: 'boolean', - default: true, - control: DemoControl.CHECKBOX, - }, - hasDisabledItem: { - description: 'Whether one menu item is disabled or not. For testing purposes this is the first menu item.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - }; - - public overlayPanelDefaults = getDefaultFromDemoConfig(this._overlayPanelInputControlConfig); - public overlayPanelHelperDefaults = getDefaultFromDemoConfig(this._overlayPanelHelperControlConfig); - public menuItemDefaults = getDefaultFromDemoConfig(this._menuItemInputControlConfig); - public menuItemHelperDefaults = getDefaultFromDemoConfig(this._menuItemHelperControlConfig); - - public overlayPanelModel: OverlayPanelInputControls = { ...this.overlayPanelDefaults }; - public overlayPanelHelperModel: OverlayPanelHelperControls = { ...this.overlayPanelHelperDefaults }; - public menuItemModel: MenuItemInputControls = { ...this.menuItemDefaults }; - public menuItemHelperModel: MenuItemHelperControls = { ...this.menuItemHelperDefaults }; - - // eslint-disable-next-line no-magic-numbers - public items = Array(3); - - public reset(): void { - this.overlayPanelModel = { ...this.overlayPanelDefaults }; - this.overlayPanelHelperModel = { ...this.overlayPanelHelperDefaults }; - this.menuItemModel = { ...this.menuItemDefaults }; - this.menuItemHelperModel = { ...this.menuItemHelperDefaults }; - } + protected _overlayPanelDemoService = inject(OverlayPanelDemoService); } diff --git a/projects/demo/src/app/pages/overlay-panel/overlay-panel-demo.service.ts b/projects/demo/src/app/pages/overlay-panel/overlay-panel-demo.service.ts new file mode 100644 index 00000000..6b1fa813 --- /dev/null +++ b/projects/demo/src/app/pages/overlay-panel/overlay-panel-demo.service.ts @@ -0,0 +1,136 @@ +import { Injectable } from '@angular/core'; +import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; +import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; +import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; +import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; +import { IDS_MENU_ITEM_DEFAULT_CONFIG_FACTORY, IdsMenuItemAppearance, IdsMenuItemAppearanceType, IdsMenuItemVariant, IdsMenuItemVariantType } from '@i-cell/ids-angular/menu'; +import { IDS_OVERLAY_PANEL_DEFAULT_CONFIG_FACTORY, IdsOverlayPanelAppearance, IdsOverlayPanelAppearanceType, IdsOverlayPanelVariant, IdsOverlayPanelVariantType } from '@i-cell/ids-angular/overlay-panel'; + +const overlayPanelDefaultConfig = IDS_OVERLAY_PANEL_DEFAULT_CONFIG_FACTORY(); +const menuItemDefaultConfig = IDS_MENU_ITEM_DEFAULT_CONFIG_FACTORY(); +const numberOfItems = 3; + +type OverlayPanelInputControls = { + appearance: IdsOverlayPanelAppearanceType, + size: IdsSizeType, + variant: IdsOverlayPanelVariantType, +}; + +type OverlayPanelHelperControls = { + testBackgroundColor: 'none' | 'dark', +}; + +type MenuItemInputControls = { + appearance: IdsMenuItemAppearanceType, + size: IdsSizeType, + variant: IdsMenuItemVariantType, +}; + +type MenuItemHelperControls = { + hasLeadingIcon: boolean, + hasTrailingIcon: boolean, + hasDisabledItem: boolean, +}; +@Injectable() +export class OverlayPanelDemoService { + public readonly overlayPanelInputControlConfig: DemoControlConfig = { + appearance: { + description: 'Overlay panel appearance.', + type: 'IdsOverlayPanelAppearanceType', + default: overlayPanelDefaultConfig.appearance, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsOverlayPanelAppearance), + }, + size: { + description: 'Overlay panel size.', + type: 'IdsSizeType', + default: overlayPanelDefaultConfig.size, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + variant: { + description: 'Overlay panel variant.', + type: 'IdsOverlayPanelVariantType', + default: overlayPanelDefaultConfig.variant, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsOverlayPanelVariant), + }, + }; + + public readonly overlayPanelHelperControlConfig: DemoControlConfig = { + testBackgroundColor: { + description: 'Text of button', + type: 'string', + default: 'none', + control: DemoControl.SELECT, + list: [ + 'none', + 'dark', + ], + }, + }; + + public readonly menuItemInputControlConfig: DemoControlConfig = { + appearance: { + description: 'Menu item appearance.', + type: 'IdsMenuItemAppearanceType', + default: menuItemDefaultConfig.appearance, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsMenuItemAppearance), + }, + size: { + description: 'Menu item size.', + type: 'IdsSizeType', + default: menuItemDefaultConfig.size, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + variant: { + description: 'Menu item variant.', + type: 'IdsMenuItemVariantType', + default: menuItemDefaultConfig.variant, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsMenuItemVariant), + }, + }; + + public readonly menuItemHelperControlConfig: DemoControlConfig = { + hasLeadingIcon: { + description: 'Whether the menu items have leading icon or not.', + type: 'boolean', + default: true, + control: DemoControl.SWITCH, + }, + hasTrailingIcon: { + description: 'Whether the menu items have trailing icon or not.', + type: 'boolean', + default: true, + control: DemoControl.SWITCH, + }, + hasDisabledItem: { + description: 'Whether one menu item is disabled or not. For testing purposes this is the first menu item.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + }; + + public overlayPanelDefaults = getDefaultFromDemoConfig(this.overlayPanelInputControlConfig); + public overlayPanelHelperDefaults = getDefaultFromDemoConfig(this.overlayPanelHelperControlConfig); + public menuItemDefaults = getDefaultFromDemoConfig(this.menuItemInputControlConfig); + public menuItemHelperDefaults = getDefaultFromDemoConfig(this.menuItemHelperControlConfig); + + public overlayPanelModel: OverlayPanelInputControls = { ...this.overlayPanelDefaults }; + public overlayPanelHelperModel: OverlayPanelHelperControls = { ...this.overlayPanelHelperDefaults }; + public menuItemModel: MenuItemInputControls = { ...this.menuItemDefaults }; + public menuItemHelperModel: MenuItemHelperControls = { ...this.menuItemHelperDefaults }; + + public items = Array(numberOfItems); + + public reset(): void { + this.overlayPanelModel = { ...this.overlayPanelDefaults }; + this.overlayPanelHelperModel = { ...this.overlayPanelHelperDefaults }; + this.menuItemModel = { ...this.menuItemDefaults }; + this.menuItemHelperModel = { ...this.menuItemHelperDefaults }; + } +} diff --git a/projects/demo/src/app/pages/paginator/paginator-demo.component.html b/projects/demo/src/app/pages/paginator/paginator-demo.component.html index 2e22ad22..02444991 100644 --- a/projects/demo/src/app/pages/paginator/paginator-demo.component.html +++ b/projects/demo/src/app/pages/paginator/paginator-demo.component.html @@ -1,30 +1,47 @@ - - - - + +
+ + + + + +
- - +
+ + + +
+ +
+

Props

+ + +
diff --git a/projects/demo/src/app/pages/paginator/paginator-demo.component.scss b/projects/demo/src/app/pages/paginator/paginator-demo.component.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/projects/demo/src/app/pages/paginator/paginator-demo.component.ts b/projects/demo/src/app/pages/paginator/paginator-demo.component.ts index 338e4568..68afee73 100644 --- a/projects/demo/src/app/pages/paginator/paginator-demo.component.ts +++ b/projects/demo/src/app/pages/paginator/paginator-demo.component.ts @@ -1,178 +1,31 @@ +import { PaginatorDemoService } from './paginator-demo.service'; + import { ControlTableComponent } from '../../components/control-table/control-table.component'; +import { PropTableComponent } from '../../components/prop-table/prop-table.component'; +import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; +import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; -import { Component, OnInit } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; -import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; -import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; -import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; -import { IDS_PAGINATOR_DEFAULT_CONFIG_FACTORY, IdsPaginatorComponent, IdsPaginatorPageButtonAppearance, IdsPaginatorPageButtonAppearanceType, IdsPaginatorPageChangeEvent, IdsPaginatorVariant, IdsPaginatorVariantType } from '@i-cell/ids-angular/paginator'; +import { IdsPaginatorComponent } from '@i-cell/ids-angular/paginator'; import { TranslateModule } from '@ngx-translate/core'; -const defaultConfig = IDS_PAGINATOR_DEFAULT_CONFIG_FACTORY(); - -type PaginatorInputControls = { - length: number, - pageSize: number - pageSizeOptions: number[] - showFirstLastButton: boolean - showPrevNextLabel: boolean - showPageInfo: boolean - showPageButtons: boolean - showAllPages: boolean - maxDisplayedItemCount: number - size: IdsSizeType - variant: IdsPaginatorVariantType - pageButtonAppearance: IdsPaginatorPageButtonAppearanceType - debounceTime: number, - disabled: boolean, - compactLayout: boolean, -}; - @Component({ selector: 'app-paginator-demo', imports: [ TryoutComponent, - ControlTableComponent, IdsPaginatorComponent, TranslateModule, FormsModule, + DemoAndCodeComponent, + TryoutControlComponent, + ControlTableComponent, + PropTableComponent, ], templateUrl: './paginator-demo.component.html', - styleUrls: [ - '../demo-page.scss', - './paginator-demo.component.scss', - ], + styleUrls: ['../demo-page.scss'], }) -export class PaginatorDemoComponent implements OnInit { - protected _inputControlConfig: DemoControlConfig ={ - length: { - description: 'The total number of items to paginate.', - type: 'number', - default: 120, - control: DemoControl.NUMBER, - step: 1, - min: 0, - }, - pageSize: { - description: 'The number of items per page.', - type: 'number', - default: defaultConfig.pageSize, - control: DemoControl.SELECT, - list: [], - }, - pageSizeOptions: { - description: 'Array of available page size options.', - type: 'number[]', - default: defaultConfig.pageSizeOptions, - control: DemoControl.NUMBERARRAY, - }, - showFirstLastButton: { - description: 'Whether to show "First" and "Last" buttons in the paginator.', - type: 'boolean', - default: defaultConfig.showFirstLastButton, - control: DemoControl.CHECKBOX, - }, - showPrevNextLabel: { - description: 'Whether to display labels for "Previous" and "Next" buttons. Works only when compactLayout is true.', - type: 'boolean', - default: defaultConfig.showPrevNextLabel, - control: DemoControl.CHECKBOX, - }, - showPageInfo: { - description: 'Whether to display page information (e.g., "Page 1 of 10").', - type: 'boolean', - default: defaultConfig.showPageInfo, - control: DemoControl.CHECKBOX, - }, - showPageButtons: { - description: 'Whether to display individual page buttons.', - type: 'boolean', - default: defaultConfig.showPageButtons, - control: DemoControl.CHECKBOX, - }, - showAllPages: { - description: 'Whether to display all pages in the paginator.', - type: 'boolean', - default: defaultConfig.showAllPages, - control: DemoControl.CHECKBOX, - }, - maxDisplayedItemCount: { - description: 'The maximum number of items to display in the paginator.', - type: 'number', - default: defaultConfig.maxDisplayedItemCount, - control: DemoControl.NUMBER, - step: 2, - min: 5, - }, - size: { - description: 'The size of the paginator component', - type: 'IdsSizeType', - default: defaultConfig.size, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - variant: { - description: 'The variant/style of the paginator', - type: 'IdsIconButtonVariantType', - default: defaultConfig.variant, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsPaginatorVariant), - }, - pageButtonAppearance: { - description: 'The appearance of the paginator buttons', - type: 'IdsIconButtonAppearanceType', - default: defaultConfig.pageButtonAppearance, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsPaginatorPageButtonAppearance), - }, - debounceTime: { - description: 'The number of items per page.', - type: 'number', - default: defaultConfig.debounceTime, - control: DemoControl.NUMBER, - step: 1, - min: 0, - }, - disabled: { - description: 'Whether the paginator is disabled.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - compactLayout: { - description: 'Whether to use a compact layout for the paginator.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - }; - - public defaults = getDefaultFromDemoConfig(this._inputControlConfig); - - public model: PaginatorInputControls = { ...this.defaults }; - - public reset(): void { - this.model = { ...this.defaults }; - } - - public ngOnInit(): void { - this._updatePageSize(); - } - - public onPageChange(event: IdsPaginatorPageChangeEvent): void { - console.info(event); - } - - protected _updatePageSize(): void { - const pageSizeOptions = this.model.pageSizeOptions.map((opt) => opt.toString()); - this._inputControlConfig = { - ...this._inputControlConfig, - pageSize: { - ...this._inputControlConfig.pageSize, - list: pageSizeOptions, - }, - }; - } +export class PaginatorDemoComponent { + protected _paginatorDemoService = inject(PaginatorDemoService); } diff --git a/projects/demo/src/app/pages/paginator/paginator-demo.service.ts b/projects/demo/src/app/pages/paginator/paginator-demo.service.ts new file mode 100644 index 00000000..0c742e08 --- /dev/null +++ b/projects/demo/src/app/pages/paginator/paginator-demo.service.ts @@ -0,0 +1,159 @@ +import { Injectable } from '@angular/core'; +import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; +import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; +import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; +import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; +import { IDS_PAGINATOR_DEFAULT_CONFIG_FACTORY, IdsPaginatorPageButtonAppearance, IdsPaginatorPageButtonAppearanceType, IdsPaginatorPageChangeEvent, IdsPaginatorVariant, IdsPaginatorVariantType } from '@i-cell/ids-angular/paginator'; + +const defaultConfig = IDS_PAGINATOR_DEFAULT_CONFIG_FACTORY(); + +type PaginatorInputControls = { + length: number, + pageSize: number + pageSizeOptions: number[] + showFirstLastButton: boolean + showPrevNextLabel: boolean + showPageInfo: boolean + showPageButtons: boolean + showAllPages: boolean + maxDisplayedItemCount: number + size: IdsSizeType + variant: IdsPaginatorVariantType + pageButtonAppearance: IdsPaginatorPageButtonAppearanceType + debounceTime: number, + disabled: boolean, + compactLayout: boolean, +}; + +@Injectable() +export class PaginatorDemoService { + public inputControlConfig: DemoControlConfig ={ + length: { + description: 'The total number of items to paginate.', + type: 'number', + default: 120, + control: DemoControl.NUMBER, + step: 1, + min: 0, + }, + pageSize: { + description: 'The number of items per page.', + type: 'number', + default: defaultConfig.pageSize, + control: DemoControl.SELECT, + list: [], + }, + pageSizeOptions: { + description: 'Array of available page size options.', + type: 'number[]', + default: defaultConfig.pageSizeOptions, + control: DemoControl.NUMBERARRAY, + }, + showFirstLastButton: { + description: 'Whether to show "First" and "Last" buttons in the paginator.', + type: 'boolean', + default: defaultConfig.showFirstLastButton, + control: DemoControl.SWITCH, + }, + showPrevNextLabel: { + description: 'Whether to display labels for "Previous" and "Next" buttons. Works only when compactLayout is true.', + type: 'boolean', + default: defaultConfig.showPrevNextLabel, + control: DemoControl.SWITCH, + }, + showPageInfo: { + description: 'Whether to display page information (e.g., "Page 1 of 10").', + type: 'boolean', + default: defaultConfig.showPageInfo, + control: DemoControl.SWITCH, + }, + showPageButtons: { + description: 'Whether to display individual page buttons.', + type: 'boolean', + default: defaultConfig.showPageButtons, + control: DemoControl.SWITCH, + }, + showAllPages: { + description: 'Whether to display all pages in the paginator.', + type: 'boolean', + default: defaultConfig.showAllPages, + control: DemoControl.SWITCH, + }, + maxDisplayedItemCount: { + description: 'The maximum number of items to display in the paginator.', + type: 'number', + default: defaultConfig.maxDisplayedItemCount, + control: DemoControl.NUMBER, + step: 2, + min: 5, + }, + size: { + description: 'The size of the paginator component', + type: 'IdsSizeType', + default: defaultConfig.size, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + variant: { + description: 'The variant/style of the paginator', + type: 'IdsIconButtonVariantType', + default: defaultConfig.variant, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsPaginatorVariant), + }, + pageButtonAppearance: { + description: 'The appearance of the paginator buttons', + type: 'IdsIconButtonAppearanceType', + default: defaultConfig.pageButtonAppearance, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsPaginatorPageButtonAppearance), + }, + debounceTime: { + description: 'The number of items per page.', + type: 'number', + default: defaultConfig.debounceTime, + control: DemoControl.NUMBER, + step: 1, + min: 0, + }, + disabled: { + description: 'Whether the paginator is disabled.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + compactLayout: { + description: 'Whether to use a compact layout for the paginator.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + }; + + public defaults = getDefaultFromDemoConfig(this.inputControlConfig); + + public model: PaginatorInputControls = { ...this.defaults }; + + public reset(): void { + this.model = { ...this.defaults }; + } + + constructor() { + this.updatePageSize(); + } + + public onPageChange(event: IdsPaginatorPageChangeEvent): void { + console.info(event); + } + + public updatePageSize(): void { + const pageSizeOptions = this.model.pageSizeOptions.map((opt) => opt.toString()); + this.inputControlConfig = { + ...this.inputControlConfig, + pageSize: { + ...this.inputControlConfig.pageSize, + list: pageSizeOptions, + }, + }; + } +} diff --git a/projects/demo/src/app/pages/radio/radio-demo.component.html b/projects/demo/src/app/pages/radio/radio-demo.component.html index 44cea87f..fade6eab 100644 --- a/projects/demo/src/app/pages/radio/radio-demo.component.html +++ b/projects/demo/src/app/pages/radio/radio-demo.component.html @@ -1,47 +1,76 @@ - -
-
-

Simple group

- - Chicken - Beef - Pork - -
-
-

Wrapped in cards

- - - Chicken - - - Beef - - - Pork - - -
+ +
+ +
+
+

Simple group

+ + Chicken + Beef + Pork + +
+
+

Wrapped in cards

+ + + Chicken + + + Beef + + + Pork + + +
+
+
- - - +
+ + + + +
+ +
+

Props

+ + +
diff --git a/projects/demo/src/app/pages/radio/radio-demo.component.ts b/projects/demo/src/app/pages/radio/radio-demo.component.ts index 6b1ea395..a264067c 100644 --- a/projects/demo/src/app/pages/radio/radio-demo.component.ts +++ b/projects/demo/src/app/pages/radio/radio-demo.component.ts @@ -1,42 +1,30 @@ +import { RadioDemoService } from './radio-demo.service'; + import { ControlTableComponent } from '../../components/control-table/control-table.component'; +import { PropTableComponent } from '../../components/prop-table/prop-table.component'; +import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; +import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; -import { Component, ViewEncapsulation } from '@angular/core'; +import { Component, inject, ViewEncapsulation } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; -import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; -import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; import { IdsCardComponent } from '@i-cell/ids-angular/card'; -import { IdsPositionType, IdsSize, IdsSizeType, IdsOrientationType, IdsPosition, IdsOrientation } from '@i-cell/ids-angular/core'; -import { IDS_RADIO_DEFAULT_CONFIG_FACTORY, IdsRadioGroupDirective, IdsRadioComponent, IdsRadioVariant, IdsRadioVariantType } from '@i-cell/ids-angular/radio'; +import { IdsRadioGroupDirective, IdsRadioComponent } from '@i-cell/ids-angular/radio'; import { TranslateModule } from '@ngx-translate/core'; -const defaultConfig = IDS_RADIO_DEFAULT_CONFIG_FACTORY(); - -type RadioInputControls = { - name: string - required: boolean, - disabled: boolean, - size: IdsSizeType, - variant: IdsRadioVariantType, - orientation: IdsOrientationType, - labelPosition: IdsPositionType, -}; - -type RadioHelperControls = { - onlyOneItemIsDisabled: boolean, -}; - @Component({ selector: 'app-radio-demo', imports: [ TryoutComponent, - ControlTableComponent, IdsCardComponent, IdsRadioGroupDirective, IdsRadioComponent, FormsModule, TranslateModule, + DemoAndCodeComponent, + ControlTableComponent, + TryoutControlComponent, + PropTableComponent, ], templateUrl: './radio-demo.component.html', styleUrls: [ @@ -46,79 +34,5 @@ type RadioHelperControls = { encapsulation: ViewEncapsulation.None, }) export class RadioDemoComponent { - protected _inputControlConfig: DemoControlConfig = { - name: { - description: 'Name for radio items. Name is provided for group, but items get it.', - type: 'string', - default: '-', - demoDefault: 'numbers', - }, - required: { - description: 'Whether the radio is required or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - disabled: { - description: 'Whether the radio is disabled or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - size: { - description: 'Size of the radio.', - type: 'IdsSizeType', - default: defaultConfig.size, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - variant: { - description: 'Variant of the radio.', - type: 'IdsRadioVariantType', - default: defaultConfig.variant, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsRadioVariant), - }, - orientation: { - description: 'Orientation of the radio.', - type: 'IdsRadioVariantType', - default: defaultConfig.orientation, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsOrientation), - }, - labelPosition: { - description: 'Position of the radio\'s label.', - type: 'IdsPositionType', - default: defaultConfig.labelPosition, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsPosition), - }, - }; - - protected _helperControlConfig: DemoControlConfig = { - onlyOneItemIsDisabled: { - description: 'When true, the first item will be disabled. Just for testing purposes.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - }; - - public defaults = getDefaultFromDemoConfig(this._inputControlConfig); - public helperDefaults = getDefaultFromDemoConfig(this._helperControlConfig); - - public model: RadioInputControls = { ...this.defaults }; - public helperModel: RadioHelperControls = { ...this.helperDefaults }; - - public simpleValue = undefined; - public wrappedValue = undefined; - - public onClick(buttonName: string): void { - console.info(`${buttonName} button clicked`); - } - - public reset(): void { - this.model = { ...this.defaults }; - this.helperModel = { ...this.helperDefaults }; - } + protected _radioDemoService = inject(RadioDemoService); } diff --git a/projects/demo/src/app/pages/radio/radio-demo.service.ts b/projects/demo/src/app/pages/radio/radio-demo.service.ts new file mode 100644 index 00000000..bbf703c5 --- /dev/null +++ b/projects/demo/src/app/pages/radio/radio-demo.service.ts @@ -0,0 +1,100 @@ +import { Injectable } from '@angular/core'; +import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; +import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; +import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; +import { IdsOrientation, IdsOrientationType, IdsPosition, IdsPositionType, IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; +import { IDS_RADIO_DEFAULT_CONFIG_FACTORY, IdsRadioVariant, IdsRadioVariantType } from '@i-cell/ids-angular/radio'; + +const defaultConfig = IDS_RADIO_DEFAULT_CONFIG_FACTORY(); + +type RadioInputControls = { + name: string + required: boolean, + disabled: boolean, + size: IdsSizeType, + variant: IdsRadioVariantType, + orientation: IdsOrientationType, + labelPosition: IdsPositionType, +}; + +type RadioHelperControls = { + onlyOneItemIsDisabled: boolean, +}; +@Injectable() +export class RadioDemoService { + public inputControlConfig: DemoControlConfig = { + name: { + description: 'Name for radio items. Name is provided for group, but items get it.', + type: 'string', + default: '-', + demoDefault: 'numbers', + }, + required: { + description: 'Whether the radio is required or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + disabled: { + description: 'Whether the radio is disabled or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + size: { + description: 'Size of the radio.', + type: 'IdsSizeType', + default: defaultConfig.size, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + variant: { + description: 'Variant of the radio.', + type: 'IdsRadioVariantType', + default: defaultConfig.variant, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsRadioVariant), + }, + orientation: { + description: 'Orientation of the radio.', + type: 'IdsRadioVariantType', + default: defaultConfig.orientation, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsOrientation), + }, + labelPosition: { + description: 'Position of the radio\'s label.', + type: 'IdsPositionType', + default: defaultConfig.labelPosition, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsPosition), + }, + }; + + public helperControlConfig: DemoControlConfig = { + onlyOneItemIsDisabled: { + description: 'When true, the first item will be disabled. Just for testing purposes.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + }; + + public defaults = getDefaultFromDemoConfig(this.inputControlConfig); + public helperDefaults = getDefaultFromDemoConfig(this.helperControlConfig); + + public model: RadioInputControls = { ...this.defaults }; + public helperModel: RadioHelperControls = { ...this.helperDefaults }; + + public simpleValue = undefined; + public wrappedValue = undefined; + + public onClick(buttonName: string): void { + console.info(`${buttonName} button clicked`); + } + + public reset(): void { + this.model = { ...this.defaults }; + this.helperModel = { ...this.helperDefaults }; + } +} diff --git a/projects/demo/src/app/pages/scrollbar/scrollbar-demo.component.html b/projects/demo/src/app/pages/scrollbar/scrollbar-demo.component.html index ecfc139e..6abc40a4 100644 --- a/projects/demo/src/app/pages/scrollbar/scrollbar-demo.component.html +++ b/projects/demo/src/app/pages/scrollbar/scrollbar-demo.component.html @@ -1,41 +1,60 @@ - -
-
-

- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia possimus facere fuga voluptate alias ipsa quibusdam doloremque - minus laborum repellat, modi magnam. Dignissimos natus iusto nisi earum voluptatem laborum, molestiae odit amet accusamus magnam - incidunt voluptate obcaecati alias eveniet aliquam numquam aperiam asperiores consectetur commodi optio deserunt perspiciatis. -

- @if (!helperModel.childFitsInParent) { -

- Illum numquam quasi minima mollitia libero, nesciunt ipsam repellat sed facilis est aperiam dolor quos minus consequuntur, labore - sapiente, odit praesentium ad aliquid nam error porro excepturi accusantium? Enim dignissimos incidunt non autem earum culpa - ducimus velit eius ullam deleniti? Minus error aliquid corporis ullam! Perspiciatis et in repellat, ullam similique provident. - Praesentium nihil nam ea quod beatae quasi fugit ipsam itaque sapiente natus! Incidunt possimus omnis unde consequuntur illo - dolores saepe reprehenderit quo pariatur quae quas veniam id optio nobis accusantium, quis in dicta eum! Tempora omnis earum - veritatis, ea vero quasi? Voluptatem architecto nobis similique provident earum, eos blanditiis quas consectetur dolore, rem - magnam non nisi adipisci, quasi quam dolorum nam a nihil nostrum alias reprehenderit. A quia labore beatae. Numquam distinctio - nihil tempora ipsa sunt possimus commodi facilis, expedita laborum quo, accusamus labore modi reiciendis incidunt illum? Libero - rem sed exercitationem itaque perferendis explicabo alias. Neque reprehenderit velit totam! -

- } -
+ +
+ +
+
+

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia possimus facere fuga voluptate alias ipsa quibusdam + doloremque minus laborum repellat, modi magnam. Dignissimos natus iusto nisi earum voluptatem laborum, molestiae odit amet + accusamus magnam incidunt voluptate obcaecati alias eveniet aliquam numquam aperiam asperiores consectetur commodi optio + deserunt perspiciatis. +

+ @if (!_scrollbarDemoService.helperModel.childFitsInParent) { +

+ Illum numquam quasi minima mollitia libero, nesciunt ipsam repellat sed facilis est aperiam dolor quos minus consequuntur, + labore sapiente, odit praesentium ad aliquid nam error porro excepturi accusantium? Enim dignissimos incidunt non autem earum + culpa ducimus velit eius ullam deleniti? Minus error aliquid corporis ullam! Perspiciatis et in repellat, ullam similique + provident. Praesentium nihil nam ea quod beatae quasi fugit ipsam itaque sapiente natus! Incidunt possimus omnis unde + consequuntur illo dolores saepe reprehenderit quo pariatur quae quas veniam id optio nobis accusantium, quis in dicta eum! + Tempora omnis earum veritatis, ea vero quasi? Voluptatem architecto nobis similique provident earum, eos blanditiis quas + consectetur dolore, rem magnam non nisi adipisci, quasi quam dolorum nam a nihil nostrum alias reprehenderit. A quia labore + beatae. Numquam distinctio nihil tempora ipsa sunt possimus commodi facilis, expedita laborum quo, accusamus labore modi + reiciendis incidunt illum? Libero rem sed exercitationem itaque perferendis explicabo alias. Neque reprehenderit velit totam! +

+ } +
+
+
- - - +
+ + + + +
+ +
+

Props

+ + +
diff --git a/projects/demo/src/app/pages/scrollbar/scrollbar-demo.component.ts b/projects/demo/src/app/pages/scrollbar/scrollbar-demo.component.ts index 8d095fe7..6a27e7e5 100644 --- a/projects/demo/src/app/pages/scrollbar/scrollbar-demo.component.ts +++ b/projects/demo/src/app/pages/scrollbar/scrollbar-demo.component.ts @@ -1,85 +1,27 @@ +import { ScrollbarDemoService } from './scrollbar-demo.service'; + import { ControlTableComponent } from '../../components/control-table/control-table.component'; +import { PropTableComponent } from '../../components/prop-table/prop-table.component'; +import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; +import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; -import { Component } from '@angular/core'; -import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; -import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; +import { Component, inject } from '@angular/core'; import { TranslateModule } from '@ngx-translate/core'; -type ScrollbarWidthType = 'auto' | 'thin' | 'none'; -type ScrollbarGutterType = 'auto' | 'stable' | 'stable both-edges'; - -type ScrollbarInputControls = { - 'scrollbar-color': string - 'scrollbar-width': ScrollbarWidthType - 'scrollbar-gutter': ScrollbarGutterType -}; - -type ScrollbarHelperControls = { - 'childFitsInParent': boolean -}; - @Component({ selector: 'app-scrollbar-demo', imports: [ TryoutComponent, - ControlTableComponent, TranslateModule, + DemoAndCodeComponent, + ControlTableComponent, + TryoutControlComponent, + PropTableComponent, ], templateUrl: './scrollbar-demo.component.html', styleUrl: './scrollbar-demo.component.scss', }) export class ScrollbarDemoComponent { - protected _controlConfig: DemoControlConfig = { - 'scrollbar-color': { - description: 'Scrollbar color.', - type: ' ', - default: '-', - control: DemoControl.TEXT, - demoDefault: 'var(--ids-smc-colors-surface-darker-30) transparent', - disabled: true, - }, - 'scrollbar-width': { - description: 'Scrollbar width', - type: 'auto | thin | none', - default: 'auto', - control: DemoControl.SELECT, - list: [ - 'auto', - 'thin', - 'none', - ], - }, - 'scrollbar-gutter': { - description: 'Scrollbar gutter', - type: 'auto | stable | stable both-edges', - default: 'auto', - control: DemoControl.SELECT, - list: [ - 'auto', - 'stable', - 'stable both-edges', - ], - }, - }; - - protected _helperControlConfig: DemoControlConfig = { - childFitsInParent: { - description: 'Whether the content fits in scrollable div or not. This is for testing scrollbar gutter.', - type: 'auto | thin | none', - default: false, - control: DemoControl.CHECKBOX, - }, - }; - - public defaults = getDefaultFromDemoConfig(this._controlConfig); - public helperDefaults = getDefaultFromDemoConfig(this._helperControlConfig); - - public model: ScrollbarInputControls = { ...this.defaults }; - public helperModel: ScrollbarHelperControls = { ...this.helperDefaults }; - - public reset(): void { - this.model = { ...this.defaults }; - this.helperModel = { ...this.helperDefaults }; - } + protected _scrollbarDemoService = inject(ScrollbarDemoService); } diff --git a/projects/demo/src/app/pages/scrollbar/scrollbar-demo.service.ts b/projects/demo/src/app/pages/scrollbar/scrollbar-demo.service.ts new file mode 100644 index 00000000..6868061f --- /dev/null +++ b/projects/demo/src/app/pages/scrollbar/scrollbar-demo.service.ts @@ -0,0 +1,71 @@ +import { Injectable } from '@angular/core'; +import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; +import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; + +type ScrollbarWidthType = 'auto' | 'thin' | 'none'; +type ScrollbarGutterType = 'auto' | 'stable' | 'stable both-edges'; + +type ScrollbarInputControls = { + 'scrollbar-color': string + 'scrollbar-width': ScrollbarWidthType + 'scrollbar-gutter': ScrollbarGutterType +}; + +type ScrollbarHelperControls = { + 'childFitsInParent': boolean +}; +@Injectable() +export class ScrollbarDemoService { + public readonly controlConfig: DemoControlConfig = { + 'scrollbar-color': { + description: 'Scrollbar color.', + type: ' ', + default: '-', + control: DemoControl.TEXT, + demoDefault: 'var(--ids-smc-colors-surface-darker-30) transparent', + disabled: true, + }, + 'scrollbar-width': { + description: 'Scrollbar width', + type: 'auto | thin | none', + default: 'auto', + control: DemoControl.SELECT, + list: [ + 'auto', + 'thin', + 'none', + ], + }, + 'scrollbar-gutter': { + description: 'Scrollbar gutter', + type: 'auto | stable | stable both-edges', + default: 'auto', + control: DemoControl.SELECT, + list: [ + 'auto', + 'stable', + 'stable both-edges', + ], + }, + }; + + public readonly helperControlConfig: DemoControlConfig = { + childFitsInParent: { + description: 'Whether the content fits in scrollable div or not. This is for testing scrollbar gutter.', + type: 'auto | thin | none', + default: false, + control: DemoControl.SWITCH, + }, + }; + + public defaults = getDefaultFromDemoConfig(this.controlConfig); + public helperDefaults = getDefaultFromDemoConfig(this.helperControlConfig); + + public model: ScrollbarInputControls = { ...this.defaults }; + public helperModel: ScrollbarHelperControls = { ...this.helperDefaults }; + + public reset(): void { + this.model = { ...this.defaults }; + this.helperModel = { ...this.helperDefaults }; + } +} diff --git a/projects/demo/src/app/pages/segmented-control-toggle/segmented-control-toggle-demo.component.html b/projects/demo/src/app/pages/segmented-control-toggle/segmented-control-toggle-demo.component.html index c7f86f15..9d0aba0a 100644 --- a/projects/demo/src/app/pages/segmented-control-toggle/segmented-control-toggle-demo.component.html +++ b/projects/demo/src/app/pages/segmented-control-toggle/segmented-control-toggle-demo.component.html @@ -1,48 +1,79 @@ - - - +
+ - - @if (helperModel.itemHasIcon) { - - } - @if (helperModel.itemHasSuffix) { - $ - } - - - @if (helperModel.itemHasIcon) { - - } - @if (helperModel.itemHasSuffix) { - $ - } - - - @if (helperModel.itemHasIcon) { - - } - @if (helperModel.itemHasSuffix) { - $ - } - - - + + + + @if (_segmentedControlToggleDemoService.helperModel.itemHasIcon) { + + } + @if (_segmentedControlToggleDemoService.helperModel.itemHasSuffix) { + $ + } + + + @if (_segmentedControlToggleDemoService.helperModel.itemHasIcon) { + + } + @if (_segmentedControlToggleDemoService.helperModel.itemHasSuffix) { + $ + } + + + @if (_segmentedControlToggleDemoService.helperModel.itemHasIcon) { + + } + @if (_segmentedControlToggleDemoService.helperModel.itemHasSuffix) { + $ + } + + + + +
- - - +
+ + + + +
+ +
+

Props

+ + +
diff --git a/projects/demo/src/app/pages/segmented-control-toggle/segmented-control-toggle-demo.component.scss b/projects/demo/src/app/pages/segmented-control-toggle/segmented-control-toggle-demo.component.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/projects/demo/src/app/pages/segmented-control-toggle/segmented-control-toggle-demo.component.ts b/projects/demo/src/app/pages/segmented-control-toggle/segmented-control-toggle-demo.component.ts index 9ded1db7..0b147b70 100644 --- a/projects/demo/src/app/pages/segmented-control-toggle/segmented-control-toggle-demo.component.ts +++ b/projects/demo/src/app/pages/segmented-control-toggle/segmented-control-toggle-demo.component.ts @@ -1,126 +1,34 @@ +import { SegmentedControlToggleDemoService } from './segmented-control-toggle-demo.service'; + import { ControlTableComponent } from '../../components/control-table/control-table.component'; +import { PropTableComponent } from '../../components/prop-table/prop-table.component'; +import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; +import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; -import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; -import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; -import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; import { IdsIconComponent } from '@i-cell/ids-angular/icon'; -import { IDS_SEGMENTED_CONTROL_TOGGLE_DEFAULT_CONFIG_FACTORY, IdsSegmentedControlToggleAppearance, IdsSegmentedControlToggleAppearanceType, IdsSegmentedControlToggleButtonVariant, IdsSegmentedControlToggleButtonVariantType, IdsSegmentedControlToggleDirective, IdsSegmentedControlToggleItemComponent, IdsSegmentedControlToggleVariant, IdsSegmentedControlToggleVariantType } from '@i-cell/ids-angular/segmented-control-toggle'; +import { IdsSegmentedControlToggleDirective, IdsSegmentedControlToggleItemComponent } from '@i-cell/ids-angular/segmented-control-toggle'; import { TranslateModule } from '@ngx-translate/core'; -const defaultConfig = IDS_SEGMENTED_CONTROL_TOGGLE_DEFAULT_CONFIG_FACTORY(); - -type SegmentedControlToggleInputControls = { - size: IdsSizeType, - variant: IdsSegmentedControlToggleVariantType, - buttonVariant: IdsSegmentedControlToggleButtonVariantType, - appearance: IdsSegmentedControlToggleAppearanceType, - disabled: boolean, -}; - -type SegmentedControlToggleHelperControls = { - itemHasLabel: boolean, - itemHasIcon: boolean, - itemHasSuffix: boolean, - onlyOneItemIsDisabled: boolean, -}; - @Component({ selector: 'app-segmented-control-demo', imports: [ TryoutComponent, - ControlTableComponent, IdsSegmentedControlToggleDirective, IdsSegmentedControlToggleItemComponent, IdsIconComponent, FormsModule, TranslateModule, + DemoAndCodeComponent, + TryoutControlComponent, + ControlTableComponent, + PropTableComponent, ], templateUrl: './segmented-control-toggle-demo.component.html', - styleUrls: [ - '../demo-page.scss', - './segmented-control-toggle-demo.component.scss', - ], + styleUrls: ['../demo-page.scss'], }) export class SegmentedControlToggleDemoComponent { - protected _inputControlConfig: DemoControlConfig = { - size: { - description: 'Size of the segmented control toggle.', - type: 'IdsSizeType', - default: defaultConfig.size, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - variant: { - description: 'Variant of the segmented control toggle.', - type: 'IdsSegmentedControlToggleVariantType', - default: defaultConfig.variant, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSegmentedControlToggleVariant), - }, - buttonVariant: { - description: 'Variant of the segmented control toggle buttons.', - type: 'IdsSegmentedControlToggleButtonVariantType', - default: defaultConfig.buttonVariant, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSegmentedControlToggleButtonVariant), - }, - appearance: { - description: 'Appearance of the segmented control toggle.', - type: 'IdsSegmentedControlToggleAppearanceType', - default: defaultConfig.appearance, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSegmentedControlToggleAppearance), - }, - disabled: { - description: 'Whether the segmented control toggle is disabled or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - }; - - protected _helperControlConfig: DemoControlConfig = { - itemHasLabel: { - description: 'When true, items have labels.', - type: 'boolean', - default: true, - control: DemoControl.CHECKBOX, - }, - itemHasIcon: { - description: 'When true, items have icon.', - type: 'boolean', - default: true, - control: DemoControl.CHECKBOX, - }, - itemHasSuffix: { - description: 'When true, items have suffix.', - type: 'boolean', - default: true, - control: DemoControl.CHECKBOX, - }, - onlyOneItemIsDisabled: { - description: 'When true, the first item will be disabled. Just for testing purposes.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - }; - - public defaults = getDefaultFromDemoConfig(this._inputControlConfig); - public helperDefaults = getDefaultFromDemoConfig(this._helperControlConfig); - - public model: SegmentedControlToggleInputControls = { ...this.defaults }; - public helperModel: SegmentedControlToggleHelperControls = { ...this.helperDefaults }; - - public value = undefined; - - public reset(): void { - this.value = undefined; - this.model = { ...this.defaults }; - this.helperModel = { ...this.helperDefaults }; - } + protected _segmentedControlToggleDemoService = inject(SegmentedControlToggleDemoService); } diff --git a/projects/demo/src/app/pages/segmented-control-toggle/segmented-control-toggle-demo.service.ts b/projects/demo/src/app/pages/segmented-control-toggle/segmented-control-toggle-demo.service.ts new file mode 100644 index 00000000..ff820889 --- /dev/null +++ b/projects/demo/src/app/pages/segmented-control-toggle/segmented-control-toggle-demo.service.ts @@ -0,0 +1,104 @@ +import { Injectable } from '@angular/core'; +import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; +import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; +import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; +import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; +import { IDS_SEGMENTED_CONTROL_TOGGLE_DEFAULT_CONFIG_FACTORY, IdsSegmentedControlToggleAppearance, IdsSegmentedControlToggleAppearanceType, IdsSegmentedControlToggleButtonVariant, IdsSegmentedControlToggleButtonVariantType, IdsSegmentedControlToggleVariant, IdsSegmentedControlToggleVariantType } from '@i-cell/ids-angular/segmented-control-toggle'; + +const defaultConfig = IDS_SEGMENTED_CONTROL_TOGGLE_DEFAULT_CONFIG_FACTORY(); + +type SegmentedControlToggleInputControls = { + size: IdsSizeType, + variant: IdsSegmentedControlToggleVariantType, + buttonVariant: IdsSegmentedControlToggleButtonVariantType, + appearance: IdsSegmentedControlToggleAppearanceType, + disabled: boolean, +}; + +type SegmentedControlToggleHelperControls = { + itemHasLabel: boolean, + itemHasIcon: boolean, + itemHasSuffix: boolean, + onlyOneItemIsDisabled: boolean, +}; + +@Injectable() +export class SegmentedControlToggleDemoService { + public readonly inputControlConfig: DemoControlConfig = { + size: { + description: 'Size of the segmented control toggle.', + type: 'IdsSizeType', + default: defaultConfig.size, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + variant: { + description: 'Variant of the segmented control toggle.', + type: 'IdsSegmentedControlToggleVariantType', + default: defaultConfig.variant, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSegmentedControlToggleVariant), + }, + buttonVariant: { + description: 'Variant of the segmented control toggle buttons.', + type: 'IdsSegmentedControlToggleButtonVariantType', + default: defaultConfig.buttonVariant, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSegmentedControlToggleButtonVariant), + }, + appearance: { + description: 'Appearance of the segmented control toggle.', + type: 'IdsSegmentedControlToggleAppearanceType', + default: defaultConfig.appearance, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSegmentedControlToggleAppearance), + }, + disabled: { + description: 'Whether the segmented control toggle is disabled or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + }; + + public readonly helperControlConfig: DemoControlConfig = { + itemHasLabel: { + description: 'When true, items have labels.', + type: 'boolean', + default: true, + control: DemoControl.SWITCH, + }, + itemHasIcon: { + description: 'When true, items have icon.', + type: 'boolean', + default: true, + control: DemoControl.SWITCH, + }, + itemHasSuffix: { + description: 'When true, items have suffix.', + type: 'boolean', + default: true, + control: DemoControl.SWITCH, + }, + onlyOneItemIsDisabled: { + description: 'When true, the first item will be disabled. Just for testing purposes.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + }; + + public defaults = getDefaultFromDemoConfig(this.inputControlConfig); + public helperDefaults = getDefaultFromDemoConfig(this.helperControlConfig); + + public model: SegmentedControlToggleInputControls = { ...this.defaults }; + public helperModel: SegmentedControlToggleHelperControls = { ...this.helperDefaults }; + + public value = undefined; + + public reset(): void { + this.value = undefined; + this.model = { ...this.defaults }; + this.helperModel = { ...this.helperDefaults }; + } +} diff --git a/projects/demo/src/app/pages/segmented-control/segmented-control-demo.component.html b/projects/demo/src/app/pages/segmented-control/segmented-control-demo.component.html index b936c95e..cc78a1f0 100644 --- a/projects/demo/src/app/pages/segmented-control/segmented-control-demo.component.html +++ b/projects/demo/src/app/pages/segmented-control/segmented-control-demo.component.html @@ -1,88 +1,129 @@ - - -
-
-

Single selection

- - - @if (helperModel.itemHasIcon) { - - } - @if (helperModel.itemHasSuffix) { - $ - } - - - @if (helperModel.itemHasIcon) { - - } - @if (helperModel.itemHasSuffix) { - $ - } - - - @if (helperModel.itemHasIcon) { - - } - @if (helperModel.itemHasSuffix) { - $ - } - - -
-
-

Multi selection

- - - @if (helperModel.itemHasIcon) { - - } - @if (helperModel.itemHasSuffix) { - $ - } - - - @if (helperModel.itemHasIcon) { - - } - @if (helperModel.itemHasSuffix) { - $ - } - - - @if (helperModel.itemHasIcon) { - - } - @if (helperModel.itemHasSuffix) { - $ - } - - -
-
- + +
+ + +
+
+

Single selection

+ + + @if (_segmentedControlDemoService.helperModel.itemHasIcon) { + + } + @if (_segmentedControlDemoService.helperModel.itemHasSuffix) { + $ + } + + + @if (_segmentedControlDemoService.helperModel.itemHasIcon) { + + } + @if (_segmentedControlDemoService.helperModel.itemHasSuffix) { + $ + } + + + @if (_segmentedControlDemoService.helperModel.itemHasIcon) { + + } + @if (_segmentedControlDemoService.helperModel.itemHasSuffix) { + $ + } + + +
+
+

Multi selection

+ + + @if (_segmentedControlDemoService.helperModel.itemHasIcon) { + + } + @if (_segmentedControlDemoService.helperModel.itemHasSuffix) { + $ + } + + + @if (_segmentedControlDemoService.helperModel.itemHasIcon) { + + } + @if (_segmentedControlDemoService.helperModel.itemHasSuffix) { + $ + } + + + @if (_segmentedControlDemoService.helperModel.itemHasIcon) { + + } + @if (_segmentedControlDemoService.helperModel.itemHasSuffix) { + $ + } + + +
+
+ + +
- - - +
+ + + + +
+ +
+

Props

+ + +
diff --git a/projects/demo/src/app/pages/segmented-control/segmented-control-demo.component.ts b/projects/demo/src/app/pages/segmented-control/segmented-control-demo.component.ts index 3d38fe78..b62122f2 100644 --- a/projects/demo/src/app/pages/segmented-control/segmented-control-demo.component.ts +++ b/projects/demo/src/app/pages/segmented-control/segmented-control-demo.component.ts @@ -1,43 +1,31 @@ +import { SegmentedControlDemoService } from './segmented-control-demo.service'; + import { ControlTableComponent } from '../../components/control-table/control-table.component'; +import { PropTableComponent } from '../../components/prop-table/prop-table.component'; +import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; +import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; -import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; -import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; -import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; import { IdsIconComponent } from '@i-cell/ids-angular/icon'; -import { IDS_SEGMENTED_CONTROL_DEFAULT_CONFIG_FACTORY, IdsSegmentedControlAppearance, IdsSegmentedControlAppearanceType, IdsSegmentedControlDirective, IdsSegmentedControlItemComponent, IdsSegmentedControlVariant, IdsSegmentedControlVariantType } from '@i-cell/ids-angular/segmented-control'; +import { IdsSegmentedControlDirective, IdsSegmentedControlItemComponent } from '@i-cell/ids-angular/segmented-control'; import { TranslateModule } from '@ngx-translate/core'; -const defaultConfig = IDS_SEGMENTED_CONTROL_DEFAULT_CONFIG_FACTORY(); - -type SegmentedControlInputControls = { - size: IdsSizeType, - variant: IdsSegmentedControlVariantType, - appearance: IdsSegmentedControlAppearanceType, - disabled: boolean, -}; - -type SegmentedControlHelperControls = { - itemHasLabel: boolean, - itemHasIcon: boolean, - itemHasSuffix: boolean, - onlyOneItemIsDisabled: boolean, -}; - @Component({ selector: 'app-segmented-control-demo', imports: [ TryoutComponent, - ControlTableComponent, IdsSegmentedControlDirective, IdsSegmentedControlItemComponent, IdsIconComponent, FormsModule, ReactiveFormsModule, TranslateModule, + DemoAndCodeComponent, + TryoutControlComponent, + ControlTableComponent, + PropTableComponent, ], templateUrl: './segmented-control-demo.component.html', styleUrls: [ @@ -46,76 +34,5 @@ type SegmentedControlHelperControls = { ], }) export class SegmentedControlDemoComponent { - protected _inputControlConfig: DemoControlConfig = { - size: { - description: 'Size of the segmented control.', - type: 'IdsSizeType', - default: defaultConfig.size, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - variant: { - description: 'Variant of the segmented control.', - type: 'IdsSegmentedControlVariantType', - default: defaultConfig.variant, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSegmentedControlVariant), - }, - appearance: { - description: 'Appearance of the segmented control.', - type: 'IdsSegmentedControlAppearanceType', - default: defaultConfig.appearance, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSegmentedControlAppearance), - }, - disabled: { - description: 'Whether the segmented control is disabled or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - }; - - protected _helperControlConfig: DemoControlConfig = { - itemHasLabel: { - description: 'When true, items have labels.', - type: 'boolean', - default: true, - control: DemoControl.CHECKBOX, - }, - itemHasIcon: { - description: 'When true, items have icon.', - type: 'boolean', - default: true, - control: DemoControl.CHECKBOX, - }, - itemHasSuffix: { - description: 'When true, items have suffix.', - type: 'boolean', - default: true, - control: DemoControl.CHECKBOX, - }, - onlyOneItemIsDisabled: { - description: 'When true, the first item will be disabled. Just for testing purposes.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - }; - - public defaults = getDefaultFromDemoConfig(this._inputControlConfig); - public helperDefaults = getDefaultFromDemoConfig(this._helperControlConfig); - - public model: SegmentedControlInputControls = { ...this.defaults }; - public helperModel: SegmentedControlHelperControls = { ...this.helperDefaults }; - - public singleSelectionValue = undefined; - public multiSelectionValue = []; - - public reset(): void { - this.singleSelectionValue = undefined; - this.multiSelectionValue = []; - this.model = { ...this.defaults }; - this.helperModel = { ...this.helperDefaults }; - } + protected _segmentedControlDemoService = inject(SegmentedControlDemoService); } diff --git a/projects/demo/src/app/pages/segmented-control/segmented-control-demo.service.ts b/projects/demo/src/app/pages/segmented-control/segmented-control-demo.service.ts new file mode 100644 index 00000000..c3314a61 --- /dev/null +++ b/projects/demo/src/app/pages/segmented-control/segmented-control-demo.service.ts @@ -0,0 +1,98 @@ +import { Injectable } from '@angular/core'; +import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; +import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; +import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; +import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; +import { IDS_SEGMENTED_CONTROL_DEFAULT_CONFIG_FACTORY, IdsSegmentedControlAppearance, IdsSegmentedControlAppearanceType, IdsSegmentedControlVariant, IdsSegmentedControlVariantType } from '@i-cell/ids-angular/segmented-control'; + +const defaultConfig = IDS_SEGMENTED_CONTROL_DEFAULT_CONFIG_FACTORY(); + +type SegmentedControlInputControls = { + size: IdsSizeType, + variant: IdsSegmentedControlVariantType, + appearance: IdsSegmentedControlAppearanceType, + disabled: boolean, +}; + +type SegmentedControlHelperControls = { + itemHasLabel: boolean, + itemHasIcon: boolean, + itemHasSuffix: boolean, + onlyOneItemIsDisabled: boolean, +}; + +@Injectable() +export class SegmentedControlDemoService { + public inputControlConfig: DemoControlConfig = { + size: { + description: 'Size of the segmented control.', + type: 'IdsSizeType', + default: defaultConfig.size, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + variant: { + description: 'Variant of the segmented control.', + type: 'IdsSegmentedControlVariantType', + default: defaultConfig.variant, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSegmentedControlVariant), + }, + appearance: { + description: 'Appearance of the segmented control.', + type: 'IdsSegmentedControlAppearanceType', + default: defaultConfig.appearance, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSegmentedControlAppearance), + }, + disabled: { + description: 'Whether the segmented control is disabled or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + }; + + public helperControlConfig: DemoControlConfig = { + itemHasLabel: { + description: 'When true, items have labels.', + type: 'boolean', + default: true, + control: DemoControl.SWITCH, + }, + itemHasIcon: { + description: 'When true, items have icon.', + type: 'boolean', + default: true, + control: DemoControl.SWITCH, + }, + itemHasSuffix: { + description: 'When true, items have suffix.', + type: 'boolean', + default: true, + control: DemoControl.SWITCH, + }, + onlyOneItemIsDisabled: { + description: 'When true, the first item will be disabled. Just for testing purposes.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + }; + + public defaults = getDefaultFromDemoConfig(this.inputControlConfig); + public helperDefaults = getDefaultFromDemoConfig(this.helperControlConfig); + + public model: SegmentedControlInputControls = { ...this.defaults }; + public helperModel: SegmentedControlHelperControls = { ...this.helperDefaults }; + + public singleSelectionValue = undefined; + public multiSelectionValue = []; + + public reset(): void { + this.singleSelectionValue = undefined; + this.multiSelectionValue = []; + this.model = { ...this.defaults }; + this.helperModel = { ...this.helperDefaults }; + } +} diff --git a/projects/demo/src/app/pages/select/select-demo.component.html b/projects/demo/src/app/pages/select/select-demo.component.html index 3437288a..5d87738a 100644 --- a/projects/demo/src/app/pages/select/select-demo.component.html +++ b/projects/demo/src/app/pages/select/select-demo.component.html @@ -1,106 +1,124 @@ - - -
-
-

Single selection

- - Animal - - @for (group of animals | keyvalue; track $index) { - - @for (option of group.value; track $index) { - {{ option.viewValue }} + +
+ + +
+
+

Single selection

+ + Animal + + @for (group of _selectDemoService.animals | keyvalue; track $index) { + + @for (option of group.value; track $index) { + {{ option.viewValue }} + } + } - - } - - Choose an animal - - Animal is mandatory - - Animal field is valid - -
+ + Choose an animal + + Animal is mandatory + + Animal field is valid + +
-
-

Multi selection

- - Animal - - @if (selectHelperModel.useCustomTrigger) { - - {{ multiSelectionValue![0] }} - @if ((multiSelectionValue.length || 0) > 1) { - - (+{{ (multiSelectionValue.length || 0) - 1 }} {{ multiSelectionValue.length === 2 ? "other" : "others" }}) - +
+

Multi selection

+ + Animal + + @if (_selectDemoService.selectHelperModel.useCustomTrigger) { + + {{ _selectDemoService.multiSelectionValue![0] }} + @if ((_selectDemoService.multiSelectionValue.length || 0) > 1) { + + (+{{ (_selectDemoService.multiSelectionValue.length || 0) - 1 }} + {{ _selectDemoService.multiSelectionValue.length === 2 ? "other" : "others" }}) + + } + } - - } - - @for (option of animals.land; track $index) { - {{ option.viewValue }} - } - - - @for (option of animals.aquatic; track $index) { - {{ option.viewValue }} - } - - - Choose animals - - Animal is mandatory - - Animal field is valid - -
-
- + + @for (option of _selectDemoService.animals.land; track $index) { + {{ option.viewValue }} + } + + + @for (option of _selectDemoService.animals.aquatic; track $index) { + {{ option.viewValue }} + } + + + Choose animals + + Animal is mandatory + + Animal field is valid + +
+
+ + +
- - - - +
+ + + + + +
+ +
+

Props

+ + +
diff --git a/projects/demo/src/app/pages/select/select-demo.component.ts b/projects/demo/src/app/pages/select/select-demo.component.ts index edb1c545..fdc974c7 100644 --- a/projects/demo/src/app/pages/select/select-demo.component.ts +++ b/projects/demo/src/app/pages/select/select-demo.component.ts @@ -1,56 +1,22 @@ +import { SelectDemoService } from './select-demo.service'; + import { ControlTableComponent } from '../../components/control-table/control-table.component'; +import { PropTableComponent } from '../../components/prop-table/prop-table.component'; +import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; +import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; import { KeyValuePipe, TitleCasePipe } from '@angular/common'; -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; -import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; -import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; -import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; -import { IdsFormFieldVariant, IdsFormFieldVariantType, IDS_FORM_FIELD_DEFAULT_CONFIG_FACTORY, IdsErrorMessageComponent, IdsFormFieldComponent, IdsHintMessageComponent, IdsLabelDirective, IdsOptionComponent, IdsOptionGroupComponent, IdsErrorDefinitionDirective, IdsSuccessMessageComponent } from '@i-cell/ids-angular/forms'; -import { IDS_SELECT_DEFAULT_CONFIG_FACTORY, IdsSelectComponent, IdsSelectTriggerDirective } from '@i-cell/ids-angular/select'; +import { IdsErrorMessageComponent, IdsFormFieldComponent, IdsHintMessageComponent, IdsLabelDirective, IdsOptionComponent, IdsOptionGroupComponent, IdsErrorDefinitionDirective, IdsSuccessMessageComponent } from '@i-cell/ids-angular/forms'; +import { IdsSelectComponent, IdsSelectTriggerDirective } from '@i-cell/ids-angular/select'; import { TranslateModule } from '@ngx-translate/core'; -const formFieldDefaultConfig = IDS_FORM_FIELD_DEFAULT_CONFIG_FACTORY(); - -const selectDefaultConfig = IDS_SELECT_DEFAULT_CONFIG_FACTORY(); - -type FormFieldInputControls = { - size: IdsSizeType, - variant: IdsFormFieldVariantType, -}; - -type SelectInputControls = { - placeholder: string, - required: boolean, - disabled: boolean, - readonly: boolean, - 'aria-label': string, - 'aria-labelledby': string, - typeaheadDebounceInterval: number, - canHandleSuccessState: boolean, -}; - -type SelectHelperControls = { - useCustomTrigger: boolean, -}; - -type SampleOption = { - value: string - viewValue: string -}; - -type AnimalOptions = { - land: SampleOption[] - aquatic: SampleOption[] -}; - @Component({ selector: 'app-select-demo', imports: [ TryoutComponent, - ControlTableComponent, IdsFormFieldComponent, IdsLabelDirective, IdsSelectComponent, @@ -65,6 +31,10 @@ type AnimalOptions = { IdsSelectTriggerDirective, KeyValuePipe, TitleCasePipe, + DemoAndCodeComponent, + TryoutControlComponent, + ControlTableComponent, + PropTableComponent, ], templateUrl: './select-demo.component.html', styleUrls: [ @@ -73,127 +43,5 @@ type AnimalOptions = { ], }) export class SelectDemoComponent { - protected _formFieldInputControlConfig: DemoControlConfig = { - size: { - description: 'Form field size.', - type: 'IdsSizeType', - default: formFieldDefaultConfig.size, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - variant: { - description: 'Form field variant.', - type: 'IdsFormFieldVariantType', - default: formFieldDefaultConfig.variant, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsFormFieldVariant), - }, - }; - - protected _selectInputControlConfig: DemoControlConfig = { - placeholder: { - description: 'Select placeholder.', - type: 'string', - default: '-', - demoDefault: 'Select animal', - }, - required: { - description: 'Whether the select is required or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - disabled: { - description: 'Whether the select is disabled or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - readonly: { - description: 'Whether the select is readonly or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - 'aria-label': { - description: 'aria-label tag for the select.', - type: 'string', - default: '-', - demoDefault: 'animal', - }, - 'aria-labelledby': { - description: 'aria-labelledby tag for select.', - type: 'string', - default: '-', - demoDefault: 'animal', - }, - typeaheadDebounceInterval: { - description: 'Number in millisec. Can not overwrite at runtime.', - type: 'number', - default: selectDefaultConfig.typeaheadDebounceInterval, - min: 0, - step: 100, - disabled: true, - }, - canHandleSuccessState: { - description: 'Whether the select can handle success state with a success state matcher.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - }; - - protected _selectHelperControlConfig: DemoControlConfig = { - useCustomTrigger: { - description: 'Whether the select has a custom trigger or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - }; - - public formFieldDefaults = getDefaultFromDemoConfig(this._formFieldInputControlConfig); - public selectDefaults = getDefaultFromDemoConfig(this._selectInputControlConfig); - public selectHelperDefaults = getDefaultFromDemoConfig(this._selectHelperControlConfig); - - public formFieldModel: FormFieldInputControls = { ...this.formFieldDefaults }; - public selectModel: SelectInputControls = { ...this.selectDefaults }; - public selectHelperModel: SelectHelperControls = { ...this.selectHelperDefaults }; - - public animals: AnimalOptions = { - land: [ - { viewValue: 'Dog', value: 'dog' }, - { viewValue: 'Cat', value: 'cat' }, - { viewValue: 'Giraffe', value: 'giraffe' }, - { viewValue: 'Orangutan', value: 'orangutan' }, - { viewValue: 'Mammoth', value: 'mammoth' }, - { viewValue: 'Opisthocoelicaudia Skarzynski', value: 'opisthocoelicaudia skarzynski' }, - ], - aquatic: [ - { viewValue: 'Crocodile', value: 'crocodile' }, - { viewValue: 'Whale', value: 'whale' }, - { viewValue: 'Dolphin', value: 'doplhin' }, - { viewValue: 'Shark', value: 'shark' }, - ], - }; - - public singleSelectionValue: string | null = null; - public multiSelectionValue: string[] = [ - this.animals.land[0].value, - this.animals.land[2].value, - this.animals.aquatic[1].value, - ]; - - public reset(): void { - this.formFieldModel = { ...this.formFieldDefaults }; - this.selectModel = { ...this.selectDefaults }; - this.selectHelperModel = { ...this.selectHelperDefaults }; - - this.singleSelectionValue = null; - this.multiSelectionValue = [ - this.animals.land[0].value, - this.animals.land[2].value, - this.animals.aquatic[1].value, - ]; - } + protected _selectDemoService = inject(SelectDemoService); } diff --git a/projects/demo/src/app/pages/select/select-demo.service.ts b/projects/demo/src/app/pages/select/select-demo.service.ts new file mode 100644 index 00000000..70ad9e31 --- /dev/null +++ b/projects/demo/src/app/pages/select/select-demo.service.ts @@ -0,0 +1,167 @@ +import { Injectable } from '@angular/core'; +import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; +import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; +import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; +import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; +import { IDS_FORM_FIELD_DEFAULT_CONFIG_FACTORY, IdsFormFieldVariant, IdsFormFieldVariantType } from '@i-cell/ids-angular/forms'; +import { IDS_SELECT_DEFAULT_CONFIG_FACTORY } from '@i-cell/ids-angular/select'; + +const formFieldDefaultConfig = IDS_FORM_FIELD_DEFAULT_CONFIG_FACTORY(); + +const selectDefaultConfig = IDS_SELECT_DEFAULT_CONFIG_FACTORY(); + +type FormFieldInputControls = { + size: IdsSizeType, + variant: IdsFormFieldVariantType, +}; + +type SelectInputControls = { + placeholder: string, + required: boolean, + disabled: boolean, + readonly: boolean, + 'aria-label': string, + 'aria-labelledby': string, + typeaheadDebounceInterval: number, + canHandleSuccessState: boolean, +}; + +type SelectHelperControls = { + useCustomTrigger: boolean, +}; + +type SampleOption = { + value: string + viewValue: string +}; + +type AnimalOptions = { + land: SampleOption[] + aquatic: SampleOption[] +}; +@Injectable() +export class SelectDemoService { + public readonly formFieldInputControlConfig: DemoControlConfig = { + size: { + description: 'Form field size.', + type: 'IdsSizeType', + default: formFieldDefaultConfig.size, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + variant: { + description: 'Form field variant.', + type: 'IdsFormFieldVariantType', + default: formFieldDefaultConfig.variant, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsFormFieldVariant), + }, + }; + + public readonly selectInputControlConfig: DemoControlConfig = { + placeholder: { + description: 'Select placeholder.', + type: 'string', + default: '-', + demoDefault: 'Select animal', + }, + required: { + description: 'Whether the select is required or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + disabled: { + description: 'Whether the select is disabled or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + readonly: { + description: 'Whether the select is readonly or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + 'aria-label': { + description: 'aria-label tag for the select.', + type: 'string', + default: '-', + demoDefault: 'animal', + }, + 'aria-labelledby': { + description: 'aria-labelledby tag for select.', + type: 'string', + default: '-', + demoDefault: 'animal', + }, + typeaheadDebounceInterval: { + description: 'Number in millisec. Can not overwrite at runtime.', + type: 'number', + default: selectDefaultConfig.typeaheadDebounceInterval, + min: 0, + step: 100, + disabled: true, + }, + canHandleSuccessState: { + description: 'Whether the select can handle success state with a success state matcher.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + }; + + public readonly selectHelperControlConfig: DemoControlConfig = { + useCustomTrigger: { + description: 'Whether the select has a custom trigger or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + }; + + public formFieldDefaults = getDefaultFromDemoConfig(this.formFieldInputControlConfig); + public selectDefaults = getDefaultFromDemoConfig(this.selectInputControlConfig); + public selectHelperDefaults = getDefaultFromDemoConfig(this.selectHelperControlConfig); + + public formFieldModel: FormFieldInputControls = { ...this.formFieldDefaults }; + public selectModel: SelectInputControls = { ...this.selectDefaults }; + public selectHelperModel: SelectHelperControls = { ...this.selectHelperDefaults }; + + public animals: AnimalOptions = { + land: [ + { viewValue: 'Dog', value: 'dog' }, + { viewValue: 'Cat', value: 'cat' }, + { viewValue: 'Giraffe', value: 'giraffe' }, + { viewValue: 'Orangutan', value: 'orangutan' }, + { viewValue: 'Mammoth', value: 'mammoth' }, + { viewValue: 'Opisthocoelicaudia Skarzynski', value: 'opisthocoelicaudia skarzynski' }, + ], + aquatic: [ + { viewValue: 'Crocodile', value: 'crocodile' }, + { viewValue: 'Whale', value: 'whale' }, + { viewValue: 'Dolphin', value: 'doplhin' }, + { viewValue: 'Shark', value: 'shark' }, + ], + }; + + public singleSelectionValue: string | null = null; + public multiSelectionValue: string[] = [ + this.animals.land[0].value, + this.animals.land[2].value, + this.animals.aquatic[1].value, + ]; + + public reset(): void { + this.formFieldModel = { ...this.formFieldDefaults }; + this.selectModel = { ...this.selectDefaults }; + this.selectHelperModel = { ...this.selectHelperDefaults }; + + this.singleSelectionValue = null; + this.multiSelectionValue = [ + this.animals.land[0].value, + this.animals.land[2].value, + this.animals.aquatic[1].value, + ]; + } +} diff --git a/projects/demo/src/app/pages/side-nav/side-nav-demo.component.html b/projects/demo/src/app/pages/side-nav/side-nav-demo.component.html index bf826258..3257ecca 100644 --- a/projects/demo/src/app/pages/side-nav/side-nav-demo.component.html +++ b/projects/demo/src/app/pages/side-nav/side-nav-demo.component.html @@ -1,198 +1,237 @@ - - - + + +
+ +
+ + + + +
+ +
+

Props

- - - + +
diff --git a/projects/demo/src/app/pages/side-nav/side-nav-demo.component.scss b/projects/demo/src/app/pages/side-nav/side-nav-demo.component.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/projects/demo/src/app/pages/side-nav/side-nav-demo.component.ts b/projects/demo/src/app/pages/side-nav/side-nav-demo.component.ts index 13711258..27d00b7f 100644 --- a/projects/demo/src/app/pages/side-nav/side-nav-demo.component.ts +++ b/projects/demo/src/app/pages/side-nav/side-nav-demo.component.ts @@ -1,34 +1,16 @@ +import { SideNavDemoService } from './side-nav-demo.service'; + import { ControlTableComponent } from '../../components/control-table/control-table.component'; +import { PropTableComponent } from '../../components/prop-table/prop-table.component'; +import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; +import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; -import { Component } from '@angular/core'; -import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; -import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; -import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; -import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; +import { Component, inject } from '@angular/core'; import { IdsIconComponent } from '@i-cell/ids-angular/icon'; -import { IDS_SIDE_NAV_DEFAULT_CONFIG_FACTORY, IdsSideNavAppearance, IdsSideNavAppearanceType, IdsSideNavComponent, IdsSideNavItemComponent, IdsSideNavSectionComponent, IdsSideNavTitleComponent, IdsSideNavVariant, IdsSideNavVariantType } from '@i-cell/ids-angular/side-nav'; +import { IdsSideNavComponent, IdsSideNavItemComponent, IdsSideNavSectionComponent, IdsSideNavTitleComponent } from '@i-cell/ids-angular/side-nav'; import { TranslateModule } from '@ngx-translate/core'; -type SideNavInputControls = { - appearance: IdsSideNavAppearanceType; - size: IdsSizeType; - variant: IdsSideNavVariantType; -}; - -type SideNavHelperControls = { - text: string, - target: string, - hasLeadingIcon: boolean, - hasTrailingIcon: boolean, - disabled: boolean, - hasActiveIndicator: boolean, - hasLabel: boolean, - hasTooltip: boolean, -}; - -const sideNavDefaultConfig = IDS_SIDE_NAV_DEFAULT_CONFIG_FACTORY(); - @Component({ selector: 'app-side-nav-demo', imports: [ @@ -37,97 +19,15 @@ const sideNavDefaultConfig = IDS_SIDE_NAV_DEFAULT_CONFIG_FACTORY(); IdsSideNavItemComponent, IdsSideNavSectionComponent, IdsSideNavTitleComponent, - ControlTableComponent, TranslateModule, TryoutComponent, + DemoAndCodeComponent, + TryoutControlComponent, + ControlTableComponent, + PropTableComponent, ], templateUrl: './side-nav-demo.component.html', - styleUrl: './side-nav-demo.component.scss', }) export class SideNavDemoComponent { - protected _sideNavInputControlConfig: DemoControlConfig = { - appearance: { - description: 'Side nav appearance.', - type: 'IdsSideNavAppearanceType', - control: 'select', - list: convertEnumToStringArray(IdsSideNavAppearance), - default: sideNavDefaultConfig.appearance, - }, - size: { - description: 'Side nav size.', - type: 'IdsSizeType', - control: 'select', - list: convertEnumToStringArray(IdsSize), - default: sideNavDefaultConfig.size, - }, - variant: { - description: 'Side nav variant.', - type: 'IdsSideNavVariantType', - control: 'select', - list: convertEnumToStringArray(IdsSideNavVariant), - default: sideNavDefaultConfig.variant, - }, - }; - - protected _helperControlConfig: DemoControlConfig = { - text: { - description: 'Text of side nav item', - type: 'string', - default: '-', - demoDefault: 'Accordion', - }, - target: { - description: 'Router link of side nav item', - type: 'string', - default: '-', - demoDefault: 'components/accordion', - }, - hasLeadingIcon: { - description: 'Whether the side nav item has leading icon or not.', - type: 'boolean', - default: true, - control: DemoControl.CHECKBOX, - }, - hasTrailingIcon: { - description: 'Whether the side nav item has trailing icon or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - disabled: { - description: 'Whether the side nav item is disabled or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - hasActiveIndicator: { - description: 'Whether the side nav has active indicator or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - hasLabel: { - description: 'Whether the side nav has label or not.', - type: 'boolean', - default: true, - control: DemoControl.CHECKBOX, - }, - hasTooltip: { - description: 'Whether the side nav item has tooltip or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - }; - - public sideNavDefaults = getDefaultFromDemoConfig(this._sideNavInputControlConfig); - public helperDefaults = getDefaultFromDemoConfig(this._helperControlConfig); - - public model: SideNavInputControls = { ...this.sideNavDefaults }; - public helperModel: SideNavHelperControls = { ...this.helperDefaults }; - - public reset(): void { - this.model = { ...this.sideNavDefaults }; - this.helperModel = { ...this.helperDefaults }; - } + protected _sideNavDemoService = inject(SideNavDemoService); } diff --git a/projects/demo/src/app/pages/side-nav/side-nav-demo.service.ts b/projects/demo/src/app/pages/side-nav/side-nav-demo.service.ts new file mode 100644 index 00000000..df6dfc0d --- /dev/null +++ b/projects/demo/src/app/pages/side-nav/side-nav-demo.service.ts @@ -0,0 +1,113 @@ +import { Injectable } from '@angular/core'; +import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; +import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; +import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; +import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; +import { IDS_SIDE_NAV_DEFAULT_CONFIG_FACTORY, IdsSideNavAppearance, IdsSideNavAppearanceType, IdsSideNavVariant, IdsSideNavVariantType } from '@i-cell/ids-angular/side-nav'; + +type SideNavInputControls = { + appearance: IdsSideNavAppearanceType; + size: IdsSizeType; + variant: IdsSideNavVariantType; +}; + +type SideNavHelperControls = { + text: string, + target: string, + hasLeadingIcon: boolean, + hasTrailingIcon: boolean, + disabled: boolean, + hasActiveIndicator: boolean, + hasLabel: boolean, + hasTooltip: boolean, +}; + +const sideNavDefaultConfig = IDS_SIDE_NAV_DEFAULT_CONFIG_FACTORY(); +@Injectable() +export class SideNavDemoService { + public readonly sideNavInputControlConfig: DemoControlConfig = { + appearance: { + description: 'Side nav appearance.', + type: 'IdsSideNavAppearanceType', + control: 'select', + list: convertEnumToStringArray(IdsSideNavAppearance), + default: sideNavDefaultConfig.appearance, + }, + size: { + description: 'Side nav size.', + type: 'IdsSizeType', + control: 'select', + list: convertEnumToStringArray(IdsSize), + default: sideNavDefaultConfig.size, + }, + variant: { + description: 'Side nav variant.', + type: 'IdsSideNavVariantType', + control: 'select', + list: convertEnumToStringArray(IdsSideNavVariant), + default: sideNavDefaultConfig.variant, + }, + }; + + public readonly helperControlConfig: DemoControlConfig = { + text: { + description: 'Text of side nav item', + type: 'string', + default: '-', + demoDefault: 'Accordion', + }, + target: { + description: 'Router link of side nav item', + type: 'string', + default: '-', + demoDefault: 'components/accordion', + }, + hasLeadingIcon: { + description: 'Whether the side nav item has leading icon or not.', + type: 'boolean', + default: true, + control: DemoControl.SWITCH, + }, + hasTrailingIcon: { + description: 'Whether the side nav item has trailing icon or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + disabled: { + description: 'Whether the side nav item is disabled or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + hasActiveIndicator: { + description: 'Whether the side nav has active indicator or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + hasLabel: { + description: 'Whether the side nav has label or not.', + type: 'boolean', + default: true, + control: DemoControl.SWITCH, + }, + hasTooltip: { + description: 'Whether the side nav item has tooltip or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + }; + + public sideNavDefaults = getDefaultFromDemoConfig(this.sideNavInputControlConfig); + public helperDefaults = getDefaultFromDemoConfig(this.helperControlConfig); + + public model: SideNavInputControls = { ...this.sideNavDefaults }; + public helperModel: SideNavHelperControls = { ...this.helperDefaults }; + + public reset(): void { + this.model = { ...this.sideNavDefaults }; + this.helperModel = { ...this.helperDefaults }; + } +} diff --git a/projects/demo/src/app/pages/side-sheet/side-sheet-demo.component.html b/projects/demo/src/app/pages/side-sheet/side-sheet-demo.component.html index 8d0df64a..1482562e 100644 --- a/projects/demo/src/app/pages/side-sheet/side-sheet-demo.component.html +++ b/projects/demo/src/app/pages/side-sheet/side-sheet-demo.component.html @@ -1,97 +1,105 @@ - - -
-
-

Customer

-
-
- @if (model.isShowFooter) { -
- -
- } -
- - First name - - + +
+ + +
+
+

Customer

+
+
+ @if (_sideSheetService.model.isShowFooter) { +
+ +
+ } +
+ + First name + + + + + Last name + + + + + Email address + + - - Last name - - + + Phone number + + - - Email address - - + + Shipping address + + - - Phone number - - + + City + + - - Shipping address - - + + Postal code + + +
+ + - - City - - + @if (_sideSheetService.model.position !== "right") { + + } - - Postal code - - -
- - + +
+ +
+ -@if (model.position !== 'right') { - -} + @if (_sideSheetService.model.position === "right") { + + } +
- -
- +
+ + +
- - + +
+

Props

-@if (model.position === 'right') { - -} + +
diff --git a/projects/demo/src/app/pages/side-sheet/side-sheet-demo.component.scss b/projects/demo/src/app/pages/side-sheet/side-sheet-demo.component.scss index 16321db5..290c2201 100644 --- a/projects/demo/src/app/pages/side-sheet/side-sheet-demo.component.scss +++ b/projects/demo/src/app/pages/side-sheet/side-sheet-demo.component.scss @@ -1,5 +1,6 @@ :host { display: flex; + flex-direction: column; } .demo-save-btn { diff --git a/projects/demo/src/app/pages/side-sheet/side-sheet-demo.component.ts b/projects/demo/src/app/pages/side-sheet/side-sheet-demo.component.ts index fdb1c221..e0a9306d 100644 --- a/projects/demo/src/app/pages/side-sheet/side-sheet-demo.component.ts +++ b/projects/demo/src/app/pages/side-sheet/side-sheet-demo.component.ts @@ -1,52 +1,26 @@ +import { SideSheetDemoService } from './side-sheet-demo.service'; + import { ControlTableComponent } from '../../components/control-table/control-table.component'; +import { PropTableComponent } from '../../components/prop-table/prop-table.component'; +import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; +import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; -import { Location, NgTemplateOutlet } from '@angular/common'; +import { NgTemplateOutlet } from '@angular/common'; import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { DemoControlConfig } from '@demo-types/demo-control.type'; -import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; import { IdsButtonComponent } from '@i-cell/ids-angular/button'; -import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; import { IdsFormFieldComponent, IdsInputDirective, IdsLabelDirective, } from '@i-cell/ids-angular/forms'; -import { IDS_SIDE_SHEET_DEFAULT_CONFIG_FACTORY } from '@i-cell/ids-angular/side-sheet/side-sheet-defaults'; import { IdsSideSheetComponent } from '@i-cell/ids-angular/side-sheet/side-sheet.component'; -import { - IdsBackdropType, - IdsBackdropTypeType, - IdsSideSheetHeader, IdsSideSheetHeaderType, - IdsSideSheetPosition, IdsSideSheetPositionType, - IdsSideSheetType, -} from '@i-cell/ids-angular/side-sheet/types/side-sheet.type'; import { TranslatePipe } from '@ngx-translate/core'; -const defaultConfig = IDS_SIDE_SHEET_DEFAULT_CONFIG_FACTORY(); - -type SideSheetInputControls = { - type: string; - title: string; - position: IdsSideSheetPositionType | string; - header: IdsSideSheetHeaderType; - backButton: boolean; - isScrollable: boolean; - isBackdrop: boolean; - backdropType: IdsBackdropTypeType; - backdropOpacity: IdsSizeType; - isClosable: boolean; - isShowFooter: boolean; - isShowHeader: boolean; - closeTooltipText: string; - size: string; -}; - @Component({ selector: 'app-segmented-control-demo', imports: [ TryoutComponent, - ControlTableComponent, IdsSideSheetComponent, IdsButtonComponent, TranslatePipe, @@ -55,130 +29,14 @@ type SideSheetInputControls = { IdsFormFieldComponent, IdsInputDirective, IdsLabelDirective, + DemoAndCodeComponent, + TryoutControlComponent, + ControlTableComponent, + PropTableComponent, ], templateUrl: './side-sheet-demo.component.html', styleUrls: ['./side-sheet-demo.component.scss'], }) export class SideSheetDemoComponent { - - protected _idsSideSheetType = IdsSideSheetType; - protected _idsSideSheetHeaderType = IdsSideSheetHeader; - - private readonly _location = inject(Location); - - protected _inputControlConfig: DemoControlConfig = { - size: { - description: 'Side sheet size.', - type: 'IdsSizeType', - default: defaultConfig.size, - list: Object.values(IdsSize), - control: 'select', - }, - type: { - description: 'Side sheet type.', - type: 'IdsSideSheetType', - default: defaultConfig.type, - list: Object.values(IdsSideSheetType), - control: 'select', - }, - title: { - description: 'Side sheet title.', - type: 'string', - default: 'Title', - control: 'text', - }, - position: { - description: 'Side sheet position.', - type: 'IdsSideSheetPosition', - default: defaultConfig.position, - list: Object.values(IdsSideSheetPosition), - control: 'select', - }, - header: { - description: 'Side sheet header.', - type: 'IdsSideSheetHeader', - default: defaultConfig.header, - list: Object.values(IdsSideSheetHeader), - control: 'select', - }, - backButton: { - description: 'Is side sheet back button shown. Only applies to default header.', - type: 'boolean', - default: false, - control: 'checkbox', - }, - isScrollable: { - description: 'Is side sheet scrollable.', - type: 'boolean', - default: defaultConfig.isScrollable, - control: 'checkbox', - }, - isBackdrop: { - description: 'Is side sheet backdrop enabled.', - type: 'boolean', - default: defaultConfig.isBackdrop, - control: 'checkbox', - }, - backdropType: { - description: 'Backdrop type.', - type: 'IdsBackdropType', - default: defaultConfig.backdropType, - list: Object.values(IdsBackdropType), - control: 'select', - }, - backdropOpacity: { - description: 'Backdrop opacity.', - type: 'IdsSizeType', - default: IdsSize.COMPACT, - list: Object.values(IdsSize), - control: 'select', - }, - isClosable: { - description: 'Is side sheet closable.', - type: 'boolean', - default: defaultConfig.isClosable, - control: 'checkbox', - }, - isShowFooter: { - description: 'Is side sheet footer shown.', - type: 'boolean', - default: defaultConfig.isShowFooter, - control: 'checkbox', - }, - isShowHeader: { - description: 'Controls the visibility of the header. Applies only when using the default header type.', - type: 'boolean', - default: true, - control: 'checkbox', - }, - closeTooltipText: { - description: 'Tooltip text for the close button.', - type: 'string', - default: defaultConfig.closeTooltipText, - control: 'text', - }, - }; - - public defaults = getDefaultFromDemoConfig(this._inputControlConfig); - - public model: SideSheetInputControls = { ...this.defaults }; - - public reset(): void { - this.model = { ...this.defaults }; - } - - public onBackButtonClick(): void { - this._location.back(); - } - - protected _show = false; - - protected _firstName = ''; - protected _lastName = ''; - protected _email = ''; - protected _phoneNumber = ''; - protected _shippingAddress = ''; - protected _city = ''; - protected _postalCode = ''; - + protected _sideSheetService = inject(SideSheetDemoService); } diff --git a/projects/demo/src/app/pages/side-sheet/side-sheet-demo.service.ts b/projects/demo/src/app/pages/side-sheet/side-sheet-demo.service.ts new file mode 100644 index 00000000..f9a3b347 --- /dev/null +++ b/projects/demo/src/app/pages/side-sheet/side-sheet-demo.service.ts @@ -0,0 +1,147 @@ +import { Location } from '@angular/common'; +import { inject, Injectable } from '@angular/core'; +import { DemoControlConfig } from '@demo-types/demo-control.type'; +import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; +import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; +import { IDS_SIDE_SHEET_DEFAULT_CONFIG_FACTORY, IdsBackdropType, IdsBackdropTypeType, IdsSideSheetHeader, IdsSideSheetHeaderType, IdsSideSheetPosition, IdsSideSheetPositionType, IdsSideSheetType } from '@i-cell/ids-angular/side-sheet'; + +const defaultConfig = IDS_SIDE_SHEET_DEFAULT_CONFIG_FACTORY(); + +type SideSheetInputControls = { + type: string; + title: string; + position: IdsSideSheetPositionType | string; + header: IdsSideSheetHeaderType; + backButton: boolean; + isScrollable: boolean; + isBackdrop: boolean; + backdropType: IdsBackdropTypeType; + backdropOpacity: IdsSizeType; + isClosable: boolean; + isShowFooter: boolean; + isShowHeader: boolean; + closeTooltipText: string; + size: string; +}; +@Injectable() +export class SideSheetDemoService { + protected _idsSideSheetType = IdsSideSheetType; + protected _idsSideSheetHeaderType = IdsSideSheetHeader; + + private readonly _location = inject(Location); + + public inputControlConfig: DemoControlConfig = { + size: { + description: 'Side sheet size.', + type: 'IdsSizeType', + default: defaultConfig.size, + list: Object.values(IdsSize), + control: 'select', + }, + type: { + description: 'Side sheet type.', + type: 'IdsSideSheetType', + default: defaultConfig.type, + list: Object.values(IdsSideSheetType), + control: 'select', + }, + title: { + description: 'Side sheet title.', + type: 'string', + default: 'Title', + control: 'text', + }, + position: { + description: 'Side sheet position.', + type: 'IdsSideSheetPosition', + default: defaultConfig.position, + list: Object.values(IdsSideSheetPosition), + control: 'select', + }, + header: { + description: 'Side sheet header.', + type: 'IdsSideSheetHeader', + default: defaultConfig.header, + list: Object.values(IdsSideSheetHeader), + control: 'select', + }, + backButton: { + description: 'Is side sheet back button shown. Only applies to default header.', + type: 'boolean', + default: false, + control: 'switch', + }, + isScrollable: { + description: 'Is side sheet scrollable.', + type: 'boolean', + default: defaultConfig.isScrollable, + control: 'switch', + }, + isBackdrop: { + description: 'Is side sheet backdrop enabled.', + type: 'boolean', + default: defaultConfig.isBackdrop, + control: 'switch', + }, + backdropType: { + description: 'Backdrop type.', + type: 'IdsBackdropType', + default: defaultConfig.backdropType, + list: Object.values(IdsBackdropType), + control: 'select', + }, + backdropOpacity: { + description: 'Backdrop opacity.', + type: 'IdsSizeType', + default: IdsSize.COMPACT, + list: Object.values(IdsSize), + control: 'select', + }, + isClosable: { + description: 'Is side sheet closable.', + type: 'boolean', + default: defaultConfig.isClosable, + control: 'switch', + }, + isShowFooter: { + description: 'Is side sheet footer shown.', + type: 'boolean', + default: defaultConfig.isShowFooter, + control: 'switch', + }, + isShowHeader: { + description: 'Controls the visibility of the header. Applies only when using the default header type.', + type: 'boolean', + default: true, + control: 'switch', + }, + closeTooltipText: { + description: 'Tooltip text for the close button.', + type: 'string', + default: defaultConfig.closeTooltipText, + control: 'text', + }, + }; + + public defaults = getDefaultFromDemoConfig(this.inputControlConfig); + + public model: SideSheetInputControls = { ...this.defaults }; + + public reset(): void { + this.model = { ...this.defaults }; + } + + public onBackButtonClick(): void { + this._location.back(); + } + + public show = false; + + public firstName = ''; + public lastName = ''; + public email = ''; + public phoneNumber = ''; + public shippingAddress = ''; + public city = ''; + public postalCode = ''; +} diff --git a/projects/demo/src/app/pages/snackbar/snackbar-demo.component.html b/projects/demo/src/app/pages/snackbar/snackbar-demo.component.html index a20911ad..1bcee5c0 100644 --- a/projects/demo/src/app/pages/snackbar/snackbar-demo.component.html +++ b/projects/demo/src/app/pages/snackbar/snackbar-demo.component.html @@ -1,8 +1,33 @@ - - - - + +
+ + + + + +
- - - +
+ + + + +
+ +
+

Props

+ + +
diff --git a/projects/demo/src/app/pages/snackbar/snackbar-demo.component.ts b/projects/demo/src/app/pages/snackbar/snackbar-demo.component.ts index 0f8f817e..f78b88cf 100644 --- a/projects/demo/src/app/pages/snackbar/snackbar-demo.component.ts +++ b/projects/demo/src/app/pages/snackbar/snackbar-demo.component.ts @@ -1,45 +1,27 @@ +import { SnackbarDemoService } from './snackbar-demo.service'; + import { ControlTableComponent } from '../../components/control-table/control-table.component'; +import { PropTableComponent } from '../../components/prop-table/prop-table.component'; +import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; +import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; -import { Component, computed, inject, OnInit, ViewContainerRef } from '@angular/core'; +import { Component, inject, OnInit, ViewContainerRef } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; -import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; -import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; import { IdsButtonComponent } from '@i-cell/ids-angular/button'; -import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; -import { IDS_SNACKBAR_DEFAULT_CONFIG_FACTORY, IdsSnackbarAction, IdsSnackbarService, IdsSnackbarPositionType, IdsSnackbarVariant, IdsSnackbarVariantType, IdsSnackbarPosition } from '@i-cell/ids-angular/snackbar'; import { TranslateModule } from '@ngx-translate/core'; -type SnackbarInputControls = { - message: string, - variant: IdsSnackbarVariantType, - icon: string | undefined, - allowDismiss: boolean, - closeButtonLabel: string | undefined, - autoClose: boolean, - urgent: boolean, -}; - -type SnackbarHelperControls = { - useAction: boolean, - size: IdsSizeType, - position: IdsSnackbarPositionType, - newestAtStartPosition: boolean - viewportMargin: number - useActualViewContainer: boolean -}; - -const defaultConfig = IDS_SNACKBAR_DEFAULT_CONFIG_FACTORY(); - @Component({ selector: 'app-snackbar-demo', imports: [ TryoutComponent, - ControlTableComponent, IdsButtonComponent, TranslateModule, FormsModule, + DemoAndCodeComponent, + ControlTableComponent, + TryoutControlComponent, + PropTableComponent, ], templateUrl: './snackbar-demo.component.html', styleUrls: [ @@ -48,145 +30,11 @@ const defaultConfig = IDS_SNACKBAR_DEFAULT_CONFIG_FACTORY(); ], }) export class SnackbarDemoComponent implements OnInit { - private readonly _snackbarService = inject(IdsSnackbarService); + protected _snackbarDemoService = inject(SnackbarDemoService); private readonly _viewContainerRef = inject(ViewContainerRef); - private readonly _customActions: IdsSnackbarAction[] = [{ label: 'Log to console', action: this.action }]; - protected _areSnackbarsOpen = computed(() => this._snackbarService.snackbars().length > 0); - - public setActualViewContainer = (): void => { - if (this.helperModel.useActualViewContainer) { - this._snackbarService.setViewContainerRef(this._viewContainerRef); - } else { - this._snackbarService.clearViewContainerRef(); - } - }; - - protected _inputControlConfig: DemoControlConfig = { - message: { - description: 'Snackbar message', - type: 'string', - default: '-', - demoDefault: 'Lorem ipsum dolor sit amet, consectetur adipisicing.', - }, - variant: { - description: 'Snackbar variant.', - type: 'IdsSnackbarVariantType', - default: defaultConfig.variant, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSnackbarVariant), - }, - icon: { - description: 'Custom icon for snackbar. Overwites default icon. Default icon depends on variant.', - type: 'string', - default: '-', - demoDefault: '', - }, - allowDismiss: { - description: 'Whether the the user can close the snackbar or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - closeButtonLabel: { - // eslint-disable-next-line @stylistic/js/max-len - description: 'Custom close button. If any text is provided, the close button will be a button with this text against the default "x" button', - type: 'string', - default: '-', - demoDefault: '', - }, - autoClose: { - description: 'Whether the snackbar should close automatically or not. The duration is a computed data based on some constant value.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - urgent: { - description: 'Whether the snackbar is urgent or not. It changes the role of the snackbar.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - }; - - protected _helperControlConfig: DemoControlConfig = { - useAction: { - description: 'Whether the snackbar is urgent or not. It changes the role of the snackbar.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - size: { - description: 'Snackbar size. Size is an application-wide default value. Can not overwrite at runtime.', - type: 'IdsSizeType', - default: defaultConfig.size, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - disabled: true, - }, - position: { - description: 'Snackbar position. Position is an application-wide default value. Can not overwrite at runtime.', - type: 'IdsSnackbarPositionType', - default: defaultConfig.position, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSnackbarPosition), - disabled: true, - }, - newestAtStartPosition: { - // eslint-disable-next-line @stylistic/js/max-len - description: 'Whether the newest snackbar opens in start position, or not. newestAtStartPosition is an application-wide default value. Can not overwrite at runtime.', - type: 'boolean', - default: defaultConfig.newestAtStartPosition, - control: DemoControl.CHECKBOX, - disabled: true, - }, - viewportMargin: { - description: 'Viewport margin. viewportMargin is an application-wide default value. Can not overwrite at runtime.', - type: 'number', - default: defaultConfig.viewportMargin, - disabled: true, - control: DemoControl.NUMBER, - min: 0, - step: 1, - }, - useActualViewContainer: { - // eslint-disable-next-line @stylistic/js/max-len - description: 'Snackbars open in snackbar group. This group can connect to the viewport by default, or we can connect to a viewContainerRef. With this boolean, we can switch between actual viewContainerRef or viewPort.', - type: 'boolean', - default: true, - control: DemoControl.CHECKBOX, - onModelChange: this.setActualViewContainer, - }, - }; - - public defaults = getDefaultFromDemoConfig(this._inputControlConfig); - public helperDefaults = getDefaultFromDemoConfig(this._helperControlConfig); - - public model: SnackbarInputControls = { ...this.defaults }; - public helperModel: SnackbarHelperControls = { ...this.helperDefaults }; public ngOnInit(): void { - this.setActualViewContainer(); - } - - public openSnackbar(): void { - this._snackbarService.add({ - message: this.model.message, - icon: this.model.icon, - variant: this.model.variant, - actions: this.helperModel.useAction ? this._customActions : undefined, - allowDismiss: this.model.allowDismiss, - closeButtonLabel: this.model.closeButtonLabel, - autoClose: this.model.autoClose, - urgent: this.model.urgent, - }); - } - - public action(): void { - console.info('action was called'); - } - public reset(): void { - this.model = { ...this.defaults }; - this.helperModel = { ...this.helperDefaults }; + this._snackbarDemoService.registerViewContainerRef(this._viewContainerRef); } } diff --git a/projects/demo/src/app/pages/snackbar/snackbar-demo.service.ts b/projects/demo/src/app/pages/snackbar/snackbar-demo.service.ts new file mode 100644 index 00000000..29cc510b --- /dev/null +++ b/projects/demo/src/app/pages/snackbar/snackbar-demo.service.ts @@ -0,0 +1,181 @@ +import { computed, inject, Injectable, ViewContainerRef } from '@angular/core'; +import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; +import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; +import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; +import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; +import { IDS_SNACKBAR_DEFAULT_CONFIG_FACTORY, IdsSnackbarAction, IdsSnackbarPosition, IdsSnackbarPositionType, IdsSnackbarService, IdsSnackbarVariant, IdsSnackbarVariantType } from '@i-cell/ids-angular/snackbar'; + +type SnackbarInputControls = { + message: string, + variant: IdsSnackbarVariantType, + icon: string | undefined, + allowDismiss: boolean, + closeButtonLabel: string | undefined, + autoClose: boolean, + urgent: boolean, +}; + +type SnackbarHelperControls = { + useAction: boolean, + size: IdsSizeType, + position: IdsSnackbarPositionType, + newestAtStartPosition: boolean + viewportMargin: number + useActualViewContainer: boolean +}; + +const defaultConfig = IDS_SNACKBAR_DEFAULT_CONFIG_FACTORY(); + +@Injectable() +export class SnackbarDemoService { + private readonly _snackbarService = inject(IdsSnackbarService); + private _viewContainerRef: ViewContainerRef | null = null; + private readonly _customActions: IdsSnackbarAction[] = [{ label: 'Log to console', action: this.action }]; + protected _areSnackbarsOpen = computed(() => this._snackbarService.snackbars().length > 0); + + public inputControlConfig: DemoControlConfig = { + message: { + description: 'Snackbar message', + type: 'string', + default: '-', + demoDefault: 'Lorem ipsum dolor sit amet, consectetur adipisicing.', + }, + variant: { + description: 'Snackbar variant.', + type: 'IdsSnackbarVariantType', + default: defaultConfig.variant, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSnackbarVariant), + }, + icon: { + description: 'Custom icon for snackbar. Overwites default icon. Default icon depends on variant.', + type: 'string', + default: '-', + demoDefault: '', + }, + allowDismiss: { + description: 'Whether the the user can close the snackbar or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + closeButtonLabel: { + description: 'Custom close button. If any text is provided,' + + ' the close button will be a button with this text against the default "x" button', + type: 'string', + default: '-', + demoDefault: '', + }, + autoClose: { + description: 'Whether the snackbar should close automatically or not. The duration is a computed data based on some constant value.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + urgent: { + description: 'Whether the snackbar is urgent or not. It changes the role of the snackbar.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + }; + + public helperControlConfig: DemoControlConfig = { + useAction: { + description: 'Whether the snackbar is urgent or not. It changes the role of the snackbar.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + size: { + description: 'Snackbar size. Size is an application-wide default value. Can not overwrite at runtime.', + type: 'IdsSizeType', + default: defaultConfig.size, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + disabled: true, + }, + position: { + description: 'Snackbar position. Position is an application-wide default value. Can not overwrite at runtime.', + type: 'IdsSnackbarPositionType', + default: defaultConfig.position, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSnackbarPosition), + disabled: true, + }, + newestAtStartPosition: { + description: 'Whether the newest snackbar opens in start position, or not.'+ + ' newestAtStartPosition is an application-wide default value. Can not overwrite at runtime.', + type: 'boolean', + default: defaultConfig.newestAtStartPosition, + control: DemoControl.SWITCH, + disabled: true, + }, + viewportMargin: { + description: 'Viewport margin. viewportMargin is an application-wide default value. Can not overwrite at runtime.', + type: 'number', + default: defaultConfig.viewportMargin, + disabled: true, + control: DemoControl.NUMBER, + min: 0, + step: 1, + }, + useActualViewContainer: { + description: 'Snackbars open in snackbar group.'+ + ' This group can connect to the viewport by default, or we can connect to a viewContainerRef.'+ + ' With this boolean, we can switch between actual viewContainerRef or viewPort.', + type: 'boolean', + default: true, + control: DemoControl.SWITCH, + }, + }; + + public defaults = getDefaultFromDemoConfig(this.inputControlConfig); + public helperDefaults = getDefaultFromDemoConfig(this.helperControlConfig); + + public model: SnackbarInputControls = { ...this.defaults }; + public helperModel: SnackbarHelperControls = { ...this.helperDefaults }; + + constructor() { + this.helperControlConfig.useActualViewContainer.onModelChange = this.setActualViewContainer.bind(this); + } + + public registerViewContainerRef(vcr: ViewContainerRef): void { + this._viewContainerRef = vcr; + this.setActualViewContainer(); + } + + public setActualViewContainer = (): void => { + if (!this.helperModel) { + return; + } + + if (this.helperModel.useActualViewContainer && this._viewContainerRef) { + this._snackbarService.setViewContainerRef(this._viewContainerRef); + } else { + this._snackbarService.clearViewContainerRef(); + } + }; + + public openSnackbar(): void { + this._snackbarService.add({ + message: this.model.message, + icon: this.model.icon, + variant: this.model.variant, + actions: this.helperModel.useAction ? this._customActions : undefined, + allowDismiss: this.model.allowDismiss, + closeButtonLabel: this.model.closeButtonLabel, + autoClose: this.model.autoClose, + urgent: this.model.urgent, + }); + } + + public action(): void { + console.info('action was called'); + } + + public reset(): void { + this.model = { ...this.defaults }; + this.helperModel = { ...this.helperDefaults }; + } +} diff --git a/projects/demo/src/app/pages/spinner/spinner-demo.component.html b/projects/demo/src/app/pages/spinner/spinner-demo.component.html index d65b0c56..9dcd6835 100644 --- a/projects/demo/src/app/pages/spinner/spinner-demo.component.html +++ b/projects/demo/src/app/pages/spinner/spinner-demo.component.html @@ -1,20 +1,37 @@ - -
- + +
+ +
+ +
+
- - +
+ + + +
+ +
+

Props

+ + +
diff --git a/projects/demo/src/app/pages/spinner/spinner-demo.component.scss b/projects/demo/src/app/pages/spinner/spinner-demo.component.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/projects/demo/src/app/pages/spinner/spinner-demo.component.ts b/projects/demo/src/app/pages/spinner/spinner-demo.component.ts index 86e0f86a..cbe2276d 100644 --- a/projects/demo/src/app/pages/spinner/spinner-demo.component.ts +++ b/projects/demo/src/app/pages/spinner/spinner-demo.component.ts @@ -1,73 +1,28 @@ +import { SpinnerDemoService } from './spinner-demo.service'; + import { ControlTableComponent } from '../../components/control-table/control-table.component'; +import { PropTableComponent } from '../../components/prop-table/prop-table.component'; +import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; +import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; -import { Component } from '@angular/core'; -import { DemoControlConfig } from '@demo-types/demo-control.type'; -import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; -import { IdsSize, IdsSizeCollection, IdsSizeCollectionType, IdsSizeType } from '@i-cell/ids-angular/core'; -import { IDS_SPINNER_DEFAULT_CONFIG_FACTORY } from '@i-cell/ids-angular/spinner/spinner-defaults'; +import { Component, inject } from '@angular/core'; import { IdsSpinnerComponent } from '@i-cell/ids-angular/spinner/spinner.component'; -import { IdsSpinnerVariant, IdsSpinnerVariantType } from '@i-cell/ids-angular/spinner/types/spinner-variant.type'; import { TranslatePipe } from '@ngx-translate/core'; -const defaultConfig = IDS_SPINNER_DEFAULT_CONFIG_FACTORY(); - -type SpinnerInputControls = { - size: IdsSizeType, - variant: IdsSpinnerVariantType, - sizeCollection: IdsSizeCollectionType, - isTrack: boolean, -}; - @Component({ selector: 'app-spinner-demo', imports: [ IdsSpinnerComponent, TranslatePipe, TryoutComponent, + DemoAndCodeComponent, ControlTableComponent, + TryoutControlComponent, + PropTableComponent, ], templateUrl: './spinner-demo.component.html', - styleUrl: './spinner-demo.component.scss', }) export class SpinnerDemoComponent { - - protected _inputControlConfig: DemoControlConfig = { - size: { - description: 'Spinner size.', - type: 'IdsSizeType', - default: defaultConfig.size, - list: Object.values(IdsSize), - control: 'select', - }, - variant: { - description: 'Spinner variant.', - type: 'IdsSpinnerVariantType', - default: defaultConfig.variant, - list: Object.values(IdsSpinnerVariant), - control: 'select', - }, - sizeCollection: { - description: 'Spinner size collection.', - type: 'IdsSizeCollectionType', - default: defaultConfig.sizeCollection, - list: Object.values(IdsSizeCollection), - control: 'select', - }, - isTrack: { - description: 'Spinner is track.', - type: 'boolean', - default: defaultConfig.isTrack, - control: 'checkbox', - }, - }; - - public defaults = getDefaultFromDemoConfig(this._inputControlConfig); - - public model: SpinnerInputControls = { ...this.defaults }; - - public reset(): void { - this.model = { ...this.defaults }; - } - + protected _spinnerDemoService = inject(SpinnerDemoService); } diff --git a/projects/demo/src/app/pages/spinner/spinner-demo.service.ts b/projects/demo/src/app/pages/spinner/spinner-demo.service.ts new file mode 100644 index 00000000..6998acd2 --- /dev/null +++ b/projects/demo/src/app/pages/spinner/spinner-demo.service.ts @@ -0,0 +1,55 @@ +import { Injectable } from '@angular/core'; +import { DemoControlConfig } from '@demo-types/demo-control.type'; +import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; +import { IdsSize, IdsSizeCollection, IdsSizeCollectionType, IdsSizeType } from '@i-cell/ids-angular/core'; +import { IDS_SPINNER_DEFAULT_CONFIG_FACTORY, IdsSpinnerVariant, IdsSpinnerVariantType } from '@i-cell/ids-angular/spinner'; + +const defaultConfig = IDS_SPINNER_DEFAULT_CONFIG_FACTORY(); + +type SpinnerInputControls = { + size: IdsSizeType, + variant: IdsSpinnerVariantType, + sizeCollection: IdsSizeCollectionType, + isTrack: boolean, +}; +@Injectable() +export class SpinnerDemoService { + public readonly inputControlConfig: DemoControlConfig = { + size: { + description: 'Spinner size.', + type: 'IdsSizeType', + default: defaultConfig.size, + list: Object.values(IdsSize), + control: 'select', + }, + variant: { + description: 'Spinner variant.', + type: 'IdsSpinnerVariantType', + default: defaultConfig.variant, + list: Object.values(IdsSpinnerVariant), + control: 'select', + }, + sizeCollection: { + description: 'Spinner size collection.', + type: 'IdsSizeCollectionType', + default: defaultConfig.sizeCollection, + list: Object.values(IdsSizeCollection), + control: 'select', + }, + isTrack: { + description: 'Spinner is track.', + type: 'boolean', + default: defaultConfig.isTrack, + control: 'switch', + }, + }; + + public defaults = getDefaultFromDemoConfig(this.inputControlConfig); + + public model: SpinnerInputControls = { ...this.defaults }; + + public reset(): void { + this.model = { ...this.defaults }; + } + +} diff --git a/projects/demo/src/app/pages/switch/switch-demo.component.html b/projects/demo/src/app/pages/switch/switch-demo.component.html index b9b1051b..a3d48287 100644 --- a/projects/demo/src/app/pages/switch/switch-demo.component.html +++ b/projects/demo/src/app/pages/switch/switch-demo.component.html @@ -1,78 +1,95 @@ - -
-
-

{{ "COMMON.STANDALONE" | translate }}

- +
+ +
+
+

{{ "COMMON.STANDALONE" | translate }}

+ +
+
+

{{ "COMMON.GROUPED" | translate }}

+ + + + + +
+
+ +
+ +
+ + + -
-
-

{{ "COMMON.GROUPED" | translate }}

- - - - - -
+
+ +
+

Props

- - - + +
diff --git a/projects/demo/src/app/pages/switch/switch-demo.component.ts b/projects/demo/src/app/pages/switch/switch-demo.component.ts index eb7736c1..1989349a 100644 --- a/projects/demo/src/app/pages/switch/switch-demo.component.ts +++ b/projects/demo/src/app/pages/switch/switch-demo.component.ts @@ -1,47 +1,28 @@ +import { SwitchDemoService } from './switch-demo.service'; + import { ControlTableComponent } from '../../components/control-table/control-table.component'; +import { PropTableComponent } from '../../components/prop-table/prop-table.component'; +import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; +import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; -import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; -import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; -import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; -import { IDS_SWITCH_DEFAULT_CONFIG_FACTORY, IdsSwitchComponent, IdsSwitchGroupComponent, IdsSwitchIconPosition, IdsSwitchIconPositionType, IdsSwitchLabelPosition, IdsSwitchLabelPositionType, IdsSwitchVariant, IdsSwitchVariantType } from '@i-cell/ids-angular/switch'; +import { IdsSwitchComponent, IdsSwitchGroupComponent } from '@i-cell/ids-angular/switch'; import { TranslateModule } from '@ngx-translate/core'; -const defaultConfig = IDS_SWITCH_DEFAULT_CONFIG_FACTORY(); - -type SwitchInputControls = { - label: string, - readonly: boolean, - size: IdsSizeType, - variant: IdsSwitchVariantType, - hasIcon: boolean, - iconPosition: IdsSwitchIconPositionType, - labelPosition: IdsSwitchLabelPositionType, - disabled: boolean, - 'aria-label': string, - 'aria-labelledby': string, - 'aria-describedby': string, -}; - -type SwitchGroupInputControls = { - size: IdsSizeType, - hasIcon: boolean, - iconPosition: IdsSwitchIconPositionType, - labelPosition: IdsSwitchLabelPositionType, -}; - @Component({ selector: 'app-switch-demo', imports: [ TryoutComponent, - ControlTableComponent, IdsSwitchComponent, IdsSwitchGroupComponent, TranslateModule, FormsModule, + DemoAndCodeComponent, + TryoutControlComponent, + ControlTableComponent, + PropTableComponent, ], templateUrl: './switch-demo.component.html', styleUrls: [ @@ -50,124 +31,5 @@ type SwitchGroupInputControls = { ], }) export class SwitchDemoComponent { - protected _inputControlConfig: DemoControlConfig = { - label: { - description: 'Switch label.', - type: 'string', - default: '-', - demoDefault: 'Switch label', - }, - readonly: { - description: 'Whether the switch is readonly or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - size: { - description: 'Size of the switch.', - type: 'IdsSizeType', - default: defaultConfig.size, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - variant: { - description: 'Variant of the switch.', - type: 'IdsSwitchVariantType', - default: defaultConfig.variant, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSwitchVariant), - }, - hasIcon: { - description: 'Whether the switch has icon.', - type: 'boolean', - default: defaultConfig.hasIcon, - control: DemoControl.CHECKBOX, - }, - iconPosition: { - description: 'Where the icon should be shown in switch.', - type: 'IdsSwitchIconPositionType', - default: defaultConfig.iconPosition, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSwitchIconPosition), - }, - labelPosition: { - description: 'Where the label should be shown in switch.', - type: 'IdsSwitchLabelPositionType', - default: defaultConfig.labelPosition, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSwitchLabelPosition), - }, - disabled: { - description: 'Whether the switch is disabled or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - 'aria-label': { - description: 'aria-label for switch.', - type: 'string', - default: '-', - demoDefault: 'switch', - }, - 'aria-labelledby': { - description: 'aria-labelledby for switch.', - type: 'string', - default: '-', - demoDefault: '', - }, - 'aria-describedby': { - description: 'aria-describedby for switch.', - type: 'string', - default: '-', - demoDefault: '', - }, - }; - - protected _groupInputControlConfig: DemoControlConfig = { - size: { - description: 'Size of the switch.', - type: 'IdsSizeType', - default: defaultConfig.size, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - hasIcon: { - description: 'Whether the switch has icon.', - type: 'boolean', - default: defaultConfig.hasIcon, - control: DemoControl.CHECKBOX, - }, - iconPosition: { - description: 'Where the icon should be shown in switch.', - type: 'IdsSwitchIconPositionType', - default: defaultConfig.iconPosition, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSwitchIconPosition), - }, - labelPosition: { - description: 'Where the label should be shown in switch.', - type: 'IdsSwitchLabelPositionType', - default: defaultConfig.labelPosition, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSwitchLabelPosition), - }, - }; - - public defaults = getDefaultFromDemoConfig(this._inputControlConfig); - public groupDefaults = getDefaultFromDemoConfig(this._groupInputControlConfig); - - public model: SwitchInputControls = { ...this.defaults }; - public groupModel: SwitchGroupInputControls = { ...this.groupDefaults }; - - public value = true; - // eslint-disable-next-line @stylistic/js/array-bracket-newline, @stylistic/js/array-element-newline - public groupValue = [true, true, true]; - - public reset(): void { - this.value = true; - this.model = { ...this.defaults }; - // eslint-disable-next-line @stylistic/js/array-bracket-newline, @stylistic/js/array-element-newline - this.groupValue = [true, true, true]; - this.groupModel = { ...this.groupDefaults }; - } + protected _switchDemoService = inject(SwitchDemoService); } diff --git a/projects/demo/src/app/pages/switch/switch-demo.service.ts b/projects/demo/src/app/pages/switch/switch-demo.service.ts new file mode 100644 index 00000000..e5e8646e --- /dev/null +++ b/projects/demo/src/app/pages/switch/switch-demo.service.ts @@ -0,0 +1,159 @@ +import { Injectable } from '@angular/core'; +import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; +import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; +import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; +import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; +import { IDS_SWITCH_DEFAULT_CONFIG_FACTORY, IdsSwitchIconPosition, IdsSwitchIconPositionType, IdsSwitchLabelPosition, IdsSwitchLabelPositionType, IdsSwitchVariant, IdsSwitchVariantType } from '@i-cell/ids-angular/switch'; + +const defaultConfig = IDS_SWITCH_DEFAULT_CONFIG_FACTORY(); + +type SwitchInputControls = { + label: string, + readonly: boolean, + size: IdsSizeType, + variant: IdsSwitchVariantType, + hasIcon: boolean, + iconPosition: IdsSwitchIconPositionType, + labelPosition: IdsSwitchLabelPositionType, + disabled: boolean, + 'aria-label': string, + 'aria-labelledby': string, + 'aria-describedby': string, +}; + +type SwitchGroupInputControls = { + size: IdsSizeType, + hasIcon: boolean, + iconPosition: IdsSwitchIconPositionType, + labelPosition: IdsSwitchLabelPositionType, +}; +@Injectable() +export class SwitchDemoService { + public readonly inputControlConfig: DemoControlConfig = { + label: { + description: 'Switch label.', + type: 'string', + default: '-', + demoDefault: 'Switch label', + }, + readonly: { + description: 'Whether the switch is readonly or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + size: { + description: 'Size of the switch.', + type: 'IdsSizeType', + default: defaultConfig.size, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + variant: { + description: 'Variant of the switch.', + type: 'IdsSwitchVariantType', + default: defaultConfig.variant, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSwitchVariant), + }, + hasIcon: { + description: 'Whether the switch has icon.', + type: 'boolean', + default: defaultConfig.hasIcon, + control: DemoControl.SWITCH, + }, + iconPosition: { + description: 'Where the icon should be shown in switch.', + type: 'IdsSwitchIconPositionType', + default: defaultConfig.iconPosition, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSwitchIconPosition), + }, + labelPosition: { + description: 'Where the label should be shown in switch.', + type: 'IdsSwitchLabelPositionType', + default: defaultConfig.labelPosition, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSwitchLabelPosition), + }, + disabled: { + description: 'Whether the switch is disabled or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + 'aria-label': { + description: 'aria-label for switch.', + type: 'string', + default: '-', + demoDefault: 'switch', + }, + 'aria-labelledby': { + description: 'aria-labelledby for switch.', + type: 'string', + default: '-', + demoDefault: '', + }, + 'aria-describedby': { + description: 'aria-describedby for switch.', + type: 'string', + default: '-', + demoDefault: '', + }, + }; + + public readonly groupInputControlConfig: DemoControlConfig = { + size: { + description: 'Size of the switch.', + type: 'IdsSizeType', + default: defaultConfig.size, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + hasIcon: { + description: 'Whether the switch has icon.', + type: 'boolean', + default: defaultConfig.hasIcon, + control: DemoControl.SWITCH, + }, + iconPosition: { + description: 'Where the icon should be shown in switch.', + type: 'IdsSwitchIconPositionType', + default: defaultConfig.iconPosition, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSwitchIconPosition), + }, + labelPosition: { + description: 'Where the label should be shown in switch.', + type: 'IdsSwitchLabelPositionType', + default: defaultConfig.labelPosition, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSwitchLabelPosition), + }, + }; + + public defaults = getDefaultFromDemoConfig(this.inputControlConfig); + public groupDefaults = getDefaultFromDemoConfig(this.groupInputControlConfig); + + public model: SwitchInputControls = { ...this.defaults }; + public groupModel: SwitchGroupInputControls = { ...this.groupDefaults }; + + public value = true; + + public groupValue = [ + true, + true, + true, + ]; + + public reset(): void { + this.value = true; + this.model = { ...this.defaults }; + this.groupValue = [ + true, + true, + true, + ]; + this.groupModel = { ...this.groupDefaults }; + } +} diff --git a/projects/demo/src/app/pages/tab/tab-demo.component.html b/projects/demo/src/app/pages/tab/tab-demo.component.html index 6d79a991..aba8d451 100644 --- a/projects/demo/src/app/pages/tab/tab-demo.component.html +++ b/projects/demo/src/app/pages/tab/tab-demo.component.html @@ -1,45 +1,78 @@ - - - +
+ - - Tab Content 1 - - - Tab Content 2 - - - Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum consequuntur voluptas numquam omnis dolorum iure, odio debitis sequi - aut fugit magni, ullam eos natus quibusdam, ratione at repellendus harum eum. - - - + + + + Tab Content 1 + + + Tab Content 2 + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum consequuntur voluptas numquam omnis dolorum iure, odio debitis + sequi aut fugit magni, ullam eos natus quibusdam, ratione at repellendus harum eum. + + + + +
- - - +
+ + + @if (_tabDemoService.isLoaded()) { + + } @else { +
Loading...
+ } + +
+ +
+

Props

+ + +
diff --git a/projects/demo/src/app/pages/tab/tab-demo.component.ts b/projects/demo/src/app/pages/tab/tab-demo.component.ts index 32d17634..2fc8eab1 100644 --- a/projects/demo/src/app/pages/tab/tab-demo.component.ts +++ b/projects/demo/src/app/pages/tab/tab-demo.component.ts @@ -1,57 +1,29 @@ +import { TabDemoService } from './tab-demo.service'; + import { IdsTabGroupComponent } from '../../../../../widgets/tab/tab-group.component'; import { ControlTableComponent } from '../../components/control-table/control-table.component'; +import { PropTableComponent } from '../../components/prop-table/prop-table.component'; +import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; +import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; -import { IconService } from '../../core/services/icon.service'; -import { Component, DestroyRef, inject, OnInit } from '@angular/core'; -import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; +import { Component, inject, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; -import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; -import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; -import { IdsOrientation, IdsOrientationType, IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; -import { IDS_TAB_GROUP_DEFAULT_CONFIG_FACTORY, IdsTabComponent, IdsTabGroupPosition, IdsTabGroupPositionType, IdsTabGroupVariant, IdsTabGroupVariantType, IdsTabIndicatorPosition, IdsTabIndicatorPositionType } from '@i-cell/ids-angular/tab'; +import { IdsTabComponent } from '@i-cell/ids-angular/tab'; import { TranslateModule } from '@ngx-translate/core'; -const defaultConfig = IDS_TAB_GROUP_DEFAULT_CONFIG_FACTORY(); - -type TabInputControls = { - size: IdsSizeType, - variant: IdsTabGroupVariantType, - orientation: IdsOrientationType, - stretchTabs: boolean, - tabPosition: IdsTabGroupPositionType, - indicatorPosition: IdsTabIndicatorPositionType, - disabled: boolean, -}; - -type TabHelperControls = { - tabItem1Label: string, - tabItem1Disabled: boolean, - tabItem1LeadingIcon: string, - tabItem1TrailingIcon: string, - tabItem1Id: string, - tabItem2Label: string, - tabItem2Disabled: boolean, - tabItem2LeadingIcon: string, - tabItem2TrailingIcon: string, - tabItem2Id: string, - tabItem3Label: string, - tabItem3Disabled: boolean, - tabItem3LeadingIcon: string, - tabItem3TrailingIcon: string, - tabItem3Id: string, -}; - @Component({ selector: 'app-tab-demo', imports: [ TryoutComponent, - ControlTableComponent, IdsTabGroupComponent, IdsTabComponent, TranslateModule, FormsModule, + DemoAndCodeComponent, + ControlTableComponent, + TryoutControlComponent, + PropTableComponent, ], templateUrl: './tab-demo.component.html', styleUrls: [ @@ -60,191 +32,9 @@ type TabHelperControls = { ], }) export class TabsDemoComponent implements OnInit { - private readonly _iconService = inject(IconService); - private readonly _destroyRef = inject(DestroyRef); - protected _inputControlConfig: DemoControlConfig = { - size: { - description: 'Tab size.', - type: 'IdsSizeType', - default: defaultConfig.size, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - variant: { - description: 'Tab variant.', - type: 'IdsTabGroupVariantType', - default: defaultConfig.variant, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsTabGroupVariant), - }, - orientation: { - description: 'Tab orientation.', - type: 'IdsOrientationType', - default: defaultConfig.orientation, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsOrientation), - }, - tabPosition: { - description: 'Tab header position.', - type: 'IdsTabGroupPositionType', - default: defaultConfig.tabPosition, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsTabGroupPosition), - }, - indicatorPosition: { - description: 'Tab indicator position.', - type: 'IdsTabIndicatorPositionType', - default: defaultConfig.indicatorPosition, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsTabIndicatorPosition), - }, - stretchTabs: { - description: 'Whether the tab header is stretched or not.', - type: 'boolean', - default: defaultConfig.stretchTabs, - control: DemoControl.CHECKBOX, - }, - disabled: { - description: 'Whether the tab group is disabled or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - }; - - protected _helperControlConfig: DemoControlConfig = { - tabItem1Label: { - description: 'Label of Tab', - type: 'string', - default: '-', - demoDefault: 'Tab Label', - }, - tabItem1LeadingIcon: { - description: 'Name of the leading icon.', - type: 'string', - default: '-', - demoDefault: '', - control: DemoControl.SELECT, - list: [], - }, - tabItem1TrailingIcon: { - description: 'Name of the trailing icon.', - type: 'string', - default: '-', - demoDefault: '', - control: DemoControl.SELECT, - list: [], - }, - tabItem1Disabled: { - description: 'Whether the tab item is disabled or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - tabItem1Id: { - description: 'Id of Tab Item 1', - type: 'string', - default: '-', - demoDefault: 'tab-1', - }, - tabItem2Label: { - description: 'Label of Tab', - type: 'string', - default: '-', - demoDefault: 'Tab Label', - }, - tabItem2LeadingIcon: { - description: 'Name of the leading icon.', - type: 'string', - default: '-', - demoDefault: '', - control: DemoControl.SELECT, - list: [], - }, - tabItem2TrailingIcon: { - description: 'Name of the trailing icon.', - type: 'string', - default: '-', - demoDefault: '', - control: DemoControl.SELECT, - list: [], - }, - tabItem2Disabled: { - description: 'Whether the tab item is disabled or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - tabItem2Id: { - description: 'Id of Tab Item 2', - type: 'string', - default: '-', - demoDefault: 'tab-2', - }, - tabItem3Label: { - description: 'Label of Tab', - type: 'string', - default: '-', - demoDefault: 'Tab Label', - }, - tabItem3LeadingIcon: { - description: 'Name of the leading icon.', - type: 'string', - default: '-', - demoDefault: '', - control: DemoControl.SELECT, - list: [], - }, - tabItem3TrailingIcon: { - description: 'Name of the trailing icon.', - type: 'string', - default: '-', - demoDefault: '', - control: DemoControl.SELECT, - list: [], - }, - tabItem3Disabled: { - description: 'Whether the tab item is disabled or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - tabItem3Id: { - description: 'Id of Tab Item 3', - type: 'string', - default: '-', - demoDefault: 'tab-3', - }, - }; + protected _tabDemoService = inject(TabDemoService); public ngOnInit(): void { - this._loadIcons(); - } - - private _loadIcons(): void { - this._iconService.loadIcons().pipe( - takeUntilDestroyed(this._destroyRef), - ).subscribe((list: string[]) => { - this._helperControlConfig = { - ...this._helperControlConfig, - tabItem1LeadingIcon: { ...this._helperControlConfig.tabItem1LeadingIcon, list }, - tabItem1TrailingIcon: { ...this._helperControlConfig.tabItem1TrailingIcon, list }, - tabItem2LeadingIcon: { ...this._helperControlConfig.tabItem2LeadingIcon, list }, - tabItem2TrailingIcon: { ...this._helperControlConfig.tabItem2TrailingIcon, list }, - tabItem3LeadingIcon: { ...this._helperControlConfig.tabItem3LeadingIcon, list }, - tabItem3TrailingIcon: { ...this._helperControlConfig.tabItem3TrailingIcon, list }, - }; - }); - } - - public defaults = getDefaultFromDemoConfig(this._inputControlConfig); - public helperDefaults = getDefaultFromDemoConfig(this._helperControlConfig); - - public model: TabInputControls = { ...this.defaults }; - public helperModel: TabHelperControls = { ...this.helperDefaults }; - - public reset(): void { - this.model = { ...this.defaults }; - this.helperModel = { ...this.helperDefaults }; + this._tabDemoService.loadIcons(); } } diff --git a/projects/demo/src/app/pages/tab/tab-demo.service.ts b/projects/demo/src/app/pages/tab/tab-demo.service.ts new file mode 100644 index 00000000..cc8fe69a --- /dev/null +++ b/projects/demo/src/app/pages/tab/tab-demo.service.ts @@ -0,0 +1,236 @@ +import { IconService } from '../../core/services/icon.service'; + +import { DestroyRef, inject, Injectable, signal } from '@angular/core'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; +import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; +import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; +import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; +import { IdsOrientation, IdsOrientationType, IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; +import { IDS_TAB_GROUP_DEFAULT_CONFIG_FACTORY, IdsTabGroupPosition, IdsTabGroupPositionType, IdsTabGroupVariant, IdsTabGroupVariantType, IdsTabIndicatorPosition, IdsTabIndicatorPositionType } from '@i-cell/ids-angular/tab'; + +const defaultConfig = IDS_TAB_GROUP_DEFAULT_CONFIG_FACTORY(); + +type TabInputControls = { + size: IdsSizeType, + variant: IdsTabGroupVariantType, + orientation: IdsOrientationType, + stretchTabs: boolean, + tabPosition: IdsTabGroupPositionType, + indicatorPosition: IdsTabIndicatorPositionType, + disabled: boolean, +}; + +type TabHelperControls = { + tabItem1Label: string, + tabItem1Disabled: boolean, + tabItem1LeadingIcon: string, + tabItem1TrailingIcon: string, + tabItem1Id: string, + tabItem2Label: string, + tabItem2Disabled: boolean, + tabItem2LeadingIcon: string, + tabItem2TrailingIcon: string, + tabItem2Id: string, + tabItem3Label: string, + tabItem3Disabled: boolean, + tabItem3LeadingIcon: string, + tabItem3TrailingIcon: string, + tabItem3Id: string, +}; +@Injectable({ providedIn: 'root' }) +export class TabDemoService { + private readonly _iconService = inject(IconService); + private readonly _destroyRef = inject(DestroyRef); + public isLoaded = signal(false); + + public inputControlConfig: DemoControlConfig = { + size: { + description: 'Tab size.', + type: 'IdsSizeType', + default: defaultConfig.size, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + variant: { + description: 'Tab variant.', + type: 'IdsTabGroupVariantType', + default: defaultConfig.variant, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsTabGroupVariant), + }, + orientation: { + description: 'Tab orientation.', + type: 'IdsOrientationType', + default: defaultConfig.orientation, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsOrientation), + }, + tabPosition: { + description: 'Tab header position.', + type: 'IdsTabGroupPositionType', + default: defaultConfig.tabPosition, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsTabGroupPosition), + }, + indicatorPosition: { + description: 'Tab indicator position.', + type: 'IdsTabIndicatorPositionType', + default: defaultConfig.indicatorPosition, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsTabIndicatorPosition), + }, + stretchTabs: { + description: 'Whether the tab header is stretched or not.', + type: 'boolean', + default: defaultConfig.stretchTabs, + control: DemoControl.SWITCH, + }, + disabled: { + description: 'Whether the tab group is disabled or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + }; + + public helperControlConfig = signal>({ + tabItem1Label: { + description: 'Label of Tab', + type: 'string', + default: '-', + demoDefault: 'Tab Label', + }, + tabItem1LeadingIcon: { + description: 'Name of the leading icon.', + type: 'string', + default: '-', + demoDefault: '', + control: DemoControl.SELECT, + list: [], + }, + tabItem1TrailingIcon: { + description: 'Name of the trailing icon.', + type: 'string', + default: '-', + demoDefault: '', + control: DemoControl.SELECT, + list: [], + }, + tabItem1Disabled: { + description: 'Whether the tab item is disabled or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + tabItem1Id: { + description: 'Id of Tab Item 1', + type: 'string', + default: '-', + demoDefault: 'tab-1', + }, + tabItem2Label: { + description: 'Label of Tab', + type: 'string', + default: '-', + demoDefault: 'Tab Label', + }, + tabItem2LeadingIcon: { + description: 'Name of the leading icon.', + type: 'string', + default: '-', + demoDefault: '', + control: DemoControl.SELECT, + list: [], + }, + tabItem2TrailingIcon: { + description: 'Name of the trailing icon.', + type: 'string', + default: '-', + demoDefault: '', + control: DemoControl.SELECT, + list: [], + }, + tabItem2Disabled: { + description: 'Whether the tab item is disabled or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + tabItem2Id: { + description: 'Id of Tab Item 2', + type: 'string', + default: '-', + demoDefault: 'tab-2', + }, + tabItem3Label: { + description: 'Label of Tab', + type: 'string', + default: '-', + demoDefault: 'Tab Label', + }, + tabItem3LeadingIcon: { + description: 'Name of the leading icon.', + type: 'string', + default: '-', + demoDefault: '', + control: DemoControl.SELECT, + list: [], + }, + tabItem3TrailingIcon: { + description: 'Name of the trailing icon.', + type: 'string', + default: '-', + demoDefault: '', + control: DemoControl.SELECT, + list: [], + }, + tabItem3Disabled: { + description: 'Whether the tab item is disabled or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + tabItem3Id: { + description: 'Id of Tab Item 3', + type: 'string', + default: '-', + demoDefault: 'tab-3', + }, + }); + + public defaults = getDefaultFromDemoConfig(this.inputControlConfig); + public helperDefaults = getDefaultFromDemoConfig(this.helperControlConfig()); + + public model: TabInputControls = { ...this.defaults }; + public helperModel: TabHelperControls = { ...this.helperDefaults }; + + public loadIcons(): void { + this._iconService + .loadIcons() + .pipe(takeUntilDestroyed(this._destroyRef)) + .subscribe((list: string[]) => { + this.helperControlConfig.update((cfg) => ({ + ...cfg, + tabItem1LeadingIcon: { ...cfg.tabItem1LeadingIcon, list: list }, + tabItem1TrailingIcon: { ...cfg.tabItem1TrailingIcon, list: list }, + tabItem2LeadingIcon: { ...cfg.tabItem2LeadingIcon, list: list }, + tabItem2TrailingIcon: { ...cfg.tabItem2TrailingIcon, list: list }, + tabItem3LeadingIcon: { ...cfg.tabItem3LeadingIcon, list: list }, + tabItem3TrailingIcon: { ...cfg.tabItem3TrailingIcon, list: list }, + })); + + this.helperDefaults = getDefaultFromDemoConfig(this.helperControlConfig()); + this.helperModel = { ...this.helperDefaults }; + + this.isLoaded.set(true); + }); + } + + public reset(): void { + this.defaults = getDefaultFromDemoConfig(this.inputControlConfig); + this.helperDefaults = getDefaultFromDemoConfig(this.helperControlConfig()); + + this.model = { ...this.defaults }; + this.helperModel = { ...this.helperDefaults }; + } +} diff --git a/projects/demo/src/app/pages/table/table-demo.component.html b/projects/demo/src/app/pages/table/table-demo.component.html index cdca4f0f..3ccf5428 100644 --- a/projects/demo/src/app/pages/table/table-demo.component.html +++ b/projects/demo/src/app/pages/table/table-demo.component.html @@ -1,55 +1,64 @@ - -
-
- - -
- - - {{ row.symbol }} - - {{ value | translate }} - - {{ value | translate }} - {{ row?.summary }} - - + +
+ +
+
+ + +
+ + + {{ row.symbol }} + + {{ value | translate }} + + {{ + value | translate + }} + {{ row?.summary }} + + +
+
- - +
+ + + +
+ +
+

Props

+ + +
diff --git a/projects/demo/src/app/pages/table/table-demo.component.ts b/projects/demo/src/app/pages/table/table-demo.component.ts index 0de033c4..8ab253f5 100644 --- a/projects/demo/src/app/pages/table/table-demo.component.ts +++ b/projects/demo/src/app/pages/table/table-demo.component.ts @@ -2,46 +2,26 @@ import { PeriodicTableElement } from './periodic-table-element'; import { TableDemoService } from './table-demo.service'; import { ControlTableComponent } from '../../components/control-table/control-table.component'; +import { PropTableComponent } from '../../components/prop-table/prop-table.component'; +import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; +import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; import { Component, DestroyRef, inject, Injectable, OnInit, viewChild, ViewEncapsulation } from '@angular/core'; import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop'; -import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; -import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; -import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; import { IdsButtonComponent } from '@i-cell/ids-angular/button'; -import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; import { IdsPaginatorComponent } from '@i-cell/ids-angular/paginator'; -import { IDS_TABLE_DEFAULT_CONFIG_FACTORY, IdsTableAppearance, IdsTableAppearanceType, IdsTableCellRenderer, IdsTableCellTemplateDirective, IdsTableColumnDef, IdsTableComponent, IdsTableIntl, IdsTableRequestFactory, IdsTableRowKeydownEvent, IdsTableVariant, IdsTableVariantType, ServerSideDataSource } from '@i-cell/ids-angular/table'; +import { IdsTableCellRenderer, IdsTableCellTemplateDirective, IdsTableColumnDef, IdsTableComponent, IdsTableIntl, IdsTableRequestFactory, IdsTableRowKeydownEvent, ServerSideDataSource } from '@i-cell/ids-angular/table'; import { TranslateModule, TranslateService } from '@ngx-translate/core'; import { map, tap } from 'rxjs'; -type TableInputControls = { - appearance: IdsTableAppearanceType, - size: IdsSizeType, - variant: IdsTableVariantType, - fixedHeader: boolean; - enableRowSelection: boolean; - clearSelectionOnChange: boolean; - enableSorting: boolean; - masterDetail: boolean; - showDetailHeader: boolean; - detailStickyColumns: boolean; - withBorder: boolean; - noRowsToShowOverlayBelow: boolean; -}; - -const defaultConfig = IDS_TABLE_DEFAULT_CONFIG_FACTORY(); -const zeroCelsiusInKelvin = 273.15; - -const translateLabelsToIntlPropNames = { +export const translateLabelsToIntlPropNames = { 'TABLE.ARIA.HEADER_SELECTOR': 'headerSelectorAriaLabel', 'TABLE.ARIA.ROW_SELECTOR': 'rowSelectorAriaLabel', 'TABLE.LABEL.DETAIL_HEADER': 'detailHeaderLabel', } as const; -type TranslateLabelsToIntlPropNamesType = typeof translateLabelsToIntlPropNames; -type TranslateLabelsType = keyof TranslateLabelsToIntlPropNamesType; - +export type TranslateLabelsToIntlPropNamesType = typeof translateLabelsToIntlPropNames; +export type TranslateLabelsType = keyof TranslateLabelsToIntlPropNamesType; @Component({ selector: 'ids-table-translate-cell-renderer', imports: [TranslateModule], @@ -67,13 +47,16 @@ export class TableDemoTableIntl extends IdsTableIntl { @Component({ selector: 'app-table-demo', imports: [ - ControlTableComponent, IdsButtonComponent, IdsPaginatorComponent, IdsTableCellTemplateDirective, IdsTableComponent, TranslateModule, TryoutComponent, + DemoAndCodeComponent, + TryoutControlComponent, + ControlTableComponent, + PropTableComponent, ], templateUrl: './table-demo.component.html', styleUrl: './table-demo.component.scss', @@ -86,144 +69,15 @@ export class TableDemoTableIntl extends IdsTableIntl { ], }) export class TableDemoComponent implements OnInit { - private _tableDemoService = inject(TableDemoService); - private _intl = inject(IdsTableIntl); - private _destroyRef = inject(DestroyRef); - protected _translate = inject(TranslateService); + protected _tableDemoService = inject(TableDemoService); private _table = viewChild(IdsTableComponent); + private _intl = inject(IdsTableIntl); + private _destroyRef = inject(DestroyRef); private _requestFactory: IdsTableRequestFactory = (paginationData, sortInfo) => this._tableDemoService.getPeriodicTable(paginationData, sortInfo); - private _meltNumberFormat = this._getMeltNumberFormat(); - - protected _colDefs: IdsTableColumnDef[] = [ - { - id: 'name', - label: 'TABLE.COL.NAME', - headerCellRenderer: 'translate1', - field: 'name', - sticky: true, - sortable: true, - orderName: 'name', - identifier: true, - }, - { - id: 'symbol', - label: 'TABLE.COL.SYMBOL', - headerCellRenderer: 'translate2', - cellRenderer: 'symbol', - }, - { - id: 'number', - label: 'TABLE.COL.NUMBER', - headerCellRenderer: TranslateCellRendererComponent, - field: 'number', - cellRenderer: 'numeric', - }, - { - id: 'atomicMass', - label: 'TABLE.COL.ATOMIC_MASS', - headerCellRenderer: TranslateCellRendererComponent, - field: 'atomicMass', - cellRenderer: 'numeric', - sortable: true, - orderName: 'atomicMass', - }, - { - id: 'melt', - label: 'TABLE.COL.MELT', - headerCellRenderer: TranslateCellRendererComponent, - value: (rowData): string => (Number.isFinite(rowData.melt) ? this._meltNumberFormat.format(rowData.melt! - zeroCelsiusInKelvin) : ''), - cellClasses: 'table-demo_cell__numeric', - }, - { - id: 'summary', - label: 'TABLE.COL.SUMMARY', - field: 'summary', - visible: false, - }, - ]; - - protected _inputControlConfig: DemoControlConfig = { - appearance: { - description: 'Table appearance.', - type: 'IdsTableAppearanceType', - default: defaultConfig.appearance, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsTableAppearance), - }, - size: { - description: 'Table size.', - type: 'IdsSizeType', - default: defaultConfig.size, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - variant: { - description: 'Table variant.', - type: 'IdsTableVariantType', - default: defaultConfig.variant, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsTableVariant), - }, - fixedHeader: { - description: 'Whether the header is fixed to the top or not.', - type: 'boolean', - default: defaultConfig.fixedHeader, - control: DemoControl.CHECKBOX, - }, - enableRowSelection: { - description: 'Whether the row selection is disabled or not.', - type: 'boolean', - default: defaultConfig.enableRowSelection, - control: DemoControl.CHECKBOX, - }, - clearSelectionOnChange: { - description: 'Whether to clear row selection if the table\'s content changes or not.', - type: 'boolean', - default: defaultConfig.clearSelectionOnChange, - control: DemoControl.CHECKBOX, - }, - enableSorting: { - description: 'Whether the sorting feature is disabled or not.', - type: 'boolean', - default: defaultConfig.enableSorting, - control: DemoControl.CHECKBOX, - }, - masterDetail: { - description: 'Whether the master-detail feature is disabled or not.', - type: 'boolean', - default: defaultConfig.masterDetail, - control: DemoControl.CHECKBOX, - }, - showDetailHeader: { - description: 'Whether to show the master-detail column label or not.', - type: 'boolean', - default: defaultConfig.showDetailHeader, - control: DemoControl.CHECKBOX, - }, - detailStickyColumns: { - description: 'Whether to span the detail cell to the table\'s full width or don\'t span sticky columns.', - type: 'boolean', - default: defaultConfig.detailStickyColumns, - control: DemoControl.CHECKBOX, - }, - withBorder: { - description: 'Whether to show the table\'s border or not.', - type: 'boolean', - default: defaultConfig.withBorder, - control: DemoControl.CHECKBOX, - }, - noRowsToShowOverlayBelow: { - description: 'Whether to render a "no rows to show" overlay below the table or as a row in the table.', - type: 'boolean', - default: defaultConfig.noRowsToShowOverlayBelow, - control: DemoControl.CHECKBOX, - }, - }; - protected _dataSource = new ServerSideDataSource(this._requestFactory); protected _totalRows = toSignal( this._dataSource.pageInfo$.pipe( @@ -237,15 +91,15 @@ export class TableDemoComponent implements OnInit { public ngOnInit(): void { this._dataSource.pageIndex$.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((pageIndex) => this._currentPageIndex = pageIndex); - this._translate.stream(Object.keys(translateLabelsToIntlPropNames)).pipe( + this._tableDemoService.translate.stream(Object.keys(translateLabelsToIntlPropNames)).pipe( tap((translations: Record) => { (Object.keys(translations) as TranslateLabelsType[]).forEach( (key) => this._intl[translateLabelsToIntlPropNames[key]] = translations[key], ); - this._intl.numberFormat = new Intl.NumberFormat(this._translate.currentLang, { + this._intl.numberFormat = new Intl.NumberFormat(this._tableDemoService.translate.currentLang, { ...this._intl.numberFormat.resolvedOptions(), }); - this._meltNumberFormat = this._getMeltNumberFormat(); + this._tableDemoService.meltNumberFormat = this._tableDemoService.getMeltNumberFormat(); queueMicrotask(() => { this._intl.changes.next(); @@ -275,20 +129,4 @@ export class TableDemoComponent implements OnInit { protected _hasDetailRow(index: number, rowData: PeriodicTableElement): boolean { return !!rowData.summary; } - - protected _defaults = getDefaultFromDemoConfig(this._inputControlConfig); - - protected _model: TableInputControls = { ...this._defaults }; - - protected _reset(): void { - this._model = { ...this._defaults }; - } - - private _getMeltNumberFormat(): Intl.NumberFormat { - return new Intl.NumberFormat(this._translate.currentLang, { - style: 'unit', - unit: 'celsius', - }); - } - } diff --git a/projects/demo/src/app/pages/table/table-demo.service.ts b/projects/demo/src/app/pages/table/table-demo.service.ts index a4427328..71d23832 100644 --- a/projects/demo/src/app/pages/table/table-demo.service.ts +++ b/projects/demo/src/app/pages/table/table-demo.service.ts @@ -1,22 +1,55 @@ import { PeriodicTableElement } from './periodic-table-element'; +import { TranslateCellRendererComponent } from './table-demo.component'; import { environment } from '../../../environments/environment'; import { HttpClient } from '@angular/common/http'; import { inject, Injectable } from '@angular/core'; -import { compare } from '@i-cell/ids-angular/core'; -import { IdsTableRequestPaginationData, IdsTableResponseData, IdsTableSortDirection, IdsTableSortInfo } from '@i-cell/ids-angular/table'; +import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; +import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; +import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; +import { compare, IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; +import { IDS_TABLE_DEFAULT_CONFIG_FACTORY, IdsTableAppearance, IdsTableAppearanceType, IdsTableColumnDef, IdsTableRequestPaginationData, IdsTableResponseData, IdsTableSortDirection, IdsTableSortInfo, IdsTableVariant, IdsTableVariantType } from '@i-cell/ids-angular/table'; +import { TranslateService } from '@ngx-translate/core'; import { map, Observable } from 'rxjs'; +export type TableInputControls = { + appearance: IdsTableAppearanceType, + size: IdsSizeType, + variant: IdsTableVariantType, + fixedHeader: boolean; + enableRowSelection: boolean; + clearSelectionOnChange: boolean; + enableSorting: boolean; + masterDetail: boolean; + showDetailHeader: boolean; + detailStickyColumns: boolean; + withBorder: boolean; + noRowsToShowOverlayBelow: boolean; +}; + +const defaultConfig = IDS_TABLE_DEFAULT_CONFIG_FACTORY(); +const zeroCelsiusInKelvin = 273.15; +const pageDefaultRows = 10; +const pageDefaultPage = 1; + +export const translateLabelsToIntlPropNames = { + 'TABLE.ARIA.HEADER_SELECTOR': 'headerSelectorAriaLabel', + 'TABLE.ARIA.ROW_SELECTOR': 'rowSelectorAriaLabel', + 'TABLE.LABEL.DETAIL_HEADER': 'detailHeaderLabel', +} as const; + +export type TranslateLabelsToIntlPropNamesType = typeof translateLabelsToIntlPropNames; +export type TranslateLabelsType = keyof TranslateLabelsToIntlPropNamesType; + @Injectable({ providedIn: 'root' }) export class TableDemoService { private _http = inject(HttpClient); public getPeriodicTable(paginationData: IdsTableRequestPaginationData | null, sortInfo: IdsTableSortInfo | null): Observable> { - // eslint-disable-next-line no-magic-numbers - const rows = paginationData?.rows || 10; - const page = paginationData?.page || 1; + const rows = paginationData?.rows || pageDefaultRows; + const page = paginationData?.page || pageDefaultPage; return this._http.get<{ elements: PeriodicTableElement[] }>(`${environment.baseUrl}/assets/json/periodic-table.json`).pipe( map((result) => ({ @@ -51,4 +84,150 @@ export class TableDemoService { private _getPropValue(obj: object, propName: string): unknown { return Object.hasOwn(obj, propName) ? (obj as unknown as Record)[propName] : ''; } + + public translate = inject(TranslateService); + + public meltNumberFormat = this.getMeltNumberFormat(); + + public getMeltNumberFormat(): Intl.NumberFormat { + return new Intl.NumberFormat(this.translate.currentLang, { + style: 'unit', + unit: 'celsius', + }); + } + + public colDefs: IdsTableColumnDef[] = [ + { + id: 'name', + label: 'TABLE.COL.NAME', + headerCellRenderer: 'translate1', + field: 'name', + sticky: true, + sortable: true, + orderName: 'name', + identifier: true, + }, + { + id: 'symbol', + label: 'TABLE.COL.SYMBOL', + headerCellRenderer: 'translate2', + cellRenderer: 'symbol', + }, + { + id: 'number', + label: 'TABLE.COL.NUMBER', + headerCellRenderer: TranslateCellRendererComponent, + field: 'number', + cellRenderer: 'numeric', + }, + { + id: 'atomicMass', + label: 'TABLE.COL.ATOMIC_MASS', + headerCellRenderer: TranslateCellRendererComponent, + field: 'atomicMass', + cellRenderer: 'numeric', + sortable: true, + orderName: 'atomicMass', + }, + { + id: 'melt', + label: 'TABLE.COL.MELT', + headerCellRenderer: TranslateCellRendererComponent, + value: (rowData): string => (Number.isFinite(rowData.melt) ? this.meltNumberFormat.format(rowData.melt! - zeroCelsiusInKelvin) : ''), + cellClasses: 'table-demo_cell__numeric', + }, + { + id: 'summary', + label: 'TABLE.COL.SUMMARY', + field: 'summary', + visible: false, + }, + ]; + + public inputControlConfig: DemoControlConfig = { + appearance: { + description: 'Table appearance.', + type: 'IdsTableAppearanceType', + default: defaultConfig.appearance, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsTableAppearance), + }, + size: { + description: 'Table size.', + type: 'IdsSizeType', + default: defaultConfig.size, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + variant: { + description: 'Table variant.', + type: 'IdsTableVariantType', + default: defaultConfig.variant, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsTableVariant), + }, + fixedHeader: { + description: 'Whether the header is fixed to the top or not.', + type: 'boolean', + default: defaultConfig.fixedHeader, + control: DemoControl.SWITCH, + }, + enableRowSelection: { + description: 'Whether the row selection is disabled or not.', + type: 'boolean', + default: defaultConfig.enableRowSelection, + control: DemoControl.SWITCH, + }, + clearSelectionOnChange: { + description: 'Whether to clear row selection if the table\'s content changes or not.', + type: 'boolean', + default: defaultConfig.clearSelectionOnChange, + control: DemoControl.SWITCH, + }, + enableSorting: { + description: 'Whether the sorting feature is disabled or not.', + type: 'boolean', + default: defaultConfig.enableSorting, + control: DemoControl.SWITCH, + }, + masterDetail: { + description: 'Whether the master-detail feature is disabled or not.', + type: 'boolean', + default: defaultConfig.masterDetail, + control: DemoControl.SWITCH, + }, + showDetailHeader: { + description: 'Whether to show the master-detail column label or not.', + type: 'boolean', + default: defaultConfig.showDetailHeader, + control: DemoControl.SWITCH, + }, + detailStickyColumns: { + description: 'Whether to span the detail cell to the table\'s full width or don\'t span sticky columns.', + type: 'boolean', + default: defaultConfig.detailStickyColumns, + control: DemoControl.SWITCH, + }, + withBorder: { + description: 'Whether to show the table\'s border or not.', + type: 'boolean', + default: defaultConfig.withBorder, + control: DemoControl.SWITCH, + }, + noRowsToShowOverlayBelow: { + description: 'Whether to render a "no rows to show" overlay below the table or as a row in the table.', + type: 'boolean', + default: defaultConfig.noRowsToShowOverlayBelow, + control: DemoControl.SWITCH, + }, + }; + + public defaults = getDefaultFromDemoConfig(this.inputControlConfig); + + public model: TableInputControls = { ...this.defaults }; + + public reset(): void { + this.model = { ...this.defaults }; + } + } diff --git a/projects/demo/src/app/pages/tag/tag-demo.component.html b/projects/demo/src/app/pages/tag/tag-demo.component.html index 8c1575a6..4234dabb 100644 --- a/projects/demo/src/app/pages/tag/tag-demo.component.html +++ b/projects/demo/src/app/pages/tag/tag-demo.component.html @@ -1,68 +1,94 @@ - -
-
-

{{ "COMMON.NON-INTERACTIVE" | translate }}

- - @if (helperModel.hasLeadingIcon) { - -
+ +
+ +
+
+

{{ "COMMON.NON-INTERACTIVE" | translate }}

+ + @if (_tagDemoService.helperModel.hasLeadingIcon) { + +
-
-

{{ "COMMON.INTERACTIVE" | translate }} (link)

- - @if (helperModel.hasLeadingIcon) { - -
+
+

{{ "COMMON.INTERACTIVE" | translate }} (link)

+ + @if (_tagDemoService.helperModel.hasLeadingIcon) { + +
-
-

{{ "COMMON.GROUPED" | translate }}

- - Primary - Secondary - Success - -
+
+

{{ "COMMON.GROUPED" | translate }}

+ + Primary + Secondary + Success + +
+
+
- - - - +
+ + + + + +
+ +
+

Props

+ + +
diff --git a/projects/demo/src/app/pages/tag/tag-demo.component.ts b/projects/demo/src/app/pages/tag/tag-demo.component.ts index f7266ef8..96015ac0 100644 --- a/projects/demo/src/app/pages/tag/tag-demo.component.ts +++ b/projects/demo/src/app/pages/tag/tag-demo.component.ts @@ -1,45 +1,30 @@ +import { TagDemoService } from './tag-demo.service'; + import { ControlTableComponent } from '../../components/control-table/control-table.component'; +import { PropTableComponent } from '../../components/prop-table/prop-table.component'; +import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; +import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; -import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; -import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; -import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; import { IdsIconComponent } from '@i-cell/ids-angular/icon'; -import { IdsTagComponent, IdsTagAppearanceType, IdsTagVariantType, IdsTagVariant, IDS_TAG_DEFAULT_CONFIG_FACTORY, IdsTagAppearance, IDS_TAG_GROUP_DEFAULT_CONFIG_FACTORY, IdsTagGroupComponent } from '@i-cell/ids-angular/tag'; +import { IdsTagComponent, IdsTagGroupComponent } from '@i-cell/ids-angular/tag'; import { TranslateModule } from '@ngx-translate/core'; -const defaultConfig = IDS_TAG_DEFAULT_CONFIG_FACTORY(); -const defaultGroupConfig = IDS_TAG_GROUP_DEFAULT_CONFIG_FACTORY(); - -type TagInputControls = { - appearance: IdsTagAppearanceType, - size: IdsSizeType, - variant: IdsTagVariantType, -}; - -type TagHelperControls = { - hasLeadingIcon: boolean, - hasTrailingIcon: boolean, -}; - -type TagGroupInputControls = { - appearance: IdsTagAppearanceType, - size: IdsSizeType, -}; - @Component({ selector: 'app-tag-demo', imports: [ TryoutComponent, - ControlTableComponent, IdsTagComponent, IdsTagGroupComponent, IdsIconComponent, TranslateModule, FormsModule, + DemoAndCodeComponent, + TryoutControlComponent, + ControlTableComponent, + PropTableComponent, ], templateUrl: './tag-demo.component.html', styleUrls: [ @@ -48,77 +33,5 @@ type TagGroupInputControls = { ], }) export class TagDemoComponent { - protected _inputControlConfig: DemoControlConfig = { - appearance: { - description: 'Appearance of the tag.', - type: 'IdsTagAppearanceType', - default: defaultConfig.appearance, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsTagAppearance), - }, - size: { - description: 'Size of the tag.', - type: 'IdsSizeType', - default: defaultConfig.size, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - variant: { - description: 'Variant of the tag.', - type: 'IdsTagVariantType', - default: defaultConfig.variant, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsTagVariant), - }, - }; - - protected _helperControlConfig: DemoControlConfig = { - hasLeadingIcon: { - description: 'Whether the tag has leading icon or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - hasTrailingIcon: { - description: 'Whether the tag has trailing icon or not.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - }; - - protected _groupInputControlConfig: DemoControlConfig = { - appearance: { - description: 'Appearance of the tag.', - type: 'IdsTagAppearanceType', - default: defaultGroupConfig.appearance, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsTagAppearance), - }, - size: { - description: 'Size of the tag.', - type: 'IdsSizeType', - default: defaultGroupConfig.size, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - }; - - public defaults = getDefaultFromDemoConfig(this._inputControlConfig); - public helperDefaults = getDefaultFromDemoConfig(this._helperControlConfig); - public groupDefaults = getDefaultFromDemoConfig(this._groupInputControlConfig); - - public model: TagInputControls = { ...this.defaults }; - public helperModel: TagHelperControls = { ...this.helperDefaults }; - public groupModel: TagGroupInputControls = { ...this.groupDefaults }; - - public onClick(tagName: string): void { - console.info(`${tagName} tag clicked`); - } - - public reset(): void { - this.model = { ...this.defaults }; - this.helperModel = { ...this.helperDefaults }; - this.groupModel = { ...this.groupDefaults }; - } + protected _tagDemoService = inject(TagDemoService); } diff --git a/projects/demo/src/app/pages/tag/tag-demo.service.ts b/projects/demo/src/app/pages/tag/tag-demo.service.ts new file mode 100644 index 00000000..03a2da70 --- /dev/null +++ b/projects/demo/src/app/pages/tag/tag-demo.service.ts @@ -0,0 +1,101 @@ +import { Injectable } from '@angular/core'; +import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; +import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; +import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; +import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; +import { IDS_TAG_DEFAULT_CONFIG_FACTORY, IDS_TAG_GROUP_DEFAULT_CONFIG_FACTORY, IdsTagAppearance, IdsTagAppearanceType, IdsTagVariant, IdsTagVariantType } from '@i-cell/ids-angular/tag'; + +const defaultConfig = IDS_TAG_DEFAULT_CONFIG_FACTORY(); +const defaultGroupConfig = IDS_TAG_GROUP_DEFAULT_CONFIG_FACTORY(); + +type TagInputControls = { + appearance: IdsTagAppearanceType, + size: IdsSizeType, + variant: IdsTagVariantType, +}; + +type TagHelperControls = { + hasLeadingIcon: boolean, + hasTrailingIcon: boolean, +}; + +type TagGroupInputControls = { + appearance: IdsTagAppearanceType, + size: IdsSizeType, +}; +@Injectable() +export class TagDemoService { + public readonly inputControlConfig: DemoControlConfig = { + appearance: { + description: 'Appearance of the tag.', + type: 'IdsTagAppearanceType', + default: defaultConfig.appearance, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsTagAppearance), + }, + size: { + description: 'Size of the tag.', + type: 'IdsSizeType', + default: defaultConfig.size, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + variant: { + description: 'Variant of the tag.', + type: 'IdsTagVariantType', + default: defaultConfig.variant, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsTagVariant), + }, + }; + + public readonly helperControlConfig: DemoControlConfig = { + hasLeadingIcon: { + description: 'Whether the tag has leading icon or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + hasTrailingIcon: { + description: 'Whether the tag has trailing icon or not.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + }; + + public readonly groupInputControlConfig: DemoControlConfig = { + appearance: { + description: 'Appearance of the tag.', + type: 'IdsTagAppearanceType', + default: defaultGroupConfig.appearance, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsTagAppearance), + }, + size: { + description: 'Size of the tag.', + type: 'IdsSizeType', + default: defaultGroupConfig.size, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + }; + + public defaults = getDefaultFromDemoConfig(this.inputControlConfig); + public helperDefaults = getDefaultFromDemoConfig(this.helperControlConfig); + public groupDefaults = getDefaultFromDemoConfig(this.groupInputControlConfig); + + public model: TagInputControls = { ...this.defaults }; + public helperModel: TagHelperControls = { ...this.helperDefaults }; + public groupModel: TagGroupInputControls = { ...this.groupDefaults }; + + public onClick(tagName: string): void { + console.info(`${tagName} tag clicked`); + } + + public reset(): void { + this.model = { ...this.defaults }; + this.helperModel = { ...this.helperDefaults }; + this.groupModel = { ...this.groupDefaults }; + } +} diff --git a/projects/demo/src/app/pages/tooltip/tooltip-demo.component.html b/projects/demo/src/app/pages/tooltip/tooltip-demo.component.html index 7dfb290e..561fbabb 100644 --- a/projects/demo/src/app/pages/tooltip/tooltip-demo.component.html +++ b/projects/demo/src/app/pages/tooltip/tooltip-demo.component.html @@ -1,25 +1,48 @@ - -
- -

Hover over the button to show the tooltip on {{ model.position }}.

-

Hover out from the button to hide the tooltip with hideDelay, or click outside tooltip to hide immediately.

+
+ +

Hover over the button to show the tooltip on {{ _tooltipDemoService.model.position }}.

+

Hover out from the button to hide the tooltip with hideDelay, or click outside tooltip to hide immediately.

+
+
- - +
+ + + +
+ +
+

Props

+ + +
diff --git a/projects/demo/src/app/pages/tooltip/tooltip-demo.component.ts b/projects/demo/src/app/pages/tooltip/tooltip-demo.component.ts index 2aa5aba2..99b57763 100644 --- a/projects/demo/src/app/pages/tooltip/tooltip-demo.component.ts +++ b/projects/demo/src/app/pages/tooltip/tooltip-demo.component.ts @@ -1,40 +1,29 @@ +import { TooltipDemoService } from './tooltip-demo.service'; + import { ControlTableComponent } from '../../components/control-table/control-table.component'; +import { PropTableComponent } from '../../components/prop-table/prop-table.component'; +import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; +import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; -import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; -import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; import { IdsButtonComponent } from '@i-cell/ids-angular/button'; -import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; -import { IDS_TOOLTIP_DEFAULT_CONFIG_FACTORY, IdsTooltipDirective, IdsTooltipPosition, IdsTooltipPositionType, IdsTooltipTextAlign, IdsTooltipTouchGestures, IdsTooltipVariant, IdsTooltipVariantType } from '@i-cell/ids-angular/tooltip'; +import { IdsTooltipDirective } from '@i-cell/ids-angular/tooltip'; import { TranslateModule } from '@ngx-translate/core'; -type TooltipInputControls = { - tooltipText: string, - position: IdsTooltipPositionType, - size: IdsSizeType, - variant: IdsTooltipVariantType, - showDelay: number, - hideDelay: number, - disabled: boolean, - touchGestures: IdsTooltipTouchGestures, - textAlign: IdsTooltipTextAlign, - showPointer: boolean, -}; - -const defaultConfig = IDS_TOOLTIP_DEFAULT_CONFIG_FACTORY(); - @Component({ selector: 'app-tooltip-demo', imports: [ TryoutComponent, - ControlTableComponent, IdsTooltipDirective, IdsButtonComponent, TranslateModule, FormsModule, + DemoAndCodeComponent, + TryoutControlComponent, + ControlTableComponent, + PropTableComponent, ], templateUrl: './tooltip-demo.component.html', styleUrls: [ @@ -43,90 +32,5 @@ const defaultConfig = IDS_TOOLTIP_DEFAULT_CONFIG_FACTORY(); ], }) export class TooltipDemoComponent { - protected _inputControlConfig: DemoControlConfig = { - tooltipText: { - description: 'The text displayed inside the tooltip.', - type: 'string', - default: '-', - - demoDefault: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.', - control: DemoControl.TEXT, - }, - position: { - description: 'The position of the tooltip relative to the target element.', - type: 'IdsTooltipPositionType', - default: defaultConfig.position, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsTooltipPosition), - }, - size: { - description: 'The size of the tooltip.', - type: 'IdsSizeType', - default: defaultConfig.size, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - variant: { - description: 'The variant or style of the tooltip.', - type: 'IdsTooltipVariantType', - default: defaultConfig.variant, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsTooltipVariant), - }, - showDelay: { - description: 'The delay (in milliseconds) before the tooltip appears after hovering.', - type: 'number', - default: defaultConfig.showDelay, - control: DemoControl.TEXT, - }, - hideDelay: { - description: 'The delay (in milliseconds) before the tooltip disappears after losing focus.', - type: 'number', - default: defaultConfig.hideDelay, - control: DemoControl.TEXT, - }, - disabled: { - description: 'Determines if the tooltip is disabled.', - type: 'boolean', - default: false, - control: DemoControl.CHECKBOX, - }, - touchGestures: { - description: 'Specifies the touch gestures behavior for the tooltip (auto, on, off).', - type: 'IdsTooltipTouchGestures', - default: 'auto', - control: DemoControl.SELECT, - list: [ - 'auto', - 'on', - 'off', - ], - }, - textAlign: { - description: 'The text alignment inside the tooltip.', - type: 'IdsTooltipTextAlign', - default: 'auto', - control: DemoControl.SELECT, - list: [ - 'auto', - 'center', - 'left', - 'right', - ], - }, - showPointer: { - description: 'Whether to show tooltip pointer or not.', - type: 'boolean', - default: defaultConfig.showPointer, - control: DemoControl.CHECKBOX, - }, - }; - - public defaults = getDefaultFromDemoConfig(this._inputControlConfig); - - public model: TooltipInputControls = { ...this.defaults }; - - public reset(): void { - this.model = { ...this.defaults }; - } + protected _tooltipDemoService = inject(TooltipDemoService); } diff --git a/projects/demo/src/app/pages/tooltip/tooltip-demo.service.ts b/projects/demo/src/app/pages/tooltip/tooltip-demo.service.ts new file mode 100644 index 00000000..46cdb8ae --- /dev/null +++ b/projects/demo/src/app/pages/tooltip/tooltip-demo.service.ts @@ -0,0 +1,110 @@ +import { Injectable } from '@angular/core'; +import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; +import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; +import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; +import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; +import { IDS_TOOLTIP_DEFAULT_CONFIG_FACTORY, IdsTooltipPosition, IdsTooltipPositionType, IdsTooltipTextAlign, IdsTooltipTouchGestures, IdsTooltipVariant, IdsTooltipVariantType } from '@i-cell/ids-angular/tooltip'; + +type TooltipInputControls = { + tooltipText: string, + position: IdsTooltipPositionType, + size: IdsSizeType, + variant: IdsTooltipVariantType, + showDelay: number, + hideDelay: number, + disabled: boolean, + touchGestures: IdsTooltipTouchGestures, + textAlign: IdsTooltipTextAlign, + showPointer: boolean, +}; + +const defaultConfig = IDS_TOOLTIP_DEFAULT_CONFIG_FACTORY(); +@Injectable() +export class TooltipDemoService { + public readonly inputControlConfig: DemoControlConfig = { + tooltipText: { + description: 'The text displayed inside the tooltip.', + type: 'string', + default: '-', + + demoDefault: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.', + control: DemoControl.TEXT, + }, + position: { + description: 'The position of the tooltip relative to the target element.', + type: 'IdsTooltipPositionType', + default: defaultConfig.position, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsTooltipPosition), + }, + size: { + description: 'The size of the tooltip.', + type: 'IdsSizeType', + default: defaultConfig.size, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + variant: { + description: 'The variant or style of the tooltip.', + type: 'IdsTooltipVariantType', + default: defaultConfig.variant, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsTooltipVariant), + }, + showDelay: { + description: 'The delay (in milliseconds) before the tooltip appears after hovering.', + type: 'number', + default: defaultConfig.showDelay, + control: DemoControl.TEXT, + }, + hideDelay: { + description: 'The delay (in milliseconds) before the tooltip disappears after losing focus.', + type: 'number', + default: defaultConfig.hideDelay, + control: DemoControl.TEXT, + }, + disabled: { + description: 'Determines if the tooltip is disabled.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + touchGestures: { + description: 'Specifies the touch gestures behavior for the tooltip (auto, on, off).', + type: 'IdsTooltipTouchGestures', + default: 'auto', + control: DemoControl.SELECT, + list: [ + 'auto', + 'on', + 'off', + ], + }, + textAlign: { + description: 'The text alignment inside the tooltip.', + type: 'IdsTooltipTextAlign', + default: 'auto', + control: DemoControl.SELECT, + list: [ + 'auto', + 'center', + 'left', + 'right', + ], + }, + showPointer: { + description: 'Whether to show tooltip pointer or not.', + type: 'boolean', + default: defaultConfig.showPointer, + control: DemoControl.SWITCH, + }, + }; + + public defaults = getDefaultFromDemoConfig(this.inputControlConfig); + + public model: TooltipInputControls = { ...this.defaults }; + + public reset(): void { + this.model = { ...this.defaults }; + } +} diff --git a/projects/demo/src/assets/fonts/I-DS-font-icon-default.json b/projects/demo/src/assets/fonts/I-DS-font-icon-default.json index e263886c..0aa5e0fa 100644 --- a/projects/demo/src/assets/fonts/I-DS-font-icon-default.json +++ b/projects/demo/src/assets/fonts/I-DS-font-icon-default.json @@ -1 +1,950 @@ -[{"id":"17056:922","svg":"\n\n\n\n","svgFile":{},"name":"user","ligature":["user"],"unicode":["uEA01"]},{"id":"17056:924","svg":"\n\n\n","svgFile":{},"name":"avatar","ligature":["avatar"],"unicode":["uEA03"]},{"id":"17056:925","svg":"\n\n\n","svgFile":{},"name":"search","ligature":["search"],"unicode":["uEA04"]},{"id":"17056:926","svg":"\n\n\n","svgFile":{},"name":"chevron-down","ligature":["chevron-down"],"unicode":["uEA05"]},{"id":"17056:927","svg":"\n\n\n","svgFile":{},"name":"chevron-up","ligature":["chevron-up"],"unicode":["uEA06"]},{"id":"17056:928","svg":"\n\n\n","svgFile":{},"name":"moon","ligature":["moon"],"unicode":["uEA07"]},{"id":"17056:929","svg":"\n\n\n","svgFile":{},"name":"clock","ligature":["clock"],"unicode":["uEA08"]},{"id":"17056:930","svg":"\n\n\n","svgFile":{},"name":"map-pin","ligature":["map-pin"],"unicode":["uEA09"]},{"id":"17056:931","svg":"\n\n\n\n","svgFile":{},"name":"envelope","ligature":["envelope"],"unicode":["uEA010"]},{"id":"17056:932","svg":"\n\n\n\n","svgFile":{},"name":"camera","ligature":["camera"],"unicode":["uEA011"]},{"id":"17056:933","svg":"\n\n\n","svgFile":{},"name":"arrow-right","ligature":["arrow-right"],"unicode":["uEA012"]},{"id":"17056:934","svg":"\n\n\n","svgFile":{},"name":"arrow-left","ligature":["arrow-left"],"unicode":["uEA013"]},{"id":"17056:935","svg":"\n\n\n","svgFile":{},"name":"chevron-right","ligature":["chevron-right"],"unicode":["uEA014"]},{"id":"17056:936","svg":"\n\n\n","svgFile":{},"name":"chevron-left","ligature":["chevron-left"],"unicode":["uEA015"]},{"id":"17056:937","svg":"\n\n\n","svgFile":{},"name":"chevron-double-left","ligature":["chevron-double-left"],"unicode":["uEA016"]},{"id":"17056:938","svg":"\n\n\n","svgFile":{},"name":"chevron-double-right","ligature":["chevron-double-right"],"unicode":["uEA017"]},{"id":"17056:939","svg":"\n\n\n\n","svgFile":{},"name":"link","ligature":["link"],"unicode":["uEA018"]},{"id":"17056:940","svg":"\n\n\n","svgFile":{},"name":"map","ligature":["map"],"unicode":["uEA019"]},{"id":"17056:941","svg":"\n\n\n\n\n\n\n\n\n\n\n","svgFile":{},"name":"sun","ligature":["sun"],"unicode":["uEA020"]},{"id":"17056:942","svg":"\n\n\n","svgFile":{},"name":"plus","ligature":["plus"],"unicode":["uEA021"]},{"id":"17056:943","svg":"\n\n\n","svgFile":{},"name":"minus","ligature":["minus"],"unicode":["uEA022"]},{"id":"17056:944","svg":"\n\n\n","svgFile":{},"name":"close","ligature":["close"],"unicode":["uEA023"]},{"id":"17056:945","svg":"\n\n\n","svgFile":{},"name":"check","ligature":["check"],"unicode":["uEA024"]},{"id":"17056:946","svg":"\n\n\n","svgFile":{},"name":"check-circle","ligature":["check-circle"],"unicode":["uEA025"]},{"id":"17056:947","svg":"\n\n\n","svgFile":{},"name":"exclamation-triangle","ligature":["exclamation-triangle"],"unicode":["uEA026"]},{"id":"17056:948","svg":"\n\n\n","svgFile":{},"name":"exclamation-circle","ligature":["exclamation-circle"],"unicode":["uEA027"]},{"id":"17056:949","svg":"\n\n\n","svgFile":{},"name":"information","ligature":["information"],"unicode":["uEA028"]},{"id":"17056:952","svg":"\n\n\n\n\n\n\n\n\n\n\n","svgFile":{},"name":"adjustments-horizontal","ligature":["adjustments-horizontal"],"unicode":["uEA029"]},{"id":"17056:953","svg":"\n\n\n","svgFile":{},"name":"bars-3","ligature":["bars-3"],"unicode":["uEA030"]},{"id":"17161:251","svg":"\n\n\n\n\n\n\n\n\n","svgFile":{},"name":"reset","ligature":["reset"],"unicode":["uEA031"]},{"id":"17276:207","svg":"\n\n\n\n\n","svgFile":{},"name":"more-horizontal","ligature":["more-horizontal"],"unicode":["uEA032"]},{"id":"17276:275","svg":"\n\n\n","svgFile":{},"name":"a","ligature":["a"],"unicode":["U0061"]},{"id":"17276:276","svg":"\n\n\n","svgFile":{},"name":"b","ligature":["b"],"unicode":["U0062"]},{"id":"17276:277","svg":"\n\n\n","svgFile":{},"name":"c","ligature":["c"],"unicode":["U0063"]},{"id":"17276:278","svg":"\n\n\n","svgFile":{},"name":"d","ligature":["d"],"unicode":["U0064"]},{"id":"17276:279","svg":"\n\n\n","svgFile":{},"name":"e","ligature":["e"],"unicode":["U0065"]},{"id":"17276:280","svg":"\n\n\n","svgFile":{},"name":"f","ligature":["f"],"unicode":["U0066"]},{"id":"17276:281","svg":"\n\n\n","svgFile":{},"name":"g","ligature":["g"],"unicode":["U0067"]},{"id":"17276:282","svg":"\n\n\n","svgFile":{},"name":"h","ligature":["h"],"unicode":["U0068"]},{"id":"17276:283","svg":"\n\n\n","svgFile":{},"name":"i","ligature":["i"],"unicode":["U0069"]},{"id":"17276:284","svg":"\n\n\n","svgFile":{},"name":"j","ligature":["j"],"unicode":["U006A"]},{"id":"17276:285","svg":"\n\n\n","svgFile":{},"name":"k","ligature":["k"],"unicode":["U006B"]},{"id":"17276:286","svg":"\n\n\n","svgFile":{},"name":"l","ligature":["l"],"unicode":["U006C"]},{"id":"17276:287","svg":"\n\n\n","svgFile":{},"name":"m","ligature":["m"],"unicode":["U006D"]},{"id":"17276:288","svg":"\n\n\n","svgFile":{},"name":"n","ligature":["n"],"unicode":["U006E"]},{"id":"17276:289","svg":"\n\n\n","svgFile":{},"name":"o","ligature":["o"],"unicode":["U006F"]},{"id":"17276:290","svg":"\n\n\n","svgFile":{},"name":"p","ligature":["p"],"unicode":["U0070"]},{"id":"17276:291","svg":"\n\n\n","svgFile":{},"name":"q","ligature":["q"],"unicode":["U0071"]},{"id":"17276:292","svg":"\n\n\n","svgFile":{},"name":"r","ligature":["r"],"unicode":["U0072"]},{"id":"17276:293","svg":"\n\n\n","svgFile":{},"name":"s","ligature":["s"],"unicode":["U0073"]},{"id":"17276:294","svg":"\n\n\n","svgFile":{},"name":"t","ligature":["t"],"unicode":["U0074"]},{"id":"17276:295","svg":"\n\n\n","svgFile":{},"name":"u","ligature":["u"],"unicode":["U0075"]},{"id":"17276:296","svg":"\n\n\n","svgFile":{},"name":"v","ligature":["v"],"unicode":["U0076"]},{"id":"17276:297","svg":"\n\n\n","svgFile":{},"name":"w","ligature":["w"],"unicode":["U0077"]},{"id":"17276:298","svg":"\n\n\n","svgFile":{},"name":"x","ligature":["x"],"unicode":["U0078"]},{"id":"17276:299","svg":"\n\n\n","svgFile":{},"name":"y","ligature":["y"],"unicode":["U0079"]},{"id":"17276:300","svg":"\n\n\n","svgFile":{},"name":"z","ligature":["z"],"unicode":["U007A"]},{"id":"17276:301","svg":"\n\n\n","svgFile":{},"name":"U002D--","ligature":["-"],"unicode":["U002D"]},{"id":"17277:311","svg":"\n\n\n\n\n","svgFile":{},"name":"more-vertical","ligature":["more-vertical"],"unicode":["uEA033"]},{"id":"17314:359","svg":"\n\n\n","svgFile":{},"name":"arrow-down-circle-filled","ligature":["arrow-down-circle-filled"],"unicode":["uEA034"]},{"id":"17314:361","svg":"\n\n\n","svgFile":{},"name":"arrow-down-right","ligature":["arrow-down-right"],"unicode":["uEA036"]},{"id":"17314:363","svg":"\n\n\n\n","svgFile":{},"name":"login","ligature":["login"],"unicode":["uEA039"]},{"id":"17314:365","svg":"\n\n\n","svgFile":{},"name":"arrow-down","ligature":["arrow-down"],"unicode":["uEA038"]},{"id":"17314:367","svg":"\n\n\n","svgFile":{},"name":"arrow-down-left","ligature":["arrow-down-left"],"unicode":["uEA035"]},{"id":"17314:369","svg":"\n\n\n\n","svgFile":{},"name":"arrow-down-tray","ligature":["arrow-down-tray"],"unicode":["uEA037"]},{"id":"17314:371","svg":"\n\n\n\n","svgFile":{},"name":"logout","ligature":["logout"],"unicode":["uEA040"]},{"id":"17314:377","svg":"\n\n\n","svgFile":{},"name":"question-mark-circle-filled","ligature":["question-mark-circle-filled"],"unicode":["uEA0410"]},{"id":"17314:379","svg":"\n\n\n","svgFile":{},"name":"question-mark-circle-filled2","ligature":["question-mark-circle-filled2"],"unicode":["uEA042"]},{"id":"17314:381","svg":"\n\n\n","svgFile":{},"name":"check-circle-filled","ligature":["check-circle-filled"],"unicode":["uEA043"]},{"id":"17314:383","svg":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","svgFile":{},"name":"calendar-days","ligature":["calendar-days"],"unicode":["uEA044"]},{"id":"17314:385","svg":"\n\n\n","svgFile":{},"name":"settings-filled","ligature":["settings-filled"],"unicode":["uEA045"]},{"id":"17314:391","svg":"\n\n\n\n","svgFile":{},"name":"visibility-filled","ligature":["visibility-filled"],"unicode":["uEA047"]},{"id":"17314:393","svg":"\n\n\n\n","svgFile":{},"name":"visibility-off-filled","ligature":["visibility-off-filled"],"unicode":["uEA048"]},{"id":"17314:395","svg":"\n\n\n","svgFile":{},"name":"home-filled","ligature":["home-filled"],"unicode":["uEA049"]},{"id":"17314:401","svg":"\n\n\n","svgFile":{},"name":"edit-filled","ligature":["edit-filled"],"unicode":["uEA051"]},{"id":"17314:483","svg":"\n\n\n","svgFile":{},"name":"delete-filled","ligature":["delete-filled"],"unicode":["uEA046"]},{"id":"17315:201","svg":"\n\n\n","svgFile":{},"name":"information-circle-filled","ligature":["information-circle-filled"],"unicode":["uEA050"]},{"id":"17315:202","svg":"\n\n\n\n","svgFile":{},"name":"avatar-square","ligature":["avatar-square"],"unicode":["uEA052"]},{"id":"17315:210","svg":"\n\n\n\n","svgFile":{},"name":"copy-filled","ligature":["copy-filled"],"unicode":["uEA02"]}] \ No newline at end of file +[ + { + "id": "17056:922", + "svg": "\n\n\n\n", + "svgFile": {}, + "name": "user", + "ligature": [ + "user" + ], + "unicode": [ + "uEA01" + ] + }, + { + "id": "17056:924", + "svg": "\n\n\n", + "svgFile": {}, + "name": "avatar", + "ligature": [ + "avatar" + ], + "unicode": [ + "uEA03" + ] + }, + { + "id": "17056:925", + "svg": "\n\n\n", + "svgFile": {}, + "name": "search", + "ligature": [ + "search" + ], + "unicode": [ + "uEA04" + ] + }, + { + "id": "17056:926", + "svg": "\n\n\n", + "svgFile": {}, + "name": "chevron-down", + "ligature": [ + "chevron-down" + ], + "unicode": [ + "uEA05" + ] + }, + { + "id": "17056:927", + "svg": "\n\n\n", + "svgFile": {}, + "name": "chevron-up", + "ligature": [ + "chevron-up" + ], + "unicode": [ + "uEA06" + ] + }, + { + "id": "17056:928", + "svg": "\n\n\n", + "svgFile": {}, + "name": "moon", + "ligature": [ + "moon" + ], + "unicode": [ + "uEA07" + ] + }, + { + "id": "17056:929", + "svg": "\n\n\n", + "svgFile": {}, + "name": "clock", + "ligature": [ + "clock" + ], + "unicode": [ + "uEA08" + ] + }, + { + "id": "17056:930", + "svg": "\n\n\n", + "svgFile": {}, + "name": "map-pin", + "ligature": [ + "map-pin" + ], + "unicode": [ + "uEA09" + ] + }, + { + "id": "17056:931", + "svg": "\n\n\n\n", + "svgFile": {}, + "name": "envelope", + "ligature": [ + "envelope" + ], + "unicode": [ + "uEA010" + ] + }, + { + "id": "17056:932", + "svg": "\n\n\n\n", + "svgFile": {}, + "name": "camera", + "ligature": [ + "camera" + ], + "unicode": [ + "uEA011" + ] + }, + { + "id": "17056:933", + "svg": "\n\n\n", + "svgFile": {}, + "name": "arrow-right", + "ligature": [ + "arrow-right" + ], + "unicode": [ + "uEA012" + ] + }, + { + "id": "17056:934", + "svg": "\n\n\n", + "svgFile": {}, + "name": "arrow-left", + "ligature": [ + "arrow-left" + ], + "unicode": [ + "uEA013" + ] + }, + { + "id": "17056:935", + "svg": "\n\n\n", + "svgFile": {}, + "name": "chevron-right", + "ligature": [ + "chevron-right" + ], + "unicode": [ + "uEA014" + ] + }, + { + "id": "17056:936", + "svg": "\n\n\n", + "svgFile": {}, + "name": "chevron-left", + "ligature": [ + "chevron-left" + ], + "unicode": [ + "uEA015" + ] + }, + { + "id": "17056:937", + "svg": "\n\n\n", + "svgFile": {}, + "name": "chevron-double-left", + "ligature": [ + "chevron-double-left" + ], + "unicode": [ + "uEA016" + ] + }, + { + "id": "17056:938", + "svg": "\n\n\n", + "svgFile": {}, + "name": "chevron-double-right", + "ligature": [ + "chevron-double-right" + ], + "unicode": [ + "uEA017" + ] + }, + { + "id": "17056:939", + "svg": "\n\n\n\n", + "svgFile": {}, + "name": "link", + "ligature": [ + "link" + ], + "unicode": [ + "uEA018" + ] + }, + { + "id": "17056:940", + "svg": "\n\n\n", + "svgFile": {}, + "name": "map", + "ligature": [ + "map" + ], + "unicode": [ + "uEA019" + ] + }, + { + "id": "17056:941", + "svg": "\n\n\n\n\n\n\n\n\n\n\n", + "svgFile": {}, + "name": "sun", + "ligature": [ + "sun" + ], + "unicode": [ + "uEA020" + ] + }, + { + "id": "17056:942", + "svg": "\n\n\n", + "svgFile": {}, + "name": "plus", + "ligature": [ + "plus" + ], + "unicode": [ + "uEA021" + ] + }, + { + "id": "17056:943", + "svg": "\n\n\n", + "svgFile": {}, + "name": "minus", + "ligature": [ + "minus" + ], + "unicode": [ + "uEA022" + ] + }, + { + "id": "17056:944", + "svg": "\n\n\n", + "svgFile": {}, + "name": "close", + "ligature": [ + "close" + ], + "unicode": [ + "uEA023" + ] + }, + { + "id": "17056:945", + "svg": "\n\n\n", + "svgFile": {}, + "name": "check", + "ligature": [ + "check" + ], + "unicode": [ + "uEA024" + ] + }, + { + "id": "17056:946", + "svg": "\n\n\n", + "svgFile": {}, + "name": "check-circle", + "ligature": [ + "check-circle" + ], + "unicode": [ + "uEA025" + ] + }, + { + "id": "17056:947", + "svg": "\n\n\n", + "svgFile": {}, + "name": "exclamation-triangle", + "ligature": [ + "exclamation-triangle" + ], + "unicode": [ + "uEA026" + ] + }, + { + "id": "17056:948", + "svg": "\n\n\n", + "svgFile": {}, + "name": "exclamation-circle", + "ligature": [ + "exclamation-circle" + ], + "unicode": [ + "uEA027" + ] + }, + { + "id": "17056:949", + "svg": "\n\n\n", + "svgFile": {}, + "name": "information", + "ligature": [ + "information" + ], + "unicode": [ + "uEA028" + ] + }, + { + "id": "17056:952", + "svg": "\n\n\n\n\n\n\n\n\n\n\n", + "svgFile": {}, + "name": "adjustments-horizontal", + "ligature": [ + "adjustments-horizontal" + ], + "unicode": [ + "uEA029" + ] + }, + { + "id": "17056:953", + "svg": "\n\n\n", + "svgFile": {}, + "name": "bars-3", + "ligature": [ + "bars-3" + ], + "unicode": [ + "uEA030" + ] + }, + { + "id": "17161:251", + "svg": "\n\n\n\n\n\n\n\n\n", + "svgFile": {}, + "name": "reset", + "ligature": [ + "reset" + ], + "unicode": [ + "uEA031" + ] + }, + { + "id": "17276:207", + "svg": "\n\n\n\n\n", + "svgFile": {}, + "name": "more-horizontal", + "ligature": [ + "more-horizontal" + ], + "unicode": [ + "uEA032" + ] + }, + { + "id": "17276:275", + "svg": "\n\n\n", + "svgFile": {}, + "name": "a", + "ligature": [ + "a" + ], + "unicode": [ + "U0061" + ] + }, + { + "id": "17276:276", + "svg": "\n\n\n", + "svgFile": {}, + "name": "b", + "ligature": [ + "b" + ], + "unicode": [ + "U0062" + ] + }, + { + "id": "17276:277", + "svg": "\n\n\n", + "svgFile": {}, + "name": "c", + "ligature": [ + "c" + ], + "unicode": [ + "U0063" + ] + }, + { + "id": "17276:278", + "svg": "\n\n\n", + "svgFile": {}, + "name": "d", + "ligature": [ + "d" + ], + "unicode": [ + "U0064" + ] + }, + { + "id": "17276:279", + "svg": "\n\n\n", + "svgFile": {}, + "name": "e", + "ligature": [ + "e" + ], + "unicode": [ + "U0065" + ] + }, + { + "id": "17276:280", + "svg": "\n\n\n", + "svgFile": {}, + "name": "f", + "ligature": [ + "f" + ], + "unicode": [ + "U0066" + ] + }, + { + "id": "17276:281", + "svg": "\n\n\n", + "svgFile": {}, + "name": "g", + "ligature": [ + "g" + ], + "unicode": [ + "U0067" + ] + }, + { + "id": "17276:282", + "svg": "\n\n\n", + "svgFile": {}, + "name": "h", + "ligature": [ + "h" + ], + "unicode": [ + "U0068" + ] + }, + { + "id": "17276:283", + "svg": "\n\n\n", + "svgFile": {}, + "name": "i", + "ligature": [ + "i" + ], + "unicode": [ + "U0069" + ] + }, + { + "id": "17276:284", + "svg": "\n\n\n", + "svgFile": {}, + "name": "j", + "ligature": [ + "j" + ], + "unicode": [ + "U006A" + ] + }, + { + "id": "17276:285", + "svg": "\n\n\n", + "svgFile": {}, + "name": "k", + "ligature": [ + "k" + ], + "unicode": [ + "U006B" + ] + }, + { + "id": "17276:286", + "svg": "\n\n\n", + "svgFile": {}, + "name": "l", + "ligature": [ + "l" + ], + "unicode": [ + "U006C" + ] + }, + { + "id": "17276:287", + "svg": "\n\n\n", + "svgFile": {}, + "name": "m", + "ligature": [ + "m" + ], + "unicode": [ + "U006D" + ] + }, + { + "id": "17276:288", + "svg": "\n\n\n", + "svgFile": {}, + "name": "n", + "ligature": [ + "n" + ], + "unicode": [ + "U006E" + ] + }, + { + "id": "17276:289", + "svg": "\n\n\n", + "svgFile": {}, + "name": "o", + "ligature": [ + "o" + ], + "unicode": [ + "U006F" + ] + }, + { + "id": "17276:290", + "svg": "\n\n\n", + "svgFile": {}, + "name": "p", + "ligature": [ + "p" + ], + "unicode": [ + "U0070" + ] + }, + { + "id": "17276:291", + "svg": "\n\n\n", + "svgFile": {}, + "name": "q", + "ligature": [ + "q" + ], + "unicode": [ + "U0071" + ] + }, + { + "id": "17276:292", + "svg": "\n\n\n", + "svgFile": {}, + "name": "r", + "ligature": [ + "r" + ], + "unicode": [ + "U0072" + ] + }, + { + "id": "17276:293", + "svg": "\n\n\n", + "svgFile": {}, + "name": "s", + "ligature": [ + "s" + ], + "unicode": [ + "U0073" + ] + }, + { + "id": "17276:294", + "svg": "\n\n\n", + "svgFile": {}, + "name": "t", + "ligature": [ + "t" + ], + "unicode": [ + "U0074" + ] + }, + { + "id": "17276:295", + "svg": "\n\n\n", + "svgFile": {}, + "name": "u", + "ligature": [ + "u" + ], + "unicode": [ + "U0075" + ] + }, + { + "id": "17276:296", + "svg": "\n\n\n", + "svgFile": {}, + "name": "v", + "ligature": [ + "v" + ], + "unicode": [ + "U0076" + ] + }, + { + "id": "17276:297", + "svg": "\n\n\n", + "svgFile": {}, + "name": "w", + "ligature": [ + "w" + ], + "unicode": [ + "U0077" + ] + }, + { + "id": "17276:298", + "svg": "\n\n\n", + "svgFile": {}, + "name": "x", + "ligature": [ + "x" + ], + "unicode": [ + "U0078" + ] + }, + { + "id": "17276:299", + "svg": "\n\n\n", + "svgFile": {}, + "name": "y", + "ligature": [ + "y" + ], + "unicode": [ + "U0079" + ] + }, + { + "id": "17276:300", + "svg": "\n\n\n", + "svgFile": {}, + "name": "z", + "ligature": [ + "z" + ], + "unicode": [ + "U007A" + ] + }, + { + "id": "17276:301", + "svg": "\n\n\n", + "svgFile": {}, + "name": "U002D--", + "ligature": [ + "-" + ], + "unicode": [ + "U002D" + ] + }, + { + "id": "17277:311", + "svg": "\n\n\n\n\n", + "svgFile": {}, + "name": "more-vertical", + "ligature": [ + "more-vertical" + ], + "unicode": [ + "uEA033" + ] + }, + { + "id": "17314:359", + "svg": "\n\n\n", + "svgFile": {}, + "name": "arrow-down-circle-filled", + "ligature": [ + "arrow-down-circle-filled" + ], + "unicode": [ + "uEA034" + ] + }, + { + "id": "17314:361", + "svg": "\n\n\n", + "svgFile": {}, + "name": "arrow-down-right", + "ligature": [ + "arrow-down-right" + ], + "unicode": [ + "uEA036" + ] + }, + { + "id": "17314:363", + "svg": "\n\n\n\n", + "svgFile": {}, + "name": "login", + "ligature": [ + "login" + ], + "unicode": [ + "uEA039" + ] + }, + { + "id": "17314:365", + "svg": "\n\n\n", + "svgFile": {}, + "name": "arrow-down", + "ligature": [ + "arrow-down" + ], + "unicode": [ + "uEA038" + ] + }, + { + "id": "17314:367", + "svg": "\n\n\n", + "svgFile": {}, + "name": "arrow-down-left", + "ligature": [ + "arrow-down-left" + ], + "unicode": [ + "uEA035" + ] + }, + { + "id": "17314:369", + "svg": "\n\n\n\n", + "svgFile": {}, + "name": "arrow-down-tray", + "ligature": [ + "arrow-down-tray" + ], + "unicode": [ + "uEA037" + ] + }, + { + "id": "17314:371", + "svg": "\n\n\n\n", + "svgFile": {}, + "name": "logout", + "ligature": [ + "logout" + ], + "unicode": [ + "uEA040" + ] + }, + { + "id": "17314:377", + "svg": "\n\n\n", + "svgFile": {}, + "name": "question-mark-circle-filled", + "ligature": [ + "question-mark-circle-filled" + ], + "unicode": [ + "uEA0410" + ] + }, + { + "id": "17314:379", + "svg": "\n\n\n", + "svgFile": {}, + "name": "question-mark-circle-filled2", + "ligature": [ + "question-mark-circle-filled2" + ], + "unicode": [ + "uEA042" + ] + }, + { + "id": "17314:381", + "svg": "\n\n\n", + "svgFile": {}, + "name": "check-circle-filled", + "ligature": [ + "check-circle-filled" + ], + "unicode": [ + "uEA043" + ] + }, + { + "id": "17314:383", + "svg": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", + "svgFile": {}, + "name": "calendar-days", + "ligature": [ + "calendar-days" + ], + "unicode": [ + "uEA044" + ] + }, + { + "id": "17314:385", + "svg": "\n\n\n", + "svgFile": {}, + "name": "settings-filled", + "ligature": [ + "settings-filled" + ], + "unicode": [ + "uEA045" + ] + }, + { + "id": "17314:391", + "svg": "\n\n\n\n", + "svgFile": {}, + "name": "visibility-filled", + "ligature": [ + "visibility-filled" + ], + "unicode": [ + "uEA047" + ] + }, + { + "id": "17314:393", + "svg": "\n\n\n\n", + "svgFile": {}, + "name": "visibility-off-filled", + "ligature": [ + "visibility-off-filled" + ], + "unicode": [ + "uEA048" + ] + }, + { + "id": "17314:395", + "svg": "\n\n\n", + "svgFile": {}, + "name": "home-filled", + "ligature": [ + "home-filled" + ], + "unicode": [ + "uEA049" + ] + }, + { + "id": "17314:401", + "svg": "\n\n\n", + "svgFile": {}, + "name": "edit-filled", + "ligature": [ + "edit-filled" + ], + "unicode": [ + "uEA051" + ] + }, + { + "id": "17314:483", + "svg": "\n\n\n", + "svgFile": {}, + "name": "delete-filled", + "ligature": [ + "delete-filled" + ], + "unicode": [ + "uEA046" + ] + }, + { + "id": "17315:201", + "svg": "\n\n\n", + "svgFile": {}, + "name": "information-circle-filled", + "ligature": [ + "information-circle-filled" + ], + "unicode": [ + "uEA050" + ] + }, + { + "id": "17315:202", + "svg": "\n\n\n\n", + "svgFile": {}, + "name": "avatar-square", + "ligature": [ + "avatar-square" + ], + "unicode": [ + "uEA052" + ] + }, + { + "id": "17315:210", + "svg": "\n\n\n\n", + "svgFile": {}, + "name": "copy-filled", + "ligature": [ + "copy-filled" + ], + "unicode": [ + "uEA02" + ] + } +] \ No newline at end of file diff --git a/projects/demo/src/types/demo-control.type.ts b/projects/demo/src/types/demo-control.type.ts index 81af78e4..0c7c538f 100644 --- a/projects/demo/src/types/demo-control.type.ts +++ b/projects/demo/src/types/demo-control.type.ts @@ -1,5 +1,6 @@ export const DemoControl = { CHECKBOX: 'checkbox', + SWITCH: 'switch', TEXT: 'text', TEXTARRAY: 'textarray', NUMBER: 'number',