@origostudio/origo-design 0.0.49 → 0.0.51

package/dist/packages/angular-renderer/src/components/primitives/multi-select/multi-select.component.js

@@ -0,0 +1,323 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiSelectComponent = void 0;
+const tslib_1 = require("tslib");
+const core_1 = require("@angular/core");
+const common_1 = require("@angular/common");
+const experience_adapter_service_1 = require("../../../adapters/web/experience-adapter.service");
+const selection_utils_1 = require("../select/selection-utils");
+let MultiSelectComponent = (() => {
+    let _classDecorators = [(0, core_1.Component)({
+            selector: 'origo-multi-select',
+            standalone: true,
+            templateUrl: './multi-select.component.html',
+            styleUrls: ['./multi-select.component.scss'],
+            changeDetection: core_1.ChangeDetectionStrategy.OnPush,
+            encapsulation: core_1.ViewEncapsulation.ShadowDom,
+            host: {
+                '[class.origo-multi-select]': 'true',
+                '[attr.data-testid]': 'contract().id ?? ""',
+                '[class.origo-multi-select--fluid]': 'computedFluid()',
+                '[class.origo-multi-select--outlined]': 'computedVariant() === "outlined"',
+                '[class.origo-multi-select--filled]': 'computedVariant() === "filled"',
+                '[class.origo-multi-select--invalid]': 'computedInvalid()',
+                '[class.origo-multi-select--disabled]': 'computedDisabled()',
+                '[class.origo-multi-select--readonly]': 'computedReadonly()',
+            },
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _instanceExtraInitializers = [];
+    let _onDocumentClick_decorators;
+    var MultiSelectComponent = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _onDocumentClick_decorators = [(0, core_1.HostListener)('document:click', ['$event'])];
+            tslib_1.__esDecorate(this, null, _onDocumentClick_decorators, { kind: "method", name: "onDocumentClick", static: false, private: false, access: { has: obj => "onDocumentClick" in obj, get: obj => obj.onDocumentClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+            tslib_1.__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            MultiSelectComponent = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static contractSchema = {
+            permissions: 'object',
+            rules: 'object',
+            metadata: 'object',
+            options: 'array',
+            value: 'array',
+            optionLabel: 'string',
+            optionValue: 'string',
+            placeholder: 'string',
+            filter: 'boolean',
+            filterBy: 'string',
+            filterPlaceholder: 'string',
+            showToggleAll: 'boolean',
+            maxSelectedLabels: 'number',
+            selectedItemsLabel: 'string',
+            display: 'string',
+            clearable: 'boolean',
+            virtualScroll: 'boolean',
+            itemSize: 'number',
+            loading: 'boolean',
+            disabled: 'boolean',
+            readonly: 'boolean',
+            required: 'boolean',
+            invalid: 'boolean',
+            errorText: 'string',
+            helpText: 'string',
+            variant: 'string',
+            fluid: 'boolean',
+            'aria-label': 'string',
+            'aria-describedby': 'string',
+        };
+        static strictContract = false;
+        contract = (tslib_1.__runInitializers(this, _instanceExtraInitializers), core_1.input.required());
+        value = (0, core_1.model)([]);
+        isOpen = (0, core_1.signal)(false);
+        filterQuery = (0, core_1.signal)('');
+        activeIndex = (0, core_1.signal)(-1);
+        computedNormalizedOptions = (0, core_1.computed)(() => {
+            const props = this.contract().props;
+            return (0, selection_utils_1.normalizeOptions)(props?.options, props?.optionLabel, props?.optionValue);
+        });
+        filteredOptions = (0, core_1.computed)(() => {
+            const opts = this.computedNormalizedOptions();
+            if (!this.computedFilter() && !this.filterQuery()) {
+                return opts;
+            }
+            return (0, selection_utils_1.filterOptions)(opts, this.filterQuery(), 'contains');
+        });
+        computedSelectedOptions = (0, core_1.computed)(() => {
+            const current = new Set(this.value());
+            return this.computedNormalizedOptions().filter(opt => current.has(opt.value));
+        });
+        computedPlaceholder = (0, core_1.computed)(() => this.contract().props?.placeholder ?? 'Select options');
+        computedDisabled = (0, core_1.computed)(() => !!this.contract().props?.disabled);
+        computedReadonly = (0, core_1.computed)(() => !!this.contract().props?.readonly);
+        computedRequired = (0, core_1.computed)(() => !!this.contract().props?.required);
+        computedInvalid = (0, core_1.computed)(() => !!this.contract().props?.invalid);
+        computedFilter = (0, core_1.computed)(() => !!this.contract().props?.filter);
+        computedFilterPlaceholder = (0, core_1.computed)(() => this.contract().props?.filterPlaceholder ?? 'Search...');
+        computedShowToggleAll = (0, core_1.computed)(() => this.contract().props?.showToggleAll ?? true);
+        computedClearable = (0, core_1.computed)(() => !!this.contract().props?.clearable);
+        computedDisplay = (0, core_1.computed)(() => this.contract().props?.display ?? 'comma');
+        computedMaxSelectedLabels = (0, core_1.computed)(() => this.contract().props?.maxSelectedLabels ?? 3);
+        computedSelectedItemsLabel = (0, core_1.computed)(() => this.contract().props?.selectedItemsLabel ?? '{0} items selected');
+        computedVariant = (0, core_1.computed)(() => this.contract().props?.variant ?? 'outlined');
+        computedFluid = (0, core_1.computed)(() => !!this.contract().props?.fluid);
+        computedErrorText = (0, core_1.computed)(() => this.contract().props?.errorText ?? '');
+        computedHelpText = (0, core_1.computed)(() => this.contract().props?.helpText ?? '');
+        computedAriaLabel = (0, core_1.computed)(() => {
+            const label = this.contract().props?.['aria-label'];
+            if (label !== undefined && label !== null && String(label).trim() !== '') {
+                return String(label);
+            }
+            return this.computedPlaceholder();
+        });
+        computedAriaDescribedBy = (0, core_1.computed)(() => {
+            const parts = [];
+            const desc = this.contract().props?.['aria-describedby'];
+            if (desc)
+                parts.push(String(desc));
+            if (this.computedErrorText())
+                parts.push(`${this.contract().id}-error`);
+            if (this.computedHelpText())
+                parts.push(`${this.contract().id}-help`);
+            return parts.length > 0 ? parts.join(' ') : undefined;
+        });
+        displaySummary = (0, core_1.computed)(() => {
+            const selected = this.computedSelectedOptions();
+            const count = selected.length;
+            if (count === 0)
+                return '';
+            const max = this.computedMaxSelectedLabels();
+            if (count <= max) {
+                return selected.map(s => s.label).join(', ');
+            }
+            const template = this.computedSelectedItemsLabel();
+            return template.replace('{0}', String(count));
+        });
+        isAllSelected = (0, core_1.computed)(() => {
+            const filtered = this.filteredOptions().filter(o => !o.disabled);
+            if (filtered.length === 0)
+                return false;
+            const current = new Set(this.value());
+            return filtered.every(o => current.has(o.value));
+        });
+        experienceAdapter = (0, core_1.inject)(experience_adapter_service_1.WebExperienceAdapterService);
+        platformId = (0, core_1.inject)(core_1.PLATFORM_ID);
+        elementRef = (0, core_1.inject)(core_1.ElementRef);
+        constructor() {
+            (0, core_1.effect)(() => {
+                const contractVal = this.contract().props?.value;
+                (0, core_1.untracked)(() => {
+                    if (Array.isArray(contractVal)) {
+                        const current = this.value();
+                        if (current.length !== contractVal.length ||
+                            !current.every((v, i) => v === contractVal[i])) {
+                            this.value.set([...contractVal]);
+                        }
+                    }
+                });
+            });
+        }
+        toggleOpen() {
+            if (this.computedDisabled() || this.computedReadonly())
+                return;
+            const next = !this.isOpen();
+            this.isOpen.set(next);
+            if (next) {
+                this.filterQuery.set('');
+                this.activeIndex.set(0);
+            }
+        }
+        isSelected(opt) {
+            return this.value().includes(opt.value);
+        }
+        toggleOption(optionValue) {
+            if (this.computedDisabled() || this.computedReadonly())
+                return;
+            const current = [...this.value()];
+            const idx = current.indexOf(optionValue);
+            if (idx >= 0) {
+                current.splice(idx, 1);
+            }
+            else {
+                current.push(optionValue);
+            }
+            this.value.set(current);
+            this.experienceAdapter.updateState(this.contract().id, 'value', current);
+        }
+        toggleAll() {
+            if (this.computedDisabled() || this.computedReadonly())
+                return;
+            const filtered = this.filteredOptions().filter(o => !o.disabled);
+            let nextValue;
+            if (this.isAllSelected()) {
+                const filteredSet = new Set(filtered.map(o => o.value));
+                nextValue = this.value().filter(v => !filteredSet.has(v));
+            }
+            else {
+                const set = new Set(this.value());
+                for (const opt of filtered) {
+                    set.add(opt.value);
+                }
+                nextValue = Array.from(set);
+            }
+            this.value.set(nextValue);
+            this.experienceAdapter.updateState(this.contract().id, 'value', nextValue);
+        }
+        removeOption(optionValue, event) {
+            event?.stopPropagation();
+            if (this.computedDisabled() || this.computedReadonly())
+                return;
+            const next = this.value().filter(v => v !== optionValue);
+            this.value.set(next);
+            this.experienceAdapter.updateState(this.contract().id, 'value', next);
+        }
+        clear(event) {
+            if (this.computedDisabled() || this.computedReadonly())
+                return;
+            event?.stopPropagation();
+            this.value.set([]);
+            this.experienceAdapter.updateState(this.contract().id, 'value', []);
+        }
+        onFilterInput(event) {
+            const target = event.target;
+            this.filterQuery.set(target.value);
+            this.activeIndex.set(0);
+        }
+        onKeydown(event) {
+            if (this.computedDisabled() || this.computedReadonly())
+                return;
+            const opts = this.filteredOptions();
+            const count = opts.length;
+            switch (event.key) {
+                case 'ArrowDown': {
+                    event.preventDefault();
+                    if (!this.isOpen()) {
+                        this.isOpen.set(true);
+                        this.activeIndex.set(0);
+                    }
+                    else if (count > 0) {
+                        const next = (this.activeIndex() + 1) % count;
+                        this.activeIndex.set(next);
+                    }
+                    break;
+                }
+                case 'ArrowUp': {
+                    event.preventDefault();
+                    if (!this.isOpen()) {
+                        this.isOpen.set(true);
+                        this.activeIndex.set(count - 1);
+                    }
+                    else if (count > 0) {
+                        const prev = (this.activeIndex() - 1 + count) % count;
+                        this.activeIndex.set(prev);
+                    }
+                    break;
+                }
+                case 'Enter':
+                case ' ': {
+                    const target = event.target;
+                    if (event.key === ' ' && target && target.tagName === 'INPUT') {
+                        return;
+                    }
+                    event.preventDefault();
+                    if (this.isOpen()) {
+                        const idx = this.activeIndex();
+                        if (idx >= 0 && idx < count && !opts[idx].disabled) {
+                            this.toggleOption(opts[idx].value);
+                        }
+                    }
+                    else {
+                        this.isOpen.set(true);
+                    }
+                    break;
+                }
+                case 'Escape': {
+                    if (this.isOpen()) {
+                        event.preventDefault();
+                        this.isOpen.set(false);
+                    }
+                    break;
+                }
+                case 'Tab': {
+                    if (this.isOpen()) {
+                        this.isOpen.set(false);
+                    }
+                    break;
+                }
+                case 'Home': {
+                    if (this.isOpen() && count > 0) {
+                        event.preventDefault();
+                        this.activeIndex.set(0);
+                    }
+                    break;
+                }
+                case 'End': {
+                    if (this.isOpen() && count > 0) {
+                        event.preventDefault();
+                        this.activeIndex.set(count - 1);
+                    }
+                    break;
+                }
+            }
+        }
+        onDocumentClick(event) {
+            if (!(0, common_1.isPlatformBrowser)(this.platformId))
+                return;
+            const clickedInside = this.elementRef.nativeElement.contains(event.target);
+            if (!clickedInside && this.isOpen()) {
+                this.isOpen.set(false);
+            }
+        }
+        static {
+            tslib_1.__runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return MultiSelectComponent = _classThis;
+})();
+exports.MultiSelectComponent = MultiSelectComponent;
+//# sourceMappingURL=multi-select.component.js.map

package/dist/packages/angular-renderer/src/components/primitives/multi-select/multi-select.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select.component.js","sourceRoot":"","sources":["../../../../../../../packages/angular-renderer/src/components/primitives/multi-select/multi-select.component.ts"],"names":[],"mappings":"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"}

package/dist/packages/angular-renderer/src/components/primitives/select/select.component.d.ts

@@ -1,19 +1,39 @@
 import { InteractionContract } from '@origostudio/core';
 import { OrigoAdapter } from '../../../adapters/web/adapter';
+import { type NormalizedOption } from './selection-utils';
+export type { NormalizedOption };
 export interface SelectProps {
-    permissions?: Record<string, string>;
-    rules?: Record<string, unknown>;
-    metadata?: Record<string, unknown>;
-    options: Array<{
-        value: string;
-        label: string;
-    }>;
-    value?: string;
-    disabled?: boolean;
+    id?: string;
+    value?: unknown;
+    options: Array<unknown>;
+    optionLabel?: string;
+    optionValue?: string;
+    optionGroupLabel?: string;
+    optionGroupChildren?: string;
     placeholder?: string;
+    filter?: boolean;
+    filterBy?: string;
+    filterMatchMode?: 'contains' | 'startsWith' | 'endsWith';
+    filterPlaceholder?: string;
+    editable?: boolean;
+    clearable?: boolean;
+    appendTo?: string;
+    virtualScroll?: boolean;
+    itemSize?: number;
+    loading?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    errorText?: string;
+    helpText?: string;
+    variant?: 'outlined' | 'filled';
+    fluid?: boolean;
     'aria-label'?: string;
     'aria-describedby'?: string;
-    required?: boolean;
+    permissions?: Record<string, string>;
+    rules?: Record<string, unknown>;
+    metadata?: Record<string, unknown>;
 }
 export declare class SelectComponent implements OrigoAdapter<SelectProps> {
     static readonly contractSchema: {
@@ -22,24 +42,65 @@ export declare class SelectComponent implements OrigoAdapter<SelectProps> {
         metadata: string;
         options: string;
         value: string;
-        disabled: string;
+        optionLabel: string;
+        optionValue: string;
+        optionGroupLabel: string;
+        optionGroupChildren: string;
         placeholder: string;
+        filter: string;
+        filterBy: string;
+        filterMatchMode: string;
+        filterPlaceholder: string;
+        editable: string;
+        clearable: string;
+        appendTo: string;
+        virtualScroll: string;
+        itemSize: string;
+        loading: string;
+        disabled: string;
+        readonly: string;
         required: string;
+        invalid: string;
+        errorText: string;
+        helpText: string;
+        variant: string;
+        fluid: string;
+        'aria-label': string;
+        'aria-describedby': string;
     };
     static readonly strictContract = false;
     contract: import("@angular/core").InputSignal<InteractionContract<SelectProps>>;
-    value: import("@angular/core").ModelSignal<string>;
-    computedOptions: import("@angular/core").Signal<{
-        value: string;
-        label: string;
-    }[]>;
+    value: import("@angular/core").ModelSignal<unknown>;
+    isOpen: import("@angular/core").WritableSignal<boolean>;
+    filterQuery: import("@angular/core").WritableSignal<string>;
+    activeIndex: import("@angular/core").WritableSignal<number>;
+    computedNormalizedOptions: import("@angular/core").Signal<NormalizedOption[]>;
+    computedOptions: import("@angular/core").Signal<NormalizedOption[]>;
+    filteredOptions: import("@angular/core").Signal<NormalizedOption[]>;
+    selectedOption: import("@angular/core").Signal<NormalizedOption | undefined>;
+    selectedLabel: import("@angular/core").Signal<string>;
     computedPlaceholder: import("@angular/core").Signal<string>;
     computedDisabled: import("@angular/core").Signal<boolean>;
+    computedReadonly: import("@angular/core").Signal<boolean>;
     computedRequired: import("@angular/core").Signal<boolean>;
-    computedAriaLabel: import("@angular/core").Signal<string | undefined>;
+    computedInvalid: import("@angular/core").Signal<boolean>;
+    computedFilter: import("@angular/core").Signal<boolean>;
+    computedFilterPlaceholder: import("@angular/core").Signal<string>;
+    computedClearable: import("@angular/core").Signal<boolean>;
+    computedVariant: import("@angular/core").Signal<"outlined" | "filled">;
+    computedFluid: import("@angular/core").Signal<boolean>;
+    computedErrorText: import("@angular/core").Signal<string>;
+    computedHelpText: import("@angular/core").Signal<string>;
+    computedAriaLabel: import("@angular/core").Signal<string>;
     computedAriaDescribedBy: import("@angular/core").Signal<string | undefined>;
     private experienceAdapter;
-    private sanitizer;
+    private platformId;
+    private elementRef;
     constructor();
-    onChange(event: Event): void;
+    toggleOpen(): void;
+    selectOption(optionValue: unknown): void;
+    clear(event?: Event): void;
+    onFilterInput(event: Event): void;
+    onKeydown(event: KeyboardEvent): void;
+    onDocumentClick(event: MouseEvent): void;
 }