@mediusinc/mng-commons 7.0.0-rc.1 → 7.0.0-rc.2

package/fesm2022/mediusinc-mng-commons-table-column-toggle.component-BQ99oqWO.mjs

@@ -0,0 +1,30 @@
+import { NgClass } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { TranslatePipe } from '@ngx-translate/core';
+import { Button } from 'primeng/button';
+import { MultiSelect } from 'primeng/multiselect';
+import { Tooltip } from 'primeng/tooltip';
+import { I18nPropertyPipe } from '@mediusinc/mng-commons/core';
+import { T as TableMetadataService, a as TablePreferencesService } from './mediusinc-mng-commons-table-mediusinc-mng-commons-table-BLuM5Kpu.mjs';
+
+class TableColumnToggleComponent {
+    constructor() {
+        this.metadata = inject(TableMetadataService);
+        this.prefs = inject(TablePreferencesService);
+        // data source inputs
+        this.columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : []));
+        this.anyColumnVisible = computed(() => this.columns().length > 0, ...(ngDevMode ? [{ debugName: "anyColumnVisible" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableColumnToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: TableColumnToggleComponent, isStandalone: true, selector: "mng-table-column-toggle", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<p-multiSelect\n    #columnToggleMultiselect\n    styleClass=\"p-button-primary mng-table-columns-multiselect\"\n    appendTo=\"body\"\n    dataKey=\"id\"\n    tooltipPosition=\"left\"\n    placeholder=\"\"\n    dropdownIcon=\"pi pi-sliders-h\"\n    [filter]=\"false\"\n    [options]=\"prefs.columnsWithPrefs()\"\n    [ngModel]=\"columns()\"\n    [pTooltip]=\"'mngTable.adjustTable' | translate\"\n    [displaySelectedLabel]=\"false\"\n    (onChange)=\"prefs.onColumnToggle($event)\">\n    <ng-template #filter>\n        <div class=\"flex w-full justify-between items-center\">\n            <div class=\"p-checkbox\">\n                <div class=\"p-hidden-accessible\">\n                    <input type=\"checkbox\" readonly=\"readonly\" [checked]=\"columnToggleMultiselect.allSelected\" (keydown.space)=\"columnToggleMultiselect.onToggleAll($event)\" />\n                </div>\n                <div\n                    class=\"p-checkbox-box cursor-pointer\"\n                    role=\"checkbox\"\n                    [attr.aria-checked]=\"columnToggleMultiselect.allSelected\"\n                    [class.p-select-option-selected]=\"anyColumnVisible()\"\n                    (click)=\"prefs.onColumnToggleAll()\">\n                    <span class=\"p-checkbox-icon\" [ngClass]=\"{'pi pi-check': anyColumnVisible()}\"></span>\n                </div>\n            </div>\n            <p-button\n                icon=\"pi pi-replay\"\n                severity=\"secondary\"\n                text=\"true\"\n                tooltipPosition=\"left\"\n                [pTooltip]=\"'mngTable.resetLayout' | translate\"\n                (click)=\"prefs.clearLayoutPreferences()\"></p-button>\n        </div>\n    </ng-template>\n    <ng-template #item let-item>\n        {{\n            (item.descriptor.title && !item.descriptor.titleUseModelBase\n                ? item.descriptor.title\n                : (item.descriptor.title ?? item.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n            ) | translate\n        }}\n    </ng-template>\n</p-multiSelect>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: I18nPropertyPipe, name: "mngI18nProperty" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableColumnToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mng-table-column-toggle', imports: [I18nPropertyPipe, NgClass, MultiSelect, FormsModule, TranslatePipe, Tooltip, Button], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-multiSelect\n    #columnToggleMultiselect\n    styleClass=\"p-button-primary mng-table-columns-multiselect\"\n    appendTo=\"body\"\n    dataKey=\"id\"\n    tooltipPosition=\"left\"\n    placeholder=\"\"\n    dropdownIcon=\"pi pi-sliders-h\"\n    [filter]=\"false\"\n    [options]=\"prefs.columnsWithPrefs()\"\n    [ngModel]=\"columns()\"\n    [pTooltip]=\"'mngTable.adjustTable' | translate\"\n    [displaySelectedLabel]=\"false\"\n    (onChange)=\"prefs.onColumnToggle($event)\">\n    <ng-template #filter>\n        <div class=\"flex w-full justify-between items-center\">\n            <div class=\"p-checkbox\">\n                <div class=\"p-hidden-accessible\">\n                    <input type=\"checkbox\" readonly=\"readonly\" [checked]=\"columnToggleMultiselect.allSelected\" (keydown.space)=\"columnToggleMultiselect.onToggleAll($event)\" />\n                </div>\n                <div\n                    class=\"p-checkbox-box cursor-pointer\"\n                    role=\"checkbox\"\n                    [attr.aria-checked]=\"columnToggleMultiselect.allSelected\"\n                    [class.p-select-option-selected]=\"anyColumnVisible()\"\n                    (click)=\"prefs.onColumnToggleAll()\">\n                    <span class=\"p-checkbox-icon\" [ngClass]=\"{'pi pi-check': anyColumnVisible()}\"></span>\n                </div>\n            </div>\n            <p-button\n                icon=\"pi pi-replay\"\n                severity=\"secondary\"\n                text=\"true\"\n                tooltipPosition=\"left\"\n                [pTooltip]=\"'mngTable.resetLayout' | translate\"\n                (click)=\"prefs.clearLayoutPreferences()\"></p-button>\n        </div>\n    </ng-template>\n    <ng-template #item let-item>\n        {{\n            (item.descriptor.title && !item.descriptor.titleUseModelBase\n                ? item.descriptor.title\n                : (item.descriptor.title ?? item.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n            ) | translate\n        }}\n    </ng-template>\n</p-multiSelect>\n" }]
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }] } });
+
+export { TableColumnToggleComponent };
+//# sourceMappingURL=mediusinc-mng-commons-table-column-toggle.component-BQ99oqWO.mjs.map

