@saitec/ui 0.1.0

package/fesm2022/saitec-ui-drawer.mjs

@@ -0,0 +1,96 @@
+import * as i0 from '@angular/core';
+import { inject, model, input, output, effect, HostListener, ChangeDetectionStrategy, Component } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+
+class SuiDrawer {
+    document = inject(DOCUMENT);
+    visible = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    position = input('right', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    header = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "header" }] : /* istanbul ignore next */ []));
+    modal = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "modal" }] : /* istanbul ignore next */ []));
+    dismissible = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
+    closeOnEscape = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
+    showCloseButton = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showCloseButton" }] : /* istanbul ignore next */ []));
+    blockScroll = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "blockScroll" }] : /* istanbul ignore next */ []));
+    size = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
+    opened = output();
+    closed = output();
+    previousBodyOverflow;
+    constructor() {
+        effect(() => {
+            const visible = this.visible();
+            this.updateBodyScroll(visible);
+        });
+    }
+    handleEscape() {
+        if (this.visible() &&
+            this.closeOnEscape()) {
+            this.close();
+        }
+    }
+    handleBackdrop() {
+        if (this.modal() &&
+            this.dismissible()) {
+            this.close();
+        }
+    }
+    close() {
+        if (!this.visible()) {
+            return;
+        }
+        this.visible.set(false);
+        this.closed.emit();
+    }
+    open() {
+        if (this.visible()) {
+            return;
+        }
+        this.visible.set(true);
+        this.opened.emit();
+    }
+    updateBodyScroll(visible) {
+        if (!this.blockScroll()) {
+            return;
+        }
+        const body = this.document.body;
+        if (visible) {
+            this.previousBodyOverflow = body.style.overflow;
+            body.style.overflow = 'hidden';
+        }
+        else {
+            body.style.overflow =
+                this.previousBodyOverflow ?? '';
+        }
+    }
+    ngOnDestroy() {
+        if (this.blockScroll()) {
+            this.document.body.style.overflow =
+                this.previousBodyOverflow ?? '';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SuiDrawer, isStandalone: true, selector: "sui-drawer", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, blockScroll: { classPropertyName: "blockScroll", publicName: "blockScroll", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", opened: "opened", closed: "closed" }, host: { listeners: { "document:keydown.escape": "handleEscape()" } }, ngImport: i0, template: "<div\n    class=\"sui-drawer-overlay\"\n    [class.sui-drawer-overlay-visible]=\"visible()\"\n    [class.sui-drawer-overlay-modal]=\"modal()\"\n    [attr.aria-hidden]=\"!visible()\"\n    (click)=\"handleBackdrop()\">\n\n    <aside\n        class=\"sui-drawer\"\n        [class.sui-drawer-visible]=\"visible()\"\n        [class.sui-drawer-left]=\"position() === 'left'\"\n        [class.sui-drawer-right]=\"position() === 'right'\"\n        [class.sui-drawer-top]=\"position() === 'top'\"\n        [class.sui-drawer-bottom]=\"position() === 'bottom'\"\n        [style.--sui-drawer-size]=\"size() ?? null\"\n        role=\"dialog\"\n        [attr.aria-modal]=\"modal()\"\n        (click)=\"$event.stopPropagation()\">\n\n        <header class=\"sui-drawer-header\">\n\n            <div class=\"sui-drawer-header-content\">\n\n                <ng-content select=\"[suiDrawerHeader]\" />\n\n                @if (header()) {\n                    <span class=\"sui-drawer-title\">\n                        {{ header() }}\n                    </span>\n                }\n\n            </div>\n\n            @if (showCloseButton()) {\n                <button\n                    type=\"button\"\n                    class=\"sui-drawer-close\"\n                    aria-label=\"Close\"\n                    (click)=\"close()\">\n                    \u00D7\n                </button>\n            }\n\n        </header>\n\n        <div class=\"sui-drawer-content\">\n            <ng-content />\n        </div>\n\n        <footer class=\"sui-drawer-footer\">\n            <ng-content select=\"[suiDrawerFooter]\" />\n        </footer>\n\n    </aside>\n\n</div>", styles: [":host{display:contents}.sui-drawer-overlay{position:fixed;inset:0;z-index:var(--sui-drawer-z-index);visibility:hidden;pointer-events:none;background:transparent;transition:background-color var(--sui-duration-slow) var(--sui-easing-standard),visibility var(--sui-duration-slow) var(--sui-easing-standard)}.sui-drawer-overlay-visible{visibility:visible;pointer-events:auto}.sui-drawer-overlay-visible.sui-drawer-overlay-modal{background:var(--sui-drawer-overlay-background)}.sui-drawer{position:absolute;display:flex;flex-direction:column;box-sizing:border-box;color:var(--sui-drawer-text);background:var(--sui-drawer-background);box-shadow:var(--sui-drawer-shadow);transition:transform var(--sui-duration-slow) var(--sui-easing-standard)}.sui-drawer-right{top:0;right:0;width:var(--sui-drawer-size, 25rem);height:100%;transform:translate(100%)}.sui-drawer-right.sui-drawer-visible{transform:translate(0)}.sui-drawer-left{top:0;left:0;width:var(--sui-drawer-size, 25rem);height:100%;transform:translate(-100%)}.sui-drawer-left.sui-drawer-visible{transform:translate(0)}.sui-drawer-top{top:0;left:0;width:100%;height:var(--sui-drawer-size, 20rem);transform:translateY(-100%)}.sui-drawer-top.sui-drawer-visible{transform:translateY(0)}.sui-drawer-bottom{bottom:0;left:0;width:100%;height:var(--sui-drawer-size, 20rem);transform:translateY(100%)}.sui-drawer-bottom.sui-drawer-visible{transform:translateY(0)}.sui-drawer-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;min-height:3.5rem;padding:var(--sui-drawer-footer-padding);border-bottom:var(--sui-border-width) solid var(--sui-drawer-border)}.sui-drawer-header-content{display:flex;align-items:center;gap:var(--sui-space-2);min-width:0}.sui-drawer-title{font-family:inherit;font-size:var(--sui-control-font-size-lg);font-weight:var(--sui-font-weight-semibold);color:var(--sui-drawer-text)}.sui-drawer-close{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;color:var(--sui-drawer-close-text);background:transparent;border:0;border-radius:.375rem;cursor:pointer;font-family:inherit;font-size:1.5rem;line-height:1}.sui-drawer-close:hover{color:var(--sui-color-content);background:var(--sui-drawer-close-background-hover)}.sui-drawer-close:focus-visible{outline:var(--sui-focus-ring-width) solid var(--sui-color-focus);outline-offset:var(--sui-focus-ring-offset)}.sui-drawer-content{flex:1;min-height:0;padding:var(--sui-drawer-content-padding);overflow:auto}.sui-drawer-footer{flex-shrink:0;padding:.75rem 1rem;border-top:var(--sui-border-width) solid var(--sui-drawer-border)}.sui-drawer-footer:empty{display:none}@media(prefers-reduced-motion:reduce){.sui-drawer,.sui-drawer-overlay{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiDrawer, decorators: [{
+            type: Component,
+            args: [{ selector: 'sui-drawer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"sui-drawer-overlay\"\n    [class.sui-drawer-overlay-visible]=\"visible()\"\n    [class.sui-drawer-overlay-modal]=\"modal()\"\n    [attr.aria-hidden]=\"!visible()\"\n    (click)=\"handleBackdrop()\">\n\n    <aside\n        class=\"sui-drawer\"\n        [class.sui-drawer-visible]=\"visible()\"\n        [class.sui-drawer-left]=\"position() === 'left'\"\n        [class.sui-drawer-right]=\"position() === 'right'\"\n        [class.sui-drawer-top]=\"position() === 'top'\"\n        [class.sui-drawer-bottom]=\"position() === 'bottom'\"\n        [style.--sui-drawer-size]=\"size() ?? null\"\n        role=\"dialog\"\n        [attr.aria-modal]=\"modal()\"\n        (click)=\"$event.stopPropagation()\">\n\n        <header class=\"sui-drawer-header\">\n\n            <div class=\"sui-drawer-header-content\">\n\n                <ng-content select=\"[suiDrawerHeader]\" />\n\n                @if (header()) {\n                    <span class=\"sui-drawer-title\">\n                        {{ header() }}\n                    </span>\n                }\n\n            </div>\n\n            @if (showCloseButton()) {\n                <button\n                    type=\"button\"\n                    class=\"sui-drawer-close\"\n                    aria-label=\"Close\"\n                    (click)=\"close()\">\n                    \u00D7\n                </button>\n            }\n\n        </header>\n\n        <div class=\"sui-drawer-content\">\n            <ng-content />\n        </div>\n\n        <footer class=\"sui-drawer-footer\">\n            <ng-content select=\"[suiDrawerFooter]\" />\n        </footer>\n\n    </aside>\n\n</div>", styles: [":host{display:contents}.sui-drawer-overlay{position:fixed;inset:0;z-index:var(--sui-drawer-z-index);visibility:hidden;pointer-events:none;background:transparent;transition:background-color var(--sui-duration-slow) var(--sui-easing-standard),visibility var(--sui-duration-slow) var(--sui-easing-standard)}.sui-drawer-overlay-visible{visibility:visible;pointer-events:auto}.sui-drawer-overlay-visible.sui-drawer-overlay-modal{background:var(--sui-drawer-overlay-background)}.sui-drawer{position:absolute;display:flex;flex-direction:column;box-sizing:border-box;color:var(--sui-drawer-text);background:var(--sui-drawer-background);box-shadow:var(--sui-drawer-shadow);transition:transform var(--sui-duration-slow) var(--sui-easing-standard)}.sui-drawer-right{top:0;right:0;width:var(--sui-drawer-size, 25rem);height:100%;transform:translate(100%)}.sui-drawer-right.sui-drawer-visible{transform:translate(0)}.sui-drawer-left{top:0;left:0;width:var(--sui-drawer-size, 25rem);height:100%;transform:translate(-100%)}.sui-drawer-left.sui-drawer-visible{transform:translate(0)}.sui-drawer-top{top:0;left:0;width:100%;height:var(--sui-drawer-size, 20rem);transform:translateY(-100%)}.sui-drawer-top.sui-drawer-visible{transform:translateY(0)}.sui-drawer-bottom{bottom:0;left:0;width:100%;height:var(--sui-drawer-size, 20rem);transform:translateY(100%)}.sui-drawer-bottom.sui-drawer-visible{transform:translateY(0)}.sui-drawer-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;min-height:3.5rem;padding:var(--sui-drawer-footer-padding);border-bottom:var(--sui-border-width) solid var(--sui-drawer-border)}.sui-drawer-header-content{display:flex;align-items:center;gap:var(--sui-space-2);min-width:0}.sui-drawer-title{font-family:inherit;font-size:var(--sui-control-font-size-lg);font-weight:var(--sui-font-weight-semibold);color:var(--sui-drawer-text)}.sui-drawer-close{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;color:var(--sui-drawer-close-text);background:transparent;border:0;border-radius:.375rem;cursor:pointer;font-family:inherit;font-size:1.5rem;line-height:1}.sui-drawer-close:hover{color:var(--sui-color-content);background:var(--sui-drawer-close-background-hover)}.sui-drawer-close:focus-visible{outline:var(--sui-focus-ring-width) solid var(--sui-color-focus);outline-offset:var(--sui-focus-ring-offset)}.sui-drawer-content{flex:1;min-height:0;padding:var(--sui-drawer-content-padding);overflow:auto}.sui-drawer-footer{flex-shrink:0;padding:.75rem 1rem;border-top:var(--sui-border-width) solid var(--sui-drawer-border)}.sui-drawer-footer:empty{display:none}@media(prefers-reduced-motion:reduce){.sui-drawer,.sui-drawer-overlay{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], blockScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "blockScroll", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], handleEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SuiDrawer };
+//# sourceMappingURL=saitec-ui-drawer.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"saitec-ui-drawer.mjs","sources":["../../../projects/ui/drawer/src/drawer.component.ts","../../../projects/ui/drawer/src/drawer.component.html","../../../projects/ui/drawer/src/saitec-ui-drawer.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    Component,\n    HostListener,\n    effect,\n    inject,\n    input,\n    model,\n    OnDestroy,\n    output\n} from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\n\nexport type SuiDrawerPosition =\n    | 'left'\n    | 'right'\n    | 'top'\n    | 'bottom';\n\n@Component({\n    selector: 'sui-drawer',\n    standalone: true,\n    templateUrl: './drawer.component.html',\n    styleUrl: './drawer.component.css',\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SuiDrawer implements OnDestroy {\n\n    private readonly document = inject(DOCUMENT);\n\n    visible = model(false);\n\n    position = input<SuiDrawerPosition>('right');\n\n    header = input<string>();\n\n    modal = input(true);\n\n    dismissible = input(true);\n\n    closeOnEscape = input(true);\n\n    showCloseButton = input(true);\n\n    blockScroll = input(true);\n\n    size = input<string>();\n\n    opened = output<void>();\n\n    closed = output<void>();\n\n    private previousBodyOverflow?: string;\n\n    constructor() {\n        effect(() => {\n            const visible = this.visible();\n\n            this.updateBodyScroll(visible);\n        });\n    }\n\n    @HostListener('document:keydown.escape')\n    protected handleEscape(): void {\n        if (\n            this.visible() &&\n            this.closeOnEscape()\n        ) {\n            this.close();\n        }\n    }\n\n    protected handleBackdrop(): void {\n        if (\n            this.modal() &&\n            this.dismissible()\n        ) {\n            this.close();\n        }\n    }\n\n    protected close(): void {\n        if (!this.visible()) {\n            return;\n        }\n\n        this.visible.set(false);\n        this.closed.emit();\n    }\n\n    public open(): void {\n        if (this.visible()) {\n            return;\n        }\n\n        this.visible.set(true);\n        this.opened.emit();\n    }\n\n    private updateBodyScroll(visible: boolean): void {\n        if (!this.blockScroll()) {\n            return;\n        }\n\n        const body = this.document.body;\n\n        if (visible) {\n            this.previousBodyOverflow = body.style.overflow;\n            body.style.overflow = 'hidden';\n        }\n        else {\n            body.style.overflow =\n                this.previousBodyOverflow ?? '';\n        }\n    }\n\n    ngOnDestroy(): void {\n        if (this.blockScroll()) {\n            this.document.body.style.overflow =\n                this.previousBodyOverflow ?? '';\n        }\n    }\n}","<div\n    class=\"sui-drawer-overlay\"\n    [class.sui-drawer-overlay-visible]=\"visible()\"\n    [class.sui-drawer-overlay-modal]=\"modal()\"\n    [attr.aria-hidden]=\"!visible()\"\n    (click)=\"handleBackdrop()\">\n\n    <aside\n        class=\"sui-drawer\"\n        [class.sui-drawer-visible]=\"visible()\"\n        [class.sui-drawer-left]=\"position() === 'left'\"\n        [class.sui-drawer-right]=\"position() === 'right'\"\n        [class.sui-drawer-top]=\"position() === 'top'\"\n        [class.sui-drawer-bottom]=\"position() === 'bottom'\"\n        [style.--sui-drawer-size]=\"size() ?? null\"\n        role=\"dialog\"\n        [attr.aria-modal]=\"modal()\"\n        (click)=\"$event.stopPropagation()\">\n\n        <header class=\"sui-drawer-header\">\n\n            <div class=\"sui-drawer-header-content\">\n\n                <ng-content select=\"[suiDrawerHeader]\" />\n\n                @if (header()) {\n                    <span class=\"sui-drawer-title\">\n                        {{ header() }}\n                    </span>\n                }\n\n            </div>\n\n            @if (showCloseButton()) {\n                <button\n                    type=\"button\"\n                    class=\"sui-drawer-close\"\n                    aria-label=\"Close\"\n                    (click)=\"close()\">\n                    ×\n                </button>\n            }\n\n        </header>\n\n        <div class=\"sui-drawer-content\">\n            <ng-content />\n        </div>\n\n        <footer class=\"sui-drawer-footer\">\n            <ng-content select=\"[suiDrawerFooter]\" />\n        </footer>\n\n    </aside>\n\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/saitec-ui-fieldset.mjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"saitec-ui-fieldset.mjs","sources":["../../../projects/ui/fieldset/src/fieldset.component.ts","../../../projects/ui/fieldset/src/fieldset.component.html","../../../projects/ui/fieldset/src/saitec-ui-fieldset.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    Component,\n    input,\n    model\n} from '@angular/core';\n\n@Component({\n    selector: 'sui-fieldset',\n    standalone: true,\n    templateUrl: './fieldset.component.html',\n    styleUrl: './fieldset.component.css',\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SuiFieldset {\n\n    legend = input<string>();\n\n    toggleable = input(false);\n\n    collapsed = model(false);\n\n    disabled = input(false);\n\n    protected toggle(): void {\n        if (!this.toggleable() || this.disabled()) {\n            return;\n        }\n\n        this.collapsed.update(value => !value);\n    }\n}","<fieldset\n    class=\"sui-fieldset\"\n    [disabled]=\"disabled()\">\n\n    @if (legend() || toggleable()) {\n        <legend class=\"sui-fieldset-legend\">\n\n            <div class=\"sui-fieldset-legend-content\">\n\n                <ng-content select=\"[suiFieldsetLegend]\" />\n\n                @if (legend()) {\n                    <span class=\"sui-fieldset-title\">\n                        {{ legend() }}\n                    </span>\n                }\n\n            </div>\n\n            @if (toggleable()) {\n                <button\n                    type=\"button\"\n                    class=\"sui-fieldset-toggle\"\n                    [disabled]=\"disabled()\"\n                    [attr.aria-expanded]=\"!collapsed()\"\n                    (click)=\"toggle()\">\n\n                    <span\n                        class=\"sui-fieldset-toggle-icon\"\n                        [class.sui-fieldset-toggle-icon-collapsed]=\"collapsed()\">\n                        ▼\n                    </span>\n\n                </button>\n            }\n\n        </legend>\n    }\n\n    @if (!collapsed()) {\n        <div class=\"sui-fieldset-content\">\n            <ng-content />\n        </div>\n    }\n\n</fieldset>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;MAca,WAAW,CAAA;AAEpB,IAAA,MAAM,GAAG,KAAK;0FAAU;IAExB,UAAU,GAAG,KAAK,CAAC,KAAK;mFAAC;IAEzB,SAAS,GAAG,KAAK,CAAC,KAAK;kFAAC;IAExB,QAAQ,GAAG,KAAK,CAAC,KAAK;iFAAC;IAEb,MAAM,GAAA;QACZ,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;YACvC;QACJ;AAEA,QAAA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC;IAC1C;uGAhBS,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAX,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,WAAW,soBCdxB,+sCA6CW,EAAA,MAAA,EAAA,CAAA,+nDAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FD/BE,WAAW,EAAA,UAAA,EAAA,CAAA;kBAPvB,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,EAAA,UAAA,EACZ,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,+sCAAA,EAAA,MAAA,EAAA,CAAA,+nDAAA,CAAA,EAAA;;;AEZnD;;AAEG;;;;"}

package/fesm2022/saitec-ui-file-upload.mjs

@@ -0,0 +1,206 @@
+import * as i0 from '@angular/core';
+import { input, output, signal, viewChild, ChangeDetectionStrategy, Component } from '@angular/core';
+
+let nextFileUploadId = 0;
+class SuiFileUpload {
+    id = input(`sui-file-upload-${++nextFileUploadId}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    name = input('files', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    multiple = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    accept = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "accept" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    maxFileSize = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "maxFileSize" }] : /* istanbul ignore next */ []));
+    maxFiles = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "maxFiles" }] : /* istanbul ignore next */ []));
+    chooseLabel = input('Choose files', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chooseLabel" }] : /* istanbul ignore next */ []));
+    dropLabel = input('Drop files here', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropLabel" }] : /* istanbul ignore next */ []));
+    showFileList = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showFileList" }] : /* istanbul ignore next */ []));
+    filesChange = output();
+    fileAdded = output();
+    fileRemoved = output();
+    cleared = output();
+    error = output();
+    files = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
+    dragging = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+    inputElement = viewChild.required('fileInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputElement" }] : /* istanbul ignore next */ []));
+    choose() {
+        if (this.disabled()) {
+            return;
+        }
+        this.inputElement().nativeElement.click();
+    }
+    handleFileInput(event) {
+        const input = event.target;
+        if (!input.files) {
+            return;
+        }
+        this.addFiles(Array.from(input.files));
+        /*
+         * Allows selecting the same file again.
+         */
+        input.value = '';
+    }
+    handleDragOver(event) {
+        event.preventDefault();
+        if (this.disabled()) {
+            return;
+        }
+        this.dragging.set(true);
+    }
+    handleDragLeave(event) {
+        event.preventDefault();
+        this.dragging.set(false);
+    }
+    handleDrop(event) {
+        event.preventDefault();
+        this.dragging.set(false);
+        if (this.disabled() ||
+            !event.dataTransfer?.files) {
+            return;
+        }
+        this.addFiles(Array.from(event.dataTransfer.files));
+    }
+    removeFile(file) {
+        if (this.disabled()) {
+            return;
+        }
+        const updated = this.files().filter(current => !this.sameFile(current, file));
+        this.files.set(updated);
+        this.fileRemoved.emit(file);
+        this.filesChange.emit(updated);
+    }
+    clear() {
+        if (this.disabled()) {
+            return;
+        }
+        this.files.set([]);
+        this.cleared.emit();
+        this.filesChange.emit([]);
+    }
+    formatSize(bytes) {
+        if (bytes < 1024) {
+            return `${bytes} B`;
+        }
+        if (bytes < 1024 * 1024) {
+            return `${(bytes / 1024).toFixed(1)} KB`;
+        }
+        return `${(bytes /
+            (1024 * 1024)).toFixed(1)} MB`;
+    }
+    addFiles(incoming) {
+        const accepted = [];
+        for (const file of incoming) {
+            if (!this.validateFile(file)) {
+                continue;
+            }
+            accepted.push(file);
+        }
+        if (accepted.length === 0) {
+            return;
+        }
+        let updated;
+        if (this.multiple()) {
+            updated = [
+                ...this.files()
+            ];
+            for (const file of accepted) {
+                if (updated.some(current => this.sameFile(current, file))) {
+                    continue;
+                }
+                updated.push(file);
+            }
+        }
+        else {
+            updated = [
+                accepted[0]
+            ];
+        }
+        const maxFiles = this.maxFiles();
+        if (maxFiles !== undefined &&
+            updated.length > maxFiles) {
+            this.error.emit({
+                message: `Maximum number of files is ${maxFiles}.`
+            });
+            updated =
+                updated.slice(0, maxFiles);
+        }
+        this.files.set(updated);
+        for (const file of accepted) {
+            this.fileAdded.emit(file);
+        }
+        this.filesChange.emit(updated);
+    }
+    validateFile(file) {
+        const maxFileSize = this.maxFileSize();
+        if (maxFileSize !== undefined &&
+            file.size > maxFileSize) {
+            this.error.emit({
+                file,
+                message: `${file.name} exceeds the maximum allowed size.`
+            });
+            return false;
+        }
+        if (!this.matchesAccept(file)) {
+            this.error.emit({
+                file,
+                message: `${file.name} is not an accepted file type.`
+            });
+            return false;
+        }
+        return true;
+    }
+    matchesAccept(file) {
+        const accept = this.accept();
+        if (!accept) {
+            return true;
+        }
+        const rules = accept
+            .split(',')
+            .map(rule => rule
+            .trim()
+            .toLowerCase())
+            .filter(Boolean);
+        const fileName = file.name.toLowerCase();
+        const fileType = file.type.toLowerCase();
+        return rules.some(rule => {
+            if (rule.startsWith('.')) {
+                return fileName.endsWith(rule);
+            }
+            if (rule.endsWith('/*')) {
+                const prefix = rule.slice(0, rule.length - 1);
+                return fileType.startsWith(prefix);
+            }
+            return fileType === rule;
+        });
+    }
+    sameFile(a, b) {
+        return (a.name === b.name &&
+            a.size === b.size &&
+            a.lastModified ===
+                b.lastModified);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiFileUpload, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SuiFileUpload, isStandalone: true, selector: "sui-file-upload", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, chooseLabel: { classPropertyName: "chooseLabel", publicName: "chooseLabel", isSignal: true, isRequired: false, transformFunction: null }, dropLabel: { classPropertyName: "dropLabel", publicName: "dropLabel", isSignal: true, isRequired: false, transformFunction: null }, showFileList: { classPropertyName: "showFileList", publicName: "showFileList", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesChange: "filesChange", fileAdded: "fileAdded", fileRemoved: "fileRemoved", cleared: "cleared", error: "error" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n    class=\"sui-file-upload\"\n    [class.sui-file-upload-disabled]=\"disabled()\">\n\n    <input\n        #fileInput\n        class=\"sui-file-upload-input\"\n        type=\"file\"\n\n        [id]=\"id()\"\n        [name]=\"name()\"\n\n        [multiple]=\"multiple()\"\n        [disabled]=\"disabled()\"\n\n        [attr.accept]=\"accept() ?? null\"\n\n        (change)=\"handleFileInput($event)\"\n    />\n\n    <div\n        class=\"sui-file-upload-drop-zone\"\n\n        [class.sui-file-upload-drop-zone-active]=\"dragging()\"\n\n        role=\"button\"\n\n        [attr.tabindex]=\"\n            disabled()\n                ? -1\n                : 0\n        \"\n\n        (click)=\"choose()\"\n\n        (keydown.enter)=\"choose()\"\n        (keydown.space)=\"choose(); $event.preventDefault()\"\n\n        (dragover)=\"handleDragOver($event)\"\n        (dragleave)=\"handleDragLeave($event)\"\n        (drop)=\"handleDrop($event)\">\n\n        <div class=\"sui-file-upload-drop-label\">\n            {{ dropLabel() }}\n        </div>\n\n        <div class=\"sui-file-upload-separator\">\n            or\n        </div>\n\n        <button\n            type=\"button\"\n            class=\"sui-file-upload-choose\"\n            [disabled]=\"disabled()\"\n            (click)=\"\n                $event.stopPropagation();\n                choose()\n            \">\n            {{ chooseLabel() }}\n        </button>\n\n    </div>\n\n    @if (\n        showFileList() &&\n        files().length > 0\n    ) {\n\n        <div class=\"sui-file-upload-list\">\n\n            @for (\n                file of files();\n                track file.name +\n                      file.size +\n                      file.lastModified\n            ) {\n\n                <div class=\"sui-file-upload-file\">\n\n                    <div class=\"sui-file-upload-file-info\">\n\n                        <div class=\"sui-file-upload-file-name\">\n                            {{ file.name }}\n                        </div>\n\n                        <div class=\"sui-file-upload-file-size\">\n                            {{ formatSize(file.size) }}\n                        </div>\n\n                    </div>\n\n                    <button\n                        type=\"button\"\n                        class=\"sui-file-upload-remove\"\n                        [disabled]=\"disabled()\"\n                        aria-label=\"Remove file\"\n                        (click)=\"removeFile(file)\">\n                        \u00D7\n                    </button>\n\n                </div>\n\n            }\n\n            @if (files().length > 1) {\n\n                <div class=\"sui-file-upload-actions\">\n\n                    <button\n                        type=\"button\"\n                        class=\"sui-file-upload-clear\"\n                        [disabled]=\"disabled()\"\n                        (click)=\"clear()\">\n                        Clear\n                    </button>\n\n                </div>\n\n            }\n\n        </div>\n\n    }\n\n</div>", styles: [":host{display:block;width:100%}.sui-file-upload{display:block;width:100%}.sui-file-upload-input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;opacity:0}.sui-file-upload-drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:8rem;box-sizing:border-box;padding:1.5rem;color:var(--sui-file-upload-color);background:var(--sui-file-upload-background);border:var(--sui-file-upload-border-width) dashed var(--sui-file-upload-border-color);border-radius:var(--sui-file-upload-border-radius);cursor:pointer;transition:border-color var(--sui-duration-normal) var(--sui-easing-standard),background-color var(--sui-duration-normal) var(--sui-easing-standard)}.sui-file-upload-drop-zone:hover{border-color:var(--sui-file-upload-hover-border-color);background:var(--sui-file-upload-hover-background)}.sui-file-upload-drop-zone-active{border-color:var(--sui-file-upload-active-border-color);background:var(--sui-file-upload-active-background)}.sui-file-upload-drop-zone:focus-visible{outline:2px solid var(--sui-file-upload-focus-color);outline-offset:var(--sui-focus-ring-offset)}.sui-file-upload-drop-label{font-family:inherit;font-size:.875rem;font-weight:500}.sui-file-upload-separator{color:var(--sui-file-upload-muted-color);font-family:inherit;font-size:.75rem}.sui-file-upload-choose,.sui-file-upload-clear{padding:.5rem .75rem;font-family:inherit;font-size:.875rem;color:var(--sui-file-upload-button-color);background:var(--sui-file-upload-button-background);border:0;border-radius:.375rem;cursor:pointer}.sui-file-upload-choose:hover:not(:disabled),.sui-file-upload-clear:hover:not(:disabled){background:var(--sui-file-upload-button-hover-background)}.sui-file-upload-list{display:flex;flex-direction:column;gap:.5rem;margin-top:.75rem}.sui-file-upload-file{display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;background:var(--sui-file-upload-file-background);border:1px solid var(--sui-file-upload-file-border-color);border-radius:.375rem}.sui-file-upload-file-info{flex:1;min-width:0}.sui-file-upload-file-name{overflow:hidden;color:var(--sui-file-upload-file-color);font-family:inherit;font-size:.875rem;font-weight:500;text-overflow:ellipsis;white-space:nowrap}.sui-file-upload-file-size{margin-top:.125rem;color:var(--sui-file-upload-muted-color);font-family:inherit;font-size:.75rem}.sui-file-upload-remove{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.75rem;height:1.75rem;padding:0;color:var(--sui-file-upload-remove-color);background:transparent;border:0;border-radius:.375rem;cursor:pointer;font-size:1.125rem}.sui-file-upload-remove:hover:not(:disabled){color:var(--sui-file-upload-remove-hover-color);background:var(--sui-file-upload-remove-hover-background)}.sui-file-upload-actions{display:flex;justify-content:flex-end}.sui-file-upload-clear{color:var(--sui-file-upload-clear-color);background:var(--sui-file-upload-clear-background)}.sui-file-upload-clear:hover:not(:disabled){background:var(--sui-file-upload-clear-hover-background)}.sui-file-upload-disabled{opacity:var(--sui-file-upload-disabled-opacity)}.sui-file-upload-disabled .sui-file-upload-drop-zone{cursor:not-allowed}button:disabled{cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiFileUpload, decorators: [{
+            type: Component,
+            args: [{ selector: 'sui-file-upload', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"sui-file-upload\"\n    [class.sui-file-upload-disabled]=\"disabled()\">\n\n    <input\n        #fileInput\n        class=\"sui-file-upload-input\"\n        type=\"file\"\n\n        [id]=\"id()\"\n        [name]=\"name()\"\n\n        [multiple]=\"multiple()\"\n        [disabled]=\"disabled()\"\n\n        [attr.accept]=\"accept() ?? null\"\n\n        (change)=\"handleFileInput($event)\"\n    />\n\n    <div\n        class=\"sui-file-upload-drop-zone\"\n\n        [class.sui-file-upload-drop-zone-active]=\"dragging()\"\n\n        role=\"button\"\n\n        [attr.tabindex]=\"\n            disabled()\n                ? -1\n                : 0\n        \"\n\n        (click)=\"choose()\"\n\n        (keydown.enter)=\"choose()\"\n        (keydown.space)=\"choose(); $event.preventDefault()\"\n\n        (dragover)=\"handleDragOver($event)\"\n        (dragleave)=\"handleDragLeave($event)\"\n        (drop)=\"handleDrop($event)\">\n\n        <div class=\"sui-file-upload-drop-label\">\n            {{ dropLabel() }}\n        </div>\n\n        <div class=\"sui-file-upload-separator\">\n            or\n        </div>\n\n        <button\n            type=\"button\"\n            class=\"sui-file-upload-choose\"\n            [disabled]=\"disabled()\"\n            (click)=\"\n                $event.stopPropagation();\n                choose()\n            \">\n            {{ chooseLabel() }}\n        </button>\n\n    </div>\n\n    @if (\n        showFileList() &&\n        files().length > 0\n    ) {\n\n        <div class=\"sui-file-upload-list\">\n\n            @for (\n                file of files();\n                track file.name +\n                      file.size +\n                      file.lastModified\n            ) {\n\n                <div class=\"sui-file-upload-file\">\n\n                    <div class=\"sui-file-upload-file-info\">\n\n                        <div class=\"sui-file-upload-file-name\">\n                            {{ file.name }}\n                        </div>\n\n                        <div class=\"sui-file-upload-file-size\">\n                            {{ formatSize(file.size) }}\n                        </div>\n\n                    </div>\n\n                    <button\n                        type=\"button\"\n                        class=\"sui-file-upload-remove\"\n                        [disabled]=\"disabled()\"\n                        aria-label=\"Remove file\"\n                        (click)=\"removeFile(file)\">\n                        \u00D7\n                    </button>\n\n                </div>\n\n            }\n\n            @if (files().length > 1) {\n\n                <div class=\"sui-file-upload-actions\">\n\n                    <button\n                        type=\"button\"\n                        class=\"sui-file-upload-clear\"\n                        [disabled]=\"disabled()\"\n                        (click)=\"clear()\">\n                        Clear\n                    </button>\n\n                </div>\n\n            }\n\n        </div>\n\n    }\n\n</div>", styles: [":host{display:block;width:100%}.sui-file-upload{display:block;width:100%}.sui-file-upload-input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;opacity:0}.sui-file-upload-drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:8rem;box-sizing:border-box;padding:1.5rem;color:var(--sui-file-upload-color);background:var(--sui-file-upload-background);border:var(--sui-file-upload-border-width) dashed var(--sui-file-upload-border-color);border-radius:var(--sui-file-upload-border-radius);cursor:pointer;transition:border-color var(--sui-duration-normal) var(--sui-easing-standard),background-color var(--sui-duration-normal) var(--sui-easing-standard)}.sui-file-upload-drop-zone:hover{border-color:var(--sui-file-upload-hover-border-color);background:var(--sui-file-upload-hover-background)}.sui-file-upload-drop-zone-active{border-color:var(--sui-file-upload-active-border-color);background:var(--sui-file-upload-active-background)}.sui-file-upload-drop-zone:focus-visible{outline:2px solid var(--sui-file-upload-focus-color);outline-offset:var(--sui-focus-ring-offset)}.sui-file-upload-drop-label{font-family:inherit;font-size:.875rem;font-weight:500}.sui-file-upload-separator{color:var(--sui-file-upload-muted-color);font-family:inherit;font-size:.75rem}.sui-file-upload-choose,.sui-file-upload-clear{padding:.5rem .75rem;font-family:inherit;font-size:.875rem;color:var(--sui-file-upload-button-color);background:var(--sui-file-upload-button-background);border:0;border-radius:.375rem;cursor:pointer}.sui-file-upload-choose:hover:not(:disabled),.sui-file-upload-clear:hover:not(:disabled){background:var(--sui-file-upload-button-hover-background)}.sui-file-upload-list{display:flex;flex-direction:column;gap:.5rem;margin-top:.75rem}.sui-file-upload-file{display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;background:var(--sui-file-upload-file-background);border:1px solid var(--sui-file-upload-file-border-color);border-radius:.375rem}.sui-file-upload-file-info{flex:1;min-width:0}.sui-file-upload-file-name{overflow:hidden;color:var(--sui-file-upload-file-color);font-family:inherit;font-size:.875rem;font-weight:500;text-overflow:ellipsis;white-space:nowrap}.sui-file-upload-file-size{margin-top:.125rem;color:var(--sui-file-upload-muted-color);font-family:inherit;font-size:.75rem}.sui-file-upload-remove{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.75rem;height:1.75rem;padding:0;color:var(--sui-file-upload-remove-color);background:transparent;border:0;border-radius:.375rem;cursor:pointer;font-size:1.125rem}.sui-file-upload-remove:hover:not(:disabled){color:var(--sui-file-upload-remove-hover-color);background:var(--sui-file-upload-remove-hover-background)}.sui-file-upload-actions{display:flex;justify-content:flex-end}.sui-file-upload-clear{color:var(--sui-file-upload-clear-color);background:var(--sui-file-upload-clear-background)}.sui-file-upload-clear:hover:not(:disabled){background:var(--sui-file-upload-clear-hover-background)}.sui-file-upload-disabled{opacity:var(--sui-file-upload-disabled-opacity)}.sui-file-upload-disabled .sui-file-upload-drop-zone{cursor:not-allowed}button:disabled{cursor:not-allowed}\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], chooseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "chooseLabel", required: false }] }], dropLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropLabel", required: false }] }], showFileList: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFileList", required: false }] }], filesChange: [{ type: i0.Output, args: ["filesChange"] }], fileAdded: [{ type: i0.Output, args: ["fileAdded"] }], fileRemoved: [{ type: i0.Output, args: ["fileRemoved"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], error: [{ type: i0.Output, args: ["error"] }], inputElement: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SuiFileUpload };
+//# sourceMappingURL=saitec-ui-file-upload.mjs.map

package/fesm2022/saitec-ui-file-upload.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"saitec-ui-file-upload.mjs","sources":["../../../projects/ui/file-upload/src/file-upload.component.ts","../../../projects/ui/file-upload/src/file-upload.component.html","../../../projects/ui/file-upload/src/saitec-ui-file-upload.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    input,\n    output,\n    signal,\n    viewChild\n} from '@angular/core';\n\nexport interface SuiFileUploadError {\n    file?: File;\n    message: string;\n}\n\nlet nextFileUploadId = 0;\n\n@Component({\n    selector: 'sui-file-upload',\n    standalone: true,\n    templateUrl: './file-upload.component.html',\n    styleUrl: './file-upload.component.css',\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SuiFileUpload {\n\n    id = input(`sui-file-upload-${++nextFileUploadId}`);\n\n    name = input('files');\n\n    multiple = input(false);\n\n    accept = input<string>();\n\n    disabled = input(false);\n\n    maxFileSize = input<number>();\n\n    maxFiles = input<number>();\n\n    chooseLabel = input('Choose files');\n\n    dropLabel = input('Drop files here');\n\n    showFileList = input(true);\n\n    filesChange = output<File[]>();\n\n    fileAdded = output<File>();\n\n    fileRemoved = output<File>();\n\n    cleared = output<void>();\n\n    error = output<SuiFileUploadError>();\n\n    protected readonly files = signal<File[]>([]);\n\n    protected readonly dragging = signal(false);\n\n    private readonly inputElement =\n        viewChild.required<ElementRef<HTMLInputElement>>(\n            'fileInput'\n        );\n\n    protected choose(): void {\n        if (this.disabled()) {\n            return;\n        }\n\n        this.inputElement().nativeElement.click();\n    }\n\n    protected handleFileInput(\n        event: Event\n    ): void {\n\n        const input =\n            event.target as HTMLInputElement;\n\n        if (!input.files) {\n            return;\n        }\n\n        this.addFiles(\n            Array.from(input.files)\n        );\n\n        /*\n         * Allows selecting the same file again.\n         */\n        input.value = '';\n    }\n\n    protected handleDragOver(\n        event: DragEvent\n    ): void {\n\n        event.preventDefault();\n\n        if (this.disabled()) {\n            return;\n        }\n\n        this.dragging.set(true);\n    }\n\n    protected handleDragLeave(\n        event: DragEvent\n    ): void {\n\n        event.preventDefault();\n\n        this.dragging.set(false);\n    }\n\n    protected handleDrop(\n        event: DragEvent\n    ): void {\n\n        event.preventDefault();\n\n        this.dragging.set(false);\n\n        if (\n            this.disabled() ||\n            !event.dataTransfer?.files\n        ) {\n            return;\n        }\n\n        this.addFiles(\n            Array.from(\n                event.dataTransfer.files\n            )\n        );\n    }\n\n    protected removeFile(\n        file: File\n    ): void {\n\n        if (this.disabled()) {\n            return;\n        }\n\n        const updated =\n            this.files().filter(\n                current =>\n                    !this.sameFile(\n                        current,\n                        file\n                    )\n            );\n\n        this.files.set(updated);\n\n        this.fileRemoved.emit(file);\n        this.filesChange.emit(updated);\n    }\n\n    protected clear(): void {\n        if (this.disabled()) {\n            return;\n        }\n\n        this.files.set([]);\n\n        this.cleared.emit();\n        this.filesChange.emit([]);\n    }\n\n    protected formatSize(\n        bytes: number\n    ): string {\n\n        if (bytes < 1024) {\n            return `${bytes} B`;\n        }\n\n        if (bytes < 1024 * 1024) {\n            return `${(\n                bytes / 1024\n            ).toFixed(1)} KB`;\n        }\n\n        return `${(\n            bytes /\n            (1024 * 1024)\n        ).toFixed(1)} MB`;\n    }\n\n    private addFiles(\n        incoming: File[]\n    ): void {\n\n        const accepted: File[] = [];\n\n        for (const file of incoming) {\n\n            if (!this.validateFile(file)) {\n                continue;\n            }\n\n            accepted.push(file);\n        }\n\n        if (accepted.length === 0) {\n            return;\n        }\n\n        let updated: File[];\n\n        if (this.multiple()) {\n\n            updated = [\n                ...this.files()\n            ];\n\n            for (const file of accepted) {\n\n                if (\n                    updated.some(\n                        current =>\n                            this.sameFile(\n                                current,\n                                file\n                            )\n                    )\n                ) {\n                    continue;\n                }\n\n                updated.push(file);\n            }\n        }\n        else {\n            updated = [\n                accepted[0]\n            ];\n        }\n\n        const maxFiles =\n            this.maxFiles();\n\n        if (\n            maxFiles !== undefined &&\n            updated.length > maxFiles\n        ) {\n\n            this.error.emit({\n                message:\n                    `Maximum number of files is ${maxFiles}.`\n            });\n\n            updated =\n                updated.slice(\n                    0,\n                    maxFiles\n                );\n        }\n\n        this.files.set(updated);\n\n        for (const file of accepted) {\n            this.fileAdded.emit(file);\n        }\n\n        this.filesChange.emit(updated);\n    }\n\n    private validateFile(\n        file: File\n    ): boolean {\n\n        const maxFileSize =\n            this.maxFileSize();\n\n        if (\n            maxFileSize !== undefined &&\n            file.size > maxFileSize\n        ) {\n\n            this.error.emit({\n                file,\n                message:\n                    `${file.name} exceeds the maximum allowed size.`\n            });\n\n            return false;\n        }\n\n        if (\n            !this.matchesAccept(file)\n        ) {\n\n            this.error.emit({\n                file,\n                message:\n                    `${file.name} is not an accepted file type.`\n            });\n\n            return false;\n        }\n\n        return true;\n    }\n\n    private matchesAccept(\n        file: File\n    ): boolean {\n\n        const accept =\n            this.accept();\n\n        if (!accept) {\n            return true;\n        }\n\n        const rules =\n            accept\n                .split(',')\n                .map(\n                    rule =>\n                        rule\n                            .trim()\n                            .toLowerCase()\n                )\n                .filter(Boolean);\n\n        const fileName =\n            file.name.toLowerCase();\n\n        const fileType =\n            file.type.toLowerCase();\n\n        return rules.some(rule => {\n\n            if (\n                rule.startsWith('.')\n            ) {\n                return fileName.endsWith(rule);\n            }\n\n            if (\n                rule.endsWith('/*')\n            ) {\n\n                const prefix =\n                    rule.slice(\n                        0,\n                        rule.length - 1\n                    );\n\n                return fileType.startsWith(\n                    prefix\n                );\n            }\n\n            return fileType === rule;\n        });\n    }\n\n    private sameFile(\n        a: File,\n        b: File\n    ): boolean {\n\n        return (\n            a.name === b.name &&\n            a.size === b.size &&\n            a.lastModified ===\n                b.lastModified\n        );\n    }\n}","<div\n    class=\"sui-file-upload\"\n    [class.sui-file-upload-disabled]=\"disabled()\">\n\n    <input\n        #fileInput\n        class=\"sui-file-upload-input\"\n        type=\"file\"\n\n        [id]=\"id()\"\n        [name]=\"name()\"\n\n        [multiple]=\"multiple()\"\n        [disabled]=\"disabled()\"\n\n        [attr.accept]=\"accept() ?? null\"\n\n        (change)=\"handleFileInput($event)\"\n    />\n\n    <div\n        class=\"sui-file-upload-drop-zone\"\n\n        [class.sui-file-upload-drop-zone-active]=\"dragging()\"\n\n        role=\"button\"\n\n        [attr.tabindex]=\"\n            disabled()\n                ? -1\n                : 0\n        \"\n\n        (click)=\"choose()\"\n\n        (keydown.enter)=\"choose()\"\n        (keydown.space)=\"choose(); $event.preventDefault()\"\n\n        (dragover)=\"handleDragOver($event)\"\n        (dragleave)=\"handleDragLeave($event)\"\n        (drop)=\"handleDrop($event)\">\n\n        <div class=\"sui-file-upload-drop-label\">\n            {{ dropLabel() }}\n        </div>\n\n        <div class=\"sui-file-upload-separator\">\n            or\n        </div>\n\n        <button\n            type=\"button\"\n            class=\"sui-file-upload-choose\"\n            [disabled]=\"disabled()\"\n            (click)=\"\n                $event.stopPropagation();\n                choose()\n            \">\n            {{ chooseLabel() }}\n        </button>\n\n    </div>\n\n    @if (\n        showFileList() &&\n        files().length > 0\n    ) {\n\n        <div class=\"sui-file-upload-list\">\n\n            @for (\n                file of files();\n                track file.name +\n                      file.size +\n                      file.lastModified\n            ) {\n\n                <div class=\"sui-file-upload-file\">\n\n                    <div class=\"sui-file-upload-file-info\">\n\n                        <div class=\"sui-file-upload-file-name\">\n                            {{ file.name }}\n                        </div>\n\n                        <div class=\"sui-file-upload-file-size\">\n                            {{ formatSize(file.size) }}\n                        </div>\n\n                    </div>\n\n                    <button\n                        type=\"button\"\n                        class=\"sui-file-upload-remove\"\n                        [disabled]=\"disabled()\"\n                        aria-label=\"Remove file\"\n                        (click)=\"removeFile(file)\">\n                        ×\n                    </button>\n\n                </div>\n\n            }\n\n            @if (files().length > 1) {\n\n                <div class=\"sui-file-upload-actions\">\n\n                    <button\n                        type=\"button\"\n                        class=\"sui-file-upload-clear\"\n                        [disabled]=\"disabled()\"\n                        (click)=\"clear()\">\n                        Clear\n                    </button>\n\n                </div>\n\n            }\n\n        </div>\n\n    }\n\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/saitec-ui-form-field.mjs

@@ -0,0 +1,30 @@
+import * as i0 from '@angular/core';
+import { input, ChangeDetectionStrategy, Component } from '@angular/core';
+
+class SuiFormField {
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    hint = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "hint" }] : /* istanbul ignore next */ []));
+    error = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "error" }] : /* istanbul ignore next */ []));
+    required = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    invalid = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiFormField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SuiFormField, isStandalone: true, selector: "sui-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\r\n    class=\"sui-form-field\"\r\n    [class.sui-form-field-invalid]=\"invalid()\"\r\n    [class.sui-form-field-disabled]=\"disabled()\">\r\n\r\n    @if (label()) {\r\n        <label class=\"sui-form-field-label\">\r\n            {{ label() }}\r\n\r\n            @if (required()) {\r\n                <span\r\n                    class=\"sui-form-field-required\"\r\n                    aria-hidden=\"true\">\r\n                    *\r\n                </span>\r\n            }\r\n        </label>\r\n    }\r\n\r\n    <div class=\"sui-form-field-control\">\r\n        <ng-content />\r\n    </div>\r\n\r\n    @if (invalid() && error()) {\r\n        <div\r\n            class=\"sui-form-field-error\"\r\n            role=\"alert\">\r\n            {{ error() }}\r\n        </div>\r\n    }\r\n    @else if (hint()) {\r\n        <div class=\"sui-form-field-hint\">\r\n            {{ hint() }}\r\n        </div>\r\n    }\r\n\r\n</div>", styles: [":host{display:block;width:100%}.sui-form-field{display:flex;flex-direction:column;width:100%;gap:var(--sui-form-field-gap)}.sui-form-field-label{display:inline-flex;align-items:center;gap:var(--sui-form-field-label-gap);font-size:var(--sui-form-field-label-font-size);font-weight:var(--sui-form-field-label-font-weight);color:var(--sui-form-field-label-text)}.sui-form-field-required{color:var(--sui-form-field-required-text)}.sui-form-field-control{display:block;width:100%}.sui-form-field-hint,.sui-form-field-error{min-height:1rem;font-size:var(--sui-form-field-help-font-size);line-height:1rem}.sui-form-field-hint{color:var(--sui-form-field-hint-text)}.sui-form-field-error{color:var(--sui-form-field-error-text)}.sui-form-field-disabled{opacity:var(--sui-form-field-disabled-opacity)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiFormField, decorators: [{
+            type: Component,
+            args: [{ selector: 'sui-form-field', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n    class=\"sui-form-field\"\r\n    [class.sui-form-field-invalid]=\"invalid()\"\r\n    [class.sui-form-field-disabled]=\"disabled()\">\r\n\r\n    @if (label()) {\r\n        <label class=\"sui-form-field-label\">\r\n            {{ label() }}\r\n\r\n            @if (required()) {\r\n                <span\r\n                    class=\"sui-form-field-required\"\r\n                    aria-hidden=\"true\">\r\n                    *\r\n                </span>\r\n            }\r\n        </label>\r\n    }\r\n\r\n    <div class=\"sui-form-field-control\">\r\n        <ng-content />\r\n    </div>\r\n\r\n    @if (invalid() && error()) {\r\n        <div\r\n            class=\"sui-form-field-error\"\r\n            role=\"alert\">\r\n            {{ error() }}\r\n        </div>\r\n    }\r\n    @else if (hint()) {\r\n        <div class=\"sui-form-field-hint\">\r\n            {{ hint() }}\r\n        </div>\r\n    }\r\n\r\n</div>", styles: [":host{display:block;width:100%}.sui-form-field{display:flex;flex-direction:column;width:100%;gap:var(--sui-form-field-gap)}.sui-form-field-label{display:inline-flex;align-items:center;gap:var(--sui-form-field-label-gap);font-size:var(--sui-form-field-label-font-size);font-weight:var(--sui-form-field-label-font-weight);color:var(--sui-form-field-label-text)}.sui-form-field-required{color:var(--sui-form-field-required-text)}.sui-form-field-control{display:block;width:100%}.sui-form-field-hint,.sui-form-field-error{min-height:1rem;font-size:var(--sui-form-field-help-font-size);line-height:1rem}.sui-form-field-hint{color:var(--sui-form-field-hint-text)}.sui-form-field-error{color:var(--sui-form-field-error-text)}.sui-form-field-disabled{opacity:var(--sui-form-field-disabled-opacity)}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SuiFormField };
+//# sourceMappingURL=saitec-ui-form-field.mjs.map

package/fesm2022/saitec-ui-form-field.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"saitec-ui-form-field.mjs","sources":["../../../projects/ui/form-field/src/form-field.component.ts","../../../projects/ui/form-field/src/form-field.component.html","../../../projects/ui/form-field/src/saitec-ui-form-field.ts"],"sourcesContent":["import {\r\n    ChangeDetectionStrategy,\r\n    Component,\r\n    input\r\n} from '@angular/core';\r\n\r\n@Component({\r\n    selector: 'sui-form-field',\r\n    standalone: true,\r\n    templateUrl: './form-field.component.html',\r\n    styleUrl: './form-field.component.css',\r\n    changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class SuiFormField {\r\n    label = input<string>();\r\n\r\n    hint = input<string>();\r\n\r\n    error = input<string>();\r\n\r\n    required = input(false);\r\n\r\n    invalid = input(false);\r\n\r\n    disabled = input(false);\r\n}","<div\r\n    class=\"sui-form-field\"\r\n    [class.sui-form-field-invalid]=\"invalid()\"\r\n    [class.sui-form-field-disabled]=\"disabled()\">\r\n\r\n    @if (label()) {\r\n        <label class=\"sui-form-field-label\">\r\n            {{ label() }}\r\n\r\n            @if (required()) {\r\n                <span\r\n                    class=\"sui-form-field-required\"\r\n                    aria-hidden=\"true\">\r\n                    *\r\n                </span>\r\n            }\r\n        </label>\r\n    }\r\n\r\n    <div class=\"sui-form-field-control\">\r\n        <ng-content />\r\n    </div>\r\n\r\n    @if (invalid() && error()) {\r\n        <div\r\n            class=\"sui-form-field-error\"\r\n            role=\"alert\">\r\n            {{ error() }}\r\n        </div>\r\n    }\r\n    @else if (hint()) {\r\n        <div class=\"sui-form-field-hint\">\r\n            {{ hint() }}\r\n        </div>\r\n    }\r\n\r\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;MAaa,YAAY,CAAA;AACrB,IAAA,KAAK,GAAG,KAAK;yFAAU;AAEvB,IAAA,IAAI,GAAG,KAAK;wFAAU;AAEtB,IAAA,KAAK,GAAG,KAAK;yFAAU;IAEvB,QAAQ,GAAG,KAAK,CAAC,KAAK;iFAAC;IAEvB,OAAO,GAAG,KAAK,CAAC,KAAK;gFAAC;IAEtB,QAAQ,GAAG,KAAK,CAAC,KAAK;iFAAC;uGAXd,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAZ,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAY,2zBCbzB,w6BAoCM,EAAA,MAAA,EAAA,CAAA,0xBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDvBO,YAAY,EAAA,UAAA,EAAA,CAAA;kBAPxB,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAAA,UAAA,EACd,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,w6BAAA,EAAA,MAAA,EAAA,CAAA,0xBAAA,CAAA,EAAA;;;AEXnD;;AAEG;;;;"}