@iamgld/ui 1.20.21 → 1.21.1

package/fesm2022/iamgld-ui.mjs

@@ -1157,7 +1157,7 @@ class SelectComponent {
                 useExisting: forwardRef(() => SelectComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "selectOptionChildren", predicate: SelectOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["selectElement"], descendants: true, isSignal: true }], ngImport: i0, template: "\r\n@let errors = control().invalid && (control().dirty || control().touched);\r\n@let disabled = control().disabled || (control().pending && control().disabled);\r\n\r\n<section #selectElement class=\"select\">\r\n\t<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\r\n\t\t<!-- Label -->\r\n\t\t@if (label()) {\r\n\t\t\t<label [for]=\"name()\">\r\n\t\t\t\t{{ label() }}\r\n\t\t\t</label>\r\n\t\t}\r\n\t\t<!-- Input -->\r\n\t\t<input\r\n\t\t\ttype=\"text\"\r\n\t\t\tid=\"input-select-{{ name() }}\"\r\n\t\t\t[tabindex]=\"disabled ? '-1' : '0'\"\r\n\t\t\t[name]=\"name()\"\r\n\t\t\t[placeholder]=\"placeholder()\"\r\n\t\t\t[formControl]=\"innerControl()\"\r\n\t\t\t(focus)=\"onFocus()\"\r\n\t\t\t(blur)=\"onBlur()\"\r\n\t\t\t(keyup.escape)=\"onBlur()\" />\r\n\r\n\t\t<!-- Suffix -->\r\n\t\t<ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\r\n\r\n\t\t<!-- Menu -->\r\n\t\t<ng-container [ngTemplateOutlet]=\"menuTemplate\" />\r\n\t</section>\r\n\t<!-- Errors -->\r\n\t@if (errors) {\r\n\t\t<ng-content select=\"gld-input-error\">\r\n\t\t\t<gld-input-error [errors]=\"control().errors\" />\r\n\t\t</ng-content>\r\n\t} @else {\r\n\t\t<!-- Hint -->\r\n\t\t<ng-content select=\"gld-input-hint\" />\r\n\t}\r\n</section>\r\n\r\n<!-- Menu Template -->\r\n<ng-template #menuTemplate>\r\n\t<section class=\"select-menu\" [class.select-menu--opened]=\"isMenuOpen()\">\r\n\t\t<ng-content select=\"gld-select-option\" />\r\n\t</section>\r\n</ng-template>\r\n\r\n<!-- Suffix Template -->\r\n<ng-template #suffixTemplate>\r\n\t@if (control().pending) {\r\n\t\t<gld-icon\r\n\t\t\tsize=\"small\"\r\n\t\t\tclass=\"input-icon input-icon--animated\"\r\n\t\t\t[class.input-icon--error]=\"errors\"\r\n\t\t\t[icon]=\"Icons.loader4Fill\"\r\n\t\t\t[disabled]=\"disabled\" />\r\n\t} @else {\r\n\t\t<gld-icon\r\n\t\t\tsize=\"small\"\r\n\t\t\tclass=\"input-icon\"\r\n\t\t\t[class.input-icon--rotated]=\"isMenuOpen()\"\r\n\t\t\t[class.input-icon--error]=\"errors\"\r\n\t\t\t[icon]=\"Icons.arrowDownSLine\"\r\n\t\t\t[disabled]=\"disabled\"\r\n\t\t\t(clicked)=\"arrowIconClicked()\" />\r\n\t}\r\n</ng-template>\r\n\r\n<!-- <h3>Debugging</h3> -->\r\n<!-- <section>errors: {{ control().errors | json }}</section> -->\r\n<!-- <section>errors: {{ errors }}</section> -->\r\n<!-- <section>invalid: {{ control().invalid }}</section> -->\r\n<!-- <section>dirty: {{ control().dirty }}</section> -->\r\n<!-- <section>touched: {{ control().touched }}</section> -->\r\n<!-- <section>disable: {{ control().disabled }}</section> -->\r\n<!-- <section>status: {{ control().status }}</section> -->\r\n\r\n<!-- Suffix Template -->\r\n<ng-template #suffixTemplate>\r\n\t<gld-icon\r\n\t\tsize=\"small\"\r\n\t\tclass=\"input-icon\"\r\n\t\t[class.input-icon--error]=\"errors\"\r\n\t\t[icon]=\"Icons.arrowDownSLine\" />\r\n</ng-template>\r\n\r\n<!-- <h3>Debugging</h3> -->\r\n<!-- <section>errors: {{ control().errors | json }}</section> -->\r\n<!-- <section>errors: {{ errors }}</section> -->\r\n<!-- <section>invalid: {{ control().invalid }}</section> -->\r\n<!-- <section>dirty: {{ control().dirty }}</section> -->\r\n<!-- <section>touched: {{ control().touched }}</section> -->\r\n<!-- <section>disable: {{ control().disabled }}</section> -->\r\n", styles: ["@charset \"UTF-8\";:root{--gld-break-point--zero: 0;--gld-break-point--mobile: 320px;--gld-break-point--landscape: 576px;--gld-break-point--tablet: 768px;--gld-break-point--desktop: 1080px;--gld-break-point--extra-desktop: 1280px;--gld-font-size--heading-one: 36px;--gld-font-size--heading-two: 26px;--gld-font-size--heading-three: 20px;--gld-font-size--normal: 16px;--gld-font-size--small: 12px;--gld-font-size--tiny: 8px;--gld-font--poppins: \"Poppins\", sans-serif;--gld-radius--z: 0;--gld-radius--xxxs: 4px;--gld-radius--xxs: 6px;--gld-radius--xs: 8px;--gld-radius--s: 12px;--gld-radius--m: 16px;--gld-radius--l: 24px;--gld-radius--xl: 32px;--gld-radius--xxl: 40px;--gld-spacing--z: 0;--gld-spacing--xxxs: 4px;--gld-spacing--xxs: 8px;--gld-spacing--xs: 12px;--gld-spacing--s: 16px;--gld-spacing--m: 24px;--gld-spacing--l: 32px;--gld-spacing--xl: 48px;--gld-spacing--xxl: 70px;--gld-zindex--one: 1000;--gld-zindex--two: 2000;--gld-zindex--three: 3000;--gld-zindex--four: 4000;--gld-zindex--five: 5000;--gld-icon-size--large: 48px;--gld-icon-size--medium: 40px;--gld-icon-size--normal: 32px;--gld-icon-size--small: 24px;--gld-icon-size--tiny: 16px;--gld-red: #ef4444;--gld-red-transparent--005: rgba(239, 68, 68, .05);--gld-red-transparent--010: rgba(239, 68, 68, .1);--gld-red-transparent--020: rgba(239, 68, 68, .2);--gld-blue: #3c82f6;--gld-blue-transparent--005: rgba(60, 130, 246, .05);--gld-blue-transparent--010: rgba(60, 130, 246, .1);--gld-blue-transparent--020: rgba(60, 130, 246, .2);--gld-green: #12b981;--gld-green-transparent--005: rgba(18, 185, 129, .05);--gld-green-transparent--010: rgba(18, 185, 129, .1);--gld-green-transparent--020: rgba(18, 185, 129, .2);--gld-purple: #a855f7;--gld-purple-transparent--005: rgba(168, 85, 247, .05);--gld-purple-transparent--010: rgba(168, 85, 247, .1);--gld-purple-transparent--020: rgba(168, 85, 247, .2);--gld-purple-transparent--080: rgba(168, 85, 247, .8);--gld-mustard: #ebb305;--gld-mustard-transparent--005: rgba(235, 179, 5, .05);--gld-mustard-transparent--010: rgba(235, 179, 5, .1);--gld-mustard-transparent--020: rgba(235, 179, 5, .2);--gld-orange: #f97315;--gld-orange-transparent--005: rgba(249, 115, 21, .05);--gld-orange-transparent--010: rgba(249, 115, 21, .1);--gld-orange-transparent--020: rgba(249, 115, 21, .2);--gld-pink: #ec4899;--gld-pink-transparent--005: rgba(236, 72, 153, .05);--gld-pink-transparent--010: rgba(236, 72, 153, .1);--gld-pink-transparent--020: rgba(236, 72, 153, .2);--gld-gray: #c1c7e1;--gld-gray-transparent--010: rgba(193, 199, 225, .1);--gld-gray-transparent--020: rgba(193, 199, 225, .2);--gld-gray-transparent--030: rgba(193, 199, 225, .3);--gld-gray-transparent--040: rgba(193, 199, 225, .4);--gld-gray-transparent--050: rgba(193, 199, 225, .5);--gld-gray-transparent--060: rgba(193, 199, 225, .6);--gld-gray-transparent--070: rgba(193, 199, 225, .7);--gld-gray-transparent--080: rgba(193, 199, 225, .8);--gld-gray-transparent--090: rgba(193, 199, 225, .9);--gld-white: #fff;--gld-whitelight: #f9fafb;--gld-whitelight-transparent--010: rgba(249, 250, 251, .1);--gld-whitelight-transparent--020: rgba(249, 250, 251, .2);--gld-whitelight-transparent--030: rgba(249, 250, 251, .3);--gld-whitelight-transparent--040: rgba(249, 250, 251, .4);--gld-whitelight-transparent--050: rgba(249, 250, 251, .5);--gld-whitelight-transparent--060: rgba(249, 250, 251, .6);--gld-whitelight-transparent--070: rgba(249, 250, 251, .7);--gld-whitelight-transparent--080: rgba(249, 250, 251, .8);--gld-whitelight-transparent--090: rgba(249, 250, 251, .9);--gld-darkblue: #101827;--gld-darkblue-transparent--010: rgba(16, 24, 39, .1);--gld-darkblue-transparent--020: rgba(16, 24, 39, .2);--gld-darkblue-transparent--030: rgba(16, 24, 39, .3);--gld-darkblue-transparent--040: rgba(16, 24, 39, .4);--gld-darkblue-transparent--050: rgba(16, 24, 39, .5);--gld-darkblue-transparent--060: rgba(16, 24, 39, .6);--gld-darkblue-transparent--070: rgba(16, 24, 39, .7);--gld-darkblue-transparent--080: rgba(16, 24, 39, .8);--gld-darkblue-transparent--090: rgba(16, 24, 39, .9);--gld-border-size: 2px;--gld-animation-time--150: .15s;--gld-animation-time--250: .25s;--gld-animation-time--10s: 10s;--gld-line-height: 1.2;--gld-max-width: 1280px;--gld-navbar-height: 50px;--gld-sidebar-width: 250px}*,*:before,*:after{box-sizing:border-box;min-width:0}html,body{font-family:var(--font--poppins)}body{margin:0}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin:0}p{text-wrap:pretty;margin:0}body.theme--light{color-scheme:light;--gld-foreground-color: var(--gld-darkblue);--gld-background-color: var(--gld-whitelight)}body.theme--dark{color-scheme:dark;--gld-foreground-color: var(--gld-whitelight);--gld-background-color: var(--gld-darkblue)}body.theme--system{color-scheme:light dark;--gld-foreground-color: light-dark(var(--gld-darkblue), var(--gld-whitelight));--gld-background-color: light-dark(var(--gld-whitelight), var(--gld-darkblue))}.input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-height: 40px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input input{width:100%;min-width:var(--gld-min-with);height:var(--gld-height);padding:var(--gld-spacing--xxs);padding-right:var(--gld-spacing--m);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input input:focus{--gld-border-color: var(--gld-blue)}.input input::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:var(--gld-spacing--xxs);color:var(--gld-color);-webkit-user-select:none;user-select:none;will-change:transform,color;transition:transform var(--gld-animation-time) ease,color var(--gld-animation-time) ease-in-out;cursor:pointer}.input-icon--animated{animation:rotate 1s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.input-icon--rotated{transform:rotate(180deg)}.select{--gld-background: light-dark(var(--gld-whitelight), var(--gld-darkblue));--gld-shadow: light-dark(var(--gld-gray-transparent--040), var(--gld-gray-transparent--020));--gld-height: 40px;--gld-option-items: 0;--gld-option-height: 40px;--gld-animation-time: var(--gld-animation-time--150);--gld-padding: var(--gld-spacing--xxxs);--gld-radius: var(--gld-radius--xxs);position:relative;background:transparent}.select-menu{position:absolute;z-index:1;top:calc(var(--gld-height) + 22px);left:0;height:0;padding:0;display:grid;grid-template-columns:1fr;background:var(--gld-background);box-shadow:inset 0 0 0 var(--gld-border-size) var(--gld-shadow);border-radius:var(--gld-radius);min-width:100%;max-width:100%;max-height:calc(var(--gld-option-height) * 5);overflow-y:auto;will-change:height,padding;transition:var(--gld-animation-time) height ease-in-out,var(--gld-animation-time) padding ease-in-out;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020)) transparent;scroll-behavior:smooth}.select-menu::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.select-menu::-webkit-scrollbar-track{background:transparent}.select-menu::-webkit-scrollbar-thumb{background:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.select-menu::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gld-gray-transparent--060),var(--gld-gray-transparent--040))}.select-menu--opened{height:calc(var(--gld-option-height) * var(--gld-option-items) + var(--gld-padding) * 2);padding:var(--gld-padding)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "gld-icon", inputs: ["icon", "size", "space", "moveTopToBottom", "moveLeftToRight", "disabled"], outputs: ["clicked"] }, { kind: "component", type: InputErrorComponent, selector: "gld-input-error", inputs: ["errors", "border"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "selectOptionChildren", predicate: SelectOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["selectElement"], descendants: true, isSignal: true }], ngImport: i0, template: "\r\n@let errors = control().invalid && (control().dirty || control().touched);\r\n@let disabled = control().disabled || (control().pending && control().disabled);\r\n\r\n<section #selectElement class=\"select\">\r\n\t<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\r\n\t\t<!-- Label -->\r\n\t\t@if (label()) {\r\n\t\t\t<label [for]=\"name()\">\r\n\t\t\t\t{{ label() }}\r\n\t\t\t</label>\r\n\t\t}\r\n\t\t<!-- Input -->\r\n\t\t<input\r\n\t\t\ttype=\"text\"\r\n\t\t\tid=\"input-select-{{ name() }}\"\r\n\t\t\t[tabindex]=\"disabled ? '-1' : '0'\"\r\n\t\t\t[name]=\"name()\"\r\n\t\t\t[placeholder]=\"placeholder()\"\r\n\t\t\t[formControl]=\"innerControl()\"\r\n\t\t\t(focus)=\"onFocus()\"\r\n\t\t\t(blur)=\"onBlur()\"\r\n\t\t\t(keyup.escape)=\"onBlur()\" />\r\n\r\n\t\t<!-- Suffix -->\r\n\t\t<ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\r\n\r\n\t\t<!-- Menu -->\r\n\t\t<ng-container [ngTemplateOutlet]=\"menuTemplate\" />\r\n\t</section>\r\n\t<!-- Errors -->\r\n\t@if (errors) {\r\n\t\t<ng-content select=\"gld-input-error\">\r\n\t\t\t<gld-input-error [errors]=\"control().errors\" />\r\n\t\t</ng-content>\r\n\t} @else {\r\n\t\t<!-- Hint -->\r\n\t\t<ng-content select=\"gld-input-hint\" />\r\n\t}\r\n</section>\r\n\r\n<!-- Menu Template -->\r\n<ng-template #menuTemplate>\r\n\t<section class=\"select-menu\" [class.select-menu--opened]=\"isMenuOpen()\">\r\n\t\t<ng-content select=\"gld-select-option\" />\r\n\t</section>\r\n</ng-template>\r\n\r\n<!-- Suffix Template -->\r\n<ng-template #suffixTemplate>\r\n\t@if (control().pending) {\r\n\t\t<gld-icon\r\n\t\t\tsize=\"small\"\r\n\t\t\tclass=\"input-icon input-icon--animated\"\r\n\t\t\t[class.input-icon--error]=\"errors\"\r\n\t\t\t[icon]=\"Icons.loader4Fill\"\r\n\t\t\t[disabled]=\"disabled\" />\r\n\t} @else {\r\n\t\t<gld-icon\r\n\t\t\tsize=\"small\"\r\n\t\t\tclass=\"input-icon\"\r\n\t\t\t[class.input-icon--rotated]=\"isMenuOpen()\"\r\n\t\t\t[class.input-icon--error]=\"errors\"\r\n\t\t\t[icon]=\"Icons.arrowDownSLine\"\r\n\t\t\t[disabled]=\"disabled\"\r\n\t\t\t(clicked)=\"arrowIconClicked()\" />\r\n\t}\r\n</ng-template>\r\n\r\n<!-- <h3>Debugging</h3> -->\r\n<!-- <section>errors: {{ control().errors | json }}</section> -->\r\n<!-- <section>errors: {{ errors }}</section> -->\r\n<!-- <section>invalid: {{ control().invalid }}</section> -->\r\n<!-- <section>dirty: {{ control().dirty }}</section> -->\r\n<!-- <section>touched: {{ control().touched }}</section> -->\r\n<!-- <section>disable: {{ control().disabled }}</section> -->\r\n<!-- <section>status: {{ control().status }}</section> -->\r\n\r\n<!-- Suffix Template -->\r\n<ng-template #suffixTemplate>\r\n\t<gld-icon\r\n\t\tsize=\"small\"\r\n\t\tclass=\"input-icon\"\r\n\t\t[class.input-icon--error]=\"errors\"\r\n\t\t[icon]=\"Icons.arrowDownSLine\" />\r\n</ng-template>\r\n\r\n<!-- <h3>Debugging</h3> -->\r\n<!-- <section>errors: {{ control().errors | json }}</section> -->\r\n<!-- <section>errors: {{ errors }}</section> -->\r\n<!-- <section>invalid: {{ control().invalid }}</section> -->\r\n<!-- <section>dirty: {{ control().dirty }}</section> -->\r\n<!-- <section>touched: {{ control().touched }}</section> -->\r\n<!-- <section>disable: {{ control().disabled }}</section> -->\r\n", styles: ["@charset \"UTF-8\";:root{--gld-break-point--zero: 0;--gld-break-point--mobile: 320px;--gld-break-point--landscape: 576px;--gld-break-point--tablet: 768px;--gld-break-point--desktop: 1080px;--gld-break-point--extra-desktop: 1280px;--gld-font-size--heading-one: 36px;--gld-font-size--heading-two: 26px;--gld-font-size--heading-three: 20px;--gld-font-size--normal: 16px;--gld-font-size--small: 12px;--gld-font-size--tiny: 8px;--gld-font--poppins: \"Poppins\", sans-serif;--gld-radius--z: 0;--gld-radius--xxxs: 4px;--gld-radius--xxs: 6px;--gld-radius--xs: 8px;--gld-radius--s: 12px;--gld-radius--m: 16px;--gld-radius--l: 24px;--gld-radius--xl: 32px;--gld-radius--xxl: 40px;--gld-spacing--z: 0;--gld-spacing--xxxs: 4px;--gld-spacing--xxs: 8px;--gld-spacing--xs: 12px;--gld-spacing--s: 16px;--gld-spacing--m: 24px;--gld-spacing--l: 32px;--gld-spacing--xl: 48px;--gld-spacing--xxl: 70px;--gld-zindex--one: 1000;--gld-zindex--two: 2000;--gld-zindex--three: 3000;--gld-zindex--four: 4000;--gld-zindex--five: 5000;--gld-icon-size--large: 48px;--gld-icon-size--medium: 40px;--gld-icon-size--normal: 32px;--gld-icon-size--small: 24px;--gld-icon-size--tiny: 16px;--gld-red: #ef4444;--gld-red-transparent--005: rgba(239, 68, 68, .05);--gld-red-transparent--010: rgba(239, 68, 68, .1);--gld-red-transparent--020: rgba(239, 68, 68, .2);--gld-blue: #3c82f6;--gld-blue-transparent--005: rgba(60, 130, 246, .05);--gld-blue-transparent--010: rgba(60, 130, 246, .1);--gld-blue-transparent--020: rgba(60, 130, 246, .2);--gld-green: #12b981;--gld-green-transparent--005: rgba(18, 185, 129, .05);--gld-green-transparent--010: rgba(18, 185, 129, .1);--gld-green-transparent--020: rgba(18, 185, 129, .2);--gld-purple: #a855f7;--gld-purple-transparent--005: rgba(168, 85, 247, .05);--gld-purple-transparent--010: rgba(168, 85, 247, .1);--gld-purple-transparent--020: rgba(168, 85, 247, .2);--gld-purple-transparent--080: rgba(168, 85, 247, .8);--gld-mustard: #ebb305;--gld-mustard-transparent--005: rgba(235, 179, 5, .05);--gld-mustard-transparent--010: rgba(235, 179, 5, .1);--gld-mustard-transparent--020: rgba(235, 179, 5, .2);--gld-orange: #f97315;--gld-orange-transparent--005: rgba(249, 115, 21, .05);--gld-orange-transparent--010: rgba(249, 115, 21, .1);--gld-orange-transparent--020: rgba(249, 115, 21, .2);--gld-pink: #ec4899;--gld-pink-transparent--005: rgba(236, 72, 153, .05);--gld-pink-transparent--010: rgba(236, 72, 153, .1);--gld-pink-transparent--020: rgba(236, 72, 153, .2);--gld-pink-transparent--040: rgba(236, 72, 153, .4);--gld-pink-transparent--060: rgba(236, 72, 153, .6);--gld-pink-transparent--080: rgba(236, 72, 153, .8);--gld-gray: #c1c7e1;--gld-gray-transparent--010: rgba(193, 199, 225, .1);--gld-gray-transparent--020: rgba(193, 199, 225, .2);--gld-gray-transparent--030: rgba(193, 199, 225, .3);--gld-gray-transparent--040: rgba(193, 199, 225, .4);--gld-gray-transparent--050: rgba(193, 199, 225, .5);--gld-gray-transparent--060: rgba(193, 199, 225, .6);--gld-gray-transparent--070: rgba(193, 199, 225, .7);--gld-gray-transparent--080: rgba(193, 199, 225, .8);--gld-gray-transparent--090: rgba(193, 199, 225, .9);--gld-white: #fff;--gld-whitelight: #f9fafb;--gld-whitelight-transparent--010: rgba(249, 250, 251, .1);--gld-whitelight-transparent--020: rgba(249, 250, 251, .2);--gld-whitelight-transparent--030: rgba(249, 250, 251, .3);--gld-whitelight-transparent--040: rgba(249, 250, 251, .4);--gld-whitelight-transparent--050: rgba(249, 250, 251, .5);--gld-whitelight-transparent--060: rgba(249, 250, 251, .6);--gld-whitelight-transparent--070: rgba(249, 250, 251, .7);--gld-whitelight-transparent--080: rgba(249, 250, 251, .8);--gld-whitelight-transparent--090: rgba(249, 250, 251, .9);--gld-darkblue: #101827;--gld-darkblue-transparent--010: rgba(16, 24, 39, .1);--gld-darkblue-transparent--020: rgba(16, 24, 39, .2);--gld-darkblue-transparent--030: rgba(16, 24, 39, .3);--gld-darkblue-transparent--040: rgba(16, 24, 39, .4);--gld-darkblue-transparent--050: rgba(16, 24, 39, .5);--gld-darkblue-transparent--060: rgba(16, 24, 39, .6);--gld-darkblue-transparent--070: rgba(16, 24, 39, .7);--gld-darkblue-transparent--080: rgba(16, 24, 39, .8);--gld-darkblue-transparent--090: rgba(16, 24, 39, .9);--gld-border-size: 2px;--gld-animation-time--150: .15s;--gld-animation-time--250: .25s;--gld-animation-time--10s: 10s;--gld-line-height: 1.2;--gld-max-width: 1280px;--gld-navbar-height: 50px;--gld-sidebar-width: 250px}*,*:before,*:after{box-sizing:border-box;min-width:0}html,body{font-family:var(--gld-font--poppins)}body{margin:0}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin:0}p{text-wrap:pretty;margin:0}body.theme--light{color-scheme:light;--gld-foreground-color: var(--gld-darkblue);--gld-background-color: var(--gld-whitelight)}body.theme--dark{color-scheme:dark;--gld-foreground-color: var(--gld-whitelight);--gld-background-color: var(--gld-darkblue)}body.theme--system{color-scheme:light dark;--gld-foreground-color: light-dark(var(--gld-darkblue), var(--gld-whitelight));--gld-background-color: light-dark(var(--gld-whitelight), var(--gld-darkblue))}.input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-height: 40px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input input{width:100%;min-width:var(--gld-min-with);height:var(--gld-height);padding:var(--gld-spacing--xxs);padding-right:var(--gld-spacing--m);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input input:focus{--gld-border-color: var(--gld-blue)}.input input::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:var(--gld-spacing--xxs);color:var(--gld-color);-webkit-user-select:none;user-select:none;will-change:transform,color;transition:transform var(--gld-animation-time) ease,color var(--gld-animation-time) ease-in-out;cursor:pointer}.input-icon--animated{animation:rotate 1s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.input-icon--rotated{transform:rotate(180deg)}.select{--gld-background: light-dark(var(--gld-whitelight), var(--gld-darkblue));--gld-shadow: light-dark(var(--gld-gray-transparent--040), var(--gld-gray-transparent--020));--gld-height: 40px;--gld-option-items: 0;--gld-option-height: 40px;--gld-animation-time: var(--gld-animation-time--150);--gld-padding: var(--gld-spacing--xxxs);--gld-radius: var(--gld-radius--xxs);position:relative;background:transparent}.select-menu{position:absolute;z-index:1;top:calc(var(--gld-height) + 22px);left:0;height:0;padding:0;display:grid;grid-template-columns:1fr;background:var(--gld-background);box-shadow:inset 0 0 0 var(--gld-border-size) var(--gld-shadow);border-radius:var(--gld-radius);min-width:100%;max-width:100%;max-height:calc(var(--gld-option-height) * 5);overflow-y:auto;will-change:height,padding;transition:var(--gld-animation-time) height ease-in-out,var(--gld-animation-time) padding ease-in-out;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020)) transparent;scroll-behavior:smooth}.select-menu::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.select-menu::-webkit-scrollbar-track{background:transparent}.select-menu::-webkit-scrollbar-thumb{background:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.select-menu::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gld-gray-transparent--060),var(--gld-gray-transparent--040))}.select-menu--opened{height:calc(var(--gld-option-height) * var(--gld-option-items) + var(--gld-padding) * 2);padding:var(--gld-padding)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "gld-icon", inputs: ["icon", "size", "space", "moveTopToBottom", "moveLeftToRight", "disabled"], outputs: ["clicked"] }, { kind: "component", type: InputErrorComponent, selector: "gld-input-error", inputs: ["errors", "border"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -1167,7 +1167,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
                             useExisting: forwardRef(() => SelectComponent),
                             multi: true,
                         },
