@iamgld/ui 1.14.1 → 1.15.0
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 +8 -6
- package/fesm2022/iamgld-ui.mjs.map +1 -1
- package/lib/components/buttons/button/button.component.d.ts +2 -2
- package/lib/components/buttons/icon-button/icon-button.component.d.ts +1 -1
- package/lib/components/buttons/link/link.component.d.ts +1 -1
- package/lib/components/icon/icon.component.d.ts +1 -1
- package/lib/components/tiles/tile/tile.component.d.ts +1 -1
- package/package.json +3 -3
- package/public/styles/layers/_objects.scss +0 -145
- package/public/styles/layers/_tools.scss +24 -257
package/fesm2022/iamgld-ui.mjs
CHANGED
|
@@ -381,13 +381,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
381
381
|
class ImageComponent {
|
|
382
382
|
src = input.required();
|
|
383
383
|
alt = input.required();
|
|
384
|
+
// srcset = input<string>('')
|
|
385
|
+
// sizes = input<string>('')
|
|
384
386
|
priority = input(false, { transform: booleanAttribute });
|
|
385
387
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
386
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: ImageComponent, isStandalone: true, selector: "gld-image", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: true, transformFunction: null }, priority: { classPropertyName: "priority", publicName: "priority", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (priority()) {\r\n
|
|
388
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: ImageComponent, isStandalone: true, selector: "gld-image", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: true, transformFunction: null }, priority: { classPropertyName: "priority", publicName: "priority", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- @if (srcset() && sizes()) {\r\n @if (priority()) {\r\n <img fill priority alt=\"{{ alt() }}\" [ngSrc]=\"src()\" [ngSrcset]=\"srcset()\" [sizes]=\"sizes()\" />\r\n } @else {\r\n <img\r\n fill\r\n alt=\"{{ alt() }}\"\r\n [ngSrc]=\"src()\"\r\n [ngSrcset]=\"srcset()\"\r\n [sizes]=\"sizes()\"\r\n loading=\"lazy\" />\r\n }\r\n} @else {\r\n @if (priority()) {\r\n <img fill priority alt=\"{{ alt() }}\" [ngSrc]=\"src()\" />\r\n } @else {\r\n <img fill alt=\"{{ alt() }}\" [ngSrc]=\"src()\" loading=\"lazy\" />\r\n }\r\n} -->\r\n\r\n@if (priority()) {\r\n <img fill priority alt=\"{{ alt() }}\" [ngSrc]=\"src()\" />\r\n} @else {\r\n <img fill alt=\"{{ alt() }}\" [ngSrc]=\"src()\" loading=\"lazy\" />\r\n}\r\n", styles: [":host{position:relative;aspect-ratio:1/1;overflow:hidden;display:inline-block;object-fit:inherit;width:inherit;height:inherit}img{width:inherit;height:inherit;max-width:100%;max-height:100%;display:inherit;aspect-ratio:inherit;z-index:inherit;object-fit:inherit;border-radius:inherit;border:inherit;background-color:inherit;-webkit-user-select:none;user-select:none;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
387
389
|
}
|
|
388
390
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: ImageComponent, decorators: [{
|
|
389
391
|
type: Component,
|
|
390
|
-
args: [{ selector: 'gld-image', standalone: true, imports: [NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (priority()) {\r\n
|
|
392
|
+
args: [{ selector: 'gld-image', standalone: true, imports: [NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- @if (srcset() && sizes()) {\r\n @if (priority()) {\r\n <img fill priority alt=\"{{ alt() }}\" [ngSrc]=\"src()\" [ngSrcset]=\"srcset()\" [sizes]=\"sizes()\" />\r\n } @else {\r\n <img\r\n fill\r\n alt=\"{{ alt() }}\"\r\n [ngSrc]=\"src()\"\r\n [ngSrcset]=\"srcset()\"\r\n [sizes]=\"sizes()\"\r\n loading=\"lazy\" />\r\n }\r\n} @else {\r\n @if (priority()) {\r\n <img fill priority alt=\"{{ alt() }}\" [ngSrc]=\"src()\" />\r\n } @else {\r\n <img fill alt=\"{{ alt() }}\" [ngSrc]=\"src()\" loading=\"lazy\" />\r\n }\r\n} -->\r\n\r\n@if (priority()) {\r\n <img fill priority alt=\"{{ alt() }}\" [ngSrc]=\"src()\" />\r\n} @else {\r\n <img fill alt=\"{{ alt() }}\" [ngSrc]=\"src()\" loading=\"lazy\" />\r\n}\r\n", styles: [":host{position:relative;aspect-ratio:1/1;overflow:hidden;display:inline-block;object-fit:inherit;width:inherit;height:inherit}img{width:inherit;height:inherit;max-width:100%;max-height:100%;display:inherit;aspect-ratio:inherit;z-index:inherit;object-fit:inherit;border-radius:inherit;border:inherit;background-color:inherit;-webkit-user-select:none;user-select:none;pointer-events:none}\n"] }]
|
|
391
393
|
}] });
|
|
392
394
|
|
|
393
395
|
// Angular Imports
|
|
@@ -424,11 +426,11 @@ class ButtonComponent {
|
|
|
424
426
|
this.emitClick();
|
|
425
427
|
}
|
|
426
428
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
427
|
-
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-
|
|
429
|
+
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-transparent--060);--gld-background: var(--gld-gray-transparent--010);--gld-background--hover: var(--gld-gray-transparent--010);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 });
|
|
428
430
|
}
|
|
429
431
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
430
432
|
type: Component,
|
|
431
|
-
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-
|
|
433
|
+
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-transparent--060);--gld-background: var(--gld-gray-transparent--010);--gld-background--hover: var(--gld-gray-transparent--010);pointer-events:none;cursor:not-allowed}\n"] }]
|
|
432
434
|
}] });
|
|
433
435
|
|
|
434
436
|
// Angular Imports
|
|
@@ -475,11 +477,11 @@ class IconButtonComponent {
|
|
|
475
477
|
this.emitClick();
|
|
476
478
|
}
|
|
477
479
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
478
|
-
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),color var(--gld-animation-time--150)}.button:hover,.button:focus{background:var(--gld-background--hover)}.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--010);--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 });
|
|
480
|
+
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--010);--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 });
|
|
479
481
|
}
|
|
480
482
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: IconButtonComponent, decorators: [{
|
|
481
483
|
type: Component,
|
|
482
|
-
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),color var(--gld-animation-time--150)}.button:hover,.button:focus{background:var(--gld-background--hover)}.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--010);--gld-background--hover: var(--gld-gray-transparent--020)}\n"] }]
|
|
484
|
+
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--010);--gld-background--hover: var(--gld-gray-transparent--020)}\n"] }]
|
|
483
485
|
}] });
|
|
484
486
|
|
|
485
487
|
// Angular Imports
|