@siemens/element-ng 48.5.2 → 48.6.0
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.
- package/fesm2022/siemens-element-ng-datatable.mjs +11 -5
- package/fesm2022/siemens-element-ng-datatable.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-formly.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-icon.mjs +4 -4
- package/fesm2022/siemens-element-ng-icon.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-phone-number.mjs +2 -2
- package/fesm2022/siemens-element-ng-phone-number.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-summary-chip.mjs +4 -4
- package/fesm2022/siemens-element-ng-summary-chip.mjs.map +1 -1
- package/icon/index.d.ts +4 -4
- package/package.json +19 -19
- package/schematics/scss-import-to-siemens-migration/index.js +0 -3
- package/schematics/scss-import-to-siemens-migration/style-mappings.js +20 -4
- package/schematics/utils/ts-utils.js +8 -4
- package/summary-chip/index.d.ts +3 -3
|
@@ -23,7 +23,7 @@ class SiSummaryChipComponent {
|
|
|
23
23
|
/** The label. */
|
|
24
24
|
label = input.required();
|
|
25
25
|
/** Value to display. */
|
|
26
|
-
value = input
|
|
26
|
+
value = input();
|
|
27
27
|
/**
|
|
28
28
|
* Selected state, will change when clicked.
|
|
29
29
|
* @defaultValue false
|
|
@@ -35,7 +35,7 @@ class SiSummaryChipComponent {
|
|
|
35
35
|
*/
|
|
36
36
|
disabled = input(false, { transform: booleanAttribute });
|
|
37
37
|
/**
|
|
38
|
-
* Whether to hide the label. The label will still be used for screen-readers.
|
|
38
|
+
* Whether to hide the label. Only takes effect when both {@link icon} and {@link value} are provided. The label will still be used for screen-readers.
|
|
39
39
|
* @defaultValue false
|
|
40
40
|
*/
|
|
41
41
|
hideLabel = input(false, { transform: booleanAttribute });
|
|
@@ -56,11 +56,11 @@ class SiSummaryChipComponent {
|
|
|
56
56
|
}
|
|
57
57
|
}
|
|
58
58
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiSummaryChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
59
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiSummaryChipComponent, isStandalone: true, selector: "si-summary-chip", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, stackedIcon: { classPropertyName: "stackedIcon", publicName: "stackedIcon", isSignal: true, isRequired: false, transformFunction: null }, stackedColor: { classPropertyName: "stackedColor", publicName: "stackedColor", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired:
|
|
59
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiSummaryChipComponent, isStandalone: true, selector: "si-summary-chip", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, stackedIcon: { classPropertyName: "stackedIcon", publicName: "stackedIcon", isSignal: true, isRequired: false, transformFunction: null }, stackedColor: { classPropertyName: "stackedColor", publicName: "stackedColor", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, ngImport: i0, template: "<div\n class=\"chip\"\n role=\"checkbox\"\n [attr.tabindex]=\"disabled() ? '' : '0'\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-checked]=\"selected()\"\n [class.selected]=\"selected()\"\n [class.disabled]=\"disabled()\"\n (click)=\"toggleSelected()\"\n (keydown.enter)=\"toggleSelected()\"\n>\n @let actualIcon = statusIcon();\n @if (actualIcon.icon) {\n <span class=\"icon icon-stack my-n2 ms-n2\">\n <si-icon [ngClass]=\"actualIcon.color\" [icon]=\"actualIcon.icon\" />\n @if (actualIcon.stacked) {\n <si-icon [ngClass]=\"actualIcon.stackedColor\" [icon]=\"actualIcon.stacked\" />\n }\n </span>\n }\n @let value = this.value();\n <div class=\"si-body\" [class.visually-hidden]=\"hideLabel() && value && actualIcon.icon\">\n {{ label() | translate }}\n </div>\n @if (value) {\n <div class=\"si-h5\">{{ value | translate }}</div>\n }\n</div>\n", styles: [".chip{display:inline-flex;align-items:center;border:1px solid var(--element-ui-3);border-radius:16px;padding-block:7px;padding-inline:8px;gap:4px}.chip:not(.disabled){cursor:pointer}.chip:not(.disabled):not(.selected):hover{background:var(--element-base-1-hover)}.selected{background:var(--element-base-1-selected)}.disabled{opacity:var(--element-action-disabled-opacity)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
60
60
|
}
|
|
61
61
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiSummaryChipComponent, decorators: [{
|
|
62
62
|
type: Component,
|
|
63
|
-
args: [{ selector: 'si-summary-chip', imports: [NgClass, SiIconComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"chip\"\n role=\"checkbox\"\n [attr.tabindex]=\"disabled() ? '' : '0'\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-checked]=\"selected()\"\n [class.selected]=\"selected()\"\n [class.disabled]=\"disabled()\"\n (click)=\"toggleSelected()\"\n (keydown.enter)=\"toggleSelected()\"\n>\n @let actualIcon = statusIcon();\n @if (actualIcon.icon) {\n <span class=\"icon icon-stack my-n2 ms-n2\">\n <si-icon [ngClass]=\"actualIcon.color\" [icon]=\"actualIcon.icon\" />\n @if (actualIcon.stacked) {\n <si-icon [ngClass]=\"actualIcon.stackedColor\" [icon]=\"actualIcon.stacked\" />\n }\n </span>\n }\n <div class=\"si-body\" [class.visually-hidden]=\"hideLabel()\">\n {{ label() | translate }}\n </div>\n <div class=\"si-h5\">{{ value
|
|
63
|
+
args: [{ selector: 'si-summary-chip', imports: [NgClass, SiIconComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"chip\"\n role=\"checkbox\"\n [attr.tabindex]=\"disabled() ? '' : '0'\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-checked]=\"selected()\"\n [class.selected]=\"selected()\"\n [class.disabled]=\"disabled()\"\n (click)=\"toggleSelected()\"\n (keydown.enter)=\"toggleSelected()\"\n>\n @let actualIcon = statusIcon();\n @if (actualIcon.icon) {\n <span class=\"icon icon-stack my-n2 ms-n2\">\n <si-icon [ngClass]=\"actualIcon.color\" [icon]=\"actualIcon.icon\" />\n @if (actualIcon.stacked) {\n <si-icon [ngClass]=\"actualIcon.stackedColor\" [icon]=\"actualIcon.stacked\" />\n }\n </span>\n }\n @let value = this.value();\n <div class=\"si-body\" [class.visually-hidden]=\"hideLabel() && value && actualIcon.icon\">\n {{ label() | translate }}\n </div>\n @if (value) {\n <div class=\"si-h5\">{{ value | translate }}</div>\n }\n</div>\n", styles: [".chip{display:inline-flex;align-items:center;border:1px solid var(--element-ui-3);border-radius:16px;padding-block:7px;padding-inline:8px;gap:4px}.chip:not(.disabled){cursor:pointer}.chip:not(.disabled):not(.selected):hover{background:var(--element-base-1-hover)}.selected{background:var(--element-base-1-selected)}.disabled{opacity:var(--element-action-disabled-opacity)}\n"] }]
|
|
64
64
|
}] });
|
|
65
65
|
|
|
66
66
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"siemens-element-ng-summary-chip.mjs","sources":["../../../../projects/element-ng/summary-chip/si-summary-chip.component.ts","../../../../projects/element-ng/summary-chip/si-summary-chip.component.html","../../../../projects/element-ng/summary-chip/index.ts","../../../../projects/element-ng/summary-chip/siemens-element-ng-summary-chip.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 inject,\n input,\n model\n} from '@angular/core';\nimport { ExtendedStatusType } from '@siemens/element-ng/common';\nimport { SiIconComponent, STATUS_ICON_CONFIG } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\n@Component({\n selector: 'si-summary-chip',\n imports: [NgClass, SiIconComponent, SiTranslatePipe],\n templateUrl: './si-summary-chip.component.html',\n styleUrl: './si-summary-chip.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiSummaryChipComponent {\n private readonly statusIcons = inject(STATUS_ICON_CONFIG);\n /** Status. Alternatively, use {@link icon} and {@link color}. */\n readonly status = input<ExtendedStatusType>();\n /** Icon token, see {@link https://element.siemens.io/icons/element}. */\n readonly icon = input<string>();\n /** Color class, see {@link https://element.siemens.io/typography/#color-variants-classes}. */\n readonly color = input<string>();\n /** Icon token, see {@link https://element.siemens.io/fundamentals/icons/}. */\n readonly stackedIcon = input<string>();\n /** Color class, see {@link https://element.siemens.io/fundamentals/icons/}. */\n readonly stackedColor = input<string>();\n /** The label. */\n readonly label = input.required<TranslatableString>();\n /** Value to display. */\n readonly value = input
|
|
1
|
+
{"version":3,"file":"siemens-element-ng-summary-chip.mjs","sources":["../../../../projects/element-ng/summary-chip/si-summary-chip.component.ts","../../../../projects/element-ng/summary-chip/si-summary-chip.component.html","../../../../projects/element-ng/summary-chip/index.ts","../../../../projects/element-ng/summary-chip/siemens-element-ng-summary-chip.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 inject,\n input,\n model\n} from '@angular/core';\nimport { ExtendedStatusType } from '@siemens/element-ng/common';\nimport { SiIconComponent, STATUS_ICON_CONFIG } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\n@Component({\n selector: 'si-summary-chip',\n imports: [NgClass, SiIconComponent, SiTranslatePipe],\n templateUrl: './si-summary-chip.component.html',\n styleUrl: './si-summary-chip.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiSummaryChipComponent {\n private readonly statusIcons = inject(STATUS_ICON_CONFIG);\n /** Status. Alternatively, use {@link icon} and {@link color}. */\n readonly status = input<ExtendedStatusType>();\n /** Icon token, see {@link https://element.siemens.io/icons/element}. */\n readonly icon = input<string>();\n /** Color class, see {@link https://element.siemens.io/typography/#color-variants-classes}. */\n readonly color = input<string>();\n /** Icon token, see {@link https://element.siemens.io/fundamentals/icons/}. */\n readonly stackedIcon = input<string>();\n /** Color class, see {@link https://element.siemens.io/fundamentals/icons/}. */\n readonly stackedColor = input<string>();\n /** The label. */\n readonly label = input.required<TranslatableString>();\n /** Value to display. */\n readonly value = input<TranslatableString>();\n /**\n * Selected state, will change when clicked.\n * @defaultValue false\n */\n readonly selected = model(false);\n /**\n * Disabled state.\n * @defaultValue false\n */\n readonly disabled = input(false, { transform: booleanAttribute });\n /**\n * Whether to hide the label. Only takes effect when both {@link icon} and {@link value} are provided. The label will still be used for screen-readers.\n * @defaultValue false\n */\n readonly hideLabel = input(false, { transform: booleanAttribute });\n\n protected readonly statusIcon = computed(() => {\n const status = this.status();\n return status\n ? this.statusIcons[status]\n : {\n icon: this.icon(),\n color: this.color(),\n stacked: this.stackedIcon(),\n stackedColor: this.stackedColor()\n };\n });\n\n protected toggleSelected(): void {\n if (!this.disabled()) {\n this.selected.set(!this.selected());\n }\n }\n}\n","<div\n class=\"chip\"\n role=\"checkbox\"\n [attr.tabindex]=\"disabled() ? '' : '0'\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-checked]=\"selected()\"\n [class.selected]=\"selected()\"\n [class.disabled]=\"disabled()\"\n (click)=\"toggleSelected()\"\n (keydown.enter)=\"toggleSelected()\"\n>\n @let actualIcon = statusIcon();\n @if (actualIcon.icon) {\n <span class=\"icon icon-stack my-n2 ms-n2\">\n <si-icon [ngClass]=\"actualIcon.color\" [icon]=\"actualIcon.icon\" />\n @if (actualIcon.stacked) {\n <si-icon [ngClass]=\"actualIcon.stackedColor\" [icon]=\"actualIcon.stacked\" />\n }\n </span>\n }\n @let value = this.value();\n <div class=\"si-body\" [class.visually-hidden]=\"hideLabel() && value && actualIcon.icon\">\n {{ label() | translate }}\n </div>\n @if (value) {\n <div class=\"si-h5\">{{ value | translate }}</div>\n }\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-summary-chip.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAAA;;;AAGG;MAsBU,sBAAsB,CAAA;AAChB,IAAA,WAAW,GAAG,MAAM,CAAC,kBAAkB,CAAC;;IAEhD,MAAM,GAAG,KAAK,EAAsB;;IAEpC,IAAI,GAAG,KAAK,EAAU;;IAEtB,KAAK,GAAG,KAAK,EAAU;;IAEvB,WAAW,GAAG,KAAK,EAAU;;IAE7B,YAAY,GAAG,KAAK,EAAU;;AAE9B,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAsB;;IAE5C,KAAK,GAAG,KAAK,EAAsB;AAC5C;;;AAGG;AACM,IAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC;AAChC;;;AAGG;IACM,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AACjE;;;AAGG;IACM,SAAS,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AAE/C,IAAA,UAAU,GAAG,QAAQ,CAAC,MAAK;AAC5C,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE;AAC5B,QAAA,OAAO;AACL,cAAE,IAAI,CAAC,WAAW,CAAC,MAAM;AACzB,cAAE;AACE,gBAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;AACjB,gBAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;AACnB,gBAAA,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE;AAC3B,gBAAA,YAAY,EAAE,IAAI,CAAC,YAAY;aAChC;AACP,KAAC,CAAC;IAEQ,cAAc,GAAA;AACtB,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE;YACpB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;;;uGA9C5B,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAtB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,o3CCzBnC,y4BA4BA,EAAA,MAAA,EAAA,CAAA,wXAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDRY,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,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAPlC,SAAS;+BACE,iBAAiB,EAAA,OAAA,EAClB,CAAC,OAAO,EAAE,eAAe,EAAE,eAAe,CAAC,EAAA,eAAA,EAGnC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,y4BAAA,EAAA,MAAA,EAAA,CAAA,wXAAA,CAAA,EAAA;;;AEvBjD;;;AAGG;;ACHH;;AAEG;;;;"}
|
package/icon/index.d.ts
CHANGED
|
@@ -206,11 +206,11 @@ declare const elementSoundMute = "data:image/svg+xml;utf8,<svg xmlns='http://www
|
|
|
206
206
|
declare const elementSoundOn = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M238 394a12 12 0 0 1-7.5-2.63L143.8 322H76a12 12 0 0 1-12-12V202a12 12 0 0 1 12-12h67.8l86.72-69.37A12 12 0 0 1 250 130v252a12 12 0 0 1-12 12ZM88 298h60a11.93 11.93 0 0 1 7.49 2.63L226 357.05V155l-70.5 56.36A11.93 11.93 0 0 1 148 214H88ZM383.29 395.27a12 12 0 0 1-8.48-20.48c65.48-65.5 65.48-172.08 0-237.58a12 12 0 1 1 17-17c74.83 74.86 74.83 196.66 0 271.52a12 12 0 0 1-8.52 3.54Zm-63.54-63.72a12 12 0 0 1-8.49-20.49 78.1 78.1 0 0 0 0-110.3 12 12 0 1 1 17-17 102.12 102.12 0 0 1 0 144.24 12 12 0 0 1-8.51 3.55Z' /></svg>";
|
|
207
207
|
declare const elementSquare45Filled = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><rect x='113.17' y='113.17' width='285.65' height='285.65' rx='24' transform='rotate(-45 256 256.002)'/></svg>";
|
|
208
208
|
declare const elementSquareFilled = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><rect x='88' y='88' width='336' height='336' rx='48'/></svg>";
|
|
209
|
-
declare const elementStateExclamationMark = "data:image/svg+xml;utf8,<svg
|
|
210
|
-
declare const elementStateInfo = "data:image/svg+xml;utf8,<svg
|
|
211
|
-
declare const elementStatePause = "data:image/svg+xml;utf8,<svg
|
|
209
|
+
declare const elementStateExclamationMark = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><defs><style>.cls-1{stroke-width:0}</style></defs><path class='cls-1' d='M256 279.12c-11.05 0-20-8.95-20-20v-89.8c0-11.05 8.95-20 20-20s20 8.95 20 20v89.8c0 11.05-8.95 20-20 20ZM256.17 359.03h-.34c-13.16 0-23.83-10.75-23.83-24s10.67-24 23.83-24h.34c13.16 0 23.83 10.75 23.83 24s-10.67 24-23.83 24Z'/></svg>";
|
|
210
|
+
declare const elementStateInfo = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><defs><style>.cls-1{stroke-width:0}</style></defs><path class='cls-1' d='M256 356c-11.05 0-20-8.95-20-20v-80c0-11.05 8.95-20 20-20s20 8.95 20 20v80c0 11.05-8.95 20-20 20ZM256.17 156.32h-.34c-13.16 0-23.83 10.75-23.83 24s10.67 24 23.83 24h.34c13.16 0 23.83-10.75 23.83-24s-10.67-24-23.83-24Z'/></svg>";
|
|
211
|
+
declare const elementStatePause = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><defs><style>.cls-1{stroke-width:0}</style></defs><path class='cls-1' d='M222 349.5c-11.05 0-20-8.95-20-20v-147c0-11.05 8.95-20 20-20s20 8.95 20 20v147c0 11.05-8.95 20-20 20ZM290 349.5c-11.05 0-20-8.95-20-20v-147c0-11.05 8.95-20 20-20s20 8.95 20 20v147c0 11.05-8.95 20-20 20Z'/></svg>";
|
|
212
212
|
declare const elementStateProgress = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M270.43 253.68V114.43c69.75 0 127.15 62.86 127.15 139.26 0 38.04-14.23 74.47-39.36 100.74l-87.79-100.74Z'/></svg>";
|
|
213
|
-
declare const elementStateQuestionMark = "data:image/svg+xml;utf8,<svg
|
|
213
|
+
declare const elementStateQuestionMark = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><defs><style>.cls-1{stroke-width:0}</style></defs><path class='cls-1' d='M256 311c-11.05 0-20-8.95-20-20v-29.22a19.994 19.994 0 0 1 13.63-18.96c10.43-3.62 33.09-15.84 33.09-28.82.02-11.91-7.5-22.54-18.71-26.49-14.56-5.12-30.58 2.56-35.7 17.12-3.67 10.42-15.08 15.9-25.5 12.23s-15.9-15.08-12.23-25.5c12.44-35.37 51.34-54.02 86.71-41.58 27.22 9.58 45.48 35.4 45.44 64.25 0 13.92-5.57 34.34-32.11 52.4-5.12 3.49-10.2 6.31-14.61 8.5V291c0 11.05-8.95 20-20 20ZM256.16 375h-.32c-13.17 0-23.84-10.75-23.84-24s10.67-24 23.84-24h.32c13.17 0 23.84 10.75 23.84 24s-10.67 24-23.84 24Z'/></svg>";
|
|
214
214
|
declare const elementStateTick = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M222.25 345.88c-5.12 0-10.24-1.95-14.14-5.86l-56.25-56.25c-7.81-7.81-7.81-20.47 0-28.29s20.47-7.81 28.28 0l42.11 42.11 109.61-109.61c7.81-7.81 20.47-7.81 28.28 0s7.81 20.47 0 28.29L236.39 340.02a19.92 19.92 0 0 1-14.14 5.86Z' style='stroke-width:0'/></svg>";
|
|
215
215
|
declare const elementTriangleFilled = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='m441.77 338.25-.1-.17L295.72 94.42a46.45 46.45 0 0 0-79.44 0 .21.21 0 0 0 0 .06L70.32 338.08l-.1.17a46.45 46.45 0 0 0 39.72 69.68h292.11a46.46 46.46 0 0 0 39.72-69.68Z'/></svg>";
|
|
216
216
|
declare const elementRight2 = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M203.21 159.21a12.45 12.45 0 0 1 15.86-1.44l1.72 1.44 88 88a12.45 12.45 0 0 1 1.44 15.86l-1.44 1.72-88 88a12.43 12.43 0 0 1-19-15.86l1.44-1.72L282.42 256l-79.21-79.21a12.45 12.45 0 0 1-1.44-15.86Z' data-name='Arrow/Right-3'/></svg>";
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@siemens/element-ng",
|
|
3
3
|
"description": "Element Angular component library, implementing the Siemens Design Language",
|
|
4
|
-
"version": "48.
|
|
4
|
+
"version": "48.6.0",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -30,9 +30,9 @@
|
|
|
30
30
|
"@angular/router": "20",
|
|
31
31
|
"@ngx-formly/bootstrap": "^6.2.2",
|
|
32
32
|
"@ngx-formly/core": "^6.2.2",
|
|
33
|
-
"@siemens/element-translate-ng": "48.
|
|
34
|
-
"@siemens/element-theme": "48.
|
|
35
|
-
"@siemens/ngx-datatable": "22 -
|
|
33
|
+
"@siemens/element-translate-ng": "48.6.0",
|
|
34
|
+
"@siemens/element-theme": "48.6.0",
|
|
35
|
+
"@siemens/ngx-datatable": "22 - 25",
|
|
36
36
|
"flag-icons": "^7.3.2",
|
|
37
37
|
"google-libphonenumber": "^3.2.40",
|
|
38
38
|
"ngx-image-cropper": "^9.0.0"
|
|
@@ -67,10 +67,6 @@
|
|
|
67
67
|
"types": "./index.d.ts",
|
|
68
68
|
"default": "./fesm2022/siemens-element-ng.mjs"
|
|
69
69
|
},
|
|
70
|
-
"./accordion": {
|
|
71
|
-
"types": "./accordion/index.d.ts",
|
|
72
|
-
"default": "./fesm2022/siemens-element-ng-accordion.mjs"
|
|
73
|
-
},
|
|
74
70
|
"./about": {
|
|
75
71
|
"types": "./about/index.d.ts",
|
|
76
72
|
"default": "./fesm2022/siemens-element-ng-about.mjs"
|
|
@@ -79,6 +75,10 @@
|
|
|
79
75
|
"types": "./action-modal/index.d.ts",
|
|
80
76
|
"default": "./fesm2022/siemens-element-ng-action-modal.mjs"
|
|
81
77
|
},
|
|
78
|
+
"./accordion": {
|
|
79
|
+
"types": "./accordion/index.d.ts",
|
|
80
|
+
"default": "./fesm2022/siemens-element-ng-accordion.mjs"
|
|
81
|
+
},
|
|
82
82
|
"./application-header": {
|
|
83
83
|
"types": "./application-header/index.d.ts",
|
|
84
84
|
"default": "./fesm2022/siemens-element-ng-application-header.mjs"
|
|
@@ -111,14 +111,14 @@
|
|
|
111
111
|
"types": "./card/index.d.ts",
|
|
112
112
|
"default": "./fesm2022/siemens-element-ng-card.mjs"
|
|
113
113
|
},
|
|
114
|
-
"./chat-messages": {
|
|
115
|
-
"types": "./chat-messages/index.d.ts",
|
|
116
|
-
"default": "./fesm2022/siemens-element-ng-chat-messages.mjs"
|
|
117
|
-
},
|
|
118
114
|
"./circle-status": {
|
|
119
115
|
"types": "./circle-status/index.d.ts",
|
|
120
116
|
"default": "./fesm2022/siemens-element-ng-circle-status.mjs"
|
|
121
117
|
},
|
|
118
|
+
"./chat-messages": {
|
|
119
|
+
"types": "./chat-messages/index.d.ts",
|
|
120
|
+
"default": "./fesm2022/siemens-element-ng-chat-messages.mjs"
|
|
121
|
+
},
|
|
122
122
|
"./color-picker": {
|
|
123
123
|
"types": "./color-picker/index.d.ts",
|
|
124
124
|
"default": "./fesm2022/siemens-element-ng-color-picker.mjs"
|
|
@@ -175,22 +175,22 @@
|
|
|
175
175
|
"types": "./filter-bar/index.d.ts",
|
|
176
176
|
"default": "./fesm2022/siemens-element-ng-filter-bar.mjs"
|
|
177
177
|
},
|
|
178
|
-
"./footer": {
|
|
179
|
-
"types": "./footer/index.d.ts",
|
|
180
|
-
"default": "./fesm2022/siemens-element-ng-footer.mjs"
|
|
181
|
-
},
|
|
182
178
|
"./filtered-search": {
|
|
183
179
|
"types": "./filtered-search/index.d.ts",
|
|
184
180
|
"default": "./fesm2022/siemens-element-ng-filtered-search.mjs"
|
|
185
181
|
},
|
|
186
|
-
"./
|
|
187
|
-
"types": "./
|
|
188
|
-
"default": "./fesm2022/siemens-element-ng-
|
|
182
|
+
"./footer": {
|
|
183
|
+
"types": "./footer/index.d.ts",
|
|
184
|
+
"default": "./fesm2022/siemens-element-ng-footer.mjs"
|
|
189
185
|
},
|
|
190
186
|
"./formly": {
|
|
191
187
|
"types": "./formly/index.d.ts",
|
|
192
188
|
"default": "./fesm2022/siemens-element-ng-formly.mjs"
|
|
193
189
|
},
|
|
190
|
+
"./form": {
|
|
191
|
+
"types": "./form/index.d.ts",
|
|
192
|
+
"default": "./fesm2022/siemens-element-ng-form.mjs"
|
|
193
|
+
},
|
|
194
194
|
"./header-dropdown": {
|
|
195
195
|
"types": "./header-dropdown/index.d.ts",
|
|
196
196
|
"default": "./fesm2022/siemens-element-ng-header-dropdown.mjs"
|
|
@@ -53,9 +53,6 @@ export const scssMigrationRule = (_options) => {
|
|
|
53
53
|
}
|
|
54
54
|
const scssFiles = await discoverSourceFiles(tree, context, _options.path, '.scss');
|
|
55
55
|
for (const filePath of scssFiles) {
|
|
56
|
-
if (filePath.match(/node_modules/)) {
|
|
57
|
-
continue;
|
|
58
|
-
}
|
|
59
56
|
const content = tree.readText(filePath);
|
|
60
57
|
if (content.includes(STYLE_REPLACEMENTS[0].replace) ||
|
|
61
58
|
content.includes(STYLE_REPLACEMENTS[1].replace)) {
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
* SPDX-License-Identifier: MIT
|
|
4
4
|
*/
|
|
5
5
|
export const STYLE_REPLACEMENTS = [
|
|
6
|
+
// Single quotes
|
|
6
7
|
{
|
|
7
8
|
replace: `@import '@simpl/element-theme/`,
|
|
8
9
|
new: `@import '@siemens/element-theme/`
|
|
@@ -10,12 +11,24 @@ export const STYLE_REPLACEMENTS = [
|
|
|
10
11
|
{
|
|
11
12
|
replace: `@use '@simpl/element-theme/`,
|
|
12
13
|
new: `@use '@siemens/element-theme/`
|
|
14
|
+
},
|
|
15
|
+
// Double quotes
|
|
16
|
+
{
|
|
17
|
+
replace: `@import "@simpl/element-theme/`,
|
|
18
|
+
new: `@import "@siemens/element-theme/`
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
replace: `@use "@simpl/element-theme/`,
|
|
22
|
+
new: `@use "@siemens/element-theme/`
|
|
13
23
|
}
|
|
14
24
|
];
|
|
15
25
|
// Apply theme styles if not already present
|
|
16
26
|
export const THEME_STYLE_ENTRIES = [
|
|
27
|
+
{ insert: `// Load Siemens fonts` },
|
|
17
28
|
{ insert: `@use '@simpl/brand/assets/fonts/styles/siemens-sans';` },
|
|
29
|
+
{ insert: `// Load Element icons` },
|
|
18
30
|
{ insert: `@use '@simpl/element-icons/dist/style/simpl-element-icons';` },
|
|
31
|
+
{ insert: `// Use Element theme` },
|
|
19
32
|
{
|
|
20
33
|
insert: `@use '@siemens/element-theme/src/theme' with (
|
|
21
34
|
$element-theme-default: 'siemens-brand',
|
|
@@ -24,9 +37,11 @@ export const THEME_STYLE_ENTRIES = [
|
|
|
24
37
|
'element'
|
|
25
38
|
)
|
|
26
39
|
);`,
|
|
27
|
-
pattern: /@use '@siemens\/element-theme\/src\/theme' with \(([\s\S]*?)\);/g
|
|
40
|
+
pattern: /@use ['"]@siemens\/element-theme\/src\/theme['"] with \(([\s\S]*?)\);/g
|
|
28
41
|
},
|
|
42
|
+
{ insert: `// Use Element components` },
|
|
29
43
|
{ insert: `@use '@siemens/element-ng/element-ng';` },
|
|
44
|
+
{ insert: `// Actually build the siemens-brand theme` },
|
|
30
45
|
{ insert: `@use '@siemens/element-theme/src/styles/themes';` },
|
|
31
46
|
{ insert: `@use '@simpl/brand/dist/element-theme-siemens-brand-light' as brand-light;` },
|
|
32
47
|
{ insert: `@use '@simpl/brand/dist/element-theme-siemens-brand-dark' as brand-dark;` },
|
|
@@ -40,7 +55,8 @@ export const THEME_STYLE_ENTRIES = [
|
|
|
40
55
|
}
|
|
41
56
|
];
|
|
42
57
|
export const SCSS_USE_PATTERNS = [
|
|
43
|
-
/@use '@simpl\/element-theme\/src\/theme' with \(([\s\S]*?)\);/g,
|
|
44
|
-
/@use '@simpl\/element-ng\/simpl-element-ng' with \(([\s\S]*?)\);/g,
|
|
45
|
-
/@use '@simpl\/element-theme\/src\/theme';/g
|
|
58
|
+
/@use ['"]@simpl\/element-theme\/src\/theme['"] with \(([\s\S]*?)\);/g,
|
|
59
|
+
/@use ['"]@simpl\/element-ng\/simpl-element-ng['"] with \(([\s\S]*?)\);/g,
|
|
60
|
+
/@use ['"]@simpl\/element-theme\/src\/theme['"];/g,
|
|
61
|
+
/@use ['"]@simpl\/element-ng\/simpl-element-ng['"];/g
|
|
46
62
|
];
|
|
@@ -88,12 +88,16 @@ const visitDirectory = (fs, dirPath) => {
|
|
|
88
88
|
const entries = fs.getDir(dirPath);
|
|
89
89
|
const files = [];
|
|
90
90
|
entries.subfiles.forEach(filename => {
|
|
91
|
-
|
|
92
|
-
|
|
91
|
+
if (!filename.startsWith('.')) {
|
|
92
|
+
const fullPath = normalize(`${dirPath}/${filename}`);
|
|
93
|
+
files.push(fullPath);
|
|
94
|
+
}
|
|
93
95
|
});
|
|
94
96
|
entries.subdirs.forEach(subdirname => {
|
|
95
|
-
|
|
96
|
-
|
|
97
|
+
if (!subdirname.startsWith('.') && subdirname !== 'node_modules') {
|
|
98
|
+
const newFiles = visitDirectory(fs, `${dirPath}/${subdirname}`);
|
|
99
|
+
files.push(...newFiles);
|
|
100
|
+
}
|
|
97
101
|
});
|
|
98
102
|
return files;
|
|
99
103
|
};
|
package/summary-chip/index.d.ts
CHANGED
|
@@ -18,7 +18,7 @@ declare class SiSummaryChipComponent {
|
|
|
18
18
|
/** The label. */
|
|
19
19
|
readonly label: _angular_core.InputSignal<TranslatableString>;
|
|
20
20
|
/** Value to display. */
|
|
21
|
-
readonly value: _angular_core.InputSignal<TranslatableString>;
|
|
21
|
+
readonly value: _angular_core.InputSignal<TranslatableString | undefined>;
|
|
22
22
|
/**
|
|
23
23
|
* Selected state, will change when clicked.
|
|
24
24
|
* @defaultValue false
|
|
@@ -30,7 +30,7 @@ declare class SiSummaryChipComponent {
|
|
|
30
30
|
*/
|
|
31
31
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
32
32
|
/**
|
|
33
|
-
* Whether to hide the label. The label will still be used for screen-readers.
|
|
33
|
+
* Whether to hide the label. Only takes effect when both {@link icon} and {@link value} are provided. The label will still be used for screen-readers.
|
|
34
34
|
* @defaultValue false
|
|
35
35
|
*/
|
|
36
36
|
readonly hideLabel: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
@@ -42,7 +42,7 @@ declare class SiSummaryChipComponent {
|
|
|
42
42
|
}>;
|
|
43
43
|
protected toggleSelected(): void;
|
|
44
44
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiSummaryChipComponent, never>;
|
|
45
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiSummaryChipComponent, "si-summary-chip", never, { "status": { "alias": "status"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "stackedIcon": { "alias": "stackedIcon"; "required": false; "isSignal": true; }; "stackedColor": { "alias": "stackedColor"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required":
|
|
45
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiSummaryChipComponent, "si-summary-chip", never, { "status": { "alias": "status"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "stackedIcon": { "alias": "stackedIcon"; "required": false; "isSignal": true; }; "stackedColor": { "alias": "stackedColor"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "hideLabel": { "alias": "hideLabel"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; }, never, never, true, never>;
|
|
46
46
|
}
|
|
47
47
|
|
|
48
48
|
export { SiSummaryChipComponent };
|