coer-elements 2.0.49 → 2.0.51
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/components/lib/coer-datebox/coer-datebox.component.d.ts +30 -14
- package/components/lib/coer-dropdown/coer-dropdown.component.d.ts +6 -5
- package/components/lib/coer-modal/coer-modal.component.d.ts +2 -1
- package/components/lib/coer-numberbox/coer-numberbox.component.d.ts +5 -6
- package/components/lib/coer-secretbox/coer-secretbox.component.d.ts +16 -5
- package/components/lib/coer-selectbox/coer-selectbox.component.d.ts +15 -4
- package/components/lib/coer-textbox/coer-textbox.component.d.ts +3 -3
- package/extensions/lib/string.extension.d.ts +2 -0
- package/fesm2022/coer-elements-components.mjs +343 -169
- package/fesm2022/coer-elements-components.mjs.map +1 -1
- package/fesm2022/coer-elements-extensions.mjs +3 -0
- package/fesm2022/coer-elements-extensions.mjs.map +1 -1
- package/fesm2022/coer-elements-pages.mjs +5 -5
- package/fesm2022/coer-elements-pages.mjs.map +1 -1
- package/fesm2022/coer-elements-signals.mjs +3 -1
- package/fesm2022/coer-elements-signals.mjs.map +1 -1
- package/fesm2022/coer-elements-tools.mjs +7 -2
- package/fesm2022/coer-elements-tools.mjs.map +1 -1
- package/fesm2022/coer-elements.mjs +2 -1
- package/fesm2022/coer-elements.mjs.map +1 -1
- package/index.d.ts +1 -1
- package/package.json +1 -1
- package/signals/lib/component-content.signal.d.ts +1 -0
- package/signals/public-api.d.ts +1 -0
- package/styles/coer-elements.css +1 -1
- package/styles/components.scss +305 -15
- package/styles/cursors.scss +3 -2
- package/styles/displays.scss +2 -1
- package/styles/icons/icons-regular.scss +1 -0
- package/styles/icons/icons.scss +1 -0
- package/styles/width-height.scss +1 -0
- package/svg/regular/magnifying-glass.svg +4 -0
- package/tools/lib/strings.tools.d.ts +2 -0
|
@@ -38,8 +38,8 @@ import * as i3$5 from '@angular/material/toolbar';
|
|
|
38
38
|
import { MatToolbarModule } from '@angular/material/toolbar';
|
|
39
39
|
import * as i3$1 from '@angular/material/tooltip';
|
|
40
40
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
41
|
-
import { Tools, Strings, ControlValue, CONTROL_VALUE, Dates, Screen,
|
|
42
|
-
import { breakpointSIGNAL, isModalOpenSIGNAL, menuSelectedSIGNAL, isMenuOpenSIGNAL, isLoadingSIGNAL, navigationSIGNAL } from 'coer-elements/signals';
|
|
41
|
+
import { Tools, Strings, ControlValue, CONTROL_VALUE, HTMLElements, Dates, Screen, CoerAlert, Files, Numbers, Collections, Source, Menu, Breadcrumbs } from 'coer-elements/tools';
|
|
42
|
+
import { breakpointSIGNAL, componentContentSIGNAL, isModalOpenSIGNAL, menuSelectedSIGNAL, isMenuOpenSIGNAL, isLoadingSIGNAL, navigationSIGNAL } from 'coer-elements/signals';
|
|
43
43
|
import { Modal } from 'bootstrap';
|
|
44
44
|
|
|
45
45
|
class CoerAccordion {
|
|
@@ -289,11 +289,11 @@ class CoerButton {
|
|
|
289
289
|
});
|
|
290
290
|
}
|
|
291
291
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
292
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerButton, isStandalone: false, selector: "coer-button", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, typeBreakpoint: { classPropertyName: "typeBreakpoint", publicName: "typeBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<div [ngClass]=\"{ 'coer-button': true }\">\r\n <a [routerLink]=\"(path().length > 0 && _isEnable()) ? path() : null\"\r\n [matTooltip]=\"_tooltip()\"\r\n [matTooltipPosition]=\"_tooltipPosition()\"\r\n [matTooltipDisabled]=\"!_isEnable()\"\r\n [matTooltipHideDelay]=\"0\"\r\n [ngClass]=\"{ 'loading': isLoading() }\"\r\n [ngStyle]=\"{ \r\n 'visibility' : (isInvisible() || isReadonly() ? 'hidden' : 'visible'),\r\n 'margin-top' : marginTop(), \r\n 'margin-right' : marginRight(), \r\n 'margin-bottom': marginBottom(), \r\n 'margin-left' : marginLeft() \r\n }\"> \r\n \r\n <div [class]=\"_showButton() ? '' : 'display-none'\">\r\n <button mat-button type=\"button\" \r\n [id]=\"_id + '-inner-button'\"\r\n (click)=\"_Click()\"\r\n [class]=\"_buttonType()\"\r\n [ngStyle]=\"{\r\n 'width' : width(),\r\n 'min-width' : minWidth(),\r\n 'max-width' : maxWidth(),\r\n 'height' : height(),\r\n 'min-height': minHeight()\r\n }\">\r\n\r\n @if(!isLoading()) {\r\n <span class=\"slot\">\r\n @if(iconPosition() == 'left') { \r\n <i [class]=\"_icon()\"></i> \r\n }\r\n \r\n <span [ngClass]=\"{ \r\n 'ms-2': (iconPosition() == 'left' && _icon().length > 0), \r\n 'me-2': (iconPosition() == 'right' && _icon().length > 0) \r\n }\">\r\n <ng-content>Click</ng-content>\r\n </span>\r\n \r\n @if(iconPosition() == 'right') {\r\n <i [class]=\"_icon()\"></i>\r\n }\r\n </span>\r\n }\r\n\r\n @else {\r\n <span class=\"slot animation-appear\">\r\n <span class=\"me-2\"> Loading </span>\r\n <i class=\"icon-circle-notch animation-spin\"></i>\r\n </span> \r\n }\r\n </button>\r\n </div> \r\n\r\n <div [class]=\"_showButtonIcon() ? '' : 'display-none'\">\r\n <button mat-icon-button\r\n [id]=\"_id + '-inner-button-icon'\"\r\n type=\"button\"\r\n (click)=\"_Click()\"\r\n [class]=\"_buttonType()\">\r\n <i [class]=\"_icon()\"></i>\r\n </button>\r\n </div>\r\n </a>\r\n</div> ", styles: ["coer-button{display:contents!important}div.coer-button{display:contents!important}div.coer-button a{display:inline-block!important;height:fit-content!important;text-decoration:none!important;color:var(--black)}div.coer-button button{font-size:17px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:flex!important;align-items:center!important;justify-content:center!important}div.coer-button .slot{width:100px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important}div.coer-button button.default-filled{color:var(--black)!important;background-color:transparent!important}div.coer-button button.default-outline{color:var(--black)!important;border:1px solid var(--black)!important;background-color:transparent!important}div.coer-button button.default-filled:not(.readonly):focus,div.coer-button button.default-outline:not(.readonly):focus{box-shadow:0 0 20px transparent!important}div.coer-button button.default-filled:not(.readonly):hover,div.coer-button button.default-filled:not(.readonly):focus,div.coer-button button.default-outline:not(.readonly):hover,div.coer-button button.default-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.primary-filled{color:var(--white)!important;background-color:var(--primary-inner)!important}div.coer-button button.primary-outline{color:var(--primary-inner)!important;border:1px solid var(--primary-inner)!important;background-color:transparent!important}div.coer-button button.primary-filled:not(.readonly):focus,div.coer-button button.primary-outline:not(.readonly):focus{box-shadow:0 0 20px var(--primary-inner)!important}div.coer-button button.primary-filled:not(.readonly):hover,div.coer-button button.primary-filled:not(.readonly):focus,div.coer-button button.primary-outline:not(.readonly):hover,div.coer-button button.primary-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.secondary-filled{color:var(--white)!important;background-color:var(--secondary-inner)!important}div.coer-button button.secondary-outline{color:var(--secondary-inner)!important;border:1px solid var(--secondary-inner)!important;background-color:transparent!important}div.coer-button button.secondary-filled:not(.readonly):focus,div.coer-button button.secondary-outline:not(.readonly):focus{box-shadow:0 0 20px var(--secondary-inner)!important}div.coer-button button.secondary-filled:not(.readonly):hover,div.coer-button button.secondary-filled:not(.readonly):focus,div.coer-button button.secondary-outline:not(.readonly):hover,div.coer-button button.secondary-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.success-filled{color:var(--white)!important;background-color:var(--success-inner)!important}div.coer-button button.success-outline{color:var(--success-inner)!important;border:1px solid var(--success-inner)!important;background-color:transparent!important}div.coer-button button.success-filled:not(.readonly):focus,div.coer-button button.success-outline:not(.readonly):focus{box-shadow:0 0 20px var(--success-inner)!important}div.coer-button button.success-filled:not(.readonly):hover,div.coer-button button.success-filled:not(.readonly):focus,div.coer-button button.success-outline:not(.readonly):hover,div.coer-button button.success-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.warning-filled{color:var(--black)!important;background-color:var(--warning-inner)!important}div.coer-button button.warning-outline{color:var(--warning-inner)!important;border:1px solid var(--warning-inner)!important;background-color:transparent!important}div.coer-button button.warning-filled:not(.readonly):focus,div.coer-button button.warning-outline:not(.readonly):focus{box-shadow:0 0 20px var(--warning-inner)!important}div.coer-button button.warning-filled:not(.readonly):hover,div.coer-button button.warning-filled:not(.readonly):focus,div.coer-button button.warning-outline:not(.readonly):hover,div.coer-button button.warning-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.danger-filled{color:var(--white)!important;background-color:var(--danger-inner)!important}div.coer-button button.danger-outline{color:var(--danger-inner)!important;border:1px solid var(--danger-inner)!important;background-color:transparent!important}div.coer-button button.danger-filled:not(.readonly):focus,div.coer-button button.danger-outline:not(.readonly):focus{box-shadow:0 0 20px var(--danger-inner)!important}div.coer-button button.danger-filled:not(.readonly):hover,div.coer-button button.danger-filled:not(.readonly):focus,div.coer-button button.danger-outline:not(.readonly):hover,div.coer-button button.danger-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.navigation-filled{color:var(--white)!important;background-color:var(--navigation-inner)!important}div.coer-button button.navigation-outline{color:var(--navigation-inner)!important;border:1px solid var(--navigation-inner)!important;background-color:transparent!important}div.coer-button button.navigation-filled:not(.readonly):focus,div.coer-button button.navigation-outline:not(.readonly):focus{box-shadow:0 0 20px var(--navigation-inner)!important}div.coer-button button.navigation-filled:not(.readonly):hover,div.coer-button button.navigation-filled:not(.readonly):focus,div.coer-button button.navigation-outline:not(.readonly):hover,div.coer-button button.navigation-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.information-filled{color:var(--white)!important;background-color:var(--information-inner)!important}div.coer-button button.information-outline{color:var(--information-inner)!important;border:1px solid var(--information-inner)!important;background-color:transparent!important}div.coer-button button.information-filled:not(.readonly):focus,div.coer-button button.information-outline:not(.readonly):focus{box-shadow:0 0 20px var(--information-inner)!important}div.coer-button button.information-filled:not(.readonly):hover,div.coer-button button.information-filled:not(.readonly):focus,div.coer-button button.information-outline:not(.readonly):hover,div.coer-button button.information-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.dark-filled{color:var(--white)!important;background-color:var(--black)!important}div.coer-button button.dark-outline{color:var(--black)!important;border:1px solid var(--black)!important;background-color:transparent!important}div.coer-button button.dark-filled:not(.readonly):focus,div.coer-button button.dark-outline:not(.readonly):focus{box-shadow:0 0 20px var(--black)!important}div.coer-button button.dark-filled:not(.readonly):hover,div.coer-button button.dark-filled:not(.readonly):focus,div.coer-button button.dark-outline:not(.readonly):hover,div.coer-button button.dark-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.light-filled{color:var(--black)!important;background-color:var(--white)!important}div.coer-button button.light-outline{color:var(--white)!important;border:1px solid var(--white)!important;background-color:transparent!important}div.coer-button button.light-filled:not(.readonly):focus,div.coer-button button.light-outline:not(.readonly):focus{box-shadow:0 0 20px var(--white)!important}div.coer-button button.light-filled:not(.readonly):hover,div.coer-button button.light-filled:not(.readonly):focus,div.coer-button button.light-outline:not(.readonly):hover,div.coer-button button.light-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button{width:40px!important;height:40px!important;padding:0!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border{width:25px!important;height:25px!important;background-color:transparent!important;border:none!important;overflow:visible!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border *{font-size:medium!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border i.bi-box-arrow-left,div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border i.bi-box-arrow-in-right{font-size:20px!important}div.coer-button button.readonly,div.coer-button button.readonly:hover,div.coer-button button.readonly:focus{background-color:#dfdede!important;border-color:#dfdede!important;color:var(--white)!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border.readonly{color:#dfdede!important}div.coer-button a.loading{cursor:wait!important}div.coer-button i{display:flex!important;align-items:center!important;justify-content:center!important}div.coer-button span{font-weight:700!important}div.coer-button .mat-mdc-button-touch-target{width:0px!important;height:0px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
292
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerButton, isStandalone: false, selector: "coer-button", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, typeBreakpoint: { classPropertyName: "typeBreakpoint", publicName: "typeBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<div class=\"coer-button\">\r\n <a [routerLink]=\"(path().length > 0 && _isEnable()) ? path() : null\"\r\n [matTooltip]=\"_tooltip()\"\r\n [matTooltipPosition]=\"_tooltipPosition()\"\r\n [matTooltipDisabled]=\"!_isEnable()\"\r\n [matTooltipHideDelay]=\"0\"\r\n [ngClass]=\"{ 'loading': isLoading() }\"\r\n [ngStyle]=\"{ \r\n 'visibility' : (isInvisible() || isReadonly() ? 'invisible' : 'visible'),\r\n 'margin-top' : marginTop(), \r\n 'margin-right' : marginRight(), \r\n 'margin-bottom': marginBottom(), \r\n 'margin-left' : marginLeft(),\r\n 'width' : _showButtonIcon() ? 'auto' : width(),\r\n 'min-width' : minWidth(),\r\n 'max-width' : maxWidth(), \r\n }\"> \r\n \r\n <div [class]=\"_showButton() ? '' : 'display-none'\">\r\n <button mat-button type=\"button\" \r\n [id]=\"_id + '-inner-button'\"\r\n (click)=\"_Click()\"\r\n [class]=\"_buttonType()\"\r\n [ngStyle]=\"{ \r\n 'height' : height(),\r\n 'min-height': minHeight()\r\n }\">\r\n\r\n @if(!isLoading()) {\r\n <span class=\"slot\">\r\n @if(iconPosition() == 'left') { \r\n <i [class]=\"_icon()\"></i> \r\n }\r\n \r\n <span [ngClass]=\"{ \r\n 'ms-2': (iconPosition() == 'left' && _icon().length > 0), \r\n 'me-2': (iconPosition() == 'right' && _icon().length > 0) \r\n }\">\r\n <ng-content>Click</ng-content>\r\n </span>\r\n \r\n @if(iconPosition() == 'right') {\r\n <i [class]=\"_icon()\"></i>\r\n }\r\n </span>\r\n }\r\n\r\n @else {\r\n <span class=\"slot animation-appear\">\r\n <span class=\"me-2\"> Loading </span>\r\n <i class=\"circle-notch animation-spin\"></i>\r\n </span> \r\n }\r\n </button>\r\n </div> \r\n\r\n \r\n <div [class]=\"_showButtonIcon() ? '' : 'display-none'\">\r\n <button mat-icon-button\r\n [id]=\"_id + '-inner-button-icon'\"\r\n type=\"button\"\r\n (click)=\"_Click()\"\r\n [class]=\"_buttonType()\">\r\n <i [class]=\"_icon()\"></i>\r\n </button>\r\n </div>\r\n </a>\r\n</div> ", styles: ["coer-button{display:contents!important}div.coer-button{display:contents!important}div.coer-button a{display:inline-block!important;height:fit-content!important;text-decoration:none!important;color:var(--black)}div.coer-button button{font-size:17px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%}div.coer-button .slot{width:100px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important}div.coer-button button.default-filled{color:var(--black)!important;background-color:transparent!important}div.coer-button button.default-outline{color:var(--black)!important;border:1px solid var(--black)!important;background-color:transparent!important}div.coer-button button.default-filled:not(.readonly):focus,div.coer-button button.default-outline:not(.readonly):focus{box-shadow:0 0 20px transparent!important}div.coer-button button.default-filled:not(.readonly):hover,div.coer-button button.default-filled:not(.readonly):focus,div.coer-button button.default-outline:not(.readonly):hover,div.coer-button button.default-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.primary-filled{color:var(--white)!important;background-color:var(--primary-inner)!important}div.coer-button button.primary-outline{color:var(--primary-inner)!important;border:1px solid var(--primary-inner)!important;background-color:transparent!important}div.coer-button button.primary-filled:not(.readonly):focus,div.coer-button button.primary-outline:not(.readonly):focus{box-shadow:0 0 20px var(--primary-inner)!important}div.coer-button button.primary-filled:not(.readonly):hover,div.coer-button button.primary-filled:not(.readonly):focus,div.coer-button button.primary-outline:not(.readonly):hover,div.coer-button button.primary-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.secondary-filled{color:var(--white)!important;background-color:var(--secondary-inner)!important}div.coer-button button.secondary-outline{color:var(--secondary-inner)!important;border:1px solid var(--secondary-inner)!important;background-color:transparent!important}div.coer-button button.secondary-filled:not(.readonly):focus,div.coer-button button.secondary-outline:not(.readonly):focus{box-shadow:0 0 20px var(--secondary-inner)!important}div.coer-button button.secondary-filled:not(.readonly):hover,div.coer-button button.secondary-filled:not(.readonly):focus,div.coer-button button.secondary-outline:not(.readonly):hover,div.coer-button button.secondary-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.success-filled{color:var(--white)!important;background-color:var(--success-inner)!important}div.coer-button button.success-outline{color:var(--success-inner)!important;border:1px solid var(--success-inner)!important;background-color:transparent!important}div.coer-button button.success-filled:not(.readonly):focus,div.coer-button button.success-outline:not(.readonly):focus{box-shadow:0 0 20px var(--success-inner)!important}div.coer-button button.success-filled:not(.readonly):hover,div.coer-button button.success-filled:not(.readonly):focus,div.coer-button button.success-outline:not(.readonly):hover,div.coer-button button.success-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.warning-filled{color:var(--black)!important;background-color:var(--warning-inner)!important}div.coer-button button.warning-outline{color:var(--warning-inner)!important;border:1px solid var(--warning-inner)!important;background-color:transparent!important}div.coer-button button.warning-filled:not(.readonly):focus,div.coer-button button.warning-outline:not(.readonly):focus{box-shadow:0 0 20px var(--warning-inner)!important}div.coer-button button.warning-filled:not(.readonly):hover,div.coer-button button.warning-filled:not(.readonly):focus,div.coer-button button.warning-outline:not(.readonly):hover,div.coer-button button.warning-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.danger-filled{color:var(--white)!important;background-color:var(--danger-inner)!important}div.coer-button button.danger-outline{color:var(--danger-inner)!important;border:1px solid var(--danger-inner)!important;background-color:transparent!important}div.coer-button button.danger-filled:not(.readonly):focus,div.coer-button button.danger-outline:not(.readonly):focus{box-shadow:0 0 20px var(--danger-inner)!important}div.coer-button button.danger-filled:not(.readonly):hover,div.coer-button button.danger-filled:not(.readonly):focus,div.coer-button button.danger-outline:not(.readonly):hover,div.coer-button button.danger-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.navigation-filled{color:var(--white)!important;background-color:var(--navigation-inner)!important}div.coer-button button.navigation-outline{color:var(--navigation-inner)!important;border:1px solid var(--navigation-inner)!important;background-color:transparent!important}div.coer-button button.navigation-filled:not(.readonly):focus,div.coer-button button.navigation-outline:not(.readonly):focus{box-shadow:0 0 20px var(--navigation-inner)!important}div.coer-button button.navigation-filled:not(.readonly):hover,div.coer-button button.navigation-filled:not(.readonly):focus,div.coer-button button.navigation-outline:not(.readonly):hover,div.coer-button button.navigation-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.information-filled{color:var(--white)!important;background-color:var(--information-inner)!important}div.coer-button button.information-outline{color:var(--information-inner)!important;border:1px solid var(--information-inner)!important;background-color:transparent!important}div.coer-button button.information-filled:not(.readonly):focus,div.coer-button button.information-outline:not(.readonly):focus{box-shadow:0 0 20px var(--information-inner)!important}div.coer-button button.information-filled:not(.readonly):hover,div.coer-button button.information-filled:not(.readonly):focus,div.coer-button button.information-outline:not(.readonly):hover,div.coer-button button.information-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.dark-filled{color:var(--white)!important;background-color:var(--black)!important}div.coer-button button.dark-outline{color:var(--black)!important;border:1px solid var(--black)!important;background-color:transparent!important}div.coer-button button.dark-filled:not(.readonly):focus,div.coer-button button.dark-outline:not(.readonly):focus{box-shadow:0 0 20px var(--black)!important}div.coer-button button.dark-filled:not(.readonly):hover,div.coer-button button.dark-filled:not(.readonly):focus,div.coer-button button.dark-outline:not(.readonly):hover,div.coer-button button.dark-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.light-filled{color:var(--black)!important;background-color:var(--white)!important}div.coer-button button.light-outline{color:var(--white)!important;border:1px solid var(--white)!important;background-color:transparent!important}div.coer-button button.light-filled:not(.readonly):focus,div.coer-button button.light-outline:not(.readonly):focus{box-shadow:0 0 20px var(--white)!important}div.coer-button button.light-filled:not(.readonly):hover,div.coer-button button.light-filled:not(.readonly):focus,div.coer-button button.light-outline:not(.readonly):hover,div.coer-button button.light-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button{width:40px!important;height:40px!important;padding:0!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border{width:25px!important;height:25px!important;background-color:transparent!important;border:none!important;overflow:visible!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border *{font-size:medium!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border i.bi-box-arrow-left,div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border i.bi-box-arrow-in-right{font-size:20px!important}div.coer-button button.readonly,div.coer-button button.readonly:hover,div.coer-button button.readonly:focus{background-color:#dfdede!important;border-color:#dfdede!important;color:var(--white)!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border.readonly{color:#dfdede!important}div.coer-button a.loading{cursor:wait!important}div.coer-button i{display:flex!important;align-items:center!important;justify-content:center!important}div.coer-button span{font-weight:700!important}div.coer-button .mat-mdc-button-touch-target{width:0px!important;height:0px!important}div.coer-button .mat-mdc-icon-button .mat-mdc-button-ripple,div.coer-button .mat-mdc-icon-button .mat-mdc-button-persistent-ripple,div.coer-button .mat-mdc-icon-button .mat-mdc-button-persistent-ripple:before{position:relative!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
293
293
|
}
|
|
294
294
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerButton, decorators: [{
|
|
295
295
|
type: Component,
|
|
296
|
-
args: [{ selector: 'coer-button', standalone: false, template: "<div [ngClass]=\"{ 'coer-button': true }\">\r\n <a [routerLink]=\"(path().length > 0 && _isEnable()) ? path() : null\"\r\n [matTooltip]=\"_tooltip()\"\r\n [matTooltipPosition]=\"_tooltipPosition()\"\r\n [matTooltipDisabled]=\"!_isEnable()\"\r\n [matTooltipHideDelay]=\"0\"\r\n [ngClass]=\"{ 'loading': isLoading() }\"\r\n [ngStyle]=\"{ \r\n 'visibility' : (isInvisible() || isReadonly() ? 'hidden' : 'visible'),\r\n 'margin-top' : marginTop(), \r\n 'margin-right' : marginRight(), \r\n 'margin-bottom': marginBottom(), \r\n 'margin-left' : marginLeft() \r\n }\"> \r\n \r\n <div [class]=\"_showButton() ? '' : 'display-none'\">\r\n <button mat-button type=\"button\" \r\n [id]=\"_id + '-inner-button'\"\r\n (click)=\"_Click()\"\r\n [class]=\"_buttonType()\"\r\n [ngStyle]=\"{\r\n 'width' : width(),\r\n 'min-width' : minWidth(),\r\n 'max-width' : maxWidth(),\r\n 'height' : height(),\r\n 'min-height': minHeight()\r\n }\">\r\n\r\n @if(!isLoading()) {\r\n <span class=\"slot\">\r\n @if(iconPosition() == 'left') { \r\n <i [class]=\"_icon()\"></i> \r\n }\r\n \r\n <span [ngClass]=\"{ \r\n 'ms-2': (iconPosition() == 'left' && _icon().length > 0), \r\n 'me-2': (iconPosition() == 'right' && _icon().length > 0) \r\n }\">\r\n <ng-content>Click</ng-content>\r\n </span>\r\n \r\n @if(iconPosition() == 'right') {\r\n <i [class]=\"_icon()\"></i>\r\n }\r\n </span>\r\n }\r\n\r\n @else {\r\n <span class=\"slot animation-appear\">\r\n <span class=\"me-2\"> Loading </span>\r\n <i class=\"icon-circle-notch animation-spin\"></i>\r\n </span> \r\n }\r\n </button>\r\n </div> \r\n\r\n <div [class]=\"_showButtonIcon() ? '' : 'display-none'\">\r\n <button mat-icon-button\r\n [id]=\"_id + '-inner-button-icon'\"\r\n type=\"button\"\r\n (click)=\"_Click()\"\r\n [class]=\"_buttonType()\">\r\n <i [class]=\"_icon()\"></i>\r\n </button>\r\n </div>\r\n </a>\r\n</div> ", styles: ["coer-button{display:contents!important}div.coer-button{display:contents!important}div.coer-button a{display:inline-block!important;height:fit-content!important;text-decoration:none!important;color:var(--black)}div.coer-button button{font-size:17px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:flex!important;align-items:center!important;justify-content:center!important}div.coer-button .slot{width:100px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important}div.coer-button button.default-filled{color:var(--black)!important;background-color:transparent!important}div.coer-button button.default-outline{color:var(--black)!important;border:1px solid var(--black)!important;background-color:transparent!important}div.coer-button button.default-filled:not(.readonly):focus,div.coer-button button.default-outline:not(.readonly):focus{box-shadow:0 0 20px transparent!important}div.coer-button button.default-filled:not(.readonly):hover,div.coer-button button.default-filled:not(.readonly):focus,div.coer-button button.default-outline:not(.readonly):hover,div.coer-button button.default-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.primary-filled{color:var(--white)!important;background-color:var(--primary-inner)!important}div.coer-button button.primary-outline{color:var(--primary-inner)!important;border:1px solid var(--primary-inner)!important;background-color:transparent!important}div.coer-button button.primary-filled:not(.readonly):focus,div.coer-button button.primary-outline:not(.readonly):focus{box-shadow:0 0 20px var(--primary-inner)!important}div.coer-button button.primary-filled:not(.readonly):hover,div.coer-button button.primary-filled:not(.readonly):focus,div.coer-button button.primary-outline:not(.readonly):hover,div.coer-button button.primary-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.secondary-filled{color:var(--white)!important;background-color:var(--secondary-inner)!important}div.coer-button button.secondary-outline{color:var(--secondary-inner)!important;border:1px solid var(--secondary-inner)!important;background-color:transparent!important}div.coer-button button.secondary-filled:not(.readonly):focus,div.coer-button button.secondary-outline:not(.readonly):focus{box-shadow:0 0 20px var(--secondary-inner)!important}div.coer-button button.secondary-filled:not(.readonly):hover,div.coer-button button.secondary-filled:not(.readonly):focus,div.coer-button button.secondary-outline:not(.readonly):hover,div.coer-button button.secondary-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.success-filled{color:var(--white)!important;background-color:var(--success-inner)!important}div.coer-button button.success-outline{color:var(--success-inner)!important;border:1px solid var(--success-inner)!important;background-color:transparent!important}div.coer-button button.success-filled:not(.readonly):focus,div.coer-button button.success-outline:not(.readonly):focus{box-shadow:0 0 20px var(--success-inner)!important}div.coer-button button.success-filled:not(.readonly):hover,div.coer-button button.success-filled:not(.readonly):focus,div.coer-button button.success-outline:not(.readonly):hover,div.coer-button button.success-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.warning-filled{color:var(--black)!important;background-color:var(--warning-inner)!important}div.coer-button button.warning-outline{color:var(--warning-inner)!important;border:1px solid var(--warning-inner)!important;background-color:transparent!important}div.coer-button button.warning-filled:not(.readonly):focus,div.coer-button button.warning-outline:not(.readonly):focus{box-shadow:0 0 20px var(--warning-inner)!important}div.coer-button button.warning-filled:not(.readonly):hover,div.coer-button button.warning-filled:not(.readonly):focus,div.coer-button button.warning-outline:not(.readonly):hover,div.coer-button button.warning-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.danger-filled{color:var(--white)!important;background-color:var(--danger-inner)!important}div.coer-button button.danger-outline{color:var(--danger-inner)!important;border:1px solid var(--danger-inner)!important;background-color:transparent!important}div.coer-button button.danger-filled:not(.readonly):focus,div.coer-button button.danger-outline:not(.readonly):focus{box-shadow:0 0 20px var(--danger-inner)!important}div.coer-button button.danger-filled:not(.readonly):hover,div.coer-button button.danger-filled:not(.readonly):focus,div.coer-button button.danger-outline:not(.readonly):hover,div.coer-button button.danger-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.navigation-filled{color:var(--white)!important;background-color:var(--navigation-inner)!important}div.coer-button button.navigation-outline{color:var(--navigation-inner)!important;border:1px solid var(--navigation-inner)!important;background-color:transparent!important}div.coer-button button.navigation-filled:not(.readonly):focus,div.coer-button button.navigation-outline:not(.readonly):focus{box-shadow:0 0 20px var(--navigation-inner)!important}div.coer-button button.navigation-filled:not(.readonly):hover,div.coer-button button.navigation-filled:not(.readonly):focus,div.coer-button button.navigation-outline:not(.readonly):hover,div.coer-button button.navigation-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.information-filled{color:var(--white)!important;background-color:var(--information-inner)!important}div.coer-button button.information-outline{color:var(--information-inner)!important;border:1px solid var(--information-inner)!important;background-color:transparent!important}div.coer-button button.information-filled:not(.readonly):focus,div.coer-button button.information-outline:not(.readonly):focus{box-shadow:0 0 20px var(--information-inner)!important}div.coer-button button.information-filled:not(.readonly):hover,div.coer-button button.information-filled:not(.readonly):focus,div.coer-button button.information-outline:not(.readonly):hover,div.coer-button button.information-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.dark-filled{color:var(--white)!important;background-color:var(--black)!important}div.coer-button button.dark-outline{color:var(--black)!important;border:1px solid var(--black)!important;background-color:transparent!important}div.coer-button button.dark-filled:not(.readonly):focus,div.coer-button button.dark-outline:not(.readonly):focus{box-shadow:0 0 20px var(--black)!important}div.coer-button button.dark-filled:not(.readonly):hover,div.coer-button button.dark-filled:not(.readonly):focus,div.coer-button button.dark-outline:not(.readonly):hover,div.coer-button button.dark-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.light-filled{color:var(--black)!important;background-color:var(--white)!important}div.coer-button button.light-outline{color:var(--white)!important;border:1px solid var(--white)!important;background-color:transparent!important}div.coer-button button.light-filled:not(.readonly):focus,div.coer-button button.light-outline:not(.readonly):focus{box-shadow:0 0 20px var(--white)!important}div.coer-button button.light-filled:not(.readonly):hover,div.coer-button button.light-filled:not(.readonly):focus,div.coer-button button.light-outline:not(.readonly):hover,div.coer-button button.light-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button{width:40px!important;height:40px!important;padding:0!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border{width:25px!important;height:25px!important;background-color:transparent!important;border:none!important;overflow:visible!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border *{font-size:medium!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border i.bi-box-arrow-left,div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border i.bi-box-arrow-in-right{font-size:20px!important}div.coer-button button.readonly,div.coer-button button.readonly:hover,div.coer-button button.readonly:focus{background-color:#dfdede!important;border-color:#dfdede!important;color:var(--white)!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border.readonly{color:#dfdede!important}div.coer-button a.loading{cursor:wait!important}div.coer-button i{display:flex!important;align-items:center!important;justify-content:center!important}div.coer-button span{font-weight:700!important}div.coer-button .mat-mdc-button-touch-target{width:0px!important;height:0px!important}\n"] }]
|
|
296
|
+
args: [{ selector: 'coer-button', standalone: false, template: "<div class=\"coer-button\">\r\n <a [routerLink]=\"(path().length > 0 && _isEnable()) ? path() : null\"\r\n [matTooltip]=\"_tooltip()\"\r\n [matTooltipPosition]=\"_tooltipPosition()\"\r\n [matTooltipDisabled]=\"!_isEnable()\"\r\n [matTooltipHideDelay]=\"0\"\r\n [ngClass]=\"{ 'loading': isLoading() }\"\r\n [ngStyle]=\"{ \r\n 'visibility' : (isInvisible() || isReadonly() ? 'invisible' : 'visible'),\r\n 'margin-top' : marginTop(), \r\n 'margin-right' : marginRight(), \r\n 'margin-bottom': marginBottom(), \r\n 'margin-left' : marginLeft(),\r\n 'width' : _showButtonIcon() ? 'auto' : width(),\r\n 'min-width' : minWidth(),\r\n 'max-width' : maxWidth(), \r\n }\"> \r\n \r\n <div [class]=\"_showButton() ? '' : 'display-none'\">\r\n <button mat-button type=\"button\" \r\n [id]=\"_id + '-inner-button'\"\r\n (click)=\"_Click()\"\r\n [class]=\"_buttonType()\"\r\n [ngStyle]=\"{ \r\n 'height' : height(),\r\n 'min-height': minHeight()\r\n }\">\r\n\r\n @if(!isLoading()) {\r\n <span class=\"slot\">\r\n @if(iconPosition() == 'left') { \r\n <i [class]=\"_icon()\"></i> \r\n }\r\n \r\n <span [ngClass]=\"{ \r\n 'ms-2': (iconPosition() == 'left' && _icon().length > 0), \r\n 'me-2': (iconPosition() == 'right' && _icon().length > 0) \r\n }\">\r\n <ng-content>Click</ng-content>\r\n </span>\r\n \r\n @if(iconPosition() == 'right') {\r\n <i [class]=\"_icon()\"></i>\r\n }\r\n </span>\r\n }\r\n\r\n @else {\r\n <span class=\"slot animation-appear\">\r\n <span class=\"me-2\"> Loading </span>\r\n <i class=\"circle-notch animation-spin\"></i>\r\n </span> \r\n }\r\n </button>\r\n </div> \r\n\r\n \r\n <div [class]=\"_showButtonIcon() ? '' : 'display-none'\">\r\n <button mat-icon-button\r\n [id]=\"_id + '-inner-button-icon'\"\r\n type=\"button\"\r\n (click)=\"_Click()\"\r\n [class]=\"_buttonType()\">\r\n <i [class]=\"_icon()\"></i>\r\n </button>\r\n </div>\r\n </a>\r\n</div> ", styles: ["coer-button{display:contents!important}div.coer-button{display:contents!important}div.coer-button a{display:inline-block!important;height:fit-content!important;text-decoration:none!important;color:var(--black)}div.coer-button button{font-size:17px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%}div.coer-button .slot{width:100px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important}div.coer-button button.default-filled{color:var(--black)!important;background-color:transparent!important}div.coer-button button.default-outline{color:var(--black)!important;border:1px solid var(--black)!important;background-color:transparent!important}div.coer-button button.default-filled:not(.readonly):focus,div.coer-button button.default-outline:not(.readonly):focus{box-shadow:0 0 20px transparent!important}div.coer-button button.default-filled:not(.readonly):hover,div.coer-button button.default-filled:not(.readonly):focus,div.coer-button button.default-outline:not(.readonly):hover,div.coer-button button.default-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.primary-filled{color:var(--white)!important;background-color:var(--primary-inner)!important}div.coer-button button.primary-outline{color:var(--primary-inner)!important;border:1px solid var(--primary-inner)!important;background-color:transparent!important}div.coer-button button.primary-filled:not(.readonly):focus,div.coer-button button.primary-outline:not(.readonly):focus{box-shadow:0 0 20px var(--primary-inner)!important}div.coer-button button.primary-filled:not(.readonly):hover,div.coer-button button.primary-filled:not(.readonly):focus,div.coer-button button.primary-outline:not(.readonly):hover,div.coer-button button.primary-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.secondary-filled{color:var(--white)!important;background-color:var(--secondary-inner)!important}div.coer-button button.secondary-outline{color:var(--secondary-inner)!important;border:1px solid var(--secondary-inner)!important;background-color:transparent!important}div.coer-button button.secondary-filled:not(.readonly):focus,div.coer-button button.secondary-outline:not(.readonly):focus{box-shadow:0 0 20px var(--secondary-inner)!important}div.coer-button button.secondary-filled:not(.readonly):hover,div.coer-button button.secondary-filled:not(.readonly):focus,div.coer-button button.secondary-outline:not(.readonly):hover,div.coer-button button.secondary-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.success-filled{color:var(--white)!important;background-color:var(--success-inner)!important}div.coer-button button.success-outline{color:var(--success-inner)!important;border:1px solid var(--success-inner)!important;background-color:transparent!important}div.coer-button button.success-filled:not(.readonly):focus,div.coer-button button.success-outline:not(.readonly):focus{box-shadow:0 0 20px var(--success-inner)!important}div.coer-button button.success-filled:not(.readonly):hover,div.coer-button button.success-filled:not(.readonly):focus,div.coer-button button.success-outline:not(.readonly):hover,div.coer-button button.success-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.warning-filled{color:var(--black)!important;background-color:var(--warning-inner)!important}div.coer-button button.warning-outline{color:var(--warning-inner)!important;border:1px solid var(--warning-inner)!important;background-color:transparent!important}div.coer-button button.warning-filled:not(.readonly):focus,div.coer-button button.warning-outline:not(.readonly):focus{box-shadow:0 0 20px var(--warning-inner)!important}div.coer-button button.warning-filled:not(.readonly):hover,div.coer-button button.warning-filled:not(.readonly):focus,div.coer-button button.warning-outline:not(.readonly):hover,div.coer-button button.warning-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.danger-filled{color:var(--white)!important;background-color:var(--danger-inner)!important}div.coer-button button.danger-outline{color:var(--danger-inner)!important;border:1px solid var(--danger-inner)!important;background-color:transparent!important}div.coer-button button.danger-filled:not(.readonly):focus,div.coer-button button.danger-outline:not(.readonly):focus{box-shadow:0 0 20px var(--danger-inner)!important}div.coer-button button.danger-filled:not(.readonly):hover,div.coer-button button.danger-filled:not(.readonly):focus,div.coer-button button.danger-outline:not(.readonly):hover,div.coer-button button.danger-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.navigation-filled{color:var(--white)!important;background-color:var(--navigation-inner)!important}div.coer-button button.navigation-outline{color:var(--navigation-inner)!important;border:1px solid var(--navigation-inner)!important;background-color:transparent!important}div.coer-button button.navigation-filled:not(.readonly):focus,div.coer-button button.navigation-outline:not(.readonly):focus{box-shadow:0 0 20px var(--navigation-inner)!important}div.coer-button button.navigation-filled:not(.readonly):hover,div.coer-button button.navigation-filled:not(.readonly):focus,div.coer-button button.navigation-outline:not(.readonly):hover,div.coer-button button.navigation-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.information-filled{color:var(--white)!important;background-color:var(--information-inner)!important}div.coer-button button.information-outline{color:var(--information-inner)!important;border:1px solid var(--information-inner)!important;background-color:transparent!important}div.coer-button button.information-filled:not(.readonly):focus,div.coer-button button.information-outline:not(.readonly):focus{box-shadow:0 0 20px var(--information-inner)!important}div.coer-button button.information-filled:not(.readonly):hover,div.coer-button button.information-filled:not(.readonly):focus,div.coer-button button.information-outline:not(.readonly):hover,div.coer-button button.information-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.dark-filled{color:var(--white)!important;background-color:var(--black)!important}div.coer-button button.dark-outline{color:var(--black)!important;border:1px solid var(--black)!important;background-color:transparent!important}div.coer-button button.dark-filled:not(.readonly):focus,div.coer-button button.dark-outline:not(.readonly):focus{box-shadow:0 0 20px var(--black)!important}div.coer-button button.dark-filled:not(.readonly):hover,div.coer-button button.dark-filled:not(.readonly):focus,div.coer-button button.dark-outline:not(.readonly):hover,div.coer-button button.dark-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.light-filled{color:var(--black)!important;background-color:var(--white)!important}div.coer-button button.light-outline{color:var(--white)!important;border:1px solid var(--white)!important;background-color:transparent!important}div.coer-button button.light-filled:not(.readonly):focus,div.coer-button button.light-outline:not(.readonly):focus{box-shadow:0 0 20px var(--white)!important}div.coer-button button.light-filled:not(.readonly):hover,div.coer-button button.light-filled:not(.readonly):focus,div.coer-button button.light-outline:not(.readonly):hover,div.coer-button button.light-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button{width:40px!important;height:40px!important;padding:0!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border{width:25px!important;height:25px!important;background-color:transparent!important;border:none!important;overflow:visible!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border *{font-size:medium!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border i.bi-box-arrow-left,div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border i.bi-box-arrow-in-right{font-size:20px!important}div.coer-button button.readonly,div.coer-button button.readonly:hover,div.coer-button button.readonly:focus{background-color:#dfdede!important;border-color:#dfdede!important;color:var(--white)!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border.readonly{color:#dfdede!important}div.coer-button a.loading{cursor:wait!important}div.coer-button i{display:flex!important;align-items:center!important;justify-content:center!important}div.coer-button span{font-weight:700!important}div.coer-button .mat-mdc-button-touch-target{width:0px!important;height:0px!important}div.coer-button .mat-mdc-icon-button .mat-mdc-button-ripple,div.coer-button .mat-mdc-icon-button .mat-mdc-button-persistent-ripple,div.coer-button .mat-mdc-icon-button .mat-mdc-button-persistent-ripple:before{position:relative!important}\n"] }]
|
|
297
297
|
}] });
|
|
298
298
|
|
|
299
299
|
class CoerCard {
|
|
@@ -388,11 +388,11 @@ class CoerCheckbox extends ControlValue {
|
|
|
388
388
|
}
|
|
389
389
|
}
|
|
390
390
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
391
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: CoerCheckbox, isStandalone: false, selector: "coer-checkbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, ignoreDataBinding: { classPropertyName: "ignoreDataBinding", publicName: "ignoreDataBinding", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange" }, providers: [CONTROL_VALUE(CoerCheckbox)], usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{ 'coer-checkbox': true, 'placeholder-glow': isLoading(), 'invisible': isInvisible() }\">\r\n <div [id]=\"_id\" [ngClass]=\"{ 'placeholder': isLoading() }\">\r\n <mat-checkbox\r\n [ngModel]=\"_value\"\r\n [indeterminate]=\"false\"\r\n [labelPosition]=\"labelPosition()\"\r\n [disabled]=\"!_isEnable()\"\r\n (change)=\"this.SetValue($event.checked)\"\r\n > {{ label() }} </mat-checkbox>\r\n </div>\r\n</div>", styles: ["div.coer-checkbox{display:inline-flex!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox{padding:10px!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background{background-color:var(--smoke)!important;border-radius:5px!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__ripple{width:30px!important;height:30px!important;top:5px!important;left:5px!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mat-ripple.mat-mdc-checkbox-ripple.mat-mdc-focus-indicator *{display:none!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field label.mdc-label{padding-top:3px!important;padding-left:0!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field label.mdc-label::selection{background-color:transparent!important}div.coer-checkbox mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background{background-color:var(--primary-inner)!important;border-color:var(--primary-inner)!important}coer-grid table tbody tr td
|
|
391
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: CoerCheckbox, isStandalone: false, selector: "coer-checkbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, ignoreDataBinding: { classPropertyName: "ignoreDataBinding", publicName: "ignoreDataBinding", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange" }, providers: [CONTROL_VALUE(CoerCheckbox)], usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{ 'coer-checkbox': true, 'placeholder-glow': isLoading(), 'invisible': isInvisible() }\">\r\n <div [id]=\"_id\" [ngClass]=\"{ 'placeholder': isLoading() }\">\r\n <mat-checkbox\r\n [ngModel]=\"_value\"\r\n [indeterminate]=\"false\"\r\n [labelPosition]=\"labelPosition()\"\r\n [disabled]=\"!_isEnable()\"\r\n (change)=\"this.SetValue($event.checked)\"\r\n > {{ label() }} </mat-checkbox>\r\n </div>\r\n</div>", styles: ["div.coer-checkbox{display:inline-flex!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox{padding:10px!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background{background-color:var(--smoke)!important;border-radius:5px!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__ripple{width:30px!important;height:30px!important;top:5px!important;left:5px!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mat-ripple.mat-mdc-checkbox-ripple.mat-mdc-focus-indicator *{display:none!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field label.mdc-label{padding-top:3px!important;padding-left:0!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field label.mdc-label::selection{background-color:transparent!important}div.coer-checkbox mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background{background-color:var(--primary-inner)!important;border-color:var(--primary-inner)!important}coer-grid table tbody tr td mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox,coer-grid table tbody tr td mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox{padding:0!important}coer-grid table tbody tr td mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mat-mdc-checkbox-touch-target,coer-grid table tbody tr td mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mat-mdc-checkbox-touch-target{top:8px!important;width:39px!important;height:30px!important}coer-grid table tbody tr td mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox input,coer-grid table tbody tr td mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox input{display:none!important}coer-grid table tbody tr td mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__ripple,coer-grid table tbody tr td mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__ripple{top:-7px!important;left:-6px!important}coer-grid table tbody tr td mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background,coer-grid table tbody tr td mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background{transform:translateY(-1px)!important;position:static!important}coer-grid table tbody tr td mat-checkbox div.mdc-form-field.mat-internal-form-field label.mdc-label,coer-grid table tbody tr td mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field label.mdc-label{display:none!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] }); }
|
|
392
392
|
}
|
|
393
393
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerCheckbox, decorators: [{
|
|
394
394
|
type: Component,
|
|
395
|
-
args: [{ selector: 'coer-checkbox', providers: [CONTROL_VALUE(CoerCheckbox)], standalone: false, template: "<div [ngClass]=\"{ 'coer-checkbox': true, 'placeholder-glow': isLoading(), 'invisible': isInvisible() }\">\r\n <div [id]=\"_id\" [ngClass]=\"{ 'placeholder': isLoading() }\">\r\n <mat-checkbox\r\n [ngModel]=\"_value\"\r\n [indeterminate]=\"false\"\r\n [labelPosition]=\"labelPosition()\"\r\n [disabled]=\"!_isEnable()\"\r\n (change)=\"this.SetValue($event.checked)\"\r\n > {{ label() }} </mat-checkbox>\r\n </div>\r\n</div>", styles: ["div.coer-checkbox{display:inline-flex!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox{padding:10px!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background{background-color:var(--smoke)!important;border-radius:5px!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__ripple{width:30px!important;height:30px!important;top:5px!important;left:5px!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mat-ripple.mat-mdc-checkbox-ripple.mat-mdc-focus-indicator *{display:none!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field label.mdc-label{padding-top:3px!important;padding-left:0!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field label.mdc-label::selection{background-color:transparent!important}div.coer-checkbox mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background{background-color:var(--primary-inner)!important;border-color:var(--primary-inner)!important}coer-grid table tbody tr td
|
|
395
|
+
args: [{ selector: 'coer-checkbox', providers: [CONTROL_VALUE(CoerCheckbox)], standalone: false, template: "<div [ngClass]=\"{ 'coer-checkbox': true, 'placeholder-glow': isLoading(), 'invisible': isInvisible() }\">\r\n <div [id]=\"_id\" [ngClass]=\"{ 'placeholder': isLoading() }\">\r\n <mat-checkbox\r\n [ngModel]=\"_value\"\r\n [indeterminate]=\"false\"\r\n [labelPosition]=\"labelPosition()\"\r\n [disabled]=\"!_isEnable()\"\r\n (change)=\"this.SetValue($event.checked)\"\r\n > {{ label() }} </mat-checkbox>\r\n </div>\r\n</div>", styles: ["div.coer-checkbox{display:inline-flex!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox{padding:10px!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background{background-color:var(--smoke)!important;border-radius:5px!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__ripple{width:30px!important;height:30px!important;top:5px!important;left:5px!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mat-ripple.mat-mdc-checkbox-ripple.mat-mdc-focus-indicator *{display:none!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field label.mdc-label{padding-top:3px!important;padding-left:0!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field label.mdc-label::selection{background-color:transparent!important}div.coer-checkbox mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background{background-color:var(--primary-inner)!important;border-color:var(--primary-inner)!important}coer-grid table tbody tr td mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox,coer-grid table tbody tr td mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox{padding:0!important}coer-grid table tbody tr td mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mat-mdc-checkbox-touch-target,coer-grid table tbody tr td mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mat-mdc-checkbox-touch-target{top:8px!important;width:39px!important;height:30px!important}coer-grid table tbody tr td mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox input,coer-grid table tbody tr td mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox input{display:none!important}coer-grid table tbody tr td mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__ripple,coer-grid table tbody tr td mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__ripple{top:-7px!important;left:-6px!important}coer-grid table tbody tr td mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background,coer-grid table tbody tr td mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background{transform:translateY(-1px)!important;position:static!important}coer-grid table tbody tr td mat-checkbox div.mdc-form-field.mat-internal-form-field label.mdc-label,coer-grid table tbody tr td mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field label.mdc-label{display:none!important}\n"] }]
|
|
396
396
|
}], ctorParameters: () => [] });
|
|
397
397
|
|
|
398
398
|
class CoerDateBox extends ControlValue {
|
|
@@ -403,16 +403,25 @@ class CoerDateBox extends ControlValue {
|
|
|
403
403
|
this._value = null;
|
|
404
404
|
this._id = Tools.GetGuid('coer-datebox');
|
|
405
405
|
this._datepicker = viewChild('datepicker');
|
|
406
|
-
this.
|
|
407
|
-
this.
|
|
406
|
+
this._isLoading = signal(false);
|
|
407
|
+
this._externalButton = signal({ show: false });
|
|
408
|
+
this._isOverButton = signal(false);
|
|
409
|
+
this._isOverOption = signal(false);
|
|
410
|
+
this._isOverMenu = signal(false);
|
|
411
|
+
this._isOpen = signal(false);
|
|
412
|
+
this._pickerContent = null;
|
|
413
|
+
this._pickerButton = null;
|
|
414
|
+
this._input = null;
|
|
408
415
|
//Inputs
|
|
409
416
|
this.id = input('');
|
|
410
417
|
this.value = input(null);
|
|
411
418
|
this.label = input('');
|
|
412
419
|
this.placeholder = input('');
|
|
413
420
|
this.textPosition = input('left');
|
|
421
|
+
this.isWritable = input(false);
|
|
414
422
|
this.isInvalid = input(false);
|
|
415
423
|
this.isValid = input(false);
|
|
424
|
+
this.externalButton = input({ show: false });
|
|
416
425
|
this.isLoading = input(false);
|
|
417
426
|
this.isDisabled = input(false);
|
|
418
427
|
this.isReadonly = input(false);
|
|
@@ -428,63 +437,120 @@ class CoerDateBox extends ControlValue {
|
|
|
428
437
|
this.onOpen = output();
|
|
429
438
|
this.onClose = output();
|
|
430
439
|
this.onChangeValue = output();
|
|
440
|
+
this.onClickExternalButton = output();
|
|
431
441
|
//computed
|
|
432
442
|
this._floatLabel = computed(() => {
|
|
433
443
|
return this.label() == '' ? 'always' : 'auto';
|
|
434
444
|
});
|
|
435
445
|
//computed
|
|
436
446
|
this._paddingRight = computed(() => {
|
|
437
|
-
return this.isInvalid() || this.isValid()
|
|
438
|
-
? '
|
|
447
|
+
return this._isEnable() && (this.isInvalid() || this.isValid())
|
|
448
|
+
? '15px' : '0px';
|
|
439
449
|
});
|
|
440
450
|
//computed
|
|
441
451
|
this._isEnable = computed(() => {
|
|
442
452
|
return !this.isDisabled() && !this.isLoading() && !this.isReadonly() && !this.isInvisible();
|
|
443
453
|
});
|
|
444
|
-
this.
|
|
445
|
-
this.SetValue(Tools.IsNotNull(this.value()) ? this.value() :
|
|
454
|
+
this._effectValue = effect(() => {
|
|
455
|
+
this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : '');
|
|
456
|
+
});
|
|
457
|
+
this._effectExternalButton = effect(() => {
|
|
458
|
+
this._externalButton.set(this.externalButton());
|
|
459
|
+
});
|
|
460
|
+
this._effectComponentSignal = effect(() => {
|
|
461
|
+
if (componentContentSIGNAL().length > 0 && componentContentSIGNAL() != this._id) {
|
|
462
|
+
Tools.Sleep().then(_ => this._Close());
|
|
463
|
+
}
|
|
446
464
|
});
|
|
447
465
|
}
|
|
448
466
|
//AfterViewInit
|
|
449
467
|
ngAfterViewInit() {
|
|
450
468
|
Tools.Sleep().then(() => {
|
|
451
|
-
//input
|
|
452
|
-
this._input = document.getElementById(this._id);
|
|
453
|
-
if (this._input) {
|
|
454
|
-
this._input.addEventListener('focus', () => this._Blur());
|
|
455
|
-
this._input.addEventListener('blur', () => this._Blur());
|
|
456
|
-
}
|
|
457
|
-
//container
|
|
458
|
-
this._container = document.getElementById(`${this._id}-container`);
|
|
459
|
-
if (this._container) {
|
|
460
|
-
this._container.addEventListener('click', (event) => {
|
|
461
|
-
event.stopPropagation();
|
|
462
|
-
event.preventDefault();
|
|
463
|
-
this.Open();
|
|
464
|
-
});
|
|
465
|
-
}
|
|
466
469
|
//pickerButton
|
|
467
|
-
this._pickerButton =
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
470
|
+
this._pickerButton = HTMLElements.GetElement(`#${this._id}-coer-date-box button`);
|
|
471
|
+
this._pickerButton?.addEventListener('mouseenter', () => this._isOverButton.set(true));
|
|
472
|
+
this._pickerButton?.addEventListener('mouseleave', () => this._isOverButton.set(false));
|
|
473
|
+
this._pickerButton?.addEventListener('click', (event) => {
|
|
474
|
+
event.stopPropagation();
|
|
475
|
+
event.preventDefault();
|
|
476
|
+
if (this._isLoading())
|
|
477
|
+
return;
|
|
478
|
+
this._isLoading.set(true);
|
|
479
|
+
if (this._isOpen()) {
|
|
480
|
+
if (this._isOverButton() || this._isOverOption()) {
|
|
481
|
+
this._Close();
|
|
482
|
+
}
|
|
483
|
+
}
|
|
484
|
+
else {
|
|
485
|
+
this._Open();
|
|
486
|
+
}
|
|
487
|
+
Tools.Sleep().then(_ => this._isLoading.set(false));
|
|
488
|
+
});
|
|
489
|
+
//container
|
|
490
|
+
const container = HTMLElements.GetElement(`#${this._id}-container`);
|
|
491
|
+
container?.addEventListener('click', (event) => {
|
|
492
|
+
event.stopPropagation();
|
|
493
|
+
event.preventDefault();
|
|
494
|
+
this._pickerButton?.click();
|
|
495
|
+
});
|
|
496
|
+
container?.addEventListener('mouseenter', () => this._isOverMenu.set(true));
|
|
497
|
+
container?.addEventListener('mouseleave', () => this._isOverMenu.set(false));
|
|
498
|
+
//input
|
|
499
|
+
this._input = HTMLElements.GetElement(`#${this._id}`);
|
|
500
|
+
this._input?.addEventListener('mousedown', (event) => {
|
|
501
|
+
event.stopPropagation();
|
|
502
|
+
event.preventDefault();
|
|
503
|
+
this._pickerButton?.click();
|
|
504
|
+
});
|
|
505
|
+
this._input?.addEventListener('focus', () => {
|
|
506
|
+
if (!this._isOpen()) {
|
|
507
|
+
this._input?.blur();
|
|
508
|
+
Tools.Sleep().then(_ => {
|
|
509
|
+
HTMLElements.RemoveClass(`#${this._id}-coer-date-box div.mdc-line-ripple`, 'actived-component');
|
|
510
|
+
HTMLElements.RemoveClass(`#${this._id}-coer-date-box div.mdc-line-ripple`, 'mdc-line-ripple--active');
|
|
511
|
+
HTMLElements.RemoveClass(`#${this._id}-coer-date-box div.mdc-line-ripple`, 'mdc-line-ripple--deactivating');
|
|
512
|
+
});
|
|
513
|
+
}
|
|
514
|
+
});
|
|
515
|
+
//Document
|
|
516
|
+
document.addEventListener('click', () => {
|
|
517
|
+
if (this._isOpen() && !this._isOverMenu())
|
|
518
|
+
this._Close();
|
|
519
|
+
});
|
|
475
520
|
});
|
|
476
521
|
}
|
|
477
522
|
//OnDestroy
|
|
478
523
|
ngOnDestroy() {
|
|
479
|
-
this.
|
|
524
|
+
this._effectValue?.destroy();
|
|
525
|
+
this._effectExternalButton?.destroy();
|
|
526
|
+
this._effectComponentSignal?.destroy();
|
|
527
|
+
if (this._isOpen())
|
|
528
|
+
this._Close();
|
|
480
529
|
}
|
|
481
530
|
//getter
|
|
482
|
-
get
|
|
483
|
-
return this.
|
|
531
|
+
get _showexternalButtonLeft() {
|
|
532
|
+
return this._externalButton().show
|
|
533
|
+
&& Tools.IsNotNull(this._externalButton()?.position)
|
|
534
|
+
&& this._externalButton()?.position === 'left'
|
|
535
|
+
&& !this.isLoading()
|
|
536
|
+
&& !this.isInvisible();
|
|
484
537
|
}
|
|
485
538
|
//getter
|
|
486
|
-
get
|
|
487
|
-
return
|
|
539
|
+
get _showexternalButtonRight() {
|
|
540
|
+
return this._externalButton().show
|
|
541
|
+
&& ((Tools.IsNull(this._externalButton()?.position) || this._externalButton()?.position === 'right'))
|
|
542
|
+
&& !this.isLoading()
|
|
543
|
+
&& !this.isInvisible();
|
|
544
|
+
}
|
|
545
|
+
//getter
|
|
546
|
+
get _externalButtonIcon() {
|
|
547
|
+
return Tools.IsNotOnlyWhiteSpace(this._externalButton()?.icon)
|
|
548
|
+
? this._externalButton().icon : 'pointer';
|
|
549
|
+
}
|
|
550
|
+
//getter
|
|
551
|
+
get _isDisabledExternalButton() {
|
|
552
|
+
return Tools.IsNotNull(this._externalButton()?.isDisabled)
|
|
553
|
+
? this._externalButton().isDisabled : false;
|
|
488
554
|
}
|
|
489
555
|
//ControlValueAccessor
|
|
490
556
|
SetValue(value) {
|
|
@@ -515,58 +581,85 @@ class CoerDateBox extends ControlValue {
|
|
|
515
581
|
}
|
|
516
582
|
}
|
|
517
583
|
/** */
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
this._isLoadingEvent.set(true);
|
|
523
|
-
this._isOpen = false;
|
|
524
|
-
Tools.Sleep().then(_ => {
|
|
525
|
-
if (this._input) {
|
|
526
|
-
this._input.blur();
|
|
527
|
-
Tools.Sleep().then(_ => {
|
|
528
|
-
const element = document.querySelector(`#${this._id}-container .mdc-line-ripple--active`);
|
|
529
|
-
if (element)
|
|
530
|
-
element.classList.remove('mdc-line-ripple--active');
|
|
531
|
-
});
|
|
532
|
-
}
|
|
533
|
-
this._isLoadingEvent.set(false);
|
|
584
|
+
Focus(open = true, delay = 0) {
|
|
585
|
+
Tools.Sleep(delay).then(_ => {
|
|
586
|
+
if (open)
|
|
587
|
+
this._Open();
|
|
534
588
|
});
|
|
535
589
|
}
|
|
536
590
|
/** */
|
|
537
|
-
|
|
538
|
-
if (this._isEnable() && this.
|
|
591
|
+
async _Open() {
|
|
592
|
+
if (this._isEnable() && !this._isOpen()) {
|
|
593
|
+
if (componentContentSIGNAL().length > 0 && componentContentSIGNAL() != this._id) {
|
|
594
|
+
const container = HTMLElements.GetElement('.cdk-overlay-container');
|
|
595
|
+
container?.replaceChildren();
|
|
596
|
+
await Tools.Sleep(500);
|
|
597
|
+
}
|
|
539
598
|
this._datepicker()?.open();
|
|
540
|
-
|
|
599
|
+
await Tools.Sleep();
|
|
600
|
+
HTMLElements.AddClass(`#${this._id}-coer-date-box div.mdc-line-ripple`, 'actived-component');
|
|
601
|
+
await Tools.Sleep();
|
|
602
|
+
HTMLElements.AddClass(`#${this._id}-coer-date-box div.mdc-line-ripple`, 'mdc-line-ripple--active');
|
|
603
|
+
await Tools.Sleep();
|
|
604
|
+
HTMLElements.AddClass(`#${this._id}-coer-date-box label.mdc-floating-label`, 'mdc-floating-label--float-above');
|
|
605
|
+
this._pickerContent = HTMLElements.GetElement('mat-datepicker-content');
|
|
606
|
+
this._pickerContent?.addEventListener('mouseenter', () => this._isOverMenu.set(true));
|
|
607
|
+
this._pickerContent?.addEventListener('mouseleave', () => this._isOverMenu.set(false));
|
|
608
|
+
componentContentSIGNAL.set(this._id);
|
|
609
|
+
this._isOpen.set(true);
|
|
541
610
|
this.onOpen.emit();
|
|
542
611
|
}
|
|
543
|
-
else
|
|
544
|
-
this._Blur();
|
|
545
612
|
}
|
|
546
613
|
/** */
|
|
547
|
-
|
|
548
|
-
|
|
614
|
+
Blur() {
|
|
615
|
+
this._Close();
|
|
616
|
+
}
|
|
617
|
+
/** */
|
|
618
|
+
async _Close() {
|
|
619
|
+
if (this._isOpen()) {
|
|
620
|
+
componentContentSIGNAL.set('');
|
|
621
|
+
this._pickerContent = null;
|
|
549
622
|
this._datepicker()?.close();
|
|
550
|
-
|
|
551
|
-
this.
|
|
623
|
+
await Tools.Sleep();
|
|
624
|
+
this._input?.blur();
|
|
625
|
+
await Tools.Sleep();
|
|
626
|
+
HTMLElements.RemoveClass(`#${this._id}-coer-date-box div.mdc-line-ripple`, 'actived-component');
|
|
627
|
+
await Tools.Sleep();
|
|
628
|
+
HTMLElements.RemoveClass(`#${this._id}-coer-date-box div.mdc-line-ripple`, 'mdc-line-ripple--active');
|
|
629
|
+
await Tools.Sleep();
|
|
630
|
+
HTMLElements.RemoveClass(`#${this._id}-coer-date-box div.mdc-line-ripple`, 'mdc-line-ripple--deactivating');
|
|
631
|
+
if (Tools.IsOnlyWhiteSpace(this._value)) {
|
|
632
|
+
await Tools.Sleep();
|
|
633
|
+
HTMLElements.RemoveClass(`#${this._id}-coer-date-box label.mdc-floating-label`, 'mdc-floating-label--float-above');
|
|
634
|
+
}
|
|
635
|
+
if (this._isOpen())
|
|
636
|
+
this.onClose.emit();
|
|
637
|
+
this._isOpen.set(false);
|
|
552
638
|
}
|
|
553
639
|
}
|
|
554
640
|
/** */
|
|
555
641
|
Unselect() {
|
|
556
642
|
this.SetValue(null);
|
|
643
|
+
this._Close();
|
|
644
|
+
}
|
|
645
|
+
/** */
|
|
646
|
+
_dateInput() {
|
|
647
|
+
this._isOverOption.set(true);
|
|
648
|
+
this._pickerButton?.click();
|
|
649
|
+
Tools.Sleep().then(_ => this._isOverOption.set(false));
|
|
557
650
|
}
|
|
558
651
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerDateBox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
559
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerDateBox, isStandalone: false, selector: "coer-datebox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOpen: "onOpen", onClose: "onClose", onChangeValue: "onChangeValue" }, providers: [
|
|
652
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerDateBox, isStandalone: false, selector: "coer-datebox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, isWritable: { classPropertyName: "isWritable", publicName: "isWritable", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOpen: "onOpen", onClose: "onClose", onChangeValue: "onChangeValue", onClickExternalButton: "onClickExternalButton" }, providers: [
|
|
560
653
|
provideNativeDateAdapter(),
|
|
561
654
|
CONTROL_VALUE(CoerDateBox),
|
|
562
|
-
], viewQueries: [{ propertyName: "_datepicker", first: true, predicate: ["datepicker"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div
|
|
655
|
+
], viewQueries: [{ propertyName: "_datepicker", first: true, predicate: ["datepicker"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"_id + '-coer-date-box'\" class=\"coer-form-field-component\"> \r\n <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n width : width(), \r\n minWidth : minWidth(), \r\n maxWidth : maxWidth(),\r\n marginTop : marginTop(),\r\n marginRight : marginRight(),\r\n marginBottom: marginBottom(),\r\n marginLeft : marginLeft()\r\n }\">\r\n \r\n @if(_showexternalButtonLeft) {\r\n <div class=\"external-button-container-left\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n \r\n <mat-form-field \r\n [id]=\"_id + '-container'\"\r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'width-100' : true,\r\n 'readonly' : isReadonly() && !isLoading(),\r\n 'display-none': isInvisible() || isLoading()\r\n }\"\r\n [style]=\"{ \r\n 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\">\r\n \r\n <mat-label> {{ label() }} </mat-label>\r\n \r\n <input #coerTextBox matInput \r\n [id]=\"_id\"\r\n [placeholder]=\"placeholder()\"\r\n [matDatepicker]=\"datepicker\" \r\n [disabled]=\"!_isEnable()\"\r\n [readonly]=\"!isWritable()\"\r\n [value]=\"_value\"\r\n (dateChange)=\"SetValue(coerTextBox.value)\"\r\n (dateInput)=\"_dateInput()\"\r\n [style]=\"{ \r\n 'margin-top' : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight(),\r\n 'text-align' : textPosition()\r\n }\">\r\n \r\n <mat-datepicker #datepicker (closed)=\"_pickerButton?.click()\"></mat-datepicker>\r\n \r\n @if(!isLoading()) { \r\n <mat-datepicker-toggle matSuffix [for]=\"datepicker\" [disabled]=\"!_isEnable()\">\r\n <mat-icon matDatepickerToggleIcon>\r\n <i class=\"icon-calendar-days icon-fill\"></i> \r\n </mat-icon>\r\n </mat-datepicker-toggle>\r\n } \r\n \r\n @if(isInvalid() || isValid()) {\r\n <span ngClass=\"icon-container\">\r\n @if(isInvalid() && !isDisabled() && !isLoading()) {\r\n <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n }\r\n \r\n @else if(isValid() && !isDisabled() && !isLoading()) {\r\n <i class=\"icon-circle-check icon-fill\"></i>\r\n }\r\n </span>\r\n }\r\n </mat-form-field> \r\n \r\n <!-- Loading || Invisible -->\r\n @if(isLoading() || isInvisible()) {\r\n <div [ngClass]=\"{ \r\n 'loading' : isLoading(),\r\n 'invisible' : isInvisible() \r\n }\" \r\n [style]=\"{ \r\n 'width' : width(),\r\n 'min-width' : minWidth(),\r\n 'max-width' : maxWidth(),\r\n 'margin-top' : marginTop(),\r\n 'margin-right' : marginRight(),\r\n 'margin-bottom': marginBottom(),\r\n 'margin-left' : marginLeft(),\r\n 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\"\r\n > {{ isInvisible() ? '' : _value }} </div>\r\n }\r\n \r\n @if(_showexternalButtonRight) {\r\n <div class=\"external-button-container-right\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n </div>\r\n</div> ", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i2$3.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
|
|
563
656
|
}
|
|
564
657
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerDateBox, decorators: [{
|
|
565
658
|
type: Component,
|
|
566
659
|
args: [{ selector: 'coer-datebox', providers: [
|
|
567
660
|
provideNativeDateAdapter(),
|
|
568
661
|
CONTROL_VALUE(CoerDateBox),
|
|
569
|
-
], standalone: false, template: "<div
|
|
662
|
+
], standalone: false, template: "<div [id]=\"_id + '-coer-date-box'\" class=\"coer-form-field-component\"> \r\n <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n width : width(), \r\n minWidth : minWidth(), \r\n maxWidth : maxWidth(),\r\n marginTop : marginTop(),\r\n marginRight : marginRight(),\r\n marginBottom: marginBottom(),\r\n marginLeft : marginLeft()\r\n }\">\r\n \r\n @if(_showexternalButtonLeft) {\r\n <div class=\"external-button-container-left\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n \r\n <mat-form-field \r\n [id]=\"_id + '-container'\"\r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'width-100' : true,\r\n 'readonly' : isReadonly() && !isLoading(),\r\n 'display-none': isInvisible() || isLoading()\r\n }\"\r\n [style]=\"{ \r\n 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\">\r\n \r\n <mat-label> {{ label() }} </mat-label>\r\n \r\n <input #coerTextBox matInput \r\n [id]=\"_id\"\r\n [placeholder]=\"placeholder()\"\r\n [matDatepicker]=\"datepicker\" \r\n [disabled]=\"!_isEnable()\"\r\n [readonly]=\"!isWritable()\"\r\n [value]=\"_value\"\r\n (dateChange)=\"SetValue(coerTextBox.value)\"\r\n (dateInput)=\"_dateInput()\"\r\n [style]=\"{ \r\n 'margin-top' : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight(),\r\n 'text-align' : textPosition()\r\n }\">\r\n \r\n <mat-datepicker #datepicker (closed)=\"_pickerButton?.click()\"></mat-datepicker>\r\n \r\n @if(!isLoading()) { \r\n <mat-datepicker-toggle matSuffix [for]=\"datepicker\" [disabled]=\"!_isEnable()\">\r\n <mat-icon matDatepickerToggleIcon>\r\n <i class=\"icon-calendar-days icon-fill\"></i> \r\n </mat-icon>\r\n </mat-datepicker-toggle>\r\n } \r\n \r\n @if(isInvalid() || isValid()) {\r\n <span ngClass=\"icon-container\">\r\n @if(isInvalid() && !isDisabled() && !isLoading()) {\r\n <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n }\r\n \r\n @else if(isValid() && !isDisabled() && !isLoading()) {\r\n <i class=\"icon-circle-check icon-fill\"></i>\r\n }\r\n </span>\r\n }\r\n </mat-form-field> \r\n \r\n <!-- Loading || Invisible -->\r\n @if(isLoading() || isInvisible()) {\r\n <div [ngClass]=\"{ \r\n 'loading' : isLoading(),\r\n 'invisible' : isInvisible() \r\n }\" \r\n [style]=\"{ \r\n 'width' : width(),\r\n 'min-width' : minWidth(),\r\n 'max-width' : maxWidth(),\r\n 'margin-top' : marginTop(),\r\n 'margin-right' : marginRight(),\r\n 'margin-bottom': marginBottom(),\r\n 'margin-left' : marginLeft(),\r\n 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\"\r\n > {{ isInvisible() ? '' : _value }} </div>\r\n }\r\n \r\n @if(_showexternalButtonRight) {\r\n <div class=\"external-button-container-right\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n </div>\r\n</div> " }]
|
|
570
663
|
}], ctorParameters: () => [] });
|
|
571
664
|
|
|
572
665
|
class CoerModal {
|
|
@@ -586,6 +679,7 @@ class CoerModal {
|
|
|
586
679
|
this.width = input('small');
|
|
587
680
|
this.height = input('auto');
|
|
588
681
|
this.maxHeight = input('');
|
|
682
|
+
this.verticalPosition = input('middle');
|
|
589
683
|
//Outputs
|
|
590
684
|
this.onOpen = output();
|
|
591
685
|
this.onClose = output();
|
|
@@ -668,11 +762,11 @@ class CoerModal {
|
|
|
668
762
|
}
|
|
669
763
|
}
|
|
670
764
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerModal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
671
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerModal, isStandalone: false, selector: "coer-modal", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOpen: "onOpen", onClose: "onClose" }, queries: [{ propertyName: "contentRef", predicate: CoerRefDirective, isSignal: true }], ngImport: i0, template: "<aside title='' [id]=\"_id\" class=\"modal fade\" data-bs-backdrop=\"static\" tabindex=\"-1\">\r\n <div
|
|
765
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerModal, isStandalone: false, selector: "coer-modal", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, verticalPosition: { classPropertyName: "verticalPosition", publicName: "verticalPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOpen: "onOpen", onClose: "onClose" }, queries: [{ propertyName: "contentRef", predicate: CoerRefDirective, isSignal: true }], ngImport: i0, template: "<aside title='' [id]=\"_id\" class=\"modal fade\" data-bs-backdrop=\"static\" tabindex=\"-1\">\r\n <div [ngClass]=\"{\r\n 'modal-dialog': true,\r\n 'modal-dialog-scrollable': true, \r\n 'modal-dialog-top' : verticalPosition() == 'top',\r\n 'modal-dialog-middle' : verticalPosition() == 'middle',\r\n 'modal-dialog-bottom' : verticalPosition() == 'bottom',\r\n }\" \r\n [ngStyle]=\"{ 'max-width': _width() }\">\r\n <div class=\"modal-content\">\r\n @if(IsNull(_header()) || (IsNotNull(_header()) && _header()?.show())) {\r\n <header class=\"modal-header\">\r\n <h6 class=\"modal-title\">\r\n <i [class]=\"_icon()\"></i>\r\n <span [ngClass]=\"{ 'ms-1': _icon().length > 0 }\"> {{ _title() }} </span>\r\n </h6>\r\n\r\n @if(showCloseButton()) {\r\n <button [id]=\"_id + '-button-close'\" type=\"button\" class=\"btn-close\" (click)=\"Close()\"></button>\r\n }\r\n </header>\r\n }\r\n\r\n <section class=\"modal-body\" [ngStyle]=\"{ 'height': height(), 'max-height': maxHeight() }\">\r\n @if(IsNotNull(_body()) && _body()?.show()) {\r\n <ng-container [ngTemplateOutlet]=\"_body()!.template\"></ng-container>\r\n }\r\n\r\n @else {\r\n <ng-content></ng-content>\r\n }\r\n </section>\r\n\r\n @if(IsNotNull(_footer())) {\r\n <footer class=\"modal-footer\">\r\n @if(_footer()?.show()) {\r\n <ng-container [ngTemplateOutlet]=\"_footer()!.template\"></ng-container>\r\n }\r\n </footer>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n</aside>", styles: ["aside.modal div.backdrop{min-width:100vw;min-height:100vh;position:fixed;inset:0;background-color:#0000005b;z-index:1500}aside.modal .modal-dialog{margin:auto!important;height:auto!important;min-height:100vh!important;display:flex!important}aside.modal .modal-dialog div.modal-content{z-index:1501;overflow:unset!important;margin:15px!important}aside.modal .modal-dialog div.modal-content .modal-header{padding:8px 16px!important}aside.modal .modal-dialog div.modal-content .modal-header .modal-title{font-weight:700!important;font-size:17px!important}aside.modal .modal-dialog div.modal-content .modal-header .btn-close:focus{box-shadow:none!important}aside.modal .modal-dialog div.modal-content .modal-body{padding-top:16px!important;padding-bottom:0!important;min-width:60px!important;overflow:visible!important}aside.modal .modal-dialog div.modal-content .modal-footer{border:none!important;display:flex!important;align-items:flex-end!important;justify-content:flex-end!important;max-height:64px!important;min-height:64px!important;gap:10px!important}aside.modal .modal-dialog-top{align-items:flex-start!important}aside.modal .modal-dialog-middle{align-items:center!important}aside.modal .modal-dialog-bottom{align-items:flex-end!important}div.modal-backdrop{z-index:0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
672
766
|
}
|
|
673
767
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerModal, decorators: [{
|
|
674
768
|
type: Component,
|
|
675
|
-
args: [{ selector: 'coer-modal', standalone: false, template: "<aside title='' [id]=\"_id\" class=\"modal fade\" data-bs-backdrop=\"static\" tabindex=\"-1\">\r\n <div
|
|
769
|
+
args: [{ selector: 'coer-modal', standalone: false, template: "<aside title='' [id]=\"_id\" class=\"modal fade\" data-bs-backdrop=\"static\" tabindex=\"-1\">\r\n <div [ngClass]=\"{\r\n 'modal-dialog': true,\r\n 'modal-dialog-scrollable': true, \r\n 'modal-dialog-top' : verticalPosition() == 'top',\r\n 'modal-dialog-middle' : verticalPosition() == 'middle',\r\n 'modal-dialog-bottom' : verticalPosition() == 'bottom',\r\n }\" \r\n [ngStyle]=\"{ 'max-width': _width() }\">\r\n <div class=\"modal-content\">\r\n @if(IsNull(_header()) || (IsNotNull(_header()) && _header()?.show())) {\r\n <header class=\"modal-header\">\r\n <h6 class=\"modal-title\">\r\n <i [class]=\"_icon()\"></i>\r\n <span [ngClass]=\"{ 'ms-1': _icon().length > 0 }\"> {{ _title() }} </span>\r\n </h6>\r\n\r\n @if(showCloseButton()) {\r\n <button [id]=\"_id + '-button-close'\" type=\"button\" class=\"btn-close\" (click)=\"Close()\"></button>\r\n }\r\n </header>\r\n }\r\n\r\n <section class=\"modal-body\" [ngStyle]=\"{ 'height': height(), 'max-height': maxHeight() }\">\r\n @if(IsNotNull(_body()) && _body()?.show()) {\r\n <ng-container [ngTemplateOutlet]=\"_body()!.template\"></ng-container>\r\n }\r\n\r\n @else {\r\n <ng-content></ng-content>\r\n }\r\n </section>\r\n\r\n @if(IsNotNull(_footer())) {\r\n <footer class=\"modal-footer\">\r\n @if(_footer()?.show()) {\r\n <ng-container [ngTemplateOutlet]=\"_footer()!.template\"></ng-container>\r\n }\r\n </footer>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n</aside>", styles: ["aside.modal div.backdrop{min-width:100vw;min-height:100vh;position:fixed;inset:0;background-color:#0000005b;z-index:1500}aside.modal .modal-dialog{margin:auto!important;height:auto!important;min-height:100vh!important;display:flex!important}aside.modal .modal-dialog div.modal-content{z-index:1501;overflow:unset!important;margin:15px!important}aside.modal .modal-dialog div.modal-content .modal-header{padding:8px 16px!important}aside.modal .modal-dialog div.modal-content .modal-header .modal-title{font-weight:700!important;font-size:17px!important}aside.modal .modal-dialog div.modal-content .modal-header .btn-close:focus{box-shadow:none!important}aside.modal .modal-dialog div.modal-content .modal-body{padding-top:16px!important;padding-bottom:0!important;min-width:60px!important;overflow:visible!important}aside.modal .modal-dialog div.modal-content .modal-footer{border:none!important;display:flex!important;align-items:flex-end!important;justify-content:flex-end!important;max-height:64px!important;min-height:64px!important;gap:10px!important}aside.modal .modal-dialog-top{align-items:flex-start!important}aside.modal .modal-dialog-middle{align-items:center!important}aside.modal .modal-dialog-bottom{align-items:flex-end!important}div.modal-backdrop{z-index:0!important}\n"] }]
|
|
676
770
|
}] });
|
|
677
771
|
|
|
678
772
|
class CoerFileboxImage {
|
|
@@ -807,7 +901,7 @@ class CoerFileboxImage {
|
|
|
807
901
|
this._modal().Open();
|
|
808
902
|
}
|
|
809
903
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerFileboxImage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
810
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerFileboxImage, isStandalone: false, selector: "coer-filebox-image", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelected: "onSelected", onDeleteImage: "onDeleteImage" }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "_modal", first: true, predicate: ["modal"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"coer-filebox-image\">\r\n <figure (click)=\"(_isEnable() && !isReadonly()) ? _ClickImage(input) : null\" \r\n [ngClass]=\"{ \r\n 'dashed': _figureDashed(),\r\n 'cursor-pointer': true \r\n }\"\r\n [ngStyle]=\"{\r\n 'margin-top' : _image()?.marginTop || '',\r\n 'margin-right' : _image()?.marginRight || '',\r\n 'margin-bottom': _image()?.marginBottom || '',\r\n 'margin-left' : _image()?.marginLeft || '',\r\n 'display' : isInvisible() ? 'none' : '',\r\n 'width' : _figureWidth()\r\n }\">\r\n \r\n @if(_isLoading()) {\r\n <div class=\"loading\">\r\n <i class=\"spinner-border\"></i>\r\n </div>\r\n \r\n <div class=\"placeholder-glow\">\r\n <span class=\"placeholder\"></span>\r\n </div>\r\n }\r\n \r\n <img [src]=\"_base64() | noImage\"\r\n [ngStyle]=\"{\r\n 'width' : _image()?.width || '',\r\n 'max-width' : _image()?.maxWidth || '',\r\n 'height' : _image()?.height || '',\r\n 'max-height': _image()?.maxHeight || '210px'\r\n }\">\r\n \r\n <input #input\r\n type=\"file\"\r\n [accept]=\"_accept\"\r\n (change)=\"_SelectImages($event)\"\r\n (cancel)=\"_isLoadingInner.set(false)\"\r\n [multiple]=\"multiple()\">\r\n \r\n @if(_showTrashButton() || _showExpandButton()) {\r\n <div class=\"icon-container\">\r\n @if(_showTrashButton()) {\r\n <i class=\"icon-trash-can icon-fill\" (click)=\"_DeleteImage($event)\"></i>\r\n }\r\n \r\n @if(_showExpandButton()) {\r\n <i class=\"icon-expand\" (click)=\"_ExpandImage($event)\"></i>\r\n }\r\n </div>\r\n }\r\n </figure>\r\n \r\n @if(isInvisible()) {\r\n <figure [ngStyle]=\"{\r\n 'margin-top' : _image()?.marginTop || '',\r\n 'margin-right' : _image()?.marginRight || '',\r\n 'margin-bottom': _image()?.marginBottom || '',\r\n 'margin-left' : _image()?.marginLeft || '',\r\n 'width' : _figureWidth()\r\n }\"> \r\n \r\n <img [ngStyle]=\"{\r\n 'width' : _image()?.width || '',\r\n 'max-width' : _image()?.maxWidth || '',\r\n 'height' : _image()?.height || '',\r\n 'max-height': _image()?.maxHeight || '210px',\r\n 'display' : 'none'\r\n }\">\r\n </figure>\r\n }\r\n \r\n <!-- Modal -->\r\n <coer-modal #modal [title]=\"_image()?.name || ''\" height=\"90vh\" width=\"full\">\r\n <div class=\"modal-image\" [ngStyle]=\"{ 'background-image': 'url(' + _base64() + ')' }\"></div>\r\n </coer-modal>\r\n</div>", styles: ["div.coer-filebox-image figure{position:relative;display:flex;align-items:center;justify-content:center;border-radius:3px;overflow:hidden;min-height:210px;z-index:1}div.coer-filebox-image figure div.loading{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important;cursor:default!important}div.coer-filebox-image figure div.loading i.spinner-border{color:var(--primary-inner)!important;width:70px!important;height:70px!important;font-size:20px!important;position:absolute!important}div.coer-filebox-image figure span.placeholder-glow span.placeholder{width:calc(100% + 32px)!important;height:100%!important;position:absolute!important;z-index:1!important;top:0!important;left:-16px!important;cursor:wait!important}div.coer-filebox-image figure img{min-width:100px!important;min-height:100px!important}div.coer-filebox-image figure div.icon-container{position:absolute;bottom:5px;right:5px;z-index:2;display:flex;align-items:center;justify-content:flex-end;gap:7px}div.coer-filebox-image figure div.icon-container i{color:var(--gray);font-size:20px}div.coer-filebox-image figure div.icon-container i:hover{zoom:1.1}div.coer-filebox-image .dashed{border:1px dashed var(--gray)!important;background-color:transparent!important}div.coer-filebox-image div.modal-image{width:100%;height:100%;border-bottom-left-radius:5px;border-bottom-right-radius:5px;background-size:contain;background-repeat:no-repeat;background-position:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CoerModal, selector: "coer-modal", inputs: ["id", "title", "icon", "showCloseButton", "width", "height", "maxHeight"], outputs: ["onOpen", "onClose"] }, { kind: "pipe", type: i9.NoImagePipe, name: "noImage" }] }); }
|
|
904
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerFileboxImage, isStandalone: false, selector: "coer-filebox-image", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelected: "onSelected", onDeleteImage: "onDeleteImage" }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "_modal", first: true, predicate: ["modal"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"coer-filebox-image\">\r\n <figure (click)=\"(_isEnable() && !isReadonly()) ? _ClickImage(input) : null\" \r\n [ngClass]=\"{ \r\n 'dashed': _figureDashed(),\r\n 'cursor-pointer': true \r\n }\"\r\n [ngStyle]=\"{\r\n 'margin-top' : _image()?.marginTop || '',\r\n 'margin-right' : _image()?.marginRight || '',\r\n 'margin-bottom': _image()?.marginBottom || '',\r\n 'margin-left' : _image()?.marginLeft || '',\r\n 'display' : isInvisible() ? 'none' : '',\r\n 'width' : _figureWidth()\r\n }\">\r\n \r\n @if(_isLoading()) {\r\n <div class=\"loading\">\r\n <i class=\"spinner-border\"></i>\r\n </div>\r\n \r\n <div class=\"placeholder-glow\">\r\n <span class=\"placeholder\"></span>\r\n </div>\r\n }\r\n \r\n <img [src]=\"_base64() | noImage\"\r\n [ngStyle]=\"{\r\n 'width' : _image()?.width || '',\r\n 'max-width' : _image()?.maxWidth || '',\r\n 'height' : _image()?.height || '',\r\n 'max-height': _image()?.maxHeight || '210px'\r\n }\">\r\n \r\n <input #input\r\n type=\"file\"\r\n [accept]=\"_accept\"\r\n (change)=\"_SelectImages($event)\"\r\n (cancel)=\"_isLoadingInner.set(false)\"\r\n [multiple]=\"multiple()\">\r\n \r\n @if(_showTrashButton() || _showExpandButton()) {\r\n <div class=\"icon-container\">\r\n @if(_showTrashButton()) {\r\n <i class=\"icon-trash-can icon-fill\" (click)=\"_DeleteImage($event)\"></i>\r\n }\r\n \r\n @if(_showExpandButton()) {\r\n <i class=\"icon-expand\" (click)=\"_ExpandImage($event)\"></i>\r\n }\r\n </div>\r\n }\r\n </figure>\r\n \r\n @if(isInvisible()) {\r\n <figure [ngStyle]=\"{\r\n 'margin-top' : _image()?.marginTop || '',\r\n 'margin-right' : _image()?.marginRight || '',\r\n 'margin-bottom': _image()?.marginBottom || '',\r\n 'margin-left' : _image()?.marginLeft || '',\r\n 'width' : _figureWidth()\r\n }\"> \r\n \r\n <img [ngStyle]=\"{\r\n 'width' : _image()?.width || '',\r\n 'max-width' : _image()?.maxWidth || '',\r\n 'height' : _image()?.height || '',\r\n 'max-height': _image()?.maxHeight || '210px',\r\n 'display' : 'none'\r\n }\">\r\n </figure>\r\n }\r\n \r\n <!-- Modal -->\r\n <coer-modal #modal [title]=\"_image()?.name || ''\" height=\"90vh\" width=\"full\">\r\n <div class=\"modal-image\" [ngStyle]=\"{ 'background-image': 'url(' + _base64() + ')' }\"></div>\r\n </coer-modal>\r\n</div>", styles: ["div.coer-filebox-image figure{position:relative;display:flex;align-items:center;justify-content:center;border-radius:3px;overflow:hidden;min-height:210px;z-index:1}div.coer-filebox-image figure div.loading{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important;cursor:default!important}div.coer-filebox-image figure div.loading i.spinner-border{color:var(--primary-inner)!important;width:70px!important;height:70px!important;font-size:20px!important;position:absolute!important}div.coer-filebox-image figure span.placeholder-glow span.placeholder{width:calc(100% + 32px)!important;height:100%!important;position:absolute!important;z-index:1!important;top:0!important;left:-16px!important;cursor:wait!important}div.coer-filebox-image figure img{min-width:100px!important;min-height:100px!important}div.coer-filebox-image figure div.icon-container{position:absolute;bottom:5px;right:5px;z-index:2;display:flex;align-items:center;justify-content:flex-end;gap:7px}div.coer-filebox-image figure div.icon-container i{color:var(--gray);font-size:20px}div.coer-filebox-image figure div.icon-container i:hover{zoom:1.1}div.coer-filebox-image .dashed{border:1px dashed var(--gray)!important;background-color:transparent!important}div.coer-filebox-image div.modal-image{width:100%;height:100%;border-bottom-left-radius:5px;border-bottom-right-radius:5px;background-size:contain;background-repeat:no-repeat;background-position:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CoerModal, selector: "coer-modal", inputs: ["id", "title", "icon", "showCloseButton", "width", "height", "maxHeight", "verticalPosition"], outputs: ["onOpen", "onClose"] }, { kind: "pipe", type: i9.NoImagePipe, name: "noImage" }] }); }
|
|
811
905
|
}
|
|
812
906
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerFileboxImage, decorators: [{
|
|
813
907
|
type: Component,
|
|
@@ -952,8 +1046,6 @@ class CoerNumberBox extends ControlValue {
|
|
|
952
1046
|
//Constructor
|
|
953
1047
|
constructor() {
|
|
954
1048
|
super();
|
|
955
|
-
//Injections
|
|
956
|
-
this._alert = inject(CoerAlert);
|
|
957
1049
|
//Elements
|
|
958
1050
|
this._coerNumberbox = viewChild.required('coerNumberbox');
|
|
959
1051
|
//Variables
|
|
@@ -961,7 +1053,7 @@ class CoerNumberBox extends ControlValue {
|
|
|
961
1053
|
this._id = Tools.GetGuid('coer-numberbox');
|
|
962
1054
|
this._isLoadingEvent = signal(false);
|
|
963
1055
|
this._externalButton = signal({ show: false });
|
|
964
|
-
this._hideCaret = false;
|
|
1056
|
+
this._hideCaret = signal(false);
|
|
965
1057
|
//Inputs
|
|
966
1058
|
this.id = input('');
|
|
967
1059
|
this.value = input(null);
|
|
@@ -992,7 +1084,7 @@ class CoerNumberBox extends ControlValue {
|
|
|
992
1084
|
this.onClickExternalButton = output();
|
|
993
1085
|
//computed
|
|
994
1086
|
this._isEnable = computed(() => {
|
|
995
|
-
return !this.isDisabled() && !this.isLoading() && !this.isReadonly();
|
|
1087
|
+
return !this.isDisabled() && !this.isLoading() && !this.isReadonly() && !this.isInvisible();
|
|
996
1088
|
});
|
|
997
1089
|
//computed
|
|
998
1090
|
this._floatLabel = computed(() => {
|
|
@@ -1000,7 +1092,7 @@ class CoerNumberBox extends ControlValue {
|
|
|
1000
1092
|
});
|
|
1001
1093
|
//computed
|
|
1002
1094
|
this._paddingRight = computed(() => {
|
|
1003
|
-
return this.isInvalid() || this.isValid()
|
|
1095
|
+
return this._isEnable() && (this.isInvalid() || this.isValid())
|
|
1004
1096
|
? '18px' : '0px';
|
|
1005
1097
|
});
|
|
1006
1098
|
this._effectValue = effect(() => {
|
|
@@ -1032,15 +1124,23 @@ class CoerNumberBox extends ControlValue {
|
|
|
1032
1124
|
this.onKeyupEnter.emit(value);
|
|
1033
1125
|
this.Blur();
|
|
1034
1126
|
}
|
|
1127
|
+
if (key === 'ArrowUp' || key === 'ArrowDown') {
|
|
1128
|
+
this._hideCaret.set(false);
|
|
1129
|
+
this._element.focus();
|
|
1130
|
+
this._element.select();
|
|
1131
|
+
}
|
|
1132
|
+
}
|
|
1133
|
+
});
|
|
1134
|
+
this._element.addEventListener('keydown', (event) => {
|
|
1135
|
+
if (this._isEnable()) {
|
|
1136
|
+
const { key } = event;
|
|
1035
1137
|
if (key === 'ArrowUp') {
|
|
1036
|
-
this._hideCaret
|
|
1138
|
+
this._hideCaret.set(true);
|
|
1037
1139
|
this.SetValue(Number(this._value) + 1);
|
|
1038
|
-
Tools.Sleep(500, 'ArrowUp').then(() => this._hideCaret = false);
|
|
1039
1140
|
}
|
|
1040
1141
|
if (key === 'ArrowDown') {
|
|
1041
|
-
this._hideCaret
|
|
1142
|
+
this._hideCaret.set(true);
|
|
1042
1143
|
this.SetValue(Number(this._value) - 1);
|
|
1043
|
-
Tools.Sleep(500, 'ArrowDown').then(() => this._hideCaret = false);
|
|
1044
1144
|
}
|
|
1045
1145
|
}
|
|
1046
1146
|
});
|
|
@@ -1062,20 +1162,22 @@ class CoerNumberBox extends ControlValue {
|
|
|
1062
1162
|
this._effectExternalButton?.destroy();
|
|
1063
1163
|
}
|
|
1064
1164
|
//getter
|
|
1065
|
-
get
|
|
1165
|
+
get _showexternalButtonLeft() {
|
|
1066
1166
|
return this._externalButton().show
|
|
1067
1167
|
&& Tools.IsNotNull(this._externalButton()?.position)
|
|
1068
1168
|
&& this._externalButton()?.position === 'left'
|
|
1169
|
+
&& !this.isLoading()
|
|
1069
1170
|
&& !this.isInvisible();
|
|
1070
1171
|
}
|
|
1071
1172
|
//getter
|
|
1072
|
-
get
|
|
1173
|
+
get _showexternalButtonRight() {
|
|
1073
1174
|
return this._externalButton().show
|
|
1074
1175
|
&& ((Tools.IsNull(this._externalButton()?.position) || this._externalButton()?.position === 'right'))
|
|
1176
|
+
&& !this.isLoading()
|
|
1075
1177
|
&& !this.isInvisible();
|
|
1076
1178
|
}
|
|
1077
1179
|
//getter
|
|
1078
|
-
get
|
|
1180
|
+
get _externalButtonIcon() {
|
|
1079
1181
|
return Tools.IsNotOnlyWhiteSpace(this._externalButton()?.icon)
|
|
1080
1182
|
? this._externalButton().icon : 'pointer';
|
|
1081
1183
|
}
|
|
@@ -1119,7 +1221,6 @@ class CoerNumberBox extends ControlValue {
|
|
|
1119
1221
|
return '-0.';
|
|
1120
1222
|
}
|
|
1121
1223
|
else if (Number(value) < this.min()) {
|
|
1122
|
-
this._alert.Warning(`Minimum ${this.min()}`, 'Out of range', 'fa-solid fa-hashtag');
|
|
1123
1224
|
valueString = '0';
|
|
1124
1225
|
}
|
|
1125
1226
|
}
|
|
@@ -1162,11 +1263,9 @@ class CoerNumberBox extends ControlValue {
|
|
|
1162
1263
|
return String(value);
|
|
1163
1264
|
}
|
|
1164
1265
|
if (Number(value) < this.min()) {
|
|
1165
|
-
this._alert.Warning(`Minimum ${this.min()}`, 'Out of range', 'fa-solid fa-hashtag');
|
|
1166
1266
|
value = this.min();
|
|
1167
1267
|
}
|
|
1168
1268
|
if (Number(value) > this.max()) {
|
|
1169
|
-
this._alert.Warning(`Cannot exceed ${this.max()}`, 'Out of range', 'fa-solid fa-hashtag');
|
|
1170
1269
|
value = this.max();
|
|
1171
1270
|
}
|
|
1172
1271
|
if (this.decimals() <= 0) {
|
|
@@ -1210,11 +1309,11 @@ class CoerNumberBox extends ControlValue {
|
|
|
1210
1309
|
});
|
|
1211
1310
|
}
|
|
1212
1311
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerNumberBox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1213
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerNumberBox, isStandalone: false, selector: "coer-numberbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onKeyupEnter: "onKeyupEnter", onInput: "onInput", onClickExternalButton: "onClickExternalButton" }, providers: [CONTROL_VALUE(CoerNumberBox)], viewQueries: [{ propertyName: "_coerNumberbox", first: true, predicate: ["coerNumberbox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-number-box\">\r\n @if(_showButtonLeft) {\r\n <div class=\"button-container\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_buttonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n\r\n <mat-form-field\r\n [id]=\"_id + '-container'\"\r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'readonly': isReadonly() && !isLoading(),\r\n 'd-none': isInvisible()\r\n }\"\r\n [style]=\"{\r\n 'width': width(),\r\n 'min-width': minWidth(),\r\n 'max-width': maxWidth(),\r\n 'margin-top': marginTop(),\r\n 'margin-right': marginRight(),\r\n 'margin-bottom': marginBottom(),\r\n 'margin-left': marginLeft()\r\n }\">\r\n <mat-label>{{ label() }}</mat-label>\r\n\r\n <input #coerNumberbox matInput\r\n [id]=\"_id\"\r\n type=\"text\"\r\n [placeholder]=\"placeholder()\"\r\n [disabled]=\"!_isEnable()\"\r\n [value]=\"_value\"\r\n (input)=\"SetValue(coerNumberbox.value)\"\r\n (blur)=\"SetTouched(true)\"\r\n [ngClass]=\"{ 'caret-none': _hideCaret }\"\r\n [style]=\"{\r\n 'cursor': isLoading() ? 'wait' : null,\r\n 'margin-top': (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight(),\r\n 'text-align': textPosition()\r\n }\">\r\n\r\n @if(isLoading()) {\r\n <div class=\"placeholder-glow\">\r\n <span class=\"placeholder\"></span>\r\n </div>\r\n }\r\n\r\n <span ngClass=\"icon-container\">\r\n @if(isInvalid() && !isDisabled() && !isLoading()) {\r\n <i class=\"fa-solid fa-circle-exclamation\"></i>\r\n }\r\n\r\n @else if(isValid() && !isDisabled() && !isLoading()) {\r\n <i class=\"fa-solid fa-circle-check text-green\"></i>\r\n }\r\n </span>\r\n </mat-form-field>\r\n\r\n @if(isInvisible()) {\r\n <mat-form-field class=\"invisible\">\r\n <input matInput [disabled]=\"true\"> \r\n </mat-form-field> \r\n }\r\n\r\n @if(_showButtonRight) {\r\n <div class=\"button-container\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_buttonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n</div>", styles: ["div.coer-number-box{display:flex;align-items:center}div.coer-number-box mat-form-field{position:relative!important}div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:40px!important}div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix{width:100%!important;height:40px!important;padding:0!important}div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label{overflow:visible!important;position:absolute!important;top:20px!important}div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label.mdc-floating-label--float-above mat-label{color:var(--primary-inner);font-weight:700;position:relative;left:-10px;top:2px}div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input{font-weight:400!important;font-size:17px!important;color:var(--black)!important}div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input.caret-none{caret-color:transparent!important}div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:after{border-bottom-color:var(--primary-inner)!important}div.coer-number-box mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-number-box mat-form-field span.icon-container{position:absolute!important;top:1px!important;right:-14px!important;z-index:5!important;width:30px;height:40px;display:flex;align-items:center;justify-content:center}div.coer-number-box mat-form-field span.icon-container i{font-size:20px!important}div.coer-number-box mat-form-field span.icon-container i.fa-solid.fa-xmark,div.coer-number-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass{color:#caced1!important;cursor:pointer!important}div.coer-number-box mat-form-field span.icon-container i.fa-solid.fa-xmark:hover,div.coer-number-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass:hover{color:#6c757d!important}div.coer-number-box mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-number-box mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-number-box mat-form-field span.placeholder{width:calc(100% + 32px)!important;height:40px!important;position:absolute!important;z-index:1!important;top:0!important;left:-16px!important}div.coer-number-box mat-form-field .placeholder,div.coer-number-box mat-form-field .placeholder *,div.coer-number-box mat-form-field .placeholder-glow,div.coer-number-box mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-number-box mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!important}div.coer-number-box div.button-container{width:40px!important;height:40px!important;display:flex!important;align-items:center!important;justify-content:center!important;background-color:#e6e7e9!important}coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:transparent!important;padding-left:9px!important;padding-right:9px!important}coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple,coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:before,coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:after{border-bottom-color:transparent!important}coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:28px!important}coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix{height:28px!important}coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input{margin-top:3px!important;font-size:14px!important}coer-grid table tbody tr td.coer-numberbox mat-form-field span.icon-container{transform:translate(-5px,-6px)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
|
|
1312
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerNumberBox, isStandalone: false, selector: "coer-numberbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onKeyupEnter: "onKeyupEnter", onInput: "onInput", onClickExternalButton: "onClickExternalButton" }, providers: [CONTROL_VALUE(CoerNumberBox)], viewQueries: [{ propertyName: "_coerNumberbox", first: true, predicate: ["coerNumberbox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-form-field-component\">\r\n <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n width : width(), \r\n minWidth : minWidth(), \r\n maxWidth : maxWidth(),\r\n marginTop : marginTop(),\r\n marginRight : marginRight(),\r\n marginBottom: marginBottom(),\r\n marginLeft : marginLeft() \r\n }\">\r\n @if(_showexternalButtonLeft) {\r\n <div class=\"external-button-container-left\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n \r\n <mat-form-field\r\n [id]=\"_id + '-container'\"\r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'width-100' : true,\r\n 'readonly' : isReadonly() && !isLoading(),\r\n 'display-none': isInvisible() || isLoading()\r\n }\"\r\n [style]=\"{ \r\n 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\">\r\n <mat-label>{{ label() }}</mat-label>\r\n \r\n <input #coerNumberbox matInput\r\n [id]=\"_id\"\r\n type=\"text\"\r\n [placeholder]=\"placeholder()\"\r\n [disabled]=\"!_isEnable()\"\r\n [value]=\"_value\"\r\n (input)=\"SetValue(coerNumberbox.value)\"\r\n (blur)=\"SetTouched(true)\"\r\n [ngClass]=\"{ 'caret-none': _hideCaret() }\"\r\n [style]=\"{\r\n 'margin-top' : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight(),\r\n 'text-align' : textPosition()\r\n }\"> \r\n \r\n <span ngClass=\"icon-container\">\r\n @if(isInvalid() && _isEnable()) {\r\n <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n }\r\n \r\n @else if(isValid() && _isEnable()) {\r\n <i class=\"icon-circle-check icon-fill\"></i>\r\n }\r\n </span>\r\n </mat-form-field>\r\n \r\n <!-- Loading || Invisible -->\r\n @if(isLoading() || isInvisible()) {\r\n <div [ngClass]=\"{ \r\n 'loading' : isLoading(),\r\n 'invisible' : isInvisible() \r\n }\" \r\n [style]=\"{ \r\n 'width' : width(),\r\n 'min-width' : minWidth(),\r\n 'max-width' : maxWidth(),\r\n 'margin-top' : marginTop(),\r\n 'margin-right' : marginRight(),\r\n 'margin-bottom': marginBottom(),\r\n 'margin-left' : marginLeft(),\r\n 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\"\r\n > {{ isInvisible() ? '' : _value }} </div>\r\n }\r\n \r\n @if(_showexternalButtonRight) {\r\n <div class=\"external-button-container-right\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
|
|
1214
1313
|
}
|
|
1215
1314
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerNumberBox, decorators: [{
|
|
1216
1315
|
type: Component,
|
|
1217
|
-
args: [{ selector: 'coer-numberbox', providers: [CONTROL_VALUE(CoerNumberBox)], standalone: false, template: "<div class=\"coer-
|
|
1316
|
+
args: [{ selector: 'coer-numberbox', providers: [CONTROL_VALUE(CoerNumberBox)], standalone: false, template: "<div class=\"coer-form-field-component\">\r\n <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n width : width(), \r\n minWidth : minWidth(), \r\n maxWidth : maxWidth(),\r\n marginTop : marginTop(),\r\n marginRight : marginRight(),\r\n marginBottom: marginBottom(),\r\n marginLeft : marginLeft() \r\n }\">\r\n @if(_showexternalButtonLeft) {\r\n <div class=\"external-button-container-left\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n \r\n <mat-form-field\r\n [id]=\"_id + '-container'\"\r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'width-100' : true,\r\n 'readonly' : isReadonly() && !isLoading(),\r\n 'display-none': isInvisible() || isLoading()\r\n }\"\r\n [style]=\"{ \r\n 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\">\r\n <mat-label>{{ label() }}</mat-label>\r\n \r\n <input #coerNumberbox matInput\r\n [id]=\"_id\"\r\n type=\"text\"\r\n [placeholder]=\"placeholder()\"\r\n [disabled]=\"!_isEnable()\"\r\n [value]=\"_value\"\r\n (input)=\"SetValue(coerNumberbox.value)\"\r\n (blur)=\"SetTouched(true)\"\r\n [ngClass]=\"{ 'caret-none': _hideCaret() }\"\r\n [style]=\"{\r\n 'margin-top' : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight(),\r\n 'text-align' : textPosition()\r\n }\"> \r\n \r\n <span ngClass=\"icon-container\">\r\n @if(isInvalid() && _isEnable()) {\r\n <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n }\r\n \r\n @else if(isValid() && _isEnable()) {\r\n <i class=\"icon-circle-check icon-fill\"></i>\r\n }\r\n </span>\r\n </mat-form-field>\r\n \r\n <!-- Loading || Invisible -->\r\n @if(isLoading() || isInvisible()) {\r\n <div [ngClass]=\"{ \r\n 'loading' : isLoading(),\r\n 'invisible' : isInvisible() \r\n }\" \r\n [style]=\"{ \r\n 'width' : width(),\r\n 'min-width' : minWidth(),\r\n 'max-width' : maxWidth(),\r\n 'margin-top' : marginTop(),\r\n 'margin-right' : marginRight(),\r\n 'margin-bottom': marginBottom(),\r\n 'margin-left' : marginLeft(),\r\n 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\"\r\n > {{ isInvisible() ? '' : _value }} </div>\r\n }\r\n \r\n @if(_showexternalButtonRight) {\r\n <div class=\"external-button-container-right\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n </div>\r\n</div>" }]
|
|
1218
1317
|
}], ctorParameters: () => [] });
|
|
1219
1318
|
|
|
1220
1319
|
class CoerSelectbox extends ControlValue {
|
|
@@ -1225,7 +1324,7 @@ class CoerSelectbox extends ControlValue {
|
|
|
1225
1324
|
this._coerTextBox = viewChild.required('coerTextBox');
|
|
1226
1325
|
//Variables
|
|
1227
1326
|
this._value = null;
|
|
1228
|
-
this._scrollByRow = 40
|
|
1327
|
+
this._scrollByRow = 40;
|
|
1229
1328
|
this._id = Tools.GetGuid('coer-selectBox');
|
|
1230
1329
|
this._index = signal(-1);
|
|
1231
1330
|
this._search = signal('');
|
|
@@ -1234,6 +1333,7 @@ class CoerSelectbox extends ControlValue {
|
|
|
1234
1333
|
this._isOverMenu = signal(false);
|
|
1235
1334
|
this._isLoadingEvent = signal(false);
|
|
1236
1335
|
this._scroll = signal(0);
|
|
1336
|
+
this._externalButton = signal({ show: false });
|
|
1237
1337
|
//Inputs
|
|
1238
1338
|
this.id = input('');
|
|
1239
1339
|
this.value = input(null);
|
|
@@ -1241,6 +1341,7 @@ class CoerSelectbox extends ControlValue {
|
|
|
1241
1341
|
this.placeholder = input('-- Select --');
|
|
1242
1342
|
this.isInvalid = input(false);
|
|
1243
1343
|
this.isValid = input(false);
|
|
1344
|
+
this.externalButton = input({ show: false });
|
|
1244
1345
|
this.dataSource = input([]);
|
|
1245
1346
|
this.displayProperty = input('name');
|
|
1246
1347
|
this.rowsByPage = input(50);
|
|
@@ -1258,6 +1359,7 @@ class CoerSelectbox extends ControlValue {
|
|
|
1258
1359
|
//Outputs
|
|
1259
1360
|
this.onSelected = output();
|
|
1260
1361
|
this.onUnselect = output();
|
|
1362
|
+
this.onClickExternalButton = output();
|
|
1261
1363
|
//computed
|
|
1262
1364
|
this._isEnable = computed(() => {
|
|
1263
1365
|
return !this.isDisabled() && !this.isLoading() && !this.isReadonly() && !this.isInvisible();
|
|
@@ -1267,6 +1369,13 @@ class CoerSelectbox extends ControlValue {
|
|
|
1267
1369
|
return this.label() == '' ? 'always' : 'auto';
|
|
1268
1370
|
});
|
|
1269
1371
|
//computed
|
|
1372
|
+
this._positionTop = computed(() => {
|
|
1373
|
+
let top = 40;
|
|
1374
|
+
let marginTop = Strings.OnlyNumbers(this.marginTop());
|
|
1375
|
+
marginTop = Tools.IsNotOnlyWhiteSpace(marginTop) ? Number(marginTop) : 0;
|
|
1376
|
+
return `${top + marginTop}px`;
|
|
1377
|
+
});
|
|
1378
|
+
//computed
|
|
1270
1379
|
this._dataSource = computed(() => {
|
|
1271
1380
|
let index = 0;
|
|
1272
1381
|
const search = this._search();
|
|
@@ -1288,9 +1397,17 @@ class CoerSelectbox extends ControlValue {
|
|
|
1288
1397
|
this._GetDisplay = (item) => {
|
|
1289
1398
|
return Tools.IsNotNull(item) ? item[this.displayProperty()] : '';
|
|
1290
1399
|
};
|
|
1291
|
-
this.
|
|
1400
|
+
this._effectValue = effect(() => {
|
|
1292
1401
|
this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : null);
|
|
1293
1402
|
});
|
|
1403
|
+
this._effectExternalButton = effect(() => {
|
|
1404
|
+
this._externalButton.set(this.externalButton());
|
|
1405
|
+
});
|
|
1406
|
+
this._effectComponentSignal = effect(() => {
|
|
1407
|
+
if (componentContentSIGNAL().length > 0 && componentContentSIGNAL() != this._id) {
|
|
1408
|
+
Tools.Sleep().then(_ => this._Close());
|
|
1409
|
+
}
|
|
1410
|
+
});
|
|
1294
1411
|
}
|
|
1295
1412
|
//AfterViewInit
|
|
1296
1413
|
ngAfterViewInit() {
|
|
@@ -1301,8 +1418,9 @@ class CoerSelectbox extends ControlValue {
|
|
|
1301
1418
|
container?.addEventListener('mouseleave', () => this._isOverMenu.set(false));
|
|
1302
1419
|
//DropDown
|
|
1303
1420
|
this._dropDownMenu = document.getElementById(`${this._id}-dropdown-menu`);
|
|
1304
|
-
this.
|
|
1305
|
-
this.
|
|
1421
|
+
this._dropDownMenuContainer = document.getElementById(`${this._id}-dropdown-menu-container`);
|
|
1422
|
+
this._dropDownMenuContainer?.addEventListener('mouseenter', () => this._isOverMenu.set(true));
|
|
1423
|
+
this._dropDownMenuContainer?.addEventListener('mouseleave', () => this._isOverMenu.set(false));
|
|
1306
1424
|
//TextBox
|
|
1307
1425
|
this._textbox = document.getElementById(this._id);
|
|
1308
1426
|
this._textbox?.addEventListener('focus', () => {
|
|
@@ -1370,7 +1488,7 @@ class CoerSelectbox extends ControlValue {
|
|
|
1370
1488
|
});
|
|
1371
1489
|
//Document
|
|
1372
1490
|
document.addEventListener('click', () => {
|
|
1373
|
-
if (!this._isOverMenu())
|
|
1491
|
+
if (this._isOpen() && !this._isOverMenu())
|
|
1374
1492
|
this.Blur();
|
|
1375
1493
|
});
|
|
1376
1494
|
document.addEventListener('keyup', (event) => {
|
|
@@ -1391,7 +1509,9 @@ class CoerSelectbox extends ControlValue {
|
|
|
1391
1509
|
}
|
|
1392
1510
|
//OnDestroy
|
|
1393
1511
|
ngOnDestroy() {
|
|
1394
|
-
this.
|
|
1512
|
+
this._effectValue?.destroy();
|
|
1513
|
+
this._effectExternalButton?.destroy();
|
|
1514
|
+
this._effectComponentSignal?.destroy();
|
|
1395
1515
|
}
|
|
1396
1516
|
//getter
|
|
1397
1517
|
get _displayed() {
|
|
@@ -1414,14 +1534,34 @@ class CoerSelectbox extends ControlValue {
|
|
|
1414
1534
|
&& this._search().length <= 0;
|
|
1415
1535
|
}
|
|
1416
1536
|
//getter
|
|
1417
|
-
get
|
|
1418
|
-
return this.
|
|
1419
|
-
|
|
1537
|
+
get _showexternalButtonLeft() {
|
|
1538
|
+
return this._externalButton().show
|
|
1539
|
+
&& Tools.IsNotNull(this._externalButton()?.position)
|
|
1540
|
+
&& this._externalButton()?.position === 'left'
|
|
1541
|
+
&& !this.isLoading()
|
|
1542
|
+
&& !this.isInvisible();
|
|
1543
|
+
}
|
|
1544
|
+
//getter
|
|
1545
|
+
get _showexternalButtonRight() {
|
|
1546
|
+
return this._externalButton().show
|
|
1547
|
+
&& ((Tools.IsNull(this._externalButton()?.position) || this._externalButton()?.position === 'right'))
|
|
1548
|
+
&& !this.isLoading()
|
|
1549
|
+
&& !this.isInvisible();
|
|
1550
|
+
}
|
|
1551
|
+
//getter
|
|
1552
|
+
get _externalButtonIcon() {
|
|
1553
|
+
return Tools.IsNotOnlyWhiteSpace(this._externalButton()?.icon)
|
|
1554
|
+
? this._externalButton().icon : 'pointer';
|
|
1555
|
+
}
|
|
1556
|
+
//getter
|
|
1557
|
+
get _isDisabledExternalButton() {
|
|
1558
|
+
return Tools.IsNotNull(this._externalButton()?.isDisabled)
|
|
1559
|
+
? this._externalButton().isDisabled : false;
|
|
1420
1560
|
}
|
|
1421
1561
|
//getter
|
|
1422
|
-
get
|
|
1423
|
-
return this.isInvalid() || this.isValid() || this._showCancel
|
|
1424
|
-
? '
|
|
1562
|
+
get _paddingRight() {
|
|
1563
|
+
return (this._isEnable() && (this.isInvalid() || this.isValid())) || this._showCancel
|
|
1564
|
+
? '40px' : '15px';
|
|
1425
1565
|
}
|
|
1426
1566
|
//ControlValueAccessor
|
|
1427
1567
|
SetValue(_value) {
|
|
@@ -1506,14 +1646,16 @@ class CoerSelectbox extends ControlValue {
|
|
|
1506
1646
|
}
|
|
1507
1647
|
/** */
|
|
1508
1648
|
_Open() {
|
|
1509
|
-
HTMLElements.RemoveClass(this.
|
|
1510
|
-
HTMLElements.AddClass(`#${this._id}-coer-select-box div.mdc-line-ripple`, '
|
|
1649
|
+
HTMLElements.RemoveClass(this._dropDownMenuContainer, 'display-none');
|
|
1650
|
+
HTMLElements.AddClass(`#${this._id}-coer-select-box div.mdc-line-ripple`, 'actived-component');
|
|
1651
|
+
componentContentSIGNAL.set(this._id);
|
|
1511
1652
|
this._isOpen.set(true);
|
|
1512
1653
|
}
|
|
1513
1654
|
/** */
|
|
1514
1655
|
_Close() {
|
|
1515
|
-
HTMLElements.AddClass(this.
|
|
1516
|
-
HTMLElements.RemoveClass(`#${this._id}-coer-select-box div.mdc-line-ripple`, '
|
|
1656
|
+
HTMLElements.AddClass(this._dropDownMenuContainer, 'display-none');
|
|
1657
|
+
HTMLElements.RemoveClass(`#${this._id}-coer-select-box div.mdc-line-ripple`, 'actived-component');
|
|
1658
|
+
componentContentSIGNAL.set('');
|
|
1517
1659
|
this._isOpen.set(false);
|
|
1518
1660
|
}
|
|
1519
1661
|
/** */
|
|
@@ -1534,11 +1676,11 @@ class CoerSelectbox extends ControlValue {
|
|
|
1534
1676
|
});
|
|
1535
1677
|
}
|
|
1536
1678
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSelectbox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1537
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerSelectbox, isStandalone: false, selector: "coer-selectbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, displayProperty: { classPropertyName: "displayProperty", publicName: "displayProperty", isSignal: true, isRequired: false, transformFunction: null }, rowsByPage: { classPropertyName: "rowsByPage", publicName: "rowsByPage", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelected: "onSelected", onUnselect: "onUnselect" }, providers: [CONTROL_VALUE(CoerSelectbox)], viewQueries: [{ propertyName: "_coerTextBox", first: true, predicate: ["coerTextBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"_id + '-coer-select-box'\" class=\"coer-select-box\">\r\n <mat-form-field\r\n [id]=\"_id + '-container'\" \r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'readonly' : isReadonly() && !isLoading(),\r\n 'display-none': isInvisible() || isLoading()\r\n }\"\r\n [style]=\"{\r\n 'width' : width(),\r\n 'min-width' : minWidth(),\r\n 'max-width' : maxWidth(),\r\n 'margin-top' : marginTop(),\r\n 'margin-right' : marginRight(),\r\n 'margin-bottom': marginBottom(),\r\n 'margin-left' : marginLeft()\r\n }\">\r\n <mat-label>{{ label() }}</mat-label>\r\n\r\n <!-- Input -->\r\n <input #coerTextBox matInput\r\n [id]=\"_id\"\r\n type=\"text\"\r\n [value]=\"_search()\"\r\n [placeholder]=\"_placeholder\"\r\n [disabled]=\"!_isEnable()\"\r\n (input)=\"_Search(coerTextBox.value)\"\r\n (blur)=\"SetTouched(true)\"\r\n [style]=\"{\r\n 'margin-top': (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight\r\n }\"> \r\n\r\n <!-- Icons Container -->\r\n <span class=\"icon-container\" [style]=\"{ 'width': _widthIcons }\">\r\n @if(_showCancel && _isEnable() && !isLoading()) {\r\n <i class=\"icon-x text-secondary\" (click)=\"Unselect()\"></i>\r\n }\r\n\r\n @else if(isInvalid() && !isLoading()) {\r\n <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n }\r\n\r\n @else if(isValid() && !isLoading()) {\r\n <i class=\"icon-circle-check text-green icon-fill\"></i>\r\n }\r\n\r\n @if(_isOpen() && _isEnable() && !isLoading()) {\r\n <i class=\"icon-caret-up icon-fill cursor-pointer text-primary\" (click)=\"Blur()\"></i>\r\n }\r\n\r\n @else if(_isEnable() && !isLoading()) {\r\n <i class=\"icon-caret-down icon-fill cursor-pointer text-secondary\"></i>\r\n }\r\n </span> \r\n </mat-form-field> \r\n\r\n <!-- Loading || Invisible -->\r\n @if(isLoading() || isInvisible()) {\r\n <div [ngClass]=\"{ \r\n 'loading' : isLoading(),\r\n 'invisible' : isInvisible() \r\n }\" \r\n [style]=\"{\r\n 'height' : '40px',\r\n 'width' : width(),\r\n 'min-width' : minWidth(),\r\n 'max-width' : maxWidth(),\r\n 'margin-top' : marginTop(),\r\n 'margin-right' : marginRight(),\r\n 'margin-bottom': marginBottom(),\r\n 'margin-left' : marginLeft()\r\n }\"\r\n > {{ isInvisible() ? '' : _search() }} </div>\r\n }\r\n\r\n <!-- Options -->\r\n <div [id]=\"_id + '-dropdown-menu'\" class=\"dropdown-options display-none\">\r\n @if(_isEnable()) {\r\n <ul>\r\n @for(item of _dataSource(); track _GetIndexRow(item)) {\r\n <li [ngClass]=\"{ 'dropdown-item-focus': _index() == _GetIndexRow(item) }\" (click)=\"_SelectItem(item)\">\r\n <div [id]=\"_id + '-dropdown-option-' + _GetIndexRow(item)\">\r\n {{ _GetDisplay(item) }} \r\n </div> \r\n </li>\r\n }\r\n </ul>\r\n }\r\n </div>\r\n</div>", styles: ["div.coer-select-box{position:relative!important}div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:var(--inputs-inner)!important}div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:40px!important}div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix{width:100%!important;height:40px!important;padding:0!important}div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label{overflow:visible!important;position:absolute!important;top:20px!important}div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label.mdc-floating-label--float-above mat-label{color:var(--primary-inner)!important;font-weight:700!important;position:relative!important;left:-10px!important;top:2px!important}div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input{font-weight:400!important;font-size:17px!important;color:var(--inputs-text-inner)!important}div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:after{border-bottom-color:var(--primary-inner)!important}div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.dropdown-open:before{border:1px solid var(--primary-inner)!important}div.coer-select-box mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-select-box mat-form-field span.icon-container{position:absolute!important;top:1px!important;right:-14px!important;z-index:5!important;height:40px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:5px!important}div.coer-select-box mat-form-field span.icon-container i{font-size:20px!important}div.coer-select-box mat-form-field span.icon-container i.icon-circle-check.icon-fill{color:var(--green)!important}div.coer-select-box mat-form-field span.icon-container i.icon-circle-exclamation.icon-fill{color:var(--red)!important}div.coer-select-box mat-form-field span.icon-container i.icon-x{padding:2px!important;font-size:22px!important;cursor:pointer!important;color:color-mix(in srgb,var(--inputs-icons-inner),var(--white) 60%)!important}div.coer-select-box mat-form-field span.icon-container i.icon-x:hover{color:color-mix(in srgb,var(--inputs-icons-inner),var(--white) 40%)!important}div.coer-select-box div.loading{padding:0 16px!important;display:flex!important;align-items:center!important;border-top-left-radius:4px!important;border-top-right-radius:4px!important}div.coer-select-box div.dropdown-options{position:absolute!important;top:40px!important;left:0!important;right:0!important;border:1px solid var(--inputs-inner)!important;border-top:none!important;border-radius:0 0 10px 10px!important;padding:0!important;overflow-y:auto!important;z-index:2!important}div.coer-select-box div.dropdown-options ul{background-color:var(--containers-inner)!important;overflow:auto!important;max-height:205px!important}div.coer-select-box div.dropdown-options ul li{padding:0 10px!important;cursor:pointer!important}div.coer-select-box div.dropdown-options ul li div{display:flex!important;align-items:center!important;height:40px!important;color:var(--black)!important;border-bottom:1px ridge lightgray!important}div.coer-select-box div.dropdown-options ul li:last-child div{border-bottom:none!important}div.coer-select-box div.dropdown-options ul li::marker{content:\"\"!important;display:none!important}div.coer-select-box div.dropdown-options ul li:not(.dropdown-item-focus):hover,div.coer-select-box div.dropdown-options ul li:not(.dropdown-item-focus)>div:hover{background-color:color-mix(in srgb,var(--inputs-items-inner),var(--white) 95%)!important}div.coer-select-box div.dropdown-options ul li.dropdown-item-focus,div.coer-select-box div.dropdown-options ul li.dropdown-item-focus>div{background-color:color-mix(in srgb,var(--inputs-items-inner),var(--white) 65%)!important}div.coer-select-box mat-form-field.readonly{border-top-left-radius:4px!important;border-top-right-radius:4px!important}div.coer-select-box mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:inherit!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:transparent!important;padding-left:9px!important;padding-right:9px!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple,coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:before,coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:after{border-bottom-color:transparent!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:28px!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix{height:28px!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input{margin-top:3px!important;font-size:14px!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field span.icon-container{transform:translate(-5px,-6px)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] }); }
|
|
1679
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerSelectbox, isStandalone: false, selector: "coer-selectbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, displayProperty: { classPropertyName: "displayProperty", publicName: "displayProperty", isSignal: true, isRequired: false, transformFunction: null }, rowsByPage: { classPropertyName: "rowsByPage", publicName: "rowsByPage", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelected: "onSelected", onUnselect: "onUnselect", onClickExternalButton: "onClickExternalButton" }, providers: [CONTROL_VALUE(CoerSelectbox)], viewQueries: [{ propertyName: "_coerTextBox", first: true, predicate: ["coerTextBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"_id + '-coer-select-box'\" class=\"coer-form-field-component\">\r\n <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n width : width(), \r\n minWidth : minWidth(), \r\n maxWidth : maxWidth(),\r\n marginTop : marginTop(),\r\n marginRight : marginRight(),\r\n marginBottom: marginBottom(),\r\n marginLeft : marginLeft(), \r\n }\">\r\n\r\n @if(_showexternalButtonLeft) {\r\n <div class=\"external-button-container-left\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n \r\n <mat-form-field\r\n [id]=\"_id + '-container'\" \r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'width-100' : true,\r\n 'readonly' : isReadonly() && !isLoading(),\r\n 'display-none': isInvisible() || isLoading()\r\n }\"\r\n [style]=\"{ \r\n 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\">\r\n\r\n <!-- <mat-label>{{ label() }}</mat-label> -->\r\n <mat-label>{{ _isOpen() }}</mat-label>\r\n \r\n <!-- Input -->\r\n <input #coerTextBox matInput\r\n [id]=\"_id\"\r\n type=\"text\"\r\n [value]=\"_search()\"\r\n [placeholder]=\"_placeholder\"\r\n [disabled]=\"!_isEnable()\"\r\n (input)=\"_Search(coerTextBox.value)\"\r\n (blur)=\"SetTouched(true)\"\r\n [style]=\"{\r\n 'margin-top': (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight\r\n }\"> \r\n \r\n <!-- Icons Container -->\r\n <span class=\"icon-container\">\r\n @if(_showCancel && _isEnable()) { \r\n <i class=\"icon-x margin-right-45px\" (click)=\"Unselect()\"></i> \r\n }\r\n \r\n @else if(isInvalid() && _isEnable()) { \r\n <i class=\"icon-circle-exclamation icon-fill margin-right-45px\"></i> \r\n }\r\n \r\n @else if(isValid() && _isEnable()) { \r\n <i class=\"icon-circle-check icon-fill margin-right-45px\"></i> \r\n }\r\n \r\n @if(_isOpen() && _isEnable()) {\r\n <i class=\"icon-caret-up icon-fill cursor-pointer text-primary\" (click)=\"Blur()\"></i>\r\n }\r\n \r\n @else if(_isEnable()) {\r\n <i class=\"icon-caret-down icon-fill cursor-pointer text-secondary\"></i>\r\n }\r\n </span> \r\n </mat-form-field> \r\n \r\n <!-- Loading || Invisible -->\r\n @if(isLoading() || isInvisible()) {\r\n <div [ngClass]=\"{ \r\n 'loading' : isLoading(),\r\n 'invisible' : isInvisible() \r\n }\" \r\n [style]=\"{\r\n 'width' : width(),\r\n 'min-width' : minWidth(),\r\n 'max-width' : maxWidth(),\r\n 'margin-top' : marginTop(),\r\n 'margin-right' : marginRight(),\r\n 'margin-bottom': marginBottom(),\r\n 'margin-left' : marginLeft(), \r\n 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\"\r\n > {{ isInvisible() ? '' : _search() }} </div>\r\n }\r\n \r\n <!-- Options -->\r\n <div [id]=\"_id + '-dropdown-menu-container'\" class=\"dropdown-options display-none\">\r\n <ul [id]=\"_id + '-dropdown-menu'\">\r\n @if(_isEnable()) {\r\n @for(item of _dataSource(); track _GetIndexRow(item)) {\r\n <li [ngClass]=\"{ 'dropdown-item-focus': _index() == _GetIndexRow(item) }\" (click)=\"_SelectItem(item)\">\r\n <div [id]=\"_id + '-dropdown-option-' + _GetIndexRow(item)\">\r\n {{ _GetDisplay(item) }} \r\n </div> \r\n </li>\r\n }\r\n }\r\n </ul>\r\n </div>\r\n \r\n @if(_showexternalButtonRight) {\r\n <div class=\"external-button-container-right\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
|
|
1538
1680
|
}
|
|
1539
1681
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSelectbox, decorators: [{
|
|
1540
1682
|
type: Component,
|
|
1541
|
-
args: [{ selector: 'coer-selectbox', providers: [CONTROL_VALUE(CoerSelectbox)], standalone: false, template: "<div [id]=\"_id + '-coer-select-box'\" class=\"coer-select-box\">\r\n <mat-form-field\r\n [id]=\"_id + '-container'\" \r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'readonly' : isReadonly() && !isLoading(),\r\n 'display-none': isInvisible() || isLoading()\r\n }\"\r\n [style]=\"{\r\n 'width' : width(),\r\n 'min-width' : minWidth(),\r\n 'max-width' : maxWidth(),\r\n 'margin-top' : marginTop(),\r\n 'margin-right' : marginRight(),\r\n 'margin-bottom': marginBottom(),\r\n 'margin-left' : marginLeft()\r\n }\">\r\n <mat-label>{{ label() }}</mat-label>\r\n\r\n <!-- Input -->\r\n <input #coerTextBox matInput\r\n [id]=\"_id\"\r\n type=\"text\"\r\n [value]=\"_search()\"\r\n [placeholder]=\"_placeholder\"\r\n [disabled]=\"!_isEnable()\"\r\n (input)=\"_Search(coerTextBox.value)\"\r\n (blur)=\"SetTouched(true)\"\r\n [style]=\"{\r\n 'margin-top': (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight\r\n }\"> \r\n\r\n <!-- Icons Container -->\r\n <span class=\"icon-container\" [style]=\"{ 'width': _widthIcons }\">\r\n @if(_showCancel && _isEnable() && !isLoading()) {\r\n <i class=\"icon-x text-secondary\" (click)=\"Unselect()\"></i>\r\n }\r\n\r\n @else if(isInvalid() && !isLoading()) {\r\n <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n }\r\n\r\n @else if(isValid() && !isLoading()) {\r\n <i class=\"icon-circle-check text-green icon-fill\"></i>\r\n }\r\n\r\n @if(_isOpen() && _isEnable() && !isLoading()) {\r\n <i class=\"icon-caret-up icon-fill cursor-pointer text-primary\" (click)=\"Blur()\"></i>\r\n }\r\n\r\n @else if(_isEnable() && !isLoading()) {\r\n <i class=\"icon-caret-down icon-fill cursor-pointer text-secondary\"></i>\r\n }\r\n </span> \r\n </mat-form-field> \r\n\r\n <!-- Loading || Invisible -->\r\n @if(isLoading() || isInvisible()) {\r\n <div [ngClass]=\"{ \r\n 'loading' : isLoading(),\r\n 'invisible' : isInvisible() \r\n }\" \r\n [style]=\"{\r\n 'height' : '40px',\r\n 'width' : width(),\r\n 'min-width' : minWidth(),\r\n 'max-width' : maxWidth(),\r\n 'margin-top' : marginTop(),\r\n 'margin-right' : marginRight(),\r\n 'margin-bottom': marginBottom(),\r\n 'margin-left' : marginLeft()\r\n }\"\r\n > {{ isInvisible() ? '' : _search() }} </div>\r\n }\r\n\r\n <!-- Options -->\r\n <div [id]=\"_id + '-dropdown-menu'\" class=\"dropdown-options display-none\">\r\n @if(_isEnable()) {\r\n <ul>\r\n @for(item of _dataSource(); track _GetIndexRow(item)) {\r\n <li [ngClass]=\"{ 'dropdown-item-focus': _index() == _GetIndexRow(item) }\" (click)=\"_SelectItem(item)\">\r\n <div [id]=\"_id + '-dropdown-option-' + _GetIndexRow(item)\">\r\n {{ _GetDisplay(item) }} \r\n </div> \r\n </li>\r\n }\r\n </ul>\r\n }\r\n </div>\r\n</div>", styles: ["div.coer-select-box{position:relative!important}div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:var(--inputs-inner)!important}div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:40px!important}div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix{width:100%!important;height:40px!important;padding:0!important}div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label{overflow:visible!important;position:absolute!important;top:20px!important}div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label.mdc-floating-label--float-above mat-label{color:var(--primary-inner)!important;font-weight:700!important;position:relative!important;left:-10px!important;top:2px!important}div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input{font-weight:400!important;font-size:17px!important;color:var(--inputs-text-inner)!important}div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:after{border-bottom-color:var(--primary-inner)!important}div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.dropdown-open:before{border:1px solid var(--primary-inner)!important}div.coer-select-box mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-select-box mat-form-field span.icon-container{position:absolute!important;top:1px!important;right:-14px!important;z-index:5!important;height:40px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:5px!important}div.coer-select-box mat-form-field span.icon-container i{font-size:20px!important}div.coer-select-box mat-form-field span.icon-container i.icon-circle-check.icon-fill{color:var(--green)!important}div.coer-select-box mat-form-field span.icon-container i.icon-circle-exclamation.icon-fill{color:var(--red)!important}div.coer-select-box mat-form-field span.icon-container i.icon-x{padding:2px!important;font-size:22px!important;cursor:pointer!important;color:color-mix(in srgb,var(--inputs-icons-inner),var(--white) 60%)!important}div.coer-select-box mat-form-field span.icon-container i.icon-x:hover{color:color-mix(in srgb,var(--inputs-icons-inner),var(--white) 40%)!important}div.coer-select-box div.loading{padding:0 16px!important;display:flex!important;align-items:center!important;border-top-left-radius:4px!important;border-top-right-radius:4px!important}div.coer-select-box div.dropdown-options{position:absolute!important;top:40px!important;left:0!important;right:0!important;border:1px solid var(--inputs-inner)!important;border-top:none!important;border-radius:0 0 10px 10px!important;padding:0!important;overflow-y:auto!important;z-index:2!important}div.coer-select-box div.dropdown-options ul{background-color:var(--containers-inner)!important;overflow:auto!important;max-height:205px!important}div.coer-select-box div.dropdown-options ul li{padding:0 10px!important;cursor:pointer!important}div.coer-select-box div.dropdown-options ul li div{display:flex!important;align-items:center!important;height:40px!important;color:var(--black)!important;border-bottom:1px ridge lightgray!important}div.coer-select-box div.dropdown-options ul li:last-child div{border-bottom:none!important}div.coer-select-box div.dropdown-options ul li::marker{content:\"\"!important;display:none!important}div.coer-select-box div.dropdown-options ul li:not(.dropdown-item-focus):hover,div.coer-select-box div.dropdown-options ul li:not(.dropdown-item-focus)>div:hover{background-color:color-mix(in srgb,var(--inputs-items-inner),var(--white) 95%)!important}div.coer-select-box div.dropdown-options ul li.dropdown-item-focus,div.coer-select-box div.dropdown-options ul li.dropdown-item-focus>div{background-color:color-mix(in srgb,var(--inputs-items-inner),var(--white) 65%)!important}div.coer-select-box mat-form-field.readonly{border-top-left-radius:4px!important;border-top-right-radius:4px!important}div.coer-select-box mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:inherit!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:transparent!important;padding-left:9px!important;padding-right:9px!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple,coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:before,coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:after{border-bottom-color:transparent!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:28px!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix{height:28px!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input{margin-top:3px!important;font-size:14px!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field span.icon-container{transform:translate(-5px,-6px)!important}\n"] }]
|
|
1683
|
+
args: [{ selector: 'coer-selectbox', providers: [CONTROL_VALUE(CoerSelectbox)], standalone: false, template: "<div [id]=\"_id + '-coer-select-box'\" class=\"coer-form-field-component\">\r\n <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n width : width(), \r\n minWidth : minWidth(), \r\n maxWidth : maxWidth(),\r\n marginTop : marginTop(),\r\n marginRight : marginRight(),\r\n marginBottom: marginBottom(),\r\n marginLeft : marginLeft(), \r\n }\">\r\n\r\n @if(_showexternalButtonLeft) {\r\n <div class=\"external-button-container-left\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n \r\n <mat-form-field\r\n [id]=\"_id + '-container'\" \r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'width-100' : true,\r\n 'readonly' : isReadonly() && !isLoading(),\r\n 'display-none': isInvisible() || isLoading()\r\n }\"\r\n [style]=\"{ \r\n 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\">\r\n\r\n <!-- <mat-label>{{ label() }}</mat-label> -->\r\n <mat-label>{{ _isOpen() }}</mat-label>\r\n \r\n <!-- Input -->\r\n <input #coerTextBox matInput\r\n [id]=\"_id\"\r\n type=\"text\"\r\n [value]=\"_search()\"\r\n [placeholder]=\"_placeholder\"\r\n [disabled]=\"!_isEnable()\"\r\n (input)=\"_Search(coerTextBox.value)\"\r\n (blur)=\"SetTouched(true)\"\r\n [style]=\"{\r\n 'margin-top': (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight\r\n }\"> \r\n \r\n <!-- Icons Container -->\r\n <span class=\"icon-container\">\r\n @if(_showCancel && _isEnable()) { \r\n <i class=\"icon-x margin-right-45px\" (click)=\"Unselect()\"></i> \r\n }\r\n \r\n @else if(isInvalid() && _isEnable()) { \r\n <i class=\"icon-circle-exclamation icon-fill margin-right-45px\"></i> \r\n }\r\n \r\n @else if(isValid() && _isEnable()) { \r\n <i class=\"icon-circle-check icon-fill margin-right-45px\"></i> \r\n }\r\n \r\n @if(_isOpen() && _isEnable()) {\r\n <i class=\"icon-caret-up icon-fill cursor-pointer text-primary\" (click)=\"Blur()\"></i>\r\n }\r\n \r\n @else if(_isEnable()) {\r\n <i class=\"icon-caret-down icon-fill cursor-pointer text-secondary\"></i>\r\n }\r\n </span> \r\n </mat-form-field> \r\n \r\n <!-- Loading || Invisible -->\r\n @if(isLoading() || isInvisible()) {\r\n <div [ngClass]=\"{ \r\n 'loading' : isLoading(),\r\n 'invisible' : isInvisible() \r\n }\" \r\n [style]=\"{\r\n 'width' : width(),\r\n 'min-width' : minWidth(),\r\n 'max-width' : maxWidth(),\r\n 'margin-top' : marginTop(),\r\n 'margin-right' : marginRight(),\r\n 'margin-bottom': marginBottom(),\r\n 'margin-left' : marginLeft(), \r\n 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\"\r\n > {{ isInvisible() ? '' : _search() }} </div>\r\n }\r\n \r\n <!-- Options -->\r\n <div [id]=\"_id + '-dropdown-menu-container'\" class=\"dropdown-options display-none\">\r\n <ul [id]=\"_id + '-dropdown-menu'\">\r\n @if(_isEnable()) {\r\n @for(item of _dataSource(); track _GetIndexRow(item)) {\r\n <li [ngClass]=\"{ 'dropdown-item-focus': _index() == _GetIndexRow(item) }\" (click)=\"_SelectItem(item)\">\r\n <div [id]=\"_id + '-dropdown-option-' + _GetIndexRow(item)\">\r\n {{ _GetDisplay(item) }} \r\n </div> \r\n </li>\r\n }\r\n }\r\n </ul>\r\n </div>\r\n \r\n @if(_showexternalButtonRight) {\r\n <div class=\"external-button-container-right\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n </div>\r\n</div>" }]
|
|
1542
1684
|
}], ctorParameters: () => [] });
|
|
1543
1685
|
|
|
1544
1686
|
class CoerTextBox extends ControlValue {
|
|
@@ -1594,7 +1736,7 @@ class CoerTextBox extends ControlValue {
|
|
|
1594
1736
|
});
|
|
1595
1737
|
//computed
|
|
1596
1738
|
this._paddingRight = computed(() => {
|
|
1597
|
-
return this.isInvalid() || this.isValid()
|
|
1739
|
+
return this._isEnable() && (this.isInvalid() || this.isValid())
|
|
1598
1740
|
? '18px' : '0px';
|
|
1599
1741
|
});
|
|
1600
1742
|
this._effectValue = effect(() => {
|
|
@@ -1662,20 +1804,22 @@ class CoerTextBox extends ControlValue {
|
|
|
1662
1804
|
&& String(this._value).length > 0;
|
|
1663
1805
|
}
|
|
1664
1806
|
//getter
|
|
1665
|
-
get
|
|
1807
|
+
get _showexternalButtonLeft() {
|
|
1666
1808
|
return this._externalButton().show
|
|
1667
1809
|
&& Tools.IsNotNull(this._externalButton()?.position)
|
|
1668
1810
|
&& this._externalButton()?.position === 'left'
|
|
1811
|
+
&& !this.isLoading()
|
|
1669
1812
|
&& !this.isInvisible();
|
|
1670
1813
|
}
|
|
1671
1814
|
//getter
|
|
1672
|
-
get
|
|
1815
|
+
get _showexternalButtonRight() {
|
|
1673
1816
|
return this._externalButton().show
|
|
1674
1817
|
&& ((Tools.IsNull(this._externalButton()?.position) || this._externalButton()?.position === 'right'))
|
|
1818
|
+
&& !this.isLoading()
|
|
1675
1819
|
&& !this.isInvisible();
|
|
1676
1820
|
}
|
|
1677
1821
|
//getter
|
|
1678
|
-
get
|
|
1822
|
+
get _externalButtonIcon() {
|
|
1679
1823
|
return Tools.IsNotOnlyWhiteSpace(this._externalButton()?.icon)
|
|
1680
1824
|
? this._externalButton().icon : 'pointer';
|
|
1681
1825
|
}
|
|
@@ -1728,20 +1872,18 @@ class CoerTextBox extends ControlValue {
|
|
|
1728
1872
|
if (this._isEnable()) {
|
|
1729
1873
|
if (this.showClearIcon())
|
|
1730
1874
|
this.Focus();
|
|
1731
|
-
else
|
|
1732
|
-
this.onKeyupEnter.emit(this._value);
|
|
1875
|
+
else
|
|
1733
1876
|
this.Blur();
|
|
1734
|
-
}
|
|
1735
1877
|
this.onClickSearch.emit(this._value);
|
|
1736
1878
|
}
|
|
1737
1879
|
});
|
|
1738
1880
|
}
|
|
1739
1881
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTextBox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1740
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerTextBox, isStandalone: false, selector: "coer-textbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, showClearIcon: { classPropertyName: "showClearIcon", publicName: "showClearIcon", isSignal: true, isRequired: false, transformFunction: null }, showSearchIcon: { classPropertyName: "showSearchIcon", publicName: "showSearchIcon", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onKeyupEnter: "onKeyupEnter", onInput: "onInput", onClickClear: "onClickClear", onClickSearch: "onClickSearch", onClickExternalButton: "onClickExternalButton" }, providers: [CONTROL_VALUE(CoerTextBox)], viewQueries: [{ propertyName: "matFormField", first: true, predicate: ["matFormField"], descendants: true, isSignal: true }, { propertyName: "coerTextBox", first: true, predicate: ["coerTextBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-text-box\">\r\n @if(_showButtonLeft) {\r\n <div class=\"button-container\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_buttonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n\r\n <mat-form-field\r\n [id]=\"_id + '-container'\"\r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'readonly': isReadonly() && !isLoading(),\r\n 'd-none': isInvisible()\r\n }\"\r\n [style]=\"{\r\n 'width': width(),\r\n 'min-width': minWidth(),\r\n 'max-width': maxWidth(),\r\n 'margin-top': marginTop(),\r\n 'margin-right': marginRight(),\r\n 'margin-bottom': marginBottom(),\r\n 'margin-left': marginLeft()\r\n }\">\r\n <mat-label>{{ label() }}</mat-label>\r\n\r\n <input #coerTextBox matInput\r\n [id]=\"_id\"\r\n type=\"text\"\r\n [placeholder]=\"placeholder()\"\r\n [minLength]=\"minLength()\"\r\n [maxLength]=\"maxLength()\"\r\n [disabled]=\"!_isEnable()\"\r\n [value]=\"_value\"\r\n (input)=\"SetValue(coerTextBox.value)\"\r\n (blur)=\"SetTouched(true)\"\r\n [style]=\"{\r\n 'cursor': isLoading() ? 'wait' : null,\r\n 'margin-top': (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight(),\r\n 'text-align': textPosition()\r\n }\">\r\n\r\n @if(isLoading()) {\r\n <div class=\"placeholder-glow\">\r\n <span class=\"placeholder\"></span>\r\n </div>\r\n }\r\n\r\n <span ngClass=\"icon-container\">\r\n @if(_showSearchIcon) {\r\n <i class=\"fa-solid fa-magnifying-glass cursor-pointer\" (click)=\"_ClickSearch()\"></i>\r\n }\r\n\r\n @else if(_showClearIcon) {\r\n <i class=\"fa-solid fa-xmark cursor-pointer\" (click)=\"Clear(); this.onClickClear.emit();\"></i>\r\n }\r\n\r\n @else if(isInvalid() && !isDisabled() && !isLoading()) {\r\n <i class=\"fa-solid fa-circle-exclamation\"></i>\r\n }\r\n\r\n @else if(isValid() && !isDisabled() && !isLoading()) {\r\n <i class=\"fa-solid fa-circle-check text-green\"></i>\r\n }\r\n </span>\r\n </mat-form-field> \r\n\r\n @if(isInvisible()) {\r\n <mat-form-field class=\"invisible\">\r\n <input matInput [disabled]=\"true\"> \r\n </mat-form-field> \r\n }\r\n\r\n @if(_showButtonRight) {\r\n <div class=\"button-container\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_buttonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n</div>", styles: ["div.coer-text-box{display:flex;align-items:center}div.coer-text-box mat-form-field{position:relative!important}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:40px!important}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix{width:100%!important;height:40px!important;padding:0!important}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label{overflow:visible!important;position:absolute!important;top:20px!important}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label.mdc-floating-label--float-above mat-label{color:var(--primary-inner);font-weight:700;position:relative;left:-10px;top:2px}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input{font-weight:400!important;font-size:17px!important;color:var(--black)!important}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:after{border-bottom-color:var(--primary-inner)!important}div.coer-text-box mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-text-box mat-form-field span.icon-container{position:absolute!important;top:1px!important;right:-14px!important;z-index:5!important;width:30px;height:40px;display:flex;align-items:center;justify-content:center}div.coer-text-box mat-form-field span.icon-container i{font-size:20px!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-xmark,div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass{color:#caced1!important;cursor:pointer!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-xmark:hover,div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass:hover{color:#6c757d!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-text-box mat-form-field span.placeholder{width:calc(100% + 32px)!important;height:40px!important;position:absolute!important;z-index:1!important;top:0!important;left:-16px!important;cursor:wait!important}div.coer-text-box mat-form-field .placeholder,div.coer-text-box mat-form-field .placeholder *,div.coer-text-box mat-form-field .placeholder-glow,div.coer-text-box mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-text-box mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!important}div.coer-text-box div.button-container{width:40px!important;height:40px!important;display:flex!important;align-items:center!important;justify-content:center!important;background-color:#e6e7e9!important}coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:transparent!important;padding-left:9px!important;padding-right:9px!important}coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple,coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:before,coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:after{border-bottom-color:transparent!important}coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:28px!important}coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix{height:28px!important}coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input{margin-top:3px!important;font-size:14px!important}coer-grid table tbody tr td.coer-textbox mat-form-field span.icon-container{transform:translate(-5px,-6px)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
|
|
1882
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerTextBox, isStandalone: false, selector: "coer-textbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, showClearIcon: { classPropertyName: "showClearIcon", publicName: "showClearIcon", isSignal: true, isRequired: false, transformFunction: null }, showSearchIcon: { classPropertyName: "showSearchIcon", publicName: "showSearchIcon", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onKeyupEnter: "onKeyupEnter", onInput: "onInput", onClickClear: "onClickClear", onClickSearch: "onClickSearch", onClickExternalButton: "onClickExternalButton" }, providers: [CONTROL_VALUE(CoerTextBox)], viewQueries: [{ propertyName: "matFormField", first: true, predicate: ["matFormField"], descendants: true, isSignal: true }, { propertyName: "coerTextBox", first: true, predicate: ["coerTextBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-form-field-component\">\r\n <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n width : width(), \r\n minWidth : minWidth(), \r\n maxWidth : maxWidth(),\r\n marginTop : marginTop(),\r\n marginRight : marginRight(),\r\n marginBottom: marginBottom(),\r\n marginLeft : marginLeft() \r\n }\">\r\n\r\n @if(_showexternalButtonLeft) {\r\n <div class=\"external-button-container-left\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n \r\n <mat-form-field\r\n [id]=\"_id + '-container'\"\r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'width-100' : true,\r\n 'readonly' : isReadonly() && !isLoading(),\r\n 'display-none': isInvisible() || isLoading()\r\n }\"\r\n [style]=\"{ \r\n 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\">\r\n <mat-label>{{ label() }}</mat-label>\r\n \r\n <input #coerTextBox matInput\r\n [id]=\"_id\"\r\n type=\"text\"\r\n [placeholder]=\"placeholder()\"\r\n [minLength]=\"minLength()\"\r\n [maxLength]=\"maxLength()\"\r\n [disabled]=\"!_isEnable()\"\r\n [value]=\"_value\"\r\n (input)=\"SetValue(coerTextBox.value)\"\r\n (blur)=\"SetTouched(true)\"\r\n [style]=\"{\r\n 'margin-top' : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight(),\r\n 'text-align' : textPosition()\r\n }\"> \r\n \r\n <span class=\"icon-container\">\r\n @if(_showSearchIcon) {\r\n <i class=\"icon-magnifying-glass cursor-pointer\" (click)=\"_ClickSearch()\"></i>\r\n }\r\n \r\n @else if(_showClearIcon) {\r\n <i class=\"icon-x cursor-pointer\" (click)=\"Clear(); this.onClickClear.emit();\"></i>\r\n }\r\n \r\n @else if(isInvalid() && _isEnable()) {\r\n <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n }\r\n \r\n @else if(isValid() && _isEnable()) {\r\n <i class=\"icon-circle-check icon-fill\"></i>\r\n }\r\n </span>\r\n </mat-form-field> \r\n \r\n <!-- Loading || Invisible -->\r\n @if(isLoading() || isInvisible()) {\r\n <div [ngClass]=\"{ \r\n 'loading' : isLoading(),\r\n 'invisible' : isInvisible() \r\n }\" \r\n [style]=\"{ \r\n 'width' : width(),\r\n 'min-width' : minWidth(),\r\n 'max-width' : maxWidth(),\r\n 'margin-top' : marginTop(),\r\n 'margin-right' : marginRight(),\r\n 'margin-bottom': marginBottom(),\r\n 'margin-left' : marginLeft(),\r\n 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\"\r\n > {{ isInvisible() ? '' : _value }} </div>\r\n }\r\n \r\n @if(_showexternalButtonRight) {\r\n <div class=\"external-button-container-right\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
|
|
1741
1883
|
}
|
|
1742
1884
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTextBox, decorators: [{
|
|
1743
1885
|
type: Component,
|
|
1744
|
-
args: [{ selector: 'coer-textbox', providers: [CONTROL_VALUE(CoerTextBox)], standalone: false, template: "<div class=\"coer-
|
|
1886
|
+
args: [{ selector: 'coer-textbox', providers: [CONTROL_VALUE(CoerTextBox)], standalone: false, template: "<div class=\"coer-form-field-component\">\r\n <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n width : width(), \r\n minWidth : minWidth(), \r\n maxWidth : maxWidth(),\r\n marginTop : marginTop(),\r\n marginRight : marginRight(),\r\n marginBottom: marginBottom(),\r\n marginLeft : marginLeft() \r\n }\">\r\n\r\n @if(_showexternalButtonLeft) {\r\n <div class=\"external-button-container-left\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n \r\n <mat-form-field\r\n [id]=\"_id + '-container'\"\r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'width-100' : true,\r\n 'readonly' : isReadonly() && !isLoading(),\r\n 'display-none': isInvisible() || isLoading()\r\n }\"\r\n [style]=\"{ \r\n 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\">\r\n <mat-label>{{ label() }}</mat-label>\r\n \r\n <input #coerTextBox matInput\r\n [id]=\"_id\"\r\n type=\"text\"\r\n [placeholder]=\"placeholder()\"\r\n [minLength]=\"minLength()\"\r\n [maxLength]=\"maxLength()\"\r\n [disabled]=\"!_isEnable()\"\r\n [value]=\"_value\"\r\n (input)=\"SetValue(coerTextBox.value)\"\r\n (blur)=\"SetTouched(true)\"\r\n [style]=\"{\r\n 'margin-top' : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight(),\r\n 'text-align' : textPosition()\r\n }\"> \r\n \r\n <span class=\"icon-container\">\r\n @if(_showSearchIcon) {\r\n <i class=\"icon-magnifying-glass cursor-pointer\" (click)=\"_ClickSearch()\"></i>\r\n }\r\n \r\n @else if(_showClearIcon) {\r\n <i class=\"icon-x cursor-pointer\" (click)=\"Clear(); this.onClickClear.emit();\"></i>\r\n }\r\n \r\n @else if(isInvalid() && _isEnable()) {\r\n <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n }\r\n \r\n @else if(isValid() && _isEnable()) {\r\n <i class=\"icon-circle-check icon-fill\"></i>\r\n }\r\n </span>\r\n </mat-form-field> \r\n \r\n <!-- Loading || Invisible -->\r\n @if(isLoading() || isInvisible()) {\r\n <div [ngClass]=\"{ \r\n 'loading' : isLoading(),\r\n 'invisible' : isInvisible() \r\n }\" \r\n [style]=\"{ \r\n 'width' : width(),\r\n 'min-width' : minWidth(),\r\n 'max-width' : maxWidth(),\r\n 'margin-top' : marginTop(),\r\n 'margin-right' : marginRight(),\r\n 'margin-bottom': marginBottom(),\r\n 'margin-left' : marginLeft(),\r\n 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\"\r\n > {{ isInvisible() ? '' : _value }} </div>\r\n }\r\n \r\n @if(_showexternalButtonRight) {\r\n <div class=\"external-button-container-right\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n </div>\r\n</div>" }]
|
|
1745
1887
|
}], ctorParameters: () => [] });
|
|
1746
1888
|
|
|
1747
1889
|
class CoerGridExtension extends ControlValue {
|
|
@@ -2836,7 +2978,7 @@ class CoerGrid extends CoerGridExtension {
|
|
|
2836
2978
|
}
|
|
2837
2979
|
}
|
|
2838
2980
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGrid, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2839
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerGrid, isStandalone: false, selector: "coer-grid", providers: [CONTROL_VALUE(CoerGrid)], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-grid\" [ngStyle]=\"{ 'width': width(), 'min-Width': MinWidth(), 'max-Width': MaxWidth(), 'margin': margin() }\">\r\n <header [id]=\"_id + '-header'\" class=\"row\">\r\n <!-- Slot -->\r\n <ng-content></ng-content>\r\n\r\n <!-- Export Button -->\r\n @if(exportButton.show && gridLength().dataSource > 0) {\r\n <div class=\"col-auto\">\r\n <coer-button\r\n type=\"icon\"\r\n [color]=\"_ColorButton(exportButton)\"\r\n icon=\"excel\"\r\n [tooltip]=\"_isLoading() ? 'Loading' : (exportButton.tooltip || 'Export')\"\r\n tooltipPosition=\"top\"\r\n [path]=\"(exportButton && exportButton.path) ? exportButton.path : []\"\r\n [isDisabled]=\"_isDisabled() || _isLoading() || (exportButton.isDisabled || false)\"\r\n [isLoading]=\"_isLoading()\" \r\n (onClick)=\"_Export(!exportButton.preventDefault)\"\r\n ></coer-button>\r\n </div>\r\n }\r\n\r\n <!-- Import Button -->\r\n @if(importButton.show && !isReadonly()) {\r\n <div class=\"col-auto\">\r\n <input type=\"file\" #inputFileRef [multiple]=\"false\" (change)=\"_Import($event)\">\r\n\r\n <coer-button\r\n type=\"icon\"\r\n color=\"primary\"\r\n [color]=\"_ColorButton(importButton)\"\r\n [tooltip]=\"importButton.tooltip || 'Import'\"\r\n tooltipPosition=\"top\"\r\n [path]=\"(importButton && importButton.path) ? importButton.path : []\"\r\n [isDisabled]=\"importButton.isDisabled || false\" \r\n (onClick)=\"_Import()\"\r\n ></coer-button>\r\n </div>\r\n }\r\n\r\n <!-- Add Button -->\r\n @if(addButton.show && !isReadonly()) {\r\n <div class=\"col-auto\">\r\n <coer-button\r\n type=\"icon\"\r\n [color]=\"_ColorButton(addButton)\"\r\n icon=\"new\"\r\n [tooltip]=\"addButton.tooltip || 'New'\"\r\n tooltipPosition=\"top\"\r\n [path]=\"(addButton && addButton.path) ? addButton.path : []\"\r\n [isDisabled]=\"addButton.isDisabled || false\" \r\n (onClick)=\"onClickAdd.emit()\"\r\n ></coer-button>\r\n </div>\r\n }\r\n\r\n <!-- Save Button -->\r\n @if(saveButton.show && !isReadonly()) {\r\n <div class=\"col-auto\">\r\n <coer-button\r\n type=\"icon\"\r\n [color]=\"_ColorButton(saveButton)\"\r\n icon=\"save\"\r\n [tooltip]=\"saveButton.tooltip || 'Save'\"\r\n tooltipPosition=\"top\"\r\n [path]=\"(saveButton && saveButton.path) ? saveButton.path : []\"\r\n [isDisabled]=\"saveButton.isDisabled || false\" \r\n (onClick)=\"onClickSave.emit()\"\r\n ></coer-button>\r\n </div>\r\n }\r\n\r\n <!-- Search -->\r\n @if(search.show) {\r\n <div class=\"col-auto\">\r\n <coer-textbox\r\n #inputSearch\r\n [id]=\"_GetId(-1, -1, 'search')\"\r\n [ngModel]=\"_gridSearch()\"\r\n placeholder=\"Search\"\r\n [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n [selectOnFocus]=\"true\"\r\n width=\"250px\"\r\n [showSearchIcon]=\"true\"\r\n [showClearIcon]=\"true\"\r\n (onInput)=\"_InputChange(-1, 'Search', $event, 'coer-textbox-search')\"\r\n (onClickClear)=\"_InputChange(-1, 'Search', '', 'coer-textbox-search')\"\r\n (onKeyupEnter)=\"_KeyupEnter(-1, { indexRow: -1 }, 'coer-textbox-search', $event);\"\r\n ></coer-textbox>\r\n </div>\r\n }\r\n </header>\r\n\r\n <section [ngClass]=\"{ 'grid-container': true, 'invisible': isInvisible() }\"> \r\n <div #innerContainer [ngStyle]=\"{ 'height': _height, 'min-height': minHeight(), 'max-height': maxHeight() }\"> \r\n @if(!_isDisabled() && gridLength().dataSource <= 0 && !isLoading()) {\r\n <div class=\"no-data\"> No Data </div>\r\n }\r\n \r\n <div [ngClass]=\"{ 'display-none' : isLoading() }\">\r\n <table class=\"table table-sm table-responsive table-striped\">\r\n <thead>\r\n <tr>\r\n @if(checkbox.show && gridLength().dataSource > 0) {\r\n <!-- CheckBox Column -->\r\n <th scope=\"col\" class=\"check-box\">\r\n <div *ngIf=\"!_onlyOneCheck\" [ngClass]=\"{ 'invisible': _isLoadingMessage }\">\r\n <coer-checkbox\r\n [id]=\"_GetId(0, 0, 'checkboxAll')\"\r\n [ignoreDataBinding]=\"true\"\r\n [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n (onChange)=\"_ClickCheck(_GetId(0, 0, 'checkboxAll'), $event, true)\"\r\n ></coer-checkbox>\r\n </div>\r\n </th>\r\n }\r\n \r\n <!-- Dynamic Grid Column -->\r\n @for(header of _gridColumns(); track header.indexColumn) {\r\n <th scope=\"col\" (dblclick)=\"Sort(header.columnName)\"\r\n [ngClass]=\"{\r\n 'no-selection': true,\r\n 'cursor-default': !enableSort() && !_isLoading(),\r\n 'cursor-pointer': enableSort() && !_isLoading(),\r\n 'cursor-wait': _isLoading()\r\n }\"\r\n [ngStyle]=\"{\r\n 'width': header.width,\r\n 'text-align': _GetAttribute(header.columnName, null, 'textAlign', 'defaul-cell')\r\n }\">\r\n <div class=\"no-selection d-flex align-items-center\">\r\n <span class=\"me-1\"> {{ _GetColumnName(header.columnName) }} </span>\r\n <i [class]=\"_GetShortIcon(header.columnName)\"></i> \r\n <i [class]=\"_GetSearchIcon(header.columnName)\"></i>\r\n </div>\r\n </th>\r\n }\r\n \r\n <!-- Delete Button Column -->\r\n @if(_ButtonByRow('showDeleteButton')) {\r\n <th scope=\"col\" class=\"action-button\"></th>\r\n }\r\n \r\n <!-- Edit Button Column -->\r\n @if(_ButtonByRow('showEditButton')) {\r\n <th scope=\"col\" class=\"action-button\"></th>\r\n }\r\n \r\n <!-- Go Button Column -->\r\n @if(_ButtonByRow('showGoButton')) {\r\n <th scope=\"col\" class=\"action-button\"></th>\r\n }\r\n </tr>\r\n </thead>\r\n \r\n <!-- body -->\r\n @for(group of _gridDataSource(); track group.indexGroup) {\r\n <tbody>\r\n <!--<tr v-if=\"_isGrouped\">\r\n <td :colspan=\"_colspan\" class=\"group\">\r\n <MesAccordion\r\n :ref=\"`accordion${group.indexGroup}-${id}`\"\r\n :title=\"`${_CleanHeaderName(groupBy)} (${group.length}): ${group.groupBy}`\"\r\n :isLoading=\"_isLoading()\"\r\n @expanded=\"_ToogleAccordion(group.groupBy, true, group.indexGroup)\"\r\n @collapsed=\"_ToogleAccordion(group.groupBy, false, group.indexGroup)\"\r\n ></MesAccordion>\r\n </td>\r\n </tr>-->\r\n \r\n @for(row of group.rows; track row.indexRow) {\r\n <tr [id]=\"_GetId(row.indexRow, 0, 'row')\"\r\n [ngClass]=\"{ 'loading': isLoading(), 'd-none': _HideRow(group), 'row-focus': (row.indexRow == _indexFocus() && enableRowFocus()) }\"\r\n (click)=\"_indexFocus.set(row.indexRow)\">\r\n \r\n @if(checkbox.show) {\r\n <!-- CheckBox Column -->\r\n <td class=\"check-box\">\r\n <div [ngClass]=\"{ 'invisible': _isLoadingMessage }\">\r\n <coer-checkbox\r\n [id]=\"_GetId(row.indexRow, 0, 'checkbox')\"\r\n [ignoreDataBinding]=\"true\"\r\n [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n (onChange)=\"_ClickCheck(_GetId(row.indexRow, 0, 'checkbox'), $event, false, row)\"\r\n ></coer-checkbox>\r\n </div>\r\n \r\n <div [ngClass]=\"{ 'invisible': !_isLoadingMessage, 'spinner-border-container': true }\">\r\n <i class=\"spinner-border\"></i>\r\n </div>\r\n </td>\r\n }\r\n \r\n <!-- Dynamic Column -->\r\n @for(header of _gridColumns(); track header.indexColumn) {\r\n @if(_IsCellType(header.columnName, row, 'template')) {\r\n <td class=\"template\"\r\n (click)=\"_isDisabled() ? null : onClickRow.emit(row)\"\r\n (dblclick)=\"_isDisabled() ? null : onDoubleClickRow.emit(row)\">\r\n <div [innerHTML]=\"_GetAttribute(header.columnName, row, 'template', 'defaul-cell') | html\" class=\"template\"></div>\r\n </td>\r\n }\r\n \r\n @else if(_IsCellType(header.columnName, row, 'coerTextbox')) {\r\n <!-- coer-textbox -->\r\n <td class=\"coer-textbox\">\r\n <coer-textbox\r\n [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n [(ngModel)]=\"row[header.columnName]\"\r\n [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerTextbox') || _isDisabled() || _isLoading()\"\r\n [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerTextbox') || false\"\r\n [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerTextbox') || false\"\r\n [selectOnFocus]=\"_GetAttribute(header.columnName, row, 'selectOnFocus', 'coerTextbox') || true\"\r\n [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerTextbox') || ('Type ' + header.columnName + '...')\"\r\n [textPosition]=\"_GetAttribute(header.columnName, row, 'textPosition', 'coerTextbox') || 'left'\"\r\n [minLength]=\"_GetAttribute(header.columnName, row, 'minLength', 'coerTextbox') || 0\"\r\n [maxLength]=\"_GetAttribute(header.columnName, row, 'maxLength', 'coerTextbox') || 50\"\r\n (onInput)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-textbox')\"\r\n (onKeyupEnter)=\"_KeyupEnter(header.indexColumn, row, 'coer-textbox', $event)\"\r\n ></coer-textbox>\r\n </td>\r\n }\r\n \r\n \r\n @else if(_IsCellType(header.columnName, row, 'coerNumberbox')) {\r\n <!-- coer-numberbox -->\r\n <td class=\"coer-numberbox\">\r\n <coer-numberbox\r\n [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n [(ngModel)]=\"row[header.columnName]\"\r\n [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerNumberbox') || _isDisabled() || _isLoading()\"\r\n [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerNumberbox') || false\"\r\n [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerNumberbox') || false\"\r\n [selectOnFocus]=\"_GetAttribute(header.columnName, row, 'selectOnFocus', 'coerNumberbox') || true\"\r\n [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerNumberbox') || ''\"\r\n [textPosition]=\"_GetAttribute(header.columnName, row, 'textPosition', 'coerNumberbox') || 'right'\"\r\n [min]=\"_GetAttribute(header.columnName, row, 'min', 'coerNumberbox') || 0\"\r\n [max]=\"_GetAttribute(header.columnName, row, 'max', 'coerNumberbox') || 2147483647\"\r\n [decimals]=\"_GetAttribute(header.columnName, row, 'decimals', 'coerNumberbox') || 0\"\r\n (onInput)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-numberbox')\"\r\n (onKeyupEnter)=\"_KeyupEnter(header.indexColumn, row, 'coer-numberbox', $event)\"\r\n ></coer-numberbox>\r\n </td>\r\n }\r\n \r\n \r\n @else if(_IsCellType(header.columnName, row, 'coerSelectbox')) {\r\n <!-- coer-numberbox -->\r\n <td class=\"coer-selectbox\">\r\n <coer-selectbox\r\n [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n [(ngModel)]=\"row[header.columnName]\"\r\n [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerSelectbox') || _isDisabled() || _isLoading()\"\r\n [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerSelectbox') || false\"\r\n [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerSelectbox') || false\"\r\n [dataSource]=\"_GetAttribute(header.columnName, row, 'dataSource', 'coerSelectbox') || []\"\r\n [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerSelectbox') || '-- Select --'\"\r\n [displayProperty]=\"_GetAttribute(header.columnName, row, 'displayProperty', 'coerSelectbox') || 'name'\"\r\n (onSelected)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-selectbox'); _KeyupEnter(header.indexColumn, row, 'coer-selectbox', $event)\"\r\n ></coer-selectbox>\r\n </td>\r\n }\r\n \r\n \r\n @else if(_IsCellType(header.columnName, row, 'coerSwitch')) {\r\n <!-- coer-switch -->\r\n <td>\r\n <coer-switch\r\n [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n [(ngModel)]=\"row[header.columnName]\"\r\n [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerSwitch') || _isDisabled() || _isLoading()\"\r\n [tooltip]=\"_GetAttribute(header.columnName, row, 'tooltip', 'coerSwitch')\"\r\n [tooltipPosition]=\"_GetAttribute(header.columnName, row, 'tooltipPosition', 'coerSwitch') || 'left'\"\r\n [isInvisible]=\"_isDisabled()\"\r\n (onChange)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-switch')\"\r\n ></coer-switch>\r\n </td>\r\n }\r\n \r\n @else {\r\n <!-- Default Cell -->\r\n <td class=\"default-cell\"\r\n (click)=\"_ClickOnRow(row)\"\r\n (dblclick)=\"_isDisabled() ? null : onDoubleClickRow.emit(row)\"\r\n [ngStyle]=\"{\r\n 'text-align': _GetAttribute(header.columnName, row, 'textAlign', 'defaul-cell'),\r\n 'white-space': 'normal'\r\n }\">\r\n \r\n <div [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n [ngClass]=\"{\r\n 'text-blue-bold': _IsCellColor(header.columnName, row, 'colorBlue'),\r\n 'text-green-bold': _IsCellColor(header.columnName, row, 'colorGreen'),\r\n 'text-yellow-bold': _IsCellColor(header.columnName, row, 'colorYellow'),\r\n 'text-red-bold': _IsCellColor(header.columnName, row, 'colorRed'),\r\n 'text-right-bold': _IsCellType(header.columnName, row, 'number')\r\n }\">\r\n \r\n @if(_IsCellType(header.columnName, row, 'number')) {\r\n <span> {{ GetNumericFormat(row[header.columnName]) }} </span>\r\n }\r\n \r\n @else if(_IsCellType(header.columnName, row, 'date')) {\r\n <span> {{ _GetDateFormat(row[header.columnName], _IsCellType(header.columnName, row, 'toLocalZone')) }} </span>\r\n }\r\n \r\n @else if(_IsCellType(header.columnName, row, 'date-time')) {\r\n <span> {{ _GetDateTimeFormat(row[header.columnName], _IsCellType(header.columnName, row, 'toLocalZone')) }} </span>\r\n }\r\n \r\n @else {\r\n <span> {{ _GetCellValue(row, header.columnName) }} </span>\r\n }\r\n </div>\r\n </td>\r\n }\r\n }\r\n \r\n <!-- Delete Button -->\r\n @if(_ButtonByRow('showDeleteButton')) {\r\n <td class=\"action-button\">\r\n @if(_ButtonByRow('showDeleteButton', row)) {\r\n <coer-button\r\n type=\"icon-no-border\"\r\n [color]=\"_ColorButtonByRow('deleteButtonColor')\"\r\n icon=\"delete\"\r\n [tooltip]=\"_GetTooltip('Delete', row)\"\r\n [isInvisible]=\"_isDisabled()\"\r\n [isReadonly]=\"isReadonly()\"\r\n [isDisabled]=\"_isLoading()\"\r\n (onClick)=\"onClickDeleteRow.emit(row)\"\r\n ></coer-button>\r\n }\r\n </td>\r\n }\r\n \r\n <!-- Edit Button -->\r\n @if(_ButtonByRow('showEditButton')) {\r\n <td class=\"action-button\">\r\n @if(_ButtonByRow('showEditButton', row)) {\r\n <coer-button\r\n type=\"icon-no-border\"\r\n [color]=\"_ColorButtonByRow('editButtonColor')\"\r\n icon=\"edit\"\r\n [tooltip]=\"_GetTooltip('Edit', row)\"\r\n [isInvisible]=\"_isDisabled()\"\r\n [isDisabled]=\"_isLoading()\"\r\n (onClick)=\"onClickEditRow.emit(row)\"\r\n ></coer-button>\r\n }\r\n </td>\r\n }\r\n \r\n <!-- Go Button -->\r\n @if(_ButtonByRow('showGoButton')) {\r\n <td class=\"action-button\">\r\n @if(_ButtonByRow('showGoButton', row)) {\r\n <coer-button\r\n type=\"icon-no-border\"\r\n [color]=\"_ColorButtonByRow('goButtonColor')\"\r\n icon=\"go\"\r\n [tooltip]=\"_GetTooltip('Go to', row, 'detail')\"\r\n [isInvisible]=\"_isDisabled()\"\r\n [isDisabled]=\"_isLoading()\"\r\n (onClick)=\"onClickGoRow.emit(row)\"\r\n ></coer-button>\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n }\r\n </table>\r\n </div>\r\n\r\n @if(isLoading()) {\r\n <!-- Grid Message -->\r\n <div class=\"loading\" [ngStyle]=\"{ \r\n 'width': '100%', \r\n 'height': '100%',\r\n 'bottom': showFooter() ? '35px' : '10px'\r\n }\">\r\n <i class=\"spinner-border\"></i>\r\n <span class=\"fa-fade\">Loading</span>\r\n </div> \r\n }\r\n </div>\r\n </section>\r\n\r\n @if(showFooter()) {\r\n <footer class=\"grid-footer\">\r\n <span>\r\n @if(_isLoadingMessage) {\r\n <span class=\"fa-fade\"> Loading </span>\r\n }\r\n\r\n @else if(gridLength().dataSourceSelected > 0) {\r\n <span>\r\n <i class=\"bi bi-check2-square ms-1\"></i>\r\n {{ gridLength().dataSourceSelected }}\r\n </span>\r\n }\r\n </span>\r\n\r\n <span class=\"me-1\"> {{ gridLength().dataSourceFiltered | numericFormat }} Rows </span>\r\n </footer>\r\n }\r\n</div>", styles: ["div.coer-grid header{align-items:flex-end;justify-content:flex-end;padding-right:8px;margin:0}div.coer-grid header>div{padding:0 0 10px 10px;display:flex;align-items:baseline}div.coer-grid header>div a{height:40px!important}div.coer-grid table{table-layout:auto;border-collapse:separate;border-spacing:1px 0px;margin:0;font-size:14px}div.coer-grid table thead tr th{position:sticky!important;z-index:100!important;top:0!important;background-color:var(--gray)!important;color:var(--smoke)!important;padding:5px!important;vertical-align:middle!important;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;min-width:50px!important;white-space:nowrap!important}div.coer-grid table tbody{border:0px!important}div.coer-grid table tbody tr:not(.row-focus):hover td{color:#000!important;background-color:#f1f6ff}div.coer-grid table tbody tr td{border:0px!important;padding:5px!important;vertical-align:middle!important;white-space:break-spaces;text-overflow:ellipsis;overflow:hidden;min-height:31px!important}div.coer-grid table tbody tr.row-focus td{background-color:#cde1ff}div.coer-grid table tbody tr td.coer-textbox,div.coer-grid table tbody tr td.coer-numberbox,div.coer-grid table tbody tr td.coer-selectbox{padding:0!important;overflow:visible!important}div.coer-grid table tbody tr td.default-cell{cursor:pointer!important}div.coer-grid table thead tr th.action-button,div.coer-grid table thead tr td.action-button,div.coer-grid table thead tr th.check-box,div.coer-grid table thead tr td.check-box,div.coer-grid table tbody tr th.action-button,div.coer-grid table tbody tr td.action-button,div.coer-grid table tbody tr th.check-box table tbody tr td.check-box{text-align:center!important;cursor:default!important;min-width:40px!important;max-width:40px!important;width:40px!important;padding:0!important}div.coer-grid footer.grid-footer{display:flex;align-items:center;justify-content:space-between;font-size:small;color:#999;padding-top:5px}div.coer-grid section.grid-container{position:relative;overflow:auto}div.coer-grid div.loading,div.coer-grid div.no-data{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;color:gray}div.coer-grid div.loading{background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important;z-index:1}div.coer-grid div.loading span.fa-fade{position:relative!important;top:50px!important}div.coer-grid tr.loading{background-color:#bbbbbb83!important}div.coer-grid div.loading i.spinner-border{color:var(--primary-inner)!important;width:70px!important;height:70px!important;font-size:20px!important;position:absolute!important}div.coer-grid td.check-box div.spinner-border-container{position:absolute;transform:translate(7px,-19px)}div.coer-grid td.check-box div.spinner-border-container i.spinner-border{width:15px!important;height:15px!important;color:var(--primary-inner)!important}div.coer-grid table thead tr th.check-box>div,div.coer-grid table tbody tr td.check-box>div{display:flex;align-items:center;justify-content:center;cursor:default!important}div.coer-grid input.form-check-input{box-shadow:none!important;margin:0}div.coer-grid input[type=checkbox]{cursor:pointer!important}div.coer-grid td.group{padding:0!important;margin:0!important}div.coer-grid td.group>*{border-top:1px solid var(--gray)!important;border-bottom:1px solid var(--gray)!important;padding:0!important;margin:0!important}div.coer-grid .template,div.coer-grid .template div{white-space:nowrap!important;display:flex!important;align-items:center!important;cursor:pointer!important;gap:5px!important;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }, { kind: "component", type: CoerCheckbox, selector: "coer-checkbox", inputs: ["id", "label", "labelPosition", "isLoading", "isDisabled", "isReadonly", "isInvisible", "ignoreDataBinding", "value"], outputs: ["onChange"] }, { kind: "component", type: CoerNumberBox, selector: "coer-numberbox", inputs: ["id", "value", "label", "placeholder", "textPosition", "min", "max", "isInvalid", "isValid", "externalButton", "selectOnFocus", "decimals", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput", "onClickExternalButton"] }, { kind: "component", type: CoerSelectbox, selector: "coer-selectbox", inputs: ["id", "value", "label", "placeholder", "isInvalid", "isValid", "dataSource", "displayProperty", "rowsByPage", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onSelected", "onUnselect"] }, { kind: "component", type: CoerSwitch, selector: "coer-switch", inputs: ["id", "value", "label", "labelPosition", "isLoading", "isDisabled", "isReadonly", "isInvisible", "tooltip", "tooltipPosition"], outputs: ["onChange"] }, { kind: "component", type: CoerTextBox, selector: "coer-textbox", inputs: ["id", "value", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "externalButton", "selectOnFocus", "showClearIcon", "showSearchIcon", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput", "onClickClear", "onClickSearch", "onClickExternalButton"] }, { kind: "pipe", type: i9.HtmlPipe, name: "html" }, { kind: "pipe", type: i9.NumericFormatPipe, name: "numericFormat" }] }); }
|
|
2981
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerGrid, isStandalone: false, selector: "coer-grid", providers: [CONTROL_VALUE(CoerGrid)], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-grid\" [ngStyle]=\"{ 'width': width(), 'min-Width': MinWidth(), 'max-Width': MaxWidth(), 'margin': margin() }\">\r\n <header [id]=\"_id + '-header'\" class=\"row\">\r\n <!-- Slot -->\r\n <ng-content></ng-content>\r\n\r\n <!-- Export Button -->\r\n @if(exportButton.show && gridLength().dataSource > 0) {\r\n <div class=\"col-auto\">\r\n <coer-button\r\n type=\"icon\"\r\n [color]=\"_ColorButton(exportButton)\"\r\n icon=\"excel\"\r\n [tooltip]=\"_isLoading() ? 'Loading' : (exportButton.tooltip || 'Export')\"\r\n tooltipPosition=\"top\"\r\n [path]=\"(exportButton && exportButton.path) ? exportButton.path : []\"\r\n [isDisabled]=\"_isDisabled() || _isLoading() || (exportButton.isDisabled || false)\"\r\n [isLoading]=\"_isLoading()\" \r\n (onClick)=\"_Export(!exportButton.preventDefault)\"\r\n ></coer-button>\r\n </div>\r\n }\r\n\r\n <!-- Import Button -->\r\n @if(importButton.show && !isReadonly()) {\r\n <div class=\"col-auto\">\r\n <input type=\"file\" #inputFileRef [multiple]=\"false\" (change)=\"_Import($event)\">\r\n\r\n <coer-button\r\n type=\"icon\"\r\n color=\"primary\"\r\n [color]=\"_ColorButton(importButton)\"\r\n [tooltip]=\"importButton.tooltip || 'Import'\"\r\n tooltipPosition=\"top\"\r\n [path]=\"(importButton && importButton.path) ? importButton.path : []\"\r\n [isDisabled]=\"importButton.isDisabled || false\" \r\n (onClick)=\"_Import()\"\r\n ></coer-button>\r\n </div>\r\n }\r\n\r\n <!-- Add Button -->\r\n @if(addButton.show && !isReadonly()) {\r\n <div class=\"col-auto\">\r\n <coer-button\r\n type=\"icon\"\r\n [color]=\"_ColorButton(addButton)\"\r\n icon=\"new\"\r\n [tooltip]=\"addButton.tooltip || 'New'\"\r\n tooltipPosition=\"top\"\r\n [path]=\"(addButton && addButton.path) ? addButton.path : []\"\r\n [isDisabled]=\"addButton.isDisabled || false\" \r\n (onClick)=\"onClickAdd.emit()\"\r\n ></coer-button>\r\n </div>\r\n }\r\n\r\n <!-- Save Button -->\r\n @if(saveButton.show && !isReadonly()) {\r\n <div class=\"col-auto\">\r\n <coer-button\r\n type=\"icon\"\r\n [color]=\"_ColorButton(saveButton)\"\r\n icon=\"save\"\r\n [tooltip]=\"saveButton.tooltip || 'Save'\"\r\n tooltipPosition=\"top\"\r\n [path]=\"(saveButton && saveButton.path) ? saveButton.path : []\"\r\n [isDisabled]=\"saveButton.isDisabled || false\" \r\n (onClick)=\"onClickSave.emit()\"\r\n ></coer-button>\r\n </div>\r\n }\r\n\r\n <!-- Search -->\r\n @if(search.show) {\r\n <div class=\"col-auto\">\r\n <coer-textbox\r\n #inputSearch\r\n [id]=\"_GetId(-1, -1, 'search')\"\r\n [ngModel]=\"_gridSearch()\"\r\n placeholder=\"Search\"\r\n [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n [selectOnFocus]=\"true\"\r\n width=\"250px\"\r\n [showSearchIcon]=\"true\"\r\n [showClearIcon]=\"true\"\r\n (onInput)=\"_InputChange(-1, 'Search', $event, 'coer-textbox-search')\"\r\n (onClickClear)=\"_InputChange(-1, 'Search', '', 'coer-textbox-search')\"\r\n (onKeyupEnter)=\"_KeyupEnter(-1, { indexRow: -1 }, 'coer-textbox-search', $event);\"\r\n ></coer-textbox>\r\n </div>\r\n }\r\n </header>\r\n\r\n <section [ngClass]=\"{ 'grid-container': true, 'invisible': isInvisible() }\"> \r\n <div #innerContainer [ngStyle]=\"{ 'height': _height, 'min-height': minHeight(), 'max-height': maxHeight() }\"> \r\n @if(!_isDisabled() && gridLength().dataSource <= 0 && !isLoading()) {\r\n <div class=\"no-data\"> No Data </div>\r\n }\r\n \r\n <div [ngClass]=\"{ 'display-none' : isLoading() }\">\r\n <table class=\"table table-sm table-responsive table-striped\">\r\n <thead>\r\n <tr>\r\n @if(checkbox.show && gridLength().dataSource > 0) {\r\n <!-- CheckBox Column -->\r\n <th scope=\"col\" class=\"check-box\">\r\n <div *ngIf=\"!_onlyOneCheck\" [ngClass]=\"{ 'invisible': _isLoadingMessage }\">\r\n <coer-checkbox\r\n [id]=\"_GetId(0, 0, 'checkboxAll')\"\r\n [ignoreDataBinding]=\"true\"\r\n [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n (onChange)=\"_ClickCheck(_GetId(0, 0, 'checkboxAll'), $event, true)\"\r\n ></coer-checkbox>\r\n </div>\r\n </th>\r\n }\r\n \r\n <!-- Dynamic Grid Column -->\r\n @for(header of _gridColumns(); track header.indexColumn) {\r\n <th scope=\"col\" (dblclick)=\"Sort(header.columnName)\"\r\n [ngClass]=\"{\r\n 'no-selection': true,\r\n 'cursor-default': !enableSort() && !_isLoading(),\r\n 'cursor-pointer': enableSort() && !_isLoading(),\r\n 'cursor-wait': _isLoading()\r\n }\"\r\n [ngStyle]=\"{\r\n 'width': header.width,\r\n 'text-align': _GetAttribute(header.columnName, null, 'textAlign', 'defaul-cell')\r\n }\">\r\n <div class=\"no-selection d-flex align-items-center\">\r\n <span class=\"me-1\"> {{ _GetColumnName(header.columnName) }} </span>\r\n <i [class]=\"_GetShortIcon(header.columnName)\"></i> \r\n <i [class]=\"_GetSearchIcon(header.columnName)\"></i>\r\n </div>\r\n </th>\r\n }\r\n \r\n <!-- Delete Button Column -->\r\n @if(_ButtonByRow('showDeleteButton')) {\r\n <th scope=\"col\" class=\"action-button\"></th>\r\n }\r\n \r\n <!-- Edit Button Column -->\r\n @if(_ButtonByRow('showEditButton')) {\r\n <th scope=\"col\" class=\"action-button\"></th>\r\n }\r\n \r\n <!-- Go Button Column -->\r\n @if(_ButtonByRow('showGoButton')) {\r\n <th scope=\"col\" class=\"action-button\"></th>\r\n }\r\n </tr>\r\n </thead>\r\n \r\n <!-- body -->\r\n @for(group of _gridDataSource(); track group.indexGroup) {\r\n <tbody>\r\n <!--<tr v-if=\"_isGrouped\">\r\n <td :colspan=\"_colspan\" class=\"group\">\r\n <MesAccordion\r\n :ref=\"`accordion${group.indexGroup}-${id}`\"\r\n :title=\"`${_CleanHeaderName(groupBy)} (${group.length}): ${group.groupBy}`\"\r\n :isLoading=\"_isLoading()\"\r\n @expanded=\"_ToogleAccordion(group.groupBy, true, group.indexGroup)\"\r\n @collapsed=\"_ToogleAccordion(group.groupBy, false, group.indexGroup)\"\r\n ></MesAccordion>\r\n </td>\r\n </tr>-->\r\n \r\n @for(row of group.rows; track row.indexRow) {\r\n <tr [id]=\"_GetId(row.indexRow, 0, 'row')\"\r\n [ngClass]=\"{ 'loading': isLoading(), 'd-none': _HideRow(group), 'row-focus': (row.indexRow == _indexFocus() && enableRowFocus()) }\"\r\n (click)=\"_indexFocus.set(row.indexRow)\">\r\n \r\n @if(checkbox.show) {\r\n <!-- CheckBox Column -->\r\n <td class=\"check-box\">\r\n <div [ngClass]=\"{ 'invisible': _isLoadingMessage }\">\r\n <coer-checkbox\r\n [id]=\"_GetId(row.indexRow, 0, 'checkbox')\"\r\n [ignoreDataBinding]=\"true\"\r\n [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n (onChange)=\"_ClickCheck(_GetId(row.indexRow, 0, 'checkbox'), $event, false, row)\"\r\n ></coer-checkbox>\r\n </div>\r\n \r\n <div [ngClass]=\"{ 'invisible': !_isLoadingMessage, 'spinner-border-container': true }\">\r\n <i class=\"spinner-border\"></i>\r\n </div>\r\n </td>\r\n }\r\n \r\n <!-- Dynamic Column -->\r\n @for(header of _gridColumns(); track header.indexColumn) {\r\n @if(_IsCellType(header.columnName, row, 'template')) {\r\n <td class=\"template\"\r\n (click)=\"_isDisabled() ? null : onClickRow.emit(row)\"\r\n (dblclick)=\"_isDisabled() ? null : onDoubleClickRow.emit(row)\">\r\n <div [innerHTML]=\"_GetAttribute(header.columnName, row, 'template', 'defaul-cell') | html\" class=\"template\"></div>\r\n </td>\r\n }\r\n \r\n @else if(_IsCellType(header.columnName, row, 'coerTextbox')) {\r\n <!-- coer-textbox -->\r\n <td class=\"coer-textbox\">\r\n <coer-textbox\r\n [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n [(ngModel)]=\"row[header.columnName]\"\r\n [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerTextbox') || _isDisabled() || _isLoading()\"\r\n [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerTextbox') || false\"\r\n [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerTextbox') || false\"\r\n [selectOnFocus]=\"_GetAttribute(header.columnName, row, 'selectOnFocus', 'coerTextbox') || true\"\r\n [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerTextbox') || ('Type ' + header.columnName + '...')\"\r\n [textPosition]=\"_GetAttribute(header.columnName, row, 'textPosition', 'coerTextbox') || 'left'\"\r\n [minLength]=\"_GetAttribute(header.columnName, row, 'minLength', 'coerTextbox') || 0\"\r\n [maxLength]=\"_GetAttribute(header.columnName, row, 'maxLength', 'coerTextbox') || 50\"\r\n (onInput)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-textbox')\"\r\n (onKeyupEnter)=\"_KeyupEnter(header.indexColumn, row, 'coer-textbox', $event)\"\r\n ></coer-textbox>\r\n </td>\r\n }\r\n \r\n \r\n @else if(_IsCellType(header.columnName, row, 'coerNumberbox')) {\r\n <!-- coer-numberbox -->\r\n <td class=\"coer-numberbox\">\r\n <coer-numberbox\r\n [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n [(ngModel)]=\"row[header.columnName]\"\r\n [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerNumberbox') || _isDisabled() || _isLoading()\"\r\n [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerNumberbox') || false\"\r\n [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerNumberbox') || false\"\r\n [selectOnFocus]=\"_GetAttribute(header.columnName, row, 'selectOnFocus', 'coerNumberbox') || true\"\r\n [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerNumberbox') || ''\"\r\n [textPosition]=\"_GetAttribute(header.columnName, row, 'textPosition', 'coerNumberbox') || 'right'\"\r\n [min]=\"_GetAttribute(header.columnName, row, 'min', 'coerNumberbox') || 0\"\r\n [max]=\"_GetAttribute(header.columnName, row, 'max', 'coerNumberbox') || 2147483647\"\r\n [decimals]=\"_GetAttribute(header.columnName, row, 'decimals', 'coerNumberbox') || 0\"\r\n (onInput)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-numberbox')\"\r\n (onKeyupEnter)=\"_KeyupEnter(header.indexColumn, row, 'coer-numberbox', $event)\"\r\n ></coer-numberbox>\r\n </td>\r\n }\r\n \r\n \r\n @else if(_IsCellType(header.columnName, row, 'coerSelectbox')) {\r\n <!-- coer-numberbox -->\r\n <td class=\"coer-selectbox\">\r\n <coer-selectbox\r\n [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n [(ngModel)]=\"row[header.columnName]\"\r\n [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerSelectbox') || _isDisabled() || _isLoading()\"\r\n [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerSelectbox') || false\"\r\n [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerSelectbox') || false\"\r\n [dataSource]=\"_GetAttribute(header.columnName, row, 'dataSource', 'coerSelectbox') || []\"\r\n [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerSelectbox') || '-- Select --'\"\r\n [displayProperty]=\"_GetAttribute(header.columnName, row, 'displayProperty', 'coerSelectbox') || 'name'\"\r\n (onSelected)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-selectbox'); _KeyupEnter(header.indexColumn, row, 'coer-selectbox', $event)\"\r\n ></coer-selectbox>\r\n </td>\r\n }\r\n \r\n \r\n @else if(_IsCellType(header.columnName, row, 'coerSwitch')) {\r\n <!-- coer-switch -->\r\n <td>\r\n <coer-switch\r\n [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n [(ngModel)]=\"row[header.columnName]\"\r\n [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerSwitch') || _isDisabled() || _isLoading()\"\r\n [tooltip]=\"_GetAttribute(header.columnName, row, 'tooltip', 'coerSwitch')\"\r\n [tooltipPosition]=\"_GetAttribute(header.columnName, row, 'tooltipPosition', 'coerSwitch') || 'left'\"\r\n [isInvisible]=\"_isDisabled()\"\r\n (onChange)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-switch')\"\r\n ></coer-switch>\r\n </td>\r\n }\r\n \r\n @else {\r\n <!-- Default Cell -->\r\n <td class=\"default-cell\"\r\n (click)=\"_ClickOnRow(row)\"\r\n (dblclick)=\"_isDisabled() ? null : onDoubleClickRow.emit(row)\"\r\n [ngStyle]=\"{\r\n 'text-align': _GetAttribute(header.columnName, row, 'textAlign', 'defaul-cell'),\r\n 'white-space': 'normal'\r\n }\">\r\n \r\n <div [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n [ngClass]=\"{\r\n 'text-blue-bold': _IsCellColor(header.columnName, row, 'colorBlue'),\r\n 'text-green-bold': _IsCellColor(header.columnName, row, 'colorGreen'),\r\n 'text-yellow-bold': _IsCellColor(header.columnName, row, 'colorYellow'),\r\n 'text-red-bold': _IsCellColor(header.columnName, row, 'colorRed'),\r\n 'text-right-bold': _IsCellType(header.columnName, row, 'number')\r\n }\">\r\n \r\n @if(_IsCellType(header.columnName, row, 'number')) {\r\n <span> {{ GetNumericFormat(row[header.columnName]) }} </span>\r\n }\r\n \r\n @else if(_IsCellType(header.columnName, row, 'date')) {\r\n <span> {{ _GetDateFormat(row[header.columnName], _IsCellType(header.columnName, row, 'toLocalZone')) }} </span>\r\n }\r\n \r\n @else if(_IsCellType(header.columnName, row, 'date-time')) {\r\n <span> {{ _GetDateTimeFormat(row[header.columnName], _IsCellType(header.columnName, row, 'toLocalZone')) }} </span>\r\n }\r\n \r\n @else {\r\n <span> {{ _GetCellValue(row, header.columnName) }} </span>\r\n }\r\n </div>\r\n </td>\r\n }\r\n }\r\n \r\n <!-- Delete Button -->\r\n @if(_ButtonByRow('showDeleteButton')) {\r\n <td class=\"action-button\">\r\n @if(_ButtonByRow('showDeleteButton', row)) {\r\n <coer-button\r\n type=\"icon-no-border\"\r\n [color]=\"_ColorButtonByRow('deleteButtonColor')\"\r\n icon=\"delete\"\r\n [tooltip]=\"_GetTooltip('Delete', row)\"\r\n [isInvisible]=\"_isDisabled()\"\r\n [isReadonly]=\"isReadonly()\"\r\n [isDisabled]=\"_isLoading()\"\r\n (onClick)=\"onClickDeleteRow.emit(row)\"\r\n ></coer-button>\r\n }\r\n </td>\r\n }\r\n \r\n <!-- Edit Button -->\r\n @if(_ButtonByRow('showEditButton')) {\r\n <td class=\"action-button\">\r\n @if(_ButtonByRow('showEditButton', row)) {\r\n <coer-button\r\n type=\"icon-no-border\"\r\n [color]=\"_ColorButtonByRow('editButtonColor')\"\r\n icon=\"edit\"\r\n [tooltip]=\"_GetTooltip('Edit', row)\"\r\n [isInvisible]=\"_isDisabled()\"\r\n [isDisabled]=\"_isLoading()\"\r\n (onClick)=\"onClickEditRow.emit(row)\"\r\n ></coer-button>\r\n }\r\n </td>\r\n }\r\n \r\n <!-- Go Button -->\r\n @if(_ButtonByRow('showGoButton')) {\r\n <td class=\"action-button\">\r\n @if(_ButtonByRow('showGoButton', row)) {\r\n <coer-button\r\n type=\"icon-no-border\"\r\n [color]=\"_ColorButtonByRow('goButtonColor')\"\r\n icon=\"go\"\r\n [tooltip]=\"_GetTooltip('Go to', row, 'detail')\"\r\n [isInvisible]=\"_isDisabled()\"\r\n [isDisabled]=\"_isLoading()\"\r\n (onClick)=\"onClickGoRow.emit(row)\"\r\n ></coer-button>\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n }\r\n </table>\r\n </div>\r\n\r\n @if(isLoading()) {\r\n <!-- Grid Message -->\r\n <div class=\"loading\" [ngStyle]=\"{ \r\n 'width': '100%', \r\n 'height': '100%',\r\n 'bottom': showFooter() ? '35px' : '10px'\r\n }\">\r\n <i class=\"spinner-border\"></i>\r\n <span class=\"fa-fade\">Loading</span>\r\n </div> \r\n }\r\n </div>\r\n </section>\r\n\r\n @if(showFooter()) {\r\n <footer class=\"grid-footer\">\r\n <span>\r\n @if(_isLoadingMessage) {\r\n <span class=\"fa-fade\"> Loading </span>\r\n }\r\n\r\n @else if(gridLength().dataSourceSelected > 0) {\r\n <span>\r\n <i class=\"bi bi-check2-square ms-1\"></i>\r\n {{ gridLength().dataSourceSelected }}\r\n </span>\r\n }\r\n </span>\r\n\r\n <span class=\"me-1\"> {{ gridLength().dataSourceFiltered | numericFormat }} Rows </span>\r\n </footer>\r\n }\r\n</div>", styles: ["div.coer-grid header{align-items:flex-end;justify-content:flex-end;padding-right:8px;margin:0}div.coer-grid header>div{padding:0 0 10px 10px;display:flex;align-items:baseline}div.coer-grid header>div a{height:40px!important}div.coer-grid table{table-layout:auto;border-collapse:separate;border-spacing:1px 0px;margin:0;font-size:14px}div.coer-grid table thead tr th{position:sticky!important;z-index:100!important;top:0!important;background-color:var(--gray)!important;color:var(--smoke)!important;padding:5px!important;vertical-align:middle!important;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;min-width:50px!important;white-space:nowrap!important}div.coer-grid table tbody{border:0px!important}div.coer-grid table tbody tr:not(.row-focus):hover td{color:#000!important;background-color:#f1f6ff}div.coer-grid table tbody tr td{border:0px!important;padding:5px!important;vertical-align:middle!important;white-space:break-spaces;text-overflow:ellipsis;overflow:hidden;min-height:31px!important}div.coer-grid table tbody tr.row-focus td{background-color:#cde1ff}div.coer-grid table tbody tr td.coer-textbox,div.coer-grid table tbody tr td.coer-numberbox,div.coer-grid table tbody tr td.coer-selectbox{padding:0!important;overflow:visible!important}div.coer-grid table tbody tr td.default-cell{cursor:pointer!important}div.coer-grid table thead tr th.action-button,div.coer-grid table thead tr td.action-button,div.coer-grid table thead tr th.check-box,div.coer-grid table thead tr td.check-box,div.coer-grid table tbody tr th.action-button,div.coer-grid table tbody tr td.action-button,div.coer-grid table tbody tr th.check-box table tbody tr td.check-box{text-align:center!important;cursor:default!important;min-width:40px!important;max-width:40px!important;width:40px!important;padding:0!important}div.coer-grid footer.grid-footer{display:flex;align-items:center;justify-content:space-between;font-size:small;color:#999;padding-top:5px}div.coer-grid section.grid-container{position:relative;overflow:auto}div.coer-grid div.loading,div.coer-grid div.no-data{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;color:gray}div.coer-grid div.loading{background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important;z-index:1}div.coer-grid div.loading span.fa-fade{position:relative!important;top:50px!important}div.coer-grid tr.loading{background-color:#bbbbbb83!important}div.coer-grid div.loading i.spinner-border{color:var(--primary-inner)!important;width:70px!important;height:70px!important;font-size:20px!important;position:absolute!important}div.coer-grid td.check-box div.spinner-border-container{position:absolute;transform:translate(7px,-19px)}div.coer-grid td.check-box div.spinner-border-container i.spinner-border{width:15px!important;height:15px!important;color:var(--primary-inner)!important}div.coer-grid table thead tr th.check-box>div,div.coer-grid table tbody tr td.check-box>div{display:flex;align-items:center;justify-content:center;cursor:default!important}div.coer-grid input.form-check-input{box-shadow:none!important;margin:0}div.coer-grid input[type=checkbox]{cursor:pointer!important}div.coer-grid td.group{padding:0!important;margin:0!important}div.coer-grid td.group>*{border-top:1px solid var(--gray)!important;border-bottom:1px solid var(--gray)!important;padding:0!important;margin:0!important}div.coer-grid .template,div.coer-grid .template div{white-space:nowrap!important;display:flex!important;align-items:center!important;cursor:pointer!important;gap:5px!important;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }, { kind: "component", type: CoerCheckbox, selector: "coer-checkbox", inputs: ["id", "label", "labelPosition", "isLoading", "isDisabled", "isReadonly", "isInvisible", "ignoreDataBinding", "value"], outputs: ["onChange"] }, { kind: "component", type: CoerNumberBox, selector: "coer-numberbox", inputs: ["id", "value", "label", "placeholder", "textPosition", "min", "max", "isInvalid", "isValid", "externalButton", "selectOnFocus", "decimals", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput", "onClickExternalButton"] }, { kind: "component", type: CoerSelectbox, selector: "coer-selectbox", inputs: ["id", "value", "label", "placeholder", "isInvalid", "isValid", "externalButton", "dataSource", "displayProperty", "rowsByPage", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onSelected", "onUnselect", "onClickExternalButton"] }, { kind: "component", type: CoerSwitch, selector: "coer-switch", inputs: ["id", "value", "label", "labelPosition", "isLoading", "isDisabled", "isReadonly", "isInvisible", "tooltip", "tooltipPosition"], outputs: ["onChange"] }, { kind: "component", type: CoerTextBox, selector: "coer-textbox", inputs: ["id", "value", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "externalButton", "selectOnFocus", "showClearIcon", "showSearchIcon", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput", "onClickClear", "onClickSearch", "onClickExternalButton"] }, { kind: "pipe", type: i9.HtmlPipe, name: "html" }, { kind: "pipe", type: i9.NumericFormatPipe, name: "numericFormat" }] }); }
|
|
2840
2982
|
}
|
|
2841
2983
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGrid, decorators: [{
|
|
2842
2984
|
type: Component,
|
|
@@ -3044,7 +3186,8 @@ class CoerSecretBox extends ControlValue {
|
|
|
3044
3186
|
this._value = '';
|
|
3045
3187
|
this._id = Tools.GetGuid('coer-textBox');
|
|
3046
3188
|
this._isLoadingEvent = signal(false);
|
|
3047
|
-
this.
|
|
3189
|
+
this._externalButton = signal({ show: false });
|
|
3190
|
+
this._passwordType = signal(true);
|
|
3048
3191
|
//Inputs
|
|
3049
3192
|
this.id = input('');
|
|
3050
3193
|
this.value = input(null);
|
|
@@ -3055,7 +3198,8 @@ class CoerSecretBox extends ControlValue {
|
|
|
3055
3198
|
this.maxLength = input(25);
|
|
3056
3199
|
this.isInvalid = input(false);
|
|
3057
3200
|
this.isValid = input(false);
|
|
3058
|
-
this.
|
|
3201
|
+
this.externalButton = input({ show: false });
|
|
3202
|
+
this.showSecret = input(true);
|
|
3059
3203
|
this.selectOnFocus = input(false);
|
|
3060
3204
|
this.isLoading = input(false);
|
|
3061
3205
|
this.isDisabled = input(false);
|
|
@@ -3074,6 +3218,19 @@ class CoerSecretBox extends ControlValue {
|
|
|
3074
3218
|
this.onClickClear = output();
|
|
3075
3219
|
this.onClickExternalButton = output();
|
|
3076
3220
|
//computed
|
|
3221
|
+
this._showSecret = computed(() => {
|
|
3222
|
+
return this.showSecret()
|
|
3223
|
+
&& !this.isDisabled()
|
|
3224
|
+
&& !this.isLoading();
|
|
3225
|
+
});
|
|
3226
|
+
//computed
|
|
3227
|
+
this._inputType = computed(() => {
|
|
3228
|
+
return this._passwordType()
|
|
3229
|
+
|| this.isDisabled()
|
|
3230
|
+
|| this.isLoading()
|
|
3231
|
+
? 'password' : 'text';
|
|
3232
|
+
});
|
|
3233
|
+
//computed
|
|
3077
3234
|
this._isEnable = computed(() => {
|
|
3078
3235
|
return !this.isDisabled() && !this.isLoading() && !this.isReadonly() && !this.isInvisible();
|
|
3079
3236
|
});
|
|
@@ -3083,19 +3240,22 @@ class CoerSecretBox extends ControlValue {
|
|
|
3083
3240
|
});
|
|
3084
3241
|
//computed
|
|
3085
3242
|
this._paddingRight = computed(() => {
|
|
3086
|
-
if (this._showSecret && (this.isInvalid() || this.isValid())) {
|
|
3243
|
+
if (this._showSecret() && (this.isInvalid() || this.isValid())) {
|
|
3087
3244
|
return '45px';
|
|
3088
3245
|
}
|
|
3089
|
-
else if (this._showSecret || this.isInvalid() || this.isValid()) {
|
|
3246
|
+
else if (this._showSecret() || this.isInvalid() || this.isValid()) {
|
|
3090
3247
|
return '18px';
|
|
3091
3248
|
}
|
|
3092
3249
|
else {
|
|
3093
3250
|
return '0px';
|
|
3094
3251
|
}
|
|
3095
3252
|
});
|
|
3096
|
-
this.
|
|
3253
|
+
this._effectValue = effect(() => {
|
|
3097
3254
|
this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : '');
|
|
3098
3255
|
});
|
|
3256
|
+
this._effectExternalButton = effect(() => {
|
|
3257
|
+
this._externalButton.set(this.externalButton());
|
|
3258
|
+
});
|
|
3099
3259
|
}
|
|
3100
3260
|
//AfterViewInit
|
|
3101
3261
|
ngAfterViewInit() {
|
|
@@ -3136,20 +3296,37 @@ class CoerSecretBox extends ControlValue {
|
|
|
3136
3296
|
}
|
|
3137
3297
|
//OnDestroy
|
|
3138
3298
|
ngOnDestroy() {
|
|
3139
|
-
this.
|
|
3299
|
+
this._effectValue?.destroy();
|
|
3300
|
+
this._effectExternalButton?.destroy();
|
|
3140
3301
|
}
|
|
3141
3302
|
//getter
|
|
3142
|
-
get
|
|
3143
|
-
return
|
|
3144
|
-
|
|
3145
|
-
|
|
3303
|
+
get _asterisks() {
|
|
3304
|
+
return 'X'.repeat(String(this._value).length);
|
|
3305
|
+
}
|
|
3306
|
+
//getter
|
|
3307
|
+
get _showexternalButtonLeft() {
|
|
3308
|
+
return this._externalButton().show
|
|
3309
|
+
&& Tools.IsNotNull(this._externalButton()?.position)
|
|
3310
|
+
&& this._externalButton()?.position === 'left'
|
|
3311
|
+
&& !this.isLoading()
|
|
3312
|
+
&& !this.isInvisible();
|
|
3313
|
+
}
|
|
3314
|
+
//getter
|
|
3315
|
+
get _showexternalButtonRight() {
|
|
3316
|
+
return this._externalButton().show
|
|
3317
|
+
&& ((Tools.IsNull(this._externalButton()?.position) || this._externalButton()?.position === 'right'))
|
|
3318
|
+
&& !this.isLoading()
|
|
3319
|
+
&& !this.isInvisible();
|
|
3146
3320
|
}
|
|
3147
3321
|
//getter
|
|
3148
|
-
get
|
|
3149
|
-
return this.
|
|
3150
|
-
|
|
3151
|
-
|
|
3152
|
-
|
|
3322
|
+
get _externalButtonIcon() {
|
|
3323
|
+
return Tools.IsNotOnlyWhiteSpace(this._externalButton()?.icon)
|
|
3324
|
+
? this._externalButton().icon : 'pointer';
|
|
3325
|
+
}
|
|
3326
|
+
//getter
|
|
3327
|
+
get _isDisabledExternalButton() {
|
|
3328
|
+
return Tools.IsNotNull(this._externalButton()?.isDisabled)
|
|
3329
|
+
? this._externalButton().isDisabled : false;
|
|
3153
3330
|
}
|
|
3154
3331
|
/** */
|
|
3155
3332
|
Focus(select = false, delay = 0) {
|
|
@@ -3176,9 +3353,7 @@ class CoerSecretBox extends ControlValue {
|
|
|
3176
3353
|
if (this.element) {
|
|
3177
3354
|
this.element.blur();
|
|
3178
3355
|
Tools.Sleep().then(() => {
|
|
3179
|
-
|
|
3180
|
-
if (element)
|
|
3181
|
-
element.classList.remove('mdc-line-ripple--active');
|
|
3356
|
+
HTMLElements.RemoveClass(`#${this._id}-container .mdc-line-ripple--active`, 'mdc-line-ripple--active');
|
|
3182
3357
|
});
|
|
3183
3358
|
}
|
|
3184
3359
|
this._isLoadingEvent.set(false);
|
|
@@ -3189,12 +3364,16 @@ class CoerSecretBox extends ControlValue {
|
|
|
3189
3364
|
this.SetValue('');
|
|
3190
3365
|
this.Focus(false, delay);
|
|
3191
3366
|
}
|
|
3367
|
+
/** */
|
|
3368
|
+
_Toogle() {
|
|
3369
|
+
this._passwordType.update(value => !value);
|
|
3370
|
+
}
|
|
3192
3371
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSecretBox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3193
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerSecretBox, isStandalone: false, selector: "coer-secretbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, showSecret: { classPropertyName: "showSecret", publicName: "showSecret", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onKeyupEnter: "onKeyupEnter", onInput: "onInput", onClickClear: "onClickClear", onClickExternalButton: "onClickExternalButton" }, providers: [CONTROL_VALUE(CoerSecretBox)], viewQueries: [{ propertyName: "matFormField", first: true, predicate: ["matFormField"], descendants: true, isSignal: true }, { propertyName: "coerTextBox", first: true, predicate: ["coerTextBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-text-box\">\r\n <mat-form-field\r\n [id]=\"_id + '-container'\"\r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'readonly': isReadonly() && !isLoading(),\r\n 'd-none': isInvisible()\r\n }\"\r\n [style]=\"{\r\n 'width' : width(),\r\n 'min-width' : minWidth(),\r\n 'max-width' : maxWidth(),\r\n 'margin-top' : marginTop(),\r\n 'margin-right' : marginRight(),\r\n 'margin-bottom': marginBottom(),\r\n 'margin-left' : marginLeft()\r\n }\">\r\n <mat-label>{{ label() }}</mat-label>\r\n \r\n <input #coerTextBox matInput\r\n [id]=\"_id\"\r\n [type]=\"_passwordType ? 'password': 'text'\"\r\n [placeholder]=\"placeholder()\"\r\n [minLength]=\"minLength()\"\r\n [maxLength]=\"maxLength()\"\r\n [disabled]=\"!_isEnable()\"\r\n [value]=\"_value\"\r\n (input)=\"SetValue(coerTextBox.value)\"\r\n (blur)=\"SetTouched(true)\"\r\n [style]=\"{\r\n 'cursor' : isLoading() ? 'wait' : null,\r\n 'margin-top' : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight(),\r\n 'text-align' : textPosition()\r\n }\">\r\n\r\n @if(isLoading()) {\r\n <div class=\"placeholder-glow\">\r\n <span class=\"placeholder\"></span>\r\n </div>\r\n }\r\n\r\n <span class=\"icon-container\"> \r\n @if(isInvalid() && !isDisabled() && !isLoading()) {\r\n <i class=\"fa-solid fa-circle-exclamation\"></i>\r\n }\r\n\r\n @else if(isValid() && !isDisabled() && !isLoading()) {\r\n <i class=\"fa-solid fa-circle-check text-green\"></i>\r\n }\r\n\r\n @if(_showSecret) {\r\n <i [ngClass]=\"{\r\n 'fa-solid cursor-pointer': true, \r\n 'fa-eye-slash': passwordType,\r\n 'fa-eye': !passwordType\r\n }\" \r\n [ngStyle]=\"{\r\n 'margin-right': isInvalid() || isValid() ? '25px' : '0px'\r\n }\"\r\n (click)=\"passwordType = !passwordType\"></i> \r\n }\r\n </span>\r\n </mat-form-field> \r\n\r\n @if(isInvisible()) {\r\n <mat-form-field class=\"invisible\">\r\n <input matInput [disabled]=\"true\"> \r\n </mat-form-field> \r\n } \r\n</div> ", styles: ["div.coer-text-box{display:flex;align-items:center}div.coer-text-box mat-form-field{position:relative!important}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:40px!important}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix{width:100%!important;height:40px!important;padding:0!important}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label{overflow:visible!important;position:absolute!important;top:20px!important}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label.mdc-floating-label--float-above mat-label{color:var(--primary-inner);font-weight:700;position:relative;left:-10px;top:2px}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input{font-weight:400!important;font-size:17px!important;color:var(--black)!important}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:after{border-bottom-color:var(--primary-inner)!important}div.coer-text-box mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-text-box mat-form-field span.icon-container{position:absolute!important;top:1px!important;right:-14px!important;z-index:5!important;width:30px;height:40px;display:flex;align-items:center;justify-content:center;gap:5px}div.coer-text-box mat-form-field span.icon-container i{font-size:20px!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-eye,div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-eye-slash{color:#caced1!important;cursor:pointer!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-eye:hover,div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-eye-slash:hover{color:#6c757d!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-text-box mat-form-field span.placeholder{width:calc(100% + 32px)!important;height:40px!important;position:absolute!important;z-index:1!important;top:0!important;left:-16px!important;cursor:wait!important}div.coer-text-box mat-form-field .placeholder,div.coer-text-box mat-form-field .placeholder *,div.coer-text-box mat-form-field .placeholder-glow,div.coer-text-box mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-text-box mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!important}coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:transparent!important;padding-left:9px!important;padding-right:9px!important}coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple,coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:before,coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:after{border-bottom-color:transparent!important}coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:28px!important}coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix{height:28px!important}coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input{margin-top:3px!important;font-size:14px!important}coer-grid table tbody tr td.coer-textbox mat-form-field span.icon-container{transform:translate(-5px,-6px)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] }); }
|
|
3372
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerSecretBox, isStandalone: false, selector: "coer-secretbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", isSignal: true, isRequired: false, transformFunction: null }, showSecret: { classPropertyName: "showSecret", publicName: "showSecret", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onKeyupEnter: "onKeyupEnter", onInput: "onInput", onClickClear: "onClickClear", onClickExternalButton: "onClickExternalButton" }, providers: [CONTROL_VALUE(CoerSecretBox)], viewQueries: [{ propertyName: "matFormField", first: true, predicate: ["matFormField"], descendants: true, isSignal: true }, { propertyName: "coerTextBox", first: true, predicate: ["coerTextBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-form-field-component\">\r\n <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n width : width(), \r\n minWidth : minWidth(), \r\n maxWidth : maxWidth(),\r\n marginTop : marginTop(),\r\n marginRight : marginRight(),\r\n marginBottom: marginBottom(),\r\n marginLeft : marginLeft() \r\n }\">\r\n @if(_showexternalButtonLeft) {\r\n <div class=\"external-button-container-left\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n \r\n <mat-form-field\r\n [id]=\"_id + '-container'\"\r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'width-100' : true,\r\n 'readonly' : isReadonly() && !isLoading(),\r\n 'display-none': isInvisible() || isLoading()\r\n }\"\r\n [style]=\"{ \r\n 'margin-top' : marginTop(),\r\n 'margin-right' : marginRight(),\r\n 'margin-bottom': marginBottom(),\r\n 'margin-left' : marginLeft(),\r\n 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\">\r\n <mat-label>{{ label() }}</mat-label>\r\n \r\n <input #coerTextBox matInput\r\n [id]=\"_id\"\r\n [type]=\"_inputType()\"\r\n [placeholder]=\"placeholder()\"\r\n [minLength]=\"minLength()\"\r\n [maxLength]=\"maxLength()\"\r\n [disabled]=\"!_isEnable()\"\r\n [value]=\"_value\"\r\n (input)=\"SetValue(coerTextBox.value)\"\r\n (blur)=\"SetTouched(true)\"\r\n [style]=\"{\r\n 'margin-top' : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight(),\r\n 'text-align' : textPosition()\r\n }\">\r\n \r\n <span class=\"icon-container\"> \r\n @if(isInvalid() && _isEnable()) {\r\n <span [ngStyle]=\"{ 'margin-right': (showSecret() ? '50px' : '0px') }\">\r\n <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n </span>\r\n }\r\n \r\n @else if(isValid() && _isEnable()) {\r\n <span [ngStyle]=\"{ 'margin-right': (showSecret() ? '50px' : '0px') }\">\r\n <i class=\"icon-circle-check icon-fill\"></i> \r\n </span>\r\n }\r\n \r\n @if(_showSecret()) {\r\n <i [ngClass]=\"{\r\n 'cursor-pointer icon-fill': true, \r\n 'icon-eye-slash': _passwordType(),\r\n 'icon-eye': !_passwordType()\r\n }\" \r\n (click)=\"_Toogle()\"></i> \r\n }\r\n </span>\r\n </mat-form-field> \r\n \r\n <!-- Loading || Invisible -->\r\n @if(isLoading() || isInvisible()) {\r\n <div [ngClass]=\"{ \r\n 'loading' : isLoading(),\r\n 'invisible' : isInvisible() \r\n }\" \r\n [style]=\"{ \r\n 'width' : width(),\r\n 'min-width' : minWidth(),\r\n 'max-width' : maxWidth(),\r\n 'margin-top' : marginTop(),\r\n 'margin-right' : marginRight(),\r\n 'margin-bottom': marginBottom(),\r\n 'margin-left' : marginLeft(),\r\n 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\"\r\n > {{ isInvisible() ? '' : _asterisks }} </div>\r\n }\r\n \r\n @if(_showexternalButtonRight) {\r\n <div class=\"external-button-container-right\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n } \r\n </div>\r\n</div> ", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
|
|
3194
3373
|
}
|
|
3195
3374
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSecretBox, decorators: [{
|
|
3196
3375
|
type: Component,
|
|
3197
|
-
args: [{ selector: 'coer-secretbox', providers: [CONTROL_VALUE(CoerSecretBox)], standalone: false, template: "<div class=\"coer-
|
|
3376
|
+
args: [{ selector: 'coer-secretbox', providers: [CONTROL_VALUE(CoerSecretBox)], standalone: false, template: "<div class=\"coer-form-field-component\">\r\n <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n width : width(), \r\n minWidth : minWidth(), \r\n maxWidth : maxWidth(),\r\n marginTop : marginTop(),\r\n marginRight : marginRight(),\r\n marginBottom: marginBottom(),\r\n marginLeft : marginLeft() \r\n }\">\r\n @if(_showexternalButtonLeft) {\r\n <div class=\"external-button-container-left\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n \r\n <mat-form-field\r\n [id]=\"_id + '-container'\"\r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'width-100' : true,\r\n 'readonly' : isReadonly() && !isLoading(),\r\n 'display-none': isInvisible() || isLoading()\r\n }\"\r\n [style]=\"{ \r\n 'margin-top' : marginTop(),\r\n 'margin-right' : marginRight(),\r\n 'margin-bottom': marginBottom(),\r\n 'margin-left' : marginLeft(),\r\n 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\">\r\n <mat-label>{{ label() }}</mat-label>\r\n \r\n <input #coerTextBox matInput\r\n [id]=\"_id\"\r\n [type]=\"_inputType()\"\r\n [placeholder]=\"placeholder()\"\r\n [minLength]=\"minLength()\"\r\n [maxLength]=\"maxLength()\"\r\n [disabled]=\"!_isEnable()\"\r\n [value]=\"_value\"\r\n (input)=\"SetValue(coerTextBox.value)\"\r\n (blur)=\"SetTouched(true)\"\r\n [style]=\"{\r\n 'margin-top' : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight(),\r\n 'text-align' : textPosition()\r\n }\">\r\n \r\n <span class=\"icon-container\"> \r\n @if(isInvalid() && _isEnable()) {\r\n <span [ngStyle]=\"{ 'margin-right': (showSecret() ? '50px' : '0px') }\">\r\n <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n </span>\r\n }\r\n \r\n @else if(isValid() && _isEnable()) {\r\n <span [ngStyle]=\"{ 'margin-right': (showSecret() ? '50px' : '0px') }\">\r\n <i class=\"icon-circle-check icon-fill\"></i> \r\n </span>\r\n }\r\n \r\n @if(_showSecret()) {\r\n <i [ngClass]=\"{\r\n 'cursor-pointer icon-fill': true, \r\n 'icon-eye-slash': _passwordType(),\r\n 'icon-eye': !_passwordType()\r\n }\" \r\n (click)=\"_Toogle()\"></i> \r\n }\r\n </span>\r\n </mat-form-field> \r\n \r\n <!-- Loading || Invisible -->\r\n @if(isLoading() || isInvisible()) {\r\n <div [ngClass]=\"{ \r\n 'loading' : isLoading(),\r\n 'invisible' : isInvisible() \r\n }\" \r\n [style]=\"{ \r\n 'width' : width(),\r\n 'min-width' : minWidth(),\r\n 'max-width' : maxWidth(),\r\n 'margin-top' : marginTop(),\r\n 'margin-right' : marginRight(),\r\n 'margin-bottom': marginBottom(),\r\n 'margin-left' : marginLeft(),\r\n 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\"\r\n > {{ isInvisible() ? '' : _asterisks }} </div>\r\n }\r\n \r\n @if(_showexternalButtonRight) {\r\n <div class=\"external-button-container-right\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n } \r\n </div>\r\n</div> " }]
|
|
3198
3377
|
}], ctorParameters: () => [] });
|
|
3199
3378
|
|
|
3200
3379
|
class CoerPageTitle {
|
|
@@ -3595,11 +3774,11 @@ class CoerSidenav {
|
|
|
3595
3774
|
});
|
|
3596
3775
|
}
|
|
3597
3776
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSidenav, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3598
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerSidenav, isStandalone: false, selector: "coer-sidenav", outputs: { onMenuSelected: "onMenuSelected" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["matSidenav"], descendants: true, isSignal: true }, { propertyName: "menuList", predicate: CoerTreeAccordion, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-drawer-container [hasBackdrop]=\"_backdrop()\">\r\n <mat-drawer \r\n #matSidenav\r\n [opened]=\"_isOpen()\"\r\n (opened)=\"_Open()\"\r\n (closed)=\"_Close()\"\r\n [mode]=\"_mode()\">\r\n\r\n @if(!_isLoading()) {\r\n @if(_navigation().length > 0) { \r\n @for(item of _navigation(); track item.id) {\r\n \r\n <!-- Menu --> \r\n @if(_IsMenu(item)) {\r\n @if(_IsGrid(item)) {\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"_GetIcon(item)\"\r\n path=\"menu\"\r\n (onClickMenuOption)=\"_ShowGridMenu($event, item)\"\r\n ></coer-menu-option>\r\n }\r\n \r\n @else {\r\n <coer-tree-accordion\r\n [item]=\"item\"\r\n (showGridMenu)=\"_NavigateTo($event)\"\r\n (onClickMenuOption)=\"_NavigateTo($event)\"\r\n (clickMenu)=\"_MenuSelected($event)\"\r\n ></coer-tree-accordion>\r\n }\r\n }\r\n \r\n <!-- Option Menu -->\r\n @else {\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"item?.icon\"\r\n [path]=\"item?.path\"\r\n (onClickMenuOption)=\"_NavigateTo($event)\"\r\n ></coer-menu-option>\r\n }\r\n \r\n \r\n <div class=\"separator\"></div> \r\n }\r\n }\r\n\r\n @else {\r\n <coer-menu-option label=\"Empty\"></coer-menu-option>\r\n }\r\n }\r\n\r\n @else {\r\n <coer-menu-option\r\n label=\"LOADING\"\r\n icon=\"icon-arrows-sync animation-spin\"\r\n ></coer-menu-option>\r\n }\r\n\r\n <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n </mat-drawer>\r\n\r\n <!-- Main Screen -->\r\n <mat-drawer-content [ngClass]=\"{ 'margin-left-40px': (!_isOpen() && _showAsideMenu()) }\">\r\n <aside [ngClass]=\"{ 'side-nav scrollbar-invisible': true, 'display-none': !_showAsideMenu() }\" (click)=\"Open($event)\">\r\n @if(_isLoading()) {\r\n <span class=\"icon-container\">\r\n <i class=\"icon-arrows-sync animation-spin\"></i>\r\n </span>\r\n }\r\n\r\n @else {\r\n @for (item of _navigation(); track item.id) {\r\n <div (click)=\"Open($event, item)\">\r\n <span [class]=\"'icon-container ' + _SetIdentityClass(item.label)\">\r\n <i [class]=\"_GetIcon(item)\"></i>\r\n </span>\r\n </div>\r\n } \r\n }\r\n\r\n <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n </aside> \r\n <ng-content></ng-content>\r\n </mat-drawer-content>\r\n</mat-drawer-container>", styles: ["mat-drawer-container{height:calc(100vh - 45px)!important}mat-drawer-container .margin-left-40px{margin-left:40px!important}mat-drawer-container mat-drawer{width:auto;min-width:200px;background-color:var(--sidenav-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar{width:1px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb{background-color:var(--secondary-inner)!important;border-radius:5px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:hover{background-color:var(--secondary-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:active{background-color:var(--background-inner)!important}mat-drawer-container mat-drawer i{font-size:16px!important}mat-drawer-container mat-drawer div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-drawer-container mat-drawer-content{margin-right:0!important;background-color:var(--background-inner)!important}mat-drawer-container mat-drawer-content aside.side-nav{background-color:var(--sidenav-inner)!important;width:40px!important;position:fixed!important;left:0!important;top:45px!important;bottom:0!important;overflow-y:auto!important;cursor:pointer!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container{width:100%!important;height:49.6px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:16px!important;border-bottom:1px solid rgba(245,245,245,.041)!important;color:var(--sidenav-text-inner)}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container:hover{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link{color:var(--sidenav-active-inner)!important}
|
|
3777
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerSidenav, isStandalone: false, selector: "coer-sidenav", outputs: { onMenuSelected: "onMenuSelected" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["matSidenav"], descendants: true, isSignal: true }, { propertyName: "menuList", predicate: CoerTreeAccordion, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-drawer-container [hasBackdrop]=\"_backdrop()\">\r\n <mat-drawer \r\n #matSidenav\r\n [opened]=\"_isOpen()\"\r\n (opened)=\"_Open()\"\r\n (closed)=\"_Close()\"\r\n [mode]=\"_mode()\">\r\n\r\n @if(!_isLoading()) {\r\n @if(_navigation().length > 0) { \r\n @for(item of _navigation(); track item.id) {\r\n \r\n <!-- Menu --> \r\n @if(_IsMenu(item)) {\r\n @if(_IsGrid(item)) {\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"_GetIcon(item)\"\r\n path=\"menu\"\r\n (onClickMenuOption)=\"_ShowGridMenu($event, item)\"\r\n ></coer-menu-option>\r\n }\r\n \r\n @else {\r\n <coer-tree-accordion\r\n [item]=\"item\"\r\n (showGridMenu)=\"_NavigateTo($event)\"\r\n (onClickMenuOption)=\"_NavigateTo($event)\"\r\n (clickMenu)=\"_MenuSelected($event)\"\r\n ></coer-tree-accordion>\r\n }\r\n }\r\n \r\n <!-- Option Menu -->\r\n @else {\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"item?.icon\"\r\n [path]=\"item?.path\"\r\n (onClickMenuOption)=\"_NavigateTo($event)\"\r\n ></coer-menu-option>\r\n }\r\n \r\n \r\n <div class=\"separator\"></div> \r\n }\r\n }\r\n\r\n @else {\r\n <coer-menu-option label=\"Empty\"></coer-menu-option>\r\n }\r\n }\r\n\r\n @else {\r\n <coer-menu-option\r\n label=\"LOADING\"\r\n icon=\"icon-arrows-sync animation-spin\"\r\n ></coer-menu-option>\r\n }\r\n\r\n <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n </mat-drawer>\r\n\r\n <!-- Main Screen -->\r\n <mat-drawer-content [ngClass]=\"{ 'margin-left-40px': (!_isOpen() && _showAsideMenu()) }\">\r\n <aside [ngClass]=\"{ 'side-nav scrollbar-invisible': true, 'display-none': !_showAsideMenu() }\" (click)=\"Open($event)\">\r\n @if(_isLoading()) {\r\n <span class=\"icon-container\">\r\n <i class=\"icon-arrows-sync animation-spin\"></i>\r\n </span>\r\n }\r\n\r\n @else {\r\n @for (item of _navigation(); track item.id) {\r\n <div (click)=\"Open($event, item)\">\r\n <span [class]=\"'icon-container ' + _SetIdentityClass(item.label)\">\r\n <i [class]=\"_GetIcon(item)\"></i>\r\n </span>\r\n </div>\r\n } \r\n }\r\n\r\n <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n </aside> \r\n <ng-content></ng-content>\r\n </mat-drawer-content>\r\n</mat-drawer-container>", styles: ["mat-drawer-container{height:calc(100vh - 45px)!important}mat-drawer-container .margin-left-40px{margin-left:40px!important}mat-drawer-container mat-drawer{width:auto;min-width:200px;background-color:var(--sidenav-inner)!important;z-index:1!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar{width:1px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb{background-color:var(--secondary-inner)!important;border-radius:5px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:hover{background-color:var(--secondary-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:active{background-color:var(--background-inner)!important}mat-drawer-container mat-drawer i{font-size:16px!important}mat-drawer-container mat-drawer div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-drawer-container mat-drawer-content{margin-right:0!important;background-color:var(--background-inner)!important}mat-drawer-container mat-drawer-content aside.side-nav{background-color:var(--sidenav-inner)!important;width:40px!important;position:fixed!important;left:0!important;top:45px!important;bottom:0!important;overflow-y:auto!important;cursor:pointer!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container{width:100%!important;height:49.6px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:16px!important;border-bottom:1px solid rgba(245,245,245,.041)!important;color:var(--sidenav-text-inner)}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container:hover{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link{color:var(--sidenav-active-inner)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$8.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i2$8.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i2$8.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: CoerMenuOption, selector: "coer-menu-option", inputs: ["level", "label", "icon", "path", "tree"], outputs: ["onClickMenuOption"] }, { kind: "component", type: CoerTreeAccordion, selector: "coer-tree-accordion", inputs: ["level", "item", "tree", "showTree"], outputs: ["showGridMenu", "onClickMenuOption", "clickMenu"] }] }); }
|
|
3599
3778
|
}
|
|
3600
3779
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSidenav, decorators: [{
|
|
3601
3780
|
type: Component,
|
|
3602
|
-
args: [{ selector: 'coer-sidenav', standalone: false, template: "<mat-drawer-container [hasBackdrop]=\"_backdrop()\">\r\n <mat-drawer \r\n #matSidenav\r\n [opened]=\"_isOpen()\"\r\n (opened)=\"_Open()\"\r\n (closed)=\"_Close()\"\r\n [mode]=\"_mode()\">\r\n\r\n @if(!_isLoading()) {\r\n @if(_navigation().length > 0) { \r\n @for(item of _navigation(); track item.id) {\r\n \r\n <!-- Menu --> \r\n @if(_IsMenu(item)) {\r\n @if(_IsGrid(item)) {\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"_GetIcon(item)\"\r\n path=\"menu\"\r\n (onClickMenuOption)=\"_ShowGridMenu($event, item)\"\r\n ></coer-menu-option>\r\n }\r\n \r\n @else {\r\n <coer-tree-accordion\r\n [item]=\"item\"\r\n (showGridMenu)=\"_NavigateTo($event)\"\r\n (onClickMenuOption)=\"_NavigateTo($event)\"\r\n (clickMenu)=\"_MenuSelected($event)\"\r\n ></coer-tree-accordion>\r\n }\r\n }\r\n \r\n <!-- Option Menu -->\r\n @else {\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"item?.icon\"\r\n [path]=\"item?.path\"\r\n (onClickMenuOption)=\"_NavigateTo($event)\"\r\n ></coer-menu-option>\r\n }\r\n \r\n \r\n <div class=\"separator\"></div> \r\n }\r\n }\r\n\r\n @else {\r\n <coer-menu-option label=\"Empty\"></coer-menu-option>\r\n }\r\n }\r\n\r\n @else {\r\n <coer-menu-option\r\n label=\"LOADING\"\r\n icon=\"icon-arrows-sync animation-spin\"\r\n ></coer-menu-option>\r\n }\r\n\r\n <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n </mat-drawer>\r\n\r\n <!-- Main Screen -->\r\n <mat-drawer-content [ngClass]=\"{ 'margin-left-40px': (!_isOpen() && _showAsideMenu()) }\">\r\n <aside [ngClass]=\"{ 'side-nav scrollbar-invisible': true, 'display-none': !_showAsideMenu() }\" (click)=\"Open($event)\">\r\n @if(_isLoading()) {\r\n <span class=\"icon-container\">\r\n <i class=\"icon-arrows-sync animation-spin\"></i>\r\n </span>\r\n }\r\n\r\n @else {\r\n @for (item of _navigation(); track item.id) {\r\n <div (click)=\"Open($event, item)\">\r\n <span [class]=\"'icon-container ' + _SetIdentityClass(item.label)\">\r\n <i [class]=\"_GetIcon(item)\"></i>\r\n </span>\r\n </div>\r\n } \r\n }\r\n\r\n <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n </aside> \r\n <ng-content></ng-content>\r\n </mat-drawer-content>\r\n</mat-drawer-container>", styles: ["mat-drawer-container{height:calc(100vh - 45px)!important}mat-drawer-container .margin-left-40px{margin-left:40px!important}mat-drawer-container mat-drawer{width:auto;min-width:200px;background-color:var(--sidenav-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar{width:1px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb{background-color:var(--secondary-inner)!important;border-radius:5px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:hover{background-color:var(--secondary-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:active{background-color:var(--background-inner)!important}mat-drawer-container mat-drawer i{font-size:16px!important}mat-drawer-container mat-drawer div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-drawer-container mat-drawer-content{margin-right:0!important;background-color:var(--background-inner)!important}mat-drawer-container mat-drawer-content aside.side-nav{background-color:var(--sidenav-inner)!important;width:40px!important;position:fixed!important;left:0!important;top:45px!important;bottom:0!important;overflow-y:auto!important;cursor:pointer!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container{width:100%!important;height:49.6px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:16px!important;border-bottom:1px solid rgba(245,245,245,.041)!important;color:var(--sidenav-text-inner)}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container:hover{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link{color:var(--sidenav-active-inner)!important}
|
|
3781
|
+
args: [{ selector: 'coer-sidenav', standalone: false, template: "<mat-drawer-container [hasBackdrop]=\"_backdrop()\">\r\n <mat-drawer \r\n #matSidenav\r\n [opened]=\"_isOpen()\"\r\n (opened)=\"_Open()\"\r\n (closed)=\"_Close()\"\r\n [mode]=\"_mode()\">\r\n\r\n @if(!_isLoading()) {\r\n @if(_navigation().length > 0) { \r\n @for(item of _navigation(); track item.id) {\r\n \r\n <!-- Menu --> \r\n @if(_IsMenu(item)) {\r\n @if(_IsGrid(item)) {\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"_GetIcon(item)\"\r\n path=\"menu\"\r\n (onClickMenuOption)=\"_ShowGridMenu($event, item)\"\r\n ></coer-menu-option>\r\n }\r\n \r\n @else {\r\n <coer-tree-accordion\r\n [item]=\"item\"\r\n (showGridMenu)=\"_NavigateTo($event)\"\r\n (onClickMenuOption)=\"_NavigateTo($event)\"\r\n (clickMenu)=\"_MenuSelected($event)\"\r\n ></coer-tree-accordion>\r\n }\r\n }\r\n \r\n <!-- Option Menu -->\r\n @else {\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"item?.icon\"\r\n [path]=\"item?.path\"\r\n (onClickMenuOption)=\"_NavigateTo($event)\"\r\n ></coer-menu-option>\r\n }\r\n \r\n \r\n <div class=\"separator\"></div> \r\n }\r\n }\r\n\r\n @else {\r\n <coer-menu-option label=\"Empty\"></coer-menu-option>\r\n }\r\n }\r\n\r\n @else {\r\n <coer-menu-option\r\n label=\"LOADING\"\r\n icon=\"icon-arrows-sync animation-spin\"\r\n ></coer-menu-option>\r\n }\r\n\r\n <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n </mat-drawer>\r\n\r\n <!-- Main Screen -->\r\n <mat-drawer-content [ngClass]=\"{ 'margin-left-40px': (!_isOpen() && _showAsideMenu()) }\">\r\n <aside [ngClass]=\"{ 'side-nav scrollbar-invisible': true, 'display-none': !_showAsideMenu() }\" (click)=\"Open($event)\">\r\n @if(_isLoading()) {\r\n <span class=\"icon-container\">\r\n <i class=\"icon-arrows-sync animation-spin\"></i>\r\n </span>\r\n }\r\n\r\n @else {\r\n @for (item of _navigation(); track item.id) {\r\n <div (click)=\"Open($event, item)\">\r\n <span [class]=\"'icon-container ' + _SetIdentityClass(item.label)\">\r\n <i [class]=\"_GetIcon(item)\"></i>\r\n </span>\r\n </div>\r\n } \r\n }\r\n\r\n <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n </aside> \r\n <ng-content></ng-content>\r\n </mat-drawer-content>\r\n</mat-drawer-container>", styles: ["mat-drawer-container{height:calc(100vh - 45px)!important}mat-drawer-container .margin-left-40px{margin-left:40px!important}mat-drawer-container mat-drawer{width:auto;min-width:200px;background-color:var(--sidenav-inner)!important;z-index:1!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar{width:1px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb{background-color:var(--secondary-inner)!important;border-radius:5px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:hover{background-color:var(--secondary-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:active{background-color:var(--background-inner)!important}mat-drawer-container mat-drawer i{font-size:16px!important}mat-drawer-container mat-drawer div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-drawer-container mat-drawer-content{margin-right:0!important;background-color:var(--background-inner)!important}mat-drawer-container mat-drawer-content aside.side-nav{background-color:var(--sidenav-inner)!important;width:40px!important;position:fixed!important;left:0!important;top:45px!important;bottom:0!important;overflow-y:auto!important;cursor:pointer!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container{width:100%!important;height:49.6px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:16px!important;border-bottom:1px solid rgba(245,245,245,.041)!important;color:var(--sidenav-text-inner)}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container:hover{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link{color:var(--sidenav-active-inner)!important}\n"] }]
|
|
3603
3782
|
}], ctorParameters: () => [] });
|
|
3604
3783
|
|
|
3605
3784
|
class CoerDropdown extends ControlValue {
|
|
@@ -3681,31 +3860,27 @@ class CoerDropdown extends ControlValue {
|
|
|
3681
3860
|
this._effect = effect(() => {
|
|
3682
3861
|
this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : null);
|
|
3683
3862
|
});
|
|
3863
|
+
this._effectComponentSignal = effect(() => {
|
|
3864
|
+
if (componentContentSIGNAL().length > 0 && componentContentSIGNAL() != this._id) {
|
|
3865
|
+
//Tools.Sleep().then(_ => this._Close());
|
|
3866
|
+
}
|
|
3867
|
+
});
|
|
3684
3868
|
}
|
|
3685
3869
|
//AfterViewInit
|
|
3686
3870
|
ngAfterViewInit() {
|
|
3687
3871
|
Tools.Sleep().then(() => {
|
|
3688
3872
|
//Container
|
|
3689
|
-
|
|
3690
|
-
|
|
3691
|
-
|
|
3692
|
-
|
|
3693
|
-
|
|
3694
|
-
|
|
3695
|
-
|
|
3696
|
-
|
|
3697
|
-
//DropDown
|
|
3698
|
-
this._dropDownMenu = document.getElementById(`${this._id}-dropdown-menu`);
|
|
3699
|
-
this._dropDownMenu.addEventListener('mouseenter', () => {
|
|
3700
|
-
this._isOverMenu.set(true);
|
|
3701
|
-
});
|
|
3702
|
-
this._dropDownMenu.addEventListener('mouseleave', () => {
|
|
3703
|
-
this._isOverMenu.set(false);
|
|
3704
|
-
});
|
|
3705
|
-
}
|
|
3873
|
+
const container = document.getElementById(`${this._id}-container`);
|
|
3874
|
+
container?.addEventListener('mouseenter', () => this._isOverMenu.set(true));
|
|
3875
|
+
container?.addEventListener('mouseleave', () => this._isOverMenu.set(false));
|
|
3876
|
+
//DropDown
|
|
3877
|
+
this._dropDownMenu = document.getElementById(`${this._id}-dropdown-menu`);
|
|
3878
|
+
this._dropDownMenuContainer = document.getElementById(`${this._id}-dropdown-menu-container`);
|
|
3879
|
+
this._dropDownMenuContainer?.addEventListener('mouseenter', () => this._isOverMenu.set(true));
|
|
3880
|
+
this._dropDownMenuContainer?.addEventListener('mouseleave', () => this._isOverMenu.set(false));
|
|
3706
3881
|
//Document
|
|
3707
3882
|
document.addEventListener('click', () => {
|
|
3708
|
-
if (!this._isOverMenu())
|
|
3883
|
+
if (this._isOpen() && !this._isOverMenu())
|
|
3709
3884
|
this.Close();
|
|
3710
3885
|
});
|
|
3711
3886
|
});
|
|
@@ -3713,6 +3888,7 @@ class CoerDropdown extends ControlValue {
|
|
|
3713
3888
|
//OnDestroy
|
|
3714
3889
|
ngOnDestroy() {
|
|
3715
3890
|
this._effect?.destroy();
|
|
3891
|
+
this._effectComponentSignal?.destroy();
|
|
3716
3892
|
}
|
|
3717
3893
|
//getter
|
|
3718
3894
|
get _label() {
|
|
@@ -3776,9 +3952,8 @@ class CoerDropdown extends ControlValue {
|
|
|
3776
3952
|
Open() {
|
|
3777
3953
|
Tools.Sleep().then(_ => {
|
|
3778
3954
|
if (this._isEnable()) {
|
|
3779
|
-
|
|
3780
|
-
|
|
3781
|
-
}
|
|
3955
|
+
HTMLElements.RemoveClass(this._dropDownMenuContainer, 'display-none');
|
|
3956
|
+
componentContentSIGNAL.set(this._id);
|
|
3782
3957
|
this._isOpen.set(true);
|
|
3783
3958
|
}
|
|
3784
3959
|
});
|
|
@@ -3786,9 +3961,8 @@ class CoerDropdown extends ControlValue {
|
|
|
3786
3961
|
/** */
|
|
3787
3962
|
Close() {
|
|
3788
3963
|
Tools.Sleep().then(_ => {
|
|
3789
|
-
|
|
3790
|
-
|
|
3791
|
-
}
|
|
3964
|
+
HTMLElements.AddClass(this._dropDownMenuContainer, 'display-none');
|
|
3965
|
+
componentContentSIGNAL.set('');
|
|
3792
3966
|
this._isOpen.set(false);
|
|
3793
3967
|
});
|
|
3794
3968
|
}
|
|
@@ -3804,11 +3978,11 @@ class CoerDropdown extends ControlValue {
|
|
|
3804
3978
|
});
|
|
3805
3979
|
}
|
|
3806
3980
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3807
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerDropdown, isStandalone: false, selector: "coer-dropdown", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, propDisplay: { classPropertyName: "propDisplay", publicName: "propDisplay", isSignal: true, isRequired: false, transformFunction: null }, rowsByPage: { classPropertyName: "rowsByPage", publicName: "rowsByPage", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelected: "onSelected", onUnselect: "onUnselect" }, providers: [CONTROL_VALUE(CoerDropdown)], viewQueries: [{ propertyName: "_coerTextBox", first: true, predicate: ["coerTextBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-
|
|
3981
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerDropdown, isStandalone: false, selector: "coer-dropdown", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, propDisplay: { classPropertyName: "propDisplay", publicName: "propDisplay", isSignal: true, isRequired: false, transformFunction: null }, rowsByPage: { classPropertyName: "rowsByPage", publicName: "rowsByPage", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelected: "onSelected", onUnselect: "onUnselect" }, providers: [CONTROL_VALUE(CoerDropdown)], viewQueries: [{ propertyName: "_coerTextBox", first: true, predicate: ["coerTextBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-form-field-component\">\r\n <div [id]=\"_id + '-container'\" class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n width : width(), \r\n minWidth : minWidth(), \r\n maxWidth : maxWidth(),\r\n marginTop : marginTop(),\r\n marginRight : marginRight(),\r\n marginBottom: marginBottom(),\r\n marginLeft : marginLeft() \r\n }\">\r\n \r\n <div [ngClass]=\"{\r\n 'width-100' : true,\r\n 'readonly' : isReadonly() && !isLoading(),\r\n 'display-none' : isInvisible() || isLoading()\r\n }\">\r\n <coer-button\r\n [color]=\"color()\"\r\n [type]=\"type()\"\r\n [icon]=\"_icon\"\r\n [isLoading]=\"isLoading()\"\r\n [isDisabled]=\"isDisabled()\" \r\n width=\"100%\" \r\n [tooltip]=\"tooltip()\"\r\n [tooltipPosition]=\"tooltipPosition()\"\r\n (onClick)=\"_Toggle()\"\r\n > {{ _label }} </coer-button> \r\n </div>\r\n\r\n <!-- Options -->\r\n <div [id]=\"_id + '-dropdown-menu-container'\" class=\"dropdown-options display-none\">\r\n <ul [id]=\"_id + '-dropdown-menu'\">\r\n @if(_isEnable()) {\r\n @if(_dataSource().length <= 0) {\r\n <li class=\"no-options\">\r\n <div [id]=\"id + '-dropdown-option-' + -1\" class='dropdown-item cursor-pointer no-options'> -- No Options -- </div>\r\n </li>\r\n } \r\n \r\n @for(item of _dataSource(); track _GetIndexRow(item)) {\r\n <li [ngClass]=\"{ 'dropdown-item-focus': _index() == _GetIndexRow(item) }\" (click)=\"_SelectItem(item)\">\r\n <a [routerLink]=\"_GetPath(item)\">\r\n <div [id]=\"_id + '-dropdown-option-' + _GetIndexRow(item)\"> \r\n \r\n @if (_GetIcon(item).length > 0) {\r\n <span class=\"dropdown-menu-icon-container\">\r\n <i [class]=\"_GetIcon(item)\"></i>\r\n </span>\r\n }\r\n \r\n <span> {{ _GetDisplay(item) }} </span>\r\n </div> \r\n </a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n </div>\r\n\r\n <!-- Loading || Invisible -->\r\n @if(isLoading() || isInvisible()) {\r\n <div [ngClass]=\"{ \r\n 'loading' : isLoading(),\r\n 'invisible' : isInvisible() \r\n }\" \r\n [style]=\"{\r\n 'width' : width(),\r\n 'min-width' : minWidth(),\r\n 'max-width' : maxWidth(),\r\n 'margin-top' : marginTop(),\r\n 'margin-right' : marginRight(),\r\n 'margin-bottom': marginBottom(),\r\n 'margin-left' : marginLeft(), \r\n }\"\r\n > {{ _label }} </div>\r\n } \r\n </div>\r\n</div> ", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
|
|
3808
3982
|
}
|
|
3809
3983
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerDropdown, decorators: [{
|
|
3810
3984
|
type: Component,
|
|
3811
|
-
args: [{ selector: 'coer-dropdown', providers: [CONTROL_VALUE(CoerDropdown)], standalone: false, template: "<div class=\"coer-
|
|
3985
|
+
args: [{ selector: 'coer-dropdown', providers: [CONTROL_VALUE(CoerDropdown)], standalone: false, template: "<div class=\"coer-form-field-component\">\r\n <div [id]=\"_id + '-container'\" class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n width : width(), \r\n minWidth : minWidth(), \r\n maxWidth : maxWidth(),\r\n marginTop : marginTop(),\r\n marginRight : marginRight(),\r\n marginBottom: marginBottom(),\r\n marginLeft : marginLeft() \r\n }\">\r\n \r\n <div [ngClass]=\"{\r\n 'width-100' : true,\r\n 'readonly' : isReadonly() && !isLoading(),\r\n 'display-none' : isInvisible() || isLoading()\r\n }\">\r\n <coer-button\r\n [color]=\"color()\"\r\n [type]=\"type()\"\r\n [icon]=\"_icon\"\r\n [isLoading]=\"isLoading()\"\r\n [isDisabled]=\"isDisabled()\" \r\n width=\"100%\" \r\n [tooltip]=\"tooltip()\"\r\n [tooltipPosition]=\"tooltipPosition()\"\r\n (onClick)=\"_Toggle()\"\r\n > {{ _label }} </coer-button> \r\n </div>\r\n\r\n <!-- Options -->\r\n <div [id]=\"_id + '-dropdown-menu-container'\" class=\"dropdown-options display-none\">\r\n <ul [id]=\"_id + '-dropdown-menu'\">\r\n @if(_isEnable()) {\r\n @if(_dataSource().length <= 0) {\r\n <li class=\"no-options\">\r\n <div [id]=\"id + '-dropdown-option-' + -1\" class='dropdown-item cursor-pointer no-options'> -- No Options -- </div>\r\n </li>\r\n } \r\n \r\n @for(item of _dataSource(); track _GetIndexRow(item)) {\r\n <li [ngClass]=\"{ 'dropdown-item-focus': _index() == _GetIndexRow(item) }\" (click)=\"_SelectItem(item)\">\r\n <a [routerLink]=\"_GetPath(item)\">\r\n <div [id]=\"_id + '-dropdown-option-' + _GetIndexRow(item)\"> \r\n \r\n @if (_GetIcon(item).length > 0) {\r\n <span class=\"dropdown-menu-icon-container\">\r\n <i [class]=\"_GetIcon(item)\"></i>\r\n </span>\r\n }\r\n \r\n <span> {{ _GetDisplay(item) }} </span>\r\n </div> \r\n </a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n </div>\r\n\r\n <!-- Loading || Invisible -->\r\n @if(isLoading() || isInvisible()) {\r\n <div [ngClass]=\"{ \r\n 'loading' : isLoading(),\r\n 'invisible' : isInvisible() \r\n }\" \r\n [style]=\"{\r\n 'width' : width(),\r\n 'min-width' : minWidth(),\r\n 'max-width' : maxWidth(),\r\n 'margin-top' : marginTop(),\r\n 'margin-right' : marginRight(),\r\n 'margin-bottom': marginBottom(),\r\n 'margin-left' : marginLeft(), \r\n }\"\r\n > {{ _label }} </div>\r\n } \r\n </div>\r\n</div> " }]
|
|
3812
3986
|
}], ctorParameters: () => [] });
|
|
3813
3987
|
|
|
3814
3988
|
class CoerTab {
|
|
@@ -3940,7 +4114,7 @@ class CoerTextarea extends ControlValue {
|
|
|
3940
4114
|
this.onInput = output();
|
|
3941
4115
|
//computed
|
|
3942
4116
|
this._isEnable = computed(() => {
|
|
3943
|
-
return !this.isDisabled() && !this.isLoading() && !this.isReadonly();
|
|
4117
|
+
return !this.isDisabled() && !this.isLoading() && !this.isReadonly() && !this.isInvisible();
|
|
3944
4118
|
});
|
|
3945
4119
|
//computed
|
|
3946
4120
|
this._floatLabel = computed(() => {
|
|
@@ -4027,11 +4201,11 @@ class CoerTextarea extends ControlValue {
|
|
|
4027
4201
|
this.Focus(false, delay);
|
|
4028
4202
|
}
|
|
4029
4203
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4030
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerTextarea, isStandalone: false, selector: "coer-textarea", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onInput: "onInput" }, providers: [CONTROL_VALUE(CoerTextarea)], viewQueries: [{ propertyName: "_coerTextBox", first: true, predicate: ["coerTextArea"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-textarea\">\r\n <
|
|
4204
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerTextarea, isStandalone: false, selector: "coer-textarea", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onInput: "onInput" }, providers: [CONTROL_VALUE(CoerTextarea)], viewQueries: [{ propertyName: "_coerTextBox", first: true, predicate: ["coerTextArea"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-form-field-component coer-textarea\">\r\n <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n width : width(), \r\n minWidth : minWidth(), \r\n maxWidth : maxWidth(),\r\n marginTop : marginTop(),\r\n marginRight : marginRight(),\r\n marginBottom: marginBottom(),\r\n marginLeft : marginLeft() \r\n }\">\r\n <mat-form-field\r\n [id]=\"_id + '-container'\"\r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'width-100' : true,\r\n 'readonly' : isReadonly() && !isLoading(),\r\n 'display-none': isInvisible() || isLoading()\r\n }\">\r\n \r\n <mat-label>{{ label() }}</mat-label>\r\n \r\n <textarea #coerTextArea matInput\r\n [id]=\"_id\"\r\n type=\"text\"\r\n [placeholder]=\"placeholder()\"\r\n [minLength]=\"minLength()\"\r\n [maxLength]=\"maxLength()\"\r\n [disabled]=\"!_isEnable()\"\r\n [value]=\"_value\"\r\n (input)=\"SetValue(coerTextArea.value)\"\r\n (blur)=\"SetTouched(true)\"\r\n [style]=\"{\r\n 'min-height' : '80px', \r\n 'margin-top' : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight(),\r\n 'text-align' : textPosition(),\r\n 'resize' : (!resize() || !_isEnable()) ? 'none' : '',\r\n 'height' : height()\r\n }\"></textarea> \r\n \r\n <span ngClass=\"icon-container\">\r\n @if(isInvalid() && _isEnable()) {\r\n <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n }\r\n \r\n @else if(isValid() && _isEnable()) {\r\n <i class=\"icon-circle-check icon-fill\"></i>\r\n }\r\n </span>\r\n </mat-form-field>\r\n \r\n <!-- Loading || Invisible -->\r\n @if(isLoading() || isInvisible()) {\r\n <div [ngClass]=\"{ \r\n 'loading' : isLoading(),\r\n 'invisible' : isInvisible() \r\n }\" \r\n [style]=\"{ \r\n 'min-height' : '89px',\r\n 'width' : width(),\r\n 'min-width' : minWidth(),\r\n 'max-width' : maxWidth(),\r\n 'margin-top' : marginTop(),\r\n 'margin-right' : marginRight(),\r\n 'margin-bottom': marginBottom(),\r\n 'margin-left' : marginLeft()\r\n }\"\r\n > {{ isInvisible() ? '' : _value }} </div>\r\n }\r\n </div>\r\n\r\n @if(showFooter()) {\r\n <footer> {{ footer }} </footer>\r\n } \r\n</div>", styles: ["div.coer-textarea div.coer-form-field-content mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:auto!important;min-height:80px!important}div.coer-textarea div.coer-form-field-content mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix{height:auto!important;min-height:80px!important}div.coer-textarea div.coer-form-field-content mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix textarea{min-height:80px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] }); }
|
|
4031
4205
|
}
|
|
4032
4206
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTextarea, decorators: [{
|
|
4033
4207
|
type: Component,
|
|
4034
|
-
args: [{ selector: 'coer-textarea', providers: [CONTROL_VALUE(CoerTextarea)], standalone: false, template: "<div class=\"coer-textarea\">\r\n <
|
|
4208
|
+
args: [{ selector: 'coer-textarea', providers: [CONTROL_VALUE(CoerTextarea)], standalone: false, template: "<div class=\"coer-form-field-component coer-textarea\">\r\n <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n width : width(), \r\n minWidth : minWidth(), \r\n maxWidth : maxWidth(),\r\n marginTop : marginTop(),\r\n marginRight : marginRight(),\r\n marginBottom: marginBottom(),\r\n marginLeft : marginLeft() \r\n }\">\r\n <mat-form-field\r\n [id]=\"_id + '-container'\"\r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'width-100' : true,\r\n 'readonly' : isReadonly() && !isLoading(),\r\n 'display-none': isInvisible() || isLoading()\r\n }\">\r\n \r\n <mat-label>{{ label() }}</mat-label>\r\n \r\n <textarea #coerTextArea matInput\r\n [id]=\"_id\"\r\n type=\"text\"\r\n [placeholder]=\"placeholder()\"\r\n [minLength]=\"minLength()\"\r\n [maxLength]=\"maxLength()\"\r\n [disabled]=\"!_isEnable()\"\r\n [value]=\"_value\"\r\n (input)=\"SetValue(coerTextArea.value)\"\r\n (blur)=\"SetTouched(true)\"\r\n [style]=\"{\r\n 'min-height' : '80px', \r\n 'margin-top' : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight(),\r\n 'text-align' : textPosition(),\r\n 'resize' : (!resize() || !_isEnable()) ? 'none' : '',\r\n 'height' : height()\r\n }\"></textarea> \r\n \r\n <span ngClass=\"icon-container\">\r\n @if(isInvalid() && _isEnable()) {\r\n <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n }\r\n \r\n @else if(isValid() && _isEnable()) {\r\n <i class=\"icon-circle-check icon-fill\"></i>\r\n }\r\n </span>\r\n </mat-form-field>\r\n \r\n <!-- Loading || Invisible -->\r\n @if(isLoading() || isInvisible()) {\r\n <div [ngClass]=\"{ \r\n 'loading' : isLoading(),\r\n 'invisible' : isInvisible() \r\n }\" \r\n [style]=\"{ \r\n 'min-height' : '89px',\r\n 'width' : width(),\r\n 'min-width' : minWidth(),\r\n 'max-width' : maxWidth(),\r\n 'margin-top' : marginTop(),\r\n 'margin-right' : marginRight(),\r\n 'margin-bottom': marginBottom(),\r\n 'margin-left' : marginLeft()\r\n }\"\r\n > {{ isInvisible() ? '' : _value }} </div>\r\n }\r\n </div>\r\n\r\n @if(showFooter()) {\r\n <footer> {{ footer }} </footer>\r\n } \r\n</div>", styles: ["div.coer-textarea div.coer-form-field-content mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:auto!important;min-height:80px!important}div.coer-textarea div.coer-form-field-content mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix{height:auto!important;min-height:80px!important}div.coer-textarea div.coer-form-field-content mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix textarea{min-height:80px!important}\n"] }]
|
|
4035
4209
|
}], ctorParameters: () => [] });
|
|
4036
4210
|
|
|
4037
4211
|
class CoerToolbar {
|
|
@@ -4121,11 +4295,11 @@ class CoerToolbar {
|
|
|
4121
4295
|
? '5px' : '0px';
|
|
4122
4296
|
}
|
|
4123
4297
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4124
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerToolbar, isStandalone: false, selector: "coer-toolbar", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClickMenu: "onClickMenu", onClickOption: "onClickOption" }, viewQueries: [{ propertyName: "_toogleButton", first: true, predicate: ["toogleButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div id=\"coer-tool-bar\" [ngClass]=\"{ 'position-relative': _isModalOpen() }\">\r\n <mat-toolbar> \r\n @if(showLogo) {\r\n <div class=\"logo-image-container\" (click)=\"ToogleSideNave()\" [ngStyle]=\"{ 'width': _appLogoWidth }\">\r\n <div class=\"logo-image\" [ngStyle]=\"{ 'background-image': 'url(' + (_appLogoPath | noImage:'IMAGE') + ')' }\"></div>\r\n </div>\r\n }\r\n\r\n @else {\r\n <div class=\"button-container\">\r\n <button\r\n #toogleButton \r\n mat-icon-button \r\n type=\"button\"\r\n (click)=\"ToogleSideNave()\">\r\n <i class=\"icon-bars\"></i>\r\n </button>\r\n </div>\r\n\r\n <span class=\"app-name\"> {{ _appName }} </span> \r\n } \r\n\r\n <span class=\"fill-space\"></span> \r\n \r\n <div class=\"user-container\" (click)=\"dropdown.Open()\" [ngStyle]=\"{ \r\n 'padding-right': GetPadding('user-container'),\r\n 'display': showUser ? 'flex' : 'none'\r\n
|
|
4298
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerToolbar, isStandalone: false, selector: "coer-toolbar", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClickMenu: "onClickMenu", onClickOption: "onClickOption" }, viewQueries: [{ propertyName: "_toogleButton", first: true, predicate: ["toogleButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div id=\"coer-tool-bar\" [ngClass]=\"{ 'position-relative': _isModalOpen() }\">\r\n <mat-toolbar> \r\n @if(showLogo) {\r\n <div class=\"logo-image-container\" (click)=\"ToogleSideNave()\" [ngStyle]=\"{ 'width': _appLogoWidth }\">\r\n <div class=\"logo-image\" [ngStyle]=\"{ 'background-image': 'url(' + (_appLogoPath | noImage:'IMAGE') + ')' }\"></div>\r\n </div>\r\n }\r\n\r\n @else {\r\n <div class=\"button-container\">\r\n <button\r\n #toogleButton \r\n mat-icon-button \r\n type=\"button\"\r\n (click)=\"ToogleSideNave()\">\r\n <i class=\"icon-bars\"></i>\r\n </button>\r\n </div>\r\n\r\n <span class=\"app-name\"> {{ _appName }} </span> \r\n } \r\n\r\n <span class=\"fill-space\"></span> \r\n \r\n <div class=\"user-container\" (click)=\"dropdown.Open()\" [ngStyle]=\"{ \r\n 'padding-right': GetPadding('user-container'),\r\n 'display': showUser ? 'flex' : 'none'\r\n }\">\r\n <div class=\"position-absolute left-0px right-0px\">\r\n <coer-dropdown \r\n #dropdown\r\n [dataSource]=\"menu()\" \r\n propDisplay=\"label\" \r\n width=\"auto\"\r\n [minWidth]=\"GetElementWidth(toolbarUserIdentity)\"\r\n maxWidth=\"auto\"\r\n (onSelected)=\"onClickOption.emit($event); dropdown.Unselect()\"\r\n ></coer-dropdown>\r\n </div> \r\n\r\n <div class=\"user-image\" [ngStyle]=\"{ 'background-image': 'url(' + (image() | noImage:'USER') + ')' }\"></div>\r\n <div #toolbarUserIdentity id=\"toolbar-user-identity\" class=\"user-identity\" [ngStyle]=\"{ 'padding-left': GetPadding('user-identity') }\">\r\n \r\n @if(userName().length > 0) {\r\n <p> {{ userName() }} </p>\r\n }\r\n \r\n @if(userTitle().length > 0) {\r\n <p> {{ userTitle() }} </p>\r\n }\r\n </div> \r\n </div> \r\n \r\n @if(!showUser) {\r\n <span class=\"me-2\">\r\n <span class=\"fw-bold fa-fade\"> \r\n Loading <i class=\"fa-solid fa-sync fa-spin\"></i> \r\n </span> \r\n </span>\r\n }\r\n </mat-toolbar>\r\n\r\n <div class=\"shadow\"></div>\r\n</div>\r\n", styles: ["div#coer-tool-bar{z-index:1}div#coer-tool-bar mat-toolbar{height:45px!important;position:relative!important;z-index:10!important;padding:0!important;background-color:var(--toolbar-inner)!important;color:var(--toolbar-text-inner)!important}div#coer-tool-bar mat-toolbar span.app-name{height:40px!important;display:contents!important;max-width:45%}div#coer-tool-bar mat-toolbar div.logo-image-container{height:45px!important;min-width:100px}div#coer-tool-bar mat-toolbar div.logo-image-container div.logo-image{background-size:contain!important;background-repeat:no-repeat!important;background-position-y:bottom;width:100%!important;height:100%!important;cursor:pointer!important}div#coer-tool-bar mat-toolbar div.button-container{display:flex;align-items:center;justify-content:center;width:40px}div#coer-tool-bar mat-toolbar div.button-container button{font-size:17px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:var(--sidenav-active)!important;background-color:transparent!important;padding:0!important;width:25px!important;height:25px!important;border:none!important}div#coer-tool-bar mat-toolbar div.button-container button:focus{box-shadow:0 0 20px!important}div#coer-tool-bar mat-toolbar div.user-container{max-width:45%;display:flex;align-items:center;font-size:small!important;font-weight:700;height:0px!important;max-height:0px!important;padding-left:2px!important;margin-right:10px!important;border-radius:8px!important;position:relative!important;cursor:pointer!important}div#coer-tool-bar mat-toolbar div.user-container div.user-image{min-width:35px!important;max-width:35px!important;min-height:35px!important;max-height:35px!important;border-radius:25px;background:transparent;background-size:cover;background-repeat:no-repeat;background-position:top}div#coer-tool-bar mat-toolbar div.user-container div.user-identity{height:40px!important;max-height:40px!important;min-width:70px!important;overflow:hidden!important;display:flex!important;flex-flow:column!important;justify-content:center!important}div#coer-tool-bar mat-toolbar div.user-container div.user-identity p{line-height:normal!important;overflow:hidden;text-overflow:ellipsis}div#coer-tool-bar mat-toolbar div.user-container div.user-identity p::selection{background-color:transparent!important}div#coer-tool-bar mat-toolbar div.user-container:hover{transform:scale(1.03);box-shadow:0 0 15px -5px #000!important}div#coer-tool-bar div.shadow{box-shadow:1px -10px 20px #000!important;width:100vw;height:45px;position:absolute;top:0;z-index:8}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3$5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: CoerDropdown, selector: "coer-dropdown", inputs: ["id", "value", "label", "color", "type", "dataSource", "propDisplay", "rowsByPage", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onSelected", "onUnselect"] }, { kind: "pipe", type: i9.NoImagePipe, name: "noImage" }] }); }
|
|
4125
4299
|
}
|
|
4126
4300
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerToolbar, decorators: [{
|
|
4127
4301
|
type: Component,
|
|
4128
|
-
args: [{ selector: 'coer-toolbar', standalone: false, template: "<div id=\"coer-tool-bar\" [ngClass]=\"{ 'position-relative': _isModalOpen() }\">\r\n <mat-toolbar> \r\n @if(showLogo) {\r\n <div class=\"logo-image-container\" (click)=\"ToogleSideNave()\" [ngStyle]=\"{ 'width': _appLogoWidth }\">\r\n <div class=\"logo-image\" [ngStyle]=\"{ 'background-image': 'url(' + (_appLogoPath | noImage:'IMAGE') + ')' }\"></div>\r\n </div>\r\n }\r\n\r\n @else {\r\n <div class=\"button-container\">\r\n <button\r\n #toogleButton \r\n mat-icon-button \r\n type=\"button\"\r\n (click)=\"ToogleSideNave()\">\r\n <i class=\"icon-bars\"></i>\r\n </button>\r\n </div>\r\n\r\n <span class=\"app-name\"> {{ _appName }} </span> \r\n } \r\n\r\n <span class=\"fill-space\"></span> \r\n \r\n <div class=\"user-container\" (click)=\"dropdown.Open()\" [ngStyle]=\"{ \r\n 'padding-right': GetPadding('user-container'),\r\n 'display': showUser ? 'flex' : 'none'\r\n
|
|
4302
|
+
args: [{ selector: 'coer-toolbar', standalone: false, template: "<div id=\"coer-tool-bar\" [ngClass]=\"{ 'position-relative': _isModalOpen() }\">\r\n <mat-toolbar> \r\n @if(showLogo) {\r\n <div class=\"logo-image-container\" (click)=\"ToogleSideNave()\" [ngStyle]=\"{ 'width': _appLogoWidth }\">\r\n <div class=\"logo-image\" [ngStyle]=\"{ 'background-image': 'url(' + (_appLogoPath | noImage:'IMAGE') + ')' }\"></div>\r\n </div>\r\n }\r\n\r\n @else {\r\n <div class=\"button-container\">\r\n <button\r\n #toogleButton \r\n mat-icon-button \r\n type=\"button\"\r\n (click)=\"ToogleSideNave()\">\r\n <i class=\"icon-bars\"></i>\r\n </button>\r\n </div>\r\n\r\n <span class=\"app-name\"> {{ _appName }} </span> \r\n } \r\n\r\n <span class=\"fill-space\"></span> \r\n \r\n <div class=\"user-container\" (click)=\"dropdown.Open()\" [ngStyle]=\"{ \r\n 'padding-right': GetPadding('user-container'),\r\n 'display': showUser ? 'flex' : 'none'\r\n }\">\r\n <div class=\"position-absolute left-0px right-0px\">\r\n <coer-dropdown \r\n #dropdown\r\n [dataSource]=\"menu()\" \r\n propDisplay=\"label\" \r\n width=\"auto\"\r\n [minWidth]=\"GetElementWidth(toolbarUserIdentity)\"\r\n maxWidth=\"auto\"\r\n (onSelected)=\"onClickOption.emit($event); dropdown.Unselect()\"\r\n ></coer-dropdown>\r\n </div> \r\n\r\n <div class=\"user-image\" [ngStyle]=\"{ 'background-image': 'url(' + (image() | noImage:'USER') + ')' }\"></div>\r\n <div #toolbarUserIdentity id=\"toolbar-user-identity\" class=\"user-identity\" [ngStyle]=\"{ 'padding-left': GetPadding('user-identity') }\">\r\n \r\n @if(userName().length > 0) {\r\n <p> {{ userName() }} </p>\r\n }\r\n \r\n @if(userTitle().length > 0) {\r\n <p> {{ userTitle() }} </p>\r\n }\r\n </div> \r\n </div> \r\n \r\n @if(!showUser) {\r\n <span class=\"me-2\">\r\n <span class=\"fw-bold fa-fade\"> \r\n Loading <i class=\"fa-solid fa-sync fa-spin\"></i> \r\n </span> \r\n </span>\r\n }\r\n </mat-toolbar>\r\n\r\n <div class=\"shadow\"></div>\r\n</div>\r\n", styles: ["div#coer-tool-bar{z-index:1}div#coer-tool-bar mat-toolbar{height:45px!important;position:relative!important;z-index:10!important;padding:0!important;background-color:var(--toolbar-inner)!important;color:var(--toolbar-text-inner)!important}div#coer-tool-bar mat-toolbar span.app-name{height:40px!important;display:contents!important;max-width:45%}div#coer-tool-bar mat-toolbar div.logo-image-container{height:45px!important;min-width:100px}div#coer-tool-bar mat-toolbar div.logo-image-container div.logo-image{background-size:contain!important;background-repeat:no-repeat!important;background-position-y:bottom;width:100%!important;height:100%!important;cursor:pointer!important}div#coer-tool-bar mat-toolbar div.button-container{display:flex;align-items:center;justify-content:center;width:40px}div#coer-tool-bar mat-toolbar div.button-container button{font-size:17px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:var(--sidenav-active)!important;background-color:transparent!important;padding:0!important;width:25px!important;height:25px!important;border:none!important}div#coer-tool-bar mat-toolbar div.button-container button:focus{box-shadow:0 0 20px!important}div#coer-tool-bar mat-toolbar div.user-container{max-width:45%;display:flex;align-items:center;font-size:small!important;font-weight:700;height:0px!important;max-height:0px!important;padding-left:2px!important;margin-right:10px!important;border-radius:8px!important;position:relative!important;cursor:pointer!important}div#coer-tool-bar mat-toolbar div.user-container div.user-image{min-width:35px!important;max-width:35px!important;min-height:35px!important;max-height:35px!important;border-radius:25px;background:transparent;background-size:cover;background-repeat:no-repeat;background-position:top}div#coer-tool-bar mat-toolbar div.user-container div.user-identity{height:40px!important;max-height:40px!important;min-width:70px!important;overflow:hidden!important;display:flex!important;flex-flow:column!important;justify-content:center!important}div#coer-tool-bar mat-toolbar div.user-container div.user-identity p{line-height:normal!important;overflow:hidden;text-overflow:ellipsis}div#coer-tool-bar mat-toolbar div.user-container div.user-identity p::selection{background-color:transparent!important}div#coer-tool-bar mat-toolbar div.user-container:hover{transform:scale(1.03);box-shadow:0 0 15px -5px #000!important}div#coer-tool-bar div.shadow{box-shadow:1px -10px 20px #000!important;width:100vw;height:45px;position:absolute;top:0;z-index:8}\n"] }]
|
|
4129
4303
|
}] });
|
|
4130
4304
|
|
|
4131
4305
|
class ComponentsModule {
|