@edsis/ui 0.0.2

package/editor/README.md

@@ -0,0 +1,136 @@
+# Editor
+
+Rich text editor shell with an accessible toolbar, configurable toolbar items, contenteditable form control support, and shadcn-style tokens.
+
+This component is conceptually inspired by Flux Editor. It does not bundle Tiptap or Flux JavaScript; instead, it provides a lightweight Angular primitive that applications can compose, bind, and extend.
+
+## Import
+
+```ts
+import { FormsModule } from '@angular/forms';
+import {
+  EditorButtonComponent,
+  EditorComponent,
+  EditorContentComponent,
+  EditorSeparatorComponent,
+  EditorSpacerComponent,
+  EditorToolbarComponent,
+} from '@edsis/ui/editor';
+```
+
+## Usage
+
+```html
+<ui-editor>
+  <ui-editor-toolbar items="heading | bold italic underline | align ~ undo redo" />
+  <ui-editor-content placeholder="Write something..." aria-label="Article body">
+    <h3>What's changed</h3>
+    <p>Draft release notes, article copy, or support responses here.</p>
+  </ui-editor-content>
+</ui-editor>
+```
+
+## Forms
+
+`ui-editor-content` implements `ControlValueAccessor`, so it can bind to Angular forms as an HTML string.
+
+```html
+<ui-editor>
+  <ui-editor-toolbar />
+  <ui-editor-content [(ngModel)]="content" name="content" aria-label="Article body" />
+</ui-editor>
+```
+
+Sanitize persisted HTML at the application boundary before rendering it elsewhere.
+
+## Toolbar Items
+
+The toolbar accepts a space-separated `items` string. Use `|` for a separator and `~` for a spacer.
+
+```html
+<ui-editor-toolbar items="heading | bold italic strike underline | bullet ordered blockquote link align ~ undo redo" />
+```
+
+Supported item names:
+
+| Item          | Behavior                                             |
+| ------------- | ---------------------------------------------------- |
+| `heading`     | Text, heading 1, heading 2, and heading 3 selector.  |
+| `bold`        | Bold formatting.                                     |
+| `italic`      | Italic formatting.                                   |
+| `strike`      | Strikethrough formatting.                            |
+| `underline`   | Underline formatting.                                |
+| `bullet`      | Bulleted list.                                       |
+| `ordered`     | Numbered list.                                       |
+| `blockquote`  | Block quote block.                                   |
+| `subscript`   | Subscript formatting.                                |
+| `superscript` | Superscript formatting.                              |
+| `highlight`   | Highlight selected text.                             |
+| `link`        | Create a placeholder link for the current selection. |
+| `code`        | Code block.                                          |
+| `align`       | Left, center, and right alignment selector.          |
+| `undo`        | Undo last edit.                                      |
+| `redo`        | Redo last edit.                                      |
+
+## Custom Toolbar
+
+Pass `items=""` and project custom toolbar controls.
+
+```html
+<ui-editor>
+  <ui-editor-toolbar items="">
+    <button ui-editor-button command="bold" aria-label="Bold">B</button>
+    <button ui-editor-button command="italic" aria-label="Italic">I</button>
+    <ui-editor-separator />
+    <button ui-editor-button command="highlight" aria-label="Highlight">H</button>
+    <ui-editor-spacer />
+    <button ui-editor-button command="undo" aria-label="Undo">
+      <svg
+        aria-hidden="true"
+        class="size-4"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linecap="round"
+        stroke-linejoin="round">
+        <path d="M9 14 4 9l5-5" />
+        <path d="M4 9h10a6 6 0 0 1 0 12h-2" />
+      </svg>
+    </button>
+  </ui-editor-toolbar>
+  <ui-editor-content aria-label="Custom editor" />
+</ui-editor>
+```
+
+## Keyboard Shortcuts
+
+| Action        | Shortcut          |
+| ------------- | ----------------- |
+| Bold          | Cmd/Ctrl+B        |
+| Italic        | Cmd/Ctrl+I        |
+| Underline     | Cmd/Ctrl+U        |
+| Strikethrough | Cmd/Ctrl+Shift+X  |
+| Ordered list  | Cmd/Ctrl+Shift+7  |
+| Bulleted list | Cmd/Ctrl+Shift+8  |
+| Heading 1-3   | Cmd/Ctrl+Alt+1..3 |
+| Undo          | Cmd/Ctrl+Z        |
+| Redo          | Cmd/Ctrl+Shift+Z  |
+
+## Styling
+
+The editor uses `border-input`, `bg-background`, `ring-ring`, `text-foreground`, `text-muted-foreground`, and `bg-muted` tokens. Pass sizing classes directly to the content slot when adjusting height.
+
+```html
+<ui-editor>
+  <ui-editor-toolbar />
+  <ui-editor-content class="min-h-30 max-h-60" aria-label="Compact editor" />
+</ui-editor>
+```
+
+## Accessibility
+
+- `ui-editor-toolbar` renders `role="toolbar"`.
+- `ui-editor-content` renders `role="textbox"` and `aria-multiline="true"`.
+- Provide a clear `aria-label` for each editor content surface.
+- Give terse or icon-only custom toolbar buttons an explicit `aria-label`.

