npm - @siemens/element-ng - Versions diffs - 48.10.0 → 49.0.0-rc.2 - Mend

@siemens/element-ng 48.10.0 → 49.0.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (396) hide show

package/fesm2022/siemens-element-ng-circle-status.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"siemens-element-ng-circle-status.mjs","sources":["../../../../projects/element-ng/circle-status/si-circle-status.component.ts","../../../../projects/element-ng/circle-status/si-circle-status.component.html","../../../../projects/element-ng/circle-status/si-circle-status.module.ts","../../../../projects/element-ng/circle-status/index.ts","../../../../projects/element-ng/circle-status/siemens-element-ng-circle-status.ts"],"sourcesContent":["/*\n Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n /\nimport { NgClass } from '@angular/common';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n ElementRef,\n inject,\n input,\n OnChanges,\n OnDestroy,\n signal,\n SimpleChanges,\n viewChild\n} from '@angular/core';\nimport { BlinkService, EntityStatusType, StatusIcon } from '@siemens/element-ng/common';\nimport {\n addIcons,\n elementRight4,\n SiIconComponent,\n STATUS_ICON_CONFIG\n} from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\nimport { Observable, Subscription } from 'rxjs';\n\n@Component({\n selector: 'si-circle-status',\n imports: [NgClass, SiIconComponent, SiTranslatePipe],\n templateUrl: './si-circle-status.component.html',\n styleUrl: './si-circle-status.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiCircleStatusComponent implements OnChanges, OnDestroy {\n private readonly statusIcons = inject(STATUS_ICON_CONFIG);\n /\n The status (success, info, warning, danger) to be visualized.\n /\n readonly status = input<EntityStatusType>();\n\n / DO NOT REMOVE: Even though the input is marked as deprecated, the core-team decided not to remove the\n input. The possibility to have custom color is often requested by projects, so we keep it.\n however in order to discourage it's use, we keep it marked deprecated.\n /\n /\n A custom color (e.g. `#fefefe`) for exceptional cases.\n * @deprecated use the semantic `status` input instead.\n /\n readonly color = input<string>();\n\n /\n Set a domain type icon (e.g. `element-door`) for which the status shall be shown.\n * Leave undefined for visualizing the status without an icon.\n /\n readonly icon = input<string>();\n\n /\n Set the size using either regular or small only works when used together with `icon`\n \n @defaultValue 'regular'\n /\n readonly size = input<'regular' \| 'small'>('regular');\n\n /\n event direction is out\n \n @defaultValue false\n /\n readonly eventOut = input(false, { transform: booleanAttribute });\n\n /\n Custom icon class for event out\n /\n readonly eventIcon = input<string>();\n\n /\n Whether the status should appear with a pulsing circle around the badge.\n \n @defaultValue false\n /\n readonly blink = input(false, { transform: booleanAttribute });\n\n /\n Blink pulse generator for synchronized blinking with other components\n /\n readonly blinkPulse = input<Observable<boolean>>();\n\n /\n Aria label for icon and status combo. Needed for a11y\n /\n readonly ariaLabel = input<TranslatableString>();\n\n protected readonly backgroundClass = computed(() => this.statusIcon()?.background ?? '');\n protected readonly theAriaLabel = computed(() => this.ariaLabel() ?? this.autoLabel());\n protected readonly autoLabel = computed(() => {\n const status = this.status();\n const statusName = status && this.statusIcons[status] ? status : 'none';\n const direction = this.eventOut() ? ' out' : '';\n const iconName = this.icon()?.replace(/^element-{0,1}(.+)/, '$1 ') ?? '';\n return `${iconName.toLocaleLowerCase()}${\n this.status() && this.icon() ? 'in ' : ''\n }status ${statusName}${direction}`;\n });\n protected readonly statusIcon = computed<StatusIcon \| undefined>(() => {\n const status = this.status();\n return status ? this.statusIcons[status] : undefined;\n });\n protected readonly blinkOn = signal(false);\n protected readonly contrastFix = signal(false);\n protected readonly icons = addIcons({ elementRight4 });\n private blinkSubs?: Subscription;\n\n private readonly bg = viewChild.required<ElementRef>('bg');\n\n private blinkService = inject(BlinkService);\n\n ngOnChanges(changes: SimpleChanges): void {\n if (this.blinkService && changes.blink) {\n this.blinkSubs?.unsubscribe();\n\n if (this.blink()) {\n const pulse = this.blinkPulse() ?? this.blinkService.pulse$;\n this.blinkSubs = pulse.subscribe(onOff => {\n this.blinkOn.set(onOff);\n });\n } else {\n this.blinkOn.set(false);\n }\n }\n if (changes.color \|\| changes.blink) {\n queueMicrotask(() => {\n this.contrastFix.set(!!this.color() && this.blink() && this.calculateContrastFix());\n });\n }\n }\n\n ngOnDestroy(): void {\n this.blinkSubs?.unsubscribe();\n }\n\n private calculateContrastFix(): boolean {\n // see https://www.w3.org/TR/AERT/#color-contrast\n const rgb = getComputedStyle(this.bg().nativeElement)\n .backgroundColor?.match(/\\d+/g)\n ?.map(v => +v);\n return !!rgb && Math.round((rgb[0] 299 + rgb[1] * 587 + rgb[2] * 114) / 1000) <= 128;\n }\n}\n","<div\n class=\"status-indication d-flex align-items-center justify-content-center\"\n role=\"status\"\n [class.has-icon]=\"icon()\"\n [class.small]=\"size() === 'small'\"\n [attr.aria-label]=\"theAriaLabel() \| translate\"\n>\n <div\n #bg\n class=\"bg\"\n [class.pulse]=\"blinkOn()\"\n [class.deprecated-color]=\"!status()\"\n [class.contrast-fix]=\"contrastFix()\"\n [ngClass]=\"backgroundClass()\"\n [style.background-color]=\"color()\"\n ></div>\n @if (!status()) {\n <div class=\"deprecated-dot\" [style.background-color]=\"color()\"></div>\n }\n @let iconConfig = statusIcon();\n @if (iconConfig) {\n <span class=\"status-icon icon-stack indicator\">\n <si-icon class=\"status-icon\" [ngClass]=\"iconConfig.color\" [icon]=\"iconConfig.icon\" />\n <si-icon\n class=\"status-icon\"\n [ngClass]=\"iconConfig.stackedColor\"\n [icon]=\"iconConfig.stacked\"\n />\n </span>\n }\n @let eventIconValue = eventIcon();\n @if (eventOut()) {\n <si-icon class=\"icon text-body event-out flip-rtl\" [icon]=\"icons.elementRight4\" />\n } @else if (eventIconValue) {\n <si-icon class=\"icon text-body event-out\" [icon]=\"eventIconValue\" />\n }\n @let iconValue = icon();\n @if (iconValue) {\n <si-icon class=\"icon position-relative text-body\" [icon]=\"iconValue\" />\n }\n</div>\n","/*\n Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n /\nimport { NgModule } from '@angular/core';\n\nimport { SiCircleStatusComponent } from './si-circle-status.component';\n\n@NgModule({\n imports: [SiCircleStatusComponent],\n exports: [SiCircleStatusComponent]\n})\nexport class SiCircleStatusModule {}\n","/\n Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n /\nexport from './si-circle-status.component';\nexport * from './si-circle-status.module';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;;AAAA;;;AAGG;MAiCU,uBAAuB,CAAA;AACjB,IAAA,WAAW,GAAG,MAAM,CAAC,kBAAkB,CAAC;AACzD;;AAEG;IACM,MAAM,GAAG,KAAK,EAAoB;AAE3C;;;AAGG;AACH;;;AAGG;IACM,KAAK,GAAG,KAAK,EAAU;AAEhC;;;AAGG;IACM,IAAI,GAAG,KAAK,EAAU;AAE/B;;;;AAIG;AACM,IAAA,IAAI,GAAG,KAAK,CAAsB,SAAS,CAAC;AAErD;;;;AAIG;IACM,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AAEjE;;AAEG;IACM,SAAS,GAAG,KAAK,EAAU;AAEpC;;;;AAIG;IACM,KAAK,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AAE9D;;AAEG;IACM,UAAU,GAAG,KAAK,EAAuB;AAElD;;AAEG;IACM,SAAS,GAAG,KAAK,EAAsB;AAE7B,IAAA,eAAe,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,UAAU,EAAE,EAAE,UAAU,IAAI,EAAE,CAAC;AACrE,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;AACnE,IAAA,SAAS,GAAG,QAAQ,CAAC,MAAK;AAC3C,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE;AAC5B,QAAA,MAAM,UAAU,GAAG,MAAM,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,MAAM,GAAG,MAAM;AACvE,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,MAAM,GAAG,EAAE;AAC/C,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,EAAE,EAAE,OAAO,CAAC,oBAAoB,EAAE,KAAK,CAAC,IAAI,EAAE;AACxE,QAAA,OAAO,CAAA,EAAG,QAAQ,CAAC,iBAAiB,EAAE,CAAA,EACpC,IAAI,CAAC,MAAM,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,EACzC,CAAA,OAAA,EAAU,UAAU,CAAA,EAAG,SAAS,CAAA,CAAE;AACpC,KAAC,CAAC;AACiB,IAAA,UAAU,GAAG,QAAQ,CAAyB,MAAK;AACpE,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE;AAC5B,QAAA,OAAO,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,SAAS;AACtD,KAAC,CAAC;AACiB,IAAA,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC;AACvB,IAAA,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC;AAC3B,IAAA,KAAK,GAAG,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;AAC9C,IAAA,SAAS;AAEA,IAAA,EAAE,GAAG,SAAS,CAAC,QAAQ,CAAa,IAAI,CAAC;AAElD,IAAA,YAAY,GAAG,MAAM,CAAC,YAAY,CAAC;AAE3C,IAAA,WAAW,CAAC,OAAsB,EAAA;QAChC,IAAI,IAAI,CAAC,YAAY,IAAI,OAAO,CAAC,KAAK,EAAE;AACtC,YAAA,IAAI,CAAC,SAAS,EAAE,WAAW,EAAE;AAE7B,YAAA,IAAI,IAAI,CAAC,KAAK,EAAE,EAAE;AAChB,gBAAA,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM;gBAC3D,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC,KAAK,IAAG;AACvC,oBAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;AACzB,iBAAC,CAAC;;iBACG;AACL,gBAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;;;QAG3B,IAAI,OAAO,CAAC,KAAK,IAAI,OAAO,CAAC,KAAK,EAAE;YAClC,cAAc,CAAC,MAAK;gBAClB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,IAAI,CAAC,KAAK,EAAE,IAAI,IAAI,CAAC,oBAAoB,EAAE,CAAC;AACrF,aAAC,CAAC;;;IAIN,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,SAAS,EAAE,WAAW,EAAE;;IAGvB,oBAAoB,GAAA;;QAE1B,MAAM,GAAG,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,aAAa;AACjD,aAAA,eAAe,EAAE,KAAK,CAAC,MAAM;cAC5B,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AAChB,QAAA,OAAO,CAAC,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,IAAI,GAAG;;uGAhH7E,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAvB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,uBAAuB,4zCCpCpC,u1CAyCA,EAAA,MAAA,EAAA,CAAA,kmDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDVY,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,eAAe,iEAAE,eAAe,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAKxC,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAPnC,SAAS;+BACE,kBAAkB,EAAA,OAAA,EACnB,CAAC,OAAO,EAAE,eAAe,EAAE,eAAe,CAAC,EAAA,eAAA,EAGnC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,u1CAAA,EAAA,MAAA,EAAA,CAAA,kmDAAA,CAAA,EAAA;;;AElCjD;;;AAGG;MASU,oBAAoB,CAAA;uGAApB,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;wGAApB,oBAAoB,EAAA,OAAA,EAAA,CAHrB,uBAAuB,CAAA,EAAA,OAAA,EAAA,CACvB,uBAAuB,CAAA,EAAA,CAAA;AAEtB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,oBAAoB,YAHrB,uBAAuB,CAAA,EAAA,CAAA;;2FAGtB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAJhC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,uBAAuB,CAAC;oBAClC,OAAO,EAAE,CAAC,uBAAuB;AAClC,iBAAA;;;ACXD;;;AAGG;;ACHH;;AAEG;;;;"}
1	+ {"version":3,"file":"siemens-element-ng-circle-status.mjs","sources":["../../../../projects/element-ng/circle-status/si-circle-status.component.ts","../../../../projects/element-ng/circle-status/si-circle-status.component.html","../../../../projects/element-ng/circle-status/si-circle-status.module.ts","../../../../projects/element-ng/circle-status/index.ts","../../../../projects/element-ng/circle-status/siemens-element-ng-circle-status.ts"],"sourcesContent":["/*\n Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n /\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n ElementRef,\n inject,\n input,\n OnChanges,\n OnDestroy,\n signal,\n SimpleChanges,\n viewChild\n} from '@angular/core';\nimport { elementRight4 } from '@siemens/element-icons';\nimport { BlinkService, EntityStatusType, StatusIcon } from '@siemens/element-ng/common';\nimport { addIcons, SiIconComponent, STATUS_ICON_CONFIG } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\nimport { Observable, Subscription } from 'rxjs';\n\n@Component({\n selector: 'si-circle-status',\n imports: [SiIconComponent, SiTranslatePipe],\n templateUrl: './si-circle-status.component.html',\n styleUrl: './si-circle-status.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiCircleStatusComponent implements OnChanges, OnDestroy {\n private readonly statusIcons = inject(STATUS_ICON_CONFIG);\n /\n The status (success, info, warning, danger) to be visualized.\n /\n readonly status = input<EntityStatusType>();\n\n / DO NOT REMOVE: Even though the input is marked as deprecated, the core-team decided not to remove the\n input. The possibility to have custom color is often requested by projects, so we keep it.\n however in order to discourage it's use, we keep it marked deprecated.\n /\n /\n A custom color (e.g. `#fefefe`) for exceptional cases.\n * @deprecated use the semantic `status` input instead.\n /\n readonly color = input<string>();\n\n /\n Set a domain type icon (e.g. `element-door`) for which the status shall be shown.\n * Leave undefined for visualizing the status without an icon.\n /\n readonly icon = input<string>();\n\n /\n Set the size using either regular or small only works when used together with `icon`\n \n @defaultValue 'regular'\n /\n readonly size = input<'regular' \| 'small'>('regular');\n\n /\n event direction is out\n \n @defaultValue false\n /\n readonly eventOut = input(false, { transform: booleanAttribute });\n\n /\n Custom icon class for event out\n /\n readonly eventIcon = input<string>();\n\n /\n Whether the status should appear with a pulsing circle around the badge.\n \n @defaultValue false\n /\n readonly blink = input(false, { transform: booleanAttribute });\n\n /\n Blink pulse generator for synchronized blinking with other components\n /\n readonly blinkPulse = input<Observable<boolean>>();\n\n /\n Aria label for icon and status combo. Needed for a11y\n /\n readonly ariaLabel = input<TranslatableString>();\n\n protected readonly backgroundClass = computed(() => this.statusIcon()?.background ?? '');\n protected readonly theAriaLabel = computed(() => this.ariaLabel() ?? this.autoLabel());\n protected readonly autoLabel = computed(() => {\n const status = this.status();\n const statusName = status && this.statusIcons[status] ? status : 'none';\n const direction = this.eventOut() ? ' out' : '';\n const iconName = this.icon()?.replace(/^element-{0,1}(.+)/, '$1 ') ?? '';\n return `${iconName.toLocaleLowerCase()}${\n this.status() && this.icon() ? 'in ' : ''\n }status ${statusName}${direction}`;\n });\n protected readonly statusIcon = computed<StatusIcon \| undefined>(() => {\n const status = this.status();\n return status ? this.statusIcons[status] : undefined;\n });\n protected readonly blinkOn = signal(false);\n protected readonly contrastFix = signal(false);\n protected readonly icons = addIcons({ elementRight4 });\n private blinkSubs?: Subscription;\n\n private readonly bg = viewChild.required<ElementRef>('bg');\n\n private blinkService = inject(BlinkService);\n\n ngOnChanges(changes: SimpleChanges): void {\n if (this.blinkService && changes.blink) {\n this.blinkSubs?.unsubscribe();\n\n if (this.blink()) {\n const pulse = this.blinkPulse() ?? this.blinkService.pulse$;\n this.blinkSubs = pulse.subscribe(onOff => {\n this.blinkOn.set(onOff);\n });\n } else {\n this.blinkOn.set(false);\n }\n }\n if (changes.color \|\| changes.blink) {\n queueMicrotask(() => {\n this.contrastFix.set(!!this.color() && this.blink() && this.calculateContrastFix());\n });\n }\n }\n\n ngOnDestroy(): void {\n this.blinkSubs?.unsubscribe();\n }\n\n private calculateContrastFix(): boolean {\n // see https://www.w3.org/TR/AERT/#color-contrast\n const rgb = getComputedStyle(this.bg().nativeElement)\n .backgroundColor?.match(/\\d+/g)\n ?.map(v => +v);\n return !!rgb && Math.round((rgb[0] 299 + rgb[1] * 587 + rgb[2] * 114) / 1000) <= 128;\n }\n}\n","<div\n class=\"status-indication d-flex align-items-center justify-content-center\"\n role=\"status\"\n [class.has-icon]=\"icon()\"\n [class.small]=\"size() === 'small'\"\n [attr.aria-label]=\"theAriaLabel() \| translate\"\n>\n <div\n #bg\n [class]=\"`bg ${backgroundClass()}`\"\n [class.pulse]=\"blinkOn()\"\n [class.deprecated-color]=\"!status()\"\n [class.contrast-fix]=\"contrastFix()\"\n [style.background-color]=\"color()\"\n ></div>\n @if (!status()) {\n <div class=\"deprecated-dot\" [style.background-color]=\"color()\"></div>\n }\n @let iconConfig = statusIcon();\n @if (iconConfig) {\n <span class=\"status-icon icon-stack indicator\">\n <si-icon [class]=\"`status-icon ${iconConfig.color}`\" [icon]=\"iconConfig.icon\" />\n <si-icon [class]=\"`status-icon ${iconConfig.stackedColor}`\" [icon]=\"iconConfig.stacked\" />\n </span>\n }\n @let eventIconValue = eventIcon();\n @if (eventOut()) {\n <si-icon class=\"icon text-body event-out flip-rtl\" [icon]=\"icons.elementRight4\" />\n } @else if (eventIconValue) {\n <si-icon class=\"icon text-body event-out\" [icon]=\"eventIconValue\" />\n }\n @let iconValue = icon();\n @if (iconValue) {\n <si-icon class=\"icon position-relative text-body\" [icon]=\"iconValue\" />\n }\n</div>\n","/*\n Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n /\nimport { NgModule } from '@angular/core';\n\nimport { SiCircleStatusComponent } from './si-circle-status.component';\n\n@NgModule({\n imports: [SiCircleStatusComponent],\n exports: [SiCircleStatusComponent]\n})\nexport class SiCircleStatusModule {}\n","/\n Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n /\nexport from './si-circle-status.component';\nexport * from './si-circle-status.module';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/siemens-element-ng-color-picker.mjs CHANGED Viewed

@@ -2,8 +2,9 @@ import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import * as i0 from '@angular/core';
 import { input, model, booleanAttribute, viewChild, viewChildren, computed, signal, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { elementOk } from '@siemens/element-icons';
 import { isRTL } from '@siemens/element-ng/common';
-import { addIcons, elementOk, SiIconComponent } from '@siemens/element-ng/icon';
+import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
 import { SiTranslatePipe } from '@siemens/element-translate-ng/translate';
 /**
@@ -44,37 +45,37 @@ class SiColorPickerComponent {
      *
      * @defaultValue The first 16 colors of the Element data color palette.
      */
-    colorPalette = input(defaultDataColors);
+    colorPalette = input(defaultDataColors, ...(ngDevMode ? [{ debugName: "colorPalette" }] : []));
     /**
      * The selected color.
      */
-    color = model();
+    color = model(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
     /**
      * Specifies whether the color popup should automatically close on a color selection.
      *
      * @defaultValue false
      */
-    autoClose = input(false, { transform: booleanAttribute });
+    autoClose = input(false, { ...(ngDevMode ? { debugName: "autoClose" } : {}), transform: booleanAttribute });
     /**
      * Specifies whether the color picker component is disabled.
      *
      * @defaultValue false
      */
     // eslint-disable-next-line @angular-eslint/no-input-rename
-    disabledInput = input(false, { alias: 'disabled' });
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : {}), alias: 'disabled' });
     /**
      * Aria label for the color input button.
      */
-    ariaLabel = input();
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
     onChange = () => { };
     onTouched = () => { };
     colorInputRef = viewChild.required('colorInputBox');
-    swatchInputs = viewChildren('swatchInput');
-    selectedSwatchInput = computed(() => this.swatchInputs().find(swatchInput => swatchInput.nativeElement.checked));
-    disabledNgControl = signal(false);
+    swatchInputs = viewChildren('swatchInput', ...(ngDevMode ? [{ debugName: "swatchInputs" }] : []));
+    selectedSwatchInput = computed(() => this.swatchInputs().find(swatchInput => swatchInput.nativeElement.checked), ...(ngDevMode ? [{ debugName: "selectedSwatchInput" }] : []));
+    disabledNgControl = signal(false, ...(ngDevMode ? [{ debugName: "disabledNgControl" }] : []));
     numberOfColumns = 4;
-    disabled = computed(() => this.disabledInput() || this.disabledNgControl());
-    isOverlayOpen = signal(false);
+    disabled = computed(() => this.disabledInput() || this.disabledNgControl(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    isOverlayOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOverlayOpen" }] : []));
     icons = addIcons({ elementOk });
     blur() {
         if (!this.autoClose()) {
@@ -141,16 +142,16 @@ class SiColorPickerComponent {
     setDisabledState(isDisabled) {
         this.disabledNgControl.set(isDisabled);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiColorPickerComponent, isStandalone: true, selector: "si-color-picker", inputs: { colorPalette: { classPropertyName: "colorPalette", publicName: "colorPalette", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, autoClose: { classPropertyName: "autoClose", publicName: "autoClose", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiColorPickerComponent, isStandalone: true, selector: "si-color-picker", inputs: { colorPalette: { classPropertyName: "colorPalette", publicName: "colorPalette", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, autoClose: { classPropertyName: "autoClose", publicName: "autoClose", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: SiColorPickerComponent,
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "colorInputRef", first: true, predicate: ["colorInputBox"], descendants: true, isSignal: true }, { propertyName: "swatchInputs", predicate: ["swatchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  #colorInputBox\n  #trigger=\"cdkOverlayOrigin\"\n  cdkOverlayOrigin\n  class=\"input-color-box\"\n  type=\"button\"\n  [class.is-open]=\"isOverlayOpen()\"\n  [attr.aria-label]=\"(ariaLabel() | translate) + ' ' + color()\"\n  [disabled]=\"disabled()\"\n  (keydown.arrowDown)=\"openOverlay()\"\n  (blur)=\"blur()\"\n  (click)=\"openOverlay()\"\n>\n  <div class=\"inside-box\" [style.background-color]=\"'var(--' + color() + ')'\"></div>\n</button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOverlayOpen()\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (backdropClick)=\"overlayDetach()\"\n  (detach)=\"overlayDetach()\"\n>\n  <div #colorPaletteRef role=\"grid\" class=\"colors elevation-1 rounded-2 bg-base-1 p-4 mt-1\">\n    <div role=\"row\" class=\"d-flex flex-wrap gap-4\">\n      @for (paint of colorPalette(); track $index) {\n        <div role=\"gridcell\" class=\"swatch\">\n          <input\n            #swatchInput\n            type=\"radio\"\n            name=\"color\"\n            class=\"btn-check\"\n            [id]=\"paint\"\n            [attr.aria-label]=\"paint\"\n            [value]=\"paint\"\n            [checked]=\"color() === paint\"\n            (change)=\"selectColor(paint)\"\n            (keydown.enter)=\"selectColor(paint)\"\n            (keydown.arrowUp)=\"arrowUp($index, $event)\"\n            (keydown.arrowDown)=\"arrowDown($index, $event)\"\n            (keydown.arrowLeft)=\"arrowLeft($index, $event)\"\n            (keydown.arrowRight)=\"arrowRight($index, $event)\"\n            (keydown.tab)=\"overlayDetach()\"\n          />\n          <label\n            class=\"color-box swatch-label\"\n            [attr.for]=\"paint\"\n            [style.background]=\"'var(--' + paint + ')'\"\n          >\n            @if (color() === paint) {\n              <si-icon class=\"icon text-inverse\" [icon]=\"icons.elementOk\" />\n            }\n          </label>\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".color-box{position:relative;block-size:24px;inline-size:24px}input:focus~.color-box{outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}.input-color-box{cursor:pointer;position:relative;block-size:32px;inline-size:32px;padding:7px;border-radius:var(--element-radius-1);border-width:1px;border-style:solid;border-color:var(--element-ui-2);background-color:var(--element-base-1)}.input-color-box:hover{border-color:var(--element-ui-1)}.input-color-box:not(:hover){border-color:var(--element-ui-2)}.input-color-box:not(:hover).is-open{border-color:var(--element-ui-1)}.input-color-box:disabled{cursor:default;border-color:var(--element-ui-3)}.swatch{block-size:24px}.swatch-label{cursor:pointer}.swatch-label:hover{box-shadow:0 0 0 1px var(--element-button-focus-overlay-color),0 0 0 2px var(--element-ui-3)}.inside-box{block-size:16px;inline-size:16px}.colors{cursor:pointer;inline-size:136px;min-block-size:40px}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "colorInputRef", first: true, predicate: ["colorInputBox"], descendants: true, isSignal: true }, { propertyName: "swatchInputs", predicate: ["swatchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  #colorInputBox\n  #trigger=\"cdkOverlayOrigin\"\n  cdkOverlayOrigin\n  class=\"input-color-box\"\n  type=\"button\"\n  [class.is-open]=\"isOverlayOpen()\"\n  [attr.aria-label]=\"(ariaLabel() | translate) + ' ' + color()\"\n  [disabled]=\"disabled()\"\n  (keydown.arrowDown)=\"openOverlay()\"\n  (blur)=\"blur()\"\n  (click)=\"openOverlay()\"\n>\n  <div class=\"inside-box\" [style.background-color]=\"'var(--' + color() + ')'\"></div>\n</button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOverlayOpen()\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (backdropClick)=\"overlayDetach()\"\n  (detach)=\"overlayDetach()\"\n>\n  <div #colorPaletteRef role=\"grid\" class=\"colors elevation-1 rounded-2 bg-base-1 p-4 mt-1\">\n    <div role=\"row\" class=\"d-flex flex-wrap gap-4\">\n      @for (paint of colorPalette(); track $index) {\n        <div role=\"gridcell\" class=\"swatch\">\n          <input\n            #swatchInput\n            type=\"radio\"\n            name=\"color\"\n            class=\"btn-check\"\n            [id]=\"paint\"\n            [attr.aria-label]=\"paint\"\n            [value]=\"paint\"\n            [checked]=\"color() === paint\"\n            (change)=\"selectColor(paint)\"\n            (keydown.enter)=\"selectColor(paint)\"\n            (keydown.arrowUp)=\"arrowUp($index, $event)\"\n            (keydown.arrowDown)=\"arrowDown($index, $event)\"\n            (keydown.arrowLeft)=\"arrowLeft($index, $event)\"\n            (keydown.arrowRight)=\"arrowRight($index, $event)\"\n            (keydown.tab)=\"overlayDetach()\"\n          />\n          <label\n            class=\"color-box swatch-label\"\n            [attr.for]=\"paint\"\n            [style.background]=\"'var(--' + paint + ')'\"\n          >\n            @if (color() === paint) {\n              <si-icon class=\"icon text-inverse p-1\" [icon]=\"icons.elementOk\" />\n            }\n          </label>\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".color-box{position:relative;block-size:24px;inline-size:24px}input:focus~.color-box{outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}.input-color-box{cursor:pointer;position:relative;block-size:32px;inline-size:32px;padding:7px;border-radius:var(--element-radius-1);border-width:1px;border-style:solid;border-color:var(--element-ui-2);background-color:var(--element-base-1)}.input-color-box:hover{border-color:var(--element-ui-1)}.input-color-box:not(:hover){border-color:var(--element-ui-2)}.input-color-box:not(:hover).is-open{border-color:var(--element-ui-1)}.input-color-box:disabled{cursor:default;border-color:var(--element-ui-3)}.swatch{block-size:24px}.swatch-label{cursor:pointer}.swatch-label:hover{box-shadow:0 0 0 1px var(--element-button-focus-overlay-color),0 0 0 2px var(--element-ui-3)}.inside-box{block-size:16px;inline-size:16px}.colors{cursor:pointer;inline-size:136px;min-block-size:40px}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiColorPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiColorPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-color-picker', imports: [SiIconComponent, SiTranslatePipe, CdkConnectedOverlay, CdkOverlayOrigin], providers: [
                         {
@@ -158,8 +159,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                             useExisting: SiColorPickerComponent,
                             multi: true
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  #colorInputBox\n  #trigger=\"cdkOverlayOrigin\"\n  cdkOverlayOrigin\n  class=\"input-color-box\"\n  type=\"button\"\n  [class.is-open]=\"isOverlayOpen()\"\n  [attr.aria-label]=\"(ariaLabel() | translate) + ' ' + color()\"\n  [disabled]=\"disabled()\"\n  (keydown.arrowDown)=\"openOverlay()\"\n  (blur)=\"blur()\"\n  (click)=\"openOverlay()\"\n>\n  <div class=\"inside-box\" [style.background-color]=\"'var(--' + color() + ')'\"></div>\n</button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOverlayOpen()\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (backdropClick)=\"overlayDetach()\"\n  (detach)=\"overlayDetach()\"\n>\n  <div #colorPaletteRef role=\"grid\" class=\"colors elevation-1 rounded-2 bg-base-1 p-4 mt-1\">\n    <div role=\"row\" class=\"d-flex flex-wrap gap-4\">\n      @for (paint of colorPalette(); track $index) {\n        <div role=\"gridcell\" class=\"swatch\">\n          <input\n            #swatchInput\n            type=\"radio\"\n            name=\"color\"\n            class=\"btn-check\"\n            [id]=\"paint\"\n            [attr.aria-label]=\"paint\"\n            [value]=\"paint\"\n            [checked]=\"color() === paint\"\n            (change)=\"selectColor(paint)\"\n            (keydown.enter)=\"selectColor(paint)\"\n            (keydown.arrowUp)=\"arrowUp($index, $event)\"\n            (keydown.arrowDown)=\"arrowDown($index, $event)\"\n            (keydown.arrowLeft)=\"arrowLeft($index, $event)\"\n            (keydown.arrowRight)=\"arrowRight($index, $event)\"\n            (keydown.tab)=\"overlayDetach()\"\n          />\n          <label\n            class=\"color-box swatch-label\"\n            [attr.for]=\"paint\"\n            [style.background]=\"'var(--' + paint + ')'\"\n          >\n            @if (color() === paint) {\n              <si-icon class=\"icon text-inverse\" [icon]=\"icons.elementOk\" />\n            }\n          </label>\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".color-box{position:relative;block-size:24px;inline-size:24px}input:focus~.color-box{outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}.input-color-box{cursor:pointer;position:relative;block-size:32px;inline-size:32px;padding:7px;border-radius:var(--element-radius-1);border-width:1px;border-style:solid;border-color:var(--element-ui-2);background-color:var(--element-base-1)}.input-color-box:hover{border-color:var(--element-ui-1)}.input-color-box:not(:hover){border-color:var(--element-ui-2)}.input-color-box:not(:hover).is-open{border-color:var(--element-ui-1)}.input-color-box:disabled{cursor:default;border-color:var(--element-ui-3)}.swatch{block-size:24px}.swatch-label{cursor:pointer}.swatch-label:hover{box-shadow:0 0 0 1px var(--element-button-focus-overlay-color),0 0 0 2px var(--element-ui-3)}.inside-box{block-size:16px;inline-size:16px}.colors{cursor:pointer;inline-size:136px;min-block-size:40px}\n"] }]
-        }] });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  #colorInputBox\n  #trigger=\"cdkOverlayOrigin\"\n  cdkOverlayOrigin\n  class=\"input-color-box\"\n  type=\"button\"\n  [class.is-open]=\"isOverlayOpen()\"\n  [attr.aria-label]=\"(ariaLabel() | translate) + ' ' + color()\"\n  [disabled]=\"disabled()\"\n  (keydown.arrowDown)=\"openOverlay()\"\n  (blur)=\"blur()\"\n  (click)=\"openOverlay()\"\n>\n  <div class=\"inside-box\" [style.background-color]=\"'var(--' + color() + ')'\"></div>\n</button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOverlayOpen()\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (backdropClick)=\"overlayDetach()\"\n  (detach)=\"overlayDetach()\"\n>\n  <div #colorPaletteRef role=\"grid\" class=\"colors elevation-1 rounded-2 bg-base-1 p-4 mt-1\">\n    <div role=\"row\" class=\"d-flex flex-wrap gap-4\">\n      @for (paint of colorPalette(); track $index) {\n        <div role=\"gridcell\" class=\"swatch\">\n          <input\n            #swatchInput\n            type=\"radio\"\n            name=\"color\"\n            class=\"btn-check\"\n            [id]=\"paint\"\n            [attr.aria-label]=\"paint\"\n            [value]=\"paint\"\n            [checked]=\"color() === paint\"\n            (change)=\"selectColor(paint)\"\n            (keydown.enter)=\"selectColor(paint)\"\n            (keydown.arrowUp)=\"arrowUp($index, $event)\"\n            (keydown.arrowDown)=\"arrowDown($index, $event)\"\n            (keydown.arrowLeft)=\"arrowLeft($index, $event)\"\n            (keydown.arrowRight)=\"arrowRight($index, $event)\"\n            (keydown.tab)=\"overlayDetach()\"\n          />\n          <label\n            class=\"color-box swatch-label\"\n            [attr.for]=\"paint\"\n            [style.background]=\"'var(--' + paint + ')'\"\n          >\n            @if (color() === paint) {\n              <si-icon class=\"icon text-inverse p-1\" [icon]=\"icons.elementOk\" />\n            }\n          </label>\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".color-box{position:relative;block-size:24px;inline-size:24px}input:focus~.color-box{outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}.input-color-box{cursor:pointer;position:relative;block-size:32px;inline-size:32px;padding:7px;border-radius:var(--element-radius-1);border-width:1px;border-style:solid;border-color:var(--element-ui-2);background-color:var(--element-base-1)}.input-color-box:hover{border-color:var(--element-ui-1)}.input-color-box:not(:hover){border-color:var(--element-ui-2)}.input-color-box:not(:hover).is-open{border-color:var(--element-ui-1)}.input-color-box:disabled{cursor:default;border-color:var(--element-ui-3)}.swatch{block-size:24px}.swatch-label{cursor:pointer}.swatch-label:hover{box-shadow:0 0 0 1px var(--element-button-focus-overlay-color),0 0 0 2px var(--element-ui-3)}.inside-box{block-size:16px;inline-size:16px}.colors{cursor:pointer;inline-size:136px;min-block-size:40px}\n"] }]
+        }], propDecorators: { colorPalette: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorPalette", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }, { type: i0.Output, args: ["colorChange"] }], autoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoClose", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], colorInputRef: [{ type: i0.ViewChild, args: ['colorInputBox', { isSignal: true }] }], swatchInputs: [{ type: i0.ViewChildren, args: ['swatchInput', { isSignal: true }] }] } });
 /**
  * Copyright (c) Siemens 2016 - 2025

package/fesm2022/siemens-element-ng-color-picker.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"siemens-element-ng-color-picker.mjs","sources":["../../../../projects/element-ng/color-picker/si-color-picker.component.ts","../../../../projects/element-ng/color-picker/si-color-picker.component.html","../../../../projects/element-ng/color-picker/index.ts","../../../../projects/element-ng/color-picker/siemens-element-ng-color-picker.ts"],"sourcesContent":["/*\n Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n /\nimport { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n ElementRef,\n input,\n model,\n signal,\n viewChild,\n viewChildren\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { isRTL } from '@siemens/element-ng/common';\nimport { addIcons, elementOk, SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\n/\n The Element data color palette is used as default.\n * Note: This array needs to be kept in sync with the design system data color tokens.\n /\nconst defaultDataColors: string[] = [\n 'element-data-1',\n 'element-data-2',\n 'element-data-3',\n 'element-data-4',\n 'element-data-5',\n 'element-data-6',\n 'element-data-7',\n 'element-data-8',\n 'element-data-9',\n 'element-data-10',\n 'element-data-11',\n 'element-data-12',\n 'element-data-13',\n 'element-data-14',\n 'element-data-15',\n 'element-data-16'\n];\n@Component({\n selector: 'si-color-picker',\n imports: [SiIconComponent, SiTranslatePipe, CdkConnectedOverlay, CdkOverlayOrigin],\n templateUrl: './si-color-picker.component.html',\n styleUrl: './si-color-picker.component.scss',\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: SiColorPickerComponent,\n multi: true\n }\n ],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiColorPickerComponent implements ControlValueAccessor {\n // eslint-disable-next-line defaultValue/tsdoc-defaultValue-annotation\n /\n The color palette to choose the colors from. As colors, only valid CSS\n * variable names omitting the `--` prefix or Element color tokens omitting\n * the `$` prefix are supported.\n \n Note: If custom CSS variables are provided, they need to be defined for\n * both light and dark mode.\n \n @defaultValue The first 16 colors of the Element data color palette.\n /\n readonly colorPalette = input<string[]>(defaultDataColors);\n\n /\n The selected color.\n /\n readonly color = model<string>();\n\n /\n Specifies whether the color popup should automatically close on a color selection.\n \n @defaultValue false\n /\n readonly autoClose = input(false, { transform: booleanAttribute });\n\n /\n Specifies whether the color picker component is disabled.\n \n @defaultValue false\n /\n // eslint-disable-next-line @angular-eslint/no-input-rename\n readonly disabledInput = input(false, { alias: 'disabled' });\n\n /\n Aria label for the color input button.\n /\n readonly ariaLabel = input<TranslatableString>();\n\n private onChange: (value: string) => void = () => {};\n private onTouched: () => void = () => {};\n\n private readonly colorInputRef =\n viewChild.required<ElementRef<HTMLInputElement>>('colorInputBox');\n private readonly swatchInputs = viewChildren<ElementRef<HTMLInputElement>>('swatchInput');\n private readonly selectedSwatchInput = computed(() =>\n this.swatchInputs().find(swatchInput => swatchInput.nativeElement.checked)\n );\n private readonly disabledNgControl = signal(false);\n private readonly numberOfColumns = 4;\n protected readonly disabled = computed(() => this.disabledInput() \|\| this.disabledNgControl());\n protected readonly isOverlayOpen = signal(false);\n protected readonly icons = addIcons({ elementOk });\n\n protected blur(): void {\n if (!this.autoClose()) {\n this.onTouched();\n }\n }\n\n protected arrowDown(index: number, event: Event): void {\n const nextIndex = index + this.numberOfColumns;\n this.focusLabel(nextIndex);\n event.preventDefault();\n }\n\n protected arrowUp(index: number, event: Event): void {\n const prevIndex = index - this.numberOfColumns;\n this.focusLabel(prevIndex);\n event.preventDefault();\n }\n\n protected arrowLeft(index: number, event: Event): void {\n const prevIndex = index + (isRTL() ? 1 : -1);\n this.focusLabel(prevIndex);\n event.preventDefault();\n }\n\n protected arrowRight(index: number, event: Event): void {\n const prevIndex = index + (isRTL() ? -1 : +1);\n this.focusLabel(prevIndex);\n event.preventDefault();\n }\n\n private focusLabel(index: number): void {\n const labels = this.swatchInputs();\n const totalSwatches = labels.length;\n const normalizedIndex = (index + totalSwatches) % totalSwatches;\n labels[normalizedIndex].nativeElement.focus();\n }\n\n protected openOverlay(): void {\n this.isOverlayOpen.set(true);\n this.focusSelectedColor();\n }\n\n protected overlayDetach(): void {\n this.isOverlayOpen.set(false);\n setTimeout(() => {\n this.colorInputRef().nativeElement?.focus();\n });\n }\n\n private focusSelectedColor(): void {\n setTimeout(() => {\n this.selectedSwatchInput()?.nativeElement.focus();\n });\n }\n\n protected selectColor(color: string): void {\n this.color.set(color);\n this.onChange(color!);\n if (this.autoClose()) {\n this.overlayDetach();\n }\n }\n\n writeValue(value: string): void {\n this.color.set(value);\n }\n\n registerOnChange(fn: (value: string) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabledNgControl.set(isDisabled);\n }\n}\n","<button\n #colorInputBox\n #trigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n class=\"input-color-box\"\n type=\"button\"\n [class.is-open]=\"isOverlayOpen()\"\n [attr.aria-label]=\"(ariaLabel() \| translate) + ' ' + color()\"\n [disabled]=\"disabled()\"\n (keydown.arrowDown)=\"openOverlay()\"\n (blur)=\"blur()\"\n (click)=\"openOverlay()\"\n>\n <div class=\"inside-box\" [style.background-color]=\"'var(--' + color() + ')'\"></div>\n</button>\n\n<ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOverlayOpen()\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n (backdropClick)=\"overlayDetach()\"\n (detach)=\"overlayDetach()\"\n>\n <div #colorPaletteRef role=\"grid\" class=\"colors elevation-1 rounded-2 bg-base-1 p-4 mt-1\">\n <div role=\"row\" class=\"d-flex flex-wrap gap-4\">\n @for (paint of colorPalette(); track $index) {\n <div role=\"gridcell\" class=\"swatch\">\n <input\n #swatchInput\n type=\"radio\"\n name=\"color\"\n class=\"btn-check\"\n [id]=\"paint\"\n [attr.aria-label]=\"paint\"\n [value]=\"paint\"\n [checked]=\"color() === paint\"\n (change)=\"selectColor(paint)\"\n (keydown.enter)=\"selectColor(paint)\"\n (keydown.arrowUp)=\"arrowUp($index, $event)\"\n (keydown.arrowDown)=\"arrowDown($index, $event)\"\n (keydown.arrowLeft)=\"arrowLeft($index, $event)\"\n (keydown.arrowRight)=\"arrowRight($index, $event)\"\n (keydown.tab)=\"overlayDetach()\"\n />\n <label\n class=\"color-box swatch-label\"\n [attr.for]=\"paint\"\n [style.background]=\"'var(--' + paint + ')'\"\n >\n @if (color() === paint) {\n <si-icon class=\"icon text-inverse\" [icon]=\"icons.elementOk\" />\n }\n </label>\n </div>\n }\n </div>\n </div>\n</ng-template>\n","/\n Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n /\nexport from './si-color-picker.component';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"siemens-element-ng-color-picker.mjs","sources":["../../../../projects/element-ng/color-picker/si-color-picker.component.ts","../../../../projects/element-ng/color-picker/si-color-picker.component.html","../../../../projects/element-ng/color-picker/index.ts","../../../../projects/element-ng/color-picker/siemens-element-ng-color-picker.ts"],"sourcesContent":["/*\n Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n /\nimport { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n ElementRef,\n input,\n model,\n signal,\n viewChild,\n viewChildren\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { elementOk } from '@siemens/element-icons';\nimport { isRTL } from '@siemens/element-ng/common';\nimport { addIcons, SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\n/\n The Element data color palette is used as default.\n * Note: This array needs to be kept in sync with the design system data color tokens.\n /\nconst defaultDataColors: string[] = [\n 'element-data-1',\n 'element-data-2',\n 'element-data-3',\n 'element-data-4',\n 'element-data-5',\n 'element-data-6',\n 'element-data-7',\n 'element-data-8',\n 'element-data-9',\n 'element-data-10',\n 'element-data-11',\n 'element-data-12',\n 'element-data-13',\n 'element-data-14',\n 'element-data-15',\n 'element-data-16'\n];\n@Component({\n selector: 'si-color-picker',\n imports: [SiIconComponent, SiTranslatePipe, CdkConnectedOverlay, CdkOverlayOrigin],\n templateUrl: './si-color-picker.component.html',\n styleUrl: './si-color-picker.component.scss',\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: SiColorPickerComponent,\n multi: true\n }\n ],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiColorPickerComponent implements ControlValueAccessor {\n // eslint-disable-next-line defaultValue/tsdoc-defaultValue-annotation\n /\n The color palette to choose the colors from. As colors, only valid CSS\n * variable names omitting the `--` prefix or Element color tokens omitting\n * the `$` prefix are supported.\n \n Note: If custom CSS variables are provided, they need to be defined for\n * both light and dark mode.\n \n @defaultValue The first 16 colors of the Element data color palette.\n /\n readonly colorPalette = input<string[]>(defaultDataColors);\n\n /\n The selected color.\n /\n readonly color = model<string>();\n\n /\n Specifies whether the color popup should automatically close on a color selection.\n \n @defaultValue false\n /\n readonly autoClose = input(false, { transform: booleanAttribute });\n\n /\n Specifies whether the color picker component is disabled.\n \n @defaultValue false\n /\n // eslint-disable-next-line @angular-eslint/no-input-rename\n readonly disabledInput = input(false, { alias: 'disabled' });\n\n /\n Aria label for the color input button.\n /\n readonly ariaLabel = input<TranslatableString>();\n\n private onChange: (value: string) => void = () => {};\n private onTouched: () => void = () => {};\n\n private readonly colorInputRef =\n viewChild.required<ElementRef<HTMLInputElement>>('colorInputBox');\n private readonly swatchInputs = viewChildren<ElementRef<HTMLInputElement>>('swatchInput');\n private readonly selectedSwatchInput = computed(() =>\n this.swatchInputs().find(swatchInput => swatchInput.nativeElement.checked)\n );\n private readonly disabledNgControl = signal(false);\n private readonly numberOfColumns = 4;\n protected readonly disabled = computed(() => this.disabledInput() \|\| this.disabledNgControl());\n protected readonly isOverlayOpen = signal(false);\n protected readonly icons = addIcons({ elementOk });\n\n protected blur(): void {\n if (!this.autoClose()) {\n this.onTouched();\n }\n }\n\n protected arrowDown(index: number, event: Event): void {\n const nextIndex = index + this.numberOfColumns;\n this.focusLabel(nextIndex);\n event.preventDefault();\n }\n\n protected arrowUp(index: number, event: Event): void {\n const prevIndex = index - this.numberOfColumns;\n this.focusLabel(prevIndex);\n event.preventDefault();\n }\n\n protected arrowLeft(index: number, event: Event): void {\n const prevIndex = index + (isRTL() ? 1 : -1);\n this.focusLabel(prevIndex);\n event.preventDefault();\n }\n\n protected arrowRight(index: number, event: Event): void {\n const prevIndex = index + (isRTL() ? -1 : +1);\n this.focusLabel(prevIndex);\n event.preventDefault();\n }\n\n private focusLabel(index: number): void {\n const labels = this.swatchInputs();\n const totalSwatches = labels.length;\n const normalizedIndex = (index + totalSwatches) % totalSwatches;\n labels[normalizedIndex].nativeElement.focus();\n }\n\n protected openOverlay(): void {\n this.isOverlayOpen.set(true);\n this.focusSelectedColor();\n }\n\n protected overlayDetach(): void {\n this.isOverlayOpen.set(false);\n setTimeout(() => {\n this.colorInputRef().nativeElement?.focus();\n });\n }\n\n private focusSelectedColor(): void {\n setTimeout(() => {\n this.selectedSwatchInput()?.nativeElement.focus();\n });\n }\n\n protected selectColor(color: string): void {\n this.color.set(color);\n this.onChange(color!);\n if (this.autoClose()) {\n this.overlayDetach();\n }\n }\n\n writeValue(value: string): void {\n this.color.set(value);\n }\n\n registerOnChange(fn: (value: string) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabledNgControl.set(isDisabled);\n }\n}\n","<button\n #colorInputBox\n #trigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n class=\"input-color-box\"\n type=\"button\"\n [class.is-open]=\"isOverlayOpen()\"\n [attr.aria-label]=\"(ariaLabel() \| translate) + ' ' + color()\"\n [disabled]=\"disabled()\"\n (keydown.arrowDown)=\"openOverlay()\"\n (blur)=\"blur()\"\n (click)=\"openOverlay()\"\n>\n <div class=\"inside-box\" [style.background-color]=\"'var(--' + color() + ')'\"></div>\n</button>\n\n<ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOverlayOpen()\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n (backdropClick)=\"overlayDetach()\"\n (detach)=\"overlayDetach()\"\n>\n <div #colorPaletteRef role=\"grid\" class=\"colors elevation-1 rounded-2 bg-base-1 p-4 mt-1\">\n <div role=\"row\" class=\"d-flex flex-wrap gap-4\">\n @for (paint of colorPalette(); track $index) {\n <div role=\"gridcell\" class=\"swatch\">\n <input\n #swatchInput\n type=\"radio\"\n name=\"color\"\n class=\"btn-check\"\n [id]=\"paint\"\n [attr.aria-label]=\"paint\"\n [value]=\"paint\"\n [checked]=\"color() === paint\"\n (change)=\"selectColor(paint)\"\n (keydown.enter)=\"selectColor(paint)\"\n (keydown.arrowUp)=\"arrowUp($index, $event)\"\n (keydown.arrowDown)=\"arrowDown($index, $event)\"\n (keydown.arrowLeft)=\"arrowLeft($index, $event)\"\n (keydown.arrowRight)=\"arrowRight($index, $event)\"\n (keydown.tab)=\"overlayDetach()\"\n />\n <label\n class=\"color-box swatch-label\"\n [attr.for]=\"paint\"\n [style.background]=\"'var(--' + paint + ')'\"\n >\n @if (color() === paint) {\n <si-icon class=\"icon text-inverse p-1\" [icon]=\"icons.elementOk\" />\n }\n </label>\n </div>\n }\n </div>\n </div>\n</ng-template>\n","/\n Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n /\nexport from './si-color-picker.component';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/siemens-element-ng-column-selection-dialog.mjs CHANGED Viewed

@@ -7,7 +7,8 @@ import { CdkDragHandle, moveItemInArray, CdkDrag, CdkDropList, CDK_DRAG_CONFIG }
 import { CdkOption, CdkListbox } from '@angular/cdk/listbox';
 import * as i1 from '@angular/cdk/scrolling';
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
-import { addIcons, elementShow, elementLock, elementMenu, elementHide, SiIconComponent, elementCancel } from '@siemens/element-ng/icon';
+import { elementShow, elementLock, elementMenu, elementHide, elementCancel } from '@siemens/element-icons';
+import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
 import { t, injectSiTranslateService, SiTranslatePipe } from '@siemens/element-translate-ng/translate';
 import { first } from 'rxjs/operators';
@@ -16,10 +17,10 @@ import { first } from 'rxjs/operators';
  * SPDX-License-Identifier: MIT
  */
 class SiColumnSelectionEditorComponent {
-    column = input.required();
-    selected = input.required();
-    renameInputLabel = input.required();
-    columnVisibilityConfigurable = input.required();
+    column = input.required(...(ngDevMode ? [{ debugName: "column" }] : []));
+    selected = input.required(...(ngDevMode ? [{ debugName: "selected" }] : []));
+    renameInputLabel = input.required(...(ngDevMode ? [{ debugName: "renameInputLabel" }] : []));
+    columnVisibilityConfigurable = input.required(...(ngDevMode ? [{ debugName: "columnVisibilityConfigurable" }] : []));
     titleChange = output();
     visibilityChange = output();
     cdkOption = inject(CdkOption);
@@ -57,15 +58,15 @@ class SiColumnSelectionEditorComponent {
         // manually toggling does not emit an event, so we have to fire one
         this.visibilityChange.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiColumnSelectionEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiColumnSelectionEditorComponent, isStandalone: true, selector: "si-column-selection-editor", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: true, transformFunction: null }, renameInputLabel: { classPropertyName: "renameInputLabel", publicName: "renameInputLabel", isSignal: true, isRequired: true, transformFunction: null }, columnVisibilityConfigurable: { classPropertyName: "columnVisibilityConfigurable", publicName: "columnVisibilityConfigurable", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { titleChange: "titleChange", visibilityChange: "visibilityChange" }, host: { listeners: { "keydown.enter": "tryEdit($event)" }, classAttribute: "d-block my-4 mx-1 rounded-2 elevation-1" }, viewQueries: [{ propertyName: "title", first: true, predicate: ["title"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"d-flex p-4\" (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n  <div class=\"flex-fill overflow-hidden\" [attr.aria-label]=\"column().title\">\n    @if (editing) {\n      <input\n        #title\n        type=\"text\"\n        class=\"form-control w-100\"\n        [attr.aria-label]=\"renameInputLabel()\"\n        [value]=\"column().title\"\n        (input)=\"updateTitle(title.value)\"\n        (keydown.enter)=\"stopEdit()\"\n        (blur)=\"stopEdit()\"\n      />\n    } @else {\n      <span\n        class=\"form-control text-truncate w-100\"\n        [class.border-0]=\"!column().editable\"\n        [class.px-0]=\"!column().editable\"\n        [class.disabled]=\"column().disabled\"\n        (click)=\"startEdit()\"\n        >{{ column().title }}</span\n      >\n    }\n  </div>\n\n  <div class=\"d-flex align-items-center flex-shrink-0\">\n    @if (columnVisibilityConfigurable()) {\n      <span\n        class=\"btn btn-circle btn-sm btn-tertiary ms-4\"\n        [class.text-primary]=\"!column().disabled\"\n        [class.disabled]=\"column().disabled\"\n        (click)=\"toggleVisibility()\"\n      >\n        <si-icon [icon]=\"selected() ? icons.elementShow : icons.elementHide\" />\n      </span>\n    }\n    <span\n      cdkDragHandle\n      class=\"btn btn-circle btn-sm btn-tertiary ms-4\"\n      [class.disabled]=\"column().disabled\"\n      [class.pe-none]=\"!column().draggable\"\n    >\n      <si-icon\n        [class.pe-none]=\"!column().draggable\"\n        [icon]=\"column().draggable ? icons.elementMenu : icons.elementLock\"\n      />\n    </span>\n  </div>\n</div>\n", styles: [".form-control{cursor:text}\n"], dependencies: [{ kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiColumnSelectionEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiColumnSelectionEditorComponent, isStandalone: true, selector: "si-column-selection-editor", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: true, transformFunction: null }, renameInputLabel: { classPropertyName: "renameInputLabel", publicName: "renameInputLabel", isSignal: true, isRequired: true, transformFunction: null }, columnVisibilityConfigurable: { classPropertyName: "columnVisibilityConfigurable", publicName: "columnVisibilityConfigurable", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { titleChange: "titleChange", visibilityChange: "visibilityChange" }, host: { listeners: { "keydown.enter": "tryEdit($event)" }, classAttribute: "d-block my-4 mx-1 rounded-2 elevation-1" }, viewQueries: [{ propertyName: "title", first: true, predicate: ["title"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"d-flex p-4\" (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n  <div class=\"flex-fill overflow-hidden\" [attr.aria-label]=\"column().title\">\n    @if (editing) {\n      <input\n        #title\n        type=\"text\"\n        class=\"form-control w-100\"\n        [attr.aria-label]=\"renameInputLabel()\"\n        [value]=\"column().title\"\n        (input)=\"updateTitle(title.value)\"\n        (keydown.enter)=\"stopEdit()\"\n        (blur)=\"stopEdit()\"\n      />\n    } @else {\n      <span\n        class=\"form-control text-truncate w-100\"\n        [class.border-0]=\"!column().editable\"\n        [class.px-0]=\"!column().editable\"\n        [class.disabled]=\"column().disabled\"\n        (click)=\"startEdit()\"\n        >{{ column().title }}</span\n      >\n    }\n  </div>\n\n  <div class=\"d-flex align-items-center flex-shrink-0\">\n    @if (columnVisibilityConfigurable()) {\n      <span\n        class=\"btn btn-circle btn-tertiary ms-4\"\n        [class.text-primary]=\"!column().disabled\"\n        [class.disabled]=\"column().disabled\"\n        (click)=\"toggleVisibility()\"\n      >\n        <si-icon [icon]=\"selected() ? icons.elementShow : icons.elementHide\" />\n      </span>\n    }\n    <span\n      cdkDragHandle\n      class=\"btn btn-circle btn-tertiary ms-4\"\n      [class.disabled]=\"column().disabled\"\n      [class.pe-none]=\"!column().draggable\"\n    >\n      <si-icon\n        [class.pe-none]=\"!column().draggable\"\n        [icon]=\"column().draggable ? icons.elementMenu : icons.elementLock\"\n      />\n    </span>\n  </div>\n</div>\n", styles: [".form-control{cursor:text}\n"], dependencies: [{ kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiColumnSelectionEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiColumnSelectionEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-column-selection-editor', imports: [CdkDragHandle, SiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'd-block my-4 mx-1 rounded-2 elevation-1'
-                    }, template: "<div class=\"d-flex p-4\" (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n  <div class=\"flex-fill overflow-hidden\" [attr.aria-label]=\"column().title\">\n    @if (editing) {\n      <input\n        #title\n        type=\"text\"\n        class=\"form-control w-100\"\n        [attr.aria-label]=\"renameInputLabel()\"\n        [value]=\"column().title\"\n        (input)=\"updateTitle(title.value)\"\n        (keydown.enter)=\"stopEdit()\"\n        (blur)=\"stopEdit()\"\n      />\n    } @else {\n      <span\n        class=\"form-control text-truncate w-100\"\n        [class.border-0]=\"!column().editable\"\n        [class.px-0]=\"!column().editable\"\n        [class.disabled]=\"column().disabled\"\n        (click)=\"startEdit()\"\n        >{{ column().title }}</span\n      >\n    }\n  </div>\n\n  <div class=\"d-flex align-items-center flex-shrink-0\">\n    @if (columnVisibilityConfigurable()) {\n      <span\n        class=\"btn btn-circle btn-sm btn-tertiary ms-4\"\n        [class.text-primary]=\"!column().disabled\"\n        [class.disabled]=\"column().disabled\"\n        (click)=\"toggleVisibility()\"\n      >\n        <si-icon [icon]=\"selected() ? icons.elementShow : icons.elementHide\" />\n      </span>\n    }\n    <span\n      cdkDragHandle\n      class=\"btn btn-circle btn-sm btn-tertiary ms-4\"\n      [class.disabled]=\"column().disabled\"\n      [class.pe-none]=\"!column().draggable\"\n    >\n      <si-icon\n        [class.pe-none]=\"!column().draggable\"\n        [icon]=\"column().draggable ? icons.elementMenu : icons.elementLock\"\n      />\n    </span>\n  </div>\n</div>\n", styles: [".form-control{cursor:text}\n"] }]
-        }], propDecorators: { tryEdit: [{
+                    }, template: "<div class=\"d-flex p-4\" (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n  <div class=\"flex-fill overflow-hidden\" [attr.aria-label]=\"column().title\">\n    @if (editing) {\n      <input\n        #title\n        type=\"text\"\n        class=\"form-control w-100\"\n        [attr.aria-label]=\"renameInputLabel()\"\n        [value]=\"column().title\"\n        (input)=\"updateTitle(title.value)\"\n        (keydown.enter)=\"stopEdit()\"\n        (blur)=\"stopEdit()\"\n      />\n    } @else {\n      <span\n        class=\"form-control text-truncate w-100\"\n        [class.border-0]=\"!column().editable\"\n        [class.px-0]=\"!column().editable\"\n        [class.disabled]=\"column().disabled\"\n        (click)=\"startEdit()\"\n        >{{ column().title }}</span\n      >\n    }\n  </div>\n\n  <div class=\"d-flex align-items-center flex-shrink-0\">\n    @if (columnVisibilityConfigurable()) {\n      <span\n        class=\"btn btn-circle btn-tertiary ms-4\"\n        [class.text-primary]=\"!column().disabled\"\n        [class.disabled]=\"column().disabled\"\n        (click)=\"toggleVisibility()\"\n      >\n        <si-icon [icon]=\"selected() ? icons.elementShow : icons.elementHide\" />\n      </span>\n    }\n    <span\n      cdkDragHandle\n      class=\"btn btn-circle btn-tertiary ms-4\"\n      [class.disabled]=\"column().disabled\"\n      [class.pe-none]=\"!column().draggable\"\n    >\n      <si-icon\n        [class.pe-none]=\"!column().draggable\"\n        [icon]=\"column().draggable ? icons.elementMenu : icons.elementLock\"\n      />\n    </span>\n  </div>\n</div>\n", styles: [".form-control{cursor:text}\n"] }]
+        }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: true }] }], renameInputLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "renameInputLabel", required: true }] }], columnVisibilityConfigurable: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnVisibilityConfigurable", required: true }] }], titleChange: [{ type: i0.Output, args: ["titleChange"] }], visibilityChange: [{ type: i0.Output, args: ["visibilityChange"] }], title: [{ type: i0.ViewChild, args: ['title', { isSignal: true }] }], tryEdit: [{
                 type: HostListener,
                 args: ['keydown.enter', ['$event']]
             }] } });
