@ng-atomic/components 5.6.0 → 5.7.0

package/esm2020/atoms/icon/icon.atom.mjs

@@ -17,13 +17,13 @@ export class IconAtom {
     }
 }
 IconAtom.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: IconAtom, deps: [{ token: i1.MatIconRegistry }], target: i0.ɵɵFactoryTarget.Component });
-IconAtom.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: IconAtom, isStandalone: true, selector: "atoms-icon", inputs: { name: "name", color: "color" }, host: { properties: { "style.--color": "this.color" } }, ngImport: i0, template: "<mat-icon\n  *ngIf=\"hasSvgIcon$ | async\"\n  [svgIcon]=\"name$ | async\"\n></mat-icon>\n<mat-icon\n  *ngIf=\"!(hasSvgIcon$ | async)\"\n>{{ name$ | async }}</mat-icon>\n", styles: [":host{display:block;--color: inherit;--color-SCOPED-IN-icon-a0v1: var(--color)}:host mat-icon{color:var(--color-SCOPED-IN-icon-a0v1)}:host mat-icon ::ng-deep svg .filled{transition:fill .5s;fill:var(--color-SCOPED-IN-icon-a0v1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IconAtom.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: IconAtom, isStandalone: true, selector: "atoms-icon", inputs: { name: "name", color: "color" }, host: { properties: { "style.--color": "this.color" } }, ngImport: i0, template: "<mat-icon\n  *ngIf=\"hasSvgIcon$ | async\"\n  [svgIcon]=\"name$ | async\"\n></mat-icon>\n<mat-icon\n  *ngIf=\"!(hasSvgIcon$ | async)\"\n>{{ name$ | async }}</mat-icon>\n", styles: [":host{display:block;--color: inherit;--color-SCOPED-IN-icon-9hRF: var(--color)}:host mat-icon{color:var(--color-SCOPED-IN-icon-9hRF)}:host mat-icon ::ng-deep svg .filled{transition:fill .5s;fill:var(--color-SCOPED-IN-icon-9hRF)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: IconAtom, decorators: [{
             type: Component,
             args: [{ selector: 'atoms-icon', standalone: true, imports: [
                         CommonModule,
                         MatIconModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-icon\n  *ngIf=\"hasSvgIcon$ | async\"\n  [svgIcon]=\"name$ | async\"\n></mat-icon>\n<mat-icon\n  *ngIf=\"!(hasSvgIcon$ | async)\"\n>{{ name$ | async }}</mat-icon>\n", styles: [":host{display:block;--color: inherit;--color-SCOPED-IN-icon-a0v1: var(--color)}:host mat-icon{color:var(--color-SCOPED-IN-icon-a0v1)}:host mat-icon ::ng-deep svg .filled{transition:fill .5s;fill:var(--color-SCOPED-IN-icon-a0v1)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-icon\n  *ngIf=\"hasSvgIcon$ | async\"\n  [svgIcon]=\"name$ | async\"\n></mat-icon>\n<mat-icon\n  *ngIf=\"!(hasSvgIcon$ | async)\"\n>{{ name$ | async }}</mat-icon>\n", styles: [":host{display:block;--color: inherit;--color-SCOPED-IN-icon-9hRF: var(--color)}:host mat-icon{color:var(--color-SCOPED-IN-icon-9hRF)}:host mat-icon ::ng-deep svg .filled{transition:fill .5s;fill:var(--color-SCOPED-IN-icon-9hRF)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatIconRegistry }]; }, propDecorators: { name: [{
                 type: Input
             }], color: [{

package/esm2020/extras/editor/editor.component.mjs

@@ -26,16 +26,16 @@ export class EditorComponent {
     }
 }
 EditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: EditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: EditorComponent, isStandalone: true, selector: "extras-editor", inputs: { state: "state" }, viewQueries: [{ propertyName: "_editor", first: true, predicate: ["editor"], descendants: true, static: true }], ngImport: i0, template: "<div #editor></div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: EditorComponent, isStandalone: true, selector: "extras-editor", inputs: { state: "state" }, viewQueries: [{ propertyName: "_editor", first: true, predicate: ["editor"], descendants: true, static: true }], ngImport: i0, template: `<div #editor></div>`, isInline: true, styles: [":host{display:block}:host{width:100%;height:100%}:host div{width:100%;height:100%}:host div ::ng-deep>.cm-editor{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: EditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'extras-editor', standalone: true, imports: [
                         CommonModule
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #editor></div>\n", styles: [":host{display:block}\n"] }]
+                    ], template: `<div #editor></div>`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}:host{width:100%;height:100%}:host div{width:100%;height:100%}:host div ::ng-deep>.cm-editor{width:100%;height:100%}\n"] }]
         }], propDecorators: { state: [{
                 type: Input
             }], _editor: [{
                 type: ViewChild,
                 args: ['editor', { static: true }]
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWRpdG9yLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL0BuZy1hdG9taWMvY29tcG9uZW50cy9zcmMvZXh0cmFzL2VkaXRvci9lZGl0b3IuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvQG5nLWF0b21pYy9jb21wb25lbnRzL3NyYy9leHRyYXMvZWRpdG9yL2VkaXRvci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNqRyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFDaEQsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLFlBQVksQ0FBQztBQUN4QyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sTUFBTSxDQUFDOztBQVlyQyxNQUFNLE9BQU8sZUFBZTtJQVY1QjtRQVltQixXQUFNLEdBQUcsSUFBSSxhQUFhLENBQWMsQ0FBQyxDQUFDLENBQUM7S0EwQjdEO0lBeEJDLElBQ0ksS0FBSyxDQUFDLEtBQXlCO1FBQ2pDLElBQUksQ0FBQyxLQUFLO1lBQUUsT0FBTztRQUNuQixJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUMxQixDQUFDO0lBTUQsS0FBSyxDQUFDLFFBQVEsS0FBb0IsQ0FBQztJQUVuQyxLQUFLLENBQUMsZUFBZTtRQUNuQixJQUFJLENBQUMsTUFBTSxDQUFDLFNBQVMsQ0FBQyxDQUFDLEtBQUssRUFBRSxFQUFFO1lBQzlCLElBQUksSUFBSSxDQUFDLE1BQU0sRUFBRTtnQkFDZixJQUFJLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FDbEIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLEVBQUMsR0FBRyxLQUFLLEVBQUMsQ0FBQyxFQUNwQyxFQUFDLE9BQU8sRUFBRSxFQUFFLElBQUksRUFBRSxDQUFDLEVBQUUsRUFBRSxFQUFFLElBQUksQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxNQUFNLEVBQUUsTUFBTSxFQUFFLEtBQUssQ0FBQyxHQUFHLENBQUMsUUFBUSxFQUFFLEVBQUUsRUFBQyxDQUN2RixDQUFDO2FBQ0g7aUJBQU07Z0JBQ0wsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLFVBQVUsQ0FBQyxFQUFDLEtBQUssRUFBRSxNQUFNLEVBQUUsSUFBSSxDQUFDLE9BQU8sQ0FBQyxhQUFhLEVBQUMsQ0FBQyxDQUFDO2FBQzNFO1FBQ0gsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDOzs0R0EzQlUsZUFBZTtnR0FBZixlQUFlLHNOQ2hCNUIsdUJBQ0EsK0VEU0ksWUFBWTsyRkFNSCxlQUFlO2tCQVYzQixTQUFTOytCQUNFLGVBQWUsY0FDYixJQUFJLFdBQ1A7d0JBQ1AsWUFBWTtxQkFDYixtQkFHZ0IsdUJBQXVCLENBQUMsTUFBTTs4QkFPM0MsS0FBSztzQkFEUixLQUFLO2dCQU9FLE9BQU87c0JBRGQsU0FBUzt1QkFBQyxRQUFRLEVBQUUsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIEVsZW1lbnRSZWYsIElucHV0LCBWaWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEVkaXRvclN0YXRlIH0gZnJvbSAnQGNvZGVtaXJyb3Ivc3RhdGUnO1xuaW1wb3J0IHsgRWRpdG9yVmlldyB9IGZyb20gJ2NvZGVtaXJyb3InO1xuaW1wb3J0IHsgUmVwbGF5U3ViamVjdCB9IGZyb20gJ3J4anMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdleHRyYXMtZWRpdG9yJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW1xuICAgIENvbW1vbk1vZHVsZVxuICBdLFxuICB0ZW1wbGF0ZVVybDogJy4vZWRpdG9yLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vZWRpdG9yLmNvbXBvbmVudC5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIEVkaXRvckNvbXBvbmVudCB7XG5cbiAgcHJpdmF0ZSByZWFkb25seSBzdGF0ZSQgPSBuZXcgUmVwbGF5U3ViamVjdDxFZGl0b3JTdGF0ZT4oMSk7XG5cbiAgQElucHV0KClcbiAgc2V0IHN0YXRlKHZhbHVlOiBFZGl0b3JTdGF0ZSB8IG51bGwpIHtcbiAgICBpZiAoIXZhbHVlKSByZXR1cm47XG4gICAgdGhpcy5zdGF0ZSQubmV4dCh2YWx1ZSk7XG4gIH1cblxuICBAVmlld0NoaWxkKCdlZGl0b3InLCB7IHN0YXRpYzogdHJ1ZSB9KVxuICBwcml2YXRlIF9lZGl0b3IhOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50PjtcbiAgcHJpdmF0ZSBlZGl0b3IhOiBFZGl0b3JWaWV3O1xuXG4gIGFzeW5jIG5nT25Jbml0KCk6IFByb21pc2U8dm9pZD4geyB9XG5cbiAgYXN5bmMgbmdBZnRlclZpZXdJbml0KCkge1xuICAgIHRoaXMuc3RhdGUkLnN1YnNjcmliZSgoc3RhdGUpID0+IHtcbiAgICAgIGlmICh0aGlzLmVkaXRvcikge1xuICAgICAgICB0aGlzLmVkaXRvci5kaXNwYXRjaChcbiAgICAgICAgICB0aGlzLmVkaXRvci5zdGF0ZS51cGRhdGUoey4uLnN0YXRlfSksXG4gICAgICAgICAge2NoYW5nZXM6IHsgZnJvbTogMCwgdG86IHRoaXMuZWRpdG9yLnN0YXRlLmRvYy5sZW5ndGgsIGluc2VydDogc3RhdGUuZG9jLnRvU3RyaW5nKCkgfX0sXG4gICAgICAgICk7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICB0aGlzLmVkaXRvciA9IG5ldyBFZGl0b3JWaWV3KHtzdGF0ZSwgcGFyZW50OiB0aGlzLl9lZGl0b3IubmF0aXZlRWxlbWVudH0pO1xuICAgICAgfVxuICAgIH0pO1xuICB9XG59XG4iLCI8ZGl2ICNlZGl0b3I+PC9kaXY+XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWRpdG9yLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL0BuZy1hdG9taWMvY29tcG9uZW50cy9zcmMvZXh0cmFzL2VkaXRvci9lZGl0b3IuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2pHLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUNoRCxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sWUFBWSxDQUFDO0FBQ3hDLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxNQUFNLENBQUM7O0FBWXJDLE1BQU0sT0FBTyxlQUFlO0lBVjVCO1FBWW1CLFdBQU0sR0FBRyxJQUFJLGFBQWEsQ0FBYyxDQUFDLENBQUMsQ0FBQztLQTBCN0Q7SUF4QkMsSUFDSSxLQUFLLENBQUMsS0FBeUI7UUFDakMsSUFBSSxDQUFDLEtBQUs7WUFBRSxPQUFPO1FBQ25CLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzFCLENBQUM7SUFNRCxLQUFLLENBQUMsUUFBUSxLQUFvQixDQUFDO0lBRW5DLEtBQUssQ0FBQyxlQUFlO1FBQ25CLElBQUksQ0FBQyxNQUFNLENBQUMsU0FBUyxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUU7WUFDOUIsSUFBSSxJQUFJLENBQUMsTUFBTSxFQUFFO2dCQUNmLElBQUksQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUNsQixJQUFJLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsRUFBQyxHQUFHLEtBQUssRUFBQyxDQUFDLEVBQ3BDLEVBQUMsT0FBTyxFQUFFLEVBQUUsSUFBSSxFQUFFLENBQUMsRUFBRSxFQUFFLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLE1BQU0sRUFBRSxNQUFNLEVBQUUsS0FBSyxDQUFDLEdBQUcsQ0FBQyxRQUFRLEVBQUUsRUFBRSxFQUFDLENBQ3ZGLENBQUM7YUFDSDtpQkFBTTtnQkFDTCxJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksVUFBVSxDQUFDLEVBQUMsS0FBSyxFQUFFLE1BQU0sRUFBRSxJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsRUFBQyxDQUFDLENBQUM7YUFDM0U7UUFDSCxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7OzRHQTNCVSxlQUFlO2dHQUFmLGVBQWUsc05BSmhCLHFCQUFxQixtTkFGN0IsWUFBWTsyRkFNSCxlQUFlO2tCQVYzQixTQUFTOytCQUNFLGVBQWUsY0FDYixJQUFJLFdBQ1A7d0JBQ1AsWUFBWTtxQkFDYixZQUNTLHFCQUFxQixtQkFFZCx1QkFBdUIsQ0FBQyxNQUFNOzhCQU8zQyxLQUFLO3NCQURSLEtBQUs7Z0JBT0UsT0FBTztzQkFEZCxTQUFTO3VCQUFDLFFBQVEsRUFBRSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRWxlbWVudFJlZiwgSW5wdXQsIFZpZXdDaGlsZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRWRpdG9yU3RhdGUgfSBmcm9tICdAY29kZW1pcnJvci9zdGF0ZSc7XG5pbXBvcnQgeyBFZGl0b3JWaWV3IH0gZnJvbSAnY29kZW1pcnJvcic7XG5pbXBvcnQgeyBSZXBsYXlTdWJqZWN0IH0gZnJvbSAncnhqcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2V4dHJhcy1lZGl0b3InLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXG4gICAgQ29tbW9uTW9kdWxlXG4gIF0sXG4gIHRlbXBsYXRlOiBgPGRpdiAjZWRpdG9yPjwvZGl2PmAsXG4gIHN0eWxlVXJsczogWycuL2VkaXRvci5jb21wb25lbnQuc2NzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxufSlcbmV4cG9ydCBjbGFzcyBFZGl0b3JDb21wb25lbnQge1xuXG4gIHByaXZhdGUgcmVhZG9ubHkgc3RhdGUkID0gbmV3IFJlcGxheVN1YmplY3Q8RWRpdG9yU3RhdGU+KDEpO1xuXG4gIEBJbnB1dCgpXG4gIHNldCBzdGF0ZSh2YWx1ZTogRWRpdG9yU3RhdGUgfCBudWxsKSB7XG4gICAgaWYgKCF2YWx1ZSkgcmV0dXJuO1xuICAgIHRoaXMuc3RhdGUkLm5leHQodmFsdWUpO1xuICB9XG5cbiAgQFZpZXdDaGlsZCgnZWRpdG9yJywgeyBzdGF0aWM6IHRydWUgfSlcbiAgcHJpdmF0ZSBfZWRpdG9yITogRWxlbWVudFJlZjxIVE1MRWxlbWVudD47XG4gIHByaXZhdGUgZWRpdG9yITogRWRpdG9yVmlldztcblxuICBhc3luYyBuZ09uSW5pdCgpOiBQcm9taXNlPHZvaWQ+IHsgfVxuXG4gIGFzeW5jIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcbiAgICB0aGlzLnN0YXRlJC5zdWJzY3JpYmUoKHN0YXRlKSA9PiB7XG4gICAgICBpZiAodGhpcy5lZGl0b3IpIHtcbiAgICAgICAgdGhpcy5lZGl0b3IuZGlzcGF0Y2goXG4gICAgICAgICAgdGhpcy5lZGl0b3Iuc3RhdGUudXBkYXRlKHsuLi5zdGF0ZX0pLFxuICAgICAgICAgIHtjaGFuZ2VzOiB7IGZyb206IDAsIHRvOiB0aGlzLmVkaXRvci5zdGF0ZS5kb2MubGVuZ3RoLCBpbnNlcnQ6IHN0YXRlLmRvYy50b1N0cmluZygpIH19LFxuICAgICAgICApO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgdGhpcy5lZGl0b3IgPSBuZXcgRWRpdG9yVmlldyh7c3RhdGUsIHBhcmVudDogdGhpcy5fZWRpdG9yLm5hdGl2ZUVsZW1lbnR9KTtcbiAgICAgIH1cbiAgICB9KTtcbiAgfVxufVxuIl19

package/esm2020/frames/auto-layout/auto-layout.frame.mjs

@@ -4,11 +4,11 @@ import * as i0 from "@angular/core";
 export class AutoLayoutFrame {
 }
 AutoLayoutFrame.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: AutoLayoutFrame, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AutoLayoutFrame.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: AutoLayoutFrame, isStandalone: true, selector: "frames-auto-layout", ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{--gap: 24px;--gap-SCOPED-IN-auto-layout-fJo8: var(--gap);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-auto-layout-fJo8: var(--vertical-padding)}:host{display:flex;width:100%;height:100%;justify-content:center;gap:var(--gap-SCOPED-IN-auto-layout-fJo8);box-sizing:border-box;padding:var(--vertical-padding-SCOPED-IN-auto-layout-fJo8) 0}:host[horizontal]{flex-direction:row}:host[vertical]{flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AutoLayoutFrame.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: AutoLayoutFrame, isStandalone: true, selector: "frames-auto-layout", ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{--gap: 24px;--gap-SCOPED-IN-auto-layout-3MvY: var(--gap);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-auto-layout-3MvY: var(--vertical-padding)}:host{display:flex;width:100%;height:100%;justify-content:center;gap:var(--gap-SCOPED-IN-auto-layout-3MvY);box-sizing:border-box;padding:var(--vertical-padding-SCOPED-IN-auto-layout-3MvY) 0}:host[horizontal]{flex-direction:row}:host[vertical]{flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: AutoLayoutFrame, decorators: [{
             type: Component,
             args: [{ selector: 'frames-auto-layout', standalone: true, imports: [
                         CommonModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", styles: [":host{--gap: 24px;--gap-SCOPED-IN-auto-layout-fJo8: var(--gap);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-auto-layout-fJo8: var(--vertical-padding)}:host{display:flex;width:100%;height:100%;justify-content:center;gap:var(--gap-SCOPED-IN-auto-layout-fJo8);box-sizing:border-box;padding:var(--vertical-padding-SCOPED-IN-auto-layout-fJo8) 0}:host[horizontal]{flex-direction:row}:host[vertical]{flex-direction:column}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", styles: [":host{--gap: 24px;--gap-SCOPED-IN-auto-layout-3MvY: var(--gap);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-auto-layout-3MvY: var(--vertical-padding)}:host{display:flex;width:100%;height:100%;justify-content:center;gap:var(--gap-SCOPED-IN-auto-layout-3MvY);box-sizing:border-box;padding:var(--vertical-padding-SCOPED-IN-auto-layout-3MvY) 0}:host[horizontal]{flex-direction:row}:host[vertical]{flex-direction:column}\n"] }]
         }] });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXV0by1sYXlvdXQuZnJhbWUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9AbmctYXRvbWljL2NvbXBvbmVudHMvc3JjL2ZyYW1lcy9hdXRvLWxheW91dC9hdXRvLWxheW91dC5mcmFtZS50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL0BuZy1hdG9taWMvY29tcG9uZW50cy9zcmMvZnJhbWVzL2F1dG8tbGF5b3V0L2F1dG8tbGF5b3V0LmZyYW1lLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBWW5FLE1BQU0sT0FBTyxlQUFlOzs0R0FBZixlQUFlO2dHQUFmLGVBQWUsOEVDYjVCLDJCQUF5QixtZURPckIsWUFBWTsyRkFNSCxlQUFlO2tCQVYzQixTQUFTOytCQUNFLG9CQUFvQixjQUNsQixJQUFJLFdBQ1A7d0JBQ1AsWUFBWTtxQkFDYixtQkFHZ0IsdUJBQXVCLENBQUMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2ZyYW1lcy1hdXRvLWxheW91dCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtcbiAgICBDb21tb25Nb2R1bGUsXG4gIF0sXG4gIHRlbXBsYXRlVXJsOiAnLi9hdXRvLWxheW91dC5mcmFtZS5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vYXV0by1sYXlvdXQuZnJhbWUuc2NzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgQXV0b0xheW91dEZyYW1lIHsgfVxuIiwiPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PiJdfQ==

package/esm2020/frames/drawer/drawer.frame.mjs

@@ -24,13 +24,13 @@ export class DrawerFrame {
     }
 }
 DrawerFrame.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: DrawerFrame, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DrawerFrame.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: DrawerFrame, isStandalone: true, selector: "frames-drawer", inputs: { isOpen: "isOpen" }, viewQueries: [{ propertyName: "drawer", first: true, predicate: MatDrawer, descendants: true }], ngImport: i0, 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-7tvq: var(--content-width);--height: 100vh;--height-SCOPED-IN-drawer-7tvq: var(--height)}:host{height:var(--height-SCOPED-IN-drawer-7tvq)}:host mat-drawer-content{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i1.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i1.MatDrawerContent, selector: "mat-drawer-content" }] });
+DrawerFrame.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: DrawerFrame, isStandalone: true, selector: "frames-drawer", inputs: { isOpen: "isOpen" }, viewQueries: [{ propertyName: "drawer", first: true, predicate: MatDrawer, descendants: true }], ngImport: i0, 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-2vEm: var(--content-width);--height: 100vh;--height-SCOPED-IN-drawer-2vEm: var(--height)}:host{height:var(--height-SCOPED-IN-drawer-2vEm)}:host mat-drawer-content{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i1.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i1.MatDrawerContent, selector: "mat-drawer-content" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: DrawerFrame, decorators: [{
             type: Component,
             args: [{ selector: 'frames-drawer', standalone: true, imports: [
                         CommonModule,
                         MatSidenavModule,
-                    ], 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-7tvq: var(--content-width);--height: 100vh;--height-SCOPED-IN-drawer-7tvq: var(--height)}:host{height:var(--height-SCOPED-IN-drawer-7tvq)}:host mat-drawer-content{width:100%}\n"] }]
+                    ], 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-2vEm: var(--content-width);--height: 100vh;--height-SCOPED-IN-drawer-2vEm: var(--height)}:host{height:var(--height-SCOPED-IN-drawer-2vEm)}:host mat-drawer-content{width:100%}\n"] }]
         }], propDecorators: { drawer: [{
                 type: ViewChild,
                 args: [MatDrawer]

package/esm2020/frames/line-up/line-up.frame.mjs

@@ -88,7 +88,7 @@ LineUpFrame.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
     <div class="next" [@modeChangeForNext]="mode" #next>
       <ng-content select="[next]"></ng-content>
     </div>
-  `, isInline: true, styles: [":host{--gap: 1px;--gap-SCOPED-IN-line-up-o0nM: var(--gap);--background: #ccc;--background-SCOPED-IN-line-up-o0nM: var(--background);--contents-background: transparent;--contents-background-SCOPED-IN-line-up-o0nM: var(--contents-background)}:host{position:relative;display:flex;justify-content:flex-start;gap:var(--gap-SCOPED-IN-line-up-o0nM);width:-moz-fit-content;width:fit-content;height:100%;background:var(--background-SCOPED-IN-line-up-o0nM)}:host div{display:flex;max-width:-moz-fit-content;max-width:fit-content;height:100%;background:var(--contents-background-SCOPED-IN-line-up-o0nM)}:host div.main{overflow:hidden;justify-content:flex-end}:host div.next{overflow:visible;justify-content:flex-start}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], animations: LINE_UP_ANIMATIONS, changeDetection: i0.ChangeDetectionStrategy.Default });
+  `, isInline: true, styles: [":host{--gap: 1px;--gap-SCOPED-IN-line-up-PMe8: var(--gap);--background: #ccc;--background-SCOPED-IN-line-up-PMe8: var(--background);--contents-background: transparent;--contents-background-SCOPED-IN-line-up-PMe8: var(--contents-background)}:host{position:relative;display:flex;justify-content:flex-start;gap:var(--gap-SCOPED-IN-line-up-PMe8);width:-moz-fit-content;width:fit-content;height:100%;background:var(--background-SCOPED-IN-line-up-PMe8)}:host div{display:flex;max-width:-moz-fit-content;max-width:fit-content;height:100%;background:var(--contents-background-SCOPED-IN-line-up-PMe8)}:host div.main{overflow:hidden;justify-content:flex-end}:host div.next{overflow:visible;justify-content:flex-start}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], animations: LINE_UP_ANIMATIONS, changeDetection: i0.ChangeDetectionStrategy.Default });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: LineUpFrame, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
@@ -100,7 +100,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImpor
     <div class="next" [@modeChangeForNext]="mode" #next>
       <ng-content select="[next]"></ng-content>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.Default, animations: LINE_UP_ANIMATIONS, styles: [":host{--gap: 1px;--gap-SCOPED-IN-line-up-o0nM: var(--gap);--background: #ccc;--background-SCOPED-IN-line-up-o0nM: var(--background);--contents-background: transparent;--contents-background-SCOPED-IN-line-up-o0nM: var(--contents-background)}:host{position:relative;display:flex;justify-content:flex-start;gap:var(--gap-SCOPED-IN-line-up-o0nM);width:-moz-fit-content;width:fit-content;height:100%;background:var(--background-SCOPED-IN-line-up-o0nM)}:host div{display:flex;max-width:-moz-fit-content;max-width:fit-content;height:100%;background:var(--contents-background-SCOPED-IN-line-up-o0nM)}:host div.main{overflow:hidden;justify-content:flex-end}:host div.next{overflow:visible;justify-content:flex-start}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.Default, animations: LINE_UP_ANIMATIONS, styles: [":host{--gap: 1px;--gap-SCOPED-IN-line-up-PMe8: var(--gap);--background: #ccc;--background-SCOPED-IN-line-up-PMe8: var(--background);--contents-background: transparent;--contents-background-SCOPED-IN-line-up-PMe8: var(--contents-background)}:host{position:relative;display:flex;justify-content:flex-start;gap:var(--gap-SCOPED-IN-line-up-PMe8);width:-moz-fit-content;width:fit-content;height:100%;background:var(--background-SCOPED-IN-line-up-PMe8)}:host div{display:flex;max-width:-moz-fit-content;max-width:fit-content;height:100%;background:var(--contents-background-SCOPED-IN-line-up-PMe8)}:host div.main{overflow:hidden;justify-content:flex-end}:host div.next{overflow:visible;justify-content:flex-start}\n"] }]
         }], ctorParameters: function () { return [{ type: LineUpFrameService }]; }, propDecorators: { hasNext: [{
                 type: HostBinding,
                 args: ['attr.has-next']

package/esm2020/frames/overlay/overlay.frame.mjs

@@ -9,13 +9,13 @@ export class OverlayFrame {
     }
 }
 OverlayFrame.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: OverlayFrame, deps: [], target: i0.ɵɵFactoryTarget.Component });
-OverlayFrame.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: OverlayFrame, isStandalone: true, selector: "frames-overlay", inputs: { hasNext: "hasNext" }, ngImport: i0, 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-gZ7P: var(--cell);--width: 100%;--width-SCOPED-IN-line-overlay-gZ7P: var(--width);--height: 100%;--height-SCOPED-IN-line-overlay-gZ7P: var(--height)}:host{position:relative;display:block;width:var(--width-SCOPED-IN-line-overlay-gZ7P);height:var(--height-SCOPED-IN-line-overlay-gZ7P)}:host .loading{position:absolute;z-index:1000;top:0;left:0;display:flex;width:var(--width-SCOPED-IN-line-overlay-gZ7P);height:var(--height-SCOPED-IN-line-overlay-gZ7P);justify-content:center;align-items:center;background-color:#0006}:host .main{position:absolute;top:0;left:0;z-index:1;width:var(--width-SCOPED-IN-line-overlay-gZ7P);height:var(--height-SCOPED-IN-line-overlay-gZ7P);overflow:hidden}:host .main *{--cell: var(--cell-SCOPED-IN-line-overlay-gZ7P);--width: var(--width-SCOPED-IN-line-overlay-gZ7P);--height: var(--height-SCOPED-IN-line-overlay-gZ7P)}:host .next{position:absolute;top:0;left:0;z-index:2;width:var(--width-SCOPED-IN-line-overlay-gZ7P);height:auto}:host .next *{--cell: var(--cell-SCOPED-IN-line-overlay-gZ7P);--width: var(--width-SCOPED-IN-line-overlay-gZ7P);--height: var(--height-SCOPED-IN-line-overlay-gZ7P)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }], animations: [OVERLAY_ANIMATION], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OverlayFrame.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: OverlayFrame, isStandalone: true, selector: "frames-overlay", inputs: { hasNext: "hasNext" }, ngImport: i0, 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-JT3z: var(--cell);--width: 100%;--width-SCOPED-IN-line-overlay-JT3z: var(--width);--height: 100%;--height-SCOPED-IN-line-overlay-JT3z: var(--height)}:host{position:relative;display:block;width:var(--width-SCOPED-IN-line-overlay-JT3z);height:var(--height-SCOPED-IN-line-overlay-JT3z)}:host .loading{position:absolute;z-index:1000;top:0;left:0;display:flex;width:var(--width-SCOPED-IN-line-overlay-JT3z);height:var(--height-SCOPED-IN-line-overlay-JT3z);justify-content:center;align-items:center;background-color:#0006}:host .main{position:absolute;top:0;left:0;z-index:1;width:var(--width-SCOPED-IN-line-overlay-JT3z);height:var(--height-SCOPED-IN-line-overlay-JT3z);overflow:hidden}:host .main *{--cell: var(--cell-SCOPED-IN-line-overlay-JT3z);--width: var(--width-SCOPED-IN-line-overlay-JT3z);--height: var(--height-SCOPED-IN-line-overlay-JT3z)}:host .next{position:absolute;top:0;left:0;z-index:2;width:var(--width-SCOPED-IN-line-overlay-JT3z);height:auto}:host .next *{--cell: var(--cell-SCOPED-IN-line-overlay-JT3z);--width: var(--width-SCOPED-IN-line-overlay-JT3z);--height: var(--height-SCOPED-IN-line-overlay-JT3z)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }], animations: [OVERLAY_ANIMATION], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: OverlayFrame, decorators: [{
             type: Component,
             args: [{ selector: 'frames-overlay', standalone: true, imports: [
                         CommonModule,
                         MatProgressSpinnerModule,
-                    ], animations: [OVERLAY_ANIMATION], changeDetection: ChangeDetectionStrategy.OnPush, 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-gZ7P: var(--cell);--width: 100%;--width-SCOPED-IN-line-overlay-gZ7P: var(--width);--height: 100%;--height-SCOPED-IN-line-overlay-gZ7P: var(--height)}:host{position:relative;display:block;width:var(--width-SCOPED-IN-line-overlay-gZ7P);height:var(--height-SCOPED-IN-line-overlay-gZ7P)}:host .loading{position:absolute;z-index:1000;top:0;left:0;display:flex;width:var(--width-SCOPED-IN-line-overlay-gZ7P);height:var(--height-SCOPED-IN-line-overlay-gZ7P);justify-content:center;align-items:center;background-color:#0006}:host .main{position:absolute;top:0;left:0;z-index:1;width:var(--width-SCOPED-IN-line-overlay-gZ7P);height:var(--height-SCOPED-IN-line-overlay-gZ7P);overflow:hidden}:host .main *{--cell: var(--cell-SCOPED-IN-line-overlay-gZ7P);--width: var(--width-SCOPED-IN-line-overlay-gZ7P);--height: var(--height-SCOPED-IN-line-overlay-gZ7P)}:host .next{position:absolute;top:0;left:0;z-index:2;width:var(--width-SCOPED-IN-line-overlay-gZ7P);height:auto}:host .next *{--cell: var(--cell-SCOPED-IN-line-overlay-gZ7P);--width: var(--width-SCOPED-IN-line-overlay-gZ7P);--height: var(--height-SCOPED-IN-line-overlay-gZ7P)}\n"] }]
+                    ], animations: [OVERLAY_ANIMATION], changeDetection: ChangeDetectionStrategy.OnPush, 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-JT3z: var(--cell);--width: 100%;--width-SCOPED-IN-line-overlay-JT3z: var(--width);--height: 100%;--height-SCOPED-IN-line-overlay-JT3z: var(--height)}:host{position:relative;display:block;width:var(--width-SCOPED-IN-line-overlay-JT3z);height:var(--height-SCOPED-IN-line-overlay-JT3z)}:host .loading{position:absolute;z-index:1000;top:0;left:0;display:flex;width:var(--width-SCOPED-IN-line-overlay-JT3z);height:var(--height-SCOPED-IN-line-overlay-JT3z);justify-content:center;align-items:center;background-color:#0006}:host .main{position:absolute;top:0;left:0;z-index:1;width:var(--width-SCOPED-IN-line-overlay-JT3z);height:var(--height-SCOPED-IN-line-overlay-JT3z);overflow:hidden}:host .main *{--cell: var(--cell-SCOPED-IN-line-overlay-JT3z);--width: var(--width-SCOPED-IN-line-overlay-JT3z);--height: var(--height-SCOPED-IN-line-overlay-JT3z)}:host .next{position:absolute;top:0;left:0;z-index:2;width:var(--width-SCOPED-IN-line-overlay-JT3z);height:auto}:host .next *{--cell: var(--cell-SCOPED-IN-line-overlay-JT3z);--width: var(--width-SCOPED-IN-line-overlay-JT3z);--height: var(--height-SCOPED-IN-line-overlay-JT3z)}\n"] }]
         }], propDecorators: { hasNext: [{
                 type: Input
             }] } });

package/esm2020/frames/scroll/scroll.frame.mjs

@@ -6,12 +6,12 @@ import * as i1 from "@ng-atomic/common/directives/ios-safari-scroll-buggyfill";
 export class ScrollFrame {
 }
 ScrollFrame.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: ScrollFrame, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ScrollFrame.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: ScrollFrame, isStandalone: true, selector: "frames-scroll", ngImport: i0, 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-4KUD: var(--height);--navigator-height: 56px;--navigator-height-SCOPED-IN-scroll-4KUD: var(--navigator-height)}:host{height:var(--height-SCOPED-IN-scroll-4KUD);overflow:hidden}:host .navigator-container{height:var(--navigator-height-SCOPED-IN-scroll-4KUD);overflow:hidden;touch-action:none}:host .contents-container{height:calc(var(--height-SCOPED-IN-scroll-4KUD) - var(--navigator-height-SCOPED-IN-scroll-4KUD));overflow:scroll;-webkit-overflow-scrolling:touch}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: IosSafariScrollBuggyfillModule }, { kind: "directive", type: i1.IosSafariScrollBuggyfillDirective, selector: "[iosSafariScrollBuggyfill]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ScrollFrame.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: ScrollFrame, isStandalone: true, selector: "frames-scroll", ngImport: i0, 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-EMUn: var(--height);--navigator-height: 56px;--navigator-height-SCOPED-IN-scroll-EMUn: var(--navigator-height)}:host{height:var(--height-SCOPED-IN-scroll-EMUn);overflow:hidden}:host .navigator-container{height:var(--navigator-height-SCOPED-IN-scroll-EMUn);overflow:hidden;touch-action:none}:host .contents-container{height:calc(var(--height-SCOPED-IN-scroll-EMUn) - var(--navigator-height-SCOPED-IN-scroll-EMUn));overflow:auto;-webkit-overflow-scrolling:touch}:host .contents-container::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: IosSafariScrollBuggyfillModule }, { kind: "directive", type: i1.IosSafariScrollBuggyfillDirective, selector: "[iosSafariScrollBuggyfill]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: ScrollFrame, decorators: [{
             type: Component,
             args: [{ selector: 'frames-scroll', standalone: true, imports: [
                         CommonModule,
                         IosSafariScrollBuggyfillModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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-4KUD: var(--height);--navigator-height: 56px;--navigator-height-SCOPED-IN-scroll-4KUD: var(--navigator-height)}:host{height:var(--height-SCOPED-IN-scroll-4KUD);overflow:hidden}:host .navigator-container{height:var(--navigator-height-SCOPED-IN-scroll-4KUD);overflow:hidden;touch-action:none}:host .contents-container{height:calc(var(--height-SCOPED-IN-scroll-4KUD) - var(--navigator-height-SCOPED-IN-scroll-4KUD));overflow:scroll;-webkit-overflow-scrolling:touch}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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-EMUn: var(--height);--navigator-height: 56px;--navigator-height-SCOPED-IN-scroll-EMUn: var(--navigator-height)}:host{height:var(--height-SCOPED-IN-scroll-EMUn);overflow:hidden}:host .navigator-container{height:var(--navigator-height-SCOPED-IN-scroll-EMUn);overflow:hidden;touch-action:none}:host .contents-container{height:calc(var(--height-SCOPED-IN-scroll-EMUn) - var(--navigator-height-SCOPED-IN-scroll-EMUn));overflow:auto;-webkit-overflow-scrolling:touch}:host .contents-container::-webkit-scrollbar{display:none}\n"] }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Nyb2xsLmZyYW1lLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvQG5nLWF0b21pYy9jb21wb25lbnRzL3NyYy9mcmFtZXMvc2Nyb2xsL3Njcm9sbC5mcmFtZS50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL0BuZy1hdG9taWMvY29tcG9uZW50cy9zcmMvZnJhbWVzL3Njcm9sbC9zY3JvbGwuZnJhbWUuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNuRSxPQUFPLEVBQUUsOEJBQThCLEVBQUUsTUFBTSwwREFBMEQsQ0FBQzs7O0FBYTFHLE1BQU0sT0FBTyxXQUFXOzt3R0FBWCxXQUFXOzRGQUFYLFdBQVcseUVDZnhCLGlOQUtNLHdqQkRHRixZQUFZLDhCQUNaLDhCQUE4QjsyRkFNckIsV0FBVztrQkFYdkIsU0FBUzsrQkFDRSxlQUFlLGNBQ2IsSUFBSSxXQUNQO3dCQUNQLFlBQVk7d0JBQ1osOEJBQThCO3FCQUMvQixtQkFHZ0IsdUJBQXVCLENBQUMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJb3NTYWZhcmlTY3JvbGxCdWdneWZpbGxNb2R1bGUgfSBmcm9tICdAbmctYXRvbWljL2NvbW1vbi9kaXJlY3RpdmVzL2lvcy1zYWZhcmktc2Nyb2xsLWJ1Z2d5ZmlsbCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2ZyYW1lcy1zY3JvbGwnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXG4gICAgQ29tbW9uTW9kdWxlLFxuICAgIElvc1NhZmFyaVNjcm9sbEJ1Z2d5ZmlsbE1vZHVsZSxcbiAgXSxcbiAgdGVtcGxhdGVVcmw6ICcuL3Njcm9sbC5mcmFtZS5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vc2Nyb2xsLmZyYW1lLnNjc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIFNjcm9sbEZyYW1lIHsgfVxuIiwiPGRpdiBjbGFzcz1cIm5hdmlnYXRvci1jb250YWluZXJcIiBpb3NTYWZhcmlTY3JvbGxCdWdneWZpbGw+XG4gIDxuZy1jb250ZW50IHNlbGVjdD1bbmF2aWdhdG9yXT48L25nLWNvbnRlbnQ+XG48L2Rpdj5cbjxkaXYgY2xhc3M9XCJjb250ZW50cy1jb250YWluZXJcIj5cbiAgPG5nLWNvbnRlbnQgc2VsZWN0PVtjb250ZW50c10+PC9uZy1jb250ZW50PlxuPC9kaXY+Il19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Nyb2xsLmZyYW1lLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvQG5nLWF0b21pYy9jb21wb25lbnRzL3NyYy9mcmFtZXMvc2Nyb2xsL3Njcm9sbC5mcmFtZS50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL0BuZy1hdG9taWMvY29tcG9uZW50cy9zcmMvZnJhbWVzL3Njcm9sbC9zY3JvbGwuZnJhbWUuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNuRSxPQUFPLEVBQUUsOEJBQThCLEVBQUUsTUFBTSwwREFBMEQsQ0FBQzs7O0FBYTFHLE1BQU0sT0FBTyxXQUFXOzt3R0FBWCxXQUFXOzRGQUFYLFdBQVcseUVDZnhCLGlOQUtNLGduQkRHRixZQUFZLDhCQUNaLDhCQUE4QjsyRkFNckIsV0FBVztrQkFYdkIsU0FBUzsrQkFDRSxlQUFlLGNBQ2IsSUFBSSxXQUNQO3dCQUNQLFlBQVk7d0JBQ1osOEJBQThCO3FCQUMvQixtQkFHZ0IsdUJBQXVCLENBQUMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJb3NTYWZhcmlTY3JvbGxCdWdneWZpbGxNb2R1bGUgfSBmcm9tICdAbmctYXRvbWljL2NvbW1vbi9kaXJlY3RpdmVzL2lvcy1zYWZhcmktc2Nyb2xsLWJ1Z2d5ZmlsbCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2ZyYW1lcy1zY3JvbGwnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXG4gICAgQ29tbW9uTW9kdWxlLFxuICAgIElvc1NhZmFyaVNjcm9sbEJ1Z2d5ZmlsbE1vZHVsZSxcbiAgXSxcbiAgdGVtcGxhdGVVcmw6ICcuL3Njcm9sbC5mcmFtZS5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vc2Nyb2xsLmZyYW1lLnNjc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIFNjcm9sbEZyYW1lIHsgfVxuIiwiPGRpdiBjbGFzcz1cIm5hdmlnYXRvci1jb250YWluZXJcIiBpb3NTYWZhcmlTY3JvbGxCdWdneWZpbGw+XG4gIDxuZy1jb250ZW50IHNlbGVjdD1bbmF2aWdhdG9yXT48L25nLWNvbnRlbnQ+XG48L2Rpdj5cbjxkaXYgY2xhc3M9XCJjb250ZW50cy1jb250YWluZXJcIj5cbiAgPG5nLWNvbnRlbnQgc2VsZWN0PVtjb250ZW50c10+PC9uZy1jb250ZW50PlxuPC9kaXY+Il19

package/esm2020/frames/smart-menu/smart-menu.frame.mjs

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

package/esm2020/molecules/date-input-field/date-input-field.molecule.mjs

@@ -26,7 +26,7 @@ export class DateInputFieldMolecule {
     }
 }
 DateInputFieldMolecule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: DateInputFieldMolecule, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DateInputFieldMolecule.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: DateInputFieldMolecule, isStandalone: true, selector: "molecules-date-input-field", inputs: { control: "control", label: "label", placeholder: "placeholder", hint: "hint" }, host: { classAttribute: "molecule field" }, ngImport: i0, 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-Yvui: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatDayjsDateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DateInputFieldMolecule.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: DateInputFieldMolecule, isStandalone: true, selector: "molecules-date-input-field", inputs: { control: "control", label: "label", placeholder: "placeholder", hint: "hint" }, host: { classAttribute: "molecule field" }, ngImport: i0, 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-gxfa: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatDayjsDateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: DateInputFieldMolecule, decorators: [{
             type: Component,
             args: [{ selector: 'molecules-date-input-field', standalone: true, imports: [
@@ -35,7 +35,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImpor
                         MatInputModule,
                         MatDatepickerModule,
                         MatDayjsDateModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'molecule field' }, 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-Yvui: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'molecule field' }, 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-gxfa: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"] }]
         }], propDecorators: { control: [{
                 type: Input
             }], label: [{

package/esm2020/molecules/nested-menu/index.mjs

@@ -0,0 +1,2 @@
+export * from './nested-menu.molecule';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9AbmctYXRvbWljL2NvbXBvbmVudHMvc3JjL21vbGVjdWxlcy9uZXN0ZWQtbWVudS9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUFjLHdCQUF3QixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9uZXN0ZWQtbWVudS5tb2xlY3VsZSc7XG5cbiJdfQ==

package/esm2020/molecules/nested-menu/nested-menu.molecule.mjs

@@ -0,0 +1,80 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/material/menu";
+export class NestedMenuMolecule {
+    constructor() {
+        this.action = new EventEmitter();
+    }
+}
+NestedMenuMolecule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NestedMenuMolecule, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NestedMenuMolecule.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: NestedMenuMolecule, isStandalone: true, selector: "molecules-nested-menu", inputs: { actions: "actions" }, outputs: { action: "action" }, viewQueries: [{ propertyName: "childMenu", first: true, predicate: ["childMenu"], descendants: true }], ngImport: i0, template: `
+    <mat-menu #childMenu="matMenu" [overlapTrigger]="false">
+    <span *ngFor="let _action of actions">
+      <span *ngIf="_action?.children">
+        <button mat-menu-item [matMenuTriggerFor]="menu.childMenu">
+          <mat-icon>{{_action.icon}}</mat-icon>
+          <span>{{ _action.name }}</span>
+        </button>
+        <molecules-nested-menu
+          #menu
+          [actions]="_action.children"
+          (action)="action.emit($event)"
+        ></molecules-nested-menu>
+      </span>
+      
+      <span *ngIf="!_action?.children">
+        <button mat-menu-item (click)="action.emit(_action)">
+          <mat-icon>{{ _action.icon }}</mat-icon>
+          <span>{{ _action.name }}</span>
+        </button>
+      </span>
+    </span>
+  </mat-menu>
+  `, isInline: true, dependencies: [{ kind: "component", type: NestedMenuMolecule, selector: "molecules-nested-menu", inputs: ["actions"], outputs: ["action"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NestedMenuMolecule, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'molecules-nested-menu',
+                    standalone: true,
+                    imports: [
+                        CommonModule,
+                        MatMenuModule,
+                    ],
+                    template: `
+    <mat-menu #childMenu="matMenu" [overlapTrigger]="false">
+    <span *ngFor="let _action of actions">
+      <span *ngIf="_action?.children">
+        <button mat-menu-item [matMenuTriggerFor]="menu.childMenu">
+          <mat-icon>{{_action.icon}}</mat-icon>
+          <span>{{ _action.name }}</span>
+        </button>
+        <molecules-nested-menu
+          #menu
+          [actions]="_action.children"
+          (action)="action.emit($event)"
+        ></molecules-nested-menu>
+      </span>
+      
+      <span *ngIf="!_action?.children">
+        <button mat-menu-item (click)="action.emit(_action)">
+          <mat-icon>{{ _action.icon }}</mat-icon>
+          <span>{{ _action.name }}</span>
+        </button>
+      </span>
+    </span>
+  </mat-menu>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { actions: [{
+                type: Input
+            }], childMenu: [{
+                type: ViewChild,
+                args: ['childMenu']
+            }], action: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmVzdGVkLW1lbnUubW9sZWN1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9AbmctYXRvbWljL2NvbXBvbmVudHMvc3JjL21vbGVjdWxlcy9uZXN0ZWQtbWVudS9uZXN0ZWQtbWVudS5tb2xlY3VsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMzRyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFFL0MsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDOzs7O0FBbUN2RCxNQUFNLE9BQU8sa0JBQWtCO0lBakMvQjtRQXlDRSxXQUFNLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztLQUNyQzs7K0dBVFksa0JBQWtCO21HQUFsQixrQkFBa0Isd1BBMUJuQjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0F1QlQsNERBR1Usa0JBQWtCLDJHQTdCM0IsWUFBWSwrUEFDWixhQUFhOzJGQTRCSixrQkFBa0I7a0JBakM5QixTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSx1QkFBdUI7b0JBQ2pDLFVBQVUsRUFBRSxJQUFJO29CQUNoQixPQUFPLEVBQUU7d0JBQ1AsWUFBWTt3QkFDWixhQUFhO3FCQUNkO29CQUNELFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0F1QlQ7b0JBQ0QsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07aUJBQ2hEOzhCQUdDLE9BQU87c0JBRE4sS0FBSztnQkFJTixTQUFTO3NCQURSLFNBQVM7dUJBQUMsV0FBVztnQkFJdEIsTUFBTTtzQkFETCxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0LCBWaWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBBY3Rpb24gfSBmcm9tICdAbmctYXRvbWljL2NvbW1vbi9tb2RlbHMnO1xuaW1wb3J0IHsgTWF0TWVudU1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL21lbnUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdtb2xlY3VsZXMtbmVzdGVkLW1lbnUnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXG4gICAgQ29tbW9uTW9kdWxlLFxuICAgIE1hdE1lbnVNb2R1bGUsXG4gIF0sXG4gIHRlbXBsYXRlOiBgXG4gICAgPG1hdC1tZW51ICNjaGlsZE1lbnU9XCJtYXRNZW51XCIgW292ZXJsYXBUcmlnZ2VyXT1cImZhbHNlXCI+XG4gICAgPHNwYW4gKm5nRm9yPVwibGV0IF9hY3Rpb24gb2YgYWN0aW9uc1wiPlxuICAgICAgPHNwYW4gKm5nSWY9XCJfYWN0aW9uPy5jaGlsZHJlblwiPlxuICAgICAgICA8YnV0dG9uIG1hdC1tZW51LWl0ZW0gW21hdE1lbnVUcmlnZ2VyRm9yXT1cIm1lbnUuY2hpbGRNZW51XCI+XG4gICAgICAgICAgPG1hdC1pY29uPnt7X2FjdGlvbi5pY29ufX08L21hdC1pY29uPlxuICAgICAgICAgIDxzcGFuPnt7IF9hY3Rpb24ubmFtZSB9fTwvc3Bhbj5cbiAgICAgICAgPC9idXR0b24+XG4gICAgICAgIDxtb2xlY3VsZXMtbmVzdGVkLW1lbnVcbiAgICAgICAgICAjbWVudVxuICAgICAgICAgIFthY3Rpb25zXT1cIl9hY3Rpb24uY2hpbGRyZW5cIlxuICAgICAgICAgIChhY3Rpb24pPVwiYWN0aW9uLmVtaXQoJGV2ZW50KVwiXG4gICAgICAgID48L21vbGVjdWxlcy1uZXN0ZWQtbWVudT5cbiAgICAgIDwvc3Bhbj5cbiAgICAgIFxuICAgICAgPHNwYW4gKm5nSWY9XCIhX2FjdGlvbj8uY2hpbGRyZW5cIj5cbiAgICAgICAgPGJ1dHRvbiBtYXQtbWVudS1pdGVtIChjbGljayk9XCJhY3Rpb24uZW1pdChfYWN0aW9uKVwiPlxuICAgICAgICAgIDxtYXQtaWNvbj57eyBfYWN0aW9uLmljb24gfX08L21hdC1pY29uPlxuICAgICAgICAgIDxzcGFuPnt7IF9hY3Rpb24ubmFtZSB9fTwvc3Bhbj5cbiAgICAgICAgPC9idXR0b24+XG4gICAgICA8L3NwYW4+XG4gICAgPC9zcGFuPlxuICA8L21hdC1tZW51PlxuICBgLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgTmVzdGVkTWVudU1vbGVjdWxlIHtcbiAgQElucHV0KClcbiAgYWN0aW9uczogQWN0aW9uW107XG5cbiAgQFZpZXdDaGlsZCgnY2hpbGRNZW51JylcbiAgY2hpbGRNZW51O1xuXG4gIEBPdXRwdXQoKVxuICBhY3Rpb24gPSBuZXcgRXZlbnRFbWl0dGVyPEFjdGlvbj4oKTtcbn1cbiJdfQ==

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

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmctYXRvbWljLWNvbXBvbmVudHMtbW9sZWN1bGVzLW5lc3RlZC1tZW51LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvQG5nLWF0b21pYy9jb21wb25lbnRzL3NyYy9tb2xlY3VsZXMvbmVzdGVkLW1lbnUvbmctYXRvbWljLWNvbXBvbmVudHMtbW9sZWN1bGVzLW5lc3RlZC1tZW51LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxTQUFTLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vaW5kZXgnO1xuIl19

package/esm2020/molecules/select-input-field/select-input-field.molecule.mjs

@@ -18,14 +18,14 @@ export class SelectInputFieldMolecule {
     }
 }
 SelectInputFieldMolecule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: SelectInputFieldMolecule, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SelectInputFieldMolecule.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: SelectInputFieldMolecule, isStandalone: true, selector: "molecules-select-input-field", inputs: { label: "label", appearance: "appearance", control: "control", options: "options" }, host: { classAttribute: "molecule input-field field" }, ngImport: i0, template: "<mat-form-field [appearance]=\"appearance\">\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-AYkY: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SelectInputFieldMolecule.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: SelectInputFieldMolecule, isStandalone: true, selector: "molecules-select-input-field", inputs: { label: "label", appearance: "appearance", control: "control", options: "options" }, host: { classAttribute: "molecule input-field field" }, ngImport: i0, template: "<mat-form-field [appearance]=\"appearance\">\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-FPjE: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: SelectInputFieldMolecule, decorators: [{
             type: Component,
             args: [{ selector: 'molecules-select-input-field', standalone: true, imports: [
                         CommonModule,
                         ReactiveFormsModule,
                         MatSelectModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'molecule input-field field' }, template: "<mat-form-field [appearance]=\"appearance\">\n  <mat-label>{{ label }}</mat-label>\n  <mat-select [formControl]=\"control\">\n    <mat-option *ngFor=\"let option of options; trackBy value;\" [value]=\"option.value\">\n      {{ option.name }}\n    </mat-option>\n  </mat-select>\n</mat-form-field>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-select-input-field-AYkY: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'molecule input-field field' }, template: "<mat-form-field [appearance]=\"appearance\">\n  <mat-label>{{ label }}</mat-label>\n  <mat-select [formControl]=\"control\">\n    <mat-option *ngFor=\"let option of options; trackBy value;\" [value]=\"option.value\">\n      {{ option.name }}\n    </mat-option>\n  </mat-select>\n</mat-form-field>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-select-input-field-FPjE: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], appearance: [{

package/esm2020/organisms/action-buttons-section/action-buttons-section.organism.mjs

@@ -12,13 +12,13 @@ export class ActionButtonsSectionOrganism {
     }
 }
 ActionButtonsSectionOrganism.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: ActionButtonsSectionOrganism, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ActionButtonsSectionOrganism.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: ActionButtonsSectionOrganism, isStandalone: true, selector: "organisms-action-buttons-section", inputs: { actions: "actions" }, outputs: { action: "action" }, host: { classAttribute: "organism section" }, ngImport: i0, template: "<ng-container *ngFor=\"let _action of actions; trackBy: trackById\">\n  <button mat-raised-button color=\"primary\" [disabled]=\"_action?.disabled\" (click)=\"action.emit(_action)\">{{ _action?.name }}</button>\n</ng-container>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-action-buttons-section-FWyX: var(--horizontal-padding)}:host{display:flex;flex-direction:row;gap:8px;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-action-buttons-section-FWyX);box-sizing:border-box}:host button{width:100%;height:48px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ActionButtonsSectionOrganism.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: ActionButtonsSectionOrganism, isStandalone: true, selector: "organisms-action-buttons-section", inputs: { actions: "actions" }, outputs: { action: "action" }, host: { classAttribute: "organism section" }, ngImport: i0, template: "<ng-container *ngFor=\"let _action of actions; trackBy: trackById\">\n  <button mat-raised-button color=\"primary\" [disabled]=\"_action?.disabled\" (click)=\"action.emit(_action)\">{{ _action?.name }}</button>\n</ng-container>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-action-buttons-section-pLSy: var(--horizontal-padding)}:host{display:flex;flex-direction:row;gap:8px;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-action-buttons-section-pLSy);box-sizing:border-box}:host button{width:100%;height:48px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: ActionButtonsSectionOrganism, decorators: [{
             type: Component,
             args: [{ selector: 'organisms-action-buttons-section', standalone: true, imports: [
                         CommonModule,
                         MatButtonModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'organism section' }, template: "<ng-container *ngFor=\"let _action of actions; trackBy: trackById\">\n  <button mat-raised-button color=\"primary\" [disabled]=\"_action?.disabled\" (click)=\"action.emit(_action)\">{{ _action?.name }}</button>\n</ng-container>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-action-buttons-section-FWyX: var(--horizontal-padding)}:host{display:flex;flex-direction:row;gap:8px;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-action-buttons-section-FWyX);box-sizing:border-box}:host button{width:100%;height:48px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'organism section' }, template: "<ng-container *ngFor=\"let _action of actions; trackBy: trackById\">\n  <button mat-raised-button color=\"primary\" [disabled]=\"_action?.disabled\" (click)=\"action.emit(_action)\">{{ _action?.name }}</button>\n</ng-container>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-action-buttons-section-pLSy: var(--horizontal-padding)}:host{display:flex;flex-direction:row;gap:8px;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-action-buttons-section-pLSy);box-sizing:border-box}:host button{width:100%;height:48px}\n"] }]
         }], propDecorators: { actions: [{
                 type: Input
             }], action: [{

package/esm2020/organisms/back-navigator/back-navigator.organism.mjs

@@ -18,7 +18,7 @@ export class BackNavigatorOrganism {
     }
 }
 BackNavigatorOrganism.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: BackNavigatorOrganism, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BackNavigatorOrganism.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: BackNavigatorOrganism, isStandalone: true, selector: "organisms-back-navigator", inputs: { canBack: "canBack", title: "title", description: "description", items: "items" }, outputs: { backButtonClick: "backButtonClick", action: "action" }, ngImport: i0, template: "<mat-toolbar color=\"primary\">\n  <div>\n    <button mat-icon-button *ngIf=\"canBack\" (click)=\"backButtonClick.emit()\">\n      <mat-icon>arrow_back</mat-icon>\n    </button>\n    <div class=\"text\">\n      <span class=\"title\">{{ title || '' }}</span>\n      <span class=\"description\">{{ description || '' }}</span>\n    </div>\n  </div>\n  <div>\n    <atoms-smart-menu-button\n      [items]=\"items\"\n      (action)=\"action.emit($event)\"\n    ></atoms-smart-menu-button>\n  </div>\n</mat-toolbar>\n", styles: [":host{--height: 64px;--height-SCOPED-IN-back-navigator-ittZ: var(--height)}:host{display:block;width:100%;height:var(--height-SCOPED-IN-back-navigator-ittZ)}:host div.text{display:flex;flex-direction:row;justify-content:center;align-items:flex-end}:host div.text .description{line-height:1em;font-size:12px;margin-bottom:8px;margin-left:4px}:host mat-toolbar{display:flex;width:100%;height:100%;justify-content:space-between;align-items:center}:host div{display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: SmartMenuButtonAtom, selector: "atoms-smart-menu-button", inputs: ["items"], outputs: ["action"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+BackNavigatorOrganism.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: BackNavigatorOrganism, isStandalone: true, selector: "organisms-back-navigator", inputs: { canBack: "canBack", title: "title", description: "description", items: "items" }, outputs: { backButtonClick: "backButtonClick", action: "action" }, ngImport: i0, template: "<mat-toolbar color=\"primary\">\n  <div>\n    <button mat-icon-button *ngIf=\"canBack\" (click)=\"backButtonClick.emit()\">\n      <mat-icon>arrow_back</mat-icon>\n    </button>\n    <div class=\"text\">\n      <span class=\"title\">{{ title || '' }}</span>\n      <span class=\"description\">{{ description || '' }}</span>\n    </div>\n  </div>\n  <div>\n    <atoms-smart-menu-button\n      [items]=\"items\"\n      (action)=\"action.emit($event)\"\n    ></atoms-smart-menu-button>\n  </div>\n</mat-toolbar>\n", styles: [":host{--height: 64px;--height-SCOPED-IN-back-navigator-seOu: var(--height)}:host{display:block;width:100%;height:var(--height-SCOPED-IN-back-navigator-seOu)}:host div.text{display:flex;flex-direction:row;justify-content:center;align-items:flex-end}:host div.text .description{line-height:1em;font-size:12px;margin-bottom:8px;margin-left:4px}:host mat-toolbar{display:flex;width:100%;height:100%;justify-content:space-between;align-items:center}:host div{display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: SmartMenuButtonAtom, selector: "atoms-smart-menu-button", inputs: ["items"], outputs: ["action"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: BackNavigatorOrganism, decorators: [{
             type: Component,
             args: [{ selector: 'organisms-back-navigator', standalone: true, imports: [
@@ -27,7 +27,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImpor
                         MatIconModule,
                         MatToolbarModule,
                         SmartMenuButtonAtom,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-toolbar color=\"primary\">\n  <div>\n    <button mat-icon-button *ngIf=\"canBack\" (click)=\"backButtonClick.emit()\">\n      <mat-icon>arrow_back</mat-icon>\n    </button>\n    <div class=\"text\">\n      <span class=\"title\">{{ title || '' }}</span>\n      <span class=\"description\">{{ description || '' }}</span>\n    </div>\n  </div>\n  <div>\n    <atoms-smart-menu-button\n      [items]=\"items\"\n      (action)=\"action.emit($event)\"\n    ></atoms-smart-menu-button>\n  </div>\n</mat-toolbar>\n", styles: [":host{--height: 64px;--height-SCOPED-IN-back-navigator-ittZ: var(--height)}:host{display:block;width:100%;height:var(--height-SCOPED-IN-back-navigator-ittZ)}:host div.text{display:flex;flex-direction:row;justify-content:center;align-items:flex-end}:host div.text .description{line-height:1em;font-size:12px;margin-bottom:8px;margin-left:4px}:host mat-toolbar{display:flex;width:100%;height:100%;justify-content:space-between;align-items:center}:host div{display:flex;justify-content:center;align-items:center}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-toolbar color=\"primary\">\n  <div>\n    <button mat-icon-button *ngIf=\"canBack\" (click)=\"backButtonClick.emit()\">\n      <mat-icon>arrow_back</mat-icon>\n    </button>\n    <div class=\"text\">\n      <span class=\"title\">{{ title || '' }}</span>\n      <span class=\"description\">{{ description || '' }}</span>\n    </div>\n  </div>\n  <div>\n    <atoms-smart-menu-button\n      [items]=\"items\"\n      (action)=\"action.emit($event)\"\n    ></atoms-smart-menu-button>\n  </div>\n</mat-toolbar>\n", styles: [":host{--height: 64px;--height-SCOPED-IN-back-navigator-seOu: var(--height)}:host{display:block;width:100%;height:var(--height-SCOPED-IN-back-navigator-seOu)}:host div.text{display:flex;flex-direction:row;justify-content:center;align-items:flex-end}:host div.text .description{line-height:1em;font-size:12px;margin-bottom:8px;margin-left:4px}:host mat-toolbar{display:flex;width:100%;height:100%;justify-content:space-between;align-items:center}:host div{display:flex;justify-content:center;align-items:center}\n"] }]
         }], propDecorators: { canBack: [{
                 type: Input
             }], title: [{

package/esm2020/organisms/card-input-section/card-input-section.organism.mjs

@@ -11,13 +11,13 @@ export class CardInputSectionOrganism {
     }
 }
 CardInputSectionOrganism.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: CardInputSectionOrganism, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CardInputSectionOrganism.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: CardInputSectionOrganism, isStandalone: true, selector: "organisms-card-input-section", inputs: { control: "control", label: "label", placeholder: "placeholder" }, ngImport: i0, template: "<molecules-text-input-field\n  type=\"text\"\n  name=\"cardNumber\"\n  [control]=\"control\"\n  [label]=\"label\"\n  [placeholder]=\"placeholder\"\n></molecules-text-input-field>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-text-input-section-dPvh: var(--horizontal-padding)}:host{display:block;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-text-input-section-dPvh);box-sizing:border-box}:host .molecule.input-field,:host mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TextInputFieldMolecule, selector: "molecules-text-input-field", inputs: ["appearance", "type", "name", "label", "control", "placeholder", "hint"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CardInputSectionOrganism.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: CardInputSectionOrganism, isStandalone: true, selector: "organisms-card-input-section", inputs: { control: "control", label: "label", placeholder: "placeholder" }, ngImport: i0, template: "<molecules-text-input-field\n  type=\"text\"\n  name=\"cardNumber\"\n  [control]=\"control\"\n  [label]=\"label\"\n  [placeholder]=\"placeholder\"\n></molecules-text-input-field>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-text-input-section-itAf: var(--horizontal-padding)}:host{display:block;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-text-input-section-itAf);box-sizing:border-box}:host .molecule.input-field,:host mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TextInputFieldMolecule, selector: "molecules-text-input-field", inputs: ["appearance", "type", "name", "label", "control", "placeholder", "hint"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: CardInputSectionOrganism, decorators: [{
             type: Component,
             args: [{ selector: 'organisms-card-input-section', standalone: true, imports: [
                         CommonModule,
                         TextInputFieldMolecule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<molecules-text-input-field\n  type=\"text\"\n  name=\"cardNumber\"\n  [control]=\"control\"\n  [label]=\"label\"\n  [placeholder]=\"placeholder\"\n></molecules-text-input-field>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-text-input-section-dPvh: var(--horizontal-padding)}:host{display:block;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-text-input-section-dPvh);box-sizing:border-box}:host .molecule.input-field,:host mat-form-field{width:100%}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<molecules-text-input-field\n  type=\"text\"\n  name=\"cardNumber\"\n  [control]=\"control\"\n  [label]=\"label\"\n  [placeholder]=\"placeholder\"\n></molecules-text-input-field>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-text-input-section-itAf: var(--horizontal-padding)}:host{display:block;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-text-input-section-itAf);box-sizing:border-box}:host .molecule.input-field,:host mat-form-field{width:100%}\n"] }]
         }], propDecorators: { control: [{
                 type: Input
             }], label: [{

package/esm2020/organisms/cvc-and-exp-input-section/cvc-and-exp-input-section.organism.mjs

@@ -20,14 +20,14 @@ export class CvcAndExpInputSectionOrganism {
     }
 }
 CvcAndExpInputSectionOrganism.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: CvcAndExpInputSectionOrganism, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CvcAndExpInputSectionOrganism.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: CvcAndExpInputSectionOrganism, isStandalone: true, selector: "organisms-cvc-and-exp-input-section", inputs: { form: "form" }, ngImport: i0, template: "<molecules-select-input-field\n  class=\"year field\"\n  label=\"\u6709\u52B9\u671F\u9650(\u5E74)\"\n  [control]=\"form.get('expYear')\"\n  [options]=\"yearOptions\"\n></molecules-select-input-field>\n<molecules-select-input-field\n  class=\"month field\"\n  label=\"\u6709\u52B9\u671F\u9650(\u6708)\"\n  [control]=\"form.get('expMonth')\"\n  [options]=\"monthOptions\"\n></molecules-select-input-field>\n<molecules-text-input-field\n  class=\"cvc field\"\n  type=\"text\"\n  name=\"cardNumber\"\n  label=\"CVC\"\n  placeholder=\"4\u6841\u306E\u756A\u53F7\"\n  [control]=\"form.get('cvc')\"\n></molecules-text-input-field>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-text-input-section-djXA: var(--horizontal-padding)}:host{display:flex;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-text-input-section-djXA);box-sizing:border-box}:host .field:not(:first-child){margin-left:8px}:host .year.field,:host .month.field{width:auto}:host .cvc.field{width:100px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SelectInputFieldMolecule, selector: "molecules-select-input-field", inputs: ["label", "appearance", "control", "options"] }, { kind: "component", type: TextInputFieldMolecule, selector: "molecules-text-input-field", inputs: ["appearance", "type", "name", "label", "control", "placeholder", "hint"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CvcAndExpInputSectionOrganism.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: CvcAndExpInputSectionOrganism, isStandalone: true, selector: "organisms-cvc-and-exp-input-section", inputs: { form: "form" }, ngImport: i0, template: "<molecules-select-input-field\n  class=\"year field\"\n  label=\"\u6709\u52B9\u671F\u9650(\u5E74)\"\n  [control]=\"form.get('expYear')\"\n  [options]=\"yearOptions\"\n></molecules-select-input-field>\n<molecules-select-input-field\n  class=\"month field\"\n  label=\"\u6709\u52B9\u671F\u9650(\u6708)\"\n  [control]=\"form.get('expMonth')\"\n  [options]=\"monthOptions\"\n></molecules-select-input-field>\n<molecules-text-input-field\n  class=\"cvc field\"\n  type=\"text\"\n  name=\"cardNumber\"\n  label=\"CVC\"\n  placeholder=\"4\u6841\u306E\u756A\u53F7\"\n  [control]=\"form.get('cvc')\"\n></molecules-text-input-field>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-text-input-section-WuSd: var(--horizontal-padding)}:host{display:flex;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-text-input-section-WuSd);box-sizing:border-box}:host .field:not(:first-child){margin-left:8px}:host .year.field,:host .month.field{width:auto}:host .cvc.field{width:100px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SelectInputFieldMolecule, selector: "molecules-select-input-field", inputs: ["label", "appearance", "control", "options"] }, { kind: "component", type: TextInputFieldMolecule, selector: "molecules-text-input-field", inputs: ["appearance", "type", "name", "label", "control", "placeholder", "hint"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: CvcAndExpInputSectionOrganism, decorators: [{
             type: Component,
             args: [{ selector: 'organisms-cvc-and-exp-input-section', standalone: true, imports: [
                         CommonModule,
                         SelectInputFieldMolecule,
                         TextInputFieldMolecule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<molecules-select-input-field\n  class=\"year field\"\n  label=\"\u6709\u52B9\u671F\u9650(\u5E74)\"\n  [control]=\"form.get('expYear')\"\n  [options]=\"yearOptions\"\n></molecules-select-input-field>\n<molecules-select-input-field\n  class=\"month field\"\n  label=\"\u6709\u52B9\u671F\u9650(\u6708)\"\n  [control]=\"form.get('expMonth')\"\n  [options]=\"monthOptions\"\n></molecules-select-input-field>\n<molecules-text-input-field\n  class=\"cvc field\"\n  type=\"text\"\n  name=\"cardNumber\"\n  label=\"CVC\"\n  placeholder=\"4\u6841\u306E\u756A\u53F7\"\n  [control]=\"form.get('cvc')\"\n></molecules-text-input-field>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-text-input-section-djXA: var(--horizontal-padding)}:host{display:flex;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-text-input-section-djXA);box-sizing:border-box}:host .field:not(:first-child){margin-left:8px}:host .year.field,:host .month.field{width:auto}:host .cvc.field{width:100px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<molecules-select-input-field\n  class=\"year field\"\n  label=\"\u6709\u52B9\u671F\u9650(\u5E74)\"\n  [control]=\"form.get('expYear')\"\n  [options]=\"yearOptions\"\n></molecules-select-input-field>\n<molecules-select-input-field\n  class=\"month field\"\n  label=\"\u6709\u52B9\u671F\u9650(\u6708)\"\n  [control]=\"form.get('expMonth')\"\n  [options]=\"monthOptions\"\n></molecules-select-input-field>\n<molecules-text-input-field\n  class=\"cvc field\"\n  type=\"text\"\n  name=\"cardNumber\"\n  label=\"CVC\"\n  placeholder=\"4\u6841\u306E\u756A\u53F7\"\n  [control]=\"form.get('cvc')\"\n></molecules-text-input-field>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-text-input-section-WuSd: var(--horizontal-padding)}:host{display:flex;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-text-input-section-WuSd);box-sizing:border-box}:host .field:not(:first-child){margin-left:8px}:host .year.field,:host .month.field{width:auto}:host .cvc.field{width:100px}\n"] }]
         }], propDecorators: { form: [{
                 type: Input
             }] } });

package/esm2020/organisms/date-input-section/date-input-section.organism.mjs

@@ -12,13 +12,13 @@ export class DateInputSectionOrganism {
     }
 }
 DateInputSectionOrganism.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: DateInputSectionOrganism, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DateInputSectionOrganism.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: DateInputSectionOrganism, isStandalone: true, selector: "organisms-date-input-section", inputs: { control: "control", label: "label", placeholder: "placeholder" }, host: { classAttribute: "organism section" }, ngImport: i0, template: "<molecules-date-input-field\n  [control]=\"control\"\n  [label]=\"label\"\n  [placeholder]=\"placeholder\"\n></molecules-date-input-field>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-date-input-section-iw0G: var(--horizontal-padding)}:host{display:block;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-date-input-section-iw0G);box-sizing:border-box}:host mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DateInputFieldMolecule, selector: "molecules-date-input-field", inputs: ["control", "label", "placeholder", "hint"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DateInputSectionOrganism.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: DateInputSectionOrganism, isStandalone: true, selector: "organisms-date-input-section", inputs: { control: "control", label: "label", placeholder: "placeholder" }, host: { classAttribute: "organism section" }, ngImport: i0, template: "<molecules-date-input-field\n  [control]=\"control\"\n  [label]=\"label\"\n  [placeholder]=\"placeholder\"\n></molecules-date-input-field>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-date-input-section-yFr2: var(--horizontal-padding)}:host{display:block;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-date-input-section-yFr2);box-sizing:border-box}:host mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DateInputFieldMolecule, selector: "molecules-date-input-field", inputs: ["control", "label", "placeholder", "hint"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: DateInputSectionOrganism, decorators: [{
             type: Component,
             args: [{ selector: 'organisms-date-input-section', standalone: true, imports: [
                         CommonModule,
                         DateInputFieldMolecule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'organism section' }, template: "<molecules-date-input-field\n  [control]=\"control\"\n  [label]=\"label\"\n  [placeholder]=\"placeholder\"\n></molecules-date-input-field>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-date-input-section-iw0G: var(--horizontal-padding)}:host{display:block;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-date-input-section-iw0G);box-sizing:border-box}:host mat-form-field{width:100%}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'organism section' }, template: "<molecules-date-input-field\n  [control]=\"control\"\n  [label]=\"label\"\n  [placeholder]=\"placeholder\"\n></molecules-date-input-field>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-date-input-section-yFr2: var(--horizontal-padding)}:host{display:block;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-date-input-section-yFr2);box-sizing:border-box}:host mat-form-field{width:100%}\n"] }]
         }], propDecorators: { control: [{
                 type: Input
             }], label: [{