@sd-angular/core 0.0.956 → 0.0.960

package/bundles/sd-angular-core-grid-material.umd.js

@@ -2928,9 +2928,9 @@
     SdDesktopCellView.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-desktop-cell-view',
-                    template: "<ng-container *ngIf=\"column.htmlTemplate;else useDefaultView\">\r\n  <div (click)=\"column.click && column.click(item[column.field], item)\" style=\"overflow-wrap: break-word;\"\r\n    [ngClass]=\"{'cursor-pointer':column.click}\"\r\n    [innerHTML]=\"(item[column.field] | columnHtmlTemplate:item:column) | safeHtml\">\r\n  </div>\r\n</ng-container>\r\n<ng-template #useDefaultView>\r\n  <ng-container *sdLet=\"item[column.field] | columnBadge:item:column as badge\">\r\n    <ng-container *sdLet=\"item[column.field] | columnTooltip:item:column as tooltip\">\r\n      <ng-container *sdLet=\"item[column.field] | columnTransform:item:column:key | async as val\">\r\n        <ng-container\r\n          *ngIf=\"column.type === 'string' || column.type === 'number' || column.type === 'bool' || column.type === 'values'\">\r\n          <ng-container *ngIf=\"!!badge\">\r\n            <div *ngIf=\"!column.badgeType\" class=\"c-badge\" matTooltipPosition=\"above\" [matTooltip]=\"tooltip\"\r\n              [class]=\"{'c-secondary': badge === 'normal', 'c-info': badge === 'info', 'c-success': badge === 'success', 'c-danger': badge === 'danger', 'c-warning': badge === 'warning'}\">\r\n              <span *ngIf=\"column.click\" class=\"pointer\" (click)=\"column.click(item[column.field], item)\">{{val}}</span>\r\n              <ng-container *ngIf=\"!column.click\">{{val}}\r\n              </ng-container>\r\n            </div>\r\n            <div *ngIf=\"column.badgeType === 'circle'\" class=\"c-badge-circle d-flex align-items-center\"\r\n              [matTooltip]=\"tooltip\"\r\n              [class]=\"{'c-unknown': !badge, 'c-secondary': badge === 'normal', 'c-info': badge === 'info', 'c-success': badge === 'success', 'c-danger': badge === 'danger', 'c-warning': badge === 'warning'}\">\r\n              <span *ngIf=\"badge\" class=\"material-icons-round c-material-icon mr-4\">\r\n                fiber_manual_record\r\n              </span>\r\n              <span *ngIf=\"!badge\" class=\"material-icons-outlined c-material-icon mr-4\">\r\n                fiber_manual_record\r\n              </span>\r\n              <span *ngIf=\"column.click\" class=\"pointer\" (click)=\"column.click(item[column.field], item)\">{{val}}</span>\r\n              <ng-container *ngIf=\"!column.click\">{{val}}\r\n              </ng-container>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"!badge\">\r\n            <div class=\"text-break\" [matTooltip]=\"tooltip\">\r\n              <a *ngIf=\"column.click\" href=\"javascript:;\" (click)=\"column.click(item[column.field], item)\">{{val}}</a>\r\n              <ng-container *ngIf=\"!column.click\">{{val}}\r\n              </ng-container>\r\n            </div>\r\n          </ng-container>\r\n        </ng-container>\r\n        <div *ngIf=\"column.type === 'date'\" matTooltipPosition=\"above\"\r\n          [matTooltip]=\"item[column.field] | date:'dd/MM/yyyy'\">\r\n          {{val | sdTimeDifferent:'dd/MM/yyyy':column.option?.timeDifferent | async}}\r\n        </div>\r\n        <div *ngIf=\"column.type === 'datetime'\" matTooltipPosition=\"above\"\r\n          [matTooltip]=\"item[column.field] | date:'dd/MM/yyyy HH:mm'\">\r\n          {{val | sdTimeDifferent:'dd/MM/yyyy HH:mm':column.option?.timeDifferent | async}}\r\n        </div>\r\n        <div *ngIf=\"column.type === 'time'\">\r\n          {{val | date:'HH:mm'}}\r\n        </div>\r\n        <div *ngIf=\"column.type === 'image'\" class=\"align-middle text-center\">\r\n          <img *ngIf=\"val\" [src]=\"val\" [width]=\"column.option?.width\" [height]=\"column.option?.height\"\r\n            style=\"margin: 5px 0;object-fit: contain;\" (click)=\"column.click && column.click(item[column.field], item)\"\r\n            [ngClass]=\"{'pointer':column.click}\">\r\n          <mat-icon *ngIf=\"!val\" class=\"c-img\" [ngClass]=\"{'pointer':column.click}\"\r\n            (click)=\"column.click && column.click(item[column.field], item)\">image</mat-icon>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n  <sd-desktop-cell-children-view *ngIf=\"column.type === 'children'\" [key]=\"key\" [item]=\"item\" [column]=\"column\">\r\n  </sd-desktop-cell-children-view>\r\n</ng-template>",
+                    template: "<ng-container *ngIf=\"column.htmlTemplate;else useDefaultView\">\r\n  <div (click)=\"column.click && column.click(item[column.field], item)\" style=\"overflow-wrap: break-word;\"\r\n    [ngClass]=\"{'cursor-pointer':column.click}\"\r\n    [innerHTML]=\"(item[column.field] | columnHtmlTemplate:item:column) | safeHtml\">\r\n  </div>\r\n</ng-container>\r\n<ng-template #useDefaultView>\r\n  <ng-container *sdLet=\"item[column.field] | columnBadge:item:column as badge\">\r\n    <ng-container *sdLet=\"item[column.field] | columnTooltip:item:column as tooltip\">\r\n      <ng-container *sdLet=\"item[column.field] | columnTransform:item:column:key | async as val\">\r\n        <ng-container\r\n          *ngIf=\"column.type === 'string' || column.type === 'number' || column.type === 'bool' || column.type === 'values'\">\r\n          <ng-container *ngIf=\"!!badge\">\r\n            <sd-badge [type]=\"!column.badgeType ? 'round' : 'circle'\" [title]=\"val\" [color]=\"badge\" [tooltip]=\"tooltip\"\r\n              (sdClick)=\"column.click(item[column.field], item)\"></sd-badge>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"!badge\">\r\n            <div class=\"text-break\" [matTooltip]=\"tooltip\">\r\n              <a *ngIf=\"column.click\" href=\"javascript:;\" (click)=\"column.click(item[column.field], item)\">{{val}}</a>\r\n              <ng-container *ngIf=\"!column.click\">{{val}}\r\n              </ng-container>\r\n            </div>\r\n          </ng-container>\r\n        </ng-container>\r\n        <div *ngIf=\"column.type === 'date'\" matTooltipPosition=\"above\"\r\n          [matTooltip]=\"item[column.field] | date:'dd/MM/yyyy'\">\r\n          {{val | sdTimeDifferent:'dd/MM/yyyy':column.option?.timeDifferent | async}}\r\n        </div>\r\n        <div *ngIf=\"column.type === 'datetime'\" matTooltipPosition=\"above\"\r\n          [matTooltip]=\"item[column.field] | date:'dd/MM/yyyy HH:mm'\">\r\n          {{val | sdTimeDifferent:'dd/MM/yyyy HH:mm':column.option?.timeDifferent | async}}\r\n        </div>\r\n        <div *ngIf=\"column.type === 'time'\">\r\n          {{val | date:'HH:mm'}}\r\n        </div>\r\n        <div *ngIf=\"column.type === 'image'\" class=\"align-middle text-center\">\r\n          <img *ngIf=\"val\" [src]=\"val\" [width]=\"column.option?.width\" [height]=\"column.option?.height\"\r\n            style=\"margin: 5px 0;object-fit: contain;\" (click)=\"column.click && column.click(item[column.field], item)\"\r\n            [ngClass]=\"{'pointer':column.click}\">\r\n          <mat-icon *ngIf=\"!val\" class=\"c-img\" [ngClass]=\"{'pointer':column.click}\"\r\n            (click)=\"column.click && column.click(item[column.field], item)\">image</mat-icon>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n  <sd-desktop-cell-children-view *ngIf=\"column.type === 'children'\" [key]=\"key\" [item]=\"item\" [column]=\"column\">\r\n  </sd-desktop-cell-children-view>\r\n</ng-template>",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    styles: [".c-color-success{color:#4caf50}.c-color-danger{color:#f82c13}.c-img{font-size:30px;opacity:.5}.c-img.pointer:hover{opacity:.9}.c-badge{border-radius:20px;display:inline-block;margin-bottom:4px;overflow-wrap:break-word;padding:2px 12px;text-align:center}.c-badge.c-warning{background:#fff3e0;color:#ff9600}.c-badge.c-info{background:#e7e9ff;color:#2962ff}.c-badge.c-success{background:#e8f5e9;color:#4caf50}.c-badge.c-danger{background:#fee8e7;color:#f82c13}.c-badge.c-normal{background:rgba(0,0,0,.12);color:#000}.c-badge-circle{min-width:150px}.c-badge-circle .c-material-icon{font-size:12px;height:12px;width:12px}.c-badge-circle.c-unknown{color:#212121}.c-badge-circle.c-unknown .c-material-icon{color:rgba(0,0,0,.5)}.c-badge-circle.c-secondary{color:#212121}.c-badge-circle.c-info{color:#2962ff}.c-badge-circle.c-success{color:#4caf50}.c-badge-circle.c-danger{color:#f82c13}.c-badge-circle.c-warning{color:#ff9600}"]
+                    styles: [".c-color-success{color:#4caf50}.c-color-danger{color:#f82c13}.c-img{font-size:30px;opacity:.5}.c-img.pointer:hover{opacity:.9}"]
                 },] }
     ];
     SdDesktopCellView.ctorParameters = function () { return []; };
