@rlucan/ui 14.2.6 → 17.1.1
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/README.md +24 -24
- package/esm2022/lib/action-button/action-button.component.mjs +4 -4
- package/esm2022/lib/action-icon/action-icon.component.mjs +5 -5
- package/esm2022/lib/autocomplete/autocomplete.component.mjs +7 -7
- package/esm2022/lib/avatar/avatar.component.mjs +5 -5
- package/esm2022/lib/button/button.component.mjs +5 -5
- package/esm2022/lib/checkbox/checkbox.component.mjs +6 -6
- package/esm2022/lib/checkbox-group/checkbox-group.component.mjs +6 -6
- package/esm2022/lib/currency/currency.component.mjs +6 -6
- package/esm2022/lib/date/date.component.mjs +7 -7
- package/esm2022/lib/dialog/dialog.component.mjs +5 -5
- package/esm2022/lib/directives/force-visibility/force-visibility.directive.mjs +5 -5
- package/esm2022/lib/editor/editor.component.mjs +7 -7
- package/esm2022/lib/elements/burger/burger.component.mjs +5 -5
- package/esm2022/lib/elements/expander/expander.component.mjs +5 -5
- package/esm2022/lib/elements/validation-message/validation-message.component.mjs +6 -6
- package/esm2022/lib/file/file.component.mjs +6 -6
- package/esm2022/lib/file-uploader/ui-file-uploader.component.mjs +8 -8
- package/esm2022/lib/input/input.component.mjs +8 -8
- package/esm2022/lib/input-autocomplete/input-autocomplete.component.mjs +8 -8
- package/esm2022/lib/layouts/base/ui-base-layout.component.mjs +4 -4
- package/esm2022/lib/layouts/base/ui-base.component.mjs +5 -5
- package/esm2022/lib/layouts/simple/ui-simple-layout.component.mjs +4 -4
- package/esm2022/lib/layouts/simple/ui-simple.component.mjs +5 -5
- package/esm2022/lib/radio/radio.component.mjs +4 -4
- package/esm2022/lib/radio-group/radio-group.component.mjs +6 -6
- package/esm2022/lib/select/select.component.mjs +28 -17
- package/esm2022/lib/services/message-box.service.mjs +12 -12
- package/esm2022/lib/services/toast.service.mjs +5 -5
- package/esm2022/lib/services/ui-file.service.mjs +6 -6
- package/esm2022/lib/services/ui-translate.service.mjs +4 -4
- package/esm2022/lib/submit-button/submit-button.component.mjs +6 -6
- package/esm2022/lib/table/table.component.mjs +6 -6
- package/esm2022/lib/text-area/text-area.component.mjs +7 -7
- package/esm2022/lib/ui.module.mjs +5 -5
- package/fesm2022/rlucan-ui.mjs +187 -176
- package/fesm2022/rlucan-ui.mjs.map +1 -1
- package/lib/action-button/action-button.component.d.ts +2 -6
- package/lib/select/select.component.d.ts +4 -2
- package/package.json +14 -14
- package/src/js/editorjs.mjs +9634 -9634
package/fesm2022/rlucan-ui.mjs
CHANGED
|
@@ -73,13 +73,13 @@ class ButtonComponent {
|
|
|
73
73
|
get isDisabled() {
|
|
74
74
|
return this.disabled || this.busy;
|
|
75
75
|
}
|
|
76
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
77
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
76
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
77
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: ButtonComponent, selector: "ui-button", inputs: { type: "type", matIconPrefix: "matIconPrefix", label: "label", disabled: "disabled", busy: "busy", kind: "kind", color: "color", size: "size", formInvalid: "formInvalid" }, host: { properties: { "class": "this.class", "class.formInvalid": "this.formInvalid" } }, ngImport: i0, template: "<button matRipple [type]=\"type\" [disabled]=\"isDisabled || busy\" [ngClass]=\"{busy: busy}\" [class]=\"class\">\r\n <mat-icon *ngIf=\"matIconPrefix\">{{matIconPrefix}}</mat-icon>\r\n {{label}}\r\n <mat-progress-bar *ngIf=\"busy\" mode=\"indeterminate\" [color]=\"color\"></mat-progress-bar>\r\n</button>\r\n", styles: [":host{display:flex;align-items:center}:host button{font-size:1em;width:100%;cursor:pointer;outline:none;position:relative;display:flex;align-items:center;justify-content:center;border:1px solid transparent;transition:all .15s ease-in-out}:host button mat-progress-bar{position:absolute;bottom:1px;height:2px;border-bottom-left-radius:10px;border-bottom-right-radius:10px}:host button mat-icon{margin-right:4px;height:16px;width:16px;font-size:16px}:host.small button mat-icon{width:14px;height:14px;font-size:14px;margin-right:2px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i4.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }] }); }
|
|
78
78
|
}
|
|
79
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
79
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
80
80
|
type: Component,
|
|
81
81
|
args: [{ selector: 'ui-button', template: "<button matRipple [type]=\"type\" [disabled]=\"isDisabled || busy\" [ngClass]=\"{busy: busy}\" [class]=\"class\">\r\n <mat-icon *ngIf=\"matIconPrefix\">{{matIconPrefix}}</mat-icon>\r\n {{label}}\r\n <mat-progress-bar *ngIf=\"busy\" mode=\"indeterminate\" [color]=\"color\"></mat-progress-bar>\r\n</button>\r\n", styles: [":host{display:flex;align-items:center}:host button{font-size:1em;width:100%;cursor:pointer;outline:none;position:relative;display:flex;align-items:center;justify-content:center;border:1px solid transparent;transition:all .15s ease-in-out}:host button mat-progress-bar{position:absolute;bottom:1px;height:2px;border-bottom-left-radius:10px;border-bottom-right-radius:10px}:host button mat-icon{margin-right:4px;height:16px;width:16px;font-size:16px}:host.small button mat-icon{width:14px;height:14px;font-size:14px;margin-right:2px}\n"] }]
|
|
82
|
-
}], ctorParameters:
|
|
82
|
+
}], ctorParameters: () => [], propDecorators: { type: [{
|
|
83
83
|
type: Input
|
|
84
84
|
}], matIconPrefix: [{
|
|
85
85
|
type: Input
|
|
@@ -151,16 +151,16 @@ class UiBaseComponent {
|
|
|
151
151
|
get isInvalid() {
|
|
152
152
|
return false;
|
|
153
153
|
}
|
|
154
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
155
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
154
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: UiBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
155
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: UiBaseComponent, selector: "ui-abstract-base-component", inputs: { placeholder: "placeholder", label: "label", useInputMessages: "useInputMessages", inputMessagesPosition: "inputMessagesPosition", hint: "hint", size: "size" }, host: { properties: { "class": "this.size" } }, ngImport: i0, template: '** abstract **', isInline: true }); }
|
|
156
156
|
}
|
|
157
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
157
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: UiBaseComponent, decorators: [{
|
|
158
158
|
type: Component,
|
|
159
159
|
args: [{
|
|
160
160
|
selector: 'ui-abstract-base-component',
|
|
161
161
|
template: '** abstract **'
|
|
162
162
|
}]
|
|
163
|
-
}], ctorParameters:
|
|
163
|
+
}], ctorParameters: () => [], propDecorators: { placeholder: [{
|
|
164
164
|
type: Input
|
|
165
165
|
}], label: [{
|
|
166
166
|
type: Input
|
|
@@ -320,16 +320,16 @@ class UiSimpleComponent extends UiBaseComponent {
|
|
|
320
320
|
inputLength() {
|
|
321
321
|
return this.componentFormControl.value ? this.componentFormControl.value.length : 0;
|
|
322
322
|
}
|
|
323
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
324
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
323
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: UiSimpleComponent, deps: [{ token: i1.NgControl }, { token: i1.ControlContainer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
324
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: UiSimpleComponent, selector: "ui-abstract-simple-component", inputs: { validators: "validators", formControl: "formControl", formControlName: "formControlName" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '** abstract **', isInline: true }); }
|
|
325
325
|
}
|
|
326
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
326
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: UiSimpleComponent, decorators: [{
|
|
327
327
|
type: Component,
|
|
328
328
|
args: [{
|
|
329
329
|
selector: 'ui-abstract-simple-component',
|
|
330
330
|
template: '** abstract **'
|
|
331
331
|
}]
|
|
332
|
-
}], ctorParameters:
|
|
332
|
+
}], ctorParameters: () => [{ type: i1.NgControl }, { type: i1.ControlContainer }], propDecorators: { validators: [{
|
|
333
333
|
type: Input
|
|
334
334
|
}], formControl: [{
|
|
335
335
|
type: Input
|
|
@@ -360,10 +360,10 @@ class UiTranslateService {
|
|
|
360
360
|
default: return code;
|
|
361
361
|
}
|
|
362
362
|
}
|
|
363
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
364
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
363
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: UiTranslateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
364
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: UiTranslateService }); }
|
|
365
365
|
}
|
|
366
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
366
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: UiTranslateService, decorators: [{
|
|
367
367
|
type: Injectable
|
|
368
368
|
}] });
|
|
369
369
|
|
|
@@ -398,16 +398,16 @@ class ValidationMessageComponent {
|
|
|
398
398
|
}
|
|
399
399
|
}
|
|
400
400
|
}
|
|
401
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
402
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
401
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ValidationMessageComponent, deps: [{ token: UI_TRANSLATESERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
402
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: ValidationMessageComponent, selector: "ui-validation-message", inputs: { validationErrors: "validationErrors" }, ngImport: i0, template: "{{ errorMessage }}\r\n" }); }
|
|
403
403
|
}
|
|
404
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
404
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ValidationMessageComponent, decorators: [{
|
|
405
405
|
type: Component,
|
|
406
406
|
args: [{ selector: 'ui-validation-message', template: "{{ errorMessage }}\r\n" }]
|
|
407
|
-
}], ctorParameters:
|
|
407
|
+
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
408
408
|
type: Inject,
|
|
409
409
|
args: [UI_TRANSLATESERVICE]
|
|
410
|
-
}] }]
|
|
410
|
+
}] }], propDecorators: { validationErrors: [{
|
|
411
411
|
type: Input
|
|
412
412
|
}] } });
|
|
413
413
|
|
|
@@ -415,10 +415,10 @@ class UiBaseLayoutComponent {
|
|
|
415
415
|
get class() {
|
|
416
416
|
return `${this.ctx.isInvalid ? 'invalid ' : ''} ${this.ctx.inputMessagesPosition}`;
|
|
417
417
|
}
|
|
418
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
419
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
418
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: UiBaseLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
419
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: UiBaseLayoutComponent, selector: "ui-base-layout", inputs: { ctx: "ctx" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<div class=\"label\" *ngIf=\"ctx.label\">\r\n <div class=\"text-container\" [matTooltip]=\"false && ctx.required ? 'Povinn\u00E1 polo\u017Eka' : undefined\" [matTooltipPosition]=\"'above'\">\r\n <div class=\"text\" >{{ctx.label}}</div>\r\n <div *ngIf=\"false && ctx.required\" class=\"required\">*</div>\r\n </div>\r\n <ng-content select=\".counter-top\"></ng-content>\r\n</div>\r\n\r\n<ng-content></ng-content>\r\n\r\n<div class=\"hint-container\" *ngIf=\"ctx.useInputMessages === 'always' || (ctx.useInputMessages === 'ondemand' && (ctx.isInvalid || ctx.hint))\">\r\n <ui-validation-message class=\"invalid\" *ngIf=\"ctx.isInvalid\" [validationErrors]=\"ctx.validationErrors\"></ui-validation-message>\r\n <div class=\"hint\" *ngIf=\"!ctx.isInvalid && ctx.hint\" [innerHTML]=\"ctx.hint\"></div>\r\n <ng-container *ngIf=\"!ctx.label\">\r\n <ng-content select=\".counter-bottom\"></ng-content>\r\n </ng-container>\r\n</div>\r\n", styles: [":host{width:100%;display:flex;flex-direction:column}:host .label{display:flex;align-items:center}:host .label .text-container{display:flex;align-items:center}:host .label .text-container .text{font-size:.9em;line-height:1em;padding:6px 0 4px}:host .label .text-container .required{align-self:baseline;padding:0 4px;font-size:1.2em}:host ::ng-deep .counter{margin-left:auto;padding-right:.4em}:host ::ng-deep .counter.counter-top{font-size:.8em}:host.absolute{position:relative}:host.absolute .hint-container{position:absolute;bottom:-1.2em;width:100vw}:host .hint-container{display:flex;height:1.2em;text-align:left;font-size:.8em;margin-top:.1em}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ValidationMessageComponent, selector: "ui-validation-message", inputs: ["validationErrors"] }] }); }
|
|
420
420
|
}
|
|
421
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
421
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: UiBaseLayoutComponent, decorators: [{
|
|
422
422
|
type: Component,
|
|
423
423
|
args: [{ selector: 'ui-base-layout', template: "<div class=\"label\" *ngIf=\"ctx.label\">\r\n <div class=\"text-container\" [matTooltip]=\"false && ctx.required ? 'Povinn\u00E1 polo\u017Eka' : undefined\" [matTooltipPosition]=\"'above'\">\r\n <div class=\"text\" >{{ctx.label}}</div>\r\n <div *ngIf=\"false && ctx.required\" class=\"required\">*</div>\r\n </div>\r\n <ng-content select=\".counter-top\"></ng-content>\r\n</div>\r\n\r\n<ng-content></ng-content>\r\n\r\n<div class=\"hint-container\" *ngIf=\"ctx.useInputMessages === 'always' || (ctx.useInputMessages === 'ondemand' && (ctx.isInvalid || ctx.hint))\">\r\n <ui-validation-message class=\"invalid\" *ngIf=\"ctx.isInvalid\" [validationErrors]=\"ctx.validationErrors\"></ui-validation-message>\r\n <div class=\"hint\" *ngIf=\"!ctx.isInvalid && ctx.hint\" [innerHTML]=\"ctx.hint\"></div>\r\n <ng-container *ngIf=\"!ctx.label\">\r\n <ng-content select=\".counter-bottom\"></ng-content>\r\n </ng-container>\r\n</div>\r\n", styles: [":host{width:100%;display:flex;flex-direction:column}:host .label{display:flex;align-items:center}:host .label .text-container{display:flex;align-items:center}:host .label .text-container .text{font-size:.9em;line-height:1em;padding:6px 0 4px}:host .label .text-container .required{align-self:baseline;padding:0 4px;font-size:1.2em}:host ::ng-deep .counter{margin-left:auto;padding-right:.4em}:host ::ng-deep .counter.counter-top{font-size:.8em}:host.absolute{position:relative}:host.absolute .hint-container{position:absolute;bottom:-1.2em;width:100vw}:host .hint-container{display:flex;height:1.2em;text-align:left;font-size:.8em;margin-top:.1em}\n"] }]
|
|
424
424
|
}], propDecorators: { ctx: [{
|
|
@@ -432,10 +432,10 @@ class UiSimpleLayoutComponent {
|
|
|
432
432
|
length() {
|
|
433
433
|
return this.ctx.inputLength();
|
|
434
434
|
}
|
|
435
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
436
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
435
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: UiSimpleLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
436
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: UiSimpleLayoutComponent, selector: "ui-simple-layout", inputs: { ctx: "ctx" }, ngImport: i0, template: "<ui-base-layout [ctx]=\"ctx\">\r\n\r\n <div *ngIf=\"ctx.validators?.maxLength\" class=\"counter counter-top\">\r\n {{ length() }} / {{ ctx.validators?.maxLength }}\r\n </div>\r\n\r\n <div *ngIf=\"ctx.validators?.maxLength\" class=\"counter counter-bottom\">\r\n {{ length() }} / {{ ctx.validators?.maxLength }}\r\n </div>\r\n\r\n <ng-content></ng-content>\r\n\r\n</ui-base-layout>\r\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: UiBaseLayoutComponent, selector: "ui-base-layout", inputs: ["ctx"] }] }); }
|
|
437
437
|
}
|
|
438
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
438
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: UiSimpleLayoutComponent, decorators: [{
|
|
439
439
|
type: Component,
|
|
440
440
|
args: [{ selector: 'ui-simple-layout', template: "<ui-base-layout [ctx]=\"ctx\">\r\n\r\n <div *ngIf=\"ctx.validators?.maxLength\" class=\"counter counter-top\">\r\n {{ length() }} / {{ ctx.validators?.maxLength }}\r\n </div>\r\n\r\n <div *ngIf=\"ctx.validators?.maxLength\" class=\"counter counter-bottom\">\r\n {{ length() }} / {{ ctx.validators?.maxLength }}\r\n </div>\r\n\r\n <ng-content></ng-content>\r\n\r\n</ui-base-layout>\r\n" }]
|
|
441
441
|
}], propDecorators: { ctx: [{
|
|
@@ -455,13 +455,13 @@ class ActionIconComponent {
|
|
|
455
455
|
}
|
|
456
456
|
ngOnInit() {
|
|
457
457
|
}
|
|
458
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
459
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
458
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ActionIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
459
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: ActionIconComponent, selector: "ui-action-icon", inputs: { size: "size", color: "color", disabled: "disabled", busy: "busy", matIcon: "matIcon" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<mat-icon>{{matIcon}}</mat-icon>\r\n", styles: [":host{display:flex}:host:not(.disabled){cursor:pointer}:host mat-icon{width:1em;height:1em;transition:color .25s}:host.small mat-icon{font-size:1em}:host.smaller mat-icon{font-size:1.25em}:host.normal mat-icon{font-size:1.5em}:host.larger mat-icon{font-size:1.75em}:host.large mat-icon{font-size:2em}\n"], dependencies: [{ kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
460
460
|
}
|
|
461
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
461
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ActionIconComponent, decorators: [{
|
|
462
462
|
type: Component,
|
|
463
463
|
args: [{ selector: 'ui-action-icon', template: "<mat-icon>{{matIcon}}</mat-icon>\r\n", styles: [":host{display:flex}:host:not(.disabled){cursor:pointer}:host mat-icon{width:1em;height:1em;transition:color .25s}:host.small mat-icon{font-size:1em}:host.smaller mat-icon{font-size:1.25em}:host.normal mat-icon{font-size:1.5em}:host.larger mat-icon{font-size:1.75em}:host.large mat-icon{font-size:2em}\n"] }]
|
|
464
|
-
}], ctorParameters:
|
|
464
|
+
}], ctorParameters: () => [], propDecorators: { size: [{
|
|
465
465
|
type: Input
|
|
466
466
|
}], color: [{
|
|
467
467
|
type: Input
|
|
@@ -663,8 +663,8 @@ class InputComponent extends UiSimpleComponent {
|
|
|
663
663
|
// console.log(this.componentFormControl.errors, control.errors, this.parentFormControl.errors, this);
|
|
664
664
|
// return this.componentFormControl.errors;
|
|
665
665
|
}
|
|
666
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
667
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
666
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: InputComponent, deps: [{ token: i1.ControlContainer, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
667
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: InputComponent, selector: "ui-input", inputs: { prefixIcon: "prefixIcon", suffixIcon: "suffixIcon", type: "type", clearButton: "clearButton", activeIcons: "activeIcons", forceHasPrefix: "forceHasPrefix", forceHasSuffix: "forceHasSuffix", textAlign: "textAlign" }, outputs: { focusChanged: "focusChanged", keyPressed: "keyPressed" }, host: { properties: { "class": "this.textAlignClass" } }, providers: [
|
|
668
668
|
{
|
|
669
669
|
provide: NG_VALUE_ACCESSOR,
|
|
670
670
|
multi: true,
|
|
@@ -675,9 +675,9 @@ class InputComponent extends UiSimpleComponent {
|
|
|
675
675
|
multi: true,
|
|
676
676
|
useExisting: InputComponent
|
|
677
677
|
}
|
|
678
|
-
], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "prefix", first: true, predicate: ["prefix"], descendants: true, static: true }, { propertyName: "suffix", first: true, predicate: ["suffix"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<div class=\"control-container\" [ngClass]=\"{'has-suffix': hasSuffix, 'has-prefix': hasPrefix, 'has-clear-icon': showClearButton, 'active-icons': activeIcons, 'has-focus': hasFocus}\">\r\n <input #input [type]=\"type\" [formControl]=\"componentFormControl\" [placeholder]=\"placeholder\" (keydown)=\"onKeypressed($event)\" (focus)=\"onFocus(true)\" (blur)=\"onFocus(false)\" />\r\n <div #prefix><ng-content select=\"[slot=prefix]\"></ng-content></div>\r\n <div #suffix><ng-content select=\"[slot=suffix]\"></ng-content></div>\r\n <mat-icon *ngIf=\"prefixIcon\" class=\"prefix-icon\" [matTooltip]=\"prefixIcon.tooltip\">{{ prefixIcon.icon }}</mat-icon>\r\n <mat-icon *ngIf=\"suffixIcon\" class=\"suffix-icon\" [matTooltip]=\"suffixIcon.tooltip\">{{ suffixIcon.icon }}</mat-icon>\r\n <ui-action-icon [size]=\"'small'\" [color]=\"'warn'\" *ngIf=\"showClearButton\" (click)=\"clearValue()\" [matIcon]=\"'clear'\" class=\"clear-icon\"></ui-action-icon>\r\n</div>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host .control-container{width:100%;position:relative}:host .control-container.has-prefix ::ng-deep input,:host .control-container.has-prefix ::ng-deep textarea,:host .control-container.has-prefix ::ng-deep .mat-mdc-select-trigger{padding-left:1.8em}:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep input,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep textarea,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep input,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep textarea,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-suffix.has-clear-icon ::ng-deep input,:host .control-container.has-suffix.has-clear-icon ::ng-deep textarea,:host .control-container.has-suffix.has-clear-icon ::ng-deep .mat-mdc-select-trigger{padding-right:3.6em}:host .control-container.has-suffix.has-clear-icon ::ng-deep .clear-icon{right:1.4em!important}:host ::ng-deep [slot=suffix],:host ::ng-deep .clear-icon,:host ::ng-deep .suffix-icon{position:absolute;user-select:none;transition:color .25s;top:calc(50% - .5em);right:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=suffix]:not(.disabled),:host ::ng-deep .clear-icon:not(.disabled),:host ::ng-deep .suffix-icon:not(.disabled){cursor:pointer}:host ::ng-deep [slot=prefix],:host ::ng-deep .prefix-icon{position:absolute;user-select:none;transition:color .25s;top:calc(50% - .5em);left:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=prefix]:not(.disabled),:host ::ng-deep .prefix-icon:not(.disabled){cursor:pointer}:host ::ng-deep input,:host ::ng-deep textarea,:host ::ng-deep .mat-mdc-select-trigger,:host ::ng-deep .editor-wrapper{resize:none;width:100%;line-height:1.2em;font-size:1em;outline:none;border-style:solid;transition:border-color 333ms}:host ::ng-deep textarea.autoresize{box-sizing:content-box;width:calc(100% - 1.4em)}:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{height:100%}:host ::ng-deep ::ng-deep .mat-select-value,:host ::ng-deep ::ng-deep .mat-mdc-select-value{vertical-align:middle}::ng-deep ui-input{display:block}\n", ":host.text-align-left ::ng-deep input{text-align:left}:host.text-align-right ::ng-deep input{text-align:right}:host.text-align-center ::ng-deep input{text-align:center}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: UiSimpleLayoutComponent, selector: "ui-simple-layout", inputs: ["ctx"] }, { kind: "component", type: ActionIconComponent, selector: "ui-action-icon", inputs: ["size", "color", "disabled", "busy", "matIcon"] }] }); }
|
|
678
|
+
], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "prefix", first: true, predicate: ["prefix"], descendants: true, static: true }, { propertyName: "suffix", first: true, predicate: ["suffix"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<div class=\"control-container\" [ngClass]=\"{'has-suffix': hasSuffix, 'has-prefix': hasPrefix, 'has-clear-icon': showClearButton, 'active-icons': activeIcons, 'has-focus': hasFocus}\">\r\n <input #input [type]=\"type\" [formControl]=\"componentFormControl\" [placeholder]=\"placeholder\" (keydown)=\"onKeypressed($event)\" (focus)=\"onFocus(true)\" (blur)=\"onFocus(false)\" />\r\n <div #prefix><ng-content select=\"[slot=prefix]\"></ng-content></div>\r\n <div #suffix><ng-content select=\"[slot=suffix]\"></ng-content></div>\r\n <mat-icon *ngIf=\"prefixIcon\" class=\"prefix-icon\" [matTooltip]=\"prefixIcon.tooltip\">{{ prefixIcon.icon }}</mat-icon>\r\n <mat-icon *ngIf=\"suffixIcon\" class=\"suffix-icon\" [matTooltip]=\"suffixIcon.tooltip\">{{ suffixIcon.icon }}</mat-icon>\r\n <ui-action-icon [size]=\"'small'\" [color]=\"'warn'\" *ngIf=\"showClearButton\" (click)=\"clearValue()\" [matIcon]=\"'clear'\" class=\"clear-icon\"></ui-action-icon>\r\n</div>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host .control-container{width:100%;position:relative}:host .control-container.has-prefix ::ng-deep input,:host .control-container.has-prefix ::ng-deep textarea,:host .control-container.has-prefix ::ng-deep .mat-mdc-select-trigger{padding-left:1.8em}:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep input,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep textarea,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep input,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep textarea,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-suffix.has-clear-icon ::ng-deep input,:host .control-container.has-suffix.has-clear-icon ::ng-deep textarea,:host .control-container.has-suffix.has-clear-icon ::ng-deep .mat-mdc-select-trigger{padding-right:3.6em}:host .control-container.has-suffix.has-clear-icon ::ng-deep .clear-icon{right:1.4em!important}:host ::ng-deep [slot=suffix],:host ::ng-deep .clear-icon,:host ::ng-deep .suffix-icon{position:absolute;-webkit-user-select:none;user-select:none;transition:color .25s;top:calc(50% - .5em);right:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=suffix]:not(.disabled),:host ::ng-deep .clear-icon:not(.disabled),:host ::ng-deep .suffix-icon:not(.disabled){cursor:pointer}:host ::ng-deep [slot=prefix],:host ::ng-deep .prefix-icon{position:absolute;-webkit-user-select:none;user-select:none;transition:color .25s;top:calc(50% - .5em);left:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=prefix]:not(.disabled),:host ::ng-deep .prefix-icon:not(.disabled){cursor:pointer}:host ::ng-deep input,:host ::ng-deep textarea,:host ::ng-deep .mat-mdc-select-trigger,:host ::ng-deep .editor-wrapper{resize:none;width:100%;line-height:1.2em;font-size:1em;outline:none;border-style:solid;transition:border-color 333ms}:host ::ng-deep textarea.autoresize{box-sizing:content-box;width:calc(100% - 1.4em)}:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{height:100%}:host ::ng-deep ::ng-deep .mat-select-value,:host ::ng-deep ::ng-deep .mat-mdc-select-value{vertical-align:middle}::ng-deep ui-input{display:block}\n", ":host.text-align-left ::ng-deep input{text-align:left}:host.text-align-right ::ng-deep input{text-align:right}:host.text-align-center ::ng-deep input{text-align:center}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: UiSimpleLayoutComponent, selector: "ui-simple-layout", inputs: ["ctx"] }, { kind: "component", type: ActionIconComponent, selector: "ui-action-icon", inputs: ["size", "color", "disabled", "busy", "matIcon"] }] }); }
|
|
679
679
|
}
|
|
680
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
680
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: InputComponent, decorators: [{
|
|
681
681
|
type: Component,
|
|
682
682
|
args: [{ selector: 'ui-input', providers: [
|
|
683
683
|
{
|
|
@@ -690,14 +690,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImpo
|
|
|
690
690
|
multi: true,
|
|
691
691
|
useExisting: InputComponent
|
|
692
692
|
}
|
|
693
|
-
], template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<div class=\"control-container\" [ngClass]=\"{'has-suffix': hasSuffix, 'has-prefix': hasPrefix, 'has-clear-icon': showClearButton, 'active-icons': activeIcons, 'has-focus': hasFocus}\">\r\n <input #input [type]=\"type\" [formControl]=\"componentFormControl\" [placeholder]=\"placeholder\" (keydown)=\"onKeypressed($event)\" (focus)=\"onFocus(true)\" (blur)=\"onFocus(false)\" />\r\n <div #prefix><ng-content select=\"[slot=prefix]\"></ng-content></div>\r\n <div #suffix><ng-content select=\"[slot=suffix]\"></ng-content></div>\r\n <mat-icon *ngIf=\"prefixIcon\" class=\"prefix-icon\" [matTooltip]=\"prefixIcon.tooltip\">{{ prefixIcon.icon }}</mat-icon>\r\n <mat-icon *ngIf=\"suffixIcon\" class=\"suffix-icon\" [matTooltip]=\"suffixIcon.tooltip\">{{ suffixIcon.icon }}</mat-icon>\r\n <ui-action-icon [size]=\"'small'\" [color]=\"'warn'\" *ngIf=\"showClearButton\" (click)=\"clearValue()\" [matIcon]=\"'clear'\" class=\"clear-icon\"></ui-action-icon>\r\n</div>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host .control-container{width:100%;position:relative}:host .control-container.has-prefix ::ng-deep input,:host .control-container.has-prefix ::ng-deep textarea,:host .control-container.has-prefix ::ng-deep .mat-mdc-select-trigger{padding-left:1.8em}:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep input,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep textarea,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep input,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep textarea,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-suffix.has-clear-icon ::ng-deep input,:host .control-container.has-suffix.has-clear-icon ::ng-deep textarea,:host .control-container.has-suffix.has-clear-icon ::ng-deep .mat-mdc-select-trigger{padding-right:3.6em}:host .control-container.has-suffix.has-clear-icon ::ng-deep .clear-icon{right:1.4em!important}:host ::ng-deep [slot=suffix],:host ::ng-deep .clear-icon,:host ::ng-deep .suffix-icon{position:absolute;user-select:none;transition:color .25s;top:calc(50% - .5em);right:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=suffix]:not(.disabled),:host ::ng-deep .clear-icon:not(.disabled),:host ::ng-deep .suffix-icon:not(.disabled){cursor:pointer}:host ::ng-deep [slot=prefix],:host ::ng-deep .prefix-icon{position:absolute;user-select:none;transition:color .25s;top:calc(50% - .5em);left:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=prefix]:not(.disabled),:host ::ng-deep .prefix-icon:not(.disabled){cursor:pointer}:host ::ng-deep input,:host ::ng-deep textarea,:host ::ng-deep .mat-mdc-select-trigger,:host ::ng-deep .editor-wrapper{resize:none;width:100%;line-height:1.2em;font-size:1em;outline:none;border-style:solid;transition:border-color 333ms}:host ::ng-deep textarea.autoresize{box-sizing:content-box;width:calc(100% - 1.4em)}:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{height:100%}:host ::ng-deep ::ng-deep .mat-select-value,:host ::ng-deep ::ng-deep .mat-mdc-select-value{vertical-align:middle}::ng-deep ui-input{display:block}\n", ":host.text-align-left ::ng-deep input{text-align:left}:host.text-align-right ::ng-deep input{text-align:right}:host.text-align-center ::ng-deep input{text-align:center}\n"] }]
|
|
694
|
-
}], ctorParameters:
|
|
693
|
+
], template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<div class=\"control-container\" [ngClass]=\"{'has-suffix': hasSuffix, 'has-prefix': hasPrefix, 'has-clear-icon': showClearButton, 'active-icons': activeIcons, 'has-focus': hasFocus}\">\r\n <input #input [type]=\"type\" [formControl]=\"componentFormControl\" [placeholder]=\"placeholder\" (keydown)=\"onKeypressed($event)\" (focus)=\"onFocus(true)\" (blur)=\"onFocus(false)\" />\r\n <div #prefix><ng-content select=\"[slot=prefix]\"></ng-content></div>\r\n <div #suffix><ng-content select=\"[slot=suffix]\"></ng-content></div>\r\n <mat-icon *ngIf=\"prefixIcon\" class=\"prefix-icon\" [matTooltip]=\"prefixIcon.tooltip\">{{ prefixIcon.icon }}</mat-icon>\r\n <mat-icon *ngIf=\"suffixIcon\" class=\"suffix-icon\" [matTooltip]=\"suffixIcon.tooltip\">{{ suffixIcon.icon }}</mat-icon>\r\n <ui-action-icon [size]=\"'small'\" [color]=\"'warn'\" *ngIf=\"showClearButton\" (click)=\"clearValue()\" [matIcon]=\"'clear'\" class=\"clear-icon\"></ui-action-icon>\r\n</div>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host .control-container{width:100%;position:relative}:host .control-container.has-prefix ::ng-deep input,:host .control-container.has-prefix ::ng-deep textarea,:host .control-container.has-prefix ::ng-deep .mat-mdc-select-trigger{padding-left:1.8em}:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep input,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep textarea,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep input,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep textarea,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-suffix.has-clear-icon ::ng-deep input,:host .control-container.has-suffix.has-clear-icon ::ng-deep textarea,:host .control-container.has-suffix.has-clear-icon ::ng-deep .mat-mdc-select-trigger{padding-right:3.6em}:host .control-container.has-suffix.has-clear-icon ::ng-deep .clear-icon{right:1.4em!important}:host ::ng-deep [slot=suffix],:host ::ng-deep .clear-icon,:host ::ng-deep .suffix-icon{position:absolute;-webkit-user-select:none;user-select:none;transition:color .25s;top:calc(50% - .5em);right:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=suffix]:not(.disabled),:host ::ng-deep .clear-icon:not(.disabled),:host ::ng-deep .suffix-icon:not(.disabled){cursor:pointer}:host ::ng-deep [slot=prefix],:host ::ng-deep .prefix-icon{position:absolute;-webkit-user-select:none;user-select:none;transition:color .25s;top:calc(50% - .5em);left:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=prefix]:not(.disabled),:host ::ng-deep .prefix-icon:not(.disabled){cursor:pointer}:host ::ng-deep input,:host ::ng-deep textarea,:host ::ng-deep .mat-mdc-select-trigger,:host ::ng-deep .editor-wrapper{resize:none;width:100%;line-height:1.2em;font-size:1em;outline:none;border-style:solid;transition:border-color 333ms}:host ::ng-deep textarea.autoresize{box-sizing:content-box;width:calc(100% - 1.4em)}:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{height:100%}:host ::ng-deep ::ng-deep .mat-select-value,:host ::ng-deep ::ng-deep .mat-mdc-select-value{vertical-align:middle}::ng-deep ui-input{display:block}\n", ":host.text-align-left ::ng-deep input{text-align:left}:host.text-align-right ::ng-deep input{text-align:right}:host.text-align-center ::ng-deep input{text-align:center}\n"] }]
|
|
694
|
+
}], ctorParameters: () => [{ type: i1.ControlContainer, decorators: [{
|
|
695
695
|
type: Optional
|
|
696
696
|
}, {
|
|
697
697
|
type: Host
|
|
698
698
|
}, {
|
|
699
699
|
type: SkipSelf
|
|
700
|
-
}] }]
|
|
700
|
+
}] }], propDecorators: { prefixIcon: [{
|
|
701
701
|
type: Input
|
|
702
702
|
}], suffixIcon: [{
|
|
703
703
|
type: Input
|
|
@@ -758,17 +758,28 @@ class SelectComponent extends UiSimpleComponent {
|
|
|
758
758
|
this.lastCount = v.length;
|
|
759
759
|
});
|
|
760
760
|
}
|
|
761
|
-
if (this.trackBy && this.componentFormControl) {
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
761
|
+
if (this.trackBy && this.componentFormControl && this.componentFormControl.value) {
|
|
762
|
+
this.componentFormControl.setValue(this.mapValues(this.componentFormControl.value), { emitEvent: false });
|
|
763
|
+
}
|
|
764
|
+
}
|
|
765
|
+
ngOnChanges(changes) {
|
|
766
|
+
super.ngOnChanges(changes);
|
|
767
|
+
if (changes.options && this.componentFormControl && this.trackBy) {
|
|
768
|
+
this.componentFormControl.setValue(this.mapValues(this.componentFormControl.value), { emitEvent: false });
|
|
769
|
+
}
|
|
770
|
+
}
|
|
771
|
+
mapValues(src) {
|
|
772
|
+
if (src && this.trackBy && this.options) {
|
|
773
|
+
if (this.multiple) {
|
|
774
|
+
return this.options.filter(o => src.find(v => v[this.trackBy] === o[this.trackBy]));
|
|
775
|
+
}
|
|
776
|
+
else {
|
|
777
|
+
return this.options.find(o => o[this.trackBy] === src[this.trackBy]);
|
|
770
778
|
}
|
|
771
779
|
}
|
|
780
|
+
else {
|
|
781
|
+
return src;
|
|
782
|
+
}
|
|
772
783
|
}
|
|
773
784
|
selectOption(o, select) {
|
|
774
785
|
select.selectionChange.emit(this.optionToValue(o));
|
|
@@ -789,24 +800,24 @@ class SelectComponent extends UiSimpleComponent {
|
|
|
789
800
|
this.componentFormControl.setErrors(obj.error === 'clear' ? null : { custom: obj.error }, { emitEvent: false });
|
|
790
801
|
}
|
|
791
802
|
else {
|
|
792
|
-
this.componentFormControl.setValue(obj);
|
|
803
|
+
this.componentFormControl.setValue(this.mapValues(obj));
|
|
793
804
|
}
|
|
794
805
|
}
|
|
795
806
|
}
|
|
796
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
797
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
807
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SelectComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: UI_TRANSLATESERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
808
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SelectComponent, selector: "ui-select", inputs: { multiple: "multiple", triggerFormatter: "triggerFormatter", valueAttribute: "valueAttribute", resetText: "resetText", displayAttribute: "displayAttribute", options: "options", optionFormatter: "optionFormatter", optionTemplateRef: "optionTemplateRef", triggerTemplateRef: "triggerTemplateRef", panelClass: "panelClass", allowEmptySelection: "allowEmptySelection", trackBy: "trackBy" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<mat-select class=\"control-container\" #select [panelClass]=\"panelClass\" [placeholder]=\"placeholder\" [formControl]=\"componentFormControl\" [multiple]=\"multiple\">\r\n\r\n <mat-select-trigger *ngIf=\"triggerTemplateRef\">\r\n <ng-template [ngTemplateOutlet]=\"triggerTemplateRef\" [ngTemplateOutletContext]=\"{option:componentFormControl?.value}\" ></ng-template>\r\n </mat-select-trigger>\r\n\r\n <mat-select-trigger *ngIf=\"triggerFormatter\" [innerHTML]=\"componentFormControl?.value ? triggerFormatter(componentFormControl?.value) : ''\"></mat-select-trigger>\r\n\r\n <mat-option *ngIf=\"resetText\">{{resetText}}</mat-option>\r\n\r\n <mat-option *ngFor=\"let o of options\" [value]=\"optionToValue(o)\" >\r\n\r\n <div class=\"option-container\" (mouseenter)=\"overoption = true;\" (mouseleave)=\"overoption = false\">\r\n\r\n <ng-container *ngIf=\"optionTemplateRef\">\r\n <ng-template [ngTemplateOutlet]=\"optionTemplateRef\" [ngTemplateOutletContext]=\"{option:o}\" ></ng-template>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!optionTemplateRef\">\r\n {{optionFormatter(o)}}\r\n </ng-container>\r\n\r\n <mat-icon class=\"select-one\" *ngIf=\"multiple && componentFormControl?.value?.length === 0\" (click)=\"selectOption(o, select)\">north_west</mat-icon>\r\n </div>\r\n\r\n </mat-option>\r\n\r\n <div class=\"buttons\" *ngIf=\"multiple\">\r\n <ui-button style=\"margin-right: auto;\" [kind]=\"'basic'\" [size]=\"'smaller'\" [label]=\"translateService.instant('ui.controls.ui-select.clear-selection')\" (click)=\"clearAll()\"></ui-button>\r\n <ui-button [size]=\"'smaller'\" [label]=\"translateService.instant('ui.controls.ui-select.all')\" (click)=\"selectAll()\"></ui-button>\r\n <ui-button [size]=\"'smaller'\" style=\"padding-left: 0.2em;\" [disabled]=\"componentFormControl?.value?.length === 0 && !allowEmptySelection\" [label]=\"translateService.instant('ui.controls.ui-select.apply-selection') + (componentFormControl?.value?.length > 0 ? ' (' + componentFormControl.value.length + ')' : '')\" (click)=\"select.close()\"></ui-button>\r\n </div>\r\n\r\n</mat-select>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host .control-container{width:100%;position:relative}:host .control-container.has-prefix ::ng-deep input,:host .control-container.has-prefix ::ng-deep textarea,:host .control-container.has-prefix ::ng-deep .mat-mdc-select-trigger{padding-left:1.8em}:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep input,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep textarea,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep input,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep textarea,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-suffix.has-clear-icon ::ng-deep input,:host .control-container.has-suffix.has-clear-icon ::ng-deep textarea,:host .control-container.has-suffix.has-clear-icon ::ng-deep .mat-mdc-select-trigger{padding-right:3.6em}:host .control-container.has-suffix.has-clear-icon ::ng-deep .clear-icon{right:1.4em!important}:host ::ng-deep [slot=suffix],:host ::ng-deep .clear-icon,:host ::ng-deep .suffix-icon{position:absolute;-webkit-user-select:none;user-select:none;transition:color .25s;top:calc(50% - .5em);right:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=suffix]:not(.disabled),:host ::ng-deep .clear-icon:not(.disabled),:host ::ng-deep .suffix-icon:not(.disabled){cursor:pointer}:host ::ng-deep [slot=prefix],:host ::ng-deep .prefix-icon{position:absolute;-webkit-user-select:none;user-select:none;transition:color .25s;top:calc(50% - .5em);left:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=prefix]:not(.disabled),:host ::ng-deep .prefix-icon:not(.disabled){cursor:pointer}:host ::ng-deep input,:host ::ng-deep textarea,:host ::ng-deep .mat-mdc-select-trigger,:host ::ng-deep .editor-wrapper{resize:none;width:100%;line-height:1.2em;font-size:1em;outline:none;border-style:solid;transition:border-color 333ms}:host ::ng-deep textarea.autoresize{box-sizing:content-box;width:calc(100% - 1.4em)}:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{height:100%}:host ::ng-deep ::ng-deep .mat-select-value,:host ::ng-deep ::ng-deep .mat-mdc-select-value{vertical-align:middle}::ng-deep ui-input{display:block}\n", "::ng-deep .mat-mdc-select-panel{padding:0!important}::ng-deep .mat-mdc-select-arrow-wrapper{height:1px!important}::ng-deep .mat-select-panel .select-one,::ng-deep .mat-mdc-select-panel .select-one{position:absolute;right:0;top:.3em;display:none}::ng-deep .mat-select-panel .mat-option-text:hover .select-one,::ng-deep .mat-select-panel .mat-mdc-option:hover .select-one,::ng-deep .mat-mdc-select-panel .mat-option-text:hover .select-one,::ng-deep .mat-mdc-select-panel .mat-mdc-option:hover .select-one{display:block}::ng-deep .mat-select-panel .buttons,::ng-deep .mat-mdc-select-panel .buttons{padding:.2em;background-color:#fff;display:flex;position:sticky;bottom:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["type", "matIconPrefix", "label", "disabled", "busy", "kind", "color", "size", "formInvalid"] }, { kind: "component", type: UiSimpleLayoutComponent, selector: "ui-simple-layout", inputs: ["ctx"] }] }); }
|
|
798
809
|
}
|
|
799
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
810
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SelectComponent, decorators: [{
|
|
800
811
|
type: Component,
|
|
801
|
-
args: [{ selector: 'ui-select', template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<mat-select class=\"control-container\" #select [panelClass]=\"panelClass\" [placeholder]=\"placeholder\" [formControl]=\"componentFormControl\" [multiple]=\"multiple\">\r\n\r\n <mat-select-trigger *ngIf=\"triggerTemplateRef\">\r\n <ng-template [ngTemplateOutlet]=\"triggerTemplateRef\" [ngTemplateOutletContext]=\"{option:componentFormControl?.value}\" ></ng-template>\r\n </mat-select-trigger>\r\n\r\n <mat-select-trigger *ngIf=\"triggerFormatter\"
|
|
802
|
-
}], ctorParameters:
|
|
812
|
+
args: [{ selector: 'ui-select', template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<mat-select class=\"control-container\" #select [panelClass]=\"panelClass\" [placeholder]=\"placeholder\" [formControl]=\"componentFormControl\" [multiple]=\"multiple\">\r\n\r\n <mat-select-trigger *ngIf=\"triggerTemplateRef\">\r\n <ng-template [ngTemplateOutlet]=\"triggerTemplateRef\" [ngTemplateOutletContext]=\"{option:componentFormControl?.value}\" ></ng-template>\r\n </mat-select-trigger>\r\n\r\n <mat-select-trigger *ngIf=\"triggerFormatter\" [innerHTML]=\"componentFormControl?.value ? triggerFormatter(componentFormControl?.value) : ''\"></mat-select-trigger>\r\n\r\n <mat-option *ngIf=\"resetText\">{{resetText}}</mat-option>\r\n\r\n <mat-option *ngFor=\"let o of options\" [value]=\"optionToValue(o)\" >\r\n\r\n <div class=\"option-container\" (mouseenter)=\"overoption = true;\" (mouseleave)=\"overoption = false\">\r\n\r\n <ng-container *ngIf=\"optionTemplateRef\">\r\n <ng-template [ngTemplateOutlet]=\"optionTemplateRef\" [ngTemplateOutletContext]=\"{option:o}\" ></ng-template>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!optionTemplateRef\">\r\n {{optionFormatter(o)}}\r\n </ng-container>\r\n\r\n <mat-icon class=\"select-one\" *ngIf=\"multiple && componentFormControl?.value?.length === 0\" (click)=\"selectOption(o, select)\">north_west</mat-icon>\r\n </div>\r\n\r\n </mat-option>\r\n\r\n <div class=\"buttons\" *ngIf=\"multiple\">\r\n <ui-button style=\"margin-right: auto;\" [kind]=\"'basic'\" [size]=\"'smaller'\" [label]=\"translateService.instant('ui.controls.ui-select.clear-selection')\" (click)=\"clearAll()\"></ui-button>\r\n <ui-button [size]=\"'smaller'\" [label]=\"translateService.instant('ui.controls.ui-select.all')\" (click)=\"selectAll()\"></ui-button>\r\n <ui-button [size]=\"'smaller'\" style=\"padding-left: 0.2em;\" [disabled]=\"componentFormControl?.value?.length === 0 && !allowEmptySelection\" [label]=\"translateService.instant('ui.controls.ui-select.apply-selection') + (componentFormControl?.value?.length > 0 ? ' (' + componentFormControl.value.length + ')' : '')\" (click)=\"select.close()\"></ui-button>\r\n </div>\r\n\r\n</mat-select>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host .control-container{width:100%;position:relative}:host .control-container.has-prefix ::ng-deep input,:host .control-container.has-prefix ::ng-deep textarea,:host .control-container.has-prefix ::ng-deep .mat-mdc-select-trigger{padding-left:1.8em}:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep input,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep textarea,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep input,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep textarea,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-suffix.has-clear-icon ::ng-deep input,:host .control-container.has-suffix.has-clear-icon ::ng-deep textarea,:host .control-container.has-suffix.has-clear-icon ::ng-deep .mat-mdc-select-trigger{padding-right:3.6em}:host .control-container.has-suffix.has-clear-icon ::ng-deep .clear-icon{right:1.4em!important}:host ::ng-deep [slot=suffix],:host ::ng-deep .clear-icon,:host ::ng-deep .suffix-icon{position:absolute;-webkit-user-select:none;user-select:none;transition:color .25s;top:calc(50% - .5em);right:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=suffix]:not(.disabled),:host ::ng-deep .clear-icon:not(.disabled),:host ::ng-deep .suffix-icon:not(.disabled){cursor:pointer}:host ::ng-deep [slot=prefix],:host ::ng-deep .prefix-icon{position:absolute;-webkit-user-select:none;user-select:none;transition:color .25s;top:calc(50% - .5em);left:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=prefix]:not(.disabled),:host ::ng-deep .prefix-icon:not(.disabled){cursor:pointer}:host ::ng-deep input,:host ::ng-deep textarea,:host ::ng-deep .mat-mdc-select-trigger,:host ::ng-deep .editor-wrapper{resize:none;width:100%;line-height:1.2em;font-size:1em;outline:none;border-style:solid;transition:border-color 333ms}:host ::ng-deep textarea.autoresize{box-sizing:content-box;width:calc(100% - 1.4em)}:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{height:100%}:host ::ng-deep ::ng-deep .mat-select-value,:host ::ng-deep ::ng-deep .mat-mdc-select-value{vertical-align:middle}::ng-deep ui-input{display:block}\n", "::ng-deep .mat-mdc-select-panel{padding:0!important}::ng-deep .mat-mdc-select-arrow-wrapper{height:1px!important}::ng-deep .mat-select-panel .select-one,::ng-deep .mat-mdc-select-panel .select-one{position:absolute;right:0;top:.3em;display:none}::ng-deep .mat-select-panel .mat-option-text:hover .select-one,::ng-deep .mat-select-panel .mat-mdc-option:hover .select-one,::ng-deep .mat-mdc-select-panel .mat-option-text:hover .select-one,::ng-deep .mat-mdc-select-panel .mat-mdc-option:hover .select-one{display:block}::ng-deep .mat-select-panel .buttons,::ng-deep .mat-mdc-select-panel .buttons{padding:.2em;background-color:#fff;display:flex;position:sticky;bottom:0}\n"] }]
|
|
813
|
+
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
803
814
|
type: Optional
|
|
804
815
|
}, {
|
|
805
816
|
type: Self
|
|
806
817
|
}] }, { type: undefined, decorators: [{
|
|
807
818
|
type: Inject,
|
|
808
819
|
args: [UI_TRANSLATESERVICE]
|
|
809
|
-
}] }]
|
|
820
|
+
}] }], propDecorators: { multiple: [{
|
|
810
821
|
type: Input
|
|
811
822
|
}], triggerFormatter: [{
|
|
812
823
|
type: Input
|
|
@@ -891,17 +902,17 @@ class UiFileService {
|
|
|
891
902
|
});
|
|
892
903
|
});
|
|
893
904
|
}
|
|
894
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
895
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
905
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: UiFileService, deps: [{ token: UI_FILESERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
906
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: UiFileService }); }
|
|
896
907
|
}
|
|
897
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
908
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: UiFileService, decorators: [{
|
|
898
909
|
type: Injectable
|
|
899
|
-
}], ctorParameters:
|
|
910
|
+
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
900
911
|
type: Optional
|
|
901
912
|
}, {
|
|
902
913
|
type: Inject,
|
|
903
914
|
args: [UI_FILESERVICE]
|
|
904
|
-
}] }]
|
|
915
|
+
}] }] });
|
|
905
916
|
|
|
906
917
|
class FileComponent {
|
|
907
918
|
get fitImageFileSize() {
|
|
@@ -1008,18 +1019,18 @@ class FileComponent {
|
|
|
1008
1019
|
}
|
|
1009
1020
|
}
|
|
1010
1021
|
}
|
|
1011
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1012
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1022
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: FileComponent, deps: [{ token: UI_FILESERVICE, optional: true }, { token: i1$1.DomSanitizer }, { token: UiFileService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1023
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: FileComponent, selector: "ui-file", inputs: { fileSize: "fileSize", srcOptions: "srcOptions", srcData: "srcData", srcUrl: "srcUrl" }, host: { properties: { "style.width": "this.width", "style.maxWidth": "this.maxWidth", "style.height": "this.height", "style.maxHeight": "this.maxHeight" } }, usesOnChanges: true, ngImport: i0, template: "<mat-spinner *ngIf=\"visible\"></mat-spinner>\r\n<img *ngIf=\"!isVideo && useRetinaSrc\" [src]=\"src\" [srcset]=\"src + ' 2x'\"/>\r\n<img *ngIf=\"!isVideo && !useRetinaSrc\" [src]=\"src\"/>\r\n<video *ngIf=\"isVideo\" muted controls [src]=\"src\"></video>\r\n\r\n", styles: [":host{display:flex;align-items:center;justify-content:center;position:relative}:host img,:host video{max-width:100%;max-height:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
1013
1024
|
}
|
|
1014
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1025
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: FileComponent, decorators: [{
|
|
1015
1026
|
type: Component,
|
|
1016
1027
|
args: [{ selector: 'ui-file', template: "<mat-spinner *ngIf=\"visible\"></mat-spinner>\r\n<img *ngIf=\"!isVideo && useRetinaSrc\" [src]=\"src\" [srcset]=\"src + ' 2x'\"/>\r\n<img *ngIf=\"!isVideo && !useRetinaSrc\" [src]=\"src\"/>\r\n<video *ngIf=\"isVideo\" muted controls [src]=\"src\"></video>\r\n\r\n", styles: [":host{display:flex;align-items:center;justify-content:center;position:relative}:host img,:host video{max-width:100%;max-height:100%}\n"] }]
|
|
1017
|
-
}], ctorParameters:
|
|
1028
|
+
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
1018
1029
|
type: Optional
|
|
1019
1030
|
}, {
|
|
1020
1031
|
type: Inject,
|
|
1021
1032
|
args: [UI_FILESERVICE]
|
|
1022
|
-
}] }, { type: i1$1.DomSanitizer }, { type: UiFileService }]
|
|
1033
|
+
}] }, { type: i1$1.DomSanitizer }, { type: UiFileService }], propDecorators: { fileSize: [{
|
|
1023
1034
|
type: Input
|
|
1024
1035
|
}], srcOptions: [{
|
|
1025
1036
|
type: Input
|
|
@@ -1375,21 +1386,21 @@ class UiFileUploaderComponent extends UiSimpleComponent {
|
|
|
1375
1386
|
console.log(f);
|
|
1376
1387
|
}
|
|
1377
1388
|
}
|
|
1378
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1379
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1389
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: UiFileUploaderComponent, deps: [{ token: UI_FILESERVICE, optional: true }, { token: UI_TRANSLATESERVICE }, { token: i1.ControlContainer, host: true, optional: true, skipSelf: true }, { token: UiFileService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1390
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: UiFileUploaderComponent, selector: "ui-file-uploader", inputs: { maxFiles: "maxFiles", multiple: "multiple", crop: "crop", cropRounded: "cropRounded", cropMaxWidth: "cropMaxWidth", fileSize: "fileSize", customFileMenu: "customFileMenu", addHint: "addHint", newFilePosition: "newFilePosition", templates: "templates", previewPosition: "previewPosition" }, outputs: { imageCropped: "imageCropped", fileEvent: "fileEvent" }, providers: [{
|
|
1380
1391
|
provide: NG_VALUE_ACCESSOR,
|
|
1381
1392
|
multi: true,
|
|
1382
1393
|
useExisting: UiFileUploaderComponent,
|
|
1383
|
-
}], usesInheritance: true, ngImport: i0, template: "<div class=\"label\" *ngIf=\"label\">\r\n <div class=\"text-container\" [matTooltip]=\"required ? translateService.instant('ui.controls.validation.required') : undefined\" [matTooltipPosition]=\"'above'\">\r\n <div class=\"text\">{{label}}</div>\r\n <div *ngIf=\"required\" class=\"required\">*</div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"files-container\" [ngClass]=\"{dragging: dragging, disabled: uploading || !editable}\">\r\n\r\n <div class=\"existing-files\">\r\n\r\n <div class=\"file-container\" *ngFor=\"let f of files\">\r\n\r\n <div class=\"file-menu\" (click)=\"toggleMenuVisibility(f)\" *ngIf=\"!customFileMenu && editable && !uploading\">\r\n <mat-icon>menu</mat-icon>\r\n </div>\r\n <div class=\"file-menu-container mat-elevation-z2\" [ngClass]=\"{visible: f === fileMenuOpened}\" (click)=\"menuClick()\" (mouseleave)=\"menuClick()\">\r\n <ng-container *ngIf=\"!menuTemplate\">\r\n <label class=\"menu-item\">{{ translateService.instant('ui.controls.ui-file-uploader.menu.change') }}\r\n <input *ngIf=\"!refreshAddInput\" style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n </label>\r\n <div class=\"menu-item\" (click)=\"remove(f)\">{{ translateService.instant('ui.controls.ui-file-uploader.menu.delete') }}</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"menuTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"menuTemplate\" [ngTemplateOutletContext]=\"{fileInput: fileInput}\"></ng-template>\r\n <ng-template #fileInput>\r\n <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n\r\n <div *ngIf=\"crop && !cropDone(f)\" (mouseenter)=\"startCropPreview(f.$newFile.id)\" (mouseleave)=\"stopCropPreview(f.$newFile.id)\">\r\n <div class=\"crop-container\" [ngStyle]=\"ngAddStyle\">\r\n\r\n <ui-file *ngIf=\"false && files.length > 0 && !cropSourceImages\" [fileSize]=\"fileSize\" [srcData]=\"files[0].custom\" [ngClass]=\"{rounded: cropRounded}\"></ui-file>\r\n\r\n <mat-spinner *ngIf=\"!cropperImageLoaded[f.$newFile.id] && cropSourceImages[f.$newFile.id]\" [diameter]=\"75\"></mat-spinner>\r\n\r\n <image-cropper *ngIf=\"cropSourceImages[f.$newFile.id]\"\r\n [imageFile]=\"cropSourceImages[f.$newFile.id]\"\r\n [maintainAspectRatio]=\"true\"\r\n [containWithinAspectRatio]=\"false\"\r\n [aspectRatio]=\"aspectRatio\"\r\n [resizeToWidth]=\"cropMaxWidth\"\r\n [onlyScaleDown]=\"false\"\r\n [roundCropper]=\"cropRounded\"\r\n [canvasRotation]=\"canvasRotation[f.$newFile.id]\"\r\n [transform]=\"transform[f.$newFile.id]\"\r\n [alignImage]=\"'center'\"\r\n [style.display]=\"showCropper ? null : 'none'\"\r\n [format]=\"'png'\"\r\n (imageCropped)=\"onImageCropped($event, f.$newFile.id)\"\r\n (imageLoaded)=\"imageLoaded(f.$newFile.id)\"\r\n (cropperReady)=\"cropperReady($event, f.$newFile.id)\"\r\n (loadImageFailed)=\"loadImageFailed()\"\r\n ></image-cropper>\r\n\r\n <div class=\"crop-preview mat-elevation-z2\" [class]=\"previewPosition\" *ngIf=\"true || (showCropPreview[f.$newFile.id] && cropperImageLoaded[f.$newFile.id])\">\r\n <div class=\"crop-menu\">\r\n <mat-icon (click)=\"zoomCroppedImage(.1, f.$newFile.id)\">zoom_in</mat-icon>\r\n <mat-icon (click)=\"zoomCroppedImage(- .1, f.$newFile.id)\">zoom_out</mat-icon>\r\n <mat-icon (click)=\"rotateCroppedImage(-1, f.$newFile.id)\">rotate_left</mat-icon>\r\n <mat-icon (click)=\"rotateCroppedImage(1, f.$newFile.id)\">rotate_right</mat-icon>\r\n <div style=\"flex: 1 1 100%\"></div>\r\n <label class=\"menu-item\">\r\n <mat-icon>upload_file</mat-icon>\r\n <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n </label>\r\n <mat-icon (click)=\"remove(f)\">delete_outline</mat-icon>\r\n <div style=\"flex: 1 1 100%\"></div>\r\n <mat-icon (click)=\"cropperDone(f.$newFile.id)\">done</mat-icon>\r\n </div>\r\n <img *ngIf=\"croppedImages[f.$newFile.id]\" [src]=\"croppedImages[f.$newFile.id].objectUrl\" [ngClass]=\"{rounded: cropRounded}\"/>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n\r\n <ng-container *ngIf=\"!crop || cropDone(f)\">\r\n <ng-container *ngIf=\"fileTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"fileTemplate\" [ngTemplateOutletContext]=\"{file: f, fileInput: fileInput2}\"></ng-template>\r\n <ng-template #fileInput2>\r\n <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n </ng-template>\r\n </ng-container>\r\n\r\n <ui-file *ngIf=\"!fileTemplate\" [fileSize]=\"fileSize\" [srcData]=\"f.$newFile ? f.$newFile: f.custom\" [ngClass]=\"{rounded: crop && cropRounded}\">\r\n </ui-file>\r\n\r\n <ng-container *ngIf=\"f.$newFile\">\r\n <div *ngIf=\"f.$newFile.responseStatus && f.$newFile.responseStatus !== 200\" class=\"progress-container error\">\r\n {{ translateService.instant('ui.controls.ui-file-uploader.uploadError', f.$newFile.response) }}\r\n </div>\r\n <div *ngIf=\"!f.$newFile.responseStatus && f.$newFile.progress.status === 1\" class=\"progress-container\">\r\n <div class=\"progress\" [ngStyle]=\"{width: f.$newFile.progress.data.percentage + '%'}\"></div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"file-container add\" ngFileDrop [options]=\"uploadOptions\" (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\" [ngClass]=\"{visible: files.length < maxFiles || maxFiles === 0}\" [ngStyle]=\"addFileTemplate ? {} : ngAddStyle\">\r\n <label>\r\n <ng-container *ngIf=\"addFileTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"addFileTemplate\"></ng-template>\r\n </ng-container>\r\n <ng-container *ngIf=\"!addFileTemplate\">\r\n <div class=\"upload-image-container\"></div>\r\n <img [src]=\"addFileImgSrc\" [ngClass]=\"{'with-hint': addHint}\" />\r\n <div *ngIf=\"addHint\" class=\"add-hint\">{{addHint}}</div>\r\n </ng-container>\r\n <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\" [multiple]=\"maxFiles === 0 && multiple\">\r\n </label>\r\n </div>\r\n\r\n</div>\r\n", styles: [":host{display:flex;flex-wrap:wrap}:host .label .text{font-size:.9em;line-height:1em;padding:6px 0 4px}:host .files-container{display:flex;flex-wrap:wrap;border-style:solid}:host .files-container .existing-files{display:flex;flex-wrap:wrap}:host .files-container.dragging .add label{border:2px dashed grey;background-color:#0000001a}:host .files-container.disabled .add{opacity:.5;pointer-events:none}:host .file-container{max-width:100%;max-height:100%;position:relative;display:flex;align-items:center;justify-content:center}:host .file-container .progress-container{position:absolute;bottom:0;left:1px;right:1px;height:20%;max-height:20px;background-color:#0000001a}:host .file-container .progress-container.error{background-color:red;color:#fff;display:flex;align-items:center;justify-content:center}:host .file-container .progress-container .progress{background-color:#0000004d;height:100%}:host .file-container.add{display:flex;align-items:center;flex-direction:column;transition:opacity .25s;cursor:pointer}:host .file-container.add:not(.visible){display:none}:host .file-container.add img{max-width:100%;max-height:100%}:host .file-container.add img.with-hint{max-height:75%}:host .file-container.add .add-hint{margin-top:8px;font-size:80%;text-align:center}:host .file-container.add label{position:absolute;inset:0;cursor:pointer;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .file-container.add .upload-image-container{display:none}:host .file-container .file-menu-container{display:none;position:absolute;left:calc(100% - 45px);top:27px;z-index:1000}:host .file-container .file-menu-container ::ng-deep .menu-item{position:relative;padding:12px 24px;cursor:pointer;display:block}:host .file-container .file-menu-container.visible{display:block}:host .file-container .file-menu{display:flex;position:absolute;flex-direction:column;align-items:center;justify-content:center;padding:12px;right:10px;top:10px;background-color:#fff9;border-radius:50%;cursor:pointer;transition:all .25s;z-index:999}:host .file-container:hover .file-menu{background-color:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}:host .file-container mat-progress-bar{position:absolute;bottom:0;height:6px;left:0;right:0;z-index:1000}:host image-cropper{padding:0}:host ui-file.rounded ::ng-deep img{border-radius:50%}:host .crop-container{display:flex;align-items:center;justify-content:center;position:relative}:host .crop-container mat-spinner{position:absolute;z-index:1}:host .crop-container .crop-preview{position:absolute;top:100%;left:0;right:0;padding:6px;border:1px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;max-width:350px;margin-right:auto;margin-left:auto}:host .crop-container .crop-preview.left{right:calc(100% + 6px);left:unset;top:0}:host .crop-container .crop-preview.above{bottom:100%;top:unset}:host .crop-container .crop-preview .crop-menu{width:100%;flex:0 0 auto;display:flex}:host .crop-container .crop-preview .crop-menu mat-icon{margin:0 3px;width:calc(1em + 6px);height:1em;font-size:2em;cursor:pointer;user-select:none;flex:1 1 100%}:host .crop-container .crop-preview img{margin:16px 0;max-width:256px;max-height:256px}:host .crop-container .crop-preview img.rounded{border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i6.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i6.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "component", type: i4$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i8.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "cropperFrameAriaLabel", "output", "format", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "cropper", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange"] }, { kind: "component", type: FileComponent, selector: "ui-file", inputs: ["fileSize", "srcOptions", "srcData", "srcUrl"] }] }); }
|
|
1394
|
+
}], usesInheritance: true, ngImport: i0, template: "<div class=\"label\" *ngIf=\"label\">\r\n <div class=\"text-container\" [matTooltip]=\"required ? translateService.instant('ui.controls.validation.required') : undefined\" [matTooltipPosition]=\"'above'\">\r\n <div class=\"text\">{{label}}</div>\r\n <div *ngIf=\"required\" class=\"required\">*</div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"files-container\" [ngClass]=\"{dragging: dragging, disabled: uploading || !editable}\">\r\n\r\n <div class=\"existing-files\">\r\n\r\n <div class=\"file-container\" *ngFor=\"let f of files\">\r\n\r\n <div class=\"file-menu\" (click)=\"toggleMenuVisibility(f)\" *ngIf=\"!customFileMenu && editable && !uploading\">\r\n <mat-icon>menu</mat-icon>\r\n </div>\r\n <div class=\"file-menu-container mat-elevation-z2\" [ngClass]=\"{visible: f === fileMenuOpened}\" (click)=\"menuClick()\" (mouseleave)=\"menuClick()\">\r\n <ng-container *ngIf=\"!menuTemplate\">\r\n <label class=\"menu-item\">{{ translateService.instant('ui.controls.ui-file-uploader.menu.change') }}\r\n <input *ngIf=\"!refreshAddInput\" style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n </label>\r\n <div class=\"menu-item\" (click)=\"remove(f)\">{{ translateService.instant('ui.controls.ui-file-uploader.menu.delete') }}</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"menuTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"menuTemplate\" [ngTemplateOutletContext]=\"{fileInput: fileInput}\"></ng-template>\r\n <ng-template #fileInput>\r\n <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n\r\n <div *ngIf=\"crop && !cropDone(f)\" (mouseenter)=\"startCropPreview(f.$newFile.id)\" (mouseleave)=\"stopCropPreview(f.$newFile.id)\">\r\n <div class=\"crop-container\" [ngStyle]=\"ngAddStyle\">\r\n\r\n <ui-file *ngIf=\"false && files.length > 0 && !cropSourceImages\" [fileSize]=\"fileSize\" [srcData]=\"files[0].custom\" [ngClass]=\"{rounded: cropRounded}\"></ui-file>\r\n\r\n <mat-spinner *ngIf=\"!cropperImageLoaded[f.$newFile.id] && cropSourceImages[f.$newFile.id]\" [diameter]=\"75\"></mat-spinner>\r\n\r\n <image-cropper *ngIf=\"cropSourceImages[f.$newFile.id]\"\r\n [imageFile]=\"cropSourceImages[f.$newFile.id]\"\r\n [maintainAspectRatio]=\"true\"\r\n [containWithinAspectRatio]=\"false\"\r\n [aspectRatio]=\"aspectRatio\"\r\n [resizeToWidth]=\"cropMaxWidth\"\r\n [onlyScaleDown]=\"false\"\r\n [roundCropper]=\"cropRounded\"\r\n [canvasRotation]=\"canvasRotation[f.$newFile.id]\"\r\n [transform]=\"transform[f.$newFile.id]\"\r\n [alignImage]=\"'center'\"\r\n [style.display]=\"showCropper ? null : 'none'\"\r\n [format]=\"'png'\"\r\n (imageCropped)=\"onImageCropped($event, f.$newFile.id)\"\r\n (imageLoaded)=\"imageLoaded(f.$newFile.id)\"\r\n (cropperReady)=\"cropperReady($event, f.$newFile.id)\"\r\n (loadImageFailed)=\"loadImageFailed()\"\r\n ></image-cropper>\r\n\r\n <div class=\"crop-preview mat-elevation-z2\" [class]=\"previewPosition\" *ngIf=\"true || (showCropPreview[f.$newFile.id] && cropperImageLoaded[f.$newFile.id])\">\r\n <div class=\"crop-menu\">\r\n <mat-icon (click)=\"zoomCroppedImage(.1, f.$newFile.id)\">zoom_in</mat-icon>\r\n <mat-icon (click)=\"zoomCroppedImage(- .1, f.$newFile.id)\">zoom_out</mat-icon>\r\n <mat-icon (click)=\"rotateCroppedImage(-1, f.$newFile.id)\">rotate_left</mat-icon>\r\n <mat-icon (click)=\"rotateCroppedImage(1, f.$newFile.id)\">rotate_right</mat-icon>\r\n <div style=\"flex: 1 1 100%\"></div>\r\n <label class=\"menu-item\">\r\n <mat-icon>upload_file</mat-icon>\r\n <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n </label>\r\n <mat-icon (click)=\"remove(f)\">delete_outline</mat-icon>\r\n <div style=\"flex: 1 1 100%\"></div>\r\n <mat-icon (click)=\"cropperDone(f.$newFile.id)\">done</mat-icon>\r\n </div>\r\n <img *ngIf=\"croppedImages[f.$newFile.id]\" [src]=\"croppedImages[f.$newFile.id].objectUrl\" [ngClass]=\"{rounded: cropRounded}\"/>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n\r\n <ng-container *ngIf=\"!crop || cropDone(f)\">\r\n <ng-container *ngIf=\"fileTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"fileTemplate\" [ngTemplateOutletContext]=\"{file: f, fileInput: fileInput2}\"></ng-template>\r\n <ng-template #fileInput2>\r\n <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n </ng-template>\r\n </ng-container>\r\n\r\n <ui-file *ngIf=\"!fileTemplate\" [fileSize]=\"fileSize\" [srcData]=\"f.$newFile ? f.$newFile: f.custom\" [ngClass]=\"{rounded: crop && cropRounded}\">\r\n </ui-file>\r\n\r\n <ng-container *ngIf=\"f.$newFile\">\r\n <div *ngIf=\"f.$newFile.responseStatus && f.$newFile.responseStatus !== 200\" class=\"progress-container error\">\r\n {{ translateService.instant('ui.controls.ui-file-uploader.uploadError', f.$newFile.response) }}\r\n </div>\r\n <div *ngIf=\"!f.$newFile.responseStatus && f.$newFile.progress.status === 1\" class=\"progress-container\">\r\n <div class=\"progress\" [ngStyle]=\"{width: f.$newFile.progress.data.percentage + '%'}\"></div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"file-container add\" ngFileDrop [options]=\"uploadOptions\" (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\" [ngClass]=\"{visible: files.length < maxFiles || maxFiles === 0}\" [ngStyle]=\"addFileTemplate ? {} : ngAddStyle\">\r\n <label>\r\n <ng-container *ngIf=\"addFileTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"addFileTemplate\"></ng-template>\r\n </ng-container>\r\n <ng-container *ngIf=\"!addFileTemplate\">\r\n <div class=\"upload-image-container\"></div>\r\n <img [src]=\"addFileImgSrc\" [ngClass]=\"{'with-hint': addHint}\" />\r\n <div *ngIf=\"addHint\" class=\"add-hint\">{{addHint}}</div>\r\n </ng-container>\r\n <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\" [multiple]=\"maxFiles === 0 && multiple\">\r\n </label>\r\n </div>\r\n\r\n</div>\r\n", styles: [":host{display:flex;flex-wrap:wrap}:host .label .text{font-size:.9em;line-height:1em;padding:6px 0 4px}:host .files-container{display:flex;flex-wrap:wrap;border-style:solid}:host .files-container .existing-files{display:flex;flex-wrap:wrap}:host .files-container.dragging .add label{border:2px dashed grey;background-color:#0000001a}:host .files-container.disabled .add{opacity:.5;pointer-events:none}:host .file-container{max-width:100%;max-height:100%;position:relative;display:flex;align-items:center;justify-content:center}:host .file-container .progress-container{position:absolute;bottom:0;left:1px;right:1px;height:20%;max-height:20px;background-color:#0000001a}:host .file-container .progress-container.error{background-color:red;color:#fff;display:flex;align-items:center;justify-content:center}:host .file-container .progress-container .progress{background-color:#0000004d;height:100%}:host .file-container.add{display:flex;align-items:center;flex-direction:column;transition:opacity .25s;cursor:pointer}:host .file-container.add:not(.visible){display:none}:host .file-container.add img{max-width:100%;max-height:100%}:host .file-container.add img.with-hint{max-height:75%}:host .file-container.add .add-hint{margin-top:8px;font-size:80%;text-align:center}:host .file-container.add label{position:absolute;inset:0;cursor:pointer;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .file-container.add .upload-image-container{display:none}:host .file-container .file-menu-container{display:none;position:absolute;left:calc(100% - 45px);top:27px;z-index:1000}:host .file-container .file-menu-container ::ng-deep .menu-item{position:relative;padding:12px 24px;cursor:pointer;display:block}:host .file-container .file-menu-container.visible{display:block}:host .file-container .file-menu{display:flex;position:absolute;flex-direction:column;align-items:center;justify-content:center;padding:12px;right:10px;top:10px;background-color:#fff9;border-radius:50%;cursor:pointer;transition:all .25s;z-index:999}:host .file-container:hover .file-menu{background-color:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}:host .file-container mat-progress-bar{position:absolute;bottom:0;height:6px;left:0;right:0;z-index:1000}:host image-cropper{padding:0}:host ui-file.rounded ::ng-deep img{border-radius:50%}:host .crop-container{display:flex;align-items:center;justify-content:center;position:relative}:host .crop-container mat-spinner{position:absolute;z-index:1}:host .crop-container .crop-preview{position:absolute;top:100%;left:0;right:0;padding:6px;border:1px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;max-width:350px;margin-right:auto;margin-left:auto}:host .crop-container .crop-preview.left{right:calc(100% + 6px);left:unset;top:0}:host .crop-container .crop-preview.above{bottom:100%;top:unset}:host .crop-container .crop-preview .crop-menu{width:100%;flex:0 0 auto;display:flex}:host .crop-container .crop-preview .crop-menu mat-icon{margin:0 3px;width:calc(1em + 6px);height:1em;font-size:2em;cursor:pointer;-webkit-user-select:none;user-select:none;flex:1 1 100%}:host .crop-container .crop-preview img{margin:16px 0;max-width:256px;max-height:256px}:host .crop-container .crop-preview img.rounded{border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i6.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i6.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "component", type: i4$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i8.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "cropperFrameAriaLabel", "output", "format", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "cropper", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange"] }, { kind: "component", type: FileComponent, selector: "ui-file", inputs: ["fileSize", "srcOptions", "srcData", "srcUrl"] }] }); }
|
|
1384
1395
|
}
|
|
1385
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1396
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: UiFileUploaderComponent, decorators: [{
|
|
1386
1397
|
type: Component,
|
|
1387
1398
|
args: [{ selector: 'ui-file-uploader', providers: [{
|
|
1388
1399
|
provide: NG_VALUE_ACCESSOR,
|
|
1389
1400
|
multi: true,
|
|
1390
1401
|
useExisting: UiFileUploaderComponent,
|
|
1391
|
-
}], template: "<div class=\"label\" *ngIf=\"label\">\r\n <div class=\"text-container\" [matTooltip]=\"required ? translateService.instant('ui.controls.validation.required') : undefined\" [matTooltipPosition]=\"'above'\">\r\n <div class=\"text\">{{label}}</div>\r\n <div *ngIf=\"required\" class=\"required\">*</div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"files-container\" [ngClass]=\"{dragging: dragging, disabled: uploading || !editable}\">\r\n\r\n <div class=\"existing-files\">\r\n\r\n <div class=\"file-container\" *ngFor=\"let f of files\">\r\n\r\n <div class=\"file-menu\" (click)=\"toggleMenuVisibility(f)\" *ngIf=\"!customFileMenu && editable && !uploading\">\r\n <mat-icon>menu</mat-icon>\r\n </div>\r\n <div class=\"file-menu-container mat-elevation-z2\" [ngClass]=\"{visible: f === fileMenuOpened}\" (click)=\"menuClick()\" (mouseleave)=\"menuClick()\">\r\n <ng-container *ngIf=\"!menuTemplate\">\r\n <label class=\"menu-item\">{{ translateService.instant('ui.controls.ui-file-uploader.menu.change') }}\r\n <input *ngIf=\"!refreshAddInput\" style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n </label>\r\n <div class=\"menu-item\" (click)=\"remove(f)\">{{ translateService.instant('ui.controls.ui-file-uploader.menu.delete') }}</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"menuTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"menuTemplate\" [ngTemplateOutletContext]=\"{fileInput: fileInput}\"></ng-template>\r\n <ng-template #fileInput>\r\n <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n\r\n <div *ngIf=\"crop && !cropDone(f)\" (mouseenter)=\"startCropPreview(f.$newFile.id)\" (mouseleave)=\"stopCropPreview(f.$newFile.id)\">\r\n <div class=\"crop-container\" [ngStyle]=\"ngAddStyle\">\r\n\r\n <ui-file *ngIf=\"false && files.length > 0 && !cropSourceImages\" [fileSize]=\"fileSize\" [srcData]=\"files[0].custom\" [ngClass]=\"{rounded: cropRounded}\"></ui-file>\r\n\r\n <mat-spinner *ngIf=\"!cropperImageLoaded[f.$newFile.id] && cropSourceImages[f.$newFile.id]\" [diameter]=\"75\"></mat-spinner>\r\n\r\n <image-cropper *ngIf=\"cropSourceImages[f.$newFile.id]\"\r\n [imageFile]=\"cropSourceImages[f.$newFile.id]\"\r\n [maintainAspectRatio]=\"true\"\r\n [containWithinAspectRatio]=\"false\"\r\n [aspectRatio]=\"aspectRatio\"\r\n [resizeToWidth]=\"cropMaxWidth\"\r\n [onlyScaleDown]=\"false\"\r\n [roundCropper]=\"cropRounded\"\r\n [canvasRotation]=\"canvasRotation[f.$newFile.id]\"\r\n [transform]=\"transform[f.$newFile.id]\"\r\n [alignImage]=\"'center'\"\r\n [style.display]=\"showCropper ? null : 'none'\"\r\n [format]=\"'png'\"\r\n (imageCropped)=\"onImageCropped($event, f.$newFile.id)\"\r\n (imageLoaded)=\"imageLoaded(f.$newFile.id)\"\r\n (cropperReady)=\"cropperReady($event, f.$newFile.id)\"\r\n (loadImageFailed)=\"loadImageFailed()\"\r\n ></image-cropper>\r\n\r\n <div class=\"crop-preview mat-elevation-z2\" [class]=\"previewPosition\" *ngIf=\"true || (showCropPreview[f.$newFile.id] && cropperImageLoaded[f.$newFile.id])\">\r\n <div class=\"crop-menu\">\r\n <mat-icon (click)=\"zoomCroppedImage(.1, f.$newFile.id)\">zoom_in</mat-icon>\r\n <mat-icon (click)=\"zoomCroppedImage(- .1, f.$newFile.id)\">zoom_out</mat-icon>\r\n <mat-icon (click)=\"rotateCroppedImage(-1, f.$newFile.id)\">rotate_left</mat-icon>\r\n <mat-icon (click)=\"rotateCroppedImage(1, f.$newFile.id)\">rotate_right</mat-icon>\r\n <div style=\"flex: 1 1 100%\"></div>\r\n <label class=\"menu-item\">\r\n <mat-icon>upload_file</mat-icon>\r\n <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n </label>\r\n <mat-icon (click)=\"remove(f)\">delete_outline</mat-icon>\r\n <div style=\"flex: 1 1 100%\"></div>\r\n <mat-icon (click)=\"cropperDone(f.$newFile.id)\">done</mat-icon>\r\n </div>\r\n <img *ngIf=\"croppedImages[f.$newFile.id]\" [src]=\"croppedImages[f.$newFile.id].objectUrl\" [ngClass]=\"{rounded: cropRounded}\"/>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n\r\n <ng-container *ngIf=\"!crop || cropDone(f)\">\r\n <ng-container *ngIf=\"fileTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"fileTemplate\" [ngTemplateOutletContext]=\"{file: f, fileInput: fileInput2}\"></ng-template>\r\n <ng-template #fileInput2>\r\n <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n </ng-template>\r\n </ng-container>\r\n\r\n <ui-file *ngIf=\"!fileTemplate\" [fileSize]=\"fileSize\" [srcData]=\"f.$newFile ? f.$newFile: f.custom\" [ngClass]=\"{rounded: crop && cropRounded}\">\r\n </ui-file>\r\n\r\n <ng-container *ngIf=\"f.$newFile\">\r\n <div *ngIf=\"f.$newFile.responseStatus && f.$newFile.responseStatus !== 200\" class=\"progress-container error\">\r\n {{ translateService.instant('ui.controls.ui-file-uploader.uploadError', f.$newFile.response) }}\r\n </div>\r\n <div *ngIf=\"!f.$newFile.responseStatus && f.$newFile.progress.status === 1\" class=\"progress-container\">\r\n <div class=\"progress\" [ngStyle]=\"{width: f.$newFile.progress.data.percentage + '%'}\"></div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"file-container add\" ngFileDrop [options]=\"uploadOptions\" (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\" [ngClass]=\"{visible: files.length < maxFiles || maxFiles === 0}\" [ngStyle]=\"addFileTemplate ? {} : ngAddStyle\">\r\n <label>\r\n <ng-container *ngIf=\"addFileTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"addFileTemplate\"></ng-template>\r\n </ng-container>\r\n <ng-container *ngIf=\"!addFileTemplate\">\r\n <div class=\"upload-image-container\"></div>\r\n <img [src]=\"addFileImgSrc\" [ngClass]=\"{'with-hint': addHint}\" />\r\n <div *ngIf=\"addHint\" class=\"add-hint\">{{addHint}}</div>\r\n </ng-container>\r\n <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\" [multiple]=\"maxFiles === 0 && multiple\">\r\n </label>\r\n </div>\r\n\r\n</div>\r\n", styles: [":host{display:flex;flex-wrap:wrap}:host .label .text{font-size:.9em;line-height:1em;padding:6px 0 4px}:host .files-container{display:flex;flex-wrap:wrap;border-style:solid}:host .files-container .existing-files{display:flex;flex-wrap:wrap}:host .files-container.dragging .add label{border:2px dashed grey;background-color:#0000001a}:host .files-container.disabled .add{opacity:.5;pointer-events:none}:host .file-container{max-width:100%;max-height:100%;position:relative;display:flex;align-items:center;justify-content:center}:host .file-container .progress-container{position:absolute;bottom:0;left:1px;right:1px;height:20%;max-height:20px;background-color:#0000001a}:host .file-container .progress-container.error{background-color:red;color:#fff;display:flex;align-items:center;justify-content:center}:host .file-container .progress-container .progress{background-color:#0000004d;height:100%}:host .file-container.add{display:flex;align-items:center;flex-direction:column;transition:opacity .25s;cursor:pointer}:host .file-container.add:not(.visible){display:none}:host .file-container.add img{max-width:100%;max-height:100%}:host .file-container.add img.with-hint{max-height:75%}:host .file-container.add .add-hint{margin-top:8px;font-size:80%;text-align:center}:host .file-container.add label{position:absolute;inset:0;cursor:pointer;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .file-container.add .upload-image-container{display:none}:host .file-container .file-menu-container{display:none;position:absolute;left:calc(100% - 45px);top:27px;z-index:1000}:host .file-container .file-menu-container ::ng-deep .menu-item{position:relative;padding:12px 24px;cursor:pointer;display:block}:host .file-container .file-menu-container.visible{display:block}:host .file-container .file-menu{display:flex;position:absolute;flex-direction:column;align-items:center;justify-content:center;padding:12px;right:10px;top:10px;background-color:#fff9;border-radius:50%;cursor:pointer;transition:all .25s;z-index:999}:host .file-container:hover .file-menu{background-color:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}:host .file-container mat-progress-bar{position:absolute;bottom:0;height:6px;left:0;right:0;z-index:1000}:host image-cropper{padding:0}:host ui-file.rounded ::ng-deep img{border-radius:50%}:host .crop-container{display:flex;align-items:center;justify-content:center;position:relative}:host .crop-container mat-spinner{position:absolute;z-index:1}:host .crop-container .crop-preview{position:absolute;top:100%;left:0;right:0;padding:6px;border:1px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;max-width:350px;margin-right:auto;margin-left:auto}:host .crop-container .crop-preview.left{right:calc(100% + 6px);left:unset;top:0}:host .crop-container .crop-preview.above{bottom:100%;top:unset}:host .crop-container .crop-preview .crop-menu{width:100%;flex:0 0 auto;display:flex}:host .crop-container .crop-preview .crop-menu mat-icon{margin:0 3px;width:calc(1em + 6px);height:1em;font-size:2em;cursor:pointer;user-select:none;flex:1 1 100%}:host .crop-container .crop-preview img{margin:16px 0;max-width:256px;max-height:256px}:host .crop-container .crop-preview img.rounded{border-radius:50%}\n"] }]
|
|
1392
|
-
}], ctorParameters:
|
|
1402
|
+
}], template: "<div class=\"label\" *ngIf=\"label\">\r\n <div class=\"text-container\" [matTooltip]=\"required ? translateService.instant('ui.controls.validation.required') : undefined\" [matTooltipPosition]=\"'above'\">\r\n <div class=\"text\">{{label}}</div>\r\n <div *ngIf=\"required\" class=\"required\">*</div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"files-container\" [ngClass]=\"{dragging: dragging, disabled: uploading || !editable}\">\r\n\r\n <div class=\"existing-files\">\r\n\r\n <div class=\"file-container\" *ngFor=\"let f of files\">\r\n\r\n <div class=\"file-menu\" (click)=\"toggleMenuVisibility(f)\" *ngIf=\"!customFileMenu && editable && !uploading\">\r\n <mat-icon>menu</mat-icon>\r\n </div>\r\n <div class=\"file-menu-container mat-elevation-z2\" [ngClass]=\"{visible: f === fileMenuOpened}\" (click)=\"menuClick()\" (mouseleave)=\"menuClick()\">\r\n <ng-container *ngIf=\"!menuTemplate\">\r\n <label class=\"menu-item\">{{ translateService.instant('ui.controls.ui-file-uploader.menu.change') }}\r\n <input *ngIf=\"!refreshAddInput\" style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n </label>\r\n <div class=\"menu-item\" (click)=\"remove(f)\">{{ translateService.instant('ui.controls.ui-file-uploader.menu.delete') }}</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"menuTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"menuTemplate\" [ngTemplateOutletContext]=\"{fileInput: fileInput}\"></ng-template>\r\n <ng-template #fileInput>\r\n <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n\r\n <div *ngIf=\"crop && !cropDone(f)\" (mouseenter)=\"startCropPreview(f.$newFile.id)\" (mouseleave)=\"stopCropPreview(f.$newFile.id)\">\r\n <div class=\"crop-container\" [ngStyle]=\"ngAddStyle\">\r\n\r\n <ui-file *ngIf=\"false && files.length > 0 && !cropSourceImages\" [fileSize]=\"fileSize\" [srcData]=\"files[0].custom\" [ngClass]=\"{rounded: cropRounded}\"></ui-file>\r\n\r\n <mat-spinner *ngIf=\"!cropperImageLoaded[f.$newFile.id] && cropSourceImages[f.$newFile.id]\" [diameter]=\"75\"></mat-spinner>\r\n\r\n <image-cropper *ngIf=\"cropSourceImages[f.$newFile.id]\"\r\n [imageFile]=\"cropSourceImages[f.$newFile.id]\"\r\n [maintainAspectRatio]=\"true\"\r\n [containWithinAspectRatio]=\"false\"\r\n [aspectRatio]=\"aspectRatio\"\r\n [resizeToWidth]=\"cropMaxWidth\"\r\n [onlyScaleDown]=\"false\"\r\n [roundCropper]=\"cropRounded\"\r\n [canvasRotation]=\"canvasRotation[f.$newFile.id]\"\r\n [transform]=\"transform[f.$newFile.id]\"\r\n [alignImage]=\"'center'\"\r\n [style.display]=\"showCropper ? null : 'none'\"\r\n [format]=\"'png'\"\r\n (imageCropped)=\"onImageCropped($event, f.$newFile.id)\"\r\n (imageLoaded)=\"imageLoaded(f.$newFile.id)\"\r\n (cropperReady)=\"cropperReady($event, f.$newFile.id)\"\r\n (loadImageFailed)=\"loadImageFailed()\"\r\n ></image-cropper>\r\n\r\n <div class=\"crop-preview mat-elevation-z2\" [class]=\"previewPosition\" *ngIf=\"true || (showCropPreview[f.$newFile.id] && cropperImageLoaded[f.$newFile.id])\">\r\n <div class=\"crop-menu\">\r\n <mat-icon (click)=\"zoomCroppedImage(.1, f.$newFile.id)\">zoom_in</mat-icon>\r\n <mat-icon (click)=\"zoomCroppedImage(- .1, f.$newFile.id)\">zoom_out</mat-icon>\r\n <mat-icon (click)=\"rotateCroppedImage(-1, f.$newFile.id)\">rotate_left</mat-icon>\r\n <mat-icon (click)=\"rotateCroppedImage(1, f.$newFile.id)\">rotate_right</mat-icon>\r\n <div style=\"flex: 1 1 100%\"></div>\r\n <label class=\"menu-item\">\r\n <mat-icon>upload_file</mat-icon>\r\n <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n </label>\r\n <mat-icon (click)=\"remove(f)\">delete_outline</mat-icon>\r\n <div style=\"flex: 1 1 100%\"></div>\r\n <mat-icon (click)=\"cropperDone(f.$newFile.id)\">done</mat-icon>\r\n </div>\r\n <img *ngIf=\"croppedImages[f.$newFile.id]\" [src]=\"croppedImages[f.$newFile.id].objectUrl\" [ngClass]=\"{rounded: cropRounded}\"/>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n\r\n <ng-container *ngIf=\"!crop || cropDone(f)\">\r\n <ng-container *ngIf=\"fileTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"fileTemplate\" [ngTemplateOutletContext]=\"{file: f, fileInput: fileInput2}\"></ng-template>\r\n <ng-template #fileInput2>\r\n <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n </ng-template>\r\n </ng-container>\r\n\r\n <ui-file *ngIf=\"!fileTemplate\" [fileSize]=\"fileSize\" [srcData]=\"f.$newFile ? f.$newFile: f.custom\" [ngClass]=\"{rounded: crop && cropRounded}\">\r\n </ui-file>\r\n\r\n <ng-container *ngIf=\"f.$newFile\">\r\n <div *ngIf=\"f.$newFile.responseStatus && f.$newFile.responseStatus !== 200\" class=\"progress-container error\">\r\n {{ translateService.instant('ui.controls.ui-file-uploader.uploadError', f.$newFile.response) }}\r\n </div>\r\n <div *ngIf=\"!f.$newFile.responseStatus && f.$newFile.progress.status === 1\" class=\"progress-container\">\r\n <div class=\"progress\" [ngStyle]=\"{width: f.$newFile.progress.data.percentage + '%'}\"></div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"file-container add\" ngFileDrop [options]=\"uploadOptions\" (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\" [ngClass]=\"{visible: files.length < maxFiles || maxFiles === 0}\" [ngStyle]=\"addFileTemplate ? {} : ngAddStyle\">\r\n <label>\r\n <ng-container *ngIf=\"addFileTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"addFileTemplate\"></ng-template>\r\n </ng-container>\r\n <ng-container *ngIf=\"!addFileTemplate\">\r\n <div class=\"upload-image-container\"></div>\r\n <img [src]=\"addFileImgSrc\" [ngClass]=\"{'with-hint': addHint}\" />\r\n <div *ngIf=\"addHint\" class=\"add-hint\">{{addHint}}</div>\r\n </ng-container>\r\n <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\" [multiple]=\"maxFiles === 0 && multiple\">\r\n </label>\r\n </div>\r\n\r\n</div>\r\n", styles: [":host{display:flex;flex-wrap:wrap}:host .label .text{font-size:.9em;line-height:1em;padding:6px 0 4px}:host .files-container{display:flex;flex-wrap:wrap;border-style:solid}:host .files-container .existing-files{display:flex;flex-wrap:wrap}:host .files-container.dragging .add label{border:2px dashed grey;background-color:#0000001a}:host .files-container.disabled .add{opacity:.5;pointer-events:none}:host .file-container{max-width:100%;max-height:100%;position:relative;display:flex;align-items:center;justify-content:center}:host .file-container .progress-container{position:absolute;bottom:0;left:1px;right:1px;height:20%;max-height:20px;background-color:#0000001a}:host .file-container .progress-container.error{background-color:red;color:#fff;display:flex;align-items:center;justify-content:center}:host .file-container .progress-container .progress{background-color:#0000004d;height:100%}:host .file-container.add{display:flex;align-items:center;flex-direction:column;transition:opacity .25s;cursor:pointer}:host .file-container.add:not(.visible){display:none}:host .file-container.add img{max-width:100%;max-height:100%}:host .file-container.add img.with-hint{max-height:75%}:host .file-container.add .add-hint{margin-top:8px;font-size:80%;text-align:center}:host .file-container.add label{position:absolute;inset:0;cursor:pointer;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .file-container.add .upload-image-container{display:none}:host .file-container .file-menu-container{display:none;position:absolute;left:calc(100% - 45px);top:27px;z-index:1000}:host .file-container .file-menu-container ::ng-deep .menu-item{position:relative;padding:12px 24px;cursor:pointer;display:block}:host .file-container .file-menu-container.visible{display:block}:host .file-container .file-menu{display:flex;position:absolute;flex-direction:column;align-items:center;justify-content:center;padding:12px;right:10px;top:10px;background-color:#fff9;border-radius:50%;cursor:pointer;transition:all .25s;z-index:999}:host .file-container:hover .file-menu{background-color:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}:host .file-container mat-progress-bar{position:absolute;bottom:0;height:6px;left:0;right:0;z-index:1000}:host image-cropper{padding:0}:host ui-file.rounded ::ng-deep img{border-radius:50%}:host .crop-container{display:flex;align-items:center;justify-content:center;position:relative}:host .crop-container mat-spinner{position:absolute;z-index:1}:host .crop-container .crop-preview{position:absolute;top:100%;left:0;right:0;padding:6px;border:1px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;max-width:350px;margin-right:auto;margin-left:auto}:host .crop-container .crop-preview.left{right:calc(100% + 6px);left:unset;top:0}:host .crop-container .crop-preview.above{bottom:100%;top:unset}:host .crop-container .crop-preview .crop-menu{width:100%;flex:0 0 auto;display:flex}:host .crop-container .crop-preview .crop-menu mat-icon{margin:0 3px;width:calc(1em + 6px);height:1em;font-size:2em;cursor:pointer;-webkit-user-select:none;user-select:none;flex:1 1 100%}:host .crop-container .crop-preview img{margin:16px 0;max-width:256px;max-height:256px}:host .crop-container .crop-preview img.rounded{border-radius:50%}\n"] }]
|
|
1403
|
+
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
1393
1404
|
type: Optional
|
|
1394
1405
|
}, {
|
|
1395
1406
|
type: Inject,
|
|
@@ -1403,7 +1414,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImpo
|
|
|
1403
1414
|
type: Host
|
|
1404
1415
|
}, {
|
|
1405
1416
|
type: SkipSelf
|
|
1406
|
-
}] }, { type: UiFileService }]
|
|
1417
|
+
}] }, { type: UiFileService }], propDecorators: { maxFiles: [{
|
|
1407
1418
|
type: Input
|
|
1408
1419
|
}], multiple: [{
|
|
1409
1420
|
type: Input
|
|
@@ -1438,13 +1449,13 @@ class ExpanderComponent {
|
|
|
1438
1449
|
}
|
|
1439
1450
|
ngOnInit() {
|
|
1440
1451
|
}
|
|
1441
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1442
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1452
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ExpanderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1453
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: ExpanderComponent, selector: "ui-expander", inputs: { expanded: "expanded", direction: "direction" }, host: { properties: { "class.expanded": "this.expanded", "class": "this.direction" } }, ngImport: i0, template: "<mat-icon>keyboard_arrow_up</mat-icon>\r\n", styles: [":host{display:inline-block;transition:transform .25s}:host.right-down{transform:rotate(90deg)}:host.expanded.up-down{transform:scaleY(-1)}:host.expanded.right-down{transform:rotate(180deg)}\n"], dependencies: [{ kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
1443
1454
|
}
|
|
1444
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1455
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ExpanderComponent, decorators: [{
|
|
1445
1456
|
type: Component,
|
|
1446
1457
|
args: [{ selector: 'ui-expander', template: "<mat-icon>keyboard_arrow_up</mat-icon>\r\n", styles: [":host{display:inline-block;transition:transform .25s}:host.right-down{transform:rotate(90deg)}:host.expanded.up-down{transform:scaleY(-1)}:host.expanded.right-down{transform:rotate(180deg)}\n"] }]
|
|
1447
|
-
}], ctorParameters:
|
|
1458
|
+
}], ctorParameters: () => [], propDecorators: { expanded: [{
|
|
1448
1459
|
type: HostBinding,
|
|
1449
1460
|
args: ['class.expanded']
|
|
1450
1461
|
}, {
|
|
@@ -1533,16 +1544,16 @@ class ForceVisibilityDirective {
|
|
|
1533
1544
|
}
|
|
1534
1545
|
}
|
|
1535
1546
|
}
|
|
1536
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1537
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1547
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ForceVisibilityDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1548
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.2", type: ForceVisibilityDirective, selector: "[uiForceVisibility]", inputs: { visibilityWithin: "visibilityWithin", visibilityPadding: "visibilityPadding", visibilityOnRequestOnly: "visibilityOnRequestOnly", visibilityEmitChange: "visibilityEmitChange", visibilityFromTop: "visibilityFromTop", visibilityCheckEnabled: "visibilityCheckEnabled" }, outputs: { visibilityChanged: "visibilityChanged" }, exportAs: ["ForceVisibilityDirective"], usesOnChanges: true, ngImport: i0 }); }
|
|
1538
1549
|
}
|
|
1539
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1550
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ForceVisibilityDirective, decorators: [{
|
|
1540
1551
|
type: Directive,
|
|
1541
1552
|
args: [{
|
|
1542
1553
|
selector: '[uiForceVisibility]',
|
|
1543
1554
|
exportAs: 'ForceVisibilityDirective'
|
|
1544
1555
|
}]
|
|
1545
|
-
}], ctorParameters:
|
|
1556
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { visibilityWithin: [{
|
|
1546
1557
|
type: Input
|
|
1547
1558
|
}], visibilityPadding: [{
|
|
1548
1559
|
type: Input
|
|
@@ -1573,13 +1584,13 @@ class DialogComponent {
|
|
|
1573
1584
|
this.close();
|
|
1574
1585
|
}
|
|
1575
1586
|
}
|
|
1576
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1577
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1587
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DialogComponent, deps: [{ token: i1$2.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1588
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: DialogComponent, selector: "ui-dialog", inputs: { title: "title", draggable: "draggable", hideCloseButton: "hideCloseButton", close: "close" }, ngImport: i0, template: "<ui-action-icon *ngIf=\"title && !hideCloseButton\" (click)=\"clickClose()\" class=\"close-icon\" [matIcon]=\"'close'\" [color]=\"'warn'\"></ui-action-icon>\r\n\r\n<ng-container *ngIf=\"title\">\r\n <h1 class=\"draggable\" cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle mat-dialog-title *ngIf=\"draggable\">\r\n {{title}}\r\n </h1>\r\n <h1 mat-dialog-title *ngIf=\"!draggable\">\r\n {{title}}\r\n </h1>\r\n</ng-container>\r\n\r\n<ng-content></ng-content>\r\n", styles: [":host{height:100%;display:flex;flex-direction:column}::ng-deep .mat-mdc-dialog-container{position:relative;overflow:visible!important}::ng-deep .mat-mdc-dialog-container .mdc-dialog__content{line-height:unset!important;letter-spacing:unset!important;color:unset!important}::ng-deep .mat-mdc-dialog-container .mat-mdc-dialog-title{font-size:24px;margin:0 0 5px;padding:12px 16px;border-bottom:1px solid transparent}::ng-deep .mat-mdc-dialog-container .mat-mdc-dialog-title.draggable{cursor:move}::ng-deep .mat-mdc-dialog-container h1{display:flex;align-items:center}::ng-deep .mat-mdc-dialog-container .close-icon{position:absolute;right:16px;top:16px;z-index:1}::ng-deep .mat-mdc-dialog-container .mat-mdc-dialog-actions{display:flex;flex-direction:column;border-top:1px solid transparent;margin-top:5px;padding:0}::ng-deep .mat-mdc-dialog-container .mat-mdc-dialog-actions.mat-dialog-actions{margin:0 -12px -16px}::ng-deep .mat-mdc-dialog-container .mat-mdc-dialog-actions .buttons{display:flex;flex:1 1 auto;justify-content:flex-end;align-items:center;width:100%;padding:8px}::ng-deep .mat-mdc-dialog-container .mat-mdc-dialog-actions .message{flex:1 1 auto;display:flex;flex-wrap:wrap;font-weight:500;font-size:90%;width:100%;padding:6px 8px}::ng-deep .mat-mdc-dialog-container [mat-dialog-content]{position:relative;max-height:calc(100vh - 150px);overflow:auto;scroll-behavior:smooth;display:flex;flex-direction:column;padding:0 6px;outline:none;flex:1}::ng-deep .mat-mdc-dialog-container [mat-dialog-content].mat-dialog-content{margin:0 -12px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i3$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: ActionIconComponent, selector: "ui-action-icon", inputs: ["size", "color", "disabled", "busy", "matIcon"] }] }); }
|
|
1578
1589
|
}
|
|
1579
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1590
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DialogComponent, decorators: [{
|
|
1580
1591
|
type: Component,
|
|
1581
1592
|
args: [{ selector: 'ui-dialog', template: "<ui-action-icon *ngIf=\"title && !hideCloseButton\" (click)=\"clickClose()\" class=\"close-icon\" [matIcon]=\"'close'\" [color]=\"'warn'\"></ui-action-icon>\r\n\r\n<ng-container *ngIf=\"title\">\r\n <h1 class=\"draggable\" cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle mat-dialog-title *ngIf=\"draggable\">\r\n {{title}}\r\n </h1>\r\n <h1 mat-dialog-title *ngIf=\"!draggable\">\r\n {{title}}\r\n </h1>\r\n</ng-container>\r\n\r\n<ng-content></ng-content>\r\n", styles: [":host{height:100%;display:flex;flex-direction:column}::ng-deep .mat-mdc-dialog-container{position:relative;overflow:visible!important}::ng-deep .mat-mdc-dialog-container .mdc-dialog__content{line-height:unset!important;letter-spacing:unset!important;color:unset!important}::ng-deep .mat-mdc-dialog-container .mat-mdc-dialog-title{font-size:24px;margin:0 0 5px;padding:12px 16px;border-bottom:1px solid transparent}::ng-deep .mat-mdc-dialog-container .mat-mdc-dialog-title.draggable{cursor:move}::ng-deep .mat-mdc-dialog-container h1{display:flex;align-items:center}::ng-deep .mat-mdc-dialog-container .close-icon{position:absolute;right:16px;top:16px;z-index:1}::ng-deep .mat-mdc-dialog-container .mat-mdc-dialog-actions{display:flex;flex-direction:column;border-top:1px solid transparent;margin-top:5px;padding:0}::ng-deep .mat-mdc-dialog-container .mat-mdc-dialog-actions.mat-dialog-actions{margin:0 -12px -16px}::ng-deep .mat-mdc-dialog-container .mat-mdc-dialog-actions .buttons{display:flex;flex:1 1 auto;justify-content:flex-end;align-items:center;width:100%;padding:8px}::ng-deep .mat-mdc-dialog-container .mat-mdc-dialog-actions .message{flex:1 1 auto;display:flex;flex-wrap:wrap;font-weight:500;font-size:90%;width:100%;padding:6px 8px}::ng-deep .mat-mdc-dialog-container [mat-dialog-content]{position:relative;max-height:calc(100vh - 150px);overflow:auto;scroll-behavior:smooth;display:flex;flex-direction:column;padding:0 6px;outline:none;flex:1}::ng-deep .mat-mdc-dialog-container [mat-dialog-content].mat-dialog-content{margin:0 -12px}\n"] }]
|
|
1582
|
-
}], ctorParameters:
|
|
1593
|
+
}], ctorParameters: () => [{ type: i1$2.MatDialogRef }], propDecorators: { title: [{
|
|
1583
1594
|
type: Input
|
|
1584
1595
|
}], draggable: [{
|
|
1585
1596
|
type: Input
|
|
@@ -1631,8 +1642,8 @@ class MessageBoxModalComponent {
|
|
|
1631
1642
|
this.close(b.id);
|
|
1632
1643
|
}
|
|
1633
1644
|
}
|
|
1634
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1635
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1645
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: MessageBoxModalComponent, deps: [{ token: i1$2.MatDialogRef }, { token: i1$1.DomSanitizer }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1646
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: MessageBoxModalComponent, selector: "ui-message-box-modal", ngImport: i0, template: `
|
|
1636
1647
|
<ui-dialog [title]="title" [hideCloseButton]="hideCloseButton">
|
|
1637
1648
|
<div mat-dialog-content *ngIf="message" style="padding: 7px 16px 12px 16px;">
|
|
1638
1649
|
<div [innerHTML]="message" style="line-height: 24px;"></div>
|
|
@@ -1651,9 +1662,9 @@ class MessageBoxModalComponent {
|
|
|
1651
1662
|
</div>
|
|
1652
1663
|
</div>
|
|
1653
1664
|
</ui-dialog>
|
|
1654
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.
|
|
1665
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["type", "matIconPrefix", "label", "disabled", "busy", "kind", "color", "size", "formInvalid"] }, { kind: "component", type: DialogComponent, selector: "ui-dialog", inputs: ["title", "draggable", "hideCloseButton", "close"] }] }); }
|
|
1655
1666
|
}
|
|
1656
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1667
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: MessageBoxModalComponent, decorators: [{
|
|
1657
1668
|
type: Component,
|
|
1658
1669
|
args: [{
|
|
1659
1670
|
selector: 'ui-message-box-modal',
|
|
@@ -1678,10 +1689,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImpo
|
|
|
1678
1689
|
</ui-dialog>
|
|
1679
1690
|
`
|
|
1680
1691
|
}]
|
|
1681
|
-
}], ctorParameters:
|
|
1692
|
+
}], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: i1$1.DomSanitizer }, { type: undefined, decorators: [{
|
|
1682
1693
|
type: Inject,
|
|
1683
1694
|
args: [MAT_DIALOG_DATA]
|
|
1684
|
-
}] }]
|
|
1695
|
+
}] }] });
|
|
1685
1696
|
class MessageBoxService {
|
|
1686
1697
|
constructor(dialog, translateService) {
|
|
1687
1698
|
this.dialog = dialog;
|
|
@@ -1716,18 +1727,18 @@ class MessageBoxService {
|
|
|
1716
1727
|
// @ts-ignore
|
|
1717
1728
|
return this.confirm(message, options);
|
|
1718
1729
|
}
|
|
1719
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1720
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1730
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: MessageBoxService, deps: [{ token: i1$2.MatDialog }, { token: UI_TRANSLATESERVICE }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1731
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: MessageBoxService, providedIn: 'root' }); }
|
|
1721
1732
|
}
|
|
1722
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1733
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: MessageBoxService, decorators: [{
|
|
1723
1734
|
type: Injectable,
|
|
1724
1735
|
args: [{
|
|
1725
1736
|
providedIn: 'root'
|
|
1726
1737
|
}]
|
|
1727
|
-
}], ctorParameters:
|
|
1738
|
+
}], ctorParameters: () => [{ type: i1$2.MatDialog }, { type: undefined, decorators: [{
|
|
1728
1739
|
type: Inject,
|
|
1729
1740
|
args: [UI_TRANSLATESERVICE]
|
|
1730
|
-
}] }]
|
|
1741
|
+
}] }] });
|
|
1731
1742
|
|
|
1732
1743
|
class CurrencyComponent extends UiBaseComponent {
|
|
1733
1744
|
// @HostBinding('class')
|
|
@@ -1823,8 +1834,8 @@ class CurrencyComponent extends UiBaseComponent {
|
|
|
1823
1834
|
writeValue(obj) {
|
|
1824
1835
|
this.formGroup.setValue(obj);
|
|
1825
1836
|
}
|
|
1826
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1827
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1837
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CurrencyComponent, deps: [{ token: i1.ControlContainer, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1838
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: CurrencyComponent, selector: "ui-currency", inputs: { currencies: "currencies", currencyDisabled: "currencyDisabled", formControlName: "formControlName", panelClass: "panelClass", amountHidden: "amountHidden" }, host: { properties: { "class.amount-hidden": "this.amountHidden", "class.focus": "this.hasFocus" } }, providers: [{
|
|
1828
1839
|
provide: NG_VALUE_ACCESSOR,
|
|
1829
1840
|
multi: true,
|
|
1830
1841
|
useExisting: CurrencyComponent
|
|
@@ -1835,7 +1846,7 @@ class CurrencyComponent extends UiBaseComponent {
|
|
|
1835
1846
|
}
|
|
1836
1847
|
], usesInheritance: true, ngImport: i0, template: "<ui-base-layout [ctx]=\"this\">\r\n\r\n<div class=\"control-container\" [formGroup]=\"formGroup\">\r\n <ui-input *ngIf=\"!amountHidden\" [textAlign]=\"'right'\" [formControlName]=\"'amount'\" [placeholder]=\"placeholder\" #input [useInputMessages]=\"'never'\" (focusChanged)=\"focusChanged($event)\"></ui-input>\r\n <ui-select [panelClass]=\"panelClass\" [formControlName]=\"'currency'\" [displayAttribute]=\"'symbol'\" [options]=\"currencies\" [useInputMessages]=\"'never'\"></ui-select>\r\n</div>\r\n\r\n</ui-base-layout>\r\n\r\n", styles: [":host{display:block}:host.amount-hidden ui-select{padding-left:.7em}:host .control-container{display:flex;border-style:solid}:host .control-container ui-input{flex:1 1 100%}:host .control-container ui-select{flex-grow:0;flex-shrink:1}:host ::ng-deep .mat-mdc-select-trigger{padding-left:.2em}:host ::ng-deep input{text-align:right;padding-right:.2em}:host ::ng-deep input,:host ::ng-deep .mat-mdc-select-trigger{border-width:0}:host.large ui-select{flex-basis:4.5em}:host.larger ui-select{flex-basis:5em}:host.normal ui-select{flex-basis:5.5em}:host.smaller ui-select{flex-basis:6em}:host.small ui-select{flex-basis:6em}:host.amount-hidden.large ui-select{flex-basis:5.2em}:host.amount-hidden.larger ui-select{flex-basis:4.7em}:host.amount-hidden.normal ui-select{flex-basis:4.2em}:host.amount-hidden.smaller ui-select{flex-basis:3.8em}:host.amount-hidden.smaller ui-select ::ng-deep .mat-mdc-select-trigger{width:3.2em}:host.amount-hidden.small ui-select{flex-basis:3.5em}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: InputComponent, selector: "ui-input", inputs: ["prefixIcon", "suffixIcon", "type", "clearButton", "activeIcons", "forceHasPrefix", "forceHasSuffix", "textAlign"], outputs: ["focusChanged", "keyPressed"] }, { kind: "component", type: SelectComponent, selector: "ui-select", inputs: ["multiple", "triggerFormatter", "valueAttribute", "resetText", "displayAttribute", "options", "optionFormatter", "optionTemplateRef", "triggerTemplateRef", "panelClass", "allowEmptySelection", "trackBy"] }, { kind: "component", type: UiBaseLayoutComponent, selector: "ui-base-layout", inputs: ["ctx"] }] }); }
|
|
1837
1848
|
}
|
|
1838
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1849
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CurrencyComponent, decorators: [{
|
|
1839
1850
|
type: Component,
|
|
1840
1851
|
args: [{ selector: 'ui-currency', providers: [{
|
|
1841
1852
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -1847,13 +1858,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImpo
|
|
|
1847
1858
|
useExisting: CurrencyComponent
|
|
1848
1859
|
}
|
|
1849
1860
|
], template: "<ui-base-layout [ctx]=\"this\">\r\n\r\n<div class=\"control-container\" [formGroup]=\"formGroup\">\r\n <ui-input *ngIf=\"!amountHidden\" [textAlign]=\"'right'\" [formControlName]=\"'amount'\" [placeholder]=\"placeholder\" #input [useInputMessages]=\"'never'\" (focusChanged)=\"focusChanged($event)\"></ui-input>\r\n <ui-select [panelClass]=\"panelClass\" [formControlName]=\"'currency'\" [displayAttribute]=\"'symbol'\" [options]=\"currencies\" [useInputMessages]=\"'never'\"></ui-select>\r\n</div>\r\n\r\n</ui-base-layout>\r\n\r\n", styles: [":host{display:block}:host.amount-hidden ui-select{padding-left:.7em}:host .control-container{display:flex;border-style:solid}:host .control-container ui-input{flex:1 1 100%}:host .control-container ui-select{flex-grow:0;flex-shrink:1}:host ::ng-deep .mat-mdc-select-trigger{padding-left:.2em}:host ::ng-deep input{text-align:right;padding-right:.2em}:host ::ng-deep input,:host ::ng-deep .mat-mdc-select-trigger{border-width:0}:host.large ui-select{flex-basis:4.5em}:host.larger ui-select{flex-basis:5em}:host.normal ui-select{flex-basis:5.5em}:host.smaller ui-select{flex-basis:6em}:host.small ui-select{flex-basis:6em}:host.amount-hidden.large ui-select{flex-basis:5.2em}:host.amount-hidden.larger ui-select{flex-basis:4.7em}:host.amount-hidden.normal ui-select{flex-basis:4.2em}:host.amount-hidden.smaller ui-select{flex-basis:3.8em}:host.amount-hidden.smaller ui-select ::ng-deep .mat-mdc-select-trigger{width:3.2em}:host.amount-hidden.small ui-select{flex-basis:3.5em}\n"] }]
|
|
1850
|
-
}], ctorParameters:
|
|
1861
|
+
}], ctorParameters: () => [{ type: i1.ControlContainer, decorators: [{
|
|
1851
1862
|
type: Optional
|
|
1852
1863
|
}, {
|
|
1853
1864
|
type: Host
|
|
1854
1865
|
}, {
|
|
1855
1866
|
type: SkipSelf
|
|
1856
|
-
}] }]
|
|
1867
|
+
}] }], propDecorators: { currencies: [{
|
|
1857
1868
|
type: Input
|
|
1858
1869
|
}], currencyDisabled: [{
|
|
1859
1870
|
type: Input
|
|
@@ -1887,17 +1898,17 @@ class CheckboxComponent extends UiSimpleComponent {
|
|
|
1887
1898
|
}
|
|
1888
1899
|
setDisabledState(isDisabled) {
|
|
1889
1900
|
}
|
|
1890
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1891
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1901
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CheckboxComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1902
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: CheckboxComponent, selector: "ui-checkbox", inputs: { color: "color", useInputMessages: "useInputMessages" }, usesInheritance: true, ngImport: i0, template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n <div class=\"control-container\">\r\n <mat-checkbox [formControl]=\"componentFormControl\" [color]=\"color\" [class]=\"size\">\r\n <div *ngIf=\"!text\"><ng-content></ng-content></div>\r\n <div *ngIf=\"text\" [innerHTML]=\"text\"></div>\r\n </mat-checkbox>\r\n <div *ngIf=\"hint\" class=\"hint\" [innerHTML]=\"hint\"></div>\r\n </div>\r\n</ui-simple-layout>\r\n", styles: [":host{display:flex}:host ::ng-deep .mat-checkbox{display:flex}:host ::ng-deep .hint{font-size:.8em;padding-top:.1em;padding-left:2.05em}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: UiSimpleLayoutComponent, selector: "ui-simple-layout", inputs: ["ctx"] }] }); }
|
|
1892
1903
|
}
|
|
1893
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1904
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
1894
1905
|
type: Component,
|
|
1895
1906
|
args: [{ selector: 'ui-checkbox', template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n <div class=\"control-container\">\r\n <mat-checkbox [formControl]=\"componentFormControl\" [color]=\"color\" [class]=\"size\">\r\n <div *ngIf=\"!text\"><ng-content></ng-content></div>\r\n <div *ngIf=\"text\" [innerHTML]=\"text\"></div>\r\n </mat-checkbox>\r\n <div *ngIf=\"hint\" class=\"hint\" [innerHTML]=\"hint\"></div>\r\n </div>\r\n</ui-simple-layout>\r\n", styles: [":host{display:flex}:host ::ng-deep .mat-checkbox{display:flex}:host ::ng-deep .hint{font-size:.8em;padding-top:.1em;padding-left:2.05em}\n"] }]
|
|
1896
|
-
}], ctorParameters:
|
|
1907
|
+
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
1897
1908
|
type: Optional
|
|
1898
1909
|
}, {
|
|
1899
1910
|
type: Self
|
|
1900
|
-
}] }]
|
|
1911
|
+
}] }], propDecorators: { color: [{
|
|
1901
1912
|
type: Input
|
|
1902
1913
|
}], useInputMessages: [{
|
|
1903
1914
|
type: Input
|
|
@@ -1916,13 +1927,13 @@ class AvatarComponent {
|
|
|
1916
1927
|
this.user = {};
|
|
1917
1928
|
this.size = 'normal';
|
|
1918
1929
|
}
|
|
1919
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1920
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1930
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1931
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: AvatarComponent, selector: "ui-avatar", inputs: { user: "user", srcOptions: "srcOptions", size: "size" }, host: { properties: { "class": "this.size" } }, ngImport: i0, template: "<ui-file *ngIf=\"user.avatar || (!user.avatar && !user.shortName)\" [fileSize]=\"'avatar-' + size\" [srcData]=\"user.avatar || { mimeType: 'image/png'}\" [srcOptions]=\"srcOptions\" ></ui-file>\r\n<div *ngIf=\"!user.avatar && user.shortName\" [ngStyle]=\"{backgroundColor: user.shortColour, color: contrast}\">\r\n {{ user.shortName }}\r\n</div>\r\n", styles: [":host{display:block;flex:0 0 auto}:host.mini{height:16px;width:16px}:host.mini div{font-size:10px}:host.small{height:24px;width:24px}:host.small div{font-size:13px}:host.smaller{height:50px;width:50px}:host.smaller div{font-size:1.5em}:host.normal{height:74px;width:74px}:host.normal div{font-size:37px}:host.bigger{height:100px;width:100px}:host.bigger div{font-size:50px}:host.big{height:150px;width:150px}:host.big div{font-size:75px}:host ui-file ::ng-deep img{border-radius:50%}:host div{display:flex;align-items:center;justify-content:center;width:100%;font-weight:700;color:#fff;background-size:cover;height:100%;border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: FileComponent, selector: "ui-file", inputs: ["fileSize", "srcOptions", "srcData", "srcUrl"] }] }); }
|
|
1921
1932
|
}
|
|
1922
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1933
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
1923
1934
|
type: Component,
|
|
1924
1935
|
args: [{ selector: 'ui-avatar', template: "<ui-file *ngIf=\"user.avatar || (!user.avatar && !user.shortName)\" [fileSize]=\"'avatar-' + size\" [srcData]=\"user.avatar || { mimeType: 'image/png'}\" [srcOptions]=\"srcOptions\" ></ui-file>\r\n<div *ngIf=\"!user.avatar && user.shortName\" [ngStyle]=\"{backgroundColor: user.shortColour, color: contrast}\">\r\n {{ user.shortName }}\r\n</div>\r\n", styles: [":host{display:block;flex:0 0 auto}:host.mini{height:16px;width:16px}:host.mini div{font-size:10px}:host.small{height:24px;width:24px}:host.small div{font-size:13px}:host.smaller{height:50px;width:50px}:host.smaller div{font-size:1.5em}:host.normal{height:74px;width:74px}:host.normal div{font-size:37px}:host.bigger{height:100px;width:100px}:host.bigger div{font-size:50px}:host.big{height:150px;width:150px}:host.big div{font-size:75px}:host ui-file ::ng-deep img{border-radius:50%}:host div{display:flex;align-items:center;justify-content:center;width:100%;font-weight:700;color:#fff;background-size:cover;height:100%;border-radius:50%}\n"] }]
|
|
1925
|
-
}], ctorParameters:
|
|
1936
|
+
}], ctorParameters: () => [], propDecorators: { user: [{
|
|
1926
1937
|
type: Input
|
|
1927
1938
|
}], srcOptions: [{
|
|
1928
1939
|
type: Input
|
|
@@ -1967,19 +1978,19 @@ class SubmitButtonComponent {
|
|
|
1967
1978
|
this.submit();
|
|
1968
1979
|
}
|
|
1969
1980
|
}
|
|
1970
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1971
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1981
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SubmitButtonComponent, deps: [{ token: i1$2.MatDialogRef }, { token: i1.ControlContainer, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1982
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SubmitButtonComponent, selector: "ui-submit-button", inputs: { busy: "busy", disabled: "disabled", formGroups: "formGroups", label: "label", submit: "submit", formInvalid: "formInvalid", prependCloseButton: "prependCloseButton" }, host: { properties: { "class.with-close": "this.prependCloseButton" } }, ngImport: i0, template: "<ui-button *ngIf=\"prependCloseButton\" [label]=\"'Close'\" (click)=\"dialogRef.close()\"></ui-button>\r\n\r\n<ui-button [busy]=\"busy\"\r\n [disabled]=\"disabled || busy\" [type]=\"'submit'\"\r\n [formInvalid]=\"!formsValid\"\r\n [label]=\"label\" (click)=\"doSubmit()\"></ui-button>\r\n", styles: [":host.with-close{display:flex;justify-content:flex-end;width:100%;margin-left:0!important}:host.with-close ui-button{margin-left:12px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["type", "matIconPrefix", "label", "disabled", "busy", "kind", "color", "size", "formInvalid"] }] }); }
|
|
1972
1983
|
}
|
|
1973
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1984
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SubmitButtonComponent, decorators: [{
|
|
1974
1985
|
type: Component,
|
|
1975
1986
|
args: [{ selector: 'ui-submit-button', template: "<ui-button *ngIf=\"prependCloseButton\" [label]=\"'Close'\" (click)=\"dialogRef.close()\"></ui-button>\r\n\r\n<ui-button [busy]=\"busy\"\r\n [disabled]=\"disabled || busy\" [type]=\"'submit'\"\r\n [formInvalid]=\"!formsValid\"\r\n [label]=\"label\" (click)=\"doSubmit()\"></ui-button>\r\n", styles: [":host.with-close{display:flex;justify-content:flex-end;width:100%;margin-left:0!important}:host.with-close ui-button{margin-left:12px}\n"] }]
|
|
1976
|
-
}], ctorParameters:
|
|
1987
|
+
}], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: i1.ControlContainer, decorators: [{
|
|
1977
1988
|
type: Optional
|
|
1978
1989
|
}, {
|
|
1979
1990
|
type: Host
|
|
1980
1991
|
}, {
|
|
1981
1992
|
type: SkipSelf
|
|
1982
|
-
}] }]
|
|
1993
|
+
}] }], propDecorators: { busy: [{
|
|
1983
1994
|
type: Input
|
|
1984
1995
|
}], disabled: [{
|
|
1985
1996
|
type: Input
|
|
@@ -2015,17 +2026,17 @@ class TextAreaComponent extends UiSimpleComponent {
|
|
|
2015
2026
|
onFocus(focus) {
|
|
2016
2027
|
this.focusChanged.emit(focus);
|
|
2017
2028
|
}
|
|
2018
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2019
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2029
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TextAreaComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2030
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TextAreaComponent, selector: "ui-text-area", inputs: { rows: "rows", autoResize: "autoResize" }, outputs: { focusChanged: "focusChanged" }, viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<div class=\"input-wrapper\">\r\n <ng-container *ngIf=\"componentFormControl\">\r\n <textarea *ngIf=\"autoResize \"#textarea matInput\r\n cdkTextareaAutosize cdkAutosizeMinRows=\"rows\"\r\n class=\"autoresize\"\r\n [formControl]=\"componentFormControl\" [placeholder]=\"placeholder\" [rows]=\"rows\" (focus)=\"onFocus(true)\" (blur)=\"onFocus(false)\"></textarea>\r\n <textarea *ngIf=\"!autoResize \"#textarea matInput\r\n [formControl]=\"componentFormControl\" [placeholder]=\"placeholder\" [rows]=\"rows\" (focus)=\"onFocus(true)\" (blur)=\"onFocus(false)\"></textarea>\r\n </ng-container>\r\n</div>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host .control-container{width:100%;position:relative}:host .control-container.has-prefix ::ng-deep input,:host .control-container.has-prefix ::ng-deep textarea,:host .control-container.has-prefix ::ng-deep .mat-mdc-select-trigger{padding-left:1.8em}:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep input,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep textarea,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep input,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep textarea,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-suffix.has-clear-icon ::ng-deep input,:host .control-container.has-suffix.has-clear-icon ::ng-deep textarea,:host .control-container.has-suffix.has-clear-icon ::ng-deep .mat-mdc-select-trigger{padding-right:3.6em}:host .control-container.has-suffix.has-clear-icon ::ng-deep .clear-icon{right:1.4em!important}:host ::ng-deep [slot=suffix],:host ::ng-deep .clear-icon,:host ::ng-deep .suffix-icon{position:absolute;-webkit-user-select:none;user-select:none;transition:color .25s;top:calc(50% - .5em);right:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=suffix]:not(.disabled),:host ::ng-deep .clear-icon:not(.disabled),:host ::ng-deep .suffix-icon:not(.disabled){cursor:pointer}:host ::ng-deep [slot=prefix],:host ::ng-deep .prefix-icon{position:absolute;-webkit-user-select:none;user-select:none;transition:color .25s;top:calc(50% - .5em);left:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=prefix]:not(.disabled),:host ::ng-deep .prefix-icon:not(.disabled){cursor:pointer}:host ::ng-deep input,:host ::ng-deep textarea,:host ::ng-deep .mat-mdc-select-trigger,:host ::ng-deep .editor-wrapper{resize:none;width:100%;line-height:1.2em;font-size:1em;outline:none;border-style:solid;transition:border-color 333ms}:host ::ng-deep textarea.autoresize{box-sizing:content-box;width:calc(100% - 1.4em)}:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{height:100%}:host ::ng-deep ::ng-deep .mat-select-value,:host ::ng-deep ::ng-deep .mat-mdc-select-value{vertical-align:middle}::ng-deep ui-input{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4$4.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: UiSimpleLayoutComponent, selector: "ui-simple-layout", inputs: ["ctx"] }] }); }
|
|
2020
2031
|
}
|
|
2021
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2032
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TextAreaComponent, decorators: [{
|
|
2022
2033
|
type: Component,
|
|
2023
|
-
args: [{ selector: 'ui-text-area', template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<div class=\"input-wrapper\">\r\n <ng-container *ngIf=\"componentFormControl\">\r\n <textarea *ngIf=\"autoResize \"#textarea matInput\r\n cdkTextareaAutosize cdkAutosizeMinRows=\"rows\"\r\n class=\"autoresize\"\r\n [formControl]=\"componentFormControl\" [placeholder]=\"placeholder\" [rows]=\"rows\" (focus)=\"onFocus(true)\" (blur)=\"onFocus(false)\"></textarea>\r\n <textarea *ngIf=\"!autoResize \"#textarea matInput\r\n [formControl]=\"componentFormControl\" [placeholder]=\"placeholder\" [rows]=\"rows\" (focus)=\"onFocus(true)\" (blur)=\"onFocus(false)\"></textarea>\r\n </ng-container>\r\n</div>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host .control-container{width:100%;position:relative}:host .control-container.has-prefix ::ng-deep input,:host .control-container.has-prefix ::ng-deep textarea,:host .control-container.has-prefix ::ng-deep .mat-mdc-select-trigger{padding-left:1.8em}:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep input,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep textarea,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep input,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep textarea,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-suffix.has-clear-icon ::ng-deep input,:host .control-container.has-suffix.has-clear-icon ::ng-deep textarea,:host .control-container.has-suffix.has-clear-icon ::ng-deep .mat-mdc-select-trigger{padding-right:3.6em}:host .control-container.has-suffix.has-clear-icon ::ng-deep .clear-icon{right:1.4em!important}:host ::ng-deep [slot=suffix],:host ::ng-deep .clear-icon,:host ::ng-deep .suffix-icon{position:absolute;user-select:none;transition:color .25s;top:calc(50% - .5em);right:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=suffix]:not(.disabled),:host ::ng-deep .clear-icon:not(.disabled),:host ::ng-deep .suffix-icon:not(.disabled){cursor:pointer}:host ::ng-deep [slot=prefix],:host ::ng-deep .prefix-icon{position:absolute;user-select:none;transition:color .25s;top:calc(50% - .5em);left:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=prefix]:not(.disabled),:host ::ng-deep .prefix-icon:not(.disabled){cursor:pointer}:host ::ng-deep input,:host ::ng-deep textarea,:host ::ng-deep .mat-mdc-select-trigger,:host ::ng-deep .editor-wrapper{resize:none;width:100%;line-height:1.2em;font-size:1em;outline:none;border-style:solid;transition:border-color 333ms}:host ::ng-deep textarea.autoresize{box-sizing:content-box;width:calc(100% - 1.4em)}:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{height:100%}:host ::ng-deep ::ng-deep .mat-select-value,:host ::ng-deep ::ng-deep .mat-mdc-select-value{vertical-align:middle}::ng-deep ui-input{display:block}\n"] }]
|
|
2024
|
-
}], ctorParameters:
|
|
2034
|
+
args: [{ selector: 'ui-text-area', template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<div class=\"input-wrapper\">\r\n <ng-container *ngIf=\"componentFormControl\">\r\n <textarea *ngIf=\"autoResize \"#textarea matInput\r\n cdkTextareaAutosize cdkAutosizeMinRows=\"rows\"\r\n class=\"autoresize\"\r\n [formControl]=\"componentFormControl\" [placeholder]=\"placeholder\" [rows]=\"rows\" (focus)=\"onFocus(true)\" (blur)=\"onFocus(false)\"></textarea>\r\n <textarea *ngIf=\"!autoResize \"#textarea matInput\r\n [formControl]=\"componentFormControl\" [placeholder]=\"placeholder\" [rows]=\"rows\" (focus)=\"onFocus(true)\" (blur)=\"onFocus(false)\"></textarea>\r\n </ng-container>\r\n</div>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host .control-container{width:100%;position:relative}:host .control-container.has-prefix ::ng-deep input,:host .control-container.has-prefix ::ng-deep textarea,:host .control-container.has-prefix ::ng-deep .mat-mdc-select-trigger{padding-left:1.8em}:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep input,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep textarea,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep input,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep textarea,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-suffix.has-clear-icon ::ng-deep input,:host .control-container.has-suffix.has-clear-icon ::ng-deep textarea,:host .control-container.has-suffix.has-clear-icon ::ng-deep .mat-mdc-select-trigger{padding-right:3.6em}:host .control-container.has-suffix.has-clear-icon ::ng-deep .clear-icon{right:1.4em!important}:host ::ng-deep [slot=suffix],:host ::ng-deep .clear-icon,:host ::ng-deep .suffix-icon{position:absolute;-webkit-user-select:none;user-select:none;transition:color .25s;top:calc(50% - .5em);right:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=suffix]:not(.disabled),:host ::ng-deep .clear-icon:not(.disabled),:host ::ng-deep .suffix-icon:not(.disabled){cursor:pointer}:host ::ng-deep [slot=prefix],:host ::ng-deep .prefix-icon{position:absolute;-webkit-user-select:none;user-select:none;transition:color .25s;top:calc(50% - .5em);left:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=prefix]:not(.disabled),:host ::ng-deep .prefix-icon:not(.disabled){cursor:pointer}:host ::ng-deep input,:host ::ng-deep textarea,:host ::ng-deep .mat-mdc-select-trigger,:host ::ng-deep .editor-wrapper{resize:none;width:100%;line-height:1.2em;font-size:1em;outline:none;border-style:solid;transition:border-color 333ms}:host ::ng-deep textarea.autoresize{box-sizing:content-box;width:calc(100% - 1.4em)}:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{height:100%}:host ::ng-deep ::ng-deep .mat-select-value,:host ::ng-deep ::ng-deep .mat-mdc-select-value{vertical-align:middle}::ng-deep ui-input{display:block}\n"] }]
|
|
2035
|
+
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
2025
2036
|
type: Optional
|
|
2026
2037
|
}, {
|
|
2027
2038
|
type: Self
|
|
2028
|
-
}] }]
|
|
2039
|
+
}] }], propDecorators: { rows: [{
|
|
2029
2040
|
type: Input
|
|
2030
2041
|
}], autoResize: [{
|
|
2031
2042
|
type: Input
|
|
@@ -2076,17 +2087,17 @@ class DateComponent extends UiSimpleComponent {
|
|
|
2076
2087
|
}
|
|
2077
2088
|
registerOnTouched(fn) { }
|
|
2078
2089
|
setDisabledState(isDisabled) { }
|
|
2079
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2080
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2090
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DateComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2091
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: DateComponent, selector: "ui-date", outputs: { doKeyup: "doKeyup" }, viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<div class=\"control-container has-suffix active-icons\" [ngClass]=\"{'has-focus': hasFocus}\">\r\n <input #input (blur)=\"close()\" (focus)=\"open()\" [matDatepicker]=\"picker\" [placeholder]=\"placeholder\" [formControl]=\"componentFormControl\" (keyup)=\"keyup()\">\r\n <mat-icon slot=\"suffix\" (click)=\"picker.open()\" [ngClass]=\"{disabled: componentFormControl.disabled}\">today</mat-icon>\r\n <mat-datepicker #picker></mat-datepicker>\r\n</div>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host .control-container{width:100%;position:relative}:host .control-container.has-prefix ::ng-deep input,:host .control-container.has-prefix ::ng-deep textarea,:host .control-container.has-prefix ::ng-deep .mat-mdc-select-trigger{padding-left:1.8em}:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep input,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep textarea,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep input,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep textarea,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-suffix.has-clear-icon ::ng-deep input,:host .control-container.has-suffix.has-clear-icon ::ng-deep textarea,:host .control-container.has-suffix.has-clear-icon ::ng-deep .mat-mdc-select-trigger{padding-right:3.6em}:host .control-container.has-suffix.has-clear-icon ::ng-deep .clear-icon{right:1.4em!important}:host ::ng-deep [slot=suffix],:host ::ng-deep .clear-icon,:host ::ng-deep .suffix-icon{position:absolute;-webkit-user-select:none;user-select:none;transition:color .25s;top:calc(50% - .5em);right:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=suffix]:not(.disabled),:host ::ng-deep .clear-icon:not(.disabled),:host ::ng-deep .suffix-icon:not(.disabled){cursor:pointer}:host ::ng-deep [slot=prefix],:host ::ng-deep .prefix-icon{position:absolute;-webkit-user-select:none;user-select:none;transition:color .25s;top:calc(50% - .5em);left:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=prefix]:not(.disabled),:host ::ng-deep .prefix-icon:not(.disabled){cursor:pointer}:host ::ng-deep input,:host ::ng-deep textarea,:host ::ng-deep .mat-mdc-select-trigger,:host ::ng-deep .editor-wrapper{resize:none;width:100%;line-height:1.2em;font-size:1em;outline:none;border-style:solid;transition:border-color 333ms}:host ::ng-deep textarea.autoresize{box-sizing:content-box;width:calc(100% - 1.4em)}:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{height:100%}:host ::ng-deep ::ng-deep .mat-select-value,:host ::ng-deep ::ng-deep .mat-mdc-select-value{vertical-align:middle}::ng-deep ui-input{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: UiSimpleLayoutComponent, selector: "ui-simple-layout", inputs: ["ctx"] }] }); }
|
|
2081
2092
|
}
|
|
2082
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2093
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DateComponent, decorators: [{
|
|
2083
2094
|
type: Component,
|
|
2084
|
-
args: [{ selector: 'ui-date', template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<div class=\"control-container has-suffix active-icons\" [ngClass]=\"{'has-focus': hasFocus}\">\r\n <input #input (blur)=\"close()\" (focus)=\"open()\" [matDatepicker]=\"picker\" [placeholder]=\"placeholder\" [formControl]=\"componentFormControl\" (keyup)=\"keyup()\">\r\n <mat-icon slot=\"suffix\" (click)=\"picker.open()\" [ngClass]=\"{disabled: componentFormControl.disabled}\">today</mat-icon>\r\n <mat-datepicker #picker></mat-datepicker>\r\n</div>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host .control-container{width:100%;position:relative}:host .control-container.has-prefix ::ng-deep input,:host .control-container.has-prefix ::ng-deep textarea,:host .control-container.has-prefix ::ng-deep .mat-mdc-select-trigger{padding-left:1.8em}:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep input,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep textarea,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep input,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep textarea,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-suffix.has-clear-icon ::ng-deep input,:host .control-container.has-suffix.has-clear-icon ::ng-deep textarea,:host .control-container.has-suffix.has-clear-icon ::ng-deep .mat-mdc-select-trigger{padding-right:3.6em}:host .control-container.has-suffix.has-clear-icon ::ng-deep .clear-icon{right:1.4em!important}:host ::ng-deep [slot=suffix],:host ::ng-deep .clear-icon,:host ::ng-deep .suffix-icon{position:absolute;user-select:none;transition:color .25s;top:calc(50% - .5em);right:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=suffix]:not(.disabled),:host ::ng-deep .clear-icon:not(.disabled),:host ::ng-deep .suffix-icon:not(.disabled){cursor:pointer}:host ::ng-deep [slot=prefix],:host ::ng-deep .prefix-icon{position:absolute;user-select:none;transition:color .25s;top:calc(50% - .5em);left:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=prefix]:not(.disabled),:host ::ng-deep .prefix-icon:not(.disabled){cursor:pointer}:host ::ng-deep input,:host ::ng-deep textarea,:host ::ng-deep .mat-mdc-select-trigger,:host ::ng-deep .editor-wrapper{resize:none;width:100%;line-height:1.2em;font-size:1em;outline:none;border-style:solid;transition:border-color 333ms}:host ::ng-deep textarea.autoresize{box-sizing:content-box;width:calc(100% - 1.4em)}:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{height:100%}:host ::ng-deep ::ng-deep .mat-select-value,:host ::ng-deep ::ng-deep .mat-mdc-select-value{vertical-align:middle}::ng-deep ui-input{display:block}\n"] }]
|
|
2085
|
-
}], ctorParameters:
|
|
2095
|
+
args: [{ selector: 'ui-date', template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<div class=\"control-container has-suffix active-icons\" [ngClass]=\"{'has-focus': hasFocus}\">\r\n <input #input (blur)=\"close()\" (focus)=\"open()\" [matDatepicker]=\"picker\" [placeholder]=\"placeholder\" [formControl]=\"componentFormControl\" (keyup)=\"keyup()\">\r\n <mat-icon slot=\"suffix\" (click)=\"picker.open()\" [ngClass]=\"{disabled: componentFormControl.disabled}\">today</mat-icon>\r\n <mat-datepicker #picker></mat-datepicker>\r\n</div>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host .control-container{width:100%;position:relative}:host .control-container.has-prefix ::ng-deep input,:host .control-container.has-prefix ::ng-deep textarea,:host .control-container.has-prefix ::ng-deep .mat-mdc-select-trigger{padding-left:1.8em}:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep input,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep textarea,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep input,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep textarea,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-suffix.has-clear-icon ::ng-deep input,:host .control-container.has-suffix.has-clear-icon ::ng-deep textarea,:host .control-container.has-suffix.has-clear-icon ::ng-deep .mat-mdc-select-trigger{padding-right:3.6em}:host .control-container.has-suffix.has-clear-icon ::ng-deep .clear-icon{right:1.4em!important}:host ::ng-deep [slot=suffix],:host ::ng-deep .clear-icon,:host ::ng-deep .suffix-icon{position:absolute;-webkit-user-select:none;user-select:none;transition:color .25s;top:calc(50% - .5em);right:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=suffix]:not(.disabled),:host ::ng-deep .clear-icon:not(.disabled),:host ::ng-deep .suffix-icon:not(.disabled){cursor:pointer}:host ::ng-deep [slot=prefix],:host ::ng-deep .prefix-icon{position:absolute;-webkit-user-select:none;user-select:none;transition:color .25s;top:calc(50% - .5em);left:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=prefix]:not(.disabled),:host ::ng-deep .prefix-icon:not(.disabled){cursor:pointer}:host ::ng-deep input,:host ::ng-deep textarea,:host ::ng-deep .mat-mdc-select-trigger,:host ::ng-deep .editor-wrapper{resize:none;width:100%;line-height:1.2em;font-size:1em;outline:none;border-style:solid;transition:border-color 333ms}:host ::ng-deep textarea.autoresize{box-sizing:content-box;width:calc(100% - 1.4em)}:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{height:100%}:host ::ng-deep ::ng-deep .mat-select-value,:host ::ng-deep ::ng-deep .mat-mdc-select-value{vertical-align:middle}::ng-deep ui-input{display:block}\n"] }]
|
|
2096
|
+
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
2086
2097
|
type: Optional
|
|
2087
2098
|
}, {
|
|
2088
2099
|
type: Self
|
|
2089
|
-
}] }]
|
|
2100
|
+
}] }], propDecorators: { doKeyup: [{
|
|
2090
2101
|
type: Output
|
|
2091
2102
|
}], picker: [{
|
|
2092
2103
|
type: ViewChild,
|
|
@@ -2157,13 +2168,13 @@ class TableComponent {
|
|
|
2157
2168
|
this.rowAction(row);
|
|
2158
2169
|
}
|
|
2159
2170
|
}
|
|
2160
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2161
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2171
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TableComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2172
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TableComponent, selector: "ui-table", inputs: { columns: "columns", dataSource: "dataSource", options: "options", rowTemplates: "rowTemplates", headerTemplates: "headerTemplates", stateStoreKey: "stateStoreKey", rowAction: "rowAction", matSortActive: "matSortActive", matSortDirection: "matSortDirection" }, viewQueries: [{ propertyName: "matSort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<table mat-table matSort [dataSource]=\"dataSource\" style=\"width: 100%\" [matSortActive]=\"matSortActive\" [matSortDirection]=\"matSortDirection\">\r\n\r\n <ng-container *ngFor=\"let c of columns\" [matColumnDef]=\"c.name\">\r\n\r\n <ng-container *ngIf=\"c.sortable\">\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header>{{c.label}}</th>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!c.sortable\">\r\n <ng-container *ngIf=\"!headerTemplates[c.name]\">\r\n <th mat-header-cell *matHeaderCellDef>{{c.label}}</th>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"headerTemplates[c.name]\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <ng-template [ngTemplateOutlet]=\"headerTemplates[c.name]\"></ng-template>\r\n </th>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <td mat-cell *matCellDef=\"let element\" [colSpan]=\"c.colSpan ? c.colSpan(element) : 1\" [class]=\"c.cellClass ? c.cellClass(element) : ''\">\r\n <ng-container *ngIf=\"!c.colSpan || c.colSpan(element) > 0\">\r\n <ng-container *ngIf=\"rowTemplates[c.name]\">\r\n <ng-template [ngTemplateOutlet]=\"rowTemplates[c.name]\" [ngTemplateOutletContext]=\"{row:element}\" ></ng-template>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!rowTemplates[c.name]\">\r\n <span [innerHTML]=\"display(element, c)\"></span>\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"columnList; sticky: options?.sticky\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: columnList;\" (click)=\"rowClicked(row)\"></tr>\r\n</table>\r\n", styles: [":host table{width:100%}:host td[colspan=\"0\"]{display:none}:host .mat-header-cell{font-weight:400;font-size:14px}:host.inverse .mat-header-row{background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i3$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i4$6.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4$6.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }] }); }
|
|
2162
2173
|
}
|
|
2163
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2174
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TableComponent, decorators: [{
|
|
2164
2175
|
type: Component,
|
|
2165
|
-
args: [{ selector: 'ui-table', template: "<table mat-table matSort [dataSource]=\"dataSource\" style=\"width: 100%\" [matSortActive]=\"matSortActive\" [matSortDirection]=\"matSortDirection\">\n\n <ng-container *ngFor=\"let c of columns\" [matColumnDef]=\"c.name\">\n\n <ng-container *ngIf=\"c.sortable\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header>{{c.label}}</th>\n </ng-container>\n\n <ng-container *ngIf=\"!c.sortable\">\n <ng-container *ngIf=\"!headerTemplates[c.name]\">\n <th mat-header-cell *matHeaderCellDef>{{c.label}}</th>\n </ng-container>\n\n <ng-container *ngIf=\"headerTemplates[c.name]\">\n <th mat-header-cell *matHeaderCellDef>\n <ng-template [ngTemplateOutlet]=\"headerTemplates[c.name]\"></ng-template>\n </th>\n </ng-container>\n </ng-container>\n\n <td mat-cell *matCellDef=\"let element\" [colSpan]=\"c.colSpan ? c.colSpan(element) : 1\" [class]=\"c.cellClass ? c.cellClass(element) : ''\">\n <ng-container *ngIf=\"!c.colSpan || c.colSpan(element) > 0\">\n <ng-container *ngIf=\"rowTemplates[c.name]\">\n <ng-template [ngTemplateOutlet]=\"rowTemplates[c.name]\" [ngTemplateOutletContext]=\"{row:element}\" ></ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"!rowTemplates[c.name]\">\n <span [innerHTML]=\"display(element, c)\"></span>\n </ng-container>\n </ng-container>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"columnList; sticky: options?.sticky\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: columnList;\" (click)=\"rowClicked(row)\"></tr>\n</table>\n", styles: [":host table{width:100%}:host td[colspan=\"0\"]{display:none}:host .mat-header-cell{font-weight:400;font-size:14px}:host.inverse .mat-header-row{background-color:#fff}\n"] }]
|
|
2166
|
-
}], ctorParameters:
|
|
2176
|
+
args: [{ selector: 'ui-table', template: "<table mat-table matSort [dataSource]=\"dataSource\" style=\"width: 100%\" [matSortActive]=\"matSortActive\" [matSortDirection]=\"matSortDirection\">\r\n\r\n <ng-container *ngFor=\"let c of columns\" [matColumnDef]=\"c.name\">\r\n\r\n <ng-container *ngIf=\"c.sortable\">\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header>{{c.label}}</th>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!c.sortable\">\r\n <ng-container *ngIf=\"!headerTemplates[c.name]\">\r\n <th mat-header-cell *matHeaderCellDef>{{c.label}}</th>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"headerTemplates[c.name]\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <ng-template [ngTemplateOutlet]=\"headerTemplates[c.name]\"></ng-template>\r\n </th>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <td mat-cell *matCellDef=\"let element\" [colSpan]=\"c.colSpan ? c.colSpan(element) : 1\" [class]=\"c.cellClass ? c.cellClass(element) : ''\">\r\n <ng-container *ngIf=\"!c.colSpan || c.colSpan(element) > 0\">\r\n <ng-container *ngIf=\"rowTemplates[c.name]\">\r\n <ng-template [ngTemplateOutlet]=\"rowTemplates[c.name]\" [ngTemplateOutletContext]=\"{row:element}\" ></ng-template>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!rowTemplates[c.name]\">\r\n <span [innerHTML]=\"display(element, c)\"></span>\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"columnList; sticky: options?.sticky\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: columnList;\" (click)=\"rowClicked(row)\"></tr>\r\n</table>\r\n", styles: [":host table{width:100%}:host td[colspan=\"0\"]{display:none}:host .mat-header-cell{font-weight:400;font-size:14px}:host.inverse .mat-header-row{background-color:#fff}\n"] }]
|
|
2177
|
+
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { columns: [{
|
|
2167
2178
|
type: Input
|
|
2168
2179
|
}], dataSource: [{
|
|
2169
2180
|
type: Input
|
|
@@ -2192,13 +2203,13 @@ class BurgerComponent {
|
|
|
2192
2203
|
}
|
|
2193
2204
|
ngOnInit() {
|
|
2194
2205
|
}
|
|
2195
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2196
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2206
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: BurgerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2207
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: BurgerComponent, selector: "ui-burger", inputs: { open: "open" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: " <span></span>\r\n <span></span>\r\n <span></span>\r\n <span></span>\r\n", styles: [":host{width:40px;height:35px;position:relative;margin:10px auto 0;transform:rotate(0);transition:.5s ease-in-out;cursor:pointer;display:block}:host span{display:block;position:absolute;height:4px;width:100%;border-radius:9px;opacity:1;left:0;transform:rotate(0);transition:.25s ease-in-out}:host span:nth-child(1){top:0}:host span:nth-child(2),:host span:nth-child(3){top:12px}:host span:nth-child(4){top:24px}:host.open span:nth-child(1){top:12px;width:0%;left:50%}:host.open span:nth-child(2){transform:rotate(45deg)}:host.open span:nth-child(3){transform:rotate(-45deg)}:host.open span:nth-child(4){top:18px;width:0;left:50%}\n"] }); }
|
|
2197
2208
|
}
|
|
2198
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2209
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: BurgerComponent, decorators: [{
|
|
2199
2210
|
type: Component,
|
|
2200
2211
|
args: [{ selector: 'ui-burger', template: " <span></span>\r\n <span></span>\r\n <span></span>\r\n <span></span>\r\n", styles: [":host{width:40px;height:35px;position:relative;margin:10px auto 0;transform:rotate(0);transition:.5s ease-in-out;cursor:pointer;display:block}:host span{display:block;position:absolute;height:4px;width:100%;border-radius:9px;opacity:1;left:0;transform:rotate(0);transition:.25s ease-in-out}:host span:nth-child(1){top:0}:host span:nth-child(2),:host span:nth-child(3){top:12px}:host span:nth-child(4){top:24px}:host.open span:nth-child(1){top:12px;width:0%;left:50%}:host.open span:nth-child(2){transform:rotate(45deg)}:host.open span:nth-child(3){transform:rotate(-45deg)}:host.open span:nth-child(4){top:18px;width:0;left:50%}\n"] }]
|
|
2201
|
-
}], ctorParameters:
|
|
2212
|
+
}], ctorParameters: () => [], propDecorators: { open: [{
|
|
2202
2213
|
type: HostBinding,
|
|
2203
2214
|
args: ['class.open']
|
|
2204
2215
|
}, {
|
|
@@ -2541,27 +2552,27 @@ class AutocompleteComponent extends UiBaseComponent {
|
|
|
2541
2552
|
this.filteredOptions = this.filterOptions('');
|
|
2542
2553
|
}
|
|
2543
2554
|
}
|
|
2544
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2545
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2555
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i1.ControlContainer, host: true, optional: true, skipSelf: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2556
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: AutocompleteComponent, selector: "ui-autocomplete", inputs: { options: "options", multiple: "multiple", allowNew: "allowNew", displayAttribute: "displayAttribute", idAttribute: "idAttribute", optionDisabled: "optionDisabled", optionFormatter: "optionFormatter" }, providers: [{
|
|
2546
2557
|
provide: NG_VALUE_ACCESSOR,
|
|
2547
2558
|
multi: true,
|
|
2548
2559
|
useExisting: AutocompleteComponent
|
|
2549
|
-
}], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "optionsTrigger", first: true, predicate: ["trigger"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"wrapper\" #wrapper>\r\n <div *ngIf=\"optionsVisible\" (click)=\"toggleDropdown()\" class=\"overlay\"></div>\r\n <ui-input [formControl]=\"inputControl\" #input #trigger=\"cdkOverlayOrigin\" cdkOverlayOrigin (focusChanged)=\"inputFocusChanged($event)\" (keyPressed)=\"keyPressed($event)\" [placeholder]=\"placeholder\" [useInputMessages]=\"'never'\">\r\n <div slot=\"prefix\"><ng-content select=\"[slot=acprefix]\"></ng-content></div>\r\n </ui-input>\r\n\r\n <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"optionsVisible\">\r\n <div class=\"options-box\" style=\"display: flex; flex-direction: column\" [ngStyle]=\"{width: wrapper.offsetWidth + 'px'}\">\r\n <div class=\"options\" #options>\r\n\r\n <ng-container *ngFor=\"let option of filteredOptions; index as i\">\r\n <div *ngIf=\"i < filteredMaxItemsShown\" class=\"option-container\" [ngClass]=\"{selected: focusedOption === option}\">\r\n <mat-checkbox [checked]=\"optionChecked(option) || option.unselectable\" [disabled]=\"option.unselectable\" (change)=\"toggleOptionCheckboxed(option)\">\r\n <div class=\"option-container-inner\" (click)=\"select(option)\">\r\n <div class=\"option-option\" uiForceVisibility [visibilityWithin]=\"options\" [visibilityPadding]=\"4\" *ngIf=\"focusedOption === option\" [ngClass]=\"{unselectable: option.unselectable}\">\r\n {{optionFormatter(option)}}\r\n </div>\r\n <div class=\"option-option\" *ngIf=\"focusedOption !== option\" [ngClass]=\"{unselectable: option.unselectable}\">\r\n {{optionFormatter(option)}}\r\n </div>\r\n <mat-icon *ngIf=\"!hasCheckboxSelected && !option.unselectable\">north_west</mat-icon>\r\n </div>\r\n </mat-checkbox>\r\n </div>\r\n </ng-container>\r\n\r\n <div *ngIf=\"filteredOptions.length >= filteredMaxItemsShown\" class=\"option-container\" uiForceVisibility [visibilityWithin]=\"options\" [visibilityEmitChange]=\"true\" (visibilityChanged)=\"loadMore($event)\">\r\n \r\n </div>\r\n\r\n\r\n <div *ngIf=\"filteredOptions.length === 0 && !focusedOption\" class=\"new-user\">\r\n <ng-container *ngIf=\"alreadyAdded\">\r\n <div style=\"text-align: center\">U\u017Eivatel {{inputControl.value}} u\u017E je mezi dlu\u017En\u00EDky</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!alreadyAdded\">\r\n <div style=\"text-align: center; padding: 1em 0\">U\u017Eivatele <strong>{{inputControl.value}}</strong> nezn\u00E1me</div>\r\n <ui-button *ngIf=\"allowNew\" style=\"margin-top: 6px;\" [size]=\"'small'\" [label]=\"'P\u0159idat jej?'\" (click)=\"newOption()\"></ui-button>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"filteredOptions.length === 0 && focusedOption\" class=\"new-user\">\r\n <div style=\"text-align: center\">Nezn\u00E1m\u00FD u\u017Eivatel {{inputControl.value}}</div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"hasCheckboxSelected && filteredOptions.length > 0\" class=\"checkbox-buttons\">\r\n <ui-button [size]=\"'small'\" [kind]=\"'basic'\" [label]=\"'Zru\u0161it v\u00FDb\u011Br'\" (click)=\"cancelCheckboxSelection()\"></ui-button>\r\n <ui-button [size]=\"'small'\" [label]=\"'Pou\u017E\u00EDt v\u00FDb\u011Br (' + checkboxSelection.size + ')'\" (click)=\"useCheckboxSelection()\"></ui-button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n</div>\r\n\r\n", styles: [":host .wrapper{position:relative;outline:none;display:flex}:host .overlay{position:fixed;inset:0}.options-box{max-height:248px;min-width:310px;box-shadow:0 2px 4px -1px #07254833,0 4px 5px #07254824,0 1px 10px #0725481f}.options-box .checkbox-buttons{display:flex;padding:8px 4px 4px;justify-content:space-between}.options-box .options{padding:4px;overflow:auto;scroll-behavior:smooth;display:flex;flex-direction:column}.options-box .options .option-container{padding:0 0 0 12px;display:flex;align-items:center}.options-box .options .option-container:hover{cursor:pointer}.options-box .options .option-container mat-checkbox{width:100%}.options-box .options .option-container mat-checkbox ::ng-deep .mdc-form-field{width:100%}.options-box .options .option-container mat-checkbox ::ng-deep .mdc-form-field label{display:flex;width:100%}.options-box .options .option-container-inner{flex:1 1 100%;display:flex;align-items:center}.options-box .options .option-container-inner .option-option{flex:1 1 100%;padding:10px 0 10px 8px}.options-box .options .option-container-inner mat-icon{display:none;font-size:20px;height:20px;margin-right:8px}.options-box .options .option-container-inner:hover mat-icon{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "
|
|
2560
|
+
}], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "optionsTrigger", first: true, predicate: ["trigger"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"wrapper\" #wrapper>\r\n <div *ngIf=\"optionsVisible\" (click)=\"toggleDropdown()\" class=\"overlay\"></div>\r\n <ui-input [formControl]=\"inputControl\" #input #trigger=\"cdkOverlayOrigin\" cdkOverlayOrigin (focusChanged)=\"inputFocusChanged($event)\" (keyPressed)=\"keyPressed($event)\" [placeholder]=\"placeholder\" [useInputMessages]=\"'never'\">\r\n <div slot=\"prefix\"><ng-content select=\"[slot=acprefix]\"></ng-content></div>\r\n </ui-input>\r\n\r\n <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"optionsVisible\">\r\n <div class=\"options-box\" style=\"display: flex; flex-direction: column\" [ngStyle]=\"{width: wrapper.offsetWidth + 'px'}\">\r\n <div class=\"options\" #options>\r\n\r\n <ng-container *ngFor=\"let option of filteredOptions; index as i\">\r\n <div *ngIf=\"i < filteredMaxItemsShown\" class=\"option-container\" [ngClass]=\"{selected: focusedOption === option}\">\r\n <mat-checkbox [checked]=\"optionChecked(option) || option.unselectable\" [disabled]=\"option.unselectable\" (change)=\"toggleOptionCheckboxed(option)\">\r\n <div class=\"option-container-inner\" (click)=\"select(option)\">\r\n <div class=\"option-option\" uiForceVisibility [visibilityWithin]=\"options\" [visibilityPadding]=\"4\" *ngIf=\"focusedOption === option\" [ngClass]=\"{unselectable: option.unselectable}\">\r\n {{optionFormatter(option)}}\r\n </div>\r\n <div class=\"option-option\" *ngIf=\"focusedOption !== option\" [ngClass]=\"{unselectable: option.unselectable}\">\r\n {{optionFormatter(option)}}\r\n </div>\r\n <mat-icon *ngIf=\"!hasCheckboxSelected && !option.unselectable\">north_west</mat-icon>\r\n </div>\r\n </mat-checkbox>\r\n </div>\r\n </ng-container>\r\n\r\n <div *ngIf=\"filteredOptions.length >= filteredMaxItemsShown\" class=\"option-container\" uiForceVisibility [visibilityWithin]=\"options\" [visibilityEmitChange]=\"true\" (visibilityChanged)=\"loadMore($event)\">\r\n \r\n </div>\r\n\r\n\r\n <div *ngIf=\"filteredOptions.length === 0 && !focusedOption\" class=\"new-user\">\r\n <ng-container *ngIf=\"alreadyAdded\">\r\n <div style=\"text-align: center\">U\u017Eivatel {{inputControl.value}} u\u017E je mezi dlu\u017En\u00EDky</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!alreadyAdded\">\r\n <div style=\"text-align: center; padding: 1em 0\">U\u017Eivatele <strong>{{inputControl.value}}</strong> nezn\u00E1me</div>\r\n <ui-button *ngIf=\"allowNew\" style=\"margin-top: 6px;\" [size]=\"'small'\" [label]=\"'P\u0159idat jej?'\" (click)=\"newOption()\"></ui-button>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"filteredOptions.length === 0 && focusedOption\" class=\"new-user\">\r\n <div style=\"text-align: center\">Nezn\u00E1m\u00FD u\u017Eivatel {{inputControl.value}}</div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"hasCheckboxSelected && filteredOptions.length > 0\" class=\"checkbox-buttons\">\r\n <ui-button [size]=\"'small'\" [kind]=\"'basic'\" [label]=\"'Zru\u0161it v\u00FDb\u011Br'\" (click)=\"cancelCheckboxSelection()\"></ui-button>\r\n <ui-button [size]=\"'small'\" [label]=\"'Pou\u017E\u00EDt v\u00FDb\u011Br (' + checkboxSelection.size + ')'\" (click)=\"useCheckboxSelection()\"></ui-button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n</div>\r\n\r\n", styles: [":host .wrapper{position:relative;outline:none;display:flex}:host .overlay{position:fixed;inset:0}.options-box{max-height:248px;min-width:310px;box-shadow:0 2px 4px -1px #07254833,0 4px 5px #07254824,0 1px 10px #0725481f}.options-box .checkbox-buttons{display:flex;padding:8px 4px 4px;justify-content:space-between}.options-box .options{padding:4px;overflow:auto;scroll-behavior:smooth;display:flex;flex-direction:column}.options-box .options .option-container{padding:0 0 0 12px;display:flex;align-items:center}.options-box .options .option-container:hover{cursor:pointer}.options-box .options .option-container mat-checkbox{width:100%}.options-box .options .option-container mat-checkbox ::ng-deep .mdc-form-field{width:100%}.options-box .options .option-container mat-checkbox ::ng-deep .mdc-form-field label{display:flex;width:100%}.options-box .options .option-container-inner{flex:1 1 100%;display:flex;align-items:center}.options-box .options .option-container-inner .option-option{flex:1 1 100%;padding:10px 0 10px 8px}.options-box .options .option-container-inner mat-icon{display:none;font-size:20px;height:20px;margin-right:8px}.options-box .options .option-container-inner:hover mat-icon{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i5.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["type", "matIconPrefix", "label", "disabled", "busy", "kind", "color", "size", "formInvalid"] }, { kind: "component", type: InputComponent, selector: "ui-input", inputs: ["prefixIcon", "suffixIcon", "type", "clearButton", "activeIcons", "forceHasPrefix", "forceHasSuffix", "textAlign"], outputs: ["focusChanged", "keyPressed"] }, { kind: "directive", type: ForceVisibilityDirective, selector: "[uiForceVisibility]", inputs: ["visibilityWithin", "visibilityPadding", "visibilityOnRequestOnly", "visibilityEmitChange", "visibilityFromTop", "visibilityCheckEnabled"], outputs: ["visibilityChanged"], exportAs: ["ForceVisibilityDirective"] }] }); }
|
|
2550
2561
|
}
|
|
2551
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2562
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
2552
2563
|
type: Component,
|
|
2553
2564
|
args: [{ selector: 'ui-autocomplete', providers: [{
|
|
2554
2565
|
provide: NG_VALUE_ACCESSOR,
|
|
2555
2566
|
multi: true,
|
|
2556
2567
|
useExisting: AutocompleteComponent
|
|
2557
2568
|
}], template: "<div class=\"wrapper\" #wrapper>\r\n <div *ngIf=\"optionsVisible\" (click)=\"toggleDropdown()\" class=\"overlay\"></div>\r\n <ui-input [formControl]=\"inputControl\" #input #trigger=\"cdkOverlayOrigin\" cdkOverlayOrigin (focusChanged)=\"inputFocusChanged($event)\" (keyPressed)=\"keyPressed($event)\" [placeholder]=\"placeholder\" [useInputMessages]=\"'never'\">\r\n <div slot=\"prefix\"><ng-content select=\"[slot=acprefix]\"></ng-content></div>\r\n </ui-input>\r\n\r\n <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"optionsVisible\">\r\n <div class=\"options-box\" style=\"display: flex; flex-direction: column\" [ngStyle]=\"{width: wrapper.offsetWidth + 'px'}\">\r\n <div class=\"options\" #options>\r\n\r\n <ng-container *ngFor=\"let option of filteredOptions; index as i\">\r\n <div *ngIf=\"i < filteredMaxItemsShown\" class=\"option-container\" [ngClass]=\"{selected: focusedOption === option}\">\r\n <mat-checkbox [checked]=\"optionChecked(option) || option.unselectable\" [disabled]=\"option.unselectable\" (change)=\"toggleOptionCheckboxed(option)\">\r\n <div class=\"option-container-inner\" (click)=\"select(option)\">\r\n <div class=\"option-option\" uiForceVisibility [visibilityWithin]=\"options\" [visibilityPadding]=\"4\" *ngIf=\"focusedOption === option\" [ngClass]=\"{unselectable: option.unselectable}\">\r\n {{optionFormatter(option)}}\r\n </div>\r\n <div class=\"option-option\" *ngIf=\"focusedOption !== option\" [ngClass]=\"{unselectable: option.unselectable}\">\r\n {{optionFormatter(option)}}\r\n </div>\r\n <mat-icon *ngIf=\"!hasCheckboxSelected && !option.unselectable\">north_west</mat-icon>\r\n </div>\r\n </mat-checkbox>\r\n </div>\r\n </ng-container>\r\n\r\n <div *ngIf=\"filteredOptions.length >= filteredMaxItemsShown\" class=\"option-container\" uiForceVisibility [visibilityWithin]=\"options\" [visibilityEmitChange]=\"true\" (visibilityChanged)=\"loadMore($event)\">\r\n \r\n </div>\r\n\r\n\r\n <div *ngIf=\"filteredOptions.length === 0 && !focusedOption\" class=\"new-user\">\r\n <ng-container *ngIf=\"alreadyAdded\">\r\n <div style=\"text-align: center\">U\u017Eivatel {{inputControl.value}} u\u017E je mezi dlu\u017En\u00EDky</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!alreadyAdded\">\r\n <div style=\"text-align: center; padding: 1em 0\">U\u017Eivatele <strong>{{inputControl.value}}</strong> nezn\u00E1me</div>\r\n <ui-button *ngIf=\"allowNew\" style=\"margin-top: 6px;\" [size]=\"'small'\" [label]=\"'P\u0159idat jej?'\" (click)=\"newOption()\"></ui-button>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"filteredOptions.length === 0 && focusedOption\" class=\"new-user\">\r\n <div style=\"text-align: center\">Nezn\u00E1m\u00FD u\u017Eivatel {{inputControl.value}}</div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"hasCheckboxSelected && filteredOptions.length > 0\" class=\"checkbox-buttons\">\r\n <ui-button [size]=\"'small'\" [kind]=\"'basic'\" [label]=\"'Zru\u0161it v\u00FDb\u011Br'\" (click)=\"cancelCheckboxSelection()\"></ui-button>\r\n <ui-button [size]=\"'small'\" [label]=\"'Pou\u017E\u00EDt v\u00FDb\u011Br (' + checkboxSelection.size + ')'\" (click)=\"useCheckboxSelection()\"></ui-button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n</div>\r\n\r\n", styles: [":host .wrapper{position:relative;outline:none;display:flex}:host .overlay{position:fixed;inset:0}.options-box{max-height:248px;min-width:310px;box-shadow:0 2px 4px -1px #07254833,0 4px 5px #07254824,0 1px 10px #0725481f}.options-box .checkbox-buttons{display:flex;padding:8px 4px 4px;justify-content:space-between}.options-box .options{padding:4px;overflow:auto;scroll-behavior:smooth;display:flex;flex-direction:column}.options-box .options .option-container{padding:0 0 0 12px;display:flex;align-items:center}.options-box .options .option-container:hover{cursor:pointer}.options-box .options .option-container mat-checkbox{width:100%}.options-box .options .option-container mat-checkbox ::ng-deep .mdc-form-field{width:100%}.options-box .options .option-container mat-checkbox ::ng-deep .mdc-form-field label{display:flex;width:100%}.options-box .options .option-container-inner{flex:1 1 100%;display:flex;align-items:center}.options-box .options .option-container-inner .option-option{flex:1 1 100%;padding:10px 0 10px 8px}.options-box .options .option-container-inner mat-icon{display:none;font-size:20px;height:20px;margin-right:8px}.options-box .options .option-container-inner:hover mat-icon{display:block}\n"] }]
|
|
2558
|
-
}], ctorParameters:
|
|
2569
|
+
}], ctorParameters: () => [{ type: i1.ControlContainer, decorators: [{
|
|
2559
2570
|
type: Optional
|
|
2560
2571
|
}, {
|
|
2561
2572
|
type: Host
|
|
2562
2573
|
}, {
|
|
2563
2574
|
type: SkipSelf
|
|
2564
|
-
}] }, { type: i0.ChangeDetectorRef }]
|
|
2575
|
+
}] }, { type: i0.ChangeDetectorRef }], propDecorators: { options: [{
|
|
2565
2576
|
type: Input
|
|
2566
2577
|
}], multiple: [{
|
|
2567
2578
|
type: Input
|
|
@@ -2644,10 +2655,10 @@ class ActionButtonComponent extends ButtonComponent {
|
|
|
2644
2655
|
$event.stopPropagation();
|
|
2645
2656
|
$event.preventDefault();
|
|
2646
2657
|
}
|
|
2647
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2648
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2658
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ActionButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2659
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: ActionButtonComponent, selector: "ui-action-button", inputs: { withPrimary: "withPrimary", overlayAlignment: "overlayAlignment", hasBackdrop: "hasBackdrop", triggerTpl: "triggerTpl", autoClose: "autoClose" }, outputs: { primaryClick: "primaryClick", overlayToggled: "overlayToggled" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" }, properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "trigger1", first: true, predicate: ["trigger1"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"triggerTpl\">\r\n <div style=\"display: flex;\" (click)=\"toggleOverlay(true)\" cdkOverlayOrigin #trigger1=\"cdkOverlayOrigin\">\r\n <ng-template [ngTemplateOutlet]=\"triggerTpl\"></ng-template>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"!triggerTpl && withPrimary\">\r\n <button matRipple [type]=\"type\" [disabled]=\"isDisabled || busy\" [ngClass]=\"{busy: busy, 'icon-hover': iconHover}\" [class]=\"class\" (click)=\"primaryClick.emit()\">\r\n <div class=\"hover-container\"></div>\r\n {{label}}\r\n <div class=\"mat-icon-container\" (mouseenter)=\"iconHover = true\" (mouseleave)=\"iconHover = false\" cdkOverlayOrigin #trigger1=\"cdkOverlayOrigin\" (click)=\"togglePrimaryOverlay(true, $event)\">\r\n \u25BC\r\n </div>\r\n <mat-progress-bar *ngIf=\"busy\" mode=\"indeterminate\" [color]=\"color\"></mat-progress-bar>\r\n </button>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"!triggerTpl && !withPrimary\">\r\n <button matRipple [type]=\"type\" [disabled]=\"isDisabled || busy\" [ngClass]=\"{busy: busy}\" [class]=\"class\" cdkOverlayOrigin #trigger1=\"cdkOverlayOrigin\" (click)=\"toggleOverlay(true)\">\r\n {{label}}\r\n <div class=\"mat-icon-container\">\r\n \u25BC\r\n </div>\r\n <mat-progress-bar *ngIf=\"busy\" mode=\"indeterminate\" [color]=\"color\"></mat-progress-bar>\r\n </button>\r\n</ng-container>\r\n\r\n<ng-template *ngIf=\"deferredRender\" cdkConnectedOverlay [cdkConnectedOverlayPositions]=\"positions\" [cdkConnectedOverlayOrigin]=\"trigger1\" [cdkConnectedOverlayOpen]=\"openOverlay\" [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop\" [cdkConnectedOverlayDisableClose]=\"!autoClose\" (overlayOutsideClick)=\"toggleOverlay(false)\">\r\n <ng-content></ng-content>\r\n</ng-template>\r\n", styles: [":host{display:flex;align-items:center}:host button{font-size:1em;width:100%;cursor:pointer;outline:none;position:relative;display:flex;align-items:center;justify-content:center;border:1px solid transparent;transition:all .15s ease-in-out}:host button mat-progress-bar{position:absolute;bottom:1px;height:2px;border-bottom-left-radius:10px;border-bottom-right-radius:10px}:host button mat-icon{margin-right:4px;height:16px;width:16px;font-size:16px}:host.small button mat-icon{width:14px;height:14px;font-size:14px;margin-right:2px}\n", ":host .mat-icon-container{margin-left:.25em}:host button{font-size:1em}:host.small.with-primary button{padding-right:2.9em!important}:host.small.with-primary button .mat-icon-container{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;border-left:1px solid transparent;padding-right:.6em;padding-left:.6em}:host.small.with-primary button .hover-container{position:absolute;inset:0 2.2em 0 0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i5.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i5.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i4.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }] }); }
|
|
2649
2660
|
}
|
|
2650
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2661
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ActionButtonComponent, decorators: [{
|
|
2651
2662
|
type: Component,
|
|
2652
2663
|
args: [{ selector: 'ui-action-button', template: "<ng-container *ngIf=\"triggerTpl\">\r\n <div style=\"display: flex;\" (click)=\"toggleOverlay(true)\" cdkOverlayOrigin #trigger1=\"cdkOverlayOrigin\">\r\n <ng-template [ngTemplateOutlet]=\"triggerTpl\"></ng-template>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"!triggerTpl && withPrimary\">\r\n <button matRipple [type]=\"type\" [disabled]=\"isDisabled || busy\" [ngClass]=\"{busy: busy, 'icon-hover': iconHover}\" [class]=\"class\" (click)=\"primaryClick.emit()\">\r\n <div class=\"hover-container\"></div>\r\n {{label}}\r\n <div class=\"mat-icon-container\" (mouseenter)=\"iconHover = true\" (mouseleave)=\"iconHover = false\" cdkOverlayOrigin #trigger1=\"cdkOverlayOrigin\" (click)=\"togglePrimaryOverlay(true, $event)\">\r\n \u25BC\r\n </div>\r\n <mat-progress-bar *ngIf=\"busy\" mode=\"indeterminate\" [color]=\"color\"></mat-progress-bar>\r\n </button>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"!triggerTpl && !withPrimary\">\r\n <button matRipple [type]=\"type\" [disabled]=\"isDisabled || busy\" [ngClass]=\"{busy: busy}\" [class]=\"class\" cdkOverlayOrigin #trigger1=\"cdkOverlayOrigin\" (click)=\"toggleOverlay(true)\">\r\n {{label}}\r\n <div class=\"mat-icon-container\">\r\n \u25BC\r\n </div>\r\n <mat-progress-bar *ngIf=\"busy\" mode=\"indeterminate\" [color]=\"color\"></mat-progress-bar>\r\n </button>\r\n</ng-container>\r\n\r\n<ng-template *ngIf=\"deferredRender\" cdkConnectedOverlay [cdkConnectedOverlayPositions]=\"positions\" [cdkConnectedOverlayOrigin]=\"trigger1\" [cdkConnectedOverlayOpen]=\"openOverlay\" [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop\" [cdkConnectedOverlayDisableClose]=\"!autoClose\" (overlayOutsideClick)=\"toggleOverlay(false)\">\r\n <ng-content></ng-content>\r\n</ng-template>\r\n", styles: [":host{display:flex;align-items:center}:host button{font-size:1em;width:100%;cursor:pointer;outline:none;position:relative;display:flex;align-items:center;justify-content:center;border:1px solid transparent;transition:all .15s ease-in-out}:host button mat-progress-bar{position:absolute;bottom:1px;height:2px;border-bottom-left-radius:10px;border-bottom-right-radius:10px}:host button mat-icon{margin-right:4px;height:16px;width:16px;font-size:16px}:host.small button mat-icon{width:14px;height:14px;font-size:14px;margin-right:2px}\n", ":host .mat-icon-container{margin-left:.25em}:host button{font-size:1em}:host.small.with-primary button{padding-right:2.9em!important}:host.small.with-primary button .mat-icon-container{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;border-left:1px solid transparent;padding-right:.6em;padding-left:.6em}:host.small.with-primary button .hover-container{position:absolute;inset:0 2.2em 0 0}\n"] }]
|
|
2653
2664
|
}], propDecorators: { withPrimary: [{
|
|
@@ -2679,10 +2690,10 @@ class RadioComponent {
|
|
|
2679
2690
|
constructor() {
|
|
2680
2691
|
this.color = 'primary';
|
|
2681
2692
|
}
|
|
2682
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2683
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2693
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2694
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: RadioComponent, selector: "ui-radio", inputs: { value: "value", label: "label", color: "color" }, ngImport: i0, template: "<mat-radio-button [value]=\"value\" [color]=\"color\">\r\n {{label}}\r\n</mat-radio-button>\r\n", styles: [""], dependencies: [{ kind: "component", type: i3$6.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }] }); }
|
|
2684
2695
|
}
|
|
2685
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2696
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: RadioComponent, decorators: [{
|
|
2686
2697
|
type: Component,
|
|
2687
2698
|
args: [{ selector: 'ui-radio', template: "<mat-radio-button [value]=\"value\" [color]=\"color\">\r\n {{label}}\r\n</mat-radio-button>\r\n" }]
|
|
2688
2699
|
}], propDecorators: { value: [{
|
|
@@ -2754,17 +2765,17 @@ class CheckboxGroupComponent extends UiSimpleComponent {
|
|
|
2754
2765
|
});
|
|
2755
2766
|
}
|
|
2756
2767
|
}
|
|
2757
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2758
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2768
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CheckboxGroupComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2769
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: CheckboxGroupComponent, selector: "ui-checkbox-group", inputs: { valueAttribute: "valueAttribute", displayAttribute: "displayAttribute", hintAttribute: "hintAttribute", options: "options", optionEnabled: "optionEnabled" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<ui-checkbox *ngFor=\"let cbx of cbxs\" [formControl]=\"cbx.control\" [label]=\"cbx.label\" [hint]=\"cbx.hint\"></ui-checkbox>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host ui-checkbox{margin-top:.2em;margin-bottom:.2em}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CheckboxComponent, selector: "ui-checkbox", inputs: ["color", "useInputMessages"] }, { kind: "component", type: UiSimpleLayoutComponent, selector: "ui-simple-layout", inputs: ["ctx"] }] }); }
|
|
2759
2770
|
}
|
|
2760
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2771
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CheckboxGroupComponent, decorators: [{
|
|
2761
2772
|
type: Component,
|
|
2762
2773
|
args: [{ selector: 'ui-checkbox-group', template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<ui-checkbox *ngFor=\"let cbx of cbxs\" [formControl]=\"cbx.control\" [label]=\"cbx.label\" [hint]=\"cbx.hint\"></ui-checkbox>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host ui-checkbox{margin-top:.2em;margin-bottom:.2em}\n"] }]
|
|
2763
|
-
}], ctorParameters:
|
|
2774
|
+
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
2764
2775
|
type: Optional
|
|
2765
2776
|
}, {
|
|
2766
2777
|
type: Self
|
|
2767
|
-
}] }]
|
|
2778
|
+
}] }], propDecorators: { valueAttribute: [{
|
|
2768
2779
|
type: Input
|
|
2769
2780
|
}], displayAttribute: [{
|
|
2770
2781
|
type: Input
|
|
@@ -2800,17 +2811,17 @@ class RadioGroupComponent extends UiSimpleComponent {
|
|
|
2800
2811
|
});
|
|
2801
2812
|
}
|
|
2802
2813
|
}
|
|
2803
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2804
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2814
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: RadioGroupComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2815
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: RadioGroupComponent, selector: "ui-radio-group", inputs: { options: "options", displayAttribute: "displayAttribute", valueAttribute: "valueAttribute", groupName: "groupName", optionEnabled: "optionEnabled" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n <mat-radio-group [formControl]=\"componentFormControl\" [name]=\"groupName\" [class]=\"size\">\r\n\r\n <mat-radio-button *ngFor=\"let cbx of cbxs\" [value]=\"cbx.value\" >{{cbx.label}}</mat-radio-button>\r\n\r\n </mat-radio-group>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host mat-radio-group{display:flex;flex-direction:column}:host mat-radio-button{margin-top:.2em;margin-bottom:.2em}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$6.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: UiSimpleLayoutComponent, selector: "ui-simple-layout", inputs: ["ctx"] }] }); }
|
|
2805
2816
|
}
|
|
2806
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2817
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: RadioGroupComponent, decorators: [{
|
|
2807
2818
|
type: Component,
|
|
2808
2819
|
args: [{ selector: 'ui-radio-group', template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n <mat-radio-group [formControl]=\"componentFormControl\" [name]=\"groupName\" [class]=\"size\">\r\n\r\n <mat-radio-button *ngFor=\"let cbx of cbxs\" [value]=\"cbx.value\" >{{cbx.label}}</mat-radio-button>\r\n\r\n </mat-radio-group>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host mat-radio-group{display:flex;flex-direction:column}:host mat-radio-button{margin-top:.2em;margin-bottom:.2em}\n"] }]
|
|
2809
|
-
}], ctorParameters:
|
|
2820
|
+
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
2810
2821
|
type: Optional
|
|
2811
2822
|
}, {
|
|
2812
2823
|
type: Self
|
|
2813
|
-
}] }]
|
|
2824
|
+
}] }], propDecorators: { options: [{
|
|
2814
2825
|
type: Input
|
|
2815
2826
|
}], displayAttribute: [{
|
|
2816
2827
|
type: Input
|
|
@@ -2913,17 +2924,17 @@ class EditorComponent extends UiSimpleComponent {
|
|
|
2913
2924
|
writeValue(obj) {
|
|
2914
2925
|
this.data = obj;
|
|
2915
2926
|
}
|
|
2916
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2917
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2927
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: EditorComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2928
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: EditorComponent, selector: "ui-editor", inputs: { rows: "rows", autoResize: "autoResize" }, host: { listeners: { "document:click": "clickout($event)" } }, usesInheritance: true, ngImport: i0, template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<div class=\"editor-wrapper\" [ngClass]=\"{focus: focused}\">\r\n <ng-container *ngIf=\"componentFormControl\">\r\n\r\n <p [id]=editorId></p>\r\n\r\n </ng-container>\r\n</div>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host .control-container{width:100%;position:relative}:host .control-container.has-prefix ::ng-deep input,:host .control-container.has-prefix ::ng-deep textarea,:host .control-container.has-prefix ::ng-deep .mat-mdc-select-trigger{padding-left:1.8em}:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep input,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep textarea,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep input,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep textarea,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-suffix.has-clear-icon ::ng-deep input,:host .control-container.has-suffix.has-clear-icon ::ng-deep textarea,:host .control-container.has-suffix.has-clear-icon ::ng-deep .mat-mdc-select-trigger{padding-right:3.6em}:host .control-container.has-suffix.has-clear-icon ::ng-deep .clear-icon{right:1.4em!important}:host ::ng-deep [slot=suffix],:host ::ng-deep .clear-icon,:host ::ng-deep .suffix-icon{position:absolute;-webkit-user-select:none;user-select:none;transition:color .25s;top:calc(50% - .5em);right:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=suffix]:not(.disabled),:host ::ng-deep .clear-icon:not(.disabled),:host ::ng-deep .suffix-icon:not(.disabled){cursor:pointer}:host ::ng-deep [slot=prefix],:host ::ng-deep .prefix-icon{position:absolute;-webkit-user-select:none;user-select:none;transition:color .25s;top:calc(50% - .5em);left:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=prefix]:not(.disabled),:host ::ng-deep .prefix-icon:not(.disabled){cursor:pointer}:host ::ng-deep input,:host ::ng-deep textarea,:host ::ng-deep .mat-mdc-select-trigger,:host ::ng-deep .editor-wrapper{resize:none;width:100%;line-height:1.2em;font-size:1em;outline:none;border-style:solid;transition:border-color 333ms}:host ::ng-deep textarea.autoresize{box-sizing:content-box;width:calc(100% - 1.4em)}:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{height:100%}:host ::ng-deep ::ng-deep .mat-select-value,:host ::ng-deep ::ng-deep .mat-mdc-select-value{vertical-align:middle}::ng-deep ui-input{display:block}\n", ".editor-wrapper{max-height:140px;min-height:140px;overflow-y:auto;overflow-x:hidden}.editor-wrapper.focus{max-height:unset}.editor-wrapper ::ng-deep .codex-editor__redactor{margin-right:0}.editor-wrapper ::ng-deep .ce-toolbar__actions{background-color:#fff;margin:0 4px;border-radius:6px;padding:3px;right:0}.editor-wrapper ::ng-deep .ce-toolbar__actions .ce-popover-item__icon{margin-right:0}.editor-wrapper ::ng-deep .ce-toolbar__actions .ce-popover--opened{width:unset;min-width:unset}.editor-wrapper ::ng-deep .ce-toolbar__actions .ce-popover--opened .ce-popover__items{display:flex}.editor-wrapper ::ng-deep .ce-popover--opened{margin-right:12px}.editor-wrapper ::ng-deep .cdx-search-field,.editor-wrapper ::ng-deep .ce-popover-item__title{display:none}.editor-wrapper ::ng-deep .ce-popover--open-top{top:calc(-1 * (var(--offset-from-target) + 48px))!important}.editor-wrapper ::ng-deep .ce-conversion-toolbar__tools{display:flex}.editor-wrapper ::ng-deep .ce-conversion-toolbar{width:210px}.editor-wrapper ::ng-deep h1.ce-header{font-size:1.3em;line-height:1.2em;margin:0 0 .4em;padding:0;letter-spacing:0;font-weight:700}.editor-wrapper ::ng-deep h2.ce-header{font-size:1.15em;line-height:1.1em;margin:0 0 .4em;padding:0;letter-spacing:0;font-weight:700}.editor-wrapper ::ng-deep .ce-paragraph{line-height:1.5em;font-size:1em;padding:0;margin:0 0 .5em}.editor-wrapper ::ng-deep .cdx-list{padding:0 0 0 2em;margin:0 0 .5em}.editor-wrapper ::ng-deep .cdx-list li{padding:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: UiSimpleLayoutComponent, selector: "ui-simple-layout", inputs: ["ctx"] }] }); }
|
|
2918
2929
|
}
|
|
2919
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2930
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: EditorComponent, decorators: [{
|
|
2920
2931
|
type: Component,
|
|
2921
|
-
args: [{ selector: 'ui-editor', template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<div class=\"editor-wrapper\" [ngClass]=\"{focus: focused}\">\r\n <ng-container *ngIf=\"componentFormControl\">\r\n\r\n <p [id]=editorId></p>\r\n\r\n </ng-container>\r\n</div>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host .control-container{width:100%;position:relative}:host .control-container.has-prefix ::ng-deep input,:host .control-container.has-prefix ::ng-deep textarea,:host .control-container.has-prefix ::ng-deep .mat-mdc-select-trigger{padding-left:1.8em}:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep input,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep textarea,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep input,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep textarea,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-suffix.has-clear-icon ::ng-deep input,:host .control-container.has-suffix.has-clear-icon ::ng-deep textarea,:host .control-container.has-suffix.has-clear-icon ::ng-deep .mat-mdc-select-trigger{padding-right:3.6em}:host .control-container.has-suffix.has-clear-icon ::ng-deep .clear-icon{right:1.4em!important}:host ::ng-deep [slot=suffix],:host ::ng-deep .clear-icon,:host ::ng-deep .suffix-icon{position:absolute;user-select:none;transition:color .25s;top:calc(50% - .5em);right:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=suffix]:not(.disabled),:host ::ng-deep .clear-icon:not(.disabled),:host ::ng-deep .suffix-icon:not(.disabled){cursor:pointer}:host ::ng-deep [slot=prefix],:host ::ng-deep .prefix-icon{position:absolute;user-select:none;transition:color .25s;top:calc(50% - .5em);left:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=prefix]:not(.disabled),:host ::ng-deep .prefix-icon:not(.disabled){cursor:pointer}:host ::ng-deep input,:host ::ng-deep textarea,:host ::ng-deep .mat-mdc-select-trigger,:host ::ng-deep .editor-wrapper{resize:none;width:100%;line-height:1.2em;font-size:1em;outline:none;border-style:solid;transition:border-color 333ms}:host ::ng-deep textarea.autoresize{box-sizing:content-box;width:calc(100% - 1.4em)}:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{height:100%}:host ::ng-deep ::ng-deep .mat-select-value,:host ::ng-deep ::ng-deep .mat-mdc-select-value{vertical-align:middle}::ng-deep ui-input{display:block}\n", ".editor-wrapper{max-height:140px;min-height:140px;overflow-y:auto;overflow-x:hidden}.editor-wrapper.focus{max-height:unset}.editor-wrapper ::ng-deep .codex-editor__redactor{margin-right:0}.editor-wrapper ::ng-deep .ce-toolbar__actions{background-color:#fff;margin:0 4px;border-radius:6px;padding:3px;right:0}.editor-wrapper ::ng-deep .ce-toolbar__actions .ce-popover-item__icon{margin-right:0}.editor-wrapper ::ng-deep .ce-toolbar__actions .ce-popover--opened{width:unset;min-width:unset}.editor-wrapper ::ng-deep .ce-toolbar__actions .ce-popover--opened .ce-popover__items{display:flex}.editor-wrapper ::ng-deep .ce-popover--opened{margin-right:12px}.editor-wrapper ::ng-deep .cdx-search-field,.editor-wrapper ::ng-deep .ce-popover-item__title{display:none}.editor-wrapper ::ng-deep .ce-popover--open-top{top:calc(-1 * (var(--offset-from-target) + 48px))!important}.editor-wrapper ::ng-deep .ce-conversion-toolbar__tools{display:flex}.editor-wrapper ::ng-deep .ce-conversion-toolbar{width:210px}.editor-wrapper ::ng-deep h1.ce-header{font-size:1.3em;line-height:1.2em;margin:0 0 .4em;padding:0;letter-spacing:0;font-weight:700}.editor-wrapper ::ng-deep h2.ce-header{font-size:1.15em;line-height:1.1em;margin:0 0 .4em;padding:0;letter-spacing:0;font-weight:700}.editor-wrapper ::ng-deep .ce-paragraph{line-height:1.5em;font-size:1em;padding:0;margin:0 0 .5em}.editor-wrapper ::ng-deep .cdx-list{padding:0 0 0 2em;margin:0 0 .5em}.editor-wrapper ::ng-deep .cdx-list li{padding:0}\n"] }]
|
|
2922
|
-
}], ctorParameters:
|
|
2932
|
+
args: [{ selector: 'ui-editor', template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<div class=\"editor-wrapper\" [ngClass]=\"{focus: focused}\">\r\n <ng-container *ngIf=\"componentFormControl\">\r\n\r\n <p [id]=editorId></p>\r\n\r\n </ng-container>\r\n</div>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host .control-container{width:100%;position:relative}:host .control-container.has-prefix ::ng-deep input,:host .control-container.has-prefix ::ng-deep textarea,:host .control-container.has-prefix ::ng-deep .mat-mdc-select-trigger{padding-left:1.8em}:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep input,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep textarea,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep input,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep textarea,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-suffix.has-clear-icon ::ng-deep input,:host .control-container.has-suffix.has-clear-icon ::ng-deep textarea,:host .control-container.has-suffix.has-clear-icon ::ng-deep .mat-mdc-select-trigger{padding-right:3.6em}:host .control-container.has-suffix.has-clear-icon ::ng-deep .clear-icon{right:1.4em!important}:host ::ng-deep [slot=suffix],:host ::ng-deep .clear-icon,:host ::ng-deep .suffix-icon{position:absolute;-webkit-user-select:none;user-select:none;transition:color .25s;top:calc(50% - .5em);right:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=suffix]:not(.disabled),:host ::ng-deep .clear-icon:not(.disabled),:host ::ng-deep .suffix-icon:not(.disabled){cursor:pointer}:host ::ng-deep [slot=prefix],:host ::ng-deep .prefix-icon{position:absolute;-webkit-user-select:none;user-select:none;transition:color .25s;top:calc(50% - .5em);left:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=prefix]:not(.disabled),:host ::ng-deep .prefix-icon:not(.disabled){cursor:pointer}:host ::ng-deep input,:host ::ng-deep textarea,:host ::ng-deep .mat-mdc-select-trigger,:host ::ng-deep .editor-wrapper{resize:none;width:100%;line-height:1.2em;font-size:1em;outline:none;border-style:solid;transition:border-color 333ms}:host ::ng-deep textarea.autoresize{box-sizing:content-box;width:calc(100% - 1.4em)}:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{height:100%}:host ::ng-deep ::ng-deep .mat-select-value,:host ::ng-deep ::ng-deep .mat-mdc-select-value{vertical-align:middle}::ng-deep ui-input{display:block}\n", ".editor-wrapper{max-height:140px;min-height:140px;overflow-y:auto;overflow-x:hidden}.editor-wrapper.focus{max-height:unset}.editor-wrapper ::ng-deep .codex-editor__redactor{margin-right:0}.editor-wrapper ::ng-deep .ce-toolbar__actions{background-color:#fff;margin:0 4px;border-radius:6px;padding:3px;right:0}.editor-wrapper ::ng-deep .ce-toolbar__actions .ce-popover-item__icon{margin-right:0}.editor-wrapper ::ng-deep .ce-toolbar__actions .ce-popover--opened{width:unset;min-width:unset}.editor-wrapper ::ng-deep .ce-toolbar__actions .ce-popover--opened .ce-popover__items{display:flex}.editor-wrapper ::ng-deep .ce-popover--opened{margin-right:12px}.editor-wrapper ::ng-deep .cdx-search-field,.editor-wrapper ::ng-deep .ce-popover-item__title{display:none}.editor-wrapper ::ng-deep .ce-popover--open-top{top:calc(-1 * (var(--offset-from-target) + 48px))!important}.editor-wrapper ::ng-deep .ce-conversion-toolbar__tools{display:flex}.editor-wrapper ::ng-deep .ce-conversion-toolbar{width:210px}.editor-wrapper ::ng-deep h1.ce-header{font-size:1.3em;line-height:1.2em;margin:0 0 .4em;padding:0;letter-spacing:0;font-weight:700}.editor-wrapper ::ng-deep h2.ce-header{font-size:1.15em;line-height:1.1em;margin:0 0 .4em;padding:0;letter-spacing:0;font-weight:700}.editor-wrapper ::ng-deep .ce-paragraph{line-height:1.5em;font-size:1em;padding:0;margin:0 0 .5em}.editor-wrapper ::ng-deep .cdx-list{padding:0 0 0 2em;margin:0 0 .5em}.editor-wrapper ::ng-deep .cdx-list li{padding:0}\n"] }]
|
|
2933
|
+
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
2923
2934
|
type: Optional
|
|
2924
2935
|
}, {
|
|
2925
2936
|
type: Self
|
|
2926
|
-
}] }, { type: i0.ElementRef }]
|
|
2937
|
+
}] }, { type: i0.ElementRef }], propDecorators: { rows: [{
|
|
2927
2938
|
type: Input
|
|
2928
2939
|
}], autoResize: [{
|
|
2929
2940
|
type: Input
|
|
@@ -3126,8 +3137,8 @@ class InputAutocompleteComponent extends UiSimpleComponent {
|
|
|
3126
3137
|
// console.log(this.componentFormControl.errors, control.errors, this.parentFormControl.errors, this);
|
|
3127
3138
|
// return this.componentFormControl.errors;
|
|
3128
3139
|
}
|
|
3129
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3130
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
3140
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: InputAutocompleteComponent, deps: [{ token: i1.ControlContainer, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3141
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: InputAutocompleteComponent, selector: "ui-input-autocomplete", inputs: { prefixIcon: "prefixIcon", suffixIcon: "suffixIcon", type: "type", clearButton: "clearButton", activeIcons: "activeIcons", forceHasPrefix: "forceHasPrefix", forceHasSuffix: "forceHasSuffix", options: "options", textAlign: "textAlign" }, outputs: { focusChanged: "focusChanged", keyPressed: "keyPressed" }, host: { properties: { "class": "this.textAlignClass" } }, providers: [
|
|
3131
3142
|
{
|
|
3132
3143
|
provide: NG_VALUE_ACCESSOR,
|
|
3133
3144
|
multi: true,
|
|
@@ -3138,9 +3149,9 @@ class InputAutocompleteComponent extends UiSimpleComponent {
|
|
|
3138
3149
|
multi: true,
|
|
3139
3150
|
useExisting: InputAutocompleteComponent
|
|
3140
3151
|
}
|
|
3141
|
-
], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "prefix", first: true, predicate: ["prefix"], descendants: true, static: true }, { propertyName: "suffix", first: true, predicate: ["suffix"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<div class=\"control-container\" [ngClass]=\"{'has-suffix': hasSuffix, 'has-prefix': hasPrefix, 'has-clear-icon': showClearButton, 'active-icons': activeIcons, 'has-focus': hasFocus}\">\r\n <input #input matInput [type]=\"type\" [formControl]=\"componentFormControl\" [placeholder]=\"placeholder\" (keydown)=\"onKeypressed($event)\" (focus)=\"onFocus(true)\" (blur)=\"onFocus(false)\" [matAutocomplete]=\"auto\"/>\r\n\r\n <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option\">{{option}}</mat-option>\r\n </mat-autocomplete>\r\n <div #prefix><ng-content select=\"[slot=prefix]\"></ng-content></div>\r\n <div #suffix><ng-content select=\"[slot=suffix]\"></ng-content></div>\r\n <mat-icon *ngIf=\"prefixIcon\" class=\"prefix-icon\" [matTooltip]=\"prefixIcon.tooltip\">{{ prefixIcon.icon }}</mat-icon>\r\n <mat-icon *ngIf=\"suffixIcon\" class=\"suffix-icon\" [matTooltip]=\"suffixIcon.tooltip\">{{ suffixIcon.icon }}</mat-icon>\r\n <ui-action-icon [size]=\"'small'\" [color]=\"'warn'\" *ngIf=\"showClearButton\" (click)=\"clearValue()\" [matIcon]=\"'clear'\" class=\"clear-icon\"></ui-action-icon>\r\n</div>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host .control-container{width:100%;position:relative}:host .control-container.has-prefix ::ng-deep input,:host .control-container.has-prefix ::ng-deep textarea,:host .control-container.has-prefix ::ng-deep .mat-mdc-select-trigger{padding-left:1.8em}:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep input,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep textarea,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep input,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep textarea,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-suffix.has-clear-icon ::ng-deep input,:host .control-container.has-suffix.has-clear-icon ::ng-deep textarea,:host .control-container.has-suffix.has-clear-icon ::ng-deep .mat-mdc-select-trigger{padding-right:3.6em}:host .control-container.has-suffix.has-clear-icon ::ng-deep .clear-icon{right:1.4em!important}:host ::ng-deep [slot=suffix],:host ::ng-deep .clear-icon,:host ::ng-deep .suffix-icon{position:absolute;user-select:none;transition:color .25s;top:calc(50% - .5em);right:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=suffix]:not(.disabled),:host ::ng-deep .clear-icon:not(.disabled),:host ::ng-deep .suffix-icon:not(.disabled){cursor:pointer}:host ::ng-deep [slot=prefix],:host ::ng-deep .prefix-icon{position:absolute;user-select:none;transition:color .25s;top:calc(50% - .5em);left:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=prefix]:not(.disabled),:host ::ng-deep .prefix-icon:not(.disabled){cursor:pointer}:host ::ng-deep input,:host ::ng-deep textarea,:host ::ng-deep .mat-mdc-select-trigger,:host ::ng-deep .editor-wrapper{resize:none;width:100%;line-height:1.2em;font-size:1em;outline:none;border-style:solid;transition:border-color 333ms}:host ::ng-deep textarea.autoresize{box-sizing:content-box;width:calc(100% - 1.4em)}:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{height:100%}:host ::ng-deep ::ng-deep .mat-select-value,:host ::ng-deep ::ng-deep .mat-mdc-select-value{vertical-align:middle}::ng-deep ui-input{display:block}\n", ":host.text-align-left ::ng-deep input{text-align:left}:host.text-align-right ::ng-deep input{text-align:right}:host.text-align-center ::ng-deep input{text-align:center}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i3$4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i7.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: UiSimpleLayoutComponent, selector: "ui-simple-layout", inputs: ["ctx"] }, { kind: "component", type: ActionIconComponent, selector: "ui-action-icon", inputs: ["size", "color", "disabled", "busy", "matIcon"] }] }); }
|
|
3152
|
+
], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "prefix", first: true, predicate: ["prefix"], descendants: true, static: true }, { propertyName: "suffix", first: true, predicate: ["suffix"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<div class=\"control-container\" [ngClass]=\"{'has-suffix': hasSuffix, 'has-prefix': hasPrefix, 'has-clear-icon': showClearButton, 'active-icons': activeIcons, 'has-focus': hasFocus}\">\r\n <input #input matInput [type]=\"type\" [formControl]=\"componentFormControl\" [placeholder]=\"placeholder\" (keydown)=\"onKeypressed($event)\" (focus)=\"onFocus(true)\" (blur)=\"onFocus(false)\" [matAutocomplete]=\"auto\"/>\r\n\r\n <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option\">{{option}}</mat-option>\r\n </mat-autocomplete>\r\n <div #prefix><ng-content select=\"[slot=prefix]\"></ng-content></div>\r\n <div #suffix><ng-content select=\"[slot=suffix]\"></ng-content></div>\r\n <mat-icon *ngIf=\"prefixIcon\" class=\"prefix-icon\" [matTooltip]=\"prefixIcon.tooltip\">{{ prefixIcon.icon }}</mat-icon>\r\n <mat-icon *ngIf=\"suffixIcon\" class=\"suffix-icon\" [matTooltip]=\"suffixIcon.tooltip\">{{ suffixIcon.icon }}</mat-icon>\r\n <ui-action-icon [size]=\"'small'\" [color]=\"'warn'\" *ngIf=\"showClearButton\" (click)=\"clearValue()\" [matIcon]=\"'clear'\" class=\"clear-icon\"></ui-action-icon>\r\n</div>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host .control-container{width:100%;position:relative}:host .control-container.has-prefix ::ng-deep input,:host .control-container.has-prefix ::ng-deep textarea,:host .control-container.has-prefix ::ng-deep .mat-mdc-select-trigger{padding-left:1.8em}:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep input,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep textarea,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep input,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep textarea,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-suffix.has-clear-icon ::ng-deep input,:host .control-container.has-suffix.has-clear-icon ::ng-deep textarea,:host .control-container.has-suffix.has-clear-icon ::ng-deep .mat-mdc-select-trigger{padding-right:3.6em}:host .control-container.has-suffix.has-clear-icon ::ng-deep .clear-icon{right:1.4em!important}:host ::ng-deep [slot=suffix],:host ::ng-deep .clear-icon,:host ::ng-deep .suffix-icon{position:absolute;-webkit-user-select:none;user-select:none;transition:color .25s;top:calc(50% - .5em);right:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=suffix]:not(.disabled),:host ::ng-deep .clear-icon:not(.disabled),:host ::ng-deep .suffix-icon:not(.disabled){cursor:pointer}:host ::ng-deep [slot=prefix],:host ::ng-deep .prefix-icon{position:absolute;-webkit-user-select:none;user-select:none;transition:color .25s;top:calc(50% - .5em);left:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=prefix]:not(.disabled),:host ::ng-deep .prefix-icon:not(.disabled){cursor:pointer}:host ::ng-deep input,:host ::ng-deep textarea,:host ::ng-deep .mat-mdc-select-trigger,:host ::ng-deep .editor-wrapper{resize:none;width:100%;line-height:1.2em;font-size:1em;outline:none;border-style:solid;transition:border-color 333ms}:host ::ng-deep textarea.autoresize{box-sizing:content-box;width:calc(100% - 1.4em)}:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{height:100%}:host ::ng-deep ::ng-deep .mat-select-value,:host ::ng-deep ::ng-deep .mat-mdc-select-value{vertical-align:middle}::ng-deep ui-input{display:block}\n", ":host.text-align-left ::ng-deep input{text-align:left}:host.text-align-right ::ng-deep input{text-align:right}:host.text-align-center ::ng-deep input{text-align:center}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i7.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: UiSimpleLayoutComponent, selector: "ui-simple-layout", inputs: ["ctx"] }, { kind: "component", type: ActionIconComponent, selector: "ui-action-icon", inputs: ["size", "color", "disabled", "busy", "matIcon"] }] }); }
|
|
3142
3153
|
}
|
|
3143
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3154
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: InputAutocompleteComponent, decorators: [{
|
|
3144
3155
|
type: Component,
|
|
3145
3156
|
args: [{ selector: 'ui-input-autocomplete', providers: [
|
|
3146
3157
|
{
|
|
@@ -3153,14 +3164,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImpo
|
|
|
3153
3164
|
multi: true,
|
|
3154
3165
|
useExisting: InputAutocompleteComponent
|
|
3155
3166
|
}
|
|
3156
|
-
], template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<div class=\"control-container\" [ngClass]=\"{'has-suffix': hasSuffix, 'has-prefix': hasPrefix, 'has-clear-icon': showClearButton, 'active-icons': activeIcons, 'has-focus': hasFocus}\">\r\n <input #input matInput [type]=\"type\" [formControl]=\"componentFormControl\" [placeholder]=\"placeholder\" (keydown)=\"onKeypressed($event)\" (focus)=\"onFocus(true)\" (blur)=\"onFocus(false)\" [matAutocomplete]=\"auto\"/>\r\n\r\n <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option\">{{option}}</mat-option>\r\n </mat-autocomplete>\r\n <div #prefix><ng-content select=\"[slot=prefix]\"></ng-content></div>\r\n <div #suffix><ng-content select=\"[slot=suffix]\"></ng-content></div>\r\n <mat-icon *ngIf=\"prefixIcon\" class=\"prefix-icon\" [matTooltip]=\"prefixIcon.tooltip\">{{ prefixIcon.icon }}</mat-icon>\r\n <mat-icon *ngIf=\"suffixIcon\" class=\"suffix-icon\" [matTooltip]=\"suffixIcon.tooltip\">{{ suffixIcon.icon }}</mat-icon>\r\n <ui-action-icon [size]=\"'small'\" [color]=\"'warn'\" *ngIf=\"showClearButton\" (click)=\"clearValue()\" [matIcon]=\"'clear'\" class=\"clear-icon\"></ui-action-icon>\r\n</div>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host .control-container{width:100%;position:relative}:host .control-container.has-prefix ::ng-deep input,:host .control-container.has-prefix ::ng-deep textarea,:host .control-container.has-prefix ::ng-deep .mat-mdc-select-trigger{padding-left:1.8em}:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep input,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep textarea,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep input,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep textarea,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-suffix.has-clear-icon ::ng-deep input,:host .control-container.has-suffix.has-clear-icon ::ng-deep textarea,:host .control-container.has-suffix.has-clear-icon ::ng-deep .mat-mdc-select-trigger{padding-right:3.6em}:host .control-container.has-suffix.has-clear-icon ::ng-deep .clear-icon{right:1.4em!important}:host ::ng-deep [slot=suffix],:host ::ng-deep .clear-icon,:host ::ng-deep .suffix-icon{position:absolute;user-select:none;transition:color .25s;top:calc(50% - .5em);right:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=suffix]:not(.disabled),:host ::ng-deep .clear-icon:not(.disabled),:host ::ng-deep .suffix-icon:not(.disabled){cursor:pointer}:host ::ng-deep [slot=prefix],:host ::ng-deep .prefix-icon{position:absolute;user-select:none;transition:color .25s;top:calc(50% - .5em);left:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=prefix]:not(.disabled),:host ::ng-deep .prefix-icon:not(.disabled){cursor:pointer}:host ::ng-deep input,:host ::ng-deep textarea,:host ::ng-deep .mat-mdc-select-trigger,:host ::ng-deep .editor-wrapper{resize:none;width:100%;line-height:1.2em;font-size:1em;outline:none;border-style:solid;transition:border-color 333ms}:host ::ng-deep textarea.autoresize{box-sizing:content-box;width:calc(100% - 1.4em)}:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{height:100%}:host ::ng-deep ::ng-deep .mat-select-value,:host ::ng-deep ::ng-deep .mat-mdc-select-value{vertical-align:middle}::ng-deep ui-input{display:block}\n", ":host.text-align-left ::ng-deep input{text-align:left}:host.text-align-right ::ng-deep input{text-align:right}:host.text-align-center ::ng-deep input{text-align:center}\n"] }]
|
|
3157
|
-
}], ctorParameters:
|
|
3167
|
+
], template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<div class=\"control-container\" [ngClass]=\"{'has-suffix': hasSuffix, 'has-prefix': hasPrefix, 'has-clear-icon': showClearButton, 'active-icons': activeIcons, 'has-focus': hasFocus}\">\r\n <input #input matInput [type]=\"type\" [formControl]=\"componentFormControl\" [placeholder]=\"placeholder\" (keydown)=\"onKeypressed($event)\" (focus)=\"onFocus(true)\" (blur)=\"onFocus(false)\" [matAutocomplete]=\"auto\"/>\r\n\r\n <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option\">{{option}}</mat-option>\r\n </mat-autocomplete>\r\n <div #prefix><ng-content select=\"[slot=prefix]\"></ng-content></div>\r\n <div #suffix><ng-content select=\"[slot=suffix]\"></ng-content></div>\r\n <mat-icon *ngIf=\"prefixIcon\" class=\"prefix-icon\" [matTooltip]=\"prefixIcon.tooltip\">{{ prefixIcon.icon }}</mat-icon>\r\n <mat-icon *ngIf=\"suffixIcon\" class=\"suffix-icon\" [matTooltip]=\"suffixIcon.tooltip\">{{ suffixIcon.icon }}</mat-icon>\r\n <ui-action-icon [size]=\"'small'\" [color]=\"'warn'\" *ngIf=\"showClearButton\" (click)=\"clearValue()\" [matIcon]=\"'clear'\" class=\"clear-icon\"></ui-action-icon>\r\n</div>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host .control-container{width:100%;position:relative}:host .control-container.has-prefix ::ng-deep input,:host .control-container.has-prefix ::ng-deep textarea,:host .control-container.has-prefix ::ng-deep .mat-mdc-select-trigger{padding-left:1.8em}:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep input,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep textarea,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep input,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep textarea,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-suffix.has-clear-icon ::ng-deep input,:host .control-container.has-suffix.has-clear-icon ::ng-deep textarea,:host .control-container.has-suffix.has-clear-icon ::ng-deep .mat-mdc-select-trigger{padding-right:3.6em}:host .control-container.has-suffix.has-clear-icon ::ng-deep .clear-icon{right:1.4em!important}:host ::ng-deep [slot=suffix],:host ::ng-deep .clear-icon,:host ::ng-deep .suffix-icon{position:absolute;-webkit-user-select:none;user-select:none;transition:color .25s;top:calc(50% - .5em);right:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=suffix]:not(.disabled),:host ::ng-deep .clear-icon:not(.disabled),:host ::ng-deep .suffix-icon:not(.disabled){cursor:pointer}:host ::ng-deep [slot=prefix],:host ::ng-deep .prefix-icon{position:absolute;-webkit-user-select:none;user-select:none;transition:color .25s;top:calc(50% - .5em);left:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=prefix]:not(.disabled),:host ::ng-deep .prefix-icon:not(.disabled){cursor:pointer}:host ::ng-deep input,:host ::ng-deep textarea,:host ::ng-deep .mat-mdc-select-trigger,:host ::ng-deep .editor-wrapper{resize:none;width:100%;line-height:1.2em;font-size:1em;outline:none;border-style:solid;transition:border-color 333ms}:host ::ng-deep textarea.autoresize{box-sizing:content-box;width:calc(100% - 1.4em)}:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{height:100%}:host ::ng-deep ::ng-deep .mat-select-value,:host ::ng-deep ::ng-deep .mat-mdc-select-value{vertical-align:middle}::ng-deep ui-input{display:block}\n", ":host.text-align-left ::ng-deep input{text-align:left}:host.text-align-right ::ng-deep input{text-align:right}:host.text-align-center ::ng-deep input{text-align:center}\n"] }]
|
|
3168
|
+
}], ctorParameters: () => [{ type: i1.ControlContainer, decorators: [{
|
|
3158
3169
|
type: Optional
|
|
3159
3170
|
}, {
|
|
3160
3171
|
type: Host
|
|
3161
3172
|
}, {
|
|
3162
3173
|
type: SkipSelf
|
|
3163
|
-
}] }]
|
|
3174
|
+
}] }], propDecorators: { prefixIcon: [{
|
|
3164
3175
|
type: Input
|
|
3165
3176
|
}], suffixIcon: [{
|
|
3166
3177
|
type: Input
|
|
@@ -3197,8 +3208,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImpo
|
|
|
3197
3208
|
}] } });
|
|
3198
3209
|
|
|
3199
3210
|
class UiModule {
|
|
3200
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3201
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
3211
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: UiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
3212
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: UiModule, declarations: [ButtonComponent,
|
|
3202
3213
|
InputComponent,
|
|
3203
3214
|
InputAutocompleteComponent,
|
|
3204
3215
|
SelectComponent,
|
|
@@ -3275,7 +3286,7 @@ class UiModule {
|
|
|
3275
3286
|
TextAreaComponent,
|
|
3276
3287
|
UiFileUploaderComponent,
|
|
3277
3288
|
EditorComponent] }); }
|
|
3278
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
3289
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: UiModule, providers: [
|
|
3279
3290
|
UiFileService,
|
|
3280
3291
|
{ provide: UI_TRANSLATESERVICE, useClass: UiTranslateService },
|
|
3281
3292
|
{ provide: MAT_DATE_LOCALE, useValue: 'cs-CZ' },
|
|
@@ -3309,7 +3320,7 @@ class UiModule {
|
|
|
3309
3320
|
MatSnackBarModule,
|
|
3310
3321
|
MatAutocompleteModule] }); }
|
|
3311
3322
|
}
|
|
3312
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3323
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: UiModule, decorators: [{
|
|
3313
3324
|
type: NgModule,
|
|
3314
3325
|
args: [{
|
|
3315
3326
|
declarations: [
|
|
@@ -3418,15 +3429,15 @@ class ToastService {
|
|
|
3418
3429
|
panelClass: [options.type || 'message']
|
|
3419
3430
|
});
|
|
3420
3431
|
}
|
|
3421
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3422
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
3432
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ToastService, deps: [{ token: i1$3.MatSnackBar }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3433
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ToastService, providedIn: 'root' }); }
|
|
3423
3434
|
}
|
|
3424
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3435
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ToastService, decorators: [{
|
|
3425
3436
|
type: Injectable,
|
|
3426
3437
|
args: [{
|
|
3427
3438
|
providedIn: 'root'
|
|
3428
3439
|
}]
|
|
3429
|
-
}], ctorParameters:
|
|
3440
|
+
}], ctorParameters: () => [{ type: i1$3.MatSnackBar }] });
|
|
3430
3441
|
|
|
3431
3442
|
/*
|
|
3432
3443
|
* Public API Surface of ui
|