package/empty/README.md

@@ -0,0 +1,183 @@
+# Empty
+
+Displays a reusable empty state with header, media, title, description, and content slots.
+
+Use Empty for onboarding gaps, no-results screens, no-notification panels, and 404-like recovery surfaces that need a clear next action.
+
+## Import
+
+```ts
+import {
+  EmptyComponent,
+  EmptyContentComponent,
+  EmptyDescriptionComponent,
+  EmptyHeaderComponent,
+  EmptyMediaComponent,
+  EmptyTitleComponent,
+} from '@edsis/ui/empty';
+import { ButtonComponent } from '@edsis/ui/button';
+```
+
+## Composition
+
+The Angular structure follows the shadcn Empty information architecture while keeping actions on native buttons and anchors.
+
+```text
+ui-empty
+├── ui-empty-header
+│   ├── ui-empty-media
+│   ├── ui-empty-title
+│   └── ui-empty-description
+└── ui-empty-content
+```
+
+## Basic usage
+
+```html
+<ui-empty class="max-w-xl rounded-2xl border border-border bg-card/40">
+  <ui-empty-header>
+    <ui-empty-media variant="icon">
+      <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M12 6v12" />
+        <path d="M6 12h12" />
+      </svg>
+    </ui-empty-media>
+    <ui-empty-title>No projects yet</ui-empty-title>
+    <ui-empty-description>
+      You have not created any projects yet. Start by creating a new project or importing an existing one.
+    </ui-empty-description>
+  </ui-empty-header>
+
+  <ui-empty-content class="sm:flex-row">
+    <button ui-button type="button">Create project</button>
+    <button ui-button type="button" variant="outline">Import project</button>
+  </ui-empty-content>
+
+  <a ui-button href="/docs/getting-started" variant="link" class="text-muted-foreground">Learn more</a>
+</ui-empty>
+```
+
+## Common patterns
+
+### Outline shell
+
+Use border utilities on the root when the empty state should read like an inset card or dashboard panel.
+
+```html
+<ui-empty class="rounded-2xl border border-dashed border-border">
+  <ui-empty-header>
+    <ui-empty-media variant="icon">...</ui-empty-media>
+    <ui-empty-title>Cloud storage empty</ui-empty-title>
+    <ui-empty-description>Upload files to your cloud storage to access them anywhere.</ui-empty-description>
+  </ui-empty-header>
+  <ui-empty-content>
+    <button ui-button type="button" variant="outline" size="sm">Upload files</button>
+  </ui-empty-content>
+</ui-empty>
+```
+
+### Avatar media
+
+Leave `ui-empty-media` on the default variant when projecting an avatar, avatar group, or any other custom artwork.
+
+```html
+<ui-empty>
+  <ui-empty-header>
+    <ui-empty-media>
+      <ui-avatar class="size-12">
+        <ui-avatar-image src="https://github.com/shadcn.png" alt="shadcn" />
+        <ui-avatar-fallback>CN</ui-avatar-fallback>
+      </ui-avatar>
+    </ui-empty-media>
+    <ui-empty-title>User offline</ui-empty-title>
+    <ui-empty-description>Leave a message and they will be notified when they come back online.</ui-empty-description>
+  </ui-empty-header>
+  <ui-empty-content>
+    <button ui-button type="button" size="sm">Leave message</button>
+  </ui-empty-content>
+</ui-empty>
+```
+
+### Input group recovery
+
+Compose `ui-empty-content` with the existing input-group primitives when the empty state should immediately guide recovery or search.
+
+```html
+<ui-empty class="max-w-xl rounded-2xl border border-border">
+  <ui-empty-header>
+    <ui-empty-title>404 - Not found</ui-empty-title>
+    <ui-empty-description>
+      The page you are looking for does not exist. Try searching for what you need below.
+    </ui-empty-description>
+  </ui-empty-header>
+  <ui-empty-content class="max-w-md">
+    <ui-input-group class="w-full">
+      <input ui-input-group-input aria-label="Search pages" placeholder="Try searching for pages..." />
+      <ui-input-group-addon>
+        <span aria-hidden="true">⌕</span>
+      </ui-input-group-addon>
+      <ui-input-group-addon align="inline-end">
+        <span
+          aria-hidden="true"
+          class="inline-flex h-6 items-center rounded-md border border-border bg-background px-2 font-mono text-[11px] font-medium text-foreground shadow-sm">
+          /
+        </span>
+      </ui-input-group-addon>
+    </ui-input-group>
+  </ui-empty-content>
+</ui-empty>
+```
+
+## API reference
+
+### `EmptyComponent`
+
+| Input   | Type     | Default |
+| ------- | -------- | ------- |
+| `class` | `string` | `''`    |
+
+### `EmptyMediaComponent`
+
+| Input     | Type                  | Default     |
+| --------- | --------------------- | ----------- |
+| `variant` | `'default' \| 'icon'` | `'default'` |
+| `class`   | `string`              | `''`        |
+
+### Parts
+
+- `ui-empty-header` centers the media, title, and description stack.
+- `ui-empty-title` provides the primary heading.
+- `ui-empty-description` renders supporting copy with muted foreground color.
+- `ui-empty-content` groups actions, inputs, or recovery affordances under the header.
+
+All Empty parts also accept a `class` input.
+
+## Styling and theming
+
+The primitive keeps styling neutral by default: the root controls spacing and alignment, while visual shells such as borders, gradients, and muted backgrounds are layered through `class`.
+
+`ui-empty-media` uses `border-border` and `bg-muted/40` for the icon variant so the icon chip matches the rest of the theme without inheriting text color for borders.
+
+Use `class` on the root or parts to add panel borders, gradient backgrounds, tighter widths, or horizontal action layouts.
+
+## Accessibility
+
+- Keep the title and description visible so the empty state communicates both the missing content and the next step.
+- Put actions on native `<button>` or `<a ui-button>` hosts instead of faking interactivity with generic elements.
+- Mark decorative icons inside `ui-empty-media` as `aria-hidden="true"` unless the icon itself provides unique meaning.
+
+## Keyboard interactions
+
+- The Empty primitives themselves are passive layout containers and do not enter the tab order.
+- Projected buttons, anchors, and inputs keep their native Tab, Enter, and Space behavior.
+- When `ui-empty-content` contains an input group, the control remains first in the DOM so tab order stays predictable.
+
+## Angular notes
+
+- `ui-empty` is a reusable content primitive, not the same surface as `@edsis/ui/layout/empty`, which remains a route-shell layout.
+- The link action from the upstream shadcn preview maps cleanly to `<a ui-button variant="link">` in Angular.
+- Project any custom artwork into `ui-empty-media`; only the `icon` variant applies a circular icon shell.
+
+## Source parity
+
+This Angular implementation follows the shadcn Empty page structure, examples, and API reference while translating React composition to Angular selectors and keeping page-shell layout concerns separate from the reusable empty-state primitive.

