@dnd-mapp/shared-ui 1.1.0 → 2.0.0

package/fesm2022/dnd-mapp-shared-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, Component, inject, ElementRef, ViewContainerRef, DestroyRef, booleanAttribute, output, Directive, ChangeDetectionStrategy, model } from '@angular/core';
+import { input, Component, inject, ElementRef, ViewContainerRef, DestroyRef, booleanAttribute, output, computed, Directive, ChangeDetectionStrategy, model } from '@angular/core';
 import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -19,28 +19,14 @@ function buttonColorAttribute(value) {
 
 class ButtonComponent {
     color = input(DEFAULT_BUTTON_COLOR, { ...(ngDevMode ? { debugName: "color" } : {}), transform: buttonColorAttribute, alias: 'dma-button' });
-    isBase = computed(() => this.color() === ButtonColors.BASE, ...(ngDevMode ? [{ debugName: "isBase" }] : []));
-    isPrimary = computed(() => this.color() === ButtonColors.PRIMARY, ...(ngDevMode ? [{ debugName: "isPrimary" }] : []));
-    isDanger = computed(() => this.color() === ButtonColors.DANGER, ...(ngDevMode ? [{ debugName: "isDanger" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ButtonComponent, isStandalone: true, selector: "button[dma-button]", inputs: { color: { classPropertyName: "color", publicName: "dma-button", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.text-neutral-900": "isBase()", "class.bg-neutral-100": "isBase()", "class.hover:bg-neutral-200": "isBase()", "class.active:bg-neutral-300": "isBase()", "class.text-neutral-100": "isPrimary()", "class.bg-blue-400": "isPrimary()", "class.hover:bg-blue-500": "isPrimary()", "class.active:bg-blue-600": "isPrimary()", "class.text-red-600": "isDanger()", "class.hover:bg-red-50": "isDanger()", "class.active:bg-red-100": "isDanger()" }, classAttribute: "font-semibold cursor-pointer py-2 px-4 rounded-md" }, ngImport: i0, template: "<div class=\"flex gap-2 items-center justify-center\">\n    <ng-content select=\"dma-leading-icon\" />\n    <ng-content />\n</div>\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ButtonComponent, isStandalone: true, selector: "button[dma-button]", inputs: { color: { classPropertyName: "color", publicName: "dma-button", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.dma-button": "color()" } }, ngImport: i0, template: "<div class=\"button-content\">\n    <ng-content select=\"[dmaLeadingIcon]\" />\n    <ng-content />\n</div>\n", styles: [":host{font-weight:600;cursor:pointer;border-radius:.75rem;padding:.375rem .75rem}:host .button-content{display:flex;gap:.375rem;align-items:center;justify-content:center}:host[dma-button=\"\"],:host[dma-button=base]{background-color:#fafafa;color:#171717}:host[dma-button=\"\"]:not(:disabled):hover,:host[dma-button=base]:not(:disabled):hover{background-color:#e5e5e5}:host[dma-button=\"\"]:not(:disabled):active,:host[dma-button=base]:not(:disabled):active{background-color:#d4d4d4}:host[dma-button=primary]{background-color:#56a2ff;background-color:oklch(70.7% .165 254.624deg);color:#fafafa}:host[dma-button=primary]:not(:disabled):hover{background-color:#3280ff;background-color:oklch(62.3% .214 259.815deg)}:host[dma-button=primary]:not(:disabled):active{background-color:#155dfc}:host[dma-button=danger]{background-color:#fafafa;color:#e40014;color:oklch(57.7% .245 27.325deg)}:host[dma-button=danger]:not(:disabled):hover{background-color:#ffe2e2}:host[dma-button=danger]:not(:disabled):active{background-color:#ffcaca;background-color:oklch(88.5% .062 18.334deg)}:host-context(dma-dropdown-container){width:100%}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'button[dma-button]', host: {
-                        'class': 'font-semibold cursor-pointer py-2 px-4 rounded-md',
-                        '[class.text-neutral-900]': 'isBase()',
-                        '[class.bg-neutral-100]': 'isBase()',
-                        '[class.hover:bg-neutral-200]': 'isBase()',
-                        '[class.active:bg-neutral-300]': 'isBase()',
-                        '[class.text-neutral-100]': 'isPrimary()',
-                        '[class.bg-blue-400]': 'isPrimary()',
-                        '[class.hover:bg-blue-500]': 'isPrimary()',
-                        '[class.active:bg-blue-600]': 'isPrimary()',
-                        '[class.text-red-600]': 'isDanger()',
-                        '[class.hover:bg-red-50]': 'isDanger()',
-                        '[class.active:bg-red-100]': 'isDanger()',
-                    }, imports: [], template: "<div class=\"flex gap-2 items-center justify-center\">\n    <ng-content select=\"dma-leading-icon\" />\n    <ng-content />\n</div>\n" }]
+                        '[attr.dma-button]': 'color()',
+                    }, imports: [], template: "<div class=\"button-content\">\n    <ng-content select=\"[dmaLeadingIcon]\" />\n    <ng-content />\n</div>\n", styles: [":host{font-weight:600;cursor:pointer;border-radius:.75rem;padding:.375rem .75rem}:host .button-content{display:flex;gap:.375rem;align-items:center;justify-content:center}:host[dma-button=\"\"],:host[dma-button=base]{background-color:#fafafa;color:#171717}:host[dma-button=\"\"]:not(:disabled):hover,:host[dma-button=base]:not(:disabled):hover{background-color:#e5e5e5}:host[dma-button=\"\"]:not(:disabled):active,:host[dma-button=base]:not(:disabled):active{background-color:#d4d4d4}:host[dma-button=primary]{background-color:#56a2ff;background-color:oklch(70.7% .165 254.624deg);color:#fafafa}:host[dma-button=primary]:not(:disabled):hover{background-color:#3280ff;background-color:oklch(62.3% .214 259.815deg)}:host[dma-button=primary]:not(:disabled):active{background-color:#155dfc}:host[dma-button=danger]{background-color:#fafafa;color:#e40014;color:oklch(57.7% .245 27.325deg)}:host[dma-button=danger]:not(:disabled):hover{background-color:#ffe2e2}:host[dma-button=danger]:not(:disabled):active{background-color:#ffcaca;background-color:oklch(88.5% .062 18.334deg)}:host-context(dma-dropdown-container){width:100%}\n"] }]
         }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "dma-button", required: false }] }] } });
 
 const DEFAULT_DROPDOWN_POSITIONS = [
@@ -69,22 +55,23 @@ class DropdownAnchorDirective {
     positions = input(DEFAULT_DROPDOWN_POSITIONS, ...(ngDevMode ? [{ debugName: "positions" }] : []));
     toggleOnHover = input(false, { ...(ngDevMode ? { debugName: "toggleOnHover" } : {}), transform: booleanAttribute });
     dropdownToggle = output();
-    hideScheduler = new Subject();
+    dropdownOpen = computed(() => Boolean(this.overlayRef), ...(ngDevMode ? [{ debugName: "dropdownOpen" }] : []));
+    closeScheduler = new Subject();
     overlayRef = null;
     constructor() {
-        this.hideScheduler
+        this.closeScheduler
             .asObservable()
             .pipe(debounceTime(100), filter(Boolean), takeUntilDestroyed())
             .subscribe({
             next: () => {
                 if (!this.toggleOnHover())
                     return;
-                this.hide();
+                this.close();
             },
         });
     }
-    show() {
-        this.hideScheduler.next(false);
+    open() {
+        this.closeScheduler.next(false);
         if (this.overlayRef)
             return;
         const positionStrategy = this.overlay
@@ -102,12 +89,25 @@ class DropdownAnchorDirective {
             .detachments()
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
-            next: () => this.hide(),
+            next: () => this.close(),
+        });
+        this.overlayRef
+            .outsidePointerEvents()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (mouseEvent) => this.onOutsideClick(mouseEvent),
         });
         this.dropdownToggle.emit(true);
     }