@@ -3691,7 +3691,7 @@
     SdDesktopCell.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-desktop-cell',
-                    template: "<ng-container *ngIf=\"column && item\">\r\n  <ng-container *ngIf=\"item.editorHandlerRow;else useView\">\r\n    <ng-container *sdLet=\"item[column.field] | sdEditorHandlerColumn:item:column:gridOption\">\r\n      <ng-container *ngIf=\"item.editorHandlerColumn[column.field]?.visible;else useView\">\r\n        <ng-container *ngIf=\"cellDef[column.field]\">\r\n          <ng-container *ngTemplateOutlet=\"\r\n            cellDef[column.field].templateRef;\r\n            context: { item: item, column: column, idx: idx, isEdited: true }\r\n          \">\r\n          </ng-container>\r\n        </ng-container>\r\n        <sd-desktop-cell-editor *ngIf=\"!cellDef[column.field]\" [sdId]=\"item.sdId\" [column]=\"column\" [item]=\"item\">\r\n        </sd-desktop-cell-editor>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #useView>\r\n    <ng-container *ngIf=\"cellDef[column.field]\">\r\n      <ng-container *ngTemplateOutlet=\"\r\n          cellDef[column.field].templateRef;\r\n          context: { item: item, column: column, idx: idx }\r\n        \">\r\n      </ng-container>\r\n    </ng-container>\r\n    <sd-desktop-cell-view *ngIf=\"!cellDef[column.field]\" [sdId]=\"item.sdId\" [key]=\"key\" [column]=\"column\" [item]=\"item\">\r\n    </sd-desktop-cell-view>\r\n  </ng-template>\r\n</ng-container>",
+                    template: "<ng-container *ngIf=\"column && item\">\r\n  <ng-container *ngIf=\"item.editorHandlerRow?.visible;else useView\">\r\n    <ng-container *sdLet=\"item[column.field] | sdEditorHandlerColumn:item:column:gridOption\">\r\n      <ng-container *ngIf=\"item.editorHandlerColumn[column.field]?.visible;else useView\">\r\n        <ng-container *ngIf=\"cellDef[column.field]\">\r\n          <ng-container *ngTemplateOutlet=\"\r\n            cellDef[column.field].templateRef;\r\n            context: { item: item, column: column, idx: idx, isEdited: true }\r\n          \">\r\n          </ng-container>\r\n        </ng-container>\r\n        <sd-desktop-cell-editor *ngIf=\"!cellDef[column.field]\" [sdId]=\"item.sdId\" [column]=\"column\" [item]=\"item\">\r\n        </sd-desktop-cell-editor>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #useView>\r\n    <ng-container *ngIf=\"cellDef[column.field]\">\r\n      <ng-container *ngTemplateOutlet=\"\r\n          cellDef[column.field].templateRef;\r\n          context: { item: item, column: column, idx: idx }\r\n        \">\r\n      </ng-container>\r\n    </ng-container>\r\n    <sd-desktop-cell-view *ngIf=\"!cellDef[column.field]\" [sdId]=\"item.sdId\" [key]=\"key\" [column]=\"column\" [item]=\"item\">\r\n    </sd-desktop-cell-view>\r\n  </ng-template>\r\n</ng-container>",
                     changeDetection: core.ChangeDetectionStrategy.OnPush
                 },] }
     ];
