@ojiepermana/angular-component 22.0.27

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

@@ -0,0 +1,314 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { cn } from '@ojiepermana/angular-component/utils';
+
+const kanbanColumnWidthClasses = {
+    sm: '[--kanban-column-width:16rem]',
+    default: '[--kanban-column-width:18rem]',
+    lg: '[--kanban-column-width:22rem]',
+};
+class KanbanComponent {
+    columnWidth = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnWidth" }] : /* istanbul ignore next */ []));
+    dense = input(false, { ...(ngDevMode ? { debugName: "dense" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('flex w-full min-w-0 gap-[var(--kanban-column-gap)] overflow-x-auto pb-3 text-sm text-foreground', '[--kanban-card-gap:0.75rem] [--kanban-column-gap:1rem]', kanbanColumnWidthClasses[this.columnWidth()], this.dense() ? '[--kanban-card-gap:0.5rem] [--kanban-column-gap:0.75rem]' : '', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: KanbanComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: KanbanComponent, isStandalone: true, selector: "Kanban", inputs: { columnWidth: { classPropertyName: "columnWidth", publicName: "columnWidth", isSignal: true, isRequired: false, transformFunction: null }, dense: { classPropertyName: "dense", publicName: "dense", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"kanban\"", "attr.data-column-width": "columnWidth()", "attr.data-dense": "dense() ? \"\" : null" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: KanbanComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Kanban',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"kanban"',
+                        '[attr.data-column-width]': 'columnWidth()',
+                        '[attr.data-dense]': 'dense() ? "" : null',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { columnWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnWidth", required: false }] }], dense: [{ type: i0.Input, args: [{ isSignal: true, alias: "dense", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class KanbanColumnComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('flex max-h-full min-h-0 w-[var(--kanban-column-width)] shrink-0 flex-col overflow-hidden rounded-lg border border-border bg-muted/35 text-foreground shadow-sm', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: KanbanColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: KanbanColumnComponent, isStandalone: true, selector: "KanbanColumn", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"kanban-column\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: KanbanColumnComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'KanbanColumn',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"kanban-column"',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class KanbanColumnHeaderComponent {
+    heading = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+    subheading = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subheading" }] : /* istanbul ignore next */ []));
+    count = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+    badge = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    displayCount = computed(() => {
+        const count = this.count();
+        return count === null || count === undefined || count === '' ? null : count;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayCount" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('flex items-start gap-3 border-b border-border/80 px-3 py-3', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: KanbanColumnHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: KanbanColumnHeaderComponent, isStandalone: true, selector: "KanbanColumnHeader", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, subheading: { classPropertyName: "subheading", publicName: "subheading", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"kanban-column-header\"" } }, ngImport: i0, template: `
+    <div class="order-2 inline-flex shrink-0 items-center gap-1">
+      <ng-content select="KanbanColumnActions,[KanbanColumnActions]" />
+    </div>
+
+    <div class="order-1 min-w-0 flex-1">
+      @if (heading()) {
+        <div class="flex min-w-0 items-center gap-2">
+          <h3 class="truncate text-sm font-semibold leading-none text-foreground">{{ heading() }}</h3>
+          @if (displayCount() !== null) {
+            <span
+              class="inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full bg-muted px-1.5 text-xs font-medium text-muted-foreground">
+              {{ displayCount() }}
+            </span>
+          }
+          @if (badge()) {
+            <span
+              class="inline-flex shrink-0 items-center rounded-md border border-border bg-background px-1.5 py-0.5 text-xs font-medium text-muted-foreground">
+              {{ badge() }}
+            </span>
+          }
+        </div>
+      }
+
+      @if (subheading()) {
+        <p class="mt-1 truncate text-xs leading-5 text-muted-foreground">{{ subheading() }}</p>
+      }
+
+      <ng-content />
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: KanbanColumnHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'KanbanColumnHeader',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"kanban-column-header"',
+                    },
+                    template: `
+    <div class="order-2 inline-flex shrink-0 items-center gap-1">
+      <ng-content select="KanbanColumnActions,[KanbanColumnActions]" />
+    </div>
+
+    <div class="order-1 min-w-0 flex-1">
+      @if (heading()) {
+        <div class="flex min-w-0 items-center gap-2">
+          <h3 class="truncate text-sm font-semibold leading-none text-foreground">{{ heading() }}</h3>
+          @if (displayCount() !== null) {
+            <span
+              class="inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full bg-muted px-1.5 text-xs font-medium text-muted-foreground">
+              {{ displayCount() }}
+            </span>
+          }
+          @if (badge()) {
+            <span
+              class="inline-flex shrink-0 items-center rounded-md border border-border bg-background px-1.5 py-0.5 text-xs font-medium text-muted-foreground">
+              {{ badge() }}
+            </span>
+          }
+        </div>
+      }
+
+      @if (subheading()) {
+        <p class="mt-1 truncate text-xs leading-5 text-muted-foreground">{{ subheading() }}</p>
+      }
+
+      <ng-content />
+    </div>
+  `,
+                }]
+        }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], subheading: [{ type: i0.Input, args: [{ isSignal: true, alias: "subheading", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class KanbanColumnActionsComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('inline-flex items-center gap-1', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: KanbanColumnActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: KanbanColumnActionsComponent, isStandalone: true, selector: "KanbanColumnActions, [KanbanColumnActions]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"kanban-column-actions\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: KanbanColumnActionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'KanbanColumnActions, [KanbanColumnActions]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"kanban-column-actions"',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class KanbanColumnCardsComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('flex min-h-0 flex-1 flex-col gap-[var(--kanban-card-gap)] overflow-y-auto p-2', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: KanbanColumnCardsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: KanbanColumnCardsComponent, isStandalone: true, selector: "KanbanColumnCards", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"kanban-column-cards\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: KanbanColumnCardsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'KanbanColumnCards',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"kanban-column-cards"',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class KanbanColumnFooterComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('flex flex-col gap-2 border-t border-border/80 px-2 py-2', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: KanbanColumnFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: KanbanColumnFooterComponent, isStandalone: true, selector: "KanbanColumnFooter", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"kanban-column-footer\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: KanbanColumnFooterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'KanbanColumnFooter',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"kanban-column-footer"',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class KanbanCardComponent {
+    heading = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+    selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('flex w-full flex-col gap-3 rounded-lg border border-border bg-card p-3 text-left text-card-foreground shadow-sm transition-colors', 'hover:border-ring/60 hover:bg-accent/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background', 'disabled:pointer-events-none disabled:opacity-50', this.selected() ? 'border-ring bg-accent/40 ring-1 ring-ring' : '', this.disabled() ? 'pointer-events-none opacity-50' : '', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: KanbanCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: KanbanCardComponent, isStandalone: true, selector: "KanbanCard, button[KanbanCard], a[KanbanCard]", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, 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-slot": "\"kanban-card\"", "attr.data-selected": "selected() ? \"\" : null", "attr.aria-current": "selected() ? \"true\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.disabled": "disabled() ? \"\" : null" } }, ngImport: i0, template: `
+    <div class="order-1">
+      <ng-content select="KanbanCardHeader,[KanbanCardHeader]" />
+    </div>
+
+    <div class="order-3">
+      <ng-content select="KanbanCardFooter,[KanbanCardFooter]" />
+    </div>
+
+    <div class="order-2 min-w-0">
+      @if (heading()) {
+        <p class="text-sm font-medium leading-5 text-card-foreground">{{ heading() }}</p>
+      }
+
+      <ng-content />
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: KanbanCardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'KanbanCard, button[KanbanCard], a[KanbanCard]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"kanban-card"',
+                        '[attr.data-selected]': 'selected() ? "" : null',
+                        '[attr.aria-current]': 'selected() ? "true" : null',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '[attr.disabled]': 'disabled() ? "" : null',
+                    },
+                    template: `
+    <div class="order-1">
+      <ng-content select="KanbanCardHeader,[KanbanCardHeader]" />
+    </div>
+
+    <div class="order-3">
+      <ng-content select="KanbanCardFooter,[KanbanCardFooter]" />
+    </div>
+
+    <div class="order-2 min-w-0">
+      @if (heading()) {
+        <p class="text-sm font-medium leading-5 text-card-foreground">{{ heading() }}</p>
+      }
+
+      <ng-content />
+    </div>
+  `,
+                }]
+        }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class KanbanCardHeaderComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('flex min-w-0 flex-wrap items-center gap-1.5', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: KanbanCardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: KanbanCardHeaderComponent, isStandalone: true, selector: "KanbanCardHeader, [KanbanCardHeader]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"kanban-card-header\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: KanbanCardHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'KanbanCardHeader, [KanbanCardHeader]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"kanban-card-header"',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class KanbanCardFooterComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('flex min-w-0 items-center justify-between gap-2 text-xs text-muted-foreground', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: KanbanCardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: KanbanCardFooterComponent, isStandalone: true, selector: "KanbanCardFooter, [KanbanCardFooter]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"kanban-card-footer\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: KanbanCardFooterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'KanbanCardFooter, [KanbanCardFooter]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"kanban-card-footer"',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { KanbanCardComponent, KanbanCardFooterComponent, KanbanCardHeaderComponent, KanbanColumnActionsComponent, KanbanColumnCardsComponent, KanbanColumnComponent, KanbanColumnFooterComponent, KanbanColumnHeaderComponent, KanbanComponent };
+//# sourceMappingURL=ojiepermana-angular-component-kanban.mjs.map

package/fesm2022/ojiepermana-angular-component-kanban.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ojiepermana-angular-component-kanban.mjs","sources":["../../../library/component/kanban/kanban.component.ts","../../../library/component/kanban/ojiepermana-angular-component-kanban.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, booleanAttribute, computed, input } from '@angular/core';\nimport { cn } from '@ojiepermana/angular-component/utils';\n\nexport type KanbanColumnWidth = 'sm' | 'default' | 'lg';\n\nconst kanbanColumnWidthClasses: Record<KanbanColumnWidth, string> = {\n  sm: '[--kanban-column-width:16rem]',\n  default: '[--kanban-column-width:18rem]',\n  lg: '[--kanban-column-width:22rem]',\n};\n\n@Component({\n  selector: 'Kanban',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[attr.data-slot]': '\"kanban\"',\n    '[attr.data-column-width]': 'columnWidth()',\n    '[attr.data-dense]': 'dense() ? \"\" : null',\n  },\n  template: `<ng-content />`,\n})\nexport class KanbanComponent {\n  readonly columnWidth = input<KanbanColumnWidth>('default');\n  readonly dense = input(false, { transform: booleanAttribute });\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() =>\n    cn(\n      'flex w-full min-w-0 gap-[var(--kanban-column-gap)] overflow-x-auto pb-3 text-sm text-foreground',\n      '[--kanban-card-gap:0.75rem] [--kanban-column-gap:1rem]',\n      kanbanColumnWidthClasses[this.columnWidth()],\n      this.dense() ? '[--kanban-card-gap:0.5rem] [--kanban-column-gap:0.75rem]' : '',\n      this.class(),\n    ),\n  );\n}\n\n@Component({\n  selector: 'KanbanColumn',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[attr.data-slot]': '\"kanban-column\"',\n  },\n  template: `<ng-content />`,\n})\nexport class KanbanColumnComponent {\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() =>\n    cn(\n      'flex max-h-full min-h-0 w-[var(--kanban-column-width)] shrink-0 flex-col overflow-hidden rounded-lg border border-border bg-muted/35 text-foreground shadow-sm',\n      this.class(),\n    ),\n  );\n}\n\n@Component({\n  selector: 'KanbanColumnHeader',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[attr.data-slot]': '\"kanban-column-header\"',\n  },\n  template: `\n    <div class=\"order-2 inline-flex shrink-0 items-center gap-1\">\n      <ng-content select=\"KanbanColumnActions,[KanbanColumnActions]\" />\n    </div>\n\n    <div class=\"order-1 min-w-0 flex-1\">\n      @if (heading()) {\n        <div class=\"flex min-w-0 items-center gap-2\">\n          <h3 class=\"truncate text-sm font-semibold leading-none text-foreground\">{{ heading() }}</h3>\n          @if (displayCount() !== null) {\n            <span\n              class=\"inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full bg-muted px-1.5 text-xs font-medium text-muted-foreground\">\n              {{ displayCount() }}\n            </span>\n          }\n          @if (badge()) {\n            <span\n              class=\"inline-flex shrink-0 items-center rounded-md border border-border bg-background px-1.5 py-0.5 text-xs font-medium text-muted-foreground\">\n              {{ badge() }}\n            </span>\n          }\n        </div>\n      }\n\n      @if (subheading()) {\n        <p class=\"mt-1 truncate text-xs leading-5 text-muted-foreground\">{{ subheading() }}</p>\n      }\n\n      <ng-content />\n    </div>\n  `,\n})\nexport class KanbanColumnHeaderComponent {\n  readonly heading = input<string>('');\n  readonly subheading = input<string>('');\n  readonly count = input<string | number | null>(null);\n  readonly badge = input<string>('');\n  readonly class = input<string>('');\n\n  protected readonly displayCount = computed(() => {\n    const count = this.count();\n    return count === null || count === undefined || count === '' ? null : count;\n  });\n\n  protected readonly classes = computed(() =>\n    cn('flex items-start gap-3 border-b border-border/80 px-3 py-3', this.class()),\n  );\n}\n\n@Component({\n  selector: 'KanbanColumnActions, [KanbanColumnActions]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[attr.data-slot]': '\"kanban-column-actions\"',\n  },\n  template: `<ng-content />`,\n})\nexport class KanbanColumnActionsComponent {\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() => cn('inline-flex items-center gap-1', this.class()));\n}\n\n@Component({\n  selector: 'KanbanColumnCards',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[attr.data-slot]': '\"kanban-column-cards\"',\n  },\n  template: `<ng-content />`,\n})\nexport class KanbanColumnCardsComponent {\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() =>\n    cn('flex min-h-0 flex-1 flex-col gap-[var(--kanban-card-gap)] overflow-y-auto p-2', this.class()),\n  );\n}\n\n@Component({\n  selector: 'KanbanColumnFooter',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[attr.data-slot]': '\"kanban-column-footer\"',\n  },\n  template: `<ng-content />`,\n})\nexport class KanbanColumnFooterComponent {\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() =>\n    cn('flex flex-col gap-2 border-t border-border/80 px-2 py-2', this.class()),\n  );\n}\n\n@Component({\n  selector: 'KanbanCard, button[KanbanCard], a[KanbanCard]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[attr.data-slot]': '\"kanban-card\"',\n    '[attr.data-selected]': 'selected() ? \"\" : null',\n    '[attr.aria-current]': 'selected() ? \"true\" : null',\n    '[attr.aria-disabled]': 'disabled() ? \"true\" : null',\n    '[attr.disabled]': 'disabled() ? \"\" : null',\n  },\n  template: `\n    <div class=\"order-1\">\n      <ng-content select=\"KanbanCardHeader,[KanbanCardHeader]\" />\n    </div>\n\n    <div class=\"order-3\">\n      <ng-content select=\"KanbanCardFooter,[KanbanCardFooter]\" />\n    </div>\n\n    <div class=\"order-2 min-w-0\">\n      @if (heading()) {\n        <p class=\"text-sm font-medium leading-5 text-card-foreground\">{{ heading() }}</p>\n      }\n\n      <ng-content />\n    </div>\n  `,\n})\nexport class KanbanCardComponent {\n  readonly heading = input<string>('');\n  readonly selected = input(false, { transform: booleanAttribute });\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() =>\n    cn(\n      'flex w-full flex-col gap-3 rounded-lg border border-border bg-card p-3 text-left text-card-foreground shadow-sm transition-colors',\n      'hover:border-ring/60 hover:bg-accent/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n      'disabled:pointer-events-none disabled:opacity-50',\n      this.selected() ? 'border-ring bg-accent/40 ring-1 ring-ring' : '',\n      this.disabled() ? 'pointer-events-none opacity-50' : '',\n      this.class(),\n    ),\n  );\n}\n\n@Component({\n  selector: 'KanbanCardHeader, [KanbanCardHeader]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[attr.data-slot]': '\"kanban-card-header\"',\n  },\n  template: `<ng-content />`,\n})\nexport class KanbanCardHeaderComponent {\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() => cn('flex min-w-0 flex-wrap items-center gap-1.5', this.class()));\n}\n\n@Component({\n  selector: 'KanbanCardFooter, [KanbanCardFooter]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[attr.data-slot]': '\"kanban-card-footer\"',\n  },\n  template: `<ng-content />`,\n})\nexport class KanbanCardFooterComponent {\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() =>\n    cn('flex min-w-0 items-center justify-between gap-2 text-xs text-muted-foreground', this.class()),\n  );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAKA,MAAM,wBAAwB,GAAsC;AAClE,IAAA,EAAE,EAAE,+BAA+B;AACnC,IAAA,OAAO,EAAE,+BAA+B;AACxC,IAAA,EAAE,EAAE,+BAA+B;CACpC;MAaY,eAAe,CAAA;IACjB,WAAW,GAAG,KAAK,CAAoB,SAAS;oFAAC;IACjD,KAAK,GAAG,KAAK,CAAC,KAAK,6EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;IACrD,KAAK,GAAG,KAAK,CAAS,EAAE;8EAAC;AAEf,IAAA,OAAO,GAAG,QAAQ,CAAC,MACpC,EAAE,CACA,iGAAiG,EACjG,wDAAwD,EACxD,wBAAwB,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,EAC5C,IAAI,CAAC,KAAK,EAAE,GAAG,0DAA0D,GAAG,EAAE,EAC9E,IAAI,CAAC,KAAK,EAAE,CACb;gFACF;uGAbU,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,+mBAFhB,CAAA,cAAA,CAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAEf,eAAe,EAAA,UAAA,EAAA,CAAA;kBAX3B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,QAAQ;oBAClB,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAC/C,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,kBAAkB,EAAE,UAAU;AAC9B,wBAAA,0BAA0B,EAAE,eAAe;AAC3C,wBAAA,mBAAmB,EAAE,qBAAqB;AAC3C,qBAAA;AACD,oBAAA,QAAQ,EAAE,CAAA,cAAA,CAAgB;AAC3B,iBAAA;;MA0BY,qBAAqB,CAAA;IACvB,KAAK,GAAG,KAAK,CAAS,EAAE;8EAAC;AAEf,IAAA,OAAO,GAAG,QAAQ,CAAC,MACpC,EAAE,CACA,gKAAgK,EAChK,IAAI,CAAC,KAAK,EAAE,CACb;gFACF;uGARU,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,mSAFtB,CAAA,cAAA,CAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAEf,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBATjC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,cAAc;oBACxB,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAC/C,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,kBAAkB,EAAE,iBAAiB;AACtC,qBAAA;AACD,oBAAA,QAAQ,EAAE,CAAA,cAAA,CAAgB;AAC3B,iBAAA;;MAmDY,2BAA2B,CAAA;IAC7B,OAAO,GAAG,KAAK,CAAS,EAAE;gFAAC;IAC3B,UAAU,GAAG,KAAK,CAAS,EAAE;mFAAC;IAC9B,KAAK,GAAG,KAAK,CAAyB,IAAI;8EAAC;IAC3C,KAAK,GAAG,KAAK,CAAS,EAAE;8EAAC;IACzB,KAAK,GAAG,KAAK,CAAS,EAAE;8EAAC;AAEf,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAK;AAC9C,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE;AAC1B,QAAA,OAAO,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,EAAE,GAAG,IAAI,GAAG,KAAK;IAC7E,CAAC;qFAAC;AAEiB,IAAA,OAAO,GAAG,QAAQ,CAAC,MACpC,EAAE,CAAC,4DAA4D,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;gFAC/E;uGAdU,2BAA2B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAA3B,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,2BAA2B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,0BAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAhC5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAEU,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBAvCvC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,oBAAoB;oBAC9B,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAC/C,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,kBAAkB,EAAE,wBAAwB;AAC7C,qBAAA;AACD,oBAAA,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BT,EAAA,CAAA;AACF,iBAAA;;MA2BY,4BAA4B,CAAA;IAC9B,KAAK,GAAG,KAAK,CAAS,EAAE;8EAAC;AAEf,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,gCAAgC,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;gFAAC;uGAHpF,4BAA4B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAA5B,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,4BAA4B,yUAF7B,CAAA,cAAA,CAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAEf,4BAA4B,EAAA,UAAA,EAAA,CAAA;kBATxC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,4CAA4C;oBACtD,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAC/C,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,kBAAkB,EAAE,yBAAyB;AAC9C,qBAAA;AACD,oBAAA,QAAQ,EAAE,CAAA,cAAA,CAAgB;AAC3B,iBAAA;;MAgBY,0BAA0B,CAAA;IAC5B,KAAK,GAAG,KAAK,CAAS,EAAE;8EAAC;AAEf,IAAA,OAAO,GAAG,QAAQ,CAAC,MACpC,EAAE,CAAC,+EAA+E,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;gFAClG;uGALU,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAA1B,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,0BAA0B,8SAF3B,CAAA,cAAA,CAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAEf,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBATtC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,mBAAmB;oBAC7B,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAC/C,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,kBAAkB,EAAE,uBAAuB;AAC5C,qBAAA;AACD,oBAAA,QAAQ,EAAE,CAAA,cAAA,CAAgB;AAC3B,iBAAA;;MAkBY,2BAA2B,CAAA;IAC7B,KAAK,GAAG,KAAK,CAAS,EAAE;8EAAC;AAEf,IAAA,OAAO,GAAG,QAAQ,CAAC,MACpC,EAAE,CAAC,yDAAyD,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;gFAC5E;uGALU,2BAA2B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAA3B,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,2BAA2B,gTAF5B,CAAA,cAAA,CAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAEf,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBATvC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,oBAAoB;oBAC9B,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAC/C,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,kBAAkB,EAAE,wBAAwB;AAC7C,qBAAA;AACD,oBAAA,QAAQ,EAAE,CAAA,cAAA,CAAgB;AAC3B,iBAAA;;MAsCY,mBAAmB,CAAA;IACrB,OAAO,GAAG,KAAK,CAAS,EAAE;gFAAC;IAC3B,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;IACxD,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;IACxD,KAAK,GAAG,KAAK,CAAS,EAAE;8EAAC;IAEf,OAAO,GAAG,QAAQ,CAAC,MACpC,EAAE,CACA,mIAAmI,EACnI,kLAAkL,EAClL,kDAAkD,EAClD,IAAI,CAAC,QAAQ,EAAE,GAAG,2CAA2C,GAAG,EAAE,EAClE,IAAI,CAAC,QAAQ,EAAE,GAAG,gCAAgC,GAAG,EAAE,EACvD,IAAI,CAAC,KAAK,EAAE,CACb;gFACF;uGAfU,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,+CAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,iBAAA,EAAA,oBAAA,EAAA,0BAAA,EAAA,mBAAA,EAAA,8BAAA,EAAA,oBAAA,EAAA,8BAAA,EAAA,eAAA,EAAA,0BAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAlBpB;;;;;;;;;;;;;;;;AAgBT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAEU,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBA7B/B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,+CAA+C;oBACzD,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAC/C,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,kBAAkB,EAAE,eAAe;AACnC,wBAAA,sBAAsB,EAAE,wBAAwB;AAChD,wBAAA,qBAAqB,EAAE,4BAA4B;AACnD,wBAAA,sBAAsB,EAAE,4BAA4B;AACpD,wBAAA,iBAAiB,EAAE,wBAAwB;AAC5C,qBAAA;AACD,oBAAA,QAAQ,EAAE;;;;;;;;;;;;;;;;AAgBT,EAAA,CAAA;AACF,iBAAA;;MA4BY,yBAAyB,CAAA;IAC3B,KAAK,GAAG,KAAK,CAAS,EAAE;8EAAC;AAEf,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,6CAA6C,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;gFAAC;uGAHjG,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAzB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,yBAAyB,gUAF1B,CAAA,cAAA,CAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAEf,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBATrC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,sCAAsC;oBAChD,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAC/C,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,kBAAkB,EAAE,sBAAsB;AAC3C,qBAAA;AACD,oBAAA,QAAQ,EAAE,CAAA,cAAA,CAAgB;AAC3B,iBAAA;;MAgBY,yBAAyB,CAAA;IAC3B,KAAK,GAAG,KAAK,CAAS,EAAE;8EAAC;AAEf,IAAA,OAAO,GAAG,QAAQ,CAAC,MACpC,EAAE,CAAC,+EAA+E,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;gFAClG;uGALU,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAzB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,yBAAyB,gUAF1B,CAAA,cAAA,CAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAEf,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBATrC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,sCAAsC;oBAChD,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAC/C,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,kBAAkB,EAAE,sBAAsB;AAC3C,qBAAA;AACD,oBAAA,QAAQ,EAAE,CAAA,cAAA,CAAgB;AAC3B,iBAAA;;;ACzOD;;AAEG;;;;"}

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

@@ -0,0 +1,55 @@
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { cn } from '@ojiepermana/angular-component/utils';
+
+class KbdComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn([
+        'inline-flex min-h-6 min-w-6 select-none items-center justify-center gap-1 whitespace-nowrap rounded-md',
+        'border border-border bg-background px-1.5 font-mono text-2xs-plus font-medium leading-none text-foreground shadow-sm',
+        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-3',
+    ].join(' '), this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: KbdComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: KbdComponent, isStandalone: true, selector: "Kbd, [Kbd]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"kbd\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: KbdComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Kbd, [Kbd]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"kbd"',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class KbdGroupComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('inline-flex flex-wrap items-center gap-1.5', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: KbdGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: KbdGroupComponent, isStandalone: true, selector: "KbdGroup, [KbdGroup]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"kbd-group\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: KbdGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'KbdGroup, [KbdGroup]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"kbd-group"',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { KbdComponent, KbdGroupComponent };
+//# sourceMappingURL=ojiepermana-angular-component-kbd.mjs.map

package/fesm2022/ojiepermana-angular-component-kbd.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ojiepermana-angular-component-kbd.mjs","sources":["../../../library/component/kbd/kbd.component.ts","../../../library/component/kbd/ojiepermana-angular-component-kbd.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { cn } from '@ojiepermana/angular-component/utils';\n\n@Component({\n  selector: 'Kbd, [Kbd]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[attr.data-slot]': '\"kbd\"',\n  },\n  template: `<ng-content />`,\n})\nexport class KbdComponent {\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() =>\n    cn(\n      [\n        'inline-flex min-h-6 min-w-6 select-none items-center justify-center gap-1 whitespace-nowrap rounded-md',\n        'border border-border bg-background px-1.5 font-mono text-2xs-plus font-medium leading-none text-foreground shadow-sm',\n        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-3',\n      ].join(' '),\n      this.class(),\n    ),\n  );\n}\n\n@Component({\n  selector: 'KbdGroup, [KbdGroup]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[attr.data-slot]': '\"kbd-group\"',\n  },\n  template: `<ng-content />`,\n})\nexport class KbdGroupComponent {\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() => cn('inline-flex flex-wrap items-center gap-1.5', this.class()));\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAYa,YAAY,CAAA;IACd,KAAK,GAAG,KAAK,CAAS,EAAE;8EAAC;AAEf,IAAA,OAAO,GAAG,QAAQ,CAAC,MACpC,EAAE,CACA;QACE,wGAAwG;QACxG,sHAAsH;QACtH,iFAAiF;KAClF,CAAC,IAAI,CAAC,GAAG,CAAC,EACX,IAAI,CAAC,KAAK,EAAE,CACb;gFACF;uGAZU,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAZ,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAY,uRAFb,CAAA,cAAA,CAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAEf,YAAY,EAAA,UAAA,EAAA,CAAA;kBATxB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,YAAY;oBACtB,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAC/C,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,kBAAkB,EAAE,OAAO;AAC5B,qBAAA;AACD,oBAAA,QAAQ,EAAE,CAAA,cAAA,CAAgB;AAC3B,iBAAA;;MAyBY,iBAAiB,CAAA;IACnB,KAAK,GAAG,KAAK,CAAS,EAAE;8EAAC;AAEf,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,4CAA4C,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;gFAAC;uGAHhG,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,uSAFlB,CAAA,cAAA,CAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAEf,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAT7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,sBAAsB;oBAChC,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAC/C,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,kBAAkB,EAAE,aAAa;AAClC,qBAAA;AACD,oBAAA,QAAQ,EAAE,CAAA,cAAA,CAAgB;AAC3B,iBAAA;;;ACnCD;;AAEG;;;;"}

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

@@ -0,0 +1,33 @@
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { cn } from '@ojiepermana/angular-component/utils';
+
+class LabelComponent {
+    for = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "for" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('text-sm font-medium leading-none text-foreground', 'peer-disabled:cursor-not-allowed peer-disabled:opacity-70', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: LabelComponent, isStandalone: true, selector: "Label, label[Label]", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.for": "for() || null" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LabelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Label, label[Label]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.for]': 'for() || null',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { for: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LabelComponent };
+//# sourceMappingURL=ojiepermana-angular-component-label.mjs.map

package/fesm2022/ojiepermana-angular-component-label.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ojiepermana-angular-component-label.mjs","sources":["../../../library/component/label/label.component.ts","../../../library/component/label/ojiepermana-angular-component-label.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { cn } from '@ojiepermana/angular-component/utils';\n\n@Component({\n  selector: 'Label, label[Label]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[attr.for]': 'for() || null',\n  },\n  template: `<ng-content />`,\n})\nexport class LabelComponent {\n  readonly for = input<string | null>(null);\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() =>\n    cn(\n      'text-sm font-medium leading-none text-foreground',\n      'peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n      this.class(),\n    ),\n  );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAYa,cAAc,CAAA;IAChB,GAAG,GAAG,KAAK,CAAgB,IAAI;4EAAC;IAChC,KAAK,GAAG,KAAK,CAAS,EAAE;8EAAC;AAEf,IAAA,OAAO,GAAG,QAAQ,CAAC,MACpC,EAAE,CACA,kDAAkD,EAClD,2DAA2D,EAC3D,IAAI,CAAC,KAAK,EAAE,CACb;gFACF;uGAVU,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAd,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,cAAc,kZAFf,CAAA,cAAA,CAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAEf,cAAc,EAAA,UAAA,EAAA,CAAA;kBAT1B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,qBAAqB;oBAC/B,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAC/C,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,YAAY,EAAE,eAAe;AAC9B,qBAAA;AACD,oBAAA,QAAQ,EAAE,CAAA,cAAA,CAAgB;AAC3B,iBAAA;;;ACXD;;AAEG;;;;"}