-    scheduleHide(shouldHide) {
-        this.hideScheduler.next(shouldHide);
+    close() {
+        if (this.overlayRef === null)
+            return;
+        this.overlayRef.dispose();
+        this.overlayRef = null;
+        this.dropdownToggle.emit(false);
+    }
+    scheduleClose(shouldClose) {
+        this.closeScheduler.next(shouldClose);
     }
     onClick() {
         if (this.toggleOnHover())
@@ -117,25 +117,27 @@ class DropdownAnchorDirective {
     onMouseenter() {
         if (!this.toggleOnHover())
             return;
-        this.show();
+        this.open();
     }
     onMouseleave() {
         if (!this.toggleOnHover())
             return;
-        this.hideScheduler.next(true);
+        this.closeScheduler.next(true);
     }
     toggle() {
         if (this.overlayRef)
-            this.hide();
+            this.close();
         else
-            this.show();
+            this.open();
     }
-    hide() {
-        if (this.overlayRef === null)
-            return;
-        this.overlayRef.dispose();
-        this.overlayRef = null;
-        this.dropdownToggle.emit(false);
+    onOutsideClick(mouseEvent) {
+        let target = mouseEvent.target;
+        while (target !== null && target !== this.elementRef.nativeElement) {
+            target = target?.parentElement ?? null;
+        }
+        if (!target) {
+            this.close();
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DropdownAnchorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: DropdownAnchorDirective, isStandalone: true, selector: "[dmaDropdownAnchor]", inputs: { dropdownContainerTemplateRef: { classPropertyName: "dropdownContainerTemplateRef", publicName: "dmaDropdownAnchor", isSignal: true, isRequired: true, transformFunction: null }, positions: { classPropertyName: "positions", publicName: "positions", isSignal: true, isRequired: false, transformFunction: null }, toggleOnHover: { classPropertyName: "toggleOnHover", publicName: "toggleOnHover", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dropdownToggle: "dropdownToggle" }, host: { listeners: { "click": "onClick()", "mouseenter": "onMouseenter()", "mouseleave": "onMouseleave()" } }, exportAs: ["dmaDropdownAnchor"], ngImport: i0 });
@@ -162,22 +164,34 @@ class DropdownContainerComponent {
         this.hover.emit(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DropdownContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: DropdownContainerComponent, isStandalone: true, selector: "dma-dropdown-container", outputs: { hover: "hover" }, host: { listeners: { "mouseenter": "onMouseenter()", "mouseleave": "onMouseleave()" }, classAttribute: "block w-full shadow-md border border-neutral-200 rounded-md bg-neutral-50 p-1" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: DropdownContainerComponent, isStandalone: true, selector: "dma-dropdown-container", outputs: { hover: "hover" }, host: { listeners: { "mouseenter": "onMouseenter()", "mouseleave": "onMouseleave()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:block;width:100%;border:1px solid oklch(92.2% 0 0deg);border-radius:.75rem;background-color:#fafafa;color:#171717;box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DropdownContainerComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'dma-dropdown-container',
-                    template: `<ng-content />`,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        'class': 'block w-full shadow-md border border-neutral-200 rounded-md bg-neutral-50 p-1',
+            args: [{ selector: 'dma-dropdown-container', template: `<ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '(mouseenter)': 'onMouseenter()',
                         '(mouseleave)': 'onMouseleave()',
-                    },
-                }]
+                    }, styles: [":host{display:block;width:100%;border:1px solid oklch(92.2% 0 0deg);border-radius:.75rem;background-color:#fafafa;color:#171717;box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a}\n"] }]
         }], propDecorators: { hover: [{ type: i0.Output, args: ["hover"] }] } });
 
+class DropdownMenuDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DropdownMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: DropdownMenuDirective, isStandalone: true, selector: "[dmaDropdownMenu]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DropdownMenuDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[dmaDropdownMenu]' }]
+        }] });
+
+class DropdownTriggerDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DropdownTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: DropdownTriggerDirective, isStandalone: true, selector: "[dmaDropdownTrigger]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DropdownTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[dmaDropdownTrigger]' }]
+        }] });
+
 function provideValueAccessor(component) {
     return {
         provide: NG_VALUE_ACCESSOR,
@@ -231,39 +245,276 @@ class InputComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: InputComponent, isStandalone: true, selector: "dma-input", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange" }, host: { classAttribute: "group" }, providers: [provideValueAccessor(InputComponent)], ngImport: i0, template: "<label class=\"inline-block text-sm text-neutral-900 font-semibold mb-2\" [for]=\"inputId()\">{{ label() }}</label>\n<input\n    class=\"block w-full disabled:opacity-35 border text-neutral-900 group-[.ng-invalid.ng-touched]:text-red-500 border-neutral-300 not-disabled:not-group-[.ng-invalid.ng-touched]:not-group-[.ng-valid.ng-touched]:hover:border-neutral-500 disabled:bg-neutral-300 group-[.ng-invalid.ng-touched]:border-red-500 group-[.ng-valid.ng-touched]:border-green-500 rounded-xl py-2 px-4 not-group-[.ng-invalid.ng-touched]:not-group-[.ng-valid.ng-touched]:focus:outline-blue-400 read-only:outline-0 group-[.ng-invalid.ng-touched]:outline-red-500 group-[.ng-valid.ng-touched]:outline-green-500 disabled:cursor-default read-only:cursor-default\"\n    type=\"text\"\n    #input\n    [id]=\"inputId()\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"value()\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readonly()\"\n    (focus)=\"onFocus()\"\n    (input)=\"onInput(input.value)\"\n/>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: InputComponent, isStandalone: true, selector: "dma-input", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange" }, providers: [provideValueAccessor(InputComponent)], ngImport: i0, template: "<label [for]=\"inputId()\">{{ label() }}</label>\n<input\n    type=\"text\"\n    #input\n    [id]=\"inputId()\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"value()\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readonly()\"\n    (focus)=\"onFocus()\"\n    (input)=\"onInput(input.value)\"\n/>\n", styles: [":host label{font-size:.875rem;line-height:1.4285714286;display:inline-block;color:#171717;font-weight:600;margin-bottom:.5rem}:host input{display:block;width:100%;border:1px solid oklch(87% 0 0deg);border-radius:.75rem;padding:.5rem 1rem;color:#171717}:host input:not(:disabled):hover{border-color:#737373}:host input:not(:disabled):focus{outline-color:#56a2ff;outline-color:oklch(70.7% .165 254.624deg)}:host input:not(:disabled):read-only{outline:0;cursor:default}:host input:disabled{background-color:#d4d4d4;opacity:.35;cursor:not-allowed}:host.ng-valid.ng-touched input:not(:disabled){border-color:#00c65a;border-color:oklch(72.3% .219 149.579deg)}:host.ng-valid.ng-touched input:not(:disabled):focus{outline-color:#00c65a;outline-color:oklch(72.3% .219 149.579deg)}:host.ng-invalid.ng-touched input:not(:disabled){border-color:#fb2c36;color:#fb2c36}:host.ng-invalid.ng-touched input:not(:disabled):focus{outline-color:#fb2c36}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dma-input', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'group',
-                    }, imports: [], providers: [provideValueAccessor(InputComponent)], template: "<label class=\"inline-block text-sm text-neutral-900 font-semibold mb-2\" [for]=\"inputId()\">{{ label() }}</label>\n<input\n    class=\"block w-full disabled:opacity-35 border text-neutral-900 group-[.ng-invalid.ng-touched]:text-red-500 border-neutral-300 not-disabled:not-group-[.ng-invalid.ng-touched]:not-group-[.ng-valid.ng-touched]:hover:border-neutral-500 disabled:bg-neutral-300 group-[.ng-invalid.ng-touched]:border-red-500 group-[.ng-valid.ng-touched]:border-green-500 rounded-xl py-2 px-4 not-group-[.ng-invalid.ng-touched]:not-group-[.ng-valid.ng-touched]:focus:outline-blue-400 read-only:outline-0 group-[.ng-invalid.ng-touched]:outline-red-500 group-[.ng-valid.ng-touched]:outline-green-500 disabled:cursor-default read-only:cursor-default\"\n    type=\"text\"\n    #input\n    [id]=\"inputId()\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"value()\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readonly()\"\n    (focus)=\"onFocus()\"\n    (input)=\"onInput(input.value)\"\n/>\n" }]
+            args: [{ selector: 'dma-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideValueAccessor(InputComponent)], imports: [], template: "<label [for]=\"inputId()\">{{ label() }}</label>\n<input\n    type=\"text\"\n    #input\n    [id]=\"inputId()\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"value()\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readonly()\"\n    (focus)=\"onFocus()\"\n    (input)=\"onInput(input.value)\"\n/>\n", styles: [":host label{font-size:.875rem;line-height:1.4285714286;display:inline-block;color:#171717;font-weight:600;margin-bottom:.5rem}:host input{display:block;width:100%;border:1px solid oklch(87% 0 0deg);border-radius:.75rem;padding:.5rem 1rem;color:#171717}:host input:not(:disabled):hover{border-color:#737373}:host input:not(:disabled):focus{outline-color:#56a2ff;outline-color:oklch(70.7% .165 254.624deg)}:host input:not(:disabled):read-only{outline:0;cursor:default}:host input:disabled{background-color:#d4d4d4;opacity:.35;cursor:not-allowed}:host.ng-valid.ng-touched input:not(:disabled){border-color:#00c65a;border-color:oklch(72.3% .219 149.579deg)}:host.ng-valid.ng-touched input:not(:disabled):focus{outline-color:#00c65a;outline-color:oklch(72.3% .219 149.579deg)}:host.ng-invalid.ng-touched input:not(:disabled){border-color:#fb2c36;color:#fb2c36}:host.ng-invalid.ng-touched input:not(:disabled):focus{outline-color:#fb2c36}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }] } });
 
-class CircleUserIcon {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CircleUserIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: CircleUserIcon, isStandalone: true, selector: "dma-icon[dma-circle-user-icon]", ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M463 448.2C440.9 409.8 399.4 384 352 384L288 384C240.6 384 199.1 409.8 177 448.2C212.2 487.4 263.2 512 320 512C376.8 512 427.8 487.3 463 448.2zM64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320zM320 336C359.8 336 392 303.8 392 264C392 224.2 359.8 192 320 192C280.2 192 248 224.2 248 264C248 303.8 280.2 336 320 336z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+class LeadingIconDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LeadingIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: LeadingIconDirective, isStandalone: true, selector: "[dmaLeadingIcon]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LeadingIconDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[dmaLeadingIcon]' }]
+        }] });
+
+class CloneReIcon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CloneReIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: CloneReIcon, isStandalone: true, selector: "dma-icon[dma-clone-re-icon]", ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M352 528L128 528C119.2 528 112 520.8 112 512L112 288C112 279.2 119.2 272 128 272L176 272L176 224L128 224C92.7 224 64 252.7 64 288L64 512C64 547.3 92.7 576 128 576L352 576C387.3 576 416 547.3 416 512L416 464L368 464L368 512C368 520.8 360.8 528 352 528zM288 368C279.2 368 272 360.8 272 352L272 128C272 119.2 279.2 112 288 112L512 112C520.8 112 528 119.2 528 128L528 352C528 360.8 520.8 368 512 368L288 368zM224 352C224 387.3 252.7 416 288 416L512 416C547.3 416 576 387.3 576 352L576 128C576 92.7 547.3 64 512 64L288 64C252.7 64 224 92.7 224 128L224 352z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CloneReIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'dma-icon[dma-clone-re-icon]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M352 528L128 528C119.2 528 112 520.8 112 512L112 288C112 279.2 119.2 272 128 272L176 272L176 224L128 224C92.7 224 64 252.7 64 288L64 512C64 547.3 92.7 576 128 576L352 576C387.3 576 416 547.3 416 512L416 464L368 464L368 512C368 520.8 360.8 528 352 528zM288 368C279.2 368 272 360.8 272 352L272 128C272 119.2 279.2 112 288 112L512 112C520.8 112 528 119.2 528 128L528 352C528 360.8 520.8 368 512 368L288 368zM224 352C224 387.3 252.7 416 288 416L512 416C547.3 416 576 387.3 576 352L576 128C576 92.7 547.3 64 512 64L288 64C252.7 64 224 92.7 224 128L224 352z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"] }]
+        }] });
+
+class EyeSlashReIcon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EyeSlashReIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: EyeSlashReIcon, isStandalone: true, selector: "dma-icon[dma-eye-slash-re-icon]", ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M73 39.1C63.6 29.7 48.4 29.7 39.1 39.1C29.8 48.5 29.7 63.7 39 73.1L567 601.1C576.4 610.5 591.6 610.5 600.9 601.1C610.2 591.7 610.3 576.5 600.9 567.2L504.5 470.8C507.2 468.4 509.9 466 512.5 463.6C559.3 420.1 590.6 368.2 605.5 332.5C608.8 324.6 608.8 315.8 605.5 307.9C590.6 272.2 559.3 220.2 512.5 176.8C465.4 133.1 400.7 96.2 319.9 96.2C263.1 96.2 214.3 114.4 173.9 140.4L73 39.1zM208.9 175.1C241 156.2 278.1 144 320 144C385.2 144 438.8 173.6 479.9 211.7C518.4 247.4 545 290 558.5 320C544.9 350 518.3 392.5 479.9 428.3C476.8 431.1 473.7 433.9 470.5 436.7L425.8 392C439.8 371.5 448 346.7 448 320C448 249.3 390.7 192 320 192C293.3 192 268.5 200.2 248 214.2L208.9 175.1zM390.9 357.1L282.9 249.1C294 243.3 306.6 240 320 240C364.2 240 400 275.8 400 320C400 333.4 396.7 346 390.9 357.1zM135.4 237.2L101.4 203.2C68.8 240 46.4 279 34.5 307.7C31.2 315.6 31.2 324.4 34.5 332.3C49.4 368 80.7 420 127.5 463.4C174.6 507.1 239.3 544 320.1 544C357.4 544 391.3 536.1 421.6 523.4L384.2 486C364.2 492.4 342.8 496 320 496C254.8 496 201.2 466.4 160.1 428.3C121.6 392.6 95 350 81.5 320C91.9 296.9 110.1 266.4 135.5 237.2z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EyeSlashReIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'dma-icon[dma-eye-slash-re-icon]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M73 39.1C63.6 29.7 48.4 29.7 39.1 39.1C29.8 48.5 29.7 63.7 39 73.1L567 601.1C576.4 610.5 591.6 610.5 600.9 601.1C610.2 591.7 610.3 576.5 600.9 567.2L504.5 470.8C507.2 468.4 509.9 466 512.5 463.6C559.3 420.1 590.6 368.2 605.5 332.5C608.8 324.6 608.8 315.8 605.5 307.9C590.6 272.2 559.3 220.2 512.5 176.8C465.4 133.1 400.7 96.2 319.9 96.2C263.1 96.2 214.3 114.4 173.9 140.4L73 39.1zM208.9 175.1C241 156.2 278.1 144 320 144C385.2 144 438.8 173.6 479.9 211.7C518.4 247.4 545 290 558.5 320C544.9 350 518.3 392.5 479.9 428.3C476.8 431.1 473.7 433.9 470.5 436.7L425.8 392C439.8 371.5 448 346.7 448 320C448 249.3 390.7 192 320 192C293.3 192 268.5 200.2 248 214.2L208.9 175.1zM390.9 357.1L282.9 249.1C294 243.3 306.6 240 320 240C364.2 240 400 275.8 400 320C400 333.4 396.7 346 390.9 357.1zM135.4 237.2L101.4 203.2C68.8 240 46.4 279 34.5 307.7C31.2 315.6 31.2 324.4 34.5 332.3C49.4 368 80.7 420 127.5 463.4C174.6 507.1 239.3 544 320.1 544C357.4 544 391.3 536.1 421.6 523.4L384.2 486C364.2 492.4 342.8 496 320 496C254.8 496 201.2 466.4 160.1 428.3C121.6 392.6 95 350 81.5 320C91.9 296.9 110.1 266.4 135.5 237.2z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"] }]
+        }] });
+
+class EyeReIcon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EyeReIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: EyeReIcon, isStandalone: true, selector: "dma-icon[dma-eye-re-icon]", ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M320 144C254.8 144 201.2 173.6 160.1 211.7C121.6 247.5 95 290 81.4 320C95 350 121.6 392.5 160.1 428.3C201.2 466.4 254.8 496 320 496C385.2 496 438.8 466.4 479.9 428.3C518.4 392.5 545 350 558.6 320C545 290 518.4 247.5 479.9 211.7C438.8 173.6 385.2 144 320 144zM127.4 176.6C174.5 132.8 239.2 96 320 96C400.8 96 465.5 132.8 512.6 176.6C559.4 220.1 590.7 272 605.6 307.7C608.9 315.6 608.9 324.4 605.6 332.3C590.7 368 559.4 420 512.6 463.4C465.5 507.1 400.8 544 320 544C239.2 544 174.5 507.2 127.4 463.4C80.6 419.9 49.3 368 34.4 332.3C31.1 324.4 31.1 315.6 34.4 307.7C49.3 272 80.6 220 127.4 176.6zM320 400C364.2 400 400 364.2 400 320C400 290.4 383.9 264.5 360 250.7C358.6 310.4 310.4 358.6 250.7 360C264.5 383.9 290.4 400 320 400zM240.4 311.6C242.9 311.9 245.4 312 248 312C283.3 312 312 283.3 312 248C312 245.4 311.8 242.9 311.6 240.4C274.2 244.3 244.4 274.1 240.5 311.5zM286 196.6C296.8 193.6 308.2 192.1 319.9 192.1C328.7 192.1 337.4 193 345.7 194.7C346 194.8 346.2 194.8 346.5 194.9C404.4 207.1 447.9 258.6 447.9 320.1C447.9 390.8 390.6 448.1 319.9 448.1C258.3 448.1 206.9 404.6 194.7 346.7C192.9 338.1 191.9 329.2 191.9 320.1C191.9 309.1 193.3 298.3 195.9 288.1C196.1 287.4 196.2 286.8 196.4 286.2C208.3 242.8 242.5 208.6 285.9 196.7z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EyeReIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'dma-icon[dma-eye-re-icon]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M320 144C254.8 144 201.2 173.6 160.1 211.7C121.6 247.5 95 290 81.4 320C95 350 121.6 392.5 160.1 428.3C201.2 466.4 254.8 496 320 496C385.2 496 438.8 466.4 479.9 428.3C518.4 392.5 545 350 558.6 320C545 290 518.4 247.5 479.9 211.7C438.8 173.6 385.2 144 320 144zM127.4 176.6C174.5 132.8 239.2 96 320 96C400.8 96 465.5 132.8 512.6 176.6C559.4 220.1 590.7 272 605.6 307.7C608.9 315.6 608.9 324.4 605.6 332.3C590.7 368 559.4 420 512.6 463.4C465.5 507.1 400.8 544 320 544C239.2 544 174.5 507.2 127.4 463.4C80.6 419.9 49.3 368 34.4 332.3C31.1 324.4 31.1 315.6 34.4 307.7C49.3 272 80.6 220 127.4 176.6zM320 400C364.2 400 400 364.2 400 320C400 290.4 383.9 264.5 360 250.7C358.6 310.4 310.4 358.6 250.7 360C264.5 383.9 290.4 400 320 400zM240.4 311.6C242.9 311.9 245.4 312 248 312C283.3 312 312 283.3 312 248C312 245.4 311.8 242.9 311.6 240.4C274.2 244.3 244.4 274.1 240.5 311.5zM286 196.6C296.8 193.6 308.2 192.1 319.9 192.1C328.7 192.1 337.4 193 345.7 194.7C346 194.8 346.2 194.8 346.5 194.9C404.4 207.1 447.9 258.6 447.9 320.1C447.9 390.8 390.6 448.1 319.9 448.1C258.3 448.1 206.9 404.6 194.7 346.7C192.9 338.1 191.9 329.2 191.9 320.1C191.9 309.1 193.3 298.3 195.9 288.1C196.1 287.4 196.2 286.8 196.4 286.2C208.3 242.8 242.5 208.6 285.9 196.7z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"] }]
+        }] });
+
+class FileLinesReIcon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FileLinesReIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: FileLinesReIcon, isStandalone: true, selector: "dma-icon[dma-file-lines-re-icon]", ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M192 112L304 112L304 200C304 239.8 336.2 272 376 272L464 272L464 512C464 520.8 456.8 528 448 528L192 528C183.2 528 176 520.8 176 512L176 128C176 119.2 183.2 112 192 112zM352 131.9L444.1 224L376 224C362.7 224 352 213.3 352 200L352 131.9zM192 64C156.7 64 128 92.7 128 128L128 512C128 547.3 156.7 576 192 576L448 576C483.3 576 512 547.3 512 512L512 250.5C512 233.5 505.3 217.2 493.3 205.2L370.7 82.7C358.7 70.7 342.5 64 325.5 64L192 64zM248 320C234.7 320 224 330.7 224 344C224 357.3 234.7 368 248 368L392 368C405.3 368 416 357.3 416 344C416 330.7 405.3 320 392 320L248 320zM248 416C234.7 416 224 426.7 224 440C224 453.3 234.7 464 248 464L392 464C405.3 464 416 453.3 416 440C416 426.7 405.3 416 392 416L248 416z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FileLinesReIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'dma-icon[dma-file-lines-re-icon]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M192 112L304 112L304 200C304 239.8 336.2 272 376 272L464 272L464 512C464 520.8 456.8 528 448 528L192 528C183.2 528 176 520.8 176 512L176 128C176 119.2 183.2 112 192 112zM352 131.9L444.1 224L376 224C362.7 224 352 213.3 352 200L352 131.9zM192 64C156.7 64 128 92.7 128 128L128 512C128 547.3 156.7 576 192 576L448 576C483.3 576 512 547.3 512 512L512 250.5C512 233.5 505.3 217.2 493.3 205.2L370.7 82.7C358.7 70.7 342.5 64 325.5 64L192 64zM248 320C234.7 320 224 330.7 224 344C224 357.3 234.7 368 248 368L392 368C405.3 368 416 357.3 416 344C416 330.7 405.3 320 392 320L248 320zM248 416C234.7 416 224 426.7 224 440C224 453.3 234.7 464 248 464L392 464C405.3 464 416 453.3 416 440C416 426.7 405.3 416 392 416L248 416z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"] }]
+        }] });
+
+class FileReIcon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FileReIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: FileReIcon, isStandalone: true, selector: "dma-icon[dma-file-re-icon]", ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M304 112L192 112C183.2 112 176 119.2 176 128L176 512C176 520.8 183.2 528 192 528L448 528C456.8 528 464 520.8 464 512L464 272L376 272C336.2 272 304 239.8 304 200L304 112zM444.1 224L352 131.9L352 200C352 213.3 362.7 224 376 224L444.1 224zM128 128C128 92.7 156.7 64 192 64L325.5 64C342.5 64 358.8 70.7 370.8 82.7L493.3 205.3C505.3 217.3 512 233.6 512 250.6L512 512C512 547.3 483.3 576 448 576L192 576C156.7 576 128 547.3 128 512L128 128z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FileReIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'dma-icon[dma-file-re-icon]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M304 112L192 112C183.2 112 176 119.2 176 128L176 512C176 520.8 183.2 528 192 528L448 528C456.8 528 464 520.8 464 512L464 272L376 272C336.2 272 304 239.8 304 200L304 112zM444.1 224L352 131.9L352 200C352 213.3 362.7 224 376 224L444.1 224zM128 128C128 92.7 156.7 64 192 64L325.5 64C342.5 64 358.8 70.7 370.8 82.7L493.3 205.3C505.3 217.3 512 233.6 512 250.6L512 512C512 547.3 483.3 576 448 576L192 576C156.7 576 128 547.3 128 512L128 128z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"] }]
+        }] });
+
+class FloppyDiskReIcon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FloppyDiskReIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: FloppyDiskReIcon, isStandalone: true, selector: "dma-icon[dma-floppy-disk-re-icon]", ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M160 144C151.2 144 144 151.2 144 160L144 480C144 488.8 151.2 496 160 496L480 496C488.8 496 496 488.8 496 480L496 237.3C496 233.1 494.3 229 491.3 226L416 150.6L416 240C416 257.7 401.7 272 384 272L224 272C206.3 272 192 257.7 192 240L192 144L160 144zM240 144L240 224L368 224L368 144L240 144zM96 160C96 124.7 124.7 96 160 96L402.7 96C419.7 96 436 102.7 448 114.7L525.3 192C537.3 204 544 220.3 544 237.3L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 160zM256 384C256 348.7 284.7 320 320 320C355.3 320 384 348.7 384 384C384 419.3 355.3 448 320 448C284.7 448 256 419.3 256 384z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FloppyDiskReIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'dma-icon[dma-floppy-disk-re-icon]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M160 144C151.2 144 144 151.2 144 160L144 480C144 488.8 151.2 496 160 496L480 496C488.8 496 496 488.8 496 480L496 237.3C496 233.1 494.3 229 491.3 226L416 150.6L416 240C416 257.7 401.7 272 384 272L224 272C206.3 272 192 257.7 192 240L192 144L160 144zM240 144L240 224L368 224L368 144L240 144zM96 160C96 124.7 124.7 96 160 96L402.7 96C419.7 96 436 102.7 448 114.7L525.3 192C537.3 204 544 220.3 544 237.3L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 160zM256 384C256 348.7 284.7 320 320 320C355.3 320 384 348.7 384 384C384 419.3 355.3 448 320 448C284.7 448 256 419.3 256 384z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"] }]
+        }] });
+
+class TrashCanReIcon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TrashCanReIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: TrashCanReIcon, isStandalone: true, selector: "dma-icon[dma-trash-can-re-icon]", ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M262.2 48C248.9 48 236.9 56.3 232.2 68.8L216 112L120 112C106.7 112 96 122.7 96 136C96 149.3 106.7 160 120 160L520 160C533.3 160 544 149.3 544 136C544 122.7 533.3 112 520 112L424 112L407.8 68.8C403.1 56.3 391.2 48 377.8 48L262.2 48zM128 208L128 512C128 547.3 156.7 576 192 576L448 576C483.3 576 512 547.3 512 512L512 208L464 208L464 512C464 520.8 456.8 528 448 528L192 528C183.2 528 176 520.8 176 512L176 208L128 208zM288 280C288 266.7 277.3 256 264 256C250.7 256 240 266.7 240 280L240 456C240 469.3 250.7 480 264 480C277.3 480 288 469.3 288 456L288 280zM400 280C400 266.7 389.3 256 376 256C362.7 256 352 266.7 352 280L352 456C352 469.3 362.7 480 376 480C389.3 480 400 469.3 400 456L400 280z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TrashCanReIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'dma-icon[dma-trash-can-re-icon]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M262.2 48C248.9 48 236.9 56.3 232.2 68.8L216 112L120 112C106.7 112 96 122.7 96 136C96 149.3 106.7 160 120 160L520 160C533.3 160 544 149.3 544 136C544 122.7 533.3 112 520 112L424 112L407.8 68.8C403.1 56.3 391.2 48 377.8 48L262.2 48zM128 208L128 512C128 547.3 156.7 576 192 576L448 576C483.3 576 512 547.3 512 512L512 208L464 208L464 512C464 520.8 456.8 528 448 528L192 528C183.2 528 176 520.8 176 512L176 208L128 208zM288 280C288 266.7 277.3 256 264 256C250.7 256 240 266.7 240 280L240 456C240 469.3 250.7 480 264 480C277.3 480 288 469.3 288 456L288 280zM400 280C400 266.7 389.3 256 376 256C362.7 256 352 266.7 352 280L352 456C352 469.3 362.7 480 376 480C389.3 480 400 469.3 400 456L400 280z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"] }]
+        }] });
+
+class AngleDownSoIcon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AngleDownSoIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: AngleDownSoIcon, isStandalone: true, selector: "dma-icon[dma-angle-down-so-icon]", ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M297.4 438.6C309.9 451.1 330.2 451.1 342.7 438.6L502.7 278.6C515.2 266.1 515.2 245.8 502.7 233.3C490.2 220.8 469.9 220.8 457.4 233.3L320 370.7L182.6 233.4C170.1 220.9 149.8 220.9 137.3 233.4C124.8 245.9 124.8 266.2 137.3 278.7L297.3 438.7z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AngleDownSoIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'dma-icon[dma-angle-down-so-icon]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M297.4 438.6C309.9 451.1 330.2 451.1 342.7 438.6L502.7 278.6C515.2 266.1 515.2 245.8 502.7 233.3C490.2 220.8 469.9 220.8 457.4 233.3L320 370.7L182.6 233.4C170.1 220.9 149.8 220.9 137.3 233.4C124.8 245.9 124.8 266.2 137.3 278.7L297.3 438.7z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"] }]
+        }] });
+
+class AngleUpSoIcon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AngleUpSoIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: AngleUpSoIcon, isStandalone: true, selector: "dma-icon[dma-angle-up-so-icon]", ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M297.4 201.4C309.9 188.9 330.2 188.9 342.7 201.4L502.7 361.4C515.2 373.9 515.2 394.2 502.7 406.7C490.2 419.2 469.9 419.2 457.4 406.7L320 269.3L182.6 406.6C170.1 419.1 149.8 419.1 137.3 406.6C124.8 394.1 124.8 373.8 137.3 361.3L297.3 201.3z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AngleUpSoIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'dma-icon[dma-angle-up-so-icon]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M297.4 201.4C309.9 188.9 330.2 188.9 342.7 201.4L502.7 361.4C515.2 373.9 515.2 394.2 502.7 406.7C490.2 419.2 469.9 419.2 457.4 406.7L320 269.3L182.6 406.6C170.1 419.1 149.8 419.1 137.3 406.6C124.8 394.1 124.8 373.8 137.3 361.3L297.3 201.3z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"] }]
+        }] });
+
+class ArrowRotateLeftSoIcon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ArrowRotateLeftSoIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ArrowRotateLeftSoIcon, isStandalone: true, selector: "dma-icon[dma-arrow-rotate-left-so-icon]", ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M320 128C263.2 128 212.1 152.7 176.9 192L224 192C241.7 192 256 206.3 256 224C256 241.7 241.7 256 224 256L96 256C78.3 256 64 241.7 64 224L64 96C64 78.3 78.3 64 96 64C113.7 64 128 78.3 128 96L128 150.7C174.9 97.6 243.5 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C233 576 156.1 532.6 109.9 466.3C99.8 451.8 103.3 431.9 117.8 421.7C132.3 411.5 152.2 415.1 162.4 429.6C197.2 479.4 254.8 511.9 320 511.9C426 511.9 512 425.9 512 319.9C512 213.9 426 128 320 128z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ArrowRotateLeftSoIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'dma-icon[dma-arrow-rotate-left-so-icon]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M320 128C263.2 128 212.1 152.7 176.9 192L224 192C241.7 192 256 206.3 256 224C256 241.7 241.7 256 224 256L96 256C78.3 256 64 241.7 64 224L64 96C64 78.3 78.3 64 96 64C113.7 64 128 78.3 128 96L128 150.7C174.9 97.6 243.5 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C233 576 156.1 532.6 109.9 466.3C99.8 451.8 103.3 431.9 117.8 421.7C132.3 411.5 152.2 415.1 162.4 429.6C197.2 479.4 254.8 511.9 320 511.9C426 511.9 512 425.9 512 319.9C512 213.9 426 128 320 128z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"] }]
+        }] });
+
+class BookOpenSoIcon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BookOpenSoIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: BookOpenSoIcon, isStandalone: true, selector: "dma-icon[dma-book-open-so-icon]", ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M320 205.3L320 514.6L320.5 514.4C375.1 491.7 433.7 480 492.8 480L512 480L512 160L492.8 160C450.6 160 408.7 168.4 369.7 184.6C352.9 191.6 336.3 198.5 320 205.3zM294.9 125.5L320 136L345.1 125.5C391.9 106 442.1 96 492.8 96L528 96C554.5 96 576 117.5 576 144L576 496C576 522.5 554.5 544 528 544L492.8 544C442.1 544 391.9 554 345.1 573.5L332.3 578.8C324.4 582.1 315.6 582.1 307.7 578.8L294.9 573.5C248.1 554 197.9 544 147.2 544L112 544C85.5 544 64 522.5 64 496L64 144C64 117.5 85.5 96 112 96L147.2 96C197.9 96 248.1 106 294.9 125.5z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BookOpenSoIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'dma-icon[dma-book-open-so-icon]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M320 205.3L320 514.6L320.5 514.4C375.1 491.7 433.7 480 492.8 480L512 480L512 160L492.8 160C450.6 160 408.7 168.4 369.7 184.6C352.9 191.6 336.3 198.5 320 205.3zM294.9 125.5L320 136L345.1 125.5C391.9 106 442.1 96 492.8 96L528 96C554.5 96 576 117.5 576 144L576 496C576 522.5 554.5 544 528 544L492.8 544C442.1 544 391.9 554 345.1 573.5L332.3 578.8C324.4 582.1 315.6 582.1 307.7 578.8L294.9 573.5C248.1 554 197.9 544 147.2 544L112 544C85.5 544 64 522.5 64 496L64 144C64 117.5 85.5 96 112 96L147.2 96C197.9 96 248.1 106 294.9 125.5z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"] }]
+        }] });
+
+class BoxSoIcon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BoxSoIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: BoxSoIcon, isStandalone: true, selector: "dma-icon[dma-box-so-icon]", ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M465.4 192L431.1 144L209 144L174.7 192L465.4 192zM96 212.5C96 199.2 100.2 186.2 107.9 175.3L156.9 106.8C168.9 90 188.3 80 208.9 80L431 80C451.7 80 471.1 90 483.1 106.8L532 175.3C539.8 186.2 543.9 199.2 543.9 212.5L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 212.5z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CircleUserIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BoxSoIcon, decorators: [{
             type: Component,
-            args: [{ selector: 'dma-icon[dma-circle-user-icon]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M463 448.2C440.9 409.8 399.4 384 352 384L288 384C240.6 384 199.1 409.8 177 448.2C212.2 487.4 263.2 512 320 512C376.8 512 427.8 487.3 463 448.2zM64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320zM320 336C359.8 336 392 303.8 392 264C392 224.2 359.8 192 320 192C280.2 192 248 224.2 248 264C248 303.8 280.2 336 320 336z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"] }]
+            args: [{ selector: 'dma-icon[dma-box-so-icon]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M465.4 192L431.1 144L209 144L174.7 192L465.4 192zM96 212.5C96 199.2 100.2 186.2 107.9 175.3L156.9 106.8C168.9 90 188.3 80 208.9 80L431 80C451.7 80 471.1 90 483.1 106.8L532 175.3C539.8 186.2 543.9 199.2 543.9 212.5L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 212.5z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"] }]
+        }] });
+
+class CheckSoIcon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CheckSoIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: CheckSoIcon, isStandalone: true, selector: "dma-icon[dma-check-so-icon]", ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M530.8 134.1C545.1 144.5 548.3 164.5 537.9 178.8L281.9 530.8C276.4 538.4 267.9 543.1 258.5 543.9C249.1 544.7 240 541.2 233.4 534.6L105.4 406.6C92.9 394.1 92.9 373.8 105.4 361.3C117.9 348.8 138.2 348.8 150.7 361.3L252.2 462.8L486.2 141.1C496.6 126.8 516.6 123.6 530.9 134z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CheckSoIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'dma-icon[dma-check-so-icon]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M530.8 134.1C545.1 144.5 548.3 164.5 537.9 178.8L281.9 530.8C276.4 538.4 267.9 543.1 258.5 543.9C249.1 544.7 240 541.2 233.4 534.6L105.4 406.6C92.9 394.1 92.9 373.8 105.4 361.3C117.9 348.8 138.2 348.8 150.7 361.3L252.2 462.8L486.2 141.1C496.6 126.8 516.6 123.6 530.9 134z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"] }]
+        }] });
+
+class CircleUserSoIcon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CircleUserSoIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: CircleUserSoIcon, isStandalone: true, selector: "dma-icon[dma-circle-user-so-icon]", ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M463 448.2C440.9 409.8 399.4 384 352 384L288 384C240.6 384 199.1 409.8 177 448.2C212.2 487.4 263.2 512 320 512C376.8 512 427.8 487.3 463 448.2zM64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320zM320 336C359.8 336 392 303.8 392 264C392 224.2 359.8 192 320 192C280.2 192 248 224.2 248 264C248 303.8 280.2 336 320 336z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CircleUserSoIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'dma-icon[dma-circle-user-so-icon]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M463 448.2C440.9 409.8 399.4 384 352 384L288 384C240.6 384 199.1 409.8 177 448.2C212.2 487.4 263.2 512 320 512C376.8 512 427.8 487.3 463 448.2zM64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320zM320 336C359.8 336 392 303.8 392 264C392 224.2 359.8 192 320 192C280.2 192 248 224.2 248 264C248 303.8 280.2 336 320 336z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"] }]
+        }] });
+
+class CloneSoIcon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CloneSoIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: CloneSoIcon, isStandalone: true, selector: "dma-icon[dma-clone-so-icon]", ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M352 512L128 512L128 288L176 288L176 224L128 224C92.7 224 64 252.7 64 288L64 512C64 547.3 92.7 576 128 576L352 576C387.3 576 416 547.3 416 512L416 464L352 464L352 512zM288 416L512 416C547.3 416 576 387.3 576 352L576 128C576 92.7 547.3 64 512 64L288 64C252.7 64 224 92.7 224 128L224 352C224 387.3 252.7 416 288 416z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CloneSoIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'dma-icon[dma-clone-so-icon]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M352 512L128 512L128 288L176 288L176 224L128 224C92.7 224 64 252.7 64 288L64 512C64 547.3 92.7 576 128 576L352 576C387.3 576 416 547.3 416 512L416 464L352 464L352 512zM288 416L512 416C547.3 416 576 387.3 576 352L576 128C576 92.7 547.3 64 512 64L288 64C252.7 64 224 92.7 224 128L224 352C224 387.3 252.7 416 288 416z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"] }]
+        }] });
+
+class EyeSlashSoIcon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EyeSlashSoIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: EyeSlashSoIcon, isStandalone: true, selector: "dma-icon[dma-eye-slash-so-icon]", ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M73 39.1C63.6 29.7 48.4 29.7 39.1 39.1C29.8 48.5 29.7 63.7 39 73.1L567 601.1C576.4 610.5 591.6 610.5 600.9 601.1C610.2 591.7 610.3 576.5 600.9 567.2L504.5 470.8C507.2 468.4 509.9 466 512.5 463.6C559.3 420.1 590.6 368.2 605.5 332.5C608.8 324.6 608.8 315.8 605.5 307.9C590.6 272.2 559.3 220.2 512.5 176.8C465.4 133.1 400.7 96.2 319.9 96.2C263.1 96.2 214.3 114.4 173.9 140.4L73 39.1zM236.5 202.7C260 185.9 288.9 176 320 176C399.5 176 464 240.5 464 320C464 351.1 454.1 379.9 437.3 403.5L402.6 368.8C415.3 347.4 419.6 321.1 412.7 295.1C399 243.9 346.3 213.5 295.1 227.2C286.5 229.5 278.4 232.9 271.1 237.2L236.4 202.5zM357.3 459.1C345.4 462.3 332.9 464 320 464C240.5 464 176 399.5 176 320C176 307.1 177.7 294.6 180.9 282.7L101.4 203.2C68.8 240 46.4 279 34.5 307.7C31.2 315.6 31.2 324.4 34.5 332.3C49.4 368 80.7 420 127.5 463.4C174.6 507.1 239.3 544 320.1 544C357.4 544 391.3 536.1 421.6 523.4L357.4 459.2z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EyeSlashSoIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'dma-icon[dma-eye-slash-so-icon]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M73 39.1C63.6 29.7 48.4 29.7 39.1 39.1C29.8 48.5 29.7 63.7 39 73.1L567 601.1C576.4 610.5 591.6 610.5 600.9 601.1C610.2 591.7 610.3 576.5 600.9 567.2L504.5 470.8C507.2 468.4 509.9 466 512.5 463.6C559.3 420.1 590.6 368.2 605.5 332.5C608.8 324.6 608.8 315.8 605.5 307.9C590.6 272.2 559.3 220.2 512.5 176.8C465.4 133.1 400.7 96.2 319.9 96.2C263.1 96.2 214.3 114.4 173.9 140.4L73 39.1zM236.5 202.7C260 185.9 288.9 176 320 176C399.5 176 464 240.5 464 320C464 351.1 454.1 379.9 437.3 403.5L402.6 368.8C415.3 347.4 419.6 321.1 412.7 295.1C399 243.9 346.3 213.5 295.1 227.2C286.5 229.5 278.4 232.9 271.1 237.2L236.4 202.5zM357.3 459.1C345.4 462.3 332.9 464 320 464C240.5 464 176 399.5 176 320C176 307.1 177.7 294.6 180.9 282.7L101.4 203.2C68.8 240 46.4 279 34.5 307.7C31.2 315.6 31.2 324.4 34.5 332.3C49.4 368 80.7 420 127.5 463.4C174.6 507.1 239.3 544 320.1 544C357.4 544 391.3 536.1 421.6 523.4L357.4 459.2z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"] }]
+        }] });
+
+class EyeSoIcon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EyeSoIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: EyeSoIcon, isStandalone: true, selector: "dma-icon[dma-eye-so-icon]", ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M320 96C239.2 96 174.5 132.8 127.4 176.6C80.6 220.1 49.3 272 34.4 307.7C31.1 315.6 31.1 324.4 34.4 332.3C49.3 368 80.6 420 127.4 463.4C174.5 507.1 239.2 544 320 544C400.8 544 465.5 507.2 512.6 463.4C559.4 419.9 590.7 368 605.6 332.3C608.9 324.4 608.9 315.6 605.6 307.7C590.7 272 559.4 220 512.6 176.6C465.5 132.9 400.8 96 320 96zM176 320C176 240.5 240.5 176 320 176C399.5 176 464 240.5 464 320C464 399.5 399.5 464 320 464C240.5 464 176 399.5 176 320zM320 256C320 291.3 291.3 320 256 320C244.5 320 233.7 317 224.3 311.6C223.3 322.5 224.2 333.7 227.2 344.8C240.9 396 293.6 426.4 344.8 412.7C396 399 426.4 346.3 412.7 295.1C400.5 249.4 357.2 220.3 311.6 224.3C316.9 233.6 320 244.4 320 256z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EyeSoIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'dma-icon[dma-eye-so-icon]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M320 96C239.2 96 174.5 132.8 127.4 176.6C80.6 220.1 49.3 272 34.4 307.7C31.1 315.6 31.1 324.4 34.4 332.3C49.3 368 80.6 420 127.4 463.4C174.5 507.1 239.2 544 320 544C400.8 544 465.5 507.2 512.6 463.4C559.4 419.9 590.7 368 605.6 332.3C608.9 324.4 608.9 315.6 605.6 307.7C590.7 272 559.4 220 512.6 176.6C465.5 132.9 400.8 96 320 96zM176 320C176 240.5 240.5 176 320 176C399.5 176 464 240.5 464 320C464 399.5 399.5 464 320 464C240.5 464 176 399.5 176 320zM320 256C320 291.3 291.3 320 256 320C244.5 320 233.7 317 224.3 311.6C223.3 322.5 224.2 333.7 227.2 344.8C240.9 396 293.6 426.4 344.8 412.7C396 399 426.4 346.3 412.7 295.1C400.5 249.4 357.2 220.3 311.6 224.3C316.9 233.6 320 244.4 320 256z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"] }]
+        }] });
+
+class FileLinesSoIcon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FileLinesSoIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: FileLinesSoIcon, isStandalone: true, selector: "dma-icon[dma-file-lines-so-icon]", ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M128 128C128 92.7 156.7 64 192 64L341.5 64C358.5 64 374.8 70.7 386.8 82.7L493.3 189.3C505.3 201.3 512 217.6 512 234.6L512 512C512 547.3 483.3 576 448 576L192 576C156.7 576 128 547.3 128 512L128 128zM336 122.5L336 216C336 229.3 346.7 240 360 240L453.5 240L336 122.5zM248 320C234.7 320 224 330.7 224 344C224 357.3 234.7 368 248 368L392 368C405.3 368 416 357.3 416 344C416 330.7 405.3 320 392 320L248 320zM248 416C234.7 416 224 426.7 224 440C224 453.3 234.7 464 248 464L392 464C405.3 464 416 453.3 416 440C416 426.7 405.3 416 392 416L248 416z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FileLinesSoIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'dma-icon[dma-file-lines-so-icon]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M128 128C128 92.7 156.7 64 192 64L341.5 64C358.5 64 374.8 70.7 386.8 82.7L493.3 189.3C505.3 201.3 512 217.6 512 234.6L512 512C512 547.3 483.3 576 448 576L192 576C156.7 576 128 547.3 128 512L128 128zM336 122.5L336 216C336 229.3 346.7 240 360 240L453.5 240L336 122.5zM248 320C234.7 320 224 330.7 224 344C224 357.3 234.7 368 248 368L392 368C405.3 368 416 357.3 416 344C416 330.7 405.3 320 392 320L248 320zM248 416C234.7 416 224 426.7 224 440C224 453.3 234.7 464 248 464L392 464C405.3 464 416 453.3 416 440C416 426.7 405.3 416 392 416L248 416z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"] }]
+        }] });
+
+class FileSoIcon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FileSoIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: FileSoIcon, isStandalone: true, selector: "dma-icon[dma-file-so-icon]", ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M192 64C156.7 64 128 92.7 128 128L128 512C128 547.3 156.7 576 192 576L448 576C483.3 576 512 547.3 512 512L512 234.5C512 217.5 505.3 201.2 493.3 189.2L386.7 82.7C374.7 70.7 358.5 64 341.5 64L192 64zM453.5 240L360 240C346.7 240 336 229.3 336 216L336 122.5L453.5 240z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FileSoIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'dma-icon[dma-file-so-icon]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M192 64C156.7 64 128 92.7 128 128L128 512C128 547.3 156.7 576 192 576L448 576C483.3 576 512 547.3 512 512L512 234.5C512 217.5 505.3 201.2 493.3 189.2L386.7 82.7C374.7 70.7 358.5 64 341.5 64L192 64zM453.5 240L360 240C346.7 240 336 229.3 336 216L336 122.5L453.5 240z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"] }]
+        }] });
+
+class FloppyDiskSoIcon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FloppyDiskSoIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: FloppyDiskSoIcon, isStandalone: true, selector: "dma-icon[dma-floppy-disk-so-icon]", ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M160 96C124.7 96 96 124.7 96 160L96 480C96 515.3 124.7 544 160 544L480 544C515.3 544 544 515.3 544 480L544 237.3C544 220.3 537.3 204 525.3 192L448 114.7C436 102.7 419.7 96 402.7 96L160 96zM192 192C192 174.3 206.3 160 224 160L384 160C401.7 160 416 174.3 416 192L416 256C416 273.7 401.7 288 384 288L224 288C206.3 288 192 273.7 192 256L192 192zM320 352C355.3 352 384 380.7 384 416C384 451.3 355.3 480 320 480C284.7 480 256 451.3 256 416C256 380.7 284.7 352 320 352z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FloppyDiskSoIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'dma-icon[dma-floppy-disk-so-icon]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M160 96C124.7 96 96 124.7 96 160L96 480C96 515.3 124.7 544 160 544L480 544C515.3 544 544 515.3 544 480L544 237.3C544 220.3 537.3 204 525.3 192L448 114.7C436 102.7 419.7 96 402.7 96L160 96zM192 192C192 174.3 206.3 160 224 160L384 160C401.7 160 416 174.3 416 192L416 256C416 273.7 401.7 288 384 288L224 288C206.3 288 192 273.7 192 256L192 192zM320 352C355.3 352 384 380.7 384 416C384 451.3 355.3 480 320 480C284.7 480 256 451.3 256 416C256 380.7 284.7 352 320 352z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"] }]
+        }] });
+
+class PlusSoIcon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PlusSoIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: PlusSoIcon, isStandalone: true, selector: "dma-icon[dma-plus-so-icon]", ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M352 128C352 110.3 337.7 96 320 96C302.3 96 288 110.3 288 128L288 288L128 288C110.3 288 96 302.3 96 320C96 337.7 110.3 352 128 352L288 352L288 512C288 529.7 302.3 544 320 544C337.7 544 352 529.7 352 512L352 352L512 352C529.7 352 544 337.7 544 320C544 302.3 529.7 288 512 288L352 288L352 128z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PlusSoIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'dma-icon[dma-plus-so-icon]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M352 128C352 110.3 337.7 96 320 96C302.3 96 288 110.3 288 128L288 288L128 288C110.3 288 96 302.3 96 320C96 337.7 110.3 352 128 352L288 352L288 512C288 529.7 302.3 544 320 544C337.7 544 352 529.7 352 512L352 352L512 352C529.7 352 544 337.7 544 320C544 302.3 529.7 288 512 288L352 288L352 128z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"] }]
+        }] });
+
+class TrashCanSoIcon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TrashCanSoIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: TrashCanSoIcon, isStandalone: true, selector: "dma-icon[dma-trash-can-so-icon]", ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M232.7 69.9C237.1 56.8 249.3 48 263.1 48L377 48C390.8 48 403 56.8 407.4 69.9L416 96L512 96C529.7 96 544 110.3 544 128C544 145.7 529.7 160 512 160L128 160C110.3 160 96 145.7 96 128C96 110.3 110.3 96 128 96L224 96L232.7 69.9zM128 208L512 208L512 512C512 547.3 483.3 576 448 576L192 576C156.7 576 128 547.3 128 512L128 208zM216 272C202.7 272 192 282.7 192 296L192 488C192 501.3 202.7 512 216 512C229.3 512 240 501.3 240 488L240 296C240 282.7 229.3 272 216 272zM320 272C306.7 272 296 282.7 296 296L296 488C296 501.3 306.7 512 320 512C333.3 512 344 501.3 344 488L344 296C344 282.7 333.3 272 320 272zM424 272C410.7 272 400 282.7 400 296L400 488C400 501.3 410.7 512 424 512C437.3 512 448 501.3 448 488L448 296C448 282.7 437.3 272 424 272z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TrashCanSoIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'dma-icon[dma-trash-can-so-icon]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M232.7 69.9C237.1 56.8 249.3 48 263.1 48L377 48C390.8 48 403 56.8 407.4 69.9L416 96L512 96C529.7 96 544 110.3 544 128C544 145.7 529.7 160 512 160L128 160C110.3 160 96 145.7 96 128C96 110.3 110.3 96 128 96L224 96L232.7 69.9zM128 208L512 208L512 512C512 547.3 483.3 576 448 576L192 576C156.7 576 128 547.3 128 512L128 208zM216 272C202.7 272 192 282.7 192 296L192 488C192 501.3 202.7 512 216 512C229.3 512 240 501.3 240 488L240 296C240 282.7 229.3 272 216 272zM320 272C306.7 272 296 282.7 296 296L296 488C296 501.3 306.7 512 320 512C333.3 512 344 501.3 344 488L344 296C344 282.7 333.3 272 320 272zM424 272C410.7 272 400 282.7 400 296L400 488C400 501.3 410.7 512 424 512C437.3 512 448 501.3 448 488L448 296C448 282.7 437.3 272 424 272z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"] }]
+        }] });
+
+class TrashSoIcon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TrashSoIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: TrashSoIcon, isStandalone: true, selector: "dma-icon[dma-trash-so-icon]", ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M232.7 69.9L224 96L128 96C110.3 96 96 110.3 96 128C96 145.7 110.3 160 128 160L512 160C529.7 160 544 145.7 544 128C544 110.3 529.7 96 512 96L416 96L407.3 69.9C402.9 56.8 390.7 48 376.9 48L263.1 48C249.3 48 237.1 56.8 232.7 69.9zM512 208L128 208L149.1 531.1C150.7 556.4 171.7 576 197 576L443 576C468.3 576 489.3 556.4 490.9 531.1L512 208z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TrashSoIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'dma-icon[dma-trash-so-icon]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M232.7 69.9L224 96L128 96C110.3 96 96 110.3 96 128C96 145.7 110.3 160 128 160L512 160C529.7 160 544 145.7 544 128C544 110.3 529.7 96 512 96L416 96L407.3 69.9C402.9 56.8 390.7 48 376.9 48L263.1 48C249.3 48 237.1 56.8 232.7 69.9zM512 208L128 208L149.1 531.1C150.7 556.4 171.7 576 197 576L443 576C468.3 576 489.3 556.4 490.9 531.1L512 208z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"] }]
+        }] });
+
+class UsersSoIcon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UsersSoIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: UsersSoIcon, isStandalone: true, selector: "dma-icon[dma-users-so-icon]", ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M320 80C377.4 80 424 126.6 424 184C424 241.4 377.4 288 320 288C262.6 288 216 241.4 216 184C216 126.6 262.6 80 320 80zM96 152C135.8 152 168 184.2 168 224C168 263.8 135.8 296 96 296C56.2 296 24 263.8 24 224C24 184.2 56.2 152 96 152zM0 480C0 409.3 57.3 352 128 352C140.8 352 153.2 353.9 164.9 357.4C132 394.2 112 442.8 112 496L112 512C112 523.4 114.4 534.2 118.7 544L32 544C14.3 544 0 529.7 0 512L0 480zM521.3 544C525.6 534.2 528 523.4 528 512L528 496C528 442.8 508 394.2 475.1 357.4C486.8 353.9 499.2 352 512 352C582.7 352 640 409.3 640 480L640 512C640 529.7 625.7 544 608 544L521.3 544zM472 224C472 184.2 504.2 152 544 152C583.8 152 616 184.2 616 224C616 263.8 583.8 296 544 296C504.2 296 472 263.8 472 224zM160 496C160 407.6 231.6 336 320 336C408.4 336 480 407.6 480 496L480 512C480 529.7 465.7 544 448 544L192 544C174.3 544 160 529.7 160 512L160 496z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UsersSoIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'dma-icon[dma-users-so-icon]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M320 80C377.4 80 424 126.6 424 184C424 241.4 377.4 288 320 288C262.6 288 216 241.4 216 184C216 126.6 262.6 80 320 80zM96 152C135.8 152 168 184.2 168 224C168 263.8 135.8 296 96 296C56.2 296 24 263.8 24 224C24 184.2 56.2 152 96 152zM0 480C0 409.3 57.3 352 128 352C140.8 352 153.2 353.9 164.9 357.4C132 394.2 112 442.8 112 496L112 512C112 523.4 114.4 534.2 118.7 544L32 544C14.3 544 0 529.7 0 512L0 480zM521.3 544C525.6 534.2 528 523.4 528 512L528 496C528 442.8 508 394.2 475.1 357.4C486.8 353.9 499.2 352 512 352C582.7 352 640 409.3 640 480L640 512C640 529.7 625.7 544 608 544L521.3 544zM472 224C472 184.2 504.2 152 544 152C583.8 152 616 184.2 616 224C616 263.8 583.8 296 544 296C504.2 296 472 263.8 472 224zM160 496C160 407.6 231.6 336 320 336C408.4 336 480 407.6 480 496L480 512C480 529.7 465.7 544 448 544L192 544C174.3 544 160 529.7 160 512L160 496z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"] }]
+        }] });
+
+class WandMagicSparklesSoIcon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: WandMagicSparklesSoIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: WandMagicSparklesSoIcon, isStandalone: true, selector: "dma-icon[dma-wand-magic-sparkles-so-icon]", ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M295.4 37L310.2 73.8L347 88.6C350 89.8 352 92.8 352 96C352 99.2 350 102.2 347 103.4L310.2 118.2L295.4 155C294.2 158 291.2 160 288 160C284.8 160 281.8 158 280.6 155L265.8 118.2L229 103.4C226 102.2 224 99.2 224 96C224 92.8 226 89.8 229 88.6L265.8 73.8L280.6 37C281.8 34 284.8 32 288 32C291.2 32 294.2 34 295.4 37zM142.7 105.7L164.2 155.8L214.3 177.3C220.2 179.8 224 185.6 224 192C224 198.4 220.2 204.2 214.3 206.7L164.2 228.2L142.7 278.3C140.2 284.2 134.4 288 128 288C121.6 288 115.8 284.2 113.3 278.3L91.8 228.2L41.7 206.7C35.8 204.2 32 198.4 32 192C32 185.6 35.8 179.8 41.7 177.3L91.8 155.8L113.3 105.7C115.8 99.8 121.6 96 128 96C134.4 96 140.2 99.8 142.7 105.7zM496 368C502.4 368 508.2 371.8 510.7 377.7L532.2 427.8L582.3 449.3C588.2 451.8 592 457.6 592 464C592 470.4 588.2 476.2 582.3 478.7L532.2 500.2L510.7 550.3C508.2 556.2 502.4 560 496 560C489.6 560 483.8 556.2 481.3 550.3L459.8 500.2L409.7 478.7C403.8 476.2 400 470.4 400 464C400 457.6 403.8 451.8 409.7 449.3L459.8 427.8L481.3 377.7C483.8 371.8 489.6 368 496 368zM492 64C503 64 513.6 68.4 521.5 76.2L563.8 118.5C571.6 126.4 576 137 576 148C576 159 571.6 169.6 563.8 177.5L475.6 265.7L374.3 164.4L462.5 76.2C470.4 68.4 481 64 492 64zM76.2 462.5L340.4 198.3L441.7 299.6L177.5 563.8C169.6 571.6 159 576 148 576C137 576 126.4 571.6 118.5 563.8L76.2 521.5C68.4 513.6 64 503 64 492C64 481 68.4 470.4 76.2 462.5z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: WandMagicSparklesSoIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'dma-icon[dma-wand-magic-sparkles-so-icon]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M295.4 37L310.2 73.8L347 88.6C350 89.8 352 92.8 352 96C352 99.2 350 102.2 347 103.4L310.2 118.2L295.4 155C294.2 158 291.2 160 288 160C284.8 160 281.8 158 280.6 155L265.8 118.2L229 103.4C226 102.2 224 99.2 224 96C224 92.8 226 89.8 229 88.6L265.8 73.8L280.6 37C281.8 34 284.8 32 288 32C291.2 32 294.2 34 295.4 37zM142.7 105.7L164.2 155.8L214.3 177.3C220.2 179.8 224 185.6 224 192C224 198.4 220.2 204.2 214.3 206.7L164.2 228.2L142.7 278.3C140.2 284.2 134.4 288 128 288C121.6 288 115.8 284.2 113.3 278.3L91.8 228.2L41.7 206.7C35.8 204.2 32 198.4 32 192C32 185.6 35.8 179.8 41.7 177.3L91.8 155.8L113.3 105.7C115.8 99.8 121.6 96 128 96C134.4 96 140.2 99.8 142.7 105.7zM496 368C502.4 368 508.2 371.8 510.7 377.7L532.2 427.8L582.3 449.3C588.2 451.8 592 457.6 592 464C592 470.4 588.2 476.2 582.3 478.7L532.2 500.2L510.7 550.3C508.2 556.2 502.4 560 496 560C489.6 560 483.8 556.2 481.3 550.3L459.8 500.2L409.7 478.7C403.8 476.2 400 470.4 400 464C400 457.6 403.8 451.8 409.7 449.3L459.8 427.8L481.3 377.7C483.8 371.8 489.6 368 496 368zM492 64C503 64 513.6 68.4 521.5 76.2L563.8 118.5C571.6 126.4 576 137 576 148C576 159 571.6 169.6 563.8 177.5L475.6 265.7L374.3 164.4L462.5 76.2C470.4 68.4 481 64 492 64zM76.2 462.5L340.4 198.3L441.7 299.6L177.5 563.8C169.6 571.6 159 576 148 576C137 576 126.4 571.6 118.5 563.8L76.2 521.5C68.4 513.6 64 503 64 492C64 481 68.4 470.4 76.2 462.5z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"] }]
+        }] });
+
+class XmarkSoIcon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XmarkSoIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: XmarkSoIcon, isStandalone: true, selector: "dma-icon[dma-xmark-so-icon]", ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M183.1 137.4C170.6 124.9 150.3 124.9 137.8 137.4C125.3 149.9 125.3 170.2 137.8 182.7L275.2 320L137.9 457.4C125.4 469.9 125.4 490.2 137.9 502.7C150.4 515.2 170.7 515.2 183.2 502.7L320.5 365.3L457.9 502.6C470.4 515.1 490.7 515.1 503.2 502.6C515.7 490.1 515.7 469.8 503.2 457.3L365.8 320L503.1 182.6C515.6 170.1 515.6 149.8 503.1 137.3C490.6 124.8 470.3 124.8 457.8 137.3L320.5 274.7L183.1 137.4z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XmarkSoIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'dma-icon[dma-xmark-so-icon]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M183.1 137.4C170.6 124.9 150.3 124.9 137.8 137.4C125.3 149.9 125.3 170.2 137.8 182.7L275.2 320L137.9 457.4C125.4 469.9 125.4 490.2 137.9 502.7C150.4 515.2 170.7 515.2 183.2 502.7L320.5 365.3L457.9 502.6C470.4 515.1 490.7 515.1 503.2 502.6C515.7 490.1 515.7 469.8 503.2 457.3L365.8 320L503.1 182.6C515.6 170.1 515.6 149.8 503.1 137.3C490.6 124.8 470.3 124.8 457.8 137.3L320.5 274.7L183.1 137.4z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"] }]
+        }] });
+
+class TrailingIconDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TrailingIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: TrailingIconDirective, isStandalone: true, selector: "[dmaTrailingIcon]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TrailingIconDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[dmaTrailingIcon]' }]
         }] });
 
 class ActiveMarkerComponent {
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
     active = input(false, { ...(ngDevMode ? { debugName: "active" } : {}), transform: booleanAttribute });
-    inactive = computed(() => !this.active(), ...(ngDevMode ? [{ debugName: "inactive" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ActiveMarkerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ActiveMarkerComponent, isStandalone: true, selector: "dma-active-marker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.text-neutral-600": "inactive()", "class.font-normal": "inactive()", "class.font-semibold": "active()" }, classAttribute: "block" }, ngImport: i0, template: "<!--\n    Using an invisible element with the label set to the active state so that\n    the element already takes all the space it needs and doesn't shift other elements around when it becomes active\n-->\n<div class=\"grid grid-cols-1 grid-rows-1 place-items-center\">\n    <span class=\"font-bold invisible col-1 row-1\">{{ label() }}</span>\n    <span class=\"col-1 row-1\">{{ label() }}</span>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ActiveMarkerComponent, isStandalone: true, selector: "dma-active-marker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.active": "active()" } }, ngImport: i0, template: "<!--\n    Using an invisible element with the label set to the active state so that\n    the element already takes all the space it needs and doesn't shift other elements around when it becomes active\n-->\n<span class=\"label-spacer\">{{ label() }}</span>\n<span>{{ label() }}</span>\n", styles: [":host{display:grid;place-items:center;color:#525252;font-weight:400}:host.active{color:#171717;font-weight:600}:host span{grid-column:1;grid-row:1}:host span.label-spacer{visibility:hidden;font-weight:600}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ActiveMarkerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dma-active-marker', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        'class': 'block',
-                        '[class.text-neutral-600]': 'inactive()',
-                        '[class.font-normal]': 'inactive()',
-                        '[class.font-semibold]': 'active()',
-                    }, imports: [], template: "<!--\n    Using an invisible element with the label set to the active state so that\n    the element already takes all the space it needs and doesn't shift other elements around when it becomes active\n-->\n<div class=\"grid grid-cols-1 grid-rows-1 place-items-center\">\n    <span class=\"font-bold invisible col-1 row-1\">{{ label() }}</span>\n    <span class=\"col-1 row-1\">{{ label() }}</span>\n</div>\n" }]
+                        '[class.active]': 'active()',
+                    }, imports: [], template: "<!--\n    Using an invisible element with the label set to the active state so that\n    the element already takes all the space it needs and doesn't shift other elements around when it becomes active\n-->\n<span class=\"label-spacer\">{{ label() }}</span>\n<span>{{ label() }}</span>\n", styles: [":host{display:grid;place-items:center;color:#525252;font-weight:400}:host.active{color:#171717;font-weight:600}:host span{grid-column:1;grid-row:1}:host span.label-spacer{visibility:hidden;font-weight:600}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }] } });
 
 const SectionPositions = {
@@ -277,50 +528,34 @@ function sectionPositionAttribute(value) {
 
 class AppTopBarSectionComponent {
     position = input(SectionPositions.START, { ...(ngDevMode ? { debugName: "position" } : {}), transform: sectionPositionAttribute });
-    positionedAtStart = computed(() => this.position() === SectionPositions.START, ...(ngDevMode ? [{ debugName: "positionedAtStart" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AppTopBarSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: AppTopBarSectionComponent, isStandalone: true, selector: "dma-app-top-bar-section", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.grow-1": "positionedAtStart()" }, classAttribute: "flex items-center gap-3" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: AppTopBarSectionComponent, isStandalone: true, selector: "dma-app-top-bar-section", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.position": "position()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:flex;align-items:center;gap:.75rem;flex-shrink:0}:host[position=start]{flex-grow:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AppTopBarSectionComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'dma-app-top-bar-section',
-                    template: `<ng-content />`,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        'class': 'flex items-center gap-3',
-                        '[class.grow-1]': 'positionedAtStart()',
-                    },
-                    imports: [],
-                }]
+            args: [{ selector: 'dma-app-top-bar-section', template: `<ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.position]': 'position()',
+                    }, imports: [], styles: [":host{display:flex;align-items:center;gap:.75rem;flex-shrink:0}:host[position=start]{flex-grow:1}\n"] }]
         }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
 
 class AppTopBarComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AppTopBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: AppTopBarComponent, isStandalone: true, selector: "dma-app-top-bar", host: { classAttribute: "px-3 py-2 flex justify-between items-center border-b border-b-neutral-200 bg-neutral-100" }, ngImport: i0, template: `<ng-content select="dma-app-top-bar-section" />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: AppTopBarComponent, isStandalone: true, selector: "dma-app-top-bar", ngImport: i0, template: `<ng-content select="dma-app-top-bar-section" />`, isInline: true, styles: [":host{display:flex;justify-content:space-between;align-items:center;background-color:#fafafa;border-bottom:1px solid oklch(92.2% 0 0deg);padding:.375rem .5rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AppTopBarComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'dma-app-top-bar',
-                    template: `<ng-content select="dma-app-top-bar-section" />`,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        class: 'px-3 py-2 flex justify-between items-center border-b border-b-neutral-200 bg-neutral-100',
-                    },
-                    imports: [],
-                }]
+            args: [{ selector: 'dma-app-top-bar', template: `<ng-content select="dma-app-top-bar-section" />`, changeDetection: ChangeDetectionStrategy.OnPush, imports: [], styles: [":host{display:flex;justify-content:space-between;align-items:center;background-color:#fafafa;border-bottom:1px solid oklch(92.2% 0 0deg);padding:.375rem .5rem}\n"] }]
         }] });
 
 class NavbarBrandComponent {
     imgSrc = input.required(...(ngDevMode ? [{ debugName: "imgSrc" }] : []));
     brandName = input.required(...(ngDevMode ? [{ debugName: "brandName" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NavbarBrandComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: NavbarBrandComponent, isStandalone: true, selector: "dma-navbar-brand", inputs: { imgSrc: { classPropertyName: "imgSrc", publicName: "imgSrc", isSignal: true, isRequired: true, transformFunction: null }, brandName: { classPropertyName: "brandName", publicName: "brandName", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<a class=\"flex items-center gap-2\" routerLink=\"/\">\n    <img [src]=\"imgSrc()\" alt=\"Brand logo\" width=\"32\" height=\"32\" />\n    <span class=\"font-semibold text-2xl\">{{ brandName() }}</span>\n</a>\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: NavbarBrandComponent, isStandalone: true, selector: "dma-navbar-brand", inputs: { imgSrc: { classPropertyName: "imgSrc", publicName: "imgSrc", isSignal: true, isRequired: true, transformFunction: null }, brandName: { classPropertyName: "brandName", publicName: "brandName", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<a routerLink=\"/\">\n    <img [src]=\"imgSrc()\" alt=\"Brand logo\" width=\"32\" height=\"32\" />\n    <span>{{ brandName() }}</span>\n</a>\n", styles: [":host a{display:flex;align-items:center;gap:.5rem}:host a span{font-size:1.5rem;line-height:1.3333333333;font-weight:600}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NavbarBrandComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dma-navbar-brand', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink], template: "<a class=\"flex items-center gap-2\" routerLink=\"/\">\n    <img [src]=\"imgSrc()\" alt=\"Brand logo\" width=\"32\" height=\"32\" />\n    <span class=\"font-semibold text-2xl\">{{ brandName() }}</span>\n</a>\n" }]
+            args: [{ selector: 'dma-navbar-brand', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink], template: "<a routerLink=\"/\">\n    <img [src]=\"imgSrc()\" alt=\"Brand logo\" width=\"32\" height=\"32\" />\n    <span>{{ brandName() }}</span>\n</a>\n", styles: [":host a{display:flex;align-items:center;gap:.5rem}:host a span{font-size:1.5rem;line-height:1.3333333333;font-weight:600}\n"] }]
         }], propDecorators: { imgSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgSrc", required: true }] }], brandName: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandName", required: true }] }] } });
 
 class NavbarLinkComponent {
@@ -341,59 +576,41 @@ class NavbarLinkComponent {
         from(this.router.navigateByUrl(this.route())).pipe(takeUntilDestroyed(this.destroyRef)).subscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NavbarLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: NavbarLinkComponent, isStandalone: true, selector: "dma-navbar-link", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, classAttribute: "block rounded-md p-2 hover:bg-neutral-200 hover:text-neutral-900 active:bg-neutral-300 cursor-pointer" }, ngImport: i0, template: "<a [routerLink]=\"route()\">\n    <dma-active-marker [label]=\"label()\" [active]=\"isActive()\" />\n</a>\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ActiveMarkerComponent, selector: "dma-active-marker", inputs: ["label", "active"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: NavbarLinkComponent, isStandalone: true, selector: "dma-navbar-link", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "onClick()" } }, ngImport: i0, template: "<a [routerLink]=\"route()\">\n    <dma-active-marker [label]=\"label()\" [active]=\"isActive()\" />\n</a>\n", styles: [":host{display:block;border-radius:.75rem;padding:.375rem .75rem;cursor:pointer}:host:hover{background-color:#e5e5e5;color:#171717}:host:active{background-color:#d4d4d4}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ActiveMarkerComponent, selector: "dma-active-marker", inputs: ["label", "active"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NavbarLinkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dma-navbar-link', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        'class': 'block rounded-md p-2 hover:bg-neutral-200 hover:text-neutral-900 active:bg-neutral-300 cursor-pointer',
                         '(click)': 'onClick()',
-                    }, imports: [RouterLink, ActiveMarkerComponent], template: "<a [routerLink]=\"route()\">\n    <dma-active-marker [label]=\"label()\" [active]=\"isActive()\" />\n</a>\n" }]
+                    }, imports: [RouterLink, ActiveMarkerComponent], template: "<a [routerLink]=\"route()\">\n    <dma-active-marker [label]=\"label()\" [active]=\"isActive()\" />\n</a>\n", styles: [":host{display:block;border-radius:.75rem;padding:.375rem .75rem;cursor:pointer}:host:hover{background-color:#e5e5e5;color:#171717}:host:active{background-color:#d4d4d4}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], route: [{ type: i0.Input, args: [{ isSignal: true, alias: "route", required: true }] }] } });
 
 class NavbarMenuComponent {
     toggleOnHover = input(false, { ...(ngDevMode ? { debugName: "toggleOnHover" } : {}), transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NavbarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: NavbarMenuComponent, isStandalone: true, selector: "dma-navbar-menu", inputs: { toggleOnHover: { classPropertyName: "toggleOnHover", publicName: "toggleOnHover", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n    type=\"button\"\n    dma-button\n    #anchor=\"dmaDropdownAnchor\"\n    [toggleOnHover]=\"toggleOnHover()\"\n    [dmaDropdownAnchor]=\"dropdownContainer\"\n>\n    <ng-content select=\"dropdown-trigger\" />\n</button>\n\n<ng-template #dropdownContainer>\n    <dma-dropdown-container (hover)=\"anchor.scheduleHide(!$event)\">\n        <ng-content select=\"dropdown-menu\" />\n    </dma-dropdown-container>\n</ng-template>\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[dma-button]", inputs: ["dma-button"] }, { kind: "directive", type: DropdownAnchorDirective, selector: "[dmaDropdownAnchor]", inputs: ["dmaDropdownAnchor", "positions", "toggleOnHover"], outputs: ["dropdownToggle"], exportAs: ["dmaDropdownAnchor"] }, { kind: "component", type: DropdownContainerComponent, selector: "dma-dropdown-container", outputs: ["hover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: NavbarMenuComponent, isStandalone: true, selector: "dma-navbar-menu", inputs: { toggleOnHover: { classPropertyName: "toggleOnHover", publicName: "toggleOnHover", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n    type=\"button\"\n    dma-button\n    #anchor=\"dmaDropdownAnchor\"\n    [toggleOnHover]=\"toggleOnHover()\"\n    [dmaDropdownAnchor]=\"dropdownContainer\"\n>\n    <ng-content select=\"[dmaDropdownTrigger]\" />\n</button>\n\n<ng-template #dropdownContainer>\n    <dma-dropdown-container (hover)=\"anchor.scheduleClose(!$event)\">\n        <ng-content select=\"[dmaDropdownMenu]\" />\n    </dma-dropdown-container>\n</ng-template>\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[dma-button]", inputs: ["dma-button"] }, { kind: "directive", type: DropdownAnchorDirective, selector: "[dmaDropdownAnchor]", inputs: ["dmaDropdownAnchor", "positions", "toggleOnHover"], outputs: ["dropdownToggle"], exportAs: ["dmaDropdownAnchor"] }, { kind: "component", type: DropdownContainerComponent, selector: "dma-dropdown-container", outputs: ["hover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NavbarMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dma-navbar-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonComponent, DropdownAnchorDirective, DropdownContainerComponent, ActiveMarkerComponent], template: "<button\n    type=\"button\"\n    dma-button\n    #anchor=\"dmaDropdownAnchor\"\n    [toggleOnHover]=\"toggleOnHover()\"\n    [dmaDropdownAnchor]=\"dropdownContainer\"\n>\n    <ng-content select=\"dropdown-trigger\" />\n</button>\n\n<ng-template #dropdownContainer>\n    <dma-dropdown-container (hover)=\"anchor.scheduleHide(!$event)\">\n        <ng-content select=\"dropdown-menu\" />\n    </dma-dropdown-container>\n</ng-template>\n" }]
+            args: [{ selector: 'dma-navbar-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonComponent, DropdownAnchorDirective, DropdownContainerComponent], template: "<button\n    type=\"button\"\n    dma-button\n    #anchor=\"dmaDropdownAnchor\"\n    [toggleOnHover]=\"toggleOnHover()\"\n    [dmaDropdownAnchor]=\"dropdownContainer\"\n>\n    <ng-content select=\"[dmaDropdownTrigger]\" />\n</button>\n\n<ng-template #dropdownContainer>\n    <dma-dropdown-container (hover)=\"anchor.scheduleClose(!$event)\">\n        <ng-content select=\"[dmaDropdownMenu]\" />\n    </dma-dropdown-container>\n</ng-template>\n" }]
         }], propDecorators: { toggleOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleOnHover", required: false }] }] } });
 
 class NavbarComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: NavbarComponent, isStandalone: true, selector: "nav[dma-navbar]", host: { classAttribute: "flex items-center gap-4" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: NavbarComponent, isStandalone: true, selector: "nav[dma-navbar]", ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:flex;align-items:center;gap:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NavbarComponent, decorators: [{
             type: Component,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/component-selector
-                    selector: 'nav[dma-navbar]',
-                    template: `<ng-content />`,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        class: 'flex items-center gap-4',
-                    },
-                    imports: [],
-                }]
+            args: [{ selector: 'nav[dma-navbar]', template: `<ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, imports: [], styles: [":host{display:flex;align-items:center;gap:1rem}\n"] }]
         }] });
 
 class VerticalRuleComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: VerticalRuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: VerticalRuleComponent, isStandalone: true, selector: "dma-vr", host: { classAttribute: "inline-block h-[stretch] border-s border-s-neutral-500" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: VerticalRuleComponent, isStandalone: true, selector: "dma-vr", ngImport: i0, template: '', isInline: true, styles: [":host{display:inline-block;height:-webkit-fill-available;height:stretch;border-left:1px solid oklch(55.6% 0 0deg)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: VerticalRuleComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'dma-vr',
-                    template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        class: 'inline-block h-[stretch] border-s border-s-neutral-500',
-                    },
-                    imports: [],
-                }]
+            args: [{ selector: 'dma-vr', template: '', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], styles: [":host{display:inline-block;height:-webkit-fill-available;height:stretch;border-left:1px solid oklch(55.6% 0 0deg)}\n"] }]
         }] });
 
 /**
@@ -404,5 +621,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActiveMarkerComponent, AppTopBarComponent, AppTopBarSectionComponent, ButtonColors, ButtonComponent, CircleUserIcon, DEFAULT_BUTTON_COLOR, DEFAULT_DROPDOWN_POSITIONS, DEFAULT_SECTION_POSITION, DropdownAnchorDirective, DropdownContainerComponent, InputComponent, NavbarBrandComponent, NavbarComponent, NavbarLinkComponent, NavbarMenuComponent, SectionPositions, VerticalRuleComponent, buttonColorAttribute, sectionPositionAttribute };
+export { ActiveMarkerComponent, AngleDownSoIcon, AngleUpSoIcon, AppTopBarComponent, AppTopBarSectionComponent, ArrowRotateLeftSoIcon, BookOpenSoIcon, BoxSoIcon, ButtonColors, ButtonComponent, CheckSoIcon, CircleUserSoIcon, CloneReIcon, CloneSoIcon, DEFAULT_BUTTON_COLOR, DEFAULT_DROPDOWN_POSITIONS, DEFAULT_SECTION_POSITION, DropdownAnchorDirective, DropdownContainerComponent, DropdownMenuDirective, DropdownTriggerDirective, EyeReIcon, EyeSlashReIcon, EyeSlashSoIcon, EyeSoIcon, FileLinesReIcon, FileLinesSoIcon, FileReIcon, FileSoIcon, FloppyDiskReIcon, FloppyDiskSoIcon, InputComponent, LeadingIconDirective, NavbarBrandComponent, NavbarComponent, NavbarLinkComponent, NavbarMenuComponent, PlusSoIcon, SectionPositions, TrailingIconDirective, TrashCanReIcon, TrashCanSoIcon, TrashSoIcon, UsersSoIcon, VerticalRuleComponent, WandMagicSparklesSoIcon, XmarkSoIcon, buttonColorAttribute, sectionPositionAttribute };
 //# sourceMappingURL=dnd-mapp-shared-ui.mjs.map