@ng-atomic/components 17.9.0 → 17.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/atoms/icon/icon.atom.mjs +2 -2
- package/esm2022/components.module.mjs +3 -2
- package/esm2022/frames/app/app.frame.mjs +192 -16
- package/esm2022/frames/auto-layout/auto-layout.frame.mjs +2 -2
- package/esm2022/frames/columns/columns.frame.mjs +4 -4
- package/esm2022/frames/divider/divider.frame.mjs +2 -2
- package/esm2022/frames/drawer/drawer.frame.mjs +2 -2
- package/esm2022/frames/entrance/entrance.frame.mjs +2 -2
- package/esm2022/frames/fab/fab.frame.mjs +2 -2
- package/esm2022/frames/frames.module.mjs +2 -1
- package/esm2022/frames/line-up/line-up.frame.mjs +2 -2
- package/esm2022/frames/loading/loading.frame.mjs +2 -2
- package/esm2022/frames/router-outlet/router-outlet.frame.mjs +11 -4
- package/esm2022/frames/scroll/scroll.frame.mjs +2 -2
- package/esm2022/frames/scroll-v2/scroll.frame.mjs +2 -2
- package/esm2022/frames/side-nav/side-nav.frame.mjs +34 -28
- package/esm2022/frames/smart-menu/smart-menu.frame.mjs +2 -2
- package/esm2022/frames/vertical-hide/vertical-hide.frame.mjs +2 -2
- package/esm2022/molecules/checkbox-column/checkbox-column.molecule.mjs +48 -11
- package/esm2022/molecules/date-input-field/date-input-field.molecule.mjs +2 -2
- package/esm2022/molecules/date-range-input-field/date-range-input-field.molecule.mjs +2 -2
- package/esm2022/molecules/grid-item/grid-item.molecule.mjs +2 -2
- package/esm2022/molecules/loading-box/loading-box.molecule.mjs +2 -2
- package/esm2022/molecules/navigation-list-item/navigation-list-item.molecule.mjs +11 -8
- package/esm2022/molecules/select-input-field/select-input-field.molecule.mjs +2 -2
- package/esm2022/organisms/action-buttons-section/action-buttons-section.organism.mjs +2 -2
- package/esm2022/organisms/action-input-section/action-input-section.organism.mjs +2 -2
- package/esm2022/organisms/card-input-section/card-input-section.organism.mjs +2 -2
- package/esm2022/organisms/cvc-and-exp-input-section/cvc-and-exp-input-section.organism.mjs +2 -2
- package/esm2022/organisms/date-input-section/date-input-section.organism.mjs +2 -2
- package/esm2022/organisms/date-range-input-section/date-range-input-section.organism.mjs +2 -2
- package/esm2022/organisms/definition-list/definition-list.organism.mjs +2 -2
- package/esm2022/organisms/file-input-section/file-input-section.organism.mjs +2 -2
- package/esm2022/organisms/grid-cards-section/grid-cards-section.organism.mjs +2 -2
- package/esm2022/organisms/heading/heading.organism.mjs +2 -2
- package/esm2022/organisms/menu-footer/menu-footer.organism.mjs +2 -2
- package/esm2022/organisms/menu-header/menu-header.organism.mjs +4 -5
- package/esm2022/organisms/messages-section/messages-section.organism.mjs +2 -2
- package/esm2022/organisms/navigation-list/navigation-list.organism.mjs +51 -20
- package/esm2022/organisms/navigator/navigator.organism.mjs +3 -3
- package/esm2022/organisms/number-input-section/number-input-section.organism.mjs +2 -2
- package/esm2022/organisms/paginator/paginator.organism.mjs +2 -2
- package/esm2022/organisms/password-input-section/password-input-section.organism.mjs +2 -2
- package/esm2022/organisms/select-input-section/select-input-section.organism.mjs +2 -2
- package/esm2022/organisms/slider-input-section/slider-input-section.organism.mjs +4 -4
- package/esm2022/organisms/smart-list/smart-list.organism.mjs +11 -3
- package/esm2022/organisms/social-login-section/social-login-section.organism.mjs +2 -2
- package/esm2022/organisms/table/index.helpers.mjs +3 -1
- package/esm2022/organisms/table/table.organism.mjs +205 -101
- package/esm2022/organisms/text-input-section/text-input-section.organism.mjs +2 -2
- package/esm2022/organisms/textarea-section/textarea-section.organism.mjs +2 -2
- package/esm2022/organisms/thread-messages-section/thread-messages-section.organism.mjs +2 -2
- package/esm2022/pages/_index/index.page.mjs +242 -50
- package/esm2022/pages/form/form.page.mjs +71 -46
- package/esm2022/pages/pages.module.mjs +3 -4
- package/esm2022/templates/_index/index.template.mjs +66 -28
- package/esm2022/templates/background/background.template.mjs +2 -2
- package/esm2022/templates/entrance/entrance.template.mjs +2 -2
- package/esm2022/templates/form/form.builder.mjs +12 -2
- package/esm2022/templates/form/form.template.mjs +2 -2
- package/esm2022/templates/icon-button-menu/icon-button-menu.template.mjs +2 -2
- package/esm2022/templates/menu/menu.template.mjs +3 -3
- package/esm2022/templates/selection/selection.template.mjs +2 -2
- package/esm2022/templates/settings/settings.template.mjs +2 -2
- package/fesm2022/ng-atomic-components-atoms-icon.mjs +2 -2
- package/fesm2022/ng-atomic-components-frames-app.mjs +191 -15
- package/fesm2022/ng-atomic-components-frames-app.mjs.map +1 -1
- package/fesm2022/ng-atomic-components-frames-auto-layout.mjs +2 -2
- package/fesm2022/ng-atomic-components-frames-columns.mjs +3 -3
- package/fesm2022/ng-atomic-components-frames-columns.mjs.map +1 -1
- package/fesm2022/ng-atomic-components-frames-divider.mjs +2 -2
- package/fesm2022/ng-atomic-components-frames-drawer.mjs +2 -2
- package/fesm2022/ng-atomic-components-frames-entrance.mjs +2 -2
- package/fesm2022/ng-atomic-components-frames-fab.mjs +2 -2
- package/fesm2022/ng-atomic-components-frames-line-up.mjs +2 -2
- package/fesm2022/ng-atomic-components-frames-loading.mjs +2 -2
- package/fesm2022/ng-atomic-components-frames-router-outlet.mjs +10 -3
- package/fesm2022/ng-atomic-components-frames-router-outlet.mjs.map +1 -1
- package/fesm2022/ng-atomic-components-frames-scroll-v2.mjs +2 -2
- package/fesm2022/ng-atomic-components-frames-scroll.mjs +2 -2
- package/fesm2022/ng-atomic-components-frames-side-nav.mjs +33 -27
- package/fesm2022/ng-atomic-components-frames-side-nav.mjs.map +1 -1
- package/fesm2022/ng-atomic-components-frames-smart-menu.mjs +2 -2
- package/fesm2022/ng-atomic-components-frames-vertical-hide.mjs +2 -2
- package/fesm2022/ng-atomic-components-frames.mjs +1 -0
- package/fesm2022/ng-atomic-components-frames.mjs.map +1 -1
- package/fesm2022/ng-atomic-components-molecules-checkbox-column.mjs +47 -10
- package/fesm2022/ng-atomic-components-molecules-checkbox-column.mjs.map +1 -1
- package/fesm2022/ng-atomic-components-molecules-date-input-field.mjs +2 -2
- package/fesm2022/ng-atomic-components-molecules-date-range-input-field.mjs +2 -2
- package/fesm2022/ng-atomic-components-molecules-grid-item.mjs +2 -2
- package/fesm2022/ng-atomic-components-molecules-loading-box.mjs +2 -2
- package/fesm2022/ng-atomic-components-molecules-navigation-list-item.mjs +10 -7
- package/fesm2022/ng-atomic-components-molecules-navigation-list-item.mjs.map +1 -1
- package/fesm2022/ng-atomic-components-molecules-select-input-field.mjs +2 -2
- package/fesm2022/ng-atomic-components-organisms-action-buttons-section.mjs +2 -2
- package/fesm2022/ng-atomic-components-organisms-action-input-section.mjs +2 -2
- package/fesm2022/ng-atomic-components-organisms-card-input-section.mjs +2 -2
- package/fesm2022/ng-atomic-components-organisms-cvc-and-exp-input-section.mjs +2 -2
- package/fesm2022/ng-atomic-components-organisms-date-input-section.mjs +2 -2
- package/fesm2022/ng-atomic-components-organisms-date-range-input-section.mjs +2 -2
- package/fesm2022/ng-atomic-components-organisms-definition-list.mjs +2 -2
- package/fesm2022/ng-atomic-components-organisms-file-input-section.mjs +2 -2
- package/fesm2022/ng-atomic-components-organisms-grid-cards-section.mjs +2 -2
- package/fesm2022/ng-atomic-components-organisms-heading.mjs +2 -2
- package/fesm2022/ng-atomic-components-organisms-menu-footer.mjs +2 -2
- package/fesm2022/ng-atomic-components-organisms-menu-header.mjs +3 -4
- package/fesm2022/ng-atomic-components-organisms-menu-header.mjs.map +1 -1
- package/fesm2022/ng-atomic-components-organisms-messages-section.mjs +2 -2
- package/fesm2022/ng-atomic-components-organisms-navigation-list.mjs +50 -19
- package/fesm2022/ng-atomic-components-organisms-navigation-list.mjs.map +1 -1
- package/fesm2022/ng-atomic-components-organisms-navigator.mjs +2 -2
- package/fesm2022/ng-atomic-components-organisms-navigator.mjs.map +1 -1
- package/fesm2022/ng-atomic-components-organisms-number-input-section.mjs +2 -2
- package/fesm2022/ng-atomic-components-organisms-paginator.mjs +2 -2
- package/fesm2022/ng-atomic-components-organisms-password-input-section.mjs +2 -2
- package/fesm2022/ng-atomic-components-organisms-select-input-section.mjs +2 -2
- package/fesm2022/ng-atomic-components-organisms-slider-input-section.mjs +3 -3
- package/fesm2022/ng-atomic-components-organisms-slider-input-section.mjs.map +1 -1
- package/fesm2022/ng-atomic-components-organisms-smart-list.mjs +10 -2
- package/fesm2022/ng-atomic-components-organisms-smart-list.mjs.map +1 -1
- package/fesm2022/ng-atomic-components-organisms-social-login-section.mjs +2 -2
- package/fesm2022/ng-atomic-components-organisms-table.mjs +206 -100
- package/fesm2022/ng-atomic-components-organisms-table.mjs.map +1 -1
- package/fesm2022/ng-atomic-components-organisms-text-input-section.mjs +2 -2
- package/fesm2022/ng-atomic-components-organisms-textarea-section.mjs +2 -2
- package/fesm2022/ng-atomic-components-organisms-thread-messages-section.mjs +2 -2
- package/fesm2022/ng-atomic-components-pages-_index.mjs +242 -50
- package/fesm2022/ng-atomic-components-pages-_index.mjs.map +1 -1
- package/fesm2022/ng-atomic-components-pages-form.mjs +71 -46
- package/fesm2022/ng-atomic-components-pages-form.mjs.map +1 -1
- package/fesm2022/ng-atomic-components-pages.mjs +2 -3
- package/fesm2022/ng-atomic-components-pages.mjs.map +1 -1
- package/fesm2022/ng-atomic-components-templates-_index.mjs +65 -27
- package/fesm2022/ng-atomic-components-templates-_index.mjs.map +1 -1
- package/fesm2022/ng-atomic-components-templates-background.mjs +2 -2
- package/fesm2022/ng-atomic-components-templates-entrance.mjs +2 -2
- package/fesm2022/ng-atomic-components-templates-form.mjs +13 -3
- package/fesm2022/ng-atomic-components-templates-form.mjs.map +1 -1
- package/fesm2022/ng-atomic-components-templates-icon-button-menu.mjs +2 -2
- package/fesm2022/ng-atomic-components-templates-menu.mjs +2 -2
- package/fesm2022/ng-atomic-components-templates-menu.mjs.map +1 -1
- package/fesm2022/ng-atomic-components-templates-selection.mjs +2 -2
- package/fesm2022/ng-atomic-components-templates-settings.mjs +2 -2
- package/fesm2022/ng-atomic-components.mjs +2 -1
- package/fesm2022/ng-atomic-components.mjs.map +1 -1
- package/frames/app/app.frame.d.ts +69 -52
- package/frames/columns/columns.frame.d.ts +3 -3
- package/frames/fab/fab.frame.d.ts +3 -3
- package/frames/router-outlet/router-outlet.frame.d.ts +4 -3
- package/frames/side-nav/side-nav.frame.d.ts +16 -12
- package/molecules/actions-column/actions-column.molecule.d.ts +3 -3
- package/molecules/checkbox-column/checkbox-column.molecule.d.ts +8 -2
- package/molecules/chips-input-field/chips-input-field.molecule.d.ts +3 -3
- package/molecules/loading-box/loading-box.molecule.d.ts +3 -3
- package/molecules/navigation-list-item/navigation-list-item.molecule.d.ts +3 -2
- package/organisms/menu-header/menu-header.organism.d.ts +10 -4
- package/organisms/navigation-list/navigation-list.organism.d.ts +2 -1
- package/organisms/navigator/navigator.organism.d.ts +3 -3
- package/organisms/slider-input-section/slider-input-section.organism.d.ts +3 -3
- package/organisms/smart-list/smart-list.organism.d.ts +14 -13
- package/organisms/stripe-input-section/stripe-input-section.organism.d.ts +3 -3
- package/organisms/table/index.helpers.d.ts +1 -0
- package/organisms/table/table.organism.d.ts +39 -9
- package/package.json +3 -3
- package/pages/_index/index.page.d.ts +123 -82
- package/pages/form/form.page.d.ts +69 -56
- package/pages/terms/terms.page.d.ts +3 -3
- package/templates/_index/index.template.d.ts +27 -15
- package/templates/form/form.template.d.ts +3 -3
|
@@ -65,7 +65,7 @@ class FabFrame extends NgAtomicComponent {
|
|
|
65
65
|
<mat-icon>{{ action?.icon ?? 'add' }}</mat-icon>
|
|
66
66
|
</button>
|
|
67
67
|
}
|
|
68
|
-
`, isInline: true, styles: [":host{--primary-color: #039be5;--primary-color-SCOPED-IN-fab-
|
|
68
|
+
`, isInline: true, styles: [":host{--primary-color: #039be5;--primary-color-SCOPED-IN-fab-01Rt: var(--primary-color);--container-color: var(--primary-color-SCOPED-IN-fab-01Rt);--container-color-SCOPED-IN-fab-01Rt: var(--container-color);--icon-color: #fff;--icon-color-SCOPED-IN-fab-01Rt: var(--icon-color);--fab-button-bottom: 16px;--fab-button-bottom-SCOPED-IN-fab-01Rt: var(--fab-button-bottom);--fab-button-right: 16px;--fab-button-right-SCOPED-IN-fab-01Rt: var(--fab-button-right)}:host{display:block;width:100%;height:100%;position:relative}:host button{position:absolute;z-index:2000;bottom:var(--fab-button-bottom-SCOPED-IN-fab-01Rt);right:var(--fab-button-right-SCOPED-IN-fab-01Rt);transition:all .3s ease;--mdc-fab-container-color: var(--container-color);--mdc-fab-icon-color: var(--icon-color);--mat-mdc-fab-color: var(--icon-color)}:host[hide=true] button{bottom:-120px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
69
69
|
}
|
|
70
70
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: FabFrame, decorators: [{
|
|
71
71
|
type: Component,
|
|
@@ -86,7 +86,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
|
|
|
86
86
|
},
|
|
87
87
|
], host: {
|
|
88
88
|
'[attr.hide]': 'store.hide()',
|
|
89
|
-
}, styles: [":host{--primary-color: #039be5;--primary-color-SCOPED-IN-fab-
|
|
89
|
+
}, styles: [":host{--primary-color: #039be5;--primary-color-SCOPED-IN-fab-01Rt: var(--primary-color);--container-color: var(--primary-color-SCOPED-IN-fab-01Rt);--container-color-SCOPED-IN-fab-01Rt: var(--container-color);--icon-color: #fff;--icon-color-SCOPED-IN-fab-01Rt: var(--icon-color);--fab-button-bottom: 16px;--fab-button-bottom-SCOPED-IN-fab-01Rt: var(--fab-button-bottom);--fab-button-right: 16px;--fab-button-right-SCOPED-IN-fab-01Rt: var(--fab-button-right)}:host{display:block;width:100%;height:100%;position:relative}:host button{position:absolute;z-index:2000;bottom:var(--fab-button-bottom-SCOPED-IN-fab-01Rt);right:var(--fab-button-right-SCOPED-IN-fab-01Rt);transition:all .3s ease;--mdc-fab-container-color: var(--container-color);--mdc-fab-icon-color: var(--icon-color);--mat-mdc-fab-color: var(--icon-color)}:host[hide=true] button{bottom:-120px}\n"] }]
|
|
90
90
|
}] });
|
|
91
91
|
|
|
92
92
|
/**
|
|
@@ -147,7 +147,7 @@ class LineUpFrame {
|
|
|
147
147
|
@if (store.hasNext()) {
|
|
148
148
|
<div class="next" @hasNext><ng-content select=[next] /></div>
|
|
149
149
|
}
|
|
150
|
-
`, isInline: true, styles: [":host{--gap: 0px;--gap-SCOPED-IN-line-up-
|
|
150
|
+
`, isInline: true, styles: [":host{--gap: 0px;--gap-SCOPED-IN-line-up-2XtM: var(--gap);--background-color: #ccc;--background-color-SCOPED-IN-line-up-2XtM: var(--background-color);--next-width: 100%;--next-width-SCOPED-IN-line-up-2XtM: var(--next-width);--next-max-width: fit-content;--next-max-width-SCOPED-IN-line-up-2XtM: var(--next-max-width);--translate-x: 0px;--translate-x-SCOPED-IN-line-up-2XtM: var(--translate-x)}:host{position:relative;transform:translate(var(--translate-x-SCOPED-IN-line-up-2XtM));transition:transform .3s ease-in-out;display:flex;justify-content:flex-start;gap:var(--gap-SCOPED-IN-line-up-2XtM);width:100%;height:100%}:host .main{max-width:100%;height:100%;z-index:2}:host .next{width:100%;height:100%;z-index:1}\n"], animations: LINE_UP_ANIMATIONS, changeDetection: i0.ChangeDetectionStrategy.Default }); }
|
|
151
151
|
}
|
|
152
152
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LineUpFrame, decorators: [{
|
|
153
153
|
type: Component,
|
|
@@ -163,7 +163,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
|
|
|
163
163
|
},
|
|
164
164
|
], host: {
|
|
165
165
|
'attr.has-next': 'store.hasNext()',
|
|
166
|
-
}, styles: [":host{--gap: 0px;--gap-SCOPED-IN-line-up-
|
|
166
|
+
}, styles: [":host{--gap: 0px;--gap-SCOPED-IN-line-up-2XtM: var(--gap);--background-color: #ccc;--background-color-SCOPED-IN-line-up-2XtM: var(--background-color);--next-width: 100%;--next-width-SCOPED-IN-line-up-2XtM: var(--next-width);--next-max-width: fit-content;--next-max-width-SCOPED-IN-line-up-2XtM: var(--next-max-width);--translate-x: 0px;--translate-x-SCOPED-IN-line-up-2XtM: var(--translate-x)}:host{position:relative;transform:translate(var(--translate-x-SCOPED-IN-line-up-2XtM));transition:transform .3s ease-in-out;display:flex;justify-content:flex-start;gap:var(--gap-SCOPED-IN-line-up-2XtM);width:100%;height:100%}:host .main{max-width:100%;height:100%;z-index:2}:host .next{width:100%;height:100%;z-index:1}\n"] }]
|
|
167
167
|
}] });
|
|
168
168
|
|
|
169
169
|
/**
|
|
@@ -26,7 +26,7 @@ class LoadingFrame extends NgAtomicComponent {
|
|
|
26
26
|
@if(store.isLoading()) {
|
|
27
27
|
<div class="loading"><mat-spinner /></div>
|
|
28
28
|
}
|
|
29
|
-
`, isInline: true, styles: [":host{--primary-color: inherit;--primary-color-SCOPED-IN-loading-
|
|
29
|
+
`, isInline: true, styles: [":host{--primary-color: inherit;--primary-color-SCOPED-IN-loading-jESp: var(--primary-color);--on-primary-color: inherit;--on-primary-color-SCOPED-IN-loading-jESp: var(--on-primary-color)}:host{position:relative;display:block;width:100%;height:100%}:host .loading{position:absolute;z-index:10000;display:flex;width:100%;height:100%;justify-content:center;align-items:center;background-color:#0006}:host .loading mat-spinner{--mdc-circular-progress-active-indicator-color: var(--primary-color)}:host .contents{position:absolute;top:0;left:0;display:block;width:100%;height:100%}:host *{--primary-color: var(--primary-color-SCOPED-IN-loading-jESp);--on-primary-color: var(--on-primary-color-SCOPED-IN-loading-jESp)}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
30
30
|
}
|
|
31
31
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LoadingFrame, decorators: [{
|
|
32
32
|
type: Component,
|
|
@@ -42,7 +42,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
|
|
|
42
42
|
directive: LoadingFrameStore,
|
|
43
43
|
inputs: ['isLoading'],
|
|
44
44
|
}
|
|
45
|
-
], styles: [":host{--primary-color: inherit;--primary-color-SCOPED-IN-loading-
|
|
45
|
+
], styles: [":host{--primary-color: inherit;--primary-color-SCOPED-IN-loading-jESp: var(--primary-color);--on-primary-color: inherit;--on-primary-color-SCOPED-IN-loading-jESp: var(--on-primary-color)}:host{position:relative;display:block;width:100%;height:100%}:host .loading{position:absolute;z-index:10000;display:flex;width:100%;height:100%;justify-content:center;align-items:center;background-color:#0006}:host .loading mat-spinner{--mdc-circular-progress-active-indicator-color: var(--primary-color)}:host .contents{position:absolute;top:0;left:0;display:block;width:100%;height:100%}:host *{--primary-color: var(--primary-color-SCOPED-IN-loading-jESp);--on-primary-color: var(--on-primary-color-SCOPED-IN-loading-jESp)}\n"] }]
|
|
46
46
|
}] });
|
|
47
47
|
|
|
48
48
|
/**
|
|
@@ -27,7 +27,7 @@ class RouterOutletFrameStore extends InjectableComponent {
|
|
|
27
27
|
default: return 'lineup';
|
|
28
28
|
}
|
|
29
29
|
};
|
|
30
|
-
return (
|
|
30
|
+
return (context) => {
|
|
31
31
|
return ({
|
|
32
32
|
frame: getFrame(context.breakpoint),
|
|
33
33
|
name: PRIMARY_OUTLET,
|
|
@@ -40,6 +40,13 @@ class RouterOutletFrameStore extends InjectableComponent {
|
|
|
40
40
|
return (config) => ({ ...config, isActivated: (outlet) => !!outlet.isActivated });
|
|
41
41
|
});
|
|
42
42
|
}
|
|
43
|
+
static { this.provideSideAppConfig = () => {
|
|
44
|
+
return RouterOutletFrameStore.Config.provide(() => (config) => ({
|
|
45
|
+
...config,
|
|
46
|
+
name: 'side-app',
|
|
47
|
+
frame: 'overlay',
|
|
48
|
+
}));
|
|
49
|
+
}; }
|
|
43
50
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: RouterOutletFrameStore, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
44
51
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.2.2", type: RouterOutletFrameStore, isStandalone: true, selector: "frames-router-outlet", inputs: { frame: { classPropertyName: "frame", publicName: "frame", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, isActivated: { classPropertyName: "isActivated", publicName: "isActivated", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
45
52
|
}
|
|
@@ -80,7 +87,7 @@ class RouterOutletFrame extends NgAtomicComponent {
|
|
|
80
87
|
}
|
|
81
88
|
<ng-template #main><ng-content main /></ng-template>
|
|
82
89
|
<ng-template #next><router-outlet [name]="store.name()"/></ng-template>
|
|
83
|
-
`, isInline: true, styles: [":host{display:contents;--primary-color: #ccc;--primary-color-SCOPED-IN-router-outlet-
|
|
90
|
+
`, isInline: true, styles: [":host{display:contents;--primary-color: #ccc;--primary-color-SCOPED-IN-router-outlet-lmFF: var(--primary-color);--on-primary-color: #ccc;--on-primary-color-SCOPED-IN-router-outlet-lmFF: var(--on-primary-color);--surface-color: #ccc;--surface-color-SCOPED-IN-router-outlet-lmFF: var(--surface-color);--background-color: #ccc;--background-color-SCOPED-IN-router-outlet-lmFF: var(--background-color)}:host *{--primary-color: var(--primary-color-SCOPED-IN-router-outlet-lmFF);--on-primary-color: var(--on-primary-color-SCOPED-IN-router-outlet-lmFF);--surface-color: var(--surface-color-SCOPED-IN-router-outlet-lmFF);--background-color: var(--background-color-SCOPED-IN-router-outlet-lmFF)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: OverlayFrame, selector: "frames-overlay" }, { kind: "component", type: LineUpFrame, selector: "frames-line-up" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
84
91
|
}
|
|
85
92
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: RouterOutletFrame, decorators: [{
|
|
86
93
|
type: Component,
|
|
@@ -111,7 +118,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
|
|
|
111
118
|
directive: RouterOutletFrameStore,
|
|
112
119
|
inputs: ['frame', 'name'],
|
|
113
120
|
},
|
|
114
|
-
], styles: [":host{display:contents;--primary-color: #ccc;--primary-color-SCOPED-IN-router-outlet-
|
|
121
|
+
], styles: [":host{display:contents;--primary-color: #ccc;--primary-color-SCOPED-IN-router-outlet-lmFF: var(--primary-color);--on-primary-color: #ccc;--on-primary-color-SCOPED-IN-router-outlet-lmFF: var(--on-primary-color);--surface-color: #ccc;--surface-color-SCOPED-IN-router-outlet-lmFF: var(--surface-color);--background-color: #ccc;--background-color-SCOPED-IN-router-outlet-lmFF: var(--background-color)}:host *{--primary-color: var(--primary-color-SCOPED-IN-router-outlet-lmFF);--on-primary-color: var(--on-primary-color-SCOPED-IN-router-outlet-lmFF);--surface-color: var(--surface-color-SCOPED-IN-router-outlet-lmFF);--background-color: var(--background-color-SCOPED-IN-router-outlet-lmFF)}\n"] }]
|
|
115
122
|
}] });
|
|
116
123
|
|
|
117
124
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ng-atomic-components-frames-router-outlet.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/router-outlet/router-outlet.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/router-outlet/ng-atomic-components-frames-router-outlet.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Directive, inject, input, viewChild } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { OverlayFrame } from '@ng-atomic/components/frames/overlay';\nimport { LineUpFrame } from '@ng-atomic/components/frames/line-up';\nimport { PRIMARY_OUTLET, RouterOutlet } from '@angular/router';\nimport { Breakpoint } from '@ng-atomic/common/services/breakpoint';\nimport { makeConfig } from '@ng-atomic/common/services/ui';\nimport { InjectableComponent, NgAtomicComponent, _computed } from '@ng-atomic/core';\nimport { combineLatest, map, of, startWith } from 'rxjs';\nimport { computedAsync } from 'ngxtension/computed-async';\n\nfunction isBlankRoute(outlet: RouterOutlet): boolean {\n return !!(outlet?.activatedRouteData) && !(outlet.activatedRouteData?.['isBlank']);\n}\n\n@Directive({standalone: true, selector: 'frames-router-outlet'})\nexport class RouterOutletFrameStore extends InjectableComponent {\n static readonly Config = makeConfig(() => {\n const getFrame = (breakpoint: Breakpoint) => {\n switch(breakpoint) {\n case 'xSmall': return 'overlay' as 'lineup' | 'overlay';\n default: return 'lineup' as 'lineup' | 'overlay';\n }\n }\n return (
|
|
1
|
+
{"version":3,"file":"ng-atomic-components-frames-router-outlet.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/router-outlet/router-outlet.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/router-outlet/ng-atomic-components-frames-router-outlet.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Directive, inject, input, viewChild } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { OverlayFrame } from '@ng-atomic/components/frames/overlay';\nimport { LineUpFrame } from '@ng-atomic/components/frames/line-up';\nimport { PRIMARY_OUTLET, RouterOutlet } from '@angular/router';\nimport { Breakpoint } from '@ng-atomic/common/services/breakpoint';\nimport { makeConfig } from '@ng-atomic/common/services/ui';\nimport { InjectableComponent, NgAtomicComponent, _computed } from '@ng-atomic/core';\nimport { combineLatest, map, of, startWith } from 'rxjs';\nimport { computedAsync } from 'ngxtension/computed-async';\n\nfunction isBlankRoute(outlet: RouterOutlet): boolean {\n return !!(outlet?.activatedRouteData) && !(outlet.activatedRouteData?.['isBlank']);\n}\n\n@Directive({standalone: true, selector: 'frames-router-outlet'})\nexport class RouterOutletFrameStore extends InjectableComponent {\n static readonly Config = makeConfig(() => {\n const getFrame = (breakpoint: Breakpoint) => {\n switch(breakpoint) {\n case 'xSmall': return 'overlay' as 'lineup' | 'overlay';\n default: return 'lineup' as 'lineup' | 'overlay';\n }\n }\n return (context) => {\n return ({\n frame: getFrame(context.breakpoint),\n name: PRIMARY_OUTLET as string,\n isActivated: (outlet: RouterOutlet) => isBlankRoute(outlet),\n });\n }\n }, ['components', 'frames', 'router-outlet']);\n\n static provideExperimental() {\n return RouterOutletFrameStore.Config.provide(() => {\n return (config) => ({ ...config, isActivated: (outlet) => !!outlet.isActivated });\n });\n }\n\n static provideSideAppConfig = () => {\n return RouterOutletFrameStore.Config.provide(() => (config) => ({\n ...config,\n name: 'side-app',\n frame: 'overlay',\n }));\n }\n\n readonly config = RouterOutletFrameStore.Config.inject();\n readonly frame = input(_computed(() => this.config().frame));\n readonly name = input(_computed(() => this.config().name, { equal: (a, b) => a === b }));\n readonly isActivated = input(_computed(() => this.config().isActivated));\n} \n\n@Component({\n selector: 'frames-router-outlet',\n standalone: true,\n imports: [\n NgTemplateOutlet,\n OverlayFrame,\n LineUpFrame,\n RouterOutlet,\n ],\n template: `\n @switch (store.frame()) {\n @case ('lineup') {\n <frames-line-up [hasNext]=\"isActivated()\" [scope]=\"store.name()\">\n <ng-container *ngTemplateOutlet=\"main\" main/>\n <ng-container *ngTemplateOutlet=\"next\" next/>\n </frames-line-up>\n }\n @default {\n <frames-overlay [hasNext]=\"isActivated()\">\n <ng-container *ngTemplateOutlet=\"main\" main/>\n <ng-container *ngTemplateOutlet=\"next\" next/>\n </frames-overlay>\n }\n }\n <ng-template #main><ng-content main /></ng-template>\n <ng-template #next><router-outlet [name]=\"store.name()\"/></ng-template>\n `,\n styleUrls: ['./router-outlet.frame.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n hostDirectives: [\n {\n directive: RouterOutletFrameStore,\n inputs: ['frame', 'name'],\n },\n ],\n})\nexport class RouterOutletFrame extends NgAtomicComponent {\n protected store = inject(RouterOutletFrameStore);\n readonly outlet = viewChild(RouterOutlet);\n readonly isActivated = computedAsync(() => {\n const outlet = this.outlet();\n if (!outlet) return of(false);\n return combineLatest([\n outlet.activateEvents.pipe(startWith(null)), \n outlet.deactivateEvents.pipe(startWith(null)),\n ]).pipe(\n map(() => this.store.isActivated()(outlet)),\n )\n })\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -22,7 +22,7 @@ class ScrollFrame {
|
|
|
22
22
|
<div class="bottom">
|
|
23
23
|
<ng-content select=[bottom]></ng-content>
|
|
24
24
|
</div>
|
|
25
|
-
`, isInline: true, styles: [":host{--height: 100%;--height-SCOPED-IN-scroll-
|
|
25
|
+
`, isInline: true, styles: [":host{--height: 100%;--height-SCOPED-IN-scroll-AGnW: var(--height);--top-height: 56px;--top-height-SCOPED-IN-scroll-AGnW: var(--top-height);--bottom-height: 56px;--bottom-height-SCOPED-IN-scroll-AGnW: var(--bottom-height);--contents-gap: 16px;--contents-gap-SCOPED-IN-scroll-AGnW: var(--contents-gap)}:host{display:flex;width:100%;flex-direction:column;justify-content:space-between;height:var(--height-SCOPED-IN-scroll-AGnW);overflow:hidden}:host .top{height:-moz-fit-content;height:fit-content;transition:.5s height;touch-action:none}:host .contents{display:flex;flex:auto;flex-direction:column;gap:var(--contents-gap-SCOPED-IN-scroll-AGnW);transition:.5s height;overflow:scroll;box-sizing:border-box;-webkit-overflow-scrolling:touch}:host .contents::-webkit-scrollbar{display:none}:host .bottom{height:-moz-fit-content;height:fit-content}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
26
26
|
}
|
|
27
27
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ScrollFrame, decorators: [{
|
|
28
28
|
type: Component,
|
|
@@ -39,7 +39,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
|
|
|
39
39
|
<div class="bottom">
|
|
40
40
|
<ng-content select=[bottom]></ng-content>
|
|
41
41
|
</div>
|
|
42
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--height: 100%;--height-SCOPED-IN-scroll-
|
|
42
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--height: 100%;--height-SCOPED-IN-scroll-AGnW: var(--height);--top-height: 56px;--top-height-SCOPED-IN-scroll-AGnW: var(--top-height);--bottom-height: 56px;--bottom-height-SCOPED-IN-scroll-AGnW: var(--bottom-height);--contents-gap: 16px;--contents-gap-SCOPED-IN-scroll-AGnW: var(--contents-gap)}:host{display:flex;width:100%;flex-direction:column;justify-content:space-between;height:var(--height-SCOPED-IN-scroll-AGnW);overflow:hidden}:host .top{height:-moz-fit-content;height:fit-content;transition:.5s height;touch-action:none}:host .contents{display:flex;flex:auto;flex-direction:column;gap:var(--contents-gap-SCOPED-IN-scroll-AGnW);transition:.5s height;overflow:scroll;box-sizing:border-box;-webkit-overflow-scrolling:touch}:host .contents::-webkit-scrollbar{display:none}:host .bottom{height:-moz-fit-content;height:fit-content}\n"] }]
|
|
43
43
|
}], propDecorators: { contents: [{
|
|
44
44
|
type: ViewChild,
|
|
45
45
|
args: ['contents', { static: true }]
|
|
@@ -11,7 +11,7 @@ class ScrollFrame {
|
|
|
11
11
|
<div class="contents">
|
|
12
12
|
<ng-content select=[contents]></ng-content>
|
|
13
13
|
</div>
|
|
14
|
-
`, isInline: true, styles: [":host{--height: 100%;--height-SCOPED-IN-scroll-
|
|
14
|
+
`, isInline: true, styles: [":host{--height: 100%;--height-SCOPED-IN-scroll-ybM7: var(--height);--navigator-height: 56px;--navigator-height-SCOPED-IN-scroll-ybM7: var(--navigator-height)}:host{height:var(--height-SCOPED-IN-scroll-ybM7);overflow:hidden}:host .navigator{height:var(--navigator-height-SCOPED-IN-scroll-ybM7);transition:.5s height;overflow:hidden;touch-action:none}:host .contents{height:calc(var(--height-SCOPED-IN-scroll-ybM7) - var(--navigator-height-SCOPED-IN-scroll-ybM7));transition:.5s height;overflow:auto;-webkit-overflow-scrolling:touch}:host .contents::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
15
15
|
}
|
|
16
16
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ScrollFrame, decorators: [{
|
|
17
17
|
type: Component,
|
|
@@ -24,7 +24,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
|
|
|
24
24
|
<div class="contents">
|
|
25
25
|
<ng-content select=[contents]></ng-content>
|
|
26
26
|
</div>
|
|
27
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--height: 100%;--height-SCOPED-IN-scroll-
|
|
27
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--height: 100%;--height-SCOPED-IN-scroll-ybM7: var(--height);--navigator-height: 56px;--navigator-height-SCOPED-IN-scroll-ybM7: var(--navigator-height)}:host{height:var(--height-SCOPED-IN-scroll-ybM7);overflow:hidden}:host .navigator{height:var(--navigator-height-SCOPED-IN-scroll-ybM7);transition:.5s height;overflow:hidden;touch-action:none}:host .contents{height:calc(var(--height-SCOPED-IN-scroll-ybM7) - var(--navigator-height-SCOPED-IN-scroll-ybM7));transition:.5s height;overflow:auto;-webkit-overflow-scrolling:touch}:host .contents::-webkit-scrollbar{display:none}\n"] }]
|
|
28
28
|
}] });
|
|
29
29
|
|
|
30
30
|
/**
|
|
@@ -24,33 +24,33 @@ let SideNavFrameStore = class SideNavFrameStore extends InjectableComponent {
|
|
|
24
24
|
this.frameType = input(_computed(() => this.config().frameType));
|
|
25
25
|
}
|
|
26
26
|
static { SideNavFrameStore_1 = this; }
|
|
27
|
+
static { this.getMode = (context) => {
|
|
28
|
+
switch (context.breakpoint) {
|
|
29
|
+
case 'xSmall': return 'collapsed';
|
|
30
|
+
default: return 'expanded';
|
|
31
|
+
}
|
|
32
|
+
}; }
|
|
33
|
+
static { this.getFrameType = (context) => {
|
|
34
|
+
switch (context.breakpoint) {
|
|
35
|
+
case 'xSmall': return 'drawer';
|
|
36
|
+
default: return 'lineup';
|
|
37
|
+
}
|
|
38
|
+
}; }
|
|
39
|
+
static { this.getMenuType = (context) => {
|
|
40
|
+
switch (context.breakpoint) {
|
|
41
|
+
case 'xSmall': return 'menu';
|
|
42
|
+
case 'small':
|
|
43
|
+
case 'medium': return 'icon-button-menu';
|
|
44
|
+
default: return 'menu';
|
|
45
|
+
}
|
|
46
|
+
}; }
|
|
27
47
|
static { this.Config = makeConfig(() => {
|
|
28
|
-
|
|
29
|
-
switch (breakpoint) {
|
|
30
|
-
case 'xSmall': return 'drawer';
|
|
31
|
-
default: return 'lineup';
|
|
32
|
-
}
|
|
33
|
-
};
|
|
34
|
-
const getMenuType = (breakpoint) => {
|
|
35
|
-
switch (breakpoint) {
|
|
36
|
-
case 'xSmall': return 'menu';
|
|
37
|
-
case 'small':
|
|
38
|
-
case 'medium': return 'icon-button-menu';
|
|
39
|
-
default: return 'menu';
|
|
40
|
-
}
|
|
41
|
-
};
|
|
42
|
-
const getMode = (breakpoint) => {
|
|
43
|
-
switch (breakpoint) {
|
|
44
|
-
case 'xSmall': return 'collapsed';
|
|
45
|
-
default: return 'expanded';
|
|
46
|
-
}
|
|
47
|
-
};
|
|
48
|
-
return (_, context) => ({
|
|
48
|
+
return (context) => ({
|
|
49
49
|
actions: [],
|
|
50
|
-
menuType: getMenuType(context
|
|
50
|
+
menuType: SideNavFrameStore_1.getMenuType(context),
|
|
51
51
|
menuTitle: undefined,
|
|
52
|
-
mode: getMode(context
|
|
53
|
-
frameType: getFrameType(context
|
|
52
|
+
mode: SideNavFrameStore_1.getMode(context),
|
|
53
|
+
frameType: SideNavFrameStore_1.getFrameType(context),
|
|
54
54
|
});
|
|
55
55
|
}, ['components', 'frames', 'sideNav']); }
|
|
56
56
|
get attrFrame() {
|
|
@@ -117,7 +117,7 @@ class SideNavFrame extends NgAtomicComponent {
|
|
|
117
117
|
}
|
|
118
118
|
</ng-template>
|
|
119
119
|
<ng-template #contents><ng-content/></ng-template>
|
|
120
|
-
`, isInline: true, styles: [":host{--primary-color: #404040;--primary-color-SCOPED-IN-side-nav-
|
|
120
|
+
`, isInline: true, styles: [":host{--primary-color: #404040;--primary-color-SCOPED-IN-side-nav-wGtg: var(--primary-color);--secondary-color: #B0B0B0;--secondary-color-SCOPED-IN-side-nav-wGtg: var(--secondary-color);--background-color: #B0B0B0;--background-color-SCOPED-IN-side-nav-wGtg: var(--background-color);--on-background-color: #f0f0f0;--on-background-color-SCOPED-IN-side-nav-wGtg: var(--on-background-color);--surface-color: transparent;--surface-color-SCOPED-IN-side-nav-wGtg: var(--surface-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-side-nav-wGtg: var(--on-primary-color);--on-surface-color: #f0f0f0;--on-surface-color-SCOPED-IN-side-nav-wGtg: var(--on-surface-color);--menu-width: 220px;--menu-width-SCOPED-IN-side-nav-wGtg: var(--menu-width);--menu-background-color: var(--primary-color-SCOPED-IN-side-nav-wGtg);--menu-background-color-SCOPED-IN-side-nav-wGtg: var(--menu-background-color);--menu-on-background-color: var(--on-primary-color-SCOPED-IN-side-nav-wGtg);--menu-on-background-color-SCOPED-IN-side-nav-wGtg: var(--menu-on-background-color)}:host{display:block;width:100%;height:100%}:host *{--primary-color: var(--primary-color-SCOPED-IN-side-nav-wGtg);--secondary-color: var(--secondary-color-SCOPED-IN-side-nav-wGtg);--surface-color: var(--surface-color-SCOPED-IN-side-nav-wGtg);--background-color: var(--background-color-SCOPED-IN-side-nav-wGtg);--on-background-color: var(--on-background-color-SCOPED-IN-side-nav-wGtg);--on-primary-color: var(--on-primary-color-SCOPED-IN-side-nav-wGtg);--on-surface-color: var(--on-surface-color-SCOPED-IN-side-nav-wGtg)}:host .content{width:100%;height:100%}:host templates-icon-button-menu,:host templates-menu{width:var(--menu-width-SCOPED-IN-side-nav-wGtg);--background-color: var(--menu-background-color-SCOPED-IN-side-nav-wGtg);--on-background-color: var(--menu-on-background-color-SCOPED-IN-side-nav-wGtg)}:host[frame=lineup] .content{width:calc(100vw - var(--menu-width-SCOPED-IN-side-nav-wGtg));overflow:hidden}:host[frame=drawer] .menu,:host[frame=drawer] templates-menu{width:300px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LineUpFrame, selector: "frames-line-up" }, { kind: "directive", type: IconButtonMenuTemplateStore, selector: "templates-icon-button-menu", inputs: ["actions"] }, { kind: "directive", type: MenuTemplateStore, selector: "templates-menu", inputs: ["actions", "title"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
121
121
|
}
|
|
122
122
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: SideNavFrame, decorators: [{
|
|
123
123
|
type: Component,
|
|
@@ -172,9 +172,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
|
|
|
172
172
|
`, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
|
|
173
173
|
{
|
|
174
174
|
directive: SideNavFrameStore,
|
|
175
|
-
inputs: [
|
|
175
|
+
inputs: [
|
|
176
|
+
'actions',
|
|
177
|
+
'menuType',
|
|
178
|
+
'menuTitle',
|
|
179
|
+
'mode',
|
|
180
|
+
'frameType',
|
|
181
|
+
],
|
|
176
182
|
},
|
|
177
|
-
], styles: [":host{--primary-color: #404040;--primary-color-SCOPED-IN-side-nav-
|
|
183
|
+
], styles: [":host{--primary-color: #404040;--primary-color-SCOPED-IN-side-nav-wGtg: var(--primary-color);--secondary-color: #B0B0B0;--secondary-color-SCOPED-IN-side-nav-wGtg: var(--secondary-color);--background-color: #B0B0B0;--background-color-SCOPED-IN-side-nav-wGtg: var(--background-color);--on-background-color: #f0f0f0;--on-background-color-SCOPED-IN-side-nav-wGtg: var(--on-background-color);--surface-color: transparent;--surface-color-SCOPED-IN-side-nav-wGtg: var(--surface-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-side-nav-wGtg: var(--on-primary-color);--on-surface-color: #f0f0f0;--on-surface-color-SCOPED-IN-side-nav-wGtg: var(--on-surface-color);--menu-width: 220px;--menu-width-SCOPED-IN-side-nav-wGtg: var(--menu-width);--menu-background-color: var(--primary-color-SCOPED-IN-side-nav-wGtg);--menu-background-color-SCOPED-IN-side-nav-wGtg: var(--menu-background-color);--menu-on-background-color: var(--on-primary-color-SCOPED-IN-side-nav-wGtg);--menu-on-background-color-SCOPED-IN-side-nav-wGtg: var(--menu-on-background-color)}:host{display:block;width:100%;height:100%}:host *{--primary-color: var(--primary-color-SCOPED-IN-side-nav-wGtg);--secondary-color: var(--secondary-color-SCOPED-IN-side-nav-wGtg);--surface-color: var(--surface-color-SCOPED-IN-side-nav-wGtg);--background-color: var(--background-color-SCOPED-IN-side-nav-wGtg);--on-background-color: var(--on-background-color-SCOPED-IN-side-nav-wGtg);--on-primary-color: var(--on-primary-color-SCOPED-IN-side-nav-wGtg);--on-surface-color: var(--on-surface-color-SCOPED-IN-side-nav-wGtg)}:host .content{width:100%;height:100%}:host templates-icon-button-menu,:host templates-menu{width:var(--menu-width-SCOPED-IN-side-nav-wGtg);--background-color: var(--menu-background-color-SCOPED-IN-side-nav-wGtg);--on-background-color: var(--menu-on-background-color-SCOPED-IN-side-nav-wGtg)}:host[frame=lineup] .content{width:calc(100vw - var(--menu-width-SCOPED-IN-side-nav-wGtg));overflow:hidden}:host[frame=drawer] .menu,:host[frame=drawer] templates-menu{width:300px}\n"] }]
|
|
178
184
|
}] });
|
|
179
185
|
|
|
180
186
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ng-atomic-components-frames-side-nav.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/side-nav/side-nav.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/side-nav/ng-atomic-components-frames-side-nav.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Directive, HostBinding, WritableSignal, inject, input, signal } from '@angular/core';\nimport { Breakpoint } from '@ng-atomic/common/services/breakpoint';\nimport { makeConfig } from '@ng-atomic/common/services/ui';\nimport { DrawerFrame } from '@ng-atomic/components/frames/drawer';\nimport { LineUpFrame } from '@ng-atomic/components/frames/line-up';\nimport { MenuTemplateStore } from '@ng-atomic/components/templates/menu';\nimport { NgAtomicComponent, TokenizedType, _computed } from '@ng-atomic/core';\nimport { IconButtonMenuTemplateStore } from '@ng-atomic/components/templates/icon-button-menu';\nimport { InjectableComponent } from '@ng-atomic/core';\n\nexport function injectSideNavMode(): WritableSignal<'collapsed' | 'expanded'> {\n return signal<'collapsed' | 'expanded'>('collapsed');\n}\n\n@TokenizedType()\n@Directive({ standalone: true, selector: 'frames-side-nav' })\nexport class SideNavFrameStore extends InjectableComponent {\n static
|
|
1
|
+
{"version":3,"file":"ng-atomic-components-frames-side-nav.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/side-nav/side-nav.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/side-nav/ng-atomic-components-frames-side-nav.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Directive, HostBinding, WritableSignal, inject, input, signal } from '@angular/core';\nimport { Breakpoint } from '@ng-atomic/common/services/breakpoint';\nimport { makeConfig, UIContext } from '@ng-atomic/common/services/ui';\nimport { DrawerFrame } from '@ng-atomic/components/frames/drawer';\nimport { LineUpFrame } from '@ng-atomic/components/frames/line-up';\nimport { MenuTemplateStore } from '@ng-atomic/components/templates/menu';\nimport { NgAtomicComponent, TokenizedType, _computed } from '@ng-atomic/core';\nimport { IconButtonMenuTemplateStore } from '@ng-atomic/components/templates/icon-button-menu';\nimport { InjectableComponent } from '@ng-atomic/core';\n\nexport function injectSideNavMode(): WritableSignal<'collapsed' | 'expanded'> {\n return signal<'collapsed' | 'expanded'>('collapsed');\n}\n\n@TokenizedType()\n@Directive({ standalone: true, selector: 'frames-side-nav' })\nexport class SideNavFrameStore extends InjectableComponent {\n static getMode = (context: UIContext) => {\n switch (context.breakpoint) {\n case 'xSmall': return 'collapsed';\n default: return 'expanded';\n }\n };\n\n static getFrameType = (context: UIContext): 'lineup' | 'drawer' => {\n switch (context.breakpoint) {\n case 'xSmall': return 'drawer';\n default: return 'lineup';\n }\n };\n\n static getMenuType = (context: UIContext): 'menu' | 'icon-button-menu' => {\n switch (context.breakpoint) {\n case 'xSmall': return 'menu';\n case 'small':\n case 'medium': return 'icon-button-menu';\n default: return 'menu';\n }\n };\n\n static readonly Config = makeConfig(() => {\n return (context) => ({\n actions: [],\n menuType: SideNavFrameStore.getMenuType(context),\n menuTitle: undefined as string,\n mode: SideNavFrameStore.getMode(context),\n frameType: SideNavFrameStore.getFrameType(context),\n });\n }, ['components', 'frames', 'sideNav']);\n\n readonly config = SideNavFrameStore.Config.inject();\n readonly actions = input(_computed(() => this.config().actions));\n readonly menuType = input(_computed(() => this.config().menuType));\n readonly menuTitle = input(_computed(() => this.config().menuTitle));\n readonly mode = input(_computed(() => this.config().mode));\n readonly frameType = input(_computed(() => this.config().frameType));\n\n @HostBinding('attr.frame')\n get attrFrame() {\n return this.frameType();\n }\n}\n\n\n@Component({\n standalone: true,\n imports: [\n NgTemplateOutlet,\n DrawerFrame,\n LineUpFrame,\n IconButtonMenuTemplateStore,\n MenuTemplateStore,\n ],\n selector: 'frames-side-nav',\n template: `\n @switch (store.frameType()) {\n @case ('drawer') {\n @defer {\n <frames-drawer [opened]=\"store.mode() === 'expanded'\">\n <ng-container *ngTemplateOutlet=\"menu\" drawer/>\n <ng-container *ngTemplateOutlet=\"contents\" contents/>\n </frames-drawer>\n }\n }\n @default {\n <!-- @defer { -->\n <frames-line-up [hasNext]=\"true\" [scope]=\"'nav'\">\n <ng-container *ngTemplateOutlet=\"menu\" main/>\n <div class=\"content\" next><ng-container *ngTemplateOutlet=\"contents\"/></div>\n </frames-line-up>\n <!-- } -->\n }\n }\n\n <ng-template #menu>\n @switch (store.menuType()) {\n @case ('icon-button-menu') {\n <!-- @defer { -->\n <templates-icon-button-menu injectable\n [actions]=\"store.actions()\"\n (action)=\"dispatch($event)\"\n />\n <!-- } -->\n }\n @default {\n <!-- @defer { -->\n <templates-menu injectable\n [title]=\"store.menuTitle()\"\n [actions]=\"store.actions()\"\n (action)=\"dispatch($event)\"\n />\n <!-- } -->\n }\n }\n </ng-template>\n <ng-template #contents><ng-content/></ng-template>\n `,\n styleUrls: ['./side-nav.frame.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n hostDirectives: [\n {\n directive: SideNavFrameStore,\n inputs: [\n 'actions',\n 'menuType',\n 'menuTitle',\n 'mode',\n 'frameType',\n ],\n },\n ],\n})\nexport class SideNavFrame extends NgAtomicComponent {\n protected store = inject(SideNavFrameStore);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -14,13 +14,13 @@ class SmartMenuFrame {
|
|
|
14
14
|
return page === 'Blank' ? 'Blank' : this.isMainHidden ? `Next` : `NextWithMainPage`;
|
|
15
15
|
}
|
|
16
16
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: SmartMenuFrame, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
17
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: SmartMenuFrame, isStandalone: true, selector: "frames-smart-menu", inputs: { label: "label", outlet: "outlet", minNextWidth: "minNextWidth" }, host: { properties: { "attr.is-main-hidden": "this.isMainHidden" } }, viewQueries: [{ propertyName: "next", first: true, predicate: ["next"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"menu\" #menu>\n <ng-content select=\"[menu]\"></ng-content>\n</div>\n<div class=\"contents\" #contents>\n <ng-content select=\"[contents]\"></ng-content>\n</div>", styles: [":host{--gap: 1px;--gap-SCOPED-IN-smart-menu-
|
|
17
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: SmartMenuFrame, isStandalone: true, selector: "frames-smart-menu", inputs: { label: "label", outlet: "outlet", minNextWidth: "minNextWidth" }, host: { properties: { "attr.is-main-hidden": "this.isMainHidden" } }, viewQueries: [{ propertyName: "next", first: true, predicate: ["next"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"menu\" #menu>\n <ng-content select=\"[menu]\"></ng-content>\n</div>\n<div class=\"contents\" #contents>\n <ng-content select=\"[contents]\"></ng-content>\n</div>", styles: [":host{--gap: 1px;--gap-SCOPED-IN-smart-menu-Pc5F: var(--gap);--background: #ccc;--background-SCOPED-IN-smart-menu-Pc5F: var(--background);--contents-background: transparent;--contents-background-SCOPED-IN-smart-menu-Pc5F: var(--contents-background)}:host{position:relative;display:flex;justify-content:flex-start;gap:var(--gap-SCOPED-IN-smart-menu-Pc5F);width:-moz-fit-content;width:fit-content;height:100%;background:var(--background-SCOPED-IN-smart-menu-Pc5F)}:host .contents{display:flex;max-width:-moz-fit-content;max-width:fit-content;height:100%;background:var(--contents-background-SCOPED-IN-smart-menu-Pc5F)}: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 }); }
|
|
18
18
|
}
|
|
19
19
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: SmartMenuFrame, decorators: [{
|
|
20
20
|
type: Component,
|
|
21
21
|
args: [{ standalone: true, imports: [
|
|
22
22
|
CommonModule,
|
|
23
|
-
], 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-
|
|
23
|
+
], 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-Pc5F: var(--gap);--background: #ccc;--background-SCOPED-IN-smart-menu-Pc5F: var(--background);--contents-background: transparent;--contents-background-SCOPED-IN-smart-menu-Pc5F: var(--contents-background)}:host{position:relative;display:flex;justify-content:flex-start;gap:var(--gap-SCOPED-IN-smart-menu-Pc5F);width:-moz-fit-content;width:fit-content;height:100%;background:var(--background-SCOPED-IN-smart-menu-Pc5F)}:host .contents{display:flex;max-width:-moz-fit-content;max-width:fit-content;height:100%;background:var(--contents-background-SCOPED-IN-smart-menu-Pc5F)}:host .contents.menu{overflow:hidden;justify-content:flex-end}:host .contents.contents{overflow:visible;justify-content:flex-start}\n"] }]
|
|
24
24
|
}], propDecorators: { isMainHidden: [{
|
|
25
25
|
type: HostBinding,
|
|
26
26
|
args: ['attr.is-main-hidden']
|
|
@@ -11,7 +11,7 @@ class VerticalHideFrame {
|
|
|
11
11
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: VerticalHideFrame, isStandalone: true, selector: "frames-vertical-hide", inputs: { mode: "mode" }, host: { properties: { "attr.mode": "this.mode" } }, ngImport: i0, template: `
|
|
12
12
|
<ng-content></ng-content>
|
|
13
13
|
<organisms-vertical-divider></organisms-vertical-divider>
|
|
14
|
-
`, isInline: true, styles: [":host{--collapsed-height: 200px;--collapsed-height-SCOPED-IN-vertical-hide-
|
|
14
|
+
`, isInline: true, styles: [":host{--collapsed-height: 200px;--collapsed-height-SCOPED-IN-vertical-hide-fRym: var(--collapsed-height);--expanded-height: 400px;--expanded-height-SCOPED-IN-vertical-hide-fRym: var(--expanded-height)}:host{position:relative;display:block;transition:.5s height}:host organisms-vertical-divider{position:absolute;bottom:0;width:100%}:host[mode=collapsed]{height:var(--collapsed-height-SCOPED-IN-vertical-hide-fRym)}:host[mode=expanded]{height:var(--expanded-height-SCOPED-IN-vertical-hide-fRym)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: VerticalDividerOrganism, selector: "organisms-vertical-divider" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
15
15
|
}
|
|
16
16
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: VerticalHideFrame, decorators: [{
|
|
17
17
|
type: Component,
|
|
@@ -21,7 +21,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
|
|
|
21
21
|
], template: `
|
|
22
22
|
<ng-content></ng-content>
|
|
23
23
|
<organisms-vertical-divider></organisms-vertical-divider>
|
|
24
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--collapsed-height: 200px;--collapsed-height-SCOPED-IN-vertical-hide-
|
|
24
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--collapsed-height: 200px;--collapsed-height-SCOPED-IN-vertical-hide-fRym: var(--collapsed-height);--expanded-height: 400px;--expanded-height-SCOPED-IN-vertical-hide-fRym: var(--expanded-height)}:host{position:relative;display:block;transition:.5s height}:host organisms-vertical-divider{position:absolute;bottom:0;width:100%}:host[mode=collapsed]{height:var(--collapsed-height-SCOPED-IN-vertical-hide-fRym)}:host[mode=expanded]{height:var(--expanded-height-SCOPED-IN-vertical-hide-fRym)}\n"] }]
|
|
25
25
|
}], propDecorators: { mode: [{
|
|
26
26
|
type: Input
|
|
27
27
|
}, {
|
|
@@ -14,6 +14,7 @@ class NgAtomicFramesModule {
|
|
|
14
14
|
ngModule: NgAtomicFramesModule,
|
|
15
15
|
providers: [
|
|
16
16
|
AppFrameStore.Config.provide(),
|
|
17
|
+
AppFrameStore.provideDefaultEffects(),
|
|
17
18
|
provideComponent(AppFrameStore, () => import('@ng-atomic/components/frames/app').then(m => m.AppFrame)),
|
|
18
19
|
ColumnsFrameStore.Config.provide(),
|
|
19
20
|
provideComponent(ColumnsFrameStore, () => import('@ng-atomic/components/frames/columns').then(m => m.ColumnsFrame)),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ng-atomic-components-frames.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/frames.module.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/ng-atomic-components-frames.ts"],"sourcesContent":["import { NgModule } from '@angular/core';\nimport { provideComponent } from '@ng-atomic/core';\nimport { SideNavFrame, SideNavFrameStore } from '@ng-atomic/components/frames/side-nav';\nimport { RouterOutletFrameStore } from '@ng-atomic/components/frames/router-outlet';\nimport { ColumnsFrameStore } from '@ng-atomic/components/frames/columns';\nimport { AppFrameStore } from '@ng-atomic/components/frames/app';\nimport { DrawerFrameStore } from '@ng-atomic/components/frames/drawer';\nimport { FabFrameStore } from '@ng-atomic/components/frames/fab';\n\n@NgModule({})\nexport class NgAtomicFramesModule {\n static forRoot() {\n return {\n ngModule: NgAtomicFramesModule,\n providers: [\n AppFrameStore.Config.provide(),\n provideComponent(AppFrameStore, () => import('@ng-atomic/components/frames/app').then(m => m.AppFrame)),\n ColumnsFrameStore.Config.provide(),\n provideComponent(ColumnsFrameStore, () => import('@ng-atomic/components/frames/columns').then(m => m.ColumnsFrame)),\n FabFrameStore.Config.provide(),\n provideComponent(FabFrameStore, () => import('@ng-atomic/components/frames/fab').then(m => m.FabFrame)),\n // DrawerFrameStore.Config.provide(),\n provideComponent(DrawerFrameStore, () => import('@ng-atomic/components/frames/drawer').then(m => m.DrawerFrame)),\n SideNavFrameStore.Config.provide(),\n provideComponent(SideNavFrame, () => import('@ng-atomic/components/frames/side-nav').then(m => m.SideNavFrame)),\n RouterOutletFrameStore.Config.provide(),\n provideComponent(RouterOutletFrameStore, () => import('@ng-atomic/components/frames/router-outlet').then(m => m.RouterOutletFrame)),\n ]\n };\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;MAUa,oBAAoB,CAAA;AAC/B,IAAA,OAAO,OAAO,GAAA;QACZ,OAAO;AACL,YAAA,QAAQ,EAAE,oBAAoB;AAC9B,YAAA,SAAS,EAAE;AACT,gBAAA,aAAa,CAAC,MAAM,CAAC,OAAO,EAAE;gBAC9B,gBAAgB,CAAC,aAAa,EAAE,MAAM,OAAO,kCAAkC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC;AACvG,gBAAA,iBAAiB,CAAC,MAAM,CAAC,OAAO,EAAE;gBAClC,gBAAgB,CAAC,iBAAiB,EAAE,MAAM,OAAO,sCAAsC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,YAAY,CAAC,CAAC;AACnH,gBAAA,aAAa,CAAC,MAAM,CAAC,OAAO,EAAE;gBAC9B,gBAAgB,CAAC,aAAa,EAAE,MAAM,OAAO,kCAAkC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC;;gBAEvG,gBAAgB,CAAC,gBAAgB,EAAE,MAAM,OAAO,qCAAqC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,CAAC;AAChH,gBAAA,iBAAiB,CAAC,MAAM,CAAC,OAAO,EAAE;gBAClC,gBAAgB,CAAC,YAAY,EAAE,MAAM,OAAO,uCAAuC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,YAAY,CAAC,CAAC;AAC/G,gBAAA,sBAAsB,CAAC,MAAM,CAAC,OAAO,EAAE;gBACvC,gBAAgB,CAAC,sBAAsB,EAAE,MAAM,OAAO,4CAA4C,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,iBAAiB,CAAC,CAAC;AACpI,aAAA;SACF,CAAC;KACH;
|
|
1
|
+
{"version":3,"file":"ng-atomic-components-frames.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/frames.module.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/ng-atomic-components-frames.ts"],"sourcesContent":["import { NgModule } from '@angular/core';\nimport { provideComponent } from '@ng-atomic/core';\nimport { SideNavFrame, SideNavFrameStore } from '@ng-atomic/components/frames/side-nav';\nimport { RouterOutletFrameStore } from '@ng-atomic/components/frames/router-outlet';\nimport { ColumnsFrameStore } from '@ng-atomic/components/frames/columns';\nimport { AppFrameStore } from '@ng-atomic/components/frames/app';\nimport { DrawerFrameStore } from '@ng-atomic/components/frames/drawer';\nimport { FabFrameStore } from '@ng-atomic/components/frames/fab';\n\n@NgModule({})\nexport class NgAtomicFramesModule {\n static forRoot() {\n return {\n ngModule: NgAtomicFramesModule,\n providers: [\n AppFrameStore.Config.provide(),\n AppFrameStore.provideDefaultEffects(),\n provideComponent(AppFrameStore, () => import('@ng-atomic/components/frames/app').then(m => m.AppFrame)),\n ColumnsFrameStore.Config.provide(),\n provideComponent(ColumnsFrameStore, () => import('@ng-atomic/components/frames/columns').then(m => m.ColumnsFrame)),\n FabFrameStore.Config.provide(),\n provideComponent(FabFrameStore, () => import('@ng-atomic/components/frames/fab').then(m => m.FabFrame)),\n // DrawerFrameStore.Config.provide(),\n provideComponent(DrawerFrameStore, () => import('@ng-atomic/components/frames/drawer').then(m => m.DrawerFrame)),\n SideNavFrameStore.Config.provide(),\n provideComponent(SideNavFrame, () => import('@ng-atomic/components/frames/side-nav').then(m => m.SideNavFrame)),\n RouterOutletFrameStore.Config.provide(),\n provideComponent(RouterOutletFrameStore, () => import('@ng-atomic/components/frames/router-outlet').then(m => m.RouterOutletFrame)),\n ]\n };\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;MAUa,oBAAoB,CAAA;AAC/B,IAAA,OAAO,OAAO,GAAA;QACZ,OAAO;AACL,YAAA,QAAQ,EAAE,oBAAoB;AAC9B,YAAA,SAAS,EAAE;AACT,gBAAA,aAAa,CAAC,MAAM,CAAC,OAAO,EAAE;gBAC9B,aAAa,CAAC,qBAAqB,EAAE;gBACrC,gBAAgB,CAAC,aAAa,EAAE,MAAM,OAAO,kCAAkC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC;AACvG,gBAAA,iBAAiB,CAAC,MAAM,CAAC,OAAO,EAAE;gBAClC,gBAAgB,CAAC,iBAAiB,EAAE,MAAM,OAAO,sCAAsC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,YAAY,CAAC,CAAC;AACnH,gBAAA,aAAa,CAAC,MAAM,CAAC,OAAO,EAAE;gBAC9B,gBAAgB,CAAC,aAAa,EAAE,MAAM,OAAO,kCAAkC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC;;gBAEvG,gBAAgB,CAAC,gBAAgB,EAAE,MAAM,OAAO,qCAAqC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,CAAC;AAChH,gBAAA,iBAAiB,CAAC,MAAM,CAAC,OAAO,EAAE;gBAClC,gBAAgB,CAAC,YAAY,EAAE,MAAM,OAAO,uCAAuC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,YAAY,CAAC,CAAC;AAC/G,gBAAA,sBAAsB,CAAC,MAAM,CAAC,OAAO,EAAE;gBACvC,gBAAgB,CAAC,sBAAsB,EAAE,MAAM,OAAO,4CAA4C,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,iBAAiB,CAAC,CAAC;AACpI,aAAA;SACF,CAAC;KACH;8GApBU,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;+GAApB,oBAAoB,EAAA,CAAA,CAAA,EAAA;+GAApB,oBAAoB,EAAA,CAAA,CAAA,EAAA;;2FAApB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBADhC,QAAQ;mBAAC,EAAE,CAAA;;;ACTZ;;AAEG;;;;"}
|
|
@@ -1,17 +1,20 @@
|
|
|
1
1
|
import { SelectionModel } from '@angular/cdk/collections';
|
|
2
2
|
import { CdkTable, CdkColumnDef, CdkCellDef, CdkHeaderCellDef } from '@angular/cdk/table';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { inject, input, viewChild, effect, Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
|
|
4
|
+
import { inject, input, viewChild, viewChildren, effect, Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
|
|
5
5
|
import * as i2 from '@angular/material/checkbox';
|
|
6
|
-
import { MAT_CHECKBOX_DEFAULT_OPTIONS, MatCheckboxModule } from '@angular/material/checkbox';
|
|
6
|
+
import { MatCheckbox, MAT_CHECKBOX_DEFAULT_OPTIONS, MatCheckboxModule } from '@angular/material/checkbox';
|
|
7
7
|
import * as i1 from '@angular/material/table';
|
|
8
8
|
import { MatTableModule } from '@angular/material/table';
|
|
9
9
|
import { SelectIdPipe } from '@ng-atomic/common/pipes/select-id';
|
|
10
10
|
import { NgAtomicComponent } from '@ng-atomic/core';
|
|
11
|
+
import { computedAsync } from 'ngxtension/computed-async';
|
|
12
|
+
import { startWith, delay, map } from 'rxjs';
|
|
11
13
|
|
|
12
14
|
var ActionId;
|
|
13
15
|
(function (ActionId) {
|
|
14
16
|
ActionId["CHECKBOX_CLICK"] = "[@ng-atomic/components/molecules/checkbox-column] Checkbox Click";
|
|
17
|
+
ActionId["HEADER_CHECKBOX_CLICK"] = "[@ng-atomic/components/molecules/checkbox-column] Header Checkbox Click";
|
|
15
18
|
})(ActionId || (ActionId = {}));
|
|
16
19
|
class CheckboxColumnMolecule extends NgAtomicComponent {
|
|
17
20
|
static { this.ActionId = ActionId; }
|
|
@@ -20,10 +23,27 @@ class CheckboxColumnMolecule extends NgAtomicComponent {
|
|
|
20
23
|
this._table = inject((CdkTable), { optional: true });
|
|
21
24
|
this.name = input.required();
|
|
22
25
|
this.selection = input(new SelectionModel(true, []));
|
|
23
|
-
this.isHidden = input((item) =>
|
|
26
|
+
this.isHidden = input((item) => false);
|
|
24
27
|
this.columnDef = viewChild.required(CdkColumnDef);
|
|
25
28
|
this.cell = viewChild.required(CdkCellDef);
|
|
26
29
|
this.headerCell = viewChild.required(CdkHeaderCellDef);
|
|
30
|
+
this.checkboxes = viewChildren('rowCheckbox', { read: MatCheckbox });
|
|
31
|
+
this.headerCheckboxChecked = computedAsync(() => {
|
|
32
|
+
return this.selection().changed.pipe(startWith(null), delay(0), map(() => {
|
|
33
|
+
if (this.checkboxes().length === 0)
|
|
34
|
+
return false;
|
|
35
|
+
return this.checkboxes().some(checkbox => checkbox.checked);
|
|
36
|
+
}));
|
|
37
|
+
});
|
|
38
|
+
this.headerCheckboxIndeterminate = computedAsync(() => {
|
|
39
|
+
return this.selection().changed.pipe(startWith(null), delay(0), map(() => {
|
|
40
|
+
if (this.checkboxes().filter(checkbox => checkbox.checked).length === 0)
|
|
41
|
+
return false;
|
|
42
|
+
if (this.checkboxes().every(checkbox => checkbox.checked))
|
|
43
|
+
return false;
|
|
44
|
+
return true;
|
|
45
|
+
}));
|
|
46
|
+
});
|
|
27
47
|
effect(() => {
|
|
28
48
|
if (this.columnDef())
|
|
29
49
|
this.columnDef().name = this.name();
|
|
@@ -42,20 +62,30 @@ class CheckboxColumnMolecule extends NgAtomicComponent {
|
|
|
42
62
|
this._table.removeColumnDef(this.columnDef());
|
|
43
63
|
}
|
|
44
64
|
}
|
|
65
|
+
onHeaderCheckboxClick(item, event) {
|
|
66
|
+
this.dispatch({ id: ActionId.HEADER_CHECKBOX_CLICK, payload: item });
|
|
67
|
+
}
|
|
45
68
|
onCheckboxClick(item, event) {
|
|
46
69
|
this.dispatch({ id: ActionId.CHECKBOX_CLICK, payload: item });
|
|
47
70
|
}
|
|
48
71
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: CheckboxColumnMolecule, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
49
72
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: CheckboxColumnMolecule, isStandalone: true, selector: "molecules-checkbox-column", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, isHidden: { classPropertyName: "isHidden", publicName: "isHidden", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
50
73
|
{ provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: { clickAction: 'noop' } }
|
|
51
|
-
], viewQueries: [{ propertyName: "columnDef", first: true, predicate: CdkColumnDef, descendants: true, isSignal: true }, { propertyName: "cell", first: true, predicate: CdkCellDef, descendants: true, isSignal: true }, { propertyName: "headerCell", first: true, predicate: CdkHeaderCellDef, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
|
|
74
|
+
], viewQueries: [{ propertyName: "columnDef", first: true, predicate: CdkColumnDef, descendants: true, isSignal: true }, { propertyName: "cell", first: true, predicate: CdkCellDef, descendants: true, isSignal: true }, { propertyName: "headerCell", first: true, predicate: CdkHeaderCellDef, descendants: true, isSignal: true }, { propertyName: "checkboxes", predicate: ["rowCheckbox"], descendants: true, read: MatCheckbox, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
|
|
52
75
|
<ng-container matColumnDef>
|
|
53
|
-
<th mat-header-cell *matHeaderCellDef
|
|
76
|
+
<th mat-header-cell *matHeaderCellDef>
|
|
77
|
+
<mat-checkbox
|
|
78
|
+
[checked]="headerCheckboxChecked()"
|
|
79
|
+
[indeterminate]="headerCheckboxIndeterminate()"
|
|
80
|
+
(click)="onHeaderCheckboxClick(item, $event)"
|
|
81
|
+
/>
|
|
82
|
+
</th>
|
|
54
83
|
<td mat-cell *matCellDef="let item">
|
|
55
|
-
@if (isHidden()(item)) {
|
|
84
|
+
@if (!isHidden()(item)) {
|
|
56
85
|
<mat-checkbox
|
|
57
|
-
(click)="onCheckboxClick(item, $event)"
|
|
58
86
|
[checked]="selection().isSelected(item | selectId)"
|
|
87
|
+
(click)="onCheckboxClick(item, $event)"
|
|
88
|
+
#rowCheckbox
|
|
59
89
|
/>
|
|
60
90
|
}
|
|
61
91
|
</td>
|
|
@@ -69,12 +99,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
|
|
|
69
99
|
SelectIdPipe,
|
|
70
100
|
], template: `
|
|
71
101
|
<ng-container matColumnDef>
|
|
72
|
-
<th mat-header-cell *matHeaderCellDef
|
|
102
|
+
<th mat-header-cell *matHeaderCellDef>
|
|
103
|
+
<mat-checkbox
|
|
104
|
+
[checked]="headerCheckboxChecked()"
|
|
105
|
+
[indeterminate]="headerCheckboxIndeterminate()"
|
|
106
|
+
(click)="onHeaderCheckboxClick(item, $event)"
|
|
107
|
+
/>
|
|
108
|
+
</th>
|
|
73
109
|
<td mat-cell *matCellDef="let item">
|
|
74
|
-
@if (isHidden()(item)) {
|
|
110
|
+
@if (!isHidden()(item)) {
|
|
75
111
|
<mat-checkbox
|
|
76
|
-
(click)="onCheckboxClick(item, $event)"
|
|
77
112
|
[checked]="selection().isSelected(item | selectId)"
|
|
113
|
+
(click)="onCheckboxClick(item, $event)"
|
|
114
|
+
#rowCheckbox
|
|
78
115
|
/>
|
|
79
116
|
}
|
|
80
117
|
</td>
|