keevo-components 1.8.395 → 1.8.397
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/esm2022/lib/components/kv-content-viewer/kv-content-viewer.component.mjs +6 -4
- package/esm2022/lib/components/kv-inputs/kv-dropdown/kv-dropdown.component.mjs +12 -11
- package/esm2022/lib/components/kv-inputs/kv-multi-select/kv-multi-select.component.mjs +6 -3
- package/fesm2022/keevo-components.mjs +20 -14
- package/fesm2022/keevo-components.mjs.map +1 -1
- package/lib/api/base-components/base-component-dropdown.d.ts +1 -1
- package/lib/components/kv-content-viewer/kv-content-viewer.component.d.ts +1 -1
- package/lib/components/kv-inputs/kv-dropdown/kv-dropdown.component.d.ts +2 -2
- package/lib/components/kv-inputs/kv-multi-select/kv-multi-select.component.d.ts +2 -1
- package/lib/components/kv-table/kv-table.component.d.ts +1 -1
- package/lib/components/kv-table-expandable/kv-table-expandable.component.d.ts +1 -1
- package/package.json +1 -1
|
@@ -2600,25 +2600,26 @@ class KvDropdownComponent extends BaseComponentDropDown {
|
|
|
2600
2600
|
this.filterPlaceholder = '';
|
|
2601
2601
|
this.placeholder = ' ';
|
|
2602
2602
|
this.virtualScroll = false;
|
|
2603
|
-
this.appendTo = input();
|
|
2603
|
+
this.appendTo = input('body');
|
|
2604
|
+
this.windowSize = signal(window.innerWidth);
|
|
2604
2605
|
this.onLazyLoad = new EventEmitter();
|
|
2605
2606
|
this.pDropDown = viewChild('pdropdown');
|
|
2606
|
-
|
|
2607
|
-
|
|
2608
|
-
|
|
2609
|
-
|
|
2610
|
-
|
|
2611
|
-
|
|
2607
|
+
// pDropDownWidth = signal<string>('');
|
|
2608
|
+
this.pDropDownWidth = computed(() => {
|
|
2609
|
+
const windowSize = this.windowSize(); //Apenas para forçar a atualizaçaõ do valor
|
|
2610
|
+
const el = this.pDropDown().el.nativeElement;
|
|
2611
|
+
const dimensions = el.getBoundingClientRect();
|
|
2612
|
+
return `${dimensions.width}` + 'px';
|
|
2613
|
+
});
|
|
2612
2614
|
}
|
|
2613
2615
|
ngOnInit() {
|
|
2614
2616
|
super.ngOnInit();
|
|
2615
2617
|
if (this.dropDowValue)
|
|
2616
2618
|
this.value = this.dropDowValue;
|
|
2617
2619
|
this.capitalizeOptions(this.options);
|
|
2618
|
-
this.setDropdownWitdh();
|
|
2619
2620
|
}
|
|
2620
2621
|
onWindowResize() {
|
|
2621
|
-
this.
|
|
2622
|
+
this.windowSize.set(window.innerWidth);
|
|
2622
2623
|
}
|
|
2623
2624
|
onInputLazyLoad(event) {
|
|
2624
2625
|
this.onLazyLoad.emit(event);
|
|
@@ -5457,13 +5458,14 @@ class KvMultiSelectComponent extends BaseComponentMultiSelect {
|
|
|
5457
5458
|
super(componentService);
|
|
5458
5459
|
this.group = false;
|
|
5459
5460
|
this.maxSelectedLabels = 3;
|
|
5461
|
+
this.appendTo = 'body';
|
|
5460
5462
|
}
|
|
5461
5463
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvMultiSelectComponent, deps: [{ token: ComponentService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5462
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: KvMultiSelectComponent, selector: "kv-multi-select", inputs: { group: "group", itemTemplate: "itemTemplate", maxSelectedLabels: "maxSelectedLabels", optionInactive: "optionInactive" }, providers: ComponentProviders(KvMultiSelectComponent), usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"{'disable': optionInactive === true}\">\r\n <kv-label\r\n [componentId]=\"componentId\"\r\n [label]=\"label && (label + (showAsterisk ? '*' : ''))\"\r\n />\r\n\r\n <p-multiSelect\r\n display=\"chip\"\r\n inputId=\"multiselect\"\r\n styleClass=\"inputs\"\r\n [class]=\"baseInputClass\"\r\n [group]=\"group\"\r\n [disabled]=\"disabled\"\r\n [options]=\"options\"\r\n [optionDisabled]=\" inactiveOptions\"\r\n [optionLabel]=\"optionLabel\"\r\n [optionValue]=\"optionValue\"\r\n [filter]=\"filter\"\r\n [showClear]=\"showClear\"\r\n [(ngModel)]=\"value\"\r\n (onChange)=\"selectionChange($event)\"\r\n (onPanelHide)=\"panelHide($event)\"\r\n [maxSelectedLabels]=\"maxSelectedLabels\"\r\n >\r\n\r\n\r\n <ng-template\r\n let-item\r\n pTemplate=\"item\"\r\n *ngIf=\"itemTemplate\"\r\n >\r\n <ng-container\r\n [ngTemplateOutlet]=\"itemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n >\r\n\r\n </ng-container>\r\n </ng-template>\r\n\r\n\r\n </p-multiSelect>\r\n <kv-error [hasError]=\"hasControlError()\">{{ erroMessage() }}</kv-error>\r\n</span>\r\n<ng-content></ng-content>\r\n", styles: [":host ::ng-deep .disable .p-multiselect.p-multiselect-chip .p-multiselect-token .p-icon-wrapper{display:none!important}::ng-deep .p-multiselect.p-multiselect-chip .p-multiselect-token{padding:.1rem .4rem}::ng-deep .p-multiselect-label{padding:.3rem;display:flex}::ng-deep .p-multiselect-item{font-size:.875rem;padding:.5rem;text-overflow:ellipsis;width:100%}::ng-deep .p-multiselect{width:100%}::ng-deep p-multiselect p-overlay .p-overlay{max-width:100%}::ng-deep .p-multiselect-items-wrapper .p-multiselect-items{padding:.75rem}::ng-deep .p-multiselect-filter{height:1.875rem}::ng-deep .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message{padding:.75rem;font-size:.875rem}::ng-deep .p-multiselect-panel .p-multiselect-header{padding:.5rem}\n", "@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\";::ng-deep :root{--kv-primary-color: 41, 185, 45;--kv-secondary-color: 0, 37, 66;--kv-tertiary-color: 165, 165, 165}.material-symbols-outlined{font-family:Material Symbols Outlined!important}*{font-family:Inter var,Inter,sans-serif!important}::ng-deep .p-accordion,::ng-deep .p-accordion-header,::ng-deep .p-accordion-content,::ng-deep .p-badge,::ng-deep .p-overlay-badge,::ng-deep .p-breadcrumb,::ng-deep .p-breadcrumb-item,::ng-deep .p-breadcrumb-link,::ng-deep .p-button,::ng-deep .p-calendar,::ng-deep .p-card,::ng-deep .p-card-title,::ng-deep .p-card-subtitle,::ng-deep .p-card-content,::ng-deep .p-checkbox,::ng-deep .p-chip,::ng-deep .p-confirm-dialog,::ng-deep .p-confirm-dialog-message,::ng-deep .p-contextmenu,::ng-deep .p-contextmenu-item,::ng-deep .p-dataview,::ng-deep .p-dataview-content,::ng-deep .p-dialog,::ng-deep .p-dialog-title,::ng-deep .p-dialog-content,::ng-deep .p-dropdown,::ng-deep .p-dropdown-label,::ng-deep .p-dropdown-item,::ng-deep .p-dynamic-dialog,::ng-deep .p-dynamic-dialog-title,::ng-deep .p-dynamic-dialog-content,::ng-deep .p-editor,::ng-deep .p-fieldset,::ng-deep .p-fieldset-legend,::ng-deep .p-fieldset-content,::ng-deep .p-fileupload,::ng-deep .p-inputmask,::ng-deep .p-inputnumber,::ng-deep .p-inputtextarea,::ng-deep .p-inputtext,::ng-deep .p-menu,::ng-deep .p-menuitem,::ng-deep .p-menuitem-text,::ng-deep .p-message,::ng-deep .p-messages,::ng-deep .p-multiselect,::ng-deep .p-multiselect-label,::ng-deep .p-multiselect-item,::ng-deep .p-panelmenu,::ng-deep .p-panelmenu-header,::ng-deep .p-panelmenu-content,::ng-deep .p-panel,::ng-deep .p-panel-header,::ng-deep .p-panel-content,::ng-deep .p-password,::ng-deep .p-picklist,::ng-deep .p-progressbar,::ng-deep .p-radiobutton,::ng-deep .p-rating,::ng-deep .p-sidebar,::ng-deep .p-splitbutton,::ng-deep .p-steps,::ng-deep .p-step,::ng-deep .p-table,::ng-deep .p-datatable,::ng-deep .p-tabview,::ng-deep .p-tabpanel,::ng-deep .p-tag,::ng-deep .p-toast,::ng-deep .p-toolbar,::ng-deep .p-tooltip,::ng-deep .p-tree,::ng-deep .p-treetable,::ng-deep .p-selectbutton,::ng-deep .p-stepper,::ng-deep .p-inputgroup,::ng-deep .p-inputgroup-addon,::ng-deep .p-text{font-family:Inter var,Inter,sans-serif!important}:host ::ng-deep .inputs{height:1.875rem}:host ::ng-deep .inputs,.p-inputtext,.p-inputtextarea{font-size:.875rem}::ng-deep .p-dialog .p-dialog-header{color:#fff!important;background:#002542!important;display:flex!important;flex-wrap:wrap;word-wrap:break-word}::ng-deep .p-dialog .p-dialog-content{padding-top:1rem}::ng-deep .p-dialog{min-width:320px}::ng-deep .p-dialog-content{overflow-x:hidden}::ng-deep .p-dialog-content::-webkit-scrollbar{width:8px}::ng-deep .p-dialog-content::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-dialog-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-dialog-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-dialog-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-dialog-footer{display:flex;justify-content:flex-end;padding:10px;gap:10px}::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{display:none}::ng-deep .p-tooltip{font-size:.825rem!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: KvErrorComponent, selector: "kv-error", inputs: ["formControl", "hasError"] }, { kind: "component", type: KvLabelComponent, selector: "kv-label", inputs: ["componentId", "label"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i7$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }] }); }
|
|
5464
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: KvMultiSelectComponent, selector: "kv-multi-select", inputs: { group: "group", itemTemplate: "itemTemplate", maxSelectedLabels: "maxSelectedLabels", optionInactive: "optionInactive", appendTo: "appendTo" }, providers: ComponentProviders(KvMultiSelectComponent), usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"{'disable': optionInactive === true}\">\r\n <kv-label\r\n [componentId]=\"componentId\"\r\n [label]=\"label && (label + (showAsterisk ? '*' : ''))\"\r\n />\r\n\r\n <p-multiSelect\r\n display=\"chip\"\r\n inputId=\"multiselect\"\r\n styleClass=\"inputs\"\r\n [class]=\"baseInputClass\"\r\n [group]=\"group\"\r\n [disabled]=\"disabled\"\r\n [options]=\"options\"\r\n [optionDisabled]=\" inactiveOptions\"\r\n [optionLabel]=\"optionLabel\"\r\n [optionValue]=\"optionValue\"\r\n [filter]=\"filter\"\r\n [showClear]=\"showClear\"\r\n [(ngModel)]=\"value\"\r\n (onChange)=\"selectionChange($event)\"\r\n (onPanelHide)=\"panelHide($event)\"\r\n [maxSelectedLabels]=\"maxSelectedLabels\"\r\n [appendTo]=\"appendTo\"\r\n >\r\n\r\n\r\n <ng-template\r\n let-item\r\n pTemplate=\"item\"\r\n *ngIf=\"itemTemplate\"\r\n >\r\n <ng-container\r\n [ngTemplateOutlet]=\"itemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n >\r\n\r\n </ng-container>\r\n </ng-template>\r\n\r\n\r\n </p-multiSelect>\r\n <kv-error [hasError]=\"hasControlError()\">{{ erroMessage() }}</kv-error>\r\n</span>\r\n<ng-content></ng-content>\r\n", styles: [":host ::ng-deep .disable .p-multiselect.p-multiselect-chip .p-multiselect-token .p-icon-wrapper{display:none!important}::ng-deep .p-multiselect.p-multiselect-chip .p-multiselect-token{padding:.1rem .4rem}::ng-deep .p-multiselect-label{padding:.3rem;display:flex}::ng-deep .p-multiselect-item{font-size:.875rem;padding:.5rem;text-overflow:ellipsis;width:100%}::ng-deep .p-multiselect{width:100%}::ng-deep p-multiselect p-overlay .p-overlay{max-width:100%}::ng-deep .p-multiselect-items-wrapper .p-multiselect-items{padding:.75rem}::ng-deep .p-multiselect-filter{height:1.875rem}::ng-deep .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message{padding:.75rem;font-size:.875rem}::ng-deep .p-multiselect-panel .p-multiselect-header{padding:.5rem}\n", "@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\";::ng-deep :root{--kv-primary-color: 41, 185, 45;--kv-secondary-color: 0, 37, 66;--kv-tertiary-color: 165, 165, 165}.material-symbols-outlined{font-family:Material Symbols Outlined!important}*{font-family:Inter var,Inter,sans-serif!important}::ng-deep .p-accordion,::ng-deep .p-accordion-header,::ng-deep .p-accordion-content,::ng-deep .p-badge,::ng-deep .p-overlay-badge,::ng-deep .p-breadcrumb,::ng-deep .p-breadcrumb-item,::ng-deep .p-breadcrumb-link,::ng-deep .p-button,::ng-deep .p-calendar,::ng-deep .p-card,::ng-deep .p-card-title,::ng-deep .p-card-subtitle,::ng-deep .p-card-content,::ng-deep .p-checkbox,::ng-deep .p-chip,::ng-deep .p-confirm-dialog,::ng-deep .p-confirm-dialog-message,::ng-deep .p-contextmenu,::ng-deep .p-contextmenu-item,::ng-deep .p-dataview,::ng-deep .p-dataview-content,::ng-deep .p-dialog,::ng-deep .p-dialog-title,::ng-deep .p-dialog-content,::ng-deep .p-dropdown,::ng-deep .p-dropdown-label,::ng-deep .p-dropdown-item,::ng-deep .p-dynamic-dialog,::ng-deep .p-dynamic-dialog-title,::ng-deep .p-dynamic-dialog-content,::ng-deep .p-editor,::ng-deep .p-fieldset,::ng-deep .p-fieldset-legend,::ng-deep .p-fieldset-content,::ng-deep .p-fileupload,::ng-deep .p-inputmask,::ng-deep .p-inputnumber,::ng-deep .p-inputtextarea,::ng-deep .p-inputtext,::ng-deep .p-menu,::ng-deep .p-menuitem,::ng-deep .p-menuitem-text,::ng-deep .p-message,::ng-deep .p-messages,::ng-deep .p-multiselect,::ng-deep .p-multiselect-label,::ng-deep .p-multiselect-item,::ng-deep .p-panelmenu,::ng-deep .p-panelmenu-header,::ng-deep .p-panelmenu-content,::ng-deep .p-panel,::ng-deep .p-panel-header,::ng-deep .p-panel-content,::ng-deep .p-password,::ng-deep .p-picklist,::ng-deep .p-progressbar,::ng-deep .p-radiobutton,::ng-deep .p-rating,::ng-deep .p-sidebar,::ng-deep .p-splitbutton,::ng-deep .p-steps,::ng-deep .p-step,::ng-deep .p-table,::ng-deep .p-datatable,::ng-deep .p-tabview,::ng-deep .p-tabpanel,::ng-deep .p-tag,::ng-deep .p-toast,::ng-deep .p-toolbar,::ng-deep .p-tooltip,::ng-deep .p-tree,::ng-deep .p-treetable,::ng-deep .p-selectbutton,::ng-deep .p-stepper,::ng-deep .p-inputgroup,::ng-deep .p-inputgroup-addon,::ng-deep .p-text{font-family:Inter var,Inter,sans-serif!important}:host ::ng-deep .inputs{height:1.875rem}:host ::ng-deep .inputs,.p-inputtext,.p-inputtextarea{font-size:.875rem}::ng-deep .p-dialog .p-dialog-header{color:#fff!important;background:#002542!important;display:flex!important;flex-wrap:wrap;word-wrap:break-word}::ng-deep .p-dialog .p-dialog-content{padding-top:1rem}::ng-deep .p-dialog{min-width:320px}::ng-deep .p-dialog-content{overflow-x:hidden}::ng-deep .p-dialog-content::-webkit-scrollbar{width:8px}::ng-deep .p-dialog-content::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-dialog-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-dialog-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-dialog-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-dialog-footer{display:flex;justify-content:flex-end;padding:10px;gap:10px}::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{display:none}::ng-deep .p-tooltip{font-size:.825rem!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: KvErrorComponent, selector: "kv-error", inputs: ["formControl", "hasError"] }, { kind: "component", type: KvLabelComponent, selector: "kv-label", inputs: ["componentId", "label"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i7$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }] }); }
|
|
5463
5465
|
}
|
|
5464
5466
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvMultiSelectComponent, decorators: [{
|
|
5465
5467
|
type: Component,
|
|
5466
|
-
args: [{ selector: 'kv-multi-select', providers: ComponentProviders(KvMultiSelectComponent), template: "<span [ngClass]=\"{'disable': optionInactive === true}\">\r\n <kv-label\r\n [componentId]=\"componentId\"\r\n [label]=\"label && (label + (showAsterisk ? '*' : ''))\"\r\n />\r\n\r\n <p-multiSelect\r\n display=\"chip\"\r\n inputId=\"multiselect\"\r\n styleClass=\"inputs\"\r\n [class]=\"baseInputClass\"\r\n [group]=\"group\"\r\n [disabled]=\"disabled\"\r\n [options]=\"options\"\r\n [optionDisabled]=\" inactiveOptions\"\r\n [optionLabel]=\"optionLabel\"\r\n [optionValue]=\"optionValue\"\r\n [filter]=\"filter\"\r\n [showClear]=\"showClear\"\r\n [(ngModel)]=\"value\"\r\n (onChange)=\"selectionChange($event)\"\r\n (onPanelHide)=\"panelHide($event)\"\r\n [maxSelectedLabels]=\"maxSelectedLabels\"\r\n >\r\n\r\n\r\n <ng-template\r\n let-item\r\n pTemplate=\"item\"\r\n *ngIf=\"itemTemplate\"\r\n >\r\n <ng-container\r\n [ngTemplateOutlet]=\"itemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n >\r\n\r\n </ng-container>\r\n </ng-template>\r\n\r\n\r\n </p-multiSelect>\r\n <kv-error [hasError]=\"hasControlError()\">{{ erroMessage() }}</kv-error>\r\n</span>\r\n<ng-content></ng-content>\r\n", styles: [":host ::ng-deep .disable .p-multiselect.p-multiselect-chip .p-multiselect-token .p-icon-wrapper{display:none!important}::ng-deep .p-multiselect.p-multiselect-chip .p-multiselect-token{padding:.1rem .4rem}::ng-deep .p-multiselect-label{padding:.3rem;display:flex}::ng-deep .p-multiselect-item{font-size:.875rem;padding:.5rem;text-overflow:ellipsis;width:100%}::ng-deep .p-multiselect{width:100%}::ng-deep p-multiselect p-overlay .p-overlay{max-width:100%}::ng-deep .p-multiselect-items-wrapper .p-multiselect-items{padding:.75rem}::ng-deep .p-multiselect-filter{height:1.875rem}::ng-deep .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message{padding:.75rem;font-size:.875rem}::ng-deep .p-multiselect-panel .p-multiselect-header{padding:.5rem}\n", "@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\";::ng-deep :root{--kv-primary-color: 41, 185, 45;--kv-secondary-color: 0, 37, 66;--kv-tertiary-color: 165, 165, 165}.material-symbols-outlined{font-family:Material Symbols Outlined!important}*{font-family:Inter var,Inter,sans-serif!important}::ng-deep .p-accordion,::ng-deep .p-accordion-header,::ng-deep .p-accordion-content,::ng-deep .p-badge,::ng-deep .p-overlay-badge,::ng-deep .p-breadcrumb,::ng-deep .p-breadcrumb-item,::ng-deep .p-breadcrumb-link,::ng-deep .p-button,::ng-deep .p-calendar,::ng-deep .p-card,::ng-deep .p-card-title,::ng-deep .p-card-subtitle,::ng-deep .p-card-content,::ng-deep .p-checkbox,::ng-deep .p-chip,::ng-deep .p-confirm-dialog,::ng-deep .p-confirm-dialog-message,::ng-deep .p-contextmenu,::ng-deep .p-contextmenu-item,::ng-deep .p-dataview,::ng-deep .p-dataview-content,::ng-deep .p-dialog,::ng-deep .p-dialog-title,::ng-deep .p-dialog-content,::ng-deep .p-dropdown,::ng-deep .p-dropdown-label,::ng-deep .p-dropdown-item,::ng-deep .p-dynamic-dialog,::ng-deep .p-dynamic-dialog-title,::ng-deep .p-dynamic-dialog-content,::ng-deep .p-editor,::ng-deep .p-fieldset,::ng-deep .p-fieldset-legend,::ng-deep .p-fieldset-content,::ng-deep .p-fileupload,::ng-deep .p-inputmask,::ng-deep .p-inputnumber,::ng-deep .p-inputtextarea,::ng-deep .p-inputtext,::ng-deep .p-menu,::ng-deep .p-menuitem,::ng-deep .p-menuitem-text,::ng-deep .p-message,::ng-deep .p-messages,::ng-deep .p-multiselect,::ng-deep .p-multiselect-label,::ng-deep .p-multiselect-item,::ng-deep .p-panelmenu,::ng-deep .p-panelmenu-header,::ng-deep .p-panelmenu-content,::ng-deep .p-panel,::ng-deep .p-panel-header,::ng-deep .p-panel-content,::ng-deep .p-password,::ng-deep .p-picklist,::ng-deep .p-progressbar,::ng-deep .p-radiobutton,::ng-deep .p-rating,::ng-deep .p-sidebar,::ng-deep .p-splitbutton,::ng-deep .p-steps,::ng-deep .p-step,::ng-deep .p-table,::ng-deep .p-datatable,::ng-deep .p-tabview,::ng-deep .p-tabpanel,::ng-deep .p-tag,::ng-deep .p-toast,::ng-deep .p-toolbar,::ng-deep .p-tooltip,::ng-deep .p-tree,::ng-deep .p-treetable,::ng-deep .p-selectbutton,::ng-deep .p-stepper,::ng-deep .p-inputgroup,::ng-deep .p-inputgroup-addon,::ng-deep .p-text{font-family:Inter var,Inter,sans-serif!important}:host ::ng-deep .inputs{height:1.875rem}:host ::ng-deep .inputs,.p-inputtext,.p-inputtextarea{font-size:.875rem}::ng-deep .p-dialog .p-dialog-header{color:#fff!important;background:#002542!important;display:flex!important;flex-wrap:wrap;word-wrap:break-word}::ng-deep .p-dialog .p-dialog-content{padding-top:1rem}::ng-deep .p-dialog{min-width:320px}::ng-deep .p-dialog-content{overflow-x:hidden}::ng-deep .p-dialog-content::-webkit-scrollbar{width:8px}::ng-deep .p-dialog-content::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-dialog-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-dialog-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-dialog-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-dialog-footer{display:flex;justify-content:flex-end;padding:10px;gap:10px}::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{display:none}::ng-deep .p-tooltip{font-size:.825rem!important}\n"] }]
|
|
5468
|
+
args: [{ selector: 'kv-multi-select', providers: ComponentProviders(KvMultiSelectComponent), template: "<span [ngClass]=\"{'disable': optionInactive === true}\">\r\n <kv-label\r\n [componentId]=\"componentId\"\r\n [label]=\"label && (label + (showAsterisk ? '*' : ''))\"\r\n />\r\n\r\n <p-multiSelect\r\n display=\"chip\"\r\n inputId=\"multiselect\"\r\n styleClass=\"inputs\"\r\n [class]=\"baseInputClass\"\r\n [group]=\"group\"\r\n [disabled]=\"disabled\"\r\n [options]=\"options\"\r\n [optionDisabled]=\" inactiveOptions\"\r\n [optionLabel]=\"optionLabel\"\r\n [optionValue]=\"optionValue\"\r\n [filter]=\"filter\"\r\n [showClear]=\"showClear\"\r\n [(ngModel)]=\"value\"\r\n (onChange)=\"selectionChange($event)\"\r\n (onPanelHide)=\"panelHide($event)\"\r\n [maxSelectedLabels]=\"maxSelectedLabels\"\r\n [appendTo]=\"appendTo\"\r\n >\r\n\r\n\r\n <ng-template\r\n let-item\r\n pTemplate=\"item\"\r\n *ngIf=\"itemTemplate\"\r\n >\r\n <ng-container\r\n [ngTemplateOutlet]=\"itemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n >\r\n\r\n </ng-container>\r\n </ng-template>\r\n\r\n\r\n </p-multiSelect>\r\n <kv-error [hasError]=\"hasControlError()\">{{ erroMessage() }}</kv-error>\r\n</span>\r\n<ng-content></ng-content>\r\n", styles: [":host ::ng-deep .disable .p-multiselect.p-multiselect-chip .p-multiselect-token .p-icon-wrapper{display:none!important}::ng-deep .p-multiselect.p-multiselect-chip .p-multiselect-token{padding:.1rem .4rem}::ng-deep .p-multiselect-label{padding:.3rem;display:flex}::ng-deep .p-multiselect-item{font-size:.875rem;padding:.5rem;text-overflow:ellipsis;width:100%}::ng-deep .p-multiselect{width:100%}::ng-deep p-multiselect p-overlay .p-overlay{max-width:100%}::ng-deep .p-multiselect-items-wrapper .p-multiselect-items{padding:.75rem}::ng-deep .p-multiselect-filter{height:1.875rem}::ng-deep .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message{padding:.75rem;font-size:.875rem}::ng-deep .p-multiselect-panel .p-multiselect-header{padding:.5rem}\n", "@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\";::ng-deep :root{--kv-primary-color: 41, 185, 45;--kv-secondary-color: 0, 37, 66;--kv-tertiary-color: 165, 165, 165}.material-symbols-outlined{font-family:Material Symbols Outlined!important}*{font-family:Inter var,Inter,sans-serif!important}::ng-deep .p-accordion,::ng-deep .p-accordion-header,::ng-deep .p-accordion-content,::ng-deep .p-badge,::ng-deep .p-overlay-badge,::ng-deep .p-breadcrumb,::ng-deep .p-breadcrumb-item,::ng-deep .p-breadcrumb-link,::ng-deep .p-button,::ng-deep .p-calendar,::ng-deep .p-card,::ng-deep .p-card-title,::ng-deep .p-card-subtitle,::ng-deep .p-card-content,::ng-deep .p-checkbox,::ng-deep .p-chip,::ng-deep .p-confirm-dialog,::ng-deep .p-confirm-dialog-message,::ng-deep .p-contextmenu,::ng-deep .p-contextmenu-item,::ng-deep .p-dataview,::ng-deep .p-dataview-content,::ng-deep .p-dialog,::ng-deep .p-dialog-title,::ng-deep .p-dialog-content,::ng-deep .p-dropdown,::ng-deep .p-dropdown-label,::ng-deep .p-dropdown-item,::ng-deep .p-dynamic-dialog,::ng-deep .p-dynamic-dialog-title,::ng-deep .p-dynamic-dialog-content,::ng-deep .p-editor,::ng-deep .p-fieldset,::ng-deep .p-fieldset-legend,::ng-deep .p-fieldset-content,::ng-deep .p-fileupload,::ng-deep .p-inputmask,::ng-deep .p-inputnumber,::ng-deep .p-inputtextarea,::ng-deep .p-inputtext,::ng-deep .p-menu,::ng-deep .p-menuitem,::ng-deep .p-menuitem-text,::ng-deep .p-message,::ng-deep .p-messages,::ng-deep .p-multiselect,::ng-deep .p-multiselect-label,::ng-deep .p-multiselect-item,::ng-deep .p-panelmenu,::ng-deep .p-panelmenu-header,::ng-deep .p-panelmenu-content,::ng-deep .p-panel,::ng-deep .p-panel-header,::ng-deep .p-panel-content,::ng-deep .p-password,::ng-deep .p-picklist,::ng-deep .p-progressbar,::ng-deep .p-radiobutton,::ng-deep .p-rating,::ng-deep .p-sidebar,::ng-deep .p-splitbutton,::ng-deep .p-steps,::ng-deep .p-step,::ng-deep .p-table,::ng-deep .p-datatable,::ng-deep .p-tabview,::ng-deep .p-tabpanel,::ng-deep .p-tag,::ng-deep .p-toast,::ng-deep .p-toolbar,::ng-deep .p-tooltip,::ng-deep .p-tree,::ng-deep .p-treetable,::ng-deep .p-selectbutton,::ng-deep .p-stepper,::ng-deep .p-inputgroup,::ng-deep .p-inputgroup-addon,::ng-deep .p-text{font-family:Inter var,Inter,sans-serif!important}:host ::ng-deep .inputs{height:1.875rem}:host ::ng-deep .inputs,.p-inputtext,.p-inputtextarea{font-size:.875rem}::ng-deep .p-dialog .p-dialog-header{color:#fff!important;background:#002542!important;display:flex!important;flex-wrap:wrap;word-wrap:break-word}::ng-deep .p-dialog .p-dialog-content{padding-top:1rem}::ng-deep .p-dialog{min-width:320px}::ng-deep .p-dialog-content{overflow-x:hidden}::ng-deep .p-dialog-content::-webkit-scrollbar{width:8px}::ng-deep .p-dialog-content::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-dialog-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-dialog-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-dialog-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-dialog-footer{display:flex;justify-content:flex-end;padding:10px;gap:10px}::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{display:none}::ng-deep .p-tooltip{font-size:.825rem!important}\n"] }]
|
|
5467
5469
|
}], ctorParameters: () => [{ type: ComponentService }], propDecorators: { group: [{
|
|
5468
5470
|
type: Input
|
|
5469
5471
|
}], itemTemplate: [{
|
|
@@ -5472,6 +5474,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
|
|
|
5472
5474
|
type: Input
|
|
5473
5475
|
}], optionInactive: [{
|
|
5474
5476
|
type: Input
|
|
5477
|
+
}], appendTo: [{
|
|
5478
|
+
type: Input
|
|
5475
5479
|
}] } });
|
|
5476
5480
|
|
|
5477
5481
|
class KvRadioGroupComponent extends BaseComponentInput {
|
|
@@ -9329,12 +9333,14 @@ class KvContentViewerComponent {
|
|
|
9329
9333
|
}
|
|
9330
9334
|
}
|
|
9331
9335
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvContentViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9332
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvContentViewerComponent, selector: "kv-content-viewer", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, arquivo: { classPropertyName: "arquivo", publicName: "arquivo", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, blob: { classPropertyName: "blob", publicName: "blob", isSignal: true, isRequired: false, transformFunction: null }, ekpContent: { classPropertyName: "ekpContent", publicName: "ekpContent", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: false, isRequired: false, transformFunction: null }, visualizadorDocumentos: { classPropertyName: "visualizadorDocumentos", publicName: "visualizadorDocumentos", isSignal: false, isRequired: false, transformFunction: null }, cardTemplate: { classPropertyName: "cardTemplate", publicName: "cardTemplate", isSignal: false, isRequired: false, transformFunction: null }, contentTemplate: { classPropertyName: "contentTemplate", publicName: "contentTemplate", isSignal: false, isRequired: false, transformFunction: null }, noDocumentSelectedTemplate: { classPropertyName: "noDocumentSelectedTemplate", publicName: "noDocumentSelectedTemplate", isSignal: false, isRequired: false, transformFunction: null }, noDocumentListTemplate: { classPropertyName: "noDocumentListTemplate", publicName: "noDocumentListTemplate", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onScrollHandler: "onScrollHandler", onSelectFile: "onSelectFile" }, ngImport: i0, template: "<div class=\"flex flex-column md:flex-row gap-2 mt-3 custom-max-height\">\r\n <!-- Lista de documentos -->\r\n <div\r\n class=\"card-perfil overflow-x-hidden\"\r\n (scroll)=\"scrollHandler($event)\"\r\n [ngClass]=\"{\r\n 'overflow-y-scroll': dataSource().length > 0,\r\n 'overflow-y-hidden': dataSource().length === 0\r\n }\"\r\n style=\"position: relative; max-height:
|
|
9336
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvContentViewerComponent, selector: "kv-content-viewer", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, arquivo: { classPropertyName: "arquivo", publicName: "arquivo", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, blob: { classPropertyName: "blob", publicName: "blob", isSignal: true, isRequired: false, transformFunction: null }, ekpContent: { classPropertyName: "ekpContent", publicName: "ekpContent", isSignal: true, isRequired: false, transformFunction: null }, extencaoDocumento: { classPropertyName: "extencaoDocumento", publicName: "extencaoDocumento", isSignal: false, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: false, isRequired: false, transformFunction: null }, visualizadorDocumentos: { classPropertyName: "visualizadorDocumentos", publicName: "visualizadorDocumentos", isSignal: false, isRequired: false, transformFunction: null }, cardTemplate: { classPropertyName: "cardTemplate", publicName: "cardTemplate", isSignal: false, isRequired: false, transformFunction: null }, contentTemplate: { classPropertyName: "contentTemplate", publicName: "contentTemplate", isSignal: false, isRequired: false, transformFunction: null }, noDocumentSelectedTemplate: { classPropertyName: "noDocumentSelectedTemplate", publicName: "noDocumentSelectedTemplate", isSignal: false, isRequired: false, transformFunction: null }, noDocumentListTemplate: { classPropertyName: "noDocumentListTemplate", publicName: "noDocumentListTemplate", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onScrollHandler: "onScrollHandler", onSelectFile: "onSelectFile" }, ngImport: i0, template: "<div class=\"flex flex-column md:flex-row gap-2 mt-3 custom-max-height\">\r\n <!-- Lista de documentos -->\r\n <div\r\n class=\"card-perfil overflow-x-hidden\"\r\n (scroll)=\"scrollHandler($event)\"\r\n [ngClass]=\"{\r\n 'overflow-y-scroll': dataSource().length > 0,\r\n 'overflow-y-hidden': dataSource().length === 0\r\n }\"\r\n style=\"position: relative; height: 1000vh; max-height: calc(100vh - 100px);\"\r\n >\r\n <div *ngIf=\"dataSource().length > 0; else emptyDocumentList\" class=\"col-12\">\r\n <!-- Lista de cards -->\r\n <div\r\n *ngFor=\"let option of dataSource(); trackBy: trackByFn\"\r\n class=\"card-normal outline-none border-round-xl w-full p-2 m-1 grid p-fluid flex flex-row flex-nowrap align-items-center justify-content-center cursor-pointer\"\r\n style=\"min-height: 5rem\"\r\n (click)=\"visualizarPreview(option)\"\r\n [ngClass]=\"{\r\n 'card-selected': option === arquivoPreview(),\r\n 'card-normal': option !== arquivoPreview(),\r\n }\"\r\n >\r\n <div class=\"flex flex-grow-1 ml-2 flex-column gap-1 m-0 p-0 overflow-hidden text-overflow-ellipsis \" style=\"max-width: 100%;\">\r\n <ng-container *ngIf=\"cardTemplate; else defaultTemplate\">\r\n <ng-container \r\n *ngTemplateOutlet=\"cardTemplate; context: { $implicit: option }\"\r\n ></ng-container>\r\n </ng-container>\r\n </div>\r\n <ng-template #defaultTemplate>\r\n <div class=\"card-common-style default-card\">\r\n <h1 class=\"font-bold text-base p-0 m-0\">Bem-vindo!</h1>\r\n <p class=\"text-sm mt-2\">\r\n Kv-file-preview aguardando um template...\r\n </p>\r\n <p class=\"font-bold text-sm p-0 m-0\">Data: {{ todayDate() }}</p>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n\r\n <ng-template #emptyDocumentList>\r\n @if(!noDocumentListTemplate) {\r\n <div class=\"text-center text-gray-600 mt-4 m-3\" style=\"height: 100%\">\r\n <div class=\" flex align-items-center gap-1\">\r\n <span class=\"material-symbols-outlined\"> inbox </span>\r\n <p>Nenhum documento dispon\u00EDvel.</p>\r\n </div>\r\n </div>\r\n } @else {\r\n <div class=\"text-center mt-4 m-3\" style=\"height: 100%\">\r\n <ng-container *ngTemplateOutlet=\"noDocumentListTemplate\"></ng-container>\r\n </div>\r\n }\r\n </ng-template>\r\n\r\n <!-- Contador de documentos - Fixo na parte inferior -->\r\n <div\r\n class=\"sticky-counter flex flex-row flex-1 px-2 justify-content-center p-2\"\r\n style=\"position: sticky; bottom: 0; background-color: white\"\r\n >\r\n <span>{{ totalItensCarregado() }} de {{ totalRecords }}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Visualizador -->\r\n <div class=\"card-perfil col-12 md:col-8 lg:col-9\" style=\"position: relative\">\r\n @if(visualizadorDocumentos) {\r\n <ng-container *ngIf=\"arquivo(); else noDocumentSelected\">\r\n @if(isLoading) {\r\n <ngx-loading\r\n [show]=\"isLoading\"\r\n [config]=\"{ backdropBorderRadius: '3px', fullScreenBackdrop: false }\"\r\n ></ngx-loading>\r\n }\r\n <kv-file-viewer-novo\r\n *ngIf=\"extencaoDocumento !== 'ekp'\"\r\n [arquivo]=\"arquivo()!\"\r\n [type]=\"type()!\"\r\n [blob]=\"blob()!\"\r\n [width]=\"'100%'\" \r\n [height]=\"'100%'\"\r\n class=\"file-viewer\"\r\n >\r\n </kv-file-viewer-novo>\r\n \r\n <div\r\n id=\"html-content\"\r\n [innerHTML]=\"ekpContent()\"\r\n *ngIf=\"extencaoDocumento === 'ekp'\"\r\n class=\"ekp-content\"\r\n ></div>\r\n </ng-container>\r\n } @else {\r\n <ng-container *ngIf=\"arquivoPreview(); else noDocumentSelected\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n contentTemplate;\r\n context: { $implicit: arquivoPreview() }\r\n \"\r\n ></ng-container>\r\n </ng-container>\r\n }\r\n <ng-template #noDocumentSelected>\r\n @if(!noDocumentSelectedTemplate) {\r\n <div\r\n class=\"no-document-message flex flex-column align-items-center justify-content-center\"\r\n style=\"height: 100%\"\r\n >\r\n <p class=\"text-center text-gray-500\">\r\n Selecione um arquivo para visualiza\u00E7\u00E3o\r\n </p>\r\n <img\r\n [src]=\"\r\n 'https://work-assets.keevo.com.br/img/Digital_personal_files-pana_3.png'\r\n \"\r\n style=\"max-height: 50%;\"\r\n alt=\"\"\r\n />\r\n </div>\r\n } @else {\r\n <ng-container\r\n *ngTemplateOutlet=\"noDocumentSelectedTemplate\"\r\n ></ng-container>\r\n }\r\n </ng-template>\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.farol-statuspublicacao{margin-right:.5rem;width:.35rem;border-radius:1rem;-webkit-border-radius:1rem;-moz-border-radius:1rem;-ms-border-radius:1rem;-o-border-radius:1rem}:host ::ng-deep .p-sidebar{border-radius:5px;position:absolute;height:var(--sidebar-height)}:host ::ng-deep .p-sidebar .p-sidebar-content{overflow:auto;border:1px solid #e5e7eb;border-radius:5px;margin-top:1rem}.card-perfil{border:1.5px solid #CBD5E1;background:#fff;border-radius:6px;max-height:100%}:host ::ng-deep .p-fieldset .p-fieldset-content{padding-bottom:0}:host ::ng-deep .p-sidebar .p-sidebar-close{display:none}.card-normal{border:1.5px solid #CBD5E1}.card-naoVisualizado{border-left:4px solid #e6671f!important}.parent-container{height:100%;display:flex;flex-direction:column}.file-viewer{margin:auto}.ekp-content{min-height:20rem;padding:1rem;overflow-y:auto;border-radius:5px}ngx-loading{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1000}.card{transition:all .3s ease;border:1px solid transparent}.card-normal:hover{border:1px solid #a9a9a9;box-shadow:0 4px 8px #0000001a}.card-selected{background-color:#f0f0f0;border:1px solid #c0c0c0;box-shadow:0 6px 12px #00000026;transform:scale(1.02)}.loading-spinner{display:flex;align-items:center;justify-content:center;height:100%;font-size:1.5rem;color:#666}#html-content{width:100%;height:100%;overflow-y:auto}:host ::ng-deep .list-card-button .kv-button{width:22px;height:22px}:host ::ng-deep .list-card-button .kv-button .material-symbols-outlined.only-icon.icon-normal[_ngcontent-ng-c4083184952]{font-size:1rem}.custom-max-height{max-height:98%}@media (max-height: 915px){.custom-max-height{max-height:94%}}@media (max-height: 805px){.custom-max-height{max-height:90%}}@media (max-height: 720px){.custom-max-height{max-height:85%}}.download-icon{font-size:20px;cursor:pointer;transition:transform .3s ease,color .3s ease}.download-icon:hover{color:#0f6cbd;transform:scale(1.2)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KvFileViewerNovoComponent, selector: "kv-file-viewer-novo", inputs: ["arquivo", "type", "blob", "width", "height"] }, { kind: "component", type: i1$4.NgxLoadingComponent, selector: "ngx-loading", inputs: ["show", "config", "template"] }] }); }
|
|
9333
9337
|
}
|
|
9334
9338
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvContentViewerComponent, decorators: [{
|
|
9335
9339
|
type: Component,
|
|
9336
|
-
args: [{ selector: 'kv-content-viewer', template: "<div class=\"flex flex-column md:flex-row gap-2 mt-3 custom-max-height\">\r\n <!-- Lista de documentos -->\r\n <div\r\n class=\"card-perfil overflow-x-hidden\"\r\n (scroll)=\"scrollHandler($event)\"\r\n [ngClass]=\"{\r\n 'overflow-y-scroll': dataSource().length > 0,\r\n 'overflow-y-hidden': dataSource().length === 0\r\n }\"\r\n style=\"position: relative; max-height:
|
|
9337
|
-
}], propDecorators: {
|
|
9340
|
+
args: [{ selector: 'kv-content-viewer', template: "<div class=\"flex flex-column md:flex-row gap-2 mt-3 custom-max-height\">\r\n <!-- Lista de documentos -->\r\n <div\r\n class=\"card-perfil overflow-x-hidden\"\r\n (scroll)=\"scrollHandler($event)\"\r\n [ngClass]=\"{\r\n 'overflow-y-scroll': dataSource().length > 0,\r\n 'overflow-y-hidden': dataSource().length === 0\r\n }\"\r\n style=\"position: relative; height: 1000vh; max-height: calc(100vh - 100px);\"\r\n >\r\n <div *ngIf=\"dataSource().length > 0; else emptyDocumentList\" class=\"col-12\">\r\n <!-- Lista de cards -->\r\n <div\r\n *ngFor=\"let option of dataSource(); trackBy: trackByFn\"\r\n class=\"card-normal outline-none border-round-xl w-full p-2 m-1 grid p-fluid flex flex-row flex-nowrap align-items-center justify-content-center cursor-pointer\"\r\n style=\"min-height: 5rem\"\r\n (click)=\"visualizarPreview(option)\"\r\n [ngClass]=\"{\r\n 'card-selected': option === arquivoPreview(),\r\n 'card-normal': option !== arquivoPreview(),\r\n }\"\r\n >\r\n <div class=\"flex flex-grow-1 ml-2 flex-column gap-1 m-0 p-0 overflow-hidden text-overflow-ellipsis \" style=\"max-width: 100%;\">\r\n <ng-container *ngIf=\"cardTemplate; else defaultTemplate\">\r\n <ng-container \r\n *ngTemplateOutlet=\"cardTemplate; context: { $implicit: option }\"\r\n ></ng-container>\r\n </ng-container>\r\n </div>\r\n <ng-template #defaultTemplate>\r\n <div class=\"card-common-style default-card\">\r\n <h1 class=\"font-bold text-base p-0 m-0\">Bem-vindo!</h1>\r\n <p class=\"text-sm mt-2\">\r\n Kv-file-preview aguardando um template...\r\n </p>\r\n <p class=\"font-bold text-sm p-0 m-0\">Data: {{ todayDate() }}</p>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n\r\n <ng-template #emptyDocumentList>\r\n @if(!noDocumentListTemplate) {\r\n <div class=\"text-center text-gray-600 mt-4 m-3\" style=\"height: 100%\">\r\n <div class=\" flex align-items-center gap-1\">\r\n <span class=\"material-symbols-outlined\"> inbox </span>\r\n <p>Nenhum documento dispon\u00EDvel.</p>\r\n </div>\r\n </div>\r\n } @else {\r\n <div class=\"text-center mt-4 m-3\" style=\"height: 100%\">\r\n <ng-container *ngTemplateOutlet=\"noDocumentListTemplate\"></ng-container>\r\n </div>\r\n }\r\n </ng-template>\r\n\r\n <!-- Contador de documentos - Fixo na parte inferior -->\r\n <div\r\n class=\"sticky-counter flex flex-row flex-1 px-2 justify-content-center p-2\"\r\n style=\"position: sticky; bottom: 0; background-color: white\"\r\n >\r\n <span>{{ totalItensCarregado() }} de {{ totalRecords }}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Visualizador -->\r\n <div class=\"card-perfil col-12 md:col-8 lg:col-9\" style=\"position: relative\">\r\n @if(visualizadorDocumentos) {\r\n <ng-container *ngIf=\"arquivo(); else noDocumentSelected\">\r\n @if(isLoading) {\r\n <ngx-loading\r\n [show]=\"isLoading\"\r\n [config]=\"{ backdropBorderRadius: '3px', fullScreenBackdrop: false }\"\r\n ></ngx-loading>\r\n }\r\n <kv-file-viewer-novo\r\n *ngIf=\"extencaoDocumento !== 'ekp'\"\r\n [arquivo]=\"arquivo()!\"\r\n [type]=\"type()!\"\r\n [blob]=\"blob()!\"\r\n [width]=\"'100%'\" \r\n [height]=\"'100%'\"\r\n class=\"file-viewer\"\r\n >\r\n </kv-file-viewer-novo>\r\n \r\n <div\r\n id=\"html-content\"\r\n [innerHTML]=\"ekpContent()\"\r\n *ngIf=\"extencaoDocumento === 'ekp'\"\r\n class=\"ekp-content\"\r\n ></div>\r\n </ng-container>\r\n } @else {\r\n <ng-container *ngIf=\"arquivoPreview(); else noDocumentSelected\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n contentTemplate;\r\n context: { $implicit: arquivoPreview() }\r\n \"\r\n ></ng-container>\r\n </ng-container>\r\n }\r\n <ng-template #noDocumentSelected>\r\n @if(!noDocumentSelectedTemplate) {\r\n <div\r\n class=\"no-document-message flex flex-column align-items-center justify-content-center\"\r\n style=\"height: 100%\"\r\n >\r\n <p class=\"text-center text-gray-500\">\r\n Selecione um arquivo para visualiza\u00E7\u00E3o\r\n </p>\r\n <img\r\n [src]=\"\r\n 'https://work-assets.keevo.com.br/img/Digital_personal_files-pana_3.png'\r\n \"\r\n style=\"max-height: 50%;\"\r\n alt=\"\"\r\n />\r\n </div>\r\n } @else {\r\n <ng-container\r\n *ngTemplateOutlet=\"noDocumentSelectedTemplate\"\r\n ></ng-container>\r\n }\r\n </ng-template>\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.farol-statuspublicacao{margin-right:.5rem;width:.35rem;border-radius:1rem;-webkit-border-radius:1rem;-moz-border-radius:1rem;-ms-border-radius:1rem;-o-border-radius:1rem}:host ::ng-deep .p-sidebar{border-radius:5px;position:absolute;height:var(--sidebar-height)}:host ::ng-deep .p-sidebar .p-sidebar-content{overflow:auto;border:1px solid #e5e7eb;border-radius:5px;margin-top:1rem}.card-perfil{border:1.5px solid #CBD5E1;background:#fff;border-radius:6px;max-height:100%}:host ::ng-deep .p-fieldset .p-fieldset-content{padding-bottom:0}:host ::ng-deep .p-sidebar .p-sidebar-close{display:none}.card-normal{border:1.5px solid #CBD5E1}.card-naoVisualizado{border-left:4px solid #e6671f!important}.parent-container{height:100%;display:flex;flex-direction:column}.file-viewer{margin:auto}.ekp-content{min-height:20rem;padding:1rem;overflow-y:auto;border-radius:5px}ngx-loading{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1000}.card{transition:all .3s ease;border:1px solid transparent}.card-normal:hover{border:1px solid #a9a9a9;box-shadow:0 4px 8px #0000001a}.card-selected{background-color:#f0f0f0;border:1px solid #c0c0c0;box-shadow:0 6px 12px #00000026;transform:scale(1.02)}.loading-spinner{display:flex;align-items:center;justify-content:center;height:100%;font-size:1.5rem;color:#666}#html-content{width:100%;height:100%;overflow-y:auto}:host ::ng-deep .list-card-button .kv-button{width:22px;height:22px}:host ::ng-deep .list-card-button .kv-button .material-symbols-outlined.only-icon.icon-normal[_ngcontent-ng-c4083184952]{font-size:1rem}.custom-max-height{max-height:98%}@media (max-height: 915px){.custom-max-height{max-height:94%}}@media (max-height: 805px){.custom-max-height{max-height:90%}}@media (max-height: 720px){.custom-max-height{max-height:85%}}.download-icon{font-size:20px;cursor:pointer;transition:transform .3s ease,color .3s ease}.download-icon:hover{color:#0f6cbd;transform:scale(1.2)}\n"] }]
|
|
9341
|
+
}], propDecorators: { extencaoDocumento: [{
|
|
9342
|
+
type: Input
|
|
9343
|
+
}], totalRecords: [{
|
|
9338
9344
|
type: Input
|
|
9339
9345
|
}], visualizadorDocumentos: [{
|
|
9340
9346
|
type: Input
|