npm - @ng-atomic/components - Versions diffs - 17.0.4 → 17.2.0 - Mend

@ng-atomic/components 17.0.4 → 17.2.0

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 (137) hide show

package/fesm2022/ng-atomic-components-frames-side-nav.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ng-atomic-components-frames-side-nav.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/side-nav/side-nav.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/side-nav/ng-atomic-components-frames-side-nav.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Directive, HostBinding, WritableSignal, inject, input, signal } from '@angular/core';\nimport { Breakpoint, makeConfig } from '@ng-atomic/common/services/ui';\nimport { DrawerFrame } from '@ng-atomic/components/frames/drawer';\nimport { LineUpFrame } from '@ng-atomic/components/frames/line-up';\nimport { MenuTemplateStore } from '@ng-atomic/components/templates/menu';\nimport { NgAtomicComponent, TokenizedType, _computed } from '@ng-atomic/core';\nimport { IconButtonMenuTemplateStore } from '@ng-atomic/components/templates/icon-button-menu';\nimport { InjectableComponent } from '@ng-atomic/core';\n\nexport function injectSideNavMode(): WritableSignal<'collapsed' \| 'expanded'> {\n return signal<'collapsed' \| 'expanded'>('collapsed');\n}\n\n@TokenizedType()\n@Directive({ standalone: true, selector: 'frames-side-nav' })\nexport class SideNavFrameStore extends InjectableComponent {\n static readonly Config = makeConfig(() => {\n const getFrameType = (breakpoint: Breakpoint) => {\n switch (breakpoint) {\n case 'xSmall': return 'drawer';\n default: return 'lineup';\n }\n }\n\n const getMenuType = (breakpoint: Breakpoint) => {\n switch (breakpoint) {\n case 'xSmall': return 'menu';\n case 'small':\n case 'medium': return 'icon-button-menu';\n default: return 'menu';\n }\n }\n\n const getMode = (breakpoint: Breakpoint) => {\n switch (breakpoint) {\n case 'xSmall': return 'collapsed';\n default: return 'expanded';\n }\n }\n\n return (_, context) => ({\n actions: [],\n menuType: getMenuType(context.breakpoint),\n menuTitle: undefined as string,\n mode: getMode(context.breakpoint),\n frameType: getFrameType(context.breakpoint) as 'lineup' \| 'drawer',\n });\n }, ['components', 'frames', 'sideNav']);\n\n readonly config = SideNavFrameStore.Config.inject();\n readonly actions = input(_computed(() => this.config().actions));\n readonly menuType = input(_computed(() => this.config().menuType));\n readonly menuTitle = input(_computed(() => this.config().menuTitle));\n readonly mode = input(_computed(() => this.config().mode));\n readonly frameType = input(_computed(() => this.config().frameType));\n\n @HostBinding('attr.frame')\n get attrFrame() {\n return this.frameType();\n }\n}\n\n\n@Component({\n standalone: true,\n imports: [\n NgTemplateOutlet,\n DrawerFrame,\n LineUpFrame,\n IconButtonMenuTemplateStore,\n MenuTemplateStore,\n ],\n selector: 'frames-side-nav',\n template: `\n @switch (store.frameType()) {\n @case ('drawer') {\n @defer {\n <frames-drawer [opened]=\"store.mode() === 'expanded'\">\n <ng-container ngTemplateOutlet=\"menu\" drawer/>\n <ng-container ngTemplateOutlet=\"contents\" contents/>\n </frames-drawer>\n }\n }\n @default {\n <!-- @defer { -->\n <frames-line-up [hasNext]=\"true\" [scope]=\"'nav'\">\n <ng-container ngTemplateOutlet=\"menu\" main/>\n <div class=\"content\" next><ng-container ngTemplateOutlet=\"contents\"/></div>\n </frames-line-up>\n <!-- } -->\n }\n }\n\n <ng-template #menu>\n @switch (store.menuType()) {\n @case ('icon-button-menu') {\n <!-- @defer { -->\n <templates-icon-button-menu injectable\n [actions]=\"store.actions()\"\n (action)=\"dispatch($event)\"\n />\n <!-- } -->\n }\n @default {\n <!-- @defer { -->\n <templates-menu injectable\n [title]=\"store.menuTitle()\"\n [actions]=\"store.actions()\"\n (action)=\"dispatch($event)\"\n />\n <!-- } -->\n }\n }\n </ng-template>\n <ng-template #contents><ng-content/></ng-template>\n `,\n styleUrls: ['./side-nav.frame.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n hostDirectives: [\n {\n directive: SideNavFrameStore,\n inputs: ['actions', 'menuType', 'menuTitle', 'mode', 'frameType'],\n },\n ],\n})\nexport class SideNavFrame extends NgAtomicComponent {\n protected store = inject(SideNavFrameStore);\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;~~SAUgB~~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~~AC5HH~~;;AAEG;;;;"}
1	+ {"version":3,"file":"ng-atomic-components-frames-side-nav.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/side-nav/side-nav.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/side-nav/ng-atomic-components-frames-side-nav.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Directive, HostBinding, WritableSignal, inject, input, signal } from '@angular/core';\nimport { Breakpoint } from '@ng-atomic/common/services/breakpoint';\nimport { makeConfig } from '@ng-atomic/common/services/ui';\nimport { DrawerFrame } from '@ng-atomic/components/frames/drawer';\nimport { LineUpFrame } from '@ng-atomic/components/frames/line-up';\nimport { MenuTemplateStore } from '@ng-atomic/components/templates/menu';\nimport { NgAtomicComponent, TokenizedType, _computed } from '@ng-atomic/core';\nimport { IconButtonMenuTemplateStore } from '@ng-atomic/components/templates/icon-button-menu';\nimport { InjectableComponent } from '@ng-atomic/core';\n\nexport function injectSideNavMode(): WritableSignal<'collapsed' \| 'expanded'> {\n return signal<'collapsed' \| 'expanded'>('collapsed');\n}\n\n@TokenizedType()\n@Directive({ standalone: true, selector: 'frames-side-nav' })\nexport class SideNavFrameStore extends InjectableComponent {\n static readonly Config = makeConfig(() => {\n const getFrameType = (breakpoint: Breakpoint) => {\n switch (breakpoint) {\n case 'xSmall': return 'drawer';\n default: return 'lineup';\n }\n }\n\n const getMenuType = (breakpoint: Breakpoint) => {\n switch (breakpoint) {\n case 'xSmall': return 'menu';\n case 'small':\n case 'medium': return 'icon-button-menu';\n default: return 'menu';\n }\n }\n\n const getMode = (breakpoint: Breakpoint) => {\n switch (breakpoint) {\n case 'xSmall': return 'collapsed';\n default: return 'expanded';\n }\n }\n\n return (_, context) => ({\n actions: [],\n menuType: getMenuType(context.breakpoint),\n menuTitle: undefined as string,\n mode: getMode(context.breakpoint),\n frameType: getFrameType(context.breakpoint) as 'lineup' \| 'drawer',\n });\n }, ['components', 'frames', 'sideNav']);\n\n readonly config = SideNavFrameStore.Config.inject();\n readonly actions = input(_computed(() => this.config().actions));\n readonly menuType = input(_computed(() => this.config().menuType));\n readonly menuTitle = input(_computed(() => this.config().menuTitle));\n readonly mode = input(_computed(() => this.config().mode));\n readonly frameType = input(_computed(() => this.config().frameType));\n\n @HostBinding('attr.frame')\n get attrFrame() {\n return this.frameType();\n }\n}\n\n\n@Component({\n standalone: true,\n imports: [\n NgTemplateOutlet,\n DrawerFrame,\n LineUpFrame,\n IconButtonMenuTemplateStore,\n MenuTemplateStore,\n ],\n selector: 'frames-side-nav',\n template: `\n @switch (store.frameType()) {\n @case ('drawer') {\n @defer {\n <frames-drawer [opened]=\"store.mode() === 'expanded'\">\n <ng-container ngTemplateOutlet=\"menu\" drawer/>\n <ng-container ngTemplateOutlet=\"contents\" contents/>\n </frames-drawer>\n }\n }\n @default {\n <!-- @defer { -->\n <frames-line-up [hasNext]=\"true\" [scope]=\"'nav'\">\n <ng-container ngTemplateOutlet=\"menu\" main/>\n <div class=\"content\" next><ng-container ngTemplateOutlet=\"contents\"/></div>\n </frames-line-up>\n <!-- } -->\n }\n }\n\n <ng-template #menu>\n @switch (store.menuType()) {\n @case ('icon-button-menu') {\n <!-- @defer { -->\n <templates-icon-button-menu injectable\n [actions]=\"store.actions()\"\n (action)=\"dispatch($event)\"\n />\n <!-- } -->\n }\n @default {\n <!-- @defer { -->\n <templates-menu injectable\n [title]=\"store.menuTitle()\"\n [actions]=\"store.actions()\"\n (action)=\"dispatch($event)\"\n />\n <!-- } -->\n }\n }\n </ng-template>\n <ng-template #contents><ng-content/></ng-template>\n `,\n styleUrls: ['./side-nav.frame.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n hostDirectives: [\n {\n directive: SideNavFrameStore,\n inputs: ['actions', 'menuType', 'menuTitle', 'mode', 'frameType'],\n },\n ],\n})\nexport class SideNavFrame extends NgAtomicComponent {\n protected store = inject(SideNavFrameStore);\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;SAWgB,iBAAiB,GAAA;AAC/B,IAAA,OAAO,MAAM,CAA2B,WAAW,CAAC,CAAC;AACvD,CAAC;AAIM,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,mBAAmB,CAAA;AAAnD,IAAA,WAAA,GAAA;;AAkCI,QAAA,IAAA,CAAA,MAAM,GAAG,mBAAiB,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;AAC3C,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;AACxD,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;AAC1D,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;AAC5D,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;AAClD,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;AAMtE,KAAA;;AA5CiB,IAAA,SAAA,IAAA,CAAA,MAAM,GAAG,UAAU,CAAC,MAAK;AACvC,QAAA,MAAM,YAAY,GAAG,CAAC,UAAsB,KAAI;AAC9C,YAAA,QAAQ,UAAU;AAChB,gBAAA,KAAK,QAAQ,EAAE,OAAO,QAAQ,CAAC;AAC/B,gBAAA,SAAS,OAAO,QAAQ,CAAC;AAC1B,aAAA;AACH,SAAC,CAAA;AAED,QAAA,MAAM,WAAW,GAAG,CAAC,UAAsB,KAAI;AAC7C,YAAA,QAAQ,UAAU;AAChB,gBAAA,KAAK,QAAQ,EAAE,OAAO,MAAM,CAAC;AAC7B,gBAAA,KAAK,OAAO,CAAC;AACb,gBAAA,KAAK,QAAQ,EAAE,OAAO,kBAAkB,CAAC;AACzC,gBAAA,SAAS,OAAO,MAAM,CAAC;AACxB,aAAA;AACH,SAAC,CAAA;AAED,QAAA,MAAM,OAAO,GAAG,CAAC,UAAsB,KAAI;AACzC,YAAA,QAAQ,UAAU;AAChB,gBAAA,KAAK,QAAQ,EAAE,OAAO,WAAW,CAAC;AAClC,gBAAA,SAAS,OAAO,UAAU,CAAC;AAC5B,aAAA;AACH,SAAC,CAAA;AAED,QAAA,OAAO,CAAC,CAAC,EAAE,OAAO,MAAM;AACtB,YAAA,OAAO,EAAE,EAAE;AACX,YAAA,QAAQ,EAAE,WAAW,CAAC,OAAO,CAAC,UAAU,CAAC;AACzC,YAAA,SAAS,EAAE,SAAmB;AAC9B,YAAA,IAAI,EAAE,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC;AACjC,YAAA,SAAS,EAAE,YAAY,CAAC,OAAO,CAAC,UAAU,CAAwB;AACnE,SAAA,CAAC,CAAC;KACJ,EAAE,CAAC,YAAY,EAAE,QAAQ,EAAE,SAAS,CAAC,CA/BhB,CA+BkB,EAAA;AASxC,IAAA,IACI,SAAS,GAAA;AACX,QAAA,OAAO,IAAI,CAAC,SAAS,EAAE,CAAC;KACzB;8GA5CU,iBAAiB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,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,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;AAAjB,iBAAiB,GAAA,mBAAA,GAAA,UAAA,CAAA;AAF7B,IAAA,aAAa,EAAE;AAEH,CAAA,EAAA,iBAAiB,CA6C7B,CAAA;2FA7CY,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAD7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAA;8BA2CtD,SAAS,EAAA,CAAA;sBADZ,WAAW;uBAAC,YAAY,CAAA;;AAqErB,MAAO,YAAa,SAAQ,iBAAiB,CAAA;AA9DnD,IAAA,WAAA,GAAA;;AA+DY,QAAA,IAAA,CAAA,KAAK,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC;AAC7C,KAAA;8GAFY,YAAY,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAZ,YAAY,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,IAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EA9GZ,iBAAiB,EA0DlB,MAAA,EAAA,CAAA,SAAA,EAAA,SAAA,EAAA,UAAA,EAAA,UAAA,EAAA,WAAA,EAAA,WAAA,EAAA,MAAA,EAAA,MAAA,EAAA,WAAA,EAAA,WAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,igEAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAjDC,gBAAgB,EAEhB,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,WAAW,EACX,QAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,2BAA2B,4FAC3B,iBAAiB,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FAuDR,YAAY,EAAA,UAAA,EAAA,CAAA;kBA9DxB,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,UAAA,EAAA,IAAI,EACP,OAAA,EAAA;wBACP,gBAAgB;wBAChB,WAAW;wBACX,WAAW;wBACX,2BAA2B;wBAC3B,iBAAiB;AAClB,qBAAA,EAAA,QAAA,EACS,iBAAiB,EACjB,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CT,EAEgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAC/B,cAAA,EAAA;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,iBAAiB;4BAC5B,MAAM,EAAE,CAAC,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,CAAC;AAClE,yBAAA;AACF,qBAAA,EAAA,MAAA,EAAA,CAAA,igEAAA,CAAA,EAAA,CAAA;;;AC7HH;;AAEG;;;;"}

package/fesm2022/ng-atomic-components-frames-smart-menu.mjs CHANGED Viewed

@@ -14,13 +14,13 @@ class SmartMenuFrame {
         return page === 'Blank' ? 'Blank' : this.isMainHidden ? `Next` : `NextWithMainPage`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: SmartMenuFrame, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: SmartMenuFrame, isStandalone: true, selector: "frames-smart-menu", inputs: { label: "label", outlet: "outlet", minNextWidth: "minNextWidth" }, host: { properties: { "attr.is-main-hidden": "this.isMainHidden" } }, viewQueries: [{ propertyName: "next", first: true, predicate: ["next"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"menu\" #menu>\n  <ng-content select=\"[menu]\"></ng-content>\n</div>\n<div class=\"contents\" #contents>\n  <ng-content select=\"[contents]\"></ng-content>\n</div>", styles: [":host{--gap: 1px;--gap-SCOPED-IN-smart-menu-Bcdd: var(--gap);--background: #ccc;--background-SCOPED-IN-smart-menu-Bcdd: var(--background);--contents-background: transparent;--contents-background-SCOPED-IN-smart-menu-Bcdd: var(--contents-background)}:host{position:relative;display:flex;justify-content:flex-start;gap:var(--gap-SCOPED-IN-smart-menu-Bcdd);width:-moz-fit-content;width:fit-content;height:100%;background:var(--background-SCOPED-IN-smart-menu-Bcdd)}:host .contents{display:flex;max-width:-moz-fit-content;max-width:fit-content;height:100%;background:var(--contents-background-SCOPED-IN-smart-menu-Bcdd)}:host .contents.menu{overflow:hidden;justify-content:flex-end}:host .contents.contents{overflow:visible;justify-content:flex-start}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: SmartMenuFrame, isStandalone: true, selector: "frames-smart-menu", inputs: { label: "label", outlet: "outlet", minNextWidth: "minNextWidth" }, host: { properties: { "attr.is-main-hidden": "this.isMainHidden" } }, viewQueries: [{ propertyName: "next", first: true, predicate: ["next"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"menu\" #menu>\n  <ng-content select=\"[menu]\"></ng-content>\n</div>\n<div class=\"contents\" #contents>\n  <ng-content select=\"[contents]\"></ng-content>\n</div>", styles: [":host{--gap: 1px;--gap-SCOPED-IN-smart-menu-bSpD: var(--gap);--background: #ccc;--background-SCOPED-IN-smart-menu-bSpD: var(--background);--contents-background: transparent;--contents-background-SCOPED-IN-smart-menu-bSpD: var(--contents-background)}:host{position:relative;display:flex;justify-content:flex-start;gap:var(--gap-SCOPED-IN-smart-menu-bSpD);width:-moz-fit-content;width:fit-content;height:100%;background:var(--background-SCOPED-IN-smart-menu-bSpD)}:host .contents{display:flex;max-width:-moz-fit-content;max-width:fit-content;height:100%;background:var(--contents-background-SCOPED-IN-smart-menu-bSpD)}:host .contents.menu{overflow:hidden;justify-content:flex-end}:host .contents.contents{overflow:visible;justify-content:flex-start}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: SmartMenuFrame, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         CommonModule,
-                    ], selector: 'frames-smart-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"menu\" #menu>\n  <ng-content select=\"[menu]\"></ng-content>\n</div>\n<div class=\"contents\" #contents>\n  <ng-content select=\"[contents]\"></ng-content>\n</div>", styles: [":host{--gap: 1px;--gap-SCOPED-IN-smart-menu-Bcdd: var(--gap);--background: #ccc;--background-SCOPED-IN-smart-menu-Bcdd: var(--background);--contents-background: transparent;--contents-background-SCOPED-IN-smart-menu-Bcdd: var(--contents-background)}:host{position:relative;display:flex;justify-content:flex-start;gap:var(--gap-SCOPED-IN-smart-menu-Bcdd);width:-moz-fit-content;width:fit-content;height:100%;background:var(--background-SCOPED-IN-smart-menu-Bcdd)}:host .contents{display:flex;max-width:-moz-fit-content;max-width:fit-content;height:100%;background:var(--contents-background-SCOPED-IN-smart-menu-Bcdd)}:host .contents.menu{overflow:hidden;justify-content:flex-end}:host .contents.contents{overflow:visible;justify-content:flex-start}\n"] }]
+                    ], selector: 'frames-smart-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"menu\" #menu>\n  <ng-content select=\"[menu]\"></ng-content>\n</div>\n<div class=\"contents\" #contents>\n  <ng-content select=\"[contents]\"></ng-content>\n</div>", styles: [":host{--gap: 1px;--gap-SCOPED-IN-smart-menu-bSpD: var(--gap);--background: #ccc;--background-SCOPED-IN-smart-menu-bSpD: var(--background);--contents-background: transparent;--contents-background-SCOPED-IN-smart-menu-bSpD: var(--contents-background)}:host{position:relative;display:flex;justify-content:flex-start;gap:var(--gap-SCOPED-IN-smart-menu-bSpD);width:-moz-fit-content;width:fit-content;height:100%;background:var(--background-SCOPED-IN-smart-menu-bSpD)}:host .contents{display:flex;max-width:-moz-fit-content;max-width:fit-content;height:100%;background:var(--contents-background-SCOPED-IN-smart-menu-bSpD)}:host .contents.menu{overflow:hidden;justify-content:flex-end}:host .contents.contents{overflow:visible;justify-content:flex-start}\n"] }]
         }], propDecorators: { isMainHidden: [{
                 type: HostBinding,
                 args: ['attr.is-main-hidden']

package/fesm2022/ng-atomic-components-frames-vertical-hide.mjs CHANGED Viewed

@@ -11,7 +11,7 @@ class VerticalHideFrame {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: VerticalHideFrame, isStandalone: true, selector: "frames-vertical-hide", inputs: { mode: "mode" }, host: { properties: { "attr.mode": "this.mode" } }, ngImport: i0, template: `
     <ng-content></ng-content>
     <organisms-vertical-divider></organisms-vertical-divider>
-  `, isInline: true, styles: [":host{--collapsed-height: 200px;--collapsed-height-SCOPED-IN-vertical-hide-n1a5: var(--collapsed-height);--expanded-height: 400px;--expanded-height-SCOPED-IN-vertical-hide-n1a5: var(--expanded-height)}:host{position:relative;display:block;transition:.5s height}:host organisms-vertical-divider{position:absolute;bottom:0;width:100%}:host[mode=collapsed]{height:var(--collapsed-height-SCOPED-IN-vertical-hide-n1a5)}:host[mode=expanded]{height:var(--expanded-height-SCOPED-IN-vertical-hide-n1a5)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: VerticalDividerOrganism, selector: "organisms-vertical-divider" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--collapsed-height: 200px;--collapsed-height-SCOPED-IN-vertical-hide-8og6: var(--collapsed-height);--expanded-height: 400px;--expanded-height-SCOPED-IN-vertical-hide-8og6: var(--expanded-height)}:host{position:relative;display:block;transition:.5s height}:host organisms-vertical-divider{position:absolute;bottom:0;width:100%}:host[mode=collapsed]{height:var(--collapsed-height-SCOPED-IN-vertical-hide-8og6)}:host[mode=expanded]{height:var(--expanded-height-SCOPED-IN-vertical-hide-8og6)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: VerticalDividerOrganism, selector: "organisms-vertical-divider" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: VerticalHideFrame, decorators: [{
             type: Component,
@@ -21,7 +21,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
                     ], template: `
     <ng-content></ng-content>
     <organisms-vertical-divider></organisms-vertical-divider>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--collapsed-height: 200px;--collapsed-height-SCOPED-IN-vertical-hide-n1a5: var(--collapsed-height);--expanded-height: 400px;--expanded-height-SCOPED-IN-vertical-hide-n1a5: var(--expanded-height)}:host{position:relative;display:block;transition:.5s height}:host organisms-vertical-divider{position:absolute;bottom:0;width:100%}:host[mode=collapsed]{height:var(--collapsed-height-SCOPED-IN-vertical-hide-n1a5)}:host[mode=expanded]{height:var(--expanded-height-SCOPED-IN-vertical-hide-n1a5)}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--collapsed-height: 200px;--collapsed-height-SCOPED-IN-vertical-hide-8og6: var(--collapsed-height);--expanded-height: 400px;--expanded-height-SCOPED-IN-vertical-hide-8og6: var(--expanded-height)}:host{position:relative;display:block;transition:.5s height}:host organisms-vertical-divider{position:absolute;bottom:0;width:100%}:host[mode=collapsed]{height:var(--collapsed-height-SCOPED-IN-vertical-hide-8og6)}:host[mode=expanded]{height:var(--expanded-height-SCOPED-IN-vertical-hide-8og6)}\n"] }]
         }], propDecorators: { mode: [{
                 type: Input
             }, {

package/fesm2022/ng-atomic-components-molecules-checkbox-column.mjs CHANGED Viewed

@@ -20,6 +20,7 @@ class CheckboxColumnMolecule extends NgAtomicComponent {
         this._table = inject((CdkTable), { optional: true });
         this.name = input.required();
         this.selection = input(new SelectionModel(true, []));
+        this.isHidden = input((item) => true);
         this.columnDef = viewChild.required(CdkColumnDef);
         this.cell = viewChild.required(CdkCellDef);
         this.headerCell = viewChild.required(CdkHeaderCellDef);
@@ -45,16 +46,18 @@ class CheckboxColumnMolecule extends NgAtomicComponent {
         this.dispatch({ id: ActionId.CHECKBOX_CLICK, payload: item });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: CheckboxColumnMolecule, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.2.2", type: CheckboxColumnMolecule, isStandalone: true, selector: "molecules-checkbox-column", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: CheckboxColumnMolecule, isStandalone: true, selector: "molecules-checkbox-column", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, isHidden: { classPropertyName: "isHidden", publicName: "isHidden", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             { provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: { clickAction: 'noop' } }
         ], 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, ngImport: i0, template: `
   <ng-container matColumnDef>
     <th mat-header-cell *matHeaderCellDef></th>
     <td mat-cell *matCellDef="let item">
-      <mat-checkbox
-        (click)="onCheckboxClick(item, $event)"
-        [checked]="selection().isSelected(item | selectId)"
-      />
+      @if (isHidden()(item)) {
+        <mat-checkbox
+          (click)="onCheckboxClick(item, $event)"
+          [checked]="selection().isSelected(item | selectId)"
+        />
+      }
     </td>
   </ng-container>`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "directive", type: i1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: SelectIdPipe, name: "selectId" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -68,10 +71,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
   <ng-container matColumnDef>
     <th mat-header-cell *matHeaderCellDef></th>
     <td mat-cell *matCellDef="let item">
-      <mat-checkbox
-        (click)="onCheckboxClick(item, $event)"
-        [checked]="selection().isSelected(item | selectId)"
-      />
+      @if (isHidden()(item)) {
+        <mat-checkbox
+          (click)="onCheckboxClick(item, $event)"
+          [checked]="selection().isSelected(item | selectId)"
+        />
+      }
     </td>
   </ng-container>`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: { clickAction: 'noop' } }

package/fesm2022/ng-atomic-components-molecules-checkbox-column.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ng-atomic-components-molecules-checkbox-column.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/molecules/checkbox-column/checkbox-column.molecule.ts","../../../../../packages/@ng-atomic/components/src/lib/molecules/checkbox-column/ng-atomic-components-molecules-checkbox-column.ts"],"sourcesContent":["import { SelectionModel } from '@angular/cdk/collections';\nimport { CdkCellDef, CdkColumnDef, CdkHeaderCellDef, CdkTable } from '@angular/cdk/table';\nimport { ChangeDetectionStrategy, Component, EventEmitter, Output, SimpleChanges, ViewEncapsulation, effect, inject, input, viewChild } from '@angular/core';\nimport { MAT_CHECKBOX_DEFAULT_OPTIONS, MatCheckboxDefaultOptions, MatCheckboxModule } from '@angular/material/checkbox';\nimport { MatTableModule } from '@angular/material/table';\nimport { SelectIdPipe } from '@ng-atomic/common/pipes/select-id';\nimport { NgAtomicComponent } from '@ng-atomic/core';\n\nenum ActionId {\n CHECKBOX_CLICK = '[@ng-atomic/components/molecules/checkbox-column] Checkbox Click',\n}\n\n@Component({\n selector: 'molecules-checkbox-column',\n standalone: true,\n imports: [\n MatTableModule,\n MatCheckboxModule,\n SelectIdPipe,\n ],\n template: `\n <ng-container matColumnDef>\n <th mat-header-cell matHeaderCellDef></th>\n <td mat-cell matCellDef=\"let item\">\n <mat-checkbox\n (click)=\"onCheckboxClick(item, $event)\"\n [checked]=\"selection().isSelected(item \| selectId)\"\n />\n </td>\n </ng-container>`,\n styleUrls: ['./checkbox-column.molecule.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: { clickAction: 'noop' } as MatCheckboxDefaultOptions}\n ],\n})\nexport class CheckboxColumnMolecule<T> extends NgAtomicComponent {\n static readonly ActionId = ActionId;\n private _table = inject(CdkTable<T>, {optional: true});\n readonly name = input.required<string>();\n readonly selection = input(new SelectionModel<string>(true, []));\n readonly columnDef = viewChild.required(CdkColumnDef);\n readonly cell = viewChild.required(CdkCellDef);\n readonly headerCell = viewChild.required(CdkHeaderCellDef);\n\n constructor() {\n super();\n effect(() => {\n if (this.columnDef()) this.columnDef().name = this.name();\n })\n }\n\n ngOnInit() {\n if (this._table) {\n this.columnDef().name = this.name();\n this.columnDef().cell = this.cell();\n this.columnDef().headerCell = this.headerCell();\n this._table.addColumnDef(this.columnDef());\n }\n }\n\n ngOnDestroy() {\n if (this._table) {\n this._table.removeColumnDef(this.columnDef());\n }\n }\n\n protected onCheckboxClick(item: T, event: Event) {\n this.dispatch({id: ActionId.CHECKBOX_CLICK, payload: item});\n }\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;;;;;;AAQA,IAAK,QAEJ,CAAA;AAFD,CAAA,UAAK,QAAQ,EAAA;AACX,IAAA,QAAA,CAAA,gBAAA,CAAA,GAAA,kEAAmF,CAAA;AACrF,CAAC,EAFI,QAAQ,KAAR,QAAQ,GAEZ,EAAA,CAAA,CAAA,CAAA;~~AA2BK~~,MAAO,sBAA0B,SAAQ,iBAAiB,CAAA;aAC9C,IAAQ,CAAA,QAAA,GAAG,QAAH,CAAY,EAAA;~~AAQpC~~,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE,CAAC;~~AARF~~,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,EAAC,QAAW,GAAE,EAAC,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC;AAC9C,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,EAAU,CAAC;QAChC,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC,IAAI,cAAc,CAAS,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC;~~AACxD~~,QAAA,IAAA,CAAA,SAAS,GAAG,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;AAC7C,QAAA,IAAA,CAAA,IAAI,GAAG,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;AACtC,QAAA,IAAA,CAAA,UAAU,GAAG,SAAS,CAAC,QAAQ,CAAC,gBAAgB,CAAC,CAAC;QAIzD,MAAM,CAAC,MAAK;YACV,IAAI,IAAI,CAAC,SAAS,EAAE;gBAAE,IAAI,CAAC,SAAS,EAAE,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;AAC5D,SAAC,CAAC,CAAA;KACH;IAED,QAAQ,GAAA;QACN,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,SAAS,EAAE,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;YACpC,IAAI,CAAC,SAAS,EAAE,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;YACpC,IAAI,CAAC,SAAS,EAAE,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;YAChD,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;AAC5C,SAAA;KACF;IAED,WAAW,GAAA;QACT,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;AAC/C,SAAA;KACF;IAES,eAAe,CAAC,IAAO,EAAE,KAAY,EAAA;AAC7C,QAAA,IAAI,CAAC,QAAQ,CAAC,EAAC,EAAE,EAAE,QAAQ,CAAC,cAAc,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;KAC7D;~~8GAjCU~~,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAtB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,EAJtB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,2BAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,SAAA,EAAA;YACT,EAAC,OAAO,EAAE,4BAA4B,EAAE,QAAQ,EAAE,EAAE,WAAW,EAAE,MAAM,EAA+B,EAAC;AACxG,SAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,WAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,~~EAOuC~~,YAAY,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EACjB,UAAU,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,YAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EACJ,gBAAgB,~~EAxB~~/C,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA~~;;;;;;;;;AASM~~,iBAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,~~EAbd~~,cAAc,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,YAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,sCAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,wBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACd,iBAAiB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,WAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,IAAA,EAAA,UAAA,EAAA,eAAA,EAAA,MAAA,EAAA,OAAA,EAAA,eAAA,EAAA,UAAA,EAAA,OAAA,EAAA,SAAA,EAAA,UAAA,EAAA,eAAA,CAAA,EAAA,OAAA,EAAA,CAAA,QAAA,EAAA,qBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EACjB,YAAY,EAAA,IAAA,EAAA,UAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA,EAAA;;~~2FAmBH~~,sBAAsB,EAAA,UAAA,EAAA,CAAA;~~kBAzBlC~~,SAAS;+BACE,2BAA2B,EAAA,UAAA,EACzB,IAAI,EACP,OAAA,EAAA;wBACP,cAAc;wBACd,iBAAiB;wBACjB,YAAY;qBACb,EACS,QAAA,EAAA,CAAA~~;;;;;;;;;AASM~~,iBAAA,CAAA,EAAA,aAAA,EAED,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM,EACpC,SAAA,EAAA;wBACT,EAAC,OAAO,EAAE,4BAA4B,EAAE,QAAQ,EAAE,EAAE,WAAW,EAAE,MAAM,EAA+B,EAAC;AACxG,qBAAA,EAAA,CAAA;;;~~ACnCH~~;;AAEG;;;;"}
1	+ {"version":3,"file":"ng-atomic-components-molecules-checkbox-column.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/molecules/checkbox-column/checkbox-column.molecule.ts","../../../../../packages/@ng-atomic/components/src/lib/molecules/checkbox-column/ng-atomic-components-molecules-checkbox-column.ts"],"sourcesContent":["import { SelectionModel } from '@angular/cdk/collections';\nimport { CdkCellDef, CdkColumnDef, CdkHeaderCellDef, CdkTable } from '@angular/cdk/table';\nimport { ChangeDetectionStrategy, Component, EventEmitter, Output, SimpleChanges, ViewEncapsulation, effect, inject, input, viewChild } from '@angular/core';\nimport { MAT_CHECKBOX_DEFAULT_OPTIONS, MatCheckboxDefaultOptions, MatCheckboxModule } from '@angular/material/checkbox';\nimport { MatTableModule } from '@angular/material/table';\nimport { SelectIdPipe } from '@ng-atomic/common/pipes/select-id';\nimport { NgAtomicComponent } from '@ng-atomic/core';\n\nenum ActionId {\n CHECKBOX_CLICK = '[@ng-atomic/components/molecules/checkbox-column] Checkbox Click',\n}\n\n@Component({\n selector: 'molecules-checkbox-column',\n standalone: true,\n imports: [\n MatTableModule,\n MatCheckboxModule,\n SelectIdPipe,\n ],\n template: `\n <ng-container matColumnDef>\n <th mat-header-cell matHeaderCellDef></th>\n <td mat-cell matCellDef=\"let item\">\n @if (isHidden()(item)) {\n <mat-checkbox\n (click)=\"onCheckboxClick(item, $event)\"\n [checked]=\"selection().isSelected(item \| selectId)\"\n />\n }\n </td>\n </ng-container>`,\n styleUrls: ['./checkbox-column.molecule.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: { clickAction: 'noop' } as MatCheckboxDefaultOptions}\n ],\n})\nexport class CheckboxColumnMolecule<T> extends NgAtomicComponent {\n static readonly ActionId = ActionId;\n private _table = inject(CdkTable<T>, {optional: true});\n readonly name = input.required<string>();\n readonly selection = input(new SelectionModel<string>(true, []));\n readonly isHidden = input((item: T) => true);\n readonly columnDef = viewChild.required(CdkColumnDef);\n readonly cell = viewChild.required(CdkCellDef);\n readonly headerCell = viewChild.required(CdkHeaderCellDef);\n\n constructor() {\n super();\n effect(() => {\n if (this.columnDef()) this.columnDef().name = this.name();\n })\n }\n\n ngOnInit() {\n if (this._table) {\n this.columnDef().name = this.name();\n this.columnDef().cell = this.cell();\n this.columnDef().headerCell = this.headerCell();\n this._table.addColumnDef(this.columnDef());\n }\n }\n\n ngOnDestroy() {\n if (this._table) {\n this._table.removeColumnDef(this.columnDef());\n }\n }\n\n protected onCheckboxClick(item: T, event: Event) {\n this.dispatch({id: ActionId.CHECKBOX_CLICK, payload: item});\n }\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;;;;;;AAQA,IAAK,QAEJ,CAAA;AAFD,CAAA,UAAK,QAAQ,EAAA;AACX,IAAA,QAAA,CAAA,gBAAA,CAAA,GAAA,kEAAmF,CAAA;AACrF,CAAC,EAFI,QAAQ,KAAR,QAAQ,GAEZ,EAAA,CAAA,CAAA,CAAA;AA6BK,MAAO,sBAA0B,SAAQ,iBAAiB,CAAA;aAC9C,IAAQ,CAAA,QAAA,GAAG,QAAH,CAAY,EAAA;AASpC,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE,CAAC;AATF,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,EAAC,QAAW,GAAE,EAAC,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC;AAC9C,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,EAAU,CAAC;QAChC,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC,IAAI,cAAc,CAAS,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC;QACxD,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC,CAAC,IAAO,KAAK,IAAI,CAAC,CAAC;AACpC,QAAA,IAAA,CAAA,SAAS,GAAG,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;AAC7C,QAAA,IAAA,CAAA,IAAI,GAAG,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;AACtC,QAAA,IAAA,CAAA,UAAU,GAAG,SAAS,CAAC,QAAQ,CAAC,gBAAgB,CAAC,CAAC;QAIzD,MAAM,CAAC,MAAK;YACV,IAAI,IAAI,CAAC,SAAS,EAAE;gBAAE,IAAI,CAAC,SAAS,EAAE,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;AAC5D,SAAC,CAAC,CAAA;KACH;IAED,QAAQ,GAAA;QACN,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,SAAS,EAAE,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;YACpC,IAAI,CAAC,SAAS,EAAE,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;YACpC,IAAI,CAAC,SAAS,EAAE,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;YAChD,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;AAC5C,SAAA;KACF;IAED,WAAW,GAAA;QACT,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;AAC/C,SAAA;KACF;IAES,eAAe,CAAC,IAAO,EAAE,KAAY,EAAA;AAC7C,QAAA,IAAI,CAAC,QAAQ,CAAC,EAAC,EAAE,EAAE,QAAQ,CAAC,cAAc,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;KAC7D;8GAlCU,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAtB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,EAJtB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,2BAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,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,SAAA,EAAA;YACT,EAAC,OAAO,EAAE,4BAA4B,EAAE,QAAQ,EAAE,EAAE,WAAW,EAAE,MAAM,EAA+B,EAAC;AACxG,SAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,WAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAQuC,YAAY,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EACjB,UAAU,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,YAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EACJ,gBAAgB,EA3B/C,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;;;;;AAWM,iBAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAfd,cAAc,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,YAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,sCAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,wBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACd,iBAAiB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,WAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,IAAA,EAAA,UAAA,EAAA,eAAA,EAAA,MAAA,EAAA,OAAA,EAAA,eAAA,EAAA,UAAA,EAAA,OAAA,EAAA,SAAA,EAAA,UAAA,EAAA,eAAA,CAAA,EAAA,OAAA,EAAA,CAAA,QAAA,EAAA,qBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EACjB,YAAY,EAAA,IAAA,EAAA,UAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA,EAAA;;2FAqBH,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBA3BlC,SAAS;+BACE,2BAA2B,EAAA,UAAA,EACzB,IAAI,EACP,OAAA,EAAA;wBACP,cAAc;wBACd,iBAAiB;wBACjB,YAAY;qBACb,EACS,QAAA,EAAA,CAAA;;;;;;;;;;;AAWM,iBAAA,CAAA,EAAA,aAAA,EAED,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM,EACpC,SAAA,EAAA;wBACT,EAAC,OAAO,EAAE,4BAA4B,EAAE,QAAQ,EAAE,EAAE,WAAW,EAAE,MAAM,EAA+B,EAAC;AACxG,qBAAA,EAAA,CAAA;;;ACrCH;;AAEG;;;;"}

package/fesm2022/ng-atomic-components-molecules-date-input-field.mjs CHANGED Viewed

@@ -47,7 +47,7 @@ class DateInputFieldMolecule {
     @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-date-input-field-nII2: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "pipe", type: ErrorPipe, name: "error" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-date-input-field-lbma: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "pipe", type: ErrorPipe, name: "error" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: DateInputFieldMolecule, decorators: [{
             type: Component,
@@ -74,7 +74,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
                         }
                     ], host: { class: 'molecule field' }, providers: [
                     // provideDayjsDateAdapter(),
-                    ], styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-date-input-field-nII2: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"] }]
+                    ], styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-date-input-field-lbma: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"] }]
         }] });
 /**

package/fesm2022/ng-atomic-components-molecules-date-range-input-field.mjs CHANGED Viewed

@@ -1,43 +1,58 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
-import * as i1 from '@angular/common';
+import { input, effect, Directive, inject, Component, ChangeDetectionStrategy } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import * as i2 from '@angular/forms';
+import * as i1 from '@angular/forms';
 import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
-import * as i4 from '@angular/material/datepicker';
+import * as i3 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { ErrorPipe } from '@ng-atomic/common/pipes/error';
 import dayjs from 'dayjs';
-import * as i3 from '@angular/material/form-field';
+import * as i2 from '@angular/material/form-field';
-class DateRangeInputFieldMolecule {
+class DateRangeInputFieldMoleculeStore {
     constructor() {
-        this.control = new FormGroup({
+        this.control = input(new FormGroup({
             start: new FormControl(dayjs()),
             end: new FormControl(dayjs()),
+        }));
+        this.label = input('');
+        this.hint = input(undefined);
+        effect(() => {
+            console.debug('control:', this.control().value);
         });
-        this.label = '';
-        this.placeholder = '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: DateRangeInputFieldMoleculeStore, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.2.2", type: DateRangeInputFieldMoleculeStore, isStandalone: true, selector: "molecules-date-range-input-field", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: DateRangeInputFieldMoleculeStore, decorators: [{
+            type: Directive,
+            args: [{ selector: 'molecules-date-range-input-field', standalone: true }]
+        }], ctorParameters: () => [] });
+class DateRangeInputFieldMolecule {
+    constructor() {
+        this.store = inject(DateRangeInputFieldMoleculeStore);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: DateRangeInputFieldMolecule, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: DateRangeInputFieldMolecule, isStandalone: true, selector: "molecules-date-range-input-field", inputs: { control: "control", label: "label", placeholder: "placeholder", hint: "hint" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: DateRangeInputFieldMolecule, isStandalone: true, selector: "molecules-date-range-input-field", hostDirectives: [{ directive: DateRangeInputFieldMoleculeStore, inputs: ["control", "control", "label", "label", "hint", "hint"] }], ngImport: i0, template: `
     <mat-form-field appearance="outline">
-      <mat-label>{{ label }}</mat-label>
+      <mat-label>{{ store.label() }}</mat-label>
       <mat-date-range-input
-        [formGroup]="control"
+        [formGroup]="store.control()"
         [rangePicker]="picker"
-        [comparisonStart]="control.value.start"
-        [comparisonEnd]="control.value.end">
+        [comparisonStart]="store.control().value.start"
+        [comparisonEnd]="store.control().value.end">
         <input matStartDate placeholder="Start date" formControlName="start">
         <input matEndDate placeholder="End date" formControlName="end">
       </mat-date-range-input>
-      <mat-hint *ngIf="hint">{{ hint }}</mat-hint>
-      <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-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
       <mat-date-range-picker #picker></mat-date-range-picker>
     </mat-form-field>
-  `, isInline: true, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-date-range-input-field-4JcJ: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatInputModule }, { 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i4.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i4.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "pipe", type: ErrorPipe, name: "error" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-date-range-input-field-dtvQ: 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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatInputModule }, { 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: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "pipe", type: ErrorPipe, name: "error" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: DateRangeInputFieldMolecule, decorators: [{
             type: Component,
@@ -49,34 +64,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
                         ErrorPipe,
                     ], template: `
     <mat-form-field appearance="outline">
-      <mat-label>{{ label }}</mat-label>
+      <mat-label>{{ store.label() }}</mat-label>
       <mat-date-range-input
-        [formGroup]="control"
+        [formGroup]="store.control()"
         [rangePicker]="picker"
-        [comparisonStart]="control.value.start"
-        [comparisonEnd]="control.value.end">
+        [comparisonStart]="store.control().value.start"
+        [comparisonEnd]="store.control().value.end">
         <input matStartDate placeholder="Start date" formControlName="start">
         <input matEndDate placeholder="End date" formControlName="end">
       </mat-date-range-input>
-      <mat-hint *ngIf="hint">{{ hint }}</mat-hint>
-      <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-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
       <mat-date-range-picker #picker></mat-date-range-picker>
     </mat-form-field>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-date-range-input-field-4JcJ: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"] }]
-        }], propDecorators: { control: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], hint: [{
-                type: Input
-            }] } });
+  `, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            directive: DateRangeInputFieldMoleculeStore,
+                            inputs: ['control', 'label', 'hint']
+                        }
+                    ], styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-date-range-input-field-dtvQ: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"] }]
+        }] });
 /**
  * Generated bundle index. Do not edit.
  */
-export { DateRangeInputFieldMolecule };
+export { DateRangeInputFieldMolecule, DateRangeInputFieldMoleculeStore };
 //# sourceMappingURL=ng-atomic-components-molecules-date-range-input-field.mjs.map

package/fesm2022/ng-atomic-components-molecules-date-range-input-field.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ng-atomic-components-molecules-date-range-input-field.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/molecules/date-range-input-field/date-range-input-field.molecule.ts","../../../../../packages/@ng-atomic/components/src/lib/molecules/date-range-input-field/ng-atomic-components-molecules-date-range-input-field.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ~~Input~~ } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatDatepickerModule } from '@angular/material/datepicker';\nimport { ErrorPipe } from '@ng-atomic/common/pipes/error';\nimport dayjs from 'dayjs';\n\n@Component({\n selector: 'molecules-date-range-input-field',\n standalone: true,\n imports: [\n CommonModule,\n ReactiveFormsModule,\n MatInputModule,\n MatDatepickerModule,\n ErrorPipe,\n ],\n template: `\n <mat-form-field appearance=\"outline\">\n <mat-label>{{ label }}</mat-label>\n <mat-date-range-input\n [formGroup]=\"control\"\n [rangePicker]=\"picker\"\n [comparisonStart]=\"control.value.start\"\n [comparisonEnd]=\"control.value.end\">\n <input matStartDate placeholder=\"Start date\" formControlName=\"start\">\n <input matEndDate placeholder=\"End date\" formControlName=\"end\">\n </mat-date-range-input>\n <mat-hint ngIf=\"hint\">{{ hint }}</mat-hint>\n <mat-error>{{ control.errors \| error }}</mat-error>\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-date-range-picker #picker></mat-date-range-picker>\n </mat-form-field>\n `,\n styleUrls: ['./date-range-input-field.molecule.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush\n~~})\nexport~~ ~~class DateRangeInputFieldMolecule {~~\n ~~@Input() control = new FormGroup(~~{\n ~~start~~: ~~new FormControl(dayjs())~~,\n ~~end~~: ~~new~~ ~~FormControl(dayjs()),\~~n }~~);\~~n ~~@Input(~~) ~~label~~ = ~~'';\~~n ~~@Input()~~ ~~placeholder~~ = ~~'';\n @Input~~() ~~hint?: string~~;\n}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;MAsCa~~,~~2BAA2B~~,CAAA;~~AA9BxC~~,IAAA,WAAA,GAAA;~~QA+BW~~,~~IAAO~~,CAAA,~~OAAA~~,GAAG,IAAI,SAAS,CAAC;~~AAC/B~~,YAAA,KAAK,EAAE,IAAI,WAAW,CAAC,KAAK,EAAE,CAAC;AAC/B,YAAA,GAAG,EAAE,IAAI,WAAW,CAAC,KAAK,EAAE,CAAC;AAC9B,SAAA,CAAC,CAAC;~~QACM~~,~~IAAK~~,CAAA,~~KAAA~~,GAAG,EAAE,CAAC;~~QACX~~,~~IAAW~~,CAAA,~~WAAA~~,GAAG,EAAE,CAAC;~~AAE3B~~,~~KAAA~~;~~8GARY~~,~~2BAA2B~~,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;~~AAA3B~~,IAAA,SAAA,IAAA,~~CAAA~~,IAAA,~~GAAA~~,EAAA,~~CAAA~~,~~oBAAA~~,~~CAAA~~,EAAA,UAAA,EAAA,QAAA,EAAA,~~OAAA~~,EAAA,QAAA,EAAA,IAAA,EAAA,2BAA2B,~~EApB5B~~,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kCAAA,EAAA,~~MAAA~~,EAAA,EAAA,~~OAAA~~,EAAA,SAAA,EAAA,~~KAAA~~,EAAA,OAAA,EAAA,~~WAAA~~,EAAA,~~aAAA~~,EAAA,~~IAAA~~,EAAA,~~MAAA~~,EAAA,~~EAAA,~~QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA~~;;;;;;;;;;;;;;;;GAgBT~~,~~EAtBC~~,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,0LAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,YAAY,~~kIACZ~~,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,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,0FAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,WAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,CAAA,iBAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACnB,cAAc,EACd,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,OAAA,EAAA,YAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,WAAA,CAAA,EAAA,QAAA,EAAA,CAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,WAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,IAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,CAAA,IAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,+CAAA,EAAA,MAAA,EAAA,CAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,mBAAmB,gzBACnB,SAAS,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;~~2FAsBA~~,2BAA2B,EAAA,UAAA,EAAA,CAAA;~~kBA9BvC~~,SAAS;+BACE,kCAAkC,EAAA,UAAA,EAChC,IAAI,EACP,OAAA,EAAA;wBACP,YAAY;wBACZ,mBAAmB;wBACnB,cAAc;wBACd,mBAAmB;wBACnB,SAAS;qBACV,EACS,QAAA,EAAA,CAAA~~;;;;;;;;;;;;;;;;GAgBT~~,EAEgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,~~EAAA~~,~~MAAA~~,EAAA,~~CAAA~~,~~0LAAA~~,~~CAAA~~,~~EAAA~~,~~CAAA~~;~~8BAGtC~~,~~OAAO~~,~~EAAA~~,~~CAAA;sBAAf~~,~~KAAK;gBAIG~~,~~KAAK~~,~~EAAA~~,~~CAAA~~;~~sBAAb~~,~~KAAK~~;~~gBACG~~,~~WAAW~~,EAAA,CAAA~~;sBAAnB~~,~~KAAK;gBACG~~,~~IAAI~~,EAAA,CAAA~~;sBAAZ,KAAK~~;;;~~AC7CR~~;;AAEG;;;;"}
1	+ {"version":3,"file":"ng-atomic-components-molecules-date-range-input-field.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/molecules/date-range-input-field/date-range-input-field.molecule.ts","../../../../../packages/@ng-atomic/components/src/lib/molecules/date-range-input-field/ng-atomic-components-molecules-date-range-input-field.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Directive, effect, inject, input } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatDatepickerModule } from '@angular/material/datepicker';\nimport { ErrorPipe } from '@ng-atomic/common/pipes/error';\nimport dayjs from 'dayjs';\n\n@Directive({selector: 'molecules-date-range-input-field', standalone: true})\nexport class DateRangeInputFieldMoleculeStore {\n readonly control = input(new FormGroup({\n start: new FormControl(dayjs()),\n end: new FormControl(dayjs()),\n }));\n readonly label = input('');\n readonly hint = input<string>(undefined);\n\n constructor() {\n effect(() => {\n console.debug('control:', this.control().value);\n });\n }\n}\n\n@Component({\n selector: 'molecules-date-range-input-field',\n standalone: true,\n imports: [\n CommonModule,\n ReactiveFormsModule,\n MatInputModule,\n MatDatepickerModule,\n ErrorPipe,\n ],\n template: `\n <mat-form-field appearance=\"outline\">\n <mat-label>{{ store.label() }}</mat-label>\n <mat-date-range-input\n [formGroup]=\"store.control()\"\n [rangePicker]=\"picker\"\n [comparisonStart]=\"store.control().value.start\"\n [comparisonEnd]=\"store.control().value.end\">\n <input matStartDate placeholder=\"Start date\" formControlName=\"start\">\n <input matEndDate placeholder=\"End date\" formControlName=\"end\">\n </mat-date-range-input>\n @if (store.hint()) {\n <mat-hint>{{ store.hint() }}</mat-hint>\n }\n <mat-error>{{ store.control().errors \| error }}</mat-error>\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-date-range-picker #picker></mat-date-range-picker>\n </mat-form-field>\n `,\n styleUrls: ['./date-range-input-field.molecule.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n hostDirectives: [\n {\n directive: DateRangeInputFieldMoleculeStore,\n inputs: ['control', 'label', 'hint']\n }\n ]\n})\nexport class DateRangeInputFieldMolecule {\n protected readonly store = inject(DateRangeInputFieldMoleculeStore);\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-grid-item.mjs CHANGED Viewed

@@ -39,7 +39,7 @@ class GridItemMolecule extends NgAtomicComponent {
       <div class="sub"><span>{{ item() | dataAccessor:'sub' }}</span></div>
     </div>
   </div>
-  `, isInline: true, styles: [":host{display:block;--primary-color: #444;--primary-color-SCOPED-IN-grid-item-fUdN: var(--primary-color);--on-surface-color: #444;--on-surface-color-SCOPED-IN-grid-item-fUdN: var(--on-surface-color)}:host{position:relative;text-align:center;cursor:pointer;aspect-ratio:1/1}:host button{position:absolute;top:0;right:0}:host ::ng-deep>mat-card{display:flex;justify-content:flex-start;align-items:flex-start}:host .eye-catch{position:relative;width:100%;aspect-ratio:16/9;background-color:#444;border-radius:0 0 8px 8px;overflow:hidden}:host .eye-catch img{width:100%;aspect-ratio:16/9;object-fit:cover}:host .eye-catch .label{position:absolute;right:6px;bottom:8px;line-height:1.5em;font-size:1.2em;color:#fff;background:#000;opacity:.6;border-radius:6px;padding:4px 8px}:host .meta{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:8px 8px 24px;box-sizing:border-box}:host .meta .title{display:-webkit-box;text-align:start;font-size:1.4em;font-weight:700;line-height:1.5em;letter-spacing:.04em;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal;overflow:hidden;color:var(--on-surface-color-SCOPED-IN-grid-item-fUdN)}:host .meta .description,:host .meta .sub{overflow:hidden;text-align:start;font-size:1.2em;letter-spacing:.04em;color:gray}:host .meta .description span,:host .meta .sub span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}\n"], dependencies: [{ kind: "pipe", type: DataAccessorPipe, name: "dataAccessor" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: FallbackSrcDirective, selector: "[fallbackSrc]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;--primary-color: #444;--primary-color-SCOPED-IN-grid-item-nr2M: var(--primary-color);--on-surface-color: #444;--on-surface-color-SCOPED-IN-grid-item-nr2M: var(--on-surface-color)}:host{position:relative;text-align:center;cursor:pointer;aspect-ratio:1/1}:host button{position:absolute;top:0;right:0}:host ::ng-deep>mat-card{display:flex;justify-content:flex-start;align-items:flex-start}:host .eye-catch{position:relative;width:100%;aspect-ratio:16/9;background-color:#444;border-radius:0 0 8px 8px;overflow:hidden}:host .eye-catch img{width:100%;aspect-ratio:16/9;object-fit:cover}:host .eye-catch .label{position:absolute;right:6px;bottom:8px;line-height:1.5em;font-size:1.2em;color:#fff;background:#000;opacity:.6;border-radius:6px;padding:4px 8px}:host .meta{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:8px 8px 24px;box-sizing:border-box}:host .meta .title{display:-webkit-box;text-align:start;font-size:1.4em;font-weight:700;line-height:1.5em;letter-spacing:.04em;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal;overflow:hidden;color:var(--on-surface-color-SCOPED-IN-grid-item-nr2M)}:host .meta .description,:host .meta .sub{overflow:hidden;text-align:start;font-size:1.2em;letter-spacing:.04em;color:gray}:host .meta .description span,:host .meta .sub span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}\n"], dependencies: [{ kind: "pipe", type: DataAccessorPipe, name: "dataAccessor" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: FallbackSrcDirective, selector: "[fallbackSrc]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: GridItemMolecule, decorators: [{
             type: Component,
@@ -64,7 +64,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
       <div class="sub"><span>{{ item() | dataAccessor:'sub' }}</span></div>
     </div>
   </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;--primary-color: #444;--primary-color-SCOPED-IN-grid-item-fUdN: var(--primary-color);--on-surface-color: #444;--on-surface-color-SCOPED-IN-grid-item-fUdN: var(--on-surface-color)}:host{position:relative;text-align:center;cursor:pointer;aspect-ratio:1/1}:host button{position:absolute;top:0;right:0}:host ::ng-deep>mat-card{display:flex;justify-content:flex-start;align-items:flex-start}:host .eye-catch{position:relative;width:100%;aspect-ratio:16/9;background-color:#444;border-radius:0 0 8px 8px;overflow:hidden}:host .eye-catch img{width:100%;aspect-ratio:16/9;object-fit:cover}:host .eye-catch .label{position:absolute;right:6px;bottom:8px;line-height:1.5em;font-size:1.2em;color:#fff;background:#000;opacity:.6;border-radius:6px;padding:4px 8px}:host .meta{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:8px 8px 24px;box-sizing:border-box}:host .meta .title{display:-webkit-box;text-align:start;font-size:1.4em;font-weight:700;line-height:1.5em;letter-spacing:.04em;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal;overflow:hidden;color:var(--on-surface-color-SCOPED-IN-grid-item-fUdN)}:host .meta .description,:host .meta .sub{overflow:hidden;text-align:start;font-size:1.2em;letter-spacing:.04em;color:gray}:host .meta .description span,:host .meta .sub span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;--primary-color: #444;--primary-color-SCOPED-IN-grid-item-nr2M: var(--primary-color);--on-surface-color: #444;--on-surface-color-SCOPED-IN-grid-item-nr2M: var(--on-surface-color)}:host{position:relative;text-align:center;cursor:pointer;aspect-ratio:1/1}:host button{position:absolute;top:0;right:0}:host ::ng-deep>mat-card{display:flex;justify-content:flex-start;align-items:flex-start}:host .eye-catch{position:relative;width:100%;aspect-ratio:16/9;background-color:#444;border-radius:0 0 8px 8px;overflow:hidden}:host .eye-catch img{width:100%;aspect-ratio:16/9;object-fit:cover}:host .eye-catch .label{position:absolute;right:6px;bottom:8px;line-height:1.5em;font-size:1.2em;color:#fff;background:#000;opacity:.6;border-radius:6px;padding:4px 8px}:host .meta{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:8px 8px 24px;box-sizing:border-box}:host .meta .title{display:-webkit-box;text-align:start;font-size:1.4em;font-weight:700;line-height:1.5em;letter-spacing:.04em;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal;overflow:hidden;color:var(--on-surface-color-SCOPED-IN-grid-item-nr2M)}:host .meta .description,:host .meta .sub{overflow:hidden;text-align:start;font-size:1.2em;letter-spacing:.04em;color:gray}:host .meta .description span,:host .meta .sub span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}\n"] }]
         }] });
 /**

package/fesm2022/ng-atomic-components-molecules-loading-box.mjs CHANGED Viewed

@@ -37,7 +37,7 @@ class LoadingBoxMolecule {
   <div class="loading-dots">
     @for (i of [0, 1, 2]; track $index) { <div class="dot"></div> }
   </div>
-  `, isInline: true, styles: [":host{display:block;--mdc-outlined-text-field-label-text-color-SCOPED-IN-definition-list-gBL6: rgba(0, 0, 0, .6);--mdc-outlined-text-field-label-text-color-SCOPED-IN-definition-list-gBL6-SCOPED-IN-loading-box-BeD8: var(--mdc-outlined-text-field-label-text-color-SCOPED-IN-definition-list-gBL6)}:host{display:flex;width:100%;justify-content:center}:host .initializing{color:var(--mdc-outlined-text-field-label-text-color-SCOPED-IN-definition-list-gBL6-SCOPED-IN-loading-box-BeD8);font-size:12px}@keyframes dotFlashing{0%,to{opacity:0}50%{opacity:1}}:host .loading-box{display:flex;justify-content:center;align-items:center;flex-direction:column}:host .loading-dots .dot{height:10px;width:10px;margin:0 5px;background-color:#333;border-radius:50%;display:inline-block;animation:dotFlashing 1s infinite}:host .loading-dots .dot:nth-child(1){animation-delay:0s}:host .loading-dots .dot:nth-child(2){animation-delay:.2s}:host .loading-dots .dot:nth-child(3){animation-delay:.4s}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;--mdc-outlined-text-field-label-text-color-SCOPED-IN-definition-list-gBL6: rgba(0, 0, 0, .6);--mdc-outlined-text-field-label-text-color-SCOPED-IN-definition-list-gBL6-SCOPED-IN-loading-box-fyrj: var(--mdc-outlined-text-field-label-text-color-SCOPED-IN-definition-list-gBL6)}:host{display:flex;width:100%;justify-content:center}:host .initializing{color:var(--mdc-outlined-text-field-label-text-color-SCOPED-IN-definition-list-gBL6-SCOPED-IN-loading-box-fyrj);font-size:12px}@keyframes dotFlashing{0%,to{opacity:0}50%{opacity:1}}:host .loading-box{display:flex;justify-content:center;align-items:center;flex-direction:column}:host .loading-dots .dot{height:10px;width:10px;margin:0 5px;background-color:#333;border-radius:50%;display:inline-block;animation:dotFlashing 1s infinite}:host .loading-dots .dot:nth-child(1){animation-delay:0s}:host .loading-dots .dot:nth-child(2){animation-delay:.2s}:host .loading-dots .dot:nth-child(3){animation-delay:.4s}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LoadingBoxMolecule, decorators: [{
             type: Component,
@@ -51,7 +51,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
                             directive: LoadingBoxMoleculeStore,
                             inputs: ['loadingMessage'],
                         }
-                    ], styles: [":host{display:block;--mdc-outlined-text-field-label-text-color-SCOPED-IN-definition-list-gBL6: rgba(0, 0, 0, .6);--mdc-outlined-text-field-label-text-color-SCOPED-IN-definition-list-gBL6-SCOPED-IN-loading-box-BeD8: var(--mdc-outlined-text-field-label-text-color-SCOPED-IN-definition-list-gBL6)}:host{display:flex;width:100%;justify-content:center}:host .initializing{color:var(--mdc-outlined-text-field-label-text-color-SCOPED-IN-definition-list-gBL6-SCOPED-IN-loading-box-BeD8);font-size:12px}@keyframes dotFlashing{0%,to{opacity:0}50%{opacity:1}}:host .loading-box{display:flex;justify-content:center;align-items:center;flex-direction:column}:host .loading-dots .dot{height:10px;width:10px;margin:0 5px;background-color:#333;border-radius:50%;display:inline-block;animation:dotFlashing 1s infinite}:host .loading-dots .dot:nth-child(1){animation-delay:0s}:host .loading-dots .dot:nth-child(2){animation-delay:.2s}:host .loading-dots .dot:nth-child(3){animation-delay:.4s}\n"] }]
+                    ], styles: [":host{display:block;--mdc-outlined-text-field-label-text-color-SCOPED-IN-definition-list-gBL6: rgba(0, 0, 0, .6);--mdc-outlined-text-field-label-text-color-SCOPED-IN-definition-list-gBL6-SCOPED-IN-loading-box-fyrj: var(--mdc-outlined-text-field-label-text-color-SCOPED-IN-definition-list-gBL6)}:host{display:flex;width:100%;justify-content:center}:host .initializing{color:var(--mdc-outlined-text-field-label-text-color-SCOPED-IN-definition-list-gBL6-SCOPED-IN-loading-box-fyrj);font-size:12px}@keyframes dotFlashing{0%,to{opacity:0}50%{opacity:1}}:host .loading-box{display:flex;justify-content:center;align-items:center;flex-direction:column}:host .loading-dots .dot{height:10px;width:10px;margin:0 5px;background-color:#333;border-radius:50%;display:inline-block;animation:dotFlashing 1s infinite}:host .loading-dots .dot:nth-child(1){animation-delay:0s}:host .loading-dots .dot:nth-child(2){animation-delay:.2s}:host .loading-dots .dot:nth-child(3){animation-delay:.4s}\n"] }]
         }] });
 /**

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

@@ -46,7 +46,7 @@ class NavigationListItemMolecule extends NgAtomicComponent {
         }
       </div>
     </mat-list-item>
-  `, isInline: true, styles: [":host{display:block;--primary-color: #404040;--primary-color-SCOPED-IN-navigation-list-item-16aN: var(--primary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-navigation-list-item-16aN: var(--surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-navigation-list-item-16aN: var(--background-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-navigation-list-item-16aN: var(--on-primary-color);--on-background-color: #404040;--on-background-color-SCOPED-IN-navigation-list-item-16aN: var(--on-background-color);--on-surface-color: #404040;--on-surface-color-SCOPED-IN-navigation-list-item-16aN: var(--on-surface-color);--mat-badge-background-color-SCOPED-IN-navigation-list-item-16aN: 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-16aN);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-16aN);--on-background-color: var(--on-background-color-SCOPED-IN-navigation-list-item-16aN);--surface-color: var(--surface-color-SCOPED-IN-navigation-list-item-16aN);--on-surface-color: var(--on-surface-color-SCOPED-IN-navigation-list-item-16aN);--primary-color: var(--on-primary-color-SCOPED-IN-navigation-list-item-16aN);--on-primary-color: var(--primary-color-SCOPED-IN-navigation-list-item-16aN)}\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 }); }
+  `, isInline: true, styles: [":host{display:block;--primary-color: #404040;--primary-color-SCOPED-IN-navigation-list-item-Tyl1: var(--primary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-navigation-list-item-Tyl1: var(--surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-navigation-list-item-Tyl1: var(--background-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-navigation-list-item-Tyl1: var(--on-primary-color);--on-background-color: #404040;--on-background-color-SCOPED-IN-navigation-list-item-Tyl1: var(--on-background-color);--on-surface-color: #404040;--on-surface-color-SCOPED-IN-navigation-list-item-Tyl1: var(--on-surface-color);--mat-badge-background-color-SCOPED-IN-navigation-list-item-Tyl1: 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-Tyl1);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-Tyl1);--on-background-color: var(--on-background-color-SCOPED-IN-navigation-list-item-Tyl1);--surface-color: var(--surface-color-SCOPED-IN-navigation-list-item-Tyl1);--on-surface-color: var(--on-surface-color-SCOPED-IN-navigation-list-item-Tyl1);--primary-color: var(--on-primary-color-SCOPED-IN-navigation-list-item-Tyl1);--on-primary-color: var(--primary-color-SCOPED-IN-navigation-list-item-Tyl1)}\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: "17.2.2", ngImport: i0, type: NavigationListItemMolecule, decorators: [{
             type: Component,
@@ -76,7 +76,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
                             directive: NavigationListItemMoleculeStore,
                             inputs: ['action', 'selected'],
                         },
-                    ], styles: [":host{display:block;--primary-color: #404040;--primary-color-SCOPED-IN-navigation-list-item-16aN: var(--primary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-navigation-list-item-16aN: var(--surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-navigation-list-item-16aN: var(--background-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-navigation-list-item-16aN: var(--on-primary-color);--on-background-color: #404040;--on-background-color-SCOPED-IN-navigation-list-item-16aN: var(--on-background-color);--on-surface-color: #404040;--on-surface-color-SCOPED-IN-navigation-list-item-16aN: var(--on-surface-color);--mat-badge-background-color-SCOPED-IN-navigation-list-item-16aN: 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-16aN);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-16aN);--on-background-color: var(--on-background-color-SCOPED-IN-navigation-list-item-16aN);--surface-color: var(--surface-color-SCOPED-IN-navigation-list-item-16aN);--on-surface-color: var(--on-surface-color-SCOPED-IN-navigation-list-item-16aN);--primary-color: var(--on-primary-color-SCOPED-IN-navigation-list-item-16aN);--on-primary-color: var(--primary-color-SCOPED-IN-navigation-list-item-16aN)}\n"] }]
+                    ], styles: [":host{display:block;--primary-color: #404040;--primary-color-SCOPED-IN-navigation-list-item-Tyl1: var(--primary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-navigation-list-item-Tyl1: var(--surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-navigation-list-item-Tyl1: var(--background-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-navigation-list-item-Tyl1: var(--on-primary-color);--on-background-color: #404040;--on-background-color-SCOPED-IN-navigation-list-item-Tyl1: var(--on-background-color);--on-surface-color: #404040;--on-surface-color-SCOPED-IN-navigation-list-item-Tyl1: var(--on-surface-color);--mat-badge-background-color-SCOPED-IN-navigation-list-item-Tyl1: 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-Tyl1);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-Tyl1);--on-background-color: var(--on-background-color-SCOPED-IN-navigation-list-item-Tyl1);--surface-color: var(--surface-color-SCOPED-IN-navigation-list-item-Tyl1);--on-surface-color: var(--on-surface-color-SCOPED-IN-navigation-list-item-Tyl1);--primary-color: var(--on-primary-color-SCOPED-IN-navigation-list-item-Tyl1);--on-primary-color: var(--primary-color-SCOPED-IN-navigation-list-item-Tyl1)}\n"] }]
         }] });
 /**

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

@@ -46,7 +46,7 @@ class SelectInputFieldMolecule {
     }
     <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-iAiT: 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 }); }
+  `, isInline: true, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-select-input-field-eZvG: 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: "17.2.2", ngImport: i0, type: SelectInputFieldMolecule, decorators: [{
             type: Component,
@@ -75,7 +75,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
                             directive: SelectInputFieldMoleculeStore,
                             inputs: ['control', 'label', 'appearance', 'options', 'hint', 'placeholder', 'multiple'],
                         },
-                    ], styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-select-input-field-iAiT: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"] }]
+                    ], styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-select-input-field-eZvG: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"] }]
         }] });
 /**