@@ -3750,18 +3750,21 @@
             else {
                 isDisabled = editor === null || editor === void 0 ? void 0 : editor.disabled;
             }
-            if (isDisabled) {
-                return null;
-            }
             if (editor.type === 'inline') {
                 var removable = editor.removable;
-                item.editorHandlerRow = Object.assign(Object.assign({}, item.editorHandlerRow), { visible: true, editable: false, removable: status !== 'create' && (typeof (removable) === 'function' ? removable(item) : removable), savable: false, cancelable: status === 'create' });
+                item.editorHandlerRow = Object.assign(Object.assign({}, item.editorHandlerRow), { visible: !isDisabled, editable: false, removable: status !== 'create' && (typeof (removable) === 'function' ? removable(item) : removable), savable: false, cancelable: !isDisabled && status === 'create' });
             }
             else if (editor.type === 'focus') {
+                if (isDisabled) {
+                    return null;
+                }
                 var editable = editor.editable;
                 item.editorHandlerRow = Object.assign(Object.assign({}, item.editorHandlerRow), { visible: !!status, editable: !status && (typeof (editable) === 'function' ? editable(item) : editable), removable: false, savable: !!status, cancelable: !!status });
             }
             else if (editor.type === 'popup') {
+                if (isDisabled) {
+                    return null;
+                }
                 var editable = editor.editable;
                 item.editorHandlerRow = Object.assign(Object.assign({}, item.editorHandlerRow), { visible: false, editable: !status && (typeof (editable) === 'function' ? editable(item) : editable), removable: false, savable: false, cancelable: false });
             }
