@siemens/element-ng 48.0.2 → 48.1.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/README.md +9 -0
- package/accordion/index.d.ts +2 -1
- package/avatar/index.d.ts +3 -4
- package/card/index.d.ts +1 -1
- package/circle-status/index.d.ts +2 -1
- package/dashboard/index.d.ts +5 -1
- package/datepicker/index.d.ts +6 -2
- package/fesm2022/siemens-element-ng-accordion.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-avatar.mjs +32 -36
- package/fesm2022/siemens-element-ng-avatar.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-card.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-circle-status.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-column-selection-dialog.mjs +2 -2
- package/fesm2022/siemens-element-ng-column-selection-dialog.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-dashboard.mjs +32 -35
- package/fesm2022/siemens-element-ng-dashboard.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-datepicker.mjs +15 -3
- package/fesm2022/siemens-element-ng-datepicker.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-file-uploader.mjs +7 -0
- package/fesm2022/siemens-element-ng-file-uploader.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-filtered-search.mjs +21 -12
- package/fesm2022/siemens-element-ng-filtered-search.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-form.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-formly.mjs +18 -18
- package/fesm2022/siemens-element-ng-formly.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-inline-notification.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-list-details.mjs +8 -2
- package/fesm2022/siemens-element-ng-list-details.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-main-detail-container.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-navbar-vertical.mjs +15 -2
- package/fesm2022/siemens-element-ng-navbar-vertical.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-notification-item.mjs +71 -0
- package/fesm2022/siemens-element-ng-notification-item.mjs.map +1 -0
- package/fesm2022/siemens-element-ng-progressbar.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-resize-observer.mjs +0 -1
- package/fesm2022/siemens-element-ng-resize-observer.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-result-details-list.mjs +5 -0
- package/fesm2022/siemens-element-ng-result-details-list.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-sort-bar.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-split.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-status-bar.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-tabs.mjs +41 -8
- package/fesm2022/siemens-element-ng-tabs.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-translate.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-tree-view.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-wizard.mjs.map +1 -1
- package/file-uploader/index.d.ts +3 -1
- package/filter-bar/index.d.ts +4 -2
- package/form/index.d.ts +28 -29
- package/inline-notification/index.d.ts +3 -2
- package/landing-page/index.d.ts +3 -2
- package/language-switcher/index.d.ts +3 -1
- package/list-details/index.d.ts +2 -0
- package/main-detail-container/index.d.ts +4 -4
- package/navbar/index.d.ts +1 -1
- package/notification-item/index.d.ts +141 -0
- package/notification-item/package.json +3 -0
- package/package.json +19 -15
- package/progressbar/index.d.ts +3 -3
- package/result-details-list/index.d.ts +4 -2
- package/select/index.d.ts +7 -5
- package/sort-bar/index.d.ts +3 -3
- package/split/index.d.ts +3 -2
- package/status-bar/index.d.ts +3 -2
- package/tabs/index.d.ts +15 -1
- package/template-i18n.json +1 -0
- package/translate/index.d.ts +1 -0
- package/tree-view/index.d.ts +4 -4
- package/wizard/index.d.ts +2 -1
package/README.md
CHANGED
|
@@ -6,6 +6,15 @@
|
|
|
6
6
|
|
|
7
7
|
<h1 align="center">Siemens Element</h1>
|
|
8
8
|
|
|
9
|
+
<p align="center">
|
|
10
|
+
<a href="https://www.npmjs.com/@siemens/element-ng">
|
|
11
|
+
<img src="https://img.shields.io/npm/v/@siemens/element-ng.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen" alt="Element on npm" />
|
|
12
|
+
</a>
|
|
13
|
+
<a href="https://element.siemens.io/coverage/element-ng/index.html">
|
|
14
|
+
<img src="https://img.shields.io/endpoint?url=https://element.siemens.io/coverage-summary.json" alt="Code Coverage">
|
|
15
|
+
</a>
|
|
16
|
+
</p>
|
|
17
|
+
|
|
9
18
|
<p></p>
|
|
10
19
|
<p align="center">
|
|
11
20
|
Siemens Element is a design system of the smart infrastructure domain
|
package/accordion/index.d.ts
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
2
|
import { AfterContentInit, OnChanges } from '@angular/core';
|
|
3
3
|
import { BackgroundColorVariant } from '@siemens/element-ng/common';
|
|
4
|
+
import { TranslatableString } from '@siemens/element-translate-ng/translate';
|
|
4
5
|
import { Subject } from 'rxjs';
|
|
5
6
|
|
|
6
7
|
declare class SiCollapsiblePanelComponent {
|
|
7
8
|
/**
|
|
8
9
|
* Heading for the collapsible panel.
|
|
9
10
|
*/
|
|
10
|
-
readonly heading: _angular_core.InputSignal<
|
|
11
|
+
readonly heading: _angular_core.InputSignal<TranslatableString | undefined>;
|
|
11
12
|
/**
|
|
12
13
|
* Additional CSS classes for the top element.
|
|
13
14
|
*
|
package/avatar/index.d.ts
CHANGED
|
@@ -35,7 +35,7 @@ declare class SiAvatarBackgroundColorDirective implements OnChanges {
|
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
type AvatarSize = 'tiny' | 'xsmall' | 'small' | 'regular' | 'large' | 'xlarge';
|
|
38
|
-
declare class SiAvatarComponent
|
|
38
|
+
declare class SiAvatarComponent {
|
|
39
39
|
private readonly statusIcons;
|
|
40
40
|
/**
|
|
41
41
|
* Size of the component.
|
|
@@ -73,10 +73,9 @@ declare class SiAvatarComponent implements OnChanges {
|
|
|
73
73
|
*/
|
|
74
74
|
readonly statusAriaLabel: _angular_core.InputSignal<TranslatableString | undefined>;
|
|
75
75
|
protected readonly statusIcon: _angular_core.Signal<_siemens_element_ng_common.StatusIcon | undefined>;
|
|
76
|
-
protected displayInitials
|
|
76
|
+
protected readonly displayInitials: _angular_core.Signal<string>;
|
|
77
77
|
private readonly autoBackgroundColorDirective;
|
|
78
|
-
|
|
79
|
-
private setInitials;
|
|
78
|
+
constructor();
|
|
80
79
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiAvatarComponent, never>;
|
|
81
80
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiAvatarComponent, "si-avatar", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "imageUrl": { "alias": "imageUrl"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "altText": { "alias": "altText"; "required": true; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "statusAriaLabel": { "alias": "statusAriaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof SiAvatarBackgroundColorDirective; inputs: { "color": "color"; "autoColor": "autoColor"; }; outputs: {}; }]>;
|
|
82
81
|
}
|
package/card/index.d.ts
CHANGED
|
@@ -53,7 +53,7 @@ declare class SiCardComponent {
|
|
|
53
53
|
/**
|
|
54
54
|
* Alt text for a provided image.
|
|
55
55
|
*/
|
|
56
|
-
readonly imgAlt: _angular_core.InputSignal<
|
|
56
|
+
readonly imgAlt: _angular_core.InputSignal<TranslatableString | undefined>;
|
|
57
57
|
/**
|
|
58
58
|
* Defines if an image is placed on top or start (left) of the card.
|
|
59
59
|
*
|
package/circle-status/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
2
|
import { OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
|
|
3
3
|
import { EntityStatusType, StatusIcon } from '@siemens/element-ng/common';
|
|
4
|
+
import { TranslatableString } from '@siemens/element-translate-ng/translate';
|
|
4
5
|
import { Observable } from 'rxjs';
|
|
5
6
|
|
|
6
7
|
declare class SiCircleStatusComponent implements OnChanges, OnDestroy {
|
|
@@ -48,7 +49,7 @@ declare class SiCircleStatusComponent implements OnChanges, OnDestroy {
|
|
|
48
49
|
/**
|
|
49
50
|
* Aria label for icon and status combo. Needed for a11y
|
|
50
51
|
*/
|
|
51
|
-
readonly ariaLabel: _angular_core.InputSignal<
|
|
52
|
+
readonly ariaLabel: _angular_core.InputSignal<TranslatableString | undefined>;
|
|
52
53
|
protected readonly backgroundClass: _angular_core.Signal<string>;
|
|
53
54
|
protected readonly theAriaLabel: _angular_core.Signal<string>;
|
|
54
55
|
protected readonly autoLabel: _angular_core.Signal<string>;
|
package/dashboard/index.d.ts
CHANGED
|
@@ -486,7 +486,7 @@ declare class SiListWidgetComponent extends SiWidgetBaseComponent<SiListWidgetIt
|
|
|
486
486
|
/** Base for action items in the timeline widget. */
|
|
487
487
|
interface TimelineWidgetActionBase {
|
|
488
488
|
/** Label that is shown to the user. */
|
|
489
|
-
label:
|
|
489
|
+
label: TranslatableString;
|
|
490
490
|
/** The web font icon class name (e.g. element-settings-outline). */
|
|
491
491
|
icon?: string;
|
|
492
492
|
/** Defines if only the icon is shown in the default navigation bar. */
|
|
@@ -576,6 +576,10 @@ declare class SiTimelineWidgetItemComponent extends SiWidgetBaseComponent<SiTime
|
|
|
576
576
|
* @defaultValue `true`
|
|
577
577
|
*/
|
|
578
578
|
readonly showDescription: _angular_core.InputSignal<boolean>;
|
|
579
|
+
/**
|
|
580
|
+
* Aria label text for actions button dropdown.
|
|
581
|
+
*/
|
|
582
|
+
readonly ariaLabelDropdown: TranslatableString;
|
|
579
583
|
protected readonly activatedRoute: ActivatedRoute | null;
|
|
580
584
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiTimelineWidgetItemComponent, never>;
|
|
581
585
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiTimelineWidgetItemComponent, "si-timeline-widget-item", never, { "showDescription": { "alias": "showDescription"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
package/datepicker/index.d.ts
CHANGED
|
@@ -720,8 +720,8 @@ interface Value {
|
|
|
720
720
|
milliseconds: string;
|
|
721
721
|
}
|
|
722
722
|
interface Config {
|
|
723
|
-
ariaLabel:
|
|
724
|
-
label:
|
|
723
|
+
ariaLabel: TranslatableString;
|
|
724
|
+
label: TranslatableString;
|
|
725
725
|
maxLength: number;
|
|
726
726
|
max: number;
|
|
727
727
|
name: keyof Value;
|
|
@@ -893,6 +893,10 @@ declare class SiTimepickerComponent implements ControlValueAccessor, SiFormItemC
|
|
|
893
893
|
registerOnChange(fn: any): void;
|
|
894
894
|
registerOnTouched(fn: () => void): void;
|
|
895
895
|
setDisabledState(isDisabled: boolean): void;
|
|
896
|
+
/**
|
|
897
|
+
* Handle input event to remove non-numeric characters.
|
|
898
|
+
*/
|
|
899
|
+
protected handleInput(event: Event): void;
|
|
896
900
|
/**
|
|
897
901
|
* Handle Enter, Arrow up/down and Space key press events.
|
|
898
902
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"siemens-element-ng-accordion.mjs","sources":["../../../../projects/element-ng/accordion/si-accordion-hcollapse.service.ts","../../../../projects/element-ng/accordion/si-accordion.service.ts","../../../../projects/element-ng/accordion/si-collapsible-panel.component.ts","../../../../projects/element-ng/accordion/si-collapsible-panel.component.html","../../../../projects/element-ng/accordion/si-accordion.component.ts","../../../../projects/element-ng/accordion/si-accordion.module.ts","../../../../projects/element-ng/accordion/index.ts","../../../../projects/element-ng/accordion/siemens-element-ng-accordion.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { Injectable, signal } from '@angular/core';\nimport { Subject } from 'rxjs';\n\n/** @internal */\n@Injectable({\n providedIn: null\n})\nexport class SiAccordionHCollapseService {\n /**\n * Emitting the current horizontal collapsed state.\n *\n * @defaultValue undefined\n */\n readonly hcollapsed = signal<boolean | undefined>(undefined);\n /**\n * Subject to emit to open the accordion.\n */\n readonly open$ = new Subject();\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { Injectable, signal } from '@angular/core';\nimport { Subject } from 'rxjs';\n\n/** @internal */\n@Injectable({\n providedIn: null\n})\nexport class SiAccordionService {\n /**\n * Emit an item in the accordion which should be toggled.\n */\n readonly toggle$ = new Subject<any>();\n /**\n * Subject to emit when the items should be expanded to their full height or restored to normal height.\n *\n * @defaultValue null\n */\n readonly fullHeight = signal<boolean | null>(null);\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { animate, query, style, transition, trigger } from '@angular/animations';\nimport { NgClass } from '@angular/common';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n DestroyRef,\n ElementRef,\n inject,\n input,\n model,\n output,\n viewChild\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { areAnimationsDisabled, BackgroundColorVariant } from '@siemens/element-ng/common';\nimport { addIcons, elementDown2, SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe } from '@siemens/element-translate-ng/translate';\nimport { filter } from 'rxjs';\n\nimport { SiAccordionHCollapseService } from './si-accordion-hcollapse.service';\nimport { SiAccordionService } from './si-accordion.service';\n\nlet controlIdCounter = 1;\n\n@Component({\n selector: 'si-collapsible-panel',\n imports: [NgClass, SiIconComponent, SiTranslatePipe],\n templateUrl: './si-collapsible-panel.component.html',\n styleUrl: './si-collapsible-panel.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class]': 'colorVariant()',\n '[class.opened]': 'opened()',\n '[class.hcollapsed]': 'hcollapsed()',\n '[class.full-height]': 'fullHeight()'\n },\n animations: [\n trigger('showHide', [\n transition('*=>hide', [\n style({ overflow: 'hidden' }),\n query(\n ':leave',\n [style({ blockSize: '*' }), animate('0.5s ease', style({ blockSize: '0' }))],\n { optional: true }\n )\n ]),\n transition('*=>show', [\n style({ overflow: 'hidden' }),\n query(\n ':enter',\n [style({ blockSize: '0' }), animate('0.5s ease', style({ blockSize: '*' }))],\n { optional: true }\n )\n ])\n ])\n ]\n})\nexport class SiCollapsiblePanelComponent {\n /**\n * Heading for the collapsible panel.\n */\n readonly heading = input<string>();\n /**\n * Additional CSS classes for the top element.\n *\n * @defaultValue ''\n */\n readonly headerCssClasses = input('');\n /**\n * Additional CSS classes for the collapsible content region.\n *\n * @defaultValue ''\n */\n readonly contentBgClasses = input('');\n /**\n * Additional CSS classes for the wrapping content element.\n *\n * @defaultValue ''\n */\n readonly contentCssClasses = input('');\n /**\n * Expand/collapse the panel.\n *\n * @defaultValue false\n */\n readonly opened = model(false);\n /**\n * The icon to be displayed besides the heading.\n */\n readonly icon = input<string>();\n /**\n * Whether the si-collapsible-panel is disabled.\n *\n * @defaultValue false\n */\n readonly disabled = input(false, { transform: booleanAttribute });\n /** Color to use for component background */\n readonly colorVariant = input<BackgroundColorVariant>();\n /**\n * Defines the content of the optional badge. Should be a number or something like \"100+\".\n * if undefined or empty string, no badge is displayed\n */\n readonly badge = input<string | number>();\n /**\n * Defines the background color of the badge. Default is specific to Element flavour.\n */\n readonly badgeColor = input<string>();\n\n /**\n * An event emitted when the user triggered expand/collapse and emit with the new open state.\n * The event is emitted before the animation happens.\n */\n readonly panelToggle = output<boolean>();\n\n protected readonly hcollapsed = computed(\n () => this.accordionHCollapseService?.hcollapsed() ?? false\n );\n protected readonly fullHeight = computed(() => this.accordionService?.fullHeight() ?? false);\n protected controlId = '__si-collapsible-' + controlIdCounter++;\n protected headerId = this.controlId + '-header';\n protected isHCollapsible = false;\n protected readonly icons = addIcons({ elementDown2 });\n\n private readonly destroyRef = inject(DestroyRef);\n private readonly accordionService = inject(SiAccordionService, { optional: true });\n private readonly accordionHCollapseService = inject(SiAccordionHCollapseService, {\n optional: true\n });\n private enableAnimation = true;\n private readonly animationsGloballyDisabled = areAnimationsDisabled();\n private lastScrollPos = 0;\n private readonly contentRef = viewChild.required<ElementRef<HTMLElement>>('content');\n\n constructor() {\n this.isHCollapsible = !!this.accordionHCollapseService;\n this.accordionService?.toggle$\n .pipe(\n takeUntilDestroyed(this.destroyRef),\n filter(item => item !== this)\n )\n .subscribe(() => this.openClose(false));\n }\n\n protected get showHide(): string {\n if (this.enableAnimation && !this.animationsGloballyDisabled) {\n return this.opened() ? 'show' : 'hide';\n }\n return 'disabled';\n }\n\n /**\n * Expand/collapse panel.\n * @param open - indicate the panel shall open or close\n * @param enableAnimation - with animation\n */\n openClose(open: boolean, enableAnimation = true): void {\n this.opened.set(open);\n this.enableAnimation = enableAnimation;\n\n if (open) {\n setTimeout(() => {\n this.contentRef().nativeElement.scrollTop = this.lastScrollPos;\n });\n } else {\n this.lastScrollPos = this.contentRef().nativeElement.scrollTop;\n }\n }\n\n protected doToggle(event?: Event): void {\n if (this.disabled()) {\n return;\n }\n\n event?.preventDefault();\n const opened = this.opened();\n this.panelToggle.emit(!opened);\n this.openClose(this.hcollapsed() || !opened);\n this.accordionService?.toggle$.next(this);\n if (this.hcollapsed()) {\n this.accordionHCollapseService?.open$.next(this);\n }\n }\n\n protected keydown(event: KeyboardEvent): void {\n if (event.key === 'Enter' || event.key === 'Space' || event.key === ' ') {\n this.doToggle(undefined);\n }\n }\n}\n","<div\n class=\"collapsible-header focus-inside px-6\"\n role=\"button\"\n [ngClass]=\"headerCssClasses()\"\n [attr.tabindex]=\"disabled() ? '' : '0'\"\n [id]=\"headerId\"\n [class.open]=\"opened()\"\n [class.disabled]=\"disabled()\"\n [title]=\"hcollapsed() ? (heading() | translate) : ''\"\n [attr.aria-expanded]=\"opened() && !hcollapsed()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-controls]=\"controlId\"\n [attr.aria-label]=\"hcollapsed() ? (heading() | translate) : ''\"\n (keydown)=\"keydown($event)\"\n (click)=\"doToggle($event)\"\n>\n @let headerIcon = icon();\n @if (headerIcon) {\n <si-icon class=\"icon ms-n2 me-2\" [icon]=\"headerIcon\" [class.collapsed-icon]=\"isHCollapsible\" />\n }\n @if (icon() && badge() !== undefined && badge() !== '') {\n <span class=\"badge-text\">\n {{ badge() }}\n </span>\n }\n <div class=\"si-h5 autohide\">\n {{ heading() | translate }}\n <ng-content select=\"[si-panel-heading]\" />\n </div>\n\n @if (badge() !== undefined && badge() !== '') {\n <span class=\"badge autohide\" [ngClass]=\"'bg-' + badgeColor()\">\n {{ badge() }}\n </span>\n }\n <span class=\"ms-auto overflow-hidden\">\n <si-icon class=\"icon dropdown-caret\" [icon]=\"icons.elementDown2\" />\n </span>\n</div>\n<div\n #content\n class=\"collapsible-content\"\n role=\"region\"\n [id]=\"controlId\"\n [ngClass]=\"contentBgClasses()\"\n [@showHide]=\"showHide\"\n [attr.aria-labelledby]=\"headerId\"\n [class.full-height]=\"fullHeight()\"\n>\n @if (opened()) {\n <div>\n <div [ngClass]=\"contentCssClasses()\">\n <ng-content />\n </div>\n </div>\n }\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport {\n AfterContentInit,\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChildren,\n DestroyRef,\n ElementRef,\n inject,\n input,\n OnChanges\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ResizeObserverService } from '@siemens/element-ng/resize-observer';\n\nimport { SiAccordionHCollapseService } from './si-accordion-hcollapse.service';\nimport { SiAccordionService } from './si-accordion.service';\nimport { SiCollapsiblePanelComponent } from './si-collapsible-panel.component';\n\nconst PANEL_MIN_HEIGHT = 100;\n\n@Component({\n selector: 'si-accordion',\n template: '<div><ng-content /></div>',\n styleUrl: './si-accordion.component.scss',\n providers: [SiAccordionService],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class.full-height]': 'fullHeight()',\n '[class.hcollapsed]': 'collapsed()'\n }\n})\nexport class SiAccordionComponent implements AfterContentInit, OnChanges {\n /** @defaultValue true */\n readonly expandFirstPanel = input(true, { transform: booleanAttribute });\n /** @defaultValue false */\n readonly fullHeight = input(false, { transform: booleanAttribute });\n /** @defaultValue false */\n readonly hcollapsed = input(false);\n /**\n * Indicate whether the accordion is collapsed.\n * @internal\n */\n readonly collapsed = computed(\n () => this.accordionHCollapseService?.hcollapsed() ?? this.hcollapsed()\n );\n\n private readonly panels = contentChildren(SiCollapsiblePanelComponent);\n private responsive = false;\n private destroyer = inject(DestroyRef);\n private service = inject(SiAccordionService);\n private resizeObserver = inject(ResizeObserverService);\n private element = inject(ElementRef);\n private accordionHCollapseService = inject(SiAccordionHCollapseService, { optional: true });\n\n ngOnChanges(): void {\n this.service.fullHeight.set(this.fullHeight() && !this.responsive);\n }\n\n ngAfterContentInit(): void {\n this.resizeObserver\n .observe(this.element.nativeElement, 100, true, true)\n .pipe(takeUntilDestroyed(this.destroyer))\n .subscribe(() => this.calcFullHeight());\n\n this.panels().at(0)?.openClose(this.expandFirstPanel(), false);\n }\n\n private calcFullHeight(): void {\n if (this.panels?.length) {\n const height = (this.element.nativeElement as HTMLElement).offsetHeight;\n this.responsive = !this.hcollapsed() && height < this.panels.length * PANEL_MIN_HEIGHT;\n this.service.fullHeight.set(this.fullHeight() && !this.responsive);\n }\n }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiAccordionComponent } from './si-accordion.component';\nimport { SiCollapsiblePanelComponent } from './si-collapsible-panel.component';\n\n@NgModule({\n imports: [SiAccordionComponent, SiCollapsiblePanelComponent],\n exports: [SiAccordionComponent, SiCollapsiblePanelComponent]\n})\nexport class SiAccordionModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-collapsible-panel.component';\nexport * from './si-accordion.component';\nexport * from './si-accordion.service';\nexport * from './si-accordion-hcollapse.service';\nexport * from './si-accordion.module';\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-accordion.mjs","sources":["../../../../projects/element-ng/accordion/si-accordion-hcollapse.service.ts","../../../../projects/element-ng/accordion/si-accordion.service.ts","../../../../projects/element-ng/accordion/si-collapsible-panel.component.ts","../../../../projects/element-ng/accordion/si-collapsible-panel.component.html","../../../../projects/element-ng/accordion/si-accordion.component.ts","../../../../projects/element-ng/accordion/si-accordion.module.ts","../../../../projects/element-ng/accordion/index.ts","../../../../projects/element-ng/accordion/siemens-element-ng-accordion.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { Injectable, signal } from '@angular/core';\nimport { Subject } from 'rxjs';\n\n/** @internal */\n@Injectable({\n providedIn: null\n})\nexport class SiAccordionHCollapseService {\n /**\n * Emitting the current horizontal collapsed state.\n *\n * @defaultValue undefined\n */\n readonly hcollapsed = signal<boolean | undefined>(undefined);\n /**\n * Subject to emit to open the accordion.\n */\n readonly open$ = new Subject();\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { Injectable, signal } from '@angular/core';\nimport { Subject } from 'rxjs';\n\n/** @internal */\n@Injectable({\n providedIn: null\n})\nexport class SiAccordionService {\n /**\n * Emit an item in the accordion which should be toggled.\n */\n readonly toggle$ = new Subject<any>();\n /**\n * Subject to emit when the items should be expanded to their full height or restored to normal height.\n *\n * @defaultValue null\n */\n readonly fullHeight = signal<boolean | null>(null);\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { animate, query, style, transition, trigger } from '@angular/animations';\nimport { NgClass } from '@angular/common';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n DestroyRef,\n ElementRef,\n inject,\n input,\n model,\n output,\n viewChild\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { areAnimationsDisabled, BackgroundColorVariant } from '@siemens/element-ng/common';\nimport { addIcons, elementDown2, SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\nimport { filter } from 'rxjs';\n\nimport { SiAccordionHCollapseService } from './si-accordion-hcollapse.service';\nimport { SiAccordionService } from './si-accordion.service';\n\nlet controlIdCounter = 1;\n\n@Component({\n selector: 'si-collapsible-panel',\n imports: [NgClass, SiIconComponent, SiTranslatePipe],\n templateUrl: './si-collapsible-panel.component.html',\n styleUrl: './si-collapsible-panel.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class]': 'colorVariant()',\n '[class.opened]': 'opened()',\n '[class.hcollapsed]': 'hcollapsed()',\n '[class.full-height]': 'fullHeight()'\n },\n animations: [\n trigger('showHide', [\n transition('*=>hide', [\n style({ overflow: 'hidden' }),\n query(\n ':leave',\n [style({ blockSize: '*' }), animate('0.5s ease', style({ blockSize: '0' }))],\n { optional: true }\n )\n ]),\n transition('*=>show', [\n style({ overflow: 'hidden' }),\n query(\n ':enter',\n [style({ blockSize: '0' }), animate('0.5s ease', style({ blockSize: '*' }))],\n { optional: true }\n )\n ])\n ])\n ]\n})\nexport class SiCollapsiblePanelComponent {\n /**\n * Heading for the collapsible panel.\n */\n readonly heading = input<TranslatableString>();\n /**\n * Additional CSS classes for the top element.\n *\n * @defaultValue ''\n */\n readonly headerCssClasses = input('');\n /**\n * Additional CSS classes for the collapsible content region.\n *\n * @defaultValue ''\n */\n readonly contentBgClasses = input('');\n /**\n * Additional CSS classes for the wrapping content element.\n *\n * @defaultValue ''\n */\n readonly contentCssClasses = input('');\n /**\n * Expand/collapse the panel.\n *\n * @defaultValue false\n */\n readonly opened = model(false);\n /**\n * The icon to be displayed besides the heading.\n */\n readonly icon = input<string>();\n /**\n * Whether the si-collapsible-panel is disabled.\n *\n * @defaultValue false\n */\n readonly disabled = input(false, { transform: booleanAttribute });\n /** Color to use for component background */\n readonly colorVariant = input<BackgroundColorVariant>();\n /**\n * Defines the content of the optional badge. Should be a number or something like \"100+\".\n * if undefined or empty string, no badge is displayed\n */\n readonly badge = input<string | number>();\n /**\n * Defines the background color of the badge. Default is specific to Element flavour.\n */\n readonly badgeColor = input<string>();\n\n /**\n * An event emitted when the user triggered expand/collapse and emit with the new open state.\n * The event is emitted before the animation happens.\n */\n readonly panelToggle = output<boolean>();\n\n protected readonly hcollapsed = computed(\n () => this.accordionHCollapseService?.hcollapsed() ?? false\n );\n protected readonly fullHeight = computed(() => this.accordionService?.fullHeight() ?? false);\n protected controlId = '__si-collapsible-' + controlIdCounter++;\n protected headerId = this.controlId + '-header';\n protected isHCollapsible = false;\n protected readonly icons = addIcons({ elementDown2 });\n\n private readonly destroyRef = inject(DestroyRef);\n private readonly accordionService = inject(SiAccordionService, { optional: true });\n private readonly accordionHCollapseService = inject(SiAccordionHCollapseService, {\n optional: true\n });\n private enableAnimation = true;\n private readonly animationsGloballyDisabled = areAnimationsDisabled();\n private lastScrollPos = 0;\n private readonly contentRef = viewChild.required<ElementRef<HTMLElement>>('content');\n\n constructor() {\n this.isHCollapsible = !!this.accordionHCollapseService;\n this.accordionService?.toggle$\n .pipe(\n takeUntilDestroyed(this.destroyRef),\n filter(item => item !== this)\n )\n .subscribe(() => this.openClose(false));\n }\n\n protected get showHide(): string {\n if (this.enableAnimation && !this.animationsGloballyDisabled) {\n return this.opened() ? 'show' : 'hide';\n }\n return 'disabled';\n }\n\n /**\n * Expand/collapse panel.\n * @param open - indicate the panel shall open or close\n * @param enableAnimation - with animation\n */\n openClose(open: boolean, enableAnimation = true): void {\n this.opened.set(open);\n this.enableAnimation = enableAnimation;\n\n if (open) {\n setTimeout(() => {\n this.contentRef().nativeElement.scrollTop = this.lastScrollPos;\n });\n } else {\n this.lastScrollPos = this.contentRef().nativeElement.scrollTop;\n }\n }\n\n protected doToggle(event?: Event): void {\n if (this.disabled()) {\n return;\n }\n\n event?.preventDefault();\n const opened = this.opened();\n this.panelToggle.emit(!opened);\n this.openClose(this.hcollapsed() || !opened);\n this.accordionService?.toggle$.next(this);\n if (this.hcollapsed()) {\n this.accordionHCollapseService?.open$.next(this);\n }\n }\n\n protected keydown(event: KeyboardEvent): void {\n if (event.key === 'Enter' || event.key === 'Space' || event.key === ' ') {\n this.doToggle(undefined);\n }\n }\n}\n","<div\n class=\"collapsible-header focus-inside px-6\"\n role=\"button\"\n [ngClass]=\"headerCssClasses()\"\n [attr.tabindex]=\"disabled() ? '' : '0'\"\n [id]=\"headerId\"\n [class.open]=\"opened()\"\n [class.disabled]=\"disabled()\"\n [title]=\"hcollapsed() ? (heading() | translate) : ''\"\n [attr.aria-expanded]=\"opened() && !hcollapsed()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-controls]=\"controlId\"\n [attr.aria-label]=\"hcollapsed() ? (heading() | translate) : ''\"\n (keydown)=\"keydown($event)\"\n (click)=\"doToggle($event)\"\n>\n @let headerIcon = icon();\n @if (headerIcon) {\n <si-icon class=\"icon ms-n2 me-2\" [icon]=\"headerIcon\" [class.collapsed-icon]=\"isHCollapsible\" />\n }\n @if (icon() && badge() !== undefined && badge() !== '') {\n <span class=\"badge-text\">\n {{ badge() }}\n </span>\n }\n <div class=\"si-h5 autohide\">\n {{ heading() | translate }}\n <ng-content select=\"[si-panel-heading]\" />\n </div>\n\n @if (badge() !== undefined && badge() !== '') {\n <span class=\"badge autohide\" [ngClass]=\"'bg-' + badgeColor()\">\n {{ badge() }}\n </span>\n }\n <span class=\"ms-auto overflow-hidden\">\n <si-icon class=\"icon dropdown-caret\" [icon]=\"icons.elementDown2\" />\n </span>\n</div>\n<div\n #content\n class=\"collapsible-content\"\n role=\"region\"\n [id]=\"controlId\"\n [ngClass]=\"contentBgClasses()\"\n [@showHide]=\"showHide\"\n [attr.aria-labelledby]=\"headerId\"\n [class.full-height]=\"fullHeight()\"\n>\n @if (opened()) {\n <div>\n <div [ngClass]=\"contentCssClasses()\">\n <ng-content />\n </div>\n </div>\n }\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport {\n AfterContentInit,\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChildren,\n DestroyRef,\n ElementRef,\n inject,\n input,\n OnChanges\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ResizeObserverService } from '@siemens/element-ng/resize-observer';\n\nimport { SiAccordionHCollapseService } from './si-accordion-hcollapse.service';\nimport { SiAccordionService } from './si-accordion.service';\nimport { SiCollapsiblePanelComponent } from './si-collapsible-panel.component';\n\nconst PANEL_MIN_HEIGHT = 100;\n\n@Component({\n selector: 'si-accordion',\n template: '<div><ng-content /></div>',\n styleUrl: './si-accordion.component.scss',\n providers: [SiAccordionService],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class.full-height]': 'fullHeight()',\n '[class.hcollapsed]': 'collapsed()'\n }\n})\nexport class SiAccordionComponent implements AfterContentInit, OnChanges {\n /** @defaultValue true */\n readonly expandFirstPanel = input(true, { transform: booleanAttribute });\n /** @defaultValue false */\n readonly fullHeight = input(false, { transform: booleanAttribute });\n /** @defaultValue false */\n readonly hcollapsed = input(false);\n /**\n * Indicate whether the accordion is collapsed.\n * @internal\n */\n readonly collapsed = computed(\n () => this.accordionHCollapseService?.hcollapsed() ?? this.hcollapsed()\n );\n\n private readonly panels = contentChildren(SiCollapsiblePanelComponent);\n private responsive = false;\n private destroyer = inject(DestroyRef);\n private service = inject(SiAccordionService);\n private resizeObserver = inject(ResizeObserverService);\n private element = inject(ElementRef);\n private accordionHCollapseService = inject(SiAccordionHCollapseService, { optional: true });\n\n ngOnChanges(): void {\n this.service.fullHeight.set(this.fullHeight() && !this.responsive);\n }\n\n ngAfterContentInit(): void {\n this.resizeObserver\n .observe(this.element.nativeElement, 100, true, true)\n .pipe(takeUntilDestroyed(this.destroyer))\n .subscribe(() => this.calcFullHeight());\n\n this.panels().at(0)?.openClose(this.expandFirstPanel(), false);\n }\n\n private calcFullHeight(): void {\n if (this.panels?.length) {\n const height = (this.element.nativeElement as HTMLElement).offsetHeight;\n this.responsive = !this.hcollapsed() && height < this.panels.length * PANEL_MIN_HEIGHT;\n this.service.fullHeight.set(this.fullHeight() && !this.responsive);\n }\n }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiAccordionComponent } from './si-accordion.component';\nimport { SiCollapsiblePanelComponent } from './si-collapsible-panel.component';\n\n@NgModule({\n imports: [SiAccordionComponent, SiCollapsiblePanelComponent],\n exports: [SiAccordionComponent, SiCollapsiblePanelComponent]\n})\nexport class SiAccordionModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-collapsible-panel.component';\nexport * from './si-accordion.component';\nexport * from './si-accordion.service';\nexport * from './si-accordion-hcollapse.service';\nexport * from './si-accordion.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, numberAttribute, booleanAttribute, signal, Directive, inject, computed, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
2
|
+
import { input, numberAttribute, booleanAttribute, signal, Directive, inject, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
3
|
import { NgClass } from '@angular/common';
|
|
4
4
|
import { STATUS_ICON_CONFIG, SiIconComponent } from '@siemens/element-ng/icon';
|
|
5
5
|
|
|
@@ -117,46 +117,42 @@ class SiAvatarComponent {
|
|
|
117
117
|
const status = this.status();
|
|
118
118
|
return status ? this.statusIcons[status] : undefined;
|
|
119
119
|
});
|
|
120
|
-
displayInitials
|
|
121
|
-
autoBackgroundColorDirective = inject(SiAvatarBackgroundColorDirective);
|
|
122
|
-
ngOnChanges(changes) {
|
|
123
|
-
if (changes.initials || changes.altText) {
|
|
124
|
-
this.setInitials();
|
|
125
|
-
this.autoBackgroundColorDirective.calculateColorFromInitials(this.displayInitials);
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
setInitials() {
|
|
120
|
+
displayInitials = computed(() => {
|
|
129
121
|
const initials = this.initials();
|
|
130
122
|
if (initials) {
|
|
131
|
-
|
|
123
|
+
return initials;
|
|
124
|
+
}
|
|
125
|
+
const name = this.altText()
|
|
126
|
+
.replaceAll(/\([^)]*\)/g, '')
|
|
127
|
+
.trim();
|
|
128
|
+
const byComma = name.split(/,\s*/);
|
|
129
|
+
let first;
|
|
130
|
+
let last;
|
|
131
|
+
if (byComma.length > 1) {
|
|
132
|
+
last = byComma[0];
|
|
133
|
+
first = byComma[1];
|
|
132
134
|
}
|
|
133
135
|
else {
|
|
134
|
-
const
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
const byComma = name.split(/,\s*/);
|
|
138
|
-
let first;
|
|
139
|
-
let last;
|
|
140
|
-
if (byComma.length > 1) {
|
|
141
|
-
last = byComma[0];
|
|
142
|
-
first = byComma[1];
|
|
143
|
-
}
|
|
144
|
-
else {
|
|
145
|
-
const parts = name.split(' ');
|
|
146
|
-
first = parts.shift() ?? '';
|
|
147
|
-
last = parts.pop() ?? '';
|
|
148
|
-
}
|
|
149
|
-
if (first) {
|
|
150
|
-
first = first[0].toLocaleUpperCase();
|
|
151
|
-
}
|
|
152
|
-
if (last) {
|
|
153
|
-
last = last[0].toLocaleUpperCase();
|
|
154
|
-
}
|
|
155
|
-
this.displayInitials = first + last;
|
|
136
|
+
const parts = name.split(' ');
|
|
137
|
+
first = parts.shift() ?? '';
|
|
138
|
+
last = parts.pop() ?? '';
|
|
156
139
|
}
|
|
140
|
+
if (first) {
|
|
141
|
+
first = first[0].toLocaleUpperCase();
|
|
142
|
+
}
|
|
143
|
+
if (last) {
|
|
144
|
+
last = last[0].toLocaleUpperCase();
|
|
145
|
+
}
|
|
146
|
+
return first + last;
|
|
147
|
+
});
|
|
148
|
+
autoBackgroundColorDirective = inject(SiAvatarBackgroundColorDirective);
|
|
149
|
+
constructor() {
|
|
150
|
+
effect(() => {
|
|
151
|
+
this.autoBackgroundColorDirective.calculateColorFromInitials(this.displayInitials());
|
|
152
|
+
});
|
|
157
153
|
}
|
|
158
154
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
159
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiAvatarComponent, isStandalone: true, selector: "si-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, altText: { classPropertyName: "altText", publicName: "altText", isSignal: true, isRequired: true, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, statusAriaLabel: { classPropertyName: "statusAriaLabel", publicName: "statusAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "size()" } },
|
|
155
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiAvatarComponent, isStandalone: true, selector: "si-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, altText: { classPropertyName: "altText", publicName: "altText", isSignal: true, isRequired: true, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, statusAriaLabel: { classPropertyName: "statusAriaLabel", publicName: "statusAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "size()" } }, hostDirectives: [{ directive: SiAvatarBackgroundColorDirective, inputs: ["color", "color", "autoColor", "autoColor"] }], ngImport: i0, template: "@if (imageUrl()) {\n <img [src]=\"imageUrl()\" [alt]=\"altText()\" />\n} @else if (icon()) {\n <i class=\"icon\" [title]=\"altText()\" [ngClass]=\"icon()\"></i>\n} @else {\n <div\n class=\"initials\"\n [class.text-body]=\"color() === 0\"\n [title]=\"altText()\"\n [attr.aria-label]=\"altText()\"\n >{{ displayInitials() }}</div\n >\n}\n@let iconConfig = statusIcon();\n@if (iconConfig) {\n <span class=\"indicator-size indicator icon-stack\">\n <si-icon class=\"drop-shadow\" [ngClass]=\"iconConfig.color\" [icon]=\"iconConfig.icon\" />\n <si-icon [ngClass]=\"iconConfig.stackedColor\" [icon]=\"iconConfig.stacked\" />\n </span>\n}\n", styles: [":host{--avatar-size: 40px;--indicator-size: 24px;--background: var(--element-base-0);--indicator-offset-x: -12px;--indicator-offset-y: -8px;flex:0 0 auto;display:inline-flex;vertical-align:middle;color:var(--element-text-inverse);position:relative;align-items:center;justify-content:center;inline-size:var(--avatar-size);block-size:var(--avatar-size);border-radius:50%;background:var(--background)}:host.tiny,:host.xsmall,:host.small{--initials-size: .875rem;--indicator-size: 16px;--indicator-offset-x: -8px;--indicator-offset-y: -4px}:host.tiny{--avatar-size: 24px}:host.xsmall{--avatar-size: 28px}:host.small{--avatar-size: 32px}:host.large{--avatar-size: 56px}:host.xlarge{--avatar-size: 80px}.initials{font-weight:600;font-size:var(--initials-size, 1.125rem);line-height:1}img{inline-size:var(--avatar-size);block-size:var(--avatar-size);border-radius:50%}.indicator{position:absolute;inset-block-start:var(--indicator-offset-y);inset-inline-end:var(--indicator-offset-x);font-size:var(--indicator-size)}.indicator .drop-shadow ::ng-deep svg{filter:drop-shadow(1px 0 0 var(--element-base-1)) drop-shadow(-1px 0 0 var(--element-base-1)) drop-shadow(0 1px 0 var(--element-base-1)) drop-shadow(0 -1px 0 var(--element-base-1))}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
160
156
|
}
|
|
161
157
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiAvatarComponent, decorators: [{
|
|
162
158
|
type: Component,
|
|
@@ -167,8 +163,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
|
|
|
167
163
|
directive: SiAvatarBackgroundColorDirective,
|
|
168
164
|
inputs: ['color', 'autoColor']
|
|
169
165
|
}
|
|
170
|
-
], template: "@if (imageUrl()) {\n <img [src]=\"imageUrl()\" [alt]=\"altText()\" />\n} @else if (icon()) {\n <i class=\"icon\" [title]=\"altText()\" [ngClass]=\"icon()\"></i>\n} @else {\n <div\n class=\"initials\"\n [class.text-body]=\"color() === 0\"\n [title]=\"altText()\"\n [attr.aria-label]=\"altText()\"\n >{{ displayInitials }}</div\n >\n}\n@let iconConfig = statusIcon();\n@if (iconConfig) {\n <span class=\"indicator-size indicator icon-stack\">\n <si-icon class=\"drop-shadow\" [ngClass]=\"iconConfig.color\" [icon]=\"iconConfig.icon\" />\n <si-icon [ngClass]=\"iconConfig.stackedColor\" [icon]=\"iconConfig.stacked\" />\n </span>\n}\n", styles: [":host{--avatar-size: 40px;--indicator-size: 24px;--background: var(--element-base-0);--indicator-offset-x: -12px;--indicator-offset-y: -8px;flex:0 0 auto;display:inline-flex;vertical-align:middle;color:var(--element-text-inverse);position:relative;align-items:center;justify-content:center;inline-size:var(--avatar-size);block-size:var(--avatar-size);border-radius:50%;background:var(--background)}:host.tiny,:host.xsmall,:host.small{--initials-size: .875rem;--indicator-size: 16px;--indicator-offset-x: -8px;--indicator-offset-y: -4px}:host.tiny{--avatar-size: 24px}:host.xsmall{--avatar-size: 28px}:host.small{--avatar-size: 32px}:host.large{--avatar-size: 56px}:host.xlarge{--avatar-size: 80px}.initials{font-weight:600;font-size:var(--initials-size, 1.125rem);line-height:1}img{inline-size:var(--avatar-size);block-size:var(--avatar-size);border-radius:50%}.indicator{position:absolute;inset-block-start:var(--indicator-offset-y);inset-inline-end:var(--indicator-offset-x);font-size:var(--indicator-size)}.indicator .drop-shadow ::ng-deep svg{filter:drop-shadow(1px 0 0 var(--element-base-1)) drop-shadow(-1px 0 0 var(--element-base-1)) drop-shadow(0 1px 0 var(--element-base-1)) drop-shadow(0 -1px 0 var(--element-base-1))}\n"] }]
|
|
171
|
-
}] });
|
|
166
|
+
], template: "@if (imageUrl()) {\n <img [src]=\"imageUrl()\" [alt]=\"altText()\" />\n} @else if (icon()) {\n <i class=\"icon\" [title]=\"altText()\" [ngClass]=\"icon()\"></i>\n} @else {\n <div\n class=\"initials\"\n [class.text-body]=\"color() === 0\"\n [title]=\"altText()\"\n [attr.aria-label]=\"altText()\"\n >{{ displayInitials() }}</div\n >\n}\n@let iconConfig = statusIcon();\n@if (iconConfig) {\n <span class=\"indicator-size indicator icon-stack\">\n <si-icon class=\"drop-shadow\" [ngClass]=\"iconConfig.color\" [icon]=\"iconConfig.icon\" />\n <si-icon [ngClass]=\"iconConfig.stackedColor\" [icon]=\"iconConfig.stacked\" />\n </span>\n}\n", styles: [":host{--avatar-size: 40px;--indicator-size: 24px;--background: var(--element-base-0);--indicator-offset-x: -12px;--indicator-offset-y: -8px;flex:0 0 auto;display:inline-flex;vertical-align:middle;color:var(--element-text-inverse);position:relative;align-items:center;justify-content:center;inline-size:var(--avatar-size);block-size:var(--avatar-size);border-radius:50%;background:var(--background)}:host.tiny,:host.xsmall,:host.small{--initials-size: .875rem;--indicator-size: 16px;--indicator-offset-x: -8px;--indicator-offset-y: -4px}:host.tiny{--avatar-size: 24px}:host.xsmall{--avatar-size: 28px}:host.small{--avatar-size: 32px}:host.large{--avatar-size: 56px}:host.xlarge{--avatar-size: 80px}.initials{font-weight:600;font-size:var(--initials-size, 1.125rem);line-height:1}img{inline-size:var(--avatar-size);block-size:var(--avatar-size);border-radius:50%}.indicator{position:absolute;inset-block-start:var(--indicator-offset-y);inset-inline-end:var(--indicator-offset-x);font-size:var(--indicator-size)}.indicator .drop-shadow ::ng-deep svg{filter:drop-shadow(1px 0 0 var(--element-base-1)) drop-shadow(-1px 0 0 var(--element-base-1)) drop-shadow(0 1px 0 var(--element-base-1)) drop-shadow(0 -1px 0 var(--element-base-1))}\n"] }]
|
|
167
|
+
}], ctorParameters: () => [] });
|
|
172
168
|
|
|
173
169
|
/**
|
|
174
170
|
* Copyright (c) Siemens 2016 - 2025
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"siemens-element-ng-avatar.mjs","sources":["../../../../projects/element-ng/avatar/si-avatar-background-color.directive.ts","../../../../projects/element-ng/avatar/si-avatar.component.ts","../../../../projects/element-ng/avatar/si-avatar.component.html","../../../../projects/element-ng/avatar/index.ts","../../../../projects/element-ng/avatar/siemens-element-ng-avatar.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport {\n booleanAttribute,\n Directive,\n input,\n numberAttribute,\n OnChanges,\n signal,\n SimpleChanges\n} from '@angular/core';\n\nconst DATA_COLORS_MAX = 17;\nconst DATA_COLOR_NEUTRAL = 17;\nconst ASCII_CODE_INDEX_A = 64;\n\n/**\n * The directive provide a CSS variable --background with a color based on the initials or alt text.\n */\n@Directive({\n selector: '[siAvatarBackgroundColor]',\n host: {\n '[style.--background]': 'backgroundStyle()'\n }\n})\nexport class SiAvatarBackgroundColorDirective implements OnChanges {\n /**\n * The desired color index from $element-data-* color tokens. This can be set to any kind of\n * positive integer that is then mapped to a color index.\n * A better way to set a pseudo-random color is to set {@link autoColor} to `true`.\n *\n * @defaultValue undefined\n */\n readonly color = input<number | undefined, unknown>(undefined, { transform: numberAttribute });\n\n /**\n * Automatically calculates the background color.\n * If set, {@link color} will be ignored.\n *\n * @defaultValue false\n */\n readonly autoColor = input(false, { transform: booleanAttribute });\n\n protected readonly backgroundStyle = signal<string | undefined>('var(--element-data-17)');\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes.color) {\n this.setColor(this.color());\n }\n }\n\n /**\n * Update background color variable based on the initials or placeholder text.\n */\n public calculateColorFromInitials(displayInitials?: string): void {\n if (!this.autoColor() || !displayInitials) {\n return;\n }\n\n let color = 0;\n for (let i = 0; i < displayInitials.length; i++) {\n color *= 17; // this prevents 'JD' to have the same color as 'DJ'\n color += displayInitials.charCodeAt(i) - ASCII_CODE_INDEX_A;\n }\n this.setColor(color);\n }\n\n private setColor(color?: number): void {\n if (this.color() === 0) {\n this.backgroundStyle.set(undefined);\n } else {\n const actualColor = color ?? DATA_COLOR_NEUTRAL;\n const colorIndex = ((actualColor - 1) % DATA_COLORS_MAX) + 1;\n this.backgroundStyle.set(`var(--element-data-${colorIndex})`);\n }\n }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgClass } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n computed,\n inject,\n input,\n numberAttribute,\n OnChanges,\n SimpleChanges\n} from '@angular/core';\nimport { EntityStatusType } from '@siemens/element-ng/common';\nimport { SiIconComponent, STATUS_ICON_CONFIG } from '@siemens/element-ng/icon';\nimport { TranslatableString } from '@siemens/element-translate-ng/translate';\n\nimport { SiAvatarBackgroundColorDirective } from './si-avatar-background-color.directive';\n\nexport type AvatarSize = 'tiny' | 'xsmall' | 'small' | 'regular' | 'large' | 'xlarge';\n\n@Component({\n selector: 'si-avatar',\n imports: [NgClass, SiIconComponent],\n templateUrl: './si-avatar.component.html',\n styleUrl: './si-avatar.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class]': 'size()'\n },\n hostDirectives: [\n {\n directive: SiAvatarBackgroundColorDirective,\n inputs: ['color', 'autoColor']\n }\n ]\n})\nexport class SiAvatarComponent implements OnChanges {\n private readonly statusIcons = inject(STATUS_ICON_CONFIG);\n /**\n * Size of the component.\n *\n * @defaultValue 'regular'\n */\n readonly size = input<AvatarSize>('regular');\n /** Image src URL when using an image. */\n readonly imageUrl = input<string>();\n /** Icon name when using an icon. */\n readonly icon = input<string>();\n /**\n * Initials to be displayed as default avatar if no `icon` or `imageUrl` are provided.\n * If also no initials are provided, they will be automatically calculated from the `altText`.\n * The value will be used to calculate the background color when `autoColor` is true.\n */\n readonly initials = input<string>();\n /**\n * The desired color index from $element-data-* color tokens. This can be set to any kind of\n * positive integer that is then mapped to a color index.\n * A better way to set a pseudo-random color is to set * {@link autoColor} to `true`.\n *\n * @defaultValue undefined\n */\n readonly color = input<number | undefined, unknown>(undefined, { transform: numberAttribute });\n /** The `alt` text for image, `title` for other modes. */\n readonly altText = input.required<string>();\n /**\n * The status (success, info, warning, caution, danger, critical, pending, progress) to be\n * visualized.\n */\n readonly status = input<EntityStatusType>();\n /**\n * aria-label for status\n */\n readonly statusAriaLabel = input<TranslatableString>();\n\n protected readonly statusIcon = computed(() => {\n const status = this.status();\n return status ? this.statusIcons[status] : undefined;\n });\n protected displayInitials?: string;\n private readonly autoBackgroundColorDirective = inject(SiAvatarBackgroundColorDirective);\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes.initials || changes.altText) {\n this.setInitials();\n this.autoBackgroundColorDirective.calculateColorFromInitials(this.displayInitials);\n }\n }\n\n private setInitials(): void {\n const initials = this.initials();\n if (initials) {\n this.displayInitials = initials;\n } else {\n const name = this.altText()\n .replaceAll(/\\([^)]*\\)/g, '')\n .trim();\n const byComma = name.split(/,\\s*/);\n let first: string;\n let last: string;\n if (byComma.length > 1) {\n last = byComma[0];\n first = byComma[1];\n } else {\n const parts = name.split(' ');\n first = parts.shift() ?? '';\n last = parts.pop() ?? '';\n }\n if (first) {\n first = first[0].toLocaleUpperCase();\n }\n if (last) {\n last = last[0].toLocaleUpperCase();\n }\n this.displayInitials = first + last;\n }\n }\n}\n","@if (imageUrl()) {\n <img [src]=\"imageUrl()\" [alt]=\"altText()\" />\n} @else if (icon()) {\n <i class=\"icon\" [title]=\"altText()\" [ngClass]=\"icon()\"></i>\n} @else {\n <div\n class=\"initials\"\n [class.text-body]=\"color() === 0\"\n [title]=\"altText()\"\n [attr.aria-label]=\"altText()\"\n >{{ displayInitials }}</div\n >\n}\n@let iconConfig = statusIcon();\n@if (iconConfig) {\n <span class=\"indicator-size indicator icon-stack\">\n <si-icon class=\"drop-shadow\" [ngClass]=\"iconConfig.color\" [icon]=\"iconConfig.icon\" />\n <si-icon [ngClass]=\"iconConfig.stackedColor\" [icon]=\"iconConfig.stacked\" />\n </span>\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-avatar-background-color.directive';\nexport * from './si-avatar.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.SiAvatarBackgroundColorDirective"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"siemens-element-ng-avatar.mjs","sources":["../../../../projects/element-ng/avatar/si-avatar-background-color.directive.ts","../../../../projects/element-ng/avatar/si-avatar.component.ts","../../../../projects/element-ng/avatar/si-avatar.component.html","../../../../projects/element-ng/avatar/index.ts","../../../../projects/element-ng/avatar/siemens-element-ng-avatar.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport {\n booleanAttribute,\n Directive,\n input,\n numberAttribute,\n OnChanges,\n signal,\n SimpleChanges\n} from '@angular/core';\n\nconst DATA_COLORS_MAX = 17;\nconst DATA_COLOR_NEUTRAL = 17;\nconst ASCII_CODE_INDEX_A = 64;\n\n/**\n * The directive provide a CSS variable --background with a color based on the initials or alt text.\n */\n@Directive({\n selector: '[siAvatarBackgroundColor]',\n host: {\n '[style.--background]': 'backgroundStyle()'\n }\n})\nexport class SiAvatarBackgroundColorDirective implements OnChanges {\n /**\n * The desired color index from $element-data-* color tokens. This can be set to any kind of\n * positive integer that is then mapped to a color index.\n * A better way to set a pseudo-random color is to set {@link autoColor} to `true`.\n *\n * @defaultValue undefined\n */\n readonly color = input<number | undefined, unknown>(undefined, { transform: numberAttribute });\n\n /**\n * Automatically calculates the background color.\n * If set, {@link color} will be ignored.\n *\n * @defaultValue false\n */\n readonly autoColor = input(false, { transform: booleanAttribute });\n\n protected readonly backgroundStyle = signal<string | undefined>('var(--element-data-17)');\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes.color) {\n this.setColor(this.color());\n }\n }\n\n /**\n * Update background color variable based on the initials or placeholder text.\n */\n public calculateColorFromInitials(displayInitials?: string): void {\n if (!this.autoColor() || !displayInitials) {\n return;\n }\n\n let color = 0;\n for (let i = 0; i < displayInitials.length; i++) {\n color *= 17; // this prevents 'JD' to have the same color as 'DJ'\n color += displayInitials.charCodeAt(i) - ASCII_CODE_INDEX_A;\n }\n this.setColor(color);\n }\n\n private setColor(color?: number): void {\n if (this.color() === 0) {\n this.backgroundStyle.set(undefined);\n } else {\n const actualColor = color ?? DATA_COLOR_NEUTRAL;\n const colorIndex = ((actualColor - 1) % DATA_COLORS_MAX) + 1;\n this.backgroundStyle.set(`var(--element-data-${colorIndex})`);\n }\n }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgClass } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n computed,\n effect,\n inject,\n input,\n numberAttribute\n} from '@angular/core';\nimport { EntityStatusType } from '@siemens/element-ng/common';\nimport { SiIconComponent, STATUS_ICON_CONFIG } from '@siemens/element-ng/icon';\nimport { TranslatableString } from '@siemens/element-translate-ng/translate';\n\nimport { SiAvatarBackgroundColorDirective } from './si-avatar-background-color.directive';\n\nexport type AvatarSize = 'tiny' | 'xsmall' | 'small' | 'regular' | 'large' | 'xlarge';\n\n@Component({\n selector: 'si-avatar',\n imports: [NgClass, SiIconComponent],\n templateUrl: './si-avatar.component.html',\n styleUrl: './si-avatar.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class]': 'size()'\n },\n hostDirectives: [\n {\n directive: SiAvatarBackgroundColorDirective,\n inputs: ['color', 'autoColor']\n }\n ]\n})\nexport class SiAvatarComponent {\n private readonly statusIcons = inject(STATUS_ICON_CONFIG);\n /**\n * Size of the component.\n *\n * @defaultValue 'regular'\n */\n readonly size = input<AvatarSize>('regular');\n /** Image src URL when using an image. */\n readonly imageUrl = input<string>();\n /** Icon name when using an icon. */\n readonly icon = input<string>();\n /**\n * Initials to be displayed as default avatar if no `icon` or `imageUrl` are provided.\n * If also no initials are provided, they will be automatically calculated from the `altText`.\n * The value will be used to calculate the background color when `autoColor` is true.\n */\n readonly initials = input<string>();\n /**\n * The desired color index from $element-data-* color tokens. This can be set to any kind of\n * positive integer that is then mapped to a color index.\n * A better way to set a pseudo-random color is to set * {@link autoColor} to `true`.\n *\n * @defaultValue undefined\n */\n readonly color = input<number | undefined, unknown>(undefined, { transform: numberAttribute });\n /** The `alt` text for image, `title` for other modes. */\n readonly altText = input.required<string>();\n /**\n * The status (success, info, warning, caution, danger, critical, pending, progress) to be\n * visualized.\n */\n readonly status = input<EntityStatusType>();\n /**\n * aria-label for status\n */\n readonly statusAriaLabel = input<TranslatableString>();\n\n protected readonly statusIcon = computed(() => {\n const status = this.status();\n return status ? this.statusIcons[status] : undefined;\n });\n\n protected readonly displayInitials = computed(() => {\n const initials = this.initials();\n if (initials) {\n return initials;\n }\n\n const name = this.altText()\n .replaceAll(/\\([^)]*\\)/g, '')\n .trim();\n const byComma = name.split(/,\\s*/);\n let first: string;\n let last: string;\n if (byComma.length > 1) {\n last = byComma[0];\n first = byComma[1];\n } else {\n const parts = name.split(' ');\n first = parts.shift() ?? '';\n last = parts.pop() ?? '';\n }\n if (first) {\n first = first[0].toLocaleUpperCase();\n }\n if (last) {\n last = last[0].toLocaleUpperCase();\n }\n return first + last;\n });\n\n private readonly autoBackgroundColorDirective = inject(SiAvatarBackgroundColorDirective);\n\n constructor() {\n effect(() => {\n this.autoBackgroundColorDirective.calculateColorFromInitials(this.displayInitials());\n });\n }\n}\n","@if (imageUrl()) {\n <img [src]=\"imageUrl()\" [alt]=\"altText()\" />\n} @else if (icon()) {\n <i class=\"icon\" [title]=\"altText()\" [ngClass]=\"icon()\"></i>\n} @else {\n <div\n class=\"initials\"\n [class.text-body]=\"color() === 0\"\n [title]=\"altText()\"\n [attr.aria-label]=\"altText()\"\n >{{ displayInitials() }}</div\n >\n}\n@let iconConfig = statusIcon();\n@if (iconConfig) {\n <span class=\"indicator-size indicator icon-stack\">\n <si-icon class=\"drop-shadow\" [ngClass]=\"iconConfig.color\" [icon]=\"iconConfig.icon\" />\n <si-icon [ngClass]=\"iconConfig.stackedColor\" [icon]=\"iconConfig.stacked\" />\n </span>\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-avatar-background-color.directive';\nexport * from './si-avatar.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.SiAvatarBackgroundColorDirective"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"siemens-element-ng-card.mjs","sources":["../../../../projects/element-ng/card/si-card.component.ts","../../../../projects/element-ng/card/si-card.component.html","../../../../projects/element-ng/card/si-card.module.ts","../../../../projects/element-ng/card/index.ts","../../../../projects/element-ng/card/siemens-element-ng-card.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { Component, computed, input } from '@angular/core';\nimport { MenuItem as MenuItemLegacy } from '@siemens/element-ng/common';\nimport {\n ContentActionBarMainItem,\n SiContentActionBarComponent,\n ViewType\n} from '@siemens/element-ng/content-action-bar';\nimport { MenuItem } from '@siemens/element-ng/menu';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\n@Component({\n selector: 'si-card',\n imports: [SiContentActionBarComponent, SiTranslatePipe],\n templateUrl: './si-card.component.html',\n styleUrl: './si-card.component.scss',\n host: {\n class: 'card',\n '[class.card-horizontal]': 'classCardHorizontal()',\n '[style.--si-card-img-object-fit]': 'imgObjectFit()',\n '[style.--si-card-img-object-position]': 'imgObjectPosition()'\n }\n})\nexport class SiCardComponent {\n /**\n * Card header text.\n */\n readonly heading = input<TranslatableString>();\n /**\n * Card secondary header text.\n */\n readonly subHeading = input<TranslatableString>();\n /**\n * Input list of primary action items. Supports up to **4** actions and omits additional ones.\n *\n * @defaultValue []\n */\n readonly primaryActions = input<(MenuItemLegacy | ContentActionBarMainItem)[]>([]);\n /**\n * Input list of secondary action items.\n *\n * @defaultValue []\n */\n readonly secondaryActions = input<(MenuItemLegacy | MenuItem)[]>([]);\n /**\n * A param that will be passed to the `action` in the primary/secondary actions.\n * This allows to re-use the same primary/secondary action arrays across rows\n * in a table.\n */\n readonly actionParam = input<any>();\n /**\n * The view type of the content action bar of the card. Default is `collapsible`\n * for dashboards. However, in some cases you might need to change to `expanded`\n * or `mobile`.\n *\n * @defaultValue 'collapsible'\n */\n readonly actionBarViewType = input<ViewType>('collapsible');\n /**\n * Optional setting of html title attribute for the content action bar.\n * Helpful for a11y when only one action is configured in expand mode.\n *\n * @defaultValue ''\n */\n readonly actionBarTitle = input<TranslatableString>('');\n /**\n * Image source for the card.\n */\n readonly imgSrc = input<string>();\n /**\n * Alt text for a provided image.\n */\n readonly imgAlt = input<
|
|
1
|
+
{"version":3,"file":"siemens-element-ng-card.mjs","sources":["../../../../projects/element-ng/card/si-card.component.ts","../../../../projects/element-ng/card/si-card.component.html","../../../../projects/element-ng/card/si-card.module.ts","../../../../projects/element-ng/card/index.ts","../../../../projects/element-ng/card/siemens-element-ng-card.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { Component, computed, input } from '@angular/core';\nimport { MenuItem as MenuItemLegacy } from '@siemens/element-ng/common';\nimport {\n ContentActionBarMainItem,\n SiContentActionBarComponent,\n ViewType\n} from '@siemens/element-ng/content-action-bar';\nimport { MenuItem } from '@siemens/element-ng/menu';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\n@Component({\n selector: 'si-card',\n imports: [SiContentActionBarComponent, SiTranslatePipe],\n templateUrl: './si-card.component.html',\n styleUrl: './si-card.component.scss',\n host: {\n class: 'card',\n '[class.card-horizontal]': 'classCardHorizontal()',\n '[style.--si-card-img-object-fit]': 'imgObjectFit()',\n '[style.--si-card-img-object-position]': 'imgObjectPosition()'\n }\n})\nexport class SiCardComponent {\n /**\n * Card header text.\n */\n readonly heading = input<TranslatableString>();\n /**\n * Card secondary header text.\n */\n readonly subHeading = input<TranslatableString>();\n /**\n * Input list of primary action items. Supports up to **4** actions and omits additional ones.\n *\n * @defaultValue []\n */\n readonly primaryActions = input<(MenuItemLegacy | ContentActionBarMainItem)[]>([]);\n /**\n * Input list of secondary action items.\n *\n * @defaultValue []\n */\n readonly secondaryActions = input<(MenuItemLegacy | MenuItem)[]>([]);\n /**\n * A param that will be passed to the `action` in the primary/secondary actions.\n * This allows to re-use the same primary/secondary action arrays across rows\n * in a table.\n */\n readonly actionParam = input<any>();\n /**\n * The view type of the content action bar of the card. Default is `collapsible`\n * for dashboards. However, in some cases you might need to change to `expanded`\n * or `mobile`.\n *\n * @defaultValue 'collapsible'\n */\n readonly actionBarViewType = input<ViewType>('collapsible');\n /**\n * Optional setting of html title attribute for the content action bar.\n * Helpful for a11y when only one action is configured in expand mode.\n *\n * @defaultValue ''\n */\n readonly actionBarTitle = input<TranslatableString>('');\n /**\n * Image source for the card.\n */\n readonly imgSrc = input<string>();\n /**\n * Alt text for a provided image.\n */\n readonly imgAlt = input<TranslatableString>();\n /**\n * Defines if an image is placed on top or start (left) of the card.\n *\n * @defaultValue 'vertical'\n */\n readonly imgDir = input<('horizontal' | 'vertical') | undefined>('vertical');\n /**\n * Sets the image [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) CSS property.\n *\n * @defaultValue 'scale-down'\n */\n readonly imgObjectFit = input<('contain' | 'cover' | 'fill' | 'none' | 'scale-down') | undefined>(\n 'scale-down'\n );\n /**\n * Sets the image [object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) CSS property.\n */\n readonly imgObjectPosition = input<string>();\n /**\n * In case the card uses an image and horizontal direction is used we set flex row direction.\n */\n protected readonly classCardHorizontal = computed(\n () => !!this.imgSrc() && this.imgDir() === 'horizontal'\n );\n /**\n * Returns `true` when primary or secondary actions are set.\n */\n readonly displayContentActionBar = computed(\n () => this.primaryActions()?.length > 0 || this.secondaryActions()?.length > 0\n );\n}\n","@if (imgSrc()) {\n <img\n class=\"card-content-split\"\n [class.card-img-top]=\"imgDir() !== 'horizontal'\"\n [class.card-img-start]=\"imgDir() === 'horizontal'\"\n [attr.src]=\"imgSrc()\"\n [attr.alt]=\"imgAlt() | translate\"\n />\n}\n\n<div class=\"content-container\" [class.card-content-split]=\"imgSrc()\">\n @if (heading() || displayContentActionBar()) {\n <div class=\"card-header d-flex justify-content-between\">\n <ng-content #cardHeaderIcon select=\"[headerIcon]\" />\n <div class=\"heading\">\n @if (heading()) {\n <div class=\"text-truncate si-h5\">{{ heading() | translate }}</div>\n }\n @if (subHeading()) {\n <div class=\"text-truncate si-body text-secondary pt-2\">{{\n subHeading() | translate\n }}</div>\n }\n </div>\n\n <div class=\"cab d-flex ms-6 my-n4 me-n5\">\n @if (displayContentActionBar()) {\n <si-content-action-bar\n class=\"ms-auto\"\n [primaryActions]=\"primaryActions()\"\n [secondaryActions]=\"secondaryActions()\"\n [actionParam]=\"actionParam()\"\n [viewType]=\"actionBarViewType()\"\n [attr.title]=\"actionBarTitle() | translate\"\n />\n }\n </div>\n </div>\n }\n <ng-content #cardBody select=\"[body]\" />\n <ng-content #cardFooter select=\"[footer]\" />\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiCardComponent } from './si-card.component';\n\n@NgModule({\n imports: [SiCardComponent],\n exports: [SiCardComponent]\n})\nexport class SiCardModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-card.component';\nexport * from './si-card.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -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 } 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<string>();\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":"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"}
|
|
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":"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"}
|
|
@@ -58,13 +58,13 @@ class SiColumnSelectionEditorComponent {
|
|
|
58
58
|
this.visibilityChange.emit();
|
|
59
59
|
}
|
|
60
60
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiColumnSelectionEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
61
|
-
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=\"
|
|
61
|
+
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 });
|
|
62
62
|
}
|
|
63
63
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiColumnSelectionEditorComponent, decorators: [{
|
|
64
64
|
type: Component,
|
|
65
65
|
args: [{ selector: 'si-column-selection-editor', imports: [CdkDragHandle, SiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
66
66
|
class: 'd-block my-4 mx-1 rounded-2 elevation-1'
|
|
67
|
-
}, template: "<div class=\"d-flex p-4\" (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n <div class=\"
|
|
67
|
+
}, 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"] }]
|
|
68
68
|
}], propDecorators: { tryEdit: [{
|
|
69
69
|
type: HostListener,
|
|
70
70
|
args: ['keydown.enter', ['$event']]
|