@iamgld/ui 1.17.4 → 1.17.5
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 +10 -10
- package/package.json +1 -1
package/fesm2022/iamgld-ui.mjs
CHANGED
|
@@ -427,11 +427,11 @@ class ButtonComponent {
|
|
|
427
427
|
this.emitClick();
|
|
428
428
|
}
|
|
429
429
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
430
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: ButtonComponent, isStandalone: true, selector: "gld-button", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, full: { classPropertyName: "full", publicName: "full", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\r\n id=\"{{ name() }}\"\r\n attr.aria-label=\"{{ name() }}\"\r\n class=\"button button--{{ color() }} button--{{ size() }}\"\r\n [class.button--disabled]=\"disabled()\"\r\n [class.button--full]=\"full()\"\r\n (click)=\"emitClick()\"\r\n (keyup.enter)=\"keyup()\">\r\n @let innerIcon = icon();\r\n @if (innerIcon) {\r\n <gld-icon\r\n [moveTopToBottom]=\"moveTopToBottom()\"\r\n [moveLeftToRight]=\"moveLeftToRight()\"\r\n [icon]=\"innerIcon\"\r\n [size]=\"iconSize() ?? size()\"\r\n [disabled]=\"disabled()\" />\r\n }\r\n\r\n <span>\r\n <ng-content />\r\n </span>\r\n</button>\r\n", styles: [":host:has(.button--full){width:100%}.button{--gld-color: inherit;--gld-background: transparent;--gld-background--hover: transparent;--gld-padding: var(--gld-spacing--xxs) var(--gld-spacing--xs);--gld-radius: var(--gld-radius--xxxs);--gld-font-size: var(--gld-font-size--normal);outline:none;border:0;padding:var(--gld-padding);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);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,.button:focus{--gld-background: var(--gld-background--hover);transform:scale(.95)}.button:active{transform:scale(1)}.button span{text-transform:capitalize;-webkit-user-select:none;user-select:none}.button--pink{--gld-color: var(--gld-pink);--gld-background: var(--gld-pink-transparent--010);--gld-background--hover: var(--gld-pink-transparent--020)}.button--purple{--gld-color: var(--gld-purple);--gld-background: var(--gld-purple-transparent--010);--gld-background--hover: var(--gld-purple-transparent--020)}.button--mustard{--gld-color: var(--gld-mustard);--gld-background: var(--gld-mustard-transparent--010);--gld-background--hover: var(--gld-mustard-transparent--020)}.button--orange{--gld-color: var(--gld-orange);--gld-background: var(--gld-orange-transparent--010);--gld-background--hover: var(--gld-orange-transparent--020)}.button--blue{--gld-color: var(--gld-blue);--gld-background: var(--gld-blue-transparent--010);--gld-background--hover: var(--gld-blue-transparent--020)}.button--red{--gld-color: var(--gld-red);--gld-background: var(--gld-red-transparent--010);--gld-background--hover: var(--gld-red-transparent--020)}.button--green{--gld-color: var(--gld-green);--gld-background: var(--gld-green-transparent--010);--gld-background--hover: var(--gld-green-transparent--020)}.button--tiny{--gld-font-size: var(--gld-font-size--small);--gld-padding: var(--gld-spacing--xxxs) var(--gld-spacing--xxs)}.button--small{--gld-font-size: var(--gld-font-size--small);--gld-padding: var(--gld-spacing--xxs)}.button--normal{--gld-font-size: var(--gld-font-size--normal);--gld-padding: var(--gld-spacing--xxs) var(--gld-spacing--xs)}.button--medium{--gld-padding: var(--gld-spacing--xs) var(--gld-spacing--m)}.button--large{--gld-font-size: var(--gld-font-size--heading-three);--gld-padding: var(--gld-spacing--xs) var(--gld-spacing--l)}.button--disabled{--gld-color: var(--gld-gray);--gld-background: var(--gld-gray-transparent--
|
|
430
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: ButtonComponent, isStandalone: true, selector: "gld-button", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, full: { classPropertyName: "full", publicName: "full", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\r\n id=\"{{ name() }}\"\r\n attr.aria-label=\"{{ name() }}\"\r\n class=\"button button--{{ color() }} button--{{ size() }}\"\r\n [class.button--disabled]=\"disabled()\"\r\n [class.button--full]=\"full()\"\r\n (click)=\"emitClick()\"\r\n (keyup.enter)=\"keyup()\">\r\n @let innerIcon = icon();\r\n @if (innerIcon) {\r\n <gld-icon\r\n [moveTopToBottom]=\"moveTopToBottom()\"\r\n [moveLeftToRight]=\"moveLeftToRight()\"\r\n [icon]=\"innerIcon\"\r\n [size]=\"iconSize() ?? size()\"\r\n [disabled]=\"disabled()\" />\r\n }\r\n\r\n <span>\r\n <ng-content />\r\n </span>\r\n</button>\r\n", styles: [":host:has(.button--full){width:100%}.button{--gld-color: inherit;--gld-background: transparent;--gld-background--hover: transparent;--gld-padding: var(--gld-spacing--xxs) var(--gld-spacing--xs);--gld-radius: var(--gld-radius--xxxs);--gld-font-size: var(--gld-font-size--normal);outline:none;border:0;padding:var(--gld-padding);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);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,.button:focus{--gld-background: var(--gld-background--hover);transform:scale(.95)}.button:active{transform:scale(1)}.button span{text-transform:capitalize;-webkit-user-select:none;user-select:none}.button--pink{--gld-color: var(--gld-pink);--gld-background: var(--gld-pink-transparent--010);--gld-background--hover: var(--gld-pink-transparent--020)}.button--purple{--gld-color: var(--gld-purple);--gld-background: var(--gld-purple-transparent--010);--gld-background--hover: var(--gld-purple-transparent--020)}.button--mustard{--gld-color: var(--gld-mustard);--gld-background: var(--gld-mustard-transparent--010);--gld-background--hover: var(--gld-mustard-transparent--020)}.button--orange{--gld-color: var(--gld-orange);--gld-background: var(--gld-orange-transparent--010);--gld-background--hover: var(--gld-orange-transparent--020)}.button--blue{--gld-color: var(--gld-blue);--gld-background: var(--gld-blue-transparent--010);--gld-background--hover: var(--gld-blue-transparent--020)}.button--red{--gld-color: var(--gld-red);--gld-background: var(--gld-red-transparent--010);--gld-background--hover: var(--gld-red-transparent--020)}.button--green{--gld-color: var(--gld-green);--gld-background: var(--gld-green-transparent--010);--gld-background--hover: var(--gld-green-transparent--020)}.button--tiny{--gld-font-size: var(--gld-font-size--small);--gld-padding: var(--gld-spacing--xxxs) var(--gld-spacing--xxs)}.button--small{--gld-font-size: var(--gld-font-size--small);--gld-padding: var(--gld-spacing--xxs)}.button--normal{--gld-font-size: var(--gld-font-size--normal);--gld-padding: var(--gld-spacing--xxs) var(--gld-spacing--xs)}.button--medium{--gld-padding: var(--gld-spacing--xs) var(--gld-spacing--m)}.button--large{--gld-font-size: var(--gld-font-size--heading-three);--gld-padding: var(--gld-spacing--xs) var(--gld-spacing--l)}.button--disabled{--gld-color: var(--gld-gray);--gld-background: var(--gld-gray-transparent--020);--gld-background--hover: var(--gld-gray-transparent--020);pointer-events:none;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gld-icon", inputs: ["icon", "size", "space", "moveTopToBottom", "moveLeftToRight", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
431
431
|
}
|
|
432
432
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
433
433
|
type: Component,
|
|
434
|
-
args: [{ selector: 'gld-button', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n id=\"{{ name() }}\"\r\n attr.aria-label=\"{{ name() }}\"\r\n class=\"button button--{{ color() }} button--{{ size() }}\"\r\n [class.button--disabled]=\"disabled()\"\r\n [class.button--full]=\"full()\"\r\n (click)=\"emitClick()\"\r\n (keyup.enter)=\"keyup()\">\r\n @let innerIcon = icon();\r\n @if (innerIcon) {\r\n <gld-icon\r\n [moveTopToBottom]=\"moveTopToBottom()\"\r\n [moveLeftToRight]=\"moveLeftToRight()\"\r\n [icon]=\"innerIcon\"\r\n [size]=\"iconSize() ?? size()\"\r\n [disabled]=\"disabled()\" />\r\n }\r\n\r\n <span>\r\n <ng-content />\r\n </span>\r\n</button>\r\n", styles: [":host:has(.button--full){width:100%}.button{--gld-color: inherit;--gld-background: transparent;--gld-background--hover: transparent;--gld-padding: var(--gld-spacing--xxs) var(--gld-spacing--xs);--gld-radius: var(--gld-radius--xxxs);--gld-font-size: var(--gld-font-size--normal);outline:none;border:0;padding:var(--gld-padding);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);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,.button:focus{--gld-background: var(--gld-background--hover);transform:scale(.95)}.button:active{transform:scale(1)}.button span{text-transform:capitalize;-webkit-user-select:none;user-select:none}.button--pink{--gld-color: var(--gld-pink);--gld-background: var(--gld-pink-transparent--010);--gld-background--hover: var(--gld-pink-transparent--020)}.button--purple{--gld-color: var(--gld-purple);--gld-background: var(--gld-purple-transparent--010);--gld-background--hover: var(--gld-purple-transparent--020)}.button--mustard{--gld-color: var(--gld-mustard);--gld-background: var(--gld-mustard-transparent--010);--gld-background--hover: var(--gld-mustard-transparent--020)}.button--orange{--gld-color: var(--gld-orange);--gld-background: var(--gld-orange-transparent--010);--gld-background--hover: var(--gld-orange-transparent--020)}.button--blue{--gld-color: var(--gld-blue);--gld-background: var(--gld-blue-transparent--010);--gld-background--hover: var(--gld-blue-transparent--020)}.button--red{--gld-color: var(--gld-red);--gld-background: var(--gld-red-transparent--010);--gld-background--hover: var(--gld-red-transparent--020)}.button--green{--gld-color: var(--gld-green);--gld-background: var(--gld-green-transparent--010);--gld-background--hover: var(--gld-green-transparent--020)}.button--tiny{--gld-font-size: var(--gld-font-size--small);--gld-padding: var(--gld-spacing--xxxs) var(--gld-spacing--xxs)}.button--small{--gld-font-size: var(--gld-font-size--small);--gld-padding: var(--gld-spacing--xxs)}.button--normal{--gld-font-size: var(--gld-font-size--normal);--gld-padding: var(--gld-spacing--xxs) var(--gld-spacing--xs)}.button--medium{--gld-padding: var(--gld-spacing--xs) var(--gld-spacing--m)}.button--large{--gld-font-size: var(--gld-font-size--heading-three);--gld-padding: var(--gld-spacing--xs) var(--gld-spacing--l)}.button--disabled{--gld-color: var(--gld-gray);--gld-background: var(--gld-gray-transparent--
|
|
434
|
+
args: [{ selector: 'gld-button', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n id=\"{{ name() }}\"\r\n attr.aria-label=\"{{ name() }}\"\r\n class=\"button button--{{ color() }} button--{{ size() }}\"\r\n [class.button--disabled]=\"disabled()\"\r\n [class.button--full]=\"full()\"\r\n (click)=\"emitClick()\"\r\n (keyup.enter)=\"keyup()\">\r\n @let innerIcon = icon();\r\n @if (innerIcon) {\r\n <gld-icon\r\n [moveTopToBottom]=\"moveTopToBottom()\"\r\n [moveLeftToRight]=\"moveLeftToRight()\"\r\n [icon]=\"innerIcon\"\r\n [size]=\"iconSize() ?? size()\"\r\n [disabled]=\"disabled()\" />\r\n }\r\n\r\n <span>\r\n <ng-content />\r\n </span>\r\n</button>\r\n", styles: [":host:has(.button--full){width:100%}.button{--gld-color: inherit;--gld-background: transparent;--gld-background--hover: transparent;--gld-padding: var(--gld-spacing--xxs) var(--gld-spacing--xs);--gld-radius: var(--gld-radius--xxxs);--gld-font-size: var(--gld-font-size--normal);outline:none;border:0;padding:var(--gld-padding);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);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,.button:focus{--gld-background: var(--gld-background--hover);transform:scale(.95)}.button:active{transform:scale(1)}.button span{text-transform:capitalize;-webkit-user-select:none;user-select:none}.button--pink{--gld-color: var(--gld-pink);--gld-background: var(--gld-pink-transparent--010);--gld-background--hover: var(--gld-pink-transparent--020)}.button--purple{--gld-color: var(--gld-purple);--gld-background: var(--gld-purple-transparent--010);--gld-background--hover: var(--gld-purple-transparent--020)}.button--mustard{--gld-color: var(--gld-mustard);--gld-background: var(--gld-mustard-transparent--010);--gld-background--hover: var(--gld-mustard-transparent--020)}.button--orange{--gld-color: var(--gld-orange);--gld-background: var(--gld-orange-transparent--010);--gld-background--hover: var(--gld-orange-transparent--020)}.button--blue{--gld-color: var(--gld-blue);--gld-background: var(--gld-blue-transparent--010);--gld-background--hover: var(--gld-blue-transparent--020)}.button--red{--gld-color: var(--gld-red);--gld-background: var(--gld-red-transparent--010);--gld-background--hover: var(--gld-red-transparent--020)}.button--green{--gld-color: var(--gld-green);--gld-background: var(--gld-green-transparent--010);--gld-background--hover: var(--gld-green-transparent--020)}.button--tiny{--gld-font-size: var(--gld-font-size--small);--gld-padding: var(--gld-spacing--xxxs) var(--gld-spacing--xxs)}.button--small{--gld-font-size: var(--gld-font-size--small);--gld-padding: var(--gld-spacing--xxs)}.button--normal{--gld-font-size: var(--gld-font-size--normal);--gld-padding: var(--gld-spacing--xxs) var(--gld-spacing--xs)}.button--medium{--gld-padding: var(--gld-spacing--xs) var(--gld-spacing--m)}.button--large{--gld-font-size: var(--gld-font-size--heading-three);--gld-padding: var(--gld-spacing--xs) var(--gld-spacing--l)}.button--disabled{--gld-color: var(--gld-gray);--gld-background: var(--gld-gray-transparent--020);--gld-background--hover: var(--gld-gray-transparent--020);pointer-events:none;cursor:not-allowed}\n"] }]
|
|
435
435
|
}] });
|
|
436
436
|
|
|
437
437
|
// Angular Imports
|
|
@@ -478,11 +478,11 @@ class IconButtonComponent {
|
|
|
478
478
|
this.emitClick();
|
|
479
479
|
}
|
|
480
480
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
481
|
-
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\r\n id=\"{{ name() }}\"\r\n attr.aria-label=\"{{ name() }}\"\r\n class=\"button button--{{ color() }}\"\r\n [class.button--disabled]=\"disabled()\"\r\n [class.button--background]=\"background()\"\r\n (click)=\"emitClick()\"\r\n (keyup.enter)=\"keyup()\">\r\n <gld-icon\r\n [icon]=\"icon()\"\r\n [size]=\"iconSize()\"\r\n [space]=\"space()\"\r\n [moveTopToBottom]=\"moveTopToBottom()\"\r\n [moveLeftToRight]=\"moveLeftToRight()\"\r\n [disabled]=\"disabled()\" />\r\n</button>\r\n", styles: [".button{--gld-color: inherit;--gld-background: transparent;--gld-background--hover: transparent;--gld-radius: var(--gld-radius--xxxs);--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);transform:scale(.95)}.button:active{transform:scale(1)}.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--
|
|
481
|
+
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\r\n id=\"{{ name() }}\"\r\n attr.aria-label=\"{{ name() }}\"\r\n class=\"button button--{{ color() }}\"\r\n [class.button--disabled]=\"disabled()\"\r\n [class.button--background]=\"background()\"\r\n (click)=\"emitClick()\"\r\n (keyup.enter)=\"keyup()\">\r\n <gld-icon\r\n [icon]=\"icon()\"\r\n [size]=\"iconSize()\"\r\n [space]=\"space()\"\r\n [moveTopToBottom]=\"moveTopToBottom()\"\r\n [moveLeftToRight]=\"moveLeftToRight()\"\r\n [disabled]=\"disabled()\" />\r\n</button>\r\n", styles: [".button{--gld-color: inherit;--gld-background: transparent;--gld-background--hover: transparent;--gld-radius: var(--gld-radius--xxxs);--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);transform:scale(.95)}.button:active{transform:scale(1)}.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 });
|
|
482
482
|
}
|
|
483
483
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: IconButtonComponent, decorators: [{
|
|
484
484
|
type: Component,
|
|
485
|
-
args: [{ selector: 'gld-icon-button', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n id=\"{{ name() }}\"\r\n attr.aria-label=\"{{ name() }}\"\r\n class=\"button button--{{ color() }}\"\r\n [class.button--disabled]=\"disabled()\"\r\n [class.button--background]=\"background()\"\r\n (click)=\"emitClick()\"\r\n (keyup.enter)=\"keyup()\">\r\n <gld-icon\r\n [icon]=\"icon()\"\r\n [size]=\"iconSize()\"\r\n [space]=\"space()\"\r\n [moveTopToBottom]=\"moveTopToBottom()\"\r\n [moveLeftToRight]=\"moveLeftToRight()\"\r\n [disabled]=\"disabled()\" />\r\n</button>\r\n", styles: [".button{--gld-color: inherit;--gld-background: transparent;--gld-background--hover: transparent;--gld-radius: var(--gld-radius--xxxs);--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);transform:scale(.95)}.button:active{transform:scale(1)}.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--
|
|
485
|
+
args: [{ selector: 'gld-icon-button', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n id=\"{{ name() }}\"\r\n attr.aria-label=\"{{ name() }}\"\r\n class=\"button button--{{ color() }}\"\r\n [class.button--disabled]=\"disabled()\"\r\n [class.button--background]=\"background()\"\r\n (click)=\"emitClick()\"\r\n (keyup.enter)=\"keyup()\">\r\n <gld-icon\r\n [icon]=\"icon()\"\r\n [size]=\"iconSize()\"\r\n [space]=\"space()\"\r\n [moveTopToBottom]=\"moveTopToBottom()\"\r\n [moveLeftToRight]=\"moveLeftToRight()\"\r\n [disabled]=\"disabled()\" />\r\n</button>\r\n", styles: [".button{--gld-color: inherit;--gld-background: transparent;--gld-background--hover: transparent;--gld-radius: var(--gld-radius--xxxs);--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);transform:scale(.95)}.button:active{transform:scale(1)}.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"] }]
|
|
486
486
|
}] });
|
|
487
487
|
|
|
488
488
|
// Angular Imports
|
|
@@ -579,11 +579,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
579
579
|
// Angular Imports
|
|
580
580
|
class InputHintComponent {
|
|
581
581
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: InputHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
582
|
-
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-darkblue);--gld-background: var(--gld-gray-transparent--
|
|
582
|
+
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-darkblue);--gld-background: var(--gld-gray-transparent--020);--gld-radius: var(--gld-radius--xxxs);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 });
|
|
583
583
|
}
|
|
584
584
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: InputHintComponent, decorators: [{
|
|
585
585
|
type: Component,
|
|
586
|
-
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-darkblue);--gld-background: var(--gld-gray-transparent--
|
|
586
|
+
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-darkblue);--gld-background: var(--gld-gray-transparent--020);--gld-radius: var(--gld-radius--xxxs);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"] }]
|
|
587
587
|
}] });
|
|
588
588
|
|
|
589
589
|
// Angular Imports
|
|
@@ -800,11 +800,11 @@ class SelectOptionComponent {
|
|
|
800
800
|
this.changeFocus.emit(false);
|
|
801
801
|
}
|
|
802
802
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: SelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
803
|
-
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--
|
|
803
|
+
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-darkblue);--gld-color--hover: var(--gld-blue);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:2px;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 });
|
|
804
804
|
}
|
|
805
805
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: SelectOptionComponent, decorators: [{
|
|
806
806
|
type: Component,
|
|
807
|
-
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--
|
|
807
|
+
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-darkblue);--gld-color--hover: var(--gld-blue);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:2px;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"] }]
|
|
808
808
|
}] });
|
|
809
809
|
|
|
810
810
|
// Angular Imports
|
|
@@ -1017,11 +1017,11 @@ class TileComponent {
|
|
|
1017
1017
|
background = input(false, { transform: booleanAttribute });
|
|
1018
1018
|
hover = input(false, { transform: booleanAttribute });
|
|
1019
1019
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: TileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1020
|
-
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\r\n class=\"tile tile--{{ color() }} tile--padding-{{ paddingSize() }}\"\r\n [class.tile--background]=\"background()\"\r\n [class.tile--hover]=\"hover()\">\r\n <section class=\"tile-content\">\r\n <ng-content />\r\n </section>\r\n</article>\r\n", styles: [":host{width:100%;height:auto;position:relative;z-index:1}.tile{--gld-border-radius-inner: var(--gld-radius--xxs);--gld-border-radius-outer: calc(var(--gld-radius--xxs) + var(--gld-border-size));--gld-background: initial;--gld-background--hover: initial;--gld-border-color: transparent;--gld-padding-size: 0;--gld-radius: var(--gld-radius--xxxs);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);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--
|
|
1020
|
+
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\r\n class=\"tile tile--{{ color() }} tile--padding-{{ paddingSize() }}\"\r\n [class.tile--background]=\"background()\"\r\n [class.tile--hover]=\"hover()\">\r\n <section class=\"tile-content\">\r\n <ng-content />\r\n </section>\r\n</article>\r\n", styles: [":host{width:100%;height:auto;position:relative;z-index:1}.tile{--gld-border-radius-inner: var(--gld-radius--xxs);--gld-border-radius-outer: calc(var(--gld-radius--xxs) + var(--gld-border-size));--gld-background: initial;--gld-background--hover: initial;--gld-border-color: transparent;--gld-padding-size: 0;--gld-radius: var(--gld-radius--xxxs);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);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 });
|
|
1021
1021
|
}
|
|
1022
1022
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: TileComponent, decorators: [{
|
|
1023
1023
|
type: Component,
|
|
1024
|
-
args: [{ selector: 'gld-tile', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article\r\n class=\"tile tile--{{ color() }} tile--padding-{{ paddingSize() }}\"\r\n [class.tile--background]=\"background()\"\r\n [class.tile--hover]=\"hover()\">\r\n <section class=\"tile-content\">\r\n <ng-content />\r\n </section>\r\n</article>\r\n", styles: [":host{width:100%;height:auto;position:relative;z-index:1}.tile{--gld-border-radius-inner: var(--gld-radius--xxs);--gld-border-radius-outer: calc(var(--gld-radius--xxs) + var(--gld-border-size));--gld-background: initial;--gld-background--hover: initial;--gld-border-color: transparent;--gld-padding-size: 0;--gld-radius: var(--gld-radius--xxxs);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);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--
|
|
1024
|
+
args: [{ selector: 'gld-tile', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article\r\n class=\"tile tile--{{ color() }} tile--padding-{{ paddingSize() }}\"\r\n [class.tile--background]=\"background()\"\r\n [class.tile--hover]=\"hover()\">\r\n <section class=\"tile-content\">\r\n <ng-content />\r\n </section>\r\n</article>\r\n", styles: [":host{width:100%;height:auto;position:relative;z-index:1}.tile{--gld-border-radius-inner: var(--gld-radius--xxs);--gld-border-radius-outer: calc(var(--gld-radius--xxs) + var(--gld-border-size));--gld-background: initial;--gld-background--hover: initial;--gld-border-color: transparent;--gld-padding-size: 0;--gld-radius: var(--gld-radius--xxxs);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);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"] }]
|
|
1025
1025
|
}] });
|
|
1026
1026
|
|
|
1027
1027
|
/*
|