-                    ], template: "\r\n@let errors = control().invalid && (control().dirty || control().touched);\r\n@let disabled = control().disabled || (control().pending && control().disabled);\r\n\r\n<section #selectElement class=\"select\">\r\n\t<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\r\n\t\t<!-- Label -->\r\n\t\t@if (label()) {\r\n\t\t\t<label [for]=\"name()\">\r\n\t\t\t\t{{ label() }}\r\n\t\t\t</label>\r\n\t\t}\r\n\t\t<!-- Input -->\r\n\t\t<input\r\n\t\t\ttype=\"text\"\r\n\t\t\tid=\"input-select-{{ name() }}\"\r\n\t\t\t[tabindex]=\"disabled ? '-1' : '0'\"\r\n\t\t\t[name]=\"name()\"\r\n\t\t\t[placeholder]=\"placeholder()\"\r\n\t\t\t[formControl]=\"innerControl()\"\r\n\t\t\t(focus)=\"onFocus()\"\r\n\t\t\t(blur)=\"onBlur()\"\r\n\t\t\t(keyup.escape)=\"onBlur()\" />\r\n\r\n\t\t<!-- Suffix -->\r\n\t\t<ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\r\n\r\n\t\t<!-- Menu -->\r\n\t\t<ng-container [ngTemplateOutlet]=\"menuTemplate\" />\r\n\t</section>\r\n\t<!-- Errors -->\r\n\t@if (errors) {\r\n\t\t<ng-content select=\"gld-input-error\">\r\n\t\t\t<gld-input-error [errors]=\"control().errors\" />\r\n\t\t</ng-content>\r\n\t} @else {\r\n\t\t<!-- Hint -->\r\n\t\t<ng-content select=\"gld-input-hint\" />\r\n\t}\r\n</section>\r\n\r\n<!-- Menu Template -->\r\n<ng-template #menuTemplate>\r\n\t<section class=\"select-menu\" [class.select-menu--opened]=\"isMenuOpen()\">\r\n\t\t<ng-content select=\"gld-select-option\" />\r\n\t</section>\r\n</ng-template>\r\n\r\n<!-- Suffix Template -->\r\n<ng-template #suffixTemplate>\r\n\t@if (control().pending) {\r\n\t\t<gld-icon\r\n\t\t\tsize=\"small\"\r\n\t\t\tclass=\"input-icon input-icon--animated\"\r\n\t\t\t[class.input-icon--error]=\"errors\"\r\n\t\t\t[icon]=\"Icons.loader4Fill\"\r\n\t\t\t[disabled]=\"disabled\" />\r\n\t} @else {\r\n\t\t<gld-icon\r\n\t\t\tsize=\"small\"\r\n\t\t\tclass=\"input-icon\"\r\n\t\t\t[class.input-icon--rotated]=\"isMenuOpen()\"\r\n\t\t\t[class.input-icon--error]=\"errors\"\r\n\t\t\t[icon]=\"Icons.arrowDownSLine\"\r\n\t\t\t[disabled]=\"disabled\"\r\n\t\t\t(clicked)=\"arrowIconClicked()\" />\r\n\t}\r\n</ng-template>\r\n\r\n<!-- <h3>Debugging</h3> -->\r\n<!-- <section>errors: {{ control().errors | json }}</section> -->\r\n<!-- <section>errors: {{ errors }}</section> -->\r\n<!-- <section>invalid: {{ control().invalid }}</section> -->\r\n<!-- <section>dirty: {{ control().dirty }}</section> -->\r\n<!-- <section>touched: {{ control().touched }}</section> -->\r\n<!-- <section>disable: {{ control().disabled }}</section> -->\r\n<!-- <section>status: {{ control().status }}</section> -->\r\n\r\n<!-- Suffix Template -->\r\n<ng-template #suffixTemplate>\r\n\t<gld-icon\r\n\t\tsize=\"small\"\r\n\t\tclass=\"input-icon\"\r\n\t\t[class.input-icon--error]=\"errors\"\r\n\t\t[icon]=\"Icons.arrowDownSLine\" />\r\n</ng-template>\r\n\r\n<!-- <h3>Debugging</h3> -->\r\n<!-- <section>errors: {{ control().errors | json }}</section> -->\r\n<!-- <section>errors: {{ errors }}</section> -->\r\n<!-- <section>invalid: {{ control().invalid }}</section> -->\r\n<!-- <section>dirty: {{ control().dirty }}</section> -->\r\n<!-- <section>touched: {{ control().touched }}</section> -->\r\n<!-- <section>disable: {{ control().disabled }}</section> -->\r\n", styles: ["@charset \"UTF-8\";:root{--gld-break-point--zero: 0;--gld-break-point--mobile: 320px;--gld-break-point--landscape: 576px;--gld-break-point--tablet: 768px;--gld-break-point--desktop: 1080px;--gld-break-point--extra-desktop: 1280px;--gld-font-size--heading-one: 36px;--gld-font-size--heading-two: 26px;--gld-font-size--heading-three: 20px;--gld-font-size--normal: 16px;--gld-font-size--small: 12px;--gld-font-size--tiny: 8px;--gld-font--poppins: \"Poppins\", sans-serif;--gld-radius--z: 0;--gld-radius--xxxs: 4px;--gld-radius--xxs: 6px;--gld-radius--xs: 8px;--gld-radius--s: 12px;--gld-radius--m: 16px;--gld-radius--l: 24px;--gld-radius--xl: 32px;--gld-radius--xxl: 40px;--gld-spacing--z: 0;--gld-spacing--xxxs: 4px;--gld-spacing--xxs: 8px;--gld-spacing--xs: 12px;--gld-spacing--s: 16px;--gld-spacing--m: 24px;--gld-spacing--l: 32px;--gld-spacing--xl: 48px;--gld-spacing--xxl: 70px;--gld-zindex--one: 1000;--gld-zindex--two: 2000;--gld-zindex--three: 3000;--gld-zindex--four: 4000;--gld-zindex--five: 5000;--gld-icon-size--large: 48px;--gld-icon-size--medium: 40px;--gld-icon-size--normal: 32px;--gld-icon-size--small: 24px;--gld-icon-size--tiny: 16px;--gld-red: #ef4444;--gld-red-transparent--005: rgba(239, 68, 68, .05);--gld-red-transparent--010: rgba(239, 68, 68, .1);--gld-red-transparent--020: rgba(239, 68, 68, .2);--gld-blue: #3c82f6;--gld-blue-transparent--005: rgba(60, 130, 246, .05);--gld-blue-transparent--010: rgba(60, 130, 246, .1);--gld-blue-transparent--020: rgba(60, 130, 246, .2);--gld-green: #12b981;--gld-green-transparent--005: rgba(18, 185, 129, .05);--gld-green-transparent--010: rgba(18, 185, 129, .1);--gld-green-transparent--020: rgba(18, 185, 129, .2);--gld-purple: #a855f7;--gld-purple-transparent--005: rgba(168, 85, 247, .05);--gld-purple-transparent--010: rgba(168, 85, 247, .1);--gld-purple-transparent--020: rgba(168, 85, 247, .2);--gld-purple-transparent--080: rgba(168, 85, 247, .8);--gld-mustard: #ebb305;--gld-mustard-transparent--005: rgba(235, 179, 5, .05);--gld-mustard-transparent--010: rgba(235, 179, 5, .1);--gld-mustard-transparent--020: rgba(235, 179, 5, .2);--gld-orange: #f97315;--gld-orange-transparent--005: rgba(249, 115, 21, .05);--gld-orange-transparent--010: rgba(249, 115, 21, .1);--gld-orange-transparent--020: rgba(249, 115, 21, .2);--gld-pink: #ec4899;--gld-pink-transparent--005: rgba(236, 72, 153, .05);--gld-pink-transparent--010: rgba(236, 72, 153, .1);--gld-pink-transparent--020: rgba(236, 72, 153, .2);--gld-gray: #c1c7e1;--gld-gray-transparent--010: rgba(193, 199, 225, .1);--gld-gray-transparent--020: rgba(193, 199, 225, .2);--gld-gray-transparent--030: rgba(193, 199, 225, .3);--gld-gray-transparent--040: rgba(193, 199, 225, .4);--gld-gray-transparent--050: rgba(193, 199, 225, .5);--gld-gray-transparent--060: rgba(193, 199, 225, .6);--gld-gray-transparent--070: rgba(193, 199, 225, .7);--gld-gray-transparent--080: rgba(193, 199, 225, .8);--gld-gray-transparent--090: rgba(193, 199, 225, .9);--gld-white: #fff;--gld-whitelight: #f9fafb;--gld-whitelight-transparent--010: rgba(249, 250, 251, .1);--gld-whitelight-transparent--020: rgba(249, 250, 251, .2);--gld-whitelight-transparent--030: rgba(249, 250, 251, .3);--gld-whitelight-transparent--040: rgba(249, 250, 251, .4);--gld-whitelight-transparent--050: rgba(249, 250, 251, .5);--gld-whitelight-transparent--060: rgba(249, 250, 251, .6);--gld-whitelight-transparent--070: rgba(249, 250, 251, .7);--gld-whitelight-transparent--080: rgba(249, 250, 251, .8);--gld-whitelight-transparent--090: rgba(249, 250, 251, .9);--gld-darkblue: #101827;--gld-darkblue-transparent--010: rgba(16, 24, 39, .1);--gld-darkblue-transparent--020: rgba(16, 24, 39, .2);--gld-darkblue-transparent--030: rgba(16, 24, 39, .3);--gld-darkblue-transparent--040: rgba(16, 24, 39, .4);--gld-darkblue-transparent--050: rgba(16, 24, 39, .5);--gld-darkblue-transparent--060: rgba(16, 24, 39, .6);--gld-darkblue-transparent--070: rgba(16, 24, 39, .7);--gld-darkblue-transparent--080: rgba(16, 24, 39, .8);--gld-darkblue-transparent--090: rgba(16, 24, 39, .9);--gld-border-size: 2px;--gld-animation-time--150: .15s;--gld-animation-time--250: .25s;--gld-animation-time--10s: 10s;--gld-line-height: 1.2;--gld-max-width: 1280px;--gld-navbar-height: 50px;--gld-sidebar-width: 250px}*,*:before,*:after{box-sizing:border-box;min-width:0}html,body{font-family:var(--font--poppins)}body{margin:0}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin:0}p{text-wrap:pretty;margin:0}body.theme--light{color-scheme:light;--gld-foreground-color: var(--gld-darkblue);--gld-background-color: var(--gld-whitelight)}body.theme--dark{color-scheme:dark;--gld-foreground-color: var(--gld-whitelight);--gld-background-color: var(--gld-darkblue)}body.theme--system{color-scheme:light dark;--gld-foreground-color: light-dark(var(--gld-darkblue), var(--gld-whitelight));--gld-background-color: light-dark(var(--gld-whitelight), var(--gld-darkblue))}.input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-height: 40px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input input{width:100%;min-width:var(--gld-min-with);height:var(--gld-height);padding:var(--gld-spacing--xxs);padding-right:var(--gld-spacing--m);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input input:focus{--gld-border-color: var(--gld-blue)}.input input::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:var(--gld-spacing--xxs);color:var(--gld-color);-webkit-user-select:none;user-select:none;will-change:transform,color;transition:transform var(--gld-animation-time) ease,color var(--gld-animation-time) ease-in-out;cursor:pointer}.input-icon--animated{animation:rotate 1s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.input-icon--rotated{transform:rotate(180deg)}.select{--gld-background: light-dark(var(--gld-whitelight), var(--gld-darkblue));--gld-shadow: light-dark(var(--gld-gray-transparent--040), var(--gld-gray-transparent--020));--gld-height: 40px;--gld-option-items: 0;--gld-option-height: 40px;--gld-animation-time: var(--gld-animation-time--150);--gld-padding: var(--gld-spacing--xxxs);--gld-radius: var(--gld-radius--xxs);position:relative;background:transparent}.select-menu{position:absolute;z-index:1;top:calc(var(--gld-height) + 22px);left:0;height:0;padding:0;display:grid;grid-template-columns:1fr;background:var(--gld-background);box-shadow:inset 0 0 0 var(--gld-border-size) var(--gld-shadow);border-radius:var(--gld-radius);min-width:100%;max-width:100%;max-height:calc(var(--gld-option-height) * 5);overflow-y:auto;will-change:height,padding;transition:var(--gld-animation-time) height ease-in-out,var(--gld-animation-time) padding ease-in-out;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020)) transparent;scroll-behavior:smooth}.select-menu::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.select-menu::-webkit-scrollbar-track{background:transparent}.select-menu::-webkit-scrollbar-thumb{background:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.select-menu::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gld-gray-transparent--060),var(--gld-gray-transparent--040))}.select-menu--opened{height:calc(var(--gld-option-height) * var(--gld-option-items) + var(--gld-padding) * 2);padding:var(--gld-padding)}\n"] }]
+                    ], template: "\r\n@let errors = control().invalid && (control().dirty || control().touched);\r\n@let disabled = control().disabled || (control().pending && control().disabled);\r\n\r\n<section #selectElement class=\"select\">\r\n\t<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\r\n\t\t<!-- Label -->\r\n\t\t@if (label()) {\r\n\t\t\t<label [for]=\"name()\">\r\n\t\t\t\t{{ label() }}\r\n\t\t\t</label>\r\n\t\t}\r\n\t\t<!-- Input -->\r\n\t\t<input\r\n\t\t\ttype=\"text\"\r\n\t\t\tid=\"input-select-{{ name() }}\"\r\n\t\t\t[tabindex]=\"disabled ? '-1' : '0'\"\r\n\t\t\t[name]=\"name()\"\r\n\t\t\t[placeholder]=\"placeholder()\"\r\n\t\t\t[formControl]=\"innerControl()\"\r\n\t\t\t(focus)=\"onFocus()\"\r\n\t\t\t(blur)=\"onBlur()\"\r\n\t\t\t(keyup.escape)=\"onBlur()\" />\r\n\r\n\t\t<!-- Suffix -->\r\n\t\t<ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\r\n\r\n\t\t<!-- Menu -->\r\n\t\t<ng-container [ngTemplateOutlet]=\"menuTemplate\" />\r\n\t</section>\r\n\t<!-- Errors -->\r\n\t@if (errors) {\r\n\t\t<ng-content select=\"gld-input-error\">\r\n\t\t\t<gld-input-error [errors]=\"control().errors\" />\r\n\t\t</ng-content>\r\n\t} @else {\r\n\t\t<!-- Hint -->\r\n\t\t<ng-content select=\"gld-input-hint\" />\r\n\t}\r\n</section>\r\n\r\n<!-- Menu Template -->\r\n<ng-template #menuTemplate>\r\n\t<section class=\"select-menu\" [class.select-menu--opened]=\"isMenuOpen()\">\r\n\t\t<ng-content select=\"gld-select-option\" />\r\n\t</section>\r\n</ng-template>\r\n\r\n<!-- Suffix Template -->\r\n<ng-template #suffixTemplate>\r\n\t@if (control().pending) {\r\n\t\t<gld-icon\r\n\t\t\tsize=\"small\"\r\n\t\t\tclass=\"input-icon input-icon--animated\"\r\n\t\t\t[class.input-icon--error]=\"errors\"\r\n\t\t\t[icon]=\"Icons.loader4Fill\"\r\n\t\t\t[disabled]=\"disabled\" />\r\n\t} @else {\r\n\t\t<gld-icon\r\n\t\t\tsize=\"small\"\r\n\t\t\tclass=\"input-icon\"\r\n\t\t\t[class.input-icon--rotated]=\"isMenuOpen()\"\r\n\t\t\t[class.input-icon--error]=\"errors\"\r\n\t\t\t[icon]=\"Icons.arrowDownSLine\"\r\n\t\t\t[disabled]=\"disabled\"\r\n\t\t\t(clicked)=\"arrowIconClicked()\" />\r\n\t}\r\n</ng-template>\r\n\r\n<!-- <h3>Debugging</h3> -->\r\n<!-- <section>errors: {{ control().errors | json }}</section> -->\r\n<!-- <section>errors: {{ errors }}</section> -->\r\n<!-- <section>invalid: {{ control().invalid }}</section> -->\r\n<!-- <section>dirty: {{ control().dirty }}</section> -->\r\n<!-- <section>touched: {{ control().touched }}</section> -->\r\n<!-- <section>disable: {{ control().disabled }}</section> -->\r\n<!-- <section>status: {{ control().status }}</section> -->\r\n\r\n<!-- Suffix Template -->\r\n<ng-template #suffixTemplate>\r\n\t<gld-icon\r\n\t\tsize=\"small\"\r\n\t\tclass=\"input-icon\"\r\n\t\t[class.input-icon--error]=\"errors\"\r\n\t\t[icon]=\"Icons.arrowDownSLine\" />\r\n</ng-template>\r\n\r\n<!-- <h3>Debugging</h3> -->\r\n<!-- <section>errors: {{ control().errors | json }}</section> -->\r\n<!-- <section>errors: {{ errors }}</section> -->\r\n<!-- <section>invalid: {{ control().invalid }}</section> -->\r\n<!-- <section>dirty: {{ control().dirty }}</section> -->\r\n<!-- <section>touched: {{ control().touched }}</section> -->\r\n<!-- <section>disable: {{ control().disabled }}</section> -->\r\n", styles: ["@charset \"UTF-8\";:root{--gld-break-point--zero: 0;--gld-break-point--mobile: 320px;--gld-break-point--landscape: 576px;--gld-break-point--tablet: 768px;--gld-break-point--desktop: 1080px;--gld-break-point--extra-desktop: 1280px;--gld-font-size--heading-one: 36px;--gld-font-size--heading-two: 26px;--gld-font-size--heading-three: 20px;--gld-font-size--normal: 16px;--gld-font-size--small: 12px;--gld-font-size--tiny: 8px;--gld-font--poppins: \"Poppins\", sans-serif;--gld-radius--z: 0;--gld-radius--xxxs: 4px;--gld-radius--xxs: 6px;--gld-radius--xs: 8px;--gld-radius--s: 12px;--gld-radius--m: 16px;--gld-radius--l: 24px;--gld-radius--xl: 32px;--gld-radius--xxl: 40px;--gld-spacing--z: 0;--gld-spacing--xxxs: 4px;--gld-spacing--xxs: 8px;--gld-spacing--xs: 12px;--gld-spacing--s: 16px;--gld-spacing--m: 24px;--gld-spacing--l: 32px;--gld-spacing--xl: 48px;--gld-spacing--xxl: 70px;--gld-zindex--one: 1000;--gld-zindex--two: 2000;--gld-zindex--three: 3000;--gld-zindex--four: 4000;--gld-zindex--five: 5000;--gld-icon-size--large: 48px;--gld-icon-size--medium: 40px;--gld-icon-size--normal: 32px;--gld-icon-size--small: 24px;--gld-icon-size--tiny: 16px;--gld-red: #ef4444;--gld-red-transparent--005: rgba(239, 68, 68, .05);--gld-red-transparent--010: rgba(239, 68, 68, .1);--gld-red-transparent--020: rgba(239, 68, 68, .2);--gld-blue: #3c82f6;--gld-blue-transparent--005: rgba(60, 130, 246, .05);--gld-blue-transparent--010: rgba(60, 130, 246, .1);--gld-blue-transparent--020: rgba(60, 130, 246, .2);--gld-green: #12b981;--gld-green-transparent--005: rgba(18, 185, 129, .05);--gld-green-transparent--010: rgba(18, 185, 129, .1);--gld-green-transparent--020: rgba(18, 185, 129, .2);--gld-purple: #a855f7;--gld-purple-transparent--005: rgba(168, 85, 247, .05);--gld-purple-transparent--010: rgba(168, 85, 247, .1);--gld-purple-transparent--020: rgba(168, 85, 247, .2);--gld-purple-transparent--080: rgba(168, 85, 247, .8);--gld-mustard: #ebb305;--gld-mustard-transparent--005: rgba(235, 179, 5, .05);--gld-mustard-transparent--010: rgba(235, 179, 5, .1);--gld-mustard-transparent--020: rgba(235, 179, 5, .2);--gld-orange: #f97315;--gld-orange-transparent--005: rgba(249, 115, 21, .05);--gld-orange-transparent--010: rgba(249, 115, 21, .1);--gld-orange-transparent--020: rgba(249, 115, 21, .2);--gld-pink: #ec4899;--gld-pink-transparent--005: rgba(236, 72, 153, .05);--gld-pink-transparent--010: rgba(236, 72, 153, .1);--gld-pink-transparent--020: rgba(236, 72, 153, .2);--gld-pink-transparent--040: rgba(236, 72, 153, .4);--gld-pink-transparent--060: rgba(236, 72, 153, .6);--gld-pink-transparent--080: rgba(236, 72, 153, .8);--gld-gray: #c1c7e1;--gld-gray-transparent--010: rgba(193, 199, 225, .1);--gld-gray-transparent--020: rgba(193, 199, 225, .2);--gld-gray-transparent--030: rgba(193, 199, 225, .3);--gld-gray-transparent--040: rgba(193, 199, 225, .4);--gld-gray-transparent--050: rgba(193, 199, 225, .5);--gld-gray-transparent--060: rgba(193, 199, 225, .6);--gld-gray-transparent--070: rgba(193, 199, 225, .7);--gld-gray-transparent--080: rgba(193, 199, 225, .8);--gld-gray-transparent--090: rgba(193, 199, 225, .9);--gld-white: #fff;--gld-whitelight: #f9fafb;--gld-whitelight-transparent--010: rgba(249, 250, 251, .1);--gld-whitelight-transparent--020: rgba(249, 250, 251, .2);--gld-whitelight-transparent--030: rgba(249, 250, 251, .3);--gld-whitelight-transparent--040: rgba(249, 250, 251, .4);--gld-whitelight-transparent--050: rgba(249, 250, 251, .5);--gld-whitelight-transparent--060: rgba(249, 250, 251, .6);--gld-whitelight-transparent--070: rgba(249, 250, 251, .7);--gld-whitelight-transparent--080: rgba(249, 250, 251, .8);--gld-whitelight-transparent--090: rgba(249, 250, 251, .9);--gld-darkblue: #101827;--gld-darkblue-transparent--010: rgba(16, 24, 39, .1);--gld-darkblue-transparent--020: rgba(16, 24, 39, .2);--gld-darkblue-transparent--030: rgba(16, 24, 39, .3);--gld-darkblue-transparent--040: rgba(16, 24, 39, .4);--gld-darkblue-transparent--050: rgba(16, 24, 39, .5);--gld-darkblue-transparent--060: rgba(16, 24, 39, .6);--gld-darkblue-transparent--070: rgba(16, 24, 39, .7);--gld-darkblue-transparent--080: rgba(16, 24, 39, .8);--gld-darkblue-transparent--090: rgba(16, 24, 39, .9);--gld-border-size: 2px;--gld-animation-time--150: .15s;--gld-animation-time--250: .25s;--gld-animation-time--10s: 10s;--gld-line-height: 1.2;--gld-max-width: 1280px;--gld-navbar-height: 50px;--gld-sidebar-width: 250px}*,*:before,*:after{box-sizing:border-box;min-width:0}html,body{font-family:var(--gld-font--poppins)}body{margin:0}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin:0}p{text-wrap:pretty;margin:0}body.theme--light{color-scheme:light;--gld-foreground-color: var(--gld-darkblue);--gld-background-color: var(--gld-whitelight)}body.theme--dark{color-scheme:dark;--gld-foreground-color: var(--gld-whitelight);--gld-background-color: var(--gld-darkblue)}body.theme--system{color-scheme:light dark;--gld-foreground-color: light-dark(var(--gld-darkblue), var(--gld-whitelight));--gld-background-color: light-dark(var(--gld-whitelight), var(--gld-darkblue))}.input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-height: 40px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input input{width:100%;min-width:var(--gld-min-with);height:var(--gld-height);padding:var(--gld-spacing--xxs);padding-right:var(--gld-spacing--m);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input input:focus{--gld-border-color: var(--gld-blue)}.input input::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:var(--gld-spacing--xxs);color:var(--gld-color);-webkit-user-select:none;user-select:none;will-change:transform,color;transition:transform var(--gld-animation-time) ease,color var(--gld-animation-time) ease-in-out;cursor:pointer}.input-icon--animated{animation:rotate 1s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.input-icon--rotated{transform:rotate(180deg)}.select{--gld-background: light-dark(var(--gld-whitelight), var(--gld-darkblue));--gld-shadow: light-dark(var(--gld-gray-transparent--040), var(--gld-gray-transparent--020));--gld-height: 40px;--gld-option-items: 0;--gld-option-height: 40px;--gld-animation-time: var(--gld-animation-time--150);--gld-padding: var(--gld-spacing--xxxs);--gld-radius: var(--gld-radius--xxs);position:relative;background:transparent}.select-menu{position:absolute;z-index:1;top:calc(var(--gld-height) + 22px);left:0;height:0;padding:0;display:grid;grid-template-columns:1fr;background:var(--gld-background);box-shadow:inset 0 0 0 var(--gld-border-size) var(--gld-shadow);border-radius:var(--gld-radius);min-width:100%;max-width:100%;max-height:calc(var(--gld-option-height) * 5);overflow-y:auto;will-change:height,padding;transition:var(--gld-animation-time) height ease-in-out,var(--gld-animation-time) padding ease-in-out;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020)) transparent;scroll-behavior:smooth}.select-menu::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.select-menu::-webkit-scrollbar-track{background:transparent}.select-menu::-webkit-scrollbar-thumb{background:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.select-menu::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gld-gray-transparent--060),var(--gld-gray-transparent--040))}.select-menu--opened{height:calc(var(--gld-option-height) * var(--gld-option-items) + var(--gld-padding) * 2);padding:var(--gld-padding)}\n"] }]
         }], ctorParameters: () => [] });
 
 // Angular Imports
