nira-falcon 0.1.64 → 0.1.66
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/lib/core-select/core-select.component.mjs +3 -3
- package/esm2022/lib/core-table/core-table/core-table.component.mjs +58 -4
- package/fesm2022/nira-falcon.mjs +59 -5
- package/fesm2022/nira-falcon.mjs.map +1 -1
- package/lib/core-table/core-table/core-table.component.d.ts +11 -2
- package/package.json +1 -1
- package/styles copy.css +0 -1
package/fesm2022/nira-falcon.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, Input, EventEmitter, Output, Pipe, ViewChildren, Directive, HostListener, NgModule } from '@angular/core';
|
|
2
|
+
import { Component, Input, EventEmitter, Output, Pipe, ViewChildren, Directive, HostListener, ViewChild, NgModule } from '@angular/core';
|
|
3
3
|
import * as i1$1 from 'nira-modal';
|
|
4
4
|
import * as i1 from '@angular/common';
|
|
5
5
|
import { CommonModule } from '@angular/common';
|
|
@@ -942,11 +942,11 @@ class CoreSelectComponent {
|
|
|
942
942
|
}
|
|
943
943
|
}
|
|
944
944
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CoreSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
945
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CoreSelectComponent, selector: "core-select", inputs: { titleKey: "titleKey", valueKey: "valueKey", size: "size", canHighlightBackground: "canHighlightBackground", items: "items", defaultValue: "defaultValue", label: "label", disabled: "disabled", inputFormControl: "inputFormControl" }, outputs: { onItemSelected: "onItemSelected" }, viewQueries: [{ propertyName: "focusableElements", predicate: ["focusable"], descendants: true }], ngImport: i0, template: "<div class=\"dropdown\" (focusout)=\"focusOut($event)\">\r\n <div\r\n class=\"select\"\r\n [ngClass]=\"{\r\n 'select-clicked': isOpenMenu,\r\n 'highlight-background':\r\n canHighlightBackground &&\r\n (selectedItem | json) === ({} | json) &&\r\n !(inputFormControl.touched && inputFormControl.errors),\r\n selectError: inputFormControl.touched && inputFormControl.errors ,\r\n 'disable-selector': disabled,\r\n\r\n }\"\r\n tabindex=\"0\"\r\n (keypress)=\"onEnterPress($event)\"\r\n (click)=\"openMenuClick(false)\"\r\n >\r\n <span\r\n class=\"placeholder-top\"\r\n *ngIf=\"(selectedItem | json) != ({} | json)\"\r\n >{{ label }}</span\r\n >\r\n <arrow-down-icon\r\n class=\"caret fill-secondary-text-color h-6\"\r\n [ngClass]=\"{ 'caret-rotate': isOpenMenu }\"\r\n ></arrow-down-icon>\r\n\r\n <span\r\n [ngClass]=\"[\r\n label.length > 0 && (selectedItem | json) == ({} | json)\r\n ? 'placeholder'\r\n : 'selected'\r\n ]\"\r\n >{{\r\n label.length > 0 && (selectedItem | json) == ({} | json)\r\n ? label\r\n : selectedItem.title\r\n }}</span\r\n >\r\n </div>\r\n <div\r\n class=\"no-data\"\r\n *ngIf=\"newItems.length === 0\"\r\n [ngClass]=\"{ 'menu-open': isOpenMenu }\"\r\n >\r\n <warning-icon class=\"icon-color inline-block w-6\"></warning-icon>\r\n <b class=\"content block\">\u0645\u0648\u0631\u062F\u06CC \u06CC\u0627\u0641\u062A \u0646\u0634\u062F</b>\r\n </div>\r\n <ul\r\n class=\"menu dropdown\"\r\n (keydown)=\"handleKey($event)\"\r\n [ngClass]=\"{ 'menu-open': isOpenMenu }\"\r\n >\r\n <li\r\n *ngFor=\"let item of newItems\"\r\n class=\"dropdown-item\"\r\n #focusable\r\n [ngClass]=\"{ active: item == selectedItem }\"\r\n (click)=\"onItemSelect(item, true)\"\r\n (keypress)=\"dropdownItemKeypress($event, item)\"\r\n tabindex=\"0\"\r\n >\r\n {{ item.title }}\r\n </li>\r\n </ul>\r\n <div class=\"label-error overflow-hidden\">\r\n <span\r\n *ngIf=\"\r\n inputFormControl.touched &&\r\n inputFormControl.errors?.['required']\"\r\n >\u0627\u06CC\u0646 \u0641\u06CC\u0644\u062F \u062E\u0627\u0644\u06CC \u0627\u0633\u062A</span\r\n >\r\n </div>\r\n</div>\r\n", styles: [".dropdown{min-width:15em;position:relative;width:100%;min-width:120px}.dropdown .disable-selector{background-color:#f7f7f7!important;border:1px dashed #ced4da!important;cursor:no-drop!important}.dropdown .highlight-background{background-color:#dcf6ff!important}.dropdown .select{background:#fff;color:#304050;display:flex;height:42px;justify-content:space-between;flex-direction:row-reverse;align-items:center;border:1px solid #ced4da;border-radius:4px;padding:8px;cursor:pointer;transition:background .3s;font-size:12px;-webkit-user-select:none;user-select:none}.dropdown .select:hover{background:#fbfbfb}.dropdown .select:focus{border:1px solid rgba(19,92,175,.397);outline:none}.dropdown .select .selected{padding-inline:12px;font-size:14px;color:#000000b3;-webkit-user-select:none;user-select:none}.dropdown .select .placeholder-top{position:absolute;right:13px;background:#fff;top:-8px;padding-inline:6px;font-size:11px;color:#888}.dropdown .select .caret{color:#595c5f;-webkit-user-select:none;user-select:none}.dropdown .select .caret-rotate{transform:rotate(180deg)}.dropdown .select .placeholder{color:#888;padding-inline:16px}.dropdown .select-clicked{border:1px solid rgba(19,92,175,.397)}.dropdown .no-data{display:none;justify-content:center;align-items:center;font-size:small;flex-direction:column;padding-inline:0px;background:#fff;border:1px #e3e8f1 solid;box-shadow:0 .5em 1em #0003;border-radius:.5em;color:#595c5f;position:absolute;top:40px;left:50%;width:100%;transform:translate(-50%);transition:0,2s;z-index:10;height:120px;overflow:auto}.dropdown .no-data .icon-color{fill:var(--default-table-warning-icon-color)}.dropdown .no-data .content{color:var(--default-table-warning-color)}.dropdown .menu{list-style:none;padding-inline:0px;background:#fff;border:1px #e3e8f1 solid;box-shadow:0 .5em 1em #0003;border-radius:.5em;color:#595c5f;position:absolute;top:40px;left:50%;width:100%;transform:translate(-50%);display:none;transition:0,2s;z-index:10;max-height:200px;overflow:auto}.dropdown .menu li{padding:.7em .5em;margin:.3em 0;border-radius:.5em;font-size:14px;text-align:start;cursor:pointer}.dropdown .menu li:hover{background:#f6f6f6;box-shadow:0 1px 2px #00000021,0 4px 4px #0000001a}.dropdown .menu li:focus{outline:none}.dropdown .menu .active{background:#ced4da!important}.dropdown .menu-open{display:flex!important;opacity:1}.dropdown .label-error{color:red;font-size:13px;margin-block-start:4px;min-height:21px;width:100%;display:inline-block!important;text-align:start}.dropdown .selectError{border:1px solid #fe5f5f!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WarningIconComponent, selector: "warning-icon" }, { kind: "component", type: ArrowDownIconComponent, selector: "arrow-down-icon" }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] }); }
|
|
945
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CoreSelectComponent, selector: "core-select", inputs: { titleKey: "titleKey", valueKey: "valueKey", size: "size", canHighlightBackground: "canHighlightBackground", items: "items", defaultValue: "defaultValue", label: "label", disabled: "disabled", inputFormControl: "inputFormControl" }, outputs: { onItemSelected: "onItemSelected" }, viewQueries: [{ propertyName: "focusableElements", predicate: ["focusable"], descendants: true }], ngImport: i0, template: "<div class=\"dropdown\" (focusout)=\"focusOut($event)\">\r\n <div\r\n class=\"select\"\r\n [ngClass]=\"{\r\n 'select-clicked': isOpenMenu,\r\n 'highlight-background':\r\n canHighlightBackground &&\r\n (selectedItem | json) === ({} | json) &&\r\n !(inputFormControl.touched && inputFormControl.errors),\r\n selectError: inputFormControl.touched && inputFormControl.errors ,\r\n 'disable-selector': disabled,\r\n\r\n }\"\r\n tabindex=\"0\"\r\n (keypress)=\"onEnterPress($event)\"\r\n (click)=\"openMenuClick(false)\"\r\n >\r\n <span\r\n class=\"placeholder-top\"\r\n *ngIf=\"(selectedItem | json) != ({} | json)\"\r\n >{{ label }}</span\r\n >\r\n <arrow-down-icon\r\n class=\"caret fill-secondary-text-color h-6\"\r\n [ngClass]=\"{ 'caret-rotate': isOpenMenu }\"\r\n ></arrow-down-icon>\r\n\r\n <span\r\n [ngClass]=\"[\r\n label.length > 0 && (selectedItem | json) == ({} | json)\r\n ? 'placeholder'\r\n : 'selected'\r\n ]\"\r\n >{{\r\n label.length > 0 && (selectedItem | json) == ({} | json)\r\n ? label\r\n : selectedItem.title\r\n }}</span\r\n >\r\n </div>\r\n <div\r\n class=\"no-data\"\r\n *ngIf=\"newItems.length === 0\"\r\n [ngClass]=\"{ 'menu-open-no-data': isOpenMenu }\"\r\n >\r\n <warning-icon class=\"icon-color inline-block w-6\"></warning-icon>\r\n <b class=\"content block\">\u0645\u0648\u0631\u062F\u06CC \u06CC\u0627\u0641\u062A \u0646\u0634\u062F</b>\r\n </div>\r\n <ul\r\n class=\"menu dropdown\"\r\n (keydown)=\"handleKey($event)\"\r\n [ngClass]=\"{ 'menu-open': isOpenMenu }\"\r\n >\r\n <li\r\n *ngFor=\"let item of newItems\"\r\n class=\"dropdown-item\"\r\n #focusable\r\n [ngClass]=\"{ active: item == selectedItem }\"\r\n (click)=\"onItemSelect(item, true)\"\r\n (keypress)=\"dropdownItemKeypress($event, item)\"\r\n tabindex=\"0\"\r\n >\r\n {{ item.title }}\r\n </li>\r\n </ul>\r\n <div class=\"label-error overflow-hidden\">\r\n <span\r\n *ngIf=\"\r\n inputFormControl.touched &&\r\n inputFormControl.errors?.['required']\"\r\n >\u0627\u06CC\u0646 \u0641\u06CC\u0644\u062F \u062E\u0627\u0644\u06CC \u0627\u0633\u062A</span\r\n >\r\n </div>\r\n</div>\r\n", styles: [".dropdown{min-width:15em;position:relative;width:100%;min-width:120px}.dropdown .disable-selector{background-color:#f7f7f7!important;border:1px dashed #ced4da!important;cursor:no-drop!important}.dropdown .highlight-background{background-color:#dcf6ff!important}.dropdown .select{background:#fff;color:#304050;display:flex;height:42px;justify-content:space-between;flex-direction:row-reverse;align-items:center;border:1px solid #ced4da;border-radius:4px;padding:8px;cursor:pointer;transition:background .3s;font-size:12px;-webkit-user-select:none;user-select:none}.dropdown .select:hover{background:#fbfbfb}.dropdown .select:focus{border:1px solid rgba(19,92,175,.397);outline:none}.dropdown .select .selected{padding-inline:12px;font-size:14px;color:#000000b3;-webkit-user-select:none;user-select:none}.dropdown .select .placeholder-top{position:absolute;right:13px;background:#fff;top:-8px;padding-inline:6px;font-size:11px;color:#888}.dropdown .select .caret{color:#595c5f;-webkit-user-select:none;user-select:none}.dropdown .select .caret-rotate{transform:rotate(180deg)}.dropdown .select .placeholder{color:#888;padding-inline:16px}.dropdown .select-clicked{border:1px solid rgba(19,92,175,.397)}.dropdown .no-data{display:none;justify-content:center;align-items:center;font-size:small;flex-direction:column;padding-inline:0px;background:#fff;border:1px #e3e8f1 solid;box-shadow:0 .5em 1em #0003;border-radius:.5em;color:#595c5f;position:absolute;top:40px;left:50%;width:100%;transform:translate(-50%);transition:0,2s;z-index:10;height:120px;overflow:auto}.dropdown .no-data .icon-color{fill:var(--default-table-warning-icon-color)}.dropdown .no-data .content{color:var(--default-table-warning-color)}.dropdown .menu{list-style:none;padding-inline:0px;background:#fff;border:1px #e3e8f1 solid;box-shadow:0 .5em 1em #0003;border-radius:.5em;color:#595c5f;position:absolute;top:40px;left:50%;width:100%;transform:translate(-50%);display:none;transition:0,2s;z-index:10;max-height:200px;overflow:auto}.dropdown .menu li{padding:.7em .5em;margin:.3em 0;border-radius:.5em;font-size:14px;text-align:start;cursor:pointer}.dropdown .menu li:hover{background:#f6f6f6;box-shadow:0 1px 2px #00000021,0 4px 4px #0000001a}.dropdown .menu li:focus{outline:none}.dropdown .menu .active{background:#ced4da!important}.dropdown .menu-open-no-data{display:flex!important;opacity:1}.dropdown .menu-open{display:block;opacity:1}.dropdown .label-error{color:red;font-size:13px;margin-block-start:4px;min-height:21px;width:100%;display:inline-block!important;text-align:start}.dropdown .selectError{border:1px solid #fe5f5f!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WarningIconComponent, selector: "warning-icon" }, { kind: "component", type: ArrowDownIconComponent, selector: "arrow-down-icon" }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] }); }
|
|
946
946
|
}
|
|
947
947
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CoreSelectComponent, decorators: [{
|
|
948
948
|
type: Component,
|
|
949
|
-
args: [{ selector: 'core-select', template: "<div class=\"dropdown\" (focusout)=\"focusOut($event)\">\r\n <div\r\n class=\"select\"\r\n [ngClass]=\"{\r\n 'select-clicked': isOpenMenu,\r\n 'highlight-background':\r\n canHighlightBackground &&\r\n (selectedItem | json) === ({} | json) &&\r\n !(inputFormControl.touched && inputFormControl.errors),\r\n selectError: inputFormControl.touched && inputFormControl.errors ,\r\n 'disable-selector': disabled,\r\n\r\n }\"\r\n tabindex=\"0\"\r\n (keypress)=\"onEnterPress($event)\"\r\n (click)=\"openMenuClick(false)\"\r\n >\r\n <span\r\n class=\"placeholder-top\"\r\n *ngIf=\"(selectedItem | json) != ({} | json)\"\r\n >{{ label }}</span\r\n >\r\n <arrow-down-icon\r\n class=\"caret fill-secondary-text-color h-6\"\r\n [ngClass]=\"{ 'caret-rotate': isOpenMenu }\"\r\n ></arrow-down-icon>\r\n\r\n <span\r\n [ngClass]=\"[\r\n label.length > 0 && (selectedItem | json) == ({} | json)\r\n ? 'placeholder'\r\n : 'selected'\r\n ]\"\r\n >{{\r\n label.length > 0 && (selectedItem | json) == ({} | json)\r\n ? label\r\n : selectedItem.title\r\n }}</span\r\n >\r\n </div>\r\n <div\r\n class=\"no-data\"\r\n *ngIf=\"newItems.length === 0\"\r\n [ngClass]=\"{ 'menu-open': isOpenMenu }\"\r\n >\r\n <warning-icon class=\"icon-color inline-block w-6\"></warning-icon>\r\n <b class=\"content block\">\u0645\u0648\u0631\u062F\u06CC \u06CC\u0627\u0641\u062A \u0646\u0634\u062F</b>\r\n </div>\r\n <ul\r\n class=\"menu dropdown\"\r\n (keydown)=\"handleKey($event)\"\r\n [ngClass]=\"{ 'menu-open': isOpenMenu }\"\r\n >\r\n <li\r\n *ngFor=\"let item of newItems\"\r\n class=\"dropdown-item\"\r\n #focusable\r\n [ngClass]=\"{ active: item == selectedItem }\"\r\n (click)=\"onItemSelect(item, true)\"\r\n (keypress)=\"dropdownItemKeypress($event, item)\"\r\n tabindex=\"0\"\r\n >\r\n {{ item.title }}\r\n </li>\r\n </ul>\r\n <div class=\"label-error overflow-hidden\">\r\n <span\r\n *ngIf=\"\r\n inputFormControl.touched &&\r\n inputFormControl.errors?.['required']\"\r\n >\u0627\u06CC\u0646 \u0641\u06CC\u0644\u062F \u062E\u0627\u0644\u06CC \u0627\u0633\u062A</span\r\n >\r\n </div>\r\n</div>\r\n", styles: [".dropdown{min-width:15em;position:relative;width:100%;min-width:120px}.dropdown .disable-selector{background-color:#f7f7f7!important;border:1px dashed #ced4da!important;cursor:no-drop!important}.dropdown .highlight-background{background-color:#dcf6ff!important}.dropdown .select{background:#fff;color:#304050;display:flex;height:42px;justify-content:space-between;flex-direction:row-reverse;align-items:center;border:1px solid #ced4da;border-radius:4px;padding:8px;cursor:pointer;transition:background .3s;font-size:12px;-webkit-user-select:none;user-select:none}.dropdown .select:hover{background:#fbfbfb}.dropdown .select:focus{border:1px solid rgba(19,92,175,.397);outline:none}.dropdown .select .selected{padding-inline:12px;font-size:14px;color:#000000b3;-webkit-user-select:none;user-select:none}.dropdown .select .placeholder-top{position:absolute;right:13px;background:#fff;top:-8px;padding-inline:6px;font-size:11px;color:#888}.dropdown .select .caret{color:#595c5f;-webkit-user-select:none;user-select:none}.dropdown .select .caret-rotate{transform:rotate(180deg)}.dropdown .select .placeholder{color:#888;padding-inline:16px}.dropdown .select-clicked{border:1px solid rgba(19,92,175,.397)}.dropdown .no-data{display:none;justify-content:center;align-items:center;font-size:small;flex-direction:column;padding-inline:0px;background:#fff;border:1px #e3e8f1 solid;box-shadow:0 .5em 1em #0003;border-radius:.5em;color:#595c5f;position:absolute;top:40px;left:50%;width:100%;transform:translate(-50%);transition:0,2s;z-index:10;height:120px;overflow:auto}.dropdown .no-data .icon-color{fill:var(--default-table-warning-icon-color)}.dropdown .no-data .content{color:var(--default-table-warning-color)}.dropdown .menu{list-style:none;padding-inline:0px;background:#fff;border:1px #e3e8f1 solid;box-shadow:0 .5em 1em #0003;border-radius:.5em;color:#595c5f;position:absolute;top:40px;left:50%;width:100%;transform:translate(-50%);display:none;transition:0,2s;z-index:10;max-height:200px;overflow:auto}.dropdown .menu li{padding:.7em .5em;margin:.3em 0;border-radius:.5em;font-size:14px;text-align:start;cursor:pointer}.dropdown .menu li:hover{background:#f6f6f6;box-shadow:0 1px 2px #00000021,0 4px 4px #0000001a}.dropdown .menu li:focus{outline:none}.dropdown .menu .active{background:#ced4da!important}.dropdown .menu-open{display:flex!important;opacity:1}.dropdown .label-error{color:red;font-size:13px;margin-block-start:4px;min-height:21px;width:100%;display:inline-block!important;text-align:start}.dropdown .selectError{border:1px solid #fe5f5f!important}\n"] }]
|
|
949
|
+
args: [{ selector: 'core-select', template: "<div class=\"dropdown\" (focusout)=\"focusOut($event)\">\r\n <div\r\n class=\"select\"\r\n [ngClass]=\"{\r\n 'select-clicked': isOpenMenu,\r\n 'highlight-background':\r\n canHighlightBackground &&\r\n (selectedItem | json) === ({} | json) &&\r\n !(inputFormControl.touched && inputFormControl.errors),\r\n selectError: inputFormControl.touched && inputFormControl.errors ,\r\n 'disable-selector': disabled,\r\n\r\n }\"\r\n tabindex=\"0\"\r\n (keypress)=\"onEnterPress($event)\"\r\n (click)=\"openMenuClick(false)\"\r\n >\r\n <span\r\n class=\"placeholder-top\"\r\n *ngIf=\"(selectedItem | json) != ({} | json)\"\r\n >{{ label }}</span\r\n >\r\n <arrow-down-icon\r\n class=\"caret fill-secondary-text-color h-6\"\r\n [ngClass]=\"{ 'caret-rotate': isOpenMenu }\"\r\n ></arrow-down-icon>\r\n\r\n <span\r\n [ngClass]=\"[\r\n label.length > 0 && (selectedItem | json) == ({} | json)\r\n ? 'placeholder'\r\n : 'selected'\r\n ]\"\r\n >{{\r\n label.length > 0 && (selectedItem | json) == ({} | json)\r\n ? label\r\n : selectedItem.title\r\n }}</span\r\n >\r\n </div>\r\n <div\r\n class=\"no-data\"\r\n *ngIf=\"newItems.length === 0\"\r\n [ngClass]=\"{ 'menu-open-no-data': isOpenMenu }\"\r\n >\r\n <warning-icon class=\"icon-color inline-block w-6\"></warning-icon>\r\n <b class=\"content block\">\u0645\u0648\u0631\u062F\u06CC \u06CC\u0627\u0641\u062A \u0646\u0634\u062F</b>\r\n </div>\r\n <ul\r\n class=\"menu dropdown\"\r\n (keydown)=\"handleKey($event)\"\r\n [ngClass]=\"{ 'menu-open': isOpenMenu }\"\r\n >\r\n <li\r\n *ngFor=\"let item of newItems\"\r\n class=\"dropdown-item\"\r\n #focusable\r\n [ngClass]=\"{ active: item == selectedItem }\"\r\n (click)=\"onItemSelect(item, true)\"\r\n (keypress)=\"dropdownItemKeypress($event, item)\"\r\n tabindex=\"0\"\r\n >\r\n {{ item.title }}\r\n </li>\r\n </ul>\r\n <div class=\"label-error overflow-hidden\">\r\n <span\r\n *ngIf=\"\r\n inputFormControl.touched &&\r\n inputFormControl.errors?.['required']\"\r\n >\u0627\u06CC\u0646 \u0641\u06CC\u0644\u062F \u062E\u0627\u0644\u06CC \u0627\u0633\u062A</span\r\n >\r\n </div>\r\n</div>\r\n", styles: [".dropdown{min-width:15em;position:relative;width:100%;min-width:120px}.dropdown .disable-selector{background-color:#f7f7f7!important;border:1px dashed #ced4da!important;cursor:no-drop!important}.dropdown .highlight-background{background-color:#dcf6ff!important}.dropdown .select{background:#fff;color:#304050;display:flex;height:42px;justify-content:space-between;flex-direction:row-reverse;align-items:center;border:1px solid #ced4da;border-radius:4px;padding:8px;cursor:pointer;transition:background .3s;font-size:12px;-webkit-user-select:none;user-select:none}.dropdown .select:hover{background:#fbfbfb}.dropdown .select:focus{border:1px solid rgba(19,92,175,.397);outline:none}.dropdown .select .selected{padding-inline:12px;font-size:14px;color:#000000b3;-webkit-user-select:none;user-select:none}.dropdown .select .placeholder-top{position:absolute;right:13px;background:#fff;top:-8px;padding-inline:6px;font-size:11px;color:#888}.dropdown .select .caret{color:#595c5f;-webkit-user-select:none;user-select:none}.dropdown .select .caret-rotate{transform:rotate(180deg)}.dropdown .select .placeholder{color:#888;padding-inline:16px}.dropdown .select-clicked{border:1px solid rgba(19,92,175,.397)}.dropdown .no-data{display:none;justify-content:center;align-items:center;font-size:small;flex-direction:column;padding-inline:0px;background:#fff;border:1px #e3e8f1 solid;box-shadow:0 .5em 1em #0003;border-radius:.5em;color:#595c5f;position:absolute;top:40px;left:50%;width:100%;transform:translate(-50%);transition:0,2s;z-index:10;height:120px;overflow:auto}.dropdown .no-data .icon-color{fill:var(--default-table-warning-icon-color)}.dropdown .no-data .content{color:var(--default-table-warning-color)}.dropdown .menu{list-style:none;padding-inline:0px;background:#fff;border:1px #e3e8f1 solid;box-shadow:0 .5em 1em #0003;border-radius:.5em;color:#595c5f;position:absolute;top:40px;left:50%;width:100%;transform:translate(-50%);display:none;transition:0,2s;z-index:10;max-height:200px;overflow:auto}.dropdown .menu li{padding:.7em .5em;margin:.3em 0;border-radius:.5em;font-size:14px;text-align:start;cursor:pointer}.dropdown .menu li:hover{background:#f6f6f6;box-shadow:0 1px 2px #00000021,0 4px 4px #0000001a}.dropdown .menu li:focus{outline:none}.dropdown .menu .active{background:#ced4da!important}.dropdown .menu-open-no-data{display:flex!important;opacity:1}.dropdown .menu-open{display:block;opacity:1}.dropdown .label-error{color:red;font-size:13px;margin-block-start:4px;min-height:21px;width:100%;display:inline-block!important;text-align:start}.dropdown .selectError{border:1px solid #fe5f5f!important}\n"] }]
|
|
950
950
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { titleKey: [{
|
|
951
951
|
type: Input
|
|
952
952
|
}], valueKey: [{
|
|
@@ -2226,13 +2226,17 @@ class CoreTableComponent {
|
|
|
2226
2226
|
this.columnsSchema = [];
|
|
2227
2227
|
this.tableData = new BehaviorSubject([]);
|
|
2228
2228
|
this.responsive = true;
|
|
2229
|
+
this.canSelectFirstItem = false;
|
|
2229
2230
|
this.canFilter = false;
|
|
2230
2231
|
this.rowSelector = undefined;
|
|
2231
2232
|
this.onColumnClicked = new EventEmitter();
|
|
2232
2233
|
this.onColumnValueChanged = new EventEmitter();
|
|
2234
|
+
this.onItemSelected = new EventEmitter();
|
|
2233
2235
|
this.ACTIVE_OPTIONS = ACTIVE_OPTIONS;
|
|
2234
2236
|
this.YES_NO_OPTIONS = YES_NO_OPTIONS;
|
|
2235
2237
|
this.sortedTableData = [];
|
|
2238
|
+
this.index = 0;
|
|
2239
|
+
this.selectedItemIndex = 0;
|
|
2236
2240
|
}
|
|
2237
2241
|
ngOnInit() {
|
|
2238
2242
|
this.tableData.subscribe((val) => {
|
|
@@ -2249,6 +2253,12 @@ class CoreTableComponent {
|
|
|
2249
2253
|
});
|
|
2250
2254
|
}
|
|
2251
2255
|
}
|
|
2256
|
+
ngAfterViewInit() {
|
|
2257
|
+
if (this.canSelectFirstItem && this.sortedTableData.length > 0) {
|
|
2258
|
+
this.selectedItem = this.sortedTableData[0];
|
|
2259
|
+
this.table.nativeElement.focus();
|
|
2260
|
+
}
|
|
2261
|
+
}
|
|
2252
2262
|
setTableFilter() {
|
|
2253
2263
|
this.columnsSchema.map((column) => {
|
|
2254
2264
|
JSON.parse(this.dbTableFilter.columnsSchema).forEach((dbColumnsSchema) => {
|
|
@@ -2259,6 +2269,39 @@ class CoreTableComponent {
|
|
|
2259
2269
|
return column;
|
|
2260
2270
|
});
|
|
2261
2271
|
}
|
|
2272
|
+
handleEnter(event) {
|
|
2273
|
+
const ke = event;
|
|
2274
|
+
if (document.activeElement === this.table.nativeElement) {
|
|
2275
|
+
if (ke.key === 'ArrowDown') {
|
|
2276
|
+
if (this.selectedItemIndex === this.sortedTableData.length - 1)
|
|
2277
|
+
return;
|
|
2278
|
+
if (this.selectedItemIndex < this.sortedTableData.length - 1) {
|
|
2279
|
+
this.selectedItemIndex++;
|
|
2280
|
+
this.selectedItem = this.sortedTableData[this.selectedItemIndex];
|
|
2281
|
+
this.onItemSelected.emit(this.selectedItem);
|
|
2282
|
+
}
|
|
2283
|
+
event.preventDefault();
|
|
2284
|
+
return;
|
|
2285
|
+
}
|
|
2286
|
+
else if (ke.key === 'ArrowUp') {
|
|
2287
|
+
if (this.selectedItemIndex === 0)
|
|
2288
|
+
return;
|
|
2289
|
+
if (this.selectedItemIndex > 0) {
|
|
2290
|
+
this.selectedItemIndex--;
|
|
2291
|
+
this.selectedItem = this.sortedTableData[this.selectedItemIndex];
|
|
2292
|
+
this.onItemSelected.emit(this.selectedItem);
|
|
2293
|
+
}
|
|
2294
|
+
event.preventDefault();
|
|
2295
|
+
return;
|
|
2296
|
+
}
|
|
2297
|
+
}
|
|
2298
|
+
}
|
|
2299
|
+
onItemSelect(data, index, event) {
|
|
2300
|
+
event.preventDefault();
|
|
2301
|
+
this.selectedItemIndex = index;
|
|
2302
|
+
this.selectedItem = data;
|
|
2303
|
+
this.onItemSelected.emit(this.selectedItem);
|
|
2304
|
+
}
|
|
2262
2305
|
columnClicked(val) {
|
|
2263
2306
|
this.onColumnClicked.emit(val);
|
|
2264
2307
|
}
|
|
@@ -2351,11 +2394,11 @@ class CoreTableComponent {
|
|
|
2351
2394
|
});
|
|
2352
2395
|
}
|
|
2353
2396
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CoreTableComponent, deps: [{ token: i1$4.NgxIndexedDBService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2354
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CoreTableComponent, selector: "core-table", inputs: { key: "key", columnsSchema: "columnsSchema", tableData: "tableData", responsive: "responsive", loading: "loading", canFilter: "canFilter", styleFilter: "styleFilter", rowSelector: "rowSelector" }, outputs: { onColumnClicked: "onColumnClicked", onColumnValueChanged: "onColumnValueChanged" }, ngImport: i0, template: "<div class=\"p-2 overflow-x-auto\">\r\n <table *ngIf=\"!isRunningOnSmallScreen || !responsive; else smallDeviceCard\">\r\n <tr>\r\n <th\r\n class=\"cursor-pointer text-center\"\r\n *ngFor=\"let column of activeColumnsSchema()\"\r\n [ngStyle]=\"{ width: column?.width + 'px' }\"\r\n >\r\n <div\r\n class=\"grid\"\r\n [ngClass]=\"[canFilter ? 'grid-rows-2' : 'grid-rows-1']\"\r\n >\r\n <span\r\n class=\"p-2 relative\"\r\n (click)=\"sortByHeader(column)\"\r\n [ngStyle]=\"{\r\n minWidth:\r\n column.type === columnsTypes.ACTION_BUTTONS\r\n ? column.data.length * 30 + 'px'\r\n : '',\r\n display:\r\n column.type === columnsTypes.ACTION_BUTTONS\r\n ? 'inline-block'\r\n : ''\r\n }\"\r\n >{{ column.label }}\r\n <app-sort-down-icon\r\n class=\"sort-icon w-2 h-2 inline-block absolute top-3 right-[-3px]\"\r\n *ngIf=\"\r\n sortDetail?.key == column.key && sortDetail?.sort === 'asc'\r\n \"\r\n ></app-sort-down-icon>\r\n <app-sort-up-icon\r\n class=\"sort-icon w-2 h-2 inline-block absolute top-3 right-[-3px]\"\r\n *ngIf=\"\r\n sortDetail?.key == column.key && sortDetail?.sort === 'desc'\r\n \"\r\n ></app-sort-up-icon>\r\n <app-sort-solid-icon\r\n class=\"sort-icon w-2 h-2 inline-block absolute top-3 right-[-3px]\"\r\n *ngIf=\"sortDetail?.key !== column.key\"\r\n ></app-sort-solid-icon>\r\n </span>\r\n <core-column-date-picker\r\n *ngIf=\"canFilter && column.type == columnsTypes.SHAMSI_DATE\"\r\n [canSelectToday]=\"true\"\r\n (onChange)=\"tableDataFiltered($event, column)\"\r\n >\r\n </core-column-date-picker>\r\n <core-column-input\r\n *ngIf=\"\r\n canFilter &&\r\n column.type !== columnsTypes.ACTION &&\r\n column.type !== columnsTypes.COLOR &&\r\n column.type !== columnsTypes.STATUS &&\r\n column.type !== columnsTypes.SHAMSI_DATE &&\r\n column.type !== columnsTypes.ROW_SELECTOR &&\r\n column.type !== columnsTypes.STATUS_ACTIVE &&\r\n column.type !== columnsTypes.ACTION_BUTTONS\r\n \"\r\n (onChange)=\"tableDataFiltered($event, column)\"\r\n ></core-column-input>\r\n <core-column-selector\r\n *ngIf=\"\r\n (canFilter && column.type == columnsTypes.STATUS) ||\r\n (canFilter && column.type == columnsTypes.STATUS_ACTIVE)\r\n \"\r\n [titleKey]=\"'title'\"\r\n [valueKey]=\"'value'\"\r\n [items]=\"\r\n column.type == columnsTypes.STATUS\r\n ? ACTIVE_OPTIONS\r\n : YES_NO_OPTIONS\r\n \"\r\n (onItemSelected)=\"tableDataFiltered($event, column)\"\r\n ></core-column-selector>\r\n </div>\r\n </th>\r\n </tr>\r\n <tr *ngFor=\"let data of sortedTableData\">\r\n <td\r\n *ngFor=\"let column of activeColumnsSchema()\"\r\n [class]=\"styleFilter ? styleFilter(data) : ''\"\r\n >\r\n <app-core-table-column-manager\r\n *ngIf=\"column.type != columnsTypes.MULTI_COLUMN; else elseBlock\"\r\n [rowSelector]=\"rowSelector\"\r\n (onColumnClicked)=\"columnClicked($event)\"\r\n (onColumnValueChanged)=\"columnValueChanged($event)\"\r\n [allTableData]=\"sortedTableData\"\r\n [data]=\"data\"\r\n [column]=\"column\"\r\n ></app-core-table-column-manager>\r\n <ng-template #elseBlock>\r\n <app-core-table-column-manager\r\n *ngFor=\"let childColumn of column.columns; let i = index\"\r\n [rowSelector]=\"rowSelector\"\r\n (onColumnClicked)=\"columnClicked($event)\"\r\n [data]=\"data\"\r\n [allTableData]=\"sortedTableData\"\r\n [column]=\"childColumn\"\r\n >\r\n <span *ngIf=\"i > 0\">-</span>\r\n </app-core-table-column-manager>\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </table>\r\n <ng-template #smallDeviceCard>\r\n <div>\r\n <core-card\r\n *ngFor=\"let data of sortedTableData\"\r\n [cardClass]=\"'background-card m-4 p-4 relative'\"\r\n >\r\n <div\r\n class=\"leading-8\"\r\n *ngFor=\"let column of activeColumnsSchema()\"\r\n [class]=\"\r\n column.type === columnsTypes.ACTION_BUTTONS\r\n ? 'actionButtons'\r\n : column.type === columnsTypes.ROW_SELECTOR\r\n ? 'selectRow'\r\n : ''\r\n \"\r\n >\r\n <span\r\n *ngIf=\"\r\n column.type !== columnsTypes.ACTION_BUTTONS &&\r\n column.type !== columnsTypes.ROW_SELECTOR\r\n \"\r\n class=\"secondary-text-color\"\r\n >\r\n {{ column.label }} :\r\n </span>\r\n <span class=\"primary-text-color font-semibold\">\r\n <app-core-table-card-manager\r\n *ngIf=\"\r\n column.type != columnsTypes.MULTI_COLUMN;\r\n else cardManagerElseBlock\r\n \"\r\n [rowSelector]=\"rowSelector\"\r\n (onColumnClicked)=\"columnClicked($event)\"\r\n [data]=\"data\"\r\n [allTableData]=\"sortedTableData\"\r\n [column]=\"column\"\r\n >\r\n </app-core-table-card-manager>\r\n\r\n <ng-template #cardManagerElseBlock>\r\n <app-core-table-card-manager\r\n *ngFor=\"let childColumn of column.columns; let i = index\"\r\n [rowSelector]=\"rowSelector\"\r\n (onColumnClicked)=\"columnClicked($event)\"\r\n [data]=\"data\"\r\n [allTableData]=\"sortedTableData\"\r\n [column]=\"childColumn\"\r\n >\r\n <span *ngIf=\"i > 0\">-</span>\r\n </app-core-table-card-manager>\r\n </ng-template>\r\n </span>\r\n </div>\r\n </core-card>\r\n </div>\r\n </ng-template>\r\n <core-table-no-content\r\n *ngIf=\"!loading\"\r\n [tableData]=\"sortedTableData\"\r\n [loading]=\"loading\"\r\n ></core-table-no-content>\r\n</div>\r\n", styles: ["table{border-collapse:collapse;width:100%;text-align:start}table td,table th{padding-top:12px;padding-bottom:12px;padding-inline-start:8px}table td{font-size:small;color:var(--default-table-td-text-color)}table tr:nth-child(2n){background-color:var(--default-table-tr-child-background-color)}table tr:hover{background-color:var(--default-table-tr-hover-background-color)}table th{background-color:var(--default-table-th-background-color);text-align:start;color:#1d1d1d}.actionButtons{position:absolute;bottom:0;background:var(--default-table-action-buttons-background-color);left:0;right:0;text-align:left;border-radius:.5rem;border-top-right-radius:0;border-top-left-radius:0;padding-top:4px;padding-left:16px}.selectRow{position:absolute;left:0;top:18px}.desc-sort-icon{transform:rotate(180deg)}.sort-icon{fill:var(--default-table-sort-icon-color)}.background-card{background-color:var(--default-table-background-card-color)}.secondary-text-color{color:var(--default-table-secondary-text-color)}.primary-text-color{color:var(--default-table-primary-text-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CoreCardComponent, selector: "core-card", inputs: ["cardClass"] }, { kind: "component", type: CoreColumnDatePickerComponent, selector: "core-column-date-picker", inputs: ["canSelectToday", "defaultDate", "inputFormControl"], outputs: ["onChange"] }, { kind: "component", type: CoreColumnInputComponent, selector: "core-column-input", inputs: ["showRemoveIcon", "placeholder", "value", "type", "isDatePicker", "maxLength"], outputs: ["onChange"] }, { kind: "component", type: CoreColumnSelectorComponent, selector: "core-column-selector", inputs: ["items", "titleKey", "valueKey", "label", "inputFormControl"], outputs: ["onItemSelected"] }, { kind: "component", type: CoreTableCardManagerComponent, selector: "app-core-table-card-manager", inputs: ["data", "column", "allTableData", "rowSelector"], outputs: ["onColumnClicked"] }, { kind: "component", type: CoreTableColumnManagerComponent, selector: "app-core-table-column-manager", inputs: ["data", "column", "allTableData", "rowSelector"], outputs: ["onColumnClicked", "onColumnValueChanged"] }, { kind: "component", type: CoreTableNoContentComponent, selector: "core-table-no-content", inputs: ["tableData", "loading"] }, { kind: "component", type: SortDownIconComponent, selector: "app-sort-down-icon" }, { kind: "component", type: SortSolidIconComponent, selector: "app-sort-solid-icon" }, { kind: "component", type: SortUpIconComponent, selector: "app-sort-up-icon" }] }); }
|
|
2397
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CoreTableComponent, selector: "core-table", inputs: { key: "key", columnsSchema: "columnsSchema", tableData: "tableData", responsive: "responsive", canSelectFirstItem: "canSelectFirstItem", loading: "loading", canFilter: "canFilter", styleFilter: "styleFilter", rowSelector: "rowSelector" }, outputs: { onColumnClicked: "onColumnClicked", onColumnValueChanged: "onColumnValueChanged", onItemSelected: "onItemSelected" }, host: { listeners: { "document:keydown": "handleEnter($event)" } }, viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }], ngImport: i0, template: "<div class=\"p-2 overflow-x-auto\">\r\n <table\r\n #table\r\n tabindex=\"0\"\r\n *ngIf=\"!isRunningOnSmallScreen || !responsive; else smallDeviceCard\"\r\n >\r\n <tr>\r\n <th\r\n class=\"cursor-pointer text-center\"\r\n *ngFor=\"let column of activeColumnsSchema()\"\r\n [ngStyle]=\"{ width: column?.width + 'px' }\"\r\n >\r\n <div\r\n class=\"grid\"\r\n [ngClass]=\"[canFilter ? 'grid-rows-2' : 'grid-rows-1']\"\r\n >\r\n <span\r\n class=\"p-2 relative\"\r\n (click)=\"sortByHeader(column)\"\r\n [ngStyle]=\"{\r\n minWidth:\r\n column.type === columnsTypes.ACTION_BUTTONS\r\n ? column.data.length * 30 + 'px'\r\n : '',\r\n display:\r\n column.type === columnsTypes.ACTION_BUTTONS\r\n ? 'inline-block'\r\n : ''\r\n }\"\r\n >{{ column.label }}\r\n <app-sort-down-icon\r\n class=\"sort-icon w-2 h-2 inline-block absolute top-3 right-[-3px]\"\r\n *ngIf=\"\r\n sortDetail?.key == column.key && sortDetail?.sort === 'asc'\r\n \"\r\n ></app-sort-down-icon>\r\n <app-sort-up-icon\r\n class=\"sort-icon w-2 h-2 inline-block absolute top-3 right-[-3px]\"\r\n *ngIf=\"\r\n sortDetail?.key == column.key && sortDetail?.sort === 'desc'\r\n \"\r\n ></app-sort-up-icon>\r\n <app-sort-solid-icon\r\n class=\"sort-icon w-2 h-2 inline-block absolute top-3 right-[-3px]\"\r\n *ngIf=\"sortDetail?.key !== column.key\"\r\n ></app-sort-solid-icon>\r\n </span>\r\n <core-column-date-picker\r\n *ngIf=\"canFilter && column.type == columnsTypes.SHAMSI_DATE\"\r\n [canSelectToday]=\"true\"\r\n (onChange)=\"tableDataFiltered($event, column)\"\r\n >\r\n </core-column-date-picker>\r\n <core-column-input\r\n *ngIf=\"\r\n canFilter &&\r\n column.type !== columnsTypes.ACTION &&\r\n column.type !== columnsTypes.COLOR &&\r\n column.type !== columnsTypes.STATUS &&\r\n column.type !== columnsTypes.SHAMSI_DATE &&\r\n column.type !== columnsTypes.ROW_SELECTOR &&\r\n column.type !== columnsTypes.STATUS_ACTIVE &&\r\n column.type !== columnsTypes.ACTION_BUTTONS\r\n \"\r\n (onChange)=\"tableDataFiltered($event, column)\"\r\n ></core-column-input>\r\n <core-column-selector\r\n *ngIf=\"\r\n (canFilter && column.type == columnsTypes.STATUS) ||\r\n (canFilter && column.type == columnsTypes.STATUS_ACTIVE)\r\n \"\r\n [titleKey]=\"'title'\"\r\n [valueKey]=\"'value'\"\r\n [items]=\"\r\n column.type == columnsTypes.STATUS\r\n ? ACTIVE_OPTIONS\r\n : YES_NO_OPTIONS\r\n \"\r\n (onItemSelected)=\"tableDataFiltered($event, column)\"\r\n ></core-column-selector>\r\n </div>\r\n </th>\r\n </tr>\r\n <tr\r\n *ngFor=\"let data of sortedTableData; let i = index\"\r\n [ngClass]=\"{ 'select-item': data.id === selectedItem?.id }\"\r\n (click)=\"onItemSelect(data, index, $event)\"\r\n >\r\n <td\r\n *ngFor=\"let column of activeColumnsSchema()\"\r\n [class]=\"styleFilter ? styleFilter(data) : ''\"\r\n >\r\n <app-core-table-column-manager\r\n *ngIf=\"column.type != columnsTypes.MULTI_COLUMN; else elseBlock\"\r\n [rowSelector]=\"rowSelector\"\r\n (onColumnClicked)=\"columnClicked($event)\"\r\n (onColumnValueChanged)=\"columnValueChanged($event)\"\r\n [allTableData]=\"sortedTableData\"\r\n [data]=\"data\"\r\n [column]=\"column\"\r\n ></app-core-table-column-manager>\r\n <ng-template #elseBlock>\r\n <app-core-table-column-manager\r\n *ngFor=\"let childColumn of column.columns; let i = index\"\r\n [rowSelector]=\"rowSelector\"\r\n (onColumnClicked)=\"columnClicked($event)\"\r\n [data]=\"data\"\r\n [allTableData]=\"sortedTableData\"\r\n [column]=\"childColumn\"\r\n >\r\n <span *ngIf=\"i > 0\">-</span>\r\n </app-core-table-column-manager>\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </table>\r\n <ng-template #smallDeviceCard>\r\n <div>\r\n <core-card\r\n *ngFor=\"let data of sortedTableData\"\r\n [cardClass]=\"'background-card m-4 p-4 relative'\"\r\n >\r\n <div\r\n class=\"leading-8\"\r\n *ngFor=\"let column of activeColumnsSchema()\"\r\n [class]=\"\r\n column.type === columnsTypes.ACTION_BUTTONS\r\n ? 'actionButtons'\r\n : column.type === columnsTypes.ROW_SELECTOR\r\n ? 'selectRow'\r\n : ''\r\n \"\r\n >\r\n <span\r\n *ngIf=\"\r\n column.type !== columnsTypes.ACTION_BUTTONS &&\r\n column.type !== columnsTypes.ROW_SELECTOR\r\n \"\r\n class=\"secondary-text-color\"\r\n >\r\n {{ column.label }} :\r\n </span>\r\n <span class=\"primary-text-color font-semibold\">\r\n <app-core-table-card-manager\r\n *ngIf=\"\r\n column.type != columnsTypes.MULTI_COLUMN;\r\n else cardManagerElseBlock\r\n \"\r\n [rowSelector]=\"rowSelector\"\r\n (onColumnClicked)=\"columnClicked($event)\"\r\n [data]=\"data\"\r\n [allTableData]=\"sortedTableData\"\r\n [column]=\"column\"\r\n >\r\n </app-core-table-card-manager>\r\n\r\n <ng-template #cardManagerElseBlock>\r\n <app-core-table-card-manager\r\n *ngFor=\"let childColumn of column.columns; let i = index\"\r\n [rowSelector]=\"rowSelector\"\r\n (onColumnClicked)=\"columnClicked($event)\"\r\n [data]=\"data\"\r\n [allTableData]=\"sortedTableData\"\r\n [column]=\"childColumn\"\r\n >\r\n <span *ngIf=\"i > 0\">-</span>\r\n </app-core-table-card-manager>\r\n </ng-template>\r\n </span>\r\n </div>\r\n </core-card>\r\n </div>\r\n </ng-template>\r\n <core-table-no-content\r\n *ngIf=\"!loading\"\r\n [tableData]=\"sortedTableData\"\r\n [loading]=\"loading\"\r\n ></core-table-no-content>\r\n</div>\r\n", styles: ["table{border-collapse:collapse;width:100%;text-align:start}table:focus{outline:none}.select-item{background-color:#e3f2fd!important}table td,table th{padding-top:12px;padding-bottom:12px;padding-inline-start:8px}table td{font-size:small;color:var(--default-table-td-text-color)}table tr:nth-child(2n){background-color:var(--default-table-tr-child-background-color)}table tr:hover{background-color:var(--default-table-tr-hover-background-color)}table th{background-color:var(--default-table-th-background-color);text-align:start;color:#1d1d1d}.actionButtons{position:absolute;bottom:0;background:var(--default-table-action-buttons-background-color);left:0;right:0;text-align:left;border-radius:.5rem;border-top-right-radius:0;border-top-left-radius:0;padding-top:4px;padding-left:16px}.selectRow{position:absolute;left:0;top:18px}.desc-sort-icon{transform:rotate(180deg)}.sort-icon{fill:var(--default-table-sort-icon-color)}.background-card{background-color:var(--default-table-background-card-color)}.secondary-text-color{color:var(--default-table-secondary-text-color)}.primary-text-color{color:var(--default-table-primary-text-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CoreCardComponent, selector: "core-card", inputs: ["cardClass"] }, { kind: "component", type: CoreColumnDatePickerComponent, selector: "core-column-date-picker", inputs: ["canSelectToday", "defaultDate", "inputFormControl"], outputs: ["onChange"] }, { kind: "component", type: CoreColumnInputComponent, selector: "core-column-input", inputs: ["showRemoveIcon", "placeholder", "value", "type", "isDatePicker", "maxLength"], outputs: ["onChange"] }, { kind: "component", type: CoreColumnSelectorComponent, selector: "core-column-selector", inputs: ["items", "titleKey", "valueKey", "label", "inputFormControl"], outputs: ["onItemSelected"] }, { kind: "component", type: CoreTableCardManagerComponent, selector: "app-core-table-card-manager", inputs: ["data", "column", "allTableData", "rowSelector"], outputs: ["onColumnClicked"] }, { kind: "component", type: CoreTableColumnManagerComponent, selector: "app-core-table-column-manager", inputs: ["data", "column", "allTableData", "rowSelector"], outputs: ["onColumnClicked", "onColumnValueChanged"] }, { kind: "component", type: CoreTableNoContentComponent, selector: "core-table-no-content", inputs: ["tableData", "loading"] }, { kind: "component", type: SortDownIconComponent, selector: "app-sort-down-icon" }, { kind: "component", type: SortSolidIconComponent, selector: "app-sort-solid-icon" }, { kind: "component", type: SortUpIconComponent, selector: "app-sort-up-icon" }] }); }
|
|
2355
2398
|
}
|
|
2356
2399
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CoreTableComponent, decorators: [{
|
|
2357
2400
|
type: Component,
|
|
2358
|
-
args: [{ selector: 'core-table', template: "<div class=\"p-2 overflow-x-auto\">\r\n <table
|
|
2401
|
+
args: [{ selector: 'core-table', template: "<div class=\"p-2 overflow-x-auto\">\r\n <table\r\n #table\r\n tabindex=\"0\"\r\n *ngIf=\"!isRunningOnSmallScreen || !responsive; else smallDeviceCard\"\r\n >\r\n <tr>\r\n <th\r\n class=\"cursor-pointer text-center\"\r\n *ngFor=\"let column of activeColumnsSchema()\"\r\n [ngStyle]=\"{ width: column?.width + 'px' }\"\r\n >\r\n <div\r\n class=\"grid\"\r\n [ngClass]=\"[canFilter ? 'grid-rows-2' : 'grid-rows-1']\"\r\n >\r\n <span\r\n class=\"p-2 relative\"\r\n (click)=\"sortByHeader(column)\"\r\n [ngStyle]=\"{\r\n minWidth:\r\n column.type === columnsTypes.ACTION_BUTTONS\r\n ? column.data.length * 30 + 'px'\r\n : '',\r\n display:\r\n column.type === columnsTypes.ACTION_BUTTONS\r\n ? 'inline-block'\r\n : ''\r\n }\"\r\n >{{ column.label }}\r\n <app-sort-down-icon\r\n class=\"sort-icon w-2 h-2 inline-block absolute top-3 right-[-3px]\"\r\n *ngIf=\"\r\n sortDetail?.key == column.key && sortDetail?.sort === 'asc'\r\n \"\r\n ></app-sort-down-icon>\r\n <app-sort-up-icon\r\n class=\"sort-icon w-2 h-2 inline-block absolute top-3 right-[-3px]\"\r\n *ngIf=\"\r\n sortDetail?.key == column.key && sortDetail?.sort === 'desc'\r\n \"\r\n ></app-sort-up-icon>\r\n <app-sort-solid-icon\r\n class=\"sort-icon w-2 h-2 inline-block absolute top-3 right-[-3px]\"\r\n *ngIf=\"sortDetail?.key !== column.key\"\r\n ></app-sort-solid-icon>\r\n </span>\r\n <core-column-date-picker\r\n *ngIf=\"canFilter && column.type == columnsTypes.SHAMSI_DATE\"\r\n [canSelectToday]=\"true\"\r\n (onChange)=\"tableDataFiltered($event, column)\"\r\n >\r\n </core-column-date-picker>\r\n <core-column-input\r\n *ngIf=\"\r\n canFilter &&\r\n column.type !== columnsTypes.ACTION &&\r\n column.type !== columnsTypes.COLOR &&\r\n column.type !== columnsTypes.STATUS &&\r\n column.type !== columnsTypes.SHAMSI_DATE &&\r\n column.type !== columnsTypes.ROW_SELECTOR &&\r\n column.type !== columnsTypes.STATUS_ACTIVE &&\r\n column.type !== columnsTypes.ACTION_BUTTONS\r\n \"\r\n (onChange)=\"tableDataFiltered($event, column)\"\r\n ></core-column-input>\r\n <core-column-selector\r\n *ngIf=\"\r\n (canFilter && column.type == columnsTypes.STATUS) ||\r\n (canFilter && column.type == columnsTypes.STATUS_ACTIVE)\r\n \"\r\n [titleKey]=\"'title'\"\r\n [valueKey]=\"'value'\"\r\n [items]=\"\r\n column.type == columnsTypes.STATUS\r\n ? ACTIVE_OPTIONS\r\n : YES_NO_OPTIONS\r\n \"\r\n (onItemSelected)=\"tableDataFiltered($event, column)\"\r\n ></core-column-selector>\r\n </div>\r\n </th>\r\n </tr>\r\n <tr\r\n *ngFor=\"let data of sortedTableData; let i = index\"\r\n [ngClass]=\"{ 'select-item': data.id === selectedItem?.id }\"\r\n (click)=\"onItemSelect(data, index, $event)\"\r\n >\r\n <td\r\n *ngFor=\"let column of activeColumnsSchema()\"\r\n [class]=\"styleFilter ? styleFilter(data) : ''\"\r\n >\r\n <app-core-table-column-manager\r\n *ngIf=\"column.type != columnsTypes.MULTI_COLUMN; else elseBlock\"\r\n [rowSelector]=\"rowSelector\"\r\n (onColumnClicked)=\"columnClicked($event)\"\r\n (onColumnValueChanged)=\"columnValueChanged($event)\"\r\n [allTableData]=\"sortedTableData\"\r\n [data]=\"data\"\r\n [column]=\"column\"\r\n ></app-core-table-column-manager>\r\n <ng-template #elseBlock>\r\n <app-core-table-column-manager\r\n *ngFor=\"let childColumn of column.columns; let i = index\"\r\n [rowSelector]=\"rowSelector\"\r\n (onColumnClicked)=\"columnClicked($event)\"\r\n [data]=\"data\"\r\n [allTableData]=\"sortedTableData\"\r\n [column]=\"childColumn\"\r\n >\r\n <span *ngIf=\"i > 0\">-</span>\r\n </app-core-table-column-manager>\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </table>\r\n <ng-template #smallDeviceCard>\r\n <div>\r\n <core-card\r\n *ngFor=\"let data of sortedTableData\"\r\n [cardClass]=\"'background-card m-4 p-4 relative'\"\r\n >\r\n <div\r\n class=\"leading-8\"\r\n *ngFor=\"let column of activeColumnsSchema()\"\r\n [class]=\"\r\n column.type === columnsTypes.ACTION_BUTTONS\r\n ? 'actionButtons'\r\n : column.type === columnsTypes.ROW_SELECTOR\r\n ? 'selectRow'\r\n : ''\r\n \"\r\n >\r\n <span\r\n *ngIf=\"\r\n column.type !== columnsTypes.ACTION_BUTTONS &&\r\n column.type !== columnsTypes.ROW_SELECTOR\r\n \"\r\n class=\"secondary-text-color\"\r\n >\r\n {{ column.label }} :\r\n </span>\r\n <span class=\"primary-text-color font-semibold\">\r\n <app-core-table-card-manager\r\n *ngIf=\"\r\n column.type != columnsTypes.MULTI_COLUMN;\r\n else cardManagerElseBlock\r\n \"\r\n [rowSelector]=\"rowSelector\"\r\n (onColumnClicked)=\"columnClicked($event)\"\r\n [data]=\"data\"\r\n [allTableData]=\"sortedTableData\"\r\n [column]=\"column\"\r\n >\r\n </app-core-table-card-manager>\r\n\r\n <ng-template #cardManagerElseBlock>\r\n <app-core-table-card-manager\r\n *ngFor=\"let childColumn of column.columns; let i = index\"\r\n [rowSelector]=\"rowSelector\"\r\n (onColumnClicked)=\"columnClicked($event)\"\r\n [data]=\"data\"\r\n [allTableData]=\"sortedTableData\"\r\n [column]=\"childColumn\"\r\n >\r\n <span *ngIf=\"i > 0\">-</span>\r\n </app-core-table-card-manager>\r\n </ng-template>\r\n </span>\r\n </div>\r\n </core-card>\r\n </div>\r\n </ng-template>\r\n <core-table-no-content\r\n *ngIf=\"!loading\"\r\n [tableData]=\"sortedTableData\"\r\n [loading]=\"loading\"\r\n ></core-table-no-content>\r\n</div>\r\n", styles: ["table{border-collapse:collapse;width:100%;text-align:start}table:focus{outline:none}.select-item{background-color:#e3f2fd!important}table td,table th{padding-top:12px;padding-bottom:12px;padding-inline-start:8px}table td{font-size:small;color:var(--default-table-td-text-color)}table tr:nth-child(2n){background-color:var(--default-table-tr-child-background-color)}table tr:hover{background-color:var(--default-table-tr-hover-background-color)}table th{background-color:var(--default-table-th-background-color);text-align:start;color:#1d1d1d}.actionButtons{position:absolute;bottom:0;background:var(--default-table-action-buttons-background-color);left:0;right:0;text-align:left;border-radius:.5rem;border-top-right-radius:0;border-top-left-radius:0;padding-top:4px;padding-left:16px}.selectRow{position:absolute;left:0;top:18px}.desc-sort-icon{transform:rotate(180deg)}.sort-icon{fill:var(--default-table-sort-icon-color)}.background-card{background-color:var(--default-table-background-card-color)}.secondary-text-color{color:var(--default-table-secondary-text-color)}.primary-text-color{color:var(--default-table-primary-text-color)}\n"] }]
|
|
2359
2402
|
}], ctorParameters: function () { return [{ type: i1$4.NgxIndexedDBService }]; }, propDecorators: { key: [{
|
|
2360
2403
|
type: Input,
|
|
2361
2404
|
args: [{ required: false }]
|
|
@@ -2368,6 +2411,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2368
2411
|
}], responsive: [{
|
|
2369
2412
|
type: Input,
|
|
2370
2413
|
args: [{ required: false }]
|
|
2414
|
+
}], canSelectFirstItem: [{
|
|
2415
|
+
type: Input,
|
|
2416
|
+
args: [{ required: false }]
|
|
2371
2417
|
}], loading: [{
|
|
2372
2418
|
type: Input,
|
|
2373
2419
|
args: [{ required: true }]
|
|
@@ -2383,6 +2429,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2383
2429
|
type: Output
|
|
2384
2430
|
}], onColumnValueChanged: [{
|
|
2385
2431
|
type: Output
|
|
2432
|
+
}], onItemSelected: [{
|
|
2433
|
+
type: Output
|
|
2434
|
+
}], table: [{
|
|
2435
|
+
type: ViewChild,
|
|
2436
|
+
args: ['table']
|
|
2437
|
+
}], handleEnter: [{
|
|
2438
|
+
type: HostListener,
|
|
2439
|
+
args: ['document:keydown', ['$event']]
|
|
2386
2440
|
}] } });
|
|
2387
2441
|
|
|
2388
2442
|
class CoreTableFilterDialogComponent {
|