@n-isi-platform/design-system 1.0.43 → 1.0.44
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.
|
@@ -936,7 +936,7 @@ class AccordionComponent {
|
|
|
936
936
|
}
|
|
937
937
|
ButtonColor = ButtonColor;
|
|
938
938
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
939
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: AccordionComponent, isStandalone: true, selector: "lib-accordion[headerTitle]", inputs: { isHeaderEditable: "isHeaderEditable", isAccordionDeletable: "isAccordionDeletable", isAccordionCloneable: "isAccordionCloneable", headerTitle: "headerTitle", selected: "selected", icon: "icon", headerTitlePlaceholder: "headerTitlePlaceholder", headerTitleEditable: "headerTitleEditable", group: "group", controlName: "controlName", name: "name", canDisable: "canDisable", toggleLabel: "toggleLabel", toggleControlName: "toggleControlName" }, outputs: { clickEvent: "clickEvent", clickToggleEvent: "clickToggleEvent", clickCloneEvent: "clickCloneEvent" }, ngImport: i0, template: "<p-accordion class=\"w-full\" [value]=\"selected ? 1 : 0\" [id]=\"headerTitle\">\r\n <p-accordion-panel [value]=\"1\">\r\n <p-accordion-header>\r\n <div class=\"flex justify-content-between align-items-center overflow-auto\">\r\n <ng-container>\r\n <div class=\"flex align-items-center\" *ngIf=\"!isHeaderEditable\">\r\n <i [ngClass]=\"icon\"></i>\r\n <span class=\"vertical-align-middle\">{{ headerTitle }}</span>\r\n </div>\r\n <div class=\"flex align-items-center\" *ngIf=\"isHeaderEditable\" [formGroup]=\"group\">\r\n <i [ngClass]=\"icon\"></i>\r\n <input type=\"text\" pInputText [formControlName]=\"controlName\" (click)=\"$event.stopPropagation()\"\r\n (keydown.space)=\"$event.stopPropagation()\"/>\r\n </div>\r\n <i class=\"pi pi-ellipsis-v controls-mobile\" (click)=\"controlsMenu.toggle($event)\"\r\n *ngIf=\"canDisable || isAccordionDeletable\"></i>\r\n <div class=\"controls-lg-screen\">\r\n <ng-container *ngIf=\"canDisable || isAccordionDeletable\" [ngTemplateOutlet]=\"controls\"></ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </p-accordion-header>\r\n <p-accordion-content>\r\n <ng-content></ng-content>\r\n </p-accordion-content>\r\n </p-accordion-panel>\r\n</p-accordion>\r\n\r\n<p-popover #controlsMenu>\r\n <ng-container [ngTemplateOutlet]=\"smallerDevicesControls\"></ng-container>\r\n</p-popover>\r\n\r\n<ng-template #controls>\r\n <div class=\"controls\">\r\n <div class=\"flex align-items-center\">\r\n <form [formGroup]=\"group\" class=\"flex align-items-center ml-5\" *ngIf=\"canDisable\">\r\n <label class=\"mr-2\">{{ toggleLabel }}</label>\r\n <p-selectButton\r\n (click)=\"clickToggleButton($event)\"\r\n [options]=\"stateOptions\"\r\n [formControlName]=\"toggleControlName\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n ></p-selectButton>\r\n </form>\r\n <lib-button\r\n *ngIf=\"isAccordionCloneable\"\r\n class=\"ml-5 clone-button\"\r\n label=\"Kopiraj okence\"\r\n [hasIcon]=\"true\"\r\n icon=\"pi pi-clone\"\r\n (clickEvent)=\"clickCloneButton($event)\"\r\n [color]=\"ButtonColor.warning\"\r\n ></lib-button>\r\n </div>\r\n\r\n <lib-button\r\n *ngIf=\"isAccordionDeletable\"\r\n class=\"ml-5 delete-button\"\r\n label=\"Izbri\u0161i okence\"\r\n [hasIcon]=\"true\"\r\n icon=\"pi pi-trash\"\r\n (clickEvent)=\"click($event)\"\r\n [color]=\"ButtonColor.danger\"\r\n ></lib-button>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #smallerDevicesControls>\r\n <div class=\"flex-column p-1\">\r\n <form [formGroup]=\"group\" class=\"flex align-items-center ml-5\" *ngIf=\"canDisable\">\r\n <label class=\"mr-2\">{{ toggleLabel }}</label>\r\n <p-selectButton\r\n (click)=\"clickToggleButton($event)\"\r\n [options]=\"stateOptions\"\r\n [formControlName]=\"toggleControlName\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n ></p-selectButton>\r\n </form>\r\n\r\n <div class=\"flex align-items-center mt-2\">\r\n <lib-button\r\n *ngIf=\"isAccordionCloneable\"\r\n class=\"clone-button\"\r\n label=\"Kopiraj okence\"\r\n [hasIcon]=\"true\"\r\n icon=\"pi pi-clone\"\r\n (clickEvent)=\"clickCloneButton($event)\"\r\n [color]=\"ButtonColor.warning\"\r\n ></lib-button>\r\n\r\n <lib-button\r\n *ngIf=\"isAccordionDeletable\"\r\n class=\"ml-2 delete-button\"\r\n label=\"Izbri\u0161i okence\"\r\n [hasIcon]=\"true\"\r\n icon=\"pi pi-trash\"\r\n (clickEvent)=\"click($event)\"\r\n [color]=\"ButtonColor.danger\"\r\n ></lib-button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [":host ::ng-deep .p-accordionpanel:not(.p-disabled).p-accordionpanel-active>.p-accordionheader{color:#fff!important;background-color:#3e7c94}:host ::ng-deep .p-accordion .p-accordionheader{background-color:#3e7c94;color:#fff}:host ::ng-deep .p-accordion .p-accordionheader:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-accordion .p-accordionheader:hover{background:#facd9c!important}:host ::ng-deep .p-accordion .p-accordionheader:not(.p-disabled).p-highlight .p-accordionheader-link{color:#fff}:host ::ng-deep .p-accordion .p-accordionheader .p-accordion-toggle-icon{margin-top:-8px;position:absolute;right:.5em;top:50%}:host ::ng-deep .p-accordion .p-accordionheader .delete-button{position:absolute;right:8em;top:50%;transform:translateY(-50%)}:host ::ng-deep .p-accordion .p-accordionheader .pi-chevron-right{transform:rotate(90deg)}:host ::ng-deep .p-accordion .p-accordionheader .pi-chevron-down{transform:rotate(180deg)}:host ::ng-deep .p-accordion .p-accordioncontent-content{margin-top:8px}@media screen and (max-width:1260px){:host ::ng-deep .p-inputtext,:host ::ng-deep label{font-size:12px}:host ::ng-deep .delete-button .p-button,:host ::ng-deep .clone-button .p-button{font-size:12px}:host ::ng-deep .delete-button .p-button .p-button-label,:host ::ng-deep .clone-button .p-button .p-button-label{display:none}:host ::ng-deep .delete-button .p-button .p-button-icon,:host ::ng-deep .clone-button .p-button .p-button-icon{margin-left:0}}:host ::ng-deep .p-selectbutton .p-button{background:#fff;color:#3e7c94}@media screen and (max-width:1260px){:host ::ng-deep .p-selectbutton .p-button{font-size:12px}}:host ::ng-deep .p-selectbutton .p-button.p-highlight{background:#ffa142;color:#fff}.controls{display:flex;align-items:center;justify-content:space-between}@media screen and (max-width:1260px){.controls{flex-direction:column;justify-content:start;align-items:start}.controls form,.controls .delete-button{margin:0!important;padding:5px 15px!important}.controls form{border-bottom:1px solid #3E7C94}}.controls-mobile{display:none}@media screen and (max-width:1260px){.controls-mobile{margin-left:15px;display:block}}.controls-lg-screen{display:block}@media screen and (max-width:1260px){.controls-lg-screen{display:none}}\n"], dependencies: [{ kind: "component", type: Accordion, selector: "p-accordion", inputs: ["value", "multiple", "style", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "activeIndex", "headerAriaLevel"], outputs: ["valueChange", "activeIndexChange", "onClose", "onOpen"] }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i1$4.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i1$4.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i1$4.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "size", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["hasIcon", "label", "color", "icon", "iconPos", "disabled", "isLoading", "styleClass", "size", "accessibilityText", "buttonType", "isAccessible", "isSelected", "ariaControlsId", "isExpanded", "link", "isTextareaClear"], outputs: ["clickEvent"] }] });
|
|
939
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: AccordionComponent, isStandalone: true, selector: "lib-accordion[headerTitle]", inputs: { isHeaderEditable: "isHeaderEditable", isAccordionDeletable: "isAccordionDeletable", isAccordionCloneable: "isAccordionCloneable", headerTitle: "headerTitle", selected: "selected", icon: "icon", headerTitlePlaceholder: "headerTitlePlaceholder", headerTitleEditable: "headerTitleEditable", group: "group", controlName: "controlName", name: "name", canDisable: "canDisable", toggleLabel: "toggleLabel", toggleControlName: "toggleControlName" }, outputs: { clickEvent: "clickEvent", clickToggleEvent: "clickToggleEvent", clickCloneEvent: "clickCloneEvent" }, ngImport: i0, template: "<p-accordion class=\"w-full\" [value]=\"selected ? 1 : 0\" [id]=\"headerTitle\">\r\n <p-accordion-panel [value]=\"1\">\r\n <p-accordion-header>\r\n <div class=\"flex justify-content-between align-items-center overflow-auto\">\r\n <ng-container>\r\n <div class=\"flex align-items-center\" *ngIf=\"!isHeaderEditable\">\r\n <i [ngClass]=\"icon\"></i>\r\n <span class=\"vertical-align-middle\">{{ headerTitle }}</span>\r\n </div>\r\n <div class=\"flex align-items-center\" *ngIf=\"isHeaderEditable\" [formGroup]=\"group\">\r\n <i [ngClass]=\"icon\"></i>\r\n <input type=\"text\" pInputText [formControlName]=\"controlName\" (click)=\"$event.stopPropagation()\"\r\n (keydown.space)=\"$event.stopPropagation()\"/>\r\n </div>\r\n <i class=\"pi pi-ellipsis-v controls-mobile\" (click)=\"controlsMenu.toggle($event)\"\r\n *ngIf=\"canDisable || isAccordionDeletable\"></i>\r\n <div class=\"controls-lg-screen\">\r\n <ng-container *ngIf=\"canDisable || isAccordionDeletable\" [ngTemplateOutlet]=\"controls\"></ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </p-accordion-header>\r\n <p-accordion-content>\r\n <ng-content></ng-content>\r\n </p-accordion-content>\r\n </p-accordion-panel>\r\n</p-accordion>\r\n\r\n<p-popover #controlsMenu>\r\n <ng-container [ngTemplateOutlet]=\"smallerDevicesControls\"></ng-container>\r\n</p-popover>\r\n\r\n<ng-template #controls>\r\n <div class=\"controls\">\r\n <div class=\"flex align-items-center\">\r\n <form [formGroup]=\"group\" class=\"flex align-items-center ml-5\" *ngIf=\"canDisable\">\r\n <label class=\"mr-2\">{{ toggleLabel }}</label>\r\n <p-selectButton\r\n (click)=\"clickToggleButton($event)\"\r\n [options]=\"stateOptions\"\r\n [formControlName]=\"toggleControlName\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n ></p-selectButton>\r\n </form>\r\n <lib-button\r\n *ngIf=\"isAccordionCloneable\"\r\n class=\"ml-5 clone-button\"\r\n label=\"Kopiraj okence\"\r\n [hasIcon]=\"true\"\r\n icon=\"pi pi-clone\"\r\n (clickEvent)=\"clickCloneButton($event)\"\r\n [color]=\"ButtonColor.warning\"\r\n ></lib-button>\r\n </div>\r\n\r\n <lib-button\r\n *ngIf=\"isAccordionDeletable\"\r\n class=\"ml-5 delete-button\"\r\n label=\"Izbri\u0161i okence\"\r\n [hasIcon]=\"true\"\r\n icon=\"pi pi-trash\"\r\n (clickEvent)=\"click($event)\"\r\n [color]=\"ButtonColor.danger\"\r\n ></lib-button>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #smallerDevicesControls>\r\n <div class=\"flex-column p-1\">\r\n <form [formGroup]=\"group\" class=\"flex align-items-center ml-5\" *ngIf=\"canDisable\">\r\n <label class=\"mr-2\">{{ toggleLabel }}</label>\r\n <p-selectButton\r\n (click)=\"clickToggleButton($event)\"\r\n [options]=\"stateOptions\"\r\n [formControlName]=\"toggleControlName\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n ></p-selectButton>\r\n </form>\r\n\r\n <div class=\"flex align-items-center mt-2\">\r\n <lib-button\r\n *ngIf=\"isAccordionCloneable\"\r\n class=\"clone-button\"\r\n label=\"Kopiraj okence\"\r\n [hasIcon]=\"true\"\r\n icon=\"pi pi-clone\"\r\n (clickEvent)=\"clickCloneButton($event)\"\r\n [color]=\"ButtonColor.warning\"\r\n ></lib-button>\r\n\r\n <lib-button\r\n *ngIf=\"isAccordionDeletable\"\r\n class=\"ml-2 delete-button\"\r\n label=\"Izbri\u0161i okence\"\r\n [hasIcon]=\"true\"\r\n icon=\"pi pi-trash\"\r\n (clickEvent)=\"click($event)\"\r\n [color]=\"ButtonColor.danger\"\r\n ></lib-button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [":host ::ng-deep .p-accordionpanel:not(.p-disabled).p-accordionpanel-active>.p-accordionheader{color:#fff!important;background-color:#3e7c94}:host ::ng-deep .p-accordion .p-accordioncontent-content .accordion .filters,:host ::ng-deep .p-accordion .p-accordioncontent-content .accordion .filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem 1.5rem;align-items:start}:host ::ng-deep .p-accordion .p-accordionheader{background-color:#3e7c94;color:#fff}:host ::ng-deep .p-accordion .p-accordionheader:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-accordion .p-accordionheader:hover{background:#facd9c!important}:host ::ng-deep .p-accordion .p-accordionheader:not(.p-disabled).p-highlight .p-accordionheader-link{color:#fff}:host ::ng-deep .p-accordion .p-accordionheader .p-accordion-toggle-icon{margin-top:-8px;position:absolute;right:.5em;top:50%}:host ::ng-deep .p-accordion .p-accordionheader .delete-button{position:absolute;right:8em;top:50%;transform:translateY(-50%)}:host ::ng-deep .p-accordion .p-accordionheader .pi-chevron-right{transform:rotate(90deg)}:host ::ng-deep .p-accordion .p-accordionheader .pi-chevron-down{transform:rotate(180deg)}:host ::ng-deep .p-accordion .p-accordioncontent-content{margin-top:8px}@media screen and (max-width:1260px){:host ::ng-deep .p-inputtext,:host ::ng-deep label{font-size:12px}:host ::ng-deep .delete-button .p-button,:host ::ng-deep .clone-button .p-button{font-size:12px}:host ::ng-deep .delete-button .p-button .p-button-label,:host ::ng-deep .clone-button .p-button .p-button-label{display:none}:host ::ng-deep .delete-button .p-button .p-button-icon,:host ::ng-deep .clone-button .p-button .p-button-icon{margin-left:0}}@media screen and (min-width:1400px){:host ::ng-deep .p-accordion .p-accordioncontent-content .accordion .filters,:host ::ng-deep .p-accordion .p-accordioncontent-content .accordion .filter-grid{grid-template-columns:repeat(6,minmax(220px,1fr))}}:host ::ng-deep .p-selectbutton .p-button{background:#fff;color:#3e7c94}@media screen and (max-width:1260px){:host ::ng-deep .p-selectbutton .p-button{font-size:12px}}:host ::ng-deep .p-selectbutton .p-button.p-highlight{background:#ffa142;color:#fff}.controls{display:flex;align-items:center;justify-content:space-between}@media screen and (max-width:1260px){.controls{flex-direction:column;justify-content:start;align-items:start}.controls form,.controls .delete-button{margin:0!important;padding:5px 15px!important}.controls form{border-bottom:1px solid #3E7C94}}.controls-mobile{display:none}@media screen and (max-width:1260px){.controls-mobile{margin-left:15px;display:block}}.controls-lg-screen{display:block}@media screen and (max-width:1260px){.controls-lg-screen{display:none}}\n"], dependencies: [{ kind: "component", type: Accordion, selector: "p-accordion", inputs: ["value", "multiple", "style", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "activeIndex", "headerAriaLevel"], outputs: ["valueChange", "activeIndexChange", "onClose", "onOpen"] }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i1$4.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i1$4.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i1$4.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "size", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["hasIcon", "label", "color", "icon", "iconPos", "disabled", "isLoading", "styleClass", "size", "accessibilityText", "buttonType", "isAccessible", "isSelected", "ariaControlsId", "isExpanded", "link", "isTextareaClear"], outputs: ["clickEvent"] }] });
|
|
940
940
|
}
|
|
941
941
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AccordionComponent, decorators: [{
|
|
942
942
|
type: Component,
|
|
@@ -952,7 +952,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
952
952
|
PopoverModule,
|
|
953
953
|
SelectButton,
|
|
954
954
|
ButtonComponent,
|
|
955
|
-
], template: "<p-accordion class=\"w-full\" [value]=\"selected ? 1 : 0\" [id]=\"headerTitle\">\r\n <p-accordion-panel [value]=\"1\">\r\n <p-accordion-header>\r\n <div class=\"flex justify-content-between align-items-center overflow-auto\">\r\n <ng-container>\r\n <div class=\"flex align-items-center\" *ngIf=\"!isHeaderEditable\">\r\n <i [ngClass]=\"icon\"></i>\r\n <span class=\"vertical-align-middle\">{{ headerTitle }}</span>\r\n </div>\r\n <div class=\"flex align-items-center\" *ngIf=\"isHeaderEditable\" [formGroup]=\"group\">\r\n <i [ngClass]=\"icon\"></i>\r\n <input type=\"text\" pInputText [formControlName]=\"controlName\" (click)=\"$event.stopPropagation()\"\r\n (keydown.space)=\"$event.stopPropagation()\"/>\r\n </div>\r\n <i class=\"pi pi-ellipsis-v controls-mobile\" (click)=\"controlsMenu.toggle($event)\"\r\n *ngIf=\"canDisable || isAccordionDeletable\"></i>\r\n <div class=\"controls-lg-screen\">\r\n <ng-container *ngIf=\"canDisable || isAccordionDeletable\" [ngTemplateOutlet]=\"controls\"></ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </p-accordion-header>\r\n <p-accordion-content>\r\n <ng-content></ng-content>\r\n </p-accordion-content>\r\n </p-accordion-panel>\r\n</p-accordion>\r\n\r\n<p-popover #controlsMenu>\r\n <ng-container [ngTemplateOutlet]=\"smallerDevicesControls\"></ng-container>\r\n</p-popover>\r\n\r\n<ng-template #controls>\r\n <div class=\"controls\">\r\n <div class=\"flex align-items-center\">\r\n <form [formGroup]=\"group\" class=\"flex align-items-center ml-5\" *ngIf=\"canDisable\">\r\n <label class=\"mr-2\">{{ toggleLabel }}</label>\r\n <p-selectButton\r\n (click)=\"clickToggleButton($event)\"\r\n [options]=\"stateOptions\"\r\n [formControlName]=\"toggleControlName\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n ></p-selectButton>\r\n </form>\r\n <lib-button\r\n *ngIf=\"isAccordionCloneable\"\r\n class=\"ml-5 clone-button\"\r\n label=\"Kopiraj okence\"\r\n [hasIcon]=\"true\"\r\n icon=\"pi pi-clone\"\r\n (clickEvent)=\"clickCloneButton($event)\"\r\n [color]=\"ButtonColor.warning\"\r\n ></lib-button>\r\n </div>\r\n\r\n <lib-button\r\n *ngIf=\"isAccordionDeletable\"\r\n class=\"ml-5 delete-button\"\r\n label=\"Izbri\u0161i okence\"\r\n [hasIcon]=\"true\"\r\n icon=\"pi pi-trash\"\r\n (clickEvent)=\"click($event)\"\r\n [color]=\"ButtonColor.danger\"\r\n ></lib-button>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #smallerDevicesControls>\r\n <div class=\"flex-column p-1\">\r\n <form [formGroup]=\"group\" class=\"flex align-items-center ml-5\" *ngIf=\"canDisable\">\r\n <label class=\"mr-2\">{{ toggleLabel }}</label>\r\n <p-selectButton\r\n (click)=\"clickToggleButton($event)\"\r\n [options]=\"stateOptions\"\r\n [formControlName]=\"toggleControlName\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n ></p-selectButton>\r\n </form>\r\n\r\n <div class=\"flex align-items-center mt-2\">\r\n <lib-button\r\n *ngIf=\"isAccordionCloneable\"\r\n class=\"clone-button\"\r\n label=\"Kopiraj okence\"\r\n [hasIcon]=\"true\"\r\n icon=\"pi pi-clone\"\r\n (clickEvent)=\"clickCloneButton($event)\"\r\n [color]=\"ButtonColor.warning\"\r\n ></lib-button>\r\n\r\n <lib-button\r\n *ngIf=\"isAccordionDeletable\"\r\n class=\"ml-2 delete-button\"\r\n label=\"Izbri\u0161i okence\"\r\n [hasIcon]=\"true\"\r\n icon=\"pi pi-trash\"\r\n (clickEvent)=\"click($event)\"\r\n [color]=\"ButtonColor.danger\"\r\n ></lib-button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [":host ::ng-deep .p-accordionpanel:not(.p-disabled).p-accordionpanel-active>.p-accordionheader{color:#fff!important;background-color:#3e7c94}:host ::ng-deep .p-accordion .p-accordionheader{background-color:#3e7c94;color:#fff}:host ::ng-deep .p-accordion .p-accordionheader:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-accordion .p-accordionheader:hover{background:#facd9c!important}:host ::ng-deep .p-accordion .p-accordionheader:not(.p-disabled).p-highlight .p-accordionheader-link{color:#fff}:host ::ng-deep .p-accordion .p-accordionheader .p-accordion-toggle-icon{margin-top:-8px;position:absolute;right:.5em;top:50%}:host ::ng-deep .p-accordion .p-accordionheader .delete-button{position:absolute;right:8em;top:50%;transform:translateY(-50%)}:host ::ng-deep .p-accordion .p-accordionheader .pi-chevron-right{transform:rotate(90deg)}:host ::ng-deep .p-accordion .p-accordionheader .pi-chevron-down{transform:rotate(180deg)}:host ::ng-deep .p-accordion .p-accordioncontent-content{margin-top:8px}@media screen and (max-width:1260px){:host ::ng-deep .p-inputtext,:host ::ng-deep label{font-size:12px}:host ::ng-deep .delete-button .p-button,:host ::ng-deep .clone-button .p-button{font-size:12px}:host ::ng-deep .delete-button .p-button .p-button-label,:host ::ng-deep .clone-button .p-button .p-button-label{display:none}:host ::ng-deep .delete-button .p-button .p-button-icon,:host ::ng-deep .clone-button .p-button .p-button-icon{margin-left:0}}:host ::ng-deep .p-selectbutton .p-button{background:#fff;color:#3e7c94}@media screen and (max-width:1260px){:host ::ng-deep .p-selectbutton .p-button{font-size:12px}}:host ::ng-deep .p-selectbutton .p-button.p-highlight{background:#ffa142;color:#fff}.controls{display:flex;align-items:center;justify-content:space-between}@media screen and (max-width:1260px){.controls{flex-direction:column;justify-content:start;align-items:start}.controls form,.controls .delete-button{margin:0!important;padding:5px 15px!important}.controls form{border-bottom:1px solid #3E7C94}}.controls-mobile{display:none}@media screen and (max-width:1260px){.controls-mobile{margin-left:15px;display:block}}.controls-lg-screen{display:block}@media screen and (max-width:1260px){.controls-lg-screen{display:none}}\n"] }]
|
|
955
|
+
], template: "<p-accordion class=\"w-full\" [value]=\"selected ? 1 : 0\" [id]=\"headerTitle\">\r\n <p-accordion-panel [value]=\"1\">\r\n <p-accordion-header>\r\n <div class=\"flex justify-content-between align-items-center overflow-auto\">\r\n <ng-container>\r\n <div class=\"flex align-items-center\" *ngIf=\"!isHeaderEditable\">\r\n <i [ngClass]=\"icon\"></i>\r\n <span class=\"vertical-align-middle\">{{ headerTitle }}</span>\r\n </div>\r\n <div class=\"flex align-items-center\" *ngIf=\"isHeaderEditable\" [formGroup]=\"group\">\r\n <i [ngClass]=\"icon\"></i>\r\n <input type=\"text\" pInputText [formControlName]=\"controlName\" (click)=\"$event.stopPropagation()\"\r\n (keydown.space)=\"$event.stopPropagation()\"/>\r\n </div>\r\n <i class=\"pi pi-ellipsis-v controls-mobile\" (click)=\"controlsMenu.toggle($event)\"\r\n *ngIf=\"canDisable || isAccordionDeletable\"></i>\r\n <div class=\"controls-lg-screen\">\r\n <ng-container *ngIf=\"canDisable || isAccordionDeletable\" [ngTemplateOutlet]=\"controls\"></ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </p-accordion-header>\r\n <p-accordion-content>\r\n <ng-content></ng-content>\r\n </p-accordion-content>\r\n </p-accordion-panel>\r\n</p-accordion>\r\n\r\n<p-popover #controlsMenu>\r\n <ng-container [ngTemplateOutlet]=\"smallerDevicesControls\"></ng-container>\r\n</p-popover>\r\n\r\n<ng-template #controls>\r\n <div class=\"controls\">\r\n <div class=\"flex align-items-center\">\r\n <form [formGroup]=\"group\" class=\"flex align-items-center ml-5\" *ngIf=\"canDisable\">\r\n <label class=\"mr-2\">{{ toggleLabel }}</label>\r\n <p-selectButton\r\n (click)=\"clickToggleButton($event)\"\r\n [options]=\"stateOptions\"\r\n [formControlName]=\"toggleControlName\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n ></p-selectButton>\r\n </form>\r\n <lib-button\r\n *ngIf=\"isAccordionCloneable\"\r\n class=\"ml-5 clone-button\"\r\n label=\"Kopiraj okence\"\r\n [hasIcon]=\"true\"\r\n icon=\"pi pi-clone\"\r\n (clickEvent)=\"clickCloneButton($event)\"\r\n [color]=\"ButtonColor.warning\"\r\n ></lib-button>\r\n </div>\r\n\r\n <lib-button\r\n *ngIf=\"isAccordionDeletable\"\r\n class=\"ml-5 delete-button\"\r\n label=\"Izbri\u0161i okence\"\r\n [hasIcon]=\"true\"\r\n icon=\"pi pi-trash\"\r\n (clickEvent)=\"click($event)\"\r\n [color]=\"ButtonColor.danger\"\r\n ></lib-button>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #smallerDevicesControls>\r\n <div class=\"flex-column p-1\">\r\n <form [formGroup]=\"group\" class=\"flex align-items-center ml-5\" *ngIf=\"canDisable\">\r\n <label class=\"mr-2\">{{ toggleLabel }}</label>\r\n <p-selectButton\r\n (click)=\"clickToggleButton($event)\"\r\n [options]=\"stateOptions\"\r\n [formControlName]=\"toggleControlName\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n ></p-selectButton>\r\n </form>\r\n\r\n <div class=\"flex align-items-center mt-2\">\r\n <lib-button\r\n *ngIf=\"isAccordionCloneable\"\r\n class=\"clone-button\"\r\n label=\"Kopiraj okence\"\r\n [hasIcon]=\"true\"\r\n icon=\"pi pi-clone\"\r\n (clickEvent)=\"clickCloneButton($event)\"\r\n [color]=\"ButtonColor.warning\"\r\n ></lib-button>\r\n\r\n <lib-button\r\n *ngIf=\"isAccordionDeletable\"\r\n class=\"ml-2 delete-button\"\r\n label=\"Izbri\u0161i okence\"\r\n [hasIcon]=\"true\"\r\n icon=\"pi pi-trash\"\r\n (clickEvent)=\"click($event)\"\r\n [color]=\"ButtonColor.danger\"\r\n ></lib-button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [":host ::ng-deep .p-accordionpanel:not(.p-disabled).p-accordionpanel-active>.p-accordionheader{color:#fff!important;background-color:#3e7c94}:host ::ng-deep .p-accordion .p-accordioncontent-content .accordion .filters,:host ::ng-deep .p-accordion .p-accordioncontent-content .accordion .filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem 1.5rem;align-items:start}:host ::ng-deep .p-accordion .p-accordionheader{background-color:#3e7c94;color:#fff}:host ::ng-deep .p-accordion .p-accordionheader:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-accordion .p-accordionheader:hover{background:#facd9c!important}:host ::ng-deep .p-accordion .p-accordionheader:not(.p-disabled).p-highlight .p-accordionheader-link{color:#fff}:host ::ng-deep .p-accordion .p-accordionheader .p-accordion-toggle-icon{margin-top:-8px;position:absolute;right:.5em;top:50%}:host ::ng-deep .p-accordion .p-accordionheader .delete-button{position:absolute;right:8em;top:50%;transform:translateY(-50%)}:host ::ng-deep .p-accordion .p-accordionheader .pi-chevron-right{transform:rotate(90deg)}:host ::ng-deep .p-accordion .p-accordionheader .pi-chevron-down{transform:rotate(180deg)}:host ::ng-deep .p-accordion .p-accordioncontent-content{margin-top:8px}@media screen and (max-width:1260px){:host ::ng-deep .p-inputtext,:host ::ng-deep label{font-size:12px}:host ::ng-deep .delete-button .p-button,:host ::ng-deep .clone-button .p-button{font-size:12px}:host ::ng-deep .delete-button .p-button .p-button-label,:host ::ng-deep .clone-button .p-button .p-button-label{display:none}:host ::ng-deep .delete-button .p-button .p-button-icon,:host ::ng-deep .clone-button .p-button .p-button-icon{margin-left:0}}@media screen and (min-width:1400px){:host ::ng-deep .p-accordion .p-accordioncontent-content .accordion .filters,:host ::ng-deep .p-accordion .p-accordioncontent-content .accordion .filter-grid{grid-template-columns:repeat(6,minmax(220px,1fr))}}:host ::ng-deep .p-selectbutton .p-button{background:#fff;color:#3e7c94}@media screen and (max-width:1260px){:host ::ng-deep .p-selectbutton .p-button{font-size:12px}}:host ::ng-deep .p-selectbutton .p-button.p-highlight{background:#ffa142;color:#fff}.controls{display:flex;align-items:center;justify-content:space-between}@media screen and (max-width:1260px){.controls{flex-direction:column;justify-content:start;align-items:start}.controls form,.controls .delete-button{margin:0!important;padding:5px 15px!important}.controls form{border-bottom:1px solid #3E7C94}}.controls-mobile{display:none}@media screen and (max-width:1260px){.controls-mobile{margin-left:15px;display:block}}.controls-lg-screen{display:block}@media screen and (max-width:1260px){.controls-lg-screen{display:none}}\n"] }]
|
|
956
956
|
}], propDecorators: { isHeaderEditable: [{
|
|
957
957
|
type: Input
|
|
958
958
|
}], isAccordionDeletable: [{
|