ui-core-abv 0.6.31 → 0.6.35
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/fesm2022/ui-core-abv.mjs +585 -81
- package/fesm2022/ui-core-abv.mjs.map +1 -1
- package/lib/components/dynamic-form/form.models.d.ts +2 -0
- package/lib/components/inputs/select/select.component.d.ts +11 -1
- package/lib/components/rule-builder/rule-builder.component.d.ts +45 -4
- package/lib/components/rule-builder/rule-definirion/rule-definirion.component.d.ts +43 -0
- package/lib/components/work-panel/work-panel.component.d.ts +2 -0
- package/lib/translate/dictionary.en.d.ts +29 -1
- package/lib/translate/dictionary.es.d.ts +29 -1
- package/package.json +1 -1
package/fesm2022/ui-core-abv.mjs
CHANGED
|
@@ -105,11 +105,11 @@ class InputWrapperComponent {
|
|
|
105
105
|
tip = '';
|
|
106
106
|
disabled = false;
|
|
107
107
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InputWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
108
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: InputWrapperComponent, isStandalone: true, selector: "ui-input-wrapper", inputs: { icon: "icon", iconColor: "iconColor", label: "label", error: "error", tip: "tip", disabled: "disabled" }, ngImport: i0, template: "<div class=\"input-wrapper\">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n \r\n @if (label) {\r\n <div class=\"label inputlabel\" [class.font-error]=\"error\">\r\n {{label!='_'?label:''}} \r\n </div>\r\n }\r\n <ng-content></ng-content>\r\n @if (error) {\r\n <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n }\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
108
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: InputWrapperComponent, isStandalone: true, selector: "ui-input-wrapper", inputs: { icon: "icon", iconColor: "iconColor", label: "label", error: "error", tip: "tip", disabled: "disabled" }, ngImport: i0, template: "<div class=\"input-wrapper\">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n \r\n @if (label) {\r\n <div class=\"label inputlabel\" [class.font-error]=\"error\">\r\n {{label!='_'?label:''}} \r\n </div>\r\n }\r\n <ng-content></ng-content>\r\n @if (error) {\r\n <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n }\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
109
109
|
}
|
|
110
110
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InputWrapperComponent, decorators: [{
|
|
111
111
|
type: Component,
|
|
112
|
-
args: [{ selector: 'ui-input-wrapper', imports: [CommonModule], template: "<div class=\"input-wrapper\">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n \r\n @if (label) {\r\n <div class=\"label inputlabel\" [class.font-error]=\"error\">\r\n {{label!='_'?label:''}} \r\n </div>\r\n }\r\n <ng-content></ng-content>\r\n @if (error) {\r\n <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n }\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
|
|
112
|
+
args: [{ selector: 'ui-input-wrapper', imports: [CommonModule], template: "<div class=\"input-wrapper\">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n \r\n @if (label) {\r\n <div class=\"label inputlabel\" [class.font-error]=\"error\">\r\n {{label!='_'?label:''}} \r\n </div>\r\n }\r\n <ng-content></ng-content>\r\n @if (error) {\r\n <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n }\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
|
|
113
113
|
}], propDecorators: { icon: [{
|
|
114
114
|
type: Input
|
|
115
115
|
}], iconColor: [{
|
|
@@ -147,7 +147,7 @@ class UicCheckboxComponent extends base$c {
|
|
|
147
147
|
useExisting: forwardRef(() => UicCheckboxComponent),
|
|
148
148
|
multi: true
|
|
149
149
|
}
|
|
150
|
-
], usesInheritance: true, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\"\r\n>\r\n <div [class.check-form-container]=\"!noPadding\">\r\n <div (click)=\"toggle()\" class=\"check-wrapper\">\r\n @if (type=='checkbox') {\r\n <button\r\n type=\"button\"\r\n class=\"checkbox\"\r\n [disabled]=\"disabled\"\r\n [class.checked]=\"value\"\r\n [class.placeholder-space]=\"placeholder!=''\"\r\n [disabled]=\"disabled\"\r\n (keydown.enter)=\"toggle()\"\r\n (keydown.space)=\"toggle()\"\r\n >\r\n <span class=\"icon\">\r\n @if (value) {\r\n \u2714\r\n }@else {\r\n \u2212\r\n }\r\n </span>\r\n </button>\r\n }@else{\r\n <button\r\n type=\"button\"\r\n class=\"toggle\"\r\n [class.checked]=\"value\"\r\n [disabled]=\"disabled\"\r\n >\r\n <span class=\"thumb\"></span>\r\n </button>\r\n }\r\n @if (placeholder) {\r\n <span class=\"check-placeholder\">{{placeholder}}</span>\r\n }\r\n \r\n <ng-content></ng-content> \r\n </div>\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [".check-form-container{height:calc(4 * var(--form-ref));display:flex;align-items:center}.check-wrapper{padding:2px;cursor:pointer;display:flex;align-items:center;font-size:.875rem}.check-placeholder{margin-left:.5rem}.checkbox{width:calc(var(--design-size-ref) * 2.2);height:calc(var(--design-size-ref) * 2.2);display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--grey-500);border-radius:6px;background:var(--white);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;outline:none}.checkbox:hover:not(:disabled){border-color:var(--secondary-400)}.checkbox:focus,.checkbox:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.checkbox:disabled{background:var(--disabled-background);border-color:var(--disabled-background);cursor:not-allowed}.checkbox:disabled .icon{opacity:.5}.checkbox.checked{background:var(--secondary-500);border-color:var(--secondary-500)}.checkbox.checked:hover:not(:disabled){background:var(--secondary-400);border-color:var(--secondary-400)}.checkbox.checked .icon{color:var(--white)}.checkbox.indeterminate{background:var(--secondary-500);border-color:var(--secondary-500)}.checkbox.indeterminate .icon{color:var(--white)}.checkbox .icon{font-size:1rem;font-weight:700;color:transparent;line-height:1;transition:color .2s ease}.toggle-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.toggle-wrapper button{margin-right:8px}.disabled{color:var(--grey-300)}.toggle{position:relative;width:44px;height:22px;border:none;border-radius:22px;background:var(--grey-200);cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:var(--grey-300);cursor:not-allowed}.toggle:disabled .thumb{opacity:.7}.toggle:hover:not(:disabled){background:var(--secondary-400)}.toggle:focus,.toggle:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.toggle.checked{background:var(--secondary-500)}.toggle.checked:hover:not(:disabled){background:var(--secondary-400)}.toggle.checked .thumb{transform:translate(22px)}.toggle .thumb{width:18px;height:18px;background:var(--white);border-radius:50%;transition:transform .2s ease;transform:translate(0)}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
|
|
150
|
+
], usesInheritance: true, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\"\r\n>\r\n <div [class.check-form-container]=\"!noPadding\">\r\n <div (click)=\"toggle()\" class=\"check-wrapper\">\r\n @if (type=='checkbox') {\r\n <button\r\n type=\"button\"\r\n class=\"checkbox\"\r\n [disabled]=\"disabled\"\r\n [class.checked]=\"value\"\r\n [class.placeholder-space]=\"placeholder!=''\"\r\n [disabled]=\"disabled\"\r\n (keydown.enter)=\"toggle()\"\r\n (keydown.space)=\"toggle()\"\r\n >\r\n <span class=\"icon\">\r\n @if (value) {\r\n \u2714\r\n }@else {\r\n \u2212\r\n }\r\n </span>\r\n </button>\r\n }@else{\r\n <button\r\n type=\"button\"\r\n class=\"toggle\"\r\n [class.checked]=\"value\"\r\n [disabled]=\"disabled\"\r\n >\r\n <span class=\"thumb\"></span>\r\n </button>\r\n }\r\n @if (placeholder) {\r\n <span class=\"check-placeholder\">{{placeholder}}</span>\r\n }\r\n \r\n <ng-content></ng-content> \r\n </div>\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [".check-form-container{height:calc(4 * var(--form-ref));display:flex;align-items:center}.check-wrapper{padding:2px;cursor:pointer;display:flex;align-items:center;font-size:.875rem}.check-placeholder{margin-left:.5rem}.checkbox{width:calc(var(--design-size-ref) * 2.2);height:calc(var(--design-size-ref) * 2.2);display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--grey-500);border-radius:6px;background:var(--white);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;outline:none}.checkbox:hover:not(:disabled){border-color:var(--secondary-400)}.checkbox:focus,.checkbox:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.checkbox:disabled{background:var(--disabled-background);border-color:var(--disabled-background);cursor:not-allowed}.checkbox:disabled .icon{opacity:.5}.checkbox.checked{background:var(--secondary-500);border-color:var(--secondary-500)}.checkbox.checked:hover:not(:disabled){background:var(--secondary-400);border-color:var(--secondary-400)}.checkbox.checked .icon{color:var(--white)}.checkbox.indeterminate{background:var(--secondary-500);border-color:var(--secondary-500)}.checkbox.indeterminate .icon{color:var(--white)}.checkbox .icon{font-size:1rem;font-weight:700;color:transparent;line-height:1;transition:color .2s ease}.toggle-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.toggle-wrapper button{margin-right:8px}.disabled{color:var(--grey-300)}.toggle{position:relative;width:44px;height:22px;border:none;border-radius:22px;background:var(--grey-200);cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:var(--grey-300);cursor:not-allowed}.toggle:disabled .thumb{opacity:.7}.toggle:hover:not(:disabled){background:var(--secondary-400)}.toggle:focus,.toggle:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.toggle.checked{background:var(--secondary-500)}.toggle.checked:hover:not(:disabled){background:var(--secondary-400)}.toggle.checked .thumb{transform:translate(22px)}.toggle .thumb{width:18px;height:18px;background:var(--white);border-radius:50%;transition:transform .2s ease;transform:translate(0)}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
|
|
151
151
|
}
|
|
152
152
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicCheckboxComponent, decorators: [{
|
|
153
153
|
type: Component,
|
|
@@ -157,7 +157,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
157
157
|
useExisting: forwardRef(() => UicCheckboxComponent),
|
|
158
158
|
multi: true
|
|
159
159
|
}
|
|
160
|
-
], template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\"\r\n>\r\n <div [class.check-form-container]=\"!noPadding\">\r\n <div (click)=\"toggle()\" class=\"check-wrapper\">\r\n @if (type=='checkbox') {\r\n <button\r\n type=\"button\"\r\n class=\"checkbox\"\r\n [disabled]=\"disabled\"\r\n [class.checked]=\"value\"\r\n [class.placeholder-space]=\"placeholder!=''\"\r\n [disabled]=\"disabled\"\r\n (keydown.enter)=\"toggle()\"\r\n (keydown.space)=\"toggle()\"\r\n >\r\n <span class=\"icon\">\r\n @if (value) {\r\n \u2714\r\n }@else {\r\n \u2212\r\n }\r\n </span>\r\n </button>\r\n }@else{\r\n <button\r\n type=\"button\"\r\n class=\"toggle\"\r\n [class.checked]=\"value\"\r\n [disabled]=\"disabled\"\r\n >\r\n <span class=\"thumb\"></span>\r\n </button>\r\n }\r\n @if (placeholder) {\r\n <span class=\"check-placeholder\">{{placeholder}}</span>\r\n }\r\n \r\n <ng-content></ng-content> \r\n </div>\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [".check-form-container{height:calc(4 * var(--form-ref));display:flex;align-items:center}.check-wrapper{padding:2px;cursor:pointer;display:flex;align-items:center;font-size:.875rem}.check-placeholder{margin-left:.5rem}.checkbox{width:calc(var(--design-size-ref) * 2.2);height:calc(var(--design-size-ref) * 2.2);display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--grey-500);border-radius:6px;background:var(--white);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;outline:none}.checkbox:hover:not(:disabled){border-color:var(--secondary-400)}.checkbox:focus,.checkbox:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.checkbox:disabled{background:var(--disabled-background);border-color:var(--disabled-background);cursor:not-allowed}.checkbox:disabled .icon{opacity:.5}.checkbox.checked{background:var(--secondary-500);border-color:var(--secondary-500)}.checkbox.checked:hover:not(:disabled){background:var(--secondary-400);border-color:var(--secondary-400)}.checkbox.checked .icon{color:var(--white)}.checkbox.indeterminate{background:var(--secondary-500);border-color:var(--secondary-500)}.checkbox.indeterminate .icon{color:var(--white)}.checkbox .icon{font-size:1rem;font-weight:700;color:transparent;line-height:1;transition:color .2s ease}.toggle-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.toggle-wrapper button{margin-right:8px}.disabled{color:var(--grey-300)}.toggle{position:relative;width:44px;height:22px;border:none;border-radius:22px;background:var(--grey-200);cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:var(--grey-300);cursor:not-allowed}.toggle:disabled .thumb{opacity:.7}.toggle:hover:not(:disabled){background:var(--secondary-400)}.toggle:focus,.toggle:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.toggle.checked{background:var(--secondary-500)}.toggle.checked:hover:not(:disabled){background:var(--secondary-400)}.toggle.checked .thumb{transform:translate(22px)}.toggle .thumb{width:18px;height:18px;background:var(--white);border-radius:50%;transition:transform .2s ease;transform:translate(0)}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
|
|
160
|
+
], template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\"\r\n>\r\n <div [class.check-form-container]=\"!noPadding\">\r\n <div (click)=\"toggle()\" class=\"check-wrapper\">\r\n @if (type=='checkbox') {\r\n <button\r\n type=\"button\"\r\n class=\"checkbox\"\r\n [disabled]=\"disabled\"\r\n [class.checked]=\"value\"\r\n [class.placeholder-space]=\"placeholder!=''\"\r\n [disabled]=\"disabled\"\r\n (keydown.enter)=\"toggle()\"\r\n (keydown.space)=\"toggle()\"\r\n >\r\n <span class=\"icon\">\r\n @if (value) {\r\n \u2714\r\n }@else {\r\n \u2212\r\n }\r\n </span>\r\n </button>\r\n }@else{\r\n <button\r\n type=\"button\"\r\n class=\"toggle\"\r\n [class.checked]=\"value\"\r\n [disabled]=\"disabled\"\r\n >\r\n <span class=\"thumb\"></span>\r\n </button>\r\n }\r\n @if (placeholder) {\r\n <span class=\"check-placeholder\">{{placeholder}}</span>\r\n }\r\n \r\n <ng-content></ng-content> \r\n </div>\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [".check-form-container{height:calc(4 * var(--form-ref));display:flex;align-items:center}.check-wrapper{padding:2px;cursor:pointer;display:flex;align-items:center;font-size:.875rem}.check-placeholder{margin-left:.5rem}.checkbox{width:calc(var(--design-size-ref) * 2.2);height:calc(var(--design-size-ref) * 2.2);display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--grey-500);border-radius:6px;background:var(--white);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;outline:none}.checkbox:hover:not(:disabled){border-color:var(--secondary-400)}.checkbox:focus,.checkbox:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.checkbox:disabled{background:var(--disabled-background);border-color:var(--disabled-background);cursor:not-allowed}.checkbox:disabled .icon{opacity:.5}.checkbox.checked{background:var(--secondary-500);border-color:var(--secondary-500)}.checkbox.checked:hover:not(:disabled){background:var(--secondary-400);border-color:var(--secondary-400)}.checkbox.checked .icon{color:var(--white)}.checkbox.indeterminate{background:var(--secondary-500);border-color:var(--secondary-500)}.checkbox.indeterminate .icon{color:var(--white)}.checkbox .icon{font-size:1rem;font-weight:700;color:transparent;line-height:1;transition:color .2s ease}.toggle-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.toggle-wrapper button{margin-right:8px}.disabled{color:var(--grey-300)}.toggle{position:relative;width:44px;height:22px;border:none;border-radius:22px;background:var(--grey-200);cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:var(--grey-300);cursor:not-allowed}.toggle:disabled .thumb{opacity:.7}.toggle:hover:not(:disabled){background:var(--secondary-400)}.toggle:focus,.toggle:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.toggle.checked{background:var(--secondary-500)}.toggle.checked:hover:not(:disabled){background:var(--secondary-400)}.toggle.checked .thumb{transform:translate(22px)}.toggle .thumb{width:18px;height:18px;background:var(--white);border-radius:50%;transition:transform .2s ease;transform:translate(0)}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
|
|
161
161
|
}], propDecorators: { icon: [{
|
|
162
162
|
type: Input
|
|
163
163
|
}], iconColor: [{
|
|
@@ -191,11 +191,11 @@ class UicSwichComponent {
|
|
|
191
191
|
this.checkedChange.emit(this.checked);
|
|
192
192
|
}
|
|
193
193
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSwichComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
194
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicSwichComponent, isStandalone: true, selector: "ui-switch", inputs: { checked: "checked", disabled: "disabled", placeholder: "placeholder", label: "label" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<button\r\n type=\"button\"\r\n class=\"toggle\"\r\n [class.checked]=\"checked\"\r\n [disabled]=\"disabled\"\r\n (click)=\"toggle()\"\r\n>\r\n <span class=\"thumb\"></span>\r\n</button>", styles: [".toggle-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.toggle-wrapper button{margin-right:8px}.disabled{color:var(--disabled-color)}.toggle{position:relative;width:calc(var(--design-size-ref) * 4.4);height:calc(var(--design-size-ref) * 2.2);border:none;border-radius:calc(var(--design-size-ref) * 2.2);background:var(--grey-200);cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:var(--disabled-background);cursor:not-allowed}.toggle:disabled .thumb{opacity:.7}.toggle:hover:not(:disabled){background:var(--secondary-400)}.toggle:focus,.toggle:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.toggle.checked{background:var(--secondary-500)}.toggle.checked:hover:not(:disabled){background:var(--secondary-400)}.toggle.checked .thumb{transform:translate(calc(var(--design-size-ref) * 4.4 - var(--design-size-ref) * 2.2))}.toggle .thumb{width:calc(var(--design-size-ref) * 2.2 - 4px);height:calc(var(--design-size-ref) * 2.2 - 4px);background:var(--white);border-radius:50%;transition:transform .2s ease;transform:translate(0)}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] });
|
|
194
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicSwichComponent, isStandalone: true, selector: "ui-switch", inputs: { checked: "checked", disabled: "disabled", placeholder: "placeholder", label: "label" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<button\r\n type=\"button\"\r\n class=\"toggle\"\r\n [class.checked]=\"checked\"\r\n [disabled]=\"disabled\"\r\n (click)=\"toggle()\"\r\n>\r\n <span class=\"thumb\"></span>\r\n</button>", styles: [".toggle-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.toggle-wrapper button{margin-right:8px}.disabled{color:var(--disabled-color)}.toggle{position:relative;width:calc(var(--design-size-ref) * 4.4);height:calc(var(--design-size-ref) * 2.2);border:none;border-radius:calc(var(--design-size-ref) * 2.2);background:var(--grey-200);cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:var(--disabled-background);cursor:not-allowed}.toggle:disabled .thumb{opacity:.7}.toggle:hover:not(:disabled){background:var(--secondary-400)}.toggle:focus,.toggle:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.toggle.checked{background:var(--secondary-500)}.toggle.checked:hover:not(:disabled){background:var(--secondary-400)}.toggle.checked .thumb{transform:translate(calc(var(--design-size-ref) * 4.4 - var(--design-size-ref) * 2.2))}.toggle .thumb{width:calc(var(--design-size-ref) * 2.2 - 4px);height:calc(var(--design-size-ref) * 2.2 - 4px);background:var(--white);border-radius:50%;transition:transform .2s ease;transform:translate(0)}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] });
|
|
195
195
|
}
|
|
196
196
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSwichComponent, decorators: [{
|
|
197
197
|
type: Component,
|
|
198
|
-
args: [{ selector: 'ui-switch', imports: [], template: "<button\r\n type=\"button\"\r\n class=\"toggle\"\r\n [class.checked]=\"checked\"\r\n [disabled]=\"disabled\"\r\n (click)=\"toggle()\"\r\n>\r\n <span class=\"thumb\"></span>\r\n</button>", styles: [".toggle-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.toggle-wrapper button{margin-right:8px}.disabled{color:var(--disabled-color)}.toggle{position:relative;width:calc(var(--design-size-ref) * 4.4);height:calc(var(--design-size-ref) * 2.2);border:none;border-radius:calc(var(--design-size-ref) * 2.2);background:var(--grey-200);cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:var(--disabled-background);cursor:not-allowed}.toggle:disabled .thumb{opacity:.7}.toggle:hover:not(:disabled){background:var(--secondary-400)}.toggle:focus,.toggle:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.toggle.checked{background:var(--secondary-500)}.toggle.checked:hover:not(:disabled){background:var(--secondary-400)}.toggle.checked .thumb{transform:translate(calc(var(--design-size-ref) * 4.4 - var(--design-size-ref) * 2.2))}.toggle .thumb{width:calc(var(--design-size-ref) * 2.2 - 4px);height:calc(var(--design-size-ref) * 2.2 - 4px);background:var(--white);border-radius:50%;transition:transform .2s ease;transform:translate(0)}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
|
|
198
|
+
args: [{ selector: 'ui-switch', imports: [], template: "<button\r\n type=\"button\"\r\n class=\"toggle\"\r\n [class.checked]=\"checked\"\r\n [disabled]=\"disabled\"\r\n (click)=\"toggle()\"\r\n>\r\n <span class=\"thumb\"></span>\r\n</button>", styles: [".toggle-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.toggle-wrapper button{margin-right:8px}.disabled{color:var(--disabled-color)}.toggle{position:relative;width:calc(var(--design-size-ref) * 4.4);height:calc(var(--design-size-ref) * 2.2);border:none;border-radius:calc(var(--design-size-ref) * 2.2);background:var(--grey-200);cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:var(--disabled-background);cursor:not-allowed}.toggle:disabled .thumb{opacity:.7}.toggle:hover:not(:disabled){background:var(--secondary-400)}.toggle:focus,.toggle:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.toggle.checked{background:var(--secondary-500)}.toggle.checked:hover:not(:disabled){background:var(--secondary-400)}.toggle.checked .thumb{transform:translate(calc(var(--design-size-ref) * 4.4 - var(--design-size-ref) * 2.2))}.toggle .thumb{width:calc(var(--design-size-ref) * 2.2 - 4px);height:calc(var(--design-size-ref) * 2.2 - 4px);background:var(--white);border-radius:50%;transition:transform .2s ease;transform:translate(0)}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
|
|
199
199
|
}], propDecorators: { checked: [{
|
|
200
200
|
type: Input
|
|
201
201
|
}], checkedChange: [{
|
|
@@ -261,6 +261,7 @@ const DICTIONARY_EN = {
|
|
|
261
261
|
empty: 'No items to show',
|
|
262
262
|
without_options: 'No options available',
|
|
263
263
|
pending_text: 'PENDING TEXT',
|
|
264
|
+
search_placeholder: 'Search...',
|
|
264
265
|
},
|
|
265
266
|
tree: {
|
|
266
267
|
search_label: 'Search subcategories:',
|
|
@@ -312,13 +313,36 @@ const DICTIONARY_EN = {
|
|
|
312
313
|
add_group: 'Group',
|
|
313
314
|
add_group_tip: 'Add group',
|
|
314
315
|
reset: 'Reset',
|
|
315
|
-
reset_tip: '
|
|
316
|
+
reset_tip: 'Discard unsaved changes',
|
|
316
317
|
save: 'Save',
|
|
317
318
|
save_tip: 'Save built rule',
|
|
318
319
|
delete_rule_tip: 'Delete rule',
|
|
319
320
|
delete_group_tip: 'Delete group',
|
|
320
321
|
toggle_operator_tip: 'Click to change operator',
|
|
321
322
|
no_rules: 'No rules defined',
|
|
323
|
+
rules_management: 'Select rule',
|
|
324
|
+
edit: 'Edit',
|
|
325
|
+
edit_tip: 'Edit rule',
|
|
326
|
+
edit_condition_tip: 'Click to edit condition',
|
|
327
|
+
operators: {
|
|
328
|
+
and: 'AND',
|
|
329
|
+
or: 'OR',
|
|
330
|
+
},
|
|
331
|
+
definition: {
|
|
332
|
+
cancel_and_back: 'Cancel and go back',
|
|
333
|
+
create_and_select: 'Create and select',
|
|
334
|
+
search_placeholder: 'Search condition',
|
|
335
|
+
new_rule: 'New rule',
|
|
336
|
+
no_results: 'No conditions found',
|
|
337
|
+
previous: 'Previous',
|
|
338
|
+
next: 'Next',
|
|
339
|
+
form: {
|
|
340
|
+
description: 'Description',
|
|
341
|
+
field: 'Field',
|
|
342
|
+
operator: 'Operator',
|
|
343
|
+
value: 'Value',
|
|
344
|
+
},
|
|
345
|
+
},
|
|
322
346
|
},
|
|
323
347
|
step_form: {
|
|
324
348
|
back: 'Back',
|
|
@@ -437,7 +461,11 @@ const DICTIONARY_EN = {
|
|
|
437
461
|
pattern: 'Pattern',
|
|
438
462
|
pattern_tip: 'Regular expression in text',
|
|
439
463
|
searchApi: 'Search API',
|
|
440
|
-
searchApi_tip: 'URL to fetch search options'
|
|
464
|
+
searchApi_tip: 'URL to fetch search options',
|
|
465
|
+
selectNullable_tip: 'Allows selecting an empty option',
|
|
466
|
+
selectSearchEnabled_tip: 'Enables search among options',
|
|
467
|
+
selectNullable: 'Allow empty option',
|
|
468
|
+
selectSearchEnabled: 'Enable search',
|
|
441
469
|
},
|
|
442
470
|
options_editor: {
|
|
443
471
|
title: 'Options',
|
|
@@ -516,6 +544,7 @@ const DICTIONARY_ES = {
|
|
|
516
544
|
empty: 'No hay elementos para mostrar',
|
|
517
545
|
without_options: 'Sin opciones disponibles',
|
|
518
546
|
pending_text: 'TEXTO PENDIENTE',
|
|
547
|
+
search_placeholder: 'Buscar...',
|
|
519
548
|
},
|
|
520
549
|
tree: {
|
|
521
550
|
search_label: 'Buscar subcategorias:',
|
|
@@ -567,13 +596,36 @@ const DICTIONARY_ES = {
|
|
|
567
596
|
add_group: 'Grupo',
|
|
568
597
|
add_group_tip: 'Agregar grupo',
|
|
569
598
|
reset: 'Reiniciar',
|
|
570
|
-
reset_tip: '
|
|
599
|
+
reset_tip: 'Descartar cambios no guardados',
|
|
571
600
|
save: 'Guardar',
|
|
572
601
|
save_tip: 'Guardar regla construida',
|
|
573
602
|
delete_rule_tip: 'Eliminar regla',
|
|
574
603
|
delete_group_tip: 'Eliminar grupo',
|
|
575
604
|
toggle_operator_tip: 'Click para cambiar de operador',
|
|
576
605
|
no_rules: 'No hay reglas definidas',
|
|
606
|
+
rules_management: 'Seleccionar reglas',
|
|
607
|
+
edit: 'Editar',
|
|
608
|
+
edit_tip: 'Editar regla',
|
|
609
|
+
edit_condition_tip: 'Click para editar la condición',
|
|
610
|
+
operators: {
|
|
611
|
+
and: 'Y',
|
|
612
|
+
or: 'O',
|
|
613
|
+
},
|
|
614
|
+
definition: {
|
|
615
|
+
cancel_and_back: 'Cancelar y volver',
|
|
616
|
+
create_and_select: 'Crear y seleccionar',
|
|
617
|
+
search_placeholder: 'Buscar condición',
|
|
618
|
+
new_rule: 'Nueva regla',
|
|
619
|
+
no_results: 'No se encontraron condiciones',
|
|
620
|
+
previous: 'Anterior',
|
|
621
|
+
next: 'Siguiente',
|
|
622
|
+
form: {
|
|
623
|
+
description: 'Descripción',
|
|
624
|
+
field: 'Campo',
|
|
625
|
+
operator: 'Operador',
|
|
626
|
+
value: 'Valor',
|
|
627
|
+
},
|
|
628
|
+
},
|
|
577
629
|
},
|
|
578
630
|
step_form: {
|
|
579
631
|
back: 'Volver',
|
|
@@ -692,7 +744,11 @@ const DICTIONARY_ES = {
|
|
|
692
744
|
pattern: 'Patrón',
|
|
693
745
|
pattern_tip: 'Expresión regular en texto',
|
|
694
746
|
searchApi: 'API de búsqueda',
|
|
695
|
-
searchApi_tip: 'URL para obtener opciones de búsqueda'
|
|
747
|
+
searchApi_tip: 'URL para obtener opciones de búsqueda',
|
|
748
|
+
selectNullable_tip: 'Permite seleccionar una opción vacía',
|
|
749
|
+
selectSearchEnabled_tip: 'Habilita búsqueda entre opciones',
|
|
750
|
+
selectNullable: 'Permitir opción vacía',
|
|
751
|
+
selectSearchEnabled: 'Habilitar búsqueda',
|
|
696
752
|
},
|
|
697
753
|
options_editor: {
|
|
698
754
|
title: 'Opciones',
|
|
@@ -1276,7 +1332,7 @@ class UicDatePickerComponent extends base$b {
|
|
|
1276
1332
|
useExisting: forwardRef(() => UicDatePickerComponent),
|
|
1277
1333
|
multi: true
|
|
1278
1334
|
}
|
|
1279
|
-
], viewQueries: [{ propertyName: "calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fakeinput-wrapp \" >\r\n <div class=\"fakeinput \" \r\n [ngClass]=\"{ 'errorinput': error, 'disabledinput': disabled }\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon-m {{ internalIcon }}\"></i>\r\n }\r\n <input\r\n type=\"text\"\r\n [disabled]=\"disabled\"\r\n [placeholder]=\"inputPlaceholder\"\r\n [value]=\"displayValue\"\r\n inputmode=\"numeric\"\r\n autocomplete=\"off\"\r\n (input)=\"onInputChange($event)\"\r\n (blur)=\"onInputBlur()\"\r\n (keydown)=\"onInputKeydown($event)\"\r\n (click)=\"openCalendar()\"\r\n />\r\n </div>\r\n <!-- Overlay Template -->\r\n <ng-template #calendarTemplate>\r\n <div class=\"calendar\">\r\n <div class=\"calendar-header\">\r\n <span (click)=\"changeView()\">\r\n @if (view === 'days') {\r\n {{ monthName }} de {{ selectedYear }}\r\n } @else if (view === 'months') {\r\n {{ selectedYear }}\r\n } @else {\r\n {{ decadeRange[0] }} - {{ decadeRange[decadeRange.length - 1] }}\r\n }\r\n </span>\r\n <ui-button\r\n size=\"s\"\r\n type=\"ghost\"\r\n [iconOnly]=\"true\"\r\n icon=\"ri-arrow-drop-up-line\"\r\n (click)=\"prev()\"\r\n ><</ui-button\r\n >\r\n <ui-button\r\n size=\"s\"\r\n type=\"ghost\"\r\n [iconOnly]=\"true\"\r\n icon=\"ri-arrow-drop-down-line\"\r\n (click)=\"next()\"\r\n >></ui-button\r\n >\r\n </div>\r\n <!-- Vista Days -->\r\n @if (view === 'days') {\r\n <div class=\"calendar-grid\">\r\n @for (d of ['DO','LU','MA','MI','JU','VI','SA']; track $index) {\r\n <div class=\"weekday\">{{ d }}</div>\r\n } @for (week of monthWeeks; track $index) { @for (day of week;\r\n track $index) {\r\n <button\r\n class=\"day\"\r\n [disabled]=\"\r\n (minDate && day ? day < minDate : false) ||\r\n (maxDate && day ? day > maxDate : false)\r\n \"\r\n [class.today]=\"isToday(day)\"\r\n [class.day-selected]=\"isPainted(day)\"\r\n [class.empty]=\"!day\"\r\n (click)=\"day && selectDate(day)\"\r\n >\r\n {{ day?.getDate() }}\r\n </button>\r\n } }\r\n </div>\r\n }\r\n <!-- Vista Months -->\r\n @if (view === 'months') {\r\n <div class=\"calendar-grid months\">\r\n @for (m of months; let i = $index; track i) {\r\n <button\r\n class=\"day\"\r\n [class.today]=\"isThisMonth(m)\"\r\n [class.day-selected]=\"isSelectedMonth(i)\"\r\n [disabled]=\"isMonthDisabled(i)\"\r\n (click)=\"selectMonth(i)\"\r\n >\r\n {{ m }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n <!-- Vista Years -->\r\n @if (view === 'years') {\r\n <div class=\"calendar-grid years\">\r\n @for (y of decadeRange; track $index) {\r\n <button\r\n class=\"day\"\r\n [class.today]=\"y == currentYear\"\r\n (click)=\"selectYear(y)\"\r\n >\r\n {{ y }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n <div class=\"calendar-footer\">\r\n <ui-button\r\n color=\"red\"\r\n size=\"s\"\r\n type=\"ghost\"\r\n (click)=\"cleanInput()\"\r\n >{{'common.clear' | uicTranslate}}</ui-button\r\n >\r\n @if (isTodayAvailable()) {\r\n <ui-button\r\n color=\"blue\"\r\n size=\"s\"\r\n type=\"ghost\"\r\n (click)=\"pickToday()\"\r\n >{{'common.today' | uicTranslate}}</ui-button\r\n >\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [".date-picker{position:relative}.calendar{background:var(--white);border:1px solid var(--grey-300);border-radius:var(--input-radius);box-shadow:0 2px 6px #00000026;padding:.5rem;width:250px}.calendar-header{display:flex;gap:5px;align-items:center;margin-bottom:8px}.calendar-header span{-webkit-user-select:none;user-select:none;flex:1 1;cursor:pointer;font-size:.875rem;line-height:1.25rem;font-weight:500;transition:ease .3s;padding:.25rem;border-radius:6px;margin-right:3px}.calendar-header span:hover{background-color:var(--primary-100)}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-grid.months{grid-template-columns:repeat(3,1fr)}.calendar-grid.years{grid-template-columns:repeat(4,1fr)}.calendar-grid .empty{visibility:hidden}.weekday{font-size:.875rem}.day{padding:6px;border:none;background:transparent;border-radius:var(--button-radius);cursor:pointer;transition:ease .5s}.day:enabled:hover{color:var(--grey-950);background:var(--secondary-300)}.day:disabled{color:var(--grey-400);cursor:not-allowed}.today{box-shadow:0 0 0 3px var(--secondary-alpha)}.day-selected{background-color:var(--secondary-500);color:var(--white)}.calendar-footer{display:flex;padding-top:.25rem;border-top:solid 1px var(--grey-200);justify-content:space-between}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
1335
|
+
], viewQueries: [{ propertyName: "calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fakeinput-wrapp \" >\r\n <div class=\"fakeinput \" \r\n [ngClass]=\"{ 'errorinput': error, 'disabledinput': disabled }\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon-m {{ internalIcon }}\"></i>\r\n }\r\n <input\r\n type=\"text\"\r\n [disabled]=\"disabled\"\r\n [placeholder]=\"inputPlaceholder\"\r\n [value]=\"displayValue\"\r\n inputmode=\"numeric\"\r\n autocomplete=\"off\"\r\n (input)=\"onInputChange($event)\"\r\n (blur)=\"onInputBlur()\"\r\n (keydown)=\"onInputKeydown($event)\"\r\n (click)=\"openCalendar()\"\r\n />\r\n </div>\r\n <!-- Overlay Template -->\r\n <ng-template #calendarTemplate>\r\n <div class=\"calendar\">\r\n <div class=\"calendar-header\">\r\n <span (click)=\"changeView()\">\r\n @if (view === 'days') {\r\n {{ monthName }} de {{ selectedYear }}\r\n } @else if (view === 'months') {\r\n {{ selectedYear }}\r\n } @else {\r\n {{ decadeRange[0] }} - {{ decadeRange[decadeRange.length - 1] }}\r\n }\r\n </span>\r\n <ui-button\r\n size=\"s\"\r\n type=\"ghost\"\r\n [iconOnly]=\"true\"\r\n icon=\"ri-arrow-drop-up-line\"\r\n (click)=\"prev()\"\r\n ><</ui-button\r\n >\r\n <ui-button\r\n size=\"s\"\r\n type=\"ghost\"\r\n [iconOnly]=\"true\"\r\n icon=\"ri-arrow-drop-down-line\"\r\n (click)=\"next()\"\r\n >></ui-button\r\n >\r\n </div>\r\n <!-- Vista Days -->\r\n @if (view === 'days') {\r\n <div class=\"calendar-grid\">\r\n @for (d of ['DO','LU','MA','MI','JU','VI','SA']; track $index) {\r\n <div class=\"weekday\">{{ d }}</div>\r\n } @for (week of monthWeeks; track $index) { @for (day of week;\r\n track $index) {\r\n <button\r\n class=\"day\"\r\n [disabled]=\"\r\n (minDate && day ? day < minDate : false) ||\r\n (maxDate && day ? day > maxDate : false)\r\n \"\r\n [class.today]=\"isToday(day)\"\r\n [class.day-selected]=\"isPainted(day)\"\r\n [class.empty]=\"!day\"\r\n (click)=\"day && selectDate(day)\"\r\n >\r\n {{ day?.getDate() }}\r\n </button>\r\n } }\r\n </div>\r\n }\r\n <!-- Vista Months -->\r\n @if (view === 'months') {\r\n <div class=\"calendar-grid months\">\r\n @for (m of months; let i = $index; track i) {\r\n <button\r\n class=\"day\"\r\n [class.today]=\"isThisMonth(m)\"\r\n [class.day-selected]=\"isSelectedMonth(i)\"\r\n [disabled]=\"isMonthDisabled(i)\"\r\n (click)=\"selectMonth(i)\"\r\n >\r\n {{ m }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n <!-- Vista Years -->\r\n @if (view === 'years') {\r\n <div class=\"calendar-grid years\">\r\n @for (y of decadeRange; track $index) {\r\n <button\r\n class=\"day\"\r\n [class.today]=\"y == currentYear\"\r\n (click)=\"selectYear(y)\"\r\n >\r\n {{ y }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n <div class=\"calendar-footer\">\r\n <ui-button\r\n color=\"red\"\r\n size=\"s\"\r\n type=\"ghost\"\r\n (click)=\"cleanInput()\"\r\n >{{'common.clear' | uicTranslate}}</ui-button\r\n >\r\n @if (isTodayAvailable()) {\r\n <ui-button\r\n color=\"blue\"\r\n size=\"s\"\r\n type=\"ghost\"\r\n (click)=\"pickToday()\"\r\n >{{'common.today' | uicTranslate}}</ui-button\r\n >\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [".date-picker{position:relative}.calendar{background:var(--white);border:1px solid var(--grey-300);border-radius:var(--input-radius);box-shadow:0 2px 6px #00000026;padding:.5rem;width:250px}.calendar-header{display:flex;gap:5px;align-items:center;margin-bottom:8px}.calendar-header span{-webkit-user-select:none;user-select:none;flex:1 1;cursor:pointer;font-size:.875rem;line-height:1.25rem;font-weight:500;transition:ease .3s;padding:.25rem;border-radius:6px;margin-right:3px}.calendar-header span:hover{background-color:var(--primary-100)}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-grid.months{grid-template-columns:repeat(3,1fr)}.calendar-grid.years{grid-template-columns:repeat(4,1fr)}.calendar-grid .empty{visibility:hidden}.weekday{font-size:.875rem}.day{padding:6px;border:none;background:transparent;border-radius:var(--button-radius);cursor:pointer;transition:ease .5s}.day:enabled:hover{color:var(--grey-950);background:var(--secondary-300)}.day:disabled{color:var(--grey-400);cursor:not-allowed}.today{box-shadow:0 0 0 3px var(--secondary-alpha)}.day-selected{background-color:var(--secondary-500);color:var(--white)}.calendar-footer{display:flex;padding-top:.25rem;border-top:solid 1px var(--grey-200);justify-content:space-between}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
1280
1336
|
}
|
|
1281
1337
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDatePickerComponent, decorators: [{
|
|
1282
1338
|
type: Component,
|
|
@@ -1286,7 +1342,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1286
1342
|
useExisting: forwardRef(() => UicDatePickerComponent),
|
|
1287
1343
|
multi: true
|
|
1288
1344
|
}
|
|
1289
|
-
], template: "<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fakeinput-wrapp \" >\r\n <div class=\"fakeinput \" \r\n [ngClass]=\"{ 'errorinput': error, 'disabledinput': disabled }\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon-m {{ internalIcon }}\"></i>\r\n }\r\n <input\r\n type=\"text\"\r\n [disabled]=\"disabled\"\r\n [placeholder]=\"inputPlaceholder\"\r\n [value]=\"displayValue\"\r\n inputmode=\"numeric\"\r\n autocomplete=\"off\"\r\n (input)=\"onInputChange($event)\"\r\n (blur)=\"onInputBlur()\"\r\n (keydown)=\"onInputKeydown($event)\"\r\n (click)=\"openCalendar()\"\r\n />\r\n </div>\r\n <!-- Overlay Template -->\r\n <ng-template #calendarTemplate>\r\n <div class=\"calendar\">\r\n <div class=\"calendar-header\">\r\n <span (click)=\"changeView()\">\r\n @if (view === 'days') {\r\n {{ monthName }} de {{ selectedYear }}\r\n } @else if (view === 'months') {\r\n {{ selectedYear }}\r\n } @else {\r\n {{ decadeRange[0] }} - {{ decadeRange[decadeRange.length - 1] }}\r\n }\r\n </span>\r\n <ui-button\r\n size=\"s\"\r\n type=\"ghost\"\r\n [iconOnly]=\"true\"\r\n icon=\"ri-arrow-drop-up-line\"\r\n (click)=\"prev()\"\r\n ><</ui-button\r\n >\r\n <ui-button\r\n size=\"s\"\r\n type=\"ghost\"\r\n [iconOnly]=\"true\"\r\n icon=\"ri-arrow-drop-down-line\"\r\n (click)=\"next()\"\r\n >></ui-button\r\n >\r\n </div>\r\n <!-- Vista Days -->\r\n @if (view === 'days') {\r\n <div class=\"calendar-grid\">\r\n @for (d of ['DO','LU','MA','MI','JU','VI','SA']; track $index) {\r\n <div class=\"weekday\">{{ d }}</div>\r\n } @for (week of monthWeeks; track $index) { @for (day of week;\r\n track $index) {\r\n <button\r\n class=\"day\"\r\n [disabled]=\"\r\n (minDate && day ? day < minDate : false) ||\r\n (maxDate && day ? day > maxDate : false)\r\n \"\r\n [class.today]=\"isToday(day)\"\r\n [class.day-selected]=\"isPainted(day)\"\r\n [class.empty]=\"!day\"\r\n (click)=\"day && selectDate(day)\"\r\n >\r\n {{ day?.getDate() }}\r\n </button>\r\n } }\r\n </div>\r\n }\r\n <!-- Vista Months -->\r\n @if (view === 'months') {\r\n <div class=\"calendar-grid months\">\r\n @for (m of months; let i = $index; track i) {\r\n <button\r\n class=\"day\"\r\n [class.today]=\"isThisMonth(m)\"\r\n [class.day-selected]=\"isSelectedMonth(i)\"\r\n [disabled]=\"isMonthDisabled(i)\"\r\n (click)=\"selectMonth(i)\"\r\n >\r\n {{ m }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n <!-- Vista Years -->\r\n @if (view === 'years') {\r\n <div class=\"calendar-grid years\">\r\n @for (y of decadeRange; track $index) {\r\n <button\r\n class=\"day\"\r\n [class.today]=\"y == currentYear\"\r\n (click)=\"selectYear(y)\"\r\n >\r\n {{ y }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n <div class=\"calendar-footer\">\r\n <ui-button\r\n color=\"red\"\r\n size=\"s\"\r\n type=\"ghost\"\r\n (click)=\"cleanInput()\"\r\n >{{'common.clear' | uicTranslate}}</ui-button\r\n >\r\n @if (isTodayAvailable()) {\r\n <ui-button\r\n color=\"blue\"\r\n size=\"s\"\r\n type=\"ghost\"\r\n (click)=\"pickToday()\"\r\n >{{'common.today' | uicTranslate}}</ui-button\r\n >\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [".date-picker{position:relative}.calendar{background:var(--white);border:1px solid var(--grey-300);border-radius:var(--input-radius);box-shadow:0 2px 6px #00000026;padding:.5rem;width:250px}.calendar-header{display:flex;gap:5px;align-items:center;margin-bottom:8px}.calendar-header span{-webkit-user-select:none;user-select:none;flex:1 1;cursor:pointer;font-size:.875rem;line-height:1.25rem;font-weight:500;transition:ease .3s;padding:.25rem;border-radius:6px;margin-right:3px}.calendar-header span:hover{background-color:var(--primary-100)}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-grid.months{grid-template-columns:repeat(3,1fr)}.calendar-grid.years{grid-template-columns:repeat(4,1fr)}.calendar-grid .empty{visibility:hidden}.weekday{font-size:.875rem}.day{padding:6px;border:none;background:transparent;border-radius:var(--button-radius);cursor:pointer;transition:ease .5s}.day:enabled:hover{color:var(--grey-950);background:var(--secondary-300)}.day:disabled{color:var(--grey-400);cursor:not-allowed}.today{box-shadow:0 0 0 3px var(--secondary-alpha)}.day-selected{background-color:var(--secondary-500);color:var(--white)}.calendar-footer{display:flex;padding-top:.25rem;border-top:solid 1px var(--grey-200);justify-content:space-between}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
|
|
1345
|
+
], template: "<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fakeinput-wrapp \" >\r\n <div class=\"fakeinput \" \r\n [ngClass]=\"{ 'errorinput': error, 'disabledinput': disabled }\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon-m {{ internalIcon }}\"></i>\r\n }\r\n <input\r\n type=\"text\"\r\n [disabled]=\"disabled\"\r\n [placeholder]=\"inputPlaceholder\"\r\n [value]=\"displayValue\"\r\n inputmode=\"numeric\"\r\n autocomplete=\"off\"\r\n (input)=\"onInputChange($event)\"\r\n (blur)=\"onInputBlur()\"\r\n (keydown)=\"onInputKeydown($event)\"\r\n (click)=\"openCalendar()\"\r\n />\r\n </div>\r\n <!-- Overlay Template -->\r\n <ng-template #calendarTemplate>\r\n <div class=\"calendar\">\r\n <div class=\"calendar-header\">\r\n <span (click)=\"changeView()\">\r\n @if (view === 'days') {\r\n {{ monthName }} de {{ selectedYear }}\r\n } @else if (view === 'months') {\r\n {{ selectedYear }}\r\n } @else {\r\n {{ decadeRange[0] }} - {{ decadeRange[decadeRange.length - 1] }}\r\n }\r\n </span>\r\n <ui-button\r\n size=\"s\"\r\n type=\"ghost\"\r\n [iconOnly]=\"true\"\r\n icon=\"ri-arrow-drop-up-line\"\r\n (click)=\"prev()\"\r\n ><</ui-button\r\n >\r\n <ui-button\r\n size=\"s\"\r\n type=\"ghost\"\r\n [iconOnly]=\"true\"\r\n icon=\"ri-arrow-drop-down-line\"\r\n (click)=\"next()\"\r\n >></ui-button\r\n >\r\n </div>\r\n <!-- Vista Days -->\r\n @if (view === 'days') {\r\n <div class=\"calendar-grid\">\r\n @for (d of ['DO','LU','MA','MI','JU','VI','SA']; track $index) {\r\n <div class=\"weekday\">{{ d }}</div>\r\n } @for (week of monthWeeks; track $index) { @for (day of week;\r\n track $index) {\r\n <button\r\n class=\"day\"\r\n [disabled]=\"\r\n (minDate && day ? day < minDate : false) ||\r\n (maxDate && day ? day > maxDate : false)\r\n \"\r\n [class.today]=\"isToday(day)\"\r\n [class.day-selected]=\"isPainted(day)\"\r\n [class.empty]=\"!day\"\r\n (click)=\"day && selectDate(day)\"\r\n >\r\n {{ day?.getDate() }}\r\n </button>\r\n } }\r\n </div>\r\n }\r\n <!-- Vista Months -->\r\n @if (view === 'months') {\r\n <div class=\"calendar-grid months\">\r\n @for (m of months; let i = $index; track i) {\r\n <button\r\n class=\"day\"\r\n [class.today]=\"isThisMonth(m)\"\r\n [class.day-selected]=\"isSelectedMonth(i)\"\r\n [disabled]=\"isMonthDisabled(i)\"\r\n (click)=\"selectMonth(i)\"\r\n >\r\n {{ m }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n <!-- Vista Years -->\r\n @if (view === 'years') {\r\n <div class=\"calendar-grid years\">\r\n @for (y of decadeRange; track $index) {\r\n <button\r\n class=\"day\"\r\n [class.today]=\"y == currentYear\"\r\n (click)=\"selectYear(y)\"\r\n >\r\n {{ y }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n <div class=\"calendar-footer\">\r\n <ui-button\r\n color=\"red\"\r\n size=\"s\"\r\n type=\"ghost\"\r\n (click)=\"cleanInput()\"\r\n >{{'common.clear' | uicTranslate}}</ui-button\r\n >\r\n @if (isTodayAvailable()) {\r\n <ui-button\r\n color=\"blue\"\r\n size=\"s\"\r\n type=\"ghost\"\r\n (click)=\"pickToday()\"\r\n >{{'common.today' | uicTranslate}}</ui-button\r\n >\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [".date-picker{position:relative}.calendar{background:var(--white);border:1px solid var(--grey-300);border-radius:var(--input-radius);box-shadow:0 2px 6px #00000026;padding:.5rem;width:250px}.calendar-header{display:flex;gap:5px;align-items:center;margin-bottom:8px}.calendar-header span{-webkit-user-select:none;user-select:none;flex:1 1;cursor:pointer;font-size:.875rem;line-height:1.25rem;font-weight:500;transition:ease .3s;padding:.25rem;border-radius:6px;margin-right:3px}.calendar-header span:hover{background-color:var(--primary-100)}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-grid.months{grid-template-columns:repeat(3,1fr)}.calendar-grid.years{grid-template-columns:repeat(4,1fr)}.calendar-grid .empty{visibility:hidden}.weekday{font-size:.875rem}.day{padding:6px;border:none;background:transparent;border-radius:var(--button-radius);cursor:pointer;transition:ease .5s}.day:enabled:hover{color:var(--grey-950);background:var(--secondary-300)}.day:disabled{color:var(--grey-400);cursor:not-allowed}.today{box-shadow:0 0 0 3px var(--secondary-alpha)}.day-selected{background-color:var(--secondary-500);color:var(--white)}.calendar-footer{display:flex;padding-top:.25rem;border-top:solid 1px var(--grey-200);justify-content:space-between}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
|
|
1290
1346
|
}], propDecorators: { icon: [{
|
|
1291
1347
|
type: Input
|
|
1292
1348
|
}], iconColor: [{
|
|
@@ -1538,7 +1594,7 @@ class UicFileInputComponent extends base$a {
|
|
|
1538
1594
|
useExisting: forwardRef(() => UicFileInputComponent),
|
|
1539
1595
|
multi: true
|
|
1540
1596
|
}
|
|
1541
|
-
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fileinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'dragging':isDragging}\">\r\n <input\n #fileInput\n class=\"fileinput-native\"\n type=\"file\"\n (change)=\"onNativeInputChange($event)\"\n [attr.multiple]=\"multy ? '' : null\"\n [attr.accept]=\"acceptAttribute\"\n [disabled]=\"disabled || loading\"\n />\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"fileinput-content\" >\r\n @if (!disabled && !loading) {\r\n <ui-button\r\n type=\"bordered\"\r\n color=\"black\"\r\n size=\"s\"\r\n (click)=\"openFileBrowser()\"\r\n >Seleccionar</ui-button>\r\n }\r\n <div\r\n class=\"fileinput-reel\"\r\n (dragover)=\"onDragOver($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\"\r\n >\r\n @if (!files.length) {\r\n <div class=\"fileinput-empty\">\r\n Aun no hay archivos\r\n </div>\r\n } @else {\r\n @for (item of files; track $index) {\r\n <div class=\"fileinput-item\">\r\n <i class=\"fileinput-item__icon ri {{ getIcon(item) }}\" aria-hidden=\"true\"></i>\r\n <span (click)=\"downloadFile(item)\" class=\"fileinput-item__name\">{{item.name}}</span>\r\n <ui-button\r\n size=\"s\"\r\n [iconOnly]=\"true\"\r\n type=\"ghost\"\r\n icon=\"ri-close-line\"\r\n (click)=\"removeFile($index)\"\r\n [disabled]=\"disabled || loading\"\r\n ></ui-button>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</ui-input-wrapper>\n", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n", ".fileinput{background-color:#fff;border:dashed 1px var(--grey-300);display:flex;align-items:center;border-radius:var(--input-radius);position:relative;transition:border-color .2s ease,background-color .2s ease}.fileinput.dragging{border-color:var(--primary-500, var(--blue-500));background-color:#1d4ed814}.fileinput-native{display:none}.fileinput-content{display:flex;padding:.25rem;gap:.25rem;flex:1 1;align-items:center}.fileinput-reel{display:flex;flex-wrap:wrap;flex:1 1;gap:10px;min-height:32px;align-items:center}.fileinput-item{display:flex;align-items:center;font-size:12px;line-height:12px;gap:10px;padding:0 8px;border-radius:5px;background-color:var(--grey-100);min-height:32px}.fileinput-item__icon{font-size:18px;color:var(--grey-600)}.fileinput-item__name{max-width:180px;text-decoration:underline;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fileinput-item__name:hover{color:var(--primary-500)}.fileinput-empty{font-size:12px;padding:0 5px;color:var(--grey-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
|
|
1597
|
+
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fileinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'dragging':isDragging}\">\r\n <input\r\n #fileInput\r\n class=\"fileinput-native\"\r\n type=\"file\"\r\n (change)=\"onNativeInputChange($event)\"\r\n [attr.multiple]=\"multy ? '' : null\"\r\n [attr.accept]=\"acceptAttribute\"\r\n [disabled]=\"disabled || loading\"\r\n />\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"fileinput-content\" >\r\n @if (!disabled && !loading) {\r\n <ui-button\r\n type=\"bordered\"\r\n color=\"black\"\r\n size=\"s\"\r\n (click)=\"openFileBrowser()\"\r\n >Seleccionar</ui-button>\r\n }\r\n <div\r\n class=\"fileinput-reel\"\r\n (dragover)=\"onDragOver($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\"\r\n >\r\n @if (!files.length) {\r\n <div class=\"fileinput-empty\">\r\n Aun no hay archivos\r\n </div>\r\n } @else {\r\n @for (item of files; track $index) {\r\n <div class=\"fileinput-item\">\r\n <i class=\"fileinput-item__icon ri {{ getIcon(item) }}\" aria-hidden=\"true\"></i>\r\n <span (click)=\"downloadFile(item)\" class=\"fileinput-item__name\">{{item.name}}</span>\r\n <ui-button\r\n size=\"s\"\r\n [iconOnly]=\"true\"\r\n type=\"ghost\"\r\n icon=\"ri-close-line\"\r\n (click)=\"removeFile($index)\"\r\n [disabled]=\"disabled || loading\"\r\n ></ui-button>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n", ".fileinput{background-color:#fff;border:dashed 1px var(--grey-300);display:flex;align-items:center;border-radius:var(--input-radius);position:relative;transition:border-color .2s ease,background-color .2s ease}.fileinput.dragging{border-color:var(--primary-500, var(--blue-500));background-color:#1d4ed814}.fileinput-native{display:none}.fileinput-content{display:flex;padding:.25rem;gap:.25rem;flex:1 1;align-items:center}.fileinput-reel{display:flex;flex-wrap:wrap;flex:1 1;gap:10px;min-height:32px;align-items:center}.fileinput-item{display:flex;align-items:center;font-size:12px;line-height:12px;gap:10px;padding:0 8px;border-radius:5px;background-color:var(--grey-100);min-height:32px}.fileinput-item__icon{font-size:18px;color:var(--grey-600)}.fileinput-item__name{max-width:180px;text-decoration:underline;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fileinput-item__name:hover{color:var(--primary-500)}.fileinput-empty{font-size:12px;padding:0 5px;color:var(--grey-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
|
|
1542
1598
|
}
|
|
1543
1599
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFileInputComponent, decorators: [{
|
|
1544
1600
|
type: Component,
|
|
@@ -1548,7 +1604,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1548
1604
|
useExisting: forwardRef(() => UicFileInputComponent),
|
|
1549
1605
|
multi: true
|
|
1550
1606
|
}
|
|
1551
|
-
], template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fileinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'dragging':isDragging}\">\r\n <input\n #fileInput\n class=\"fileinput-native\"\n type=\"file\"\n (change)=\"onNativeInputChange($event)\"\n [attr.multiple]=\"multy ? '' : null\"\n [attr.accept]=\"acceptAttribute\"\n [disabled]=\"disabled || loading\"\n />\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"fileinput-content\" >\r\n @if (!disabled && !loading) {\r\n <ui-button\r\n type=\"bordered\"\r\n color=\"black\"\r\n size=\"s\"\r\n (click)=\"openFileBrowser()\"\r\n >Seleccionar</ui-button>\r\n }\r\n <div\r\n class=\"fileinput-reel\"\r\n (dragover)=\"onDragOver($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\"\r\n >\r\n @if (!files.length) {\r\n <div class=\"fileinput-empty\">\r\n Aun no hay archivos\r\n </div>\r\n } @else {\r\n @for (item of files; track $index) {\r\n <div class=\"fileinput-item\">\r\n <i class=\"fileinput-item__icon ri {{ getIcon(item) }}\" aria-hidden=\"true\"></i>\r\n <span (click)=\"downloadFile(item)\" class=\"fileinput-item__name\">{{item.name}}</span>\r\n <ui-button\r\n size=\"s\"\r\n [iconOnly]=\"true\"\r\n type=\"ghost\"\r\n icon=\"ri-close-line\"\r\n (click)=\"removeFile($index)\"\r\n [disabled]=\"disabled || loading\"\r\n ></ui-button>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</ui-input-wrapper>\n", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n", ".fileinput{background-color:#fff;border:dashed 1px var(--grey-300);display:flex;align-items:center;border-radius:var(--input-radius);position:relative;transition:border-color .2s ease,background-color .2s ease}.fileinput.dragging{border-color:var(--primary-500, var(--blue-500));background-color:#1d4ed814}.fileinput-native{display:none}.fileinput-content{display:flex;padding:.25rem;gap:.25rem;flex:1 1;align-items:center}.fileinput-reel{display:flex;flex-wrap:wrap;flex:1 1;gap:10px;min-height:32px;align-items:center}.fileinput-item{display:flex;align-items:center;font-size:12px;line-height:12px;gap:10px;padding:0 8px;border-radius:5px;background-color:var(--grey-100);min-height:32px}.fileinput-item__icon{font-size:18px;color:var(--grey-600)}.fileinput-item__name{max-width:180px;text-decoration:underline;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fileinput-item__name:hover{color:var(--primary-500)}.fileinput-empty{font-size:12px;padding:0 5px;color:var(--grey-500)}\n"] }]
|
|
1607
|
+
], template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fileinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'dragging':isDragging}\">\r\n <input\r\n #fileInput\r\n class=\"fileinput-native\"\r\n type=\"file\"\r\n (change)=\"onNativeInputChange($event)\"\r\n [attr.multiple]=\"multy ? '' : null\"\r\n [attr.accept]=\"acceptAttribute\"\r\n [disabled]=\"disabled || loading\"\r\n />\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"fileinput-content\" >\r\n @if (!disabled && !loading) {\r\n <ui-button\r\n type=\"bordered\"\r\n color=\"black\"\r\n size=\"s\"\r\n (click)=\"openFileBrowser()\"\r\n >Seleccionar</ui-button>\r\n }\r\n <div\r\n class=\"fileinput-reel\"\r\n (dragover)=\"onDragOver($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\"\r\n >\r\n @if (!files.length) {\r\n <div class=\"fileinput-empty\">\r\n Aun no hay archivos\r\n </div>\r\n } @else {\r\n @for (item of files; track $index) {\r\n <div class=\"fileinput-item\">\r\n <i class=\"fileinput-item__icon ri {{ getIcon(item) }}\" aria-hidden=\"true\"></i>\r\n <span (click)=\"downloadFile(item)\" class=\"fileinput-item__name\">{{item.name}}</span>\r\n <ui-button\r\n size=\"s\"\r\n [iconOnly]=\"true\"\r\n type=\"ghost\"\r\n icon=\"ri-close-line\"\r\n (click)=\"removeFile($index)\"\r\n [disabled]=\"disabled || loading\"\r\n ></ui-button>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n", ".fileinput{background-color:#fff;border:dashed 1px var(--grey-300);display:flex;align-items:center;border-radius:var(--input-radius);position:relative;transition:border-color .2s ease,background-color .2s ease}.fileinput.dragging{border-color:var(--primary-500, var(--blue-500));background-color:#1d4ed814}.fileinput-native{display:none}.fileinput-content{display:flex;padding:.25rem;gap:.25rem;flex:1 1;align-items:center}.fileinput-reel{display:flex;flex-wrap:wrap;flex:1 1;gap:10px;min-height:32px;align-items:center}.fileinput-item{display:flex;align-items:center;font-size:12px;line-height:12px;gap:10px;padding:0 8px;border-radius:5px;background-color:var(--grey-100);min-height:32px}.fileinput-item__icon{font-size:18px;color:var(--grey-600)}.fileinput-item__name{max-width:180px;text-decoration:underline;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fileinput-item__name:hover{color:var(--primary-500)}.fileinput-empty{font-size:12px;padding:0 5px;color:var(--grey-500)}\n"] }]
|
|
1552
1608
|
}], propDecorators: { icon: [{
|
|
1553
1609
|
type: Input
|
|
1554
1610
|
}], iconColor: [{
|
|
@@ -1601,11 +1657,11 @@ class UicInputComponent {
|
|
|
1601
1657
|
}, 200);
|
|
1602
1658
|
}
|
|
1603
1659
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1604
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicInputComponent, isStandalone: true, selector: "ui-input", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", internalIconColor: "internalIconColor", size: "size", label: "label", error: "error", tip: "tip", disabled: "disabled", loading: "loading" }, outputs: { clickButton: "clickButton" }, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\"> \r\n <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}} f-{{internalIconColor}}\" ></i>\r\n }\r\n <div class=\"input-container\" >\r\n <ng-content></ng-content>\r\n </div> \r\n </div>\r\n <span class=\"char-counter\" style=\"padding-top: 1px;\" >\r\n <ng-content select=\"[counter]\"></ng-content>\r\n </span>\r\n</ui-input-wrapper>", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
|
|
1660
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicInputComponent, isStandalone: true, selector: "ui-input", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", internalIconColor: "internalIconColor", size: "size", label: "label", error: "error", tip: "tip", disabled: "disabled", loading: "loading" }, outputs: { clickButton: "clickButton" }, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\"> \r\n <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}} f-{{internalIconColor}}\" ></i>\r\n }\r\n <div class=\"input-container\" >\r\n <ng-content></ng-content>\r\n </div> \r\n </div>\r\n <span class=\"char-counter\" style=\"padding-top: 1px;\" >\r\n <ng-content select=\"[counter]\"></ng-content>\r\n </span>\r\n</ui-input-wrapper>", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
|
|
1605
1661
|
}
|
|
1606
1662
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicInputComponent, decorators: [{
|
|
1607
1663
|
type: Component,
|
|
1608
|
-
args: [{ selector: 'ui-input', imports: [CommonModule, InputWrapperComponent], template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\"> \r\n <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}} f-{{internalIconColor}}\" ></i>\r\n }\r\n <div class=\"input-container\" >\r\n <ng-content></ng-content>\r\n </div> \r\n </div>\r\n <span class=\"char-counter\" style=\"padding-top: 1px;\" >\r\n <ng-content select=\"[counter]\"></ng-content>\r\n </span>\r\n</ui-input-wrapper>", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
|
|
1664
|
+
args: [{ selector: 'ui-input', imports: [CommonModule, InputWrapperComponent], template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\"> \r\n <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}} f-{{internalIconColor}}\" ></i>\r\n }\r\n <div class=\"input-container\" >\r\n <ng-content></ng-content>\r\n </div> \r\n </div>\r\n <span class=\"char-counter\" style=\"padding-top: 1px;\" >\r\n <ng-content select=\"[counter]\"></ng-content>\r\n </span>\r\n</ui-input-wrapper>", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
|
|
1609
1665
|
}], propDecorators: { icon: [{
|
|
1610
1666
|
type: Input
|
|
1611
1667
|
}], iconColor: [{
|
|
@@ -1735,7 +1791,7 @@ class UicMultySelectComponent extends base$9 {
|
|
|
1735
1791
|
useExisting: forwardRef(() => UicMultySelectComponent),
|
|
1736
1792
|
multi: true
|
|
1737
1793
|
}
|
|
1738
|
-
], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fakeinput-wrapp\" > \r\n <!-- INPUT -->\r\n <div (click)=\"openList()\" class=\"fakeinput\" #fakeinput \r\n [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':loading}\" style=\"cursor: pointer;\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"fakeinput-emptytext\" [class.disabled-placeholder]=\"disabled\" >{{'select.pending_text' | uicTranslate}}</div>\r\n @if (!disabled && !loading) {\r\n <i class=\"ri-arrow-down-s-line\"></i>\r\n }\r\n </div> \r\n <!-- DESPLEGABLE -->\r\n <ng-template #dropdownTemplate >\r\n <div class=\"input-options\">\r\n <div class=\"multyoptions-header\">\r\n <ui-checkbox [noPadding]=\"true\"\r\n [ngModel]=\"allSelected\" \r\n (ngModelChange)=\"toggleAll($event)\"\r\n [placeholder]=\"'common.all' | uicTranslate\"></ui-checkbox>\r\n </div>\r\n <!-- OPCIONES -->\r\n <div class=\"input-option-scroll\"> \r\n @for (option of options; track $index) {\r\n <div (click)=\"toggleOption(option.id??option.text)\" class=\"input-multyoption\">\r\n <ui-checkbox \r\n [ngModel]=\"selectedSet.has(option.id??option.text)\"\r\n [noPadding]=\"true\" \r\n [placeholder]=\"option.text\"></ui-checkbox>\r\n </div> \r\n }\r\n @if (options.length == 0) {\r\n <div class=\"fakeinput-alert t-disabled\">{{'select.empty' | uicTranslate}}</div>\r\n }\r\n </div>\r\n <!-- <div class=\"multyoptions-footer\">\r\n <ui-button (click)=\"closeList()\" color=\"black\" type=\"bordered\" size=\"s\">Cancelar</ui-button>\r\n <ui-button (click)=\"applySelection()\" color=\"black\" size=\"s\">Aplicar</ui-button>\r\n </div> -->\r\n </div>\r\n </ng-template>\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n", ".input-multyoption{display:flex;align-items:center;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-multyoption-focused{background-color:var(--primary-500)}.input-multyoption:hover{background-color:var(--secondary-100);cursor:pointer}.multyoptions-header{display:flex;align-items:center;gap:10px;padding:5px 3px;border-bottom:solid 1px var(--grey-300)}.multyoptions-footer{display:flex;padding:4px;justify-content:space-around;border-top:solid 1px var(--grey-300)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
1794
|
+
], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fakeinput-wrapp\" > \r\n <!-- INPUT -->\r\n <div (click)=\"openList()\" class=\"fakeinput\" #fakeinput \r\n [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':loading}\" style=\"cursor: pointer;\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"fakeinput-emptytext\" [class.disabled-placeholder]=\"disabled\" >{{'select.pending_text' | uicTranslate}}</div>\r\n @if (!disabled && !loading) {\r\n <i class=\"ri-arrow-down-s-line\"></i>\r\n }\r\n </div> \r\n <!-- DESPLEGABLE -->\r\n <ng-template #dropdownTemplate >\r\n <div class=\"input-options\">\r\n <div class=\"multyoptions-header\">\r\n <ui-checkbox [noPadding]=\"true\"\r\n [ngModel]=\"allSelected\" \r\n (ngModelChange)=\"toggleAll($event)\"\r\n [placeholder]=\"'common.all' | uicTranslate\"></ui-checkbox>\r\n </div>\r\n <!-- OPCIONES -->\r\n <div class=\"input-option-scroll\"> \r\n @for (option of options; track $index) {\r\n <div (click)=\"toggleOption(option.id??option.text)\" class=\"input-multyoption\">\r\n <ui-checkbox \r\n [ngModel]=\"selectedSet.has(option.id??option.text)\"\r\n [noPadding]=\"true\" \r\n [placeholder]=\"option.text\"></ui-checkbox>\r\n </div> \r\n }\r\n @if (options.length == 0) {\r\n <div class=\"fakeinput-alert t-disabled\">{{'select.empty' | uicTranslate}}</div>\r\n }\r\n </div>\r\n <!-- <div class=\"multyoptions-footer\">\r\n <ui-button (click)=\"closeList()\" color=\"black\" type=\"bordered\" size=\"s\">Cancelar</ui-button>\r\n <ui-button (click)=\"applySelection()\" color=\"black\" size=\"s\">Aplicar</ui-button>\r\n </div> -->\r\n </div>\r\n </ng-template>\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n", ".input-multyoption{display:flex;align-items:center;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-multyoption-focused{background-color:var(--primary-500)}.input-multyoption:hover{background-color:var(--secondary-100);cursor:pointer}.multyoptions-header{display:flex;align-items:center;gap:10px;padding:5px 3px;border-bottom:solid 1px var(--grey-300)}.multyoptions-footer{display:flex;padding:4px;justify-content:space-around;border-top:solid 1px var(--grey-300)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
1739
1795
|
}
|
|
1740
1796
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicMultySelectComponent, decorators: [{
|
|
1741
1797
|
type: Component,
|
|
@@ -1745,7 +1801,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1745
1801
|
useExisting: forwardRef(() => UicMultySelectComponent),
|
|
1746
1802
|
multi: true
|
|
1747
1803
|
}
|
|
1748
|
-
], template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fakeinput-wrapp\" > \r\n <!-- INPUT -->\r\n <div (click)=\"openList()\" class=\"fakeinput\" #fakeinput \r\n [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':loading}\" style=\"cursor: pointer;\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"fakeinput-emptytext\" [class.disabled-placeholder]=\"disabled\" >{{'select.pending_text' | uicTranslate}}</div>\r\n @if (!disabled && !loading) {\r\n <i class=\"ri-arrow-down-s-line\"></i>\r\n }\r\n </div> \r\n <!-- DESPLEGABLE -->\r\n <ng-template #dropdownTemplate >\r\n <div class=\"input-options\">\r\n <div class=\"multyoptions-header\">\r\n <ui-checkbox [noPadding]=\"true\"\r\n [ngModel]=\"allSelected\" \r\n (ngModelChange)=\"toggleAll($event)\"\r\n [placeholder]=\"'common.all' | uicTranslate\"></ui-checkbox>\r\n </div>\r\n <!-- OPCIONES -->\r\n <div class=\"input-option-scroll\"> \r\n @for (option of options; track $index) {\r\n <div (click)=\"toggleOption(option.id??option.text)\" class=\"input-multyoption\">\r\n <ui-checkbox \r\n [ngModel]=\"selectedSet.has(option.id??option.text)\"\r\n [noPadding]=\"true\" \r\n [placeholder]=\"option.text\"></ui-checkbox>\r\n </div> \r\n }\r\n @if (options.length == 0) {\r\n <div class=\"fakeinput-alert t-disabled\">{{'select.empty' | uicTranslate}}</div>\r\n }\r\n </div>\r\n <!-- <div class=\"multyoptions-footer\">\r\n <ui-button (click)=\"closeList()\" color=\"black\" type=\"bordered\" size=\"s\">Cancelar</ui-button>\r\n <ui-button (click)=\"applySelection()\" color=\"black\" size=\"s\">Aplicar</ui-button>\r\n </div> -->\r\n </div>\r\n </ng-template>\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n", ".input-multyoption{display:flex;align-items:center;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-multyoption-focused{background-color:var(--primary-500)}.input-multyoption:hover{background-color:var(--secondary-100);cursor:pointer}.multyoptions-header{display:flex;align-items:center;gap:10px;padding:5px 3px;border-bottom:solid 1px var(--grey-300)}.multyoptions-footer{display:flex;padding:4px;justify-content:space-around;border-top:solid 1px var(--grey-300)}\n"] }]
|
|
1804
|
+
], template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fakeinput-wrapp\" > \r\n <!-- INPUT -->\r\n <div (click)=\"openList()\" class=\"fakeinput\" #fakeinput \r\n [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':loading}\" style=\"cursor: pointer;\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"fakeinput-emptytext\" [class.disabled-placeholder]=\"disabled\" >{{'select.pending_text' | uicTranslate}}</div>\r\n @if (!disabled && !loading) {\r\n <i class=\"ri-arrow-down-s-line\"></i>\r\n }\r\n </div> \r\n <!-- DESPLEGABLE -->\r\n <ng-template #dropdownTemplate >\r\n <div class=\"input-options\">\r\n <div class=\"multyoptions-header\">\r\n <ui-checkbox [noPadding]=\"true\"\r\n [ngModel]=\"allSelected\" \r\n (ngModelChange)=\"toggleAll($event)\"\r\n [placeholder]=\"'common.all' | uicTranslate\"></ui-checkbox>\r\n </div>\r\n <!-- OPCIONES -->\r\n <div class=\"input-option-scroll\"> \r\n @for (option of options; track $index) {\r\n <div (click)=\"toggleOption(option.id??option.text)\" class=\"input-multyoption\">\r\n <ui-checkbox \r\n [ngModel]=\"selectedSet.has(option.id??option.text)\"\r\n [noPadding]=\"true\" \r\n [placeholder]=\"option.text\"></ui-checkbox>\r\n </div> \r\n }\r\n @if (options.length == 0) {\r\n <div class=\"fakeinput-alert t-disabled\">{{'select.empty' | uicTranslate}}</div>\r\n }\r\n </div>\r\n <!-- <div class=\"multyoptions-footer\">\r\n <ui-button (click)=\"closeList()\" color=\"black\" type=\"bordered\" size=\"s\">Cancelar</ui-button>\r\n <ui-button (click)=\"applySelection()\" color=\"black\" size=\"s\">Aplicar</ui-button>\r\n </div> -->\r\n </div>\r\n </ng-template>\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n", ".input-multyoption{display:flex;align-items:center;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-multyoption-focused{background-color:var(--primary-500)}.input-multyoption:hover{background-color:var(--secondary-100);cursor:pointer}.multyoptions-header{display:flex;align-items:center;gap:10px;padding:5px 3px;border-bottom:solid 1px var(--grey-300)}.multyoptions-footer{display:flex;padding:4px;justify-content:space-around;border-top:solid 1px var(--grey-300)}\n"] }]
|
|
1749
1805
|
}], propDecorators: { icon: [{
|
|
1750
1806
|
type: Input
|
|
1751
1807
|
}], iconColor: [{
|
|
@@ -2056,7 +2112,7 @@ class UicPhoneInputComponent extends base$8 {
|
|
|
2056
2112
|
useExisting: forwardRef(() => UicPhoneInputComponent),
|
|
2057
2113
|
multi: true
|
|
2058
2114
|
}
|
|
2059
|
-
], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div\r\n class=\"fakeinput phone-input\"\r\n [ngClass]=\"{\r\n errorinput: error,\r\n disabledinput: disabled,\r\n 'loading-input': loading,\r\n open: dropdownOpen\r\n }\"\r\n >\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{ internalIcon }}\"></i>\r\n }\r\n \r\n <button\r\n type=\"button\"\r\n class=\"phone-input__selector\"\r\n (click)=\"toggleDropdown()\"\r\n [disabled]=\"disabled || loading\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-expanded]=\"dropdownOpen\"\r\n [attr.aria-controls]=\"dropdownOpen ? dropdownId : null\"\r\n [attr.aria-label]=\"'phone_input.aria_country_code' | uicTranslate:{country: selectedCountry.name, dialCode: selectedCountry.dialCode}\"\r\n >\r\n <img\r\n class=\"phone-input__flag\"\r\n [src]=\"getFlagUrl(selectedCountry.iso2)\"\r\n [alt]=\"selectedCountry.name\"\r\n />\r\n <i class=\"ri-arrow-down-s-line phone-input__chevron\" aria-hidden=\"true\"></i>\r\n </button>\r\n <div class=\"phone-input__divider\" aria-hidden=\"true\"></div>\r\n <div class=\"phone-input__dial\">+{{ selectedCountry.dialCode }}</div>\r\n \r\n \r\n <input\r\n type=\"tel\"\r\n class=\"phone-input__field\"\r\n [attr.placeholder]=\"placeholder | uicTranslate\"\r\n [disabled]=\"disabled || loading\"\r\n inputmode=\"tel\"\r\n [value]=\"phoneNumber\"\r\n (input)=\"onNumberInput($event)\"\r\n (blur)=\"onBlur()\"\r\n />\r\n </div>\r\n</ui-input-wrapper>\r\n\r\n<ng-template #dropdownTemplate>\r\n <datalist class=\"phone-input__dropdown\" [attr.id]=\"dropdownId\">\r\n <div class=\"phone-input__search\">\r\n <i class=\"ri-search-line\"></i>\r\n <input\r\n #searchInput\r\n type=\"text\"\r\n [value]=\"searchTerm\"\r\n (input)=\"onSearchChange($event)\"\r\n [placeholder]=\"'phone_input.search_country' | uicTranslate\"\r\n autocomplete=\"off\"\r\n />\r\n @if (searchTerm) {\r\n <button type=\"button\" class=\"phone-input__clear\" (click)=\"clearSearch()\" [attr.aria-label]=\"'phone_input.clear_search' | uicTranslate\">\r\n <i class=\"ri-close-line\"></i>\r\n </button>\r\n }\r\n </div>\r\n\r\n <div class=\"phone-input__list\">\r\n @for (country of filteredCountries; track country.iso2) {\r\n <button\r\n type=\"button\"\r\n class=\"phone-input__option\"\r\n (click)=\"selectCountry(country)\"\r\n [attr.aria-selected]=\"country.iso2 === selectedCountry.iso2\"\r\n [attr.data-iso]=\"country.iso2\"\r\n [attr.title]=\"country.name + ' +' + country.dialCode\"\r\n [attr.aria-label]=\"country.name + ' +' + country.dialCode\"\r\n >\r\n <img\r\n class=\"phone-input__flag\"\r\n [src]=\"getFlagUrl(country.iso2)\"\r\n [alt]=\"country.name\"\r\n />\r\n {{country.name}}\r\n <span class=\"phone-input__dial\">(+{{ country.dialCode }})</span>\r\n </button>\r\n }\r\n\r\n @if (filteredCountries.length === 0) {\r\n <div class=\"phone-input__empty\">{{'phone_input.no_results' | uicTranslate}}</div>\r\n }\r\n </div>\r\n </datalist>\r\n</ng-template>\r\n", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n", ".phone-input{padding:0}.phone-input.open .phone-input__chevron{transform:rotate(180deg)}.phone-input__selector{display:flex;align-items:center;background:transparent;border:none;height:calc(4 * var(--form-ref));padding:0 0 0 3px;gap:2px;color:var(--grey-900);font-size:max(var(--form-ref) + 4px,14px);cursor:pointer;transition:.2s ease}.phone-input__selector:hover{background-color:var(--grey-100)}.phone-input__selector:disabled{cursor:not-allowed;color:var(--disabled-color)}.phone-input__selector:focus-visible{outline:none}.phone-input__flag{width:18px;height:12px;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px #0000000d}.phone-input__dial{padding:0 5px;font-weight:600;color:var(--grey-700)}.phone-input__chevron{font-size:1rem;color:var(--grey-500);transition:transform .2s ease}.phone-input__divider{width:1px;background-color:var(--grey-200);align-self:stretch}.phone-input__field{flex:1 1 auto;border:none;outline:none;padding:9px var(--form-ref);font-size:max(var(--form-ref) + 4px,14px);color:var(--grey-900);background:transparent}.phone-input__field::placeholder{color:var(--grey-400)}.phone-input__field:disabled{background-color:transparent;color:var(--disabled-color);cursor:not-allowed}.phone-input__dropdown{margin-top:4px;border-radius:var(--input-radius);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;border:1px solid var(--grey-200);background-color:var(--white);width:100%;max-height:280px;display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:10}.phone-input__search{display:flex;align-items:center;padding:6px 10px;border-bottom:1px solid var(--grey-200);gap:6px}.phone-input__search>i{color:var(--grey-500);font-size:1rem}.phone-input__search>input{flex:1;border:none;outline:none;font-size:.875rem;color:var(--grey-900);background:transparent}.phone-input__search>input::placeholder{color:var(--grey-400)}.phone-input__clear{border:none;background:transparent;cursor:pointer;color:var(--grey-400);padding:2px;display:inline-flex;align-items:center;justify-content:center}.phone-input__clear:hover{color:var(--grey-600)}.phone-input__clear:focus-visible{outline:none}.phone-input__list{max-height:220px;overflow-y:auto;display:flex;padding:5px;flex-direction:column}.phone-input__option{display:flex;gap:5px;width:100%;background:transparent;border:none;padding:5px 8px;cursor:pointer;font-size:.75rem;color:var(--grey-900);transition:background-color .2s ease;text-align:left}.phone-input__option:hover{background-color:var(--secondary-100)}.phone-input__option[aria-selected=true]{background-color:var(--primary-100);color:var(--primary-700)}.phone-input__option .phone-input__dial{font-weight:400;padding:0;color:var(--grey-500)}.phone-input__empty{padding:12px;font-size:.875rem;color:var(--grey-500);text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
2115
|
+
], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div\r\n class=\"fakeinput phone-input\"\r\n [ngClass]=\"{\r\n errorinput: error,\r\n disabledinput: disabled,\r\n 'loading-input': loading,\r\n open: dropdownOpen\r\n }\"\r\n >\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{ internalIcon }}\"></i>\r\n }\r\n \r\n <button\r\n type=\"button\"\r\n class=\"phone-input__selector\"\r\n (click)=\"toggleDropdown()\"\r\n [disabled]=\"disabled || loading\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-expanded]=\"dropdownOpen\"\r\n [attr.aria-controls]=\"dropdownOpen ? dropdownId : null\"\r\n [attr.aria-label]=\"'phone_input.aria_country_code' | uicTranslate:{country: selectedCountry.name, dialCode: selectedCountry.dialCode}\"\r\n >\r\n <img\r\n class=\"phone-input__flag\"\r\n [src]=\"getFlagUrl(selectedCountry.iso2)\"\r\n [alt]=\"selectedCountry.name\"\r\n />\r\n <i class=\"ri-arrow-down-s-line phone-input__chevron\" aria-hidden=\"true\"></i>\r\n </button>\r\n <div class=\"phone-input__divider\" aria-hidden=\"true\"></div>\r\n <div class=\"phone-input__dial\">+{{ selectedCountry.dialCode }}</div>\r\n \r\n \r\n <input\r\n type=\"tel\"\r\n class=\"phone-input__field\"\r\n [attr.placeholder]=\"placeholder | uicTranslate\"\r\n [disabled]=\"disabled || loading\"\r\n inputmode=\"tel\"\r\n [value]=\"phoneNumber\"\r\n (input)=\"onNumberInput($event)\"\r\n (blur)=\"onBlur()\"\r\n />\r\n </div>\r\n</ui-input-wrapper>\r\n\r\n<ng-template #dropdownTemplate>\r\n <datalist class=\"phone-input__dropdown\" [attr.id]=\"dropdownId\">\r\n <div class=\"phone-input__search\">\r\n <i class=\"ri-search-line\"></i>\r\n <input\r\n #searchInput\r\n type=\"text\"\r\n [value]=\"searchTerm\"\r\n (input)=\"onSearchChange($event)\"\r\n [placeholder]=\"'phone_input.search_country' | uicTranslate\"\r\n autocomplete=\"off\"\r\n />\r\n @if (searchTerm) {\r\n <button type=\"button\" class=\"phone-input__clear\" (click)=\"clearSearch()\" [attr.aria-label]=\"'phone_input.clear_search' | uicTranslate\">\r\n <i class=\"ri-close-line\"></i>\r\n </button>\r\n }\r\n </div>\r\n\r\n <div class=\"phone-input__list\">\r\n @for (country of filteredCountries; track country.iso2) {\r\n <button\r\n type=\"button\"\r\n class=\"phone-input__option\"\r\n (click)=\"selectCountry(country)\"\r\n [attr.aria-selected]=\"country.iso2 === selectedCountry.iso2\"\r\n [attr.data-iso]=\"country.iso2\"\r\n [attr.title]=\"country.name + ' +' + country.dialCode\"\r\n [attr.aria-label]=\"country.name + ' +' + country.dialCode\"\r\n >\r\n <img\r\n class=\"phone-input__flag\"\r\n [src]=\"getFlagUrl(country.iso2)\"\r\n [alt]=\"country.name\"\r\n />\r\n {{country.name}}\r\n <span class=\"phone-input__dial\">(+{{ country.dialCode }})</span>\r\n </button>\r\n }\r\n\r\n @if (filteredCountries.length === 0) {\r\n <div class=\"phone-input__empty\">{{'phone_input.no_results' | uicTranslate}}</div>\r\n }\r\n </div>\r\n </datalist>\r\n</ng-template>\r\n", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n", ".phone-input{padding:0}.phone-input.open .phone-input__chevron{transform:rotate(180deg)}.phone-input__selector{display:flex;align-items:center;background:transparent;border:none;height:calc(4 * var(--form-ref));padding:0 0 0 3px;gap:2px;color:var(--grey-900);font-size:max(var(--form-ref) + 4px,14px);cursor:pointer;transition:.2s ease}.phone-input__selector:hover{background-color:var(--grey-100)}.phone-input__selector:disabled{cursor:not-allowed;color:var(--disabled-color)}.phone-input__selector:focus-visible{outline:none}.phone-input__flag{width:18px;height:12px;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px #0000000d}.phone-input__dial{padding:0 5px;font-weight:600;color:var(--grey-700)}.phone-input__chevron{font-size:1rem;color:var(--grey-500);transition:transform .2s ease}.phone-input__divider{width:1px;background-color:var(--grey-200);align-self:stretch}.phone-input__field{flex:1 1 auto;border:none;outline:none;padding:9px var(--form-ref);font-size:max(var(--form-ref) + 4px,14px);color:var(--grey-900);background:transparent}.phone-input__field::placeholder{color:var(--grey-400)}.phone-input__field:disabled{background-color:transparent;color:var(--disabled-color);cursor:not-allowed}.phone-input__dropdown{margin-top:4px;border-radius:var(--input-radius);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;border:1px solid var(--grey-200);background-color:var(--white);width:100%;max-height:280px;display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:10}.phone-input__search{display:flex;align-items:center;padding:6px 10px;border-bottom:1px solid var(--grey-200);gap:6px}.phone-input__search>i{color:var(--grey-500);font-size:1rem}.phone-input__search>input{flex:1;border:none;outline:none;font-size:.875rem;color:var(--grey-900);background:transparent}.phone-input__search>input::placeholder{color:var(--grey-400)}.phone-input__clear{border:none;background:transparent;cursor:pointer;color:var(--grey-400);padding:2px;display:inline-flex;align-items:center;justify-content:center}.phone-input__clear:hover{color:var(--grey-600)}.phone-input__clear:focus-visible{outline:none}.phone-input__list{max-height:220px;overflow-y:auto;display:flex;padding:5px;flex-direction:column}.phone-input__option{display:flex;gap:5px;width:100%;background:transparent;border:none;padding:5px 8px;cursor:pointer;font-size:.75rem;color:var(--grey-900);transition:background-color .2s ease;text-align:left}.phone-input__option:hover{background-color:var(--secondary-100)}.phone-input__option[aria-selected=true]{background-color:var(--primary-100);color:var(--primary-700)}.phone-input__option .phone-input__dial{font-weight:400;padding:0;color:var(--grey-500)}.phone-input__empty{padding:12px;font-size:.875rem;color:var(--grey-500);text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
2060
2116
|
}
|
|
2061
2117
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPhoneInputComponent, decorators: [{
|
|
2062
2118
|
type: Component,
|
|
@@ -2066,7 +2122,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2066
2122
|
useExisting: forwardRef(() => UicPhoneInputComponent),
|
|
2067
2123
|
multi: true
|
|
2068
2124
|
}
|
|
2069
|
-
], template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div\r\n class=\"fakeinput phone-input\"\r\n [ngClass]=\"{\r\n errorinput: error,\r\n disabledinput: disabled,\r\n 'loading-input': loading,\r\n open: dropdownOpen\r\n }\"\r\n >\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{ internalIcon }}\"></i>\r\n }\r\n \r\n <button\r\n type=\"button\"\r\n class=\"phone-input__selector\"\r\n (click)=\"toggleDropdown()\"\r\n [disabled]=\"disabled || loading\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-expanded]=\"dropdownOpen\"\r\n [attr.aria-controls]=\"dropdownOpen ? dropdownId : null\"\r\n [attr.aria-label]=\"'phone_input.aria_country_code' | uicTranslate:{country: selectedCountry.name, dialCode: selectedCountry.dialCode}\"\r\n >\r\n <img\r\n class=\"phone-input__flag\"\r\n [src]=\"getFlagUrl(selectedCountry.iso2)\"\r\n [alt]=\"selectedCountry.name\"\r\n />\r\n <i class=\"ri-arrow-down-s-line phone-input__chevron\" aria-hidden=\"true\"></i>\r\n </button>\r\n <div class=\"phone-input__divider\" aria-hidden=\"true\"></div>\r\n <div class=\"phone-input__dial\">+{{ selectedCountry.dialCode }}</div>\r\n \r\n \r\n <input\r\n type=\"tel\"\r\n class=\"phone-input__field\"\r\n [attr.placeholder]=\"placeholder | uicTranslate\"\r\n [disabled]=\"disabled || loading\"\r\n inputmode=\"tel\"\r\n [value]=\"phoneNumber\"\r\n (input)=\"onNumberInput($event)\"\r\n (blur)=\"onBlur()\"\r\n />\r\n </div>\r\n</ui-input-wrapper>\r\n\r\n<ng-template #dropdownTemplate>\r\n <datalist class=\"phone-input__dropdown\" [attr.id]=\"dropdownId\">\r\n <div class=\"phone-input__search\">\r\n <i class=\"ri-search-line\"></i>\r\n <input\r\n #searchInput\r\n type=\"text\"\r\n [value]=\"searchTerm\"\r\n (input)=\"onSearchChange($event)\"\r\n [placeholder]=\"'phone_input.search_country' | uicTranslate\"\r\n autocomplete=\"off\"\r\n />\r\n @if (searchTerm) {\r\n <button type=\"button\" class=\"phone-input__clear\" (click)=\"clearSearch()\" [attr.aria-label]=\"'phone_input.clear_search' | uicTranslate\">\r\n <i class=\"ri-close-line\"></i>\r\n </button>\r\n }\r\n </div>\r\n\r\n <div class=\"phone-input__list\">\r\n @for (country of filteredCountries; track country.iso2) {\r\n <button\r\n type=\"button\"\r\n class=\"phone-input__option\"\r\n (click)=\"selectCountry(country)\"\r\n [attr.aria-selected]=\"country.iso2 === selectedCountry.iso2\"\r\n [attr.data-iso]=\"country.iso2\"\r\n [attr.title]=\"country.name + ' +' + country.dialCode\"\r\n [attr.aria-label]=\"country.name + ' +' + country.dialCode\"\r\n >\r\n <img\r\n class=\"phone-input__flag\"\r\n [src]=\"getFlagUrl(country.iso2)\"\r\n [alt]=\"country.name\"\r\n />\r\n {{country.name}}\r\n <span class=\"phone-input__dial\">(+{{ country.dialCode }})</span>\r\n </button>\r\n }\r\n\r\n @if (filteredCountries.length === 0) {\r\n <div class=\"phone-input__empty\">{{'phone_input.no_results' | uicTranslate}}</div>\r\n }\r\n </div>\r\n </datalist>\r\n</ng-template>\r\n", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n", ".phone-input{padding:0}.phone-input.open .phone-input__chevron{transform:rotate(180deg)}.phone-input__selector{display:flex;align-items:center;background:transparent;border:none;height:calc(4 * var(--form-ref));padding:0 0 0 3px;gap:2px;color:var(--grey-900);font-size:max(var(--form-ref) + 4px,14px);cursor:pointer;transition:.2s ease}.phone-input__selector:hover{background-color:var(--grey-100)}.phone-input__selector:disabled{cursor:not-allowed;color:var(--disabled-color)}.phone-input__selector:focus-visible{outline:none}.phone-input__flag{width:18px;height:12px;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px #0000000d}.phone-input__dial{padding:0 5px;font-weight:600;color:var(--grey-700)}.phone-input__chevron{font-size:1rem;color:var(--grey-500);transition:transform .2s ease}.phone-input__divider{width:1px;background-color:var(--grey-200);align-self:stretch}.phone-input__field{flex:1 1 auto;border:none;outline:none;padding:9px var(--form-ref);font-size:max(var(--form-ref) + 4px,14px);color:var(--grey-900);background:transparent}.phone-input__field::placeholder{color:var(--grey-400)}.phone-input__field:disabled{background-color:transparent;color:var(--disabled-color);cursor:not-allowed}.phone-input__dropdown{margin-top:4px;border-radius:var(--input-radius);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;border:1px solid var(--grey-200);background-color:var(--white);width:100%;max-height:280px;display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:10}.phone-input__search{display:flex;align-items:center;padding:6px 10px;border-bottom:1px solid var(--grey-200);gap:6px}.phone-input__search>i{color:var(--grey-500);font-size:1rem}.phone-input__search>input{flex:1;border:none;outline:none;font-size:.875rem;color:var(--grey-900);background:transparent}.phone-input__search>input::placeholder{color:var(--grey-400)}.phone-input__clear{border:none;background:transparent;cursor:pointer;color:var(--grey-400);padding:2px;display:inline-flex;align-items:center;justify-content:center}.phone-input__clear:hover{color:var(--grey-600)}.phone-input__clear:focus-visible{outline:none}.phone-input__list{max-height:220px;overflow-y:auto;display:flex;padding:5px;flex-direction:column}.phone-input__option{display:flex;gap:5px;width:100%;background:transparent;border:none;padding:5px 8px;cursor:pointer;font-size:.75rem;color:var(--grey-900);transition:background-color .2s ease;text-align:left}.phone-input__option:hover{background-color:var(--secondary-100)}.phone-input__option[aria-selected=true]{background-color:var(--primary-100);color:var(--primary-700)}.phone-input__option .phone-input__dial{font-weight:400;padding:0;color:var(--grey-500)}.phone-input__empty{padding:12px;font-size:.875rem;color:var(--grey-500);text-align:center}\n"] }]
|
|
2125
|
+
], template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div\r\n class=\"fakeinput phone-input\"\r\n [ngClass]=\"{\r\n errorinput: error,\r\n disabledinput: disabled,\r\n 'loading-input': loading,\r\n open: dropdownOpen\r\n }\"\r\n >\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{ internalIcon }}\"></i>\r\n }\r\n \r\n <button\r\n type=\"button\"\r\n class=\"phone-input__selector\"\r\n (click)=\"toggleDropdown()\"\r\n [disabled]=\"disabled || loading\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-expanded]=\"dropdownOpen\"\r\n [attr.aria-controls]=\"dropdownOpen ? dropdownId : null\"\r\n [attr.aria-label]=\"'phone_input.aria_country_code' | uicTranslate:{country: selectedCountry.name, dialCode: selectedCountry.dialCode}\"\r\n >\r\n <img\r\n class=\"phone-input__flag\"\r\n [src]=\"getFlagUrl(selectedCountry.iso2)\"\r\n [alt]=\"selectedCountry.name\"\r\n />\r\n <i class=\"ri-arrow-down-s-line phone-input__chevron\" aria-hidden=\"true\"></i>\r\n </button>\r\n <div class=\"phone-input__divider\" aria-hidden=\"true\"></div>\r\n <div class=\"phone-input__dial\">+{{ selectedCountry.dialCode }}</div>\r\n \r\n \r\n <input\r\n type=\"tel\"\r\n class=\"phone-input__field\"\r\n [attr.placeholder]=\"placeholder | uicTranslate\"\r\n [disabled]=\"disabled || loading\"\r\n inputmode=\"tel\"\r\n [value]=\"phoneNumber\"\r\n (input)=\"onNumberInput($event)\"\r\n (blur)=\"onBlur()\"\r\n />\r\n </div>\r\n</ui-input-wrapper>\r\n\r\n<ng-template #dropdownTemplate>\r\n <datalist class=\"phone-input__dropdown\" [attr.id]=\"dropdownId\">\r\n <div class=\"phone-input__search\">\r\n <i class=\"ri-search-line\"></i>\r\n <input\r\n #searchInput\r\n type=\"text\"\r\n [value]=\"searchTerm\"\r\n (input)=\"onSearchChange($event)\"\r\n [placeholder]=\"'phone_input.search_country' | uicTranslate\"\r\n autocomplete=\"off\"\r\n />\r\n @if (searchTerm) {\r\n <button type=\"button\" class=\"phone-input__clear\" (click)=\"clearSearch()\" [attr.aria-label]=\"'phone_input.clear_search' | uicTranslate\">\r\n <i class=\"ri-close-line\"></i>\r\n </button>\r\n }\r\n </div>\r\n\r\n <div class=\"phone-input__list\">\r\n @for (country of filteredCountries; track country.iso2) {\r\n <button\r\n type=\"button\"\r\n class=\"phone-input__option\"\r\n (click)=\"selectCountry(country)\"\r\n [attr.aria-selected]=\"country.iso2 === selectedCountry.iso2\"\r\n [attr.data-iso]=\"country.iso2\"\r\n [attr.title]=\"country.name + ' +' + country.dialCode\"\r\n [attr.aria-label]=\"country.name + ' +' + country.dialCode\"\r\n >\r\n <img\r\n class=\"phone-input__flag\"\r\n [src]=\"getFlagUrl(country.iso2)\"\r\n [alt]=\"country.name\"\r\n />\r\n {{country.name}}\r\n <span class=\"phone-input__dial\">(+{{ country.dialCode }})</span>\r\n </button>\r\n }\r\n\r\n @if (filteredCountries.length === 0) {\r\n <div class=\"phone-input__empty\">{{'phone_input.no_results' | uicTranslate}}</div>\r\n }\r\n </div>\r\n </datalist>\r\n</ng-template>\r\n", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n", ".phone-input{padding:0}.phone-input.open .phone-input__chevron{transform:rotate(180deg)}.phone-input__selector{display:flex;align-items:center;background:transparent;border:none;height:calc(4 * var(--form-ref));padding:0 0 0 3px;gap:2px;color:var(--grey-900);font-size:max(var(--form-ref) + 4px,14px);cursor:pointer;transition:.2s ease}.phone-input__selector:hover{background-color:var(--grey-100)}.phone-input__selector:disabled{cursor:not-allowed;color:var(--disabled-color)}.phone-input__selector:focus-visible{outline:none}.phone-input__flag{width:18px;height:12px;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px #0000000d}.phone-input__dial{padding:0 5px;font-weight:600;color:var(--grey-700)}.phone-input__chevron{font-size:1rem;color:var(--grey-500);transition:transform .2s ease}.phone-input__divider{width:1px;background-color:var(--grey-200);align-self:stretch}.phone-input__field{flex:1 1 auto;border:none;outline:none;padding:9px var(--form-ref);font-size:max(var(--form-ref) + 4px,14px);color:var(--grey-900);background:transparent}.phone-input__field::placeholder{color:var(--grey-400)}.phone-input__field:disabled{background-color:transparent;color:var(--disabled-color);cursor:not-allowed}.phone-input__dropdown{margin-top:4px;border-radius:var(--input-radius);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;border:1px solid var(--grey-200);background-color:var(--white);width:100%;max-height:280px;display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:10}.phone-input__search{display:flex;align-items:center;padding:6px 10px;border-bottom:1px solid var(--grey-200);gap:6px}.phone-input__search>i{color:var(--grey-500);font-size:1rem}.phone-input__search>input{flex:1;border:none;outline:none;font-size:.875rem;color:var(--grey-900);background:transparent}.phone-input__search>input::placeholder{color:var(--grey-400)}.phone-input__clear{border:none;background:transparent;cursor:pointer;color:var(--grey-400);padding:2px;display:inline-flex;align-items:center;justify-content:center}.phone-input__clear:hover{color:var(--grey-600)}.phone-input__clear:focus-visible{outline:none}.phone-input__list{max-height:220px;overflow-y:auto;display:flex;padding:5px;flex-direction:column}.phone-input__option{display:flex;gap:5px;width:100%;background:transparent;border:none;padding:5px 8px;cursor:pointer;font-size:.75rem;color:var(--grey-900);transition:background-color .2s ease;text-align:left}.phone-input__option:hover{background-color:var(--secondary-100)}.phone-input__option[aria-selected=true]{background-color:var(--primary-100);color:var(--primary-700)}.phone-input__option .phone-input__dial{font-weight:400;padding:0;color:var(--grey-500)}.phone-input__empty{padding:12px;font-size:.875rem;color:var(--grey-500);text-align:center}\n"] }]
|
|
2070
2126
|
}], ctorParameters: () => [], propDecorators: { icon: [{
|
|
2071
2127
|
type: Input
|
|
2072
2128
|
}], iconColor: [{
|
|
@@ -2246,7 +2302,7 @@ class UicSearcherComponent extends base$7 {
|
|
|
2246
2302
|
useExisting: forwardRef(() => UicSearcherComponent),
|
|
2247
2303
|
multi: true
|
|
2248
2304
|
}
|
|
2249
|
-
], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ui-input-wrapper\r\n[icon]=\"icon\"\r\n[iconColor]=\"iconColor\"\r\n[label]=\"label\"\r\n[error]=\"error\"\r\n[tip]=\"tip\"\r\n[disabled]=\"disabled\">\r\n@if ( !stateless || (!disabled && stateless)) {\r\n <div class=\"fakeinput-wrapp\" >\r\n <!-- INPUT -->\r\n <div class=\"fakeinput\" #fakeinput \r\n [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':watingApi||loading}\" style=\"cursor: pointer;\">\r\n @if (selectedOption == null) { \r\n @if (internalIcon) {\r\n <i [class]=\"'input-internalicon f-'+ internalIcon\" ></i>\r\n }\r\n <div class=\"input-container\" >\r\n <input\r\n [disabled]=\"disabled\"\r\n (focus)=\"openList()\"\r\n type=\"text\"\r\n (keydown.enter)=\"triggerSearch()\"\r\n (keydown.escape)=\"clearSearch()\"\r\n [(ngModel)]=\"searchText\"\r\n (ngModelChange)=\"onSearchChange($event)\"\r\n [placeholder]=\"placeholder | uicTranslate\"\r\n />\r\n </div> \r\n @if (!disabled) {\r\n @if (manualSearch) {\r\n <ui-button [attr.tip]=\"'searcher.clear_tip' | uicTranslate\" (click)=\"triggerSearch()\" size=\"t\" ></ui-button>\r\n }\r\n <ui-button [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-eraser-line\" (click)=\"clearSearch()\"></ui-button>\r\n }\r\n }@else {\r\n <div class=\"input-container\" >\r\n <div class=\"selected-item\" >\r\n <div class=\"selected-item-text\" [innerHTML]=\"itemDisplayFn?itemDisplayFn(selectedOption):''\"></div> \r\n <ui-button [iconOnly]=\"true\" (click)=\"unselect()\" type=\"ghost\" size=\"t\" icon=\"ri-close-large-line\" color=\"red\"></ui-button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </ui-input-wrapper>\r\n \r\n<ng-template #dropdownTemplate>\r\n @if (results$ | async; as items){\r\n <div class=\"input-options\">\r\n <div class=\"input-option-scroll\">\r\n @for (item of items; track $index) {\r\n <div class=\"input-option\" [class.item-disabled]=\"itemIsEnabledFn?!itemIsEnabledFn(item):false\"\r\n (click)=\"selectItem(item)\" \r\n [innerHTML]=\"itemDisplayFn?itemDisplayFn(item):''\">\r\n </div>\r\n }@empty {\r\n <div class=\"t-disabled\">{{'searcher.empty' | uicTranslate}}</div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n\r\n\r\n", styles: [".selected-item{border-radius:5px;background-color:var(--primary-100);padding-left:10px;height:25px;display:flex;gap:20px;align-items:center;justify-content:space-between}.selected-item-text{overflow:hidden;white-space:nowrap}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
2305
|
+
], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ui-input-wrapper\r\n[icon]=\"icon\"\r\n[iconColor]=\"iconColor\"\r\n[label]=\"label\"\r\n[error]=\"error\"\r\n[tip]=\"tip\"\r\n[disabled]=\"disabled\">\r\n@if ( !stateless || (!disabled && stateless)) {\r\n <div class=\"fakeinput-wrapp\" >\r\n <!-- INPUT -->\r\n <div class=\"fakeinput\" #fakeinput \r\n [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':watingApi||loading}\" style=\"cursor: pointer;\">\r\n @if (selectedOption == null) { \r\n @if (internalIcon) {\r\n <i [class]=\"'input-internalicon f-'+ internalIcon\" ></i>\r\n }\r\n <div class=\"input-container\" >\r\n <input\r\n [disabled]=\"disabled\"\r\n (focus)=\"openList()\"\r\n type=\"text\"\r\n (keydown.enter)=\"triggerSearch()\"\r\n (keydown.escape)=\"clearSearch()\"\r\n [(ngModel)]=\"searchText\"\r\n (ngModelChange)=\"onSearchChange($event)\"\r\n [placeholder]=\"placeholder | uicTranslate\"\r\n />\r\n </div> \r\n @if (!disabled) {\r\n @if (manualSearch) {\r\n <ui-button [attr.tip]=\"'searcher.clear_tip' | uicTranslate\" (click)=\"triggerSearch()\" size=\"t\" ></ui-button>\r\n }\r\n <ui-button [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-eraser-line\" (click)=\"clearSearch()\"></ui-button>\r\n }\r\n }@else {\r\n <div class=\"input-container\" >\r\n <div class=\"selected-item\" >\r\n <div class=\"selected-item-text\" [innerHTML]=\"itemDisplayFn?itemDisplayFn(selectedOption):''\"></div> \r\n <ui-button [iconOnly]=\"true\" (click)=\"unselect()\" type=\"ghost\" size=\"t\" icon=\"ri-close-large-line\" color=\"red\"></ui-button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </ui-input-wrapper>\r\n \r\n<ng-template #dropdownTemplate>\r\n @if (results$ | async; as items){\r\n <div class=\"input-options\">\r\n <div class=\"input-option-scroll\">\r\n @for (item of items; track $index) {\r\n <div class=\"input-option\" [class.item-disabled]=\"itemIsEnabledFn?!itemIsEnabledFn(item):false\"\r\n (click)=\"selectItem(item)\" \r\n [innerHTML]=\"itemDisplayFn?itemDisplayFn(item):''\">\r\n </div>\r\n }@empty {\r\n <div class=\"t-disabled\">{{'searcher.empty' | uicTranslate}}</div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n\r\n\r\n", styles: [".selected-item{border-radius:5px;background-color:var(--primary-100);padding-left:10px;height:25px;display:flex;gap:20px;align-items:center;justify-content:space-between}.selected-item-text{overflow:hidden;white-space:nowrap}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
2250
2306
|
}
|
|
2251
2307
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSearcherComponent, decorators: [{
|
|
2252
2308
|
type: Component,
|
|
@@ -2256,7 +2312,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2256
2312
|
useExisting: forwardRef(() => UicSearcherComponent),
|
|
2257
2313
|
multi: true
|
|
2258
2314
|
}
|
|
2259
|
-
], template: "<ui-input-wrapper\r\n[icon]=\"icon\"\r\n[iconColor]=\"iconColor\"\r\n[label]=\"label\"\r\n[error]=\"error\"\r\n[tip]=\"tip\"\r\n[disabled]=\"disabled\">\r\n@if ( !stateless || (!disabled && stateless)) {\r\n <div class=\"fakeinput-wrapp\" >\r\n <!-- INPUT -->\r\n <div class=\"fakeinput\" #fakeinput \r\n [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':watingApi||loading}\" style=\"cursor: pointer;\">\r\n @if (selectedOption == null) { \r\n @if (internalIcon) {\r\n <i [class]=\"'input-internalicon f-'+ internalIcon\" ></i>\r\n }\r\n <div class=\"input-container\" >\r\n <input\r\n [disabled]=\"disabled\"\r\n (focus)=\"openList()\"\r\n type=\"text\"\r\n (keydown.enter)=\"triggerSearch()\"\r\n (keydown.escape)=\"clearSearch()\"\r\n [(ngModel)]=\"searchText\"\r\n (ngModelChange)=\"onSearchChange($event)\"\r\n [placeholder]=\"placeholder | uicTranslate\"\r\n />\r\n </div> \r\n @if (!disabled) {\r\n @if (manualSearch) {\r\n <ui-button [attr.tip]=\"'searcher.clear_tip' | uicTranslate\" (click)=\"triggerSearch()\" size=\"t\" ></ui-button>\r\n }\r\n <ui-button [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-eraser-line\" (click)=\"clearSearch()\"></ui-button>\r\n }\r\n }@else {\r\n <div class=\"input-container\" >\r\n <div class=\"selected-item\" >\r\n <div class=\"selected-item-text\" [innerHTML]=\"itemDisplayFn?itemDisplayFn(selectedOption):''\"></div> \r\n <ui-button [iconOnly]=\"true\" (click)=\"unselect()\" type=\"ghost\" size=\"t\" icon=\"ri-close-large-line\" color=\"red\"></ui-button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </ui-input-wrapper>\r\n \r\n<ng-template #dropdownTemplate>\r\n @if (results$ | async; as items){\r\n <div class=\"input-options\">\r\n <div class=\"input-option-scroll\">\r\n @for (item of items; track $index) {\r\n <div class=\"input-option\" [class.item-disabled]=\"itemIsEnabledFn?!itemIsEnabledFn(item):false\"\r\n (click)=\"selectItem(item)\" \r\n [innerHTML]=\"itemDisplayFn?itemDisplayFn(item):''\">\r\n </div>\r\n }@empty {\r\n <div class=\"t-disabled\">{{'searcher.empty' | uicTranslate}}</div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n\r\n\r\n", styles: [".selected-item{border-radius:5px;background-color:var(--primary-100);padding-left:10px;height:25px;display:flex;gap:20px;align-items:center;justify-content:space-between}.selected-item-text{overflow:hidden;white-space:nowrap}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
|
|
2315
|
+
], template: "<ui-input-wrapper\r\n[icon]=\"icon\"\r\n[iconColor]=\"iconColor\"\r\n[label]=\"label\"\r\n[error]=\"error\"\r\n[tip]=\"tip\"\r\n[disabled]=\"disabled\">\r\n@if ( !stateless || (!disabled && stateless)) {\r\n <div class=\"fakeinput-wrapp\" >\r\n <!-- INPUT -->\r\n <div class=\"fakeinput\" #fakeinput \r\n [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':watingApi||loading}\" style=\"cursor: pointer;\">\r\n @if (selectedOption == null) { \r\n @if (internalIcon) {\r\n <i [class]=\"'input-internalicon f-'+ internalIcon\" ></i>\r\n }\r\n <div class=\"input-container\" >\r\n <input\r\n [disabled]=\"disabled\"\r\n (focus)=\"openList()\"\r\n type=\"text\"\r\n (keydown.enter)=\"triggerSearch()\"\r\n (keydown.escape)=\"clearSearch()\"\r\n [(ngModel)]=\"searchText\"\r\n (ngModelChange)=\"onSearchChange($event)\"\r\n [placeholder]=\"placeholder | uicTranslate\"\r\n />\r\n </div> \r\n @if (!disabled) {\r\n @if (manualSearch) {\r\n <ui-button [attr.tip]=\"'searcher.clear_tip' | uicTranslate\" (click)=\"triggerSearch()\" size=\"t\" ></ui-button>\r\n }\r\n <ui-button [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-eraser-line\" (click)=\"clearSearch()\"></ui-button>\r\n }\r\n }@else {\r\n <div class=\"input-container\" >\r\n <div class=\"selected-item\" >\r\n <div class=\"selected-item-text\" [innerHTML]=\"itemDisplayFn?itemDisplayFn(selectedOption):''\"></div> \r\n <ui-button [iconOnly]=\"true\" (click)=\"unselect()\" type=\"ghost\" size=\"t\" icon=\"ri-close-large-line\" color=\"red\"></ui-button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </ui-input-wrapper>\r\n \r\n<ng-template #dropdownTemplate>\r\n @if (results$ | async; as items){\r\n <div class=\"input-options\">\r\n <div class=\"input-option-scroll\">\r\n @for (item of items; track $index) {\r\n <div class=\"input-option\" [class.item-disabled]=\"itemIsEnabledFn?!itemIsEnabledFn(item):false\"\r\n (click)=\"selectItem(item)\" \r\n [innerHTML]=\"itemDisplayFn?itemDisplayFn(item):''\">\r\n </div>\r\n }@empty {\r\n <div class=\"t-disabled\">{{'searcher.empty' | uicTranslate}}</div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n\r\n\r\n", styles: [".selected-item{border-radius:5px;background-color:var(--primary-100);padding-left:10px;height:25px;display:flex;gap:20px;align-items:center;justify-content:space-between}.selected-item-text{overflow:hidden;white-space:nowrap}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
|
|
2260
2316
|
}], propDecorators: { icon: [{
|
|
2261
2317
|
type: Input
|
|
2262
2318
|
}], iconColor: [{
|
|
@@ -2316,12 +2372,14 @@ class UicSelectComponent extends base$6 {
|
|
|
2316
2372
|
nonSelectedText = 'select.non_selected';
|
|
2317
2373
|
noneText = 'select.none';
|
|
2318
2374
|
emptyText = 'select.empty';
|
|
2375
|
+
searcherEnabled = false;
|
|
2319
2376
|
// FUNCTIONS
|
|
2320
2377
|
loading = false;
|
|
2321
2378
|
nullable = false;
|
|
2322
2379
|
options = [];
|
|
2323
2380
|
dropdownTemplate;
|
|
2324
2381
|
overlayRef;
|
|
2382
|
+
searchTerm = '';
|
|
2325
2383
|
overlayPositions = [
|
|
2326
2384
|
{ originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
|
|
2327
2385
|
{ originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
|
|
@@ -2336,6 +2394,16 @@ class UicSelectComponent extends base$6 {
|
|
|
2336
2394
|
this.selectedOption = this.options.find(opt => opt.id === this.value) ?? null;
|
|
2337
2395
|
}
|
|
2338
2396
|
}
|
|
2397
|
+
get showSearcher() {
|
|
2398
|
+
return this.searcherEnabled && this.options.length > 5;
|
|
2399
|
+
}
|
|
2400
|
+
get filteredOptions() {
|
|
2401
|
+
const search = this.normalizeText(this.searchTerm);
|
|
2402
|
+
if (!search) {
|
|
2403
|
+
return this.options;
|
|
2404
|
+
}
|
|
2405
|
+
return this.options.filter(option => this.normalizeText(option.text).includes(search));
|
|
2406
|
+
}
|
|
2339
2407
|
// --- Overlay ---
|
|
2340
2408
|
openList() {
|
|
2341
2409
|
if (this.disabled || this.loading)
|
|
@@ -2359,6 +2427,7 @@ class UicSelectComponent extends base$6 {
|
|
|
2359
2427
|
});
|
|
2360
2428
|
const portal = new TemplatePortal(this.dropdownTemplate, this.vcr);
|
|
2361
2429
|
this.overlayRef.attach(portal);
|
|
2430
|
+
this.focusSearcher();
|
|
2362
2431
|
this.overlayRef.backdropClick().subscribe(() => this.closeList());
|
|
2363
2432
|
}
|
|
2364
2433
|
selectOption(option) {
|
|
@@ -2371,30 +2440,82 @@ class UicSelectComponent extends base$6 {
|
|
|
2371
2440
|
this.onTouched();
|
|
2372
2441
|
this.overlayRef.dispose();
|
|
2373
2442
|
this.overlayRef = null;
|
|
2443
|
+
this.searchTerm = '';
|
|
2374
2444
|
}
|
|
2375
2445
|
}
|
|
2376
2446
|
writeValue(value) {
|
|
2377
2447
|
super.writeValue(value);
|
|
2378
2448
|
this.selectedOption = this.options.find(opt => opt.id === value) ?? null;
|
|
2379
2449
|
}
|
|
2450
|
+
updateSearchTerm(value) {
|
|
2451
|
+
this.searchTerm = value;
|
|
2452
|
+
}
|
|
2453
|
+
clearSearch(event) {
|
|
2454
|
+
event?.stopPropagation();
|
|
2455
|
+
this.searchTerm = '';
|
|
2456
|
+
this.focusSearcher();
|
|
2457
|
+
}
|
|
2458
|
+
highlightMatch(text) {
|
|
2459
|
+
const search = this.searchTerm.trim();
|
|
2460
|
+
if (!search) {
|
|
2461
|
+
return this.escapeHtml(text);
|
|
2462
|
+
}
|
|
2463
|
+
const normalizedText = text.toLocaleLowerCase();
|
|
2464
|
+
const normalizedSearch = search.toLocaleLowerCase();
|
|
2465
|
+
const searchLength = search.length;
|
|
2466
|
+
let cursor = 0;
|
|
2467
|
+
let highlighted = '';
|
|
2468
|
+
while (cursor < text.length) {
|
|
2469
|
+
const matchIndex = normalizedText.indexOf(normalizedSearch, cursor);
|
|
2470
|
+
if (matchIndex === -1) {
|
|
2471
|
+
highlighted += this.escapeHtml(text.slice(cursor));
|
|
2472
|
+
break;
|
|
2473
|
+
}
|
|
2474
|
+
highlighted += this.escapeHtml(text.slice(cursor, matchIndex));
|
|
2475
|
+
highlighted += `<mark>${this.escapeHtml(text.slice(matchIndex, matchIndex + searchLength))}</mark>`;
|
|
2476
|
+
cursor = matchIndex + searchLength;
|
|
2477
|
+
}
|
|
2478
|
+
return highlighted;
|
|
2479
|
+
}
|
|
2480
|
+
focusSearcher() {
|
|
2481
|
+
if (!this.showSearcher || !this.overlayRef) {
|
|
2482
|
+
return;
|
|
2483
|
+
}
|
|
2484
|
+
setTimeout(() => {
|
|
2485
|
+
const input = this.overlayRef?.overlayElement.querySelector('.select-searcher input');
|
|
2486
|
+
input?.focus();
|
|
2487
|
+
input?.select();
|
|
2488
|
+
});
|
|
2489
|
+
}
|
|
2490
|
+
normalizeText(value) {
|
|
2491
|
+
return value.toLocaleLowerCase().trim();
|
|
2492
|
+
}
|
|
2493
|
+
escapeHtml(value) {
|
|
2494
|
+
return value
|
|
2495
|
+
.replaceAll('&', '&')
|
|
2496
|
+
.replaceAll('<', '<')
|
|
2497
|
+
.replaceAll('>', '>')
|
|
2498
|
+
.replaceAll('"', '"')
|
|
2499
|
+
.replaceAll("'", ''');
|
|
2500
|
+
}
|
|
2380
2501
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2381
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSelectComponent, isStandalone: true, selector: "ui-select", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", internalIconColor: "internalIconColor", size: "size", label: "label", error: "error", tip: "tip", showSubtitle: "showSubtitle", disabled: "disabled", nonSelectedText: "nonSelectedText", noneText: "noneText", emptyText: "emptyText", loading: "loading", nullable: "nullable", options: "options" }, providers: [
|
|
2502
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSelectComponent, isStandalone: true, selector: "ui-select", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", internalIconColor: "internalIconColor", size: "size", label: "label", error: "error", tip: "tip", showSubtitle: "showSubtitle", disabled: "disabled", nonSelectedText: "nonSelectedText", noneText: "noneText", emptyText: "emptyText", searcherEnabled: "searcherEnabled", loading: "loading", nullable: "nullable", options: "options" }, providers: [
|
|
2382
2503
|
{
|
|
2383
2504
|
provide: NG_VALUE_ACCESSOR,
|
|
2384
2505
|
useExisting: forwardRef(() => UicSelectComponent),
|
|
2385
2506
|
multi: true
|
|
2386
2507
|
}
|
|
2387
|
-
], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "\
|
|
2508
|
+
], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "\n<ui-input-wrapper\n [icon]=\"icon\"\n [iconColor]=\"iconColor\"\n [label]=\"label\"\n [error]=\"error\"\n [tip]=\"tip\"\n [disabled]=\"disabled\">\n <div class=\"fakeinput-wrapp\" > \n <!-- INPUT -->\n <div (click)=\"openList()\" class=\"fakeinput\" #fakeinput \n [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':loading}\" style=\"cursor: pointer;\">\n @if (internalIcon) {\n <i class=\"input-internalicon {{internalIcon}} f-{{internalIconColor}}\" ></i>\n }\n <div class=\"fakeinput-emptytext\" [class.disabled-placeholder]=\"disabled && !selectedOption?.text\" >\n @if (selectedOption?.icon) {\n <i class=\"{{selectedOption?.icon}} f-{{selectedOption?.iconColor}}\" style=\"margin-right: 5px;\"></i>\n }\n {{(selectedOption?.text || nonSelectedText) | uicTranslate}}\n </div>\n @if (!disabled && !loading) {\n <i class=\"ri-arrow-down-s-line\"></i>\n }\n </div> \n <!-- DESPLEGABLE -->\n <ng-template #dropdownTemplate >\n <div class=\"input-options\">\n @if (showSearcher) {\n <div class=\"select-searcher\">\n <input\n #searchInput\n type=\"text\"\n [placeholder]=\"'select.search_placeholder'|uicTranslate\"\n [value]=\"searchTerm\"\n (input)=\"updateSearchTerm($any($event.target).value)\"\n (click)=\"$event.stopPropagation()\">\n <ui-button\n icon=\"ri-close-line\"\n size=\"s\"\n type=\"ghost\"\n color=\"red\"\n [iconOnly]=\"true\"\n (click)=\"clearSearch($event)\">\n </ui-button>\n </div>\n }\n <!-- OPCIONES -->\n <div class=\"input-option-scroll\">\n @if (options.length > 0 && nullable) {\n <div (click)=\"selectOption(null)\" class=\"input-option \" style=\"padding: 3px;\" >{{noneText | uicTranslate}}</div>\n <div class=\"option-divider\"></div>\n }\n \n \n @for (option of filteredOptions; track $index) {\n <div (click)=\"selectOption(option)\" class=\"input-option\">\n @if (option.icon) {\n <i class=\"{{option.icon}} f-{{option.iconColor}}\" style=\"margin-right: 5px;\"></i>\n }\n <div style=\"padding: 2px;\" >\n <div class=\"f-medium option-text-highlight\" [innerHTML]=\"highlightMatch(option.text)\"></div>\n <div *ngIf=\"showSubtitle\" class=\"f-extralight\" >\n {{option.detail}}\n </div>\n </div>\n </div>\n @if ( $index < (filteredOptions.length - 1) ) {\n <span class=\"option-divider\"></span>\n }\n \n }\n \n @if (filteredOptions.length == 0) {\n <div class=\"fakeinput-alert t-disabled\">{{emptyText | uicTranslate}}</div>\n }\n </div>\n </div>\n </ng-template>\n \n </div>\n</ui-input-wrapper>\n", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
|
|
2388
2509
|
}
|
|
2389
2510
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSelectComponent, decorators: [{
|
|
2390
2511
|
type: Component,
|
|
2391
|
-
args: [{ selector: 'ui-select', imports: [InputWrapperComponent, CommonModule, UicTranslatePipe], providers: [
|
|
2512
|
+
args: [{ selector: 'ui-select', imports: [InputWrapperComponent, CommonModule, UicTranslatePipe, UicButtonComponent], providers: [
|
|
2392
2513
|
{
|
|
2393
2514
|
provide: NG_VALUE_ACCESSOR,
|
|
2394
2515
|
useExisting: forwardRef(() => UicSelectComponent),
|
|
2395
2516
|
multi: true
|
|
2396
2517
|
}
|
|
2397
|
-
], template: "\
|
|
2518
|
+
], template: "\n<ui-input-wrapper\n [icon]=\"icon\"\n [iconColor]=\"iconColor\"\n [label]=\"label\"\n [error]=\"error\"\n [tip]=\"tip\"\n [disabled]=\"disabled\">\n <div class=\"fakeinput-wrapp\" > \n <!-- INPUT -->\n <div (click)=\"openList()\" class=\"fakeinput\" #fakeinput \n [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':loading}\" style=\"cursor: pointer;\">\n @if (internalIcon) {\n <i class=\"input-internalicon {{internalIcon}} f-{{internalIconColor}}\" ></i>\n }\n <div class=\"fakeinput-emptytext\" [class.disabled-placeholder]=\"disabled && !selectedOption?.text\" >\n @if (selectedOption?.icon) {\n <i class=\"{{selectedOption?.icon}} f-{{selectedOption?.iconColor}}\" style=\"margin-right: 5px;\"></i>\n }\n {{(selectedOption?.text || nonSelectedText) | uicTranslate}}\n </div>\n @if (!disabled && !loading) {\n <i class=\"ri-arrow-down-s-line\"></i>\n }\n </div> \n <!-- DESPLEGABLE -->\n <ng-template #dropdownTemplate >\n <div class=\"input-options\">\n @if (showSearcher) {\n <div class=\"select-searcher\">\n <input\n #searchInput\n type=\"text\"\n [placeholder]=\"'select.search_placeholder'|uicTranslate\"\n [value]=\"searchTerm\"\n (input)=\"updateSearchTerm($any($event.target).value)\"\n (click)=\"$event.stopPropagation()\">\n <ui-button\n icon=\"ri-close-line\"\n size=\"s\"\n type=\"ghost\"\n color=\"red\"\n [iconOnly]=\"true\"\n (click)=\"clearSearch($event)\">\n </ui-button>\n </div>\n }\n <!-- OPCIONES -->\n <div class=\"input-option-scroll\">\n @if (options.length > 0 && nullable) {\n <div (click)=\"selectOption(null)\" class=\"input-option \" style=\"padding: 3px;\" >{{noneText | uicTranslate}}</div>\n <div class=\"option-divider\"></div>\n }\n \n \n @for (option of filteredOptions; track $index) {\n <div (click)=\"selectOption(option)\" class=\"input-option\">\n @if (option.icon) {\n <i class=\"{{option.icon}} f-{{option.iconColor}}\" style=\"margin-right: 5px;\"></i>\n }\n <div style=\"padding: 2px;\" >\n <div class=\"f-medium option-text-highlight\" [innerHTML]=\"highlightMatch(option.text)\"></div>\n <div *ngIf=\"showSubtitle\" class=\"f-extralight\" >\n {{option.detail}}\n </div>\n </div>\n </div>\n @if ( $index < (filteredOptions.length - 1) ) {\n <span class=\"option-divider\"></span>\n }\n \n }\n \n @if (filteredOptions.length == 0) {\n <div class=\"fakeinput-alert t-disabled\">{{emptyText | uicTranslate}}</div>\n }\n </div>\n </div>\n </ng-template>\n \n </div>\n</ui-input-wrapper>\n", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
|
|
2398
2519
|
}], propDecorators: { icon: [{
|
|
2399
2520
|
type: Input
|
|
2400
2521
|
}], iconColor: [{
|
|
@@ -2421,6 +2542,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2421
2542
|
type: Input
|
|
2422
2543
|
}], emptyText: [{
|
|
2423
2544
|
type: Input
|
|
2545
|
+
}], searcherEnabled: [{
|
|
2546
|
+
type: Input
|
|
2424
2547
|
}], loading: [{
|
|
2425
2548
|
type: Input
|
|
2426
2549
|
}], nullable: [{
|
|
@@ -2492,7 +2615,7 @@ class UicSliderComponent extends base$5 {
|
|
|
2492
2615
|
useExisting: forwardRef(() => UicSliderComponent),
|
|
2493
2616
|
multi: true
|
|
2494
2617
|
}
|
|
2495
|
-
], usesInheritance: true, ngImport: i0, template: "<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"slider-wrapper\">\r\n <div class=\"slider\" #track\r\n (click)=\"updateFromClientX($event.clientX, track)\">\r\n <!-- barra -->\r\n <div class=\"slider-track\"></div>\r\n <div class=\"slider-filled\" [style.width.%]=\"percent\" [class.disabled-bar]=\"disabled\"></div>\r\n \r\n <!-- thumb -->\r\n <div class=\"slider-thumb\"\r\n [style.left.%]=\"percent\"\r\n [class.disabled-thumb]=\"disabled\"\r\n (mousedown)=\"onMouseDown($event, track)\"\r\n #thumb>\r\n <div class=\"slider-thumb-legend\" [class.disabled-legend]=\"disabled\">{{value}}</div>\r\n </div>\r\n \r\n <!-- markers -->\r\n <div class=\"slider-markers\">\r\n @for(m of markers; track $index){\r\n <div class=\"marker\" \r\n [style.left.%]=\"((m - min) / (max - min)) * 100\">\r\n {{ m }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [".slider-wrapper{width:100%;padding:0 8px 10px;height:calc(4 * var(--form-ref));display:flex;align-items:center}.slider{position:relative;width:100%;height:16px;-webkit-user-select:none;user-select:none}.slider-track{position:absolute;top:50%;left:0;width:100%;height:4px;background:#ccc;transform:translateY(-50%);border-radius:2px}.slider-filled{position:absolute;top:50%;left:0;height:4px;background:var(--primary-500);transform:translateY(-50%);border-radius:2px}.slider-thumb{position:absolute;top:50%;padding:0;margin:0;width:16px;height:16px;background:var(--white);border:4px solid var(--primary-500);border-radius:50%;transform:translate(-50%,-50%);transition:transform .1s ease;cursor:pointer}.slider-thumb:hover{box-shadow:0 0 0 3px var(--secondary-alpha);transform:translate(-50%,-50%) scale(1.2)}.slider-thumb:focus,.slider-thumb:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.slider-thumb-legend{background-color:var(--white);box-shadow:0 4px 12px #0003;border:solid 1px var(--primary-400);position:absolute;bottom:16px;font-size:.75rem;line-height:.75rem;padding:2px 4px;left:50%;border-radius:2px;transform:translate(-50%,25%);white-space:nowrap}.slider-markers{position:absolute;top:100%;width:100%;font-size:12px}.marker{position:absolute;transform:translate(-50%)}.disabled-thumb{border-color:var(--grey-300);box-shadow:none}.disabled-thumb:hover{box-shadow:none;cursor:not-allowed;transform:translate(-50%,-50%)}.disabled-legend{box-shadow:none;border-color:var(--grey-300);background-color:var(--grey-100)}.disabled-bar{background-color:var(--grey-500)}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
|
|
2618
|
+
], usesInheritance: true, ngImport: i0, template: "<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"slider-wrapper\">\r\n <div class=\"slider\" #track\r\n (click)=\"updateFromClientX($event.clientX, track)\">\r\n <!-- barra -->\r\n <div class=\"slider-track\"></div>\r\n <div class=\"slider-filled\" [style.width.%]=\"percent\" [class.disabled-bar]=\"disabled\"></div>\r\n \r\n <!-- thumb -->\r\n <div class=\"slider-thumb\"\r\n [style.left.%]=\"percent\"\r\n [class.disabled-thumb]=\"disabled\"\r\n (mousedown)=\"onMouseDown($event, track)\"\r\n #thumb>\r\n <div class=\"slider-thumb-legend\" [class.disabled-legend]=\"disabled\">{{value}}</div>\r\n </div>\r\n \r\n <!-- markers -->\r\n <div class=\"slider-markers\">\r\n @for(m of markers; track $index){\r\n <div class=\"marker\" \r\n [style.left.%]=\"((m - min) / (max - min)) * 100\">\r\n {{ m }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [".slider-wrapper{width:100%;padding:0 8px 10px;height:calc(4 * var(--form-ref));display:flex;align-items:center}.slider{position:relative;width:100%;height:16px;-webkit-user-select:none;user-select:none}.slider-track{position:absolute;top:50%;left:0;width:100%;height:4px;background:#ccc;transform:translateY(-50%);border-radius:2px}.slider-filled{position:absolute;top:50%;left:0;height:4px;background:var(--primary-500);transform:translateY(-50%);border-radius:2px}.slider-thumb{position:absolute;top:50%;padding:0;margin:0;width:16px;height:16px;background:var(--white);border:4px solid var(--primary-500);border-radius:50%;transform:translate(-50%,-50%);transition:transform .1s ease;cursor:pointer}.slider-thumb:hover{box-shadow:0 0 0 3px var(--secondary-alpha);transform:translate(-50%,-50%) scale(1.2)}.slider-thumb:focus,.slider-thumb:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.slider-thumb-legend{background-color:var(--white);box-shadow:0 4px 12px #0003;border:solid 1px var(--primary-400);position:absolute;bottom:16px;font-size:.75rem;line-height:.75rem;padding:2px 4px;left:50%;border-radius:2px;transform:translate(-50%,25%);white-space:nowrap}.slider-markers{position:absolute;top:100%;width:100%;font-size:12px}.marker{position:absolute;transform:translate(-50%)}.disabled-thumb{border-color:var(--grey-300);box-shadow:none}.disabled-thumb:hover{box-shadow:none;cursor:not-allowed;transform:translate(-50%,-50%)}.disabled-legend{box-shadow:none;border-color:var(--grey-300);background-color:var(--grey-100)}.disabled-bar{background-color:var(--grey-500)}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
|
|
2496
2619
|
}
|
|
2497
2620
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSliderComponent, decorators: [{
|
|
2498
2621
|
type: Component,
|
|
@@ -2502,7 +2625,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2502
2625
|
useExisting: forwardRef(() => UicSliderComponent),
|
|
2503
2626
|
multi: true
|
|
2504
2627
|
}
|
|
2505
|
-
], template: "<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"slider-wrapper\">\r\n <div class=\"slider\" #track\r\n (click)=\"updateFromClientX($event.clientX, track)\">\r\n <!-- barra -->\r\n <div class=\"slider-track\"></div>\r\n <div class=\"slider-filled\" [style.width.%]=\"percent\" [class.disabled-bar]=\"disabled\"></div>\r\n \r\n <!-- thumb -->\r\n <div class=\"slider-thumb\"\r\n [style.left.%]=\"percent\"\r\n [class.disabled-thumb]=\"disabled\"\r\n (mousedown)=\"onMouseDown($event, track)\"\r\n #thumb>\r\n <div class=\"slider-thumb-legend\" [class.disabled-legend]=\"disabled\">{{value}}</div>\r\n </div>\r\n \r\n <!-- markers -->\r\n <div class=\"slider-markers\">\r\n @for(m of markers; track $index){\r\n <div class=\"marker\" \r\n [style.left.%]=\"((m - min) / (max - min)) * 100\">\r\n {{ m }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [".slider-wrapper{width:100%;padding:0 8px 10px;height:calc(4 * var(--form-ref));display:flex;align-items:center}.slider{position:relative;width:100%;height:16px;-webkit-user-select:none;user-select:none}.slider-track{position:absolute;top:50%;left:0;width:100%;height:4px;background:#ccc;transform:translateY(-50%);border-radius:2px}.slider-filled{position:absolute;top:50%;left:0;height:4px;background:var(--primary-500);transform:translateY(-50%);border-radius:2px}.slider-thumb{position:absolute;top:50%;padding:0;margin:0;width:16px;height:16px;background:var(--white);border:4px solid var(--primary-500);border-radius:50%;transform:translate(-50%,-50%);transition:transform .1s ease;cursor:pointer}.slider-thumb:hover{box-shadow:0 0 0 3px var(--secondary-alpha);transform:translate(-50%,-50%) scale(1.2)}.slider-thumb:focus,.slider-thumb:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.slider-thumb-legend{background-color:var(--white);box-shadow:0 4px 12px #0003;border:solid 1px var(--primary-400);position:absolute;bottom:16px;font-size:.75rem;line-height:.75rem;padding:2px 4px;left:50%;border-radius:2px;transform:translate(-50%,25%);white-space:nowrap}.slider-markers{position:absolute;top:100%;width:100%;font-size:12px}.marker{position:absolute;transform:translate(-50%)}.disabled-thumb{border-color:var(--grey-300);box-shadow:none}.disabled-thumb:hover{box-shadow:none;cursor:not-allowed;transform:translate(-50%,-50%)}.disabled-legend{box-shadow:none;border-color:var(--grey-300);background-color:var(--grey-100)}.disabled-bar{background-color:var(--grey-500)}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
|
|
2628
|
+
], template: "<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"slider-wrapper\">\r\n <div class=\"slider\" #track\r\n (click)=\"updateFromClientX($event.clientX, track)\">\r\n <!-- barra -->\r\n <div class=\"slider-track\"></div>\r\n <div class=\"slider-filled\" [style.width.%]=\"percent\" [class.disabled-bar]=\"disabled\"></div>\r\n \r\n <!-- thumb -->\r\n <div class=\"slider-thumb\"\r\n [style.left.%]=\"percent\"\r\n [class.disabled-thumb]=\"disabled\"\r\n (mousedown)=\"onMouseDown($event, track)\"\r\n #thumb>\r\n <div class=\"slider-thumb-legend\" [class.disabled-legend]=\"disabled\">{{value}}</div>\r\n </div>\r\n \r\n <!-- markers -->\r\n <div class=\"slider-markers\">\r\n @for(m of markers; track $index){\r\n <div class=\"marker\" \r\n [style.left.%]=\"((m - min) / (max - min)) * 100\">\r\n {{ m }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [".slider-wrapper{width:100%;padding:0 8px 10px;height:calc(4 * var(--form-ref));display:flex;align-items:center}.slider{position:relative;width:100%;height:16px;-webkit-user-select:none;user-select:none}.slider-track{position:absolute;top:50%;left:0;width:100%;height:4px;background:#ccc;transform:translateY(-50%);border-radius:2px}.slider-filled{position:absolute;top:50%;left:0;height:4px;background:var(--primary-500);transform:translateY(-50%);border-radius:2px}.slider-thumb{position:absolute;top:50%;padding:0;margin:0;width:16px;height:16px;background:var(--white);border:4px solid var(--primary-500);border-radius:50%;transform:translate(-50%,-50%);transition:transform .1s ease;cursor:pointer}.slider-thumb:hover{box-shadow:0 0 0 3px var(--secondary-alpha);transform:translate(-50%,-50%) scale(1.2)}.slider-thumb:focus,.slider-thumb:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.slider-thumb-legend{background-color:var(--white);box-shadow:0 4px 12px #0003;border:solid 1px var(--primary-400);position:absolute;bottom:16px;font-size:.75rem;line-height:.75rem;padding:2px 4px;left:50%;border-radius:2px;transform:translate(-50%,25%);white-space:nowrap}.slider-markers{position:absolute;top:100%;width:100%;font-size:12px}.marker{position:absolute;transform:translate(-50%)}.disabled-thumb{border-color:var(--grey-300);box-shadow:none}.disabled-thumb:hover{box-shadow:none;cursor:not-allowed;transform:translate(-50%,-50%)}.disabled-legend{box-shadow:none;border-color:var(--grey-300);background-color:var(--grey-100)}.disabled-bar{background-color:var(--grey-500)}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
|
|
2506
2629
|
}], propDecorators: { icon: [{
|
|
2507
2630
|
type: Input
|
|
2508
2631
|
}], iconColor: [{
|
|
@@ -2569,7 +2692,7 @@ class UicRadioComponent extends base$4 {
|
|
|
2569
2692
|
useExisting: forwardRef(() => UicRadioComponent),
|
|
2570
2693
|
multi: true,
|
|
2571
2694
|
},
|
|
2572
|
-
], usesInheritance: true, ngImport: i0, template: "<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [tip]=\"tip\"\r\n [error]=\"error\"\r\n [disabled]=\"disabled\"\r\n>\r\n <div\r\n class=\"radio-group\"\r\n role=\"radiogroup\"\r\n [class.loading-input]=\"loading\"\r\n [class.disabled]=\"disabled || loading\"\r\n [class.direction-row]=\"direction === 'row'\"\r\n [attr.aria-disabled]=\"disabled || loading ? true : null\"\r\n >\r\n @if (options.length) {\r\n @for (option of options; track option.id) {\r\n <button\r\n type=\"button\"\r\n class=\"radio-option\"\r\n [disabled]=\"disabled || loading\"\r\n [class.selected]=\"isSelected(option)\"\r\n [attr.aria-checked]=\"isSelected(option)\"\r\n (click)=\"selectOption(option)\"\r\n (keydown.enter)=\"selectOption(option)\"\r\n (keydown.space)=\"selectOption(option)\"\r\n >\r\n <span class=\"radio-control\" aria-hidden=\"true\">\r\n <span class=\"radio-dot\"></span>\r\n </span>\r\n <span class=\"radio-texts\">\r\n <span class=\"radio-label\">{{ option.text }}</span>\r\n @if (option.detail) {\r\n <span class=\"radio-detail\">{{ option.detail }}</span>\r\n }\r\n </span>\r\n </button>\r\n }\r\n } @else {\r\n <div class=\"radio-empty\">{{ emptyText | uicTranslate }}</div>\r\n }\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [".radio-group{display:flex;flex-direction:column;gap:.25rem;padding:.25rem 0;width:100%}.radio-group.direction-row{flex-direction:row;flex-wrap:wrap}.radio-group.disabled .radio-option{cursor:not-allowed;opacity:.7}.radio-option{display:inline-flex;align-items:center;gap:.5rem;padding:.25rem .5rem;width:100%;border:none;border-radius:6px;background:transparent;cursor:pointer;text-align:left;transition:background-color .2s ease,color .2s ease}.radio-option:focus-visible{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha)}.radio-option:hover:not(:disabled){background-color:var(--grey-50)}.radio-option:disabled{cursor:not-allowed;opacity:.7}.direction-row .radio-option{flex:1 1 calc(50% - .5rem)}.radio-control{width:calc(var(--design-size-ref) * 2.2);height:calc(var(--design-size-ref) * 2.2);border-radius:50%;border:2px solid var(--primary-400);display:flex;align-items:center;justify-content:center;transition:border-color .2s ease,background-color .2s ease}.radio-dot{width:calc(var(--design-size-ref) * 2.2 / 2.2);height:calc(var(--design-size-ref) * 2.2 / 2.2);border-radius:50%;background-color:transparent;transform:scale(0);transition:transform .2s ease,background-color .2s ease}.radio-option.selected{color:var(--grey-900)}.radio-option.selected .radio-control{border-color:var(--primary-500)}.radio-option.selected .radio-dot{background-color:var(--primary-500);transform:scale(1)}.radio-texts{display:flex;flex-direction:column;gap:2px}.radio-label{font-size:.875rem;color:var(--grey-950)}.radio-detail{font-size:.75rem;color:var(--grey-500)}.radio-empty{width:100%;padding:.5rem;text-align:center;border:1px dashed var(--grey-200);border-radius:6px;color:var(--disabled-color);font-size:.875rem}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
2695
|
+
], usesInheritance: true, ngImport: i0, template: "<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [tip]=\"tip\"\r\n [error]=\"error\"\r\n [disabled]=\"disabled\"\r\n>\r\n <div\r\n class=\"radio-group\"\r\n role=\"radiogroup\"\r\n [class.loading-input]=\"loading\"\r\n [class.disabled]=\"disabled || loading\"\r\n [class.direction-row]=\"direction === 'row'\"\r\n [attr.aria-disabled]=\"disabled || loading ? true : null\"\r\n >\r\n @if (options.length) {\r\n @for (option of options; track option.id) {\r\n <button\r\n type=\"button\"\r\n class=\"radio-option\"\r\n [disabled]=\"disabled || loading\"\r\n [class.selected]=\"isSelected(option)\"\r\n [attr.aria-checked]=\"isSelected(option)\"\r\n (click)=\"selectOption(option)\"\r\n (keydown.enter)=\"selectOption(option)\"\r\n (keydown.space)=\"selectOption(option)\"\r\n >\r\n <span class=\"radio-control\" aria-hidden=\"true\">\r\n <span class=\"radio-dot\"></span>\r\n </span>\r\n <span class=\"radio-texts\">\r\n <span class=\"radio-label\">{{ option.text }}</span>\r\n @if (option.detail) {\r\n <span class=\"radio-detail\">{{ option.detail }}</span>\r\n }\r\n </span>\r\n </button>\r\n }\r\n } @else {\r\n <div class=\"radio-empty\">{{ emptyText | uicTranslate }}</div>\r\n }\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [".radio-group{display:flex;flex-direction:column;gap:.25rem;padding:.25rem 0;width:100%}.radio-group.direction-row{flex-direction:row;flex-wrap:wrap}.radio-group.disabled .radio-option{cursor:not-allowed;opacity:.7}.radio-option{display:inline-flex;align-items:center;gap:.5rem;padding:.25rem .5rem;width:100%;border:none;border-radius:6px;background:transparent;cursor:pointer;text-align:left;transition:background-color .2s ease,color .2s ease}.radio-option:focus-visible{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha)}.radio-option:hover:not(:disabled){background-color:var(--grey-50)}.radio-option:disabled{cursor:not-allowed;opacity:.7}.direction-row .radio-option{flex:1 1 calc(50% - .5rem)}.radio-control{width:calc(var(--design-size-ref) * 2.2);height:calc(var(--design-size-ref) * 2.2);border-radius:50%;border:2px solid var(--primary-400);display:flex;align-items:center;justify-content:center;transition:border-color .2s ease,background-color .2s ease}.radio-dot{width:calc(var(--design-size-ref) * 2.2 / 2.2);height:calc(var(--design-size-ref) * 2.2 / 2.2);border-radius:50%;background-color:transparent;transform:scale(0);transition:transform .2s ease,background-color .2s ease}.radio-option.selected{color:var(--grey-900)}.radio-option.selected .radio-control{border-color:var(--primary-500)}.radio-option.selected .radio-dot{background-color:var(--primary-500);transform:scale(1)}.radio-texts{display:flex;flex-direction:column;gap:2px}.radio-label{font-size:.875rem;color:var(--grey-950)}.radio-detail{font-size:.75rem;color:var(--grey-500)}.radio-empty{width:100%;padding:.5rem;text-align:center;border:1px dashed var(--grey-200);border-radius:6px;color:var(--disabled-color);font-size:.875rem}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
2573
2696
|
}
|
|
2574
2697
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicRadioComponent, decorators: [{
|
|
2575
2698
|
type: Component,
|
|
@@ -2579,7 +2702,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2579
2702
|
useExisting: forwardRef(() => UicRadioComponent),
|
|
2580
2703
|
multi: true,
|
|
2581
2704
|
},
|
|
2582
|
-
], template: "<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [tip]=\"tip\"\r\n [error]=\"error\"\r\n [disabled]=\"disabled\"\r\n>\r\n <div\r\n class=\"radio-group\"\r\n role=\"radiogroup\"\r\n [class.loading-input]=\"loading\"\r\n [class.disabled]=\"disabled || loading\"\r\n [class.direction-row]=\"direction === 'row'\"\r\n [attr.aria-disabled]=\"disabled || loading ? true : null\"\r\n >\r\n @if (options.length) {\r\n @for (option of options; track option.id) {\r\n <button\r\n type=\"button\"\r\n class=\"radio-option\"\r\n [disabled]=\"disabled || loading\"\r\n [class.selected]=\"isSelected(option)\"\r\n [attr.aria-checked]=\"isSelected(option)\"\r\n (click)=\"selectOption(option)\"\r\n (keydown.enter)=\"selectOption(option)\"\r\n (keydown.space)=\"selectOption(option)\"\r\n >\r\n <span class=\"radio-control\" aria-hidden=\"true\">\r\n <span class=\"radio-dot\"></span>\r\n </span>\r\n <span class=\"radio-texts\">\r\n <span class=\"radio-label\">{{ option.text }}</span>\r\n @if (option.detail) {\r\n <span class=\"radio-detail\">{{ option.detail }}</span>\r\n }\r\n </span>\r\n </button>\r\n }\r\n } @else {\r\n <div class=\"radio-empty\">{{ emptyText | uicTranslate }}</div>\r\n }\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [".radio-group{display:flex;flex-direction:column;gap:.25rem;padding:.25rem 0;width:100%}.radio-group.direction-row{flex-direction:row;flex-wrap:wrap}.radio-group.disabled .radio-option{cursor:not-allowed;opacity:.7}.radio-option{display:inline-flex;align-items:center;gap:.5rem;padding:.25rem .5rem;width:100%;border:none;border-radius:6px;background:transparent;cursor:pointer;text-align:left;transition:background-color .2s ease,color .2s ease}.radio-option:focus-visible{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha)}.radio-option:hover:not(:disabled){background-color:var(--grey-50)}.radio-option:disabled{cursor:not-allowed;opacity:.7}.direction-row .radio-option{flex:1 1 calc(50% - .5rem)}.radio-control{width:calc(var(--design-size-ref) * 2.2);height:calc(var(--design-size-ref) * 2.2);border-radius:50%;border:2px solid var(--primary-400);display:flex;align-items:center;justify-content:center;transition:border-color .2s ease,background-color .2s ease}.radio-dot{width:calc(var(--design-size-ref) * 2.2 / 2.2);height:calc(var(--design-size-ref) * 2.2 / 2.2);border-radius:50%;background-color:transparent;transform:scale(0);transition:transform .2s ease,background-color .2s ease}.radio-option.selected{color:var(--grey-900)}.radio-option.selected .radio-control{border-color:var(--primary-500)}.radio-option.selected .radio-dot{background-color:var(--primary-500);transform:scale(1)}.radio-texts{display:flex;flex-direction:column;gap:2px}.radio-label{font-size:.875rem;color:var(--grey-950)}.radio-detail{font-size:.75rem;color:var(--grey-500)}.radio-empty{width:100%;padding:.5rem;text-align:center;border:1px dashed var(--grey-200);border-radius:6px;color:var(--disabled-color);font-size:.875rem}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
|
|
2705
|
+
], template: "<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [tip]=\"tip\"\r\n [error]=\"error\"\r\n [disabled]=\"disabled\"\r\n>\r\n <div\r\n class=\"radio-group\"\r\n role=\"radiogroup\"\r\n [class.loading-input]=\"loading\"\r\n [class.disabled]=\"disabled || loading\"\r\n [class.direction-row]=\"direction === 'row'\"\r\n [attr.aria-disabled]=\"disabled || loading ? true : null\"\r\n >\r\n @if (options.length) {\r\n @for (option of options; track option.id) {\r\n <button\r\n type=\"button\"\r\n class=\"radio-option\"\r\n [disabled]=\"disabled || loading\"\r\n [class.selected]=\"isSelected(option)\"\r\n [attr.aria-checked]=\"isSelected(option)\"\r\n (click)=\"selectOption(option)\"\r\n (keydown.enter)=\"selectOption(option)\"\r\n (keydown.space)=\"selectOption(option)\"\r\n >\r\n <span class=\"radio-control\" aria-hidden=\"true\">\r\n <span class=\"radio-dot\"></span>\r\n </span>\r\n <span class=\"radio-texts\">\r\n <span class=\"radio-label\">{{ option.text }}</span>\r\n @if (option.detail) {\r\n <span class=\"radio-detail\">{{ option.detail }}</span>\r\n }\r\n </span>\r\n </button>\r\n }\r\n } @else {\r\n <div class=\"radio-empty\">{{ emptyText | uicTranslate }}</div>\r\n }\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [".radio-group{display:flex;flex-direction:column;gap:.25rem;padding:.25rem 0;width:100%}.radio-group.direction-row{flex-direction:row;flex-wrap:wrap}.radio-group.disabled .radio-option{cursor:not-allowed;opacity:.7}.radio-option{display:inline-flex;align-items:center;gap:.5rem;padding:.25rem .5rem;width:100%;border:none;border-radius:6px;background:transparent;cursor:pointer;text-align:left;transition:background-color .2s ease,color .2s ease}.radio-option:focus-visible{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha)}.radio-option:hover:not(:disabled){background-color:var(--grey-50)}.radio-option:disabled{cursor:not-allowed;opacity:.7}.direction-row .radio-option{flex:1 1 calc(50% - .5rem)}.radio-control{width:calc(var(--design-size-ref) * 2.2);height:calc(var(--design-size-ref) * 2.2);border-radius:50%;border:2px solid var(--primary-400);display:flex;align-items:center;justify-content:center;transition:border-color .2s ease,background-color .2s ease}.radio-dot{width:calc(var(--design-size-ref) * 2.2 / 2.2);height:calc(var(--design-size-ref) * 2.2 / 2.2);border-radius:50%;background-color:transparent;transform:scale(0);transition:transform .2s ease,background-color .2s ease}.radio-option.selected{color:var(--grey-900)}.radio-option.selected .radio-control{border-color:var(--primary-500)}.radio-option.selected .radio-dot{background-color:var(--primary-500);transform:scale(1)}.radio-texts{display:flex;flex-direction:column;gap:2px}.radio-label{font-size:.875rem;color:var(--grey-950)}.radio-detail{font-size:.75rem;color:var(--grey-500)}.radio-empty{width:100%;padding:.5rem;text-align:center;border:1px dashed var(--grey-200);border-radius:6px;color:var(--disabled-color);font-size:.875rem}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
|
|
2583
2706
|
}], propDecorators: { icon: [{
|
|
2584
2707
|
type: Input
|
|
2585
2708
|
}], iconColor: [{
|
|
@@ -2858,7 +2981,7 @@ class UicTimePickerComponent extends base$3 {
|
|
|
2858
2981
|
useExisting: forwardRef(() => UicTimePickerComponent),
|
|
2859
2982
|
multi: true,
|
|
2860
2983
|
},
|
|
2861
|
-
], viewQueries: [{ propertyName: "overlayTemplate", first: true, predicate: ["overlayTemplate"], descendants: true }, { propertyName: "hourOptions", predicate: ["hourOption"], descendants: true }, { propertyName: "minuteOptions", predicate: ["minuteOption"], descendants: true }, { propertyName: "meridiemOptions", predicate: ["meridiemOption"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fakeinput-wrapp\">\r\n <div class=\"fakeinput\" [ngClass]=\"{ errorinput: error, disabledinput: disabled }\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon-m {{ internalIcon }}\"></i>\r\n }\r\n <input\r\n type=\"text\"\r\n [disabled]=\"disabled\"\r\n [placeholder]=\"'time_picker.placeholder' | uicTranslate\"\r\n [value]=\"displayValue\"\r\n #timeInput\r\n (input)=\"onInput(timeInput.value)\"\r\n (blur)=\"onBlur()\"\r\n (keydown)=\"onKeydown($event)\"\r\n />\r\n <ui-button class=\"side-button\" type=\"ghost\" color=\"black\" [iconOnly]=\"true\" size=\"s\" icon=\"ri-arrow-down-wide-line\" [disabled]=\"disabled\" (click)=\"openOverlay()\"></ui-button>\r\n </div>\r\n \r\n <!-- Overlay simple sin estilos: 3 columnas (hora, minuto, am/pm) -->\r\n <ng-template #overlayTemplate>\r\n <div class=\"input-options\">\r\n \r\n <div class=\"time-overlay\">\r\n <div class=\"time-col hours\">\r\n @for (h of hours12; track $index) {\r\n <div\r\n #hourOption\r\n class=\"time-item\"\r\n [class.selected]=\"h === selectedHour12\"\r\n (click)=\"pickHour(h)\"\r\n >\r\n {{ h }}\r\n </div>\r\n }\r\n </div>\r\n <div class=\"time-col minutes\">\r\n @for (m of minutes; track $index) {\r\n <div\r\n #minuteOption\r\n class=\"time-item\"\r\n [class.selected]=\"m === selectedMinute\"\r\n (click)=\"pickMinute(m)\"\r\n >\r\n {{ m < 10 ? ('0' + m) : m }}\r\n </div>\r\n }\r\n </div>\r\n <div class=\"time-col meridiem\">\r\n @for (md of meridiems; track $index) {\r\n <div\r\n #meridiemOption\r\n class=\"time-item\"\r\n [class.selected]=\"md === selectedMeridiem\"\r\n (click)=\"pickMeridiem(md)\"\r\n >\r\n {{ md }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [".time-overlay{width:100%;padding:5px;display:flex;background-color:#fff}.time-col{height:140px;overflow:auto;width:33%;scrollbar-width:none}.time-item{padding:5px;border-bottom:solid 1px var(--grey-200);text-align:center;border-radius:5px;transition:ease .3s;cursor:pointer}.time-item:hover{background-color:var(--grey-100)}.time-item.selected{background-color:var(--primary-200)}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
2984
|
+
], viewQueries: [{ propertyName: "overlayTemplate", first: true, predicate: ["overlayTemplate"], descendants: true }, { propertyName: "hourOptions", predicate: ["hourOption"], descendants: true }, { propertyName: "minuteOptions", predicate: ["minuteOption"], descendants: true }, { propertyName: "meridiemOptions", predicate: ["meridiemOption"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fakeinput-wrapp\">\r\n <div class=\"fakeinput\" [ngClass]=\"{ errorinput: error, disabledinput: disabled }\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon-m {{ internalIcon }}\"></i>\r\n }\r\n <input\r\n type=\"text\"\r\n [disabled]=\"disabled\"\r\n [placeholder]=\"'time_picker.placeholder' | uicTranslate\"\r\n [value]=\"displayValue\"\r\n #timeInput\r\n (input)=\"onInput(timeInput.value)\"\r\n (blur)=\"onBlur()\"\r\n (keydown)=\"onKeydown($event)\"\r\n />\r\n <ui-button class=\"side-button\" type=\"ghost\" color=\"black\" [iconOnly]=\"true\" size=\"s\" icon=\"ri-arrow-down-wide-line\" [disabled]=\"disabled\" (click)=\"openOverlay()\"></ui-button>\r\n </div>\r\n \r\n <!-- Overlay simple sin estilos: 3 columnas (hora, minuto, am/pm) -->\r\n <ng-template #overlayTemplate>\r\n <div class=\"input-options\">\r\n \r\n <div class=\"time-overlay\">\r\n <div class=\"time-col hours\">\r\n @for (h of hours12; track $index) {\r\n <div\r\n #hourOption\r\n class=\"time-item\"\r\n [class.selected]=\"h === selectedHour12\"\r\n (click)=\"pickHour(h)\"\r\n >\r\n {{ h }}\r\n </div>\r\n }\r\n </div>\r\n <div class=\"time-col minutes\">\r\n @for (m of minutes; track $index) {\r\n <div\r\n #minuteOption\r\n class=\"time-item\"\r\n [class.selected]=\"m === selectedMinute\"\r\n (click)=\"pickMinute(m)\"\r\n >\r\n {{ m < 10 ? ('0' + m) : m }}\r\n </div>\r\n }\r\n </div>\r\n <div class=\"time-col meridiem\">\r\n @for (md of meridiems; track $index) {\r\n <div\r\n #meridiemOption\r\n class=\"time-item\"\r\n [class.selected]=\"md === selectedMeridiem\"\r\n (click)=\"pickMeridiem(md)\"\r\n >\r\n {{ md }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [".time-overlay{width:100%;padding:5px;display:flex;background-color:#fff}.time-col{height:140px;overflow:auto;width:33%;scrollbar-width:none}.time-item{padding:5px;border-bottom:solid 1px var(--grey-200);text-align:center;border-radius:5px;transition:ease .3s;cursor:pointer}.time-item:hover{background-color:var(--grey-100)}.time-item.selected{background-color:var(--primary-200)}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
2862
2985
|
}
|
|
2863
2986
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTimePickerComponent, decorators: [{
|
|
2864
2987
|
type: Component,
|
|
@@ -2868,7 +2991,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2868
2991
|
useExisting: forwardRef(() => UicTimePickerComponent),
|
|
2869
2992
|
multi: true,
|
|
2870
2993
|
},
|
|
2871
|
-
], template: "<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fakeinput-wrapp\">\r\n <div class=\"fakeinput\" [ngClass]=\"{ errorinput: error, disabledinput: disabled }\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon-m {{ internalIcon }}\"></i>\r\n }\r\n <input\r\n type=\"text\"\r\n [disabled]=\"disabled\"\r\n [placeholder]=\"'time_picker.placeholder' | uicTranslate\"\r\n [value]=\"displayValue\"\r\n #timeInput\r\n (input)=\"onInput(timeInput.value)\"\r\n (blur)=\"onBlur()\"\r\n (keydown)=\"onKeydown($event)\"\r\n />\r\n <ui-button class=\"side-button\" type=\"ghost\" color=\"black\" [iconOnly]=\"true\" size=\"s\" icon=\"ri-arrow-down-wide-line\" [disabled]=\"disabled\" (click)=\"openOverlay()\"></ui-button>\r\n </div>\r\n \r\n <!-- Overlay simple sin estilos: 3 columnas (hora, minuto, am/pm) -->\r\n <ng-template #overlayTemplate>\r\n <div class=\"input-options\">\r\n \r\n <div class=\"time-overlay\">\r\n <div class=\"time-col hours\">\r\n @for (h of hours12; track $index) {\r\n <div\r\n #hourOption\r\n class=\"time-item\"\r\n [class.selected]=\"h === selectedHour12\"\r\n (click)=\"pickHour(h)\"\r\n >\r\n {{ h }}\r\n </div>\r\n }\r\n </div>\r\n <div class=\"time-col minutes\">\r\n @for (m of minutes; track $index) {\r\n <div\r\n #minuteOption\r\n class=\"time-item\"\r\n [class.selected]=\"m === selectedMinute\"\r\n (click)=\"pickMinute(m)\"\r\n >\r\n {{ m < 10 ? ('0' + m) : m }}\r\n </div>\r\n }\r\n </div>\r\n <div class=\"time-col meridiem\">\r\n @for (md of meridiems; track $index) {\r\n <div\r\n #meridiemOption\r\n class=\"time-item\"\r\n [class.selected]=\"md === selectedMeridiem\"\r\n (click)=\"pickMeridiem(md)\"\r\n >\r\n {{ md }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [".time-overlay{width:100%;padding:5px;display:flex;background-color:#fff}.time-col{height:140px;overflow:auto;width:33%;scrollbar-width:none}.time-item{padding:5px;border-bottom:solid 1px var(--grey-200);text-align:center;border-radius:5px;transition:ease .3s;cursor:pointer}.time-item:hover{background-color:var(--grey-100)}.time-item.selected{background-color:var(--primary-200)}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
|
|
2994
|
+
], template: "<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fakeinput-wrapp\">\r\n <div class=\"fakeinput\" [ngClass]=\"{ errorinput: error, disabledinput: disabled }\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon-m {{ internalIcon }}\"></i>\r\n }\r\n <input\r\n type=\"text\"\r\n [disabled]=\"disabled\"\r\n [placeholder]=\"'time_picker.placeholder' | uicTranslate\"\r\n [value]=\"displayValue\"\r\n #timeInput\r\n (input)=\"onInput(timeInput.value)\"\r\n (blur)=\"onBlur()\"\r\n (keydown)=\"onKeydown($event)\"\r\n />\r\n <ui-button class=\"side-button\" type=\"ghost\" color=\"black\" [iconOnly]=\"true\" size=\"s\" icon=\"ri-arrow-down-wide-line\" [disabled]=\"disabled\" (click)=\"openOverlay()\"></ui-button>\r\n </div>\r\n \r\n <!-- Overlay simple sin estilos: 3 columnas (hora, minuto, am/pm) -->\r\n <ng-template #overlayTemplate>\r\n <div class=\"input-options\">\r\n \r\n <div class=\"time-overlay\">\r\n <div class=\"time-col hours\">\r\n @for (h of hours12; track $index) {\r\n <div\r\n #hourOption\r\n class=\"time-item\"\r\n [class.selected]=\"h === selectedHour12\"\r\n (click)=\"pickHour(h)\"\r\n >\r\n {{ h }}\r\n </div>\r\n }\r\n </div>\r\n <div class=\"time-col minutes\">\r\n @for (m of minutes; track $index) {\r\n <div\r\n #minuteOption\r\n class=\"time-item\"\r\n [class.selected]=\"m === selectedMinute\"\r\n (click)=\"pickMinute(m)\"\r\n >\r\n {{ m < 10 ? ('0' + m) : m }}\r\n </div>\r\n }\r\n </div>\r\n <div class=\"time-col meridiem\">\r\n @for (md of meridiems; track $index) {\r\n <div\r\n #meridiemOption\r\n class=\"time-item\"\r\n [class.selected]=\"md === selectedMeridiem\"\r\n (click)=\"pickMeridiem(md)\"\r\n >\r\n {{ md }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [".time-overlay{width:100%;padding:5px;display:flex;background-color:#fff}.time-col{height:140px;overflow:auto;width:33%;scrollbar-width:none}.time-item{padding:5px;border-bottom:solid 1px var(--grey-200);text-align:center;border-radius:5px;transition:ease .3s;cursor:pointer}.time-item:hover{background-color:var(--grey-100)}.time-item.selected{background-color:var(--primary-200)}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
|
|
2872
2995
|
}], propDecorators: { icon: [{
|
|
2873
2996
|
type: Input
|
|
2874
2997
|
}], iconColor: [{
|
|
@@ -2988,7 +3111,7 @@ class UicPoolOptionsComponent extends base$2 {
|
|
|
2988
3111
|
useExisting: forwardRef(() => UicPoolOptionsComponent),
|
|
2989
3112
|
multi: true
|
|
2990
3113
|
}
|
|
2991
|
-
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"input-wrapper \">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n @if (label) {\r\n <div class=\"label inputlabel\" [class.font-error]=\"error\">{{label}} </div>\r\n }\r\n <div>\r\n <div class=\"pool-wrapper\" > \r\n @for (opt of options; track opt.id) {\r\n <div (click)=\"updateOptions(opt.id??'')\" class=\"pool-option\" [class.disabled-opt]=\"disabled\" [class.active-opt]=\"isSelected(opt.id??'')\">{{opt.text}}</div>\r\n }\r\n \r\n </div>\r\n <!-- BLOQUE DE LISTTA DETALLADA -->\r\n @if(enabledListView && selectedValues.length > 0){\r\n <h2 class=\"pool-selected-title\">{{listViewTitle | uicTranslate}}</h2>\r\n <div>\r\n @for (item of selectedValues; track item.id) {\r\n <div class=\"pool-selected\"> \r\n <div class=\"pool-selected-label\">{{getItemName(item.id)}} </div>\r\n <div class=\"pool-selected-input\">\r\n <ui-input [disabled]=\"disabled\">\r\n <input [disabled]=\"disabled\" [placeholder]=\"'common.detail' | uicTranslate\" type=\"text\" [value]=\"item.detail ?? ''\" (input)=\"updateDetail(item.id, $any($event.target).value)\">\r\n </ui-input>\r\n @if (!disabled) {\r\n <div class=\"pool-selected-button\" (click)=\"updateOptions(item.id)\" >\r\n <i class=\"ri-delete-bin-5-line\" ></i>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n <!-- ALERTS -->\r\n @if (error) {\r\n <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n }\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".pool-wrapper{display:flex;gap:var(--design-size-ref);flex-wrap:wrap}.pool-option{border:solid 1px var(--grey-300);color:var(--secondary-400);background-color:var(--secondary-50);font-size:.875rem;line-height:1.25rem;font-weight:400;padding:.5rem 1rem;border-radius:1rem;transition:ease .3s;-webkit-user-select:none;user-select:none;cursor:pointer}.pool-option:hover{border-color:var(--secondary-400)}.pool-selected-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1.5rem 0;color:var(--grey-950)}.pool-selected-label{margin-top:24px;font-size:.875rem;margin-bottom:.5rem}.pool-selected-input{display:flex;align-items:center;gap:16px}.pool-selected-button{height:calc(4 * var(--form-ref));aspect-ratio:1;border-radius:var(--button-radius);border:solid 1px var(--grey-300);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.25rem;transition:ease .3s}.pool-selected-button:hover{border-color:var(--red-400);color:var(--red-600)}.disabled-opt{background-color:var(--grey-200);border:none;cursor:not-allowed}.active-opt{background-color:var(--secondary-100);border:solid 1px var(--primary-400)}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
3114
|
+
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"input-wrapper \">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n @if (label) {\r\n <div class=\"label inputlabel\" [class.font-error]=\"error\">{{label}} </div>\r\n }\r\n <div>\r\n <div class=\"pool-wrapper\" > \r\n @for (opt of options; track opt.id) {\r\n <div (click)=\"updateOptions(opt.id??'')\" class=\"pool-option\" [class.disabled-opt]=\"disabled\" [class.active-opt]=\"isSelected(opt.id??'')\">{{opt.text}}</div>\r\n }\r\n \r\n </div>\r\n <!-- BLOQUE DE LISTTA DETALLADA -->\r\n @if(enabledListView && selectedValues.length > 0){\r\n <h2 class=\"pool-selected-title\">{{listViewTitle | uicTranslate}}</h2>\r\n <div>\r\n @for (item of selectedValues; track item.id) {\r\n <div class=\"pool-selected\"> \r\n <div class=\"pool-selected-label\">{{getItemName(item.id)}} </div>\r\n <div class=\"pool-selected-input\">\r\n <ui-input [disabled]=\"disabled\">\r\n <input [disabled]=\"disabled\" [placeholder]=\"'common.detail' | uicTranslate\" type=\"text\" [value]=\"item.detail ?? ''\" (input)=\"updateDetail(item.id, $any($event.target).value)\">\r\n </ui-input>\r\n @if (!disabled) {\r\n <div class=\"pool-selected-button\" (click)=\"updateOptions(item.id)\" >\r\n <i class=\"ri-delete-bin-5-line\" ></i>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n <!-- ALERTS -->\r\n @if (error) {\r\n <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n }\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".pool-wrapper{display:flex;gap:var(--design-size-ref);flex-wrap:wrap}.pool-option{border:solid 1px var(--grey-300);color:var(--secondary-400);background-color:var(--secondary-50);font-size:.875rem;line-height:1.25rem;font-weight:400;padding:.5rem 1rem;border-radius:1rem;transition:ease .3s;-webkit-user-select:none;user-select:none;cursor:pointer}.pool-option:hover{border-color:var(--secondary-400)}.pool-selected-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1.5rem 0;color:var(--grey-950)}.pool-selected-label{margin-top:24px;font-size:.875rem;margin-bottom:.5rem}.pool-selected-input{display:flex;align-items:center;gap:16px}.pool-selected-button{height:calc(4 * var(--form-ref));aspect-ratio:1;border-radius:var(--button-radius);border:solid 1px var(--grey-300);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.25rem;transition:ease .3s}.pool-selected-button:hover{border-color:var(--red-400);color:var(--red-600)}.disabled-opt{background-color:var(--grey-200);border:none;cursor:not-allowed}.active-opt{background-color:var(--secondary-100);border:solid 1px var(--primary-400)}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
2992
3115
|
}
|
|
2993
3116
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPoolOptionsComponent, decorators: [{
|
|
2994
3117
|
type: Component,
|
|
@@ -2998,7 +3121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2998
3121
|
useExisting: forwardRef(() => UicPoolOptionsComponent),
|
|
2999
3122
|
multi: true
|
|
3000
3123
|
}
|
|
3001
|
-
], template: "<div class=\"input-wrapper \">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n @if (label) {\r\n <div class=\"label inputlabel\" [class.font-error]=\"error\">{{label}} </div>\r\n }\r\n <div>\r\n <div class=\"pool-wrapper\" > \r\n @for (opt of options; track opt.id) {\r\n <div (click)=\"updateOptions(opt.id??'')\" class=\"pool-option\" [class.disabled-opt]=\"disabled\" [class.active-opt]=\"isSelected(opt.id??'')\">{{opt.text}}</div>\r\n }\r\n \r\n </div>\r\n <!-- BLOQUE DE LISTTA DETALLADA -->\r\n @if(enabledListView && selectedValues.length > 0){\r\n <h2 class=\"pool-selected-title\">{{listViewTitle | uicTranslate}}</h2>\r\n <div>\r\n @for (item of selectedValues; track item.id) {\r\n <div class=\"pool-selected\"> \r\n <div class=\"pool-selected-label\">{{getItemName(item.id)}} </div>\r\n <div class=\"pool-selected-input\">\r\n <ui-input [disabled]=\"disabled\">\r\n <input [disabled]=\"disabled\" [placeholder]=\"'common.detail' | uicTranslate\" type=\"text\" [value]=\"item.detail ?? ''\" (input)=\"updateDetail(item.id, $any($event.target).value)\">\r\n </ui-input>\r\n @if (!disabled) {\r\n <div class=\"pool-selected-button\" (click)=\"updateOptions(item.id)\" >\r\n <i class=\"ri-delete-bin-5-line\" ></i>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n <!-- ALERTS -->\r\n @if (error) {\r\n <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n }\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".pool-wrapper{display:flex;gap:var(--design-size-ref);flex-wrap:wrap}.pool-option{border:solid 1px var(--grey-300);color:var(--secondary-400);background-color:var(--secondary-50);font-size:.875rem;line-height:1.25rem;font-weight:400;padding:.5rem 1rem;border-radius:1rem;transition:ease .3s;-webkit-user-select:none;user-select:none;cursor:pointer}.pool-option:hover{border-color:var(--secondary-400)}.pool-selected-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1.5rem 0;color:var(--grey-950)}.pool-selected-label{margin-top:24px;font-size:.875rem;margin-bottom:.5rem}.pool-selected-input{display:flex;align-items:center;gap:16px}.pool-selected-button{height:calc(4 * var(--form-ref));aspect-ratio:1;border-radius:var(--button-radius);border:solid 1px var(--grey-300);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.25rem;transition:ease .3s}.pool-selected-button:hover{border-color:var(--red-400);color:var(--red-600)}.disabled-opt{background-color:var(--grey-200);border:none;cursor:not-allowed}.active-opt{background-color:var(--secondary-100);border:solid 1px var(--primary-400)}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
|
|
3124
|
+
], template: "<div class=\"input-wrapper \">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n @if (label) {\r\n <div class=\"label inputlabel\" [class.font-error]=\"error\">{{label}} </div>\r\n }\r\n <div>\r\n <div class=\"pool-wrapper\" > \r\n @for (opt of options; track opt.id) {\r\n <div (click)=\"updateOptions(opt.id??'')\" class=\"pool-option\" [class.disabled-opt]=\"disabled\" [class.active-opt]=\"isSelected(opt.id??'')\">{{opt.text}}</div>\r\n }\r\n \r\n </div>\r\n <!-- BLOQUE DE LISTTA DETALLADA -->\r\n @if(enabledListView && selectedValues.length > 0){\r\n <h2 class=\"pool-selected-title\">{{listViewTitle | uicTranslate}}</h2>\r\n <div>\r\n @for (item of selectedValues; track item.id) {\r\n <div class=\"pool-selected\"> \r\n <div class=\"pool-selected-label\">{{getItemName(item.id)}} </div>\r\n <div class=\"pool-selected-input\">\r\n <ui-input [disabled]=\"disabled\">\r\n <input [disabled]=\"disabled\" [placeholder]=\"'common.detail' | uicTranslate\" type=\"text\" [value]=\"item.detail ?? ''\" (input)=\"updateDetail(item.id, $any($event.target).value)\">\r\n </ui-input>\r\n @if (!disabled) {\r\n <div class=\"pool-selected-button\" (click)=\"updateOptions(item.id)\" >\r\n <i class=\"ri-delete-bin-5-line\" ></i>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n <!-- ALERTS -->\r\n @if (error) {\r\n <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n }\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".pool-wrapper{display:flex;gap:var(--design-size-ref);flex-wrap:wrap}.pool-option{border:solid 1px var(--grey-300);color:var(--secondary-400);background-color:var(--secondary-50);font-size:.875rem;line-height:1.25rem;font-weight:400;padding:.5rem 1rem;border-radius:1rem;transition:ease .3s;-webkit-user-select:none;user-select:none;cursor:pointer}.pool-option:hover{border-color:var(--secondary-400)}.pool-selected-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1.5rem 0;color:var(--grey-950)}.pool-selected-label{margin-top:24px;font-size:.875rem;margin-bottom:.5rem}.pool-selected-input{display:flex;align-items:center;gap:16px}.pool-selected-button{height:calc(4 * var(--form-ref));aspect-ratio:1;border-radius:var(--button-radius);border:solid 1px var(--grey-300);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.25rem;transition:ease .3s}.pool-selected-button:hover{border-color:var(--red-400);color:var(--red-600)}.disabled-opt{background-color:var(--grey-200);border:none;cursor:not-allowed}.active-opt{background-color:var(--secondary-100);border:solid 1px var(--primary-400)}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
|
|
3002
3125
|
}], propDecorators: { icon: [{
|
|
3003
3126
|
type: Input
|
|
3004
3127
|
}], iconColor: [{
|
|
@@ -3815,7 +3938,7 @@ class UicDynamicFormComponent {
|
|
|
3815
3938
|
recognition.start();
|
|
3816
3939
|
}
|
|
3817
3940
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
3818
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicDynamicFormComponent, isStandalone: true, selector: "ui-dynamic-form", inputs: { fields: "fields", form: "form", disabled: "disabled", voiceToTextSilenceMs: "voiceToTextSilenceMs", cols: "cols" }, ngImport: i0, template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\n @for (state of visibleFieldStates(); track state.field.name) {\n @let field = state.field;\n @let control = state.control;\n @let currentValue = state.value ?? '';\n @let error = getControlErrorMessages(control, field)[0];\n\n <div class=\"col-span-{{field.colSpan || 1}}\" [class.new-line]=\"field.newLine\">\n @if (['text', 'number'].includes(field.type)) {\n @let inputColor = getInputColor(field, currentValue);\n <ui-input\n [error]=\"error\"\n [label]=\"field.label + (field.required ? ' *' : '')\"\n [icon]=\"field.icon??''\"\n [disabled]=\"!!control?.disabled\"\n [internalIconColor]=\"inputColor\"\n [internalIcon]=\"field.internalIcon || (currentValue !== '' ? getIconByColor(field, inputColor) : '')\"\n [loading]=\"field.loading??false\"\n [tip]=\"field.tip??''\">\n <input #inp\n [id]=\"field.name\"\n [formControlName]=\"field.name\"\n [type]=\"field.type\"\n [step]=\"field.step\"\n [min]=\"field.min\"\n [max]=\"field.max\"\n [minLength]=\"field.minLength||null\"\n [maxlength]=\"field.maxLength||null\"\n [placeholder]=\"field.placeholder??field.label\"/>\n @if (field.maxLength && field.showCounter) {\n <span counter>{{inp.value.length}} /{{field.maxLength}}</span>\n }\n </ui-input>\n }\n @if (field.type === 'textarea') {\n <ui-input\n [error]=\"error\"\n [label]=\"field.label + (field.required ? ' *' : '')\"\n [icon]=\"field.icon??''\"\n [disabled]=\"!!control?.disabled\"\n [internalIconColor]=\"field.internalIconColor??'grey'\"\n [internalIcon]=\"field.internalIcon??''\"\n [loading]=\"field.loading??false\"\n [tip]=\"field.tip??''\">\n <textarea #ta\n [id]=\"field.name\"\n [formControlName]=\"field.name\"\n [minLength]=\"field.minLength||null\"\n [maxlength]=\"field.maxLength||null\"\n [textareaAutoresize]=\"field.textareaResize\"\n [textareaAutoresizeMinRows]=\"field.resizeMinRows??1\"\n [textareaAutoresizeMaxRows]=\"field.resizeMaxRows??5\"\n [rows]=\"field.resizeMinRows??3\"\n [placeholder]=\"field.placeholder??field.label\"\n ></textarea>\n @if (field.voiceToTextEnabled && !control?.disabled) {\n @let listening = isListening(field.name);\n <div class=\"speak-icon\" (click)=\"ta.focus()\">\n <ui-button\n [disabled]=\"listening\"\n style=\"margin-bottom: 2px;\"\n (click)=\"voiceToText(ta, field.name)\"\n [icon]=\"listening?'ri-mic-fill':'ri-mic-line'\"\n [type]=\"listening?'filled':'bordered'\"\n size=\"s\"\n [iconOnly]=\"true\"\n ></ui-button>\n @if (listening) {\n <i class=\"ri-voiceprint-line\"></i>\n }\n </div>\n }\n @if (field.showCounter) {\n <span counter>\n {{ta.value.length}}\n @if (field.maxLength) {\n /{{field.maxLength}}\n }\n </span>\n }\n </ui-input>\n }\n @if (field.type === 'phone') {\n <ui-phone-input\n [error]=\"error\"\n [label]=\"field.label + (field.required ? ' *' : '')\"\n [icon]=\"field.icon??''\"\n [internalIcon]=\"field.internalIcon??''\"\n [internalIconColor]=\"field.internalIconColor??'grey'\"\n [loading]=\"field.loading??false\"\n [tip]=\"field.tip??''\"\n [id]=\"field.name\"\n [formControlName]=\"field.name\"\n [placeholder]=\"field.placeholder||field.label||''\"\n >\n </ui-phone-input>\n }\n @else if (field.type === 'date') {\n <ui-date-picker\n [error]=\"error\"\n [label]=\"field.label + (field.required ? ' *' : '')\"\n [id]=\"field.name\"\n [icon]=\"field.icon??''\"\n [internalIcon]=\"field.internalIcon??''\"\n [internalIconColor]=\"field.internalIconColor??'grey'\"\n [tip]=\"field.tip??''\"\n [justMonth]=\"!!field.monthMode\"\n [min]=\"field.minDate??''\"\n [max]=\"field.maxDate??''\"\n [monthDay]=\"field.monthDay||'first'\"\n [formControlName]=\"field.name\"\n ></ui-date-picker>\n }\n @else if (field.type === 'time') {\n <ui-time-picker\n [error]=\"error\"\n [label]=\"field.label + (field.required ? ' *' : '')\"\n [id]=\"field.name\"\n [icon]=\"field.icon??''\"\n [internalIcon]=\"field.internalIcon??''\"\n [internalIconColor]=\"field.internalIconColor??'grey'\"\n [tip]=\"field.tip??''\"\n [interval]=\"field.timeInterval??5\"\n [formControlName]=\"field.name\"\n ></ui-time-picker>\n }\n @else if (field.type === 'select') {\n <ui-select\n [error]=\"error\"\n [label]=\"field.label + (field.required ? ' *' : '')\"\n [id]=\"field.name\"\n [icon]=\"field.icon??''\"\n [internalIcon]=\"field.internalIcon??''\"\n [internalIconColor]=\"field.internalIconColor??'grey'\"\n [loading]=\"field.loading??false\"\n [tip]=\"field.tip??''\"\n [formControlName]=\"field.name\"\n [options]=\"field.options || []\"\n ></ui-select>\n }\n @else if (field.type === 'multyselect') {\n <ui-multy-select\n [error]=\"error\"\n [label]=\"field.label + (field.required ? ' *' : '')\"\n [id]=\"field.name\"\n [icon]=\"field.icon??''\"\n [loading]=\"field.loading??false\"\n [internalIcon]=\"field.internalIcon??''\"\n [internalIconColor]=\"field.internalIconColor??'grey'\"\n [tip]=\"field.tip??''\"\n [formControlName]=\"field.name\"\n [options]=\"field.options || []\"\n ></ui-multy-select>\n }\n @else if (field.type === 'searcher') {\n <ui-searcher\n [id]=\"field.name\"\n [formControlName]=\"field.name\"\n [label]=\"field.label + (field.required ? ' *' : '')\"\n [icon]=\"field.icon??''\"\n [loading]=\"field.loading??false\"\n [tip]=\"field.tip??''\"\n [searchFn]=\"getSearcherFn(field)\"\n [itemDisplayFn]=\"getSearcherDisplayFn(field)\"\n [itemIsEnabledFn]=\"getSearcherIsEnabledFn(field)\"\n [placeholder]=\"field.placeholder??'common.search_ellipsis'\"\n [error]=\"error\"\n ></ui-searcher>\n }\n @else if (field.type === 'file') {\n <ui-file-input\n [error]=\"error\"\n [label]=\"field.label + (field.required ? ' *' : '')\"\n [id]=\"field.name\"\n [icon]=\"field.icon??''\"\n [loading]=\"field.loading??false\"\n [internalIcon]=\"field.internalIcon??''\"\n [internalIconColor]=\"field.internalIconColor??'grey'\"\n [multy]=\"field.multyEnabled??false\"\n [tip]=\"field.tip??''\"\n [fileTypes]=\"field.fileTypes??null\"\n [formControlName]=\"field.name\"\n ></ui-file-input>\n }\n @else if (['checkbox', 'switch'].includes(field.type)) {\n <ui-checkbox\n [label]=\"(field.label??'') + (field.required ? ' *' : '')\"\n [id]=\"field.name\"\n [formControlName]=\"field.name\"\n [icon]=\"field.icon??''\"\n [placeholder]=\"field.placeholder??''\"\n [tip]=\"field.tip??''\"\n [type]=\"field.type === 'checkbox' ? 'checkbox' : 'switch'\"\n ></ui-checkbox>\n }\n @else if (field.type === 'radio') {\n <ui-radio\n [label]=\"field.label + (field.required ? ' *' : '')\"\n [id]=\"field.name\"\n [formControlName]=\"field.name\"\n [icon]=\"field.icon??''\"\n [tip]=\"field.tip??''\"\n [loading]=\"field.loading??false\"\n [error]=\"error\"\n [options]=\"field.options || []\"\n ></ui-radio>\n }\n @else if (field.type === 'slider') {\n <ui-slider\n [min]=\"field.min??0\"\n [max]=\"field.max??100\"\n [step]=\"field.sliderInterval??1\"\n [markerCount]=\"field.sliderMarks??5\"\n [id]=\"field.name\"\n [formControlName]=\"field.name\"\n [icon]=\"field.icon??''\"\n [tip]=\"field.tip??''\"\n [error]=\"error\"\n [label]=\"field.label + (field.required ? ' *' : '')\"\n ></ui-slider>\n }\n @else if (field.type === 'pool') {\n <ui-pool-options\n [error]=\"error\"\n [label]=\"field.label + (field.required ? ' *' : '')\"\n [id]=\"field.name\"\n [icon]=\"field.icon??''\"\n [loading]=\"field.loading??false\"\n [multy]=\"field.multyEnabled??false\"\n [tip]=\"field.tip??''\"\n [listViewTitle]=\"field.poolTitle??'common.selected'\"\n [enabledListView]=\"field.poolEnabledListView||false\"\n [formControlName]=\"field.name\"\n [options]=\"field.options || []\"\n ></ui-pool-options>\n }\n </div>\n }\n</div>\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:.75rem}@media (max-width: 479px){.form{grid-template-columns:1fr}.form .col-span-1,.form .col-span-2,.form .col-span-3,.form .col-span-4,.form .col-span-5,.form .col-span-6,.form .col-span-7,.form .col-span-8,.form .col-span-9,.form .col-span-10,.form .col-span-11,.form .col-span-12{grid-column:1/-1}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),1fr)}}@media (min-width: 480px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),1fr)}}h2{margin-top:1.5rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}.speak-icon{display:flex;width:100%;align-items:center;gap:10px}.speak-icon i{font-size:20px;color:var(--primary-500)}.new-line{grid-column-start:1}textarea{resize:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: UicDatePickerComponent, selector: "ui-date-picker", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "disabled", "label", "error", "tip", "max", "min", "justMonth", "monthDay"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: UicSliderComponent, selector: "ui-slider", inputs: ["icon", "iconColor", "label", "error", "tip", "min", "max", "step", "markerCount", "disabled", "loading"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicPoolOptionsComponent, selector: "ui-pool-options", inputs: ["icon", "iconColor", "size", "label", "error", "tip", "disabled", "loading", "multy", "enabledListView", "listViewTitle", "options"] }, { kind: "component", type: UicTimePickerComponent, selector: "ui-time-picker", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "disabled", "label", "error", "tip", "interval"] }, { kind: "component", type: UicRadioComponent, selector: "ui-radio", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled", "loading", "options", "emptyText", "direction"] }, { kind: "component", type: UicSearcherComponent, selector: "ui-searcher", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "minimumSearchLength", "showSelected", "placeholder", "searchFn", "itemDisplayFn", "itemIsEnabledFn", "manualSearch", "stateless"], outputs: ["pickedItem"] }, { kind: "component", type: UicMultySelectComponent, selector: "ui-multy-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "options"] }, { kind: "component", type: UicFileInputComponent, selector: "ui-file-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading", "multy", "fileTypes"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "nonSelectedText", "noneText", "emptyText", "loading", "nullable", "options"] }, { kind: "directive", type: UicTextareaAutoresizeDirective, selector: "[textareaAutoresize]", inputs: ["minRows", "maxRows", "textareaAutoresize"] }, { kind: "directive", type: UicTextareaAutoresizeMinRowsDirective, selector: "[textareaAutoresizeMinRows]", inputs: ["textareaAutoresizeMinRows"] }, { kind: "directive", type: UicTextareaAutoresizeMaxRowsDirective, selector: "[textareaAutoresizeMaxRows]", inputs: ["textareaAutoresizeMaxRows"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "component", type: UicPhoneInputComponent, selector: "ui-phone-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "placeholder", "disabled", "loading", "preferredCountries", "flagPath", "countries"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
3941
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicDynamicFormComponent, isStandalone: true, selector: "ui-dynamic-form", inputs: { fields: "fields", form: "form", disabled: "disabled", voiceToTextSilenceMs: "voiceToTextSilenceMs", cols: "cols" }, ngImport: i0, template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n @for (state of visibleFieldStates(); track state.field.name) {\r\n @let field = state.field;\r\n @let control = state.control;\r\n @let currentValue = state.value ?? '';\r\n @let error = getControlErrorMessages(control, field)[0];\r\n\r\n <div class=\"col-span-{{field.colSpan || 1}}\" [class.new-line]=\"field.newLine\">\r\n @if (['text', 'number'].includes(field.type)) {\r\n @let inputColor = getInputColor(field, currentValue);\r\n <ui-input\r\n [error]=\"error\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [disabled]=\"!!control?.disabled\"\r\n [internalIconColor]=\"inputColor\"\r\n [internalIcon]=\"field.internalIcon || (currentValue !== '' ? getIconByColor(field, inputColor) : '')\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\">\r\n <input #inp\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [type]=\"field.type\"\r\n [step]=\"field.step\"\r\n [min]=\"field.min\"\r\n [max]=\"field.max\"\r\n [minLength]=\"field.minLength||null\"\r\n [maxlength]=\"field.maxLength||null\"\r\n [placeholder]=\"field.placeholder??field.label\"/>\r\n @if (field.maxLength && field.showCounter) {\r\n <span counter>{{inp.value.length}} /{{field.maxLength}}</span>\r\n }\r\n </ui-input>\r\n }\r\n @if (field.type === 'textarea') {\r\n <ui-input\r\n [error]=\"error\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [disabled]=\"!!control?.disabled\"\r\n [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\">\r\n <textarea #ta\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [minLength]=\"field.minLength||null\"\r\n [maxlength]=\"field.maxLength||null\"\r\n [textareaAutoresize]=\"field.textareaResize\"\r\n [textareaAutoresizeMinRows]=\"field.resizeMinRows??1\"\r\n [textareaAutoresizeMaxRows]=\"field.resizeMaxRows??5\"\r\n [rows]=\"field.resizeMinRows??3\"\r\n [placeholder]=\"field.placeholder??field.label\"\r\n ></textarea>\r\n @if (field.voiceToTextEnabled && !control?.disabled) {\r\n @let listening = isListening(field.name);\r\n <div class=\"speak-icon\" (click)=\"ta.focus()\">\r\n <ui-button\r\n [disabled]=\"listening\"\r\n style=\"margin-bottom: 2px;\"\r\n (click)=\"voiceToText(ta, field.name)\"\r\n [icon]=\"listening?'ri-mic-fill':'ri-mic-line'\"\r\n [type]=\"listening?'filled':'bordered'\"\r\n size=\"s\"\r\n [iconOnly]=\"true\"\r\n ></ui-button>\r\n @if (listening) {\r\n <i class=\"ri-voiceprint-line\"></i>\r\n }\r\n </div>\r\n }\r\n @if (field.showCounter) {\r\n <span counter>\r\n {{ta.value.length}}\r\n @if (field.maxLength) {\r\n /{{field.maxLength}}\r\n }\r\n </span>\r\n }\r\n </ui-input>\r\n }\r\n @if (field.type === 'phone') {\r\n <ui-phone-input\r\n [error]=\"error\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [placeholder]=\"field.placeholder||field.label||''\"\r\n >\r\n </ui-phone-input>\r\n }\r\n @else if (field.type === 'date') {\r\n <ui-date-picker\r\n [error]=\"error\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n [tip]=\"field.tip??''\"\r\n [justMonth]=\"!!field.monthMode\"\r\n [min]=\"field.minDate??''\"\r\n [max]=\"field.maxDate??''\"\r\n [monthDay]=\"field.monthDay||'first'\"\r\n [formControlName]=\"field.name\"\r\n ></ui-date-picker>\r\n }\r\n @else if (field.type === 'time') {\r\n <ui-time-picker\r\n [error]=\"error\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n [tip]=\"field.tip??''\"\r\n [interval]=\"field.timeInterval??5\"\r\n [formControlName]=\"field.name\"\r\n ></ui-time-picker>\r\n }\r\n @else if (field.type === 'select') {\r\n <ui-select\r\n [error]=\"error\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n [loading]=\"field.loading??false\"\r\n [nullable]=\"field.selectNullable??false\"\r\n [searcherEnabled]=\"field.selectSearchEnabled??false\"\r\n [tip]=\"field.tip??''\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-select>\r\n }\r\n @else if (field.type === 'multyselect') {\r\n <ui-multy-select\r\n [error]=\"error\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n [tip]=\"field.tip??''\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-multy-select>\r\n }\r\n @else if (field.type === 'searcher') {\r\n <ui-searcher\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\"\r\n [searchFn]=\"getSearcherFn(field)\"\r\n [itemDisplayFn]=\"getSearcherDisplayFn(field)\"\r\n [itemIsEnabledFn]=\"getSearcherIsEnabledFn(field)\"\r\n [placeholder]=\"field.placeholder??'common.search_ellipsis'\"\r\n [error]=\"error\"\r\n ></ui-searcher>\r\n }\r\n @else if (field.type === 'file') {\r\n <ui-file-input\r\n [error]=\"error\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n [multy]=\"field.multyEnabled??false\"\r\n [tip]=\"field.tip??''\"\r\n [fileTypes]=\"field.fileTypes??null\"\r\n [formControlName]=\"field.name\"\r\n ></ui-file-input>\r\n }\r\n @else if (['checkbox', 'switch'].includes(field.type)) {\r\n <ui-checkbox\r\n [label]=\"(field.label??'') + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [placeholder]=\"field.placeholder??''\"\r\n [tip]=\"field.tip??''\"\r\n [type]=\"field.type === 'checkbox' ? 'checkbox' : 'switch'\"\r\n ></ui-checkbox>\r\n }\r\n @else if (field.type === 'radio') {\r\n <ui-radio\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n [loading]=\"field.loading??false\"\r\n [error]=\"error\"\r\n [options]=\"field.options || []\"\r\n ></ui-radio>\r\n }\r\n @else if (field.type === 'slider') {\r\n <ui-slider\r\n [min]=\"field.min??0\"\r\n [max]=\"field.max??100\"\r\n [step]=\"field.sliderInterval??1\"\r\n [markerCount]=\"field.sliderMarks??5\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n [error]=\"error\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n ></ui-slider>\r\n }\r\n @else if (field.type === 'pool') {\r\n <ui-pool-options\r\n [error]=\"error\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [multy]=\"field.multyEnabled??false\"\r\n [tip]=\"field.tip??''\"\r\n [listViewTitle]=\"field.poolTitle??'common.selected'\"\r\n [enabledListView]=\"field.poolEnabledListView||false\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-pool-options>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:.75rem}@media (max-width: 479px){.form{grid-template-columns:1fr}.form .col-span-1,.form .col-span-2,.form .col-span-3,.form .col-span-4,.form .col-span-5,.form .col-span-6,.form .col-span-7,.form .col-span-8,.form .col-span-9,.form .col-span-10,.form .col-span-11,.form .col-span-12{grid-column:1/-1}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),1fr)}}@media (min-width: 480px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),1fr)}}h2{margin-top:1.5rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}.speak-icon{display:flex;width:100%;align-items:center;gap:10px}.speak-icon i{font-size:20px;color:var(--primary-500)}.new-line{grid-column-start:1}textarea{resize:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: UicDatePickerComponent, selector: "ui-date-picker", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "disabled", "label", "error", "tip", "max", "min", "justMonth", "monthDay"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: UicSliderComponent, selector: "ui-slider", inputs: ["icon", "iconColor", "label", "error", "tip", "min", "max", "step", "markerCount", "disabled", "loading"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicPoolOptionsComponent, selector: "ui-pool-options", inputs: ["icon", "iconColor", "size", "label", "error", "tip", "disabled", "loading", "multy", "enabledListView", "listViewTitle", "options"] }, { kind: "component", type: UicTimePickerComponent, selector: "ui-time-picker", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "disabled", "label", "error", "tip", "interval"] }, { kind: "component", type: UicRadioComponent, selector: "ui-radio", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled", "loading", "options", "emptyText", "direction"] }, { kind: "component", type: UicSearcherComponent, selector: "ui-searcher", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "minimumSearchLength", "showSelected", "placeholder", "searchFn", "itemDisplayFn", "itemIsEnabledFn", "manualSearch", "stateless"], outputs: ["pickedItem"] }, { kind: "component", type: UicMultySelectComponent, selector: "ui-multy-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "options"] }, { kind: "component", type: UicFileInputComponent, selector: "ui-file-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading", "multy", "fileTypes"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "nonSelectedText", "noneText", "emptyText", "searcherEnabled", "loading", "nullable", "options"] }, { kind: "directive", type: UicTextareaAutoresizeDirective, selector: "[textareaAutoresize]", inputs: ["minRows", "maxRows", "textareaAutoresize"] }, { kind: "directive", type: UicTextareaAutoresizeMinRowsDirective, selector: "[textareaAutoresizeMinRows]", inputs: ["textareaAutoresizeMinRows"] }, { kind: "directive", type: UicTextareaAutoresizeMaxRowsDirective, selector: "[textareaAutoresizeMaxRows]", inputs: ["textareaAutoresizeMaxRows"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "component", type: UicPhoneInputComponent, selector: "ui-phone-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "placeholder", "disabled", "loading", "preferredCountries", "flagPath", "countries"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
3819
3942
|
}
|
|
3820
3943
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, decorators: [{
|
|
3821
3944
|
type: Component,
|
|
@@ -3839,7 +3962,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
3839
3962
|
UicCheckboxComponent,
|
|
3840
3963
|
UicPhoneInputComponent,
|
|
3841
3964
|
FormsModule
|
|
3842
|
-
], template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\n @for (state of visibleFieldStates(); track state.field.name) {\n @let field = state.field;\n @let control = state.control;\n @let currentValue = state.value ?? '';\n @let error = getControlErrorMessages(control, field)[0];\n\n <div class=\"col-span-{{field.colSpan || 1}}\" [class.new-line]=\"field.newLine\">\n @if (['text', 'number'].includes(field.type)) {\n @let inputColor = getInputColor(field, currentValue);\n <ui-input\n [error]=\"error\"\n [label]=\"field.label + (field.required ? ' *' : '')\"\n [icon]=\"field.icon??''\"\n [disabled]=\"!!control?.disabled\"\n [internalIconColor]=\"inputColor\"\n [internalIcon]=\"field.internalIcon || (currentValue !== '' ? getIconByColor(field, inputColor) : '')\"\n [loading]=\"field.loading??false\"\n [tip]=\"field.tip??''\">\n <input #inp\n [id]=\"field.name\"\n [formControlName]=\"field.name\"\n [type]=\"field.type\"\n [step]=\"field.step\"\n [min]=\"field.min\"\n [max]=\"field.max\"\n [minLength]=\"field.minLength||null\"\n [maxlength]=\"field.maxLength||null\"\n [placeholder]=\"field.placeholder??field.label\"/>\n @if (field.maxLength && field.showCounter) {\n <span counter>{{inp.value.length}} /{{field.maxLength}}</span>\n }\n </ui-input>\n }\n @if (field.type === 'textarea') {\n <ui-input\n [error]=\"error\"\n [label]=\"field.label + (field.required ? ' *' : '')\"\n [icon]=\"field.icon??''\"\n [disabled]=\"!!control?.disabled\"\n [internalIconColor]=\"field.internalIconColor??'grey'\"\n [internalIcon]=\"field.internalIcon??''\"\n [loading]=\"field.loading??false\"\n [tip]=\"field.tip??''\">\n <textarea #ta\n [id]=\"field.name\"\n [formControlName]=\"field.name\"\n [minLength]=\"field.minLength||null\"\n [maxlength]=\"field.maxLength||null\"\n [textareaAutoresize]=\"field.textareaResize\"\n [textareaAutoresizeMinRows]=\"field.resizeMinRows??1\"\n [textareaAutoresizeMaxRows]=\"field.resizeMaxRows??5\"\n [rows]=\"field.resizeMinRows??3\"\n [placeholder]=\"field.placeholder??field.label\"\n ></textarea>\n @if (field.voiceToTextEnabled && !control?.disabled) {\n @let listening = isListening(field.name);\n <div class=\"speak-icon\" (click)=\"ta.focus()\">\n <ui-button\n [disabled]=\"listening\"\n style=\"margin-bottom: 2px;\"\n (click)=\"voiceToText(ta, field.name)\"\n [icon]=\"listening?'ri-mic-fill':'ri-mic-line'\"\n [type]=\"listening?'filled':'bordered'\"\n size=\"s\"\n [iconOnly]=\"true\"\n ></ui-button>\n @if (listening) {\n <i class=\"ri-voiceprint-line\"></i>\n }\n </div>\n }\n @if (field.showCounter) {\n <span counter>\n {{ta.value.length}}\n @if (field.maxLength) {\n /{{field.maxLength}}\n }\n </span>\n }\n </ui-input>\n }\n @if (field.type === 'phone') {\n <ui-phone-input\n [error]=\"error\"\n [label]=\"field.label + (field.required ? ' *' : '')\"\n [icon]=\"field.icon??''\"\n [internalIcon]=\"field.internalIcon??''\"\n [internalIconColor]=\"field.internalIconColor??'grey'\"\n [loading]=\"field.loading??false\"\n [tip]=\"field.tip??''\"\n [id]=\"field.name\"\n [formControlName]=\"field.name\"\n [placeholder]=\"field.placeholder||field.label||''\"\n >\n </ui-phone-input>\n }\n @else if (field.type === 'date') {\n <ui-date-picker\n [error]=\"error\"\n [label]=\"field.label + (field.required ? ' *' : '')\"\n [id]=\"field.name\"\n [icon]=\"field.icon??''\"\n [internalIcon]=\"field.internalIcon??''\"\n [internalIconColor]=\"field.internalIconColor??'grey'\"\n [tip]=\"field.tip??''\"\n [justMonth]=\"!!field.monthMode\"\n [min]=\"field.minDate??''\"\n [max]=\"field.maxDate??''\"\n [monthDay]=\"field.monthDay||'first'\"\n [formControlName]=\"field.name\"\n ></ui-date-picker>\n }\n @else if (field.type === 'time') {\n <ui-time-picker\n [error]=\"error\"\n [label]=\"field.label + (field.required ? ' *' : '')\"\n [id]=\"field.name\"\n [icon]=\"field.icon??''\"\n [internalIcon]=\"field.internalIcon??''\"\n [internalIconColor]=\"field.internalIconColor??'grey'\"\n [tip]=\"field.tip??''\"\n [interval]=\"field.timeInterval??5\"\n [formControlName]=\"field.name\"\n ></ui-time-picker>\n }\n @else if (field.type === 'select') {\n <ui-select\n [error]=\"error\"\n [label]=\"field.label + (field.required ? ' *' : '')\"\n [id]=\"field.name\"\n [icon]=\"field.icon??''\"\n [internalIcon]=\"field.internalIcon??''\"\n [internalIconColor]=\"field.internalIconColor??'grey'\"\n [loading]=\"field.loading??false\"\n [tip]=\"field.tip??''\"\n [formControlName]=\"field.name\"\n [options]=\"field.options || []\"\n ></ui-select>\n }\n @else if (field.type === 'multyselect') {\n <ui-multy-select\n [error]=\"error\"\n [label]=\"field.label + (field.required ? ' *' : '')\"\n [id]=\"field.name\"\n [icon]=\"field.icon??''\"\n [loading]=\"field.loading??false\"\n [internalIcon]=\"field.internalIcon??''\"\n [internalIconColor]=\"field.internalIconColor??'grey'\"\n [tip]=\"field.tip??''\"\n [formControlName]=\"field.name\"\n [options]=\"field.options || []\"\n ></ui-multy-select>\n }\n @else if (field.type === 'searcher') {\n <ui-searcher\n [id]=\"field.name\"\n [formControlName]=\"field.name\"\n [label]=\"field.label + (field.required ? ' *' : '')\"\n [icon]=\"field.icon??''\"\n [loading]=\"field.loading??false\"\n [tip]=\"field.tip??''\"\n [searchFn]=\"getSearcherFn(field)\"\n [itemDisplayFn]=\"getSearcherDisplayFn(field)\"\n [itemIsEnabledFn]=\"getSearcherIsEnabledFn(field)\"\n [placeholder]=\"field.placeholder??'common.search_ellipsis'\"\n [error]=\"error\"\n ></ui-searcher>\n }\n @else if (field.type === 'file') {\n <ui-file-input\n [error]=\"error\"\n [label]=\"field.label + (field.required ? ' *' : '')\"\n [id]=\"field.name\"\n [icon]=\"field.icon??''\"\n [loading]=\"field.loading??false\"\n [internalIcon]=\"field.internalIcon??''\"\n [internalIconColor]=\"field.internalIconColor??'grey'\"\n [multy]=\"field.multyEnabled??false\"\n [tip]=\"field.tip??''\"\n [fileTypes]=\"field.fileTypes??null\"\n [formControlName]=\"field.name\"\n ></ui-file-input>\n }\n @else if (['checkbox', 'switch'].includes(field.type)) {\n <ui-checkbox\n [label]=\"(field.label??'') + (field.required ? ' *' : '')\"\n [id]=\"field.name\"\n [formControlName]=\"field.name\"\n [icon]=\"field.icon??''\"\n [placeholder]=\"field.placeholder??''\"\n [tip]=\"field.tip??''\"\n [type]=\"field.type === 'checkbox' ? 'checkbox' : 'switch'\"\n ></ui-checkbox>\n }\n @else if (field.type === 'radio') {\n <ui-radio\n [label]=\"field.label + (field.required ? ' *' : '')\"\n [id]=\"field.name\"\n [formControlName]=\"field.name\"\n [icon]=\"field.icon??''\"\n [tip]=\"field.tip??''\"\n [loading]=\"field.loading??false\"\n [error]=\"error\"\n [options]=\"field.options || []\"\n ></ui-radio>\n }\n @else if (field.type === 'slider') {\n <ui-slider\n [min]=\"field.min??0\"\n [max]=\"field.max??100\"\n [step]=\"field.sliderInterval??1\"\n [markerCount]=\"field.sliderMarks??5\"\n [id]=\"field.name\"\n [formControlName]=\"field.name\"\n [icon]=\"field.icon??''\"\n [tip]=\"field.tip??''\"\n [error]=\"error\"\n [label]=\"field.label + (field.required ? ' *' : '')\"\n ></ui-slider>\n }\n @else if (field.type === 'pool') {\n <ui-pool-options\n [error]=\"error\"\n [label]=\"field.label + (field.required ? ' *' : '')\"\n [id]=\"field.name\"\n [icon]=\"field.icon??''\"\n [loading]=\"field.loading??false\"\n [multy]=\"field.multyEnabled??false\"\n [tip]=\"field.tip??''\"\n [listViewTitle]=\"field.poolTitle??'common.selected'\"\n [enabledListView]=\"field.poolEnabledListView||false\"\n [formControlName]=\"field.name\"\n [options]=\"field.options || []\"\n ></ui-pool-options>\n }\n </div>\n }\n</div>\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:.75rem}@media (max-width: 479px){.form{grid-template-columns:1fr}.form .col-span-1,.form .col-span-2,.form .col-span-3,.form .col-span-4,.form .col-span-5,.form .col-span-6,.form .col-span-7,.form .col-span-8,.form .col-span-9,.form .col-span-10,.form .col-span-11,.form .col-span-12{grid-column:1/-1}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),1fr)}}@media (min-width: 480px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),1fr)}}h2{margin-top:1.5rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}.speak-icon{display:flex;width:100%;align-items:center;gap:10px}.speak-icon i{font-size:20px;color:var(--primary-500)}.new-line{grid-column-start:1}textarea{resize:none}\n"] }]
|
|
3965
|
+
], template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n @for (state of visibleFieldStates(); track state.field.name) {\r\n @let field = state.field;\r\n @let control = state.control;\r\n @let currentValue = state.value ?? '';\r\n @let error = getControlErrorMessages(control, field)[0];\r\n\r\n <div class=\"col-span-{{field.colSpan || 1}}\" [class.new-line]=\"field.newLine\">\r\n @if (['text', 'number'].includes(field.type)) {\r\n @let inputColor = getInputColor(field, currentValue);\r\n <ui-input\r\n [error]=\"error\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [disabled]=\"!!control?.disabled\"\r\n [internalIconColor]=\"inputColor\"\r\n [internalIcon]=\"field.internalIcon || (currentValue !== '' ? getIconByColor(field, inputColor) : '')\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\">\r\n <input #inp\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [type]=\"field.type\"\r\n [step]=\"field.step\"\r\n [min]=\"field.min\"\r\n [max]=\"field.max\"\r\n [minLength]=\"field.minLength||null\"\r\n [maxlength]=\"field.maxLength||null\"\r\n [placeholder]=\"field.placeholder??field.label\"/>\r\n @if (field.maxLength && field.showCounter) {\r\n <span counter>{{inp.value.length}} /{{field.maxLength}}</span>\r\n }\r\n </ui-input>\r\n }\r\n @if (field.type === 'textarea') {\r\n <ui-input\r\n [error]=\"error\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [disabled]=\"!!control?.disabled\"\r\n [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\">\r\n <textarea #ta\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [minLength]=\"field.minLength||null\"\r\n [maxlength]=\"field.maxLength||null\"\r\n [textareaAutoresize]=\"field.textareaResize\"\r\n [textareaAutoresizeMinRows]=\"field.resizeMinRows??1\"\r\n [textareaAutoresizeMaxRows]=\"field.resizeMaxRows??5\"\r\n [rows]=\"field.resizeMinRows??3\"\r\n [placeholder]=\"field.placeholder??field.label\"\r\n ></textarea>\r\n @if (field.voiceToTextEnabled && !control?.disabled) {\r\n @let listening = isListening(field.name);\r\n <div class=\"speak-icon\" (click)=\"ta.focus()\">\r\n <ui-button\r\n [disabled]=\"listening\"\r\n style=\"margin-bottom: 2px;\"\r\n (click)=\"voiceToText(ta, field.name)\"\r\n [icon]=\"listening?'ri-mic-fill':'ri-mic-line'\"\r\n [type]=\"listening?'filled':'bordered'\"\r\n size=\"s\"\r\n [iconOnly]=\"true\"\r\n ></ui-button>\r\n @if (listening) {\r\n <i class=\"ri-voiceprint-line\"></i>\r\n }\r\n </div>\r\n }\r\n @if (field.showCounter) {\r\n <span counter>\r\n {{ta.value.length}}\r\n @if (field.maxLength) {\r\n /{{field.maxLength}}\r\n }\r\n </span>\r\n }\r\n </ui-input>\r\n }\r\n @if (field.type === 'phone') {\r\n <ui-phone-input\r\n [error]=\"error\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [placeholder]=\"field.placeholder||field.label||''\"\r\n >\r\n </ui-phone-input>\r\n }\r\n @else if (field.type === 'date') {\r\n <ui-date-picker\r\n [error]=\"error\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n [tip]=\"field.tip??''\"\r\n [justMonth]=\"!!field.monthMode\"\r\n [min]=\"field.minDate??''\"\r\n [max]=\"field.maxDate??''\"\r\n [monthDay]=\"field.monthDay||'first'\"\r\n [formControlName]=\"field.name\"\r\n ></ui-date-picker>\r\n }\r\n @else if (field.type === 'time') {\r\n <ui-time-picker\r\n [error]=\"error\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n [tip]=\"field.tip??''\"\r\n [interval]=\"field.timeInterval??5\"\r\n [formControlName]=\"field.name\"\r\n ></ui-time-picker>\r\n }\r\n @else if (field.type === 'select') {\r\n <ui-select\r\n [error]=\"error\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n [loading]=\"field.loading??false\"\r\n [nullable]=\"field.selectNullable??false\"\r\n [searcherEnabled]=\"field.selectSearchEnabled??false\"\r\n [tip]=\"field.tip??''\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-select>\r\n }\r\n @else if (field.type === 'multyselect') {\r\n <ui-multy-select\r\n [error]=\"error\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n [tip]=\"field.tip??''\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-multy-select>\r\n }\r\n @else if (field.type === 'searcher') {\r\n <ui-searcher\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\"\r\n [searchFn]=\"getSearcherFn(field)\"\r\n [itemDisplayFn]=\"getSearcherDisplayFn(field)\"\r\n [itemIsEnabledFn]=\"getSearcherIsEnabledFn(field)\"\r\n [placeholder]=\"field.placeholder??'common.search_ellipsis'\"\r\n [error]=\"error\"\r\n ></ui-searcher>\r\n }\r\n @else if (field.type === 'file') {\r\n <ui-file-input\r\n [error]=\"error\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n [multy]=\"field.multyEnabled??false\"\r\n [tip]=\"field.tip??''\"\r\n [fileTypes]=\"field.fileTypes??null\"\r\n [formControlName]=\"field.name\"\r\n ></ui-file-input>\r\n }\r\n @else if (['checkbox', 'switch'].includes(field.type)) {\r\n <ui-checkbox\r\n [label]=\"(field.label??'') + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [placeholder]=\"field.placeholder??''\"\r\n [tip]=\"field.tip??''\"\r\n [type]=\"field.type === 'checkbox' ? 'checkbox' : 'switch'\"\r\n ></ui-checkbox>\r\n }\r\n @else if (field.type === 'radio') {\r\n <ui-radio\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n [loading]=\"field.loading??false\"\r\n [error]=\"error\"\r\n [options]=\"field.options || []\"\r\n ></ui-radio>\r\n }\r\n @else if (field.type === 'slider') {\r\n <ui-slider\r\n [min]=\"field.min??0\"\r\n [max]=\"field.max??100\"\r\n [step]=\"field.sliderInterval??1\"\r\n [markerCount]=\"field.sliderMarks??5\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n [error]=\"error\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n ></ui-slider>\r\n }\r\n @else if (field.type === 'pool') {\r\n <ui-pool-options\r\n [error]=\"error\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [multy]=\"field.multyEnabled??false\"\r\n [tip]=\"field.tip??''\"\r\n [listViewTitle]=\"field.poolTitle??'common.selected'\"\r\n [enabledListView]=\"field.poolEnabledListView||false\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-pool-options>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:.75rem}@media (max-width: 479px){.form{grid-template-columns:1fr}.form .col-span-1,.form .col-span-2,.form .col-span-3,.form .col-span-4,.form .col-span-5,.form .col-span-6,.form .col-span-7,.form .col-span-8,.form .col-span-9,.form .col-span-10,.form .col-span-11,.form .col-span-12{grid-column:1/-1}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),1fr)}}@media (min-width: 480px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),1fr)}}h2{margin-top:1.5rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}.speak-icon{display:flex;width:100%;align-items:center;gap:10px}.speak-icon i{font-size:20px;color:var(--primary-500)}.new-line{grid-column-start:1}textarea{resize:none}\n"] }]
|
|
3843
3966
|
}], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { fields: [{
|
|
3844
3967
|
type: Input
|
|
3845
3968
|
}], form: [{
|
|
@@ -4575,7 +4698,7 @@ class UicDropdownContainerComponent {
|
|
|
4575
4698
|
provide: DROPDOWN_OVERLAY_CONTROLS,
|
|
4576
4699
|
useExisting: forwardRef(() => UicDropdownContainerComponent),
|
|
4577
4700
|
},
|
|
4578
|
-
], queries: [{ propertyName: "projectedTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, static: true }], ngImport: i0, template: "\n<div #triggerButton class=\"triggerButton\" (click)=\"onTriggerClick($event)\">\n <ng-content select=\"[button]\"></ng-content>\n</div>\n\n<ng-template #contentTemplate >\n <div class=\"ui-dropdown-panel\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n</ng-template>", styles: [":host{display:inline-block}.triggerButton{width:fit-content;height:fit-content}.ui-dropdown-panel{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;max-height:50vh;font-size:.875rem;z-index:500;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
4701
|
+
], queries: [{ propertyName: "projectedTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, static: true }], ngImport: i0, template: "\r\n<div #triggerButton class=\"triggerButton\" (click)=\"onTriggerClick($event)\">\r\n <ng-content select=\"[button]\"></ng-content>\r\n</div>\r\n\r\n<ng-template #contentTemplate >\r\n <div class=\"ui-dropdown-panel\">\r\n <ng-content select=\"[content]\"></ng-content>\r\n </div>\r\n</ng-template>", styles: [":host{display:inline-block}.triggerButton{width:fit-content;height:fit-content}.ui-dropdown-panel{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;max-height:50vh;font-size:.875rem;z-index:500;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
4579
4702
|
}
|
|
4580
4703
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDropdownContainerComponent, decorators: [{
|
|
4581
4704
|
type: Component,
|
|
@@ -4584,7 +4707,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
4584
4707
|
provide: DROPDOWN_OVERLAY_CONTROLS,
|
|
4585
4708
|
useExisting: forwardRef(() => UicDropdownContainerComponent),
|
|
4586
4709
|
},
|
|
4587
|
-
], template: "\n<div #triggerButton class=\"triggerButton\" (click)=\"onTriggerClick($event)\">\n <ng-content select=\"[button]\"></ng-content>\n</div>\n\n<ng-template #contentTemplate >\n <div class=\"ui-dropdown-panel\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n</ng-template>", styles: [":host{display:inline-block}.triggerButton{width:fit-content;height:fit-content}.ui-dropdown-panel{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;max-height:50vh;font-size:.875rem;z-index:500;overflow:auto}\n"] }]
|
|
4710
|
+
], template: "\r\n<div #triggerButton class=\"triggerButton\" (click)=\"onTriggerClick($event)\">\r\n <ng-content select=\"[button]\"></ng-content>\r\n</div>\r\n\r\n<ng-template #contentTemplate >\r\n <div class=\"ui-dropdown-panel\">\r\n <ng-content select=\"[content]\"></ng-content>\r\n </div>\r\n</ng-template>", styles: [":host{display:inline-block}.triggerButton{width:fit-content;height:fit-content}.ui-dropdown-panel{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;max-height:50vh;font-size:.875rem;z-index:500;overflow:auto}\n"] }]
|
|
4588
4711
|
}], propDecorators: { buttonLabel: [{
|
|
4589
4712
|
type: Input
|
|
4590
4713
|
}], disabled: [{
|
|
@@ -4982,11 +5105,11 @@ class UicActionButtonComponent {
|
|
|
4982
5105
|
}
|
|
4983
5106
|
}
|
|
4984
5107
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4985
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicActionButtonComponent, isStandalone: true, selector: "ui-action-button", inputs: { icon: "icon", options: "options", multiselect: "multiselect", size: "size" }, outputs: { optionSelected: "optionSelected", optionsApplied: "optionsApplied" }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }], ngImport: i0, template: "<!-- Bot\u00F3n -->\r\n<ui-button class=\"action-btn\" [size]=\"size\" [icon]=\"icon\" color=\"black\" [iconOnly]=\"true\" type=\"ghost\" (click)=\"openMenu()\">\r\n</ui-button>\r\n\r\n<!-- Men\u00FA -->\r\n<ng-template #menuTemplate>\r\n <div class=\"action-menu\">\r\n @if (multiselect) {\r\n <div class=\"action-menu-header\">\r\n <ui-checkbox [noPadding]=\"true\" \r\n [ngModel]=\"allSelected\" \r\n (ngModelChange)=\"toggleAll($event)\" [placeholder]=\"'common.all' | uicTranslate\"></ui-checkbox>\r\n </div>\r\n }\r\n <div class=\"action-menu-body\">\r\n @for (opt of options; track $index) {\r\n <div class=\"action-menu-item\" (click)=\"multiselect ? toggleOption(opt) : selectOption(opt)\">\r\n @if (multiselect) {\r\n <div>\r\n <ui-checkbox [noPadding]=\"true\" [ngModel]=\"selectedSet.has(opt.id)\"></ui-checkbox>\r\n </div>\r\n }\r\n @if (icon) {\r\n <i [class]=\"opt.icon\"></i>\r\n }\r\n <span>{{ opt.label | uicTranslate }}</span>\n </div>\n }\n </div>\n\r\n <!-- Footer con bot\u00F3n aplicar -->\r\n @if (multiselect) {\r\n <div class=\"action-menu-footer\">\r\n <ui-button type=\"bordered\" color=\"black\" size=\"t\" (click)=\"closeMenu()\">{{'common.close' | uicTranslate}}</ui-button>\r\n <ui-button color=\"black\" size=\"t\" (click)=\"applySelection()\">{{'common.apply' | uicTranslate}}</ui-button>\r\n </div>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: [".action-menu{display:flex;flex-direction:column;max-height:300px;min-width:150px;background:#fff;border:1px solid var(--border-color, #ddd);border-radius:10px;box-shadow:0 2px 6px #00000026}.action-menu-item{padding:2px 8px;cursor:pointer;display:flex;font-size:13px;line-height:24px;font-weight:400;color:var(--grey-700);align-items:center;gap:10px}.action-menu-header{padding:2px 4px;cursor:pointer;display:flex;align-items:center;font-size:14px;gap:10px;border-bottom:solid 1px var(--grey-300)}.action-menu-item:hover{background:var(--grey-100)}.action-menu-body{overflow-y:auto}.action-menu-footer{border-top:solid 1px var(--grey-300);display:flex;justify-content:space-around;padding:4px;gap:8px}\n"], dependencies: [{ kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
5108
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicActionButtonComponent, isStandalone: true, selector: "ui-action-button", inputs: { icon: "icon", options: "options", multiselect: "multiselect", size: "size" }, outputs: { optionSelected: "optionSelected", optionsApplied: "optionsApplied" }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }], ngImport: i0, template: "<!-- Bot\u00F3n -->\r\n<ui-button class=\"action-btn\" [size]=\"size\" [icon]=\"icon\" color=\"black\" [iconOnly]=\"true\" type=\"ghost\" (click)=\"openMenu()\">\r\n</ui-button>\r\n\r\n<!-- Men\u00FA -->\r\n<ng-template #menuTemplate>\r\n <div class=\"action-menu\">\r\n @if (multiselect) {\r\n <div class=\"action-menu-header\">\r\n <ui-checkbox [noPadding]=\"true\" \r\n [ngModel]=\"allSelected\" \r\n (ngModelChange)=\"toggleAll($event)\" [placeholder]=\"'common.all' | uicTranslate\"></ui-checkbox>\r\n </div>\r\n }\r\n <div class=\"action-menu-body\">\r\n @for (opt of options; track $index) {\r\n <div class=\"action-menu-item\" (click)=\"multiselect ? toggleOption(opt) : selectOption(opt)\">\r\n @if (multiselect) {\r\n <div>\r\n <ui-checkbox [noPadding]=\"true\" [ngModel]=\"selectedSet.has(opt.id)\"></ui-checkbox>\r\n </div>\r\n }\r\n @if (icon) {\r\n <i [class]=\"opt.icon\"></i>\r\n }\r\n <span>{{ opt.label | uicTranslate }}</span>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Footer con bot\u00F3n aplicar -->\r\n @if (multiselect) {\r\n <div class=\"action-menu-footer\">\r\n <ui-button type=\"bordered\" color=\"black\" size=\"t\" (click)=\"closeMenu()\">{{'common.close' | uicTranslate}}</ui-button>\r\n <ui-button color=\"black\" size=\"t\" (click)=\"applySelection()\">{{'common.apply' | uicTranslate}}</ui-button>\r\n </div>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: [".action-menu{display:flex;flex-direction:column;max-height:300px;min-width:150px;background:#fff;border:1px solid var(--border-color, #ddd);border-radius:10px;box-shadow:0 2px 6px #00000026}.action-menu-item{padding:2px 8px;cursor:pointer;display:flex;font-size:13px;line-height:24px;font-weight:400;color:var(--grey-700);align-items:center;gap:10px}.action-menu-header{padding:2px 4px;cursor:pointer;display:flex;align-items:center;font-size:14px;gap:10px;border-bottom:solid 1px var(--grey-300)}.action-menu-item:hover{background:var(--grey-100)}.action-menu-body{overflow-y:auto}.action-menu-footer{border-top:solid 1px var(--grey-300);display:flex;justify-content:space-around;padding:4px;gap:8px}\n"], dependencies: [{ kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
4986
5109
|
}
|
|
4987
5110
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicActionButtonComponent, decorators: [{
|
|
4988
5111
|
type: Component,
|
|
4989
|
-
args: [{ selector: 'ui-action-button', imports: [UicCheckboxComponent, UicButtonComponent, FormsModule, UicTranslatePipe], template: "<!-- Bot\u00F3n -->\r\n<ui-button class=\"action-btn\" [size]=\"size\" [icon]=\"icon\" color=\"black\" [iconOnly]=\"true\" type=\"ghost\" (click)=\"openMenu()\">\r\n</ui-button>\r\n\r\n<!-- Men\u00FA -->\r\n<ng-template #menuTemplate>\r\n <div class=\"action-menu\">\r\n @if (multiselect) {\r\n <div class=\"action-menu-header\">\r\n <ui-checkbox [noPadding]=\"true\" \r\n [ngModel]=\"allSelected\" \r\n (ngModelChange)=\"toggleAll($event)\" [placeholder]=\"'common.all' | uicTranslate\"></ui-checkbox>\r\n </div>\r\n }\r\n <div class=\"action-menu-body\">\r\n @for (opt of options; track $index) {\r\n <div class=\"action-menu-item\" (click)=\"multiselect ? toggleOption(opt) : selectOption(opt)\">\r\n @if (multiselect) {\r\n <div>\r\n <ui-checkbox [noPadding]=\"true\" [ngModel]=\"selectedSet.has(opt.id)\"></ui-checkbox>\r\n </div>\r\n }\r\n @if (icon) {\r\n <i [class]=\"opt.icon\"></i>\r\n }\r\n <span>{{ opt.label | uicTranslate }}</span>\n </div>\n }\n </div>\n\r\n <!-- Footer con bot\u00F3n aplicar -->\r\n @if (multiselect) {\r\n <div class=\"action-menu-footer\">\r\n <ui-button type=\"bordered\" color=\"black\" size=\"t\" (click)=\"closeMenu()\">{{'common.close' | uicTranslate}}</ui-button>\r\n <ui-button color=\"black\" size=\"t\" (click)=\"applySelection()\">{{'common.apply' | uicTranslate}}</ui-button>\r\n </div>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: [".action-menu{display:flex;flex-direction:column;max-height:300px;min-width:150px;background:#fff;border:1px solid var(--border-color, #ddd);border-radius:10px;box-shadow:0 2px 6px #00000026}.action-menu-item{padding:2px 8px;cursor:pointer;display:flex;font-size:13px;line-height:24px;font-weight:400;color:var(--grey-700);align-items:center;gap:10px}.action-menu-header{padding:2px 4px;cursor:pointer;display:flex;align-items:center;font-size:14px;gap:10px;border-bottom:solid 1px var(--grey-300)}.action-menu-item:hover{background:var(--grey-100)}.action-menu-body{overflow-y:auto}.action-menu-footer{border-top:solid 1px var(--grey-300);display:flex;justify-content:space-around;padding:4px;gap:8px}\n"] }]
|
|
5112
|
+
args: [{ selector: 'ui-action-button', imports: [UicCheckboxComponent, UicButtonComponent, FormsModule, UicTranslatePipe], template: "<!-- Bot\u00F3n -->\r\n<ui-button class=\"action-btn\" [size]=\"size\" [icon]=\"icon\" color=\"black\" [iconOnly]=\"true\" type=\"ghost\" (click)=\"openMenu()\">\r\n</ui-button>\r\n\r\n<!-- Men\u00FA -->\r\n<ng-template #menuTemplate>\r\n <div class=\"action-menu\">\r\n @if (multiselect) {\r\n <div class=\"action-menu-header\">\r\n <ui-checkbox [noPadding]=\"true\" \r\n [ngModel]=\"allSelected\" \r\n (ngModelChange)=\"toggleAll($event)\" [placeholder]=\"'common.all' | uicTranslate\"></ui-checkbox>\r\n </div>\r\n }\r\n <div class=\"action-menu-body\">\r\n @for (opt of options; track $index) {\r\n <div class=\"action-menu-item\" (click)=\"multiselect ? toggleOption(opt) : selectOption(opt)\">\r\n @if (multiselect) {\r\n <div>\r\n <ui-checkbox [noPadding]=\"true\" [ngModel]=\"selectedSet.has(opt.id)\"></ui-checkbox>\r\n </div>\r\n }\r\n @if (icon) {\r\n <i [class]=\"opt.icon\"></i>\r\n }\r\n <span>{{ opt.label | uicTranslate }}</span>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Footer con bot\u00F3n aplicar -->\r\n @if (multiselect) {\r\n <div class=\"action-menu-footer\">\r\n <ui-button type=\"bordered\" color=\"black\" size=\"t\" (click)=\"closeMenu()\">{{'common.close' | uicTranslate}}</ui-button>\r\n <ui-button color=\"black\" size=\"t\" (click)=\"applySelection()\">{{'common.apply' | uicTranslate}}</ui-button>\r\n </div>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: [".action-menu{display:flex;flex-direction:column;max-height:300px;min-width:150px;background:#fff;border:1px solid var(--border-color, #ddd);border-radius:10px;box-shadow:0 2px 6px #00000026}.action-menu-item{padding:2px 8px;cursor:pointer;display:flex;font-size:13px;line-height:24px;font-weight:400;color:var(--grey-700);align-items:center;gap:10px}.action-menu-header{padding:2px 4px;cursor:pointer;display:flex;align-items:center;font-size:14px;gap:10px;border-bottom:solid 1px var(--grey-300)}.action-menu-item:hover{background:var(--grey-100)}.action-menu-body{overflow-y:auto}.action-menu-footer{border-top:solid 1px var(--grey-300);display:flex;justify-content:space-around;padding:4px;gap:8px}\n"] }]
|
|
4990
5113
|
}], propDecorators: { icon: [{
|
|
4991
5114
|
type: Input
|
|
4992
5115
|
}], options: [{
|
|
@@ -5113,7 +5236,7 @@ class TinyAlertComponent {
|
|
|
5113
5236
|
this.modalRef.closeFloating(value ? this.response : null);
|
|
5114
5237
|
}
|
|
5115
5238
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TinyAlertComponent, deps: [{ token: MODAL_DATA }, { token: UiModalRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
5116
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TinyAlertComponent, isStandalone: true, selector: "ui-tiny-alert", ngImport: i0, template: "<div class=\"alert-wrapper\">\r\n @if (data.iconPath) {\r\n <img [src]=\"data.iconPath\" alt=\"\"> \r\n }@else{\r\n <i [class]=\"'alert-main-icon icon-'+data.type + ' ' + data.iconChar\" ></i>\r\n }\r\n <div class=\"h3-alert\" [class]=\"'icon-'+data.type\"> {{data.title | uicTranslate}} </div>\r\n \r\n <div class=\"alert-body\" [innerHTML]=\"data.body | uicTranslate\"> </div>\n \r\n @if ( data.showInput ){\r\n <ui-input>\r\n <input type=\"text\">\r\n </ui-input>\r\n }\r\n\r\n <div class=\"tinyalert-buttons\">\r\n @if (data.showCancelButton) {\r\n <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'black'\" size=\"l\"> {{(data.cancelButtonText??'common.cancel') | uicTranslate}} </ui-button>\r\n }\r\n <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{(data.okButtonText??'common.continue') | uicTranslate}} </ui-button>\r\n </div>\r\n \r\n <button class=\"floating-close\" (click)=\"close(false)\" >\r\n <i class=\"ri-close-line\"></i>\r\n </button>\r\n</div>\r\n", styles: [".alert-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 20px 5px;width:400px;max-width:100%;-webkit-user-select:none;user-select:none}.alert-wrapper img{height:88px;margin-bottom:20px}.tinyalert-buttons{padding-top:20px;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.h3-alert{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:500;line-height:24px;text-align:center;color:var(--grey-700)}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:var(--red-500)}@media (max-width: 479px){.floating-close{top:0;right:-5px}}.alert-main-icon{font-size:80px;line-height:80px;margin-bottom:10px}.icon-error{color:var(--red-500)}.icon-delete{color:var(--red-800)}.icon-warning{color:var(--yellow-500)}.icon-info{color:var(--blue-800)}.icon-success{color:var(--green-500)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
5239
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TinyAlertComponent, isStandalone: true, selector: "ui-tiny-alert", ngImport: i0, template: "<div class=\"alert-wrapper\">\r\n @if (data.iconPath) {\r\n <img [src]=\"data.iconPath\" alt=\"\"> \r\n }@else{\r\n <i [class]=\"'alert-main-icon icon-'+data.type + ' ' + data.iconChar\" ></i>\r\n }\r\n <div class=\"h3-alert\" [class]=\"'icon-'+data.type\"> {{data.title | uicTranslate}} </div>\r\n \r\n <div class=\"alert-body\" [innerHTML]=\"data.body | uicTranslate\"> </div>\r\n \r\n @if ( data.showInput ){\r\n <ui-input>\r\n <input type=\"text\">\r\n </ui-input>\r\n }\r\n\r\n <div class=\"tinyalert-buttons\">\r\n @if (data.showCancelButton) {\r\n <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'black'\" size=\"l\"> {{(data.cancelButtonText??'common.cancel') | uicTranslate}} </ui-button>\r\n }\r\n <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{(data.okButtonText??'common.continue') | uicTranslate}} </ui-button>\r\n </div>\r\n \r\n <button class=\"floating-close\" (click)=\"close(false)\" >\r\n <i class=\"ri-close-line\"></i>\r\n </button>\r\n</div>\r\n", styles: [".alert-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 20px 5px;width:400px;max-width:100%;-webkit-user-select:none;user-select:none}.alert-wrapper img{height:88px;margin-bottom:20px}.tinyalert-buttons{padding-top:20px;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.h3-alert{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:500;line-height:24px;text-align:center;color:var(--grey-700)}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:var(--red-500)}@media (max-width: 479px){.floating-close{top:0;right:-5px}}.alert-main-icon{font-size:80px;line-height:80px;margin-bottom:10px}.icon-error{color:var(--red-500)}.icon-delete{color:var(--red-800)}.icon-warning{color:var(--yellow-500)}.icon-info{color:var(--blue-800)}.icon-success{color:var(--green-500)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
5117
5240
|
}
|
|
5118
5241
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TinyAlertComponent, decorators: [{
|
|
5119
5242
|
type: Component,
|
|
@@ -5121,7 +5244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
5121
5244
|
UicButtonComponent,
|
|
5122
5245
|
UicInputComponent,
|
|
5123
5246
|
UicTranslatePipe
|
|
5124
|
-
], template: "<div class=\"alert-wrapper\">\r\n @if (data.iconPath) {\r\n <img [src]=\"data.iconPath\" alt=\"\"> \r\n }@else{\r\n <i [class]=\"'alert-main-icon icon-'+data.type + ' ' + data.iconChar\" ></i>\r\n }\r\n <div class=\"h3-alert\" [class]=\"'icon-'+data.type\"> {{data.title | uicTranslate}} </div>\r\n \r\n <div class=\"alert-body\" [innerHTML]=\"data.body | uicTranslate\"> </div>\n \r\n @if ( data.showInput ){\r\n <ui-input>\r\n <input type=\"text\">\r\n </ui-input>\r\n }\r\n\r\n <div class=\"tinyalert-buttons\">\r\n @if (data.showCancelButton) {\r\n <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'black'\" size=\"l\"> {{(data.cancelButtonText??'common.cancel') | uicTranslate}} </ui-button>\r\n }\r\n <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{(data.okButtonText??'common.continue') | uicTranslate}} </ui-button>\r\n </div>\r\n \r\n <button class=\"floating-close\" (click)=\"close(false)\" >\r\n <i class=\"ri-close-line\"></i>\r\n </button>\r\n</div>\r\n", styles: [".alert-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 20px 5px;width:400px;max-width:100%;-webkit-user-select:none;user-select:none}.alert-wrapper img{height:88px;margin-bottom:20px}.tinyalert-buttons{padding-top:20px;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.h3-alert{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:500;line-height:24px;text-align:center;color:var(--grey-700)}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:var(--red-500)}@media (max-width: 479px){.floating-close{top:0;right:-5px}}.alert-main-icon{font-size:80px;line-height:80px;margin-bottom:10px}.icon-error{color:var(--red-500)}.icon-delete{color:var(--red-800)}.icon-warning{color:var(--yellow-500)}.icon-info{color:var(--blue-800)}.icon-success{color:var(--green-500)}\n"] }]
|
|
5247
|
+
], template: "<div class=\"alert-wrapper\">\r\n @if (data.iconPath) {\r\n <img [src]=\"data.iconPath\" alt=\"\"> \r\n }@else{\r\n <i [class]=\"'alert-main-icon icon-'+data.type + ' ' + data.iconChar\" ></i>\r\n }\r\n <div class=\"h3-alert\" [class]=\"'icon-'+data.type\"> {{data.title | uicTranslate}} </div>\r\n \r\n <div class=\"alert-body\" [innerHTML]=\"data.body | uicTranslate\"> </div>\r\n \r\n @if ( data.showInput ){\r\n <ui-input>\r\n <input type=\"text\">\r\n </ui-input>\r\n }\r\n\r\n <div class=\"tinyalert-buttons\">\r\n @if (data.showCancelButton) {\r\n <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'black'\" size=\"l\"> {{(data.cancelButtonText??'common.cancel') | uicTranslate}} </ui-button>\r\n }\r\n <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{(data.okButtonText??'common.continue') | uicTranslate}} </ui-button>\r\n </div>\r\n \r\n <button class=\"floating-close\" (click)=\"close(false)\" >\r\n <i class=\"ri-close-line\"></i>\r\n </button>\r\n</div>\r\n", styles: [".alert-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 20px 5px;width:400px;max-width:100%;-webkit-user-select:none;user-select:none}.alert-wrapper img{height:88px;margin-bottom:20px}.tinyalert-buttons{padding-top:20px;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.h3-alert{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:500;line-height:24px;text-align:center;color:var(--grey-700)}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:var(--red-500)}@media (max-width: 479px){.floating-close{top:0;right:-5px}}.alert-main-icon{font-size:80px;line-height:80px;margin-bottom:10px}.icon-error{color:var(--red-500)}.icon-delete{color:var(--red-800)}.icon-warning{color:var(--yellow-500)}.icon-info{color:var(--blue-800)}.icon-success{color:var(--green-500)}\n"] }]
|
|
5125
5248
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
5126
5249
|
type: Inject,
|
|
5127
5250
|
args: [MODAL_DATA]
|
|
@@ -5171,11 +5294,11 @@ class UicModalComponent {
|
|
|
5171
5294
|
this.modalRef.closeFloating(null);
|
|
5172
5295
|
}
|
|
5173
5296
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalComponent, deps: [{ token: UiModalRef }, { token: MODAL_COMPONENT }, { token: MODAL_CONFIG }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
5174
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicModalComponent, isStandalone: true, selector: "ui-modal", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div class=\"uic_backdrop\" (click)=\"closeOuside()\"> \n <div @pushTop class=\"uic_modal\" \n [class]=\"myConfig.size ? 'uic_' + myConfig.size : ''\"\n (click)=\"$event.stopPropagation()\">\n \n @if ( myConfig.title) {\n <div class=\"uic_modal-header\">\n {{myConfig.title}}\n <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\n </div>\n }\n <div class=\"uic_modal-body\" [class.uic_body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\n <ng-template cdkPortalOutlet></ng-template>\n </div>\n\n </div>\n</div>\n", styles: [".uic_backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width: 479px){.uic_backdrop{align-items:flex-start;padding-top:20px}}.uic_modal{background:var(--white);border-radius:20px;min-width:300px;max-width:90%;height:fit-content;max-height:90vh;box-shadow:0 20px 70px #00000052;overflow:hidden;display:flex;flex-direction:column}.uic_modal-header{padding:0 15px;width:100%;display:flex;align-items:center;font-size:22px;font-weight:600;justify-content:space-between;margin:0 auto;color:var(--primary-500);height:63px;border-bottom:solid 1px var(--primary-500)}@media (max-width: 479px){.uic_modal-header{padding:5px}}.uic_modal-body{flex:1 1;overflow-y:auto}.uic_body-padding{padding:25px}@media (max-width: 479px){.uic_body-padding{padding:10px}}.uic_medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 479px){.uic_medium{width:90%}}.uic_large{width:80%;max-width:900px}@media (max-width: 479px){.uic_large{width:95%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }], animations: [pushTop] });
|
|
5297
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicModalComponent, isStandalone: true, selector: "ui-modal", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div class=\"uic_backdrop\" (click)=\"closeOuside()\"> \r\n <div @pushTop class=\"uic_modal\" \r\n [class]=\"myConfig.size ? 'uic_' + myConfig.size : ''\"\r\n (click)=\"$event.stopPropagation()\">\r\n \r\n @if ( myConfig.title) {\r\n <div class=\"uic_modal-header\">\r\n {{myConfig.title}}\r\n <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\r\n </div>\r\n }\r\n <div class=\"uic_modal-body\" [class.uic_body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\r\n <ng-template cdkPortalOutlet></ng-template>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n", styles: [".uic_backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width: 479px){.uic_backdrop{align-items:flex-start;padding-top:20px}}.uic_modal{background:var(--white);border-radius:20px;min-width:300px;max-width:90%;height:fit-content;max-height:90vh;box-shadow:0 20px 70px #00000052;overflow:hidden;display:flex;flex-direction:column}.uic_modal-header{padding:0 15px;width:100%;display:flex;align-items:center;font-size:22px;font-weight:600;justify-content:space-between;margin:0 auto;color:var(--primary-500);height:63px;border-bottom:solid 1px var(--primary-500)}@media (max-width: 479px){.uic_modal-header{padding:5px}}.uic_modal-body{flex:1 1;overflow-y:auto}.uic_body-padding{padding:25px}@media (max-width: 479px){.uic_body-padding{padding:10px}}.uic_medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 479px){.uic_medium{width:90%}}.uic_large{width:80%;max-width:900px}@media (max-width: 479px){.uic_large{width:95%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }], animations: [pushTop] });
|
|
5175
5298
|
}
|
|
5176
5299
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalComponent, decorators: [{
|
|
5177
5300
|
type: Component,
|
|
5178
|
-
args: [{ selector: 'ui-modal', imports: [CommonModule, PortalModule, UicButtonComponent], animations: [pushTop], template: "<div class=\"uic_backdrop\" (click)=\"closeOuside()\"> \n <div @pushTop class=\"uic_modal\" \n [class]=\"myConfig.size ? 'uic_' + myConfig.size : ''\"\n (click)=\"$event.stopPropagation()\">\n \n @if ( myConfig.title) {\n <div class=\"uic_modal-header\">\n {{myConfig.title}}\n <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\n </div>\n }\n <div class=\"uic_modal-body\" [class.uic_body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\n <ng-template cdkPortalOutlet></ng-template>\n </div>\n\n </div>\n</div>\n", styles: [".uic_backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width: 479px){.uic_backdrop{align-items:flex-start;padding-top:20px}}.uic_modal{background:var(--white);border-radius:20px;min-width:300px;max-width:90%;height:fit-content;max-height:90vh;box-shadow:0 20px 70px #00000052;overflow:hidden;display:flex;flex-direction:column}.uic_modal-header{padding:0 15px;width:100%;display:flex;align-items:center;font-size:22px;font-weight:600;justify-content:space-between;margin:0 auto;color:var(--primary-500);height:63px;border-bottom:solid 1px var(--primary-500)}@media (max-width: 479px){.uic_modal-header{padding:5px}}.uic_modal-body{flex:1 1;overflow-y:auto}.uic_body-padding{padding:25px}@media (max-width: 479px){.uic_body-padding{padding:10px}}.uic_medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 479px){.uic_medium{width:90%}}.uic_large{width:80%;max-width:900px}@media (max-width: 479px){.uic_large{width:95%}}\n"] }]
|
|
5301
|
+
args: [{ selector: 'ui-modal', imports: [CommonModule, PortalModule, UicButtonComponent], animations: [pushTop], template: "<div class=\"uic_backdrop\" (click)=\"closeOuside()\"> \r\n <div @pushTop class=\"uic_modal\" \r\n [class]=\"myConfig.size ? 'uic_' + myConfig.size : ''\"\r\n (click)=\"$event.stopPropagation()\">\r\n \r\n @if ( myConfig.title) {\r\n <div class=\"uic_modal-header\">\r\n {{myConfig.title}}\r\n <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\r\n </div>\r\n }\r\n <div class=\"uic_modal-body\" [class.uic_body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\r\n <ng-template cdkPortalOutlet></ng-template>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n", styles: [".uic_backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width: 479px){.uic_backdrop{align-items:flex-start;padding-top:20px}}.uic_modal{background:var(--white);border-radius:20px;min-width:300px;max-width:90%;height:fit-content;max-height:90vh;box-shadow:0 20px 70px #00000052;overflow:hidden;display:flex;flex-direction:column}.uic_modal-header{padding:0 15px;width:100%;display:flex;align-items:center;font-size:22px;font-weight:600;justify-content:space-between;margin:0 auto;color:var(--primary-500);height:63px;border-bottom:solid 1px var(--primary-500)}@media (max-width: 479px){.uic_modal-header{padding:5px}}.uic_modal-body{flex:1 1;overflow-y:auto}.uic_body-padding{padding:25px}@media (max-width: 479px){.uic_body-padding{padding:10px}}.uic_medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 479px){.uic_medium{width:90%}}.uic_large{width:80%;max-width:900px}@media (max-width: 479px){.uic_large{width:95%}}\n"] }]
|
|
5179
5302
|
}], ctorParameters: () => [{ type: UiModalRef, decorators: [{
|
|
5180
5303
|
type: Inject,
|
|
5181
5304
|
args: [UiModalRef]
|
|
@@ -5894,7 +6017,7 @@ class UicTableComponent {
|
|
|
5894
6017
|
return `${a ?? ''}` === `${b ?? ''}`;
|
|
5895
6018
|
}
|
|
5896
6019
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5897
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableComponent, isStandalone: true, selector: "ui-table", inputs: { columns: "columns", data: "data", loading: "loading", disabled: "disabled", editable: "editable", rowClickable: "rowClickable", rowExpandible: "rowExpandible", pages: "pages", size: "size", squeletonRows: "squeletonRows", buttonSize: "buttonSize", highlightedId: "highlightedId", headerText: "headerText", headerSubtitle: "headerSubtitle", totalItems: "totalItems", alignment: "alignment", searchEnabled: "searchEnabled", searchLabel: "searchLabel", searchPlaceholder: "searchPlaceholder", headerClass: "headerClass", headerBackgroundColor: "headerBackgroundColor", striped: "striped", showPagination: "showPagination", searchOnKeydown: "searchOnKeydown", showEmptyMessage: "showEmptyMessage", showSearchButton: "showSearchButton", showTextPagination: "showTextPagination", emptyMessage: "emptyMessage", switchValidation: "switchValidation", nextButtonText: "nextButtonText", previousButtonText: "previousButtonText", mobilePortletCols: "mobilePortletCols", searcherShowButtonText: "searcherShowButtonText" }, outputs: { action: "action", update: "update", checkedChange: "checkedChange", switchChange: "switchChange", clickedRow: "clickedRow", cellChange: "cellChange" }, queries: [{ propertyName: "actionsRef", first: true, predicate: ["[actions]"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if ( hasActions || searchEnabled){\r\n <div class=\"ui-table-filters\">\r\n @if (searchEnabled) {\r\n <uic-table-searcher \r\n [showSearchButton]=\"showSearchButton\" \r\n [showButtonText]=\"searcherShowButtonText\" \r\n [searchOnKeydown]=\"searchOnKeydown\"\r\n (filter)=\"search($event)\" \r\n [placeholder]=\"searchPlaceholder\" >\r\n </uic-table-searcher>\r\n }\r\n <div class=\"ui-filter-actions\">\r\n <ng-content select=\"[actions]\"></ng-content>\r\n </div>\r\n </div>\r\n}\r\n<ng-content select=\"[filters]\"></ng-content>\r\n<div class=\"ui-table-wrapper\">\r\n @if (headerText) {\r\n <div class=\"ui-table-topbar\"> \r\n <div>\r\n {{headerText}} <span class=\"hightlited-note\"> ({{totalItems}}) </span> \r\n </div>\r\n <p> {{headerSubtitle}} </p>\r\n </div>\r\n }\r\n <div class=\"ui-table-container\"> \r\n <table class=\"ui-table\" [class.ui-striped]=\"striped\">\r\n <thead>\r\n <tr [class]=\" headerClass || 'header-'+headerBackgroundColor\">\r\n @for (header of columns; track $index) {\r\n <th [class.noshow-small]=\"header.hideOn == 'small'\"\r\n [class.noshow-medium]=\"header.hideOn == 'medium'\">\r\n <div [class]=\"'ui-th-wrap ui-alignment-'+alignment\" >\r\n @if (header.type=='checkbox') {\r\n <div>\r\n <ui-checkbox style=\"margin-right: 5px;\" [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n </div>\r\n }\r\n {{header.label.toUpperCase() }} \r\n @if (header.sortEnable) {\r\n <div class=\"ui-sort-arrow\" (click)=\"sortClick(header.key)\" [ngClass]=\"{'ui-sort-active':header.key == sortKey}\">\r\n <i [class]=\"(sortAsc||header.key != sortKey)?'ri-arrow-down-line':'ri-arrow-up-line'\"></i> \r\n </div>\r\n }\r\n </div>\r\n </th> \r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n\r\n @if (loading) {\r\n @for (item of [].constructor(squeletonRows); track $index) {\r\n <tr>\r\n @for (header of columns; track $index) {\r\n <td> <div class=\"ui-row-loader\"></div> </td>\r\n }\r\n </tr> \r\n }\r\n } @else {\r\n @for (row of data; track row.id) {\r\n <tr [@highlightRow]=\"highlightedId === row.id ? 'highlighted' : null\" \r\n [class.ui-tr-highlighted]=\"row.highlighted\"\r\n [class.clickable-row]=\"rowClickable\"\r\n (click)=\"clickRow(row.id)\"\r\n >\r\n @for (header of columns; track $index) {\r\n <!-- TIPOS DE HEADERS -->\r\n <td [class]=\"getFontColor(row.data,header.key)\"\r\n [class.noshow-small]=\"header.hideOn == 'small'\"\r\n [class.noshow-medium]=\"header.hideOn == 'medium'\">\r\n\r\n <div [class]=\"'ui-cell-content ui-alignment-'+alignment\" \r\n [style.justify-content]=\"header.align||null\"\r\n [style.width.px]=\"header.width || null\">\r\n @if (header.type == 'actions') { \r\n <div class=\"ui-centered-cell-content\">\r\n @for (btn of header.actions; track $index) {\r\n @if (isValidRule(row.data,btn.rule)) {\r\n <ui-button \r\n [disabled]=\"loading\"\r\n [tip]=\"btn.tooltip??''\"\r\n size=\"s\"\r\n [disabled]=\"disabled\"\r\n [text]=\"btn.text??''\"\r\n [type]=\"btn.type??'filled'\"\r\n [iconOnly]=\"!btn.text\"\r\n [icon]=\"btn.icon??''\"\r\n [color]=\"btn.color??'black'\"\r\n (click)=\"doAction(row.id,btn.key,$event)\">\r\n </ui-button> \r\n }\r\n } \r\n @if ( header.moreActions && header.moreActions.length>0 ) {\r\n @for (ma of header.moreActions; track $index) {\r\n <ui-action-button [icon]=\"ma.icon??'ri-more-2-line'\" (optionSelected)=\"doAction(row.id,$event.id)\" [options]=\"getMoreActions(ma.actions||[],row.data)\"></ui-action-button>\r\n }\r\n }\r\n </div> \r\n }\r\n @else if (header.type == 'checkbox'){\r\n <ui-checkbox [disabled]=\"disabled\" [ngModel]=\"checkedIds.has(row.id)\" [placeholder]=\"getValue(row.data,header.key)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox> \r\n }\r\n @else if (isCellEditable(header)) {\r\n @if ((header.editionType ?? 'input') === 'select') {\r\n <div class=\"ui-editable-cell\" (click)=\"$event.stopPropagation()\">\r\n <ui-select\r\n [disabled]=\"disabled\"\r\n [options]=\"header.editionTypeOptions || []\"\r\n [ngModel]=\"getEditableCellValue(row.id, header.key)\"\r\n (ngModelChange)=\"onEditableSelectChange(row.id, row.data, header.key, $event)\">\r\n </ui-select>\r\n </div>\r\n } @else {\r\n <div class=\"ui-editable-cell\" (click)=\"$event.stopPropagation()\">\r\n <ui-input [disabled]=\"disabled\">\r\n <input\r\n [disabled]=\"disabled\"\r\n [ngModel]=\"getEditableCellValue(row.id, header.key)\"\r\n (ngModelChange)=\"onEditableInputChange(row.id, header.key, $event)\"\r\n (blur)=\"onEditableInputBlur(row.id, row.data, header.key)\" />\r\n </ui-input>\r\n </div>\r\n }\r\n }\r\n @else {\r\n <ui-item-value\r\n [disabled]=\"disabled\"\r\n [key]=\"header.key\"\r\n [type]=\"header.type??'text'\"\r\n [row]=\"row\"\r\n [alignment]=\"alignment\"\r\n [switchValidation]=\"switchValidation\"\r\n (switchConfirmed)=\"switchHandler(row.id, $event, header.label)\"\r\n ></ui-item-value>\r\n }\r\n </div>\r\n </td>\r\n }\r\n </tr>\r\n @if (fullViewRows.includes(row.id)) {\r\n <tr style=\"border-top: none ;\">\r\n <td [colSpan]=\"columns.length\">\r\n <div class=\"full-space-row\">\r\n <ui-short-table [columns]=\"columns\" [cols]=\"mobilePortletCols\" [data]=\"row\"></ui-short-table>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n @empty {\r\n @if (showEmptyMessage) {\r\n <tr> \r\n <td [colSpan]=\"columns.length\">\r\n <div class=\"ui-empty\">{{emptyMessage | uicTranslate}} </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n \r\n @if (showPagination) {\r\n <uic-table-pagination \r\n [loading]=\"loading\" \r\n [totalPages]=\"pages\" \r\n [showText]=\"showTextPagination\"\r\n [size]=\"size\"\r\n [nextButtonText]=\"nextButtonText\"\r\n [previousButtonText]=\"previousButtonText\"\r\n [buttonSize]=\"buttonSize\"\r\n (sizeChange)=\"sizeChabge($event)\"\r\n (pageChange)=\"pageChage($event)\">\r\n </uic-table-pagination>\r\n }\r\n</div>\r\n", styles: [".ui-table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}.ui-table{width:100%;font-weight:400;border-collapse:collapse;background-color:#fff}.ui-table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500}.ui-table th .ui-th-wrap{white-space:nowrap;display:flex;align-items:center}.ui-table th .ui-th-wrap .ui-sort-arrow{font-size:12px;line-height:12px}.ui-table th .ui-th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;cursor:pointer;transition:ease .3s;color:var(--grey-400)}.ui-table th .ui-th-wrap div:hover{color:var(--primary-500)}.ui-table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}.ui-table td,.ui-table th{padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none}.ui-table tr{transition:ease .3s}.ui-table tr:hover{background-color:var(--table-hover)}.ui-table tbody tr{border-top:solid 1px var(--table-border-color)}.ui-table thead tr:hover{color:var(--grey-900)}tbody tr:last-child td{border-bottom:none}.ui-table-container{width:100%;overflow-x:auto}.ui-table-topbar{padding:calc(var(--table-spacing-ref) * 1.6) 20px;font-weight:600;font-size:18px;line-height:20px;gap:16px;background-color:#fff;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.ui-table-topbar p{font-size:14px;font-weight:400;color:var(--grey-400)}.ui-cell-content{padding:5px 0;display:flex;gap:4px;align-items:center;width:100%;min-width:fit-content;text-align:left}.ui-editable-cell{width:100%;min-width:150px}.ui-loader-tr{border-bottom:none!important}.ui-loader-tr td{padding:0}.ui-sort-active{color:var(--secondary-500)!important;border:solid 1px}.ui-empty{text-align:center;color:var(--grey-300)}.ui-table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}@media (max-width: 479px){.ui-table-filters{padding:8px 0;flex-direction:column;align-items:normal;gap:8px}}.ui-filter-actions{display:flex;flex-wrap:wrap;gap:8px}.ui-alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.ui-loader{height:5px;width:100%;--c:no-repeat linear-gradient(var(--primary-500) 0 0);background:var(--c),var(--c),var(--primary-500);background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.ui-striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.ui-striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.ui-tr-highlighted{border-left:solid 6px var(--green-500)}.ui-centered-cell-content{width:100%;display:flex;gap:5px;justify-content:center}.ui-alignment-center{justify-content:center;text-align:center}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-600)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}.clickable-row{cursor:pointer}.ui-row-loader{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);height:20px;width:100%;background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.header-grey{background-color:var(--table-header-background);color:var(--table-header-color)}.header-blue{color:var(--white);background-color:var(--blue-600)}.header-red{color:var(--white);background-color:var(--red-600)}.header-green{color:var(--white);background-color:var(--green-600)}.header-primary{color:var(--white);background-color:var(--primary-600)}.header-secondary{color:var(--white);background-color:var(--secondary-600)}.header-yellow{color:var(--white);background-color:var(--yellow-600)}.header-white{color:var(--table-header-color);background-color:#fff}.header-white:hover{background-color:var(--table-hover)!important}.full-space-row{width:100%;padding:20px;text-align:center}@media (max-width: 479px){.noshow-small{display:none}}@media (min-width: 480px) and (max-width: 767px){.noshow-medium{display:none}}@media (max-width: 479px){.noshow-medium{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: ItemValueComponent, selector: "ui-item-value", inputs: ["key", "type", "alignment", "row", "disabled", "data", "switchValidation"], outputs: ["switchConfirmed"] }, { kind: "component", type: UicShortTableComponent, selector: "ui-short-table", inputs: ["columns", "data", "loading", "disabled", "cols"] }, { kind: "component", type: UicActionButtonComponent, selector: "ui-action-button", inputs: ["icon", "options", "multiselect", "size"], outputs: ["optionSelected", "optionsApplied"] }, { kind: "component", type: UicTableUicSearcherComponent, selector: "uic-table-searcher", inputs: ["placeholder", "label", "searchOnKeydown", "showButtonText", "showSearchButton"], outputs: ["filter"] }, { kind: "component", type: UicTablePaginationComponent, selector: "uic-table-pagination", inputs: ["buttonSize", "currentPage", "totalPages", "size", "loading", "showText", "nextButtonText", "previousButtonText"], outputs: ["pageChange", "sizeChange"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "nonSelectedText", "noneText", "emptyText", "loading", "nullable", "options"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [highlightRow, animatedRow] });
|
|
6020
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableComponent, isStandalone: true, selector: "ui-table", inputs: { columns: "columns", data: "data", loading: "loading", disabled: "disabled", editable: "editable", rowClickable: "rowClickable", rowExpandible: "rowExpandible", pages: "pages", size: "size", squeletonRows: "squeletonRows", buttonSize: "buttonSize", highlightedId: "highlightedId", headerText: "headerText", headerSubtitle: "headerSubtitle", totalItems: "totalItems", alignment: "alignment", searchEnabled: "searchEnabled", searchLabel: "searchLabel", searchPlaceholder: "searchPlaceholder", headerClass: "headerClass", headerBackgroundColor: "headerBackgroundColor", striped: "striped", showPagination: "showPagination", searchOnKeydown: "searchOnKeydown", showEmptyMessage: "showEmptyMessage", showSearchButton: "showSearchButton", showTextPagination: "showTextPagination", emptyMessage: "emptyMessage", switchValidation: "switchValidation", nextButtonText: "nextButtonText", previousButtonText: "previousButtonText", mobilePortletCols: "mobilePortletCols", searcherShowButtonText: "searcherShowButtonText" }, outputs: { action: "action", update: "update", checkedChange: "checkedChange", switchChange: "switchChange", clickedRow: "clickedRow", cellChange: "cellChange" }, queries: [{ propertyName: "actionsRef", first: true, predicate: ["[actions]"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if ( hasActions || searchEnabled){\r\n <div class=\"ui-table-filters\">\r\n @if (searchEnabled) {\r\n <uic-table-searcher \r\n [showSearchButton]=\"showSearchButton\" \r\n [showButtonText]=\"searcherShowButtonText\" \r\n [searchOnKeydown]=\"searchOnKeydown\"\r\n (filter)=\"search($event)\" \r\n [placeholder]=\"searchPlaceholder\" >\r\n </uic-table-searcher>\r\n }\r\n <div class=\"ui-filter-actions\">\r\n <ng-content select=\"[actions]\"></ng-content>\r\n </div>\r\n </div>\r\n}\r\n<ng-content select=\"[filters]\"></ng-content>\r\n<div class=\"ui-table-wrapper\">\r\n @if (headerText) {\r\n <div class=\"ui-table-topbar\"> \r\n <div>\r\n {{headerText}} <span class=\"hightlited-note\"> ({{totalItems}}) </span> \r\n </div>\r\n <p> {{headerSubtitle}} </p>\r\n </div>\r\n }\r\n <div class=\"ui-table-container\"> \r\n <table class=\"ui-table\" [class.ui-striped]=\"striped\">\r\n <thead>\r\n <tr [class]=\" headerClass || 'header-'+headerBackgroundColor\">\r\n @for (header of columns; track $index) {\r\n <th [class.noshow-small]=\"header.hideOn == 'small'\"\r\n [class.noshow-medium]=\"header.hideOn == 'medium'\">\r\n <div [class]=\"'ui-th-wrap ui-alignment-'+alignment\" >\r\n @if (header.type=='checkbox') {\r\n <div>\r\n <ui-checkbox style=\"margin-right: 5px;\" [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n </div>\r\n }\r\n {{header.label.toUpperCase() }} \r\n @if (header.sortEnable) {\r\n <div class=\"ui-sort-arrow\" (click)=\"sortClick(header.key)\" [ngClass]=\"{'ui-sort-active':header.key == sortKey}\">\r\n <i [class]=\"(sortAsc||header.key != sortKey)?'ri-arrow-down-line':'ri-arrow-up-line'\"></i> \r\n </div>\r\n }\r\n </div>\r\n </th> \r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n\r\n @if (loading) {\r\n @for (item of [].constructor(squeletonRows); track $index) {\r\n <tr>\r\n @for (header of columns; track $index) {\r\n <td> <div class=\"ui-row-loader\"></div> </td>\r\n }\r\n </tr> \r\n }\r\n } @else {\r\n @for (row of data; track row.id) {\r\n <tr [@highlightRow]=\"highlightedId === row.id ? 'highlighted' : null\" \r\n [class.ui-tr-highlighted]=\"row.highlighted\"\r\n [class.clickable-row]=\"rowClickable\"\r\n (click)=\"clickRow(row.id)\"\r\n >\r\n @for (header of columns; track $index) {\r\n <!-- TIPOS DE HEADERS -->\r\n <td [class]=\"getFontColor(row.data,header.key)\"\r\n [class.noshow-small]=\"header.hideOn == 'small'\"\r\n [class.noshow-medium]=\"header.hideOn == 'medium'\">\r\n\r\n <div [class]=\"'ui-cell-content ui-alignment-'+alignment\" \r\n [style.justify-content]=\"header.align||null\"\r\n [style.width.px]=\"header.width || null\">\r\n @if (header.type == 'actions') { \r\n <div class=\"ui-centered-cell-content\">\r\n @for (btn of header.actions; track $index) {\r\n @if (isValidRule(row.data,btn.rule)) {\r\n <ui-button \r\n [disabled]=\"loading\"\r\n [tip]=\"btn.tooltip??''\"\r\n size=\"s\"\r\n [disabled]=\"disabled\"\r\n [text]=\"btn.text??''\"\r\n [type]=\"btn.type??'filled'\"\r\n [iconOnly]=\"!btn.text\"\r\n [icon]=\"btn.icon??''\"\r\n [color]=\"btn.color??'black'\"\r\n (click)=\"doAction(row.id,btn.key,$event)\">\r\n </ui-button> \r\n }\r\n } \r\n @if ( header.moreActions && header.moreActions.length>0 ) {\r\n @for (ma of header.moreActions; track $index) {\r\n <ui-action-button [icon]=\"ma.icon??'ri-more-2-line'\" (optionSelected)=\"doAction(row.id,$event.id)\" [options]=\"getMoreActions(ma.actions||[],row.data)\"></ui-action-button>\r\n }\r\n }\r\n </div> \r\n }\r\n @else if (header.type == 'checkbox'){\r\n <ui-checkbox [disabled]=\"disabled\" [ngModel]=\"checkedIds.has(row.id)\" [placeholder]=\"getValue(row.data,header.key)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox> \r\n }\r\n @else if (isCellEditable(header)) {\r\n @if ((header.editionType ?? 'input') === 'select') {\r\n <div class=\"ui-editable-cell\" (click)=\"$event.stopPropagation()\">\r\n <ui-select\r\n [disabled]=\"disabled\"\r\n [options]=\"header.editionTypeOptions || []\"\r\n [ngModel]=\"getEditableCellValue(row.id, header.key)\"\r\n (ngModelChange)=\"onEditableSelectChange(row.id, row.data, header.key, $event)\">\r\n </ui-select>\r\n </div>\r\n } @else {\r\n <div class=\"ui-editable-cell\" (click)=\"$event.stopPropagation()\">\r\n <ui-input [disabled]=\"disabled\">\r\n <input\r\n [disabled]=\"disabled\"\r\n [ngModel]=\"getEditableCellValue(row.id, header.key)\"\r\n (ngModelChange)=\"onEditableInputChange(row.id, header.key, $event)\"\r\n (blur)=\"onEditableInputBlur(row.id, row.data, header.key)\" />\r\n </ui-input>\r\n </div>\r\n }\r\n }\r\n @else {\r\n <ui-item-value\r\n [disabled]=\"disabled\"\r\n [key]=\"header.key\"\r\n [type]=\"header.type??'text'\"\r\n [row]=\"row\"\r\n [alignment]=\"alignment\"\r\n [switchValidation]=\"switchValidation\"\r\n (switchConfirmed)=\"switchHandler(row.id, $event, header.label)\"\r\n ></ui-item-value>\r\n }\r\n </div>\r\n </td>\r\n }\r\n </tr>\r\n @if (fullViewRows.includes(row.id)) {\r\n <tr style=\"border-top: none ;\">\r\n <td [colSpan]=\"columns.length\">\r\n <div class=\"full-space-row\">\r\n <ui-short-table [columns]=\"columns\" [cols]=\"mobilePortletCols\" [data]=\"row\"></ui-short-table>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n @empty {\r\n @if (showEmptyMessage) {\r\n <tr> \r\n <td [colSpan]=\"columns.length\">\r\n <div class=\"ui-empty\">{{emptyMessage | uicTranslate}} </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n \r\n @if (showPagination) {\r\n <uic-table-pagination \r\n [loading]=\"loading\" \r\n [totalPages]=\"pages\" \r\n [showText]=\"showTextPagination\"\r\n [size]=\"size\"\r\n [nextButtonText]=\"nextButtonText\"\r\n [previousButtonText]=\"previousButtonText\"\r\n [buttonSize]=\"buttonSize\"\r\n (sizeChange)=\"sizeChabge($event)\"\r\n (pageChange)=\"pageChage($event)\">\r\n </uic-table-pagination>\r\n }\r\n</div>\r\n", styles: [".ui-table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}.ui-table{width:100%;font-weight:400;border-collapse:collapse;background-color:#fff}.ui-table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500}.ui-table th .ui-th-wrap{white-space:nowrap;display:flex;align-items:center}.ui-table th .ui-th-wrap .ui-sort-arrow{font-size:12px;line-height:12px}.ui-table th .ui-th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;cursor:pointer;transition:ease .3s;color:var(--grey-400)}.ui-table th .ui-th-wrap div:hover{color:var(--primary-500)}.ui-table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}.ui-table td,.ui-table th{padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none}.ui-table tr{transition:ease .3s}.ui-table tr:hover{background-color:var(--table-hover)}.ui-table tbody tr{border-top:solid 1px var(--table-border-color)}.ui-table thead tr:hover{color:var(--grey-900)}tbody tr:last-child td{border-bottom:none}.ui-table-container{width:100%;overflow-x:auto}.ui-table-topbar{padding:calc(var(--table-spacing-ref) * 1.6) 20px;font-weight:600;font-size:18px;line-height:20px;gap:16px;background-color:#fff;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.ui-table-topbar p{font-size:14px;font-weight:400;color:var(--grey-400)}.ui-cell-content{padding:5px 0;display:flex;gap:4px;align-items:center;width:100%;min-width:fit-content;text-align:left}.ui-editable-cell{width:100%;min-width:150px}.ui-loader-tr{border-bottom:none!important}.ui-loader-tr td{padding:0}.ui-sort-active{color:var(--secondary-500)!important;border:solid 1px}.ui-empty{text-align:center;color:var(--grey-300)}.ui-table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}@media (max-width: 479px){.ui-table-filters{padding:8px 0;flex-direction:column;align-items:normal;gap:8px}}.ui-filter-actions{display:flex;flex-wrap:wrap;gap:8px}.ui-alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.ui-loader{height:5px;width:100%;--c:no-repeat linear-gradient(var(--primary-500) 0 0);background:var(--c),var(--c),var(--primary-500);background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.ui-striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.ui-striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.ui-tr-highlighted{border-left:solid 6px var(--green-500)}.ui-centered-cell-content{width:100%;display:flex;gap:5px;justify-content:center}.ui-alignment-center{justify-content:center;text-align:center}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-600)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}.clickable-row{cursor:pointer}.ui-row-loader{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);height:20px;width:100%;background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.header-grey{background-color:var(--table-header-background);color:var(--table-header-color)}.header-blue{color:var(--white);background-color:var(--blue-600)}.header-red{color:var(--white);background-color:var(--red-600)}.header-green{color:var(--white);background-color:var(--green-600)}.header-primary{color:var(--white);background-color:var(--primary-600)}.header-secondary{color:var(--white);background-color:var(--secondary-600)}.header-yellow{color:var(--white);background-color:var(--yellow-600)}.header-white{color:var(--table-header-color);background-color:#fff}.header-white:hover{background-color:var(--table-hover)!important}.full-space-row{width:100%;padding:20px;text-align:center}@media (max-width: 479px){.noshow-small{display:none}}@media (min-width: 480px) and (max-width: 767px){.noshow-medium{display:none}}@media (max-width: 479px){.noshow-medium{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: ItemValueComponent, selector: "ui-item-value", inputs: ["key", "type", "alignment", "row", "disabled", "data", "switchValidation"], outputs: ["switchConfirmed"] }, { kind: "component", type: UicShortTableComponent, selector: "ui-short-table", inputs: ["columns", "data", "loading", "disabled", "cols"] }, { kind: "component", type: UicActionButtonComponent, selector: "ui-action-button", inputs: ["icon", "options", "multiselect", "size"], outputs: ["optionSelected", "optionsApplied"] }, { kind: "component", type: UicTableUicSearcherComponent, selector: "uic-table-searcher", inputs: ["placeholder", "label", "searchOnKeydown", "showButtonText", "showSearchButton"], outputs: ["filter"] }, { kind: "component", type: UicTablePaginationComponent, selector: "uic-table-pagination", inputs: ["buttonSize", "currentPage", "totalPages", "size", "loading", "showText", "nextButtonText", "previousButtonText"], outputs: ["pageChange", "sizeChange"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "nonSelectedText", "noneText", "emptyText", "searcherEnabled", "loading", "nullable", "options"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [highlightRow, animatedRow] });
|
|
5898
6021
|
}
|
|
5899
6022
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableComponent, decorators: [{
|
|
5900
6023
|
type: Component,
|
|
@@ -6013,11 +6136,11 @@ class UicSkeletonCardsComponent {
|
|
|
6013
6136
|
return this.cards > 0 ? this.cards : 0;
|
|
6014
6137
|
}
|
|
6015
6138
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSkeletonCardsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6016
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSkeletonCardsComponent, isStandalone: true, selector: "ui-skeleton-cards", inputs: { cards: "cards", gap: "gap", minCardWidthPx: "minCardWidthPx" }, ngImport: i0, template: "<div class=\"skeleton-cards-grid\" [ngStyle]=\"gridStyle\">\n @for (card of [].constructor(cardsCount); track $index) {\n <div class=\"skeleton-card skeleton-gradient\"></div>\n }\n</div>\n", styles: [".skeleton-cards-grid{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding:24px 0}.skeleton-card{width:100%;aspect-ratio:1/1;border-radius:var(--input-radius)}.skeleton-gradient{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
6139
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSkeletonCardsComponent, isStandalone: true, selector: "ui-skeleton-cards", inputs: { cards: "cards", gap: "gap", minCardWidthPx: "minCardWidthPx" }, ngImport: i0, template: "<div class=\"skeleton-cards-grid\" [ngStyle]=\"gridStyle\">\r\n @for (card of [].constructor(cardsCount); track $index) {\r\n <div class=\"skeleton-card skeleton-gradient\"></div>\r\n }\r\n</div>\r\n", styles: [".skeleton-cards-grid{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding:24px 0}.skeleton-card{width:100%;aspect-ratio:1/1;border-radius:var(--input-radius)}.skeleton-gradient{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
6017
6140
|
}
|
|
6018
6141
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSkeletonCardsComponent, decorators: [{
|
|
6019
6142
|
type: Component,
|
|
6020
|
-
args: [{ selector: 'ui-skeleton-cards', imports: [CommonModule], template: "<div class=\"skeleton-cards-grid\" [ngStyle]=\"gridStyle\">\n @for (card of [].constructor(cardsCount); track $index) {\n <div class=\"skeleton-card skeleton-gradient\"></div>\n }\n</div>\n", styles: [".skeleton-cards-grid{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding:24px 0}.skeleton-card{width:100%;aspect-ratio:1/1;border-radius:var(--input-radius)}.skeleton-gradient{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"] }]
|
|
6143
|
+
args: [{ selector: 'ui-skeleton-cards', imports: [CommonModule], template: "<div class=\"skeleton-cards-grid\" [ngStyle]=\"gridStyle\">\r\n @for (card of [].constructor(cardsCount); track $index) {\r\n <div class=\"skeleton-card skeleton-gradient\"></div>\r\n }\r\n</div>\r\n", styles: [".skeleton-cards-grid{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding:24px 0}.skeleton-card{width:100%;aspect-ratio:1/1;border-radius:var(--input-radius)}.skeleton-gradient{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"] }]
|
|
6021
6144
|
}], propDecorators: { cards: [{
|
|
6022
6145
|
type: Input
|
|
6023
6146
|
}], gap: [{
|
|
@@ -6278,6 +6401,7 @@ class UicWorkPanelComponent {
|
|
|
6278
6401
|
fullView = false;
|
|
6279
6402
|
isMinimized = false;
|
|
6280
6403
|
activeTabId;
|
|
6404
|
+
activeTabTitle;
|
|
6281
6405
|
tabInstances = [];
|
|
6282
6406
|
idCounter = 0;
|
|
6283
6407
|
initialized = false;
|
|
@@ -6322,11 +6446,13 @@ class UicWorkPanelComponent {
|
|
|
6322
6446
|
const id = tabConfig.id ?? `tab-${++this.idCounter}`;
|
|
6323
6447
|
this.tabs.push({ ...tabConfig, id });
|
|
6324
6448
|
this.activeTabId = id;
|
|
6449
|
+
this.activeTabTitle = tabConfig.title;
|
|
6325
6450
|
this.isMinimized = false;
|
|
6326
6451
|
return id;
|
|
6327
6452
|
}
|
|
6328
6453
|
const instance = this.createTab(tabConfig, true);
|
|
6329
6454
|
this.activeTabId = instance.id;
|
|
6455
|
+
this.activeTabTitle = instance.title;
|
|
6330
6456
|
this.isMinimized = false;
|
|
6331
6457
|
this.renderActiveTab();
|
|
6332
6458
|
this.tabAdded.emit(instance.id);
|
|
@@ -6336,6 +6462,7 @@ class UicWorkPanelComponent {
|
|
|
6336
6462
|
openTab(id) {
|
|
6337
6463
|
this.isMinimized = false;
|
|
6338
6464
|
this.activeTabId = id;
|
|
6465
|
+
this.activeTabTitle = this.tabInstances.find(f => f.id === id)?.title;
|
|
6339
6466
|
this.renderActiveTab();
|
|
6340
6467
|
this.tabSelected.emit(id);
|
|
6341
6468
|
}
|
|
@@ -6377,6 +6504,7 @@ class UicWorkPanelComponent {
|
|
|
6377
6504
|
if (this.activeTabId === id) {
|
|
6378
6505
|
const next = this.tabInstances[index] ?? this.tabInstances[index - 1];
|
|
6379
6506
|
this.activeTabId = next?.id;
|
|
6507
|
+
this.activeTabTitle = next?.title;
|
|
6380
6508
|
}
|
|
6381
6509
|
if (!this.activeTabId) {
|
|
6382
6510
|
this.isMinimized = true;
|
|
@@ -6389,6 +6517,7 @@ class UicWorkPanelComponent {
|
|
|
6389
6517
|
minimizePanel() {
|
|
6390
6518
|
this.isMinimized = true;
|
|
6391
6519
|
this.activeTabId = '';
|
|
6520
|
+
this.activeTabTitle = '';
|
|
6392
6521
|
this.fullViewChange.emit(this.isFullViewActivated());
|
|
6393
6522
|
}
|
|
6394
6523
|
emitAction(option) {
|
|
@@ -6409,6 +6538,7 @@ class UicWorkPanelComponent {
|
|
|
6409
6538
|
this.tabInstances.push(instance);
|
|
6410
6539
|
if (!this.activeTabId) {
|
|
6411
6540
|
this.activeTabId = id;
|
|
6541
|
+
this.activeTabTitle = tabConfig.title;
|
|
6412
6542
|
}
|
|
6413
6543
|
if (emitChange) {
|
|
6414
6544
|
this.emitTabsChange();
|
|
@@ -6433,11 +6563,11 @@ class UicWorkPanelComponent {
|
|
|
6433
6563
|
return !(this.isMinimized || !this.activeTabId) && this.fullView;
|
|
6434
6564
|
}
|
|
6435
6565
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicWorkPanelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
6436
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicWorkPanelComponent, isStandalone: true, selector: "ui-work-panel", inputs: { moreActions: "moreActions", componentType: "componentType", componentInputs: "componentInputs", tabs: "tabs", closeWarning: "closeWarning", width: "width", duplicateValidationMessage: "duplicateValidationMessage", minPosition: "minPosition", showAddButton: "showAddButton" }, outputs: { actionSelected: "actionSelected", tabsChange: "tabsChange", tabClosed: "tabClosed", tabSelected: "tabSelected", tabAdded: "tabAdded", fullViewChange: "fullViewChange" }, host: { properties: { "style.--panel-width": "this.panelWidth" } }, viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\r\n [class.dynamic-width]=\"!fullView\"\r\n [class]=\"fullView ? 'open-panel' : 'mid-panel'\"\r\n [class.panel-hidden]=\"isMinimized || !activeTabId\"\r\n>\r\n <div class=\"panel-header\">\r\n @if (moreActions.length > 0) { \r\n <ui-action-button [options]=\"moreActions\" (optionSelected)=\"emitAction($event)\"></ui-action-button>\r\n }\r\n <ui-button class=\"nomob\" (click)=\"minimizePanel()\" size=\"s\" [tip]=\"'work_panel.minimize' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-subtract-fill\"></ui-button>\r\n @if (fullView) {\r\n <ui-button class=\"nomob\" (click)=\"changeSizeBtn(false)\" size=\"s\" [tip]=\"'work_panel.reduce' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-collapse-diagonal-fill\"></ui-button>\r\n } @else {\r\n <ui-button class=\"nomob\" (click)=\"changeSizeBtn(true)\" size=\"s\" [tip]=\"'work_panel.expand' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-expand-diagonal-fill\"></ui-button>\r\n }\r\n <ui-button (click)=\"closeActiveTab()\" size=\"s\" [tip]=\"'work_panel.close' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-line\"></ui-button>\r\n </div>\r\n <div class=\"panel-overflow\">\r\n <!-- contenido dinamico -->\r\n <ng-container #host></ng-container>\r\n </div>\r\n</div>\r\n@if (tabInstances.length > 0) {\r\n <div class=\"panel-nav-bar\">\r\n <div class=\"panel-tabs\">\r\n @for (tab of tabInstances; track tab.id) {\r\n <div class=\"minimized-panel\" [class.active]=\"tab.id === activeTabId\">\r\n <button class=\"min-btn\" type=\"button\" (click)=\"selectTab(tab.id)\">\r\n <i [class]=\"tab.icon?tab.icon : 'ri-dossier-line'\"></i>\r\n <div class=\"min-text\">{{ tab.label }}</div>\r\n </button>\r\n <i (click)=\"closeTab(tab.id)\" class=\"close-btn ri-close-line\"></i>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".open-panel{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease}.mid-panel{position:fixed;height:80vh;min-width:30%;bottom:32px;right:0;display:flex;flex-direction:column;z-index:20;background-color:#fff;border:solid 1px var(--grey-400);border-radius:10px 10px 0 0;box-shadow:0 1px 6px 2px #00000039;transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease,bottom .2s ease,right .2s ease}.panel-nav-bar{background-color:var(--primary-900);box-shadow:0 0 7px 5px #00000041;border-radius:20px 0 0;width:100%;position:fixed;bottom:0;right:0;z-index:100;padding:0 8px 2px 20px;display:flex;gap:8px;height:32px}@media (max-width: 479px){.panel-nav-bar{display:none}}.panel-tabs{width:100%;display:flex;align-items:center;justify-content:flex-end;gap:6px;overflow-x:auto;flex:1 1 auto}.close-btn{cursor:pointer}.close-btn:hover{color:var(--primary-900)}.minimized-panel{min-width:180px;max-width:260px;height:30px;background-color:#fff;opacity:.5;border-radius:9px;border:solid 3px var(--primary-900);color:var(--grey-800);font-size:13px;padding:0 4px 0 8px;display:flex;align-items:center;gap:5px;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.minimized-panel.active{opacity:1;background-color:#fff;border-color:#fff;border-radius:0 0 9px 9px;color:var(--primary-900);font-weight:600}.minimized-panel .min-text{margin-right:10px;flex:1 1;overflow:hidden;white-space:nowrap}.minimized-panel i{font-size:18px}.min-btn{border:none;background:transparent;color:inherit;display:flex;align-items:center;gap:6px;cursor:pointer;padding:0;flex:1 1 auto}.panel-overflow{width:100%;height:100%;flex:1 1;height:fit-content;overflow:auto;animation:panelFadeIn .16s ease}.panel-header{display:flex;justify-content:flex-end;padding:5px 10px;gap:10px;border-radius:10px 10px 0 0}.add-tab{flex-shrink:0}.open-panel,.mid-panel{transform-origin:bottom right}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.panel-hidden{opacity:0;transform:translateY(10px) scale(.98);pointer-events:none}.dynamic-width{width:var(--panel-width)}@media (min-width: 480px) and (max-width: 767px){.open-panel{position:fixed;inset:0;width:100vw;height:100vh;border-radius:0}.mid-panel{width:90vw;height:80vh;right:0;left:auto}}@media (max-width: 479px){.nomob{display:none}.open-panel,.mid-panel{position:fixed;inset:0;border-radius:0;width:100%;height:100vh;z-index:500}}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: UicActionButtonComponent, selector: "ui-action-button", inputs: ["icon", "options", "multiselect", "size"], outputs: ["optionSelected", "optionsApplied"] }] });
|
|
6566
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicWorkPanelComponent, isStandalone: true, selector: "ui-work-panel", inputs: { moreActions: "moreActions", componentType: "componentType", componentInputs: "componentInputs", tabs: "tabs", closeWarning: "closeWarning", width: "width", duplicateValidationMessage: "duplicateValidationMessage", minPosition: "minPosition", showAddButton: "showAddButton" }, outputs: { actionSelected: "actionSelected", tabsChange: "tabsChange", tabClosed: "tabClosed", tabSelected: "tabSelected", tabAdded: "tabAdded", fullViewChange: "fullViewChange" }, host: { properties: { "style.--panel-width": "this.panelWidth" } }, viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\r\n [class.dynamic-width]=\"!fullView\"\r\n [class]=\"fullView ? 'open-panel' : 'mid-panel'\"\r\n [class.panel-hidden]=\"isMinimized || !activeTabId\"\r\n>\r\n <div class=\"panel-header\">\r\n @if (activeTabTitle) {\r\n <div class=\"wp-title\">{{activeTabTitle}}</div>\r\n }\r\n @if (moreActions.length > 0) { \r\n <ui-action-button [options]=\"moreActions\" (optionSelected)=\"emitAction($event)\"></ui-action-button>\r\n }\r\n <ui-button class=\"nomob\" (click)=\"minimizePanel()\" size=\"s\" [tip]=\"'work_panel.minimize' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-subtract-fill\"></ui-button>\r\n @if (fullView) {\r\n <ui-button class=\"nomob\" (click)=\"changeSizeBtn(false)\" size=\"s\" [tip]=\"'work_panel.reduce' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-collapse-diagonal-fill\"></ui-button>\r\n } @else {\r\n <ui-button class=\"nomob\" (click)=\"changeSizeBtn(true)\" size=\"s\" [tip]=\"'work_panel.expand' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-expand-diagonal-fill\"></ui-button>\r\n }\r\n <ui-button (click)=\"closeActiveTab()\" size=\"s\" [tip]=\"'work_panel.close' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-line\"></ui-button>\r\n </div>\r\n <div class=\"panel-overflow\">\r\n <!-- contenido dinamico -->\r\n <ng-container #host></ng-container>\r\n </div>\r\n</div>\r\n@if (tabInstances.length > 0) {\r\n <div class=\"panel-nav-bar\">\r\n <div class=\"panel-tabs\">\r\n @for (tab of tabInstances; track tab.id) {\r\n <div class=\"minimized-panel\" [class.active]=\"tab.id === activeTabId\">\r\n <button class=\"min-btn\" type=\"button\" (click)=\"selectTab(tab.id)\">\r\n <i [class]=\"tab.icon?tab.icon : 'ri-dossier-line'\"></i>\r\n <div class=\"min-text\">{{ tab.label }}</div>\r\n </button>\r\n <i (click)=\"closeTab(tab.id)\" class=\"close-btn ri-close-line\"></i>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".open-panel{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease}.wp-title{flex:1 1;font-weight:600}.mid-panel{position:fixed;height:80vh;min-width:30%;bottom:32px;right:0;display:flex;flex-direction:column;z-index:20;background-color:#fff;border:solid 1px var(--grey-400);border-radius:10px 10px 0 0;box-shadow:0 1px 6px 2px #00000039;transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease,bottom .2s ease,right .2s ease}.panel-nav-bar{background-color:var(--primary-900);box-shadow:0 0 7px 5px #00000041;border-radius:20px 0 0;width:100%;position:fixed;bottom:0;right:0;z-index:100;padding:0 8px 2px 20px;display:flex;gap:8px;height:32px}@media (max-width: 479px){.panel-nav-bar{display:none}}.panel-tabs{width:100%;display:flex;align-items:center;justify-content:flex-end;gap:6px;overflow-x:auto;flex:1 1 auto}.close-btn{cursor:pointer}.close-btn:hover{color:var(--primary-900)}.minimized-panel{min-width:180px;max-width:260px;height:30px;background-color:#fff;opacity:.5;border-radius:9px;border:solid 3px var(--primary-900);color:var(--grey-800);font-size:13px;padding:0 4px 0 8px;display:flex;align-items:center;gap:5px;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.minimized-panel.active{opacity:1;background-color:#fff;border-color:#fff;border-radius:0 0 9px 9px;color:var(--primary-900);font-weight:600}.minimized-panel .min-text{margin-right:10px;flex:1 1;overflow:hidden;white-space:nowrap}.minimized-panel i{font-size:18px}.min-btn{border:none;background:transparent;color:inherit;display:flex;align-items:center;gap:6px;cursor:pointer;padding:0;flex:1 1 auto}.panel-overflow{width:100%;height:100%;flex:1 1;height:fit-content;overflow:auto;animation:panelFadeIn .16s ease}.panel-header{display:flex;justify-content:flex-end;padding:5px 10px;gap:10px;border-radius:10px 10px 0 0}.add-tab{flex-shrink:0}.open-panel,.mid-panel{transform-origin:bottom right}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.panel-hidden{opacity:0;transform:translateY(10px) scale(.98);pointer-events:none}.dynamic-width{width:var(--panel-width)}@media (min-width: 480px) and (max-width: 767px){.open-panel{position:fixed;inset:0;width:100vw;height:100vh;border-radius:0}.mid-panel{width:90vw;height:80vh;right:0;left:auto}}@media (max-width: 479px){.nomob{display:none}.open-panel,.mid-panel{position:fixed;inset:0;border-radius:0;width:100%;height:100vh;z-index:500}}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: UicActionButtonComponent, selector: "ui-action-button", inputs: ["icon", "options", "multiselect", "size"], outputs: ["optionSelected", "optionsApplied"] }] });
|
|
6437
6567
|
}
|
|
6438
6568
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicWorkPanelComponent, decorators: [{
|
|
6439
6569
|
type: Component,
|
|
6440
|
-
args: [{ selector: 'ui-work-panel', imports: [UicButtonComponent, UicToolTipDirective, UicTranslatePipe, UicActionButtonComponent], template: "<div\r\n [class.dynamic-width]=\"!fullView\"\r\n [class]=\"fullView ? 'open-panel' : 'mid-panel'\"\r\n [class.panel-hidden]=\"isMinimized || !activeTabId\"\r\n>\r\n <div class=\"panel-header\">\r\n @if (moreActions.length > 0) { \r\n <ui-action-button [options]=\"moreActions\" (optionSelected)=\"emitAction($event)\"></ui-action-button>\r\n }\r\n <ui-button class=\"nomob\" (click)=\"minimizePanel()\" size=\"s\" [tip]=\"'work_panel.minimize' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-subtract-fill\"></ui-button>\r\n @if (fullView) {\r\n <ui-button class=\"nomob\" (click)=\"changeSizeBtn(false)\" size=\"s\" [tip]=\"'work_panel.reduce' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-collapse-diagonal-fill\"></ui-button>\r\n } @else {\r\n <ui-button class=\"nomob\" (click)=\"changeSizeBtn(true)\" size=\"s\" [tip]=\"'work_panel.expand' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-expand-diagonal-fill\"></ui-button>\r\n }\r\n <ui-button (click)=\"closeActiveTab()\" size=\"s\" [tip]=\"'work_panel.close' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-line\"></ui-button>\r\n </div>\r\n <div class=\"panel-overflow\">\r\n <!-- contenido dinamico -->\r\n <ng-container #host></ng-container>\r\n </div>\r\n</div>\r\n@if (tabInstances.length > 0) {\r\n <div class=\"panel-nav-bar\">\r\n <div class=\"panel-tabs\">\r\n @for (tab of tabInstances; track tab.id) {\r\n <div class=\"minimized-panel\" [class.active]=\"tab.id === activeTabId\">\r\n <button class=\"min-btn\" type=\"button\" (click)=\"selectTab(tab.id)\">\r\n <i [class]=\"tab.icon?tab.icon : 'ri-dossier-line'\"></i>\r\n <div class=\"min-text\">{{ tab.label }}</div>\r\n </button>\r\n <i (click)=\"closeTab(tab.id)\" class=\"close-btn ri-close-line\"></i>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".open-panel{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease}.mid-panel{position:fixed;height:80vh;min-width:30%;bottom:32px;right:0;display:flex;flex-direction:column;z-index:20;background-color:#fff;border:solid 1px var(--grey-400);border-radius:10px 10px 0 0;box-shadow:0 1px 6px 2px #00000039;transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease,bottom .2s ease,right .2s ease}.panel-nav-bar{background-color:var(--primary-900);box-shadow:0 0 7px 5px #00000041;border-radius:20px 0 0;width:100%;position:fixed;bottom:0;right:0;z-index:100;padding:0 8px 2px 20px;display:flex;gap:8px;height:32px}@media (max-width: 479px){.panel-nav-bar{display:none}}.panel-tabs{width:100%;display:flex;align-items:center;justify-content:flex-end;gap:6px;overflow-x:auto;flex:1 1 auto}.close-btn{cursor:pointer}.close-btn:hover{color:var(--primary-900)}.minimized-panel{min-width:180px;max-width:260px;height:30px;background-color:#fff;opacity:.5;border-radius:9px;border:solid 3px var(--primary-900);color:var(--grey-800);font-size:13px;padding:0 4px 0 8px;display:flex;align-items:center;gap:5px;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.minimized-panel.active{opacity:1;background-color:#fff;border-color:#fff;border-radius:0 0 9px 9px;color:var(--primary-900);font-weight:600}.minimized-panel .min-text{margin-right:10px;flex:1 1;overflow:hidden;white-space:nowrap}.minimized-panel i{font-size:18px}.min-btn{border:none;background:transparent;color:inherit;display:flex;align-items:center;gap:6px;cursor:pointer;padding:0;flex:1 1 auto}.panel-overflow{width:100%;height:100%;flex:1 1;height:fit-content;overflow:auto;animation:panelFadeIn .16s ease}.panel-header{display:flex;justify-content:flex-end;padding:5px 10px;gap:10px;border-radius:10px 10px 0 0}.add-tab{flex-shrink:0}.open-panel,.mid-panel{transform-origin:bottom right}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.panel-hidden{opacity:0;transform:translateY(10px) scale(.98);pointer-events:none}.dynamic-width{width:var(--panel-width)}@media (min-width: 480px) and (max-width: 767px){.open-panel{position:fixed;inset:0;width:100vw;height:100vh;border-radius:0}.mid-panel{width:90vw;height:80vh;right:0;left:auto}}@media (max-width: 479px){.nomob{display:none}.open-panel,.mid-panel{position:fixed;inset:0;border-radius:0;width:100%;height:100vh;z-index:500}}\n"] }]
|
|
6570
|
+
args: [{ selector: 'ui-work-panel', imports: [UicButtonComponent, UicToolTipDirective, UicTranslatePipe, UicActionButtonComponent], template: "<div\r\n [class.dynamic-width]=\"!fullView\"\r\n [class]=\"fullView ? 'open-panel' : 'mid-panel'\"\r\n [class.panel-hidden]=\"isMinimized || !activeTabId\"\r\n>\r\n <div class=\"panel-header\">\r\n @if (activeTabTitle) {\r\n <div class=\"wp-title\">{{activeTabTitle}}</div>\r\n }\r\n @if (moreActions.length > 0) { \r\n <ui-action-button [options]=\"moreActions\" (optionSelected)=\"emitAction($event)\"></ui-action-button>\r\n }\r\n <ui-button class=\"nomob\" (click)=\"minimizePanel()\" size=\"s\" [tip]=\"'work_panel.minimize' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-subtract-fill\"></ui-button>\r\n @if (fullView) {\r\n <ui-button class=\"nomob\" (click)=\"changeSizeBtn(false)\" size=\"s\" [tip]=\"'work_panel.reduce' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-collapse-diagonal-fill\"></ui-button>\r\n } @else {\r\n <ui-button class=\"nomob\" (click)=\"changeSizeBtn(true)\" size=\"s\" [tip]=\"'work_panel.expand' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-expand-diagonal-fill\"></ui-button>\r\n }\r\n <ui-button (click)=\"closeActiveTab()\" size=\"s\" [tip]=\"'work_panel.close' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-line\"></ui-button>\r\n </div>\r\n <div class=\"panel-overflow\">\r\n <!-- contenido dinamico -->\r\n <ng-container #host></ng-container>\r\n </div>\r\n</div>\r\n@if (tabInstances.length > 0) {\r\n <div class=\"panel-nav-bar\">\r\n <div class=\"panel-tabs\">\r\n @for (tab of tabInstances; track tab.id) {\r\n <div class=\"minimized-panel\" [class.active]=\"tab.id === activeTabId\">\r\n <button class=\"min-btn\" type=\"button\" (click)=\"selectTab(tab.id)\">\r\n <i [class]=\"tab.icon?tab.icon : 'ri-dossier-line'\"></i>\r\n <div class=\"min-text\">{{ tab.label }}</div>\r\n </button>\r\n <i (click)=\"closeTab(tab.id)\" class=\"close-btn ri-close-line\"></i>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".open-panel{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease}.wp-title{flex:1 1;font-weight:600}.mid-panel{position:fixed;height:80vh;min-width:30%;bottom:32px;right:0;display:flex;flex-direction:column;z-index:20;background-color:#fff;border:solid 1px var(--grey-400);border-radius:10px 10px 0 0;box-shadow:0 1px 6px 2px #00000039;transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease,bottom .2s ease,right .2s ease}.panel-nav-bar{background-color:var(--primary-900);box-shadow:0 0 7px 5px #00000041;border-radius:20px 0 0;width:100%;position:fixed;bottom:0;right:0;z-index:100;padding:0 8px 2px 20px;display:flex;gap:8px;height:32px}@media (max-width: 479px){.panel-nav-bar{display:none}}.panel-tabs{width:100%;display:flex;align-items:center;justify-content:flex-end;gap:6px;overflow-x:auto;flex:1 1 auto}.close-btn{cursor:pointer}.close-btn:hover{color:var(--primary-900)}.minimized-panel{min-width:180px;max-width:260px;height:30px;background-color:#fff;opacity:.5;border-radius:9px;border:solid 3px var(--primary-900);color:var(--grey-800);font-size:13px;padding:0 4px 0 8px;display:flex;align-items:center;gap:5px;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.minimized-panel.active{opacity:1;background-color:#fff;border-color:#fff;border-radius:0 0 9px 9px;color:var(--primary-900);font-weight:600}.minimized-panel .min-text{margin-right:10px;flex:1 1;overflow:hidden;white-space:nowrap}.minimized-panel i{font-size:18px}.min-btn{border:none;background:transparent;color:inherit;display:flex;align-items:center;gap:6px;cursor:pointer;padding:0;flex:1 1 auto}.panel-overflow{width:100%;height:100%;flex:1 1;height:fit-content;overflow:auto;animation:panelFadeIn .16s ease}.panel-header{display:flex;justify-content:flex-end;padding:5px 10px;gap:10px;border-radius:10px 10px 0 0}.add-tab{flex-shrink:0}.open-panel,.mid-panel{transform-origin:bottom right}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.panel-hidden{opacity:0;transform:translateY(10px) scale(.98);pointer-events:none}.dynamic-width{width:var(--panel-width)}@media (min-width: 480px) and (max-width: 767px){.open-panel{position:fixed;inset:0;width:100vw;height:100vh;border-radius:0}.mid-panel{width:90vw;height:80vh;right:0;left:auto}}@media (max-width: 479px){.nomob{display:none}.open-panel,.mid-panel{position:fixed;inset:0;border-radius:0;width:100%;height:100vh;z-index:500}}\n"] }]
|
|
6441
6571
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { host: [{
|
|
6442
6572
|
type: ViewChild,
|
|
6443
6573
|
args: ['host', { read: ViewContainerRef, static: true }]
|
|
@@ -7404,7 +7534,7 @@ class UicEditableTableComponent {
|
|
|
7404
7534
|
this.visibleRowsCount = Math.min(this.visibleRowsCount, totalRows);
|
|
7405
7535
|
}
|
|
7406
7536
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicEditableTableComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
7407
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicEditableTableComponent, isStandalone: true, selector: "ui-editable-table", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, columnsConfig: { classPropertyName: "columnsConfig", publicName: "columnsConfig", isSignal: true, isRequired: false, transformFunction: null }, visibleRowsStep: { classPropertyName: "visibleRowsStep", publicName: "visibleRowsStep", isSignal: false, isRequired: false, transformFunction: null }, record: { classPropertyName: "record", publicName: "record", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { recordChange: "recordChange" }, ngImport: i0, template: "<div class=\"xlstable-overflow\">\n @if (headers.length > 0) {\n <table class=\"xls-table\">\n <colgroup>\n @if (rowActions().length > 0) {\n <col class=\"action-col\" [style.width.px]=\"actionColumnWidth\">\n }\n @for (header of headers; track $index) {\n <col [style.width.px]=\"columnWidths[$index]\">\n }\n </colgroup>\n <thead>\n <tr>\n @if (rowActions().length > 0) {\n <th class=\"action-col\"></th>\n }\n @for (header of headers; track $index) {\n <th>\n @if (pendingColumnIndex === $index) {\n <div class=\"hea-th hea-th-edit\">\n <input\n class=\"new-col-name\"\n type=\"text\"\n [(ngModel)]=\"pendingColumnName\"\n (ngModelChange)=\"onPendingColumnNameChange($event)\"\n (blur)=\"onPendingColumnNameBlur()\"\n (keydown)=\"onPendingColumnNameKeydown($event)\"\n [attr.data-new-col]=\"$index\">\n @if (pendingColumnName.trim()) {\n <ui-button (mousedown)=\"onPendingColumnCheckMouseDown()\" (click)=\"confirmPendingColumnName()\" icon=\"ri-check-line\" color=\"green\" size=\"s\" [iconOnly]=\"true\"></ui-button>\n }\n </div>\n } @else {\n <div class=\"hea-th\">\n <div style=\"flex: 1 1; min-width: 0;\">\n {{ header }} \n </div>\n \n @if (resolvedConfig().canAddColumn) {\n <ui-button [tip]=\"'editable_table.add_column' | uicTranslate\" (click)=\"addColumAfert($index)\" icon=\"ri-insert-column-right\" size=\"s\" [iconOnly]=\"true\"></ui-button> \n }\n @if (resolvedConfig().canDeleteColumn){\n <ui-button [tip]=\"'editable_table.delete_column' | uicTranslate\" (click)=\"deleteColum(header)\" icon=\"ri-delete-bin-line\" color=\"red\" size=\"s\" [iconOnly]=\"true\"></ui-button>\n }\n @if (resolvedConfig().resizeableColumns) {\n <span\n class=\"column-resize-handle\"\n (pointerdown)=\"startColumnResize($event, $index)\"\n ></span>\n }\n\n </div>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of visibleRows(); track $index; let i = $index) {\n <tr>\n @if (rowActions().length > 0) {\n <td class=\"action-col\">\n <div class=\"action-cell\">\n <ui-action-button [options]=\"rowActions()\" (optionSelected)=\"handleRowAction($event.id, i)\"></ui-action-button>\n </div>\n </td>\n }\n @for (header of headers; track $index; let col = $index) {\n <td>\n <input\n [disabled]=\"columnDisabledByHeader()[header]\"\n [type]=\"columnInputTypeByHeader()[header]\"\n [attr.data-row]=\"i\"\n [attr.data-col]=\"col\"\n [(ngModel)]=\"row[header]\"\n (blur)=\"onCellBlur()\"\n (keydown)=\"onCellKeydown($event, i, col)\">\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n @if (hasMoreRows()) {\n <div class=\"show-more\">\n <ui-button color=\"black\" type=\"bordered\" size=\"m\" (click)=\"showMoreRows()\">\n {{'excel_table.see_more' | uicTranslate}}\n </ui-button>\n </div>\n }\n <div class=\"table-counter\">\n {{'excel_table.counter_text' | uicTranslate:{shown: visibleRows().length, total: rows.length} }}\n </div>\n } @else{\n <div class=\"empty-msg\"> {{'excel_table.empty_message' | uicTranslate}} </div>\n }\n</div>\n", styles: [".xls-table{width:max-content;min-width:0;table-layout:fixed;border:solid 1px var(--grey-200);border-radius:5px;overflow:hidden}.xls-table th,.xls-table td{height:28px;padding:2px;line-height:14px;font-size:12px;border-bottom:solid 1px var(--grey-200)}.xls-table td{background-color:var(--grey-100)}.xls-table td input{padding:3px;border:solid 1px white;border-radius:3px;background-color:#fff;font-weight:300;width:calc(100% - 8px)}.xls-table td input:enabled:hover{border-color:var(--primary-400)}.xls-table td input:disabled{border-color:var(--grey-100);background-color:var(--grey-50);color:var(--grey-700)}.xls-table td input:focus{border-color:var(--primary-600)}.xls-table th{line-height:28px;white-space:nowrap;background-color:var(--grey-400);color:#fff;text-align:left;padding:0;border:solid 1px white}.action-col{width:30px!important;min-width:30px!important;max-width:30px!important;padding:0!important;box-sizing:border-box;overflow:hidden}.action-cell{display:flex;align-items:center;justify-content:center;width:30px;min-width:30px;max-width:30px;box-sizing:border-box;flex:0 0 auto}.xlstable-overflow{overflow-x:auto;overflow-y:hidden;width:100%}.show-more{display:flex;justify-content:center;margin-top:10px}.table-counter{margin-top:8px;text-align:right;font-size:11px;color:var(--grey-500);font-weight:400}.hea-th{display:flex;position:relative;justify-content:space-between;width:100%;gap:5px;align-items:center;padding:0 10px}.hea-th i{cursor:pointer}.column-resize-handle{position:absolute;top:0;right:0;background-color:var(--grey-500);width:6px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none;transition:opacity ease .3s}.column-resize-handle:hover{opacity:.5}.hea-th-edit{gap:4px}.new-col-name{width:140px;height:24px;border:solid 1px var(--grey-300);border-radius:3px;padding:0 6px;font-size:12px}.empty-msg{text-align:center;color:var(--grey-500);padding:20px;font-weight:300;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicActionButtonComponent, selector: "ui-action-button", inputs: ["icon", "options", "multiselect", "size"], outputs: ["optionSelected", "optionsApplied"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }] });
|
|
7537
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicEditableTableComponent, isStandalone: true, selector: "ui-editable-table", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, columnsConfig: { classPropertyName: "columnsConfig", publicName: "columnsConfig", isSignal: true, isRequired: false, transformFunction: null }, visibleRowsStep: { classPropertyName: "visibleRowsStep", publicName: "visibleRowsStep", isSignal: false, isRequired: false, transformFunction: null }, record: { classPropertyName: "record", publicName: "record", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { recordChange: "recordChange" }, ngImport: i0, template: "<div class=\"xlstable-overflow\">\r\n @if (headers.length > 0) {\r\n <table class=\"xls-table\">\r\n <colgroup>\r\n @if (rowActions().length > 0) {\r\n <col class=\"action-col\" [style.width.px]=\"actionColumnWidth\">\r\n }\r\n @for (header of headers; track $index) {\r\n <col [style.width.px]=\"columnWidths[$index]\">\r\n }\r\n </colgroup>\r\n <thead>\r\n <tr>\r\n @if (rowActions().length > 0) {\r\n <th class=\"action-col\"></th>\r\n }\r\n @for (header of headers; track $index) {\r\n <th>\r\n @if (pendingColumnIndex === $index) {\r\n <div class=\"hea-th hea-th-edit\">\r\n <input\r\n class=\"new-col-name\"\r\n type=\"text\"\r\n [(ngModel)]=\"pendingColumnName\"\r\n (ngModelChange)=\"onPendingColumnNameChange($event)\"\r\n (blur)=\"onPendingColumnNameBlur()\"\r\n (keydown)=\"onPendingColumnNameKeydown($event)\"\r\n [attr.data-new-col]=\"$index\">\r\n @if (pendingColumnName.trim()) {\r\n <ui-button (mousedown)=\"onPendingColumnCheckMouseDown()\" (click)=\"confirmPendingColumnName()\" icon=\"ri-check-line\" color=\"green\" size=\"s\" [iconOnly]=\"true\"></ui-button>\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"hea-th\">\r\n <div style=\"flex: 1 1; min-width: 0;\">\r\n {{ header }} \r\n </div>\r\n \r\n @if (resolvedConfig().canAddColumn) {\r\n <ui-button [tip]=\"'editable_table.add_column' | uicTranslate\" (click)=\"addColumAfert($index)\" icon=\"ri-insert-column-right\" size=\"s\" [iconOnly]=\"true\"></ui-button> \r\n }\r\n @if (resolvedConfig().canDeleteColumn){\r\n <ui-button [tip]=\"'editable_table.delete_column' | uicTranslate\" (click)=\"deleteColum(header)\" icon=\"ri-delete-bin-line\" color=\"red\" size=\"s\" [iconOnly]=\"true\"></ui-button>\r\n }\r\n @if (resolvedConfig().resizeableColumns) {\r\n <span\r\n class=\"column-resize-handle\"\r\n (pointerdown)=\"startColumnResize($event, $index)\"\r\n ></span>\r\n }\r\n\r\n </div>\r\n }\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of visibleRows(); track $index; let i = $index) {\r\n <tr>\r\n @if (rowActions().length > 0) {\r\n <td class=\"action-col\">\r\n <div class=\"action-cell\">\r\n <ui-action-button [options]=\"rowActions()\" (optionSelected)=\"handleRowAction($event.id, i)\"></ui-action-button>\r\n </div>\r\n </td>\r\n }\r\n @for (header of headers; track $index; let col = $index) {\r\n <td>\r\n <input\r\n [disabled]=\"columnDisabledByHeader()[header]\"\r\n [type]=\"columnInputTypeByHeader()[header]\"\r\n [attr.data-row]=\"i\"\r\n [attr.data-col]=\"col\"\r\n [(ngModel)]=\"row[header]\"\r\n (blur)=\"onCellBlur()\"\r\n (keydown)=\"onCellKeydown($event, i, col)\">\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n @if (hasMoreRows()) {\r\n <div class=\"show-more\">\r\n <ui-button color=\"black\" type=\"bordered\" size=\"m\" (click)=\"showMoreRows()\">\r\n {{'excel_table.see_more' | uicTranslate}}\r\n </ui-button>\r\n </div>\r\n }\r\n <div class=\"table-counter\">\r\n {{'excel_table.counter_text' | uicTranslate:{shown: visibleRows().length, total: rows.length} }}\r\n </div>\r\n } @else{\r\n <div class=\"empty-msg\"> {{'excel_table.empty_message' | uicTranslate}} </div>\r\n }\r\n</div>\r\n", styles: [".xls-table{width:max-content;min-width:0;table-layout:fixed;border:solid 1px var(--grey-200);border-radius:5px;overflow:hidden}.xls-table th,.xls-table td{height:28px;padding:2px;line-height:14px;font-size:12px;border-bottom:solid 1px var(--grey-200)}.xls-table td{background-color:var(--grey-100)}.xls-table td input{padding:3px;border:solid 1px white;border-radius:3px;background-color:#fff;font-weight:300;width:calc(100% - 8px)}.xls-table td input:enabled:hover{border-color:var(--primary-400)}.xls-table td input:disabled{border-color:var(--grey-100);background-color:var(--grey-50);color:var(--grey-700)}.xls-table td input:focus{border-color:var(--primary-600)}.xls-table th{line-height:28px;white-space:nowrap;background-color:var(--grey-400);color:#fff;text-align:left;padding:0;border:solid 1px white}.action-col{width:30px!important;min-width:30px!important;max-width:30px!important;padding:0!important;box-sizing:border-box;overflow:hidden}.action-cell{display:flex;align-items:center;justify-content:center;width:30px;min-width:30px;max-width:30px;box-sizing:border-box;flex:0 0 auto}.xlstable-overflow{overflow-x:auto;overflow-y:hidden;width:100%}.show-more{display:flex;justify-content:center;margin-top:10px}.table-counter{margin-top:8px;text-align:right;font-size:11px;color:var(--grey-500);font-weight:400}.hea-th{display:flex;position:relative;justify-content:space-between;width:100%;gap:5px;align-items:center;padding:0 10px}.hea-th i{cursor:pointer}.column-resize-handle{position:absolute;top:0;right:0;background-color:var(--grey-500);width:6px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none;transition:opacity ease .3s}.column-resize-handle:hover{opacity:.5}.hea-th-edit{gap:4px}.new-col-name{width:140px;height:24px;border:solid 1px var(--grey-300);border-radius:3px;padding:0 6px;font-size:12px}.empty-msg{text-align:center;color:var(--grey-500);padding:20px;font-weight:300;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicActionButtonComponent, selector: "ui-action-button", inputs: ["icon", "options", "multiselect", "size"], outputs: ["optionSelected", "optionsApplied"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }] });
|
|
7408
7538
|
}
|
|
7409
7539
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicEditableTableComponent, decorators: [{
|
|
7410
7540
|
type: Component,
|
|
@@ -7415,7 +7545,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
7415
7545
|
FormsModule,
|
|
7416
7546
|
UicTranslatePipe,
|
|
7417
7547
|
UicToolTipDirective
|
|
7418
|
-
], template: "<div class=\"xlstable-overflow\">\n @if (headers.length > 0) {\n <table class=\"xls-table\">\n <colgroup>\n @if (rowActions().length > 0) {\n <col class=\"action-col\" [style.width.px]=\"actionColumnWidth\">\n }\n @for (header of headers; track $index) {\n <col [style.width.px]=\"columnWidths[$index]\">\n }\n </colgroup>\n <thead>\n <tr>\n @if (rowActions().length > 0) {\n <th class=\"action-col\"></th>\n }\n @for (header of headers; track $index) {\n <th>\n @if (pendingColumnIndex === $index) {\n <div class=\"hea-th hea-th-edit\">\n <input\n class=\"new-col-name\"\n type=\"text\"\n [(ngModel)]=\"pendingColumnName\"\n (ngModelChange)=\"onPendingColumnNameChange($event)\"\n (blur)=\"onPendingColumnNameBlur()\"\n (keydown)=\"onPendingColumnNameKeydown($event)\"\n [attr.data-new-col]=\"$index\">\n @if (pendingColumnName.trim()) {\n <ui-button (mousedown)=\"onPendingColumnCheckMouseDown()\" (click)=\"confirmPendingColumnName()\" icon=\"ri-check-line\" color=\"green\" size=\"s\" [iconOnly]=\"true\"></ui-button>\n }\n </div>\n } @else {\n <div class=\"hea-th\">\n <div style=\"flex: 1 1; min-width: 0;\">\n {{ header }} \n </div>\n \n @if (resolvedConfig().canAddColumn) {\n <ui-button [tip]=\"'editable_table.add_column' | uicTranslate\" (click)=\"addColumAfert($index)\" icon=\"ri-insert-column-right\" size=\"s\" [iconOnly]=\"true\"></ui-button> \n }\n @if (resolvedConfig().canDeleteColumn){\n <ui-button [tip]=\"'editable_table.delete_column' | uicTranslate\" (click)=\"deleteColum(header)\" icon=\"ri-delete-bin-line\" color=\"red\" size=\"s\" [iconOnly]=\"true\"></ui-button>\n }\n @if (resolvedConfig().resizeableColumns) {\n <span\n class=\"column-resize-handle\"\n (pointerdown)=\"startColumnResize($event, $index)\"\n ></span>\n }\n\n </div>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of visibleRows(); track $index; let i = $index) {\n <tr>\n @if (rowActions().length > 0) {\n <td class=\"action-col\">\n <div class=\"action-cell\">\n <ui-action-button [options]=\"rowActions()\" (optionSelected)=\"handleRowAction($event.id, i)\"></ui-action-button>\n </div>\n </td>\n }\n @for (header of headers; track $index; let col = $index) {\n <td>\n <input\n [disabled]=\"columnDisabledByHeader()[header]\"\n [type]=\"columnInputTypeByHeader()[header]\"\n [attr.data-row]=\"i\"\n [attr.data-col]=\"col\"\n [(ngModel)]=\"row[header]\"\n (blur)=\"onCellBlur()\"\n (keydown)=\"onCellKeydown($event, i, col)\">\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n @if (hasMoreRows()) {\n <div class=\"show-more\">\n <ui-button color=\"black\" type=\"bordered\" size=\"m\" (click)=\"showMoreRows()\">\n {{'excel_table.see_more' | uicTranslate}}\n </ui-button>\n </div>\n }\n <div class=\"table-counter\">\n {{'excel_table.counter_text' | uicTranslate:{shown: visibleRows().length, total: rows.length} }}\n </div>\n } @else{\n <div class=\"empty-msg\"> {{'excel_table.empty_message' | uicTranslate}} </div>\n }\n</div>\n", styles: [".xls-table{width:max-content;min-width:0;table-layout:fixed;border:solid 1px var(--grey-200);border-radius:5px;overflow:hidden}.xls-table th,.xls-table td{height:28px;padding:2px;line-height:14px;font-size:12px;border-bottom:solid 1px var(--grey-200)}.xls-table td{background-color:var(--grey-100)}.xls-table td input{padding:3px;border:solid 1px white;border-radius:3px;background-color:#fff;font-weight:300;width:calc(100% - 8px)}.xls-table td input:enabled:hover{border-color:var(--primary-400)}.xls-table td input:disabled{border-color:var(--grey-100);background-color:var(--grey-50);color:var(--grey-700)}.xls-table td input:focus{border-color:var(--primary-600)}.xls-table th{line-height:28px;white-space:nowrap;background-color:var(--grey-400);color:#fff;text-align:left;padding:0;border:solid 1px white}.action-col{width:30px!important;min-width:30px!important;max-width:30px!important;padding:0!important;box-sizing:border-box;overflow:hidden}.action-cell{display:flex;align-items:center;justify-content:center;width:30px;min-width:30px;max-width:30px;box-sizing:border-box;flex:0 0 auto}.xlstable-overflow{overflow-x:auto;overflow-y:hidden;width:100%}.show-more{display:flex;justify-content:center;margin-top:10px}.table-counter{margin-top:8px;text-align:right;font-size:11px;color:var(--grey-500);font-weight:400}.hea-th{display:flex;position:relative;justify-content:space-between;width:100%;gap:5px;align-items:center;padding:0 10px}.hea-th i{cursor:pointer}.column-resize-handle{position:absolute;top:0;right:0;background-color:var(--grey-500);width:6px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none;transition:opacity ease .3s}.column-resize-handle:hover{opacity:.5}.hea-th-edit{gap:4px}.new-col-name{width:140px;height:24px;border:solid 1px var(--grey-300);border-radius:3px;padding:0 6px;font-size:12px}.empty-msg{text-align:center;color:var(--grey-500);padding:20px;font-weight:300;font-size:14px}\n"] }]
|
|
7548
|
+
], template: "<div class=\"xlstable-overflow\">\r\n @if (headers.length > 0) {\r\n <table class=\"xls-table\">\r\n <colgroup>\r\n @if (rowActions().length > 0) {\r\n <col class=\"action-col\" [style.width.px]=\"actionColumnWidth\">\r\n }\r\n @for (header of headers; track $index) {\r\n <col [style.width.px]=\"columnWidths[$index]\">\r\n }\r\n </colgroup>\r\n <thead>\r\n <tr>\r\n @if (rowActions().length > 0) {\r\n <th class=\"action-col\"></th>\r\n }\r\n @for (header of headers; track $index) {\r\n <th>\r\n @if (pendingColumnIndex === $index) {\r\n <div class=\"hea-th hea-th-edit\">\r\n <input\r\n class=\"new-col-name\"\r\n type=\"text\"\r\n [(ngModel)]=\"pendingColumnName\"\r\n (ngModelChange)=\"onPendingColumnNameChange($event)\"\r\n (blur)=\"onPendingColumnNameBlur()\"\r\n (keydown)=\"onPendingColumnNameKeydown($event)\"\r\n [attr.data-new-col]=\"$index\">\r\n @if (pendingColumnName.trim()) {\r\n <ui-button (mousedown)=\"onPendingColumnCheckMouseDown()\" (click)=\"confirmPendingColumnName()\" icon=\"ri-check-line\" color=\"green\" size=\"s\" [iconOnly]=\"true\"></ui-button>\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"hea-th\">\r\n <div style=\"flex: 1 1; min-width: 0;\">\r\n {{ header }} \r\n </div>\r\n \r\n @if (resolvedConfig().canAddColumn) {\r\n <ui-button [tip]=\"'editable_table.add_column' | uicTranslate\" (click)=\"addColumAfert($index)\" icon=\"ri-insert-column-right\" size=\"s\" [iconOnly]=\"true\"></ui-button> \r\n }\r\n @if (resolvedConfig().canDeleteColumn){\r\n <ui-button [tip]=\"'editable_table.delete_column' | uicTranslate\" (click)=\"deleteColum(header)\" icon=\"ri-delete-bin-line\" color=\"red\" size=\"s\" [iconOnly]=\"true\"></ui-button>\r\n }\r\n @if (resolvedConfig().resizeableColumns) {\r\n <span\r\n class=\"column-resize-handle\"\r\n (pointerdown)=\"startColumnResize($event, $index)\"\r\n ></span>\r\n }\r\n\r\n </div>\r\n }\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of visibleRows(); track $index; let i = $index) {\r\n <tr>\r\n @if (rowActions().length > 0) {\r\n <td class=\"action-col\">\r\n <div class=\"action-cell\">\r\n <ui-action-button [options]=\"rowActions()\" (optionSelected)=\"handleRowAction($event.id, i)\"></ui-action-button>\r\n </div>\r\n </td>\r\n }\r\n @for (header of headers; track $index; let col = $index) {\r\n <td>\r\n <input\r\n [disabled]=\"columnDisabledByHeader()[header]\"\r\n [type]=\"columnInputTypeByHeader()[header]\"\r\n [attr.data-row]=\"i\"\r\n [attr.data-col]=\"col\"\r\n [(ngModel)]=\"row[header]\"\r\n (blur)=\"onCellBlur()\"\r\n (keydown)=\"onCellKeydown($event, i, col)\">\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n @if (hasMoreRows()) {\r\n <div class=\"show-more\">\r\n <ui-button color=\"black\" type=\"bordered\" size=\"m\" (click)=\"showMoreRows()\">\r\n {{'excel_table.see_more' | uicTranslate}}\r\n </ui-button>\r\n </div>\r\n }\r\n <div class=\"table-counter\">\r\n {{'excel_table.counter_text' | uicTranslate:{shown: visibleRows().length, total: rows.length} }}\r\n </div>\r\n } @else{\r\n <div class=\"empty-msg\"> {{'excel_table.empty_message' | uicTranslate}} </div>\r\n }\r\n</div>\r\n", styles: [".xls-table{width:max-content;min-width:0;table-layout:fixed;border:solid 1px var(--grey-200);border-radius:5px;overflow:hidden}.xls-table th,.xls-table td{height:28px;padding:2px;line-height:14px;font-size:12px;border-bottom:solid 1px var(--grey-200)}.xls-table td{background-color:var(--grey-100)}.xls-table td input{padding:3px;border:solid 1px white;border-radius:3px;background-color:#fff;font-weight:300;width:calc(100% - 8px)}.xls-table td input:enabled:hover{border-color:var(--primary-400)}.xls-table td input:disabled{border-color:var(--grey-100);background-color:var(--grey-50);color:var(--grey-700)}.xls-table td input:focus{border-color:var(--primary-600)}.xls-table th{line-height:28px;white-space:nowrap;background-color:var(--grey-400);color:#fff;text-align:left;padding:0;border:solid 1px white}.action-col{width:30px!important;min-width:30px!important;max-width:30px!important;padding:0!important;box-sizing:border-box;overflow:hidden}.action-cell{display:flex;align-items:center;justify-content:center;width:30px;min-width:30px;max-width:30px;box-sizing:border-box;flex:0 0 auto}.xlstable-overflow{overflow-x:auto;overflow-y:hidden;width:100%}.show-more{display:flex;justify-content:center;margin-top:10px}.table-counter{margin-top:8px;text-align:right;font-size:11px;color:var(--grey-500);font-weight:400}.hea-th{display:flex;position:relative;justify-content:space-between;width:100%;gap:5px;align-items:center;padding:0 10px}.hea-th i{cursor:pointer}.column-resize-handle{position:absolute;top:0;right:0;background-color:var(--grey-500);width:6px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none;transition:opacity ease .3s}.column-resize-handle:hover{opacity:.5}.hea-th-edit{gap:4px}.new-col-name{width:140px;height:24px;border:solid 1px var(--grey-300);border-radius:3px;padding:0 6px;font-size:12px}.empty-msg{text-align:center;color:var(--grey-500);padding:20px;font-weight:300;font-size:14px}\n"] }]
|
|
7419
7549
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { visibleRowsStep: [{
|
|
7420
7550
|
type: Input
|
|
7421
7551
|
}], record: [{
|
|
@@ -7698,11 +7828,11 @@ class UicProgressBarComponent {
|
|
|
7698
7828
|
});
|
|
7699
7829
|
}
|
|
7700
7830
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7701
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicProgressBarComponent, isStandalone: true, selector: "ui-progress-bar", inputs: { progress: "progress", color: "color", height: "height" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'progress-bar pb-' + color\" [style.--pb-height]=\"heightPx\">\
|
|
7831
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicProgressBarComponent, isStandalone: true, selector: "ui-progress-bar", inputs: { progress: "progress", color: "color", height: "height" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'progress-bar pb-' + color\" [style.--pb-height]=\"heightPx\">\n <div class=\"progress-bar__fill\" [style.width.%]=\"displayProgress\"></div>\n</div>\n", styles: [":host{display:block;width:100%;margin:0;padding:0}.progress-bar{--pb-height: 4px;--progress-fill: var(--primary-600);--progress-track: var(--primary-200);width:100%;height:var(--pb-height);margin:0;padding:0;box-sizing:border-box;border-radius:calc(var(--pb-height) / 2);background-color:var(--progress-track);overflow:hidden}.progress-bar__fill{display:block;height:100%;background-color:var(--progress-fill);border-radius:inherit;width:0%;transition:width .4s ease-in-out;will-change:width}.pb-primary{--progress-fill: var(--primary-600);--progress-track: var(--primary-200)}.pb-secondary{--progress-fill: var(--secondary-600);--progress-track: var(--secondary-200)}.pb-red{--progress-fill: var(--red-600);--progress-track: var(--red-200)}.pb-green{--progress-fill: var(--green-600);--progress-track: var(--green-200)}.pb-blue{--progress-fill: var(--blue-600);--progress-track: var(--blue-200)}.pb-yellow{--progress-fill: var(--yellow-600);--progress-track: var(--yellow-200)}.pb-black{--progress-fill: var(--grey-900);--progress-track: var(--grey-200)}.pb-grey{--progress-fill: var(--grey-600);--progress-track: var(--grey-200)}.pb-white{--progress-fill: var(--white);--progress-track: var(--grey-200)}\n"] });
|
|
7702
7832
|
}
|
|
7703
7833
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicProgressBarComponent, decorators: [{
|
|
7704
7834
|
type: Component,
|
|
7705
|
-
args: [{ selector: 'ui-progress-bar', imports: [], template: "<div [class]=\"'progress-bar pb-' + color\" [style.--pb-height]=\"heightPx\">\
|
|
7835
|
+
args: [{ selector: 'ui-progress-bar', imports: [], template: "<div [class]=\"'progress-bar pb-' + color\" [style.--pb-height]=\"heightPx\">\n <div class=\"progress-bar__fill\" [style.width.%]=\"displayProgress\"></div>\n</div>\n", styles: [":host{display:block;width:100%;margin:0;padding:0}.progress-bar{--pb-height: 4px;--progress-fill: var(--primary-600);--progress-track: var(--primary-200);width:100%;height:var(--pb-height);margin:0;padding:0;box-sizing:border-box;border-radius:calc(var(--pb-height) / 2);background-color:var(--progress-track);overflow:hidden}.progress-bar__fill{display:block;height:100%;background-color:var(--progress-fill);border-radius:inherit;width:0%;transition:width .4s ease-in-out;will-change:width}.pb-primary{--progress-fill: var(--primary-600);--progress-track: var(--primary-200)}.pb-secondary{--progress-fill: var(--secondary-600);--progress-track: var(--secondary-200)}.pb-red{--progress-fill: var(--red-600);--progress-track: var(--red-200)}.pb-green{--progress-fill: var(--green-600);--progress-track: var(--green-200)}.pb-blue{--progress-fill: var(--blue-600);--progress-track: var(--blue-200)}.pb-yellow{--progress-fill: var(--yellow-600);--progress-track: var(--yellow-200)}.pb-black{--progress-fill: var(--grey-900);--progress-track: var(--grey-200)}.pb-grey{--progress-fill: var(--grey-600);--progress-track: var(--grey-200)}.pb-white{--progress-fill: var(--white);--progress-track: var(--grey-200)}\n"] }]
|
|
7706
7836
|
}], propDecorators: { progress: [{
|
|
7707
7837
|
type: Input
|
|
7708
7838
|
}], color: [{
|
|
@@ -7722,7 +7852,7 @@ const FIELDS_CONFIG = [
|
|
|
7722
7852
|
{ value: 'textarea', icon: 'ri-file-text-line', detail: 'Texto multilinea con ajuste de altura', label: 'Area de texto', properties: ['placeholder', 'minLength', 'maxLength', 'showCounter', 'voiceToTextEnabled', 'textareaResize', 'resizeMinRows', 'resizeMaxRows'] },
|
|
7723
7853
|
{ value: 'number', icon: 'ri-hashtag', detail: 'Campo numerico con control de paso', label: 'Numero', properties: ['placeholder', 'step', 'min', 'max'] },
|
|
7724
7854
|
{ value: 'phone', icon: 'ri-phone-line', detail: 'Telefono con pais y codigo', label: 'Telefono', properties: ['placeholder'] },
|
|
7725
|
-
{ value: 'select', icon: 'ri-list-unordered', detail: 'Seleccion simple desde opciones', label: 'Selector', properties: ['options'] },
|
|
7855
|
+
{ value: 'select', icon: 'ri-list-unordered', detail: 'Seleccion simple desde opciones', label: 'Selector', properties: ['options', 'selectSearchEnabled', 'selectNullable'] },
|
|
7726
7856
|
{ value: 'multyselect', icon: 'ri-list-check-2', detail: 'Seleccion multiple desde opciones', label: 'Selector multiple', properties: ['options'] },
|
|
7727
7857
|
{ value: 'date', icon: 'ri-calendar-2-line', detail: 'Selector de fecha o mes', label: 'Fecha', properties: ['monthMode', 'monthDay', 'minDate', 'maxDate'] },
|
|
7728
7858
|
{ value: 'time', icon: 'ri-timer-2-line', detail: 'Selector de hora', label: 'Hora', properties: ['timeInterval'] },
|
|
@@ -7871,6 +8001,20 @@ const EXTRA_FORM_FIELDS = [
|
|
|
7871
8001
|
{ id: 'application/vnd.ms-powerpoint', text: 'PPT' },
|
|
7872
8002
|
]
|
|
7873
8003
|
},
|
|
8004
|
+
{
|
|
8005
|
+
name: 'selectNullable',
|
|
8006
|
+
label: 'form_builder.extra.selectNullable',
|
|
8007
|
+
internalIcon: 'ri-checkbox-multiple-blank-line',
|
|
8008
|
+
tip: 'form_builder.extra.selectNullable_tip',
|
|
8009
|
+
type: 'checkbox'
|
|
8010
|
+
},
|
|
8011
|
+
{
|
|
8012
|
+
name: 'selectSearchEnabled',
|
|
8013
|
+
label: 'form_builder.extra.selectSearchEnabled',
|
|
8014
|
+
internalIcon: 'ri-search-line',
|
|
8015
|
+
tip: 'form_builder.extra.selectSearchEnabled_tip',
|
|
8016
|
+
type: 'checkbox'
|
|
8017
|
+
},
|
|
7874
8018
|
{
|
|
7875
8019
|
name: 'poolTitle',
|
|
7876
8020
|
label: 'form_builder.extra.poolTitle',
|
|
@@ -8111,11 +8255,11 @@ class UicFieldOptionsEditorComponent {
|
|
|
8111
8255
|
this.optionsChange.emit(this.options);
|
|
8112
8256
|
}
|
|
8113
8257
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFieldOptionsEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8114
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicFieldOptionsEditorComponent, isStandalone: true, selector: "ui-field-options-editor", inputs: { options: "options" }, outputs: { optionsChange: "optionsChange" }, ngImport: i0, template: "<ui-input-wrapper [label]=\"'form_builder.options_editor.title' | uicTranslate\">\n <div class=\"optbody\">\n <div class=\"option-row\">\n <div>{{'form_builder.options_editor.code_label' | uicTranslate}}</div>\n <div>{{'form_builder.options_editor.name_label' | uicTranslate}}</div>\n </div>\n @for (item of options; track $index) {\n <div class=\"option-row\">\n @if (true) {\n <input (blur)=\"optionsChange.emit(options)\" [(ngModel)]=\"item.id\" [placeholder]=\"'form_builder.options_editor.code_placeholder' | uicTranslate\" type=\"text\">\n }\n <input [(ngModel)]=\"item.text\" (blur)=\"updateCode(item.text,$index)\" [placeholder]=\"'form_builder.options_editor.display_name_placeholder' | uicTranslate\" type=\"text\">\n <ui-button (click)=\"dropOption($index)\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" [iconOnly]=\"true\" color=\"red\"></ui-button>\n </div>\n }\n <ui-button (click)=\"addOption()\" color=\"black\" type=\"bordered\" icon=\"ri-add-line\" size=\"s\">{{'form_builder.options_editor.add_option' | uicTranslate}}</ui-button>\n </div>\n</ui-input-wrapper>\n", styles: [".optbody{padding:10px;background-color:var(--grey-100);display:block;border-radius:10px;border:solid 1px var(--grey-200)}.option-row{display:flex;gap:3px}.option-row input{margin-bottom:8px;padding:5px;width:50%;border:solid 1px var(--grey-50);border-radius:5px}.option-row input:focus{border-color:var(--primary-500)}.option-row>div{width:50%;font-size:13px;font-weight:500;text-align:center;margin-bottom:8px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
8258
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicFieldOptionsEditorComponent, isStandalone: true, selector: "ui-field-options-editor", inputs: { options: "options" }, outputs: { optionsChange: "optionsChange" }, ngImport: i0, template: "<ui-input-wrapper [label]=\"'form_builder.options_editor.title' | uicTranslate\">\r\n <div class=\"optbody\">\r\n <div class=\"option-row\">\r\n <div>{{'form_builder.options_editor.code_label' | uicTranslate}}</div>\r\n <div>{{'form_builder.options_editor.name_label' | uicTranslate}}</div>\r\n </div>\r\n @for (item of options; track $index) {\r\n <div class=\"option-row\">\r\n @if (true) {\r\n <input (blur)=\"optionsChange.emit(options)\" [(ngModel)]=\"item.id\" [placeholder]=\"'form_builder.options_editor.code_placeholder' | uicTranslate\" type=\"text\">\r\n }\r\n <input [(ngModel)]=\"item.text\" (blur)=\"updateCode(item.text,$index)\" [placeholder]=\"'form_builder.options_editor.display_name_placeholder' | uicTranslate\" type=\"text\">\r\n <ui-button (click)=\"dropOption($index)\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" [iconOnly]=\"true\" color=\"red\"></ui-button>\r\n </div>\r\n }\r\n <ui-button (click)=\"addOption()\" color=\"black\" type=\"bordered\" icon=\"ri-add-line\" size=\"s\">{{'form_builder.options_editor.add_option' | uicTranslate}}</ui-button>\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [".optbody{padding:10px;background-color:var(--grey-100);display:block;border-radius:10px;border:solid 1px var(--grey-200)}.option-row{display:flex;gap:3px}.option-row input{margin-bottom:8px;padding:5px;width:50%;border:solid 1px var(--grey-50);border-radius:5px}.option-row input:focus{border-color:var(--primary-500)}.option-row>div{width:50%;font-size:13px;font-weight:500;text-align:center;margin-bottom:8px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
8115
8259
|
}
|
|
8116
8260
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFieldOptionsEditorComponent, decorators: [{
|
|
8117
8261
|
type: Component,
|
|
8118
|
-
args: [{ selector: 'ui-field-options-editor', imports: [FormsModule, UicButtonComponent, InputWrapperComponent, UicTranslatePipe], template: "<ui-input-wrapper [label]=\"'form_builder.options_editor.title' | uicTranslate\">\n <div class=\"optbody\">\n <div class=\"option-row\">\n <div>{{'form_builder.options_editor.code_label' | uicTranslate}}</div>\n <div>{{'form_builder.options_editor.name_label' | uicTranslate}}</div>\n </div>\n @for (item of options; track $index) {\n <div class=\"option-row\">\n @if (true) {\n <input (blur)=\"optionsChange.emit(options)\" [(ngModel)]=\"item.id\" [placeholder]=\"'form_builder.options_editor.code_placeholder' | uicTranslate\" type=\"text\">\n }\n <input [(ngModel)]=\"item.text\" (blur)=\"updateCode(item.text,$index)\" [placeholder]=\"'form_builder.options_editor.display_name_placeholder' | uicTranslate\" type=\"text\">\n <ui-button (click)=\"dropOption($index)\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" [iconOnly]=\"true\" color=\"red\"></ui-button>\n </div>\n }\n <ui-button (click)=\"addOption()\" color=\"black\" type=\"bordered\" icon=\"ri-add-line\" size=\"s\">{{'form_builder.options_editor.add_option' | uicTranslate}}</ui-button>\n </div>\n</ui-input-wrapper>\n", styles: [".optbody{padding:10px;background-color:var(--grey-100);display:block;border-radius:10px;border:solid 1px var(--grey-200)}.option-row{display:flex;gap:3px}.option-row input{margin-bottom:8px;padding:5px;width:50%;border:solid 1px var(--grey-50);border-radius:5px}.option-row input:focus{border-color:var(--primary-500)}.option-row>div{width:50%;font-size:13px;font-weight:500;text-align:center;margin-bottom:8px}\n"] }]
|
|
8262
|
+
args: [{ selector: 'ui-field-options-editor', imports: [FormsModule, UicButtonComponent, InputWrapperComponent, UicTranslatePipe], template: "<ui-input-wrapper [label]=\"'form_builder.options_editor.title' | uicTranslate\">\r\n <div class=\"optbody\">\r\n <div class=\"option-row\">\r\n <div>{{'form_builder.options_editor.code_label' | uicTranslate}}</div>\r\n <div>{{'form_builder.options_editor.name_label' | uicTranslate}}</div>\r\n </div>\r\n @for (item of options; track $index) {\r\n <div class=\"option-row\">\r\n @if (true) {\r\n <input (blur)=\"optionsChange.emit(options)\" [(ngModel)]=\"item.id\" [placeholder]=\"'form_builder.options_editor.code_placeholder' | uicTranslate\" type=\"text\">\r\n }\r\n <input [(ngModel)]=\"item.text\" (blur)=\"updateCode(item.text,$index)\" [placeholder]=\"'form_builder.options_editor.display_name_placeholder' | uicTranslate\" type=\"text\">\r\n <ui-button (click)=\"dropOption($index)\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" [iconOnly]=\"true\" color=\"red\"></ui-button>\r\n </div>\r\n }\r\n <ui-button (click)=\"addOption()\" color=\"black\" type=\"bordered\" icon=\"ri-add-line\" size=\"s\">{{'form_builder.options_editor.add_option' | uicTranslate}}</ui-button>\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [".optbody{padding:10px;background-color:var(--grey-100);display:block;border-radius:10px;border:solid 1px var(--grey-200)}.option-row{display:flex;gap:3px}.option-row input{margin-bottom:8px;padding:5px;width:50%;border:solid 1px var(--grey-50);border-radius:5px}.option-row input:focus{border-color:var(--primary-500)}.option-row>div{width:50%;font-size:13px;font-weight:500;text-align:center;margin-bottom:8px}\n"] }]
|
|
8119
8263
|
}], propDecorators: { optionsChange: [{
|
|
8120
8264
|
type: Output
|
|
8121
8265
|
}], options: [{
|
|
@@ -8273,7 +8417,7 @@ class FieldEditorComponent {
|
|
|
8273
8417
|
}));
|
|
8274
8418
|
}
|
|
8275
8419
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FieldEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8276
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FieldEditorComponent, isStandalone: true, selector: "lib-field-editor", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fieldChange: "fieldChange" }, ngImport: i0, template: "<div class=\"props-title\">{{'form_builder.field_editor.basic' | uicTranslate}} <i (click)=\"toggleSection('basic')\" class=\"{{hiddenSections().includes('basic') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('basic')\">\n <ui-form-wrapper\n [fields]=\"requiredFields\" \n [initialValues]=\"initialValues()\"\n [cols]=\"1\" \n (formChange)=\"updateFieldValues($event)\">\n </ui-form-wrapper>\n @if (hasOptions()) {\n <ui-field-options-editor [options]=\"localField().options ?? []\" (optionsChange)=\"updateOptions($event)\"></ui-field-options-editor>\n }\n</div>\n\n<div class=\"props-title\">{{'form_builder.field_editor.advanced' | uicTranslate}} <i (click)=\"toggleSection('advanced')\" class=\"{{hiddenSections().includes('advanced') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('advanced')\">\n <ui-form-wrapper\n [fields]=\"advancedFields()\" \n [initialValues]=\"initialValues()\"\n [cols]=\"1\" \n (formChange)=\"updateFieldValues($event)\">\n </ui-form-wrapper>\n</div>\n\n<div class=\"props-title\">{{'form_builder.field_editor.style' | uicTranslate}} <i (click)=\"toggleSection('style')\" class=\"{{hiddenSections().includes('style') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('style')\">\n <ui-form-wrapper\n [fields]=\"styleFields()\" \n [initialValues]=\"initialValues()\"\n [cols]=\"1\" \n (formChange)=\"updateFieldValues($event)\"> \n </ui-form-wrapper>\n</div>\n\n<div class=\"props-title\">{{'form_builder.field_editor.dependency_title' | uicTranslate}} <i (click)=\"toggleSection('dependency')\" class=\"{{hiddenSections().includes('dependency') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('dependency')\">\n @if (localField().visibilityRules ) {\n <p>{{'form_builder.field_editor.dependency_description' | uicTranslate}}</p>\n <ui-form-wrapper\n [fields]=\"branchFields\" \n [initialValues]=\"branchInitialValues()\"\n [externalData]=\"options()\"\n [cols]=\"1\" \n (formChange)=\"updateRuleValue($event)\">\n </ui-form-wrapper>\n <ui-button color=\"black\" size=\"s\" (click)=\"removeRule()\">{{'form_builder.field_editor.remove_relation' | uicTranslate}}</ui-button>\n }@else {\n <ui-button color=\"black\" size=\"s\" (click)=\"addRule()\">{{'form_builder.field_editor.add_relation' | uicTranslate}}</ui-button>\n }\n</div>", styles: [".hidden{display:none}.props-title{font-size:14px;font-weight:600;margin-bottom:8px;background:var(--grey-200);padding:5px;border-radius:5px;display:flex;justify-content:space-between}.props-title i{cursor:pointer}.props-inputs{padding-left:20px;margin-bottom:10px}p{font-size:14px;margin:10px 0;color:var(--yellow-800)}\n"], dependencies: [{ kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "loading", "disabled", "showButtons", "fillSelects", "initialValues"], outputs: ["formSubmit", "formChange"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: UicFieldOptionsEditorComponent, selector: "ui-field-options-editor", inputs: ["options"], outputs: ["optionsChange"] }] });
|
|
8420
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FieldEditorComponent, isStandalone: true, selector: "lib-field-editor", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fieldChange: "fieldChange" }, ngImport: i0, template: "<div class=\"props-title\">{{'form_builder.field_editor.basic' | uicTranslate}} <i (click)=\"toggleSection('basic')\" class=\"{{hiddenSections().includes('basic') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\r\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('basic')\">\r\n <ui-form-wrapper\r\n [fields]=\"requiredFields\" \r\n [initialValues]=\"initialValues()\"\r\n [cols]=\"1\" \r\n (formChange)=\"updateFieldValues($event)\">\r\n </ui-form-wrapper>\r\n @if (hasOptions()) {\r\n <ui-field-options-editor [options]=\"localField().options ?? []\" (optionsChange)=\"updateOptions($event)\"></ui-field-options-editor>\r\n }\r\n</div>\r\n\r\n<div class=\"props-title\">{{'form_builder.field_editor.advanced' | uicTranslate}} <i (click)=\"toggleSection('advanced')\" class=\"{{hiddenSections().includes('advanced') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\r\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('advanced')\">\r\n <ui-form-wrapper\r\n [fields]=\"advancedFields()\" \r\n [initialValues]=\"initialValues()\"\r\n [cols]=\"1\" \r\n (formChange)=\"updateFieldValues($event)\">\r\n </ui-form-wrapper>\r\n</div>\r\n\r\n<div class=\"props-title\">{{'form_builder.field_editor.style' | uicTranslate}} <i (click)=\"toggleSection('style')\" class=\"{{hiddenSections().includes('style') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\r\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('style')\">\r\n <ui-form-wrapper\r\n [fields]=\"styleFields()\" \r\n [initialValues]=\"initialValues()\"\r\n [cols]=\"1\" \r\n (formChange)=\"updateFieldValues($event)\"> \r\n </ui-form-wrapper>\r\n</div>\r\n\r\n<div class=\"props-title\">{{'form_builder.field_editor.dependency_title' | uicTranslate}} <i (click)=\"toggleSection('dependency')\" class=\"{{hiddenSections().includes('dependency') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\r\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('dependency')\">\r\n @if (localField().visibilityRules ) {\r\n <p>{{'form_builder.field_editor.dependency_description' | uicTranslate}}</p>\r\n <ui-form-wrapper\r\n [fields]=\"branchFields\" \r\n [initialValues]=\"branchInitialValues()\"\r\n [externalData]=\"options()\"\r\n [cols]=\"1\" \r\n (formChange)=\"updateRuleValue($event)\">\r\n </ui-form-wrapper>\r\n <ui-button color=\"black\" size=\"s\" (click)=\"removeRule()\">{{'form_builder.field_editor.remove_relation' | uicTranslate}}</ui-button>\r\n }@else {\r\n <ui-button color=\"black\" size=\"s\" (click)=\"addRule()\">{{'form_builder.field_editor.add_relation' | uicTranslate}}</ui-button>\r\n }\r\n</div>", styles: [".hidden{display:none}.props-title{font-size:14px;font-weight:600;margin-bottom:8px;background:var(--grey-200);padding:5px;border-radius:5px;display:flex;justify-content:space-between}.props-title i{cursor:pointer}.props-inputs{padding-left:20px;margin-bottom:10px}p{font-size:14px;margin:10px 0;color:var(--yellow-800)}\n"], dependencies: [{ kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "loading", "disabled", "showButtons", "fillSelects", "initialValues"], outputs: ["formSubmit", "formChange"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: UicFieldOptionsEditorComponent, selector: "ui-field-options-editor", inputs: ["options"], outputs: ["optionsChange"] }] });
|
|
8277
8421
|
}
|
|
8278
8422
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FieldEditorComponent, decorators: [{
|
|
8279
8423
|
type: Component,
|
|
@@ -8282,7 +8426,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
8282
8426
|
UicButtonComponent,
|
|
8283
8427
|
UicTranslatePipe,
|
|
8284
8428
|
UicFieldOptionsEditorComponent
|
|
8285
|
-
], template: "<div class=\"props-title\">{{'form_builder.field_editor.basic' | uicTranslate}} <i (click)=\"toggleSection('basic')\" class=\"{{hiddenSections().includes('basic') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('basic')\">\n <ui-form-wrapper\n [fields]=\"requiredFields\" \n [initialValues]=\"initialValues()\"\n [cols]=\"1\" \n (formChange)=\"updateFieldValues($event)\">\n </ui-form-wrapper>\n @if (hasOptions()) {\n <ui-field-options-editor [options]=\"localField().options ?? []\" (optionsChange)=\"updateOptions($event)\"></ui-field-options-editor>\n }\n</div>\n\n<div class=\"props-title\">{{'form_builder.field_editor.advanced' | uicTranslate}} <i (click)=\"toggleSection('advanced')\" class=\"{{hiddenSections().includes('advanced') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('advanced')\">\n <ui-form-wrapper\n [fields]=\"advancedFields()\" \n [initialValues]=\"initialValues()\"\n [cols]=\"1\" \n (formChange)=\"updateFieldValues($event)\">\n </ui-form-wrapper>\n</div>\n\n<div class=\"props-title\">{{'form_builder.field_editor.style' | uicTranslate}} <i (click)=\"toggleSection('style')\" class=\"{{hiddenSections().includes('style') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('style')\">\n <ui-form-wrapper\n [fields]=\"styleFields()\" \n [initialValues]=\"initialValues()\"\n [cols]=\"1\" \n (formChange)=\"updateFieldValues($event)\"> \n </ui-form-wrapper>\n</div>\n\n<div class=\"props-title\">{{'form_builder.field_editor.dependency_title' | uicTranslate}} <i (click)=\"toggleSection('dependency')\" class=\"{{hiddenSections().includes('dependency') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('dependency')\">\n @if (localField().visibilityRules ) {\n <p>{{'form_builder.field_editor.dependency_description' | uicTranslate}}</p>\n <ui-form-wrapper\n [fields]=\"branchFields\" \n [initialValues]=\"branchInitialValues()\"\n [externalData]=\"options()\"\n [cols]=\"1\" \n (formChange)=\"updateRuleValue($event)\">\n </ui-form-wrapper>\n <ui-button color=\"black\" size=\"s\" (click)=\"removeRule()\">{{'form_builder.field_editor.remove_relation' | uicTranslate}}</ui-button>\n }@else {\n <ui-button color=\"black\" size=\"s\" (click)=\"addRule()\">{{'form_builder.field_editor.add_relation' | uicTranslate}}</ui-button>\n }\n</div>", styles: [".hidden{display:none}.props-title{font-size:14px;font-weight:600;margin-bottom:8px;background:var(--grey-200);padding:5px;border-radius:5px;display:flex;justify-content:space-between}.props-title i{cursor:pointer}.props-inputs{padding-left:20px;margin-bottom:10px}p{font-size:14px;margin:10px 0;color:var(--yellow-800)}\n"] }]
|
|
8429
|
+
], template: "<div class=\"props-title\">{{'form_builder.field_editor.basic' | uicTranslate}} <i (click)=\"toggleSection('basic')\" class=\"{{hiddenSections().includes('basic') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\r\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('basic')\">\r\n <ui-form-wrapper\r\n [fields]=\"requiredFields\" \r\n [initialValues]=\"initialValues()\"\r\n [cols]=\"1\" \r\n (formChange)=\"updateFieldValues($event)\">\r\n </ui-form-wrapper>\r\n @if (hasOptions()) {\r\n <ui-field-options-editor [options]=\"localField().options ?? []\" (optionsChange)=\"updateOptions($event)\"></ui-field-options-editor>\r\n }\r\n</div>\r\n\r\n<div class=\"props-title\">{{'form_builder.field_editor.advanced' | uicTranslate}} <i (click)=\"toggleSection('advanced')\" class=\"{{hiddenSections().includes('advanced') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\r\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('advanced')\">\r\n <ui-form-wrapper\r\n [fields]=\"advancedFields()\" \r\n [initialValues]=\"initialValues()\"\r\n [cols]=\"1\" \r\n (formChange)=\"updateFieldValues($event)\">\r\n </ui-form-wrapper>\r\n</div>\r\n\r\n<div class=\"props-title\">{{'form_builder.field_editor.style' | uicTranslate}} <i (click)=\"toggleSection('style')\" class=\"{{hiddenSections().includes('style') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\r\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('style')\">\r\n <ui-form-wrapper\r\n [fields]=\"styleFields()\" \r\n [initialValues]=\"initialValues()\"\r\n [cols]=\"1\" \r\n (formChange)=\"updateFieldValues($event)\"> \r\n </ui-form-wrapper>\r\n</div>\r\n\r\n<div class=\"props-title\">{{'form_builder.field_editor.dependency_title' | uicTranslate}} <i (click)=\"toggleSection('dependency')\" class=\"{{hiddenSections().includes('dependency') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\r\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('dependency')\">\r\n @if (localField().visibilityRules ) {\r\n <p>{{'form_builder.field_editor.dependency_description' | uicTranslate}}</p>\r\n <ui-form-wrapper\r\n [fields]=\"branchFields\" \r\n [initialValues]=\"branchInitialValues()\"\r\n [externalData]=\"options()\"\r\n [cols]=\"1\" \r\n (formChange)=\"updateRuleValue($event)\">\r\n </ui-form-wrapper>\r\n <ui-button color=\"black\" size=\"s\" (click)=\"removeRule()\">{{'form_builder.field_editor.remove_relation' | uicTranslate}}</ui-button>\r\n }@else {\r\n <ui-button color=\"black\" size=\"s\" (click)=\"addRule()\">{{'form_builder.field_editor.add_relation' | uicTranslate}}</ui-button>\r\n }\r\n</div>", styles: [".hidden{display:none}.props-title{font-size:14px;font-weight:600;margin-bottom:8px;background:var(--grey-200);padding:5px;border-radius:5px;display:flex;justify-content:space-between}.props-title i{cursor:pointer}.props-inputs{padding-left:20px;margin-bottom:10px}p{font-size:14px;margin:10px 0;color:var(--yellow-800)}\n"] }]
|
|
8286
8430
|
}], ctorParameters: () => [] });
|
|
8287
8431
|
|
|
8288
8432
|
class FieldTypeSelectorComponent {
|
|
@@ -8466,25 +8610,250 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
8466
8610
|
], template: "<div class=\"formeditor\">\r\n <div class=\"formeditor-header\">\r\n <div style=\"flex: 1 1;\">\r\n Creando nuevo formulario\r\n </div>\r\n <ui-button color=\"black\" type=\"bordered\" icon=\"ri-eye-line\" [text]=\"'form_builder.preview_form' | uicTranslate\" (click)=\"printForm()\"></ui-button>\r\n <ui-button color=\"black\" icon=\"ri-check-line\" [text]=\"'form_builder.submit_form' | uicTranslate\" (click)=\"submitForm()\"></ui-button>\r\n </div>\r\n <div class=\"formeditor-body\">\r\n\r\n <!-- BLOCKS -->\r\n <div class=\"formeditor-overflow\">\r\n <div class=\"formeditor-workarea\">\r\n <ui-input label=\"Columnas\">\r\n <input [(ngModel)]=\"cols\">\r\n </ui-input>\r\n @for (block of editableBlocks(); track block.id; let i = $index) {\r\n <lib-block-editor \r\n [block]=\"block\"\r\n [selectedFieldId]=\"selectedField()?.id ?? null\"\r\n (blockChange)=\"onBlockChange(i, $event)\"\r\n (notifySelectedField)=\"selectedField.set($event)\"\r\n (deleteBlock)=\"deleteBlock(block.id)\">\r\n </lib-block-editor>\r\n }\r\n <ui-button type=\"bordered\" icon=\"ri-add-line\" color=\"black\" [text]=\"'form_builder.add_block' | uicTranslate\" (click)=\"addBlock()\"></ui-button>\r\n </div>\r\n </div>\r\n <!-- PROPERTIES -->\r\n <div class=\"formeditor-properties\">\r\n <h3>Propiedades</h3>\r\n <div class=\"formeditor-properties-form\">\r\n @if (selectedField()) {\r\n <lib-field-editor \r\n [config]=\"selectedField()!\"\r\n [options]=\"dependencyOptions()\"\r\n (fieldChange)=\"onFieldChange($event)\">\r\n </lib-field-editor>\r\n }@else{\r\n <div class=\"no-selected-field\">\r\n <i class=\"ri-edit-box-line\"></i>\r\n <p>{{'form_builder.select_field_to_edit' | uicTranslate}}</p>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".formeditor{display:flex;flex-direction:column;overflow:hidden;background-color:var(--grey-100);border:solid 1px var(--grey-300);border-radius:5px;max-height:500px}.formeditor-header{background-color:#fff;padding:5px 10px;align-items:center;display:flex;gap:10px;border-bottom:solid 1px var(--grey-300)}.formeditor-body{display:flex;gap:10px;overflow:hidden;padding:10px}.formeditor-overflow{padding:5px;flex:1 1;overflow:auto}.formeditor-workarea{display:flex;flex-direction:column;gap:15px;height:fit-content}.formeditor-properties{width:250px;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);border-radius:5px}.formeditor-properties>h3{padding:10px;border-bottom:solid 1px var(--grey-300)}.formeditor-properties-form{padding:10px;overflow:auto}.no-selected-field{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px 0;font-size:13px;gap:15px;text-align:center;color:var(--grey-400)}.no-selected-field i{font-size:24px}\n"] }]
|
|
8467
8611
|
}] });
|
|
8468
8612
|
|
|
8613
|
+
class RuleDefinirionComponent {
|
|
8614
|
+
data;
|
|
8615
|
+
newRule = false;
|
|
8616
|
+
fields;
|
|
8617
|
+
conditions = [];
|
|
8618
|
+
searchTerm = '';
|
|
8619
|
+
currentPage = 1;
|
|
8620
|
+
pageSize = 5;
|
|
8621
|
+
translate = inject(UicTranslateService);
|
|
8622
|
+
ref = inject(UiModalRef);
|
|
8623
|
+
languageSubscription;
|
|
8624
|
+
constructor(data) {
|
|
8625
|
+
this.data = data;
|
|
8626
|
+
this.conditions = data.conditions;
|
|
8627
|
+
this.fields = this.buildFields();
|
|
8628
|
+
this.languageSubscription = this.translate.language$.subscribe(() => {
|
|
8629
|
+
this.fields = this.buildFields();
|
|
8630
|
+
});
|
|
8631
|
+
}
|
|
8632
|
+
ngOnDestroy() {
|
|
8633
|
+
this.languageSubscription.unsubscribe();
|
|
8634
|
+
}
|
|
8635
|
+
get filteredConditions() {
|
|
8636
|
+
const normalizedSearch = this.normalizeText(this.searchTerm);
|
|
8637
|
+
if (!normalizedSearch) {
|
|
8638
|
+
return this.conditions;
|
|
8639
|
+
}
|
|
8640
|
+
return this.conditions.filter(condition => this.normalizeText(condition.description).includes(normalizedSearch) ||
|
|
8641
|
+
this.normalizeText(condition.fieldName).includes(normalizedSearch) ||
|
|
8642
|
+
this.normalizeText(condition.fieldCode).includes(normalizedSearch) ||
|
|
8643
|
+
this.normalizeText(condition.operatorName).includes(normalizedSearch) ||
|
|
8644
|
+
this.normalizeText(condition.operatorCode).includes(normalizedSearch) ||
|
|
8645
|
+
this.normalizeText(condition.value).includes(normalizedSearch));
|
|
8646
|
+
}
|
|
8647
|
+
get paginatedConditions() {
|
|
8648
|
+
const start = (this.currentPage - 1) * this.pageSize;
|
|
8649
|
+
return this.filteredConditions.slice(start, start + this.pageSize);
|
|
8650
|
+
}
|
|
8651
|
+
get totalPages() {
|
|
8652
|
+
return Math.max(1, Math.ceil(this.filteredConditions.length / this.pageSize));
|
|
8653
|
+
}
|
|
8654
|
+
get canGoToPreviousPage() {
|
|
8655
|
+
return this.currentPage > 1;
|
|
8656
|
+
}
|
|
8657
|
+
get canGoToNextPage() {
|
|
8658
|
+
return this.currentPage < this.totalPages;
|
|
8659
|
+
}
|
|
8660
|
+
onSearchTermChange() {
|
|
8661
|
+
this.currentPage = 1;
|
|
8662
|
+
}
|
|
8663
|
+
goToPreviousPage() {
|
|
8664
|
+
if (!this.canGoToPreviousPage) {
|
|
8665
|
+
return;
|
|
8666
|
+
}
|
|
8667
|
+
this.currentPage -= 1;
|
|
8668
|
+
}
|
|
8669
|
+
goToNextPage() {
|
|
8670
|
+
if (!this.canGoToNextPage) {
|
|
8671
|
+
return;
|
|
8672
|
+
}
|
|
8673
|
+
this.currentPage += 1;
|
|
8674
|
+
}
|
|
8675
|
+
createAndSelectRule(fr) {
|
|
8676
|
+
if (fr.result && fr.form) {
|
|
8677
|
+
const fieldCode = fr.form['fieldCode'];
|
|
8678
|
+
const operatoCode = fr.form['operatorCode'];
|
|
8679
|
+
const nf = {
|
|
8680
|
+
id: 0,
|
|
8681
|
+
description: fr.form['description'],
|
|
8682
|
+
fieldCode: fieldCode,
|
|
8683
|
+
fieldName: this.data.conditionFields.find(f => f.id === fieldCode)?.text ?? '',
|
|
8684
|
+
operatorCode: operatoCode,
|
|
8685
|
+
operatorName: this.data.conditionOperators.find(o => o.id === operatoCode)?.text ?? '',
|
|
8686
|
+
value: fr.form['value']
|
|
8687
|
+
};
|
|
8688
|
+
this.ref.closeFloating(nf);
|
|
8689
|
+
}
|
|
8690
|
+
}
|
|
8691
|
+
select(condition) {
|
|
8692
|
+
this.ref.closeFloating(condition);
|
|
8693
|
+
}
|
|
8694
|
+
highlightSearch(value) {
|
|
8695
|
+
const text = String(value ?? '');
|
|
8696
|
+
const query = this.searchTerm.trim();
|
|
8697
|
+
if (!query) {
|
|
8698
|
+
return this.escapeHtml(text);
|
|
8699
|
+
}
|
|
8700
|
+
const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
|
8701
|
+
const regex = new RegExp(`(${escapedQuery})`, 'gi');
|
|
8702
|
+
return this.escapeHtml(text).replace(regex, '<mark>$1</mark>');
|
|
8703
|
+
}
|
|
8704
|
+
buildFields() {
|
|
8705
|
+
return [
|
|
8706
|
+
{
|
|
8707
|
+
name: 'description',
|
|
8708
|
+
label: this.translate.translate('rule_builder.definition.form.description'),
|
|
8709
|
+
type: 'text',
|
|
8710
|
+
colSpan: 3
|
|
8711
|
+
},
|
|
8712
|
+
{
|
|
8713
|
+
name: 'fieldCode',
|
|
8714
|
+
label: this.translate.translate('rule_builder.definition.form.field'),
|
|
8715
|
+
type: 'select',
|
|
8716
|
+
options: this.data.conditionFields
|
|
8717
|
+
},
|
|
8718
|
+
{
|
|
8719
|
+
name: 'operatorCode',
|
|
8720
|
+
label: this.translate.translate('rule_builder.definition.form.operator'),
|
|
8721
|
+
type: 'select',
|
|
8722
|
+
options: this.data.conditionOperators
|
|
8723
|
+
},
|
|
8724
|
+
{
|
|
8725
|
+
name: 'value',
|
|
8726
|
+
label: this.translate.translate('rule_builder.definition.form.value'),
|
|
8727
|
+
type: 'text',
|
|
8728
|
+
}
|
|
8729
|
+
];
|
|
8730
|
+
}
|
|
8731
|
+
normalizeText(value) {
|
|
8732
|
+
return String(value ?? '')
|
|
8733
|
+
.normalize('NFD')
|
|
8734
|
+
.replace(/[\u0300-\u036f]/g, '')
|
|
8735
|
+
.trim()
|
|
8736
|
+
.toLowerCase();
|
|
8737
|
+
}
|
|
8738
|
+
escapeHtml(value) {
|
|
8739
|
+
return value
|
|
8740
|
+
.replace(/&/g, '&')
|
|
8741
|
+
.replace(/</g, '<')
|
|
8742
|
+
.replace(/>/g, '>')
|
|
8743
|
+
.replace(/"/g, '"')
|
|
8744
|
+
.replace(/'/g, ''');
|
|
8745
|
+
}
|
|
8746
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RuleDefinirionComponent, deps: [{ token: MODAL_DATA }], target: i0.ɵɵFactoryTarget.Component });
|
|
8747
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: RuleDefinirionComponent, isStandalone: true, selector: "lib-rule-definirion", ngImport: i0, template: "\r\n@if (newRule) {\r\n <ui-form-wrapper #formWrapper (formSubmit)=\"createAndSelectRule($event)\" [fields]=\"fields\" [cols]=\"3\"></ui-form-wrapper>\r\n <div class=\"condition-btns\">\r\n <ui-button icon=\"ri-arrow-left-line\" (click)=\"newRule = false\" color=\"black\" type=\"bordered\">{{ 'rule_builder.definition.cancel_and_back' | uicTranslate }}</ui-button>\r\n <ui-button (click)=\"formWrapper.submit()\" icon=\"ri-check-line\" color=\"black\">{{ 'rule_builder.definition.create_and_select' | uicTranslate }}</ui-button>\r\n </div>\r\n} @else {\r\n <div class=\"condition-searcher\">\r\n <ui-input>\r\n <input [(ngModel)]=\"searchTerm\" (ngModelChange)=\"onSearchTermChange()\" [placeholder]=\"'rule_builder.definition.search_placeholder' | uicTranslate\" type=\"text\">\r\n </ui-input>\r\n <ui-button (click)=\"newRule = true\" color=\"black\">{{ 'rule_builder.definition.new_rule' | uicTranslate }}</ui-button>\r\n </div>\r\n\r\n @if (paginatedConditions.length > 0) {\r\n @for (condition of paginatedConditions; track $index) {\r\n <div class=\"condition\">\r\n <i class=\"ri-align-item-horizontal-center-line\"></i>\r\n <div style=\"flex: 1 1;\">\r\n <div class=\"condition-title\"><span [innerHTML]=\"highlightSearch(condition.description)\"></span>:</div>\r\n <div class=\"condition-body\">\r\n <span class=\"condition-field\" [innerHTML]=\"highlightSearch(condition.fieldName)\"></span>\r\n <span class=\"condition-operator\" [innerHTML]=\"highlightSearch(condition.operatorName)\"></span>\r\n <span class=\"condition-value\" [innerHTML]=\"highlightSearch(condition.value)\"></span>\r\n </div>\r\n </div>\r\n <ui-button (click)=\"select(condition)\" color=\"primary\" size=\"s\" type=\"bordered\">{{ 'common.select' | uicTranslate }}</ui-button>\r\n </div>\r\n }\r\n } @else {\r\n <div class=\"condition\">{{ 'rule_builder.definition.no_results' | uicTranslate }}</div>\r\n }\r\n\r\n <div class=\"condition-pagination\">\r\n <ui-button [disabled]=\"!canGoToPreviousPage\" (click)=\"goToPreviousPage()\" color=\"black\" size=\"s\" type=\"bordered\">{{ 'rule_builder.definition.previous' | uicTranslate }}</ui-button>\r\n <div><b>{{ currentPage }}</b> / {{ totalPages }}</div>\r\n <ui-button [disabled]=\"!canGoToNextPage\" (click)=\"goToNextPage()\" color=\"black\" size=\"s\" type=\"bordered\">{{ 'rule_builder.definition.next' | uicTranslate }}</ui-button>\r\n </div>\r\n}\r\n", styles: [".condition{border:solid 1px var(--grey-300);border-radius:10px;background-color:var(--grey-50);padding:6px;margin-bottom:4px;display:flex;align-items:center;gap:10px}.condition i{color:var(--blue-600)}.condition-title{font-size:14px;font-weight:500;line-height:16px}.condition-body{color:var(--grey-500);display:flex;gap:5px;font-size:12px}.condition-searcher{display:flex;gap:25px;margin-bottom:10px}.condition-pagination{margin-top:15px;display:flex;font-size:14px;align-items:center;justify-content:space-between}.condition-btns{padding-top:10px;border-top:solid 1px var(--grey-200);display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "loading", "disabled", "showButtons", "fillSelects", "initialValues"], outputs: ["formSubmit", "formChange"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
8748
|
+
}
|
|
8749
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RuleDefinirionComponent, decorators: [{
|
|
8750
|
+
type: Component,
|
|
8751
|
+
args: [{ selector: 'lib-rule-definirion', imports: [
|
|
8752
|
+
FormsModule,
|
|
8753
|
+
UicFormWrapperComponent,
|
|
8754
|
+
UicInputComponent,
|
|
8755
|
+
UicButtonComponent,
|
|
8756
|
+
UicTranslatePipe
|
|
8757
|
+
], template: "\r\n@if (newRule) {\r\n <ui-form-wrapper #formWrapper (formSubmit)=\"createAndSelectRule($event)\" [fields]=\"fields\" [cols]=\"3\"></ui-form-wrapper>\r\n <div class=\"condition-btns\">\r\n <ui-button icon=\"ri-arrow-left-line\" (click)=\"newRule = false\" color=\"black\" type=\"bordered\">{{ 'rule_builder.definition.cancel_and_back' | uicTranslate }}</ui-button>\r\n <ui-button (click)=\"formWrapper.submit()\" icon=\"ri-check-line\" color=\"black\">{{ 'rule_builder.definition.create_and_select' | uicTranslate }}</ui-button>\r\n </div>\r\n} @else {\r\n <div class=\"condition-searcher\">\r\n <ui-input>\r\n <input [(ngModel)]=\"searchTerm\" (ngModelChange)=\"onSearchTermChange()\" [placeholder]=\"'rule_builder.definition.search_placeholder' | uicTranslate\" type=\"text\">\r\n </ui-input>\r\n <ui-button (click)=\"newRule = true\" color=\"black\">{{ 'rule_builder.definition.new_rule' | uicTranslate }}</ui-button>\r\n </div>\r\n\r\n @if (paginatedConditions.length > 0) {\r\n @for (condition of paginatedConditions; track $index) {\r\n <div class=\"condition\">\r\n <i class=\"ri-align-item-horizontal-center-line\"></i>\r\n <div style=\"flex: 1 1;\">\r\n <div class=\"condition-title\"><span [innerHTML]=\"highlightSearch(condition.description)\"></span>:</div>\r\n <div class=\"condition-body\">\r\n <span class=\"condition-field\" [innerHTML]=\"highlightSearch(condition.fieldName)\"></span>\r\n <span class=\"condition-operator\" [innerHTML]=\"highlightSearch(condition.operatorName)\"></span>\r\n <span class=\"condition-value\" [innerHTML]=\"highlightSearch(condition.value)\"></span>\r\n </div>\r\n </div>\r\n <ui-button (click)=\"select(condition)\" color=\"primary\" size=\"s\" type=\"bordered\">{{ 'common.select' | uicTranslate }}</ui-button>\r\n </div>\r\n }\r\n } @else {\r\n <div class=\"condition\">{{ 'rule_builder.definition.no_results' | uicTranslate }}</div>\r\n }\r\n\r\n <div class=\"condition-pagination\">\r\n <ui-button [disabled]=\"!canGoToPreviousPage\" (click)=\"goToPreviousPage()\" color=\"black\" size=\"s\" type=\"bordered\">{{ 'rule_builder.definition.previous' | uicTranslate }}</ui-button>\r\n <div><b>{{ currentPage }}</b> / {{ totalPages }}</div>\r\n <ui-button [disabled]=\"!canGoToNextPage\" (click)=\"goToNextPage()\" color=\"black\" size=\"s\" type=\"bordered\">{{ 'rule_builder.definition.next' | uicTranslate }}</ui-button>\r\n </div>\r\n}\r\n", styles: [".condition{border:solid 1px var(--grey-300);border-radius:10px;background-color:var(--grey-50);padding:6px;margin-bottom:4px;display:flex;align-items:center;gap:10px}.condition i{color:var(--blue-600)}.condition-title{font-size:14px;font-weight:500;line-height:16px}.condition-body{color:var(--grey-500);display:flex;gap:5px;font-size:12px}.condition-searcher{display:flex;gap:25px;margin-bottom:10px}.condition-pagination{margin-top:15px;display:flex;font-size:14px;align-items:center;justify-content:space-between}.condition-btns{padding-top:10px;border-top:solid 1px var(--grey-200);display:flex;justify-content:space-between}\n"] }]
|
|
8758
|
+
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
8759
|
+
type: Inject,
|
|
8760
|
+
args: [MODAL_DATA]
|
|
8761
|
+
}] }] });
|
|
8762
|
+
|
|
8469
8763
|
class UicRuleBuilderComponent {
|
|
8764
|
+
conditions = [
|
|
8765
|
+
{
|
|
8766
|
+
id: 1,
|
|
8767
|
+
description: 'Mayores de edad',
|
|
8768
|
+
fieldName: 'Edad',
|
|
8769
|
+
fieldCode: 'age',
|
|
8770
|
+
operatorCode: 'greater_than',
|
|
8771
|
+
operatorName: 'Mayor que',
|
|
8772
|
+
value: '18',
|
|
8773
|
+
},
|
|
8774
|
+
{
|
|
8775
|
+
id: 2,
|
|
8776
|
+
description: 'Menores de edad',
|
|
8777
|
+
fieldName: 'Edad',
|
|
8778
|
+
fieldCode: 'age',
|
|
8779
|
+
operatorCode: 'less_than',
|
|
8780
|
+
operatorName: 'Menor que',
|
|
8781
|
+
value: '18',
|
|
8782
|
+
},
|
|
8783
|
+
{
|
|
8784
|
+
id: 3,
|
|
8785
|
+
description: 'Demo 3',
|
|
8786
|
+
fieldName: 'Edad',
|
|
8787
|
+
fieldCode: 'age',
|
|
8788
|
+
operatorCode: 'less_than',
|
|
8789
|
+
operatorName: 'Menor que',
|
|
8790
|
+
value: '18',
|
|
8791
|
+
},
|
|
8792
|
+
{
|
|
8793
|
+
id: 4,
|
|
8794
|
+
description: 'Demo 4',
|
|
8795
|
+
fieldName: 'Edad',
|
|
8796
|
+
fieldCode: 'age',
|
|
8797
|
+
operatorCode: 'less_than',
|
|
8798
|
+
operatorName: 'Menor que',
|
|
8799
|
+
value: '18',
|
|
8800
|
+
},
|
|
8801
|
+
{
|
|
8802
|
+
id: 5,
|
|
8803
|
+
description: 'Demo 5',
|
|
8804
|
+
fieldName: 'Edad',
|
|
8805
|
+
fieldCode: 'age',
|
|
8806
|
+
operatorCode: 'less_than',
|
|
8807
|
+
operatorName: 'Menor que',
|
|
8808
|
+
value: '18',
|
|
8809
|
+
},
|
|
8810
|
+
{
|
|
8811
|
+
id: 6,
|
|
8812
|
+
description: 'Demo 6',
|
|
8813
|
+
fieldName: 'Edad',
|
|
8814
|
+
fieldCode: 'age',
|
|
8815
|
+
operatorCode: 'less_than',
|
|
8816
|
+
operatorName: 'Menor que',
|
|
8817
|
+
value: '18',
|
|
8818
|
+
},
|
|
8819
|
+
{
|
|
8820
|
+
id: 7,
|
|
8821
|
+
description: 'Demo 7',
|
|
8822
|
+
fieldName: 'Edad',
|
|
8823
|
+
fieldCode: 'age',
|
|
8824
|
+
operatorCode: 'less_than',
|
|
8825
|
+
operatorName: 'Menor que',
|
|
8826
|
+
value: '18',
|
|
8827
|
+
}
|
|
8828
|
+
];
|
|
8829
|
+
conditionOperators = [
|
|
8830
|
+
{ id: 'equal', text: 'Igual que' },
|
|
8831
|
+
{ id: 'not_equal', text: 'Distinto de' },
|
|
8832
|
+
{ id: 'greater_than', text: 'Mayor que' },
|
|
8833
|
+
{ id: 'less_than', text: 'Menor que' },
|
|
8834
|
+
];
|
|
8835
|
+
conditionFields = [
|
|
8836
|
+
{ id: 'name', text: 'Nombre' },
|
|
8837
|
+
{ id: 'age', text: 'Edad' },
|
|
8838
|
+
{ id: 'country', text: 'Pais' },
|
|
8839
|
+
];
|
|
8840
|
+
availableConditions = [];
|
|
8841
|
+
conditionLabels = {};
|
|
8842
|
+
editing = false;
|
|
8843
|
+
nextTemporalConditionId = 1;
|
|
8470
8844
|
title = '';
|
|
8471
8845
|
initValue = '';
|
|
8472
|
-
availableConditions = [
|
|
8473
|
-
{ id: 1, text: 'Rule definition 192001' },
|
|
8474
|
-
{ id: 2, text: 'Rule definition 2' },
|
|
8475
|
-
{ id: 3, text: 'Rule definition 3' },
|
|
8476
|
-
{ id: 4, text: 'Rule definition 4' },
|
|
8477
|
-
];
|
|
8478
8846
|
ruleDefinitionChange = new EventEmitter();
|
|
8479
8847
|
ruleDefinition = [];
|
|
8480
8848
|
translate = inject(UicTranslateService);
|
|
8849
|
+
modal = inject(UicModalService);
|
|
8481
8850
|
get resolvedTitle() {
|
|
8482
8851
|
return this.title || this.translate.translate('rule_builder.title');
|
|
8483
8852
|
}
|
|
8484
8853
|
ngOnInit() {
|
|
8485
|
-
this.
|
|
8486
|
-
|
|
8487
|
-
|
|
8854
|
+
this.refreshAvailableConditions();
|
|
8855
|
+
this.ruleDefinition = this.getRulesFromInitialValue();
|
|
8856
|
+
this.syncNextTemporalConditionId();
|
|
8488
8857
|
}
|
|
8489
8858
|
addRule(rules = this.ruleDefinition) {
|
|
8490
8859
|
this.appendExpression(rules, this.createConditionRule());
|
|
@@ -8509,17 +8878,54 @@ class UicRuleBuilderComponent {
|
|
|
8509
8878
|
rules.splice(idx, 1);
|
|
8510
8879
|
this.syncRuleDefinition();
|
|
8511
8880
|
}
|
|
8881
|
+
manageRules(rules, idx) {
|
|
8882
|
+
const targetRule = rules[idx];
|
|
8883
|
+
if (targetRule?.type !== 'condition') {
|
|
8884
|
+
return;
|
|
8885
|
+
}
|
|
8886
|
+
this.modal.openFloatingModal(RuleDefinirionComponent, {
|
|
8887
|
+
title: this.translate.translate('rule_builder.rules_management'),
|
|
8888
|
+
data: {
|
|
8889
|
+
conditions: this.conditions,
|
|
8890
|
+
conditionOperators: this.conditionOperators,
|
|
8891
|
+
conditionFields: this.conditionFields,
|
|
8892
|
+
},
|
|
8893
|
+
size: 'medium'
|
|
8894
|
+
}).afterClosed().subscribe(r => {
|
|
8895
|
+
if (r.status) {
|
|
8896
|
+
const condition = r.data;
|
|
8897
|
+
const conditionId = this.upsertCondition(condition);
|
|
8898
|
+
targetRule.value = conditionId;
|
|
8899
|
+
this.syncRuleDefinition();
|
|
8900
|
+
}
|
|
8901
|
+
});
|
|
8902
|
+
}
|
|
8512
8903
|
print() {
|
|
8513
8904
|
this.ruleDefinition = this.normalizeRules(this.ruleDefinition);
|
|
8514
|
-
this.
|
|
8905
|
+
this.markRulesAsSaved(this.ruleDefinition);
|
|
8906
|
+
const output = this.buildRuleOutput();
|
|
8907
|
+
this.initValue = output.definition;
|
|
8908
|
+
this.ruleDefinitionChange.emit(output);
|
|
8909
|
+
this.editing = false;
|
|
8515
8910
|
}
|
|
8516
8911
|
reset() {
|
|
8517
|
-
this.ruleDefinition =
|
|
8518
|
-
this.ruleDefinitionChange.emit(
|
|
8912
|
+
this.ruleDefinition = this.getRulesFromInitialValue();
|
|
8913
|
+
this.ruleDefinitionChange.emit(this.buildRuleOutput());
|
|
8914
|
+
this.editing = false;
|
|
8519
8915
|
}
|
|
8520
8916
|
getOutput() {
|
|
8521
8917
|
this.ruleDefinition = this.normalizeRules(this.ruleDefinition);
|
|
8522
|
-
return this.
|
|
8918
|
+
return this.buildRuleOutput();
|
|
8919
|
+
}
|
|
8920
|
+
getConditionLabel(value) {
|
|
8921
|
+
return this.resolveConditionLabel(value);
|
|
8922
|
+
}
|
|
8923
|
+
getOperatorLabel(value) {
|
|
8924
|
+
const normalizedValue = value === 'OR' ? 'OR' : 'AND';
|
|
8925
|
+
const translationKey = normalizedValue === 'AND'
|
|
8926
|
+
? 'rule_builder.operators.and'
|
|
8927
|
+
: 'rule_builder.operators.or';
|
|
8928
|
+
return this.translate.translate(translationKey);
|
|
8523
8929
|
}
|
|
8524
8930
|
appendExpression(rules, expression) {
|
|
8525
8931
|
const normalizedRules = this.normalizeRules(rules);
|
|
@@ -8532,18 +8938,19 @@ class UicRuleBuilderComponent {
|
|
|
8532
8938
|
}
|
|
8533
8939
|
syncRuleDefinition() {
|
|
8534
8940
|
this.ruleDefinition = this.normalizeRules(this.ruleDefinition);
|
|
8535
|
-
this.ruleDefinitionChange.emit(this.buildExpression(this.ruleDefinition));
|
|
8536
8941
|
}
|
|
8537
8942
|
createConditionRule() {
|
|
8538
8943
|
return {
|
|
8539
8944
|
type: 'condition',
|
|
8540
|
-
value: this.getNextConditionValue()
|
|
8945
|
+
value: this.getNextConditionValue(),
|
|
8946
|
+
unsaved: true
|
|
8541
8947
|
};
|
|
8542
8948
|
}
|
|
8543
8949
|
createGroupRule() {
|
|
8544
8950
|
return {
|
|
8545
8951
|
type: 'group',
|
|
8546
|
-
rules: [this.createConditionRule()]
|
|
8952
|
+
rules: [this.createConditionRule()],
|
|
8953
|
+
unsaved: true
|
|
8547
8954
|
};
|
|
8548
8955
|
}
|
|
8549
8956
|
getNextConditionValue() {
|
|
@@ -8624,6 +9031,21 @@ class UicRuleBuilderComponent {
|
|
|
8624
9031
|
const { rules } = this.parseTokens(tokens);
|
|
8625
9032
|
return this.normalizeRules(rules);
|
|
8626
9033
|
}
|
|
9034
|
+
getRulesFromInitialValue() {
|
|
9035
|
+
const rules = this.initValue.trim()
|
|
9036
|
+
? this.parseExpression(this.initValue)
|
|
9037
|
+
: this.normalizeRules([]);
|
|
9038
|
+
this.markRulesAsSaved(rules);
|
|
9039
|
+
return rules;
|
|
9040
|
+
}
|
|
9041
|
+
markRulesAsSaved(rules) {
|
|
9042
|
+
for (const rule of rules) {
|
|
9043
|
+
rule.unsaved = false;
|
|
9044
|
+
if (rule.type === 'group' && rule.rules) {
|
|
9045
|
+
this.markRulesAsSaved(rule.rules);
|
|
9046
|
+
}
|
|
9047
|
+
}
|
|
9048
|
+
}
|
|
8627
9049
|
tokenizeExpression(expression) {
|
|
8628
9050
|
const matches = expression.match(/\{\{[^}]+\}\}|\(|\)|\bAND\b|\bOR\b/gi);
|
|
8629
9051
|
return matches ?? [];
|
|
@@ -8658,11 +9080,89 @@ class UicRuleBuilderComponent {
|
|
|
8658
9080
|
}
|
|
8659
9081
|
resolveConditionValue(rawValue) {
|
|
8660
9082
|
const trimmedValue = rawValue.trim();
|
|
8661
|
-
const
|
|
8662
|
-
return
|
|
9083
|
+
const matchedCondition = this.conditions.find(condition => String(this.getConditionReference(condition)) === trimmedValue);
|
|
9084
|
+
return matchedCondition ? this.getConditionReference(matchedCondition) : trimmedValue;
|
|
9085
|
+
}
|
|
9086
|
+
resolveConditionLabel(value) {
|
|
9087
|
+
const matchedCondition = this.conditions.find(condition => String(this.getConditionReference(condition)) === String(value));
|
|
9088
|
+
return matchedCondition?.description ?? String(value ?? '');
|
|
9089
|
+
}
|
|
9090
|
+
upsertCondition(condition) {
|
|
9091
|
+
const normalizedCondition = { ...condition };
|
|
9092
|
+
if (normalizedCondition.id === 0) {
|
|
9093
|
+
normalizedCondition.temporalId = normalizedCondition.temporalId ?? this.getNextTemporalConditionId();
|
|
9094
|
+
}
|
|
9095
|
+
const conditionReference = this.getConditionReference(normalizedCondition);
|
|
9096
|
+
const existingIndex = this.conditions.findIndex(item => String(this.getConditionReference(item)) === String(conditionReference));
|
|
9097
|
+
if (existingIndex >= 0) {
|
|
9098
|
+
this.conditions[existingIndex] = normalizedCondition;
|
|
9099
|
+
}
|
|
9100
|
+
else {
|
|
9101
|
+
this.conditions = [...this.conditions, normalizedCondition];
|
|
9102
|
+
}
|
|
9103
|
+
this.refreshAvailableConditions();
|
|
9104
|
+
return conditionReference;
|
|
9105
|
+
}
|
|
9106
|
+
buildRuleOutput() {
|
|
9107
|
+
const definition = this.buildExpression(this.ruleDefinition);
|
|
9108
|
+
const usedConditionReferences = new Set(this.collectConditionValues(this.ruleDefinition));
|
|
9109
|
+
const rulesToCreate = this.conditions
|
|
9110
|
+
.filter(condition => condition.id === 0 && !!condition.temporalId && usedConditionReferences.has(String(this.getConditionReference(condition))))
|
|
9111
|
+
.map(condition => ({
|
|
9112
|
+
temporalId: condition.temporalId,
|
|
9113
|
+
fieldCode: condition.fieldCode,
|
|
9114
|
+
operatorCode: condition.operatorCode,
|
|
9115
|
+
value: condition.value,
|
|
9116
|
+
description: condition.description
|
|
9117
|
+
}));
|
|
9118
|
+
return {
|
|
9119
|
+
definition,
|
|
9120
|
+
rulesToCreate
|
|
9121
|
+
};
|
|
9122
|
+
}
|
|
9123
|
+
refreshAvailableConditions() {
|
|
9124
|
+
this.conditions = this.conditions.map(condition => {
|
|
9125
|
+
if (condition.id !== 0 || condition.temporalId) {
|
|
9126
|
+
return condition;
|
|
9127
|
+
}
|
|
9128
|
+
return {
|
|
9129
|
+
...condition,
|
|
9130
|
+
temporalId: this.getNextTemporalConditionId()
|
|
9131
|
+
};
|
|
9132
|
+
});
|
|
9133
|
+
this.availableConditions = this.conditions.map(condition => ({
|
|
9134
|
+
id: this.getConditionReference(condition),
|
|
9135
|
+
text: condition.description
|
|
9136
|
+
}));
|
|
9137
|
+
this.conditionLabels = this.conditions.reduce((labels, condition) => {
|
|
9138
|
+
labels[String(this.getConditionReference(condition))] = condition.description;
|
|
9139
|
+
return labels;
|
|
9140
|
+
}, {});
|
|
9141
|
+
}
|
|
9142
|
+
getConditionReference(condition) {
|
|
9143
|
+
return condition.id === 0 ? (condition.temporalId ?? '') : condition.id;
|
|
9144
|
+
}
|
|
9145
|
+
getNextTemporalConditionId() {
|
|
9146
|
+
const temporalId = `temp_${this.nextTemporalConditionId}`;
|
|
9147
|
+
this.nextTemporalConditionId += 1;
|
|
9148
|
+
return temporalId;
|
|
9149
|
+
}
|
|
9150
|
+
syncNextTemporalConditionId() {
|
|
9151
|
+
const references = [
|
|
9152
|
+
...this.conditions.map(condition => String(this.getConditionReference(condition))),
|
|
9153
|
+
...this.collectConditionValues(this.ruleDefinition)
|
|
9154
|
+
];
|
|
9155
|
+
const nextId = references.reduce((maxId, reference) => {
|
|
9156
|
+
const match = reference.match(/^temp_(\d+)$/);
|
|
9157
|
+
if (!match) {
|
|
9158
|
+
return maxId;
|
|
9159
|
+
}
|
|
9160
|
+
return Math.max(maxId, Number(match[1]) || 0);
|
|
9161
|
+
}, 0);
|
|
9162
|
+
this.nextTemporalConditionId = nextId + 1;
|
|
8663
9163
|
}
|
|
8664
9164
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicRuleBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8665
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicRuleBuilderComponent, isStandalone: true, selector: "ui-rule-builder", inputs: {
|
|
9165
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicRuleBuilderComponent, isStandalone: true, selector: "ui-rule-builder", inputs: { conditions: "conditions", conditionOperators: "conditionOperators", conditionFields: "conditionFields", title: "title", initValue: "initValue" }, outputs: { ruleDefinitionChange: "ruleDefinitionChange" }, ngImport: i0, template: "<div class=\"rule-tools\">\n <h3>\n {{resolvedTitle}}\n </h3>\n @if (editing) {\n <ui-button [tip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule()\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\n <ui-button [tip]=\"'rule_builder.add_group_tip' | uicTranslate\" (click)=\"addGroup()\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_group' | uicTranslate}}</ui-button>\n }@else {\n <ui-button [tip]=\"'rule_builder.edit_tip' | uicTranslate\" (click)=\"editing=true\" size=\"s\" type=\"bordered\" icon=\"ri-edit-line\">{{'rule_builder.edit' | uicTranslate}}</ui-button>\n }\n</div>\n<div class=\"rule-container\" [class.focused-box]=\"editing\">\n <div class=\"rule-container-workspace\">\n @if (editing) {\n <ng-container\n *ngTemplateOutlet=\"rulesTemplate; context: { rules: ruleDefinition, isGroup: false }\">\n </ng-container>\n } @else {\n <ng-container *ngTemplateOutlet=\"readOnlyTemplate\"></ng-container>\n }\n @if (ruleDefinition.length==0) {\n <div class=\"empty-rule-msg\">{{'rule_builder.no_rules' | uicTranslate}}</div>\n }\n </div>\n @if (editing) {\n <div class=\"rule-btns\">\n <ui-button color=\"black\" type=\"bordered\" [tip]=\"'rule_builder.reset_tip' | uicTranslate\" (click)=\"reset()\" >{{'rule_builder.reset' | uicTranslate}}</ui-button>\n <ui-button color=\"black\" [tip]=\"'rule_builder.save_tip' | uicTranslate\" (click)=\"print()\">{{'rule_builder.save' | uicTranslate}}</ui-button>\n </div>\n }\n</div>\n\n<ng-template #rulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\n @for (rule of rules; track $index; let i = $index) {\n @if (rule.type === 'condition') {\n <div class=\"rule-condition\" [class.rule-unsaved]=\"rule.unsaved\">\n <div [tip]=\"'rule_builder.edit_condition_tip' | uicTranslate\" (click)=\"manageRules(rules, i)\">\n <div class=\"condition-box\">{{ conditionLabels[rule.value] || rule.value }}</div>\n </div>\n <ui-button [tip]=\"'rule_builder.delete_rule_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\n </div>\n }\n @if (rule.type === 'operator') {\n <div [tip]=\"'rule_builder.toggle_operator_tip' | uicTranslate\"\n (click)=\"changeOperator(rules, i)\"\n class=\"rule-operator {{rule.value === 'AND' ? 'op-and' : 'op-or'}}\">\n {{ getOperatorLabel(rule.value) }}\n </div>\n }\n @if (rule.type === 'group') {\n <div class=\"rule-groups\" [class.rule-unsaved]=\"rule.unsaved\">\n <div class=\"rule-groups-tools\">\n <ui-button [tip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\n <ui-button [tip]=\"'rule_builder.add_group_tip' | uicTranslate\" (click)=\"addGroup(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_group' | uicTranslate}}</ui-button>\n <ui-button [tip]=\"'rule_builder.delete_group_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\n </div>\n <div class=\"rule-groups-items\">\n <ng-container\n *ngTemplateOutlet=\"rulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\n </ng-container>\n </div>\n </div>\n }\n }\n</ng-template>\n\n<ng-template #readOnlyTemplate>\n @if (ruleDefinition.length > 0) {\n <div class=\"rule-friendly-output\">\n <ng-container\n *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: ruleDefinition, isGroup: false }\">\n </ng-container>\n </div>\n }\n</ng-template>\n\n<ng-template #readOnlyRulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\n <div class=\"readonly\">\n @if (isGroup) {\n <div class=\"readonly-group\">(</div>\n }\n \n @for (rule of rules; track $index) {\n @if (rule.type === 'condition') {\n <div class=\"readonly-condition\">{{ getConditionLabel(rule.value) }}</div>\n }\n \n @if (rule.type === 'operator') {\n <div class=\"readonly-operator\">{{ getOperatorLabel(rule.value) }}</div>\n }\n \n @if (rule.type === 'group') {\n <div class=\"readonly-group\">\n <ng-container\n *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\n </ng-container>\n </div>\n }\n }\n \n @if (isGroup) {\n <div class=\"readonly-group\">)</div>\n }\n </div>\n</ng-template>\n", styles: [".rule-tools{display:flex;gap:5px;align-items:center;padding:5px;margin-bottom:5px;justify-content:flex-end}.rule-tools>h3{flex:1 1}.rule-container{padding:5px;border-top:solid 1px var(--grey-300)}.rule-container-workspace{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px;margin-bottom:10px}.rule-groups{background-color:var(--grey-50);border:solid 1px var(--grey-300);overflow:hidden;border-radius:10px}.rule-groups-tools{display:flex;border-bottom:solid 1px var(--grey-300);background-color:var(--grey-200);gap:5px;padding:5px;justify-content:flex-end}.rule-groups-items{display:flex;padding:5px;align-items:center;gap:10px;flex-wrap:wrap}.rule-condition{padding:5px;border:solid 1px var(--grey-300);border-radius:10px;background-color:#fff;font-size:14px;display:flex;gap:5px;align-items:center}.rule-condition ui-select{min-width:100px}.rule-operator{padding:5px;border-radius:10px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.op-or{background-color:var(--red-100);color:var(--red-600)}.op-or:hover{background-color:var(--red-200)}.op-and{background-color:var(--green-100);color:var(--green-700)}.op-and:hover{background-color:var(--green-200)}.rule-btns{border-top:solid 1px var(--grey-300);display:flex;justify-content:flex-end;gap:10px;padding:5px;margin-top:5px}.empty-rule-msg{padding:10px;font-size:13px;text-align:center;width:100%;color:var(--grey-400)}.focused-box{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.rule-unsaved{border-color:var(--yellow-300)!important}.condition-box{font-size:14px;padding:5px 15px;color:var(--blue-700);border:solid 1px var(--blue-500);background-color:var(--blue-100);transition:background-color ease .2s;border-radius:10px;cursor:pointer}.condition-box:hover{background-color:var(--blue-200)}.readonly{display:flex;gap:5px;align-items:center}.readonly-condition{font-size:13px;background-color:var(--blue-100);padding:4px 8px;color:var(--blue-800);border-radius:5px;font-weight:400}.readonly-operator{font-size:12px;font-weight:500;color:var(--grey-500)}.readonly-group{font-weight:600;color:var(--red-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
8666
9166
|
}
|
|
8667
9167
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicRuleBuilderComponent, decorators: [{
|
|
8668
9168
|
type: Component,
|
|
@@ -8673,12 +9173,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
8673
9173
|
FormsModule,
|
|
8674
9174
|
UicToolTipDirective,
|
|
8675
9175
|
UicTranslatePipe
|
|
8676
|
-
], template: "<div class=\"rule-tools\">\n <h3>\n {{resolvedTitle}}\n </h3>\n <ui-button [tip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule()\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\n
|
|
8677
|
-
}], propDecorators: {
|
|
9176
|
+
], template: "<div class=\"rule-tools\">\n <h3>\n {{resolvedTitle}}\n </h3>\n @if (editing) {\n <ui-button [tip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule()\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\n <ui-button [tip]=\"'rule_builder.add_group_tip' | uicTranslate\" (click)=\"addGroup()\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_group' | uicTranslate}}</ui-button>\n }@else {\n <ui-button [tip]=\"'rule_builder.edit_tip' | uicTranslate\" (click)=\"editing=true\" size=\"s\" type=\"bordered\" icon=\"ri-edit-line\">{{'rule_builder.edit' | uicTranslate}}</ui-button>\n }\n</div>\n<div class=\"rule-container\" [class.focused-box]=\"editing\">\n <div class=\"rule-container-workspace\">\n @if (editing) {\n <ng-container\n *ngTemplateOutlet=\"rulesTemplate; context: { rules: ruleDefinition, isGroup: false }\">\n </ng-container>\n } @else {\n <ng-container *ngTemplateOutlet=\"readOnlyTemplate\"></ng-container>\n }\n @if (ruleDefinition.length==0) {\n <div class=\"empty-rule-msg\">{{'rule_builder.no_rules' | uicTranslate}}</div>\n }\n </div>\n @if (editing) {\n <div class=\"rule-btns\">\n <ui-button color=\"black\" type=\"bordered\" [tip]=\"'rule_builder.reset_tip' | uicTranslate\" (click)=\"reset()\" >{{'rule_builder.reset' | uicTranslate}}</ui-button>\n <ui-button color=\"black\" [tip]=\"'rule_builder.save_tip' | uicTranslate\" (click)=\"print()\">{{'rule_builder.save' | uicTranslate}}</ui-button>\n </div>\n }\n</div>\n\n<ng-template #rulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\n @for (rule of rules; track $index; let i = $index) {\n @if (rule.type === 'condition') {\n <div class=\"rule-condition\" [class.rule-unsaved]=\"rule.unsaved\">\n <div [tip]=\"'rule_builder.edit_condition_tip' | uicTranslate\" (click)=\"manageRules(rules, i)\">\n <div class=\"condition-box\">{{ conditionLabels[rule.value] || rule.value }}</div>\n </div>\n <ui-button [tip]=\"'rule_builder.delete_rule_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\n </div>\n }\n @if (rule.type === 'operator') {\n <div [tip]=\"'rule_builder.toggle_operator_tip' | uicTranslate\"\n (click)=\"changeOperator(rules, i)\"\n class=\"rule-operator {{rule.value === 'AND' ? 'op-and' : 'op-or'}}\">\n {{ getOperatorLabel(rule.value) }}\n </div>\n }\n @if (rule.type === 'group') {\n <div class=\"rule-groups\" [class.rule-unsaved]=\"rule.unsaved\">\n <div class=\"rule-groups-tools\">\n <ui-button [tip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\n <ui-button [tip]=\"'rule_builder.add_group_tip' | uicTranslate\" (click)=\"addGroup(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_group' | uicTranslate}}</ui-button>\n <ui-button [tip]=\"'rule_builder.delete_group_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\n </div>\n <div class=\"rule-groups-items\">\n <ng-container\n *ngTemplateOutlet=\"rulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\n </ng-container>\n </div>\n </div>\n }\n }\n</ng-template>\n\n<ng-template #readOnlyTemplate>\n @if (ruleDefinition.length > 0) {\n <div class=\"rule-friendly-output\">\n <ng-container\n *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: ruleDefinition, isGroup: false }\">\n </ng-container>\n </div>\n }\n</ng-template>\n\n<ng-template #readOnlyRulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\n <div class=\"readonly\">\n @if (isGroup) {\n <div class=\"readonly-group\">(</div>\n }\n \n @for (rule of rules; track $index) {\n @if (rule.type === 'condition') {\n <div class=\"readonly-condition\">{{ getConditionLabel(rule.value) }}</div>\n }\n \n @if (rule.type === 'operator') {\n <div class=\"readonly-operator\">{{ getOperatorLabel(rule.value) }}</div>\n }\n \n @if (rule.type === 'group') {\n <div class=\"readonly-group\">\n <ng-container\n *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\n </ng-container>\n </div>\n }\n }\n \n @if (isGroup) {\n <div class=\"readonly-group\">)</div>\n }\n </div>\n</ng-template>\n", styles: [".rule-tools{display:flex;gap:5px;align-items:center;padding:5px;margin-bottom:5px;justify-content:flex-end}.rule-tools>h3{flex:1 1}.rule-container{padding:5px;border-top:solid 1px var(--grey-300)}.rule-container-workspace{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px;margin-bottom:10px}.rule-groups{background-color:var(--grey-50);border:solid 1px var(--grey-300);overflow:hidden;border-radius:10px}.rule-groups-tools{display:flex;border-bottom:solid 1px var(--grey-300);background-color:var(--grey-200);gap:5px;padding:5px;justify-content:flex-end}.rule-groups-items{display:flex;padding:5px;align-items:center;gap:10px;flex-wrap:wrap}.rule-condition{padding:5px;border:solid 1px var(--grey-300);border-radius:10px;background-color:#fff;font-size:14px;display:flex;gap:5px;align-items:center}.rule-condition ui-select{min-width:100px}.rule-operator{padding:5px;border-radius:10px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.op-or{background-color:var(--red-100);color:var(--red-600)}.op-or:hover{background-color:var(--red-200)}.op-and{background-color:var(--green-100);color:var(--green-700)}.op-and:hover{background-color:var(--green-200)}.rule-btns{border-top:solid 1px var(--grey-300);display:flex;justify-content:flex-end;gap:10px;padding:5px;margin-top:5px}.empty-rule-msg{padding:10px;font-size:13px;text-align:center;width:100%;color:var(--grey-400)}.focused-box{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.rule-unsaved{border-color:var(--yellow-300)!important}.condition-box{font-size:14px;padding:5px 15px;color:var(--blue-700);border:solid 1px var(--blue-500);background-color:var(--blue-100);transition:background-color ease .2s;border-radius:10px;cursor:pointer}.condition-box:hover{background-color:var(--blue-200)}.readonly{display:flex;gap:5px;align-items:center}.readonly-condition{font-size:13px;background-color:var(--blue-100);padding:4px 8px;color:var(--blue-800);border-radius:5px;font-weight:400}.readonly-operator{font-size:12px;font-weight:500;color:var(--grey-500)}.readonly-group{font-weight:600;color:var(--red-500)}\n"] }]
|
|
9177
|
+
}], propDecorators: { conditions: [{
|
|
8678
9178
|
type: Input
|
|
8679
|
-
}],
|
|
9179
|
+
}], conditionOperators: [{
|
|
8680
9180
|
type: Input
|
|
8681
|
-
}],
|
|
9181
|
+
}], conditionFields: [{
|
|
9182
|
+
type: Input
|
|
9183
|
+
}], title: [{
|
|
9184
|
+
type: Input
|
|
9185
|
+
}], initValue: [{
|
|
8682
9186
|
type: Input
|
|
8683
9187
|
}], ruleDefinitionChange: [{
|
|
8684
9188
|
type: Output
|