@meshmakers/octo-ui 3.2.29-0 → 3.2.30-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/fesm2022/meshmakers-octo-ui.mjs +15 -15
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { NgModule, EventEmitter, Pipe,
|
|
2
|
+
import { NgModule, EventEmitter, Pipe, ViewChild, Input, Output, Component } from '@angular/core';
|
|
3
3
|
import { CommonModule, AsyncPipe, NgIf, NgForOf } from '@angular/common';
|
|
4
4
|
import { fromEvent, merge, BehaviorSubject } from 'rxjs';
|
|
5
5
|
import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
|
|
@@ -18,11 +18,11 @@ import { MatListItemIcon } from '@angular/material/list';
|
|
|
18
18
|
import { RouterLink } from '@angular/router';
|
|
19
19
|
|
|
20
20
|
class ListElementModule {
|
|
21
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
22
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.
|
|
23
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.
|
|
21
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ListElementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
22
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.0", ngImport: i0, type: ListElementModule, imports: [CommonModule] });
|
|
23
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ListElementModule, imports: [CommonModule] });
|
|
24
24
|
}
|
|
25
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
25
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ListElementModule, decorators: [{
|
|
26
26
|
type: NgModule,
|
|
27
27
|
args: [{
|
|
28
28
|
declarations: [],
|
|
@@ -153,10 +153,10 @@ class PascalCasePipe {
|
|
|
153
153
|
return value;
|
|
154
154
|
return value.charAt(0).toUpperCase() + value.slice(1);
|
|
155
155
|
}
|
|
156
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
157
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.
|
|
156
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: PascalCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
157
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.0", ngImport: i0, type: PascalCasePipe, isStandalone: true, name: "pascalCase" });
|
|
158
158
|
}
|
|
159
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
159
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: PascalCasePipe, decorators: [{
|
|
160
160
|
type: Pipe,
|
|
161
161
|
args: [{
|
|
162
162
|
standalone: true,
|
|
@@ -318,10 +318,10 @@ class MmOctoTableComponent {
|
|
|
318
318
|
return this.actionColumns.length > 0 || this.optionActions.length > 0;
|
|
319
319
|
};
|
|
320
320
|
getDisplayName = getDisplayName;
|
|
321
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
322
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.
|
|
321
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: MmOctoTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
322
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: MmOctoTableComponent, isStandalone: true, selector: "mm-octo-table", inputs: { dataSource: "dataSource", actionColumns: "actionColumns", leftToolbarActions: "leftToolbarActions", optionActions: "optionActions", searchFilterColumns: "searchFilterColumns", currentId: "currentId", defaultSortColumn: "defaultSortColumn", rowIsClickable: "rowIsClickable", pageSizeOptions: "pageSizeOptions", selectedPageSize: "selectedPageSize", selectedRowId: "selectedRowId", columns: "columns" }, outputs: { rowClicked: "rowClicked", searchFilterStringUpdated: "searchFilterStringUpdated", actionColumnClick: "actionColumnClick" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div>\n <mat-progress-bar *ngIf=\"loading || (dataSource?.loading$ | async)\" mode=\"indeterminate\"></mat-progress-bar>\n</div>\n\n<mat-toolbar class=\"octo-toolbar octo-detail-toolbar\">\n @for (toolbarAction of leftToolbarActions; track toolbarAction) {\n <button mat-flat-button routerLink=\"{{toolbarAction.route}}\" type=\"button\" [disabled]=\"!toolbarAction.isDisabled ? false : (toolbarAction.isDisabled | async)\">\n @if (toolbarAction?.svgIconName) {\n <mat-icon class=\"svg-icon\" svgIcon=\"{{ toolbarAction.svgIconName }}\" matListItemIcon></mat-icon>\n }\n @if (toolbarAction?.iconName) {\n <mat-icon class=\"material-symbols-outlined\">{{ toolbarAction.iconName }}</mat-icon>\n }\n {{ toolbarAction.actionText }}\n </button>\n }\n\n <div class=\"octo-spacer\"></div>\n\n <div class=\"octo-toolbar-search\">\n <mat-form-field appearance=\"outline\">\n <mat-label>\n <mat-icon class=\"material-symbols-outlined\">search</mat-icon>\n Search\n </mat-label>\n <input #input matInput [disabled]=\"loading\">\n </mat-form-field>\n </div>\n</mat-toolbar>\n\n<mat-table [class.isMobile]=\"isMobile\" [dataSource]=\"dataSource\" class=\"mat-elevation-z8 table-container\" mat-table matSort\n matSortActive=\"{{defaultSortColumn}}\" matSortDirection=\"asc\" matSortDisableClear=\"true\">\n\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"getDisplayName(column)\">\n <mat-header-cell *matHeaderCellDef mat-sort-header> {{ getDisplayName(column) | pascalCase }}</mat-header-cell>\n <mat-cell *matCellDef=\"let element\">\n <span *ngIf=\"isMobile\">{{ getDisplayName(column) | pascalCase }}:</span>\n {{ accessElement(element, column) }}\n </mat-cell>\n </ng-container>\n\n <!-- Consolidated Action Column with multiple buttons -->\n <ng-container matColumnDef=\"actions\">\n <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>\n <mat-cell *matCellDef=\"let element\">\n @for (column of actionColumns; track column) {\n <ng-container>\n <button mat-button (click)=\"emitRowData({action: column.columnName, id: encodeURIComponent(element[currentId]), entry: element})\">\n <mat-icon *ngIf=\"column?.svgIconName\" class=\"svg-icon\" svgIcon=\"{{ column.svgIconName }}\" matListItemIcon></mat-icon>\n <mat-icon *ngIf=\"column?.iconName\" class=\"material-symbols-outlined\">{{ column.iconName }}</mat-icon>\n </button>\n </ng-container>\n }\n\n <!-- Options menu with additional actions -->\n @if (optionActions.length > 0) {\n <button mat-icon-button [matMenuTriggerFor]=\"menu\" aria-label=\"Options\">\n <mat-icon class=\"material-symbols-outlined\">more_vert</mat-icon>\n </button>\n }\n\n <mat-menu #menu=\"matMenu\">\n @for (optionAction of optionActions; track optionAction) {\n <ng-container>\n <button mat-menu-item\n (click)=\"emitRowData({action: optionAction.columnName, id: encodeURIComponent(element[currentId]), entry: element})\">\n @if (optionAction?.svgIconName) {\n <mat-icon class=\"svg-icon\" svgIcon=\"{{ optionAction.svgIconName }}\" matListItemIcon></mat-icon>\n }\n @if (optionAction?.iconName) {\n <mat-icon class=\"material-symbols-outlined\">{{ optionAction.iconName }}</mat-icon>\n }\n {{ optionAction.columnName | pascalCase }}\n </button>\n </ng-container>\n }\n </mat-menu>\n </mat-cell>\n </ng-container>\n\n @if (hasActionColumns()) {\n <mat-header-row *matHeaderRowDef=\"columnNames.concat(['actions'])\"></mat-header-row>\n <mat-row *matRowDef=\"let row; columns: columnNames.concat(['actions'])\"></mat-row>\n } @else {\n <mat-header-row *matHeaderRowDef=\"columnNames\"></mat-header-row>\n <mat-row *matRowDef=\"let row; columns: columnNames\"></mat-row>\n }\n\n</mat-table>\n\n<mat-paginator [length]=\"dataSource?.totalCount$ | async\" (page)=\"selectedPageSizeChanged($event)\" [pageSizeOptions]=\"pageSizeOptions\"\n [pageSize]=\"selectedPageSizeSubject.getValue()\"></mat-paginator>\n", styles: [".table-container{display:block;width:100%;max-height:70vh;overflow-x:auto;overflow-y:auto}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: PascalCasePipe, name: "pascalCase" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
|
|
323
323
|
}
|
|
324
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
324
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: MmOctoTableComponent, decorators: [{
|
|
325
325
|
type: Component,
|
|
326
326
|
args: [{ selector: 'mm-octo-table', standalone: true, imports: [
|
|
327
327
|
AsyncPipe,
|
|
@@ -409,11 +409,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
|
|
|
409
409
|
}] } });
|
|
410
410
|
|
|
411
411
|
class MmOctoUiModule {
|
|
412
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
413
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.
|
|
414
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.
|
|
412
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: MmOctoUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
413
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.0", ngImport: i0, type: MmOctoUiModule, imports: [MmOctoTableComponent], exports: [MmOctoTableComponent] });
|
|
414
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: MmOctoUiModule, imports: [MmOctoTableComponent] });
|
|
415
415
|
}
|
|
416
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
416
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: MmOctoUiModule, decorators: [{
|
|
417
417
|
type: NgModule,
|
|
418
418
|
args: [{
|
|
419
419
|
declarations: [],
|