ui-core-abv 0.4.5 → 0.4.75
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
CHANGED
|
@@ -120,8 +120,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
120
120
|
type: Input
|
|
121
121
|
}] } });
|
|
122
122
|
|
|
123
|
-
const base$
|
|
124
|
-
class UicCheckboxComponent extends base$
|
|
123
|
+
const base$c = createValueAccessor();
|
|
124
|
+
class UicCheckboxComponent extends base$c {
|
|
125
125
|
icon = ''; // Icono externo
|
|
126
126
|
iconColor = 'black';
|
|
127
127
|
label = '';
|
|
@@ -204,8 +204,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
204
204
|
type: Input
|
|
205
205
|
}] } });
|
|
206
206
|
|
|
207
|
-
const base$
|
|
208
|
-
class UicSelectComponent extends base$
|
|
207
|
+
const base$b = createValueAccessor();
|
|
208
|
+
class UicSelectComponent extends base$b {
|
|
209
209
|
icon = ''; // Icono externo
|
|
210
210
|
iconColor = 'black';
|
|
211
211
|
internalIcon = ''; //Icono interno
|
|
@@ -388,8 +388,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
388
388
|
type: Output
|
|
389
389
|
}] } });
|
|
390
390
|
|
|
391
|
-
const base$
|
|
392
|
-
class UicRadioComponent extends base$
|
|
391
|
+
const base$a = createValueAccessor();
|
|
392
|
+
class UicRadioComponent extends base$a {
|
|
393
393
|
icon = '';
|
|
394
394
|
iconColor = 'black';
|
|
395
395
|
label = '';
|
|
@@ -457,8 +457,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
457
457
|
type: Input
|
|
458
458
|
}] } });
|
|
459
459
|
|
|
460
|
-
const base$
|
|
461
|
-
class UicSliderComponent extends base$
|
|
460
|
+
const base$9 = createValueAccessor();
|
|
461
|
+
class UicSliderComponent extends base$9 {
|
|
462
462
|
icon = ''; // Icono externo
|
|
463
463
|
iconColor = 'black';
|
|
464
464
|
label = '';
|
|
@@ -558,8 +558,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
558
558
|
args: ['document:mouseup']
|
|
559
559
|
}] } });
|
|
560
560
|
|
|
561
|
-
const base$
|
|
562
|
-
class UicDatePickerComponent extends base$
|
|
561
|
+
const base$8 = createValueAccessor();
|
|
562
|
+
class UicDatePickerComponent extends base$8 {
|
|
563
563
|
icon = ''; // Icono externo
|
|
564
564
|
iconColor = 'black';
|
|
565
565
|
internalIcon = ''; //Icono interno
|
|
@@ -1024,8 +1024,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1024
1024
|
args: ['calendarTemplate']
|
|
1025
1025
|
}] } });
|
|
1026
1026
|
|
|
1027
|
-
const base$
|
|
1028
|
-
class UicPoolOptionsComponent extends base$
|
|
1027
|
+
const base$7 = createValueAccessor();
|
|
1028
|
+
class UicPoolOptionsComponent extends base$7 {
|
|
1029
1029
|
icon = ''; // Icono externo
|
|
1030
1030
|
iconColor = 'primary'; //color de ícono externo
|
|
1031
1031
|
size = 'm'; // tamaño general del input
|
|
@@ -1148,8 +1148,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1148
1148
|
type: Input
|
|
1149
1149
|
}] } });
|
|
1150
1150
|
|
|
1151
|
-
const base$
|
|
1152
|
-
class UicSearcherComponent extends base$
|
|
1151
|
+
const base$6 = createValueAccessor();
|
|
1152
|
+
class UicSearcherComponent extends base$6 {
|
|
1153
1153
|
icon = ''; // Icono externo
|
|
1154
1154
|
iconColor = 'primary'; //color de ícono externo
|
|
1155
1155
|
internalIcon = 'ri-search-2-line'; //Icono interno
|
|
@@ -1342,8 +1342,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1342
1342
|
args: ['dropdownTemplate']
|
|
1343
1343
|
}] } });
|
|
1344
1344
|
|
|
1345
|
-
const base$
|
|
1346
|
-
class UicMultySelectComponent extends base$
|
|
1345
|
+
const base$5 = createValueAccessor();
|
|
1346
|
+
class UicMultySelectComponent extends base$5 {
|
|
1347
1347
|
icon = ''; // Icono externo
|
|
1348
1348
|
iconColor = 'primary'; //color de ícono externo
|
|
1349
1349
|
internalIcon = ''; //Icono interno
|
|
@@ -1487,8 +1487,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1487
1487
|
args: ['dropdownTemplate']
|
|
1488
1488
|
}] } });
|
|
1489
1489
|
|
|
1490
|
-
const base$
|
|
1491
|
-
class UicTimePickerComponent extends base$
|
|
1490
|
+
const base$4 = createValueAccessor();
|
|
1491
|
+
class UicTimePickerComponent extends base$4 {
|
|
1492
1492
|
// Iconos y estado
|
|
1493
1493
|
icon = '';
|
|
1494
1494
|
iconColor = 'primary';
|
|
@@ -1819,8 +1819,8 @@ const PHONE_COUNTRIES = [
|
|
|
1819
1819
|
{ name: 'Venezuela', iso2: 've', dialCode: '58' }
|
|
1820
1820
|
];
|
|
1821
1821
|
|
|
1822
|
-
const base$
|
|
1823
|
-
class UicPhoneInputComponent extends base$
|
|
1822
|
+
const base$3 = createValueAccessor();
|
|
1823
|
+
class UicPhoneInputComponent extends base$3 {
|
|
1824
1824
|
icon = '';
|
|
1825
1825
|
iconColor = 'black';
|
|
1826
1826
|
internalIcon = '';
|
|
@@ -2114,8 +2114,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2114
2114
|
args: ['dropdownTemplate']
|
|
2115
2115
|
}] } });
|
|
2116
2116
|
|
|
2117
|
-
const base$
|
|
2118
|
-
class UicFileInputComponent extends base$
|
|
2117
|
+
const base$2 = createValueAccessor();
|
|
2118
|
+
class UicFileInputComponent extends base$2 {
|
|
2119
2119
|
icon = ''; // Icono externo
|
|
2120
2120
|
iconColor = 'black';
|
|
2121
2121
|
internalIcon = ''; //Icono interno
|
|
@@ -3792,11 +3792,11 @@ class TinyAlertComponent {
|
|
|
3792
3792
|
this.modalRef.closeFloating(value ? this.response : null);
|
|
3793
3793
|
}
|
|
3794
3794
|
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 });
|
|
3795
|
-
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 <h3 [class]=\"'icon-'+data.type\"> {{data.title}} </
|
|
3795
|
+
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}} </div>\r\n <div class=\"alert-body\" [innerHTML]=\"data.body\"> </div>\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??'Cancelar'}} </ui-button>\r\n }\r\n <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{data.okButtonText??'Continuar'}} </ui-button>\r\n </div>\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;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"] }] });
|
|
3796
3796
|
}
|
|
3797
3797
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TinyAlertComponent, decorators: [{
|
|
3798
3798
|
type: Component,
|
|
3799
|
-
args: [{ selector: 'ui-tiny-alert', imports: [UicButtonComponent], 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 <h3 [class]=\"'icon-'+data.type\"> {{data.title}} </
|
|
3799
|
+
args: [{ selector: 'ui-tiny-alert', imports: [UicButtonComponent], 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}} </div>\r\n <div class=\"alert-body\" [innerHTML]=\"data.body\"> </div>\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??'Cancelar'}} </ui-button>\r\n }\r\n <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{data.okButtonText??'Continuar'}} </ui-button>\r\n </div>\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;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"] }]
|
|
3800
3800
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
3801
3801
|
type: Inject,
|
|
3802
3802
|
args: [MODAL_DATA]
|
|
@@ -3846,11 +3846,11 @@ class UicModalComponent {
|
|
|
3846
3846
|
this.modalRef.closeFloating(null);
|
|
3847
3847
|
}
|
|
3848
3848
|
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 });
|
|
3849
|
-
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=\"
|
|
3849
|
+
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;padding:0 10px;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$1.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] });
|
|
3850
3850
|
}
|
|
3851
3851
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalComponent, decorators: [{
|
|
3852
3852
|
type: Component,
|
|
3853
|
-
args: [{ selector: 'ui-modal', imports: [CommonModule, PortalModule, UicButtonComponent], animations: [pushTop], template: "<div class=\"
|
|
3853
|
+
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;padding:0 10px;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"] }]
|
|
3854
3854
|
}], ctorParameters: () => [{ type: UiModalRef, decorators: [{
|
|
3855
3855
|
type: Inject,
|
|
3856
3856
|
args: [UiModalRef]
|
|
@@ -4327,7 +4327,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
4327
4327
|
function helperTableMapDatoToColums(data, headers) {
|
|
4328
4328
|
const row = [];
|
|
4329
4329
|
headers.forEach(head => {
|
|
4330
|
-
if (head.key in data && head.type == 'text') {
|
|
4330
|
+
if (head.key in data && (head.type == 'text' && !head.type)) {
|
|
4331
4331
|
row.push({
|
|
4332
4332
|
key: head.key,
|
|
4333
4333
|
value: data[head.key]
|
|
@@ -4666,8 +4666,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
4666
4666
|
args: [{ selector: 'ui-alert-container', imports: [UiAlertComponent], template: "<div class=\"alert-container\">\r\n @for (alert of alerts; track alert.id){\r\n <ui-alert\r\n (closeAlert)=\"dismis($event)\"\r\n [alert]=\"alert\">\r\n </ui-alert>\r\n } \r\n</div>\r\n", styles: [".alert-container{position:fixed;top:1rem;right:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:9999}\n"] }]
|
|
4667
4667
|
}], ctorParameters: () => [{ type: UicPushAlertService }] });
|
|
4668
4668
|
|
|
4669
|
-
const base = createValueAccessor();
|
|
4670
|
-
class UicSignaturePadComponent extends base {
|
|
4669
|
+
const base$1 = createValueAccessor();
|
|
4670
|
+
class UicSignaturePadComponent extends base$1 {
|
|
4671
4671
|
width = 400;
|
|
4672
4672
|
height = 200;
|
|
4673
4673
|
strokeColor = '#111827';
|
|
@@ -4838,16 +4838,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
4838
4838
|
class UicWorkPanelComponent {
|
|
4839
4839
|
cdr;
|
|
4840
4840
|
host;
|
|
4841
|
-
/**
|
|
4842
|
-
* Compatibilidad con la version previa (un unico componente inicial).
|
|
4843
|
-
* Si se envia, se crea como primera pestana.
|
|
4844
|
-
*/
|
|
4845
4841
|
componentType;
|
|
4846
4842
|
componentInputs = {};
|
|
4847
|
-
/**
|
|
4848
|
-
* Lista inicial de pestanas a renderizar.
|
|
4849
|
-
*/
|
|
4850
4843
|
tabs = [];
|
|
4844
|
+
width = '50%';
|
|
4851
4845
|
tabsChange = new EventEmitter();
|
|
4852
4846
|
tabClosed = new EventEmitter();
|
|
4853
4847
|
tabSelected = new EventEmitter();
|
|
@@ -4990,11 +4984,11 @@ class UicWorkPanelComponent {
|
|
|
4990
4984
|
return !(this.isMinimized || !this.activeTabId) && this.fullView;
|
|
4991
4985
|
}
|
|
4992
4986
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicWorkPanelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4993
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicWorkPanelComponent, isStandalone: true, selector: "ui-work-panel", inputs: { componentType: "componentType", componentInputs: "componentInputs", tabs: "tabs", minPosition: "minPosition", showAddButton: "showAddButton" }, outputs: { tabsChange: "tabsChange", tabClosed: "tabClosed", tabSelected: "tabSelected", tabAdded: "tabAdded", addTabRequest: "addTabRequest", fullViewChange: "fullViewChange" }, viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\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 <ui-button class=\"nomob\" (click)=\"minimizePanel()\" size=\"s\" tip=\"Minimizar\" [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=\"Reducir\" [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=\"Agrandar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-expand-diagonal-fill\"></ui-button>\r\n }\r\n <ui-button (click)=\"close()\" size=\"s\" tip=\"Cerrar\" [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;
|
|
4987
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicWorkPanelComponent, isStandalone: true, selector: "ui-work-panel", inputs: { componentType: "componentType", componentInputs: "componentInputs", tabs: "tabs", width: "width", minPosition: "minPosition", showAddButton: "showAddButton" }, outputs: { tabsChange: "tabsChange", tabClosed: "tabClosed", tabSelected: "tabSelected", tabAdded: "tabAdded", addTabRequest: "addTabRequest", fullViewChange: "fullViewChange" }, viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\r\n [class]=\"fullView ? 'open-panel' : 'mid-panel'\"\r\n [style]=\"fullView ?'':'width: {{width}};'\"\r\n [class.panel-hidden]=\"isMinimized || !activeTabId\"\r\n>\r\n <div class=\"panel-header\">\r\n <ui-button class=\"nomob\" (click)=\"minimizePanel()\" size=\"s\" tip=\"Minimizar\" [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=\"Reducir\" [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=\"Agrandar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-expand-diagonal-fill\"></ui-button>\r\n }\r\n <ui-button (click)=\"close()\" size=\"s\" tip=\"Cerrar\" [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;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}@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"] }] });
|
|
4994
4988
|
}
|
|
4995
4989
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicWorkPanelComponent, decorators: [{
|
|
4996
4990
|
type: Component,
|
|
4997
|
-
args: [{ selector: 'ui-work-panel', imports: [UicButtonComponent, UicToolTipDirective], template: "<div\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 <ui-button class=\"nomob\" (click)=\"minimizePanel()\" size=\"s\" tip=\"Minimizar\" [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=\"Reducir\" [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=\"Agrandar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-expand-diagonal-fill\"></ui-button>\r\n }\r\n <ui-button (click)=\"close()\" size=\"s\" tip=\"Cerrar\" [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;
|
|
4991
|
+
args: [{ selector: 'ui-work-panel', imports: [UicButtonComponent, UicToolTipDirective], template: "<div\r\n [class]=\"fullView ? 'open-panel' : 'mid-panel'\"\r\n [style]=\"fullView ?'':'width: {{width}};'\"\r\n [class.panel-hidden]=\"isMinimized || !activeTabId\"\r\n>\r\n <div class=\"panel-header\">\r\n <ui-button class=\"nomob\" (click)=\"minimizePanel()\" size=\"s\" tip=\"Minimizar\" [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=\"Reducir\" [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=\"Agrandar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-expand-diagonal-fill\"></ui-button>\r\n }\r\n <ui-button (click)=\"close()\" size=\"s\" tip=\"Cerrar\" [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;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}@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"] }]
|
|
4998
4992
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { host: [{
|
|
4999
4993
|
type: ViewChild,
|
|
5000
4994
|
args: ['host', { read: ViewContainerRef, static: true }]
|
|
@@ -5004,6 +4998,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
5004
4998
|
type: Input
|
|
5005
4999
|
}], tabs: [{
|
|
5006
5000
|
type: Input
|
|
5001
|
+
}], width: [{
|
|
5002
|
+
type: Input
|
|
5007
5003
|
}], tabsChange: [{
|
|
5008
5004
|
type: Output
|
|
5009
5005
|
}], tabClosed: [{
|
|
@@ -5128,6 +5124,114 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
5128
5124
|
type: Output
|
|
5129
5125
|
}] } });
|
|
5130
5126
|
|
|
5127
|
+
const base = createValueAccessor();
|
|
5128
|
+
class UicTagSelectorComponent extends base {
|
|
5129
|
+
icon = ''; // Icono externo
|
|
5130
|
+
iconColor = 'black';
|
|
5131
|
+
// TEXTO
|
|
5132
|
+
label = '';
|
|
5133
|
+
error = '';
|
|
5134
|
+
tip = '';
|
|
5135
|
+
disabled = false;
|
|
5136
|
+
loading = false;
|
|
5137
|
+
placeholder = 'Buscar...';
|
|
5138
|
+
buttonText = 'Agregar tag';
|
|
5139
|
+
predefinedTitle = 'Tags predefinidos';
|
|
5140
|
+
newTagTitle = 'Nuevo tag';
|
|
5141
|
+
predefinedLabels = [];
|
|
5142
|
+
selectedTags = [];
|
|
5143
|
+
filterText = '';
|
|
5144
|
+
newTagLabel = '';
|
|
5145
|
+
filterArray = [];
|
|
5146
|
+
ngOnInit() {
|
|
5147
|
+
this.filter();
|
|
5148
|
+
}
|
|
5149
|
+
filter() {
|
|
5150
|
+
this.filterArray = this.predefinedLabels.filter(f => f.name.toLocaleLowerCase().includes(this.filterText.toLocaleLowerCase()));
|
|
5151
|
+
}
|
|
5152
|
+
select(tag) {
|
|
5153
|
+
const idx = this.selectedTags.findIndex(f => f.name == tag.name);
|
|
5154
|
+
if (idx != -1) {
|
|
5155
|
+
this.selectedTags.splice(idx, 1);
|
|
5156
|
+
}
|
|
5157
|
+
else {
|
|
5158
|
+
this.selectedTags.push(tag);
|
|
5159
|
+
}
|
|
5160
|
+
this.notifyChange(this.selectedTags);
|
|
5161
|
+
}
|
|
5162
|
+
removeTag(tag) {
|
|
5163
|
+
this.select(tag);
|
|
5164
|
+
}
|
|
5165
|
+
createTag() {
|
|
5166
|
+
const newTag = {
|
|
5167
|
+
id: 0,
|
|
5168
|
+
color: 'blue',
|
|
5169
|
+
name: this.newTagLabel
|
|
5170
|
+
};
|
|
5171
|
+
this.predefinedLabels.push(newTag);
|
|
5172
|
+
this.filterText = '';
|
|
5173
|
+
this.filter();
|
|
5174
|
+
this.select(newTag);
|
|
5175
|
+
this.newTagLabel = '';
|
|
5176
|
+
}
|
|
5177
|
+
isSelected(name) {
|
|
5178
|
+
return this.selectedTags.some(t => t.name === name);
|
|
5179
|
+
}
|
|
5180
|
+
writeValue(value) {
|
|
5181
|
+
const safeValue = Array.isArray(value) ? value : [];
|
|
5182
|
+
super.writeValue(safeValue);
|
|
5183
|
+
this.selectedTags = [...safeValue];
|
|
5184
|
+
}
|
|
5185
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTagSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
5186
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTagSelectorComponent, isStandalone: true, selector: "ui-tag-selector", inputs: { icon: "icon", iconColor: "iconColor", label: "label", error: "error", tip: "tip", disabled: "disabled", loading: "loading", placeholder: "placeholder", buttonText: "buttonText", predefinedTitle: "predefinedTitle", newTagTitle: "newTagTitle", predefinedLabels: "predefinedLabels" }, providers: [
|
|
5187
|
+
{
|
|
5188
|
+
provide: NG_VALUE_ACCESSOR,
|
|
5189
|
+
useExisting: forwardRef(() => UicTagSelectorComponent),
|
|
5190
|
+
multi: true
|
|
5191
|
+
}
|
|
5192
|
+
], 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=\"tags-reel\">\r\n @for (item of selectedTags; track $index) {\r\n <div [class]=\"'selected-tag lc-'+item.color\" ><i [class]=\"item.icon??'ri-hashtag'\"></i>{{item.name}} <i (click)=\"removeTag(item)\" class=\"ri-close-large-line close-icon\"></i> </div>\r\n }\r\n <ui-overlay-card>\r\n <ui-button button type=\"bordered\" color=\"black\" icon=\"ri-add-line\" size=\"s\">{{buttonText}}</ui-button>\r\n <ng-container content >\r\n\r\n <ui-input internalIcon=\"ri-search-line\" internalIconColor=\"blue\">\r\n <input [placeholder]=\"placeholder\" [(ngModel)]=\"filterText\" (ngModelChange)=\"filter()\" >\r\n </ui-input>\r\n <div class=\"tags-overflow\">\r\n <div class=\"tags-title\">{{predefinedTitle}}</div>\r\n @for(item of filterArray; track $index){\r\n <div (click)=\"select(item)\" class=\"tag-option\"> \r\n <i class=\"ri-circle-fill f-grey\"></i> \r\n <div style=\"flex: 1 1;\">{{item.name}}</div> \r\n @if ( isSelected(item.name) ) {\r\n <i class=\"ri-check-line\"></i> \r\n }\r\n </div>\r\n }\r\n <div class=\"new-tag\"> \r\n <div class=\"new-tag-label\">{{newTagTitle}}:</div>\r\n <div class=\"input-tag\">\r\n <input [(ngModel)]=\"newTagLabel\" type=\"text\">\r\n <ui-button (click)=\"createTag()\" size=\"s\" [iconOnly]=\"true\" icon=\"ri-add-line\"></ui-button>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ui-overlay-card>\r\n</div> \r\n</ui-input-wrapper>", styles: [".tags-reel{display:flex;gap:10px;flex-wrap:wrap}.selected-tag{display:flex;gap:5px;align-items:center;font-size:12px;line-height:28px;padding:0 12px;border:solid 1px var(--grey-200);border-radius:20px}.selected-tag i{font-size:14px}.close-icon{color:var(--red-600);cursor:pointer}.tags-title{font-size:13px;padding:4px;font-weight:600;margin-bottom:5px;color:var(--grey-500)}.tag-option{font-size:14px;padding:5px 10px;border-radius:5px;transition:ease;display:flex;gap:10px;color:var(--grey-600);cursor:pointer}.tag-option:hover{background-color:var(--grey-200)}.tags-overflow{display:flex;flex-direction:column;gap:2px;padding:3px;max-height:250px;overflow:auto}.new-tag{padding:5px;border-top:solid 1px var(--grey-200)}.new-tag-label{font-size:13px;line-height:25px;color:var(--grey-500)}.input-tag{display:flex;gap:5px}.input-tag input{border:solid 1px var(--grey-300);border-radius:8px;padding:0 10px}.f-grey{color:var(--grey-200)}.lc-blue{background-color:var(--blue-100);border-color:var(--blue-600);color:var(--blue-700)}\n"], dependencies: [{ kind: "component", type: UicOverlayCardComponent, selector: "ui-overlay-card" }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
|
|
5193
|
+
}
|
|
5194
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTagSelectorComponent, decorators: [{
|
|
5195
|
+
type: Component,
|
|
5196
|
+
args: [{ selector: 'ui-tag-selector', imports: [
|
|
5197
|
+
UicOverlayCardComponent,
|
|
5198
|
+
UicInputComponent,
|
|
5199
|
+
FormsModule,
|
|
5200
|
+
InputWrapperComponent,
|
|
5201
|
+
UicButtonComponent
|
|
5202
|
+
], providers: [
|
|
5203
|
+
{
|
|
5204
|
+
provide: NG_VALUE_ACCESSOR,
|
|
5205
|
+
useExisting: forwardRef(() => UicTagSelectorComponent),
|
|
5206
|
+
multi: true
|
|
5207
|
+
}
|
|
5208
|
+
], 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=\"tags-reel\">\r\n @for (item of selectedTags; track $index) {\r\n <div [class]=\"'selected-tag lc-'+item.color\" ><i [class]=\"item.icon??'ri-hashtag'\"></i>{{item.name}} <i (click)=\"removeTag(item)\" class=\"ri-close-large-line close-icon\"></i> </div>\r\n }\r\n <ui-overlay-card>\r\n <ui-button button type=\"bordered\" color=\"black\" icon=\"ri-add-line\" size=\"s\">{{buttonText}}</ui-button>\r\n <ng-container content >\r\n\r\n <ui-input internalIcon=\"ri-search-line\" internalIconColor=\"blue\">\r\n <input [placeholder]=\"placeholder\" [(ngModel)]=\"filterText\" (ngModelChange)=\"filter()\" >\r\n </ui-input>\r\n <div class=\"tags-overflow\">\r\n <div class=\"tags-title\">{{predefinedTitle}}</div>\r\n @for(item of filterArray; track $index){\r\n <div (click)=\"select(item)\" class=\"tag-option\"> \r\n <i class=\"ri-circle-fill f-grey\"></i> \r\n <div style=\"flex: 1 1;\">{{item.name}}</div> \r\n @if ( isSelected(item.name) ) {\r\n <i class=\"ri-check-line\"></i> \r\n }\r\n </div>\r\n }\r\n <div class=\"new-tag\"> \r\n <div class=\"new-tag-label\">{{newTagTitle}}:</div>\r\n <div class=\"input-tag\">\r\n <input [(ngModel)]=\"newTagLabel\" type=\"text\">\r\n <ui-button (click)=\"createTag()\" size=\"s\" [iconOnly]=\"true\" icon=\"ri-add-line\"></ui-button>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ui-overlay-card>\r\n</div> \r\n</ui-input-wrapper>", styles: [".tags-reel{display:flex;gap:10px;flex-wrap:wrap}.selected-tag{display:flex;gap:5px;align-items:center;font-size:12px;line-height:28px;padding:0 12px;border:solid 1px var(--grey-200);border-radius:20px}.selected-tag i{font-size:14px}.close-icon{color:var(--red-600);cursor:pointer}.tags-title{font-size:13px;padding:4px;font-weight:600;margin-bottom:5px;color:var(--grey-500)}.tag-option{font-size:14px;padding:5px 10px;border-radius:5px;transition:ease;display:flex;gap:10px;color:var(--grey-600);cursor:pointer}.tag-option:hover{background-color:var(--grey-200)}.tags-overflow{display:flex;flex-direction:column;gap:2px;padding:3px;max-height:250px;overflow:auto}.new-tag{padding:5px;border-top:solid 1px var(--grey-200)}.new-tag-label{font-size:13px;line-height:25px;color:var(--grey-500)}.input-tag{display:flex;gap:5px}.input-tag input{border:solid 1px var(--grey-300);border-radius:8px;padding:0 10px}.f-grey{color:var(--grey-200)}.lc-blue{background-color:var(--blue-100);border-color:var(--blue-600);color:var(--blue-700)}\n"] }]
|
|
5209
|
+
}], propDecorators: { icon: [{
|
|
5210
|
+
type: Input
|
|
5211
|
+
}], iconColor: [{
|
|
5212
|
+
type: Input
|
|
5213
|
+
}], label: [{
|
|
5214
|
+
type: Input
|
|
5215
|
+
}], error: [{
|
|
5216
|
+
type: Input
|
|
5217
|
+
}], tip: [{
|
|
5218
|
+
type: Input
|
|
5219
|
+
}], disabled: [{
|
|
5220
|
+
type: Input
|
|
5221
|
+
}], loading: [{
|
|
5222
|
+
type: Input
|
|
5223
|
+
}], placeholder: [{
|
|
5224
|
+
type: Input
|
|
5225
|
+
}], buttonText: [{
|
|
5226
|
+
type: Input
|
|
5227
|
+
}], predefinedTitle: [{
|
|
5228
|
+
type: Input
|
|
5229
|
+
}], newTagTitle: [{
|
|
5230
|
+
type: Input
|
|
5231
|
+
}], predefinedLabels: [{
|
|
5232
|
+
type: Input
|
|
5233
|
+
}] } });
|
|
5234
|
+
|
|
5131
5235
|
const simpleFade = trigger('simpleFade', [
|
|
5132
5236
|
transition(':enter', [style({ opacity: 0 }), animate('.3s ease', style({ opacity: 1 }))]),
|
|
5133
5237
|
transition(':leave', [animate('.3s ease', style({ opacity: 0 }))])
|
|
@@ -5166,5 +5270,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
5166
5270
|
* Generated bundle index. Do not edit.
|
|
5167
5271
|
*/
|
|
5168
5272
|
|
|
5169
|
-
export { DROPDOWN_OVERLAY_CONTROLS, FirstCapitalPipe, MODAL_CLOSE_EVENT, MODAL_CLOSE_REQUEST, MODAL_COMPONENT, MODAL_CONFIG, MODAL_DATA, UiDropdownCloseDirective, UiModalRef, UicAccordionComponent, UicActionButtonComponent, UicAlertContainerComponent, UicButtonComponent, UicCheckboxComponent, UicDatePickerComponent, UicDropdownContainerComponent, UicFileInputComponent, UicFormWrapperComponent, UicInputComponent, UicKpiCardComponent, UicModalService, UicMultySearcherComponent, UicMultySelectComponent, UicNameInitsPipe, UicOverlayCardComponent, UicPhoneInputComponent, UicPoolOptionsComponent, UicPortletCardComponent, UicPushAlertService, UicRadioComponent, UicSearcherComponent, UicSelectComponent, UicShortTableComponent, UicSignaturePadComponent, UicSkeletonLoaderComponent, UicSliderComponent, UicStepTabsComponent, UicStepsFormComponent, UicSwichComponent, UicTableComponent, UicTabsButtonComponent, UicTimePickerComponent, UicTinyAlertService, UicToolTipDirective, UicWorkPanelComponent, animatedRow, fadeAndRise, fadeBackdrop, helperFormMapFormdataToObject, helperTableMapDatoToColums, highlightRow, isMobile, pushTop, sideModal, simpleFade };
|
|
5273
|
+
export { DROPDOWN_OVERLAY_CONTROLS, FirstCapitalPipe, MODAL_CLOSE_EVENT, MODAL_CLOSE_REQUEST, MODAL_COMPONENT, MODAL_CONFIG, MODAL_DATA, UiDropdownCloseDirective, UiModalRef, UicAccordionComponent, UicActionButtonComponent, UicAlertContainerComponent, UicButtonComponent, UicCheckboxComponent, UicDatePickerComponent, UicDropdownContainerComponent, UicFileInputComponent, UicFormWrapperComponent, UicInputComponent, UicKpiCardComponent, UicModalService, UicMultySearcherComponent, UicMultySelectComponent, UicNameInitsPipe, UicOverlayCardComponent, UicPhoneInputComponent, UicPoolOptionsComponent, UicPortletCardComponent, UicPushAlertService, UicRadioComponent, UicSearcherComponent, UicSelectComponent, UicShortTableComponent, UicSignaturePadComponent, UicSkeletonLoaderComponent, UicSliderComponent, UicStepTabsComponent, UicStepsFormComponent, UicSwichComponent, UicTableComponent, UicTabsButtonComponent, UicTagSelectorComponent, UicTimePickerComponent, UicTinyAlertService, UicToolTipDirective, UicWorkPanelComponent, animatedRow, fadeAndRise, fadeBackdrop, helperFormMapFormdataToObject, helperTableMapDatoToColums, highlightRow, isMobile, pushTop, sideModal, simpleFade };
|
|
5170
5274
|
//# sourceMappingURL=ui-core-abv.mjs.map
|