npm - inugami-ng - Versions diffs - 0.0.3 → 0.0.5 - Mend

inugami-ng 0.0.3 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/fesm2022/inugami-ng-components-inu-checkbox-group.mjs ADDED Viewed

@@ -0,0 +1,126 @@
+import * as i0 from '@angular/core';
+import { input, model, signal, effect, Component } from '@angular/core';
+import { InuIcon } from 'inugami-icons';
+class InuCheckboxGroup {
+    //==================================================================================================================
+    // ATTRIBUTES
+    //==================================================================================================================
+    // input
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    _required = input(false, { ...(ngDevMode ? { debugName: "_required" } : {}), alias: 'required' });
+    values = input([], ...(ngDevMode ? [{ debugName: "values" }] : []));
+    vertical = input(false, ...(ngDevMode ? [{ debugName: "vertical" }] : []));
+    // FormValueControl
+    value = model([], ...(ngDevMode ? [{ debugName: "value" }] : []));
+    _values = signal([], ...(ngDevMode ? [{ debugName: "_values" }] : []));
+    // internal
+    styleClass = signal('', ...(ngDevMode ? [{ debugName: "styleClass" }] : []));
+    //==================================================================================================================
+    // INIT
+    //==================================================================================================================
+    constructor() {
+        effect(() => {
+            this.initStyleClass();
+        });
+    }
+    ngOnInit() {
+        this.initSelectItems();
+    }
+    initSelectItems() {
+        const values = this.values();
+        if (!values) {
+            return;
+        }
+        const result = [];
+        for (let item of values) {
+            result.push(Object.assign({}, item));
+        }
+        const currentValue = this.value();
+        if (!currentValue) {
+            return;
+        }
+        for (let valueItem of currentValue) {
+            for (let resultItem of result) {
+                if (this.match(valueItem, resultItem)) {
+                    resultItem.selected = true;
+                    break;
+                }
+            }
+        }
+        this._values.set(result);
+    }
+    initStyleClass() {
+        const result = ['inu-checkbox-group'];
+        if (this.vertical()) {
+            result.push('vertical');
+        }
+        if (this._required()) {
+            result.push('required');
+        }
+        if (this.disabled()) {
+            result.push('disabled');
+        }
+        if (this._required()) {
+            const values = this._values();
+            let found = false;
+            if (values) {
+                for (let value of values) {
+                    found = value.selected != undefined && value.selected;
+                    if (found) {
+                        break;
+                    }
+                }
+            }
+            if (!found) {
+                result.push('notValid');
+            }
+        }
+        this.styleClass.set(result.join(' '));
+    }
+    //==================================================================================================================
+    // ACTIONS
+    //==================================================================================================================
+    toggle(value) {
+        if (this.disabled()) {
+            return;
+        }
+        if (value.selected == undefined) {
+            value.selected = true;
+        }
+        else {
+            value.selected = !value.selected;
+        }
+        const currentValues = this._values();
+        if (currentValues) {
+            const newSelectedValues = [];
+            for (let selectItem of currentValues) {
+                if (selectItem.selected) {
+                    newSelectedValues.push(selectItem.value);
+                }
+            }
+            this.value.set(newSelectedValues);
+        }
+        this.initStyleClass();
+    }
+    getItemClass(selectItem) {
+        return selectItem.styleClass;
+    }
+    match(valueItem, resultItem) {
+        return valueItem === resultItem.value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InuCheckboxGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: InuCheckboxGroup, isStandalone: true, selector: "inu-checkbox-group", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, _required: { classPropertyName: "_required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [], ngImport: i0, template: "<div [class]=\"styleClass()\">\n\n  <div  class=\"inu-checkbox-group-label-grp\">\n    <div class=\"inu-checkbox-group-label\">\n      @if (label()) {\n        {{ label() }}\n      }\n    </div>\n    @if (_required()) {\n      <div class=\"inu-checkbox-group-required\">\n        <inu-icon icon=\"required\" [size]=\"0.5\"></inu-icon>\n      </div>\n    }\n  </div>\n  <ul>\n    @if (_values()) {\n      @for (selectItem of _values(); track selectItem.value; ) {\n        <li (click)=\"toggle(selectItem)\" [class]=\"getItemClass(selectItem)\">\n          <div class=\"inu-checkbox-group-icon\">\n            @if (selectItem.selected) {\n              <inu-icon icon=\"check\" [size]=\"0.9\" tabindex=\"0\"></inu-icon>\n            }\n          </div>\n          <div class=\"inu-checkbox-group-label\">\n            <span>{{ selectItem.title! }}</span>\n          </div>\n\n        </li>\n      }\n    }\n  </ul>\n</div>\n", styles: [".inu-checkbox-group{display:flex;flex-direction:column;gap:1rem}.inu-checkbox-group .inu-checkbox-group-label-grp{display:flex}.inu-checkbox-group .inu-checkbox-group-label-grp .inu-checkbox-group-label{font-weight:700}.inu-checkbox-group .inu-checkbox-group-label-grp .inu-checkbox-group-required{display:flex;fill:var(--danger)}.inu-checkbox-group .inu-checkbox-group-label-grp .inu-checkbox-group-required ::ng-deep span{height:1rem;display:flex;align-items:baseline}.inu-checkbox-group ul{display:flex;margin:0;padding:0;gap:1rem}.inu-checkbox-group ul li{display:flex;gap:.25rem;align-items:center}.inu-checkbox-group ul li .inu-checkbox-group-icon{-webkit-user-select:none;user-select:none;cursor:pointer;border:.125px solid var(--text-color);display:flex;height:1rem;width:1rem;align-items:center}.inu-checkbox-group ul li .inu-checkbox-group-icon ::ng-deep span{display:flex;align-items:center}.inu-checkbox-group ul li .inu-checkbox-group-label{cursor:pointer;display:flex;align-items:center;-webkit-user-select:none;user-select:none}.inu-checkbox-group.vertical ul{flex-direction:column}.inu-checkbox-group.disabled .inu-checkbox-group-icon{border:.125px solid var(--neutral);fill:var(--neutral)}.inu-checkbox-group.disabled .inu-checkbox-group-label{color:var(--neutral)}.inu-checkbox-group.notValid .inu-checkbox-group-label-grp{color:var(--danger)}.inu-checkbox-group.notValid li .inu-checkbox-group-icon{border:.125px solid var(--danger)!important}\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: InuCheckboxGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'inu-checkbox-group', standalone: true, providers: [], imports: [InuIcon], template: "<div [class]=\"styleClass()\">\n\n  <div  class=\"inu-checkbox-group-label-grp\">\n    <div class=\"inu-checkbox-group-label\">\n      @if (label()) {\n        {{ label() }}\n      }\n    </div>\n    @if (_required()) {\n      <div class=\"inu-checkbox-group-required\">\n        <inu-icon icon=\"required\" [size]=\"0.5\"></inu-icon>\n      </div>\n    }\n  </div>\n  <ul>\n    @if (_values()) {\n      @for (selectItem of _values(); track selectItem.value; ) {\n        <li (click)=\"toggle(selectItem)\" [class]=\"getItemClass(selectItem)\">\n          <div class=\"inu-checkbox-group-icon\">\n            @if (selectItem.selected) {\n              <inu-icon icon=\"check\" [size]=\"0.9\" tabindex=\"0\"></inu-icon>\n            }\n          </div>\n          <div class=\"inu-checkbox-group-label\">\n            <span>{{ selectItem.title! }}</span>\n          </div>\n\n        </li>\n      }\n    }\n  </ul>\n</div>\n", styles: [".inu-checkbox-group{display:flex;flex-direction:column;gap:1rem}.inu-checkbox-group .inu-checkbox-group-label-grp{display:flex}.inu-checkbox-group .inu-checkbox-group-label-grp .inu-checkbox-group-label{font-weight:700}.inu-checkbox-group .inu-checkbox-group-label-grp .inu-checkbox-group-required{display:flex;fill:var(--danger)}.inu-checkbox-group .inu-checkbox-group-label-grp .inu-checkbox-group-required ::ng-deep span{height:1rem;display:flex;align-items:baseline}.inu-checkbox-group ul{display:flex;margin:0;padding:0;gap:1rem}.inu-checkbox-group ul li{display:flex;gap:.25rem;align-items:center}.inu-checkbox-group ul li .inu-checkbox-group-icon{-webkit-user-select:none;user-select:none;cursor:pointer;border:.125px solid var(--text-color);display:flex;height:1rem;width:1rem;align-items:center}.inu-checkbox-group ul li .inu-checkbox-group-icon ::ng-deep span{display:flex;align-items:center}.inu-checkbox-group ul li .inu-checkbox-group-label{cursor:pointer;display:flex;align-items:center;-webkit-user-select:none;user-select:none}.inu-checkbox-group.vertical ul{flex-direction:column}.inu-checkbox-group.disabled .inu-checkbox-group-icon{border:.125px solid var(--neutral);fill:var(--neutral)}.inu-checkbox-group.disabled .inu-checkbox-group-label{color:var(--neutral)}.inu-checkbox-group.notValid .inu-checkbox-group-label-grp{color:var(--danger)}.inu-checkbox-group.notValid li .inu-checkbox-group-icon{border:.125px solid var(--danger)!important}\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 }] }], _required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+/**
+ * Generated bundle index. Do not edit.
+ */
+export { InuCheckboxGroup };
+//# sourceMappingURL=inugami-ng-components-inu-checkbox-group.mjs.map

package/fesm2022/inugami-ng-components-inu-checkbox-group.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"inugami-ng-components-inu-checkbox-group.mjs","sources":["../../../projects/inugami-ng/components/inu-checkbox-group/inu-checkbox-group.component.ts","../../../projects/inugami-ng/components/inu-checkbox-group/inu-checkbox-group.component.html","../../../projects/inugami-ng/components/inu-checkbox-group/inugami-ng-components-inu-checkbox-group.ts"],"sourcesContent":["import {Component, effect, Input, input, model, ModelSignal, OnInit, signal} from '@angular/core';\nimport {InuSelectItem} from 'inugami-ng/models';\nimport {FormValueControl} from '@angular/forms/signals';\nimport {InuIcon} from 'inugami-icons';\n\n@Component({\n selector: 'inu-checkbox-group',\n standalone: true,\n providers: [],\n imports: [InuIcon],\n templateUrl: './inu-checkbox-group.component.html',\n styleUrl: './inu-checkbox-group.component.scss',\n})\nexport class InuCheckboxGroup<T> implements FormValueControl<T[]>, OnInit {\n\n\n //==================================================================================================================\n // ATTRIBUTES\n //==================================================================================================================\n // input\n readonly disabled = input(false);\n readonly label = input('');\n readonly _required = input(false, {alias: 'required'});\n readonly values = input<InuSelectItem<T>[]>([]);\n readonly vertical = input(false);\n\n\n // FormValueControl\n value: ModelSignal<T[]> = model(<T[]>[]);\n _values = signal<InuSelectItem<T>[]>([]);\n // internal\n\n styleClass = signal<string>('');\n\n\n //==================================================================================================================\n // INIT\n //==================================================================================================================\n\n constructor() {\n effect(() => {\n this.initStyleClass();\n });\n }\n\n ngOnInit(): void {\n this.initSelectItems();\n }\n\n private initSelectItems() {\n\n const values = this.values();\n if (!values) {\n return;\n }\n\n const result: InuSelectItem<T>[] = [];\n for (let item of values) {\n result.push(Object.assign({}, item));\n }\n const currentValue = this.value();\n if (!currentValue) {\n return;\n }\n\n for (let valueItem of currentValue) {\n for (let resultItem of result) {\n if (this.match(valueItem, resultItem)) {\n resultItem.selected = true;\n break;\n }\n }\n }\n this._values.set(result);\n }\n\n private initStyleClass() {\n const result: string[] = ['inu-checkbox-group'];\n if (this.vertical()) {\n result.push('vertical');\n }\n if (this._required()) {\n result.push('required');\n }\n if (this.disabled()) {\n result.push('disabled');\n }\n\n if (this._required()) {\n const values = this._values();\n let found = false;\n\n if (values) {\n for (let value of values) {\n found = value.selected != undefined && value.selected;\n if (found) {\n break;\n }\n }\n }\n if(!found){\n result.push('notValid');\n }\n }\n\n this.styleClass.set(result.join(' '));\n }\n\n\n //==================================================================================================================\n // ACTIONS\n //==================================================================================================================\n protected toggle(value: InuSelectItem<T>) {\n if (this.disabled()) {\n return;\n }\n if (value.selected == undefined) {\n value.selected = true\n } else {\n value.selected = !value.selected;\n }\n\n const currentValues = this._values();\n if (currentValues) {\n const newSelectedValues: T[] = [];\n\n for (let selectItem of currentValues) {\n if (selectItem.selected) {\n newSelectedValues.push(selectItem.value);\n }\n }\n this.value.set(newSelectedValues);\n }\n\n this.initStyleClass();\n }\n\n\n protected getItemClass(selectItem: InuSelectItem<T>): string {\n return selectItem.styleClass!;\n }\n\n\n private match(valueItem: T, resultItem: InuSelectItem<T>) {\n return valueItem === resultItem.value;\n }\n}\n","<div [class]=\"styleClass()\">\n\n <div class=\"inu-checkbox-group-label-grp\">\n <div class=\"inu-checkbox-group-label\">\n @if (label()) {\n {{ label() }}\n }\n </div>\n @if (_required()) {\n <div class=\"inu-checkbox-group-required\">\n <inu-icon icon=\"required\" [size]=\"0.5\"></inu-icon>\n </div>\n }\n </div>\n <ul>\n @if (_values()) {\n @for (selectItem of _values(); track selectItem.value; ) {\n <li (click)=\"toggle(selectItem)\" [class]=\"getItemClass(selectItem)\">\n <div class=\"inu-checkbox-group-icon\">\n @if (selectItem.selected) {\n <inu-icon icon=\"check\" [size]=\"0.9\" tabindex=\"0\"></inu-icon>\n }\n </div>\n <div class=\"inu-checkbox-group-label\">\n <span>{{ selectItem.title! }}</span>\n </div>\n\n </li>\n }\n }\n </ul>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAaa,gBAAgB,CAAA;;;;;AAOlB,IAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,oDAAC;AACvB,IAAA,KAAK,GAAG,KAAK,CAAC,EAAE,iDAAC;IACjB,SAAS,GAAG,KAAK,CAAC,KAAK,sDAAG,KAAK,EAAE,UAAU,EAAA,CAAE;AAC7C,IAAA,MAAM,GAAG,KAAK,CAAqB,EAAE,kDAAC;AACtC,IAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,oDAAC;;AAIhC,IAAA,KAAK,GAAqB,KAAK,CAAM,EAAE,iDAAC;AACxC,IAAA,OAAO,GAAG,MAAM,CAAqB,EAAE,mDAAC;;AAGxC,IAAA,UAAU,GAAG,MAAM,CAAS,EAAE,sDAAC;;;;AAO/B,IAAA,WAAA,GAAA;QACE,MAAM,CAAC,MAAK;YACV,IAAI,CAAC,cAAc,EAAE;AACvB,QAAA,CAAC,CAAC;IACJ;IAEA,QAAQ,GAAA;QACN,IAAI,CAAC,eAAe,EAAE;IACxB;IAEQ,eAAe,GAAA;AAErB,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE;QAC5B,IAAI,CAAC,MAAM,EAAE;YACX;QACF;QAEA,MAAM,MAAM,GAAuB,EAAE;AACrC,QAAA,KAAK,IAAI,IAAI,IAAI,MAAM,EAAE;AACvB,YAAA,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;QACtC;AACA,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,EAAE;QACjC,IAAI,CAAC,YAAY,EAAE;YACjB;QACF;AAEA,QAAA,KAAK,IAAI,SAAS,IAAI,YAAY,EAAE;AAClC,YAAA,KAAK,IAAI,UAAU,IAAI,MAAM,EAAE;gBAC7B,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE;AACrC,oBAAA,UAAU,CAAC,QAAQ,GAAG,IAAI;oBAC1B;gBACF;YACF;QACF;AACA,QAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC;IAC1B;IAEQ,cAAc,GAAA;AACpB,QAAA,MAAM,MAAM,GAAa,CAAC,oBAAoB,CAAC;AAC/C,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;AACnB,YAAA,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;QACzB;AACA,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;AACpB,YAAA,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;QACzB;AACA,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;AACnB,YAAA,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;QACzB;AAEA,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;AACpB,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE;YAC7B,IAAI,KAAK,GAAG,KAAK;YAEjB,IAAI,MAAM,EAAE;AACV,gBAAA,KAAK,IAAI,KAAK,IAAI,MAAM,EAAE;oBACxB,KAAK,GAAG,KAAK,CAAC,QAAQ,IAAI,SAAS,IAAI,KAAK,CAAC,QAAQ;oBACrD,IAAI,KAAK,EAAE;wBACT;oBACF;gBACF;YACF;YACA,IAAG,CAAC,KAAK,EAAC;AACR,gBAAA,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;YACzB;QACF;AAEA,QAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACvC;;;;AAMU,IAAA,MAAM,CAAC,KAAuB,EAAA;AACtC,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;YACnB;QACF;AACA,QAAA,IAAI,KAAK,CAAC,QAAQ,IAAI,SAAS,EAAE;AAC/B,YAAA,KAAK,CAAC,QAAQ,GAAG,IAAI;QACvB;aAAO;AACL,YAAA,KAAK,CAAC,QAAQ,GAAG,CAAC,KAAK,CAAC,QAAQ;QAClC;AAEA,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,EAAE;QACpC,IAAI,aAAa,EAAE;YACjB,MAAM,iBAAiB,GAAQ,EAAE;AAEjC,YAAA,KAAK,IAAI,UAAU,IAAI,aAAa,EAAE;AACpC,gBAAA,IAAI,UAAU,CAAC,QAAQ,EAAE;AACvB,oBAAA,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;gBAC1C;YACF;AACA,YAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC;QACnC;QAEA,IAAI,CAAC,cAAc,EAAE;IACvB;AAGU,IAAA,YAAY,CAAC,UAA4B,EAAA;QACjD,OAAO,UAAU,CAAC,UAAW;IAC/B;IAGQ,KAAK,CAAC,SAAY,EAAE,UAA4B,EAAA;AACtD,QAAA,OAAO,SAAS,KAAK,UAAU,CAAC,KAAK;IACvC;uGApIW,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,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,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,aAAA,EAAA,EAAA,SAAA,EALhB,EAAE,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECRf,65BAgCA,k/CDvBY,OAAO,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,aAAA,EAAA,YAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAIN,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAR5B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,oBAAoB,cAClB,IAAI,EAAA,SAAA,EACL,EAAE,EAAA,OAAA,EACJ,CAAC,OAAO,CAAC,EAAA,QAAA,EAAA,65BAAA,EAAA,MAAA,EAAA,CAAA,07CAAA,CAAA,EAAA;;;AETpB;;AAEG;;;;"}

package/fesm2022/inugami-ng-components-inu-cite.mjs CHANGED Viewed

@@ -26,11 +26,11 @@ class InuCite {
         this.styleClass.set(['inu-cite', level].join(' '));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InuCite, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: InuCite, isStandalone: true, selector: "inu-cite", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null } }, providers: [InuTemplateRegistryService], ngImport: i0, template: "\n<cite [class]=\"styleClass()\">\n  <header>\n    <span>\n      @if(icon()){\n        <inu-icon [icon]=\"icon()\" [size]=\"2.5\"></inu-icon>\n      }\n    </span>\n    <div class=\"title\">\n      @if(titleTemplate()){\n        <ng-container *ngTemplateOutlet=\"titleTemplate()\"></ng-container>\n      } @else if (title()){\n        {{title()}}\n      }\n    </div>\n  </header>\n  <div class=\"content\">\n    <ng-content />\n  </div>\n\n</cite>\n", styles: [".inu-cite{border-left:.25rem solid var(--neutral);padding:1rem;margin:1rem;display:block;transition:border-left-color .15s}.inu-cite header{display:flex;margin-bottom:1rem;align-items:center;gap:.5rem}.inu-cite header div{flex:1}.inu-cite header i{width:32px;height:32px}.inu-cite.info{border-left:.25rem solid var(--info)}.inu-cite.info:hover{border-left:.25rem solid var(--info-light)}.inu-cite.info header i{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAACXAAAAlwHUBiyCAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAABJVJREFUWIXFl1tsVFUUhr+197QzZ6Y3Li1QW1pqI8QGjT4YEwxYgxgJRKOC1oDYBJqg8sILxAeIMVFD4oPBqEFsMRhiYqJBeFAxKg+YmqBgCE0EwVLkEilQoDNnbudsH4ZezqVOpzy4nmav9e///886e+/ZR4wx/J8RKXlG5pNWHFkKcheYhkJS/gZzAa0PEV13phQ6mVwHdkaxExsxbADuLQLuQ8wurNRHsClz5wbsnucwvAtm7iScjo9ziLsZa/2XUzUgpLq3A9sAKVF8JAwiO7AGXoftbhhg4jWQ6t4DvDRF4ZEQjNlCqnEOcdaFAkI7kOzeivB22AQzfBEz2Ie5dQmTGy6QlCeQRD1S24ZUzAm3YmQLic4dxQ3Yux/GqCOA8uRzSZz+7zFDf4ULjBBWN6HnLYOyhL/kILIIq/OX8UnlR4F6y5836evk+z4vKg5gbpwjf3IfJj3kL2lcE+iA10CyZymGdq/vDO7p/ZC9VVR8NHJJ3FNfgZP15oXFDPc8NrEBcZ/3c7kXesOepmiYzA3ci73BgjIejXEG3lAgKzxgJ4N75UTJ4iPh/vM7OIGzaCXjtvWYgXRDIzB7PNIMnQU375kt0Wr0/GfQC1YjsRlIrAa94NnRsdeBU+DwxhzsnoaRwdg5YKTejzTJQa94zTx0y3JMPgVOFt3WUcBlbwIG3daB038Ic/WPMY7UIOLzBdQD530GqA3ATM5rIGKBLsPt/xlz/TRq1oOgIriXjyKVDeh7nkbKKjEeilSAFuPWBTvgujdRvl0p3rE72AeV9ejmpTj2IO7lo4VCtArd8gTm+hncy7/6TMeCBhQ3xn6OulKXAsDY9EDKPfcTJn0V1boSdBRUBN26ApNP4Zz9DvAdbNHqoAHRo1pjBiorBwDbg6tuDk528zh/HkTKK1HTWpHqJiReh3v6ALj+FS9IzTw/g0208P69BlhlAz94pkerwgggOwwmX3hFt19T2FkhVY1IsAOH4OV0iAEA9vvRqnExqNIvTiiNamoPKcgBD8xTi6u9MNYeAIlNQ9+9HERPXlwE3bwMiU3zVy4Qz+2b2EChNW8G+Gpa0C1PgkzmXiKo5seRGfNDamYbdHn2ZfDfMF7ZDXwboJ3eipr1QFF5VbcQNTP02vgN8apPA/ggbpVDOroa6AuYqF1Y1IDU3R9MGk6RVR2wygngJ7wTpnfNxY18DYwxGsOeg4vD4Zk8Kdth85pe3wFmjqOcp4h1DYTNm3h5x7oGYO8ikrndCC8U7ArXhjLYdp6Unce2HVLpPKm0g3FvP8h4cZF9WGVdsDY5kUyR/bU2SYIO7N3v4ap3EJYcO3GVsojCsiLEopqZ02NYVoR4TBOPlwFnAOlFsZVY5+H/5p/sl5G1vhd4lOGP29ofmf2bElUO4DgGO13oxM3hHFeu2Q6u3EdFZ2D93JmBkajYcPL8xWPHrwymH7Jth2yusKZEIFquqaiI9JciXroBIO+4L1qxyMHamdb8REyLZUWIlmujNV/kDK+WyjfJb8NgrH3t8AfAxtvDD/e+v+SVqfBM2QDAmk0/LgL4bGf7kaly/AsYfKH6uyVp8AAAAABJRU5ErkJggg==)}.inu-cite.success{border-left:.25rem solid var(--success)}.inu-cite.success:hover{border-left:.25rem solid var(--success-light)}.inu-cite.success header i{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAACXAAAAlwHUBiyCAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAA3ZJREFUWIXNl89vVFUUxz/nvVfoTC3TOIWVG6QoIAUr0qRJNe3CpDF2Yk3UFdtKQmIgYAJxYZr4Y4GT1oUmzn9AiaJFSDfGF0KsqVVC0YQEK27ciKM02s7P946LN868znsz0xnG1LObe885n+89786594qqspVmbCkdsFoNnLJHO6NW5ANBImsR8/hbR+bWW8mziQqIzNgTPf6R89fG93ZZ0W8EmQSOdWWcr89fG9/r9/FiRBpmb7QH3r8+PgLuV6imRWQF5a4ajKHENmZiVVzmEXar6h5E4mCMnhm+bNfLv4lP4LwGAiJxhTjCIGGalZgKr3pipDTkTgJ1BdStwHuLL8U78rlfge2NhYZavqD6yLlnrt6r5VBzDyTtRK+Vz777AHCAbZbwdtJO9NZyCFQgef2FIy7upCDHgMgDwP2WF/hckdSZ4StfQgW6QcCMPdFTtPJ/toMoYmAYguM4G8aLyMNnh78oMzZ8gpMjl+4Df7QD/sS+Qwz0H6XD6qhMqKb98IAAz4mVdsB3xnfR/dAOHu874JuTQO6AAIGf2wEHyOWyrPxyp+Kg3K0rYHphrE8NxtoFv3FriUy20qFVeD65kNgXKmDKHu10XHM20OHaBC9Zt+s6s1PfJaIBAV1W9COUgTBArDvG/scOIhLcMgF4PlcL7vkr/dF1N/Xv73IrFkQ1pMfu6O7h8MGnME0L07T48fYyqm5t+PK3NeEV0ZoNVODv4toJ0O+rnQuFHPlCAYCd8V30738SwzDCy74JuAq31iLm65WK+BrR9MJYn+OaS9X7INIZZeDQUbZv87ryvfRvZUHNrBz4S0xz8PTQ3O1ABQBODc3/JC7z1VGZ7Do3lhfJZDNlcLMr91bLVT88IABA4dGw4Ew2w80flsoiyvA6Gy6ogN3VQyHbmj214v0imoYDqhrI3dJhFOmMlgQ1fw1seBgJ8rSiKSATiC5ZJrveLDwvcBHkubPDV+77J2reiJJ2ote1iu+ULp4tm6Ipo2i9eXpk7vew+f/vlQzg3OCnadBLLcJR+KQevKEAz8yPvWyaFlgU5QLCasBNWBXlgsAiqmlvyEgF/KrDGr8NRWbsF2Ol2xLgPUzEcC8Ch0tDN9U1Xn7j2cvlw3/Gnug5OfLZqv/+16KAcJteeCXiOGsfAphm14lTQ7M1/zX/iYB22Za/jv8Bs9OlfzR+46cAAAAASUVORK5CYII=)}.inu-cite.danger{border-left:.25rem solid var(--danger)}.inu-cite.danger:hover{border-left:.25rem solid var(--danger-light)}.inu-cite.danger header i{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAACXAAAAlwHUBiyCAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAitJREFUWIXFl89rE1EQgL95SUrbmH9BlIJ486C0PYhCaxALHvwBinjSQC2Cf41YC/4CD/XmzYuNB0ElEQIiXgStehIvLbQNJHF3PGjCxu5m3zwqzumxZOf7dmb2vY2oKv8ziqE3tudmj6rTWyAujqO7lRdvX4XkkZAKbFenz4vKE6D051KEaq1cbz6y5nJ7AAcoIPKgfWpm8Z8KZMD7IQrLVglvgRx4sISXgCc8SCJXwAg3S4x8C0bB3cEp3P4DAMTfvhCvf0pLoQJLk2uNlSxG5j6Q9+TFk/OUrl4HoPf4Pt10gX4lyJJIbYFP2bXbTaw7WT9LSqS2Y5eAd887CehogZESQwKWgUs+tXZyBTIlBgLmaU+0YGhtlHAAO3MzR0Rl1RsOwy3wq0BS4s5Wdfb4QEAK1IAxS5ahFvRMAgDOKYsDAUV/WjMMDZ6tAr9D4t5AIFZZBto2gaAZ6EdP4sLtgUBlrfFRVc8AO74ZdGODqNUkajXRzU0T3CmXJutvWvDXVrw9P31CRJ4BZUtGK3yi3njav7DrLPCVkEqF0rUlZHyC7sMV9Md3MxxSdsJ99eZLVV0gpx2li1conb1AsbrAWO1mEDxVwFci/rqeWH8OgkPecZzTDjd1CBmfIPrwLgieK+AjMSJy4eDxReQ7EyFwL4EACW+4t4BBwgQ3CXhImOFmgb4EyDmGz46uil62wiHwvyHA1uljh13kboATxN0rP3/9PiRPsMBexS+pJFTyCd7ipAAAAABJRU5ErkJggg==)}.inu-cite.warning{border-left:.25rem solid var(--warning)}.inu-cite.warning:hover{border-left:.25rem solid var(--warning-light)}.inu-cite.warning header i{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAdhAAAHYQGVw7i2AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAuxJREFUWIXFl81LVFEYxn/n3PlIG/rARY2SjKJlX+odp0UhFJVQEFFEEREF9Q/UQkvUTK12rqJVixbVH9DGItoUBCHNOCNRlFGbPghqUfg1jnNPC8eZOzkznnsVe3fnvOd9nuc+59z33CuUUvzP8LiufLsjwIz3MQC+1GG2vRl3AyNdC0j6+lCiFSVaSfr63MIIV1sQjQSR1kegPDMzjbTqaIp/dQrlzgFpddrIAVZhyQ43UM4dGAlXAh+Bsn8ySYx0HY2JL07g3DjQXYAcwM+sp9MpmDMHopFqpPUB8BdZkcJIb6Ex8VkX0pkDQnWXIAfwYsmrziB1HYibIZR4D/gAXr+b5da9SQTQdaGccEO2paRIexqIDH/SgdV3wJK98+RKweXBCUbH0iTG0lwanLCv9OJJdevC6gmItdQh1Nn54Z8JxfdfVjb97afF73Gbk0qcY7Rpy/IJkFYvtrYdKAOPkUsbBqwuE/YKg7TRtTwCEs2bUeJ0HrohqN6YK63eIPMEZeIMsZatSxdgyX4KXFo1VTnGUOVCdsBAqGtLE5Bo3g6cLJSqrcqVhoIFBQCcItbS6F6AJfuKrakJ5kwJVRaFkQjV405ANLITOF4sXaPnAMAJ4mazcwHSGiiVr807AyWNFJke4kBANBIGjpZCrVgrWBsQ+LwQrFjkLAt1jLi5S1/A3NOLgjlbhIIGoUqJ1OkmRVxYeBeMhCPAsI6AR89nmEkpTh4sdT/ZQondhKOv7FMLP0qVuIlQi5ID1G8yEForMyHUdeBQ/pTdgbi5ByVe6mD13Z3k/lASgPNH/PRcLF+kIht7MWMv5gf5u6fEgA7C1LTi4ZNkdvxgaIappPaHTV53zAmIRlqB/ToIfp9gXSDn/fo14Pdq78UB4ua+hQKkdUMXQUq4cyVAU71BU72H2+0BvTdhPpTIcs2dgbjZhhJPHUAsR7Rhxp7JjKL2FSYH6IDcFpj/QUCzXUA/8GMFyX+gRD+4/TdcxvgL80fLBXEqmb0AAAAASUVORK5CYII=)}.inu-cite .content{font-style:normal}\n"], dependencies: [{ kind: "component", type: InuIcon, selector: "inu-icon", inputs: ["icon", "styleclass", "size"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: InuCite, isStandalone: true, selector: "inu-cite", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null } }, providers: [InuTemplateRegistryService], ngImport: i0, template: "<ng-content />\n<cite [class]=\"styleClass()\">\n  <header>\n    <span>\n      @if(icon()){\n        <inu-icon [icon]=\"icon()\" [size]=\"2.5\"></inu-icon>\n      }\n    </span>\n    <div class=\"title\">\n      @if(titleTemplate()){\n        <ng-container *ngTemplateOutlet=\"titleTemplate()\"></ng-container>\n      } @else if (title()){\n        {{title()}}\n      }\n    </div>\n  </header>\n  <div class=\"content\">\n    <ng-content />\n  </div>\n\n</cite>\n", styles: [".inu-cite{border-left:.25rem solid var(--neutral);padding:1rem;margin:1rem;display:block;transition:border-left-color .15s}.inu-cite header{display:flex;margin-bottom:1rem;align-items:center;gap:.5rem}.inu-cite header div{flex:1}.inu-cite header i{width:32px;height:32px}.inu-cite.info{border-left:.25rem solid var(--info)}.inu-cite.info:hover{border-left:.25rem solid var(--info-light)}.inu-cite.info header i{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAACXAAAAlwHUBiyCAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAABJVJREFUWIXFl1tsVFUUhr+197QzZ6Y3Li1QW1pqI8QGjT4YEwxYgxgJRKOC1oDYBJqg8sILxAeIMVFD4oPBqEFsMRhiYqJBeFAxKg+YmqBgCE0EwVLkEilQoDNnbudsH4ZezqVOpzy4nmav9e///886e+/ZR4wx/J8RKXlG5pNWHFkKcheYhkJS/gZzAa0PEV13phQ6mVwHdkaxExsxbADuLQLuQ8wurNRHsClz5wbsnucwvAtm7iScjo9ziLsZa/2XUzUgpLq3A9sAKVF8JAwiO7AGXoftbhhg4jWQ6t4DvDRF4ZEQjNlCqnEOcdaFAkI7kOzeivB22AQzfBEz2Ie5dQmTGy6QlCeQRD1S24ZUzAm3YmQLic4dxQ3Yux/GqCOA8uRzSZz+7zFDf4ULjBBWN6HnLYOyhL/kILIIq/OX8UnlR4F6y5836evk+z4vKg5gbpwjf3IfJj3kL2lcE+iA10CyZymGdq/vDO7p/ZC9VVR8NHJJ3FNfgZP15oXFDPc8NrEBcZ/3c7kXesOepmiYzA3ci73BgjIejXEG3lAgKzxgJ4N75UTJ4iPh/vM7OIGzaCXjtvWYgXRDIzB7PNIMnQU375kt0Wr0/GfQC1YjsRlIrAa94NnRsdeBU+DwxhzsnoaRwdg5YKTejzTJQa94zTx0y3JMPgVOFt3WUcBlbwIG3daB038Ic/WPMY7UIOLzBdQD530GqA3ATM5rIGKBLsPt/xlz/TRq1oOgIriXjyKVDeh7nkbKKjEeilSAFuPWBTvgujdRvl0p3rE72AeV9ejmpTj2IO7lo4VCtArd8gTm+hncy7/6TMeCBhQ3xn6OulKXAsDY9EDKPfcTJn0V1boSdBRUBN26ApNP4Zz9DvAdbNHqoAHRo1pjBiorBwDbg6tuDk528zh/HkTKK1HTWpHqJiReh3v6ALj+FS9IzTw/g0208P69BlhlAz94pkerwgggOwwmX3hFt19T2FkhVY1IsAOH4OV0iAEA9vvRqnExqNIvTiiNamoPKcgBD8xTi6u9MNYeAIlNQ9+9HERPXlwE3bwMiU3zVy4Qz+2b2EChNW8G+Gpa0C1PgkzmXiKo5seRGfNDamYbdHn2ZfDfMF7ZDXwboJ3eipr1QFF5VbcQNTP02vgN8apPA/ggbpVDOroa6AuYqF1Y1IDU3R9MGk6RVR2wygngJ7wTpnfNxY18DYwxGsOeg4vD4Zk8Kdth85pe3wFmjqOcp4h1DYTNm3h5x7oGYO8ikrndCC8U7ArXhjLYdp6Unce2HVLpPKm0g3FvP8h4cZF9WGVdsDY5kUyR/bU2SYIO7N3v4ap3EJYcO3GVsojCsiLEopqZ02NYVoR4TBOPlwFnAOlFsZVY5+H/5p/sl5G1vhd4lOGP29ofmf2bElUO4DgGO13oxM3hHFeu2Q6u3EdFZ2D93JmBkajYcPL8xWPHrwymH7Jth2yusKZEIFquqaiI9JciXroBIO+4L1qxyMHamdb8REyLZUWIlmujNV/kDK+WyjfJb8NgrH3t8AfAxtvDD/e+v+SVqfBM2QDAmk0/LgL4bGf7kaly/AsYfKH6uyVp8AAAAABJRU5ErkJggg==)}.inu-cite.success{border-left:.25rem solid var(--success)}.inu-cite.success:hover{border-left:.25rem solid var(--success-light)}.inu-cite.success header i{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAACXAAAAlwHUBiyCAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAA3ZJREFUWIXNl89vVFUUxz/nvVfoTC3TOIWVG6QoIAUr0qRJNe3CpDF2Yk3UFdtKQmIgYAJxYZr4Y4GT1oUmzn9AiaJFSDfGF0KsqVVC0YQEK27ciKM02s7P946LN868znsz0xnG1LObe885n+89786594qqspVmbCkdsFoNnLJHO6NW5ANBImsR8/hbR+bWW8mziQqIzNgTPf6R89fG93ZZ0W8EmQSOdWWcr89fG9/r9/FiRBpmb7QH3r8+PgLuV6imRWQF5a4ajKHENmZiVVzmEXar6h5E4mCMnhm+bNfLv4lP4LwGAiJxhTjCIGGalZgKr3pipDTkTgJ1BdStwHuLL8U78rlfge2NhYZavqD6yLlnrt6r5VBzDyTtRK+Vz777AHCAbZbwdtJO9NZyCFQgef2FIy7upCDHgMgDwP2WF/hckdSZ4StfQgW6QcCMPdFTtPJ/toMoYmAYguM4G8aLyMNnh78oMzZ8gpMjl+4Df7QD/sS+Qwz0H6XD6qhMqKb98IAAz4mVdsB3xnfR/dAOHu874JuTQO6AAIGf2wEHyOWyrPxyp+Kg3K0rYHphrE8NxtoFv3FriUy20qFVeD65kNgXKmDKHu10XHM20OHaBC9Zt+s6s1PfJaIBAV1W9COUgTBArDvG/scOIhLcMgF4PlcL7vkr/dF1N/Xv73IrFkQ1pMfu6O7h8MGnME0L07T48fYyqm5t+PK3NeEV0ZoNVODv4toJ0O+rnQuFHPlCAYCd8V30738SwzDCy74JuAq31iLm65WK+BrR9MJYn+OaS9X7INIZZeDQUbZv87ryvfRvZUHNrBz4S0xz8PTQ3O1ABQBODc3/JC7z1VGZ7Do3lhfJZDNlcLMr91bLVT88IABA4dGw4Ew2w80flsoiyvA6Gy6ogN3VQyHbmj214v0imoYDqhrI3dJhFOmMlgQ1fw1seBgJ8rSiKSATiC5ZJrveLDwvcBHkubPDV+77J2reiJJ2ote1iu+ULp4tm6Ipo2i9eXpk7vew+f/vlQzg3OCnadBLLcJR+KQevKEAz8yPvWyaFlgU5QLCasBNWBXlgsAiqmlvyEgF/KrDGr8NRWbsF2Ol2xLgPUzEcC8Ch0tDN9U1Xn7j2cvlw3/Gnug5OfLZqv/+16KAcJteeCXiOGsfAphm14lTQ7M1/zX/iYB22Za/jv8Bs9OlfzR+46cAAAAASUVORK5CYII=)}.inu-cite.danger{border-left:.25rem solid var(--danger)}.inu-cite.danger:hover{border-left:.25rem solid var(--danger-light)}.inu-cite.danger header i{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAACXAAAAlwHUBiyCAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAitJREFUWIXFl89rE1EQgL95SUrbmH9BlIJ486C0PYhCaxALHvwBinjSQC2Cf41YC/4CD/XmzYuNB0ElEQIiXgStehIvLbQNJHF3PGjCxu5m3zwqzumxZOf7dmb2vY2oKv8ziqE3tudmj6rTWyAujqO7lRdvX4XkkZAKbFenz4vKE6D051KEaq1cbz6y5nJ7AAcoIPKgfWpm8Z8KZMD7IQrLVglvgRx4sISXgCc8SCJXwAg3S4x8C0bB3cEp3P4DAMTfvhCvf0pLoQJLk2uNlSxG5j6Q9+TFk/OUrl4HoPf4Pt10gX4lyJJIbYFP2bXbTaw7WT9LSqS2Y5eAd887CehogZESQwKWgUs+tXZyBTIlBgLmaU+0YGhtlHAAO3MzR0Rl1RsOwy3wq0BS4s5Wdfb4QEAK1IAxS5ahFvRMAgDOKYsDAUV/WjMMDZ6tAr9D4t5AIFZZBto2gaAZ6EdP4sLtgUBlrfFRVc8AO74ZdGODqNUkajXRzU0T3CmXJutvWvDXVrw9P31CRJ4BZUtGK3yi3njav7DrLPCVkEqF0rUlZHyC7sMV9Md3MxxSdsJ99eZLVV0gpx2li1conb1AsbrAWO1mEDxVwFci/rqeWH8OgkPecZzTDjd1CBmfIPrwLgieK+AjMSJy4eDxReQ7EyFwL4EACW+4t4BBwgQ3CXhImOFmgb4EyDmGz46uil62wiHwvyHA1uljh13kboATxN0rP3/9PiRPsMBexS+pJFTyCd7ipAAAAABJRU5ErkJggg==)}.inu-cite.warning{border-left:.25rem solid var(--warning)}.inu-cite.warning:hover{border-left:.25rem solid var(--warning-light)}.inu-cite.warning header i{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAdhAAAHYQGVw7i2AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAuxJREFUWIXFl81LVFEYxn/n3PlIG/rARY2SjKJlX+odp0UhFJVQEFFEEREF9Q/UQkvUTK12rqJVixbVH9DGItoUBCHNOCNRlFGbPghqUfg1jnNPC8eZOzkznnsVe3fnvOd9nuc+59z33CuUUvzP8LiufLsjwIz3MQC+1GG2vRl3AyNdC0j6+lCiFSVaSfr63MIIV1sQjQSR1kegPDMzjbTqaIp/dQrlzgFpddrIAVZhyQ43UM4dGAlXAh+Bsn8ySYx0HY2JL07g3DjQXYAcwM+sp9MpmDMHopFqpPUB8BdZkcJIb6Ex8VkX0pkDQnWXIAfwYsmrziB1HYibIZR4D/gAXr+b5da9SQTQdaGccEO2paRIexqIDH/SgdV3wJK98+RKweXBCUbH0iTG0lwanLCv9OJJdevC6gmItdQh1Nn54Z8JxfdfVjb97afF73Gbk0qcY7Rpy/IJkFYvtrYdKAOPkUsbBqwuE/YKg7TRtTwCEs2bUeJ0HrohqN6YK63eIPMEZeIMsZatSxdgyX4KXFo1VTnGUOVCdsBAqGtLE5Bo3g6cLJSqrcqVhoIFBQCcItbS6F6AJfuKrakJ5kwJVRaFkQjV405ANLITOF4sXaPnAMAJ4mazcwHSGiiVr807AyWNFJke4kBANBIGjpZCrVgrWBsQ+LwQrFjkLAt1jLi5S1/A3NOLgjlbhIIGoUqJ1OkmRVxYeBeMhCPAsI6AR89nmEkpTh4sdT/ZQondhKOv7FMLP0qVuIlQi5ID1G8yEForMyHUdeBQ/pTdgbi5ByVe6mD13Z3k/lASgPNH/PRcLF+kIht7MWMv5gf5u6fEgA7C1LTi4ZNkdvxgaIappPaHTV53zAmIRlqB/ToIfp9gXSDn/fo14Pdq78UB4ua+hQKkdUMXQUq4cyVAU71BU72H2+0BvTdhPpTIcs2dgbjZhhJPHUAsR7Rhxp7JjKL2FSYH6IDcFpj/QUCzXUA/8GMFyX+gRD+4/TdcxvgL80fLBXEqmb0AAAAASUVORK5CYII=)}.inu-cite .content{font-style:normal}\n"], dependencies: [{ kind: "component", type: InuIcon, selector: "inu-icon", inputs: ["icon", "defaultIcon", "styleclass", "size"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InuCite, decorators: [{
             type: Component,
-            args: [{ selector: 'inu-cite', standalone: true, providers: [InuTemplateRegistryService], imports: [InuIcon, NgTemplateOutlet], template: "\n<cite [class]=\"styleClass()\">\n  <header>\n    <span>\n      @if(icon()){\n        <inu-icon [icon]=\"icon()\" [size]=\"2.5\"></inu-icon>\n      }\n    </span>\n    <div class=\"title\">\n      @if(titleTemplate()){\n        <ng-container *ngTemplateOutlet=\"titleTemplate()\"></ng-container>\n      } @else if (title()){\n        {{title()}}\n      }\n    </div>\n  </header>\n  <div class=\"content\">\n    <ng-content />\n  </div>\n\n</cite>\n", styles: [".inu-cite{border-left:.25rem solid var(--neutral);padding:1rem;margin:1rem;display:block;transition:border-left-color .15s}.inu-cite header{display:flex;margin-bottom:1rem;align-items:center;gap:.5rem}.inu-cite header div{flex:1}.inu-cite header i{width:32px;height:32px}.inu-cite.info{border-left:.25rem solid var(--info)}.inu-cite.info:hover{border-left:.25rem solid var(--info-light)}.inu-cite.info header i{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAACXAAAAlwHUBiyCAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAABJVJREFUWIXFl1tsVFUUhr+197QzZ6Y3Li1QW1pqI8QGjT4YEwxYgxgJRKOC1oDYBJqg8sILxAeIMVFD4oPBqEFsMRhiYqJBeFAxKg+YmqBgCE0EwVLkEilQoDNnbudsH4ZezqVOpzy4nmav9e///886e+/ZR4wx/J8RKXlG5pNWHFkKcheYhkJS/gZzAa0PEV13phQ6mVwHdkaxExsxbADuLQLuQ8wurNRHsClz5wbsnucwvAtm7iScjo9ziLsZa/2XUzUgpLq3A9sAKVF8JAwiO7AGXoftbhhg4jWQ6t4DvDRF4ZEQjNlCqnEOcdaFAkI7kOzeivB22AQzfBEz2Ie5dQmTGy6QlCeQRD1S24ZUzAm3YmQLic4dxQ3Yux/GqCOA8uRzSZz+7zFDf4ULjBBWN6HnLYOyhL/kILIIq/OX8UnlR4F6y5836evk+z4vKg5gbpwjf3IfJj3kL2lcE+iA10CyZymGdq/vDO7p/ZC9VVR8NHJJ3FNfgZP15oXFDPc8NrEBcZ/3c7kXesOepmiYzA3ci73BgjIejXEG3lAgKzxgJ4N75UTJ4iPh/vM7OIGzaCXjtvWYgXRDIzB7PNIMnQU375kt0Wr0/GfQC1YjsRlIrAa94NnRsdeBU+DwxhzsnoaRwdg5YKTejzTJQa94zTx0y3JMPgVOFt3WUcBlbwIG3daB038Ic/WPMY7UIOLzBdQD530GqA3ATM5rIGKBLsPt/xlz/TRq1oOgIriXjyKVDeh7nkbKKjEeilSAFuPWBTvgujdRvl0p3rE72AeV9ejmpTj2IO7lo4VCtArd8gTm+hncy7/6TMeCBhQ3xn6OulKXAsDY9EDKPfcTJn0V1boSdBRUBN26ApNP4Zz9DvAdbNHqoAHRo1pjBiorBwDbg6tuDk528zh/HkTKK1HTWpHqJiReh3v6ALj+FS9IzTw/g0208P69BlhlAz94pkerwgggOwwmX3hFt19T2FkhVY1IsAOH4OV0iAEA9vvRqnExqNIvTiiNamoPKcgBD8xTi6u9MNYeAIlNQ9+9HERPXlwE3bwMiU3zVy4Qz+2b2EChNW8G+Gpa0C1PgkzmXiKo5seRGfNDamYbdHn2ZfDfMF7ZDXwboJ3eipr1QFF5VbcQNTP02vgN8apPA/ggbpVDOroa6AuYqF1Y1IDU3R9MGk6RVR2wygngJ7wTpnfNxY18DYwxGsOeg4vD4Zk8Kdth85pe3wFmjqOcp4h1DYTNm3h5x7oGYO8ikrndCC8U7ArXhjLYdp6Unce2HVLpPKm0g3FvP8h4cZF9WGVdsDY5kUyR/bU2SYIO7N3v4ap3EJYcO3GVsojCsiLEopqZ02NYVoR4TBOPlwFnAOlFsZVY5+H/5p/sl5G1vhd4lOGP29ofmf2bElUO4DgGO13oxM3hHFeu2Q6u3EdFZ2D93JmBkajYcPL8xWPHrwymH7Jth2yusKZEIFquqaiI9JciXroBIO+4L1qxyMHamdb8REyLZUWIlmujNV/kDK+WyjfJb8NgrH3t8AfAxtvDD/e+v+SVqfBM2QDAmk0/LgL4bGf7kaly/AsYfKH6uyVp8AAAAABJRU5ErkJggg==)}.inu-cite.success{border-left:.25rem solid var(--success)}.inu-cite.success:hover{border-left:.25rem solid var(--success-light)}.inu-cite.success header i{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAACXAAAAlwHUBiyCAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAA3ZJREFUWIXNl89vVFUUxz/nvVfoTC3TOIWVG6QoIAUr0qRJNe3CpDF2Yk3UFdtKQmIgYAJxYZr4Y4GT1oUmzn9AiaJFSDfGF0KsqVVC0YQEK27ciKM02s7P946LN868znsz0xnG1LObe885n+89786594qqspVmbCkdsFoNnLJHO6NW5ANBImsR8/hbR+bWW8mziQqIzNgTPf6R89fG93ZZ0W8EmQSOdWWcr89fG9/r9/FiRBpmb7QH3r8+PgLuV6imRWQF5a4ajKHENmZiVVzmEXar6h5E4mCMnhm+bNfLv4lP4LwGAiJxhTjCIGGalZgKr3pipDTkTgJ1BdStwHuLL8U78rlfge2NhYZavqD6yLlnrt6r5VBzDyTtRK+Vz777AHCAbZbwdtJO9NZyCFQgef2FIy7upCDHgMgDwP2WF/hckdSZ4StfQgW6QcCMPdFTtPJ/toMoYmAYguM4G8aLyMNnh78oMzZ8gpMjl+4Df7QD/sS+Qwz0H6XD6qhMqKb98IAAz4mVdsB3xnfR/dAOHu874JuTQO6AAIGf2wEHyOWyrPxyp+Kg3K0rYHphrE8NxtoFv3FriUy20qFVeD65kNgXKmDKHu10XHM20OHaBC9Zt+s6s1PfJaIBAV1W9COUgTBArDvG/scOIhLcMgF4PlcL7vkr/dF1N/Xv73IrFkQ1pMfu6O7h8MGnME0L07T48fYyqm5t+PK3NeEV0ZoNVODv4toJ0O+rnQuFHPlCAYCd8V30738SwzDCy74JuAq31iLm65WK+BrR9MJYn+OaS9X7INIZZeDQUbZv87ryvfRvZUHNrBz4S0xz8PTQ3O1ABQBODc3/JC7z1VGZ7Do3lhfJZDNlcLMr91bLVT88IABA4dGw4Ew2w80flsoiyvA6Gy6ogN3VQyHbmj214v0imoYDqhrI3dJhFOmMlgQ1fw1seBgJ8rSiKSATiC5ZJrveLDwvcBHkubPDV+77J2reiJJ2ote1iu+ULp4tm6Ipo2i9eXpk7vew+f/vlQzg3OCnadBLLcJR+KQevKEAz8yPvWyaFlgU5QLCasBNWBXlgsAiqmlvyEgF/KrDGr8NRWbsF2Ol2xLgPUzEcC8Ch0tDN9U1Xn7j2cvlw3/Gnug5OfLZqv/+16KAcJteeCXiOGsfAphm14lTQ7M1/zX/iYB22Za/jv8Bs9OlfzR+46cAAAAASUVORK5CYII=)}.inu-cite.danger{border-left:.25rem solid var(--danger)}.inu-cite.danger:hover{border-left:.25rem solid var(--danger-light)}.inu-cite.danger header i{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAACXAAAAlwHUBiyCAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAitJREFUWIXFl89rE1EQgL95SUrbmH9BlIJ486C0PYhCaxALHvwBinjSQC2Cf41YC/4CD/XmzYuNB0ElEQIiXgStehIvLbQNJHF3PGjCxu5m3zwqzumxZOf7dmb2vY2oKv8ziqE3tudmj6rTWyAujqO7lRdvX4XkkZAKbFenz4vKE6D051KEaq1cbz6y5nJ7AAcoIPKgfWpm8Z8KZMD7IQrLVglvgRx4sISXgCc8SCJXwAg3S4x8C0bB3cEp3P4DAMTfvhCvf0pLoQJLk2uNlSxG5j6Q9+TFk/OUrl4HoPf4Pt10gX4lyJJIbYFP2bXbTaw7WT9LSqS2Y5eAd887CehogZESQwKWgUs+tXZyBTIlBgLmaU+0YGhtlHAAO3MzR0Rl1RsOwy3wq0BS4s5Wdfb4QEAK1IAxS5ahFvRMAgDOKYsDAUV/WjMMDZ6tAr9D4t5AIFZZBto2gaAZ6EdP4sLtgUBlrfFRVc8AO74ZdGODqNUkajXRzU0T3CmXJutvWvDXVrw9P31CRJ4BZUtGK3yi3njav7DrLPCVkEqF0rUlZHyC7sMV9Md3MxxSdsJ99eZLVV0gpx2li1conb1AsbrAWO1mEDxVwFci/rqeWH8OgkPecZzTDjd1CBmfIPrwLgieK+AjMSJy4eDxReQ7EyFwL4EACW+4t4BBwgQ3CXhImOFmgb4EyDmGz46uil62wiHwvyHA1uljh13kboATxN0rP3/9PiRPsMBexS+pJFTyCd7ipAAAAABJRU5ErkJggg==)}.inu-cite.warning{border-left:.25rem solid var(--warning)}.inu-cite.warning:hover{border-left:.25rem solid var(--warning-light)}.inu-cite.warning header i{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAdhAAAHYQGVw7i2AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAuxJREFUWIXFl81LVFEYxn/n3PlIG/rARY2SjKJlX+odp0UhFJVQEFFEEREF9Q/UQkvUTK12rqJVixbVH9DGItoUBCHNOCNRlFGbPghqUfg1jnNPC8eZOzkznnsVe3fnvOd9nuc+59z33CuUUvzP8LiufLsjwIz3MQC+1GG2vRl3AyNdC0j6+lCiFSVaSfr63MIIV1sQjQSR1kegPDMzjbTqaIp/dQrlzgFpddrIAVZhyQ43UM4dGAlXAh+Bsn8ySYx0HY2JL07g3DjQXYAcwM+sp9MpmDMHopFqpPUB8BdZkcJIb6Ex8VkX0pkDQnWXIAfwYsmrziB1HYibIZR4D/gAXr+b5da9SQTQdaGccEO2paRIexqIDH/SgdV3wJK98+RKweXBCUbH0iTG0lwanLCv9OJJdevC6gmItdQh1Nn54Z8JxfdfVjb97afF73Gbk0qcY7Rpy/IJkFYvtrYdKAOPkUsbBqwuE/YKg7TRtTwCEs2bUeJ0HrohqN6YK63eIPMEZeIMsZatSxdgyX4KXFo1VTnGUOVCdsBAqGtLE5Bo3g6cLJSqrcqVhoIFBQCcItbS6F6AJfuKrakJ5kwJVRaFkQjV405ANLITOF4sXaPnAMAJ4mazcwHSGiiVr807AyWNFJke4kBANBIGjpZCrVgrWBsQ+LwQrFjkLAt1jLi5S1/A3NOLgjlbhIIGoUqJ1OkmRVxYeBeMhCPAsI6AR89nmEkpTh4sdT/ZQondhKOv7FMLP0qVuIlQi5ID1G8yEForMyHUdeBQ/pTdgbi5ByVe6mD13Z3k/lASgPNH/PRcLF+kIht7MWMv5gf5u6fEgA7C1LTi4ZNkdvxgaIappPaHTV53zAmIRlqB/ToIfp9gXSDn/fo14Pdq78UB4ua+hQKkdUMXQUq4cyVAU71BU72H2+0BvTdhPpTIcs2dgbjZhhJPHUAsR7Rhxp7JjKL2FSYH6IDcFpj/QUCzXUA/8GMFyX+gRD+4/TdcxvgL80fLBXEqmb0AAAAASUVORK5CYII=)}.inu-cite .content{font-style:normal}\n"] }]
+            args: [{ selector: 'inu-cite', standalone: true, providers: [InuTemplateRegistryService], imports: [InuIcon, NgTemplateOutlet], template: "<ng-content />\n<cite [class]=\"styleClass()\">\n  <header>\n    <span>\n      @if(icon()){\n        <inu-icon [icon]=\"icon()\" [size]=\"2.5\"></inu-icon>\n      }\n    </span>\n    <div class=\"title\">\n      @if(titleTemplate()){\n        <ng-container *ngTemplateOutlet=\"titleTemplate()\"></ng-container>\n      } @else if (title()){\n        {{title()}}\n      }\n    </div>\n  </header>\n  <div class=\"content\">\n    <ng-content />\n  </div>\n\n</cite>\n", styles: [".inu-cite{border-left:.25rem solid var(--neutral);padding:1rem;margin:1rem;display:block;transition:border-left-color .15s}.inu-cite header{display:flex;margin-bottom:1rem;align-items:center;gap:.5rem}.inu-cite header div{flex:1}.inu-cite header i{width:32px;height:32px}.inu-cite.info{border-left:.25rem solid var(--info)}.inu-cite.info:hover{border-left:.25rem solid var(--info-light)}.inu-cite.info header i{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAACXAAAAlwHUBiyCAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAABJVJREFUWIXFl1tsVFUUhr+197QzZ6Y3Li1QW1pqI8QGjT4YEwxYgxgJRKOC1oDYBJqg8sILxAeIMVFD4oPBqEFsMRhiYqJBeFAxKg+YmqBgCE0EwVLkEilQoDNnbudsH4ZezqVOpzy4nmav9e///886e+/ZR4wx/J8RKXlG5pNWHFkKcheYhkJS/gZzAa0PEV13phQ6mVwHdkaxExsxbADuLQLuQ8wurNRHsClz5wbsnucwvAtm7iScjo9ziLsZa/2XUzUgpLq3A9sAKVF8JAwiO7AGXoftbhhg4jWQ6t4DvDRF4ZEQjNlCqnEOcdaFAkI7kOzeivB22AQzfBEz2Ie5dQmTGy6QlCeQRD1S24ZUzAm3YmQLic4dxQ3Yux/GqCOA8uRzSZz+7zFDf4ULjBBWN6HnLYOyhL/kILIIq/OX8UnlR4F6y5836evk+z4vKg5gbpwjf3IfJj3kL2lcE+iA10CyZymGdq/vDO7p/ZC9VVR8NHJJ3FNfgZP15oXFDPc8NrEBcZ/3c7kXesOepmiYzA3ci73BgjIejXEG3lAgKzxgJ4N75UTJ4iPh/vM7OIGzaCXjtvWYgXRDIzB7PNIMnQU375kt0Wr0/GfQC1YjsRlIrAa94NnRsdeBU+DwxhzsnoaRwdg5YKTejzTJQa94zTx0y3JMPgVOFt3WUcBlbwIG3daB038Ic/WPMY7UIOLzBdQD530GqA3ATM5rIGKBLsPt/xlz/TRq1oOgIriXjyKVDeh7nkbKKjEeilSAFuPWBTvgujdRvl0p3rE72AeV9ejmpTj2IO7lo4VCtArd8gTm+hncy7/6TMeCBhQ3xn6OulKXAsDY9EDKPfcTJn0V1boSdBRUBN26ApNP4Zz9DvAdbNHqoAHRo1pjBiorBwDbg6tuDk528zh/HkTKK1HTWpHqJiReh3v6ALj+FS9IzTw/g0208P69BlhlAz94pkerwgggOwwmX3hFt19T2FkhVY1IsAOH4OV0iAEA9vvRqnExqNIvTiiNamoPKcgBD8xTi6u9MNYeAIlNQ9+9HERPXlwE3bwMiU3zVy4Qz+2b2EChNW8G+Gpa0C1PgkzmXiKo5seRGfNDamYbdHn2ZfDfMF7ZDXwboJ3eipr1QFF5VbcQNTP02vgN8apPA/ggbpVDOroa6AuYqF1Y1IDU3R9MGk6RVR2wygngJ7wTpnfNxY18DYwxGsOeg4vD4Zk8Kdth85pe3wFmjqOcp4h1DYTNm3h5x7oGYO8ikrndCC8U7ArXhjLYdp6Unce2HVLpPKm0g3FvP8h4cZF9WGVdsDY5kUyR/bU2SYIO7N3v4ap3EJYcO3GVsojCsiLEopqZ02NYVoR4TBOPlwFnAOlFsZVY5+H/5p/sl5G1vhd4lOGP29ofmf2bElUO4DgGO13oxM3hHFeu2Q6u3EdFZ2D93JmBkajYcPL8xWPHrwymH7Jth2yusKZEIFquqaiI9JciXroBIO+4L1qxyMHamdb8REyLZUWIlmujNV/kDK+WyjfJb8NgrH3t8AfAxtvDD/e+v+SVqfBM2QDAmk0/LgL4bGf7kaly/AsYfKH6uyVp8AAAAABJRU5ErkJggg==)}.inu-cite.success{border-left:.25rem solid var(--success)}.inu-cite.success:hover{border-left:.25rem solid var(--success-light)}.inu-cite.success header i{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAACXAAAAlwHUBiyCAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAA3ZJREFUWIXNl89vVFUUxz/nvVfoTC3TOIWVG6QoIAUr0qRJNe3CpDF2Yk3UFdtKQmIgYAJxYZr4Y4GT1oUmzn9AiaJFSDfGF0KsqVVC0YQEK27ciKM02s7P946LN868znsz0xnG1LObe885n+89786594qqspVmbCkdsFoNnLJHO6NW5ANBImsR8/hbR+bWW8mziQqIzNgTPf6R89fG93ZZ0W8EmQSOdWWcr89fG9/r9/FiRBpmb7QH3r8+PgLuV6imRWQF5a4ajKHENmZiVVzmEXar6h5E4mCMnhm+bNfLv4lP4LwGAiJxhTjCIGGalZgKr3pipDTkTgJ1BdStwHuLL8U78rlfge2NhYZavqD6yLlnrt6r5VBzDyTtRK+Vz777AHCAbZbwdtJO9NZyCFQgef2FIy7upCDHgMgDwP2WF/hckdSZ4StfQgW6QcCMPdFTtPJ/toMoYmAYguM4G8aLyMNnh78oMzZ8gpMjl+4Df7QD/sS+Qwz0H6XD6qhMqKb98IAAz4mVdsB3xnfR/dAOHu874JuTQO6AAIGf2wEHyOWyrPxyp+Kg3K0rYHphrE8NxtoFv3FriUy20qFVeD65kNgXKmDKHu10XHM20OHaBC9Zt+s6s1PfJaIBAV1W9COUgTBArDvG/scOIhLcMgF4PlcL7vkr/dF1N/Xv73IrFkQ1pMfu6O7h8MGnME0L07T48fYyqm5t+PK3NeEV0ZoNVODv4toJ0O+rnQuFHPlCAYCd8V30738SwzDCy74JuAq31iLm65WK+BrR9MJYn+OaS9X7INIZZeDQUbZv87ryvfRvZUHNrBz4S0xz8PTQ3O1ABQBODc3/JC7z1VGZ7Do3lhfJZDNlcLMr91bLVT88IABA4dGw4Ew2w80flsoiyvA6Gy6ogN3VQyHbmj214v0imoYDqhrI3dJhFOmMlgQ1fw1seBgJ8rSiKSATiC5ZJrveLDwvcBHkubPDV+77J2reiJJ2ote1iu+ULp4tm6Ipo2i9eXpk7vew+f/vlQzg3OCnadBLLcJR+KQevKEAz8yPvWyaFlgU5QLCasBNWBXlgsAiqmlvyEgF/KrDGr8NRWbsF2Ol2xLgPUzEcC8Ch0tDN9U1Xn7j2cvlw3/Gnug5OfLZqv/+16KAcJteeCXiOGsfAphm14lTQ7M1/zX/iYB22Za/jv8Bs9OlfzR+46cAAAAASUVORK5CYII=)}.inu-cite.danger{border-left:.25rem solid var(--danger)}.inu-cite.danger:hover{border-left:.25rem solid var(--danger-light)}.inu-cite.danger header i{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAACXAAAAlwHUBiyCAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAitJREFUWIXFl89rE1EQgL95SUrbmH9BlIJ486C0PYhCaxALHvwBinjSQC2Cf41YC/4CD/XmzYuNB0ElEQIiXgStehIvLbQNJHF3PGjCxu5m3zwqzumxZOf7dmb2vY2oKv8ziqE3tudmj6rTWyAujqO7lRdvX4XkkZAKbFenz4vKE6D051KEaq1cbz6y5nJ7AAcoIPKgfWpm8Z8KZMD7IQrLVglvgRx4sISXgCc8SCJXwAg3S4x8C0bB3cEp3P4DAMTfvhCvf0pLoQJLk2uNlSxG5j6Q9+TFk/OUrl4HoPf4Pt10gX4lyJJIbYFP2bXbTaw7WT9LSqS2Y5eAd887CehogZESQwKWgUs+tXZyBTIlBgLmaU+0YGhtlHAAO3MzR0Rl1RsOwy3wq0BS4s5Wdfb4QEAK1IAxS5ahFvRMAgDOKYsDAUV/WjMMDZ6tAr9D4t5AIFZZBto2gaAZ6EdP4sLtgUBlrfFRVc8AO74ZdGODqNUkajXRzU0T3CmXJutvWvDXVrw9P31CRJ4BZUtGK3yi3njav7DrLPCVkEqF0rUlZHyC7sMV9Md3MxxSdsJ99eZLVV0gpx2li1conb1AsbrAWO1mEDxVwFci/rqeWH8OgkPecZzTDjd1CBmfIPrwLgieK+AjMSJy4eDxReQ7EyFwL4EACW+4t4BBwgQ3CXhImOFmgb4EyDmGz46uil62wiHwvyHA1uljh13kboATxN0rP3/9PiRPsMBexS+pJFTyCd7ipAAAAABJRU5ErkJggg==)}.inu-cite.warning{border-left:.25rem solid var(--warning)}.inu-cite.warning:hover{border-left:.25rem solid var(--warning-light)}.inu-cite.warning header i{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAdhAAAHYQGVw7i2AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAuxJREFUWIXFl81LVFEYxn/n3PlIG/rARY2SjKJlX+odp0UhFJVQEFFEEREF9Q/UQkvUTK12rqJVixbVH9DGItoUBCHNOCNRlFGbPghqUfg1jnNPC8eZOzkznnsVe3fnvOd9nuc+59z33CuUUvzP8LiufLsjwIz3MQC+1GG2vRl3AyNdC0j6+lCiFSVaSfr63MIIV1sQjQSR1kegPDMzjbTqaIp/dQrlzgFpddrIAVZhyQ43UM4dGAlXAh+Bsn8ySYx0HY2JL07g3DjQXYAcwM+sp9MpmDMHopFqpPUB8BdZkcJIb6Ex8VkX0pkDQnWXIAfwYsmrziB1HYibIZR4D/gAXr+b5da9SQTQdaGccEO2paRIexqIDH/SgdV3wJK98+RKweXBCUbH0iTG0lwanLCv9OJJdevC6gmItdQh1Nn54Z8JxfdfVjb97afF73Gbk0qcY7Rpy/IJkFYvtrYdKAOPkUsbBqwuE/YKg7TRtTwCEs2bUeJ0HrohqN6YK63eIPMEZeIMsZatSxdgyX4KXFo1VTnGUOVCdsBAqGtLE5Bo3g6cLJSqrcqVhoIFBQCcItbS6F6AJfuKrakJ5kwJVRaFkQjV405ANLITOF4sXaPnAMAJ4mazcwHSGiiVr807AyWNFJke4kBANBIGjpZCrVgrWBsQ+LwQrFjkLAt1jLi5S1/A3NOLgjlbhIIGoUqJ1OkmRVxYeBeMhCPAsI6AR89nmEkpTh4sdT/ZQondhKOv7FMLP0qVuIlQi5ID1G8yEForMyHUdeBQ/pTdgbi5ByVe6mD13Z3k/lASgPNH/PRcLF+kIht7MWMv5gf5u6fEgA7C1LTi4ZNkdvxgaIappPaHTV53zAmIRlqB/ToIfp9gXSDn/fo14Pdq78UB4ua+hQKkdUMXQUq4cyVAU71BU72H2+0BvTdhPpTIcs2dgbjZhhJPHUAsR7Rhxp7JjKL2FSYH6IDcFpj/QUCzXUA/8GMFyX+gRD+4/TdcxvgL80fLBXEqmb0AAAAASUVORK5CYII=)}.inu-cite .content{font-style:normal}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }] } });
 /**

package/fesm2022/inugami-ng-components-inu-cite.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"inugami-ng-components-inu-cite.mjs","sources":["../../../projects/inugami-ng/components/inu-cite/inu-cite.ts","../../../projects/inugami-ng/components/inu-cite/inu-cite.html","../../../projects/inugami-ng/components/inu-cite/inugami-ng-components-inu-cite.ts"],"sourcesContent":["import {\n Component~~,\n~~ computed~~,\n~~ inject~~,\n~~ input~~,\n~~ OnInit~~,\n~~ signal~~,\n TemplateRef,\n viewChildren,\n~~ WritableSignal\n} from '@angular/core';\nimport {InuIcon} from 'inugami-icons';\nimport {~~InugamiTemplateDirective,~~ InuTemplateRegistryService} from 'inugami-ng/directives';\nimport {NgTemplateOutlet} from '@angular/common';\n\n@Component({\n selector: 'inu-cite',\n standalone: true,\n providers: [InuTemplateRegistryService],\n imports: [InuIcon,NgTemplateOutlet],\n templateUrl: './inu-cite.html',\n styleUrl: './inu-cite.scss',\n})\nexport class InuCite implements OnInit {\n\n //==================================================================================================================\n // ATTRIBUTES\n //==================================================================================================================\n title = input<string \| undefined \| null>('');\n level = input<string \| undefined \| null>('');\n\n icon: WritableSignal<string \| null> = signal<string \| null>(null);\n styleClass: WritableSignal<string \| null> = signal<string \| null>(null);\n titleTemplate = computed(() => this.registry.getTemplate('title'));\n registry: InuTemplateRegistryService = inject(InuTemplateRegistryService);\n\n ngOnInit(): void {\n this.level();\n const level = this.level()?.toLowerCase() \|\| '';\n const icons: Record<string, string> = {\n success: 'approval',\n warning: 'warning',\n danger: 'danger',\n };\n\n this.icon.set(icons[level] \|\| 'idea');\n\n this.styleClass.set(['inu-cite', level].join(' '));\n\n }\n}\n","\n<cite [class]=\"styleClass()\">\n <header>\n <span>\n @if(icon()){\n <inu-icon [icon]=\"icon()\" [size]=\"2.5\"></inu-icon>\n }\n </span>\n <div class=\"title\">\n @if(titleTemplate()){\n <ng-container ngTemplateOutlet=\"titleTemplate()\"></ng-container>\n } @else if (title()){\n {{title()}}\n }\n </div>\n </header>\n <div class=\"content\">\n <ng-content />\n </div>\n\n</cite>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;~~MAuBa~~,OAAO,CAAA;;;;AAKlB,IAAA,KAAK,GAAG,KAAK,CAA4B,EAAE,iDAAC;AAC5C,IAAA,KAAK,GAAG,KAAK,CAA4B,EAAE,iDAAC;AAE5C,IAAA,IAAI,GAAkC,MAAM,CAAgB,IAAI,gDAAC;AACjE,IAAA,UAAU,GAAkC,MAAM,CAAgB,IAAI,sDAAC;AACvE,IAAA,aAAa,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,yDAAC;AAClE,IAAA,QAAQ,GAA+B,MAAM,CAAC,0BAA0B,CAAC;IAEzE,QAAQ,GAAA;QACN,IAAI,CAAC,KAAK,EAAE;QACZ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE;AAC/C,QAAA,MAAM,KAAK,GAA2B;AACpC,YAAA,OAAO,EAAE,UAAU;AACnB,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,MAAM,EAAE,QAAQ;SACjB;AAED,QAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,MAAM,CAAC;AAErC,QAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEpD;uGA1BW,OAAO,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAP,OAAO,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,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,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,SAAA,EALP,CAAC,0BAA0B,CAAC,~~0BClBzC~~,~~ocAqBA~~,EAAA,MAAA,EAAA,CAAA,ojMAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,~~EDFY~~,OAAO,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,YAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAC,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAIvB,OAAO,EAAA,UAAA,EAAA,CAAA;kBARnB,SAAS;+BACE,UAAU,EAAA,UAAA,EACR,IAAI,EAAA,SAAA,EACL,CAAC,0BAA0B,CAAC,EAAA,OAAA,EAC9B,CAAC,OAAO,EAAC,gBAAgB,CAAC,EAAA,QAAA,EAAA,~~ocAAA~~,EAAA,MAAA,EAAA,CAAA,ojMAAA,CAAA,EAAA;;;~~AEnBrC~~;;AAEG;;;;"}
1	+ {"version":3,"file":"inugami-ng-components-inu-cite.mjs","sources":["../../../projects/inugami-ng/components/inu-cite/inu-cite.ts","../../../projects/inugami-ng/components/inu-cite/inu-cite.html","../../../projects/inugami-ng/components/inu-cite/inugami-ng-components-inu-cite.ts"],"sourcesContent":["import {Component, computed, inject, input, OnInit, signal, WritableSignal} from '@angular/core';\nimport {InuIcon} from 'inugami-icons';\nimport {InuTemplateRegistryService} from 'inugami-ng/directives';\nimport {NgTemplateOutlet} from '@angular/common';\n\n@Component({\n selector: 'inu-cite',\n standalone: true,\n providers: [InuTemplateRegistryService],\n imports: [InuIcon,NgTemplateOutlet],\n templateUrl: './inu-cite.html',\n styleUrl: './inu-cite.scss',\n})\nexport class InuCite implements OnInit {\n\n //==================================================================================================================\n // ATTRIBUTES\n //==================================================================================================================\n title = input<string \| undefined \| null>('');\n level = input<string \| undefined \| null>('');\n\n icon: WritableSignal<string \| null> = signal<string \| null>(null);\n styleClass: WritableSignal<string \| null> = signal<string \| null>(null);\n titleTemplate = computed(() => this.registry.getTemplate('title'));\n registry: InuTemplateRegistryService = inject(InuTemplateRegistryService);\n\n ngOnInit(): void {\n this.level();\n const level = this.level()?.toLowerCase() \|\| '';\n const icons: Record<string, string> = {\n success: 'approval',\n warning: 'warning',\n danger: 'danger',\n };\n\n this.icon.set(icons[level] \|\| 'idea');\n\n this.styleClass.set(['inu-cite', level].join(' '));\n\n }\n}\n","<ng-content />\n<cite [class]=\"styleClass()\">\n <header>\n <span>\n @if(icon()){\n <inu-icon [icon]=\"icon()\" [size]=\"2.5\"></inu-icon>\n }\n </span>\n <div class=\"title\">\n @if(titleTemplate()){\n <ng-container ngTemplateOutlet=\"titleTemplate()\"></ng-container>\n } @else if (title()){\n {{title()}}\n }\n </div>\n </header>\n <div class=\"content\">\n <ng-content />\n </div>\n\n</cite>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;MAaa,OAAO,CAAA;;;;AAKlB,IAAA,KAAK,GAAG,KAAK,CAA4B,EAAE,iDAAC;AAC5C,IAAA,KAAK,GAAG,KAAK,CAA4B,EAAE,iDAAC;AAE5C,IAAA,IAAI,GAAkC,MAAM,CAAgB,IAAI,gDAAC;AACjE,IAAA,UAAU,GAAkC,MAAM,CAAgB,IAAI,sDAAC;AACvE,IAAA,aAAa,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,yDAAC;AAClE,IAAA,QAAQ,GAA+B,MAAM,CAAC,0BAA0B,CAAC;IAEzE,QAAQ,GAAA;QACN,IAAI,CAAC,KAAK,EAAE;QACZ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE;AAC/C,QAAA,MAAM,KAAK,GAA2B;AACpC,YAAA,OAAO,EAAE,UAAU;AACnB,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,MAAM,EAAE,QAAQ;SACjB;AAED,QAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,MAAM,CAAC;AAErC,QAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEpD;uGA1BW,OAAO,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAP,OAAO,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,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,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,SAAA,EALP,CAAC,0BAA0B,CAAC,0BCRzC,kdAqBA,EAAA,MAAA,EAAA,CAAA,ojMAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDZY,OAAO,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,aAAA,EAAA,YAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAC,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAIvB,OAAO,EAAA,UAAA,EAAA,CAAA;kBARnB,SAAS;+BACE,UAAU,EAAA,UAAA,EACR,IAAI,EAAA,SAAA,EACL,CAAC,0BAA0B,CAAC,EAAA,OAAA,EAC9B,CAAC,OAAO,EAAC,gBAAgB,CAAC,EAAA,QAAA,EAAA,kdAAA,EAAA,MAAA,EAAA,CAAA,ojMAAA,CAAA,EAAA;;;AETrC;;AAEG;;;;"}

package/fesm2022/inugami-ng-components-inu-open-api.mjs CHANGED Viewed

@@ -545,7 +545,7 @@ class InuOpenApiParameters {
     // GETTERS
     //==================================================================================================================
     getRowClass(index, first, odd, styleclass) {
-        const result = [`index-${index}`];
+        const result = [`flex-table-body-row index-${index}`];
         if (first) {
             result.push('first');
         }
@@ -566,11 +566,11 @@ class InuOpenApiParameters {
         return result.join(' ');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InuOpenApiParameters, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: InuOpenApiParameters, isStandalone: true, selector: "inu-open-api-parameters", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, providers: [], ngImport: i0, template: "<div class=\"inu-open-api-parameters\">\n  @if (data()) {\n    <table>\n      <thead>\n      <tr>\n        <th>Name</th>\n        <th>Type</th>\n        <th>Description</th>\n        <th>Exemples</th>\n      </tr>\n      </thead>\n      <tbody>\n\n        @for (parameter of data(); track parameter.name; let index = $index; let isFirst = $first; let isOdd = $odd) {\n          <tr [class]=\"getRowClass(index,isFirst, isOdd , (parameter.deprecated?'deprecated': ''))\">\n            <td>\n              <span>{{parameter.name}}</span>\n              @if (parameter.required) {\n                <span class=\"required\"><span class=\"label\"></span></span>\n              } @else {\n                <span></span>\n              }\n            </td>\n            <td>{{parameter.schema?.type}}</td>\n            <td>{{parameter.description}}</td>\n            <td>\n              @if(parameter.example){\n                <div class=\"parameters-main-example\">\n                  <inu-code [source]=\"parameter.example\"></inu-code>\n                </div>\n              }\n\n              @if(parameter.examples && parameter.examples.length>0){\n                <div class=\"parameters-examples\">\n                  @for (example of parameter.examples; track example.name; let paramIndex = $index; let firstExample = $first; let oddExample = $odd) {\n                    <div [class]=\"getRowClass(paramIndex,firstExample, oddExample ,'parameter-example')\">\n                      <div  [class]=\"getParameterClass(paramIndex,'parameter-example-header')\" (click)=\"toggleExample(paramIndex)\">\n                        {{example.name}}\n                      </div>\n                      <dl [class]=\"getParameterClass(paramIndex,'example-content')\">\n                        <dt>Summary</dt>\n                        <dd>{{example.summary}}</dd>\n\n                        <dt>External value</dt>\n                        <dd>{{example.externalValue}}</dd>\n\n                        <dt>Description</dt>\n                        <dd>{{example.description}}</dd>\n\n                        <dt>Value</dt>\n                        <dd><inu-code [source]=\"example.value\"></inu-code></dd>\n\n                      </dl>\n                    </div>\n                  }\n                </div>\n              }\n\n            </td>\n          </tr>\n        }\n\n      </tbody>\n    </table>\n  }\n</div>\n", styles: [".inu-open-api-parameters table{width:100%}.inu-open-api-parameters table thead{border-color:inherit;border-style:solid;border-width:0}.inu-open-api-parameters table thead th{border-bottom:.15rem solid var(--neutral-dark)}\n"], dependencies: [{ kind: "component", type: InuCode, selector: "inu-code", inputs: ["source", "url", "tag", "type", "title"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: InuOpenApiParameters, isStandalone: true, selector: "inu-open-api-parameters", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, providers: [], ngImport: i0, template: "<div class=\"inu-open-api-parameters\">\n  @if (data()) {\n    <div class=\"inu-flex-table\">\n      <div class=\"flex-table-header\">\n        <div class=\"flex-table-header-th name\">Name</div>\n        <div class=\"flex-table-header-th type\">Type</div>\n        <div class=\"flex-table-header-th desc\">Description</div>\n        <div class=\"flex-table-header-th examples\">Examples</div>\n      </div>\n\n\n      <div class=\"flex-table-body\">\n\n        @for (parameter of data(); track parameter.name; let index = $index; let isFirst = $first; let isOdd = $odd) {\n          <div  [class]=\"getRowClass(index,isFirst, isOdd , (parameter.deprecated?'deprecated': ''))\">\n            <div class=\"flex-table-body-cell\">\n              <span>{{parameter.name}}</span>\n              @if (parameter.required) {\n                <span class=\"required\"><span class=\"label\"></span></span>\n              } @else {\n                <span></span>\n              }\n            </div>\n            <div  class=\"flex-table-body-cell\">{{parameter.schema?.type}}</div>\n            <div  class=\"flex-table-body-cell\">{{parameter.description}}</div>\n            <div  class=\"flex-table-body-cell\">\n              @if(parameter.example){\n                <div class=\"parameters-main-example\">\n                  <inu-code [source]=\"parameter.example\"></inu-code>\n                </div>\n              }\n\n              @if(parameter.examples && parameter.examples.length>0){\n                <div class=\"parameters-examples\">\n                  @for (example of parameter.examples; track example.name; let paramIndex = $index; let firstExample = $first; let oddExample = $odd) {\n                    <div [class]=\"getRowClass(paramIndex,firstExample, oddExample ,'parameter-example')\">\n                      <div  [class]=\"getParameterClass(paramIndex,'parameter-example-header')\" (click)=\"toggleExample(paramIndex)\">\n                        {{example.name}}\n                      </div>\n                      <dl [class]=\"getParameterClass(paramIndex,'example-content')\">\n                        <dt>Summary</dt>\n                        <dd>{{example.summary}}</dd>\n\n                        <dt>External value</dt>\n                        <dd>{{example.externalValue}}</dd>\n\n                        <dt>Description</dt>\n                        <dd>{{example.description}}</dd>\n\n                        <dt>Value</dt>\n                        <dd><inu-code [source]=\"example.value\"></inu-code></dd>\n\n                      </dl>\n                    </div>\n                  }\n                </div>\n              }\n\n            </div>\n          </div>\n        }\n\n      </div>\n    </div>\n  }\n</div>\n", styles: [".inu-open-api-parameters table{width:100%}.inu-open-api-parameters table thead{border-color:inherit;border-style:solid;border-width:0}.inu-open-api-parameters table thead th{border-bottom:.15rem solid var(--neutral-dark)}\n"], dependencies: [{ kind: "component", type: InuCode, selector: "inu-code", inputs: ["source", "url", "tag", "type", "title"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InuOpenApiParameters, decorators: [{
             type: Component,
-            args: [{ selector: 'inu-open-api-parameters', standalone: true, providers: [], imports: [InuCode], template: "<div class=\"inu-open-api-parameters\">\n  @if (data()) {\n    <table>\n      <thead>\n      <tr>\n        <th>Name</th>\n        <th>Type</th>\n        <th>Description</th>\n        <th>Exemples</th>\n      </tr>\n      </thead>\n      <tbody>\n\n        @for (parameter of data(); track parameter.name; let index = $index; let isFirst = $first; let isOdd = $odd) {\n          <tr [class]=\"getRowClass(index,isFirst, isOdd , (parameter.deprecated?'deprecated': ''))\">\n            <td>\n              <span>{{parameter.name}}</span>\n              @if (parameter.required) {\n                <span class=\"required\"><span class=\"label\"></span></span>\n              } @else {\n                <span></span>\n              }\n            </td>\n            <td>{{parameter.schema?.type}}</td>\n            <td>{{parameter.description}}</td>\n            <td>\n              @if(parameter.example){\n                <div class=\"parameters-main-example\">\n                  <inu-code [source]=\"parameter.example\"></inu-code>\n                </div>\n              }\n\n              @if(parameter.examples && parameter.examples.length>0){\n                <div class=\"parameters-examples\">\n                  @for (example of parameter.examples; track example.name; let paramIndex = $index; let firstExample = $first; let oddExample = $odd) {\n                    <div [class]=\"getRowClass(paramIndex,firstExample, oddExample ,'parameter-example')\">\n                      <div  [class]=\"getParameterClass(paramIndex,'parameter-example-header')\" (click)=\"toggleExample(paramIndex)\">\n                        {{example.name}}\n                      </div>\n                      <dl [class]=\"getParameterClass(paramIndex,'example-content')\">\n                        <dt>Summary</dt>\n                        <dd>{{example.summary}}</dd>\n\n                        <dt>External value</dt>\n                        <dd>{{example.externalValue}}</dd>\n\n                        <dt>Description</dt>\n                        <dd>{{example.description}}</dd>\n\n                        <dt>Value</dt>\n                        <dd><inu-code [source]=\"example.value\"></inu-code></dd>\n\n                      </dl>\n                    </div>\n                  }\n                </div>\n              }\n\n            </td>\n          </tr>\n        }\n\n      </tbody>\n    </table>\n  }\n</div>\n", styles: [".inu-open-api-parameters table{width:100%}.inu-open-api-parameters table thead{border-color:inherit;border-style:solid;border-width:0}.inu-open-api-parameters table thead th{border-bottom:.15rem solid var(--neutral-dark)}\n"] }]
+            args: [{ selector: 'inu-open-api-parameters', standalone: true, providers: [], imports: [InuCode], template: "<div class=\"inu-open-api-parameters\">\n  @if (data()) {\n    <div class=\"inu-flex-table\">\n      <div class=\"flex-table-header\">\n        <div class=\"flex-table-header-th name\">Name</div>\n        <div class=\"flex-table-header-th type\">Type</div>\n        <div class=\"flex-table-header-th desc\">Description</div>\n        <div class=\"flex-table-header-th examples\">Examples</div>\n      </div>\n\n\n      <div class=\"flex-table-body\">\n\n        @for (parameter of data(); track parameter.name; let index = $index; let isFirst = $first; let isOdd = $odd) {\n          <div  [class]=\"getRowClass(index,isFirst, isOdd , (parameter.deprecated?'deprecated': ''))\">\n            <div class=\"flex-table-body-cell\">\n              <span>{{parameter.name}}</span>\n              @if (parameter.required) {\n                <span class=\"required\"><span class=\"label\"></span></span>\n              } @else {\n                <span></span>\n              }\n            </div>\n            <div  class=\"flex-table-body-cell\">{{parameter.schema?.type}}</div>\n            <div  class=\"flex-table-body-cell\">{{parameter.description}}</div>\n            <div  class=\"flex-table-body-cell\">\n              @if(parameter.example){\n                <div class=\"parameters-main-example\">\n                  <inu-code [source]=\"parameter.example\"></inu-code>\n                </div>\n              }\n\n              @if(parameter.examples && parameter.examples.length>0){\n                <div class=\"parameters-examples\">\n                  @for (example of parameter.examples; track example.name; let paramIndex = $index; let firstExample = $first; let oddExample = $odd) {\n                    <div [class]=\"getRowClass(paramIndex,firstExample, oddExample ,'parameter-example')\">\n                      <div  [class]=\"getParameterClass(paramIndex,'parameter-example-header')\" (click)=\"toggleExample(paramIndex)\">\n                        {{example.name}}\n                      </div>\n                      <dl [class]=\"getParameterClass(paramIndex,'example-content')\">\n                        <dt>Summary</dt>\n                        <dd>{{example.summary}}</dd>\n\n                        <dt>External value</dt>\n                        <dd>{{example.externalValue}}</dd>\n\n                        <dt>Description</dt>\n                        <dd>{{example.description}}</dd>\n\n                        <dt>Value</dt>\n                        <dd><inu-code [source]=\"example.value\"></inu-code></dd>\n\n                      </dl>\n                    </div>\n                  }\n                </div>\n              }\n\n            </div>\n          </div>\n        }\n\n      </div>\n    </div>\n  }\n</div>\n", styles: [".inu-open-api-parameters table{width:100%}.inu-open-api-parameters table thead{border-color:inherit;border-style:solid;border-width:0}.inu-open-api-parameters table thead th{border-bottom:.15rem solid var(--neutral-dark)}\n"] }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
 class InuOpenApiExtension {
@@ -729,7 +729,7 @@ class InuOpenApiResponse {
         return this.examplesSources()[index];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InuOpenApiResponse, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: InuOpenApiResponse, isStandalone: true, selector: "inu-open-api-response", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, schemas: { classPropertyName: "schemas", publicName: "schemas", isSignal: true, isRequired: false, transformFunction: null } }, providers: [], ngImport: i0, template: "@if(data()){\n  <div class=\"inu-open-api-response\">\n    <div class=\"description\">{{data()?.description}}</div>\n    <div class=\"content-type\">{{data()?.contentType}}</div>\n\n    <div class=\"response-examples\">\n      @if(data()?.examples){\n        @for (example of data()?.examples; track example.name; let index = $index; let isFirst = $first; let isOdd = $odd) {\n          <div class=\"response-example\" [class]=\"computeExampleClass(example, isFirst, isOdd)\">\n            <div class=\"response-example-header\" (click)=\"toggleExample(index)\">\n              <div class=\"response-example-header-labels\" >\n                <span class=\"response-example-header-name\" >{{example.name}}</span>\n                <span class=\"response-example-header-summary\">{{example.summary}}</span>\n              </div>\n\n              <span class=\"button open\" [class.displayStatus]=\"getExampleDisplayStatus(index)\">\n                <inu-icon [icon]=\"getExampleDisplayStatus(index)?'chevron_up':'chevron_down'\" [size]=\"1\"></inu-icon>\n              </span>\n            </div>\n            <div  class=\"response-example-content\" [class.display]=\"getExampleDisplayStatus(index)\">\n\n              @if(example.description || example.externalValue || example.extensions){\n                <dl class=\"example-content\">\n                  @if(example.description){\n                    <dt>Description</dt>\n                    <dd>{{example.description}}</dd>\n                  }\n                  @if(example.externalValue){\n                    <dt>External value</dt>\n                    <dd>{{example.externalValue}}</dd>\n                  }\n\n                  @if(example.extensions){\n                    @for (extension of example.extensions; track extension.name) {\n                      <dt>{{extension.name}}</dt>\n                      <dd><inu-open-api-extension [data]=\"extension\"></inu-open-api-extension></dd>\n                    }\n                  }\n                </dl>\n              }\n\n              @if(getExamplesSource(index)){\n                @if(getExamplesSource(index)?.content && getExamplesSource(index)?.content !=''){\n                  <inu-code [source]=\"getExamplesSource(index)?.content\"\n                            [type]=\"getExamplesSource(index)?.type\"\n                            [title]=\"getExamplesSource(index)?.title\"></inu-code>\n                }\n              }\n\n            </div>\n\n          </div>\n        }\n      }\n\n\n\n    </div>\n  </div>\n}\n", styles: [".inu-open-api-response{display:flex;flex-direction:column}.inu-open-api-response .response-examples{display:flex;flex-direction:column;gap:2rem}.inu-open-api-response .response-examples .response-example{padding:1rem;border-top:.05rem solid var(--neutral)}.inu-open-api-response .response-examples .response-example.first{border-top:none}.inu-open-api-response .response-examples .response-example .response-example-header{display:flex;flex-direction:row}.inu-open-api-response .response-examples .response-example .response-example-header .response-example-header-labels{flex:1}\n"], dependencies: [{ kind: "component", type: InuIcon, selector: "inu-icon", inputs: ["icon", "styleclass", "size"] }, { kind: "component", type: InuCode, selector: "inu-code", inputs: ["source", "url", "tag", "type", "title"] }, { kind: "component", type: InuOpenApiExtension, selector: "inu-open-api-extension", inputs: ["data"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: InuOpenApiResponse, isStandalone: true, selector: "inu-open-api-response", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, schemas: { classPropertyName: "schemas", publicName: "schemas", isSignal: true, isRequired: false, transformFunction: null } }, providers: [], ngImport: i0, template: "@if(data()){\n  <div class=\"inu-open-api-response\">\n    <div class=\"description\">{{data()?.description}}</div>\n    <div class=\"content-type\">{{data()?.contentType}}</div>\n\n    <div class=\"response-examples\">\n      @if(data()?.examples){\n        @for (example of data()?.examples; track example.name; let index = $index; let isFirst = $first; let isOdd = $odd) {\n          <div class=\"response-example\" [class]=\"computeExampleClass(example, isFirst, isOdd)\">\n            <div class=\"response-example-header\" (click)=\"toggleExample(index)\">\n              <div class=\"response-example-header-labels\" >\n                <span class=\"response-example-header-name\" >{{example.name}}</span>\n                <span class=\"response-example-header-summary\">{{example.summary}}</span>\n              </div>\n\n              <span class=\"button open\" [class.displayStatus]=\"getExampleDisplayStatus(index)\">\n                @if(example.description || example.externalValue || example.extensions || getExamplesSource(index)?.content){\n                  <inu-icon [icon]=\"getExampleDisplayStatus(index)?'chevron_up':'chevron_down'\" [size]=\"1\"></inu-icon>\n                }\n              </span>\n            </div>\n            @if(example.description || example.externalValue || example.extensions || getExamplesSource(index)?.content){\n              <div  class=\"response-example-content\" [class.display]=\"getExampleDisplayStatus(index)\">\n\n                @if(example.description || example.externalValue || example.extensions){\n                  <dl class=\"example-content\">\n                    @if(example.description){\n                      <dt>Description</dt>\n                      <dd>{{example.description}}</dd>\n                    }\n                    @if(example.externalValue){\n                      <dt>External value</dt>\n                      <dd>{{example.externalValue}}</dd>\n                    }\n\n                    @if(example.extensions){\n                      @for (extension of example.extensions; track extension.name) {\n                        <dt>{{extension.name}}</dt>\n                        <dd><inu-open-api-extension [data]=\"extension\"></inu-open-api-extension></dd>\n                      }\n                    }\n                  </dl>\n                }\n\n                @if(getExamplesSource(index)?.content){\n                  @if(getExamplesSource(index)?.content && getExamplesSource(index)?.content !=''){\n                    <inu-code [source]=\"getExamplesSource(index)?.content\"\n                              [type]=\"getExamplesSource(index)?.type\"\n                              [title]=\"getExamplesSource(index)?.title\"></inu-code>\n                  }\n                }\n\n              </div>\n            }\n\n\n          </div>\n        }\n      }\n\n\n\n    </div>\n  </div>\n}\n", styles: [".inu-open-api-response{display:flex;flex-direction:column}.inu-open-api-response .response-examples{display:flex;flex-direction:column;gap:2rem}.inu-open-api-response .response-examples .response-example{width:100%;padding:1rem;border-top:.05rem solid var(--neutral)}.inu-open-api-response .response-examples .response-example.first{border-top:none}.inu-open-api-response .response-examples .response-example .response-example-header{display:flex;flex-direction:row}.inu-open-api-response .response-examples .response-example .response-example-header .response-example-header-labels{flex:1}.inu-open-api-response .response-examples .response-example inu-code{width:100%}.inu-open-api-response .response-example-content{display:none}.inu-open-api-response .response-example-content.display{display:flex}\n"], dependencies: [{ kind: "component", type: InuIcon, selector: "inu-icon", inputs: ["icon", "defaultIcon", "styleclass", "size"] }, { kind: "component", type: InuCode, selector: "inu-code", inputs: ["source", "url", "tag", "type", "title"] }, { kind: "component", type: InuOpenApiExtension, selector: "inu-open-api-extension", inputs: ["data"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InuOpenApiResponse, decorators: [{
             type: Component,
@@ -737,7 +737,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         InuIcon,
                         InuCode,
                         InuOpenApiExtension
-                    ], template: "@if(data()){\n  <div class=\"inu-open-api-response\">\n    <div class=\"description\">{{data()?.description}}</div>\n    <div class=\"content-type\">{{data()?.contentType}}</div>\n\n    <div class=\"response-examples\">\n      @if(data()?.examples){\n        @for (example of data()?.examples; track example.name; let index = $index; let isFirst = $first; let isOdd = $odd) {\n          <div class=\"response-example\" [class]=\"computeExampleClass(example, isFirst, isOdd)\">\n            <div class=\"response-example-header\" (click)=\"toggleExample(index)\">\n              <div class=\"response-example-header-labels\" >\n                <span class=\"response-example-header-name\" >{{example.name}}</span>\n                <span class=\"response-example-header-summary\">{{example.summary}}</span>\n              </div>\n\n              <span class=\"button open\" [class.displayStatus]=\"getExampleDisplayStatus(index)\">\n                <inu-icon [icon]=\"getExampleDisplayStatus(index)?'chevron_up':'chevron_down'\" [size]=\"1\"></inu-icon>\n              </span>\n            </div>\n            <div  class=\"response-example-content\" [class.display]=\"getExampleDisplayStatus(index)\">\n\n              @if(example.description || example.externalValue || example.extensions){\n                <dl class=\"example-content\">\n                  @if(example.description){\n                    <dt>Description</dt>\n                    <dd>{{example.description}}</dd>\n                  }\n                  @if(example.externalValue){\n                    <dt>External value</dt>\n                    <dd>{{example.externalValue}}</dd>\n                  }\n\n                  @if(example.extensions){\n                    @for (extension of example.extensions; track extension.name) {\n                      <dt>{{extension.name}}</dt>\n                      <dd><inu-open-api-extension [data]=\"extension\"></inu-open-api-extension></dd>\n                    }\n                  }\n                </dl>\n              }\n\n              @if(getExamplesSource(index)){\n                @if(getExamplesSource(index)?.content && getExamplesSource(index)?.content !=''){\n                  <inu-code [source]=\"getExamplesSource(index)?.content\"\n                            [type]=\"getExamplesSource(index)?.type\"\n                            [title]=\"getExamplesSource(index)?.title\"></inu-code>\n                }\n              }\n\n            </div>\n\n          </div>\n        }\n      }\n\n\n\n    </div>\n  </div>\n}\n", styles: [".inu-open-api-response{display:flex;flex-direction:column}.inu-open-api-response .response-examples{display:flex;flex-direction:column;gap:2rem}.inu-open-api-response .response-examples .response-example{padding:1rem;border-top:.05rem solid var(--neutral)}.inu-open-api-response .response-examples .response-example.first{border-top:none}.inu-open-api-response .response-examples .response-example .response-example-header{display:flex;flex-direction:row}.inu-open-api-response .response-examples .response-example .response-example-header .response-example-header-labels{flex:1}\n"] }]
+                    ], template: "@if(data()){\n  <div class=\"inu-open-api-response\">\n    <div class=\"description\">{{data()?.description}}</div>\n    <div class=\"content-type\">{{data()?.contentType}}</div>\n\n    <div class=\"response-examples\">\n      @if(data()?.examples){\n        @for (example of data()?.examples; track example.name; let index = $index; let isFirst = $first; let isOdd = $odd) {\n          <div class=\"response-example\" [class]=\"computeExampleClass(example, isFirst, isOdd)\">\n            <div class=\"response-example-header\" (click)=\"toggleExample(index)\">\n              <div class=\"response-example-header-labels\" >\n                <span class=\"response-example-header-name\" >{{example.name}}</span>\n                <span class=\"response-example-header-summary\">{{example.summary}}</span>\n              </div>\n\n              <span class=\"button open\" [class.displayStatus]=\"getExampleDisplayStatus(index)\">\n                @if(example.description || example.externalValue || example.extensions || getExamplesSource(index)?.content){\n                  <inu-icon [icon]=\"getExampleDisplayStatus(index)?'chevron_up':'chevron_down'\" [size]=\"1\"></inu-icon>\n                }\n              </span>\n            </div>\n            @if(example.description || example.externalValue || example.extensions || getExamplesSource(index)?.content){\n              <div  class=\"response-example-content\" [class.display]=\"getExampleDisplayStatus(index)\">\n\n                @if(example.description || example.externalValue || example.extensions){\n                  <dl class=\"example-content\">\n                    @if(example.description){\n                      <dt>Description</dt>\n                      <dd>{{example.description}}</dd>\n                    }\n                    @if(example.externalValue){\n                      <dt>External value</dt>\n                      <dd>{{example.externalValue}}</dd>\n                    }\n\n                    @if(example.extensions){\n                      @for (extension of example.extensions; track extension.name) {\n                        <dt>{{extension.name}}</dt>\n                        <dd><inu-open-api-extension [data]=\"extension\"></inu-open-api-extension></dd>\n                      }\n                    }\n                  </dl>\n                }\n\n                @if(getExamplesSource(index)?.content){\n                  @if(getExamplesSource(index)?.content && getExamplesSource(index)?.content !=''){\n                    <inu-code [source]=\"getExamplesSource(index)?.content\"\n                              [type]=\"getExamplesSource(index)?.type\"\n                              [title]=\"getExamplesSource(index)?.title\"></inu-code>\n                  }\n                }\n\n              </div>\n            }\n\n\n          </div>\n        }\n      }\n\n\n\n    </div>\n  </div>\n}\n", styles: [".inu-open-api-response{display:flex;flex-direction:column}.inu-open-api-response .response-examples{display:flex;flex-direction:column;gap:2rem}.inu-open-api-response .response-examples .response-example{width:100%;padding:1rem;border-top:.05rem solid var(--neutral)}.inu-open-api-response .response-examples .response-example.first{border-top:none}.inu-open-api-response .response-examples .response-example .response-example-header{display:flex;flex-direction:row}.inu-open-api-response .response-examples .response-example .response-example-header .response-example-header-labels{flex:1}.inu-open-api-response .response-examples .response-example inu-code{width:100%}.inu-open-api-response .response-example-content{display:none}.inu-open-api-response .response-example-content.display{display:flex}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], schemas: [{ type: i0.Input, args: [{ isSignal: true, alias: "schemas", required: false }] }] } });
 const SPACE = ' ';
@@ -896,7 +896,7 @@ class InuOpenApiEndpoint {
         }
     }
     getRowClass(index, first, odd, styleclass) {
-        const result = [`index-${index}`];
+        const result = [`flex-table-body-row index-${index}`];
         if (first) {
             result.push('first');
         }
@@ -908,12 +908,26 @@ class InuOpenApiEndpoint {
         }
         return result.join(SPACE);
     }
+    computeStatusStyleClass(status) {
+        const result = ['inu-endpoint-response-status'];
+        const httpStatus = this.convertToNumber(status);
+        if (httpStatus < 400) {
+            result.push('success');
+        }
+        else if (httpStatus < 500) {
+            result.push('warning');
+        }
+        else {
+            result.push('error');
+        }
+        return result.join(SPACE);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InuOpenApiEndpoint, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: InuOpenApiEndpoint, isStandalone: true, selector: "inu-open-api-endpoint", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, schemas: { classPropertyName: "schemas", publicName: "schemas", isSignal: true, isRequired: false, transformFunction: null } }, providers: [], ngImport: i0, template: "@if (data()) {\n  <article [class]=\"styleClass()\">\n    <header>\n      <h2 (click)=\"toggleDisplay()\">\n        <span class=\"inu-endpoint-verb\">{{ data()?.verb }}</span>\n        <span class=\"inu-endpoint-url\">{{ data()?.url }}</span>\n      </h2>\n      <span class=\"button open\" (click)=\"toggleDisplay()\">\n        <inu-icon [icon]=\"display() == 'inu-open-api-endpoint-content-display show'?'chevron_up':'chevron_down'\" [size]=\"1\"></inu-icon>\n      </span>\n    </header>\n\n    <div class=\"inu-open-api-endpoint-content\">\n      <div [class]=\"display()\">\n        <!--==============================================================================================================\n         = INFORMATION\n        ===============================================================================================================-->\n        @if (parameters()) {\n          <fieldset class=\"information\">\n            <label>Information</label>\n            <div class=\"content\">\n              <inu-open-api-parameters [data]=\"parameters()\"></inu-open-api-parameters>\n            </div>\n          </fieldset>\n        }\n\n        <!--==============================================================================================================\n         = HEADERS\n        ===============================================================================================================-->\n        @if (headers()) {\n          <fieldset class=\"headers\">\n            <label>Headers</label>\n            <div class=\"content\">\n              <inu-open-api-parameters [data]=\"headers()\"></inu-open-api-parameters>\n            </div>\n          </fieldset>\n        }\n\n        <!--==============================================================================================================\n         = OPTION\n        ===============================================================================================================-->\n        @if (options()) {\n          <fieldset class=\"options\">\n            <label>Options</label>\n            <div class=\"content\">\n              <inu-open-api-parameters [data]=\"options()\"></inu-open-api-parameters>\n            </div>\n          </fieldset>\n        }\n\n        <!--==============================================================================================================\n         = REQUEST\n        ===============================================================================================================-->\n        @if (data()?.requestBody) {\n          <fieldset class=\"request\">\n            <label>Request</label>\n            <div class=\"content\">\n              <div class=\"description\">{{ data()?.requestBody?.description! }}</div>\n              <div class=\"content-type\">{{ data()?.requestBody?.contentType! }}</div>\n\n              @if (request()) {\n                <div class=\"schema\">\n                  <inu-code [source]=\"request()?.content\" [type]=\"request()?.type\"\n                            [title]=\"request()?.title\"></inu-code>\n                </div>\n              }\n            </div>\n          </fieldset>\n        }\n        <!--==============================================================================================================\n        = RESPONSE\n        ===============================================================================================================-->\n\n        @if (data()?.responses) {\n          <fieldset class=\"response\">\n            <label>Response</label>\n\n            <div class=\"content\">\n\n              <table class=\"response-table\">\n                <tbody>\n                <tr>\n                  <th class=\"inu-endpoint-response-status\">Status</th>\n                  <th>Description</th>\n                </tr>\n                </tbody>\n                <tbody>\n                  @for (response of data()?.responses; track response.status; let index = $index; let isFirst = $first; let isOdd = $odd) {\n                    <tr [class]=\"getRowClass(index,isFirst, isOdd)\">\n                      <td class=\"http-code\">\n                        <span class=\"http-code\">{{ response.status }}</span>\n                      </td>\n                      <td class=\"description-content\">\n                        <inu-open-api-response [data]=\"response\" [schemas]=\"schemas()\"></inu-open-api-response>\n                      </td>\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            </div>\n          </fieldset>\n        }\n      </div>\n    </div>\n  </article>\n}\n\n", styles: [".inu-open-api-endpoint{border:1px solid var(--neutral-light);margin-bottom:0rem}.inu-open-api-endpoint header{display:flex;padding:.25rem 2rem .25rem .25rem;align-items:center}.inu-open-api-endpoint header h2{flex:1;display:flex;gap:2rem;color:var(--text-color);font-weight:400;font-size:160%}.inu-open-api-endpoint header h2 .inu-endpoint-verb{width:5rem;font-weight:700;text-transform:uppercase}.inu-open-api-endpoint header span{display:flex;height:2rem}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display{display:none}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display.show{padding:1rem;display:flex;gap:2rem;flex-direction:column;background-color:var(--background)}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display.show fieldset{padding:1rem;border-left:.15rem solid transparent;transition:border-left-color .15s}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display.show fieldset:hover{border-left:.15rem solid var(--neutral)}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display.show fieldset label{font-weight:bolder;font-size:120%;border-bottom:1px solid var(--neutral);width:100%;margin-bottom:2rem}.inu-open-api-endpoint .response .response-table tr{border-bottom:.2rem solid var(--neutral)}.inu-open-api-endpoint .description-content{padding-top:1rem}.inu-open-api-endpoint.get{background:var(--endpoint-get-detail-background);border-color:var(--endpoint-get-background)}.inu-open-api-endpoint.get header h2{color:var(--endpoint-get-background-darker)}.inu-open-api-endpoint.head{background:var(--endpoint-head-detail-background);border-color:var(--endpoint-head-background)}.inu-open-api-endpoint.head header h2{color:var(--endpoint-head-background-darker)}.inu-open-api-endpoint.post{background:var(--endpoint-post-detail-background);border-color:var(--endpoint-post-background)}.inu-open-api-endpoint.post header h2{color:var(--endpoint-post-background-darker)}.inu-open-api-endpoint.put{background:var(--endpoint-put-detail-background);border-color:var(--endpoint-put-background)}.inu-open-api-endpoint.put header h2{color:var(--endpoint-put-background-darker)}.inu-open-api-endpoint.patch{background:var(--endpoint-patch-detail-background);border-color:var(--endpoint-patch-background)}.inu-open-api-endpoint.patch header h2{color:var(--endpoint-patch-background-darker)}.inu-open-api-endpoint.delete{background:var(--endpoint-delete-detail-background);border-color:var(--endpoint-delete-background)}.inu-open-api-endpoint.delete header h2{color:var(--endpoint-delete-background-darker)}.inu-open-api-endpoint.option{background:var(--endpoint-option-detail-background);border-color:var(--endpoint-option-background)}.inu-open-api-endpoint.option{background:var(--endpoint-trace-detail-background);border-color:var(--endpoint-trace-background)}\n"], dependencies: [{ kind: "component", type: InuOpenApiParameters, selector: "inu-open-api-parameters", inputs: ["data"] }, { kind: "component", type: InuOpenApiResponse, selector: "inu-open-api-response", inputs: ["data", "schemas"] }, { kind: "component", type: InuCode, selector: "inu-code", inputs: ["source", "url", "tag", "type", "title"] }, { kind: "component", type: InuIcon, selector: "inu-icon", inputs: ["icon", "styleclass", "size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: InuOpenApiEndpoint, isStandalone: true, selector: "inu-open-api-endpoint", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, schemas: { classPropertyName: "schemas", publicName: "schemas", isSignal: true, isRequired: false, transformFunction: null } }, providers: [], ngImport: i0, template: "@if (data()) {\n  <article [class]=\"styleClass()\">\n    <header>\n      <h2 (click)=\"toggleDisplay()\">\n        <span class=\"inu-endpoint-verb\">{{ data()?.verb }}</span>\n        <span class=\"inu-endpoint-url\">{{ data()?.url }}</span>\n      </h2>\n      <span class=\"button open\" (click)=\"toggleDisplay()\">\n        <inu-icon [icon]=\"display() == 'inu-open-api-endpoint-content-display show'?'chevron_up':'chevron_down'\" [size]=\"1\"></inu-icon>\n      </span>\n    </header>\n\n    <div class=\"inu-open-api-endpoint-content\">\n      <div [class]=\"display()\">\n        <!--==============================================================================================================\n         = INFORMATION\n        ===============================================================================================================-->\n        @if (parameters()) {\n          <fieldset class=\"information\">\n            <label>Information</label>\n            <div class=\"content\">\n              <inu-open-api-parameters [data]=\"parameters()\"></inu-open-api-parameters>\n            </div>\n          </fieldset>\n        }\n\n        <!--==============================================================================================================\n         = HEADERS\n        ===============================================================================================================-->\n        @if (headers()) {\n          <fieldset class=\"headers\">\n            <label>Headers</label>\n            <div class=\"content\">\n              <inu-open-api-parameters [data]=\"headers()\"></inu-open-api-parameters>\n            </div>\n          </fieldset>\n        }\n\n        <!--==============================================================================================================\n         = OPTION\n        ===============================================================================================================-->\n        @if (options()) {\n          <fieldset class=\"options\">\n            <label>Options</label>\n            <div class=\"content\">\n              <inu-open-api-parameters [data]=\"options()\"></inu-open-api-parameters>\n            </div>\n          </fieldset>\n        }\n\n        <!--==============================================================================================================\n         = REQUEST\n        ===============================================================================================================-->\n        @if (data()?.requestBody) {\n          <fieldset class=\"request\">\n            <label>Request</label>\n            <div class=\"content\">\n              <div class=\"description\">{{ data()?.requestBody?.description! }}</div>\n              <div class=\"content-type\">{{ data()?.requestBody?.contentType! }}</div>\n\n              @if (request()) {\n                <div class=\"schema\">\n                  <inu-code [source]=\"request()?.content\" [type]=\"request()?.type\"\n                            [title]=\"request()?.title\"></inu-code>\n                </div>\n              }\n            </div>\n          </fieldset>\n        }\n        <!--==============================================================================================================\n        = RESPONSE\n        ===============================================================================================================-->\n\n        @if (data()?.responses) {\n          <fieldset class=\"response\">\n            <label>Response</label>\n\n            <div class=\"content\">\n\n              <div class=\"response-table\">\n                <div class=\"response-table-body\">\n                  @for (response of data()?.responses; track response.status; let index = $index; let isFirst = $first; let isOdd = $odd) {\n                    <div [class]=\"getRowClass(index,isFirst, isOdd)\">\n                      <div [class]=\"computeStatusStyleClass(response.status)\">\n                        {{ response.status }}\n                      </div>\n                      <div class=\"description-content\">\n                        <inu-open-api-response [data]=\"response\" [schemas]=\"schemas()\"></inu-open-api-response>\n                      </div>\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          </fieldset>\n        }\n      </div>\n    </div>\n  </article>\n}\n\n", styles: [".inu-open-api-endpoint{border:1px solid var(--neutral-light);margin-bottom:0rem}.inu-open-api-endpoint header{display:flex;padding:.25rem 2rem .25rem .25rem;align-items:center}.inu-open-api-endpoint header h2{flex:1;display:flex;gap:2rem;color:var(--text-color);font-weight:400;font-size:160%}.inu-open-api-endpoint header h2 .inu-endpoint-verb{width:5rem;font-weight:700;text-transform:uppercase}.inu-open-api-endpoint header span{display:flex;height:2rem}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display{display:none}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display.show{padding:1rem;display:flex;gap:2rem;flex-direction:column;background-color:var(--background)}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display.show fieldset{padding:1rem;border-left:.15rem solid transparent;transition:border-left-color .15s}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display.show fieldset:hover{border-left:.15rem solid var(--neutral)}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display.show fieldset label{font-weight:bolder;font-size:120%;border-bottom:1px solid var(--neutral);width:100%;margin-bottom:2rem}.inu-open-api-endpoint .response .response-table tr{border-bottom:.2rem solid var(--neutral)}.inu-open-api-endpoint .description-content{padding-top:1rem}.inu-open-api-endpoint.get{background:var(--endpoint-get-detail-background);border-color:var(--endpoint-get-background)}.inu-open-api-endpoint.get header h2{color:var(--endpoint-get-background-darker)}.inu-open-api-endpoint.head{background:var(--endpoint-head-detail-background);border-color:var(--endpoint-head-background)}.inu-open-api-endpoint.head header h2{color:var(--endpoint-head-background-darker)}.inu-open-api-endpoint.post{background:var(--endpoint-post-detail-background);border-color:var(--endpoint-post-background)}.inu-open-api-endpoint.post header h2{color:var(--endpoint-post-background-darker)}.inu-open-api-endpoint.put{background:var(--endpoint-put-detail-background);border-color:var(--endpoint-put-background)}.inu-open-api-endpoint.put header h2{color:var(--endpoint-put-background-darker)}.inu-open-api-endpoint.patch{background:var(--endpoint-patch-detail-background);border-color:var(--endpoint-patch-background)}.inu-open-api-endpoint.patch header h2{color:var(--endpoint-patch-background-darker)}.inu-open-api-endpoint.delete{background:var(--endpoint-delete-detail-background);border-color:var(--endpoint-delete-background)}.inu-open-api-endpoint.delete header h2{color:var(--endpoint-delete-background-darker)}.inu-open-api-endpoint.option{background:var(--endpoint-option-detail-background);border-color:var(--endpoint-option-background)}.inu-open-api-endpoint.option{background:var(--endpoint-trace-detail-background);border-color:var(--endpoint-trace-background)}.inu-open-api-endpoint .inu-endpoint-response-status{width:10%;max-width:5rem;min-width:3rem}@media(max-width:768px){.inu-open-api-endpoint .inu-endpoint-response-status{width:100%;max-width:100%;min-width:100%}}.inu-open-api-endpoint .response-table-body .flex-table-body-row{display:flex;flex-direction:row;justify-content:space-between}@media(max-width:768px){.inu-open-api-endpoint .response-table-body .flex-table-body-row{flex-direction:column}}.inu-open-api-endpoint .response-table-body .flex-table-body-row .description-content{flex:1}.inu-open-api-endpoint .inu-endpoint-response-status{margin-right:.5rem;font-weight:700;display:inline-flex;align-items:center}.inu-open-api-endpoint .inu-endpoint-response-status.success{border-right:.25rem solid var(--success);color:var(--success-dark)}@media(max-width:768px){.inu-open-api-endpoint .inu-endpoint-response-status.success{width:100%;border-right:none;border-bottom:.25rem solid var(--success)}}.inu-open-api-endpoint .inu-endpoint-response-status.warning{border-right:.25rem solid var(--warning);color:var(--warning-dark)}@media(max-width:768px){.inu-open-api-endpoint .inu-endpoint-response-status.warning{width:100%;border-right:none;border-bottom:.25rem solid var(--warning)}}.inu-open-api-endpoint .inu-endpoint-response-status.error{border-right:.25rem solid var(--danger);color:var(--danger)}@media(max-width:768px){.inu-open-api-endpoint .inu-endpoint-response-status.error{width:100%;border-right:none;border-bottom:.25rem solid var(--danger)}}\n"], dependencies: [{ kind: "component", type: InuOpenApiParameters, selector: "inu-open-api-parameters", inputs: ["data"] }, { kind: "component", type: InuOpenApiResponse, selector: "inu-open-api-response", inputs: ["data", "schemas"] }, { kind: "component", type: InuCode, selector: "inu-code", inputs: ["source", "url", "tag", "type", "title"] }, { 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: InuOpenApiEndpoint, decorators: [{
             type: Component,
-            args: [{ selector: 'inu-open-api-endpoint', standalone: true, providers: [], imports: [InuOpenApiParameters, InuOpenApiResponse, InuCode, InuIcon], template: "@if (data()) {\n  <article [class]=\"styleClass()\">\n    <header>\n      <h2 (click)=\"toggleDisplay()\">\n        <span class=\"inu-endpoint-verb\">{{ data()?.verb }}</span>\n        <span class=\"inu-endpoint-url\">{{ data()?.url }}</span>\n      </h2>\n      <span class=\"button open\" (click)=\"toggleDisplay()\">\n        <inu-icon [icon]=\"display() == 'inu-open-api-endpoint-content-display show'?'chevron_up':'chevron_down'\" [size]=\"1\"></inu-icon>\n      </span>\n    </header>\n\n    <div class=\"inu-open-api-endpoint-content\">\n      <div [class]=\"display()\">\n        <!--==============================================================================================================\n         = INFORMATION\n        ===============================================================================================================-->\n        @if (parameters()) {\n          <fieldset class=\"information\">\n            <label>Information</label>\n            <div class=\"content\">\n              <inu-open-api-parameters [data]=\"parameters()\"></inu-open-api-parameters>\n            </div>\n          </fieldset>\n        }\n\n        <!--==============================================================================================================\n         = HEADERS\n        ===============================================================================================================-->\n        @if (headers()) {\n          <fieldset class=\"headers\">\n            <label>Headers</label>\n            <div class=\"content\">\n              <inu-open-api-parameters [data]=\"headers()\"></inu-open-api-parameters>\n            </div>\n          </fieldset>\n        }\n\n        <!--==============================================================================================================\n         = OPTION\n        ===============================================================================================================-->\n        @if (options()) {\n          <fieldset class=\"options\">\n            <label>Options</label>\n            <div class=\"content\">\n              <inu-open-api-parameters [data]=\"options()\"></inu-open-api-parameters>\n            </div>\n          </fieldset>\n        }\n\n        <!--==============================================================================================================\n         = REQUEST\n        ===============================================================================================================-->\n        @if (data()?.requestBody) {\n          <fieldset class=\"request\">\n            <label>Request</label>\n            <div class=\"content\">\n              <div class=\"description\">{{ data()?.requestBody?.description! }}</div>\n              <div class=\"content-type\">{{ data()?.requestBody?.contentType! }}</div>\n\n              @if (request()) {\n                <div class=\"schema\">\n                  <inu-code [source]=\"request()?.content\" [type]=\"request()?.type\"\n                            [title]=\"request()?.title\"></inu-code>\n                </div>\n              }\n            </div>\n          </fieldset>\n        }\n        <!--==============================================================================================================\n        = RESPONSE\n        ===============================================================================================================-->\n\n        @if (data()?.responses) {\n          <fieldset class=\"response\">\n            <label>Response</label>\n\n            <div class=\"content\">\n\n              <table class=\"response-table\">\n                <tbody>\n                <tr>\n                  <th class=\"inu-endpoint-response-status\">Status</th>\n                  <th>Description</th>\n                </tr>\n                </tbody>\n                <tbody>\n                  @for (response of data()?.responses; track response.status; let index = $index; let isFirst = $first; let isOdd = $odd) {\n                    <tr [class]=\"getRowClass(index,isFirst, isOdd)\">\n                      <td class=\"http-code\">\n                        <span class=\"http-code\">{{ response.status }}</span>\n                      </td>\n                      <td class=\"description-content\">\n                        <inu-open-api-response [data]=\"response\" [schemas]=\"schemas()\"></inu-open-api-response>\n                      </td>\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            </div>\n          </fieldset>\n        }\n      </div>\n    </div>\n  </article>\n}\n\n", styles: [".inu-open-api-endpoint{border:1px solid var(--neutral-light);margin-bottom:0rem}.inu-open-api-endpoint header{display:flex;padding:.25rem 2rem .25rem .25rem;align-items:center}.inu-open-api-endpoint header h2{flex:1;display:flex;gap:2rem;color:var(--text-color);font-weight:400;font-size:160%}.inu-open-api-endpoint header h2 .inu-endpoint-verb{width:5rem;font-weight:700;text-transform:uppercase}.inu-open-api-endpoint header span{display:flex;height:2rem}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display{display:none}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display.show{padding:1rem;display:flex;gap:2rem;flex-direction:column;background-color:var(--background)}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display.show fieldset{padding:1rem;border-left:.15rem solid transparent;transition:border-left-color .15s}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display.show fieldset:hover{border-left:.15rem solid var(--neutral)}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display.show fieldset label{font-weight:bolder;font-size:120%;border-bottom:1px solid var(--neutral);width:100%;margin-bottom:2rem}.inu-open-api-endpoint .response .response-table tr{border-bottom:.2rem solid var(--neutral)}.inu-open-api-endpoint .description-content{padding-top:1rem}.inu-open-api-endpoint.get{background:var(--endpoint-get-detail-background);border-color:var(--endpoint-get-background)}.inu-open-api-endpoint.get header h2{color:var(--endpoint-get-background-darker)}.inu-open-api-endpoint.head{background:var(--endpoint-head-detail-background);border-color:var(--endpoint-head-background)}.inu-open-api-endpoint.head header h2{color:var(--endpoint-head-background-darker)}.inu-open-api-endpoint.post{background:var(--endpoint-post-detail-background);border-color:var(--endpoint-post-background)}.inu-open-api-endpoint.post header h2{color:var(--endpoint-post-background-darker)}.inu-open-api-endpoint.put{background:var(--endpoint-put-detail-background);border-color:var(--endpoint-put-background)}.inu-open-api-endpoint.put header h2{color:var(--endpoint-put-background-darker)}.inu-open-api-endpoint.patch{background:var(--endpoint-patch-detail-background);border-color:var(--endpoint-patch-background)}.inu-open-api-endpoint.patch header h2{color:var(--endpoint-patch-background-darker)}.inu-open-api-endpoint.delete{background:var(--endpoint-delete-detail-background);border-color:var(--endpoint-delete-background)}.inu-open-api-endpoint.delete header h2{color:var(--endpoint-delete-background-darker)}.inu-open-api-endpoint.option{background:var(--endpoint-option-detail-background);border-color:var(--endpoint-option-background)}.inu-open-api-endpoint.option{background:var(--endpoint-trace-detail-background);border-color:var(--endpoint-trace-background)}\n"] }]
+            args: [{ selector: 'inu-open-api-endpoint', standalone: true, providers: [], imports: [InuOpenApiParameters, InuOpenApiResponse, InuCode, InuIcon], template: "@if (data()) {\n  <article [class]=\"styleClass()\">\n    <header>\n      <h2 (click)=\"toggleDisplay()\">\n        <span class=\"inu-endpoint-verb\">{{ data()?.verb }}</span>\n        <span class=\"inu-endpoint-url\">{{ data()?.url }}</span>\n      </h2>\n      <span class=\"button open\" (click)=\"toggleDisplay()\">\n        <inu-icon [icon]=\"display() == 'inu-open-api-endpoint-content-display show'?'chevron_up':'chevron_down'\" [size]=\"1\"></inu-icon>\n      </span>\n    </header>\n\n    <div class=\"inu-open-api-endpoint-content\">\n      <div [class]=\"display()\">\n        <!--==============================================================================================================\n         = INFORMATION\n        ===============================================================================================================-->\n        @if (parameters()) {\n          <fieldset class=\"information\">\n            <label>Information</label>\n            <div class=\"content\">\n              <inu-open-api-parameters [data]=\"parameters()\"></inu-open-api-parameters>\n            </div>\n          </fieldset>\n        }\n\n        <!--==============================================================================================================\n         = HEADERS\n        ===============================================================================================================-->\n        @if (headers()) {\n          <fieldset class=\"headers\">\n            <label>Headers</label>\n            <div class=\"content\">\n              <inu-open-api-parameters [data]=\"headers()\"></inu-open-api-parameters>\n            </div>\n          </fieldset>\n        }\n\n        <!--==============================================================================================================\n         = OPTION\n        ===============================================================================================================-->\n        @if (options()) {\n          <fieldset class=\"options\">\n            <label>Options</label>\n            <div class=\"content\">\n              <inu-open-api-parameters [data]=\"options()\"></inu-open-api-parameters>\n            </div>\n          </fieldset>\n        }\n\n        <!--==============================================================================================================\n         = REQUEST\n        ===============================================================================================================-->\n        @if (data()?.requestBody) {\n          <fieldset class=\"request\">\n            <label>Request</label>\n            <div class=\"content\">\n              <div class=\"description\">{{ data()?.requestBody?.description! }}</div>\n              <div class=\"content-type\">{{ data()?.requestBody?.contentType! }}</div>\n\n              @if (request()) {\n                <div class=\"schema\">\n                  <inu-code [source]=\"request()?.content\" [type]=\"request()?.type\"\n                            [title]=\"request()?.title\"></inu-code>\n                </div>\n              }\n            </div>\n          </fieldset>\n        }\n        <!--==============================================================================================================\n        = RESPONSE\n        ===============================================================================================================-->\n\n        @if (data()?.responses) {\n          <fieldset class=\"response\">\n            <label>Response</label>\n\n            <div class=\"content\">\n\n              <div class=\"response-table\">\n                <div class=\"response-table-body\">\n                  @for (response of data()?.responses; track response.status; let index = $index; let isFirst = $first; let isOdd = $odd) {\n                    <div [class]=\"getRowClass(index,isFirst, isOdd)\">\n                      <div [class]=\"computeStatusStyleClass(response.status)\">\n                        {{ response.status }}\n                      </div>\n                      <div class=\"description-content\">\n                        <inu-open-api-response [data]=\"response\" [schemas]=\"schemas()\"></inu-open-api-response>\n                      </div>\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          </fieldset>\n        }\n      </div>\n    </div>\n  </article>\n}\n\n", styles: [".inu-open-api-endpoint{border:1px solid var(--neutral-light);margin-bottom:0rem}.inu-open-api-endpoint header{display:flex;padding:.25rem 2rem .25rem .25rem;align-items:center}.inu-open-api-endpoint header h2{flex:1;display:flex;gap:2rem;color:var(--text-color);font-weight:400;font-size:160%}.inu-open-api-endpoint header h2 .inu-endpoint-verb{width:5rem;font-weight:700;text-transform:uppercase}.inu-open-api-endpoint header span{display:flex;height:2rem}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display{display:none}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display.show{padding:1rem;display:flex;gap:2rem;flex-direction:column;background-color:var(--background)}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display.show fieldset{padding:1rem;border-left:.15rem solid transparent;transition:border-left-color .15s}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display.show fieldset:hover{border-left:.15rem solid var(--neutral)}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display.show fieldset label{font-weight:bolder;font-size:120%;border-bottom:1px solid var(--neutral);width:100%;margin-bottom:2rem}.inu-open-api-endpoint .response .response-table tr{border-bottom:.2rem solid var(--neutral)}.inu-open-api-endpoint .description-content{padding-top:1rem}.inu-open-api-endpoint.get{background:var(--endpoint-get-detail-background);border-color:var(--endpoint-get-background)}.inu-open-api-endpoint.get header h2{color:var(--endpoint-get-background-darker)}.inu-open-api-endpoint.head{background:var(--endpoint-head-detail-background);border-color:var(--endpoint-head-background)}.inu-open-api-endpoint.head header h2{color:var(--endpoint-head-background-darker)}.inu-open-api-endpoint.post{background:var(--endpoint-post-detail-background);border-color:var(--endpoint-post-background)}.inu-open-api-endpoint.post header h2{color:var(--endpoint-post-background-darker)}.inu-open-api-endpoint.put{background:var(--endpoint-put-detail-background);border-color:var(--endpoint-put-background)}.inu-open-api-endpoint.put header h2{color:var(--endpoint-put-background-darker)}.inu-open-api-endpoint.patch{background:var(--endpoint-patch-detail-background);border-color:var(--endpoint-patch-background)}.inu-open-api-endpoint.patch header h2{color:var(--endpoint-patch-background-darker)}.inu-open-api-endpoint.delete{background:var(--endpoint-delete-detail-background);border-color:var(--endpoint-delete-background)}.inu-open-api-endpoint.delete header h2{color:var(--endpoint-delete-background-darker)}.inu-open-api-endpoint.option{background:var(--endpoint-option-detail-background);border-color:var(--endpoint-option-background)}.inu-open-api-endpoint.option{background:var(--endpoint-trace-detail-background);border-color:var(--endpoint-trace-background)}.inu-open-api-endpoint .inu-endpoint-response-status{width:10%;max-width:5rem;min-width:3rem}@media(max-width:768px){.inu-open-api-endpoint .inu-endpoint-response-status{width:100%;max-width:100%;min-width:100%}}.inu-open-api-endpoint .response-table-body .flex-table-body-row{display:flex;flex-direction:row;justify-content:space-between}@media(max-width:768px){.inu-open-api-endpoint .response-table-body .flex-table-body-row{flex-direction:column}}.inu-open-api-endpoint .response-table-body .flex-table-body-row .description-content{flex:1}.inu-open-api-endpoint .inu-endpoint-response-status{margin-right:.5rem;font-weight:700;display:inline-flex;align-items:center}.inu-open-api-endpoint .inu-endpoint-response-status.success{border-right:.25rem solid var(--success);color:var(--success-dark)}@media(max-width:768px){.inu-open-api-endpoint .inu-endpoint-response-status.success{width:100%;border-right:none;border-bottom:.25rem solid var(--success)}}.inu-open-api-endpoint .inu-endpoint-response-status.warning{border-right:.25rem solid var(--warning);color:var(--warning-dark)}@media(max-width:768px){.inu-open-api-endpoint .inu-endpoint-response-status.warning{width:100%;border-right:none;border-bottom:.25rem solid var(--warning)}}.inu-open-api-endpoint .inu-endpoint-response-status.error{border-right:.25rem solid var(--danger);color:var(--danger)}@media(max-width:768px){.inu-open-api-endpoint .inu-endpoint-response-status.error{width:100%;border-right:none;border-bottom:.25rem solid var(--danger)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], schemas: [{ type: i0.Input, args: [{ isSignal: true, alias: "schemas", required: false }] }] } });
 const CACHE_PREFIX = 'inu-open-api_';
@@ -982,13 +996,13 @@ class InuOpenApi {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InuOpenApi, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: InuOpenApi, isStandalone: true, selector: "inu-open-api", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"inu-open-api\">\n  @if(_value()){\n\n    <section>\n      @if(_value()?.info){\n        <header>\n          <h2>{{_value()?.info?.title!}}</h2>\n          <h3>{{_value()?.info?.version!}}</h3>\n          <p>\n            {{_value()?.info?.description!}}\n          </p>\n        </header>\n      }\n\n      <div class=\"endpoints\">\n        @if(_value()?.paths){\n          @for (endpoint of _value()?.paths;track endpoint.uri;) {\n            <inu-open-api-endpoint [data]=\"endpoint\" [schemas]=\"_value()?.components?.schemas\"></inu-open-api-endpoint>\n          }\n        }\n      </div>\n    </section>\n  }\n</div>\n", styles: [".inu-open-api .endpoints{display:flex;flex-direction:column;gap:1rem}\n"], dependencies: [{ kind: "component", type: InuOpenApiEndpoint, selector: "inu-open-api-endpoint", inputs: ["data", "schemas"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: InuOpenApi, isStandalone: true, selector: "inu-open-api", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"inu-open-api\">\n  @if(_value()){\n\n    <section>\n      @if(_value()?.info){\n        <header>\n          <h2>{{_value()?.info?.title!}}</h2>\n          <h3>{{_value()?.info?.version!}}</h3>\n          <p>\n            {{_value()?.info?.description!}}\n          </p>\n        </header>\n      }\n\n      <!--<inu-open-api-filter></inu-open-api-filter>-->\n      <div class=\"endpoints\">\n        @if(_value()?.paths){\n          @for (endpoint of _value()?.paths;track endpoint.uri;) {\n            <inu-open-api-endpoint [data]=\"endpoint\" [schemas]=\"_value()?.components?.schemas\"></inu-open-api-endpoint>\n          }\n        }\n      </div>\n    </section>\n  }\n</div>\n", styles: [".inu-open-api .endpoints{display:flex;flex-direction:column;gap:1rem}\n"], dependencies: [{ kind: "component", type: InuOpenApiEndpoint, selector: "inu-open-api-endpoint", inputs: ["data", "schemas"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InuOpenApi, decorators: [{
             type: Component,
             args: [{ selector: 'inu-open-api', standalone: true, imports: [
                         InuOpenApiEndpoint
-                    ], template: "<div class=\"inu-open-api\">\n  @if(_value()){\n\n    <section>\n      @if(_value()?.info){\n        <header>\n          <h2>{{_value()?.info?.title!}}</h2>\n          <h3>{{_value()?.info?.version!}}</h3>\n          <p>\n            {{_value()?.info?.description!}}\n          </p>\n        </header>\n      }\n\n      <div class=\"endpoints\">\n        @if(_value()?.paths){\n          @for (endpoint of _value()?.paths;track endpoint.uri;) {\n            <inu-open-api-endpoint [data]=\"endpoint\" [schemas]=\"_value()?.components?.schemas\"></inu-open-api-endpoint>\n          }\n        }\n      </div>\n    </section>\n  }\n</div>\n", styles: [".inu-open-api .endpoints{display:flex;flex-direction:column;gap:1rem}\n"] }]
+                    ], template: "<div class=\"inu-open-api\">\n  @if(_value()){\n\n    <section>\n      @if(_value()?.info){\n        <header>\n          <h2>{{_value()?.info?.title!}}</h2>\n          <h3>{{_value()?.info?.version!}}</h3>\n          <p>\n            {{_value()?.info?.description!}}\n          </p>\n        </header>\n      }\n\n      <!--<inu-open-api-filter></inu-open-api-filter>-->\n      <div class=\"endpoints\">\n        @if(_value()?.paths){\n          @for (endpoint of _value()?.paths;track endpoint.uri;) {\n            <inu-open-api-endpoint [data]=\"endpoint\" [schemas]=\"_value()?.components?.schemas\"></inu-open-api-endpoint>\n          }\n        }\n      </div>\n    </section>\n  }\n</div>\n", styles: [".inu-open-api .endpoints{display:flex;flex-direction:column;gap:1rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
 class InuOpenApiRequest {