@ng-atomic/components 16.2.0 → 17.0.0

package/fesm2022/ng-atomic-components-molecules-navigation-list-item.mjs

@@ -1,70 +1,82 @@
-import { CommonModule } from '@angular/common';
+import { __decorate } from 'tslib';
 import * as i0 from '@angular/core';
-import { InjectionToken, Directive, Input, inject, Component, ChangeDetectionStrategy } from '@angular/core';
+import { input, Directive, inject, Component, ChangeDetectionStrategy } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import * as i1 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
-import { InjectableComponent } from '@ng-atomic/core';
+import { InjectableComponent, TokenizedType, NgAtomicComponent } from '@ng-atomic/core';
 import { IconAtom } from '@ng-atomic/components/atoms/icon';
+import { MatBadgeModule } from '@angular/material/badge';
+import { BadgeAtom } from '@ng-atomic/components/atoms/badge';
 
-class NavigationListItemMoleculeStore extends InjectableComponent {
+let NavigationListItemMoleculeStore = class NavigationListItemMoleculeStore extends InjectableComponent {
     constructor() {
         super(...arguments);
-        this.selected = false;
+        this.action = input(null, { alias: 'action' });
+        this.selected = input(false);
     }
-    static { this.TOKEN = new InjectionToken('NavigationListItemMoleculeStore'); }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationListItemMoleculeStore, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: NavigationListItemMoleculeStore, isStandalone: true, selector: "molecules-navigation-list-item", inputs: { _action: ["action", "_action"], selected: "selected" }, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationListItemMoleculeStore, decorators: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: NavigationListItemMoleculeStore, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.2.2", type: NavigationListItemMoleculeStore, isStandalone: true, selector: "molecules-navigation-list-item", inputs: { action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+};
+NavigationListItemMoleculeStore = __decorate([
+    TokenizedType()
+], NavigationListItemMoleculeStore);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: NavigationListItemMoleculeStore, decorators: [{
             type: Directive,
             args: [{ standalone: true, selector: 'molecules-navigation-list-item' }]
-        }], propDecorators: { _action: [{
-                type: Input,
-                args: ['action']
-            }], selected: [{
-                type: Input
-            }] } });
-class NavigationListItemMolecule {
+        }] });
+class NavigationListItemMolecule extends NgAtomicComponent {
     constructor() {
+        super(...arguments);
         this.store = inject(NavigationListItemMoleculeStore);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationListItemMolecule, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NavigationListItemMolecule, isStandalone: true, selector: "molecules-navigation-list-item", hostDirectives: [{ directive: NavigationListItemMoleculeStore, inputs: ["action", "action", "selected", "selected"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: NavigationListItemMolecule, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: NavigationListItemMolecule, isStandalone: true, selector: "molecules-navigation-list-item", usesInheritance: true, hostDirectives: [{ directive: NavigationListItemMoleculeStore, inputs: ["action", "action", "selected", "selected"] }], ngImport: i0, template: `
     <mat-list-item>
       <atoms-icon
         matListItemIcon
-        [name]="store._action?.icon"
-        [color]="store._action?.color"
         matListItemMeta
-      ></atoms-icon>
-      <div matListItemTitle>{{ store._action.name }}</div>
+        [name]="store.action()?.icon"
+        [color]="store.action()?.color"
+      />
+      <div matListItemTitle>
+        <span>{{ store.action()?.name }}</span>
+        @if (store.action()?.meta?.badge) {
+          <atoms-badge [value]="store.action()?.meta?.badge"/>
+        }
+      </div>
     </mat-list-item>
-  `, isInline: true, styles: [":host{display:block}:host{--mdc-list-list-item-hover-label-text-color: white;--mdc-list-list-item-label-text-color: white;--mdc-list-list-item-supporting-text-color: white}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i1.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i1.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i1.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "component", type: IconAtom, selector: "atoms-icon", inputs: ["name", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;--primary-color: #404040;--primary-color-SCOPED-IN-navigation-list-item-aWgg: var(--primary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-navigation-list-item-aWgg: var(--surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-navigation-list-item-aWgg: var(--background-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-navigation-list-item-aWgg: var(--on-primary-color);--on-background-color: #404040;--on-background-color-SCOPED-IN-navigation-list-item-aWgg: var(--on-background-color);--on-surface-color: #404040;--on-surface-color-SCOPED-IN-navigation-list-item-aWgg: var(--on-surface-color);--mat-badge-background-color-SCOPED-IN-navigation-list-item-aWgg: var(--mat-badge-background-color)}:host{--mdc-list-list-item-hover-label-text-color: var(--on-background-color);--mdc-list-list-item-label-text-color: var(--on-background-color);--mdc-list-list-item-supporting-text-color: var(--on-background-color);--mat-list-list-item-leading-icon-end-space: 16px}:host [matListItemTitle]{display:flex;align-items:center;gap:4px}:host ::ng-deep .mat-list-item .mat-list-item-content{display:flex;align-items:center;grid-gap:8px;padding-top:8px;padding-bottom:8px;cursor:pointer;color:var(--on-background-color-SCOPED-IN-navigation-list-item-aWgg);font-size:12px}:host ::ng-deep .mat-list-item .mat-list-text{padding-left:8px!important}:host *{--background-color: var(--background-color-SCOPED-IN-navigation-list-item-aWgg);--on-background-color: var(--on-background-color-SCOPED-IN-navigation-list-item-aWgg);--surface-color: var(--surface-color-SCOPED-IN-navigation-list-item-aWgg);--on-surface-color: var(--on-surface-color-SCOPED-IN-navigation-list-item-aWgg);--primary-color: var(--on-primary-color-SCOPED-IN-navigation-list-item-aWgg);--on-primary-color: var(--primary-color-SCOPED-IN-navigation-list-item-aWgg)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i1.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i1.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i1.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "component", type: IconAtom, selector: "atoms-icon", inputs: ["name", "color"] }, { kind: "component", type: BadgeAtom, selector: "atoms-badge", inputs: ["value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationListItemMolecule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: NavigationListItemMolecule, decorators: [{
             type: Component,
             args: [{ selector: 'molecules-navigation-list-item', standalone: true, imports: [
-                        CommonModule,
                         MatIconModule,
                         MatListModule,
+                        MatBadgeModule,
                         IconAtom,
+                        BadgeAtom,
                     ], template: `
     <mat-list-item>
       <atoms-icon
         matListItemIcon
-        [name]="store._action?.icon"
-        [color]="store._action?.color"
         matListItemMeta
-      ></atoms-icon>
-      <div matListItemTitle>{{ store._action.name }}</div>
+        [name]="store.action()?.icon"
+        [color]="store.action()?.color"
+      />
+      <div matListItemTitle>
+        <span>{{ store.action()?.name }}</span>
+        @if (store.action()?.meta?.badge) {
+          <atoms-badge [value]="store.action()?.meta?.badge"/>
+        }
+      </div>
     </mat-list-item>
   `, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                         {
                             directive: NavigationListItemMoleculeStore,
                             inputs: ['action', 'selected'],
                         },
-                    ], styles: [":host{display:block}:host{--mdc-list-list-item-hover-label-text-color: white;--mdc-list-list-item-label-text-color: white;--mdc-list-list-item-supporting-text-color: white}\n"] }]
+                    ], styles: [":host{display:block;--primary-color: #404040;--primary-color-SCOPED-IN-navigation-list-item-aWgg: var(--primary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-navigation-list-item-aWgg: var(--surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-navigation-list-item-aWgg: var(--background-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-navigation-list-item-aWgg: var(--on-primary-color);--on-background-color: #404040;--on-background-color-SCOPED-IN-navigation-list-item-aWgg: var(--on-background-color);--on-surface-color: #404040;--on-surface-color-SCOPED-IN-navigation-list-item-aWgg: var(--on-surface-color);--mat-badge-background-color-SCOPED-IN-navigation-list-item-aWgg: var(--mat-badge-background-color)}:host{--mdc-list-list-item-hover-label-text-color: var(--on-background-color);--mdc-list-list-item-label-text-color: var(--on-background-color);--mdc-list-list-item-supporting-text-color: var(--on-background-color);--mat-list-list-item-leading-icon-end-space: 16px}:host [matListItemTitle]{display:flex;align-items:center;gap:4px}:host ::ng-deep .mat-list-item .mat-list-item-content{display:flex;align-items:center;grid-gap:8px;padding-top:8px;padding-bottom:8px;cursor:pointer;color:var(--on-background-color-SCOPED-IN-navigation-list-item-aWgg);font-size:12px}:host ::ng-deep .mat-list-item .mat-list-text{padding-left:8px!important}:host *{--background-color: var(--background-color-SCOPED-IN-navigation-list-item-aWgg);--on-background-color: var(--on-background-color-SCOPED-IN-navigation-list-item-aWgg);--surface-color: var(--surface-color-SCOPED-IN-navigation-list-item-aWgg);--on-surface-color: var(--on-surface-color-SCOPED-IN-navigation-list-item-aWgg);--primary-color: var(--on-primary-color-SCOPED-IN-navigation-list-item-aWgg);--on-primary-color: var(--primary-color-SCOPED-IN-navigation-list-item-aWgg)}\n"] }]
         }] });
 
 /**

package/fesm2022/ng-atomic-components-molecules-navigation-list-item.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-atomic-components-molecules-navigation-list-item.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/molecules/navigation-list-item/navigation-list-item.molecule.ts","../../../../../packages/@ng-atomic/components/src/lib/molecules/navigation-list-item/ng-atomic-components-molecules-navigation-list-item.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, ChangeDetectionStrategy, Input, Directive, inject, InjectionToken } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatListModule } from '@angular/material/list';\nimport { InjectableComponent } from '@ng-atomic/core';\nimport { Action } from '@ng-atomic/core';\nimport { IconAtom } from '@ng-atomic/components/atoms/icon';\n\n@Directive({ standalone: true, selector: 'molecules-navigation-list-item' })\nexport class NavigationListItemMoleculeStore extends InjectableComponent {\n  static TOKEN = new InjectionToken('NavigationListItemMoleculeStore');\n  @Input('action') _action: Action;\n  @Input() selected = false;\n}\n\n@Component({\n  selector: 'molecules-navigation-list-item',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatIconModule,\n    MatListModule,\n    IconAtom,\n  ],\n  template: `\n    <mat-list-item>\n      <atoms-icon\n        matListItemIcon\n        [name]=\"store._action?.icon\"\n        [color]=\"store._action?.color\"\n        matListItemMeta\n      ></atoms-icon>\n      <div matListItemTitle>{{ store._action.name }}</div>\n    </mat-list-item>\n  `,\n  styleUrls: ['./navigation-list-item.molecule.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: NavigationListItemMoleculeStore,\n      inputs: ['action', 'selected'],\n    },\n  ]\n})\nexport class NavigationListItemMolecule {\n  protected store = inject(NavigationListItemMoleculeStore);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;AASM,MAAO,+BAAgC,SAAQ,mBAAmB,CAAA;AADxE,IAAA,WAAA,GAAA;;QAIW,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;AAC3B,KAAA;AAHQ,IAAA,SAAA,IAAA,CAAA,KAAK,GAAG,IAAI,cAAc,CAAC,iCAAiC,CAAC,CAAC,EAAA;+GAD1D,+BAA+B,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;mGAA/B,+BAA+B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gCAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,CAAA,QAAA,EAAA,SAAA,CAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;4FAA/B,+BAA+B,EAAA,UAAA,EAAA,CAAA;kBAD3C,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,gCAAgC,EAAE,CAAA;8BAGxD,OAAO,EAAA,CAAA;sBAAvB,KAAK;uBAAC,QAAQ,CAAA;gBACN,QAAQ,EAAA,CAAA;sBAAhB,KAAK;;MAgCK,0BAA0B,CAAA;AA7BvC,IAAA,WAAA,GAAA;AA8BY,QAAA,IAAA,CAAA,KAAK,GAAG,MAAM,CAAC,+BAA+B,CAAC,CAAC;AAC3D,KAAA;+GAFY,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;mGAA1B,0BAA0B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gCAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAnC1B,+BAA+B,EAehC,MAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;;;;AAUT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,gLAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAfC,YAAY,EACZ,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,aAAa,EACb,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,aAAa,obACb,QAAQ,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;4FAsBC,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBA7BtC,SAAS;+BACE,gCAAgC,EAAA,UAAA,EAC9B,IAAI,EACP,OAAA,EAAA;wBACP,YAAY;wBACZ,aAAa;wBACb,aAAa;wBACb,QAAQ;qBACT,EACS,QAAA,EAAA,CAAA;;;;;;;;;;GAUT,EAEgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAC/B,cAAA,EAAA;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,+BAA+B;AAC1C,4BAAA,MAAM,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC;AAC/B,yBAAA;AACF,qBAAA,EAAA,MAAA,EAAA,CAAA,gLAAA,CAAA,EAAA,CAAA;;;AC1CH;;AAEG;;;;"}
+{"version":3,"file":"ng-atomic-components-molecules-navigation-list-item.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/molecules/navigation-list-item/navigation-list-item.molecule.ts","../../../../../packages/@ng-atomic/components/src/lib/molecules/navigation-list-item/ng-atomic-components-molecules-navigation-list-item.ts"],"sourcesContent":["import { Component, ChangeDetectionStrategy, Directive, inject, input, effect } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatListModule } from '@angular/material/list';\nimport { InjectableComponent, NgAtomicComponent, TokenizedType } from '@ng-atomic/core';\nimport { Action } from '@ng-atomic/core';\nimport { IconAtom } from '@ng-atomic/components/atoms/icon';\nimport { MatBadgeModule } from '@angular/material/badge';\nimport { BadgeAtom } from '@ng-atomic/components/atoms/badge';\n\n@TokenizedType()\n@Directive({ standalone: true, selector: 'molecules-navigation-list-item' })\nexport class NavigationListItemMoleculeStore extends InjectableComponent {\n  readonly action = input<Action>(null, {alias: 'action'});\n  readonly selected = input(false);\n}\n\n@Component({\n  selector: 'molecules-navigation-list-item',\n  standalone: true,\n  imports: [\n    MatIconModule,\n    MatListModule,\n    MatBadgeModule,\n    IconAtom,\n    BadgeAtom,\n  ],\n  template: `\n    <mat-list-item>\n      <atoms-icon\n        matListItemIcon\n        matListItemMeta\n        [name]=\"store.action()?.icon\"\n        [color]=\"store.action()?.color\"\n      />\n      <div matListItemTitle>\n        <span>{{ store.action()?.name }}</span>\n        @if (store.action()?.meta?.badge) {\n          <atoms-badge [value]=\"store.action()?.meta?.badge\"/>\n        }\n      </div>\n    </mat-list-item>\n  `,\n  styleUrls: ['./navigation-list-item.molecule.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: NavigationListItemMoleculeStore,\n      inputs: ['action', 'selected'],\n    },\n  ]\n})\nexport class NavigationListItemMolecule extends NgAtomicComponent {\n  protected store = inject(NavigationListItemMoleculeStore);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;AAWO,IAAM,+BAA+B,GAArC,MAAM,+BAAgC,SAAQ,mBAAmB,CAAA;AAAjE,IAAA,WAAA,GAAA;;QACI,IAAM,CAAA,MAAA,GAAG,KAAK,CAAS,IAAI,EAAE,EAAC,KAAK,EAAE,QAAQ,EAAC,CAAC,CAAC;AAChD,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;AAClC,KAAA;8GAHY,+BAA+B,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAA/B,+BAA+B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gCAAA,EAAA,MAAA,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,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;AAA/B,+BAA+B,GAAA,UAAA,CAAA;AAF3C,IAAA,aAAa,EAAE;AAEH,CAAA,EAAA,+BAA+B,CAG3C,CAAA;2FAHY,+BAA+B,EAAA,UAAA,EAAA,CAAA;kBAD3C,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,gCAAgC,EAAE,CAAA;;AAyCrE,MAAO,0BAA2B,SAAQ,iBAAiB,CAAA;AAnCjE,IAAA,WAAA,GAAA;;AAoCY,QAAA,IAAA,CAAA,KAAK,GAAG,MAAM,CAAC,+BAA+B,CAAC,CAAC;AAC3D,KAAA;8GAFY,0BAA0B,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAA1B,0BAA0B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gCAAA,EAAA,eAAA,EAAA,IAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAxC1B,+BAA+B,EAehC,MAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;GAeT,EArBC,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,y1DAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,aAAa,8BACb,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,WAAA,EAAA,QAAA,EAAA,wDAAA,EAAA,MAAA,EAAA,CAAA,WAAA,CAAA,EAAA,QAAA,EAAA,CAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACb,cAAc,EACd,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAQ,kFACR,SAAS,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FA2BA,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBAnCtC,SAAS;+BACE,gCAAgC,EAAA,UAAA,EAC9B,IAAI,EACP,OAAA,EAAA;wBACP,aAAa;wBACb,aAAa;wBACb,cAAc;wBACd,QAAQ;wBACR,SAAS;qBACV,EACS,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;GAeT,EAEgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAC/B,cAAA,EAAA;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,+BAA+B;AAC1C,4BAAA,MAAM,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC;AAC/B,yBAAA;AACF,qBAAA,EAAA,MAAA,EAAA,CAAA,y1DAAA,CAAA,EAAA,CAAA;;;ACjDH;;AAEG;;;;"}

package/fesm2022/ng-atomic-components-molecules-nested-menu.mjs

@@ -9,8 +9,8 @@ class NestedMenuMolecule {
     constructor() {
         this.action = new EventEmitter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NestedMenuMolecule, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NestedMenuMolecule, isStandalone: true, selector: "molecules-nested-menu", inputs: { actions: "actions" }, outputs: { action: "action" }, viewQueries: [{ propertyName: "childMenu", first: true, predicate: ["childMenu"], descendants: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: NestedMenuMolecule, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: NestedMenuMolecule, isStandalone: true, selector: "molecules-nested-menu", inputs: { actions: "actions" }, outputs: { action: "action" }, viewQueries: [{ propertyName: "childMenu", first: true, predicate: ["childMenu"], descendants: true }], ngImport: i0, template: `
     <mat-menu #childMenu="matMenu" [overlapTrigger]="false">
     <span *ngFor="let _action of actions">
       <span *ngIf="_action?.children">
@@ -33,9 +33,9 @@ class NestedMenuMolecule {
       </span>
     </span>
   </mat-menu>
-  `, isInline: true, dependencies: [{ kind: "component", type: NestedMenuMolecule, selector: "molecules-nested-menu", inputs: ["actions"], outputs: ["action"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: NestedMenuMolecule, selector: "molecules-nested-menu", inputs: ["actions"], outputs: ["action"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NestedMenuMolecule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: NestedMenuMolecule, decorators: [{
             type: Component,
             args: [{
                     selector: 'molecules-nested-menu',

package/fesm2022/ng-atomic-components-molecules-nested-menu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-atomic-components-molecules-nested-menu.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/molecules/nested-menu/nested-menu.molecule.ts","../../../../../packages/@ng-atomic/components/src/lib/molecules/nested-menu/ng-atomic-components-molecules-nested-menu.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { Action } from '@ng-atomic/core';\nimport { MatMenuModule } from '@angular/material/menu';\n\n@Component({\n  selector: 'molecules-nested-menu',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatMenuModule,\n  ],\n  template: `\n    <mat-menu #childMenu=\"matMenu\" [overlapTrigger]=\"false\">\n    <span *ngFor=\"let _action of actions\">\n      <span *ngIf=\"_action?.children\">\n        <button mat-menu-item [matMenuTriggerFor]=\"menu.childMenu\">\n          <mat-icon>{{_action.icon}}</mat-icon>\n          <span>{{ _action.name }}</span>\n        </button>\n        <molecules-nested-menu\n          #menu\n          [actions]=\"_action.children\"\n          (action)=\"action.emit($event)\"\n        ></molecules-nested-menu>\n      </span>\n      \n      <span *ngIf=\"!_action?.children\">\n        <button mat-menu-item (click)=\"action.emit(_action)\">\n          <mat-icon>{{ _action.icon }}</mat-icon>\n          <span>{{ _action.name }}</span>\n        </button>\n      </span>\n    </span>\n  </mat-menu>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NestedMenuMolecule {\n  @Input()\n  actions: Action[];\n\n  @ViewChild('childMenu')\n  childMenu;\n\n  @Output()\n  action = new EventEmitter<Action>();\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-atomic-components-molecules-nested-menu.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/molecules/nested-menu/nested-menu.molecule.ts","../../../../../packages/@ng-atomic/components/src/lib/molecules/nested-menu/ng-atomic-components-molecules-nested-menu.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { Action } from '@ng-atomic/core';\nimport { MatMenuModule } from '@angular/material/menu';\n\n@Component({\n  selector: 'molecules-nested-menu',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatMenuModule,\n  ],\n  template: `\n    <mat-menu #childMenu=\"matMenu\" [overlapTrigger]=\"false\">\n    <span *ngFor=\"let _action of actions\">\n      <span *ngIf=\"_action?.children\">\n        <button mat-menu-item [matMenuTriggerFor]=\"menu.childMenu\">\n          <mat-icon>{{_action.icon}}</mat-icon>\n          <span>{{ _action.name }}</span>\n        </button>\n        <molecules-nested-menu\n          #menu\n          [actions]=\"_action.children\"\n          (action)=\"action.emit($event)\"\n        ></molecules-nested-menu>\n      </span>\n      \n      <span *ngIf=\"!_action?.children\">\n        <button mat-menu-item (click)=\"action.emit(_action)\">\n          <mat-icon>{{ _action.icon }}</mat-icon>\n          <span>{{ _action.name }}</span>\n        </button>\n      </span>\n    </span>\n  </mat-menu>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NestedMenuMolecule {\n  @Input()\n  actions: Action[];\n\n  @ViewChild('childMenu')\n  childMenu;\n\n  @Output()\n  action = new EventEmitter<Action>();\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ng-atomic-components-molecules-select-input-field.mjs

@@ -1,37 +1,54 @@
-import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
-import * as i2 from '@angular/forms';
+import { input, Directive, inject, Component, ChangeDetectionStrategy } from '@angular/core';
+import * as i1 from '@angular/forms';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import * as i4 from '@angular/material/select';
+import * as i3 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import { ErrorPipe } from '@ng-atomic/common/pipes/error';
-import * as i3 from '@angular/material/form-field';
-import * as i5 from '@angular/material/core';
+import * as i2 from '@angular/material/form-field';
+import * as i4 from '@angular/material/core';
 
+class SelectInputFieldMoleculeStore {
+    constructor() {
+        this.control = input(new FormControl({}));
+        this.label = input('');
+        this.appearance = input('outline');
+        this.options = input([]);
+        this.hint = input(null);
+        this.placeholder = input(null);
+        this.multiple = input(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: SelectInputFieldMoleculeStore, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.2.2", type: SelectInputFieldMoleculeStore, isStandalone: true, inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: SelectInputFieldMoleculeStore, decorators: [{
+            type: Directive,
+            args: [{ standalone: true }]
+        }] });
 class SelectInputFieldMolecule {
     constructor() {
-        this.label = '';
-        this.appearance = 'outline';
-        this.control = new FormControl({});
-        this.options = [];
-        this.value = (item) => item?.value;
+        this.store = inject(SelectInputFieldMoleculeStore);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectInputFieldMolecule, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SelectInputFieldMolecule, isStandalone: true, selector: "molecules-select-input-field", inputs: { label: "label", appearance: "appearance", control: "control", options: "options" }, host: { classAttribute: "molecule input-field field" }, ngImport: i0, template: `
-  <mat-form-field [appearance]="appearance">
-    <mat-label>{{ label }}</mat-label>
-    <mat-select [formControl]="control">
-      <mat-option *ngFor="let option of options; trackBy value;" [value]="option.value">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: SelectInputFieldMolecule, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: SelectInputFieldMolecule, isStandalone: true, selector: "molecules-select-input-field", host: { classAttribute: "molecule input-field field" }, hostDirectives: [{ directive: SelectInputFieldMoleculeStore, inputs: ["control", "control", "label", "label", "appearance", "appearance", "options", "options", "hint", "hint", "placeholder", "placeholder", "multiple", "multiple"] }], ngImport: i0, template: `
+  <mat-form-field [appearance]="store.appearance()">
+    <mat-label>{{ store.label() }}</mat-label>
+    <mat-select [formControl]="store.control()" [multiple]="store.multiple()">
+    @for (option of store.options(); track option?.value) {
+      <mat-option [value]="option.value">
         {{ option.name }}
       </mat-option>
+    }
     </mat-select>
-    <mat-error>{{ control.errors | error }}</mat-error>
+    @if (store.hint()) {
+      <mat-hint>{{ store.hint() }}</mat-hint>
+    }
+    <mat-error>{{ store.control().errors | error }}</mat-error>
   </mat-form-field>
-  `, isInline: true, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-select-input-field-X26S: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "pipe", type: ErrorPipe, name: "error" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-select-input-field-Lwr5: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: ErrorPipe, name: "error" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectInputFieldMolecule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: SelectInputFieldMolecule, decorators: [{
             type: Component,
             args: [{ selector: 'molecules-select-input-field', standalone: true, imports: [
                         CommonModule,
@@ -39,29 +56,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         MatSelectModule,
                         ErrorPipe,
                     ], template: `
-  <mat-form-field [appearance]="appearance">
-    <mat-label>{{ label }}</mat-label>
-    <mat-select [formControl]="control">
-      <mat-option *ngFor="let option of options; trackBy value;" [value]="option.value">
+  <mat-form-field [appearance]="store.appearance()">
+    <mat-label>{{ store.label() }}</mat-label>
+    <mat-select [formControl]="store.control()" [multiple]="store.multiple()">
+    @for (option of store.options(); track option?.value) {
+      <mat-option [value]="option.value">
         {{ option.name }}
       </mat-option>
+    }
     </mat-select>
-    <mat-error>{{ control.errors | error }}</mat-error>
+    @if (store.hint()) {
+      <mat-hint>{{ store.hint() }}</mat-hint>
+    }
+    <mat-error>{{ store.control().errors | error }}</mat-error>
   </mat-form-field>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'molecule input-field field' }, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-select-input-field-X26S: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"] }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], appearance: [{
-                type: Input
-            }], control: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }] } });
+  `, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'molecule input-field field' }, hostDirectives: [
+                        {
+                            directive: SelectInputFieldMoleculeStore,
+                            inputs: ['control', 'label', 'appearance', 'options', 'hint', 'placeholder', 'multiple'],
+                        },
+                    ], styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-select-input-field-Lwr5: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"] }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { SelectInputFieldMolecule };
+export { SelectInputFieldMolecule, SelectInputFieldMoleculeStore };
 //# sourceMappingURL=ng-atomic-components-molecules-select-input-field.mjs.map

package/fesm2022/ng-atomic-components-molecules-select-input-field.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-atomic-components-molecules-select-input-field.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/molecules/select-input-field/select-input-field.molecule.ts","../../../../../packages/@ng-atomic/components/src/lib/molecules/select-input-field/ng-atomic-components-molecules-select-input-field.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { MatSelectModule } from '@angular/material/select';\nimport { ErrorPipe } from '@ng-atomic/common/pipes/error';\n\nexport interface Option<T> {\n  name: string;\n  value: T;\n}\n\n@Component({\n  selector: 'molecules-select-input-field',\n  standalone: true,\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    MatSelectModule,\n    ErrorPipe,\n  ],\n  template: `\n  <mat-form-field [appearance]=\"appearance\">\n    <mat-label>{{ label }}</mat-label>\n    <mat-select [formControl]=\"control\">\n      <mat-option *ngFor=\"let option of options; trackBy value;\" [value]=\"option.value\">\n        {{ option.name }}\n      </mat-option>\n    </mat-select>\n    <mat-error>{{ control.errors | error }}</mat-error>\n  </mat-form-field>\n  `,\n  styleUrls: ['./select-input-field.molecule.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {class: 'molecule input-field field'},\n})\nexport class SelectInputFieldMolecule<T> {\n\n  @Input()\n  label: string = '';\n\n  @Input()\n  appearance: 'outline' | 'fill' = 'outline';\n\n  @Input()\n  control = new FormControl<T>({} as T);\n\n  @Input()\n  options: Option<T>[] = [];\n\n  value = (item: Option<T>) => item?.value; \n\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;MAmCa,wBAAwB,CAAA;AAxBrC,IAAA,WAAA,GAAA;QA2BE,IAAK,CAAA,KAAA,GAAW,EAAE,CAAC;QAGnB,IAAU,CAAA,UAAA,GAAuB,SAAS,CAAC;AAG3C,QAAA,IAAA,CAAA,OAAO,GAAG,IAAI,WAAW,CAAI,EAAO,CAAC,CAAC;QAGtC,IAAO,CAAA,OAAA,GAAgB,EAAE,CAAC;QAE1B,IAAK,CAAA,KAAA,GAAG,CAAC,IAAe,KAAK,IAAI,EAAE,KAAK,CAAC;AAE1C,KAAA;+GAhBY,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAxB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,wBAAwB,EAfzB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,8BAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,UAAA,EAAA,YAAA,EAAA,OAAA,EAAA,SAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,4BAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;;;;AAUT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,sLAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAfC,YAAY,EACZ,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,mBAAmB,EACnB,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,eAAe,4pBACf,SAAS,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;4FAiBA,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAxBpC,SAAS;+BACE,8BAA8B,EAAA,UAAA,EAC5B,IAAI,EACP,OAAA,EAAA;wBACP,YAAY;wBACZ,mBAAmB;wBACnB,eAAe;wBACf,SAAS;qBACV,EACS,QAAA,EAAA,CAAA;;;;;;;;;;GAUT,EAEgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC,EAAC,KAAK,EAAE,4BAA4B,EAAC,EAAA,MAAA,EAAA,CAAA,sLAAA,CAAA,EAAA,CAAA;8BAK3C,KAAK,EAAA,CAAA;sBADJ,KAAK;gBAIN,UAAU,EAAA,CAAA;sBADT,KAAK;gBAIN,OAAO,EAAA,CAAA;sBADN,KAAK;gBAIN,OAAO,EAAA,CAAA;sBADN,KAAK;;;AC9CR;;AAEG;;;;"}
+{"version":3,"file":"ng-atomic-components-molecules-select-input-field.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/molecules/select-input-field/select-input-field.molecule.ts","../../../../../packages/@ng-atomic/components/src/lib/molecules/select-input-field/ng-atomic-components-molecules-select-input-field.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Directive, Input, inject, input } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { MatSelectModule } from '@angular/material/select';\nimport { ErrorPipe } from '@ng-atomic/common/pipes/error';\n\nexport interface Option<T> {\n  name: string;\n  value: T;\n}\n\n@Directive({standalone: true})\nexport class SelectInputFieldMoleculeStore<T> {\n  readonly control = input(new FormControl<T>({} as T));\n  readonly label = input('');\n  readonly appearance = input<'outline' | 'fill'>('outline');\n  readonly options = input<Option<T>[]>([]);\n  readonly hint = input(null); \n  readonly placeholder = input(null);\n  readonly multiple = input(false);\n}\n\n@Component({\n  selector: 'molecules-select-input-field',\n  standalone: true,\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    MatSelectModule,\n    ErrorPipe,\n  ],\n  template: `\n  <mat-form-field [appearance]=\"store.appearance()\">\n    <mat-label>{{ store.label() }}</mat-label>\n    <mat-select [formControl]=\"store.control()\" [multiple]=\"store.multiple()\">\n    @for (option of store.options(); track option?.value) {\n      <mat-option [value]=\"option.value\">\n        {{ option.name }}\n      </mat-option>\n    }\n    </mat-select>\n    @if (store.hint()) {\n      <mat-hint>{{ store.hint() }}</mat-hint>\n    }\n    <mat-error>{{ store.control().errors | error }}</mat-error>\n  </mat-form-field>\n  `,\n  styleUrls: ['./select-input-field.molecule.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {class: 'molecule input-field field'},\n  hostDirectives: [\n    {\n      directive: SelectInputFieldMoleculeStore,\n      inputs: ['control', 'label', 'appearance', 'options', 'hint', 'placeholder', 'multiple'],\n    },\n  ],\n})\nexport class SelectInputFieldMolecule<T> {\n  protected readonly store = inject(SelectInputFieldMoleculeStore);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ng-atomic-components-molecules-smart-column.mjs

@@ -1,38 +1,108 @@
-import * as i2 from '@angular/cdk/clipboard';
+import * as i1 from '@angular/cdk/clipboard';
 import { ClipboardModule } from '@angular/cdk/clipboard';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { CdkTable, CdkColumnDef, CdkCellDef, CdkHeaderCellDef } from '@angular/cdk/table';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output } from '@angular/core';
+import { input, signal, Directive, inject, viewChild, EventEmitter, effect, Component, ViewEncapsulation, ChangeDetectionStrategy, Output } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import * as i4 from '@angular/material/icon';
+import * as i3 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i5 from '@angular/material/table';
-import { MatTextColumn, MatTableModule } from '@angular/material/table';
-import * as i6 from '@angular/material/tooltip';
+import * as i4 from '@angular/material/table';
+import { MatTableModule } from '@angular/material/table';
+import * as i5 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { DataAccessorPipe } from '@ng-atomic/common/pipes/data-accessor';
-import * as i3 from '@ng-atomic/common/pipes/smart-exp';
+import * as i2 from '@ng-atomic/common/pipes/smart-exp';
 import { SmartExpModule } from '@ng-atomic/common/pipes/smart-exp';
+import { NgAtomicComponent } from '@ng-atomic/core';
 
-class SmartColumnMolecule extends MatTextColumn {
+class SmartColumnTemplateStore {
     constructor() {
-        super(...arguments);
-        this.sort = 'none';
+        this.sort = input('none');
+        this.tooltipText = signal('copy');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: SmartColumnTemplateStore, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.2.2", type: SmartColumnTemplateStore, isStandalone: true, inputs: { sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: SmartColumnTemplateStore, decorators: [{
+            type: Directive,
+            args: [{ standalone: true }]
+        }] });
+class SmartColumnMolecule extends NgAtomicComponent {
+    constructor() {
+        super();
+        this.store = inject(SmartColumnTemplateStore);
+        this._table = inject(CdkTable, { optional: true });
+        this.headerText = input('');
+        this.name = input.required();
+        this.columnDef = viewChild.required(CdkColumnDef);
+        this.cell = viewChild.required(CdkCellDef);
+        this.headerCell = viewChild.required(CdkHeaderCellDef);
         this.headerClick = new EventEmitter();
-        this.text = 'copy';
+        effect(() => {
+            if (this.columnDef())
+                this.columnDef().name = this.name();
+        });
+    }
+    ngOnInit() {
+        if (this._table) {
+            this.columnDef().name = this.name();
+            this.columnDef().cell = this.cell();
+            this.columnDef().headerCell = this.headerCell();
+            this._table.addColumnDef(this.columnDef());
+        }
+    }
+    ngOnDestroy() {
+        if (this._table) {
+            this._table.removeColumnDef(this.columnDef());
+        }
     }
     copied() {
-        this.text = 'copied!';
-        setTimeout(() => this.text = 'copy', 1000);
+        this.store.tooltipText.set('copied!');
+        setTimeout(() => this.store.tooltipText.set('copy'), 1000);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SmartColumnMolecule, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SmartColumnMolecule, isStandalone: true, selector: "molecules-smart-column", inputs: { sort: "sort" }, outputs: { headerClick: "headerClick" }, usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef>\n  <th\n    mat-header-cell\n    *matHeaderCellDef\n    [style.text-align]=\"justify\"\n    (click)=\"headerClick.emit()\"\n  >\n    <p class=\"nowrap\" style=\"display: flex; align-items: center;\">\n      <span>{{headerText}}</span>\n      <ng-container [ngSwitch]=\"sort\">\n        <mat-icon class=\"order\" *ngSwitchCase=\"'asc'\">south</mat-icon>\n        <mat-icon class=\"order\" *ngSwitchCase=\"'desc'\">north</mat-icon>\n      </ng-container>\n    </p>\n  </th>\n  <td mat-cell *matCellDef=\"let data\" [style.text-align]=\"justify\">\n    <p class=\"nowrap\"\n      [cdkCopyToClipboard]=\"data | dataAccessor: name | smartExp: name\"\n      (click)=\"copied(); tooltip.show()\"\n      #tooltip=\"matTooltip\" [matTooltip]=\"text\" matTooltipPosition=\"below\"\n    >\n      {{ data | dataAccessor: name | smartExp: name }}\n    </p>\n  </td>\n</ng-container>", styles: ["th[mat-header-cell],td[mat-cell]{cursor:pointer}th[mat-header-cell] mat-icon.order,td[mat-cell] mat-icon.order{width:12px;height:12px;font-size:12px}th[mat-header-cell] .nowrap,td[mat-cell] .nowrap{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i2.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "ngmodule", type: SmartExpModule }, { kind: "pipe", type: i3.SmartExpPipe, name: "smartExp" }, { kind: "pipe", type: DataAccessorPipe, name: "dataAccessor" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: SmartColumnMolecule, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: SmartColumnMolecule, isStandalone: true, selector: "molecules-smart-column", inputs: { headerText: { classPropertyName: "headerText", publicName: "headerText", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { headerClick: "headerClick" }, viewQueries: [{ propertyName: "columnDef", first: true, predicate: CdkColumnDef, descendants: true, isSignal: true }, { propertyName: "cell", first: true, predicate: CdkCellDef, descendants: true, isSignal: true }, { propertyName: "headerCell", first: true, predicate: CdkHeaderCellDef, descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: SmartColumnTemplateStore, inputs: ["sort", "sort"] }], ngImport: i0, template: `
+  <ng-container matColumnDef>
+    <th
+      mat-header-cell
+      *matHeaderCellDef
+      [style.text-align]="justify"
+      (click)="headerClick.emit()"
+    >
+      <p
+        class="nowrap"
+        style="display: flex; align-items: center;"
+      >
+        <span>{{ headerText() }}</span>
+        @switch(store.sort()) {
+          @case('asc') {
+            <mat-icon class="order">south</mat-icon>
+          }
+          @case('desc') {
+            <mat-icon class="order">north</mat-icon>
+          }
+        }
+      </p>
+    </th>
+    <td
+      mat-cell
+      *matCellDef="let item"
+      [style.text-align]="justify"
+    >
+      <p class="nowrap"
+        [cdkCopyToClipboard]="item | dataAccessor: name() | smartExp: name()"
+        (click)="copied(); tooltip.show()"
+        #tooltip="matTooltip" [matTooltip]="store.tooltipText()" matTooltipPosition="below"
+      >
+        {{ item | dataAccessor: name() | smartExp: name() }}
+      </p>
+    </td>
+  </ng-container>
+  `, isInline: true, styles: ["th[mat-header-cell],td[mat-cell]{cursor:pointer}th[mat-header-cell] mat-icon.order,td[mat-cell] mat-icon.order{width:12px;height:12px;font-size:12px}th[mat-header-cell] p,td[mat-cell] p{width:100%;max-width:200px}th[mat-header-cell] .nowrap,td[mat-cell] .nowrap{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i1.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "ngmodule", type: SmartExpModule }, { kind: "pipe", type: i2.SmartExpPipe, name: "smartExp" }, { kind: "pipe", type: DataAccessorPipe, name: "dataAccessor" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "directive", type: i4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SmartColumnMolecule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: SmartColumnMolecule, decorators: [{
             type: Component,
             args: [{ selector: 'molecules-smart-column', standalone: true, imports: [
-                        CommonModule,
                         ClipboardModule,
                         SmartExpModule,
                         DataAccessorPipe,
@@ -40,10 +110,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         MatIconModule,
                         MatTableModule,
                         MatTooltipModule,
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container matColumnDef>\n  <th\n    mat-header-cell\n    *matHeaderCellDef\n    [style.text-align]=\"justify\"\n    (click)=\"headerClick.emit()\"\n  >\n    <p class=\"nowrap\" style=\"display: flex; align-items: center;\">\n      <span>{{headerText}}</span>\n      <ng-container [ngSwitch]=\"sort\">\n        <mat-icon class=\"order\" *ngSwitchCase=\"'asc'\">south</mat-icon>\n        <mat-icon class=\"order\" *ngSwitchCase=\"'desc'\">north</mat-icon>\n      </ng-container>\n    </p>\n  </th>\n  <td mat-cell *matCellDef=\"let data\" [style.text-align]=\"justify\">\n    <p class=\"nowrap\"\n      [cdkCopyToClipboard]=\"data | dataAccessor: name | smartExp: name\"\n      (click)=\"copied(); tooltip.show()\"\n      #tooltip=\"matTooltip\" [matTooltip]=\"text\" matTooltipPosition=\"below\"\n    >\n      {{ data | dataAccessor: name | smartExp: name }}\n    </p>\n  </td>\n</ng-container>", styles: ["th[mat-header-cell],td[mat-cell]{cursor:pointer}th[mat-header-cell] mat-icon.order,td[mat-cell] mat-icon.order{width:12px;height:12px;font-size:12px}th[mat-header-cell] .nowrap,td[mat-cell] .nowrap{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
-        }], propDecorators: { sort: [{
-                type: Input
-            }], headerClick: [{
+                    ], template: `
+  <ng-container matColumnDef>
+    <th
+      mat-header-cell
+      *matHeaderCellDef
+      [style.text-align]="justify"
+      (click)="headerClick.emit()"
+    >
+      <p
+        class="nowrap"
+        style="display: flex; align-items: center;"
+      >
+        <span>{{ headerText() }}</span>
+        @switch(store.sort()) {
+          @case('asc') {
+            <mat-icon class="order">south</mat-icon>
+          }
+          @case('desc') {
+            <mat-icon class="order">north</mat-icon>
+          }
+        }
+      </p>
+    </th>
+    <td
+      mat-cell
+      *matCellDef="let item"
+      [style.text-align]="justify"
+    >
+      <p class="nowrap"
+        [cdkCopyToClipboard]="item | dataAccessor: name() | smartExp: name()"
+        (click)="copied(); tooltip.show()"
+        #tooltip="matTooltip" [matTooltip]="store.tooltipText()" matTooltipPosition="below"
+      >
+        {{ item | dataAccessor: name() | smartExp: name() }}
+      </p>
+    </td>
+  </ng-container>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            directive: SmartColumnTemplateStore,
+                            inputs: ['sort'],
+                        },
+                    ], styles: ["th[mat-header-cell],td[mat-cell]{cursor:pointer}th[mat-header-cell] mat-icon.order,td[mat-cell] mat-icon.order{width:12px;height:12px;font-size:12px}th[mat-header-cell] p,td[mat-cell] p{width:100%;max-width:200px}th[mat-header-cell] .nowrap,td[mat-cell] .nowrap{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { headerClick: [{
                 type: Output
             }] } });
 
@@ -51,5 +161,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { SmartColumnMolecule };
+export { SmartColumnMolecule, SmartColumnTemplateStore };
 //# sourceMappingURL=ng-atomic-components-molecules-smart-column.mjs.map