@libs-ui/components-pages-template-full-screen 0.2.356-3 → 0.2.356-31

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.
Files changed (9) hide show
  1. package/esm2022/full-screen-v2/full-screen-v2.component.mjs +23 -12
  2. package/esm2022/full-screen-v2/interfaces/full-screen-v2.interface.mjs +1 -1
  3. package/esm2022/full-screen.component.mjs +6 -2
  4. package/fesm2022/libs-ui-components-pages-template-full-screen.mjs +29 -14
  5. package/fesm2022/libs-ui-components-pages-template-full-screen.mjs.map +1 -1
  6. package/full-screen-v2/full-screen-v2.component.d.ts +7 -1
  7. package/full-screen-v2/interfaces/full-screen-v2.interface.d.ts +3 -0
  8. package/full-screen.component.d.ts +3 -0
  9. package/package.json +13 -12
package/fesm2022/libs-ui-components-pages-template-full-screen.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { NgComponentOutlet, AsyncPipe, NgTemplateOutlet } from '@angular/common';
1
+ import { AsyncPipe, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
2
2
  import * as i0 from '@angular/core';
3
3
  import { input, output, signal, inject, DestroyRef, computed, ChangeDetectionStrategy, Component } from '@angular/core';
4
4
  import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -11,7 +11,7 @@ import { LibsUiComponentsSkeletonComponent } from '@libs-ui/components-skeleton'
11
11
  import { LibsUiComponentsSwitchComponent } from '@libs-ui/components-switch';
12
12
  import { LibsUiPipesCallFunctionInTemplatePipe } from '@libs-ui/pipes-call-function-in-template';
13
13
  import { LibsUiPipesEscapeHtmlPipe } from '@libs-ui/pipes-escape-html';
14
- import { uuid, get, getDayjs, UtilsCommunicateMicroKeyGlobal, UtilsCommunicateMicro } from '@libs-ui/utils';
14
+ import { uuid, get, UtilsCommunicateMicroKeyGlobal, getDayjs, UtilsCommunicateMicro } from '@libs-ui/utils';
15
15
  import { TranslateModule } from '@ngx-translate/core';
16
16
  import { interval, Subject, takeUntil } from 'rxjs';
17
17
 
@@ -48,10 +48,14 @@ class LibsUiComponentsPagesTemplateFullScreenV2Component {
48
48
  outClickButton = output();
49
49
  // #endregion
50
50
  // #region --- INTERNAL STATE ---
51
+ functionsControl = signal({ emitClosePageFullEvent: () => this.emitClosePageFullEvent() });
51
52
  idOverlay = signal(uuid()).asReadonly();
52
53
  destroyRef = inject(DestroyRef);
53
54
  functionControlMenu;
54
55
  // #endregion
56
+ // #region --- INTERNAL STATE ---
57
+ pipeEmptyConfig = { valueIsEmpty: null };
58
+ // #endregion
55
59
  // #region --- COMPUTED ---
56
60
  /** State reactive để truyền vào component outlet */
57
61
  sectionData = computed(() => ({
@@ -75,6 +79,7 @@ class LibsUiComponentsPagesTemplateFullScreenV2Component {
75
79
  state: true,
76
80
  idOverlay: this.idOverlay(),
77
81
  timeLiveUpdate: getDayjs().unix(),
82
+ ignoreIntervalUpdateTimeLiveEvent: UtilsCommunicateMicroKeyGlobal.IGNORE_INTERVAL_UPDATE_TIME_LIVE_EVENT_MODAL,
78
83
  },
79
84
  };
80
85
  UtilsCommunicateMicro.PostMessageToParent(data);
@@ -88,6 +93,9 @@ class LibsUiComponentsPagesTemplateFullScreenV2Component {
88
93
  }
89
94
  }
90
95
  }
96
+ get FunctionsControl() {
97
+ return this.functionsControl();
98
+ }
91
99
  // #region --- EVENT HANDLERS ---
92
100
  handlerEdit() {
93
101
  this.outEdit.emit();
@@ -114,21 +122,24 @@ class LibsUiComponentsPagesTemplateFullScreenV2Component {
114
122
  this.functionControlMenu = event;
115
123
  }
116
124
  // #endregion
125
+ emitClosePageFullEvent() {
126
+ const data = {
127
+ type: UtilsCommunicateMicroKeyGlobal.KEY_MESSAGE_MODAL,
128
+ response: {
129
+ message: 'close',
130
+ state: false,
131
+ idOverlay: this.idOverlay(),
132
+ },
133
+ };
134
+ UtilsCommunicateMicro.PostMessageToParent(data);
135
+ }
117
136
  ngOnDestroy() {
118
137
  if (!this.ignoreClosePageFullEvent()) {
119
- const data = {
120
- type: UtilsCommunicateMicroKeyGlobal.KEY_MESSAGE_MODAL,
121
- response: {
122
- message: 'close',
123
- state: false,
124
- idOverlay: this.idOverlay(),
125
- },
126
- };
127
- UtilsCommunicateMicro.PostMessageToParent(data);
138
+ this.emitClosePageFullEvent();
128
139
  }
129
140
  }
130
141
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsPagesTemplateFullScreenV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
131
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsPagesTemplateFullScreenV2Component, isStandalone: true, selector: "libs_ui-components-pages_template_full_screen_v2", inputs: { classHeaderInclude: { classPropertyName: "classHeaderInclude", publicName: "classHeaderInclude", isSignal: true, isRequired: false, transformFunction: null }, labelLeft: { classPropertyName: "labelLeft", publicName: "labelLeft", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, buttonCenter: { classPropertyName: "buttonCenter", publicName: "buttonCenter", isSignal: true, isRequired: false, transformFunction: null }, buttonRight: { classPropertyName: "buttonRight", publicName: "buttonRight", isSignal: true, isRequired: false, transformFunction: null }, hasEdit: { classPropertyName: "hasEdit", publicName: "hasEdit", isSignal: true, isRequired: false, transformFunction: null }, menuDropDownConfigs: { classPropertyName: "menuDropDownConfigs", publicName: "menuDropDownConfigs", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, ignoreClosePageFullEvent: { classPropertyName: "ignoreClosePageFullEvent", publicName: "ignoreClosePageFullEvent", isSignal: true, isRequired: false, transformFunction: null }, ignoreBackgroundColor: { classPropertyName: "ignoreBackgroundColor", publicName: "ignoreBackgroundColor", isSignal: true, isRequired: false, transformFunction: null }, divideClassHeader: { classPropertyName: "divideClassHeader", publicName: "divideClassHeader", isSignal: true, isRequired: false, transformFunction: null }, centerTemplate: { classPropertyName: "centerTemplate", publicName: "centerTemplate", isSignal: true, isRequired: false, transformFunction: null }, templateRight: { classPropertyName: "templateRight", publicName: "templateRight", isSignal: true, isRequired: false, transformFunction: null }, leftTemplate: { classPropertyName: "leftTemplate", publicName: "leftTemplate", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, bodyConfig: { classPropertyName: "bodyConfig", publicName: "bodyConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outClose: "outClose", outEdit: "outEdit", outSelectedMenuDropdown: "outSelectedMenuDropdown", outClickButton: "outClickButton" }, ngImport: i0, template: "<div\n class=\"libs-ui-components-page_full overflow-hidden\"\n [style.zIndex]=\"zIndex()\"\n [style.background-color]=\"ignoreBackgroundColor() ? 'transparent' : '#f2f5f7'\">\n <!-- ===================== HEADER (gi\u1EEF nguy\u00EAn 100% t\u1EEB V1) ===================== -->\n <div [class]=\"'libs-ui-components-page_full-header ' + classHeaderInclude()\">\n <div class=\"{{ divideClassHeader()?.classButtonCancel || 'w-[25%]' }}\">\n @if (leftTemplate(); as leftTemplate) {\n <ng-container *ngTemplateOutlet=\"leftTemplate\" />\n }\n @if (labelLeft(); as labelLeft) {\n <libs_ui-components-buttons-button\n [label]=\"labelLeft\"\n [type]=\"'button-link-primary'\"\n [classIconLeft]=\"'libs-ui-icon-chevron-right rotate-[180deg] before:text-[16px]'\"\n [classLabel]=\"'libs-ui-font-h4r'\"\n (outClick)=\"cancel()\" />\n }\n </div>\n\n @if (centerTemplate(); as centerTemplate) {\n <div class=\"{{ divideClassHeader()?.classButtonCenter || 'w-[40%]' }} flex items-center justify-center\">\n <ng-container *ngTemplateOutlet=\"centerTemplate\" />\n </div>\n } @else {\n <div class=\"{{ divideClassHeader()?.classButtonCenter || 'w-[40%]' }} flex items-center justify-center\">\n <libs_ui-components-popover\n type=\"text\"\n [config]=\"{ maxWidth: 250, zIndex: zIndex() + 1 }\"\n [classInclude]=\"'libs-ui-font-h2s'\"\n [innerHtml]=\"title() ? (title() | LibsUiPipesEscapeHtmlPipe) : '&mdash;'\" />\n @if (hasEdit(); as hasEdit) {\n <libs_ui-components-buttons-button\n [type]=\"'button-link-primary'\"\n (outClick)=\"handlerEdit()\"\n [iconOnlyType]=\"true\"\n [classIconLeft]=\"'libs-ui-icon-edit-line'\"\n [classInclude]=\"'ml-[4px]'\" />\n }\n @for (button of buttonCenter(); track button.key) {\n <div class=\"ml-[12px] flex items-center\">\n @if (button.key === 'button') {\n <libs_ui-components-buttons-button\n [label]=\"button.label || ''\"\n [classLabel]=\"(button.classLabel || '') + ' libs-ui-font-head-4s'\"\n [type]=\"button.type || 'button-primary'\"\n [classInclude]=\"button.classInclude || ''\"\n [classIconLeft]=\"button.classIconLeft || ''\"\n [classIconRight]=\"button.classIconRight || ''\"\n [popover]=\"button.popover || {}\"\n [disable]=\"button.disable || disable()\"\n [isPending]=\"button.isPending || false\"\n (outClick)=\"handlerClickButton(button)\" />\n }\n @if (button.key === 'button-status' && button.configButtonStatus) {\n <libs_ui-components-buttons-status\n [class]=\"button.classInclude\"\n [config]=\"button.configButtonStatus\" />\n }\n @if (button.key === 'switch') {\n <libs_ui-components-switch\n [active]=\"button.active || false\"\n [disable]=\"button.disable || disable()\"\n class=\"{{ button.classInclude }}\"\n (outSwitch)=\"handlerSwitch($event, button)\" />\n }\n @if (button.key === 'label' && button.labelConfig) {\n <libs_ui-components-label\n [classInclude]=\"button.labelConfig.classInclude + ' pb-0 text-white'\"\n [labelLeft]=\"button.labelConfig.labelLeft\"\n [labelLeftClass]=\"button.labelConfig.labelLeftClass\"\n [required]=\"button.labelConfig.required\"\n [description]=\"button.labelConfig.description\"\n [labelRight]=\"button.labelConfig.labelRight\"\n [labelRightClass]=\"button.labelConfig.labelRightClass\"\n [onlyShowCount]=\"button.labelConfig.onlyShowCount\"\n [buttonsLeft]=\"button.labelConfig.buttonsLeft\"\n [disableButtonsLeft]=\"button.labelConfig.disableButtonsLeft\"\n [buttonsRight]=\"button.labelConfig.buttonsRight\"\n [disableButtonsRight]=\"button.labelConfig.disableButtonsRight\"\n [hasToggle]=\"button.labelConfig.hasToggle\"\n [toggleActive]=\"button.labelConfig.toggleActive\"\n [toggleDisable]=\"button.labelConfig.toggleDisable\"\n [popover]=\"button.labelConfig.popover\"\n [iconPopoverClass]=\"button.labelConfig.iconPopoverClass\"\n [limitLength]=\"button.labelConfig.limitLength\"\n [buttonsDescription]=\"button.labelConfig.buttonsDescription\"\n [disableButtonsDescription]=\"button.labelConfig.disableButtonsDescription\"\n [buttonsDescriptionContainerClass]=\"button.labelConfig.buttonsDescriptionContainerClass\"\n [count]=\"button.labelConfig.count\" />\n }\n </div>\n }\n </div>\n }\n\n <div class=\"{{ divideClassHeader()?.classButtonRight || 'w-[35%]' }} flex justify-end items-center\">\n @for (button of buttonRight(); track button.key) {\n <div [class.ml-[12px]]=\"!$first\">\n @if (button.key === 'label' && button.labelConfig) {\n <libs_ui-components-label\n [classInclude]=\"button.labelConfig.classInclude + ' pb-0'\"\n [labelLeft]=\"button.labelConfig.labelLeft\"\n [labelLeftClass]=\"button.labelConfig.labelLeftClass\"\n [required]=\"button.labelConfig.required\"\n [description]=\"button.labelConfig.description\"\n [labelRight]=\"button.labelConfig.labelRight\"\n [labelRightClass]=\"button.labelConfig.labelRightClass\"\n [onlyShowCount]=\"button.labelConfig.onlyShowCount\"\n [buttonsLeft]=\"button.labelConfig.buttonsLeft\"\n [disableButtonsLeft]=\"button.labelConfig.disableButtonsLeft\"\n [buttonsRight]=\"button.labelConfig.buttonsRight\"\n [disableButtonsRight]=\"button.labelConfig.disableButtonsRight\"\n [hasToggle]=\"button.labelConfig.hasToggle\"\n [toggleActive]=\"button.labelConfig.toggleActive\"\n [toggleDisable]=\"button.labelConfig.toggleDisable\"\n [popover]=\"button.labelConfig.popover\"\n [iconPopoverClass]=\"button.labelConfig.iconPopoverClass\"\n [limitLength]=\"button.labelConfig.limitLength\"\n [buttonsDescription]=\"button.labelConfig.buttonsDescription\"\n [disableButtonsDescription]=\"button.labelConfig.disableButtonsDescription\"\n [buttonsDescriptionContainerClass]=\"button.labelConfig.buttonsDescriptionContainerClass\"\n [count]=\"button.labelConfig.count\" />\n }\n @if (button.key === 'switch') {\n <libs_ui-components-switch\n [active]=\"button.active || false\"\n [disable]=\"button.disable || disable()\"\n class=\"{{ button.classInclude }}\"\n (outSwitch)=\"handlerSwitch($event, button)\" />\n }\n @if (button.key === 'button') {\n <libs_ui-components-buttons-button\n [label]=\"button?.label || ''\"\n [classLabel]=\"(button.classLabel || '') + ' libs-ui-font-h4s'\"\n [type]=\"button.type || 'button-primary'\"\n [classInclude]=\"button.classInclude || ''\"\n [classIconLeft]=\"button.classIconLeft || ''\"\n [classIconRight]=\"button.classIconRight || ''\"\n [popover]=\"button.popover || {}\"\n [disable]=\"button.disable || disable()\"\n [isPending]=\"button.isPending || false\"\n [iconOnlyType]=\"button.iconOnlyType || false\"\n (outClick)=\"handlerClickButton(button)\" />\n }\n @if (button.key === 'line-space') {\n <div\n class=\"bg-[#666b79] w-[1px] h-[28px]\"\n [class]=\"button.classInclude\">\n &nbsp;\n </div>\n }\n </div>\n }\n @if (menuDropDownConfigs(); as menuDropDownConfigs) {\n <div class=\"ml-[12px]\">\n <libs_ui-components-dropdown\n [isNgContent]=\"true\"\n [zIndex]=\"zIndex() + 1\"\n [listConfig]=\"menuDropDownConfigs.listConfig\"\n [listHiddenInputSearch]=\"true\"\n [popoverCustomConfig]=\"menuDropDownConfigs.popoverCustomConfig\"\n (outFunctionsControl)=\"handlerControlDropdownMenu($event)\"\n (outSelectKey)=\"handlerSelectedKey($event)\">\n <libs_ui-components-buttons-button\n [classInclude]=\"'p-[8px]'\"\n [type]=\"'button-third'\"\n [iconOnlyType]=\"true\"\n [classIconLeft]=\"'libs-ui-icon-more-vertical text-[#333333] text-[12px]'\"\n [popover]=\"{ config: { content: 'i18n_4x_other_operations' } }\"\n [ignoreStopPropagationEvent]=\"true\" />\n </libs_ui-components-dropdown>\n </div>\n }\n @if (templateRight(); as templateRight) {\n <ng-container *ngTemplateOutlet=\"templateRight\" />\n }\n </div>\n </div>\n\n <!-- ===================== BODY (V2: Lazy Load ho\u1EB7c ng-content) ===================== -->\n @if (bodyConfig().getComponentOutlet; as getBodyComponentOutlet) {\n <!-- Lazy load mode -->\n <div [class]=\"'libs-ui-components-page_full-body ' + (bodyConfig().classInclude || '')\">\n @let constHtmlCompBody = undefined | LibsUiPipesCallFunctionInTemplatePipe: getBodyComponentOutlet : sectionData() : null : { valueIsEmpty: null } | async;\n @let constHtmlInputsBody = undefined | LibsUiPipesCallFunctionInTemplatePipe: bodyConfig().getDataComponentOutlet : sectionData() : null : { valueIsEmpty: null } | async;\n @if (constHtmlCompBody) {\n @defer {\n <ng-container *ngComponentOutlet=\"constHtmlCompBody; inputs: constHtmlInputsBody\" />\n } @loading {\n <libs_ui-components-skeleton [config]=\"resolvedSkeletonBody()\" />\n }\n } @else {\n <libs_ui-components-skeleton [config]=\"resolvedSkeletonBody()\" />\n }\n </div>\n }\n</div>\n", styles: ["@-webkit-keyframes animation-slide-to-left{0%{right:-200px;opacity:0}to{right:12px;opacity:1}}@keyframes animation-slide-to-left{0%{right:-200px;opacity:0}to{right:0;opacity:1}}.libs-ui-components-page_full{position:absolute;width:100vw;height:100vh;left:0;top:0;display:flex;flex-direction:column;animation:animation-slide-to-left ease-out .3s}.libs-ui-components-page_full .libs-ui-components-page_full-header{height:50px;padding:14px 16px;border-bottom:solid 1px #e6e7ea;background-color:#fff;width:100%;display:flex;align-items:center}.libs-ui-components-page_full .libs-ui-components-page_full-body{height:100%}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: LibsUiComponentsDropdownComponent, selector: "libs_ui-components-dropdown", inputs: ["useXssFilter", "popoverElementRefCustom", "classInclude", "ignoreStopPropagationEvent", "flagMouse", "flagMouseContent", "popoverCustomConfig", "isNgContent", "zIndex", "convertItemSelected", "getPopoverItemSelected", "httpRequestDetailItemById", "lengthKeys", "textDisplayWhenNoSelect", "textDisplayWhenMultiSelect", "classIncludeTextDisplayWhenNoSelect", "fieldLabel", "fieldGetLabel", "labelPopoverConfig", "labelPopoverFullWidth", "hasContentUnitRight", "listSearchNoDataTemplateRef", "fieldGetImage", "imageSize", "typeShape", "fieldGetIcon", "fieldGetTextAvatar", "fieldGetColorAvatar", "classAvatarInclude", "getLastTextAfterSpace", "linkImageError", "showError", "showBorderError", "disable", "readonly", "labelConfig", "disableLabel", "listSearchConfig", "isSearchOnline", "listHiddenInputSearch", "listSearchPadding", "listKeySearch", "listDividerClassInclude", "listConfig", "listButtonsOther", "listHasButtonUnSelectOption", "listClickExactly", "listBackgroundCustom", "listMaxItemShow", "listKeySelected", "listMultiKeySelected", "listKeysDisable", "listKeysHidden", "validRequired", "validMaxItemSelected", "changeValidUndefinedResetError", "allowSelectItemMultiple", "focusInputSearch", "onlyEmitDataWhenReset", "resetKeyWhenSelectAllKey", "listConfigHasDivider", "classIncludeIcon", "classIncludeContent", "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", "tabKeyActive", "tabsConfig", "ignoreBorderBottom"], outputs: ["flagMouseChange", "flagMouseContentChange", "lengthKeysChange", "showBorderErrorChange", "listKeySelectedChange", "listMultiKeySelectedChange", "tabKeyActiveChange", "outSelectKey", "outSelectMultiKey", "outFunctionsControl", "outValidEvent", "outChangStageFlagMouse", "outDataChange", "outClickButtonOther", "outShowList", "outChangeTabKeyActive"] }, { kind: "component", type: LibsUiComponentsSwitchComponent, selector: "libs_ui-components-switch", inputs: ["size", "disable", "active"], outputs: ["activeChange", "outSwitch"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsButtonsStatusComponent, selector: "libs_ui-components-buttons-status", inputs: ["config"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsSkeletonComponent, selector: "libs_ui-components-skeleton", inputs: ["config"] }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }, { kind: "pipe", type: LibsUiPipesEscapeHtmlPipe, name: "LibsUiPipesEscapeHtmlPipe" }, { kind: "component", type: LibsUiComponentsLabelComponent, selector: "libs_ui-components-label", inputs: ["iconPopoverClass", "classInclude", "labelLeft", "labelLeftClass", "labelLeftBehindToggleButton", "popover", "required", "buttonsLeft", "disableButtonsLeft", "buttonsRight", "disableButtonsRight", "labelRight", "labelRightClass", "labelRightRequired", "hasToggle", "toggleSize", "toggleActive", "toggleDisable", "description", "descriptionClass", "buttonsDescription", "disableButtonsDescription", "buttonsDescriptionContainerClass", "onlyShowCount", "zIndexPopover", "timerDestroyPopover", "count", "limitLength"], outputs: ["outClickButton", "outSwitchEvent", "outLabelRightClick", "outLabelLeftClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [NgComponentOutlet]] });
142
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsPagesTemplateFullScreenV2Component, isStandalone: true, selector: "libs_ui-components-pages_template_full_screen_v2", inputs: { classHeaderInclude: { classPropertyName: "classHeaderInclude", publicName: "classHeaderInclude", isSignal: true, isRequired: false, transformFunction: null }, labelLeft: { classPropertyName: "labelLeft", publicName: "labelLeft", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, buttonCenter: { classPropertyName: "buttonCenter", publicName: "buttonCenter", isSignal: true, isRequired: false, transformFunction: null }, buttonRight: { classPropertyName: "buttonRight", publicName: "buttonRight", isSignal: true, isRequired: false, transformFunction: null }, hasEdit: { classPropertyName: "hasEdit", publicName: "hasEdit", isSignal: true, isRequired: false, transformFunction: null }, menuDropDownConfigs: { classPropertyName: "menuDropDownConfigs", publicName: "menuDropDownConfigs", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, ignoreClosePageFullEvent: { classPropertyName: "ignoreClosePageFullEvent", publicName: "ignoreClosePageFullEvent", isSignal: true, isRequired: false, transformFunction: null }, ignoreBackgroundColor: { classPropertyName: "ignoreBackgroundColor", publicName: "ignoreBackgroundColor", isSignal: true, isRequired: false, transformFunction: null }, divideClassHeader: { classPropertyName: "divideClassHeader", publicName: "divideClassHeader", isSignal: true, isRequired: false, transformFunction: null }, centerTemplate: { classPropertyName: "centerTemplate", publicName: "centerTemplate", isSignal: true, isRequired: false, transformFunction: null }, templateRight: { classPropertyName: "templateRight", publicName: "templateRight", isSignal: true, isRequired: false, transformFunction: null }, leftTemplate: { classPropertyName: "leftTemplate", publicName: "leftTemplate", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, bodyConfig: { classPropertyName: "bodyConfig", publicName: "bodyConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outClose: "outClose", outEdit: "outEdit", outSelectedMenuDropdown: "outSelectedMenuDropdown", outClickButton: "outClickButton" }, ngImport: i0, template: "<div\n class=\"libs-ui-components-page_full overflow-hidden\"\n [style.zIndex]=\"zIndex()\"\n [style.background-color]=\"ignoreBackgroundColor() ? 'transparent' : '#f2f5f7'\">\n <!-- ===================== HEADER (gi\u1EEF nguy\u00EAn 100% t\u1EEB V1) ===================== -->\n <div [class]=\"'libs-ui-components-page_full-header ' + classHeaderInclude()\">\n <div class=\"{{ divideClassHeader()?.classButtonCancel || 'w-[25%]' }}\">\n @if (leftTemplate(); as leftTemplate) {\n <ng-container *ngTemplateOutlet=\"leftTemplate\" />\n }\n @if (labelLeft(); as labelLeft) {\n <libs_ui-components-buttons-button\n [label]=\"labelLeft\"\n [type]=\"'button-link-primary'\"\n [classIconLeft]=\"'libs-ui-icon-chevron-right rotate-[180deg] before:text-[16px]'\"\n [classLabel]=\"'libs-ui-font-h4r'\"\n (outClick)=\"cancel()\" />\n }\n </div>\n\n @if (centerTemplate(); as centerTemplate) {\n <div class=\"{{ divideClassHeader()?.classButtonCenter || 'w-[40%]' }} flex items-center justify-center\">\n <ng-container *ngTemplateOutlet=\"centerTemplate\" />\n </div>\n } @else {\n <div class=\"{{ divideClassHeader()?.classButtonCenter || 'w-[40%]' }} flex items-center justify-center\">\n <libs_ui-components-popover\n type=\"text\"\n [config]=\"{ maxWidth: 250, zIndex: zIndex() + 1 }\"\n [classInclude]=\"'libs-ui-font-h2s'\"\n [innerHtml]=\"title() ? (title() | LibsUiPipesEscapeHtmlPipe) : '&mdash;'\" />\n @if (hasEdit(); as hasEdit) {\n <libs_ui-components-buttons-button\n [type]=\"'button-link-primary'\"\n (outClick)=\"handlerEdit()\"\n [iconOnlyType]=\"true\"\n [classIconLeft]=\"'libs-ui-icon-edit-line'\"\n [classInclude]=\"'ml-[4px]'\" />\n }\n @for (button of buttonCenter(); track button.key) {\n <div class=\"ml-[12px] flex items-center\">\n @if (button.key === 'button') {\n <libs_ui-components-buttons-button\n [label]=\"button.label || ''\"\n [classLabel]=\"(button.classLabel || '') + ' libs-ui-font-head-4s'\"\n [type]=\"button.type || 'button-primary'\"\n [classInclude]=\"button.classInclude || ''\"\n [classIconLeft]=\"button.classIconLeft || ''\"\n [classIconRight]=\"button.classIconRight || ''\"\n [popover]=\"button.popover || {}\"\n [disable]=\"button.disable || disable()\"\n [isPending]=\"button.isPending || false\"\n (outClick)=\"handlerClickButton(button)\" />\n }\n @if (button.key === 'button-status' && button.configButtonStatus) {\n <libs_ui-components-buttons-status\n [class]=\"button.classInclude\"\n [config]=\"button.configButtonStatus\" />\n }\n @if (button.key === 'switch') {\n <libs_ui-components-switch\n [active]=\"button.active || false\"\n [disable]=\"button.disable || disable()\"\n class=\"{{ button.classInclude }}\"\n (outSwitch)=\"handlerSwitch($event, button)\" />\n }\n @if (button.key === 'label' && button.labelConfig) {\n <libs_ui-components-label\n [classInclude]=\"button.labelConfig.classInclude + ' pb-0 text-white'\"\n [labelLeft]=\"button.labelConfig.labelLeft\"\n [labelLeftClass]=\"button.labelConfig.labelLeftClass\"\n [required]=\"button.labelConfig.required\"\n [description]=\"button.labelConfig.description\"\n [labelRight]=\"button.labelConfig.labelRight\"\n [labelRightClass]=\"button.labelConfig.labelRightClass\"\n [onlyShowCount]=\"button.labelConfig.onlyShowCount\"\n [buttonsLeft]=\"button.labelConfig.buttonsLeft\"\n [disableButtonsLeft]=\"button.labelConfig.disableButtonsLeft\"\n [buttonsRight]=\"button.labelConfig.buttonsRight\"\n [disableButtonsRight]=\"button.labelConfig.disableButtonsRight\"\n [hasToggle]=\"button.labelConfig.hasToggle\"\n [toggleActive]=\"button.labelConfig.toggleActive\"\n [toggleDisable]=\"button.labelConfig.toggleDisable\"\n [popover]=\"button.labelConfig.popover\"\n [iconPopoverClass]=\"button.labelConfig.iconPopoverClass\"\n [limitLength]=\"button.labelConfig.limitLength\"\n [buttonsDescription]=\"button.labelConfig.buttonsDescription\"\n [disableButtonsDescription]=\"button.labelConfig.disableButtonsDescription\"\n [buttonsDescriptionContainerClass]=\"button.labelConfig.buttonsDescriptionContainerClass\"\n [count]=\"button.labelConfig.count\" />\n }\n </div>\n }\n </div>\n }\n\n <div class=\"{{ divideClassHeader()?.classButtonRight || 'w-[35%]' }} flex justify-end items-center\">\n @for (button of buttonRight(); track button.key) {\n <div [class.ml-[12px]]=\"!$first\">\n @if (button.key === 'label' && button.labelConfig) {\n <libs_ui-components-label\n [classInclude]=\"button.labelConfig.classInclude + ' pb-0'\"\n [labelLeft]=\"button.labelConfig.labelLeft\"\n [labelLeftClass]=\"button.labelConfig.labelLeftClass\"\n [required]=\"button.labelConfig.required\"\n [description]=\"button.labelConfig.description\"\n [labelRight]=\"button.labelConfig.labelRight\"\n [labelRightClass]=\"button.labelConfig.labelRightClass\"\n [onlyShowCount]=\"button.labelConfig.onlyShowCount\"\n [buttonsLeft]=\"button.labelConfig.buttonsLeft\"\n [disableButtonsLeft]=\"button.labelConfig.disableButtonsLeft\"\n [buttonsRight]=\"button.labelConfig.buttonsRight\"\n [disableButtonsRight]=\"button.labelConfig.disableButtonsRight\"\n [hasToggle]=\"button.labelConfig.hasToggle\"\n [toggleActive]=\"button.labelConfig.toggleActive\"\n [toggleDisable]=\"button.labelConfig.toggleDisable\"\n [popover]=\"button.labelConfig.popover\"\n [iconPopoverClass]=\"button.labelConfig.iconPopoverClass\"\n [limitLength]=\"button.labelConfig.limitLength\"\n [buttonsDescription]=\"button.labelConfig.buttonsDescription\"\n [disableButtonsDescription]=\"button.labelConfig.disableButtonsDescription\"\n [buttonsDescriptionContainerClass]=\"button.labelConfig.buttonsDescriptionContainerClass\"\n [count]=\"button.labelConfig.count\" />\n }\n @if (button.key === 'switch') {\n <libs_ui-components-switch\n [active]=\"button.active || false\"\n [disable]=\"button.disable || disable()\"\n class=\"{{ button.classInclude }}\"\n (outSwitch)=\"handlerSwitch($event, button)\" />\n }\n @if (button.key === 'button') {\n <libs_ui-components-buttons-button\n [label]=\"button?.label || ''\"\n [classLabel]=\"(button.classLabel || '') + ' libs-ui-font-h4s'\"\n [type]=\"button.type || 'button-primary'\"\n [classInclude]=\"button.classInclude || ''\"\n [classIconLeft]=\"button.classIconLeft || ''\"\n [classIconRight]=\"button.classIconRight || ''\"\n [popover]=\"button.popover || {}\"\n [disable]=\"button.disable || disable()\"\n [isPending]=\"button.isPending || false\"\n [iconOnlyType]=\"button.iconOnlyType || false\"\n (outClick)=\"handlerClickButton(button)\" />\n }\n @if (button.key === 'line-space') {\n <div\n class=\"bg-[#666b79] w-[1px] h-[28px]\"\n [class]=\"button.classInclude\">\n &nbsp;\n </div>\n }\n </div>\n }\n @if (menuDropDownConfigs(); as menuDropDownConfigs) {\n <div class=\"ml-[12px]\">\n <libs_ui-components-dropdown\n [isNgContent]=\"true\"\n [zIndex]=\"zIndex() + 1\"\n [listConfig]=\"menuDropDownConfigs.listConfig\"\n [listHiddenInputSearch]=\"true\"\n [popoverCustomConfig]=\"menuDropDownConfigs.popoverCustomConfig\"\n (outFunctionsControl)=\"handlerControlDropdownMenu($event)\"\n (outSelectKey)=\"handlerSelectedKey($event)\">\n <libs_ui-components-buttons-button\n [classInclude]=\"'p-[8px]'\"\n [type]=\"'button-third'\"\n [iconOnlyType]=\"true\"\n [classIconLeft]=\"'libs-ui-icon-more-vertical text-[#333333] text-[12px]'\"\n [popover]=\"{ config: { content: 'i18n_4x_other_operations' } }\"\n [ignoreStopPropagationEvent]=\"true\" />\n </libs_ui-components-dropdown>\n </div>\n }\n @if (templateRight(); as templateRight) {\n <ng-container *ngTemplateOutlet=\"templateRight\" />\n }\n </div>\n </div>\n\n <!-- ===================== BODY (V2: Lazy Load ho\u1EB7c ng-content) ===================== -->\n @if (bodyConfig().getComponentOutlet; as getBodyComponentOutlet) {\n <!-- Lazy load mode -->\n <div [class]=\"'libs-ui-components-page_full-body ' + (bodyConfig().classInclude || '')\">\n @let constHtmlCompBody = undefined | LibsUiPipesCallFunctionInTemplatePipe: getBodyComponentOutlet : sectionData() : null : pipeEmptyConfig | async;\n @let constHtmlInputsBody = undefined | LibsUiPipesCallFunctionInTemplatePipe: bodyConfig().getDataComponentOutlet : sectionData() : null : pipeEmptyConfig | async;\n @if (constHtmlCompBody) {\n <ng-container *ngComponentOutlet=\"constHtmlCompBody; inputs: constHtmlInputsBody\" />\n } @else {\n <libs_ui-components-skeleton [config]=\"resolvedSkeletonBody()\" />\n }\n </div>\n }\n</div>\n", styles: ["@-webkit-keyframes animation-slide-to-left{0%{right:-200px;opacity:0}to{right:12px;opacity:1}}@keyframes animation-slide-to-left{0%{right:-200px;opacity:0}to{right:0;opacity:1}}.libs-ui-components-page_full{position:absolute;width:100vw;height:100vh;left:0;top:0;display:flex;flex-direction:column;animation:animation-slide-to-left ease-out .3s}.libs-ui-components-page_full .libs-ui-components-page_full-header{height:50px;padding:14px 16px;border-bottom:solid 1px #e6e7ea;background-color:#fff;width:100%;display:flex;align-items:center}.libs-ui-components-page_full .libs-ui-components-page_full-body{height:100%}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: LibsUiComponentsDropdownComponent, selector: "libs_ui-components-dropdown", inputs: ["useXssFilter", "popoverElementRefCustom", "classInclude", "ignoreStopPropagationEvent", "flagMouse", "flagMouseContent", "popoverCustomConfig", "isNgContent", "zIndex", "convertItemSelected", "getPopoverItemSelected", "httpRequestDetailItemById", "lengthKeys", "textDisplayWhenNoSelect", "textDisplayWhenMultiSelect", "classIncludeTextDisplayWhenNoSelect", "fieldLabel", "fieldGetLabel", "labelPopoverConfig", "labelPopoverFullWidth", "hasContentUnitRight", "listSearchNoDataTemplateRef", "dropdownTemplateRefNotSearchNoData", "fieldGetImage", "imageSize", "typeShape", "fieldGetIcon", "fieldGetTextAvatar", "fieldGetColorAvatar", "classAvatarInclude", "getLastTextAfterSpace", "linkImageError", "showError", "showBorderError", "disable", "readonly", "labelConfig", "disableLabel", "listSearchConfig", "isSearchOnline", "listHiddenInputSearch", "listSearchPadding", "listKeySearch", "listDividerClassInclude", "listConfig", "listButtonsOther", "listHasButtonUnSelectOption", "listClickExactly", "listBackgroundCustom", "listMaxItemShow", "listKeySelected", "listMultiKeySelected", "listKeysDisable", "listKeysHidden", "validRequired", "validMaxItemSelected", "changeValidUndefinedResetError", "allowSelectItemMultiple", "focusInputSearch", "onlyEmitDataWhenReset", "resetKeyWhenSelectAllKey", "listConfigHasDivider", "classIncludeIcon", "classIncludeContent", "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", "tabKeyActive", "tabsConfig", "ignoreBorderBottom"], outputs: ["flagMouseChange", "flagMouseContentChange", "lengthKeysChange", "showBorderErrorChange", "listKeySelectedChange", "listMultiKeySelectedChange", "tabKeyActiveChange", "outSelectKey", "outSelectMultiKey", "outFunctionsControl", "outValidEvent", "outChangStageFlagMouse", "outDataChange", "outClickButtonOther", "outShowList", "outChangeTabKeyActive"] }, { kind: "component", type: LibsUiComponentsSwitchComponent, selector: "libs_ui-components-switch", inputs: ["size", "disable", "active"], outputs: ["activeChange", "outSwitch"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsButtonsStatusComponent, selector: "libs_ui-components-buttons-status", inputs: ["config"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsSkeletonComponent, selector: "libs_ui-components-skeleton", inputs: ["config"] }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }, { kind: "pipe", type: LibsUiPipesEscapeHtmlPipe, name: "LibsUiPipesEscapeHtmlPipe" }, { kind: "component", type: LibsUiComponentsLabelComponent, selector: "libs_ui-components-label", inputs: ["iconPopoverClass", "classInclude", "labelLeft", "labelLeftClass", "labelLeftBehindToggleButton", "popover", "required", "buttonsLeft", "disableButtonsLeft", "buttonsRight", "disableButtonsRight", "labelRight", "labelRightClass", "labelRightRequired", "hasToggle", "toggleSize", "toggleActive", "toggleDisable", "description", "descriptionClass", "buttonsDescription", "disableButtonsDescription", "buttonsDescriptionContainerClass", "onlyShowCount", "zIndexPopover", "timerDestroyPopover", "count", "limitLength"], outputs: ["outClickButton", "outSwitchEvent", "outLabelRightClick", "outLabelLeftClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
132
143
  }
133
144
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsPagesTemplateFullScreenV2Component, decorators: [{
134
145
  type: Component,
@@ -146,9 +157,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
146
157
  LibsUiPipesCallFunctionInTemplatePipe,
147
158
  LibsUiPipesEscapeHtmlPipe,
148
159
  LibsUiComponentsLabelComponent,
149
- ], template: "<div\n class=\"libs-ui-components-page_full overflow-hidden\"\n [style.zIndex]=\"zIndex()\"\n [style.background-color]=\"ignoreBackgroundColor() ? 'transparent' : '#f2f5f7'\">\n <!-- ===================== HEADER (gi\u1EEF nguy\u00EAn 100% t\u1EEB V1) ===================== -->\n <div [class]=\"'libs-ui-components-page_full-header ' + classHeaderInclude()\">\n <div class=\"{{ divideClassHeader()?.classButtonCancel || 'w-[25%]' }}\">\n @if (leftTemplate(); as leftTemplate) {\n <ng-container *ngTemplateOutlet=\"leftTemplate\" />\n }\n @if (labelLeft(); as labelLeft) {\n <libs_ui-components-buttons-button\n [label]=\"labelLeft\"\n [type]=\"'button-link-primary'\"\n [classIconLeft]=\"'libs-ui-icon-chevron-right rotate-[180deg] before:text-[16px]'\"\n [classLabel]=\"'libs-ui-font-h4r'\"\n (outClick)=\"cancel()\" />\n }\n </div>\n\n @if (centerTemplate(); as centerTemplate) {\n <div class=\"{{ divideClassHeader()?.classButtonCenter || 'w-[40%]' }} flex items-center justify-center\">\n <ng-container *ngTemplateOutlet=\"centerTemplate\" />\n </div>\n } @else {\n <div class=\"{{ divideClassHeader()?.classButtonCenter || 'w-[40%]' }} flex items-center justify-center\">\n <libs_ui-components-popover\n type=\"text\"\n [config]=\"{ maxWidth: 250, zIndex: zIndex() + 1 }\"\n [classInclude]=\"'libs-ui-font-h2s'\"\n [innerHtml]=\"title() ? (title() | LibsUiPipesEscapeHtmlPipe) : '&mdash;'\" />\n @if (hasEdit(); as hasEdit) {\n <libs_ui-components-buttons-button\n [type]=\"'button-link-primary'\"\n (outClick)=\"handlerEdit()\"\n [iconOnlyType]=\"true\"\n [classIconLeft]=\"'libs-ui-icon-edit-line'\"\n [classInclude]=\"'ml-[4px]'\" />\n }\n @for (button of buttonCenter(); track button.key) {\n <div class=\"ml-[12px] flex items-center\">\n @if (button.key === 'button') {\n <libs_ui-components-buttons-button\n [label]=\"button.label || ''\"\n [classLabel]=\"(button.classLabel || '') + ' libs-ui-font-head-4s'\"\n [type]=\"button.type || 'button-primary'\"\n [classInclude]=\"button.classInclude || ''\"\n [classIconLeft]=\"button.classIconLeft || ''\"\n [classIconRight]=\"button.classIconRight || ''\"\n [popover]=\"button.popover || {}\"\n [disable]=\"button.disable || disable()\"\n [isPending]=\"button.isPending || false\"\n (outClick)=\"handlerClickButton(button)\" />\n }\n @if (button.key === 'button-status' && button.configButtonStatus) {\n <libs_ui-components-buttons-status\n [class]=\"button.classInclude\"\n [config]=\"button.configButtonStatus\" />\n }\n @if (button.key === 'switch') {\n <libs_ui-components-switch\n [active]=\"button.active || false\"\n [disable]=\"button.disable || disable()\"\n class=\"{{ button.classInclude }}\"\n (outSwitch)=\"handlerSwitch($event, button)\" />\n }\n @if (button.key === 'label' && button.labelConfig) {\n <libs_ui-components-label\n [classInclude]=\"button.labelConfig.classInclude + ' pb-0 text-white'\"\n [labelLeft]=\"button.labelConfig.labelLeft\"\n [labelLeftClass]=\"button.labelConfig.labelLeftClass\"\n [required]=\"button.labelConfig.required\"\n [description]=\"button.labelConfig.description\"\n [labelRight]=\"button.labelConfig.labelRight\"\n [labelRightClass]=\"button.labelConfig.labelRightClass\"\n [onlyShowCount]=\"button.labelConfig.onlyShowCount\"\n [buttonsLeft]=\"button.labelConfig.buttonsLeft\"\n [disableButtonsLeft]=\"button.labelConfig.disableButtonsLeft\"\n [buttonsRight]=\"button.labelConfig.buttonsRight\"\n [disableButtonsRight]=\"button.labelConfig.disableButtonsRight\"\n [hasToggle]=\"button.labelConfig.hasToggle\"\n [toggleActive]=\"button.labelConfig.toggleActive\"\n [toggleDisable]=\"button.labelConfig.toggleDisable\"\n [popover]=\"button.labelConfig.popover\"\n [iconPopoverClass]=\"button.labelConfig.iconPopoverClass\"\n [limitLength]=\"button.labelConfig.limitLength\"\n [buttonsDescription]=\"button.labelConfig.buttonsDescription\"\n [disableButtonsDescription]=\"button.labelConfig.disableButtonsDescription\"\n [buttonsDescriptionContainerClass]=\"button.labelConfig.buttonsDescriptionContainerClass\"\n [count]=\"button.labelConfig.count\" />\n }\n </div>\n }\n </div>\n }\n\n <div class=\"{{ divideClassHeader()?.classButtonRight || 'w-[35%]' }} flex justify-end items-center\">\n @for (button of buttonRight(); track button.key) {\n <div [class.ml-[12px]]=\"!$first\">\n @if (button.key === 'label' && button.labelConfig) {\n <libs_ui-components-label\n [classInclude]=\"button.labelConfig.classInclude + ' pb-0'\"\n [labelLeft]=\"button.labelConfig.labelLeft\"\n [labelLeftClass]=\"button.labelConfig.labelLeftClass\"\n [required]=\"button.labelConfig.required\"\n [description]=\"button.labelConfig.description\"\n [labelRight]=\"button.labelConfig.labelRight\"\n [labelRightClass]=\"button.labelConfig.labelRightClass\"\n [onlyShowCount]=\"button.labelConfig.onlyShowCount\"\n [buttonsLeft]=\"button.labelConfig.buttonsLeft\"\n [disableButtonsLeft]=\"button.labelConfig.disableButtonsLeft\"\n [buttonsRight]=\"button.labelConfig.buttonsRight\"\n [disableButtonsRight]=\"button.labelConfig.disableButtonsRight\"\n [hasToggle]=\"button.labelConfig.hasToggle\"\n [toggleActive]=\"button.labelConfig.toggleActive\"\n [toggleDisable]=\"button.labelConfig.toggleDisable\"\n [popover]=\"button.labelConfig.popover\"\n [iconPopoverClass]=\"button.labelConfig.iconPopoverClass\"\n [limitLength]=\"button.labelConfig.limitLength\"\n [buttonsDescription]=\"button.labelConfig.buttonsDescription\"\n [disableButtonsDescription]=\"button.labelConfig.disableButtonsDescription\"\n [buttonsDescriptionContainerClass]=\"button.labelConfig.buttonsDescriptionContainerClass\"\n [count]=\"button.labelConfig.count\" />\n }\n @if (button.key === 'switch') {\n <libs_ui-components-switch\n [active]=\"button.active || false\"\n [disable]=\"button.disable || disable()\"\n class=\"{{ button.classInclude }}\"\n (outSwitch)=\"handlerSwitch($event, button)\" />\n }\n @if (button.key === 'button') {\n <libs_ui-components-buttons-button\n [label]=\"button?.label || ''\"\n [classLabel]=\"(button.classLabel || '') + ' libs-ui-font-h4s'\"\n [type]=\"button.type || 'button-primary'\"\n [classInclude]=\"button.classInclude || ''\"\n [classIconLeft]=\"button.classIconLeft || ''\"\n [classIconRight]=\"button.classIconRight || ''\"\n [popover]=\"button.popover || {}\"\n [disable]=\"button.disable || disable()\"\n [isPending]=\"button.isPending || false\"\n [iconOnlyType]=\"button.iconOnlyType || false\"\n (outClick)=\"handlerClickButton(button)\" />\n }\n @if (button.key === 'line-space') {\n <div\n class=\"bg-[#666b79] w-[1px] h-[28px]\"\n [class]=\"button.classInclude\">\n &nbsp;\n </div>\n }\n </div>\n }\n @if (menuDropDownConfigs(); as menuDropDownConfigs) {\n <div class=\"ml-[12px]\">\n <libs_ui-components-dropdown\n [isNgContent]=\"true\"\n [zIndex]=\"zIndex() + 1\"\n [listConfig]=\"menuDropDownConfigs.listConfig\"\n [listHiddenInputSearch]=\"true\"\n [popoverCustomConfig]=\"menuDropDownConfigs.popoverCustomConfig\"\n (outFunctionsControl)=\"handlerControlDropdownMenu($event)\"\n (outSelectKey)=\"handlerSelectedKey($event)\">\n <libs_ui-components-buttons-button\n [classInclude]=\"'p-[8px]'\"\n [type]=\"'button-third'\"\n [iconOnlyType]=\"true\"\n [classIconLeft]=\"'libs-ui-icon-more-vertical text-[#333333] text-[12px]'\"\n [popover]=\"{ config: { content: 'i18n_4x_other_operations' } }\"\n [ignoreStopPropagationEvent]=\"true\" />\n </libs_ui-components-dropdown>\n </div>\n }\n @if (templateRight(); as templateRight) {\n <ng-container *ngTemplateOutlet=\"templateRight\" />\n }\n </div>\n </div>\n\n <!-- ===================== BODY (V2: Lazy Load ho\u1EB7c ng-content) ===================== -->\n @if (bodyConfig().getComponentOutlet; as getBodyComponentOutlet) {\n <!-- Lazy load mode -->\n <div [class]=\"'libs-ui-components-page_full-body ' + (bodyConfig().classInclude || '')\">\n @let constHtmlCompBody = undefined | LibsUiPipesCallFunctionInTemplatePipe: getBodyComponentOutlet : sectionData() : null : { valueIsEmpty: null } | async;\n @let constHtmlInputsBody = undefined | LibsUiPipesCallFunctionInTemplatePipe: bodyConfig().getDataComponentOutlet : sectionData() : null : { valueIsEmpty: null } | async;\n @if (constHtmlCompBody) {\n @defer {\n <ng-container *ngComponentOutlet=\"constHtmlCompBody; inputs: constHtmlInputsBody\" />\n } @loading {\n <libs_ui-components-skeleton [config]=\"resolvedSkeletonBody()\" />\n }\n } @else {\n <libs_ui-components-skeleton [config]=\"resolvedSkeletonBody()\" />\n }\n </div>\n }\n</div>\n", styles: ["@-webkit-keyframes animation-slide-to-left{0%{right:-200px;opacity:0}to{right:12px;opacity:1}}@keyframes animation-slide-to-left{0%{right:-200px;opacity:0}to{right:0;opacity:1}}.libs-ui-components-page_full{position:absolute;width:100vw;height:100vh;left:0;top:0;display:flex;flex-direction:column;animation:animation-slide-to-left ease-out .3s}.libs-ui-components-page_full .libs-ui-components-page_full-header{height:50px;padding:14px 16px;border-bottom:solid 1px #e6e7ea;background-color:#fff;width:100%;display:flex;align-items:center}.libs-ui-components-page_full .libs-ui-components-page_full-body{height:100%}\n"] }]
160
+ ], template: "<div\n class=\"libs-ui-components-page_full overflow-hidden\"\n [style.zIndex]=\"zIndex()\"\n [style.background-color]=\"ignoreBackgroundColor() ? 'transparent' : '#f2f5f7'\">\n <!-- ===================== HEADER (gi\u1EEF nguy\u00EAn 100% t\u1EEB V1) ===================== -->\n <div [class]=\"'libs-ui-components-page_full-header ' + classHeaderInclude()\">\n <div class=\"{{ divideClassHeader()?.classButtonCancel || 'w-[25%]' }}\">\n @if (leftTemplate(); as leftTemplate) {\n <ng-container *ngTemplateOutlet=\"leftTemplate\" />\n }\n @if (labelLeft(); as labelLeft) {\n <libs_ui-components-buttons-button\n [label]=\"labelLeft\"\n [type]=\"'button-link-primary'\"\n [classIconLeft]=\"'libs-ui-icon-chevron-right rotate-[180deg] before:text-[16px]'\"\n [classLabel]=\"'libs-ui-font-h4r'\"\n (outClick)=\"cancel()\" />\n }\n </div>\n\n @if (centerTemplate(); as centerTemplate) {\n <div class=\"{{ divideClassHeader()?.classButtonCenter || 'w-[40%]' }} flex items-center justify-center\">\n <ng-container *ngTemplateOutlet=\"centerTemplate\" />\n </div>\n } @else {\n <div class=\"{{ divideClassHeader()?.classButtonCenter || 'w-[40%]' }} flex items-center justify-center\">\n <libs_ui-components-popover\n type=\"text\"\n [config]=\"{ maxWidth: 250, zIndex: zIndex() + 1 }\"\n [classInclude]=\"'libs-ui-font-h2s'\"\n [innerHtml]=\"title() ? (title() | LibsUiPipesEscapeHtmlPipe) : '&mdash;'\" />\n @if (hasEdit(); as hasEdit) {\n <libs_ui-components-buttons-button\n [type]=\"'button-link-primary'\"\n (outClick)=\"handlerEdit()\"\n [iconOnlyType]=\"true\"\n [classIconLeft]=\"'libs-ui-icon-edit-line'\"\n [classInclude]=\"'ml-[4px]'\" />\n }\n @for (button of buttonCenter(); track button.key) {\n <div class=\"ml-[12px] flex items-center\">\n @if (button.key === 'button') {\n <libs_ui-components-buttons-button\n [label]=\"button.label || ''\"\n [classLabel]=\"(button.classLabel || '') + ' libs-ui-font-head-4s'\"\n [type]=\"button.type || 'button-primary'\"\n [classInclude]=\"button.classInclude || ''\"\n [classIconLeft]=\"button.classIconLeft || ''\"\n [classIconRight]=\"button.classIconRight || ''\"\n [popover]=\"button.popover || {}\"\n [disable]=\"button.disable || disable()\"\n [isPending]=\"button.isPending || false\"\n (outClick)=\"handlerClickButton(button)\" />\n }\n @if (button.key === 'button-status' && button.configButtonStatus) {\n <libs_ui-components-buttons-status\n [class]=\"button.classInclude\"\n [config]=\"button.configButtonStatus\" />\n }\n @if (button.key === 'switch') {\n <libs_ui-components-switch\n [active]=\"button.active || false\"\n [disable]=\"button.disable || disable()\"\n class=\"{{ button.classInclude }}\"\n (outSwitch)=\"handlerSwitch($event, button)\" />\n }\n @if (button.key === 'label' && button.labelConfig) {\n <libs_ui-components-label\n [classInclude]=\"button.labelConfig.classInclude + ' pb-0 text-white'\"\n [labelLeft]=\"button.labelConfig.labelLeft\"\n [labelLeftClass]=\"button.labelConfig.labelLeftClass\"\n [required]=\"button.labelConfig.required\"\n [description]=\"button.labelConfig.description\"\n [labelRight]=\"button.labelConfig.labelRight\"\n [labelRightClass]=\"button.labelConfig.labelRightClass\"\n [onlyShowCount]=\"button.labelConfig.onlyShowCount\"\n [buttonsLeft]=\"button.labelConfig.buttonsLeft\"\n [disableButtonsLeft]=\"button.labelConfig.disableButtonsLeft\"\n [buttonsRight]=\"button.labelConfig.buttonsRight\"\n [disableButtonsRight]=\"button.labelConfig.disableButtonsRight\"\n [hasToggle]=\"button.labelConfig.hasToggle\"\n [toggleActive]=\"button.labelConfig.toggleActive\"\n [toggleDisable]=\"button.labelConfig.toggleDisable\"\n [popover]=\"button.labelConfig.popover\"\n [iconPopoverClass]=\"button.labelConfig.iconPopoverClass\"\n [limitLength]=\"button.labelConfig.limitLength\"\n [buttonsDescription]=\"button.labelConfig.buttonsDescription\"\n [disableButtonsDescription]=\"button.labelConfig.disableButtonsDescription\"\n [buttonsDescriptionContainerClass]=\"button.labelConfig.buttonsDescriptionContainerClass\"\n [count]=\"button.labelConfig.count\" />\n }\n </div>\n }\n </div>\n }\n\n <div class=\"{{ divideClassHeader()?.classButtonRight || 'w-[35%]' }} flex justify-end items-center\">\n @for (button of buttonRight(); track button.key) {\n <div [class.ml-[12px]]=\"!$first\">\n @if (button.key === 'label' && button.labelConfig) {\n <libs_ui-components-label\n [classInclude]=\"button.labelConfig.classInclude + ' pb-0'\"\n [labelLeft]=\"button.labelConfig.labelLeft\"\n [labelLeftClass]=\"button.labelConfig.labelLeftClass\"\n [required]=\"button.labelConfig.required\"\n [description]=\"button.labelConfig.description\"\n [labelRight]=\"button.labelConfig.labelRight\"\n [labelRightClass]=\"button.labelConfig.labelRightClass\"\n [onlyShowCount]=\"button.labelConfig.onlyShowCount\"\n [buttonsLeft]=\"button.labelConfig.buttonsLeft\"\n [disableButtonsLeft]=\"button.labelConfig.disableButtonsLeft\"\n [buttonsRight]=\"button.labelConfig.buttonsRight\"\n [disableButtonsRight]=\"button.labelConfig.disableButtonsRight\"\n [hasToggle]=\"button.labelConfig.hasToggle\"\n [toggleActive]=\"button.labelConfig.toggleActive\"\n [toggleDisable]=\"button.labelConfig.toggleDisable\"\n [popover]=\"button.labelConfig.popover\"\n [iconPopoverClass]=\"button.labelConfig.iconPopoverClass\"\n [limitLength]=\"button.labelConfig.limitLength\"\n [buttonsDescription]=\"button.labelConfig.buttonsDescription\"\n [disableButtonsDescription]=\"button.labelConfig.disableButtonsDescription\"\n [buttonsDescriptionContainerClass]=\"button.labelConfig.buttonsDescriptionContainerClass\"\n [count]=\"button.labelConfig.count\" />\n }\n @if (button.key === 'switch') {\n <libs_ui-components-switch\n [active]=\"button.active || false\"\n [disable]=\"button.disable || disable()\"\n class=\"{{ button.classInclude }}\"\n (outSwitch)=\"handlerSwitch($event, button)\" />\n }\n @if (button.key === 'button') {\n <libs_ui-components-buttons-button\n [label]=\"button?.label || ''\"\n [classLabel]=\"(button.classLabel || '') + ' libs-ui-font-h4s'\"\n [type]=\"button.type || 'button-primary'\"\n [classInclude]=\"button.classInclude || ''\"\n [classIconLeft]=\"button.classIconLeft || ''\"\n [classIconRight]=\"button.classIconRight || ''\"\n [popover]=\"button.popover || {}\"\n [disable]=\"button.disable || disable()\"\n [isPending]=\"button.isPending || false\"\n [iconOnlyType]=\"button.iconOnlyType || false\"\n (outClick)=\"handlerClickButton(button)\" />\n }\n @if (button.key === 'line-space') {\n <div\n class=\"bg-[#666b79] w-[1px] h-[28px]\"\n [class]=\"button.classInclude\">\n &nbsp;\n </div>\n }\n </div>\n }\n @if (menuDropDownConfigs(); as menuDropDownConfigs) {\n <div class=\"ml-[12px]\">\n <libs_ui-components-dropdown\n [isNgContent]=\"true\"\n [zIndex]=\"zIndex() + 1\"\n [listConfig]=\"menuDropDownConfigs.listConfig\"\n [listHiddenInputSearch]=\"true\"\n [popoverCustomConfig]=\"menuDropDownConfigs.popoverCustomConfig\"\n (outFunctionsControl)=\"handlerControlDropdownMenu($event)\"\n (outSelectKey)=\"handlerSelectedKey($event)\">\n <libs_ui-components-buttons-button\n [classInclude]=\"'p-[8px]'\"\n [type]=\"'button-third'\"\n [iconOnlyType]=\"true\"\n [classIconLeft]=\"'libs-ui-icon-more-vertical text-[#333333] text-[12px]'\"\n [popover]=\"{ config: { content: 'i18n_4x_other_operations' } }\"\n [ignoreStopPropagationEvent]=\"true\" />\n </libs_ui-components-dropdown>\n </div>\n }\n @if (templateRight(); as templateRight) {\n <ng-container *ngTemplateOutlet=\"templateRight\" />\n }\n </div>\n </div>\n\n <!-- ===================== BODY (V2: Lazy Load ho\u1EB7c ng-content) ===================== -->\n @if (bodyConfig().getComponentOutlet; as getBodyComponentOutlet) {\n <!-- Lazy load mode -->\n <div [class]=\"'libs-ui-components-page_full-body ' + (bodyConfig().classInclude || '')\">\n @let constHtmlCompBody = undefined | LibsUiPipesCallFunctionInTemplatePipe: getBodyComponentOutlet : sectionData() : null : pipeEmptyConfig | async;\n @let constHtmlInputsBody = undefined | LibsUiPipesCallFunctionInTemplatePipe: bodyConfig().getDataComponentOutlet : sectionData() : null : pipeEmptyConfig | async;\n @if (constHtmlCompBody) {\n <ng-container *ngComponentOutlet=\"constHtmlCompBody; inputs: constHtmlInputsBody\" />\n } @else {\n <libs_ui-components-skeleton [config]=\"resolvedSkeletonBody()\" />\n }\n </div>\n }\n</div>\n", styles: ["@-webkit-keyframes animation-slide-to-left{0%{right:-200px;opacity:0}to{right:12px;opacity:1}}@keyframes animation-slide-to-left{0%{right:-200px;opacity:0}to{right:0;opacity:1}}.libs-ui-components-page_full{position:absolute;width:100vw;height:100vh;left:0;top:0;display:flex;flex-direction:column;animation:animation-slide-to-left ease-out .3s}.libs-ui-components-page_full .libs-ui-components-page_full-header{height:50px;padding:14px 16px;border-bottom:solid 1px #e6e7ea;background-color:#fff;width:100%;display:flex;align-items:center}.libs-ui-components-page_full .libs-ui-components-page_full-body{height:100%}\n"] }]
150
161
  }] });
151
162
 
163
+ /**
164
+ * @deprecated Use {@link LibsUiComponentsPagesTemplateFullScreenV2Component} instead.
165
+ */
152
166
  class LibsUiComponentsPagesTemplateFullScreenComponent {
153
167
  idOverlay = signal(uuid());
154
168
  functionControlMenu;
@@ -182,6 +196,7 @@ class LibsUiComponentsPagesTemplateFullScreenComponent {
182
196
  state: true,
183
197
  idOverlay: this.idOverlay(),
184
198
  timeLiveUpdate: getDayjs().unix(),
199
+ ignoreIntervalUpdateTimeLiveEvent: UtilsCommunicateMicroKeyGlobal.IGNORE_INTERVAL_UPDATE_TIME_LIVE_EVENT_MODAL,
185
200
  },
186
201
  };
187
202
  UtilsCommunicateMicro.PostMessageToParent(data);
@@ -236,7 +251,7 @@ class LibsUiComponentsPagesTemplateFullScreenComponent {
236
251
  }
237
252
  }
238
253
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsPagesTemplateFullScreenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
239
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsPagesTemplateFullScreenComponent, isStandalone: true, selector: "libs_ui-components-pages_template_full_screen", inputs: { classHeaderInclude: { classPropertyName: "classHeaderInclude", publicName: "classHeaderInclude", isSignal: true, isRequired: false, transformFunction: null }, labelLeft: { classPropertyName: "labelLeft", publicName: "labelLeft", isSignal: true, isRequired: false, transformFunction: null }, classBodyInclude: { classPropertyName: "classBodyInclude", publicName: "classBodyInclude", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, buttonCenter: { classPropertyName: "buttonCenter", publicName: "buttonCenter", isSignal: true, isRequired: false, transformFunction: null }, buttonRight: { classPropertyName: "buttonRight", publicName: "buttonRight", isSignal: true, isRequired: false, transformFunction: null }, hasEdit: { classPropertyName: "hasEdit", publicName: "hasEdit", isSignal: true, isRequired: false, transformFunction: null }, menuDropDownConfigs: { classPropertyName: "menuDropDownConfigs", publicName: "menuDropDownConfigs", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, ignoreClosePageFullEvent: { classPropertyName: "ignoreClosePageFullEvent", publicName: "ignoreClosePageFullEvent", isSignal: true, isRequired: false, transformFunction: null }, ignoreBackgroundColor: { classPropertyName: "ignoreBackgroundColor", publicName: "ignoreBackgroundColor", isSignal: true, isRequired: false, transformFunction: null }, divideClassHeader: { classPropertyName: "divideClassHeader", publicName: "divideClassHeader", isSignal: true, isRequired: false, transformFunction: null }, centerTemplate: { classPropertyName: "centerTemplate", publicName: "centerTemplate", isSignal: true, isRequired: false, transformFunction: null }, templateRight: { classPropertyName: "templateRight", publicName: "templateRight", isSignal: true, isRequired: false, transformFunction: null }, leftTemplate: { classPropertyName: "leftTemplate", publicName: "leftTemplate", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outClose: "outClose", outEdit: "outEdit", outSelectedMenuDropdown: "outSelectedMenuDropdown", outClickButton: "outClickButton" }, providers: [], ngImport: i0, template: "<div\n class=\"libs-ui-components-page_full overflow-hidden\"\n [style.zIndex]=\"zIndex()\"\n [style.background-color]=\"ignoreBackgroundColor() ? 'transparent' : '#f2f5f7'\">\n <div [class]=\"'libs-ui-components-page_full-header ' + classHeaderInclude()\">\n <div class=\"{{ divideClassHeader()?.classButtonCancel || 'w-[25%]' }}\">\n @if (leftTemplate(); as leftTemplate) {\n <ng-container *ngTemplateOutlet=\"leftTemplate\" />\n }\n @if (labelLeft(); as labelLeft) {\n <libs_ui-components-buttons-button\n [label]=\"labelLeft\"\n [type]=\"'button-link-primary'\"\n [classIconLeft]=\"'libs-ui-icon-chevron-right rotate-[180deg] before:text-[16px]'\"\n [classLabel]=\"'libs-ui-font-h4r'\"\n (outClick)=\"cancel()\" />\n }\n </div>\n\n @if (centerTemplate(); as centerTemplate) {\n <div class=\"{{ divideClassHeader()?.classButtonCenter || 'w-[40%]' }} flex items-center justify-center\">\n <ng-container *ngTemplateOutlet=\"centerTemplate\" />\n </div>\n } @else {\n <div class=\"{{ divideClassHeader()?.classButtonCenter || 'w-[40%]' }} flex items-center justify-center\">\n <libs_ui-components-popover\n type=\"text\"\n [config]=\"{\n maxWidth: 250,\n zIndex: zIndex() + 1,\n }\"\n [classInclude]=\"'libs-ui-font-h2s'\"\n [innerHtml]=\"title() ? (title() | LibsUiPipesEscapeHtmlPipe) : '&mdash;'\" />\n\n @if (hasEdit(); as hasEdit) {\n <libs_ui-components-buttons-button\n [type]=\"'button-link-primary'\"\n (outClick)=\"handlerEdit()\"\n [iconOnlyType]=\"true\"\n [classIconLeft]=\"'libs-ui-icon-edit-line'\"\n [classInclude]=\"'ml-[4px]'\" />\n }\n @for (button of buttonCenter(); track button.key) {\n <div class=\"ml-[12px] flex items-center\">\n @if (button.key === 'button') {\n <libs_ui-components-buttons-button\n [label]=\"button.label || ''\"\n [classLabel]=\"(button.classLabel || '') + ' libs-ui-font-head-4s'\"\n [type]=\"button.type || 'button-primary'\"\n [classInclude]=\"button.classInclude || ''\"\n [classIconLeft]=\"button.classIconLeft || ''\"\n [classIconRight]=\"button.classIconRight || ''\"\n [popover]=\"button.popover || {}\"\n [disable]=\"button.disable || disable()\"\n [isPending]=\"button.isPending || false\"\n (outClick)=\"handlerClickButton(button)\" />\n }\n @if (button.key === 'button-status' && button.configButtonStatus) {\n <libs_ui-components-buttons-status\n [class]=\"button.classInclude\"\n [config]=\"button.configButtonStatus\" />\n }\n @if (button.key === 'switch') {\n <libs_ui-components-switch\n [active]=\"button.active || false\"\n [disable]=\"button.disable || disable()\"\n class=\"{{ button.classInclude }}\"\n (outSwitch)=\"handlerSwitch($event, button)\" />\n }\n @if (button.key === 'label' && button.labelConfig) {\n <libs_ui-components-label\n [classInclude]=\"button.labelConfig.classInclude + ' pb-0 text-white'\"\n [labelLeft]=\"button.labelConfig.labelLeft\"\n [labelLeftClass]=\"button.labelConfig.labelLeftClass\"\n [required]=\"button.labelConfig.required\"\n [description]=\"button.labelConfig.description\"\n [labelRight]=\"button.labelConfig.labelRight\"\n [labelRightClass]=\"button.labelConfig.labelRightClass\"\n [onlyShowCount]=\"button.labelConfig.onlyShowCount\"\n [buttonsLeft]=\"button.labelConfig.buttonsLeft\"\n [disableButtonsLeft]=\"button.labelConfig.disableButtonsLeft\"\n [buttonsRight]=\"button.labelConfig.buttonsRight\"\n [disableButtonsRight]=\"button.labelConfig.disableButtonsRight\"\n [hasToggle]=\"button.labelConfig.hasToggle\"\n [toggleActive]=\"button.labelConfig.toggleActive\"\n [toggleDisable]=\"button.labelConfig.toggleDisable\"\n [popover]=\"button.labelConfig.popover\"\n [iconPopoverClass]=\"button.labelConfig.iconPopoverClass\"\n [onlyShowCount]=\"button.labelConfig.onlyShowCount\"\n [limitLength]=\"button.labelConfig.limitLength\"\n [buttonsDescription]=\"button.labelConfig.buttonsDescription\"\n [disableButtonsDescription]=\"button.labelConfig.disableButtonsDescription\"\n [buttonsDescriptionContainerClass]=\"button.labelConfig.buttonsDescriptionContainerClass\"\n [count]=\"button.labelConfig.count\" />\n }\n </div>\n }\n </div>\n }\n\n <div class=\"{{ divideClassHeader()?.classButtonRight || 'w-[35%]' }} flex justify-end items-center\">\n @for (button of buttonRight(); track button.key) {\n <div [class.ml-[12px]]=\"!$first\">\n @if (button.key === 'label' && button.labelConfig) {\n <libs_ui-components-label\n [classInclude]=\"button.labelConfig.classInclude + ' pb-0'\"\n [labelLeft]=\"button.labelConfig.labelLeft\"\n [labelLeftClass]=\"button.labelConfig.labelLeftClass\"\n [required]=\"button.labelConfig.required\"\n [description]=\"button.labelConfig.description\"\n [labelRight]=\"button.labelConfig.labelRight\"\n [labelRightClass]=\"button.labelConfig.labelRightClass\"\n [onlyShowCount]=\"button.labelConfig.onlyShowCount\"\n [buttonsLeft]=\"button.labelConfig.buttonsLeft\"\n [disableButtonsLeft]=\"button.labelConfig.disableButtonsLeft\"\n [buttonsRight]=\"button.labelConfig.buttonsRight\"\n [disableButtonsRight]=\"button.labelConfig.disableButtonsRight\"\n [hasToggle]=\"button.labelConfig.hasToggle\"\n [toggleActive]=\"button.labelConfig.toggleActive\"\n [toggleDisable]=\"button.labelConfig.toggleDisable\"\n [popover]=\"button.labelConfig.popover\"\n [iconPopoverClass]=\"button.labelConfig.iconPopoverClass\"\n [onlyShowCount]=\"button.labelConfig.onlyShowCount\"\n [limitLength]=\"button.labelConfig.limitLength\"\n [buttonsDescription]=\"button.labelConfig.buttonsDescription\"\n [disableButtonsDescription]=\"button.labelConfig.disableButtonsDescription\"\n [buttonsDescriptionContainerClass]=\"button.labelConfig.buttonsDescriptionContainerClass\"\n [count]=\"button.labelConfig.count\" />\n }\n @if (button.key === 'switch') {\n <libs_ui-components-switch\n [active]=\"button.active || false\"\n [disable]=\"button.disable || disable()\"\n class=\"{{ button.classInclude }}\"\n (outSwitch)=\"handlerSwitch($event, button)\" />\n }\n\n @if (button.key === 'button') {\n <libs_ui-components-buttons-button\n [label]=\"button?.label || ''\"\n [classLabel]=\"(button.classLabel || '') + ' libs-ui-font-h4s'\"\n [type]=\"button.type || 'button-primary'\"\n [classInclude]=\"button.classInclude || ''\"\n [classIconLeft]=\"button.classIconLeft || ''\"\n [classIconRight]=\"button.classIconRight || ''\"\n [popover]=\"button.popover || {}\"\n [disable]=\"button.disable || disable()\"\n [isPending]=\"button.isPending || false\"\n [iconOnlyType]=\"button.iconOnlyType || false\"\n (outClick)=\"handlerClickButton(button)\" />\n }\n <!-- th\u00EAm \u0111\u01B0\u1EDDng ph\u00E2n c\u00E1ch -->\n @if (button.key === 'line-space') {\n <div\n class=\"bg-[#666b79] w-[1px] h-[28px]\"\n [class]=\"button.classInclude\">\n &nbsp;\n </div>\n }\n </div>\n }\n @if (menuDropDownConfigs(); as menuDropDownConfigs) {\n <div class=\"ml-[12px]\">\n <libs_ui-components-dropdown\n [isNgContent]=\"true\"\n [zIndex]=\"zIndex() + 1\"\n [listConfig]=\"menuDropDownConfigs.listConfig\"\n [listHiddenInputSearch]=\"true\"\n [popoverCustomConfig]=\"menuDropDownConfigs.popoverCustomConfig\"\n (outFunctionsControl)=\"handlerControlDropdownMenu($event)\"\n (outSelectKey)=\"handlerSelectedKey($event)\">\n <libs_ui-components-buttons-button\n [classInclude]=\"'p-[8px]'\"\n [type]=\"'button-third'\"\n [iconOnlyType]=\"true\"\n [classIconLeft]=\"'libs-ui-icon-more-vertical text-[#333333] text-[12px]'\"\n [popover]=\"{\n config: {\n content: 'i18n_4x_other_operations',\n },\n }\"\n [ignoreStopPropagationEvent]=\"true\" />\n </libs_ui-components-dropdown>\n </div>\n }\n @if (templateRight(); as templateRight) {\n <ng-container *ngTemplateOutlet=\"templateRight\" />\n }\n </div>\n </div>\n <div [class]=\"'libs-ui-components-page_full-body ' + classBodyInclude()\">\n <ng-content />\n </div>\n</div>\n", styles: ["@-webkit-keyframes animation-slide-to-left{0%{right:-200px;opacity:0}to{right:12px;opacity:1}}@keyframes animation-slide-to-left{0%{right:-200px;opacity:0}to{right:0;opacity:1}}.libs-ui-components-page_full{position:absolute;width:100vw;height:100vh;left:0;top:0;display:flex;flex-direction:column;animation:animation-slide-to-left ease-out .3s}.libs-ui-components-page_full .libs-ui-components-page_full-header{height:50px;padding:14px 16px;border-bottom:solid 1px #e6e7ea;background-color:#fff;width:100%;display:flex;align-items:center}.libs-ui-components-page_full .libs-ui-components-page_full-body{height:100%}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LibsUiComponentsDropdownComponent, selector: "libs_ui-components-dropdown", inputs: ["useXssFilter", "popoverElementRefCustom", "classInclude", "ignoreStopPropagationEvent", "flagMouse", "flagMouseContent", "popoverCustomConfig", "isNgContent", "zIndex", "convertItemSelected", "getPopoverItemSelected", "httpRequestDetailItemById", "lengthKeys", "textDisplayWhenNoSelect", "textDisplayWhenMultiSelect", "classIncludeTextDisplayWhenNoSelect", "fieldLabel", "fieldGetLabel", "labelPopoverConfig", "labelPopoverFullWidth", "hasContentUnitRight", "listSearchNoDataTemplateRef", "fieldGetImage", "imageSize", "typeShape", "fieldGetIcon", "fieldGetTextAvatar", "fieldGetColorAvatar", "classAvatarInclude", "getLastTextAfterSpace", "linkImageError", "showError", "showBorderError", "disable", "readonly", "labelConfig", "disableLabel", "listSearchConfig", "isSearchOnline", "listHiddenInputSearch", "listSearchPadding", "listKeySearch", "listDividerClassInclude", "listConfig", "listButtonsOther", "listHasButtonUnSelectOption", "listClickExactly", "listBackgroundCustom", "listMaxItemShow", "listKeySelected", "listMultiKeySelected", "listKeysDisable", "listKeysHidden", "validRequired", "validMaxItemSelected", "changeValidUndefinedResetError", "allowSelectItemMultiple", "focusInputSearch", "onlyEmitDataWhenReset", "resetKeyWhenSelectAllKey", "listConfigHasDivider", "classIncludeIcon", "classIncludeContent", "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", "tabKeyActive", "tabsConfig", "ignoreBorderBottom"], outputs: ["flagMouseChange", "flagMouseContentChange", "lengthKeysChange", "showBorderErrorChange", "listKeySelectedChange", "listMultiKeySelectedChange", "tabKeyActiveChange", "outSelectKey", "outSelectMultiKey", "outFunctionsControl", "outValidEvent", "outChangStageFlagMouse", "outDataChange", "outClickButtonOther", "outShowList", "outChangeTabKeyActive"] }, { kind: "component", type: LibsUiComponentsSwitchComponent, selector: "libs_ui-components-switch", inputs: ["size", "disable", "active"], outputs: ["activeChange", "outSwitch"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsButtonsStatusComponent, selector: "libs_ui-components-buttons-status", inputs: ["config"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "pipe", type: LibsUiPipesEscapeHtmlPipe, name: "LibsUiPipesEscapeHtmlPipe" }, { kind: "component", type: LibsUiComponentsLabelComponent, selector: "libs_ui-components-label", inputs: ["iconPopoverClass", "classInclude", "labelLeft", "labelLeftClass", "labelLeftBehindToggleButton", "popover", "required", "buttonsLeft", "disableButtonsLeft", "buttonsRight", "disableButtonsRight", "labelRight", "labelRightClass", "labelRightRequired", "hasToggle", "toggleSize", "toggleActive", "toggleDisable", "description", "descriptionClass", "buttonsDescription", "disableButtonsDescription", "buttonsDescriptionContainerClass", "onlyShowCount", "zIndexPopover", "timerDestroyPopover", "count", "limitLength"], outputs: ["outClickButton", "outSwitchEvent", "outLabelRightClick", "outLabelLeftClick"] }] });
254
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsPagesTemplateFullScreenComponent, isStandalone: true, selector: "libs_ui-components-pages_template_full_screen", inputs: { classHeaderInclude: { classPropertyName: "classHeaderInclude", publicName: "classHeaderInclude", isSignal: true, isRequired: false, transformFunction: null }, labelLeft: { classPropertyName: "labelLeft", publicName: "labelLeft", isSignal: true, isRequired: false, transformFunction: null }, classBodyInclude: { classPropertyName: "classBodyInclude", publicName: "classBodyInclude", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, buttonCenter: { classPropertyName: "buttonCenter", publicName: "buttonCenter", isSignal: true, isRequired: false, transformFunction: null }, buttonRight: { classPropertyName: "buttonRight", publicName: "buttonRight", isSignal: true, isRequired: false, transformFunction: null }, hasEdit: { classPropertyName: "hasEdit", publicName: "hasEdit", isSignal: true, isRequired: false, transformFunction: null }, menuDropDownConfigs: { classPropertyName: "menuDropDownConfigs", publicName: "menuDropDownConfigs", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, ignoreClosePageFullEvent: { classPropertyName: "ignoreClosePageFullEvent", publicName: "ignoreClosePageFullEvent", isSignal: true, isRequired: false, transformFunction: null }, ignoreBackgroundColor: { classPropertyName: "ignoreBackgroundColor", publicName: "ignoreBackgroundColor", isSignal: true, isRequired: false, transformFunction: null }, divideClassHeader: { classPropertyName: "divideClassHeader", publicName: "divideClassHeader", isSignal: true, isRequired: false, transformFunction: null }, centerTemplate: { classPropertyName: "centerTemplate", publicName: "centerTemplate", isSignal: true, isRequired: false, transformFunction: null }, templateRight: { classPropertyName: "templateRight", publicName: "templateRight", isSignal: true, isRequired: false, transformFunction: null }, leftTemplate: { classPropertyName: "leftTemplate", publicName: "leftTemplate", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outClose: "outClose", outEdit: "outEdit", outSelectedMenuDropdown: "outSelectedMenuDropdown", outClickButton: "outClickButton" }, providers: [], ngImport: i0, template: "<div\n class=\"libs-ui-components-page_full overflow-hidden\"\n [style.zIndex]=\"zIndex()\"\n [style.background-color]=\"ignoreBackgroundColor() ? 'transparent' : '#f2f5f7'\">\n <div [class]=\"'libs-ui-components-page_full-header ' + classHeaderInclude()\">\n <div class=\"{{ divideClassHeader()?.classButtonCancel || 'w-[25%]' }}\">\n @if (leftTemplate(); as leftTemplate) {\n <ng-container *ngTemplateOutlet=\"leftTemplate\" />\n }\n @if (labelLeft(); as labelLeft) {\n <libs_ui-components-buttons-button\n [label]=\"labelLeft\"\n [type]=\"'button-link-primary'\"\n [classIconLeft]=\"'libs-ui-icon-chevron-right rotate-[180deg] before:text-[16px]'\"\n [classLabel]=\"'libs-ui-font-h4r'\"\n (outClick)=\"cancel()\" />\n }\n </div>\n\n @if (centerTemplate(); as centerTemplate) {\n <div class=\"{{ divideClassHeader()?.classButtonCenter || 'w-[40%]' }} flex items-center justify-center\">\n <ng-container *ngTemplateOutlet=\"centerTemplate\" />\n </div>\n } @else {\n <div class=\"{{ divideClassHeader()?.classButtonCenter || 'w-[40%]' }} flex items-center justify-center\">\n <libs_ui-components-popover\n type=\"text\"\n [config]=\"{\n maxWidth: 250,\n zIndex: zIndex() + 1,\n }\"\n [classInclude]=\"'libs-ui-font-h2s'\"\n [innerHtml]=\"title() ? (title() | LibsUiPipesEscapeHtmlPipe) : '&mdash;'\" />\n\n @if (hasEdit(); as hasEdit) {\n <libs_ui-components-buttons-button\n [type]=\"'button-link-primary'\"\n (outClick)=\"handlerEdit()\"\n [iconOnlyType]=\"true\"\n [classIconLeft]=\"'libs-ui-icon-edit-line'\"\n [classInclude]=\"'ml-[4px]'\" />\n }\n @for (button of buttonCenter(); track button.key) {\n <div class=\"ml-[12px] flex items-center\">\n @if (button.key === 'button') {\n <libs_ui-components-buttons-button\n [label]=\"button.label || ''\"\n [classLabel]=\"(button.classLabel || '') + ' libs-ui-font-head-4s'\"\n [type]=\"button.type || 'button-primary'\"\n [classInclude]=\"button.classInclude || ''\"\n [classIconLeft]=\"button.classIconLeft || ''\"\n [classIconRight]=\"button.classIconRight || ''\"\n [popover]=\"button.popover || {}\"\n [disable]=\"button.disable || disable()\"\n [isPending]=\"button.isPending || false\"\n (outClick)=\"handlerClickButton(button)\" />\n }\n @if (button.key === 'button-status' && button.configButtonStatus) {\n <libs_ui-components-buttons-status\n [class]=\"button.classInclude\"\n [config]=\"button.configButtonStatus\" />\n }\n @if (button.key === 'switch') {\n <libs_ui-components-switch\n [active]=\"button.active || false\"\n [disable]=\"button.disable || disable()\"\n class=\"{{ button.classInclude }}\"\n (outSwitch)=\"handlerSwitch($event, button)\" />\n }\n @if (button.key === 'label' && button.labelConfig) {\n <libs_ui-components-label\n [classInclude]=\"button.labelConfig.classInclude + ' pb-0 text-white'\"\n [labelLeft]=\"button.labelConfig.labelLeft\"\n [labelLeftClass]=\"button.labelConfig.labelLeftClass\"\n [required]=\"button.labelConfig.required\"\n [description]=\"button.labelConfig.description\"\n [labelRight]=\"button.labelConfig.labelRight\"\n [labelRightClass]=\"button.labelConfig.labelRightClass\"\n [onlyShowCount]=\"button.labelConfig.onlyShowCount\"\n [buttonsLeft]=\"button.labelConfig.buttonsLeft\"\n [disableButtonsLeft]=\"button.labelConfig.disableButtonsLeft\"\n [buttonsRight]=\"button.labelConfig.buttonsRight\"\n [disableButtonsRight]=\"button.labelConfig.disableButtonsRight\"\n [hasToggle]=\"button.labelConfig.hasToggle\"\n [toggleActive]=\"button.labelConfig.toggleActive\"\n [toggleDisable]=\"button.labelConfig.toggleDisable\"\n [popover]=\"button.labelConfig.popover\"\n [iconPopoverClass]=\"button.labelConfig.iconPopoverClass\"\n [onlyShowCount]=\"button.labelConfig.onlyShowCount\"\n [limitLength]=\"button.labelConfig.limitLength\"\n [buttonsDescription]=\"button.labelConfig.buttonsDescription\"\n [disableButtonsDescription]=\"button.labelConfig.disableButtonsDescription\"\n [buttonsDescriptionContainerClass]=\"button.labelConfig.buttonsDescriptionContainerClass\"\n [count]=\"button.labelConfig.count\" />\n }\n </div>\n }\n </div>\n }\n\n <div class=\"{{ divideClassHeader()?.classButtonRight || 'w-[35%]' }} flex justify-end items-center\">\n @for (button of buttonRight(); track button.key) {\n <div [class.ml-[12px]]=\"!$first\">\n @if (button.key === 'label' && button.labelConfig) {\n <libs_ui-components-label\n [classInclude]=\"button.labelConfig.classInclude + ' pb-0'\"\n [labelLeft]=\"button.labelConfig.labelLeft\"\n [labelLeftClass]=\"button.labelConfig.labelLeftClass\"\n [required]=\"button.labelConfig.required\"\n [description]=\"button.labelConfig.description\"\n [labelRight]=\"button.labelConfig.labelRight\"\n [labelRightClass]=\"button.labelConfig.labelRightClass\"\n [onlyShowCount]=\"button.labelConfig.onlyShowCount\"\n [buttonsLeft]=\"button.labelConfig.buttonsLeft\"\n [disableButtonsLeft]=\"button.labelConfig.disableButtonsLeft\"\n [buttonsRight]=\"button.labelConfig.buttonsRight\"\n [disableButtonsRight]=\"button.labelConfig.disableButtonsRight\"\n [hasToggle]=\"button.labelConfig.hasToggle\"\n [toggleActive]=\"button.labelConfig.toggleActive\"\n [toggleDisable]=\"button.labelConfig.toggleDisable\"\n [popover]=\"button.labelConfig.popover\"\n [iconPopoverClass]=\"button.labelConfig.iconPopoverClass\"\n [onlyShowCount]=\"button.labelConfig.onlyShowCount\"\n [limitLength]=\"button.labelConfig.limitLength\"\n [buttonsDescription]=\"button.labelConfig.buttonsDescription\"\n [disableButtonsDescription]=\"button.labelConfig.disableButtonsDescription\"\n [buttonsDescriptionContainerClass]=\"button.labelConfig.buttonsDescriptionContainerClass\"\n [count]=\"button.labelConfig.count\" />\n }\n @if (button.key === 'switch') {\n <libs_ui-components-switch\n [active]=\"button.active || false\"\n [disable]=\"button.disable || disable()\"\n class=\"{{ button.classInclude }}\"\n (outSwitch)=\"handlerSwitch($event, button)\" />\n }\n\n @if (button.key === 'button') {\n <libs_ui-components-buttons-button\n [label]=\"button?.label || ''\"\n [classLabel]=\"(button.classLabel || '') + ' libs-ui-font-h4s'\"\n [type]=\"button.type || 'button-primary'\"\n [classInclude]=\"button.classInclude || ''\"\n [classIconLeft]=\"button.classIconLeft || ''\"\n [classIconRight]=\"button.classIconRight || ''\"\n [popover]=\"button.popover || {}\"\n [disable]=\"button.disable || disable()\"\n [isPending]=\"button.isPending || false\"\n [iconOnlyType]=\"button.iconOnlyType || false\"\n (outClick)=\"handlerClickButton(button)\" />\n }\n <!-- th\u00EAm \u0111\u01B0\u1EDDng ph\u00E2n c\u00E1ch -->\n @if (button.key === 'line-space') {\n <div\n class=\"bg-[#666b79] w-[1px] h-[28px]\"\n [class]=\"button.classInclude\">\n &nbsp;\n </div>\n }\n </div>\n }\n @if (menuDropDownConfigs(); as menuDropDownConfigs) {\n <div class=\"ml-[12px]\">\n <libs_ui-components-dropdown\n [isNgContent]=\"true\"\n [zIndex]=\"zIndex() + 1\"\n [listConfig]=\"menuDropDownConfigs.listConfig\"\n [listHiddenInputSearch]=\"true\"\n [popoverCustomConfig]=\"menuDropDownConfigs.popoverCustomConfig\"\n (outFunctionsControl)=\"handlerControlDropdownMenu($event)\"\n (outSelectKey)=\"handlerSelectedKey($event)\">\n <libs_ui-components-buttons-button\n [classInclude]=\"'p-[8px]'\"\n [type]=\"'button-third'\"\n [iconOnlyType]=\"true\"\n [classIconLeft]=\"'libs-ui-icon-more-vertical text-[#333333] text-[12px]'\"\n [popover]=\"{\n config: {\n content: 'i18n_4x_other_operations',\n },\n }\"\n [ignoreStopPropagationEvent]=\"true\" />\n </libs_ui-components-dropdown>\n </div>\n }\n @if (templateRight(); as templateRight) {\n <ng-container *ngTemplateOutlet=\"templateRight\" />\n }\n </div>\n </div>\n <div [class]=\"'libs-ui-components-page_full-body ' + classBodyInclude()\">\n <ng-content />\n </div>\n</div>\n", styles: ["@-webkit-keyframes animation-slide-to-left{0%{right:-200px;opacity:0}to{right:12px;opacity:1}}@keyframes animation-slide-to-left{0%{right:-200px;opacity:0}to{right:0;opacity:1}}.libs-ui-components-page_full{position:absolute;width:100vw;height:100vh;left:0;top:0;display:flex;flex-direction:column;animation:animation-slide-to-left ease-out .3s}.libs-ui-components-page_full .libs-ui-components-page_full-header{height:50px;padding:14px 16px;border-bottom:solid 1px #e6e7ea;background-color:#fff;width:100%;display:flex;align-items:center}.libs-ui-components-page_full .libs-ui-components-page_full-body{height:100%}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LibsUiComponentsDropdownComponent, selector: "libs_ui-components-dropdown", inputs: ["useXssFilter", "popoverElementRefCustom", "classInclude", "ignoreStopPropagationEvent", "flagMouse", "flagMouseContent", "popoverCustomConfig", "isNgContent", "zIndex", "convertItemSelected", "getPopoverItemSelected", "httpRequestDetailItemById", "lengthKeys", "textDisplayWhenNoSelect", "textDisplayWhenMultiSelect", "classIncludeTextDisplayWhenNoSelect", "fieldLabel", "fieldGetLabel", "labelPopoverConfig", "labelPopoverFullWidth", "hasContentUnitRight", "listSearchNoDataTemplateRef", "dropdownTemplateRefNotSearchNoData", "fieldGetImage", "imageSize", "typeShape", "fieldGetIcon", "fieldGetTextAvatar", "fieldGetColorAvatar", "classAvatarInclude", "getLastTextAfterSpace", "linkImageError", "showError", "showBorderError", "disable", "readonly", "labelConfig", "disableLabel", "listSearchConfig", "isSearchOnline", "listHiddenInputSearch", "listSearchPadding", "listKeySearch", "listDividerClassInclude", "listConfig", "listButtonsOther", "listHasButtonUnSelectOption", "listClickExactly", "listBackgroundCustom", "listMaxItemShow", "listKeySelected", "listMultiKeySelected", "listKeysDisable", "listKeysHidden", "validRequired", "validMaxItemSelected", "changeValidUndefinedResetError", "allowSelectItemMultiple", "focusInputSearch", "onlyEmitDataWhenReset", "resetKeyWhenSelectAllKey", "listConfigHasDivider", "classIncludeIcon", "classIncludeContent", "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", "tabKeyActive", "tabsConfig", "ignoreBorderBottom"], outputs: ["flagMouseChange", "flagMouseContentChange", "lengthKeysChange", "showBorderErrorChange", "listKeySelectedChange", "listMultiKeySelectedChange", "tabKeyActiveChange", "outSelectKey", "outSelectMultiKey", "outFunctionsControl", "outValidEvent", "outChangStageFlagMouse", "outDataChange", "outClickButtonOther", "outShowList", "outChangeTabKeyActive"] }, { kind: "component", type: LibsUiComponentsSwitchComponent, selector: "libs_ui-components-switch", inputs: ["size", "disable", "active"], outputs: ["activeChange", "outSwitch"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsButtonsStatusComponent, selector: "libs_ui-components-buttons-status", inputs: ["config"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "pipe", type: LibsUiPipesEscapeHtmlPipe, name: "LibsUiPipesEscapeHtmlPipe" }, { kind: "component", type: LibsUiComponentsLabelComponent, selector: "libs_ui-components-label", inputs: ["iconPopoverClass", "classInclude", "labelLeft", "labelLeftClass", "labelLeftBehindToggleButton", "popover", "required", "buttonsLeft", "disableButtonsLeft", "buttonsRight", "disableButtonsRight", "labelRight", "labelRightClass", "labelRightRequired", "hasToggle", "toggleSize", "toggleActive", "toggleDisable", "description", "descriptionClass", "buttonsDescription", "disableButtonsDescription", "buttonsDescriptionContainerClass", "onlyShowCount", "zIndexPopover", "timerDestroyPopover", "count", "limitLength"], outputs: ["outClickButton", "outSwitchEvent", "outLabelRightClick", "outLabelLeftClick"] }] });
240
255
  }
241
256
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsPagesTemplateFullScreenComponent, decorators: [{
242
257
  type: Component,