@ng-atomic/components 1.3.0 → 1.6.0

package/bundles/ng-atomic-components-frames-auto-layout.umd.js

@@ -32,7 +32,7 @@
         return AutoLayoutFrame;
     }());
     AutoLayoutFrame.ɵfac = function AutoLayoutFrame_Factory(t) { return new (t || AutoLayoutFrame)(); };
-    AutoLayoutFrame.ɵcmp = i0.ɵɵngDeclareComponent({ version: "11.2.14", type: AutoLayoutFrame, selector: "frames-auto-layout", ngImport: i0__namespace, template: "<ng-content></ng-content>", styles: [":host{--gap:24px;--gap-SCOPED-IN-auto-layout-EzXF:var(--gap);--vertical-padding:24px;--vertical-padding-SCOPED-IN-auto-layout-EzXF:var(--vertical-padding);display:flex;width:100%;height:100%;justify-content:center;gap:var(--gap-SCOPED-IN-auto-layout-EzXF);box-sizing:border-box;padding:var(--vertical-padding-SCOPED-IN-auto-layout-EzXF) 0}:host[horizontal]{flex-direction:row}:host[vertical]{flex-direction:column}"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    AutoLayoutFrame.ɵcmp = i0.ɵɵngDeclareComponent({ version: "11.2.14", type: AutoLayoutFrame, selector: "frames-auto-layout", ngImport: i0__namespace, template: "<ng-content></ng-content>", styles: [":host{--gap:24px;--gap-SCOPED-IN-auto-layout-kbAo:var(--gap);--vertical-padding:24px;--vertical-padding-SCOPED-IN-auto-layout-kbAo:var(--vertical-padding);display:flex;width:100%;height:100%;justify-content:center;gap:var(--gap-SCOPED-IN-auto-layout-kbAo);box-sizing:border-box;padding:var(--vertical-padding-SCOPED-IN-auto-layout-kbAo) 0}:host[horizontal]{flex-direction:row}:host[vertical]{flex-direction:column}"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AutoLayoutFrame, [{
                 type: i0.Component,

package/bundles/ng-atomic-components-frames-auto-layout.umd.min.js

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("@ng-atomic/components/frames/auto-layout",["exports","@angular/core","@angular/common"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["ng-atomic"]=e["ng-atomic"]||{},e["ng-atomic"].components=e["ng-atomic"].components||{},e["ng-atomic"].components.frames=e["ng-atomic"].components.frames||{},e["ng-atomic"].components.frames["auto-layout"]={}),e.ng.core,e.ng.common)}(this,(function(e,t,o){"use strict";function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(o){if("default"!==o){var n=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,n.get?n:{enumerable:!0,get:function(){return e[o]}})}})),t.default=e,Object.freeze(t)}var a=n(t),r=function(){};r.ɵfac=function(e){return new(e||r)},r.ɵcmp=t.ɵɵngDeclareComponent({version:"11.2.14",type:r,selector:"frames-auto-layout",ngImport:a,template:"<ng-content></ng-content>",styles:[":host{--gap:24px;--gap-SCOPED-IN-auto-layout-EzXF:var(--gap);--vertical-padding:24px;--vertical-padding-SCOPED-IN-auto-layout-EzXF:var(--vertical-padding);display:flex;width:100%;height:100%;justify-content:center;gap:var(--gap-SCOPED-IN-auto-layout-EzXF);box-sizing:border-box;padding:var(--vertical-padding-SCOPED-IN-auto-layout-EzXF) 0}:host[horizontal]{flex-direction:row}:host[vertical]{flex-direction:column}"],changeDetection:t.ChangeDetectionStrategy.OnPush}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(r,[{type:t.Component,args:[{selector:"frames-auto-layout",templateUrl:"./auto-layout.frame.html",styleUrls:["./auto-layout.frame.scss"],changeDetection:t.ChangeDetectionStrategy.OnPush}]}],null,null);var u=function(){};u.ɵfac=function(e){return new(e||u)},u.ɵmod=t.ɵɵdefineNgModule({type:u}),u.ɵinj=t.ɵɵdefineInjector({imports:[[o.CommonModule]]}),("undefined"==typeof ngJitMode||ngJitMode)&&t.ɵɵsetNgModuleScope(u,{declarations:[r],imports:[o.CommonModule],exports:[r]}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(u,[{type:t.NgModule,args:[{declarations:[r],imports:[o.CommonModule],exports:[r]}]}],null,null),e.AutoLayoutFrame=r,e.AutoLayoutModule=u,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("@ng-atomic/components/frames/auto-layout",["exports","@angular/core","@angular/common"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["ng-atomic"]=e["ng-atomic"]||{},e["ng-atomic"].components=e["ng-atomic"].components||{},e["ng-atomic"].components.frames=e["ng-atomic"].components.frames||{},e["ng-atomic"].components.frames["auto-layout"]={}),e.ng.core,e.ng.common)}(this,(function(e,t,o){"use strict";function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(o){if("default"!==o){var n=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,n.get?n:{enumerable:!0,get:function(){return e[o]}})}})),t.default=e,Object.freeze(t)}var a=n(t),r=function(){};r.ɵfac=function(e){return new(e||r)},r.ɵcmp=t.ɵɵngDeclareComponent({version:"11.2.14",type:r,selector:"frames-auto-layout",ngImport:a,template:"<ng-content></ng-content>",styles:[":host{--gap:24px;--gap-SCOPED-IN-auto-layout-kbAo:var(--gap);--vertical-padding:24px;--vertical-padding-SCOPED-IN-auto-layout-kbAo:var(--vertical-padding);display:flex;width:100%;height:100%;justify-content:center;gap:var(--gap-SCOPED-IN-auto-layout-kbAo);box-sizing:border-box;padding:var(--vertical-padding-SCOPED-IN-auto-layout-kbAo) 0}:host[horizontal]{flex-direction:row}:host[vertical]{flex-direction:column}"],changeDetection:t.ChangeDetectionStrategy.OnPush}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(r,[{type:t.Component,args:[{selector:"frames-auto-layout",templateUrl:"./auto-layout.frame.html",styleUrls:["./auto-layout.frame.scss"],changeDetection:t.ChangeDetectionStrategy.OnPush}]}],null,null);var u=function(){};u.ɵfac=function(e){return new(e||u)},u.ɵmod=t.ɵɵdefineNgModule({type:u}),u.ɵinj=t.ɵɵdefineInjector({imports:[[o.CommonModule]]}),("undefined"==typeof ngJitMode||ngJitMode)&&t.ɵɵsetNgModuleScope(u,{declarations:[r],imports:[o.CommonModule],exports:[r]}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(u,[{type:t.NgModule,args:[{declarations:[r],imports:[o.CommonModule],exports:[r]}]}],null,null),e.AutoLayoutFrame=r,e.AutoLayoutModule=u,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=ng-atomic-components-frames-auto-layout.umd.min.js.map

package/bundles/ng-atomic-components-frames-drawer.umd.js

@@ -44,7 +44,7 @@
         return DrawerFrame;
     }());
     DrawerFrame.ɵfac = function DrawerFrame_Factory(t) { return new (t || DrawerFrame)(); };
-    DrawerFrame.ɵcmp = i0.ɵɵngDeclareComponent({ version: "11.2.14", type: DrawerFrame, selector: "frames-drawer", inputs: { isOpen: "isOpen" }, viewQueries: [{ propertyName: "drawer", first: true, predicate: i1.MatDrawer, emitDistinctChangesOnly: false, descendants: true }], ngImport: i0__namespace, template: "<mat-drawer-container [autosize]=\"false\">\n  <mat-drawer #drawer mode=\"side\">\n    <ng-content select=[drawer]></ng-content>\n  </mat-drawer>\n\n  <mat-drawer-content>\n    <ng-content select=[contents]></ng-content>\n  </mat-drawer-content>\n  \n</mat-drawer-container>", styles: [":host{--content-width:360px;--content-width-SCOPED-IN-drawer-eRPS:var(--content-width)}:host mat-drawer-content{width:100%}"], directives: [{ type: i1.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { type: i1.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { type: i1.MatDrawerContent, selector: "mat-drawer-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    DrawerFrame.ɵcmp = i0.ɵɵngDeclareComponent({ version: "11.2.14", type: DrawerFrame, selector: "frames-drawer", inputs: { isOpen: "isOpen" }, viewQueries: [{ propertyName: "drawer", first: true, predicate: i1.MatDrawer, emitDistinctChangesOnly: false, descendants: true }], ngImport: i0__namespace, template: "<mat-drawer-container [autosize]=\"false\">\n  <mat-drawer #drawer mode=\"side\">\n    <ng-content select=[drawer]></ng-content>\n  </mat-drawer>\n\n  <mat-drawer-content>\n    <ng-content select=[contents]></ng-content>\n  </mat-drawer-content>\n  \n</mat-drawer-container>", styles: [":host{--content-width:360px;--content-width-SCOPED-IN-drawer-iHZx:var(--content-width)}:host mat-drawer-content{width:100%}"], directives: [{ type: i1.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { type: i1.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { type: i1.MatDrawerContent, selector: "mat-drawer-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrawerFrame, [{
                 type: i0.Component,

package/bundles/ng-atomic-components-frames-drawer.umd.min.js

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/material/sidenav"),require("@angular/common")):"function"==typeof define&&define.amd?define("@ng-atomic/components/frames/drawer",["exports","@angular/core","@angular/material/sidenav","@angular/common"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["ng-atomic"]=e["ng-atomic"]||{},e["ng-atomic"].components=e["ng-atomic"].components||{},e["ng-atomic"].components.frames=e["ng-atomic"].components.frames||{},e["ng-atomic"].components.frames.drawer={}),e.ng.core,e.ng.material.sidenav,e.ng.common)}(this,(function(e,t,n,r){"use strict";function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var a=o(t),i=function(){function e(){}return Object.defineProperty(e.prototype,"isOpen",{get:function(){return this._isOpen},set:function(e){var t,n;e?null===(t=this.drawer)||void 0===t||t.open():null===(n=this.drawer)||void 0===n||n.close(),this._isOpen=e},enumerable:!1,configurable:!0}),e}();i.ɵfac=function(e){return new(e||i)},i.ɵcmp=t.ɵɵngDeclareComponent({version:"11.2.14",type:i,selector:"frames-drawer",inputs:{isOpen:"isOpen"},viewQueries:[{propertyName:"drawer",first:!0,predicate:n.MatDrawer,emitDistinctChangesOnly:!1,descendants:!0}],ngImport:a,template:'<mat-drawer-container [autosize]="false">\n  <mat-drawer #drawer mode="side">\n    <ng-content select=[drawer]></ng-content>\n  </mat-drawer>\n\n  <mat-drawer-content>\n    <ng-content select=[contents]></ng-content>\n  </mat-drawer-content>\n  \n</mat-drawer-container>',styles:[":host{--content-width:360px;--content-width-SCOPED-IN-drawer-eRPS:var(--content-width)}:host mat-drawer-content{width:100%}"],directives:[{type:n.MatDrawerContainer,selector:"mat-drawer-container",inputs:["autosize","hasBackdrop"],outputs:["backdropClick"],exportAs:["matDrawerContainer"]},{type:n.MatDrawer,selector:"mat-drawer",inputs:["position","mode","disableClose","autoFocus","opened"],outputs:["openedChange","opened","openedStart","closed","closedStart","positionChanged"],exportAs:["matDrawer"]},{type:n.MatDrawerContent,selector:"mat-drawer-content"}],changeDetection:t.ChangeDetectionStrategy.OnPush}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(i,[{type:t.Component,args:[{selector:"frames-drawer",templateUrl:"./drawer.frame.html",styleUrls:["./drawer.frame.scss"],changeDetection:t.ChangeDetectionStrategy.OnPush}]}],null,{drawer:[{type:t.ViewChild,args:[n.MatDrawer]}],isOpen:[{type:t.Input}]});var s=function(){};s.ɵfac=function(e){return new(e||s)},s.ɵmod=t.ɵɵdefineNgModule({type:s}),s.ɵinj=t.ɵɵdefineInjector({imports:[[r.CommonModule,n.MatSidenavModule]]}),("undefined"==typeof ngJitMode||ngJitMode)&&t.ɵɵsetNgModuleScope(s,{declarations:[i],imports:[r.CommonModule,n.MatSidenavModule],exports:[i]}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(s,[{type:t.NgModule,args:[{declarations:[i],imports:[r.CommonModule,n.MatSidenavModule],exports:[i]}]}],null,null),e.DrawerFrame=i,e.DrawerModule=s,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/material/sidenav"),require("@angular/common")):"function"==typeof define&&define.amd?define("@ng-atomic/components/frames/drawer",["exports","@angular/core","@angular/material/sidenav","@angular/common"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["ng-atomic"]=e["ng-atomic"]||{},e["ng-atomic"].components=e["ng-atomic"].components||{},e["ng-atomic"].components.frames=e["ng-atomic"].components.frames||{},e["ng-atomic"].components.frames.drawer={}),e.ng.core,e.ng.material.sidenav,e.ng.common)}(this,(function(e,t,n,r){"use strict";function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var a=o(t),i=function(){function e(){}return Object.defineProperty(e.prototype,"isOpen",{get:function(){return this._isOpen},set:function(e){var t,n;e?null===(t=this.drawer)||void 0===t||t.open():null===(n=this.drawer)||void 0===n||n.close(),this._isOpen=e},enumerable:!1,configurable:!0}),e}();i.ɵfac=function(e){return new(e||i)},i.ɵcmp=t.ɵɵngDeclareComponent({version:"11.2.14",type:i,selector:"frames-drawer",inputs:{isOpen:"isOpen"},viewQueries:[{propertyName:"drawer",first:!0,predicate:n.MatDrawer,emitDistinctChangesOnly:!1,descendants:!0}],ngImport:a,template:'<mat-drawer-container [autosize]="false">\n  <mat-drawer #drawer mode="side">\n    <ng-content select=[drawer]></ng-content>\n  </mat-drawer>\n\n  <mat-drawer-content>\n    <ng-content select=[contents]></ng-content>\n  </mat-drawer-content>\n  \n</mat-drawer-container>',styles:[":host{--content-width:360px;--content-width-SCOPED-IN-drawer-iHZx:var(--content-width)}:host mat-drawer-content{width:100%}"],directives:[{type:n.MatDrawerContainer,selector:"mat-drawer-container",inputs:["autosize","hasBackdrop"],outputs:["backdropClick"],exportAs:["matDrawerContainer"]},{type:n.MatDrawer,selector:"mat-drawer",inputs:["position","mode","disableClose","autoFocus","opened"],outputs:["openedChange","opened","openedStart","closed","closedStart","positionChanged"],exportAs:["matDrawer"]},{type:n.MatDrawerContent,selector:"mat-drawer-content"}],changeDetection:t.ChangeDetectionStrategy.OnPush}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(i,[{type:t.Component,args:[{selector:"frames-drawer",templateUrl:"./drawer.frame.html",styleUrls:["./drawer.frame.scss"],changeDetection:t.ChangeDetectionStrategy.OnPush}]}],null,{drawer:[{type:t.ViewChild,args:[n.MatDrawer]}],isOpen:[{type:t.Input}]});var s=function(){};s.ɵfac=function(e){return new(e||s)},s.ɵmod=t.ɵɵdefineNgModule({type:s}),s.ɵinj=t.ɵɵdefineInjector({imports:[[r.CommonModule,n.MatSidenavModule]]}),("undefined"==typeof ngJitMode||ngJitMode)&&t.ɵɵsetNgModuleScope(s,{declarations:[i],imports:[r.CommonModule,n.MatSidenavModule],exports:[i]}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(s,[{type:t.NgModule,args:[{declarations:[i],imports:[r.CommonModule,n.MatSidenavModule],exports:[i]}]}],null,null),e.DrawerFrame=i,e.DrawerModule=s,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=ng-atomic-components-frames-drawer.umd.min.js.map

package/bundles/ng-atomic-components-frames-line-up-v2.umd.js

@@ -506,7 +506,7 @@
         return LineUpFrame;
     }());
     LineUpFrame.ɵfac = function LineUpFrame_Factory(t) { return new (t || LineUpFrame)(i0.ɵɵdirectiveInject(LineUpFrameService)); };
-    LineUpFrame.ɵcmp = i0.ɵɵngDeclareComponent({ version: "11.2.14", type: LineUpFrame, selector: "frames-line-up", inputs: { hasNext: "hasNext", minNextWidth: "minNextWidth" }, viewQueries: [{ propertyName: "nextElementRef", first: true, predicate: ["next"], emitDistinctChangesOnly: false, descendants: true, static: true }], ngImport: i0__namespace, template: "<div class=\"main\" [@modeChangeForMain]=\"mode\" #main>\n  <ng-content select=\"[main]\"></ng-content>\n</div>\n<div class=\"next\" [@modeChangeForNext]=\"mode\" #next>\n  <ng-content select=\"[next]\"></ng-content>\n</div>", styles: [":host{--gap:1px;--gap-SCOPED-IN-line-up-3VAY:var(--gap);--background:#ccc;--background-SCOPED-IN-line-up-3VAY:var(--background);--contents-background:transparent;--contents-background-SCOPED-IN-line-up-3VAY:var(--contents-background);position:relative;justify-content:flex-start;gap:var(--gap-SCOPED-IN-line-up-3VAY);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;background:var(--background-SCOPED-IN-line-up-3VAY)}:host,:host div{display:flex;height:100%}:host div{max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;background:var(--contents-background-SCOPED-IN-line-up-3VAY)}:host div.main{overflow:hidden;justify-content:flex-end}:host div.next{overflow:visible;justify-content:flex-start}"], animations: LINE_UP_ANIMATIONS, changeDetection: i0.ChangeDetectionStrategy.Default });
+    LineUpFrame.ɵcmp = i0.ɵɵngDeclareComponent({ version: "11.2.14", type: LineUpFrame, selector: "frames-line-up", inputs: { hasNext: "hasNext", minNextWidth: "minNextWidth" }, viewQueries: [{ propertyName: "nextElementRef", first: true, predicate: ["next"], emitDistinctChangesOnly: false, descendants: true, static: true }], ngImport: i0__namespace, template: "<div class=\"main\" [@modeChangeForMain]=\"mode\" #main>\n  <ng-content select=\"[main]\"></ng-content>\n</div>\n<div class=\"next\" [@modeChangeForNext]=\"mode\" #next>\n  <ng-content select=\"[next]\"></ng-content>\n</div>", styles: [":host{--gap:1px;--gap-SCOPED-IN-line-up-xSod:var(--gap);--background:#ccc;--background-SCOPED-IN-line-up-xSod:var(--background);--contents-background:transparent;--contents-background-SCOPED-IN-line-up-xSod:var(--contents-background);position:relative;justify-content:flex-start;gap:var(--gap-SCOPED-IN-line-up-xSod);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;background:var(--background-SCOPED-IN-line-up-xSod)}:host,:host div{display:flex;height:100%}:host div{max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;background:var(--contents-background-SCOPED-IN-line-up-xSod)}:host div.main{overflow:hidden;justify-content:flex-end}:host div.next{overflow:visible;justify-content:flex-start}"], animations: LINE_UP_ANIMATIONS, changeDetection: i0.ChangeDetectionStrategy.Default });
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LineUpFrame, [{
                 type: i0.Component,

package/bundles/ng-atomic-components-frames-line-up-v2.umd.min.js

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("rxjs"),require("rxjs/operators"),require("@angular/animations"),require("resize-observer-polyfill"),require("@angular/common"),require("@angular/material/progress-spinner")):"function"==typeof define&&define.amd?define("@ng-atomic/components/frames/line-up-v2",["exports","@angular/core","rxjs","rxjs/operators","@angular/animations","resize-observer-polyfill","@angular/common","@angular/material/progress-spinner"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["ng-atomic"]=e["ng-atomic"]||{},e["ng-atomic"].components=e["ng-atomic"].components||{},e["ng-atomic"].components.frames=e["ng-atomic"].components.frames||{},e["ng-atomic"].components.frames["line-up-v2"]={}),e.ng.core,e.rxjs,e.rxjs.operators,e.ng.animations,e.ResizeObserver,e.ng.common,e.ng.material.progressSpinner)}(this,(function(e,t,n,i,o,r,a,s){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var i=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,i.get?i:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var u=c(t),d=l(r);Object.create;function p(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var i,o,r=n.call(e),a=[];try{for(;(void 0===t||t-- >0)&&!(i=r.next()).done;)a.push(i.value)}catch(e){o={error:e}}finally{try{i&&!i.done&&(n=r.return)&&n.call(r)}finally{if(o)throw o.error}}return a}Object.create;var f,m=[o.trigger("modeChangeForMain",[o.state("*",o.style({width:"100%"})),o.state("Next",o.style({display:"none",width:"0%"})),o.transition("* => Next",[o.animate("0.5s",o.style({width:"0%"})),o.style({display:"none"})]),o.transition("Next => *",[o.sequence([o.style({display:"inherit"}),o.animate("0.5s",o.style({width:"100%"}))])])]),o.trigger("modeChangeForNext",[o.state("Next",o.style({position:"relative",width:"100%"})),o.state("Both",o.style({position:"relative",width:"100%"})),o.state("Main",o.style({position:"relative",display:"none"})),o.transition("Main => Next",[o.query(":enter",[o.animate("0.5s")],{optional:!0}),o.sequence([o.style({display:"inherit",width:"100%"}),o.animate("0.5s")])]),o.transition("Main => Both",[o.query(":enter",[o.animate("0.5s")],{optional:!0}),o.sequence([o.style({display:"inherit",width:"100%"}),o.animate("0.5s")])]),o.transition("Next => Main",o.group([o.query(":leave",o.animate("0.5s",o.style({width:"100%"})),{optional:!0}),o.sequence([o.style({position:"absolute",display:"block",left:"0%"}),o.animate("0.5s",o.style({left:"100%"}))])])),o.transition("Both => Main",o.group([o.query(":leave",o.animate("0.5s",o.style({width:"100%"})),{optional:!0}),o.sequence([o.style({position:"absolute",display:"block",left:"100%"}),o.animate("0.5s",o.style({}))])]))])];!function(e){e.MAIN="Main",e.BOTH="Both",e.NEXT="Next"}(f||(f={}));var h=function(){function e(){this.frames=[]}return e.prototype.register=function(e){this.frames.push(e),console.debug("this.frames:",this.frames)},e.prototype.unregister=function(e){this.frames=this.frames.slice(0,this.findIndex(e))},e.prototype.findIndex=function(e){return this.frames.findIndex((function(t){return t===e}))},e.prototype.propagate=function(e){var t,n=null===(t=this.frames)||void 0===t?void 0:t[this.findIndex(e)-1];null==n||n.refresh()},e}();h.ɵfac=function(e){return new(e||h)},h.ɵprov=t.ɵɵdefineInjectable({token:h,factory:h.ɵfac,providedIn:"root"}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(h,[{type:t.Injectable,args:[{providedIn:"root"}]}],null,null);var g=function(){function e(e){this.service=e,this.Mode=f,this.mode=f.MAIN,this.refresh$=new n.ReplaySubject(1),this.destroy$=new n.ReplaySubject(1),this.hasNext$=new n.BehaviorSubject(!1),this.minNextWidth=360}return Object.defineProperty(e.prototype,"hasNext",{set:function(e){this.hasNext$.next(e)},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){var e,t,o=this;this.service.register(this),this.refresh(),n.combineLatest([this.hasNext$,(e=this.nextElementRef,t=e.nativeElement,n.Observable.create((function(e){var n=new d.default((function(t){return t.forEach((function(t){return e.next(t)}))}));return n.observe(t),function(){return n.disconnect()}})).pipe(i.map((function(e){var t,n=e.contentRect;return null!==(t=null==n?void 0:n.width)&&void 0!==t?t:0})),i.startWith(0),i.distinctUntilChanged())),this.refresh$]).pipe(i.takeUntil(this.destroy$)).subscribe((function(e){var t=p(e,2),n=t[0],i=t[1];o.mode=o.resolveMode(n,i),setTimeout((function(){return o.service.propagate(o)}),0)}))},e.prototype.ngOnDestroy=function(){this.service.unregister(this),this.destroy$.next()},e.prototype.refresh=function(){this.refresh$.next()},e.prototype.resolveMode=function(e,t){return e&&t<=this.minNextWidth?f.BOTH:e?f.NEXT:f.MAIN},e}();g.ɵfac=function(e){return new(e||g)(t.ɵɵdirectiveInject(h))},g.ɵcmp=t.ɵɵngDeclareComponent({version:"11.2.14",type:g,selector:"frames-line-up",inputs:{hasNext:"hasNext",minNextWidth:"minNextWidth"},viewQueries:[{propertyName:"nextElementRef",first:!0,predicate:["next"],emitDistinctChangesOnly:!1,descendants:!0,static:!0}],ngImport:u,template:'<div class="main" [@modeChangeForMain]="mode" #main>\n  <ng-content select="[main]"></ng-content>\n</div>\n<div class="next" [@modeChangeForNext]="mode" #next>\n  <ng-content select="[next]"></ng-content>\n</div>',styles:[":host{--gap:1px;--gap-SCOPED-IN-line-up-3VAY:var(--gap);--background:#ccc;--background-SCOPED-IN-line-up-3VAY:var(--background);--contents-background:transparent;--contents-background-SCOPED-IN-line-up-3VAY:var(--contents-background);position:relative;justify-content:flex-start;gap:var(--gap-SCOPED-IN-line-up-3VAY);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;background:var(--background-SCOPED-IN-line-up-3VAY)}:host,:host div{display:flex;height:100%}:host div{max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;background:var(--contents-background-SCOPED-IN-line-up-3VAY)}:host div.main{overflow:hidden;justify-content:flex-end}:host div.next{overflow:visible;justify-content:flex-start}"],animations:m,changeDetection:t.ChangeDetectionStrategy.Default}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(g,[{type:t.Component,args:[{selector:"frames-line-up",templateUrl:"./line-up.frame.html",styleUrls:["./line-up.frame.scss"],changeDetection:t.ChangeDetectionStrategy.Default,animations:m}]}],(function(){return[{type:h}]}),{hasNext:[{type:t.Input}],minNextWidth:[{type:t.Input}],nextElementRef:[{type:t.ViewChild,args:["next",{static:!0}]}]});var y=function(){};y.ɵfac=function(e){return new(e||y)},y.ɵmod=t.ɵɵdefineNgModule({type:y}),y.ɵinj=t.ɵɵdefineInjector({imports:[[a.CommonModule,s.MatProgressSpinnerModule]]}),("undefined"==typeof ngJitMode||ngJitMode)&&t.ɵɵsetNgModuleScope(y,{declarations:[g],imports:[a.CommonModule,s.MatProgressSpinnerModule],exports:[g]}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(y,[{type:t.NgModule,args:[{declarations:[g],imports:[a.CommonModule,s.MatProgressSpinnerModule],exports:[g]}]}],null,null),e.LineUpFrame=g,e.LineUpFrameService=h,e.LineUpModule=y,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("rxjs"),require("rxjs/operators"),require("@angular/animations"),require("resize-observer-polyfill"),require("@angular/common"),require("@angular/material/progress-spinner")):"function"==typeof define&&define.amd?define("@ng-atomic/components/frames/line-up-v2",["exports","@angular/core","rxjs","rxjs/operators","@angular/animations","resize-observer-polyfill","@angular/common","@angular/material/progress-spinner"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["ng-atomic"]=e["ng-atomic"]||{},e["ng-atomic"].components=e["ng-atomic"].components||{},e["ng-atomic"].components.frames=e["ng-atomic"].components.frames||{},e["ng-atomic"].components.frames["line-up-v2"]={}),e.ng.core,e.rxjs,e.rxjs.operators,e.ng.animations,e.ResizeObserver,e.ng.common,e.ng.material.progressSpinner)}(this,(function(e,t,n,i,o,r,a,s){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var i=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,i.get?i:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var u=c(t),d=l(r);Object.create;function p(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var i,o,r=n.call(e),a=[];try{for(;(void 0===t||t-- >0)&&!(i=r.next()).done;)a.push(i.value)}catch(e){o={error:e}}finally{try{i&&!i.done&&(n=r.return)&&n.call(r)}finally{if(o)throw o.error}}return a}Object.create;var f,m=[o.trigger("modeChangeForMain",[o.state("*",o.style({width:"100%"})),o.state("Next",o.style({display:"none",width:"0%"})),o.transition("* => Next",[o.animate("0.5s",o.style({width:"0%"})),o.style({display:"none"})]),o.transition("Next => *",[o.sequence([o.style({display:"inherit"}),o.animate("0.5s",o.style({width:"100%"}))])])]),o.trigger("modeChangeForNext",[o.state("Next",o.style({position:"relative",width:"100%"})),o.state("Both",o.style({position:"relative",width:"100%"})),o.state("Main",o.style({position:"relative",display:"none"})),o.transition("Main => Next",[o.query(":enter",[o.animate("0.5s")],{optional:!0}),o.sequence([o.style({display:"inherit",width:"100%"}),o.animate("0.5s")])]),o.transition("Main => Both",[o.query(":enter",[o.animate("0.5s")],{optional:!0}),o.sequence([o.style({display:"inherit",width:"100%"}),o.animate("0.5s")])]),o.transition("Next => Main",o.group([o.query(":leave",o.animate("0.5s",o.style({width:"100%"})),{optional:!0}),o.sequence([o.style({position:"absolute",display:"block",left:"0%"}),o.animate("0.5s",o.style({left:"100%"}))])])),o.transition("Both => Main",o.group([o.query(":leave",o.animate("0.5s",o.style({width:"100%"})),{optional:!0}),o.sequence([o.style({position:"absolute",display:"block",left:"100%"}),o.animate("0.5s",o.style({}))])]))])];!function(e){e.MAIN="Main",e.BOTH="Both",e.NEXT="Next"}(f||(f={}));var h=function(){function e(){this.frames=[]}return e.prototype.register=function(e){this.frames.push(e),console.debug("this.frames:",this.frames)},e.prototype.unregister=function(e){this.frames=this.frames.slice(0,this.findIndex(e))},e.prototype.findIndex=function(e){return this.frames.findIndex((function(t){return t===e}))},e.prototype.propagate=function(e){var t,n=null===(t=this.frames)||void 0===t?void 0:t[this.findIndex(e)-1];null==n||n.refresh()},e}();h.ɵfac=function(e){return new(e||h)},h.ɵprov=t.ɵɵdefineInjectable({token:h,factory:h.ɵfac,providedIn:"root"}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(h,[{type:t.Injectable,args:[{providedIn:"root"}]}],null,null);var g=function(){function e(e){this.service=e,this.Mode=f,this.mode=f.MAIN,this.refresh$=new n.ReplaySubject(1),this.destroy$=new n.ReplaySubject(1),this.hasNext$=new n.BehaviorSubject(!1),this.minNextWidth=360}return Object.defineProperty(e.prototype,"hasNext",{set:function(e){this.hasNext$.next(e)},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){var e,t,o=this;this.service.register(this),this.refresh(),n.combineLatest([this.hasNext$,(e=this.nextElementRef,t=e.nativeElement,n.Observable.create((function(e){var n=new d.default((function(t){return t.forEach((function(t){return e.next(t)}))}));return n.observe(t),function(){return n.disconnect()}})).pipe(i.map((function(e){var t,n=e.contentRect;return null!==(t=null==n?void 0:n.width)&&void 0!==t?t:0})),i.startWith(0),i.distinctUntilChanged())),this.refresh$]).pipe(i.takeUntil(this.destroy$)).subscribe((function(e){var t=p(e,2),n=t[0],i=t[1];o.mode=o.resolveMode(n,i),setTimeout((function(){return o.service.propagate(o)}),0)}))},e.prototype.ngOnDestroy=function(){this.service.unregister(this),this.destroy$.next()},e.prototype.refresh=function(){this.refresh$.next()},e.prototype.resolveMode=function(e,t){return e&&t<=this.minNextWidth?f.BOTH:e?f.NEXT:f.MAIN},e}();g.ɵfac=function(e){return new(e||g)(t.ɵɵdirectiveInject(h))},g.ɵcmp=t.ɵɵngDeclareComponent({version:"11.2.14",type:g,selector:"frames-line-up",inputs:{hasNext:"hasNext",minNextWidth:"minNextWidth"},viewQueries:[{propertyName:"nextElementRef",first:!0,predicate:["next"],emitDistinctChangesOnly:!1,descendants:!0,static:!0}],ngImport:u,template:'<div class="main" [@modeChangeForMain]="mode" #main>\n  <ng-content select="[main]"></ng-content>\n</div>\n<div class="next" [@modeChangeForNext]="mode" #next>\n  <ng-content select="[next]"></ng-content>\n</div>',styles:[":host{--gap:1px;--gap-SCOPED-IN-line-up-xSod:var(--gap);--background:#ccc;--background-SCOPED-IN-line-up-xSod:var(--background);--contents-background:transparent;--contents-background-SCOPED-IN-line-up-xSod:var(--contents-background);position:relative;justify-content:flex-start;gap:var(--gap-SCOPED-IN-line-up-xSod);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;background:var(--background-SCOPED-IN-line-up-xSod)}:host,:host div{display:flex;height:100%}:host div{max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;background:var(--contents-background-SCOPED-IN-line-up-xSod)}:host div.main{overflow:hidden;justify-content:flex-end}:host div.next{overflow:visible;justify-content:flex-start}"],animations:m,changeDetection:t.ChangeDetectionStrategy.Default}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(g,[{type:t.Component,args:[{selector:"frames-line-up",templateUrl:"./line-up.frame.html",styleUrls:["./line-up.frame.scss"],changeDetection:t.ChangeDetectionStrategy.Default,animations:m}]}],(function(){return[{type:h}]}),{hasNext:[{type:t.Input}],minNextWidth:[{type:t.Input}],nextElementRef:[{type:t.ViewChild,args:["next",{static:!0}]}]});var y=function(){};y.ɵfac=function(e){return new(e||y)},y.ɵmod=t.ɵɵdefineNgModule({type:y}),y.ɵinj=t.ɵɵdefineInjector({imports:[[a.CommonModule,s.MatProgressSpinnerModule]]}),("undefined"==typeof ngJitMode||ngJitMode)&&t.ɵɵsetNgModuleScope(y,{declarations:[g],imports:[a.CommonModule,s.MatProgressSpinnerModule],exports:[g]}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(y,[{type:t.NgModule,args:[{declarations:[g],imports:[a.CommonModule,s.MatProgressSpinnerModule],exports:[g]}]}],null,null),e.LineUpFrame=g,e.LineUpFrameService=h,e.LineUpModule=y,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=ng-atomic-components-frames-line-up-v2.umd.min.js.map

package/bundles/ng-atomic-components-frames-line-up.umd.js

@@ -513,7 +513,7 @@
         return LineUpFrame;
     }());
     LineUpFrame.ɵfac = function LineUpFrame_Factory(t) { return new (t || LineUpFrame)(i0.ɵɵdirectiveInject(LineUpService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    LineUpFrame.ɵcmp = i0.ɵɵngDeclareComponent({ version: "11.2.14", type: LineUpFrame, selector: "frames-line-up", inputs: { label: "label", outlet: "outlet", minNextWidth: "minNextWidth" }, host: { properties: { "attr.is-main-hidden": "this.isMainHidden" } }, viewQueries: [{ propertyName: "next", first: true, predicate: ["next"], emitDistinctChangesOnly: false, descendants: true, static: true }], ngImport: i0__namespace, template: "<div class=\"main contents\" [@visibleHidden]=\"isMainHidden ? 'hidden' : 'visible' \" #main>\n  <ng-content select=\"[main]\"></ng-content>\n</div>\n<div class=\"next contents\" [@pageChange]=\"page\" #next>\n  <ng-content select=\"[next]\"></ng-content>\n</div>", styles: [":host{--gap:1px;--gap-SCOPED-IN-line-up-qL4N:var(--gap);--background:#ccc;--background-SCOPED-IN-line-up-qL4N:var(--background);--contents-background:transparent;--contents-background-SCOPED-IN-line-up-qL4N:var(--contents-background);position:relative;justify-content:flex-start;gap:var(--gap-SCOPED-IN-line-up-qL4N);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;background:var(--background-SCOPED-IN-line-up-qL4N)}:host,:host .contents{display:flex;height:100%}:host .contents{max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;background:var(--contents-background-SCOPED-IN-line-up-qL4N)}:host .contents.main{overflow:hidden;justify-content:flex-end}:host .contents.next{overflow:visible;justify-content:flex-start}"], animations: LINE_UP_ANIMATIONS, changeDetection: i0.ChangeDetectionStrategy.Default });
+    LineUpFrame.ɵcmp = i0.ɵɵngDeclareComponent({ version: "11.2.14", type: LineUpFrame, selector: "frames-line-up", inputs: { label: "label", outlet: "outlet", minNextWidth: "minNextWidth" }, host: { properties: { "attr.is-main-hidden": "this.isMainHidden" } }, viewQueries: [{ propertyName: "next", first: true, predicate: ["next"], emitDistinctChangesOnly: false, descendants: true, static: true }], ngImport: i0__namespace, template: "<div class=\"main contents\" [@visibleHidden]=\"isMainHidden ? 'hidden' : 'visible' \" #main>\n  <ng-content select=\"[main]\"></ng-content>\n</div>\n<div class=\"next contents\" [@pageChange]=\"page\" #next>\n  <ng-content select=\"[next]\"></ng-content>\n</div>", styles: [":host{--gap:1px;--gap-SCOPED-IN-line-up-odzk:var(--gap);--background:#ccc;--background-SCOPED-IN-line-up-odzk:var(--background);--contents-background:transparent;--contents-background-SCOPED-IN-line-up-odzk:var(--contents-background);position:relative;justify-content:flex-start;gap:var(--gap-SCOPED-IN-line-up-odzk);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;background:var(--background-SCOPED-IN-line-up-odzk)}:host,:host .contents{display:flex;height:100%}:host .contents{max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;background:var(--contents-background-SCOPED-IN-line-up-odzk)}:host .contents.main{overflow:hidden;justify-content:flex-end}:host .contents.next{overflow:visible;justify-content:flex-start}"], animations: LINE_UP_ANIMATIONS, changeDetection: i0.ChangeDetectionStrategy.Default });
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LineUpFrame, [{
                 type: i0.Component,

package/bundles/ng-atomic-components-frames-line-up.umd.min.js

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("rxjs"),require("rxjs/operators"),require("@angular/animations"),require("resize-observer-polyfill"),require("@angular/common"),require("@angular/material/progress-spinner")):"function"==typeof define&&define.amd?define("@ng-atomic/components/frames/line-up",["exports","@angular/core","rxjs","rxjs/operators","@angular/animations","resize-observer-polyfill","@angular/common","@angular/material/progress-spinner"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["ng-atomic"]=e["ng-atomic"]||{},e["ng-atomic"].components=e["ng-atomic"].components||{},e["ng-atomic"].components.frames=e["ng-atomic"].components.frames||{},e["ng-atomic"].components.frames["line-up"]={}),e.ng.core,e.rxjs,e.rxjs.operators,e.ng.animations,e.ResizeObserver,e.ng.common,e.ng.material.progressSpinner)}(this,(function(e,t,n,i,o,a,r,s){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var i=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,i.get?i:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var d=c(t),u=l(a),p=[o.trigger("visibleHidden",[o.state("visible",o.style({width:"100%"})),o.state("hidden",o.style({display:"none",width:"0%"})),o.transition("visible => hidden",[o.animate("0.5s",o.style({width:"0%"})),o.style({display:"none"})]),o.transition("hidden => visible",[o.sequence([o.style({display:"inherit"}),o.animate("0.5s",o.style({width:"100%"}))])])]),o.trigger("pageChange",[o.state("Next",o.style({position:"relative",width:"100%"})),o.state("NextWithMainPage",o.style({position:"relative",width:"100%"})),o.state("Blank",o.style({position:"relative",display:"none"})),o.transition("Blank => Next",[o.query(":enter",[o.animate("0.5s")],{optional:!0}),o.sequence([o.style({display:"inherit",width:"100%"}),o.animate("0.5s")])]),o.transition("Blank => NextWithMainPage",[o.query(":enter",[o.animate("0.5s")],{optional:!0}),o.sequence([o.style({display:"inherit",width:"100%"}),o.animate("0.5s")])]),o.transition("Next => Blank",o.group([o.query(":leave",o.animate("0.5s",o.style({width:"100%"})),{optional:!0}),o.sequence([o.style({position:"absolute",display:"block",left:"0%"}),o.animate("0.5s",o.style({left:"100%"}))])])),o.transition("NextWithMainPage => Blank",o.group([o.query(":leave",o.animate("0.5s",o.style({width:"100%"})),{optional:!0}),o.sequence([o.style({position:"absolute",display:"block",left:"100%"}),o.animate("0.5s",o.style({}))])]))])];Object.create;function f(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],i=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&i>=e.length&&(e=void 0),{value:e&&e[i++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}Object.create;var g=function(e){return function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return n.Observable.create((function(t){var n,i,o=new u.default((function(e){var n,i;try{for(var o=f(e),a=o.next();!a.done;a=o.next()){var r=a.value;t.next(r)}}catch(e){n={error:e}}finally{try{a&&!a.done&&(i=o.return)&&i.call(o)}finally{if(n)throw n.error}}}));try{for(var a=f(e),r=a.next();!r.done;r=a.next()){var s=r.value;o.observe(s)}}catch(e){n={error:e}}finally{try{r&&!r.done&&(i=a.return)&&i.call(a)}finally{if(n)throw n.error}}return function(){return o.disconnect()}})).pipe(i.startWith({x:0,y:0,width:0,height:0,top:0,right:0,bottom:0,left:0}))}(e.nativeElement).pipe(i.map((function(e){var t,n=e.contentRect;return null!==(t=null==n?void 0:n.width)&&void 0!==t?t:0}))).pipe(i.distinctUntilChanged())},m=function(){this.pageAnimationDone$=new n.ReplaySubject(1)};m.ɵfac=function(e){return new(e||m)},m.ɵprov=t.ɵɵdefineInjectable({token:m,factory:m.ɵfac,providedIn:"root"}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(m,[{type:t.Injectable,args:[{providedIn:"root"}]}],null,null);var h=function(){function e(e,t){this.service=e,this.cd=t,this.isMainHidden=!1,this.label="root",this.minNextWidth=360}return Object.defineProperty(e.prototype,"page",{get:function(){var e,t;return"Blank"===(null===(t=null===(e=this.outlet)||void 0===e?void 0:e.activatedRouteData)||void 0===t?void 0:t.page)?"Blank":this.isMainHidden?"Next":"NextWithMainPage"},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){var e=this;"root"!==this.label&&g(this.next).subscribe((function(t){e.isMainHidden=t>e.minNextWidth,e.cd.detectChanges()}))},e}();h.ɵfac=function(e){return new(e||h)(t.ɵɵdirectiveInject(m),t.ɵɵdirectiveInject(t.ChangeDetectorRef))},h.ɵcmp=t.ɵɵngDeclareComponent({version:"11.2.14",type:h,selector:"frames-line-up",inputs:{label:"label",outlet:"outlet",minNextWidth:"minNextWidth"},host:{properties:{"attr.is-main-hidden":"this.isMainHidden"}},viewQueries:[{propertyName:"next",first:!0,predicate:["next"],emitDistinctChangesOnly:!1,descendants:!0,static:!0}],ngImport:d,template:'<div class="main contents" [@visibleHidden]="isMainHidden ? \'hidden\' : \'visible\' " #main>\n  <ng-content select="[main]"></ng-content>\n</div>\n<div class="next contents" [@pageChange]="page" #next>\n  <ng-content select="[next]"></ng-content>\n</div>',styles:[":host{--gap:1px;--gap-SCOPED-IN-line-up-qL4N:var(--gap);--background:#ccc;--background-SCOPED-IN-line-up-qL4N:var(--background);--contents-background:transparent;--contents-background-SCOPED-IN-line-up-qL4N:var(--contents-background);position:relative;justify-content:flex-start;gap:var(--gap-SCOPED-IN-line-up-qL4N);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;background:var(--background-SCOPED-IN-line-up-qL4N)}:host,:host .contents{display:flex;height:100%}:host .contents{max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;background:var(--contents-background-SCOPED-IN-line-up-qL4N)}:host .contents.main{overflow:hidden;justify-content:flex-end}:host .contents.next{overflow:visible;justify-content:flex-start}"],animations:p,changeDetection:t.ChangeDetectionStrategy.Default}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(h,[{type:t.Component,args:[{selector:"frames-line-up",templateUrl:"./line-up.frame.html",styleUrls:["./line-up.frame.scss"],changeDetection:t.ChangeDetectionStrategy.Default,animations:p}]}],(function(){return[{type:m},{type:t.ChangeDetectorRef}]}),{isMainHidden:[{type:t.HostBinding,args:["attr.is-main-hidden"]}],label:[{type:t.Input}],outlet:[{type:t.Input}],minNextWidth:[{type:t.Input}],next:[{type:t.ViewChild,args:["next",{static:!0}]}]});var y=function(){};y.ɵfac=function(e){return new(e||y)},y.ɵmod=t.ɵɵdefineNgModule({type:y}),y.ɵinj=t.ɵɵdefineInjector({imports:[[r.CommonModule,s.MatProgressSpinnerModule]]}),("undefined"==typeof ngJitMode||ngJitMode)&&t.ɵɵsetNgModuleScope(y,{declarations:[h],imports:[r.CommonModule,s.MatProgressSpinnerModule],exports:[h]}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(y,[{type:t.NgModule,args:[{declarations:[h],imports:[r.CommonModule,s.MatProgressSpinnerModule],exports:[h]}]}],null,null),e.LineUpFrame=h,e.LineUpModule=y,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("rxjs"),require("rxjs/operators"),require("@angular/animations"),require("resize-observer-polyfill"),require("@angular/common"),require("@angular/material/progress-spinner")):"function"==typeof define&&define.amd?define("@ng-atomic/components/frames/line-up",["exports","@angular/core","rxjs","rxjs/operators","@angular/animations","resize-observer-polyfill","@angular/common","@angular/material/progress-spinner"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["ng-atomic"]=e["ng-atomic"]||{},e["ng-atomic"].components=e["ng-atomic"].components||{},e["ng-atomic"].components.frames=e["ng-atomic"].components.frames||{},e["ng-atomic"].components.frames["line-up"]={}),e.ng.core,e.rxjs,e.rxjs.operators,e.ng.animations,e.ResizeObserver,e.ng.common,e.ng.material.progressSpinner)}(this,(function(e,t,n,i,o,a,r,s){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function d(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var i=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,i.get?i:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var c=d(t),u=l(a),p=[o.trigger("visibleHidden",[o.state("visible",o.style({width:"100%"})),o.state("hidden",o.style({display:"none",width:"0%"})),o.transition("visible => hidden",[o.animate("0.5s",o.style({width:"0%"})),o.style({display:"none"})]),o.transition("hidden => visible",[o.sequence([o.style({display:"inherit"}),o.animate("0.5s",o.style({width:"100%"}))])])]),o.trigger("pageChange",[o.state("Next",o.style({position:"relative",width:"100%"})),o.state("NextWithMainPage",o.style({position:"relative",width:"100%"})),o.state("Blank",o.style({position:"relative",display:"none"})),o.transition("Blank => Next",[o.query(":enter",[o.animate("0.5s")],{optional:!0}),o.sequence([o.style({display:"inherit",width:"100%"}),o.animate("0.5s")])]),o.transition("Blank => NextWithMainPage",[o.query(":enter",[o.animate("0.5s")],{optional:!0}),o.sequence([o.style({display:"inherit",width:"100%"}),o.animate("0.5s")])]),o.transition("Next => Blank",o.group([o.query(":leave",o.animate("0.5s",o.style({width:"100%"})),{optional:!0}),o.sequence([o.style({position:"absolute",display:"block",left:"0%"}),o.animate("0.5s",o.style({left:"100%"}))])])),o.transition("NextWithMainPage => Blank",o.group([o.query(":leave",o.animate("0.5s",o.style({width:"100%"})),{optional:!0}),o.sequence([o.style({position:"absolute",display:"block",left:"100%"}),o.animate("0.5s",o.style({}))])]))])];Object.create;function f(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],i=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&i>=e.length&&(e=void 0),{value:e&&e[i++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}Object.create;var g=function(e){return function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return n.Observable.create((function(t){var n,i,o=new u.default((function(e){var n,i;try{for(var o=f(e),a=o.next();!a.done;a=o.next()){var r=a.value;t.next(r)}}catch(e){n={error:e}}finally{try{a&&!a.done&&(i=o.return)&&i.call(o)}finally{if(n)throw n.error}}}));try{for(var a=f(e),r=a.next();!r.done;r=a.next()){var s=r.value;o.observe(s)}}catch(e){n={error:e}}finally{try{r&&!r.done&&(i=a.return)&&i.call(a)}finally{if(n)throw n.error}}return function(){return o.disconnect()}})).pipe(i.startWith({x:0,y:0,width:0,height:0,top:0,right:0,bottom:0,left:0}))}(e.nativeElement).pipe(i.map((function(e){var t,n=e.contentRect;return null!==(t=null==n?void 0:n.width)&&void 0!==t?t:0}))).pipe(i.distinctUntilChanged())},m=function(){this.pageAnimationDone$=new n.ReplaySubject(1)};m.ɵfac=function(e){return new(e||m)},m.ɵprov=t.ɵɵdefineInjectable({token:m,factory:m.ɵfac,providedIn:"root"}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(m,[{type:t.Injectable,args:[{providedIn:"root"}]}],null,null);var h=function(){function e(e,t){this.service=e,this.cd=t,this.isMainHidden=!1,this.label="root",this.minNextWidth=360}return Object.defineProperty(e.prototype,"page",{get:function(){var e,t;return"Blank"===(null===(t=null===(e=this.outlet)||void 0===e?void 0:e.activatedRouteData)||void 0===t?void 0:t.page)?"Blank":this.isMainHidden?"Next":"NextWithMainPage"},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){var e=this;"root"!==this.label&&g(this.next).subscribe((function(t){e.isMainHidden=t>e.minNextWidth,e.cd.detectChanges()}))},e}();h.ɵfac=function(e){return new(e||h)(t.ɵɵdirectiveInject(m),t.ɵɵdirectiveInject(t.ChangeDetectorRef))},h.ɵcmp=t.ɵɵngDeclareComponent({version:"11.2.14",type:h,selector:"frames-line-up",inputs:{label:"label",outlet:"outlet",minNextWidth:"minNextWidth"},host:{properties:{"attr.is-main-hidden":"this.isMainHidden"}},viewQueries:[{propertyName:"next",first:!0,predicate:["next"],emitDistinctChangesOnly:!1,descendants:!0,static:!0}],ngImport:c,template:'<div class="main contents" [@visibleHidden]="isMainHidden ? \'hidden\' : \'visible\' " #main>\n  <ng-content select="[main]"></ng-content>\n</div>\n<div class="next contents" [@pageChange]="page" #next>\n  <ng-content select="[next]"></ng-content>\n</div>',styles:[":host{--gap:1px;--gap-SCOPED-IN-line-up-odzk:var(--gap);--background:#ccc;--background-SCOPED-IN-line-up-odzk:var(--background);--contents-background:transparent;--contents-background-SCOPED-IN-line-up-odzk:var(--contents-background);position:relative;justify-content:flex-start;gap:var(--gap-SCOPED-IN-line-up-odzk);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;background:var(--background-SCOPED-IN-line-up-odzk)}:host,:host .contents{display:flex;height:100%}:host .contents{max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;background:var(--contents-background-SCOPED-IN-line-up-odzk)}:host .contents.main{overflow:hidden;justify-content:flex-end}:host .contents.next{overflow:visible;justify-content:flex-start}"],animations:p,changeDetection:t.ChangeDetectionStrategy.Default}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(h,[{type:t.Component,args:[{selector:"frames-line-up",templateUrl:"./line-up.frame.html",styleUrls:["./line-up.frame.scss"],changeDetection:t.ChangeDetectionStrategy.Default,animations:p}]}],(function(){return[{type:m},{type:t.ChangeDetectorRef}]}),{isMainHidden:[{type:t.HostBinding,args:["attr.is-main-hidden"]}],label:[{type:t.Input}],outlet:[{type:t.Input}],minNextWidth:[{type:t.Input}],next:[{type:t.ViewChild,args:["next",{static:!0}]}]});var y=function(){};y.ɵfac=function(e){return new(e||y)},y.ɵmod=t.ɵɵdefineNgModule({type:y}),y.ɵinj=t.ɵɵdefineInjector({imports:[[r.CommonModule,s.MatProgressSpinnerModule]]}),("undefined"==typeof ngJitMode||ngJitMode)&&t.ɵɵsetNgModuleScope(y,{declarations:[h],imports:[r.CommonModule,s.MatProgressSpinnerModule],exports:[h]}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(y,[{type:t.NgModule,args:[{declarations:[h],imports:[r.CommonModule,s.MatProgressSpinnerModule],exports:[h]}]}],null,null),e.LineUpFrame=h,e.LineUpModule=y,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=ng-atomic-components-frames-line-up.umd.min.js.map

package/bundles/ng-atomic-components-frames-overlay-v2.umd.js

@@ -60,7 +60,7 @@
         return OverlayFrame;
     }());
     OverlayFrame.ɵfac = function OverlayFrame_Factory(t) { return new (t || OverlayFrame)(); };
-    OverlayFrame.ɵcmp = i0.ɵɵngDeclareComponent({ version: "11.2.14", type: OverlayFrame, selector: "frames-overlay", inputs: { hasNext: "hasNext" }, ngImport: i0__namespace, template: "<div class=\"main\">\n    <ng-content select=[main]></ng-content>\n</div>\n<div class=\"next\" [@hasNext]=\"hasNext\">\n    <ng-content select=[next]></ng-content>\n</div>", styles: [":host{--cell:8px;--cell-SCOPED-IN-line-overlay-czPU:var(--cell);--width:100%;--width-SCOPED-IN-line-overlay-czPU:var(--width);--height:100%;--height-SCOPED-IN-line-overlay-czPU:var(--height);position:relative;display:block;width:var(--width-SCOPED-IN-line-overlay-czPU);height:var(--height-SCOPED-IN-line-overlay-czPU)}:host .loading{z-index:1000;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,.4)}:host .loading,:host .main{position:absolute;top:0;left:0;width:var(--width-SCOPED-IN-line-overlay-czPU);height:var(--height-SCOPED-IN-line-overlay-czPU)}:host .main{z-index:1;overflow:hidden}:host .main *{--cell:var(--cell-SCOPED-IN-line-overlay-czPU);--width:var(--width-SCOPED-IN-line-overlay-czPU);--height:var(--height-SCOPED-IN-line-overlay-czPU)}:host .next{position:absolute;top:0;left:0;z-index:2;width:var(--width-SCOPED-IN-line-overlay-czPU);height:auto}:host .next *{--cell:var(--cell-SCOPED-IN-line-overlay-czPU);--width:var(--width-SCOPED-IN-line-overlay-czPU);--height:var(--height-SCOPED-IN-line-overlay-czPU)}"], animations: [OVERLAY_ANIMATION], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    OverlayFrame.ɵcmp = i0.ɵɵngDeclareComponent({ version: "11.2.14", type: OverlayFrame, selector: "frames-overlay", inputs: { hasNext: "hasNext" }, ngImport: i0__namespace, template: "<div class=\"main\">\n    <ng-content select=[main]></ng-content>\n</div>\n<div class=\"next\" [@hasNext]=\"hasNext\">\n    <ng-content select=[next]></ng-content>\n</div>", styles: [":host{--cell:8px;--cell-SCOPED-IN-line-overlay-eTpx:var(--cell);--width:100%;--width-SCOPED-IN-line-overlay-eTpx:var(--width);--height:100%;--height-SCOPED-IN-line-overlay-eTpx:var(--height);position:relative;display:block;width:var(--width-SCOPED-IN-line-overlay-eTpx);height:var(--height-SCOPED-IN-line-overlay-eTpx)}:host .loading{z-index:1000;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,.4)}:host .loading,:host .main{position:absolute;top:0;left:0;width:var(--width-SCOPED-IN-line-overlay-eTpx);height:var(--height-SCOPED-IN-line-overlay-eTpx)}:host .main{z-index:1;overflow:hidden}:host .main *{--cell:var(--cell-SCOPED-IN-line-overlay-eTpx);--width:var(--width-SCOPED-IN-line-overlay-eTpx);--height:var(--height-SCOPED-IN-line-overlay-eTpx)}:host .next{position:absolute;top:0;left:0;z-index:2;width:var(--width-SCOPED-IN-line-overlay-eTpx);height:auto}:host .next *{--cell:var(--cell-SCOPED-IN-line-overlay-eTpx);--width:var(--width-SCOPED-IN-line-overlay-eTpx);--height:var(--height-SCOPED-IN-line-overlay-eTpx)}"], animations: [OVERLAY_ANIMATION], changeDetection: i0.ChangeDetectionStrategy.OnPush });
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OverlayFrame, [{
                 type: i0.Component,

package/bundles/ng-atomic-components-frames-overlay-v2.umd.min.js

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/animations"),require("@angular/common"),require("@angular/material/progress-spinner")):"function"==typeof define&&define.amd?define("@ng-atomic/components/frames/overlay-v2",["exports","@angular/core","@angular/animations","@angular/common","@angular/material/progress-spinner"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["ng-atomic"]=e["ng-atomic"]||{},e["ng-atomic"].components=e["ng-atomic"].components||{},e["ng-atomic"].components.frames=e["ng-atomic"].components.frames||{},e["ng-atomic"].components.frames["overlay-v2"]={}),e.ng.core,e.ng.animations,e.ng.common,e.ng.material.progressSpinner)}(this,(function(e,t,n,o,a){"use strict";function r(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var i=r(t),l=n.trigger("hasNext",[n.transition("false => true",[n.query(":enter",[n.style({position:"absolute",top:"0px",left:"0px"})]),n.query(":enter",[n.style({left:"100%"})]),n.query(":enter",[n.animate("300ms ease-out",n.style({left:"0%"}))]),n.query(":enter",n.animateChild())]),n.transition("true => false",[n.query(":leave",[n.style({position:"absolute",top:"0px",left:"0px"})]),n.query(":leave",[n.style({left:"0%"})]),n.query(":leave",[n.animate("300ms ease-in",n.style({left:"100%"}))]),n.query(":leave",n.animateChild())])]),s=function(){this.hasNext=!1};s.ɵfac=function(e){return new(e||s)},s.ɵcmp=t.ɵɵngDeclareComponent({version:"11.2.14",type:s,selector:"frames-overlay",inputs:{hasNext:"hasNext"},ngImport:i,template:'<div class="main">\n    <ng-content select=[main]></ng-content>\n</div>\n<div class="next" [@hasNext]="hasNext">\n    <ng-content select=[next]></ng-content>\n</div>',styles:[":host{--cell:8px;--cell-SCOPED-IN-line-overlay-czPU:var(--cell);--width:100%;--width-SCOPED-IN-line-overlay-czPU:var(--width);--height:100%;--height-SCOPED-IN-line-overlay-czPU:var(--height);position:relative;display:block;width:var(--width-SCOPED-IN-line-overlay-czPU);height:var(--height-SCOPED-IN-line-overlay-czPU)}:host .loading{z-index:1000;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,.4)}:host .loading,:host .main{position:absolute;top:0;left:0;width:var(--width-SCOPED-IN-line-overlay-czPU);height:var(--height-SCOPED-IN-line-overlay-czPU)}:host .main{z-index:1;overflow:hidden}:host .main *{--cell:var(--cell-SCOPED-IN-line-overlay-czPU);--width:var(--width-SCOPED-IN-line-overlay-czPU);--height:var(--height-SCOPED-IN-line-overlay-czPU)}:host .next{position:absolute;top:0;left:0;z-index:2;width:var(--width-SCOPED-IN-line-overlay-czPU);height:auto}:host .next *{--cell:var(--cell-SCOPED-IN-line-overlay-czPU);--width:var(--width-SCOPED-IN-line-overlay-czPU);--height:var(--height-SCOPED-IN-line-overlay-czPU)}"],animations:[l],changeDetection:t.ChangeDetectionStrategy.OnPush}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(s,[{type:t.Component,args:[{selector:"frames-overlay",templateUrl:"./overlay.frame.html",styleUrls:["./overlay.frame.scss"],animations:[l],changeDetection:t.ChangeDetectionStrategy.OnPush}]}],null,{hasNext:[{type:t.Input}]});var c=function(){};c.ɵfac=function(e){return new(e||c)},c.ɵmod=t.ɵɵdefineNgModule({type:c}),c.ɵinj=t.ɵɵdefineInjector({imports:[[o.CommonModule,a.MatProgressSpinnerModule]]}),("undefined"==typeof ngJitMode||ngJitMode)&&t.ɵɵsetNgModuleScope(c,{declarations:[s],imports:[o.CommonModule,a.MatProgressSpinnerModule],exports:[s]}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(c,[{type:t.NgModule,args:[{declarations:[s],imports:[o.CommonModule,a.MatProgressSpinnerModule],exports:[s]}]}],null,null),e.OverlayFrame=s,e.OverlayModule=c,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/animations"),require("@angular/common"),require("@angular/material/progress-spinner")):"function"==typeof define&&define.amd?define("@ng-atomic/components/frames/overlay-v2",["exports","@angular/core","@angular/animations","@angular/common","@angular/material/progress-spinner"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["ng-atomic"]=e["ng-atomic"]||{},e["ng-atomic"].components=e["ng-atomic"].components||{},e["ng-atomic"].components.frames=e["ng-atomic"].components.frames||{},e["ng-atomic"].components.frames["overlay-v2"]={}),e.ng.core,e.ng.animations,e.ng.common,e.ng.material.progressSpinner)}(this,(function(e,t,n,o,a){"use strict";function r(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var i=r(t),l=n.trigger("hasNext",[n.transition("false => true",[n.query(":enter",[n.style({position:"absolute",top:"0px",left:"0px"})]),n.query(":enter",[n.style({left:"100%"})]),n.query(":enter",[n.animate("300ms ease-out",n.style({left:"0%"}))]),n.query(":enter",n.animateChild())]),n.transition("true => false",[n.query(":leave",[n.style({position:"absolute",top:"0px",left:"0px"})]),n.query(":leave",[n.style({left:"0%"})]),n.query(":leave",[n.animate("300ms ease-in",n.style({left:"100%"}))]),n.query(":leave",n.animateChild())])]),s=function(){this.hasNext=!1};s.ɵfac=function(e){return new(e||s)},s.ɵcmp=t.ɵɵngDeclareComponent({version:"11.2.14",type:s,selector:"frames-overlay",inputs:{hasNext:"hasNext"},ngImport:i,template:'<div class="main">\n    <ng-content select=[main]></ng-content>\n</div>\n<div class="next" [@hasNext]="hasNext">\n    <ng-content select=[next]></ng-content>\n</div>',styles:[":host{--cell:8px;--cell-SCOPED-IN-line-overlay-eTpx:var(--cell);--width:100%;--width-SCOPED-IN-line-overlay-eTpx:var(--width);--height:100%;--height-SCOPED-IN-line-overlay-eTpx:var(--height);position:relative;display:block;width:var(--width-SCOPED-IN-line-overlay-eTpx);height:var(--height-SCOPED-IN-line-overlay-eTpx)}:host .loading{z-index:1000;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,.4)}:host .loading,:host .main{position:absolute;top:0;left:0;width:var(--width-SCOPED-IN-line-overlay-eTpx);height:var(--height-SCOPED-IN-line-overlay-eTpx)}:host .main{z-index:1;overflow:hidden}:host .main *{--cell:var(--cell-SCOPED-IN-line-overlay-eTpx);--width:var(--width-SCOPED-IN-line-overlay-eTpx);--height:var(--height-SCOPED-IN-line-overlay-eTpx)}:host .next{position:absolute;top:0;left:0;z-index:2;width:var(--width-SCOPED-IN-line-overlay-eTpx);height:auto}:host .next *{--cell:var(--cell-SCOPED-IN-line-overlay-eTpx);--width:var(--width-SCOPED-IN-line-overlay-eTpx);--height:var(--height-SCOPED-IN-line-overlay-eTpx)}"],animations:[l],changeDetection:t.ChangeDetectionStrategy.OnPush}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(s,[{type:t.Component,args:[{selector:"frames-overlay",templateUrl:"./overlay.frame.html",styleUrls:["./overlay.frame.scss"],animations:[l],changeDetection:t.ChangeDetectionStrategy.OnPush}]}],null,{hasNext:[{type:t.Input}]});var c=function(){};c.ɵfac=function(e){return new(e||c)},c.ɵmod=t.ɵɵdefineNgModule({type:c}),c.ɵinj=t.ɵɵdefineInjector({imports:[[o.CommonModule,a.MatProgressSpinnerModule]]}),("undefined"==typeof ngJitMode||ngJitMode)&&t.ɵɵsetNgModuleScope(c,{declarations:[s],imports:[o.CommonModule,a.MatProgressSpinnerModule],exports:[s]}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(c,[{type:t.NgModule,args:[{declarations:[s],imports:[o.CommonModule,a.MatProgressSpinnerModule],exports:[s]}]}],null,null),e.OverlayFrame=s,e.OverlayModule=c,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=ng-atomic-components-frames-overlay-v2.umd.min.js.map

package/bundles/ng-atomic-components-frames-overlay.umd.js

@@ -65,7 +65,7 @@
         return OverlayFrame;
     }());
     OverlayFrame.ɵfac = function OverlayFrame_Factory(t) { return new (t || OverlayFrame)(); };
-    OverlayFrame.ɵcmp = i0.ɵɵngDeclareComponent({ version: "11.2.14", type: OverlayFrame, selector: "frames-overlay", inputs: { outlet: "outlet", isLoading: "isLoading" }, ngImport: i0__namespace, template: "<div class=\"loading\" *ngIf=\"isLoading\">\n    <mat-spinner></mat-spinner>\n</div>\n<div class=\"main page\">\n    <ng-content select=[mainPage]></ng-content>\n</div>\n<div class=\"next page\" [@routeAnimations]=\"prepareRoute(outlet)\">\n    <ng-content select=[nextPage]></ng-content>\n</div>", styles: [":host{--cell:8px;--cell-SCOPED-IN-line-overlay-yf6l:var(--cell);--width:100%;--width-SCOPED-IN-line-overlay-yf6l:var(--width);--height:100%;--height-SCOPED-IN-line-overlay-yf6l:var(--height);position:relative;display:block;width:var(--width-SCOPED-IN-line-overlay-yf6l);height:var(--height-SCOPED-IN-line-overlay-yf6l)}:host .loading{z-index:1000;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,.4)}:host .loading,:host .main.page{position:absolute;top:0;left:0;width:var(--width-SCOPED-IN-line-overlay-yf6l);height:var(--height-SCOPED-IN-line-overlay-yf6l)}:host .main.page{z-index:1;overflow:hidden}:host .main.page *{--cell:var(--cell-SCOPED-IN-line-overlay-yf6l);--width:var(--width-SCOPED-IN-line-overlay-yf6l);--height:var(--height-SCOPED-IN-line-overlay-yf6l)}:host .next.page{position:absolute;top:0;left:0;z-index:2;width:var(--width-SCOPED-IN-line-overlay-yf6l);height:auto}:host .next.page *{--cell:var(--cell-SCOPED-IN-line-overlay-yf6l);--width:var(--width-SCOPED-IN-line-overlay-yf6l);--height:var(--height-SCOPED-IN-line-overlay-yf6l)}"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], animations: [slideInAnimation] });
+    OverlayFrame.ɵcmp = i0.ɵɵngDeclareComponent({ version: "11.2.14", type: OverlayFrame, selector: "frames-overlay", inputs: { outlet: "outlet", isLoading: "isLoading" }, ngImport: i0__namespace, template: "<div class=\"loading\" *ngIf=\"isLoading\">\n    <mat-spinner></mat-spinner>\n</div>\n<div class=\"main page\">\n    <ng-content select=[mainPage]></ng-content>\n</div>\n<div class=\"next page\" [@routeAnimations]=\"prepareRoute(outlet)\">\n    <ng-content select=[nextPage]></ng-content>\n</div>", styles: [":host{--cell:8px;--cell-SCOPED-IN-line-overlay-Irl7:var(--cell);--width:100%;--width-SCOPED-IN-line-overlay-Irl7:var(--width);--height:100%;--height-SCOPED-IN-line-overlay-Irl7:var(--height);position:relative;display:block;width:var(--width-SCOPED-IN-line-overlay-Irl7);height:var(--height-SCOPED-IN-line-overlay-Irl7)}:host .loading{z-index:1000;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,.4)}:host .loading,:host .main.page{position:absolute;top:0;left:0;width:var(--width-SCOPED-IN-line-overlay-Irl7);height:var(--height-SCOPED-IN-line-overlay-Irl7)}:host .main.page{z-index:1;overflow:hidden}:host .main.page *{--cell:var(--cell-SCOPED-IN-line-overlay-Irl7);--width:var(--width-SCOPED-IN-line-overlay-Irl7);--height:var(--height-SCOPED-IN-line-overlay-Irl7)}:host .next.page{position:absolute;top:0;left:0;z-index:2;width:var(--width-SCOPED-IN-line-overlay-Irl7);height:auto}:host .next.page *{--cell:var(--cell-SCOPED-IN-line-overlay-Irl7);--width:var(--width-SCOPED-IN-line-overlay-Irl7);--height:var(--height-SCOPED-IN-line-overlay-Irl7)}"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], animations: [slideInAnimation] });
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OverlayFrame, [{
                 type: i0.Component,

package/bundles/ng-atomic-components-frames-overlay.umd.min.js

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/animations"),require("@angular/common"),require("@angular/material/progress-spinner")):"function"==typeof define&&define.amd?define("@ng-atomic/components/frames/overlay",["exports","@angular/core","@angular/animations","@angular/common","@angular/material/progress-spinner"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["ng-atomic"]=e["ng-atomic"]||{},e["ng-atomic"].components=e["ng-atomic"].components||{},e["ng-atomic"].components.frames=e["ng-atomic"].components.frames||{},e["ng-atomic"].components.frames.overlay={}),e.ng.core,e.ng.animations,e.ng.common,e.ng.material.progressSpinner)}(this,(function(e,t,n,o,a){"use strict";function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var r=i(t),l=n.trigger("routeAnimations",[n.transition("IndexPage => NextPage",[n.query(":enter",[n.style({position:"absolute",top:"0px",left:"0px"})]),n.query(":enter",[n.style({left:"100%"})]),n.query(":enter",[n.animate("300ms ease-out",n.style({left:"0%"}))]),n.query(":enter",n.animateChild())]),n.transition("NextPage => IndexPage",[n.query(":leave",[n.style({position:"absolute",top:"0px",left:"0px"})]),n.query(":leave",[n.style({left:"0%"})]),n.query(":leave",[n.animate("300ms ease-in",n.style({left:"100%"}))]),n.query(":leave",n.animateChild())])]),s=function(){function e(){this.outlet=null,this.isLoading=!1}return e.prototype.prepareRoute=function(e){var t;return null===(t=null==e?void 0:e.activatedRouteData)||void 0===t?void 0:t.page},e}();s.ɵfac=function(e){return new(e||s)},s.ɵcmp=t.ɵɵngDeclareComponent({version:"11.2.14",type:s,selector:"frames-overlay",inputs:{outlet:"outlet",isLoading:"isLoading"},ngImport:r,template:'<div class="loading" *ngIf="isLoading">\n    <mat-spinner></mat-spinner>\n</div>\n<div class="main page">\n    <ng-content select=[mainPage]></ng-content>\n</div>\n<div class="next page" [@routeAnimations]="prepareRoute(outlet)">\n    <ng-content select=[nextPage]></ng-content>\n</div>',styles:[":host{--cell:8px;--cell-SCOPED-IN-line-overlay-yf6l:var(--cell);--width:100%;--width-SCOPED-IN-line-overlay-yf6l:var(--width);--height:100%;--height-SCOPED-IN-line-overlay-yf6l:var(--height);position:relative;display:block;width:var(--width-SCOPED-IN-line-overlay-yf6l);height:var(--height-SCOPED-IN-line-overlay-yf6l)}:host .loading{z-index:1000;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,.4)}:host .loading,:host .main.page{position:absolute;top:0;left:0;width:var(--width-SCOPED-IN-line-overlay-yf6l);height:var(--height-SCOPED-IN-line-overlay-yf6l)}:host .main.page{z-index:1;overflow:hidden}:host .main.page *{--cell:var(--cell-SCOPED-IN-line-overlay-yf6l);--width:var(--width-SCOPED-IN-line-overlay-yf6l);--height:var(--height-SCOPED-IN-line-overlay-yf6l)}:host .next.page{position:absolute;top:0;left:0;z-index:2;width:var(--width-SCOPED-IN-line-overlay-yf6l);height:auto}:host .next.page *{--cell:var(--cell-SCOPED-IN-line-overlay-yf6l);--width:var(--width-SCOPED-IN-line-overlay-yf6l);--height:var(--height-SCOPED-IN-line-overlay-yf6l)}"],directives:[{type:o.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{type:a.MatSpinner,selector:"mat-spinner",inputs:["color"]}],animations:[l]}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(s,[{type:t.Component,args:[{selector:"frames-overlay",templateUrl:"./overlay.frame.html",styleUrls:["./overlay.frame.scss"],animations:[l]}]}],null,{outlet:[{type:t.Input}],isLoading:[{type:t.Input}]});var g=function(){};g.ɵfac=function(e){return new(e||g)},g.ɵmod=t.ɵɵdefineNgModule({type:g}),g.ɵinj=t.ɵɵdefineInjector({imports:[[o.CommonModule,a.MatProgressSpinnerModule]]}),("undefined"==typeof ngJitMode||ngJitMode)&&t.ɵɵsetNgModuleScope(g,{declarations:[s],imports:[o.CommonModule,a.MatProgressSpinnerModule],exports:[s]}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(g,[{type:t.NgModule,args:[{declarations:[s],imports:[o.CommonModule,a.MatProgressSpinnerModule],exports:[s]}]}],null,null),e.OverlayFrame=s,e.OverlayModule=g,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/animations"),require("@angular/common"),require("@angular/material/progress-spinner")):"function"==typeof define&&define.amd?define("@ng-atomic/components/frames/overlay",["exports","@angular/core","@angular/animations","@angular/common","@angular/material/progress-spinner"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["ng-atomic"]=e["ng-atomic"]||{},e["ng-atomic"].components=e["ng-atomic"].components||{},e["ng-atomic"].components.frames=e["ng-atomic"].components.frames||{},e["ng-atomic"].components.frames.overlay={}),e.ng.core,e.ng.animations,e.ng.common,e.ng.material.progressSpinner)}(this,(function(e,t,n,o,a){"use strict";function r(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var i=r(t),l=n.trigger("routeAnimations",[n.transition("IndexPage => NextPage",[n.query(":enter",[n.style({position:"absolute",top:"0px",left:"0px"})]),n.query(":enter",[n.style({left:"100%"})]),n.query(":enter",[n.animate("300ms ease-out",n.style({left:"0%"}))]),n.query(":enter",n.animateChild())]),n.transition("NextPage => IndexPage",[n.query(":leave",[n.style({position:"absolute",top:"0px",left:"0px"})]),n.query(":leave",[n.style({left:"0%"})]),n.query(":leave",[n.animate("300ms ease-in",n.style({left:"100%"}))]),n.query(":leave",n.animateChild())])]),s=function(){function e(){this.outlet=null,this.isLoading=!1}return e.prototype.prepareRoute=function(e){var t;return null===(t=null==e?void 0:e.activatedRouteData)||void 0===t?void 0:t.page},e}();s.ɵfac=function(e){return new(e||s)},s.ɵcmp=t.ɵɵngDeclareComponent({version:"11.2.14",type:s,selector:"frames-overlay",inputs:{outlet:"outlet",isLoading:"isLoading"},ngImport:i,template:'<div class="loading" *ngIf="isLoading">\n    <mat-spinner></mat-spinner>\n</div>\n<div class="main page">\n    <ng-content select=[mainPage]></ng-content>\n</div>\n<div class="next page" [@routeAnimations]="prepareRoute(outlet)">\n    <ng-content select=[nextPage]></ng-content>\n</div>',styles:[":host{--cell:8px;--cell-SCOPED-IN-line-overlay-Irl7:var(--cell);--width:100%;--width-SCOPED-IN-line-overlay-Irl7:var(--width);--height:100%;--height-SCOPED-IN-line-overlay-Irl7:var(--height);position:relative;display:block;width:var(--width-SCOPED-IN-line-overlay-Irl7);height:var(--height-SCOPED-IN-line-overlay-Irl7)}:host .loading{z-index:1000;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,.4)}:host .loading,:host .main.page{position:absolute;top:0;left:0;width:var(--width-SCOPED-IN-line-overlay-Irl7);height:var(--height-SCOPED-IN-line-overlay-Irl7)}:host .main.page{z-index:1;overflow:hidden}:host .main.page *{--cell:var(--cell-SCOPED-IN-line-overlay-Irl7);--width:var(--width-SCOPED-IN-line-overlay-Irl7);--height:var(--height-SCOPED-IN-line-overlay-Irl7)}:host .next.page{position:absolute;top:0;left:0;z-index:2;width:var(--width-SCOPED-IN-line-overlay-Irl7);height:auto}:host .next.page *{--cell:var(--cell-SCOPED-IN-line-overlay-Irl7);--width:var(--width-SCOPED-IN-line-overlay-Irl7);--height:var(--height-SCOPED-IN-line-overlay-Irl7)}"],directives:[{type:o.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{type:a.MatSpinner,selector:"mat-spinner",inputs:["color"]}],animations:[l]}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(s,[{type:t.Component,args:[{selector:"frames-overlay",templateUrl:"./overlay.frame.html",styleUrls:["./overlay.frame.scss"],animations:[l]}]}],null,{outlet:[{type:t.Input}],isLoading:[{type:t.Input}]});var g=function(){};g.ɵfac=function(e){return new(e||g)},g.ɵmod=t.ɵɵdefineNgModule({type:g}),g.ɵinj=t.ɵɵdefineInjector({imports:[[o.CommonModule,a.MatProgressSpinnerModule]]}),("undefined"==typeof ngJitMode||ngJitMode)&&t.ɵɵsetNgModuleScope(g,{declarations:[s],imports:[o.CommonModule,a.MatProgressSpinnerModule],exports:[s]}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(g,[{type:t.NgModule,args:[{declarations:[s],imports:[o.CommonModule,a.MatProgressSpinnerModule],exports:[s]}]}],null,null),e.OverlayFrame=s,e.OverlayModule=g,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=ng-atomic-components-frames-overlay.umd.min.js.map

package/bundles/ng-atomic-components-frames-scroll.umd.js

@@ -32,7 +32,7 @@
         return ScrollFrame;
     }());
     ScrollFrame.ɵfac = function ScrollFrame_Factory(t) { return new (t || ScrollFrame)(); };
-    ScrollFrame.ɵcmp = i0.ɵɵngDeclareComponent({ version: "11.2.14", type: ScrollFrame, selector: "frames-scroll", ngImport: i0__namespace, template: "<div class=\"navigator-container\" iosSafariScrollBuggyfill>\n  <ng-content select=[navigator]></ng-content>\n</div>\n<div class=\"contents-container\">\n  <ng-content select=[contents]></ng-content>\n</div>", styles: [":host{--height:100%;--height-SCOPED-IN-scroll-MsbF:var(--height);--navigator-height:56px;--navigator-height-SCOPED-IN-scroll-MsbF:var(--navigator-height);height:var(--height-SCOPED-IN-scroll-MsbF);overflow:hidden}:host .navigator-container{height:var(--navigator-height-SCOPED-IN-scroll-MsbF);overflow:hidden;touch-action:none}:host .contents-container{height:calc(var(--height-SCOPED-IN-scroll-MsbF) - var(--navigator-height-SCOPED-IN-scroll-MsbF));overflow:scroll;-webkit-overflow-scrolling:touch}"], directives: [{ type: i1.IosSafariScrollBuggyfillDirective, selector: "[iosSafariScrollBuggyfill]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ScrollFrame.ɵcmp = i0.ɵɵngDeclareComponent({ version: "11.2.14", type: ScrollFrame, selector: "frames-scroll", ngImport: i0__namespace, template: "<div class=\"navigator-container\" iosSafariScrollBuggyfill>\n  <ng-content select=[navigator]></ng-content>\n</div>\n<div class=\"contents-container\">\n  <ng-content select=[contents]></ng-content>\n</div>", styles: [":host{--height:100%;--height-SCOPED-IN-scroll-48Xe:var(--height);--navigator-height:56px;--navigator-height-SCOPED-IN-scroll-48Xe:var(--navigator-height);height:var(--height-SCOPED-IN-scroll-48Xe);overflow:hidden}:host .navigator-container{height:var(--navigator-height-SCOPED-IN-scroll-48Xe);overflow:hidden;touch-action:none}:host .contents-container{height:calc(var(--height-SCOPED-IN-scroll-48Xe) - var(--navigator-height-SCOPED-IN-scroll-48Xe));overflow:scroll;-webkit-overflow-scrolling:touch}"], directives: [{ type: i1.IosSafariScrollBuggyfillDirective, selector: "[iosSafariScrollBuggyfill]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ScrollFrame, [{
                 type: i0.Component,

package/bundles/ng-atomic-components-frames-scroll.umd.min.js

@@ -1,2 +1,2 @@
-!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("@angular/core"),require("@ng-atomic/common/directives"),require("@angular/common")):"function"==typeof define&&define.amd?define("@ng-atomic/components/frames/scroll",["exports","@angular/core","@ng-atomic/common/directives","@angular/common"],o):o(((e="undefined"!=typeof globalThis?globalThis:e||self)["ng-atomic"]=e["ng-atomic"]||{},e["ng-atomic"].components=e["ng-atomic"].components||{},e["ng-atomic"].components.frames=e["ng-atomic"].components.frames||{},e["ng-atomic"].components.frames.scroll={}),e.ng.core,e.i1,e.ng.common)}(this,(function(e,o,t,n){"use strict";function r(e){if(e&&e.__esModule)return e;var o=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(o,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),o.default=e,Object.freeze(o)}var l=r(o),i=function(){};i.ɵfac=function(e){return new(e||i)},i.ɵcmp=o.ɵɵngDeclareComponent({version:"11.2.14",type:i,selector:"frames-scroll",ngImport:l,template:'<div class="navigator-container" iosSafariScrollBuggyfill>\n  <ng-content select=[navigator]></ng-content>\n</div>\n<div class="contents-container">\n  <ng-content select=[contents]></ng-content>\n</div>',styles:[":host{--height:100%;--height-SCOPED-IN-scroll-MsbF:var(--height);--navigator-height:56px;--navigator-height-SCOPED-IN-scroll-MsbF:var(--navigator-height);height:var(--height-SCOPED-IN-scroll-MsbF);overflow:hidden}:host .navigator-container{height:var(--navigator-height-SCOPED-IN-scroll-MsbF);overflow:hidden;touch-action:none}:host .contents-container{height:calc(var(--height-SCOPED-IN-scroll-MsbF) - var(--navigator-height-SCOPED-IN-scroll-MsbF));overflow:scroll;-webkit-overflow-scrolling:touch}"],directives:[{type:t.IosSafariScrollBuggyfillDirective,selector:"[iosSafariScrollBuggyfill]"}],changeDetection:o.ChangeDetectionStrategy.OnPush}),("undefined"==typeof ngDevMode||ngDevMode)&&o.ɵsetClassMetadata(i,[{type:o.Component,args:[{selector:"frames-scroll",templateUrl:"./scroll.frame.html",styleUrls:["./scroll.frame.scss"],changeDetection:o.ChangeDetectionStrategy.OnPush}]}],null,null);var c=function(){};c.ɵfac=function(e){return new(e||c)},c.ɵmod=o.ɵɵdefineNgModule({type:c}),c.ɵinj=o.ɵɵdefineInjector({imports:[[n.CommonModule,t.IosSafariScrollBuggyfillModule]]}),("undefined"==typeof ngJitMode||ngJitMode)&&o.ɵɵsetNgModuleScope(c,{declarations:[i],imports:[n.CommonModule,t.IosSafariScrollBuggyfillModule],exports:[i]}),("undefined"==typeof ngDevMode||ngDevMode)&&o.ɵsetClassMetadata(c,[{type:o.NgModule,args:[{declarations:[i],imports:[n.CommonModule,t.IosSafariScrollBuggyfillModule],exports:[i]}]}],null,null),e.ScrollFrame=i,e.ScrollModule=c,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("@angular/core"),require("@ng-atomic/common/directives"),require("@angular/common")):"function"==typeof define&&define.amd?define("@ng-atomic/components/frames/scroll",["exports","@angular/core","@ng-atomic/common/directives","@angular/common"],o):o(((e="undefined"!=typeof globalThis?globalThis:e||self)["ng-atomic"]=e["ng-atomic"]||{},e["ng-atomic"].components=e["ng-atomic"].components||{},e["ng-atomic"].components.frames=e["ng-atomic"].components.frames||{},e["ng-atomic"].components.frames.scroll={}),e.ng.core,e.i1,e.ng.common)}(this,(function(e,o,t,n){"use strict";function r(e){if(e&&e.__esModule)return e;var o=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(o,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),o.default=e,Object.freeze(o)}var l=r(o),i=function(){};i.ɵfac=function(e){return new(e||i)},i.ɵcmp=o.ɵɵngDeclareComponent({version:"11.2.14",type:i,selector:"frames-scroll",ngImport:l,template:'<div class="navigator-container" iosSafariScrollBuggyfill>\n  <ng-content select=[navigator]></ng-content>\n</div>\n<div class="contents-container">\n  <ng-content select=[contents]></ng-content>\n</div>',styles:[":host{--height:100%;--height-SCOPED-IN-scroll-48Xe:var(--height);--navigator-height:56px;--navigator-height-SCOPED-IN-scroll-48Xe:var(--navigator-height);height:var(--height-SCOPED-IN-scroll-48Xe);overflow:hidden}:host .navigator-container{height:var(--navigator-height-SCOPED-IN-scroll-48Xe);overflow:hidden;touch-action:none}:host .contents-container{height:calc(var(--height-SCOPED-IN-scroll-48Xe) - var(--navigator-height-SCOPED-IN-scroll-48Xe));overflow:scroll;-webkit-overflow-scrolling:touch}"],directives:[{type:t.IosSafariScrollBuggyfillDirective,selector:"[iosSafariScrollBuggyfill]"}],changeDetection:o.ChangeDetectionStrategy.OnPush}),("undefined"==typeof ngDevMode||ngDevMode)&&o.ɵsetClassMetadata(i,[{type:o.Component,args:[{selector:"frames-scroll",templateUrl:"./scroll.frame.html",styleUrls:["./scroll.frame.scss"],changeDetection:o.ChangeDetectionStrategy.OnPush}]}],null,null);var c=function(){};c.ɵfac=function(e){return new(e||c)},c.ɵmod=o.ɵɵdefineNgModule({type:c}),c.ɵinj=o.ɵɵdefineInjector({imports:[[n.CommonModule,t.IosSafariScrollBuggyfillModule]]}),("undefined"==typeof ngJitMode||ngJitMode)&&o.ɵɵsetNgModuleScope(c,{declarations:[i],imports:[n.CommonModule,t.IosSafariScrollBuggyfillModule],exports:[i]}),("undefined"==typeof ngDevMode||ngDevMode)&&o.ɵsetClassMetadata(c,[{type:o.NgModule,args:[{declarations:[i],imports:[n.CommonModule,t.IosSafariScrollBuggyfillModule],exports:[i]}]}],null,null),e.ScrollFrame=i,e.ScrollModule=c,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=ng-atomic-components-frames-scroll.umd.min.js.map

package/bundles/ng-atomic-components-frames-smart-menu.umd.js

@@ -44,7 +44,7 @@
         return SmartMenuFrame;
     }());
     SmartMenuFrame.ɵfac = function SmartMenuFrame_Factory(t) { return new (t || SmartMenuFrame)(); };
-    SmartMenuFrame.ɵcmp = i0.ɵɵngDeclareComponent({ version: "11.2.14", type: SmartMenuFrame, 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"], emitDistinctChangesOnly: false, descendants: true, static: true }], ngImport: i0__namespace, 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-XRVl:var(--gap);--background:#ccc;--background-SCOPED-IN-smart-menu-XRVl:var(--background);--contents-background:transparent;--contents-background-SCOPED-IN-smart-menu-XRVl:var(--contents-background);position:relative;justify-content:flex-start;gap:var(--gap-SCOPED-IN-smart-menu-XRVl);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;background:var(--background-SCOPED-IN-smart-menu-XRVl)}:host,:host .contents{display:flex;height:100%}:host .contents{max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;background:var(--contents-background-SCOPED-IN-smart-menu-XRVl)}:host .contents.menu{overflow:hidden;justify-content:flex-end}:host .contents.contents{overflow:visible;justify-content:flex-start}"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    SmartMenuFrame.ɵcmp = i0.ɵɵngDeclareComponent({ version: "11.2.14", type: SmartMenuFrame, 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"], emitDistinctChangesOnly: false, descendants: true, static: true }], ngImport: i0__namespace, 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-jfUL:var(--gap);--background:#ccc;--background-SCOPED-IN-smart-menu-jfUL:var(--background);--contents-background:transparent;--contents-background-SCOPED-IN-smart-menu-jfUL:var(--contents-background);position:relative;justify-content:flex-start;gap:var(--gap-SCOPED-IN-smart-menu-jfUL);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;background:var(--background-SCOPED-IN-smart-menu-jfUL)}:host,:host .contents{display:flex;height:100%}:host .contents{max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;background:var(--contents-background-SCOPED-IN-smart-menu-jfUL)}:host .contents.menu{overflow:hidden;justify-content:flex-end}:host .contents.contents{overflow:visible;justify-content:flex-start}"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SmartMenuFrame, [{
                 type: i0.Component,

package/bundles/ng-atomic-components-frames-smart-menu.umd.min.js

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("@ng-atomic/components/frames/smart-menu",["exports","@angular/core","@angular/common"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["ng-atomic"]=e["ng-atomic"]||{},e["ng-atomic"].components=e["ng-atomic"].components||{},e["ng-atomic"].components.frames=e["ng-atomic"].components.frames||{},e["ng-atomic"].components.frames["smart-menu"]={}),e.ng.core,e.ng.common)}(this,(function(e,t,n){"use strict";function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var a=o(t),i=function(){function e(){this.isMainHidden=!1,this.label="root",this.minNextWidth=360}return Object.defineProperty(e.prototype,"page",{get:function(){var e,t;return"Blank"===(null===(t=null===(e=this.outlet)||void 0===e?void 0:e.activatedRouteData)||void 0===t?void 0:t.page)?"Blank":this.isMainHidden?"Next":"NextWithMainPage"},enumerable:!1,configurable:!0}),e}();i.ɵfac=function(e){return new(e||i)},i.ɵcmp=t.ɵɵngDeclareComponent({version:"11.2.14",type:i,selector:"frames-smart-menu",inputs:{label:"label",outlet:"outlet",minNextWidth:"minNextWidth"},host:{properties:{"attr.is-main-hidden":"this.isMainHidden"}},viewQueries:[{propertyName:"next",first:!0,predicate:["next"],emitDistinctChangesOnly:!1,descendants:!0,static:!0}],ngImport:a,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-XRVl:var(--gap);--background:#ccc;--background-SCOPED-IN-smart-menu-XRVl:var(--background);--contents-background:transparent;--contents-background-SCOPED-IN-smart-menu-XRVl:var(--contents-background);position:relative;justify-content:flex-start;gap:var(--gap-SCOPED-IN-smart-menu-XRVl);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;background:var(--background-SCOPED-IN-smart-menu-XRVl)}:host,:host .contents{display:flex;height:100%}:host .contents{max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;background:var(--contents-background-SCOPED-IN-smart-menu-XRVl)}:host .contents.menu{overflow:hidden;justify-content:flex-end}:host .contents.contents{overflow:visible;justify-content:flex-start}"],changeDetection:t.ChangeDetectionStrategy.OnPush}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(i,[{type:t.Component,args:[{selector:"frames-smart-menu",templateUrl:"./smart-menu.frame.html",styleUrls:["./smart-menu.frame.scss"],changeDetection:t.ChangeDetectionStrategy.OnPush}]}],null,{isMainHidden:[{type:t.HostBinding,args:["attr.is-main-hidden"]}],label:[{type:t.Input}],outlet:[{type:t.Input}],minNextWidth:[{type:t.Input}],next:[{type:t.ViewChild,args:["next",{static:!0}]}]});var r=function(){};r.ɵfac=function(e){return new(e||r)},r.ɵmod=t.ɵɵdefineNgModule({type:r}),r.ɵinj=t.ɵɵdefineInjector({imports:[[n.CommonModule]]}),("undefined"==typeof ngJitMode||ngJitMode)&&t.ɵɵsetNgModuleScope(r,{declarations:[i],imports:[n.CommonModule],exports:[i]}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(r,[{type:t.NgModule,args:[{declarations:[i],imports:[n.CommonModule],exports:[i]}]}],null,null),e.SmartMenuFrame=i,e.SmartMenuModule=r,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("@ng-atomic/components/frames/smart-menu",["exports","@angular/core","@angular/common"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["ng-atomic"]=e["ng-atomic"]||{},e["ng-atomic"].components=e["ng-atomic"].components||{},e["ng-atomic"].components.frames=e["ng-atomic"].components.frames||{},e["ng-atomic"].components.frames["smart-menu"]={}),e.ng.core,e.ng.common)}(this,(function(e,t,n){"use strict";function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var a=o(t),i=function(){function e(){this.isMainHidden=!1,this.label="root",this.minNextWidth=360}return Object.defineProperty(e.prototype,"page",{get:function(){var e,t;return"Blank"===(null===(t=null===(e=this.outlet)||void 0===e?void 0:e.activatedRouteData)||void 0===t?void 0:t.page)?"Blank":this.isMainHidden?"Next":"NextWithMainPage"},enumerable:!1,configurable:!0}),e}();i.ɵfac=function(e){return new(e||i)},i.ɵcmp=t.ɵɵngDeclareComponent({version:"11.2.14",type:i,selector:"frames-smart-menu",inputs:{label:"label",outlet:"outlet",minNextWidth:"minNextWidth"},host:{properties:{"attr.is-main-hidden":"this.isMainHidden"}},viewQueries:[{propertyName:"next",first:!0,predicate:["next"],emitDistinctChangesOnly:!1,descendants:!0,static:!0}],ngImport:a,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-jfUL:var(--gap);--background:#ccc;--background-SCOPED-IN-smart-menu-jfUL:var(--background);--contents-background:transparent;--contents-background-SCOPED-IN-smart-menu-jfUL:var(--contents-background);position:relative;justify-content:flex-start;gap:var(--gap-SCOPED-IN-smart-menu-jfUL);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;background:var(--background-SCOPED-IN-smart-menu-jfUL)}:host,:host .contents{display:flex;height:100%}:host .contents{max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;background:var(--contents-background-SCOPED-IN-smart-menu-jfUL)}:host .contents.menu{overflow:hidden;justify-content:flex-end}:host .contents.contents{overflow:visible;justify-content:flex-start}"],changeDetection:t.ChangeDetectionStrategy.OnPush}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(i,[{type:t.Component,args:[{selector:"frames-smart-menu",templateUrl:"./smart-menu.frame.html",styleUrls:["./smart-menu.frame.scss"],changeDetection:t.ChangeDetectionStrategy.OnPush}]}],null,{isMainHidden:[{type:t.HostBinding,args:["attr.is-main-hidden"]}],label:[{type:t.Input}],outlet:[{type:t.Input}],minNextWidth:[{type:t.Input}],next:[{type:t.ViewChild,args:["next",{static:!0}]}]});var r=function(){};r.ɵfac=function(e){return new(e||r)},r.ɵmod=t.ɵɵdefineNgModule({type:r}),r.ɵinj=t.ɵɵdefineInjector({imports:[[n.CommonModule]]}),("undefined"==typeof ngJitMode||ngJitMode)&&t.ɵɵsetNgModuleScope(r,{declarations:[i],imports:[n.CommonModule],exports:[i]}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(r,[{type:t.NgModule,args:[{declarations:[i],imports:[n.CommonModule],exports:[i]}]}],null,null),e.SmartMenuFrame=i,e.SmartMenuModule=r,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=ng-atomic-components-frames-smart-menu.umd.min.js.map

package/bundles/ng-atomic-components-molecules-date-input-field.umd.js

@@ -42,7 +42,7 @@
         return DateInputFieldMolecule;
     }());
     DateInputFieldMolecule.ɵfac = function DateInputFieldMolecule_Factory(t) { return new (t || DateInputFieldMolecule)(); };
-    DateInputFieldMolecule.ɵcmp = i0.ɵɵngDeclareComponent({ version: "11.2.14", type: DateInputFieldMolecule, selector: "molecules-date-input-field", inputs: { _control: ["control", "_control"], label: "label", placeholder: "placeholder", hint: "hint" }, host: { classAttribute: "molecule field" }, ngImport: i0__namespace, template: "<mat-form-field appearance=\"outline\">\n  <mat-label>{{ label }}</mat-label>\n  <input matInput [formControl]=\"control\" [placeholder]=\"placeholder\" [matDatepicker]=\"picker\">\n  <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <mat-datepicker #picker></mat-datepicker>\n  <mat-hint *ngIf=\"hint\">{{ hint }}</mat-hint>\n</mat-form-field>", styles: [":host{--horizontal-padding:16px;--horizontal-padding-SCOPED-IN-date-input-field-L70W:var(--horizontal-padding);display:block}:host,:host mat-form-field{width:100%}"], directives: [{ type: i1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i1.MatLabel, selector: "mat-label" }, { type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["tabIndex", "disabled", "for", "aria-label", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i1.MatSuffix, selector: "[matSuffix]" }, { type: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    DateInputFieldMolecule.ɵcmp = i0.ɵɵngDeclareComponent({ version: "11.2.14", type: DateInputFieldMolecule, selector: "molecules-date-input-field", inputs: { _control: ["control", "_control"], label: "label", placeholder: "placeholder", hint: "hint" }, host: { classAttribute: "molecule field" }, ngImport: i0__namespace, template: "<mat-form-field appearance=\"outline\">\n  <mat-label>{{ label }}</mat-label>\n  <input matInput [formControl]=\"control\" [placeholder]=\"placeholder\" [matDatepicker]=\"picker\">\n  <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <mat-datepicker #picker></mat-datepicker>\n  <mat-hint *ngIf=\"hint\">{{ hint }}</mat-hint>\n</mat-form-field>", styles: [":host{--horizontal-padding:16px;--horizontal-padding-SCOPED-IN-date-input-field-fIMQ:var(--horizontal-padding);display:block}:host,:host mat-form-field{width:100%}"], directives: [{ type: i1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i1.MatLabel, selector: "mat-label" }, { type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["tabIndex", "disabled", "for", "aria-label", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i1.MatSuffix, selector: "[matSuffix]" }, { type: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DateInputFieldMolecule, [{
                 type: i0.Component,

package/bundles/ng-atomic-components-molecules-date-input-field.umd.min.js

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@ngneat/reactive-forms"),require("rxjs/operators"),require("@angular/material/form-field"),require("@angular/material/input"),require("@angular/forms"),require("@angular/material/datepicker"),require("@angular/common"),require("@ng-atomic/common/utils")):"function"==typeof define&&define.amd?define("@ng-atomic/components/molecules/date-input-field",["exports","@angular/core","@ngneat/reactive-forms","rxjs/operators","@angular/material/form-field","@angular/material/input","@angular/forms","@angular/material/datepicker","@angular/common","@ng-atomic/common/utils"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["ng-atomic"]=e["ng-atomic"]||{},e["ng-atomic"].components=e["ng-atomic"].components||{},e["ng-atomic"].components.molecules=e["ng-atomic"].components.molecules||{},e["ng-atomic"].components.molecules["date-input-field"]={}),e.ng.core,e.reactiveForms,e.rxjs.operators,e.ng.material.formField,e.ng.material.input,e.ng.forms,e.ng.material.datepicker,e.ng.common,e.utils)}(this,(function(e,t,o,a,n,r,l,i,c,u){"use strict";function p(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(o){if("default"!==o){var a=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,a.get?a:{enumerable:!0,get:function(){return e[o]}})}})),t.default=e,Object.freeze(t)}var s=p(t),m=function(){function e(){this.control=new o.FormControl,this._control=new o.FormControl,this.label="",this.placeholder=""}return e.prototype.ngOnInit=function(){var e=this;this.control.valueChanges.pipe(a.filter((function(t){return e._control.value!==t}))).subscribe((function(t){return e._control.setValue(t)})),this._control.valueChanges.subscribe((function(t){return e.control.setValue(t)})),this.control.setValue(this._control.value)},e}();m.ɵfac=function(e){return new(e||m)},m.ɵcmp=t.ɵɵngDeclareComponent({version:"11.2.14",type:m,selector:"molecules-date-input-field",inputs:{_control:["control","_control"],label:"label",placeholder:"placeholder",hint:"hint"},host:{classAttribute:"molecule field"},ngImport:s,template:'<mat-form-field appearance="outline">\n  <mat-label>{{ label }}</mat-label>\n  <input matInput [formControl]="control" [placeholder]="placeholder" [matDatepicker]="picker">\n  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>\n  <mat-datepicker #picker></mat-datepicker>\n  <mat-hint *ngIf="hint">{{ hint }}</mat-hint>\n</mat-form-field>',styles:[":host{--horizontal-padding:16px;--horizontal-padding-SCOPED-IN-date-input-field-L70W:var(--horizontal-padding);display:block}:host,:host mat-form-field{width:100%}"],directives:[{type:n.MatFormField,selector:"mat-form-field",inputs:["color","floatLabel","appearance","hideRequiredMarker","hintLabel"],exportAs:["matFormField"]},{type:n.MatLabel,selector:"mat-label"},{type:r.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["id","disabled","required","type","value","readonly","placeholder","errorStateMatcher","aria-describedby"],exportAs:["matInput"]},{type:l.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{type:i.MatDatepickerInput,selector:"input[matDatepicker]",inputs:["matDatepicker","min","max","matDatepickerFilter"],exportAs:["matDatepickerInput"]},{type:l.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{type:l.FormControlDirective,selector:"[formControl]",inputs:["disabled","formControl","ngModel"],outputs:["ngModelChange"],exportAs:["ngForm"]},{type:i.MatDatepickerToggle,selector:"mat-datepicker-toggle",inputs:["tabIndex","disabled","for","aria-label","disableRipple"],exportAs:["matDatepickerToggle"]},{type:n.MatSuffix,selector:"[matSuffix]"},{type:i.MatDatepicker,selector:"mat-datepicker",exportAs:["matDatepicker"]},{type:c.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{type:n.MatHint,selector:"mat-hint",inputs:["align","id"]}],changeDetection:t.ChangeDetectionStrategy.OnPush}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(m,[{type:t.Component,args:[{selector:"molecules-date-input-field",templateUrl:"./date-input-field.molecule.html",styleUrls:["./date-input-field.molecule.scss"],changeDetection:t.ChangeDetectionStrategy.OnPush,host:{class:"molecule field"}}]}],null,{_control:[{type:t.Input,args:["control"]}],label:[{type:t.Input}],placeholder:[{type:t.Input}],hint:[{type:t.Input}]});var d=function(){};d.ɵfac=function(e){return new(e||d)},d.ɵmod=t.ɵɵdefineNgModule({type:d}),d.ɵinj=t.ɵɵdefineInjector({imports:[[c.CommonModule,l.ReactiveFormsModule,r.MatInputModule,i.MatDatepickerModule,u.MatDayjsDateModule]]}),("undefined"==typeof ngJitMode||ngJitMode)&&t.ɵɵsetNgModuleScope(d,{declarations:[m],imports:[c.CommonModule,l.ReactiveFormsModule,r.MatInputModule,i.MatDatepickerModule,u.MatDayjsDateModule],exports:[m]}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(d,[{type:t.NgModule,args:[{declarations:[m],imports:[c.CommonModule,l.ReactiveFormsModule,r.MatInputModule,i.MatDatepickerModule,u.MatDayjsDateModule],exports:[m]}]}],null,null),e.DateInputFieldModule=d,e.DateInputFieldMolecule=m,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@ngneat/reactive-forms"),require("rxjs/operators"),require("@angular/material/form-field"),require("@angular/material/input"),require("@angular/forms"),require("@angular/material/datepicker"),require("@angular/common"),require("@ng-atomic/common/utils")):"function"==typeof define&&define.amd?define("@ng-atomic/components/molecules/date-input-field",["exports","@angular/core","@ngneat/reactive-forms","rxjs/operators","@angular/material/form-field","@angular/material/input","@angular/forms","@angular/material/datepicker","@angular/common","@ng-atomic/common/utils"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["ng-atomic"]=e["ng-atomic"]||{},e["ng-atomic"].components=e["ng-atomic"].components||{},e["ng-atomic"].components.molecules=e["ng-atomic"].components.molecules||{},e["ng-atomic"].components.molecules["date-input-field"]={}),e.ng.core,e.reactiveForms,e.rxjs.operators,e.ng.material.formField,e.ng.material.input,e.ng.forms,e.ng.material.datepicker,e.ng.common,e.utils)}(this,(function(e,t,o,a,n,r,l,i,c,u){"use strict";function p(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(o){if("default"!==o){var a=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,a.get?a:{enumerable:!0,get:function(){return e[o]}})}})),t.default=e,Object.freeze(t)}var s=p(t),m=function(){function e(){this.control=new o.FormControl,this._control=new o.FormControl,this.label="",this.placeholder=""}return e.prototype.ngOnInit=function(){var e=this;this.control.valueChanges.pipe(a.filter((function(t){return e._control.value!==t}))).subscribe((function(t){return e._control.setValue(t)})),this._control.valueChanges.subscribe((function(t){return e.control.setValue(t)})),this.control.setValue(this._control.value)},e}();m.ɵfac=function(e){return new(e||m)},m.ɵcmp=t.ɵɵngDeclareComponent({version:"11.2.14",type:m,selector:"molecules-date-input-field",inputs:{_control:["control","_control"],label:"label",placeholder:"placeholder",hint:"hint"},host:{classAttribute:"molecule field"},ngImport:s,template:'<mat-form-field appearance="outline">\n  <mat-label>{{ label }}</mat-label>\n  <input matInput [formControl]="control" [placeholder]="placeholder" [matDatepicker]="picker">\n  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>\n  <mat-datepicker #picker></mat-datepicker>\n  <mat-hint *ngIf="hint">{{ hint }}</mat-hint>\n</mat-form-field>',styles:[":host{--horizontal-padding:16px;--horizontal-padding-SCOPED-IN-date-input-field-fIMQ:var(--horizontal-padding);display:block}:host,:host mat-form-field{width:100%}"],directives:[{type:n.MatFormField,selector:"mat-form-field",inputs:["color","floatLabel","appearance","hideRequiredMarker","hintLabel"],exportAs:["matFormField"]},{type:n.MatLabel,selector:"mat-label"},{type:r.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["id","disabled","required","type","value","readonly","placeholder","errorStateMatcher","aria-describedby"],exportAs:["matInput"]},{type:l.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{type:i.MatDatepickerInput,selector:"input[matDatepicker]",inputs:["matDatepicker","min","max","matDatepickerFilter"],exportAs:["matDatepickerInput"]},{type:l.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{type:l.FormControlDirective,selector:"[formControl]",inputs:["disabled","formControl","ngModel"],outputs:["ngModelChange"],exportAs:["ngForm"]},{type:i.MatDatepickerToggle,selector:"mat-datepicker-toggle",inputs:["tabIndex","disabled","for","aria-label","disableRipple"],exportAs:["matDatepickerToggle"]},{type:n.MatSuffix,selector:"[matSuffix]"},{type:i.MatDatepicker,selector:"mat-datepicker",exportAs:["matDatepicker"]},{type:c.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{type:n.MatHint,selector:"mat-hint",inputs:["align","id"]}],changeDetection:t.ChangeDetectionStrategy.OnPush}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(m,[{type:t.Component,args:[{selector:"molecules-date-input-field",templateUrl:"./date-input-field.molecule.html",styleUrls:["./date-input-field.molecule.scss"],changeDetection:t.ChangeDetectionStrategy.OnPush,host:{class:"molecule field"}}]}],null,{_control:[{type:t.Input,args:["control"]}],label:[{type:t.Input}],placeholder:[{type:t.Input}],hint:[{type:t.Input}]});var d=function(){};d.ɵfac=function(e){return new(e||d)},d.ɵmod=t.ɵɵdefineNgModule({type:d}),d.ɵinj=t.ɵɵdefineInjector({imports:[[c.CommonModule,l.ReactiveFormsModule,r.MatInputModule,i.MatDatepickerModule,u.MatDayjsDateModule]]}),("undefined"==typeof ngJitMode||ngJitMode)&&t.ɵɵsetNgModuleScope(d,{declarations:[m],imports:[c.CommonModule,l.ReactiveFormsModule,r.MatInputModule,i.MatDatepickerModule,u.MatDayjsDateModule],exports:[m]}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(d,[{type:t.NgModule,args:[{declarations:[m],imports:[c.CommonModule,l.ReactiveFormsModule,r.MatInputModule,i.MatDatepickerModule,u.MatDayjsDateModule],exports:[m]}]}],null,null),e.DateInputFieldModule=d,e.DateInputFieldMolecule=m,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=ng-atomic-components-molecules-date-input-field.umd.min.js.map

package/bundles/ng-atomic-components-molecules-select-input-field.umd.js

@@ -36,7 +36,7 @@
         return SelectInputFieldMolecule;
     }());
     SelectInputFieldMolecule.ɵfac = function SelectInputFieldMolecule_Factory(t) { return new (t || SelectInputFieldMolecule)(); };
-    SelectInputFieldMolecule.ɵcmp = i0.ɵɵngDeclareComponent({ version: "11.2.14", type: SelectInputFieldMolecule, selector: "molecules-select-input-field", inputs: { label: "label", control: "control", options: "options" }, host: { classAttribute: "molecule input-field" }, ngImport: i0__namespace, template: "<mat-form-field appearance=\"outline\">\n  <mat-label>{{ label }}</mat-label>\n  <mat-select [formControl]=\"control\">\n    <mat-option *ngFor=\"let option of options; trackBy value;\" [value]=\"option.value\">\n      {{ option.name }}\n    </mat-option>\n  </mat-select>\n</mat-form-field>", styles: [":host{--horizontal-padding:16px;--horizontal-padding-SCOPED-IN-select-input-field-adbS:var(--horizontal-padding);display:block}:host,:host mat-form-field{width:100%}"], directives: [{ type: i1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i1.MatLabel, selector: "mat-label" }, { type: i2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    SelectInputFieldMolecule.ɵcmp = i0.ɵɵngDeclareComponent({ version: "11.2.14", type: SelectInputFieldMolecule, selector: "molecules-select-input-field", inputs: { label: "label", control: "control", options: "options" }, host: { classAttribute: "molecule input-field field" }, ngImport: i0__namespace, template: "<mat-form-field appearance=\"outline\">\n  <mat-label>{{ label }}</mat-label>\n  <mat-select [formControl]=\"control\">\n    <mat-option *ngFor=\"let option of options; trackBy value;\" [value]=\"option.value\">\n      {{ option.name }}\n    </mat-option>\n  </mat-select>\n</mat-form-field>", styles: [":host{--horizontal-padding:16px;--horizontal-padding-SCOPED-IN-select-input-field-wGBb:var(--horizontal-padding);display:block}:host,:host mat-form-field{width:100%}"], directives: [{ type: i1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i1.MatLabel, selector: "mat-label" }, { type: i2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SelectInputFieldMolecule, [{
                 type: i0.Component,
@@ -45,7 +45,7 @@
                         templateUrl: './select-input-field.molecule.html',
                         styleUrls: ['./select-input-field.molecule.scss'],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        host: { class: 'molecule input-field' },
+                        host: { class: 'molecule input-field field' },
                     }]
             }], null, { label: [{
                     type: i0.Input

package/bundles/ng-atomic-components-molecules-select-input-field.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"ng-atomic-components-molecules-select-input-field.umd.js","sources":["../../../../libs/components/molecules/select-input-field/select-input-field.molecule.ts","../../../../libs/components/molecules/select-input-field/select-input-field.molecule.html","../../../../libs/components/molecules/select-input-field/select-input-field.module.ts","../../../../libs/components/molecules/select-input-field/ng-atomic-components-molecules-select-input-field.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { FormControl } from '@ngneat/reactive-forms';\n\ninterface Option<T> {\n  name: string;\n  value: T;\n}\n\n@Component({\n  selector: 'molecules-select-input-field',\n  templateUrl: './select-input-field.molecule.html',\n  styleUrls: ['./select-input-field.molecule.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {class: 'molecule input-field'},\n})\nexport class SelectInputFieldMolecule<T> {\n\n  @Input()\n  label: string = '';\n\n  @Input()\n  control = new FormControl<T>();\n\n  @Input()\n  options: Option<T>[] = [];\n\n  value = (item: Option<T>) => item?.value; \n\n}\n","<mat-form-field appearance=\"outline\">\n  <mat-label>{{ label }}</mat-label>\n  <mat-select [formControl]=\"control\">\n    <mat-option *ngFor=\"let option of options; trackBy value;\" [value]=\"option.value\">\n      {{ option.name }}\n    </mat-option>\n  </mat-select>\n</mat-form-field>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatSelectModule } from '@angular/material/select';\n\nimport { SelectInputFieldMolecule } from './select-input-field.molecule';\n\n\n\n@NgModule({\n  declarations: [\n    SelectInputFieldMolecule\n  ],\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    // Materials\n    MatSelectModule,\n  ],\n  exports: [\n    SelectInputFieldMolecule\n  ]\n})\nexport class SelectInputFieldModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["FormControl","Component","ChangeDetectionStrategy","Input","CommonModule","ReactiveFormsModule","MatSelectModule","NgModule"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAQA;YAUE,UAAK,GAAW,EAAE,CAAC;YAGnB,YAAO,GAAG,IAAIA,yBAAW,EAAK,CAAC;YAG/B,YAAO,GAAgB,EAAE,CAAC;YAE1B,UAAK,GAAG,UAAC,IAAe,IAAK,OAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,GAAA,CAAC;SAE1C;;;oGAbY,wBAAwB;wFAAxB,wBAAwB,qMCfrC,qSAOiB;;gFDQJ,wBAAwB;sBAPpCC,YAAS;uBAAC;wBACT,QAAQ,EAAE,8BAA8B;wBACxC,WAAW,EAAE,oCAAoC;wBACjD,SAAS,EAAE,CAAC,oCAAoC,CAAC;wBACjD,eAAe,EAAEC,0BAAuB,CAAC,MAAM;wBAC/C,IAAI,EAAE,EAAC,KAAK,EAAE,sBAAsB,EAAC;qBACtC;wBAIC,KAAK;0BADJC,QAAK;oBAIN,OAAO;0BADNA,QAAK;oBAIN,OAAO;0BADNA,QAAK;;;;;QEAR;;;;gGAAa,sBAAsB;8DAAtB,sBAAsB;kEAVxB;gBACPC,eAAY;gBACZC,sBAAmB;;gBAEnBC,kBAAe;aAChB;;iFAKU,sBAAsB,mBAZ/B,wBAAwB,aAGxBF,eAAY;gBACZC,sBAAmB;;gBAEnBC,kBAAe,aAGf,wBAAwB;;;gFAGf,sBAAsB;sBAdlCC,WAAQ;uBAAC;wBACR,YAAY,EAAE;4BACZ,wBAAwB;yBACzB;wBACD,OAAO,EAAE;4BACPH,eAAY;4BACZC,sBAAmB;;4BAEnBC,kBAAe;yBAChB;wBACD,OAAO,EAAE;4BACP,wBAAwB;yBACzB;qBACF;;;;ICtBD;;;;;;;;;;;;;"}
+{"version":3,"file":"ng-atomic-components-molecules-select-input-field.umd.js","sources":["../../../../libs/components/molecules/select-input-field/select-input-field.molecule.ts","../../../../libs/components/molecules/select-input-field/select-input-field.molecule.html","../../../../libs/components/molecules/select-input-field/select-input-field.module.ts","../../../../libs/components/molecules/select-input-field/ng-atomic-components-molecules-select-input-field.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { FormControl } from '@ngneat/reactive-forms';\n\nexport interface Option<T> {\n  name: string;\n  value: T;\n}\n\n@Component({\n  selector: 'molecules-select-input-field',\n  templateUrl: './select-input-field.molecule.html',\n  styleUrls: ['./select-input-field.molecule.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {class: 'molecule input-field field'},\n})\nexport class SelectInputFieldMolecule<T> {\n\n  @Input()\n  label: string = '';\n\n  @Input()\n  control = new FormControl<T>();\n\n  @Input()\n  options: Option<T>[] = [];\n\n  value = (item: Option<T>) => item?.value; \n\n}\n","<mat-form-field appearance=\"outline\">\n  <mat-label>{{ label }}</mat-label>\n  <mat-select [formControl]=\"control\">\n    <mat-option *ngFor=\"let option of options; trackBy value;\" [value]=\"option.value\">\n      {{ option.name }}\n    </mat-option>\n  </mat-select>\n</mat-form-field>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatSelectModule } from '@angular/material/select';\n\nimport { SelectInputFieldMolecule } from './select-input-field.molecule';\n\n\n\n@NgModule({\n  declarations: [\n    SelectInputFieldMolecule\n  ],\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    // Materials\n    MatSelectModule,\n  ],\n  exports: [\n    SelectInputFieldMolecule\n  ]\n})\nexport class SelectInputFieldModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["FormControl","Component","ChangeDetectionStrategy","Input","CommonModule","ReactiveFormsModule","MatSelectModule","NgModule"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAQA;YAUE,UAAK,GAAW,EAAE,CAAC;YAGnB,YAAO,GAAG,IAAIA,yBAAW,EAAK,CAAC;YAG/B,YAAO,GAAgB,EAAE,CAAC;YAE1B,UAAK,GAAG,UAAC,IAAe,IAAK,OAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,GAAA,CAAC;SAE1C;;;oGAbY,wBAAwB;wFAAxB,wBAAwB,2MCfrC,qSAOiB;;gFDQJ,wBAAwB;sBAPpCC,YAAS;uBAAC;wBACT,QAAQ,EAAE,8BAA8B;wBACxC,WAAW,EAAE,oCAAoC;wBACjD,SAAS,EAAE,CAAC,oCAAoC,CAAC;wBACjD,eAAe,EAAEC,0BAAuB,CAAC,MAAM;wBAC/C,IAAI,EAAE,EAAC,KAAK,EAAE,4BAA4B,EAAC;qBAC5C;wBAIC,KAAK;0BADJC,QAAK;oBAIN,OAAO;0BADNA,QAAK;oBAIN,OAAO;0BADNA,QAAK;;;;;QEAR;;;;gGAAa,sBAAsB;8DAAtB,sBAAsB;kEAVxB;gBACPC,eAAY;gBACZC,sBAAmB;;gBAEnBC,kBAAe;aAChB;;iFAKU,sBAAsB,mBAZ/B,wBAAwB,aAGxBF,eAAY;gBACZC,sBAAmB;;gBAEnBC,kBAAe,aAGf,wBAAwB;;;gFAGf,sBAAsB;sBAdlCC,WAAQ;uBAAC;wBACR,YAAY,EAAE;4BACZ,wBAAwB;yBACzB;wBACD,OAAO,EAAE;4BACPH,eAAY;4BACZC,sBAAmB;;4BAEnBC,kBAAe;yBAChB;wBACD,OAAO,EAAE;4BACP,wBAAwB;yBACzB;qBACF;;;;ICtBD;;;;;;;;;;;;;"}

package/bundles/ng-atomic-components-molecules-select-input-field.umd.min.js

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms"),require("@angular/material/select"),require("@ngneat/reactive-forms"),require("@angular/material/form-field"),require("@angular/material/core")):"function"==typeof define&&define.amd?define("@ng-atomic/components/molecules/select-input-field",["exports","@angular/core","@angular/common","@angular/forms","@angular/material/select","@ngneat/reactive-forms","@angular/material/form-field","@angular/material/core"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["ng-atomic"]=e["ng-atomic"]||{},e["ng-atomic"].components=e["ng-atomic"].components||{},e["ng-atomic"].components.molecules=e["ng-atomic"].components.molecules||{},e["ng-atomic"].components.molecules["select-input-field"]={}),e.ng.core,e.ng.common,e.ng.forms,e.ng.material.select,e.reactiveForms,e.ng.material.formField,e.ng.material.core)}(this,(function(e,t,o,n,l,r,a,i){"use strict";function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(o){if("default"!==o){var n=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,n.get?n:{enumerable:!0,get:function(){return e[o]}})}})),t.default=e,Object.freeze(t)}var s=c(t),u=function(){this.label="",this.control=new r.FormControl,this.options=[],this.value=function(e){return null==e?void 0:e.value}};u.ɵfac=function(e){return new(e||u)},u.ɵcmp=t.ɵɵngDeclareComponent({version:"11.2.14",type:u,selector:"molecules-select-input-field",inputs:{label:"label",control:"control",options:"options"},host:{classAttribute:"molecule input-field"},ngImport:s,template:'<mat-form-field appearance="outline">\n  <mat-label>{{ label }}</mat-label>\n  <mat-select [formControl]="control">\n    <mat-option *ngFor="let option of options; trackBy value;" [value]="option.value">\n      {{ option.name }}\n    </mat-option>\n  </mat-select>\n</mat-form-field>',styles:[":host{--horizontal-padding:16px;--horizontal-padding-SCOPED-IN-select-input-field-adbS:var(--horizontal-padding);display:block}:host,:host mat-form-field{width:100%}"],directives:[{type:a.MatFormField,selector:"mat-form-field",inputs:["color","floatLabel","appearance","hideRequiredMarker","hintLabel"],exportAs:["matFormField"]},{type:a.MatLabel,selector:"mat-label"},{type:l.MatSelect,selector:"mat-select",inputs:["disabled","disableRipple","tabIndex"],exportAs:["matSelect"]},{type:n.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{type:n.FormControlDirective,selector:"[formControl]",inputs:["disabled","formControl","ngModel"],outputs:["ngModelChange"],exportAs:["ngForm"]},{type:o.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{type:i.MatOption,selector:"mat-option",exportAs:["matOption"]}],changeDetection:t.ChangeDetectionStrategy.OnPush}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(u,[{type:t.Component,args:[{selector:"molecules-select-input-field",templateUrl:"./select-input-field.molecule.html",styleUrls:["./select-input-field.molecule.scss"],changeDetection:t.ChangeDetectionStrategy.OnPush,host:{class:"molecule input-field"}}]}],null,{label:[{type:t.Input}],control:[{type:t.Input}],options:[{type:t.Input}]});var m=function(){};m.ɵfac=function(e){return new(e||m)},m.ɵmod=t.ɵɵdefineNgModule({type:m}),m.ɵinj=t.ɵɵdefineInjector({imports:[[o.CommonModule,n.ReactiveFormsModule,l.MatSelectModule]]}),("undefined"==typeof ngJitMode||ngJitMode)&&t.ɵɵsetNgModuleScope(m,{declarations:[u],imports:[o.CommonModule,n.ReactiveFormsModule,l.MatSelectModule],exports:[u]}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(m,[{type:t.NgModule,args:[{declarations:[u],imports:[o.CommonModule,n.ReactiveFormsModule,l.MatSelectModule],exports:[u]}]}],null,null),e.SelectInputFieldModule=m,e.SelectInputFieldMolecule=u,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms"),require("@angular/material/select"),require("@ngneat/reactive-forms"),require("@angular/material/form-field"),require("@angular/material/core")):"function"==typeof define&&define.amd?define("@ng-atomic/components/molecules/select-input-field",["exports","@angular/core","@angular/common","@angular/forms","@angular/material/select","@ngneat/reactive-forms","@angular/material/form-field","@angular/material/core"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["ng-atomic"]=e["ng-atomic"]||{},e["ng-atomic"].components=e["ng-atomic"].components||{},e["ng-atomic"].components.molecules=e["ng-atomic"].components.molecules||{},e["ng-atomic"].components.molecules["select-input-field"]={}),e.ng.core,e.ng.common,e.ng.forms,e.ng.material.select,e.reactiveForms,e.ng.material.formField,e.ng.material.core)}(this,(function(e,t,o,n,l,r,a,i){"use strict";function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(o){if("default"!==o){var n=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,n.get?n:{enumerable:!0,get:function(){return e[o]}})}})),t.default=e,Object.freeze(t)}var s=c(t),u=function(){this.label="",this.control=new r.FormControl,this.options=[],this.value=function(e){return null==e?void 0:e.value}};u.ɵfac=function(e){return new(e||u)},u.ɵcmp=t.ɵɵngDeclareComponent({version:"11.2.14",type:u,selector:"molecules-select-input-field",inputs:{label:"label",control:"control",options:"options"},host:{classAttribute:"molecule input-field field"},ngImport:s,template:'<mat-form-field appearance="outline">\n  <mat-label>{{ label }}</mat-label>\n  <mat-select [formControl]="control">\n    <mat-option *ngFor="let option of options; trackBy value;" [value]="option.value">\n      {{ option.name }}\n    </mat-option>\n  </mat-select>\n</mat-form-field>',styles:[":host{--horizontal-padding:16px;--horizontal-padding-SCOPED-IN-select-input-field-wGBb:var(--horizontal-padding);display:block}:host,:host mat-form-field{width:100%}"],directives:[{type:a.MatFormField,selector:"mat-form-field",inputs:["color","floatLabel","appearance","hideRequiredMarker","hintLabel"],exportAs:["matFormField"]},{type:a.MatLabel,selector:"mat-label"},{type:l.MatSelect,selector:"mat-select",inputs:["disabled","disableRipple","tabIndex"],exportAs:["matSelect"]},{type:n.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{type:n.FormControlDirective,selector:"[formControl]",inputs:["disabled","formControl","ngModel"],outputs:["ngModelChange"],exportAs:["ngForm"]},{type:o.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{type:i.MatOption,selector:"mat-option",exportAs:["matOption"]}],changeDetection:t.ChangeDetectionStrategy.OnPush}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(u,[{type:t.Component,args:[{selector:"molecules-select-input-field",templateUrl:"./select-input-field.molecule.html",styleUrls:["./select-input-field.molecule.scss"],changeDetection:t.ChangeDetectionStrategy.OnPush,host:{class:"molecule input-field field"}}]}],null,{label:[{type:t.Input}],control:[{type:t.Input}],options:[{type:t.Input}]});var m=function(){};m.ɵfac=function(e){return new(e||m)},m.ɵmod=t.ɵɵdefineNgModule({type:m}),m.ɵinj=t.ɵɵdefineInjector({imports:[[o.CommonModule,n.ReactiveFormsModule,l.MatSelectModule]]}),("undefined"==typeof ngJitMode||ngJitMode)&&t.ɵɵsetNgModuleScope(m,{declarations:[u],imports:[o.CommonModule,n.ReactiveFormsModule,l.MatSelectModule],exports:[u]}),("undefined"==typeof ngDevMode||ngDevMode)&&t.ɵsetClassMetadata(m,[{type:t.NgModule,args:[{declarations:[u],imports:[o.CommonModule,n.ReactiveFormsModule,l.MatSelectModule],exports:[u]}]}],null,null),e.SelectInputFieldModule=m,e.SelectInputFieldMolecule=u,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=ng-atomic-components-molecules-select-input-field.umd.min.js.map

package/bundles/ng-atomic-components-molecules-select-input-field.umd.min.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../libs/components/molecules/select-input-field/select-input-field.molecule.ts","../../../../libs/components/molecules/select-input-field/select-input-field.molecule.html","../../../../libs/components/molecules/select-input-field/select-input-field.module.ts"],"names":["this","label","control","FormControl","options","value","item","SelectInputFieldMolecule","selector","inputs","host","classAttribute","ngImport","i0__namespace","template","styles","directives","type","i1","MatFormField","exportAs","MatLabel","i2","MatSelect","i3","NgControlStatus","FormControlDirective","outputs","i4","NgForOf","i5","MatOption","changeDetection","i0","ChangeDetectionStrategy","OnPush","Component","templateUrl","styleUrls","class","Input","SelectInputFieldModule","CommonModule","ReactiveFormsModule","MatSelectModule","declarations","imports","exports","NgModule"],"mappings":"oyCAQA,WAUEA,KAAAC,MAAgB,GAGhBD,KAAAE,QAAU,IAAIC,EAAAA,YAGdH,KAAAI,QAAuB,GAEvBJ,KAAAK,MAAQ,SAACC,GAAoB,OAAAA,MAAAA,OAAI,EAAJA,EAAMD,yCAXxBE,0DAAAA,EAAwBC,SAAA,+BAAAC,OAAA,CAAAR,MAAA,QAAAC,QAAA,UAAAE,QAAA,WAAAM,KAAA,CAAAC,eAAA,wBAAAC,SAAAC,EAAAC,SCfrC,8RAOiBC,OAAA,CAAA,yKAAAC,WAAA,CAAA,CAAAC,KAAAC,EAAAC,aAAAX,SAAA,iBAAAC,OAAA,CAAA,QAAA,aAAA,aAAA,qBAAA,aAAAW,SAAA,CAAA,iBAAA,CAAAH,KAAAC,EAAAG,SAAAb,SAAA,aAAA,CAAAS,KAAAK,EAAAC,UAAAf,SAAA,aAAAC,OAAA,CAAA,WAAA,gBAAA,YAAAW,SAAA,CAAA,cAAA,CAAAH,KAAAO,EAAAC,gBAAAjB,SAAA,6CAAA,CAAAS,KAAAO,EAAAE,qBAAAlB,SAAA,gBAAAC,OAAA,CAAA,WAAA,cAAA,WAAAkB,QAAA,CAAA,iBAAAP,SAAA,CAAA,WAAA,CAAAH,KAAAW,EAAAC,QAAArB,SAAA,mBAAAC,OAAA,CAAA,UAAA,eAAA,kBAAA,CAAAQ,KAAAa,EAAAC,UAAAvB,SAAA,aAAAY,SAAA,CAAA,eAAAY,gBAAAC,EAAAC,wBAAAC,yEDQJ5B,EAAwB,CAAA,MAPpC6B,EAAAA,gBAAU,CACT5B,SAAU,+BACV6B,YAAa,qCACbC,UAAW,CAAC,sCACZN,gBAAiBE,EAAAA,wBAAwBC,OACzCzB,KAAM,CAAC6B,MAAO,kCAKdtC,MAAK,CAAA,MADJuC,EAAAA,QAIDtC,QAAO,CAAA,MADNsC,EAAAA,QAIDpC,QAAO,CAAA,MADNoC,EAAAA,gBEAH,8CAAaC,oCAAAA,wCAVF,CACPC,EAAAA,aACAC,EAAAA,oBAEAC,EAAAA,qFAMSH,EAAsB,CAAAI,aAAA,CAZ/BtC,GAAwBuC,QAAA,CAGxBJ,EAAAA,aACAC,EAAAA,oBAEAC,EAAAA,iBAAeG,QAAA,CAGfxC,qEAGSkC,EAAsB,CAAA,MAdlCO,EAAAA,eAAS,CACRH,aAAc,CACZtC,GAEFuC,QAAS,CACPJ,EAAAA,aACAC,EAAAA,oBAEAC,EAAAA,iBAEFG,QAAS,CACPxC","sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { FormControl } from '@ngneat/reactive-forms';\n\ninterface Option<T> {\n  name: string;\n  value: T;\n}\n\n@Component({\n  selector: 'molecules-select-input-field',\n  templateUrl: './select-input-field.molecule.html',\n  styleUrls: ['./select-input-field.molecule.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {class: 'molecule input-field'},\n})\nexport class SelectInputFieldMolecule<T> {\n\n  @Input()\n  label: string = '';\n\n  @Input()\n  control = new FormControl<T>();\n\n  @Input()\n  options: Option<T>[] = [];\n\n  value = (item: Option<T>) => item?.value; \n\n}\n","<mat-form-field appearance=\"outline\">\n  <mat-label>{{ label }}</mat-label>\n  <mat-select [formControl]=\"control\">\n    <mat-option *ngFor=\"let option of options; trackBy value;\" [value]=\"option.value\">\n      {{ option.name }}\n    </mat-option>\n  </mat-select>\n</mat-form-field>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatSelectModule } from '@angular/material/select';\n\nimport { SelectInputFieldMolecule } from './select-input-field.molecule';\n\n\n\n@NgModule({\n  declarations: [\n    SelectInputFieldMolecule\n  ],\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    // Materials\n    MatSelectModule,\n  ],\n  exports: [\n    SelectInputFieldMolecule\n  ]\n})\nexport class SelectInputFieldModule { }\n"]}
+{"version":3,"sources":["../../../../libs/components/molecules/select-input-field/select-input-field.molecule.ts","../../../../libs/components/molecules/select-input-field/select-input-field.molecule.html","../../../../libs/components/molecules/select-input-field/select-input-field.module.ts"],"names":["this","label","control","FormControl","options","value","item","SelectInputFieldMolecule","selector","inputs","host","classAttribute","ngImport","i0__namespace","template","styles","directives","type","i1","MatFormField","exportAs","MatLabel","i2","MatSelect","i3","NgControlStatus","FormControlDirective","outputs","i4","NgForOf","i5","MatOption","changeDetection","i0","ChangeDetectionStrategy","OnPush","Component","templateUrl","styleUrls","class","Input","SelectInputFieldModule","CommonModule","ReactiveFormsModule","MatSelectModule","declarations","imports","exports","NgModule"],"mappings":"oyCAQA,WAUEA,KAAAC,MAAgB,GAGhBD,KAAAE,QAAU,IAAIC,EAAAA,YAGdH,KAAAI,QAAuB,GAEvBJ,KAAAK,MAAQ,SAACC,GAAoB,OAAAA,MAAAA,OAAI,EAAJA,EAAMD,yCAXxBE,0DAAAA,EAAwBC,SAAA,+BAAAC,OAAA,CAAAR,MAAA,QAAAC,QAAA,UAAAE,QAAA,WAAAM,KAAA,CAAAC,eAAA,8BAAAC,SAAAC,EAAAC,SCfrC,8RAOiBC,OAAA,CAAA,yKAAAC,WAAA,CAAA,CAAAC,KAAAC,EAAAC,aAAAX,SAAA,iBAAAC,OAAA,CAAA,QAAA,aAAA,aAAA,qBAAA,aAAAW,SAAA,CAAA,iBAAA,CAAAH,KAAAC,EAAAG,SAAAb,SAAA,aAAA,CAAAS,KAAAK,EAAAC,UAAAf,SAAA,aAAAC,OAAA,CAAA,WAAA,gBAAA,YAAAW,SAAA,CAAA,cAAA,CAAAH,KAAAO,EAAAC,gBAAAjB,SAAA,6CAAA,CAAAS,KAAAO,EAAAE,qBAAAlB,SAAA,gBAAAC,OAAA,CAAA,WAAA,cAAA,WAAAkB,QAAA,CAAA,iBAAAP,SAAA,CAAA,WAAA,CAAAH,KAAAW,EAAAC,QAAArB,SAAA,mBAAAC,OAAA,CAAA,UAAA,eAAA,kBAAA,CAAAQ,KAAAa,EAAAC,UAAAvB,SAAA,aAAAY,SAAA,CAAA,eAAAY,gBAAAC,EAAAC,wBAAAC,yEDQJ5B,EAAwB,CAAA,MAPpC6B,EAAAA,gBAAU,CACT5B,SAAU,+BACV6B,YAAa,qCACbC,UAAW,CAAC,sCACZN,gBAAiBE,EAAAA,wBAAwBC,OACzCzB,KAAM,CAAC6B,MAAO,wCAKdtC,MAAK,CAAA,MADJuC,EAAAA,QAIDtC,QAAO,CAAA,MADNsC,EAAAA,QAIDpC,QAAO,CAAA,MADNoC,EAAAA,gBEAH,8CAAaC,oCAAAA,wCAVF,CACPC,EAAAA,aACAC,EAAAA,oBAEAC,EAAAA,qFAMSH,EAAsB,CAAAI,aAAA,CAZ/BtC,GAAwBuC,QAAA,CAGxBJ,EAAAA,aACAC,EAAAA,oBAEAC,EAAAA,iBAAeG,QAAA,CAGfxC,qEAGSkC,EAAsB,CAAA,MAdlCO,EAAAA,eAAS,CACRH,aAAc,CACZtC,GAEFuC,QAAS,CACPJ,EAAAA,aACAC,EAAAA,oBAEAC,EAAAA,iBAEFG,QAAS,CACPxC","sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { FormControl } from '@ngneat/reactive-forms';\n\nexport interface Option<T> {\n  name: string;\n  value: T;\n}\n\n@Component({\n  selector: 'molecules-select-input-field',\n  templateUrl: './select-input-field.molecule.html',\n  styleUrls: ['./select-input-field.molecule.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {class: 'molecule input-field field'},\n})\nexport class SelectInputFieldMolecule<T> {\n\n  @Input()\n  label: string = '';\n\n  @Input()\n  control = new FormControl<T>();\n\n  @Input()\n  options: Option<T>[] = [];\n\n  value = (item: Option<T>) => item?.value; \n\n}\n","<mat-form-field appearance=\"outline\">\n  <mat-label>{{ label }}</mat-label>\n  <mat-select [formControl]=\"control\">\n    <mat-option *ngFor=\"let option of options; trackBy value;\" [value]=\"option.value\">\n      {{ option.name }}\n    </mat-option>\n  </mat-select>\n</mat-form-field>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatSelectModule } from '@angular/material/select';\n\nimport { SelectInputFieldMolecule } from './select-input-field.molecule';\n\n\n\n@NgModule({\n  declarations: [\n    SelectInputFieldMolecule\n  ],\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    // Materials\n    MatSelectModule,\n  ],\n  exports: [\n    SelectInputFieldMolecule\n  ]\n})\nexport class SelectInputFieldModule { }\n"]}