@sapphire-ion/framework 1.0.30 → 1.0.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/default/default-table/default-table.component.mjs +3 -3
- package/esm2022/lib/components/inputs/input-select/input-select.component.mjs +3 -3
- package/fesm2022/sapphire-ion-framework.mjs +4 -4
- package/fesm2022/sapphire-ion-framework.mjs.map +1 -1
- package/lib/components/stepper/step/step.component.d.ts +1 -1
- package/package.json +1 -1
|
@@ -3500,14 +3500,14 @@ class InputSelectComponent extends CustomInput {
|
|
|
3500
3500
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: InputSelectComponent, selector: "input-select", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange" }, host: { listeners: { "document:keydown": "HandleKeyboardEvent($event)" } }, providers: [
|
|
3501
3501
|
...InputProviderFactory.GetProviders(InputSelectComponent),
|
|
3502
3502
|
{ provide: CustomInput, useExisting: forwardRef(() => InputSelectComponent) },
|
|
3503
|
-
], queries: [{ propertyName: "labelTemplate", first: true, predicate: SIonLabelTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "optionTemplate", first: true, predicate: SIonOptionTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "placeholderTemplate", first: true, predicate: SIonPlaceholderTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "inputContainer", first: true, predicate: ["inputContainer"], descendants: true }, { propertyName: "inputSelectLabel", first: true, predicate: ["inputSelectLabel"], descendants: true }, { propertyName: "inputSearchBar", first: true, predicate: ["inputSearchBar"], descendants: true }, { propertyName: "selectContent", first: true, predicate: ["selectContent"], descendants: true }, { propertyName: "popover", first: true, predicate: SIonPopoverComponent, descendants: true }, { propertyName: "modal", first: true, predicate: IonModal, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div \r\n #inputContainer\r\n class=\"input-container\" \r\n (click)=\"setFocus($event);\"\r\n [class.required]=\"required()\" \r\n [class.submitted]=\"submitted()\" \r\n [class.manual-focus]=\"floatingVisible\"\r\n [class.invalid]=\"invalid\" \r\n [class.disabled]=\"loading() || loadingFromLoader || disabled()\"\r\n [class.loading]=\"loading() || loadingFromLoader\"\r\n>\r\n <div class=\"input-label\"> \r\n <span class=\"truncate\">\r\n {{label()}} \r\n </span>\r\n </div>\r\n \r\n <div class=\"w-full truncate outline-none\" [class.pr-7]=\"!configuration().clearable\" [class.pr-10]=\"configuration().clearable\" #inputSelectLabel tabindex=\"0\">\r\n @if (!configuration().multiple && currentLabel){\r\n @if(labelTemplate){\r\n <ng-container \r\n [ngTemplateOutlet]=\"labelTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: currentLabel, item: currentItems.item }\">\r\n </ng-container>\r\n }\r\n @else {\r\n <span class=\"input-select-label\"> {{currentLabel}} </span>\r\n }\r\n }\r\n @else if (configuration().multiple && isArray(currentItems) && $any(currentItems).length) {\r\n <div class=\"w-full min-h-6 overflow-hidden relative\">\r\n <div class=\"absolute left-0 top-0 overflow-x-auto flex gap-2 size-full mask-x/2\">\r\n @for (item of currentItems; track $index) {\r\n <div class=\"translucid-border rounded-lg flex items-center justify-center gap-2 pl-2\">\r\n @if(labelTemplate){\r\n <ng-container \r\n [ngTemplateOutlet]=\"labelTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item.label, item: item.item }\">\r\n </ng-container>\r\n }\r\n @else {\r\n <span class=\"input-select-label\"> {{item.label}} </span>\r\n }\r\n \r\n <div class=\"h-full aspect-square flex items-center justify-center cursor-pointer\" (click)=\"Select(item); $event.stopPropagation()\">\r\n <ion-icon name=\"close\" color=\"danger\" slot=\"icon-only\"></ion-icon>\r\n </div>\r\n <!-- <ion-button class=\"m-0 h-full\" (click)=\"Select(item.value); $event.stopPropagation()\" color=\"medium\" size=\"small\" fill=\"outline\" style=\"--border-radius: .5rem\">\r\n <ion-icon name=\"close\" color=\"danger\" slot=\"icon-only\"></ion-icon>\r\n </ion-button> -->\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n @else {\r\n @if(placeholderTemplate){\r\n <ng-container \r\n [ngTemplateOutlet]=\"placeholderTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: this.configuration().placeholder, placeholder: this.configuration().placeholder }\">\r\n </ng-container>\r\n }\r\n @else {\r\n <span class=\"input-select-label !text-medium\"> {{this.configuration().placeholder}} </span>\r\n }\r\n }\r\n </div>\r\n\r\n <div class=\"absolute bottom-1 flex flex-col items-center justify-center size-7\" [class.right-1]=\"!configuration().clearable\" [class.right-8]=\"configuration().clearable\">\r\n <ion-icon class=\"-mb-0.5\" name=\"chevron-up\"></ion-icon>\r\n <ion-icon class=\"-mt-0.5\" name=\"chevron-down\"></ion-icon>\r\n </div>\r\n @if(configuration().clearable){\r\n <ion-button class=\"absolute right-1 bottom-1\" (click)=\"Clear($event)\" color=\"medium\" size=\"small\" fill=\"clear\" style=\"--border-radius: .5rem\">\r\n <ion-icon name=\"close\" slot=\"icon-only\"></ion-icon>\r\n </ion-button>\r\n } \r\n\r\n <div class=\"loading-container\" [class.loading]=\"loading() || loadingFromLoader\">\r\n <ion-spinner></ion-spinner>\r\n </div>\r\n <div class=\"error-container\" (click)=\"configuration().loader.Refresh()\" [class.active]=\"configuration().loader.error && !loadingFromLoader\">\r\n <ion-icon class=\"text-xl\" color=\"danger\" name=\"refresh-circle\"></ion-icon>\r\n </div>\r\n</div>\r\n\r\n@if(!disabled()){\r\n <ion-modal #modal (ionModalWillPresent)=\"OnPresent()\" (didDismiss)=\"OnDismiss()\" style=\"--width: 90%; --height: 90%;\" [keepContentsMounted]=\"true\">\r\n <ng-template>\r\n <ion-header>\r\n <ion-toolbar>\r\n <ion-buttons slot=\"end\">\r\n <ion-button (click)=\"modal.dismiss()\">\r\n <ion-icon name=\"close-circle\"></ion-icon>\r\n </ion-button>\r\n </ion-buttons>\r\n </ion-toolbar>\r\n </ion-header>\r\n\r\n <ng-container [ngTemplateOutlet]=\"selectContentTemplate\" [ngTemplateOutletContext]=\"{ modal: true }\"></ng-container>\r\n </ng-template>\r\n </ion-modal>\r\n\r\n <sion-popover \r\n #popover \r\n [width]=\"inputContainer.offsetWidth + 'px'\" \r\n (onWillPresent)=\"OnPresent()\" \r\n (onDidDismiss)=\"OnDismiss()\" \r\n [anchor]=\"inputContainer\" \r\n [placement]=\"configuration().popoverConfiguration.placement\" \r\n [flip]=\"configuration().popoverConfiguration.flip\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"selectContentTemplate\"></ng-container>\r\n </sion-popover>\r\n}\r\n\r\n<ng-template #selectContentTemplate let-modal=\"modal\">\r\n <div #selectContent class=\"select-content\" [class.!size-full]=\"modal\">\r\n <div class=\"select-search-bar-container\">\r\n <div class=\"select-search-bar-icon-container !border-r-0 border-primary/70 bg-primary/70 shrink-0\">\r\n <ion-icon color=\"dark\" name=\"search\"></ion-icon>\r\n </div>\r\n <input #inputSearchBar tabindex=\"-1\" class=\"select-search-bar border-primary/70 !rounded-l-none\" [formControl]=\"searchBarControl\"/>\r\n </div> \r\n <ul class=\"select-item-list mask-y\" role=\"listbox\" [attr.aria-activedescendant]=\"'sion-is-' + selectedIndex\">\r\n @if(floatingVisible){\r\n @for (item of lstOptions; track item.value) { \r\n <ng-container \r\n [ngTemplateOutlet]=\"baseOptionTemplate\"\r\n [ngTemplateOutletContext]=\"{ item: item, index: $index }\">\r\n </ng-container>\r\n }\r\n }\r\n </ul>\r\n @if(isServiceAtivo()){\r\n <div class=\"w-full text-xs flex items-center justify-end\">\r\n <ion-checkbox [ngModel]=\"somenteAtivos()\" (ngModelChange)=\"somenteAtivos.set($event)\" class=\"scale-75\"> Somente ativos </ion-checkbox>\r\n </div>\r\n }\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #baseOptionTemplate let-item=\"item\" let-index=\"index\">\r\n <li [id]=\"'sion-is-' + index\" class=\"select-item\" [class.disabled]=\"item.disabled\" [attr.aria-selected]=\"index == selectedIndex\" (mouseenter)=\"selectedIndex = index\" (click)=\"Select(item)\">\r\n <div class=\"select-item-checkmark-conteiner\">\r\n @if(item.selected) {\r\n <ion-icon class=\"select-item-checkmark\" color=\"primary\" name=\"checkmark\"></ion-icon>\r\n }\r\n </div>\r\n @if (optionTemplate) {\r\n <ng-container \r\n [ngTemplateOutlet]=\"optionTemplate\"\r\n [ngTemplateOutletContext]=\"{ item: item.item }\">\r\n </ng-container>\r\n }\r\n @else {\r\n <span class=\"select-item-label\"> {{item.label}} </span>\r\n }\r\n </li>\r\n</ng-template>", styles: [".input-container{cursor:pointer!important}.input-select-label{pointer-events:none;min-height:1.5rem;width:100%;outline:2px solid transparent;outline-offset:2px;color:var(--ion-color-dark)}.select-content{display:flex;height:18rem;width:100%;flex-direction:column;gap:.25rem;overflow:hidden;padding:.25rem}.select-content .select-search-bar-container{display:flex;width:100%;flex-shrink:1}.select-content .select-search-bar-container .select-search-bar-icon-container{display:flex;height:100%;width:1.75rem;align-items:center;justify-content:center;border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-width:1px}.select-content .select-search-bar-container .select-search-bar{width:100%;flex-shrink:1;border-radius:.375rem;border-width:1px;background-color:transparent;padding-left:.5rem;padding-right:.5rem;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}@media (orientation: portrait){.select-content .select-search-bar-container .select-search-bar{height:2.5rem}}@media (orientation: landscape){.select-content .select-search-bar-container .select-search-bar{height:1.75rem}}.select-item-list{width:100%;height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:.25rem}.select-item-list .select-item{color:var(--ion-color-dark);display:flex;width:100%;flex-shrink:0;align-items:center;justify-content:flex-start;border-radius:.375rem;padding-right:.5rem}@media (orientation: portrait){.select-item-list .select-item{min-height:2.5rem}}@media (orientation: landscape){.select-item-list .select-item{min-height:2rem}}.select-item-list .select-item{cursor:pointer}.select-item-list .select-item.disabled{opacity:.5;pointer-events:none}.select-item-list .select-item:hover,.select-item-list .select-item:focus,.select-item-list .select-item[aria-selected=true]{background-color:color-mix(in srgb,var(--ion-color-dark) 20%,transparent)}.select-item-list .select-item .select-item-checkmark-conteiner{display:flex;height:100%;width:1.75rem;flex-shrink:0;align-items:center;justify-content:center}.select-item-list .select-item .select-item-label{width:100%}.error-container{pointer-events:none;position:absolute;bottom:0;left:0;z-index:200;display:flex;width:100%;height:100%;--tw-translate-y: -3rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));align-items:center;justify-content:center;opacity:0;will-change:opacity,auto;transition:opacity .2s ease-in-out,transform .2s ease-in-out}.error-container.active{pointer-events:auto!important;--tw-translate-y: 0px !important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important;opacity:1!important}\n", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 2px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:auto;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"], dependencies: [{ kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i3.IonCheckbox, selector: "ion-checkbox", inputs: ["alignment", "checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "required", "value"] }, { kind: "component", type: i3.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i3.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i3.IonModal, selector: "ion-modal" }, { kind: "directive", type: i3.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SIonPopoverComponent, selector: "sion-popover", inputs: ["fill", "arrow", "flip", "placement", "height", "width", "anchor"], outputs: ["onWillPresent", "onDidPresent", "onWillDismiss", "onDidDismiss", "isVisibleChange"] }] }); }
|
|
3503
|
+
], queries: [{ propertyName: "labelTemplate", first: true, predicate: SIonLabelTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "optionTemplate", first: true, predicate: SIonOptionTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "placeholderTemplate", first: true, predicate: SIonPlaceholderTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "inputContainer", first: true, predicate: ["inputContainer"], descendants: true }, { propertyName: "inputSelectLabel", first: true, predicate: ["inputSelectLabel"], descendants: true }, { propertyName: "inputSearchBar", first: true, predicate: ["inputSearchBar"], descendants: true }, { propertyName: "selectContent", first: true, predicate: ["selectContent"], descendants: true }, { propertyName: "popover", first: true, predicate: SIonPopoverComponent, descendants: true }, { propertyName: "modal", first: true, predicate: IonModal, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div \r\n #inputContainer\r\n class=\"input-container\" \r\n (click)=\"setFocus($event);\"\r\n [class.required]=\"required()\" \r\n [class.submitted]=\"submitted()\" \r\n [class.manual-focus]=\"floatingVisible\"\r\n [class.invalid]=\"invalid\" \r\n [class.disabled]=\"loading() || loadingFromLoader || disabled()\"\r\n [class.loading]=\"loading() || loadingFromLoader\"\r\n>\r\n <div class=\"input-label\"> \r\n <span class=\"truncate\">\r\n {{label()}} \r\n </span>\r\n </div>\r\n \r\n <div class=\"w-full truncate outline-none\" [class.pr-7]=\"!configuration().clearable\" [class.pr-10]=\"configuration().clearable\" #inputSelectLabel tabindex=\"0\">\r\n @if (!configuration().multiple && currentLabel){\r\n @if(labelTemplate){\r\n <ng-container \r\n [ngTemplateOutlet]=\"labelTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: currentLabel, item: currentItems.item }\">\r\n </ng-container>\r\n }\r\n @else {\r\n <span class=\"input-select-label\"> {{currentLabel}} </span>\r\n }\r\n }\r\n @else if (configuration().multiple && isArray(currentItems) && $any(currentItems).length) {\r\n <div class=\"w-full min-h-6 overflow-hidden relative\">\r\n <div class=\"absolute left-0 top-0 overflow-x-auto flex gap-2 size-full mask-x/2\">\r\n @for (item of currentItems; track $index) {\r\n <div class=\"translucid-border rounded-lg flex items-center justify-center gap-2 pl-2\">\r\n @if(labelTemplate){\r\n <ng-container \r\n [ngTemplateOutlet]=\"labelTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item.label, item: item.item }\">\r\n </ng-container>\r\n }\r\n @else {\r\n <span class=\"input-select-label\"> {{item.label}} </span>\r\n }\r\n \r\n <div class=\"h-full aspect-square flex items-center justify-center cursor-pointer\" (click)=\"Select(item); $event.stopPropagation()\">\r\n <ion-icon name=\"close\" color=\"danger\" slot=\"icon-only\"></ion-icon>\r\n </div>\r\n <!-- <ion-button class=\"m-0 h-full\" (click)=\"Select(item.value); $event.stopPropagation()\" color=\"medium\" size=\"small\" fill=\"outline\" style=\"--border-radius: .5rem\">\r\n <ion-icon name=\"close\" color=\"danger\" slot=\"icon-only\"></ion-icon>\r\n </ion-button> -->\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n @else {\r\n @if(placeholderTemplate){\r\n <ng-container \r\n [ngTemplateOutlet]=\"placeholderTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: this.configuration().placeholder, placeholder: this.configuration().placeholder }\">\r\n </ng-container>\r\n }\r\n @else {\r\n <span class=\"input-select-label !text-medium\"> {{this.configuration().placeholder}} </span>\r\n }\r\n }\r\n </div>\r\n\r\n <div class=\"absolute bottom-1 flex flex-col items-center justify-center size-7\" [class.right-1]=\"!configuration().clearable\" [class.right-8]=\"configuration().clearable\">\r\n <ion-icon class=\"-mb-0.5\" name=\"chevron-up\"></ion-icon>\r\n <ion-icon class=\"-mt-0.5\" name=\"chevron-down\"></ion-icon>\r\n </div>\r\n @if(configuration().clearable){\r\n <ion-button class=\"absolute right-1 bottom-1\" (click)=\"Clear($event)\" color=\"medium\" size=\"small\" fill=\"clear\" style=\"--border-radius: .5rem\">\r\n <ion-icon name=\"close\" slot=\"icon-only\"></ion-icon>\r\n </ion-button>\r\n } \r\n\r\n <div class=\"loading-container\" [class.loading]=\"loading() || loadingFromLoader\">\r\n <ion-spinner></ion-spinner>\r\n </div>\r\n <div class=\"error-container\" (click)=\"configuration().loader.Refresh()\" [class.active]=\"configuration().loader.error && !loadingFromLoader\">\r\n <ion-icon class=\"text-xl\" color=\"danger\" name=\"refresh-circle\"></ion-icon>\r\n </div>\r\n</div>\r\n\r\n@if(!disabled()){\r\n <ion-modal #modal (ionModalWillPresent)=\"OnPresent()\" (didDismiss)=\"OnDismiss()\" style=\"--width: 90%; --height: 90%;\" [keepContentsMounted]=\"true\">\r\n <ng-template>\r\n <ion-header>\r\n <ion-toolbar>\r\n <ion-buttons slot=\"end\">\r\n <ion-button (click)=\"modal.dismiss()\">\r\n <ion-icon name=\"close-circle\"></ion-icon>\r\n </ion-button>\r\n </ion-buttons>\r\n </ion-toolbar>\r\n </ion-header>\r\n\r\n <ng-container [ngTemplateOutlet]=\"selectContentTemplate\" [ngTemplateOutletContext]=\"{ modal: true }\"></ng-container>\r\n </ng-template>\r\n </ion-modal>\r\n\r\n <sion-popover \r\n #popover \r\n [width]=\"inputContainer.offsetWidth + 'px'\" \r\n (onWillPresent)=\"OnPresent()\" \r\n (onDidDismiss)=\"OnDismiss()\" \r\n [anchor]=\"inputContainer\" \r\n [placement]=\"configuration().popoverConfiguration.placement\" \r\n [flip]=\"configuration().popoverConfiguration.flip\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"selectContentTemplate\"></ng-container>\r\n </sion-popover>\r\n}\r\n\r\n<ng-template #selectContentTemplate let-modal=\"modal\">\r\n <div #selectContent class=\"select-content\" [class.!size-full]=\"modal\">\r\n <div class=\"select-search-bar-container\">\r\n <div class=\"select-search-bar-icon-container !border-r-0 border-primary/70 bg-primary/70 shrink-0\">\r\n <ion-icon color=\"dark\" name=\"search\"></ion-icon>\r\n </div>\r\n <input #inputSearchBar tabindex=\"-1\" class=\"select-search-bar border-primary/70 !rounded-l-none\" [formControl]=\"searchBarControl\"/>\r\n </div> \r\n <ul class=\"select-item-list mask-y\" role=\"listbox\" [attr.aria-activedescendant]=\"'sion-is-' + selectedIndex\">\r\n @for (item of lstOptions; track item.value) { \r\n <ng-container \r\n [ngTemplateOutlet]=\"baseOptionTemplate\"\r\n [ngTemplateOutletContext]=\"{ item: item, index: $index }\">\r\n </ng-container>\r\n }\r\n </ul>\r\n @if(isServiceAtivo()){\r\n <div class=\"w-full text-xs flex items-center justify-end\">\r\n <ion-checkbox [ngModel]=\"somenteAtivos()\" (ngModelChange)=\"somenteAtivos.set($event)\" class=\"scale-75\"> Somente ativos </ion-checkbox>\r\n </div>\r\n }\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #baseOptionTemplate let-item=\"item\" let-index=\"index\">\r\n <li [id]=\"'sion-is-' + index\" class=\"select-item\" [class.disabled]=\"item.disabled\" [attr.aria-selected]=\"index == selectedIndex\" (mouseenter)=\"selectedIndex = index\" (click)=\"Select(item)\">\r\n <div class=\"select-item-checkmark-conteiner\">\r\n @if(item.selected) {\r\n <ion-icon class=\"select-item-checkmark\" color=\"primary\" name=\"checkmark\"></ion-icon>\r\n }\r\n </div>\r\n @if (optionTemplate) {\r\n <ng-container \r\n [ngTemplateOutlet]=\"optionTemplate\"\r\n [ngTemplateOutletContext]=\"{ item: item.item }\">\r\n </ng-container>\r\n }\r\n @else {\r\n <span class=\"select-item-label\"> {{item.label}} </span>\r\n }\r\n </li>\r\n</ng-template>", styles: [".input-container{cursor:pointer!important}.input-select-label{pointer-events:none;min-height:1.5rem;width:100%;outline:2px solid transparent;outline-offset:2px;color:var(--ion-color-dark)}.select-content{display:flex;height:18rem;width:100%;flex-direction:column;gap:.25rem;overflow:hidden;padding:.25rem}.select-content .select-search-bar-container{display:flex;width:100%;flex-shrink:1}.select-content .select-search-bar-container .select-search-bar-icon-container{display:flex;height:100%;width:1.75rem;align-items:center;justify-content:center;border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-width:1px}.select-content .select-search-bar-container .select-search-bar{width:100%;flex-shrink:1;border-radius:.375rem;border-width:1px;background-color:transparent;padding-left:.5rem;padding-right:.5rem;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}@media (orientation: portrait){.select-content .select-search-bar-container .select-search-bar{height:2.5rem}}@media (orientation: landscape){.select-content .select-search-bar-container .select-search-bar{height:1.75rem}}.select-item-list{width:100%;height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:.25rem}.select-item-list .select-item{color:var(--ion-color-dark);display:flex;width:100%;flex-shrink:0;align-items:center;justify-content:flex-start;border-radius:.375rem;padding-right:.5rem}@media (orientation: portrait){.select-item-list .select-item{min-height:2.5rem}}@media (orientation: landscape){.select-item-list .select-item{min-height:2rem}}.select-item-list .select-item{cursor:pointer}.select-item-list .select-item.disabled{opacity:.5;pointer-events:none}.select-item-list .select-item:hover,.select-item-list .select-item:focus,.select-item-list .select-item[aria-selected=true]{background-color:color-mix(in srgb,var(--ion-color-dark) 20%,transparent)}.select-item-list .select-item .select-item-checkmark-conteiner{display:flex;height:100%;width:1.75rem;flex-shrink:0;align-items:center;justify-content:center}.select-item-list .select-item .select-item-label{width:100%}.error-container{pointer-events:none;position:absolute;bottom:0;left:0;z-index:200;display:flex;width:100%;height:100%;--tw-translate-y: -3rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));align-items:center;justify-content:center;opacity:0;will-change:opacity,auto;transition:opacity .2s ease-in-out,transform .2s ease-in-out}.error-container.active{pointer-events:auto!important;--tw-translate-y: 0px !important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important;opacity:1!important}\n", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 2px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:auto;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"], dependencies: [{ kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i3.IonCheckbox, selector: "ion-checkbox", inputs: ["alignment", "checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "required", "value"] }, { kind: "component", type: i3.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i3.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i3.IonModal, selector: "ion-modal" }, { kind: "directive", type: i3.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SIonPopoverComponent, selector: "sion-popover", inputs: ["fill", "arrow", "flip", "placement", "height", "width", "anchor"], outputs: ["onWillPresent", "onDidPresent", "onWillDismiss", "onDidDismiss", "isVisibleChange"] }] }); }
|
|
3504
3504
|
}
|
|
3505
3505
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputSelectComponent, decorators: [{
|
|
3506
3506
|
type: Component,
|
|
3507
3507
|
args: [{ selector: 'input-select', providers: [
|
|
3508
3508
|
...InputProviderFactory.GetProviders(InputSelectComponent),
|
|
3509
3509
|
{ provide: CustomInput, useExisting: forwardRef(() => InputSelectComponent) },
|
|
3510
|
-
], template: "<div \r\n #inputContainer\r\n class=\"input-container\" \r\n (click)=\"setFocus($event);\"\r\n [class.required]=\"required()\" \r\n [class.submitted]=\"submitted()\" \r\n [class.manual-focus]=\"floatingVisible\"\r\n [class.invalid]=\"invalid\" \r\n [class.disabled]=\"loading() || loadingFromLoader || disabled()\"\r\n [class.loading]=\"loading() || loadingFromLoader\"\r\n>\r\n <div class=\"input-label\"> \r\n <span class=\"truncate\">\r\n {{label()}} \r\n </span>\r\n </div>\r\n \r\n <div class=\"w-full truncate outline-none\" [class.pr-7]=\"!configuration().clearable\" [class.pr-10]=\"configuration().clearable\" #inputSelectLabel tabindex=\"0\">\r\n @if (!configuration().multiple && currentLabel){\r\n @if(labelTemplate){\r\n <ng-container \r\n [ngTemplateOutlet]=\"labelTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: currentLabel, item: currentItems.item }\">\r\n </ng-container>\r\n }\r\n @else {\r\n <span class=\"input-select-label\"> {{currentLabel}} </span>\r\n }\r\n }\r\n @else if (configuration().multiple && isArray(currentItems) && $any(currentItems).length) {\r\n <div class=\"w-full min-h-6 overflow-hidden relative\">\r\n <div class=\"absolute left-0 top-0 overflow-x-auto flex gap-2 size-full mask-x/2\">\r\n @for (item of currentItems; track $index) {\r\n <div class=\"translucid-border rounded-lg flex items-center justify-center gap-2 pl-2\">\r\n @if(labelTemplate){\r\n <ng-container \r\n [ngTemplateOutlet]=\"labelTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item.label, item: item.item }\">\r\n </ng-container>\r\n }\r\n @else {\r\n <span class=\"input-select-label\"> {{item.label}} </span>\r\n }\r\n \r\n <div class=\"h-full aspect-square flex items-center justify-center cursor-pointer\" (click)=\"Select(item); $event.stopPropagation()\">\r\n <ion-icon name=\"close\" color=\"danger\" slot=\"icon-only\"></ion-icon>\r\n </div>\r\n <!-- <ion-button class=\"m-0 h-full\" (click)=\"Select(item.value); $event.stopPropagation()\" color=\"medium\" size=\"small\" fill=\"outline\" style=\"--border-radius: .5rem\">\r\n <ion-icon name=\"close\" color=\"danger\" slot=\"icon-only\"></ion-icon>\r\n </ion-button> -->\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n @else {\r\n @if(placeholderTemplate){\r\n <ng-container \r\n [ngTemplateOutlet]=\"placeholderTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: this.configuration().placeholder, placeholder: this.configuration().placeholder }\">\r\n </ng-container>\r\n }\r\n @else {\r\n <span class=\"input-select-label !text-medium\"> {{this.configuration().placeholder}} </span>\r\n }\r\n }\r\n </div>\r\n\r\n <div class=\"absolute bottom-1 flex flex-col items-center justify-center size-7\" [class.right-1]=\"!configuration().clearable\" [class.right-8]=\"configuration().clearable\">\r\n <ion-icon class=\"-mb-0.5\" name=\"chevron-up\"></ion-icon>\r\n <ion-icon class=\"-mt-0.5\" name=\"chevron-down\"></ion-icon>\r\n </div>\r\n @if(configuration().clearable){\r\n <ion-button class=\"absolute right-1 bottom-1\" (click)=\"Clear($event)\" color=\"medium\" size=\"small\" fill=\"clear\" style=\"--border-radius: .5rem\">\r\n <ion-icon name=\"close\" slot=\"icon-only\"></ion-icon>\r\n </ion-button>\r\n } \r\n\r\n <div class=\"loading-container\" [class.loading]=\"loading() || loadingFromLoader\">\r\n <ion-spinner></ion-spinner>\r\n </div>\r\n <div class=\"error-container\" (click)=\"configuration().loader.Refresh()\" [class.active]=\"configuration().loader.error && !loadingFromLoader\">\r\n <ion-icon class=\"text-xl\" color=\"danger\" name=\"refresh-circle\"></ion-icon>\r\n </div>\r\n</div>\r\n\r\n@if(!disabled()){\r\n <ion-modal #modal (ionModalWillPresent)=\"OnPresent()\" (didDismiss)=\"OnDismiss()\" style=\"--width: 90%; --height: 90%;\" [keepContentsMounted]=\"true\">\r\n <ng-template>\r\n <ion-header>\r\n <ion-toolbar>\r\n <ion-buttons slot=\"end\">\r\n <ion-button (click)=\"modal.dismiss()\">\r\n <ion-icon name=\"close-circle\"></ion-icon>\r\n </ion-button>\r\n </ion-buttons>\r\n </ion-toolbar>\r\n </ion-header>\r\n\r\n <ng-container [ngTemplateOutlet]=\"selectContentTemplate\" [ngTemplateOutletContext]=\"{ modal: true }\"></ng-container>\r\n </ng-template>\r\n </ion-modal>\r\n\r\n <sion-popover \r\n #popover \r\n [width]=\"inputContainer.offsetWidth + 'px'\" \r\n (onWillPresent)=\"OnPresent()\" \r\n (onDidDismiss)=\"OnDismiss()\" \r\n [anchor]=\"inputContainer\" \r\n [placement]=\"configuration().popoverConfiguration.placement\" \r\n [flip]=\"configuration().popoverConfiguration.flip\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"selectContentTemplate\"></ng-container>\r\n </sion-popover>\r\n}\r\n\r\n<ng-template #selectContentTemplate let-modal=\"modal\">\r\n <div #selectContent class=\"select-content\" [class.!size-full]=\"modal\">\r\n <div class=\"select-search-bar-container\">\r\n <div class=\"select-search-bar-icon-container !border-r-0 border-primary/70 bg-primary/70 shrink-0\">\r\n <ion-icon color=\"dark\" name=\"search\"></ion-icon>\r\n </div>\r\n <input #inputSearchBar tabindex=\"-1\" class=\"select-search-bar border-primary/70 !rounded-l-none\" [formControl]=\"searchBarControl\"/>\r\n </div> \r\n <ul class=\"select-item-list mask-y\" role=\"listbox\" [attr.aria-activedescendant]=\"'sion-is-' + selectedIndex\">\r\n @if(floatingVisible){\r\n @for (item of lstOptions; track item.value) { \r\n <ng-container \r\n [ngTemplateOutlet]=\"baseOptionTemplate\"\r\n [ngTemplateOutletContext]=\"{ item: item, index: $index }\">\r\n </ng-container>\r\n }\r\n }\r\n </ul>\r\n @if(isServiceAtivo()){\r\n <div class=\"w-full text-xs flex items-center justify-end\">\r\n <ion-checkbox [ngModel]=\"somenteAtivos()\" (ngModelChange)=\"somenteAtivos.set($event)\" class=\"scale-75\"> Somente ativos </ion-checkbox>\r\n </div>\r\n }\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #baseOptionTemplate let-item=\"item\" let-index=\"index\">\r\n <li [id]=\"'sion-is-' + index\" class=\"select-item\" [class.disabled]=\"item.disabled\" [attr.aria-selected]=\"index == selectedIndex\" (mouseenter)=\"selectedIndex = index\" (click)=\"Select(item)\">\r\n <div class=\"select-item-checkmark-conteiner\">\r\n @if(item.selected) {\r\n <ion-icon class=\"select-item-checkmark\" color=\"primary\" name=\"checkmark\"></ion-icon>\r\n }\r\n </div>\r\n @if (optionTemplate) {\r\n <ng-container \r\n [ngTemplateOutlet]=\"optionTemplate\"\r\n [ngTemplateOutletContext]=\"{ item: item.item }\">\r\n </ng-container>\r\n }\r\n @else {\r\n <span class=\"select-item-label\"> {{item.label}} </span>\r\n }\r\n </li>\r\n</ng-template>", styles: [".input-container{cursor:pointer!important}.input-select-label{pointer-events:none;min-height:1.5rem;width:100%;outline:2px solid transparent;outline-offset:2px;color:var(--ion-color-dark)}.select-content{display:flex;height:18rem;width:100%;flex-direction:column;gap:.25rem;overflow:hidden;padding:.25rem}.select-content .select-search-bar-container{display:flex;width:100%;flex-shrink:1}.select-content .select-search-bar-container .select-search-bar-icon-container{display:flex;height:100%;width:1.75rem;align-items:center;justify-content:center;border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-width:1px}.select-content .select-search-bar-container .select-search-bar{width:100%;flex-shrink:1;border-radius:.375rem;border-width:1px;background-color:transparent;padding-left:.5rem;padding-right:.5rem;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}@media (orientation: portrait){.select-content .select-search-bar-container .select-search-bar{height:2.5rem}}@media (orientation: landscape){.select-content .select-search-bar-container .select-search-bar{height:1.75rem}}.select-item-list{width:100%;height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:.25rem}.select-item-list .select-item{color:var(--ion-color-dark);display:flex;width:100%;flex-shrink:0;align-items:center;justify-content:flex-start;border-radius:.375rem;padding-right:.5rem}@media (orientation: portrait){.select-item-list .select-item{min-height:2.5rem}}@media (orientation: landscape){.select-item-list .select-item{min-height:2rem}}.select-item-list .select-item{cursor:pointer}.select-item-list .select-item.disabled{opacity:.5;pointer-events:none}.select-item-list .select-item:hover,.select-item-list .select-item:focus,.select-item-list .select-item[aria-selected=true]{background-color:color-mix(in srgb,var(--ion-color-dark) 20%,transparent)}.select-item-list .select-item .select-item-checkmark-conteiner{display:flex;height:100%;width:1.75rem;flex-shrink:0;align-items:center;justify-content:center}.select-item-list .select-item .select-item-label{width:100%}.error-container{pointer-events:none;position:absolute;bottom:0;left:0;z-index:200;display:flex;width:100%;height:100%;--tw-translate-y: -3rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));align-items:center;justify-content:center;opacity:0;will-change:opacity,auto;transition:opacity .2s ease-in-out,transform .2s ease-in-out}.error-container.active{pointer-events:auto!important;--tw-translate-y: 0px !important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important;opacity:1!important}\n", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 2px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:auto;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"] }]
|
|
3510
|
+
], template: "<div \r\n #inputContainer\r\n class=\"input-container\" \r\n (click)=\"setFocus($event);\"\r\n [class.required]=\"required()\" \r\n [class.submitted]=\"submitted()\" \r\n [class.manual-focus]=\"floatingVisible\"\r\n [class.invalid]=\"invalid\" \r\n [class.disabled]=\"loading() || loadingFromLoader || disabled()\"\r\n [class.loading]=\"loading() || loadingFromLoader\"\r\n>\r\n <div class=\"input-label\"> \r\n <span class=\"truncate\">\r\n {{label()}} \r\n </span>\r\n </div>\r\n \r\n <div class=\"w-full truncate outline-none\" [class.pr-7]=\"!configuration().clearable\" [class.pr-10]=\"configuration().clearable\" #inputSelectLabel tabindex=\"0\">\r\n @if (!configuration().multiple && currentLabel){\r\n @if(labelTemplate){\r\n <ng-container \r\n [ngTemplateOutlet]=\"labelTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: currentLabel, item: currentItems.item }\">\r\n </ng-container>\r\n }\r\n @else {\r\n <span class=\"input-select-label\"> {{currentLabel}} </span>\r\n }\r\n }\r\n @else if (configuration().multiple && isArray(currentItems) && $any(currentItems).length) {\r\n <div class=\"w-full min-h-6 overflow-hidden relative\">\r\n <div class=\"absolute left-0 top-0 overflow-x-auto flex gap-2 size-full mask-x/2\">\r\n @for (item of currentItems; track $index) {\r\n <div class=\"translucid-border rounded-lg flex items-center justify-center gap-2 pl-2\">\r\n @if(labelTemplate){\r\n <ng-container \r\n [ngTemplateOutlet]=\"labelTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item.label, item: item.item }\">\r\n </ng-container>\r\n }\r\n @else {\r\n <span class=\"input-select-label\"> {{item.label}} </span>\r\n }\r\n \r\n <div class=\"h-full aspect-square flex items-center justify-center cursor-pointer\" (click)=\"Select(item); $event.stopPropagation()\">\r\n <ion-icon name=\"close\" color=\"danger\" slot=\"icon-only\"></ion-icon>\r\n </div>\r\n <!-- <ion-button class=\"m-0 h-full\" (click)=\"Select(item.value); $event.stopPropagation()\" color=\"medium\" size=\"small\" fill=\"outline\" style=\"--border-radius: .5rem\">\r\n <ion-icon name=\"close\" color=\"danger\" slot=\"icon-only\"></ion-icon>\r\n </ion-button> -->\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n @else {\r\n @if(placeholderTemplate){\r\n <ng-container \r\n [ngTemplateOutlet]=\"placeholderTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: this.configuration().placeholder, placeholder: this.configuration().placeholder }\">\r\n </ng-container>\r\n }\r\n @else {\r\n <span class=\"input-select-label !text-medium\"> {{this.configuration().placeholder}} </span>\r\n }\r\n }\r\n </div>\r\n\r\n <div class=\"absolute bottom-1 flex flex-col items-center justify-center size-7\" [class.right-1]=\"!configuration().clearable\" [class.right-8]=\"configuration().clearable\">\r\n <ion-icon class=\"-mb-0.5\" name=\"chevron-up\"></ion-icon>\r\n <ion-icon class=\"-mt-0.5\" name=\"chevron-down\"></ion-icon>\r\n </div>\r\n @if(configuration().clearable){\r\n <ion-button class=\"absolute right-1 bottom-1\" (click)=\"Clear($event)\" color=\"medium\" size=\"small\" fill=\"clear\" style=\"--border-radius: .5rem\">\r\n <ion-icon name=\"close\" slot=\"icon-only\"></ion-icon>\r\n </ion-button>\r\n } \r\n\r\n <div class=\"loading-container\" [class.loading]=\"loading() || loadingFromLoader\">\r\n <ion-spinner></ion-spinner>\r\n </div>\r\n <div class=\"error-container\" (click)=\"configuration().loader.Refresh()\" [class.active]=\"configuration().loader.error && !loadingFromLoader\">\r\n <ion-icon class=\"text-xl\" color=\"danger\" name=\"refresh-circle\"></ion-icon>\r\n </div>\r\n</div>\r\n\r\n@if(!disabled()){\r\n <ion-modal #modal (ionModalWillPresent)=\"OnPresent()\" (didDismiss)=\"OnDismiss()\" style=\"--width: 90%; --height: 90%;\" [keepContentsMounted]=\"true\">\r\n <ng-template>\r\n <ion-header>\r\n <ion-toolbar>\r\n <ion-buttons slot=\"end\">\r\n <ion-button (click)=\"modal.dismiss()\">\r\n <ion-icon name=\"close-circle\"></ion-icon>\r\n </ion-button>\r\n </ion-buttons>\r\n </ion-toolbar>\r\n </ion-header>\r\n\r\n <ng-container [ngTemplateOutlet]=\"selectContentTemplate\" [ngTemplateOutletContext]=\"{ modal: true }\"></ng-container>\r\n </ng-template>\r\n </ion-modal>\r\n\r\n <sion-popover \r\n #popover \r\n [width]=\"inputContainer.offsetWidth + 'px'\" \r\n (onWillPresent)=\"OnPresent()\" \r\n (onDidDismiss)=\"OnDismiss()\" \r\n [anchor]=\"inputContainer\" \r\n [placement]=\"configuration().popoverConfiguration.placement\" \r\n [flip]=\"configuration().popoverConfiguration.flip\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"selectContentTemplate\"></ng-container>\r\n </sion-popover>\r\n}\r\n\r\n<ng-template #selectContentTemplate let-modal=\"modal\">\r\n <div #selectContent class=\"select-content\" [class.!size-full]=\"modal\">\r\n <div class=\"select-search-bar-container\">\r\n <div class=\"select-search-bar-icon-container !border-r-0 border-primary/70 bg-primary/70 shrink-0\">\r\n <ion-icon color=\"dark\" name=\"search\"></ion-icon>\r\n </div>\r\n <input #inputSearchBar tabindex=\"-1\" class=\"select-search-bar border-primary/70 !rounded-l-none\" [formControl]=\"searchBarControl\"/>\r\n </div> \r\n <ul class=\"select-item-list mask-y\" role=\"listbox\" [attr.aria-activedescendant]=\"'sion-is-' + selectedIndex\">\r\n @for (item of lstOptions; track item.value) { \r\n <ng-container \r\n [ngTemplateOutlet]=\"baseOptionTemplate\"\r\n [ngTemplateOutletContext]=\"{ item: item, index: $index }\">\r\n </ng-container>\r\n }\r\n </ul>\r\n @if(isServiceAtivo()){\r\n <div class=\"w-full text-xs flex items-center justify-end\">\r\n <ion-checkbox [ngModel]=\"somenteAtivos()\" (ngModelChange)=\"somenteAtivos.set($event)\" class=\"scale-75\"> Somente ativos </ion-checkbox>\r\n </div>\r\n }\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #baseOptionTemplate let-item=\"item\" let-index=\"index\">\r\n <li [id]=\"'sion-is-' + index\" class=\"select-item\" [class.disabled]=\"item.disabled\" [attr.aria-selected]=\"index == selectedIndex\" (mouseenter)=\"selectedIndex = index\" (click)=\"Select(item)\">\r\n <div class=\"select-item-checkmark-conteiner\">\r\n @if(item.selected) {\r\n <ion-icon class=\"select-item-checkmark\" color=\"primary\" name=\"checkmark\"></ion-icon>\r\n }\r\n </div>\r\n @if (optionTemplate) {\r\n <ng-container \r\n [ngTemplateOutlet]=\"optionTemplate\"\r\n [ngTemplateOutletContext]=\"{ item: item.item }\">\r\n </ng-container>\r\n }\r\n @else {\r\n <span class=\"select-item-label\"> {{item.label}} </span>\r\n }\r\n </li>\r\n</ng-template>", styles: [".input-container{cursor:pointer!important}.input-select-label{pointer-events:none;min-height:1.5rem;width:100%;outline:2px solid transparent;outline-offset:2px;color:var(--ion-color-dark)}.select-content{display:flex;height:18rem;width:100%;flex-direction:column;gap:.25rem;overflow:hidden;padding:.25rem}.select-content .select-search-bar-container{display:flex;width:100%;flex-shrink:1}.select-content .select-search-bar-container .select-search-bar-icon-container{display:flex;height:100%;width:1.75rem;align-items:center;justify-content:center;border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-width:1px}.select-content .select-search-bar-container .select-search-bar{width:100%;flex-shrink:1;border-radius:.375rem;border-width:1px;background-color:transparent;padding-left:.5rem;padding-right:.5rem;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}@media (orientation: portrait){.select-content .select-search-bar-container .select-search-bar{height:2.5rem}}@media (orientation: landscape){.select-content .select-search-bar-container .select-search-bar{height:1.75rem}}.select-item-list{width:100%;height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:.25rem}.select-item-list .select-item{color:var(--ion-color-dark);display:flex;width:100%;flex-shrink:0;align-items:center;justify-content:flex-start;border-radius:.375rem;padding-right:.5rem}@media (orientation: portrait){.select-item-list .select-item{min-height:2.5rem}}@media (orientation: landscape){.select-item-list .select-item{min-height:2rem}}.select-item-list .select-item{cursor:pointer}.select-item-list .select-item.disabled{opacity:.5;pointer-events:none}.select-item-list .select-item:hover,.select-item-list .select-item:focus,.select-item-list .select-item[aria-selected=true]{background-color:color-mix(in srgb,var(--ion-color-dark) 20%,transparent)}.select-item-list .select-item .select-item-checkmark-conteiner{display:flex;height:100%;width:1.75rem;flex-shrink:0;align-items:center;justify-content:center}.select-item-list .select-item .select-item-label{width:100%}.error-container{pointer-events:none;position:absolute;bottom:0;left:0;z-index:200;display:flex;width:100%;height:100%;--tw-translate-y: -3rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));align-items:center;justify-content:center;opacity:0;will-change:opacity,auto;transition:opacity .2s ease-in-out,transform .2s ease-in-out}.error-container.active{pointer-events:auto!important;--tw-translate-y: 0px !important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important;opacity:1!important}\n", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 2px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:auto;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"] }]
|
|
3511
3511
|
}], ctorParameters: () => [], propDecorators: { labelTemplate: [{
|
|
3512
3512
|
type: ContentChild,
|
|
3513
3513
|
args: [SIonLabelTemplateDirective, { read: TemplateRef }]
|
|
@@ -3904,11 +3904,11 @@ class DefaultTableComponent {
|
|
|
3904
3904
|
this.ativar.emit(id);
|
|
3905
3905
|
}
|
|
3906
3906
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DefaultTableComponent, deps: [{ token: StorageService }, { token: i2$2.ActivatedRoute }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3907
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DefaultTableComponent, selector: "default-table", inputs: { acoesTemplate: { classPropertyName: "acoesTemplate", publicName: "acoesTemplate", isSignal: false, isRequired: false, transformFunction: null }, service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, orderByProperty: { classPropertyName: "orderByProperty", publicName: "orderByProperty", isSignal: true, isRequired: false, transformFunction: null }, ascending: { classPropertyName: "ascending", publicName: "ascending", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, lstTableFields: { classPropertyName: "lstTableFields", publicName: "lstTableFields", isSignal: true, isRequired: false, transformFunction: null }, noFilters: { classPropertyName: "noFilters", publicName: "noFilters", isSignal: true, isRequired: false, transformFunction: null }, columnClass: { classPropertyName: "columnClass", publicName: "columnClass", isSignal: true, isRequired: false, transformFunction: null }, columnStyle: { classPropertyName: "columnStyle", publicName: "columnStyle", isSignal: true, isRequired: false, transformFunction: null }, noPagination: { classPropertyName: "noPagination", publicName: "noPagination", isSignal: true, isRequired: false, transformFunction: null }, itemPath: { classPropertyName: "itemPath", publicName: "itemPath", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { total: "totalChange", limit: "limitChange", page: "pageChange", orderByProperty: "orderByPropertyChange", ascending: "ascendingChange", filter: "filterChange", ativar: "ativar", refresh: "refresh", loading: "loadingChange", items: "itemsChange", lstTableFields: "lstTableFieldsChange", itemClick: "itemClick" }, ngImport: i0, template: "<!-- <div class=\"size-full rounded-2xl flex flex-col overflow-hidden relative\">\r\n <loading [type]=\"3\" [loading]=\"loading\"></loading>\r\n <content-block text=\"Sem Dados\" [value]=\"!(items.length != 0 || loading)\"></content-block>\r\n\r\n <div class=\"size-full shrink relative overflow-y-auto\">\r\n <table>\r\n <thead>\r\n <tr>\r\n <th scope=\"col\" class=\"px-3 !h-10\" *ngIf=\"acoesTemplate\"> A\u00E7\u00F5es </th>\r\n @for (field of lstTableFields; let i = $index; track i) {\r\n @if (!field.hidden) {\r\n <th scope=\"col\" class=\"p-2 px-3\" id=\"th-filter-select\">\r\n <div class=\"flex items-center justify-start h-full\" style=\"white-space: var(--ion-table-filter-wrap);\"> \r\n @if(!noFilters){\r\n <th-filter class=\"!text-base\" style=\"text-transform: none !important\" *ngIf=\"(field.type != InputTypeFile) && !(field.filter && field.disabledChange()) && !noFilters\"\r\n [field]=\"field\"\r\n (change)=\"ChangeFilter()\"\r\n ></th-filter>\r\n }\r\n <span>{{field.header}}</span>\r\n\r\n <a *ngIf=\"!(!(field.type != InputTypeFile) && !(field.filter && field.disabledChange())) && !noFilters\" class=\"order-switch h-5 flex items-center justify-center px-1 ml-2 shrink-0 cursor-pointer rounded-2xl\" (click)=\"SwitchOrder(field)\" [ngClass]=\"{ 'ordering-asc' : orderByProperty == field.index && ascending, 'ordering-desc' : orderByProperty == field.index && !ascending}\">\r\n <ion-icon id=\"up\" name=\"arrow-up\" class=\"-mt-1\"></ion-icon>\r\n <ion-icon id=\"down\" name=\"arrow-down\" class=\"-ml-1 -mb-1\"></ion-icon>\r\n </a>\r\n </div>\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr [hidden]=\"loading\" *ngFor=\"let item of items\">\r\n @if(acoesTemplate){\r\n <td class=\"whitespace-nowrap py-1 px-3\" [style]=\"GetTdStyle('Acoes', item)\" >\r\n <ng-container *ngTemplateOutlet=\"acoesTemplate; context: { $implicit: item }\"></ng-container>\r\n </td>\r\n }\r\n\r\n @for (field of lstTableFields; track $index) {\r\n @if (!field.hidden) {\r\n <td class=\"px-3 py-2\" \r\n [ngClass]=\"GetTdClasses(field, item)\" \r\n [style]=\"GetTdStyle(field, item)\" \r\n (click)=\"Redirect(field, item)\"\r\n style=\"white-space: var(--ion-table-row-wrap);\"\r\n >\r\n @if (field.index == 'ativo') {\r\n <div class=\"w-full h-full flex items-center justify-start\" [routerLink]=\"null\">\r\n <ion-toggle [checked]=\"item[field.index]\" [disabled]=\"loading\" (ionChange)=\"Ativar(item.id)\" ></ion-toggle>\r\n </div>\r\n } @else {\r\n @switch (field.type) {\r\n @case (\"Bool\") {\r\n @if (field.configuration.type == \"toggle\") {\r\n <div class=\"-full h-full flex items-center justify-start\">\r\n <ion-toggle [checked]=\"item[field.index]\" [disabled]=\"true\"></ion-toggle>\r\n </div>\r\n }\r\n @else {\r\n <div class=\"-full h-full flex items-center justify-start\">\r\n <ion-checkbox [checked]=\"item[field.index]\" [disabled]=\"true\"></ion-checkbox>\r\n </div>\r\n }\r\n }\r\n @case (\"File\") {\r\n <download-button [(ngModel)]=\"item[field.index]\" [configuration]=\"field.configuration\"></download-button>\r\n }\r\n @case (\"Select\") {\r\n {{GetSelectLabel(item, field)}}\r\n }\r\n @default {\r\n {{GetField(item, field)}} \r\n }\r\n }\r\n }\r\n </td>\r\n }\r\n }\r\n </tr>\r\n\r\n <ng-content select=\"[slot=item-end]\"></ng-content>\r\n </tbody>\r\n </table>\r\n </div>\r\n @if(!noPagination){\r\n <div class=\"shrink-0 z-[100]\">\r\n <default-pagination\r\n [page]=\"page\"\r\n (pageChange)=\"EmitPage($event)\"\r\n [total]=\"total\"\r\n [limit]=\"limit\"\r\n [length]=\"items.length\"\r\n [loading]=\"loading\"\r\n ></default-pagination>\r\n </div>\r\n }\r\n</div> -->\r\n\r\n<div class=\"size-full rounded-xl flex flex-col overflow-hidden relative\">\r\n <loading [type]=\"3\" [loading]=\"loading()\"></loading>\r\n <content-block text=\"Sem Dados\" [value]=\"!(items.length != 0 || loading)\"></content-block>\r\n\r\n <div class=\"size-full shrink relative overflow-y-auto\">\r\n <table>\r\n <thead>\r\n <tr>\r\n @if(acoesTemplate){\r\n\r\n }\r\n <th scope=\"col\" class=\"p-2\"> \r\n A\u00E7\u00F5es \r\n </th>\r\n\r\n @for (tfa of lstTableFieldsAvailable(); track tfa.tf.index) {\r\n <th scope=\"col\" class=\"p-2\"> \r\n <div class=\"flex gap-2 items-center justify-start th\">\r\n @if(!noFilters()){\r\n <th-filter class=\"!text-base\" style=\"text-transform: none !important\" \r\n *ngIf=\"((tfa.tf.type != InputType.File || (tfa.tf.filter && tfa.tf.disabledChange())) && !noFilters())\"\r\n [field]=\"tfa.tf\"\r\n (change)=\"ChangeFilter()\"\r\n ></th-filter>\r\n }\r\n\r\n {{tfa.tf.header}} \r\n\r\n @if((tfa.tf.type != InputType.File || (tfa.tf.filter && tfa.tf.disabledChange())) && !noFilters()){\r\n <a [ngClass]=\"{ 'bg-light/10 !opacity-100': tfa.ascending || tfa.descending }\"\r\n class=\"order h-4 w-5 relative cursor-pointer rounded-lg opacity-0 default-transition\" \r\n (click)=\"SwitchOrder(tfa.tf)\"\r\n >\r\n <ion-icon \r\n [class.text-primary]=\"tfa.ascending\"\r\n class=\"absolute left-0 top-0\" \r\n name=\"arrow-up\"\r\n ></ion-icon> \r\n <ion-icon \r\n [class.text-primary]=\"tfa.descending\"\r\n class=\"absolute right-0 bottom-0\" \r\n name=\"arrow-down\"\r\n ></ion-icon> \r\n </a>\r\n }\r\n </div>\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of lstRows; track row.id || $index) {\r\n <tr [hidden]=\"loading()\">\r\n @if(acoesTemplate){\r\n <td (click)=\"Redirect(undefined, row.item)\" class=\"whitespace-nowrap py-1 px-3 {{row.acoesClass}}\" [style]=\"row.acoesStyle\" >\r\n <ng-container *ngTemplateOutlet=\"acoesTemplate; context: { $implicit: row.item }\"></ng-container>\r\n </td>\r\n }\r\n\r\n @for (col of row.lstColumns; track col.tf.index) {\r\n <td class=\"{{col.class}} p-2 cursor-pointer\" (click)=\"Redirect(col.tf, row.item)\" [style]=\"'white-space: var(--ion-table-row-wrap);' + col.style\">\r\n @if(col.tf.index == 'ativo') {\r\n <div class=\"size-full flex items-center justify-start\" [routerLink]=\"null\">\r\n <ion-toggle [checked]=\"col.value\" [disabled]=\"loading()\" (ionChange)=\"Ativar(row.id)\" ></ion-toggle>\r\n </div>\r\n }\r\n @else if (col.tf.type == InputType.Bool){\r\n <div class=\"h-full flex items-center justify-start\">\r\n @if(col.tf.configuration.type == 'toggle') {\r\n <ion-toggle [checked]=\"col.value\" [disabled]=\"true\"></ion-toggle>\r\n }\r\n @else {\r\n <ion-checkbox [checked]=\"col.value\" [disabled]=\"true\"></ion-checkbox>\r\n }\r\n </div>\r\n }\r\n @else if (col.tf.type == InputType.File) {\r\n <download-button [(ngModel)]=\"col.value\" [configuration]=\"col.tf.configuration\"></download-button>\r\n }\r\n @else if (col.loading){\r\n <ion-spinner name=\"dots\"></ion-spinner>\r\n } @else {\r\n {{col.label}}\r\n }\r\n </td>\r\n }\r\n </tr>\r\n <ng-content select=\"[slot=item-end]\"></ng-content>\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n @if(!noPagination()){\r\n <div class=\"shrink-0 z-[100]\">\r\n <default-pagination\r\n [page]=\"page()\"\r\n (pageChange)=\"page.set($event); refresh.emit()\"\r\n [total]=\"total()\"\r\n [limit]=\"limit()\"\r\n [length]=\"items().length\"\r\n [loading]=\"loading()\"\r\n ></default-pagination>\r\n </div>\r\n }\r\n\r\n <!-- <div class=\"overflow-y-auto\">\r\n @for (item of lstRows; track $index) {\r\n <div class=\"border border-red-500 flex\">\r\n {{$index}} - \r\n @for (lbl of item.lstColumns; track $index) {\r\n ([{{lbl.label}}])\r\n }\r\n </div>\r\n }\r\n </div> -->\r\n</div>", styles: [".th:hover>.order{opacity:1;background-color:color-mix(in srgb,var(--ion-color-light) 10%,transparent)}\n"], dependencies: [{ kind: "component", type: i3.IonCheckbox, selector: "ion-checkbox", inputs: ["alignment", "checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "required", "value"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i3.IonToggle, selector: "ion-toggle", inputs: ["alignment", "checked", "color", "disabled", "enableOnOffLabels", "errorText", "helperText", "justify", "labelPlacement", "mode", "name", "required", "value"] }, { kind: "directive", type: i3.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i3.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DownloadButtonComponent, selector: "download-button", inputs: ["expand", "value", "size", "color", "params", "disabled", "post", "configuration"], outputs: ["valueChange"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoadingComponent, selector: "loading", inputs: ["text", "type", "loading"] }, { kind: "component", type: ContentBlockComponent, selector: "content-block", inputs: ["text", "value"] }, { kind: "component", type: DefaultPaginationComponent, selector: "default-pagination", inputs: ["total", "limit", "length", "loading", "page"], outputs: ["pageChange", "change"] }, { kind: "component", type: ThFilterComponent, selector: "th-filter", inputs: ["field"], outputs: ["change"] }] }); }
|
|
3907
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DefaultTableComponent, selector: "default-table", inputs: { acoesTemplate: { classPropertyName: "acoesTemplate", publicName: "acoesTemplate", isSignal: false, isRequired: false, transformFunction: null }, service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, orderByProperty: { classPropertyName: "orderByProperty", publicName: "orderByProperty", isSignal: true, isRequired: false, transformFunction: null }, ascending: { classPropertyName: "ascending", publicName: "ascending", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, lstTableFields: { classPropertyName: "lstTableFields", publicName: "lstTableFields", isSignal: true, isRequired: false, transformFunction: null }, noFilters: { classPropertyName: "noFilters", publicName: "noFilters", isSignal: true, isRequired: false, transformFunction: null }, columnClass: { classPropertyName: "columnClass", publicName: "columnClass", isSignal: true, isRequired: false, transformFunction: null }, columnStyle: { classPropertyName: "columnStyle", publicName: "columnStyle", isSignal: true, isRequired: false, transformFunction: null }, noPagination: { classPropertyName: "noPagination", publicName: "noPagination", isSignal: true, isRequired: false, transformFunction: null }, itemPath: { classPropertyName: "itemPath", publicName: "itemPath", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { total: "totalChange", limit: "limitChange", page: "pageChange", orderByProperty: "orderByPropertyChange", ascending: "ascendingChange", filter: "filterChange", ativar: "ativar", refresh: "refresh", loading: "loadingChange", items: "itemsChange", lstTableFields: "lstTableFieldsChange", itemClick: "itemClick" }, ngImport: i0, template: "<!-- <div class=\"size-full rounded-2xl flex flex-col overflow-hidden relative\">\r\n <loading [type]=\"3\" [loading]=\"loading\"></loading>\r\n <content-block text=\"Sem Dados\" [value]=\"!(items.length != 0 || loading)\"></content-block>\r\n\r\n <div class=\"size-full shrink relative overflow-y-auto\">\r\n <table>\r\n <thead>\r\n <tr>\r\n <th scope=\"col\" class=\"px-3 !h-10\" *ngIf=\"acoesTemplate\"> A\u00E7\u00F5es </th>\r\n @for (field of lstTableFields; let i = $index; track i) {\r\n @if (!field.hidden) {\r\n <th scope=\"col\" class=\"p-2 px-3\" id=\"th-filter-select\">\r\n <div class=\"flex items-center justify-start h-full\" style=\"white-space: var(--ion-table-filter-wrap);\"> \r\n @if(!noFilters){\r\n <th-filter class=\"!text-base\" style=\"text-transform: none !important\" *ngIf=\"(field.type != InputTypeFile) && !(field.filter && field.disabledChange()) && !noFilters\"\r\n [field]=\"field\"\r\n (change)=\"ChangeFilter()\"\r\n ></th-filter>\r\n }\r\n <span>{{field.header}}</span>\r\n\r\n <a *ngIf=\"!(!(field.type != InputTypeFile) && !(field.filter && field.disabledChange())) && !noFilters\" class=\"order-switch h-5 flex items-center justify-center px-1 ml-2 shrink-0 cursor-pointer rounded-2xl\" (click)=\"SwitchOrder(field)\" [ngClass]=\"{ 'ordering-asc' : orderByProperty == field.index && ascending, 'ordering-desc' : orderByProperty == field.index && !ascending}\">\r\n <ion-icon id=\"up\" name=\"arrow-up\" class=\"-mt-1\"></ion-icon>\r\n <ion-icon id=\"down\" name=\"arrow-down\" class=\"-ml-1 -mb-1\"></ion-icon>\r\n </a>\r\n </div>\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr [hidden]=\"loading\" *ngFor=\"let item of items\">\r\n @if(acoesTemplate){\r\n <td class=\"whitespace-nowrap py-1 px-3\" [style]=\"GetTdStyle('Acoes', item)\" >\r\n <ng-container *ngTemplateOutlet=\"acoesTemplate; context: { $implicit: item }\"></ng-container>\r\n </td>\r\n }\r\n\r\n @for (field of lstTableFields; track $index) {\r\n @if (!field.hidden) {\r\n <td class=\"px-3 py-2\" \r\n [ngClass]=\"GetTdClasses(field, item)\" \r\n [style]=\"GetTdStyle(field, item)\" \r\n (click)=\"Redirect(field, item)\"\r\n style=\"white-space: var(--ion-table-row-wrap);\"\r\n >\r\n @if (field.index == 'ativo') {\r\n <div class=\"w-full h-full flex items-center justify-start\" [routerLink]=\"null\">\r\n <ion-toggle [checked]=\"item[field.index]\" [disabled]=\"loading\" (ionChange)=\"Ativar(item.id)\" ></ion-toggle>\r\n </div>\r\n } @else {\r\n @switch (field.type) {\r\n @case (\"Bool\") {\r\n @if (field.configuration.type == \"toggle\") {\r\n <div class=\"-full h-full flex items-center justify-start\">\r\n <ion-toggle [checked]=\"item[field.index]\" [disabled]=\"true\"></ion-toggle>\r\n </div>\r\n }\r\n @else {\r\n <div class=\"-full h-full flex items-center justify-start\">\r\n <ion-checkbox [checked]=\"item[field.index]\" [disabled]=\"true\"></ion-checkbox>\r\n </div>\r\n }\r\n }\r\n @case (\"File\") {\r\n <download-button [(ngModel)]=\"item[field.index]\" [configuration]=\"field.configuration\"></download-button>\r\n }\r\n @case (\"Select\") {\r\n {{GetSelectLabel(item, field)}}\r\n }\r\n @default {\r\n {{GetField(item, field)}} \r\n }\r\n }\r\n }\r\n </td>\r\n }\r\n }\r\n </tr>\r\n\r\n <ng-content select=\"[slot=item-end]\"></ng-content>\r\n </tbody>\r\n </table>\r\n </div>\r\n @if(!noPagination){\r\n <div class=\"shrink-0 z-[100]\">\r\n <default-pagination\r\n [page]=\"page\"\r\n (pageChange)=\"EmitPage($event)\"\r\n [total]=\"total\"\r\n [limit]=\"limit\"\r\n [length]=\"items.length\"\r\n [loading]=\"loading\"\r\n ></default-pagination>\r\n </div>\r\n }\r\n</div> -->\r\n\r\n<div class=\"size-full rounded-xl flex flex-col overflow-hidden relative\">\r\n <loading [type]=\"3\" [loading]=\"loading()\"></loading>\r\n <content-block text=\"Sem Dados\" [value]=\"!(items.length != 0 || loading)\"></content-block>\r\n\r\n <div class=\"size-full shrink relative overflow-y-auto\">\r\n <table>\r\n <thead>\r\n <tr>\r\n @if(acoesTemplate){\r\n <th scope=\"col\" class=\"p-2\"> \r\n A\u00E7\u00F5es \r\n </th>\r\n }\r\n\r\n @for (tfa of lstTableFieldsAvailable(); track tfa.tf.index) {\r\n <th scope=\"col\" class=\"p-2\"> \r\n <div class=\"flex gap-2 items-center justify-start th\">\r\n @if(!noFilters()){\r\n <th-filter class=\"!text-base\" style=\"text-transform: none !important\" \r\n *ngIf=\"((tfa.tf.type != InputType.File || (tfa.tf.filter && tfa.tf.disabledChange())) && !noFilters())\"\r\n [field]=\"tfa.tf\"\r\n (change)=\"ChangeFilter()\"\r\n ></th-filter>\r\n }\r\n\r\n {{tfa.tf.header}} \r\n\r\n @if((tfa.tf.type != InputType.File || (tfa.tf.filter && tfa.tf.disabledChange())) && !noFilters()){\r\n <a [ngClass]=\"{ 'bg-light/10 !opacity-100': tfa.ascending || tfa.descending }\"\r\n class=\"order h-4 w-5 relative cursor-pointer rounded-lg opacity-0 default-transition\" \r\n (click)=\"SwitchOrder(tfa.tf)\"\r\n >\r\n <ion-icon \r\n [class.text-primary]=\"tfa.ascending\"\r\n class=\"absolute left-0 top-0\" \r\n name=\"arrow-up\"\r\n ></ion-icon> \r\n <ion-icon \r\n [class.text-primary]=\"tfa.descending\"\r\n class=\"absolute right-0 bottom-0\" \r\n name=\"arrow-down\"\r\n ></ion-icon> \r\n </a>\r\n }\r\n </div>\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of lstRows; track row.id || $index) {\r\n <tr [hidden]=\"loading()\">\r\n @if(acoesTemplate){\r\n <td (click)=\"Redirect(undefined, row.item)\" class=\"whitespace-nowrap py-1 px-3 {{row.acoesClass}}\" [style]=\"row.acoesStyle\" >\r\n <ng-container *ngTemplateOutlet=\"acoesTemplate; context: { $implicit: row.item }\"></ng-container>\r\n </td>\r\n }\r\n\r\n @for (col of row.lstColumns; track col.tf.index) {\r\n <td class=\"{{col.class}} p-2 cursor-pointer\" (click)=\"Redirect(col.tf, row.item)\" [style]=\"'white-space: var(--ion-table-row-wrap);' + col.style\">\r\n @if(col.tf.index == 'ativo') {\r\n <div class=\"size-full flex items-center justify-start\" [routerLink]=\"null\">\r\n <ion-toggle [checked]=\"col.value\" [disabled]=\"loading()\" (ionChange)=\"Ativar(row.id)\" ></ion-toggle>\r\n </div>\r\n }\r\n @else if (col.tf.type == InputType.Bool){\r\n <div class=\"h-full flex items-center justify-start\">\r\n @if(col.tf.configuration.type == 'toggle') {\r\n <ion-toggle [checked]=\"col.value\" [disabled]=\"true\"></ion-toggle>\r\n }\r\n @else {\r\n <ion-checkbox [checked]=\"col.value\" [disabled]=\"true\"></ion-checkbox>\r\n }\r\n </div>\r\n }\r\n @else if (col.tf.type == InputType.File) {\r\n <download-button [(ngModel)]=\"col.value\" [configuration]=\"col.tf.configuration\"></download-button>\r\n }\r\n @else if (col.loading){\r\n <ion-spinner name=\"dots\"></ion-spinner>\r\n } @else {\r\n {{col.label}}\r\n }\r\n </td>\r\n }\r\n </tr>\r\n <ng-content select=\"[slot=item-end]\"></ng-content>\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n @if(!noPagination()){\r\n <div class=\"shrink-0 z-[100]\">\r\n <default-pagination\r\n [page]=\"page()\"\r\n (pageChange)=\"page.set($event); refresh.emit()\"\r\n [total]=\"total()\"\r\n [limit]=\"limit()\"\r\n [length]=\"items().length\"\r\n [loading]=\"loading()\"\r\n ></default-pagination>\r\n </div>\r\n }\r\n\r\n <!-- <div class=\"overflow-y-auto\">\r\n @for (item of lstRows; track $index) {\r\n <div class=\"border border-red-500 flex\">\r\n {{$index}} - \r\n @for (lbl of item.lstColumns; track $index) {\r\n ([{{lbl.label}}])\r\n }\r\n </div>\r\n }\r\n </div> -->\r\n</div>", styles: [".th:hover>.order{opacity:1;background-color:color-mix(in srgb,var(--ion-color-light) 10%,transparent)}\n"], dependencies: [{ kind: "component", type: i3.IonCheckbox, selector: "ion-checkbox", inputs: ["alignment", "checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "required", "value"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i3.IonToggle, selector: "ion-toggle", inputs: ["alignment", "checked", "color", "disabled", "enableOnOffLabels", "errorText", "helperText", "justify", "labelPlacement", "mode", "name", "required", "value"] }, { kind: "directive", type: i3.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i3.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DownloadButtonComponent, selector: "download-button", inputs: ["expand", "value", "size", "color", "params", "disabled", "post", "configuration"], outputs: ["valueChange"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoadingComponent, selector: "loading", inputs: ["text", "type", "loading"] }, { kind: "component", type: ContentBlockComponent, selector: "content-block", inputs: ["text", "value"] }, { kind: "component", type: DefaultPaginationComponent, selector: "default-pagination", inputs: ["total", "limit", "length", "loading", "page"], outputs: ["pageChange", "change"] }, { kind: "component", type: ThFilterComponent, selector: "th-filter", inputs: ["field"], outputs: ["change"] }] }); }
|
|
3908
3908
|
}
|
|
3909
3909
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DefaultTableComponent, decorators: [{
|
|
3910
3910
|
type: Component,
|
|
3911
|
-
args: [{ selector: 'default-table', template: "<!-- <div class=\"size-full rounded-2xl flex flex-col overflow-hidden relative\">\r\n <loading [type]=\"3\" [loading]=\"loading\"></loading>\r\n <content-block text=\"Sem Dados\" [value]=\"!(items.length != 0 || loading)\"></content-block>\r\n\r\n <div class=\"size-full shrink relative overflow-y-auto\">\r\n <table>\r\n <thead>\r\n <tr>\r\n <th scope=\"col\" class=\"px-3 !h-10\" *ngIf=\"acoesTemplate\"> A\u00E7\u00F5es </th>\r\n @for (field of lstTableFields; let i = $index; track i) {\r\n @if (!field.hidden) {\r\n <th scope=\"col\" class=\"p-2 px-3\" id=\"th-filter-select\">\r\n <div class=\"flex items-center justify-start h-full\" style=\"white-space: var(--ion-table-filter-wrap);\"> \r\n @if(!noFilters){\r\n <th-filter class=\"!text-base\" style=\"text-transform: none !important\" *ngIf=\"(field.type != InputTypeFile) && !(field.filter && field.disabledChange()) && !noFilters\"\r\n [field]=\"field\"\r\n (change)=\"ChangeFilter()\"\r\n ></th-filter>\r\n }\r\n <span>{{field.header}}</span>\r\n\r\n <a *ngIf=\"!(!(field.type != InputTypeFile) && !(field.filter && field.disabledChange())) && !noFilters\" class=\"order-switch h-5 flex items-center justify-center px-1 ml-2 shrink-0 cursor-pointer rounded-2xl\" (click)=\"SwitchOrder(field)\" [ngClass]=\"{ 'ordering-asc' : orderByProperty == field.index && ascending, 'ordering-desc' : orderByProperty == field.index && !ascending}\">\r\n <ion-icon id=\"up\" name=\"arrow-up\" class=\"-mt-1\"></ion-icon>\r\n <ion-icon id=\"down\" name=\"arrow-down\" class=\"-ml-1 -mb-1\"></ion-icon>\r\n </a>\r\n </div>\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr [hidden]=\"loading\" *ngFor=\"let item of items\">\r\n @if(acoesTemplate){\r\n <td class=\"whitespace-nowrap py-1 px-3\" [style]=\"GetTdStyle('Acoes', item)\" >\r\n <ng-container *ngTemplateOutlet=\"acoesTemplate; context: { $implicit: item }\"></ng-container>\r\n </td>\r\n }\r\n\r\n @for (field of lstTableFields; track $index) {\r\n @if (!field.hidden) {\r\n <td class=\"px-3 py-2\" \r\n [ngClass]=\"GetTdClasses(field, item)\" \r\n [style]=\"GetTdStyle(field, item)\" \r\n (click)=\"Redirect(field, item)\"\r\n style=\"white-space: var(--ion-table-row-wrap);\"\r\n >\r\n @if (field.index == 'ativo') {\r\n <div class=\"w-full h-full flex items-center justify-start\" [routerLink]=\"null\">\r\n <ion-toggle [checked]=\"item[field.index]\" [disabled]=\"loading\" (ionChange)=\"Ativar(item.id)\" ></ion-toggle>\r\n </div>\r\n } @else {\r\n @switch (field.type) {\r\n @case (\"Bool\") {\r\n @if (field.configuration.type == \"toggle\") {\r\n <div class=\"-full h-full flex items-center justify-start\">\r\n <ion-toggle [checked]=\"item[field.index]\" [disabled]=\"true\"></ion-toggle>\r\n </div>\r\n }\r\n @else {\r\n <div class=\"-full h-full flex items-center justify-start\">\r\n <ion-checkbox [checked]=\"item[field.index]\" [disabled]=\"true\"></ion-checkbox>\r\n </div>\r\n }\r\n }\r\n @case (\"File\") {\r\n <download-button [(ngModel)]=\"item[field.index]\" [configuration]=\"field.configuration\"></download-button>\r\n }\r\n @case (\"Select\") {\r\n {{GetSelectLabel(item, field)}}\r\n }\r\n @default {\r\n {{GetField(item, field)}} \r\n }\r\n }\r\n }\r\n </td>\r\n }\r\n }\r\n </tr>\r\n\r\n <ng-content select=\"[slot=item-end]\"></ng-content>\r\n </tbody>\r\n </table>\r\n </div>\r\n @if(!noPagination){\r\n <div class=\"shrink-0 z-[100]\">\r\n <default-pagination\r\n [page]=\"page\"\r\n (pageChange)=\"EmitPage($event)\"\r\n [total]=\"total\"\r\n [limit]=\"limit\"\r\n [length]=\"items.length\"\r\n [loading]=\"loading\"\r\n ></default-pagination>\r\n </div>\r\n }\r\n</div> -->\r\n\r\n<div class=\"size-full rounded-xl flex flex-col overflow-hidden relative\">\r\n <loading [type]=\"3\" [loading]=\"loading()\"></loading>\r\n <content-block text=\"Sem Dados\" [value]=\"!(items.length != 0 || loading)\"></content-block>\r\n\r\n <div class=\"size-full shrink relative overflow-y-auto\">\r\n <table>\r\n <thead>\r\n <tr>\r\n @if(acoesTemplate){\r\n\r\n }\r\n <th scope=\"col\" class=\"p-2\"> \r\n A\u00E7\u00F5es \r\n </th>\r\n\r\n @for (tfa of lstTableFieldsAvailable(); track tfa.tf.index) {\r\n <th scope=\"col\" class=\"p-2\"> \r\n <div class=\"flex gap-2 items-center justify-start th\">\r\n @if(!noFilters()){\r\n <th-filter class=\"!text-base\" style=\"text-transform: none !important\" \r\n *ngIf=\"((tfa.tf.type != InputType.File || (tfa.tf.filter && tfa.tf.disabledChange())) && !noFilters())\"\r\n [field]=\"tfa.tf\"\r\n (change)=\"ChangeFilter()\"\r\n ></th-filter>\r\n }\r\n\r\n {{tfa.tf.header}} \r\n\r\n @if((tfa.tf.type != InputType.File || (tfa.tf.filter && tfa.tf.disabledChange())) && !noFilters()){\r\n <a [ngClass]=\"{ 'bg-light/10 !opacity-100': tfa.ascending || tfa.descending }\"\r\n class=\"order h-4 w-5 relative cursor-pointer rounded-lg opacity-0 default-transition\" \r\n (click)=\"SwitchOrder(tfa.tf)\"\r\n >\r\n <ion-icon \r\n [class.text-primary]=\"tfa.ascending\"\r\n class=\"absolute left-0 top-0\" \r\n name=\"arrow-up\"\r\n ></ion-icon> \r\n <ion-icon \r\n [class.text-primary]=\"tfa.descending\"\r\n class=\"absolute right-0 bottom-0\" \r\n name=\"arrow-down\"\r\n ></ion-icon> \r\n </a>\r\n }\r\n </div>\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of lstRows; track row.id || $index) {\r\n <tr [hidden]=\"loading()\">\r\n @if(acoesTemplate){\r\n <td (click)=\"Redirect(undefined, row.item)\" class=\"whitespace-nowrap py-1 px-3 {{row.acoesClass}}\" [style]=\"row.acoesStyle\" >\r\n <ng-container *ngTemplateOutlet=\"acoesTemplate; context: { $implicit: row.item }\"></ng-container>\r\n </td>\r\n }\r\n\r\n @for (col of row.lstColumns; track col.tf.index) {\r\n <td class=\"{{col.class}} p-2 cursor-pointer\" (click)=\"Redirect(col.tf, row.item)\" [style]=\"'white-space: var(--ion-table-row-wrap);' + col.style\">\r\n @if(col.tf.index == 'ativo') {\r\n <div class=\"size-full flex items-center justify-start\" [routerLink]=\"null\">\r\n <ion-toggle [checked]=\"col.value\" [disabled]=\"loading()\" (ionChange)=\"Ativar(row.id)\" ></ion-toggle>\r\n </div>\r\n }\r\n @else if (col.tf.type == InputType.Bool){\r\n <div class=\"h-full flex items-center justify-start\">\r\n @if(col.tf.configuration.type == 'toggle') {\r\n <ion-toggle [checked]=\"col.value\" [disabled]=\"true\"></ion-toggle>\r\n }\r\n @else {\r\n <ion-checkbox [checked]=\"col.value\" [disabled]=\"true\"></ion-checkbox>\r\n }\r\n </div>\r\n }\r\n @else if (col.tf.type == InputType.File) {\r\n <download-button [(ngModel)]=\"col.value\" [configuration]=\"col.tf.configuration\"></download-button>\r\n }\r\n @else if (col.loading){\r\n <ion-spinner name=\"dots\"></ion-spinner>\r\n } @else {\r\n {{col.label}}\r\n }\r\n </td>\r\n }\r\n </tr>\r\n <ng-content select=\"[slot=item-end]\"></ng-content>\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n @if(!noPagination()){\r\n <div class=\"shrink-0 z-[100]\">\r\n <default-pagination\r\n [page]=\"page()\"\r\n (pageChange)=\"page.set($event); refresh.emit()\"\r\n [total]=\"total()\"\r\n [limit]=\"limit()\"\r\n [length]=\"items().length\"\r\n [loading]=\"loading()\"\r\n ></default-pagination>\r\n </div>\r\n }\r\n\r\n <!-- <div class=\"overflow-y-auto\">\r\n @for (item of lstRows; track $index) {\r\n <div class=\"border border-red-500 flex\">\r\n {{$index}} - \r\n @for (lbl of item.lstColumns; track $index) {\r\n ([{{lbl.label}}])\r\n }\r\n </div>\r\n }\r\n </div> -->\r\n</div>", styles: [".th:hover>.order{opacity:1;background-color:color-mix(in srgb,var(--ion-color-light) 10%,transparent)}\n"] }]
|
|
3911
|
+
args: [{ selector: 'default-table', template: "<!-- <div class=\"size-full rounded-2xl flex flex-col overflow-hidden relative\">\r\n <loading [type]=\"3\" [loading]=\"loading\"></loading>\r\n <content-block text=\"Sem Dados\" [value]=\"!(items.length != 0 || loading)\"></content-block>\r\n\r\n <div class=\"size-full shrink relative overflow-y-auto\">\r\n <table>\r\n <thead>\r\n <tr>\r\n <th scope=\"col\" class=\"px-3 !h-10\" *ngIf=\"acoesTemplate\"> A\u00E7\u00F5es </th>\r\n @for (field of lstTableFields; let i = $index; track i) {\r\n @if (!field.hidden) {\r\n <th scope=\"col\" class=\"p-2 px-3\" id=\"th-filter-select\">\r\n <div class=\"flex items-center justify-start h-full\" style=\"white-space: var(--ion-table-filter-wrap);\"> \r\n @if(!noFilters){\r\n <th-filter class=\"!text-base\" style=\"text-transform: none !important\" *ngIf=\"(field.type != InputTypeFile) && !(field.filter && field.disabledChange()) && !noFilters\"\r\n [field]=\"field\"\r\n (change)=\"ChangeFilter()\"\r\n ></th-filter>\r\n }\r\n <span>{{field.header}}</span>\r\n\r\n <a *ngIf=\"!(!(field.type != InputTypeFile) && !(field.filter && field.disabledChange())) && !noFilters\" class=\"order-switch h-5 flex items-center justify-center px-1 ml-2 shrink-0 cursor-pointer rounded-2xl\" (click)=\"SwitchOrder(field)\" [ngClass]=\"{ 'ordering-asc' : orderByProperty == field.index && ascending, 'ordering-desc' : orderByProperty == field.index && !ascending}\">\r\n <ion-icon id=\"up\" name=\"arrow-up\" class=\"-mt-1\"></ion-icon>\r\n <ion-icon id=\"down\" name=\"arrow-down\" class=\"-ml-1 -mb-1\"></ion-icon>\r\n </a>\r\n </div>\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr [hidden]=\"loading\" *ngFor=\"let item of items\">\r\n @if(acoesTemplate){\r\n <td class=\"whitespace-nowrap py-1 px-3\" [style]=\"GetTdStyle('Acoes', item)\" >\r\n <ng-container *ngTemplateOutlet=\"acoesTemplate; context: { $implicit: item }\"></ng-container>\r\n </td>\r\n }\r\n\r\n @for (field of lstTableFields; track $index) {\r\n @if (!field.hidden) {\r\n <td class=\"px-3 py-2\" \r\n [ngClass]=\"GetTdClasses(field, item)\" \r\n [style]=\"GetTdStyle(field, item)\" \r\n (click)=\"Redirect(field, item)\"\r\n style=\"white-space: var(--ion-table-row-wrap);\"\r\n >\r\n @if (field.index == 'ativo') {\r\n <div class=\"w-full h-full flex items-center justify-start\" [routerLink]=\"null\">\r\n <ion-toggle [checked]=\"item[field.index]\" [disabled]=\"loading\" (ionChange)=\"Ativar(item.id)\" ></ion-toggle>\r\n </div>\r\n } @else {\r\n @switch (field.type) {\r\n @case (\"Bool\") {\r\n @if (field.configuration.type == \"toggle\") {\r\n <div class=\"-full h-full flex items-center justify-start\">\r\n <ion-toggle [checked]=\"item[field.index]\" [disabled]=\"true\"></ion-toggle>\r\n </div>\r\n }\r\n @else {\r\n <div class=\"-full h-full flex items-center justify-start\">\r\n <ion-checkbox [checked]=\"item[field.index]\" [disabled]=\"true\"></ion-checkbox>\r\n </div>\r\n }\r\n }\r\n @case (\"File\") {\r\n <download-button [(ngModel)]=\"item[field.index]\" [configuration]=\"field.configuration\"></download-button>\r\n }\r\n @case (\"Select\") {\r\n {{GetSelectLabel(item, field)}}\r\n }\r\n @default {\r\n {{GetField(item, field)}} \r\n }\r\n }\r\n }\r\n </td>\r\n }\r\n }\r\n </tr>\r\n\r\n <ng-content select=\"[slot=item-end]\"></ng-content>\r\n </tbody>\r\n </table>\r\n </div>\r\n @if(!noPagination){\r\n <div class=\"shrink-0 z-[100]\">\r\n <default-pagination\r\n [page]=\"page\"\r\n (pageChange)=\"EmitPage($event)\"\r\n [total]=\"total\"\r\n [limit]=\"limit\"\r\n [length]=\"items.length\"\r\n [loading]=\"loading\"\r\n ></default-pagination>\r\n </div>\r\n }\r\n</div> -->\r\n\r\n<div class=\"size-full rounded-xl flex flex-col overflow-hidden relative\">\r\n <loading [type]=\"3\" [loading]=\"loading()\"></loading>\r\n <content-block text=\"Sem Dados\" [value]=\"!(items.length != 0 || loading)\"></content-block>\r\n\r\n <div class=\"size-full shrink relative overflow-y-auto\">\r\n <table>\r\n <thead>\r\n <tr>\r\n @if(acoesTemplate){\r\n <th scope=\"col\" class=\"p-2\"> \r\n A\u00E7\u00F5es \r\n </th>\r\n }\r\n\r\n @for (tfa of lstTableFieldsAvailable(); track tfa.tf.index) {\r\n <th scope=\"col\" class=\"p-2\"> \r\n <div class=\"flex gap-2 items-center justify-start th\">\r\n @if(!noFilters()){\r\n <th-filter class=\"!text-base\" style=\"text-transform: none !important\" \r\n *ngIf=\"((tfa.tf.type != InputType.File || (tfa.tf.filter && tfa.tf.disabledChange())) && !noFilters())\"\r\n [field]=\"tfa.tf\"\r\n (change)=\"ChangeFilter()\"\r\n ></th-filter>\r\n }\r\n\r\n {{tfa.tf.header}} \r\n\r\n @if((tfa.tf.type != InputType.File || (tfa.tf.filter && tfa.tf.disabledChange())) && !noFilters()){\r\n <a [ngClass]=\"{ 'bg-light/10 !opacity-100': tfa.ascending || tfa.descending }\"\r\n class=\"order h-4 w-5 relative cursor-pointer rounded-lg opacity-0 default-transition\" \r\n (click)=\"SwitchOrder(tfa.tf)\"\r\n >\r\n <ion-icon \r\n [class.text-primary]=\"tfa.ascending\"\r\n class=\"absolute left-0 top-0\" \r\n name=\"arrow-up\"\r\n ></ion-icon> \r\n <ion-icon \r\n [class.text-primary]=\"tfa.descending\"\r\n class=\"absolute right-0 bottom-0\" \r\n name=\"arrow-down\"\r\n ></ion-icon> \r\n </a>\r\n }\r\n </div>\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of lstRows; track row.id || $index) {\r\n <tr [hidden]=\"loading()\">\r\n @if(acoesTemplate){\r\n <td (click)=\"Redirect(undefined, row.item)\" class=\"whitespace-nowrap py-1 px-3 {{row.acoesClass}}\" [style]=\"row.acoesStyle\" >\r\n <ng-container *ngTemplateOutlet=\"acoesTemplate; context: { $implicit: row.item }\"></ng-container>\r\n </td>\r\n }\r\n\r\n @for (col of row.lstColumns; track col.tf.index) {\r\n <td class=\"{{col.class}} p-2 cursor-pointer\" (click)=\"Redirect(col.tf, row.item)\" [style]=\"'white-space: var(--ion-table-row-wrap);' + col.style\">\r\n @if(col.tf.index == 'ativo') {\r\n <div class=\"size-full flex items-center justify-start\" [routerLink]=\"null\">\r\n <ion-toggle [checked]=\"col.value\" [disabled]=\"loading()\" (ionChange)=\"Ativar(row.id)\" ></ion-toggle>\r\n </div>\r\n }\r\n @else if (col.tf.type == InputType.Bool){\r\n <div class=\"h-full flex items-center justify-start\">\r\n @if(col.tf.configuration.type == 'toggle') {\r\n <ion-toggle [checked]=\"col.value\" [disabled]=\"true\"></ion-toggle>\r\n }\r\n @else {\r\n <ion-checkbox [checked]=\"col.value\" [disabled]=\"true\"></ion-checkbox>\r\n }\r\n </div>\r\n }\r\n @else if (col.tf.type == InputType.File) {\r\n <download-button [(ngModel)]=\"col.value\" [configuration]=\"col.tf.configuration\"></download-button>\r\n }\r\n @else if (col.loading){\r\n <ion-spinner name=\"dots\"></ion-spinner>\r\n } @else {\r\n {{col.label}}\r\n }\r\n </td>\r\n }\r\n </tr>\r\n <ng-content select=\"[slot=item-end]\"></ng-content>\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n @if(!noPagination()){\r\n <div class=\"shrink-0 z-[100]\">\r\n <default-pagination\r\n [page]=\"page()\"\r\n (pageChange)=\"page.set($event); refresh.emit()\"\r\n [total]=\"total()\"\r\n [limit]=\"limit()\"\r\n [length]=\"items().length\"\r\n [loading]=\"loading()\"\r\n ></default-pagination>\r\n </div>\r\n }\r\n\r\n <!-- <div class=\"overflow-y-auto\">\r\n @for (item of lstRows; track $index) {\r\n <div class=\"border border-red-500 flex\">\r\n {{$index}} - \r\n @for (lbl of item.lstColumns; track $index) {\r\n ([{{lbl.label}}])\r\n }\r\n </div>\r\n }\r\n </div> -->\r\n</div>", styles: [".th:hover>.order{opacity:1;background-color:color-mix(in srgb,var(--ion-color-light) 10%,transparent)}\n"] }]
|
|
3912
3912
|
}], ctorParameters: () => [{ type: StorageService }, { type: i2$2.ActivatedRoute }, { type: i2$2.Router }], propDecorators: { acoesTemplate: [{
|
|
3913
3913
|
type: Input
|
|
3914
3914
|
}] } });
|