package/fesm2022/edsis-ui-accordion.mjs

@@ -0,0 +1,174 @@
+import * as i0 from '@angular/core';
+import { Directive, input, model, computed, forwardRef, ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { cn } from '@edsis/ui/utils';
+
+class AccordionContextBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AccordionContextBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: AccordionContextBase, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AccordionContextBase, decorators: [{
+            type: Directive
+        }] });
+class AccordionComponent extends AccordionContextBase {
+    type = input('single', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    collapsible = input(true, ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('block', this.class()), ...(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]);
+    }, ...(ngDevMode ? [{ debugName: "openSet" }] : /* istanbul ignore next */ []));
+    isOpen(value) {
+        return this.openSet().has(value);
+    }
+    toggle(value) {
+        const isMulti = this.type() === 'multiple';
+        const current = this.openSet();
+        const open = current.has(value);
+        if (isMulti) {
+            const next = new Set(current);
+            open ? next.delete(value) : 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: "21.2.14", ngImport: i0, type: AccordionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: AccordionComponent, isStandalone: true, selector: "ui-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, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AccordionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-accordion',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    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(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    triggerId = `ui-accordion-trigger-${nextId()}`;
+    contentId = `ui-accordion-content-${nextId()}`;
+    classes = computed(() => cn('block border-b border-border', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    open = computed(() => this.ctx.isOpen(this.value()), ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    toggle() {
+        if (!this.disabled())
+            this.ctx.toggle(this.value());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: AccordionItemComponent, isStandalone: true, selector: "ui-accordion-item", 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, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AccordionItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-accordion-item',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    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);
+    class = input('', ...(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()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AccordionTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: AccordionTriggerComponent, isStandalone: true, selector: "button[ui-accordion-trigger]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "item.toggle()" }, 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, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AccordionTriggerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[ui-accordion-trigger]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    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()',
+                    },
+                    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('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('block overflow-hidden text-sm', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AccordionContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: AccordionContentComponent, isStandalone: true, selector: "ui-accordion-content", 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, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AccordionContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-accordion-content',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    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 }] }] } });
+let _id = 0;
+function nextId() {
+    return ++_id;
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AccordionComponent, AccordionContentComponent, AccordionContextBase, AccordionItemComponent, AccordionTriggerComponent };
+//# sourceMappingURL=edsis-ui-accordion.mjs.map

package/fesm2022/edsis-ui-accordion.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"edsis-ui-accordion.mjs","sources":["../../../library/ui/accordion/accordion.component.ts","../../../library/ui/accordion/edsis-ui-accordion.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  Directive,\n  computed,\n  forwardRef,\n  inject,\n  input,\n  model,\n  signal,\n} from '@angular/core';\nimport { cn } from '@edsis/ui/utils';\n\nexport type AccordionType = 'single' | 'multiple';\n\n@Directive()\nexport abstract class AccordionContextBase {\n  abstract isOpen(value: string): boolean;\n  abstract toggle(value: string): void;\n}\n\n@Component({\n  selector: 'ui-accordion',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [{ provide: AccordionContextBase, useExisting: forwardRef(() => AccordionComponent) }],\n  host: { '[class]': 'classes()' },\n  template: `<ng-content />`,\n})\nexport class AccordionComponent extends AccordionContextBase {\n  readonly type = input<AccordionType>('single');\n  readonly collapsible = input<boolean>(true);\n  readonly value = model<string | string[] | null>(null);\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() => cn('block', this.class()));\n\n  private readonly openSet = computed<Set<string>>(() => {\n    const v = this.value();\n    if (v == null) return new Set();\n    return new Set(Array.isArray(v) ? v : [v]);\n  });\n\n  override isOpen(value: string): boolean {\n    return this.openSet().has(value);\n  }\n\n  override toggle(value: string): void {\n    const isMulti = this.type() === 'multiple';\n    const current = this.openSet();\n    const open = current.has(value);\n    if (isMulti) {\n      const next = new Set(current);\n      open ? next.delete(value) : next.add(value);\n      this.value.set([...next]);\n    } else {\n      if (open) {\n        if (this.collapsible()) this.value.set(null);\n      } else {\n        this.value.set(value);\n      }\n    }\n  }\n}\n\n@Component({\n  selector: 'ui-accordion-item',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[attr.data-state]': 'open() ? \"open\" : \"closed\"',\n    '[attr.data-disabled]': 'disabled() ? \"\" : null',\n  },\n  template: `<ng-content />`,\n})\nexport class AccordionItemComponent {\n  protected readonly ctx = inject(AccordionContextBase);\n  readonly value = input.required<string>();\n  readonly disabled = input<boolean>(false);\n  readonly class = input<string>('');\n\n  readonly triggerId = `ui-accordion-trigger-${nextId()}`;\n  readonly contentId = `ui-accordion-content-${nextId()}`;\n\n  protected readonly classes = computed(() => cn('block border-b border-border', this.class()));\n\n  readonly open = computed(() => this.ctx.isOpen(this.value()));\n\n  toggle(): void {\n    if (!this.disabled()) this.ctx.toggle(this.value());\n  }\n}\n\n@Component({\n  selector: 'button[ui-accordion-trigger]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    type: 'button',\n    '[attr.id]': 'item.triggerId',\n    '[attr.aria-controls]': 'item.contentId',\n    '[attr.aria-expanded]': 'item.open()',\n    '[attr.data-state]': 'item.open() ? \"open\" : \"closed\"',\n    '[disabled]': 'item.disabled() || null',\n    '(click)': 'item.toggle()',\n  },\n  template: `\n    <ng-content />\n    <svg\n      aria-hidden=\"true\"\n      class=\"h-4 w-4 shrink-0 transition-transform duration-200\"\n      [class.rotate-180]=\"item.open()\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\">\n      <polyline points=\"6 9 12 15 18 9\" />\n    </svg>\n  `,\n})\nexport class AccordionTriggerComponent {\n  protected readonly item = inject(AccordionItemComponent);\n  readonly class = input<string>('');\n  protected readonly classes = computed(() =>\n    cn(\n      'flex flex-1 w-full items-center justify-between py-4 text-sm font-medium',\n      'transition-all hover:underline',\n      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n      'disabled:pointer-events-none disabled:opacity-50',\n      this.class(),\n    ),\n  );\n}\n\n@Component({\n  selector: 'ui-accordion-content',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[attr.id]': 'item.contentId',\n    '[attr.role]': '\"region\"',\n    '[attr.aria-labelledby]': 'item.triggerId',\n    '[attr.data-state]': 'item.open() ? \"open\" : \"closed\"',\n    '[hidden]': '!item.open()',\n  },\n  template: `<div class=\"pb-4 pt-0 text-sm\"><ng-content /></div>`,\n})\nexport class AccordionContentComponent {\n  protected readonly item = inject(AccordionItemComponent);\n  readonly class = input<string>('');\n  protected readonly classes = computed(() => cn('block overflow-hidden text-sm', this.class()));\n}\n\nlet _id = 0;\nfunction nextId(): number {\n  return ++_id;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}