suis
Version:
Angular 16+ Component Library
1 lines • 241 kB
Source Map (JSON)
{"version":3,"file":"suis.mjs","sources":["../../../../libs/suis/src/lib/components/suis-icon/suis-icon-type.pipe.ts","../../../../libs/suis/src/lib/pipes/suis-ng-class.pipe.ts","../../../../libs/suis/src/lib/components/suis-icon/suis-icon.component.ts","../../../../libs/suis/src/lib/components/suis-icon/suis-icon.component.html","../../../../libs/suis/src/lib/components/suis-accordion/suis-accordion.component.ts","../../../../libs/suis/src/lib/components/suis-accordion/suis-accordion.component.html","../../../../libs/suis/src/lib/components/suis-alert/suis-alert.component.ts","../../../../libs/suis/src/lib/components/suis-alert/suis-alert.component.html","../../../../libs/suis/src/lib/components/suis-box/suis-box.component.ts","../../../../libs/suis/src/lib/components/suis-box/suis-box.component.html","../../../../libs/suis/src/lib/components/suis-breadcrumbs/suis-breadcrumbs.component.ts","../../../../libs/suis/src/lib/components/suis-breadcrumbs/suis-breadcrumbs.component.html","../../../../libs/suis/src/lib/components/suis-chart/suis-chart-height.pipe.ts","../../../../libs/suis/src/lib/components/suis-chart/suis-chart-data.pipe.ts","../../../../libs/suis/src/lib/components/suis-chart/suis-chart.component.ts","../../../../libs/suis/src/lib/components/suis-chart/suis-chart.component.html","../../../../libs/suis/src/lib/components/suis-chip/suis-chip.component.ts","../../../../libs/suis/src/lib/components/suis-chip/suis-chip.component.html","../../../../libs/suis/src/lib/components/suis-container/suis-container.component.ts","../../../../libs/suis/src/lib/components/suis-container/suis-container.component.html","../../../../libs/suis/src/lib/components/suis-spinner/suis-spinner.component.ts","../../../../libs/suis/src/lib/components/suis-spinner/suis-spinner.component.html","../../../../libs/suis/src/lib/shared/classes/suis-button.base.ts","../../../../libs/suis/src/lib/modules/suis-button/components/suis-button/suis-button.component.ts","../../../../libs/suis/src/lib/modules/suis-button/components/suis-button/suis-button.component.html","../../../../libs/suis/src/lib/services/suis-dialog.service.ts","../../../../libs/suis/src/lib/components/suis-dialog/suis-dialog.component.ts","../../../../libs/suis/src/lib/components/suis-dialog/suis-dialog.component.html","../../../../libs/suis/src/lib/services/suis-notification.service.ts","../../../../libs/suis/src/lib/components/suis-dialog-container/suis-dialog-container.component.ts","../../../../libs/suis/src/lib/components/suis-dialog-container/suis-dialog-container.component.html","../../../../libs/suis/src/lib/components/suis-divider/suis-divider.component.ts","../../../../libs/suis/src/lib/components/suis-divider/suis-divider.component.html","../../../../libs/suis/src/lib/components/suis-form-field/suis-form-field.component.ts","../../../../libs/suis/src/lib/components/suis-form-field/suis-form-field.component.html","../../../../libs/suis/src/lib/shared/classes/suis-input.base.ts","../../../../libs/suis/src/lib/components/suis-input/suis-input.component.ts","../../../../libs/suis/src/lib/components/suis-input/suis-input.component.html","../../../../libs/suis/src/lib/components/suis-label/suis-label.component.ts","../../../../libs/suis/src/lib/components/suis-label/suis-label.component.html","../../../../libs/suis/src/lib/shared/classes/suis-checkbox.base.ts","../../../../libs/suis/src/lib/components/suis-input-checkbox/suis-input-checkbox.component.ts","../../../../libs/suis/src/lib/components/suis-input-checkbox/suis-input-checkbox.component.html","../../../../libs/suis/src/lib/components/suis-input-chips/suis-input-chips.component.ts","../../../../libs/suis/src/lib/components/suis-input-chips/suis-input-chips.component.html","../../../../libs/suis/src/lib/components/suis-input-image/suis-input-image.component.ts","../../../../libs/suis/src/lib/components/suis-input-image/suis-input-image.component.html","../../../../libs/suis/src/lib/components/suis-input-number/suis-input-number.component.ts","../../../../libs/suis/src/lib/components/suis-input-number/suis-input-number.component.html","../../../../libs/suis/src/lib/components/suis-input-radio/suis-input-radio.component.ts","../../../../libs/suis/src/lib/components/suis-input-radio/suis-input-radio.component.html","../../../../libs/suis/src/lib/components/suis-item/suis-item.component.ts","../../../../libs/suis/src/lib/components/suis-item/suis-item.component.html","../../../../libs/suis/src/lib/components/suis-notification/suis-notification.component.ts","../../../../libs/suis/src/lib/components/suis-notification/suis-notification.component.html","../../../../libs/suis/src/lib/components/suis-notifications/suis-notifications.component.ts","../../../../libs/suis/src/lib/components/suis-notifications/suis-notifications.component.html","../../../../libs/suis/src/lib/components/suis-pagination/suis-pagination-page.pipe.ts","../../../../libs/suis/src/lib/components/suis-pagination/suis-pagination-items.pipe.ts","../../../../libs/suis/src/lib/modules/suis-select/pipes/suis-select-label.pipe.ts","../../../../libs/suis/src/lib/modules/suis-select/pipes/suis-select-is-selected.pipe.ts","../../../../libs/suis/src/lib/modules/suis-select/components/suis-select-option/suis-select-option.component.ts","../../../../libs/suis/src/lib/modules/suis-select/components/suis-select-option/suis-select-option.component.html","../../../../libs/suis/src/lib/modules/suis-select/pipes/suis-select-sort-options.pipe.ts","../../../../libs/suis/src/lib/modules/suis-select/pipes/suis-select-filter-options.pipe.ts","../../../../libs/suis/src/lib/modules/suis-select/classes/suis-select-button.base.ts","../../../../libs/suis/src/lib/modules/suis-select/components/suis-select-button/suis-select-button.component.ts","../../../../libs/suis/src/lib/modules/suis-select/components/suis-select-button/suis-select-button.component.html","../../../../libs/suis/src/lib/modules/suis-select/directives/suis-select-option.directive.ts","../../../../libs/suis/src/lib/modules/suis-select/classes/suis-select.base.ts","../../../../libs/suis/src/lib/modules/suis-select/classes/suis-select-single.base.ts","../../../../libs/suis/src/lib/modules/suis-select/components/suis-select/suis-select.component.ts","../../../../libs/suis/src/lib/modules/suis-select/components/suis-select/suis-select.component.html","../../../../libs/suis/src/lib/modules/suis-select/components/suis-select-group-option/suis-select-group-option.component.ts","../../../../libs/suis/src/lib/modules/suis-select/components/suis-select-group-option/suis-select-group-option.component.html","../../../../libs/suis/src/lib/modules/suis-select/pipes/suis-select-filter-group-options.pipe.ts","../../../../libs/suis/src/lib/modules/suis-select/pipes/suis-select-group-label.pipe.ts","../../../../libs/suis/src/lib/modules/suis-select/directives/suis-select-group-option.directive.ts","../../../../libs/suis/src/lib/modules/suis-select/pipes/suis-select-sort-group-options.pipe.ts","../../../../libs/suis/src/lib/modules/suis-select/components/suis-select-group/suis-select-group.component.ts","../../../../libs/suis/src/lib/modules/suis-select/components/suis-select-group/suis-select-group.component.html","../../../../libs/suis/src/lib/modules/suis-select/pipes/suis-select-multi-chips.pipe.ts","../../../../libs/suis/src/lib/modules/suis-select/pipes/suis-select-multi-is-selected.pipe.ts","../../../../libs/suis/src/lib/modules/suis-select/components/suis-select-button-multi/suis-select-button-multi.component.ts","../../../../libs/suis/src/lib/modules/suis-select/components/suis-select-button-multi/suis-select-button-multi.component.html","../../../../libs/suis/src/lib/modules/suis-select/classes/suis-select-multi.base.ts","../../../../libs/suis/src/lib/modules/suis-select/components/suis-select-multi/suis-select-multi.component.ts","../../../../libs/suis/src/lib/modules/suis-select/components/suis-select-multi/suis-select-multi.component.html","../../../../libs/suis/src/lib/modules/suis-select/pipes/suis-select-multi-group-chips.pipe.ts","../../../../libs/suis/src/lib/modules/suis-select/components/suis-select-multi-group/suis-select-multi-group.component.ts","../../../../libs/suis/src/lib/modules/suis-select/components/suis-select-multi-group/suis-select-multi-group.component.html","../../../../libs/suis/src/lib/modules/suis-select/suis-select.module.ts","../../../../libs/suis/src/lib/components/suis-pagination/suis-pagination-per-page-options.pipe.ts","../../../../libs/suis/src/lib/components/suis-pagination/suis-pagination.component.ts","../../../../libs/suis/src/lib/components/suis-pagination/suis-pagination.component.html","../../../../libs/suis/src/lib/components/suis-progress-bar/suis-progress-bar.pipe.ts","../../../../libs/suis/src/lib/components/suis-progress-bar/suis-progress-bar.component.ts","../../../../libs/suis/src/lib/components/suis-progress-bar/suis-progress-bar.component.html","../../../../libs/suis/src/lib/components/suis-spinner-container/suis-spinner-container.component.ts","../../../../libs/suis/src/lib/components/suis-spinner-container/suis-spinner-container.component.html","../../../../libs/suis/src/lib/components/suis-table/suis-table-cell.directive.ts","../../../../libs/suis/src/lib/components/suis-table/suis-table-column.directive.ts","../../../../libs/suis/src/lib/components/suis-table/suis-table.component.ts","../../../../libs/suis/src/lib/components/suis-table/suis-table.component.html","../../../../libs/suis/src/lib/components/suis-table/suis-table.module.ts","../../../../libs/suis/src/lib/components/suis-tabs/suis-tab.directive.ts","../../../../libs/suis/src/lib/components/suis-tabs/suis-tab-actions.pipe.ts","../../../../libs/suis/src/lib/components/suis-tabs/suis-tab-template.pipe.ts","../../../../libs/suis/src/lib/components/suis-tabs/suis-tabs.component.ts","../../../../libs/suis/src/lib/components/suis-tabs/suis-tabs.component.html","../../../../libs/suis/src/lib/components/suis-tabs/suis-tabs.module.ts","../../../../libs/suis/src/lib/components/suis-text-area/suis-text-area.component.ts","../../../../libs/suis/src/lib/components/suis-text-area/suis-text-area.component.html","../../../../libs/suis/src/lib/components/suis-title/suis-title.enum.ts","../../../../libs/suis/src/lib/components/suis-title/suis-title.component.ts","../../../../libs/suis/src/lib/components/suis-title/suis-title.component.html","../../../../libs/suis/src/lib/components/suis-toggle/suis-toggle.component.ts","../../../../libs/suis/src/lib/components/suis-toggle/suis-toggle.component.html","../../../../libs/suis/src/lib/components/suis-toolbar/suis-toolbar.component.ts","../../../../libs/suis/src/lib/components/suis-toolbar/suis-toolbar.component.html","../../../../libs/suis/src/lib/modules/suis-button/components/suis-button-link/suis-button-link.component.ts","../../../../libs/suis/src/lib/modules/suis-button/components/suis-button-link/suis-button-link.component.html","../../../../libs/suis/src/lib/modules/suis-button/components/suis-button-outlined/suis-button-outlined.component.ts","../../../../libs/suis/src/lib/modules/suis-button/components/suis-button-outlined/suis-button-outlined.component.html","../../../../libs/suis/src/lib/modules/suis-button/suis-button.module.ts","../../../../libs/suis/src/lib/modules/suis-navigation/directives/suis-navigation-item.directive.ts","../../../../libs/suis/src/lib/modules/suis-navigation/components/suis-navigation-item/suis-navigation-item.component.ts","../../../../libs/suis/src/lib/modules/suis-navigation/components/suis-navigation-item/suis-navigation-item.component.html","../../../../libs/suis/src/lib/modules/suis-navigation/components/suis-navigation-group-item/suis-navigation-group-item.component.ts","../../../../libs/suis/src/lib/modules/suis-navigation/components/suis-navigation-group-item/suis-navigation-group-item.component.html","../../../../libs/suis/src/lib/modules/suis-navigation/components/suis-navigation-group/suis-navigation-group.component.ts","../../../../libs/suis/src/lib/modules/suis-navigation/components/suis-navigation-group/suis-navigation-group.component.html","../../../../libs/suis/src/lib/modules/suis-navigation/components/suis-navigation/suis-navigation.component.ts","../../../../libs/suis/src/lib/modules/suis-navigation/components/suis-navigation/suis-navigation.component.html","../../../../libs/suis/src/lib/modules/suis-navigation/suis-navigation.module.ts","../../../../libs/suis/src/suis.ts"],"sourcesContent":["import { Pipe, PipeTransform } from '@angular/core';\nimport { SuisIconType } from './suis-icon.types';\n\n@Pipe({\n standalone: true,\n name: 'suisIconType',\n})\nexport class SuisIconTypePipe implements PipeTransform {\n transform(type: SuisIconType): string {\n switch (type) {\n case 'question':\n return '?';\n case 'exclamation':\n return '!';\n case 'check':\n return '✓';\n case 'times':\n return '×';\n case 'plus':\n return '+';\n case 'minus':\n return '−';\n case 'arrow-left':\n return '←';\n case 'arrow-up':\n return '↑';\n case 'arrow-right':\n return '→';\n case 'arrow-down':\n return '↓';\n case 'chevron-up':\n case 'chevron-left':\n return '‹';\n case 'chevron-down':\n case 'chevron-right':\n return '›';\n }\n }\n}\n","import { Pipe, PipeTransform } from '@angular/core';\n\n@Pipe({\n standalone: true,\n name: 'suisNgClass',\n})\nexport class SuisNgClassPipe implements PipeTransform {\n transform(prefix: string, ...args: string[]): string[] {\n const classes: string[] = [];\n args.forEach((arg) => classes.push(`${prefix}--${arg}`));\n return classes;\n }\n}\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { NgClass } from '@angular/common';\nimport { SuisIconType } from './suis-icon.types';\nimport { SuisIconTypePipe } from './suis-icon-type.pipe';\nimport { SuisNgClassPipe } from '../../pipes/suis-ng-class.pipe';\nimport { SuisSize } from '../../types/suis-size.type';\nimport { SuisColor } from '../../types/suis-color.type';\n\n@Component({\n selector: 'suis-icon',\n imports: [NgClass, SuisIconTypePipe, SuisNgClassPipe],\n templateUrl: './suis-icon.component.html',\n styleUrls: ['./suis-icon.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SuisIconComponent {\n /**\n * Sets the font size of the HTML Entity itself. Type of SuisSize. By default set to 'md'.\n */\n readonly size = input<SuisSize>('md');\n\n /**\n * Sets the color pallette of the icon and surroundings. Type of SuisColor. By default set to 'dark'.\n */\n readonly color = input<SuisColor>('dark');\n\n /**\n * Sets the HTML Entity displayed in content. Type of SuisIconType. By default set to 'question'.\n */\n readonly type = input<SuisIconType>('question');\n\n /**\n * Shows the circled border around the icon. By default set to false. Can not be combined with filled (will be overriden then).\n */\n readonly outlined = input<boolean>(false);\n\n /**\n * Shows the circled background behind the icon. By default set to false. Overrides outlined behavior if used at the sime time.\n */\n readonly filled = input<boolean>(false);\n\n /**\n * Shows the pointer cursor when hovered. By default set to false.\n */\n readonly pointer = input<boolean>(false);\n\n /**\n * Sets HTML Entity font weight to bold. By default set to false.\n */\n readonly bold = input<boolean>(false);\n}\n","<div\n class=\"suis-icon\"\n [class.suis-icon--outlined]=\"outlined()\"\n [class.suis-icon--filled]=\"filled()\"\n [class.suis-icon--pointer]=\"pointer()\"\n [class.suis-icon--bold]=\"bold()\"\n [class.suis-icon--rotate]=\"\n type() === 'chevron-up' || type() === 'chevron-down'\n \"\n [ngClass]=\"'suis-icon' | suisNgClass : color() : size()\"\n>\n <span\n [innerHTML]=\"type() | suisIconType\"\n [ngClass]=\"'suis-icon' | suisNgClass : type()\"\n ></span>\n</div>\n","import {\n ChangeDetectionStrategy,\n Component,\n output,\n input,\n signal,\n effect,\n} from '@angular/core';\nimport { SuisIconComponent } from '../suis-icon/suis-icon.component';\n\n@Component({\n selector: 'suis-accordion',\n imports: [SuisIconComponent],\n templateUrl: './suis-accordion.component.html',\n styleUrls: ['./suis-accordion.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SuisAccordionComponent {\n /**\n * Controlls styling of the accordion based on expanded state of group. By default set to false.\n */\n readonly expanded = input<boolean>(false);\n _expanded = signal<boolean>(false);\n\n /**\n * Emits when expanded value of the accordion has been changed.\n */\n readonly expandedChange = output<boolean>();\n\n constructor() {\n effect(() => {\n this._expanded.set(this.expanded());\n });\n }\n\n onToggle(): void {\n this._expanded.set(!this._expanded());\n this.expandedChange.emit(this._expanded());\n }\n}\n","<div class=\"suis-accordion\">\n <button (click)=\"onToggle()\" class=\"suis-accordion__header\">\n <ng-content select=\"[suisAccordionHeader]\"></ng-content>\n <suis-icon\n [type]=\"_expanded() ? 'chevron-up' : 'chevron-down'\"\n size=\"lg\"\n color=\"primary\"\n ></suis-icon>\n </button>\n @if (_expanded()) {\n <div class=\"suis-accordion__content\">\n <ng-content select=\"[suisAccordionContent]\"></ng-content>\n </div>\n }\n</div>\n","import {\n ChangeDetectionStrategy,\n Component,\n output,\n input,\n signal,\n effect,\n} from '@angular/core';\nimport { NgClass } from '@angular/common';\nimport { SuisInfoColor } from '../../types';\nimport { SuisNgClassPipe } from '../../pipes';\nimport { SuisIconComponent } from '../suis-icon/suis-icon.component';\n\n@Component({\n selector: 'suis-alert',\n imports: [NgClass, SuisNgClassPipe, SuisIconComponent],\n templateUrl: './suis-alert.component.html',\n styleUrls: ['./suis-alert.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SuisAlertComponent {\n /**\n * Controls visibilty of the alert. By default set to false.\n */\n readonly hidden = input<boolean>(false);\n _hidden = signal<boolean>(false);\n\n /**\n * Emits change of hidden state.\n */\n readonly hiddenChange = output<boolean>();\n\n /**\n * Sets the color pallette of the alert. Type of SuisInfoColor. By default set to 'danger'.\n */\n readonly color = input<SuisInfoColor>('danger');\n\n constructor() {\n effect(() => {\n this._hidden.set(this.hidden());\n });\n }\n\n onCancel(): void {\n this._hidden.set(true);\n this.hiddenChange.emit(true);\n }\n}\n","@if (!_hidden()) {\n<div class=\"suis-alert\" [ngClass]=\"'suis-alert' | suisNgClass : color()\">\n <ng-content></ng-content>\n <button class=\"suis-alert__cancel\" type=\"button\" (click)=\"onCancel()\">\n <suis-icon type=\"times\" [color]=\"'white'\" [size]=\"'lg'\"></suis-icon>\n </button>\n</div>\n}\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\n\n@Component({\n selector: 'suis-box',\n imports: [],\n templateUrl: './suis-box.component.html',\n styleUrls: ['./suis-box.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SuisBoxComponent {\n /**\n * Adds a padding around the content. By default set to false.\n */\n readonly spacing = input<boolean>(false);\n\n /**\n * Sets box height to 100%. By default set to false.\n */\n readonly fullHeight = input<boolean>(false);\n}\n","<div\n class=\"suis-box\"\n [class.suis-box--spacing]=\"spacing()\"\n [class.suis-box--full-height]=\"fullHeight()\"\n>\n <ng-content></ng-content>\n</div>\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { SuisBreadcrumbItem } from './suis-breadcrumbs.interface';\nimport { RouterModule } from '@angular/router';\n\n@Component({\n selector: 'suis-breadcrumbs',\n imports: [RouterModule],\n templateUrl: './suis-breadcrumbs.component.html',\n styleUrls: ['./suis-breadcrumbs.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SuisBreadcrumbsComponent {\n /**\n * List of breadcrumbs items. Type of SuisBreadcrumbItem[]. By default set to empty array.\n */\n readonly items = input<SuisBreadcrumbItem[]>([]);\n\n /** @internal */\n itemTrackBy(index: number, item: SuisBreadcrumbItem): string {\n return `${item.label}-${index}`;\n }\n}\n","<div class=\"suis-breadcrumbs\">\n @for (item of items(); track itemTrackBy($index, item); let last = $last) {\n <a [routerLink]=\"last ? undefined : item.link\">\n {{ item.label }}\n </a>\n @if (!last) {\n <span>/</span>\n } }\n</div>\n","import { Pipe, PipeTransform } from '@angular/core';\n\n@Pipe({\n name: 'suisChartHeight',\n standalone: true,\n})\nexport class SuisChartHeightPipe implements PipeTransform {\n transform(value: number, maxValue: number): string {\n if (value > maxValue) return '100%';\n return `${(value / maxValue) * 100}%`;\n }\n}\n","import { Pipe, PipeTransform } from '@angular/core';\nimport {\n SuisChartDataItem,\n SuisChartDataComparisionItem,\n} from './suis-chart.interfaces';\n\n@Pipe({\n name: 'suisChartData',\n standalone: true,\n})\nexport class SuisChartDataPipe implements PipeTransform {\n transform(\n data: SuisChartDataItem[],\n compareData: SuisChartDataItem[]\n ): SuisChartDataComparisionItem[] {\n if (!compareData.length) return data;\n\n const combinedData: SuisChartDataComparisionItem[] = [];\n\n data.forEach((item, index) => {\n combinedData.push(item);\n if (compareData.length - 1 >= index) {\n combinedData.push({\n ...compareData[index],\n compare: true,\n });\n } else {\n combinedData.push({\n value: 0,\n compare: true,\n });\n }\n });\n\n return combinedData;\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n Input,\n input,\n} from '@angular/core';\nimport { NgClass } from '@angular/common';\nimport { SuisColor, SuisSize } from '../../types';\nimport { SuisChartHeightPipe } from './suis-chart-height.pipe';\nimport { SuisNgClassPipe } from '../../pipes';\nimport { SuisChartDataItem } from './suis-chart.interfaces';\nimport { SuisChartDataPipe } from './suis-chart-data.pipe';\n\n@Component({\n selector: 'suis-chart',\n imports: [NgClass, SuisChartHeightPipe, SuisChartDataPipe, SuisNgClassPipe],\n templateUrl: './suis-chart.component.html',\n styleUrls: ['./suis-chart.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SuisChartComponent {\n /** @internal */\n _maxValue: number = 100;\n\n /** @internal */\n get maxValue(): number {\n if (!this.autoMax()) return this._maxValue;\n return Math.max(\n ...[...this.data(), ...this.compareData()].map((item) => item.value)\n );\n }\n\n /**\n * Set the maximum value of the chart bars. By default set to 100.\n */\n @Input() set maxValue(value: number) {\n this._maxValue = value;\n }\n\n /**\n * Array of the chart bars labels. By default set to empty array.\n */\n readonly labels = input<string[]>([]);\n\n /**\n * Array of data values and optionally colors. Type of SuisChartDataItem[]. By default set to empty array.\n */\n readonly data = input<SuisChartDataItem[]>([]);\n\n /**\n * Sets the default color of the chart bars. Type of SuisColor. By default set to 'primary'.\n */\n readonly color = input<SuisColor>('primary');\n\n /**\n * Adjusts the width of the chart bars. Type of SuisSize. By default set to 'md'.\n */\n readonly size = input<SuisSize>('md');\n\n /**\n * Sets the maximum value automatically based on data values. By default set to false.\n */\n readonly autoMax = input<boolean>(false);\n\n /**\n * Array of comparision data values and optionally colors. Type of SuisChartDataItem[]. By default set to empty array.\n */\n readonly compareData = input<SuisChartDataItem[]>([]);\n\n /**\n * Sets the default color of the comparision chart bars. Type of SuisColor. By default set to 'warning'.\n */\n readonly compareColor = input<SuisColor>('warning');\n}\n","<div class=\"suis-chart\">\n <div\n class=\"suis-chart__content\"\n [ngClass]=\"'suis-chart__content' | suisNgClass : size()\"\n >\n @for (item of data() | suisChartData : compareData(); track item) {\n <div\n class=\"suis-chart__content__item\"\n [ngClass]=\"\n 'suis-chart__content__item'\n | suisNgClass\n : (item.compare\n ? item.color || compareColor()\n : item.color || color())\n : (item.compare ? 'compare' : 'single')\n \"\n [style.height]=\"item.value | suisChartHeight : maxValue\"\n >\n <div class=\"suis-chart__content__item__value\">\n {{ item.value }}\n </div>\n </div>\n }\n </div>\n <div\n class=\"suis-chart__labels\"\n [ngClass]=\"'suis-chart__labels' | suisNgClass : size()\"\n >\n @for (label of labels(); track label) {\n <div\n class=\"suis-chart__labels__item\"\n [class.suis-chart__labels__item--double]=\"compareData().length\"\n >\n {{ label }}\n </div>\n }\n </div>\n</div>\n","import {\n ChangeDetectionStrategy,\n Component,\n output,\n input,\n} from '@angular/core';\nimport { NgClass } from '@angular/common';\nimport { SuisIconComponent } from '../suis-icon/suis-icon.component';\nimport { SuisColor } from '../../types/suis-color.type';\nimport { SuisNgClassPipe } from '../../pipes/suis-ng-class.pipe';\n\n@Component({\n selector: 'suis-chip',\n imports: [NgClass, SuisIconComponent, SuisNgClassPipe],\n templateUrl: './suis-chip.component.html',\n styleUrls: ['./suis-chip.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SuisChipComponent {\n /**\n * Sets the color pallette of the chip. Type of SuisColor. By default set to 'primary'.\n */\n readonly color = input<SuisColor>('primary');\n\n /**\n * Sets the color of the cross icon. Visible only if removable set to true. Type of SuisColor. By default set to 'white'.\n */\n readonly iconColor = input<SuisColor>('white');\n\n /**\n * Shows cross icon with remove action. By default set to false.\n */\n readonly removable = input<boolean>(false);\n\n /**\n * Emits on cross icon click.\n */\n readonly remove = output<void>();\n\n /** @internal */\n onRemove(): void {\n this.remove.emit();\n }\n}\n","<div class=\"suis-chip\" [ngClass]=\"'suis-chip' | suisNgClass : color()\">\n <ng-content></ng-content>\n @if (removable()) {\n <button class=\"suis-chip__remove\" type=\"button\" (click)=\"onRemove()\">\n <suis-icon\n type=\"times\"\n [color]=\"iconColor()\"\n [pointer]=\"true\"\n [size]=\"'md'\"\n ></suis-icon>\n </button>\n }\n</div>\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\n\n@Component({\n selector: 'suis-container',\n imports: [],\n templateUrl: './suis-container.component.html',\n styleUrls: ['./suis-container.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SuisContainerComponent {\n /**\n * Adds a padding around the content. By default set to false.\n */\n readonly spacing = input<boolean>(false);\n}\n","<div class=\"suis-container\" [class.suis-container--spacing]=\"spacing()\">\n <ng-content></ng-content>\n</div>\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { NgClass } from '@angular/common';\nimport { SuisNgClassPipe } from '../../pipes';\nimport { SuisSize } from '../../types/suis-size.type';\nimport { SuisColor } from '../../types/suis-color.type';\n\n@Component({\n selector: 'suis-spinner',\n imports: [NgClass, SuisNgClassPipe],\n templateUrl: './suis-spinner.component.html',\n styleUrls: ['./suis-spinner.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SuisSpinnerComponent {\n /**\n * Sets the size of the spinner. Type of SuisSize. By default set to 'sm'.\n */\n readonly size = input<SuisSize>('sm');\n\n /**\n * Sets the color of the spinner. Type of SuisColor. By default set to 'primary'.\n */\n readonly color = input<SuisColor>('primary');\n}\n","<div\n class=\"suis-spinner\"\n [ngClass]=\"'suis-spinner' | suisNgClass : size() : color()\"\n></div>\n","import { Directive, output, input } from '@angular/core';\nimport { SuisInfoColor, SuisPalleteColor } from '../../types/suis-color.type';\n\n@Directive()\nexport abstract class SuisButtonBase {\n /**\n * Sets button's color theme. Type of SuisPalleteColor | SuisInfoColor. By default set to 'primary'.\n */\n readonly color = input<SuisPalleteColor | SuisInfoColor>('primary');\n\n /**\n * Sets button's disabled attribute. By default set to false.\n */\n readonly disabled = input<boolean>(false);\n\n /**\n * Sets button's type attribute. By default set to 'button'.\n */\n readonly type = input<string>('button');\n\n /**\n * Shows loading spinner instead of content projection. By default set to false.\n */\n readonly loading = input<boolean>(false);\n\n /**\n * Sets width to 100% instead of fit-content. By default set to false.\n */\n readonly fullWidth = input<boolean>(false);\n\n /**\n * Emits on button click event.\n */\n readonly clicked = output<void>();\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n onClick(event?: Event): void {\n this.clicked.emit();\n }\n}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { NgClass } from '@angular/common';\nimport { SuisNgClassPipe } from '../../../../pipes';\nimport { SuisSpinnerComponent } from '../../../../components/suis-spinner';\nimport { SuisButtonBase } from '../../../../shared/classes/suis-button.base';\n\n@Component({\n selector: 'suis-button',\n imports: [NgClass, SuisNgClassPipe, SuisSpinnerComponent],\n templateUrl: './suis-button.component.html',\n styleUrls: ['./suis-button.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SuisButtonComponent extends SuisButtonBase {}\n","<button\n class=\"suis-button\"\n [class.suis-button--full-width]=\"fullWidth()\"\n [ngClass]=\"'suis-button' | suisNgClass : color()\"\n [attr.disabled]=\"disabled() || loading() ? true : undefined\"\n [attr.tabindex]=\"disabled() || loading() ? -1 : 0\"\n [attr.type]=\"type()\"\n (click)=\"onClick()\"\n>\n <span\n class=\"suis-button__content\"\n [class.suis-button__content--loading]=\"loading()\"\n >\n <ng-content></ng-content>\n </span>\n @if (loading()) {\n <suis-spinner size=\"xs\" color=\"white\"></suis-spinner>\n }\n</button>\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {\n Injectable,\n Signal,\n Type,\n WritableSignal,\n signal,\n} from '@angular/core';\nimport { SuisDialog } from '../components/suis-dialog-container/suis-dialog-container.interfaces';\n\n@Injectable()\nexport class SuisDialogService {\n private dialog: WritableSignal<SuisDialog | null> = signal(null);\n\n /**\n * @returns current displayed dialog or null.\n */\n getDialog(): Signal<SuisDialog | null> {\n return this.dialog.asReadonly();\n }\n\n /**\n * Opens dialog component in suis-dialog-container and add suis-dialog class to body.\n * @param component - dialog component\n * @param inputs - inputs passed to dialog component\n */\n open(component: Type<any>, inputs: { [key: string]: any }): void {\n this.dialog.set({ component, inputs });\n document.body.classList.add('suis-dialog');\n }\n\n /**\n * Removes displayed dialog and suis-dialog class from body.\n */\n close(): void {\n this.dialog.set(null);\n document.body.classList.remove('suis-dialog');\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n inject,\n output,\n input,\n} from '@angular/core';\nimport { NgClass } from '@angular/common';\nimport { SuisIconComponent } from '../suis-icon';\nimport { SuisButtonComponent } from '../../modules/suis-button/components/suis-button';\nimport { SuisDialogService } from '../../services/suis-dialog.service';\nimport { SuisNgClassPipe } from '../../pipes';\nimport { SuisSize } from '../../types/suis-size.type';\n\n@Component({\n selector: 'suis-dialog',\n imports: [NgClass, SuisIconComponent, SuisButtonComponent, SuisNgClassPipe],\n templateUrl: './suis-dialog.component.html',\n styleUrls: ['./suis-dialog.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SuisDialogComponent {\n private readonly suisDialogService = inject(SuisDialogService);\n\n /**\n * Sets width size of the dialog. Type of SuisSize. By default set to 'md'.\n */\n readonly size = input<SuisSize>('md');\n\n /**\n * Displays the cancel button in the actions footer of the dialog. By default set to true.\n */\n readonly cancelButton = input<boolean>(true);\n\n /**\n * Displays the confirm button in the actions footer of the dialog. By default set to true.\n */\n readonly confirmButton = input<boolean>(true);\n\n /**\n * Emits on confirm button clicked.\n */\n readonly confirmed = output<void>();\n\n /**\n * Emits on cancel button or cross icon clicked.\n */\n readonly cancelled = output<void>();\n\n onConfirm(): void {\n this.confirmed.emit();\n }\n\n onCancel(): void {\n this.cancelled.emit();\n this.suisDialogService.close();\n }\n}\n","<div class=\"suis-dialog\" [ngClass]=\"'suis-dialog' | suisNgClass : size()\">\n <header class=\"suis-dialog__header\">\n <ng-content select=\"[suisDialogHeader]\"></ng-content>\n <button type=\"button\" (click)=\"onCancel()\">\n <suis-icon type=\"times\" color=\"dark\" size=\"lg\"></suis-icon>\n </button>\n </header>\n <section class=\"suis-dialog__content\">\n <ng-content select=\"[suisDialogContent]\"></ng-content>\n </section>\n <footer class=\"suis-dialog__actions\">\n @if (cancelButton()) {\n <suis-button color=\"danger\" (click)=\"onCancel()\"> Cancel </suis-button>\n } @if (confirmButton()) {\n <suis-button color=\"success\" (click)=\"onConfirm()\"> Confirm </suis-button>\n }\n </footer>\n</div>\n","import { Injectable, WritableSignal, signal, Signal } from '@angular/core';\nimport { SuisNotification } from '../components/suis-notification/suis-notification.interfaces';\nimport { SuisNotificationType } from '../components/suis-notification/suis-notification.types';\n\nlet UNIQUE_ID = 1;\n\n@Injectable()\nexport class SuisNotificationService {\n private notifications: WritableSignal<SuisNotification[]> = signal([]);\n\n /**\n * @returns array of the current notifications. Type of SuisNotification[].\n */\n getNotifications(): Signal<SuisNotification[]> {\n return this.notifications.asReadonly();\n }\n\n /**\n * Adds success notification\n * @param header text displayed in the notification header\n * @param message text displayed in the notification message\n * @param delay time in ms after notification will be destroyed\n */\n success(header: string, message: string, delay: number = 2500): void {\n this.addNotification(header, message, delay, 'success');\n }\n\n /**\n * Adds warning notification\n * @param header text displayed in the notification header\n * @param message text displayed in the notification message\n * @param delay time in ms after notification will be destroyed\n */\n warning(header: string, message: string, delay: number = 2500): void {\n this.addNotification(header, message, delay, 'warning');\n }\n\n /**\n * Adds danger notification\n * @param header text displayed in the notification header\n * @param message text displayed in the notification message\n * @param delay time in ms after notification will be destroyed\n */\n danger(header: string, message: string, delay: number = 2500): void {\n this.addNotification(header, message, delay, 'danger');\n }\n\n /**\n * Removes notification immediately\n * @param id id of the notification to be removed\n */\n forceRemoveNotification(id: string): void {\n this.removeNotification(id);\n }\n\n /** @internal */\n private getId(): string {\n return `suis-notification--${UNIQUE_ID++}`;\n }\n\n /** @internal */\n private addNotification(\n header: string,\n message: string,\n delay: number,\n type: SuisNotificationType\n ): void {\n const notification: SuisNotification = {\n id: this.getId(),\n header: header,\n message: message,\n delay: delay,\n type: type,\n };\n\n this.notifications.set([...this.notifications(), notification]);\n\n this.removeNotificationWithDelay(notification.id, notification.delay);\n }\n\n /** @internal */\n private removeNotification(id: string): void {\n this.notifications.set([\n ...this.notifications().filter((notification) => notification.id !== id),\n ]);\n }\n\n /** @internal */\n private removeNotificationWithDelay(id: string, delay: number): void {\n setTimeout(() => {\n this.removeNotification(id);\n }, delay);\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n Signal,\n inject,\n} from '@angular/core';\nimport { NgComponentOutlet } from '@angular/common';\nimport { SuisDialogService } from '../../services';\nimport { SuisDialog } from './suis-dialog-container.interfaces';\n\n@Component({\n selector: 'suis-dialog-container',\n imports: [NgComponentOutlet],\n templateUrl: './suis-dialog-container.component.html',\n styleUrls: ['./suis-dialog-container.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SuisDialogContainerComponent {\n private readonly suisDialogService = inject(SuisDialogService);\n\n dialog: Signal<SuisDialog | null> = this.suisDialogService.getDialog();\n}\n","@if (dialog()) {\n<div class=\"suis-dialog-container\">\n <ng-container\n *ngComponentOutlet=\"dialog()!.component; inputs: dialog()!.inputs\"\n ></ng-container>\n</div>\n}\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { SuisNgClassPipe } from '../../pipes';\nimport { SuisColor } from '../../types/suis-color.type';\n\n@Component({\n selector: 'suis-divider',\n imports: [CommonModule, SuisNgClassPipe],\n templateUrl: './suis-divider.component.html',\n styleUrls: ['./suis-divider.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SuisDividerComponent {\n /**\n * Sets the color of the divider. Type of SuisColor. By default set to 'tertiary'.\n */\n readonly color = input<SuisColor>('tertiary');\n}\n","<div\n class=\"suis-divider\"\n [ngClass]=\"'suis-divider' | suisNgClass : color()\"\n></div>\n","import {\n ChangeDetectionStrategy,\n Component,\n TemplateRef,\n input,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\n\n@Component({\n selector: 'suis-form-field',\n imports: [NgTemplateOutlet],\n templateUrl: './suis-form-field.component.html',\n styleUrls: ['./suis-form-field.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SuisFormFieldComponent {\n /**\n * Template to be added below the field with error message.\n */\n readonly errorTemplate = input<TemplateRef<HTMLElement>>();\n}\n","<div class=\"suis-form-field\">\n <ng-content></ng-content>\n @if (errorTemplate()) {\n <div class=\"suis-form-field__error\">\n <ng-container [ngTemplateOutlet]=\"errorTemplate()!\"></ng-container>\n </div>\n }\n</div>\n","import {\n ChangeDetectorRef,\n Directive,\n ElementRef,\n inject,\n output,\n input,\n} from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\n\n@Directive()\nexport abstract class SuisInputBase implements ControlValueAccessor {\n /** @internal */\n protected readonly cdRef = inject(ChangeDetectorRef);\n\n /** @internal */\n protected readonly elRef = inject(ElementRef);\n\n /**\n * Sets HTML id attribute of the input. By default is undefined.\n */\n readonly id = input<string>();\n\n /**\n * Sets HTML name attribute of the input. By default is undefined.\n */\n readonly name = input<string>();\n\n /**\n * Sets input disabled state. By default set to false.\n */\n readonly readonly = input<boolean>(false);\n\n /**\n * Adds invalid styling to the input. By default set to false.\n */\n readonly invalid = input<boolean>(false);\n\n /**\n * Emits on value changed.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n readonly changed = output<any>();\n\n /**\n * Emits on input touched.\n */\n readonly touched = output<void>();\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any\n _onChange = (value: any) => {};\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n _onTouched = () => {};\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n registerOnChange(fn: any): void {\n this._onChange = fn;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n registerOnTouched(fn: any): void {\n this._onTouched = fn;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n abstract writeValue(obj: any): void;\n\n /** @internal */\n onTouch(): void {\n this._onTouched();\n this.touched.emit();\n this.cdRef.markForCheck();\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n forwardRef,\n output,\n input,\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { SuisInputType } from './suis-input.types';\nimport { SuisInputBase } from '../../shared/classes/suis-input.base';\n\n@Component({\n selector: 'suis-input',\n imports: [],\n templateUrl: './suis-input.component.html',\n styleUrls: ['./suis-input.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n multi: true,\n useExisting: forwardRef(() => SuisInputComponent),\n },\n ],\n})\nexport class SuisInputComponent extends SuisInputBase {\n /**\n * Sets input's type to one of the accepted values - type of SuisInputType. By default set to 'text'.\n */\n readonly type = input<SuisInputType>('text');\n\n /**\n * Placeholder text displayed in input. By default set to empty string.\n */\n readonly placeholder = input<string>('');\n\n /**\n * Emits on keydown enter input event.\n */\n readonly enterPressed = output<void>();\n\n /** @internal */\n value: string = '';\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n override writeValue(obj: string): void {\n this.value = obj;\n this._onChange(this.value);\n this.cdRef.markForCheck();\n }\n\n onChange(event: Event): void {\n const target = event.target as HTMLInputElement;\n this.value = target.value;\n this._onChange(this.value);\n this.changed.emit(this.value);\n this.cdRef.markForCheck();\n }\n\n onEnter(): void {\n this.enterPressed.emit();\n }\n}\n","<input\n class=\"suis-input\"\n [class.suis-input--invalid]=\"invalid()\"\n [class.suis-input--readonly]=\"readonly()\"\n [attr.id]=\"id()\"\n [attr.name]=\"name()\"\n [type]=\"type()\"\n [value]=\"value\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"readonly()\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n (keydown.enter)=\"onEnter()\"\n/>\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\n\n@Component({\n selector: 'suis-label',\n standalone: true,\n templateUrl: './suis-label.component.html',\n styleUrls: ['./suis-label.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SuisLabelComponent {\n /**\n * Sets the HTML for attribute of the label. By default is undefined.\n */\n readonly for = input<string>();\n\n /**\n * Adds a red colored asterisk after the label. By default set to false.\n */\n readonly required = input<boolean>(false);\n\n /**\n * Shows the pointer cursor when hovered. By default set to false.\n */\n readonly pointer = input<boolean>(false);\n\n /**\n * Grays out the label content and removes cursor pointer behavior. By default set to false.\n */\n readonly readonly = input<boolean>(false);\n}\n","<label\n class=\"suis-label\"\n [class.suis-label--pointer]=\"!readonly() && pointer()\"\n [class.suis-label--readonly]=\"readonly()\"\n [htmlFor]=\"for() ? for() : undefined\"\n>\n <ng-content></ng-content>\n @if (required()) {\n <span class=\"suis-label__asterisk\">*</span>\n }\n <ng-content select=\"[suisLabelAside]\"></ng-content>\n</label>\n","import { Directive, input } from '@angular/core';\nimport { SuisInputBase } from './suis-input.base';\n\n@Directive()\nexport abstract class SuisCheckboxBase extends SuisInputBase {\n /** @internal */\n value: boolean = false;\n\n /**\n * Adds a red colored asterisk after the label. By default set to false.\n */\n readonly required = input<boolean>(false);\n\n override writeValue(obj: boolean): void {\n this.value = obj;\n this._onChange(this.value);\n this.cdRef.markForCheck();\n }\n\n onChange(event: Event): void {\n event.stopPropagation();\n this.value = !this.value;\n this._onChange(this.value);\n this.changed.emit(this.value);\n this.cdRef.markForCheck();\n }\n}\n","import { ChangeDetectionStrategy, Component, forwardRef } from '@angular/core';\nimport { SuisLabelComponent } from '../suis-label/suis-label.component';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { SuisIconComponent } from '../suis-icon/suis-icon.component';\nimport { SuisCheckboxBase } from '../../shared/classes/suis-checkbox.base';\n\n@Component({\n selector: 'suis-input-checkbox',\n imports: [SuisLabelComponent, SuisIconComponent],\n templateUrl: './suis-input-checkbox.component.html',\n styleUrls: ['./suis-input-checkbox.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n multi: true,\n useExisting: forwardRef(() => SuisInputCheckboxComponent),\n },\n ],\n})\nexport class SuisInputCheckboxComponent extends SuisCheckboxBase {}\n","<input\n type=\"checkbox\"\n class=\"suis-input-checkbox\"\n [attr.id]=\"id()\"\n [attr.name]=\"name()\"\n [value]=\"value\"\n [disabled]=\"readonly()\"\n/>\n\n<suis-label\n class=\"suis-input-checkbox__label\"\n [class.suis-input-checkbox__label--invalid]=\"invalid()\"\n [class.suis-input-checkbox__label--readonly]=\"readonly()\"\n [for]=\"id()\"\n [required]=\"required()\"\n [pointer]=\"true\"\n [readonly]=\"readonly()\"\n (click)=\"onChange($event)\"\n>\n <div\n [tabindex]=\"readonly() ? -1 : 0\"\n class=\"suis-input-checkbox__check\"\n [class.suis-input-checkbox__check--invalid]=\"invalid()\"\n [class.suis-input-checkbox__check--readonly]=\"readonly()\"\n >\n @if (value) {\n <suis-icon\n type=\"check\"\n size=\"lg\"\n [color]=\"readonly() ? 'tertiary' : 'primary'\"\n ></suis-icon>\n }\n </div>\n <ng-content></ng-content>\n</suis-label>\n","import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n HostListener,\n forwardRef,\n viewChild,\n input,\n} from '@angular/core';\nimport {\n FormControl,\n NG_VALUE_ACCESSOR,\n ReactiveFormsModule,\n} from '@angular/forms';\nimport { SuisChipComponent } from '../suis-chip';\nimport { SuisInputComponent } from '../suis-input';\nimport { SuisInputBase } from '../../shared/classes/suis-input.base';\nimport { SuisColor } from '../../types/suis-color.type';\n\n@Component({\n selector: 'suis-input-chips',\n imports: [ReactiveFormsModule, SuisChipComponent, SuisInputComponent],\n templateUrl: './suis-input-chips.component.html',\n styleUrls: ['./suis-input-chips.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n multi: true,\n useExisting: forwardRef(() => SuisInputChipsComponent),\n },\n ],\n})\nexport class SuisInputChipsComponent extends SuisInputBase {\n /** @internal */\n readonly inputEl = viewChild<ElementRef>('input');\n\n /**\n * Placeholder text displayed in input. By default set to empty string.\n */\n readonly placeholder = input<string>('');\n\n /**\n * Sets the color pallette of the chips. Type of SuisColor. By default set to 'primary'.\n */\n readonly chipColor = input<SuisColor>('primary');\n\n /**\n * Sets the color of the chips' cross icon. Type of SuisColor. By default set to 'white'.\n */\n readonly chipIconColor = input<SuisColor>('white');\n\n /** @internal */\n value: string[] = [];\n\n /** @internal */\n inputControl = new FormControl<string>('', { nonNullable: true });\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n writeValue(obj: string[]): void {\n this.value = obj || [];\n this._onChange(this.value);\n this.cdRef.markForCheck();\n }\n\n addItem(value: string): void {\n const values = value.split(',').filter((v) => !!v);\n this.value = this.value.concat(values);\n this._onChange(this.value);\n this.changed.emit(this.value);\n this.cdRef.markForCheck();\n }\n\n removeItem(value: string): void {\n this.value = this.value.filter((v) => v !== value);\n }\n\n submitValue() {\n const inputValue = this.inputControl.value;\n this.inputControl.res