inugami-ng 0.0.12 → 0.0.14

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, Component } from '@angular/core';
+import { input, computed, signal, effect, Component } from '@angular/core';
 import { InuIcon } from 'inugami-icons';
 
 class InuButton {
@@ -8,9 +8,16 @@ class InuButton {
     //==================================================================================================================
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    iconSize = input(1.2, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
     type = input('', ...(ngDevMode ? [{ debugName: "type" }] : []));
     link = input(false, ...(ngDevMode ? [{ debugName: "link" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    processing = input(false, ...(ngDevMode ? [{ debugName: "processing" }] : []));
+    processingIcon = input(null, ...(ngDevMode ? [{ debugName: "processingIcon" }] : []));
+    _processIcon = computed(() => {
+        const result = this.processingIcon();
+        return result ? result : this.icon();
+    }, ...(ngDevMode ? [{ debugName: "_processIcon" }] : []));
     _styleClass = computed(() => {
         return [
             'inu-button',
@@ -19,13 +26,28 @@ class InuButton {
             this.disabled() ? 'disabled' : ''
         ].join(' ');
     }, ...(ngDevMode ? [{ debugName: "_styleClass" }] : []));
+    iconStyleClass = signal('inu-button-icon', ...(ngDevMode ? [{ debugName: "iconStyleClass" }] : []));
+    constructor() {
+        effect(() => {
+            this.iconStyleClass.set(this.computeIconStyleClass());
+        });
+    }
+    ngAfterViewInit() {
+        this.iconStyleClass.set(this.computeIconStyleClass());
+    }
+    computeIconStyleClass() {
+        return [
+            'inu-button-icon',
+            this.processing() ? 'rotate' : ''
+        ].join(' ');
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InuButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: InuButton, isStandalone: true, selector: "inu-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if(link()){\n  <span [class]=\"_styleClass()\">\n\n      @if(icon()){\n        <span class=\"inu-button-icon\">\n          <inu-icon [icon]=\"icon()\" [size]=\"1\"></inu-icon>\n        </span>\n      }\n\n    <span class=\"inu-button-label\">\n      @if(label()){\n        {{label()}}\n      }\n    </span>\n  </span>\n}\n@else{\n  <button [class]=\"_styleClass()\" [disabled]=\"disabled()\">\n\n      @if(icon()){\n        <span class=\"inu-button-icon\">\n          <inu-icon [icon]=\"icon()\" [size]=\"1\"></inu-icon>\n        </span>\n      }\n\n    <span class=\"inu-button-label\">\n      @if(label()){\n        {{label()}}\n      }\n    </span>\n  </button>\n}\n", styles: [".inu-button{display:flex;gap:.5rem;justify-content:space-around;align-items:center;padding:.125rem .25rem;background-color:var(--neutral-light-extra);border:1px solid var(--neutral);-webkit-box-shadow:0px 0px .25rem 0px rgba(0,0,0,0);box-shadow:0 0 .25rem #0000}.inu-button inu-icon{display:flex;align-items:center}.inu-button inu-icon ::ng-deep .inu-icon{display:flex;align-items:center}.inu-button inu-icon ::ng-deep .inu-icon .inu-icon-content{display:flex;align-items:center}.inu-button inu-icon ::ng-deep .inu-icon .inu-icon-content svg{display:flex;align-items:center}.inu-button .inu-button-icon{width:1.25rem}.inu-button .inu-button-label{flex:1}.inu-button:hover{border-color:var(--neutral);-webkit-box-shadow:0px 0px .25rem 0px var(--neutral);box-shadow:0 0 .25rem 0 var(--neutral)}.inu-button.secondary{background-color:var(--secondary-light-extra);border-color:var(--secondary-light);color:var(--text-color)}.inu-button.secondary:hover{border-color:var(--secondary);-webkit-box-shadow:0px 0px .25rem 0px var(--secondary);box-shadow:0 0 .25rem 0 var(--secondary)}.inu-button.primary,.inu-button.success{background-color:var(--success-light-extra);border-color:var(--success-light);color:var(--text-color)}.inu-button.primary:hover,.inu-button.success:hover{border-color:var(--success);-webkit-box-shadow:0px 0px .25rem 0px var(--success);box-shadow:0 0 .25rem 0 var(--success)}.inu-button.warn{background-color:var(--warning-light-extra);border-color:var(--warning-light);color:var(--text-color)}.inu-button.warn:hover{border-color:var(--warning);-webkit-box-shadow:0px 0px .25rem 0px var(--warning);box-shadow:0 0 .25rem 0 var(--warning)}.inu-button.danger,.inu-button.error{background-color:var(--danger-light-extra);border-color:var(--danger-light);color:var(--text-color)}.inu-button.danger:hover,.inu-button.error:hover{border-color:var(--danger);-webkit-box-shadow:0px 0px .25rem 0px var(--danger);box-shadow:0 0 .25rem 0 var(--danger)}.inu-button.disabled{background-color:var(--neutral-light-extra);border:1px solid var(--neutral);-webkit-box-shadow:0px 0px .25rem 0px rgba(0,0,0,0);box-shadow:0 0 .25rem #0000;color:var(--neutral);fill:var(--neutral)}.inu-button.disabled:hover{border:1px solid var(--neutral);-webkit-box-shadow:0px 0px .25rem 0px rgba(0,0,0,0);box-shadow:0 0 .25rem #0000}.inu-button.link{border-top:none;border-left:none;border-right:none;background-color:transparent;box-shadow:0 0 .25rem 0 transparent!important}.inu-button.link:hover{background:linear-gradient(to bottom,transparent 95%,var(--neutral) 100%)}\n"], dependencies: [{ kind: "component", type: InuIcon, selector: "inu-icon", inputs: ["icon", "defaultIcon", "styleclass", "size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: InuButton, isStandalone: true, selector: "inu-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, processing: { classPropertyName: "processing", publicName: "processing", isSignal: true, isRequired: false, transformFunction: null }, processingIcon: { classPropertyName: "processingIcon", publicName: "processingIcon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (link()) {\n  <span [class]=\"_styleClass()\">\n\n      @if (icon()) {\n        <span [class]=\"iconStyleClass()\" [style.width]=\"`${iconSize()}rem`\" [style.height]=\"`${iconSize()}rem`\">\n          <inu-icon [icon]=\"processing()?_processIcon() : icon()\" [size]=\"1\"></inu-icon>\n        </span>\n      }\n\n    <span class=\"inu-button-label\">\n      @if (label()) {\n        {{ label() }}\n      }\n    </span>\n  </span>\n} @else {\n  <button [class]=\"_styleClass()\" [disabled]=\"disabled()\">\n\n    @if (icon()) {\n      <span [class]=\"iconStyleClass()\"  [style.width]=\"`${iconSize()}rem`\" [style.height]=\"`${iconSize()}rem`\">\n          <inu-icon [icon]=\"processing()?_processIcon() : icon()\" [size]=\"iconSize()\"></inu-icon>\n      </span>\n    }\n\n    <span class=\"inu-button-label\">\n      @if (label()) {\n        {{ label() }}\n      }\n    </span>\n  </button>\n}\n", styles: [".inu-button{display:flex;gap:.5rem;justify-content:space-around;align-items:center;padding:.25rem .5rem;background-color:var(--neutral-light-extra);border:1px solid var(--neutral);-webkit-box-shadow:0px 0px .25rem 0px rgba(0,0,0,0);box-shadow:0 0 .25rem #0000}.inu-button inu-icon{display:flex;align-items:center}.inu-button inu-icon ::ng-deep .inu-icon{display:flex;align-items:center}.inu-button inu-icon ::ng-deep .inu-icon .inu-icon-content{display:flex;align-items:center}.inu-button inu-icon ::ng-deep .inu-icon .inu-icon-content svg{display:flex;align-items:center}.inu-button .inu-button-icon{width:1.25rem;height:1.25rem}.inu-button .inu-button-label{flex:1}.inu-button:hover{border-color:var(--neutral);-webkit-box-shadow:0px 0px .25rem 0px var(--neutral);box-shadow:0 0 .25rem 0 var(--neutral)}.inu-button.secondary{background-color:var(--secondary-light-extra);border-color:var(--secondary-light);color:var(--text-color)}.inu-button.secondary:hover{border-color:var(--secondary);-webkit-box-shadow:0px 0px .25rem 0px var(--secondary);box-shadow:0 0 .25rem 0 var(--secondary)}.inu-button.primary,.inu-button.success{background-color:var(--success-light-extra);border-color:var(--success-light);color:var(--text-color)}.inu-button.primary:hover,.inu-button.success:hover{border-color:var(--success);-webkit-box-shadow:0px 0px .25rem 0px var(--success);box-shadow:0 0 .25rem 0 var(--success)}.inu-button.warn{background-color:var(--warning-light-extra);border-color:var(--warning-light);color:var(--text-color)}.inu-button.warn:hover{border-color:var(--warning);-webkit-box-shadow:0px 0px .25rem 0px var(--warning);box-shadow:0 0 .25rem 0 var(--warning)}.inu-button.danger,.inu-button.error{background-color:var(--danger-light-extra);border-color:var(--danger-light);color:var(--text-color)}.inu-button.danger:hover,.inu-button.error:hover{border-color:var(--danger);-webkit-box-shadow:0px 0px .25rem 0px var(--danger);box-shadow:0 0 .25rem 0 var(--danger)}.inu-button.disabled{background-color:var(--neutral-light-extra);border:1px solid var(--neutral);-webkit-box-shadow:0px 0px .25rem 0px rgba(0,0,0,0);box-shadow:0 0 .25rem #0000;color:var(--neutral);fill:var(--neutral)}.inu-button.disabled:hover{border:1px solid var(--neutral);-webkit-box-shadow:0px 0px .25rem 0px rgba(0,0,0,0);box-shadow:0 0 .25rem #0000}.inu-button.link{border-top:none;border-left:none;border-right:none;background-color:transparent;box-shadow:0 0 .25rem 0 transparent!important}.inu-button.link:hover{background:linear-gradient(to bottom,transparent 95%,var(--neutral) 100%)}\n"], dependencies: [{ 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: InuButton, decorators: [{
             type: Component,
-            args: [{ selector: 'inu-button', standalone: true, imports: [InuIcon], template: "@if(link()){\n  <span [class]=\"_styleClass()\">\n\n      @if(icon()){\n        <span class=\"inu-button-icon\">\n          <inu-icon [icon]=\"icon()\" [size]=\"1\"></inu-icon>\n        </span>\n      }\n\n    <span class=\"inu-button-label\">\n      @if(label()){\n        {{label()}}\n      }\n    </span>\n  </span>\n}\n@else{\n  <button [class]=\"_styleClass()\" [disabled]=\"disabled()\">\n\n      @if(icon()){\n        <span class=\"inu-button-icon\">\n          <inu-icon [icon]=\"icon()\" [size]=\"1\"></inu-icon>\n        </span>\n      }\n\n    <span class=\"inu-button-label\">\n      @if(label()){\n        {{label()}}\n      }\n    </span>\n  </button>\n}\n", styles: [".inu-button{display:flex;gap:.5rem;justify-content:space-around;align-items:center;padding:.125rem .25rem;background-color:var(--neutral-light-extra);border:1px solid var(--neutral);-webkit-box-shadow:0px 0px .25rem 0px rgba(0,0,0,0);box-shadow:0 0 .25rem #0000}.inu-button inu-icon{display:flex;align-items:center}.inu-button inu-icon ::ng-deep .inu-icon{display:flex;align-items:center}.inu-button inu-icon ::ng-deep .inu-icon .inu-icon-content{display:flex;align-items:center}.inu-button inu-icon ::ng-deep .inu-icon .inu-icon-content svg{display:flex;align-items:center}.inu-button .inu-button-icon{width:1.25rem}.inu-button .inu-button-label{flex:1}.inu-button:hover{border-color:var(--neutral);-webkit-box-shadow:0px 0px .25rem 0px var(--neutral);box-shadow:0 0 .25rem 0 var(--neutral)}.inu-button.secondary{background-color:var(--secondary-light-extra);border-color:var(--secondary-light);color:var(--text-color)}.inu-button.secondary:hover{border-color:var(--secondary);-webkit-box-shadow:0px 0px .25rem 0px var(--secondary);box-shadow:0 0 .25rem 0 var(--secondary)}.inu-button.primary,.inu-button.success{background-color:var(--success-light-extra);border-color:var(--success-light);color:var(--text-color)}.inu-button.primary:hover,.inu-button.success:hover{border-color:var(--success);-webkit-box-shadow:0px 0px .25rem 0px var(--success);box-shadow:0 0 .25rem 0 var(--success)}.inu-button.warn{background-color:var(--warning-light-extra);border-color:var(--warning-light);color:var(--text-color)}.inu-button.warn:hover{border-color:var(--warning);-webkit-box-shadow:0px 0px .25rem 0px var(--warning);box-shadow:0 0 .25rem 0 var(--warning)}.inu-button.danger,.inu-button.error{background-color:var(--danger-light-extra);border-color:var(--danger-light);color:var(--text-color)}.inu-button.danger:hover,.inu-button.error:hover{border-color:var(--danger);-webkit-box-shadow:0px 0px .25rem 0px var(--danger);box-shadow:0 0 .25rem 0 var(--danger)}.inu-button.disabled{background-color:var(--neutral-light-extra);border:1px solid var(--neutral);-webkit-box-shadow:0px 0px .25rem 0px rgba(0,0,0,0);box-shadow:0 0 .25rem #0000;color:var(--neutral);fill:var(--neutral)}.inu-button.disabled:hover{border:1px solid var(--neutral);-webkit-box-shadow:0px 0px .25rem 0px rgba(0,0,0,0);box-shadow:0 0 .25rem #0000}.inu-button.link{border-top:none;border-left:none;border-right:none;background-color:transparent;box-shadow:0 0 .25rem 0 transparent!important}.inu-button.link:hover{background:linear-gradient(to bottom,transparent 95%,var(--neutral) 100%)}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+            args: [{ selector: 'inu-button', standalone: true, imports: [InuIcon], template: "@if (link()) {\n  <span [class]=\"_styleClass()\">\n\n      @if (icon()) {\n        <span [class]=\"iconStyleClass()\" [style.width]=\"`${iconSize()}rem`\" [style.height]=\"`${iconSize()}rem`\">\n          <inu-icon [icon]=\"processing()?_processIcon() : icon()\" [size]=\"1\"></inu-icon>\n        </span>\n      }\n\n    <span class=\"inu-button-label\">\n      @if (label()) {\n        {{ label() }}\n      }\n    </span>\n  </span>\n} @else {\n  <button [class]=\"_styleClass()\" [disabled]=\"disabled()\">\n\n    @if (icon()) {\n      <span [class]=\"iconStyleClass()\"  [style.width]=\"`${iconSize()}rem`\" [style.height]=\"`${iconSize()}rem`\">\n          <inu-icon [icon]=\"processing()?_processIcon() : icon()\" [size]=\"iconSize()\"></inu-icon>\n      </span>\n    }\n\n    <span class=\"inu-button-label\">\n      @if (label()) {\n        {{ label() }}\n      }\n    </span>\n  </button>\n}\n", styles: [".inu-button{display:flex;gap:.5rem;justify-content:space-around;align-items:center;padding:.25rem .5rem;background-color:var(--neutral-light-extra);border:1px solid var(--neutral);-webkit-box-shadow:0px 0px .25rem 0px rgba(0,0,0,0);box-shadow:0 0 .25rem #0000}.inu-button inu-icon{display:flex;align-items:center}.inu-button inu-icon ::ng-deep .inu-icon{display:flex;align-items:center}.inu-button inu-icon ::ng-deep .inu-icon .inu-icon-content{display:flex;align-items:center}.inu-button inu-icon ::ng-deep .inu-icon .inu-icon-content svg{display:flex;align-items:center}.inu-button .inu-button-icon{width:1.25rem;height:1.25rem}.inu-button .inu-button-label{flex:1}.inu-button:hover{border-color:var(--neutral);-webkit-box-shadow:0px 0px .25rem 0px var(--neutral);box-shadow:0 0 .25rem 0 var(--neutral)}.inu-button.secondary{background-color:var(--secondary-light-extra);border-color:var(--secondary-light);color:var(--text-color)}.inu-button.secondary:hover{border-color:var(--secondary);-webkit-box-shadow:0px 0px .25rem 0px var(--secondary);box-shadow:0 0 .25rem 0 var(--secondary)}.inu-button.primary,.inu-button.success{background-color:var(--success-light-extra);border-color:var(--success-light);color:var(--text-color)}.inu-button.primary:hover,.inu-button.success:hover{border-color:var(--success);-webkit-box-shadow:0px 0px .25rem 0px var(--success);box-shadow:0 0 .25rem 0 var(--success)}.inu-button.warn{background-color:var(--warning-light-extra);border-color:var(--warning-light);color:var(--text-color)}.inu-button.warn:hover{border-color:var(--warning);-webkit-box-shadow:0px 0px .25rem 0px var(--warning);box-shadow:0 0 .25rem 0 var(--warning)}.inu-button.danger,.inu-button.error{background-color:var(--danger-light-extra);border-color:var(--danger-light);color:var(--text-color)}.inu-button.danger:hover,.inu-button.error:hover{border-color:var(--danger);-webkit-box-shadow:0px 0px .25rem 0px var(--danger);box-shadow:0 0 .25rem 0 var(--danger)}.inu-button.disabled{background-color:var(--neutral-light-extra);border:1px solid var(--neutral);-webkit-box-shadow:0px 0px .25rem 0px rgba(0,0,0,0);box-shadow:0 0 .25rem #0000;color:var(--neutral);fill:var(--neutral)}.inu-button.disabled:hover{border:1px solid var(--neutral);-webkit-box-shadow:0px 0px .25rem 0px rgba(0,0,0,0);box-shadow:0 0 .25rem #0000}.inu-button.link{border-top:none;border-left:none;border-right:none;background-color:transparent;box-shadow:0 0 .25rem 0 transparent!important}.inu-button.link:hover{background:linear-gradient(to bottom,transparent 95%,var(--neutral) 100%)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], processing: [{ type: i0.Input, args: [{ isSignal: true, alias: "processing", required: false }] }], processingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "processingIcon", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1 +1 @@
-{"version":3,"file":"inugami-ng-components-inu-button.mjs","sources":["../../../projects/inugami-ng/components/inu-button/inu-button.component.ts","../../../projects/inugami-ng/components/inu-button/inu-button.component.html","../../../projects/inugami-ng/components/inu-button/inugami-ng-components-inu-button.ts"],"sourcesContent":["import {Component, computed, input} from '@angular/core';\nimport {InuIcon} from 'inugami-icons';\n\n@Component({\n  selector: 'inu-button',\n  standalone: true,\n  imports: [InuIcon],\n  templateUrl: './inu-button.component.html',\n  styleUrl: './inu-button.component.scss',\n})\nexport class InuButton {\n\n  //==================================================================================================================\n  // ATTRIBUTES\n  //==================================================================================================================\n  label = input<string | undefined | null>('');\n  icon = input<string | null>(null);\n  type = input<string>('');\n  link = input<boolean>(false);\n  disabled = input<boolean>(false);\n\n  _styleClass = computed<string>(() => {\n    return [\n      'inu-button',\n      this.type() ? this.type() : '',\n      this.link() ? 'link' : '',\n      this.disabled()? 'disabled' : ''\n    ].join(' ');\n  })\n\n}\n","@if(link()){\n  <span [class]=\"_styleClass()\">\n\n      @if(icon()){\n        <span class=\"inu-button-icon\">\n          <inu-icon [icon]=\"icon()\" [size]=\"1\"></inu-icon>\n        </span>\n      }\n\n    <span class=\"inu-button-label\">\n      @if(label()){\n        {{label()}}\n      }\n    </span>\n  </span>\n}\n@else{\n  <button [class]=\"_styleClass()\" [disabled]=\"disabled()\">\n\n      @if(icon()){\n        <span class=\"inu-button-icon\">\n          <inu-icon [icon]=\"icon()\" [size]=\"1\"></inu-icon>\n        </span>\n      }\n\n    <span class=\"inu-button-label\">\n      @if(label()){\n        {{label()}}\n      }\n    </span>\n  </button>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAUa,SAAS,CAAA;;;;AAKpB,IAAA,KAAK,GAAG,KAAK,CAA4B,EAAE,iDAAC;AAC5C,IAAA,IAAI,GAAG,KAAK,CAAgB,IAAI,gDAAC;AACjC,IAAA,IAAI,GAAG,KAAK,CAAS,EAAE,gDAAC;AACxB,IAAA,IAAI,GAAG,KAAK,CAAU,KAAK,gDAAC;AAC5B,IAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,oDAAC;AAEhC,IAAA,WAAW,GAAG,QAAQ,CAAS,MAAK;QAClC,OAAO;YACL,YAAY;AACZ,YAAA,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE;YAC9B,IAAI,CAAC,IAAI,EAAE,GAAG,MAAM,GAAG,EAAE;YACzB,IAAI,CAAC,QAAQ,EAAE,GAAE,UAAU,GAAG;AAC/B,SAAA,CAAC,IAAI,CAAC,GAAG,CAAC;AACb,IAAA,CAAC,uDAAC;uGAlBS,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAT,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,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,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,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,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,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,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECVtB,gqBAgCA,EAAA,MAAA,EAAA,CAAA,0/EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED1BY,OAAO,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,aAAA,EAAA,YAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAIN,SAAS,EAAA,UAAA,EAAA,CAAA;kBAPrB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,EAAA,UAAA,EACV,IAAI,EAAA,OAAA,EACP,CAAC,OAAO,CAAC,EAAA,QAAA,EAAA,gqBAAA,EAAA,MAAA,EAAA,CAAA,0/EAAA,CAAA,EAAA;;;AENpB;;AAEG;;;;"}
+{"version":3,"file":"inugami-ng-components-inu-button.mjs","sources":["../../../projects/inugami-ng/components/inu-button/inu-button.component.ts","../../../projects/inugami-ng/components/inu-button/inu-button.component.html","../../../projects/inugami-ng/components/inu-button/inugami-ng-components-inu-button.ts"],"sourcesContent":["import {AfterViewInit, Component, computed, effect, input, signal} from '@angular/core';\nimport {InuIcon} from 'inugami-icons';\nimport {NgClass} from '@angular/common';\n\n@Component({\n  selector: 'inu-button',\n  standalone: true,\n  imports: [InuIcon],\n  templateUrl: './inu-button.component.html',\n  styleUrl: './inu-button.component.scss',\n})\nexport class InuButton implements AfterViewInit{\n\n  //==================================================================================================================\n  // ATTRIBUTES\n  //==================================================================================================================\n  label = input<string | undefined | null>('');\n  icon = input<string | null>(null);\n  iconSize = input<number>(1.2);\n  type = input<string>('');\n  link = input<boolean>(false);\n  disabled = input<boolean>(false);\n  processing = input<boolean>(false);\n  processingIcon = input<string | null>(null);\n\n  _processIcon = computed<string|null>(()=>{\n    const result = this.processingIcon();\n    return result?result: this.icon();\n  } )\n  _styleClass = computed<string>(() => {\n    return [\n      'inu-button',\n      this.type() ? this.type() : '',\n      this.link() ? 'link' : '',\n      this.disabled()? 'disabled' : ''\n    ].join(' ');\n  })\n\n  iconStyleClass = signal<string>('inu-button-icon');\n\n  constructor() {\n    effect(() => {\n     this.iconStyleClass.set(this.computeIconStyleClass());\n    });\n  }\n  ngAfterViewInit(): void {\n    this.iconStyleClass.set(this.computeIconStyleClass());\n  }\n\n  computeIconStyleClass(){\n    return [\n      'inu-button-icon',\n      this.processing() ? 'rotate' : ''\n    ].join(' ');\n  }\n\n\n\n}\n","@if (link()) {\n  <span [class]=\"_styleClass()\">\n\n      @if (icon()) {\n        <span [class]=\"iconStyleClass()\" [style.width]=\"`${iconSize()}rem`\" [style.height]=\"`${iconSize()}rem`\">\n          <inu-icon [icon]=\"processing()?_processIcon() : icon()\" [size]=\"1\"></inu-icon>\n        </span>\n      }\n\n    <span class=\"inu-button-label\">\n      @if (label()) {\n        {{ label() }}\n      }\n    </span>\n  </span>\n} @else {\n  <button [class]=\"_styleClass()\" [disabled]=\"disabled()\">\n\n    @if (icon()) {\n      <span [class]=\"iconStyleClass()\"  [style.width]=\"`${iconSize()}rem`\" [style.height]=\"`${iconSize()}rem`\">\n          <inu-icon [icon]=\"processing()?_processIcon() : icon()\" [size]=\"iconSize()\"></inu-icon>\n      </span>\n    }\n\n    <span class=\"inu-button-label\">\n      @if (label()) {\n        {{ label() }}\n      }\n    </span>\n  </button>\n}\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-copy.mjs

@@ -64,7 +64,7 @@ class InuCopy {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InuCopy, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: InuCopy, isStandalone: true, selector: "inu-copy", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, notificationLabel: { classPropertyName: "notificationLabel", publicName: "notificationLabel", isSignal: true, isRequired: false, transformFunction: null }, notificationMessage: { classPropertyName: "notificationMessage", publicName: "notificationMessage", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconNotification: { classPropertyName: "iconNotification", publicName: "iconNotification", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, styleclass: { classPropertyName: "styleclass", publicName: "styleclass", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"_styleClass()\">\n  <inu-button [label]=\"label()\"\n              [icon]=\"icon()\"\n              [type]=\"type()\"\n              [link]=\"link()\"\n              [disabled]=\"!content()\"\n              (click)=\"copyContent()\"\n  ></inu-button>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: InuButton, selector: "inu-button", inputs: ["label", "icon", "type", "link", "disabled"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: InuCopy, isStandalone: true, selector: "inu-copy", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, notificationLabel: { classPropertyName: "notificationLabel", publicName: "notificationLabel", isSignal: true, isRequired: false, transformFunction: null }, notificationMessage: { classPropertyName: "notificationMessage", publicName: "notificationMessage", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconNotification: { classPropertyName: "iconNotification", publicName: "iconNotification", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, styleclass: { classPropertyName: "styleclass", publicName: "styleclass", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"_styleClass()\">\n  <inu-button [label]=\"label()\"\n              [icon]=\"icon()\"\n              [type]=\"type()\"\n              [link]=\"link()\"\n              [disabled]=\"!content()\"\n              (click)=\"copyContent()\"\n  ></inu-button>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: InuButton, selector: "inu-button", inputs: ["label", "icon", "iconSize", "type", "link", "disabled", "processing", "processingIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InuCopy, decorators: [{
             type: Component,

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

@@ -1 +1 @@
-{"version":3,"file":"inugami-ng-components-inu-copy.mjs","sources":["../../../projects/inugami-ng/components/inu-copy/inu-copy.service.ts","../../../projects/inugami-ng/components/inu-copy/inu-copy.component.ts","../../../projects/inugami-ng/components/inu-copy/inu-copy.component.html","../../../projects/inugami-ng/components/inu-copy/inugami-ng-components-inu-copy.ts"],"sourcesContent":["import {Injectable} from '@angular/core';\nimport {from, Observable} from 'rxjs';\n\n\n@Injectable({providedIn: 'root'})\nexport class InuCopyServices {\n\n\n  // =================================================================================================================\n  // API\n  // =================================================================================================================\n  copy(content:string):Observable<any> {\n    const result$ = from(navigator.clipboard.writeText(content));\n    result$.subscribe();\n    return result$;\n  }\n}\n","import {Component, computed, inject, input} from '@angular/core';\nimport {InuButton} from 'inugami-ng/components/inu-button';\nimport {InuCopyServices} from './inu-copy.service';\nimport {InuToastServices} from 'inugami-ng/components/inu-toast';\n\n@Component({\n  selector: 'inu-copy',\n  standalone: true,\n  imports: [InuButton],\n  templateUrl: './inu-copy.component.html',\n  styleUrl: './inu-copy.component.scss',\n})\nexport class InuCopy {\n\n  //==================================================================================================================\n  // ATTRIBUTES\n  //==================================================================================================================\n  label = input<string | undefined | null>('');\n  notificationLabel = input<string>('Value copied to clipboard');\n  notificationMessage = input<string>('');\n  icon = input<string>('copy');\n  iconNotification = input<string>('approval');\n  type = input<string>('success');\n  link = input<boolean>(false);\n  styleclass = input<string>('');\n  content = input<string | undefined | null>(undefined);\n\n  _styleClass = computed<string>(() => {\n    return [\n      'inu-copy',\n      this.styleclass() ? this.styleclass() : ''\n    ].join(' ');\n  })\n\n\n  copyService = inject(InuCopyServices);\n  toastServices = inject(InuToastServices);\n\n\n  //==================================================================================================================\n  // ACTIONS\n  //==================================================================================================================\n  protected copyContent() {\n    const content = this.content();\n    if(!content){\n      return;\n    }\n    this.copyService.copy(content)\n      .subscribe({\n        next: ()=> this.notify()\n      });\n  }\n\n  private notify() {\n    this.toastServices.addMessage({\n      title:this.notificationLabel(),\n      message:this.notificationMessage(),\n      icon:this.iconNotification(),\n      level:\"success\"\n    });\n  }\n}\n","<div [class]=\"_styleClass()\">\n  <inu-button [label]=\"label()\"\n              [icon]=\"icon()\"\n              [type]=\"type()\"\n              [link]=\"link()\"\n              [disabled]=\"!content()\"\n              (click)=\"copyContent()\"\n  ></inu-button>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"inugami-ng-components-inu-copy.mjs","sources":["../../../projects/inugami-ng/components/inu-copy/inu-copy.service.ts","../../../projects/inugami-ng/components/inu-copy/inu-copy.component.ts","../../../projects/inugami-ng/components/inu-copy/inu-copy.component.html","../../../projects/inugami-ng/components/inu-copy/inugami-ng-components-inu-copy.ts"],"sourcesContent":["import {Injectable} from '@angular/core';\nimport {from, Observable} from 'rxjs';\n\n\n@Injectable({providedIn: 'root'})\nexport class InuCopyServices {\n\n\n  // =================================================================================================================\n  // API\n  // =================================================================================================================\n  copy(content:string):Observable<any> {\n    const result$ = from(navigator.clipboard.writeText(content));\n    result$.subscribe();\n    return result$;\n  }\n}\n","import {Component, computed, inject, input} from '@angular/core';\nimport {InuButton} from 'inugami-ng/components/inu-button';\nimport {InuCopyServices} from './inu-copy.service';\nimport {InuToastServices} from 'inugami-ng/components/inu-toast';\n\n@Component({\n  selector: 'inu-copy',\n  standalone: true,\n  imports: [InuButton],\n  templateUrl: './inu-copy.component.html',\n  styleUrl: './inu-copy.component.scss',\n})\nexport class InuCopy {\n\n  //==================================================================================================================\n  // ATTRIBUTES\n  //==================================================================================================================\n  label = input<string | undefined | null>('');\n  notificationLabel = input<string>('Value copied to clipboard');\n  notificationMessage = input<string>('');\n  icon = input<string>('copy');\n  iconNotification = input<string>('approval');\n  type = input<string>('success');\n  link = input<boolean>(false);\n  styleclass = input<string>('');\n  content = input<string | undefined | null>(undefined);\n\n  _styleClass = computed<string>(() => {\n    return [\n      'inu-copy',\n      this.styleclass() ? this.styleclass() : ''\n    ].join(' ');\n  })\n\n\n  copyService = inject(InuCopyServices);\n  toastServices = inject(InuToastServices);\n\n\n  //==================================================================================================================\n  // ACTIONS\n  //==================================================================================================================\n  protected copyContent() {\n    const content = this.content();\n    if(!content){\n      return;\n    }\n    this.copyService.copy(content)\n      .subscribe({\n        next: ()=> this.notify()\n      });\n  }\n\n  private notify() {\n    this.toastServices.addMessage({\n      title:this.notificationLabel(),\n      message:this.notificationMessage(),\n      icon:this.iconNotification(),\n      level:\"success\"\n    });\n  }\n}\n","<div [class]=\"_styleClass()\">\n  <inu-button [label]=\"label()\"\n              [icon]=\"icon()\"\n              [type]=\"type()\"\n              [link]=\"link()\"\n              [disabled]=\"!content()\"\n              (click)=\"copyContent()\"\n  ></inu-button>\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-input-text.mjs

@@ -0,0 +1,93 @@
+import * as i0 from '@angular/core';
+import { input, inject, model, computed, output, viewChild, signal, Component } from '@angular/core';
+import { FormField } from '@angular/forms/signals';
+import { UuidUtils } from 'inugami-ng/services';
+import { Subject, debounceTime } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { InuIcon } from 'inugami-icons';
+
+class InuInputText {
+    //==================================================================================================================
+    // ATTRIBUTES
+    //==================================================================================================================
+    // input
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
+    type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    _required = input(false, { ...(ngDevMode ? { debugName: "_required" } : {}), alias: 'required' });
+    // FormValueControl
+    formField = inject(FormField, { optional: true });
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    valid = computed(() => {
+        const state = this.formField?.state();
+        if (!state)
+            return true;
+        const isInvalid = state.invalid();
+        const hasBeenTouched = state.touched();
+        return !(isInvalid && hasBeenTouched);
+    }, ...(ngDevMode ? [{ debugName: "valid" }] : []));
+    // internal
+    changed = output();
+    debouncer = new Subject();
+    id = computed(() => UuidUtils.buildUid(), ...(ngDevMode ? [{ debugName: "id" }] : []));
+    input = viewChild('input', ...(ngDevMode ? [{ debugName: "input" }] : []));
+    focus = signal(false, ...(ngDevMode ? [{ debugName: "focus" }] : []));
+    styleClass = input('', ...(ngDevMode ? [{ debugName: "styleClass" }] : []));
+    _styleClass = computed(() => {
+        return [
+            'inu-input',
+            'inu-input-text',
+            this.disabled() ? 'disabled' : '',
+            !this.valid() ? 'invalid' : '',
+            this.focus() ? 'focus' : '',
+            this.styleClass()
+        ].join(' ');
+    }, ...(ngDevMode ? [{ debugName: "_styleClass" }] : []));
+    //==================================================================================================================
+    // INIT
+    //==================================================================================================================
+    constructor() {
+        this.debouncer.pipe(debounceTime(50), takeUntilDestroyed()).subscribe(val => {
+            this.value.set(val);
+            this.changed.emit(val);
+        });
+    }
+    onChanged(event) {
+        const input = this.input()?.nativeElement;
+        if (!input) {
+            return;
+        }
+        let value = input.value;
+        if ('number' === this.type()) {
+            try {
+                value = Number(value);
+            }
+            catch (e) {
+            }
+        }
+        this.debouncer.next(value);
+    }
+    onFocus() {
+        this.focus.set(true);
+    }
+    onFocusOut() {
+        this.focus.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InuInputText, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: InuInputText, isStandalone: true, selector: "inu-input-text", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, _required: { classPropertyName: "_required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, providers: [], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"_styleClass()\">\n  <div class=\"inu-input-text-label\">\n    @if(icon()){\n      <inu-icon [icon]=\"icon()!\" [size]=\"1\"></inu-icon>\n    }\n    @if (label()) {\n      <label [for]=\"id()\">{{ label()! }}</label>\n    }\n    @if (_required()) {\n      <inu-icon icon=\"required\" [size]=\"0.5\"></inu-icon>\n    }\n  </div>\n\n  <input [id]=\"id()\"\n         [name]=\"name()!\"\n         [type]=\"type()\"\n         [value]=\"value()\"\n         [disabled]=\"disabled()\"\n         (focusin)=\"onFocus()\"\n         (focusout)=\"onFocusOut()\"\n         (blur)=\"formField?.state()?.markAsTouched()\"\n         (keyup)=\"onChanged($event)\" #input>\n</div>\n", styles: [".inu-input-text{display:flex;flex-direction:column;width:100%}.inu-input-text label{font-weight:700;font-size:90%;width:auto;transition:color .25s}.inu-input-text inu-icon{width:1rem}.inu-input-text input{border:none;border-bottom:2px solid var(--neutral);transition:border-bottom .25s;outline:none}.inu-input-text input:focus{border-bottom:2px solid var(--secondary-light)}.inu-input-text input.disabled{border-bottom:2px solid var(--neutral-light)}.inu-input-text .inu-input-text-label{display:flex;flex-direction:row;gap:.5rem}.inu-input-text.focus .inu-input-text-label{color:var(--secondary-light);fill:var(--secondary-light)}.inu-input-text.invalid input{border-bottom:1px solid var(--danger)}.inu-input-text.invalid .inu-input-text-label{color:var(--danger);fill:var(--danger)}\n"], dependencies: [{ 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: InuInputText, decorators: [{
+            type: Component,
+            args: [{ selector: 'inu-input-text', standalone: true, providers: [], imports: [
+                        InuIcon
+                    ], template: "<div [class]=\"_styleClass()\">\n  <div class=\"inu-input-text-label\">\n    @if(icon()){\n      <inu-icon [icon]=\"icon()!\" [size]=\"1\"></inu-icon>\n    }\n    @if (label()) {\n      <label [for]=\"id()\">{{ label()! }}</label>\n    }\n    @if (_required()) {\n      <inu-icon icon=\"required\" [size]=\"0.5\"></inu-icon>\n    }\n  </div>\n\n  <input [id]=\"id()\"\n         [name]=\"name()!\"\n         [type]=\"type()\"\n         [value]=\"value()\"\n         [disabled]=\"disabled()\"\n         (focusin)=\"onFocus()\"\n         (focusout)=\"onFocusOut()\"\n         (blur)=\"formField?.state()?.markAsTouched()\"\n         (keyup)=\"onChanged($event)\" #input>\n</div>\n", styles: [".inu-input-text{display:flex;flex-direction:column;width:100%}.inu-input-text label{font-weight:700;font-size:90%;width:auto;transition:color .25s}.inu-input-text inu-icon{width:1rem}.inu-input-text input{border:none;border-bottom:2px solid var(--neutral);transition:border-bottom .25s;outline:none}.inu-input-text input:focus{border-bottom:2px solid var(--secondary-light)}.inu-input-text input.disabled{border-bottom:2px solid var(--neutral-light)}.inu-input-text .inu-input-text-label{display:flex;flex-direction:row;gap:.5rem}.inu-input-text.focus .inu-input-text-label{color:var(--secondary-light);fill:var(--secondary-light)}.inu-input-text.invalid input{border-bottom:1px solid var(--danger)}.inu-input-text.invalid .inu-input-text-label{color:var(--danger);fill:var(--danger)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], _required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }], input: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { InuInputText };
+//# sourceMappingURL=inugami-ng-components-inu-input-text.mjs.map

package/fesm2022/inugami-ng-components-inu-input-text.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"inugami-ng-components-inu-input-text.mjs","sources":["../../../projects/inugami-ng/components/inu-input-text/inu-input-text.component.ts","../../../projects/inugami-ng/components/inu-input-text/inu-input-text.component.html","../../../projects/inugami-ng/components/inu-input-text/inugami-ng-components-inu-input-text.ts"],"sourcesContent":["import {\n  Component,\n  computed,\n  ElementRef, inject,\n  input,\n  InputSignal,\n  model,\n  ModelSignal,\n  output,\n  signal,\n  viewChild\n} from '@angular/core';\nimport {FormField, FormValueControl} from '@angular/forms/signals';\nimport {UuidUtils} from 'inugami-ng/services';\nimport {debounceTime, Subject} from 'rxjs';\nimport {takeUntilDestroyed} from '@angular/core/rxjs-interop';\nimport {InuIcon} from 'inugami-icons';\n\n@Component({\n  selector: 'inu-input-text',\n  standalone: true,\n  providers: [],\n  imports: [\n    InuIcon\n\n  ],\n  templateUrl: './inu-input-text.component.html',\n  styleUrl: './inu-input-text.component.scss',\n})\nexport class InuInputText implements FormValueControl<string | number>,FormValueControl<string | number> {\n\n\n  //==================================================================================================================\n  // ATTRIBUTES\n  //==================================================================================================================\n  // input\n  readonly disabled = input(false);\n  readonly label = input('');\n  readonly icon = input('');\n  readonly name = input('');\n  readonly type: InputSignal<string | 'text' | 'number' | 'email' | 'password'> = input('text');\n  readonly _required = input(false, {alias: 'required'});\n\n\n  // FormValueControl\n  formField = inject(FormField, { optional: true });\n  value: ModelSignal<string | number> = model<string | number>('');\n  valid = computed(() => {\n    const state = this.formField?.state()\n    if (!state) return true;\n    const isInvalid = state.invalid();\n    const hasBeenTouched = state.touched();\n    return !(isInvalid && hasBeenTouched);\n  });\n  // internal\n  changed = output<string | number>();\n  debouncer = new Subject<string | number>();\n\n  id = computed<string>(() => UuidUtils.buildUid());\n  input = viewChild<ElementRef<HTMLInputElement>>('input');\n  focus=signal<boolean>(false);\n  styleClass = input<string>('');\n  _styleClass = computed<string>(() => {\n    return [\n      'inu-input',\n      'inu-input-text',\n      this.disabled() ? 'disabled' : '',\n      !this.valid() ? 'invalid' : '',\n      this.focus() ? 'focus' : '',\n      this.styleClass()!\n    ].join(' ');\n  })\n\n  //==================================================================================================================\n  // INIT\n  //==================================================================================================================\n  constructor() {\n    this.debouncer.pipe(\n      debounceTime(50),\n      takeUntilDestroyed()\n    ).subscribe(val => {\n      this.value.set(val);\n      this.changed.emit(val);\n    });\n  }\n\n  protected onChanged(event: KeyboardEvent) {\n    const input = this.input()?.nativeElement;\n    if (!input) {\n      return;\n    }\n    let value: number | string = input.value;\n    if ('number' === this.type()) {\n      try {\n        value = Number(value);\n      } catch (e) {\n      }\n    }\n\n    this.debouncer.next(value)\n  }\n\n  protected onFocus() {\n    this.focus.set(true);\n  }\n\n  protected onFocusOut() {\n    this.focus.set(false);\n  }\n}\n","<div [class]=\"_styleClass()\">\n  <div class=\"inu-input-text-label\">\n    @if(icon()){\n      <inu-icon [icon]=\"icon()!\" [size]=\"1\"></inu-icon>\n    }\n    @if (label()) {\n      <label [for]=\"id()\">{{ label()! }}</label>\n    }\n    @if (_required()) {\n      <inu-icon icon=\"required\" [size]=\"0.5\"></inu-icon>\n    }\n  </div>\n\n  <input [id]=\"id()\"\n         [name]=\"name()!\"\n         [type]=\"type()\"\n         [value]=\"value()\"\n         [disabled]=\"disabled()\"\n         (focusin)=\"onFocus()\"\n         (focusout)=\"onFocusOut()\"\n         (blur)=\"formField?.state()?.markAsTouched()\"\n         (keyup)=\"onChanged($event)\" #input>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;MA6Ba,YAAY,CAAA;;;;;AAOd,IAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,oDAAC;AACvB,IAAA,KAAK,GAAG,KAAK,CAAC,EAAE,iDAAC;AACjB,IAAA,IAAI,GAAG,KAAK,CAAC,EAAE,gDAAC;AAChB,IAAA,IAAI,GAAG,KAAK,CAAC,EAAE,gDAAC;AAChB,IAAA,IAAI,GAAmE,KAAK,CAAC,MAAM,gDAAC;IACpF,SAAS,GAAG,KAAK,CAAC,KAAK,sDAAG,KAAK,EAAE,UAAU,EAAA,CAAE;;IAItD,SAAS,GAAG,MAAM,CAAC,SAAS,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AACjD,IAAA,KAAK,GAAiC,KAAK,CAAkB,EAAE,iDAAC;AAChE,IAAA,KAAK,GAAG,QAAQ,CAAC,MAAK;QACpB,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE;AACrC,QAAA,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,IAAI;AACvB,QAAA,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,EAAE;AACjC,QAAA,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,EAAE;AACtC,QAAA,OAAO,EAAE,SAAS,IAAI,cAAc,CAAC;AACvC,IAAA,CAAC,iDAAC;;IAEF,OAAO,GAAG,MAAM,EAAmB;AACnC,IAAA,SAAS,GAAG,IAAI,OAAO,EAAmB;IAE1C,EAAE,GAAG,QAAQ,CAAS,MAAM,SAAS,CAAC,QAAQ,EAAE,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,IAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAC;AACjD,IAAA,KAAK,GAAG,SAAS,CAA+B,OAAO,iDAAC;AACxD,IAAA,KAAK,GAAC,MAAM,CAAU,KAAK,iDAAC;AAC5B,IAAA,UAAU,GAAG,KAAK,CAAS,EAAE,sDAAC;AAC9B,IAAA,WAAW,GAAG,QAAQ,CAAS,MAAK;QAClC,OAAO;YACL,WAAW;YACX,gBAAgB;YAChB,IAAI,CAAC,QAAQ,EAAE,GAAG,UAAU,GAAG,EAAE;YACjC,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,SAAS,GAAG,EAAE;YAC9B,IAAI,CAAC,KAAK,EAAE,GAAG,OAAO,GAAG,EAAE;YAC3B,IAAI,CAAC,UAAU;AAChB,SAAA,CAAC,IAAI,CAAC,GAAG,CAAC;AACb,IAAA,CAAC,uDAAC;;;;AAKF,IAAA,WAAA,GAAA;AACE,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CACjB,YAAY,CAAC,EAAE,CAAC,EAChB,kBAAkB,EAAE,CACrB,CAAC,SAAS,CAAC,GAAG,IAAG;AAChB,YAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC;AACnB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AACxB,QAAA,CAAC,CAAC;IACJ;AAEU,IAAA,SAAS,CAAC,KAAoB,EAAA;QACtC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,EAAE,aAAa;QACzC,IAAI,CAAC,KAAK,EAAE;YACV;QACF;AACA,QAAA,IAAI,KAAK,GAAoB,KAAK,CAAC,KAAK;AACxC,QAAA,IAAI,QAAQ,KAAK,IAAI,CAAC,IAAI,EAAE,EAAE;AAC5B,YAAA,IAAI;AACF,gBAAA,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YACvB;YAAE,OAAO,CAAC,EAAE;YACZ;QACF;AAEA,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;IAC5B;IAEU,OAAO,GAAA;AACf,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;IACtB;IAEU,UAAU,GAAA;AAClB,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;IACvB;uGA/EW,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAZ,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAY,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,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,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,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,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,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,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,aAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,SAAA,EARZ,EAAE,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,OAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,OAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECrBf,uqBAuBA,40BDAI,OAAO,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,aAAA,EAAA,YAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAME,YAAY,EAAA,UAAA,EAAA,CAAA;kBAXxB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAAA,UAAA,EACd,IAAI,EAAA,SAAA,EACL,EAAE,EAAA,OAAA,EACJ;wBACP;AAED,qBAAA,EAAA,QAAA,EAAA,uqBAAA,EAAA,MAAA,EAAA,CAAA,oxBAAA,CAAA,EAAA;yzBAkC+C,OAAO,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,YAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AE3DzD;;AAEG;;;;"}

package/fesm2022/inugami-ng-components-inu-svg-asset.mjs

@@ -0,0 +1,163 @@
+import * as i0 from '@angular/core';
+import { input, viewChild, computed, effect, HostListener, Component } from '@angular/core';
+import { InuTemplateRegistryService } from 'inugami-ng/directives';
+import { SVG_MATH, SVG_BUILDER, SvgAssetUtils, SVG_TRANSFORM } from 'inugami-ng/services';
+
+class InuSvgAsset {
+    //====================================================================================================================
+    // ATTRIBUTES
+    //====================================================================================================================
+    assetSet = input('', ...(ngDevMode ? [{ debugName: "assetSet" }] : []));
+    asset = input(undefined, ...(ngDevMode ? [{ debugName: "asset" }] : []));
+    type = input('default', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    state = input('default', ...(ngDevMode ? [{ debugName: "state" }] : []));
+    styleclass = input('', ...(ngDevMode ? [{ debugName: "styleclass" }] : []));
+    //
+    component = viewChild('component', ...(ngDevMode ? [{ debugName: "component" }] : []));
+    container = viewChild('container', ...(ngDevMode ? [{ debugName: "container" }] : []));
+    _styleClass = computed(() => {
+        return [
+            'inu-svg',
+            'inu-svg-asset',
+            this.styleclass() ? this.styleclass() : ''
+        ].join(' ');
+    }, ...(ngDevMode ? [{ debugName: "_styleClass" }] : []));
+    //--- SVG components
+    height = 64;
+    width = 64;
+    parent = null;
+    locator = null;
+    defs = null;
+    canvas = null;
+    graph = null;
+    //====================================================================================================================
+    // INIT
+    //====================================================================================================================
+    constructor() {
+        effect(() => {
+            this.asset();
+            this.type();
+            this.state();
+            if (this.graph) {
+                this.updateValues();
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        this.updateValues();
+    }
+    ngAfterViewInit() {
+        const component = this.component();
+        const container = this.container();
+        if (component && container) {
+            this.resolveParentSize(component, container);
+            this.initializeLayout(container);
+            this.resize();
+        }
+    }
+    onResize() {
+        const component = this.component();
+        const container = this.container();
+        if (component && container) {
+            this.resolveParentSize(component, container);
+            this.resize();
+        }
+    }
+    //====================================================================================================================
+    // RENDERING
+    //====================================================================================================================
+    resolveParentSize(component, container) {
+        if (component?.nativeElement && component?.nativeElement.parentNode && component?.nativeElement.parentNode.parentNode) {
+            this.parent = component?.nativeElement.parentNode.parentNode;
+        }
+        if (this.parent) {
+            let parentSize = SVG_MATH.size(this.parent);
+            this.height = parentSize.height;
+            this.width = parentSize.width;
+        }
+        container?.nativeElement.setAttribute('style', `display: block; height:${this.height}px;width:${this.width}px`);
+    }
+    initializeLayout(container) {
+        this.defs = SVG_BUILDER.createDefs(container?.nativeElement);
+        this.locator = SVG_BUILDER.createGroup(container?.nativeElement, { styleClass: 'locator' });
+        this.canvas = SVG_BUILDER.createGroup(this.locator, { styleClass: 'canvas' });
+        const filter = SVG_BUILDER.createFilter(this.defs, 'shadow', { style: 'color-interpolation-filters: sRGB;' });
+        const gaussian = SVG_BUILDER.createNode('feGaussianBlur', filter);
+        if (gaussian) {
+            gaussian.setAttribute('stdDeviation', '1');
+        }
+        if (this.canvas) {
+            this.graph = SVG_BUILDER.createGroup(this.canvas, { styleClass: 'graph' });
+        }
+        this.updateValues();
+    }
+    //====================================================================================================================
+    // UPDATE VALUES
+    //====================================================================================================================
+    updateValues() {
+        const asset = this.asset();
+        if (!asset || !this.graph) {
+            return;
+        }
+        this.graph.replaceChildren();
+        const type = this.type();
+        let state = this.state();
+        let currentType = asset.types.find(t => t.name == type);
+        if (!currentType) {
+            currentType = asset.types.find(t => t.name == 'default');
+        }
+        if (!currentType) {
+            return;
+        }
+        let currentState = currentType.states.find(t => t.name == state);
+        if (!currentState) {
+            state = 'default';
+        }
+        const node = SVG_BUILDER.createGroup(this.graph);
+        SvgAssetUtils.createAsset({
+            parent: this.graph,
+            node: node,
+            asset: {
+                assetSet: this.assetSet(),
+                assetName: asset.name,
+                type: type,
+                state: state,
+                x: 0,
+                y: 0
+            }
+        });
+        setTimeout(() => this.resize(), 0);
+    }
+    //====================================================================================================================
+    // TOOLS
+    //====================================================================================================================
+    resize() {
+        if (this.locator && this.parent) {
+            SVG_TRANSFORM.center(this.locator, this.parent, true, true);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InuSvgAsset, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: InuSvgAsset, isStandalone: true, selector: "inu-svg-asset", inputs: { assetSet: { classPropertyName: "assetSet", publicName: "assetSet", isSignal: true, isRequired: false, transformFunction: null }, asset: { classPropertyName: "asset", publicName: "asset", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, styleclass: { classPropertyName: "styleclass", publicName: "styleclass", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()" } }, providers: [InuTemplateRegistryService], viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: `
+    <div [class]="_styleClass()" #component>
+      <svg #container xmlns="http://www.w3.org/2000/svg"></svg>
+    </div>
+  `, isInline: true, styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InuSvgAsset, decorators: [{
+            type: Component,
+            args: [{ selector: 'inu-svg-asset', standalone: true, providers: [InuTemplateRegistryService], imports: [], template: `
+    <div [class]="_styleClass()" #component>
+      <svg #container xmlns="http://www.w3.org/2000/svg"></svg>
+    </div>
+  ` }]
+        }], ctorParameters: () => [], propDecorators: { assetSet: [{ type: i0.Input, args: [{ isSignal: true, alias: "assetSet", required: false }] }], asset: [{ type: i0.Input, args: [{ isSignal: true, alias: "asset", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], styleclass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleclass", required: false }] }], component: [{ type: i0.ViewChild, args: ['component', { isSignal: true }] }], container: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], onResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { InuSvgAsset };
+//# sourceMappingURL=inugami-ng-components-inu-svg-asset.mjs.map

package/fesm2022/inugami-ng-components-inu-svg-asset.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"inugami-ng-components-inu-svg-asset.mjs","sources":["../../../projects/inugami-ng/components/inu-svg-asset/inu-svg-asset.ts","../../../projects/inugami-ng/components/inu-svg-asset/inugami-ng-components-inu-svg-asset.ts"],"sourcesContent":["import {\n  AfterViewInit,\n  Component,\n  computed,\n  effect,\n  ElementRef,\n  HostListener,\n  input,\n  OnChanges, signal,\n  SimpleChanges,\n  viewChild\n} from '@angular/core';\nimport {InuTemplateRegistryService} from 'inugami-ng/directives';\nimport {SVG_ASSETS, SVG_BUILDER, SVG_MATH, SVG_TRANSFORM, SvgAssetUtils} from 'inugami-ng/services';\nimport {SvgAsset} from 'inugami-svg-assets';\nimport {SvgAssetDTOOptions} from 'inugami-ng/models';\n\n@Component({\n  selector: 'inu-svg-asset',\n  standalone: true,\n  providers: [InuTemplateRegistryService],\n  imports: [],\n  template: `\n    <div [class]=\"_styleClass()\" #component>\n      <svg #container xmlns=\"http://www.w3.org/2000/svg\"></svg>\n    </div>\n  `,\n  styleUrl: './inu-svg-asset.scss',\n})\nexport class InuSvgAsset implements AfterViewInit, OnChanges {\n\n  //====================================================================================================================\n  // ATTRIBUTES\n  //====================================================================================================================\n  assetSet = input<string>('');\n  asset = input<SvgAsset | undefined>(undefined);\n  type = input<string | undefined>('default');\n  state = input<string | undefined>('default');\n  styleclass = input<string>('');\n  //\n  private component = viewChild<ElementRef<HTMLElement>>('component');\n  private container = viewChild<ElementRef<HTMLElement>>('container');\n  _styleClass = computed<string>(() => {\n    return [\n      'inu-svg',\n      'inu-svg-asset',\n      this.styleclass() ? this.styleclass() : ''\n    ].join(' ');\n  })\n\n  //--- SVG components\n  height: number = 64;\n  width: number = 64;\n  parent: HTMLElement | null = null;\n  locator: SVGElement | null = null;\n  defs: SVGElement | null = null;\n  canvas: SVGElement | null = null;\n  graph: SVGElement | null = null;\n\n  //====================================================================================================================\n  // INIT\n  //====================================================================================================================\n\n  constructor() {\n    effect(() => {\n      this.asset();\n      this.type();\n      this.state();\n\n      if (this.graph) {\n        this.updateValues();\n      }\n    });\n  }\n\n  ngOnChanges(changes: SimpleChanges) {\n    this.updateValues();\n  }\n\n  ngAfterViewInit(): void {\n    const component = this.component();\n    const container = this.container();\n    if (component && container) {\n      this.resolveParentSize(component, container);\n      this.initializeLayout(container);\n      this.resize();\n    }\n  }\n\n  @HostListener('window:resize')\n  onResize() {\n    const component = this.component();\n    const container = this.container();\n    if (component && container) {\n      this.resolveParentSize(component, container);\n      this.resize();\n    }\n  }\n\n\n  //====================================================================================================================\n  // RENDERING\n  //====================================================================================================================\n  private resolveParentSize(component: ElementRef<HTMLElement>, container: ElementRef<HTMLElement>) {\n    if (component?.nativeElement && component?.nativeElement.parentNode && component?.nativeElement.parentNode.parentNode) {\n      this.parent = component?.nativeElement.parentNode.parentNode as HTMLElement;\n    }\n\n    if (this.parent) {\n      let parentSize = SVG_MATH.size(this.parent);\n      this.height = parentSize.height;\n      this.width = parentSize.width;\n    }\n\n    container?.nativeElement.setAttribute('style', `display: block; height:${this.height}px;width:${this.width}px`);\n  }\n\n  private initializeLayout(container: ElementRef<HTMLElement>) {\n    this.defs = SVG_BUILDER.createDefs(container?.nativeElement);\n    this.locator = SVG_BUILDER.createGroup(container?.nativeElement, {styleClass: 'locator'});\n    this.canvas = SVG_BUILDER.createGroup(this.locator, {styleClass: 'canvas'});\n\n    const filter = SVG_BUILDER.createFilter(this.defs, 'shadow', {style: 'color-interpolation-filters: sRGB;'});\n    const gaussian = SVG_BUILDER.createNode('feGaussianBlur', filter);\n    if (gaussian) {\n      gaussian.setAttribute('stdDeviation', '1');\n    }\n    if (this.canvas) {\n      this.graph = SVG_BUILDER.createGroup(this.canvas, {styleClass: 'graph'});\n    }\n\n    this.updateValues();\n  }\n\n\n  //====================================================================================================================\n  // UPDATE VALUES\n  //====================================================================================================================\n  public updateValues() {\n    const asset = this.asset();\n    if (!asset || !this.graph) {\n      return;\n    }\n    this.graph.replaceChildren();\n\n    const type = this.type();\n    let state = this.state();\n    let currentType = asset.types.find(t => t.name == type);\n    if (!currentType) {\n      currentType = asset.types.find(t => t.name == 'default');\n    }\n    if (!currentType) {\n      return;\n    }\n    let currentState = currentType.states.find(t => t.name == state);\n    if (!currentState) {\n      state = 'default';\n    }\n\n    const node = SVG_BUILDER.createGroup(this.graph);\n    SvgAssetUtils.createAsset(<SvgAssetDTOOptions>{\n      parent: this.graph,\n      node: node,\n      asset: {\n        assetSet: this.assetSet(),\n        assetName: asset.name,\n        type: type,\n        state: state,\n        x: 0,\n        y: 0\n      }\n    });\n\n    setTimeout(() => this.resize(), 0);\n  }\n\n\n  //====================================================================================================================\n  // TOOLS\n  //====================================================================================================================\n  public resize(): void {\n    if (this.locator && this.parent) {\n      SVG_TRANSFORM.center(this.locator, this.parent, true, true);\n    }\n  }\n\n\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}