@saitec/ui 0.1.0

package/fesm2022/saitec-ui-menubar.mjs

@@ -0,0 +1,72 @@
+import * as i0 from '@angular/core';
+import { input, signal, HostListener, ChangeDetectionStrategy, Component } from '@angular/core';
+
+class SuiMenubar {
+    elementRef;
+    items = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    bordered = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    toggleItem(item, index) {
+        if (item.disabled) {
+            return;
+        }
+        if (item.items?.length) {
+            this.activeIndex.update(current => current === index
+                ? null
+                : index);
+            return;
+        }
+        item.command?.(item);
+        this.close();
+    }
+    selectChild(item) {
+        if (item.disabled) {
+            return;
+        }
+        item.command?.(item);
+        this.close();
+    }
+    isOpen(index) {
+        return this.activeIndex() === index;
+    }
+    close() {
+        this.activeIndex.set(null);
+    }
+    handleDocumentClick(event) {
+        const target = event.target;
+        if (!this.elementRef
+            .nativeElement
+            .contains(target)) {
+            this.close();
+        }
+    }
+    handleEscape() {
+        this.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiMenubar, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SuiMenubar, isStandalone: true, selector: "sui-menubar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "handleDocumentClick($event)", "document:keydown.escape": "handleEscape()" } }, ngImport: i0, template: "<nav\n    class=\"sui-menubar\"\n    [class.sui-menubar-bordered]=\"bordered()\"\n    aria-label=\"Main menu\">\n\n    <div class=\"sui-menubar-start\">\n        <ng-content select=\"[suiMenubarStart]\" />\n    </div>\n\n    <ul\n        class=\"sui-menubar-list\"\n        role=\"menubar\">\n\n        @for (\n            item of items();\n            track $index;\n            let index = $index\n        ) {\n\n            @if (item.separator) {\n\n                <li\n                    class=\"sui-menubar-separator\"\n                    role=\"separator\">\n                </li>\n\n            }\n            @else {\n\n                <li\n                    class=\"sui-menubar-item\"\n                    role=\"none\">\n\n                    <button\n                        type=\"button\"\n                        class=\"sui-menubar-button\"\n\n                        [class.sui-menubar-button-active]=\"\n                            isOpen(index)\n                        \"\n\n                        [disabled]=\"\n                            item.disabled ?? false\n                        \"\n\n                        role=\"menuitem\"\n\n                        [attr.aria-haspopup]=\"\n                            item.items?.length\n                                ? 'menu'\n                                : null\n                        \"\n\n                        [attr.aria-expanded]=\"\n                            item.items?.length\n                                ? isOpen(index)\n                                : null\n                        \"\n\n                        (click)=\"\n                            toggleItem(\n                                item,\n                                index\n                            )\n                        \">\n\n                        <span class=\"sui-menubar-label\">\n                            {{ item.label }}\n                        </span>\n\n                        @if (item.items?.length) {\n                            <span\n                                class=\"sui-menubar-chevron\"\n                                aria-hidden=\"true\">\n                                \u25BC\n                            </span>\n                        }\n\n                    </button>\n\n                    @if (\n                        item.items?.length &&\n                        isOpen(index)\n                    ) {\n\n                        <ul\n                            class=\"sui-menubar-submenu\"\n                            role=\"menu\">\n\n                            @for (\n                                child of item.items;\n                                track $index\n                            ) {\n\n                                @if (child.separator) {\n\n                                    <li\n                                        class=\"sui-menubar-submenu-separator\"\n                                        role=\"separator\">\n                                    </li>\n\n                                }\n                                @else {\n\n                                    <li role=\"none\">\n\n                                        <button\n                                            type=\"button\"\n                                            class=\"sui-menubar-submenu-item\"\n\n                                            [disabled]=\"\n                                                child.disabled ?? false\n                                            \"\n\n                                            role=\"menuitem\"\n\n                                            (click)=\"\n                                                selectChild(child)\n                                            \">\n\n                                            {{ child.label }}\n\n                                        </button>\n\n                                    </li>\n\n                                }\n\n                            }\n\n                        </ul>\n\n                    }\n\n                </li>\n\n            }\n\n        }\n\n    </ul>\n\n    <div class=\"sui-menubar-end\">\n        <ng-content select=\"[suiMenubarEnd]\" />\n    </div>\n\n</nav>", styles: [":host{display:block;width:100%}.sui-menubar{display:flex;align-items:center;width:100%;min-height:var(--sui-control-height-lg);box-sizing:border-box;padding:var(--sui-space-2) var(--sui-space-3);color:var(--sui-menubar-text);background:var(--sui-menubar-background);border-radius:var(--sui-menubar-radius)}.sui-menubar-bordered{border:var(--sui-menubar-border-width) solid var(--sui-menubar-border)}.sui-menubar-start,.sui-menubar-end{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.sui-menubar-end{margin-left:auto}.sui-menubar-start:empty,.sui-menubar-end:empty{display:none}.sui-menubar-list{display:flex;align-items:center;gap:.125rem;margin:0;padding:0;list-style:none}.sui-menubar-item{position:relative}.sui-menubar-button{display:inline-flex;align-items:center;gap:.375rem;min-height:2.25rem;padding:.5rem .75rem;color:var(--sui-menubar-text);background:transparent;border:0;border-radius:var(--sui-menubar-item-radius);cursor:pointer;font-family:inherit;font-size:var(--sui-control-font-size-sm);font-weight:var(--sui-font-weight-medium);white-space:nowrap;outline:none}.sui-menubar-button:hover:not(:disabled),.sui-menubar-button-active{color:var(--sui-color-content);background:var(--sui-menubar-item-background-hover)}.sui-menubar-button:focus-visible{outline:var(--sui-focus-ring-width) solid var(--sui-color-focus);outline-offset:1px}.sui-menubar-button:disabled{cursor:not-allowed;color:var(--sui-color-content-disabled);opacity:.6}.sui-menubar-chevron{font-size:.55rem;color:var(--sui-color-content-muted)}.sui-menubar-separator{width:1px;height:1.5rem;margin:0 .375rem;background:var(--sui-menubar-border)}.sui-menubar-submenu{position:absolute;top:calc(100% + .25rem);left:0;z-index:var(--sui-menubar-z-index);min-width:12rem;box-sizing:border-box;margin:0;padding:.25rem;list-style:none;color:var(--sui-menubar-text);background:var(--sui-menubar-background);border:var(--sui-menubar-border-width) solid var(--sui-menubar-border);border-radius:var(--sui-menubar-radius);box-shadow:var(--sui-menubar-dropdown-shadow)}.sui-menubar-submenu-item{display:flex;align-items:center;width:100%;box-sizing:border-box;padding:.5rem .625rem;color:var(--sui-menubar-text);background:transparent;border:0;border-radius:.375rem;cursor:pointer;font-family:inherit;font-size:.875rem;text-align:left;outline:none}.sui-menubar-submenu-item:hover:not(:disabled){color:var(--sui-color-content);background:var(--sui-menubar-item-background-hover)}.sui-menubar-submenu-item:focus-visible{outline:var(--sui-focus-ring-width) solid var(--sui-color-focus);outline-offset:-2px}.sui-menubar-submenu-item:disabled{cursor:not-allowed;color:var(--sui-color-content-disabled);opacity:.6}.sui-menubar-submenu-separator{height:1px;margin:.25rem;background:var(--sui-menubar-border)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiMenubar, decorators: [{
+            type: Component,
+            args: [{ selector: 'sui-menubar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n    class=\"sui-menubar\"\n    [class.sui-menubar-bordered]=\"bordered()\"\n    aria-label=\"Main menu\">\n\n    <div class=\"sui-menubar-start\">\n        <ng-content select=\"[suiMenubarStart]\" />\n    </div>\n\n    <ul\n        class=\"sui-menubar-list\"\n        role=\"menubar\">\n\n        @for (\n            item of items();\n            track $index;\n            let index = $index\n        ) {\n\n            @if (item.separator) {\n\n                <li\n                    class=\"sui-menubar-separator\"\n                    role=\"separator\">\n                </li>\n\n            }\n            @else {\n\n                <li\n                    class=\"sui-menubar-item\"\n                    role=\"none\">\n\n                    <button\n                        type=\"button\"\n                        class=\"sui-menubar-button\"\n\n                        [class.sui-menubar-button-active]=\"\n                            isOpen(index)\n                        \"\n\n                        [disabled]=\"\n                            item.disabled ?? false\n                        \"\n\n                        role=\"menuitem\"\n\n                        [attr.aria-haspopup]=\"\n                            item.items?.length\n                                ? 'menu'\n                                : null\n                        \"\n\n                        [attr.aria-expanded]=\"\n                            item.items?.length\n                                ? isOpen(index)\n                                : null\n                        \"\n\n                        (click)=\"\n                            toggleItem(\n                                item,\n                                index\n                            )\n                        \">\n\n                        <span class=\"sui-menubar-label\">\n                            {{ item.label }}\n                        </span>\n\n                        @if (item.items?.length) {\n                            <span\n                                class=\"sui-menubar-chevron\"\n                                aria-hidden=\"true\">\n                                \u25BC\n                            </span>\n                        }\n\n                    </button>\n\n                    @if (\n                        item.items?.length &&\n                        isOpen(index)\n                    ) {\n\n                        <ul\n                            class=\"sui-menubar-submenu\"\n                            role=\"menu\">\n\n                            @for (\n                                child of item.items;\n                                track $index\n                            ) {\n\n                                @if (child.separator) {\n\n                                    <li\n                                        class=\"sui-menubar-submenu-separator\"\n                                        role=\"separator\">\n                                    </li>\n\n                                }\n                                @else {\n\n                                    <li role=\"none\">\n\n                                        <button\n                                            type=\"button\"\n                                            class=\"sui-menubar-submenu-item\"\n\n                                            [disabled]=\"\n                                                child.disabled ?? false\n                                            \"\n\n                                            role=\"menuitem\"\n\n                                            (click)=\"\n                                                selectChild(child)\n                                            \">\n\n                                            {{ child.label }}\n\n                                        </button>\n\n                                    </li>\n\n                                }\n\n                            }\n\n                        </ul>\n\n                    }\n\n                </li>\n\n            }\n\n        }\n\n    </ul>\n\n    <div class=\"sui-menubar-end\">\n        <ng-content select=\"[suiMenubarEnd]\" />\n    </div>\n\n</nav>", styles: [":host{display:block;width:100%}.sui-menubar{display:flex;align-items:center;width:100%;min-height:var(--sui-control-height-lg);box-sizing:border-box;padding:var(--sui-space-2) var(--sui-space-3);color:var(--sui-menubar-text);background:var(--sui-menubar-background);border-radius:var(--sui-menubar-radius)}.sui-menubar-bordered{border:var(--sui-menubar-border-width) solid var(--sui-menubar-border)}.sui-menubar-start,.sui-menubar-end{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.sui-menubar-end{margin-left:auto}.sui-menubar-start:empty,.sui-menubar-end:empty{display:none}.sui-menubar-list{display:flex;align-items:center;gap:.125rem;margin:0;padding:0;list-style:none}.sui-menubar-item{position:relative}.sui-menubar-button{display:inline-flex;align-items:center;gap:.375rem;min-height:2.25rem;padding:.5rem .75rem;color:var(--sui-menubar-text);background:transparent;border:0;border-radius:var(--sui-menubar-item-radius);cursor:pointer;font-family:inherit;font-size:var(--sui-control-font-size-sm);font-weight:var(--sui-font-weight-medium);white-space:nowrap;outline:none}.sui-menubar-button:hover:not(:disabled),.sui-menubar-button-active{color:var(--sui-color-content);background:var(--sui-menubar-item-background-hover)}.sui-menubar-button:focus-visible{outline:var(--sui-focus-ring-width) solid var(--sui-color-focus);outline-offset:1px}.sui-menubar-button:disabled{cursor:not-allowed;color:var(--sui-color-content-disabled);opacity:.6}.sui-menubar-chevron{font-size:.55rem;color:var(--sui-color-content-muted)}.sui-menubar-separator{width:1px;height:1.5rem;margin:0 .375rem;background:var(--sui-menubar-border)}.sui-menubar-submenu{position:absolute;top:calc(100% + .25rem);left:0;z-index:var(--sui-menubar-z-index);min-width:12rem;box-sizing:border-box;margin:0;padding:.25rem;list-style:none;color:var(--sui-menubar-text);background:var(--sui-menubar-background);border:var(--sui-menubar-border-width) solid var(--sui-menubar-border);border-radius:var(--sui-menubar-radius);box-shadow:var(--sui-menubar-dropdown-shadow)}.sui-menubar-submenu-item{display:flex;align-items:center;width:100%;box-sizing:border-box;padding:.5rem .625rem;color:var(--sui-menubar-text);background:transparent;border:0;border-radius:.375rem;cursor:pointer;font-family:inherit;font-size:.875rem;text-align:left;outline:none}.sui-menubar-submenu-item:hover:not(:disabled){color:var(--sui-color-content);background:var(--sui-menubar-item-background-hover)}.sui-menubar-submenu-item:focus-visible{outline:var(--sui-focus-ring-width) solid var(--sui-color-focus);outline-offset:-2px}.sui-menubar-submenu-item:disabled{cursor:not-allowed;color:var(--sui-color-content-disabled);opacity:.6}.sui-menubar-submenu-separator{height:1px;margin:.25rem;background:var(--sui-menubar-border)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], handleDocumentClick: [{
+                type: HostListener,
+                args: ['document:click',
+                    ['$event']]
+            }], handleEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SuiMenubar };
+//# sourceMappingURL=saitec-ui-menubar.mjs.map

package/fesm2022/saitec-ui-menubar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"saitec-ui-menubar.mjs","sources":["../../../projects/ui/menubar/src/menubar.component.ts","../../../projects/ui/menubar/src/menubar.component.html","../../../projects/ui/menubar/src/saitec-ui-menubar.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    HostListener,\n    input,\n    signal\n} from '@angular/core';\n\nimport {\n    SuiMenuItem\n} from '@saitec/ui/menu';\n\n@Component({\n    selector: 'sui-menubar',\n    standalone: true,\n    templateUrl: './menubar.component.html',\n    styleUrl: './menubar.component.css',\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SuiMenubar {\n\n    items = input<SuiMenuItem[]>([]);\n\n    bordered = input(true);\n\n    protected readonly activeIndex =\n        signal<number | null>(null);\n\n    constructor(\n        private readonly elementRef:\n            ElementRef<HTMLElement>\n    ) {\n    }\n\n    protected toggleItem(\n        item: SuiMenuItem,\n        index: number\n    ): void {\n\n        if (item.disabled) {\n            return;\n        }\n\n        if (item.items?.length) {\n            this.activeIndex.update(\n                current =>\n                    current === index\n                        ? null\n                        : index\n            );\n\n            return;\n        }\n\n        item.command?.(item);\n\n        this.close();\n    }\n\n    protected selectChild(\n        item: SuiMenuItem\n    ): void {\n\n        if (item.disabled) {\n            return;\n        }\n\n        item.command?.(item);\n\n        this.close();\n    }\n\n    protected isOpen(\n        index: number\n    ): boolean {\n        return this.activeIndex() === index;\n    }\n\n    protected close(): void {\n        this.activeIndex.set(null);\n    }\n\n    @HostListener(\n        'document:click',\n        ['$event']\n    )\n    protected handleDocumentClick(\n        event: MouseEvent\n    ): void {\n\n        const target =\n            event.target as Node;\n\n        if (\n            !this.elementRef\n                .nativeElement\n                .contains(target)\n        ) {\n            this.close();\n        }\n    }\n\n    @HostListener(\n        'document:keydown.escape'\n    )\n    protected handleEscape(): void {\n        this.close();\n    }\n}","<nav\n    class=\"sui-menubar\"\n    [class.sui-menubar-bordered]=\"bordered()\"\n    aria-label=\"Main menu\">\n\n    <div class=\"sui-menubar-start\">\n        <ng-content select=\"[suiMenubarStart]\" />\n    </div>\n\n    <ul\n        class=\"sui-menubar-list\"\n        role=\"menubar\">\n\n        @for (\n            item of items();\n            track $index;\n            let index = $index\n        ) {\n\n            @if (item.separator) {\n\n                <li\n                    class=\"sui-menubar-separator\"\n                    role=\"separator\">\n                </li>\n\n            }\n            @else {\n\n                <li\n                    class=\"sui-menubar-item\"\n                    role=\"none\">\n\n                    <button\n                        type=\"button\"\n                        class=\"sui-menubar-button\"\n\n                        [class.sui-menubar-button-active]=\"\n                            isOpen(index)\n                        \"\n\n                        [disabled]=\"\n                            item.disabled ?? false\n                        \"\n\n                        role=\"menuitem\"\n\n                        [attr.aria-haspopup]=\"\n                            item.items?.length\n                                ? 'menu'\n                                : null\n                        \"\n\n                        [attr.aria-expanded]=\"\n                            item.items?.length\n                                ? isOpen(index)\n                                : null\n                        \"\n\n                        (click)=\"\n                            toggleItem(\n                                item,\n                                index\n                            )\n                        \">\n\n                        <span class=\"sui-menubar-label\">\n                            {{ item.label }}\n                        </span>\n\n                        @if (item.items?.length) {\n                            <span\n                                class=\"sui-menubar-chevron\"\n                                aria-hidden=\"true\">\n                                ▼\n                            </span>\n                        }\n\n                    </button>\n\n                    @if (\n                        item.items?.length &&\n                        isOpen(index)\n                    ) {\n\n                        <ul\n                            class=\"sui-menubar-submenu\"\n                            role=\"menu\">\n\n                            @for (\n                                child of item.items;\n                                track $index\n                            ) {\n\n                                @if (child.separator) {\n\n                                    <li\n                                        class=\"sui-menubar-submenu-separator\"\n                                        role=\"separator\">\n                                    </li>\n\n                                }\n                                @else {\n\n                                    <li role=\"none\">\n\n                                        <button\n                                            type=\"button\"\n                                            class=\"sui-menubar-submenu-item\"\n\n                                            [disabled]=\"\n                                                child.disabled ?? false\n                                            \"\n\n                                            role=\"menuitem\"\n\n                                            (click)=\"\n                                                selectChild(child)\n                                            \">\n\n                                            {{ child.label }}\n\n                                        </button>\n\n                                    </li>\n\n                                }\n\n                            }\n\n                        </ul>\n\n                    }\n\n                </li>\n\n            }\n\n        }\n\n    </ul>\n\n    <div class=\"sui-menubar-end\">\n        <ng-content select=\"[suiMenubarEnd]\" />\n    </div>\n\n</nav>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;MAoBa,UAAU,CAAA;AAUE,IAAA,UAAA;IARrB,KAAK,GAAG,KAAK,CAAgB,EAAE;8EAAC;IAEhC,QAAQ,GAAG,KAAK,CAAC,IAAI;iFAAC;IAEH,WAAW,GAC1B,MAAM,CAAgB,IAAI;oFAAC;AAE/B,IAAA,WAAA,CACqB,UACU,EAAA;QADV,IAAA,CAAA,UAAU,GAAV,UAAU;IAG/B;IAEU,UAAU,CAChB,IAAiB,EACjB,KAAa,EAAA;AAGb,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf;QACJ;AAEA,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE;YACpB,IAAI,CAAC,WAAW,CAAC,MAAM,CACnB,OAAO,IACH,OAAO,KAAK;AACR,kBAAE;kBACA,KAAK,CAClB;YAED;QACJ;AAEA,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QAEpB,IAAI,CAAC,KAAK,EAAE;IAChB;AAEU,IAAA,WAAW,CACjB,IAAiB,EAAA;AAGjB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf;QACJ;AAEA,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QAEpB,IAAI,CAAC,KAAK,EAAE;IAChB;AAEU,IAAA,MAAM,CACZ,KAAa,EAAA;AAEb,QAAA,OAAO,IAAI,CAAC,WAAW,EAAE,KAAK,KAAK;IACvC;IAEU,KAAK,GAAA;AACX,QAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC;IAC9B;AAMU,IAAA,mBAAmB,CACzB,KAAiB,EAAA;AAGjB,QAAA,MAAM,MAAM,GACR,KAAK,CAAC,MAAc;QAExB,IACI,CAAC,IAAI,CAAC;aACD;AACA,aAAA,QAAQ,CAAC,MAAM,CAAC,EACvB;YACE,IAAI,CAAC,KAAK,EAAE;QAChB;IACJ;IAKU,YAAY,GAAA;QAClB,IAAI,CAAC,KAAK,EAAE;IAChB;uGAxFS,UAAU,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,mcCpBvB,mpIAkJM,EAAA,MAAA,EAAA,CAAA,2tFAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FD9HO,UAAU,EAAA,UAAA,EAAA,CAAA;kBAPtB,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,UAAA,EACX,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,mpIAAA,EAAA,MAAA,EAAA,CAAA,2tFAAA,CAAA,EAAA;;sBAiE9C,YAAY;uBACT,gBAAgB;AAChB,oBAAA,CAAC,QAAQ,CAAC;;sBAkBb,YAAY;uBACT,yBAAyB;;;AExGjC;;AAEG;;;;"}

package/fesm2022/saitec-ui-message.mjs

@@ -0,0 +1,28 @@
+import * as i0 from '@angular/core';
+import { input, output, ChangeDetectionStrategy, Component } from '@angular/core';
+
+class SuiMessage {
+    severity = input('info', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []));
+    text = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
+    closable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closable" }] : /* istanbul ignore next */ []));
+    closed = output();
+    close() {
+        this.closed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiMessage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SuiMessage, isStandalone: true, selector: "sui-message", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "<div\n    class=\"sui-message\"\n    [class.sui-message-info]=\"severity() === 'info'\"\n    [class.sui-message-success]=\"severity() === 'success'\"\n    [class.sui-message-warning]=\"severity() === 'warning'\"\n    [class.sui-message-danger]=\"severity() === 'danger'\"\n    [class.sui-message-secondary]=\"severity() === 'secondary'\"\n    role=\"alert\">\n\n    <div class=\"sui-message-content\">\n\n        <span\n            class=\"sui-message-icon\"\n            aria-hidden=\"true\">\n\n            @switch (severity()) {\n\n                @case ('success') {\n                    \u2713\n                }\n\n                @case ('warning') {\n                    !\n                }\n\n                @case ('danger') {\n                    \u00D7\n                }\n\n                @case ('secondary') {\n                    \u2022\n                }\n\n                @default {\n                    i\n                }\n\n            }\n\n        </span>\n\n        <div class=\"sui-message-text\">\n\n            <ng-content />\n\n            @if (text()) {\n                {{ text() }}\n            }\n\n        </div>\n\n    </div>\n\n    @if (closable()) {\n        <button\n            type=\"button\"\n            class=\"sui-message-close\"\n            aria-label=\"Close message\"\n            (click)=\"close()\">\n            \u00D7\n        </button>\n    }\n\n</div>", styles: [":host{display:block}.sui-message{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sui-message-gap);width:100%;box-sizing:border-box;padding:var(--sui-message-padding-y) var(--sui-message-padding-x);font-family:inherit;font-size:var(--sui-control-font-size-sm);line-height:1.25rem;border:var(--sui-message-border-width) solid;border-radius:var(--sui-message-radius)}.sui-message-content{display:flex;align-items:flex-start;gap:.625rem;min-width:0}.sui-message-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem;font-size:.875rem;font-weight:700;border:1px solid currentColor;border-radius:50%}.sui-message-text{min-width:0}.sui-message-close{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.75rem;height:1.75rem;margin:-.25rem -.375rem -.25rem 0;padding:0;color:inherit;background:transparent;border:0;border-radius:.375rem;cursor:pointer;font-family:inherit;font-size:1.125rem;line-height:1}.sui-message-close:hover{background:var(--sui-color-surface-hover)}.sui-message-close:focus-visible{outline:var(--sui-focus-ring-width) solid currentColor;outline-offset:1px}.sui-message-info{color:var(--sui-message-info-text);background:var(--sui-message-info-background);border-color:var(--sui-message-info-border)}.sui-message-success{color:var(--sui-message-success-text);background:var(--sui-message-success-background);border-color:var(--sui-message-success-border)}.sui-message-warning{color:var(--sui-message-warning-text);background:var(--sui-message-warning-background);border-color:var(--sui-message-warning-border)}.sui-message-danger{color:var(--sui-message-danger-text);background:var(--sui-message-danger-background);border-color:var(--sui-message-danger-border)}.sui-message-secondary{color:var(--sui-message-secondary-text);background:var(--sui-message-secondary-background);border-color:var(--sui-message-secondary-border)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiMessage, decorators: [{
+            type: Component,
+            args: [{ selector: 'sui-message', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"sui-message\"\n    [class.sui-message-info]=\"severity() === 'info'\"\n    [class.sui-message-success]=\"severity() === 'success'\"\n    [class.sui-message-warning]=\"severity() === 'warning'\"\n    [class.sui-message-danger]=\"severity() === 'danger'\"\n    [class.sui-message-secondary]=\"severity() === 'secondary'\"\n    role=\"alert\">\n\n    <div class=\"sui-message-content\">\n\n        <span\n            class=\"sui-message-icon\"\n            aria-hidden=\"true\">\n\n            @switch (severity()) {\n\n                @case ('success') {\n                    \u2713\n                }\n\n                @case ('warning') {\n                    !\n                }\n\n                @case ('danger') {\n                    \u00D7\n                }\n\n                @case ('secondary') {\n                    \u2022\n                }\n\n                @default {\n                    i\n                }\n\n            }\n\n        </span>\n\n        <div class=\"sui-message-text\">\n\n            <ng-content />\n\n            @if (text()) {\n                {{ text() }}\n            }\n\n        </div>\n\n    </div>\n\n    @if (closable()) {\n        <button\n            type=\"button\"\n            class=\"sui-message-close\"\n            aria-label=\"Close message\"\n            (click)=\"close()\">\n            \u00D7\n        </button>\n    }\n\n</div>", styles: [":host{display:block}.sui-message{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sui-message-gap);width:100%;box-sizing:border-box;padding:var(--sui-message-padding-y) var(--sui-message-padding-x);font-family:inherit;font-size:var(--sui-control-font-size-sm);line-height:1.25rem;border:var(--sui-message-border-width) solid;border-radius:var(--sui-message-radius)}.sui-message-content{display:flex;align-items:flex-start;gap:.625rem;min-width:0}.sui-message-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem;font-size:.875rem;font-weight:700;border:1px solid currentColor;border-radius:50%}.sui-message-text{min-width:0}.sui-message-close{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.75rem;height:1.75rem;margin:-.25rem -.375rem -.25rem 0;padding:0;color:inherit;background:transparent;border:0;border-radius:.375rem;cursor:pointer;font-family:inherit;font-size:1.125rem;line-height:1}.sui-message-close:hover{background:var(--sui-color-surface-hover)}.sui-message-close:focus-visible{outline:var(--sui-focus-ring-width) solid currentColor;outline-offset:1px}.sui-message-info{color:var(--sui-message-info-text);background:var(--sui-message-info-background);border-color:var(--sui-message-info-border)}.sui-message-success{color:var(--sui-message-success-text);background:var(--sui-message-success-background);border-color:var(--sui-message-success-border)}.sui-message-warning{color:var(--sui-message-warning-text);background:var(--sui-message-warning-background);border-color:var(--sui-message-warning-border)}.sui-message-danger{color:var(--sui-message-danger-text);background:var(--sui-message-danger-background);border-color:var(--sui-message-danger-border)}.sui-message-secondary{color:var(--sui-message-secondary-text);background:var(--sui-message-secondary-background);border-color:var(--sui-message-secondary-border)}\n"] }]
+        }], propDecorators: { severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SuiMessage };
+//# sourceMappingURL=saitec-ui-message.mjs.map

package/fesm2022/saitec-ui-message.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"saitec-ui-message.mjs","sources":["../../../projects/ui/message/src/message.component.ts","../../../projects/ui/message/src/message.component.html","../../../projects/ui/message/src/saitec-ui-message.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    Component,\n    input,\n    output\n} from '@angular/core';\n\nexport type SuiMessageSeverity =\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'secondary';\n\n@Component({\n    selector: 'sui-message',\n    standalone: true,\n    templateUrl: './message.component.html',\n    styleUrl: './message.component.css',\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SuiMessage {\n\n    severity = input<SuiMessageSeverity>('info');\n\n    text = input<string>();\n\n    closable = input(false);\n\n    closed = output<void>();\n\n    protected close(): void {\n        this.closed.emit();\n    }\n}","<div\n    class=\"sui-message\"\n    [class.sui-message-info]=\"severity() === 'info'\"\n    [class.sui-message-success]=\"severity() === 'success'\"\n    [class.sui-message-warning]=\"severity() === 'warning'\"\n    [class.sui-message-danger]=\"severity() === 'danger'\"\n    [class.sui-message-secondary]=\"severity() === 'secondary'\"\n    role=\"alert\">\n\n    <div class=\"sui-message-content\">\n\n        <span\n            class=\"sui-message-icon\"\n            aria-hidden=\"true\">\n\n            @switch (severity()) {\n\n                @case ('success') {\n                    ✓\n                }\n\n                @case ('warning') {\n                    !\n                }\n\n                @case ('danger') {\n                    ×\n                }\n\n                @case ('secondary') {\n                    •\n                }\n\n                @default {\n                    i\n                }\n\n            }\n\n        </span>\n\n        <div class=\"sui-message-text\">\n\n            <ng-content />\n\n            @if (text()) {\n                {{ text() }}\n            }\n\n        </div>\n\n    </div>\n\n    @if (closable()) {\n        <button\n            type=\"button\"\n            class=\"sui-message-close\"\n            aria-label=\"Close message\"\n            (click)=\"close()\">\n            ×\n        </button>\n    }\n\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;MAqBa,UAAU,CAAA;IAEnB,QAAQ,GAAG,KAAK,CAAqB,MAAM;iFAAC;AAE5C,IAAA,IAAI,GAAG,KAAK;wFAAU;IAEtB,QAAQ,GAAG,KAAK,CAAC,KAAK;iFAAC;IAEvB,MAAM,GAAG,MAAM,EAAQ;IAEb,KAAK,GAAA;AACX,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;IACtB;uGAZS,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,yeCrBvB,+3CA+DM,EAAA,MAAA,EAAA,CAAA,q6DAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FD1CO,UAAU,EAAA,UAAA,EAAA,CAAA;kBAPtB,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,UAAA,EACX,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,+3CAAA,EAAA,MAAA,EAAA,CAAA,q6DAAA,CAAA,EAAA;;;AEnBnD;;AAEG;;;;"}

package/fesm2022/saitec-ui-multiselect.mjs

@@ -0,0 +1,209 @@
+import * as i0 from '@angular/core';
+import { input, output, signal, computed, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i1 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+
+let nextMultiSelectId = 0;
+class SuiMultiSelect {
+    id = input(`sui-multiselect-${++nextMultiSelectId}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    name = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    placeholder = input('Select', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    required = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    filter = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+    filterPlaceholder = input('Search', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : /* istanbul ignore next */ []));
+    showSelectAll = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showSelectAll" }] : /* istanbul ignore next */ []));
+    maxSelectedLabels = input(3, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxSelectedLabels" }] : /* istanbul ignore next */ []));
+    selectedItemsLabel = input('{0} items selected', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedItemsLabel" }] : /* istanbul ignore next */ []));
+    emptyMessage = input('No options available', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    emptyFilterMessage = input('No results found', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyFilterMessage" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaDescribedBy = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
+    ariaInvalid = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
+    compareWith = input((a, b) => Object.is(a, b), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    opened = output();
+    closed = output();
+    value = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    panelVisible = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelVisible" }] : /* istanbul ignore next */ []));
+    filterValue = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterValue" }] : /* istanbul ignore next */ []));
+    formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.formDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    filteredOptions = computed(() => {
+        const query = this.filterValue()
+            .trim()
+            .toLocaleLowerCase();
+        if (!query) {
+            return this.options();
+        }
+        return this.options().filter(option => option.label
+            .toLocaleLowerCase()
+            .includes(query));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+    enabledOptions = computed(() => this.options().filter(option => !option.disabled), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enabledOptions" }] : /* istanbul ignore next */ []));
+    allSelected = computed(() => {
+        const options = this.enabledOptions();
+        return (options.length > 0 &&
+            options.every(option => this.isSelected(option)));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []));
+    partiallySelected = computed(() => {
+        const options = this.enabledOptions();
+        if (options.length === 0) {
+            return false;
+        }
+        const count = options.filter(option => this.isSelected(option)).length;
+        return count > 0 && count < options.length;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "partiallySelected" }] : /* istanbul ignore next */ []));
+    displayLabel = computed(() => {
+        const values = this.value();
+        if (values.length === 0) {
+            return this.placeholder();
+        }
+        const selected = this.options().filter(option => this.containsValue(option.value));
+        if (selected.length <=
+            this.maxSelectedLabels()) {
+            return selected
+                .map(option => option.label)
+                .join(', ');
+        }
+        return this.selectedItemsLabel()
+            .replace('{0}', selected.length.toString());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayLabel" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.value.set(value ?? []);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.formDisabled.set(disabled);
+    }
+    togglePanel() {
+        if (this.isDisabled()) {
+            return;
+        }
+        const visible = !this.panelVisible();
+        this.panelVisible.set(visible);
+        if (visible) {
+            this.opened.emit();
+        }
+        else {
+            this.onTouched();
+            this.closed.emit();
+        }
+    }
+    closePanel() {
+        if (!this.panelVisible()) {
+            return;
+        }
+        this.panelVisible.set(false);
+        this.onTouched();
+        this.closed.emit();
+    }
+    toggleOption(option) {
+        if (option.disabled) {
+            return;
+        }
+        const values = [...this.value()];
+        const index = values.findIndex(value => this.compareWith()(value, option.value));
+        if (index >= 0) {
+            values.splice(index, 1);
+        }
+        else {
+            values.push(option.value);
+        }
+        this.updateValue(values);
+    }
+    toggleAll() {
+        const enabled = this.enabledOptions();
+        if (this.allSelected()) {
+            const values = this.value().filter(value => !enabled.some(option => this.compareWith()(value, option.value)));
+            this.updateValue(values);
+        }
+        else {
+            const values = [...this.value()];
+            for (const option of enabled) {
+                if (!values.some(value => this.compareWith()(value, option.value))) {
+                    values.push(option.value);
+                }
+            }
+            this.updateValue(values);
+        }
+    }
+    isSelected(option) {
+        return this.containsValue(option.value);
+    }
+    handleFilter(event) {
+        const element = event.target;
+        this.filterValue.set(element.value);
+    }
+    containsValue(value) {
+        return this.value().some(selected => this.compareWith()(selected, value));
+    }
+    updateValue(value) {
+        this.value.set(value);
+        this.onChange(value);
+        this.valueChange.emit(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiMultiSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SuiMultiSelect, isStandalone: true, selector: "sui-multiselect", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedLabels: { classPropertyName: "maxSelectedLabels", publicName: "maxSelectedLabels", isSignal: true, isRequired: false, transformFunction: null }, selectedItemsLabel: { classPropertyName: "selectedItemsLabel", publicName: "selectedItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyFilterMessage: { classPropertyName: "emptyFilterMessage", publicName: "emptyFilterMessage", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "ariaInvalid", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", opened: "opened", closed: "closed" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SuiMultiSelect),
+                multi: true
+            }
+        ], ngImport: i0, template: "<div\n    class=\"sui-multiselect\"\n    cdkOverlayOrigin\n    #origin=\"cdkOverlayOrigin\">\n\n    <button\n        type=\"button\"\n        class=\"sui-multiselect-trigger\"\n\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n\n        [attr.aria-label]=\"ariaLabel() ?? null\"\n        [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n        [attr.aria-invalid]=\"ariaInvalid() ?? null\"\n\n        aria-haspopup=\"listbox\"\n        [attr.aria-expanded]=\"panelVisible()\"\n\n        (click)=\"togglePanel()\">\n\n        <span\n            class=\"sui-multiselect-label\"\n            [class.sui-multiselect-placeholder]=\"value().length === 0\">\n\n            {{ displayLabel() }}\n\n        </span>\n\n        <span\n            class=\"sui-multiselect-chevron\"\n            aria-hidden=\"true\">\n            \u25BC\n        </span>\n\n    </button>\n\n</div>\n\n<ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"origin\"\n    [cdkConnectedOverlayOpen]=\"panelVisible()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n    [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n    [cdkConnectedOverlayPush]=\"true\"\n    (backdropClick)=\"closePanel()\"\n    (detach)=\"closePanel()\">\n\n    <div\n        class=\"sui-multiselect-panel\"\n        role=\"listbox\"\n        aria-multiselectable=\"true\">\n\n        @if (filter()) {\n            <div class=\"sui-multiselect-filter\">\n                <input\n                    type=\"text\"\n                    class=\"sui-multiselect-filter-input\"\n                    [placeholder]=\"filterPlaceholder()\"\n                    [value]=\"filterValue()\"\n                    (input)=\"handleFilter($event)\"\n                />\n            </div>\n        }\n\n        @if (showSelectAll() && options().length > 0) {\n            <label class=\"sui-multiselect-select-all\">\n\n                <input\n                    type=\"checkbox\"\n                    [checked]=\"allSelected()\"\n                    [indeterminate]=\"partiallySelected()\"\n                    (change)=\"toggleAll()\"\n                />\n\n                <span>Select all</span>\n\n            </label>\n        }\n\n        <div class=\"sui-multiselect-options\">\n\n            @for (\n                option of filteredOptions();\n                track $index\n            ) {\n                <label\n                    class=\"sui-multiselect-option\"\n                    [class.sui-multiselect-option-disabled]=\"option.disabled\">\n\n                    <input\n                        type=\"checkbox\"\n                        [checked]=\"isSelected(option)\"\n                        [disabled]=\"option.disabled ?? false\"\n                        (change)=\"toggleOption(option)\"\n                    />\n\n                    <span>\n                        {{ option.label }}\n                    </span>\n\n                </label>\n            }\n\n            @if (\n                filterValue() &&\n                filteredOptions().length === 0\n            ) {\n                <div class=\"sui-multiselect-empty\">\n                    {{ emptyFilterMessage() }}\n                </div>\n            }\n            @else if (\n                !filterValue() &&\n                options().length === 0\n            ) {\n                <div class=\"sui-multiselect-empty\">\n                    {{ emptyMessage() }}\n                </div>\n            }\n\n        </div>\n\n    </div>\n\n</ng-template>", styles: [":host{display:block;width:100%}.sui-multiselect{display:block;width:100%}.sui-multiselect-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:var(--sui-multiselect-height);box-sizing:border-box;padding:var(--sui-space-2) var(--sui-multiselect-padding-x);color:var(--sui-multiselect-text);background:var(--sui-multiselect-background);border:1px solid var(--sui-multiselect-border);border-radius:var(--sui-multiselect-radius);cursor:pointer;font-family:inherit;font-size:var(--sui-control-font-size-md);text-align:left;outline:none;transition:border-color var(--sui-duration-normal) var(--sui-easing-standard),box-shadow var(--sui-duration-normal) var(--sui-easing-standard)}.sui-multiselect-trigger:hover:not(:disabled){border-color:var(--sui-multiselect-border-hover)}.sui-multiselect-trigger:focus-visible{border-color:var(--sui-multiselect-border-focus);box-shadow:0 0 0 2px var(--sui-multiselect-focus-color)}.sui-multiselect-trigger:disabled{cursor:not-allowed;color:var(--sui-color-content-disabled);background:var(--sui-color-surface-alt)}.sui-multiselect-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sui-multiselect-placeholder{color:var(--sui-multiselect-placeholder)}.sui-multiselect-chevron{margin-left:.75rem;font-size:.625rem;color:var(--sui-color-content-muted)}.sui-multiselect-panel{min-width:14rem;max-height:20rem;display:flex;flex-direction:column;box-sizing:border-box;background:var(--sui-multiselect-panel-background);border:1px solid var(--sui-multiselect-panel-border);border-radius:var(--sui-multiselect-panel-radius);box-shadow:var(--sui-multiselect-panel-shadow);overflow:hidden}.sui-multiselect-filter{padding:.5rem;border-bottom:1px solid var(--sui-multiselect-panel-border)}.sui-multiselect-filter-input{width:100%;box-sizing:border-box;padding:.5rem .625rem;font-family:inherit;font-size:.875rem;border:1px solid var(--sui-color-border);border-radius:.375rem;outline:none}.sui-multiselect-filter-input:focus{border-color:var(--sui-multiselect-border-focus)}.sui-multiselect-select-all{display:flex;align-items:center;gap:.5rem;padding:.625rem .75rem;font-family:inherit;font-size:.875rem;cursor:pointer;border-bottom:1px solid var(--sui-multiselect-panel-border)}.sui-multiselect-options{overflow-y:auto;padding:.25rem}.sui-multiselect-option{display:flex;align-items:center;gap:.5rem;padding:.5rem .625rem;border-radius:.25rem;font-family:inherit;font-size:.875rem;cursor:pointer;-webkit-user-select:none;user-select:none}.sui-multiselect-option:hover{background:var(--sui-multiselect-option-background-hover)}.sui-multiselect-option-disabled{cursor:not-allowed;opacity:.5}.sui-multiselect-empty{padding:.75rem;color:var(--sui-multiselect-empty-text);font-family:inherit;font-size:.875rem;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiMultiSelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'sui-multiselect', standalone: true, imports: [
+                        OverlayModule
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SuiMultiSelect),
+                            multi: true
+                        }
+                    ], template: "<div\n    class=\"sui-multiselect\"\n    cdkOverlayOrigin\n    #origin=\"cdkOverlayOrigin\">\n\n    <button\n        type=\"button\"\n        class=\"sui-multiselect-trigger\"\n\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n\n        [attr.aria-label]=\"ariaLabel() ?? null\"\n        [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n        [attr.aria-invalid]=\"ariaInvalid() ?? null\"\n\n        aria-haspopup=\"listbox\"\n        [attr.aria-expanded]=\"panelVisible()\"\n\n        (click)=\"togglePanel()\">\n\n        <span\n            class=\"sui-multiselect-label\"\n            [class.sui-multiselect-placeholder]=\"value().length === 0\">\n\n            {{ displayLabel() }}\n\n        </span>\n\n        <span\n            class=\"sui-multiselect-chevron\"\n            aria-hidden=\"true\">\n            \u25BC\n        </span>\n\n    </button>\n\n</div>\n\n<ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"origin\"\n    [cdkConnectedOverlayOpen]=\"panelVisible()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n    [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n    [cdkConnectedOverlayPush]=\"true\"\n    (backdropClick)=\"closePanel()\"\n    (detach)=\"closePanel()\">\n\n    <div\n        class=\"sui-multiselect-panel\"\n        role=\"listbox\"\n        aria-multiselectable=\"true\">\n\n        @if (filter()) {\n            <div class=\"sui-multiselect-filter\">\n                <input\n                    type=\"text\"\n                    class=\"sui-multiselect-filter-input\"\n                    [placeholder]=\"filterPlaceholder()\"\n                    [value]=\"filterValue()\"\n                    (input)=\"handleFilter($event)\"\n                />\n            </div>\n        }\n\n        @if (showSelectAll() && options().length > 0) {\n            <label class=\"sui-multiselect-select-all\">\n\n                <input\n                    type=\"checkbox\"\n                    [checked]=\"allSelected()\"\n                    [indeterminate]=\"partiallySelected()\"\n                    (change)=\"toggleAll()\"\n                />\n\n                <span>Select all</span>\n\n            </label>\n        }\n\n        <div class=\"sui-multiselect-options\">\n\n            @for (\n                option of filteredOptions();\n                track $index\n            ) {\n                <label\n                    class=\"sui-multiselect-option\"\n                    [class.sui-multiselect-option-disabled]=\"option.disabled\">\n\n                    <input\n                        type=\"checkbox\"\n                        [checked]=\"isSelected(option)\"\n                        [disabled]=\"option.disabled ?? false\"\n                        (change)=\"toggleOption(option)\"\n                    />\n\n                    <span>\n                        {{ option.label }}\n                    </span>\n\n                </label>\n            }\n\n            @if (\n                filterValue() &&\n                filteredOptions().length === 0\n            ) {\n                <div class=\"sui-multiselect-empty\">\n                    {{ emptyFilterMessage() }}\n                </div>\n            }\n            @else if (\n                !filterValue() &&\n                options().length === 0\n            ) {\n                <div class=\"sui-multiselect-empty\">\n                    {{ emptyMessage() }}\n                </div>\n            }\n\n        </div>\n\n    </div>\n\n</ng-template>", styles: [":host{display:block;width:100%}.sui-multiselect{display:block;width:100%}.sui-multiselect-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:var(--sui-multiselect-height);box-sizing:border-box;padding:var(--sui-space-2) var(--sui-multiselect-padding-x);color:var(--sui-multiselect-text);background:var(--sui-multiselect-background);border:1px solid var(--sui-multiselect-border);border-radius:var(--sui-multiselect-radius);cursor:pointer;font-family:inherit;font-size:var(--sui-control-font-size-md);text-align:left;outline:none;transition:border-color var(--sui-duration-normal) var(--sui-easing-standard),box-shadow var(--sui-duration-normal) var(--sui-easing-standard)}.sui-multiselect-trigger:hover:not(:disabled){border-color:var(--sui-multiselect-border-hover)}.sui-multiselect-trigger:focus-visible{border-color:var(--sui-multiselect-border-focus);box-shadow:0 0 0 2px var(--sui-multiselect-focus-color)}.sui-multiselect-trigger:disabled{cursor:not-allowed;color:var(--sui-color-content-disabled);background:var(--sui-color-surface-alt)}.sui-multiselect-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sui-multiselect-placeholder{color:var(--sui-multiselect-placeholder)}.sui-multiselect-chevron{margin-left:.75rem;font-size:.625rem;color:var(--sui-color-content-muted)}.sui-multiselect-panel{min-width:14rem;max-height:20rem;display:flex;flex-direction:column;box-sizing:border-box;background:var(--sui-multiselect-panel-background);border:1px solid var(--sui-multiselect-panel-border);border-radius:var(--sui-multiselect-panel-radius);box-shadow:var(--sui-multiselect-panel-shadow);overflow:hidden}.sui-multiselect-filter{padding:.5rem;border-bottom:1px solid var(--sui-multiselect-panel-border)}.sui-multiselect-filter-input{width:100%;box-sizing:border-box;padding:.5rem .625rem;font-family:inherit;font-size:.875rem;border:1px solid var(--sui-color-border);border-radius:.375rem;outline:none}.sui-multiselect-filter-input:focus{border-color:var(--sui-multiselect-border-focus)}.sui-multiselect-select-all{display:flex;align-items:center;gap:.5rem;padding:.625rem .75rem;font-family:inherit;font-size:.875rem;cursor:pointer;border-bottom:1px solid var(--sui-multiselect-panel-border)}.sui-multiselect-options{overflow-y:auto;padding:.25rem}.sui-multiselect-option{display:flex;align-items:center;gap:.5rem;padding:.5rem .625rem;border-radius:.25rem;font-family:inherit;font-size:.875rem;cursor:pointer;-webkit-user-select:none;user-select:none}.sui-multiselect-option:hover{background:var(--sui-multiselect-option-background-hover)}.sui-multiselect-option-disabled{cursor:not-allowed;opacity:.5}.sui-multiselect-empty{padding:.75rem;color:var(--sui-multiselect-empty-text);font-family:inherit;font-size:.875rem;text-align:center}\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], showSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectAll", required: false }] }], maxSelectedLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelectedLabels", required: false }] }], selectedItemsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemsLabel", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], emptyFilterMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyFilterMessage", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], ariaInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaInvalid", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SuiMultiSelect };
+//# sourceMappingURL=saitec-ui-multiselect.mjs.map

package/fesm2022/saitec-ui-multiselect.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"saitec-ui-multiselect.mjs","sources":["../../../projects/ui/multiselect/src/multiselect.component.ts","../../../projects/ui/multiselect/src/multiselect.component.html","../../../projects/ui/multiselect/src/saitec-ui-multiselect.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    forwardRef,\n    input,\n    output,\n    signal\n} from '@angular/core';\n\nimport {\n    ControlValueAccessor,\n    NG_VALUE_ACCESSOR\n} from '@angular/forms';\n\nimport {\n    OverlayModule\n} from '@angular/cdk/overlay';\n\nimport {\n    SuiOption\n} from '@saitec/ui/core';\n\nlet nextMultiSelectId = 0;\n\n@Component({\n    selector: 'sui-multiselect',\n    standalone: true,\n    imports: [\n        OverlayModule\n    ],\n    templateUrl: './multiselect.component.html',\n    styleUrl: './multiselect.component.css',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef(() => SuiMultiSelect),\n            multi: true\n        }\n    ]\n})\nexport class SuiMultiSelect implements ControlValueAccessor {\n\n    id = input(`sui-multiselect-${++nextMultiSelectId}`);\n\n    name = input<string>();\n\n    options = input<SuiOption[]>([]);\n\n    placeholder = input('Select');\n\n    disabled = input(false);\n\n    required = input(false);\n\n    filter = input(false);\n\n    filterPlaceholder = input('Search');\n\n    showSelectAll = input(true);\n\n    maxSelectedLabels = input(3);\n\n    selectedItemsLabel = input('{0} items selected');\n\n    emptyMessage = input('No options available');\n\n    emptyFilterMessage = input('No results found');\n\n    ariaLabel = input<string>();\n\n    ariaDescribedBy = input<string>();\n\n    ariaInvalid = input<boolean>();\n\n    compareWith = input<(a: unknown, b: unknown) => boolean>(\n        (a, b) => Object.is(a, b)\n    );\n\n    valueChange = output<unknown[]>();\n\n    opened = output<void>();\n\n    closed = output<void>();\n\n    protected readonly value = signal<unknown[]>([]);\n\n    protected readonly panelVisible = signal(false);\n\n    protected readonly filterValue = signal('');\n\n    private readonly formDisabled = signal(false);\n\n    protected readonly isDisabled = computed(\n        () => this.disabled() || this.formDisabled()\n    );\n\n    protected readonly filteredOptions = computed(() => {\n        const query =\n            this.filterValue()\n                .trim()\n                .toLocaleLowerCase();\n\n        if (!query) {\n            return this.options();\n        }\n\n        return this.options().filter(option =>\n            option.label\n                .toLocaleLowerCase()\n                .includes(query)\n        );\n    });\n\n    protected readonly enabledOptions = computed(\n        () =>\n            this.options().filter(\n                option => !option.disabled\n            )\n    );\n\n    protected readonly allSelected = computed(() => {\n        const options = this.enabledOptions();\n\n        return (\n            options.length > 0 &&\n            options.every(option =>\n                this.isSelected(option)\n            )\n        );\n    });\n\n    protected readonly partiallySelected = computed(() => {\n        const options = this.enabledOptions();\n\n        if (options.length === 0) {\n            return false;\n        }\n\n        const count =\n            options.filter(option =>\n                this.isSelected(option)\n            ).length;\n\n        return count > 0 && count < options.length;\n    });\n\n    protected readonly displayLabel = computed(() => {\n        const values = this.value();\n\n        if (values.length === 0) {\n            return this.placeholder();\n        }\n\n        const selected =\n            this.options().filter(option =>\n                this.containsValue(option.value)\n            );\n\n        if (\n            selected.length <=\n            this.maxSelectedLabels()\n        ) {\n            return selected\n                .map(option => option.label)\n                .join(', ');\n        }\n\n        return this.selectedItemsLabel()\n            .replace(\n                '{0}',\n                selected.length.toString()\n            );\n    });\n\n    private onChange: (value: unknown[]) => void = () => {};\n\n    private onTouched: () => void = () => {};\n\n    writeValue(\n        value: unknown[] | null | undefined\n    ): void {\n        this.value.set(value ?? []);\n    }\n\n    registerOnChange(\n        fn: (value: unknown[]) => void\n    ): void {\n        this.onChange = fn;\n    }\n\n    registerOnTouched(\n        fn: () => void\n    ): void {\n        this.onTouched = fn;\n    }\n\n    setDisabledState(\n        disabled: boolean\n    ): void {\n        this.formDisabled.set(disabled);\n    }\n\n    protected togglePanel(): void {\n        if (this.isDisabled()) {\n            return;\n        }\n\n        const visible =\n            !this.panelVisible();\n\n        this.panelVisible.set(visible);\n\n        if (visible) {\n            this.opened.emit();\n        }\n        else {\n            this.onTouched();\n            this.closed.emit();\n        }\n    }\n\n    protected closePanel(): void {\n        if (!this.panelVisible()) {\n            return;\n        }\n\n        this.panelVisible.set(false);\n\n        this.onTouched();\n        this.closed.emit();\n    }\n\n    protected toggleOption(\n        option: SuiOption\n    ): void {\n\n        if (option.disabled) {\n            return;\n        }\n\n        const values = [...this.value()];\n\n        const index =\n            values.findIndex(value =>\n                this.compareWith()(\n                    value,\n                    option.value\n                )\n            );\n\n        if (index >= 0) {\n            values.splice(index, 1);\n        }\n        else {\n            values.push(option.value);\n        }\n\n        this.updateValue(values);\n    }\n\n    protected toggleAll(): void {\n        const enabled =\n            this.enabledOptions();\n\n        if (this.allSelected()) {\n\n            const values =\n                this.value().filter(\n                    value =>\n                        !enabled.some(option =>\n                            this.compareWith()(\n                                value,\n                                option.value\n                            )\n                        )\n                );\n\n            this.updateValue(values);\n        }\n        else {\n\n            const values =\n                [...this.value()];\n\n            for (const option of enabled) {\n                if (\n                    !values.some(value =>\n                        this.compareWith()(\n                            value,\n                            option.value\n                        )\n                    )\n                ) {\n                    values.push(option.value);\n                }\n            }\n\n            this.updateValue(values);\n        }\n    }\n\n    protected isSelected(\n        option: SuiOption\n    ): boolean {\n        return this.containsValue(option.value);\n    }\n\n    protected handleFilter(\n        event: Event\n    ): void {\n\n        const element =\n            event.target as HTMLInputElement;\n\n        this.filterValue.set(\n            element.value\n        );\n    }\n\n    private containsValue(\n        value: unknown\n    ): boolean {\n        return this.value().some(\n            selected =>\n                this.compareWith()(\n                    selected,\n                    value\n                )\n        );\n    }\n\n    private updateValue(\n        value: unknown[]\n    ): void {\n\n        this.value.set(value);\n\n        this.onChange(value);\n\n        this.valueChange.emit(value);\n    }\n}","<div\n    class=\"sui-multiselect\"\n    cdkOverlayOrigin\n    #origin=\"cdkOverlayOrigin\">\n\n    <button\n        type=\"button\"\n        class=\"sui-multiselect-trigger\"\n\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n\n        [attr.aria-label]=\"ariaLabel() ?? null\"\n        [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n        [attr.aria-invalid]=\"ariaInvalid() ?? null\"\n\n        aria-haspopup=\"listbox\"\n        [attr.aria-expanded]=\"panelVisible()\"\n\n        (click)=\"togglePanel()\">\n\n        <span\n            class=\"sui-multiselect-label\"\n            [class.sui-multiselect-placeholder]=\"value().length === 0\">\n\n            {{ displayLabel() }}\n\n        </span>\n\n        <span\n            class=\"sui-multiselect-chevron\"\n            aria-hidden=\"true\">\n            ▼\n        </span>\n\n    </button>\n\n</div>\n\n<ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"origin\"\n    [cdkConnectedOverlayOpen]=\"panelVisible()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n    [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n    [cdkConnectedOverlayPush]=\"true\"\n    (backdropClick)=\"closePanel()\"\n    (detach)=\"closePanel()\">\n\n    <div\n        class=\"sui-multiselect-panel\"\n        role=\"listbox\"\n        aria-multiselectable=\"true\">\n\n        @if (filter()) {\n            <div class=\"sui-multiselect-filter\">\n                <input\n                    type=\"text\"\n                    class=\"sui-multiselect-filter-input\"\n                    [placeholder]=\"filterPlaceholder()\"\n                    [value]=\"filterValue()\"\n                    (input)=\"handleFilter($event)\"\n                />\n            </div>\n        }\n\n        @if (showSelectAll() && options().length > 0) {\n            <label class=\"sui-multiselect-select-all\">\n\n                <input\n                    type=\"checkbox\"\n                    [checked]=\"allSelected()\"\n                    [indeterminate]=\"partiallySelected()\"\n                    (change)=\"toggleAll()\"\n                />\n\n                <span>Select all</span>\n\n            </label>\n        }\n\n        <div class=\"sui-multiselect-options\">\n\n            @for (\n                option of filteredOptions();\n                track $index\n            ) {\n                <label\n                    class=\"sui-multiselect-option\"\n                    [class.sui-multiselect-option-disabled]=\"option.disabled\">\n\n                    <input\n                        type=\"checkbox\"\n                        [checked]=\"isSelected(option)\"\n                        [disabled]=\"option.disabled ?? false\"\n                        (change)=\"toggleOption(option)\"\n                    />\n\n                    <span>\n                        {{ option.label }}\n                    </span>\n\n                </label>\n            }\n\n            @if (\n                filterValue() &&\n                filteredOptions().length === 0\n            ) {\n                <div class=\"sui-multiselect-empty\">\n                    {{ emptyFilterMessage() }}\n                </div>\n            }\n            @else if (\n                !filterValue() &&\n                options().length === 0\n            ) {\n                <div class=\"sui-multiselect-empty\">\n                    {{ emptyMessage() }}\n                </div>\n            }\n\n        </div>\n\n    </div>\n\n</ng-template>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/saitec-ui-panel.mjs

@@ -0,0 +1,32 @@
+import * as i0 from '@angular/core';
+import { input, model, ChangeDetectionStrategy, Component } from '@angular/core';
+
+class SuiPanel {
+    header = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "header" }] : /* istanbul ignore next */ []));
+    toggleable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toggleable" }] : /* istanbul ignore next */ []));
+    collapsed = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    bordered = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
+    toggle() {
+        if (!this.toggleable()) {
+            return;
+        }
+        this.collapsed.update(value => !value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SuiPanel, isStandalone: true, selector: "sui-panel", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, ngImport: i0, template: "<section\n    class=\"sui-panel\"\n    [class.sui-panel-bordered]=\"bordered()\">\n\n    <header class=\"sui-panel-header\">\n\n        <div class=\"sui-panel-header-content\">\n\n            <ng-content select=\"[suiPanelHeader]\" />\n\n            @if (header()) {\n                <span class=\"sui-panel-title\">\n                    {{ header() }}\n                </span>\n            }\n\n        </div>\n\n        @if (toggleable()) {\n            <button\n                type=\"button\"\n                class=\"sui-panel-toggle\"\n                [attr.aria-expanded]=\"!collapsed()\"\n                (click)=\"toggle()\">\n\n                <span\n                    class=\"sui-panel-toggle-icon\"\n                    [class.sui-panel-toggle-icon-collapsed]=\"collapsed()\">\n                    \u25BC\n                </span>\n\n            </button>\n        }\n\n    </header>\n\n    @if (!collapsed()) {\n        <div class=\"sui-panel-content\">\n            <ng-content />\n        </div>\n\n        <footer class=\"sui-panel-footer\">\n            <ng-content select=\"[suiPanelFooter]\" />\n        </footer>\n    }\n\n</section>", styles: [":host{display:block}.sui-panel{color:var(--sui-panel-text);background:var(--sui-panel-background);border-radius:var(--sui-panel-radius);overflow:hidden}.sui-panel-bordered{border:1px solid var(--sui-panel-border)}.sui-panel-header{display:flex;align-items:center;justify-content:space-between;min-height:3rem;padding:.75rem 1rem;background:var(--sui-panel-header-background);border-bottom:1px solid var(--sui-panel-header-border)}.sui-panel-header-content{display:flex;align-items:center;gap:.5rem;min-width:0}.sui-panel-title{font-family:inherit;font-size:var(--sui-control-font-size-lg);font-weight:var(--sui-panel-header-font-weight);color:var(--sui-panel-header-text)}.sui-panel-toggle{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;color:var(--sui-color-content-muted);background:transparent;border:0;border-radius:.375rem;cursor:pointer}.sui-panel-toggle:hover{color:var(--sui-color-content);background:var(--sui-color-surface-hover)}.sui-panel-toggle:focus-visible{outline:var(--sui-focus-ring-width) solid var(--sui-color-focus);outline-offset:var(--sui-focus-ring-offset)}.sui-panel-toggle-icon{display:block;font-size:.75rem;transition:transform var(--sui-duration-normal) var(--sui-easing-standard)}.sui-panel-toggle-icon-collapsed{transform:rotate(-90deg)}.sui-panel-content{padding:var(--sui-panel-content-padding)}.sui-panel-footer:empty{display:none}.sui-panel-footer:not(:empty){padding:.75rem 1rem;background:var(--sui-panel-content-background);border-top:1px solid var(--sui-panel-footer-border)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiPanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'sui-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n    class=\"sui-panel\"\n    [class.sui-panel-bordered]=\"bordered()\">\n\n    <header class=\"sui-panel-header\">\n\n        <div class=\"sui-panel-header-content\">\n\n            <ng-content select=\"[suiPanelHeader]\" />\n\n            @if (header()) {\n                <span class=\"sui-panel-title\">\n                    {{ header() }}\n                </span>\n            }\n\n        </div>\n\n        @if (toggleable()) {\n            <button\n                type=\"button\"\n                class=\"sui-panel-toggle\"\n                [attr.aria-expanded]=\"!collapsed()\"\n                (click)=\"toggle()\">\n\n                <span\n                    class=\"sui-panel-toggle-icon\"\n                    [class.sui-panel-toggle-icon-collapsed]=\"collapsed()\">\n                    \u25BC\n                </span>\n\n            </button>\n        }\n\n    </header>\n\n    @if (!collapsed()) {\n        <div class=\"sui-panel-content\">\n            <ng-content />\n        </div>\n\n        <footer class=\"sui-panel-footer\">\n            <ng-content select=\"[suiPanelFooter]\" />\n        </footer>\n    }\n\n</section>", styles: [":host{display:block}.sui-panel{color:var(--sui-panel-text);background:var(--sui-panel-background);border-radius:var(--sui-panel-radius);overflow:hidden}.sui-panel-bordered{border:1px solid var(--sui-panel-border)}.sui-panel-header{display:flex;align-items:center;justify-content:space-between;min-height:3rem;padding:.75rem 1rem;background:var(--sui-panel-header-background);border-bottom:1px solid var(--sui-panel-header-border)}.sui-panel-header-content{display:flex;align-items:center;gap:.5rem;min-width:0}.sui-panel-title{font-family:inherit;font-size:var(--sui-control-font-size-lg);font-weight:var(--sui-panel-header-font-weight);color:var(--sui-panel-header-text)}.sui-panel-toggle{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;color:var(--sui-color-content-muted);background:transparent;border:0;border-radius:.375rem;cursor:pointer}.sui-panel-toggle:hover{color:var(--sui-color-content);background:var(--sui-color-surface-hover)}.sui-panel-toggle:focus-visible{outline:var(--sui-focus-ring-width) solid var(--sui-color-focus);outline-offset:var(--sui-focus-ring-offset)}.sui-panel-toggle-icon{display:block;font-size:.75rem;transition:transform var(--sui-duration-normal) var(--sui-easing-standard)}.sui-panel-toggle-icon-collapsed{transform:rotate(-90deg)}.sui-panel-content{padding:var(--sui-panel-content-padding)}.sui-panel-footer:empty{display:none}.sui-panel-footer:not(:empty){padding:.75rem 1rem;background:var(--sui-panel-content-background);border-top:1px solid var(--sui-panel-footer-border)}\n"] }]
+        }], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], toggleable: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleable", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SuiPanel };
+//# sourceMappingURL=saitec-ui-panel.mjs.map

package/fesm2022/saitec-ui-panel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"saitec-ui-panel.mjs","sources":["../../../projects/ui/panel/src/panel.component.ts","../../../projects/ui/panel/src/panel.component.html","../../../projects/ui/panel/src/saitec-ui-panel.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    Component,\n    input,\n    model\n} from '@angular/core';\n\n@Component({\n    selector: 'sui-panel',\n    standalone: true,\n    templateUrl: './panel.component.html',\n    styleUrl: './panel.component.css',\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SuiPanel {\n\n    header = input<string>();\n\n    toggleable = input(false);\n\n    collapsed = model(false);\n\n    bordered = input(true);\n\n    protected toggle(): void {\n        if (!this.toggleable()) {\n            return;\n        }\n\n        this.collapsed.update(value => !value);\n    }\n}","<section\n    class=\"sui-panel\"\n    [class.sui-panel-bordered]=\"bordered()\">\n\n    <header class=\"sui-panel-header\">\n\n        <div class=\"sui-panel-header-content\">\n\n            <ng-content select=\"[suiPanelHeader]\" />\n\n            @if (header()) {\n                <span class=\"sui-panel-title\">\n                    {{ header() }}\n                </span>\n            }\n\n        </div>\n\n        @if (toggleable()) {\n            <button\n                type=\"button\"\n                class=\"sui-panel-toggle\"\n                [attr.aria-expanded]=\"!collapsed()\"\n                (click)=\"toggle()\">\n\n                <span\n                    class=\"sui-panel-toggle-icon\"\n                    [class.sui-panel-toggle-icon-collapsed]=\"collapsed()\">\n                    ▼\n                </span>\n\n            </button>\n        }\n\n    </header>\n\n    @if (!collapsed()) {\n        <div class=\"sui-panel-content\">\n            <ng-content />\n        </div>\n\n        <footer class=\"sui-panel-footer\">\n            <ng-content select=\"[suiPanelFooter]\" />\n        </footer>\n    }\n\n</section>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;MAca,QAAQ,CAAA;AAEjB,IAAA,MAAM,GAAG,KAAK;0FAAU;IAExB,UAAU,GAAG,KAAK,CAAC,KAAK;mFAAC;IAEzB,SAAS,GAAG,KAAK,CAAC,KAAK;kFAAC;IAExB,QAAQ,GAAG,KAAK,CAAC,IAAI;iFAAC;IAEZ,MAAM,GAAA;AACZ,QAAA,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE;YACpB;QACJ;AAEA,QAAA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC;IAC1C;uGAhBS,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAR,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,QAAQ,moBCdrB,ooCA8CU,EAAA,MAAA,EAAA,CAAA,8hDAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDhCG,QAAQ,EAAA,UAAA,EAAA,CAAA;kBAPpB,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,EAAA,UAAA,EACT,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,ooCAAA,EAAA,MAAA,EAAA,CAAA,8hDAAA,CAAA,EAAA;;;AEZnD;;AAEG;;;;"}

package/fesm2022/saitec-ui-progress-spinner.mjs

@@ -0,0 +1,24 @@
+import * as i0 from '@angular/core';
+import { input, ChangeDetectionStrategy, Component } from '@angular/core';
+
+class SuiProgressSpinner {
+    size = input('medium', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    strokeWidth = input(4, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Loading', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiProgressSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: SuiProgressSpinner, isStandalone: true, selector: "sui-progress-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span\n    class=\"sui-progress-spinner\"\n    [class.sui-progress-spinner-small]=\"size() === 'small'\"\n    [class.sui-progress-spinner-medium]=\"size() === 'medium'\"\n    [class.sui-progress-spinner-large]=\"size() === 'large'\"\n    role=\"status\"\n    [attr.aria-label]=\"ariaLabel()\">\n\n    <svg\n        class=\"sui-progress-spinner-svg\"\n        viewBox=\"0 0 50 50\"\n        aria-hidden=\"true\">\n\n        <circle\n            class=\"sui-progress-spinner-track\"\n            cx=\"25\"\n            cy=\"25\"\n            r=\"20\"\n            fill=\"none\"\n            [attr.stroke-width]=\"strokeWidth()\">\n        </circle>\n\n        <circle\n            class=\"sui-progress-spinner-circle\"\n            cx=\"25\"\n            cy=\"25\"\n            r=\"20\"\n            fill=\"none\"\n            [attr.stroke-width]=\"strokeWidth()\"\n            stroke-linecap=\"round\">\n        </circle>\n\n    </svg>\n\n</span>", styles: [":host{display:inline-flex}.sui-progress-spinner{display:inline-flex;align-items:center;justify-content:center}.sui-progress-spinner-small{width:var(--sui-progress-spinner-size-sm);height:var(--sui-progress-spinner-size-sm)}.sui-progress-spinner-medium{width:var(--sui-progress-spinner-size-md);height:var(--sui-progress-spinner-size-md)}.sui-progress-spinner-large{width:var(--sui-progress-spinner-size-lg);height:var(--sui-progress-spinner-size-lg)}.sui-progress-spinner-svg{width:100%;height:100%;animation:sui-progress-spinner-rotate var(--sui-progress-spinner-duration) linear infinite}.sui-progress-spinner-track{stroke:var(--sui-progress-spinner-track)}.sui-progress-spinner-circle{stroke:var(--sui-progress-spinner-color);stroke-dasharray:90 150;stroke-dashoffset:0;animation:sui-progress-spinner-dash var(--sui-progress-spinner-duration) ease-in-out infinite}@keyframes sui-progress-spinner-rotate{to{transform:rotate(360deg)}}@keyframes sui-progress-spinner-dash{0%{stroke-dasharray:1 150;stroke-dashoffset:0}50%{stroke-dasharray:90 150;stroke-dashoffset:-35}to{stroke-dasharray:90 150;stroke-dashoffset:-124}}@media(prefers-reduced-motion:reduce){.sui-progress-spinner-svg{animation-duration:2s}.sui-progress-spinner-circle{animation:none;stroke-dasharray:80 150}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiProgressSpinner, decorators: [{
+            type: Component,
+            args: [{ selector: 'sui-progress-spinner', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n    class=\"sui-progress-spinner\"\n    [class.sui-progress-spinner-small]=\"size() === 'small'\"\n    [class.sui-progress-spinner-medium]=\"size() === 'medium'\"\n    [class.sui-progress-spinner-large]=\"size() === 'large'\"\n    role=\"status\"\n    [attr.aria-label]=\"ariaLabel()\">\n\n    <svg\n        class=\"sui-progress-spinner-svg\"\n        viewBox=\"0 0 50 50\"\n        aria-hidden=\"true\">\n\n        <circle\n            class=\"sui-progress-spinner-track\"\n            cx=\"25\"\n            cy=\"25\"\n            r=\"20\"\n            fill=\"none\"\n            [attr.stroke-width]=\"strokeWidth()\">\n        </circle>\n\n        <circle\n            class=\"sui-progress-spinner-circle\"\n            cx=\"25\"\n            cy=\"25\"\n            r=\"20\"\n            fill=\"none\"\n            [attr.stroke-width]=\"strokeWidth()\"\n            stroke-linecap=\"round\">\n        </circle>\n\n    </svg>\n\n</span>", styles: [":host{display:inline-flex}.sui-progress-spinner{display:inline-flex;align-items:center;justify-content:center}.sui-progress-spinner-small{width:var(--sui-progress-spinner-size-sm);height:var(--sui-progress-spinner-size-sm)}.sui-progress-spinner-medium{width:var(--sui-progress-spinner-size-md);height:var(--sui-progress-spinner-size-md)}.sui-progress-spinner-large{width:var(--sui-progress-spinner-size-lg);height:var(--sui-progress-spinner-size-lg)}.sui-progress-spinner-svg{width:100%;height:100%;animation:sui-progress-spinner-rotate var(--sui-progress-spinner-duration) linear infinite}.sui-progress-spinner-track{stroke:var(--sui-progress-spinner-track)}.sui-progress-spinner-circle{stroke:var(--sui-progress-spinner-color);stroke-dasharray:90 150;stroke-dashoffset:0;animation:sui-progress-spinner-dash var(--sui-progress-spinner-duration) ease-in-out infinite}@keyframes sui-progress-spinner-rotate{to{transform:rotate(360deg)}}@keyframes sui-progress-spinner-dash{0%{stroke-dasharray:1 150;stroke-dashoffset:0}50%{stroke-dasharray:90 150;stroke-dashoffset:-35}to{stroke-dasharray:90 150;stroke-dashoffset:-124}}@media(prefers-reduced-motion:reduce){.sui-progress-spinner-svg{animation-duration:2s}.sui-progress-spinner-circle{animation:none;stroke-dasharray:80 150}}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SuiProgressSpinner };
+//# sourceMappingURL=saitec-ui-progress-spinner.mjs.map

package/fesm2022/saitec-ui-progress-spinner.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"saitec-ui-progress-spinner.mjs","sources":["../../../projects/ui/progress-spinner/src/progress-spinner.component.ts","../../../projects/ui/progress-spinner/src/progress-spinner.component.html","../../../projects/ui/progress-spinner/src/saitec-ui-progress-spinner.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    Component,\n    input\n} from '@angular/core';\n\nexport type SuiProgressSpinnerSize =\n    | 'small'\n    | 'medium'\n    | 'large';\n\n@Component({\n    selector: 'sui-progress-spinner',\n    standalone: true,\n    templateUrl: './progress-spinner.component.html',\n    styleUrl: './progress-spinner.component.css',\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SuiProgressSpinner {\n\n    size = input<SuiProgressSpinnerSize>('medium');\n\n    strokeWidth = input(4);\n\n    ariaLabel = input('Loading');\n}","<span\n    class=\"sui-progress-spinner\"\n    [class.sui-progress-spinner-small]=\"size() === 'small'\"\n    [class.sui-progress-spinner-medium]=\"size() === 'medium'\"\n    [class.sui-progress-spinner-large]=\"size() === 'large'\"\n    role=\"status\"\n    [attr.aria-label]=\"ariaLabel()\">\n\n    <svg\n        class=\"sui-progress-spinner-svg\"\n        viewBox=\"0 0 50 50\"\n        aria-hidden=\"true\">\n\n        <circle\n            class=\"sui-progress-spinner-track\"\n            cx=\"25\"\n            cy=\"25\"\n            r=\"20\"\n            fill=\"none\"\n            [attr.stroke-width]=\"strokeWidth()\">\n        </circle>\n\n        <circle\n            class=\"sui-progress-spinner-circle\"\n            cx=\"25\"\n            cy=\"25\"\n            r=\"20\"\n            fill=\"none\"\n            [attr.stroke-width]=\"strokeWidth()\"\n            stroke-linecap=\"round\">\n        </circle>\n\n    </svg>\n\n</span>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;MAkBa,kBAAkB,CAAA;IAE3B,IAAI,GAAG,KAAK,CAAyB,QAAQ;6EAAC;IAE9C,WAAW,GAAG,KAAK,CAAC,CAAC;oFAAC;IAEtB,SAAS,GAAG,KAAK,CAAC,SAAS;kFAAC;uGANnB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,+dClB/B,m7BAkCO,EAAA,MAAA,EAAA,CAAA,8vCAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDhBM,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAP9B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,sBAAsB,EAAA,UAAA,EACpB,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,m7BAAA,EAAA,MAAA,EAAA,CAAA,8vCAAA,CAAA,EAAA;;;AEhBnD;;AAEG;;;;"}