@@ -1408,11 +1408,11 @@ class TableComponent {
         }, {});
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: TableComponent, isStandalone: true, selector: "gld-table", inputs: { tableColumns: { classPropertyName: "tableColumns", publicName: "tableColumns", isSignal: true, isRequired: true, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, tableHeight: { classPropertyName: "tableHeight", publicName: "tableHeight", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selects: { classPropertyName: "selects", publicName: "selects", isSignal: true, isRequired: false, transformFunction: null }, selectsAll: { classPropertyName: "selectsAll", publicName: "selectsAll", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tableColumnAction: "tableColumnAction" }, ngImport: i0, template: "<!-- Search -->\n@if (search()) {\n  <section class=\"table-search\">\n    <ng-content select=\"gld-table-search\" />\n  </section>\n}\n\n<!-- Table -->\n<article\n  class=\"table\"\n  [class.table--empty]=\"!tableColumnsToShow().length\"\n  [style.height]=\"tableHeight()\">\n  <!-- Table Content -->\n  <section\n    class=\"table-content\"\n    [class.table-content--actions]=\"tableColumnActions().length\"\n    [class.table-content--selects]=\"selects()\">\n    <!-- Loading -->\n    @if (loading()) {\n      <gld-loader loading background minHeight=\"100px\" />\n    } @else {\n      <!-- Table Columns -->\n      @for (tableColumn of tableColumnsToShow(); track tableColumn) {\n        <section\n          class=\"table-column\"\n          [style.flexBasis]=\"tableColumn.width\"\n          [style.flexShrink]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n          [style.flexGrow]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n          [style.minWidth]=\"tableColumn.minWidth\"\n          [style.maxWidth]=\"tableColumn.maxWidth\">\n          <section class=\"table-header\">\n            <span class=\"table-header-ellipsis\">{{ tableColumn.label }}</span>\n          </section>\n          @for (value of tableColumn.values; track $index) {\n            <section\n              class=\"table-cell\"\n              [style.justifyContent]=\"tableColumn.justify\"\n              [style.textAlign]=\"tableColumn.justify\">\n              @if (tableColumn.transform(value) !== undefined) {\n                @switch (true) {\n                  @case (tableColumn.template !== undefined) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"tableColumn.template\"\n                      [ngTemplateOutletContext]=\"{ value: tableColumn.transform(value) }\" />\n                  }\n                  @default {\n                    <span class=\"table-cell-ellipsis\">{{ tableColumn.transform(value) }}</span>\n                  }\n                }\n              } @else {\n                <span>-</span>\n              }\n            </section>\n          }\n        </section>\n      } @empty {\n        <!-- Empty -->\n        <section class=\"table-empty\">\n          <p>{{ emptyMessage() ? emptyMessage() : 'We have not data to show yet!' }}</p>\n        </section>\n      }\n    }\n  </section>\n\n  <!-- Table Actions -->\n  @if ((tableColumnActions().length || selects()) && !loading() && tableColumnsToShow().length) {\n    <section\n      class=\"table-column\"\n      [class.table-column--actions]=\"tableColumnActions().length\"\n      [class.table-column--selects]=\"selects()\">\n      <!-- Header -->\n      <section\n        class=\"table-header\"\n        [class.table-header--actions]=\"tableColumnActions().length\"\n        [class.table-header--selects]=\"selects()\">\n        <!-- Select All Checkbox -->\n        @if (selectsAll()) {\n          <!-- <mat-checkbox\n              color=\"primary\"\n              matTooltip=\"Todo\"\n              matTooltipClass=\"Tooltip\"\n              class=\"Checkbox\"\n              [checked]=\"\n                dragAndDropColumnSelected().length === dragAndDropColumns().at(0)?.values?.length\n              \"\n              [indeterminate]=\"\n                !!dragAndDropColumnSelected().length &&\n                dragAndDropColumnSelected().length !== dragAndDropColumns().at(0)?.values?.length\n              \"\n              (change)=\"onSelectOrUnselectAll($event, dragAndDropColumns())\"\n            /> -->\n        }\n      </section>\n      @for (value of tableColumnsToShow().at(0)?.values; track $index; let index = $index) {\n        <!-- Cell -->\n        <section class=\"table-cell table-cell--actions\">\n          <!-- Select Checkbox -->\n          @if (selects()) {\n            <!-- <mat-checkbox\n            color=\"primary\"\n            class=\"Checkbox\"\n            matTooltip=\"Seleccionar\"\n            matTooltipClass=\"Tooltip\"\n            [checked]=\"isSelected(dragAndDropColumns(), index)\"\n            (change)=\"onSelect($event, dragAndDropColumns(), index)\" /> -->\n          }\n          @if (tableColumnActions()) {\n            <!-- Dropdown Menu -->\n            <gld-dropdown-menu\n              background\n              name=\"more button of table cell\"\n              type=\"iconButton\"\n              color=\"blue\"\n              iconSize=\"small\"\n              direction=\"left\"\n              [icon]=\"Icons.more2Fill\"\n              (changeValue)=\"\n                tableActionFunction({\n                  tableColumnActionAsEvent: $event,\n                  tableColumns: tableColumns(),\n                  index,\n                })\n              \">\n              @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n                <gld-dropdown-button\n                  [value]=\"tableColumnAction\"\n                  [icon]=\"tableColumnAction.icon\"\n                  iconSize=\"tiny\">\n                  {{ tableColumnAction.label }}\n                </gld-dropdown-button>\n              }\n            </gld-dropdown-menu>\n            <!-- <gld-icon-button\n              background\n              name=\"more button of table cell\"\n              iconSize=\"small\"\n              [icon]=\"Icons.more2Fill\"> -->\n            <!-- <gld-tile color=\"blue-to-green\"  class=\"Menu\">\n                  <section class=\"Menu-content\">\n                    @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n                      <button\n                        class=\"Menu-button {{ tableColumnAction?.classToHover ?? '' }}\"\n                        [class.Menu-button--hidden]=\"\n                          !tableColumnAction.showWhen(buildDataStructure({ index }))\n                        \"\n                        (click)=\"\n                          tableActionFunction({\n                            tableColumnAction,\n                            tableColumns: tableColumns(),\n                            index,\n                          })\n                        \">\n                        <gld-icon size=\"tiny\" [icon]=\"tableColumnAction.icon\" />\n                        <span class=\"Menu-button-ellipsis\">{{ tableColumnAction.label }}</span>\n                      </button>\n                    }\n                  </section>\n                </gld-tile> -->\n            <!-- </gld-icon-button> -->\n          }\n        </section>\n      }\n    </section>\n  }\n</article>\n\n<!-- Pagination -->\n@if (pagination()) {\n  <section class=\"table-pagination\">\n    <ng-content select=\"gld-table-pagination\" />\n  </section>\n}\n\n", styles: ["@charset \"UTF-8\";:root{--gld-break-point--zero: 0;--gld-break-point--mobile: 320px;--gld-break-point--landscape: 576px;--gld-break-point--tablet: 768px;--gld-break-point--desktop: 1080px;--gld-break-point--extra-desktop: 1280px;--gld-font-size--heading-one: 36px;--gld-font-size--heading-two: 26px;--gld-font-size--heading-three: 20px;--gld-font-size--normal: 16px;--gld-font-size--small: 12px;--gld-font-size--tiny: 8px;--gld-font--poppins: \"Poppins\", sans-serif;--gld-radius--z: 0;--gld-radius--xxxs: 4px;--gld-radius--xxs: 6px;--gld-radius--xs: 8px;--gld-radius--s: 12px;--gld-radius--m: 16px;--gld-radius--l: 24px;--gld-radius--xl: 32px;--gld-radius--xxl: 40px;--gld-spacing--z: 0;--gld-spacing--xxxs: 4px;--gld-spacing--xxs: 8px;--gld-spacing--xs: 12px;--gld-spacing--s: 16px;--gld-spacing--m: 24px;--gld-spacing--l: 32px;--gld-spacing--xl: 48px;--gld-spacing--xxl: 70px;--gld-zindex--one: 1000;--gld-zindex--two: 2000;--gld-zindex--three: 3000;--gld-zindex--four: 4000;--gld-zindex--five: 5000;--gld-icon-size--large: 48px;--gld-icon-size--medium: 40px;--gld-icon-size--normal: 32px;--gld-icon-size--small: 24px;--gld-icon-size--tiny: 16px;--gld-red: #ef4444;--gld-red-transparent--005: rgba(239, 68, 68, .05);--gld-red-transparent--010: rgba(239, 68, 68, .1);--gld-red-transparent--020: rgba(239, 68, 68, .2);--gld-blue: #3c82f6;--gld-blue-transparent--005: rgba(60, 130, 246, .05);--gld-blue-transparent--010: rgba(60, 130, 246, .1);--gld-blue-transparent--020: rgba(60, 130, 246, .2);--gld-green: #12b981;--gld-green-transparent--005: rgba(18, 185, 129, .05);--gld-green-transparent--010: rgba(18, 185, 129, .1);--gld-green-transparent--020: rgba(18, 185, 129, .2);--gld-purple: #a855f7;--gld-purple-transparent--005: rgba(168, 85, 247, .05);--gld-purple-transparent--010: rgba(168, 85, 247, .1);--gld-purple-transparent--020: rgba(168, 85, 247, .2);--gld-purple-transparent--080: rgba(168, 85, 247, .8);--gld-mustard: #ebb305;--gld-mustard-transparent--005: rgba(235, 179, 5, .05);--gld-mustard-transparent--010: rgba(235, 179, 5, .1);--gld-mustard-transparent--020: rgba(235, 179, 5, .2);--gld-orange: #f97315;--gld-orange-transparent--005: rgba(249, 115, 21, .05);--gld-orange-transparent--010: rgba(249, 115, 21, .1);--gld-orange-transparent--020: rgba(249, 115, 21, .2);--gld-pink: #ec4899;--gld-pink-transparent--005: rgba(236, 72, 153, .05);--gld-pink-transparent--010: rgba(236, 72, 153, .1);--gld-pink-transparent--020: rgba(236, 72, 153, .2);--gld-gray: #c1c7e1;--gld-gray-transparent--010: rgba(193, 199, 225, .1);--gld-gray-transparent--020: rgba(193, 199, 225, .2);--gld-gray-transparent--030: rgba(193, 199, 225, .3);--gld-gray-transparent--040: rgba(193, 199, 225, .4);--gld-gray-transparent--050: rgba(193, 199, 225, .5);--gld-gray-transparent--060: rgba(193, 199, 225, .6);--gld-gray-transparent--070: rgba(193, 199, 225, .7);--gld-gray-transparent--080: rgba(193, 199, 225, .8);--gld-gray-transparent--090: rgba(193, 199, 225, .9);--gld-white: #fff;--gld-whitelight: #f9fafb;--gld-whitelight-transparent--010: rgba(249, 250, 251, .1);--gld-whitelight-transparent--020: rgba(249, 250, 251, .2);--gld-whitelight-transparent--030: rgba(249, 250, 251, .3);--gld-whitelight-transparent--040: rgba(249, 250, 251, .4);--gld-whitelight-transparent--050: rgba(249, 250, 251, .5);--gld-whitelight-transparent--060: rgba(249, 250, 251, .6);--gld-whitelight-transparent--070: rgba(249, 250, 251, .7);--gld-whitelight-transparent--080: rgba(249, 250, 251, .8);--gld-whitelight-transparent--090: rgba(249, 250, 251, .9);--gld-darkblue: #101827;--gld-darkblue-transparent--010: rgba(16, 24, 39, .1);--gld-darkblue-transparent--020: rgba(16, 24, 39, .2);--gld-darkblue-transparent--030: rgba(16, 24, 39, .3);--gld-darkblue-transparent--040: rgba(16, 24, 39, .4);--gld-darkblue-transparent--050: rgba(16, 24, 39, .5);--gld-darkblue-transparent--060: rgba(16, 24, 39, .6);--gld-darkblue-transparent--070: rgba(16, 24, 39, .7);--gld-darkblue-transparent--080: rgba(16, 24, 39, .8);--gld-darkblue-transparent--090: rgba(16, 24, 39, .9);--gld-border-size: 2px;--gld-animation-time--150: .15s;--gld-animation-time--250: .25s;--gld-animation-time--10s: 10s;--gld-line-height: 1.2;--gld-max-width: 1280px;--gld-navbar-height: 50px;--gld-sidebar-width: 250px}*,*:before,*:after{box-sizing:border-box;min-width:0}html,body{font-family:var(--font--poppins)}body{margin:0}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin:0}p{text-wrap:pretty;margin:0}body.theme--light{color-scheme:light;--gld-foreground-color: var(--gld-darkblue);--gld-background-color: var(--gld-whitelight)}body.theme--dark{color-scheme:dark;--gld-foreground-color: var(--gld-whitelight);--gld-background-color: var(--gld-darkblue)}body.theme--system{color-scheme:light dark;--gld-foreground-color: light-dark(var(--gld-darkblue), var(--gld-whitelight));--gld-background-color: light-dark(var(--gld-whitelight), var(--gld-darkblue))}:host{width:100%}.table{--gld-color: var(--gld-foreground-color);--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-border-radius: var(--gld-radius--xxs);--gld-background: var(--gld-background-color);--gld-background--with-transparent: light-dark( var(--gld-gray-transparent--020), var(--gld-gray-transparent--010) );--gld-column-actions-or-selects-width: 40px;--gld-column-actions-and-selects-width: 80px;--gld-header-height: 40px;--gld-cell-height: 40px;--gld-min-height: 100px;min-height:var(--gld-min-height);display:grid;grid-template-columns:1fr;position:relative;border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-border-radius);background:var(--gld-background);overflow:hidden;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020)) transparent;scroll-behavior:smooth}.table::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.table::-webkit-scrollbar-track{background:transparent}.table::-webkit-scrollbar-thumb{background:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.table::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gld-gray-transparent--060),var(--gld-gray-transparent--040))}.table-content{display:flex;flex-wrap:nowrap;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020)) transparent;scroll-behavior:smooth}.table-content::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.table-content::-webkit-scrollbar-track{background:transparent}.table-content::-webkit-scrollbar-thumb{background:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.table-content::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gld-gray-transparent--060),var(--gld-gray-transparent--040))}.table-header,.table-cell{color:var(--color);font-family:var(--gld-font--poppins);padding:var(--gld-spacing--xxs) var(--gld-spacing--s);border-bottom:var(--gld-border-size) solid var(--gld-border-color)}.table-header-ellipsis,.table-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.table-header-ellipsis--hover,.table-cell-ellipsis--hover{cursor:pointer}.table-header{display:flex;align-items:center;font:600 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins);height:var(--gld-header-height);background:var(--gld-background--with-transparent)}.table-header.table-header--actions,.table-header.table-header--selects{justify-content:center}.table-header.table-header--actions.table-header--selects{justify-content:flex-start}.table-header--actions{background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-header--actions:before{content:\"\";position:absolute;inset:0;background:var(--gld-background--with-transparent)}.table-cell{display:flex;align-items:center;height:var(--gld-cell-height);font:400 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins)}.table-cell:last-of-type{margin-bottom:0;border-bottom:none}.table-cell.table-cell--actions,.table-cell.table-cell--selects{justify-content:center;padding:0}.table-cell--actions{position:relative;display:flex;justify-content:center;align-items:center;gap:var(--gld-spacing--xxxs);background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-column{flex:1 1 auto}.table-column--actions,.table-column--selects,.table-column--actions.table-column--selects{position:absolute;top:0;right:0}.table-column--actions.table-column--selects{width:var(--gld-column-actions-and-selects-width)}.table-column--actions,.table-column--selects{width:var(--gld-column-actions-or-selects-width)}.table-empty{width:100%;display:flex;color:var(--gld-color);background:var(--gld-background--with-transparent);padding:var(--gld-spacing--xs)}.table-empty p{font:400 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);text-transform:lowercase;margin:auto}.table-empty p:first-letter{text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropdownButtonComponent, selector: "gld-dropdown-button", inputs: ["value", "icon", "iconSize", "iconSpace", "moveTopToBottom", "moveLeftToRight", "direction"], outputs: ["changeValue"] }, { kind: "component", type: DropdownMenuComponent, selector: "gld-dropdown-menu", inputs: ["name", "type", "color", "size", "icon", "iconSize", "moveTopToBottom", "moveLeftToRight", "disabled", "full", "direction", "background", "selected", "initialValue"], outputs: ["changeValue", "changeFocus"] }, { kind: "component", type: LoaderComponent, selector: "gld-loader", inputs: ["loading", "background", "radius", "minHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: TableComponent, isStandalone: true, selector: "gld-table", inputs: { tableColumns: { classPropertyName: "tableColumns", publicName: "tableColumns", isSignal: true, isRequired: true, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, tableHeight: { classPropertyName: "tableHeight", publicName: "tableHeight", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selects: { classPropertyName: "selects", publicName: "selects", isSignal: true, isRequired: false, transformFunction: null }, selectsAll: { classPropertyName: "selectsAll", publicName: "selectsAll", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tableColumnAction: "tableColumnAction" }, ngImport: i0, template: "<!-- Search -->\n@if (search()) {\n  <section class=\"table-search\">\n    <ng-content select=\"gld-table-search\" />\n  </section>\n}\n\n<!-- Table -->\n<article\n  class=\"table\"\n  [class.table--empty]=\"!tableColumnsToShow().length\"\n  [style.height]=\"tableHeight()\">\n  <!-- Table Content -->\n  <section\n    class=\"table-content\"\n    [class.table-content--actions]=\"tableColumnActions().length\"\n    [class.table-content--selects]=\"selects()\">\n    <!-- Loading -->\n    @if (loading()) {\n      <gld-loader loading background minHeight=\"100px\" />\n    } @else {\n      <!-- Table Columns -->\n      @for (tableColumn of tableColumnsToShow(); track tableColumn) {\n        <section\n          class=\"table-column\"\n          [style.flexBasis]=\"tableColumn.width\"\n          [style.flexShrink]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n          [style.flexGrow]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n          [style.minWidth]=\"tableColumn.minWidth\"\n          [style.maxWidth]=\"tableColumn.maxWidth\">\n          <section class=\"table-header\">\n            <span class=\"table-header-ellipsis\">{{ tableColumn.label }}</span>\n          </section>\n          @for (value of tableColumn.values; track $index) {\n            <section\n              class=\"table-cell\"\n              [style.justifyContent]=\"tableColumn.justify\"\n              [style.textAlign]=\"tableColumn.justify\">\n              @if (tableColumn.transform(value) !== undefined) {\n                @switch (true) {\n                  @case (tableColumn.template !== undefined) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"tableColumn.template\"\n                      [ngTemplateOutletContext]=\"{ value: tableColumn.transform(value) }\" />\n                  }\n                  @default {\n                    <span class=\"table-cell-ellipsis\">{{ tableColumn.transform(value) }}</span>\n                  }\n                }\n              } @else {\n                <span>-</span>\n              }\n            </section>\n          }\n        </section>\n      } @empty {\n        <!-- Empty -->\n        <section class=\"table-empty\">\n          <p>{{ emptyMessage() ? emptyMessage() : 'We have not data to show yet!' }}</p>\n        </section>\n      }\n    }\n  </section>\n\n  <!-- Table Actions -->\n  @if ((tableColumnActions().length || selects()) && !loading() && tableColumnsToShow().length) {\n    <section\n      class=\"table-column\"\n      [class.table-column--actions]=\"tableColumnActions().length\"\n      [class.table-column--selects]=\"selects()\">\n      <!-- Header -->\n      <section\n        class=\"table-header\"\n        [class.table-header--actions]=\"tableColumnActions().length\"\n        [class.table-header--selects]=\"selects()\">\n        <!-- Select All Checkbox -->\n        @if (selectsAll()) {\n          <!-- <mat-checkbox\n              color=\"primary\"\n              matTooltip=\"Todo\"\n              matTooltipClass=\"Tooltip\"\n              class=\"Checkbox\"\n              [checked]=\"\n                dragAndDropColumnSelected().length === dragAndDropColumns().at(0)?.values?.length\n              \"\n              [indeterminate]=\"\n                !!dragAndDropColumnSelected().length &&\n                dragAndDropColumnSelected().length !== dragAndDropColumns().at(0)?.values?.length\n              \"\n              (change)=\"onSelectOrUnselectAll($event, dragAndDropColumns())\"\n            /> -->\n        }\n      </section>\n      @for (value of tableColumnsToShow().at(0)?.values; track $index; let index = $index) {\n        <!-- Cell -->\n        <section class=\"table-cell table-cell--actions\">\n          <!-- Select Checkbox -->\n          @if (selects()) {\n            <!-- <mat-checkbox\n            color=\"primary\"\n            class=\"Checkbox\"\n            matTooltip=\"Seleccionar\"\n            matTooltipClass=\"Tooltip\"\n            [checked]=\"isSelected(dragAndDropColumns(), index)\"\n            (change)=\"onSelect($event, dragAndDropColumns(), index)\" /> -->\n          }\n          @if (tableColumnActions()) {\n            <!-- Dropdown Menu -->\n            <gld-dropdown-menu\n              background\n              name=\"more button of table cell\"\n              type=\"iconButton\"\n              color=\"blue\"\n              iconSize=\"small\"\n              direction=\"left\"\n              [icon]=\"Icons.more2Fill\"\n              (changeValue)=\"\n                tableActionFunction({\n                  tableColumnActionAsEvent: $event,\n                  tableColumns: tableColumns(),\n                  index,\n                })\n              \">\n              @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n                <gld-dropdown-button\n                  [value]=\"tableColumnAction\"\n                  [icon]=\"tableColumnAction.icon\"\n                  iconSize=\"tiny\">\n                  {{ tableColumnAction.label }}\n                </gld-dropdown-button>\n              }\n            </gld-dropdown-menu>\n            <!-- <gld-icon-button\n              background\n              name=\"more button of table cell\"\n              iconSize=\"small\"\n              [icon]=\"Icons.more2Fill\"> -->\n            <!-- <gld-tile color=\"blue-to-green\"  class=\"Menu\">\n                  <section class=\"Menu-content\">\n                    @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n                      <button\n                        class=\"Menu-button {{ tableColumnAction?.classToHover ?? '' }}\"\n                        [class.Menu-button--hidden]=\"\n                          !tableColumnAction.showWhen(buildDataStructure({ index }))\n                        \"\n                        (click)=\"\n                          tableActionFunction({\n                            tableColumnAction,\n                            tableColumns: tableColumns(),\n                            index,\n                          })\n                        \">\n                        <gld-icon size=\"tiny\" [icon]=\"tableColumnAction.icon\" />\n                        <span class=\"Menu-button-ellipsis\">{{ tableColumnAction.label }}</span>\n                      </button>\n                    }\n                  </section>\n                </gld-tile> -->\n            <!-- </gld-icon-button> -->\n          }\n        </section>\n      }\n    </section>\n  }\n</article>\n\n<!-- Pagination -->\n@if (pagination()) {\n  <section class=\"table-pagination\">\n    <ng-content select=\"gld-table-pagination\" />\n  </section>\n}\n\n", styles: ["@charset \"UTF-8\";:root{--gld-break-point--zero: 0;--gld-break-point--mobile: 320px;--gld-break-point--landscape: 576px;--gld-break-point--tablet: 768px;--gld-break-point--desktop: 1080px;--gld-break-point--extra-desktop: 1280px;--gld-font-size--heading-one: 36px;--gld-font-size--heading-two: 26px;--gld-font-size--heading-three: 20px;--gld-font-size--normal: 16px;--gld-font-size--small: 12px;--gld-font-size--tiny: 8px;--gld-font--poppins: \"Poppins\", sans-serif;--gld-radius--z: 0;--gld-radius--xxxs: 4px;--gld-radius--xxs: 6px;--gld-radius--xs: 8px;--gld-radius--s: 12px;--gld-radius--m: 16px;--gld-radius--l: 24px;--gld-radius--xl: 32px;--gld-radius--xxl: 40px;--gld-spacing--z: 0;--gld-spacing--xxxs: 4px;--gld-spacing--xxs: 8px;--gld-spacing--xs: 12px;--gld-spacing--s: 16px;--gld-spacing--m: 24px;--gld-spacing--l: 32px;--gld-spacing--xl: 48px;--gld-spacing--xxl: 70px;--gld-zindex--one: 1000;--gld-zindex--two: 2000;--gld-zindex--three: 3000;--gld-zindex--four: 4000;--gld-zindex--five: 5000;--gld-icon-size--large: 48px;--gld-icon-size--medium: 40px;--gld-icon-size--normal: 32px;--gld-icon-size--small: 24px;--gld-icon-size--tiny: 16px;--gld-red: #ef4444;--gld-red-transparent--005: rgba(239, 68, 68, .05);--gld-red-transparent--010: rgba(239, 68, 68, .1);--gld-red-transparent--020: rgba(239, 68, 68, .2);--gld-blue: #3c82f6;--gld-blue-transparent--005: rgba(60, 130, 246, .05);--gld-blue-transparent--010: rgba(60, 130, 246, .1);--gld-blue-transparent--020: rgba(60, 130, 246, .2);--gld-green: #12b981;--gld-green-transparent--005: rgba(18, 185, 129, .05);--gld-green-transparent--010: rgba(18, 185, 129, .1);--gld-green-transparent--020: rgba(18, 185, 129, .2);--gld-purple: #a855f7;--gld-purple-transparent--005: rgba(168, 85, 247, .05);--gld-purple-transparent--010: rgba(168, 85, 247, .1);--gld-purple-transparent--020: rgba(168, 85, 247, .2);--gld-purple-transparent--080: rgba(168, 85, 247, .8);--gld-mustard: #ebb305;--gld-mustard-transparent--005: rgba(235, 179, 5, .05);--gld-mustard-transparent--010: rgba(235, 179, 5, .1);--gld-mustard-transparent--020: rgba(235, 179, 5, .2);--gld-orange: #f97315;--gld-orange-transparent--005: rgba(249, 115, 21, .05);--gld-orange-transparent--010: rgba(249, 115, 21, .1);--gld-orange-transparent--020: rgba(249, 115, 21, .2);--gld-pink: #ec4899;--gld-pink-transparent--005: rgba(236, 72, 153, .05);--gld-pink-transparent--010: rgba(236, 72, 153, .1);--gld-pink-transparent--020: rgba(236, 72, 153, .2);--gld-pink-transparent--040: rgba(236, 72, 153, .4);--gld-pink-transparent--060: rgba(236, 72, 153, .6);--gld-pink-transparent--080: rgba(236, 72, 153, .8);--gld-gray: #c1c7e1;--gld-gray-transparent--010: rgba(193, 199, 225, .1);--gld-gray-transparent--020: rgba(193, 199, 225, .2);--gld-gray-transparent--030: rgba(193, 199, 225, .3);--gld-gray-transparent--040: rgba(193, 199, 225, .4);--gld-gray-transparent--050: rgba(193, 199, 225, .5);--gld-gray-transparent--060: rgba(193, 199, 225, .6);--gld-gray-transparent--070: rgba(193, 199, 225, .7);--gld-gray-transparent--080: rgba(193, 199, 225, .8);--gld-gray-transparent--090: rgba(193, 199, 225, .9);--gld-white: #fff;--gld-whitelight: #f9fafb;--gld-whitelight-transparent--010: rgba(249, 250, 251, .1);--gld-whitelight-transparent--020: rgba(249, 250, 251, .2);--gld-whitelight-transparent--030: rgba(249, 250, 251, .3);--gld-whitelight-transparent--040: rgba(249, 250, 251, .4);--gld-whitelight-transparent--050: rgba(249, 250, 251, .5);--gld-whitelight-transparent--060: rgba(249, 250, 251, .6);--gld-whitelight-transparent--070: rgba(249, 250, 251, .7);--gld-whitelight-transparent--080: rgba(249, 250, 251, .8);--gld-whitelight-transparent--090: rgba(249, 250, 251, .9);--gld-darkblue: #101827;--gld-darkblue-transparent--010: rgba(16, 24, 39, .1);--gld-darkblue-transparent--020: rgba(16, 24, 39, .2);--gld-darkblue-transparent--030: rgba(16, 24, 39, .3);--gld-darkblue-transparent--040: rgba(16, 24, 39, .4);--gld-darkblue-transparent--050: rgba(16, 24, 39, .5);--gld-darkblue-transparent--060: rgba(16, 24, 39, .6);--gld-darkblue-transparent--070: rgba(16, 24, 39, .7);--gld-darkblue-transparent--080: rgba(16, 24, 39, .8);--gld-darkblue-transparent--090: rgba(16, 24, 39, .9);--gld-border-size: 2px;--gld-animation-time--150: .15s;--gld-animation-time--250: .25s;--gld-animation-time--10s: 10s;--gld-line-height: 1.2;--gld-max-width: 1280px;--gld-navbar-height: 50px;--gld-sidebar-width: 250px}*,*:before,*:after{box-sizing:border-box;min-width:0}html,body{font-family:var(--gld-font--poppins)}body{margin:0}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin:0}p{text-wrap:pretty;margin:0}body.theme--light{color-scheme:light;--gld-foreground-color: var(--gld-darkblue);--gld-background-color: var(--gld-whitelight)}body.theme--dark{color-scheme:dark;--gld-foreground-color: var(--gld-whitelight);--gld-background-color: var(--gld-darkblue)}body.theme--system{color-scheme:light dark;--gld-foreground-color: light-dark(var(--gld-darkblue), var(--gld-whitelight));--gld-background-color: light-dark(var(--gld-whitelight), var(--gld-darkblue))}:host{width:100%}.table{--gld-color: var(--gld-foreground-color);--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-border-radius: var(--gld-radius--xxs);--gld-background: var(--gld-background-color);--gld-background--with-transparent: light-dark( var(--gld-gray-transparent--020), var(--gld-gray-transparent--010) );--gld-column-actions-or-selects-width: 40px;--gld-column-actions-and-selects-width: 80px;--gld-header-height: 40px;--gld-cell-height: 40px;--gld-min-height: 100px;min-height:var(--gld-min-height);display:grid;grid-template-columns:1fr;position:relative;border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-border-radius);background:var(--gld-background);overflow:hidden;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020)) transparent;scroll-behavior:smooth}.table::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.table::-webkit-scrollbar-track{background:transparent}.table::-webkit-scrollbar-thumb{background:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.table::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gld-gray-transparent--060),var(--gld-gray-transparent--040))}.table-content{display:flex;flex-wrap:nowrap;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020)) transparent;scroll-behavior:smooth}.table-content::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.table-content::-webkit-scrollbar-track{background:transparent}.table-content::-webkit-scrollbar-thumb{background:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.table-content::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gld-gray-transparent--060),var(--gld-gray-transparent--040))}.table-header,.table-cell{color:var(--color);font-family:var(--gld-font--poppins);padding:var(--gld-spacing--xxs) var(--gld-spacing--s);border-bottom:var(--gld-border-size) solid var(--gld-border-color)}.table-header-ellipsis,.table-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.table-header-ellipsis--hover,.table-cell-ellipsis--hover{cursor:pointer}.table-header{display:flex;align-items:center;font:600 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins);height:var(--gld-header-height);background:var(--gld-background--with-transparent)}.table-header.table-header--actions,.table-header.table-header--selects{justify-content:center}.table-header.table-header--actions.table-header--selects{justify-content:flex-start}.table-header--actions{background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-header--actions:before{content:\"\";position:absolute;inset:0;background:var(--gld-background--with-transparent)}.table-cell{display:flex;align-items:center;height:var(--gld-cell-height);font:400 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins)}.table-cell:last-of-type{margin-bottom:0;border-bottom:none}.table-cell.table-cell--actions,.table-cell.table-cell--selects{justify-content:center;padding:0}.table-cell--actions{position:relative;display:flex;justify-content:center;align-items:center;gap:var(--gld-spacing--xxxs);background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-column{flex:1 1 auto}.table-column--actions,.table-column--selects,.table-column--actions.table-column--selects{position:absolute;top:0;right:0}.table-column--actions.table-column--selects{width:var(--gld-column-actions-and-selects-width)}.table-column--actions,.table-column--selects{width:var(--gld-column-actions-or-selects-width)}.table-empty{width:100%;display:flex;color:var(--gld-color);background:var(--gld-background--with-transparent);padding:var(--gld-spacing--xs)}.table-empty p{font:400 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);text-transform:lowercase;margin:auto}.table-empty p:first-letter{text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropdownButtonComponent, selector: "gld-dropdown-button", inputs: ["value", "icon", "iconSize", "iconSpace", "moveTopToBottom", "moveLeftToRight", "direction"], outputs: ["changeValue"] }, { kind: "component", type: DropdownMenuComponent, selector: "gld-dropdown-menu", inputs: ["name", "type", "color", "size", "icon", "iconSize", "moveTopToBottom", "moveLeftToRight", "disabled", "full", "direction", "background", "selected", "initialValue"], outputs: ["changeValue", "changeFocus"] }, { kind: "component", type: LoaderComponent, selector: "gld-loader", inputs: ["loading", "background", "radius", "minHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gld-table', standalone: true, imports: [NgTemplateOutlet, ...components], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Search -->\n@if (search()) {\n  <section class=\"table-search\">\n    <ng-content select=\"gld-table-search\" />\n  </section>\n}\n\n<!-- Table -->\n<article\n  class=\"table\"\n  [class.table--empty]=\"!tableColumnsToShow().length\"\n  [style.height]=\"tableHeight()\">\n  <!-- Table Content -->\n  <section\n    class=\"table-content\"\n    [class.table-content--actions]=\"tableColumnActions().length\"\n    [class.table-content--selects]=\"selects()\">\n    <!-- Loading -->\n    @if (loading()) {\n      <gld-loader loading background minHeight=\"100px\" />\n    } @else {\n      <!-- Table Columns -->\n      @for (tableColumn of tableColumnsToShow(); track tableColumn) {\n        <section\n          class=\"table-column\"\n          [style.flexBasis]=\"tableColumn.width\"\n          [style.flexShrink]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n          [style.flexGrow]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n          [style.minWidth]=\"tableColumn.minWidth\"\n          [style.maxWidth]=\"tableColumn.maxWidth\">\n          <section class=\"table-header\">\n            <span class=\"table-header-ellipsis\">{{ tableColumn.label }}</span>\n          </section>\n          @for (value of tableColumn.values; track $index) {\n            <section\n              class=\"table-cell\"\n              [style.justifyContent]=\"tableColumn.justify\"\n              [style.textAlign]=\"tableColumn.justify\">\n              @if (tableColumn.transform(value) !== undefined) {\n                @switch (true) {\n                  @case (tableColumn.template !== undefined) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"tableColumn.template\"\n                      [ngTemplateOutletContext]=\"{ value: tableColumn.transform(value) }\" />\n                  }\n                  @default {\n                    <span class=\"table-cell-ellipsis\">{{ tableColumn.transform(value) }}</span>\n                  }\n                }\n              } @else {\n                <span>-</span>\n              }\n            </section>\n          }\n        </section>\n      } @empty {\n        <!-- Empty -->\n        <section class=\"table-empty\">\n          <p>{{ emptyMessage() ? emptyMessage() : 'We have not data to show yet!' }}</p>\n        </section>\n      }\n    }\n  </section>\n\n  <!-- Table Actions -->\n  @if ((tableColumnActions().length || selects()) && !loading() && tableColumnsToShow().length) {\n    <section\n      class=\"table-column\"\n      [class.table-column--actions]=\"tableColumnActions().length\"\n      [class.table-column--selects]=\"selects()\">\n      <!-- Header -->\n      <section\n        class=\"table-header\"\n        [class.table-header--actions]=\"tableColumnActions().length\"\n        [class.table-header--selects]=\"selects()\">\n        <!-- Select All Checkbox -->\n        @if (selectsAll()) {\n          <!-- <mat-checkbox\n              color=\"primary\"\n              matTooltip=\"Todo\"\n              matTooltipClass=\"Tooltip\"\n              class=\"Checkbox\"\n              [checked]=\"\n                dragAndDropColumnSelected().length === dragAndDropColumns().at(0)?.values?.length\n              \"\n              [indeterminate]=\"\n                !!dragAndDropColumnSelected().length &&\n                dragAndDropColumnSelected().length !== dragAndDropColumns().at(0)?.values?.length\n              \"\n              (change)=\"onSelectOrUnselectAll($event, dragAndDropColumns())\"\n            /> -->\n        }\n      </section>\n      @for (value of tableColumnsToShow().at(0)?.values; track $index; let index = $index) {\n        <!-- Cell -->\n        <section class=\"table-cell table-cell--actions\">\n          <!-- Select Checkbox -->\n          @if (selects()) {\n            <!-- <mat-checkbox\n            color=\"primary\"\n            class=\"Checkbox\"\n            matTooltip=\"Seleccionar\"\n            matTooltipClass=\"Tooltip\"\n            [checked]=\"isSelected(dragAndDropColumns(), index)\"\n            (change)=\"onSelect($event, dragAndDropColumns(), index)\" /> -->\n          }\n          @if (tableColumnActions()) {\n            <!-- Dropdown Menu -->\n            <gld-dropdown-menu\n              background\n              name=\"more button of table cell\"\n              type=\"iconButton\"\n              color=\"blue\"\n              iconSize=\"small\"\n              direction=\"left\"\n              [icon]=\"Icons.more2Fill\"\n              (changeValue)=\"\n                tableActionFunction({\n                  tableColumnActionAsEvent: $event,\n                  tableColumns: tableColumns(),\n                  index,\n                })\n              \">\n              @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n                <gld-dropdown-button\n                  [value]=\"tableColumnAction\"\n                  [icon]=\"tableColumnAction.icon\"\n                  iconSize=\"tiny\">\n                  {{ tableColumnAction.label }}\n                </gld-dropdown-button>\n              }\n            </gld-dropdown-menu>\n            <!-- <gld-icon-button\n              background\n              name=\"more button of table cell\"\n              iconSize=\"small\"\n              [icon]=\"Icons.more2Fill\"> -->\n            <!-- <gld-tile color=\"blue-to-green\"  class=\"Menu\">\n                  <section class=\"Menu-content\">\n                    @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n                      <button\n                        class=\"Menu-button {{ tableColumnAction?.classToHover ?? '' }}\"\n                        [class.Menu-button--hidden]=\"\n                          !tableColumnAction.showWhen(buildDataStructure({ index }))\n                        \"\n                        (click)=\"\n                          tableActionFunction({\n                            tableColumnAction,\n                            tableColumns: tableColumns(),\n                            index,\n                          })\n                        \">\n                        <gld-icon size=\"tiny\" [icon]=\"tableColumnAction.icon\" />\n                        <span class=\"Menu-button-ellipsis\">{{ tableColumnAction.label }}</span>\n                      </button>\n                    }\n                  </section>\n                </gld-tile> -->\n            <!-- </gld-icon-button> -->\n          }\n        </section>\n      }\n    </section>\n  }\n</article>\n\n<!-- Pagination -->\n@if (pagination()) {\n  <section class=\"table-pagination\">\n    <ng-content select=\"gld-table-pagination\" />\n  </section>\n}\n\n", styles: ["@charset \"UTF-8\";:root{--gld-break-point--zero: 0;--gld-break-point--mobile: 320px;--gld-break-point--landscape: 576px;--gld-break-point--tablet: 768px;--gld-break-point--desktop: 1080px;--gld-break-point--extra-desktop: 1280px;--gld-font-size--heading-one: 36px;--gld-font-size--heading-two: 26px;--gld-font-size--heading-three: 20px;--gld-font-size--normal: 16px;--gld-font-size--small: 12px;--gld-font-size--tiny: 8px;--gld-font--poppins: \"Poppins\", sans-serif;--gld-radius--z: 0;--gld-radius--xxxs: 4px;--gld-radius--xxs: 6px;--gld-radius--xs: 8px;--gld-radius--s: 12px;--gld-radius--m: 16px;--gld-radius--l: 24px;--gld-radius--xl: 32px;--gld-radius--xxl: 40px;--gld-spacing--z: 0;--gld-spacing--xxxs: 4px;--gld-spacing--xxs: 8px;--gld-spacing--xs: 12px;--gld-spacing--s: 16px;--gld-spacing--m: 24px;--gld-spacing--l: 32px;--gld-spacing--xl: 48px;--gld-spacing--xxl: 70px;--gld-zindex--one: 1000;--gld-zindex--two: 2000;--gld-zindex--three: 3000;--gld-zindex--four: 4000;--gld-zindex--five: 5000;--gld-icon-size--large: 48px;--gld-icon-size--medium: 40px;--gld-icon-size--normal: 32px;--gld-icon-size--small: 24px;--gld-icon-size--tiny: 16px;--gld-red: #ef4444;--gld-red-transparent--005: rgba(239, 68, 68, .05);--gld-red-transparent--010: rgba(239, 68, 68, .1);--gld-red-transparent--020: rgba(239, 68, 68, .2);--gld-blue: #3c82f6;--gld-blue-transparent--005: rgba(60, 130, 246, .05);--gld-blue-transparent--010: rgba(60, 130, 246, .1);--gld-blue-transparent--020: rgba(60, 130, 246, .2);--gld-green: #12b981;--gld-green-transparent--005: rgba(18, 185, 129, .05);--gld-green-transparent--010: rgba(18, 185, 129, .1);--gld-green-transparent--020: rgba(18, 185, 129, .2);--gld-purple: #a855f7;--gld-purple-transparent--005: rgba(168, 85, 247, .05);--gld-purple-transparent--010: rgba(168, 85, 247, .1);--gld-purple-transparent--020: rgba(168, 85, 247, .2);--gld-purple-transparent--080: rgba(168, 85, 247, .8);--gld-mustard: #ebb305;--gld-mustard-transparent--005: rgba(235, 179, 5, .05);--gld-mustard-transparent--010: rgba(235, 179, 5, .1);--gld-mustard-transparent--020: rgba(235, 179, 5, .2);--gld-orange: #f97315;--gld-orange-transparent--005: rgba(249, 115, 21, .05);--gld-orange-transparent--010: rgba(249, 115, 21, .1);--gld-orange-transparent--020: rgba(249, 115, 21, .2);--gld-pink: #ec4899;--gld-pink-transparent--005: rgba(236, 72, 153, .05);--gld-pink-transparent--010: rgba(236, 72, 153, .1);--gld-pink-transparent--020: rgba(236, 72, 153, .2);--gld-gray: #c1c7e1;--gld-gray-transparent--010: rgba(193, 199, 225, .1);--gld-gray-transparent--020: rgba(193, 199, 225, .2);--gld-gray-transparent--030: rgba(193, 199, 225, .3);--gld-gray-transparent--040: rgba(193, 199, 225, .4);--gld-gray-transparent--050: rgba(193, 199, 225, .5);--gld-gray-transparent--060: rgba(193, 199, 225, .6);--gld-gray-transparent--070: rgba(193, 199, 225, .7);--gld-gray-transparent--080: rgba(193, 199, 225, .8);--gld-gray-transparent--090: rgba(193, 199, 225, .9);--gld-white: #fff;--gld-whitelight: #f9fafb;--gld-whitelight-transparent--010: rgba(249, 250, 251, .1);--gld-whitelight-transparent--020: rgba(249, 250, 251, .2);--gld-whitelight-transparent--030: rgba(249, 250, 251, .3);--gld-whitelight-transparent--040: rgba(249, 250, 251, .4);--gld-whitelight-transparent--050: rgba(249, 250, 251, .5);--gld-whitelight-transparent--060: rgba(249, 250, 251, .6);--gld-whitelight-transparent--070: rgba(249, 250, 251, .7);--gld-whitelight-transparent--080: rgba(249, 250, 251, .8);--gld-whitelight-transparent--090: rgba(249, 250, 251, .9);--gld-darkblue: #101827;--gld-darkblue-transparent--010: rgba(16, 24, 39, .1);--gld-darkblue-transparent--020: rgba(16, 24, 39, .2);--gld-darkblue-transparent--030: rgba(16, 24, 39, .3);--gld-darkblue-transparent--040: rgba(16, 24, 39, .4);--gld-darkblue-transparent--050: rgba(16, 24, 39, .5);--gld-darkblue-transparent--060: rgba(16, 24, 39, .6);--gld-darkblue-transparent--070: rgba(16, 24, 39, .7);--gld-darkblue-transparent--080: rgba(16, 24, 39, .8);--gld-darkblue-transparent--090: rgba(16, 24, 39, .9);--gld-border-size: 2px;--gld-animation-time--150: .15s;--gld-animation-time--250: .25s;--gld-animation-time--10s: 10s;--gld-line-height: 1.2;--gld-max-width: 1280px;--gld-navbar-height: 50px;--gld-sidebar-width: 250px}*,*:before,*:after{box-sizing:border-box;min-width:0}html,body{font-family:var(--font--poppins)}body{margin:0}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin:0}p{text-wrap:pretty;margin:0}body.theme--light{color-scheme:light;--gld-foreground-color: var(--gld-darkblue);--gld-background-color: var(--gld-whitelight)}body.theme--dark{color-scheme:dark;--gld-foreground-color: var(--gld-whitelight);--gld-background-color: var(--gld-darkblue)}body.theme--system{color-scheme:light dark;--gld-foreground-color: light-dark(var(--gld-darkblue), var(--gld-whitelight));--gld-background-color: light-dark(var(--gld-whitelight), var(--gld-darkblue))}:host{width:100%}.table{--gld-color: var(--gld-foreground-color);--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-border-radius: var(--gld-radius--xxs);--gld-background: var(--gld-background-color);--gld-background--with-transparent: light-dark( var(--gld-gray-transparent--020), var(--gld-gray-transparent--010) );--gld-column-actions-or-selects-width: 40px;--gld-column-actions-and-selects-width: 80px;--gld-header-height: 40px;--gld-cell-height: 40px;--gld-min-height: 100px;min-height:var(--gld-min-height);display:grid;grid-template-columns:1fr;position:relative;border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-border-radius);background:var(--gld-background);overflow:hidden;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020)) transparent;scroll-behavior:smooth}.table::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.table::-webkit-scrollbar-track{background:transparent}.table::-webkit-scrollbar-thumb{background:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.table::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gld-gray-transparent--060),var(--gld-gray-transparent--040))}.table-content{display:flex;flex-wrap:nowrap;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020)) transparent;scroll-behavior:smooth}.table-content::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.table-content::-webkit-scrollbar-track{background:transparent}.table-content::-webkit-scrollbar-thumb{background:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.table-content::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gld-gray-transparent--060),var(--gld-gray-transparent--040))}.table-header,.table-cell{color:var(--color);font-family:var(--gld-font--poppins);padding:var(--gld-spacing--xxs) var(--gld-spacing--s);border-bottom:var(--gld-border-size) solid var(--gld-border-color)}.table-header-ellipsis,.table-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.table-header-ellipsis--hover,.table-cell-ellipsis--hover{cursor:pointer}.table-header{display:flex;align-items:center;font:600 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins);height:var(--gld-header-height);background:var(--gld-background--with-transparent)}.table-header.table-header--actions,.table-header.table-header--selects{justify-content:center}.table-header.table-header--actions.table-header--selects{justify-content:flex-start}.table-header--actions{background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-header--actions:before{content:\"\";position:absolute;inset:0;background:var(--gld-background--with-transparent)}.table-cell{display:flex;align-items:center;height:var(--gld-cell-height);font:400 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins)}.table-cell:last-of-type{margin-bottom:0;border-bottom:none}.table-cell.table-cell--actions,.table-cell.table-cell--selects{justify-content:center;padding:0}.table-cell--actions{position:relative;display:flex;justify-content:center;align-items:center;gap:var(--gld-spacing--xxxs);background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-column{flex:1 1 auto}.table-column--actions,.table-column--selects,.table-column--actions.table-column--selects{position:absolute;top:0;right:0}.table-column--actions.table-column--selects{width:var(--gld-column-actions-and-selects-width)}.table-column--actions,.table-column--selects{width:var(--gld-column-actions-or-selects-width)}.table-empty{width:100%;display:flex;color:var(--gld-color);background:var(--gld-background--with-transparent);padding:var(--gld-spacing--xs)}.table-empty p{font:400 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);text-transform:lowercase;margin:auto}.table-empty p:first-letter{text-transform:uppercase}\n"] }]
+            args: [{ selector: 'gld-table', standalone: true, imports: [NgTemplateOutlet, ...components], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Search -->\n@if (search()) {\n  <section class=\"table-search\">\n    <ng-content select=\"gld-table-search\" />\n  </section>\n}\n\n<!-- Table -->\n<article\n  class=\"table\"\n  [class.table--empty]=\"!tableColumnsToShow().length\"\n  [style.height]=\"tableHeight()\">\n  <!-- Table Content -->\n  <section\n    class=\"table-content\"\n    [class.table-content--actions]=\"tableColumnActions().length\"\n    [class.table-content--selects]=\"selects()\">\n    <!-- Loading -->\n    @if (loading()) {\n      <gld-loader loading background minHeight=\"100px\" />\n    } @else {\n      <!-- Table Columns -->\n      @for (tableColumn of tableColumnsToShow(); track tableColumn) {\n        <section\n          class=\"table-column\"\n          [style.flexBasis]=\"tableColumn.width\"\n          [style.flexShrink]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n          [style.flexGrow]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n          [style.minWidth]=\"tableColumn.minWidth\"\n          [style.maxWidth]=\"tableColumn.maxWidth\">\n          <section class=\"table-header\">\n            <span class=\"table-header-ellipsis\">{{ tableColumn.label }}</span>\n          </section>\n          @for (value of tableColumn.values; track $index) {\n            <section\n              class=\"table-cell\"\n              [style.justifyContent]=\"tableColumn.justify\"\n              [style.textAlign]=\"tableColumn.justify\">\n              @if (tableColumn.transform(value) !== undefined) {\n                @switch (true) {\n                  @case (tableColumn.template !== undefined) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"tableColumn.template\"\n                      [ngTemplateOutletContext]=\"{ value: tableColumn.transform(value) }\" />\n                  }\n                  @default {\n                    <span class=\"table-cell-ellipsis\">{{ tableColumn.transform(value) }}</span>\n                  }\n                }\n              } @else {\n                <span>-</span>\n              }\n            </section>\n          }\n        </section>\n      } @empty {\n        <!-- Empty -->\n        <section class=\"table-empty\">\n          <p>{{ emptyMessage() ? emptyMessage() : 'We have not data to show yet!' }}</p>\n        </section>\n      }\n    }\n  </section>\n\n  <!-- Table Actions -->\n  @if ((tableColumnActions().length || selects()) && !loading() && tableColumnsToShow().length) {\n    <section\n      class=\"table-column\"\n      [class.table-column--actions]=\"tableColumnActions().length\"\n      [class.table-column--selects]=\"selects()\">\n      <!-- Header -->\n      <section\n        class=\"table-header\"\n        [class.table-header--actions]=\"tableColumnActions().length\"\n        [class.table-header--selects]=\"selects()\">\n        <!-- Select All Checkbox -->\n        @if (selectsAll()) {\n          <!-- <mat-checkbox\n              color=\"primary\"\n              matTooltip=\"Todo\"\n              matTooltipClass=\"Tooltip\"\n              class=\"Checkbox\"\n              [checked]=\"\n                dragAndDropColumnSelected().length === dragAndDropColumns().at(0)?.values?.length\n              \"\n              [indeterminate]=\"\n                !!dragAndDropColumnSelected().length &&\n                dragAndDropColumnSelected().length !== dragAndDropColumns().at(0)?.values?.length\n              \"\n              (change)=\"onSelectOrUnselectAll($event, dragAndDropColumns())\"\n            /> -->\n        }\n      </section>\n      @for (value of tableColumnsToShow().at(0)?.values; track $index; let index = $index) {\n        <!-- Cell -->\n        <section class=\"table-cell table-cell--actions\">\n          <!-- Select Checkbox -->\n          @if (selects()) {\n            <!-- <mat-checkbox\n            color=\"primary\"\n            class=\"Checkbox\"\n            matTooltip=\"Seleccionar\"\n            matTooltipClass=\"Tooltip\"\n            [checked]=\"isSelected(dragAndDropColumns(), index)\"\n            (change)=\"onSelect($event, dragAndDropColumns(), index)\" /> -->\n          }\n          @if (tableColumnActions()) {\n            <!-- Dropdown Menu -->\n            <gld-dropdown-menu\n              background\n              name=\"more button of table cell\"\n              type=\"iconButton\"\n              color=\"blue\"\n              iconSize=\"small\"\n              direction=\"left\"\n              [icon]=\"Icons.more2Fill\"\n              (changeValue)=\"\n                tableActionFunction({\n                  tableColumnActionAsEvent: $event,\n                  tableColumns: tableColumns(),\n                  index,\n                })\n              \">\n              @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n                <gld-dropdown-button\n                  [value]=\"tableColumnAction\"\n                  [icon]=\"tableColumnAction.icon\"\n                  iconSize=\"tiny\">\n                  {{ tableColumnAction.label }}\n                </gld-dropdown-button>\n              }\n            </gld-dropdown-menu>\n            <!-- <gld-icon-button\n              background\n              name=\"more button of table cell\"\n              iconSize=\"small\"\n              [icon]=\"Icons.more2Fill\"> -->\n            <!-- <gld-tile color=\"blue-to-green\"  class=\"Menu\">\n                  <section class=\"Menu-content\">\n                    @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n                      <button\n                        class=\"Menu-button {{ tableColumnAction?.classToHover ?? '' }}\"\n                        [class.Menu-button--hidden]=\"\n                          !tableColumnAction.showWhen(buildDataStructure({ index }))\n                        \"\n                        (click)=\"\n                          tableActionFunction({\n                            tableColumnAction,\n                            tableColumns: tableColumns(),\n                            index,\n                          })\n                        \">\n                        <gld-icon size=\"tiny\" [icon]=\"tableColumnAction.icon\" />\n                        <span class=\"Menu-button-ellipsis\">{{ tableColumnAction.label }}</span>\n                      </button>\n                    }\n                  </section>\n                </gld-tile> -->\n            <!-- </gld-icon-button> -->\n          }\n        </section>\n      }\n    </section>\n  }\n</article>\n\n<!-- Pagination -->\n@if (pagination()) {\n  <section class=\"table-pagination\">\n    <ng-content select=\"gld-table-pagination\" />\n  </section>\n}\n\n", styles: ["@charset \"UTF-8\";:root{--gld-break-point--zero: 0;--gld-break-point--mobile: 320px;--gld-break-point--landscape: 576px;--gld-break-point--tablet: 768px;--gld-break-point--desktop: 1080px;--gld-break-point--extra-desktop: 1280px;--gld-font-size--heading-one: 36px;--gld-font-size--heading-two: 26px;--gld-font-size--heading-three: 20px;--gld-font-size--normal: 16px;--gld-font-size--small: 12px;--gld-font-size--tiny: 8px;--gld-font--poppins: \"Poppins\", sans-serif;--gld-radius--z: 0;--gld-radius--xxxs: 4px;--gld-radius--xxs: 6px;--gld-radius--xs: 8px;--gld-radius--s: 12px;--gld-radius--m: 16px;--gld-radius--l: 24px;--gld-radius--xl: 32px;--gld-radius--xxl: 40px;--gld-spacing--z: 0;--gld-spacing--xxxs: 4px;--gld-spacing--xxs: 8px;--gld-spacing--xs: 12px;--gld-spacing--s: 16px;--gld-spacing--m: 24px;--gld-spacing--l: 32px;--gld-spacing--xl: 48px;--gld-spacing--xxl: 70px;--gld-zindex--one: 1000;--gld-zindex--two: 2000;--gld-zindex--three: 3000;--gld-zindex--four: 4000;--gld-zindex--five: 5000;--gld-icon-size--large: 48px;--gld-icon-size--medium: 40px;--gld-icon-size--normal: 32px;--gld-icon-size--small: 24px;--gld-icon-size--tiny: 16px;--gld-red: #ef4444;--gld-red-transparent--005: rgba(239, 68, 68, .05);--gld-red-transparent--010: rgba(239, 68, 68, .1);--gld-red-transparent--020: rgba(239, 68, 68, .2);--gld-blue: #3c82f6;--gld-blue-transparent--005: rgba(60, 130, 246, .05);--gld-blue-transparent--010: rgba(60, 130, 246, .1);--gld-blue-transparent--020: rgba(60, 130, 246, .2);--gld-green: #12b981;--gld-green-transparent--005: rgba(18, 185, 129, .05);--gld-green-transparent--010: rgba(18, 185, 129, .1);--gld-green-transparent--020: rgba(18, 185, 129, .2);--gld-purple: #a855f7;--gld-purple-transparent--005: rgba(168, 85, 247, .05);--gld-purple-transparent--010: rgba(168, 85, 247, .1);--gld-purple-transparent--020: rgba(168, 85, 247, .2);--gld-purple-transparent--080: rgba(168, 85, 247, .8);--gld-mustard: #ebb305;--gld-mustard-transparent--005: rgba(235, 179, 5, .05);--gld-mustard-transparent--010: rgba(235, 179, 5, .1);--gld-mustard-transparent--020: rgba(235, 179, 5, .2);--gld-orange: #f97315;--gld-orange-transparent--005: rgba(249, 115, 21, .05);--gld-orange-transparent--010: rgba(249, 115, 21, .1);--gld-orange-transparent--020: rgba(249, 115, 21, .2);--gld-pink: #ec4899;--gld-pink-transparent--005: rgba(236, 72, 153, .05);--gld-pink-transparent--010: rgba(236, 72, 153, .1);--gld-pink-transparent--020: rgba(236, 72, 153, .2);--gld-pink-transparent--040: rgba(236, 72, 153, .4);--gld-pink-transparent--060: rgba(236, 72, 153, .6);--gld-pink-transparent--080: rgba(236, 72, 153, .8);--gld-gray: #c1c7e1;--gld-gray-transparent--010: rgba(193, 199, 225, .1);--gld-gray-transparent--020: rgba(193, 199, 225, .2);--gld-gray-transparent--030: rgba(193, 199, 225, .3);--gld-gray-transparent--040: rgba(193, 199, 225, .4);--gld-gray-transparent--050: rgba(193, 199, 225, .5);--gld-gray-transparent--060: rgba(193, 199, 225, .6);--gld-gray-transparent--070: rgba(193, 199, 225, .7);--gld-gray-transparent--080: rgba(193, 199, 225, .8);--gld-gray-transparent--090: rgba(193, 199, 225, .9);--gld-white: #fff;--gld-whitelight: #f9fafb;--gld-whitelight-transparent--010: rgba(249, 250, 251, .1);--gld-whitelight-transparent--020: rgba(249, 250, 251, .2);--gld-whitelight-transparent--030: rgba(249, 250, 251, .3);--gld-whitelight-transparent--040: rgba(249, 250, 251, .4);--gld-whitelight-transparent--050: rgba(249, 250, 251, .5);--gld-whitelight-transparent--060: rgba(249, 250, 251, .6);--gld-whitelight-transparent--070: rgba(249, 250, 251, .7);--gld-whitelight-transparent--080: rgba(249, 250, 251, .8);--gld-whitelight-transparent--090: rgba(249, 250, 251, .9);--gld-darkblue: #101827;--gld-darkblue-transparent--010: rgba(16, 24, 39, .1);--gld-darkblue-transparent--020: rgba(16, 24, 39, .2);--gld-darkblue-transparent--030: rgba(16, 24, 39, .3);--gld-darkblue-transparent--040: rgba(16, 24, 39, .4);--gld-darkblue-transparent--050: rgba(16, 24, 39, .5);--gld-darkblue-transparent--060: rgba(16, 24, 39, .6);--gld-darkblue-transparent--070: rgba(16, 24, 39, .7);--gld-darkblue-transparent--080: rgba(16, 24, 39, .8);--gld-darkblue-transparent--090: rgba(16, 24, 39, .9);--gld-border-size: 2px;--gld-animation-time--150: .15s;--gld-animation-time--250: .25s;--gld-animation-time--10s: 10s;--gld-line-height: 1.2;--gld-max-width: 1280px;--gld-navbar-height: 50px;--gld-sidebar-width: 250px}*,*:before,*:after{box-sizing:border-box;min-width:0}html,body{font-family:var(--gld-font--poppins)}body{margin:0}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin:0}p{text-wrap:pretty;margin:0}body.theme--light{color-scheme:light;--gld-foreground-color: var(--gld-darkblue);--gld-background-color: var(--gld-whitelight)}body.theme--dark{color-scheme:dark;--gld-foreground-color: var(--gld-whitelight);--gld-background-color: var(--gld-darkblue)}body.theme--system{color-scheme:light dark;--gld-foreground-color: light-dark(var(--gld-darkblue), var(--gld-whitelight));--gld-background-color: light-dark(var(--gld-whitelight), var(--gld-darkblue))}:host{width:100%}.table{--gld-color: var(--gld-foreground-color);--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-border-radius: var(--gld-radius--xxs);--gld-background: var(--gld-background-color);--gld-background--with-transparent: light-dark( var(--gld-gray-transparent--020), var(--gld-gray-transparent--010) );--gld-column-actions-or-selects-width: 40px;--gld-column-actions-and-selects-width: 80px;--gld-header-height: 40px;--gld-cell-height: 40px;--gld-min-height: 100px;min-height:var(--gld-min-height);display:grid;grid-template-columns:1fr;position:relative;border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-border-radius);background:var(--gld-background);overflow:hidden;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020)) transparent;scroll-behavior:smooth}.table::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.table::-webkit-scrollbar-track{background:transparent}.table::-webkit-scrollbar-thumb{background:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.table::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gld-gray-transparent--060),var(--gld-gray-transparent--040))}.table-content{display:flex;flex-wrap:nowrap;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020)) transparent;scroll-behavior:smooth}.table-content::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.table-content::-webkit-scrollbar-track{background:transparent}.table-content::-webkit-scrollbar-thumb{background:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.table-content::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gld-gray-transparent--060),var(--gld-gray-transparent--040))}.table-header,.table-cell{color:var(--color);font-family:var(--gld-font--poppins);padding:var(--gld-spacing--xxs) var(--gld-spacing--s);border-bottom:var(--gld-border-size) solid var(--gld-border-color)}.table-header-ellipsis,.table-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.table-header-ellipsis--hover,.table-cell-ellipsis--hover{cursor:pointer}.table-header{display:flex;align-items:center;font:600 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins);height:var(--gld-header-height);background:var(--gld-background--with-transparent)}.table-header.table-header--actions,.table-header.table-header--selects{justify-content:center}.table-header.table-header--actions.table-header--selects{justify-content:flex-start}.table-header--actions{background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-header--actions:before{content:\"\";position:absolute;inset:0;background:var(--gld-background--with-transparent)}.table-cell{display:flex;align-items:center;height:var(--gld-cell-height);font:400 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins)}.table-cell:last-of-type{margin-bottom:0;border-bottom:none}.table-cell.table-cell--actions,.table-cell.table-cell--selects{justify-content:center;padding:0}.table-cell--actions{position:relative;display:flex;justify-content:center;align-items:center;gap:var(--gld-spacing--xxxs);background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-column{flex:1 1 auto}.table-column--actions,.table-column--selects,.table-column--actions.table-column--selects{position:absolute;top:0;right:0}.table-column--actions.table-column--selects{width:var(--gld-column-actions-and-selects-width)}.table-column--actions,.table-column--selects{width:var(--gld-column-actions-or-selects-width)}.table-empty{width:100%;display:flex;color:var(--gld-color);background:var(--gld-background--with-transparent);padding:var(--gld-spacing--xs)}.table-empty p{font:400 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);text-transform:lowercase;margin:auto}.table-empty p:first-letter{text-transform:uppercase}\n"] }]
         }] });
 
 // Angular Imports