@biit-solutions/wizardry-theme 1.21.34 → 1.21.35

package/fesm2015/biit-solutions-wizardry-theme-charts.mjs

@@ -2252,6 +2252,10 @@ class MetaViewChartComponent {
         this.View = View;
         this.fields = ['name', 'date', 'v1', 'v2', 'v3', 'b1'];
         this.elements = [];
+        this.showMenu = true;
+    }
+    ngAfterViewInit() {
+        this.showMenu = window.screen.width > MetaViewChartComponent.SHOW_MENU_SIZE;
     }
     onElementClick(element) {
         this.selectedElement = element;
@@ -2306,11 +2310,12 @@ class MetaViewChartComponent {
     }
 }
 MetaViewChartComponent.FILTER_DELAY = 500;
+MetaViewChartComponent.SHOW_MENU_SIZE = 800;
 MetaViewChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetaViewChartComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 MetaViewChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MetaViewChartComponent, selector: "biit-meta-view-chart", inputs: { _data: ["data", "_data"], view: "view" }, outputs: { selected: "selected", unselected: "unselected" }, providers: [{
             provide: TRANSLOCO_SCOPE,
             useValue: { scope: 'wizardry-theme/chart', alias: "charts" }
-        }], ngImport: i0, template: "<div class=\"meta-view-chart-board\" id=\"metaviewer-chart\" *transloco=\"let t\">\n  <div class=\"meta-view-column\">\n    <biit-meta-filter [metadata]=\"data\" (filterChange)=\"onFilter($event)\"/>\n  </div>\n  <biit-meta-board id=\"metaviewer-board\" *ngIf=\"view === View.GRID\"\n    [data]=\"elements\"\n    [selected]=\"selectedElement\"\n    (elementClick)=\"onElementClick($event)\"\n  />\n  <biit-timeline-viewer-chart id=\"metaviewer-timeline\" *ngIf=\"view === View.TIMELINE && timelineOptions && timelineOptions.date\"\n    [data]=\"elements | extractData\"\n    [options]=\"timelineOptions\"\n    (onItemClick)=\"onTimeLineElementClick($event)\"\n    style=\"overflow: hidden\"\n  />\n  <div class=\"error-view\" id=\"metaviewer-error\" *ngIf=\"view === View.TIMELINE && !timelineOptions?.date\">\n    <div>\n      <biit-icon name=\"exclamation\" style=\"display:block; width: 1rem;\" />\n    </div>\n    <div>{{ t('charts.configuration-not-meets-requirements') }}</div>\n  </div>\n  <div class=\"meta-view-column rtl\" id=\"metadata-viewer\" *ngIf=\"selectedElement\" @fadeInOut>\n    <biit-metadata-viewer class=\"ltr\"\n      [data]=\"selectedElement\"\n      [fields]=\"data.fields\"\n      [titleField]=\"data.titleField\"\n      (onClose)=\"unselectElement()\"/>\n  </div>\n</div>\n", styles: ["biit-meta-board{display:block;width:100%;height:100%}.meta-view-chart-board{display:flex;flex-direction:row;gap:1em;height:100%;transition:transform .3s ease-in-out;&>:not(:nth-child(2)){flex:0 1 auto}&>:nth-child(2){flex:1}}.meta-view-column{min-width:14em;max-width:23em;width:18em;flex:0 1 auto;resize:horizontal;overflow:auto;border:3px solid #262626}.rtl{direction:rtl}.ltr{direction:ltr}.padding-1{padding:.1em}.error-view{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MetaBoardComponent, selector: "biit-meta-board", inputs: ["data", "selected"], outputs: ["elementClick"] }, { kind: "component", type: MetaFilterComponent, selector: "biit-meta-filter", inputs: ["metadata"], outputs: ["filterChange"] }, { kind: "component", type: MetadataViewerComponent, selector: "biit-metadata-viewer", inputs: ["data", "fields", "titleField"], outputs: ["onClose"] }, { kind: "component", type: TimelineViewerChartComponent, selector: "biit-timeline-viewer-chart", inputs: ["data", "options"], outputs: ["onItemClick"] }, { kind: "component", type: i1$1.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }, { kind: "directive", type: i7.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "pipe", type: ExtractDataPipe, name: "extractData" }], animations: [
+        }], ngImport: i0, template: "<div class=\"meta-view-chart-board\" id=\"metaviewer-chart\" *transloco=\"let t\">\n  <button biit-icon icon=\"hamburger\" *ngIf=\"!showMenu\" (click)=\"showMenu=true\"></button>\n  <div class=\"meta-view-column\" *ngIf=\"showMenu\">\n    <button biit-icon icon=\"hamburger\" (click)=\"showMenu=false\" style=\"position:absolute;\"></button>\n    <biit-meta-filter [metadata]=\"data\" (filterChange)=\"onFilter($event)\"/>\n  </div>\n  <biit-meta-board id=\"metaviewer-board\" *ngIf=\"view === View.GRID\"\n    [data]=\"elements\"\n    [selected]=\"selectedElement\"\n    (elementClick)=\"onElementClick($event)\"\n  />\n  <biit-timeline-viewer-chart id=\"metaviewer-timeline\" *ngIf=\"view === View.TIMELINE && timelineOptions && timelineOptions.date\"\n    [data]=\"elements | extractData\"\n    [options]=\"timelineOptions\"\n    (onItemClick)=\"onTimeLineElementClick($event)\"\n    style=\"overflow: hidden\"\n  />\n  <div class=\"error-view\" id=\"metaviewer-error\" *ngIf=\"view === View.TIMELINE && !timelineOptions?.date\">\n    <div>\n      <biit-icon name=\"exclamation\" style=\"display:block; width: 1rem;\" />\n    </div>\n    <div>{{ t('charts.configuration-not-meets-requirements') }}</div>\n  </div>\n  <div class=\"meta-view-column rtl\" id=\"metadata-viewer\" *ngIf=\"selectedElement\" @fadeInOut>\n    <biit-metadata-viewer class=\"ltr\"\n      [data]=\"selectedElement\"\n      [fields]=\"data.fields\"\n      [titleField]=\"data.titleField\"\n      (onClose)=\"unselectElement()\"/>\n  </div>\n</div>\n", styles: ["biit-meta-board{display:block;width:100%;height:100%}.meta-view-chart-board{display:flex;flex-direction:row;gap:1em;height:100%;transition:transform .3s ease-in-out;&>:not(:nth-child(2)){flex:0 1 auto}&>:nth-child(2){flex:1}}.meta-view-column{min-width:14em;max-width:23em;width:18em;flex:0 1 auto;resize:horizontal;overflow:auto;border:3px solid #262626}.rtl{direction:rtl}.ltr{direction:ltr}.padding-1{padding:.1em}.error-view{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem}@media screen and (max-width: 800px){.meta-view-column{position:absolute;background:white;z-index:1}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MetaBoardComponent, selector: "biit-meta-board", inputs: ["data", "selected"], outputs: ["elementClick"] }, { kind: "component", type: MetaFilterComponent, selector: "biit-meta-filter", inputs: ["metadata"], outputs: ["filterChange"] }, { kind: "component", type: MetadataViewerComponent, selector: "biit-metadata-viewer", inputs: ["data", "fields", "titleField"], outputs: ["onClose"] }, { kind: "component", type: TimelineViewerChartComponent, selector: "biit-timeline-viewer-chart", inputs: ["data", "options"], outputs: ["onItemClick"] }, { kind: "component", type: i1$1.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }, { kind: "directive", type: i7.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i4.BiitIconButtonComponent, selector: "button[biit-icon]", inputs: ["icon", "checked"] }, { kind: "pipe", type: ExtractDataPipe, name: "extractData" }], animations: [
         trigger('fadeInOut', [
             transition(':enter', [
                 style({ opacity: 0 }),
@@ -2338,7 +2343,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                                 animate('300ms ease-out', style({ opacity: 0 }))
                             ])
                         ])
-                    ], template: "<div class=\"meta-view-chart-board\" id=\"metaviewer-chart\" *transloco=\"let t\">\n  <div class=\"meta-view-column\">\n    <biit-meta-filter [metadata]=\"data\" (filterChange)=\"onFilter($event)\"/>\n  </div>\n  <biit-meta-board id=\"metaviewer-board\" *ngIf=\"view === View.GRID\"\n    [data]=\"elements\"\n    [selected]=\"selectedElement\"\n    (elementClick)=\"onElementClick($event)\"\n  />\n  <biit-timeline-viewer-chart id=\"metaviewer-timeline\" *ngIf=\"view === View.TIMELINE && timelineOptions && timelineOptions.date\"\n    [data]=\"elements | extractData\"\n    [options]=\"timelineOptions\"\n    (onItemClick)=\"onTimeLineElementClick($event)\"\n    style=\"overflow: hidden\"\n  />\n  <div class=\"error-view\" id=\"metaviewer-error\" *ngIf=\"view === View.TIMELINE && !timelineOptions?.date\">\n    <div>\n      <biit-icon name=\"exclamation\" style=\"display:block; width: 1rem;\" />\n    </div>\n    <div>{{ t('charts.configuration-not-meets-requirements') }}</div>\n  </div>\n  <div class=\"meta-view-column rtl\" id=\"metadata-viewer\" *ngIf=\"selectedElement\" @fadeInOut>\n    <biit-metadata-viewer class=\"ltr\"\n      [data]=\"selectedElement\"\n      [fields]=\"data.fields\"\n      [titleField]=\"data.titleField\"\n      (onClose)=\"unselectElement()\"/>\n  </div>\n</div>\n", styles: ["biit-meta-board{display:block;width:100%;height:100%}.meta-view-chart-board{display:flex;flex-direction:row;gap:1em;height:100%;transition:transform .3s ease-in-out;&>:not(:nth-child(2)){flex:0 1 auto}&>:nth-child(2){flex:1}}.meta-view-column{min-width:14em;max-width:23em;width:18em;flex:0 1 auto;resize:horizontal;overflow:auto;border:3px solid #262626}.rtl{direction:rtl}.ltr{direction:ltr}.padding-1{padding:.1em}.error-view{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem}\n"] }]
+                    ], template: "<div class=\"meta-view-chart-board\" id=\"metaviewer-chart\" *transloco=\"let t\">\n  <button biit-icon icon=\"hamburger\" *ngIf=\"!showMenu\" (click)=\"showMenu=true\"></button>\n  <div class=\"meta-view-column\" *ngIf=\"showMenu\">\n    <button biit-icon icon=\"hamburger\" (click)=\"showMenu=false\" style=\"position:absolute;\"></button>\n    <biit-meta-filter [metadata]=\"data\" (filterChange)=\"onFilter($event)\"/>\n  </div>\n  <biit-meta-board id=\"metaviewer-board\" *ngIf=\"view === View.GRID\"\n    [data]=\"elements\"\n    [selected]=\"selectedElement\"\n    (elementClick)=\"onElementClick($event)\"\n  />\n  <biit-timeline-viewer-chart id=\"metaviewer-timeline\" *ngIf=\"view === View.TIMELINE && timelineOptions && timelineOptions.date\"\n    [data]=\"elements | extractData\"\n    [options]=\"timelineOptions\"\n    (onItemClick)=\"onTimeLineElementClick($event)\"\n    style=\"overflow: hidden\"\n  />\n  <div class=\"error-view\" id=\"metaviewer-error\" *ngIf=\"view === View.TIMELINE && !timelineOptions?.date\">\n    <div>\n      <biit-icon name=\"exclamation\" style=\"display:block; width: 1rem;\" />\n    </div>\n    <div>{{ t('charts.configuration-not-meets-requirements') }}</div>\n  </div>\n  <div class=\"meta-view-column rtl\" id=\"metadata-viewer\" *ngIf=\"selectedElement\" @fadeInOut>\n    <biit-metadata-viewer class=\"ltr\"\n      [data]=\"selectedElement\"\n      [fields]=\"data.fields\"\n      [titleField]=\"data.titleField\"\n      (onClose)=\"unselectElement()\"/>\n  </div>\n</div>\n", styles: ["biit-meta-board{display:block;width:100%;height:100%}.meta-view-chart-board{display:flex;flex-direction:row;gap:1em;height:100%;transition:transform .3s ease-in-out;&>:not(:nth-child(2)){flex:0 1 auto}&>:nth-child(2){flex:1}}.meta-view-column{min-width:14em;max-width:23em;width:18em;flex:0 1 auto;resize:horizontal;overflow:auto;border:3px solid #262626}.rtl{direction:rtl}.ltr{direction:ltr}.padding-1{padding:.1em}.error-view{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem}@media screen and (max-width: 800px){.meta-view-column{position:absolute;background:white;z-index:1}}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { _data: [{
                 type: Input,
                 args: ['data']
@@ -2702,7 +2707,8 @@ MetaViewChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
         TimelineViewerChartModule,
         PipesModule,
         BiitIconModule,
-        TranslocoRootModule], exports: [MetaViewChartComponent] });
+        TranslocoRootModule,
+        BiitIconButtonModule], exports: [MetaViewChartComponent] });
 MetaViewChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetaViewChartModule, imports: [CommonModule,
         MetaElementModule,
         MetaBoardModule,
@@ -2711,7 +2717,8 @@ MetaViewChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ver
         TimelineViewerChartModule,
         PipesModule,
         BiitIconModule,
-        TranslocoRootModule] });
+        TranslocoRootModule,
+        BiitIconButtonModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetaViewChartModule, decorators: [{
             type: NgModule,
             args: [{
@@ -2727,7 +2734,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         TimelineViewerChartModule,
                         PipesModule,
                         BiitIconModule,
-                        TranslocoRootModule
+                        TranslocoRootModule,
+                        BiitIconButtonModule
                     ],
                     exports: [
                         MetaViewChartComponent