@ngstarter-ui/components 1.0.21

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

@@ -0,0 +1,200 @@
+import * as i0 from '@angular/core';
+import { inject, ViewContainerRef, Directive, viewChild, ChangeDetectionStrategy, Component, input, numberAttribute, booleanAttribute, HostAttributeToken, effect } from '@angular/core';
+import { CDK_TREE_NODE_OUTLET_NODE, CdkTreeNodeOutlet, CdkTree, CdkTreeNode, CdkNestedTreeNode, CdkTreeNodePadding, CdkTreeNodeToggle, CdkTreeNodeDef } from '@angular/cdk/tree';
+
+class TreeNodeOutlet {
+    viewContainer = inject(ViewContainerRef);
+    _node = inject(CDK_TREE_NODE_OUTLET_NODE, { optional: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TreeNodeOutlet, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: TreeNodeOutlet, isStandalone: true, selector: "[ngsTreeNodeOutlet]", providers: [
+            {
+                provide: CdkTreeNodeOutlet,
+                useExisting: TreeNodeOutlet,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TreeNodeOutlet, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsTreeNodeOutlet]',
+                    providers: [
+                        {
+                            provide: CdkTreeNodeOutlet,
+                            useExisting: TreeNodeOutlet,
+                        },
+                    ],
+                    standalone: true
+                }]
+        }] });
+class Tree extends CdkTree {
+    // Outlets within the tree's template where the dataNodes will be inserted.
+    // We need an initializer here to avoid a TS error. The value will be set in `ngAfterViewInit`.
+    _nodeOutlet = viewChild(TreeNodeOutlet);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Tree, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: Tree, isStandalone: true, selector: "ngs-tree", host: { classAttribute: "ngs-tree" }, providers: [{ provide: CdkTree, useExisting: Tree }], viewQueries: [{ propertyName: "_nodeOutlet", first: true, predicate: TreeNodeOutlet, descendants: true, isSignal: true }], exportAs: ["ngsTree"], usesInheritance: true, ngImport: i0, template: `<ng-container ngsTreeNodeOutlet />`, isInline: true, styles: [":host{display:block;background:var(--ngs-tree-container-background-color, transparent)}:host ::ng-deep .ngs-tree-node,:host ::ng-deep .ngs-nested-tree-node{color:var(--ngs-tree-node-text-color, inherit);font-family:var(--ngs-tree-node-text-font, inherit);font-size:var(--ngs-tree-node-text-size, inherit);font-weight:var(--ngs-tree-node-text-weight, inherit)}:host ::ng-deep .ngs-tree-node{display:flex;align-items:center;flex:1;word-wrap:break-word;min-height:var(--ngs-tree-node-min-height, 48px);box-sizing:border-box}:host ::ng-deep .ngs-nested-tree-node{border-bottom-width:0}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: TreeNodeOutlet, selector: "[ngsTreeNodeOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Tree, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-tree', exportAs: 'ngsTree', template: `<ng-container ngsTreeNodeOutlet />`, host: {
+                        'class': 'ngs-tree',
+                    }, changeDetection: ChangeDetectionStrategy.Default, providers: [{ provide: CdkTree, useExisting: Tree }], imports: [TreeNodeOutlet], standalone: true, styles: [":host{display:block;background:var(--ngs-tree-container-background-color, transparent)}:host ::ng-deep .ngs-tree-node,:host ::ng-deep .ngs-nested-tree-node{color:var(--ngs-tree-node-text-color, inherit);font-family:var(--ngs-tree-node-text-font, inherit);font-size:var(--ngs-tree-node-text-size, inherit);font-weight:var(--ngs-tree-node-text-weight, inherit)}:host ::ng-deep .ngs-tree-node{display:flex;align-items:center;flex:1;word-wrap:break-word;min-height:var(--ngs-tree-node-min-height, 48px);box-sizing:border-box}:host ::ng-deep .ngs-nested-tree-node{border-bottom-width:0}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { _nodeOutlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TreeNodeOutlet), { isSignal: true }] }] } });
+
+function isNoopTreeKeyManager(keyManager) {
+    return !!keyManager._isNoopTreeKeyManager;
+}
+class TreeNode extends CdkTreeNode {
+    tabIndexInputBinding = input(0, { ...(ngDevMode ? { debugName: "tabIndexInputBinding" } : /* istanbul ignore next */ {}), transform: (value) => (value == null ? 0 : numberAttribute(value)),
+        alias: 'tabIndex' });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    defaultTabIndex = 0;
+    constructor() {
+        super();
+        const tabIndex = inject(new HostAttributeToken('tabindex'), { optional: true });
+        this._tabIndexInputBinding = Number(tabIndex) || this.defaultTabIndex;
+        effect(() => {
+            this.isDisabled = this.disabled();
+        });
+    }
+    _getTabindexAttribute() {
+        if (isNoopTreeKeyManager(this._tree._keyManager)) {
+            return this.tabIndexInputBinding();
+        }
+        return this._tabindex;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TreeNode, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: TreeNode, isStandalone: true, selector: "ngs-tree-node", inputs: { tabIndexInputBinding: { classPropertyName: "tabIndexInputBinding", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activation: "activation", expandedChange: "expandedChange" }, host: { listeners: { "click": "_focusItem()" }, properties: { "attr.aria-expanded": "_getAriaExpanded()", "attr.aria-level": "level + 1", "attr.aria-posinset": "_getPositionInSet()", "attr.aria-setsize": "_getSetSize()", "tabindex": "_getTabindexAttribute()" }, classAttribute: "ngs-tree-node" }, providers: [{ provide: CdkTreeNode, useExisting: TreeNode }], exportAs: ["ngsTreeNode"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TreeNode, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ngs-tree-node',
+                    exportAs: 'ngsTreeNode',
+                    outputs: ['activation', 'expandedChange'],
+                    providers: [{ provide: CdkTreeNode, useExisting: TreeNode }],
+                    host: {
+                        'class': 'ngs-tree-node',
+                        '[attr.aria-expanded]': '_getAriaExpanded()',
+                        '[attr.aria-level]': 'level + 1',
+                        '[attr.aria-posinset]': '_getPositionInSet()',
+                        '[attr.aria-setsize]': '_getSetSize()',
+                        '(click)': '_focusItem()',
+                        '[tabindex]': '_getTabindexAttribute()',
+                    },
+                    standalone: true
+                }]
+        }], ctorParameters: () => [], propDecorators: { tabIndexInputBinding: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+class NestedTreeNode extends CdkNestedTreeNode {
+    node = input(undefined, { ...(ngDevMode ? { debugName: "node" } : /* istanbul ignore next */ {}), alias: 'ngsNestedTreeNode' });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    tabIndexInput = input(0, { ...(ngDevMode ? { debugName: "tabIndexInput" } : /* istanbul ignore next */ {}), alias: 'tabIndex',
+        transform: (value) => (value == null ? 0 : numberAttribute(value)) });
+    constructor() {
+        super();
+        effect(() => {
+            this.isDisabled = this.disabled();
+        });
+    }
+    get tabIndex() {
+        return this.isDisabled ? -1 : this.tabIndexInput();
+    }
+    ngOnInit() {
+        super.ngOnInit();
+    }
+    ngAfterContentInit() {
+        super.ngAfterContentInit();
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NestedTreeNode, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: NestedTreeNode, isStandalone: true, selector: "ngs-nested-tree-node", inputs: { node: { classPropertyName: "node", publicName: "ngsNestedTreeNode", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tabIndexInput: { classPropertyName: "tabIndexInput", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activation: "activation", expandedChange: "expandedChange" }, host: { classAttribute: "ngs-nested-tree-node" }, providers: [
+            { provide: CdkNestedTreeNode, useExisting: NestedTreeNode },
+            { provide: CdkTreeNode, useExisting: NestedTreeNode },
+            { provide: CDK_TREE_NODE_OUTLET_NODE, useExisting: NestedTreeNode },
+        ], exportAs: ["ngsNestedTreeNode"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NestedTreeNode, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ngs-nested-tree-node',
+                    exportAs: 'ngsNestedTreeNode',
+                    outputs: ['activation', 'expandedChange'],
+                    providers: [
+                        { provide: CdkNestedTreeNode, useExisting: NestedTreeNode },
+                        { provide: CdkTreeNode, useExisting: NestedTreeNode },
+                        { provide: CDK_TREE_NODE_OUTLET_NODE, useExisting: NestedTreeNode },
+                    ],
+                    host: {
+                        'class': 'ngs-nested-tree-node',
+                    },
+                    standalone: true
+                }]
+        }], ctorParameters: () => [], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsNestedTreeNode", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tabIndexInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }] } });
+
+class TreeNodePadding extends CdkTreeNodePadding {
+    levelInput = input(0, { ...(ngDevMode ? { debugName: "levelInput" } : /* istanbul ignore next */ {}), alias: 'ngsTreeNodePadding',
+        transform: numberAttribute });
+    indentInput = input(40, { ...(ngDevMode ? { debugName: "indentInput" } : /* istanbul ignore next */ {}), alias: 'ngsTreeNodePaddingIndent' });
+    constructor() {
+        super();
+        effect(() => {
+            this.level = this.levelInput();
+        });
+        effect(() => {
+            this._setIndentInput(this.indentInput());
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TreeNodePadding, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: TreeNodePadding, isStandalone: true, selector: "[ngsTreeNodePadding]", inputs: { levelInput: { classPropertyName: "levelInput", publicName: "ngsTreeNodePadding", isSignal: true, isRequired: false, transformFunction: null }, indentInput: { classPropertyName: "indentInput", publicName: "ngsTreeNodePaddingIndent", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: CdkTreeNodePadding, useExisting: TreeNodePadding }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TreeNodePadding, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsTreeNodePadding]',
+                    providers: [{ provide: CdkTreeNodePadding, useExisting: TreeNodePadding }],
+                    standalone: true
+                }]
+        }], ctorParameters: () => [], propDecorators: { levelInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsTreeNodePadding", required: false }] }], indentInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsTreeNodePaddingIndent", required: false }] }] } });
+
+class TreeNodeToggle extends CdkTreeNodeToggle {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TreeNodeToggle, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: TreeNodeToggle, isStandalone: true, selector: "[ngsTreeNodeToggle]", inputs: { recursive: ["ngsTreeNodeToggleRecursive", "recursive"] }, providers: [{ provide: CdkTreeNodeToggle, useExisting: TreeNodeToggle }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TreeNodeToggle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsTreeNodeToggle]',
+                    providers: [{ provide: CdkTreeNodeToggle, useExisting: TreeNodeToggle }],
+                    inputs: [{ name: 'recursive', alias: 'ngsTreeNodeToggleRecursive' }],
+                    standalone: true
+                }]
+        }] });
+
+class TreeNodeDef extends CdkTreeNodeDef {
+    data = input(undefined, { ...(ngDevMode ? { debugName: "data" } : /* istanbul ignore next */ {}), alias: 'ngsTreeNode' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TreeNodeDef, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: TreeNodeDef, isStandalone: true, selector: "[ngsTreeNodeDef]", inputs: { when: { classPropertyName: "when", publicName: "ngsTreeNodeDefWhen", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "ngsTreeNode", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: CdkTreeNodeDef, useExisting: TreeNodeDef }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TreeNodeDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsTreeNodeDef]',
+                    inputs: [{ name: 'when', alias: 'ngsTreeNodeDefWhen' }],
+                    providers: [{ provide: CdkTreeNodeDef, useExisting: TreeNodeDef }],
+                    standalone: true
+                }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsTreeNode", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NestedTreeNode, Tree, TreeNode, TreeNodeDef, TreeNodeOutlet, TreeNodePadding, TreeNodeToggle };
+//# sourceMappingURL=ngstarter-ui-components-tree.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngstarter-ui-components-tree.mjs","sources":["../../../projects/components/tree/src/tree/tree.ts","../../../projects/components/tree/src/tree-node/tree-node.ts","../../../projects/components/tree/src/tree-node-padding.ts","../../../projects/components/tree/src/tree-node-toggle.ts","../../../projects/components/tree/src/tree-node-def.ts","../../../projects/components/tree/ngstarter-ui-components-tree.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  Directive,\n  inject,\n  OnDestroy,\n  OnInit,\n  ViewContainerRef,\n  ViewEncapsulation,\n  viewChild\n} from '@angular/core';\nimport { CDK_TREE_NODE_OUTLET_NODE, CdkTree, CdkTreeNodeOutlet } from '@angular/cdk/tree';\n\n@Directive({\n  selector: '[ngsTreeNodeOutlet]',\n  providers: [\n    {\n      provide: CdkTreeNodeOutlet,\n      useExisting: TreeNodeOutlet,\n    },\n  ],\n  standalone: true\n})\nexport class TreeNodeOutlet implements CdkTreeNodeOutlet {\n  viewContainer = inject(ViewContainerRef);\n  _node = inject(CDK_TREE_NODE_OUTLET_NODE, { optional: true });\n}\n\n@Component({\n  selector: 'ngs-tree',\n  exportAs: 'ngsTree',\n  template: `<ng-container ngsTreeNodeOutlet />`,\n  host: {\n    'class': 'ngs-tree',\n  },\n  changeDetection: ChangeDetectionStrategy.Default,\n  providers: [{ provide: CdkTree, useExisting: Tree }],\n  imports: [TreeNodeOutlet],\n  styleUrl: './tree.scss',\n  standalone: true\n})\nexport class Tree<T, K = T> extends CdkTree<T, K> {\n  // Outlets within the tree's template where the dataNodes will be inserted.\n  // We need an initializer here to avoid a TS error. The value will be set in `ngAfterViewInit`.\n  override readonly _nodeOutlet = viewChild(TreeNodeOutlet) as any;\n}\n","import {\n  CDK_TREE_NODE_OUTLET_NODE, CdkNestedTreeNode,\n  CdkTreeNode,\n} from '@angular/cdk/tree';\nimport {\n  booleanAttribute,\n  Directive,\n  HostAttributeToken,\n  inject,\n  input,\n  numberAttribute,\n  OnDestroy,\n  OnInit,\n  effect\n} from '@angular/core';\n\nfunction isNoopTreeKeyManager(keyManager: any) {\n  return !!keyManager._isNoopTreeKeyManager;\n}\n\n@Directive({\n  selector: 'ngs-tree-node',\n  exportAs: 'ngsTreeNode',\n  outputs: ['activation', 'expandedChange'],\n  providers: [{ provide: CdkTreeNode, useExisting: TreeNode }],\n  host: {\n    'class': 'ngs-tree-node',\n    '[attr.aria-expanded]': '_getAriaExpanded()',\n    '[attr.aria-level]': 'level + 1',\n    '[attr.aria-posinset]': '_getPositionInSet()',\n    '[attr.aria-setsize]': '_getSetSize()',\n    '(click)': '_focusItem()',\n    '[tabindex]': '_getTabindexAttribute()',\n  },\n  standalone: true\n})\nexport class TreeNode<T, K = T> extends CdkTreeNode<T, K> implements OnInit, OnDestroy {\n  tabIndexInputBinding = input<number, any>(0, {\n    transform: (value: unknown) => (value == null ? 0 : numberAttribute(value)),\n    alias: 'tabIndex',\n  });\n\n  disabled = input(false, {\n    transform: booleanAttribute\n  });\n\n  defaultTabIndex = 0;\n\n  constructor() {\n    super();\n    const tabIndex = inject(new HostAttributeToken('tabindex'), { optional: true });\n    (this as any)._tabIndexInputBinding = Number(tabIndex) || this.defaultTabIndex;\n    effect(() => {\n      this.isDisabled = this.disabled();\n    });\n  }\n\n  _getTabindexAttribute() {\n    if (isNoopTreeKeyManager((this._tree as any)._keyManager)) {\n      return this.tabIndexInputBinding();\n    }\n    return (this as any)._tabindex;\n  }\n\n  override ngOnInit() {\n    super.ngOnInit();\n  }\n\n  override ngOnDestroy() {\n    super.ngOnDestroy();\n  }\n}\n\n@Directive({\n  selector: 'ngs-nested-tree-node',\n  exportAs: 'ngsNestedTreeNode',\n  outputs: ['activation', 'expandedChange'],\n  providers: [\n    { provide: CdkNestedTreeNode, useExisting: NestedTreeNode },\n    { provide: CdkTreeNode, useExisting: NestedTreeNode },\n    { provide: CDK_TREE_NODE_OUTLET_NODE, useExisting: NestedTreeNode },\n  ],\n  host: {\n    'class': 'ngs-nested-tree-node',\n  },\n  standalone: true\n})\nexport class NestedTreeNode<T, K = T> extends CdkNestedTreeNode<T, K> implements OnInit, OnDestroy {\n  node = input<T>(undefined!, {\n    alias: 'ngsNestedTreeNode'\n  });\n\n  disabled = input(false, {\n    transform: booleanAttribute\n  });\n\n  tabIndexInput = input<number, any>(0, {\n    alias: 'tabIndex',\n    transform: (value: any) => (value == null ? 0 : numberAttribute(value))\n  });\n\n  constructor() {\n    super();\n    effect(() => {\n      this.isDisabled = this.disabled();\n    });\n  }\n\n  get tabIndex(): number {\n    return this.isDisabled ? -1 : this.tabIndexInput();\n  }\n\n  override ngOnInit() {\n    super.ngOnInit();\n  }\n\n  override ngAfterContentInit() {\n    super.ngAfterContentInit();\n  }\n\n  override ngOnDestroy() {\n    super.ngOnDestroy();\n  }\n}\n","import { CdkTreeNodePadding } from '@angular/cdk/tree';\nimport { Directive, effect, input, numberAttribute } from '@angular/core';\n\n@Directive({\n  selector: '[ngsTreeNodePadding]',\n  providers: [{ provide: CdkTreeNodePadding, useExisting: TreeNodePadding }],\n  standalone: true\n})\nexport class TreeNodePadding<T, K = T> extends CdkTreeNodePadding<T, K> {\n  levelInput = input<number, any>(0, {\n    alias: 'ngsTreeNodePadding',\n    transform: numberAttribute\n  });\n\n  indentInput = input<number | string>(40, {\n    alias: 'ngsTreeNodePaddingIndent'\n  });\n\n  constructor() {\n    super();\n    effect(() => {\n      this.level = this.levelInput();\n    });\n    effect(() => {\n      this._setIndentInput(this.indentInput());\n    });\n  }\n}\n","import { CdkTreeNodeToggle } from '@angular/cdk/tree';\nimport { Directive, Input } from '@angular/core';\n\n@Directive({\n  selector: '[ngsTreeNodeToggle]',\n  providers: [{ provide: CdkTreeNodeToggle, useExisting: TreeNodeToggle }],\n  inputs: [{ name: 'recursive', alias: 'ngsTreeNodeToggleRecursive' }],\n  standalone: true\n})\nexport class TreeNodeToggle<T, K = T> extends CdkTreeNodeToggle<T, K> {\n}\n","import { CdkTreeNodeDef } from '@angular/cdk/tree';\nimport { Directive, input } from '@angular/core';\n\n@Directive({\n  selector: '[ngsTreeNodeDef]',\n  inputs: [{ name: 'when', alias: 'ngsTreeNodeDefWhen' }],\n  providers: [{ provide: CdkTreeNodeDef, useExisting: TreeNodeDef }],\n  standalone: true\n})\nexport class TreeNodeDef<T> extends CdkTreeNodeDef<T> {\n  data = input<T>(undefined!, {\n    alias: 'ngsTreeNode'\n  });\n}\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-upload.mjs

@@ -0,0 +1,330 @@
+import * as i0 from '@angular/core';
+import { inject, Renderer2, input, booleanAttribute, output, signal, Component, numberAttribute, ChangeDetectionStrategy, ElementRef, DestroyRef, Directive, TemplateRef } from '@angular/core';
+import { GaugeValue, Gauge } from '@ngstarter-ui/components/gauge';
+import { fromEvent } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+class UploadArea {
+    _renderer = inject(Renderer2);
+    accept = input(...(ngDevMode ? [undefined, { debugName: "accept" }] : /* istanbul ignore next */ []));
+    allowHover = input(true, { ...(ngDevMode ? { debugName: "allowHover" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    fileSelected = output();
+    isDropActive = signal(false, ...(ngDevMode ? [{ debugName: "isDropActive" }] : /* istanbul ignore next */ []));
+    isDropInvalid = signal(false, ...(ngDevMode ? [{ debugName: "isDropInvalid" }] : /* istanbul ignore next */ []));
+    get api() {
+        return {
+            isDropActive: this.isDropActive()
+        };
+    }
+    handleDragOver(event) {
+        event.preventDefault();
+    }
+    handleDragEnter(event) {
+        if (event.dataTransfer) {
+            const items = event.dataTransfer.items;
+            let allFilesAreValid = true;
+            if (this.accept()) {
+                const accept = this.accept().split(',');
+                if (items && items.length > 0) {
+                    const draggedItems = Array.from(items);
+                    allFilesAreValid = draggedItems.every((item) => item.kind === 'file' && this.isMimeTypeAllowed(item.type, accept));
+                }
+            }
+            this.isDropActive.set(allFilesAreValid);
+            this.isDropInvalid.set(!allFilesAreValid);
+        }
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    handleDragLeave(event) {
+        const relatedTarget = event.relatedTarget;
+        if (!relatedTarget.closest('.ngs-upload-area')) {
+            this.isDropActive.set(false);
+            this.isDropInvalid.set(false);
+        }
+        event.preventDefault();
+    }
+    handleDragEnd(event) {
+        this.isDropActive.set(false);
+        this.isDropInvalid.set(false);
+        event.preventDefault();
+    }
+    handleDrop(event) {
+        event.preventDefault();
+        this.isDropActive.set(false);
+        this.isDropInvalid.set(false);
+        if (event.dataTransfer) {
+            const accept = this.accept().split(',');
+            const files = Array.from(event.dataTransfer?.files).filter(file => this.isMimeTypeAllowed(file.type, accept));
+            if (files.length === 0) {
+                return;
+            }
+            this.fileSelected.emit({
+                multiple: this.multiple(),
+                fileList: event.dataTransfer.files,
+                event,
+                files
+            });
+        }
+    }
+    isMimeTypeAllowed(fileMimeType, allowedMimeTypes) {
+        return allowedMimeTypes.some(allowedType => {
+            if (allowedType === '*/*' || allowedType === '*') {
+                return true;
+            }
+            if (allowedType.endsWith('/*')) {
+                const baseType = allowedType.slice(0, -2);
+                return fileMimeType.startsWith(`${baseType}/`);
+            }
+            return fileMimeType === allowedType;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UploadArea, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: UploadArea, isStandalone: true, selector: "ngs-upload-area", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, allowHover: { classPropertyName: "allowHover", publicName: "allowHover", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileSelected: "fileSelected" }, host: { listeners: { "dragover": "handleDragOver($event)", "dragenter": "handleDragEnter($event)", "dragleave": "handleDragLeave($event)", "dragend": "handleDragEnd($event)", "drop": "handleDrop($event)" }, properties: { "class.is-drop-active": "isDropActive()", "class.is-drop-invalid": "isDropInvalid()", "class.is-allow-hover": "allowHover()" }, classAttribute: "ngs-upload-area" }, exportAs: ["ngsUploadArea"], ngImport: i0, template: "<div class=\"icon\">\n  <ng-content select=\"[ngsUploadAreaIcon]\"/>\n</div>\n<div class=\"content\">\n  <ng-content/>\n  <div class=\"state\" [class.is-active]=\"!isDropActive() && !isDropInvalid()\">\n    <ng-content select=\"[ngsUploadAreaMainState]\"/>\n  </div>\n  <div class=\"state\" [class.is-active]=\"isDropActive() && !isDropInvalid()\">\n    <ng-content select=\"[ngsUploadAreaDropState]\"/>\n  </div>\n  <div class=\"state\" [class.is-active]=\"isDropInvalid()\">\n    <ng-content select=\"[ngsUploadAreaInvalidState]\"/>\n  </div>\n</div>\n", styles: [":host{--ngs-upload-area-bg: transparent;--ngs-upload-area-padding: calc(var(--spacing, .25rem) * 10);--ngs-upload-area-border: 1px solid var(--color-subtle);--ngs-upload-area-border-radius: 1rem;--ngs-upload-area-font-size: .875rem;--ngs-upload-area-color: var(--color-neutral-600);--ngs-upload-area-drop-active-border: 1px dashed var(--color-primary);--ngs-upload-area-drop-active-color: var(--color-primary);--ngs-upload-area-drop-active-bg: var(--color-surface-container);--ngs-upload-area-drop-invalid-border: 1px dashed var(--color-error);--ngs-upload-area-drop-invalid-color: var(--color-error);--ngs-upload-area-drop-invalid-bg: var(--color-error-container-low);display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;color:var(--ngs-upload-area-color);border-radius:var(--ngs-upload-area-border-radius);border:var(--ngs-upload-area-border);font-size:var(--ngs-upload-area-font-size);background:var(--ngs-upload-area-bg);padding:var(--ngs-upload-area-padding)}:host.is-allow-hover:hover{cursor:pointer;border:var(--ngs-upload-area-drop-active-border);color:var(--ngs-upload-area-drop-active-color);background:var(--ngs-upload-area-drop-active-bg)}:host.is-drop-active{border:var(--ngs-upload-area-drop-active-border);color:var(--ngs-upload-area-drop-active-color);background:var(--ngs-upload-area-drop-active-bg)}:host.is-drop-invalid{border:var(--ngs-upload-area-drop-invalid-border);color:var(--ngs-upload-area-drop-invalid-color);background:var(--ngs-upload-area-drop-invalid-bg)}:host .state{display:none}:host .state.is-active{display:block}:host .icon{margin-bottom:calc(var(--spacing, .25rem) * 2)}:host .icon:empty{display: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: UploadArea, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-upload-area', exportAs: 'ngsUploadArea', imports: [], host: {
+                        'class': 'ngs-upload-area',
+                        '[class.is-drop-active]': 'isDropActive()',
+                        '[class.is-drop-invalid]': 'isDropInvalid()',
+                        '[class.is-allow-hover]': 'allowHover()',
+                        '(dragover)': 'handleDragOver($event)',
+                        '(dragenter)': 'handleDragEnter($event)',
+                        '(dragleave)': 'handleDragLeave($event)',
+                        '(dragend)': 'handleDragEnd($event)',
+                        '(drop)': 'handleDrop($event)',
+                    }, template: "<div class=\"icon\">\n  <ng-content select=\"[ngsUploadAreaIcon]\"/>\n</div>\n<div class=\"content\">\n  <ng-content/>\n  <div class=\"state\" [class.is-active]=\"!isDropActive() && !isDropInvalid()\">\n    <ng-content select=\"[ngsUploadAreaMainState]\"/>\n  </div>\n  <div class=\"state\" [class.is-active]=\"isDropActive() && !isDropInvalid()\">\n    <ng-content select=\"[ngsUploadAreaDropState]\"/>\n  </div>\n  <div class=\"state\" [class.is-active]=\"isDropInvalid()\">\n    <ng-content select=\"[ngsUploadAreaInvalidState]\"/>\n  </div>\n</div>\n", styles: [":host{--ngs-upload-area-bg: transparent;--ngs-upload-area-padding: calc(var(--spacing, .25rem) * 10);--ngs-upload-area-border: 1px solid var(--color-subtle);--ngs-upload-area-border-radius: 1rem;--ngs-upload-area-font-size: .875rem;--ngs-upload-area-color: var(--color-neutral-600);--ngs-upload-area-drop-active-border: 1px dashed var(--color-primary);--ngs-upload-area-drop-active-color: var(--color-primary);--ngs-upload-area-drop-active-bg: var(--color-surface-container);--ngs-upload-area-drop-invalid-border: 1px dashed var(--color-error);--ngs-upload-area-drop-invalid-color: var(--color-error);--ngs-upload-area-drop-invalid-bg: var(--color-error-container-low);display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;color:var(--ngs-upload-area-color);border-radius:var(--ngs-upload-area-border-radius);border:var(--ngs-upload-area-border);font-size:var(--ngs-upload-area-font-size);background:var(--ngs-upload-area-bg);padding:var(--ngs-upload-area-padding)}:host.is-allow-hover:hover{cursor:pointer;border:var(--ngs-upload-area-drop-active-border);color:var(--ngs-upload-area-drop-active-color);background:var(--ngs-upload-area-drop-active-bg)}:host.is-drop-active{border:var(--ngs-upload-area-drop-active-border);color:var(--ngs-upload-area-drop-active-color);background:var(--ngs-upload-area-drop-active-bg)}:host.is-drop-invalid{border:var(--ngs-upload-area-drop-invalid-border);color:var(--ngs-upload-area-drop-invalid-color);background:var(--ngs-upload-area-drop-invalid-bg)}:host .state{display:none}:host .state.is-active{display:block}:host .icon{margin-bottom:calc(var(--spacing, .25rem) * 2)}:host .icon:empty{display:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], allowHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowHover", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], fileSelected: [{ type: i0.Output, args: ["fileSelected"] }] } });
+
+class FileList {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FileList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: FileList, isStandalone: true, selector: "ngs-file-list", host: { classAttribute: "ngs-file-list not-prose" }, exportAs: ["ngsFileList"], ngImport: i0, template: "<ng-content/>\n", styles: [":host{--ngs-file-list-gap: calc(var(--spacing, .25rem) * 3);display:flex;flex-direction:column;gap:var(--ngs-file-list-gap)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FileList, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-file-list', exportAs: 'ngsFileList', host: {
+                        'class': 'ngs-file-list not-prose'
+                    }, template: "<ng-content/>\n", styles: [":host{--ngs-file-list-gap: calc(var(--spacing, .25rem) * 3);display:flex;flex-direction:column;gap:var(--ngs-file-list-gap)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class File {
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
+    progress = input(0, { ...(ngDevMode ? { debugName: "progress" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    progressingMessage = input(...(ngDevMode ? [undefined, { debugName: "progressingMessage" }] : /* istanbul ignore next */ []));
+    errorMessage = input(...(ngDevMode ? [undefined, { debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    remainingTime = input(...(ngDevMode ? [undefined, { debugName: "remainingTime" }] : /* istanbul ignore next */ []));
+    state = input('uploading', ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: File, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: File, isStandalone: true, selector: "ngs-file", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, progressingMessage: { classPropertyName: "progressingMessage", publicName: "progressingMessage", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, remainingTime: { classPropertyName: "remainingTime", publicName: "remainingTime", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.has-error": "state() === 'error'" }, classAttribute: "ngs-file not-prose" }, exportAs: ["ngsFile"], ngImport: i0, template: "<div class=\"content\">\n  <div class=\"flex items-center min-w-0\">\n    <div class=\"overflow-hidden overflow-ellipsis whitespace-nowrap grow name\">{{ name() }}</div>\n    <div class=\"controls\">\n      <ng-content select=\"ngs-file-control,[ngs-file-control]\"/>\n    </div>\n  </div>\n  @if (size() || (state() === 'uploading' && progress())) {\n    <div class=\"info\">\n      @if (size()) {\n        <span class=\"uppercase\">{{ size() }}</span>\n      }\n      @if (size() && progress()) {\n        ,\n      }\n      @if (progress()) {\n        {{ progress() }}%\n      }\n      @if (remainingTime()) {\n        {{ remainingTime() }}\n      }\n    </div>\n  }\n  @if (progress()) {\n    <div class=\"progress\">\n      <div class=\"progress-bar\" [style.width.%]=\"progress()\"></div>\n    </div>\n  }\n  @if (state() === 'error' && errorMessage()) {\n    <div class=\"error\">\n      {{ errorMessage() }}\n    </div>\n  }\n</div>\n", styles: [":host{--ngs-file-padding: calc(var(--spacing, .25rem) * 4);--ngs-file-border-radius: 1rem;--ngs-file-bg: var(--color-surface-container);--ngs-file-error-bg: var(--color-error-container-low);--ngs-file-controls-gap: calc(var(--spacing, .25rem) * 1.5);--ngs-file-progress-margin: calc(var(--spacing, .25rem) * 2) 0 0 0;--ngs-file-progress-bg: var(--color-surface-container-highest);--ngs-file-progress-height: calc(var(--spacing, .25rem) * 1);--ngs-file-progress-border-radius: .5rem;--ngs-file-progress-bar-bg: var(--color-primary);--ngs-file-control-color: var(--color-neutral-500);--ngs-file-control-hover-color: var(--color-primary);--ngs-file-control-font-size: 1.25rem;--ngs-file-name-font-size: .875rem;--ngs-file-info-font-size: .75rem;--ngs-file-info-color: var(--color-neutral-600);--ngs-file-error-font-size: .75rem;--ngs-file-error-color: var(--color-error);display:flex;align-items:center;width:100%;overflow:hidden;text-overflow:ellipsis;padding:var(--ngs-file-padding);border-radius:var(--ngs-file-border-radius);background:var(--ngs-file-bg)}:host .name{font-size:var(--ngs-file-name-font-size)}:host .info{font-size:var(--ngs-file-info-font-size);color:var(--ngs-file-info-color)}:host .content{min-width:0;flex-grow:1}:host .controls{display:flex;align-items:center;gap:var(--ngs-file-controls-gap)}:host .progress{background:var(--ngs-file-progress-bg);height:var(--ngs-file-progress-height);flex:none;border-radius:var(--ngs-file-progress-border-radius);margin:var(--ngs-file-progress-margin)}:host .progress-bar{background:var(--ngs-file-progress-bar-bg);border-radius:var(--ngs-file-progress-border-radius);height:100%}:host .error{font-size:var(--ngs-file-error-font-size);color:var(--ngs-file-error-color)}:host.has-error{background:var(--ngs-file-error-bg)}:host-context(html.dark){--ngs-file-error-color: var(--color-error-container-high);--ngs-file-progress-bg: var(--color-neutral-500);--ngs-file-control-hover-color: var(--color-neutral-300)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: File, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-file', exportAs: 'ngsFile', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'ngs-file not-prose',
+                        '[class.has-error]': "state() === 'error'"
+                    }, template: "<div class=\"content\">\n  <div class=\"flex items-center min-w-0\">\n    <div class=\"overflow-hidden overflow-ellipsis whitespace-nowrap grow name\">{{ name() }}</div>\n    <div class=\"controls\">\n      <ng-content select=\"ngs-file-control,[ngs-file-control]\"/>\n    </div>\n  </div>\n  @if (size() || (state() === 'uploading' && progress())) {\n    <div class=\"info\">\n      @if (size()) {\n        <span class=\"uppercase\">{{ size() }}</span>\n      }\n      @if (size() && progress()) {\n        ,\n      }\n      @if (progress()) {\n        {{ progress() }}%\n      }\n      @if (remainingTime()) {\n        {{ remainingTime() }}\n      }\n    </div>\n  }\n  @if (progress()) {\n    <div class=\"progress\">\n      <div class=\"progress-bar\" [style.width.%]=\"progress()\"></div>\n    </div>\n  }\n  @if (state() === 'error' && errorMessage()) {\n    <div class=\"error\">\n      {{ errorMessage() }}\n    </div>\n  }\n</div>\n", styles: [":host{--ngs-file-padding: calc(var(--spacing, .25rem) * 4);--ngs-file-border-radius: 1rem;--ngs-file-bg: var(--color-surface-container);--ngs-file-error-bg: var(--color-error-container-low);--ngs-file-controls-gap: calc(var(--spacing, .25rem) * 1.5);--ngs-file-progress-margin: calc(var(--spacing, .25rem) * 2) 0 0 0;--ngs-file-progress-bg: var(--color-surface-container-highest);--ngs-file-progress-height: calc(var(--spacing, .25rem) * 1);--ngs-file-progress-border-radius: .5rem;--ngs-file-progress-bar-bg: var(--color-primary);--ngs-file-control-color: var(--color-neutral-500);--ngs-file-control-hover-color: var(--color-primary);--ngs-file-control-font-size: 1.25rem;--ngs-file-name-font-size: .875rem;--ngs-file-info-font-size: .75rem;--ngs-file-info-color: var(--color-neutral-600);--ngs-file-error-font-size: .75rem;--ngs-file-error-color: var(--color-error);display:flex;align-items:center;width:100%;overflow:hidden;text-overflow:ellipsis;padding:var(--ngs-file-padding);border-radius:var(--ngs-file-border-radius);background:var(--ngs-file-bg)}:host .name{font-size:var(--ngs-file-name-font-size)}:host .info{font-size:var(--ngs-file-info-font-size);color:var(--ngs-file-info-color)}:host .content{min-width:0;flex-grow:1}:host .controls{display:flex;align-items:center;gap:var(--ngs-file-controls-gap)}:host .progress{background:var(--ngs-file-progress-bg);height:var(--ngs-file-progress-height);flex:none;border-radius:var(--ngs-file-progress-border-radius);margin:var(--ngs-file-progress-margin)}:host .progress-bar{background:var(--ngs-file-progress-bar-bg);border-radius:var(--ngs-file-progress-border-radius);height:100%}:host .error{font-size:var(--ngs-file-error-font-size);color:var(--ngs-file-error-color)}:host.has-error{background:var(--ngs-file-error-bg)}:host-context(html.dark){--ngs-file-error-color: var(--color-error-container-high);--ngs-file-progress-bg: var(--color-neutral-500);--ngs-file-control-hover-color: var(--color-neutral-300)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], progressingMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressingMessage", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], remainingTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "remainingTime", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }] } });
+
+class FileControl {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FileControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: FileControl, isStandalone: true, selector: "ngs-file-control,[ngs-file-control]", host: { classAttribute: "ngs-file-control not-prose" }, exportAs: ["ngsFileControl"], ngImport: i0, template: "<ng-content />\n", styles: [":host{flex:none;cursor:pointer;display:inline-flex;color:var(--ngs-file-control-color)}:host:hover{color:var(--ngs-file-control-hover-color)}:host ::ng-deep ngs-icon{--icon-size: calc(var(--spacing, .25rem) * 6)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FileControl, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-file-control,[ngs-file-control]', exportAs: 'ngsFileControl', host: {
+                        'class': 'ngs-file-control not-prose'
+                    }, template: "<ng-content />\n", styles: [":host{flex:none;cursor:pointer;display:inline-flex;color:var(--ngs-file-control-color)}:host:hover{color:var(--ngs-file-control-hover-color)}:host ::ng-deep ngs-icon{--icon-size: calc(var(--spacing, .25rem) * 6)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class FilesGrid {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FilesGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: FilesGrid, isStandalone: true, selector: "ngs-files-grid", host: { classAttribute: "ngs-files-grid not-prose" }, exportAs: ["ngsFilesGrid"], ngImport: i0, template: "<ng-content />\n", styles: [":host{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 5)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FilesGrid, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-files-grid', exportAs: 'ngsFilesGrid', host: {
+                        'class': 'ngs-files-grid not-prose'
+                    }, template: "<ng-content />\n", styles: [":host{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 5)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class GridFile {
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
+    progress = input(0, { ...(ngDevMode ? { debugName: "progress" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    progressingMessage = input(...(ngDevMode ? [undefined, { debugName: "progressingMessage" }] : /* istanbul ignore next */ []));
+    errorMessage = input(...(ngDevMode ? [undefined, { debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    remainingTime = input(...(ngDevMode ? [undefined, { debugName: "remainingTime" }] : /* istanbul ignore next */ []));
+    state = input('uploading', ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: GridFile, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: GridFile, isStandalone: true, selector: "ngs-grid-file", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, progressingMessage: { classPropertyName: "progressingMessage", publicName: "progressingMessage", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, remainingTime: { classPropertyName: "remainingTime", publicName: "remainingTime", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.has-error": "state() === 'error'" }, classAttribute: "ngs-grid-file not-prose" }, exportAs: ["ngsGridFile"], ngImport: i0, template: "<div class=\"flex items-center gap-2.5\">\n  <div class=\"icon\">\n    <ng-content select=\"[ngsFileIcon]\"/>\n  </div>\n  <div>\n    <div class=\"text-sm overflow-hidden text-ellipsis whitespace-nowrap max-w-[220px]\">{{ name() }}</div>\n    @if (size()) {\n      <div class=\"text-xs text-neutral-500 overflow-hidden text-ellipsis whitespace-nowrap max-w-[220px]\">{{ size() }}</div>\n    }\n  </div>\n</div>\n<div class=\"flex items-center gap-1\">\n  @if (state() === 'uploading') {\n    <ngs-gauge class=\"size-10\" [value]=\"progress()\">\n      <ngs-gauge-value class=\"text-2xs\">{{ progress() }}%</ngs-gauge-value>\n    </ngs-gauge>\n  }\n\n  <div class=\"controls\">\n    <ng-content select=\"[ngsGridFileControl]\"/>\n  </div>\n</div>\n\n@if (state() === 'error' && errorMessage()) {\n  <div class=\"error\">\n    {{ errorMessage() }}\n  </div>\n}\n", styles: [":host{--ngs-file-padding: calc(var(--spacing, .25rem) * 3) calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 3) calc(var(--spacing, .25rem) * 3);--ngs-file-gap: calc(var(--spacing, .25rem) * 4);--ngs-file-border-radius: 1rem;--ngs-file-bg: var(--color-surface-container);--ngs-file-error-bg: var(--color-error-container-low);--ngs-file-controls-gap: calc(var(--spacing, .25rem) * 1);--ngs-file-error-font-size: .75rem;--ngs-file-error-color: var(--color-error);display:flex;min-width:240px;align-items:center;justify-content:space-between;position:relative;padding:var(--ngs-file-padding);gap:var(--ngs-file-gap);border-radius:var(--ngs-file-border-radius);background:var(--ngs-file-bg)}:host .icon:empty{display:none}:host .icon{width:32px;max-height:40px}:host .controls{display:flex;gap:var(--ngs-file-controls-gap)}:host .controls:empty{display:none}:host .error{font-size:var(--ngs-file-error-font-size);color:var(--ngs-file-error-color);position:absolute;bottom:0;transform:translateY(100%);left:calc(var(--spacing, .25rem) * 2)}:host.has-error{background:var(--ngs-file-error-bg)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: GaugeValue, selector: "ngs-gauge-value", exportAs: ["ngsGaugeValue"] }, { kind: "component", type: Gauge, selector: "ngs-gauge", inputs: ["value", "strokeWidth", "radius"], exportAs: ["ngsGauge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: GridFile, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-grid-file', exportAs: 'ngsGridFile', imports: [
+                        GaugeValue,
+                        Gauge
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'ngs-grid-file not-prose',
+                        '[class.has-error]': "state() === 'error'"
+                    }, template: "<div class=\"flex items-center gap-2.5\">\n  <div class=\"icon\">\n    <ng-content select=\"[ngsFileIcon]\"/>\n  </div>\n  <div>\n    <div class=\"text-sm overflow-hidden text-ellipsis whitespace-nowrap max-w-[220px]\">{{ name() }}</div>\n    @if (size()) {\n      <div class=\"text-xs text-neutral-500 overflow-hidden text-ellipsis whitespace-nowrap max-w-[220px]\">{{ size() }}</div>\n    }\n  </div>\n</div>\n<div class=\"flex items-center gap-1\">\n  @if (state() === 'uploading') {\n    <ngs-gauge class=\"size-10\" [value]=\"progress()\">\n      <ngs-gauge-value class=\"text-2xs\">{{ progress() }}%</ngs-gauge-value>\n    </ngs-gauge>\n  }\n\n  <div class=\"controls\">\n    <ng-content select=\"[ngsGridFileControl]\"/>\n  </div>\n</div>\n\n@if (state() === 'error' && errorMessage()) {\n  <div class=\"error\">\n    {{ errorMessage() }}\n  </div>\n}\n", styles: [":host{--ngs-file-padding: calc(var(--spacing, .25rem) * 3) calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 3) calc(var(--spacing, .25rem) * 3);--ngs-file-gap: calc(var(--spacing, .25rem) * 4);--ngs-file-border-radius: 1rem;--ngs-file-bg: var(--color-surface-container);--ngs-file-error-bg: var(--color-error-container-low);--ngs-file-controls-gap: calc(var(--spacing, .25rem) * 1);--ngs-file-error-font-size: .75rem;--ngs-file-error-color: var(--color-error);display:flex;min-width:240px;align-items:center;justify-content:space-between;position:relative;padding:var(--ngs-file-padding);gap:var(--ngs-file-gap);border-radius:var(--ngs-file-border-radius);background:var(--ngs-file-bg)}:host .icon:empty{display:none}:host .icon{width:32px;max-height:40px}:host .controls{display:flex;gap:var(--ngs-file-controls-gap)}:host .controls:empty{display:none}:host .error{font-size:var(--ngs-file-error-font-size);color:var(--ngs-file-error-color);position:absolute;bottom:0;transform:translateY(100%);left:calc(var(--spacing, .25rem) * 2)}:host.has-error{background:var(--ngs-file-error-bg)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], progressingMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressingMessage", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], remainingTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "remainingTime", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }] } });
+
+class UploadContainer {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UploadContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: UploadContainer, isStandalone: true, selector: "ngs-upload-container", ngImport: i0, template: "<ng-content select=\"ngs-upload-area\"/>\n<div class=\"flex items-center justify-between mt-2 hints\">\n  <ng-content select=\"ngs-upload-allowed-types\"/>\n  <ng-content select=\"ngs-upload-max-file-size\"/>\n</div>\n", styles: [":host{display:block}:host .hints:empty{display: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: UploadContainer, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-upload-container', imports: [], template: "<ng-content select=\"ngs-upload-area\"/>\n<div class=\"flex items-center justify-between mt-2 hints\">\n  <ng-content select=\"ngs-upload-allowed-types\"/>\n  <ng-content select=\"ngs-upload-max-file-size\"/>\n</div>\n", styles: [":host{display:block}:host .hints:empty{display:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class UploadMaxFileSize {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UploadMaxFileSize, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: UploadMaxFileSize, isStandalone: true, selector: "ngs-upload-max-file-size", ngImport: i0, template: "<ng-content/>\n", styles: [":host{display:block;font-size:.75rem}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UploadMaxFileSize, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-upload-max-file-size', imports: [], template: "<ng-content/>\n", styles: [":host{display:block;font-size:.75rem}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class UploadAllowedTypes {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UploadAllowedTypes, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: UploadAllowedTypes, isStandalone: true, selector: "ngs-upload-allowed-types", ngImport: i0, template: "<ng-content/>\n", styles: [":host{display:block;font-size:.75rem}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UploadAllowedTypes, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-upload-allowed-types', imports: [], template: "<ng-content/>\n", styles: [":host{display:block;font-size:.75rem}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class UploadTriggerDirective {
+    _elementRef = inject(ElementRef);
+    _renderer = inject(Renderer2);
+    _destroyRef = inject(DestroyRef);
+    accept = input(...(ngDevMode ? [undefined, { debugName: "accept" }] : /* istanbul ignore next */ []));
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    fileSelected = output();
+    _handleClick() {
+        const element = this._renderer.createElement('input');
+        this._renderer.setAttribute(element, 'type', 'file');
+        let accept = this.accept();
+        if (!accept) {
+            accept = this._elementRef.nativeElement.getAttribute('accept') || '';
+        }
+        if (accept) {
+            this._renderer.setAttribute(element, 'accept', accept);
+        }
+        if (this.multiple()) {
+            this._renderer.setAttribute(element, 'multiple', '');
+        }
+        fromEvent(element, 'change')
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe(event => {
+            const files = [];
+            if (element.files) {
+                for (let i = 0; i < element.files.length; i++) {
+                    files.push(element.files[i]);
+                }
+            }
+            this.fileSelected.emit({
+                multiple: this.multiple(),
+                fileList: element.files,
+                event,
+                files
+            });
+        });
+        element.click();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UploadTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: UploadTriggerDirective, isStandalone: true, selector: "[ngsUploadTrigger]", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileSelected: "fileSelected" }, host: { listeners: { "click": "_handleClick()" } }, exportAs: ["ngsUploadTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UploadTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsUploadTrigger]',
+                    exportAs: 'ngsUploadTrigger',
+                    standalone: true,
+                    host: {
+                        '(click)': '_handleClick()'
+                    }
+                }]
+        }], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], fileSelected: [{ type: i0.Output, args: ["fileSelected"] }] } });
+
+class UploadAreaIconDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UploadAreaIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: UploadAreaIconDirective, isStandalone: true, selector: "[ngsUploadAreaIcon]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UploadAreaIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsUploadAreaIcon]'
+                }]
+        }] });
+
+class UploadAreaMainStateDirective {
+    templateRef = inject(TemplateRef, { optional: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UploadAreaMainStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: UploadAreaMainStateDirective, isStandalone: true, selector: "[ngsUploadAreaMainState]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UploadAreaMainStateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsUploadAreaMainState]'
+                }]
+        }] });
+
+class UploadAreaDropStateDirective {
+    templateRef = inject(TemplateRef, { optional: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UploadAreaDropStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: UploadAreaDropStateDirective, isStandalone: true, selector: "[ngsUploadAreaDropState]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UploadAreaDropStateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsUploadAreaDropState]'
+                }]
+        }] });
+
+class UploadAreaInvalidStateDirective {
+    templateRef = inject(TemplateRef, { optional: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UploadAreaInvalidStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: UploadAreaInvalidStateDirective, isStandalone: true, selector: "[ngsUploadAreaInvalidState]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UploadAreaInvalidStateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsUploadAreaInvalidState]'
+                }]
+        }] });
+
+class FileIconDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FileIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: FileIconDirective, isStandalone: true, selector: "[ngsFileIcon]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FileIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsFileIcon]'
+                }]
+        }] });
+
+class GridFileControlDirective {
+    constructor() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: GridFileControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: GridFileControlDirective, isStandalone: true, selector: "[ngsGridFileControl]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: GridFileControlDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsGridFileControl]'
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { File, FileControl, FileIconDirective, FileList, FilesGrid, GridFile, GridFileControlDirective, UploadAllowedTypes, UploadArea, UploadAreaDropStateDirective, UploadAreaIconDirective, UploadAreaInvalidStateDirective, UploadAreaMainStateDirective, UploadContainer, UploadMaxFileSize, UploadTriggerDirective };
+//# sourceMappingURL=ngstarter-ui-components-upload.mjs.map