inugami-ng 0.0.31 → 0.0.32

package/fesm2022/inugami-ng-components-inu-panel-tabs.mjs

@@ -0,0 +1,181 @@
+import * as i0 from '@angular/core';
+import { input, viewChild, signal, effect, Component, contentChildren, output } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { InuIcon } from 'inugami-icons';
+
+class InuPanelTab {
+    //==================================================================================================================
+    // ATTRIBUTES
+    //==================================================================================================================
+    icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    hasAccess = input(true, ...(ngDevMode ? [{ debugName: "hasAccess" }] : []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
+    styleClass = input('', ...(ngDevMode ? [{ debugName: "styleClass" }] : []));
+    valid = input(true, ...(ngDevMode ? [{ debugName: "valid" }] : []));
+    //
+    templateRef = viewChild.required('content');
+    //
+    display = signal(false, ...(ngDevMode ? [{ debugName: "display" }] : []));
+    _styleClass = signal('', ...(ngDevMode ? [{ debugName: "_styleClass" }] : []));
+    //==================================================================================================================
+    // INIT
+    //==================================================================================================================
+    constructor() {
+        effect(() => {
+            const styles = ['inu-panel-tab'];
+            const style = this.styleClass();
+            if (style) {
+                styles.push(style);
+            }
+            this._styleClass.set(styles.join(" "));
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InuPanelTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: InuPanelTab, isStandalone: true, selector: "inu-panel-tab", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, hasAccess: { classPropertyName: "hasAccess", publicName: "hasAccess", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, valid: { classPropertyName: "valid", publicName: "valid", isSignal: true, isRequired: false, transformFunction: null } }, providers: [], viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ng-template #content>
+      <div [class]="_styleClass()">
+        <ng-content/>
+      </div>
+    </ng-template>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InuPanelTab, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'inu-panel-tab',
+                    standalone: true,
+                    providers: [],
+                    imports: [],
+                    template: `
+    <ng-template #content>
+      <div [class]="_styleClass()">
+        <ng-content/>
+      </div>
+    </ng-template>
+  `
+                }]
+        }], ctorParameters: () => [], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], hasAccess: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasAccess", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], valid: [{ type: i0.Input, args: [{ isSignal: true, alias: "valid", required: false }] }], templateRef: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
+
+class InuPanelTabs {
+    //==================================================================================================================
+    // ATTRIBUTES
+    //==================================================================================================================
+    activeTab = input(undefined, ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    styleClass = input('', ...(ngDevMode ? [{ debugName: "styleClass" }] : []));
+    vertical = input(false, ...(ngDevMode ? [{ debugName: "vertical" }] : []));
+    childrenTabs = contentChildren(InuPanelTab, ...(ngDevMode ? [{ debugName: "childrenTabs" }] : []));
+    changed = output();
+    //
+    _styleClass = signal('', ...(ngDevMode ? [{ debugName: "_styleClass" }] : []));
+    valid = signal(true, ...(ngDevMode ? [{ debugName: "valid" }] : []));
+    tabs = signal([], ...(ngDevMode ? [{ debugName: "tabs" }] : []));
+    //==================================================================================================================
+    // INIT
+    //==================================================================================================================
+    constructor() {
+        effect(() => {
+            this.initStyleClass();
+        });
+    }
+    initStyleClass() {
+        const styles = ['inu-panel-tabs'];
+        const style = this.styleClass();
+        if (style) {
+            styles.push(style);
+        }
+        if (this.vertical()) {
+            styles.push('vertical');
+        }
+        this._styleClass.set(styles.join(" "));
+    }
+    ngAfterViewInit() {
+        this.initTabs();
+    }
+    initTabs() {
+        const result = [];
+        const children = this.childrenTabs();
+        for (let child of children) {
+            result.push(child);
+        }
+        let found = false;
+        const activeTab = this.activeTab();
+        if (activeTab) {
+            for (let child of children) {
+                if (activeTab == child.name()) {
+                    child.display.set(true);
+                    this.changed.emit(child.name());
+                    this.valid.set(child.valid());
+                    found = true;
+                }
+            }
+        }
+        if (!found) {
+            let first = true;
+            for (let child of children) {
+                if (first) {
+                    child.display.set(true);
+                    this.changed.emit(child.name());
+                    this.valid.set(child.valid());
+                    first = false;
+                }
+            }
+        }
+        this.tabs.set(result);
+    }
+    //==================================================================================================================
+    // ACTIONS
+    //==================================================================================================================
+    openTab(panel) {
+        if (!panel.hasAccess()) {
+            return;
+        }
+        this.valid.set(true);
+        const children = this.childrenTabs();
+        if (!children) {
+            return;
+        }
+        for (let child of children) {
+            if (child.name() === panel.name()) {
+                child.display.set(true);
+                this.valid.set(child.valid());
+                this.changed.emit(child.name());
+            }
+            else {
+                child.display.set(false);
+            }
+        }
+    }
+    //==================================================================================================================
+    // TOOLS
+    //==================================================================================================================
+    checkValidity() {
+        const children = this.childrenTabs();
+        if (!children) {
+            return;
+        }
+        this.valid.set(true);
+        for (let child of children) {
+            if (!child.valid()) {
+                this.valid.set(false);
+                break;
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InuPanelTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: InuPanelTabs, isStandalone: true, selector: "inu-panel-tabs", inputs: { activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, providers: [], queries: [{ propertyName: "childrenTabs", predicate: InuPanelTab, isSignal: true }], ngImport: i0, template: "<div [class]=\"_styleClass()\">\n\n\n  <div class=\"inu-panel-tabs-headers\">\n    <ul [class.noValid]=\"!valid()\">\n      @for (tab of tabs(); track tab) {\n        <li [class.display]=\"tab.display()\"\n            [class.noAccess]=\"!tab.hasAccess()\"\n            [class.noValid]=\"!tab.valid()\"\n            (click)=\"openTab(tab)\">\n            <div class=\"inu-panel-tabs-headers-child\">\n              <div class=\"inu-panel-tabs-headers-child-tab\">\n                <div class=\"inu-panel-tabs-headers-child-tab-icon\">\n                  @if(tab.icon()){\n                    <inu-icon [icon]=\"tab.icon()\" [size]=\"1\"></inu-icon>\n                  }\n                </div>\n                <div  class=\"inu-panel-tabs-headers-child-tab-label\">{{tab.label()!}}</div>\n              </div>\n            </div>\n        </li>\n      }\n    </ul>\n  </div>\n  <div class=\"inu-panel-tabs-content\">\n    @for (tab of tabs(); track tab) {\n      <div class=\"tab-panel\">\n        @if(tab.display() && tab.hasAccess()){\n          @if(tab.templateRef()){\n            <ng-container [ngTemplateOutlet]=\"tab.templateRef()\" />\n          }\n        }\n      </div>\n    }\n  </div>\n\n\n\n</div>\n", styles: [".inu-panel-tabs{display:flex;flex-direction:column}.inu-panel-tabs .inu-panel-tabs-headers{display:flex}.inu-panel-tabs .inu-panel-tabs-headers ul{list-style:none;padding:0;margin:0;display:flex;gap:.25rem;width:100%;border-bottom:1px solid var(--secondary)}.inu-panel-tabs .inu-panel-tabs-headers ul.noValid{border-bottom:1px solid var(--danger)}.inu-panel-tabs .inu-panel-tabs-headers ul li{cursor:pointer;display:flex;border:1px solid var(--neutral-light);transition:background-color .25s}.inu-panel-tabs .inu-panel-tabs-headers ul li .inu-panel-tabs-headers-child-tab{display:flex;gap:1rem;align-items:baseline}.inu-panel-tabs .inu-panel-tabs-headers ul li.noValid{border:1px solid var(--danger-light-extra-extra);background-color:var(--danger-light-extra-extra)}.inu-panel-tabs .inu-panel-tabs-headers ul li.display{background-color:var(--secondary-light-extra);border:1px solid var(--secondary-light-extra);border-bottom:2px solid var(--secondary)}.inu-panel-tabs .inu-panel-tabs-headers ul li.noValid.display{background-color:var(--danger-light);border:1px solid var(--danger-light);border-bottom:2px solid var(--danger)}.inu-panel-tabs .inu-panel-tabs-headers ul li:hover{background-color:var(--secondary-light-extra)}.inu-panel-tabs .inu-panel-tabs-headers ul li.noValid:hover{background-color:var(--danger-light-extra)}.inu-panel-tabs .inu-panel-tabs-headers ul li.noAccess{cursor:not-allowed;color:var(--neutral);background-color:var(--neutral-light-extra)}.inu-panel-tabs .inu-panel-tabs-headers ul li{padding:.25rem 1rem}.inu-panel-tabs.vertical{gap:1rem}.inu-panel-tabs.vertical .inu-panel-tabs-headers ul{flex-direction:column;border-right:2px solid var(--secondary);border-bottom:none}.inu-panel-tabs.vertical .inu-panel-tabs-headers ul.noValid{border-right:2px solid var(--danger)}.inu-panel-tabs.vertical .inu-panel-tabs-headers ul li.display{border-bottom:none;border-right:2px solid var(--secondary)}.inu-panel-tabs.vertical .inu-panel-tabs-headers ul li.noValid.display{border-bottom:none;border-right:2px solid var(--danger)}.inu-panel-tabs .inu-panel-tabs-content{flex:1}.inu-panel-tabs.vertical{flex-direction:row}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InuIcon, selector: "inu-icon", inputs: ["icon", "defaultIcon", "styleclass", "size"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InuPanelTabs, decorators: [{
+            type: Component,
+            args: [{ selector: 'inu-panel-tabs', standalone: true, providers: [], imports: [
+                        NgTemplateOutlet,
+                        InuIcon
+                    ], template: "<div [class]=\"_styleClass()\">\n\n\n  <div class=\"inu-panel-tabs-headers\">\n    <ul [class.noValid]=\"!valid()\">\n      @for (tab of tabs(); track tab) {\n        <li [class.display]=\"tab.display()\"\n            [class.noAccess]=\"!tab.hasAccess()\"\n            [class.noValid]=\"!tab.valid()\"\n            (click)=\"openTab(tab)\">\n            <div class=\"inu-panel-tabs-headers-child\">\n              <div class=\"inu-panel-tabs-headers-child-tab\">\n                <div class=\"inu-panel-tabs-headers-child-tab-icon\">\n                  @if(tab.icon()){\n                    <inu-icon [icon]=\"tab.icon()\" [size]=\"1\"></inu-icon>\n                  }\n                </div>\n                <div  class=\"inu-panel-tabs-headers-child-tab-label\">{{tab.label()!}}</div>\n              </div>\n            </div>\n        </li>\n      }\n    </ul>\n  </div>\n  <div class=\"inu-panel-tabs-content\">\n    @for (tab of tabs(); track tab) {\n      <div class=\"tab-panel\">\n        @if(tab.display() && tab.hasAccess()){\n          @if(tab.templateRef()){\n            <ng-container [ngTemplateOutlet]=\"tab.templateRef()\" />\n          }\n        }\n      </div>\n    }\n  </div>\n\n\n\n</div>\n", styles: [".inu-panel-tabs{display:flex;flex-direction:column}.inu-panel-tabs .inu-panel-tabs-headers{display:flex}.inu-panel-tabs .inu-panel-tabs-headers ul{list-style:none;padding:0;margin:0;display:flex;gap:.25rem;width:100%;border-bottom:1px solid var(--secondary)}.inu-panel-tabs .inu-panel-tabs-headers ul.noValid{border-bottom:1px solid var(--danger)}.inu-panel-tabs .inu-panel-tabs-headers ul li{cursor:pointer;display:flex;border:1px solid var(--neutral-light);transition:background-color .25s}.inu-panel-tabs .inu-panel-tabs-headers ul li .inu-panel-tabs-headers-child-tab{display:flex;gap:1rem;align-items:baseline}.inu-panel-tabs .inu-panel-tabs-headers ul li.noValid{border:1px solid var(--danger-light-extra-extra);background-color:var(--danger-light-extra-extra)}.inu-panel-tabs .inu-panel-tabs-headers ul li.display{background-color:var(--secondary-light-extra);border:1px solid var(--secondary-light-extra);border-bottom:2px solid var(--secondary)}.inu-panel-tabs .inu-panel-tabs-headers ul li.noValid.display{background-color:var(--danger-light);border:1px solid var(--danger-light);border-bottom:2px solid var(--danger)}.inu-panel-tabs .inu-panel-tabs-headers ul li:hover{background-color:var(--secondary-light-extra)}.inu-panel-tabs .inu-panel-tabs-headers ul li.noValid:hover{background-color:var(--danger-light-extra)}.inu-panel-tabs .inu-panel-tabs-headers ul li.noAccess{cursor:not-allowed;color:var(--neutral);background-color:var(--neutral-light-extra)}.inu-panel-tabs .inu-panel-tabs-headers ul li{padding:.25rem 1rem}.inu-panel-tabs.vertical{gap:1rem}.inu-panel-tabs.vertical .inu-panel-tabs-headers ul{flex-direction:column;border-right:2px solid var(--secondary);border-bottom:none}.inu-panel-tabs.vertical .inu-panel-tabs-headers ul.noValid{border-right:2px solid var(--danger)}.inu-panel-tabs.vertical .inu-panel-tabs-headers ul li.display{border-bottom:none;border-right:2px solid var(--secondary)}.inu-panel-tabs.vertical .inu-panel-tabs-headers ul li.noValid.display{border-bottom:none;border-right:2px solid var(--danger)}.inu-panel-tabs .inu-panel-tabs-content{flex:1}.inu-panel-tabs.vertical{flex-direction:row}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], childrenTabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => InuPanelTab), { isSignal: true }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { InuPanelTab, InuPanelTabs };
+//# sourceMappingURL=inugami-ng-components-inu-panel-tabs.mjs.map

package/fesm2022/inugami-ng-components-inu-panel-tabs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"inugami-ng-components-inu-panel-tabs.mjs","sources":["../../../projects/inugami-ng/components/inu-panel-tabs/inu-panel-tab/inu-panel-tab.component.ts","../../../projects/inugami-ng/components/inu-panel-tabs/inu-panel-tabs.ts","../../../projects/inugami-ng/components/inu-panel-tabs/inu-panel-tabs.html","../../../projects/inugami-ng/components/inu-panel-tabs/inugami-ng-components-inu-panel-tabs.ts"],"sourcesContent":["import {Component, effect, input, signal, TemplateRef, viewChild} from '@angular/core';\n\n@Component({\n  selector: 'inu-panel-tab',\n  standalone: true,\n  providers: [],\n  imports: [],\n  template: `\n    <ng-template #content>\n      <div [class]=\"_styleClass()\">\n        <ng-content/>\n      </div>\n    </ng-template>\n  `\n})\nexport class InuPanelTab {\n\n  //==================================================================================================================\n  // ATTRIBUTES\n  //==================================================================================================================\n  icon = input<string>('');\n  hasAccess = input<boolean>(true);\n  label = input<string>('');\n  name = input.required<string>();\n  styleClass = input<string | undefined | null>('');\n  valid = input<boolean>(true);\n  //\n  readonly templateRef = viewChild.required<TemplateRef<any>>('content');\n  //\n  display = signal<boolean>(false);\n  _styleClass = signal<string>('');\n\n  //==================================================================================================================\n  // INIT\n  //==================================================================================================================\n  constructor() {\n    effect(() => {\n      const styles: string[] = ['inu-panel-tab'];\n      const style = this.styleClass();\n      if (style) {\n        styles.push(style);\n      }\n      this._styleClass.set(styles.join(\" \"));\n    });\n  }\n}\n","import {AfterViewInit, Component, contentChildren, effect, input, output, signal} from '@angular/core';\nimport {InuPanelTab} from './inu-panel-tab/inu-panel-tab.component';\nimport {NgTemplateOutlet} from '@angular/common';\nimport {InuIcon} from 'inugami-icons';\n\n@Component({\n  selector: 'inu-panel-tabs',\n  standalone: true,\n  providers: [],\n  imports: [\n    NgTemplateOutlet,\n    InuIcon\n  ],\n  templateUrl: './inu-panel-tabs.html',\n  styleUrl: './inu-panel-tabs.scss',\n})\nexport class InuPanelTabs implements AfterViewInit {\n\n\n  //==================================================================================================================\n  // ATTRIBUTES\n  //==================================================================================================================\n  readonly activeTab = input<string|undefined>(undefined);\n  styleClass = input<string | undefined | null>('');\n  readonly vertical = input(false);\n  readonly childrenTabs = contentChildren(InuPanelTab);\n  changed = output<string>();\n\n  //\n  _styleClass = signal<string>('');\n  valid = signal<boolean>(true);\n  tabs = signal<InuPanelTab[]>([]);\n\n  //==================================================================================================================\n  // INIT\n  //==================================================================================================================\n  constructor() {\n    effect(() => {\n      this.initStyleClass();\n    });\n  }\n\n  private initStyleClass() {\n    const styles: string[] = ['inu-panel-tabs'];\n    const style = this.styleClass();\n    if (style) {\n      styles.push(style);\n    }\n    if (this.vertical()) {\n      styles.push('vertical');\n    }\n    this._styleClass.set(styles.join(\" \"));\n  }\n\n\n  ngAfterViewInit(): void {\n    this.initTabs();\n  }\n\n  private initTabs() {\n    const result: InuPanelTab[] = [];\n    const children = this.childrenTabs();\n\n\n\n    for (let child of children) {\n      result.push(child);\n    }\n\n    let found = false;\n    const activeTab = this.activeTab();\n    if(activeTab){\n      for (let child of children) {\n        if (activeTab == child.name()) {\n          child.display.set(true);\n          this.changed.emit(child.name());\n          this.valid.set(child.valid());\n          found = true;\n        }\n      }\n    }\n\n    if(!found){\n      let first = true;\n      for (let child of children) {\n        if (first) {\n          child.display.set(true);\n          this.changed.emit(child.name());\n          this.valid.set(child.valid());\n          first = false;\n        }\n      }\n    }\n\n    this.tabs.set(result);\n  }\n\n  //==================================================================================================================\n  // ACTIONS\n  //==================================================================================================================\n  openTab(panel: InuPanelTab) {\n    if (!panel.hasAccess()) {\n      return;\n    }\n    this.valid.set(true);\n    const children = this.childrenTabs();\n    if (!children) {\n      return;\n    }\n    for (let child of children) {\n      if (child.name() === panel.name()) {\n        child.display.set(true);\n        this.valid.set(child.valid());\n        this.changed.emit(child.name());\n      } else {\n        child.display.set(false);\n      }\n    }\n  }\n\n  //==================================================================================================================\n  // TOOLS\n  //==================================================================================================================\n  private checkValidity() {\n    const children = this.childrenTabs();\n    if (!children) {\n      return;\n    }\n    this.valid.set(true);\n    for (let child of children) {\n      if(!child.valid()){\n        this.valid.set(false);\n        break;\n      }\n    }\n  }\n}\n","<div [class]=\"_styleClass()\">\n\n\n  <div class=\"inu-panel-tabs-headers\">\n    <ul [class.noValid]=\"!valid()\">\n      @for (tab of tabs(); track tab) {\n        <li [class.display]=\"tab.display()\"\n            [class.noAccess]=\"!tab.hasAccess()\"\n            [class.noValid]=\"!tab.valid()\"\n            (click)=\"openTab(tab)\">\n            <div class=\"inu-panel-tabs-headers-child\">\n              <div class=\"inu-panel-tabs-headers-child-tab\">\n                <div class=\"inu-panel-tabs-headers-child-tab-icon\">\n                  @if(tab.icon()){\n                    <inu-icon [icon]=\"tab.icon()\" [size]=\"1\"></inu-icon>\n                  }\n                </div>\n                <div  class=\"inu-panel-tabs-headers-child-tab-label\">{{tab.label()!}}</div>\n              </div>\n            </div>\n        </li>\n      }\n    </ul>\n  </div>\n  <div class=\"inu-panel-tabs-content\">\n    @for (tab of tabs(); track tab) {\n      <div class=\"tab-panel\">\n        @if(tab.display() && tab.hasAccess()){\n          @if(tab.templateRef()){\n            <ng-container [ngTemplateOutlet]=\"tab.templateRef()\" />\n          }\n        }\n      </div>\n    }\n  </div>\n\n\n\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/inugami-ng-components-inu-panel.mjs

@@ -0,0 +1,98 @@
+import * as i0 from '@angular/core';
+import { input, inject, viewChild, computed, signal, effect, Component } from '@angular/core';
+import { InuLabel } from 'inugami-ng/components/inu-label';
+import { InuButton } from 'inugami-ng/components/inu-button';
+import { SVG_MATH, SVG } from 'inugami-ng/services';
+import { InuTemplateRegistryService } from 'inugami-ng/directives';
+import { NgTemplateOutlet } from '@angular/common';
+import { InuIcon } from 'inugami-icons';
+
+class InuPanel {
+    //==================================================================================================================
+    // ATTRIBUTES
+    //==================================================================================================================
+    duration = input(500, ...(ngDevMode ? [{ debugName: "duration" }] : []));
+    icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : []));
+    titleKey = input(undefined, ...(ngDevMode ? [{ debugName: "titleKey" }] : []));
+    styleClass = input(undefined, ...(ngDevMode ? [{ debugName: "styleClass" }] : []));
+    collapsible = input(true, ...(ngDevMode ? [{ debugName: "collapsible" }] : []));
+    collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
+    //
+    registry = inject(InuTemplateRegistryService);
+    main = viewChild('main', ...(ngDevMode ? [{ debugName: "main" }] : []));
+    footerTemplate = computed(() => this.registry.getTemplate('footer'), ...(ngDevMode ? [{ debugName: "footerTemplate" }] : []));
+    titleTemplate = computed(() => this.registry.getTemplate('title'), ...(ngDevMode ? [{ debugName: "titleTemplate" }] : []));
+    //
+    _styleClass = computed(() => [
+        'inu-panel',
+        this.styleClass() ?? '',
+        this._collapsed() ? 'inu-panel-collapsed' : 'inu-panel-expanded'
+    ].join(' '), ...(ngDevMode ? [{ debugName: "_styleClass" }] : []));
+    _animeInProgress = signal(false, ...(ngDevMode ? [{ debugName: "_animeInProgress" }] : []));
+    _collapsed = signal(false, ...(ngDevMode ? [{ debugName: "_collapsed" }] : []));
+    constructor() {
+        effect(() => {
+            this._collapsed.set(this.collapsed());
+        });
+    }
+    //==================================================================================================================
+    // ACTIONS
+    //==================================================================================================================
+    toggleCollapse(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        const node = this.main()?.nativeElement;
+        if (!this.collapsible() || this._animeInProgress() || !node) {
+            return;
+        }
+        const currentStyle = node.getAttribute('style') || '';
+        node.style.height = 'auto';
+        const computedHeight = SVG_MATH.size(node).height;
+        node.setAttribute('style', currentStyle);
+        const wasCollapsed = this._collapsed();
+        const startHeight = wasCollapsed ? 0 : computedHeight;
+        const endHeight = wasCollapsed ? computedHeight : 0;
+        const delta = endHeight - startHeight;
+        this._animeInProgress.set(true);
+        node.setAttribute('class', `animated`);
+        SVG.ANIMATION.animate((progress) => {
+            const currentProgressHeight = startHeight + (delta * progress);
+            node.style.height = `${currentProgressHeight}px`;
+        }, {
+            duration: this.duration(),
+            timer: SVG.ANIMATION.TYPES.easeOutCubic,
+            onDone: () => {
+                if (wasCollapsed) {
+                    node.style.removeProperty('height');
+                }
+                else {
+                    node.style.height = '0px';
+                }
+                this._collapsed.set(!this._collapsed());
+                requestAnimationFrame(() => {
+                    this._animeInProgress.set(false);
+                    node.setAttribute('class', ``);
+                });
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InuPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: InuPanel, isStandalone: true, selector: "inu-panel", inputs: { duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleKey: { classPropertyName: "titleKey", publicName: "titleKey", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, providers: [InuTemplateRegistryService], viewQueries: [{ propertyName: "main", first: true, predicate: ["main"], descendants: true, isSignal: true }], ngImport: i0, template: "<article [class]=\"_styleClass()\">\n  <header (click)=\"toggleCollapse($event)\">\n    @if(icon()){\n      <inu-icon [icon]=\"icon()\" [size]=\"1.5\"></inu-icon>\n    }\n\n    <div class=\"inu-panel-title\">\n      @if(titleTemplate()){\n        <ng-container *ngTemplateOutlet=\"titleTemplate()\"></ng-container>\n      }\n      @else{\n        @if (title() || titleKey()) {\n          @if (titleKey()) {\n            <label>\n              <inu-label [key]=\"titleKey()\" [defaultValue]=\"title()!\"></inu-label>\n            </label>\n          } @else {\n            <label>{{ title()! }}</label>\n          }\n        }\n      }\n\n    </div>\n    @if(collapsible()){\n      <ul class=\"inu-panel-title-collapsible\">\n        <li>\n          <inu-button [icon]=\"_collapsed()?'chevron_down':'chevron_up'\"\n                      [disabled]=\"_animeInProgress()\"></inu-button>\n        </li>\n      </ul>\n    }\n  </header>\n  <main #main>\n    <div class=\"inu-panel-main\">\n      <ng-content/>\n    </div>\n  </main>\n  @if(footerTemplate()){\n    <footer>\n      <ng-container *ngTemplateOutlet=\"footerTemplate()\"></ng-container>\n    </footer>\n  }\n\n</article>\n", styles: [".inu-panel{border:.125rem solid var(--neutral-light)}.inu-panel header{display:flex;padding:.5rem;background-color:var(--neutral-light);border-bottom:.125rem solid var(--neutral-light);font-weight:700;gap:.5rem;align-items:center}.inu-panel header .inu-panel-title{flex:1;display:flex;align-items:center}.inu-panel header .inu-panel-title label{display:flex;align-items:center}.inu-panel header .inu-panel-title-collapsible{margin:0;padding:0;display:flex}.inu-panel header .inu-panel-title-collapsible li{list-style:none}.inu-panel.inu-panel-expanded main{display:flex}.inu-panel.inu-panel-collapsed main{visibility:hidden;height:0}.inu-panel main .inu-panel-main{padding:.5rem}.inu-panel main.animated{visibility:visible;overflow:hidden}.inu-panel ::ng-deep inu-button button{background:transparent;border:none}.inu-panel ::ng-deep inu-button button:hover{border-color:transparent;-webkit-box-shadow:none;box-shadow:none;fill:var(--secondary)}.inu-panel ::ng-deep inu-button button.disabled{background-color:transparent;border:none!important;-webkit-box-shadow:none;box-shadow:none;color:var(--neutral);fill:var(--neutral)}.inu-panel footer{border-top:.125rem solid var(--neutral-light);padding:.5rem}\n"], dependencies: [{ kind: "component", type: InuLabel, selector: "inu-label", inputs: ["key", "defaultValue"] }, { kind: "component", type: InuButton, selector: "inu-button", inputs: ["label", "icon", "iconSize", "type", "link", "disabled", "processing", "processingIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InuIcon, selector: "inu-icon", inputs: ["icon", "defaultIcon", "styleclass", "size"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InuPanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'inu-panel', standalone: true, imports: [
+                        InuLabel,
+                        InuButton,
+                        NgTemplateOutlet,
+                        InuIcon
+                    ], providers: [InuTemplateRegistryService], template: "<article [class]=\"_styleClass()\">\n  <header (click)=\"toggleCollapse($event)\">\n    @if(icon()){\n      <inu-icon [icon]=\"icon()\" [size]=\"1.5\"></inu-icon>\n    }\n\n    <div class=\"inu-panel-title\">\n      @if(titleTemplate()){\n        <ng-container *ngTemplateOutlet=\"titleTemplate()\"></ng-container>\n      }\n      @else{\n        @if (title() || titleKey()) {\n          @if (titleKey()) {\n            <label>\n              <inu-label [key]=\"titleKey()\" [defaultValue]=\"title()!\"></inu-label>\n            </label>\n          } @else {\n            <label>{{ title()! }}</label>\n          }\n        }\n      }\n\n    </div>\n    @if(collapsible()){\n      <ul class=\"inu-panel-title-collapsible\">\n        <li>\n          <inu-button [icon]=\"_collapsed()?'chevron_down':'chevron_up'\"\n                      [disabled]=\"_animeInProgress()\"></inu-button>\n        </li>\n      </ul>\n    }\n  </header>\n  <main #main>\n    <div class=\"inu-panel-main\">\n      <ng-content/>\n    </div>\n  </main>\n  @if(footerTemplate()){\n    <footer>\n      <ng-container *ngTemplateOutlet=\"footerTemplate()\"></ng-container>\n    </footer>\n  }\n\n</article>\n", styles: [".inu-panel{border:.125rem solid var(--neutral-light)}.inu-panel header{display:flex;padding:.5rem;background-color:var(--neutral-light);border-bottom:.125rem solid var(--neutral-light);font-weight:700;gap:.5rem;align-items:center}.inu-panel header .inu-panel-title{flex:1;display:flex;align-items:center}.inu-panel header .inu-panel-title label{display:flex;align-items:center}.inu-panel header .inu-panel-title-collapsible{margin:0;padding:0;display:flex}.inu-panel header .inu-panel-title-collapsible li{list-style:none}.inu-panel.inu-panel-expanded main{display:flex}.inu-panel.inu-panel-collapsed main{visibility:hidden;height:0}.inu-panel main .inu-panel-main{padding:.5rem}.inu-panel main.animated{visibility:visible;overflow:hidden}.inu-panel ::ng-deep inu-button button{background:transparent;border:none}.inu-panel ::ng-deep inu-button button:hover{border-color:transparent;-webkit-box-shadow:none;box-shadow:none;fill:var(--secondary)}.inu-panel ::ng-deep inu-button button.disabled{background-color:transparent;border:none!important;-webkit-box-shadow:none;box-shadow:none;color:var(--neutral);fill:var(--neutral)}.inu-panel footer{border-top:.125rem solid var(--neutral-light);padding:.5rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], titleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleKey", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], main: [{ type: i0.ViewChild, args: ['main', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { InuPanel };
+//# sourceMappingURL=inugami-ng-components-inu-panel.mjs.map

package/fesm2022/inugami-ng-components-inu-panel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"inugami-ng-components-inu-panel.mjs","sources":["../../../projects/inugami-ng/components/inu-panel/inu-panel.ts","../../../projects/inugami-ng/components/inu-panel/inu-panel.html","../../../projects/inugami-ng/components/inu-panel/inugami-ng-components-inu-panel.ts"],"sourcesContent":["import {Component, computed, effect, ElementRef, inject, input, signal, viewChild} from '@angular/core';\nimport {InuLabel} from 'inugami-ng/components/inu-label';\nimport {InuButton} from 'inugami-ng/components/inu-button';\nimport {SVG, SVG_MATH} from 'inugami-ng/services';\nimport {InuTemplateRegistryService} from 'inugami-ng/directives';\nimport {NgTemplateOutlet} from '@angular/common';\nimport {InuIcon} from 'inugami-icons';\n\n@Component({\n             selector   : 'inu-panel',\n             standalone : true,\n             imports    : [\n               InuLabel,\n               InuButton,\n               NgTemplateOutlet,\n               InuIcon\n             ],\n             providers  : [InuTemplateRegistryService],\n             templateUrl: './inu-panel.html',\n             styleUrl   : './inu-panel.scss',\n           })\nexport class InuPanel {\n\n  //==================================================================================================================\n  // ATTRIBUTES\n  //==================================================================================================================\n  duration    = input<number>(500);\n  icon        = input<string | undefined>(undefined);\n  title       = input<string | undefined>(undefined);\n  titleKey    = input<string | undefined>(undefined);\n  styleClass  = input<string | undefined>(undefined);\n  collapsible = input<boolean>(true);\n  collapsed   = input<boolean>(false);\n\n  //\n  registry: InuTemplateRegistryService = inject(InuTemplateRegistryService);\n  main                                 = viewChild<ElementRef<HTMLElement>>('main');\n  footerTemplate                       = computed(() => this.registry.getTemplate('footer'));\n  titleTemplate                        = computed(() => this.registry.getTemplate('title'));\n  //\n  _styleClass                          = computed<string>(() => [\n    'inu-panel',\n    this.styleClass() ?? '',\n    this._collapsed() ? 'inu-panel-collapsed' : 'inu-panel-expanded'\n  ].join(' '));\n  _animeInProgress                     = signal<boolean>(false);\n  _collapsed                           = signal<boolean>(false);\n\n  constructor() {\n    effect(() => {\n      this._collapsed.set(this.collapsed());\n    });\n  }\n\n  //==================================================================================================================\n  // ACTIONS\n  //==================================================================================================================\n  protected toggleCollapse(event: PointerEvent) {\n    event.stopPropagation();\n    event.preventDefault();\n    const node = this.main()?.nativeElement;\n\n    if (!this.collapsible() || this._animeInProgress() || !node) {\n      return;\n    }\n    const currentStyle   = node.getAttribute('style') || '';\n    node.style.height    = 'auto';\n    const computedHeight = SVG_MATH.size(node).height;\n    node.setAttribute('style', currentStyle);\n\n    const wasCollapsed = this._collapsed();\n    const startHeight  = wasCollapsed ? 0 : computedHeight;\n    const endHeight    = wasCollapsed ? computedHeight : 0;\n    const delta        = endHeight - startHeight;\n\n    this._animeInProgress.set(true);\n    node.setAttribute('class', `animated`);\n\n    SVG.ANIMATION.animate((progress: number) => {\n                            const currentProgressHeight = startHeight + (delta * progress);\n                            node.style.height           = `${currentProgressHeight}px`;\n                          },\n                          {\n                            duration: this.duration(),\n                            timer   : SVG.ANIMATION.TYPES.easeOutCubic,\n                            onDone  : () => {\n                              if (wasCollapsed) {\n                                node.style.removeProperty('height');\n                              } else {\n                                node.style.height = '0px';\n                              }\n                              this._collapsed.set(!this._collapsed());\n                              requestAnimationFrame(() => {\n                                this._animeInProgress.set(false);\n                                node.setAttribute('class', ``);\n                              });\n                            }\n                          });\n  }\n}\n","<article [class]=\"_styleClass()\">\n  <header (click)=\"toggleCollapse($event)\">\n    @if(icon()){\n      <inu-icon [icon]=\"icon()\" [size]=\"1.5\"></inu-icon>\n    }\n\n    <div class=\"inu-panel-title\">\n      @if(titleTemplate()){\n        <ng-container *ngTemplateOutlet=\"titleTemplate()\"></ng-container>\n      }\n      @else{\n        @if (title() || titleKey()) {\n          @if (titleKey()) {\n            <label>\n              <inu-label [key]=\"titleKey()\" [defaultValue]=\"title()!\"></inu-label>\n            </label>\n          } @else {\n            <label>{{ title()! }}</label>\n          }\n        }\n      }\n\n    </div>\n    @if(collapsible()){\n      <ul class=\"inu-panel-title-collapsible\">\n        <li>\n          <inu-button [icon]=\"_collapsed()?'chevron_down':'chevron_up'\"\n                      [disabled]=\"_animeInProgress()\"></inu-button>\n        </li>\n      </ul>\n    }\n  </header>\n  <main #main>\n    <div class=\"inu-panel-main\">\n      <ng-content/>\n    </div>\n  </main>\n  @if(footerTemplate()){\n    <footer>\n      <ng-container *ngTemplateOutlet=\"footerTemplate()\"></ng-container>\n    </footer>\n  }\n\n</article>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;MAqBa,QAAQ,CAAA;;;;AAKnB,IAAA,QAAQ,GAAM,KAAK,CAAS,GAAG,oDAAC;AAChC,IAAA,IAAI,GAAU,KAAK,CAAqB,SAAS,gDAAC;AAClD,IAAA,KAAK,GAAS,KAAK,CAAqB,SAAS,iDAAC;AAClD,IAAA,QAAQ,GAAM,KAAK,CAAqB,SAAS,oDAAC;AAClD,IAAA,UAAU,GAAI,KAAK,CAAqB,SAAS,sDAAC;AAClD,IAAA,WAAW,GAAG,KAAK,CAAU,IAAI,uDAAC;AAClC,IAAA,SAAS,GAAK,KAAK,CAAU,KAAK,qDAAC;;AAGnC,IAAA,QAAQ,GAA+B,MAAM,CAAC,0BAA0B,CAAC;AACzE,IAAA,IAAI,GAAmC,SAAS,CAA0B,MAAM,gDAAC;AACjF,IAAA,cAAc,GAAyB,QAAQ,CAAC,MAAM,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,0DAAC;AAC1F,IAAA,aAAa,GAA0B,QAAQ,CAAC,MAAM,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,yDAAC;;AAEzF,IAAA,WAAW,GAA4B,QAAQ,CAAS,MAAM;QAC5D,WAAW;AACX,QAAA,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE;QACvB,IAAI,CAAC,UAAU,EAAE,GAAG,qBAAqB,GAAG;AAC7C,KAAA,CAAC,IAAI,CAAC,GAAG,CAAC,uDAAC;AACZ,IAAA,gBAAgB,GAAuB,MAAM,CAAU,KAAK,4DAAC;AAC7D,IAAA,UAAU,GAA6B,MAAM,CAAU,KAAK,sDAAC;AAE7D,IAAA,WAAA,GAAA;QACE,MAAM,CAAC,MAAK;YACV,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;AACvC,QAAA,CAAC,CAAC;IACJ;;;;AAKU,IAAA,cAAc,CAAC,KAAmB,EAAA;QAC1C,KAAK,CAAC,eAAe,EAAE;QACvB,KAAK,CAAC,cAAc,EAAE;QACtB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,EAAE,aAAa;AAEvC,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,IAAI,EAAE;YAC3D;QACF;QACA,MAAM,YAAY,GAAK,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE;AACvD,QAAA,IAAI,CAAC,KAAK,CAAC,MAAM,GAAM,MAAM;QAC7B,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM;AACjD,QAAA,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,YAAY,CAAC;AAExC,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,EAAE;QACtC,MAAM,WAAW,GAAI,YAAY,GAAG,CAAC,GAAG,cAAc;QACtD,MAAM,SAAS,GAAM,YAAY,GAAG,cAAc,GAAG,CAAC;AACtD,QAAA,MAAM,KAAK,GAAU,SAAS,GAAG,WAAW;AAE5C,QAAA,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC;AAC/B,QAAA,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,CAAA,QAAA,CAAU,CAAC;QAEtC,GAAG,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,QAAgB,KAAI;YACnB,MAAM,qBAAqB,GAAG,WAAW,IAAI,KAAK,GAAG,QAAQ,CAAC;YAC9D,IAAI,CAAC,KAAK,CAAC,MAAM,GAAa,CAAA,EAAG,qBAAqB,IAAI;AAC5D,QAAA,CAAC,EACD;AACE,YAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE;AACzB,YAAA,KAAK,EAAK,GAAG,CAAC,SAAS,CAAC,KAAK,CAAC,YAAY;YAC1C,MAAM,EAAI,MAAK;gBACb,IAAI,YAAY,EAAE;AAChB,oBAAA,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC;gBACrC;qBAAO;AACL,oBAAA,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK;gBAC3B;gBACA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;gBACvC,qBAAqB,CAAC,MAAK;AACzB,oBAAA,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,KAAK,CAAC;AAChC,oBAAA,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,CAAA,CAAE,CAAC;AAChC,gBAAA,CAAC,CAAC;YACJ;AACD,SAAA,CAAC;IAC1B;uGA7EW,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,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,SAAA,EAJK,CAAC,0BAA0B,CAAC,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,MAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECjBtD,6pCA4CA,EAAA,MAAA,EAAA,CAAA,urCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDhCe,QAAQ,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,KAAA,EAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACR,SAAS,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,MAAA,EAAA,UAAA,EAAA,YAAA,EAAA,gBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACT,gBAAgB,oJAChB,OAAO,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,aAAA,EAAA,YAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAMT,QAAQ,EAAA,UAAA,EAAA,CAAA;kBAbpB,SAAS;+BACgB,WAAW,EAAA,UAAA,EACX,IAAI,EAAA,OAAA,EACJ;wBACX,QAAQ;wBACR,SAAS;wBACT,gBAAgB;wBAChB;qBACD,EAAA,SAAA,EACY,CAAC,0BAA0B,CAAC,EAAA,QAAA,EAAA,6pCAAA,EAAA,MAAA,EAAA,CAAA,urCAAA,CAAA,EAAA;0vBAmBsB,MAAM,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AEpClF;;AAEG;;;;"}

package/fesm2022/inugami-ng-components-inu-progress.mjs

@@ -0,0 +1,96 @@
+import * as i0 from '@angular/core';
+import { input, viewChild, computed, signal, effect, Component } from '@angular/core';
+import { SVG } from 'inugami-ng/services';
+
+class InuProgress {
+    //==================================================================================================================
+    // ATTRIBUTES
+    //==================================================================================================================
+    styleClass = input(undefined, ...(ngDevMode ? [{ debugName: "styleClass" }] : []));
+    value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
+    max = input(1, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    unit = input('%', ...(ngDevMode ? [{ debugName: "unit" }] : []));
+    showValue = input(true, ...(ngDevMode ? [{ debugName: "showValue" }] : []));
+    nbDigit = input(2, ...(ngDevMode ? [{ debugName: "nbDigit" }] : []));
+    //
+    main = viewChild('cursor', ...(ngDevMode ? [{ debugName: "main" }] : []));
+    //
+    _node = computed(() => this.main()?.nativeElement, ...(ngDevMode ? [{ debugName: "_node" }] : []));
+    _percentage = signal(0, ...(ngDevMode ? [{ debugName: "_percentage" }] : []));
+    _previousValue = signal(undefined, ...(ngDevMode ? [{ debugName: "_previousValue" }] : []));
+    _styleClass = computed(() => [
+        'inu-progress',
+        this.styleClass() ?? ''
+    ].join(' '), ...(ngDevMode ? [{ debugName: "_styleClass" }] : []));
+    _value = signal('', ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    _animatedPercentage = signal(0, ...(ngDevMode ? [{ debugName: "_animatedPercentage" }] : []));
+    currentAnimationId = 0;
+    constructor() {
+        this.updateValue();
+        effect(() => this.updateValue());
+    }
+    //==================================================================================================================
+    // ACTIONS
+    //==================================================================================================================
+    updateValue() {
+        let current = this.value() ?? 0;
+        const minimum = this.min() ?? 0;
+        const maximum = this.max() ?? 1;
+        const node = this._node();
+        if (!node || minimum >= maximum) {
+            return;
+        }
+        if (current > maximum)
+            current = maximum;
+        if (current < minimum)
+            current = minimum;
+        const clampedRatio = Math.max(0, Math.min(1, (current - minimum) / (maximum - minimum)));
+        const targetPct = clampedRatio * 100;
+        const hasPrevious = this._previousValue() !== undefined;
+        const startPct = hasPrevious ? this._animatedPercentage() : targetPct;
+        const deltaPct = targetPct - startPct;
+        this._percentage.set(targetPct);
+        this._previousValue.set(current);
+        this._value.set(targetPct.toFixed(this.nbDigit()));
+        if (!hasPrevious || deltaPct === 0) {
+            this._animatedPercentage.set(targetPct);
+            node.style.transform = `scaleX(${clampedRatio})`;
+            return;
+        }
+        this.currentAnimationId++;
+        const animationId = this.currentAnimationId;
+        SVG.ANIMATION.animate((progress) => {
+            if (animationId !== this.currentAnimationId) {
+                return;
+            }
+            const currentPct = startPct + (deltaPct * progress);
+            const currentRatio = currentPct / 100;
+            this._animatedPercentage.set(currentPct);
+            node.style.transform = `scaleX(${currentRatio})`;
+        }, {
+            duration: 300,
+            timer: SVG.ANIMATION.TYPES.easeOutCubic,
+            onDone: () => {
+                if (animationId !== this.currentAnimationId) {
+                    return;
+                }
+                this._animatedPercentage.set(targetPct);
+                node.style.transform = `scaleX(${clampedRatio})`;
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InuProgress, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: InuProgress, isStandalone: true, selector: "inu-progress", inputs: { styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, nbDigit: { classPropertyName: "nbDigit", publicName: "nbDigit", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "main", first: true, predicate: ["cursor"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"_styleClass()\">\n  <div class=\"inu-progress-cursor\" #cursor></div>\n  @if(showValue()){\n    <div class=\"inu-progress-value-grp text-under\">\n      <div class=\"inu-progress-value\">{{ _value() }}</div>\n      <div class=\"inu-progress-unit\">{{ unit() }}</div>\n    </div>\n  }\n\n  @if(showValue()){\n    <div class=\"inu-progress-value-grp text-over\" [style.--progress-pct.%]=\"_percentage()\">\n      <div class=\"inu-progress-value\">{{ _value() }}</div>\n      <div class=\"inu-progress-unit\">{{ unit() }}</div>\n    </div>\n  }\n</div>\n", styles: [".inu-progress{position:relative;width:100%;height:1.5rem;background-color:var(--neutral-light);border-radius:.25rem;overflow:hidden}.inu-progress .inu-progress-cursor{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--secondary);transform-origin:left;will-change:transform}.inu-progress .inu-progress-value-grp{position:absolute;inset:0;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:.25rem;width:100%;height:100%;font-weight:700;font-size:.85rem;pointer-events:none}.inu-progress .inu-progress-value-grp.text-under{z-index:1;color:var(--secondary)}.inu-progress .inu-progress-value-grp.text-over{z-index:2;color:var(--neutral-light-extra-plus);clip-path:inset(0 calc(100% - var(--progress-pct, 0%)) 0 0);will-change:clip-path}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InuProgress, decorators: [{
+            type: Component,
+            args: [{ selector: 'inu-progress', standalone: true, imports: [], template: "<div [class]=\"_styleClass()\">\n  <div class=\"inu-progress-cursor\" #cursor></div>\n  @if(showValue()){\n    <div class=\"inu-progress-value-grp text-under\">\n      <div class=\"inu-progress-value\">{{ _value() }}</div>\n      <div class=\"inu-progress-unit\">{{ unit() }}</div>\n    </div>\n  }\n\n  @if(showValue()){\n    <div class=\"inu-progress-value-grp text-over\" [style.--progress-pct.%]=\"_percentage()\">\n      <div class=\"inu-progress-value\">{{ _value() }}</div>\n      <div class=\"inu-progress-unit\">{{ unit() }}</div>\n    </div>\n  }\n</div>\n", styles: [".inu-progress{position:relative;width:100%;height:1.5rem;background-color:var(--neutral-light);border-radius:.25rem;overflow:hidden}.inu-progress .inu-progress-cursor{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--secondary);transform-origin:left;will-change:transform}.inu-progress .inu-progress-value-grp{position:absolute;inset:0;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:.25rem;width:100%;height:100%;font-weight:700;font-size:.85rem;pointer-events:none}.inu-progress .inu-progress-value-grp.text-under{z-index:1;color:var(--secondary)}.inu-progress .inu-progress-value-grp.text-over{z-index:2;color:var(--neutral-light-extra-plus);clip-path:inset(0 calc(100% - var(--progress-pct, 0%)) 0 0);will-change:clip-path}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], nbDigit: [{ type: i0.Input, args: [{ isSignal: true, alias: "nbDigit", required: false }] }], main: [{ type: i0.ViewChild, args: ['cursor', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { InuProgress };
+//# sourceMappingURL=inugami-ng-components-inu-progress.mjs.map

package/fesm2022/inugami-ng-components-inu-progress.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"inugami-ng-components-inu-progress.mjs","sources":["../../../projects/inugami-ng/components/inu-progress/inu-progress.ts","../../../projects/inugami-ng/components/inu-progress/inu-progress.html","../../../projects/inugami-ng/components/inu-progress/inugami-ng-components-inu-progress.ts"],"sourcesContent":["import {Component, computed, effect, ElementRef, input, signal, viewChild} from '@angular/core';\nimport {SVG} from 'inugami-ng/services'\n\n@Component({\n             selector   : 'inu-progress',\n             standalone : true,\n             imports    : [],\n             templateUrl: './inu-progress.html',\n             styleUrl   : './inu-progress.scss',\n           })\nexport class InuProgress {\n\n  //==================================================================================================================\n  // ATTRIBUTES\n  //==================================================================================================================\n  styleClass = input<string | undefined>(undefined);\n  value      = input<number>(0);\n  min        = input<number>(0);\n  max        = input<number>(1);\n  unit       = input<string>('%');\n  showValue  = input<boolean>(true);\n  nbDigit    = input<number>(2);\n\n  //\n  main = viewChild<ElementRef<HTMLElement>>('cursor');\n\n  //\n  _node          = computed(() => this.main()?.nativeElement);\n  _percentage    = signal<number>(0);\n  _previousValue = signal<number | undefined>(undefined);\n  _styleClass    = computed<string>(() => [\n    'inu-progress',\n    this.styleClass() ?? ''\n  ].join(' '));\n\n  _value                     = signal<string>('');\n  _animatedPercentage        = signal<number>(0);\n  currentAnimationId: number = 0;\n\n  constructor() {\n    this.updateValue();\n    effect(() => this.updateValue());\n  }\n\n  //==================================================================================================================\n  // ACTIONS\n  //==================================================================================================================\n  private updateValue() {\n    let current   = this.value() ?? 0;\n    const minimum = this.min() ?? 0;\n    const maximum = this.max() ?? 1;\n    const node    = this._node();\n\n    if (!node || minimum >= maximum) {\n      return;\n    }\n\n    if (current > maximum) current = maximum;\n    if (current < minimum) current = minimum;\n\n    const clampedRatio = Math.max(0, Math.min(1, (current - minimum) / (maximum - minimum)));\n    const targetPct    = clampedRatio * 100;\n    const hasPrevious  = this._previousValue() !== undefined;\n    const startPct     = hasPrevious ? this._animatedPercentage() : targetPct;\n    const deltaPct     = targetPct - startPct;\n\n    this._percentage.set(targetPct);\n    this._previousValue.set(current);\n    this._value.set(targetPct.toFixed(this.nbDigit()));\n\n    if (!hasPrevious || deltaPct === 0) {\n      this._animatedPercentage.set(targetPct);\n      node.style.transform = `scaleX(${clampedRatio})`;\n      return;\n    }\n\n    this.currentAnimationId++;\n    const animationId = this.currentAnimationId;\n\n    SVG.ANIMATION.animate(\n      (progress: number) => {\n        if (animationId !== this.currentAnimationId) {\n          return;\n        }\n\n        const currentPct   = startPct + (deltaPct * progress);\n        const currentRatio = currentPct / 100;\n\n        this._animatedPercentage.set(currentPct);\n        node.style.transform = `scaleX(${currentRatio})`;\n      },\n      {\n        duration: 300,\n        timer   : SVG.ANIMATION.TYPES.easeOutCubic,\n        onDone  : () => {\n          if (animationId !== this.currentAnimationId) {\n            return;\n          }\n\n          this._animatedPercentage.set(targetPct);\n          node.style.transform = `scaleX(${clampedRatio})`;\n        }\n      }\n    );\n  }\n}\n","<div [class]=\"_styleClass()\">\n  <div class=\"inu-progress-cursor\" #cursor></div>\n  @if(showValue()){\n    <div class=\"inu-progress-value-grp text-under\">\n      <div class=\"inu-progress-value\">{{ _value() }}</div>\n      <div class=\"inu-progress-unit\">{{ unit() }}</div>\n    </div>\n  }\n\n  @if(showValue()){\n    <div class=\"inu-progress-value-grp text-over\" [style.--progress-pct.%]=\"_percentage()\">\n      <div class=\"inu-progress-value\">{{ _value() }}</div>\n      <div class=\"inu-progress-unit\">{{ unit() }}</div>\n    </div>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}