coer-elements 2.0.38 → 2.0.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/lib/coer-button/coer-button.component.d.ts +8 -2
- package/components/lib/coer-datebox/coer-datebox.component.d.ts +1 -1
- package/components/lib/coer-numberbox/coer-numberbox.component.d.ts +1 -1
- package/components/lib/coer-secretbox/coer-secretbox.component.d.ts +1 -1
- package/components/lib/coer-selectbox/coer-selectbox.component.d.ts +0 -1
- package/components/lib/coer-textarea/coer-textarea.component.d.ts +1 -1
- package/components/lib/coer-textbox/coer-textbox.component.d.ts +1 -1
- package/fesm2022/coer-elements-components.mjs +68 -30
- package/fesm2022/coer-elements-components.mjs.map +1 -1
- package/fesm2022/coer-elements-interfaces.mjs +1 -1
- package/fesm2022/coer-elements-interfaces.mjs.map +1 -1
- package/fesm2022/coer-elements-pages.mjs +4 -4
- package/fesm2022/coer-elements-pages.mjs.map +1 -1
- package/fesm2022/coer-elements-tools.mjs +3 -1
- package/fesm2022/coer-elements-tools.mjs.map +1 -1
- package/interfaces/lib/coer-button/button-type.interface.d.ts +9 -0
- package/interfaces/public-api.d.ts +1 -0
- package/package.json +1 -1
- package/styles/coer-elements.css +1 -1
|
@@ -38,7 +38,7 @@ import { MatToolbarModule } from '@angular/material/toolbar';
|
|
|
38
38
|
import * as i3$1 from '@angular/material/tooltip';
|
|
39
39
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
40
40
|
import { Tools, Strings, ControlValue, CONTROL_VALUE, Dates, Screen, HTMLElements, CoerAlert, Files, Numbers, Collections, Source, Menu, Breadcrumbs } from 'coer-elements/tools';
|
|
41
|
-
import {
|
|
41
|
+
import { breakpointSIGNAL, isModalOpenSIGNAL, menuSelectedSIGNAL, isMenuOpenSIGNAL, isLoadingSIGNAL, navigationSIGNAL } from 'coer-elements/signals';
|
|
42
42
|
import { Modal } from 'bootstrap';
|
|
43
43
|
|
|
44
44
|
class CoerAccordion {
|
|
@@ -135,6 +135,7 @@ class CoerButton {
|
|
|
135
135
|
this.id = input('');
|
|
136
136
|
this.color = input('default');
|
|
137
137
|
this.type = input('filled');
|
|
138
|
+
this.typeBreakpoint = input({});
|
|
138
139
|
this.icon = input('');
|
|
139
140
|
this.iconPosition = input('left');
|
|
140
141
|
this.path = input([]);
|
|
@@ -161,6 +162,30 @@ class CoerButton {
|
|
|
161
162
|
? Strings.CleanUpBlanks(this.tooltip()) : '';
|
|
162
163
|
});
|
|
163
164
|
//computed
|
|
165
|
+
this._showButton = computed(() => {
|
|
166
|
+
return this._buttonBreakpoint() == 'filled'
|
|
167
|
+
|| this._buttonBreakpoint() == 'outline';
|
|
168
|
+
});
|
|
169
|
+
//computed
|
|
170
|
+
this._showButtonIcon = computed(() => {
|
|
171
|
+
return this._buttonBreakpoint() == 'icon'
|
|
172
|
+
|| this._buttonBreakpoint() == 'icon-outline'
|
|
173
|
+
|| this._buttonBreakpoint() == 'icon-no-border';
|
|
174
|
+
});
|
|
175
|
+
//computed
|
|
176
|
+
this._buttonBreakpoint = computed(() => {
|
|
177
|
+
switch (breakpointSIGNAL()) {
|
|
178
|
+
case 'mv': return this.typeBreakpoint()?.mv || this.type();
|
|
179
|
+
case 'xs': return this.typeBreakpoint()?.xs || this.type();
|
|
180
|
+
case 'sm': return this.typeBreakpoint()?.sm || this.type();
|
|
181
|
+
case 'md': return this.typeBreakpoint()?.md || this.type();
|
|
182
|
+
case 'lg': return this.typeBreakpoint()?.lg || this.type();
|
|
183
|
+
case 'xl': return this.typeBreakpoint()?.xl || this.type();
|
|
184
|
+
case 'xxl': return this.typeBreakpoint()?.xxl || this.type();
|
|
185
|
+
default: return this.type();
|
|
186
|
+
}
|
|
187
|
+
});
|
|
188
|
+
//computed
|
|
164
189
|
this._tooltipPosition = computed(() => {
|
|
165
190
|
switch (this.tooltipPosition()) {
|
|
166
191
|
case 'top': return 'above';
|
|
@@ -171,7 +196,10 @@ class CoerButton {
|
|
|
171
196
|
});
|
|
172
197
|
//computed
|
|
173
198
|
this._isEnable = computed(() => {
|
|
174
|
-
return !this.isLoading()
|
|
199
|
+
return !this.isLoading()
|
|
200
|
+
&& !this.isDisabled()
|
|
201
|
+
&& !this.isInvisible()
|
|
202
|
+
&& !this.isReadonly();
|
|
175
203
|
});
|
|
176
204
|
//computed
|
|
177
205
|
this._icon = computed(() => {
|
|
@@ -195,25 +223,34 @@ class CoerButton {
|
|
|
195
223
|
});
|
|
196
224
|
//computed
|
|
197
225
|
this._buttonType = computed(() => {
|
|
198
|
-
const readonly = ['icon', 'icon-outline', 'icon-no-border'].includes(this.
|
|
226
|
+
const readonly = ['icon', 'icon-outline', 'icon-no-border'].includes(this._buttonBreakpoint())
|
|
199
227
|
? (this.isDisabled() || this.isLoading() ? 'readonly' : '')
|
|
200
228
|
: (this.isDisabled() ? 'readonly' : '');
|
|
201
229
|
return `
|
|
202
|
-
${this.color()}-${['filled', 'icon'].includes(this.
|
|
230
|
+
${this.color()}-${['filled', 'icon'].includes(this._buttonBreakpoint()) ? 'filled' : 'outline'}
|
|
203
231
|
${readonly}
|
|
204
232
|
${this.isLoading() ? 'cursor-wait' : ''}
|
|
205
|
-
${this.
|
|
233
|
+
${this._buttonBreakpoint() == 'icon-no-border' ? 'icon-no-border' : ''}
|
|
206
234
|
`.trim();
|
|
207
235
|
});
|
|
208
236
|
}
|
|
209
237
|
//AfterViewInit
|
|
210
238
|
ngAfterViewInit() {
|
|
211
239
|
Tools.Sleep().then(() => {
|
|
212
|
-
this.
|
|
213
|
-
this.
|
|
214
|
-
|
|
215
|
-
this.
|
|
216
|
-
|
|
240
|
+
this._innerButton = document.getElementById(`${this._id}-inner-button`);
|
|
241
|
+
if (this._innerButton) {
|
|
242
|
+
this._innerButton.addEventListener('focus', () => {
|
|
243
|
+
if (!this._isEnable())
|
|
244
|
+
this.Blur();
|
|
245
|
+
});
|
|
246
|
+
}
|
|
247
|
+
this._innerButtonIcon = document.getElementById(`${this._id}-inner-button-icon`);
|
|
248
|
+
if (this._innerButtonIcon) {
|
|
249
|
+
this._innerButtonIcon.addEventListener('focus', () => {
|
|
250
|
+
if (!this._isEnable())
|
|
251
|
+
this.Blur();
|
|
252
|
+
});
|
|
253
|
+
}
|
|
217
254
|
});
|
|
218
255
|
}
|
|
219
256
|
/** */
|
|
@@ -233,20 +270,24 @@ class CoerButton {
|
|
|
233
270
|
/** */
|
|
234
271
|
Focus(timeout = 0) {
|
|
235
272
|
Tools.Sleep(timeout).then(() => {
|
|
236
|
-
if (this._isEnable())
|
|
237
|
-
this.
|
|
273
|
+
if (this._isEnable()) {
|
|
274
|
+
this._innerButton.focus();
|
|
275
|
+
}
|
|
238
276
|
});
|
|
239
277
|
}
|
|
240
278
|
/** */
|
|
241
279
|
Blur(timeout = 0) {
|
|
242
|
-
Tools.Sleep(timeout).then(() =>
|
|
280
|
+
Tools.Sleep(timeout).then(() => {
|
|
281
|
+
this._innerButton.blur();
|
|
282
|
+
this._innerButtonIcon.focus();
|
|
283
|
+
});
|
|
243
284
|
}
|
|
244
285
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
245
|
-
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 }, 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 @if(type() =='filled' || type() == 'outline') {\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 }\r\n\r\n @else {\r\n <button mat-icon-button\r\n [id]=\"_id + '-inner-button'\"\r\n type=\"button\"\r\n (click)=\"_Click()\"\r\n [class]=\"_buttonType()\">\r\n <i [class]=\"_icon()\"></i>\r\n </button>\r\n }\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"] }] }); }
|
|
286
|
+
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"] }] }); }
|
|
246
287
|
}
|
|
247
288
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerButton, decorators: [{
|
|
248
289
|
type: Component,
|
|
249
|
-
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 @if(type() =='filled' || type() == 'outline') {\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 }\r\n\r\n @else {\r\n <button mat-icon-button\r\n [id]=\"_id + '-inner-button'\"\r\n type=\"button\"\r\n (click)=\"_Click()\"\r\n [class]=\"_buttonType()\">\r\n <i [class]=\"_icon()\"></i>\r\n </button>\r\n }\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"] }]
|
|
290
|
+
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"] }]
|
|
250
291
|
}] });
|
|
251
292
|
|
|
252
293
|
class CoerCard {
|
|
@@ -1162,7 +1203,7 @@ class CoerNumberBox extends ControlValue {
|
|
|
1162
1203
|
});
|
|
1163
1204
|
}
|
|
1164
1205
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerNumberBox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1165
|
-
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", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
|
|
1206
|
+
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"] }] }); }
|
|
1166
1207
|
}
|
|
1167
1208
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerNumberBox, decorators: [{
|
|
1168
1209
|
type: Component,
|
|
@@ -1372,11 +1413,6 @@ class CoerSelectbox extends ControlValue {
|
|
|
1372
1413
|
: placeholder;
|
|
1373
1414
|
}
|
|
1374
1415
|
//getter
|
|
1375
|
-
get _dropDownWidth() {
|
|
1376
|
-
return Tools.IsNotNull(this._container)
|
|
1377
|
-
? HTMLElements.GetElementWidth(this._container) : '100%';
|
|
1378
|
-
}
|
|
1379
|
-
//getter
|
|
1380
1416
|
get _showCancel() {
|
|
1381
1417
|
return Tools.IsNotNull(this._value)
|
|
1382
1418
|
&& Tools.IsNotNull(this._search())
|
|
@@ -1399,7 +1435,9 @@ class CoerSelectbox extends ControlValue {
|
|
|
1399
1435
|
if (Tools.IsNotOnlyWhiteSpace(this._value) && Tools.IsNull(_value)) {
|
|
1400
1436
|
this.onUnselect.emit(null);
|
|
1401
1437
|
}
|
|
1402
|
-
this._UpdateValue
|
|
1438
|
+
if (typeof this._UpdateValue === 'function') {
|
|
1439
|
+
this._UpdateValue(_value);
|
|
1440
|
+
}
|
|
1403
1441
|
this._value = _value;
|
|
1404
1442
|
this._search.set(this._GetDisplay(_value));
|
|
1405
1443
|
}
|
|
@@ -1503,11 +1541,11 @@ class CoerSelectbox extends ControlValue {
|
|
|
1503
1541
|
});
|
|
1504
1542
|
}
|
|
1505
1543
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSelectbox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1506
|
-
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 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 }\"\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 [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 'cursor': isLoading() ? 'wait' : null,\r\n 'margin-top': (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight\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\" [style]=\"{ 'width': _widthIcons }\">\r\n @if(_showCancel && _isEnable() && !isLoading()) {\r\n <i class=\"fa-solid fa-xmark text-secondary\" (click)=\"Unselect()\"></i>\r\n }\r\n\r\n @else if(isInvalid() && !isLoading()) {\r\n <i class=\"fa-solid fa-circle-exclamation\"></i>\r\n }\r\n\r\n @else if(isValid() && !isLoading()) {\r\n <i class=\"fa-solid fa-circle-check text-green\"></i>\r\n }\r\n\r\n @if(_isOpen() && _isEnable() && !isLoading()) {\r\n <i class=\"fa-solid fa-caret-up cursor-pointer text-primary\" (click)=\"Blur()\"></i>\r\n }\r\n\r\n @else if(_isEnable() && !isLoading()) {\r\n <i class=\"fa-solid fa-caret-down cursor-pointer text-secondary\"></i>\r\n }\r\n </span>\r\n </mat-form-field>\r\n\r\n <!-- Options Container -->\r\n <div class=\"btn-group\">\r\n <ul [id]=\"_id + '-dropdown-menu'\" \r\n class=\"dropdown-menu\"\r\n [ngStyle]=\"{\r\n width: _dropDownWidth\r\n }\">\r\n @for(item of _dataSource(); track _GetIndexRow(item)) {\r\n <li (click)=\"_SelectItem(item)\">\r\n <div [id]=\"id + '-dropdown-option-' + _GetIndexRow(item)\"\r\n [ngClass]=\"{\r\n 'dropdown-item': true,\r\n 'cursor-pointer': true,\r\n 'dropdown-item-focus': _index() == _GetIndexRow(item)\r\n }\"\r\n >{{ _GetDisplay(item) }} </div>\r\n <hr class=\"dropdown-divider\">\r\n </li>\r\n }\r\n </ul>\r\n </div>\r\n</div>", styles: ["div.coer-select-box{position:relative!important}div.coer-select-box mat-form-field{position:relative!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);font-weight:700;position:relative;left:-10px;top:2px}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(--black)!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-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;display:flex;align-items:center;justify-content:center;gap:5px}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.fa-solid.fa-xmark,div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass{color:#caced1!important;cursor:pointer!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-xmark:hover,div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass:hover{color:#6c757d!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-xmark{font-size:22px!important;padding:2px!important}div.coer-select-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-select-box mat-form-field .placeholder,div.coer-select-box mat-form-field .placeholder *,div.coer-select-box mat-form-field .placeholder-glow,div.coer-select-box mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-select-box .btn-group{position:absolute!important;top:40px;left:0!important;width:100%!important}div.coer-select-box ul.dropdown-menu{background-color:var(--white)!important;border-top-left-radius:0!important;border-top-right-radius:0!important;max-height:205px!important;overflow:auto!important;padding:0!important}div.coer-select-box .dropdown-divider{margin:0!important;background-color:var(--white)!important}div.coer-select-box ul.dropdown-menu li:not(.dropdown-item-focus):hover,div.coer-select-box ul.dropdown-menu li>div:not(.dropdown-item-focus):hover{color:var(--black)!important;background-color:#f1f6ff!important}div.coer-select-box ul.dropdown-menu li:last-child hr.dropdown-divider,div.coer-select-box ul.dropdown-menu li:last-child hr.dropdown-divider:hover{width:0px!important;border:none!important}div.coer-select-box ul.dropdown-menu li div{display:flex!important;align-items:center!important;height:40px!important}div.coer-select-box div.dropdown-item-focus{background-color:#cde1ff!important}div.coer-select-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-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}coer-grid table tbody tr td.coer-selectbox div.coer-select-box .btn-group{top:28px!important}aside.modal .modal-content ul.dropdown-menu{position:fixed!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"] }] }); }
|
|
1544
|
+
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 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 }\"\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 [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 'cursor': isLoading() ? 'wait' : null,\r\n 'margin-top': (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight\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\" [style]=\"{ 'width': _widthIcons }\">\r\n @if(_showCancel && _isEnable() && !isLoading()) {\r\n <i class=\"fa-solid fa-xmark text-secondary\" (click)=\"Unselect()\"></i>\r\n }\r\n\r\n @else if(isInvalid() && !isLoading()) {\r\n <i class=\"fa-solid fa-circle-exclamation\"></i>\r\n }\r\n\r\n @else if(isValid() && !isLoading()) {\r\n <i class=\"fa-solid fa-circle-check text-green\"></i>\r\n }\r\n\r\n @if(_isOpen() && _isEnable() && !isLoading()) {\r\n <i class=\"fa-solid fa-caret-up cursor-pointer text-primary\" (click)=\"Blur()\"></i>\r\n }\r\n\r\n @else if(_isEnable() && !isLoading()) {\r\n <i class=\"fa-solid fa-caret-down cursor-pointer text-secondary\"></i>\r\n }\r\n </span>\r\n </mat-form-field>\r\n\r\n <!-- Options Container -->\r\n <div class=\"btn-group\">\r\n <ul [id]=\"_id + '-dropdown-menu'\" class=\"dropdown-menu\">\r\n @for(item of _dataSource(); track _GetIndexRow(item)) {\r\n <li (click)=\"_SelectItem(item)\">\r\n <div [id]=\"id + '-dropdown-option-' + _GetIndexRow(item)\"\r\n [ngClass]=\"{\r\n 'dropdown-item': true,\r\n 'cursor-pointer': true,\r\n 'dropdown-item-focus': _index() == _GetIndexRow(item)\r\n }\"\r\n >{{ _GetDisplay(item) }} </div>\r\n <hr class=\"dropdown-divider\">\r\n </li>\r\n }\r\n </ul>\r\n </div>\r\n</div>", styles: ["div.coer-select-box{position:relative!important}div.coer-select-box mat-form-field{position:relative!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);font-weight:700;position:relative;left:-10px;top:2px}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(--black)!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-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;display:flex;align-items:center;justify-content:center;gap:5px}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.fa-solid.fa-xmark,div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass{color:#caced1!important;cursor:pointer!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-xmark:hover,div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass:hover{color:#6c757d!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-xmark{font-size:22px!important;padding:2px!important}div.coer-select-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-select-box mat-form-field .placeholder,div.coer-select-box mat-form-field .placeholder *,div.coer-select-box mat-form-field .placeholder-glow,div.coer-select-box mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-select-box .btn-group{position:absolute!important;top:40px;left:0!important;width:100%!important}div.coer-select-box ul.dropdown-menu{background-color:var(--white)!important;border-top-left-radius:0!important;border-top-right-radius:0!important;max-height:205px!important;overflow:auto!important;padding:0!important;width:inherit!important}div.coer-select-box .dropdown-divider{margin:0!important;background-color:var(--white)!important}div.coer-select-box ul.dropdown-menu li:not(.dropdown-item-focus):hover,div.coer-select-box ul.dropdown-menu li>div:not(.dropdown-item-focus):hover{color:var(--black)!important;background-color:#f1f6ff!important}div.coer-select-box ul.dropdown-menu li:last-child hr.dropdown-divider,div.coer-select-box ul.dropdown-menu li:last-child hr.dropdown-divider:hover{width:0px!important;border:none!important}div.coer-select-box ul.dropdown-menu li div{display:flex!important;align-items:center!important;height:40px!important}div.coer-select-box div.dropdown-item-focus{background-color:#cde1ff!important}div.coer-select-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-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}coer-grid table tbody tr td.coer-selectbox div.coer-select-box .btn-group{top:28px!important}aside.modal .modal-content ul.dropdown-menu{position:fixed!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"] }] }); }
|
|
1507
1545
|
}
|
|
1508
1546
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSelectbox, decorators: [{
|
|
1509
1547
|
type: Component,
|
|
1510
|
-
args: [{ selector: 'coer-selectbox', providers: [CONTROL_VALUE(CoerSelectbox)], standalone: false, template: "<div 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 }\"\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 [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 'cursor': isLoading() ? 'wait' : null,\r\n 'margin-top': (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight\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\" [style]=\"{ 'width': _widthIcons }\">\r\n @if(_showCancel && _isEnable() && !isLoading()) {\r\n <i class=\"fa-solid fa-xmark text-secondary\" (click)=\"Unselect()\"></i>\r\n }\r\n\r\n @else if(isInvalid() && !isLoading()) {\r\n <i class=\"fa-solid fa-circle-exclamation\"></i>\r\n }\r\n\r\n @else if(isValid() && !isLoading()) {\r\n <i class=\"fa-solid fa-circle-check text-green\"></i>\r\n }\r\n\r\n @if(_isOpen() && _isEnable() && !isLoading()) {\r\n <i class=\"fa-solid fa-caret-up cursor-pointer text-primary\" (click)=\"Blur()\"></i>\r\n }\r\n\r\n @else if(_isEnable() && !isLoading()) {\r\n <i class=\"fa-solid fa-caret-down cursor-pointer text-secondary\"></i>\r\n }\r\n </span>\r\n </mat-form-field>\r\n\r\n <!-- Options Container -->\r\n <div class=\"btn-group\">\r\n <ul [id]=\"_id + '-dropdown-menu'\"
|
|
1548
|
+
args: [{ selector: 'coer-selectbox', providers: [CONTROL_VALUE(CoerSelectbox)], standalone: false, template: "<div 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 }\"\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 [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 'cursor': isLoading() ? 'wait' : null,\r\n 'margin-top': (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight\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\" [style]=\"{ 'width': _widthIcons }\">\r\n @if(_showCancel && _isEnable() && !isLoading()) {\r\n <i class=\"fa-solid fa-xmark text-secondary\" (click)=\"Unselect()\"></i>\r\n }\r\n\r\n @else if(isInvalid() && !isLoading()) {\r\n <i class=\"fa-solid fa-circle-exclamation\"></i>\r\n }\r\n\r\n @else if(isValid() && !isLoading()) {\r\n <i class=\"fa-solid fa-circle-check text-green\"></i>\r\n }\r\n\r\n @if(_isOpen() && _isEnable() && !isLoading()) {\r\n <i class=\"fa-solid fa-caret-up cursor-pointer text-primary\" (click)=\"Blur()\"></i>\r\n }\r\n\r\n @else if(_isEnable() && !isLoading()) {\r\n <i class=\"fa-solid fa-caret-down cursor-pointer text-secondary\"></i>\r\n }\r\n </span>\r\n </mat-form-field>\r\n\r\n <!-- Options Container -->\r\n <div class=\"btn-group\">\r\n <ul [id]=\"_id + '-dropdown-menu'\" class=\"dropdown-menu\">\r\n @for(item of _dataSource(); track _GetIndexRow(item)) {\r\n <li (click)=\"_SelectItem(item)\">\r\n <div [id]=\"id + '-dropdown-option-' + _GetIndexRow(item)\"\r\n [ngClass]=\"{\r\n 'dropdown-item': true,\r\n 'cursor-pointer': true,\r\n 'dropdown-item-focus': _index() == _GetIndexRow(item)\r\n }\"\r\n >{{ _GetDisplay(item) }} </div>\r\n <hr class=\"dropdown-divider\">\r\n </li>\r\n }\r\n </ul>\r\n </div>\r\n</div>", styles: ["div.coer-select-box{position:relative!important}div.coer-select-box mat-form-field{position:relative!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);font-weight:700;position:relative;left:-10px;top:2px}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(--black)!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-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;display:flex;align-items:center;justify-content:center;gap:5px}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.fa-solid.fa-xmark,div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass{color:#caced1!important;cursor:pointer!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-xmark:hover,div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass:hover{color:#6c757d!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-xmark{font-size:22px!important;padding:2px!important}div.coer-select-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-select-box mat-form-field .placeholder,div.coer-select-box mat-form-field .placeholder *,div.coer-select-box mat-form-field .placeholder-glow,div.coer-select-box mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-select-box .btn-group{position:absolute!important;top:40px;left:0!important;width:100%!important}div.coer-select-box ul.dropdown-menu{background-color:var(--white)!important;border-top-left-radius:0!important;border-top-right-radius:0!important;max-height:205px!important;overflow:auto!important;padding:0!important;width:inherit!important}div.coer-select-box .dropdown-divider{margin:0!important;background-color:var(--white)!important}div.coer-select-box ul.dropdown-menu li:not(.dropdown-item-focus):hover,div.coer-select-box ul.dropdown-menu li>div:not(.dropdown-item-focus):hover{color:var(--black)!important;background-color:#f1f6ff!important}div.coer-select-box ul.dropdown-menu li:last-child hr.dropdown-divider,div.coer-select-box ul.dropdown-menu li:last-child hr.dropdown-divider:hover{width:0px!important;border:none!important}div.coer-select-box ul.dropdown-menu li div{display:flex!important;align-items:center!important;height:40px!important}div.coer-select-box div.dropdown-item-focus{background-color:#cde1ff!important}div.coer-select-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-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}coer-grid table tbody tr td.coer-selectbox div.coer-select-box .btn-group{top:28px!important}aside.modal .modal-content ul.dropdown-menu{position:fixed!important}\n"] }]
|
|
1511
1549
|
}], ctorParameters: () => [] });
|
|
1512
1550
|
|
|
1513
1551
|
class CoerTextBox extends ControlValue {
|
|
@@ -1706,7 +1744,7 @@ class CoerTextBox extends ControlValue {
|
|
|
1706
1744
|
});
|
|
1707
1745
|
}
|
|
1708
1746
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTextBox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1709
|
-
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", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
|
|
1747
|
+
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"] }] }); }
|
|
1710
1748
|
}
|
|
1711
1749
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTextBox, decorators: [{
|
|
1712
1750
|
type: Component,
|
|
@@ -2806,7 +2844,7 @@ class CoerGrid extends CoerGridExtension {
|
|
|
2806
2844
|
}
|
|
2807
2845
|
}
|
|
2808
2846
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGrid, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2809
|
-
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", "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" }] }); }
|
|
2847
|
+
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" }] }); }
|
|
2810
2848
|
}
|
|
2811
2849
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGrid, decorators: [{
|
|
2812
2850
|
type: Component,
|
|
@@ -2922,7 +2960,7 @@ class CoerList {
|
|
|
2922
2960
|
this.onDrop.emit(item);
|
|
2923
2961
|
}
|
|
2924
2962
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2925
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerList, isStandalone: false, selector: "coer-list", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, propDisplay: { classPropertyName: "propDisplay", publicName: "propDisplay", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, headerIcon: { classPropertyName: "headerIcon", publicName: "headerIcon", isSignal: true, isRequired: false, transformFunction: null }, showDeleteButtonByRow: { classPropertyName: "showDeleteButtonByRow", publicName: "showDeleteButtonByRow", isSignal: true, isRequired: false, transformFunction: null }, showGoButtonByRow: { classPropertyName: "showGoButtonByRow", publicName: "showGoButtonByRow", isSignal: true, isRequired: false, transformFunction: null }, showBackButton: { classPropertyName: "showBackButton", publicName: "showBackButton", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDraggable: { classPropertyName: "isDraggable", publicName: "isDraggable", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", 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 }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", 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: { onDrop: "onDrop", onSort: "onSort", onClick: "onClick", onDoubleClick: "onDoubleClick", onClickDelete: "onClickDelete", onClickGo: "onClickGo", onClickBack: "onClickBack" }, ngImport: i0, template: "<div [id]=\"_id\" class=\"coer-list\" [ngStyle]=\"{ \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 @if(isLoading()) {\r\n <!-- Grid Message -->\r\n <div class=\"loading\">\r\n <i class=\"spinner-border\"></i>\r\n <span class=\"fa-fade\">Loading</span>\r\n </div>\r\n }\r\n\r\n @else if(dataSource().length <= 0) {\r\n <div class=\"no-data\"> No Data </div>\r\n }\r\n\r\n <header [id]=\"_id + '-header'\" class=\"row\"> \r\n @if(header().length > 0 || headerIcon().length > 0) {\r\n <div class=\"col-auto me-auto\">\r\n <h6>\r\n @if(headerIcon().length > 0) {\r\n <i [class]=\"headerIcon()\"></i> \r\n }\r\n\r\n @if(header().length > 0) {\r\n <span>{{ header() }}</span> \r\n }\r\n </h6> \r\n </div>\r\n }\r\n\r\n @if(_showBackButton()) {\r\n <div class=\"col-auto ps-2 pe-0\"> \r\n <coer-button\r\n type=\"icon-outline\"\r\n color=\"secondary\"\r\n icon=\"back\"\r\n tooltip=\"Back\" \r\n (onClick)=\"onClickBack.emit()\"\r\n ></coer-button> \r\n </div>\r\n }\r\n \r\n <!-- Search -->\r\n @if(showSearch() && dataSource().length > 0) {\r\n <div class=\"col-auto pe-0\">\r\n <coer-textbox\r\n #inputSearch \r\n placeholder=\"Search\"\r\n [isDisabled]=\"isLoading()\"\r\n [selectOnFocus]=\"true\"\r\n width=\"250px\"\r\n marginTop=\"5px\"\r\n marginBottom=\"5px\"\r\n [showSearchIcon]=\"true\"\r\n [showClearIcon]=\"true\"\r\n ></coer-textbox>\r\n </div>\r\n }\r\n </header>\r\n\r\n <div [ngStyle]=\"{ \r\n 'width': width(), \r\n 'min-Width': MinWidth(), \r\n 'max-Width': MaxWidth(), \r\n }\">\r\n <ul cdkDropList (cdkDropListDropped)=\"_Drop($event)\" class='list-group coer-list'\r\n [ngStyle]=\"{ \r\n 'height': _height, \r\n 'min-height': minHeight(), \r\n 'max-height': maxHeight(), \r\n 'd-none': dataSource().length <= 0 \r\n }\">\r\n \r\n @for (item of _dataSource(); track _GetIndexRow(item)) {\r\n <li cdkDrag \r\n class=\"list-group-item coer-list-box\" \r\n cdkDragBoundary=\"ul.coer-list\"\r\n (click)=\"onClick.emit(item)\" \r\n (dblclick)=\"onDoubleClick.emit(item)\">\r\n \r\n <div *cdkDragPlaceholder class=\"coer-list-placeholder cursor-grabbing\"></div>\r\n <div class=\"coer-list-content\"> \r\n @if(_hasTemplate()) {\r\n <div [innerHTML]=\"_GetTemplate(item) | html\" class=\"template\"></div>\r\n }\r\n \r\n @else {\r\n <div> {{ _GetDisplay(item) }} </div> \r\n } \r\n \r\n <div>\r\n @if(_showDeleteButtonByRow(item)) {\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"secondary\"\r\n icon=\"delete\" \r\n (onClick)=\"onClickDelete.emit(item)\"\r\n ></coer-button>\r\n } \r\n \r\n @if(_showGoButtonByRow(item)) {\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"secondary\"\r\n icon=\"go\" \r\n marginLeft=\"5px\" \r\n (onClick)=\"onClickGo.emit(item)\"\r\n ></coer-button>\r\n } \r\n \r\n <i cdkDragHandle [ngClass]=\"{ \r\n 'fa-solid fa-grip-vertical text-secondary ps-2': true,\r\n 'cursor-grab': true, \r\n 'cursor-grabbing': false, \r\n 'd-none': !_isDraggable()\r\n }\"></i> \r\n </div> \r\n </div> \r\n </li> \r\n } \r\n </ul>\r\n </div>\r\n</div>", styles: ["div.coer-list header{align-items:center;justify-content:flex-end;padding-right:10px;margin:0}div.coer-list header h6{display:flex;align-items:center;gap:10px;min-height:40px;max-height:40px;margin-top:5px;margin-bottom:5px}div.coer-list header>div{display:flex;align-items:baseline;position:relative;z-index:1}div.coer-list ul.coer-list{width:100%;border:solid 1px #ccc;display:block;background:var(--white);border-radius:4px;overflow:auto}div.coer-list li.coer-list-box{padding:10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:var(--white);font-size:14px}div.coer-list li.coer-list-box div.coer-list-content{width:100%;display:flex;align-items:center;justify-content:space-between}div.coer-list .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}div.coer-list .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list .coer-list-box:last-child{border:none}div.coer-list .coer-list.cdk-drop-list-dragging .coer-list-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.coer-list-placeholder{background:#ccc;border:dotted 3px #999;min-height:40px;transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.cdk-drag-placeholder,div.coer-list ul.cdk-drop-list-dragging,div.coer-list ul.cdk-drop-list-dragging *{cursor:grabbing}div.coer-list div.loading,div.coer-list div.no-data{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;color:var(--gray);z-index:1}div.coer-list div.loading{background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important}div.coer-list div.loading span.fa-fade{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$6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$6.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i2$6.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: i2$6.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }, { 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" }] }); }
|
|
2963
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerList, isStandalone: false, selector: "coer-list", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, propDisplay: { classPropertyName: "propDisplay", publicName: "propDisplay", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, headerIcon: { classPropertyName: "headerIcon", publicName: "headerIcon", isSignal: true, isRequired: false, transformFunction: null }, showDeleteButtonByRow: { classPropertyName: "showDeleteButtonByRow", publicName: "showDeleteButtonByRow", isSignal: true, isRequired: false, transformFunction: null }, showGoButtonByRow: { classPropertyName: "showGoButtonByRow", publicName: "showGoButtonByRow", isSignal: true, isRequired: false, transformFunction: null }, showBackButton: { classPropertyName: "showBackButton", publicName: "showBackButton", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDraggable: { classPropertyName: "isDraggable", publicName: "isDraggable", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", 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 }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", 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: { onDrop: "onDrop", onSort: "onSort", onClick: "onClick", onDoubleClick: "onDoubleClick", onClickDelete: "onClickDelete", onClickGo: "onClickGo", onClickBack: "onClickBack" }, ngImport: i0, template: "<div [id]=\"_id\" class=\"coer-list\" [ngStyle]=\"{ \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 @if(isLoading()) {\r\n <!-- Grid Message -->\r\n <div class=\"loading\">\r\n <i class=\"spinner-border\"></i>\r\n <span class=\"fa-fade\">Loading</span>\r\n </div>\r\n }\r\n\r\n @else if(dataSource().length <= 0) {\r\n <div class=\"no-data\"> No Data </div>\r\n }\r\n\r\n <header [id]=\"_id + '-header'\" class=\"row\"> \r\n @if(header().length > 0 || headerIcon().length > 0) {\r\n <div class=\"col-auto me-auto\">\r\n <h6>\r\n @if(headerIcon().length > 0) {\r\n <i [class]=\"headerIcon()\"></i> \r\n }\r\n\r\n @if(header().length > 0) {\r\n <span>{{ header() }}</span> \r\n }\r\n </h6> \r\n </div>\r\n }\r\n\r\n @if(_showBackButton()) {\r\n <div class=\"col-auto ps-2 pe-0\"> \r\n <coer-button\r\n type=\"icon-outline\"\r\n color=\"secondary\"\r\n icon=\"back\"\r\n tooltip=\"Back\" \r\n (onClick)=\"onClickBack.emit()\"\r\n ></coer-button> \r\n </div>\r\n }\r\n \r\n <!-- Search -->\r\n @if(showSearch() && dataSource().length > 0) {\r\n <div class=\"col-auto pe-0\">\r\n <coer-textbox\r\n #inputSearch \r\n placeholder=\"Search\"\r\n [isDisabled]=\"isLoading()\"\r\n [selectOnFocus]=\"true\"\r\n width=\"250px\"\r\n marginTop=\"5px\"\r\n marginBottom=\"5px\"\r\n [showSearchIcon]=\"true\"\r\n [showClearIcon]=\"true\"\r\n ></coer-textbox>\r\n </div>\r\n }\r\n </header>\r\n\r\n <div [ngStyle]=\"{ \r\n 'width': width(), \r\n 'min-Width': MinWidth(), \r\n 'max-Width': MaxWidth(), \r\n }\">\r\n <ul cdkDropList (cdkDropListDropped)=\"_Drop($event)\" class='list-group coer-list'\r\n [ngStyle]=\"{ \r\n 'height': _height, \r\n 'min-height': minHeight(), \r\n 'max-height': maxHeight(), \r\n 'd-none': dataSource().length <= 0 \r\n }\">\r\n \r\n @for (item of _dataSource(); track _GetIndexRow(item)) {\r\n <li cdkDrag \r\n class=\"list-group-item coer-list-box\" \r\n cdkDragBoundary=\"ul.coer-list\"\r\n (click)=\"onClick.emit(item)\" \r\n (dblclick)=\"onDoubleClick.emit(item)\">\r\n \r\n <div *cdkDragPlaceholder class=\"coer-list-placeholder cursor-grabbing\"></div>\r\n <div class=\"coer-list-content\"> \r\n @if(_hasTemplate()) {\r\n <div [innerHTML]=\"_GetTemplate(item) | html\" class=\"template\"></div>\r\n }\r\n \r\n @else {\r\n <div> {{ _GetDisplay(item) }} </div> \r\n } \r\n \r\n <div>\r\n @if(_showDeleteButtonByRow(item)) {\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"secondary\"\r\n icon=\"delete\" \r\n (onClick)=\"onClickDelete.emit(item)\"\r\n ></coer-button>\r\n } \r\n \r\n @if(_showGoButtonByRow(item)) {\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"secondary\"\r\n icon=\"go\" \r\n marginLeft=\"5px\" \r\n (onClick)=\"onClickGo.emit(item)\"\r\n ></coer-button>\r\n } \r\n \r\n <i cdkDragHandle [ngClass]=\"{ \r\n 'fa-solid fa-grip-vertical text-secondary ps-2': true,\r\n 'cursor-grab': true, \r\n 'cursor-grabbing': false, \r\n 'd-none': !_isDraggable()\r\n }\"></i> \r\n </div> \r\n </div> \r\n </li> \r\n } \r\n </ul>\r\n </div>\r\n</div>", styles: ["div.coer-list header{align-items:center;justify-content:flex-end;padding-right:10px;margin:0}div.coer-list header h6{display:flex;align-items:center;gap:10px;min-height:40px;max-height:40px;margin-top:5px;margin-bottom:5px}div.coer-list header>div{display:flex;align-items:baseline;position:relative;z-index:1}div.coer-list ul.coer-list{width:100%;border:solid 1px #ccc;display:block;background:var(--white);border-radius:4px;overflow:auto}div.coer-list li.coer-list-box{padding:10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:var(--white);font-size:14px}div.coer-list li.coer-list-box div.coer-list-content{width:100%;display:flex;align-items:center;justify-content:space-between}div.coer-list .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}div.coer-list .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list .coer-list-box:last-child{border:none}div.coer-list .coer-list.cdk-drop-list-dragging .coer-list-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.coer-list-placeholder{background:#ccc;border:dotted 3px #999;min-height:40px;transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.cdk-drag-placeholder,div.coer-list ul.cdk-drop-list-dragging,div.coer-list ul.cdk-drop-list-dragging *{cursor:grabbing}div.coer-list div.loading,div.coer-list div.no-data{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;color:var(--gray);z-index:1}div.coer-list div.loading{background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important}div.coer-list div.loading span.fa-fade{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$6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$6.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i2$6.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: i2$6.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { 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: 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" }] }); }
|
|
2926
2964
|
}
|
|
2927
2965
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerList, decorators: [{
|
|
2928
2966
|
type: Component,
|
|
@@ -3160,11 +3198,11 @@ class CoerSecretBox extends ControlValue {
|
|
|
3160
3198
|
this.Focus(false, delay);
|
|
3161
3199
|
}
|
|
3162
3200
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSecretBox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3163
|
-
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"] }] }); }
|
|
3201
|
+
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"] }] }); }
|
|
3164
3202
|
}
|
|
3165
3203
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSecretBox, decorators: [{
|
|
3166
3204
|
type: Component,
|
|
3167
|
-
args: [{ selector: 'coer-secretbox', providers: [CONTROL_VALUE(CoerSecretBox)], standalone: false, 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"] }]
|
|
3205
|
+
args: [{ selector: 'coer-secretbox', providers: [CONTROL_VALUE(CoerSecretBox)], standalone: false, 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"] }]
|
|
3168
3206
|
}], ctorParameters: () => [] });
|
|
3169
3207
|
|
|
3170
3208
|
class CoerPageTitle {
|
|
@@ -3772,7 +3810,7 @@ class CoerDropdown extends ControlValue {
|
|
|
3772
3810
|
});
|
|
3773
3811
|
}
|
|
3774
3812
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3775
|
-
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-dropdown\">\r\n <div [id]=\"_id + '-container'\">\r\n <div [ngClass]=\"{ 'd-none': isInvisible() }\">\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]=\"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 [tooltip]=\"tooltip()\"\r\n [tooltipPosition]=\"tooltipPosition()\"\r\n (onClick)=\"_Toggle()\"\r\n > {{ _label }} </coer-button>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'd-none': !isInvisible(), 'invisible': true }\">\r\n <coer-button\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 ></coer-button>\r\n </div>\r\n </div>\r\n\r\n <!-- Options Container -->\r\n <div class=\"btn-group\">\r\n <ul [id]=\"_id + '-dropdown-menu'\" \r\n class=\"dropdown-menu\"\r\n [ngStyle]=\"{\r\n width: width(),\r\n minWidth: minWidth()\r\n }\">\r\n\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'\r\n > -- No Options -- </div>\r\n </li>\r\n }\r\n\r\n @for(item of _dataSource(); track _GetIndexRow(item)) {\r\n <li (click)=\"_SelectItem(item)\">\r\n <a [routerLink]=\"_GetPath(item)\" class=\"text-decoration-none\">\r\n <div [id]=\"id + '-dropdown-option-' + _GetIndexRow(item)\"\r\n [ngClass]=\"{\r\n 'dropdown-item': true,\r\n 'cursor-pointer': true,\r\n 'gap-2': true,\r\n 'dropdown-item-focus': _index() == _GetIndexRow(item)\r\n }\"> \r\n\r\n @if (_GetIcon(item).length > 0) {\r\n <i [class]=\"_GetIcon(item)\"></i>\r\n }\r\n <span> {{ _GetDisplay(item) }} </span>\r\n </div>\r\n <hr class=\"dropdown-divider\">\r\n </a>\r\n </li>\r\n }\r\n </ul>\r\n </div>\r\n</div> ", styles: ["div.coer-dropdown{position:relative!important;width:fit-content!important;display:inline-block!important}div.coer-dropdown .btn-group{position:absolute!important;top:40px;left:0!important;width:100%!important}div.coer-dropdown ul.dropdown-menu{background-color:var(--white)!important;border-top-left-radius:0!important;border-top-right-radius:0!important;max-height:205px!important;width:100%;overflow:auto!important;padding:0!important}div.coer-dropdown .dropdown-divider{margin:0!important;background-color:var(--white)!important}div.coer-dropdown ul.dropdown-menu li:not(.no-options):hover,div.coer-dropdown ul.dropdown-menu li>div:not(.no-options):hover,div.coer-dropdown ul.dropdown-menu li:not(.dropdown-item-focus):hover,div.coer-dropdown ul.dropdown-menu li>div:not(.dropdown-item-focus):hover{color:var(--black)!important;background-color:#f1f6ff!important}div.coer-dropdown ul.dropdown-menu li:last-child hr.dropdown-divider,div.coer-dropdown ul.dropdown-menu li:last-child hr.dropdown-divider:hover{width:0px!important;border:none!important}div.coer-dropdown ul.dropdown-menu li div{display:flex!important;align-items:center!important;height:40px!important}div.coer-dropdown ul.dropdown-menu li.no-options *{color:#d3d3d3!important}div.coer-dropdown div.dropdown-item-focus{background-color:#cde1ff!important}div.coer-dropdown mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!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: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
|
|
3813
|
+
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-dropdown\">\r\n <div [id]=\"_id + '-container'\">\r\n <div [ngClass]=\"{ 'd-none': isInvisible() }\">\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]=\"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 [tooltip]=\"tooltip()\"\r\n [tooltipPosition]=\"tooltipPosition()\"\r\n (onClick)=\"_Toggle()\"\r\n > {{ _label }} </coer-button>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'd-none': !isInvisible(), 'invisible': true }\">\r\n <coer-button\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 ></coer-button>\r\n </div>\r\n </div>\r\n\r\n <!-- Options Container -->\r\n <div class=\"btn-group\">\r\n <ul [id]=\"_id + '-dropdown-menu'\" \r\n class=\"dropdown-menu\"\r\n [ngStyle]=\"{\r\n width: width(),\r\n minWidth: minWidth()\r\n }\">\r\n\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'\r\n > -- No Options -- </div>\r\n </li>\r\n }\r\n\r\n @for(item of _dataSource(); track _GetIndexRow(item)) {\r\n <li (click)=\"_SelectItem(item)\">\r\n <a [routerLink]=\"_GetPath(item)\" class=\"text-decoration-none\">\r\n <div [id]=\"id + '-dropdown-option-' + _GetIndexRow(item)\"\r\n [ngClass]=\"{\r\n 'dropdown-item': true,\r\n 'cursor-pointer': true,\r\n 'gap-2': true,\r\n 'dropdown-item-focus': _index() == _GetIndexRow(item)\r\n }\"> \r\n\r\n @if (_GetIcon(item).length > 0) {\r\n <i [class]=\"_GetIcon(item)\"></i>\r\n }\r\n <span> {{ _GetDisplay(item) }} </span>\r\n </div>\r\n <hr class=\"dropdown-divider\">\r\n </a>\r\n </li>\r\n }\r\n </ul>\r\n </div>\r\n</div> ", styles: ["div.coer-dropdown{position:relative!important;width:fit-content!important;display:inline-block!important}div.coer-dropdown .btn-group{position:absolute!important;top:40px;left:0!important;width:100%!important}div.coer-dropdown ul.dropdown-menu{background-color:var(--white)!important;border-top-left-radius:0!important;border-top-right-radius:0!important;max-height:205px!important;width:100%;overflow:auto!important;padding:0!important}div.coer-dropdown .dropdown-divider{margin:0!important;background-color:var(--white)!important}div.coer-dropdown ul.dropdown-menu li:not(.no-options):hover,div.coer-dropdown ul.dropdown-menu li>div:not(.no-options):hover,div.coer-dropdown ul.dropdown-menu li:not(.dropdown-item-focus):hover,div.coer-dropdown ul.dropdown-menu li>div:not(.dropdown-item-focus):hover{color:var(--black)!important;background-color:#f1f6ff!important}div.coer-dropdown ul.dropdown-menu li:last-child hr.dropdown-divider,div.coer-dropdown ul.dropdown-menu li:last-child hr.dropdown-divider:hover{width:0px!important;border:none!important}div.coer-dropdown ul.dropdown-menu li div{display:flex!important;align-items:center!important;height:40px!important}div.coer-dropdown ul.dropdown-menu li.no-options *{color:#d3d3d3!important}div.coer-dropdown div.dropdown-item-focus{background-color:#cde1ff!important}div.coer-dropdown mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!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: 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"] }] }); }
|
|
3776
3814
|
}
|
|
3777
3815
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerDropdown, decorators: [{
|
|
3778
3816
|
type: Component,
|