@@ -3933,7 +3936,7 @@
     SdColumnInlineFilter.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-column-inline-filter',
-                    template: "<div class=\"c-inline-column\">\r\n  <ng-container *ngIf=\"\r\n  column.type === 'string' ||\r\n  column.type === 'number' ||\r\n  column.type === 'bool' ||\r\n  column.type === 'values' ||\r\n  column.type === 'date' ||\r\n  column.type === 'datetime' ||\r\n  column.type === 'time';\r\n  else noFilter\">\r\n    <sd-input *ngIf=\"column.type === 'string'\" size=\"sm\" type=\"text\" [(model)]=\"columnFilter[column.field]\"\r\n      (keyupEnter)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n    </sd-input>\r\n    <sd-input *ngIf=\"column.type === 'number'\" size=\"sm\" type=\"number\" [(model)]=\"columnFilter[column.field]\"\r\n      (keyupEnter)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n    </sd-input>\r\n    <sd-select *ngIf=\"column.type === 'bool'\" size=\"sm\" [items]=\"[\r\n        { value: '1', display: column.option?.displayOnTrue || 'True' },\r\n        { value: '0', display: column.option?.displayOnFalse || 'False' }\r\n      ]\" valueField=\"value\" displayField=\"display\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n    </sd-select>\r\n    <sd-select *ngIf=\"\r\n        column.type === 'values' && column?.option?.selection !== 'AUTOCOMPLETE'\r\n      \" size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n      [displayField]=\"column.option.displayField\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\" [multiple]=\"\r\n        column?.option?.selection === 'MULTIPLE' ||\r\n        column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\r\n      \" [filtered]=\"column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\">\r\n    </sd-select>\r\n    <sd-autocomplete *ngIf=\"\r\n        column.type === 'values' && column?.option?.selection === 'AUTOCOMPLETE'\r\n      \" size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n      [displayField]=\"column.option.displayField\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n    </sd-autocomplete>\r\n    <sd-date-range *ngIf=\"\r\n        column.type === 'date' ||\r\n        column.type === 'datetime' ||\r\n        column.type === 'time'\r\n      \" size=\"sm\" [(from)]=\"columnFilter[column.field].from\" [(to)]=\"columnFilter[column.field].to\"\r\n      (sdChange)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n    </sd-date-range>\r\n  </ng-container>\r\n  <ng-template #noFilter>\r\n    <sd-input type=\"text\" size=\"sm\" disabled> </sd-input>\r\n  </ng-template>\r\n</div>",
+                    template: "<div class=\"c-inline-column\">\r\n  <ng-container *ngIf=\"\r\n  column.type === 'string' ||\r\n  column.type === 'number' ||\r\n  column.type === 'bool' ||\r\n  column.type === 'values' ||\r\n  column.type === 'date' ||\r\n  column.type === 'datetime' ||\r\n  column.type === 'time';\r\n  else noFilter\">\r\n    <sd-input *ngIf=\"column.type === 'string'\" size=\"sm\" type=\"text\" [(model)]=\"columnFilter[column.field]\"\r\n      (keyupEnter)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n    </sd-input>\r\n    <sd-input *ngIf=\"column.type === 'number'\" size=\"sm\" type=\"number\" [(model)]=\"columnFilter[column.field]\"\r\n      (keyupEnter)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n    </sd-input>\r\n    <sd-select *ngIf=\"column.type === 'bool'\" size=\"sm\" [items]=\"[\r\n        { value: '1', display: column.option?.displayOnTrue || 'True' },\r\n        { value: '0', display: column.option?.displayOnFalse || 'False' }\r\n      ]\" valueField=\"value\" displayField=\"display\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n      <ng-template sdAutocompleteDisplayDef let-item=\"item\">\r\n        <sd-badge *ngIf=\"columnFilter[column.field] === '1'\" color=\"success\"\r\n          [title]=\"column.option?.displayOnTrue || 'True'\"></sd-badge>\r\n        <sd-badge *ngIf=\"columnFilter[column.field] === '0'\" color=\"danger\"\r\n          [title]=\"column.option?.displayOnFalse || 'False'\"></sd-badge>\r\n      </ng-template>\r\n    </sd-select>\r\n    <sd-select *ngIf=\"\r\n        column.type === 'values' && column?.option?.selection !== 'AUTOCOMPLETE'\r\n      \" size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n      [displayField]=\"column.option.displayField\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\" [multiple]=\"\r\n        column?.option?.selection === 'MULTIPLE' ||\r\n        column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\r\n      \" [filtered]=\"column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\">\r\n    </sd-select>\r\n    <sd-autocomplete *ngIf=\"\r\n        column.type === 'values' && column?.option?.selection === 'AUTOCOMPLETE'\r\n      \" size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n      [displayField]=\"column.option.displayField\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n    </sd-autocomplete>\r\n    <sd-date-range *ngIf=\"\r\n        column.type === 'date' ||\r\n        column.type === 'datetime' ||\r\n        column.type === 'time'\r\n      \" size=\"sm\" [(from)]=\"columnFilter[column.field].from\" [(to)]=\"columnFilter[column.field].to\"\r\n      (sdChange)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n    </sd-date-range>\r\n  </ng-container>\r\n  <ng-template #noFilter>\r\n    <sd-input type=\"text\" size=\"sm\" disabled> </sd-input>\r\n  </ng-template>\r\n</div>",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     styles: [":host ::ng-deep .c-inline-column .mat-form-field-wrapper{background-color:#fff;border-radius:8px;margin:8px 0 0!important;padding:0!important}"]
                 },] }