@ngstarter-ui/components 1.0.21

package/fesm2022/ngstarter-ui-components-input.mjs

@@ -0,0 +1,152 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, signal, DestroyRef, input, booleanAttribute, computed, effect, forwardRef, Directive } from '@angular/core';
+import { NgControl, NgForm, FormGroupDirective } from '@angular/forms';
+import { FormFieldControl } from '@ngstarter-ui/components/form-field';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ErrorStateMatcher, AUTOFOCUSABLE } from '@ngstarter-ui/components/core';
+
+class Input {
+    elementRef = inject(ElementRef);
+    ngControl = inject(NgControl, { optional: true, self: true });
+    stateChanges = signal(undefined, ...(ngDevMode ? [{ debugName: "stateChanges" }] : /* istanbul ignore next */ []));
+    _destroyRef = inject(DestroyRef);
+    _defaultErrorStateMatcher = inject(ErrorStateMatcher);
+    _parentForm = inject(NgForm, { optional: true });
+    _parentFormGroup = inject(FormGroupDirective, { optional: true });
+    _id = input(`ngs-input-${nextUniqueId++}`, { ...(ngDevMode ? { debugName: "_id" } : /* istanbul ignore next */ {}), alias: 'id' });
+    get id() { return this._id(); }
+    _placeholder = input('', { ...(ngDevMode ? { debugName: "_placeholder" } : /* istanbul ignore next */ {}), alias: 'placeholder' });
+    get placeholder() { return this._placeholder(); }
+    _required = input(false, { ...(ngDevMode ? { debugName: "_required" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'required' });
+    get required() { return this._required(); }
+    _disabled = input(false, { ...(ngDevMode ? { debugName: "_disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'disabled' });
+    get disabled() { return this._disabled(); }
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    errorStateMatcher = input(...(ngDevMode ? [undefined, { debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
+    _value = signal('', ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
+    get value() {
+        return this._value();
+    }
+    set value(value) {
+        this._value.set(value);
+        this.elementRef.nativeElement.value = value;
+    }
+    focusedValue = false;
+    _focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : /* istanbul ignore next */ []));
+    get focused() { return this._focused(); }
+    errorStateValue = false;
+    _errorState = signal(false, ...(ngDevMode ? [{ debugName: "_errorState" }] : /* istanbul ignore next */ []));
+    get errorState() { return this._errorState(); }
+    isRequired = computed(() => {
+        if (this._required()) {
+            return true;
+        }
+        const control = this.ngControl?.control;
+        if (control && control.validator) {
+            const validator = control.validator({});
+            if (validator && validator['required']) {
+                return true;
+            }
+        }
+        return false;
+    }, ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
+    emptyValue = true;
+    _empty = computed(() => !this._value(), ...(ngDevMode ? [{ debugName: "_empty" }] : /* istanbul ignore next */ []));
+    get empty() { return this._empty(); }
+    shouldLabelFloatValue = false;
+    _shouldLabelFloat = computed(() => {
+        return !!this._value() || this._focused();
+    }, ...(ngDevMode ? [{ debugName: "_shouldLabelFloat" }] : /* istanbul ignore next */ []));
+    get shouldLabelFloat() { return this._shouldLabelFloat(); }
+    constructor() {
+        effect(() => {
+            this.focusedValue = this._focused();
+            this.errorStateValue = this._errorState();
+            this.emptyValue = this._empty();
+            this.shouldLabelFloatValue = this._shouldLabelFloat();
+        });
+    }
+    ngOnInit() {
+        this._value.set(this.elementRef.nativeElement.value);
+        this.ngControl?.statusChanges?.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
+            this.updateErrorState();
+        });
+    }
+    ngDoCheck() {
+        if (this._value() !== this.elementRef.nativeElement.value) {
+            this._value.set(this.elementRef.nativeElement.value);
+        }
+        this.updateErrorState();
+    }
+    updateErrorState() {
+        const oldState = this._errorState();
+        const parent = this._parentFormGroup || this._parentForm;
+        const matcher = this.errorStateMatcher() || this._defaultErrorStateMatcher;
+        const control = this.ngControl ? this.ngControl.control : null;
+        const newState = matcher.isErrorState(control, parent);
+        if (newState !== oldState) {
+            this._errorState.set(newState);
+        }
+    }
+    onFocus() {
+        this._focused.set(true);
+    }
+    onBlur() {
+        this._focused.set(false);
+        this.updateErrorState();
+    }
+    onInput(event) {
+        this._value.set(event.target.value);
+    }
+    focus() {
+        this.elementRef.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Input, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: Input, isStandalone: true, selector: "input[ngsInput], textarea[ngsInput]", inputs: { _id: { classPropertyName: "_id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, _placeholder: { classPropertyName: "_placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, _required: { classPropertyName: "_required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, _disabled: { classPropertyName: "_disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()", "input": "onInput($event)" }, properties: { "attr.id": "id", "attr.placeholder": "placeholder", "disabled": "disabled", "required": "required", "attr.readonly": "readonly() || null", "class.ngs-input-floating": "shouldLabelFloat" }, classAttribute: "ngs-input" }, providers: [
+            {
+                provide: FormFieldControl,
+                useExisting: forwardRef(() => Input)
+            },
+            {
+                provide: AUTOFOCUSABLE,
+                useExisting: forwardRef(() => Input)
+            }
+        ], exportAs: ["ngsInput"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Input, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[ngsInput], textarea[ngsInput]',
+                    exportAs: 'ngsInput',
+                    host: {
+                        'class': 'ngs-input',
+                        '[attr.id]': 'id',
+                        '[attr.placeholder]': 'placeholder',
+                        '[disabled]': 'disabled',
+                        '[required]': 'required',
+                        '[attr.readonly]': 'readonly() || null',
+                        '[class.ngs-input-floating]': 'shouldLabelFloat',
+                        '(focus)': 'onFocus()',
+                        '(blur)': 'onBlur()',
+                        '(input)': 'onInput($event)',
+                    },
+                    providers: [
+                        {
+                            provide: FormFieldControl,
+                            useExisting: forwardRef(() => Input)
+                        },
+                        {
+                            provide: AUTOFOCUSABLE,
+                            useExisting: forwardRef(() => Input)
+                        }
+                    ]
+                }]
+        }], ctorParameters: () => [], propDecorators: { _id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], _placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], _required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], _disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }] } });
+let nextUniqueId = 0;
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Input };
+//# sourceMappingURL=ngstarter-ui-components-input.mjs.map

package/fesm2022/ngstarter-ui-components-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngstarter-ui-components-input.mjs","sources":["../../../projects/components/input/src/input.ts","../../../projects/components/input/ngstarter-ui-components-input.ts"],"sourcesContent":["import {\n  Directive,\n  ElementRef,\n  booleanAttribute,\n  inject,\n  OnInit,\n  DoCheck,\n  input,\n  signal,\n  computed,\n  effect,\n  forwardRef,\n  DestroyRef,\n} from '@angular/core';\nimport { NgControl, NgForm, FormGroupDirective } from '@angular/forms';\nimport { FormFieldControl } from '@ngstarter-ui/components/form-field';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { AUTOFOCUSABLE, ErrorStateMatcher } from '@ngstarter-ui/components/core';\n\n@Directive({\n  selector: 'input[ngsInput], textarea[ngsInput]',\n  exportAs: 'ngsInput',\n  host: {\n    'class': 'ngs-input',\n    '[attr.id]': 'id',\n    '[attr.placeholder]': 'placeholder',\n    '[disabled]': 'disabled',\n    '[required]': 'required',\n    '[attr.readonly]': 'readonly() || null',\n    '[class.ngs-input-floating]': 'shouldLabelFloat',\n    '(focus)': 'onFocus()',\n    '(blur)': 'onBlur()',\n    '(input)': 'onInput($event)',\n  },\n  providers: [\n    {\n      provide: FormFieldControl,\n      useExisting: forwardRef(() => Input)\n    },\n    {\n      provide: AUTOFOCUSABLE,\n      useExisting: forwardRef(() => Input)\n    }\n  ]\n})\nexport class Input implements OnInit, DoCheck, FormFieldControl<string> {\n  protected elementRef = inject(ElementRef);\n  readonly ngControl = inject(NgControl, { optional: true, self: true });\n  readonly stateChanges = signal<void>(undefined);\n  private _destroyRef = inject(DestroyRef);\n  private _defaultErrorStateMatcher = inject(ErrorStateMatcher);\n  private _parentForm = inject(NgForm, { optional: true });\n  private _parentFormGroup = inject(FormGroupDirective, { optional: true });\n\n  _id = input<string>(`ngs-input-${nextUniqueId++}`, { alias: 'id' });\n  get id(): string { return this._id(); }\n  _placeholder = input<string>('', { alias: 'placeholder' });\n  get placeholder(): string { return this._placeholder(); }\n  _required = input(false, { transform: booleanAttribute, alias: 'required' });\n  get required(): boolean { return this._required(); }\n  _disabled = input<boolean, any>(false, { transform: booleanAttribute, alias: 'disabled' });\n  get disabled(): boolean { return this._disabled(); }\n  readonly = input(false, { transform: booleanAttribute });\n\n  errorStateMatcher = input<ErrorStateMatcher>();\n\n  private _value = signal('');\n  get value(): string {\n    return this._value();\n  }\n  set value(value: string) {\n    this._value.set(value);\n    this.elementRef.nativeElement.value = value;\n  }\n\n  focusedValue = false;\n  private _focused = signal(false);\n  get focused(): boolean { return this._focused(); }\n\n  errorStateValue = false;\n  private _errorState = signal(false);\n  get errorState(): boolean { return this._errorState(); }\n\n  isRequired = computed(() => {\n    if (this._required()) {\n      return true;\n    }\n\n    const control = this.ngControl?.control;\n\n    if (control && control.validator) {\n      const validator = control.validator({} as any);\n\n      if (validator && validator['required']) {\n        return true;\n      }\n    }\n\n    return false;\n  });\n\n  emptyValue = true;\n  private _empty = computed(() => !this._value());\n  get empty(): boolean { return this._empty(); }\n\n  shouldLabelFloatValue = false;\n  private _shouldLabelFloat = computed(() => {\n    return !!this._value() || this._focused();\n  });\n  get shouldLabelFloat(): boolean { return this._shouldLabelFloat(); }\n\n  constructor() {\n    effect(() => {\n      this.focusedValue = this._focused();\n      this.errorStateValue = this._errorState();\n      this.emptyValue = this._empty();\n      this.shouldLabelFloatValue = this._shouldLabelFloat();\n    });\n  }\n\n  ngOnInit() {\n    this._value.set(this.elementRef.nativeElement.value);\n    this.ngControl?.statusChanges?.pipe(\n      takeUntilDestroyed(this._destroyRef)\n    ).subscribe(() => {\n      this.updateErrorState();\n    });\n  }\n\n  ngDoCheck() {\n    if (this._value() !== this.elementRef.nativeElement.value) {\n      this._value.set(this.elementRef.nativeElement.value);\n    }\n    this.updateErrorState();\n  }\n\n  private updateErrorState() {\n    const oldState = this._errorState();\n    const parent = this._parentFormGroup || this._parentForm;\n    const matcher = this.errorStateMatcher() || this._defaultErrorStateMatcher;\n    const control = this.ngControl ? this.ngControl.control as any : null;\n    const newState = matcher.isErrorState(control, parent);\n\n    if (newState !== oldState) {\n      this._errorState.set(newState);\n    }\n  }\n\n  onFocus() {\n    this._focused.set(true);\n  }\n\n  onBlur() {\n    this._focused.set(false);\n    this.updateErrorState();\n  }\n\n  onInput(event: Event) {\n    this._value.set((event.target as HTMLInputElement).value);\n  }\n\n  focus(): void {\n    this.elementRef.nativeElement.focus();\n  }\n}\n\nlet nextUniqueId = 0;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngstarter-ui-components-kanban-board.mjs

@@ -0,0 +1,156 @@
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, contentChild, viewChild, ElementRef, Renderer2, DestroyRef, input, signal, output, Component } from '@angular/core';
+import { moveItemInArray, transferArrayItem, CdkDrag, CdkDropList, CdkDropListGroup } from '@angular/cdk/drag-drop';
+import { Icon } from '@ngstarter-ui/components/icon';
+import { Ripple } from '@ngstarter-ui/components/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Menu, MenuItem, MenuTrigger } from '@ngstarter-ui/components/menu';
+import { PanelContent, Panel, PanelHeader } from '@ngstarter-ui/components/panel';
+import { fromEvent } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Button } from '@ngstarter-ui/components/button';
+
+class KanbanItemDefDirective {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KanbanItemDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: KanbanItemDefDirective, isStandalone: true, selector: "[ngsKanbanItemDef]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KanbanItemDefDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsKanbanItemDef]'
+                }]
+        }] });
+
+class KanbanBoard {
+    _itemTplDef = contentChild.required(KanbanItemDefDirective);
+    _headerContainer = viewChild.required('headerContainer', { read: ElementRef });
+    _scrollContainer = viewChild.required('scrollContainer', { read: ElementRef });
+    _renderer = inject(Renderer2);
+    _destroyRef = inject(DestroyRef);
+    columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    colors = input([], ...(ngDevMode ? [{ debugName: "colors" }] : /* istanbul ignore next */ []));
+    _hasVerticalScroll = signal(false, ...(ngDevMode ? [{ debugName: "_hasVerticalScroll" }] : /* istanbul ignore next */ []));
+    columnEdit = output();
+    columnDelete = output();
+    itemAdd = output();
+    itemClick = output();
+    itemDropped = output();
+    itemSorted = output();
+    itemTransferred = output();
+    _startContainerXOffset = 0;
+    _itemXOffset = 0;
+    _itemWidth = 0;
+    isDraggingActive = false;
+    _autoScrollStarted = false;
+    ngOnInit() {
+        fromEvent(this._scrollContainer().nativeElement, 'scroll')
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe((event) => {
+            this.onScroll(event);
+        });
+    }
+    onDropped(event) {
+        this.itemDropped.emit(event);
+        if (event.previousContainer === event.container) {
+            this.itemSorted.emit({
+                previousIndex: event.previousIndex,
+                currentIndex: event.currentIndex
+            });
+            moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+        }
+        else {
+            this.itemTransferred.emit({
+                previousContainerData: event.previousContainer.data,
+                currentContainerData: event.container.data,
+                previousIndex: event.previousIndex,
+                currentIndex: event.currentIndex
+            });
+            transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
+        }
+    }
+    onScroll(event) {
+        const target = event.target;
+        const headerContainerElement = this._headerContainer().nativeElement;
+        this._renderer.setStyle(headerContainerElement, 'transform', `translate(-${target.scrollLeft}px, 0)`);
+        this._hasVerticalScroll.set(target.scrollTop > 0);
+    }
+    onDragStarted(event, element) {
+        this.isDraggingActive = true;
+    }
+    onDragMoved(event) {
+        const space = 100;
+        const scrollContainer = this._scrollContainer().nativeElement;
+        const scrollContainerWidth = scrollContainer.getBoundingClientRect().width;
+        const itemOffsetXStart = this._startContainerXOffset + event.distance.x;
+        const itemOffsetXEnd = this._startContainerXOffset + event.distance.x + this._itemWidth;
+        if (!this._autoScrollStarted) {
+            if (itemOffsetXEnd + space >= scrollContainerWidth) {
+                this._autoScrollStarted = true;
+                scrollContainer.scroll({
+                    left: scrollContainer.scrollLeft + this._itemWidth * 2,
+                    behavior: 'smooth'
+                });
+                setTimeout(() => {
+                    this._autoScrollStarted = false;
+                }, 500);
+            }
+            else if (itemOffsetXStart <= space && scrollContainer.scrollLeft > 0) {
+                this._autoScrollStarted = true;
+                scrollContainer.scroll({
+                    left: scrollContainer.scrollLeft - this._itemWidth * 2,
+                    behavior: 'smooth'
+                });
+                setTimeout(() => {
+                    this._autoScrollStarted = false;
+                }, 500);
+            }
+        }
+    }
+    onDragEnded(event) {
+        this.isDraggingActive = false;
+    }
+    itemMousedown(event) {
+        const scrollContainerElement = this._scrollContainer().nativeElement;
+        let targetElement = event.target;
+        if (!targetElement.classList.contains('kanban-item')) {
+            targetElement = targetElement.closest('.kanban-item');
+        }
+        const targetRect = targetElement.getBoundingClientRect();
+        this._startContainerXOffset = targetRect.x - scrollContainerElement.getBoundingClientRect().x;
+        this._itemXOffset = event.clientX - targetRect.x;
+        this._itemWidth = targetRect.width;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KanbanBoard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KanbanBoard, isStandalone: true, selector: "ngs-kanban-board", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columnEdit: "columnEdit", columnDelete: "columnDelete", itemAdd: "itemAdd", itemClick: "itemClick", itemDropped: "itemDropped", itemSorted: "itemSorted", itemTransferred: "itemTransferred" }, host: { properties: { "class.is-dragging-active": "isDraggingActive" }, classAttribute: "ngs-kanban-board" }, queries: [{ propertyName: "_itemTplDef", first: true, predicate: KanbanItemDefDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_headerContainer", first: true, predicate: ["headerContainer"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, read: ElementRef, isSignal: true }], exportAs: ["ngsKanbanBoard"], ngImport: i0, template: "<ngs-panel class=\"h-full\">\n  <ngs-panel-header class=\"header\">\n    <div class=\"flex flex-nowrap h-full items-center header-container\" #headerContainer>\n      @for (column of columns(); track column; let index = $index) {\n        <div class=\"h-full header-column relative flex gap-2 items-center justify-between flex-none\">\n          <div class=\"flex gap-2 items-center uppercase text-sm\">\n            @if (column.color) {\n              <div class=\"size-3 rounded-full\" [style.background-color]=\"column.color\"></div>\n            }\n            {{ column.name }} ({{ column.items.length }})\n          </div>\n          <div class=\"flex gap-0.5 items-center\">\n            <button ngsIconButton (click)=\"itemAdd.emit()\">\n              <ngs-icon name=\"fluent:add-24-regular\"/>\n            </button>\n            <button ngsIconButton [ngsMenuTriggerFor]=\"columnMenu\">\n              <ngs-icon name=\"fluent:more-horizontal-24-regular\"/>\n            </button>\n          </div>\n\n          @if (_hasVerticalScroll()) {\n            <div class=\"h-px bg-surface-container absolute bottom-0 start-0 end-0\"></div>\n          }\n\n          <ngs-menu #columnMenu=\"ngsMenu\">\n            <button ngs-menu-item (click)=\"columnEdit.emit(column)\">\n              <ngs-icon name=\"fluent:share-24-regular\"/>\n              <span>Edit</span>\n            </button>\n            <button ngs-menu-item (click)=\"columnDelete.emit({ column, index })\">\n              <ngs-icon name=\"fluent:delete-24-regular\"/>\n              <span>Delete</span>\n            </button>\n          </ngs-menu>\n        </div>\n      }\n    </div>\n  </ngs-panel-header>\n  <ngs-panel-content class=\"relative overflow-hidden\">\n    <div #scrollContainer\n         class=\"scroll-container h-full absolute overflow-auto inset-0 flex body items-baseline\">\n      <div #scrollContainerContent\n           class=\"flex min-h-full flex-nowrap column\" cdkDropListGroup>\n        @for (column of columns(); track column) {\n          <div class=\"column-container bg-surface-container-low flex-none rounded-2xl p-3 min-h-full flex flex-col gap-3\"\n               cdkDropList\n               [cdkDropListData]=\"column.items\"\n               (cdkDropListDropped)=\"onDropped($event)\">\n            @for (item of column.items; track item) {\n              <div #element\n                   class=\"kanban-item bg-surface-container-lowest flex-none rounded-2xl\n                          p-3 shadow-sm cursor-pointer hover:outline-2 hover:outline-primary\"\n                   cdkDrag [cdkDragData]=\"item\" ngsRipple\n                   (mousedown)=\"itemMousedown($event)\"\n                   (click)=\"itemClick.emit(item)\"\n                   (cdkDragStarted)=\"onDragStarted($event, element)\"\n                   (cdkDragMoved)=\"onDragMoved($event)\"\n                   (cdkDragEnded)=\"onDragEnded($event)\">\n                <ng-container [ngTemplateOutlet]=\"_itemTplDef().templateRef\"\n                              [ngTemplateOutletContext]=\"{ $implicit: item, column }\"/>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </ngs-panel-content>\n</ngs-panel>\n", styles: [":host{--ngs-kanban-board-col-width: calc(var(--spacing, .25rem) * 72);--ngs-kanban-board-padding-x: calc(var(--spacing, .25rem) * 10);--ngs-kanban-board-column-gap: calc(var(--spacing, .25rem) * 5);height:100%}:host .header{padding:0 var(--ngs-kanban-board-padding-x);overflow:hidden}:host .header-container{gap:var(--ngs-kanban-board-column-gap)}:host .header-column{width:var(--ngs-kanban-board-col-width);flex:none}:host .body{gap:var(--ngs-kanban-board-column-gap);padding:0 var(--ngs-kanban-board-padding-x)}:host .column{padding-bottom:var(--ngs-kanban-board-column-gap);gap:var(--ngs-kanban-board-column-gap)}:host .column-container{width:var(--ngs-kanban-board-col-width);flex:none}:host .cdk-drag-placeholder{opacity:60%}:host.is-dragging-active .scroll-container{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host.is-dragging-active .kanban-item:hover{outline:none}.kanban-item.cdk-drag-preview{background:var(--color-surface-container-lowest);padding:calc(var(--spacing, .25rem) * 3);cursor:pointer;flex:none;box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a;border-radius:1rem}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "directive", type: Ripple, selector: "[ngsRipple]", inputs: ["ngsRippleColor", "ngsRippleUnbounded", "ngsRippleCentered", "ngsRippleRadius", "ngsRippleAnimation", "ngsRippleDisabled", "ngsRippleTrigger"], outputs: ["ngsRippleCenteredChange", "ngsRippleDisabledChange", "ngsRippleTriggerChange"], exportAs: ["ngsRipple"] }, { kind: "component", type: PanelContent, selector: "ngs-panel-content", exportAs: ["ngsPanelContent"] }, { kind: "component", type: Panel, selector: "ngs-panel", inputs: ["absolute"], exportAs: ["ngsPanel"] }, { kind: "component", type: PanelHeader, selector: "ngs-panel-header", inputs: ["autoHeight"], exportAs: ["ngsPanelHeader"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: Menu, selector: "ngs-menu", inputs: ["role", "classList", "xPosition", "yPosition"], outputs: ["closed"], exportAs: ["ngsMenu"] }, { kind: "component", type: MenuItem, selector: "ngs-menu-item, [ngs-menu-item]", inputs: ["disabled", "role", "selected"], outputs: ["_triggered"], exportAs: ["ngsMenuItem"] }, { kind: "directive", type: MenuTrigger, selector: "[ngsMenuTriggerFor]", inputs: ["ngsMenuTriggerFor", "ngsMenuTriggerData", "ngsMenuDisabled", "xPosition", "yPosition", "ngsMenuTriggerRestoreFocus"], outputs: ["menuOpened", "menuClosed"], exportAs: ["ngsMenuTrigger"] }, { kind: "component", type: Button, selector: "    button[ngsButton], button[ngsIconButton],    a[ngsButton], a[ngsIconButton]  ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KanbanBoard, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-kanban-board', exportAs: 'ngsKanbanBoard', imports: [
+                        CdkDrag,
+                        CdkDropList,
+                        CdkDropListGroup,
+                        Icon,
+                        Ripple,
+                        PanelContent,
+                        Panel,
+                        PanelHeader,
+                        NgTemplateOutlet,
+                        FormsModule,
+                        Menu,
+                        MenuItem,
+                        MenuTrigger,
+                        Button
+                    ], host: {
+                        'class': 'ngs-kanban-board',
+                        '[class.is-dragging-active]': 'isDraggingActive'
+                    }, template: "<ngs-panel class=\"h-full\">\n  <ngs-panel-header class=\"header\">\n    <div class=\"flex flex-nowrap h-full items-center header-container\" #headerContainer>\n      @for (column of columns(); track column; let index = $index) {\n        <div class=\"h-full header-column relative flex gap-2 items-center justify-between flex-none\">\n          <div class=\"flex gap-2 items-center uppercase text-sm\">\n            @if (column.color) {\n              <div class=\"size-3 rounded-full\" [style.background-color]=\"column.color\"></div>\n            }\n            {{ column.name }} ({{ column.items.length }})\n          </div>\n          <div class=\"flex gap-0.5 items-center\">\n            <button ngsIconButton (click)=\"itemAdd.emit()\">\n              <ngs-icon name=\"fluent:add-24-regular\"/>\n            </button>\n            <button ngsIconButton [ngsMenuTriggerFor]=\"columnMenu\">\n              <ngs-icon name=\"fluent:more-horizontal-24-regular\"/>\n            </button>\n          </div>\n\n          @if (_hasVerticalScroll()) {\n            <div class=\"h-px bg-surface-container absolute bottom-0 start-0 end-0\"></div>\n          }\n\n          <ngs-menu #columnMenu=\"ngsMenu\">\n            <button ngs-menu-item (click)=\"columnEdit.emit(column)\">\n              <ngs-icon name=\"fluent:share-24-regular\"/>\n              <span>Edit</span>\n            </button>\n            <button ngs-menu-item (click)=\"columnDelete.emit({ column, index })\">\n              <ngs-icon name=\"fluent:delete-24-regular\"/>\n              <span>Delete</span>\n            </button>\n          </ngs-menu>\n        </div>\n      }\n    </div>\n  </ngs-panel-header>\n  <ngs-panel-content class=\"relative overflow-hidden\">\n    <div #scrollContainer\n         class=\"scroll-container h-full absolute overflow-auto inset-0 flex body items-baseline\">\n      <div #scrollContainerContent\n           class=\"flex min-h-full flex-nowrap column\" cdkDropListGroup>\n        @for (column of columns(); track column) {\n          <div class=\"column-container bg-surface-container-low flex-none rounded-2xl p-3 min-h-full flex flex-col gap-3\"\n               cdkDropList\n               [cdkDropListData]=\"column.items\"\n               (cdkDropListDropped)=\"onDropped($event)\">\n            @for (item of column.items; track item) {\n              <div #element\n                   class=\"kanban-item bg-surface-container-lowest flex-none rounded-2xl\n                          p-3 shadow-sm cursor-pointer hover:outline-2 hover:outline-primary\"\n                   cdkDrag [cdkDragData]=\"item\" ngsRipple\n                   (mousedown)=\"itemMousedown($event)\"\n                   (click)=\"itemClick.emit(item)\"\n                   (cdkDragStarted)=\"onDragStarted($event, element)\"\n                   (cdkDragMoved)=\"onDragMoved($event)\"\n                   (cdkDragEnded)=\"onDragEnded($event)\">\n                <ng-container [ngTemplateOutlet]=\"_itemTplDef().templateRef\"\n                              [ngTemplateOutletContext]=\"{ $implicit: item, column }\"/>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </ngs-panel-content>\n</ngs-panel>\n", styles: [":host{--ngs-kanban-board-col-width: calc(var(--spacing, .25rem) * 72);--ngs-kanban-board-padding-x: calc(var(--spacing, .25rem) * 10);--ngs-kanban-board-column-gap: calc(var(--spacing, .25rem) * 5);height:100%}:host .header{padding:0 var(--ngs-kanban-board-padding-x);overflow:hidden}:host .header-container{gap:var(--ngs-kanban-board-column-gap)}:host .header-column{width:var(--ngs-kanban-board-col-width);flex:none}:host .body{gap:var(--ngs-kanban-board-column-gap);padding:0 var(--ngs-kanban-board-padding-x)}:host .column{padding-bottom:var(--ngs-kanban-board-column-gap);gap:var(--ngs-kanban-board-column-gap)}:host .column-container{width:var(--ngs-kanban-board-col-width);flex:none}:host .cdk-drag-placeholder{opacity:60%}:host.is-dragging-active .scroll-container{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host.is-dragging-active .kanban-item:hover{outline:none}.kanban-item.cdk-drag-preview{background:var(--color-surface-container-lowest);padding:calc(var(--spacing, .25rem) * 3);cursor:pointer;flex:none;box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a;border-radius:1rem}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { _itemTplDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KanbanItemDefDirective), { isSignal: true }] }], _headerContainer: [{ type: i0.ViewChild, args: ['headerContainer', { ...{ read: ElementRef }, isSignal: true }] }], _scrollContainer: [{ type: i0.ViewChild, args: ['scrollContainer', { ...{ read: ElementRef }, isSignal: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], columnEdit: [{ type: i0.Output, args: ["columnEdit"] }], columnDelete: [{ type: i0.Output, args: ["columnDelete"] }], itemAdd: [{ type: i0.Output, args: ["itemAdd"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], itemDropped: [{ type: i0.Output, args: ["itemDropped"] }], itemSorted: [{ type: i0.Output, args: ["itemSorted"] }], itemTransferred: [{ type: i0.Output, args: ["itemTransferred"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { KanbanBoard, KanbanItemDefDirective };
+//# sourceMappingURL=ngstarter-ui-components-kanban-board.mjs.map

package/fesm2022/ngstarter-ui-components-kanban-board.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngstarter-ui-components-kanban-board.mjs","sources":["../../../projects/components/kanban-board/src/kanban-item-def.directive.ts","../../../projects/components/kanban-board/src/kanban-board/kanban-board.ts","../../../projects/components/kanban-board/src/kanban-board/kanban-board.html","../../../projects/components/kanban-board/ngstarter-ui-components-kanban-board.ts"],"sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\n\n@Directive({\n  selector: '[ngsKanbanItemDef]'\n})\nexport class KanbanItemDefDirective {\n  readonly templateRef = inject(TemplateRef);\n}\n","import {\n  Component,\n  contentChild, DestroyRef,\n  ElementRef,\n  inject,\n  input, OnInit,\n  output,\n  Renderer2,\n  signal,\n  viewChild\n} from '@angular/core';\nimport {\n  CdkDrag,\n  CdkDragDrop, CdkDragEnd, CdkDragMove, CdkDragStart,\n  CdkDropList,\n  CdkDropListGroup,\n  moveItemInArray,\n  transferArrayItem\n} from '@angular/cdk/drag-drop';\nimport { Icon } from '@ngstarter-ui/components/icon';\nimport { Ripple } from '@ngstarter-ui/components/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { Menu, MenuItem, MenuTrigger } from '@ngstarter-ui/components/menu';\nimport { PanelContent, Panel, PanelHeader } from '@ngstarter-ui/components/panel';\nimport { KanbanColumn, KanbanItem, KanbanItemSortedEvent, KanbanItemTransferredEvent } from '../types';\nimport { KanbanItemDefDirective } from '../kanban-item-def.directive';\nimport { fromEvent } from 'rxjs';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { Button } from '@ngstarter-ui/components/button';\n\n@Component({\n  selector: 'ngs-kanban-board',\n  exportAs: 'ngsKanbanBoard',\n  imports: [\n    CdkDrag,\n    CdkDropList,\n    CdkDropListGroup,\n    Icon,\n\n    Ripple,\n    PanelContent,\n    Panel,\n    PanelHeader,\n    NgTemplateOutlet,\n    FormsModule,\n    Menu,\n    MenuItem,\n    MenuTrigger,\n    Button\n  ],\n  templateUrl: './kanban-board.html',\n  styleUrl: './kanban-board.scss',\n  host: {\n    'class': 'ngs-kanban-board',\n    '[class.is-dragging-active]': 'isDraggingActive'\n  }\n})\nexport class KanbanBoard<T extends KanbanColumn<K>, K extends KanbanItem> implements OnInit {\n  protected _itemTplDef = contentChild.required(KanbanItemDefDirective);\n  private _headerContainer = viewChild.required('headerContainer', { read: ElementRef });\n  private _scrollContainer = viewChild.required('scrollContainer', { read: ElementRef });\n  private _renderer = inject(Renderer2);\n  private _destroyRef = inject(DestroyRef);\n\n  columns = input<T[]>([]);\n  colors = input<string[]>([]);\n\n  protected _hasVerticalScroll = signal(false);\n\n  readonly columnEdit = output<T>();\n  readonly columnDelete = output<{ column: T, index: number }>();\n  readonly itemAdd = output<void>();\n  readonly itemClick = output<K>();\n  readonly itemDropped = output<CdkDragDrop<K[]>>();\n  readonly itemSorted = output<KanbanItemSortedEvent>();\n  readonly itemTransferred = output<KanbanItemTransferredEvent<K>>();\n\n  private _startContainerXOffset = 0;\n  private _itemXOffset = 0;\n  private _itemWidth = 0;\n  protected isDraggingActive = false;\n  private _autoScrollStarted = false;\n\n  ngOnInit() {\n    fromEvent(this._scrollContainer().nativeElement, 'scroll')\n      .pipe(\n        takeUntilDestroyed(this._destroyRef)\n      )\n      .subscribe((event: any) => {\n        this.onScroll(event);\n      });\n  }\n\n  onDropped(event: CdkDragDrop<K[]>) {\n    this.itemDropped.emit(event);\n\n    if (event.previousContainer === event.container) {\n      this.itemSorted.emit({\n        previousIndex: event.previousIndex,\n        currentIndex: event.currentIndex\n      });\n      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);\n    } else {\n      this.itemTransferred.emit({\n        previousContainerData: event.previousContainer.data,\n        currentContainerData: event.container.data,\n        previousIndex: event.previousIndex,\n        currentIndex: event.currentIndex\n      });\n      transferArrayItem(\n        event.previousContainer.data,\n        event.container.data,\n        event.previousIndex,\n        event.currentIndex,\n      );\n    }\n  }\n\n  onScroll(event: Event) {\n    const target = event.target as HTMLElement;\n    const headerContainerElement = this._headerContainer().nativeElement as HTMLElement;\n    this._renderer.setStyle(headerContainerElement, 'transform', `translate(-${target.scrollLeft}px, 0)`);\n    this._hasVerticalScroll.set(target.scrollTop > 0);\n  }\n\n  onDragStarted(event: CdkDragStart, element: HTMLElement) {\n    this.isDraggingActive = true;\n  }\n\n  onDragMoved(event: CdkDragMove<K>) {\n    const space = 100;\n    const scrollContainer = this._scrollContainer().nativeElement as HTMLElement;\n    const scrollContainerWidth = scrollContainer.getBoundingClientRect().width;\n    const itemOffsetXStart = this._startContainerXOffset + event.distance.x;\n    const itemOffsetXEnd = this._startContainerXOffset + event.distance.x + this._itemWidth;\n\n    if (!this._autoScrollStarted) {\n      if (itemOffsetXEnd + space >= scrollContainerWidth) {\n        this._autoScrollStarted = true;\n        scrollContainer.scroll({\n          left: scrollContainer.scrollLeft + this._itemWidth * 2,\n          behavior: 'smooth'\n        });\n        setTimeout(() => {\n          this._autoScrollStarted = false;\n        }, 500);\n      } else if (itemOffsetXStart <= space && scrollContainer.scrollLeft > 0) {\n        this._autoScrollStarted = true;\n        scrollContainer.scroll({\n          left: scrollContainer.scrollLeft - this._itemWidth * 2,\n          behavior: 'smooth'\n        });\n        setTimeout(() => {\n          this._autoScrollStarted = false;\n        }, 500);\n      }\n    }\n  }\n\n  onDragEnded(event: CdkDragEnd) {\n    this.isDraggingActive = false;\n  }\n\n  protected itemMousedown(event: MouseEvent) {\n    const scrollContainerElement = this._scrollContainer().nativeElement as HTMLElement;\n    let targetElement = event.target as Element;\n\n    if (!targetElement.classList.contains('kanban-item')) {\n      targetElement = targetElement.closest('.kanban-item') as HTMLElement;\n    }\n\n    const targetRect = targetElement.getBoundingClientRect();\n    this._startContainerXOffset = targetRect.x - scrollContainerElement.getBoundingClientRect().x;\n    this._itemXOffset = event.clientX - targetRect.x;\n    this._itemWidth = targetRect.width;\n  }\n}\n","<ngs-panel class=\"h-full\">\n  <ngs-panel-header class=\"header\">\n    <div class=\"flex flex-nowrap h-full items-center header-container\" #headerContainer>\n      @for (column of columns(); track column; let index = $index) {\n        <div class=\"h-full header-column relative flex gap-2 items-center justify-between flex-none\">\n          <div class=\"flex gap-2 items-center uppercase text-sm\">\n            @if (column.color) {\n              <div class=\"size-3 rounded-full\" [style.background-color]=\"column.color\"></div>\n            }\n            {{ column.name }} ({{ column.items.length }})\n          </div>\n          <div class=\"flex gap-0.5 items-center\">\n            <button ngsIconButton (click)=\"itemAdd.emit()\">\n              <ngs-icon name=\"fluent:add-24-regular\"/>\n            </button>\n            <button ngsIconButton [ngsMenuTriggerFor]=\"columnMenu\">\n              <ngs-icon name=\"fluent:more-horizontal-24-regular\"/>\n            </button>\n          </div>\n\n          @if (_hasVerticalScroll()) {\n            <div class=\"h-px bg-surface-container absolute bottom-0 start-0 end-0\"></div>\n          }\n\n          <ngs-menu #columnMenu=\"ngsMenu\">\n            <button ngs-menu-item (click)=\"columnEdit.emit(column)\">\n              <ngs-icon name=\"fluent:share-24-regular\"/>\n              <span>Edit</span>\n            </button>\n            <button ngs-menu-item (click)=\"columnDelete.emit({ column, index })\">\n              <ngs-icon name=\"fluent:delete-24-regular\"/>\n              <span>Delete</span>\n            </button>\n          </ngs-menu>\n        </div>\n      }\n    </div>\n  </ngs-panel-header>\n  <ngs-panel-content class=\"relative overflow-hidden\">\n    <div #scrollContainer\n         class=\"scroll-container h-full absolute overflow-auto inset-0 flex body items-baseline\">\n      <div #scrollContainerContent\n           class=\"flex min-h-full flex-nowrap column\" cdkDropListGroup>\n        @for (column of columns(); track column) {\n          <div class=\"column-container bg-surface-container-low flex-none rounded-2xl p-3 min-h-full flex flex-col gap-3\"\n               cdkDropList\n               [cdkDropListData]=\"column.items\"\n               (cdkDropListDropped)=\"onDropped($event)\">\n            @for (item of column.items; track item) {\n              <div #element\n                   class=\"kanban-item bg-surface-container-lowest flex-none rounded-2xl\n                          p-3 shadow-sm cursor-pointer hover:outline-2 hover:outline-primary\"\n                   cdkDrag [cdkDragData]=\"item\" ngsRipple\n                   (mousedown)=\"itemMousedown($event)\"\n                   (click)=\"itemClick.emit(item)\"\n                   (cdkDragStarted)=\"onDragStarted($event, element)\"\n                   (cdkDragMoved)=\"onDragMoved($event)\"\n                   (cdkDragEnded)=\"onDragEnded($event)\">\n                <ng-container [ngTemplateOutlet]=\"_itemTplDef().templateRef\"\n                              [ngTemplateOutletContext]=\"{ $implicit: item, column }\"/>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </ngs-panel-content>\n</ngs-panel>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngstarter-ui-components-kbd.mjs

@@ -0,0 +1,31 @@
+import * as i0 from '@angular/core';
+import { Component } from '@angular/core';
+
+class Kbd {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Kbd, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: Kbd, isStandalone: true, selector: "ngs-kbd", host: { classAttribute: "ngs-kbd" }, exportAs: ["ngsKbd"], ngImport: i0, template: "<div class=\"content\">\n  <ng-content/>\n</div>\n<span class=\"plus\">+</span>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center}:host .content{display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;padding:calc(var(--spacing, .25rem) * 1.5);height:calc(var(--spacing, .25rem) * 6);border-radius:.5rem;background:var(--color-surface-container);min-width:calc(var(--spacing, .25rem) * 6);line-height:0;flex:none;gap:calc(var(--spacing, .25rem) * .5)}:host .plus{display:none;font-size:.75rem}:host-context(.ngs-kdb-group):not(:last-child) .plus{display:inline-flex;margin:0 calc(var(--spacing, .25rem) * 1)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Kbd, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-kbd', exportAs: 'ngsKbd', imports: [], host: {
+                        'class': 'ngs-kbd',
+                    }, template: "<div class=\"content\">\n  <ng-content/>\n</div>\n<span class=\"plus\">+</span>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center}:host .content{display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;padding:calc(var(--spacing, .25rem) * 1.5);height:calc(var(--spacing, .25rem) * 6);border-radius:.5rem;background:var(--color-surface-container);min-width:calc(var(--spacing, .25rem) * 6);line-height:0;flex:none;gap:calc(var(--spacing, .25rem) * .5)}:host .plus{display:none;font-size:.75rem}:host-context(.ngs-kdb-group):not(:last-child) .plus{display:inline-flex;margin:0 calc(var(--spacing, .25rem) * 1)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class KbdGroup {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KbdGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: KbdGroup, isStandalone: true, selector: "ngs-kbd-group", host: { classAttribute: "ngs-kdb-group" }, exportAs: ["ngsKbdGroup"], ngImport: i0, template: "<ng-content select=\"ngs-kbd\"/>\n", styles: [":host{display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KbdGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-kbd-group', exportAs: 'ngsKbdGroup', imports: [], host: {
+                        'class': 'ngs-kdb-group'
+                    }, template: "<ng-content select=\"ngs-kbd\"/>\n", styles: [":host{display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Kbd, KbdGroup };
+//# sourceMappingURL=ngstarter-ui-components-kbd.mjs.map

package/fesm2022/ngstarter-ui-components-kbd.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngstarter-ui-components-kbd.mjs","sources":["../../../projects/components/kbd/src/kbd/kbd.ts","../../../projects/components/kbd/src/kbd/kbd.html","../../../projects/components/kbd/src/kbd-group/kbd-group.ts","../../../projects/components/kbd/src/kbd-group/kbd-group.html","../../../projects/components/kbd/ngstarter-ui-components-kbd.ts"],"sourcesContent":["import { Component, inject } from '@angular/core';\n\n@Component({\n  selector: 'ngs-kbd',\n  exportAs: 'ngsKbd',\n  imports: [],\n  templateUrl: './kbd.html',\n  styleUrl: './kbd.scss',\n  host: {\n    'class': 'ngs-kbd',\n  }\n})\nexport class Kbd {\n}\n","<div class=\"content\">\n  <ng-content/>\n</div>\n<span class=\"plus\">+</span>\n","import { Component } from '@angular/core';\n\n@Component({\n  selector: 'ngs-kbd-group',\n  exportAs: 'ngsKbdGroup',\n  imports: [],\n  templateUrl: './kbd-group.html',\n  styleUrl: './kbd-group.scss',\n  host: {\n    'class': 'ngs-kdb-group'\n  }\n})\nexport class KbdGroup {\n\n}\n","<ng-content select=\"ngs-kbd\"/>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAYa,GAAG,CAAA;uGAAH,GAAG,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAH,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,GAAG,8HCZhB,mFAIA,EAAA,MAAA,EAAA,CAAA,goBAAA,CAAA,EAAA,CAAA;;2FDQa,GAAG,EAAA,UAAA,EAAA,CAAA;kBAVf,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,SAAS,EAAA,QAAA,EACT,QAAQ,EAAA,OAAA,EACT,EAAE,EAAA,IAAA,EAGL;AACJ,wBAAA,OAAO,EAAE,SAAS;AACnB,qBAAA,EAAA,QAAA,EAAA,mFAAA,EAAA,MAAA,EAAA,CAAA,goBAAA,CAAA,EAAA;;;MEEU,QAAQ,CAAA;uGAAR,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAR,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,QAAQ,+ICZrB,oCACA,EAAA,MAAA,EAAA,CAAA,8JAAA,CAAA,EAAA,CAAA;;2FDWa,QAAQ,EAAA,UAAA,EAAA,CAAA;kBAVpB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,eAAe,EAAA,QAAA,EACf,aAAa,EAAA,OAAA,EACd,EAAE,EAAA,IAAA,EAGL;AACJ,wBAAA,OAAO,EAAE;AACV,qBAAA,EAAA,QAAA,EAAA,oCAAA,EAAA,MAAA,EAAA,CAAA,8JAAA,CAAA,EAAA;;;AEVH;;AAEG;;;;"}