@iamgld/ui 21.3.0 → 21.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/iamgld-ui.mjs +359 -379
  2. package/fesm2022/iamgld-ui.mjs.map +1 -1
  3. package/package.json +6 -6
  4. package/types/iamgld-ui.d.ts +460 -254
package/fesm2022/iamgld-ui.mjs CHANGED
@@ -11,203 +11,183 @@ import { signalStore, withState, withMethods, patchState, withHooks, watchState
11
11
  import { HttpClient, HttpParams } from '@angular/common/http';
12
12
  import { TranslocoService } from '@jsverse/transloco';
13
13
 
14
- var ButtonColor;
15
- (function (ButtonColor) {
16
- ButtonColor["pink"] = "pink";
17
- ButtonColor["purple"] = "purple";
18
- ButtonColor["mustard"] = "mustard";
19
- ButtonColor["orange"] = "orange";
20
- ButtonColor["red"] = "red";
21
- ButtonColor["blue"] = "blue";
22
- ButtonColor["green"] = "green";
23
- })(ButtonColor || (ButtonColor = {}));
24
- var ButtonSize;
25
- (function (ButtonSize) {
26
- ButtonSize["tiny"] = "tiny";
27
- ButtonSize["small"] = "small";
28
- ButtonSize["normal"] = "normal";
29
- ButtonSize["medium"] = "medium";
30
- ButtonSize["large"] = "large";
31
- })(ButtonSize || (ButtonSize = {}));
32
-
33
- var DropdownType;
34
- (function (DropdownType) {
35
- DropdownType["button"] = "button";
36
- DropdownType["iconButton"] = "iconButton";
37
- })(DropdownType || (DropdownType = {}));
38
- var DropdownDirection;
39
- (function (DropdownDirection) {
40
- DropdownDirection["left"] = "left";
41
- DropdownDirection["right"] = "right";
42
- })(DropdownDirection || (DropdownDirection = {}));
43
-
44
- var LinkType;
45
- (function (LinkType) {
46
- LinkType["default"] = "default";
47
- })(LinkType || (LinkType = {}));
48
- var LinkAlign;
49
- (function (LinkAlign) {
50
- LinkAlign["left"] = "left";
51
- LinkAlign["right"] = "right";
52
- LinkAlign["center"] = "center";
53
- })(LinkAlign || (LinkAlign = {}));
54
-
55
- var RadioDirection;
56
- (function (RadioDirection) {
57
- RadioDirection["horizontal"] = "horizontal";
58
- RadioDirection["vertical"] = "vertical";
59
- })(RadioDirection || (RadioDirection = {}));
60
-
61
- var SelectType;
62
- (function (SelectType) {
63
- SelectType["default"] = "default";
64
- SelectType["inline"] = "inline";
65
- })(SelectType || (SelectType = {}));
66
-
67
- var Icons;
68
- (function (Icons) {
69
- Icons["arrowDownSLine"] = "arrow-down-s-line";
70
- Icons["arrowUpSLine"] = "arrow-up-s-line";
71
- Icons["checkboxCircleLine"] = "checkbox-circle-line";
72
- Icons["checkboxBlankCircleLine"] = "checkbox-blank-circle-line";
73
- Icons["loader4Fill"] = "loader-4-fill";
74
- Icons["logoutCircleLine"] = "ri-logout-circle-line";
75
- Icons["loginCircleLine"] = "ri-login-circle-line";
76
- Icons["gitRepositoryLine"] = "ri-git-repository-line";
77
- Icons["fileList3Line"] = "ri-file-list-3-line";
78
- Icons["menuLine"] = "ri-menu-line";
79
- Icons["sunLine"] = "ri-sun-line";
80
- Icons["moonClearLine"] = "ri-moon-clear-line";
81
- Icons["englishInput"] = "ri-english-input";
82
- Icons["translate"] = "ri-translate";
83
- Icons["user4Line"] = "ri-user-4-line";
84
- Icons["shapesLine"] = "ri-shapes-line";
85
- Icons["closeLine"] = "ri-close-line";
86
- Icons["eyeLine"] = "ri-eye-line";
87
- Icons["eyeCloseLine"] = "ri-eye-close-line";
88
- Icons["linkedinBoxFill"] = "ri-linkedin-box-fill";
89
- Icons["githubFill"] = "ri-github-fill";
90
- Icons["instagramFill"] = "ri-instagram-fill";
91
- Icons["twitterXFill"] = "ri-twitter-x-fill";
92
- Icons["downloadCloud2Line"] = "ri-download-cloud-2-line";
93
- Icons["globeLine"] = "ri-globe-line";
94
- Icons["mailSendLine"] = "ri-mail-send-line";
95
- Icons["pagesLine"] = "ri-pages-line";
96
- Icons["gitForkLine"] = "ri-git-fork-line";
97
- Icons["gitRepositoryPrivateLine"] = "ri-git-repository-private-line";
98
- Icons["starLine"] = "ri-star-line";
99
- Icons["calendar2Line"] = "ri-calendar-2-line";
100
- Icons["macLine"] = "ri-mac-line";
101
- Icons["more2Fill"] = "ri-more-2-fill";
102
- Icons["editLine"] = "ri-edit-line";
103
- Icons["deleteBinLine"] = "ri-delete-bin-line";
104
- })(Icons || (Icons = {}));
105
- var IconsSize;
106
- (function (IconsSize) {
107
- IconsSize["tiny"] = "tiny";
108
- IconsSize["small"] = "small";
109
- IconsSize["normal"] = "normal";
110
- IconsSize["medium"] = "medium";
111
- IconsSize["large"] = "large";
112
- })(IconsSize || (IconsSize = {}));
113
- var IconsSpace;
114
- (function (IconsSpace) {
115
- IconsSpace["left"] = "left";
116
- IconsSpace["right"] = "right";
117
- IconsSpace["none"] = "none";
118
- })(IconsSpace || (IconsSpace = {}));
119
-
120
- var TableColumnActionType;
121
- (function (TableColumnActionType) {
122
- TableColumnActionType["show"] = "show";
123
- TableColumnActionType["open"] = "open";
124
- TableColumnActionType["update"] = "update";
125
- TableColumnActionType["delete"] = "delete";
126
- })(TableColumnActionType || (TableColumnActionType = {}));
127
- var TableSearchAction;
128
- (function (TableSearchAction) {
129
- TableSearchAction["searching"] = "searching";
130
- TableSearchAction["cleared"] = "cleared";
131
- })(TableSearchAction || (TableSearchAction = {}));
132
-
133
- var TileColor;
134
- (function (TileColor) {
135
- TileColor["default"] = "default";
136
- TileColor["pink"] = "pink";
137
- TileColor["purple"] = "purple";
138
- TileColor["mustard"] = "mustard";
139
- TileColor["orange"] = "orange";
140
- TileColor["red"] = "red";
141
- TileColor["blue"] = "blue";
142
- TileColor["green"] = "green";
143
- })(TileColor || (TileColor = {}));
144
- var TilePaddingSize;
145
- (function (TilePaddingSize) {
146
- TilePaddingSize["zero"] = "zero";
147
- TilePaddingSize["tiny"] = "tiny";
148
- TilePaddingSize["small"] = "small";
149
- TilePaddingSize["normal"] = "normal";
150
- TilePaddingSize["medium"] = "medium";
151
- TilePaddingSize["large"] = "large";
152
- })(TilePaddingSize || (TilePaddingSize = {}));
153
-
154
- var CookiesKeys;
155
- (function (CookiesKeys) {
156
- CookiesKeys["accessToken"] = "gld-access-token";
157
- CookiesKeys["refreshToken"] = "gld-refresh-token";
158
- })(CookiesKeys || (CookiesKeys = {}));
159
-
160
- var EnvironmentType;
161
- (function (EnvironmentType) {
162
- EnvironmentType["production"] = "production";
163
- EnvironmentType["staging"] = "staging";
164
- EnvironmentType["development"] = "development";
165
- EnvironmentType["local"] = "local";
166
- })(EnvironmentType || (EnvironmentType = {}));
167
-
168
- var TranslocoLanguageKey;
169
- (function (TranslocoLanguageKey) {
170
- TranslocoLanguageKey["spanish"] = "es";
171
- TranslocoLanguageKey["english"] = "en";
172
- })(TranslocoLanguageKey || (TranslocoLanguageKey = {}));
173
- var TranslocoLanguageName;
174
- (function (TranslocoLanguageName) {
175
- TranslocoLanguageName["spanish"] = "spanish";
176
- TranslocoLanguageName["english"] = "english";
177
- })(TranslocoLanguageName || (TranslocoLanguageName = {}));
178
-
179
- var UiTheme;
180
- (function (UiTheme) {
181
- UiTheme["dark"] = "theme--dark";
182
- UiTheme["light"] = "theme--light";
183
- UiTheme["system"] = "theme--system";
184
- })(UiTheme || (UiTheme = {}));
14
+ const BUTTON_COLORS = {
15
+ pink: 'pink',
16
+ purple: 'purple',
17
+ mustard: 'mustard',
18
+ orange: 'orange',
19
+ red: 'red',
20
+ blue: 'blue',
21
+ green: 'green',
22
+ };
23
+ const BUTTON_SIZES = {
24
+ tiny: 'tiny',
25
+ small: 'small',
26
+ normal: 'normal',
27
+ medium: 'medium',
28
+ large: 'large',
29
+ };
30
+
31
+ const DROPDOWN_TYPES = {
32
+ button: 'button',
33
+ iconButton: 'iconButton',
34
+ };
35
+ const DROPDOWN_DIRECTIONS = {
36
+ left: 'left',
37
+ right: 'right',
38
+ };
39
+
40
+ const LINK_TYPES = {
41
+ default: 'default',
42
+ };
43
+ const LINK_ALIGNS = {
44
+ left: 'left',
45
+ right: 'right',
46
+ center: 'center',
47
+ };
48
+
49
+ const RADIO_DIRECTIONS = {
50
+ horizontal: 'horizontal',
51
+ vertical: 'vertical',
52
+ };
53
+
54
+ const SELECT_TYPES = {
55
+ default: 'default',
56
+ inline: 'inline',
57
+ };
58
+
59
+ const ICONS = {
60
+ arrowDownSLine: 'arrow-down-s-line',
61
+ arrowUpSLine: 'arrow-up-s-line',
62
+ checkboxCircleLine: 'checkbox-circle-line',
63
+ checkboxBlankCircleLine: 'checkbox-blank-circle-line',
64
+ loader4Fill: 'loader-4-fill',
65
+ logoutCircleLine: 'ri-logout-circle-line',
66
+ loginCircleLine: 'ri-login-circle-line',
67
+ gitRepositoryLine: 'ri-git-repository-line',
68
+ fileList3Line: 'ri-file-list-3-line',
69
+ menuLine: 'ri-menu-line',
70
+ sunLine: 'ri-sun-line',
71
+ moonClearLine: 'ri-moon-clear-line',
72
+ englishInput: 'ri-english-input',
73
+ translate: 'ri-translate',
74
+ user4Line: 'ri-user-4-line',
75
+ shapesLine: 'ri-shapes-line',
76
+ closeLine: 'ri-close-line',
77
+ eyeLine: 'ri-eye-line',
78
+ eyeCloseLine: 'ri-eye-close-line',
79
+ linkedinBoxFill: 'ri-linkedin-box-fill',
80
+ githubFill: 'ri-github-fill',
81
+ instagramFill: 'ri-instagram-fill',
82
+ twitterXFill: 'ri-twitter-x-fill',
83
+ downloadCloud2Line: 'ri-download-cloud-2-line',
84
+ globeLine: 'ri-globe-line',
85
+ mailSendLine: 'ri-mail-send-line',
86
+ pagesLine: 'ri-pages-line',
87
+ gitForkLine: 'ri-git-fork-line',
88
+ gitRepositoryPrivateLine: 'ri-git-repository-private-line',
89
+ starLine: 'ri-star-line',
90
+ calendar2Line: 'ri-calendar-2-line',
91
+ macLine: 'ri-mac-line',
92
+ more2Fill: 'ri-more-2-fill',
93
+ editLine: 'ri-edit-line',
94
+ deleteBinLine: 'ri-delete-bin-line',
95
+ };
96
+ const ICONS_SIZES = {
97
+ tiny: 'tiny',
98
+ small: 'small',
99
+ normal: 'normal',
100
+ medium: 'medium',
101
+ large: 'large',
102
+ };
103
+ const ICONS_SPACES = {
104
+ left: 'left',
105
+ right: 'right',
106
+ none: 'none',
107
+ };
108
+
109
+ const TABLE_COLUMN_ACTION_TYPES = {
110
+ show: 'show',
111
+ open: 'open',
112
+ update: 'update',
113
+ delete: 'delete',
114
+ };
115
+ const TABLE_SEARCH_ACTIONS = {
116
+ searching: 'searching',
117
+ cleared: 'cleared',
118
+ };
119
+
120
+ const TILE_COLORS = {
121
+ default: 'default',
122
+ pink: 'pink',
123
+ purple: 'purple',
124
+ mustard: 'mustard',
125
+ orange: 'orange',
126
+ red: 'red',
127
+ blue: 'blue',
128
+ green: 'green',
129
+ };
130
+ const TILE_PADDING_SIZES = {
131
+ zero: 'zero',
132
+ tiny: 'tiny',
133
+ small: 'small',
134
+ normal: 'normal',
135
+ medium: 'medium',
136
+ large: 'large',
137
+ };
138
+
139
+ const COOKIES_KEYS = {
140
+ accessToken: 'gld-access-token',
141
+ refreshToken: 'gld-refresh-token',
142
+ };
143
+
144
+ const ENVIRONMENT_TYPES = {
145
+ production: 'production',
146
+ staging: 'staging',
147
+ development: 'development',
148
+ local: 'local',
149
+ };
150
+
151
+ const UI_THEMES = {
152
+ dark: 'theme--dark',
153
+ light: 'theme--light',
154
+ system: 'theme--system',
155
+ };
185
156
  const THEMES = [
186
157
  {
187
158
  label: 'light',
188
- icon: Icons.sunLine,
189
- value: UiTheme.light,
159
+ icon: ICONS.sunLine,
160
+ value: UI_THEMES.light,
190
161
  },
191
162
  {
192
163
  label: 'dark',
193
- icon: Icons.moonClearLine,
194
- value: UiTheme.dark,
164
+ icon: ICONS.moonClearLine,
165
+ value: UI_THEMES.dark,
195
166
  },
196
167
  {
197
168
  label: 'system',
198
- icon: Icons.macLine,
199
- value: UiTheme.system,
169
+ icon: ICONS.macLine,
170
+ value: UI_THEMES.system,
200
171
  },
201
172
  ];
202
173
 
174
+ const TRANSLOCO_LANGUAGE_KEYS = {
175
+ spanish: 'es',
176
+ english: 'en',
177
+ };
178
+ const TRANSLOCO_LANGUAGE_NAMES = {
179
+ spanish: 'spanish',
180
+ english: 'english',
181
+ };
182
+
203
183
  // Angular Imports
204
- class Icon {
184
+ class IconComponent {
205
185
  constructor() {
206
- this.IconsSpace = IconsSpace;
207
- this.Icons = Icons;
186
+ this.ICONS_SPACES = ICONS_SPACES;
187
+ this.ICONS = ICONS;
208
188
  this.icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : []));
209
- this.size = input(IconsSize.normal, ...(ngDevMode ? [{ debugName: "size" }] : []));
210
- this.space = input(IconsSpace.none, ...(ngDevMode ? [{ debugName: "space" }] : []));
189
+ this.size = input(ICONS_SIZES.normal, ...(ngDevMode ? [{ debugName: "size" }] : []));
190
+ this.space = input(ICONS_SPACES.none, ...(ngDevMode ? [{ debugName: "space" }] : []));
211
191
  this.moveTopToBottom = input(0, { ...(ngDevMode ? { debugName: "moveTopToBottom" } : {}), transform: numberAttribute });
212
192
  this.moveLeftToRight = input(0, { ...(ngDevMode ? { debugName: "moveLeftToRight" } : {}), transform: numberAttribute });
213
193
  this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
@@ -220,23 +200,23 @@ class Icon {
220
200
  keyup() {
221
201
  this.emitClick();
222
202
  }
223
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Icon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
224
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: Icon, isStandalone: true, selector: "gld-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, space: { classPropertyName: "space", publicName: "space", isSignal: true, isRequired: false, transformFunction: null }, moveTopToBottom: { classPropertyName: "moveTopToBottom", publicName: "moveTopToBottom", isSignal: true, isRequired: false, transformFunction: null }, moveLeftToRight: { classPropertyName: "moveLeftToRight", publicName: "moveLeftToRight", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<span\n tabindex=\"-1\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\"\n class=\"icon icon--{{ size() }}\"\n [class.icon--left]=\"space() === IconsSpace.left\"\n [class.icon--right]=\"space() === IconsSpace.right\"\n [style.right.px]=\"moveLeftToRight()\"\n [style.top.px]=\"moveTopToBottom()\">\n @switch (icon()) {\n @case (Icons.arrowDownSLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"></path>\n </svg>\n }\n @case (Icons.arrowUpSLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z\"></path>\n </svg>\n }\n @case (Icons.checkboxCircleLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11.0026 16L6.75999 11.7574L8.17421 10.3431L11.0026 13.1716L16.6595 7.51472L18.0737 8.92893L11.0026 16Z\"></path>\n </svg>\n }\n @case (Icons.checkboxBlankCircleLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z\"></path>\n </svg>\n }\n @case (Icons.loader4Fill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M18.364 5.63604L16.9497 7.05025C15.683 5.7835 13.933 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12H21C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C14.4853 3 16.7353 4.00736 18.364 5.63604Z\"></path>\n </svg>\n }\n @case (Icons.logoutCircleLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M5 11H13V13H5V16L0 12L5 8V11ZM3.99927 18H6.70835C8.11862 19.2447 9.97111 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C9.97111 4 8.11862 4.75527 6.70835 6H3.99927C5.82368 3.57111 8.72836 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C8.72836 22 5.82368 20.4289 3.99927 18Z\"></path>\n </svg>\n }\n @case (Icons.loginCircleLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M10 11V8L15 12L10 16V13H1V11H10ZM2.4578 15H4.58152C5.76829 17.9318 8.64262 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C8.64262 4 5.76829 6.06817 4.58152 9H2.4578C3.73207 4.94289 7.52236 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C7.52236 22 3.73207 19.0571 2.4578 15Z\"></path>\n </svg>\n }\n @case (Icons.gitRepositoryLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M13 21V23.5L10 21.5L7 23.5V21H6.5C4.567 21 3 19.433 3 17.5V5C3 3.34315 4.34315 2 6 2H20C20.5523 2 21 2.44772 21 3V20C21 20.5523 20.5523 21 20 21H13ZM13 19H19V16H6.5C5.67157 16 5 16.6716 5 17.5C5 18.3284 5.67157 19 6.5 19H7V17H13V19ZM19 14V4H6V14.0354C6.1633 14.0121 6.33024 14 6.5 14H19ZM7 5H9V7H7V5ZM7 8H9V10H7V8ZM7 11H9V13H7V11Z\"></path>\n </svg>\n }\n @case (Icons.fileList3Line) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M19 22H5C3.34315 22 2 20.6569 2 19V3C2 2.44772 2.44772 2 3 2H17C17.5523 2 18 2.44772 18 3V15H22V19C22 20.6569 20.6569 22 19 22ZM18 17V19C18 19.5523 18.4477 20 19 20C19.5523 20 20 19.5523 20 19V17H18ZM16 20V4H4V19C4 19.5523 4.44772 20 5 20H16ZM6 7H14V9H6V7ZM6 11H14V13H6V11ZM6 15H11V17H6V15Z\"></path>\n </svg>\n }\n @case (Icons.menuLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z\"></path>\n </svg>\n }\n @case (Icons.sunLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM11 1H13V4H11V1ZM11 20H13V23H11V20ZM3.51472 4.92893L4.92893 3.51472L7.05025 5.63604L5.63604 7.05025L3.51472 4.92893ZM16.9497 18.364L18.364 16.9497L20.4853 19.0711L19.0711 20.4853L16.9497 18.364ZM19.0711 3.51472L20.4853 4.92893L18.364 7.05025L16.9497 5.63604L19.0711 3.51472ZM5.63604 16.9497L7.05025 18.364L4.92893 20.4853L3.51472 19.0711L5.63604 16.9497ZM23 11V13H20V11H23ZM4 11V13H1V11H4Z\"></path>\n </svg>\n }\n @case (Icons.moonClearLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M10 6C10 10.4183 13.5817 14 18 14C19.4386 14 20.7885 13.6203 21.9549 12.9556C21.4738 18.0302 17.2005 22 12 22C6.47715 22 2 17.5228 2 12C2 6.79948 5.9698 2.52616 11.0444 2.04507C10.3797 3.21152 10 4.56142 10 6ZM4 12C4 16.4183 7.58172 20 12 20C14.9654 20 17.5757 18.3788 18.9571 15.9546C18.6407 15.9848 18.3214 16 18 16C12.4772 16 8 11.5228 8 6C8 5.67863 8.01524 5.35933 8.04536 5.04293C5.62119 6.42426 4 9.03458 4 12ZM18.1642 2.29104L19 2.5V3.5L18.1642 3.70896C17.4476 3.8881 16.8881 4.4476 16.709 5.16417L16.5 6H15.5L15.291 5.16417C15.1119 4.4476 14.5524 3.8881 13.8358 3.70896L13 3.5V2.5L13.8358 2.29104C14.5524 2.1119 15.1119 1.5524 15.291 0.835829L15.5 0H16.5L16.709 0.835829C16.8881 1.5524 17.4476 2.1119 18.1642 2.29104ZM23.1642 7.29104L24 7.5V8.5L23.1642 8.70896C22.4476 8.8881 21.8881 9.4476 21.709 10.1642L21.5 11H20.5L20.291 10.1642C20.1119 9.4476 19.5524 8.8881 18.8358 8.70896L18 8.5V7.5L18.8358 7.29104C19.5524 7.1119 20.1119 6.5524 20.291 5.83583L20.5 5H21.5L21.709 5.83583C21.8881 6.5524 22.4476 7.1119 23.1642 7.29104Z\"></path>\n </svg>\n }\n @case (Icons.englishInput) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M14 10H16L16.0005 10.7574C16.7154 10.279 17.5751 10 18.5 10C20.9853 10 23 12.0147 23 14.5V20H21V14.5C21 13.07 19.8255 12 18.5 12C17.1745 12 16 13.07 16 14.5V20H14V10ZM12 4V6H4V11H12V13H4V18H12V20H2V4H12Z\"></path>\n </svg>\n }\n @case (Icons.translate) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M5 15V17C5 18.0544 5.81588 18.9182 6.85074 18.9945L7 19H10V21H7C4.79086 21 3 19.2091 3 17V15H5ZM18 10L22.4 21H20.245L19.044 18H14.954L13.755 21H11.601L16 10H18ZM17 12.8852L15.753 16H18.245L17 12.8852ZM8 2V4H12V11H8V14H6V11H2V4H6V2H8ZM17 3C19.2091 3 21 4.79086 21 7V9H19V7C19 5.89543 18.1046 5 17 5H14V3H17ZM6 6H4V9H6V6ZM10 6H8V9H10V6Z\"></path>\n </svg>\n }\n @case (Icons.user4Line) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M5 20H19V22H5V20ZM12 18C7.58172 18 4 14.4183 4 10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10C20 14.4183 16.4183 18 12 18ZM12 16C15.3137 16 18 13.3137 18 10C18 6.68629 15.3137 4 12 4C8.68629 4 6 6.68629 6 10C6 13.3137 8.68629 16 12 16Z\"></path>\n </svg>\n }\n @case (Icons.shapesLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M11.9998 1L6 11H18L11.9998 1ZM11.9998 4.8873L14.4676 9H9.53232L11.9998 4.8873ZM6.75 20C5.23122 20 4 18.7688 4 17.25C4 15.7312 5.23122 14.5 6.75 14.5C8.26878 14.5 9.5 15.7312 9.5 17.25C9.5 18.7688 8.26878 20 6.75 20ZM6.75 22C9.37335 22 11.5 19.8734 11.5 17.25C11.5 14.6266 9.37335 12.5 6.75 12.5C4.12665 12.5 2 14.6266 2 17.25C2 19.8734 4.12665 22 6.75 22ZM15 15.5V19.5H19V15.5H15ZM13 21.5V13.5H21V21.5H13Z\"></path>\n </svg>\n }\n @case (Icons.closeLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z\"></path>\n </svg>\n }\n @case (Icons.eyeLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3ZM12.0003 19C16.2359 19 19.8603 16.052 20.7777 12C19.8603 7.94803 16.2359 5 12.0003 5C7.7646 5 4.14022 7.94803 3.22278 12C4.14022 16.052 7.7646 19 12.0003 19ZM12.0003 16.5C9.51498 16.5 7.50026 14.4853 7.50026 12C7.50026 9.51472 9.51498 7.5 12.0003 7.5C14.4855 7.5 16.5003 9.51472 16.5003 12C16.5003 14.4853 14.4855 16.5 12.0003 16.5ZM12.0003 14.5C13.381 14.5 14.5003 13.3807 14.5003 12C14.5003 10.6193 13.381 9.5 12.0003 9.5C10.6196 9.5 9.50026 10.6193 9.50026 12C9.50026 13.3807 10.6196 14.5 12.0003 14.5Z\"></path>\n </svg>\n }\n @case (Icons.eyeCloseLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M9.34268 18.7819L7.41083 18.2642L8.1983 15.3254C7.00919 14.8874 5.91661 14.2498 4.96116 13.4534L2.80783 15.6067L1.39362 14.1925L3.54695 12.0392C2.35581 10.6103 1.52014 8.87466 1.17578 6.96818L3.14386 6.61035C3.90289 10.8126 7.57931 14.0001 12.0002 14.0001C16.4211 14.0001 20.0976 10.8126 20.8566 6.61035L22.8247 6.96818C22.4803 8.87466 21.6446 10.6103 20.4535 12.0392L22.6068 14.1925L21.1926 15.6067L19.0393 13.4534C18.0838 14.2498 16.9912 14.8874 15.8021 15.3254L16.5896 18.2642L14.6578 18.7819L13.87 15.8418C13.2623 15.9459 12.6376 16.0001 12.0002 16.0001C11.3629 16.0001 10.7381 15.9459 10.1305 15.8418L9.34268 18.7819Z\"></path>\n </svg>\n }\n @case (Icons.linkedinBoxFill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M18.3362 18.339H15.6707V14.1622C15.6707 13.1662 15.6505 11.8845 14.2817 11.8845C12.892 11.8845 12.6797 12.9683 12.6797 14.0887V18.339H10.0142V9.75H12.5747V10.9207H12.6092C12.967 10.2457 13.837 9.53325 15.1367 9.53325C17.8375 9.53325 18.337 11.3108 18.337 13.6245V18.339H18.3362ZM7.00373 8.57475C6.14573 8.57475 5.45648 7.88025 5.45648 7.026C5.45648 6.1725 6.14648 5.47875 7.00373 5.47875C7.85873 5.47875 8.55173 6.1725 8.55173 7.026C8.55173 7.88025 7.85798 8.57475 7.00373 8.57475ZM8.34023 18.339H5.66723V9.75H8.34023V18.339ZM19.6697 3H4.32923C3.59498 3 3.00098 3.5805 3.00098 4.29675V19.7033C3.00098 20.4202 3.59498 21 4.32923 21H19.6675C20.401 21 21.001 20.4202 21.001 19.7033V4.29675C21.001 3.5805 20.401 3 19.6675 3H19.6697Z\"></path>\n </svg>\n }\n @case (Icons.githubFill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12.001 2C6.47598 2 2.00098 6.475 2.00098 12C2.00098 16.425 4.86348 20.1625 8.83848 21.4875C9.33848 21.575 9.52598 21.275 9.52598 21.0125C9.52598 20.775 9.51348 19.9875 9.51348 19.15C7.00098 19.6125 6.35098 18.5375 6.15098 17.975C6.03848 17.6875 5.55098 16.8 5.12598 16.5625C4.77598 16.375 4.27598 15.9125 5.11348 15.9C5.90098 15.8875 6.46348 16.625 6.65098 16.925C7.55098 18.4375 8.98848 18.0125 9.56348 17.75C9.65098 17.1 9.91348 16.6625 10.201 16.4125C7.97598 16.1625 5.65098 15.3 5.65098 11.475C5.65098 10.3875 6.03848 9.4875 6.67598 8.7875C6.57598 8.5375 6.22598 7.5125 6.77598 6.1375C6.77598 6.1375 7.61348 5.875 9.52598 7.1625C10.326 6.9375 11.176 6.825 12.026 6.825C12.876 6.825 13.726 6.9375 14.526 7.1625C16.4385 5.8625 17.276 6.1375 17.276 6.1375C17.826 7.5125 17.476 8.5375 17.376 8.7875C18.0135 9.4875 18.401 10.375 18.401 11.475C18.401 15.3125 16.0635 16.1625 13.8385 16.4125C14.201 16.725 14.5135 17.325 14.5135 18.2625C14.5135 19.6 14.501 20.675 14.501 21.0125C14.501 21.275 14.6885 21.5875 15.1885 21.4875C19.259 20.1133 21.9999 16.2963 22.001 12C22.001 6.475 17.526 2 12.001 2Z\"></path>\n </svg>\n }\n @case (Icons.instagramFill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M13.0281 2.00073C14.1535 2.00259 14.7238 2.00855 15.2166 2.02322L15.4107 2.02956C15.6349 2.03753 15.8561 2.04753 16.1228 2.06003C17.1869 2.1092 17.9128 2.27753 18.5503 2.52503C19.2094 2.7792 19.7661 3.12253 20.3219 3.67837C20.8769 4.2342 21.2203 4.79253 21.4753 5.45003C21.7219 6.0867 21.8903 6.81337 21.9403 7.87753C21.9522 8.1442 21.9618 8.3654 21.9697 8.58964L21.976 8.78373C21.9906 9.27647 21.9973 9.84686 21.9994 10.9723L22.0002 11.7179C22.0003 11.809 22.0003 11.903 22.0003 12L22.0002 12.2821L21.9996 13.0278C21.9977 14.1532 21.9918 14.7236 21.9771 15.2163L21.9707 15.4104C21.9628 15.6347 21.9528 15.8559 21.9403 16.1225C21.8911 17.1867 21.7219 17.9125 21.4753 18.55C21.2211 19.2092 20.8769 19.7659 20.3219 20.3217C19.7661 20.8767 19.2069 21.22 18.5503 21.475C17.9128 21.7217 17.1869 21.89 16.1228 21.94C15.8561 21.9519 15.6349 21.9616 15.4107 21.9694L15.2166 21.9757C14.7238 21.9904 14.1535 21.997 13.0281 21.9992L12.2824 22C12.1913 22 12.0973 22 12.0003 22L11.7182 22L10.9725 21.9993C9.8471 21.9975 9.27672 21.9915 8.78397 21.9768L8.58989 21.9705C8.36564 21.9625 8.14444 21.9525 7.87778 21.94C6.81361 21.8909 6.08861 21.7217 5.45028 21.475C4.79194 21.2209 4.23444 20.8767 3.67861 20.3217C3.12278 19.7659 2.78028 19.2067 2.52528 18.55C2.27778 17.9125 2.11028 17.1867 2.06028 16.1225C2.0484 15.8559 2.03871 15.6347 2.03086 15.4104L2.02457 15.2163C2.00994 14.7236 2.00327 14.1532 2.00111 13.0278L2.00098 10.9723C2.00284 9.84686 2.00879 9.27647 2.02346 8.78373L2.02981 8.58964C2.03778 8.3654 2.04778 8.1442 2.06028 7.87753C2.10944 6.81253 2.27778 6.08753 2.52528 5.45003C2.77944 4.7917 3.12278 4.2342 3.67861 3.67837C4.23444 3.12253 4.79278 2.78003 5.45028 2.52503C6.08778 2.27753 6.81278 2.11003 7.87778 2.06003C8.14444 2.04816 8.36564 2.03847 8.58989 2.03062L8.78397 2.02433C9.27672 2.00969 9.8471 2.00302 10.9725 2.00086L13.0281 2.00073ZM12.0003 7.00003C9.23738 7.00003 7.00028 9.23956 7.00028 12C7.00028 14.7629 9.23981 17 12.0003 17C14.7632 17 17.0003 14.7605 17.0003 12C17.0003 9.23713 14.7607 7.00003 12.0003 7.00003ZM12.0003 9.00003C13.6572 9.00003 15.0003 10.3427 15.0003 12C15.0003 13.6569 13.6576 15 12.0003 15C10.3434 15 9.00028 13.6574 9.00028 12C9.00028 10.3431 10.3429 9.00003 12.0003 9.00003ZM17.2503 5.50003C16.561 5.50003 16.0003 6.05994 16.0003 6.74918C16.0003 7.43843 16.5602 7.9992 17.2503 7.9992C17.9395 7.9992 18.5003 7.4393 18.5003 6.74918C18.5003 6.05994 17.9386 5.49917 17.2503 5.50003Z\"></path>\n </svg>\n }\n @case (Icons.twitterXFill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M17.6874 3.0625L12.6907 8.77425L8.37045 3.0625H2.11328L9.58961 12.8387L2.50378 20.9375H5.53795L11.0068 14.6886L15.7863 20.9375H21.8885L14.095 10.6342L20.7198 3.0625H17.6874ZM16.6232 19.1225L5.65436 4.78217H7.45745L18.3034 19.1225H16.6232Z\"></path>\n </svg>\n }\n @case (Icons.downloadCloud2Line) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M13 13V18.585L14.8284 16.7574L16.2426 18.1716L12 22.4142L7.75736 18.1716L9.17157 16.7574L11 18.585V13H13ZM12 2C15.5934 2 18.5544 4.70761 18.9541 8.19395C21.2858 8.83154 23 10.9656 23 13.5C23 16.3688 20.8036 18.7246 18.0006 18.9776L18.0009 16.9644C19.6966 16.7214 21 15.2629 21 13.5C21 11.567 19.433 10 17.5 10C17.2912 10 17.0867 10.0183 16.8887 10.054C16.9616 9.7142 17 9.36158 17 9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9C7 9.36158 7.03838 9.7142 7.11205 10.0533C6.91331 10.0183 6.70879 10 6.5 10C4.567 10 3 11.567 3 13.5C3 15.2003 4.21241 16.6174 5.81986 16.934L6.00005 16.9646L6.00039 18.9776C3.19696 18.7252 1 16.3692 1 13.5C1 10.9656 2.71424 8.83154 5.04648 8.19411C5.44561 4.70761 8.40661 2 12 2Z\"></path>\n </svg>\n }\n @case (Icons.globeLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M13.0003 21H18.0003V23H6.00032V21H11.0003V19.9506C7.70689 19.6236 4.88351 17.6987 3.31641 14.9622L5.05319 13.9697C6.43208 16.3776 9.02674 18 12.0003 18C16.4186 18 20.0003 14.4182 20.0003 9.99995C20.0003 7.02637 18.378 4.43171 15.9701 3.05282L16.9626 1.31604C19.9724 3.03965 22.0003 6.28297 22.0003 9.99995C22.0003 15.1853 18.0536 19.4489 13.0003 19.9506V21ZM12.0003 17C8.13433 17 5.00032 13.8659 5.00032 9.99995C5.00032 6.13396 8.13433 2.99995 12.0003 2.99995C15.8663 2.99995 19.0003 6.13396 19.0003 9.99995C19.0003 13.8659 15.8663 17 12.0003 17ZM12.0003 15C14.7617 15 17.0003 12.7614 17.0003 9.99995C17.0003 7.23853 14.7617 4.99995 12.0003 4.99995C9.2389 4.99995 7.00032 7.23853 7.00032 9.99995C7.00032 12.7614 9.2389 15 12.0003 15Z\"></path>\n </svg>\n }\n @case (Icons.mailSendLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M21 3C21.5523 3 22 3.44772 22 4V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V19H20V7.3L12 14.5L2 5.5V4C2 3.44772 2.44772 3 3 3H21ZM8 15V17H0V15H8ZM5 10V12H0V10H5ZM19.5659 5H4.43414L12 11.8093L19.5659 5Z\"></path>\n </svg>\n }\n @case (Icons.pagesLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M5 8V20H19V8H5ZM5 6H19V4H5V6ZM20 22H4C3.44772 22 3 21.5523 3 21V3C3 2.44772 3.44772 2 4 2H20C20.5523 2 21 2.44772 21 3V21C21 21.5523 20.5523 22 20 22ZM7 10H11V14H7V10ZM7 16H17V18H7V16ZM13 11H17V13H13V11Z\"></path>\n </svg>\n }\n @case (Icons.gitForkLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M6 5C5.44772 5 5 5.44772 5 6C5 6.55228 5.44772 7 6 7C6.55228 7 7 6.55228 7 6C7 5.44772 6.55228 5 6 5ZM3 6C3 4.34315 4.34315 3 6 3C7.65685 3 9 4.34315 9 6C9 7.30622 8.16519 8.41746 7 8.82929V9C7 10.1046 7.89543 11 9 11H15C16.1046 11 17 10.1046 17 9V8.82929C15.8348 8.41746 15 7.30622 15 6C15 4.34315 16.3431 3 18 3C19.6569 3 21 4.34315 21 6C21 7.30622 20.1652 8.41746 19 8.82929V9C19 11.2091 17.2091 13 15 13H13V15.1707C14.1652 15.5825 15 16.6938 15 18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18C9 16.6938 9.83481 15.5825 11 15.1707V13H9C6.79086 13 5 11.2091 5 9V8.82929C3.83481 8.41746 3 7.30622 3 6ZM18 5C17.4477 5 17 5.44772 17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5ZM12 17C11.4477 17 11 17.4477 11 18C11 18.5523 11.4477 19 12 19C12.5523 19 13 18.5523 13 18C13 17.4477 12.5523 17 12 17Z\"></path>\n </svg>\n }\n @case (Icons.gitRepositoryPrivateLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M6 10V20H19V10H6ZM18 8H20C20.5523 8 21 8.44772 21 9V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V9C3 8.44772 3.44772 8 4 8H6V7C6 3.68629 8.68629 1 12 1C15.3137 1 18 3.68629 18 7V8ZM16 8V7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7V8H16ZM7 11H9V13H7V11ZM7 14H9V16H7V14ZM7 17H9V19H7V17Z\"></path>\n </svg>\n }\n @case (Icons.starLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26ZM12.0006 15.968L16.2473 18.3451L15.2988 13.5717L18.8719 10.2674L14.039 9.69434L12.0006 5.27502L9.96214 9.69434L5.12921 10.2674L8.70231 13.5717L7.75383 18.3451L12.0006 15.968Z\"></path>\n </svg>\n }\n @case (Icons.calendar2Line) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M9 1V3H15V1H17V3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H7V1H9ZM20 11H4V19H20V11ZM8 13V15H6V13H8ZM13 13V15H11V13H13ZM18 13V15H16V13H18ZM7 5H4V9H20V5H17V7H15V5H9V7H7V5Z\"></path>\n </svg>\n }\n @case (Icons.macLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M14 18V20L16 21V22H8L7.99639 21.0036L10 20V18H2.9918C2.44405 18 2 17.5511 2 16.9925V4.00748C2 3.45107 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44892 22 4.00748V16.9925C22 17.5489 21.5447 18 21.0082 18H14ZM4 5V14H20V5H4Z\"></path>\n </svg>\n }\n @case (Icons.more2Fill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12 3C10.9 3 10 3.9 10 5C10 6.1 10.9 7 12 7C13.1 7 14 6.1 14 5C14 3.9 13.1 3 12 3ZM12 17C10.9 17 10 17.9 10 19C10 20.1 10.9 21 12 21C13.1 21 14 20.1 14 19C14 17.9 13.1 17 12 17ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z\"></path>\n </svg>\n }\n @case (Icons.editLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M6.41421 15.89L16.5563 5.74785L15.1421 4.33363L5 14.4758V15.89H6.41421ZM7.24264 17.89H3V13.6473L14.435 2.21231C14.8256 1.82179 15.4587 1.82179 15.8492 2.21231L18.6777 5.04074C19.0682 5.43126 19.0682 6.06443 18.6777 6.45495L7.24264 17.89ZM3 19.89H21V21.89H3V19.89Z\"></path>\n </svg>\n }\n @case (Icons.deleteBinLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M17 6H22V8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V8H2V6H7V3C7 2.44772 7.44772 2 8 2H16C16.5523 2 17 2.44772 17 3V6ZM18 8H6V20H18V8ZM9 11H11V17H9V11ZM13 11H15V17H13V11ZM9 4V6H15V4H9Z\"></path>\n </svg>\n }\n }\n</span>\n", styles: [":host{color:inherit;display:inline-flex}:host:has(.icon--left){margin-left:var(--gld-spacing--xxxs)}:host:has(.icon--right){margin-right:var(--gld-spacing--xxxs)}.icon{--gld-icon-size: var(--gld-icon-size--normal);position:relative;color:inherit;font-weight:400;width:var(--gld-icon-size);height:var(--gld-icon-size);margin:auto}.icon--tiny{--gld-icon-size: var(--gld-icon-size--tiny)}.icon--small{--gld-icon-size: var(--gld-icon-size--small)}.icon--medium{--gld-icon-size: var(--gld-icon-size--medium)}.icon--large{--gld-icon-size: var(--gld-icon-size--large)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
203
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
204
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: IconComponent, isStandalone: true, selector: "gld-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, space: { classPropertyName: "space", publicName: "space", isSignal: true, isRequired: false, transformFunction: null }, moveTopToBottom: { classPropertyName: "moveTopToBottom", publicName: "moveTopToBottom", isSignal: true, isRequired: false, transformFunction: null }, moveLeftToRight: { classPropertyName: "moveLeftToRight", publicName: "moveLeftToRight", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<span\n tabindex=\"-1\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\"\n class=\"icon icon--{{ size() }}\"\n [class.icon--left]=\"space() === ICONS_SPACES.left\"\n [class.icon--right]=\"space() === ICONS_SPACES.right\"\n [style.right.px]=\"moveLeftToRight()\"\n [style.top.px]=\"moveTopToBottom()\">\n @switch (icon()) {\n @case (ICONS.arrowDownSLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"></path>\n </svg>\n }\n @case (ICONS.arrowUpSLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z\"></path>\n </svg>\n }\n @case (ICONS.checkboxCircleLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11.0026 16L6.75999 11.7574L8.17421 10.3431L11.0026 13.1716L16.6595 7.51472L18.0737 8.92893L11.0026 16Z\"></path>\n </svg>\n }\n @case (ICONS.checkboxBlankCircleLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z\"></path>\n </svg>\n }\n @case (ICONS.loader4Fill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M18.364 5.63604L16.9497 7.05025C15.683 5.7835 13.933 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12H21C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C14.4853 3 16.7353 4.00736 18.364 5.63604Z\"></path>\n </svg>\n }\n @case (ICONS.logoutCircleLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M5 11H13V13H5V16L0 12L5 8V11ZM3.99927 18H6.70835C8.11862 19.2447 9.97111 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C9.97111 4 8.11862 4.75527 6.70835 6H3.99927C5.82368 3.57111 8.72836 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C8.72836 22 5.82368 20.4289 3.99927 18Z\"></path>\n </svg>\n }\n @case (ICONS.loginCircleLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M10 11V8L15 12L10 16V13H1V11H10ZM2.4578 15H4.58152C5.76829 17.9318 8.64262 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C8.64262 4 5.76829 6.06817 4.58152 9H2.4578C3.73207 4.94289 7.52236 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C7.52236 22 3.73207 19.0571 2.4578 15Z\"></path>\n </svg>\n }\n @case (ICONS.gitRepositoryLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M13 21V23.5L10 21.5L7 23.5V21H6.5C4.567 21 3 19.433 3 17.5V5C3 3.34315 4.34315 2 6 2H20C20.5523 2 21 2.44772 21 3V20C21 20.5523 20.5523 21 20 21H13ZM13 19H19V16H6.5C5.67157 16 5 16.6716 5 17.5C5 18.3284 5.67157 19 6.5 19H7V17H13V19ZM19 14V4H6V14.0354C6.1633 14.0121 6.33024 14 6.5 14H19ZM7 5H9V7H7V5ZM7 8H9V10H7V8ZM7 11H9V13H7V11Z\"></path>\n </svg>\n }\n @case (ICONS.fileList3Line) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M19 22H5C3.34315 22 2 20.6569 2 19V3C2 2.44772 2.44772 2 3 2H17C17.5523 2 18 2.44772 18 3V15H22V19C22 20.6569 20.6569 22 19 22ZM18 17V19C18 19.5523 18.4477 20 19 20C19.5523 20 20 19.5523 20 19V17H18ZM16 20V4H4V19C4 19.5523 4.44772 20 5 20H16ZM6 7H14V9H6V7ZM6 11H14V13H6V11ZM6 15H11V17H6V15Z\"></path>\n </svg>\n }\n @case (ICONS.menuLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z\"></path>\n </svg>\n }\n @case (ICONS.sunLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM11 1H13V4H11V1ZM11 20H13V23H11V20ZM3.51472 4.92893L4.92893 3.51472L7.05025 5.63604L5.63604 7.05025L3.51472 4.92893ZM16.9497 18.364L18.364 16.9497L20.4853 19.0711L19.0711 20.4853L16.9497 18.364ZM19.0711 3.51472L20.4853 4.92893L18.364 7.05025L16.9497 5.63604L19.0711 3.51472ZM5.63604 16.9497L7.05025 18.364L4.92893 20.4853L3.51472 19.0711L5.63604 16.9497ZM23 11V13H20V11H23ZM4 11V13H1V11H4Z\"></path>\n </svg>\n }\n @case (ICONS.moonClearLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M10 6C10 10.4183 13.5817 14 18 14C19.4386 14 20.7885 13.6203 21.9549 12.9556C21.4738 18.0302 17.2005 22 12 22C6.47715 22 2 17.5228 2 12C2 6.79948 5.9698 2.52616 11.0444 2.04507C10.3797 3.21152 10 4.56142 10 6ZM4 12C4 16.4183 7.58172 20 12 20C14.9654 20 17.5757 18.3788 18.9571 15.9546C18.6407 15.9848 18.3214 16 18 16C12.4772 16 8 11.5228 8 6C8 5.67863 8.01524 5.35933 8.04536 5.04293C5.62119 6.42426 4 9.03458 4 12ZM18.1642 2.29104L19 2.5V3.5L18.1642 3.70896C17.4476 3.8881 16.8881 4.4476 16.709 5.16417L16.5 6H15.5L15.291 5.16417C15.1119 4.4476 14.5524 3.8881 13.8358 3.70896L13 3.5V2.5L13.8358 2.29104C14.5524 2.1119 15.1119 1.5524 15.291 0.835829L15.5 0H16.5L16.709 0.835829C16.8881 1.5524 17.4476 2.1119 18.1642 2.29104ZM23.1642 7.29104L24 7.5V8.5L23.1642 8.70896C22.4476 8.8881 21.8881 9.4476 21.709 10.1642L21.5 11H20.5L20.291 10.1642C20.1119 9.4476 19.5524 8.8881 18.8358 8.70896L18 8.5V7.5L18.8358 7.29104C19.5524 7.1119 20.1119 6.5524 20.291 5.83583L20.5 5H21.5L21.709 5.83583C21.8881 6.5524 22.4476 7.1119 23.1642 7.29104Z\"></path>\n </svg>\n }\n @case (ICONS.englishInput) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M14 10H16L16.0005 10.7574C16.7154 10.279 17.5751 10 18.5 10C20.9853 10 23 12.0147 23 14.5V20H21V14.5C21 13.07 19.8255 12 18.5 12C17.1745 12 16 13.07 16 14.5V20H14V10ZM12 4V6H4V11H12V13H4V18H12V20H2V4H12Z\"></path>\n </svg>\n }\n @case (ICONS.translate) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M5 15V17C5 18.0544 5.81588 18.9182 6.85074 18.9945L7 19H10V21H7C4.79086 21 3 19.2091 3 17V15H5ZM18 10L22.4 21H20.245L19.044 18H14.954L13.755 21H11.601L16 10H18ZM17 12.8852L15.753 16H18.245L17 12.8852ZM8 2V4H12V11H8V14H6V11H2V4H6V2H8ZM17 3C19.2091 3 21 4.79086 21 7V9H19V7C19 5.89543 18.1046 5 17 5H14V3H17ZM6 6H4V9H6V6ZM10 6H8V9H10V6Z\"></path>\n </svg>\n }\n @case (ICONS.user4Line) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M5 20H19V22H5V20ZM12 18C7.58172 18 4 14.4183 4 10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10C20 14.4183 16.4183 18 12 18ZM12 16C15.3137 16 18 13.3137 18 10C18 6.68629 15.3137 4 12 4C8.68629 4 6 6.68629 6 10C6 13.3137 8.68629 16 12 16Z\"></path>\n </svg>\n }\n @case (ICONS.shapesLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M11.9998 1L6 11H18L11.9998 1ZM11.9998 4.8873L14.4676 9H9.53232L11.9998 4.8873ZM6.75 20C5.23122 20 4 18.7688 4 17.25C4 15.7312 5.23122 14.5 6.75 14.5C8.26878 14.5 9.5 15.7312 9.5 17.25C9.5 18.7688 8.26878 20 6.75 20ZM6.75 22C9.37335 22 11.5 19.8734 11.5 17.25C11.5 14.6266 9.37335 12.5 6.75 12.5C4.12665 12.5 2 14.6266 2 17.25C2 19.8734 4.12665 22 6.75 22ZM15 15.5V19.5H19V15.5H15ZM13 21.5V13.5H21V21.5H13Z\"></path>\n </svg>\n }\n @case (ICONS.closeLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z\"></path>\n </svg>\n }\n @case (ICONS.eyeLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3ZM12.0003 19C16.2359 19 19.8603 16.052 20.7777 12C19.8603 7.94803 16.2359 5 12.0003 5C7.7646 5 4.14022 7.94803 3.22278 12C4.14022 16.052 7.7646 19 12.0003 19ZM12.0003 16.5C9.51498 16.5 7.50026 14.4853 7.50026 12C7.50026 9.51472 9.51498 7.5 12.0003 7.5C14.4855 7.5 16.5003 9.51472 16.5003 12C16.5003 14.4853 14.4855 16.5 12.0003 16.5ZM12.0003 14.5C13.381 14.5 14.5003 13.3807 14.5003 12C14.5003 10.6193 13.381 9.5 12.0003 9.5C10.6196 9.5 9.50026 10.6193 9.50026 12C9.50026 13.3807 10.6196 14.5 12.0003 14.5Z\"></path>\n </svg>\n }\n @case (ICONS.eyeCloseLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M9.34268 18.7819L7.41083 18.2642L8.1983 15.3254C7.00919 14.8874 5.91661 14.2498 4.96116 13.4534L2.80783 15.6067L1.39362 14.1925L3.54695 12.0392C2.35581 10.6103 1.52014 8.87466 1.17578 6.96818L3.14386 6.61035C3.90289 10.8126 7.57931 14.0001 12.0002 14.0001C16.4211 14.0001 20.0976 10.8126 20.8566 6.61035L22.8247 6.96818C22.4803 8.87466 21.6446 10.6103 20.4535 12.0392L22.6068 14.1925L21.1926 15.6067L19.0393 13.4534C18.0838 14.2498 16.9912 14.8874 15.8021 15.3254L16.5896 18.2642L14.6578 18.7819L13.87 15.8418C13.2623 15.9459 12.6376 16.0001 12.0002 16.0001C11.3629 16.0001 10.7381 15.9459 10.1305 15.8418L9.34268 18.7819Z\"></path>\n </svg>\n }\n @case (ICONS.linkedinBoxFill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M18.3362 18.339H15.6707V14.1622C15.6707 13.1662 15.6505 11.8845 14.2817 11.8845C12.892 11.8845 12.6797 12.9683 12.6797 14.0887V18.339H10.0142V9.75H12.5747V10.9207H12.6092C12.967 10.2457 13.837 9.53325 15.1367 9.53325C17.8375 9.53325 18.337 11.3108 18.337 13.6245V18.339H18.3362ZM7.00373 8.57475C6.14573 8.57475 5.45648 7.88025 5.45648 7.026C5.45648 6.1725 6.14648 5.47875 7.00373 5.47875C7.85873 5.47875 8.55173 6.1725 8.55173 7.026C8.55173 7.88025 7.85798 8.57475 7.00373 8.57475ZM8.34023 18.339H5.66723V9.75H8.34023V18.339ZM19.6697 3H4.32923C3.59498 3 3.00098 3.5805 3.00098 4.29675V19.7033C3.00098 20.4202 3.59498 21 4.32923 21H19.6675C20.401 21 21.001 20.4202 21.001 19.7033V4.29675C21.001 3.5805 20.401 3 19.6675 3H19.6697Z\"></path>\n </svg>\n }\n @case (ICONS.githubFill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12.001 2C6.47598 2 2.00098 6.475 2.00098 12C2.00098 16.425 4.86348 20.1625 8.83848 21.4875C9.33848 21.575 9.52598 21.275 9.52598 21.0125C9.52598 20.775 9.51348 19.9875 9.51348 19.15C7.00098 19.6125 6.35098 18.5375 6.15098 17.975C6.03848 17.6875 5.55098 16.8 5.12598 16.5625C4.77598 16.375 4.27598 15.9125 5.11348 15.9C5.90098 15.8875 6.46348 16.625 6.65098 16.925C7.55098 18.4375 8.98848 18.0125 9.56348 17.75C9.65098 17.1 9.91348 16.6625 10.201 16.4125C7.97598 16.1625 5.65098 15.3 5.65098 11.475C5.65098 10.3875 6.03848 9.4875 6.67598 8.7875C6.57598 8.5375 6.22598 7.5125 6.77598 6.1375C6.77598 6.1375 7.61348 5.875 9.52598 7.1625C10.326 6.9375 11.176 6.825 12.026 6.825C12.876 6.825 13.726 6.9375 14.526 7.1625C16.4385 5.8625 17.276 6.1375 17.276 6.1375C17.826 7.5125 17.476 8.5375 17.376 8.7875C18.0135 9.4875 18.401 10.375 18.401 11.475C18.401 15.3125 16.0635 16.1625 13.8385 16.4125C14.201 16.725 14.5135 17.325 14.5135 18.2625C14.5135 19.6 14.501 20.675 14.501 21.0125C14.501 21.275 14.6885 21.5875 15.1885 21.4875C19.259 20.1133 21.9999 16.2963 22.001 12C22.001 6.475 17.526 2 12.001 2Z\"></path>\n </svg>\n }\n @case (ICONS.instagramFill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M13.0281 2.00073C14.1535 2.00259 14.7238 2.00855 15.2166 2.02322L15.4107 2.02956C15.6349 2.03753 15.8561 2.04753 16.1228 2.06003C17.1869 2.1092 17.9128 2.27753 18.5503 2.52503C19.2094 2.7792 19.7661 3.12253 20.3219 3.67837C20.8769 4.2342 21.2203 4.79253 21.4753 5.45003C21.7219 6.0867 21.8903 6.81337 21.9403 7.87753C21.9522 8.1442 21.9618 8.3654 21.9697 8.58964L21.976 8.78373C21.9906 9.27647 21.9973 9.84686 21.9994 10.9723L22.0002 11.7179C22.0003 11.809 22.0003 11.903 22.0003 12L22.0002 12.2821L21.9996 13.0278C21.9977 14.1532 21.9918 14.7236 21.9771 15.2163L21.9707 15.4104C21.9628 15.6347 21.9528 15.8559 21.9403 16.1225C21.8911 17.1867 21.7219 17.9125 21.4753 18.55C21.2211 19.2092 20.8769 19.7659 20.3219 20.3217C19.7661 20.8767 19.2069 21.22 18.5503 21.475C17.9128 21.7217 17.1869 21.89 16.1228 21.94C15.8561 21.9519 15.6349 21.9616 15.4107 21.9694L15.2166 21.9757C14.7238 21.9904 14.1535 21.997 13.0281 21.9992L12.2824 22C12.1913 22 12.0973 22 12.0003 22L11.7182 22L10.9725 21.9993C9.8471 21.9975 9.27672 21.9915 8.78397 21.9768L8.58989 21.9705C8.36564 21.9625 8.14444 21.9525 7.87778 21.94C6.81361 21.8909 6.08861 21.7217 5.45028 21.475C4.79194 21.2209 4.23444 20.8767 3.67861 20.3217C3.12278 19.7659 2.78028 19.2067 2.52528 18.55C2.27778 17.9125 2.11028 17.1867 2.06028 16.1225C2.0484 15.8559 2.03871 15.6347 2.03086 15.4104L2.02457 15.2163C2.00994 14.7236 2.00327 14.1532 2.00111 13.0278L2.00098 10.9723C2.00284 9.84686 2.00879 9.27647 2.02346 8.78373L2.02981 8.58964C2.03778 8.3654 2.04778 8.1442 2.06028 7.87753C2.10944 6.81253 2.27778 6.08753 2.52528 5.45003C2.77944 4.7917 3.12278 4.2342 3.67861 3.67837C4.23444 3.12253 4.79278 2.78003 5.45028 2.52503C6.08778 2.27753 6.81278 2.11003 7.87778 2.06003C8.14444 2.04816 8.36564 2.03847 8.58989 2.03062L8.78397 2.02433C9.27672 2.00969 9.8471 2.00302 10.9725 2.00086L13.0281 2.00073ZM12.0003 7.00003C9.23738 7.00003 7.00028 9.23956 7.00028 12C7.00028 14.7629 9.23981 17 12.0003 17C14.7632 17 17.0003 14.7605 17.0003 12C17.0003 9.23713 14.7607 7.00003 12.0003 7.00003ZM12.0003 9.00003C13.6572 9.00003 15.0003 10.3427 15.0003 12C15.0003 13.6569 13.6576 15 12.0003 15C10.3434 15 9.00028 13.6574 9.00028 12C9.00028 10.3431 10.3429 9.00003 12.0003 9.00003ZM17.2503 5.50003C16.561 5.50003 16.0003 6.05994 16.0003 6.74918C16.0003 7.43843 16.5602 7.9992 17.2503 7.9992C17.9395 7.9992 18.5003 7.4393 18.5003 6.74918C18.5003 6.05994 17.9386 5.49917 17.2503 5.50003Z\"></path>\n </svg>\n }\n @case (ICONS.twitterXFill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M17.6874 3.0625L12.6907 8.77425L8.37045 3.0625H2.11328L9.58961 12.8387L2.50378 20.9375H5.53795L11.0068 14.6886L15.7863 20.9375H21.8885L14.095 10.6342L20.7198 3.0625H17.6874ZM16.6232 19.1225L5.65436 4.78217H7.45745L18.3034 19.1225H16.6232Z\"></path>\n </svg>\n }\n @case (ICONS.downloadCloud2Line) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M13 13V18.585L14.8284 16.7574L16.2426 18.1716L12 22.4142L7.75736 18.1716L9.17157 16.7574L11 18.585V13H13ZM12 2C15.5934 2 18.5544 4.70761 18.9541 8.19395C21.2858 8.83154 23 10.9656 23 13.5C23 16.3688 20.8036 18.7246 18.0006 18.9776L18.0009 16.9644C19.6966 16.7214 21 15.2629 21 13.5C21 11.567 19.433 10 17.5 10C17.2912 10 17.0867 10.0183 16.8887 10.054C16.9616 9.7142 17 9.36158 17 9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9C7 9.36158 7.03838 9.7142 7.11205 10.0533C6.91331 10.0183 6.70879 10 6.5 10C4.567 10 3 11.567 3 13.5C3 15.2003 4.21241 16.6174 5.81986 16.934L6.00005 16.9646L6.00039 18.9776C3.19696 18.7252 1 16.3692 1 13.5C1 10.9656 2.71424 8.83154 5.04648 8.19411C5.44561 4.70761 8.40661 2 12 2Z\"></path>\n </svg>\n }\n @case (ICONS.globeLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M13.0003 21H18.0003V23H6.00032V21H11.0003V19.9506C7.70689 19.6236 4.88351 17.6987 3.31641 14.9622L5.05319 13.9697C6.43208 16.3776 9.02674 18 12.0003 18C16.4186 18 20.0003 14.4182 20.0003 9.99995C20.0003 7.02637 18.378 4.43171 15.9701 3.05282L16.9626 1.31604C19.9724 3.03965 22.0003 6.28297 22.0003 9.99995C22.0003 15.1853 18.0536 19.4489 13.0003 19.9506V21ZM12.0003 17C8.13433 17 5.00032 13.8659 5.00032 9.99995C5.00032 6.13396 8.13433 2.99995 12.0003 2.99995C15.8663 2.99995 19.0003 6.13396 19.0003 9.99995C19.0003 13.8659 15.8663 17 12.0003 17ZM12.0003 15C14.7617 15 17.0003 12.7614 17.0003 9.99995C17.0003 7.23853 14.7617 4.99995 12.0003 4.99995C9.2389 4.99995 7.00032 7.23853 7.00032 9.99995C7.00032 12.7614 9.2389 15 12.0003 15Z\"></path>\n </svg>\n }\n @case (ICONS.mailSendLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M21 3C21.5523 3 22 3.44772 22 4V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V19H20V7.3L12 14.5L2 5.5V4C2 3.44772 2.44772 3 3 3H21ZM8 15V17H0V15H8ZM5 10V12H0V10H5ZM19.5659 5H4.43414L12 11.8093L19.5659 5Z\"></path>\n </svg>\n }\n @case (ICONS.pagesLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M5 8V20H19V8H5ZM5 6H19V4H5V6ZM20 22H4C3.44772 22 3 21.5523 3 21V3C3 2.44772 3.44772 2 4 2H20C20.5523 2 21 2.44772 21 3V21C21 21.5523 20.5523 22 20 22ZM7 10H11V14H7V10ZM7 16H17V18H7V16ZM13 11H17V13H13V11Z\"></path>\n </svg>\n }\n @case (ICONS.gitForkLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M6 5C5.44772 5 5 5.44772 5 6C5 6.55228 5.44772 7 6 7C6.55228 7 7 6.55228 7 6C7 5.44772 6.55228 5 6 5ZM3 6C3 4.34315 4.34315 3 6 3C7.65685 3 9 4.34315 9 6C9 7.30622 8.16519 8.41746 7 8.82929V9C7 10.1046 7.89543 11 9 11H15C16.1046 11 17 10.1046 17 9V8.82929C15.8348 8.41746 15 7.30622 15 6C15 4.34315 16.3431 3 18 3C19.6569 3 21 4.34315 21 6C21 7.30622 20.1652 8.41746 19 8.82929V9C19 11.2091 17.2091 13 15 13H13V15.1707C14.1652 15.5825 15 16.6938 15 18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18C9 16.6938 9.83481 15.5825 11 15.1707V13H9C6.79086 13 5 11.2091 5 9V8.82929C3.83481 8.41746 3 7.30622 3 6ZM18 5C17.4477 5 17 5.44772 17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5ZM12 17C11.4477 17 11 17.4477 11 18C11 18.5523 11.4477 19 12 19C12.5523 19 13 18.5523 13 18C13 17.4477 12.5523 17 12 17Z\"></path>\n </svg>\n }\n @case (ICONS.gitRepositoryPrivateLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M6 10V20H19V10H6ZM18 8H20C20.5523 8 21 8.44772 21 9V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V9C3 8.44772 3.44772 8 4 8H6V7C6 3.68629 8.68629 1 12 1C15.3137 1 18 3.68629 18 7V8ZM16 8V7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7V8H16ZM7 11H9V13H7V11ZM7 14H9V16H7V14ZM7 17H9V19H7V17Z\"></path>\n </svg>\n }\n @case (ICONS.starLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26ZM12.0006 15.968L16.2473 18.3451L15.2988 13.5717L18.8719 10.2674L14.039 9.69434L12.0006 5.27502L9.96214 9.69434L5.12921 10.2674L8.70231 13.5717L7.75383 18.3451L12.0006 15.968Z\"></path>\n </svg>\n }\n @case (ICONS.calendar2Line) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M9 1V3H15V1H17V3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H7V1H9ZM20 11H4V19H20V11ZM8 13V15H6V13H8ZM13 13V15H11V13H13ZM18 13V15H16V13H18ZM7 5H4V9H20V5H17V7H15V5H9V7H7V5Z\"></path>\n </svg>\n }\n @case (ICONS.macLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M14 18V20L16 21V22H8L7.99639 21.0036L10 20V18H2.9918C2.44405 18 2 17.5511 2 16.9925V4.00748C2 3.45107 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44892 22 4.00748V16.9925C22 17.5489 21.5447 18 21.0082 18H14ZM4 5V14H20V5H4Z\"></path>\n </svg>\n }\n @case (ICONS.more2Fill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12 3C10.9 3 10 3.9 10 5C10 6.1 10.9 7 12 7C13.1 7 14 6.1 14 5C14 3.9 13.1 3 12 3ZM12 17C10.9 17 10 17.9 10 19C10 20.1 10.9 21 12 21C13.1 21 14 20.1 14 19C14 17.9 13.1 17 12 17ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z\"></path>\n </svg>\n }\n @case (ICONS.editLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M6.41421 15.89L16.5563 5.74785L15.1421 4.33363L5 14.4758V15.89H6.41421ZM7.24264 17.89H3V13.6473L14.435 2.21231C14.8256 1.82179 15.4587 1.82179 15.8492 2.21231L18.6777 5.04074C19.0682 5.43126 19.0682 6.06443 18.6777 6.45495L7.24264 17.89ZM3 19.89H21V21.89H3V19.89Z\"></path>\n </svg>\n }\n @case (ICONS.deleteBinLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M17 6H22V8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V8H2V6H7V3C7 2.44772 7.44772 2 8 2H16C16.5523 2 17 2.44772 17 3V6ZM18 8H6V20H18V8ZM9 11H11V17H9V11ZM13 11H15V17H13V11ZM9 4V6H15V4H9Z\"></path>\n </svg>\n }\n }\n</span>\n", styles: [":host{color:inherit;display:inline-flex}:host:has(.icon--left){margin-left:var(--gld-spacing--xxxs)}:host:has(.icon--right){margin-right:var(--gld-spacing--xxxs)}.icon{--gld-icon-size: var(--gld-icon-size--normal);position:relative;color:inherit;font-weight:400;width:var(--gld-icon-size);height:var(--gld-icon-size);margin:auto}.icon--tiny{--gld-icon-size: var(--gld-icon-size--tiny)}.icon--small{--gld-icon-size: var(--gld-icon-size--small)}.icon--medium{--gld-icon-size: var(--gld-icon-size--medium)}.icon--large{--gld-icon-size: var(--gld-icon-size--large)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
225
205
  }
226
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Icon, decorators: [{
206
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IconComponent, decorators: [{
227
207
  type: Component,
228
- args: [{ selector: 'gld-icon', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n tabindex=\"-1\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\"\n class=\"icon icon--{{ size() }}\"\n [class.icon--left]=\"space() === IconsSpace.left\"\n [class.icon--right]=\"space() === IconsSpace.right\"\n [style.right.px]=\"moveLeftToRight()\"\n [style.top.px]=\"moveTopToBottom()\">\n @switch (icon()) {\n @case (Icons.arrowDownSLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"></path>\n </svg>\n }\n @case (Icons.arrowUpSLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z\"></path>\n </svg>\n }\n @case (Icons.checkboxCircleLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11.0026 16L6.75999 11.7574L8.17421 10.3431L11.0026 13.1716L16.6595 7.51472L18.0737 8.92893L11.0026 16Z\"></path>\n </svg>\n }\n @case (Icons.checkboxBlankCircleLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z\"></path>\n </svg>\n }\n @case (Icons.loader4Fill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M18.364 5.63604L16.9497 7.05025C15.683 5.7835 13.933 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12H21C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C14.4853 3 16.7353 4.00736 18.364 5.63604Z\"></path>\n </svg>\n }\n @case (Icons.logoutCircleLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M5 11H13V13H5V16L0 12L5 8V11ZM3.99927 18H6.70835C8.11862 19.2447 9.97111 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C9.97111 4 8.11862 4.75527 6.70835 6H3.99927C5.82368 3.57111 8.72836 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C8.72836 22 5.82368 20.4289 3.99927 18Z\"></path>\n </svg>\n }\n @case (Icons.loginCircleLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M10 11V8L15 12L10 16V13H1V11H10ZM2.4578 15H4.58152C5.76829 17.9318 8.64262 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C8.64262 4 5.76829 6.06817 4.58152 9H2.4578C3.73207 4.94289 7.52236 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C7.52236 22 3.73207 19.0571 2.4578 15Z\"></path>\n </svg>\n }\n @case (Icons.gitRepositoryLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M13 21V23.5L10 21.5L7 23.5V21H6.5C4.567 21 3 19.433 3 17.5V5C3 3.34315 4.34315 2 6 2H20C20.5523 2 21 2.44772 21 3V20C21 20.5523 20.5523 21 20 21H13ZM13 19H19V16H6.5C5.67157 16 5 16.6716 5 17.5C5 18.3284 5.67157 19 6.5 19H7V17H13V19ZM19 14V4H6V14.0354C6.1633 14.0121 6.33024 14 6.5 14H19ZM7 5H9V7H7V5ZM7 8H9V10H7V8ZM7 11H9V13H7V11Z\"></path>\n </svg>\n }\n @case (Icons.fileList3Line) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M19 22H5C3.34315 22 2 20.6569 2 19V3C2 2.44772 2.44772 2 3 2H17C17.5523 2 18 2.44772 18 3V15H22V19C22 20.6569 20.6569 22 19 22ZM18 17V19C18 19.5523 18.4477 20 19 20C19.5523 20 20 19.5523 20 19V17H18ZM16 20V4H4V19C4 19.5523 4.44772 20 5 20H16ZM6 7H14V9H6V7ZM6 11H14V13H6V11ZM6 15H11V17H6V15Z\"></path>\n </svg>\n }\n @case (Icons.menuLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z\"></path>\n </svg>\n }\n @case (Icons.sunLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM11 1H13V4H11V1ZM11 20H13V23H11V20ZM3.51472 4.92893L4.92893 3.51472L7.05025 5.63604L5.63604 7.05025L3.51472 4.92893ZM16.9497 18.364L18.364 16.9497L20.4853 19.0711L19.0711 20.4853L16.9497 18.364ZM19.0711 3.51472L20.4853 4.92893L18.364 7.05025L16.9497 5.63604L19.0711 3.51472ZM5.63604 16.9497L7.05025 18.364L4.92893 20.4853L3.51472 19.0711L5.63604 16.9497ZM23 11V13H20V11H23ZM4 11V13H1V11H4Z\"></path>\n </svg>\n }\n @case (Icons.moonClearLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M10 6C10 10.4183 13.5817 14 18 14C19.4386 14 20.7885 13.6203 21.9549 12.9556C21.4738 18.0302 17.2005 22 12 22C6.47715 22 2 17.5228 2 12C2 6.79948 5.9698 2.52616 11.0444 2.04507C10.3797 3.21152 10 4.56142 10 6ZM4 12C4 16.4183 7.58172 20 12 20C14.9654 20 17.5757 18.3788 18.9571 15.9546C18.6407 15.9848 18.3214 16 18 16C12.4772 16 8 11.5228 8 6C8 5.67863 8.01524 5.35933 8.04536 5.04293C5.62119 6.42426 4 9.03458 4 12ZM18.1642 2.29104L19 2.5V3.5L18.1642 3.70896C17.4476 3.8881 16.8881 4.4476 16.709 5.16417L16.5 6H15.5L15.291 5.16417C15.1119 4.4476 14.5524 3.8881 13.8358 3.70896L13 3.5V2.5L13.8358 2.29104C14.5524 2.1119 15.1119 1.5524 15.291 0.835829L15.5 0H16.5L16.709 0.835829C16.8881 1.5524 17.4476 2.1119 18.1642 2.29104ZM23.1642 7.29104L24 7.5V8.5L23.1642 8.70896C22.4476 8.8881 21.8881 9.4476 21.709 10.1642L21.5 11H20.5L20.291 10.1642C20.1119 9.4476 19.5524 8.8881 18.8358 8.70896L18 8.5V7.5L18.8358 7.29104C19.5524 7.1119 20.1119 6.5524 20.291 5.83583L20.5 5H21.5L21.709 5.83583C21.8881 6.5524 22.4476 7.1119 23.1642 7.29104Z\"></path>\n </svg>\n }\n @case (Icons.englishInput) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M14 10H16L16.0005 10.7574C16.7154 10.279 17.5751 10 18.5 10C20.9853 10 23 12.0147 23 14.5V20H21V14.5C21 13.07 19.8255 12 18.5 12C17.1745 12 16 13.07 16 14.5V20H14V10ZM12 4V6H4V11H12V13H4V18H12V20H2V4H12Z\"></path>\n </svg>\n }\n @case (Icons.translate) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M5 15V17C5 18.0544 5.81588 18.9182 6.85074 18.9945L7 19H10V21H7C4.79086 21 3 19.2091 3 17V15H5ZM18 10L22.4 21H20.245L19.044 18H14.954L13.755 21H11.601L16 10H18ZM17 12.8852L15.753 16H18.245L17 12.8852ZM8 2V4H12V11H8V14H6V11H2V4H6V2H8ZM17 3C19.2091 3 21 4.79086 21 7V9H19V7C19 5.89543 18.1046 5 17 5H14V3H17ZM6 6H4V9H6V6ZM10 6H8V9H10V6Z\"></path>\n </svg>\n }\n @case (Icons.user4Line) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M5 20H19V22H5V20ZM12 18C7.58172 18 4 14.4183 4 10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10C20 14.4183 16.4183 18 12 18ZM12 16C15.3137 16 18 13.3137 18 10C18 6.68629 15.3137 4 12 4C8.68629 4 6 6.68629 6 10C6 13.3137 8.68629 16 12 16Z\"></path>\n </svg>\n }\n @case (Icons.shapesLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M11.9998 1L6 11H18L11.9998 1ZM11.9998 4.8873L14.4676 9H9.53232L11.9998 4.8873ZM6.75 20C5.23122 20 4 18.7688 4 17.25C4 15.7312 5.23122 14.5 6.75 14.5C8.26878 14.5 9.5 15.7312 9.5 17.25C9.5 18.7688 8.26878 20 6.75 20ZM6.75 22C9.37335 22 11.5 19.8734 11.5 17.25C11.5 14.6266 9.37335 12.5 6.75 12.5C4.12665 12.5 2 14.6266 2 17.25C2 19.8734 4.12665 22 6.75 22ZM15 15.5V19.5H19V15.5H15ZM13 21.5V13.5H21V21.5H13Z\"></path>\n </svg>\n }\n @case (Icons.closeLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z\"></path>\n </svg>\n }\n @case (Icons.eyeLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3ZM12.0003 19C16.2359 19 19.8603 16.052 20.7777 12C19.8603 7.94803 16.2359 5 12.0003 5C7.7646 5 4.14022 7.94803 3.22278 12C4.14022 16.052 7.7646 19 12.0003 19ZM12.0003 16.5C9.51498 16.5 7.50026 14.4853 7.50026 12C7.50026 9.51472 9.51498 7.5 12.0003 7.5C14.4855 7.5 16.5003 9.51472 16.5003 12C16.5003 14.4853 14.4855 16.5 12.0003 16.5ZM12.0003 14.5C13.381 14.5 14.5003 13.3807 14.5003 12C14.5003 10.6193 13.381 9.5 12.0003 9.5C10.6196 9.5 9.50026 10.6193 9.50026 12C9.50026 13.3807 10.6196 14.5 12.0003 14.5Z\"></path>\n </svg>\n }\n @case (Icons.eyeCloseLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M9.34268 18.7819L7.41083 18.2642L8.1983 15.3254C7.00919 14.8874 5.91661 14.2498 4.96116 13.4534L2.80783 15.6067L1.39362 14.1925L3.54695 12.0392C2.35581 10.6103 1.52014 8.87466 1.17578 6.96818L3.14386 6.61035C3.90289 10.8126 7.57931 14.0001 12.0002 14.0001C16.4211 14.0001 20.0976 10.8126 20.8566 6.61035L22.8247 6.96818C22.4803 8.87466 21.6446 10.6103 20.4535 12.0392L22.6068 14.1925L21.1926 15.6067L19.0393 13.4534C18.0838 14.2498 16.9912 14.8874 15.8021 15.3254L16.5896 18.2642L14.6578 18.7819L13.87 15.8418C13.2623 15.9459 12.6376 16.0001 12.0002 16.0001C11.3629 16.0001 10.7381 15.9459 10.1305 15.8418L9.34268 18.7819Z\"></path>\n </svg>\n }\n @case (Icons.linkedinBoxFill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M18.3362 18.339H15.6707V14.1622C15.6707 13.1662 15.6505 11.8845 14.2817 11.8845C12.892 11.8845 12.6797 12.9683 12.6797 14.0887V18.339H10.0142V9.75H12.5747V10.9207H12.6092C12.967 10.2457 13.837 9.53325 15.1367 9.53325C17.8375 9.53325 18.337 11.3108 18.337 13.6245V18.339H18.3362ZM7.00373 8.57475C6.14573 8.57475 5.45648 7.88025 5.45648 7.026C5.45648 6.1725 6.14648 5.47875 7.00373 5.47875C7.85873 5.47875 8.55173 6.1725 8.55173 7.026C8.55173 7.88025 7.85798 8.57475 7.00373 8.57475ZM8.34023 18.339H5.66723V9.75H8.34023V18.339ZM19.6697 3H4.32923C3.59498 3 3.00098 3.5805 3.00098 4.29675V19.7033C3.00098 20.4202 3.59498 21 4.32923 21H19.6675C20.401 21 21.001 20.4202 21.001 19.7033V4.29675C21.001 3.5805 20.401 3 19.6675 3H19.6697Z\"></path>\n </svg>\n }\n @case (Icons.githubFill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12.001 2C6.47598 2 2.00098 6.475 2.00098 12C2.00098 16.425 4.86348 20.1625 8.83848 21.4875C9.33848 21.575 9.52598 21.275 9.52598 21.0125C9.52598 20.775 9.51348 19.9875 9.51348 19.15C7.00098 19.6125 6.35098 18.5375 6.15098 17.975C6.03848 17.6875 5.55098 16.8 5.12598 16.5625C4.77598 16.375 4.27598 15.9125 5.11348 15.9C5.90098 15.8875 6.46348 16.625 6.65098 16.925C7.55098 18.4375 8.98848 18.0125 9.56348 17.75C9.65098 17.1 9.91348 16.6625 10.201 16.4125C7.97598 16.1625 5.65098 15.3 5.65098 11.475C5.65098 10.3875 6.03848 9.4875 6.67598 8.7875C6.57598 8.5375 6.22598 7.5125 6.77598 6.1375C6.77598 6.1375 7.61348 5.875 9.52598 7.1625C10.326 6.9375 11.176 6.825 12.026 6.825C12.876 6.825 13.726 6.9375 14.526 7.1625C16.4385 5.8625 17.276 6.1375 17.276 6.1375C17.826 7.5125 17.476 8.5375 17.376 8.7875C18.0135 9.4875 18.401 10.375 18.401 11.475C18.401 15.3125 16.0635 16.1625 13.8385 16.4125C14.201 16.725 14.5135 17.325 14.5135 18.2625C14.5135 19.6 14.501 20.675 14.501 21.0125C14.501 21.275 14.6885 21.5875 15.1885 21.4875C19.259 20.1133 21.9999 16.2963 22.001 12C22.001 6.475 17.526 2 12.001 2Z\"></path>\n </svg>\n }\n @case (Icons.instagramFill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M13.0281 2.00073C14.1535 2.00259 14.7238 2.00855 15.2166 2.02322L15.4107 2.02956C15.6349 2.03753 15.8561 2.04753 16.1228 2.06003C17.1869 2.1092 17.9128 2.27753 18.5503 2.52503C19.2094 2.7792 19.7661 3.12253 20.3219 3.67837C20.8769 4.2342 21.2203 4.79253 21.4753 5.45003C21.7219 6.0867 21.8903 6.81337 21.9403 7.87753C21.9522 8.1442 21.9618 8.3654 21.9697 8.58964L21.976 8.78373C21.9906 9.27647 21.9973 9.84686 21.9994 10.9723L22.0002 11.7179C22.0003 11.809 22.0003 11.903 22.0003 12L22.0002 12.2821L21.9996 13.0278C21.9977 14.1532 21.9918 14.7236 21.9771 15.2163L21.9707 15.4104C21.9628 15.6347 21.9528 15.8559 21.9403 16.1225C21.8911 17.1867 21.7219 17.9125 21.4753 18.55C21.2211 19.2092 20.8769 19.7659 20.3219 20.3217C19.7661 20.8767 19.2069 21.22 18.5503 21.475C17.9128 21.7217 17.1869 21.89 16.1228 21.94C15.8561 21.9519 15.6349 21.9616 15.4107 21.9694L15.2166 21.9757C14.7238 21.9904 14.1535 21.997 13.0281 21.9992L12.2824 22C12.1913 22 12.0973 22 12.0003 22L11.7182 22L10.9725 21.9993C9.8471 21.9975 9.27672 21.9915 8.78397 21.9768L8.58989 21.9705C8.36564 21.9625 8.14444 21.9525 7.87778 21.94C6.81361 21.8909 6.08861 21.7217 5.45028 21.475C4.79194 21.2209 4.23444 20.8767 3.67861 20.3217C3.12278 19.7659 2.78028 19.2067 2.52528 18.55C2.27778 17.9125 2.11028 17.1867 2.06028 16.1225C2.0484 15.8559 2.03871 15.6347 2.03086 15.4104L2.02457 15.2163C2.00994 14.7236 2.00327 14.1532 2.00111 13.0278L2.00098 10.9723C2.00284 9.84686 2.00879 9.27647 2.02346 8.78373L2.02981 8.58964C2.03778 8.3654 2.04778 8.1442 2.06028 7.87753C2.10944 6.81253 2.27778 6.08753 2.52528 5.45003C2.77944 4.7917 3.12278 4.2342 3.67861 3.67837C4.23444 3.12253 4.79278 2.78003 5.45028 2.52503C6.08778 2.27753 6.81278 2.11003 7.87778 2.06003C8.14444 2.04816 8.36564 2.03847 8.58989 2.03062L8.78397 2.02433C9.27672 2.00969 9.8471 2.00302 10.9725 2.00086L13.0281 2.00073ZM12.0003 7.00003C9.23738 7.00003 7.00028 9.23956 7.00028 12C7.00028 14.7629 9.23981 17 12.0003 17C14.7632 17 17.0003 14.7605 17.0003 12C17.0003 9.23713 14.7607 7.00003 12.0003 7.00003ZM12.0003 9.00003C13.6572 9.00003 15.0003 10.3427 15.0003 12C15.0003 13.6569 13.6576 15 12.0003 15C10.3434 15 9.00028 13.6574 9.00028 12C9.00028 10.3431 10.3429 9.00003 12.0003 9.00003ZM17.2503 5.50003C16.561 5.50003 16.0003 6.05994 16.0003 6.74918C16.0003 7.43843 16.5602 7.9992 17.2503 7.9992C17.9395 7.9992 18.5003 7.4393 18.5003 6.74918C18.5003 6.05994 17.9386 5.49917 17.2503 5.50003Z\"></path>\n </svg>\n }\n @case (Icons.twitterXFill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M17.6874 3.0625L12.6907 8.77425L8.37045 3.0625H2.11328L9.58961 12.8387L2.50378 20.9375H5.53795L11.0068 14.6886L15.7863 20.9375H21.8885L14.095 10.6342L20.7198 3.0625H17.6874ZM16.6232 19.1225L5.65436 4.78217H7.45745L18.3034 19.1225H16.6232Z\"></path>\n </svg>\n }\n @case (Icons.downloadCloud2Line) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M13 13V18.585L14.8284 16.7574L16.2426 18.1716L12 22.4142L7.75736 18.1716L9.17157 16.7574L11 18.585V13H13ZM12 2C15.5934 2 18.5544 4.70761 18.9541 8.19395C21.2858 8.83154 23 10.9656 23 13.5C23 16.3688 20.8036 18.7246 18.0006 18.9776L18.0009 16.9644C19.6966 16.7214 21 15.2629 21 13.5C21 11.567 19.433 10 17.5 10C17.2912 10 17.0867 10.0183 16.8887 10.054C16.9616 9.7142 17 9.36158 17 9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9C7 9.36158 7.03838 9.7142 7.11205 10.0533C6.91331 10.0183 6.70879 10 6.5 10C4.567 10 3 11.567 3 13.5C3 15.2003 4.21241 16.6174 5.81986 16.934L6.00005 16.9646L6.00039 18.9776C3.19696 18.7252 1 16.3692 1 13.5C1 10.9656 2.71424 8.83154 5.04648 8.19411C5.44561 4.70761 8.40661 2 12 2Z\"></path>\n </svg>\n }\n @case (Icons.globeLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M13.0003 21H18.0003V23H6.00032V21H11.0003V19.9506C7.70689 19.6236 4.88351 17.6987 3.31641 14.9622L5.05319 13.9697C6.43208 16.3776 9.02674 18 12.0003 18C16.4186 18 20.0003 14.4182 20.0003 9.99995C20.0003 7.02637 18.378 4.43171 15.9701 3.05282L16.9626 1.31604C19.9724 3.03965 22.0003 6.28297 22.0003 9.99995C22.0003 15.1853 18.0536 19.4489 13.0003 19.9506V21ZM12.0003 17C8.13433 17 5.00032 13.8659 5.00032 9.99995C5.00032 6.13396 8.13433 2.99995 12.0003 2.99995C15.8663 2.99995 19.0003 6.13396 19.0003 9.99995C19.0003 13.8659 15.8663 17 12.0003 17ZM12.0003 15C14.7617 15 17.0003 12.7614 17.0003 9.99995C17.0003 7.23853 14.7617 4.99995 12.0003 4.99995C9.2389 4.99995 7.00032 7.23853 7.00032 9.99995C7.00032 12.7614 9.2389 15 12.0003 15Z\"></path>\n </svg>\n }\n @case (Icons.mailSendLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M21 3C21.5523 3 22 3.44772 22 4V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V19H20V7.3L12 14.5L2 5.5V4C2 3.44772 2.44772 3 3 3H21ZM8 15V17H0V15H8ZM5 10V12H0V10H5ZM19.5659 5H4.43414L12 11.8093L19.5659 5Z\"></path>\n </svg>\n }\n @case (Icons.pagesLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M5 8V20H19V8H5ZM5 6H19V4H5V6ZM20 22H4C3.44772 22 3 21.5523 3 21V3C3 2.44772 3.44772 2 4 2H20C20.5523 2 21 2.44772 21 3V21C21 21.5523 20.5523 22 20 22ZM7 10H11V14H7V10ZM7 16H17V18H7V16ZM13 11H17V13H13V11Z\"></path>\n </svg>\n }\n @case (Icons.gitForkLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M6 5C5.44772 5 5 5.44772 5 6C5 6.55228 5.44772 7 6 7C6.55228 7 7 6.55228 7 6C7 5.44772 6.55228 5 6 5ZM3 6C3 4.34315 4.34315 3 6 3C7.65685 3 9 4.34315 9 6C9 7.30622 8.16519 8.41746 7 8.82929V9C7 10.1046 7.89543 11 9 11H15C16.1046 11 17 10.1046 17 9V8.82929C15.8348 8.41746 15 7.30622 15 6C15 4.34315 16.3431 3 18 3C19.6569 3 21 4.34315 21 6C21 7.30622 20.1652 8.41746 19 8.82929V9C19 11.2091 17.2091 13 15 13H13V15.1707C14.1652 15.5825 15 16.6938 15 18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18C9 16.6938 9.83481 15.5825 11 15.1707V13H9C6.79086 13 5 11.2091 5 9V8.82929C3.83481 8.41746 3 7.30622 3 6ZM18 5C17.4477 5 17 5.44772 17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5ZM12 17C11.4477 17 11 17.4477 11 18C11 18.5523 11.4477 19 12 19C12.5523 19 13 18.5523 13 18C13 17.4477 12.5523 17 12 17Z\"></path>\n </svg>\n }\n @case (Icons.gitRepositoryPrivateLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M6 10V20H19V10H6ZM18 8H20C20.5523 8 21 8.44772 21 9V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V9C3 8.44772 3.44772 8 4 8H6V7C6 3.68629 8.68629 1 12 1C15.3137 1 18 3.68629 18 7V8ZM16 8V7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7V8H16ZM7 11H9V13H7V11ZM7 14H9V16H7V14ZM7 17H9V19H7V17Z\"></path>\n </svg>\n }\n @case (Icons.starLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26ZM12.0006 15.968L16.2473 18.3451L15.2988 13.5717L18.8719 10.2674L14.039 9.69434L12.0006 5.27502L9.96214 9.69434L5.12921 10.2674L8.70231 13.5717L7.75383 18.3451L12.0006 15.968Z\"></path>\n </svg>\n }\n @case (Icons.calendar2Line) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M9 1V3H15V1H17V3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H7V1H9ZM20 11H4V19H20V11ZM8 13V15H6V13H8ZM13 13V15H11V13H13ZM18 13V15H16V13H18ZM7 5H4V9H20V5H17V7H15V5H9V7H7V5Z\"></path>\n </svg>\n }\n @case (Icons.macLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M14 18V20L16 21V22H8L7.99639 21.0036L10 20V18H2.9918C2.44405 18 2 17.5511 2 16.9925V4.00748C2 3.45107 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44892 22 4.00748V16.9925C22 17.5489 21.5447 18 21.0082 18H14ZM4 5V14H20V5H4Z\"></path>\n </svg>\n }\n @case (Icons.more2Fill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12 3C10.9 3 10 3.9 10 5C10 6.1 10.9 7 12 7C13.1 7 14 6.1 14 5C14 3.9 13.1 3 12 3ZM12 17C10.9 17 10 17.9 10 19C10 20.1 10.9 21 12 21C13.1 21 14 20.1 14 19C14 17.9 13.1 17 12 17ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z\"></path>\n </svg>\n }\n @case (Icons.editLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M6.41421 15.89L16.5563 5.74785L15.1421 4.33363L5 14.4758V15.89H6.41421ZM7.24264 17.89H3V13.6473L14.435 2.21231C14.8256 1.82179 15.4587 1.82179 15.8492 2.21231L18.6777 5.04074C19.0682 5.43126 19.0682 6.06443 18.6777 6.45495L7.24264 17.89ZM3 19.89H21V21.89H3V19.89Z\"></path>\n </svg>\n }\n @case (Icons.deleteBinLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M17 6H22V8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V8H2V6H7V3C7 2.44772 7.44772 2 8 2H16C16.5523 2 17 2.44772 17 3V6ZM18 8H6V20H18V8ZM9 11H11V17H9V11ZM13 11H15V17H13V11ZM9 4V6H15V4H9Z\"></path>\n </svg>\n }\n }\n</span>\n", styles: [":host{color:inherit;display:inline-flex}:host:has(.icon--left){margin-left:var(--gld-spacing--xxxs)}:host:has(.icon--right){margin-right:var(--gld-spacing--xxxs)}.icon{--gld-icon-size: var(--gld-icon-size--normal);position:relative;color:inherit;font-weight:400;width:var(--gld-icon-size);height:var(--gld-icon-size);margin:auto}.icon--tiny{--gld-icon-size: var(--gld-icon-size--tiny)}.icon--small{--gld-icon-size: var(--gld-icon-size--small)}.icon--medium{--gld-icon-size: var(--gld-icon-size--medium)}.icon--large{--gld-icon-size: var(--gld-icon-size--large)}\n"] }]
208
+ args: [{ selector: 'gld-icon', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n tabindex=\"-1\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\"\n class=\"icon icon--{{ size() }}\"\n [class.icon--left]=\"space() === ICONS_SPACES.left\"\n [class.icon--right]=\"space() === ICONS_SPACES.right\"\n [style.right.px]=\"moveLeftToRight()\"\n [style.top.px]=\"moveTopToBottom()\">\n @switch (icon()) {\n @case (ICONS.arrowDownSLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"></path>\n </svg>\n }\n @case (ICONS.arrowUpSLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z\"></path>\n </svg>\n }\n @case (ICONS.checkboxCircleLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11.0026 16L6.75999 11.7574L8.17421 10.3431L11.0026 13.1716L16.6595 7.51472L18.0737 8.92893L11.0026 16Z\"></path>\n </svg>\n }\n @case (ICONS.checkboxBlankCircleLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z\"></path>\n </svg>\n }\n @case (ICONS.loader4Fill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M18.364 5.63604L16.9497 7.05025C15.683 5.7835 13.933 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12H21C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C14.4853 3 16.7353 4.00736 18.364 5.63604Z\"></path>\n </svg>\n }\n @case (ICONS.logoutCircleLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M5 11H13V13H5V16L0 12L5 8V11ZM3.99927 18H6.70835C8.11862 19.2447 9.97111 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C9.97111 4 8.11862 4.75527 6.70835 6H3.99927C5.82368 3.57111 8.72836 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C8.72836 22 5.82368 20.4289 3.99927 18Z\"></path>\n </svg>\n }\n @case (ICONS.loginCircleLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M10 11V8L15 12L10 16V13H1V11H10ZM2.4578 15H4.58152C5.76829 17.9318 8.64262 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C8.64262 4 5.76829 6.06817 4.58152 9H2.4578C3.73207 4.94289 7.52236 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C7.52236 22 3.73207 19.0571 2.4578 15Z\"></path>\n </svg>\n }\n @case (ICONS.gitRepositoryLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M13 21V23.5L10 21.5L7 23.5V21H6.5C4.567 21 3 19.433 3 17.5V5C3 3.34315 4.34315 2 6 2H20C20.5523 2 21 2.44772 21 3V20C21 20.5523 20.5523 21 20 21H13ZM13 19H19V16H6.5C5.67157 16 5 16.6716 5 17.5C5 18.3284 5.67157 19 6.5 19H7V17H13V19ZM19 14V4H6V14.0354C6.1633 14.0121 6.33024 14 6.5 14H19ZM7 5H9V7H7V5ZM7 8H9V10H7V8ZM7 11H9V13H7V11Z\"></path>\n </svg>\n }\n @case (ICONS.fileList3Line) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M19 22H5C3.34315 22 2 20.6569 2 19V3C2 2.44772 2.44772 2 3 2H17C17.5523 2 18 2.44772 18 3V15H22V19C22 20.6569 20.6569 22 19 22ZM18 17V19C18 19.5523 18.4477 20 19 20C19.5523 20 20 19.5523 20 19V17H18ZM16 20V4H4V19C4 19.5523 4.44772 20 5 20H16ZM6 7H14V9H6V7ZM6 11H14V13H6V11ZM6 15H11V17H6V15Z\"></path>\n </svg>\n }\n @case (ICONS.menuLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z\"></path>\n </svg>\n }\n @case (ICONS.sunLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM11 1H13V4H11V1ZM11 20H13V23H11V20ZM3.51472 4.92893L4.92893 3.51472L7.05025 5.63604L5.63604 7.05025L3.51472 4.92893ZM16.9497 18.364L18.364 16.9497L20.4853 19.0711L19.0711 20.4853L16.9497 18.364ZM19.0711 3.51472L20.4853 4.92893L18.364 7.05025L16.9497 5.63604L19.0711 3.51472ZM5.63604 16.9497L7.05025 18.364L4.92893 20.4853L3.51472 19.0711L5.63604 16.9497ZM23 11V13H20V11H23ZM4 11V13H1V11H4Z\"></path>\n </svg>\n }\n @case (ICONS.moonClearLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M10 6C10 10.4183 13.5817 14 18 14C19.4386 14 20.7885 13.6203 21.9549 12.9556C21.4738 18.0302 17.2005 22 12 22C6.47715 22 2 17.5228 2 12C2 6.79948 5.9698 2.52616 11.0444 2.04507C10.3797 3.21152 10 4.56142 10 6ZM4 12C4 16.4183 7.58172 20 12 20C14.9654 20 17.5757 18.3788 18.9571 15.9546C18.6407 15.9848 18.3214 16 18 16C12.4772 16 8 11.5228 8 6C8 5.67863 8.01524 5.35933 8.04536 5.04293C5.62119 6.42426 4 9.03458 4 12ZM18.1642 2.29104L19 2.5V3.5L18.1642 3.70896C17.4476 3.8881 16.8881 4.4476 16.709 5.16417L16.5 6H15.5L15.291 5.16417C15.1119 4.4476 14.5524 3.8881 13.8358 3.70896L13 3.5V2.5L13.8358 2.29104C14.5524 2.1119 15.1119 1.5524 15.291 0.835829L15.5 0H16.5L16.709 0.835829C16.8881 1.5524 17.4476 2.1119 18.1642 2.29104ZM23.1642 7.29104L24 7.5V8.5L23.1642 8.70896C22.4476 8.8881 21.8881 9.4476 21.709 10.1642L21.5 11H20.5L20.291 10.1642C20.1119 9.4476 19.5524 8.8881 18.8358 8.70896L18 8.5V7.5L18.8358 7.29104C19.5524 7.1119 20.1119 6.5524 20.291 5.83583L20.5 5H21.5L21.709 5.83583C21.8881 6.5524 22.4476 7.1119 23.1642 7.29104Z\"></path>\n </svg>\n }\n @case (ICONS.englishInput) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M14 10H16L16.0005 10.7574C16.7154 10.279 17.5751 10 18.5 10C20.9853 10 23 12.0147 23 14.5V20H21V14.5C21 13.07 19.8255 12 18.5 12C17.1745 12 16 13.07 16 14.5V20H14V10ZM12 4V6H4V11H12V13H4V18H12V20H2V4H12Z\"></path>\n </svg>\n }\n @case (ICONS.translate) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M5 15V17C5 18.0544 5.81588 18.9182 6.85074 18.9945L7 19H10V21H7C4.79086 21 3 19.2091 3 17V15H5ZM18 10L22.4 21H20.245L19.044 18H14.954L13.755 21H11.601L16 10H18ZM17 12.8852L15.753 16H18.245L17 12.8852ZM8 2V4H12V11H8V14H6V11H2V4H6V2H8ZM17 3C19.2091 3 21 4.79086 21 7V9H19V7C19 5.89543 18.1046 5 17 5H14V3H17ZM6 6H4V9H6V6ZM10 6H8V9H10V6Z\"></path>\n </svg>\n }\n @case (ICONS.user4Line) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M5 20H19V22H5V20ZM12 18C7.58172 18 4 14.4183 4 10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10C20 14.4183 16.4183 18 12 18ZM12 16C15.3137 16 18 13.3137 18 10C18 6.68629 15.3137 4 12 4C8.68629 4 6 6.68629 6 10C6 13.3137 8.68629 16 12 16Z\"></path>\n </svg>\n }\n @case (ICONS.shapesLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M11.9998 1L6 11H18L11.9998 1ZM11.9998 4.8873L14.4676 9H9.53232L11.9998 4.8873ZM6.75 20C5.23122 20 4 18.7688 4 17.25C4 15.7312 5.23122 14.5 6.75 14.5C8.26878 14.5 9.5 15.7312 9.5 17.25C9.5 18.7688 8.26878 20 6.75 20ZM6.75 22C9.37335 22 11.5 19.8734 11.5 17.25C11.5 14.6266 9.37335 12.5 6.75 12.5C4.12665 12.5 2 14.6266 2 17.25C2 19.8734 4.12665 22 6.75 22ZM15 15.5V19.5H19V15.5H15ZM13 21.5V13.5H21V21.5H13Z\"></path>\n </svg>\n }\n @case (ICONS.closeLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z\"></path>\n </svg>\n }\n @case (ICONS.eyeLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3ZM12.0003 19C16.2359 19 19.8603 16.052 20.7777 12C19.8603 7.94803 16.2359 5 12.0003 5C7.7646 5 4.14022 7.94803 3.22278 12C4.14022 16.052 7.7646 19 12.0003 19ZM12.0003 16.5C9.51498 16.5 7.50026 14.4853 7.50026 12C7.50026 9.51472 9.51498 7.5 12.0003 7.5C14.4855 7.5 16.5003 9.51472 16.5003 12C16.5003 14.4853 14.4855 16.5 12.0003 16.5ZM12.0003 14.5C13.381 14.5 14.5003 13.3807 14.5003 12C14.5003 10.6193 13.381 9.5 12.0003 9.5C10.6196 9.5 9.50026 10.6193 9.50026 12C9.50026 13.3807 10.6196 14.5 12.0003 14.5Z\"></path>\n </svg>\n }\n @case (ICONS.eyeCloseLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M9.34268 18.7819L7.41083 18.2642L8.1983 15.3254C7.00919 14.8874 5.91661 14.2498 4.96116 13.4534L2.80783 15.6067L1.39362 14.1925L3.54695 12.0392C2.35581 10.6103 1.52014 8.87466 1.17578 6.96818L3.14386 6.61035C3.90289 10.8126 7.57931 14.0001 12.0002 14.0001C16.4211 14.0001 20.0976 10.8126 20.8566 6.61035L22.8247 6.96818C22.4803 8.87466 21.6446 10.6103 20.4535 12.0392L22.6068 14.1925L21.1926 15.6067L19.0393 13.4534C18.0838 14.2498 16.9912 14.8874 15.8021 15.3254L16.5896 18.2642L14.6578 18.7819L13.87 15.8418C13.2623 15.9459 12.6376 16.0001 12.0002 16.0001C11.3629 16.0001 10.7381 15.9459 10.1305 15.8418L9.34268 18.7819Z\"></path>\n </svg>\n }\n @case (ICONS.linkedinBoxFill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M18.3362 18.339H15.6707V14.1622C15.6707 13.1662 15.6505 11.8845 14.2817 11.8845C12.892 11.8845 12.6797 12.9683 12.6797 14.0887V18.339H10.0142V9.75H12.5747V10.9207H12.6092C12.967 10.2457 13.837 9.53325 15.1367 9.53325C17.8375 9.53325 18.337 11.3108 18.337 13.6245V18.339H18.3362ZM7.00373 8.57475C6.14573 8.57475 5.45648 7.88025 5.45648 7.026C5.45648 6.1725 6.14648 5.47875 7.00373 5.47875C7.85873 5.47875 8.55173 6.1725 8.55173 7.026C8.55173 7.88025 7.85798 8.57475 7.00373 8.57475ZM8.34023 18.339H5.66723V9.75H8.34023V18.339ZM19.6697 3H4.32923C3.59498 3 3.00098 3.5805 3.00098 4.29675V19.7033C3.00098 20.4202 3.59498 21 4.32923 21H19.6675C20.401 21 21.001 20.4202 21.001 19.7033V4.29675C21.001 3.5805 20.401 3 19.6675 3H19.6697Z\"></path>\n </svg>\n }\n @case (ICONS.githubFill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12.001 2C6.47598 2 2.00098 6.475 2.00098 12C2.00098 16.425 4.86348 20.1625 8.83848 21.4875C9.33848 21.575 9.52598 21.275 9.52598 21.0125C9.52598 20.775 9.51348 19.9875 9.51348 19.15C7.00098 19.6125 6.35098 18.5375 6.15098 17.975C6.03848 17.6875 5.55098 16.8 5.12598 16.5625C4.77598 16.375 4.27598 15.9125 5.11348 15.9C5.90098 15.8875 6.46348 16.625 6.65098 16.925C7.55098 18.4375 8.98848 18.0125 9.56348 17.75C9.65098 17.1 9.91348 16.6625 10.201 16.4125C7.97598 16.1625 5.65098 15.3 5.65098 11.475C5.65098 10.3875 6.03848 9.4875 6.67598 8.7875C6.57598 8.5375 6.22598 7.5125 6.77598 6.1375C6.77598 6.1375 7.61348 5.875 9.52598 7.1625C10.326 6.9375 11.176 6.825 12.026 6.825C12.876 6.825 13.726 6.9375 14.526 7.1625C16.4385 5.8625 17.276 6.1375 17.276 6.1375C17.826 7.5125 17.476 8.5375 17.376 8.7875C18.0135 9.4875 18.401 10.375 18.401 11.475C18.401 15.3125 16.0635 16.1625 13.8385 16.4125C14.201 16.725 14.5135 17.325 14.5135 18.2625C14.5135 19.6 14.501 20.675 14.501 21.0125C14.501 21.275 14.6885 21.5875 15.1885 21.4875C19.259 20.1133 21.9999 16.2963 22.001 12C22.001 6.475 17.526 2 12.001 2Z\"></path>\n </svg>\n }\n @case (ICONS.instagramFill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M13.0281 2.00073C14.1535 2.00259 14.7238 2.00855 15.2166 2.02322L15.4107 2.02956C15.6349 2.03753 15.8561 2.04753 16.1228 2.06003C17.1869 2.1092 17.9128 2.27753 18.5503 2.52503C19.2094 2.7792 19.7661 3.12253 20.3219 3.67837C20.8769 4.2342 21.2203 4.79253 21.4753 5.45003C21.7219 6.0867 21.8903 6.81337 21.9403 7.87753C21.9522 8.1442 21.9618 8.3654 21.9697 8.58964L21.976 8.78373C21.9906 9.27647 21.9973 9.84686 21.9994 10.9723L22.0002 11.7179C22.0003 11.809 22.0003 11.903 22.0003 12L22.0002 12.2821L21.9996 13.0278C21.9977 14.1532 21.9918 14.7236 21.9771 15.2163L21.9707 15.4104C21.9628 15.6347 21.9528 15.8559 21.9403 16.1225C21.8911 17.1867 21.7219 17.9125 21.4753 18.55C21.2211 19.2092 20.8769 19.7659 20.3219 20.3217C19.7661 20.8767 19.2069 21.22 18.5503 21.475C17.9128 21.7217 17.1869 21.89 16.1228 21.94C15.8561 21.9519 15.6349 21.9616 15.4107 21.9694L15.2166 21.9757C14.7238 21.9904 14.1535 21.997 13.0281 21.9992L12.2824 22C12.1913 22 12.0973 22 12.0003 22L11.7182 22L10.9725 21.9993C9.8471 21.9975 9.27672 21.9915 8.78397 21.9768L8.58989 21.9705C8.36564 21.9625 8.14444 21.9525 7.87778 21.94C6.81361 21.8909 6.08861 21.7217 5.45028 21.475C4.79194 21.2209 4.23444 20.8767 3.67861 20.3217C3.12278 19.7659 2.78028 19.2067 2.52528 18.55C2.27778 17.9125 2.11028 17.1867 2.06028 16.1225C2.0484 15.8559 2.03871 15.6347 2.03086 15.4104L2.02457 15.2163C2.00994 14.7236 2.00327 14.1532 2.00111 13.0278L2.00098 10.9723C2.00284 9.84686 2.00879 9.27647 2.02346 8.78373L2.02981 8.58964C2.03778 8.3654 2.04778 8.1442 2.06028 7.87753C2.10944 6.81253 2.27778 6.08753 2.52528 5.45003C2.77944 4.7917 3.12278 4.2342 3.67861 3.67837C4.23444 3.12253 4.79278 2.78003 5.45028 2.52503C6.08778 2.27753 6.81278 2.11003 7.87778 2.06003C8.14444 2.04816 8.36564 2.03847 8.58989 2.03062L8.78397 2.02433C9.27672 2.00969 9.8471 2.00302 10.9725 2.00086L13.0281 2.00073ZM12.0003 7.00003C9.23738 7.00003 7.00028 9.23956 7.00028 12C7.00028 14.7629 9.23981 17 12.0003 17C14.7632 17 17.0003 14.7605 17.0003 12C17.0003 9.23713 14.7607 7.00003 12.0003 7.00003ZM12.0003 9.00003C13.6572 9.00003 15.0003 10.3427 15.0003 12C15.0003 13.6569 13.6576 15 12.0003 15C10.3434 15 9.00028 13.6574 9.00028 12C9.00028 10.3431 10.3429 9.00003 12.0003 9.00003ZM17.2503 5.50003C16.561 5.50003 16.0003 6.05994 16.0003 6.74918C16.0003 7.43843 16.5602 7.9992 17.2503 7.9992C17.9395 7.9992 18.5003 7.4393 18.5003 6.74918C18.5003 6.05994 17.9386 5.49917 17.2503 5.50003Z\"></path>\n </svg>\n }\n @case (ICONS.twitterXFill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M17.6874 3.0625L12.6907 8.77425L8.37045 3.0625H2.11328L9.58961 12.8387L2.50378 20.9375H5.53795L11.0068 14.6886L15.7863 20.9375H21.8885L14.095 10.6342L20.7198 3.0625H17.6874ZM16.6232 19.1225L5.65436 4.78217H7.45745L18.3034 19.1225H16.6232Z\"></path>\n </svg>\n }\n @case (ICONS.downloadCloud2Line) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M13 13V18.585L14.8284 16.7574L16.2426 18.1716L12 22.4142L7.75736 18.1716L9.17157 16.7574L11 18.585V13H13ZM12 2C15.5934 2 18.5544 4.70761 18.9541 8.19395C21.2858 8.83154 23 10.9656 23 13.5C23 16.3688 20.8036 18.7246 18.0006 18.9776L18.0009 16.9644C19.6966 16.7214 21 15.2629 21 13.5C21 11.567 19.433 10 17.5 10C17.2912 10 17.0867 10.0183 16.8887 10.054C16.9616 9.7142 17 9.36158 17 9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9C7 9.36158 7.03838 9.7142 7.11205 10.0533C6.91331 10.0183 6.70879 10 6.5 10C4.567 10 3 11.567 3 13.5C3 15.2003 4.21241 16.6174 5.81986 16.934L6.00005 16.9646L6.00039 18.9776C3.19696 18.7252 1 16.3692 1 13.5C1 10.9656 2.71424 8.83154 5.04648 8.19411C5.44561 4.70761 8.40661 2 12 2Z\"></path>\n </svg>\n }\n @case (ICONS.globeLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M13.0003 21H18.0003V23H6.00032V21H11.0003V19.9506C7.70689 19.6236 4.88351 17.6987 3.31641 14.9622L5.05319 13.9697C6.43208 16.3776 9.02674 18 12.0003 18C16.4186 18 20.0003 14.4182 20.0003 9.99995C20.0003 7.02637 18.378 4.43171 15.9701 3.05282L16.9626 1.31604C19.9724 3.03965 22.0003 6.28297 22.0003 9.99995C22.0003 15.1853 18.0536 19.4489 13.0003 19.9506V21ZM12.0003 17C8.13433 17 5.00032 13.8659 5.00032 9.99995C5.00032 6.13396 8.13433 2.99995 12.0003 2.99995C15.8663 2.99995 19.0003 6.13396 19.0003 9.99995C19.0003 13.8659 15.8663 17 12.0003 17ZM12.0003 15C14.7617 15 17.0003 12.7614 17.0003 9.99995C17.0003 7.23853 14.7617 4.99995 12.0003 4.99995C9.2389 4.99995 7.00032 7.23853 7.00032 9.99995C7.00032 12.7614 9.2389 15 12.0003 15Z\"></path>\n </svg>\n }\n @case (ICONS.mailSendLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M21 3C21.5523 3 22 3.44772 22 4V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V19H20V7.3L12 14.5L2 5.5V4C2 3.44772 2.44772 3 3 3H21ZM8 15V17H0V15H8ZM5 10V12H0V10H5ZM19.5659 5H4.43414L12 11.8093L19.5659 5Z\"></path>\n </svg>\n }\n @case (ICONS.pagesLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M5 8V20H19V8H5ZM5 6H19V4H5V6ZM20 22H4C3.44772 22 3 21.5523 3 21V3C3 2.44772 3.44772 2 4 2H20C20.5523 2 21 2.44772 21 3V21C21 21.5523 20.5523 22 20 22ZM7 10H11V14H7V10ZM7 16H17V18H7V16ZM13 11H17V13H13V11Z\"></path>\n </svg>\n }\n @case (ICONS.gitForkLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M6 5C5.44772 5 5 5.44772 5 6C5 6.55228 5.44772 7 6 7C6.55228 7 7 6.55228 7 6C7 5.44772 6.55228 5 6 5ZM3 6C3 4.34315 4.34315 3 6 3C7.65685 3 9 4.34315 9 6C9 7.30622 8.16519 8.41746 7 8.82929V9C7 10.1046 7.89543 11 9 11H15C16.1046 11 17 10.1046 17 9V8.82929C15.8348 8.41746 15 7.30622 15 6C15 4.34315 16.3431 3 18 3C19.6569 3 21 4.34315 21 6C21 7.30622 20.1652 8.41746 19 8.82929V9C19 11.2091 17.2091 13 15 13H13V15.1707C14.1652 15.5825 15 16.6938 15 18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18C9 16.6938 9.83481 15.5825 11 15.1707V13H9C6.79086 13 5 11.2091 5 9V8.82929C3.83481 8.41746 3 7.30622 3 6ZM18 5C17.4477 5 17 5.44772 17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5ZM12 17C11.4477 17 11 17.4477 11 18C11 18.5523 11.4477 19 12 19C12.5523 19 13 18.5523 13 18C13 17.4477 12.5523 17 12 17Z\"></path>\n </svg>\n }\n @case (ICONS.gitRepositoryPrivateLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M6 10V20H19V10H6ZM18 8H20C20.5523 8 21 8.44772 21 9V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V9C3 8.44772 3.44772 8 4 8H6V7C6 3.68629 8.68629 1 12 1C15.3137 1 18 3.68629 18 7V8ZM16 8V7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7V8H16ZM7 11H9V13H7V11ZM7 14H9V16H7V14ZM7 17H9V19H7V17Z\"></path>\n </svg>\n }\n @case (ICONS.starLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26ZM12.0006 15.968L16.2473 18.3451L15.2988 13.5717L18.8719 10.2674L14.039 9.69434L12.0006 5.27502L9.96214 9.69434L5.12921 10.2674L8.70231 13.5717L7.75383 18.3451L12.0006 15.968Z\"></path>\n </svg>\n }\n @case (ICONS.calendar2Line) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M9 1V3H15V1H17V3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H7V1H9ZM20 11H4V19H20V11ZM8 13V15H6V13H8ZM13 13V15H11V13H13ZM18 13V15H16V13H18ZM7 5H4V9H20V5H17V7H15V5H9V7H7V5Z\"></path>\n </svg>\n }\n @case (ICONS.macLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M14 18V20L16 21V22H8L7.99639 21.0036L10 20V18H2.9918C2.44405 18 2 17.5511 2 16.9925V4.00748C2 3.45107 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44892 22 4.00748V16.9925C22 17.5489 21.5447 18 21.0082 18H14ZM4 5V14H20V5H4Z\"></path>\n </svg>\n }\n @case (ICONS.more2Fill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12 3C10.9 3 10 3.9 10 5C10 6.1 10.9 7 12 7C13.1 7 14 6.1 14 5C14 3.9 13.1 3 12 3ZM12 17C10.9 17 10 17.9 10 19C10 20.1 10.9 21 12 21C13.1 21 14 20.1 14 19C14 17.9 13.1 17 12 17ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z\"></path>\n </svg>\n }\n @case (ICONS.editLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M6.41421 15.89L16.5563 5.74785L15.1421 4.33363L5 14.4758V15.89H6.41421ZM7.24264 17.89H3V13.6473L14.435 2.21231C14.8256 1.82179 15.4587 1.82179 15.8492 2.21231L18.6777 5.04074C19.0682 5.43126 19.0682 6.06443 18.6777 6.45495L7.24264 17.89ZM3 19.89H21V21.89H3V19.89Z\"></path>\n </svg>\n }\n @case (ICONS.deleteBinLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M17 6H22V8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V8H2V6H7V3C7 2.44772 7.44772 2 8 2H16C16.5523 2 17 2.44772 17 3V6ZM18 8H6V20H18V8ZM9 11H11V17H9V11ZM13 11H15V17H13V11ZM9 4V6H15V4H9Z\"></path>\n </svg>\n }\n }\n</span>\n", styles: [":host{color:inherit;display:inline-flex}:host:has(.icon--left){margin-left:var(--gld-spacing--xxxs)}:host:has(.icon--right){margin-right:var(--gld-spacing--xxxs)}.icon{--gld-icon-size: var(--gld-icon-size--normal);position:relative;color:inherit;font-weight:400;width:var(--gld-icon-size);height:var(--gld-icon-size);margin:auto}.icon--tiny{--gld-icon-size: var(--gld-icon-size--tiny)}.icon--small{--gld-icon-size: var(--gld-icon-size--small)}.icon--medium{--gld-icon-size: var(--gld-icon-size--medium)}.icon--large{--gld-icon-size: var(--gld-icon-size--large)}\n"] }]
229
209
  }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], space: [{ type: i0.Input, args: [{ isSignal: true, alias: "space", required: false }] }], moveTopToBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveTopToBottom", required: false }] }], moveLeftToRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveLeftToRight", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
230
210
 
231
211
  // Angular Imports
232
- class Button {
212
+ class ButtonComponent {
233
213
  constructor() {
234
214
  this.id = input.required({ ...(ngDevMode ? { debugName: "id" } : {}), transform: (value) => `button-id-${value.trim().split(' ').join('-')}` });
235
215
  this.name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}), transform: (value) => `button-name-${value.trim().split(' ').join('-')}` });
236
- this.color = input(ButtonColor.pink, ...(ngDevMode ? [{ debugName: "color" }] : []));
237
- this.size = input(ButtonSize.normal, ...(ngDevMode ? [{ debugName: "size" }] : []));
216
+ this.color = input(BUTTON_COLORS.pink, ...(ngDevMode ? [{ debugName: "color" }] : []));
217
+ this.size = input(BUTTON_SIZES.normal, ...(ngDevMode ? [{ debugName: "size" }] : []));
238
218
  this.icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : []));
239
- this.iconSize = input(...(ngDevMode ? [undefined, { debugName: "iconSize" }] : []));
219
+ this.iconSize = input(ICONS_SIZES.normal, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
240
220
  this.moveTopToBottom = input(0, { ...(ngDevMode ? { debugName: "moveTopToBottom" } : {}), transform: numberAttribute });
241
221
  this.moveLeftToRight = input(0, { ...(ngDevMode ? { debugName: "moveLeftToRight" } : {}), transform: numberAttribute });
242
222
  this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
@@ -250,25 +230,25 @@ class Button {
250
230
  keyup() {
251
231
  this.emitClick();
252
232
  }
253
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
254
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: Button, isStandalone: true, selector: "gld-button", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, 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\n id=\"{{ id() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"button button--{{ color() }} button--{{ size() }}\"\n [class.button--disabled]=\"disabled()\"\n [class.button--full]=\"full()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\">\n <!-- Icon -->\n @let innerIcon = icon();\n @if (innerIcon) {\n <gld-icon\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [icon]=\"innerIcon\"\n [size]=\"iconSize() ?? size()\"\n [disabled]=\"disabled()\" />\n }\n <!-- Content -->\n <span>\n <ng-content>no content</ng-content>\n </span>\n</button>\n\n<!-- Only used by DropdownMenuComponent -->\n<ng-content select=\"[gldDropdownMenuTemplate]\" />\n", styles: [":host{display:inline-block;height:inherit;max-width:inherit}: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--xxs);--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)}.button:active{transform:scale(.95)}.button span{text-transform:capitalize;-webkit-user-select:none;user-select:none}.button--pink{--gld-color: var(--gld-pink);--gld-background: var(--gld-pink-transparent--010);--gld-background--hover: var(--gld-pink-transparent--020)}.button--purple{--gld-color: var(--gld-purple);--gld-background: var(--gld-purple-transparent--010);--gld-background--hover: var(--gld-purple-transparent--020)}.button--mustard{--gld-color: var(--gld-mustard);--gld-background: var(--gld-mustard-transparent--010);--gld-background--hover: var(--gld-mustard-transparent--020)}.button--orange{--gld-color: var(--gld-orange);--gld-background: var(--gld-orange-transparent--010);--gld-background--hover: var(--gld-orange-transparent--020)}.button--blue{--gld-color: var(--gld-blue);--gld-background: var(--gld-blue-transparent--010);--gld-background--hover: var(--gld-blue-transparent--020)}.button--red{--gld-color: var(--gld-red);--gld-background: var(--gld-red-transparent--010);--gld-background--hover: var(--gld-red-transparent--020)}.button--green{--gld-color: var(--gld-green);--gld-background: var(--gld-green-transparent--010);--gld-background--hover: var(--gld-green-transparent--020)}.button--tiny{--gld-font-size: var(--gld-font-size--small);--gld-padding: var(--gld-spacing--xxxs) var(--gld-spacing--xxs)}.button--small{--gld-font-size: var(--gld-font-size--small);--gld-padding: var(--gld-spacing--xxs)}.button--normal{--gld-font-size: var(--gld-font-size--normal);--gld-padding: var(--gld-spacing--xxs) var(--gld-spacing--xs)}.button--medium{--gld-padding: var(--gld-spacing--xs) var(--gld-spacing--m)}.button--large{--gld-font-size: var(--gld-font-size--heading-three);--gld-padding: var(--gld-spacing--xs) var(--gld-spacing--l)}.button--disabled{--gld-color: var(--gld-gray);--gld-background: var(--gld-gray-transparent--020);--gld-background--hover: var(--gld-gray-transparent--020);pointer-events:none;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: Icon, selector: "gld-icon", inputs: ["icon", "size", "space", "moveTopToBottom", "moveLeftToRight", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
233
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
234
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: ButtonComponent, isStandalone: true, selector: "gld-button", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, 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\n id=\"{{ id() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"button button--{{ color() }} button--{{ size() }}\"\n [class.button--disabled]=\"disabled()\"\n [class.button--full]=\"full()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\">\n <!-- Icon -->\n @let innerIcon = icon();\n @if (innerIcon) {\n <gld-icon\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [icon]=\"innerIcon\"\n [size]=\"iconSize() ?? size()\"\n [disabled]=\"disabled()\" />\n }\n <!-- Content -->\n <span>\n <ng-content>no content</ng-content>\n </span>\n</button>\n\n<!-- Only used by DropdownMenuComponent -->\n<ng-content select=\"[gldDropdownMenuTemplate]\" />\n", styles: [":host{display:inline-block;height:inherit;max-width:inherit}: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--xxs);--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)}.button:active{transform:scale(.95)}.button span{text-transform:capitalize;-webkit-user-select:none;user-select:none}.button--pink{--gld-color: var(--gld-pink);--gld-background: var(--gld-pink-transparent--010);--gld-background--hover: var(--gld-pink-transparent--020)}.button--purple{--gld-color: var(--gld-purple);--gld-background: var(--gld-purple-transparent--010);--gld-background--hover: var(--gld-purple-transparent--020)}.button--mustard{--gld-color: var(--gld-mustard);--gld-background: var(--gld-mustard-transparent--010);--gld-background--hover: var(--gld-mustard-transparent--020)}.button--orange{--gld-color: var(--gld-orange);--gld-background: var(--gld-orange-transparent--010);--gld-background--hover: var(--gld-orange-transparent--020)}.button--blue{--gld-color: var(--gld-blue);--gld-background: var(--gld-blue-transparent--010);--gld-background--hover: var(--gld-blue-transparent--020)}.button--red{--gld-color: var(--gld-red);--gld-background: var(--gld-red-transparent--010);--gld-background--hover: var(--gld-red-transparent--020)}.button--green{--gld-color: var(--gld-green);--gld-background: var(--gld-green-transparent--010);--gld-background--hover: var(--gld-green-transparent--020)}.button--tiny{--gld-font-size: var(--gld-font-size--small);--gld-padding: var(--gld-spacing--xxxs) var(--gld-spacing--xxs)}.button--small{--gld-font-size: var(--gld-font-size--small);--gld-padding: var(--gld-spacing--xxs)}.button--normal{--gld-font-size: var(--gld-font-size--normal);--gld-padding: var(--gld-spacing--xxs) var(--gld-spacing--xs)}.button--medium{--gld-padding: var(--gld-spacing--xs) var(--gld-spacing--m)}.button--large{--gld-font-size: var(--gld-font-size--heading-three);--gld-padding: var(--gld-spacing--xs) var(--gld-spacing--l)}.button--disabled{--gld-color: var(--gld-gray);--gld-background: var(--gld-gray-transparent--020);--gld-background--hover: var(--gld-gray-transparent--020);pointer-events:none;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gld-icon", inputs: ["icon", "size", "space", "moveTopToBottom", "moveLeftToRight", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
255
235
  }
256
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Button, decorators: [{
236
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ButtonComponent, decorators: [{
257
237
  type: Component,
258
- args: [{ selector: 'gld-button', imports: [Icon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n id=\"{{ id() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"button button--{{ color() }} button--{{ size() }}\"\n [class.button--disabled]=\"disabled()\"\n [class.button--full]=\"full()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\">\n <!-- Icon -->\n @let innerIcon = icon();\n @if (innerIcon) {\n <gld-icon\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [icon]=\"innerIcon\"\n [size]=\"iconSize() ?? size()\"\n [disabled]=\"disabled()\" />\n }\n <!-- Content -->\n <span>\n <ng-content>no content</ng-content>\n </span>\n</button>\n\n<!-- Only used by DropdownMenuComponent -->\n<ng-content select=\"[gldDropdownMenuTemplate]\" />\n", styles: [":host{display:inline-block;height:inherit;max-width:inherit}: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--xxs);--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)}.button:active{transform:scale(.95)}.button span{text-transform:capitalize;-webkit-user-select:none;user-select:none}.button--pink{--gld-color: var(--gld-pink);--gld-background: var(--gld-pink-transparent--010);--gld-background--hover: var(--gld-pink-transparent--020)}.button--purple{--gld-color: var(--gld-purple);--gld-background: var(--gld-purple-transparent--010);--gld-background--hover: var(--gld-purple-transparent--020)}.button--mustard{--gld-color: var(--gld-mustard);--gld-background: var(--gld-mustard-transparent--010);--gld-background--hover: var(--gld-mustard-transparent--020)}.button--orange{--gld-color: var(--gld-orange);--gld-background: var(--gld-orange-transparent--010);--gld-background--hover: var(--gld-orange-transparent--020)}.button--blue{--gld-color: var(--gld-blue);--gld-background: var(--gld-blue-transparent--010);--gld-background--hover: var(--gld-blue-transparent--020)}.button--red{--gld-color: var(--gld-red);--gld-background: var(--gld-red-transparent--010);--gld-background--hover: var(--gld-red-transparent--020)}.button--green{--gld-color: var(--gld-green);--gld-background: var(--gld-green-transparent--010);--gld-background--hover: var(--gld-green-transparent--020)}.button--tiny{--gld-font-size: var(--gld-font-size--small);--gld-padding: var(--gld-spacing--xxxs) var(--gld-spacing--xxs)}.button--small{--gld-font-size: var(--gld-font-size--small);--gld-padding: var(--gld-spacing--xxs)}.button--normal{--gld-font-size: var(--gld-font-size--normal);--gld-padding: var(--gld-spacing--xxs) var(--gld-spacing--xs)}.button--medium{--gld-padding: var(--gld-spacing--xs) var(--gld-spacing--m)}.button--large{--gld-font-size: var(--gld-font-size--heading-three);--gld-padding: var(--gld-spacing--xs) var(--gld-spacing--l)}.button--disabled{--gld-color: var(--gld-gray);--gld-background: var(--gld-gray-transparent--020);--gld-background--hover: var(--gld-gray-transparent--020);pointer-events:none;cursor:not-allowed}\n"] }]
238
+ args: [{ selector: 'gld-button', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n id=\"{{ id() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"button button--{{ color() }} button--{{ size() }}\"\n [class.button--disabled]=\"disabled()\"\n [class.button--full]=\"full()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\">\n <!-- Icon -->\n @let innerIcon = icon();\n @if (innerIcon) {\n <gld-icon\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [icon]=\"innerIcon\"\n [size]=\"iconSize() ?? size()\"\n [disabled]=\"disabled()\" />\n }\n <!-- Content -->\n <span>\n <ng-content>no content</ng-content>\n </span>\n</button>\n\n<!-- Only used by DropdownMenuComponent -->\n<ng-content select=\"[gldDropdownMenuTemplate]\" />\n", styles: [":host{display:inline-block;height:inherit;max-width:inherit}: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--xxs);--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)}.button:active{transform:scale(.95)}.button span{text-transform:capitalize;-webkit-user-select:none;user-select:none}.button--pink{--gld-color: var(--gld-pink);--gld-background: var(--gld-pink-transparent--010);--gld-background--hover: var(--gld-pink-transparent--020)}.button--purple{--gld-color: var(--gld-purple);--gld-background: var(--gld-purple-transparent--010);--gld-background--hover: var(--gld-purple-transparent--020)}.button--mustard{--gld-color: var(--gld-mustard);--gld-background: var(--gld-mustard-transparent--010);--gld-background--hover: var(--gld-mustard-transparent--020)}.button--orange{--gld-color: var(--gld-orange);--gld-background: var(--gld-orange-transparent--010);--gld-background--hover: var(--gld-orange-transparent--020)}.button--blue{--gld-color: var(--gld-blue);--gld-background: var(--gld-blue-transparent--010);--gld-background--hover: var(--gld-blue-transparent--020)}.button--red{--gld-color: var(--gld-red);--gld-background: var(--gld-red-transparent--010);--gld-background--hover: var(--gld-red-transparent--020)}.button--green{--gld-color: var(--gld-green);--gld-background: var(--gld-green-transparent--010);--gld-background--hover: var(--gld-green-transparent--020)}.button--tiny{--gld-font-size: var(--gld-font-size--small);--gld-padding: var(--gld-spacing--xxxs) var(--gld-spacing--xxs)}.button--small{--gld-font-size: var(--gld-font-size--small);--gld-padding: var(--gld-spacing--xxs)}.button--normal{--gld-font-size: var(--gld-font-size--normal);--gld-padding: var(--gld-spacing--xxs) var(--gld-spacing--xs)}.button--medium{--gld-padding: var(--gld-spacing--xs) var(--gld-spacing--m)}.button--large{--gld-font-size: var(--gld-font-size--heading-three);--gld-padding: var(--gld-spacing--xs) var(--gld-spacing--l)}.button--disabled{--gld-color: var(--gld-gray);--gld-background: var(--gld-gray-transparent--020);--gld-background--hover: var(--gld-gray-transparent--020);pointer-events:none;cursor:not-allowed}\n"] }]
259
239
  }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], moveTopToBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveTopToBottom", required: false }] }], moveLeftToRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveLeftToRight", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], full: [{ type: i0.Input, args: [{ isSignal: true, alias: "full", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
260
240
 
261
241
  // Angular Imports
262
- const components$7 = [Icon];
263
- class DropdownButton {
242
+ const components$7 = [IconComponent];
243
+ class DropdownButtonComponent {
264
244
  constructor() {
265
245
  this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
266
246
  this.icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : []));
267
- this.iconSize = input(IconsSize.normal, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
268
- this.iconSpace = input(IconsSpace.none, ...(ngDevMode ? [{ debugName: "iconSpace" }] : []));
247
+ this.iconSize = input(ICONS_SIZES.normal, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
248
+ this.iconSpace = input(ICONS_SPACES.none, ...(ngDevMode ? [{ debugName: "iconSpace" }] : []));
269
249
  this.moveTopToBottom = input(0, { ...(ngDevMode ? { debugName: "moveTopToBottom" } : {}), transform: numberAttribute });
270
250
  this.moveLeftToRight = input(0, { ...(ngDevMode ? { debugName: "moveLeftToRight" } : {}), transform: numberAttribute });
271
- this.direction = input(DropdownDirection.left, ...(ngDevMode ? [{ debugName: "direction" }] : []));
251
+ this.direction = input(DROPDOWN_DIRECTIONS.left, ...(ngDevMode ? [{ debugName: "direction" }] : []));
272
252
  this.changeValue = output();
273
253
  this.current = signal(null, ...(ngDevMode ? [{ debugName: "current" }] : []));
274
254
  this.disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
@@ -283,10 +263,10 @@ class DropdownButton {
283
263
  keyup(value) {
284
264
  this.select(value);
285
265
  }
286
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DropdownButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
287
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: DropdownButton, isStandalone: true, selector: "gld-dropdown-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, iconSpace: { classPropertyName: "iconSpace", publicName: "iconSpace", isSignal: true, isRequired: false, transformFunction: null }, moveTopToBottom: { classPropertyName: "moveTopToBottom", publicName: "moveTopToBottom", isSignal: true, isRequired: false, transformFunction: null }, moveLeftToRight: { classPropertyName: "moveLeftToRight", publicName: "moveLeftToRight", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeValue: "changeValue" }, viewQueries: [{ propertyName: "buttonChild", first: true, predicate: ["buttonChild"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<button\n #buttonChild\n [tabindex]=\"disabled() ? '-1' : '0'\"\n class=\"button button--direction-{{ direction() }}\"\n [class.button--selected]=\"selected()\"\n (keyup.enter)=\"keyup(value())\"\n (click)=\"select(value())\">\n <!-- Icon -->\n @let innerIcon = icon();\n @if (innerIcon) {\n <gld-icon\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [icon]=\"innerIcon\"\n [size]=\"iconSize()\"\n [space]=\"iconSpace()\"\n [disabled]=\"disabled()\" />\n }\n <!-- Content -->\n <span>\n <ng-content> no content </ng-content>\n </span>\n</button>\n", styles: [":host{position:relative;width:100%}.button{--gld-background: transparent;--gld-background--hover: var(--gld-gray-transparent--010);--gld-color: var(--gld-foreground-color);--gld-color--selected: var(--gld-pink);--gld-color--hover: var(--gld-blue);--gld-radius: var(--gld-radius--xxxs);--gld-height: 40px;padding:var(--gld-spacing--xxs) var(--gld-spacing--xs);width:100%;height:var(--gld-height);background:var(--gld-background);color:var(--gld-color);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:var(--gld-line-height);text-align:left;-webkit-user-select:none;user-select:none;outline:none;border:none;border-radius:var(--gld-radius);cursor:pointer;display:inline-flex;align-items:center;gap:var(--gld-spacing--xxs);will-change:background,transform,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover{--gld-color: var(--gld-color--hover);--gld-background: var(--gld-background--hover)}.button:active{transform:scale(.95)}.button span{text-transform:capitalize;-webkit-user-select:none;user-select:none}.button--direction-left{justify-content:flex-start}.button--direction-right{justify-content:flex-end}.button--selected,.button--selected:hover{--gld-color: var(--gld-color--selected)}\n"], dependencies: [{ kind: "component", type: Icon, selector: "gld-icon", inputs: ["icon", "size", "space", "moveTopToBottom", "moveLeftToRight", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
266
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DropdownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
267
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: DropdownButtonComponent, isStandalone: true, selector: "gld-dropdown-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, iconSpace: { classPropertyName: "iconSpace", publicName: "iconSpace", isSignal: true, isRequired: false, transformFunction: null }, moveTopToBottom: { classPropertyName: "moveTopToBottom", publicName: "moveTopToBottom", isSignal: true, isRequired: false, transformFunction: null }, moveLeftToRight: { classPropertyName: "moveLeftToRight", publicName: "moveLeftToRight", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeValue: "changeValue" }, viewQueries: [{ propertyName: "buttonChild", first: true, predicate: ["buttonChild"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<button\n #buttonChild\n [tabindex]=\"disabled() ? '-1' : '0'\"\n class=\"button button--direction-{{ direction() }}\"\n [class.button--selected]=\"selected()\"\n (keyup.enter)=\"keyup(value())\"\n (click)=\"select(value())\">\n <!-- Icon -->\n @let innerIcon = icon();\n @if (innerIcon) {\n <gld-icon\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [icon]=\"innerIcon\"\n [size]=\"iconSize()\"\n [space]=\"iconSpace()\"\n [disabled]=\"disabled()\" />\n }\n <!-- Content -->\n <span>\n <ng-content> no content </ng-content>\n </span>\n</button>\n", styles: [":host{position:relative;width:100%}.button{--gld-background: transparent;--gld-background--hover: var(--gld-gray-transparent--010);--gld-color: var(--gld-foreground-color);--gld-color--selected: var(--gld-pink);--gld-color--hover: var(--gld-blue);--gld-radius: var(--gld-radius--xxxs);--gld-height: 40px;padding:var(--gld-spacing--xxs) var(--gld-spacing--xs);width:100%;height:var(--gld-height);background:var(--gld-background);color:var(--gld-color);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:var(--gld-line-height);text-align:left;-webkit-user-select:none;user-select:none;outline:none;border:none;border-radius:var(--gld-radius);cursor:pointer;display:inline-flex;align-items:center;gap:var(--gld-spacing--xxs);will-change:background,transform,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover{--gld-color: var(--gld-color--hover);--gld-background: var(--gld-background--hover)}.button:active{transform:scale(.95)}.button span{text-transform:capitalize;-webkit-user-select:none;user-select:none}.button--direction-left{justify-content:flex-start}.button--direction-right{justify-content:flex-end}.button--selected,.button--selected:hover{--gld-color: var(--gld-color--selected)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gld-icon", inputs: ["icon", "size", "space", "moveTopToBottom", "moveLeftToRight", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
288
268
  }
289
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DropdownButton, decorators: [{
269
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DropdownButtonComponent, decorators: [{
290
270
  type: Component,
291
271
  args: [{ selector: 'gld-dropdown-button', imports: [...components$7], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n #buttonChild\n [tabindex]=\"disabled() ? '-1' : '0'\"\n class=\"button button--direction-{{ direction() }}\"\n [class.button--selected]=\"selected()\"\n (keyup.enter)=\"keyup(value())\"\n (click)=\"select(value())\">\n <!-- Icon -->\n @let innerIcon = icon();\n @if (innerIcon) {\n <gld-icon\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [icon]=\"innerIcon\"\n [size]=\"iconSize()\"\n [space]=\"iconSpace()\"\n [disabled]=\"disabled()\" />\n }\n <!-- Content -->\n <span>\n <ng-content> no content </ng-content>\n </span>\n</button>\n", styles: [":host{position:relative;width:100%}.button{--gld-background: transparent;--gld-background--hover: var(--gld-gray-transparent--010);--gld-color: var(--gld-foreground-color);--gld-color--selected: var(--gld-pink);--gld-color--hover: var(--gld-blue);--gld-radius: var(--gld-radius--xxxs);--gld-height: 40px;padding:var(--gld-spacing--xxs) var(--gld-spacing--xs);width:100%;height:var(--gld-height);background:var(--gld-background);color:var(--gld-color);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:var(--gld-line-height);text-align:left;-webkit-user-select:none;user-select:none;outline:none;border:none;border-radius:var(--gld-radius);cursor:pointer;display:inline-flex;align-items:center;gap:var(--gld-spacing--xxs);will-change:background,transform,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover{--gld-color: var(--gld-color--hover);--gld-background: var(--gld-background--hover)}.button:active{transform:scale(.95)}.button span{text-transform:capitalize;-webkit-user-select:none;user-select:none}.button--direction-left{justify-content:flex-start}.button--direction-right{justify-content:flex-end}.button--selected,.button--selected:hover{--gld-color: var(--gld-color--selected)}\n"] }]
292
272
  }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], iconSpace: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSpace", required: false }] }], moveTopToBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveTopToBottom", required: false }] }], moveLeftToRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveLeftToRight", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], changeValue: [{ type: i0.Output, args: ["changeValue"] }], buttonChild: [{ type: i0.ViewChild, args: ['buttonChild', { ...{ read: ElementRef }, isSignal: true }] }] } });
@@ -316,18 +296,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
316
296
  }] });
317
297
 
318
298
  // Angular Imports
319
- class IconButton {
299
+ class IconButtonComponent {
320
300
  constructor() {
321
301
  this.icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : []));
322
302
  this.id = input.required({ ...(ngDevMode ? { debugName: "id" } : {}), transform: (value) => `button-id-${value.trim().split(' ').join('-')}` });
323
303
  this.name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}), transform: (value) => `button-name-${value.trim().split(' ').join('-')}` });
324
- this.iconSize = input(IconsSize.normal, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
325
- this.space = input(IconsSpace.none, ...(ngDevMode ? [{ debugName: "space" }] : []));
304
+ this.iconSize = input(ICONS_SIZES.normal, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
305
+ this.space = input(ICONS_SPACES.none, ...(ngDevMode ? [{ debugName: "space" }] : []));
326
306
  this.moveTopToBottom = input(0, { ...(ngDevMode ? { debugName: "moveTopToBottom" } : {}), transform: numberAttribute });
327
307
  this.moveLeftToRight = input(0, { ...(ngDevMode ? { debugName: "moveLeftToRight" } : {}), transform: numberAttribute });
328
308
  this.background = input(false, { ...(ngDevMode ? { debugName: "background" } : {}), transform: booleanAttribute });
329
309
  this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
330
- this.color = input(ButtonColor.pink, ...(ngDevMode ? [{ debugName: "color" }] : []));
310
+ this.color = input(BUTTON_COLORS.pink, ...(ngDevMode ? [{ debugName: "color" }] : []));
331
311
  this.clicked = output();
332
312
  }
333
313
  emitClick() {
@@ -337,38 +317,38 @@ class IconButton {
337
317
  keyup() {
338
318
  this.emitClick();
339
319
  }
340
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IconButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
341
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: IconButton, isStandalone: true, selector: "gld-icon-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, space: { classPropertyName: "space", publicName: "space", isSignal: true, isRequired: false, transformFunction: null }, moveTopToBottom: { classPropertyName: "moveTopToBottom", publicName: "moveTopToBottom", isSignal: true, isRequired: false, transformFunction: null }, moveLeftToRight: { classPropertyName: "moveLeftToRight", publicName: "moveLeftToRight", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n id=\"{{ id() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"button button--{{ color() }}\"\n [class.button--disabled]=\"disabled()\"\n [class.button--background]=\"background()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\">\n <!-- Icon -->\n <gld-icon\n [icon]=\"icon()\"\n [size]=\"iconSize()\"\n [space]=\"space()\"\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [disabled]=\"disabled()\" />\n</button>\n\n<!-- Only used by DropdownMenuComponent -->\n<ng-content select=\"[gldDropdownMenuTemplate]\" />\n", styles: [":host{display:inline-block;max-width:inherit}.button{--gld-color: inherit;--gld-background: transparent;--gld-background--hover: transparent;--gld-radius: var(--gld-radius--xxs);--gld-font-size: var(--gld-font-size--normal);outline:none;border:none;padding:var(--gld-spacing--xxxs);border-radius:var(--gld-radius);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size);font-weight:600;line-height:1.25;cursor:pointer;width:inherit;color:var(--gld-color);background:var(--gld-background);display:inline-flex;align-items:center;justify-content:center;gap:var(--gld-spacing--xxxs);-webkit-user-select:none;user-select:none;will-change:background,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover,.button:focus{background:var(--gld-background--hover)}.button:active{transform:scale(.98)}.button--pink{--gld-color: var(--gld-pink)}.button--pink.button--background{--gld-background: var(--gld-pink-transparent--010);--gld-background--hover: var(--gld-pink-transparent--020)}.button--purple{--gld-color: var(--gld-purple)}.button--purple.button--background{--gld-background: var(--gld-purple-transparent--010);--gld-background--hover: var(--gld-purple-transparent--020)}.button--mustard{--gld-color: var(--gld-mustard)}.button--mustard.button--background{--gld-background: var(--gld-mustard-transparent--010);--gld-background--hover: var(--gld-mustard-transparent--020)}.button--orange{--gld-color: var(--gld-orange)}.button--orange.button--background{--gld-background: var(--gld-orange-transparent--010);--gld-background--hover: var(--gld-orange-transparent--020)}.button--blue{--gld-color: var(--gld-blue)}.button--blue.button--background{--gld-background: var(--gld-blue-transparent--010);--gld-background--hover: var(--gld-blue-transparent--020)}.button--red{--gld-color: var(--gld-red)}.button--red.button--background{--gld-background: var(--gld-red-transparent--010);--gld-background--hover: var(--gld-red-transparent--020)}.button--green{--gld-color: var(--gld-green)}.button--green.button--background{--gld-background: var(--gld-green-transparent--010);--gld-background--hover: var(--gld-green-transparent--020)}.button--disabled{--gld-color: var(--gld-gray-transparent--060);pointer-events:none;cursor:not-allowed}.button--disabled.button--background{--gld-background: var(--gld-gray-transparent--020);--gld-background--hover: var(--gld-gray-transparent--020)}\n"], dependencies: [{ kind: "component", type: Icon, selector: "gld-icon", inputs: ["icon", "size", "space", "moveTopToBottom", "moveLeftToRight", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
320
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
321
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: IconButtonComponent, isStandalone: true, selector: "gld-icon-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, space: { classPropertyName: "space", publicName: "space", isSignal: true, isRequired: false, transformFunction: null }, moveTopToBottom: { classPropertyName: "moveTopToBottom", publicName: "moveTopToBottom", isSignal: true, isRequired: false, transformFunction: null }, moveLeftToRight: { classPropertyName: "moveLeftToRight", publicName: "moveLeftToRight", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n id=\"{{ id() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"button button--{{ color() }}\"\n [class.button--disabled]=\"disabled()\"\n [class.button--background]=\"background()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\">\n <!-- Icon -->\n <gld-icon\n [icon]=\"icon()\"\n [size]=\"iconSize()\"\n [space]=\"space()\"\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [disabled]=\"disabled()\" />\n</button>\n\n<!-- Only used by DropdownMenuComponent -->\n<ng-content select=\"[gldDropdownMenuTemplate]\" />\n", styles: [":host{display:inline-block;max-width:inherit}.button{--gld-color: inherit;--gld-background: transparent;--gld-background--hover: transparent;--gld-radius: var(--gld-radius--xxs);--gld-font-size: var(--gld-font-size--normal);outline:none;border:none;padding:var(--gld-spacing--xxxs);border-radius:var(--gld-radius);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size);font-weight:600;line-height:1.25;cursor:pointer;width:inherit;color:var(--gld-color);background:var(--gld-background);display:inline-flex;align-items:center;justify-content:center;gap:var(--gld-spacing--xxxs);-webkit-user-select:none;user-select:none;will-change:background,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover,.button:focus{background:var(--gld-background--hover)}.button:active{transform:scale(.98)}.button--pink{--gld-color: var(--gld-pink)}.button--pink.button--background{--gld-background: var(--gld-pink-transparent--010);--gld-background--hover: var(--gld-pink-transparent--020)}.button--purple{--gld-color: var(--gld-purple)}.button--purple.button--background{--gld-background: var(--gld-purple-transparent--010);--gld-background--hover: var(--gld-purple-transparent--020)}.button--mustard{--gld-color: var(--gld-mustard)}.button--mustard.button--background{--gld-background: var(--gld-mustard-transparent--010);--gld-background--hover: var(--gld-mustard-transparent--020)}.button--orange{--gld-color: var(--gld-orange)}.button--orange.button--background{--gld-background: var(--gld-orange-transparent--010);--gld-background--hover: var(--gld-orange-transparent--020)}.button--blue{--gld-color: var(--gld-blue)}.button--blue.button--background{--gld-background: var(--gld-blue-transparent--010);--gld-background--hover: var(--gld-blue-transparent--020)}.button--red{--gld-color: var(--gld-red)}.button--red.button--background{--gld-background: var(--gld-red-transparent--010);--gld-background--hover: var(--gld-red-transparent--020)}.button--green{--gld-color: var(--gld-green)}.button--green.button--background{--gld-background: var(--gld-green-transparent--010);--gld-background--hover: var(--gld-green-transparent--020)}.button--disabled{--gld-color: var(--gld-gray-transparent--060);pointer-events:none;cursor:not-allowed}.button--disabled.button--background{--gld-background: var(--gld-gray-transparent--020);--gld-background--hover: var(--gld-gray-transparent--020)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gld-icon", inputs: ["icon", "size", "space", "moveTopToBottom", "moveLeftToRight", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
342
322
  }
343
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IconButton, decorators: [{
323
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IconButtonComponent, decorators: [{
344
324
  type: Component,
345
- args: [{ selector: 'gld-icon-button', imports: [Icon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n id=\"{{ id() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"button button--{{ color() }}\"\n [class.button--disabled]=\"disabled()\"\n [class.button--background]=\"background()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\">\n <!-- Icon -->\n <gld-icon\n [icon]=\"icon()\"\n [size]=\"iconSize()\"\n [space]=\"space()\"\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [disabled]=\"disabled()\" />\n</button>\n\n<!-- Only used by DropdownMenuComponent -->\n<ng-content select=\"[gldDropdownMenuTemplate]\" />\n", styles: [":host{display:inline-block;max-width:inherit}.button{--gld-color: inherit;--gld-background: transparent;--gld-background--hover: transparent;--gld-radius: var(--gld-radius--xxs);--gld-font-size: var(--gld-font-size--normal);outline:none;border:none;padding:var(--gld-spacing--xxxs);border-radius:var(--gld-radius);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size);font-weight:600;line-height:1.25;cursor:pointer;width:inherit;color:var(--gld-color);background:var(--gld-background);display:inline-flex;align-items:center;justify-content:center;gap:var(--gld-spacing--xxxs);-webkit-user-select:none;user-select:none;will-change:background,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover,.button:focus{background:var(--gld-background--hover)}.button:active{transform:scale(.98)}.button--pink{--gld-color: var(--gld-pink)}.button--pink.button--background{--gld-background: var(--gld-pink-transparent--010);--gld-background--hover: var(--gld-pink-transparent--020)}.button--purple{--gld-color: var(--gld-purple)}.button--purple.button--background{--gld-background: var(--gld-purple-transparent--010);--gld-background--hover: var(--gld-purple-transparent--020)}.button--mustard{--gld-color: var(--gld-mustard)}.button--mustard.button--background{--gld-background: var(--gld-mustard-transparent--010);--gld-background--hover: var(--gld-mustard-transparent--020)}.button--orange{--gld-color: var(--gld-orange)}.button--orange.button--background{--gld-background: var(--gld-orange-transparent--010);--gld-background--hover: var(--gld-orange-transparent--020)}.button--blue{--gld-color: var(--gld-blue)}.button--blue.button--background{--gld-background: var(--gld-blue-transparent--010);--gld-background--hover: var(--gld-blue-transparent--020)}.button--red{--gld-color: var(--gld-red)}.button--red.button--background{--gld-background: var(--gld-red-transparent--010);--gld-background--hover: var(--gld-red-transparent--020)}.button--green{--gld-color: var(--gld-green)}.button--green.button--background{--gld-background: var(--gld-green-transparent--010);--gld-background--hover: var(--gld-green-transparent--020)}.button--disabled{--gld-color: var(--gld-gray-transparent--060);pointer-events:none;cursor:not-allowed}.button--disabled.button--background{--gld-background: var(--gld-gray-transparent--020);--gld-background--hover: var(--gld-gray-transparent--020)}\n"] }]
325
+ args: [{ selector: 'gld-icon-button', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n id=\"{{ id() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"button button--{{ color() }}\"\n [class.button--disabled]=\"disabled()\"\n [class.button--background]=\"background()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\">\n <!-- Icon -->\n <gld-icon\n [icon]=\"icon()\"\n [size]=\"iconSize()\"\n [space]=\"space()\"\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [disabled]=\"disabled()\" />\n</button>\n\n<!-- Only used by DropdownMenuComponent -->\n<ng-content select=\"[gldDropdownMenuTemplate]\" />\n", styles: [":host{display:inline-block;max-width:inherit}.button{--gld-color: inherit;--gld-background: transparent;--gld-background--hover: transparent;--gld-radius: var(--gld-radius--xxs);--gld-font-size: var(--gld-font-size--normal);outline:none;border:none;padding:var(--gld-spacing--xxxs);border-radius:var(--gld-radius);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size);font-weight:600;line-height:1.25;cursor:pointer;width:inherit;color:var(--gld-color);background:var(--gld-background);display:inline-flex;align-items:center;justify-content:center;gap:var(--gld-spacing--xxxs);-webkit-user-select:none;user-select:none;will-change:background,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover,.button:focus{background:var(--gld-background--hover)}.button:active{transform:scale(.98)}.button--pink{--gld-color: var(--gld-pink)}.button--pink.button--background{--gld-background: var(--gld-pink-transparent--010);--gld-background--hover: var(--gld-pink-transparent--020)}.button--purple{--gld-color: var(--gld-purple)}.button--purple.button--background{--gld-background: var(--gld-purple-transparent--010);--gld-background--hover: var(--gld-purple-transparent--020)}.button--mustard{--gld-color: var(--gld-mustard)}.button--mustard.button--background{--gld-background: var(--gld-mustard-transparent--010);--gld-background--hover: var(--gld-mustard-transparent--020)}.button--orange{--gld-color: var(--gld-orange)}.button--orange.button--background{--gld-background: var(--gld-orange-transparent--010);--gld-background--hover: var(--gld-orange-transparent--020)}.button--blue{--gld-color: var(--gld-blue)}.button--blue.button--background{--gld-background: var(--gld-blue-transparent--010);--gld-background--hover: var(--gld-blue-transparent--020)}.button--red{--gld-color: var(--gld-red)}.button--red.button--background{--gld-background: var(--gld-red-transparent--010);--gld-background--hover: var(--gld-red-transparent--020)}.button--green{--gld-color: var(--gld-green)}.button--green.button--background{--gld-background: var(--gld-green-transparent--010);--gld-background--hover: var(--gld-green-transparent--020)}.button--disabled{--gld-color: var(--gld-gray-transparent--060);pointer-events:none;cursor:not-allowed}.button--disabled.button--background{--gld-background: var(--gld-gray-transparent--020);--gld-background--hover: var(--gld-gray-transparent--020)}\n"] }]
346
326
  }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], space: [{ type: i0.Input, args: [{ isSignal: true, alias: "space", required: false }] }], moveTopToBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveTopToBottom", required: false }] }], moveLeftToRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveLeftToRight", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
347
327
 
348
328
  // Angular Imports
349
- const components$6 = [Button, IconButton];
329
+ const components$6 = [ButtonComponent, IconButtonComponent];
350
330
  const directives = [DropdownMenuTemplate];
351
- class DropdownMenu {
331
+ class DropdownMenuComponent {
352
332
  constructor() {
353
- this.DropdownType = DropdownType;
333
+ this.DROPDOWN_TYPES = DROPDOWN_TYPES;
354
334
  this.id = input.required({ ...(ngDevMode ? { debugName: "id" } : {}), transform: (value) => `dropdown-id-${value.trim().split(' ').join('-')}` });
355
335
  this.name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}), transform: (value) => `dropdown-name-${value.trim().split(' ').join('-')}` });
356
336
  this.type = input.required(...(ngDevMode ? [{ debugName: "type" }] : []));
357
- this.color = input(ButtonColor.pink, ...(ngDevMode ? [{ debugName: "color" }] : []));
358
- this.size = input(ButtonSize.normal, ...(ngDevMode ? [{ debugName: "size" }] : []));
337
+ this.color = input(BUTTON_COLORS.pink, ...(ngDevMode ? [{ debugName: "color" }] : []));
338
+ this.size = input(BUTTON_SIZES.normal, ...(ngDevMode ? [{ debugName: "size" }] : []));
359
339
  this.icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : []));
360
- this.iconSize = input(...(ngDevMode ? [undefined, { debugName: "iconSize" }] : []));
340
+ this.iconSize = input(ICONS_SIZES.normal, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
361
341
  this.moveTopToBottom = input(0, { ...(ngDevMode ? { debugName: "moveTopToBottom" } : {}), transform: numberAttribute });
362
342
  this.moveLeftToRight = input(0, { ...(ngDevMode ? { debugName: "moveLeftToRight" } : {}), transform: numberAttribute });
363
343
  this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
364
344
  this.full = input(false, { ...(ngDevMode ? { debugName: "full" } : {}), transform: booleanAttribute });
365
- this.direction = input(DropdownDirection.right, ...(ngDevMode ? [{ debugName: "direction" }] : []));
345
+ this.direction = input(DROPDOWN_DIRECTIONS.right, ...(ngDevMode ? [{ debugName: "direction" }] : []));
366
346
  this.background = input(false, { ...(ngDevMode ? { debugName: "background" } : {}), transform: booleanAttribute });
367
347
  this.selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : {}), transform: booleanAttribute });
368
348
  this.initialValue = input(null, ...(ngDevMode ? [{ debugName: "initialValue" }] : []));
369
349
  this.changeValue = output();
370
350
  this.changeFocus = output();
371
- this.dropdownButtonChildren = contentChildren(DropdownButton, ...(ngDevMode ? [{ debugName: "dropdownButtonChildren" }] : []));
351
+ this.dropdownButtonChildren = contentChildren(DropdownButtonComponent, ...(ngDevMode ? [{ debugName: "dropdownButtonChildren" }] : []));
372
352
  effect(() => {
373
353
  const initialValue = this.initialValue();
374
354
  if (initialValue)
@@ -392,25 +372,24 @@ class DropdownMenu {
392
372
  updateErrorInChildren(error) {
393
373
  this.dropdownButtonChildren().map((dropdownButton) => dropdownButton.error.set(error));
394
374
  }
395
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DropdownMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
396
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: DropdownMenu, isStandalone: true, selector: "gld-dropdown-menu", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", 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 }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeValue: "changeValue", changeFocus: "changeFocus" }, queries: [{ propertyName: "dropdownButtonChildren", predicate: DropdownButton, isSignal: true }], ngImport: i0, template: "<!-- Button -->\n@if (type() === DropdownType.button) {\n <gld-button\n #buttonChild\n [id]=\"id()\"\n [name]=\"name()\"\n [color]=\"color()\"\n [size]=\"size()\"\n [icon]=\"icon()\"\n [iconSize]=\"iconSize()\"\n [disabled]=\"disabled()\"\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [full]=\"full()\">\n <ng-content />\n\n <ng-container gldDropdownMenuTemplate [ngTemplateOutlet]=\"dropdownMenu\" />\n </gld-button>\n} @else {\n <!-- Icon Button -->\n @let innerIcon = icon();\n @if (innerIcon) {\n <gld-icon-button\n #buttonChild\n [id]=\"id()\"\n [name]=\"name()\"\n [color]=\"color()\"\n [icon]=\"innerIcon\"\n [iconSize]=\"iconSize() ?? size()\"\n [disabled]=\"disabled()\"\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [background]=\"background()\">\n <ng-container gldDropdownMenuTemplate [ngTemplateOutlet]=\"dropdownMenu\" />\n </gld-icon-button>\n }\n}\n\n<ng-template #dropdownMenu>\n <!-- Menu -->\n <section\n class=\"dropdown-menu dropdown-menu--{{ type() }} dropdown-menu--{{ size() }}\n dropdown-menu--direction-{{ direction() }}\">\n <ng-content select=\"gld-dropdown-button\">no buttons</ng-content>\n </section>\n</ng-template>\n", styles: [":host{max-width:inherit}.dropdown-menu{--gld-background: light-dark(var(--gld-whitelight), var(--gld-darkblue));--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-radius: var(--gld-radius--xxs);--gld-dropdown-min-width: 100px;--gld-dropdown-bottom-position: 0;padding:var(--gld-spacing--xxxs);border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-radius);background:var(--gld-background);display:none;position:absolute;scale:0;z-index:1;min-width:var(--gld-dropdown-min-width);max-width:inherit}.dropdown-menu--direction-right{left:0;transform-origin:top left;transform:translateY(var(--gld-dropdown-bottom-position))}.dropdown-menu--direction-left{transform-origin:top right;transform:translate(-100%,var(--gld-dropdown-bottom-position))}.dropdown-menu--tiny{--gld-dropdown-bottom-position: 26px}.dropdown-menu--small{--gld-dropdown-bottom-position: 34px}.dropdown-menu--normal{--gld-dropdown-bottom-position: 39px}.dropdown-menu--normal.dropdown-menu--iconButton{--gld-dropdown-bottom-position: 42px}.dropdown-menu--medium{--gld-dropdown-bottom-position: 47px}.dropdown-menu--medium.dropdown-menu--iconButton{--gld-dropdown-bottom-position: 50px}.dropdown-menu--large{--gld-dropdown-bottom-position: 52px}.dropdown-menu--large.dropdown-menu--iconButton{--gld-dropdown-bottom-position: 58px}gld-button:focus-within .dropdown-menu,gld-icon-button:focus-within .dropdown-menu{display:initial;scale:1;z-index:1}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Button, selector: "gld-button", inputs: ["id", "name", "color", "size", "icon", "iconSize", "moveTopToBottom", "moveLeftToRight", "disabled", "full"], outputs: ["clicked"] }, { kind: "component", type: IconButton, selector: "gld-icon-button", inputs: ["icon", "id", "name", "iconSize", "space", "moveTopToBottom", "moveLeftToRight", "background", "disabled", "color"], outputs: ["clicked"] }, { kind: "directive", type: DropdownMenuTemplate, selector: "[gldDropdownMenuTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
375
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
376
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: DropdownMenuComponent, isStandalone: true, selector: "gld-dropdown-menu", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", 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 }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeValue: "changeValue", changeFocus: "changeFocus" }, queries: [{ propertyName: "dropdownButtonChildren", predicate: DropdownButtonComponent, isSignal: true }], ngImport: i0, template: "<!-- Button -->\n@if (type() === DROPDOWN_TYPES.button) {\n <gld-button\n #buttonChild\n [id]=\"id()\"\n [name]=\"name()\"\n [color]=\"color()\"\n [size]=\"size()\"\n [icon]=\"icon()\"\n [iconSize]=\"iconSize()\"\n [disabled]=\"disabled()\"\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [full]=\"full()\">\n <ng-content />\n\n <ng-container gldDropdownMenuTemplate [ngTemplateOutlet]=\"dropdownMenu\" />\n </gld-button>\n} @else {\n <!-- Icon Button -->\n @let innerIcon = icon();\n @if (innerIcon) {\n <gld-icon-button\n #buttonChild\n [id]=\"id()\"\n [name]=\"name()\"\n [color]=\"color()\"\n [icon]=\"innerIcon\"\n [iconSize]=\"iconSize() ?? size()\"\n [disabled]=\"disabled()\"\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [background]=\"background()\">\n <ng-container gldDropdownMenuTemplate [ngTemplateOutlet]=\"dropdownMenu\" />\n </gld-icon-button>\n }\n}\n\n<ng-template #dropdownMenu>\n <!-- Menu -->\n <section\n class=\"dropdown-menu dropdown-menu--{{ type() }} dropdown-menu--{{ size() }}\n dropdown-menu--direction-{{ direction() }}\">\n <ng-content select=\"gld-dropdown-button\">no buttons</ng-content>\n </section>\n</ng-template>\n", styles: [":host{max-width:inherit}.dropdown-menu{--gld-background: light-dark(var(--gld-whitelight), var(--gld-darkblue));--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-radius: var(--gld-radius--xxs);--gld-dropdown-min-width: 100px;--gld-dropdown-bottom-position: 0;padding:var(--gld-spacing--xxxs);border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-radius);background:var(--gld-background);display:none;position:absolute;scale:0;z-index:1;min-width:var(--gld-dropdown-min-width);max-width:inherit}.dropdown-menu--direction-right{left:0;transform-origin:top left;transform:translateY(var(--gld-dropdown-bottom-position))}.dropdown-menu--direction-left{transform-origin:top right;transform:translate(-100%,var(--gld-dropdown-bottom-position))}.dropdown-menu--tiny{--gld-dropdown-bottom-position: 26px}.dropdown-menu--small{--gld-dropdown-bottom-position: 34px}.dropdown-menu--normal{--gld-dropdown-bottom-position: 39px}.dropdown-menu--normal.dropdown-menu--iconButton{--gld-dropdown-bottom-position: 42px}.dropdown-menu--medium{--gld-dropdown-bottom-position: 47px}.dropdown-menu--medium.dropdown-menu--iconButton{--gld-dropdown-bottom-position: 50px}.dropdown-menu--large{--gld-dropdown-bottom-position: 52px}.dropdown-menu--large.dropdown-menu--iconButton{--gld-dropdown-bottom-position: 58px}gld-button:focus-within .dropdown-menu,gld-icon-button:focus-within .dropdown-menu{display:initial;scale:1;z-index:1}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "gld-button", inputs: ["id", "name", "color", "size", "icon", "iconSize", "moveTopToBottom", "moveLeftToRight", "disabled", "full"], outputs: ["clicked"] }, { kind: "component", type: IconButtonComponent, selector: "gld-icon-button", inputs: ["icon", "id", "name", "iconSize", "space", "moveTopToBottom", "moveLeftToRight", "background", "disabled", "color"], outputs: ["clicked"] }, { kind: "directive", type: DropdownMenuTemplate, selector: "[gldDropdownMenuTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
397
377
  }
398
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DropdownMenu, decorators: [{
378
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DropdownMenuComponent, decorators: [{
399
379
  type: Component,
400
- args: [{ selector: 'gld-dropdown-menu', imports: [NgTemplateOutlet, ...components$6, directives], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Button -->\n@if (type() === DropdownType.button) {\n <gld-button\n #buttonChild\n [id]=\"id()\"\n [name]=\"name()\"\n [color]=\"color()\"\n [size]=\"size()\"\n [icon]=\"icon()\"\n [iconSize]=\"iconSize()\"\n [disabled]=\"disabled()\"\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [full]=\"full()\">\n <ng-content />\n\n <ng-container gldDropdownMenuTemplate [ngTemplateOutlet]=\"dropdownMenu\" />\n </gld-button>\n} @else {\n <!-- Icon Button -->\n @let innerIcon = icon();\n @if (innerIcon) {\n <gld-icon-button\n #buttonChild\n [id]=\"id()\"\n [name]=\"name()\"\n [color]=\"color()\"\n [icon]=\"innerIcon\"\n [iconSize]=\"iconSize() ?? size()\"\n [disabled]=\"disabled()\"\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [background]=\"background()\">\n <ng-container gldDropdownMenuTemplate [ngTemplateOutlet]=\"dropdownMenu\" />\n </gld-icon-button>\n }\n}\n\n<ng-template #dropdownMenu>\n <!-- Menu -->\n <section\n class=\"dropdown-menu dropdown-menu--{{ type() }} dropdown-menu--{{ size() }}\n dropdown-menu--direction-{{ direction() }}\">\n <ng-content select=\"gld-dropdown-button\">no buttons</ng-content>\n </section>\n</ng-template>\n", styles: [":host{max-width:inherit}.dropdown-menu{--gld-background: light-dark(var(--gld-whitelight), var(--gld-darkblue));--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-radius: var(--gld-radius--xxs);--gld-dropdown-min-width: 100px;--gld-dropdown-bottom-position: 0;padding:var(--gld-spacing--xxxs);border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-radius);background:var(--gld-background);display:none;position:absolute;scale:0;z-index:1;min-width:var(--gld-dropdown-min-width);max-width:inherit}.dropdown-menu--direction-right{left:0;transform-origin:top left;transform:translateY(var(--gld-dropdown-bottom-position))}.dropdown-menu--direction-left{transform-origin:top right;transform:translate(-100%,var(--gld-dropdown-bottom-position))}.dropdown-menu--tiny{--gld-dropdown-bottom-position: 26px}.dropdown-menu--small{--gld-dropdown-bottom-position: 34px}.dropdown-menu--normal{--gld-dropdown-bottom-position: 39px}.dropdown-menu--normal.dropdown-menu--iconButton{--gld-dropdown-bottom-position: 42px}.dropdown-menu--medium{--gld-dropdown-bottom-position: 47px}.dropdown-menu--medium.dropdown-menu--iconButton{--gld-dropdown-bottom-position: 50px}.dropdown-menu--large{--gld-dropdown-bottom-position: 52px}.dropdown-menu--large.dropdown-menu--iconButton{--gld-dropdown-bottom-position: 58px}gld-button:focus-within .dropdown-menu,gld-icon-button:focus-within .dropdown-menu{display:initial;scale:1;z-index:1}\n"] }]
401
- }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], moveTopToBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveTopToBottom", required: false }] }], moveLeftToRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveLeftToRight", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], full: [{ type: i0.Input, args: [{ isSignal: true, alias: "full", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], initialValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValue", required: false }] }], changeValue: [{ type: i0.Output, args: ["changeValue"] }], changeFocus: [{ type: i0.Output, args: ["changeFocus"] }], dropdownButtonChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DropdownButton), { isSignal: true }] }] } });
380
+ args: [{ selector: 'gld-dropdown-menu', imports: [NgTemplateOutlet, ...components$6, directives], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Button -->\n@if (type() === DROPDOWN_TYPES.button) {\n <gld-button\n #buttonChild\n [id]=\"id()\"\n [name]=\"name()\"\n [color]=\"color()\"\n [size]=\"size()\"\n [icon]=\"icon()\"\n [iconSize]=\"iconSize()\"\n [disabled]=\"disabled()\"\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [full]=\"full()\">\n <ng-content />\n\n <ng-container gldDropdownMenuTemplate [ngTemplateOutlet]=\"dropdownMenu\" />\n </gld-button>\n} @else {\n <!-- Icon Button -->\n @let innerIcon = icon();\n @if (innerIcon) {\n <gld-icon-button\n #buttonChild\n [id]=\"id()\"\n [name]=\"name()\"\n [color]=\"color()\"\n [icon]=\"innerIcon\"\n [iconSize]=\"iconSize() ?? size()\"\n [disabled]=\"disabled()\"\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [background]=\"background()\">\n <ng-container gldDropdownMenuTemplate [ngTemplateOutlet]=\"dropdownMenu\" />\n </gld-icon-button>\n }\n}\n\n<ng-template #dropdownMenu>\n <!-- Menu -->\n <section\n class=\"dropdown-menu dropdown-menu--{{ type() }} dropdown-menu--{{ size() }}\n dropdown-menu--direction-{{ direction() }}\">\n <ng-content select=\"gld-dropdown-button\">no buttons</ng-content>\n </section>\n</ng-template>\n", styles: [":host{max-width:inherit}.dropdown-menu{--gld-background: light-dark(var(--gld-whitelight), var(--gld-darkblue));--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-radius: var(--gld-radius--xxs);--gld-dropdown-min-width: 100px;--gld-dropdown-bottom-position: 0;padding:var(--gld-spacing--xxxs);border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-radius);background:var(--gld-background);display:none;position:absolute;scale:0;z-index:1;min-width:var(--gld-dropdown-min-width);max-width:inherit}.dropdown-menu--direction-right{left:0;transform-origin:top left;transform:translateY(var(--gld-dropdown-bottom-position))}.dropdown-menu--direction-left{transform-origin:top right;transform:translate(-100%,var(--gld-dropdown-bottom-position))}.dropdown-menu--tiny{--gld-dropdown-bottom-position: 26px}.dropdown-menu--small{--gld-dropdown-bottom-position: 34px}.dropdown-menu--normal{--gld-dropdown-bottom-position: 39px}.dropdown-menu--normal.dropdown-menu--iconButton{--gld-dropdown-bottom-position: 42px}.dropdown-menu--medium{--gld-dropdown-bottom-position: 47px}.dropdown-menu--medium.dropdown-menu--iconButton{--gld-dropdown-bottom-position: 50px}.dropdown-menu--large{--gld-dropdown-bottom-position: 52px}.dropdown-menu--large.dropdown-menu--iconButton{--gld-dropdown-bottom-position: 58px}gld-button:focus-within .dropdown-menu,gld-icon-button:focus-within .dropdown-menu{display:initial;scale:1;z-index:1}\n"] }]
381
+ }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], moveTopToBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveTopToBottom", required: false }] }], moveLeftToRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveLeftToRight", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], full: [{ type: i0.Input, args: [{ isSignal: true, alias: "full", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], initialValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValue", required: false }] }], changeValue: [{ type: i0.Output, args: ["changeValue"] }], changeFocus: [{ type: i0.Output, args: ["changeFocus"] }], dropdownButtonChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DropdownButtonComponent), { isSignal: true }] }] } });
402
382
 
403
383
  // Angular Imports
404
- class Link {
384
+ class LinkComponent {
405
385
  constructor() {
406
- this.LinkType = LinkType;
407
386
  this.id = input.required({ ...(ngDevMode ? { debugName: "id" } : {}), transform: (value) => `input-id-${value.trim().split(' ').join('-')}` });
408
387
  this.name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}), transform: (value) => `input-name-${value.trim().split(' ').join('-')}` });
409
388
  this.redirect = input('', ...(ngDevMode ? [{ debugName: "redirect" }] : []));
410
389
  this.active = input(false, { ...(ngDevMode ? { debugName: "active" } : {}), transform: booleanAttribute });
411
390
  this.external = input(false, { ...(ngDevMode ? { debugName: "external" } : {}), transform: booleanAttribute });
412
- this.type = input(LinkType.default, ...(ngDevMode ? [{ debugName: "type" }] : []));
413
- this.align = input(LinkAlign.center, ...(ngDevMode ? [{ debugName: "align" }] : []));
391
+ this.type = input(LINK_TYPES.default, ...(ngDevMode ? [{ debugName: "type" }] : []));
392
+ this.align = input(LINK_ALIGNS.center, ...(ngDevMode ? [{ debugName: "align" }] : []));
414
393
  this.clicked = output();
415
394
  }
416
395
  emitClick() {
@@ -419,16 +398,16 @@ class Link {
419
398
  keyup() {
420
399
  this.emitClick();
421
400
  }
422
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Link, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
423
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: Link, isStandalone: true, selector: "gld-link", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, redirect: { classPropertyName: "redirect", publicName: "redirect", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, external: { classPropertyName: "external", publicName: "external", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "@if (external()) {\n <!-- It's external link -->\n <ng-container\n [ngTemplateOutlet]=\"buttonTemplate\"\n [ngTemplateOutletContext]=\"{ buttonType: 'anchor' }\" />\n} @else {\n <!-- It isn't external link -->\n <ng-container\n [ngTemplateOutlet]=\"buttonTemplate\"\n [ngTemplateOutletContext]=\"{ buttonType: 'button' }\" />\n}\n\n<!-- Button Template -->\n<ng-template #buttonTemplate let-buttonType=\"buttonType\">\n @switch (buttonType) {\n @case ('anchor') {\n <a\n id=\"{{ id() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"link link--{{ align() }}\"\n [class.link--active]=\"active()\"\n [href]=\"redirect()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\"\n target=\"_blank\">\n <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n </a>\n }\n @case ('button') {\n @if (redirect()) {\n <!-- It has path to redirect -->\n <button\n id=\"{{ id() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"link link--{{ align() }}\"\n [class.link--active]=\"active()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\"\n [routerLink]=\"redirect()\">\n <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n </button>\n } @else {\n <!-- It doesn't have path to redirect -->\n <button\n id=\"{{ id() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"link link--{{ align() }}\"\n [class.link--active]=\"active()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\">\n <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n </button>\n }\n }\n }\n</ng-template>\n\n<!-- Content Button Template -->\n<ng-template #contentButtonTemplate>\n <ng-content />\n</ng-template>\n", styles: [":host{position:relative;z-index:1}.link{--gld-color: var(--gld-foreground-color);position:relative;display:inline-flex;align-items:center;padding:0;font:600 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);color:var(--gld-color);background:none;border:none;cursor:pointer;text-decoration:underline;will-change:color;transition:color var(--gld-animation-time--150)}.link--active,.link:active,.link:hover{--gld-color: var(--gld-purple)}.link--left{text-align:left}.link--right{text-align:right}.link--center{text-align:center}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
401
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
402
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: LinkComponent, isStandalone: true, selector: "gld-link", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, redirect: { classPropertyName: "redirect", publicName: "redirect", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, external: { classPropertyName: "external", publicName: "external", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "@if (external()) {\n <!-- It's external link -->\n <ng-container\n [ngTemplateOutlet]=\"buttonTemplate\"\n [ngTemplateOutletContext]=\"{ buttonType: 'anchor' }\" />\n} @else {\n <!-- It isn't external link -->\n <ng-container\n [ngTemplateOutlet]=\"buttonTemplate\"\n [ngTemplateOutletContext]=\"{ buttonType: 'button' }\" />\n}\n\n<!-- Button Template -->\n<ng-template #buttonTemplate let-buttonType=\"buttonType\">\n @switch (buttonType) {\n @case ('anchor') {\n <a\n id=\"{{ id() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"link link--{{ align() }}\"\n [class.link--active]=\"active()\"\n [href]=\"redirect()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\"\n rel=\"noopener noreferrer\"\n target=\"_blank\">\n <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n </a>\n }\n @case ('button') {\n @if (redirect()) {\n <!-- It has path to redirect -->\n <button\n id=\"{{ id() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"link link--{{ align() }}\"\n [class.link--active]=\"active()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\"\n [routerLink]=\"redirect()\">\n <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n </button>\n } @else {\n <!-- It doesn't have path to redirect -->\n <button\n id=\"{{ id() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"link link--{{ align() }}\"\n [class.link--active]=\"active()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\">\n <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n </button>\n }\n }\n }\n</ng-template>\n\n<!-- Content Button Template -->\n<ng-template #contentButtonTemplate>\n <ng-content />\n</ng-template>\n", styles: [":host{position:relative;z-index:1}.link{--gld-color: var(--gld-foreground-color);position:relative;display:inline-flex;align-items:center;padding:0;font:600 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);color:var(--gld-color);background:none;border:none;cursor:pointer;text-decoration:underline;will-change:color;transition:color var(--gld-animation-time--150)}.link--active,.link:active,.link:hover{--gld-color: var(--gld-purple)}.link--left{text-align:left}.link--right{text-align:right}.link--center{text-align:center}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
424
403
  }
425
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Link, decorators: [{
404
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LinkComponent, decorators: [{
426
405
  type: Component,
427
- args: [{ selector: 'gld-link', imports: [NgTemplateOutlet, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (external()) {\n <!-- It's external link -->\n <ng-container\n [ngTemplateOutlet]=\"buttonTemplate\"\n [ngTemplateOutletContext]=\"{ buttonType: 'anchor' }\" />\n} @else {\n <!-- It isn't external link -->\n <ng-container\n [ngTemplateOutlet]=\"buttonTemplate\"\n [ngTemplateOutletContext]=\"{ buttonType: 'button' }\" />\n}\n\n<!-- Button Template -->\n<ng-template #buttonTemplate let-buttonType=\"buttonType\">\n @switch (buttonType) {\n @case ('anchor') {\n <a\n id=\"{{ id() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"link link--{{ align() }}\"\n [class.link--active]=\"active()\"\n [href]=\"redirect()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\"\n target=\"_blank\">\n <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n </a>\n }\n @case ('button') {\n @if (redirect()) {\n <!-- It has path to redirect -->\n <button\n id=\"{{ id() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"link link--{{ align() }}\"\n [class.link--active]=\"active()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\"\n [routerLink]=\"redirect()\">\n <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n </button>\n } @else {\n <!-- It doesn't have path to redirect -->\n <button\n id=\"{{ id() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"link link--{{ align() }}\"\n [class.link--active]=\"active()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\">\n <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n </button>\n }\n }\n }\n</ng-template>\n\n<!-- Content Button Template -->\n<ng-template #contentButtonTemplate>\n <ng-content />\n</ng-template>\n", styles: [":host{position:relative;z-index:1}.link{--gld-color: var(--gld-foreground-color);position:relative;display:inline-flex;align-items:center;padding:0;font:600 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);color:var(--gld-color);background:none;border:none;cursor:pointer;text-decoration:underline;will-change:color;transition:color var(--gld-animation-time--150)}.link--active,.link:active,.link:hover{--gld-color: var(--gld-purple)}.link--left{text-align:left}.link--right{text-align:right}.link--center{text-align:center}\n"] }]
406
+ args: [{ selector: 'gld-link', imports: [NgTemplateOutlet, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (external()) {\n <!-- It's external link -->\n <ng-container\n [ngTemplateOutlet]=\"buttonTemplate\"\n [ngTemplateOutletContext]=\"{ buttonType: 'anchor' }\" />\n} @else {\n <!-- It isn't external link -->\n <ng-container\n [ngTemplateOutlet]=\"buttonTemplate\"\n [ngTemplateOutletContext]=\"{ buttonType: 'button' }\" />\n}\n\n<!-- Button Template -->\n<ng-template #buttonTemplate let-buttonType=\"buttonType\">\n @switch (buttonType) {\n @case ('anchor') {\n <a\n id=\"{{ id() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"link link--{{ align() }}\"\n [class.link--active]=\"active()\"\n [href]=\"redirect()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\"\n rel=\"noopener noreferrer\"\n target=\"_blank\">\n <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n </a>\n }\n @case ('button') {\n @if (redirect()) {\n <!-- It has path to redirect -->\n <button\n id=\"{{ id() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"link link--{{ align() }}\"\n [class.link--active]=\"active()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\"\n [routerLink]=\"redirect()\">\n <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n </button>\n } @else {\n <!-- It doesn't have path to redirect -->\n <button\n id=\"{{ id() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"link link--{{ align() }}\"\n [class.link--active]=\"active()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\">\n <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n </button>\n }\n }\n }\n</ng-template>\n\n<!-- Content Button Template -->\n<ng-template #contentButtonTemplate>\n <ng-content />\n</ng-template>\n", styles: [":host{position:relative;z-index:1}.link{--gld-color: var(--gld-foreground-color);position:relative;display:inline-flex;align-items:center;padding:0;font:600 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);color:var(--gld-color);background:none;border:none;cursor:pointer;text-decoration:underline;will-change:color;transition:color var(--gld-animation-time--150)}.link--active,.link:active,.link:hover{--gld-color: var(--gld-purple)}.link--left{text-align:left}.link--right{text-align:right}.link--center{text-align:center}\n"] }]
428
407
  }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], redirect: [{ type: i0.Input, args: [{ isSignal: true, alias: "redirect", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], external: [{ type: i0.Input, args: [{ isSignal: true, alias: "external", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
429
408
 
430
409
  // Angular Imports
431
- class ToggleButton {
410
+ class ToggleButtonComponent {
432
411
  constructor() {
433
412
  this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
434
413
  this.changeValue = output();
@@ -443,23 +422,23 @@ class ToggleButton {
443
422
  keyup(value) {
444
423
  this.select(value);
445
424
  }
446
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToggleButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
447
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: ToggleButton, isStandalone: true, selector: "gld-toggle-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { changeValue: "changeValue" }, ngImport: i0, template: "<button\n [tabindex]=\"disabled() ? '-1' : '0'\"\n class=\"button\"\n [class.button--selected]=\"selected()\"\n (keyup.enter)=\"keyup(value())\"\n (click)=\"select(value())\">\n <ng-content> empty button </ng-content>\n</button>\n", styles: [".button{--gld-background: transparent;--gld-background--hover: var(--gld-pink-transparent--010);--gld-color: var(--gld-foreground-color);--gld-color--selected: var(--gld-pink);--gld-color--hover: var(--gld-blue);--gld-radius: var(--gld-radius--xxxs);padding:var(--gld-spacing--xxxs);width:100%;height:100%;max-width:100%;background:var(--gld-background);color:var(--gld-color);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:var(--gld-line-height);-webkit-user-select:none;user-select:none;outline:none;border:none;border-radius:var(--gld-radius);cursor:pointer;will-change:background,transform,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover{--gld-color: var(--gld-color--hover)}.button:active{transform:scale(.95)}.button--selected{--gld-background: var(--gld-background--hover);--gld-color: var(--gld-color--selected)}.button--selected:hover{--gld-color: var(--gld-color--selected)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
425
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
426
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: ToggleButtonComponent, isStandalone: true, selector: "gld-toggle-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { changeValue: "changeValue" }, ngImport: i0, template: "<button\n [tabindex]=\"disabled() ? '-1' : '0'\"\n class=\"button\"\n [class.button--selected]=\"selected()\"\n (keyup.enter)=\"keyup(value())\"\n (click)=\"select(value())\">\n <ng-content> empty button </ng-content>\n</button>\n", styles: [".button{--gld-background: transparent;--gld-background--hover: var(--gld-pink-transparent--010);--gld-color: var(--gld-foreground-color);--gld-color--selected: var(--gld-pink);--gld-color--hover: var(--gld-blue);--gld-radius: var(--gld-radius--xxxs);padding:var(--gld-spacing--xxxs);width:100%;height:100%;max-width:100%;background:var(--gld-background);color:var(--gld-color);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:var(--gld-line-height);-webkit-user-select:none;user-select:none;outline:none;border:none;border-radius:var(--gld-radius);cursor:pointer;will-change:background,transform,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover{--gld-color: var(--gld-color--hover)}.button:active{transform:scale(.95)}.button--selected{--gld-background: var(--gld-background--hover);--gld-color: var(--gld-color--selected)}.button--selected:hover{--gld-color: var(--gld-color--selected)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
448
427
  }
449
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToggleButton, decorators: [{
428
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToggleButtonComponent, decorators: [{
450
429
  type: Component,
451
430
  args: [{ selector: 'gld-toggle-button', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n [tabindex]=\"disabled() ? '-1' : '0'\"\n class=\"button\"\n [class.button--selected]=\"selected()\"\n (keyup.enter)=\"keyup(value())\"\n (click)=\"select(value())\">\n <ng-content> empty button </ng-content>\n</button>\n", styles: [".button{--gld-background: transparent;--gld-background--hover: var(--gld-pink-transparent--010);--gld-color: var(--gld-foreground-color);--gld-color--selected: var(--gld-pink);--gld-color--hover: var(--gld-blue);--gld-radius: var(--gld-radius--xxxs);padding:var(--gld-spacing--xxxs);width:100%;height:100%;max-width:100%;background:var(--gld-background);color:var(--gld-color);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:var(--gld-line-height);-webkit-user-select:none;user-select:none;outline:none;border:none;border-radius:var(--gld-radius);cursor:pointer;will-change:background,transform,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover{--gld-color: var(--gld-color--hover)}.button:active{transform:scale(.95)}.button--selected{--gld-background: var(--gld-background--hover);--gld-color: var(--gld-color--selected)}.button--selected:hover{--gld-color: var(--gld-color--selected)}\n"] }]
452
431
  }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], changeValue: [{ type: i0.Output, args: ["changeValue"] }] } });
453
432
 
454
433
  // Angular Imports
455
- class ToggleGroup {
434
+ class ToggleGroupComponent {
456
435
  constructor() {
457
436
  this.id = input.required({ ...(ngDevMode ? { debugName: "id" } : {}), transform: (value) => `toggle-id-${value.trim().split(' ').join('-')}` });
458
437
  this.name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}), transform: (value) => `toggle-name-${value.trim().split(' ').join('-')}` });
459
438
  this.initialValue = input(null, ...(ngDevMode ? [{ debugName: "initialValue" }] : []));
460
439
  this.changeValue = output();
461
440
  this.changeFocus = output();
462
- this.toggleButtonChildren = contentChildren(ToggleButton, ...(ngDevMode ? [{ debugName: "toggleButtonChildren" }] : []));
441
+ this.toggleButtonChildren = contentChildren(ToggleButtonComponent, ...(ngDevMode ? [{ debugName: "toggleButtonChildren" }] : []));
463
442
  effect(() => {
464
443
  const initialValue = this.initialValue();
465
444
  if (initialValue)
@@ -482,19 +461,17 @@ class ToggleGroup {
482
461
  updateErrorInChildren(error) {
483
462
  this.toggleButtonChildren().map((toggleButton) => toggleButton.error.set(error));
484
463
  }
485
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToggleGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
486
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.0", type: ToggleGroup, isStandalone: true, selector: "gld-toggle-group", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeValue: "changeValue", changeFocus: "changeFocus" }, queries: [{ propertyName: "toggleButtonChildren", predicate: ToggleButton, isSignal: true }], ngImport: i0, template: "<section class=\"toggle\" id=\"{{ id() }}\" [attr.name]=\"name()\">\n <ng-content select=\"gld-toggle-button\" />\n</section>\n", styles: [":host{display:inline-block}.toggle{--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-radius: var(--gld-radius--xxs);padding:2px;border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-radius);display:flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
464
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToggleGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
465
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.0", type: ToggleGroupComponent, isStandalone: true, selector: "gld-toggle-group", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeValue: "changeValue", changeFocus: "changeFocus" }, queries: [{ propertyName: "toggleButtonChildren", predicate: ToggleButtonComponent, isSignal: true }], ngImport: i0, template: "<section class=\"toggle\" id=\"{{ id() }}\" [attr.name]=\"name()\">\n <ng-content select=\"gld-toggle-button\" />\n</section>\n", styles: [":host{display:inline-block}.toggle{--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-radius: var(--gld-radius--xxs);padding:2px;border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-radius);display:flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
487
466
  }
488
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToggleGroup, decorators: [{
467
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToggleGroupComponent, decorators: [{
489
468
  type: Component,
490
469
  args: [{ selector: 'gld-toggle-group', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"toggle\" id=\"{{ id() }}\" [attr.name]=\"name()\">\n <ng-content select=\"gld-toggle-button\" />\n</section>\n", styles: [":host{display:inline-block}.toggle{--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-radius: var(--gld-radius--xxs);padding:2px;border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-radius);display:flex}\n"] }]
491
- }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], initialValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValue", required: false }] }], changeValue: [{ type: i0.Output, args: ["changeValue"] }], changeFocus: [{ type: i0.Output, args: ["changeFocus"] }], toggleButtonChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ToggleButton), { isSignal: true }] }] } });
470
+ }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], initialValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValue", required: false }] }], changeValue: [{ type: i0.Output, args: ["changeValue"] }], changeFocus: [{ type: i0.Output, args: ["changeFocus"] }], toggleButtonChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ToggleButtonComponent), { isSignal: true }] }] } });
492
471
 
493
472
  function updateValueWithMask({ mask, value }) {
494
473
  if (!value)
495
474
  return value;
496
- if (!value.length)
497
- return value;
498
475
  let accumulate = 0;
499
476
  const maskApplied = [];
500
477
  value.split('').map((character, index) => {
@@ -517,31 +494,26 @@ const MIN_DAY = 1;
517
494
  const MAX_DAY = 31;
518
495
  function formatDateToISODate(options) {
519
496
  const { date } = options;
520
- const isValidDate = !Number.isNaN(new Date(date).getTime());
521
- // It isn't a valid date
522
- if (!isValidDate)
523
- return null;
524
497
  // If it's a numeric string (timestamp in seconds)
525
498
  if (typeof date === 'string' && /^\d+$/.test(date)) {
526
499
  // If it has 10 digits, it's a timestamp in seconds
527
500
  if (date.length === 10) {
528
501
  const ms = Number.parseInt(date, 10) * 1000;
529
502
  const _date = new Date(ms);
530
- if (!Number.isNaN(_date.getTime()))
531
- return _date.toISOString().split('T')[0];
532
- else
533
- return null;
503
+ return _date.toISOString().split('T')[0];
534
504
  }
535
505
  // If it has 13 digits, it's a timestamp in milliseconds
536
506
  if (date.length === 13 || date.length === 12) {
537
507
  const ms = Number.parseInt(date, 10);
538
508
  const _date = new Date(ms);
539
- if (!Number.isNaN(_date.getTime()))
540
- return _date.toISOString().split('T')[0];
541
- else
542
- return null;
509
+ return _date.toISOString().split('T')[0];
543
510
  }
511
+ return null;
544
512
  }
513
+ const isValidDate = !Number.isNaN(new Date(date).getTime());
514
+ // It isn't a valid date
515
+ if (!isValidDate)
516
+ return null;
545
517
  // If it's a Date or date string
546
518
  const _date = new Date(date);
547
519
  return _date.toISOString().split('T')[0];
@@ -576,10 +548,6 @@ function formatDDMMYYYYToISODate(options) {
576
548
  return null;
577
549
  // Create the date and subtract 1 so that JavaScript interprets the month correctly
578
550
  const _date = new Date(Date.UTC(year, month - 1, day));
579
- // It isn't a valid date
580
- const isValidDate = !Number.isNaN(_date.getTime());
581
- if (!isValidDate)
582
- return null;
583
551
  return formatDateToISODate({ date: _date });
584
552
  }
585
553
  function formatISODateToDDMMYYYY(options) {
@@ -805,7 +773,7 @@ function mustUnmatch({ controlName, mustUnmatchControlName, errorMessage, }) {
805
773
  }
806
774
 
807
775
  // Angular Imports
808
- class InputError {
776
+ class InputErrorComponent {
809
777
  constructor() {
810
778
  this.Boolean = Boolean;
811
779
  this.errors = input.required(...(ngDevMode ? [{ debugName: "errors" }] : []));
@@ -821,10 +789,10 @@ class InputError {
821
789
  #resolveFirstErrorKey(errors) {
822
790
  this.firstErrorKey.set(Object.keys(errors || {})[0] ?? null);
823
791
  }
824
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InputError, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
825
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: InputError, isStandalone: true, selector: "gld-input-error", inputs: { errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: true, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "content", predicate: InputErrorMessage, descendants: true, isSignal: true }], ngImport: i0, template: "<section class=\"error\" [class.error--with-border]=\"border()\">\n <span class=\"error__message\">\n @if (hasContent()) {\n <ng-content />\n } @else {\n <ng-container [ngTemplateOutlet]=\"errorsMessageDefault\" />\n }\n </span>\n</section>\n\n<ng-template #errorsMessageDefault>\n @switch (firstErrorKey()) {\n @case ('required') {\n This field is required!\n }\n @case ('email') {\n {{ this.errors()?.['email'] }}\n }\n @case ('maxlength') {\n This field must have a maximum of\n {{ this.errors()?.['maxlength'].requiredLength }}\n characters!\n }\n @case ('minlength') {\n This field must have a minimum of\n {{ this.errors()?.['minlength'].requiredLength }}\n characters!\n }\n @case ('isDate') {\n {{ this.errors()?.['isDate'] }}\n }\n @case ('minimumAge') {\n This field must meet the minimum age requirement of\n {{ this.errors()?.['minimumAge'].requiredAge }} years\n }\n @case ('isNaturalNumber') {\n {{ this.errors()?.['isNaturalNumber'] }}\n }\n @case ('mustMatch') {\n {{ this.errors()?.['mustMatch'] }}\n }\n @case ('mustUnmatch') {\n {{ this.errors()?.['mustUnmatch'] }}\n }\n @case ('isString') {\n {{ this.errors()?.['isString'] }}\n }\n @default {\n empty error message\n }\n }\n</ng-template>\n", styles: [".error{--gld-color: var(--gld-red);--gld-background: var(--gld-red-transparent--010);--gld-radius: var(--gld-radius--xxs);--gld-border-color: var(--gld-red);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)}.error__icon{display:flex;align-items:center}.error__message{font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--small);font-weight:400;line-height:1.25;text-transform:lowercase}.error__message:first-letter{text-transform:uppercase}.error--with-border{border-top:var(--gld-border-size) solid var(--gld-border-color)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
792
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InputErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
793
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: InputErrorComponent, isStandalone: true, selector: "gld-input-error", inputs: { errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: true, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "content", predicate: InputErrorMessage, descendants: true, isSignal: true }], ngImport: i0, template: "<section class=\"error\" [class.error--with-border]=\"border()\">\n <span class=\"error__message\">\n @if (hasContent()) {\n <ng-content />\n } @else {\n <ng-container [ngTemplateOutlet]=\"errorsMessageDefault\" />\n }\n </span>\n</section>\n\n<ng-template #errorsMessageDefault>\n @switch (firstErrorKey()) {\n @case ('required') {\n This field is required!\n }\n @case ('email') {\n {{ this.errors()?.['email'] }}\n }\n @case ('maxlength') {\n This field must have a maximum of\n {{ this.errors()?.['maxlength'].requiredLength }}\n characters!\n }\n @case ('minlength') {\n This field must have a minimum of\n {{ this.errors()?.['minlength'].requiredLength }}\n characters!\n }\n @case ('isDate') {\n {{ this.errors()?.['isDate'] }}\n }\n @case ('minimumAge') {\n This field must meet the minimum age requirement of\n {{ this.errors()?.['minimumAge'].requiredAge }} years\n }\n @case ('isNaturalNumber') {\n {{ this.errors()?.['isNaturalNumber'] }}\n }\n @case ('mustMatch') {\n {{ this.errors()?.['mustMatch'] }}\n }\n @case ('mustUnmatch') {\n {{ this.errors()?.['mustUnmatch'] }}\n }\n @case ('isString') {\n {{ this.errors()?.['isString'] }}\n }\n @default {\n empty error message\n }\n }\n</ng-template>\n", styles: [".error{--gld-color: var(--gld-red);--gld-background: var(--gld-red-transparent--010);--gld-radius: var(--gld-radius--xxs);--gld-border-color: var(--gld-red);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)}.error__icon{display:flex;align-items:center}.error__message{font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--small);font-weight:400;line-height:1.25;text-transform:lowercase}.error__message:first-letter{text-transform:uppercase}.error--with-border{border-top:var(--gld-border-size) solid var(--gld-border-color)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
826
794
  }
827
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InputError, decorators: [{
795
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InputErrorComponent, decorators: [{
828
796
  type: Component,
829
797
  args: [{ selector: 'gld-input-error', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"error\" [class.error--with-border]=\"border()\">\n <span class=\"error__message\">\n @if (hasContent()) {\n <ng-content />\n } @else {\n <ng-container [ngTemplateOutlet]=\"errorsMessageDefault\" />\n }\n </span>\n</section>\n\n<ng-template #errorsMessageDefault>\n @switch (firstErrorKey()) {\n @case ('required') {\n This field is required!\n }\n @case ('email') {\n {{ this.errors()?.['email'] }}\n }\n @case ('maxlength') {\n This field must have a maximum of\n {{ this.errors()?.['maxlength'].requiredLength }}\n characters!\n }\n @case ('minlength') {\n This field must have a minimum of\n {{ this.errors()?.['minlength'].requiredLength }}\n characters!\n }\n @case ('isDate') {\n {{ this.errors()?.['isDate'] }}\n }\n @case ('minimumAge') {\n This field must meet the minimum age requirement of\n {{ this.errors()?.['minimumAge'].requiredAge }} years\n }\n @case ('isNaturalNumber') {\n {{ this.errors()?.['isNaturalNumber'] }}\n }\n @case ('mustMatch') {\n {{ this.errors()?.['mustMatch'] }}\n }\n @case ('mustUnmatch') {\n {{ this.errors()?.['mustUnmatch'] }}\n }\n @case ('isString') {\n {{ this.errors()?.['isString'] }}\n }\n @default {\n empty error message\n }\n }\n</ng-template>\n", styles: [".error{--gld-color: var(--gld-red);--gld-background: var(--gld-red-transparent--010);--gld-radius: var(--gld-radius--xxs);--gld-border-color: var(--gld-red);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)}.error__icon{display:flex;align-items:center}.error__message{font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--small);font-weight:400;line-height:1.25;text-transform:lowercase}.error__message:first-letter{text-transform:uppercase}.error--with-border{border-top:var(--gld-border-size) solid var(--gld-border-color)}\n"] }]
830
798
  }], ctorParameters: () => [], propDecorators: { errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: true }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], content: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => InputErrorMessage), { ...{
@@ -832,8 +800,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
832
800
  }, isSignal: true }] }] } });
833
801
 
834
802
  // Angular Imports
835
- const components$5 = [InputError];
836
- class Input {
803
+ const components$5 = [InputErrorComponent];
804
+ class InputComponent {
837
805
  #destroyRef;
838
806
  #changeDetectorRef;
839
807
  constructor() {
@@ -854,6 +822,7 @@ class Input {
854
822
  string: false,
855
823
  maxLength: null,
856
824
  }, ...(ngDevMode ? [{ debugName: "hasValidators" }] : []));
825
+ // eslint-disable-next-line no-unused-vars
857
826
  this.onChange = (value) => { };
858
827
  this.onTouched = () => { };
859
828
  this.innerControl()
@@ -865,7 +834,7 @@ class Input {
865
834
  * This sanitizes the value input by keeping only numbers (0-9)
866
835
  *
867
836
  * @example
868
- * // Input: "12/34/abcd2023!@_"
837
+ * // InputComponent: "12/34/abcd2023!@_"
869
838
  * // Output: "12342023"
870
839
  */
871
840
  if (String(value) && this.hasValidators().naturalNumber) {
@@ -878,7 +847,7 @@ class Input {
878
847
  * Numbers, special characters, and symbols are removed.
879
848
  *
880
849
  * @example
881
- * // Input: "Juan123@García#456 Pérez$"
850
+ * // InputComponent: "Juan123@García#456 Pérez$"
882
851
  * // Output: "JuanGarcía Pérez"
883
852
  */
884
853
  if (String(value) && this.hasValidators().string) {
@@ -911,6 +880,7 @@ class Input {
911
880
  if (value !== this.innerControl().value)
912
881
  this.innerControl().setValue(value);
913
882
  }
883
+ // eslint-disable-next-line no-unused-vars
914
884
  registerOnChange(onChange) {
915
885
  // console.log('registerOnChange')
916
886
  this.onChange = onChange;
@@ -955,29 +925,29 @@ class Input {
955
925
  });
956
926
  // console.log('hasValidators', this.hasValidators())
957
927
  }
958
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Input, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
959
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: Input, isStandalone: true, selector: "gld-input", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
928
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
929
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: InputComponent, isStandalone: true, selector: "gld-input", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
960
930
  {
961
931
  provide: NG_VALUE_ACCESSOR,
962
- useExisting: forwardRef(() => Input),
932
+ useExisting: forwardRef(() => InputComponent),
963
933
  multi: true,
964
934
  },
965
- ], 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 <!-- Label -->\n @if (label()) {\n <label for=\"{{ id() }}\">\n <span>{{ label() }}</span>\n @if (hasValidators().required) {\n <span>*</span>\n }\n </label>\n }\n\n <!-- Input -->\n <input\n id=\"{{ id() }}\"\n name=\"{{ name() }}\"\n [tabindex]=\"disabled ? '-1' : '0'\"\n [type]=\"type()\"\n [placeholder]=\"placeholder()\"\n [formControl]=\"innerControl()\"\n [attr.maxlength]=\"hasValidators().maxLength\"\n (focus)=\"onFocus()\"\n (blur)=\"onTouched()\"\n (keyup.escape)=\"onBlur()\" />\n\n <!-- Suffix -->\n @if (suffix()) {\n <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\n }\n</section>\n<!-- Errors -->\n@if (errors) {\n <ng-content select=\"gld-input-error\">\n <gld-input-error [errors]=\"control().errors\" />\n </ng-content>\n} @else {\n <!-- Hint -->\n <ng-content select=\"gld-input-hint\" />\n}\n\n<!-- Suffix Template -->\n<ng-template #suffixTemplate>\n <span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\n <ng-content select=\"[inputSuffix]\" />\n </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", styles: [".input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-height: 40px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input input{width:100%;min-width:var(--gld-min-with);height:var(--gld-height);padding:var(--gld-spacing--xxs);padding-right:var(--gld-spacing--m);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input input:focus{--gld-border-color: var(--gld-blue)}.input input::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:0;display:inline-block;color:var(--gld-color);will-change:transform,color;transition:color var(--gld-animation-time) ease;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputError, selector: "gld-input-error", inputs: ["errors", "border"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
935
+ ], 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 <!-- Label -->\n @if (label()) {\n <label for=\"{{ id() }}\">\n <span>{{ label() }}</span>\n @if (hasValidators().required) {\n <span>*</span>\n }\n </label>\n }\n\n <!-- Input -->\n <input\n id=\"{{ id() }}\"\n name=\"{{ name() }}\"\n [tabindex]=\"disabled ? '-1' : '0'\"\n [type]=\"type()\"\n [placeholder]=\"placeholder()\"\n [formControl]=\"innerControl()\"\n [attr.maxlength]=\"hasValidators().maxLength\"\n (focus)=\"onFocus()\"\n (blur)=\"onTouched()\"\n (keyup.escape)=\"onBlur()\" />\n\n <!-- Suffix -->\n @if (suffix()) {\n <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\n }\n</section>\n<!-- Errors -->\n@if (errors) {\n <ng-content select=\"gld-input-error\">\n <gld-input-error [errors]=\"control().errors\" />\n </ng-content>\n} @else {\n <!-- Hint -->\n <ng-content select=\"gld-input-hint\" />\n}\n\n<!-- Suffix Template -->\n<ng-template #suffixTemplate>\n <span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\n <ng-content select=\"[inputSuffix]\" />\n </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", styles: [".input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-height: 40px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input input{width:100%;min-width:var(--gld-min-with);height:var(--gld-height);padding:var(--gld-spacing--xxs);padding-right:var(--gld-spacing--m);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input input:focus{--gld-border-color: var(--gld-blue)}.input input::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:0;display:inline-block;color:var(--gld-color);will-change:transform,color;transition:color var(--gld-animation-time) ease;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputErrorComponent, selector: "gld-input-error", inputs: ["errors", "border"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
966
936
  }
967
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Input, decorators: [{
937
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InputComponent, decorators: [{
968
938
  type: Component,
969
939
  args: [{ selector: 'gld-input', imports: [ReactiveFormsModule, NgTemplateOutlet, ...components$5], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
970
940
  {
971
941
  provide: NG_VALUE_ACCESSOR,
972
- useExisting: forwardRef(() => Input),
942
+ useExisting: forwardRef(() => InputComponent),
973
943
  multi: true,
974
944
  },
975
945
  ], 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 <!-- Label -->\n @if (label()) {\n <label for=\"{{ id() }}\">\n <span>{{ label() }}</span>\n @if (hasValidators().required) {\n <span>*</span>\n }\n </label>\n }\n\n <!-- Input -->\n <input\n id=\"{{ id() }}\"\n name=\"{{ name() }}\"\n [tabindex]=\"disabled ? '-1' : '0'\"\n [type]=\"type()\"\n [placeholder]=\"placeholder()\"\n [formControl]=\"innerControl()\"\n [attr.maxlength]=\"hasValidators().maxLength\"\n (focus)=\"onFocus()\"\n (blur)=\"onTouched()\"\n (keyup.escape)=\"onBlur()\" />\n\n <!-- Suffix -->\n @if (suffix()) {\n <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\n }\n</section>\n<!-- Errors -->\n@if (errors) {\n <ng-content select=\"gld-input-error\">\n <gld-input-error [errors]=\"control().errors\" />\n </ng-content>\n} @else {\n <!-- Hint -->\n <ng-content select=\"gld-input-hint\" />\n}\n\n<!-- Suffix Template -->\n<ng-template #suffixTemplate>\n <span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\n <ng-content select=\"[inputSuffix]\" />\n </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", styles: [".input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-height: 40px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input input{width:100%;min-width:var(--gld-min-with);height:var(--gld-height);padding:var(--gld-spacing--xxs);padding-right:var(--gld-spacing--m);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input input:focus{--gld-border-color: var(--gld-blue)}.input input::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:0;display:inline-block;color:var(--gld-color);will-change:transform,color;transition:color var(--gld-animation-time) ease;cursor:pointer}\n"] }]
976
946
  }], ctorParameters: () => [], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }] } });
977
947
 
978
948
  // Angular Imports
979
- const components$4 = [InputError];
980
- class InputDate {
949
+ const components$4 = [InputErrorComponent];
950
+ class InputDateComponent {
981
951
  #destroyRef;
982
952
  #changeDetectorRef;
983
953
  constructor() {
@@ -999,6 +969,7 @@ class InputDate {
999
969
  string: false,
1000
970
  maxLength: null,
1001
971
  }, ...(ngDevMode ? [{ debugName: "hasValidators" }] : []));
972
+ // eslint-disable-next-line no-unused-vars
1002
973
  this.onChange = (value) => { };
1003
974
  this.onTouched = () => { };
1004
975
  this.innerControl()
@@ -1010,7 +981,7 @@ class InputDate {
1010
981
  * which are typically used in date formats like MM/DD/YYYY or DD/MM/YYYY.
1011
982
  *
1012
983
  * @example
1013
- * // Input: "12/34/abcd2023!@_"
984
+ * // InputComponent: "12/34/abcd2023!@_"
1014
985
  * // Output: "12/34/2023"
1015
986
  */
1016
987
  const _value = String(value).replaceAll(/[^\d/]/g, '');
@@ -1041,6 +1012,7 @@ class InputDate {
1041
1012
  if (value !== this.innerControl().value)
1042
1013
  this.innerControl().setValue(String(value));
1043
1014
  }
1015
+ // eslint-disable-next-line no-unused-vars
1044
1016
  registerOnChange(onChange) {
1045
1017
  // console.log('registerOnChange')
1046
1018
  this.onChange = onChange;
@@ -1085,38 +1057,38 @@ class InputDate {
1085
1057
  });
1086
1058
  // console.log('hasValidators', this.hasValidators())
1087
1059
  }
1088
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InputDate, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1089
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: InputDate, isStandalone: true, selector: "gld-input-date", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
1060
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InputDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1061
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: InputDateComponent, isStandalone: true, selector: "gld-input-date", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
1090
1062
  {
1091
1063
  provide: NG_VALUE_ACCESSOR,
1092
- useExisting: forwardRef(() => InputDate),
1064
+ useExisting: forwardRef(() => InputDateComponent),
1093
1065
  multi: true,
1094
1066
  },
1095
- ], 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 <!-- Label -->\n @if (label()) {\n <label for=\"{{ id() }}\">\n <span>{{ label() }}</span>\n @if (hasValidators().required) {\n <span>*</span>\n }\n </label>\n }\n\n <!-- Input -->\n <input\n type=\"date\"\n id=\"{{ id() }}\"\n name=\"{{ name() }}\"\n [tabindex]=\"disabled ? '-1' : '0'\"\n [attr.min]=\"min()\"\n [attr.max]=\"max()\"\n [placeholder]=\"placeholder()\"\n [formControl]=\"innerControl()\"\n [attr.maxlength]=\"hasValidators().maxLength\"\n (focus)=\"onFocus()\"\n (blur)=\"onTouched()\"\n (keyup.escape)=\"onBlur()\" />\n\n <!-- Suffix -->\n @if (suffix()) {\n <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\n }\n</section>\n<!-- Errors -->\n@if (errors) {\n <ng-content select=\"gld-input-error\">\n <gld-input-error [errors]=\"control().errors\" />\n </ng-content>\n} @else {\n <!-- Hint -->\n <ng-content select=\"gld-input-hint\" />\n}\n\n<!-- Suffix Template -->\n<ng-template #suffixTemplate>\n <span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\n <ng-content select=\"[inputSuffix]\" />\n </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", styles: [".input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-height: 40px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input input{width:100%;min-width:var(--gld-min-with);height:var(--gld-height);padding:var(--gld-spacing--xxs);padding-right:var(--gld-spacing--m);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input input:focus{--gld-border-color: var(--gld-blue)}.input input::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:0;display:inline-block;color:var(--gld-color);will-change:transform,color;transition:color var(--gld-animation-time) ease;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputError, selector: "gld-input-error", inputs: ["errors", "border"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1067
+ ], 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 <!-- Label -->\n @if (label()) {\n <label for=\"{{ id() }}\">\n <span>{{ label() }}</span>\n @if (hasValidators().required) {\n <span>*</span>\n }\n </label>\n }\n\n <!-- Input -->\n <input\n type=\"date\"\n id=\"{{ id() }}\"\n name=\"{{ name() }}\"\n [tabindex]=\"disabled ? '-1' : '0'\"\n [attr.min]=\"min()\"\n [attr.max]=\"max()\"\n [placeholder]=\"placeholder()\"\n [formControl]=\"innerControl()\"\n [attr.maxlength]=\"hasValidators().maxLength\"\n (focus)=\"onFocus()\"\n (blur)=\"onTouched()\"\n (keyup.escape)=\"onBlur()\" />\n\n <!-- Suffix -->\n @if (suffix()) {\n <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\n }\n</section>\n<!-- Errors -->\n@if (errors) {\n <ng-content select=\"gld-input-error\">\n <gld-input-error [errors]=\"control().errors\" />\n </ng-content>\n} @else {\n <!-- Hint -->\n <ng-content select=\"gld-input-hint\" />\n}\n\n<!-- Suffix Template -->\n<ng-template #suffixTemplate>\n <span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\n <ng-content select=\"[inputSuffix]\" />\n </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", styles: [".input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-height: 40px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input input{width:100%;min-width:var(--gld-min-with);height:var(--gld-height);padding:var(--gld-spacing--xxs);padding-right:var(--gld-spacing--m);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input input:focus{--gld-border-color: var(--gld-blue)}.input input::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:0;display:inline-block;color:var(--gld-color);will-change:transform,color;transition:color var(--gld-animation-time) ease;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputErrorComponent, selector: "gld-input-error", inputs: ["errors", "border"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1096
1068
  }
1097
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InputDate, decorators: [{
1069
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InputDateComponent, decorators: [{
1098
1070
  type: Component,
1099
1071
  args: [{ selector: 'gld-input-date', imports: [ReactiveFormsModule, NgTemplateOutlet, ...components$4], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
1100
1072
  {
1101
1073
  provide: NG_VALUE_ACCESSOR,
1102
- useExisting: forwardRef(() => InputDate),
1074
+ useExisting: forwardRef(() => InputDateComponent),
1103
1075
  multi: true,
1104
1076
  },
1105
1077
  ], 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 <!-- Label -->\n @if (label()) {\n <label for=\"{{ id() }}\">\n <span>{{ label() }}</span>\n @if (hasValidators().required) {\n <span>*</span>\n }\n </label>\n }\n\n <!-- Input -->\n <input\n type=\"date\"\n id=\"{{ id() }}\"\n name=\"{{ name() }}\"\n [tabindex]=\"disabled ? '-1' : '0'\"\n [attr.min]=\"min()\"\n [attr.max]=\"max()\"\n [placeholder]=\"placeholder()\"\n [formControl]=\"innerControl()\"\n [attr.maxlength]=\"hasValidators().maxLength\"\n (focus)=\"onFocus()\"\n (blur)=\"onTouched()\"\n (keyup.escape)=\"onBlur()\" />\n\n <!-- Suffix -->\n @if (suffix()) {\n <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\n }\n</section>\n<!-- Errors -->\n@if (errors) {\n <ng-content select=\"gld-input-error\">\n <gld-input-error [errors]=\"control().errors\" />\n </ng-content>\n} @else {\n <!-- Hint -->\n <ng-content select=\"gld-input-hint\" />\n}\n\n<!-- Suffix Template -->\n<ng-template #suffixTemplate>\n <span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\n <ng-content select=\"[inputSuffix]\" />\n </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", styles: [".input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-height: 40px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input input{width:100%;min-width:var(--gld-min-with);height:var(--gld-height);padding:var(--gld-spacing--xxs);padding-right:var(--gld-spacing--m);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input input:focus{--gld-border-color: var(--gld-blue)}.input input::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:0;display:inline-block;color:var(--gld-color);will-change:transform,color;transition:color var(--gld-animation-time) ease;cursor:pointer}\n"] }]
1106
1078
  }], ctorParameters: () => [], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }] } });
1107
1079
 
1108
1080
  // Angular Imports
1109
- class InputHint {
1110
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InputHint, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1111
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: InputHint, isStandalone: true, selector: "gld-input-hint", ngImport: i0, template: "<section class=\"hint\">\n <span class=\"hint__message\">\n <ng-content>hint empty</ng-content>\n </span>\n</section>\n", styles: [".hint{--gld-color: var(--gld-foreground-color);--gld-background: var(--gld-gray-transparent--020);--gld-radius: var(--gld-radius--xxs);color:var(--gld-color);background:var(--gld-background);border-radius:0 0 var(--gld-radius) var(--gld-radius);padding:var(--gld-spacing--xxxs) var(--gld-spacing--xxs);display:flex;align-items:flex-start;gap:var(--gld-spacing--xxxs)}.hint__icon{display:flex;align-items:center}.hint__message{font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--small);font-weight:400;line-height:1.25;text-transform:lowercase}.hint__message:first-letter{text-transform:uppercase}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1081
+ class InputHintComponent {
1082
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InputHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1083
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: InputHintComponent, isStandalone: true, selector: "gld-input-hint", ngImport: i0, template: "<section class=\"hint\">\n <span class=\"hint__message\">\n <ng-content>hint empty</ng-content>\n </span>\n</section>\n", styles: [".hint{--gld-color: var(--gld-foreground-color);--gld-background: var(--gld-gray-transparent--020);--gld-radius: var(--gld-radius--xxs);color:var(--gld-color);background:var(--gld-background);border-radius:0 0 var(--gld-radius) var(--gld-radius);padding:var(--gld-spacing--xxxs) var(--gld-spacing--xxs);display:flex;align-items:flex-start;gap:var(--gld-spacing--xxxs)}.hint__icon{display:flex;align-items:center}.hint__message{font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--small);font-weight:400;line-height:1.25;text-transform:lowercase}.hint__message:first-letter{text-transform:uppercase}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1112
1084
  }
1113
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InputHint, decorators: [{
1085
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InputHintComponent, decorators: [{
1114
1086
  type: Component,
1115
1087
  args: [{ selector: 'gld-input-hint', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"hint\">\n <span class=\"hint__message\">\n <ng-content>hint empty</ng-content>\n </span>\n</section>\n", styles: [".hint{--gld-color: var(--gld-foreground-color);--gld-background: var(--gld-gray-transparent--020);--gld-radius: var(--gld-radius--xxs);color:var(--gld-color);background:var(--gld-background);border-radius:0 0 var(--gld-radius) var(--gld-radius);padding:var(--gld-spacing--xxxs) var(--gld-spacing--xxs);display:flex;align-items:flex-start;gap:var(--gld-spacing--xxxs)}.hint__icon{display:flex;align-items:center}.hint__message{font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--small);font-weight:400;line-height:1.25;text-transform:lowercase}.hint__message:first-letter{text-transform:uppercase}\n"] }]
1116
1088
  }] });
1117
1089
 
1118
1090
  // Angular Imports
1119
- class RadioButton {
1091
+ class RadioButtonComponent {
1120
1092
  constructor() {
1121
1093
  this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
1122
1094
  this.changeValue = output();
@@ -1138,17 +1110,17 @@ class RadioButton {
1138
1110
  onBlur() {
1139
1111
  this.changeFocus.emit(false);
1140
1112
  }
1141
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RadioButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1142
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: RadioButton, 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\n class=\"radio\"\n [tabindex]=\"disabled() ? '-1' : '0'\"\n [class.radio--selected]=\"selected()\"\n [class.radio--disabled]=\"disabled()\"\n [class.radio--error]=\"error()\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n (keyup.enter)=\"keyup(value())\"\n (keyup.escape)=\"onBlur()\"\n (click)=\"select(value())\">\n <span class=\"radio__icon\" [class.radio__icon--selected]=\"selected()\"></span>\n\n <span class=\"radio__label\">\n <ng-content>empty radio button</ng-content>\n </span>\n</button>\n", styles: [":host{display:inline-flex;color:inherit;width:inherit;height:inherit}.radio{--gld-height: 26px;--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-dot-color: var(--gld-blue);--gld-dot-color--outer: var(--gld-gray-transparent--060);--gld-dot-color--outer-hover: var(--gld-blue);--gld-dot-color--outer-selected: var(--gld-blue);--gld-dot-color--outer-error: var(--gld-red);display:inline-flex;justify-content:center;align-items:center;border:none;background:none;gap:var(--gld-spacing--xxs);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-color);height:var(--gld-height);padding:var(--gld-spacing--xxxs);cursor:pointer;-webkit-user-select:none;user-select:none}.radio:hover .radio__icon,.radio:focus .radio__icon{--gld-dot-color--outer: var(--gld-dot-color--outer-hover)}.radio:focus{outline:none}.radio__icon{--gld-size: 20px;width:var(--gld-size);height:var(--gld-size);border-radius:50%;border:var(--gld-border-size) solid var(--gld-dot-color--outer);position:relative;display:flex;justify-content:center;align-items:center}.radio__icon--selected:before{content:\"\";position:absolute;width:calc(var(--gld-size) / 2);height:calc(var(--gld-size) / 2);background:var(--gld-dot-color);border-radius:inherit}.radio__label:first-letter{text-transform:uppercase}.radio--selected{--gld-dot-color--outer: var(--gld-dot-color--outer-selected)}.radio--disabled{--gld-color: var(--gld-color--disabled);--gld-dot-color--outer: var(--gld-color--disabled);pointer-events:none}.radio--error .radio__icon{--gld-dot-color--outer: var(--gld-dot-color--outer-error)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1113
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1114
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", 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\n class=\"radio\"\n [tabindex]=\"disabled() ? '-1' : '0'\"\n [class.radio--selected]=\"selected()\"\n [class.radio--disabled]=\"disabled()\"\n [class.radio--error]=\"error()\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n (keyup.enter)=\"keyup(value())\"\n (keyup.escape)=\"onBlur()\"\n (click)=\"select(value())\">\n <span class=\"radio__icon\" [class.radio__icon--selected]=\"selected()\"></span>\n\n <span class=\"radio__label\">\n <ng-content>empty radio button</ng-content>\n </span>\n</button>\n", styles: [":host{display:inline-flex;color:inherit;width:inherit;height:inherit}.radio{--gld-height: 26px;--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-dot-color: var(--gld-blue);--gld-dot-color--outer: var(--gld-gray-transparent--060);--gld-dot-color--outer-hover: var(--gld-blue);--gld-dot-color--outer-selected: var(--gld-blue);--gld-dot-color--outer-error: var(--gld-red);display:inline-flex;justify-content:center;align-items:center;border:none;background:none;gap:var(--gld-spacing--xxs);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-color);height:var(--gld-height);padding:var(--gld-spacing--xxxs);cursor:pointer;-webkit-user-select:none;user-select:none}.radio:hover .radio__icon,.radio:focus .radio__icon{--gld-dot-color--outer: var(--gld-dot-color--outer-hover)}.radio:focus{outline:none}.radio__icon{--gld-size: 20px;width:var(--gld-size);height:var(--gld-size);border-radius:50%;border:var(--gld-border-size) solid var(--gld-dot-color--outer);position:relative;display:flex;justify-content:center;align-items:center}.radio__icon--selected:before{content:\"\";position:absolute;width:calc(var(--gld-size) / 2);height:calc(var(--gld-size) / 2);background:var(--gld-dot-color);border-radius:inherit}.radio__label:first-letter{text-transform:uppercase}.radio--selected{--gld-dot-color--outer: var(--gld-dot-color--outer-selected)}.radio--disabled{--gld-color: var(--gld-color--disabled);--gld-dot-color--outer: var(--gld-color--disabled);pointer-events:none}.radio--error .radio__icon{--gld-dot-color--outer: var(--gld-dot-color--outer-error)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1143
1115
  }
1144
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RadioButton, decorators: [{
1116
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RadioButtonComponent, decorators: [{
1145
1117
  type: Component,
1146
1118
  args: [{ selector: 'gld-radio-button', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n class=\"radio\"\n [tabindex]=\"disabled() ? '-1' : '0'\"\n [class.radio--selected]=\"selected()\"\n [class.radio--disabled]=\"disabled()\"\n [class.radio--error]=\"error()\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n (keyup.enter)=\"keyup(value())\"\n (keyup.escape)=\"onBlur()\"\n (click)=\"select(value())\">\n <span class=\"radio__icon\" [class.radio__icon--selected]=\"selected()\"></span>\n\n <span class=\"radio__label\">\n <ng-content>empty radio button</ng-content>\n </span>\n</button>\n", styles: [":host{display:inline-flex;color:inherit;width:inherit;height:inherit}.radio{--gld-height: 26px;--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-dot-color: var(--gld-blue);--gld-dot-color--outer: var(--gld-gray-transparent--060);--gld-dot-color--outer-hover: var(--gld-blue);--gld-dot-color--outer-selected: var(--gld-blue);--gld-dot-color--outer-error: var(--gld-red);display:inline-flex;justify-content:center;align-items:center;border:none;background:none;gap:var(--gld-spacing--xxs);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-color);height:var(--gld-height);padding:var(--gld-spacing--xxxs);cursor:pointer;-webkit-user-select:none;user-select:none}.radio:hover .radio__icon,.radio:focus .radio__icon{--gld-dot-color--outer: var(--gld-dot-color--outer-hover)}.radio:focus{outline:none}.radio__icon{--gld-size: 20px;width:var(--gld-size);height:var(--gld-size);border-radius:50%;border:var(--gld-border-size) solid var(--gld-dot-color--outer);position:relative;display:flex;justify-content:center;align-items:center}.radio__icon--selected:before{content:\"\";position:absolute;width:calc(var(--gld-size) / 2);height:calc(var(--gld-size) / 2);background:var(--gld-dot-color);border-radius:inherit}.radio__label:first-letter{text-transform:uppercase}.radio--selected{--gld-dot-color--outer: var(--gld-dot-color--outer-selected)}.radio--disabled{--gld-color: var(--gld-color--disabled);--gld-dot-color--outer: var(--gld-color--disabled);pointer-events:none}.radio--error .radio__icon{--gld-dot-color--outer: var(--gld-dot-color--outer-error)}\n"] }]
1147
1119
  }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], changeValue: [{ type: i0.Output, args: ["changeValue"] }], changeFocus: [{ type: i0.Output, args: ["changeFocus"] }] } });
1148
1120
 
1149
1121
  // Angular Imports
1150
- const components$3 = [InputError];
1151
- class RadioGroup {
1122
+ const components$3 = [InputErrorComponent];
1123
+ class RadioGroupComponent {
1152
1124
  #destroyRef;
1153
1125
  #changeDetectorRef;
1154
1126
  constructor() {
@@ -1158,12 +1130,13 @@ class RadioGroup {
1158
1130
  this.id = input.required({ ...(ngDevMode ? { debugName: "id" } : {}), transform: (value) => `input-id-${value.trim().split(' ').join('-')}` });
1159
1131
  this.name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}), transform: (value) => `input-name-${value.trim().split(' ').join('-')}` });
1160
1132
  this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
1161
- this.direction = input(RadioDirection.horizontal, ...(ngDevMode ? [{ debugName: "direction" }] : []));
1162
- this.radioButtonChildren = contentChildren(RadioButton, ...(ngDevMode ? [{ debugName: "radioButtonChildren" }] : []));
1133
+ this.direction = input(RADIO_DIRECTIONS.horizontal, ...(ngDevMode ? [{ debugName: "direction" }] : []));
1134
+ this.radioButtonChildren = contentChildren(RadioButtonComponent, ...(ngDevMode ? [{ debugName: "radioButtonChildren" }] : []));
1163
1135
  this.innerControl = signal(new FormControl('', { nonNullable: true }), ...(ngDevMode ? [{ debugName: "innerControl" }] : []));
1164
1136
  this.hasValidators = signal({
1165
1137
  required: false,
1166
1138
  }, ...(ngDevMode ? [{ debugName: "hasValidators" }] : []));
1139
+ // eslint-disable-next-line no-unused-vars
1167
1140
  this.onChange = (value) => { };
1168
1141
  this.onTouched = () => { };
1169
1142
  this.innerControl()
@@ -1215,6 +1188,7 @@ class RadioGroup {
1215
1188
  this.innerControl().setValue(value);
1216
1189
  }
1217
1190
  }
1191
+ // eslint-disable-next-line no-unused-vars
1218
1192
  registerOnChange(onChange) {
1219
1193
  // console.log('registerOnChange')
1220
1194
  this.onChange = onChange;
@@ -1247,28 +1221,28 @@ class RadioGroup {
1247
1221
  });
1248
1222
  // console.log('hasValidators', this.hasValidators())
1249
1223
  }
1250
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1251
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: RadioGroup, isStandalone: true, selector: "gld-radio-group", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
1224
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1225
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: RadioGroupComponent, isStandalone: true, selector: "gld-radio-group", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
1252
1226
  {
1253
1227
  provide: NG_VALUE_ACCESSOR,
1254
- useExisting: forwardRef(() => RadioGroup),
1228
+ useExisting: forwardRef(() => RadioGroupComponent),
1255
1229
  multi: true,
1256
1230
  },
1257
- ], queries: [{ propertyName: "radioButtonChildren", predicate: RadioButton, isSignal: true }], ngImport: i0, template: "@let errors = control().invalid && (control().dirty || control().touched);\n@let disabled = control().disabled || (control().pending && control().disabled);\n\n<article class=\"radio\" [class.radio--disabled]=\"disabled\" id=\"{{ id() }}\" [attr.name]=\"name()\">\n <!-- Label -->\n @if (label()) {\n <label for=\"{{ id() }}\">\n <span>{{ label() }}</span>\n @if (hasValidators().required) {\n <span>*</span>\n }\n </label>\n }\n <section class=\"radio__items radio__items--{{ direction() }}\">\n <ng-content select=\"gld-radio-button\" />\n </section>\n</article>\n<!-- Errors -->\n@if (errors) {\n <ng-content select=\"gld-input-error\">\n <gld-input-error border [errors]=\"control().errors\" />\n </ng-content>\n} @else {\n <!-- Hint -->\n <ng-content select=\"gld-input-hint\" />\n}\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", styles: [".radio{--gld-color: var(--gld-foreground-color);--gld-label-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);margin-bottom:var(--gld-spacing--xxxs)}.radio label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:var(--gld-line-height);color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text;margin-bottom:var(--gld-spacing--xxxs)}.radio label:first-letter{text-transform:uppercase}.radio--disabled .radio__label{--gld-color: var(--gld-color--disabled);pointer-events:none}.radio__items{display:flex;gap:var(--gld-spacing--xxs)}.radio__items--horizontal{align-items:center}.radio__items--vertical{flex-direction:column}\n"], dependencies: [{ kind: "component", type: InputError, selector: "gld-input-error", inputs: ["errors", "border"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1231
+ ], queries: [{ propertyName: "radioButtonChildren", predicate: RadioButtonComponent, isSignal: true }], ngImport: i0, template: "@let errors = control().invalid && (control().dirty || control().touched);\n@let disabled = control().disabled || (control().pending && control().disabled);\n\n<article class=\"radio\" [class.radio--disabled]=\"disabled\" id=\"{{ id() }}\" [attr.name]=\"name()\">\n <!-- Label -->\n @if (label()) {\n <label for=\"{{ id() }}\">\n <span>{{ label() }}</span>\n @if (hasValidators().required) {\n <span>*</span>\n }\n </label>\n }\n <section class=\"radio__items radio__items--{{ direction() }}\">\n <ng-content select=\"gld-radio-button\" />\n </section>\n</article>\n<!-- Errors -->\n@if (errors) {\n <ng-content select=\"gld-input-error\">\n <gld-input-error border [errors]=\"control().errors\" />\n </ng-content>\n} @else {\n <!-- Hint -->\n <ng-content select=\"gld-input-hint\" />\n}\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", styles: [".radio{--gld-color: var(--gld-foreground-color);--gld-label-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);margin-bottom:var(--gld-spacing--xxxs)}.radio label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:var(--gld-line-height);color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text;margin-bottom:var(--gld-spacing--xxxs)}.radio label:first-letter{text-transform:uppercase}.radio--disabled .radio__label{--gld-color: var(--gld-color--disabled);pointer-events:none}.radio__items{display:flex;gap:var(--gld-spacing--xxs)}.radio__items--horizontal{align-items:center}.radio__items--vertical{flex-direction:column}\n"], dependencies: [{ kind: "component", type: InputErrorComponent, selector: "gld-input-error", inputs: ["errors", "border"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1258
1232
  }
1259
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RadioGroup, decorators: [{
1233
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RadioGroupComponent, decorators: [{
1260
1234
  type: Component,
1261
1235
  args: [{ selector: 'gld-radio-group', imports: [...components$3], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
1262
1236
  {
1263
1237
  provide: NG_VALUE_ACCESSOR,
1264
- useExisting: forwardRef(() => RadioGroup),
1238
+ useExisting: forwardRef(() => RadioGroupComponent),
1265
1239
  multi: true,
1266
1240
  },
1267
1241
  ], template: "@let errors = control().invalid && (control().dirty || control().touched);\n@let disabled = control().disabled || (control().pending && control().disabled);\n\n<article class=\"radio\" [class.radio--disabled]=\"disabled\" id=\"{{ id() }}\" [attr.name]=\"name()\">\n <!-- Label -->\n @if (label()) {\n <label for=\"{{ id() }}\">\n <span>{{ label() }}</span>\n @if (hasValidators().required) {\n <span>*</span>\n }\n </label>\n }\n <section class=\"radio__items radio__items--{{ direction() }}\">\n <ng-content select=\"gld-radio-button\" />\n </section>\n</article>\n<!-- Errors -->\n@if (errors) {\n <ng-content select=\"gld-input-error\">\n <gld-input-error border [errors]=\"control().errors\" />\n </ng-content>\n} @else {\n <!-- Hint -->\n <ng-content select=\"gld-input-hint\" />\n}\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", styles: [".radio{--gld-color: var(--gld-foreground-color);--gld-label-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);margin-bottom:var(--gld-spacing--xxxs)}.radio label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:var(--gld-line-height);color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text;margin-bottom:var(--gld-spacing--xxxs)}.radio label:first-letter{text-transform:uppercase}.radio--disabled .radio__label{--gld-color: var(--gld-color--disabled);pointer-events:none}.radio__items{display:flex;gap:var(--gld-spacing--xxs)}.radio__items--horizontal{align-items:center}.radio__items--vertical{flex-direction:column}\n"] }]
1268
- }], ctorParameters: () => [], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], radioButtonChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => RadioButton), { isSignal: true }] }] } });
1242
+ }], ctorParameters: () => [], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], radioButtonChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => RadioButtonComponent), { isSignal: true }] }] } });
1269
1243
 
1270
1244
  // Angular Imports
1271
- class SelectOption {
1245
+ class SelectOptionComponent {
1272
1246
  constructor() {
1273
1247
  this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
1274
1248
  this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
@@ -1288,32 +1262,33 @@ class SelectOption {
1288
1262
  onBlur() {
1289
1263
  this.changeFocus.emit(false);
1290
1264
  }
1291
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SelectOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1292
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: SelectOption, 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\n [tabindex]=\"disabled() ? '-1' : '0'\"\n (keyup.enter)=\"keyup()\"\n (click)=\"select()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keyup.escape)=\"onBlur()\">\n <span><ng-content> an option </ng-content></span>\n</button>\n", styles: [":host{height:var(--gld-height)}button{--gld-background: transparent;--gld-background--hover: var(--gld-gray-transparent--010);--gld-color: var(--gld-foreground-color);--gld-color--hover: var(--gld-blue);--gld-radius: var(--gld-radius--xxxs);padding:var(--gld-spacing--xs) var(--gld-spacing--s);width:100%;height:100%;max-width:100%;background:var(--gld-background);color:var(--gld-color);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;display:flex;align-items:center;-webkit-user-select:none;user-select:none;outline:none;border:none;border-radius:var(--gld-radius);cursor:pointer}button:hover,button:focus{--gld-background: var(--gld-background--hover);--gld-color: var(--gld-color--hover)}button span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1265
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1266
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", 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\n [tabindex]=\"disabled() ? '-1' : '0'\"\n (keyup.enter)=\"keyup()\"\n (click)=\"select()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keyup.escape)=\"onBlur()\">\n <span><ng-content> an option </ng-content></span>\n</button>\n", styles: [":host{height:var(--gld-height)}button{--gld-background: transparent;--gld-background--hover: var(--gld-gray-transparent--010);--gld-color: var(--gld-foreground-color);--gld-color--hover: var(--gld-blue);--gld-radius: var(--gld-radius--xxxs);padding:var(--gld-spacing--xs) var(--gld-spacing--s);width:100%;height:100%;max-width:100%;background:var(--gld-background);color:var(--gld-color);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;display:flex;align-items:center;-webkit-user-select:none;user-select:none;outline:none;border:none;border-radius:var(--gld-radius);cursor:pointer}button:hover,button:focus{--gld-background: var(--gld-background--hover);--gld-color: var(--gld-color--hover)}button span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1293
1267
  }
1294
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SelectOption, decorators: [{
1268
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SelectOptionComponent, decorators: [{
1295
1269
  type: Component,
1296
1270
  args: [{ selector: 'gld-select-option', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n [tabindex]=\"disabled() ? '-1' : '0'\"\n (keyup.enter)=\"keyup()\"\n (click)=\"select()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keyup.escape)=\"onBlur()\">\n <span><ng-content> an option </ng-content></span>\n</button>\n", styles: [":host{height:var(--gld-height)}button{--gld-background: transparent;--gld-background--hover: var(--gld-gray-transparent--010);--gld-color: var(--gld-foreground-color);--gld-color--hover: var(--gld-blue);--gld-radius: var(--gld-radius--xxxs);padding:var(--gld-spacing--xs) var(--gld-spacing--s);width:100%;height:100%;max-width:100%;background:var(--gld-background);color:var(--gld-color);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;display:flex;align-items:center;-webkit-user-select:none;user-select:none;outline:none;border:none;border-radius:var(--gld-radius);cursor:pointer}button:hover,button:focus{--gld-background: var(--gld-background--hover);--gld-color: var(--gld-color--hover)}button span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
1297
1271
  }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], changeFocus: [{ type: i0.Output, args: ["changeFocus"] }] } });
1298
1272
 
1299
1273
  // Angular Imports
1300
- const components$2 = [Icon, InputError];
1301
- class Select {
1274
+ const components$2 = [IconComponent, InputErrorComponent];
1275
+ class SelectComponent {
1302
1276
  #destroyRef;
1303
1277
  #changeDetectorRef;
1304
1278
  constructor() {
1305
1279
  this.#destroyRef = inject(DestroyRef);
1306
1280
  this.#changeDetectorRef = inject(ChangeDetectorRef);
1307
- this.Icons = Icons;
1281
+ this.ICONS = ICONS;
1308
1282
  this.control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
1309
1283
  this.id = input.required({ ...(ngDevMode ? { debugName: "id" } : {}), transform: (value) => `input-id-${value.trim().split(' ').join('-')}` });
1310
1284
  this.name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}), transform: (value) => `input-name-${value.trim().split(' ').join('-')}` });
1311
1285
  this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
1312
1286
  this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
1313
1287
  this.mask = input('', ...(ngDevMode ? [{ debugName: "mask" }] : []));
1288
+ // eslint-disable-next-line no-unused-vars
1314
1289
  this.transform = input((value) => String(value), ...(ngDevMode ? [{ debugName: "transform" }] : []));
1315
1290
  this.selectElement = viewChild('selectElement', ...(ngDevMode ? [{ debugName: "selectElement" }] : []));
1316
- this.selectOptionChildren = contentChildren(SelectOption, ...(ngDevMode ? [{ debugName: "selectOptionChildren" }] : []));
1291
+ this.selectOptionChildren = contentChildren(SelectOptionComponent, ...(ngDevMode ? [{ debugName: "selectOptionChildren" }] : []));
1317
1292
  this.innerControl = signal(new FormControl('', { nonNullable: true }), ...(ngDevMode ? [{ debugName: "innerControl" }] : []));
1318
1293
  this.hasValidators = signal({
1319
1294
  required: false,
@@ -1322,6 +1297,7 @@ class Select {
1322
1297
  maxLength: null,
1323
1298
  }, ...(ngDevMode ? [{ debugName: "hasValidators" }] : []));
1324
1299
  this.isMenuOpen = signal(false, ...(ngDevMode ? [{ debugName: "isMenuOpen" }] : []));
1300
+ // eslint-disable-next-line no-unused-vars
1325
1301
  this.onChange = (value) => { };
1326
1302
  this.onTouched = () => { };
1327
1303
  effect(() => {
@@ -1338,7 +1314,7 @@ class Select {
1338
1314
  * Numbers, special characters, and symbols are removed.
1339
1315
  *
1340
1316
  * @example
1341
- * // Input: "Juan123@García#456 Pérez$"
1317
+ * // InputComponent: "Juan123@García#456 Pérez$"
1342
1318
  * // Output: "JuanGarcía Pérez"
1343
1319
  */
1344
1320
  if (String(value) && this.hasValidators().string) {
@@ -1389,6 +1365,7 @@ class Select {
1389
1365
  this.innerControl().setValue(value);
1390
1366
  }
1391
1367
  }
1368
+ // eslint-disable-next-line no-unused-vars
1392
1369
  registerOnChange(onChange) {
1393
1370
  // console.log('registerOnChange')
1394
1371
  this.onChange = onChange;
@@ -1471,29 +1448,29 @@ class Select {
1471
1448
  });
1472
1449
  // console.log('hasValidators', this.hasValidators())
1473
1450
  }
1474
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Select, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1475
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: Select, isStandalone: true, selector: "gld-select", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, transform: { classPropertyName: "transform", publicName: "transform", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
1451
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1452
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: SelectComponent, isStandalone: true, selector: "gld-select", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, transform: { classPropertyName: "transform", publicName: "transform", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
1476
1453
  {
1477
1454
  provide: NG_VALUE_ACCESSOR,
1478
- useExisting: forwardRef(() => Select),
1455
+ useExisting: forwardRef(() => SelectComponent),
1479
1456
  multi: true,
1480
1457
  },
1481
- ], queries: [{ propertyName: "selectOptionChildren", predicate: SelectOption, isSignal: true }], viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["selectElement"], descendants: true, isSignal: true }], ngImport: i0, template: "@let errors = control().invalid && (control().dirty || control().touched);\n@let disabled = control().disabled || (control().pending && control().disabled);\n\n<section #selectElement class=\"select\">\n <section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\n <!-- Label -->\n @if (label()) {\n <label for=\"{{ id() }}\">\n <span>{{ label() }}</span>\n @if (hasValidators().required) {\n <span>*</span>\n }\n </label>\n }\n <!-- Input -->\n <input\n type=\"text\"\n id=\"{{ id() }}\"\n name=\"{{ name() }}\"\n [tabindex]=\"disabled ? '-1' : '0'\"\n [placeholder]=\"placeholder()\"\n [formControl]=\"innerControl()\"\n [attr.maxlength]=\"hasValidators().maxLength\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keyup.escape)=\"onBlur()\" />\n\n <!-- Suffix -->\n <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\n\n <!-- Menu -->\n <ng-container [ngTemplateOutlet]=\"menuTemplate\" />\n </section>\n <!-- Errors -->\n @if (errors) {\n <ng-content select=\"gld-input-error\">\n <gld-input-error [errors]=\"control().errors\" />\n </ng-content>\n } @else {\n <!-- Hint -->\n <ng-content select=\"gld-input-hint\" />\n }\n</section>\n\n<!-- Menu Template -->\n<ng-template #menuTemplate>\n <section class=\"select-menu\" [class.select-menu--opened]=\"isMenuOpen()\">\n <ng-content select=\"gld-select-option\" />\n </section>\n</ng-template>\n\n<!-- Suffix Template -->\n<ng-template #suffixTemplate>\n @if (control().pending) {\n <gld-icon\n size=\"small\"\n class=\"input-icon input-icon--animated\"\n [class.input-icon--error]=\"errors\"\n [icon]=\"Icons.loader4Fill\"\n [disabled]=\"disabled\" />\n } @else {\n <gld-icon\n size=\"small\"\n class=\"input-icon\"\n [class.input-icon--rotated]=\"isMenuOpen()\"\n [class.input-icon--error]=\"errors\"\n [icon]=\"Icons.arrowDownSLine\"\n [disabled]=\"disabled\"\n (clicked)=\"arrowIconClicked()\" />\n }\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<!-- FIXME: Verify why this element is here -->\n<!-- Suffix Template -->\n<!-- <ng-template #suffixTemplate>\n <gld-icon\n size=\"small\"\n class=\"input-icon\"\n [class.input-icon--error]=\"errors\"\n [icon]=\"Icons.arrowDownSLine\" />\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", styles: [".input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-height: 40px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input input{width:100%;min-width:var(--gld-min-with);height:var(--gld-height);padding:var(--gld-spacing--xxs);padding-right:var(--gld-spacing--m);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input input:focus{--gld-border-color: var(--gld-blue)}.input input::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:var(--gld-spacing--xxs);color:var(--gld-color);-webkit-user-select:none;user-select:none;will-change:transform,color;transition:transform var(--gld-animation-time) ease,color var(--gld-animation-time) ease-in-out;cursor:pointer}.input-icon--animated{animation:rotate 1s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.input-icon--rotated{transform:rotate(180deg)}.select{--gld-background: light-dark(var(--gld-whitelight), var(--gld-darkblue));--gld-shadow: light-dark(var(--gld-gray-transparent--040), var(--gld-gray-transparent--020));--gld-height: 40px;--gld-option-items: 0;--gld-option-height: 40px;--gld-animation-time: var(--gld-animation-time--150);--gld-padding: var(--gld-spacing--xxxs);--gld-radius: var(--gld-radius--xxs);position:relative;background:transparent}.select-menu{position:absolute;z-index:1;top:calc(var(--gld-height) + 22px);left:0;height:0;padding:0;display:grid;grid-template-columns:1fr;background:var(--gld-background);box-shadow:inset 0 0 0 var(--gld-border-size) var(--gld-shadow);border-radius:var(--gld-radius);min-width:100%;max-width:100%;max-height:calc(var(--gld-option-height) * 5);overflow-y:auto;will-change:height,padding;transition:var(--gld-animation-time) height ease-in-out,var(--gld-animation-time) padding ease-in-out}.select-menu--opened{height:calc(var(--gld-option-height) * var(--gld-option-items) + var(--gld-padding) * 2);padding:var(--gld-padding)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Icon, selector: "gld-icon", inputs: ["icon", "size", "space", "moveTopToBottom", "moveLeftToRight", "disabled"], outputs: ["clicked"] }, { kind: "component", type: InputError, selector: "gld-input-error", inputs: ["errors", "border"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1458
+ ], queries: [{ propertyName: "selectOptionChildren", predicate: SelectOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["selectElement"], descendants: true, isSignal: true }], ngImport: i0, template: "@let errors = control().invalid && (control().dirty || control().touched);\n@let disabled = control().disabled || (control().pending && control().disabled);\n\n<section #selectElement class=\"select\">\n <section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\n <!-- Label -->\n @if (label()) {\n <label for=\"{{ id() }}\">\n <span>{{ label() }}</span>\n @if (hasValidators().required) {\n <span>*</span>\n }\n </label>\n }\n <!-- Input -->\n <input\n type=\"text\"\n id=\"{{ id() }}\"\n name=\"{{ name() }}\"\n [tabindex]=\"disabled ? '-1' : '0'\"\n [placeholder]=\"placeholder()\"\n [formControl]=\"innerControl()\"\n [attr.maxlength]=\"hasValidators().maxLength\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keyup.escape)=\"onBlur()\" />\n\n <!-- Suffix -->\n <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\n\n <!-- Menu -->\n <ng-container [ngTemplateOutlet]=\"menuTemplate\" />\n </section>\n <!-- Errors -->\n @if (errors) {\n <ng-content select=\"gld-input-error\">\n <gld-input-error [errors]=\"control().errors\" />\n </ng-content>\n } @else {\n <!-- Hint -->\n <ng-content select=\"gld-input-hint\" />\n }\n</section>\n\n<!-- Menu Template -->\n<ng-template #menuTemplate>\n <section class=\"select-menu\" [class.select-menu--opened]=\"isMenuOpen()\">\n <ng-content select=\"gld-select-option\" />\n </section>\n</ng-template>\n\n<!-- Suffix Template -->\n<ng-template #suffixTemplate>\n @if (control().pending) {\n <gld-icon\n size=\"small\"\n class=\"input-icon input-icon--animated\"\n [class.input-icon--error]=\"errors\"\n [icon]=\"ICONS.loader4Fill\"\n [disabled]=\"disabled\" />\n } @else {\n <gld-icon\n size=\"small\"\n class=\"input-icon\"\n [class.input-icon--rotated]=\"isMenuOpen()\"\n [class.input-icon--error]=\"errors\"\n [icon]=\"ICONS.arrowDownSLine\"\n [disabled]=\"disabled\"\n (clicked)=\"arrowIconClicked()\" />\n }\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<!-- FIXME: Verify why this element is here -->\n<!-- Suffix Template -->\n<!-- <ng-template #suffixTemplate>\n <gld-icon\n size=\"small\"\n class=\"input-icon\"\n [class.input-icon--error]=\"errors\"\n [icon]=\"ICONS.arrowDownSLine\" />\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", styles: [".input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-height: 40px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input input{width:100%;min-width:var(--gld-min-with);height:var(--gld-height);padding:var(--gld-spacing--xxs);padding-right:var(--gld-spacing--m);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input input:focus{--gld-border-color: var(--gld-blue)}.input input::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:var(--gld-spacing--xxs);color:var(--gld-color);-webkit-user-select:none;user-select:none;will-change:transform,color;transition:transform var(--gld-animation-time) ease,color var(--gld-animation-time) ease-in-out;cursor:pointer}.input-icon--animated{animation:rotate 1s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.input-icon--rotated{transform:rotate(180deg)}.select{--gld-background: light-dark(var(--gld-whitelight), var(--gld-darkblue));--gld-shadow: light-dark(var(--gld-gray-transparent--040), var(--gld-gray-transparent--020));--gld-height: 40px;--gld-option-items: 0;--gld-option-height: 40px;--gld-animation-time: var(--gld-animation-time--150);--gld-padding: var(--gld-spacing--xxxs);--gld-radius: var(--gld-radius--xxs);position:relative;background:transparent}.select-menu{position:absolute;z-index:1;top:calc(var(--gld-height) + 22px);left:0;height:0;padding:0;display:grid;grid-template-columns:1fr;background:var(--gld-background);box-shadow:inset 0 0 0 var(--gld-border-size) var(--gld-shadow);border-radius:var(--gld-radius);min-width:100%;max-width:100%;max-height:calc(var(--gld-option-height) * 5);overflow-y:auto;will-change:height,padding;transition:var(--gld-animation-time) height ease-in-out,var(--gld-animation-time) padding ease-in-out}.select-menu--opened{height:calc(var(--gld-option-height) * var(--gld-option-items) + var(--gld-padding) * 2);padding:var(--gld-padding)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "gld-icon", inputs: ["icon", "size", "space", "moveTopToBottom", "moveLeftToRight", "disabled"], outputs: ["clicked"] }, { kind: "component", type: InputErrorComponent, selector: "gld-input-error", inputs: ["errors", "border"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1482
1459
  }
1483
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Select, decorators: [{
1460
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SelectComponent, decorators: [{
1484
1461
  type: Component,
1485
1462
  args: [{ selector: 'gld-select', imports: [ReactiveFormsModule, NgTemplateOutlet, ...components$2], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
1486
1463
  {
1487
1464
  provide: NG_VALUE_ACCESSOR,
1488
- useExisting: forwardRef(() => Select),
1465
+ useExisting: forwardRef(() => SelectComponent),
1489
1466
  multi: true,
1490
1467
  },
1491
- ], template: "@let errors = control().invalid && (control().dirty || control().touched);\n@let disabled = control().disabled || (control().pending && control().disabled);\n\n<section #selectElement class=\"select\">\n <section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\n <!-- Label -->\n @if (label()) {\n <label for=\"{{ id() }}\">\n <span>{{ label() }}</span>\n @if (hasValidators().required) {\n <span>*</span>\n }\n </label>\n }\n <!-- Input -->\n <input\n type=\"text\"\n id=\"{{ id() }}\"\n name=\"{{ name() }}\"\n [tabindex]=\"disabled ? '-1' : '0'\"\n [placeholder]=\"placeholder()\"\n [formControl]=\"innerControl()\"\n [attr.maxlength]=\"hasValidators().maxLength\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keyup.escape)=\"onBlur()\" />\n\n <!-- Suffix -->\n <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\n\n <!-- Menu -->\n <ng-container [ngTemplateOutlet]=\"menuTemplate\" />\n </section>\n <!-- Errors -->\n @if (errors) {\n <ng-content select=\"gld-input-error\">\n <gld-input-error [errors]=\"control().errors\" />\n </ng-content>\n } @else {\n <!-- Hint -->\n <ng-content select=\"gld-input-hint\" />\n }\n</section>\n\n<!-- Menu Template -->\n<ng-template #menuTemplate>\n <section class=\"select-menu\" [class.select-menu--opened]=\"isMenuOpen()\">\n <ng-content select=\"gld-select-option\" />\n </section>\n</ng-template>\n\n<!-- Suffix Template -->\n<ng-template #suffixTemplate>\n @if (control().pending) {\n <gld-icon\n size=\"small\"\n class=\"input-icon input-icon--animated\"\n [class.input-icon--error]=\"errors\"\n [icon]=\"Icons.loader4Fill\"\n [disabled]=\"disabled\" />\n } @else {\n <gld-icon\n size=\"small\"\n class=\"input-icon\"\n [class.input-icon--rotated]=\"isMenuOpen()\"\n [class.input-icon--error]=\"errors\"\n [icon]=\"Icons.arrowDownSLine\"\n [disabled]=\"disabled\"\n (clicked)=\"arrowIconClicked()\" />\n }\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<!-- FIXME: Verify why this element is here -->\n<!-- Suffix Template -->\n<!-- <ng-template #suffixTemplate>\n <gld-icon\n size=\"small\"\n class=\"input-icon\"\n [class.input-icon--error]=\"errors\"\n [icon]=\"Icons.arrowDownSLine\" />\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", styles: [".input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-height: 40px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input input{width:100%;min-width:var(--gld-min-with);height:var(--gld-height);padding:var(--gld-spacing--xxs);padding-right:var(--gld-spacing--m);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input input:focus{--gld-border-color: var(--gld-blue)}.input input::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:var(--gld-spacing--xxs);color:var(--gld-color);-webkit-user-select:none;user-select:none;will-change:transform,color;transition:transform var(--gld-animation-time) ease,color var(--gld-animation-time) ease-in-out;cursor:pointer}.input-icon--animated{animation:rotate 1s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.input-icon--rotated{transform:rotate(180deg)}.select{--gld-background: light-dark(var(--gld-whitelight), var(--gld-darkblue));--gld-shadow: light-dark(var(--gld-gray-transparent--040), var(--gld-gray-transparent--020));--gld-height: 40px;--gld-option-items: 0;--gld-option-height: 40px;--gld-animation-time: var(--gld-animation-time--150);--gld-padding: var(--gld-spacing--xxxs);--gld-radius: var(--gld-radius--xxs);position:relative;background:transparent}.select-menu{position:absolute;z-index:1;top:calc(var(--gld-height) + 22px);left:0;height:0;padding:0;display:grid;grid-template-columns:1fr;background:var(--gld-background);box-shadow:inset 0 0 0 var(--gld-border-size) var(--gld-shadow);border-radius:var(--gld-radius);min-width:100%;max-width:100%;max-height:calc(var(--gld-option-height) * 5);overflow-y:auto;will-change:height,padding;transition:var(--gld-animation-time) height ease-in-out,var(--gld-animation-time) padding ease-in-out}.select-menu--opened{height:calc(var(--gld-option-height) * var(--gld-option-items) + var(--gld-padding) * 2);padding:var(--gld-padding)}\n"] }]
1492
- }], ctorParameters: () => [], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], transform: [{ type: i0.Input, args: [{ isSignal: true, alias: "transform", required: false }] }], selectElement: [{ type: i0.ViewChild, args: ['selectElement', { isSignal: true }] }], selectOptionChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SelectOption), { isSignal: true }] }] } });
1468
+ ], template: "@let errors = control().invalid && (control().dirty || control().touched);\n@let disabled = control().disabled || (control().pending && control().disabled);\n\n<section #selectElement class=\"select\">\n <section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\n <!-- Label -->\n @if (label()) {\n <label for=\"{{ id() }}\">\n <span>{{ label() }}</span>\n @if (hasValidators().required) {\n <span>*</span>\n }\n </label>\n }\n <!-- Input -->\n <input\n type=\"text\"\n id=\"{{ id() }}\"\n name=\"{{ name() }}\"\n [tabindex]=\"disabled ? '-1' : '0'\"\n [placeholder]=\"placeholder()\"\n [formControl]=\"innerControl()\"\n [attr.maxlength]=\"hasValidators().maxLength\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keyup.escape)=\"onBlur()\" />\n\n <!-- Suffix -->\n <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\n\n <!-- Menu -->\n <ng-container [ngTemplateOutlet]=\"menuTemplate\" />\n </section>\n <!-- Errors -->\n @if (errors) {\n <ng-content select=\"gld-input-error\">\n <gld-input-error [errors]=\"control().errors\" />\n </ng-content>\n } @else {\n <!-- Hint -->\n <ng-content select=\"gld-input-hint\" />\n }\n</section>\n\n<!-- Menu Template -->\n<ng-template #menuTemplate>\n <section class=\"select-menu\" [class.select-menu--opened]=\"isMenuOpen()\">\n <ng-content select=\"gld-select-option\" />\n </section>\n</ng-template>\n\n<!-- Suffix Template -->\n<ng-template #suffixTemplate>\n @if (control().pending) {\n <gld-icon\n size=\"small\"\n class=\"input-icon input-icon--animated\"\n [class.input-icon--error]=\"errors\"\n [icon]=\"ICONS.loader4Fill\"\n [disabled]=\"disabled\" />\n } @else {\n <gld-icon\n size=\"small\"\n class=\"input-icon\"\n [class.input-icon--rotated]=\"isMenuOpen()\"\n [class.input-icon--error]=\"errors\"\n [icon]=\"ICONS.arrowDownSLine\"\n [disabled]=\"disabled\"\n (clicked)=\"arrowIconClicked()\" />\n }\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<!-- FIXME: Verify why this element is here -->\n<!-- Suffix Template -->\n<!-- <ng-template #suffixTemplate>\n <gld-icon\n size=\"small\"\n class=\"input-icon\"\n [class.input-icon--error]=\"errors\"\n [icon]=\"ICONS.arrowDownSLine\" />\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", styles: [".input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-height: 40px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input input{width:100%;min-width:var(--gld-min-with);height:var(--gld-height);padding:var(--gld-spacing--xxs);padding-right:var(--gld-spacing--m);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input input:focus{--gld-border-color: var(--gld-blue)}.input input::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:var(--gld-spacing--xxs);color:var(--gld-color);-webkit-user-select:none;user-select:none;will-change:transform,color;transition:transform var(--gld-animation-time) ease,color var(--gld-animation-time) ease-in-out;cursor:pointer}.input-icon--animated{animation:rotate 1s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.input-icon--rotated{transform:rotate(180deg)}.select{--gld-background: light-dark(var(--gld-whitelight), var(--gld-darkblue));--gld-shadow: light-dark(var(--gld-gray-transparent--040), var(--gld-gray-transparent--020));--gld-height: 40px;--gld-option-items: 0;--gld-option-height: 40px;--gld-animation-time: var(--gld-animation-time--150);--gld-padding: var(--gld-spacing--xxxs);--gld-radius: var(--gld-radius--xxs);position:relative;background:transparent}.select-menu{position:absolute;z-index:1;top:calc(var(--gld-height) + 22px);left:0;height:0;padding:0;display:grid;grid-template-columns:1fr;background:var(--gld-background);box-shadow:inset 0 0 0 var(--gld-border-size) var(--gld-shadow);border-radius:var(--gld-radius);min-width:100%;max-width:100%;max-height:calc(var(--gld-option-height) * 5);overflow-y:auto;will-change:height,padding;transition:var(--gld-animation-time) height ease-in-out,var(--gld-animation-time) padding ease-in-out}.select-menu--opened{height:calc(var(--gld-option-height) * var(--gld-option-items) + var(--gld-padding) * 2);padding:var(--gld-padding)}\n"] }]
1469
+ }], ctorParameters: () => [], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], transform: [{ type: i0.Input, args: [{ isSignal: true, alias: "transform", required: false }] }], selectElement: [{ type: i0.ViewChild, args: ['selectElement', { isSignal: true }] }], selectOptionChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SelectOptionComponent), { isSignal: true }] }] } });
1493
1470
 
1494
1471
  // Angular Imports
1495
- const components$1 = [InputError];
1496
- class Textarea {
1472
+ const components$1 = [InputErrorComponent];
1473
+ class TextareaComponent {
1497
1474
  #destroyRef;
1498
1475
  #changeDetectorRef;
1499
1476
  constructor() {
@@ -1506,6 +1483,7 @@ class Textarea {
1506
1483
  this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
1507
1484
  this.type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
1508
1485
  this.suffix = input(false, { ...(ngDevMode ? { debugName: "suffix" } : {}), transform: booleanAttribute });
1486
+ // eslint-disable-next-line no-unused-vars
1509
1487
  this.onChange = (value) => { };
1510
1488
  this.onTouched = () => { };
1511
1489
  this.innerControl = signal(new FormControl('', { nonNullable: true }), ...(ngDevMode ? [{ debugName: "innerControl" }] : []));
@@ -1524,7 +1502,7 @@ class Textarea {
1524
1502
  * This sanitizes the value input by keeping only numbers (0-9)
1525
1503
  *
1526
1504
  * @example
1527
- * // Input: "12/34/abcd2023!@_"
1505
+ * // InputComponent: "12/34/abcd2023!@_"
1528
1506
  * // Output: "12342023"
1529
1507
  */
1530
1508
  if (String(value) && this.hasValidators().naturalNumber) {
@@ -1537,7 +1515,7 @@ class Textarea {
1537
1515
  * Numbers, special characters, and symbols are removed.
1538
1516
  *
1539
1517
  * @example
1540
- * // Input: "Juan123@García#456 Pérez$"
1518
+ * // InputComponent: "Juan123@García#456 Pérez$"
1541
1519
  * // Output: "JuanGarcía Pérez"
1542
1520
  */
1543
1521
  if (String(value) && this.hasValidators().string) {
@@ -1565,6 +1543,7 @@ class Textarea {
1565
1543
  if (value !== this.innerControl().value)
1566
1544
  this.innerControl().setValue(value);
1567
1545
  }
1546
+ // eslint-disable-next-line no-unused-vars
1568
1547
  registerOnChange(onChange) {
1569
1548
  // console.log('registerOnChange')
1570
1549
  this.onChange = onChange;
@@ -1606,28 +1585,28 @@ class Textarea {
1606
1585
  });
1607
1586
  // console.log('hasValidators', this.hasValidators())
1608
1587
  }
1609
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Textarea, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1610
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: Textarea, isStandalone: true, selector: "gld-textarea", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
1588
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1589
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TextareaComponent, isStandalone: true, selector: "gld-textarea", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
1611
1590
  {
1612
1591
  provide: NG_VALUE_ACCESSOR,
1613
- useExisting: forwardRef(() => Textarea),
1592
+ useExisting: forwardRef(() => TextareaComponent),
1614
1593
  multi: true,
1615
1594
  },
1616
- ], 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 <!-- Label -->\n @if (label()) {\n <label for=\"{{ id() }}\">\n <span>{{ label() }}</span>\n @if (hasValidators().required) {\n <span>*</span>\n }\n </label>\n }\n\n <!-- Input -->\n <textarea\n id=\"{{ id() }}\"\n name=\"{{ name() }}\"\n [tabindex]=\"disabled ? '-1' : '0'\"\n [placeholder]=\"placeholder()\"\n [formControl]=\"innerControl()\"\n [attr.maxlength]=\"hasValidators().maxLength\"\n (focus)=\"onFocus()\"\n (blur)=\"onTouched()\"\n (keyup.escape)=\"onBlur()\"></textarea>\n\n <!-- Suffix -->\n @if (suffix()) {\n <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\n }\n</section>\n<!-- Errors -->\n@if (errors) {\n <ng-content select=\"gld-input-error\">\n <gld-input-error [errors]=\"control().errors\" />\n </ng-content>\n} @else {\n <!-- Hint -->\n <ng-content select=\"gld-input-hint\" />\n}\n\n<!-- Suffix emplate -->\n<ng-template #suffixTemplate>\n <span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\n <ng-content select=\"[inputSuffix]\" />\n </span>\n</ng-template>\n\n<!-- <h3>Debugging</h3>\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", styles: [".input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-min-height: 120px;--gld-max-height: 240px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input textarea{display:flex;width:100%;min-width:var(--gld-min-with);min-height:var(--gld-min-height);max-height:var(--gld-max-height);padding:var(--gld-spacing--xxs);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;resize:vertical;form-sizing:content;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input textarea:focus{--gld-border-color: var(--gld-blue)}.input textarea::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:0;display:inline-block;color:var(--gld-color);will-change:transform,color;transition:color var(--gld-animation-time) ease;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputError, selector: "gld-input-error", inputs: ["errors", "border"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1595
+ ], 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 <!-- Label -->\n @if (label()) {\n <label for=\"{{ id() }}\">\n <span>{{ label() }}</span>\n @if (hasValidators().required) {\n <span>*</span>\n }\n </label>\n }\n\n <!-- Input -->\n <textarea\n id=\"{{ id() }}\"\n name=\"{{ name() }}\"\n [tabindex]=\"disabled ? '-1' : '0'\"\n [placeholder]=\"placeholder()\"\n [formControl]=\"innerControl()\"\n [attr.maxlength]=\"hasValidators().maxLength\"\n (focus)=\"onFocus()\"\n (blur)=\"onTouched()\"\n (keyup.escape)=\"onBlur()\"></textarea>\n\n <!-- Suffix -->\n @if (suffix()) {\n <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\n }\n</section>\n<!-- Errors -->\n@if (errors) {\n <ng-content select=\"gld-input-error\">\n <gld-input-error [errors]=\"control().errors\" />\n </ng-content>\n} @else {\n <!-- Hint -->\n <ng-content select=\"gld-input-hint\" />\n}\n\n<!-- Suffix emplate -->\n<ng-template #suffixTemplate>\n <span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\n <ng-content select=\"[inputSuffix]\" />\n </span>\n</ng-template>\n\n<!-- <h3>Debugging</h3>\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", styles: [".input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-min-height: 120px;--gld-max-height: 240px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input textarea{display:flex;width:100%;min-width:var(--gld-min-with);min-height:var(--gld-min-height);max-height:var(--gld-max-height);padding:var(--gld-spacing--xxs);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;resize:vertical;form-sizing:content;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input textarea:focus{--gld-border-color: var(--gld-blue)}.input textarea::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:0;display:inline-block;color:var(--gld-color);will-change:transform,color;transition:color var(--gld-animation-time) ease;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputErrorComponent, selector: "gld-input-error", inputs: ["errors", "border"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1617
1596
  }
1618
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Textarea, decorators: [{
1597
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TextareaComponent, decorators: [{
1619
1598
  type: Component,
1620
1599
  args: [{ selector: 'gld-textarea', imports: [ReactiveFormsModule, NgTemplateOutlet, ...components$1], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
1621
1600
  {
1622
1601
  provide: NG_VALUE_ACCESSOR,
1623
- useExisting: forwardRef(() => Textarea),
1602
+ useExisting: forwardRef(() => TextareaComponent),
1624
1603
  multi: true,
1625
1604
  },
1626
1605
  ], 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 <!-- Label -->\n @if (label()) {\n <label for=\"{{ id() }}\">\n <span>{{ label() }}</span>\n @if (hasValidators().required) {\n <span>*</span>\n }\n </label>\n }\n\n <!-- Input -->\n <textarea\n id=\"{{ id() }}\"\n name=\"{{ name() }}\"\n [tabindex]=\"disabled ? '-1' : '0'\"\n [placeholder]=\"placeholder()\"\n [formControl]=\"innerControl()\"\n [attr.maxlength]=\"hasValidators().maxLength\"\n (focus)=\"onFocus()\"\n (blur)=\"onTouched()\"\n (keyup.escape)=\"onBlur()\"></textarea>\n\n <!-- Suffix -->\n @if (suffix()) {\n <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\n }\n</section>\n<!-- Errors -->\n@if (errors) {\n <ng-content select=\"gld-input-error\">\n <gld-input-error [errors]=\"control().errors\" />\n </ng-content>\n} @else {\n <!-- Hint -->\n <ng-content select=\"gld-input-hint\" />\n}\n\n<!-- Suffix emplate -->\n<ng-template #suffixTemplate>\n <span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\n <ng-content select=\"[inputSuffix]\" />\n </span>\n</ng-template>\n\n<!-- <h3>Debugging</h3>\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", styles: [".input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-min-height: 120px;--gld-max-height: 240px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input textarea{display:flex;width:100%;min-width:var(--gld-min-with);min-height:var(--gld-min-height);max-height:var(--gld-max-height);padding:var(--gld-spacing--xxs);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;resize:vertical;form-sizing:content;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input textarea:focus{--gld-border-color: var(--gld-blue)}.input textarea::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:0;display:inline-block;color:var(--gld-color);will-change:transform,color;transition:color var(--gld-animation-time) ease;cursor:pointer}\n"] }]
1627
1606
  }], ctorParameters: () => [], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }] } });
1628
1607
 
1629
1608
  // Angular Imports
1630
- class Image {
1609
+ class ImageComponent {
1631
1610
  constructor() {
1632
1611
  this.src = input.required(...(ngDevMode ? [{ debugName: "src" }] : []));
1633
1612
  this.alt = input.required(...(ngDevMode ? [{ debugName: "alt" }] : []));
@@ -1635,35 +1614,35 @@ class Image {
1635
1614
  // sizes = input<string>('')
1636
1615
  this.priority = input(false, { ...(ngDevMode ? { debugName: "priority" } : {}), transform: booleanAttribute });
1637
1616
  }
1638
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Image, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1639
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: Image, isStandalone: true, selector: "gld-image", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: true, transformFunction: null }, priority: { classPropertyName: "priority", publicName: "priority", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- @if (srcset() && sizes()) {\n @if (priority()) {\n <img fill priority alt=\"{{ alt() }}\" [ngSrc]=\"src()\" [ngSrcset]=\"srcset()\" [sizes]=\"sizes()\" />\n } @else {\n <img\n fill\n alt=\"{{ alt() }}\"\n [ngSrc]=\"src()\"\n [ngSrcset]=\"srcset()\"\n [sizes]=\"sizes()\"\n loading=\"lazy\" />\n }\n} @else {\n @if (priority()) {\n <img fill priority alt=\"{{ alt() }}\" [ngSrc]=\"src()\" />\n } @else {\n <img fill alt=\"{{ alt() }}\" [ngSrc]=\"src()\" loading=\"lazy\" />\n }\n} -->\n\n@if (priority()) {\n <img fill priority alt=\"{{ alt() }}\" [ngSrc]=\"src()\" />\n} @else {\n <img fill alt=\"{{ alt() }}\" [ngSrc]=\"src()\" loading=\"lazy\" />\n}\n", styles: [":host{position:relative;aspect-ratio:1/1;overflow:hidden;display:inline-block;object-fit:inherit;width:inherit;height:inherit}img{width:inherit;height:inherit;max-width:100%;max-height:100%;display:inherit;aspect-ratio:inherit;z-index:inherit;object-fit:inherit;border-radius:inherit;border:inherit;background-color:inherit;-webkit-user-select:none;user-select:none;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1617
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1618
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: ImageComponent, isStandalone: true, selector: "gld-image", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: true, transformFunction: null }, priority: { classPropertyName: "priority", publicName: "priority", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- @if (srcset() && sizes()) {\n @if (priority()) {\n <img fill priority alt=\"{{ alt() }}\" [ngSrc]=\"src()\" [ngSrcset]=\"srcset()\" [sizes]=\"sizes()\" />\n } @else {\n <img\n fill\n alt=\"{{ alt() }}\"\n [ngSrc]=\"src()\"\n [ngSrcset]=\"srcset()\"\n [sizes]=\"sizes()\"\n loading=\"lazy\" />\n }\n} @else {\n @if (priority()) {\n <img fill priority alt=\"{{ alt() }}\" [ngSrc]=\"src()\" />\n } @else {\n <img fill alt=\"{{ alt() }}\" [ngSrc]=\"src()\" loading=\"lazy\" />\n }\n} -->\n\n@if (priority()) {\n <img fill priority alt=\"{{ alt() }}\" [ngSrc]=\"src()\" />\n} @else {\n <img fill alt=\"{{ alt() }}\" [ngSrc]=\"src()\" loading=\"lazy\" />\n}\n", styles: [":host{position:relative;aspect-ratio:1/1;overflow:hidden;display:inline-block;object-fit:inherit;width:inherit;height:inherit}img{width:inherit;height:inherit;max-width:100%;max-height:100%;display:inherit;aspect-ratio:inherit;z-index:inherit;object-fit:inherit;border-radius:inherit;border:inherit;background-color:inherit;-webkit-user-select:none;user-select:none;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1640
1619
  }
1641
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Image, decorators: [{
1620
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ImageComponent, decorators: [{
1642
1621
  type: Component,
1643
1622
  args: [{ selector: 'gld-image', imports: [NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- @if (srcset() && sizes()) {\n @if (priority()) {\n <img fill priority alt=\"{{ alt() }}\" [ngSrc]=\"src()\" [ngSrcset]=\"srcset()\" [sizes]=\"sizes()\" />\n } @else {\n <img\n fill\n alt=\"{{ alt() }}\"\n [ngSrc]=\"src()\"\n [ngSrcset]=\"srcset()\"\n [sizes]=\"sizes()\"\n loading=\"lazy\" />\n }\n} @else {\n @if (priority()) {\n <img fill priority alt=\"{{ alt() }}\" [ngSrc]=\"src()\" />\n } @else {\n <img fill alt=\"{{ alt() }}\" [ngSrc]=\"src()\" loading=\"lazy\" />\n }\n} -->\n\n@if (priority()) {\n <img fill priority alt=\"{{ alt() }}\" [ngSrc]=\"src()\" />\n} @else {\n <img fill alt=\"{{ alt() }}\" [ngSrc]=\"src()\" loading=\"lazy\" />\n}\n", styles: [":host{position:relative;aspect-ratio:1/1;overflow:hidden;display:inline-block;object-fit:inherit;width:inherit;height:inherit}img{width:inherit;height:inherit;max-width:100%;max-height:100%;display:inherit;aspect-ratio:inherit;z-index:inherit;object-fit:inherit;border-radius:inherit;border:inherit;background-color:inherit;-webkit-user-select:none;user-select:none;pointer-events:none}\n"] }]
1644
1623
  }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: true }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: true }] }], priority: [{ type: i0.Input, args: [{ isSignal: true, alias: "priority", required: false }] }] } });
1645
1624
 
1646
1625
  // Angular Imports
1647
- class CircleLoader {
1626
+ class CircleLoaderComponent {
1648
1627
  constructor() {
1649
1628
  this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
1650
1629
  this.background = input(false, { ...(ngDevMode ? { debugName: "background" } : {}), transform: booleanAttribute });
1651
1630
  this.radius = input(false, { ...(ngDevMode ? { debugName: "radius" } : {}), transform: booleanAttribute });
1652
1631
  this.minHeight = input('auto', ...(ngDevMode ? [{ debugName: "minHeight" }] : []));
1653
1632
  }
1654
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CircleLoader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1655
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: CircleLoader, isStandalone: true, selector: "gld-circle-loader", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article\n class=\"loader\"\n [class.loader--loading]=\"loading()\"\n [class.loader--background]=\"background()\"\n [class.loader--radius]=\"radius()\"\n [style.minHeight]=\"minHeight()\">\n <!-- Content -->\n <ng-content />\n\n <!-- Loader -->\n @if (loading()) {\n <section class=\"loader-loading\">\n <svg class=\"container\" viewBox=\"0 0 40 40\" height=\"40\" width=\"40\">\n <circle\n class=\"track\"\n cx=\"20\"\n cy=\"20\"\n r=\"17.5\"\n pathlength=\"100\"\n stroke-width=\"5px\"\n fill=\"none\" />\n <circle\n class=\"car\"\n cx=\"20\"\n cy=\"20\"\n r=\"17.5\"\n pathlength=\"100\"\n stroke-width=\"5px\"\n fill=\"none\" />\n </svg>\n </section>\n }\n</article>\n", styles: [":host{width:100%}.loader{--gld-color: var(--gld-foreground-color);--gld-background: light-dark( var(--gld-whitelight-transparent--080), var(--gld-darkblue-transparent--080) );position:relative;color:var(--color)}.loader--radius{border-radius:var(--gld-spacing--xxxs)}.loader-loading{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:1}.loader--background .loader-loading{background:var(--gld-background)}.container{--uib-size: 40px;--uib-color: var(--gld-orange);--uib-speed: .8s;--uib-bg-opacity: .1;width:var(--uib-size);height:var(--uib-size);transform-origin:center;animation:rotate var(--uib-speed) linear infinite;will-change:transform;overflow:visible}.car{fill:none;stroke:var(--uib-color);stroke-dasharray:25,75;stroke-dashoffset:0;stroke-linecap:round;transition:stroke .5s ease}.track{fill:none;stroke:var(--uib-color);opacity:var(--uib-bg-opacity);transition:stroke .5s ease}@keyframes rotate{to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1633
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CircleLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1634
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: CircleLoaderComponent, isStandalone: true, selector: "gld-circle-loader", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article\n class=\"loader\"\n [class.loader--loading]=\"loading()\"\n [class.loader--background]=\"background()\"\n [class.loader--radius]=\"radius()\"\n [style.minHeight]=\"minHeight()\">\n <!-- Content -->\n <ng-content />\n\n <!-- Loader -->\n @if (loading()) {\n <section class=\"loader-loading\">\n <svg class=\"container\" viewBox=\"0 0 40 40\" height=\"40\" width=\"40\">\n <circle\n class=\"track\"\n cx=\"20\"\n cy=\"20\"\n r=\"17.5\"\n pathlength=\"100\"\n stroke-width=\"5px\"\n fill=\"none\" />\n <circle\n class=\"car\"\n cx=\"20\"\n cy=\"20\"\n r=\"17.5\"\n pathlength=\"100\"\n stroke-width=\"5px\"\n fill=\"none\" />\n </svg>\n </section>\n }\n</article>\n", styles: [":host{width:100%}.loader{--gld-color: var(--gld-foreground-color);--gld-background: light-dark( var(--gld-whitelight-transparent--080), var(--gld-darkblue-transparent--080) );position:relative;color:var(--color)}.loader--radius{border-radius:var(--gld-spacing--xxxs)}.loader-loading{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:1}.loader--background .loader-loading{background:var(--gld-background)}.container{--uib-size: 40px;--uib-color: var(--gld-orange);--uib-speed: .8s;--uib-bg-opacity: .1;width:var(--uib-size);height:var(--uib-size);transform-origin:center;animation:rotate var(--uib-speed) linear infinite;will-change:transform;overflow:visible}.car{fill:none;stroke:var(--uib-color);stroke-dasharray:25,75;stroke-dashoffset:0;stroke-linecap:round;transition:stroke .5s ease}.track{fill:none;stroke:var(--uib-color);opacity:var(--uib-bg-opacity);transition:stroke .5s ease}@keyframes rotate{to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1656
1635
  }
1657
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CircleLoader, decorators: [{
1636
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CircleLoaderComponent, decorators: [{
1658
1637
  type: Component,
1659
1638
  args: [{ selector: 'gld-circle-loader', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article\n class=\"loader\"\n [class.loader--loading]=\"loading()\"\n [class.loader--background]=\"background()\"\n [class.loader--radius]=\"radius()\"\n [style.minHeight]=\"minHeight()\">\n <!-- Content -->\n <ng-content />\n\n <!-- Loader -->\n @if (loading()) {\n <section class=\"loader-loading\">\n <svg class=\"container\" viewBox=\"0 0 40 40\" height=\"40\" width=\"40\">\n <circle\n class=\"track\"\n cx=\"20\"\n cy=\"20\"\n r=\"17.5\"\n pathlength=\"100\"\n stroke-width=\"5px\"\n fill=\"none\" />\n <circle\n class=\"car\"\n cx=\"20\"\n cy=\"20\"\n r=\"17.5\"\n pathlength=\"100\"\n stroke-width=\"5px\"\n fill=\"none\" />\n </svg>\n </section>\n }\n</article>\n", styles: [":host{width:100%}.loader{--gld-color: var(--gld-foreground-color);--gld-background: light-dark( var(--gld-whitelight-transparent--080), var(--gld-darkblue-transparent--080) );position:relative;color:var(--color)}.loader--radius{border-radius:var(--gld-spacing--xxxs)}.loader-loading{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:1}.loader--background .loader-loading{background:var(--gld-background)}.container{--uib-size: 40px;--uib-color: var(--gld-orange);--uib-speed: .8s;--uib-bg-opacity: .1;width:var(--uib-size);height:var(--uib-size);transform-origin:center;animation:rotate var(--uib-speed) linear infinite;will-change:transform;overflow:visible}.car{fill:none;stroke:var(--uib-color);stroke-dasharray:25,75;stroke-dashoffset:0;stroke-linecap:round;transition:stroke .5s ease}.track{fill:none;stroke:var(--uib-color);opacity:var(--uib-bg-opacity);transition:stroke .5s ease}@keyframes rotate{to{transform:rotate(360deg)}}\n"] }]
1660
1639
  }], propDecorators: { loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }] } });
1661
1640
 
1662
1641
  // Angular Imports
1663
- const components = [DropdownButton, DropdownMenu, CircleLoader];
1664
- class Table {
1642
+ const components = [DropdownButtonComponent, DropdownMenuComponent, CircleLoaderComponent];
1643
+ class TableComponent {
1665
1644
  constructor() {
1666
- this.Icons = Icons;
1645
+ this.ICONS = ICONS;
1667
1646
  this.tableColumns = input.required(...(ngDevMode ? [{ debugName: "tableColumns" }] : []));
1668
1647
  this.emptyMessage = input('', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
1669
1648
  this.tableHeight = input('auto', ...(ngDevMode ? [{ debugName: "tableHeight" }] : []));
@@ -1698,6 +1677,7 @@ class Table {
1698
1677
  tableColumnStructures.map((column) => {
1699
1678
  structures.map((dataItem) => {
1700
1679
  // We check if the property we pass it exists within the object we receive
1680
+ // eslint-disable-next-line no-prototype-builtins
1701
1681
  if (dataItem?.hasOwnProperty(column.name)) {
1702
1682
  const propertyValue = dataItem[column.name];
1703
1683
  // We check if a column already exists in our array with the name of that property
@@ -1792,18 +1772,18 @@ class Table {
1792
1772
  return { ...previous, [current.name]: current.values[index] };
1793
1773
  }, {});
1794
1774
  }
1795
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1796
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: Table, isStandalone: true, selector: "gld-table", inputs: { tableColumns: { classPropertyName: "tableColumns", publicName: "tableColumns", isSignal: true, isRequired: true, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, tableHeight: { classPropertyName: "tableHeight", publicName: "tableHeight", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selects: { classPropertyName: "selects", publicName: "selects", isSignal: true, isRequired: false, transformFunction: null }, selectsAll: { classPropertyName: "selectsAll", publicName: "selectsAll", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tableColumnAction: "tableColumnAction" }, ngImport: i0, template: "<!-- Search -->\n@if (search()) {\n <section class=\"table-search\">\n <ng-content select=\"gld-table-search\" />\n </section>\n}\n\n<!-- Table -->\n<article\n class=\"table\"\n [class.table--empty]=\"!tableColumnsToShow().length\"\n [style.height]=\"tableHeight()\">\n <!-- Table Content -->\n <section\n class=\"table-content\"\n [class.table-content--actions]=\"tableColumnActions().length\"\n [class.table-content--selects]=\"selects()\">\n <!-- Loading -->\n @if (loading()) {\n <gld-circle-loader loading background minHeight=\"100px\" />\n } @else {\n <!-- Table Columns -->\n @for (tableColumn of tableColumnsToShow(); track tableColumn) {\n <section\n class=\"table-column\"\n [style.flexBasis]=\"tableColumn.width\"\n [style.flexShrink]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n [style.flexGrow]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n [style.minWidth]=\"tableColumn.minWidth\"\n [style.maxWidth]=\"tableColumn.maxWidth\">\n <section class=\"table-header\">\n <span class=\"table-header-ellipsis\">{{ tableColumn.label }}</span>\n </section>\n @for (value of tableColumn.values; track $index) {\n <section\n class=\"table-cell\"\n [style.justifyContent]=\"tableColumn.justify\"\n [style.textAlign]=\"tableColumn.justify\">\n @if (tableColumn.transform(value) !== undefined) {\n @switch (true) {\n @case (tableColumn.template !== undefined) {\n <ng-container\n [ngTemplateOutlet]=\"tableColumn.template\"\n [ngTemplateOutletContext]=\"{ value: tableColumn.transform(value) }\" />\n }\n @default {\n <span class=\"table-cell-ellipsis\">{{ tableColumn.transform(value) }}</span>\n }\n }\n } @else {\n <span>-</span>\n }\n </section>\n }\n </section>\n } @empty {\n <!-- Empty -->\n <section class=\"table-empty\">\n <p>{{ emptyMessage() ? emptyMessage() : 'We have not data to show yet!' }}</p>\n </section>\n }\n }\n </section>\n\n <!-- Table Actions -->\n @if ((tableColumnActions().length || selects()) && !loading() && tableColumnsToShow().length) {\n <section\n class=\"table-column\"\n [class.table-column--actions]=\"tableColumnActions().length\"\n [class.table-column--selects]=\"selects()\">\n <!-- Header -->\n <section\n class=\"table-header\"\n [class.table-header--actions]=\"tableColumnActions().length\"\n [class.table-header--selects]=\"selects()\">\n <!-- Select All Checkbox -->\n @if (selectsAll()) {\n <!-- <mat-checkbox\n color=\"primary\"\n matTooltip=\"Todo\"\n matTooltipClass=\"Tooltip\"\n class=\"Checkbox\"\n [checked]=\"\n dragAndDropColumnSelected().length === dragAndDropColumns().at(0)?.values?.length\n \"\n [indeterminate]=\"\n !!dragAndDropColumnSelected().length &&\n dragAndDropColumnSelected().length !== dragAndDropColumns().at(0)?.values?.length\n \"\n (change)=\"onSelectOrUnselectAll($event, dragAndDropColumns())\"\n /> -->\n }\n </section>\n @for (value of tableColumnsToShow().at(0)?.values; track $index; let index = $index) {\n <!-- Cell -->\n <section class=\"table-cell table-cell--actions\">\n <!-- Select Checkbox -->\n @if (selects()) {\n <!-- <mat-checkbox\n color=\"primary\"\n class=\"Checkbox\"\n matTooltip=\"Seleccionar\"\n matTooltipClass=\"Tooltip\"\n [checked]=\"isSelected(dragAndDropColumns(), index)\"\n (change)=\"onSelect($event, dragAndDropColumns(), index)\" /> -->\n }\n @if (tableColumnActions()) {\n <!-- Dropdown Menu -->\n <gld-dropdown-menu\n background\n id=\"more button of table cell\"\n name=\"more button of table cell\"\n type=\"iconButton\"\n color=\"blue\"\n iconSize=\"small\"\n direction=\"left\"\n [icon]=\"Icons.more2Fill\"\n (changeValue)=\"\n tableActionFunction({\n tableColumnActionAsEvent: $event,\n tableColumns: tableColumns(),\n index,\n })\n \">\n @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n <gld-dropdown-button\n [value]=\"tableColumnAction\"\n [icon]=\"tableColumnAction.icon\"\n iconSize=\"tiny\">\n {{ tableColumnAction.label }}\n </gld-dropdown-button>\n }\n </gld-dropdown-menu>\n <!-- <gld-icon-button\n background\n name=\"more button of table cell\"\n iconSize=\"small\"\n [icon]=\"Icons.more2Fill\"> -->\n <!-- <gld-tile color=\"blue-to-green\" class=\"Menu\">\n <section class=\"Menu-content\">\n @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n <button\n class=\"Menu-button {{ tableColumnAction?.classToHover ?? '' }}\"\n [class.Menu-button--hidden]=\"\n !tableColumnAction.showWhen(buildDataStructure({ index }))\n \"\n (click)=\"\n tableActionFunction({\n tableColumnAction,\n tableColumns: tableColumns(),\n index,\n })\n \">\n <gld-icon size=\"tiny\" [icon]=\"tableColumnAction.icon\" />\n <span class=\"Menu-button-ellipsis\">{{ tableColumnAction.label }}</span>\n </button>\n }\n </section>\n </gld-tile> -->\n <!-- </gld-icon-button> -->\n }\n </section>\n }\n </section>\n }\n</article>\n\n<!-- Pagination -->\n@if (pagination()) {\n <section class=\"table-pagination\">\n <ng-content select=\"gld-table-pagination\" />\n </section>\n}\n", styles: [":host{width:100%}.table{--gld-color: var(--gld-foreground-color);--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-border-radius: var(--gld-radius--xxs);--gld-background: var(--gld-background-color);--gld-column-actions-or-selects-width: 40px;--gld-column-actions-and-selects-width: 80px;--gld-header-height: 40px;--gld-cell-height: 40px;--gld-min-height: 100px;min-height:var(--gld-min-height);display:grid;grid-template-columns:1fr;position:relative;border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-border-radius);background:var(--gld-background);overflow:hidden}.table-content{display:flex;flex-wrap:nowrap}.table-header,.table-cell{color:var(--color);font-family:var(--gld-font--poppins);padding:var(--gld-spacing--xxs) var(--gld-spacing--s);border-bottom:var(--gld-border-size) solid var(--gld-border-color)}.table-header-ellipsis,.table-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.table-header-ellipsis--hover,.table-cell-ellipsis--hover{cursor:pointer}.table-header{display:flex;align-items:center;font:600 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins);height:var(--gld-header-height)}.table-header.table-header--actions,.table-header.table-header--selects{justify-content:center}.table-header.table-header--actions.table-header--selects{justify-content:flex-start}.table-header--actions{background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-header--actions:before{content:\"\";position:absolute;inset:0}.table-cell{display:flex;align-items:center;height:var(--gld-cell-height);font:400 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins)}.table-cell:last-of-type{margin-bottom:0;border-bottom:none}.table-cell.table-cell--actions,.table-cell.table-cell--selects{justify-content:center;padding:0}.table-cell--actions{position:relative;display:flex;justify-content:center;align-items:center;gap:var(--gld-spacing--xxxs);background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-column{flex:1 1 auto}.table-column--actions,.table-column--selects,.table-column--actions.table-column--selects{position:absolute;top:0;right:0}.table-column--actions.table-column--selects{width:var(--gld-column-actions-and-selects-width)}.table-column--actions,.table-column--selects{width:var(--gld-column-actions-or-selects-width)}.table-empty{width:100%;display:flex;color:var(--gld-color);padding:var(--gld-spacing--xs)}.table-empty p{font:400 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);text-transform:lowercase;margin:auto}.table-empty p:first-letter{text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropdownButton, selector: "gld-dropdown-button", inputs: ["value", "icon", "iconSize", "iconSpace", "moveTopToBottom", "moveLeftToRight", "direction"], outputs: ["changeValue"] }, { kind: "component", type: DropdownMenu, selector: "gld-dropdown-menu", inputs: ["id", "name", "type", "color", "size", "icon", "iconSize", "moveTopToBottom", "moveLeftToRight", "disabled", "full", "direction", "background", "selected", "initialValue"], outputs: ["changeValue", "changeFocus"] }, { kind: "component", type: CircleLoader, selector: "gld-circle-loader", inputs: ["loading", "background", "radius", "minHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1775
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1776
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TableComponent, isStandalone: true, selector: "gld-table", inputs: { tableColumns: { classPropertyName: "tableColumns", publicName: "tableColumns", isSignal: true, isRequired: true, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, tableHeight: { classPropertyName: "tableHeight", publicName: "tableHeight", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selects: { classPropertyName: "selects", publicName: "selects", isSignal: true, isRequired: false, transformFunction: null }, selectsAll: { classPropertyName: "selectsAll", publicName: "selectsAll", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tableColumnAction: "tableColumnAction" }, ngImport: i0, template: "<!-- Search -->\n@if (search()) {\n <section class=\"table-search\">\n <ng-content select=\"gld-table-search\" />\n </section>\n}\n\n<!-- Table -->\n<article\n class=\"table\"\n [class.table--empty]=\"!tableColumnsToShow().length\"\n [style.height]=\"tableHeight()\">\n <!-- Table Content -->\n <section\n class=\"table-content\"\n [class.table-content--actions]=\"tableColumnActions().length\"\n [class.table-content--selects]=\"selects()\">\n <!-- Loading -->\n @if (loading()) {\n <gld-circle-loader loading background minHeight=\"100px\" />\n } @else {\n <!-- Table Columns -->\n @for (tableColumn of tableColumnsToShow(); track tableColumn) {\n <section\n class=\"table-column\"\n [style.flexBasis]=\"tableColumn.width\"\n [style.flexShrink]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n [style.flexGrow]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n [style.minWidth]=\"tableColumn.minWidth\"\n [style.maxWidth]=\"tableColumn.maxWidth\">\n <section class=\"table-header\">\n <span class=\"table-header-ellipsis\">{{ tableColumn.label }}</span>\n </section>\n @for (value of tableColumn.values; track $index) {\n <section\n class=\"table-cell\"\n [style.justifyContent]=\"tableColumn.justify\"\n [style.textAlign]=\"tableColumn.justify\">\n @if (tableColumn.transform(value) !== undefined) {\n @switch (true) {\n @case (tableColumn.template !== undefined) {\n <ng-container\n [ngTemplateOutlet]=\"tableColumn.template\"\n [ngTemplateOutletContext]=\"{ value: tableColumn.transform(value) }\" />\n }\n @default {\n <span class=\"table-cell-ellipsis\">{{ tableColumn.transform(value) }}</span>\n }\n }\n } @else {\n <span>-</span>\n }\n </section>\n }\n </section>\n } @empty {\n <!-- Empty -->\n <section class=\"table-empty\">\n <p>{{ emptyMessage() ? emptyMessage() : 'We have not data to show yet!' }}</p>\n </section>\n }\n }\n </section>\n\n <!-- Table Actions -->\n @if ((tableColumnActions().length || selects()) && !loading() && tableColumnsToShow().length) {\n <section\n class=\"table-column\"\n [class.table-column--actions]=\"tableColumnActions().length\"\n [class.table-column--selects]=\"selects()\">\n <!-- Header -->\n <section\n class=\"table-header\"\n [class.table-header--actions]=\"tableColumnActions().length\"\n [class.table-header--selects]=\"selects()\">\n <!-- Select All Checkbox -->\n @if (selectsAll()) {\n <!-- <mat-checkbox\n color=\"primary\"\n matTooltip=\"Todo\"\n matTooltipClass=\"Tooltip\"\n class=\"Checkbox\"\n [checked]=\"\n dragAndDropColumnSelected().length === dragAndDropColumns().at(0)?.values?.length\n \"\n [indeterminate]=\"\n !!dragAndDropColumnSelected().length &&\n dragAndDropColumnSelected().length !== dragAndDropColumns().at(0)?.values?.length\n \"\n (change)=\"onSelectOrUnselectAll($event, dragAndDropColumns())\"\n /> -->\n }\n </section>\n @for (value of tableColumnsToShow().at(0)?.values; track $index; let index = $index) {\n <!-- Cell -->\n <section class=\"table-cell table-cell--actions\">\n <!-- Select Checkbox -->\n @if (selects()) {\n <!-- <mat-checkbox\n color=\"primary\"\n class=\"Checkbox\"\n matTooltip=\"Seleccionar\"\n matTooltipClass=\"Tooltip\"\n [checked]=\"isSelected(dragAndDropColumns(), index)\"\n (change)=\"onSelect($event, dragAndDropColumns(), index)\" /> -->\n }\n @if (tableColumnActions()) {\n <!-- Dropdown Menu -->\n <gld-dropdown-menu\n background\n id=\"more button of table cell\"\n name=\"more button of table cell\"\n type=\"iconButton\"\n color=\"blue\"\n iconSize=\"small\"\n direction=\"left\"\n [icon]=\"ICONS.more2Fill\"\n (changeValue)=\"\n tableActionFunction({\n tableColumnActionAsEvent: $event,\n tableColumns: tableColumns(),\n index,\n })\n \">\n @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n <gld-dropdown-button\n [value]=\"tableColumnAction\"\n [icon]=\"tableColumnAction.icon\"\n iconSize=\"tiny\">\n {{ tableColumnAction.label }}\n </gld-dropdown-button>\n }\n </gld-dropdown-menu>\n <!-- <gld-icon-button\n background\n name=\"more button of table cell\"\n iconSize=\"small\"\n [icon]=\"ICONS.more2Fill\"> -->\n <!-- <gld-tile color=\"blue-to-green\" class=\"Menu\">\n <section class=\"Menu-content\">\n @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n <button\n class=\"Menu-button {{ tableColumnAction?.classToHover ?? '' }}\"\n [class.Menu-button--hidden]=\"\n !tableColumnAction.showWhen(buildDataStructure({ index }))\n \"\n (click)=\"\n tableActionFunction({\n tableColumnAction,\n tableColumns: tableColumns(),\n index,\n })\n \">\n <gld-icon size=\"tiny\" [icon]=\"tableColumnAction.icon\" />\n <span class=\"Menu-button-ellipsis\">{{ tableColumnAction.label }}</span>\n </button>\n }\n </section>\n </gld-tile> -->\n <!-- </gld-icon-button> -->\n }\n </section>\n }\n </section>\n }\n</article>\n\n<!-- Pagination -->\n@if (pagination()) {\n <section class=\"table-pagination\">\n <ng-content select=\"gld-table-pagination\" />\n </section>\n}\n", styles: [":host{width:100%}.table{--gld-color: var(--gld-foreground-color);--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-border-radius: var(--gld-radius--xxs);--gld-background: var(--gld-background-color);--gld-column-actions-or-selects-width: 40px;--gld-column-actions-and-selects-width: 80px;--gld-header-height: 40px;--gld-cell-height: 40px;--gld-min-height: 100px;min-height:var(--gld-min-height);display:grid;grid-template-columns:1fr;position:relative;border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-border-radius);background:var(--gld-background);overflow:hidden}.table-content{display:flex;flex-wrap:nowrap}.table-header,.table-cell{color:var(--color);font-family:var(--gld-font--poppins);padding:var(--gld-spacing--xxs) var(--gld-spacing--s);border-bottom:var(--gld-border-size) solid var(--gld-border-color)}.table-header-ellipsis,.table-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.table-header-ellipsis--hover,.table-cell-ellipsis--hover{cursor:pointer}.table-header{display:flex;align-items:center;font:600 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins);height:var(--gld-header-height)}.table-header.table-header--actions,.table-header.table-header--selects{justify-content:center}.table-header.table-header--actions.table-header--selects{justify-content:flex-start}.table-header--actions{background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-header--actions:before{content:\"\";position:absolute;inset:0}.table-cell{display:flex;align-items:center;height:var(--gld-cell-height);font:400 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins)}.table-cell:last-of-type{margin-bottom:0;border-bottom:none}.table-cell.table-cell--actions,.table-cell.table-cell--selects{justify-content:center;padding:0}.table-cell--actions{position:relative;display:flex;justify-content:center;align-items:center;gap:var(--gld-spacing--xxxs);background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-column{flex:1 1 auto}.table-column--actions,.table-column--selects,.table-column--actions.table-column--selects{position:absolute;top:0;right:0}.table-column--actions.table-column--selects{width:var(--gld-column-actions-and-selects-width)}.table-column--actions,.table-column--selects{width:var(--gld-column-actions-or-selects-width)}.table-empty{width:100%;display:flex;color:var(--gld-color);padding:var(--gld-spacing--xs)}.table-empty p{font:400 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);text-transform:lowercase;margin:auto}.table-empty p:first-letter{text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropdownButtonComponent, selector: "gld-dropdown-button", inputs: ["value", "icon", "iconSize", "iconSpace", "moveTopToBottom", "moveLeftToRight", "direction"], outputs: ["changeValue"] }, { kind: "component", type: DropdownMenuComponent, selector: "gld-dropdown-menu", inputs: ["id", "name", "type", "color", "size", "icon", "iconSize", "moveTopToBottom", "moveLeftToRight", "disabled", "full", "direction", "background", "selected", "initialValue"], outputs: ["changeValue", "changeFocus"] }, { kind: "component", type: CircleLoaderComponent, selector: "gld-circle-loader", inputs: ["loading", "background", "radius", "minHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1797
1777
  }
1798
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Table, decorators: [{
1778
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableComponent, decorators: [{
1799
1779
  type: Component,
1800
- args: [{ selector: 'gld-table', imports: [NgTemplateOutlet, ...components], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Search -->\n@if (search()) {\n <section class=\"table-search\">\n <ng-content select=\"gld-table-search\" />\n </section>\n}\n\n<!-- Table -->\n<article\n class=\"table\"\n [class.table--empty]=\"!tableColumnsToShow().length\"\n [style.height]=\"tableHeight()\">\n <!-- Table Content -->\n <section\n class=\"table-content\"\n [class.table-content--actions]=\"tableColumnActions().length\"\n [class.table-content--selects]=\"selects()\">\n <!-- Loading -->\n @if (loading()) {\n <gld-circle-loader loading background minHeight=\"100px\" />\n } @else {\n <!-- Table Columns -->\n @for (tableColumn of tableColumnsToShow(); track tableColumn) {\n <section\n class=\"table-column\"\n [style.flexBasis]=\"tableColumn.width\"\n [style.flexShrink]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n [style.flexGrow]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n [style.minWidth]=\"tableColumn.minWidth\"\n [style.maxWidth]=\"tableColumn.maxWidth\">\n <section class=\"table-header\">\n <span class=\"table-header-ellipsis\">{{ tableColumn.label }}</span>\n </section>\n @for (value of tableColumn.values; track $index) {\n <section\n class=\"table-cell\"\n [style.justifyContent]=\"tableColumn.justify\"\n [style.textAlign]=\"tableColumn.justify\">\n @if (tableColumn.transform(value) !== undefined) {\n @switch (true) {\n @case (tableColumn.template !== undefined) {\n <ng-container\n [ngTemplateOutlet]=\"tableColumn.template\"\n [ngTemplateOutletContext]=\"{ value: tableColumn.transform(value) }\" />\n }\n @default {\n <span class=\"table-cell-ellipsis\">{{ tableColumn.transform(value) }}</span>\n }\n }\n } @else {\n <span>-</span>\n }\n </section>\n }\n </section>\n } @empty {\n <!-- Empty -->\n <section class=\"table-empty\">\n <p>{{ emptyMessage() ? emptyMessage() : 'We have not data to show yet!' }}</p>\n </section>\n }\n }\n </section>\n\n <!-- Table Actions -->\n @if ((tableColumnActions().length || selects()) && !loading() && tableColumnsToShow().length) {\n <section\n class=\"table-column\"\n [class.table-column--actions]=\"tableColumnActions().length\"\n [class.table-column--selects]=\"selects()\">\n <!-- Header -->\n <section\n class=\"table-header\"\n [class.table-header--actions]=\"tableColumnActions().length\"\n [class.table-header--selects]=\"selects()\">\n <!-- Select All Checkbox -->\n @if (selectsAll()) {\n <!-- <mat-checkbox\n color=\"primary\"\n matTooltip=\"Todo\"\n matTooltipClass=\"Tooltip\"\n class=\"Checkbox\"\n [checked]=\"\n dragAndDropColumnSelected().length === dragAndDropColumns().at(0)?.values?.length\n \"\n [indeterminate]=\"\n !!dragAndDropColumnSelected().length &&\n dragAndDropColumnSelected().length !== dragAndDropColumns().at(0)?.values?.length\n \"\n (change)=\"onSelectOrUnselectAll($event, dragAndDropColumns())\"\n /> -->\n }\n </section>\n @for (value of tableColumnsToShow().at(0)?.values; track $index; let index = $index) {\n <!-- Cell -->\n <section class=\"table-cell table-cell--actions\">\n <!-- Select Checkbox -->\n @if (selects()) {\n <!-- <mat-checkbox\n color=\"primary\"\n class=\"Checkbox\"\n matTooltip=\"Seleccionar\"\n matTooltipClass=\"Tooltip\"\n [checked]=\"isSelected(dragAndDropColumns(), index)\"\n (change)=\"onSelect($event, dragAndDropColumns(), index)\" /> -->\n }\n @if (tableColumnActions()) {\n <!-- Dropdown Menu -->\n <gld-dropdown-menu\n background\n id=\"more button of table cell\"\n name=\"more button of table cell\"\n type=\"iconButton\"\n color=\"blue\"\n iconSize=\"small\"\n direction=\"left\"\n [icon]=\"Icons.more2Fill\"\n (changeValue)=\"\n tableActionFunction({\n tableColumnActionAsEvent: $event,\n tableColumns: tableColumns(),\n index,\n })\n \">\n @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n <gld-dropdown-button\n [value]=\"tableColumnAction\"\n [icon]=\"tableColumnAction.icon\"\n iconSize=\"tiny\">\n {{ tableColumnAction.label }}\n </gld-dropdown-button>\n }\n </gld-dropdown-menu>\n <!-- <gld-icon-button\n background\n name=\"more button of table cell\"\n iconSize=\"small\"\n [icon]=\"Icons.more2Fill\"> -->\n <!-- <gld-tile color=\"blue-to-green\" class=\"Menu\">\n <section class=\"Menu-content\">\n @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n <button\n class=\"Menu-button {{ tableColumnAction?.classToHover ?? '' }}\"\n [class.Menu-button--hidden]=\"\n !tableColumnAction.showWhen(buildDataStructure({ index }))\n \"\n (click)=\"\n tableActionFunction({\n tableColumnAction,\n tableColumns: tableColumns(),\n index,\n })\n \">\n <gld-icon size=\"tiny\" [icon]=\"tableColumnAction.icon\" />\n <span class=\"Menu-button-ellipsis\">{{ tableColumnAction.label }}</span>\n </button>\n }\n </section>\n </gld-tile> -->\n <!-- </gld-icon-button> -->\n }\n </section>\n }\n </section>\n }\n</article>\n\n<!-- Pagination -->\n@if (pagination()) {\n <section class=\"table-pagination\">\n <ng-content select=\"gld-table-pagination\" />\n </section>\n}\n", styles: [":host{width:100%}.table{--gld-color: var(--gld-foreground-color);--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-border-radius: var(--gld-radius--xxs);--gld-background: var(--gld-background-color);--gld-column-actions-or-selects-width: 40px;--gld-column-actions-and-selects-width: 80px;--gld-header-height: 40px;--gld-cell-height: 40px;--gld-min-height: 100px;min-height:var(--gld-min-height);display:grid;grid-template-columns:1fr;position:relative;border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-border-radius);background:var(--gld-background);overflow:hidden}.table-content{display:flex;flex-wrap:nowrap}.table-header,.table-cell{color:var(--color);font-family:var(--gld-font--poppins);padding:var(--gld-spacing--xxs) var(--gld-spacing--s);border-bottom:var(--gld-border-size) solid var(--gld-border-color)}.table-header-ellipsis,.table-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.table-header-ellipsis--hover,.table-cell-ellipsis--hover{cursor:pointer}.table-header{display:flex;align-items:center;font:600 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins);height:var(--gld-header-height)}.table-header.table-header--actions,.table-header.table-header--selects{justify-content:center}.table-header.table-header--actions.table-header--selects{justify-content:flex-start}.table-header--actions{background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-header--actions:before{content:\"\";position:absolute;inset:0}.table-cell{display:flex;align-items:center;height:var(--gld-cell-height);font:400 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins)}.table-cell:last-of-type{margin-bottom:0;border-bottom:none}.table-cell.table-cell--actions,.table-cell.table-cell--selects{justify-content:center;padding:0}.table-cell--actions{position:relative;display:flex;justify-content:center;align-items:center;gap:var(--gld-spacing--xxxs);background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-column{flex:1 1 auto}.table-column--actions,.table-column--selects,.table-column--actions.table-column--selects{position:absolute;top:0;right:0}.table-column--actions.table-column--selects{width:var(--gld-column-actions-and-selects-width)}.table-column--actions,.table-column--selects{width:var(--gld-column-actions-or-selects-width)}.table-empty{width:100%;display:flex;color:var(--gld-color);padding:var(--gld-spacing--xs)}.table-empty p{font:400 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);text-transform:lowercase;margin:auto}.table-empty p:first-letter{text-transform:uppercase}\n"] }]
1780
+ args: [{ selector: 'gld-table', imports: [NgTemplateOutlet, ...components], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Search -->\n@if (search()) {\n <section class=\"table-search\">\n <ng-content select=\"gld-table-search\" />\n </section>\n}\n\n<!-- Table -->\n<article\n class=\"table\"\n [class.table--empty]=\"!tableColumnsToShow().length\"\n [style.height]=\"tableHeight()\">\n <!-- Table Content -->\n <section\n class=\"table-content\"\n [class.table-content--actions]=\"tableColumnActions().length\"\n [class.table-content--selects]=\"selects()\">\n <!-- Loading -->\n @if (loading()) {\n <gld-circle-loader loading background minHeight=\"100px\" />\n } @else {\n <!-- Table Columns -->\n @for (tableColumn of tableColumnsToShow(); track tableColumn) {\n <section\n class=\"table-column\"\n [style.flexBasis]=\"tableColumn.width\"\n [style.flexShrink]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n [style.flexGrow]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n [style.minWidth]=\"tableColumn.minWidth\"\n [style.maxWidth]=\"tableColumn.maxWidth\">\n <section class=\"table-header\">\n <span class=\"table-header-ellipsis\">{{ tableColumn.label }}</span>\n </section>\n @for (value of tableColumn.values; track $index) {\n <section\n class=\"table-cell\"\n [style.justifyContent]=\"tableColumn.justify\"\n [style.textAlign]=\"tableColumn.justify\">\n @if (tableColumn.transform(value) !== undefined) {\n @switch (true) {\n @case (tableColumn.template !== undefined) {\n <ng-container\n [ngTemplateOutlet]=\"tableColumn.template\"\n [ngTemplateOutletContext]=\"{ value: tableColumn.transform(value) }\" />\n }\n @default {\n <span class=\"table-cell-ellipsis\">{{ tableColumn.transform(value) }}</span>\n }\n }\n } @else {\n <span>-</span>\n }\n </section>\n }\n </section>\n } @empty {\n <!-- Empty -->\n <section class=\"table-empty\">\n <p>{{ emptyMessage() ? emptyMessage() : 'We have not data to show yet!' }}</p>\n </section>\n }\n }\n </section>\n\n <!-- Table Actions -->\n @if ((tableColumnActions().length || selects()) && !loading() && tableColumnsToShow().length) {\n <section\n class=\"table-column\"\n [class.table-column--actions]=\"tableColumnActions().length\"\n [class.table-column--selects]=\"selects()\">\n <!-- Header -->\n <section\n class=\"table-header\"\n [class.table-header--actions]=\"tableColumnActions().length\"\n [class.table-header--selects]=\"selects()\">\n <!-- Select All Checkbox -->\n @if (selectsAll()) {\n <!-- <mat-checkbox\n color=\"primary\"\n matTooltip=\"Todo\"\n matTooltipClass=\"Tooltip\"\n class=\"Checkbox\"\n [checked]=\"\n dragAndDropColumnSelected().length === dragAndDropColumns().at(0)?.values?.length\n \"\n [indeterminate]=\"\n !!dragAndDropColumnSelected().length &&\n dragAndDropColumnSelected().length !== dragAndDropColumns().at(0)?.values?.length\n \"\n (change)=\"onSelectOrUnselectAll($event, dragAndDropColumns())\"\n /> -->\n }\n </section>\n @for (value of tableColumnsToShow().at(0)?.values; track $index; let index = $index) {\n <!-- Cell -->\n <section class=\"table-cell table-cell--actions\">\n <!-- Select Checkbox -->\n @if (selects()) {\n <!-- <mat-checkbox\n color=\"primary\"\n class=\"Checkbox\"\n matTooltip=\"Seleccionar\"\n matTooltipClass=\"Tooltip\"\n [checked]=\"isSelected(dragAndDropColumns(), index)\"\n (change)=\"onSelect($event, dragAndDropColumns(), index)\" /> -->\n }\n @if (tableColumnActions()) {\n <!-- Dropdown Menu -->\n <gld-dropdown-menu\n background\n id=\"more button of table cell\"\n name=\"more button of table cell\"\n type=\"iconButton\"\n color=\"blue\"\n iconSize=\"small\"\n direction=\"left\"\n [icon]=\"ICONS.more2Fill\"\n (changeValue)=\"\n tableActionFunction({\n tableColumnActionAsEvent: $event,\n tableColumns: tableColumns(),\n index,\n })\n \">\n @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n <gld-dropdown-button\n [value]=\"tableColumnAction\"\n [icon]=\"tableColumnAction.icon\"\n iconSize=\"tiny\">\n {{ tableColumnAction.label }}\n </gld-dropdown-button>\n }\n </gld-dropdown-menu>\n <!-- <gld-icon-button\n background\n name=\"more button of table cell\"\n iconSize=\"small\"\n [icon]=\"ICONS.more2Fill\"> -->\n <!-- <gld-tile color=\"blue-to-green\" class=\"Menu\">\n <section class=\"Menu-content\">\n @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n <button\n class=\"Menu-button {{ tableColumnAction?.classToHover ?? '' }}\"\n [class.Menu-button--hidden]=\"\n !tableColumnAction.showWhen(buildDataStructure({ index }))\n \"\n (click)=\"\n tableActionFunction({\n tableColumnAction,\n tableColumns: tableColumns(),\n index,\n })\n \">\n <gld-icon size=\"tiny\" [icon]=\"tableColumnAction.icon\" />\n <span class=\"Menu-button-ellipsis\">{{ tableColumnAction.label }}</span>\n </button>\n }\n </section>\n </gld-tile> -->\n <!-- </gld-icon-button> -->\n }\n </section>\n }\n </section>\n }\n</article>\n\n<!-- Pagination -->\n@if (pagination()) {\n <section class=\"table-pagination\">\n <ng-content select=\"gld-table-pagination\" />\n </section>\n}\n", styles: [":host{width:100%}.table{--gld-color: var(--gld-foreground-color);--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-border-radius: var(--gld-radius--xxs);--gld-background: var(--gld-background-color);--gld-column-actions-or-selects-width: 40px;--gld-column-actions-and-selects-width: 80px;--gld-header-height: 40px;--gld-cell-height: 40px;--gld-min-height: 100px;min-height:var(--gld-min-height);display:grid;grid-template-columns:1fr;position:relative;border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-border-radius);background:var(--gld-background);overflow:hidden}.table-content{display:flex;flex-wrap:nowrap}.table-header,.table-cell{color:var(--color);font-family:var(--gld-font--poppins);padding:var(--gld-spacing--xxs) var(--gld-spacing--s);border-bottom:var(--gld-border-size) solid var(--gld-border-color)}.table-header-ellipsis,.table-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.table-header-ellipsis--hover,.table-cell-ellipsis--hover{cursor:pointer}.table-header{display:flex;align-items:center;font:600 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins);height:var(--gld-header-height)}.table-header.table-header--actions,.table-header.table-header--selects{justify-content:center}.table-header.table-header--actions.table-header--selects{justify-content:flex-start}.table-header--actions{background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-header--actions:before{content:\"\";position:absolute;inset:0}.table-cell{display:flex;align-items:center;height:var(--gld-cell-height);font:400 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins)}.table-cell:last-of-type{margin-bottom:0;border-bottom:none}.table-cell.table-cell--actions,.table-cell.table-cell--selects{justify-content:center;padding:0}.table-cell--actions{position:relative;display:flex;justify-content:center;align-items:center;gap:var(--gld-spacing--xxxs);background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-column{flex:1 1 auto}.table-column--actions,.table-column--selects,.table-column--actions.table-column--selects{position:absolute;top:0;right:0}.table-column--actions.table-column--selects{width:var(--gld-column-actions-and-selects-width)}.table-column--actions,.table-column--selects{width:var(--gld-column-actions-or-selects-width)}.table-empty{width:100%;display:flex;color:var(--gld-color);padding:var(--gld-spacing--xs)}.table-empty p{font:400 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);text-transform:lowercase;margin:auto}.table-empty p:first-letter{text-transform:uppercase}\n"] }]
1801
1781
  }], propDecorators: { tableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableColumns", required: true }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], tableHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableHeight", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], selects: [{ type: i0.Input, args: [{ isSignal: true, alias: "selects", required: false }] }], selectsAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectsAll", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }], tableColumnAction: [{ type: i0.Output, args: ["tableColumnAction"] }] } });
1802
1782
 
1803
1783
  // Angular Imports
1804
- class TablePagination {
1784
+ class TablePaginationComponent {
1805
1785
  constructor() {
1806
- this.Icons = Icons;
1786
+ this.Icons = ICONS;
1807
1787
  this.pagination = input.required(...(ngDevMode ? [{ debugName: "pagination" }] : []));
1808
1788
  this.page = output();
1809
1789
  this.changeToNext = output();
@@ -1840,20 +1820,20 @@ class TablePagination {
1840
1820
  }
1841
1821
  this.changeToPrevious.emit(this.currentPage());
1842
1822
  }
1843
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TablePagination, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1844
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: TablePagination, isStandalone: true, selector: "gld-table-pagination", inputs: { pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { page: "page", changeToNext: "changeToNext", changeToPrevious: "changeToPrevious" }, ngImport: i0, template: "<article class=\"Pagination\">\n <section class=\"Pagination-info\">\n <p class=\"Pagination-label\">P\u00E1gina {{ currentPage() }} de {{ maxPages() }}</p>\n </section>\n <section class=\"Pagination-actions\">\n <!-- <gld-icon-button\n class=\"\"\n name=\"button-next\"\n iconSize=\"small\"\n [icon]=\"Icons.arrowLeftSLine\"\n (clicked)=\"previousPage()\" />\n <gld-icon-button\n class=\"\"\n name=\"button-previous\"\n iconSize=\"small\"\n [icon]=\"Icons.arrowRightSLine\"\n (clicked)=\"nextPage()\" /> -->\n </section>\n</article>\n", styles: [".Pagination{--color: var(--darkblue);--height: 40px;display:flex;justify-content:space-between;align-items:center;gap:var(--spacing--s);margin:var(--spacing--s) 0;height:var(--height);padding-left:var(--spacing--s)}.Pagination.Theme--dark{--color: var(--whitelight)}.Pagination-label{margin:0;font:600 var(--font-size--normal) var(--font--poppins);color:var(--color)}.Pagination-actions{display:flex;gap:var(--spacing--xxxs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1823
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TablePaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1824
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: TablePaginationComponent, isStandalone: true, selector: "gld-table-pagination", inputs: { pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { page: "page", changeToNext: "changeToNext", changeToPrevious: "changeToPrevious" }, ngImport: i0, template: "<article class=\"Pagination\">\n <section class=\"Pagination-info\">\n <p class=\"Pagination-label\">P\u00E1gina {{ currentPage() }} de {{ maxPages() }}</p>\n </section>\n <section class=\"Pagination-actions\">\n <!-- <gld-icon-button\n class=\"\"\n name=\"button-next\"\n iconSize=\"small\"\n [icon]=\"Icons.arrowLeftSLine\"\n (clicked)=\"previousPage()\" />\n <gld-icon-button\n class=\"\"\n name=\"button-previous\"\n iconSize=\"small\"\n [icon]=\"Icons.arrowRightSLine\"\n (clicked)=\"nextPage()\" /> -->\n </section>\n</article>\n", styles: [".Pagination{--color: var(--darkblue);--height: 40px;display:flex;justify-content:space-between;align-items:center;gap:var(--spacing--s);margin:var(--spacing--s) 0;height:var(--height);padding-left:var(--spacing--s)}.Pagination.Theme--dark{--color: var(--whitelight)}.Pagination-label{margin:0;font:600 var(--font-size--normal) var(--font--poppins);color:var(--color)}.Pagination-actions{display:flex;gap:var(--spacing--xxxs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1845
1825
  }
1846
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TablePagination, decorators: [{
1826
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TablePaginationComponent, decorators: [{
1847
1827
  type: Component,
1848
1828
  args: [{ selector: 'gld-table-pagination', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"Pagination\">\n <section class=\"Pagination-info\">\n <p class=\"Pagination-label\">P\u00E1gina {{ currentPage() }} de {{ maxPages() }}</p>\n </section>\n <section class=\"Pagination-actions\">\n <!-- <gld-icon-button\n class=\"\"\n name=\"button-next\"\n iconSize=\"small\"\n [icon]=\"Icons.arrowLeftSLine\"\n (clicked)=\"previousPage()\" />\n <gld-icon-button\n class=\"\"\n name=\"button-previous\"\n iconSize=\"small\"\n [icon]=\"Icons.arrowRightSLine\"\n (clicked)=\"nextPage()\" /> -->\n </section>\n</article>\n", styles: [".Pagination{--color: var(--darkblue);--height: 40px;display:flex;justify-content:space-between;align-items:center;gap:var(--spacing--s);margin:var(--spacing--s) 0;height:var(--height);padding-left:var(--spacing--s)}.Pagination.Theme--dark{--color: var(--whitelight)}.Pagination-label{margin:0;font:600 var(--font-size--normal) var(--font--poppins);color:var(--color)}.Pagination-actions{display:flex;gap:var(--spacing--xxxs)}\n"] }]
1849
1829
  }], ctorParameters: () => [], propDecorators: { pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: true }] }], page: [{ type: i0.Output, args: ["page"] }], changeToNext: [{ type: i0.Output, args: ["changeToNext"] }], changeToPrevious: [{ type: i0.Output, args: ["changeToPrevious"] }] } });
1850
1830
 
1851
1831
  // Angular Imports
1852
- class TableSearch {
1832
+ class TableSearchComponent {
1853
1833
  #formBuilder;
1854
1834
  constructor() {
1855
1835
  this.#formBuilder = inject(FormBuilder);
1856
- this.Icons = Icons;
1836
+ this.ICONS = ICONS;
1857
1837
  this.placeholder = input('buscar', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
1858
1838
  this.width = input('auto', ...(ngDevMode ? [{ debugName: "width" }] : []));
1859
1839
  this.debounceTime = input(250, ...(ngDevMode ? [{ debugName: "debounceTime" }] : []));
@@ -1863,8 +1843,8 @@ class TableSearch {
1863
1843
  .pipe(debounceTime(this.debounceTime()))
1864
1844
  .subscribe((value) => {
1865
1845
  const action = value?.length
1866
- ? TableSearchAction.searching
1867
- : TableSearchAction.cleared;
1846
+ ? TABLE_SEARCH_ACTIONS.searching
1847
+ : TABLE_SEARCH_ACTIONS.cleared;
1868
1848
  const searching = value?.length ? value : '';
1869
1849
  this.searching.emit({
1870
1850
  action,
@@ -1872,26 +1852,26 @@ class TableSearch {
1872
1852
  });
1873
1853
  });
1874
1854
  }
1875
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableSearch, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1876
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: TableSearch, isStandalone: true, selector: "gld-table-search", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searching: "searching" }, ngImport: i0, template: "<article class=\"Search\">\n <section class=\"Input\" [style.width]=\"width()\">\n <!-- <gld-icon [icon]=\"Icons.search2Line\" /> -->\n\n <input\n id=\"search\"\n name=\"search\"\n type=\"search\"\n [placeholder]=\"placeholder()\"\n [formControl]=\"control\" />\n </section>\n</article>\n", styles: [".Search{margin-bottom:24px}.Input{--radius: 100px;--background: var(--whitelight);--color: var(--darkblue);--placeholder-color: var(--gray);--border-color: var(--gray);--outline-color: var(--blue);--label-color: var(--darkblue);--height: 40px;--min-with: 350px;--icon-size: 20px;--animation-time: var(--animation-time--150);position:relative}.Input input{position:relative;width:100%;min-width:var(--min-with);height:var(--height);padding:12px 24px 12px calc(24px + var(--icon-size) + 12px);font-size:16px;font-family:inherit;color:var(--color);background:var(--background);border:1px solid var(--border-color);border-radius:var(--radius)}.Input input:focus{outline-color:var(--outline-color)}.Input input::placeholder{color:var(--color)}.Input gld-icon{position:absolute;left:24px;top:calc(50% - 11px);z-index:1;color:var(--border-color)}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1855
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1856
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: TableSearchComponent, isStandalone: true, selector: "gld-table-search", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searching: "searching" }, ngImport: i0, template: "<article class=\"Search\">\n <section class=\"Input\" [style.width]=\"width()\">\n <!-- <gld-icon [icon]=\"ICONS.search2Line\" /> -->\n\n <input\n id=\"search\"\n name=\"search\"\n type=\"search\"\n [placeholder]=\"placeholder()\"\n [formControl]=\"control\" />\n </section>\n</article>\n", styles: [".Search{margin-bottom:24px}.Input{--radius: 100px;--background: var(--whitelight);--color: var(--darkblue);--placeholder-color: var(--gray);--border-color: var(--gray);--outline-color: var(--blue);--label-color: var(--darkblue);--height: 40px;--min-with: 350px;--icon-size: 20px;--animation-time: var(--animation-time--150);position:relative}.Input input{position:relative;width:100%;min-width:var(--min-with);height:var(--height);padding:12px 24px 12px calc(24px + var(--icon-size) + 12px);font-size:16px;font-family:inherit;color:var(--color);background:var(--background);border:1px solid var(--border-color);border-radius:var(--radius)}.Input input:focus{outline-color:var(--outline-color)}.Input input::placeholder{color:var(--color)}.Input gld-icon{position:absolute;left:24px;top:calc(50% - 11px);z-index:1;color:var(--border-color)}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1877
1857
  }
1878
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableSearch, decorators: [{
1858
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableSearchComponent, decorators: [{
1879
1859
  type: Component,
1880
- args: [{ selector: 'gld-table-search', imports: [ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"Search\">\n <section class=\"Input\" [style.width]=\"width()\">\n <!-- <gld-icon [icon]=\"Icons.search2Line\" /> -->\n\n <input\n id=\"search\"\n name=\"search\"\n type=\"search\"\n [placeholder]=\"placeholder()\"\n [formControl]=\"control\" />\n </section>\n</article>\n", styles: [".Search{margin-bottom:24px}.Input{--radius: 100px;--background: var(--whitelight);--color: var(--darkblue);--placeholder-color: var(--gray);--border-color: var(--gray);--outline-color: var(--blue);--label-color: var(--darkblue);--height: 40px;--min-with: 350px;--icon-size: 20px;--animation-time: var(--animation-time--150);position:relative}.Input input{position:relative;width:100%;min-width:var(--min-with);height:var(--height);padding:12px 24px 12px calc(24px + var(--icon-size) + 12px);font-size:16px;font-family:inherit;color:var(--color);background:var(--background);border:1px solid var(--border-color);border-radius:var(--radius)}.Input input:focus{outline-color:var(--outline-color)}.Input input::placeholder{color:var(--color)}.Input gld-icon{position:absolute;left:24px;top:calc(50% - 11px);z-index:1;color:var(--border-color)}\n"] }]
1860
+ args: [{ selector: 'gld-table-search', imports: [ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"Search\">\n <section class=\"Input\" [style.width]=\"width()\">\n <!-- <gld-icon [icon]=\"ICONS.search2Line\" /> -->\n\n <input\n id=\"search\"\n name=\"search\"\n type=\"search\"\n [placeholder]=\"placeholder()\"\n [formControl]=\"control\" />\n </section>\n</article>\n", styles: [".Search{margin-bottom:24px}.Input{--radius: 100px;--background: var(--whitelight);--color: var(--darkblue);--placeholder-color: var(--gray);--border-color: var(--gray);--outline-color: var(--blue);--label-color: var(--darkblue);--height: 40px;--min-with: 350px;--icon-size: 20px;--animation-time: var(--animation-time--150);position:relative}.Input input{position:relative;width:100%;min-width:var(--min-with);height:var(--height);padding:12px 24px 12px calc(24px + var(--icon-size) + 12px);font-size:16px;font-family:inherit;color:var(--color);background:var(--background);border:1px solid var(--border-color);border-radius:var(--radius)}.Input input:focus{outline-color:var(--outline-color)}.Input input::placeholder{color:var(--color)}.Input gld-icon{position:absolute;left:24px;top:calc(50% - 11px);z-index:1;color:var(--border-color)}\n"] }]
1881
1861
  }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }], searching: [{ type: i0.Output, args: ["searching"] }] } });
1882
1862
 
1883
1863
  // Angular Imports
1884
- class Tile {
1864
+ class TileComponent {
1885
1865
  constructor() {
1886
- this.color = input(TileColor.default, ...(ngDevMode ? [{ debugName: "color" }] : []));
1887
- this.paddingSize = input(TilePaddingSize.zero, ...(ngDevMode ? [{ debugName: "paddingSize" }] : []));
1866
+ this.color = input(TILE_COLORS.default, ...(ngDevMode ? [{ debugName: "color" }] : []));
1867
+ this.paddingSize = input(TILE_PADDING_SIZES.zero, ...(ngDevMode ? [{ debugName: "paddingSize" }] : []));
1888
1868
  this.background = input(false, { ...(ngDevMode ? { debugName: "background" } : {}), transform: booleanAttribute });
1889
1869
  this.hover = input(false, { ...(ngDevMode ? { debugName: "hover" } : {}), transform: booleanAttribute });
1890
1870
  }
1891
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Tile, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1892
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: Tile, isStandalone: true, selector: "gld-tile", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, paddingSize: { classPropertyName: "paddingSize", publicName: "paddingSize", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article\n class=\"tile tile--{{ color() }} tile--padding-{{ paddingSize() }}\"\n [class.tile--background]=\"background()\"\n [class.tile--hover]=\"hover()\">\n <section class=\"tile-content\">\n <ng-content />\n </section>\n</article>\n", styles: [":host{width:100%;height:auto;position:relative;z-index:1}.tile{--gld-background: initial;--gld-background--hover: initial;--gld-border-color: transparent;--gld-padding-size: 0;--gld-radius: var(--gld-radius--xxs);width:inherit;height:inherit;position:relative;padding:var(--gld-padding-size);background:var(--gld-background);border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-radius);overflow:hidden;will-change:background;transition:background var(--gld-animation-time--150)}.tile--hover:hover,.tile--hover:focus{background:var(--gld-background--hover)}.tile.tile--hover{cursor:pointer}.tile--default{--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) )}.tile--default.tile--background{--gld-background: var(--gld-gray-transparent--010)}.tile--default.tile--hover{--gld-background--hover: var(--gld-gray-transparent--020)}.tile--blue{--gld-border-color: var(--gld-blue-transparent--020)}.tile--blue.tile--background{--gld-background: var(--gld-blue-transparent--005)}.tile--blue.tile--hover{--gld-background--hover: var(--gld-blue-transparent--010)}.tile--green{--gld-border-color: var(--gld-green-transparent--020)}.tile--green.tile--background{--gld-background: var(--gld-green-transparent--005)}.tile--green.tile--hover{--gld-background--hover: var(--gld-green-transparent--010)}.tile--purple{--gld-border-color: var(--gld-purple-transparent--020)}.tile--purple.tile--background{--gld-background: var(--gld-purple-transparent--005)}.tile--purple.tile--hover{--gld-background--hover: var(--gld-purple-transparent--010)}.tile--mustard{--gld-border-color: var(--gld-mustard-transparent--020)}.tile--mustard.tile--background{--gld-background: var(--gld-mustard-transparent--005)}.tile--mustard.tile--hover{--gld-background--hover: var(--gld-mustard-transparent--010)}.tile--orange{--gld-border-color: var(--gld-orange-transparent--020)}.tile--orange.tile--background{--gld-background: var(--gld-orange-transparent--005)}.tile--orange.tile--hover{--gld-background--hover: var(--gld-orange-transparent--010)}.tile--pink{--gld-border-color: var(--gld-pink-transparent--020)}.tile--pink.tile--background{--gld-background: var(--gld-pink-transparent--005)}.tile--pink.tile--hover{--gld-background--hover: var(--gld-pink-transparent--010)}.tile--red{--gld-border-color: var(--gld-red-transparent--020)}.tile--red.tile--background{--gld-background: var(--gld-red-transparent--005)}.tile--red.tile--hover{--gld-background--hover: var(--gld-red-transparent--010)}.tile--padding-tiny{--gld-padding-size: var(--gld-spacing--xxxs)}.tile--padding-small{--gld-padding-size: var(--gld-spacing--xs)}.tile--padding-normal{--gld-padding-size: var(--gld-spacing--s)}.tile--padding-medium{--gld-padding-size: var(--gld-spacing--l)}.tile--padding-large{--gld-padding-size: var(--gld-spacing--xl)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1871
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1872
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: TileComponent, isStandalone: true, selector: "gld-tile", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, paddingSize: { classPropertyName: "paddingSize", publicName: "paddingSize", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article\n class=\"tile tile--{{ color() }} tile--padding-{{ paddingSize() }}\"\n [class.tile--background]=\"background()\"\n [class.tile--hover]=\"hover()\">\n <section class=\"tile-content\">\n <ng-content />\n </section>\n</article>\n", styles: [":host{width:100%;height:auto;position:relative;z-index:1}.tile{--gld-background: initial;--gld-background--hover: initial;--gld-border-color: transparent;--gld-padding-size: 0;--gld-radius: var(--gld-radius--xxs);width:inherit;height:inherit;position:relative;padding:var(--gld-padding-size);background:var(--gld-background);border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-radius);overflow:hidden;will-change:background;transition:background var(--gld-animation-time--150)}.tile--hover:hover,.tile--hover:focus{background:var(--gld-background--hover)}.tile.tile--hover{cursor:pointer}.tile--default{--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) )}.tile--default.tile--background{--gld-background: var(--gld-gray-transparent--010)}.tile--default.tile--hover{--gld-background--hover: var(--gld-gray-transparent--020)}.tile--blue{--gld-border-color: var(--gld-blue-transparent--020)}.tile--blue.tile--background{--gld-background: var(--gld-blue-transparent--005)}.tile--blue.tile--hover{--gld-background--hover: var(--gld-blue-transparent--010)}.tile--green{--gld-border-color: var(--gld-green-transparent--020)}.tile--green.tile--background{--gld-background: var(--gld-green-transparent--005)}.tile--green.tile--hover{--gld-background--hover: var(--gld-green-transparent--010)}.tile--purple{--gld-border-color: var(--gld-purple-transparent--020)}.tile--purple.tile--background{--gld-background: var(--gld-purple-transparent--005)}.tile--purple.tile--hover{--gld-background--hover: var(--gld-purple-transparent--010)}.tile--mustard{--gld-border-color: var(--gld-mustard-transparent--020)}.tile--mustard.tile--background{--gld-background: var(--gld-mustard-transparent--005)}.tile--mustard.tile--hover{--gld-background--hover: var(--gld-mustard-transparent--010)}.tile--orange{--gld-border-color: var(--gld-orange-transparent--020)}.tile--orange.tile--background{--gld-background: var(--gld-orange-transparent--005)}.tile--orange.tile--hover{--gld-background--hover: var(--gld-orange-transparent--010)}.tile--pink{--gld-border-color: var(--gld-pink-transparent--020)}.tile--pink.tile--background{--gld-background: var(--gld-pink-transparent--005)}.tile--pink.tile--hover{--gld-background--hover: var(--gld-pink-transparent--010)}.tile--red{--gld-border-color: var(--gld-red-transparent--020)}.tile--red.tile--background{--gld-background: var(--gld-red-transparent--005)}.tile--red.tile--hover{--gld-background--hover: var(--gld-red-transparent--010)}.tile--padding-tiny{--gld-padding-size: var(--gld-spacing--xxxs)}.tile--padding-small{--gld-padding-size: var(--gld-spacing--xs)}.tile--padding-normal{--gld-padding-size: var(--gld-spacing--s)}.tile--padding-medium{--gld-padding-size: var(--gld-spacing--l)}.tile--padding-large{--gld-padding-size: var(--gld-spacing--xl)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1893
1873
  }
1894
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Tile, decorators: [{
1874
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TileComponent, decorators: [{
1895
1875
  type: Component,
1896
1876
  args: [{ selector: 'gld-tile', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article\n class=\"tile tile--{{ color() }} tile--padding-{{ paddingSize() }}\"\n [class.tile--background]=\"background()\"\n [class.tile--hover]=\"hover()\">\n <section class=\"tile-content\">\n <ng-content />\n </section>\n</article>\n", styles: [":host{width:100%;height:auto;position:relative;z-index:1}.tile{--gld-background: initial;--gld-background--hover: initial;--gld-border-color: transparent;--gld-padding-size: 0;--gld-radius: var(--gld-radius--xxs);width:inherit;height:inherit;position:relative;padding:var(--gld-padding-size);background:var(--gld-background);border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-radius);overflow:hidden;will-change:background;transition:background var(--gld-animation-time--150)}.tile--hover:hover,.tile--hover:focus{background:var(--gld-background--hover)}.tile.tile--hover{cursor:pointer}.tile--default{--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) )}.tile--default.tile--background{--gld-background: var(--gld-gray-transparent--010)}.tile--default.tile--hover{--gld-background--hover: var(--gld-gray-transparent--020)}.tile--blue{--gld-border-color: var(--gld-blue-transparent--020)}.tile--blue.tile--background{--gld-background: var(--gld-blue-transparent--005)}.tile--blue.tile--hover{--gld-background--hover: var(--gld-blue-transparent--010)}.tile--green{--gld-border-color: var(--gld-green-transparent--020)}.tile--green.tile--background{--gld-background: var(--gld-green-transparent--005)}.tile--green.tile--hover{--gld-background--hover: var(--gld-green-transparent--010)}.tile--purple{--gld-border-color: var(--gld-purple-transparent--020)}.tile--purple.tile--background{--gld-background: var(--gld-purple-transparent--005)}.tile--purple.tile--hover{--gld-background--hover: var(--gld-purple-transparent--010)}.tile--mustard{--gld-border-color: var(--gld-mustard-transparent--020)}.tile--mustard.tile--background{--gld-background: var(--gld-mustard-transparent--005)}.tile--mustard.tile--hover{--gld-background--hover: var(--gld-mustard-transparent--010)}.tile--orange{--gld-border-color: var(--gld-orange-transparent--020)}.tile--orange.tile--background{--gld-background: var(--gld-orange-transparent--005)}.tile--orange.tile--hover{--gld-background--hover: var(--gld-orange-transparent--010)}.tile--pink{--gld-border-color: var(--gld-pink-transparent--020)}.tile--pink.tile--background{--gld-background: var(--gld-pink-transparent--005)}.tile--pink.tile--hover{--gld-background--hover: var(--gld-pink-transparent--010)}.tile--red{--gld-border-color: var(--gld-red-transparent--020)}.tile--red.tile--background{--gld-background: var(--gld-red-transparent--005)}.tile--red.tile--hover{--gld-background--hover: var(--gld-red-transparent--010)}.tile--padding-tiny{--gld-padding-size: var(--gld-spacing--xxxs)}.tile--padding-small{--gld-padding-size: var(--gld-spacing--xs)}.tile--padding-normal{--gld-padding-size: var(--gld-spacing--s)}.tile--padding-medium{--gld-padding-size: var(--gld-spacing--l)}.tile--padding-large{--gld-padding-size: var(--gld-spacing--xl)}\n"] }]
1897
1877
  }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], paddingSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingSize", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], hover: [{ type: i0.Input, args: [{ isSignal: true, alias: "hover", required: false }] }] } });
@@ -1906,8 +1886,8 @@ const AuthenticationStore = signalStore(withState(initialAuthenticationState), w
1906
1886
  signin: (parameters) => {
1907
1887
  const { accessToken, refreshToken, saveCookie = true } = parameters;
1908
1888
  if (saveCookie) {
1909
- cookiesService.set(CookiesKeys.accessToken, accessToken);
1910
- cookiesService.set(CookiesKeys.refreshToken, refreshToken);
1889
+ cookiesService.set(COOKIES_KEYS.accessToken, accessToken);
1890
+ cookiesService.set(COOKIES_KEYS.refreshToken, refreshToken);
1911
1891
  }
1912
1892
  patchState(store, (previous) => ({
1913
1893
  ...previous,
@@ -1917,8 +1897,8 @@ const AuthenticationStore = signalStore(withState(initialAuthenticationState), w
1917
1897
  }));
1918
1898
  },
1919
1899
  signout: () => {
1920
- cookiesService.delete(CookiesKeys.accessToken);
1921
- cookiesService.delete(CookiesKeys.refreshToken);
1900
+ cookiesService.delete(COOKIES_KEYS.accessToken);
1901
+ cookiesService.delete(COOKIES_KEYS.refreshToken);
1922
1902
  patchState(store, (previous) => ({
1923
1903
  ...previous,
1924
1904
  logged: false,
@@ -2041,7 +2021,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
2041
2021
  class Theme {
2042
2022
  constructor() {
2043
2023
  this.rendererFactory = inject(RendererFactory2);
2044
- this.allThemes = [UiTheme.dark, UiTheme.light, UiTheme.system];
2024
+ this.allThemes = [UI_THEMES.dark, UI_THEMES.light, UI_THEMES.system];
2045
2025
  this.renderer = this.rendererFactory.createRenderer(null, null);
2046
2026
  }
2047
2027
  changeTheme(theme) {
@@ -2092,8 +2072,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
2092
2072
 
2093
2073
  // Store Imports
2094
2074
  const initialThemeState = {
2095
- theme: UiTheme.system,
2096
- iconTheme: Icons.macLine,
2075
+ theme: UI_THEMES.system,
2076
+ iconTheme: ICONS.macLine,
2097
2077
  };
2098
2078
  const ThemeStore = signalStore(withState(initialThemeState), withHooks({
2099
2079
  onInit(store) {
@@ -2118,8 +2098,8 @@ const isLogged = () => {
2118
2098
  const isBrowser = typeof window !== 'undefined';
2119
2099
  if (!isBrowser)
2120
2100
  return false;
2121
- const accessToken = cookiesService.get(CookiesKeys.accessToken);
2122
- const refreshToken = cookiesService.get(CookiesKeys.refreshToken);
2101
+ const accessToken = cookiesService.get(COOKIES_KEYS.accessToken);
2102
+ const refreshToken = cookiesService.get(COOKIES_KEYS.refreshToken);
2123
2103
  if (accessToken && refreshToken) {
2124
2104
  if (!authenticationStore.logged()) {
2125
2105
  authenticationStore.signin({ accessToken, refreshToken });
@@ -2127,7 +2107,7 @@ const isLogged = () => {
2127
2107
  return true;
2128
2108
  }
2129
2109
  else {
2130
- console.error(`The value of the accessToken (${accessToken}) and the refreshToken (${refreshToken}) is not a valid one`);
2110
+ console.error('Authentication tokens are missing or invalid.');
2131
2111
  if (authenticationStore.logged()) {
2132
2112
  authenticationStore.signout();
2133
2113
  }
@@ -2156,16 +2136,16 @@ const changeLanguage = (request, next) => {
2156
2136
  let cloneRequest = request;
2157
2137
  if (request.headers.has('Language')) {
2158
2138
  if (request.method.toLowerCase() === 'get') {
2159
- let language = TranslocoLanguageName.english;
2139
+ let language = TRANSLOCO_LANGUAGE_NAMES.english;
2160
2140
  switch (transloco.getLanguage()) {
2161
- case TranslocoLanguageKey.english:
2162
- language = TranslocoLanguageName.english;
2141
+ case TRANSLOCO_LANGUAGE_KEYS.english:
2142
+ language = TRANSLOCO_LANGUAGE_NAMES.english;
2163
2143
  break;
2164
- case TranslocoLanguageKey.spanish:
2165
- language = TranslocoLanguageName.spanish;
2144
+ case TRANSLOCO_LANGUAGE_KEYS.spanish:
2145
+ language = TRANSLOCO_LANGUAGE_NAMES.spanish;
2166
2146
  break;
2167
2147
  default:
2168
- language = TranslocoLanguageName.english;
2148
+ language = TRANSLOCO_LANGUAGE_NAMES.english;
2169
2149
  break;
2170
2150
  }
2171
2151
  const params = new HttpParams({ fromObject: { language } });
@@ -2227,5 +2207,5 @@ const refreshToken = (request, next) => {
2227
2207
  * Generated bundle index. Do not edit.
2228
2208
  */
2229
2209
 
2230
- export { Authentication, AuthenticationStore, Button, ButtonColor, ButtonSize, CircleLoader, CookiesKeys, CustomPreloadingStrategy, DropdownButton, DropdownDirection, DropdownMenu, DropdownMenuTemplate, DropdownType, EnvironmentType, Environments, Icon, IconButton, Icons, IconsSize, IconsSpace, Image, Input, InputDate, InputError, InputErrorMessage, InputHint, Link, LinkAlign, LinkType, MAX_DAY, MAX_MONTH, MIN_DAY, MIN_MONTH, NATURAL_NUMBER_REGEX, NATURAL_NUMBER_REGEX_TO_CLEAN, RadioButton, RadioDirection, RadioGroup, SERVICES_ENVIRONMENT_TOKEN, STORES_ENVIRONMENT_TOKEN, STRING_REGEX, STRING_REGEX_TO_CLEAN, Select, SelectOption, SelectType, THEMES, Table, TableColumnActionType, TablePagination, TableSearch, TableSearchAction, Textarea, Theme, ThemeStore, Tile, TileColor, TilePaddingSize, ToggleButton, ToggleGroup, Transloco, TranslocoHttpLoader, TranslocoLanguageKey, TranslocoLanguageName, UiTheme, YEAR_LENGTH, addDaysToISODate, addToken, addYearsToISODate, capitalizeFirstLetter, changeLanguage, formatDDMMYYYYToISODate, formatDateToISODate, formatISODateToDDMMYYYY, formatISODateToDate, initialAuthenticationState, initialThemeState, isDate, isDocument, isEmail, isFormSelectItem, isLogged, isNaturalNumber, isString, minimumAge, mustMatch, mustUnmatch, refreshToken, updateValueWithMask };
2210
+ export { Authentication, AuthenticationStore, BUTTON_COLORS, BUTTON_SIZES, ButtonComponent, COOKIES_KEYS, CircleLoaderComponent, CustomPreloadingStrategy, DROPDOWN_DIRECTIONS, DROPDOWN_TYPES, DropdownButtonComponent, DropdownMenuComponent, DropdownMenuTemplate, ENVIRONMENT_TYPES, Environments, ICONS, ICONS_SIZES, ICONS_SPACES, IconButtonComponent, IconComponent, ImageComponent, InputComponent, InputDateComponent, InputErrorComponent, InputErrorMessage, InputHintComponent, LINK_ALIGNS, LINK_TYPES, LinkComponent, MAX_DAY, MAX_MONTH, MIN_DAY, MIN_MONTH, NATURAL_NUMBER_REGEX, NATURAL_NUMBER_REGEX_TO_CLEAN, RADIO_DIRECTIONS, RadioButtonComponent, RadioGroupComponent, SELECT_TYPES, SERVICES_ENVIRONMENT_TOKEN, STORES_ENVIRONMENT_TOKEN, STRING_REGEX, STRING_REGEX_TO_CLEAN, SelectComponent, SelectOptionComponent, TABLE_COLUMN_ACTION_TYPES, TABLE_SEARCH_ACTIONS, THEMES, TILE_COLORS, TILE_PADDING_SIZES, TRANSLOCO_LANGUAGE_KEYS, TRANSLOCO_LANGUAGE_NAMES, TableComponent, TablePaginationComponent, TableSearchComponent, TextareaComponent, Theme, ThemeStore, TileComponent, ToggleButtonComponent, ToggleGroupComponent, Transloco, TranslocoHttpLoader, UI_THEMES, YEAR_LENGTH, addDaysToISODate, addToken, addYearsToISODate, capitalizeFirstLetter, changeLanguage, formatDDMMYYYYToISODate, formatDateToISODate, formatISODateToDDMMYYYY, formatISODateToDate, initialAuthenticationState, initialThemeState, isDate, isDocument, isEmail, isFormSelectItem, isLogged, isNaturalNumber, isString, minimumAge, mustMatch, mustUnmatch, refreshToken, updateValueWithMask };
2231
2211
  //# sourceMappingURL=iamgld-ui.mjs.map