@raintonic/formaui 0.2.0

package/fesm2022/raintonic-formaui-components-list.mjs

@@ -0,0 +1,149 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, input, booleanAttribute, signal, inject, ElementRef, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, output, contentChildren } from '@angular/core';
+
+const FUI_LIST = new InjectionToken('FUI_LIST');
+
+class FuiListItemComponent {
+    value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    _selected = signal(false, ...(ngDevMode ? [{ debugName: "_selected" }] : /* istanbul ignore next */ []));
+    _focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : /* istanbul ignore next */ []));
+    _elementRef = inject(ElementRef);
+    _list = inject(FUI_LIST, { optional: true });
+    _isInteractive = computed(() => (this._list?.interactive() ?? this._list?.selectionMode() !== 'none') && !this.disabled(), ...(ngDevMode ? [{ debugName: "_isInteractive" }] : /* istanbul ignore next */ []));
+    _isSelectable = computed(() => this._list?.selectionMode() !== 'none', ...(ngDevMode ? [{ debugName: "_isSelectable" }] : /* istanbul ignore next */ []));
+    _role = computed(() => (this._isSelectable() ? 'option' : 'listitem'), ...(ngDevMode ? [{ debugName: "_role" }] : /* istanbul ignore next */ []));
+    onClick() {
+        if (this.disabled() || !this._list)
+            return;
+        if (this._isSelectable()) {
+            this._list.selectItem(this);
+        }
+    }
+    onSpace(event) {
+        event.preventDefault();
+        this.onClick();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.6", type: FuiListItemComponent, isStandalone: true, selector: "fui-list-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()", "keydown.enter": "onClick()", "keydown.space": "onSpace($event)" }, properties: { "class.fui-list-item--selected": "_selected()", "class.fui-list-item--disabled": "disabled()", "class.fui-list-item--interactive": "_isInteractive()", "attr.role": "_role()", "attr.aria-selected": "_isSelectable() ? _selected() : null", "attr.aria-disabled": "disabled() || null", "attr.tabindex": "_isInteractive() ? 0 : null" }, classAttribute: "fui-list-item" }, ngImport: i0, template: "<div class=\"fui-list-item__content\">\n  <div class=\"fui-list-item__start\">\n    <ng-content select=\"[fuiListItemIcon], [fuiListItemAvatar]\"></ng-content>\n  </div>\n  <div class=\"fui-list-item__text\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"fui-list-item__end\">\n    <ng-content select=\"[fuiListItemAction]\"></ng-content>\n  </div>\n</div>\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}.fui-list--dividers .fui-list-item+.fui-list-item{border-top:1px solid var(--fui-border-color)}.fui-list-item{display:flex;align-items:center;padding:var(--fui-gap-12, .75rem) var(--fui-gap-16, 1rem)}.fui-list-item__content{display:flex;align-items:center;width:100%;gap:var(--fui-gap-12, .75rem)}.fui-list-item__start{flex-shrink:0}.fui-list-item__text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-list-item__end{flex-shrink:0;margin-left:auto}.fui-list-item--interactive{cursor:pointer;transition:background-color var(--fui-duration-fast-02, .15s) var(--fui-ease-standard) 0ms}.fui-list-item--interactive:hover{background-color:var(--fui-surface-02, #f1f5f9)}.fui-list-item--interactive:active{background-color:var(--fui-surface-03, #e2e8f0)}.fui-list-item--interactive:focus-visible{outline:2px solid var(--fui-primary);outline-offset:0px}.fui-list-item--selected{background-color:var(--fui-primary-10, #f0e6ff);color:var(--fui-primary)}.fui-list-item--disabled{opacity:var(--fui-opacity-disabled, .38);cursor:not-allowed;pointer-events:none}@media(prefers-contrast:high){.fui-list--dividers .fui-list-item+.fui-list-item{border-color:CanvasText}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiListItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fui-list-item', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'fui-list-item',
+                        '[class.fui-list-item--selected]': '_selected()',
+                        '[class.fui-list-item--disabled]': 'disabled()',
+                        '[class.fui-list-item--interactive]': '_isInteractive()',
+                        '[attr.role]': '_role()',
+                        '[attr.aria-selected]': '_isSelectable() ? _selected() : null',
+                        '[attr.aria-disabled]': 'disabled() || null',
+                        '[attr.tabindex]': '_isInteractive() ? 0 : null',
+                        '(click)': 'onClick()',
+                        '(keydown.enter)': 'onClick()',
+                        '(keydown.space)': 'onSpace($event)',
+                    }, template: "<div class=\"fui-list-item__content\">\n  <div class=\"fui-list-item__start\">\n    <ng-content select=\"[fuiListItemIcon], [fuiListItemAvatar]\"></ng-content>\n  </div>\n  <div class=\"fui-list-item__text\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"fui-list-item__end\">\n    <ng-content select=\"[fuiListItemAction]\"></ng-content>\n  </div>\n</div>\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}.fui-list--dividers .fui-list-item+.fui-list-item{border-top:1px solid var(--fui-border-color)}.fui-list-item{display:flex;align-items:center;padding:var(--fui-gap-12, .75rem) var(--fui-gap-16, 1rem)}.fui-list-item__content{display:flex;align-items:center;width:100%;gap:var(--fui-gap-12, .75rem)}.fui-list-item__start{flex-shrink:0}.fui-list-item__text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-list-item__end{flex-shrink:0;margin-left:auto}.fui-list-item--interactive{cursor:pointer;transition:background-color var(--fui-duration-fast-02, .15s) var(--fui-ease-standard) 0ms}.fui-list-item--interactive:hover{background-color:var(--fui-surface-02, #f1f5f9)}.fui-list-item--interactive:active{background-color:var(--fui-surface-03, #e2e8f0)}.fui-list-item--interactive:focus-visible{outline:2px solid var(--fui-primary);outline-offset:0px}.fui-list-item--selected{background-color:var(--fui-primary-10, #f0e6ff);color:var(--fui-primary)}.fui-list-item--disabled{opacity:var(--fui-opacity-disabled, .38);cursor:not-allowed;pointer-events:none}@media(prefers-contrast:high){.fui-list--dividers .fui-list-item+.fui-list-item{border-color:CanvasText}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+class FuiListComponent {
+    interactive = input(false, ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
+    selectionMode = input('none', ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
+    dividers = input(false, ...(ngDevMode ? [{ debugName: "dividers" }] : /* istanbul ignore next */ []));
+    selectionChange = output();
+    items = contentChildren(FuiListItemComponent, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    _selectedValues = signal(new Set(), ...(ngDevMode ? [{ debugName: "_selectedValues" }] : /* istanbul ignore next */ []));
+    selectItem(item) {
+        if (item.disabled())
+            return;
+        const mode = this.selectionMode();
+        if (mode === 'none')
+            return;
+        const currentSet = new Set(this._selectedValues());
+        const value = item.value();
+        if (mode === 'single') {
+            currentSet.clear();
+            currentSet.add(value);
+        }
+        else {
+            // multi
+            if (currentSet.has(value)) {
+                currentSet.delete(value);
+            }
+            else {
+                currentSet.add(value);
+            }
+        }
+        this._selectedValues.set(currentSet);
+        // Update all items' selected state
+        this.items().forEach((i) => {
+            i._selected.set(currentSet.has(i.value()));
+        });
+        this.selectionChange.emit({
+            source: this,
+            value: Array.from(currentSet),
+        });
+    }
+    isSelected(value) {
+        return this._selectedValues().has(value);
+    }
+    onKeydown(event) {
+        const items = this.items();
+        if (items.length === 0)
+            return;
+        const enabledItems = items.filter((i) => !i.disabled());
+        if (enabledItems.length === 0)
+            return;
+        const focusedEl = document.activeElement;
+        const currentIdx = enabledItems.findIndex((i) => i._elementRef.nativeElement === focusedEl || i._elementRef.nativeElement.contains(focusedEl));
+        let targetIdx = -1;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                targetIdx = currentIdx < enabledItems.length - 1 ? currentIdx + 1 : 0;
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                targetIdx = currentIdx > 0 ? currentIdx - 1 : enabledItems.length - 1;
+                break;
+            case 'Home':
+                event.preventDefault();
+                targetIdx = 0;
+                break;
+            case 'End':
+                event.preventDefault();
+                targetIdx = enabledItems.length - 1;
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (currentIdx >= 0) {
+                    this.selectItem(enabledItems[currentIdx]);
+                }
+                return;
+            default:
+                return;
+        }
+        if (targetIdx >= 0) {
+            enabledItems[targetIdx]._elementRef.nativeElement.focus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.6", type: FuiListComponent, isStandalone: true, selector: "fui-list", inputs: { interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, dividers: { classPropertyName: "dividers", publicName: "dividers", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class.fui-list--interactive": "interactive() || selectionMode() !== \"none\"", "class.fui-list--dividers": "dividers()", "attr.role": "selectionMode() !== \"none\" ? \"listbox\" : \"list\"", "attr.aria-multiselectable": "selectionMode() === \"multi\" ? true : null" }, classAttribute: "fui-list" }, providers: [{ provide: FUI_LIST, useExisting: FuiListComponent }], queries: [{ propertyName: "items", predicate: FuiListItemComponent, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}.fui-list--dividers .fui-list-item+.fui-list-item{border-top:1px solid var(--fui-border-color)}.fui-list-item{display:flex;align-items:center;padding:var(--fui-gap-12, .75rem) var(--fui-gap-16, 1rem)}.fui-list-item__content{display:flex;align-items:center;width:100%;gap:var(--fui-gap-12, .75rem)}.fui-list-item__start{flex-shrink:0}.fui-list-item__text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-list-item__end{flex-shrink:0;margin-left:auto}.fui-list-item--interactive{cursor:pointer;transition:background-color var(--fui-duration-fast-02, .15s) var(--fui-ease-standard) 0ms}.fui-list-item--interactive:hover{background-color:var(--fui-surface-02, #f1f5f9)}.fui-list-item--interactive:active{background-color:var(--fui-surface-03, #e2e8f0)}.fui-list-item--interactive:focus-visible{outline:2px solid var(--fui-primary);outline-offset:0px}.fui-list-item--selected{background-color:var(--fui-primary-10, #f0e6ff);color:var(--fui-primary)}.fui-list-item--disabled{opacity:var(--fui-opacity-disabled, .38);cursor:not-allowed;pointer-events:none}@media(prefers-contrast:high){.fui-list--dividers .fui-list-item+.fui-list-item{border-color:CanvasText}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fui-list', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'fui-list',
+                        '[class.fui-list--interactive]': 'interactive() || selectionMode() !== "none"',
+                        '[class.fui-list--dividers]': 'dividers()',
+                        '[attr.role]': 'selectionMode() !== "none" ? "listbox" : "list"',
+                        '[attr.aria-multiselectable]': 'selectionMode() === "multi" ? true : null',
+                        '(keydown)': 'onKeydown($event)',
+                    }, providers: [{ provide: FUI_LIST, useExisting: FuiListComponent }], template: "<ng-content></ng-content>\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}.fui-list--dividers .fui-list-item+.fui-list-item{border-top:1px solid var(--fui-border-color)}.fui-list-item{display:flex;align-items:center;padding:var(--fui-gap-12, .75rem) var(--fui-gap-16, 1rem)}.fui-list-item__content{display:flex;align-items:center;width:100%;gap:var(--fui-gap-12, .75rem)}.fui-list-item__start{flex-shrink:0}.fui-list-item__text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-list-item__end{flex-shrink:0;margin-left:auto}.fui-list-item--interactive{cursor:pointer;transition:background-color var(--fui-duration-fast-02, .15s) var(--fui-ease-standard) 0ms}.fui-list-item--interactive:hover{background-color:var(--fui-surface-02, #f1f5f9)}.fui-list-item--interactive:active{background-color:var(--fui-surface-03, #e2e8f0)}.fui-list-item--interactive:focus-visible{outline:2px solid var(--fui-primary);outline-offset:0px}.fui-list-item--selected{background-color:var(--fui-primary-10, #f0e6ff);color:var(--fui-primary)}.fui-list-item--disabled{opacity:var(--fui-opacity-disabled, .38);cursor:not-allowed;pointer-events:none}@media(prefers-contrast:high){.fui-list--dividers .fui-list-item+.fui-list-item{border-color:CanvasText}}\n"] }]
+        }], propDecorators: { interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], dividers: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividers", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FuiListItemComponent), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FUI_LIST, FuiListComponent, FuiListItemComponent };
+//# sourceMappingURL=raintonic-formaui-components-list.mjs.map