@@ -80,85 +81,85 @@ const dragConfig = {
     zIndex: 10000
 };
 class SiColumnSelectionDialogComponent {
-    titleId = input();
-    heading = input();
-    bodyTitle = input();
+    titleId = input(...(ngDevMode ? [undefined, { debugName: "titleId" }] : []));
+    heading = input(...(ngDevMode ? [undefined, { debugName: "heading" }] : []));
+    bodyTitle = input(...(ngDevMode ? [undefined, { debugName: "bodyTitle" }] : []));
     /**
      * @defaultValue
      * ```
      * t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.SUBMIT:Apply`)
      * ```
      */
-    submitBtnName = input(t(() => $localize `:@@SI_COLUMN_SELECTION_DIALOG.SUBMIT:Apply`));
+    submitBtnName = input(t(() => $localize `:@@SI_COLUMN_SELECTION_DIALOG.SUBMIT:Apply`), ...(ngDevMode ? [{ debugName: "submitBtnName" }] : []));
     /**
      * @defaultValue
      * ```
      * t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.CANCEL:Cancel`)
      * ```
      */
-    cancelBtnName = input(t(() => $localize `:@@SI_COLUMN_SELECTION_DIALOG.CANCEL:Cancel`));
+    cancelBtnName = input(t(() => $localize `:@@SI_COLUMN_SELECTION_DIALOG.CANCEL:Cancel`), ...(ngDevMode ? [{ debugName: "cancelBtnName" }] : []));
     /**
      * @defaultValue
      * ```
      * t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.RESTORE_TO_DEFAULT:Restore to default`)
      * ```
      */
-    restoreToDefaultBtnName = input(t(() => $localize `:@@SI_COLUMN_SELECTION_DIALOG.RESTORE_TO_DEFAULT:Restore to default`));
+    restoreToDefaultBtnName = input(t(() => $localize `:@@SI_COLUMN_SELECTION_DIALOG.RESTORE_TO_DEFAULT:Restore to default`), ...(ngDevMode ? [{ debugName: "restoreToDefaultBtnName" }] : []));
     /**
      * @defaultValue
      * ```
      * t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.HIDDEN:Hidden`)
      * ```
      */
-    hiddenText = input(t(() => $localize `:@@SI_COLUMN_SELECTION_DIALOG.HIDDEN:Hidden`));
+    hiddenText = input(t(() => $localize `:@@SI_COLUMN_SELECTION_DIALOG.HIDDEN:Hidden`), ...(ngDevMode ? [{ debugName: "hiddenText" }] : []));
     /**
      * @defaultValue
      * ```
      * t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.VISIBLE:Visible`)
      * ```
      */
-    visibleText = input(t(() => $localize `:@@SI_COLUMN_SELECTION_DIALOG.VISIBLE:Visible`));
+    visibleText = input(t(() => $localize `:@@SI_COLUMN_SELECTION_DIALOG.VISIBLE:Visible`), ...(ngDevMode ? [{ debugName: "visibleText" }] : []));
     /** @defaultValue false */
-    restoreEnabled = input(false, { transform: booleanAttribute });
-    columns = model.required();
+    restoreEnabled = input(false, { ...(ngDevMode ? { debugName: "restoreEnabled" } : {}), transform: booleanAttribute });
+    columns = model.required(...(ngDevMode ? [{ debugName: "columns" }] : []));
     /**
      * @defaultValue
      * ```
      * {}
      * ```
      */
-    translationParams = input({});
+    translationParams = input({}, ...(ngDevMode ? [{ debugName: "translationParams" }] : []));
     /**
      * @defaultValue
      * ```
      * t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.LIST_ARIA_LABEL:List of possible columns. Items can be moved using Alt+ArrowUp or Alt+ArrowDown. Press Enter to rename supported items.`)
      * ```
      */
-    listAriaLabel = input(t(() => $localize `:@@SI_COLUMN_SELECTION_DIALOG.LIST_ARIA_LABEL:List of possible columns. Items can be moved using Alt+ArrowUp or Alt+ArrowDown. Press Enter to rename supported items.`));
+    listAriaLabel = input(t(() => $localize `:@@SI_COLUMN_SELECTION_DIALOG.LIST_ARIA_LABEL:List of possible columns. Items can be moved using Alt+ArrowUp or Alt+ArrowDown. Press Enter to rename supported items.`), ...(ngDevMode ? [{ debugName: "listAriaLabel" }] : []));
     /**
      * @defaultValue
      * ```
      * t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.RENAME_INPUT_ARIA_LABEL:Rename column`)
      * ```
      */
-    renameInputAriaLabel = input(t(() => $localize `:@@SI_COLUMN_SELECTION_DIALOG.RENAME_INPUT_ARIA_LABEL:Rename column`));
+    renameInputAriaLabel = input(t(() => $localize `:@@SI_COLUMN_SELECTION_DIALOG.RENAME_INPUT_ARIA_LABEL:Rename column`), ...(ngDevMode ? [{ debugName: "renameInputAriaLabel" }] : []));
     /**
      * @defaultValue
      * ```
      * t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.ITEM_MOVED:Item is now at position {{targetPosition}}`)
      * ```
      */
-    a11yItemMovedMessage = input(t(() => $localize `:@@SI_COLUMN_SELECTION_DIALOG.ITEM_MOVED:Item is now at position {{targetPosition}}`));
+    a11yItemMovedMessage = input(t(() => $localize `:@@SI_COLUMN_SELECTION_DIALOG.ITEM_MOVED:Item is now at position {{targetPosition}}`), ...(ngDevMode ? [{ debugName: "a11yItemMovedMessage" }] : []));
     /**
      * @defaultValue
      * ```
      * t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.ITEM_NOT_MOVED:Item was not moved`)
      * ```
      */
-    a11yItemNotMovedMessage = input(t(() => $localize `:@@SI_COLUMN_SELECTION_DIALOG.ITEM_NOT_MOVED:Item was not moved`));
+    a11yItemNotMovedMessage = input(t(() => $localize `:@@SI_COLUMN_SELECTION_DIALOG.ITEM_NOT_MOVED:Item was not moved`), ...(ngDevMode ? [{ debugName: "a11yItemNotMovedMessage" }] : []));
     /** @defaultValue true */
-    columnVisibilityConfigurable = input(true, { transform: booleanAttribute });
-    listOptions = viewChildren(CdkOption);
+    columnVisibilityConfigurable = input(true, { ...(ngDevMode ? { debugName: "columnVisibilityConfigurable" } : {}), transform: booleanAttribute });
+    listOptions = viewChildren(CdkOption, ...(ngDevMode ? [{ debugName: "listOptions" }] : []));
     modalBodyElement = viewChild.required('modalBody');
     tempHeaderData = [];
     modalRef = inject((ModalRef));
@@ -287,10 +288,10 @@ class SiColumnSelectionDialogComponent {
                 .subscribe(translatedMessage => this.liveAnnouncer.announce(translatedMessage));
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiColumnSelectionDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiColumnSelectionDialogComponent, isStandalone: true, selector: "si-column-selection-dialog", inputs: { titleId: { classPropertyName: "titleId", publicName: "titleId", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, bodyTitle: { classPropertyName: "bodyTitle", publicName: "bodyTitle", isSignal: true, isRequired: false, transformFunction: null }, submitBtnName: { classPropertyName: "submitBtnName", publicName: "submitBtnName", isSignal: true, isRequired: false, transformFunction: null }, cancelBtnName: { classPropertyName: "cancelBtnName", publicName: "cancelBtnName", isSignal: true, isRequired: false, transformFunction: null }, restoreToDefaultBtnName: { classPropertyName: "restoreToDefaultBtnName", publicName: "restoreToDefaultBtnName", isSignal: true, isRequired: false, transformFunction: null }, hiddenText: { classPropertyName: "hiddenText", publicName: "hiddenText", isSignal: true, isRequired: false, transformFunction: null }, visibleText: { classPropertyName: "visibleText", publicName: "visibleText", isSignal: true, isRequired: false, transformFunction: null }, restoreEnabled: { classPropertyName: "restoreEnabled", publicName: "restoreEnabled", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, translationParams: { classPropertyName: "translationParams", publicName: "translationParams", isSignal: true, isRequired: false, transformFunction: null }, listAriaLabel: { classPropertyName: "listAriaLabel", publicName: "listAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, renameInputAriaLabel: { classPropertyName: "renameInputAriaLabel", publicName: "renameInputAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, a11yItemMovedMessage: { classPropertyName: "a11yItemMovedMessage", publicName: "a11yItemMovedMessage", isSignal: true, isRequired: false, transformFunction: null }, a11yItemNotMovedMessage: { classPropertyName: "a11yItemNotMovedMessage", publicName: "a11yItemNotMovedMessage", isSignal: true, isRequired: false, transformFunction: null }, columnVisibilityConfigurable: { classPropertyName: "columnVisibilityConfigurable", publicName: "columnVisibilityConfigurable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columns: "columnsChange" }, providers: [{ provide: CDK_DRAG_CONFIG, useValue: dragConfig }], viewQueries: [{ propertyName: "listOptions", predicate: CdkOption, descendants: true, isSignal: true }, { propertyName: "modalBodyElement", first: true, predicate: ["modalBody"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"modal-header\">\n  <span class=\"modal-title\" [id]=\"titleId()\">{{ heading() | translate: translationParams() }}</span>\n  <button\n    type=\"button\"\n    class=\"btn btn-circle btn-sm btn-ghost\"\n    [attr.aria-label]=\"cancelBtnName() | translate\"\n    (click)=\"cancelColumnSelection()\"\n  >\n    <si-icon [icon]=\"icons.elementCancel\" />\n  </button>\n</div>\n<p class=\"text-secondary px-8 pb-5 mb-0\">{{ bodyTitle() | translate: translationParams() }}</p>\n<div #modalBody class=\"modal-body\" tabindex=\"-1\" cdkScrollable>\n  <div\n    cdkListbox\n    cdkListboxMultiple\n    cdkDropList\n    [cdkListboxValue]=\"visibleIds\"\n    [attr.aria-label]=\"listAriaLabel() | translate: translationParams\"\n    (cdkListboxValueChange)=\"updateVisibility()\"\n    (cdkDropListDropped)=\"drop($event)\"\n  >\n    @for (column of columns(); track column) {\n      <si-column-selection-editor\n        #cdkOption=\"cdkOption\"\n        cdkDrag\n        class=\"focus-inside\"\n        [cdkDragDisabled]=\"!column.draggable\"\n        [cdkOption]=\"column.id\"\n        [cdkOptionDisabled]=\"column.disabled\"\n        [column]=\"column\"\n        [selected]=\"cdkOption.isSelected()\"\n        [renameInputLabel]=\"renameInputAriaLabel() | translate: translationParams\"\n        [columnVisibilityConfigurable]=\"columnVisibilityConfigurable()\"\n        (titleChange)=\"emitChange()\"\n        (visibilityChange)=\"updateVisibility()\"\n        (keydown.alt.arrowUp)=\"moveUp($index, $event)\"\n        (keydown.alt.arrowDown)=\"moveDown($index, $event)\"\n      />\n    }\n  </div>\n</div>\n<div class=\"modal-footer\">\n  @if (restoreEnabled()) {\n    <button type=\"button\" class=\"btn btn-tertiary me-auto\" (click)=\"restoreToDefault()\">\n      {{ restoreToDefaultBtnName() | translate }}\n    </button>\n  }\n  <button type=\"button\" class=\"btn btn-secondary\" (click)=\"cancelColumnSelection()\">\n    {{ cancelBtnName() | translate }}\n  </button>\n  <button type=\"button\" class=\"btn btn-primary\" (click)=\"submitColumnSelection()\">\n    {{ submitBtnName() | translate }}\n  </button>\n</div>\n", styles: [":host{-webkit-user-select:none;user-select:none;max-block-size:100%;overflow:hidden;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "ngmodule", type: CdkScrollableModule }, { kind: "directive", type: i1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "component", type: SiColumnSelectionEditorComponent, selector: "si-column-selection-editor", inputs: ["column", "selected", "renameInputLabel", "columnVisibilityConfigurable"], outputs: ["titleChange", "visibilityChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiColumnSelectionDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiColumnSelectionDialogComponent, isStandalone: true, selector: "si-column-selection-dialog", inputs: { titleId: { classPropertyName: "titleId", publicName: "titleId", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, bodyTitle: { classPropertyName: "bodyTitle", publicName: "bodyTitle", isSignal: true, isRequired: false, transformFunction: null }, submitBtnName: { classPropertyName: "submitBtnName", publicName: "submitBtnName", isSignal: true, isRequired: false, transformFunction: null }, cancelBtnName: { classPropertyName: "cancelBtnName", publicName: "cancelBtnName", isSignal: true, isRequired: false, transformFunction: null }, restoreToDefaultBtnName: { classPropertyName: "restoreToDefaultBtnName", publicName: "restoreToDefaultBtnName", isSignal: true, isRequired: false, transformFunction: null }, hiddenText: { classPropertyName: "hiddenText", publicName: "hiddenText", isSignal: true, isRequired: false, transformFunction: null }, visibleText: { classPropertyName: "visibleText", publicName: "visibleText", isSignal: true, isRequired: false, transformFunction: null }, restoreEnabled: { classPropertyName: "restoreEnabled", publicName: "restoreEnabled", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, translationParams: { classPropertyName: "translationParams", publicName: "translationParams", isSignal: true, isRequired: false, transformFunction: null }, listAriaLabel: { classPropertyName: "listAriaLabel", publicName: "listAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, renameInputAriaLabel: { classPropertyName: "renameInputAriaLabel", publicName: "renameInputAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, a11yItemMovedMessage: { classPropertyName: "a11yItemMovedMessage", publicName: "a11yItemMovedMessage", isSignal: true, isRequired: false, transformFunction: null }, a11yItemNotMovedMessage: { classPropertyName: "a11yItemNotMovedMessage", publicName: "a11yItemNotMovedMessage", isSignal: true, isRequired: false, transformFunction: null }, columnVisibilityConfigurable: { classPropertyName: "columnVisibilityConfigurable", publicName: "columnVisibilityConfigurable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columns: "columnsChange" }, providers: [{ provide: CDK_DRAG_CONFIG, useValue: dragConfig }], viewQueries: [{ propertyName: "listOptions", predicate: CdkOption, descendants: true, isSignal: true }, { propertyName: "modalBodyElement", first: true, predicate: ["modalBody"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"modal-header\">\n  <span class=\"modal-title\" [id]=\"titleId()\">{{ heading() | translate: translationParams() }}</span>\n  <button\n    type=\"button\"\n    class=\"btn btn-circle btn-ghost\"\n    [attr.aria-label]=\"cancelBtnName() | translate\"\n    (click)=\"cancelColumnSelection()\"\n  >\n    <si-icon [icon]=\"icons.elementCancel\" />\n  </button>\n</div>\n<p class=\"text-secondary px-8 pb-5 mb-0\">{{ bodyTitle() | translate: translationParams() }}</p>\n<div #modalBody class=\"modal-body\" tabindex=\"-1\" cdkScrollable>\n  <div\n    cdkListbox\n    cdkListboxMultiple\n    cdkDropList\n    [cdkListboxValue]=\"visibleIds\"\n    [attr.aria-label]=\"listAriaLabel() | translate: translationParams\"\n    (cdkListboxValueChange)=\"updateVisibility()\"\n    (cdkDropListDropped)=\"drop($event)\"\n  >\n    @for (column of columns(); track column) {\n      <si-column-selection-editor\n        #cdkOption=\"cdkOption\"\n        cdkDrag\n        class=\"focus-inside\"\n        [cdkDragDisabled]=\"!column.draggable\"\n        [cdkOption]=\"column.id\"\n        [cdkOptionDisabled]=\"column.disabled\"\n        [column]=\"column\"\n        [selected]=\"cdkOption.isSelected()\"\n        [renameInputLabel]=\"renameInputAriaLabel() | translate: translationParams\"\n        [columnVisibilityConfigurable]=\"columnVisibilityConfigurable()\"\n        (titleChange)=\"emitChange()\"\n        (visibilityChange)=\"updateVisibility()\"\n        (keydown.alt.arrowUp)=\"moveUp($index, $event)\"\n        (keydown.alt.arrowDown)=\"moveDown($index, $event)\"\n      />\n    }\n  </div>\n</div>\n<div class=\"modal-footer\">\n  @if (restoreEnabled()) {\n    <button type=\"button\" class=\"btn btn-tertiary me-auto\" (click)=\"restoreToDefault()\">\n      {{ restoreToDefaultBtnName() | translate }}\n    </button>\n  }\n  <button type=\"button\" class=\"btn btn-secondary\" (click)=\"cancelColumnSelection()\">\n    {{ cancelBtnName() | translate }}\n  </button>\n  <button type=\"button\" class=\"btn btn-primary\" (click)=\"submitColumnSelection()\">\n    {{ submitBtnName() | translate }}\n  </button>\n</div>\n", styles: [":host{-webkit-user-select:none;user-select:none;max-block-size:100%;overflow:hidden;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "ngmodule", type: CdkScrollableModule }, { kind: "directive", type: i1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiColumnSelectionEditorComponent, selector: "si-column-selection-editor", inputs: ["column", "selected", "renameInputLabel", "columnVisibilityConfigurable"], outputs: ["titleChange", "visibilityChange"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiColumnSelectionDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiColumnSelectionDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-column-selection-dialog', imports: [
                         CdkDrag,
@@ -301,8 +302,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         SiIconComponent,
                         SiTranslatePipe,
                         SiColumnSelectionEditorComponent
-                    ], providers: [{ provide: CDK_DRAG_CONFIG, useValue: dragConfig }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"modal-header\">\n  <span class=\"modal-title\" [id]=\"titleId()\">{{ heading() | translate: translationParams() }}</span>\n  <button\n    type=\"button\"\n    class=\"btn btn-circle btn-sm btn-ghost\"\n    [attr.aria-label]=\"cancelBtnName() | translate\"\n    (click)=\"cancelColumnSelection()\"\n  >\n    <si-icon [icon]=\"icons.elementCancel\" />\n  </button>\n</div>\n<p class=\"text-secondary px-8 pb-5 mb-0\">{{ bodyTitle() | translate: translationParams() }}</p>\n<div #modalBody class=\"modal-body\" tabindex=\"-1\" cdkScrollable>\n  <div\n    cdkListbox\n    cdkListboxMultiple\n    cdkDropList\n    [cdkListboxValue]=\"visibleIds\"\n    [attr.aria-label]=\"listAriaLabel() | translate: translationParams\"\n    (cdkListboxValueChange)=\"updateVisibility()\"\n    (cdkDropListDropped)=\"drop($event)\"\n  >\n    @for (column of columns(); track column) {\n      <si-column-selection-editor\n        #cdkOption=\"cdkOption\"\n        cdkDrag\n        class=\"focus-inside\"\n        [cdkDragDisabled]=\"!column.draggable\"\n        [cdkOption]=\"column.id\"\n        [cdkOptionDisabled]=\"column.disabled\"\n        [column]=\"column\"\n        [selected]=\"cdkOption.isSelected()\"\n        [renameInputLabel]=\"renameInputAriaLabel() | translate: translationParams\"\n        [columnVisibilityConfigurable]=\"columnVisibilityConfigurable()\"\n        (titleChange)=\"emitChange()\"\n        (visibilityChange)=\"updateVisibility()\"\n        (keydown.alt.arrowUp)=\"moveUp($index, $event)\"\n        (keydown.alt.arrowDown)=\"moveDown($index, $event)\"\n      />\n    }\n  </div>\n</div>\n<div class=\"modal-footer\">\n  @if (restoreEnabled()) {\n    <button type=\"button\" class=\"btn btn-tertiary me-auto\" (click)=\"restoreToDefault()\">\n      {{ restoreToDefaultBtnName() | translate }}\n    </button>\n  }\n  <button type=\"button\" class=\"btn btn-secondary\" (click)=\"cancelColumnSelection()\">\n    {{ cancelBtnName() | translate }}\n  </button>\n  <button type=\"button\" class=\"btn btn-primary\" (click)=\"submitColumnSelection()\">\n    {{ submitBtnName() | translate }}\n  </button>\n</div>\n", styles: [":host{-webkit-user-select:none;user-select:none;max-block-size:100%;overflow:hidden;display:flex;flex-direction:column}\n"] }]
-        }] });
+                    ], providers: [{ provide: CDK_DRAG_CONFIG, useValue: dragConfig }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"modal-header\">\n  <span class=\"modal-title\" [id]=\"titleId()\">{{ heading() | translate: translationParams() }}</span>\n  <button\n    type=\"button\"\n    class=\"btn btn-circle btn-ghost\"\n    [attr.aria-label]=\"cancelBtnName() | translate\"\n    (click)=\"cancelColumnSelection()\"\n  >\n    <si-icon [icon]=\"icons.elementCancel\" />\n  </button>\n</div>\n<p class=\"text-secondary px-8 pb-5 mb-0\">{{ bodyTitle() | translate: translationParams() }}</p>\n<div #modalBody class=\"modal-body\" tabindex=\"-1\" cdkScrollable>\n  <div\n    cdkListbox\n    cdkListboxMultiple\n    cdkDropList\n    [cdkListboxValue]=\"visibleIds\"\n    [attr.aria-label]=\"listAriaLabel() | translate: translationParams\"\n    (cdkListboxValueChange)=\"updateVisibility()\"\n    (cdkDropListDropped)=\"drop($event)\"\n  >\n    @for (column of columns(); track column) {\n      <si-column-selection-editor\n        #cdkOption=\"cdkOption\"\n        cdkDrag\n        class=\"focus-inside\"\n        [cdkDragDisabled]=\"!column.draggable\"\n        [cdkOption]=\"column.id\"\n        [cdkOptionDisabled]=\"column.disabled\"\n        [column]=\"column\"\n        [selected]=\"cdkOption.isSelected()\"\n        [renameInputLabel]=\"renameInputAriaLabel() | translate: translationParams\"\n        [columnVisibilityConfigurable]=\"columnVisibilityConfigurable()\"\n        (titleChange)=\"emitChange()\"\n        (visibilityChange)=\"updateVisibility()\"\n        (keydown.alt.arrowUp)=\"moveUp($index, $event)\"\n        (keydown.alt.arrowDown)=\"moveDown($index, $event)\"\n      />\n    }\n  </div>\n</div>\n<div class=\"modal-footer\">\n  @if (restoreEnabled()) {\n    <button type=\"button\" class=\"btn btn-tertiary me-auto\" (click)=\"restoreToDefault()\">\n      {{ restoreToDefaultBtnName() | translate }}\n    </button>\n  }\n  <button type=\"button\" class=\"btn btn-secondary\" (click)=\"cancelColumnSelection()\">\n    {{ cancelBtnName() | translate }}\n  </button>\n  <button type=\"button\" class=\"btn btn-primary\" (click)=\"submitColumnSelection()\">\n    {{ submitBtnName() | translate }}\n  </button>\n</div>\n", styles: [":host{-webkit-user-select:none;user-select:none;max-block-size:100%;overflow:hidden;display:flex;flex-direction:column}\n"] }]
+        }], propDecorators: { titleId: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleId", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], bodyTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyTitle", required: false }] }], submitBtnName: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitBtnName", required: false }] }], cancelBtnName: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelBtnName", required: false }] }], restoreToDefaultBtnName: [{ type: i0.Input, args: [{ isSignal: true, alias: "restoreToDefaultBtnName", required: false }] }], hiddenText: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenText", required: false }] }], visibleText: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleText", required: false }] }], restoreEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "restoreEnabled", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }, { type: i0.Output, args: ["columnsChange"] }], translationParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "translationParams", required: false }] }], listAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "listAriaLabel", required: false }] }], renameInputAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "renameInputAriaLabel", required: false }] }], a11yItemMovedMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "a11yItemMovedMessage", required: false }] }], a11yItemNotMovedMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "a11yItemNotMovedMessage", required: false }] }], columnVisibilityConfigurable: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnVisibilityConfigurable", required: false }] }], listOptions: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => CdkOption), { isSignal: true }] }], modalBodyElement: [{ type: i0.ViewChild, args: ['modalBody', { isSignal: true }] }] } });
 /**
  * Copyright (c) Siemens 2016 - 2025
@@ -344,10 +345,10 @@ class SiColumnSelectionDialogService {
             };
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiColumnSelectionDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiColumnSelectionDialogService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiColumnSelectionDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiColumnSelectionDialogService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiColumnSelectionDialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiColumnSelectionDialogService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });