@iamgld/ui 1.20.4 → 1.20.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/iamgld-ui.mjs +30 -30
- package/fesm2022/iamgld-ui.mjs.map +1 -1
- package/lib/components/buttons/link/link.component.d.ts +1 -1
- package/lib/components/tables/table/table.component.d.ts +1 -1
- package/package.json +1 -1
- package/public/styles/layers/_base.scss +17 -0
- package/public/styles/layers/_tools.scss +3 -4
package/fesm2022/iamgld-ui.mjs
CHANGED
|
@@ -469,11 +469,11 @@ class IconButtonComponent {
|
|
|
469
469
|
this.emitClick();
|
|
470
470
|
}
|
|
471
471
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
472
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: IconButtonComponent, isStandalone: true, selector: "gld-icon-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, space: { classPropertyName: "space", publicName: "space", isSignal: true, isRequired: false, transformFunction: null }, moveTopToBottom: { classPropertyName: "moveTopToBottom", publicName: "moveTopToBottom", isSignal: true, isRequired: false, transformFunction: null }, moveLeftToRight: { classPropertyName: "moveLeftToRight", publicName: "moveLeftToRight", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n id=\"{{ name() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"button button--{{ color() }}\"\n [class.button--disabled]=\"disabled()\"\n [class.button--background]=\"background()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\">\n <!-- Icon -->\n <gld-icon\n [icon]=\"icon()\"\n [size]=\"iconSize()\"\n [space]=\"space()\"\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [disabled]=\"disabled()\" />\n</button>\n\n<!-- Only used by DropdownMenuComponent -->\n<ng-content select=\"[gldDropdownMenuTemplate]\" />\n", styles: [":host{display:inline-block;max-width:inherit}.button{--gld-color: inherit;--gld-background: transparent;--gld-background--hover: transparent;--gld-radius: var(--gld-radius--xxs);--gld-font-size: var(--gld-font-size--normal);outline:none;border:none;padding:var(--gld-spacing--xxxs);border-radius:var(--gld-radius);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size);font-weight:600;line-height:1.25;cursor:pointer;width:inherit;color:var(--gld-color);background:var(--gld-background);display:inline-flex;align-items:center;justify-content:center;gap:var(--gld-spacing--xxxs);-webkit-user-select:none;user-select:none;will-change:background,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover,.button:focus{background:var(--gld-background--hover)}.button:active{transform:scale(.
|
|
472
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: IconButtonComponent, isStandalone: true, selector: "gld-icon-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, space: { classPropertyName: "space", publicName: "space", isSignal: true, isRequired: false, transformFunction: null }, moveTopToBottom: { classPropertyName: "moveTopToBottom", publicName: "moveTopToBottom", isSignal: true, isRequired: false, transformFunction: null }, moveLeftToRight: { classPropertyName: "moveLeftToRight", publicName: "moveLeftToRight", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n id=\"{{ name() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"button button--{{ color() }}\"\n [class.button--disabled]=\"disabled()\"\n [class.button--background]=\"background()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\">\n <!-- Icon -->\n <gld-icon\n [icon]=\"icon()\"\n [size]=\"iconSize()\"\n [space]=\"space()\"\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [disabled]=\"disabled()\" />\n</button>\n\n<!-- Only used by DropdownMenuComponent -->\n<ng-content select=\"[gldDropdownMenuTemplate]\" />\n", styles: [":host{display:inline-block;max-width:inherit}.button{--gld-color: inherit;--gld-background: transparent;--gld-background--hover: transparent;--gld-radius: var(--gld-radius--xxs);--gld-font-size: var(--gld-font-size--normal);outline:none;border:none;padding:var(--gld-spacing--xxxs);border-radius:var(--gld-radius);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size);font-weight:600;line-height:1.25;cursor:pointer;width:inherit;color:var(--gld-color);background:var(--gld-background);display:inline-flex;align-items:center;justify-content:center;gap:var(--gld-spacing--xxxs);-webkit-user-select:none;user-select:none;will-change:background,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover,.button:focus{background:var(--gld-background--hover)}.button:active{transform:scale(.98)}.button--pink{--gld-color: var(--gld-pink)}.button--pink.button--background{--gld-background: var(--gld-pink-transparent--010);--gld-background--hover: var(--gld-pink-transparent--020)}.button--purple{--gld-color: var(--gld-purple)}.button--purple.button--background{--gld-background: var(--gld-purple-transparent--010);--gld-background--hover: var(--gld-purple-transparent--020)}.button--mustard{--gld-color: var(--gld-mustard)}.button--mustard.button--background{--gld-background: var(--gld-mustard-transparent--010);--gld-background--hover: var(--gld-mustard-transparent--020)}.button--orange{--gld-color: var(--gld-orange)}.button--orange.button--background{--gld-background: var(--gld-orange-transparent--010);--gld-background--hover: var(--gld-orange-transparent--020)}.button--blue{--gld-color: var(--gld-blue)}.button--blue.button--background{--gld-background: var(--gld-blue-transparent--010);--gld-background--hover: var(--gld-blue-transparent--020)}.button--red{--gld-color: var(--gld-red)}.button--red.button--background{--gld-background: var(--gld-red-transparent--010);--gld-background--hover: var(--gld-red-transparent--020)}.button--green{--gld-color: var(--gld-green)}.button--green.button--background{--gld-background: var(--gld-green-transparent--010);--gld-background--hover: var(--gld-green-transparent--020)}.button--disabled{--gld-color: var(--gld-gray-transparent--060);pointer-events:none;cursor:not-allowed}.button--disabled.button--background{--gld-background: var(--gld-gray-transparent--020);--gld-background--hover: var(--gld-gray-transparent--020)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gld-icon", inputs: ["icon", "size", "space", "moveTopToBottom", "moveLeftToRight", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
473
473
|
}
|
|
474
474
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: IconButtonComponent, decorators: [{
|
|
475
475
|
type: Component,
|
|
476
|
-
args: [{ selector: 'gld-icon-button', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n id=\"{{ name() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"button button--{{ color() }}\"\n [class.button--disabled]=\"disabled()\"\n [class.button--background]=\"background()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\">\n <!-- Icon -->\n <gld-icon\n [icon]=\"icon()\"\n [size]=\"iconSize()\"\n [space]=\"space()\"\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [disabled]=\"disabled()\" />\n</button>\n\n<!-- Only used by DropdownMenuComponent -->\n<ng-content select=\"[gldDropdownMenuTemplate]\" />\n", styles: [":host{display:inline-block;max-width:inherit}.button{--gld-color: inherit;--gld-background: transparent;--gld-background--hover: transparent;--gld-radius: var(--gld-radius--xxs);--gld-font-size: var(--gld-font-size--normal);outline:none;border:none;padding:var(--gld-spacing--xxxs);border-radius:var(--gld-radius);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size);font-weight:600;line-height:1.25;cursor:pointer;width:inherit;color:var(--gld-color);background:var(--gld-background);display:inline-flex;align-items:center;justify-content:center;gap:var(--gld-spacing--xxxs);-webkit-user-select:none;user-select:none;will-change:background,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover,.button:focus{background:var(--gld-background--hover)}.button:active{transform:scale(.
|
|
476
|
+
args: [{ selector: 'gld-icon-button', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n id=\"{{ name() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"button button--{{ color() }}\"\n [class.button--disabled]=\"disabled()\"\n [class.button--background]=\"background()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\">\n <!-- Icon -->\n <gld-icon\n [icon]=\"icon()\"\n [size]=\"iconSize()\"\n [space]=\"space()\"\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [disabled]=\"disabled()\" />\n</button>\n\n<!-- Only used by DropdownMenuComponent -->\n<ng-content select=\"[gldDropdownMenuTemplate]\" />\n", styles: [":host{display:inline-block;max-width:inherit}.button{--gld-color: inherit;--gld-background: transparent;--gld-background--hover: transparent;--gld-radius: var(--gld-radius--xxs);--gld-font-size: var(--gld-font-size--normal);outline:none;border:none;padding:var(--gld-spacing--xxxs);border-radius:var(--gld-radius);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size);font-weight:600;line-height:1.25;cursor:pointer;width:inherit;color:var(--gld-color);background:var(--gld-background);display:inline-flex;align-items:center;justify-content:center;gap:var(--gld-spacing--xxxs);-webkit-user-select:none;user-select:none;will-change:background,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover,.button:focus{background:var(--gld-background--hover)}.button:active{transform:scale(.98)}.button--pink{--gld-color: var(--gld-pink)}.button--pink.button--background{--gld-background: var(--gld-pink-transparent--010);--gld-background--hover: var(--gld-pink-transparent--020)}.button--purple{--gld-color: var(--gld-purple)}.button--purple.button--background{--gld-background: var(--gld-purple-transparent--010);--gld-background--hover: var(--gld-purple-transparent--020)}.button--mustard{--gld-color: var(--gld-mustard)}.button--mustard.button--background{--gld-background: var(--gld-mustard-transparent--010);--gld-background--hover: var(--gld-mustard-transparent--020)}.button--orange{--gld-color: var(--gld-orange)}.button--orange.button--background{--gld-background: var(--gld-orange-transparent--010);--gld-background--hover: var(--gld-orange-transparent--020)}.button--blue{--gld-color: var(--gld-blue)}.button--blue.button--background{--gld-background: var(--gld-blue-transparent--010);--gld-background--hover: var(--gld-blue-transparent--020)}.button--red{--gld-color: var(--gld-red)}.button--red.button--background{--gld-background: var(--gld-red-transparent--010);--gld-background--hover: var(--gld-red-transparent--020)}.button--green{--gld-color: var(--gld-green)}.button--green.button--background{--gld-background: var(--gld-green-transparent--010);--gld-background--hover: var(--gld-green-transparent--020)}.button--disabled{--gld-color: var(--gld-gray-transparent--060);pointer-events:none;cursor:not-allowed}.button--disabled.button--background{--gld-background: var(--gld-gray-transparent--020);--gld-background--hover: var(--gld-gray-transparent--020)}\n"] }]
|
|
477
477
|
}] });
|
|
478
478
|
|
|
479
479
|
// Angular Imports
|
|
@@ -493,11 +493,11 @@ class LinkComponent {
|
|
|
493
493
|
this.emitClick();
|
|
494
494
|
}
|
|
495
495
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: LinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
496
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: LinkComponent, isStandalone: true, selector: "gld-link", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, redirect: { classPropertyName: "redirect", publicName: "redirect", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, external: { classPropertyName: "external", publicName: "external", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "@if (external()) {\n <!-- It's external link -->\n <ng-container\n [ngTemplateOutlet]=\"buttonTemplate\"\n [ngTemplateOutletContext]=\"{ buttonType: 'anchor' }\" />\n} @else {\n <!-- It isn't external link -->\n <ng-container\n [ngTemplateOutlet]=\"buttonTemplate\"\n [ngTemplateOutletContext]=\"{ buttonType: 'button' }\" />\n}\n\n<!-- Button Template -->\n<ng-template #buttonTemplate let-buttonType=\"buttonType\">\n @switch (buttonType) {\n @case ('anchor') {\n <a\n id=\"{{ name() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"link link--{{ align() }}\"\n [class.link--active]=\"active()\"\n [href]=\"redirect()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\"\n target=\"_blank\">\n <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n </a>\n }\n @case ('button') {\n @if (redirect()) {\n <!-- It has path to redirect -->\n <button\n id=\"{{ name() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"link link--{{ align() }}\"\n [class.link--active]=\"active()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\"\n [routerLink]=\"redirect()\">\n <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n </button>\n } @else {\n <!-- It doesn't have path to redirect -->\n <button\n id=\"{{ name() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"link link--{{ align() }}\"\n [class.link--active]=\"active()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\">\n <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n </button>\n }\n }\n }\n</ng-template>\n\n<!-- Content Button Template -->\n<ng-template #contentButtonTemplate>\n <ng-content />\n</ng-template>\n", styles: [":host{position:relative;z-index:1}.link{--gld-color: var(--gld-
|
|
496
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: LinkComponent, isStandalone: true, selector: "gld-link", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, redirect: { classPropertyName: "redirect", publicName: "redirect", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, external: { classPropertyName: "external", publicName: "external", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "@if (external()) {\n <!-- It's external link -->\n <ng-container\n [ngTemplateOutlet]=\"buttonTemplate\"\n [ngTemplateOutletContext]=\"{ buttonType: 'anchor' }\" />\n} @else {\n <!-- It isn't external link -->\n <ng-container\n [ngTemplateOutlet]=\"buttonTemplate\"\n [ngTemplateOutletContext]=\"{ buttonType: 'button' }\" />\n}\n\n<!-- Button Template -->\n<ng-template #buttonTemplate let-buttonType=\"buttonType\">\n @switch (buttonType) {\n @case ('anchor') {\n <a\n id=\"{{ name() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"link link--{{ align() }}\"\n [class.link--active]=\"active()\"\n [href]=\"redirect()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\"\n target=\"_blank\">\n <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n </a>\n }\n @case ('button') {\n @if (redirect()) {\n <!-- It has path to redirect -->\n <button\n id=\"{{ name() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"link link--{{ align() }}\"\n [class.link--active]=\"active()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\"\n [routerLink]=\"redirect()\">\n <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n </button>\n } @else {\n <!-- It doesn't have path to redirect -->\n <button\n id=\"{{ name() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"link link--{{ align() }}\"\n [class.link--active]=\"active()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\">\n <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n </button>\n }\n }\n }\n</ng-template>\n\n<!-- Content Button Template -->\n<ng-template #contentButtonTemplate>\n <ng-content />\n</ng-template>\n", styles: [":host{position:relative;z-index:1}.link{--gld-color: var(--gld-foreground-color);position:relative;display:inline-flex;align-items:center;padding:0;font:600 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);color:var(--gld-color);background:none;border:none;cursor:pointer;text-decoration:underline;will-change:color;transition:color var(--gld-animation-time--150)}.link--active,.link:active,.link:hover{--gld-color: var(--gld-purple)}.link--left{text-align:left}.link--right{text-align:right}.link--center{text-align:center}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
497
497
|
}
|
|
498
498
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: LinkComponent, decorators: [{
|
|
499
499
|
type: Component,
|
|
500
|
-
args: [{ selector: 'gld-link', standalone: true, imports: [NgTemplateOutlet, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (external()) {\n <!-- It's external link -->\n <ng-container\n [ngTemplateOutlet]=\"buttonTemplate\"\n [ngTemplateOutletContext]=\"{ buttonType: 'anchor' }\" />\n} @else {\n <!-- It isn't external link -->\n <ng-container\n [ngTemplateOutlet]=\"buttonTemplate\"\n [ngTemplateOutletContext]=\"{ buttonType: 'button' }\" />\n}\n\n<!-- Button Template -->\n<ng-template #buttonTemplate let-buttonType=\"buttonType\">\n @switch (buttonType) {\n @case ('anchor') {\n <a\n id=\"{{ name() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"link link--{{ align() }}\"\n [class.link--active]=\"active()\"\n [href]=\"redirect()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\"\n target=\"_blank\">\n <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n </a>\n }\n @case ('button') {\n @if (redirect()) {\n <!-- It has path to redirect -->\n <button\n id=\"{{ name() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"link link--{{ align() }}\"\n [class.link--active]=\"active()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\"\n [routerLink]=\"redirect()\">\n <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n </button>\n } @else {\n <!-- It doesn't have path to redirect -->\n <button\n id=\"{{ name() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"link link--{{ align() }}\"\n [class.link--active]=\"active()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\">\n <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n </button>\n }\n }\n }\n</ng-template>\n\n<!-- Content Button Template -->\n<ng-template #contentButtonTemplate>\n <ng-content />\n</ng-template>\n", styles: [":host{position:relative;z-index:1}.link{--gld-color: var(--gld-
|
|
500
|
+
args: [{ selector: 'gld-link', standalone: true, imports: [NgTemplateOutlet, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (external()) {\n <!-- It's external link -->\n <ng-container\n [ngTemplateOutlet]=\"buttonTemplate\"\n [ngTemplateOutletContext]=\"{ buttonType: 'anchor' }\" />\n} @else {\n <!-- It isn't external link -->\n <ng-container\n [ngTemplateOutlet]=\"buttonTemplate\"\n [ngTemplateOutletContext]=\"{ buttonType: 'button' }\" />\n}\n\n<!-- Button Template -->\n<ng-template #buttonTemplate let-buttonType=\"buttonType\">\n @switch (buttonType) {\n @case ('anchor') {\n <a\n id=\"{{ name() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"link link--{{ align() }}\"\n [class.link--active]=\"active()\"\n [href]=\"redirect()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\"\n target=\"_blank\">\n <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n </a>\n }\n @case ('button') {\n @if (redirect()) {\n <!-- It has path to redirect -->\n <button\n id=\"{{ name() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"link link--{{ align() }}\"\n [class.link--active]=\"active()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\"\n [routerLink]=\"redirect()\">\n <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n </button>\n } @else {\n <!-- It doesn't have path to redirect -->\n <button\n id=\"{{ name() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"link link--{{ align() }}\"\n [class.link--active]=\"active()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\">\n <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n </button>\n }\n }\n }\n</ng-template>\n\n<!-- Content Button Template -->\n<ng-template #contentButtonTemplate>\n <ng-content />\n</ng-template>\n", styles: [":host{position:relative;z-index:1}.link{--gld-color: var(--gld-foreground-color);position:relative;display:inline-flex;align-items:center;padding:0;font:600 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);color:var(--gld-color);background:none;border:none;cursor:pointer;text-decoration:underline;will-change:color;transition:color var(--gld-animation-time--150)}.link--active,.link:active,.link:hover{--gld-color: var(--gld-purple)}.link--left{text-align:left}.link--right{text-align:right}.link--center{text-align:center}\n"] }]
|
|
501
501
|
}] });
|
|
502
502
|
|
|
503
503
|
// Angular Imports
|
|
@@ -524,11 +524,11 @@ class DropdownButtonComponent {
|
|
|
524
524
|
this.select(value);
|
|
525
525
|
}
|
|
526
526
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: DropdownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
527
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: DropdownButtonComponent, isStandalone: true, selector: "gld-dropdown-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, iconSpace: { classPropertyName: "iconSpace", publicName: "iconSpace", isSignal: true, isRequired: false, transformFunction: null }, moveTopToBottom: { classPropertyName: "moveTopToBottom", publicName: "moveTopToBottom", isSignal: true, isRequired: false, transformFunction: null }, moveLeftToRight: { classPropertyName: "moveLeftToRight", publicName: "moveLeftToRight", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeValue: "changeValue" }, viewQueries: [{ propertyName: "buttonChild", first: true, predicate: ["buttonChild"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<button\n #buttonChild\n [tabindex]=\"disabled() ? '-1' : '0'\"\n class=\"button button--direction-{{ direction() }}\"\n [class.button--selected]=\"selected()\"\n (keyup.enter)=\"keyup(value())\"\n (click)=\"select(value())\">\n <!-- Icon -->\n @let innerIcon = icon();\n @if (innerIcon) {\n <gld-icon\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [icon]=\"innerIcon\"\n [size]=\"iconSize()\"\n [space]=\"iconSpace()\"\n [disabled]=\"disabled()\" />\n }\n <!-- Content -->\n <span>\n <ng-content> no content </ng-content>\n </span>\n</button>\n\n", styles: [":host{position:relative;width:100%}.button{--gld-background: transparent;--gld-background--hover: var(--gld-gray-transparent--010);--gld-color:
|
|
527
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: DropdownButtonComponent, isStandalone: true, selector: "gld-dropdown-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, iconSpace: { classPropertyName: "iconSpace", publicName: "iconSpace", isSignal: true, isRequired: false, transformFunction: null }, moveTopToBottom: { classPropertyName: "moveTopToBottom", publicName: "moveTopToBottom", isSignal: true, isRequired: false, transformFunction: null }, moveLeftToRight: { classPropertyName: "moveLeftToRight", publicName: "moveLeftToRight", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeValue: "changeValue" }, viewQueries: [{ propertyName: "buttonChild", first: true, predicate: ["buttonChild"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<button\n #buttonChild\n [tabindex]=\"disabled() ? '-1' : '0'\"\n class=\"button button--direction-{{ direction() }}\"\n [class.button--selected]=\"selected()\"\n (keyup.enter)=\"keyup(value())\"\n (click)=\"select(value())\">\n <!-- Icon -->\n @let innerIcon = icon();\n @if (innerIcon) {\n <gld-icon\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [icon]=\"innerIcon\"\n [size]=\"iconSize()\"\n [space]=\"iconSpace()\"\n [disabled]=\"disabled()\" />\n }\n <!-- Content -->\n <span>\n <ng-content> no content </ng-content>\n </span>\n</button>\n\n", styles: [":host{position:relative;width:100%}.button{--gld-background: transparent;--gld-background--hover: var(--gld-gray-transparent--010);--gld-color: var(--gld-foreground-color);--gld-color--selected: var(--gld-pink);--gld-color--hover: var(--gld-blue);--gld-radius: var(--gld-radius--xxxs);--gld-height: 40px;padding:var(--gld-spacing--xxs) var(--gld-spacing--xs);width:100%;height:var(--gld-height);background:var(--gld-background);color:var(--gld-color);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:var(--gld-line-height);text-align:left;-webkit-user-select:none;user-select:none;outline:none;border:none;border-radius:var(--gld-radius);cursor:pointer;display:inline-flex;align-items:center;gap:var(--gld-spacing--xxs);will-change:background,transform,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover{--gld-color: var(--gld-color--hover);--gld-background: var(--gld-background--hover)}.button:active{transform:scale(.95)}.button span{text-transform:capitalize;-webkit-user-select:none;user-select:none}.button--direction-left{justify-content:flex-start}.button--direction-right{justify-content:flex-end}.button--selected,.button--selected:hover{--gld-color: var(--gld-color--selected)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gld-icon", inputs: ["icon", "size", "space", "moveTopToBottom", "moveLeftToRight", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
528
528
|
}
|
|
529
529
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: DropdownButtonComponent, decorators: [{
|
|
530
530
|
type: Component,
|
|
531
|
-
args: [{ selector: 'gld-dropdown-button', imports: [...components$7], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n #buttonChild\n [tabindex]=\"disabled() ? '-1' : '0'\"\n class=\"button button--direction-{{ direction() }}\"\n [class.button--selected]=\"selected()\"\n (keyup.enter)=\"keyup(value())\"\n (click)=\"select(value())\">\n <!-- Icon -->\n @let innerIcon = icon();\n @if (innerIcon) {\n <gld-icon\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [icon]=\"innerIcon\"\n [size]=\"iconSize()\"\n [space]=\"iconSpace()\"\n [disabled]=\"disabled()\" />\n }\n <!-- Content -->\n <span>\n <ng-content> no content </ng-content>\n </span>\n</button>\n\n", styles: [":host{position:relative;width:100%}.button{--gld-background: transparent;--gld-background--hover: var(--gld-gray-transparent--010);--gld-color:
|
|
531
|
+
args: [{ selector: 'gld-dropdown-button', imports: [...components$7], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n #buttonChild\n [tabindex]=\"disabled() ? '-1' : '0'\"\n class=\"button button--direction-{{ direction() }}\"\n [class.button--selected]=\"selected()\"\n (keyup.enter)=\"keyup(value())\"\n (click)=\"select(value())\">\n <!-- Icon -->\n @let innerIcon = icon();\n @if (innerIcon) {\n <gld-icon\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [icon]=\"innerIcon\"\n [size]=\"iconSize()\"\n [space]=\"iconSpace()\"\n [disabled]=\"disabled()\" />\n }\n <!-- Content -->\n <span>\n <ng-content> no content </ng-content>\n </span>\n</button>\n\n", styles: [":host{position:relative;width:100%}.button{--gld-background: transparent;--gld-background--hover: var(--gld-gray-transparent--010);--gld-color: var(--gld-foreground-color);--gld-color--selected: var(--gld-pink);--gld-color--hover: var(--gld-blue);--gld-radius: var(--gld-radius--xxxs);--gld-height: 40px;padding:var(--gld-spacing--xxs) var(--gld-spacing--xs);width:100%;height:var(--gld-height);background:var(--gld-background);color:var(--gld-color);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:var(--gld-line-height);text-align:left;-webkit-user-select:none;user-select:none;outline:none;border:none;border-radius:var(--gld-radius);cursor:pointer;display:inline-flex;align-items:center;gap:var(--gld-spacing--xxs);will-change:background,transform,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover{--gld-color: var(--gld-color--hover);--gld-background: var(--gld-background--hover)}.button:active{transform:scale(.95)}.button span{text-transform:capitalize;-webkit-user-select:none;user-select:none}.button--direction-left{justify-content:flex-start}.button--direction-right{justify-content:flex-end}.button--selected,.button--selected:hover{--gld-color: var(--gld-color--selected)}\n"] }]
|
|
532
532
|
}] });
|
|
533
533
|
|
|
534
534
|
// Angular Imports
|
|
@@ -600,11 +600,11 @@ class ToggleButtonComponent {
|
|
|
600
600
|
this.select(value);
|
|
601
601
|
}
|
|
602
602
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: ToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
603
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: ToggleButtonComponent, isStandalone: true, selector: "gld-toggle-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { changeValue: "changeValue" }, ngImport: i0, template: "<button\n [tabindex]=\"disabled() ? '-1' : '0'\"\n class=\"button\"\n [class.button--selected]=\"selected()\"\n (keyup.enter)=\"keyup(value())\"\n (click)=\"select(value())\">\n <ng-content> empty button </ng-content>\n</button>\n\n", styles: [".button{--gld-background: transparent;--gld-background--hover: var(--gld-pink-transparent--010);--gld-color:
|
|
603
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: ToggleButtonComponent, isStandalone: true, selector: "gld-toggle-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { changeValue: "changeValue" }, ngImport: i0, template: "<button\n [tabindex]=\"disabled() ? '-1' : '0'\"\n class=\"button\"\n [class.button--selected]=\"selected()\"\n (keyup.enter)=\"keyup(value())\"\n (click)=\"select(value())\">\n <ng-content> empty button </ng-content>\n</button>\n\n", styles: [".button{--gld-background: transparent;--gld-background--hover: var(--gld-pink-transparent--010);--gld-color: var(--gld-foreground-color);--gld-color--selected: var(--gld-pink);--gld-color--hover: var(--gld-blue);--gld-radius: var(--gld-radius--xxxs);padding:var(--gld-spacing--xxxs);width:100%;height:100%;max-width:100%;background:var(--gld-background);color:var(--gld-color);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:var(--gld-line-height);-webkit-user-select:none;user-select:none;outline:none;border:none;border-radius:var(--gld-radius);cursor:pointer;will-change:background,transform,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover{--gld-color: var(--gld-color--hover)}.button:active{transform:scale(.95)}.button--selected{--gld-background: var(--gld-background--hover);--gld-color: var(--gld-color--selected)}.button--selected:hover{--gld-color: var(--gld-color--selected)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
604
604
|
}
|
|
605
605
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: ToggleButtonComponent, decorators: [{
|
|
606
606
|
type: Component,
|
|
607
|
-
args: [{ selector: 'gld-toggle-button', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n [tabindex]=\"disabled() ? '-1' : '0'\"\n class=\"button\"\n [class.button--selected]=\"selected()\"\n (keyup.enter)=\"keyup(value())\"\n (click)=\"select(value())\">\n <ng-content> empty button </ng-content>\n</button>\n\n", styles: [".button{--gld-background: transparent;--gld-background--hover: var(--gld-pink-transparent--010);--gld-color:
|
|
607
|
+
args: [{ selector: 'gld-toggle-button', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n [tabindex]=\"disabled() ? '-1' : '0'\"\n class=\"button\"\n [class.button--selected]=\"selected()\"\n (keyup.enter)=\"keyup(value())\"\n (click)=\"select(value())\">\n <ng-content> empty button </ng-content>\n</button>\n\n", styles: [".button{--gld-background: transparent;--gld-background--hover: var(--gld-pink-transparent--010);--gld-color: var(--gld-foreground-color);--gld-color--selected: var(--gld-pink);--gld-color--hover: var(--gld-blue);--gld-radius: var(--gld-radius--xxxs);padding:var(--gld-spacing--xxxs);width:100%;height:100%;max-width:100%;background:var(--gld-background);color:var(--gld-color);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:var(--gld-line-height);-webkit-user-select:none;user-select:none;outline:none;border:none;border-radius:var(--gld-radius);cursor:pointer;will-change:background,transform,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover{--gld-color: var(--gld-color--hover)}.button:active{transform:scale(.95)}.button--selected{--gld-background: var(--gld-background--hover);--gld-color: var(--gld-color--selected)}.button--selected:hover{--gld-color: var(--gld-color--selected)}\n"] }]
|
|
608
608
|
}] });
|
|
609
609
|
|
|
610
610
|
// Angular Imports
|
|
@@ -723,7 +723,7 @@ class InputComponent {
|
|
|
723
723
|
useExisting: forwardRef(() => InputComponent),
|
|
724
724
|
multi: true,
|
|
725
725
|
},
|
|
726
|
-
], ngImport: i0, template: "@let errors = control().invalid && (control().dirty || control().touched);\r\n@let disabled = control().disabled || (control().pending && control().disabled);\r\n\r\n<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\r\n <!-- Label -->\r\n @if (label()) {\r\n <label [for]=\"name()\">\r\n {{ label() }}\r\n </label>\r\n }\r\n\r\n <!-- Input -->\r\n <input\r\n id=\"input-{{ name() }}\"\r\n [tabindex]=\"disabled ? '-1' : '0'\"\r\n [name]=\"name()\"\r\n [type]=\"type()\"\r\n [placeholder]=\"placeholder()\"\r\n [formControl]=\"innerControl()\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onTouched()\"\r\n (keyup.escape)=\"onBlur()\" />\r\n\r\n <!-- Suffix -->\r\n @if (suffix()) {\r\n <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\r\n }\r\n</section>\r\n<!-- Errors -->\r\n@if (errors) {\r\n <ng-content select=\"gld-input-error\">\r\n <gld-input-error [errors]=\"control().errors\" />\r\n </ng-content>\r\n} @else {\r\n <!-- Hint -->\r\n <ng-content select=\"gld-input-hint\" />\r\n}\r\n\r\n<!-- Suffix Template -->\r\n<ng-template #suffixTemplate>\r\n <span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\r\n <ng-content select=\"[inputSuffix]\" />\r\n </span>\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", styles: [".input{--gld-color: var(--gld-
|
|
726
|
+
], ngImport: i0, template: "@let errors = control().invalid && (control().dirty || control().touched);\r\n@let disabled = control().disabled || (control().pending && control().disabled);\r\n\r\n<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\r\n <!-- Label -->\r\n @if (label()) {\r\n <label [for]=\"name()\">\r\n {{ label() }}\r\n </label>\r\n }\r\n\r\n <!-- Input -->\r\n <input\r\n id=\"input-{{ name() }}\"\r\n [tabindex]=\"disabled ? '-1' : '0'\"\r\n [name]=\"name()\"\r\n [type]=\"type()\"\r\n [placeholder]=\"placeholder()\"\r\n [formControl]=\"innerControl()\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onTouched()\"\r\n (keyup.escape)=\"onBlur()\" />\r\n\r\n <!-- Suffix -->\r\n @if (suffix()) {\r\n <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\r\n }\r\n</section>\r\n<!-- Errors -->\r\n@if (errors) {\r\n <ng-content select=\"gld-input-error\">\r\n <gld-input-error [errors]=\"control().errors\" />\r\n </ng-content>\r\n} @else {\r\n <!-- Hint -->\r\n <ng-content select=\"gld-input-hint\" />\r\n}\r\n\r\n<!-- Suffix Template -->\r\n<ng-template #suffixTemplate>\r\n <span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\r\n <ng-content select=\"[inputSuffix]\" />\r\n </span>\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", styles: [".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:0;display:inline-block;color:var(--gld-color);will-change:transform,color;transition:color var(--gld-animation-time) ease;cursor:pointer}\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: InputErrorComponent, selector: "gld-input-error", inputs: ["errors", "border"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
727
727
|
}
|
|
728
728
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: InputComponent, decorators: [{
|
|
729
729
|
type: Component,
|
|
@@ -733,7 +733,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
733
733
|
useExisting: forwardRef(() => InputComponent),
|
|
734
734
|
multi: true,
|
|
735
735
|
},
|
|
736
|
-
], template: "@let errors = control().invalid && (control().dirty || control().touched);\r\n@let disabled = control().disabled || (control().pending && control().disabled);\r\n\r\n<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\r\n <!-- Label -->\r\n @if (label()) {\r\n <label [for]=\"name()\">\r\n {{ label() }}\r\n </label>\r\n }\r\n\r\n <!-- Input -->\r\n <input\r\n id=\"input-{{ name() }}\"\r\n [tabindex]=\"disabled ? '-1' : '0'\"\r\n [name]=\"name()\"\r\n [type]=\"type()\"\r\n [placeholder]=\"placeholder()\"\r\n [formControl]=\"innerControl()\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onTouched()\"\r\n (keyup.escape)=\"onBlur()\" />\r\n\r\n <!-- Suffix -->\r\n @if (suffix()) {\r\n <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\r\n }\r\n</section>\r\n<!-- Errors -->\r\n@if (errors) {\r\n <ng-content select=\"gld-input-error\">\r\n <gld-input-error [errors]=\"control().errors\" />\r\n </ng-content>\r\n} @else {\r\n <!-- Hint -->\r\n <ng-content select=\"gld-input-hint\" />\r\n}\r\n\r\n<!-- Suffix Template -->\r\n<ng-template #suffixTemplate>\r\n <span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\r\n <ng-content select=\"[inputSuffix]\" />\r\n </span>\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", styles: [".input{--gld-color: var(--gld-
|
|
736
|
+
], template: "@let errors = control().invalid && (control().dirty || control().touched);\r\n@let disabled = control().disabled || (control().pending && control().disabled);\r\n\r\n<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\r\n <!-- Label -->\r\n @if (label()) {\r\n <label [for]=\"name()\">\r\n {{ label() }}\r\n </label>\r\n }\r\n\r\n <!-- Input -->\r\n <input\r\n id=\"input-{{ name() }}\"\r\n [tabindex]=\"disabled ? '-1' : '0'\"\r\n [name]=\"name()\"\r\n [type]=\"type()\"\r\n [placeholder]=\"placeholder()\"\r\n [formControl]=\"innerControl()\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onTouched()\"\r\n (keyup.escape)=\"onBlur()\" />\r\n\r\n <!-- Suffix -->\r\n @if (suffix()) {\r\n <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\r\n }\r\n</section>\r\n<!-- Errors -->\r\n@if (errors) {\r\n <ng-content select=\"gld-input-error\">\r\n <gld-input-error [errors]=\"control().errors\" />\r\n </ng-content>\r\n} @else {\r\n <!-- Hint -->\r\n <ng-content select=\"gld-input-hint\" />\r\n}\r\n\r\n<!-- Suffix Template -->\r\n<ng-template #suffixTemplate>\r\n <span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\r\n <ng-content select=\"[inputSuffix]\" />\r\n </span>\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", styles: [".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:0;display:inline-block;color:var(--gld-color);will-change:transform,color;transition:color var(--gld-animation-time) ease;cursor:pointer}\n"] }]
|
|
737
737
|
}], ctorParameters: () => [] });
|
|
738
738
|
|
|
739
739
|
// Angular Imports
|
|
@@ -794,7 +794,7 @@ class InputDateComponent {
|
|
|
794
794
|
useExisting: forwardRef(() => InputDateComponent),
|
|
795
795
|
multi: true,
|
|
796
796
|
},
|
|
797
|
-
], ngImport: i0, template: "@let errors = control().invalid && (control().dirty || control().touched);\n@let disabled = control().disabled || (control().pending && control().disabled);\n\n<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\n\t<!-- Label -->\n\t@if (label()) {\n\t\t<label [for]=\"name()\">\n\t\t\t{{ label() }}\n\t\t</label>\n\t}\n\n\t<!-- Input -->\n\t<input\n\t\ttype=\"date\"\n\t\tid=\"input-date-{{ name() }}\"\n\t\t[name]=\"name()\"\n\t\t[attr.min]=\"min()\"\n\t\t[attr.max]=\"max()\"\n\t\t[placeholder]=\"placeholder()\"\n\t\t[formControl]=\"innerControl()\"\n\t\t(blur)=\"onTouched()\" />\n\n\t<!-- Suffix -->\n\t@if (suffix()) {\n\t\t<ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\n\t}\n</section>\n<!-- Errors -->\n@if (errors) {\n\t<ng-content select=\"gld-input-error\">\n\t\t<gld-input-error [errors]=\"control().errors\" />\n\t</ng-content>\n} @else {\n\t<!-- Hint -->\n\t<ng-content select=\"gld-input-hint\" />\n}\n\n<!-- Suffix Template -->\n<ng-template #suffixTemplate>\n\t<span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\n\t\t<ng-content select=\"[inputSuffix]\" />\n\t</span>\n</ng-template>\n\n<!-- <h3>Debugging</h3> -->\n<!-- <section>errors: {{ control().errors | json }}</section> -->\n<!-- <section>errors: {{ errors }}</section> -->\n<!-- <section>invalid: {{ control().invalid }}</section> -->\n<!-- <section>dirty: {{ control().dirty }}</section> -->\n<!-- <section>touched: {{ control().touched }}</section> -->\n<!-- <section>disable: {{ control().disabled }}</section> -->\n<!-- <section>status: {{ control().status }}</section> -->\n\n", styles: [".input{--gld-color: var(--gld-
|
|
797
|
+
], ngImport: i0, template: "@let errors = control().invalid && (control().dirty || control().touched);\n@let disabled = control().disabled || (control().pending && control().disabled);\n\n<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\n\t<!-- Label -->\n\t@if (label()) {\n\t\t<label [for]=\"name()\">\n\t\t\t{{ label() }}\n\t\t</label>\n\t}\n\n\t<!-- Input -->\n\t<input\n\t\ttype=\"date\"\n\t\tid=\"input-date-{{ name() }}\"\n\t\t[name]=\"name()\"\n\t\t[attr.min]=\"min()\"\n\t\t[attr.max]=\"max()\"\n\t\t[placeholder]=\"placeholder()\"\n\t\t[formControl]=\"innerControl()\"\n\t\t(blur)=\"onTouched()\" />\n\n\t<!-- Suffix -->\n\t@if (suffix()) {\n\t\t<ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\n\t}\n</section>\n<!-- Errors -->\n@if (errors) {\n\t<ng-content select=\"gld-input-error\">\n\t\t<gld-input-error [errors]=\"control().errors\" />\n\t</ng-content>\n} @else {\n\t<!-- Hint -->\n\t<ng-content select=\"gld-input-hint\" />\n}\n\n<!-- Suffix Template -->\n<ng-template #suffixTemplate>\n\t<span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\n\t\t<ng-content select=\"[inputSuffix]\" />\n\t</span>\n</ng-template>\n\n<!-- <h3>Debugging</h3> -->\n<!-- <section>errors: {{ control().errors | json }}</section> -->\n<!-- <section>errors: {{ errors }}</section> -->\n<!-- <section>invalid: {{ control().invalid }}</section> -->\n<!-- <section>dirty: {{ control().dirty }}</section> -->\n<!-- <section>touched: {{ control().touched }}</section> -->\n<!-- <section>disable: {{ control().disabled }}</section> -->\n<!-- <section>status: {{ control().status }}</section> -->\n\n", styles: [".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:0;display:inline-block;color:var(--gld-color);will-change:transform,color;transition:color var(--gld-animation-time) ease;cursor:pointer}\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: InputErrorComponent, selector: "gld-input-error", inputs: ["errors", "border"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
798
798
|
}
|
|
799
799
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: InputDateComponent, decorators: [{
|
|
800
800
|
type: Component,
|
|
@@ -804,17 +804,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
804
804
|
useExisting: forwardRef(() => InputDateComponent),
|
|
805
805
|
multi: true,
|
|
806
806
|
},
|
|
807
|
-
], template: "@let errors = control().invalid && (control().dirty || control().touched);\n@let disabled = control().disabled || (control().pending && control().disabled);\n\n<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\n\t<!-- Label -->\n\t@if (label()) {\n\t\t<label [for]=\"name()\">\n\t\t\t{{ label() }}\n\t\t</label>\n\t}\n\n\t<!-- Input -->\n\t<input\n\t\ttype=\"date\"\n\t\tid=\"input-date-{{ name() }}\"\n\t\t[name]=\"name()\"\n\t\t[attr.min]=\"min()\"\n\t\t[attr.max]=\"max()\"\n\t\t[placeholder]=\"placeholder()\"\n\t\t[formControl]=\"innerControl()\"\n\t\t(blur)=\"onTouched()\" />\n\n\t<!-- Suffix -->\n\t@if (suffix()) {\n\t\t<ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\n\t}\n</section>\n<!-- Errors -->\n@if (errors) {\n\t<ng-content select=\"gld-input-error\">\n\t\t<gld-input-error [errors]=\"control().errors\" />\n\t</ng-content>\n} @else {\n\t<!-- Hint -->\n\t<ng-content select=\"gld-input-hint\" />\n}\n\n<!-- Suffix Template -->\n<ng-template #suffixTemplate>\n\t<span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\n\t\t<ng-content select=\"[inputSuffix]\" />\n\t</span>\n</ng-template>\n\n<!-- <h3>Debugging</h3> -->\n<!-- <section>errors: {{ control().errors | json }}</section> -->\n<!-- <section>errors: {{ errors }}</section> -->\n<!-- <section>invalid: {{ control().invalid }}</section> -->\n<!-- <section>dirty: {{ control().dirty }}</section> -->\n<!-- <section>touched: {{ control().touched }}</section> -->\n<!-- <section>disable: {{ control().disabled }}</section> -->\n<!-- <section>status: {{ control().status }}</section> -->\n\n", styles: [".input{--gld-color: var(--gld-
|
|
807
|
+
], template: "@let errors = control().invalid && (control().dirty || control().touched);\n@let disabled = control().disabled || (control().pending && control().disabled);\n\n<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\n\t<!-- Label -->\n\t@if (label()) {\n\t\t<label [for]=\"name()\">\n\t\t\t{{ label() }}\n\t\t</label>\n\t}\n\n\t<!-- Input -->\n\t<input\n\t\ttype=\"date\"\n\t\tid=\"input-date-{{ name() }}\"\n\t\t[name]=\"name()\"\n\t\t[attr.min]=\"min()\"\n\t\t[attr.max]=\"max()\"\n\t\t[placeholder]=\"placeholder()\"\n\t\t[formControl]=\"innerControl()\"\n\t\t(blur)=\"onTouched()\" />\n\n\t<!-- Suffix -->\n\t@if (suffix()) {\n\t\t<ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\n\t}\n</section>\n<!-- Errors -->\n@if (errors) {\n\t<ng-content select=\"gld-input-error\">\n\t\t<gld-input-error [errors]=\"control().errors\" />\n\t</ng-content>\n} @else {\n\t<!-- Hint -->\n\t<ng-content select=\"gld-input-hint\" />\n}\n\n<!-- Suffix Template -->\n<ng-template #suffixTemplate>\n\t<span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\n\t\t<ng-content select=\"[inputSuffix]\" />\n\t</span>\n</ng-template>\n\n<!-- <h3>Debugging</h3> -->\n<!-- <section>errors: {{ control().errors | json }}</section> -->\n<!-- <section>errors: {{ errors }}</section> -->\n<!-- <section>invalid: {{ control().invalid }}</section> -->\n<!-- <section>dirty: {{ control().dirty }}</section> -->\n<!-- <section>touched: {{ control().touched }}</section> -->\n<!-- <section>disable: {{ control().disabled }}</section> -->\n<!-- <section>status: {{ control().status }}</section> -->\n\n", styles: [".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:0;display:inline-block;color:var(--gld-color);will-change:transform,color;transition:color var(--gld-animation-time) ease;cursor:pointer}\n"] }]
|
|
808
808
|
}], ctorParameters: () => [] });
|
|
809
809
|
|
|
810
810
|
// Angular Imports
|
|
811
811
|
class InputHintComponent {
|
|
812
812
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: InputHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
813
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.1", type: InputHintComponent, isStandalone: true, selector: "gld-input-hint", ngImport: i0, template: "<section class=\"hint\">\r\n\t<span class=\"hint__message\">\r\n\t\t<ng-content>hint empty</ng-content>\r\n\t</span>\r\n</section>\r\n", styles: [".hint{--gld-color: var(--gld-
|
|
813
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.1", type: InputHintComponent, isStandalone: true, selector: "gld-input-hint", ngImport: i0, template: "<section class=\"hint\">\r\n\t<span class=\"hint__message\">\r\n\t\t<ng-content>hint empty</ng-content>\r\n\t</span>\r\n</section>\r\n", styles: [".hint{--gld-color: var(--gld-foreground-color);--gld-background: var(--gld-gray-transparent--020);--gld-radius: var(--gld-radius--xxs);color:var(--gld-color);background:var(--gld-background);border-radius:0 0 var(--gld-radius) var(--gld-radius);padding:var(--gld-spacing--xxxs) var(--gld-spacing--xxs);display:flex;align-items:flex-start;gap:var(--gld-spacing--xxxs)}.hint__icon{display:flex;align-items:center}.hint__message{font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--small);font-weight:400;line-height:1.25;text-transform:lowercase}.hint__message:first-letter{text-transform:uppercase}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
814
814
|
}
|
|
815
815
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: InputHintComponent, decorators: [{
|
|
816
816
|
type: Component,
|
|
817
|
-
args: [{ selector: 'gld-input-hint', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"hint\">\r\n\t<span class=\"hint__message\">\r\n\t\t<ng-content>hint empty</ng-content>\r\n\t</span>\r\n</section>\r\n", styles: [".hint{--gld-color: var(--gld-
|
|
817
|
+
args: [{ selector: 'gld-input-hint', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"hint\">\r\n\t<span class=\"hint__message\">\r\n\t\t<ng-content>hint empty</ng-content>\r\n\t</span>\r\n</section>\r\n", styles: [".hint{--gld-color: var(--gld-foreground-color);--gld-background: var(--gld-gray-transparent--020);--gld-radius: var(--gld-radius--xxs);color:var(--gld-color);background:var(--gld-background);border-radius:0 0 var(--gld-radius) var(--gld-radius);padding:var(--gld-spacing--xxxs) var(--gld-spacing--xxs);display:flex;align-items:flex-start;gap:var(--gld-spacing--xxxs)}.hint__icon{display:flex;align-items:center}.hint__message{font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--small);font-weight:400;line-height:1.25;text-transform:lowercase}.hint__message:first-letter{text-transform:uppercase}\n"] }]
|
|
818
818
|
}] });
|
|
819
819
|
|
|
820
820
|
// Angular Imports
|
|
@@ -875,7 +875,7 @@ class TextareaComponent {
|
|
|
875
875
|
useExisting: forwardRef(() => TextareaComponent),
|
|
876
876
|
multi: true,
|
|
877
877
|
},
|
|
878
|
-
], ngImport: i0, template: "@let errors = control().invalid && (control().dirty || control().touched);\r\n@let disabled = control().disabled || (control().pending && control().disabled);\r\n\r\n<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\r\n <!-- Label -->\r\n @if (label()) {\r\n <label [for]=\"name()\">\r\n {{ label() }}\r\n </label>\r\n }\r\n\r\n <!-- Input -->\r\n <textarea\r\n id=\"input-textarea-{{ name() }}\"\r\n [name]=\"name()\"\r\n [placeholder]=\"placeholder()\"\r\n [formControl]=\"innerControl()\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onTouched()\"\r\n (keyup.escape)=\"onBlur()\"></textarea>\r\n\r\n <!-- Suffix -->\r\n @if (suffix()) {\r\n <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\r\n }\r\n</section>\r\n<!-- Errors -->\r\n@if (errors) {\r\n <ng-content select=\"gld-input-error\">\r\n <gld-input-error [errors]=\"control().errors\" />\r\n </ng-content>\r\n} @else {\r\n <!-- Hint -->\r\n <ng-content select=\"gld-input-hint\" />\r\n}\r\n\r\n<!-- Suffix emplate -->\r\n<ng-template #suffixTemplate>\r\n <span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\r\n <ng-content select=\"[inputSuffix]\" />\r\n </span>\r\n</ng-template>\r\n\r\n<!-- <h3>Debugging</h3>\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: [".input{--gld-color: var(--gld-
|
|
878
|
+
], ngImport: i0, template: "@let errors = control().invalid && (control().dirty || control().touched);\r\n@let disabled = control().disabled || (control().pending && control().disabled);\r\n\r\n<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\r\n <!-- Label -->\r\n @if (label()) {\r\n <label [for]=\"name()\">\r\n {{ label() }}\r\n </label>\r\n }\r\n\r\n <!-- Input -->\r\n <textarea\r\n id=\"input-textarea-{{ name() }}\"\r\n [name]=\"name()\"\r\n [placeholder]=\"placeholder()\"\r\n [formControl]=\"innerControl()\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onTouched()\"\r\n (keyup.escape)=\"onBlur()\"></textarea>\r\n\r\n <!-- Suffix -->\r\n @if (suffix()) {\r\n <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\r\n }\r\n</section>\r\n<!-- Errors -->\r\n@if (errors) {\r\n <ng-content select=\"gld-input-error\">\r\n <gld-input-error [errors]=\"control().errors\" />\r\n </ng-content>\r\n} @else {\r\n <!-- Hint -->\r\n <ng-content select=\"gld-input-hint\" />\r\n}\r\n\r\n<!-- Suffix emplate -->\r\n<ng-template #suffixTemplate>\r\n <span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\r\n <ng-content select=\"[inputSuffix]\" />\r\n </span>\r\n</ng-template>\r\n\r\n<!-- <h3>Debugging</h3>\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: [".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-min-height: 120px;--gld-max-height: 240px;--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 textarea{display:flex;width:100%;min-width:var(--gld-min-with);min-height:var(--gld-min-height);max-height:var(--gld-max-height);padding:var(--gld-spacing--xxs);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;resize:vertical;form-sizing:content;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input textarea:focus{--gld-border-color: var(--gld-blue)}.input textarea::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:0;display:inline-block;color:var(--gld-color);will-change:transform,color;transition:color var(--gld-animation-time) ease;cursor:pointer}\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: InputErrorComponent, selector: "gld-input-error", inputs: ["errors", "border"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
879
879
|
}
|
|
880
880
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
881
881
|
type: Component,
|
|
@@ -885,7 +885,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
885
885
|
useExisting: forwardRef(() => TextareaComponent),
|
|
886
886
|
multi: true,
|
|
887
887
|
},
|
|
888
|
-
], template: "@let errors = control().invalid && (control().dirty || control().touched);\r\n@let disabled = control().disabled || (control().pending && control().disabled);\r\n\r\n<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\r\n <!-- Label -->\r\n @if (label()) {\r\n <label [for]=\"name()\">\r\n {{ label() }}\r\n </label>\r\n }\r\n\r\n <!-- Input -->\r\n <textarea\r\n id=\"input-textarea-{{ name() }}\"\r\n [name]=\"name()\"\r\n [placeholder]=\"placeholder()\"\r\n [formControl]=\"innerControl()\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onTouched()\"\r\n (keyup.escape)=\"onBlur()\"></textarea>\r\n\r\n <!-- Suffix -->\r\n @if (suffix()) {\r\n <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\r\n }\r\n</section>\r\n<!-- Errors -->\r\n@if (errors) {\r\n <ng-content select=\"gld-input-error\">\r\n <gld-input-error [errors]=\"control().errors\" />\r\n </ng-content>\r\n} @else {\r\n <!-- Hint -->\r\n <ng-content select=\"gld-input-hint\" />\r\n}\r\n\r\n<!-- Suffix emplate -->\r\n<ng-template #suffixTemplate>\r\n <span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\r\n <ng-content select=\"[inputSuffix]\" />\r\n </span>\r\n</ng-template>\r\n\r\n<!-- <h3>Debugging</h3>\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: [".input{--gld-color: var(--gld-
|
|
888
|
+
], template: "@let errors = control().invalid && (control().dirty || control().touched);\r\n@let disabled = control().disabled || (control().pending && control().disabled);\r\n\r\n<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\r\n <!-- Label -->\r\n @if (label()) {\r\n <label [for]=\"name()\">\r\n {{ label() }}\r\n </label>\r\n }\r\n\r\n <!-- Input -->\r\n <textarea\r\n id=\"input-textarea-{{ name() }}\"\r\n [name]=\"name()\"\r\n [placeholder]=\"placeholder()\"\r\n [formControl]=\"innerControl()\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onTouched()\"\r\n (keyup.escape)=\"onBlur()\"></textarea>\r\n\r\n <!-- Suffix -->\r\n @if (suffix()) {\r\n <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\r\n }\r\n</section>\r\n<!-- Errors -->\r\n@if (errors) {\r\n <ng-content select=\"gld-input-error\">\r\n <gld-input-error [errors]=\"control().errors\" />\r\n </ng-content>\r\n} @else {\r\n <!-- Hint -->\r\n <ng-content select=\"gld-input-hint\" />\r\n}\r\n\r\n<!-- Suffix emplate -->\r\n<ng-template #suffixTemplate>\r\n <span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\r\n <ng-content select=\"[inputSuffix]\" />\r\n </span>\r\n</ng-template>\r\n\r\n<!-- <h3>Debugging</h3>\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: [".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-min-height: 120px;--gld-max-height: 240px;--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 textarea{display:flex;width:100%;min-width:var(--gld-min-with);min-height:var(--gld-min-height);max-height:var(--gld-max-height);padding:var(--gld-spacing--xxs);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;resize:vertical;form-sizing:content;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input textarea:focus{--gld-border-color: var(--gld-blue)}.input textarea::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:0;display:inline-block;color:var(--gld-color);will-change:transform,color;transition:color var(--gld-animation-time) ease;cursor:pointer}\n"] }]
|
|
889
889
|
}], ctorParameters: () => [] });
|
|
890
890
|
|
|
891
891
|
// Angular Imports
|
|
@@ -910,11 +910,11 @@ class RadioButtonComponent {
|
|
|
910
910
|
this.changeFocus.emit(false);
|
|
911
911
|
}
|
|
912
912
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
913
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: RadioButtonComponent, isStandalone: true, selector: "gld-radio-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { changeValue: "changeValue", changeFocus: "changeFocus" }, ngImport: i0, template: "<button\r\n\t[tabindex]=\"disabled() ? '-1' : '0'\"\r\n\t(keyup.enter)=\"keyup(value())\"\r\n\t(click)=\"select(value())\"\r\n\tclass=\"radio\"\r\n\t[class.radio--selected]=\"selected()\"\r\n\t[class.radio--disabled]=\"disabled()\"\r\n\t[class.radio--error]=\"error()\"\r\n\t(focus)=\"onFocus()\"\r\n\t(blur)=\"onBlur()\"\r\n\t(keyup.escape)=\"onBlur()\">\r\n\t<span class=\"radio__icon\" [class.radio__icon--selected]=\"selected()\"></span>\r\n\r\n\t<span class=\"radio__label\">\r\n\t\t<ng-content>empty radio button</ng-content>\r\n\t</span>\r\n</button>\r\n", styles: [":host{display:inline-flex;color:inherit;width:inherit;height:inherit}.radio{--gld-height: 26px;--gld-color: var(--gld-
|
|
913
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: RadioButtonComponent, isStandalone: true, selector: "gld-radio-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { changeValue: "changeValue", changeFocus: "changeFocus" }, ngImport: i0, template: "<button\r\n\t[tabindex]=\"disabled() ? '-1' : '0'\"\r\n\t(keyup.enter)=\"keyup(value())\"\r\n\t(click)=\"select(value())\"\r\n\tclass=\"radio\"\r\n\t[class.radio--selected]=\"selected()\"\r\n\t[class.radio--disabled]=\"disabled()\"\r\n\t[class.radio--error]=\"error()\"\r\n\t(focus)=\"onFocus()\"\r\n\t(blur)=\"onBlur()\"\r\n\t(keyup.escape)=\"onBlur()\">\r\n\t<span class=\"radio__icon\" [class.radio__icon--selected]=\"selected()\"></span>\r\n\r\n\t<span class=\"radio__label\">\r\n\t\t<ng-content>empty radio button</ng-content>\r\n\t</span>\r\n</button>\r\n", styles: [":host{display:inline-flex;color:inherit;width:inherit;height:inherit}.radio{--gld-height: 26px;--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-dot-color: var(--gld-blue);--gld-dot-color--outer: var(--gld-gray-transparent--060);--gld-dot-color--outer-hover: var(--gld-blue);--gld-dot-color--outer-selected: var(--gld-blue);--gld-dot-color--outer-error: var(--gld-red);display:inline-flex;justify-content:center;align-items:center;border:none;background:none;gap:var(--gld-spacing--xxs);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-color);height:var(--gld-height);padding:var(--gld-spacing--xxxs);cursor:pointer;-webkit-user-select:none;user-select:none}.radio:hover .radio__icon,.radio:focus .radio__icon{--gld-dot-color--outer: var(--gld-dot-color--outer-hover)}.radio:focus{outline:none}.radio__icon{--gld-size: 20px;width:var(--gld-size);height:var(--gld-size);border-radius:50%;border:var(--gld-border-size) solid var(--gld-dot-color--outer);position:relative;display:flex;justify-content:center;align-items:center}.radio__icon--selected:before{content:\"\";position:absolute;width:calc(var(--gld-size) / 2);height:calc(var(--gld-size) / 2);background:var(--gld-dot-color);border-radius:inherit}.radio__label:first-letter{text-transform:uppercase}.radio--selected{--gld-dot-color--outer: var(--gld-dot-color--outer-selected)}.radio--disabled{--gld-color: var(--gld-color--disabled);--gld-dot-color--outer: var(--gld-color--disabled);pointer-events:none}.radio--error .radio__icon{--gld-dot-color--outer: var(--gld-dot-color--outer-error)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
914
914
|
}
|
|
915
915
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: RadioButtonComponent, decorators: [{
|
|
916
916
|
type: Component,
|
|
917
|
-
args: [{ selector: 'gld-radio-button', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n\t[tabindex]=\"disabled() ? '-1' : '0'\"\r\n\t(keyup.enter)=\"keyup(value())\"\r\n\t(click)=\"select(value())\"\r\n\tclass=\"radio\"\r\n\t[class.radio--selected]=\"selected()\"\r\n\t[class.radio--disabled]=\"disabled()\"\r\n\t[class.radio--error]=\"error()\"\r\n\t(focus)=\"onFocus()\"\r\n\t(blur)=\"onBlur()\"\r\n\t(keyup.escape)=\"onBlur()\">\r\n\t<span class=\"radio__icon\" [class.radio__icon--selected]=\"selected()\"></span>\r\n\r\n\t<span class=\"radio__label\">\r\n\t\t<ng-content>empty radio button</ng-content>\r\n\t</span>\r\n</button>\r\n", styles: [":host{display:inline-flex;color:inherit;width:inherit;height:inherit}.radio{--gld-height: 26px;--gld-color: var(--gld-
|
|
917
|
+
args: [{ selector: 'gld-radio-button', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n\t[tabindex]=\"disabled() ? '-1' : '0'\"\r\n\t(keyup.enter)=\"keyup(value())\"\r\n\t(click)=\"select(value())\"\r\n\tclass=\"radio\"\r\n\t[class.radio--selected]=\"selected()\"\r\n\t[class.radio--disabled]=\"disabled()\"\r\n\t[class.radio--error]=\"error()\"\r\n\t(focus)=\"onFocus()\"\r\n\t(blur)=\"onBlur()\"\r\n\t(keyup.escape)=\"onBlur()\">\r\n\t<span class=\"radio__icon\" [class.radio__icon--selected]=\"selected()\"></span>\r\n\r\n\t<span class=\"radio__label\">\r\n\t\t<ng-content>empty radio button</ng-content>\r\n\t</span>\r\n</button>\r\n", styles: [":host{display:inline-flex;color:inherit;width:inherit;height:inherit}.radio{--gld-height: 26px;--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-dot-color: var(--gld-blue);--gld-dot-color--outer: var(--gld-gray-transparent--060);--gld-dot-color--outer-hover: var(--gld-blue);--gld-dot-color--outer-selected: var(--gld-blue);--gld-dot-color--outer-error: var(--gld-red);display:inline-flex;justify-content:center;align-items:center;border:none;background:none;gap:var(--gld-spacing--xxs);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-color);height:var(--gld-height);padding:var(--gld-spacing--xxxs);cursor:pointer;-webkit-user-select:none;user-select:none}.radio:hover .radio__icon,.radio:focus .radio__icon{--gld-dot-color--outer: var(--gld-dot-color--outer-hover)}.radio:focus{outline:none}.radio__icon{--gld-size: 20px;width:var(--gld-size);height:var(--gld-size);border-radius:50%;border:var(--gld-border-size) solid var(--gld-dot-color--outer);position:relative;display:flex;justify-content:center;align-items:center}.radio__icon--selected:before{content:\"\";position:absolute;width:calc(var(--gld-size) / 2);height:calc(var(--gld-size) / 2);background:var(--gld-dot-color);border-radius:inherit}.radio__label:first-letter{text-transform:uppercase}.radio--selected{--gld-dot-color--outer: var(--gld-dot-color--outer-selected)}.radio--disabled{--gld-color: var(--gld-color--disabled);--gld-dot-color--outer: var(--gld-color--disabled);pointer-events:none}.radio--error .radio__icon{--gld-dot-color--outer: var(--gld-dot-color--outer-error)}\n"] }]
|
|
918
918
|
}] });
|
|
919
919
|
|
|
920
920
|
// Angular Imports
|
|
@@ -998,7 +998,7 @@ class RadioGroupComponent {
|
|
|
998
998
|
useExisting: forwardRef(() => RadioGroupComponent),
|
|
999
999
|
multi: true,
|
|
1000
1000
|
},
|
|
1001
|
-
], queries: [{ propertyName: "radioButtonChildren", predicate: RadioButtonComponent, isSignal: true }], ngImport: i0, template: "@let errors = control().invalid && (control().dirty || control().touched);\r\n@let disabled = control().disabled || (control().pending && control().disabled);\r\n\r\n<article class=\"radio\" [class.radio--disabled]=\"disabled\" [attr.name]=\"name()\">\r\n <!-- Label -->\r\n @if (label()) {\r\n <label
|
|
1001
|
+
], queries: [{ propertyName: "radioButtonChildren", predicate: RadioButtonComponent, isSignal: true }], ngImport: i0, template: "@let errors = control().invalid && (control().dirty || control().touched);\r\n@let disabled = control().disabled || (control().pending && control().disabled);\r\n\r\n<article class=\"radio\" [class.radio--disabled]=\"disabled\" [attr.name]=\"name()\">\r\n <!-- Label -->\r\n @if (label()) {\r\n <label [for]=\"name()\">\r\n {{ label() }}\r\n </label>\r\n }\r\n <section class=\"radio__items radio__items--{{ direction() }}\">\r\n <ng-content select=\"gld-radio-button\" />\r\n </section>\r\n</article>\r\n<!-- Errors -->\r\n@if (errors) {\r\n <ng-content select=\"gld-input-error\">\r\n <gld-input-error border [errors]=\"control().errors\" />\r\n </ng-content>\r\n} @else {\r\n <!-- Hint -->\r\n <ng-content select=\"gld-input-hint\" />\r\n}\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: [".radio{--gld-color: var(--gld-foreground-color);--gld-label-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);margin-bottom:var(--gld-spacing--xxxs)}.radio label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:var(--gld-line-height);color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text;margin-bottom:var(--gld-spacing--xxxs)}.radio label:first-letter{text-transform:uppercase}.radio--disabled .radio__label{--gld-color: var(--gld-color--disabled);pointer-events:none}.radio__items{display:flex;gap:var(--gld-spacing--xxs)}.radio__items--horizontal{align-items:center}.radio__items--vertical{flex-direction:column}\n"], dependencies: [{ kind: "component", type: InputErrorComponent, selector: "gld-input-error", inputs: ["errors", "border"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1002
1002
|
}
|
|
1003
1003
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: RadioGroupComponent, decorators: [{
|
|
1004
1004
|
type: Component,
|
|
@@ -1008,7 +1008,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
1008
1008
|
useExisting: forwardRef(() => RadioGroupComponent),
|
|
1009
1009
|
multi: true,
|
|
1010
1010
|
},
|
|
1011
|
-
], template: "@let errors = control().invalid && (control().dirty || control().touched);\r\n@let disabled = control().disabled || (control().pending && control().disabled);\r\n\r\n<article class=\"radio\" [class.radio--disabled]=\"disabled\" [attr.name]=\"name()\">\r\n <!-- Label -->\r\n @if (label()) {\r\n <label
|
|
1011
|
+
], template: "@let errors = control().invalid && (control().dirty || control().touched);\r\n@let disabled = control().disabled || (control().pending && control().disabled);\r\n\r\n<article class=\"radio\" [class.radio--disabled]=\"disabled\" [attr.name]=\"name()\">\r\n <!-- Label -->\r\n @if (label()) {\r\n <label [for]=\"name()\">\r\n {{ label() }}\r\n </label>\r\n }\r\n <section class=\"radio__items radio__items--{{ direction() }}\">\r\n <ng-content select=\"gld-radio-button\" />\r\n </section>\r\n</article>\r\n<!-- Errors -->\r\n@if (errors) {\r\n <ng-content select=\"gld-input-error\">\r\n <gld-input-error border [errors]=\"control().errors\" />\r\n </ng-content>\r\n} @else {\r\n <!-- Hint -->\r\n <ng-content select=\"gld-input-hint\" />\r\n}\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: [".radio{--gld-color: var(--gld-foreground-color);--gld-label-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);margin-bottom:var(--gld-spacing--xxxs)}.radio label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:var(--gld-line-height);color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text;margin-bottom:var(--gld-spacing--xxxs)}.radio label:first-letter{text-transform:uppercase}.radio--disabled .radio__label{--gld-color: var(--gld-color--disabled);pointer-events:none}.radio__items{display:flex;gap:var(--gld-spacing--xxs)}.radio__items--horizontal{align-items:center}.radio__items--vertical{flex-direction:column}\n"] }]
|
|
1012
1012
|
}], ctorParameters: () => [] });
|
|
1013
1013
|
|
|
1014
1014
|
// Angular Imports
|
|
@@ -1031,11 +1031,11 @@ class SelectOptionComponent {
|
|
|
1031
1031
|
this.changeFocus.emit(false);
|
|
1032
1032
|
}
|
|
1033
1033
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: SelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1034
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: SelectOptionComponent, isStandalone: true, selector: "gld-select-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", changeFocus: "changeFocus" }, ngImport: i0, template: "<button\r\n [tabindex]=\"disabled() ? '-1' : '0'\"\r\n (keyup.enter)=\"keyup()\"\r\n (click)=\"select()\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n (keyup.escape)=\"onBlur()\">\r\n <span><ng-content> an option </ng-content></span>\r\n</button>\r\n", styles: [":host{height:var(--gld-height)}button{--gld-background: transparent;--gld-background--hover: var(--gld-gray-transparent--010);--gld-color:
|
|
1034
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: SelectOptionComponent, isStandalone: true, selector: "gld-select-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", changeFocus: "changeFocus" }, ngImport: i0, template: "<button\r\n [tabindex]=\"disabled() ? '-1' : '0'\"\r\n (keyup.enter)=\"keyup()\"\r\n (click)=\"select()\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n (keyup.escape)=\"onBlur()\">\r\n <span><ng-content> an option </ng-content></span>\r\n</button>\r\n", styles: [":host{height:var(--gld-height)}button{--gld-background: transparent;--gld-background--hover: var(--gld-gray-transparent--010);--gld-color: var(--gld-foreground-color);--gld-color--hover: var(--gld-blue);--gld-radius: var(--gld-radius--xxxs);padding:var(--gld-spacing--xs) var(--gld-spacing--s);width:100%;height:100%;max-width:100%;background:var(--gld-background);color:var(--gld-color);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;display:flex;align-items:center;-webkit-user-select:none;user-select:none;outline:none;border:none;border-radius:var(--gld-radius);cursor:pointer}button:hover,button:focus{--gld-background: var(--gld-background--hover);--gld-color: var(--gld-color--hover)}button span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1035
1035
|
}
|
|
1036
1036
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: SelectOptionComponent, decorators: [{
|
|
1037
1037
|
type: Component,
|
|
1038
|
-
args: [{ selector: 'gld-select-option', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n [tabindex]=\"disabled() ? '-1' : '0'\"\r\n (keyup.enter)=\"keyup()\"\r\n (click)=\"select()\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n (keyup.escape)=\"onBlur()\">\r\n <span><ng-content> an option </ng-content></span>\r\n</button>\r\n", styles: [":host{height:var(--gld-height)}button{--gld-background: transparent;--gld-background--hover: var(--gld-gray-transparent--010);--gld-color:
|
|
1038
|
+
args: [{ selector: 'gld-select-option', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n [tabindex]=\"disabled() ? '-1' : '0'\"\r\n (keyup.enter)=\"keyup()\"\r\n (click)=\"select()\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n (keyup.escape)=\"onBlur()\">\r\n <span><ng-content> an option </ng-content></span>\r\n</button>\r\n", styles: [":host{height:var(--gld-height)}button{--gld-background: transparent;--gld-background--hover: var(--gld-gray-transparent--010);--gld-color: var(--gld-foreground-color);--gld-color--hover: var(--gld-blue);--gld-radius: var(--gld-radius--xxxs);padding:var(--gld-spacing--xs) var(--gld-spacing--s);width:100%;height:100%;max-width:100%;background:var(--gld-background);color:var(--gld-color);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;display:flex;align-items:center;-webkit-user-select:none;user-select:none;outline:none;border:none;border-radius:var(--gld-radius);cursor:pointer}button:hover,button:focus{--gld-background: var(--gld-background--hover);--gld-color: var(--gld-color--hover)}button span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
|
|
1039
1039
|
}] });
|
|
1040
1040
|
|
|
1041
1041
|
// Angular Imports
|
|
@@ -1157,7 +1157,7 @@ class SelectComponent {
|
|
|
1157
1157
|
useExisting: forwardRef(() => SelectComponent),
|
|
1158
1158
|
multi: true,
|
|
1159
1159
|
},
|
|
1160
|
-
], 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: [".input{--gld-color: var(--gld-darkblue);--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-darkblue);--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}.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 });
|
|
1160
|
+
], 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(--gray-transparent--040),var(--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(--gray-transparent--060),var(--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 });
|
|
1161
1161
|
}
|
|
1162
1162
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: SelectComponent, decorators: [{
|
|
1163
1163
|
type: Component,
|
|
@@ -1167,7 +1167,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
1167
1167
|
useExisting: forwardRef(() => SelectComponent),
|
|
1168
1168
|
multi: true,
|
|
1169
1169
|
},
|
|
1170
|
-
], 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: [".input{--gld-color: var(--gld-darkblue);--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-darkblue);--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}.select-menu--opened{height:calc(var(--gld-option-height) * var(--gld-option-items) + var(--gld-padding) * 2);padding:var(--gld-padding)}\n"] }]
|
|
1170
|
+
], 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(--gray-transparent--040),var(--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(--gray-transparent--060),var(--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"] }]
|
|
1171
1171
|
}], ctorParameters: () => [] });
|
|
1172
1172
|
|
|
1173
1173
|
// Angular Imports
|
|
@@ -1192,11 +1192,11 @@ class LoaderComponent {
|
|
|
1192
1192
|
radius = input(false, { transform: booleanAttribute });
|
|
1193
1193
|
minHeight = input('auto');
|
|
1194
1194
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1195
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: LoaderComponent, isStandalone: true, selector: "gld-loader", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article\n class=\"loader\"\n [class.loader--loading]=\"loading()\"\n [class.loader--background]=\"background()\"\n [class.loader--radius]=\"radius()\"\n [style.minHeight]=\"minHeight()\">\n <!-- Content -->\n <ng-content />\n\n <!-- Loader -->\n @if (loading()) {\n <section class=\"loader-loading\">\n <svg class=\"container\" viewBox=\"0 0 40 40\" height=\"40\" width=\"40\">\n <circle\n class=\"track\"\n cx=\"20\"\n cy=\"20\"\n r=\"17.5\"\n pathlength=\"100\"\n stroke-width=\"5px\"\n fill=\"none\" />\n <circle\n class=\"car\"\n cx=\"20\"\n cy=\"20\"\n r=\"17.5\"\n pathlength=\"100\"\n stroke-width=\"5px\"\n fill=\"none\" />\n </svg>\n </section>\n }\n</article>\n", styles: [":host{width:100%}.loader{--gld-color:
|
|
1195
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: LoaderComponent, isStandalone: true, selector: "gld-loader", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article\n class=\"loader\"\n [class.loader--loading]=\"loading()\"\n [class.loader--background]=\"background()\"\n [class.loader--radius]=\"radius()\"\n [style.minHeight]=\"minHeight()\">\n <!-- Content -->\n <ng-content />\n\n <!-- Loader -->\n @if (loading()) {\n <section class=\"loader-loading\">\n <svg class=\"container\" viewBox=\"0 0 40 40\" height=\"40\" width=\"40\">\n <circle\n class=\"track\"\n cx=\"20\"\n cy=\"20\"\n r=\"17.5\"\n pathlength=\"100\"\n stroke-width=\"5px\"\n fill=\"none\" />\n <circle\n class=\"car\"\n cx=\"20\"\n cy=\"20\"\n r=\"17.5\"\n pathlength=\"100\"\n stroke-width=\"5px\"\n fill=\"none\" />\n </svg>\n </section>\n }\n</article>\n", styles: [":host{width:100%}.loader{--gld-color: var(--gld-foreground-color);--gld-background: light-dark( var(--gld-whitelight-transparent--080), var(--gld-darkblue-transparent--080) );position:relative;color:var(--color)}.loader--radius{border-radius:var(--gld-spacing--xxxs)}.loader-loading{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:1}.loader--background .loader-loading{background:var(--gld-background)}.container{--uib-size: 40px;--uib-color: var(--gld-orange);--uib-speed: .8s;--uib-bg-opacity: .1;width:var(--uib-size);height:var(--uib-size);transform-origin:center;animation:rotate var(--uib-speed) linear infinite;will-change:transform;overflow:visible}.car{fill:none;stroke:var(--uib-color);stroke-dasharray:25,75;stroke-dashoffset:0;stroke-linecap:round;transition:stroke .5s ease}.track{fill:none;stroke:var(--uib-color);opacity:var(--uib-bg-opacity);transition:stroke .5s ease}@keyframes rotate{to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1196
1196
|
}
|
|
1197
1197
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: LoaderComponent, decorators: [{
|
|
1198
1198
|
type: Component,
|
|
1199
|
-
args: [{ standalone: true, selector: 'gld-loader', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article\n class=\"loader\"\n [class.loader--loading]=\"loading()\"\n [class.loader--background]=\"background()\"\n [class.loader--radius]=\"radius()\"\n [style.minHeight]=\"minHeight()\">\n <!-- Content -->\n <ng-content />\n\n <!-- Loader -->\n @if (loading()) {\n <section class=\"loader-loading\">\n <svg class=\"container\" viewBox=\"0 0 40 40\" height=\"40\" width=\"40\">\n <circle\n class=\"track\"\n cx=\"20\"\n cy=\"20\"\n r=\"17.5\"\n pathlength=\"100\"\n stroke-width=\"5px\"\n fill=\"none\" />\n <circle\n class=\"car\"\n cx=\"20\"\n cy=\"20\"\n r=\"17.5\"\n pathlength=\"100\"\n stroke-width=\"5px\"\n fill=\"none\" />\n </svg>\n </section>\n }\n</article>\n", styles: [":host{width:100%}.loader{--gld-color:
|
|
1199
|
+
args: [{ standalone: true, selector: 'gld-loader', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article\n class=\"loader\"\n [class.loader--loading]=\"loading()\"\n [class.loader--background]=\"background()\"\n [class.loader--radius]=\"radius()\"\n [style.minHeight]=\"minHeight()\">\n <!-- Content -->\n <ng-content />\n\n <!-- Loader -->\n @if (loading()) {\n <section class=\"loader-loading\">\n <svg class=\"container\" viewBox=\"0 0 40 40\" height=\"40\" width=\"40\">\n <circle\n class=\"track\"\n cx=\"20\"\n cy=\"20\"\n r=\"17.5\"\n pathlength=\"100\"\n stroke-width=\"5px\"\n fill=\"none\" />\n <circle\n class=\"car\"\n cx=\"20\"\n cy=\"20\"\n r=\"17.5\"\n pathlength=\"100\"\n stroke-width=\"5px\"\n fill=\"none\" />\n </svg>\n </section>\n }\n</article>\n", styles: [":host{width:100%}.loader{--gld-color: var(--gld-foreground-color);--gld-background: light-dark( var(--gld-whitelight-transparent--080), var(--gld-darkblue-transparent--080) );position:relative;color:var(--color)}.loader--radius{border-radius:var(--gld-spacing--xxxs)}.loader-loading{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:1}.loader--background .loader-loading{background:var(--gld-background)}.container{--uib-size: 40px;--uib-color: var(--gld-orange);--uib-speed: .8s;--uib-bg-opacity: .1;width:var(--uib-size);height:var(--uib-size);transform-origin:center;animation:rotate var(--uib-speed) linear infinite;will-change:transform;overflow:visible}.car{fill:none;stroke:var(--uib-color);stroke-dasharray:25,75;stroke-dashoffset:0;stroke-linecap:round;transition:stroke .5s ease}.track{fill:none;stroke:var(--uib-color);opacity:var(--uib-bg-opacity);transition:stroke .5s ease}@keyframes rotate{to{transform:rotate(360deg)}}\n"] }]
|
|
1200
1200
|
}] });
|
|
1201
1201
|
|
|
1202
1202
|
// Angular Imports
|
|
@@ -1408,11 +1408,11 @@ class TableComponent {
|
|
|
1408
1408
|
}, {});
|
|
1409
1409
|
}
|
|
1410
1410
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1411
|
-
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}:host{width:100%}.table{--gld-color: light-dark(var(--gld-darkblue), var(--gld-whitelight));--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-border-radius: var(--gld-radius--xxs);--gld-background: light-dark(var(--gld-whitelight), var(--gld-darkblue));--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(--background);overflow:hidden;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gray-transparent--040),var(--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(--gray-transparent--040),var(--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(--gray-transparent--060),var(--gray-transparent--040))}.table-content{display:flex;flex-wrap:nowrap;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gray-transparent--040),var(--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(--gray-transparent--040),var(--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(--gray-transparent--060),var(--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 });
|
|
1411
|
+
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(--background);overflow:hidden;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gray-transparent--040),var(--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(--gray-transparent--060),var(--gray-transparent--040))}.table-content{display:flex;flex-wrap:nowrap;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gray-transparent--040),var(--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(--gray-transparent--060),var(--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 });
|
|
1412
1412
|
}
|
|
1413
1413
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: TableComponent, decorators: [{
|
|
1414
1414
|
type: Component,
|
|
1415
|
-
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}:host{width:100%}.table{--gld-color: light-dark(var(--gld-darkblue), var(--gld-whitelight));--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-border-radius: var(--gld-radius--xxs);--gld-background: light-dark(var(--gld-whitelight), var(--gld-darkblue));--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(--background);overflow:hidden;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gray-transparent--040),var(--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(--gray-transparent--040),var(--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(--gray-transparent--060),var(--gray-transparent--040))}.table-content{display:flex;flex-wrap:nowrap;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gray-transparent--040),var(--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(--gray-transparent--040),var(--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(--gray-transparent--060),var(--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"] }]
|
|
1415
|
+
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(--background);overflow:hidden;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gray-transparent--040),var(--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(--gray-transparent--060),var(--gray-transparent--040))}.table-content{display:flex;flex-wrap:nowrap;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gray-transparent--040),var(--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(--gray-transparent--060),var(--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"] }]
|
|
1416
1416
|
}] });
|
|
1417
1417
|
|
|
1418
1418
|
// Angular Imports
|
|
@@ -1422,11 +1422,11 @@ class TileComponent {
|
|
|
1422
1422
|
background = input(false, { transform: booleanAttribute });
|
|
1423
1423
|
hover = input(false, { transform: booleanAttribute });
|
|
1424
1424
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: TileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1425
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: TileComponent, isStandalone: true, selector: "gld-tile", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, paddingSize: { classPropertyName: "paddingSize", publicName: "paddingSize", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article\n class=\"tile tile--{{ color() }} tile--padding-{{ paddingSize() }}\"\n [class.tile--background]=\"background()\"\n [class.tile--hover]=\"hover()\">\n <section class=\"tile-content\">\n <ng-content />\n </section>\n</article>\n", styles: [":host{width:100%;height:auto;position:relative;z-index:1}.tile{--gld-
|
|
1425
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: TileComponent, isStandalone: true, selector: "gld-tile", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, paddingSize: { classPropertyName: "paddingSize", publicName: "paddingSize", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article\n class=\"tile tile--{{ color() }} tile--padding-{{ paddingSize() }}\"\n [class.tile--background]=\"background()\"\n [class.tile--hover]=\"hover()\">\n <section class=\"tile-content\">\n <ng-content />\n </section>\n</article>\n", styles: [":host{width:100%;height:auto;position:relative;z-index:1}.tile{--gld-background: initial;--gld-background--hover: initial;--gld-border-color: transparent;--gld-padding-size: 0;--gld-radius: var(--gld-radius--xxs);width:inherit;height:inherit;position:relative;padding:var(--gld-padding-size);background:var(--gld-background);border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-radius);overflow:hidden;will-change:background;transition:background var(--gld-animation-time--150)}.tile--hover:hover,.tile--hover:focus{background:var(--gld-background--hover)}.tile.tile--hover{cursor:pointer}.tile--default{--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) )}.tile--default.tile--background{--gld-background: var(--gld-gray-transparent--010)}.tile--default.tile--hover{--gld-background--hover: var(--gld-gray-transparent--020)}.tile--blue{--gld-border-color: var(--gld-blue-transparent--020)}.tile--blue.tile--background{--gld-background: var(--gld-blue-transparent--005)}.tile--blue.tile--hover{--gld-background--hover: var(--gld-blue-transparent--010)}.tile--green{--gld-border-color: var(--gld-green-transparent--020)}.tile--green.tile--background{--gld-background: var(--gld-green-transparent--005)}.tile--green.tile--hover{--gld-background--hover: var(--gld-green-transparent--010)}.tile--purple{--gld-border-color: var(--gld-purple-transparent--020)}.tile--purple.tile--background{--gld-background: var(--gld-purple-transparent--005)}.tile--purple.tile--hover{--gld-background--hover: var(--gld-purple-transparent--010)}.tile--mustard{--gld-border-color: var(--gld-mustard-transparent--020)}.tile--mustard.tile--background{--gld-background: var(--gld-mustard-transparent--005)}.tile--mustard.tile--hover{--gld-background--hover: var(--gld-mustard-transparent--010)}.tile--orange{--gld-border-color: var(--gld-orange-transparent--020)}.tile--orange.tile--background{--gld-background: var(--gld-orange-transparent--005)}.tile--orange.tile--hover{--gld-background--hover: var(--gld-orange-transparent--010)}.tile--pink{--gld-border-color: var(--gld-pink-transparent--020)}.tile--pink.tile--background{--gld-background: var(--gld-pink-transparent--005)}.tile--pink.tile--hover{--gld-background--hover: var(--gld-pink-transparent--010)}.tile--red{--gld-border-color: var(--gld-red-transparent--020)}.tile--red.tile--background{--gld-background: var(--gld-red-transparent--005)}.tile--red.tile--hover{--gld-background--hover: var(--gld-red-transparent--010)}.tile--padding-tiny{--gld-padding-size: var(--gld-spacing--xxxs)}.tile--padding-small{--gld-padding-size: var(--gld-spacing--xs)}.tile--padding-normal{--gld-padding-size: var(--gld-spacing--s)}.tile--padding-medium{--gld-padding-size: var(--gld-spacing--l)}.tile--padding-large{--gld-padding-size: var(--gld-spacing--xl)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1426
1426
|
}
|
|
1427
1427
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: TileComponent, decorators: [{
|
|
1428
1428
|
type: Component,
|
|
1429
|
-
args: [{ selector: 'gld-tile', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article\n class=\"tile tile--{{ color() }} tile--padding-{{ paddingSize() }}\"\n [class.tile--background]=\"background()\"\n [class.tile--hover]=\"hover()\">\n <section class=\"tile-content\">\n <ng-content />\n </section>\n</article>\n", styles: [":host{width:100%;height:auto;position:relative;z-index:1}.tile{--gld-
|
|
1429
|
+
args: [{ selector: 'gld-tile', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article\n class=\"tile tile--{{ color() }} tile--padding-{{ paddingSize() }}\"\n [class.tile--background]=\"background()\"\n [class.tile--hover]=\"hover()\">\n <section class=\"tile-content\">\n <ng-content />\n </section>\n</article>\n", styles: [":host{width:100%;height:auto;position:relative;z-index:1}.tile{--gld-background: initial;--gld-background--hover: initial;--gld-border-color: transparent;--gld-padding-size: 0;--gld-radius: var(--gld-radius--xxs);width:inherit;height:inherit;position:relative;padding:var(--gld-padding-size);background:var(--gld-background);border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-radius);overflow:hidden;will-change:background;transition:background var(--gld-animation-time--150)}.tile--hover:hover,.tile--hover:focus{background:var(--gld-background--hover)}.tile.tile--hover{cursor:pointer}.tile--default{--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) )}.tile--default.tile--background{--gld-background: var(--gld-gray-transparent--010)}.tile--default.tile--hover{--gld-background--hover: var(--gld-gray-transparent--020)}.tile--blue{--gld-border-color: var(--gld-blue-transparent--020)}.tile--blue.tile--background{--gld-background: var(--gld-blue-transparent--005)}.tile--blue.tile--hover{--gld-background--hover: var(--gld-blue-transparent--010)}.tile--green{--gld-border-color: var(--gld-green-transparent--020)}.tile--green.tile--background{--gld-background: var(--gld-green-transparent--005)}.tile--green.tile--hover{--gld-background--hover: var(--gld-green-transparent--010)}.tile--purple{--gld-border-color: var(--gld-purple-transparent--020)}.tile--purple.tile--background{--gld-background: var(--gld-purple-transparent--005)}.tile--purple.tile--hover{--gld-background--hover: var(--gld-purple-transparent--010)}.tile--mustard{--gld-border-color: var(--gld-mustard-transparent--020)}.tile--mustard.tile--background{--gld-background: var(--gld-mustard-transparent--005)}.tile--mustard.tile--hover{--gld-background--hover: var(--gld-mustard-transparent--010)}.tile--orange{--gld-border-color: var(--gld-orange-transparent--020)}.tile--orange.tile--background{--gld-background: var(--gld-orange-transparent--005)}.tile--orange.tile--hover{--gld-background--hover: var(--gld-orange-transparent--010)}.tile--pink{--gld-border-color: var(--gld-pink-transparent--020)}.tile--pink.tile--background{--gld-background: var(--gld-pink-transparent--005)}.tile--pink.tile--hover{--gld-background--hover: var(--gld-pink-transparent--010)}.tile--red{--gld-border-color: var(--gld-red-transparent--020)}.tile--red.tile--background{--gld-background: var(--gld-red-transparent--005)}.tile--red.tile--hover{--gld-background--hover: var(--gld-red-transparent--010)}.tile--padding-tiny{--gld-padding-size: var(--gld-spacing--xxxs)}.tile--padding-small{--gld-padding-size: var(--gld-spacing--xs)}.tile--padding-normal{--gld-padding-size: var(--gld-spacing--s)}.tile--padding-medium{--gld-padding-size: var(--gld-spacing--l)}.tile--padding-large{--gld-padding-size: var(--gld-spacing--xl)}\n"] }]
|
|
1430
1430
|
}] });
|
|
1431
1431
|
|
|
1432
1432
|
// Always first
|