package/fesm2022/raintonic-formaui-components-list.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"raintonic-formaui-components-list.mjs","sources":["../../../lib/components/list/list.types.ts","../../../lib/components/list/list-item.component.ts","../../../lib/components/list/list-item.component.html","../../../lib/components/list/list.component.ts","../../../lib/components/list/list.component.html","../../../lib/components/list/raintonic-formaui-components-list.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\n\nexport type FuiListSelectionMode = 'none' | 'single' | 'multi';\n\nexport interface FuiListSelectionChange<T = unknown> {\n  source: unknown;\n  value: T[];\n}\n\nexport interface FuiListHost {\n  interactive(): boolean;\n  selectionMode(): FuiListSelectionMode;\n  selectItem(item: unknown): void;\n}\n\nexport const FUI_LIST = new InjectionToken<FuiListHost>('FUI_LIST');\n","import {\n  Component,\n  ChangeDetectionStrategy,\n  ViewEncapsulation,\n  input,\n  computed,\n  signal,\n  inject,\n  ElementRef,\n  booleanAttribute,\n} from '@angular/core';\nimport { FUI_LIST } from './list.types';\n\n@Component({\n  selector: 'fui-list-item',\n  standalone: true,\n  imports: [],\n  templateUrl: './list-item.component.html',\n  styleUrls: ['./list.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'fui-list-item',\n    '[class.fui-list-item--selected]': '_selected()',\n    '[class.fui-list-item--disabled]': 'disabled()',\n    '[class.fui-list-item--interactive]': '_isInteractive()',\n    '[attr.role]': '_role()',\n    '[attr.aria-selected]': '_isSelectable() ? _selected() : null',\n    '[attr.aria-disabled]': 'disabled() || null',\n    '[attr.tabindex]': '_isInteractive() ? 0 : null',\n    '(click)': 'onClick()',\n    '(keydown.enter)': 'onClick()',\n    '(keydown.space)': 'onSpace($event)',\n  },\n})\nexport class FuiListItemComponent {\n  readonly value = input<unknown>(undefined);\n  readonly disabled = input<boolean, unknown>(false, { transform: booleanAttribute });\n\n  readonly _selected = signal(false);\n  readonly _focused = signal(false);\n\n  readonly _elementRef = inject(ElementRef);\n\n  private _list = inject(FUI_LIST, { optional: true });\n\n  readonly _isInteractive = computed(\n    () => (this._list?.interactive() ?? this._list?.selectionMode() !== 'none') && !this.disabled(),\n  );\n  readonly _isSelectable = computed(() => this._list?.selectionMode() !== 'none');\n  readonly _role = computed(() => (this._isSelectable() ? 'option' : 'listitem'));\n\n  onClick(): void {\n    if (this.disabled() || !this._list) return;\n    if (this._isSelectable()) {\n      this._list.selectItem(this);\n    }\n  }\n\n  onSpace(event: Event): void {\n    event.preventDefault();\n    this.onClick();\n  }\n}\n","<div class=\"fui-list-item__content\">\n  <div class=\"fui-list-item__start\">\n    <ng-content select=\"[fuiListItemIcon], [fuiListItemAvatar]\"></ng-content>\n  </div>\n  <div class=\"fui-list-item__text\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"fui-list-item__end\">\n    <ng-content select=\"[fuiListItemAction]\"></ng-content>\n  </div>\n</div>\n","import {\n  Component,\n  ChangeDetectionStrategy,\n  ViewEncapsulation,\n  input,\n  output,\n  signal,\n  contentChildren,\n} from '@angular/core';\nimport { FuiListSelectionMode, FuiListSelectionChange, FUI_LIST } from './list.types';\nimport { FuiListItemComponent } from './list-item.component';\n\n@Component({\n  selector: 'fui-list',\n  standalone: true,\n  imports: [],\n  templateUrl: './list.component.html',\n  styleUrls: ['./list.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'fui-list',\n    '[class.fui-list--interactive]': 'interactive() || selectionMode() !== \"none\"',\n    '[class.fui-list--dividers]': 'dividers()',\n    '[attr.role]': 'selectionMode() !== \"none\" ? \"listbox\" : \"list\"',\n    '[attr.aria-multiselectable]': 'selectionMode() === \"multi\" ? true : null',\n    '(keydown)': 'onKeydown($event)',\n  },\n  providers: [{ provide: FUI_LIST, useExisting: FuiListComponent }],\n})\nexport class FuiListComponent {\n  readonly interactive = input(false);\n  readonly selectionMode = input<FuiListSelectionMode>('none');\n  readonly dividers = input(false);\n\n  readonly selectionChange = output<FuiListSelectionChange>();\n\n  readonly items = contentChildren(FuiListItemComponent);\n\n  readonly _selectedValues = signal(new Set());\n\n  selectItem(item: FuiListItemComponent): void {\n    if (item.disabled()) return;\n    const mode = this.selectionMode();\n    if (mode === 'none') return;\n\n    const currentSet = new Set(this._selectedValues());\n    const value = item.value();\n\n    if (mode === 'single') {\n      currentSet.clear();\n      currentSet.add(value);\n    } else {\n      // multi\n      if (currentSet.has(value)) {\n        currentSet.delete(value);\n      } else {\n        currentSet.add(value);\n      }\n    }\n\n    this._selectedValues.set(currentSet);\n\n    // Update all items' selected state\n    this.items().forEach((i) => {\n      i._selected.set(currentSet.has(i.value()));\n    });\n\n    this.selectionChange.emit({\n      source: this,\n      value: Array.from(currentSet),\n    });\n  }\n\n  isSelected(value: unknown): boolean {\n    return this._selectedValues().has(value);\n  }\n\n  onKeydown(event: KeyboardEvent): void {\n    const items = this.items();\n    if (items.length === 0) return;\n\n    const enabledItems = items.filter((i) => !i.disabled());\n    if (enabledItems.length === 0) return;\n\n    const focusedEl = document.activeElement;\n    const currentIdx = enabledItems.findIndex(\n      (i) => i._elementRef.nativeElement === focusedEl || i._elementRef.nativeElement.contains(focusedEl),\n    );\n\n    let targetIdx = -1;\n\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        targetIdx = currentIdx < enabledItems.length - 1 ? currentIdx + 1 : 0;\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        targetIdx = currentIdx > 0 ? currentIdx - 1 : enabledItems.length - 1;\n        break;\n      case 'Home':\n        event.preventDefault();\n        targetIdx = 0;\n        break;\n      case 'End':\n        event.preventDefault();\n        targetIdx = enabledItems.length - 1;\n        break;\n      case 'Enter':\n      case ' ':\n        event.preventDefault();\n        if (currentIdx >= 0) {\n          this.selectItem(enabledItems[currentIdx]);\n        }\n        return;\n      default:\n        return;\n    }\n\n    if (targetIdx >= 0) {\n      enabledItems[targetIdx]._elementRef.nativeElement.focus();\n    }\n  }\n}\n","<ng-content></ng-content>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}