package/fesm2022/mediusinc-mng-commons-table-column-toggle.component-BQ99oqWO.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mediusinc-mng-commons-table-column-toggle.component-BQ99oqWO.mjs","sources":["../../table/src/components/column-toggle/column-toggle.component.ts","../../table/src/components/column-toggle/column-toggle.component.html"],"sourcesContent":["import {NgClass} from '@angular/common';\nimport {ChangeDetectionStrategy, Component, computed, inject, input} from '@angular/core';\nimport {FormsModule} from '@angular/forms';\n\nimport {TranslatePipe} from '@ngx-translate/core';\nimport {Button} from 'primeng/button';\nimport {MultiSelect} from 'primeng/multiselect';\nimport {Tooltip} from 'primeng/tooltip';\n\nimport {I18nPropertyPipe} from '@mediusinc/mng-commons/core';\n\nimport {ColumnWithPreferences} from '../../models/column-preferences.model';\nimport {TableMetadataService} from '../../services/table-metadata.service';\nimport {TablePreferencesService} from '../../services/table-preferences.service';\n\n@Component({\n    selector: 'mng-table-column-toggle',\n    templateUrl: './column-toggle.component.html',\n    imports: [I18nPropertyPipe, NgClass, MultiSelect, FormsModule, TranslatePipe, Tooltip, Button],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class TableColumnToggleComponent {\n    protected readonly metadata = inject(TableMetadataService);\n    protected readonly prefs = inject(TablePreferencesService);\n\n    // data source inputs\n    public readonly columns = input.required<ColumnWithPreferences[]>();\n\n    protected anyColumnVisible = computed(() => this.columns().length > 0);\n}\n","<p-multiSelect\n    #columnToggleMultiselect\n    styleClass=\"p-button-primary mng-table-columns-multiselect\"\n    appendTo=\"body\"\n    dataKey=\"id\"\n    tooltipPosition=\"left\"\n    placeholder=\"\"\n    dropdownIcon=\"pi pi-sliders-h\"\n    [filter]=\"false\"\n    [options]=\"prefs.columnsWithPrefs()\"\n    [ngModel]=\"columns()\"\n    [pTooltip]=\"'mngTable.adjustTable' | translate\"\n    [displaySelectedLabel]=\"false\"\n    (onChange)=\"prefs.onColumnToggle($event)\">\n    <ng-template #filter>\n        <div class=\"flex w-full justify-between items-center\">\n            <div class=\"p-checkbox\">\n                <div class=\"p-hidden-accessible\">\n                    <input type=\"checkbox\" readonly=\"readonly\" [checked]=\"columnToggleMultiselect.allSelected\" (keydown.space)=\"columnToggleMultiselect.onToggleAll($event)\" />\n                </div>\n                <div\n                    class=\"p-checkbox-box cursor-pointer\"\n                    role=\"checkbox\"\n                    [attr.aria-checked]=\"columnToggleMultiselect.allSelected\"\n                    [class.p-select-option-selected]=\"anyColumnVisible()\"\n                    (click)=\"prefs.onColumnToggleAll()\">\n                    <span class=\"p-checkbox-icon\" [ngClass]=\"{'pi pi-check': anyColumnVisible()}\"></span>\n                </div>\n            </div>\n            <p-button\n                icon=\"pi pi-replay\"\n                severity=\"secondary\"\n                text=\"true\"\n                tooltipPosition=\"left\"\n                [pTooltip]=\"'mngTable.resetLayout' | translate\"\n                (click)=\"prefs.clearLayoutPreferences()\"></p-button>\n        </div>\n    </ng-template>\n    <ng-template #item let-item>\n        {{\n            (item.descriptor.title && !item.descriptor.titleUseModelBase\n                ? item.descriptor.title\n                : (item.descriptor.title ?? item.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n            ) | translate\n        }}\n    </ng-template>\n</p-multiSelect>\n"],"names":[],"mappings":"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"}