@saitec/ui 0.1.0

package/fesm2022/saitec-ui-select.mjs

@@ -0,0 +1,105 @@
+import * as i0 from '@angular/core';
+import { input, output, signal, computed, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+let nextSelectId = 0;
+class SuiSelect {
+    id = input(`sui-select-${++nextSelectId}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    name = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    placeholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    required = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaDescribedBy = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
+    ariaInvalid = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
+    compareWith = input((a, b) => Object.is(a, b), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    focused = output();
+    blurred = output();
+    value = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.formDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    selectedIndex = computed(() => {
+        const value = this.value();
+        const compare = this.compareWith();
+        return this.options().findIndex(option => compare(option.value, value));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.value.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.formDisabled.set(disabled);
+    }
+    handleChange(event) {
+        const element = event.target;
+        const index = Number(element.value);
+        if (index < 0) {
+            this.value.set(undefined);
+            this.onChange(undefined);
+            this.valueChange.emit(undefined);
+            return;
+        }
+        const option = this.options()[index];
+        if (!option) {
+            return;
+        }
+        this.value.set(option.value);
+        this.onChange(option.value);
+        this.valueChange.emit(option.value);
+    }
+    handleFocus(event) {
+        this.focused.emit(event);
+    }
+    handleBlur(event) {
+        this.onTouched();
+        this.blurred.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SuiSelect, isStandalone: true, selector: "sui-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "ariaInvalid", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", focused: "focused", blurred: "blurred" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SuiSelect),
+                multi: true
+            }
+        ], ngImport: i0, template: "<select\n    class=\"sui-select\"\n\n    [id]=\"id()\"\n    [name]=\"name() ?? ''\"\n\n    [value]=\"selectedIndex()\"\n\n    [disabled]=\"isDisabled()\"\n    [required]=\"required()\"\n\n    [attr.aria-label]=\"ariaLabel() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n    [attr.aria-invalid]=\"ariaInvalid() ?? null\"\n\n    (change)=\"handleChange($event)\"\n    (focus)=\"handleFocus($event)\"\n    (blur)=\"handleBlur($event)\">\n\n    @if (placeholder()) {\n        <option\n            value=\"-1\"\n            [disabled]=\"required()\">\n            {{ placeholder() }}\n        </option>\n    }\n\n    @for (\n        option of options();\n        track $index;\n        let index = $index\n    ) {\n        <option\n            [value]=\"index\"\n            [disabled]=\"option.disabled ?? false\">\n            {{ option.label }}\n        </option>\n    }\n\n</select>", styles: [":host{display:block;width:100%}.sui-select{display:block;width:100%;min-height:var(--sui-select-height);box-sizing:border-box;padding:var(--sui-space-2) var(--sui-select-padding-x);font-family:inherit;font-size:var(--sui-control-font-size-md);line-height:1.25rem;color:var(--sui-select-text);background-color:var(--sui-select-background);border:var(--sui-select-border-width) solid var(--sui-select-border);border-radius:var(--sui-select-radius);outline:none;cursor:pointer;transition:border-color var(--sui-duration-normal) var(--sui-easing-standard),box-shadow var(--sui-duration-normal) var(--sui-easing-standard),background-color var(--sui-duration-normal) var(--sui-easing-standard)}.sui-select:hover:not(:disabled){border-color:var(--sui-select-border-hover)}.sui-select:focus{border-color:var(--sui-select-border-focus);box-shadow:0 0 0 var(--sui-focus-ring-width) var(--sui-select-focus-color)}.sui-select:disabled{cursor:not-allowed;color:var(--sui-select-disabled-text);background:var(--sui-select-disabled-background);border-color:var(--sui-color-border)}.sui-select[aria-invalid=true]{border-color:var(--sui-color-danger)}.sui-select[aria-invalid=true]:focus{box-shadow:0 0 0 var(--sui-focus-ring-width) var(--sui-color-danger)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiSelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'sui-select', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SuiSelect),
+                            multi: true
+                        }
+                    ], template: "<select\n    class=\"sui-select\"\n\n    [id]=\"id()\"\n    [name]=\"name() ?? ''\"\n\n    [value]=\"selectedIndex()\"\n\n    [disabled]=\"isDisabled()\"\n    [required]=\"required()\"\n\n    [attr.aria-label]=\"ariaLabel() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n    [attr.aria-invalid]=\"ariaInvalid() ?? null\"\n\n    (change)=\"handleChange($event)\"\n    (focus)=\"handleFocus($event)\"\n    (blur)=\"handleBlur($event)\">\n\n    @if (placeholder()) {\n        <option\n            value=\"-1\"\n            [disabled]=\"required()\">\n            {{ placeholder() }}\n        </option>\n    }\n\n    @for (\n        option of options();\n        track $index;\n        let index = $index\n    ) {\n        <option\n            [value]=\"index\"\n            [disabled]=\"option.disabled ?? false\">\n            {{ option.label }}\n        </option>\n    }\n\n</select>", styles: [":host{display:block;width:100%}.sui-select{display:block;width:100%;min-height:var(--sui-select-height);box-sizing:border-box;padding:var(--sui-space-2) var(--sui-select-padding-x);font-family:inherit;font-size:var(--sui-control-font-size-md);line-height:1.25rem;color:var(--sui-select-text);background-color:var(--sui-select-background);border:var(--sui-select-border-width) solid var(--sui-select-border);border-radius:var(--sui-select-radius);outline:none;cursor:pointer;transition:border-color var(--sui-duration-normal) var(--sui-easing-standard),box-shadow var(--sui-duration-normal) var(--sui-easing-standard),background-color var(--sui-duration-normal) var(--sui-easing-standard)}.sui-select:hover:not(:disabled){border-color:var(--sui-select-border-hover)}.sui-select:focus{border-color:var(--sui-select-border-focus);box-shadow:0 0 0 var(--sui-focus-ring-width) var(--sui-select-focus-color)}.sui-select:disabled{cursor:not-allowed;color:var(--sui-select-disabled-text);background:var(--sui-select-disabled-background);border-color:var(--sui-color-border)}.sui-select[aria-invalid=true]{border-color:var(--sui-color-danger)}.sui-select[aria-invalid=true]:focus{box-shadow:0 0 0 var(--sui-focus-ring-width) var(--sui-color-danger)}\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], ariaInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaInvalid", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SuiSelect };
+//# sourceMappingURL=saitec-ui-select.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"saitec-ui-select.mjs","sources":["../../../projects/ui/select/src/select.component.ts","../../../projects/ui/select/src/select.component.html","../../../projects/ui/select/src/saitec-ui-select.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    forwardRef,\n    input,\n    output,\n    signal\n} from '@angular/core';\n\nimport {\n    SuiOption\n} from '@saitec/ui/core';\n\nimport {\n    ControlValueAccessor,\n    NG_VALUE_ACCESSOR\n} from '@angular/forms';\n\nlet nextSelectId = 0;\n\n@Component({\n    selector: 'sui-select',\n    standalone: true,\n    templateUrl: './select.component.html',\n    styleUrl: './select.component.css',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef(() => SuiSelect),\n            multi: true\n        }\n    ]\n})\nexport class SuiSelect implements ControlValueAccessor {\n\n    id = input(`sui-select-${++nextSelectId}`);\n\n    name = input<string>();\n\n    options = input<SuiOption[]>([]);\n\n    placeholder = input<string>();\n\n    disabled = input(false);\n\n    required = input(false);\n\n    ariaLabel = input<string>();\n\n    ariaDescribedBy = input<string>();\n\n    ariaInvalid = input<boolean>();\n\n    compareWith = input<(a: unknown, b: unknown) => boolean>(\n        (a, b) => Object.is(a, b)\n    );\n\n    valueChange = output<unknown>();\n\n    focused = output<FocusEvent>();\n\n    blurred = output<FocusEvent>();\n\n    protected readonly value = signal<unknown>(undefined);\n\n    private readonly formDisabled = signal(false);\n\n    protected readonly isDisabled = computed(\n        () => this.disabled() || this.formDisabled()\n    );\n\n    protected readonly selectedIndex = computed(() => {\n        const value = this.value();\n        const compare = this.compareWith();\n\n        return this.options().findIndex(\n            option => compare(option.value, value)\n        );\n    });\n\n    private onChange: (value: unknown) => void = () => {};\n\n    private onTouched: () => void = () => {};\n\n    writeValue(value: unknown): void {\n        this.value.set(value);\n    }\n\n    registerOnChange(\n        fn: (value: unknown) => void\n    ): void {\n        this.onChange = fn;\n    }\n\n    registerOnTouched(\n        fn: () => void\n    ): void {\n        this.onTouched = fn;\n    }\n\n    setDisabledState(disabled: boolean): void {\n        this.formDisabled.set(disabled);\n    }\n\n    protected handleChange(event: Event): void {\n        const element =\n            event.target as HTMLSelectElement;\n\n        const index = Number(element.value);\n\n        if (index < 0) {\n            this.value.set(undefined);\n            this.onChange(undefined);\n            this.valueChange.emit(undefined);\n\n            return;\n        }\n\n        const option = this.options()[index];\n\n        if (!option) {\n            return;\n        }\n\n        this.value.set(option.value);\n\n        this.onChange(option.value);\n        this.valueChange.emit(option.value);\n    }\n\n    protected handleFocus(\n        event: FocusEvent\n    ): void {\n        this.focused.emit(event);\n    }\n\n    protected handleBlur(\n        event: FocusEvent\n    ): void {\n        this.onTouched();\n        this.blurred.emit(event);\n    }\n}","<select\n    class=\"sui-select\"\n\n    [id]=\"id()\"\n    [name]=\"name() ?? ''\"\n\n    [value]=\"selectedIndex()\"\n\n    [disabled]=\"isDisabled()\"\n    [required]=\"required()\"\n\n    [attr.aria-label]=\"ariaLabel() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n    [attr.aria-invalid]=\"ariaInvalid() ?? null\"\n\n    (change)=\"handleChange($event)\"\n    (focus)=\"handleFocus($event)\"\n    (blur)=\"handleBlur($event)\">\n\n    @if (placeholder()) {\n        <option\n            value=\"-1\"\n            [disabled]=\"required()\">\n            {{ placeholder() }}\n        </option>\n    }\n\n    @for (\n        option of options();\n        track $index;\n        let index = $index\n    ) {\n        <option\n            [value]=\"index\"\n            [disabled]=\"option.disabled ?? false\">\n            {{ option.label }}\n        </option>\n    }\n\n</select>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/saitec-ui-table.mjs

@@ -0,0 +1,172 @@
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, input, contentChild, ChangeDetectionStrategy, Component, output, contentChildren, signal, computed } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+
+class SuiCell {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: SuiCell, isStandalone: true, selector: "ng-template[suiCell]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiCell, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[suiCell]',
+                    standalone: true
+                }]
+        }] });
+
+function transformAlign(value) {
+    switch (value) {
+        case 'center':
+        case 'right':
+            return value;
+        default:
+            return 'left';
+    }
+}
+class SuiColumn {
+    field = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    header = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "header" }] : /* istanbul ignore next */ []));
+    sortable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sortable" }] : /* istanbul ignore next */ []));
+    width = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
+    // align = input<SuiColumnAlign>('left');
+    align = input('left', { ...(ngDevMode ? { debugName: "align" } : /* istanbul ignore next */ {}), transform: transformAlign });
+    cell = contentChild(SuiCell, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cell" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiColumn, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", type: SuiColumn, isStandalone: true, selector: "sui-column", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "cell", first: true, predicate: SuiCell, descendants: true, isSignal: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiColumn, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sui-column',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], cell: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SuiCell), { isSignal: true }] }] } });
+
+class SuiTable {
+    value = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    loading = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    emptyMessage = input('No records found', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    striped = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "striped" }] : /* istanbul ignore next */ []));
+    hoverable = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoverable" }] : /* istanbul ignore next */ []));
+    bordered = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
+    compact = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    sortMode = input('client', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sortMode" }] : /* istanbul ignore next */ []));
+    rowClicked = output();
+    sortChange = output();
+    columns = contentChildren(SuiColumn, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    sortField = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sortField" }] : /* istanbul ignore next */ []));
+    sortOrder = signal('asc', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sortOrder" }] : /* istanbul ignore next */ []));
+    rows = computed(() => {
+        const rows = [...this.value()];
+        if (this.sortMode() !== 'client' ||
+            !this.sortField()) {
+            return rows;
+        }
+        const field = this.sortField();
+        const order = this.sortOrder();
+        return rows.sort((a, b) => this.compareValues(this.getValue(a, field), this.getValue(b, field), order));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    sort(column) {
+        if (!column.sortable()) {
+            return;
+        }
+        const field = column.field();
+        let order = 'asc';
+        if (this.sortField() === field) {
+            order =
+                this.sortOrder() === 'asc'
+                    ? 'desc'
+                    : 'asc';
+        }
+        this.sortField.set(field);
+        this.sortOrder.set(order);
+        this.sortChange.emit({
+            field,
+            order
+        });
+    }
+    handleRowClick(row) {
+        this.rowClicked.emit(row);
+    }
+    getValue(row, field) {
+        return field
+            .split('.')
+            .reduce((value, key) => {
+            if (value === null ||
+                value === undefined ||
+                typeof value !== 'object') {
+                return undefined;
+            }
+            return value[key];
+        }, row);
+    }
+    isSorted(column) {
+        return (this.sortField() ===
+            column.field());
+    }
+    compareValues(a, b, order) {
+        const multiplier = order === 'asc'
+            ? 1
+            : -1;
+        if (a === null ||
+            a === undefined) {
+            return -1 * multiplier;
+        }
+        if (b === null ||
+            b === undefined) {
+            return 1 * multiplier;
+        }
+        if (typeof a === 'number' &&
+            typeof b === 'number') {
+            return ((a - b) *
+                multiplier);
+        }
+        if (a instanceof Date &&
+            b instanceof Date) {
+            return ((a.getTime() -
+                b.getTime()) *
+                multiplier);
+        }
+        return String(a)
+            .localeCompare(String(b), undefined, {
+            numeric: true,
+            sensitivity: 'base'
+        }) *
+            multiplier;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SuiTable, isStandalone: true, selector: "sui-table", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, sortMode: { classPropertyName: "sortMode", publicName: "sortMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClicked: "rowClicked", sortChange: "sortChange" }, queries: [{ propertyName: "columns", predicate: SuiColumn, isSignal: true }], ngImport: i0, template: "<div\n    class=\"sui-table-container\"\n    [class.sui-table-bordered]=\"bordered()\">\n\n    <div class=\"sui-table-scroll\">\n\n        <table\n            class=\"sui-table\"\n            [class.sui-table-striped]=\"striped()\"\n            [class.sui-table-hoverable]=\"hoverable()\"\n            [class.sui-table-compact]=\"compact()\">\n\n            <thead class=\"sui-table-head\">\n\n                <tr>\n\n                    @for (\n                        column of columns();\n                        track column.field()\n                    ) {\n\n                        <th\n                            class=\"sui-table-header-cell\"\n\n                            [class.sui-table-align-center]=\"\n                                column.align() === 'center'\n                            \"\n\n                            [class.sui-table-align-right]=\"\n                                column.align() === 'right'\n                            \"\n\n                            [class.sui-table-sortable]=\"\n                                column.sortable()\n                            \"\n\n                            [style.width]=\"\n                                column.width() ?? null\n                            \"\n\n                            [attr.aria-sort]=\"\n                                isSorted(column)\n                                    ? (\n                                        sortOrder() === 'asc'\n                                            ? 'ascending'\n                                            : 'descending'\n                                    )\n                                    : null\n                            \">\n\n                            @if (column.sortable()) {\n\n                                <button\n                                    type=\"button\"\n                                    class=\"sui-table-sort-button\"\n                                    (click)=\"sort(column)\">\n\n                                    <span>\n                                        {{ column.header() }}\n                                    </span>\n\n                                    <span\n                                        class=\"sui-table-sort-icon\"\n                                        aria-hidden=\"true\">\n\n                                        @if (\n                                            isSorted(column)\n                                        ) {\n                                            {{\n                                                sortOrder() === 'asc'\n                                                    ? '\u25B2'\n                                                    : '\u25BC'\n                                            }}\n                                        }\n                                        @else {\n                                            \u2195\n                                        }\n\n                                    </span>\n\n                                </button>\n\n                            }\n                            @else {\n\n                                {{ column.header() }}\n\n                            }\n\n                        </th>\n\n                    }\n\n                </tr>\n\n            </thead>\n\n            <tbody class=\"sui-table-body\">\n\n                @if (loading()) {\n\n                    <tr>\n                        <td\n                            class=\"sui-table-state\"\n                            [attr.colspan]=\"\n                                columns().length\n                            \">\n\n                            <div class=\"sui-table-loading\">\n                                Loading...\n                            </div>\n\n                        </td>\n                    </tr>\n\n                }\n                @else {\n\n                    @for (\n                        row of rows();\n                        track $index;\n                        let rowIndex = $index\n                    ) {\n\n                        <tr\n                            class=\"sui-table-row\"\n                            (click)=\"\n                                handleRowClick(row)\n                            \">\n\n                            @for (\n                                column of columns();\n                                track column.field()\n                            ) {\n\n                                <td\n                                    class=\"sui-table-cell\"\n\n                                    [class.sui-table-align-center]=\"\n                                        column.align() === 'center'\n                                    \"\n\n                                    [class.sui-table-align-right]=\"\n                                        column.align() === 'right'\n                                    \">\n\n                                    @if (\n                                        column.cell();\n                                        as cell\n                                    ) {\n\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"\n                                                cell.template\n                                            \"\n\n                                            [ngTemplateOutletContext]=\"{\n                                                $implicit: row,\n                                                value: getValue(\n                                                    row,\n                                                    column.field()\n                                                ),\n                                                rowIndex: rowIndex\n                                            }\">\n                                        </ng-container>\n\n                                    }\n                                    @else {\n\n                                        {{\n                                            getValue(\n                                                row,\n                                                column.field()\n                                            )\n                                        }}\n\n                                    }\n\n                                </td>\n\n                            }\n\n                        </tr>\n\n                    }\n                    @empty {\n\n                        <tr>\n                            <td\n                                class=\"sui-table-state\"\n                                [attr.colspan]=\"\n                                    columns().length\n                                \">\n\n                                {{ emptyMessage() }}\n\n                            </td>\n                        </tr>\n\n                    }\n\n                }\n\n            </tbody>\n\n        </table>\n\n    </div>\n\n</div>", styles: [":host{display:block;width:100%}.sui-table-container{width:100%;box-sizing:border-box;background:var(--sui-table-background);border-radius:var(--sui-table-border-radius)}.sui-table-bordered{border:var(--sui-table-border-width) solid var(--sui-table-border-color)}.sui-table-scroll{width:100%;overflow-x:auto;border-radius:inherit}.sui-table{width:100%;border-collapse:collapse;font-family:inherit;font-size:var(--sui-table-font-size);color:var(--sui-table-color)}.sui-table-head{background:var(--sui-table-header-background)}.sui-table-header-cell{padding:var(--sui-table-cell-padding-y) var(--sui-table-cell-padding-x);font-weight:var(--sui-table-header-font-weight);text-align:left;white-space:nowrap;border-bottom:var(--sui-table-border-width) solid var(--sui-table-border-color)}.sui-table-sort-button{display:inline-flex;align-items:center;gap:.375rem;width:100%;padding:0;color:inherit;background:transparent;border:0;cursor:pointer;font:inherit;font-weight:inherit;text-align:inherit}.sui-table-sort-icon{color:var(--sui-table-sort-icon-color);font-size:.625rem}.sui-table-sort-button:focus-visible{outline:2px solid var(--sui-table-focus-color);outline-offset:var(--sui-focus-ring-offset)}.sui-table-row{transition:background-color .1s ease}.sui-table-row:not(:last-child){border-bottom:var(--sui-table-border-width) solid var(--sui-table-border-color)}.sui-table-hoverable .sui-table-row:hover{background:var(--sui-table-row-hover-background)}.sui-table-striped .sui-table-row:nth-child(2n){background:var(--sui-table-striped-background)}.sui-table-striped.sui-table-hoverable .sui-table-row:hover{background:var(--sui-table-row-hover-background)}.sui-table-cell{padding:var(--sui-table-cell-padding-y) var(--sui-table-cell-padding-x);vertical-align:middle}.sui-table-align-center{text-align:center}.sui-table-align-right{text-align:right}.sui-table-compact .sui-table-cell,.sui-table-compact .sui-table-header-cell{padding:var(--sui-table-compact-padding-y) var(--sui-table-compact-padding-x)}.sui-table-state{padding:2rem 1rem;color:var(--sui-table-state-color);text-align:center}.sui-table-loading{display:flex;align-items:center;justify-content:center;min-height:3rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiTable, decorators: [{
+            type: Component,
+            args: [{ selector: 'sui-table', standalone: true, imports: [
+                        NgTemplateOutlet
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"sui-table-container\"\n    [class.sui-table-bordered]=\"bordered()\">\n\n    <div class=\"sui-table-scroll\">\n\n        <table\n            class=\"sui-table\"\n            [class.sui-table-striped]=\"striped()\"\n            [class.sui-table-hoverable]=\"hoverable()\"\n            [class.sui-table-compact]=\"compact()\">\n\n            <thead class=\"sui-table-head\">\n\n                <tr>\n\n                    @for (\n                        column of columns();\n                        track column.field()\n                    ) {\n\n                        <th\n                            class=\"sui-table-header-cell\"\n\n                            [class.sui-table-align-center]=\"\n                                column.align() === 'center'\n                            \"\n\n                            [class.sui-table-align-right]=\"\n                                column.align() === 'right'\n                            \"\n\n                            [class.sui-table-sortable]=\"\n                                column.sortable()\n                            \"\n\n                            [style.width]=\"\n                                column.width() ?? null\n                            \"\n\n                            [attr.aria-sort]=\"\n                                isSorted(column)\n                                    ? (\n                                        sortOrder() === 'asc'\n                                            ? 'ascending'\n                                            : 'descending'\n                                    )\n                                    : null\n                            \">\n\n                            @if (column.sortable()) {\n\n                                <button\n                                    type=\"button\"\n                                    class=\"sui-table-sort-button\"\n                                    (click)=\"sort(column)\">\n\n                                    <span>\n                                        {{ column.header() }}\n                                    </span>\n\n                                    <span\n                                        class=\"sui-table-sort-icon\"\n                                        aria-hidden=\"true\">\n\n                                        @if (\n                                            isSorted(column)\n                                        ) {\n                                            {{\n                                                sortOrder() === 'asc'\n                                                    ? '\u25B2'\n                                                    : '\u25BC'\n                                            }}\n                                        }\n                                        @else {\n                                            \u2195\n                                        }\n\n                                    </span>\n\n                                </button>\n\n                            }\n                            @else {\n\n                                {{ column.header() }}\n\n                            }\n\n                        </th>\n\n                    }\n\n                </tr>\n\n            </thead>\n\n            <tbody class=\"sui-table-body\">\n\n                @if (loading()) {\n\n                    <tr>\n                        <td\n                            class=\"sui-table-state\"\n                            [attr.colspan]=\"\n                                columns().length\n                            \">\n\n                            <div class=\"sui-table-loading\">\n                                Loading...\n                            </div>\n\n                        </td>\n                    </tr>\n\n                }\n                @else {\n\n                    @for (\n                        row of rows();\n                        track $index;\n                        let rowIndex = $index\n                    ) {\n\n                        <tr\n                            class=\"sui-table-row\"\n                            (click)=\"\n                                handleRowClick(row)\n                            \">\n\n                            @for (\n                                column of columns();\n                                track column.field()\n                            ) {\n\n                                <td\n                                    class=\"sui-table-cell\"\n\n                                    [class.sui-table-align-center]=\"\n                                        column.align() === 'center'\n                                    \"\n\n                                    [class.sui-table-align-right]=\"\n                                        column.align() === 'right'\n                                    \">\n\n                                    @if (\n                                        column.cell();\n                                        as cell\n                                    ) {\n\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"\n                                                cell.template\n                                            \"\n\n                                            [ngTemplateOutletContext]=\"{\n                                                $implicit: row,\n                                                value: getValue(\n                                                    row,\n                                                    column.field()\n                                                ),\n                                                rowIndex: rowIndex\n                                            }\">\n                                        </ng-container>\n\n                                    }\n                                    @else {\n\n                                        {{\n                                            getValue(\n                                                row,\n                                                column.field()\n                                            )\n                                        }}\n\n                                    }\n\n                                </td>\n\n                            }\n\n                        </tr>\n\n                    }\n                    @empty {\n\n                        <tr>\n                            <td\n                                class=\"sui-table-state\"\n                                [attr.colspan]=\"\n                                    columns().length\n                                \">\n\n                                {{ emptyMessage() }}\n\n                            </td>\n                        </tr>\n\n                    }\n\n                }\n\n            </tbody>\n\n        </table>\n\n    </div>\n\n</div>", styles: [":host{display:block;width:100%}.sui-table-container{width:100%;box-sizing:border-box;background:var(--sui-table-background);border-radius:var(--sui-table-border-radius)}.sui-table-bordered{border:var(--sui-table-border-width) solid var(--sui-table-border-color)}.sui-table-scroll{width:100%;overflow-x:auto;border-radius:inherit}.sui-table{width:100%;border-collapse:collapse;font-family:inherit;font-size:var(--sui-table-font-size);color:var(--sui-table-color)}.sui-table-head{background:var(--sui-table-header-background)}.sui-table-header-cell{padding:var(--sui-table-cell-padding-y) var(--sui-table-cell-padding-x);font-weight:var(--sui-table-header-font-weight);text-align:left;white-space:nowrap;border-bottom:var(--sui-table-border-width) solid var(--sui-table-border-color)}.sui-table-sort-button{display:inline-flex;align-items:center;gap:.375rem;width:100%;padding:0;color:inherit;background:transparent;border:0;cursor:pointer;font:inherit;font-weight:inherit;text-align:inherit}.sui-table-sort-icon{color:var(--sui-table-sort-icon-color);font-size:.625rem}.sui-table-sort-button:focus-visible{outline:2px solid var(--sui-table-focus-color);outline-offset:var(--sui-focus-ring-offset)}.sui-table-row{transition:background-color .1s ease}.sui-table-row:not(:last-child){border-bottom:var(--sui-table-border-width) solid var(--sui-table-border-color)}.sui-table-hoverable .sui-table-row:hover{background:var(--sui-table-row-hover-background)}.sui-table-striped .sui-table-row:nth-child(2n){background:var(--sui-table-striped-background)}.sui-table-striped.sui-table-hoverable .sui-table-row:hover{background:var(--sui-table-row-hover-background)}.sui-table-cell{padding:var(--sui-table-cell-padding-y) var(--sui-table-cell-padding-x);vertical-align:middle}.sui-table-align-center{text-align:center}.sui-table-align-right{text-align:right}.sui-table-compact .sui-table-cell,.sui-table-compact .sui-table-header-cell{padding:var(--sui-table-compact-padding-y) var(--sui-table-compact-padding-x)}.sui-table-state{padding:2rem 1rem;color:var(--sui-table-state-color);text-align:center}.sui-table-loading{display:flex;align-items:center;justify-content:center;min-height:3rem}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], sortMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortMode", required: false }] }], rowClicked: [{ type: i0.Output, args: ["rowClicked"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], columns: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SuiColumn), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SuiCell, SuiColumn, SuiTable };
+//# sourceMappingURL=saitec-ui-table.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"saitec-ui-table.mjs","sources":["../../../projects/ui/table/src/cell.directive.ts","../../../projects/ui/table/src/column.component.ts","../../../projects/ui/table/src/table.component.ts","../../../projects/ui/table/src/table.component.html","../../../projects/ui/table/src/saitec-ui-table.ts"],"sourcesContent":["import {\r\n    Directive,\r\n    TemplateRef,\r\n    inject\r\n} from '@angular/core';\r\n\r\nexport interface SuiCellContext<T = unknown> {\r\n    $implicit: T;\r\n    value: unknown;\r\n    rowIndex: number;\r\n}\r\n\r\n@Directive({\r\n    selector: 'ng-template[suiCell]',\r\n    standalone: true\r\n})\r\nexport class SuiCell<T = unknown> {\r\n\r\n    readonly template =\r\n        inject<TemplateRef<SuiCellContext<T>>>(\r\n            TemplateRef\r\n        );\r\n}","import { ChangeDetectionStrategy, Component, contentChild, input } from '@angular/core';\r\n\r\nimport { SuiCell } from './cell.directive';\r\n\r\nexport type SuiColumnAlign = 'left' | 'center' | 'right';\r\n\r\nfunction transformAlign(value: string): SuiColumnAlign {\r\n  switch (value) {\r\n    case 'center':\r\n    case 'right':\r\n      return value;\r\n\r\n    default:\r\n      return 'left';\r\n  }\r\n}\r\n\r\n@Component({\r\n  selector: 'sui-column',\r\n  standalone: true,\r\n  template: '',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class SuiColumn {\r\n  field = input.required<string>();\r\n\r\n  header = input<string>();\r\n\r\n  sortable = input(false);\r\n\r\n  width = input<string>();\r\n\r\n  // align = input<SuiColumnAlign>('left');\r\n\r\n  align = input('left' as SuiColumnAlign, {\r\n    transform: transformAlign,\r\n  });\r\n\r\n  readonly cell = contentChild(SuiCell);\r\n}\r\n","import {\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    contentChildren,\n    input,\n    output,\n    signal\n} from '@angular/core';\n\nimport {\n    NgTemplateOutlet\n} from '@angular/common';\n\nimport {\n    SuiColumn\n} from './column.component';\n\nexport type SuiSortOrder =\n    | 'asc'\n    | 'desc';\n\nexport interface SuiTableSort {\n    field: string;\n    order: SuiSortOrder;\n}\n\n@Component({\n    selector: 'sui-table',\n    standalone: true,\n    imports: [\n        NgTemplateOutlet\n    ],\n    templateUrl: './table.component.html',\n    styleUrl: './table.component.css',\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SuiTable<T extends object = Record<string, unknown>> {\n\n    value = input<T[]>([]);\n\n    loading = input(false);\n\n    emptyMessage = input('No records found');\n\n    striped = input(false);\n\n    hoverable = input(true);\n\n    bordered = input(true);\n\n    compact = input(false);\n\n    sortMode = input<'client' | 'external'>('client');\n\n    rowClicked = output<T>();\n\n    sortChange = output<SuiTableSort>();\n\n    protected readonly columns =\n        contentChildren(SuiColumn);\n\n    protected readonly sortField =\n        signal<string | null>(null);\n\n    protected readonly sortOrder =\n        signal<SuiSortOrder>('asc');\n\n    protected readonly rows =\n        computed(() => {\n\n            const rows =\n                [...this.value()];\n\n            if (\n                this.sortMode() !== 'client' ||\n                !this.sortField()\n            ) {\n                return rows;\n            }\n\n            const field =\n                this.sortField()!;\n\n            const order =\n                this.sortOrder();\n\n            return rows.sort(\n                (a, b) =>\n                    this.compareValues(\n                        this.getValue(a, field),\n                        this.getValue(b, field),\n                        order\n                    )\n            );\n        });\n\n    protected sort(\n        column: SuiColumn\n    ): void {\n\n        if (!column.sortable()) {\n            return;\n        }\n\n        const field =\n            column.field();\n\n        let order:\n            SuiSortOrder = 'asc';\n\n        if (\n            this.sortField() === field\n        ) {\n            order =\n                this.sortOrder() === 'asc'\n                    ? 'desc'\n                    : 'asc';\n        }\n\n        this.sortField.set(field);\n        this.sortOrder.set(order);\n\n        this.sortChange.emit({\n            field,\n            order\n        });\n    }\n\n    protected handleRowClick(\n        row: T\n    ): void {\n        this.rowClicked.emit(row);\n    }\n\n    protected getValue(\n        row: T,\n        field: string\n    ): unknown {\n\n        return field\n            .split('.')\n            .reduce<unknown>(\n                (value, key) => {\n\n                    if (\n                        value === null ||\n                        value === undefined ||\n                        typeof value !== 'object'\n                    ) {\n                        return undefined;\n                    }\n\n                    return (\n                        value as\n                            Record<string, unknown>\n                    )[key];\n\n                },\n                row\n            );\n    }\n\n    protected isSorted(\n        column: SuiColumn\n    ): boolean {\n        return (\n            this.sortField() ===\n            column.field()\n        );\n    }\n\n    private compareValues(\n        a: unknown,\n        b: unknown,\n        order: SuiSortOrder\n    ): number {\n\n        const multiplier =\n            order === 'asc'\n                ? 1\n                : -1;\n\n        if (\n            a === null ||\n            a === undefined\n        ) {\n            return -1 * multiplier;\n        }\n\n        if (\n            b === null ||\n            b === undefined\n        ) {\n            return 1 * multiplier;\n        }\n\n        if (\n            typeof a === 'number' &&\n            typeof b === 'number'\n        ) {\n            return (\n                (a - b) *\n                multiplier\n            );\n        }\n\n        if (\n            a instanceof Date &&\n            b instanceof Date\n        ) {\n            return (\n                (a.getTime() -\n                    b.getTime()) *\n                multiplier\n            );\n        }\n\n        return String(a)\n            .localeCompare(\n                String(b),\n                undefined,\n                {\n                    numeric: true,\n                    sensitivity: 'base'\n                }\n            ) *\n            multiplier;\n    }\n}","<div\n    class=\"sui-table-container\"\n    [class.sui-table-bordered]=\"bordered()\">\n\n    <div class=\"sui-table-scroll\">\n\n        <table\n            class=\"sui-table\"\n            [class.sui-table-striped]=\"striped()\"\n            [class.sui-table-hoverable]=\"hoverable()\"\n            [class.sui-table-compact]=\"compact()\">\n\n            <thead class=\"sui-table-head\">\n\n                <tr>\n\n                    @for (\n                        column of columns();\n                        track column.field()\n                    ) {\n\n                        <th\n                            class=\"sui-table-header-cell\"\n\n                            [class.sui-table-align-center]=\"\n                                column.align() === 'center'\n                            \"\n\n                            [class.sui-table-align-right]=\"\n                                column.align() === 'right'\n                            \"\n\n                            [class.sui-table-sortable]=\"\n                                column.sortable()\n                            \"\n\n                            [style.width]=\"\n                                column.width() ?? null\n                            \"\n\n                            [attr.aria-sort]=\"\n                                isSorted(column)\n                                    ? (\n                                        sortOrder() === 'asc'\n                                            ? 'ascending'\n                                            : 'descending'\n                                    )\n                                    : null\n                            \">\n\n                            @if (column.sortable()) {\n\n                                <button\n                                    type=\"button\"\n                                    class=\"sui-table-sort-button\"\n                                    (click)=\"sort(column)\">\n\n                                    <span>\n                                        {{ column.header() }}\n                                    </span>\n\n                                    <span\n                                        class=\"sui-table-sort-icon\"\n                                        aria-hidden=\"true\">\n\n                                        @if (\n                                            isSorted(column)\n                                        ) {\n                                            {{\n                                                sortOrder() === 'asc'\n                                                    ? '▲'\n                                                    : '▼'\n                                            }}\n                                        }\n                                        @else {\n                                            ↕\n                                        }\n\n                                    </span>\n\n                                </button>\n\n                            }\n                            @else {\n\n                                {{ column.header() }}\n\n                            }\n\n                        </th>\n\n                    }\n\n                </tr>\n\n            </thead>\n\n            <tbody class=\"sui-table-body\">\n\n                @if (loading()) {\n\n                    <tr>\n                        <td\n                            class=\"sui-table-state\"\n                            [attr.colspan]=\"\n                                columns().length\n                            \">\n\n                            <div class=\"sui-table-loading\">\n                                Loading...\n                            </div>\n\n                        </td>\n                    </tr>\n\n                }\n                @else {\n\n                    @for (\n                        row of rows();\n                        track $index;\n                        let rowIndex = $index\n                    ) {\n\n                        <tr\n                            class=\"sui-table-row\"\n                            (click)=\"\n                                handleRowClick(row)\n                            \">\n\n                            @for (\n                                column of columns();\n                                track column.field()\n                            ) {\n\n                                <td\n                                    class=\"sui-table-cell\"\n\n                                    [class.sui-table-align-center]=\"\n                                        column.align() === 'center'\n                                    \"\n\n                                    [class.sui-table-align-right]=\"\n                                        column.align() === 'right'\n                                    \">\n\n                                    @if (\n                                        column.cell();\n                                        as cell\n                                    ) {\n\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"\n                                                cell.template\n                                            \"\n\n                                            [ngTemplateOutletContext]=\"{\n                                                $implicit: row,\n                                                value: getValue(\n                                                    row,\n                                                    column.field()\n                                                ),\n                                                rowIndex: rowIndex\n                                            }\">\n                                        </ng-container>\n\n                                    }\n                                    @else {\n\n                                        {{\n                                            getValue(\n                                                row,\n                                                column.field()\n                                            )\n                                        }}\n\n                                    }\n\n                                </td>\n\n                            }\n\n                        </tr>\n\n                    }\n                    @empty {\n\n                        <tr>\n                            <td\n                                class=\"sui-table-state\"\n                                [attr.colspan]=\"\n                                    columns().length\n                                \">\n\n                                {{ emptyMessage() }}\n\n                            </td>\n                        </tr>\n\n                    }\n\n                }\n\n            </tbody>\n\n        </table>\n\n    </div>\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-tabs.mjs

@@ -0,0 +1,170 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, model, output, forwardRef, ChangeDetectionStrategy, Component, inject, viewChild, input, computed, contentChildren } from '@angular/core';
+
+const SUI_TABS_CONTEXT = new InjectionToken('SUI_TABS_CONTEXT');
+
+class SuiTabs {
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    tabChanged = output();
+    select(value) {
+        if (this.value() === value) {
+            return;
+        }
+        this.value.set(value);
+        this.tabChanged.emit(value);
+    }
+    isActive(value) {
+        return this.value() === value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: SuiTabs, isStandalone: true, selector: "sui-tabs", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", tabChanged: "tabChanged" }, providers: [
+            {
+                provide: SUI_TABS_CONTEXT,
+                useExisting: forwardRef(() => SuiTabs)
+            }
+        ], ngImport: i0, template: "<div class=\"sui-tabs\">\n    <ng-content />\n</div>", styles: [":host{display:block;width:100%}.sui-tabs{display:block;width:100%;color:var(--sui-tabs-text);background:var(--sui-color-surface)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiTabs, decorators: [{
+            type: Component,
+            args: [{ selector: 'sui-tabs', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: SUI_TABS_CONTEXT,
+                            useExisting: forwardRef(() => SuiTabs)
+                        }
+                    ], template: "<div class=\"sui-tabs\">\n    <ng-content />\n</div>", styles: [":host{display:block;width:100%}.sui-tabs{display:block;width:100%;color:var(--sui-tabs-text);background:var(--sui-color-surface)}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], tabChanged: [{ type: i0.Output, args: ["tabChanged"] }] } });
+
+class SuiTab {
+    tabs = inject(SUI_TABS_CONTEXT);
+    button = viewChild.required('button', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "button" }] : /* istanbul ignore next */ []));
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    active = computed(() => this.tabs.isActive(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    select() {
+        if (this.disabled()) {
+            return;
+        }
+        this.tabs.select(this.value());
+    }
+    selectAndFocus() {
+        if (this.disabled()) {
+            return;
+        }
+        this.select();
+        this.button()
+            .nativeElement
+            .focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", type: SuiTab, isStandalone: true, selector: "sui-tab", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n    #button\n    type=\"button\"\n    class=\"sui-tab\"\n\n    [class.sui-tab-active]=\"active()\"\n\n    [disabled]=\"disabled()\"\n\n    role=\"tab\"\n\n    [attr.aria-selected]=\"active()\"\n\n    [attr.tabindex]=\"\n        active()\n            ? 0\n            : -1\n    \"\n\n    (click)=\"select()\">\n\n    <ng-content />\n\n</button>", styles: [":host{display:contents}.sui-tab{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-height:var(--sui-control-height-lg);padding:var(--sui-tab-padding-y) var(--sui-tab-padding-x);color:var(--sui-tab-text);background:transparent;border:0;cursor:pointer;font-family:inherit;font-size:var(--sui-control-font-size-sm);font-weight:var(--sui-font-weight-medium);white-space:nowrap;outline:none;transition:color var(--sui-duration-normal) var(--sui-easing-standard),background-color var(--sui-duration-normal) var(--sui-easing-standard)}.sui-tab:hover:not(:disabled){color:var(--sui-tab-text-hover);background:var(--sui-tab-background-hover)}.sui-tab-active{color:var(--sui-tab-text-active)}.sui-tab-active:after{content:\"\";position:absolute;right:0;bottom:-1px;left:0;height:var(--sui-border-width-strong);background:var(--sui-tab-active-border)}.sui-tab:focus-visible{box-shadow:inset 0 0 0 2px var(--sui-tab-focus-color)}.sui-tab:disabled{cursor:not-allowed;color:var(--sui-tab-disabled-text);opacity:.6}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiTab, decorators: [{
+            type: Component,
+            args: [{ selector: 'sui-tab', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    #button\n    type=\"button\"\n    class=\"sui-tab\"\n\n    [class.sui-tab-active]=\"active()\"\n\n    [disabled]=\"disabled()\"\n\n    role=\"tab\"\n\n    [attr.aria-selected]=\"active()\"\n\n    [attr.tabindex]=\"\n        active()\n            ? 0\n            : -1\n    \"\n\n    (click)=\"select()\">\n\n    <ng-content />\n\n</button>", styles: [":host{display:contents}.sui-tab{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-height:var(--sui-control-height-lg);padding:var(--sui-tab-padding-y) var(--sui-tab-padding-x);color:var(--sui-tab-text);background:transparent;border:0;cursor:pointer;font-family:inherit;font-size:var(--sui-control-font-size-sm);font-weight:var(--sui-font-weight-medium);white-space:nowrap;outline:none;transition:color var(--sui-duration-normal) var(--sui-easing-standard),background-color var(--sui-duration-normal) var(--sui-easing-standard)}.sui-tab:hover:not(:disabled){color:var(--sui-tab-text-hover);background:var(--sui-tab-background-hover)}.sui-tab-active{color:var(--sui-tab-text-active)}.sui-tab-active:after{content:\"\";position:absolute;right:0;bottom:-1px;left:0;height:var(--sui-border-width-strong);background:var(--sui-tab-active-border)}.sui-tab:focus-visible{box-shadow:inset 0 0 0 2px var(--sui-tab-focus-color)}.sui-tab:disabled{cursor:not-allowed;color:var(--sui-tab-disabled-text);opacity:.6}\n"] }]
+        }], propDecorators: { button: [{ type: i0.ViewChild, args: ['button', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+class SuiTabList {
+    tabs = contentChildren(SuiTab, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    scrollable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollable" }] : /* istanbul ignore next */ []));
+    handleKeyDown(event) {
+        if (event.key !== 'ArrowLeft' &&
+            event.key !== 'ArrowRight' &&
+            event.key !== 'Home' &&
+            event.key !== 'End') {
+            return;
+        }
+        const tabs = this.tabs();
+        if (!tabs.length) {
+            return;
+        }
+        const currentIndex = tabs.findIndex(tab => tab.active());
+        event.preventDefault();
+        if (event.key === 'Home') {
+            this.focusEnabled(0, 1);
+            return;
+        }
+        if (event.key === 'End') {
+            this.focusEnabled(tabs.length - 1, -1);
+            return;
+        }
+        const direction = event.key === 'ArrowRight'
+            ? 1
+            : -1;
+        let index = currentIndex;
+        if (index < 0) {
+            index = 0;
+        }
+        for (let attempt = 0; attempt < tabs.length; attempt++) {
+            index += direction;
+            if (index >= tabs.length) {
+                index = 0;
+            }
+            if (index < 0) {
+                index = tabs.length - 1;
+            }
+            const tab = tabs[index];
+            if (!tab.disabled()) {
+                tab.selectAndFocus();
+                return;
+            }
+        }
+    }
+    focusEnabled(start, direction) {
+        const tabs = this.tabs();
+        let index = start;
+        while (index >= 0 &&
+            index < tabs.length) {
+            const tab = tabs[index];
+            if (!tab.disabled()) {
+                tab.selectAndFocus();
+                return;
+            }
+            index += direction;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiTabList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", type: SuiTabList, isStandalone: true, selector: "sui-tablist", inputs: { scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "tabs", predicate: SuiTab, isSignal: true }], ngImport: i0, template: "<div\n    class=\"sui-tablist\"\n    [class.sui-tablist-scrollable]=\"scrollable()\"\n    role=\"tablist\"\n    (keydown)=\"handleKeyDown($event)\">\n\n    <ng-content />\n\n</div>", styles: [":host{display:block}.sui-tablist{display:flex;align-items:stretch;min-width:0;border-bottom:1px solid var(--sui-tabs-border);background:var(--sui-color-surface)}.sui-tablist-scrollable{overflow-x:auto;overflow-y:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiTabList, decorators: [{
+            type: Component,
+            args: [{ selector: 'sui-tablist', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"sui-tablist\"\n    [class.sui-tablist-scrollable]=\"scrollable()\"\n    role=\"tablist\"\n    (keydown)=\"handleKeyDown($event)\">\n\n    <ng-content />\n\n</div>", styles: [":host{display:block}.sui-tablist{display:flex;align-items:stretch;min-width:0;border-bottom:1px solid var(--sui-tabs-border);background:var(--sui-color-surface)}.sui-tablist-scrollable{overflow-x:auto;overflow-y:hidden}\n"] }]
+        }], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SuiTab), { isSignal: true }] }], scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }] } });
+
+class SuiTabPanels {
+    bordered = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiTabPanels, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: SuiTabPanels, isStandalone: true, selector: "sui-tabpanels", inputs: { bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n    class=\"sui-tabpanels\"\n    [class.sui-tabpanels-bordered]=\"bordered()\">\n\n    <ng-content />\n\n</div>", styles: [":host{display:block}.sui-tabpanels{display:block;padding:var(--sui-tabpanel-padding)}.sui-tabpanels-bordered{border:1px solid var(--sui-tabs-border);border-top:0;border-radius:0 0 var(--sui-container-radius) var(--sui-container-radius)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiTabPanels, decorators: [{
+            type: Component,
+            args: [{ selector: 'sui-tabpanels', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"sui-tabpanels\"\n    [class.sui-tabpanels-bordered]=\"bordered()\">\n\n    <ng-content />\n\n</div>", styles: [":host{display:block}.sui-tabpanels{display:block;padding:var(--sui-tabpanel-padding)}.sui-tabpanels-bordered{border:1px solid var(--sui-tabs-border);border-top:0;border-radius:0 0 var(--sui-container-radius) var(--sui-container-radius)}\n"] }]
+        }], propDecorators: { bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }] } });
+
+class SuiTabPanel {
+    tabs = inject(SUI_TABS_CONTEXT);
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    active = computed(() => this.tabs.isActive(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiTabPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SuiTabPanel, isStandalone: true, selector: "sui-tabpanel", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (active()) {\n\n    <div\n        class=\"sui-tabpanel\"\n        role=\"tabpanel\">\n\n        <ng-content />\n\n    </div>\n\n}", styles: [":host{display:block}.sui-tabpanel{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiTabPanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'sui-tabpanel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (active()) {\n\n    <div\n        class=\"sui-tabpanel\"\n        role=\"tabpanel\">\n\n        <ng-content />\n\n    </div>\n\n}", styles: [":host{display:block}.sui-tabpanel{display:block}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SUI_TABS_CONTEXT, SuiTab, SuiTabList, SuiTabPanel, SuiTabPanels, SuiTabs };
+//# sourceMappingURL=saitec-ui-tabs.mjs.map