keevo-components 1.8.452 → 1.8.453
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/api/services/component.service.mjs +2 -2
- package/esm2022/lib/components/kv-content-viewer/kv-content-viewer.component.mjs +9 -5
- package/esm2022/lib/components/kv-content-viewer/kv-content-viewer.module.mjs +5 -1
- package/esm2022/lib/components/kv-orgchart/kv-orgchart.component.mjs +3 -3
- package/fesm2022/keevo-components.mjs +11 -5
- package/fesm2022/keevo-components.mjs.map +1 -1
- package/lib/components/kv-content-viewer/kv-content-viewer.component.d.ts +2 -1
- package/lib/components/kv-content-viewer/kv-content-viewer.module.d.ts +4 -3
- 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
|
@@ -1205,7 +1205,7 @@ class ComponentService {
|
|
|
1205
1205
|
this.changeDetectorRef = changeDetectorRef;
|
|
1206
1206
|
}
|
|
1207
1207
|
getFormControl() {
|
|
1208
|
-
const control = this.injector.get(NgControl
|
|
1208
|
+
const control = this.injector.get(NgControl)?.control;
|
|
1209
1209
|
return control instanceof FormControl ? control : undefined;
|
|
1210
1210
|
}
|
|
1211
1211
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ComponentService, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
@@ -6618,11 +6618,11 @@ class KvOrgchartComponent {
|
|
|
6618
6618
|
this.filter.clear();
|
|
6619
6619
|
}
|
|
6620
6620
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvOrgchartComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: OrgChartService }, { token: i1$2.FilterService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6621
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.8", type: KvOrgchartComponent, selector: "kv-orgchart", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: false, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: false, isRequired: false, transformFunction: null }, filterItemTemplate: { classPropertyName: "filterItemTemplate", publicName: "filterItemTemplate", isSignal: false, isRequired: false, transformFunction: null }, filterSelectedItemTemplate: { classPropertyName: "filterSelectedItemTemplate", publicName: "filterSelectedItemTemplate", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { dataSource: "dataSourceChange", onNodeClick: "onNodeClick" }, viewQueries: [{ propertyName: "chartContainer", first: true, predicate: ["chartContainer"], descendants: true }, { propertyName: "viewContainerRef", first: true, predicate: ["nodeTemplate"], descendants: true, read: ViewContainerRef }, { propertyName: "filter", first: true, predicate: ["filter"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #chartContainer id=\"chartContainer\" [ngClass]=\"{ backGround: true }\">\r\n <div class=\"div-botoes w-full flex gap-1\">\r\n <div\r\n id=\"menubar\"\r\n class=\"shadow-2 flex justify-content-between align-content-center\"\r\n >\r\n <div class=\"grid formgrid p-fluid flex-grow-1\">\r\n <!-- <div #filterContainer class=\"col-4 grid formgrid p-fluid\">\r\n <kv-input-text class=\"col-12\" #filtro (onInput)=\"pesquisar($event)\">\r\n </kv-input-text>\r\n </div>\r\n\r\n @if(filtrosOpt().length > 0) {\r\n \r\n <div id=\"filtro-org-chart\" [style.width.px]=\"filterContainer.offsetWidth*0.9\">\r\n\r\n @for (opt of filtrosOpt(); track $index) {\r\n <div class=\"filtro-org-chart-item\">\r\n {{ opt.data.name }}\r\n\r\n </div>\r\n\r\n }\r\n\r\n </div>\r\n\r\n } -->\r\n\r\n <p-dropdown\r\n #filter\r\n placeholder=\"Filtrar...\"\r\n [style]=\"{\r\n height: '30px',\r\n 'display': 'flex',\r\n 'align-items': 'center',\r\n 'margin-left': '15px',\r\n 'max-width': '95%'\r\n }\"\r\n [filter]=\"true\"\r\n [filterFields]=\"config.filters\"\r\n
|
|
6621
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.8", type: KvOrgchartComponent, selector: "kv-orgchart", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: false, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: false, isRequired: false, transformFunction: null }, filterItemTemplate: { classPropertyName: "filterItemTemplate", publicName: "filterItemTemplate", isSignal: false, isRequired: false, transformFunction: null }, filterSelectedItemTemplate: { classPropertyName: "filterSelectedItemTemplate", publicName: "filterSelectedItemTemplate", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { dataSource: "dataSourceChange", onNodeClick: "onNodeClick" }, viewQueries: [{ propertyName: "chartContainer", first: true, predicate: ["chartContainer"], descendants: true }, { propertyName: "viewContainerRef", first: true, predicate: ["nodeTemplate"], descendants: true, read: ViewContainerRef }, { propertyName: "filter", first: true, predicate: ["filter"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #chartContainer id=\"chartContainer\" [ngClass]=\"{ backGround: true }\">\r\n <div class=\"div-botoes w-full flex gap-1\">\r\n <div\r\n id=\"menubar\"\r\n class=\"shadow-2 flex justify-content-between align-content-center\"\r\n >\r\n <div class=\"grid formgrid p-fluid flex-grow-1\">\r\n <!-- <div #filterContainer class=\"col-4 grid formgrid p-fluid\">\r\n <kv-input-text class=\"col-12\" #filtro (onInput)=\"pesquisar($event)\">\r\n </kv-input-text>\r\n </div>\r\n\r\n @if(filtrosOpt().length > 0) {\r\n \r\n <div id=\"filtro-org-chart\" [style.width.px]=\"filterContainer.offsetWidth*0.9\">\r\n\r\n @for (opt of filtrosOpt(); track $index) {\r\n <div class=\"filtro-org-chart-item\">\r\n {{ opt.data.name }}\r\n\r\n </div>\r\n\r\n }\r\n\r\n </div>\r\n\r\n } -->\r\n\r\n <p-dropdown\r\n #filter\r\n placeholder=\"Filtrar...\"\r\n [style]=\"{\r\n height: '30px',\r\n 'display': 'flex',\r\n 'align-items': 'center',\r\n 'margin-left': '15px',\r\n 'max-width': '95%'\r\n }\"\r\n [filter]=\"true\"\r\n [filterFields]=\"config.filters\"\r\n [options]=\"this.dataSource()!\"\r\n [showClear]=\"true\"\r\n (onChange)=\"centralizarNo($event.value.id)\"\r\n >\r\n <!-- [itemTemplate]=\"itemTemplate\"\r\n [selectedItemTemplate]=\"selectedItemTemplate\" -->\r\n <!-- [filteredOptions]=\"this.dataSource()!\" -->\r\n <!-- [filterFields]=\"data.name\" -->\r\n\r\n <ng-template #itemTemplate let-item pTemplate=\"item\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"filterItemTemplate!\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n />\r\n </ng-template>\r\n\r\n <ng-template #selectedItemTemplate let-item pTemplate=\"selectedItem\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"filterSelectedItemTemplate!\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n />\r\n </ng-template>\r\n </p-dropdown>\r\n </div>\r\n\r\n <!-- Actions bar -->\r\n <div class=\"flex gap-1 flex-row flex-grow-0\">\r\n <div style=\"width: 30px\" class=\"mr-2\">\r\n <kv-button\r\n (onClick)=\"chart.expandAll()\"\r\n class=\"button-expand-all\"\r\n [fullWidth]=\"false\"\r\n size=\"small\"\r\n severity=\"tertiary\"\r\n [icon]=\"'expand_all'\"\r\n [pTooltip]=\"'Expandir Todos'\"\r\n >\r\n </kv-button>\r\n </div>\r\n\r\n <div style=\"width: 30px\" class=\"mr-2\">\r\n <kv-button\r\n (onClick)=\"chart.collapseAll()\"\r\n class=\"button-colappse-all\"\r\n [fullWidth]=\"false\"\r\n size=\"small\"\r\n severity=\"tertiary\"\r\n [icon]=\"'collapse_all'\"\r\n [pTooltip]=\"'Recolher Todos'\"\r\n >\r\n </kv-button>\r\n </div>\r\n\r\n <div style=\"width: 30px\" class=\"mr-2\">\r\n <kv-button\r\n (onClick)=\"chart.fit().render()\"\r\n class=\"button-focus-center\"\r\n [fullWidth]=\"false\"\r\n size=\"small\"\r\n severity=\"primary\"\r\n [icon]=\"'center_focus_weak'\"\r\n [pTooltip]=\"'Centralizar Organograma'\"\r\n >\r\n </kv-button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<link\r\n rel=\"stylesheet\"\r\n href=\"https://fonts.googleapis.com/icon?family=Material+Icons\"\r\n/>\r\n\r\n<link\r\n rel=\"stylesheet\"\r\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0\"\r\n/>\r\n\r\n<div style=\"display: none\">\r\n <ng-template #nodeTemplate let-node>\r\n <div class=\"node-content\">erro</div>\r\n </ng-template>\r\n</div>\r\n", styles: ["#chartContainer{height:100%;overflow:hidden}:host ::ng-deep #chartContainer svg.svg-chart-container{height:100%!important;position:relative;width:100%;top:-56px;z-index:0;background-color:#fff}.div-botoes{z-index:1;width:100%;position:relative}:host ::ng-deep .p-organizationChart{overflow:hidden}svg{width:100%;height:100%}#menubar{width:100%;padding:5px;border-radius:8px;background:#eaeaea}.filtro-input{width:300px}#filtro-org-chart{height:300px;overflow-y:auto;overflow-x:hidden;position:absolute;top:40px;left:8px;background:#fff;color:#4b5563;border:0 none;border-radius:6px;box-shadow:0 2px 12px #0000001a}.filtro-org-chart-item{cursor:pointer;height:35px;padding:3px}.filtro-org-chart-item:hover{background-color:#d9dadb}.filtro-org-chart-item:active{background-color:#c0c1c2}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i4.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: KvButtonComponent, selector: "kv-button", inputs: ["fullWidth", "type", "loading", "severity", "size", "icon", "label", "disabled"], outputs: ["onClick"] }] }); }
|
|
6622
6622
|
}
|
|
6623
6623
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvOrgchartComponent, decorators: [{
|
|
6624
6624
|
type: Component,
|
|
6625
|
-
args: [{ selector: 'kv-orgchart', template: "<div #chartContainer id=\"chartContainer\" [ngClass]=\"{ backGround: true }\">\r\n <div class=\"div-botoes w-full flex gap-1\">\r\n <div\r\n id=\"menubar\"\r\n class=\"shadow-2 flex justify-content-between align-content-center\"\r\n >\r\n <div class=\"grid formgrid p-fluid flex-grow-1\">\r\n <!-- <div #filterContainer class=\"col-4 grid formgrid p-fluid\">\r\n <kv-input-text class=\"col-12\" #filtro (onInput)=\"pesquisar($event)\">\r\n </kv-input-text>\r\n </div>\r\n\r\n @if(filtrosOpt().length > 0) {\r\n \r\n <div id=\"filtro-org-chart\" [style.width.px]=\"filterContainer.offsetWidth*0.9\">\r\n\r\n @for (opt of filtrosOpt(); track $index) {\r\n <div class=\"filtro-org-chart-item\">\r\n {{ opt.data.name }}\r\n\r\n </div>\r\n\r\n }\r\n\r\n </div>\r\n\r\n } -->\r\n\r\n <p-dropdown\r\n #filter\r\n placeholder=\"Filtrar...\"\r\n [style]=\"{\r\n height: '30px',\r\n 'display': 'flex',\r\n 'align-items': 'center',\r\n 'margin-left': '15px',\r\n 'max-width': '95%'\r\n }\"\r\n [filter]=\"true\"\r\n [filterFields]=\"config.filters\"\r\n
|
|
6625
|
+
args: [{ selector: 'kv-orgchart', template: "<div #chartContainer id=\"chartContainer\" [ngClass]=\"{ backGround: true }\">\r\n <div class=\"div-botoes w-full flex gap-1\">\r\n <div\r\n id=\"menubar\"\r\n class=\"shadow-2 flex justify-content-between align-content-center\"\r\n >\r\n <div class=\"grid formgrid p-fluid flex-grow-1\">\r\n <!-- <div #filterContainer class=\"col-4 grid formgrid p-fluid\">\r\n <kv-input-text class=\"col-12\" #filtro (onInput)=\"pesquisar($event)\">\r\n </kv-input-text>\r\n </div>\r\n\r\n @if(filtrosOpt().length > 0) {\r\n \r\n <div id=\"filtro-org-chart\" [style.width.px]=\"filterContainer.offsetWidth*0.9\">\r\n\r\n @for (opt of filtrosOpt(); track $index) {\r\n <div class=\"filtro-org-chart-item\">\r\n {{ opt.data.name }}\r\n\r\n </div>\r\n\r\n }\r\n\r\n </div>\r\n\r\n } -->\r\n\r\n <p-dropdown\r\n #filter\r\n placeholder=\"Filtrar...\"\r\n [style]=\"{\r\n height: '30px',\r\n 'display': 'flex',\r\n 'align-items': 'center',\r\n 'margin-left': '15px',\r\n 'max-width': '95%'\r\n }\"\r\n [filter]=\"true\"\r\n [filterFields]=\"config.filters\"\r\n [options]=\"this.dataSource()!\"\r\n [showClear]=\"true\"\r\n (onChange)=\"centralizarNo($event.value.id)\"\r\n >\r\n <!-- [itemTemplate]=\"itemTemplate\"\r\n [selectedItemTemplate]=\"selectedItemTemplate\" -->\r\n <!-- [filteredOptions]=\"this.dataSource()!\" -->\r\n <!-- [filterFields]=\"data.name\" -->\r\n\r\n <ng-template #itemTemplate let-item pTemplate=\"item\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"filterItemTemplate!\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n />\r\n </ng-template>\r\n\r\n <ng-template #selectedItemTemplate let-item pTemplate=\"selectedItem\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"filterSelectedItemTemplate!\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n />\r\n </ng-template>\r\n </p-dropdown>\r\n </div>\r\n\r\n <!-- Actions bar -->\r\n <div class=\"flex gap-1 flex-row flex-grow-0\">\r\n <div style=\"width: 30px\" class=\"mr-2\">\r\n <kv-button\r\n (onClick)=\"chart.expandAll()\"\r\n class=\"button-expand-all\"\r\n [fullWidth]=\"false\"\r\n size=\"small\"\r\n severity=\"tertiary\"\r\n [icon]=\"'expand_all'\"\r\n [pTooltip]=\"'Expandir Todos'\"\r\n >\r\n </kv-button>\r\n </div>\r\n\r\n <div style=\"width: 30px\" class=\"mr-2\">\r\n <kv-button\r\n (onClick)=\"chart.collapseAll()\"\r\n class=\"button-colappse-all\"\r\n [fullWidth]=\"false\"\r\n size=\"small\"\r\n severity=\"tertiary\"\r\n [icon]=\"'collapse_all'\"\r\n [pTooltip]=\"'Recolher Todos'\"\r\n >\r\n </kv-button>\r\n </div>\r\n\r\n <div style=\"width: 30px\" class=\"mr-2\">\r\n <kv-button\r\n (onClick)=\"chart.fit().render()\"\r\n class=\"button-focus-center\"\r\n [fullWidth]=\"false\"\r\n size=\"small\"\r\n severity=\"primary\"\r\n [icon]=\"'center_focus_weak'\"\r\n [pTooltip]=\"'Centralizar Organograma'\"\r\n >\r\n </kv-button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<link\r\n rel=\"stylesheet\"\r\n href=\"https://fonts.googleapis.com/icon?family=Material+Icons\"\r\n/>\r\n\r\n<link\r\n rel=\"stylesheet\"\r\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0\"\r\n/>\r\n\r\n<div style=\"display: none\">\r\n <ng-template #nodeTemplate let-node>\r\n <div class=\"node-content\">erro</div>\r\n </ng-template>\r\n</div>\r\n", styles: ["#chartContainer{height:100%;overflow:hidden}:host ::ng-deep #chartContainer svg.svg-chart-container{height:100%!important;position:relative;width:100%;top:-56px;z-index:0;background-color:#fff}.div-botoes{z-index:1;width:100%;position:relative}:host ::ng-deep .p-organizationChart{overflow:hidden}svg{width:100%;height:100%}#menubar{width:100%;padding:5px;border-radius:8px;background:#eaeaea}.filtro-input{width:300px}#filtro-org-chart{height:300px;overflow-y:auto;overflow-x:hidden;position:absolute;top:40px;left:8px;background:#fff;color:#4b5563;border:0 none;border-radius:6px;box-shadow:0 2px 12px #0000001a}.filtro-org-chart-item{cursor:pointer;height:35px;padding:3px}.filtro-org-chart-item:hover{background-color:#d9dadb}.filtro-org-chart-item:active{background-color:#c0c1c2}\n"] }]
|
|
6626
6626
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: OrgChartService }, { type: i1$2.FilterService }], propDecorators: { config: [{
|
|
6627
6627
|
type: Input
|
|
6628
6628
|
}], chartContainer: [{
|
|
@@ -9676,6 +9676,7 @@ class KvContentViewerComponent {
|
|
|
9676
9676
|
this.visualizadorDocumentos = false;
|
|
9677
9677
|
this.indvisualizado = false;
|
|
9678
9678
|
this.btnTelaCheia = false;
|
|
9679
|
+
this.isLoadingSkeleton = false;
|
|
9679
9680
|
this.keyVisualizado = 'indvisualizado';
|
|
9680
9681
|
// #endregion
|
|
9681
9682
|
// #region Outputs
|
|
@@ -9759,11 +9760,11 @@ class KvContentViewerComponent {
|
|
|
9759
9760
|
}
|
|
9760
9761
|
}
|
|
9761
9762
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvContentViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9762
|
-
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 }, indvisualizado: { classPropertyName: "indvisualizado", publicName: "indvisualizado", isSignal: false, isRequired: false, transformFunction: null }, btnTelaCheia: { classPropertyName: "btnTelaCheia", publicName: "btnTelaCheia", 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\" style=\"height: 100%;\">\r\n <!-- Lista de documentos -->\r\n <div\r\n class=\"card-perfil col-12 md:col-4 lg:col-3\"\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: 100%; min-height: 15rem;\"\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 (click)=\"visualizarPreview(option)\"\r\n [ngClass]=\"{\r\n 'card-naoVisualizado': !isVisualizado(option),\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: -10px; 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 id=\"fullscreenDiv\" class=\"card-perfil col-12 md:col-8 lg:col-9\" style=\"position: relative; height: 100%;\"\r\n [ngStyle]=\"{\r\n 'overflow-y': arquivoPreview() ? 'auto' : 'hidden'\r\n }\">\r\n @if(btnTelaCheia)\r\n {\r\n <div class=\"grid\">\r\n <div class=\"col\"></div>\r\n <span id=\"fullscreenBtn\" (click)=\"alternarTelaCheia()\" class=\"material-symbols-outlined p-2 text-xl cursor-pointer\">\r\n open_in_full\r\n </span>\r\n </div>\r\n }\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 style=\"max-height: 100%;\"\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 style=\"overflow-y: auto; max-height: 100%;\"\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 style=\"overflow-y: auto; max-height: 100%;\"\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%; overflow-y: auto;\"\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%; margin-top: 2rem;\"\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\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}.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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: KvFileViewerNovoComponent, selector: "kv-file-viewer-novo", inputs: ["arquivo", "type", "blob", "width", "height"] }, { kind: "component", type: i1$5.NgxLoadingComponent, selector: "ngx-loading", inputs: ["show", "config", "template"] }] }); }
|
|
9763
|
+
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 }, indvisualizado: { classPropertyName: "indvisualizado", publicName: "indvisualizado", isSignal: false, isRequired: false, transformFunction: null }, btnTelaCheia: { classPropertyName: "btnTelaCheia", publicName: "btnTelaCheia", isSignal: false, isRequired: false, transformFunction: null }, isLoadingSkeleton: { classPropertyName: "isLoadingSkeleton", publicName: "isLoadingSkeleton", 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\" style=\"height: 100%;\">\r\n <!-- Lista de documentos -->\r\n <div\r\n class=\"card-perfil col-12 md:col-4 lg:col-3\"\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: 100%; min-height: 15rem;\"\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 (click)=\"visualizarPreview(option)\"\r\n [ngClass]=\"{\r\n 'card-naoVisualizado': !isVisualizado(option),\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\r\n </div>\r\n\r\n <ng-template #emptyDocumentList>\r\n\r\n @if(isLoadingSkeleton){\r\n <p-skeleton *ngFor=\"let i of [1, 2, 3, 4, 5, 6, 7, 8, 9]\"></p-skeleton>\r\n }\r\n\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: -10px; 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 id=\"fullscreenDiv\" class=\"card-perfil col-12 md:col-8 lg:col-9\" style=\"position: relative; height: 100%;\"\r\n [ngStyle]=\"{\r\n 'overflow-y': arquivoPreview() ? 'auto' : 'hidden'\r\n }\">\r\n @if(btnTelaCheia)\r\n {\r\n <div class=\"grid\">\r\n <div class=\"col\"></div>\r\n <span id=\"fullscreenBtn\" (click)=\"alternarTelaCheia()\" class=\"material-symbols-outlined p-2 text-xl cursor-pointer\">\r\n open_in_full\r\n </span>\r\n </div>\r\n }\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 style=\"max-height: 100%;\"\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 style=\"overflow-y: auto; max-height: 100%;\"\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 style=\"overflow-y: auto; max-height: 100%;\"\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%; overflow-y: auto;\"\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%; margin-top: 2rem;\"\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\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)}:host ::ng-deep .p-skeleton{height:5rem!important;border-radius:1rem;margin-top:.5rem}.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}.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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i10.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: KvFileViewerNovoComponent, selector: "kv-file-viewer-novo", inputs: ["arquivo", "type", "blob", "width", "height"] }, { kind: "component", type: i1$5.NgxLoadingComponent, selector: "ngx-loading", inputs: ["show", "config", "template"] }] }); }
|
|
9763
9764
|
}
|
|
9764
9765
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvContentViewerComponent, decorators: [{
|
|
9765
9766
|
type: Component,
|
|
9766
|
-
args: [{ selector: 'kv-content-viewer', template: "<div class=\"flex flex-column md:flex-row gap-2 mt-3 custom-max-height\" style=\"height: 100%;\">\r\n <!-- Lista de documentos -->\r\n <div\r\n class=\"card-perfil col-12 md:col-4 lg:col-3\"\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: 100%; min-height: 15rem;\"\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 (click)=\"visualizarPreview(option)\"\r\n [ngClass]=\"{\r\n 'card-naoVisualizado': !isVisualizado(option),\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
|
|
9767
|
+
args: [{ selector: 'kv-content-viewer', template: "<div class=\"flex flex-column md:flex-row gap-2 mt-3 custom-max-height\" style=\"height: 100%;\">\r\n <!-- Lista de documentos -->\r\n <div\r\n class=\"card-perfil col-12 md:col-4 lg:col-3\"\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: 100%; min-height: 15rem;\"\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 (click)=\"visualizarPreview(option)\"\r\n [ngClass]=\"{\r\n 'card-naoVisualizado': !isVisualizado(option),\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\r\n </div>\r\n\r\n <ng-template #emptyDocumentList>\r\n\r\n @if(isLoadingSkeleton){\r\n <p-skeleton *ngFor=\"let i of [1, 2, 3, 4, 5, 6, 7, 8, 9]\"></p-skeleton>\r\n }\r\n\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: -10px; 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 id=\"fullscreenDiv\" class=\"card-perfil col-12 md:col-8 lg:col-9\" style=\"position: relative; height: 100%;\"\r\n [ngStyle]=\"{\r\n 'overflow-y': arquivoPreview() ? 'auto' : 'hidden'\r\n }\">\r\n @if(btnTelaCheia)\r\n {\r\n <div class=\"grid\">\r\n <div class=\"col\"></div>\r\n <span id=\"fullscreenBtn\" (click)=\"alternarTelaCheia()\" class=\"material-symbols-outlined p-2 text-xl cursor-pointer\">\r\n open_in_full\r\n </span>\r\n </div>\r\n }\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 style=\"max-height: 100%;\"\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 style=\"overflow-y: auto; max-height: 100%;\"\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 style=\"overflow-y: auto; max-height: 100%;\"\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%; overflow-y: auto;\"\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%; margin-top: 2rem;\"\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\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)}:host ::ng-deep .p-skeleton{height:5rem!important;border-radius:1rem;margin-top:.5rem}.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}.download-icon{font-size:20px;cursor:pointer;transition:transform .3s ease,color .3s ease}.download-icon:hover{color:#0f6cbd;transform:scale(1.2)}\n"] }]
|
|
9767
9768
|
}], propDecorators: { extencaoDocumento: [{
|
|
9768
9769
|
type: Input
|
|
9769
9770
|
}], totalRecords: [{
|
|
@@ -9782,6 +9783,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
|
|
|
9782
9783
|
type: Input
|
|
9783
9784
|
}], btnTelaCheia: [{
|
|
9784
9785
|
type: Input
|
|
9786
|
+
}], isLoadingSkeleton: [{
|
|
9787
|
+
type: Input
|
|
9785
9788
|
}], onScrollHandler: [{
|
|
9786
9789
|
type: Output
|
|
9787
9790
|
}], onSelectFile: [{
|
|
@@ -9792,10 +9795,12 @@ class KvContentViewerModule {
|
|
|
9792
9795
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvContentViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
9793
9796
|
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.8", ngImport: i0, type: KvContentViewerModule, declarations: [KvContentViewerComponent], imports: [CommonModule,
|
|
9794
9797
|
PdfViewerModule,
|
|
9798
|
+
PrimeNgModule,
|
|
9795
9799
|
KvFileViewerNovoModule,
|
|
9796
9800
|
NgxLoadingModule], exports: [KvContentViewerComponent] }); }
|
|
9797
9801
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvContentViewerModule, imports: [CommonModule,
|
|
9798
9802
|
PdfViewerModule,
|
|
9803
|
+
PrimeNgModule,
|
|
9799
9804
|
KvFileViewerNovoModule,
|
|
9800
9805
|
NgxLoadingModule] }); }
|
|
9801
9806
|
}
|
|
@@ -9806,6 +9811,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
|
|
|
9806
9811
|
imports: [
|
|
9807
9812
|
CommonModule,
|
|
9808
9813
|
PdfViewerModule,
|
|
9814
|
+
PrimeNgModule,
|
|
9809
9815
|
KvFileViewerNovoModule,
|
|
9810
9816
|
NgxLoadingModule
|
|
9811
9817
|
],
|