nira-falcon 0.1.38 → 0.1.40
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-btn/core-btn.component.mjs +8 -2
- package/esm2022/lib/core-input/core-input.component.mjs +1 -2
- package/esm2022/lib/core-select/core-select.component.mjs +39 -5
- package/esm2022/lib/core-table/core-table-filter-dialog/core-table-filter-dialog/core-table-filter-dialog.component.mjs +1 -1
- package/esm2022/lib/core-time-picker/time-picker-modal/time-picker-modal.component.mjs +1 -1
- package/fesm2022/nira-falcon.mjs +47 -8
- package/fesm2022/nira-falcon.mjs.map +1 -1
- package/lib/core-btn/core-btn.component.d.ts +2 -1
- package/lib/core-select/core-select.component.d.ts +6 -1
- package/package.json +2 -2
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, Directive, HostListener, NgModule } from '@angular/core';
|
|
2
|
+
import { Component, Input, EventEmitter, Output, Pipe, ViewChildren, Directive, HostListener, 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';
|
|
@@ -107,6 +107,7 @@ class CoreBtnComponent {
|
|
|
107
107
|
this.color = 'White';
|
|
108
108
|
this.colorState = 'default';
|
|
109
109
|
this.btnClicked = new EventEmitter();
|
|
110
|
+
this.btnClickedOnDisableMode = new EventEmitter();
|
|
110
111
|
}
|
|
111
112
|
clicked() {
|
|
112
113
|
if (!this.disable) {
|
|
@@ -124,12 +125,15 @@ class CoreBtnComponent {
|
|
|
124
125
|
this.btnClicked.emit();
|
|
125
126
|
}
|
|
126
127
|
}
|
|
128
|
+
else {
|
|
129
|
+
this.btnClickedOnDisableMode.emit();
|
|
130
|
+
}
|
|
127
131
|
if (this.formGroup) {
|
|
128
132
|
this.formGroup.markAllAsTouched();
|
|
129
133
|
}
|
|
130
134
|
}
|
|
131
135
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CoreBtnComponent, deps: [{ token: i1$1.NiraModalService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
132
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CoreBtnComponent, selector: "core-btn", inputs: { formGroup: "formGroup", loading: "loading", theme: "theme", buttonType: "buttonType", size: "size", color: "color", isDisabled: "isDisabled", colorState: "colorState", confirmDialog: "confirmDialog" }, outputs: { btnClicked: "btnClicked" }, ngImport: i0, template: "<button\r\n (click)=\"clicked()\"\r\n [ngClass]=\"[\r\n 'button',\r\n disable ? 'disabled' : '',\r\n theme,\r\n colorState,\r\n size,\r\n loading ? 'cursorLoading' : ''\r\n ]\"\r\n [type]=\"buttonType\"\r\n>\r\n <ng-content *ngIf=\"!loading\"></ng-content>\r\n <core-spinner\r\n *ngIf=\"loading\"\r\n class=\"loading\"\r\n [colorState]=\"colorState\"\r\n [size]=\"20\"\r\n ></core-spinner>\r\n</button>\r\n", styles: [":host{width:100%}.button{width:100%;height:30px;outline:none;border:none;text-align:center;color:var(--default);background-color:transparent;box-shadow:0 0 0 1px #2b2d501a,0 2px 5px #2b2d5014,0 1px 1.5px #00000012,0 1px 2px #00000014;line-height:1.5;font-size:14px;font-weight:500;display:inline-block;margin-inline-start:auto;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;user-select:none;transition:.3s;cursor:pointer}.button:hover{box-shadow:0 0 0 1px #2b2d501a,0 2px 5px #2b2d501a,0 3px 9px #2b2d5014,0 1px 1.5px #00000014,0 1px 2px #00000014}.button.small{height:30px}.button.medium{height:38px}.button.round{border:2px solid #7b1fa2;height:44px;border-radius:30px;background-color:#7b1fa2}.button.round:hover,.button.round:active{color:#fff;background-color:#7b1fa2}.button.round.disabled{cursor:not-allowed;opacity:.4}.button.success{color:var(--success-button-color)}.button.success:active{background-color:var(--success-button-background-color);box-shadow:none}.button.warning{color:var(--warning-button-color)}.button.warning:active{background-color:var(--warning-button-background-color);box-shadow:none}.button.default{color:var(--default-button-color)}.button.default:active{background-color:var(--default-button-background-color);box-shadow:none}.button.primary{color:var(--primary-button-color)}.button.primary:active{background-color:var(--primary-button-background-color);box-shadow:none}.button.danger{color:var(--danger-button-color)}.button.danger:active{background-color:var(--danger-button-background-color);box-shadow:none}.button.square{padding-inline:16px;border-radius:.25rem}.button.square.disabled{cursor:not-allowed;opacity:.4}.loading{display:inline-block;float:inline-end;margin-inline-end:8px}.cursorLoading{cursor:wait}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CoreSpinnerComponent, selector: "core-spinner", inputs: ["size", "colorState", "type"] }] }); }
|
|
136
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CoreBtnComponent, selector: "core-btn", inputs: { formGroup: "formGroup", loading: "loading", theme: "theme", buttonType: "buttonType", size: "size", color: "color", isDisabled: "isDisabled", colorState: "colorState", confirmDialog: "confirmDialog" }, outputs: { btnClicked: "btnClicked", btnClickedOnDisableMode: "btnClickedOnDisableMode" }, ngImport: i0, template: "<button\r\n (click)=\"clicked()\"\r\n [ngClass]=\"[\r\n 'button',\r\n disable ? 'disabled' : '',\r\n theme,\r\n colorState,\r\n size,\r\n loading ? 'cursorLoading' : ''\r\n ]\"\r\n [type]=\"buttonType\"\r\n>\r\n <ng-content *ngIf=\"!loading\"></ng-content>\r\n <core-spinner\r\n *ngIf=\"loading\"\r\n class=\"loading\"\r\n [colorState]=\"colorState\"\r\n [size]=\"20\"\r\n ></core-spinner>\r\n</button>\r\n", styles: [":host{width:100%}.button{width:100%;height:30px;outline:none;border:none;text-align:center;color:var(--default);background-color:transparent;box-shadow:0 0 0 1px #2b2d501a,0 2px 5px #2b2d5014,0 1px 1.5px #00000012,0 1px 2px #00000014;line-height:1.5;font-size:14px;font-weight:500;display:inline-block;margin-inline-start:auto;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;user-select:none;transition:.3s;cursor:pointer}.button:hover{box-shadow:0 0 0 1px #2b2d501a,0 2px 5px #2b2d501a,0 3px 9px #2b2d5014,0 1px 1.5px #00000014,0 1px 2px #00000014}.button.small{height:30px}.button.medium{height:38px}.button.round{border:2px solid #7b1fa2;height:44px;border-radius:30px;background-color:#7b1fa2}.button.round:hover,.button.round:active{color:#fff;background-color:#7b1fa2}.button.round.disabled{cursor:not-allowed;opacity:.4}.button.success{color:var(--success-button-color)}.button.success:active{background-color:var(--success-button-background-color);box-shadow:none}.button.warning{color:var(--warning-button-color)}.button.warning:active{background-color:var(--warning-button-background-color);box-shadow:none}.button.default{color:var(--default-button-color)}.button.default:active{background-color:var(--default-button-background-color);box-shadow:none}.button.primary{color:var(--primary-button-color)}.button.primary:active{background-color:var(--primary-button-background-color);box-shadow:none}.button.danger{color:var(--danger-button-color)}.button.danger:active{background-color:var(--danger-button-background-color);box-shadow:none}.button.square{padding-inline:16px;border-radius:.25rem}.button.square.disabled{cursor:not-allowed;opacity:.4}.loading{display:inline-block;float:inline-end;margin-inline-end:8px}.cursorLoading{cursor:wait}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CoreSpinnerComponent, selector: "core-spinner", inputs: ["size", "colorState", "type"] }] }); }
|
|
133
137
|
}
|
|
134
138
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CoreBtnComponent, decorators: [{
|
|
135
139
|
type: Component,
|
|
@@ -152,6 +156,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
152
156
|
type: Input
|
|
153
157
|
}], btnClicked: [{
|
|
154
158
|
type: Output
|
|
159
|
+
}], btnClickedOnDisableMode: [{
|
|
160
|
+
type: Output
|
|
155
161
|
}], confirmDialog: [{
|
|
156
162
|
type: Input
|
|
157
163
|
}] } });
|
|
@@ -583,7 +589,6 @@ class CoreInputComponent {
|
|
|
583
589
|
}
|
|
584
590
|
}
|
|
585
591
|
get errorMassage() {
|
|
586
|
-
console.log(this.inputFormControl.errors);
|
|
587
592
|
if (this.inputFormControl.errors) {
|
|
588
593
|
if (Object.keys(this.inputFormControl.errors).length != 0) {
|
|
589
594
|
let errorMessage;
|
|
@@ -842,6 +847,7 @@ class CoreSelectComponent {
|
|
|
842
847
|
this.disabled = false;
|
|
843
848
|
this.onItemSelected = new EventEmitter();
|
|
844
849
|
this.inputFormControl = new FormControl('', []);
|
|
850
|
+
this.currentIndex = 0;
|
|
845
851
|
}
|
|
846
852
|
init() {
|
|
847
853
|
this.titleKeyObject = this.titleKey;
|
|
@@ -865,13 +871,38 @@ class CoreSelectComponent {
|
|
|
865
871
|
if (this.disabled)
|
|
866
872
|
return;
|
|
867
873
|
this.isOpenMenu = !this.isOpenMenu;
|
|
874
|
+
if (this.isOpenMenu) {
|
|
875
|
+
setTimeout(() => {
|
|
876
|
+
const element = this.focusableElements.toArray();
|
|
877
|
+
element[0].nativeElement.focus();
|
|
878
|
+
}, 50);
|
|
879
|
+
}
|
|
880
|
+
}
|
|
881
|
+
handleKey(event) {
|
|
882
|
+
const elements = this.focusableElements.toArray();
|
|
883
|
+
if (event.key === 'ArrowDown') {
|
|
884
|
+
this.currentIndex = (this.currentIndex + 1) % elements.length;
|
|
885
|
+
elements[this.currentIndex].nativeElement.focus();
|
|
886
|
+
}
|
|
887
|
+
if (event.key === 'ArrowUp') {
|
|
888
|
+
this.currentIndex =
|
|
889
|
+
(this.currentIndex - 1 + elements.length) % elements.length;
|
|
890
|
+
elements[this.currentIndex].nativeElement.focus();
|
|
891
|
+
}
|
|
892
|
+
}
|
|
893
|
+
dropdownItemKeypress(event, item) {
|
|
894
|
+
if (event.key === 'Enter') {
|
|
895
|
+
this.onItemSelect(item, true);
|
|
896
|
+
}
|
|
897
|
+
else if (event.key === 'Escape') {
|
|
898
|
+
this.isOpenMenu = false;
|
|
899
|
+
}
|
|
868
900
|
}
|
|
869
901
|
onItemSelect(selectedItem, isFromUi) {
|
|
870
902
|
if (isFromUi)
|
|
871
903
|
this.inputFormControl.markAsTouched();
|
|
872
904
|
this.isOpenMenu = false;
|
|
873
905
|
if (!selectedItem) {
|
|
874
|
-
this.selectedItem = {};
|
|
875
906
|
return;
|
|
876
907
|
}
|
|
877
908
|
this.selectedItem = selectedItem;
|
|
@@ -879,16 +910,21 @@ class CoreSelectComponent {
|
|
|
879
910
|
this.inputFormControl.setValue(selectedItem.value);
|
|
880
911
|
this.onItemSelected.emit(mainItem);
|
|
881
912
|
}
|
|
913
|
+
onEnterPress(e) {
|
|
914
|
+
if (e.key === 'Enter') {
|
|
915
|
+
this.openMenuClick();
|
|
916
|
+
}
|
|
917
|
+
}
|
|
882
918
|
focusOut() {
|
|
883
919
|
this.isOpenMenu = false;
|
|
884
920
|
this.inputFormControl.markAsTouched();
|
|
885
921
|
}
|
|
886
922
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CoreSelectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
887
|
-
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" }, ngImport: i0, template: "<div tabindex=\"-1\" class=\"dropdown\" (focusout)=\"focusOut()\">\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 (click)=\"openMenuClick()\"\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 <ul
|
|
923
|
+
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 tabindex=\"-1\" class=\"dropdown\" (focusout)=\"focusOut()\">\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()\"\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 <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 blue!important;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 .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%);opacity:0;display:none;transition:0,2s;z-index:10;max-height:200px;overflow:auto}.dropdown .menu li{padding:.7em .5em;margin:.3em 0;margin-inline:4px;border-radius:.5em;font-size:14px;text-align:start;cursor:pointer}.dropdown .menu li:hover{background:#f6f6f6}.dropdown .menu li:focus{border:1px solid blue!important;outline:none}.dropdown .menu .active{background:#ced4da}.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: ArrowDownIconComponent, selector: "arrow-down-icon" }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] }); }
|
|
888
924
|
}
|
|
889
925
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CoreSelectComponent, decorators: [{
|
|
890
926
|
type: Component,
|
|
891
|
-
args: [{ selector: 'core-select', template: "<div tabindex=\"-1\" class=\"dropdown\" (focusout)=\"focusOut()\">\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 (click)=\"openMenuClick()\"\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 <ul
|
|
927
|
+
args: [{ selector: 'core-select', template: "<div tabindex=\"-1\" class=\"dropdown\" (focusout)=\"focusOut()\">\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()\"\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 <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 blue!important;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 .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%);opacity:0;display:none;transition:0,2s;z-index:10;max-height:200px;overflow:auto}.dropdown .menu li{padding:.7em .5em;margin:.3em 0;margin-inline:4px;border-radius:.5em;font-size:14px;text-align:start;cursor:pointer}.dropdown .menu li:hover{background:#f6f6f6}.dropdown .menu li:focus{border:1px solid blue!important;outline:none}.dropdown .menu .active{background:#ced4da}.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"] }]
|
|
892
928
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { titleKey: [{
|
|
893
929
|
type: Input
|
|
894
930
|
}], valueKey: [{
|
|
@@ -909,6 +945,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
909
945
|
type: Output
|
|
910
946
|
}], inputFormControl: [{
|
|
911
947
|
type: Input
|
|
948
|
+
}], focusableElements: [{
|
|
949
|
+
type: ViewChildren,
|
|
950
|
+
args: ['focusable']
|
|
912
951
|
}] } });
|
|
913
952
|
|
|
914
953
|
class CoreSwitchComponent {
|
|
@@ -2355,7 +2394,7 @@ class CoreTableFilterDialogComponent {
|
|
|
2355
2394
|
this.closeSubject.next('');
|
|
2356
2395
|
}
|
|
2357
2396
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CoreTableFilterDialogComponent, deps: [{ token: i1$4.NgxIndexedDBService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2358
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CoreTableFilterDialogComponent, selector: "app-core-table-filter-dialog", inputs: { closeSubject: "closeSubject", config: "config" }, ngImport: i0, template: "<core-card class=\"block min-w-64 max-h-[80vh] overflow-auto\">\r\n <div class=\"root flex mb-6 justify-between\">\r\n <b class=\"m-3 self-center\">\u0641\u06CC\u0644\u062A\u0631 \u062C\u062F\u0648\u0644</b>\r\n <close-icon\r\n (click)=\"close()\"\r\n class=\"close-icon h-10 m-3 rounded-full cursor-pointer p-2 hover:shadow-md\"\r\n ></close-icon>\r\n </div>\r\n\r\n <div *ngFor=\"let column of columnsSchema\">\r\n <div>\r\n <core-checkbox\r\n class=\"inline-block w-4 ms-4\"\r\n [checked]=\"column.active === undefined ? true : column.active\"\r\n (onChange)=\"onCheckboxClicked(column, $event)\"\r\n ></core-checkbox>\r\n {{ column.label }}\r\n </div>\r\n </div>\r\n\r\n <div class=\"grid grid-cols-3 gap-x-2 p-3\" dir=\"ltr\">\r\n <core-btn (btnClicked)=\"submitBtn()\" class=\"col-span-1\"> \u0628\u0633\u062A\u0646 </core-btn>\r\n </div>\r\n</core-card>\r\n", styles: [".close-icon{fill:var(--default-table-column-date-picker-close-icon-color)}.close-icon :hover{background-color:var(--default-table-hover-background-icon-color);fill:var(--default-table-hover-fill-icon-color)}.root{background-color:var(--default-table-th-background-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CoreBtnComponent, selector: "core-btn", inputs: ["formGroup", "loading", "theme", "buttonType", "size", "color", "isDisabled", "colorState", "confirmDialog"], outputs: ["btnClicked"] }, { kind: "component", type: CoreCheckboxComponent, selector: "core-checkbox", inputs: ["label", "name", "checked", "inputFormControl"], outputs: ["onChange"] }, { kind: "component", type: CoreCardComponent, selector: "core-card", inputs: ["cardClass"] }, { kind: "component", type: CloseIconComponent, selector: "close-icon" }] }); }
|
|
2397
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CoreTableFilterDialogComponent, selector: "app-core-table-filter-dialog", inputs: { closeSubject: "closeSubject", config: "config" }, ngImport: i0, template: "<core-card class=\"block min-w-64 max-h-[80vh] overflow-auto\">\r\n <div class=\"root flex mb-6 justify-between\">\r\n <b class=\"m-3 self-center\">\u0641\u06CC\u0644\u062A\u0631 \u062C\u062F\u0648\u0644</b>\r\n <close-icon\r\n (click)=\"close()\"\r\n class=\"close-icon h-10 m-3 rounded-full cursor-pointer p-2 hover:shadow-md\"\r\n ></close-icon>\r\n </div>\r\n\r\n <div *ngFor=\"let column of columnsSchema\">\r\n <div>\r\n <core-checkbox\r\n class=\"inline-block w-4 ms-4\"\r\n [checked]=\"column.active === undefined ? true : column.active\"\r\n (onChange)=\"onCheckboxClicked(column, $event)\"\r\n ></core-checkbox>\r\n {{ column.label }}\r\n </div>\r\n </div>\r\n\r\n <div class=\"grid grid-cols-3 gap-x-2 p-3\" dir=\"ltr\">\r\n <core-btn (btnClicked)=\"submitBtn()\" class=\"col-span-1\"> \u0628\u0633\u062A\u0646 </core-btn>\r\n </div>\r\n</core-card>\r\n", styles: [".close-icon{fill:var(--default-table-column-date-picker-close-icon-color)}.close-icon :hover{background-color:var(--default-table-hover-background-icon-color);fill:var(--default-table-hover-fill-icon-color)}.root{background-color:var(--default-table-th-background-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CoreBtnComponent, selector: "core-btn", inputs: ["formGroup", "loading", "theme", "buttonType", "size", "color", "isDisabled", "colorState", "confirmDialog"], outputs: ["btnClicked", "btnClickedOnDisableMode"] }, { kind: "component", type: CoreCheckboxComponent, selector: "core-checkbox", inputs: ["label", "name", "checked", "inputFormControl"], outputs: ["onChange"] }, { kind: "component", type: CoreCardComponent, selector: "core-card", inputs: ["cardClass"] }, { kind: "component", type: CloseIconComponent, selector: "close-icon" }] }); }
|
|
2359
2398
|
}
|
|
2360
2399
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CoreTableFilterDialogComponent, decorators: [{
|
|
2361
2400
|
type: Component,
|
|
@@ -2539,7 +2578,7 @@ class TimePickerModalComponent {
|
|
|
2539
2578
|
this.minutesSubject.next(this.createCircleOfDivs(60, 101, 115, 115, 0, 5));
|
|
2540
2579
|
}
|
|
2541
2580
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimePickerModalComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2542
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TimePickerModalComponent, selector: "lib-time-picker-modal", inputs: { config: "config", closeSubject: "closeSubject" }, ngImport: i0, template: "<div class=\"timepicker\">\r\n <div class=\"top\">\r\n <span class=\"h\" (click)=\"onHourClick()\" [class.active]=\"showHour\">10</span\r\n >:<span class=\"m\" (click)=\"onMinutesClick()\" [class.active]=\"showMin\"\r\n >15</span\r\n >\r\n </div>\r\n <div class=\"circle\">\r\n <div *ngIf=\"showHour\">\r\n <div\r\n class=\"hour\"\r\n *ngFor=\"let hour of hoursSubject | async\"\r\n [style]=\"{ left: hour.left, top: hour.top }\"\r\n (click)=\"onHourSelect(hour)\"\r\n >\r\n {{ hour.text }}\r\n </div>\r\n <div\r\n class=\"hour2\"\r\n *ngFor=\"let hour of hours2Subject | async\"\r\n [style]=\"{ left: hour.left, top: hour.top }\"\r\n (click)=\"onHourSelect(hour)\"\r\n >\r\n {{ hour.text }}\r\n </div>\r\n <div class=\"mid\"></div>\r\n </div>\r\n <div *ngIf=\"showMin\">\r\n <div\r\n class=\"min\"\r\n *ngFor=\"let hour of minutesSubject | async\"\r\n [style]=\"{ left: hour.left, top: hour.top }\"\r\n (click)=\"onMinutesSelect(hour)\"\r\n >\r\n {{ hour.text }}\r\n </div>\r\n <div class=\"mid\"></div>\r\n </div>\r\n </div>\r\n <div class=\"actions\">\r\n <core-btn\r\n class=\"action ok\"\r\n (btnClicked)=\"submit()\"\r\n [colorState]=\"'success'\"\r\n >\r\n \u0627\u0646\u062A\u062E\u0627\u0628\r\n </core-btn>\r\n <core-btn class=\"action close\" (btnClicked)=\"close()\"> \u0628\u0633\u062A\u0646 </core-btn>\r\n </div>\r\n</div>\r\n", styles: [".timepicker{width:300px;height:450px;background-color:var(--default-time-picker-background-color);position:relative;font-family:Calibri}.timepicker .top{background-color:var(--default-time-picker-header-background-color);color:var(--default-time-picker-header-text-color);height:100px;line-height:100px;font-size:50px;text-align:center}.timepicker .top .h :hover,.timepicker .top .m :hover{cursor:pointer}.timepicker .top .active{color:var(--default-time-picker-header-item-active-text-color)}.timepicker .circle{-webkit-user-select:none;user-select:none;background-color:var(--default-time-picker-circle-background-color);width:250px;height:250px;border-radius:1000px;position:relative;top:25px;right:25px;box-sizing:border-box}.timepicker .circle .mid{position:absolute;left:50%;top:50%;width:2px;height:2px;border-radius:10px;background-color:var(--default-time-picker-point-background-color)}.timepicker .circle .hour{position:absolute;height:40px;line-height:40px;width:40px;border-radius:40px;text-align:center}.timepicker .circle .hour.selected{background-color:var(--default-time-picker-hour-hover-background-color)}.timepicker .circle .hour.selected:after{content:\"\"}.timepicker .circle .hour:after{z-index:-1;background-color:var(--default-time-picker-hour-hover-background-color);height:1px;width:100%;position:absolute;transform:rotate(-90deg);transform-origin:100% 0%;top:50%;width:101px;right:50%}.timepicker .circle .hour:hover{color:var(--default-time-picker-hour-hover-text-color);z-index:2;cursor:pointer}.timepicker .circle .hour:hover:after{content:\"\"}.timepicker .circle .hour:nth-child(12):after{transform:rotate(330deg)}.timepicker .circle .hour:nth-child(11):after{transform:rotate(300deg)}.timepicker .circle .hour:nth-child(10):after{transform:rotate(270deg)}.timepicker .circle .hour:nth-child(9):after{transform:rotate(240deg)}.timepicker .circle .hour:nth-child(8):after{transform:rotate(210deg)}.timepicker .circle .hour:nth-child(7):after{transform:rotate(180deg)}.timepicker .circle .hour:nth-child(6):after{transform:rotate(150deg)}.timepicker .circle .hour:nth-child(5):after{transform:rotate(120deg)}.timepicker .circle .hour:nth-child(4):after{transform:rotate(90deg)}.timepicker .circle .hour:nth-child(3):after{transform:rotate(60deg)}.timepicker .circle .hour:nth-child(2):after{transform:rotate(30deg)}.timepicker .circle .hour:nth-child(1):after{transform:rotate(0)}.timepicker .circle .hour2{z-index:2;position:absolute;height:30px;line-height:30px;width:30px;border-radius:40px;text-align:center;font-size:14px}.timepicker .circle .hour2:hover{color:var(--default-time-picker-hour-hover-text-color);cursor:pointer}.timepicker .circle .hour2:hover:after{content:\"\";background-color:var(--default-time-picker-hour-hover-background-color);height:1px;width:100%;position:absolute;transform:rotate(-90deg);transform-origin:100% 0%;top:50%;width:64px;right:50%;z-index:-1}.timepicker .circle .hour2:nth-child(24):after{transform:rotate(690deg)}.timepicker .circle .hour2:nth-child(23):after{transform:rotate(660deg)}.timepicker .circle .hour2:nth-child(22):after{transform:rotate(630deg)}.timepicker .circle .hour2:nth-child(21):after{transform:rotate(600deg)}.timepicker .circle .hour2:nth-child(20):after{transform:rotate(570deg)}.timepicker .circle .hour2:nth-child(19):after{transform:rotate(540deg)}.timepicker .circle .hour2:nth-child(18):after{transform:rotate(510deg)}.timepicker .circle .hour2:nth-child(17):after{transform:rotate(480deg)}.timepicker .circle .hour2:nth-child(16):after{transform:rotate(450deg)}.timepicker .circle .hour2:nth-child(15):after{transform:rotate(420deg)}.timepicker .circle .hour2:nth-child(14):after{transform:rotate(390deg)}.timepicker .circle .hour2:nth-child(13):after{transform:rotate(360deg)}.timepicker .circle .min{position:absolute;height:20px;line-height:20px;width:20px;border-radius:40px;text-align:center;font-size:12px}.timepicker .circle .min:hover{background-color:var(--default-time-picker-hour-hover-background-color);color:var(--default-time-picker-hour-hover-text-color);cursor:pointer}.timepicker .circle .min:hover:after{content:\"\";background-color:var(--default-time-picker-hour-hover-background-color);height:1px;width:100%;position:absolute;transform:rotate(-90deg);transform-origin:100% 0%;top:50%;width:101px;right:50%}.timepicker .circle .min:nth-child(60):after{transform:rotate(354deg)}.timepicker .circle .min:nth-child(59):after{transform:rotate(348deg)}.timepicker .circle .min:nth-child(58):after{transform:rotate(342deg)}.timepicker .circle .min:nth-child(57):after{transform:rotate(336deg)}.timepicker .circle .min:nth-child(56):after{transform:rotate(330deg)}.timepicker .circle .min:nth-child(55):after{transform:rotate(324deg)}.timepicker .circle .min:nth-child(54):after{transform:rotate(318deg)}.timepicker .circle .min:nth-child(53):after{transform:rotate(312deg)}.timepicker .circle .min:nth-child(52):after{transform:rotate(306deg)}.timepicker .circle .min:nth-child(51):after{transform:rotate(300deg)}.timepicker .circle .min:nth-child(50):after{transform:rotate(294deg)}.timepicker .circle .min:nth-child(49):after{transform:rotate(288deg)}.timepicker .circle .min:nth-child(48):after{transform:rotate(282deg)}.timepicker .circle .min:nth-child(47):after{transform:rotate(276deg)}.timepicker .circle .min:nth-child(46):after{transform:rotate(270deg)}.timepicker .circle .min:nth-child(45):after{transform:rotate(264deg)}.timepicker .circle .min:nth-child(44):after{transform:rotate(258deg)}.timepicker .circle .min:nth-child(43):after{transform:rotate(252deg)}.timepicker .circle .min:nth-child(42):after{transform:rotate(246deg)}.timepicker .circle .min:nth-child(41):after{transform:rotate(240deg)}.timepicker .circle .min:nth-child(40):after{transform:rotate(234deg)}.timepicker .circle .min:nth-child(39):after{transform:rotate(228deg)}.timepicker .circle .min:nth-child(38):after{transform:rotate(222deg)}.timepicker .circle .min:nth-child(37):after{transform:rotate(216deg)}.timepicker .circle .min:nth-child(36):after{transform:rotate(210deg)}.timepicker .circle .min:nth-child(35):after{transform:rotate(204deg)}.timepicker .circle .min:nth-child(34):after{transform:rotate(198deg)}.timepicker .circle .min:nth-child(33):after{transform:rotate(192deg)}.timepicker .circle .min:nth-child(32):after{transform:rotate(186deg)}.timepicker .circle .min:nth-child(31):after{transform:rotate(180deg)}.timepicker .circle .min:nth-child(30):after{transform:rotate(174deg)}.timepicker .circle .min:nth-child(29):after{transform:rotate(168deg)}.timepicker .circle .min:nth-child(28):after{transform:rotate(162deg)}.timepicker .circle .min:nth-child(27):after{transform:rotate(156deg)}.timepicker .circle .min:nth-child(26):after{transform:rotate(150deg)}.timepicker .circle .min:nth-child(25):after{transform:rotate(144deg)}.timepicker .circle .min:nth-child(24):after{transform:rotate(138deg)}.timepicker .circle .min:nth-child(23):after{transform:rotate(132deg)}.timepicker .circle .min:nth-child(22):after{transform:rotate(126deg)}.timepicker .circle .min:nth-child(21):after{transform:rotate(120deg)}.timepicker .circle .min:nth-child(20):after{transform:rotate(114deg)}.timepicker .circle .min:nth-child(19):after{transform:rotate(108deg)}.timepicker .circle .min:nth-child(18):after{transform:rotate(102deg)}.timepicker .circle .min:nth-child(17):after{transform:rotate(96deg)}.timepicker .circle .min:nth-child(16):after{transform:rotate(90deg)}.timepicker .circle .min:nth-child(15):after{transform:rotate(84deg)}.timepicker .circle .min:nth-child(14):after{transform:rotate(78deg)}.timepicker .circle .min:nth-child(13):after{transform:rotate(72deg)}.timepicker .circle .min:nth-child(12):after{transform:rotate(66deg)}.timepicker .circle .min:nth-child(11):after{transform:rotate(60deg)}.timepicker .circle .min:nth-child(10):after{transform:rotate(54deg)}.timepicker .circle .min:nth-child(9):after{transform:rotate(48deg)}.timepicker .circle .min:nth-child(8):after{transform:rotate(42deg)}.timepicker .circle .min:nth-child(7):after{transform:rotate(36deg)}.timepicker .circle .min:nth-child(6):after{transform:rotate(30deg)}.timepicker .circle .min:nth-child(5):after{transform:rotate(24deg)}.timepicker .circle .min:nth-child(4):after{transform:rotate(18deg)}.timepicker .circle .min:nth-child(3):after{transform:rotate(12deg)}.timepicker .circle .min:nth-child(2):after{transform:rotate(6deg)}.timepicker .circle .min:nth-child(1):after{transform:rotate(0)}.timepicker .actions{color:var(--default-time-picker-button-text-color);font-weight:700;font-size:20px;display:flex;justify-content:flex-end;position:absolute;width:100%;box-sizing:border-box;bottom:10px;padding-inline:12px}.timepicker .actions .action{display:inline-block;text-align:center;font-size:18px;padding-inline:12px;height:37.5px;line-height:37.5px;margin-right:10px;cursor:pointer;border-radius:2px}.timepicker .circle .hour:hover,.timepicker .circle .hour2:hover{background-color:var(--default-time-picker-hour-hover-background-color)}\n"], dependencies: [{ 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: CoreBtnComponent, selector: "core-btn", inputs: ["formGroup", "loading", "theme", "buttonType", "size", "color", "isDisabled", "colorState", "confirmDialog"], outputs: ["btnClicked"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
2581
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TimePickerModalComponent, selector: "lib-time-picker-modal", inputs: { config: "config", closeSubject: "closeSubject" }, ngImport: i0, template: "<div class=\"timepicker\">\r\n <div class=\"top\">\r\n <span class=\"h\" (click)=\"onHourClick()\" [class.active]=\"showHour\">10</span\r\n >:<span class=\"m\" (click)=\"onMinutesClick()\" [class.active]=\"showMin\"\r\n >15</span\r\n >\r\n </div>\r\n <div class=\"circle\">\r\n <div *ngIf=\"showHour\">\r\n <div\r\n class=\"hour\"\r\n *ngFor=\"let hour of hoursSubject | async\"\r\n [style]=\"{ left: hour.left, top: hour.top }\"\r\n (click)=\"onHourSelect(hour)\"\r\n >\r\n {{ hour.text }}\r\n </div>\r\n <div\r\n class=\"hour2\"\r\n *ngFor=\"let hour of hours2Subject | async\"\r\n [style]=\"{ left: hour.left, top: hour.top }\"\r\n (click)=\"onHourSelect(hour)\"\r\n >\r\n {{ hour.text }}\r\n </div>\r\n <div class=\"mid\"></div>\r\n </div>\r\n <div *ngIf=\"showMin\">\r\n <div\r\n class=\"min\"\r\n *ngFor=\"let hour of minutesSubject | async\"\r\n [style]=\"{ left: hour.left, top: hour.top }\"\r\n (click)=\"onMinutesSelect(hour)\"\r\n >\r\n {{ hour.text }}\r\n </div>\r\n <div class=\"mid\"></div>\r\n </div>\r\n </div>\r\n <div class=\"actions\">\r\n <core-btn\r\n class=\"action ok\"\r\n (btnClicked)=\"submit()\"\r\n [colorState]=\"'success'\"\r\n >\r\n \u0627\u0646\u062A\u062E\u0627\u0628\r\n </core-btn>\r\n <core-btn class=\"action close\" (btnClicked)=\"close()\"> \u0628\u0633\u062A\u0646 </core-btn>\r\n </div>\r\n</div>\r\n", styles: [".timepicker{width:300px;height:450px;background-color:var(--default-time-picker-background-color);position:relative;font-family:Calibri}.timepicker .top{background-color:var(--default-time-picker-header-background-color);color:var(--default-time-picker-header-text-color);height:100px;line-height:100px;font-size:50px;text-align:center}.timepicker .top .h :hover,.timepicker .top .m :hover{cursor:pointer}.timepicker .top .active{color:var(--default-time-picker-header-item-active-text-color)}.timepicker .circle{-webkit-user-select:none;user-select:none;background-color:var(--default-time-picker-circle-background-color);width:250px;height:250px;border-radius:1000px;position:relative;top:25px;right:25px;box-sizing:border-box}.timepicker .circle .mid{position:absolute;left:50%;top:50%;width:2px;height:2px;border-radius:10px;background-color:var(--default-time-picker-point-background-color)}.timepicker .circle .hour{position:absolute;height:40px;line-height:40px;width:40px;border-radius:40px;text-align:center}.timepicker .circle .hour.selected{background-color:var(--default-time-picker-hour-hover-background-color)}.timepicker .circle .hour.selected:after{content:\"\"}.timepicker .circle .hour:after{z-index:-1;background-color:var(--default-time-picker-hour-hover-background-color);height:1px;width:100%;position:absolute;transform:rotate(-90deg);transform-origin:100% 0%;top:50%;width:101px;right:50%}.timepicker .circle .hour:hover{color:var(--default-time-picker-hour-hover-text-color);z-index:2;cursor:pointer}.timepicker .circle .hour:hover:after{content:\"\"}.timepicker .circle .hour:nth-child(12):after{transform:rotate(330deg)}.timepicker .circle .hour:nth-child(11):after{transform:rotate(300deg)}.timepicker .circle .hour:nth-child(10):after{transform:rotate(270deg)}.timepicker .circle .hour:nth-child(9):after{transform:rotate(240deg)}.timepicker .circle .hour:nth-child(8):after{transform:rotate(210deg)}.timepicker .circle .hour:nth-child(7):after{transform:rotate(180deg)}.timepicker .circle .hour:nth-child(6):after{transform:rotate(150deg)}.timepicker .circle .hour:nth-child(5):after{transform:rotate(120deg)}.timepicker .circle .hour:nth-child(4):after{transform:rotate(90deg)}.timepicker .circle .hour:nth-child(3):after{transform:rotate(60deg)}.timepicker .circle .hour:nth-child(2):after{transform:rotate(30deg)}.timepicker .circle .hour:nth-child(1):after{transform:rotate(0)}.timepicker .circle .hour2{z-index:2;position:absolute;height:30px;line-height:30px;width:30px;border-radius:40px;text-align:center;font-size:14px}.timepicker .circle .hour2:hover{color:var(--default-time-picker-hour-hover-text-color);cursor:pointer}.timepicker .circle .hour2:hover:after{content:\"\";background-color:var(--default-time-picker-hour-hover-background-color);height:1px;width:100%;position:absolute;transform:rotate(-90deg);transform-origin:100% 0%;top:50%;width:64px;right:50%;z-index:-1}.timepicker .circle .hour2:nth-child(24):after{transform:rotate(690deg)}.timepicker .circle .hour2:nth-child(23):after{transform:rotate(660deg)}.timepicker .circle .hour2:nth-child(22):after{transform:rotate(630deg)}.timepicker .circle .hour2:nth-child(21):after{transform:rotate(600deg)}.timepicker .circle .hour2:nth-child(20):after{transform:rotate(570deg)}.timepicker .circle .hour2:nth-child(19):after{transform:rotate(540deg)}.timepicker .circle .hour2:nth-child(18):after{transform:rotate(510deg)}.timepicker .circle .hour2:nth-child(17):after{transform:rotate(480deg)}.timepicker .circle .hour2:nth-child(16):after{transform:rotate(450deg)}.timepicker .circle .hour2:nth-child(15):after{transform:rotate(420deg)}.timepicker .circle .hour2:nth-child(14):after{transform:rotate(390deg)}.timepicker .circle .hour2:nth-child(13):after{transform:rotate(360deg)}.timepicker .circle .min{position:absolute;height:20px;line-height:20px;width:20px;border-radius:40px;text-align:center;font-size:12px}.timepicker .circle .min:hover{background-color:var(--default-time-picker-hour-hover-background-color);color:var(--default-time-picker-hour-hover-text-color);cursor:pointer}.timepicker .circle .min:hover:after{content:\"\";background-color:var(--default-time-picker-hour-hover-background-color);height:1px;width:100%;position:absolute;transform:rotate(-90deg);transform-origin:100% 0%;top:50%;width:101px;right:50%}.timepicker .circle .min:nth-child(60):after{transform:rotate(354deg)}.timepicker .circle .min:nth-child(59):after{transform:rotate(348deg)}.timepicker .circle .min:nth-child(58):after{transform:rotate(342deg)}.timepicker .circle .min:nth-child(57):after{transform:rotate(336deg)}.timepicker .circle .min:nth-child(56):after{transform:rotate(330deg)}.timepicker .circle .min:nth-child(55):after{transform:rotate(324deg)}.timepicker .circle .min:nth-child(54):after{transform:rotate(318deg)}.timepicker .circle .min:nth-child(53):after{transform:rotate(312deg)}.timepicker .circle .min:nth-child(52):after{transform:rotate(306deg)}.timepicker .circle .min:nth-child(51):after{transform:rotate(300deg)}.timepicker .circle .min:nth-child(50):after{transform:rotate(294deg)}.timepicker .circle .min:nth-child(49):after{transform:rotate(288deg)}.timepicker .circle .min:nth-child(48):after{transform:rotate(282deg)}.timepicker .circle .min:nth-child(47):after{transform:rotate(276deg)}.timepicker .circle .min:nth-child(46):after{transform:rotate(270deg)}.timepicker .circle .min:nth-child(45):after{transform:rotate(264deg)}.timepicker .circle .min:nth-child(44):after{transform:rotate(258deg)}.timepicker .circle .min:nth-child(43):after{transform:rotate(252deg)}.timepicker .circle .min:nth-child(42):after{transform:rotate(246deg)}.timepicker .circle .min:nth-child(41):after{transform:rotate(240deg)}.timepicker .circle .min:nth-child(40):after{transform:rotate(234deg)}.timepicker .circle .min:nth-child(39):after{transform:rotate(228deg)}.timepicker .circle .min:nth-child(38):after{transform:rotate(222deg)}.timepicker .circle .min:nth-child(37):after{transform:rotate(216deg)}.timepicker .circle .min:nth-child(36):after{transform:rotate(210deg)}.timepicker .circle .min:nth-child(35):after{transform:rotate(204deg)}.timepicker .circle .min:nth-child(34):after{transform:rotate(198deg)}.timepicker .circle .min:nth-child(33):after{transform:rotate(192deg)}.timepicker .circle .min:nth-child(32):after{transform:rotate(186deg)}.timepicker .circle .min:nth-child(31):after{transform:rotate(180deg)}.timepicker .circle .min:nth-child(30):after{transform:rotate(174deg)}.timepicker .circle .min:nth-child(29):after{transform:rotate(168deg)}.timepicker .circle .min:nth-child(28):after{transform:rotate(162deg)}.timepicker .circle .min:nth-child(27):after{transform:rotate(156deg)}.timepicker .circle .min:nth-child(26):after{transform:rotate(150deg)}.timepicker .circle .min:nth-child(25):after{transform:rotate(144deg)}.timepicker .circle .min:nth-child(24):after{transform:rotate(138deg)}.timepicker .circle .min:nth-child(23):after{transform:rotate(132deg)}.timepicker .circle .min:nth-child(22):after{transform:rotate(126deg)}.timepicker .circle .min:nth-child(21):after{transform:rotate(120deg)}.timepicker .circle .min:nth-child(20):after{transform:rotate(114deg)}.timepicker .circle .min:nth-child(19):after{transform:rotate(108deg)}.timepicker .circle .min:nth-child(18):after{transform:rotate(102deg)}.timepicker .circle .min:nth-child(17):after{transform:rotate(96deg)}.timepicker .circle .min:nth-child(16):after{transform:rotate(90deg)}.timepicker .circle .min:nth-child(15):after{transform:rotate(84deg)}.timepicker .circle .min:nth-child(14):after{transform:rotate(78deg)}.timepicker .circle .min:nth-child(13):after{transform:rotate(72deg)}.timepicker .circle .min:nth-child(12):after{transform:rotate(66deg)}.timepicker .circle .min:nth-child(11):after{transform:rotate(60deg)}.timepicker .circle .min:nth-child(10):after{transform:rotate(54deg)}.timepicker .circle .min:nth-child(9):after{transform:rotate(48deg)}.timepicker .circle .min:nth-child(8):after{transform:rotate(42deg)}.timepicker .circle .min:nth-child(7):after{transform:rotate(36deg)}.timepicker .circle .min:nth-child(6):after{transform:rotate(30deg)}.timepicker .circle .min:nth-child(5):after{transform:rotate(24deg)}.timepicker .circle .min:nth-child(4):after{transform:rotate(18deg)}.timepicker .circle .min:nth-child(3):after{transform:rotate(12deg)}.timepicker .circle .min:nth-child(2):after{transform:rotate(6deg)}.timepicker .circle .min:nth-child(1):after{transform:rotate(0)}.timepicker .actions{color:var(--default-time-picker-button-text-color);font-weight:700;font-size:20px;display:flex;justify-content:flex-end;position:absolute;width:100%;box-sizing:border-box;bottom:10px;padding-inline:12px}.timepicker .actions .action{display:inline-block;text-align:center;font-size:18px;padding-inline:12px;height:37.5px;line-height:37.5px;margin-right:10px;cursor:pointer;border-radius:2px}.timepicker .circle .hour:hover,.timepicker .circle .hour2:hover{background-color:var(--default-time-picker-hour-hover-background-color)}\n"], dependencies: [{ 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: CoreBtnComponent, selector: "core-btn", inputs: ["formGroup", "loading", "theme", "buttonType", "size", "color", "isDisabled", "colorState", "confirmDialog"], outputs: ["btnClicked", "btnClickedOnDisableMode"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
2543
2582
|
}
|
|
2544
2583
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimePickerModalComponent, decorators: [{
|
|
2545
2584
|
type: Component,
|