@iamgld/ui 1.16.1 → 1.17.3
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 +48 -47
- package/fesm2022/iamgld-ui.mjs.map +1 -1
- package/lib/components/index.d.ts +1 -1
- package/lib/components/{tiles/tile → tile}/tile.component.d.ts +1 -1
- package/lib/models/icon/icon.model.d.ts +26 -26
- package/lib/models/tiles/tile.model.d.ts +1 -0
- package/package.json +1 -1
- package/public/styles/layers/_setting.scss +10 -5
package/fesm2022/iamgld-ui.mjs
CHANGED
|
@@ -89,32 +89,32 @@ var Icons;
|
|
|
89
89
|
Icons["checkboxCircleLine"] = "checkbox-circle-line";
|
|
90
90
|
Icons["checkboxBlankCircleLine"] = "checkbox-blank-circle-line";
|
|
91
91
|
Icons["loader4Fill"] = "loader-4-fill";
|
|
92
|
-
Icons["logoutCircleLine"] = "
|
|
93
|
-
Icons["loginCircleLine"] = "
|
|
94
|
-
Icons["gitRepositoryLine"] = "
|
|
95
|
-
Icons["fileList3Line"] = "
|
|
96
|
-
Icons["menuLine"] = "
|
|
97
|
-
Icons["sunLine"] = "
|
|
98
|
-
Icons["moonClearLine"] = "
|
|
99
|
-
Icons["englishInput"] = "
|
|
100
|
-
Icons["translate"] = "
|
|
101
|
-
Icons["user4Line"] = "
|
|
102
|
-
Icons["shapesLine"] = "
|
|
103
|
-
Icons["closeLine"] = "
|
|
104
|
-
Icons["eyeLine"] = "
|
|
105
|
-
Icons["eyeCloseLine"] = "
|
|
106
|
-
Icons["linkedinBoxFill"] = "
|
|
107
|
-
Icons["githubFill"] = "
|
|
108
|
-
Icons["instagramFill"] = "
|
|
109
|
-
Icons["twitterXFill"] = "
|
|
110
|
-
Icons["downloadCloud2Line"] = "
|
|
111
|
-
Icons["globeLine"] = "
|
|
112
|
-
Icons["mailSendLine"] = "
|
|
113
|
-
Icons["pagesLine"] = "
|
|
114
|
-
Icons["gitForkLine"] = "
|
|
115
|
-
Icons["gitRepositoryPrivateLine"] = "
|
|
116
|
-
Icons["starLine"] = "
|
|
117
|
-
Icons["calendar2Line"] = "
|
|
92
|
+
Icons["logoutCircleLine"] = "ri-logout-circle-line";
|
|
93
|
+
Icons["loginCircleLine"] = "ri-login-circle-line";
|
|
94
|
+
Icons["gitRepositoryLine"] = "ri-git-repository-line";
|
|
95
|
+
Icons["fileList3Line"] = "ri-file-list-3-line";
|
|
96
|
+
Icons["menuLine"] = "ri-menu-line";
|
|
97
|
+
Icons["sunLine"] = "ri-sun-line";
|
|
98
|
+
Icons["moonClearLine"] = "ri-moon-clear-line";
|
|
99
|
+
Icons["englishInput"] = "ri-english-input";
|
|
100
|
+
Icons["translate"] = "ri-translate";
|
|
101
|
+
Icons["user4Line"] = "ri-user-4-line";
|
|
102
|
+
Icons["shapesLine"] = "ri-shapes-line";
|
|
103
|
+
Icons["closeLine"] = "ri-close-line";
|
|
104
|
+
Icons["eyeLine"] = "ri-eye-line";
|
|
105
|
+
Icons["eyeCloseLine"] = "ri-eye-close-line";
|
|
106
|
+
Icons["linkedinBoxFill"] = "ri-linkedin-box-fill";
|
|
107
|
+
Icons["githubFill"] = "ri-github-fill";
|
|
108
|
+
Icons["instagramFill"] = "ri-instagram-fill";
|
|
109
|
+
Icons["twitterXFill"] = "ri-twitter-x-fill";
|
|
110
|
+
Icons["downloadCloud2Line"] = "ri-download-cloud-2-line";
|
|
111
|
+
Icons["globeLine"] = "ri-globe-line";
|
|
112
|
+
Icons["mailSendLine"] = "ri-mail-send-line";
|
|
113
|
+
Icons["pagesLine"] = "ri-pages-line";
|
|
114
|
+
Icons["gitForkLine"] = "ri-git-fork-line";
|
|
115
|
+
Icons["gitRepositoryPrivateLine"] = "ri-git-repository-private-line";
|
|
116
|
+
Icons["starLine"] = "ri-star-line";
|
|
117
|
+
Icons["calendar2Line"] = "ri-calendar-2-line";
|
|
118
118
|
})(Icons || (Icons = {}));
|
|
119
119
|
var IconsSize;
|
|
120
120
|
(function (IconsSize) {
|
|
@@ -133,6 +133,7 @@ var IconsSpace;
|
|
|
133
133
|
|
|
134
134
|
var TileColor;
|
|
135
135
|
(function (TileColor) {
|
|
136
|
+
TileColor["default"] = "default";
|
|
136
137
|
TileColor["pink"] = "pink";
|
|
137
138
|
TileColor["purple"] = "purple";
|
|
138
139
|
TileColor["mustard"] = "mustard";
|
|
@@ -426,11 +427,11 @@ class ButtonComponent {
|
|
|
426
427
|
this.emitClick();
|
|
427
428
|
}
|
|
428
429
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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
|
|
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--030);--gld-background--hover: var(--gld-gray-transparent--030);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 });
|
|
430
431
|
}
|
|
431
432
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
432
433
|
type: Component,
|
|
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
|
|
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--030);--gld-background--hover: var(--gld-gray-transparent--030);pointer-events:none;cursor:not-allowed}\n"] }]
|
|
434
435
|
}] });
|
|
435
436
|
|
|
436
437
|
// Angular Imports
|
|
@@ -562,7 +563,7 @@ class InputDateComponent {
|
|
|
562
563
|
useExisting: forwardRef(() => InputDateComponent),
|
|
563
564
|
multi: true,
|
|
564
565
|
},
|
|
565
|
-
], 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-darkblue);--gld-color--disabled: var(--gld-gray
|
|
566
|
+
], 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-darkblue);--gld-color--disabled: var(--gld-gray);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray);--gld-border-color: var(--gld-gray);--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: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 });
|
|
566
567
|
}
|
|
567
568
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: InputDateComponent, decorators: [{
|
|
568
569
|
type: Component,
|
|
@@ -572,17 +573,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
572
573
|
useExisting: forwardRef(() => InputDateComponent),
|
|
573
574
|
multi: true,
|
|
574
575
|
},
|
|
575
|
-
], 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-darkblue);--gld-color--disabled: var(--gld-gray
|
|
576
|
+
], 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-darkblue);--gld-color--disabled: var(--gld-gray);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray);--gld-border-color: var(--gld-gray);--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:0;display:inline-block;color:var(--gld-color);will-change:transform,color;transition:color var(--gld-animation-time) ease;cursor:pointer}\n"] }]
|
|
576
577
|
}], ctorParameters: () => [] });
|
|
577
578
|
|
|
578
579
|
// Angular Imports
|
|
579
580
|
class InputHintComponent {
|
|
580
581
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: InputHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
581
|
-
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--030);--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 });
|
|
582
583
|
}
|
|
583
584
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: InputHintComponent, decorators: [{
|
|
584
585
|
type: Component,
|
|
585
|
-
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--030);--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"] }]
|
|
586
587
|
}] });
|
|
587
588
|
|
|
588
589
|
// Angular Imports
|
|
@@ -643,7 +644,7 @@ class InputComponent {
|
|
|
643
644
|
useExisting: forwardRef(() => InputComponent),
|
|
644
645
|
multi: true,
|
|
645
646
|
},
|
|
646
|
-
], 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-darkblue);--gld-color--disabled: var(--gld-gray
|
|
647
|
+
], 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-darkblue);--gld-color--disabled: var(--gld-gray);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray);--gld-border-color: var(--gld-gray);--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: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 });
|
|
647
648
|
}
|
|
648
649
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: InputComponent, decorators: [{
|
|
649
650
|
type: Component,
|
|
@@ -653,7 +654,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
653
654
|
useExisting: forwardRef(() => InputComponent),
|
|
654
655
|
multi: true,
|
|
655
656
|
},
|
|
656
|
-
], 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-darkblue);--gld-color--disabled: var(--gld-gray
|
|
657
|
+
], 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-darkblue);--gld-color--disabled: var(--gld-gray);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray);--gld-border-color: var(--gld-gray);--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:0;display:inline-block;color:var(--gld-color);will-change:transform,color;transition:color var(--gld-animation-time) ease;cursor:pointer}\n"] }]
|
|
657
658
|
}], ctorParameters: () => [] });
|
|
658
659
|
|
|
659
660
|
// Angular Imports
|
|
@@ -678,11 +679,11 @@ class RadioButtonComponent {
|
|
|
678
679
|
this.changeFocus.emit(false);
|
|
679
680
|
}
|
|
680
681
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
681
|
-
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-darkblue);--gld-color--disabled: var(--gld-gray
|
|
682
|
+
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-darkblue);--gld-color--disabled: var(--gld-gray);--gld-dot-color: var(--gld-blue);--gld-dot-color--outer: var(--gld-gray);--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 });
|
|
682
683
|
}
|
|
683
684
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: RadioButtonComponent, decorators: [{
|
|
684
685
|
type: Component,
|
|
685
|
-
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-darkblue);--gld-color--disabled: var(--gld-gray
|
|
686
|
+
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-darkblue);--gld-color--disabled: var(--gld-gray);--gld-dot-color: var(--gld-blue);--gld-dot-color--outer: var(--gld-gray);--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"] }]
|
|
686
687
|
}] });
|
|
687
688
|
|
|
688
689
|
// Angular Imports
|
|
@@ -766,7 +767,7 @@ class RadioGroupComponent {
|
|
|
766
767
|
useExisting: forwardRef(() => RadioGroupComponent),
|
|
767
768
|
multi: true,
|
|
768
769
|
},
|
|
769
|
-
], 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 class=\"radio__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-darkblue);--gld-color--disabled: var(--gld-gray
|
|
770
|
+
], 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 class=\"radio__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-darkblue);--gld-color--disabled: var(--gld-gray);margin-bottom:var(--gld-spacing--xxxs)}.radio__label{margin-bottom:var(--gld-spacing--xxxs);color:var(--gld-color)}.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 });
|
|
770
771
|
}
|
|
771
772
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: RadioGroupComponent, decorators: [{
|
|
772
773
|
type: Component,
|
|
@@ -776,7 +777,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
776
777
|
useExisting: forwardRef(() => RadioGroupComponent),
|
|
777
778
|
multi: true,
|
|
778
779
|
},
|
|
779
|
-
], 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 class=\"radio__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-darkblue);--gld-color--disabled: var(--gld-gray
|
|
780
|
+
], 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 class=\"radio__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-darkblue);--gld-color--disabled: var(--gld-gray);margin-bottom:var(--gld-spacing--xxxs)}.radio__label{margin-bottom:var(--gld-spacing--xxxs);color:var(--gld-color)}.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"] }]
|
|
780
781
|
}], ctorParameters: () => [] });
|
|
781
782
|
|
|
782
783
|
// Angular Imports
|
|
@@ -799,11 +800,11 @@ class SelectOptionComponent {
|
|
|
799
800
|
this.changeFocus.emit(false);
|
|
800
801
|
}
|
|
801
802
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: SelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
802
|
-
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-
|
|
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--030);--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 });
|
|
803
804
|
}
|
|
804
805
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: SelectOptionComponent, decorators: [{
|
|
805
806
|
type: Component,
|
|
806
|
-
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-
|
|
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--030);--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"] }]
|
|
807
808
|
}] });
|
|
808
809
|
|
|
809
810
|
// Angular Imports
|
|
@@ -925,7 +926,7 @@ class SelectComponent {
|
|
|
925
926
|
useExisting: forwardRef(() => SelectComponent),
|
|
926
927
|
multi: true,
|
|
927
928
|
},
|
|
928
|
-
], 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
|
|
929
|
+
], 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);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray);--gld-border-color: var(--gld-gray);--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: var(--gld-whitelight);--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);position:relative;background:transparent}.select-menu{position:absolute;z-index:1;top:calc(var(--gld-height) + 20px);left:0;height:0;padding:0;display:grid;grid-template-columns:1fr;background:var(--gld-background);color:var(--gld-darkblue);box-shadow:inset 0 0 0 var(--gld-border-size) var(--gld-gray);border-radius:var(--gld-radius--xxs);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 });
|
|
929
930
|
}
|
|
930
931
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: SelectComponent, decorators: [{
|
|
931
932
|
type: Component,
|
|
@@ -935,7 +936,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
935
936
|
useExisting: forwardRef(() => SelectComponent),
|
|
936
937
|
multi: true,
|
|
937
938
|
},
|
|
938
|
-
], 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
|
|
939
|
+
], 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);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray);--gld-border-color: var(--gld-gray);--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: var(--gld-whitelight);--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);position:relative;background:transparent}.select-menu{position:absolute;z-index:1;top:calc(var(--gld-height) + 20px);left:0;height:0;padding:0;display:grid;grid-template-columns:1fr;background:var(--gld-background);color:var(--gld-darkblue);box-shadow:inset 0 0 0 var(--gld-border-size) var(--gld-gray);border-radius:var(--gld-radius--xxs);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"] }]
|
|
939
940
|
}], ctorParameters: () => [] });
|
|
940
941
|
|
|
941
942
|
// Angular Imports
|
|
@@ -996,7 +997,7 @@ class TextareaComponent {
|
|
|
996
997
|
useExisting: forwardRef(() => TextareaComponent),
|
|
997
998
|
multi: true,
|
|
998
999
|
},
|
|
999
|
-
], 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-darkblue);--gld-color--disabled: var(--gld-gray
|
|
1000
|
+
], 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-darkblue);--gld-color--disabled: var(--gld-gray);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray);--gld-border-color: var(--gld-gray);--gld-label-color: var(--gld-darkblue);--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 });
|
|
1000
1001
|
}
|
|
1001
1002
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
1002
1003
|
type: Component,
|
|
@@ -1006,21 +1007,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
1006
1007
|
useExisting: forwardRef(() => TextareaComponent),
|
|
1007
1008
|
multi: true,
|
|
1008
1009
|
},
|
|
1009
|
-
], 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-darkblue);--gld-color--disabled: var(--gld-gray
|
|
1010
|
+
], 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-darkblue);--gld-color--disabled: var(--gld-gray);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray);--gld-border-color: var(--gld-gray);--gld-label-color: var(--gld-darkblue);--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"] }]
|
|
1010
1011
|
}], ctorParameters: () => [] });
|
|
1011
1012
|
|
|
1012
1013
|
// Angular Imports
|
|
1013
1014
|
class TileComponent {
|
|
1014
|
-
color = input(TileColor.
|
|
1015
|
+
color = input(TileColor.default);
|
|
1015
1016
|
paddingSize = input(TilePaddingSize.zero);
|
|
1016
1017
|
background = input(false, { transform: booleanAttribute });
|
|
1017
1018
|
hover = input(false, { transform: booleanAttribute });
|
|
1018
1019
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: TileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1019
|
-
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--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 });
|
|
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--060), var(--gld-gray-transparent--030) )}.tile--default.tile--background{--gld-background: var(--gld-gray-transparent--020)}.tile--default.tile--hover{--gld-background--hover: var(--gld-gray-transparent--030)}.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 });
|
|
1020
1021
|
}
|
|
1021
1022
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: TileComponent, decorators: [{
|
|
1022
1023
|
type: Component,
|
|
1023
|
-
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--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"] }]
|
|
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--060), var(--gld-gray-transparent--030) )}.tile--default.tile--background{--gld-background: var(--gld-gray-transparent--020)}.tile--default.tile--hover{--gld-background--hover: var(--gld-gray-transparent--030)}.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"] }]
|
|
1024
1025
|
}] });
|
|
1025
1026
|
|
|
1026
1027
|
/*
|