@provoly/dashboard 0.21.11 → 0.22.2
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/dataset/components/dataset-detail/dataset-detail.component.mjs +1 -1
- package/esm2022/lib/core/components/select/select-a11y.service.mjs +10 -3
- package/esm2022/lib/core/model/automatic-grid-layout-definition.interface.mjs +2 -0
- package/esm2022/lib/core/model/manifest.interface.mjs +1 -1
- package/esm2022/lib/core/model/public-api.mjs +2 -1
- package/esm2022/lib/dashboard/components/dashboard.component.mjs +17 -11
- package/esm2022/lib/dashboard/components/widgets/header/widget-header.component.mjs +2 -4
- package/esm2022/lib/dashboard/components/widgets/widget-placement/widget-placement.utils.mjs +79 -125
- package/esm2022/lib/dashboard/dashboard.module.mjs +5 -8
- package/esm2022/lib/dashboard/store/dashboard.actions.mjs +1 -1
- package/esm2022/lib/dashboard/store/dashboard.effects.mjs +3 -3
- package/esm2022/lib/dashboard/store/dashboard.reducers.mjs +7 -5
- package/esm2022/lib/dashboard/store/dashboard.selectors.mjs +3 -4
- package/esm2022/presentation/components/add-edit-presentation/add-edit-presentation.component.mjs +4 -4
- package/esm2022/presentation/components/presentation.component.mjs +5 -6
- package/esm2022/search/search-home/search-home.component.mjs +1 -1
- package/esm2022/toolbox/components/select-grid-layout/select-grid-layout.component.mjs +6 -12
- package/esm2022/toolbox/style/css.component.mjs +2 -2
- package/fesm2022/provoly-dashboard-dataset.mjs +1 -1
- package/fesm2022/provoly-dashboard-dataset.mjs.map +1 -1
- package/fesm2022/provoly-dashboard-presentation.mjs +7 -8
- package/fesm2022/provoly-dashboard-presentation.mjs.map +1 -1
- package/fesm2022/provoly-dashboard-search.mjs.map +1 -1
- package/fesm2022/provoly-dashboard-toolbox.mjs +7 -13
- package/fesm2022/provoly-dashboard-toolbox.mjs.map +1 -1
- package/fesm2022/provoly-dashboard.mjs +187 -290
- package/fesm2022/provoly-dashboard.mjs.map +1 -1
- package/lib/core/model/automatic-grid-layout-definition.interface.d.ts +9 -0
- package/lib/core/model/manifest.interface.d.ts +2 -2
- package/lib/core/model/public-api.d.ts +1 -0
- package/lib/dashboard/components/dashboard.component.d.ts +4 -3
- package/lib/dashboard/components/widgets/header/widget-header.component.d.ts +2 -2
- package/lib/dashboard/components/widgets/widget-placement/widget-placement.utils.d.ts +14 -30
- package/lib/dashboard/dashboard.module.d.ts +2 -7
- package/lib/dashboard/store/dashboard.actions.d.ts +3 -3
- package/lib/dashboard/store/dashboard.selectors.d.ts +2 -2
- package/package.json +7 -7
- package/presentation/components/add-edit-presentation/add-edit-presentation.component.d.ts +2 -2
- package/search/search-home/search-home.component.d.ts +1 -1
- package/styles/components/_a-page-loader.scss +2 -4
- package/styles-theme/components-theme/_a-page-loader.theme.scss +9 -0
- package/styles-theme/main-theme.scss +1 -0
- package/toolbox/components/select-grid-layout/select-grid-layout.component.d.ts +4 -8
- package/toolbox/style/_o-select-grid-layout.scss +6 -1
- package/esm2022/lib/dashboard/store/proxy.utils.mjs +0 -72
- package/lib/dashboard/store/proxy.utils.d.ts +0 -26
|
@@ -115,11 +115,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
115
115
|
|
|
116
116
|
class PrySelectGridLayoutCssComponent {
|
|
117
117
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PrySelectGridLayoutCssComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
118
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PrySelectGridLayoutCssComponent, selector: "pry-toolbox-css", ngImport: i0, template: '', isInline: true, styles: [".o-select-grid-layout{margin:0;padding:0}.o-select-grid-layout li{list-style:none}.o-select-grid-layout-wrapper{overflow-y:auto;max-height:80%}.o-select-grid-layout-modal-wrapper{max-width:80%}.o-select-grid-layout{overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,auto));grid-gap:1.875rem;padding:.25rem .25rem 1.875rem}.o-select-grid-layout__item .a-btn{display:flex;flex-direction:column;align-items:center;justify-content:space-around;width:100%;height:
|
|
118
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PrySelectGridLayoutCssComponent, selector: "pry-toolbox-css", ngImport: i0, template: '', isInline: true, styles: [".o-select-grid-layout{margin:0;padding:0}.o-select-grid-layout li{list-style:none}.o-select-grid-layout-wrapper{overflow-y:auto;max-height:80%}.o-select-grid-layout-modal-wrapper{max-width:80%}.o-select-grid-layout{overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,auto));grid-gap:1.875rem;padding:.25rem .25rem 1.875rem}.o-select-grid-layout__item .a-btn{display:flex;flex-direction:column;align-items:center;justify-content:space-around;width:100%;height:18.75rem;padding:.9375rem;border-radius:0;text-align:left}.o-select-grid-layout__item .a-btn:focus{outline:2px solid #35b99f}.o-select-grid-layout__item .a-btn:focus:not(:focus-visible){outline:0}.o-select-grid-layout__item .a-btn:focus-visible{outline:0;border-radius:.125rem;box-shadow:0 0 0 2px #fff,0 0 0 4px #35b99f}.o-select-grid-layout__item .a-btn strong{display:block}.o-select-grid-layout__item .a-btn .a-p{margin-bottom:0;font-size:13px}.o-select-grid-layout__item__preview{height:6.25rem;width:100%}\n", ".o-select-grid-layout-wrapper{overflow-y:auto;max-height:80%}.o-select-grid-layout-modal-wrapper{max-width:60%;padding:1.875rem 2.5rem}.backdrop{background-color:#0000004d}.o-filters{width:100%}.o-filters__header{display:flex;justify-content:space-between;align-items:center;padding-bottom:1.875rem;border-bottom:1px solid #dfe5ec}.o-filters__header h2{padding:0}.o-filters__header .back-button{transform:rotate(180deg)}.o-filters__content{display:flex;flex-direction:column;padding-top:1.25rem}.o-filters__content>.a-btn{margin-top:1.25rem;align-self:center}.o-filters__filter td:first-child{min-width:20%;max-width:30%}.o-filters__filter td:nth-child(2){min-width:50%;max-width:60%}.o-filters__filter td:nth-child(3){width:8%}.o-filters__filter td:nth-child(4){width:8%}.o-filters__filter td:last-child{width:4%}.o-filters__filter.cdk-drag-preview{background-color:#fff}.o-filters__filter.cdk-drag-preview td{padding:.75rem .5rem}.o-filters__filter .cdk-drag-handle{pointer-events:auto}.o-filters__filter .cdk-drag-handle:hover{cursor:grab}.o-filters tr.o-filters__filter{cursor:default}.o-filters__no-filters{padding-bottom:1.875rem}\n", "@charset \"UTF-8\";.o-draggable-menu{width:-moz-fit-content;width:fit-content}.o-draggable-menu__list{display:flex;flex-direction:column}.o-draggable-menu__list__item .a-btn{border:none;color:#40b688;font-weight:500;margin-bottom:-.3125rem}.o-draggable-menu__list__item .a-btn:disabled{color:#40b688;opacity:.5}.o-draggable-menu__list__item .a-btn:before{content:\"\\2192\";font-size:1.25rem;padding-bottom:.625rem}.o-draggable-menu__list__item pry-toolbox-action-instanciator .a-tooltip[data-tooltip][data-tooltip-position=bottom]:after{top:calc(100% - 10px)}\n", ".refresh-rs>div{padding-left:0;padding-right:0}.refresh-rs button.refresh-line{border-radius:0;padding:0 .9375rem}.refresh-rs button.refresh-line:hover{font-weight:400;background-color:#0000001a}.refresh-rs button.refresh-line.-selected{background-color:#00000026}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
119
119
|
}
|
|
120
120
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PrySelectGridLayoutCssComponent, decorators: [{
|
|
121
121
|
type: Component,
|
|
122
|
-
args: [{ selector: 'pry-toolbox-css', template: '', encapsulation: ViewEncapsulation.None, styles: [".o-select-grid-layout{margin:0;padding:0}.o-select-grid-layout li{list-style:none}.o-select-grid-layout-wrapper{overflow-y:auto;max-height:80%}.o-select-grid-layout-modal-wrapper{max-width:80%}.o-select-grid-layout{overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,auto));grid-gap:1.875rem;padding:.25rem .25rem 1.875rem}.o-select-grid-layout__item .a-btn{display:flex;flex-direction:column;align-items:center;justify-content:space-around;width:100%;height:
|
|
122
|
+
args: [{ selector: 'pry-toolbox-css', template: '', encapsulation: ViewEncapsulation.None, styles: [".o-select-grid-layout{margin:0;padding:0}.o-select-grid-layout li{list-style:none}.o-select-grid-layout-wrapper{overflow-y:auto;max-height:80%}.o-select-grid-layout-modal-wrapper{max-width:80%}.o-select-grid-layout{overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,auto));grid-gap:1.875rem;padding:.25rem .25rem 1.875rem}.o-select-grid-layout__item .a-btn{display:flex;flex-direction:column;align-items:center;justify-content:space-around;width:100%;height:18.75rem;padding:.9375rem;border-radius:0;text-align:left}.o-select-grid-layout__item .a-btn:focus{outline:2px solid #35b99f}.o-select-grid-layout__item .a-btn:focus:not(:focus-visible){outline:0}.o-select-grid-layout__item .a-btn:focus-visible{outline:0;border-radius:.125rem;box-shadow:0 0 0 2px #fff,0 0 0 4px #35b99f}.o-select-grid-layout__item .a-btn strong{display:block}.o-select-grid-layout__item .a-btn .a-p{margin-bottom:0;font-size:13px}.o-select-grid-layout__item__preview{height:6.25rem;width:100%}\n", ".o-select-grid-layout-wrapper{overflow-y:auto;max-height:80%}.o-select-grid-layout-modal-wrapper{max-width:60%;padding:1.875rem 2.5rem}.backdrop{background-color:#0000004d}.o-filters{width:100%}.o-filters__header{display:flex;justify-content:space-between;align-items:center;padding-bottom:1.875rem;border-bottom:1px solid #dfe5ec}.o-filters__header h2{padding:0}.o-filters__header .back-button{transform:rotate(180deg)}.o-filters__content{display:flex;flex-direction:column;padding-top:1.25rem}.o-filters__content>.a-btn{margin-top:1.25rem;align-self:center}.o-filters__filter td:first-child{min-width:20%;max-width:30%}.o-filters__filter td:nth-child(2){min-width:50%;max-width:60%}.o-filters__filter td:nth-child(3){width:8%}.o-filters__filter td:nth-child(4){width:8%}.o-filters__filter td:last-child{width:4%}.o-filters__filter.cdk-drag-preview{background-color:#fff}.o-filters__filter.cdk-drag-preview td{padding:.75rem .5rem}.o-filters__filter .cdk-drag-handle{pointer-events:auto}.o-filters__filter .cdk-drag-handle:hover{cursor:grab}.o-filters tr.o-filters__filter{cursor:default}.o-filters__no-filters{padding-bottom:1.875rem}\n", "@charset \"UTF-8\";.o-draggable-menu{width:-moz-fit-content;width:fit-content}.o-draggable-menu__list{display:flex;flex-direction:column}.o-draggable-menu__list__item .a-btn{border:none;color:#40b688;font-weight:500;margin-bottom:-.3125rem}.o-draggable-menu__list__item .a-btn:disabled{color:#40b688;opacity:.5}.o-draggable-menu__list__item .a-btn:before{content:\"\\2192\";font-size:1.25rem;padding-bottom:.625rem}.o-draggable-menu__list__item pry-toolbox-action-instanciator .a-tooltip[data-tooltip][data-tooltip-position=bottom]:after{top:calc(100% - 10px)}\n", ".refresh-rs>div{padding-left:0;padding-right:0}.refresh-rs button.refresh-line{border-radius:0;padding:0 .9375rem}.refresh-rs button.refresh-line:hover{font-weight:400;background-color:#0000001a}.refresh-rs button.refresh-line.-selected{background-color:#00000026}\n"] }]
|
|
123
123
|
}] });
|
|
124
124
|
|
|
125
125
|
var FilterSteps;
|
|
@@ -587,15 +587,9 @@ class SelectGridLayoutComponent extends ToolboxActionComponent {
|
|
|
587
587
|
this.canDispatch = false;
|
|
588
588
|
this.modalOpened = false;
|
|
589
589
|
this.subscriptions.add(this.store.select(DashboardSelectors.gridLayout).subscribe((layout) => (this.chosenLayout = layout)));
|
|
590
|
-
this.availableLayouts$ = this.store.select(DashboardSelectors.windowManifest).pipe(map$1((manifest) => WidgetPlacementUtils.
|
|
591
|
-
.
|
|
592
|
-
|
|
593
|
-
})
|
|
594
|
-
.map((layout) => ({
|
|
595
|
-
value: layout.key,
|
|
596
|
-
translation: '@pry.toolbox.layout.' + layout.key,
|
|
597
|
-
image: layout.image
|
|
598
|
-
}))));
|
|
590
|
+
this.availableLayouts$ = this.store.select(DashboardSelectors.windowManifest).pipe(map$1((manifest) => WidgetPlacementUtils.layouts.filter((layout) => {
|
|
591
|
+
return layout.places.length === 0 || layout.places.length >= (manifest.widgets ?? []).length;
|
|
592
|
+
})));
|
|
599
593
|
setTimeout(() => {
|
|
600
594
|
this.canDispatch = true;
|
|
601
595
|
}, 100);
|
|
@@ -645,11 +639,11 @@ class SelectGridLayoutComponent extends ToolboxActionComponent {
|
|
|
645
639
|
this.toggleGridChoiceModal();
|
|
646
640
|
}
|
|
647
641
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectGridLayoutComponent, deps: [{ token: i1.Store }, { token: i2.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
648
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SelectGridLayoutComponent, selector: "pry-select-grid-layout", viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef }, { propertyName: "firstButton", first: true, predicate: ["firstButton"], descendants: true }, { propertyName: "openModal", first: true, predicate: ["openModal"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<pry-toolbox-css></pry-toolbox-css>\n<div [attr.aria-expanded]=\"modalOpened\" aria-controls=\"grid-layout\">\n <button type=\"button\" #openModal class=\"a-btn a-btn--secondary -size-md\" (click)=\"toggleGridChoiceModal()\">\n <ng-container *ngIf=\"displayLabels\">\n {{ '@pry.toolbox.chooseGrid' | i18n }}\n </ng-container>\n </button>\n</div>\n<ng-template #template>\n <div\n class=\"o-modal\"\n (click)=\"$event.stopPropagation()\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"dialog_title\"\n id=\"grid-layout\"\n (keydown.escape)=\"toggleGridChoiceModal()\"\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"true\"\n >\n <div class=\"o-modal__top\">\n <div class=\"o-modal__top__title\">\n <h2 class=\"a-h2\" id=\"dialog_title\">{{ '@pry.toolbox.chooseGrid' | i18n }}</h2>\n </div>\n <div class=\"o-modal__top__close\">\n <button class=\"a-btn a-btn--icon-only\" (click)=\"toggleGridChoiceModal()\">\n <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n </button>\n </div>\n </div>\n <div class=\"o-select-grid-layout-wrapper\">\n <ul class=\"o-select-grid-layout\">\n <li *ngFor=\"let layout of availableLayouts$ | async\" class=\"o-select-grid-layout__item\">\n <button\n type=\"button\"\n #firstButton\n class=\"a-btn\"\n [attr.aria-pressed]=\"chosenLayout === layout.
|
|
642
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SelectGridLayoutComponent, selector: "pry-select-grid-layout", viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef }, { propertyName: "firstButton", first: true, predicate: ["firstButton"], descendants: true }, { propertyName: "openModal", first: true, predicate: ["openModal"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<pry-toolbox-css></pry-toolbox-css>\n<div [attr.aria-expanded]=\"modalOpened\" aria-controls=\"grid-layout\">\n <button type=\"button\" #openModal class=\"a-btn a-btn--secondary -size-md\" (click)=\"toggleGridChoiceModal()\">\n <ng-container *ngIf=\"displayLabels\">\n {{ '@pry.toolbox.chooseGrid' | i18n }}\n </ng-container>\n </button>\n</div>\n<ng-template #template>\n <div\n class=\"o-modal\"\n (click)=\"$event.stopPropagation()\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"dialog_title\"\n id=\"grid-layout\"\n (keydown.escape)=\"toggleGridChoiceModal()\"\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"true\"\n >\n <div class=\"o-modal__top\">\n <div class=\"o-modal__top__title\">\n <h2 class=\"a-h2\" id=\"dialog_title\">{{ '@pry.toolbox.chooseGrid' | i18n }}</h2>\n </div>\n <div class=\"o-modal__top__close\">\n <button class=\"a-btn a-btn--icon-only\" (click)=\"toggleGridChoiceModal()\">\n <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n </button>\n </div>\n </div>\n <div class=\"o-select-grid-layout-wrapper\">\n <ul class=\"o-select-grid-layout\">\n <li *ngFor=\"let layout of availableLayouts$ | async\" class=\"o-select-grid-layout__item\">\n <button\n type=\"button\"\n #firstButton\n class=\"a-btn\"\n [attr.aria-pressed]=\"chosenLayout === layout.type\"\n [class.selected]=\"chosenLayout === layout.type\"\n (click)=\"changeLayout(layout.type)\"\n >\n <div class=\"o-select-grid-layout__item__preview\">\n <pry-dashboard\n [staticDashboard]=\"{\n widgets: [],\n grid: { layout: layout.type, rows: layout.rows, columns: layout.columns, gap: 3 }\n }\"\n [breakpoint]=\"10\"\n [noBackground]=\"true\"\n ></pry-dashboard>\n </div>\n <p class=\"a-p\">\n <strong>{{ layout.label ?? '' | i18n }}</strong>\n </p>\n <p class=\"a-p\">\n {{ layout.description ?? '' | i18n }}\n </p>\n </button>\n </li>\n </ul>\n </div>\n <div class=\"m-btn-group -space-evenly\">\n <button (click)=\"toggleGridChoiceModal()\" class=\"a-btn a-btn--secondary\">\n {{ '@pry.toolbox.manifest.close' | i18n }}\n </button>\n <button (click)=\"validate()\" class=\"a-btn a-btn--primary\">\n {{ '@pry.toolbox.manifest.validated' | i18n }}\n </button>\n </div>\n </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.DashboardComponent, selector: "pry-dashboard", inputs: ["staticDashboard", "CloseOnDragOut", "displayOptions", "noBackground", "breakpoint"], outputs: ["rowHeight", "rows"] }, { kind: "component", type: i3$1.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: PrySelectGridLayoutCssComponent, selector: "pry-toolbox-css" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.I18nPipe, name: "i18n" }] }); }
|
|
649
643
|
}
|
|
650
644
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectGridLayoutComponent, decorators: [{
|
|
651
645
|
type: Component,
|
|
652
|
-
args: [{ selector: 'pry-select-grid-layout', template: "<pry-toolbox-css></pry-toolbox-css>\n<div [attr.aria-expanded]=\"modalOpened\" aria-controls=\"grid-layout\">\n <button type=\"button\" #openModal class=\"a-btn a-btn--secondary -size-md\" (click)=\"toggleGridChoiceModal()\">\n <ng-container *ngIf=\"displayLabels\">\n {{ '@pry.toolbox.chooseGrid' | i18n }}\n </ng-container>\n </button>\n</div>\n<ng-template #template>\n <div\n class=\"o-modal\"\n (click)=\"$event.stopPropagation()\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"dialog_title\"\n id=\"grid-layout\"\n (keydown.escape)=\"toggleGridChoiceModal()\"\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"true\"\n >\n <div class=\"o-modal__top\">\n <div class=\"o-modal__top__title\">\n <h2 class=\"a-h2\" id=\"dialog_title\">{{ '@pry.toolbox.chooseGrid' | i18n }}</h2>\n </div>\n <div class=\"o-modal__top__close\">\n <button class=\"a-btn a-btn--icon-only\" (click)=\"toggleGridChoiceModal()\">\n <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n </button>\n </div>\n </div>\n <div class=\"o-select-grid-layout-wrapper\">\n <ul class=\"o-select-grid-layout\">\n <li *ngFor=\"let layout of availableLayouts$ | async\" class=\"o-select-grid-layout__item\">\n <button\n type=\"button\"\n #firstButton\n class=\"a-btn\"\n [attr.aria-pressed]=\"chosenLayout === layout.
|
|
646
|
+
args: [{ selector: 'pry-select-grid-layout', template: "<pry-toolbox-css></pry-toolbox-css>\n<div [attr.aria-expanded]=\"modalOpened\" aria-controls=\"grid-layout\">\n <button type=\"button\" #openModal class=\"a-btn a-btn--secondary -size-md\" (click)=\"toggleGridChoiceModal()\">\n <ng-container *ngIf=\"displayLabels\">\n {{ '@pry.toolbox.chooseGrid' | i18n }}\n </ng-container>\n </button>\n</div>\n<ng-template #template>\n <div\n class=\"o-modal\"\n (click)=\"$event.stopPropagation()\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"dialog_title\"\n id=\"grid-layout\"\n (keydown.escape)=\"toggleGridChoiceModal()\"\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"true\"\n >\n <div class=\"o-modal__top\">\n <div class=\"o-modal__top__title\">\n <h2 class=\"a-h2\" id=\"dialog_title\">{{ '@pry.toolbox.chooseGrid' | i18n }}</h2>\n </div>\n <div class=\"o-modal__top__close\">\n <button class=\"a-btn a-btn--icon-only\" (click)=\"toggleGridChoiceModal()\">\n <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n </button>\n </div>\n </div>\n <div class=\"o-select-grid-layout-wrapper\">\n <ul class=\"o-select-grid-layout\">\n <li *ngFor=\"let layout of availableLayouts$ | async\" class=\"o-select-grid-layout__item\">\n <button\n type=\"button\"\n #firstButton\n class=\"a-btn\"\n [attr.aria-pressed]=\"chosenLayout === layout.type\"\n [class.selected]=\"chosenLayout === layout.type\"\n (click)=\"changeLayout(layout.type)\"\n >\n <div class=\"o-select-grid-layout__item__preview\">\n <pry-dashboard\n [staticDashboard]=\"{\n widgets: [],\n grid: { layout: layout.type, rows: layout.rows, columns: layout.columns, gap: 3 }\n }\"\n [breakpoint]=\"10\"\n [noBackground]=\"true\"\n ></pry-dashboard>\n </div>\n <p class=\"a-p\">\n <strong>{{ layout.label ?? '' | i18n }}</strong>\n </p>\n <p class=\"a-p\">\n {{ layout.description ?? '' | i18n }}\n </p>\n </button>\n </li>\n </ul>\n </div>\n <div class=\"m-btn-group -space-evenly\">\n <button (click)=\"toggleGridChoiceModal()\" class=\"a-btn a-btn--secondary\">\n {{ '@pry.toolbox.manifest.close' | i18n }}\n </button>\n <button (click)=\"validate()\" class=\"a-btn a-btn--primary\">\n {{ '@pry.toolbox.manifest.validated' | i18n }}\n </button>\n </div>\n </div>\n</ng-template>\n" }]
|
|
653
647
|
}], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { template: [{
|
|
654
648
|
type: ViewChild,
|
|
655
649
|
args: ['template', { read: TemplateRef }]
|