@ojiepermana/angular 22.1.11 → 22.1.13

package/fesm2022/ojiepermana-angular-component-accordion.mjs

@@ -1,7 +1,271 @@
-export * from '@ojiepermana/angular-component/accordion';
+import * as i0 from '@angular/core';
+import { Directive, inject, input, model, computed, forwardRef, Component, ElementRef } from '@angular/core';
+import { cn, injectUniqueId } from '@ojiepermana/angular/component/utils/core';
+import * as i1 from '@ojiepermana/angular/component/utils/scale';
+import { ComponentScaleDirective } from '@ojiepermana/angular/component/utils/scale';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+class AccordionContextBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AccordionContextBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: AccordionContextBase, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AccordionContextBase, decorators: [{
+            type: Directive
+        }] });
+class AccordionComponent extends AccordionContextBase {
+    componentScale = inject(ComponentScaleDirective);
+    radius = this.componentScale.radius;
+    density = this.componentScale.density;
+    type = input('single', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    collapsible = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('block', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    openSet = computed(() => {
+        const v = this.value();
+        if (v == null)
+            return new Set();
+        return new Set(Array.isArray(v) ? v : [v]);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openSet" }] : /* istanbul ignore next */ []));
+    isOpen(value) {
+        return this.openSet().has(value);
+    }
+    /**
+     * Header elements, so arrow keys can move between them.
+     *
+     * Kept as a set of elements rather than an ordered list: registration order
+     * follows creation order, which is not the reading order once items are added,
+     * removed, or reordered. {@link orderedTriggers} sorts by document position so
+     * the keyboard always follows what the user sees.
+     */
+    triggers = new Set();
+    registerTrigger(element) {
+        this.triggers.add(element);
+    }
+    unregisterTrigger(element) {
+        this.triggers.delete(element);
+    }
+    /** Move focus between headers, wrapping around, the way Tabs does. */
+    moveTriggerFocus(from, offset) {
+        const triggers = this.orderedTriggers();
+        const currentIndex = triggers.indexOf(from);
+        if (currentIndex < 0 || triggers.length === 0)
+            return;
+        const next = triggers[(currentIndex + offset + triggers.length) % triggers.length];
+        next?.focus();
+    }
+    focusFirstTrigger() {
+        this.orderedTriggers()[0]?.focus();
+    }
+    focusLastTrigger() {
+        const triggers = this.orderedTriggers();
+        triggers[triggers.length - 1]?.focus();
+    }
+    orderedTriggers() {
+        return [...this.triggers]
+            .filter((element) => element.isConnected && !element.disabled)
+            .sort((a, b) => (a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1));
+    }
+    toggle(value) {
+        const isMulti = this.type() === 'multiple';
+        const current = this.openSet();
+        const open = current.has(value);
+        if (isMulti) {
+            const next = new Set(current);
+            if (open) {
+                next.delete(value);
+            }
+            else {
+                next.add(value);
+            }
+            this.value.set([...next]);
+        }
+        else {
+            if (open) {
+                if (this.collapsible())
+                    this.value.set(null);
+            }
+            else {
+                this.value.set(value);
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AccordionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: AccordionComponent, isStandalone: true, selector: "Accordion", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "classes()" } }, providers: [{ provide: AccordionContextBase, useExisting: forwardRef(() => AccordionComponent) }], usesInheritance: true, hostDirectives: [{ directive: i1.ComponentScaleDirective, inputs: ["radius", "radius", "density", "density"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AccordionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Accordion',
+                    hostDirectives: [
+                        {
+                            directive: ComponentScaleDirective,
+                            inputs: ['radius', 'density'],
+                        },
+                    ],
+                    providers: [{ provide: AccordionContextBase, useExisting: forwardRef(() => AccordionComponent) }],
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class AccordionItemComponent {
+    ctx = inject(AccordionContextBase);
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    triggerId = injectUniqueId('AccordionTrigger');
+    contentId = injectUniqueId('AccordionContent');
+    classes = computed(() => cn('block border-b border-border', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    open = computed(() => this.ctx.isOpen(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    toggle() {
+        if (!this.disabled())
+            this.ctx.toggle(this.value());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: AccordionItemComponent, isStandalone: true, selector: "AccordionItem", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-state": "open() ? \"open\" : \"closed\"", "attr.data-disabled": "disabled() ? \"\" : null" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AccordionItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'AccordionItem',
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-state]': 'open() ? "open" : "closed"',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class AccordionTriggerComponent {
+    item = inject(AccordionItemComponent);
+    accordion = inject(AccordionComponent, { optional: true });
+    el = inject(ElementRef);
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('flex flex-1 w-full items-center justify-between py-4 text-sm font-medium', 'transition-all hover:underline', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', 'disabled:pointer-events-none disabled:opacity-50', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        this.accordion?.registerTrigger(this.el.nativeElement);
+    }
+    ngOnDestroy() {
+        this.accordion?.unregisterTrigger(this.el.nativeElement);
+    }
+    /**
+     * Arrow keys move focus between headers; they never open or close a section.
+     * Enter and Space still do the toggling, which is the accordion pattern and
+     * matches how Tabs moves between its triggers.
+     */
+    onArrow(event, offset) {
+        if (!this.accordion)
+            return;
+        event.preventDefault();
+        this.accordion.moveTriggerFocus(this.el.nativeElement, offset);
+    }
+    onHome(event) {
+        if (!this.accordion)
+            return;
+        event.preventDefault();
+        this.accordion.focusFirstTrigger();
+    }
+    onEnd(event) {
+        if (!this.accordion)
+            return;
+        event.preventDefault();
+        this.accordion.focusLastTrigger();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AccordionTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: AccordionTriggerComponent, isStandalone: true, selector: "button[AccordionTrigger]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "item.toggle()", "keydown.arrowDown": "onArrow($any($event), 1)", "keydown.arrowUp": "onArrow($any($event), -1)", "keydown.home": "onHome($any($event))", "keydown.end": "onEnd($any($event))" }, properties: { "class": "classes()", "attr.id": "item.triggerId", "attr.aria-controls": "item.contentId", "attr.aria-expanded": "item.open()", "attr.data-state": "item.open() ? \"open\" : \"closed\"", "disabled": "item.disabled() || null" } }, ngImport: i0, template: `
+    <ng-content />
+    <svg
+      aria-hidden="true"
+      class="h-4 w-4 shrink-0 transition-transform duration-200"
+      [class.rotate-180]="item.open()"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <polyline points="6 9 12 15 18 9" />
+    </svg>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AccordionTriggerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[AccordionTrigger]',
+                    host: {
+                        '[class]': 'classes()',
+                        type: 'button',
+                        '[attr.id]': 'item.triggerId',
+                        '[attr.aria-controls]': 'item.contentId',
+                        '[attr.aria-expanded]': 'item.open()',
+                        '[attr.data-state]': 'item.open() ? "open" : "closed"',
+                        '[disabled]': 'item.disabled() || null',
+                        '(click)': 'item.toggle()',
+                        '(keydown.arrowDown)': 'onArrow($any($event), 1)',
+                        '(keydown.arrowUp)': 'onArrow($any($event), -1)',
+                        '(keydown.home)': 'onHome($any($event))',
+                        '(keydown.end)': 'onEnd($any($event))',
+                    },
+                    template: `
+    <ng-content />
+    <svg
+      aria-hidden="true"
+      class="h-4 w-4 shrink-0 transition-transform duration-200"
+      [class.rotate-180]="item.open()"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <polyline points="6 9 12 15 18 9" />
+    </svg>
+  `,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class AccordionContentComponent {
+    item = inject(AccordionItemComponent);
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('block overflow-hidden text-sm', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AccordionContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: AccordionContentComponent, isStandalone: true, selector: "AccordionContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "item.contentId", "attr.role": "\"region\"", "attr.aria-labelledby": "item.triggerId", "attr.data-state": "item.open() ? \"open\" : \"closed\"", "hidden": "!item.open()" } }, ngImport: i0, template: `<div class="pb-4 pt-0 text-sm"><ng-content /></div>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AccordionContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'AccordionContent',
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.id]': 'item.contentId',
+                        '[attr.role]': '"region"',
+                        '[attr.aria-labelledby]': 'item.triggerId',
+                        '[attr.data-state]': 'item.open() ? "open" : "closed"',
+                        '[hidden]': '!item.open()',
+                    },
+                    template: `<div class="pb-4 pt-0 text-sm"><ng-content /></div>`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { AccordionComponent, AccordionContentComponent, AccordionContextBase, AccordionItemComponent, AccordionTriggerComponent };