@iamgld/ui 1.21.1 → 21.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -2
- package/fesm2022/iamgld-ui.mjs +263 -261
- package/fesm2022/iamgld-ui.mjs.map +1 -1
- package/package.json +5 -8
- package/public/styles/layers/_base.scss +56 -56
- package/public/styles/layers/_objects.scss +9 -9
- package/public/styles/layers/_setting.scss +185 -140
- package/public/styles/layers/_tools.scss +169 -169
- package/public/styles/layers/_trumps.scss +11 -11
- package/public/styles/styles.scss +14 -14
- package/types/iamgld-ui.d.ts +627 -0
- package/LICENSE +0 -202
- package/index.d.ts +0 -5
- package/lib/components/buttons/button/button.component.d.ts +0 -18
- package/lib/components/buttons/dropdown-button/dropdown-button.component.d.ts +0 -22
- package/lib/components/buttons/dropdown-menu/dropdown-menu.component.d.ts +0 -30
- package/lib/components/buttons/icon-button/icon-button.component.d.ts +0 -18
- package/lib/components/buttons/link/link.component.d.ts +0 -16
- package/lib/components/buttons/toggle-button/toggle-button.component.d.ts +0 -13
- package/lib/components/buttons/toggle-group/toggle-group.component.d.ts +0 -16
- package/lib/components/controls/input/input.component.d.ts +0 -25
- package/lib/components/controls/input-date/input-date.component.d.ts +0 -23
- package/lib/components/controls/input-error/input-error.component.d.ts +0 -13
- package/lib/components/controls/input-hint/input-hint.component.d.ts +0 -5
- package/lib/components/controls/radio-button/radio-button.component.d.ts +0 -16
- package/lib/components/controls/radio-group/radio-group.component.d.ts +0 -26
- package/lib/components/controls/select/select.component.d.ts +0 -31
- package/lib/components/controls/select-option/select-option.component.d.ts +0 -14
- package/lib/components/controls/textarea/textarea.component.d.ts +0 -25
- package/lib/components/icon/icon.component.d.ts +0 -17
- package/lib/components/image/image.component.d.ts +0 -8
- package/lib/components/index.d.ts +0 -23
- package/lib/components/loaders/loader/loader.component.d.ts +0 -9
- package/lib/components/tables/table/table.component.d.ts +0 -42
- package/lib/components/tables/table-pagination/table-pagination.component.d.ts +0 -16
- package/lib/components/tables/table-search/table-search.component.d.ts +0 -14
- package/lib/components/tile/tile.component.d.ts +0 -9
- package/lib/directives/dropdown-menu-template/dropdown-menu-template.directive.d.ts +0 -5
- package/lib/directives/index.d.ts +0 -2
- package/lib/directives/input-error-message/input-error-message.directive.d.ts +0 -5
- package/lib/models/buttons/button.model.d.ts +0 -16
- package/lib/models/buttons/dropdown.model.d.ts +0 -8
- package/lib/models/buttons/link.model.d.ts +0 -8
- package/lib/models/controls/input.model.d.ts +0 -2
- package/lib/models/controls/radio.model.d.ts +0 -4
- package/lib/models/controls/select.model.d.ts +0 -4
- package/lib/models/icon/icon.model.d.ts +0 -49
- package/lib/models/index.d.ts +0 -9
- package/lib/models/tables/table.model.d.ts +0 -59
- package/lib/models/tiles/tile.model.d.ts +0 -18
- package/lib/utils/date/date.util.d.ts +0 -6
- package/lib/utils/index.d.ts +0 -2
- package/lib/utils/string/string.util.d.ts +0 -1
- package/lib/validators/index.d.ts +0 -9
- package/lib/validators/is-date/is-date.validator.d.ts +0 -2
- package/lib/validators/is-document/is-document.validator.d.ts +0 -6
- package/lib/validators/is-email/is-email.validator.d.ts +0 -2
- package/lib/validators/is-form-select-item/is-form-select-item.validator.d.ts +0 -2
- package/lib/validators/is-license-plate/is-license-plate.validator.d.ts +0 -4
- package/lib/validators/is-natural-number/is-natural-number.validator.d.ts +0 -2
- package/lib/validators/minimum-age/minimum-age.validator.d.ts +0 -4
- package/lib/validators/must-match/must-match.validator.d.ts +0 -6
- package/lib/validators/must-unmatch/must-unmatch.validator.d.ts +0 -6
- package/public-api.d.ts +0 -5
package/fesm2022/iamgld-ui.mjs
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Directive, input, numberAttribute, booleanAttribute, output,
|
|
2
|
+
import { Directive, input, numberAttribute, booleanAttribute, output, ChangeDetectionStrategy, Component, signal, computed, viewChild, ElementRef, contentChildren, effect, inject, DestroyRef, ChangeDetectorRef, forwardRef } from '@angular/core';
|
|
3
3
|
import { NgTemplateOutlet, NgOptimizedImage } from '@angular/common';
|
|
4
4
|
import { RouterLink } from '@angular/router';
|
|
5
5
|
import * as i1 from '@angular/forms';
|
|
6
|
-
import { FormControl,
|
|
6
|
+
import { FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormBuilder } from '@angular/forms';
|
|
7
7
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
8
8
|
import { debounceTime } from 'rxjs';
|
|
9
9
|
|
|
@@ -373,10 +373,10 @@ function mustUnmatchValidator({ controlName, mustUnmatchControlName, errorMessag
|
|
|
373
373
|
|
|
374
374
|
// Angular Imports
|
|
375
375
|
class DropdownMenuTemplateDirective {
|
|
376
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
377
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
376
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DropdownMenuTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
377
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: DropdownMenuTemplateDirective, isStandalone: true, selector: "[gldDropdownMenuTemplate]", ngImport: i0 });
|
|
378
378
|
}
|
|
379
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
379
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DropdownMenuTemplateDirective, decorators: [{
|
|
380
380
|
type: Directive,
|
|
381
381
|
args: [{
|
|
382
382
|
selector: '[gldDropdownMenuTemplate]',
|
|
@@ -385,10 +385,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
385
385
|
|
|
386
386
|
// Angular Imports
|
|
387
387
|
class InputErrorMessageDirective {
|
|
388
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
389
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
388
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InputErrorMessageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
389
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: InputErrorMessageDirective, isStandalone: true, selector: "[gldInputErrorMessage]", ngImport: i0 });
|
|
390
390
|
}
|
|
391
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
391
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InputErrorMessageDirective, decorators: [{
|
|
392
392
|
type: Directive,
|
|
393
393
|
args: [{
|
|
394
394
|
selector: '[gldInputErrorMessage]',
|
|
@@ -399,12 +399,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
399
399
|
class IconComponent {
|
|
400
400
|
IconsSpace = IconsSpace;
|
|
401
401
|
Icons = Icons;
|
|
402
|
-
icon = input.required();
|
|
403
|
-
size = input(IconsSize.normal);
|
|
404
|
-
space = input(IconsSpace.none);
|
|
405
|
-
moveTopToBottom = input(0, { transform: numberAttribute });
|
|
406
|
-
moveLeftToRight = input(0, { transform: numberAttribute });
|
|
407
|
-
disabled = input(false, { transform: booleanAttribute });
|
|
402
|
+
icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
403
|
+
size = input(IconsSize.normal, ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
404
|
+
space = input(IconsSpace.none, ...(ngDevMode ? [{ debugName: "space" }] : []));
|
|
405
|
+
moveTopToBottom = input(0, ...(ngDevMode ? [{ debugName: "moveTopToBottom", transform: numberAttribute }] : [{ transform: numberAttribute }]));
|
|
406
|
+
moveLeftToRight = input(0, ...(ngDevMode ? [{ debugName: "moveLeftToRight", transform: numberAttribute }] : [{ transform: numberAttribute }]));
|
|
407
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
408
408
|
clicked = output();
|
|
409
409
|
emitClick() {
|
|
410
410
|
if (!this.disabled())
|
|
@@ -413,26 +413,26 @@ class IconComponent {
|
|
|
413
413
|
keyup() {
|
|
414
414
|
this.emitClick();
|
|
415
415
|
}
|
|
416
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
417
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", 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\r\n tabindex=\"-1\"\r\n (click)=\"emitClick()\"\r\n (keyup.enter)=\"keyup()\"\r\n class=\"icon icon--{{ size() }}\"\r\n [class.icon--left]=\"space() === IconsSpace.left\"\r\n [class.icon--right]=\"space() === IconsSpace.right\"\r\n [style.right.px]=\"moveLeftToRight()\"\r\n [style.top.px]=\"moveTopToBottom()\">\r\n @switch (icon()) {\r\n @case (Icons.arrowDownSLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.arrowUpSLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\n d=\"M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z\"></path>\r\n </svg>\r\n }\r\n @case (Icons.checkboxCircleLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.checkboxBlankCircleLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.loader4Fill) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.logoutCircleLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.loginCircleLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.gitRepositoryLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.fileList3Line) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.menuLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path d=\"M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z\"></path>\r\n </svg>\r\n }\r\n @case (Icons.sunLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.moonClearLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.englishInput) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.translate) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.user4Line) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.shapesLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.closeLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.eyeLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.eyeCloseLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.linkedinBoxFill) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.githubFill) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.instagramFill) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.twitterXFill) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.downloadCloud2Line) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.globeLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.mailSendLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.pagesLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.gitForkLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.gitRepositoryPrivateLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.starLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.calendar2Line) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.macLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.more2Fill) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.editLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.deleteBinLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n }\r\n</span>\r\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 });
|
|
416
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
417
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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() === 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 });
|
|
418
418
|
}
|
|
419
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
419
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconComponent, decorators: [{
|
|
420
420
|
type: Component,
|
|
421
|
-
args: [{ selector: 'gld-icon', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\r\n tabindex=\"-1\"\r\n (click)=\"emitClick()\"\r\n (keyup.enter)=\"keyup()\"\r\n class=\"icon icon--{{ size() }}\"\r\n [class.icon--left]=\"space() === IconsSpace.left\"\r\n [class.icon--right]=\"space() === IconsSpace.right\"\r\n [style.right.px]=\"moveLeftToRight()\"\r\n [style.top.px]=\"moveTopToBottom()\">\r\n @switch (icon()) {\r\n @case (Icons.arrowDownSLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.arrowUpSLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\n d=\"M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z\"></path>\r\n </svg>\r\n }\r\n @case (Icons.checkboxCircleLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.checkboxBlankCircleLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.loader4Fill) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.logoutCircleLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.loginCircleLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.gitRepositoryLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.fileList3Line) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.menuLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path d=\"M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z\"></path>\r\n </svg>\r\n }\r\n @case (Icons.sunLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.moonClearLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.englishInput) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.translate) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.user4Line) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.shapesLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.closeLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.eyeLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.eyeCloseLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.linkedinBoxFill) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.githubFill) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.instagramFill) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.twitterXFill) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.downloadCloud2Line) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.globeLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.mailSendLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.pagesLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.gitForkLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.gitRepositoryPrivateLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.starLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.calendar2Line) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.macLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.more2Fill) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.editLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n @case (Icons.deleteBinLine) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\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>\r\n </svg>\r\n }\r\n }\r\n</span>\r\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"] }]
|
|
422
|
-
}] });
|
|
421
|
+
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"] }]
|
|
422
|
+
}], 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"] }] } });
|
|
423
423
|
|
|
424
424
|
// Angular Imports
|
|
425
425
|
const components$8 = [IconComponent];
|
|
426
426
|
class ButtonComponent {
|
|
427
|
-
name = input.required();
|
|
428
|
-
color = input(ButtonColor.pink);
|
|
429
|
-
size = input(ButtonSize.normal);
|
|
430
|
-
icon = input(null);
|
|
431
|
-
iconSize = input();
|
|
432
|
-
moveTopToBottom = input(0, { transform: numberAttribute });
|
|
433
|
-
moveLeftToRight = input(0, { transform: numberAttribute });
|
|
434
|
-
disabled = input(false, { transform: booleanAttribute });
|
|
435
|
-
full = input(false, { transform: booleanAttribute });
|
|
427
|
+
name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
|
|
428
|
+
color = input(ButtonColor.pink, ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
429
|
+
size = input(ButtonSize.normal, ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
430
|
+
icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
431
|
+
iconSize = input(...(ngDevMode ? [undefined, { debugName: "iconSize" }] : []));
|
|
432
|
+
moveTopToBottom = input(0, ...(ngDevMode ? [{ debugName: "moveTopToBottom", transform: numberAttribute }] : [{ transform: numberAttribute }]));
|
|
433
|
+
moveLeftToRight = input(0, ...(ngDevMode ? [{ debugName: "moveLeftToRight", transform: numberAttribute }] : [{ transform: numberAttribute }]));
|
|
434
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
435
|
+
full = input(false, ...(ngDevMode ? [{ debugName: "full", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
436
436
|
clicked = output();
|
|
437
437
|
emitClick() {
|
|
438
438
|
if (!this.disabled())
|
|
@@ -441,25 +441,25 @@ class ButtonComponent {
|
|
|
441
441
|
keyup() {
|
|
442
442
|
this.emitClick();
|
|
443
443
|
}
|
|
444
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
445
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
444
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
445
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ButtonComponent, isStandalone: true, selector: "gld-button", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, moveTopToBottom: { classPropertyName: "moveTopToBottom", publicName: "moveTopToBottom", isSignal: true, isRequired: false, transformFunction: null }, moveLeftToRight: { classPropertyName: "moveLeftToRight", publicName: "moveLeftToRight", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, full: { classPropertyName: "full", publicName: "full", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n id=\"{{ name() }}\"\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 });
|
|
446
446
|
}
|
|
447
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
447
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
448
448
|
type: Component,
|
|
449
|
-
args: [{ selector: 'gld-button', imports: [...components$8], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\
|
|
450
|
-
}] });
|
|
449
|
+
args: [{ selector: 'gld-button', imports: [...components$8], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n id=\"{{ name() }}\"\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"] }]
|
|
450
|
+
}], propDecorators: { 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"] }] } });
|
|
451
451
|
|
|
452
452
|
// Angular Imports
|
|
453
453
|
class IconButtonComponent {
|
|
454
|
-
icon = input.required();
|
|
455
|
-
name = input.required();
|
|
456
|
-
iconSize = input(IconsSize.normal);
|
|
457
|
-
space = input(IconsSpace.none);
|
|
458
|
-
moveTopToBottom = input(0, { transform: numberAttribute });
|
|
459
|
-
moveLeftToRight = input(0, { transform: numberAttribute });
|
|
460
|
-
background = input(false, { transform: booleanAttribute });
|
|
461
|
-
disabled = input(false, { transform: booleanAttribute });
|
|
462
|
-
color = input(ButtonColor.pink);
|
|
454
|
+
icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
455
|
+
name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
|
|
456
|
+
iconSize = input(IconsSize.normal, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
|
|
457
|
+
space = input(IconsSpace.none, ...(ngDevMode ? [{ debugName: "space" }] : []));
|
|
458
|
+
moveTopToBottom = input(0, ...(ngDevMode ? [{ debugName: "moveTopToBottom", transform: numberAttribute }] : [{ transform: numberAttribute }]));
|
|
459
|
+
moveLeftToRight = input(0, ...(ngDevMode ? [{ debugName: "moveLeftToRight", transform: numberAttribute }] : [{ transform: numberAttribute }]));
|
|
460
|
+
background = input(false, ...(ngDevMode ? [{ debugName: "background", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
461
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
462
|
+
color = input(ButtonColor.pink, ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
463
463
|
clicked = output();
|
|
464
464
|
emitClick() {
|
|
465
465
|
if (!this.disabled())
|
|
@@ -468,23 +468,23 @@ class IconButtonComponent {
|
|
|
468
468
|
keyup() {
|
|
469
469
|
this.emitClick();
|
|
470
470
|
}
|
|
471
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
472
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
471
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
472
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: IconButtonComponent, isStandalone: true, selector: "gld-icon-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, space: { classPropertyName: "space", publicName: "space", isSignal: true, isRequired: false, transformFunction: null }, moveTopToBottom: { classPropertyName: "moveTopToBottom", publicName: "moveTopToBottom", isSignal: true, isRequired: false, transformFunction: null }, moveLeftToRight: { classPropertyName: "moveLeftToRight", publicName: "moveLeftToRight", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n id=\"{{ name() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"button button--{{ color() }}\"\n [class.button--disabled]=\"disabled()\"\n [class.button--background]=\"background()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\">\n <!-- Icon -->\n <gld-icon\n [icon]=\"icon()\"\n [size]=\"iconSize()\"\n [space]=\"space()\"\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [disabled]=\"disabled()\" />\n</button>\n\n<!-- Only used by DropdownMenuComponent -->\n<ng-content select=\"[gldDropdownMenuTemplate]\" />\n", styles: [":host{display:inline-block;max-width:inherit}.button{--gld-color: inherit;--gld-background: transparent;--gld-background--hover: transparent;--gld-radius: var(--gld-radius--xxs);--gld-font-size: var(--gld-font-size--normal);outline:none;border:none;padding:var(--gld-spacing--xxxs);border-radius:var(--gld-radius);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size);font-weight:600;line-height:1.25;cursor:pointer;width:inherit;color:var(--gld-color);background:var(--gld-background);display:inline-flex;align-items:center;justify-content:center;gap:var(--gld-spacing--xxxs);-webkit-user-select:none;user-select:none;will-change:background,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover,.button:focus{background:var(--gld-background--hover)}.button:active{transform:scale(.98)}.button--pink{--gld-color: var(--gld-pink)}.button--pink.button--background{--gld-background: var(--gld-pink-transparent--010);--gld-background--hover: var(--gld-pink-transparent--020)}.button--purple{--gld-color: var(--gld-purple)}.button--purple.button--background{--gld-background: var(--gld-purple-transparent--010);--gld-background--hover: var(--gld-purple-transparent--020)}.button--mustard{--gld-color: var(--gld-mustard)}.button--mustard.button--background{--gld-background: var(--gld-mustard-transparent--010);--gld-background--hover: var(--gld-mustard-transparent--020)}.button--orange{--gld-color: var(--gld-orange)}.button--orange.button--background{--gld-background: var(--gld-orange-transparent--010);--gld-background--hover: var(--gld-orange-transparent--020)}.button--blue{--gld-color: var(--gld-blue)}.button--blue.button--background{--gld-background: var(--gld-blue-transparent--010);--gld-background--hover: var(--gld-blue-transparent--020)}.button--red{--gld-color: var(--gld-red)}.button--red.button--background{--gld-background: var(--gld-red-transparent--010);--gld-background--hover: var(--gld-red-transparent--020)}.button--green{--gld-color: var(--gld-green)}.button--green.button--background{--gld-background: var(--gld-green-transparent--010);--gld-background--hover: var(--gld-green-transparent--020)}.button--disabled{--gld-color: var(--gld-gray-transparent--060);pointer-events:none;cursor:not-allowed}.button--disabled.button--background{--gld-background: var(--gld-gray-transparent--020);--gld-background--hover: var(--gld-gray-transparent--020)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gld-icon", inputs: ["icon", "size", "space", "moveTopToBottom", "moveLeftToRight", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
473
473
|
}
|
|
474
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
474
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconButtonComponent, decorators: [{
|
|
475
475
|
type: Component,
|
|
476
476
|
args: [{ selector: 'gld-icon-button', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n id=\"{{ name() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"button button--{{ color() }}\"\n [class.button--disabled]=\"disabled()\"\n [class.button--background]=\"background()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\">\n <!-- Icon -->\n <gld-icon\n [icon]=\"icon()\"\n [size]=\"iconSize()\"\n [space]=\"space()\"\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [disabled]=\"disabled()\" />\n</button>\n\n<!-- Only used by DropdownMenuComponent -->\n<ng-content select=\"[gldDropdownMenuTemplate]\" />\n", styles: [":host{display:inline-block;max-width:inherit}.button{--gld-color: inherit;--gld-background: transparent;--gld-background--hover: transparent;--gld-radius: var(--gld-radius--xxs);--gld-font-size: var(--gld-font-size--normal);outline:none;border:none;padding:var(--gld-spacing--xxxs);border-radius:var(--gld-radius);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size);font-weight:600;line-height:1.25;cursor:pointer;width:inherit;color:var(--gld-color);background:var(--gld-background);display:inline-flex;align-items:center;justify-content:center;gap:var(--gld-spacing--xxxs);-webkit-user-select:none;user-select:none;will-change:background,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover,.button:focus{background:var(--gld-background--hover)}.button:active{transform:scale(.98)}.button--pink{--gld-color: var(--gld-pink)}.button--pink.button--background{--gld-background: var(--gld-pink-transparent--010);--gld-background--hover: var(--gld-pink-transparent--020)}.button--purple{--gld-color: var(--gld-purple)}.button--purple.button--background{--gld-background: var(--gld-purple-transparent--010);--gld-background--hover: var(--gld-purple-transparent--020)}.button--mustard{--gld-color: var(--gld-mustard)}.button--mustard.button--background{--gld-background: var(--gld-mustard-transparent--010);--gld-background--hover: var(--gld-mustard-transparent--020)}.button--orange{--gld-color: var(--gld-orange)}.button--orange.button--background{--gld-background: var(--gld-orange-transparent--010);--gld-background--hover: var(--gld-orange-transparent--020)}.button--blue{--gld-color: var(--gld-blue)}.button--blue.button--background{--gld-background: var(--gld-blue-transparent--010);--gld-background--hover: var(--gld-blue-transparent--020)}.button--red{--gld-color: var(--gld-red)}.button--red.button--background{--gld-background: var(--gld-red-transparent--010);--gld-background--hover: var(--gld-red-transparent--020)}.button--green{--gld-color: var(--gld-green)}.button--green.button--background{--gld-background: var(--gld-green-transparent--010);--gld-background--hover: var(--gld-green-transparent--020)}.button--disabled{--gld-color: var(--gld-gray-transparent--060);pointer-events:none;cursor:not-allowed}.button--disabled.button--background{--gld-background: var(--gld-gray-transparent--020);--gld-background--hover: var(--gld-gray-transparent--020)}\n"] }]
|
|
477
|
-
}] });
|
|
477
|
+
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", 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"] }] } });
|
|
478
478
|
|
|
479
479
|
// Angular Imports
|
|
480
480
|
class LinkComponent {
|
|
481
481
|
LinkType = LinkType;
|
|
482
|
-
name = input.required();
|
|
483
|
-
redirect = input('');
|
|
484
|
-
active = input(false, { transform: booleanAttribute });
|
|
485
|
-
external = input(false, { transform: booleanAttribute });
|
|
486
|
-
type = input(LinkType.default);
|
|
487
|
-
align = input(LinkAlign.center);
|
|
482
|
+
name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
|
|
483
|
+
redirect = input('', ...(ngDevMode ? [{ debugName: "redirect" }] : []));
|
|
484
|
+
active = input(false, ...(ngDevMode ? [{ debugName: "active", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
485
|
+
external = input(false, ...(ngDevMode ? [{ debugName: "external", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
486
|
+
type = input(LinkType.default, ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
487
|
+
align = input(LinkAlign.center, ...(ngDevMode ? [{ debugName: "align" }] : []));
|
|
488
488
|
clicked = output();
|
|
489
489
|
emitClick() {
|
|
490
490
|
this.clicked.emit();
|
|
@@ -492,30 +492,30 @@ class LinkComponent {
|
|
|
492
492
|
keyup() {
|
|
493
493
|
this.emitClick();
|
|
494
494
|
}
|
|
495
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
496
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
495
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: LinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
496
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: LinkComponent, isStandalone: true, selector: "gld-link", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, redirect: { classPropertyName: "redirect", publicName: "redirect", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, external: { classPropertyName: "external", publicName: "external", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "@if (external()) {\n <!-- It's external link -->\n <ng-container\n [ngTemplateOutlet]=\"buttonTemplate\"\n [ngTemplateOutletContext]=\"{ buttonType: 'anchor' }\" />\n} @else {\n <!-- It isn't external link -->\n <ng-container\n [ngTemplateOutlet]=\"buttonTemplate\"\n [ngTemplateOutletContext]=\"{ buttonType: 'button' }\" />\n}\n\n<!-- Button Template -->\n<ng-template #buttonTemplate let-buttonType=\"buttonType\">\n @switch (buttonType) {\n @case ('anchor') {\n <a\n id=\"{{ name() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"link link--{{ align() }}\"\n [class.link--active]=\"active()\"\n [href]=\"redirect()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\"\n target=\"_blank\">\n <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n </a>\n }\n @case ('button') {\n @if (redirect()) {\n <!-- It has path to redirect -->\n <button\n id=\"{{ name() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"link link--{{ align() }}\"\n [class.link--active]=\"active()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\"\n [routerLink]=\"redirect()\">\n <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n </button>\n } @else {\n <!-- It doesn't have path to redirect -->\n <button\n id=\"{{ name() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"link link--{{ align() }}\"\n [class.link--active]=\"active()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\">\n <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n </button>\n }\n }\n }\n</ng-template>\n\n<!-- Content Button Template -->\n<ng-template #contentButtonTemplate>\n <ng-content />\n</ng-template>\n", styles: [":host{position:relative;z-index:1}.link{--gld-color: var(--gld-foreground-color);position:relative;display:inline-flex;align-items:center;padding:0;font:600 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);color:var(--gld-color);background:none;border:none;cursor:pointer;text-decoration:underline;will-change:color;transition:color var(--gld-animation-time--150)}.link--active,.link:active,.link:hover{--gld-color: var(--gld-purple)}.link--left{text-align:left}.link--right{text-align:right}.link--center{text-align:center}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
497
497
|
}
|
|
498
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
498
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: LinkComponent, decorators: [{
|
|
499
499
|
type: Component,
|
|
500
500
|
args: [{ selector: 'gld-link', standalone: true, imports: [NgTemplateOutlet, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (external()) {\n <!-- It's external link -->\n <ng-container\n [ngTemplateOutlet]=\"buttonTemplate\"\n [ngTemplateOutletContext]=\"{ buttonType: 'anchor' }\" />\n} @else {\n <!-- It isn't external link -->\n <ng-container\n [ngTemplateOutlet]=\"buttonTemplate\"\n [ngTemplateOutletContext]=\"{ buttonType: 'button' }\" />\n}\n\n<!-- Button Template -->\n<ng-template #buttonTemplate let-buttonType=\"buttonType\">\n @switch (buttonType) {\n @case ('anchor') {\n <a\n id=\"{{ name() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"link link--{{ align() }}\"\n [class.link--active]=\"active()\"\n [href]=\"redirect()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\"\n target=\"_blank\">\n <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n </a>\n }\n @case ('button') {\n @if (redirect()) {\n <!-- It has path to redirect -->\n <button\n id=\"{{ name() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"link link--{{ align() }}\"\n [class.link--active]=\"active()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\"\n [routerLink]=\"redirect()\">\n <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n </button>\n } @else {\n <!-- It doesn't have path to redirect -->\n <button\n id=\"{{ name() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"link link--{{ align() }}\"\n [class.link--active]=\"active()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\">\n <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n </button>\n }\n }\n }\n</ng-template>\n\n<!-- Content Button Template -->\n<ng-template #contentButtonTemplate>\n <ng-content />\n</ng-template>\n", styles: [":host{position:relative;z-index:1}.link{--gld-color: var(--gld-foreground-color);position:relative;display:inline-flex;align-items:center;padding:0;font:600 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);color:var(--gld-color);background:none;border:none;cursor:pointer;text-decoration:underline;will-change:color;transition:color var(--gld-animation-time--150)}.link--active,.link:active,.link:hover{--gld-color: var(--gld-purple)}.link--left{text-align:left}.link--right{text-align:right}.link--center{text-align:center}\n"] }]
|
|
501
|
-
}] });
|
|
501
|
+
}], propDecorators: { 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"] }] } });
|
|
502
502
|
|
|
503
503
|
// Angular Imports
|
|
504
504
|
const components$7 = [IconComponent];
|
|
505
505
|
class DropdownButtonComponent {
|
|
506
|
-
value = input.required();
|
|
507
|
-
icon = input(null);
|
|
508
|
-
iconSize = input(IconsSize.normal);
|
|
509
|
-
iconSpace = input(IconsSpace.none);
|
|
510
|
-
moveTopToBottom = input(0, { transform: numberAttribute });
|
|
511
|
-
moveLeftToRight = input(0, { transform: numberAttribute });
|
|
512
|
-
direction = input(DropdownDirection.left);
|
|
506
|
+
value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
507
|
+
icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
508
|
+
iconSize = input(IconsSize.normal, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
|
|
509
|
+
iconSpace = input(IconsSpace.none, ...(ngDevMode ? [{ debugName: "iconSpace" }] : []));
|
|
510
|
+
moveTopToBottom = input(0, ...(ngDevMode ? [{ debugName: "moveTopToBottom", transform: numberAttribute }] : [{ transform: numberAttribute }]));
|
|
511
|
+
moveLeftToRight = input(0, ...(ngDevMode ? [{ debugName: "moveLeftToRight", transform: numberAttribute }] : [{ transform: numberAttribute }]));
|
|
512
|
+
direction = input(DropdownDirection.left, ...(ngDevMode ? [{ debugName: "direction" }] : []));
|
|
513
513
|
changeValue = output();
|
|
514
|
-
current = signal(null);
|
|
515
|
-
disabled = signal(false);
|
|
516
|
-
error = signal(false);
|
|
517
|
-
selected = computed(() => Boolean(this.current() === this.value()));
|
|
518
|
-
buttonChild = viewChild('buttonChild', { read: ElementRef });
|
|
514
|
+
current = signal(null, ...(ngDevMode ? [{ debugName: "current" }] : []));
|
|
515
|
+
disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
516
|
+
error = signal(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
|
|
517
|
+
selected = computed(() => Boolean(this.current() === this.value()), ...(ngDevMode ? [{ debugName: "selected" }] : []));
|
|
518
|
+
buttonChild = viewChild('buttonChild', ...(ngDevMode ? [{ debugName: "buttonChild", read: ElementRef }] : [{ read: ElementRef }]));
|
|
519
519
|
select(value) {
|
|
520
520
|
this.changeValue.emit(value);
|
|
521
521
|
this.buttonChild()?.nativeElement.blur();
|
|
@@ -523,36 +523,36 @@ class DropdownButtonComponent {
|
|
|
523
523
|
keyup(value) {
|
|
524
524
|
this.select(value);
|
|
525
525
|
}
|
|
526
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
527
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
526
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DropdownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
527
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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\n", styles: [":host{position:relative;width:100%}.button{--gld-background: transparent;--gld-background--hover: var(--gld-gray-transparent--010);--gld-color: var(--gld-foreground-color);--gld-color--selected: var(--gld-pink);--gld-color--hover: var(--gld-blue);--gld-radius: var(--gld-radius--xxxs);--gld-height: 40px;padding:var(--gld-spacing--xxs) var(--gld-spacing--xs);width:100%;height:var(--gld-height);background:var(--gld-background);color:var(--gld-color);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:var(--gld-line-height);text-align:left;-webkit-user-select:none;user-select:none;outline:none;border:none;border-radius:var(--gld-radius);cursor:pointer;display:inline-flex;align-items:center;gap:var(--gld-spacing--xxs);will-change:background,transform,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover{--gld-color: var(--gld-color--hover);--gld-background: var(--gld-background--hover)}.button:active{transform:scale(.95)}.button span{text-transform:capitalize;-webkit-user-select:none;user-select:none}.button--direction-left{justify-content:flex-start}.button--direction-right{justify-content:flex-end}.button--selected,.button--selected:hover{--gld-color: var(--gld-color--selected)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gld-icon", inputs: ["icon", "size", "space", "moveTopToBottom", "moveLeftToRight", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
528
528
|
}
|
|
529
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
529
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DropdownButtonComponent, decorators: [{
|
|
530
530
|
type: Component,
|
|
531
531
|
args: [{ selector: 'gld-dropdown-button', imports: [...components$7], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n #buttonChild\n [tabindex]=\"disabled() ? '-1' : '0'\"\n class=\"button button--direction-{{ direction() }}\"\n [class.button--selected]=\"selected()\"\n (keyup.enter)=\"keyup(value())\"\n (click)=\"select(value())\">\n <!-- Icon -->\n @let innerIcon = icon();\n @if (innerIcon) {\n <gld-icon\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [icon]=\"innerIcon\"\n [size]=\"iconSize()\"\n [space]=\"iconSpace()\"\n [disabled]=\"disabled()\" />\n }\n <!-- Content -->\n <span>\n <ng-content> no content </ng-content>\n </span>\n</button>\n\n", styles: [":host{position:relative;width:100%}.button{--gld-background: transparent;--gld-background--hover: var(--gld-gray-transparent--010);--gld-color: var(--gld-foreground-color);--gld-color--selected: var(--gld-pink);--gld-color--hover: var(--gld-blue);--gld-radius: var(--gld-radius--xxxs);--gld-height: 40px;padding:var(--gld-spacing--xxs) var(--gld-spacing--xs);width:100%;height:var(--gld-height);background:var(--gld-background);color:var(--gld-color);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:var(--gld-line-height);text-align:left;-webkit-user-select:none;user-select:none;outline:none;border:none;border-radius:var(--gld-radius);cursor:pointer;display:inline-flex;align-items:center;gap:var(--gld-spacing--xxs);will-change:background,transform,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover{--gld-color: var(--gld-color--hover);--gld-background: var(--gld-background--hover)}.button:active{transform:scale(.95)}.button span{text-transform:capitalize;-webkit-user-select:none;user-select:none}.button--direction-left{justify-content:flex-start}.button--direction-right{justify-content:flex-end}.button--selected,.button--selected:hover{--gld-color: var(--gld-color--selected)}\n"] }]
|
|
532
|
-
}] });
|
|
532
|
+
}], 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 }] }] } });
|
|
533
533
|
|
|
534
534
|
// Angular Imports
|
|
535
535
|
const components$6 = [ButtonComponent, IconButtonComponent];
|
|
536
536
|
const directives = [DropdownMenuTemplateDirective];
|
|
537
537
|
class DropdownMenuComponent {
|
|
538
538
|
DropdownType = DropdownType;
|
|
539
|
-
name = input.required();
|
|
540
|
-
type = input.required();
|
|
541
|
-
color = input(ButtonColor.pink);
|
|
542
|
-
size = input(ButtonSize.normal);
|
|
543
|
-
icon = input(null);
|
|
544
|
-
iconSize = input();
|
|
545
|
-
moveTopToBottom = input(0, { transform: numberAttribute });
|
|
546
|
-
moveLeftToRight = input(0, { transform: numberAttribute });
|
|
547
|
-
disabled = input(false, { transform: booleanAttribute });
|
|
548
|
-
full = input(false, { transform: booleanAttribute });
|
|
549
|
-
direction = input(DropdownDirection.right);
|
|
550
|
-
background = input(false, { transform: booleanAttribute });
|
|
551
|
-
selected = input(false, { transform: booleanAttribute });
|
|
552
|
-
initialValue = input(null);
|
|
539
|
+
name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
|
|
540
|
+
type = input.required(...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
541
|
+
color = input(ButtonColor.pink, ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
542
|
+
size = input(ButtonSize.normal, ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
543
|
+
icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
544
|
+
iconSize = input(...(ngDevMode ? [undefined, { debugName: "iconSize" }] : []));
|
|
545
|
+
moveTopToBottom = input(0, ...(ngDevMode ? [{ debugName: "moveTopToBottom", transform: numberAttribute }] : [{ transform: numberAttribute }]));
|
|
546
|
+
moveLeftToRight = input(0, ...(ngDevMode ? [{ debugName: "moveLeftToRight", transform: numberAttribute }] : [{ transform: numberAttribute }]));
|
|
547
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
548
|
+
full = input(false, ...(ngDevMode ? [{ debugName: "full", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
549
|
+
direction = input(DropdownDirection.right, ...(ngDevMode ? [{ debugName: "direction" }] : []));
|
|
550
|
+
background = input(false, ...(ngDevMode ? [{ debugName: "background", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
551
|
+
selected = input(false, ...(ngDevMode ? [{ debugName: "selected", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
552
|
+
initialValue = input(null, ...(ngDevMode ? [{ debugName: "initialValue" }] : []));
|
|
553
553
|
changeValue = output();
|
|
554
554
|
changeFocus = output();
|
|
555
|
-
dropdownButtonChildren = contentChildren(DropdownButtonComponent);
|
|
555
|
+
dropdownButtonChildren = contentChildren(DropdownButtonComponent, ...(ngDevMode ? [{ debugName: "dropdownButtonChildren" }] : []));
|
|
556
556
|
constructor() {
|
|
557
557
|
effect(() => {
|
|
558
558
|
const initialValue = this.initialValue();
|
|
@@ -577,43 +577,43 @@ class DropdownMenuComponent {
|
|
|
577
577
|
updateErrorInChildren(error) {
|
|
578
578
|
this.dropdownButtonChildren().map((dropdownButton) => dropdownButton.error.set(error));
|
|
579
579
|
}
|
|
580
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
581
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
580
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
581
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: DropdownMenuComponent, isStandalone: true, selector: "gld-dropdown-menu", inputs: { 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() === DropdownType.button) {\n <gld-button\n #buttonChild\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 [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\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: ["name", "color", "size", "icon", "iconSize", "moveTopToBottom", "moveLeftToRight", "disabled", "full"], outputs: ["clicked"] }, { kind: "component", type: IconButtonComponent, selector: "gld-icon-button", inputs: ["icon", "name", "iconSize", "space", "moveTopToBottom", "moveLeftToRight", "background", "disabled", "color"], outputs: ["clicked"] }, { kind: "directive", type: DropdownMenuTemplateDirective, selector: "[gldDropdownMenuTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
582
582
|
}
|
|
583
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
583
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DropdownMenuComponent, decorators: [{
|
|
584
584
|
type: Component,
|
|
585
585
|
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 [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 [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\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"] }]
|
|
586
|
-
}], ctorParameters: () => [] });
|
|
586
|
+
}], ctorParameters: () => [], propDecorators: { 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 }] }] } });
|
|
587
587
|
|
|
588
588
|
// Angular Imports
|
|
589
589
|
class ToggleButtonComponent {
|
|
590
|
-
value = input.required();
|
|
590
|
+
value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
591
591
|
changeValue = output();
|
|
592
|
-
current = signal(null);
|
|
593
|
-
disabled = signal(false);
|
|
594
|
-
error = signal(false);
|
|
595
|
-
selected = computed(() => Boolean(this.current() === this.value()));
|
|
592
|
+
current = signal(null, ...(ngDevMode ? [{ debugName: "current" }] : []));
|
|
593
|
+
disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
594
|
+
error = signal(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
|
|
595
|
+
selected = computed(() => Boolean(this.current() === this.value()), ...(ngDevMode ? [{ debugName: "selected" }] : []));
|
|
596
596
|
select(value) {
|
|
597
597
|
this.changeValue.emit(value);
|
|
598
598
|
}
|
|
599
599
|
keyup(value) {
|
|
600
600
|
this.select(value);
|
|
601
601
|
}
|
|
602
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
603
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
602
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
603
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.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\n", styles: [".button{--gld-background: transparent;--gld-background--hover: var(--gld-pink-transparent--010);--gld-color: var(--gld-foreground-color);--gld-color--selected: var(--gld-pink);--gld-color--hover: var(--gld-blue);--gld-radius: var(--gld-radius--xxxs);padding:var(--gld-spacing--xxxs);width:100%;height:100%;max-width:100%;background:var(--gld-background);color:var(--gld-color);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:var(--gld-line-height);-webkit-user-select:none;user-select:none;outline:none;border:none;border-radius:var(--gld-radius);cursor:pointer;will-change:background,transform,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover{--gld-color: var(--gld-color--hover)}.button:active{transform:scale(.95)}.button--selected{--gld-background: var(--gld-background--hover);--gld-color: var(--gld-color--selected)}.button--selected:hover{--gld-color: var(--gld-color--selected)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
604
604
|
}
|
|
605
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
605
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ToggleButtonComponent, decorators: [{
|
|
606
606
|
type: Component,
|
|
607
607
|
args: [{ selector: 'gld-toggle-button', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n [tabindex]=\"disabled() ? '-1' : '0'\"\n class=\"button\"\n [class.button--selected]=\"selected()\"\n (keyup.enter)=\"keyup(value())\"\n (click)=\"select(value())\">\n <ng-content> empty button </ng-content>\n</button>\n\n", styles: [".button{--gld-background: transparent;--gld-background--hover: var(--gld-pink-transparent--010);--gld-color: var(--gld-foreground-color);--gld-color--selected: var(--gld-pink);--gld-color--hover: var(--gld-blue);--gld-radius: var(--gld-radius--xxxs);padding:var(--gld-spacing--xxxs);width:100%;height:100%;max-width:100%;background:var(--gld-background);color:var(--gld-color);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:var(--gld-line-height);-webkit-user-select:none;user-select:none;outline:none;border:none;border-radius:var(--gld-radius);cursor:pointer;will-change:background,transform,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover{--gld-color: var(--gld-color--hover)}.button:active{transform:scale(.95)}.button--selected{--gld-background: var(--gld-background--hover);--gld-color: var(--gld-color--selected)}.button--selected:hover{--gld-color: var(--gld-color--selected)}\n"] }]
|
|
608
|
-
}] });
|
|
608
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], changeValue: [{ type: i0.Output, args: ["changeValue"] }] } });
|
|
609
609
|
|
|
610
610
|
// Angular Imports
|
|
611
611
|
class ToggleGroupComponent {
|
|
612
|
-
name = input.required();
|
|
613
|
-
initialValue = input(null);
|
|
612
|
+
name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
|
|
613
|
+
initialValue = input(null, ...(ngDevMode ? [{ debugName: "initialValue" }] : []));
|
|
614
614
|
changeValue = output();
|
|
615
615
|
changeFocus = output();
|
|
616
|
-
toggleButtonChildren = contentChildren(ToggleButtonComponent);
|
|
616
|
+
toggleButtonChildren = contentChildren(ToggleButtonComponent, ...(ngDevMode ? [{ debugName: "toggleButtonChildren" }] : []));
|
|
617
617
|
constructor() {
|
|
618
618
|
effect(() => {
|
|
619
619
|
const initialValue = this.initialValue();
|
|
@@ -637,46 +637,48 @@ class ToggleGroupComponent {
|
|
|
637
637
|
updateErrorInChildren(error) {
|
|
638
638
|
this.toggleButtonChildren().map((toggleButton) => toggleButton.error.set(error));
|
|
639
639
|
}
|
|
640
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
641
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
640
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ToggleGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
641
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.0", type: ToggleGroupComponent, isStandalone: true, selector: "gld-toggle-group", inputs: { 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\" [attr.name]=\"name()\">\n <ng-content select=\"gld-toggle-button\" />\n</section>\n\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 });
|
|
642
642
|
}
|
|
643
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
643
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ToggleGroupComponent, decorators: [{
|
|
644
644
|
type: Component,
|
|
645
645
|
args: [{ selector: 'gld-toggle-group', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"toggle\" [attr.name]=\"name()\">\n <ng-content select=\"gld-toggle-button\" />\n</section>\n\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"] }]
|
|
646
|
-
}], ctorParameters: () => [] });
|
|
646
|
+
}], ctorParameters: () => [], propDecorators: { 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 }] }] } });
|
|
647
647
|
|
|
648
648
|
// Angular Imports
|
|
649
649
|
class InputErrorComponent {
|
|
650
650
|
Boolean = Boolean;
|
|
651
|
-
errors = input.required();
|
|
652
|
-
border = input(false, { transform: booleanAttribute });
|
|
653
|
-
content = contentChildren(InputErrorMessageDirective, {
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
hasContent = signal(false);
|
|
651
|
+
errors = input.required(...(ngDevMode ? [{ debugName: "errors" }] : []));
|
|
652
|
+
border = input(false, ...(ngDevMode ? [{ debugName: "border", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
653
|
+
content = contentChildren(InputErrorMessageDirective, ...(ngDevMode ? [{ debugName: "content", descendants: true }] : [{
|
|
654
|
+
descendants: true,
|
|
655
|
+
}]));
|
|
656
|
+
hasContent = signal(false, ...(ngDevMode ? [{ debugName: "hasContent" }] : []));
|
|
657
657
|
constructor() {
|
|
658
658
|
effect(() => this.hasContent.set(this.content()?.length ? true : false));
|
|
659
659
|
}
|
|
660
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
661
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
660
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InputErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
661
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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: InputErrorMessageDirective, 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 (true) {\n @case (Boolean(this.errors()?.['required'])) {\n This field is required!\n }\n @case (Boolean(this.errors()?.['email'])) {\n {{ this.errors()?.['email'] }}\n }\n @case (Boolean(this.errors()?.['maxlength'])) {\n This field must have a maximum of\n {{ this.errors()?.['maxlength'].requiredLength }}\n characters!\n }\n @case (Boolean(this.errors()?.['minlength'])) {\n This field must have a minimum of\n {{ this.errors()?.['minlength'].requiredLength }}\n characters!\n }\n @case (Boolean(this.errors()?.['isDate'])) {\n {{ this.errors()?.['isDate'] }}\n }\n @case (Boolean(this.errors()?.['minimumAge'])) {\n This field must meet the minimum age requirement of\n {{ this.errors()?.['minimumAge'].requiredAge }} years\n }\n @case (Boolean(this.errors()?.['naturalNumber'])) {\n {{ this.errors()?.['naturalNumber'] }}\n }\n @case (Boolean(this.errors()?.['mustMatch'])) {\n {{ this.errors()?.['mustMatch'] }}\n }\n @case (Boolean(this.errors()?.['mustUnmatch'])) {\n {{ this.errors()?.['mustUnmatch'] }}\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 });
|
|
662
662
|
}
|
|
663
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
663
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InputErrorComponent, decorators: [{
|
|
664
664
|
type: Component,
|
|
665
|
-
args: [{ selector: 'gld-input-error', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"error\" [class.error--with-border]=\"border()\">\
|
|
666
|
-
}], ctorParameters: () => [] })
|
|
665
|
+
args: [{ selector: 'gld-input-error', standalone: true, 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 (true) {\n @case (Boolean(this.errors()?.['required'])) {\n This field is required!\n }\n @case (Boolean(this.errors()?.['email'])) {\n {{ this.errors()?.['email'] }}\n }\n @case (Boolean(this.errors()?.['maxlength'])) {\n This field must have a maximum of\n {{ this.errors()?.['maxlength'].requiredLength }}\n characters!\n }\n @case (Boolean(this.errors()?.['minlength'])) {\n This field must have a minimum of\n {{ this.errors()?.['minlength'].requiredLength }}\n characters!\n }\n @case (Boolean(this.errors()?.['isDate'])) {\n {{ this.errors()?.['isDate'] }}\n }\n @case (Boolean(this.errors()?.['minimumAge'])) {\n This field must meet the minimum age requirement of\n {{ this.errors()?.['minimumAge'].requiredAge }} years\n }\n @case (Boolean(this.errors()?.['naturalNumber'])) {\n {{ this.errors()?.['naturalNumber'] }}\n }\n @case (Boolean(this.errors()?.['mustMatch'])) {\n {{ this.errors()?.['mustMatch'] }}\n }\n @case (Boolean(this.errors()?.['mustUnmatch'])) {\n {{ this.errors()?.['mustUnmatch'] }}\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"] }]
|
|
666
|
+
}], 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(() => InputErrorMessageDirective), { ...{
|
|
667
|
+
descendants: true,
|
|
668
|
+
}, isSignal: true }] }] } });
|
|
667
669
|
|
|
668
670
|
// Angular Imports
|
|
669
671
|
const components$5 = [InputErrorComponent];
|
|
670
672
|
class InputComponent {
|
|
671
673
|
#destroyRef = inject(DestroyRef);
|
|
672
674
|
#changeDetectorRef = inject(ChangeDetectorRef);
|
|
673
|
-
control = input.required();
|
|
674
|
-
name = input.required();
|
|
675
|
-
label = input('');
|
|
676
|
-
placeholder = input('');
|
|
677
|
-
type = input('text');
|
|
678
|
-
suffix = input(false, { transform: booleanAttribute });
|
|
679
|
-
innerControl = signal(new FormControl('', { nonNullable: true }));
|
|
675
|
+
control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
|
|
676
|
+
name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
|
|
677
|
+
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
678
|
+
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
679
|
+
type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
680
|
+
suffix = input(false, ...(ngDevMode ? [{ debugName: "suffix", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
681
|
+
innerControl = signal(new FormControl('', { nonNullable: true }), ...(ngDevMode ? [{ debugName: "innerControl" }] : []));
|
|
680
682
|
// eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
|
|
681
683
|
onChange = (value) => { };
|
|
682
684
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
@@ -716,16 +718,16 @@ class InputComponent {
|
|
|
716
718
|
this.onTouched();
|
|
717
719
|
// this.isMenuOpen.set(false)
|
|
718
720
|
}
|
|
719
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
720
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
721
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
722
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: InputComponent, isStandalone: true, selector: "gld-input", inputs: { control: { classPropertyName: "control", publicName: "control", 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: [
|
|
721
723
|
{
|
|
722
724
|
provide: NG_VALUE_ACCESSOR,
|
|
723
725
|
useExisting: forwardRef(() => InputComponent),
|
|
724
726
|
multi: true,
|
|
725
727
|
},
|
|
726
|
-
], ngImport: i0, template: "@let errors = control().invalid && (control().dirty || control().touched);\
|
|
728
|
+
], 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]=\"name()\">\n {{ label() }}\n </label>\n }\n\n <!-- Input -->\n <input\n id=\"input-{{ name() }}\"\n [tabindex]=\"disabled ? '-1' : '0'\"\n [name]=\"name()\"\n [type]=\"type()\"\n [placeholder]=\"placeholder()\"\n [formControl]=\"innerControl()\"\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 });
|
|
727
729
|
}
|
|
728
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
730
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InputComponent, decorators: [{
|
|
729
731
|
type: Component,
|
|
730
732
|
args: [{ selector: 'gld-input', standalone: true, imports: [ReactiveFormsModule, NgTemplateOutlet, ...components$5], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
731
733
|
{
|
|
@@ -733,26 +735,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
733
735
|
useExisting: forwardRef(() => InputComponent),
|
|
734
736
|
multi: true,
|
|
735
737
|
},
|
|
736
|
-
], template: "@let errors = control().invalid && (control().dirty || control().touched);\
|
|
737
|
-
}], ctorParameters: () => [] });
|
|
738
|
+
], 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]=\"name()\">\n {{ label() }}\n </label>\n }\n\n <!-- Input -->\n <input\n id=\"input-{{ name() }}\"\n [tabindex]=\"disabled ? '-1' : '0'\"\n [name]=\"name()\"\n [type]=\"type()\"\n [placeholder]=\"placeholder()\"\n [formControl]=\"innerControl()\"\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"] }]
|
|
739
|
+
}], ctorParameters: () => [], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", 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 }] }] } });
|
|
738
740
|
|
|
739
741
|
// Angular Imports
|
|
740
742
|
const components$4 = [InputErrorComponent];
|
|
741
743
|
class InputDateComponent {
|
|
742
744
|
#destroyRef = inject(DestroyRef);
|
|
743
745
|
#changeDetectorRef = inject(ChangeDetectorRef);
|
|
744
|
-
control = input.required();
|
|
745
|
-
name = input.required();
|
|
746
|
-
label = input('');
|
|
747
|
-
min = input('', {
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
max = input('', {
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
placeholder = input('');
|
|
754
|
-
suffix = input(false, { transform: booleanAttribute });
|
|
755
|
-
innerControl = signal(new FormControl('', { nonNullable: true }));
|
|
746
|
+
control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
|
|
747
|
+
name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
|
|
748
|
+
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
749
|
+
min = input('', ...(ngDevMode ? [{ debugName: "min", transform: (value) => formatDateFromISOToYYYYMMDD(value) }] : [{
|
|
750
|
+
transform: (value) => formatDateFromISOToYYYYMMDD(value),
|
|
751
|
+
}]));
|
|
752
|
+
max = input('', ...(ngDevMode ? [{ debugName: "max", transform: (value) => formatDateFromISOToYYYYMMDD(value) }] : [{
|
|
753
|
+
transform: (value) => formatDateFromISOToYYYYMMDD(value),
|
|
754
|
+
}]));
|
|
755
|
+
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
756
|
+
suffix = input(false, ...(ngDevMode ? [{ debugName: "suffix", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
757
|
+
innerControl = signal(new FormControl('', { nonNullable: true }), ...(ngDevMode ? [{ debugName: "innerControl" }] : []));
|
|
756
758
|
// eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
|
|
757
759
|
onChange = (value) => { };
|
|
758
760
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
@@ -787,8 +789,8 @@ class InputDateComponent {
|
|
|
787
789
|
// console.log('registerOnTouched')
|
|
788
790
|
this.onTouched = onTouched;
|
|
789
791
|
}
|
|
790
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
791
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
792
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InputDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
793
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: InputDateComponent, isStandalone: true, selector: "gld-input-date", inputs: { control: { classPropertyName: "control", publicName: "control", 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 }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
792
794
|
{
|
|
793
795
|
provide: NG_VALUE_ACCESSOR,
|
|
794
796
|
useExisting: forwardRef(() => InputDateComponent),
|
|
@@ -796,7 +798,7 @@ class InputDateComponent {
|
|
|
796
798
|
},
|
|
797
799
|
], ngImport: i0, template: "@let errors = control().invalid && (control().dirty || control().touched);\n@let disabled = control().disabled || (control().pending && control().disabled);\n\n<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\n\t<!-- Label -->\n\t@if (label()) {\n\t\t<label [for]=\"name()\">\n\t\t\t{{ label() }}\n\t\t</label>\n\t}\n\n\t<!-- Input -->\n\t<input\n\t\ttype=\"date\"\n\t\tid=\"input-date-{{ name() }}\"\n\t\t[name]=\"name()\"\n\t\t[attr.min]=\"min()\"\n\t\t[attr.max]=\"max()\"\n\t\t[placeholder]=\"placeholder()\"\n\t\t[formControl]=\"innerControl()\"\n\t\t(blur)=\"onTouched()\" />\n\n\t<!-- Suffix -->\n\t@if (suffix()) {\n\t\t<ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\n\t}\n</section>\n<!-- Errors -->\n@if (errors) {\n\t<ng-content select=\"gld-input-error\">\n\t\t<gld-input-error [errors]=\"control().errors\" />\n\t</ng-content>\n} @else {\n\t<!-- Hint -->\n\t<ng-content select=\"gld-input-hint\" />\n}\n\n<!-- Suffix Template -->\n<ng-template #suffixTemplate>\n\t<span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\n\t\t<ng-content select=\"[inputSuffix]\" />\n\t</span>\n</ng-template>\n\n<!-- <h3>Debugging</h3> -->\n<!-- <section>errors: {{ control().errors | json }}</section> -->\n<!-- <section>errors: {{ errors }}</section> -->\n<!-- <section>invalid: {{ control().invalid }}</section> -->\n<!-- <section>dirty: {{ control().dirty }}</section> -->\n<!-- <section>touched: {{ control().touched }}</section> -->\n<!-- <section>disable: {{ control().disabled }}</section> -->\n<!-- <section>status: {{ control().status }}</section> -->\n\n", styles: [".input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-height: 40px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input input{width:100%;min-width:var(--gld-min-with);height:var(--gld-height);padding:var(--gld-spacing--xxs);padding-right:var(--gld-spacing--m);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input input:focus{--gld-border-color: var(--gld-blue)}.input input::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:0;display:inline-block;color:var(--gld-color);will-change:transform,color;transition:color var(--gld-animation-time) ease;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputErrorComponent, selector: "gld-input-error", inputs: ["errors", "border"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
798
800
|
}
|
|
799
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
801
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InputDateComponent, decorators: [{
|
|
800
802
|
type: Component,
|
|
801
803
|
args: [{ selector: 'gld-input-date', standalone: true, imports: [ReactiveFormsModule, NgTemplateOutlet, ...components$4], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
802
804
|
{
|
|
@@ -805,16 +807,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
805
807
|
multi: true,
|
|
806
808
|
},
|
|
807
809
|
], template: "@let errors = control().invalid && (control().dirty || control().touched);\n@let disabled = control().disabled || (control().pending && control().disabled);\n\n<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\n\t<!-- Label -->\n\t@if (label()) {\n\t\t<label [for]=\"name()\">\n\t\t\t{{ label() }}\n\t\t</label>\n\t}\n\n\t<!-- Input -->\n\t<input\n\t\ttype=\"date\"\n\t\tid=\"input-date-{{ name() }}\"\n\t\t[name]=\"name()\"\n\t\t[attr.min]=\"min()\"\n\t\t[attr.max]=\"max()\"\n\t\t[placeholder]=\"placeholder()\"\n\t\t[formControl]=\"innerControl()\"\n\t\t(blur)=\"onTouched()\" />\n\n\t<!-- Suffix -->\n\t@if (suffix()) {\n\t\t<ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\n\t}\n</section>\n<!-- Errors -->\n@if (errors) {\n\t<ng-content select=\"gld-input-error\">\n\t\t<gld-input-error [errors]=\"control().errors\" />\n\t</ng-content>\n} @else {\n\t<!-- Hint -->\n\t<ng-content select=\"gld-input-hint\" />\n}\n\n<!-- Suffix Template -->\n<ng-template #suffixTemplate>\n\t<span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\n\t\t<ng-content select=\"[inputSuffix]\" />\n\t</span>\n</ng-template>\n\n<!-- <h3>Debugging</h3> -->\n<!-- <section>errors: {{ control().errors | json }}</section> -->\n<!-- <section>errors: {{ errors }}</section> -->\n<!-- <section>invalid: {{ control().invalid }}</section> -->\n<!-- <section>dirty: {{ control().dirty }}</section> -->\n<!-- <section>touched: {{ control().touched }}</section> -->\n<!-- <section>disable: {{ control().disabled }}</section> -->\n<!-- <section>status: {{ control().status }}</section> -->\n\n", styles: [".input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-height: 40px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input input{width:100%;min-width:var(--gld-min-with);height:var(--gld-height);padding:var(--gld-spacing--xxs);padding-right:var(--gld-spacing--m);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input input:focus{--gld-border-color: var(--gld-blue)}.input input::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:0;display:inline-block;color:var(--gld-color);will-change:transform,color;transition:color var(--gld-animation-time) ease;cursor:pointer}\n"] }]
|
|
808
|
-
}], ctorParameters: () => [] });
|
|
810
|
+
}], ctorParameters: () => [], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", 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 }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }] } });
|
|
809
811
|
|
|
810
812
|
// Angular Imports
|
|
811
813
|
class InputHintComponent {
|
|
812
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
813
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
814
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InputHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
815
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: InputHintComponent, isStandalone: true, selector: "gld-input-hint", ngImport: i0, template: "<section class=\"hint\">\n\t<span class=\"hint__message\">\n\t\t<ng-content>hint empty</ng-content>\n\t</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 });
|
|
814
816
|
}
|
|
815
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
817
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InputHintComponent, decorators: [{
|
|
816
818
|
type: Component,
|
|
817
|
-
args: [{ selector: 'gld-input-hint', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"hint\">\
|
|
819
|
+
args: [{ selector: 'gld-input-hint', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"hint\">\n\t<span class=\"hint__message\">\n\t\t<ng-content>hint empty</ng-content>\n\t</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"] }]
|
|
818
820
|
}] });
|
|
819
821
|
|
|
820
822
|
// Angular Imports
|
|
@@ -822,17 +824,17 @@ const components$3 = [InputErrorComponent];
|
|
|
822
824
|
class TextareaComponent {
|
|
823
825
|
#destroyRef = inject(DestroyRef);
|
|
824
826
|
#changeDetectorRef = inject(ChangeDetectorRef);
|
|
825
|
-
control = input.required();
|
|
826
|
-
name = input.required();
|
|
827
|
-
label = input('');
|
|
828
|
-
placeholder = input('');
|
|
829
|
-
type = input('text');
|
|
830
|
-
suffix = input(false, { transform: booleanAttribute });
|
|
827
|
+
control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
|
|
828
|
+
name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
|
|
829
|
+
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
830
|
+
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
831
|
+
type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
832
|
+
suffix = input(false, ...(ngDevMode ? [{ debugName: "suffix", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
831
833
|
// eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
|
|
832
834
|
onChange = (value) => { };
|
|
833
835
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
834
836
|
onTouched = () => { };
|
|
835
|
-
innerControl = signal(new FormControl('', { nonNullable: true }));
|
|
837
|
+
innerControl = signal(new FormControl('', { nonNullable: true }), ...(ngDevMode ? [{ debugName: "innerControl" }] : []));
|
|
836
838
|
constructor() {
|
|
837
839
|
this.innerControl()
|
|
838
840
|
.valueChanges.pipe(takeUntilDestroyed(this.#destroyRef))
|
|
@@ -868,16 +870,16 @@ class TextareaComponent {
|
|
|
868
870
|
this.onTouched();
|
|
869
871
|
// this.isMenuOpen.set(false)
|
|
870
872
|
}
|
|
871
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
872
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
873
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
874
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TextareaComponent, isStandalone: true, selector: "gld-textarea", inputs: { control: { classPropertyName: "control", publicName: "control", 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: [
|
|
873
875
|
{
|
|
874
876
|
provide: NG_VALUE_ACCESSOR,
|
|
875
877
|
useExisting: forwardRef(() => TextareaComponent),
|
|
876
878
|
multi: true,
|
|
877
879
|
},
|
|
878
|
-
], ngImport: i0, template: "@let errors = control().invalid && (control().dirty || control().touched);\
|
|
880
|
+
], 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]=\"name()\">\n {{ label() }}\n </label>\n }\n\n <!-- Input -->\n <textarea\n id=\"input-textarea-{{ name() }}\"\n [name]=\"name()\"\n [placeholder]=\"placeholder()\"\n [formControl]=\"innerControl()\"\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 });
|
|
879
881
|
}
|
|
880
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
882
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
881
883
|
type: Component,
|
|
882
884
|
args: [{ selector: 'gld-textarea', standalone: true, imports: [ReactiveFormsModule, NgTemplateOutlet, ...components$3], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
883
885
|
{
|
|
@@ -885,18 +887,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
885
887
|
useExisting: forwardRef(() => TextareaComponent),
|
|
886
888
|
multi: true,
|
|
887
889
|
},
|
|
888
|
-
], template: "@let errors = control().invalid && (control().dirty || control().touched);\
|
|
889
|
-
}], ctorParameters: () => [] });
|
|
890
|
+
], 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]=\"name()\">\n {{ label() }}\n </label>\n }\n\n <!-- Input -->\n <textarea\n id=\"input-textarea-{{ name() }}\"\n [name]=\"name()\"\n [placeholder]=\"placeholder()\"\n [formControl]=\"innerControl()\"\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"] }]
|
|
891
|
+
}], ctorParameters: () => [], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", 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 }] }] } });
|
|
890
892
|
|
|
891
893
|
// Angular Imports
|
|
892
894
|
class RadioButtonComponent {
|
|
893
|
-
value = input.required();
|
|
895
|
+
value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
894
896
|
changeValue = output();
|
|
895
897
|
changeFocus = output();
|
|
896
|
-
current = signal(null);
|
|
897
|
-
disabled = signal(false);
|
|
898
|
-
error = signal(false);
|
|
899
|
-
selected = computed(() => Boolean(this.current() === this.value()));
|
|
898
|
+
current = signal(null, ...(ngDevMode ? [{ debugName: "current" }] : []));
|
|
899
|
+
disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
900
|
+
error = signal(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
|
|
901
|
+
selected = computed(() => Boolean(this.current() === this.value()), ...(ngDevMode ? [{ debugName: "selected" }] : []));
|
|
900
902
|
select(value) {
|
|
901
903
|
this.changeValue.emit(value);
|
|
902
904
|
}
|
|
@@ -909,25 +911,25 @@ class RadioButtonComponent {
|
|
|
909
911
|
onBlur() {
|
|
910
912
|
this.changeFocus.emit(false);
|
|
911
913
|
}
|
|
912
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
913
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
914
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
915
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.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\t[tabindex]=\"disabled() ? '-1' : '0'\"\n\t(keyup.enter)=\"keyup(value())\"\n\t(click)=\"select(value())\"\n\tclass=\"radio\"\n\t[class.radio--selected]=\"selected()\"\n\t[class.radio--disabled]=\"disabled()\"\n\t[class.radio--error]=\"error()\"\n\t(focus)=\"onFocus()\"\n\t(blur)=\"onBlur()\"\n\t(keyup.escape)=\"onBlur()\">\n\t<span class=\"radio__icon\" [class.radio__icon--selected]=\"selected()\"></span>\n\n\t<span class=\"radio__label\">\n\t\t<ng-content>empty radio button</ng-content>\n\t</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 });
|
|
914
916
|
}
|
|
915
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
917
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: RadioButtonComponent, decorators: [{
|
|
916
918
|
type: Component,
|
|
917
|
-
args: [{ selector: 'gld-radio-button', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\
|
|
918
|
-
}] });
|
|
919
|
+
args: [{ selector: 'gld-radio-button', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n\t[tabindex]=\"disabled() ? '-1' : '0'\"\n\t(keyup.enter)=\"keyup(value())\"\n\t(click)=\"select(value())\"\n\tclass=\"radio\"\n\t[class.radio--selected]=\"selected()\"\n\t[class.radio--disabled]=\"disabled()\"\n\t[class.radio--error]=\"error()\"\n\t(focus)=\"onFocus()\"\n\t(blur)=\"onBlur()\"\n\t(keyup.escape)=\"onBlur()\">\n\t<span class=\"radio__icon\" [class.radio__icon--selected]=\"selected()\"></span>\n\n\t<span class=\"radio__label\">\n\t\t<ng-content>empty radio button</ng-content>\n\t</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"] }]
|
|
920
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], changeValue: [{ type: i0.Output, args: ["changeValue"] }], changeFocus: [{ type: i0.Output, args: ["changeFocus"] }] } });
|
|
919
921
|
|
|
920
922
|
// Angular Imports
|
|
921
923
|
const components$2 = [InputErrorComponent];
|
|
922
924
|
class RadioGroupComponent {
|
|
923
925
|
#destroyRef = inject(DestroyRef);
|
|
924
926
|
#changeDetectorRef = inject(ChangeDetectorRef);
|
|
925
|
-
control = input.required();
|
|
926
|
-
name = input.required();
|
|
927
|
-
label = input('');
|
|
928
|
-
direction = input(RadioDirection.horizontal);
|
|
929
|
-
radioButtonChildren = contentChildren(RadioButtonComponent);
|
|
930
|
-
innerControl = signal(new FormControl('', { nonNullable: true }));
|
|
927
|
+
control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
|
|
928
|
+
name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
|
|
929
|
+
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
930
|
+
direction = input(RadioDirection.horizontal, ...(ngDevMode ? [{ debugName: "direction" }] : []));
|
|
931
|
+
radioButtonChildren = contentChildren(RadioButtonComponent, ...(ngDevMode ? [{ debugName: "radioButtonChildren" }] : []));
|
|
932
|
+
innerControl = signal(new FormControl('', { nonNullable: true }), ...(ngDevMode ? [{ debugName: "innerControl" }] : []));
|
|
931
933
|
// eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
|
|
932
934
|
onChange = (value) => { };
|
|
933
935
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
@@ -991,16 +993,16 @@ class RadioGroupComponent {
|
|
|
991
993
|
#updateDisabledInChildren(disabled) {
|
|
992
994
|
this.radioButtonChildren().map((radioButton) => radioButton.disabled.set(disabled));
|
|
993
995
|
}
|
|
994
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
995
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
996
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
997
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: RadioGroupComponent, isStandalone: true, selector: "gld-radio-group", inputs: { control: { classPropertyName: "control", publicName: "control", 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: [
|
|
996
998
|
{
|
|
997
999
|
provide: NG_VALUE_ACCESSOR,
|
|
998
1000
|
useExisting: forwardRef(() => RadioGroupComponent),
|
|
999
1001
|
multi: true,
|
|
1000
1002
|
},
|
|
1001
|
-
], queries: [{ propertyName: "radioButtonChildren", predicate: RadioButtonComponent, isSignal: true }], ngImport: i0, template: "@let errors = control().invalid && (control().dirty || control().touched);\
|
|
1003
|
+
], 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\" [attr.name]=\"name()\">\n <!-- Label -->\n @if (label()) {\n <label [for]=\"name()\">\n {{ label() }}\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 });
|
|
1002
1004
|
}
|
|
1003
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1005
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: RadioGroupComponent, decorators: [{
|
|
1004
1006
|
type: Component,
|
|
1005
1007
|
args: [{ selector: 'gld-radio-group', standalone: true, imports: [...components$2], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
1006
1008
|
{
|
|
@@ -1008,13 +1010,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
1008
1010
|
useExisting: forwardRef(() => RadioGroupComponent),
|
|
1009
1011
|
multi: true,
|
|
1010
1012
|
},
|
|
1011
|
-
], template: "@let errors = control().invalid && (control().dirty || control().touched);\
|
|
1012
|
-
}], ctorParameters: () => [] });
|
|
1013
|
+
], 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\" [attr.name]=\"name()\">\n <!-- Label -->\n @if (label()) {\n <label [for]=\"name()\">\n {{ label() }}\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"] }]
|
|
1014
|
+
}], ctorParameters: () => [], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", 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 }] }] } });
|
|
1013
1015
|
|
|
1014
1016
|
// Angular Imports
|
|
1015
1017
|
class SelectOptionComponent {
|
|
1016
|
-
value = input.required();
|
|
1017
|
-
disabled = input(false, { transform: booleanAttribute });
|
|
1018
|
+
value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
1019
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
1018
1020
|
selected = output();
|
|
1019
1021
|
changeFocus = output();
|
|
1020
1022
|
select() {
|
|
@@ -1030,13 +1032,13 @@ class SelectOptionComponent {
|
|
|
1030
1032
|
onBlur() {
|
|
1031
1033
|
this.changeFocus.emit(false);
|
|
1032
1034
|
}
|
|
1033
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1034
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
1035
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1036
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.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 });
|
|
1035
1037
|
}
|
|
1036
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1038
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SelectOptionComponent, decorators: [{
|
|
1037
1039
|
type: Component,
|
|
1038
|
-
args: [{ selector: 'gld-select-option', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\
|
|
1039
|
-
}] });
|
|
1040
|
+
args: [{ selector: 'gld-select-option', standalone: true, 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"] }]
|
|
1041
|
+
}], 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"] }] } });
|
|
1040
1042
|
|
|
1041
1043
|
// Angular Imports
|
|
1042
1044
|
const components$1 = [IconComponent, InputErrorComponent];
|
|
@@ -1044,15 +1046,15 @@ class SelectComponent {
|
|
|
1044
1046
|
#destroyRef = inject(DestroyRef);
|
|
1045
1047
|
#changeDetectorRef = inject(ChangeDetectorRef);
|
|
1046
1048
|
Icons = Icons;
|
|
1047
|
-
control = input.required();
|
|
1048
|
-
name = input.required();
|
|
1049
|
-
label = input('');
|
|
1050
|
-
placeholder = input('');
|
|
1051
|
-
transform = input((value) => String(value));
|
|
1052
|
-
selectElement = viewChild('selectElement');
|
|
1053
|
-
selectOptionChildren = contentChildren(SelectOptionComponent);
|
|
1054
|
-
innerControl = signal(new FormControl('', { nonNullable: true }));
|
|
1055
|
-
isMenuOpen = signal(false);
|
|
1049
|
+
control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
|
|
1050
|
+
name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
|
|
1051
|
+
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
1052
|
+
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
1053
|
+
transform = input((value) => String(value), ...(ngDevMode ? [{ debugName: "transform" }] : []));
|
|
1054
|
+
selectElement = viewChild('selectElement', ...(ngDevMode ? [{ debugName: "selectElement" }] : []));
|
|
1055
|
+
selectOptionChildren = contentChildren(SelectOptionComponent, ...(ngDevMode ? [{ debugName: "selectOptionChildren" }] : []));
|
|
1056
|
+
innerControl = signal(new FormControl('', { nonNullable: true }), ...(ngDevMode ? [{ debugName: "innerControl" }] : []));
|
|
1057
|
+
isMenuOpen = signal(false, ...(ngDevMode ? [{ debugName: "isMenuOpen" }] : []));
|
|
1056
1058
|
// eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
|
|
1057
1059
|
onChange = (value) => { };
|
|
1058
1060
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
@@ -1150,16 +1152,16 @@ class SelectComponent {
|
|
|
1150
1152
|
});
|
|
1151
1153
|
});
|
|
1152
1154
|
}
|
|
1153
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1154
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1155
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1156
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: SelectComponent, isStandalone: true, selector: "gld-select", inputs: { control: { classPropertyName: "control", publicName: "control", 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 }, transform: { classPropertyName: "transform", publicName: "transform", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
1155
1157
|
{
|
|
1156
1158
|
provide: NG_VALUE_ACCESSOR,
|
|
1157
1159
|
useExisting: forwardRef(() => SelectComponent),
|
|
1158
1160
|
multi: true,
|
|
1159
1161
|
},
|
|
1160
|
-
], queries: [{ propertyName: "selectOptionChildren", predicate: SelectOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["selectElement"], descendants: true, isSignal: true }], ngImport: i0, template: "\r\n@let errors = control().invalid && (control().dirty || control().touched);\r\n@let disabled = control().disabled || (control().pending && control().disabled);\r\n\r\n<section #selectElement class=\"select\">\r\n\t<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\r\n\t\t<!-- Label -->\r\n\t\t@if (label()) {\r\n\t\t\t<label [for]=\"name()\">\r\n\t\t\t\t{{ label() }}\r\n\t\t\t</label>\r\n\t\t}\r\n\t\t<!-- Input -->\r\n\t\t<input\r\n\t\t\ttype=\"text\"\r\n\t\t\tid=\"input-select-{{ name() }}\"\r\n\t\t\t[tabindex]=\"disabled ? '-1' : '0'\"\r\n\t\t\t[name]=\"name()\"\r\n\t\t\t[placeholder]=\"placeholder()\"\r\n\t\t\t[formControl]=\"innerControl()\"\r\n\t\t\t(focus)=\"onFocus()\"\r\n\t\t\t(blur)=\"onBlur()\"\r\n\t\t\t(keyup.escape)=\"onBlur()\" />\r\n\r\n\t\t<!-- Suffix -->\r\n\t\t<ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\r\n\r\n\t\t<!-- Menu -->\r\n\t\t<ng-container [ngTemplateOutlet]=\"menuTemplate\" />\r\n\t</section>\r\n\t<!-- Errors -->\r\n\t@if (errors) {\r\n\t\t<ng-content select=\"gld-input-error\">\r\n\t\t\t<gld-input-error [errors]=\"control().errors\" />\r\n\t\t</ng-content>\r\n\t} @else {\r\n\t\t<!-- Hint -->\r\n\t\t<ng-content select=\"gld-input-hint\" />\r\n\t}\r\n</section>\r\n\r\n<!-- Menu Template -->\r\n<ng-template #menuTemplate>\r\n\t<section class=\"select-menu\" [class.select-menu--opened]=\"isMenuOpen()\">\r\n\t\t<ng-content select=\"gld-select-option\" />\r\n\t</section>\r\n</ng-template>\r\n\r\n<!-- Suffix Template -->\r\n<ng-template #suffixTemplate>\r\n\t@if (control().pending) {\r\n\t\t<gld-icon\r\n\t\t\tsize=\"small\"\r\n\t\t\tclass=\"input-icon input-icon--animated\"\r\n\t\t\t[class.input-icon--error]=\"errors\"\r\n\t\t\t[icon]=\"Icons.loader4Fill\"\r\n\t\t\t[disabled]=\"disabled\" />\r\n\t} @else {\r\n\t\t<gld-icon\r\n\t\t\tsize=\"small\"\r\n\t\t\tclass=\"input-icon\"\r\n\t\t\t[class.input-icon--rotated]=\"isMenuOpen()\"\r\n\t\t\t[class.input-icon--error]=\"errors\"\r\n\t\t\t[icon]=\"Icons.arrowDownSLine\"\r\n\t\t\t[disabled]=\"disabled\"\r\n\t\t\t(clicked)=\"arrowIconClicked()\" />\r\n\t}\r\n</ng-template>\r\n\r\n<!-- <h3>Debugging</h3> -->\r\n<!-- <section>errors: {{ control().errors | json }}</section> -->\r\n<!-- <section>errors: {{ errors }}</section> -->\r\n<!-- <section>invalid: {{ control().invalid }}</section> -->\r\n<!-- <section>dirty: {{ control().dirty }}</section> -->\r\n<!-- <section>touched: {{ control().touched }}</section> -->\r\n<!-- <section>disable: {{ control().disabled }}</section> -->\r\n<!-- <section>status: {{ control().status }}</section> -->\r\n\r\n<!-- Suffix Template -->\r\n<ng-template #suffixTemplate>\r\n\t<gld-icon\r\n\t\tsize=\"small\"\r\n\t\tclass=\"input-icon\"\r\n\t\t[class.input-icon--error]=\"errors\"\r\n\t\t[icon]=\"Icons.arrowDownSLine\" />\r\n</ng-template>\r\n\r\n<!-- <h3>Debugging</h3> -->\r\n<!-- <section>errors: {{ control().errors | json }}</section> -->\r\n<!-- <section>errors: {{ errors }}</section> -->\r\n<!-- <section>invalid: {{ control().invalid }}</section> -->\r\n<!-- <section>dirty: {{ control().dirty }}</section> -->\r\n<!-- <section>touched: {{ control().touched }}</section> -->\r\n<!-- <section>disable: {{ control().disabled }}</section> -->\r\n", styles: ["@charset \"UTF-8\";:root{--gld-break-point--zero: 0;--gld-break-point--mobile: 320px;--gld-break-point--landscape: 576px;--gld-break-point--tablet: 768px;--gld-break-point--desktop: 1080px;--gld-break-point--extra-desktop: 1280px;--gld-font-size--heading-one: 36px;--gld-font-size--heading-two: 26px;--gld-font-size--heading-three: 20px;--gld-font-size--normal: 16px;--gld-font-size--small: 12px;--gld-font-size--tiny: 8px;--gld-font--poppins: \"Poppins\", sans-serif;--gld-radius--z: 0;--gld-radius--xxxs: 4px;--gld-radius--xxs: 6px;--gld-radius--xs: 8px;--gld-radius--s: 12px;--gld-radius--m: 16px;--gld-radius--l: 24px;--gld-radius--xl: 32px;--gld-radius--xxl: 40px;--gld-spacing--z: 0;--gld-spacing--xxxs: 4px;--gld-spacing--xxs: 8px;--gld-spacing--xs: 12px;--gld-spacing--s: 16px;--gld-spacing--m: 24px;--gld-spacing--l: 32px;--gld-spacing--xl: 48px;--gld-spacing--xxl: 70px;--gld-zindex--one: 1000;--gld-zindex--two: 2000;--gld-zindex--three: 3000;--gld-zindex--four: 4000;--gld-zindex--five: 5000;--gld-icon-size--large: 48px;--gld-icon-size--medium: 40px;--gld-icon-size--normal: 32px;--gld-icon-size--small: 24px;--gld-icon-size--tiny: 16px;--gld-red: #ef4444;--gld-red-transparent--005: rgba(239, 68, 68, .05);--gld-red-transparent--010: rgba(239, 68, 68, .1);--gld-red-transparent--020: rgba(239, 68, 68, .2);--gld-blue: #3c82f6;--gld-blue-transparent--005: rgba(60, 130, 246, .05);--gld-blue-transparent--010: rgba(60, 130, 246, .1);--gld-blue-transparent--020: rgba(60, 130, 246, .2);--gld-green: #12b981;--gld-green-transparent--005: rgba(18, 185, 129, .05);--gld-green-transparent--010: rgba(18, 185, 129, .1);--gld-green-transparent--020: rgba(18, 185, 129, .2);--gld-purple: #a855f7;--gld-purple-transparent--005: rgba(168, 85, 247, .05);--gld-purple-transparent--010: rgba(168, 85, 247, .1);--gld-purple-transparent--020: rgba(168, 85, 247, .2);--gld-purple-transparent--080: rgba(168, 85, 247, .8);--gld-mustard: #ebb305;--gld-mustard-transparent--005: rgba(235, 179, 5, .05);--gld-mustard-transparent--010: rgba(235, 179, 5, .1);--gld-mustard-transparent--020: rgba(235, 179, 5, .2);--gld-orange: #f97315;--gld-orange-transparent--005: rgba(249, 115, 21, .05);--gld-orange-transparent--010: rgba(249, 115, 21, .1);--gld-orange-transparent--020: rgba(249, 115, 21, .2);--gld-pink: #ec4899;--gld-pink-transparent--005: rgba(236, 72, 153, .05);--gld-pink-transparent--010: rgba(236, 72, 153, .1);--gld-pink-transparent--020: rgba(236, 72, 153, .2);--gld-pink-transparent--040: rgba(236, 72, 153, .4);--gld-pink-transparent--060: rgba(236, 72, 153, .6);--gld-pink-transparent--080: rgba(236, 72, 153, .8);--gld-gray: #c1c7e1;--gld-gray-transparent--010: rgba(193, 199, 225, .1);--gld-gray-transparent--020: rgba(193, 199, 225, .2);--gld-gray-transparent--030: rgba(193, 199, 225, .3);--gld-gray-transparent--040: rgba(193, 199, 225, .4);--gld-gray-transparent--050: rgba(193, 199, 225, .5);--gld-gray-transparent--060: rgba(193, 199, 225, .6);--gld-gray-transparent--070: rgba(193, 199, 225, .7);--gld-gray-transparent--080: rgba(193, 199, 225, .8);--gld-gray-transparent--090: rgba(193, 199, 225, .9);--gld-white: #fff;--gld-whitelight: #f9fafb;--gld-whitelight-transparent--010: rgba(249, 250, 251, .1);--gld-whitelight-transparent--020: rgba(249, 250, 251, .2);--gld-whitelight-transparent--030: rgba(249, 250, 251, .3);--gld-whitelight-transparent--040: rgba(249, 250, 251, .4);--gld-whitelight-transparent--050: rgba(249, 250, 251, .5);--gld-whitelight-transparent--060: rgba(249, 250, 251, .6);--gld-whitelight-transparent--070: rgba(249, 250, 251, .7);--gld-whitelight-transparent--080: rgba(249, 250, 251, .8);--gld-whitelight-transparent--090: rgba(249, 250, 251, .9);--gld-darkblue: #101827;--gld-darkblue-transparent--010: rgba(16, 24, 39, .1);--gld-darkblue-transparent--020: rgba(16, 24, 39, .2);--gld-darkblue-transparent--030: rgba(16, 24, 39, .3);--gld-darkblue-transparent--040: rgba(16, 24, 39, .4);--gld-darkblue-transparent--050: rgba(16, 24, 39, .5);--gld-darkblue-transparent--060: rgba(16, 24, 39, .6);--gld-darkblue-transparent--070: rgba(16, 24, 39, .7);--gld-darkblue-transparent--080: rgba(16, 24, 39, .8);--gld-darkblue-transparent--090: rgba(16, 24, 39, .9);--gld-border-size: 2px;--gld-animation-time--150: .15s;--gld-animation-time--250: .25s;--gld-animation-time--10s: 10s;--gld-line-height: 1.2;--gld-max-width: 1280px;--gld-navbar-height: 50px;--gld-sidebar-width: 250px}*,*:before,*:after{box-sizing:border-box;min-width:0}html,body{font-family:var(--gld-font--poppins)}body{margin:0}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin:0}p{text-wrap:pretty;margin:0}body.theme--light{color-scheme:light;--gld-foreground-color: var(--gld-darkblue);--gld-background-color: var(--gld-whitelight)}body.theme--dark{color-scheme:dark;--gld-foreground-color: var(--gld-whitelight);--gld-background-color: var(--gld-darkblue)}body.theme--system{color-scheme:light dark;--gld-foreground-color: light-dark(var(--gld-darkblue), var(--gld-whitelight));--gld-background-color: light-dark(var(--gld-whitelight), var(--gld-darkblue))}.input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-height: 40px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input input{width:100%;min-width:var(--gld-min-with);height:var(--gld-height);padding:var(--gld-spacing--xxs);padding-right:var(--gld-spacing--m);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input input:focus{--gld-border-color: var(--gld-blue)}.input input::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:var(--gld-spacing--xxs);color:var(--gld-color);-webkit-user-select:none;user-select:none;will-change:transform,color;transition:transform var(--gld-animation-time) ease,color var(--gld-animation-time) ease-in-out;cursor:pointer}.input-icon--animated{animation:rotate 1s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.input-icon--rotated{transform:rotate(180deg)}.select{--gld-background: light-dark(var(--gld-whitelight), var(--gld-darkblue));--gld-shadow: light-dark(var(--gld-gray-transparent--040), var(--gld-gray-transparent--020));--gld-height: 40px;--gld-option-items: 0;--gld-option-height: 40px;--gld-animation-time: var(--gld-animation-time--150);--gld-padding: var(--gld-spacing--xxxs);--gld-radius: var(--gld-radius--xxs);position:relative;background:transparent}.select-menu{position:absolute;z-index:1;top:calc(var(--gld-height) + 22px);left:0;height:0;padding:0;display:grid;grid-template-columns:1fr;background:var(--gld-background);box-shadow:inset 0 0 0 var(--gld-border-size) var(--gld-shadow);border-radius:var(--gld-radius);min-width:100%;max-width:100%;max-height:calc(var(--gld-option-height) * 5);overflow-y:auto;will-change:height,padding;transition:var(--gld-animation-time) height ease-in-out,var(--gld-animation-time) padding ease-in-out;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020)) transparent;scroll-behavior:smooth}.select-menu::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.select-menu::-webkit-scrollbar-track{background:transparent}.select-menu::-webkit-scrollbar-thumb{background:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.select-menu::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gld-gray-transparent--060),var(--gld-gray-transparent--040))}.select-menu--opened{height:calc(var(--gld-option-height) * var(--gld-option-items) + var(--gld-padding) * 2);padding:var(--gld-padding)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "gld-icon", inputs: ["icon", "size", "space", "moveTopToBottom", "moveLeftToRight", "disabled"], outputs: ["clicked"] }, { kind: "component", type: InputErrorComponent, selector: "gld-input-error", inputs: ["errors", "border"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1162
|
+
], queries: [{ propertyName: "selectOptionChildren", predicate: SelectOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["selectElement"], descendants: true, isSignal: true }], ngImport: i0, template: "\n@let errors = control().invalid && (control().dirty || control().touched);\n@let disabled = control().disabled || (control().pending && control().disabled);\n\n<section #selectElement class=\"select\">\n\t<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\n\t\t<!-- Label -->\n\t\t@if (label()) {\n\t\t\t<label [for]=\"name()\">\n\t\t\t\t{{ label() }}\n\t\t\t</label>\n\t\t}\n\t\t<!-- Input -->\n\t\t<input\n\t\t\ttype=\"text\"\n\t\t\tid=\"input-select-{{ name() }}\"\n\t\t\t[tabindex]=\"disabled ? '-1' : '0'\"\n\t\t\t[name]=\"name()\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[formControl]=\"innerControl()\"\n\t\t\t(focus)=\"onFocus()\"\n\t\t\t(blur)=\"onBlur()\"\n\t\t\t(keyup.escape)=\"onBlur()\" />\n\n\t\t<!-- Suffix -->\n\t\t<ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\n\n\t\t<!-- Menu -->\n\t\t<ng-container [ngTemplateOutlet]=\"menuTemplate\" />\n\t</section>\n\t<!-- Errors -->\n\t@if (errors) {\n\t\t<ng-content select=\"gld-input-error\">\n\t\t\t<gld-input-error [errors]=\"control().errors\" />\n\t\t</ng-content>\n\t} @else {\n\t\t<!-- Hint -->\n\t\t<ng-content select=\"gld-input-hint\" />\n\t}\n</section>\n\n<!-- Menu Template -->\n<ng-template #menuTemplate>\n\t<section class=\"select-menu\" [class.select-menu--opened]=\"isMenuOpen()\">\n\t\t<ng-content select=\"gld-select-option\" />\n\t</section>\n</ng-template>\n\n<!-- Suffix Template -->\n<ng-template #suffixTemplate>\n\t@if (control().pending) {\n\t\t<gld-icon\n\t\t\tsize=\"small\"\n\t\t\tclass=\"input-icon input-icon--animated\"\n\t\t\t[class.input-icon--error]=\"errors\"\n\t\t\t[icon]=\"Icons.loader4Fill\"\n\t\t\t[disabled]=\"disabled\" />\n\t} @else {\n\t\t<gld-icon\n\t\t\tsize=\"small\"\n\t\t\tclass=\"input-icon\"\n\t\t\t[class.input-icon--rotated]=\"isMenuOpen()\"\n\t\t\t[class.input-icon--error]=\"errors\"\n\t\t\t[icon]=\"Icons.arrowDownSLine\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(clicked)=\"arrowIconClicked()\" />\n\t}\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<!-- Suffix Template -->\n<ng-template #suffixTemplate>\n\t<gld-icon\n\t\tsize=\"small\"\n\t\tclass=\"input-icon\"\n\t\t[class.input-icon--error]=\"errors\"\n\t\t[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: ["@charset \"UTF-8\";:root{--gld-break-point--zero: 0;--gld-break-point--mobile: 320px;--gld-break-point--landscape: 576px;--gld-break-point--tablet: 768px;--gld-break-point--desktop: 1080px;--gld-break-point--extra-desktop: 1280px;--gld-font-size--heading-one: 36px;--gld-font-size--heading-two: 26px;--gld-font-size--heading-three: 20px;--gld-font-size--normal: 16px;--gld-font-size--small: 12px;--gld-font-size--tiny: 8px;--gld-font--poppins: \"Poppins\", sans-serif;--gld-radius--z: 0;--gld-radius--xxxs: 4px;--gld-radius--xxs: 6px;--gld-radius--xs: 8px;--gld-radius--s: 12px;--gld-radius--m: 16px;--gld-radius--l: 24px;--gld-radius--xl: 32px;--gld-radius--xxl: 40px;--gld-spacing--z: 0;--gld-spacing--xxxs: 4px;--gld-spacing--xxs: 8px;--gld-spacing--xs: 12px;--gld-spacing--s: 16px;--gld-spacing--m: 24px;--gld-spacing--l: 32px;--gld-spacing--xl: 48px;--gld-spacing--xxl: 70px;--gld-zindex--one: 1000;--gld-zindex--two: 2000;--gld-zindex--three: 3000;--gld-zindex--four: 4000;--gld-zindex--five: 5000;--gld-icon-size--large: 48px;--gld-icon-size--medium: 40px;--gld-icon-size--normal: 32px;--gld-icon-size--small: 24px;--gld-icon-size--tiny: 16px;--gld-red: #ef4444;--gld-red-transparent--005: rgba(239, 68, 68, .05);--gld-red-transparent--010: rgba(239, 68, 68, .1);--gld-red-transparent--020: rgba(239, 68, 68, .2);--gld-red-transparent--030: rgba(239, 68, 68, .3);--gld-red-transparent--040: rgba(239, 68, 68, .4);--gld-red-transparent--050: rgba(239, 68, 68, .5);--gld-red-transparent--060: rgba(239, 68, 68, .6);--gld-red-transparent--070: rgba(239, 68, 68, .7);--gld-red-transparent--080: rgba(239, 68, 68, .8);--gld-red-transparent--090: rgba(239, 68, 68, .9);--gld-blue: #3c82f6;--gld-blue-transparent--005: rgba(60, 130, 246, .05);--gld-blue-transparent--010: rgba(60, 130, 246, .1);--gld-blue-transparent--020: rgba(60, 130, 246, .2);--gld-blue-transparent--030: rgba(60, 130, 246, .3);--gld-blue-transparent--040: rgba(60, 130, 246, .4);--gld-blue-transparent--050: rgba(60, 130, 246, .5);--gld-blue-transparent--060: rgba(60, 130, 246, .6);--gld-blue-transparent--070: rgba(60, 130, 246, .7);--gld-blue-transparent--080: rgba(60, 130, 246, .8);--gld-blue-transparent--090: rgba(60, 130, 246, .9);--gld-green: #12b981;--gld-green-transparent--005: rgba(18, 185, 129, .05);--gld-green-transparent--010: rgba(18, 185, 129, .1);--gld-green-transparent--020: rgba(18, 185, 129, .2);--gld-green-transparent--030: rgba(18, 185, 129, .3);--gld-green-transparent--040: rgba(18, 185, 129, .4);--gld-green-transparent--050: rgba(18, 185, 129, .5);--gld-green-transparent--060: rgba(18, 185, 129, .6);--gld-green-transparent--070: rgba(18, 185, 129, .7);--gld-green-transparent--080: rgba(18, 185, 129, .8);--gld-green-transparent--090: rgba(18, 185, 129, .9);--gld-purple: #a855f7;--gld-purple-transparent--005: rgba(168, 85, 247, .05);--gld-purple-transparent--010: rgba(168, 85, 247, .1);--gld-purple-transparent--020: rgba(168, 85, 247, .2);--gld-purple-transparent--030: rgba(168, 85, 247, .3);--gld-purple-transparent--040: rgba(168, 85, 247, .4);--gld-purple-transparent--050: rgba(168, 85, 247, .5);--gld-purple-transparent--060: rgba(168, 85, 247, .6);--gld-purple-transparent--070: rgba(168, 85, 247, .7);--gld-purple-transparent--080: rgba(168, 85, 247, .8);--gld-purple-transparent--090: rgba(168, 85, 247, .9);--gld-mustard: #ebb305;--gld-mustard-transparent--005: rgba(235, 179, 5, .05);--gld-mustard-transparent--010: rgba(235, 179, 5, .1);--gld-mustard-transparent--020: rgba(235, 179, 5, .2);--gld-mustard-transparent--030: rgba(235, 179, 5, .3);--gld-mustard-transparent--040: rgba(235, 179, 5, .4);--gld-mustard-transparent--050: rgba(235, 179, 5, .5);--gld-mustard-transparent--060: rgba(235, 179, 5, .6);--gld-mustard-transparent--070: rgba(235, 179, 5, .7);--gld-mustard-transparent--080: rgba(235, 179, 5, .8);--gld-mustard-transparent--090: rgba(235, 179, 5, .9);--gld-orange: #f97315;--gld-orange-transparent--005: rgba(249, 115, 21, .05);--gld-orange-transparent--010: rgba(249, 115, 21, .1);--gld-orange-transparent--020: rgba(249, 115, 21, .2);--gld-orange-transparent--030: rgba(249, 115, 21, .3);--gld-orange-transparent--040: rgba(249, 115, 21, .4);--gld-orange-transparent--050: rgba(249, 115, 21, .5);--gld-orange-transparent--060: rgba(249, 115, 21, .6);--gld-orange-transparent--070: rgba(249, 115, 21, .7);--gld-orange-transparent--080: rgba(249, 115, 21, .8);--gld-orange-transparent--090: rgba(249, 115, 21, .9);--gld-pink: #ec4899;--gld-pink-transparent--005: rgba(236, 72, 153, .05);--gld-pink-transparent--010: rgba(236, 72, 153, .1);--gld-pink-transparent--020: rgba(236, 72, 153, .2);--gld-pink-transparent--030: rgba(236, 72, 153, .3);--gld-pink-transparent--040: rgba(236, 72, 153, .4);--gld-pink-transparent--050: rgba(236, 72, 153, .5);--gld-pink-transparent--060: rgba(236, 72, 153, .6);--gld-pink-transparent--070: rgba(236, 72, 153, .7);--gld-pink-transparent--080: rgba(236, 72, 153, .8);--gld-pink-transparent--090: rgba(236, 72, 153, .9);--gld-gray: #c1c7e1;--gld-gray-transparent--010: rgba(193, 199, 225, .1);--gld-gray-transparent--020: rgba(193, 199, 225, .2);--gld-gray-transparent--030: rgba(193, 199, 225, .3);--gld-gray-transparent--040: rgba(193, 199, 225, .4);--gld-gray-transparent--050: rgba(193, 199, 225, .5);--gld-gray-transparent--060: rgba(193, 199, 225, .6);--gld-gray-transparent--070: rgba(193, 199, 225, .7);--gld-gray-transparent--080: rgba(193, 199, 225, .8);--gld-gray-transparent--090: rgba(193, 199, 225, .9);--gld-white: #fff;--gld-whitelight: #f9fafb;--gld-whitelight-transparent--010: rgba(249, 250, 251, .1);--gld-whitelight-transparent--020: rgba(249, 250, 251, .2);--gld-whitelight-transparent--030: rgba(249, 250, 251, .3);--gld-whitelight-transparent--040: rgba(249, 250, 251, .4);--gld-whitelight-transparent--050: rgba(249, 250, 251, .5);--gld-whitelight-transparent--060: rgba(249, 250, 251, .6);--gld-whitelight-transparent--070: rgba(249, 250, 251, .7);--gld-whitelight-transparent--080: rgba(249, 250, 251, .8);--gld-whitelight-transparent--090: rgba(249, 250, 251, .9);--gld-darkblue: #101827;--gld-darkblue-transparent--010: rgba(16, 24, 39, .1);--gld-darkblue-transparent--020: rgba(16, 24, 39, .2);--gld-darkblue-transparent--030: rgba(16, 24, 39, .3);--gld-darkblue-transparent--040: rgba(16, 24, 39, .4);--gld-darkblue-transparent--050: rgba(16, 24, 39, .5);--gld-darkblue-transparent--060: rgba(16, 24, 39, .6);--gld-darkblue-transparent--070: rgba(16, 24, 39, .7);--gld-darkblue-transparent--080: rgba(16, 24, 39, .8);--gld-darkblue-transparent--090: rgba(16, 24, 39, .9);--gld-border-size: 1px;--gld-animation-time--150: .15s;--gld-animation-time--250: .25s;--gld-animation-time--10s: 10s;--gld-line-height: 1.2;--gld-max-width: 1280px;--gld-navbar-height: 50px;--gld-sidebar-width: 250px}*,*:before,*:after{box-sizing:border-box;min-width:0}html,body{font-family:var(--gld-font--poppins)}body{margin:0}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin:0}p{text-wrap:pretty;margin:0}body.theme--light{color-scheme:light;--gld-foreground-color: var(--gld-darkblue);--gld-background-color: var(--gld-whitelight)}body.theme--dark{color-scheme:dark;--gld-foreground-color: var(--gld-whitelight);--gld-background-color: var(--gld-darkblue)}body.theme--system{color-scheme:light dark;--gld-foreground-color: light-dark(var(--gld-darkblue), var(--gld-whitelight));--gld-background-color: light-dark(var(--gld-whitelight), var(--gld-darkblue))}.input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-height: 40px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input input{width:100%;min-width:var(--gld-min-with);height:var(--gld-height);padding:var(--gld-spacing--xxs);padding-right:var(--gld-spacing--m);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input input:focus{--gld-border-color: var(--gld-blue)}.input input::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:var(--gld-spacing--xxs);color:var(--gld-color);-webkit-user-select:none;user-select:none;will-change:transform,color;transition:transform var(--gld-animation-time) ease,color var(--gld-animation-time) ease-in-out;cursor:pointer}.input-icon--animated{animation:rotate 1s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.input-icon--rotated{transform:rotate(180deg)}.select{--gld-background: light-dark(var(--gld-whitelight), var(--gld-darkblue));--gld-shadow: light-dark(var(--gld-gray-transparent--040), var(--gld-gray-transparent--020));--gld-height: 40px;--gld-option-items: 0;--gld-option-height: 40px;--gld-animation-time: var(--gld-animation-time--150);--gld-padding: var(--gld-spacing--xxxs);--gld-radius: var(--gld-radius--xxs);position:relative;background:transparent}.select-menu{position:absolute;z-index:1;top:calc(var(--gld-height) + 22px);left:0;height:0;padding:0;display:grid;grid-template-columns:1fr;background:var(--gld-background);box-shadow:inset 0 0 0 var(--gld-border-size) var(--gld-shadow);border-radius:var(--gld-radius);min-width:100%;max-width:100%;max-height:calc(var(--gld-option-height) * 5);overflow-y:auto;will-change:height,padding;transition:var(--gld-animation-time) height ease-in-out,var(--gld-animation-time) padding ease-in-out}.select-menu::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.select-menu::-webkit-scrollbar-track{background:transparent}.select-menu::-webkit-scrollbar-thumb{background:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.select-menu::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gld-gray-transparent--060),var(--gld-gray-transparent--040))}.select-menu{overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020)) transparent;scroll-behavior:smooth}.select-menu--opened{height:calc(var(--gld-option-height) * var(--gld-option-items) + var(--gld-padding) * 2);padding:var(--gld-padding)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "gld-icon", inputs: ["icon", "size", "space", "moveTopToBottom", "moveLeftToRight", "disabled"], outputs: ["clicked"] }, { kind: "component", type: InputErrorComponent, selector: "gld-input-error", inputs: ["errors", "border"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1161
1163
|
}
|
|
1162
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1164
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SelectComponent, decorators: [{
|
|
1163
1165
|
type: Component,
|
|
1164
1166
|
args: [{ selector: 'gld-select', standalone: true, imports: [ReactiveFormsModule, NgTemplateOutlet, ...components$1], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
1165
1167
|
{
|
|
@@ -1167,52 +1169,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
1167
1169
|
useExisting: forwardRef(() => SelectComponent),
|
|
1168
1170
|
multi: true,
|
|
1169
1171
|
},
|
|
1170
|
-
], template: "\r\n@let errors = control().invalid && (control().dirty || control().touched);\r\n@let disabled = control().disabled || (control().pending && control().disabled);\r\n\r\n<section #selectElement class=\"select\">\r\n\t<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\r\n\t\t<!-- Label -->\r\n\t\t@if (label()) {\r\n\t\t\t<label [for]=\"name()\">\r\n\t\t\t\t{{ label() }}\r\n\t\t\t</label>\r\n\t\t}\r\n\t\t<!-- Input -->\r\n\t\t<input\r\n\t\t\ttype=\"text\"\r\n\t\t\tid=\"input-select-{{ name() }}\"\r\n\t\t\t[tabindex]=\"disabled ? '-1' : '0'\"\r\n\t\t\t[name]=\"name()\"\r\n\t\t\t[placeholder]=\"placeholder()\"\r\n\t\t\t[formControl]=\"innerControl()\"\r\n\t\t\t(focus)=\"onFocus()\"\r\n\t\t\t(blur)=\"onBlur()\"\r\n\t\t\t(keyup.escape)=\"onBlur()\" />\r\n\r\n\t\t<!-- Suffix -->\r\n\t\t<ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\r\n\r\n\t\t<!-- Menu -->\r\n\t\t<ng-container [ngTemplateOutlet]=\"menuTemplate\" />\r\n\t</section>\r\n\t<!-- Errors -->\r\n\t@if (errors) {\r\n\t\t<ng-content select=\"gld-input-error\">\r\n\t\t\t<gld-input-error [errors]=\"control().errors\" />\r\n\t\t</ng-content>\r\n\t} @else {\r\n\t\t<!-- Hint -->\r\n\t\t<ng-content select=\"gld-input-hint\" />\r\n\t}\r\n</section>\r\n\r\n<!-- Menu Template -->\r\n<ng-template #menuTemplate>\r\n\t<section class=\"select-menu\" [class.select-menu--opened]=\"isMenuOpen()\">\r\n\t\t<ng-content select=\"gld-select-option\" />\r\n\t</section>\r\n</ng-template>\r\n\r\n<!-- Suffix Template -->\r\n<ng-template #suffixTemplate>\r\n\t@if (control().pending) {\r\n\t\t<gld-icon\r\n\t\t\tsize=\"small\"\r\n\t\t\tclass=\"input-icon input-icon--animated\"\r\n\t\t\t[class.input-icon--error]=\"errors\"\r\n\t\t\t[icon]=\"Icons.loader4Fill\"\r\n\t\t\t[disabled]=\"disabled\" />\r\n\t} @else {\r\n\t\t<gld-icon\r\n\t\t\tsize=\"small\"\r\n\t\t\tclass=\"input-icon\"\r\n\t\t\t[class.input-icon--rotated]=\"isMenuOpen()\"\r\n\t\t\t[class.input-icon--error]=\"errors\"\r\n\t\t\t[icon]=\"Icons.arrowDownSLine\"\r\n\t\t\t[disabled]=\"disabled\"\r\n\t\t\t(clicked)=\"arrowIconClicked()\" />\r\n\t}\r\n</ng-template>\r\n\r\n<!-- <h3>Debugging</h3> -->\r\n<!-- <section>errors: {{ control().errors | json }}</section> -->\r\n<!-- <section>errors: {{ errors }}</section> -->\r\n<!-- <section>invalid: {{ control().invalid }}</section> -->\r\n<!-- <section>dirty: {{ control().dirty }}</section> -->\r\n<!-- <section>touched: {{ control().touched }}</section> -->\r\n<!-- <section>disable: {{ control().disabled }}</section> -->\r\n<!-- <section>status: {{ control().status }}</section> -->\r\n\r\n<!-- Suffix Template -->\r\n<ng-template #suffixTemplate>\r\n\t<gld-icon\r\n\t\tsize=\"small\"\r\n\t\tclass=\"input-icon\"\r\n\t\t[class.input-icon--error]=\"errors\"\r\n\t\t[icon]=\"Icons.arrowDownSLine\" />\r\n</ng-template>\r\n\r\n<!-- <h3>Debugging</h3> -->\r\n<!-- <section>errors: {{ control().errors | json }}</section> -->\r\n<!-- <section>errors: {{ errors }}</section> -->\r\n<!-- <section>invalid: {{ control().invalid }}</section> -->\r\n<!-- <section>dirty: {{ control().dirty }}</section> -->\r\n<!-- <section>touched: {{ control().touched }}</section> -->\r\n<!-- <section>disable: {{ control().disabled }}</section> -->\r\n", styles: ["@charset \"UTF-8\";:root{--gld-break-point--zero: 0;--gld-break-point--mobile: 320px;--gld-break-point--landscape: 576px;--gld-break-point--tablet: 768px;--gld-break-point--desktop: 1080px;--gld-break-point--extra-desktop: 1280px;--gld-font-size--heading-one: 36px;--gld-font-size--heading-two: 26px;--gld-font-size--heading-three: 20px;--gld-font-size--normal: 16px;--gld-font-size--small: 12px;--gld-font-size--tiny: 8px;--gld-font--poppins: \"Poppins\", sans-serif;--gld-radius--z: 0;--gld-radius--xxxs: 4px;--gld-radius--xxs: 6px;--gld-radius--xs: 8px;--gld-radius--s: 12px;--gld-radius--m: 16px;--gld-radius--l: 24px;--gld-radius--xl: 32px;--gld-radius--xxl: 40px;--gld-spacing--z: 0;--gld-spacing--xxxs: 4px;--gld-spacing--xxs: 8px;--gld-spacing--xs: 12px;--gld-spacing--s: 16px;--gld-spacing--m: 24px;--gld-spacing--l: 32px;--gld-spacing--xl: 48px;--gld-spacing--xxl: 70px;--gld-zindex--one: 1000;--gld-zindex--two: 2000;--gld-zindex--three: 3000;--gld-zindex--four: 4000;--gld-zindex--five: 5000;--gld-icon-size--large: 48px;--gld-icon-size--medium: 40px;--gld-icon-size--normal: 32px;--gld-icon-size--small: 24px;--gld-icon-size--tiny: 16px;--gld-red: #ef4444;--gld-red-transparent--005: rgba(239, 68, 68, .05);--gld-red-transparent--010: rgba(239, 68, 68, .1);--gld-red-transparent--020: rgba(239, 68, 68, .2);--gld-blue: #3c82f6;--gld-blue-transparent--005: rgba(60, 130, 246, .05);--gld-blue-transparent--010: rgba(60, 130, 246, .1);--gld-blue-transparent--020: rgba(60, 130, 246, .2);--gld-green: #12b981;--gld-green-transparent--005: rgba(18, 185, 129, .05);--gld-green-transparent--010: rgba(18, 185, 129, .1);--gld-green-transparent--020: rgba(18, 185, 129, .2);--gld-purple: #a855f7;--gld-purple-transparent--005: rgba(168, 85, 247, .05);--gld-purple-transparent--010: rgba(168, 85, 247, .1);--gld-purple-transparent--020: rgba(168, 85, 247, .2);--gld-purple-transparent--080: rgba(168, 85, 247, .8);--gld-mustard: #ebb305;--gld-mustard-transparent--005: rgba(235, 179, 5, .05);--gld-mustard-transparent--010: rgba(235, 179, 5, .1);--gld-mustard-transparent--020: rgba(235, 179, 5, .2);--gld-orange: #f97315;--gld-orange-transparent--005: rgba(249, 115, 21, .05);--gld-orange-transparent--010: rgba(249, 115, 21, .1);--gld-orange-transparent--020: rgba(249, 115, 21, .2);--gld-pink: #ec4899;--gld-pink-transparent--005: rgba(236, 72, 153, .05);--gld-pink-transparent--010: rgba(236, 72, 153, .1);--gld-pink-transparent--020: rgba(236, 72, 153, .2);--gld-pink-transparent--040: rgba(236, 72, 153, .4);--gld-pink-transparent--060: rgba(236, 72, 153, .6);--gld-pink-transparent--080: rgba(236, 72, 153, .8);--gld-gray: #c1c7e1;--gld-gray-transparent--010: rgba(193, 199, 225, .1);--gld-gray-transparent--020: rgba(193, 199, 225, .2);--gld-gray-transparent--030: rgba(193, 199, 225, .3);--gld-gray-transparent--040: rgba(193, 199, 225, .4);--gld-gray-transparent--050: rgba(193, 199, 225, .5);--gld-gray-transparent--060: rgba(193, 199, 225, .6);--gld-gray-transparent--070: rgba(193, 199, 225, .7);--gld-gray-transparent--080: rgba(193, 199, 225, .8);--gld-gray-transparent--090: rgba(193, 199, 225, .9);--gld-white: #fff;--gld-whitelight: #f9fafb;--gld-whitelight-transparent--010: rgba(249, 250, 251, .1);--gld-whitelight-transparent--020: rgba(249, 250, 251, .2);--gld-whitelight-transparent--030: rgba(249, 250, 251, .3);--gld-whitelight-transparent--040: rgba(249, 250, 251, .4);--gld-whitelight-transparent--050: rgba(249, 250, 251, .5);--gld-whitelight-transparent--060: rgba(249, 250, 251, .6);--gld-whitelight-transparent--070: rgba(249, 250, 251, .7);--gld-whitelight-transparent--080: rgba(249, 250, 251, .8);--gld-whitelight-transparent--090: rgba(249, 250, 251, .9);--gld-darkblue: #101827;--gld-darkblue-transparent--010: rgba(16, 24, 39, .1);--gld-darkblue-transparent--020: rgba(16, 24, 39, .2);--gld-darkblue-transparent--030: rgba(16, 24, 39, .3);--gld-darkblue-transparent--040: rgba(16, 24, 39, .4);--gld-darkblue-transparent--050: rgba(16, 24, 39, .5);--gld-darkblue-transparent--060: rgba(16, 24, 39, .6);--gld-darkblue-transparent--070: rgba(16, 24, 39, .7);--gld-darkblue-transparent--080: rgba(16, 24, 39, .8);--gld-darkblue-transparent--090: rgba(16, 24, 39, .9);--gld-border-size: 2px;--gld-animation-time--150: .15s;--gld-animation-time--250: .25s;--gld-animation-time--10s: 10s;--gld-line-height: 1.2;--gld-max-width: 1280px;--gld-navbar-height: 50px;--gld-sidebar-width: 250px}*,*:before,*:after{box-sizing:border-box;min-width:0}html,body{font-family:var(--gld-font--poppins)}body{margin:0}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin:0}p{text-wrap:pretty;margin:0}body.theme--light{color-scheme:light;--gld-foreground-color: var(--gld-darkblue);--gld-background-color: var(--gld-whitelight)}body.theme--dark{color-scheme:dark;--gld-foreground-color: var(--gld-whitelight);--gld-background-color: var(--gld-darkblue)}body.theme--system{color-scheme:light dark;--gld-foreground-color: light-dark(var(--gld-darkblue), var(--gld-whitelight));--gld-background-color: light-dark(var(--gld-whitelight), var(--gld-darkblue))}.input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-height: 40px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input input{width:100%;min-width:var(--gld-min-with);height:var(--gld-height);padding:var(--gld-spacing--xxs);padding-right:var(--gld-spacing--m);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input input:focus{--gld-border-color: var(--gld-blue)}.input input::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:var(--gld-spacing--xxs);color:var(--gld-color);-webkit-user-select:none;user-select:none;will-change:transform,color;transition:transform var(--gld-animation-time) ease,color var(--gld-animation-time) ease-in-out;cursor:pointer}.input-icon--animated{animation:rotate 1s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.input-icon--rotated{transform:rotate(180deg)}.select{--gld-background: light-dark(var(--gld-whitelight), var(--gld-darkblue));--gld-shadow: light-dark(var(--gld-gray-transparent--040), var(--gld-gray-transparent--020));--gld-height: 40px;--gld-option-items: 0;--gld-option-height: 40px;--gld-animation-time: var(--gld-animation-time--150);--gld-padding: var(--gld-spacing--xxxs);--gld-radius: var(--gld-radius--xxs);position:relative;background:transparent}.select-menu{position:absolute;z-index:1;top:calc(var(--gld-height) + 22px);left:0;height:0;padding:0;display:grid;grid-template-columns:1fr;background:var(--gld-background);box-shadow:inset 0 0 0 var(--gld-border-size) var(--gld-shadow);border-radius:var(--gld-radius);min-width:100%;max-width:100%;max-height:calc(var(--gld-option-height) * 5);overflow-y:auto;will-change:height,padding;transition:var(--gld-animation-time) height ease-in-out,var(--gld-animation-time) padding ease-in-out;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020)) transparent;scroll-behavior:smooth}.select-menu::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.select-menu::-webkit-scrollbar-track{background:transparent}.select-menu::-webkit-scrollbar-thumb{background:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.select-menu::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gld-gray-transparent--060),var(--gld-gray-transparent--040))}.select-menu--opened{height:calc(var(--gld-option-height) * var(--gld-option-items) + var(--gld-padding) * 2);padding:var(--gld-padding)}\n"] }]
|
|
1171
|
-
}], ctorParameters: () => [] });
|
|
1172
|
+
], template: "\n@let errors = control().invalid && (control().dirty || control().touched);\n@let disabled = control().disabled || (control().pending && control().disabled);\n\n<section #selectElement class=\"select\">\n\t<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\n\t\t<!-- Label -->\n\t\t@if (label()) {\n\t\t\t<label [for]=\"name()\">\n\t\t\t\t{{ label() }}\n\t\t\t</label>\n\t\t}\n\t\t<!-- Input -->\n\t\t<input\n\t\t\ttype=\"text\"\n\t\t\tid=\"input-select-{{ name() }}\"\n\t\t\t[tabindex]=\"disabled ? '-1' : '0'\"\n\t\t\t[name]=\"name()\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[formControl]=\"innerControl()\"\n\t\t\t(focus)=\"onFocus()\"\n\t\t\t(blur)=\"onBlur()\"\n\t\t\t(keyup.escape)=\"onBlur()\" />\n\n\t\t<!-- Suffix -->\n\t\t<ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\n\n\t\t<!-- Menu -->\n\t\t<ng-container [ngTemplateOutlet]=\"menuTemplate\" />\n\t</section>\n\t<!-- Errors -->\n\t@if (errors) {\n\t\t<ng-content select=\"gld-input-error\">\n\t\t\t<gld-input-error [errors]=\"control().errors\" />\n\t\t</ng-content>\n\t} @else {\n\t\t<!-- Hint -->\n\t\t<ng-content select=\"gld-input-hint\" />\n\t}\n</section>\n\n<!-- Menu Template -->\n<ng-template #menuTemplate>\n\t<section class=\"select-menu\" [class.select-menu--opened]=\"isMenuOpen()\">\n\t\t<ng-content select=\"gld-select-option\" />\n\t</section>\n</ng-template>\n\n<!-- Suffix Template -->\n<ng-template #suffixTemplate>\n\t@if (control().pending) {\n\t\t<gld-icon\n\t\t\tsize=\"small\"\n\t\t\tclass=\"input-icon input-icon--animated\"\n\t\t\t[class.input-icon--error]=\"errors\"\n\t\t\t[icon]=\"Icons.loader4Fill\"\n\t\t\t[disabled]=\"disabled\" />\n\t} @else {\n\t\t<gld-icon\n\t\t\tsize=\"small\"\n\t\t\tclass=\"input-icon\"\n\t\t\t[class.input-icon--rotated]=\"isMenuOpen()\"\n\t\t\t[class.input-icon--error]=\"errors\"\n\t\t\t[icon]=\"Icons.arrowDownSLine\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(clicked)=\"arrowIconClicked()\" />\n\t}\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<!-- Suffix Template -->\n<ng-template #suffixTemplate>\n\t<gld-icon\n\t\tsize=\"small\"\n\t\tclass=\"input-icon\"\n\t\t[class.input-icon--error]=\"errors\"\n\t\t[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: ["@charset \"UTF-8\";:root{--gld-break-point--zero: 0;--gld-break-point--mobile: 320px;--gld-break-point--landscape: 576px;--gld-break-point--tablet: 768px;--gld-break-point--desktop: 1080px;--gld-break-point--extra-desktop: 1280px;--gld-font-size--heading-one: 36px;--gld-font-size--heading-two: 26px;--gld-font-size--heading-three: 20px;--gld-font-size--normal: 16px;--gld-font-size--small: 12px;--gld-font-size--tiny: 8px;--gld-font--poppins: \"Poppins\", sans-serif;--gld-radius--z: 0;--gld-radius--xxxs: 4px;--gld-radius--xxs: 6px;--gld-radius--xs: 8px;--gld-radius--s: 12px;--gld-radius--m: 16px;--gld-radius--l: 24px;--gld-radius--xl: 32px;--gld-radius--xxl: 40px;--gld-spacing--z: 0;--gld-spacing--xxxs: 4px;--gld-spacing--xxs: 8px;--gld-spacing--xs: 12px;--gld-spacing--s: 16px;--gld-spacing--m: 24px;--gld-spacing--l: 32px;--gld-spacing--xl: 48px;--gld-spacing--xxl: 70px;--gld-zindex--one: 1000;--gld-zindex--two: 2000;--gld-zindex--three: 3000;--gld-zindex--four: 4000;--gld-zindex--five: 5000;--gld-icon-size--large: 48px;--gld-icon-size--medium: 40px;--gld-icon-size--normal: 32px;--gld-icon-size--small: 24px;--gld-icon-size--tiny: 16px;--gld-red: #ef4444;--gld-red-transparent--005: rgba(239, 68, 68, .05);--gld-red-transparent--010: rgba(239, 68, 68, .1);--gld-red-transparent--020: rgba(239, 68, 68, .2);--gld-red-transparent--030: rgba(239, 68, 68, .3);--gld-red-transparent--040: rgba(239, 68, 68, .4);--gld-red-transparent--050: rgba(239, 68, 68, .5);--gld-red-transparent--060: rgba(239, 68, 68, .6);--gld-red-transparent--070: rgba(239, 68, 68, .7);--gld-red-transparent--080: rgba(239, 68, 68, .8);--gld-red-transparent--090: rgba(239, 68, 68, .9);--gld-blue: #3c82f6;--gld-blue-transparent--005: rgba(60, 130, 246, .05);--gld-blue-transparent--010: rgba(60, 130, 246, .1);--gld-blue-transparent--020: rgba(60, 130, 246, .2);--gld-blue-transparent--030: rgba(60, 130, 246, .3);--gld-blue-transparent--040: rgba(60, 130, 246, .4);--gld-blue-transparent--050: rgba(60, 130, 246, .5);--gld-blue-transparent--060: rgba(60, 130, 246, .6);--gld-blue-transparent--070: rgba(60, 130, 246, .7);--gld-blue-transparent--080: rgba(60, 130, 246, .8);--gld-blue-transparent--090: rgba(60, 130, 246, .9);--gld-green: #12b981;--gld-green-transparent--005: rgba(18, 185, 129, .05);--gld-green-transparent--010: rgba(18, 185, 129, .1);--gld-green-transparent--020: rgba(18, 185, 129, .2);--gld-green-transparent--030: rgba(18, 185, 129, .3);--gld-green-transparent--040: rgba(18, 185, 129, .4);--gld-green-transparent--050: rgba(18, 185, 129, .5);--gld-green-transparent--060: rgba(18, 185, 129, .6);--gld-green-transparent--070: rgba(18, 185, 129, .7);--gld-green-transparent--080: rgba(18, 185, 129, .8);--gld-green-transparent--090: rgba(18, 185, 129, .9);--gld-purple: #a855f7;--gld-purple-transparent--005: rgba(168, 85, 247, .05);--gld-purple-transparent--010: rgba(168, 85, 247, .1);--gld-purple-transparent--020: rgba(168, 85, 247, .2);--gld-purple-transparent--030: rgba(168, 85, 247, .3);--gld-purple-transparent--040: rgba(168, 85, 247, .4);--gld-purple-transparent--050: rgba(168, 85, 247, .5);--gld-purple-transparent--060: rgba(168, 85, 247, .6);--gld-purple-transparent--070: rgba(168, 85, 247, .7);--gld-purple-transparent--080: rgba(168, 85, 247, .8);--gld-purple-transparent--090: rgba(168, 85, 247, .9);--gld-mustard: #ebb305;--gld-mustard-transparent--005: rgba(235, 179, 5, .05);--gld-mustard-transparent--010: rgba(235, 179, 5, .1);--gld-mustard-transparent--020: rgba(235, 179, 5, .2);--gld-mustard-transparent--030: rgba(235, 179, 5, .3);--gld-mustard-transparent--040: rgba(235, 179, 5, .4);--gld-mustard-transparent--050: rgba(235, 179, 5, .5);--gld-mustard-transparent--060: rgba(235, 179, 5, .6);--gld-mustard-transparent--070: rgba(235, 179, 5, .7);--gld-mustard-transparent--080: rgba(235, 179, 5, .8);--gld-mustard-transparent--090: rgba(235, 179, 5, .9);--gld-orange: #f97315;--gld-orange-transparent--005: rgba(249, 115, 21, .05);--gld-orange-transparent--010: rgba(249, 115, 21, .1);--gld-orange-transparent--020: rgba(249, 115, 21, .2);--gld-orange-transparent--030: rgba(249, 115, 21, .3);--gld-orange-transparent--040: rgba(249, 115, 21, .4);--gld-orange-transparent--050: rgba(249, 115, 21, .5);--gld-orange-transparent--060: rgba(249, 115, 21, .6);--gld-orange-transparent--070: rgba(249, 115, 21, .7);--gld-orange-transparent--080: rgba(249, 115, 21, .8);--gld-orange-transparent--090: rgba(249, 115, 21, .9);--gld-pink: #ec4899;--gld-pink-transparent--005: rgba(236, 72, 153, .05);--gld-pink-transparent--010: rgba(236, 72, 153, .1);--gld-pink-transparent--020: rgba(236, 72, 153, .2);--gld-pink-transparent--030: rgba(236, 72, 153, .3);--gld-pink-transparent--040: rgba(236, 72, 153, .4);--gld-pink-transparent--050: rgba(236, 72, 153, .5);--gld-pink-transparent--060: rgba(236, 72, 153, .6);--gld-pink-transparent--070: rgba(236, 72, 153, .7);--gld-pink-transparent--080: rgba(236, 72, 153, .8);--gld-pink-transparent--090: rgba(236, 72, 153, .9);--gld-gray: #c1c7e1;--gld-gray-transparent--010: rgba(193, 199, 225, .1);--gld-gray-transparent--020: rgba(193, 199, 225, .2);--gld-gray-transparent--030: rgba(193, 199, 225, .3);--gld-gray-transparent--040: rgba(193, 199, 225, .4);--gld-gray-transparent--050: rgba(193, 199, 225, .5);--gld-gray-transparent--060: rgba(193, 199, 225, .6);--gld-gray-transparent--070: rgba(193, 199, 225, .7);--gld-gray-transparent--080: rgba(193, 199, 225, .8);--gld-gray-transparent--090: rgba(193, 199, 225, .9);--gld-white: #fff;--gld-whitelight: #f9fafb;--gld-whitelight-transparent--010: rgba(249, 250, 251, .1);--gld-whitelight-transparent--020: rgba(249, 250, 251, .2);--gld-whitelight-transparent--030: rgba(249, 250, 251, .3);--gld-whitelight-transparent--040: rgba(249, 250, 251, .4);--gld-whitelight-transparent--050: rgba(249, 250, 251, .5);--gld-whitelight-transparent--060: rgba(249, 250, 251, .6);--gld-whitelight-transparent--070: rgba(249, 250, 251, .7);--gld-whitelight-transparent--080: rgba(249, 250, 251, .8);--gld-whitelight-transparent--090: rgba(249, 250, 251, .9);--gld-darkblue: #101827;--gld-darkblue-transparent--010: rgba(16, 24, 39, .1);--gld-darkblue-transparent--020: rgba(16, 24, 39, .2);--gld-darkblue-transparent--030: rgba(16, 24, 39, .3);--gld-darkblue-transparent--040: rgba(16, 24, 39, .4);--gld-darkblue-transparent--050: rgba(16, 24, 39, .5);--gld-darkblue-transparent--060: rgba(16, 24, 39, .6);--gld-darkblue-transparent--070: rgba(16, 24, 39, .7);--gld-darkblue-transparent--080: rgba(16, 24, 39, .8);--gld-darkblue-transparent--090: rgba(16, 24, 39, .9);--gld-border-size: 1px;--gld-animation-time--150: .15s;--gld-animation-time--250: .25s;--gld-animation-time--10s: 10s;--gld-line-height: 1.2;--gld-max-width: 1280px;--gld-navbar-height: 50px;--gld-sidebar-width: 250px}*,*:before,*:after{box-sizing:border-box;min-width:0}html,body{font-family:var(--gld-font--poppins)}body{margin:0}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin:0}p{text-wrap:pretty;margin:0}body.theme--light{color-scheme:light;--gld-foreground-color: var(--gld-darkblue);--gld-background-color: var(--gld-whitelight)}body.theme--dark{color-scheme:dark;--gld-foreground-color: var(--gld-whitelight);--gld-background-color: var(--gld-darkblue)}body.theme--system{color-scheme:light dark;--gld-foreground-color: light-dark(var(--gld-darkblue), var(--gld-whitelight));--gld-background-color: light-dark(var(--gld-whitelight), var(--gld-darkblue))}.input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-height: 40px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input input{width:100%;min-width:var(--gld-min-with);height:var(--gld-height);padding:var(--gld-spacing--xxs);padding-right:var(--gld-spacing--m);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input input:focus{--gld-border-color: var(--gld-blue)}.input input::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:var(--gld-spacing--xxs);color:var(--gld-color);-webkit-user-select:none;user-select:none;will-change:transform,color;transition:transform var(--gld-animation-time) ease,color var(--gld-animation-time) ease-in-out;cursor:pointer}.input-icon--animated{animation:rotate 1s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.input-icon--rotated{transform:rotate(180deg)}.select{--gld-background: light-dark(var(--gld-whitelight), var(--gld-darkblue));--gld-shadow: light-dark(var(--gld-gray-transparent--040), var(--gld-gray-transparent--020));--gld-height: 40px;--gld-option-items: 0;--gld-option-height: 40px;--gld-animation-time: var(--gld-animation-time--150);--gld-padding: var(--gld-spacing--xxxs);--gld-radius: var(--gld-radius--xxs);position:relative;background:transparent}.select-menu{position:absolute;z-index:1;top:calc(var(--gld-height) + 22px);left:0;height:0;padding:0;display:grid;grid-template-columns:1fr;background:var(--gld-background);box-shadow:inset 0 0 0 var(--gld-border-size) var(--gld-shadow);border-radius:var(--gld-radius);min-width:100%;max-width:100%;max-height:calc(var(--gld-option-height) * 5);overflow-y:auto;will-change:height,padding;transition:var(--gld-animation-time) height ease-in-out,var(--gld-animation-time) padding ease-in-out}.select-menu::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.select-menu::-webkit-scrollbar-track{background:transparent}.select-menu::-webkit-scrollbar-thumb{background:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.select-menu::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gld-gray-transparent--060),var(--gld-gray-transparent--040))}.select-menu{overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020)) transparent;scroll-behavior:smooth}.select-menu--opened{height:calc(var(--gld-option-height) * var(--gld-option-items) + var(--gld-padding) * 2);padding:var(--gld-padding)}\n"] }]
|
|
1173
|
+
}], ctorParameters: () => [], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", 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 }] }], 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 }] }] } });
|
|
1172
1174
|
|
|
1173
1175
|
// Angular Imports
|
|
1174
1176
|
class ImageComponent {
|
|
1175
|
-
src = input.required();
|
|
1176
|
-
alt = input.required();
|
|
1177
|
+
src = input.required(...(ngDevMode ? [{ debugName: "src" }] : []));
|
|
1178
|
+
alt = input.required(...(ngDevMode ? [{ debugName: "alt" }] : []));
|
|
1177
1179
|
// srcset = input<string>('')
|
|
1178
1180
|
// sizes = input<string>('')
|
|
1179
|
-
priority = input(false, { transform: booleanAttribute });
|
|
1180
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1181
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1181
|
+
priority = input(false, ...(ngDevMode ? [{ debugName: "priority", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
1182
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1183
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 });
|
|
1182
1184
|
}
|
|
1183
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1185
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ImageComponent, decorators: [{
|
|
1184
1186
|
type: Component,
|
|
1185
|
-
args: [{ selector: 'gld-image', standalone: true, imports: [NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- @if (srcset() && sizes()) {\
|
|
1186
|
-
}] });
|
|
1187
|
+
args: [{ selector: 'gld-image', standalone: true, 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"] }]
|
|
1188
|
+
}], 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 }] }] } });
|
|
1187
1189
|
|
|
1188
1190
|
// Angular Imports
|
|
1189
1191
|
class LoaderComponent {
|
|
1190
|
-
loading = input(false, { transform: booleanAttribute });
|
|
1191
|
-
background = input(false, { transform: booleanAttribute });
|
|
1192
|
-
radius = input(false, { transform: booleanAttribute });
|
|
1193
|
-
minHeight = input('auto');
|
|
1194
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1195
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1192
|
+
loading = input(false, ...(ngDevMode ? [{ debugName: "loading", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
1193
|
+
background = input(false, ...(ngDevMode ? [{ debugName: "background", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
1194
|
+
radius = input(false, ...(ngDevMode ? [{ debugName: "radius", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
1195
|
+
minHeight = input('auto', ...(ngDevMode ? [{ debugName: "minHeight" }] : []));
|
|
1196
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1197
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: LoaderComponent, isStandalone: true, selector: "gld-loader", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article\n class=\"loader\"\n [class.loader--loading]=\"loading()\"\n [class.loader--background]=\"background()\"\n [class.loader--radius]=\"radius()\"\n [style.minHeight]=\"minHeight()\">\n <!-- Content -->\n <ng-content />\n\n <!-- Loader -->\n @if (loading()) {\n <section class=\"loader-loading\">\n <svg class=\"container\" viewBox=\"0 0 40 40\" height=\"40\" width=\"40\">\n <circle\n class=\"track\"\n cx=\"20\"\n cy=\"20\"\n r=\"17.5\"\n pathlength=\"100\"\n stroke-width=\"5px\"\n fill=\"none\" />\n <circle\n class=\"car\"\n cx=\"20\"\n cy=\"20\"\n r=\"17.5\"\n pathlength=\"100\"\n stroke-width=\"5px\"\n fill=\"none\" />\n </svg>\n </section>\n }\n</article>\n", styles: [":host{width:100%}.loader{--gld-color: var(--gld-foreground-color);--gld-background: light-dark( var(--gld-whitelight-transparent--080), var(--gld-darkblue-transparent--080) );position:relative;color:var(--color)}.loader--radius{border-radius:var(--gld-spacing--xxxs)}.loader-loading{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:1}.loader--background .loader-loading{background:var(--gld-background)}.container{--uib-size: 40px;--uib-color: var(--gld-orange);--uib-speed: .8s;--uib-bg-opacity: .1;width:var(--uib-size);height:var(--uib-size);transform-origin:center;animation:rotate var(--uib-speed) linear infinite;will-change:transform;overflow:visible}.car{fill:none;stroke:var(--uib-color);stroke-dasharray:25,75;stroke-dashoffset:0;stroke-linecap:round;transition:stroke .5s ease}.track{fill:none;stroke:var(--uib-color);opacity:var(--uib-bg-opacity);transition:stroke .5s ease}@keyframes rotate{to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1196
1198
|
}
|
|
1197
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1199
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: LoaderComponent, decorators: [{
|
|
1198
1200
|
type: Component,
|
|
1199
1201
|
args: [{ standalone: true, selector: 'gld-loader', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article\n class=\"loader\"\n [class.loader--loading]=\"loading()\"\n [class.loader--background]=\"background()\"\n [class.loader--radius]=\"radius()\"\n [style.minHeight]=\"minHeight()\">\n <!-- Content -->\n <ng-content />\n\n <!-- Loader -->\n @if (loading()) {\n <section class=\"loader-loading\">\n <svg class=\"container\" viewBox=\"0 0 40 40\" height=\"40\" width=\"40\">\n <circle\n class=\"track\"\n cx=\"20\"\n cy=\"20\"\n r=\"17.5\"\n pathlength=\"100\"\n stroke-width=\"5px\"\n fill=\"none\" />\n <circle\n class=\"car\"\n cx=\"20\"\n cy=\"20\"\n r=\"17.5\"\n pathlength=\"100\"\n stroke-width=\"5px\"\n fill=\"none\" />\n </svg>\n </section>\n }\n</article>\n", styles: [":host{width:100%}.loader{--gld-color: var(--gld-foreground-color);--gld-background: light-dark( var(--gld-whitelight-transparent--080), var(--gld-darkblue-transparent--080) );position:relative;color:var(--color)}.loader--radius{border-radius:var(--gld-spacing--xxxs)}.loader-loading{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:1}.loader--background .loader-loading{background:var(--gld-background)}.container{--uib-size: 40px;--uib-color: var(--gld-orange);--uib-speed: .8s;--uib-bg-opacity: .1;width:var(--uib-size);height:var(--uib-size);transform-origin:center;animation:rotate var(--uib-speed) linear infinite;will-change:transform;overflow:visible}.car{fill:none;stroke:var(--uib-color);stroke-dasharray:25,75;stroke-dashoffset:0;stroke-linecap:round;transition:stroke .5s ease}.track{fill:none;stroke:var(--uib-color);opacity:var(--uib-bg-opacity);transition:stroke .5s ease}@keyframes rotate{to{transform:rotate(360deg)}}\n"] }]
|
|
1200
|
-
}] });
|
|
1202
|
+
}], 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 }] }] } });
|
|
1201
1203
|
|
|
1202
1204
|
// Angular Imports
|
|
1203
1205
|
class TablePaginationComponent {
|
|
1204
1206
|
Icons = Icons;
|
|
1205
|
-
pagination = input.required();
|
|
1207
|
+
pagination = input.required(...(ngDevMode ? [{ debugName: "pagination" }] : []));
|
|
1206
1208
|
page = output();
|
|
1207
1209
|
changeToNext = output();
|
|
1208
1210
|
changeToPrevious = output();
|
|
1209
|
-
currentPage = signal(0);
|
|
1211
|
+
currentPage = signal(0, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
|
|
1210
1212
|
maxPages = computed(() => {
|
|
1211
1213
|
if (this.pagination().itemsPerPage > this.pagination().maxItems)
|
|
1212
1214
|
return 1;
|
|
1213
1215
|
else
|
|
1214
1216
|
return Math.ceil(this.pagination().maxItems / this.pagination().itemsPerPage);
|
|
1215
|
-
});
|
|
1217
|
+
}, ...(ngDevMode ? [{ debugName: "maxPages" }] : []));
|
|
1216
1218
|
constructor() {
|
|
1217
1219
|
effect(() => this.page.emit(this.currentPage()));
|
|
1218
1220
|
effect(() => {
|
|
@@ -1239,21 +1241,21 @@ class TablePaginationComponent {
|
|
|
1239
1241
|
}
|
|
1240
1242
|
this.changeToPrevious.emit(this.currentPage());
|
|
1241
1243
|
}
|
|
1242
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1243
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
1244
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TablePaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1245
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.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 });
|
|
1244
1246
|
}
|
|
1245
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1247
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TablePaginationComponent, decorators: [{
|
|
1246
1248
|
type: Component,
|
|
1247
1249
|
args: [{ selector: 'gld-table-pagination', standalone: true, 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"] }]
|
|
1248
|
-
}], ctorParameters: () => [] });
|
|
1250
|
+
}], 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"] }] } });
|
|
1249
1251
|
|
|
1250
1252
|
// Angular Imports
|
|
1251
1253
|
class TableSearchComponent {
|
|
1252
1254
|
#formBuilder = inject(FormBuilder);
|
|
1253
1255
|
Icons = Icons;
|
|
1254
|
-
placeholder = input('buscar');
|
|
1255
|
-
width = input('auto');
|
|
1256
|
-
debounceTime = input(250);
|
|
1256
|
+
placeholder = input('buscar', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
1257
|
+
width = input('auto', ...(ngDevMode ? [{ debugName: "width" }] : []));
|
|
1258
|
+
debounceTime = input(250, ...(ngDevMode ? [{ debugName: "debounceTime" }] : []));
|
|
1257
1259
|
searching = output();
|
|
1258
1260
|
control = this.#formBuilder.control('');
|
|
1259
1261
|
constructor() {
|
|
@@ -1268,29 +1270,29 @@ class TableSearchComponent {
|
|
|
1268
1270
|
});
|
|
1269
1271
|
});
|
|
1270
1272
|
}
|
|
1271
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1272
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
1273
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1274
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.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 });
|
|
1273
1275
|
}
|
|
1274
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1276
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableSearchComponent, decorators: [{
|
|
1275
1277
|
type: Component,
|
|
1276
1278
|
args: [{ selector: 'gld-table-search', standalone: true, 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"] }]
|
|
1277
|
-
}], ctorParameters: () => [] });
|
|
1279
|
+
}], 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"] }] } });
|
|
1278
1280
|
|
|
1279
1281
|
// Angular Imports
|
|
1280
1282
|
const components = [DropdownButtonComponent, DropdownMenuComponent, LoaderComponent];
|
|
1281
1283
|
class TableComponent {
|
|
1282
1284
|
Icons = Icons;
|
|
1283
|
-
tableColumns = input.required();
|
|
1284
|
-
emptyMessage = input('');
|
|
1285
|
-
tableHeight = input('auto');
|
|
1286
|
-
loading = input(true, { transform: booleanAttribute });
|
|
1287
|
-
selects = input(false, { transform: booleanAttribute });
|
|
1288
|
-
selectsAll = input(false, { transform: booleanAttribute });
|
|
1289
|
-
search = input(false, { transform: booleanAttribute });
|
|
1290
|
-
pagination = input(false, { transform: booleanAttribute });
|
|
1285
|
+
tableColumns = input.required(...(ngDevMode ? [{ debugName: "tableColumns" }] : []));
|
|
1286
|
+
emptyMessage = input('', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
|
|
1287
|
+
tableHeight = input('auto', ...(ngDevMode ? [{ debugName: "tableHeight" }] : []));
|
|
1288
|
+
loading = input(true, ...(ngDevMode ? [{ debugName: "loading", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
1289
|
+
selects = input(false, ...(ngDevMode ? [{ debugName: "selects", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
1290
|
+
selectsAll = input(false, ...(ngDevMode ? [{ debugName: "selectsAll", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
1291
|
+
search = input(false, ...(ngDevMode ? [{ debugName: "search", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
1292
|
+
pagination = input(false, ...(ngDevMode ? [{ debugName: "pagination", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
1291
1293
|
tableColumnAction = output();
|
|
1292
|
-
tableColumnsToShow = computed(() => this.tableColumns().filter((column) => !column.hide));
|
|
1293
|
-
tableColumnActions = signal([]);
|
|
1294
|
+
tableColumnsToShow = computed(() => this.tableColumns().filter((column) => !column.hide), ...(ngDevMode ? [{ debugName: "tableColumnsToShow" }] : []));
|
|
1295
|
+
tableColumnActions = signal([], ...(ngDevMode ? [{ debugName: "tableColumnActions" }] : []));
|
|
1294
1296
|
tableActionFunction({ tableColumnActionAsEvent, tableColumns, index }) {
|
|
1295
1297
|
const tableColumnAction = tableColumnActionAsEvent;
|
|
1296
1298
|
const object = this.#buildObjectFromTableColumn({ tableColumns, index });
|
|
@@ -1407,27 +1409,27 @@ class TableComponent {
|
|
|
1407
1409
|
return { ...previous, [current.name]: current.values[index] };
|
|
1408
1410
|
}, {});
|
|
1409
1411
|
}
|
|
1410
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1411
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: TableComponent, isStandalone: true, selector: "gld-table", inputs: { tableColumns: { classPropertyName: "tableColumns", publicName: "tableColumns", isSignal: true, isRequired: true, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, tableHeight: { classPropertyName: "tableHeight", publicName: "tableHeight", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selects: { classPropertyName: "selects", publicName: "selects", isSignal: true, isRequired: false, transformFunction: null }, selectsAll: { classPropertyName: "selectsAll", publicName: "selectsAll", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tableColumnAction: "tableColumnAction" }, ngImport: i0, template: "<!-- Search -->\n@if (search()) {\n <section class=\"table-search\">\n <ng-content select=\"gld-table-search\" />\n </section>\n}\n\n<!-- Table -->\n<article\n class=\"table\"\n [class.table--empty]=\"!tableColumnsToShow().length\"\n [style.height]=\"tableHeight()\">\n <!-- Table Content -->\n <section\n class=\"table-content\"\n [class.table-content--actions]=\"tableColumnActions().length\"\n [class.table-content--selects]=\"selects()\">\n <!-- Loading -->\n @if (loading()) {\n <gld-loader loading background minHeight=\"100px\" />\n } @else {\n <!-- Table Columns -->\n @for (tableColumn of tableColumnsToShow(); track tableColumn) {\n <section\n class=\"table-column\"\n [style.flexBasis]=\"tableColumn.width\"\n [style.flexShrink]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n [style.flexGrow]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n [style.minWidth]=\"tableColumn.minWidth\"\n [style.maxWidth]=\"tableColumn.maxWidth\">\n <section class=\"table-header\">\n <span class=\"table-header-ellipsis\">{{ tableColumn.label }}</span>\n </section>\n @for (value of tableColumn.values; track $index) {\n <section\n class=\"table-cell\"\n [style.justifyContent]=\"tableColumn.justify\"\n [style.textAlign]=\"tableColumn.justify\">\n @if (tableColumn.transform(value) !== undefined) {\n @switch (true) {\n @case (tableColumn.template !== undefined) {\n <ng-container\n [ngTemplateOutlet]=\"tableColumn.template\"\n [ngTemplateOutletContext]=\"{ value: tableColumn.transform(value) }\" />\n }\n @default {\n <span class=\"table-cell-ellipsis\">{{ tableColumn.transform(value) }}</span>\n }\n }\n } @else {\n <span>-</span>\n }\n </section>\n }\n </section>\n } @empty {\n <!-- Empty -->\n <section class=\"table-empty\">\n <p>{{ emptyMessage() ? emptyMessage() : 'We have not data to show yet!' }}</p>\n </section>\n }\n }\n </section>\n\n <!-- Table Actions -->\n @if ((tableColumnActions().length || selects()) && !loading() && tableColumnsToShow().length) {\n <section\n class=\"table-column\"\n [class.table-column--actions]=\"tableColumnActions().length\"\n [class.table-column--selects]=\"selects()\">\n <!-- Header -->\n <section\n class=\"table-header\"\n [class.table-header--actions]=\"tableColumnActions().length\"\n [class.table-header--selects]=\"selects()\">\n <!-- Select All Checkbox -->\n @if (selectsAll()) {\n <!-- <mat-checkbox\n color=\"primary\"\n matTooltip=\"Todo\"\n matTooltipClass=\"Tooltip\"\n class=\"Checkbox\"\n [checked]=\"\n dragAndDropColumnSelected().length === dragAndDropColumns().at(0)?.values?.length\n \"\n [indeterminate]=\"\n !!dragAndDropColumnSelected().length &&\n dragAndDropColumnSelected().length !== dragAndDropColumns().at(0)?.values?.length\n \"\n (change)=\"onSelectOrUnselectAll($event, dragAndDropColumns())\"\n /> -->\n }\n </section>\n @for (value of tableColumnsToShow().at(0)?.values; track $index; let index = $index) {\n <!-- Cell -->\n <section class=\"table-cell table-cell--actions\">\n <!-- Select Checkbox -->\n @if (selects()) {\n <!-- <mat-checkbox\n color=\"primary\"\n class=\"Checkbox\"\n matTooltip=\"Seleccionar\"\n matTooltipClass=\"Tooltip\"\n [checked]=\"isSelected(dragAndDropColumns(), index)\"\n (change)=\"onSelect($event, dragAndDropColumns(), index)\" /> -->\n }\n @if (tableColumnActions()) {\n <!-- Dropdown Menu -->\n <gld-dropdown-menu\n background\n name=\"more button of table cell\"\n type=\"iconButton\"\n color=\"blue\"\n iconSize=\"small\"\n direction=\"left\"\n [icon]=\"Icons.more2Fill\"\n (changeValue)=\"\n tableActionFunction({\n tableColumnActionAsEvent: $event,\n tableColumns: tableColumns(),\n index,\n })\n \">\n @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n <gld-dropdown-button\n [value]=\"tableColumnAction\"\n [icon]=\"tableColumnAction.icon\"\n iconSize=\"tiny\">\n {{ tableColumnAction.label }}\n </gld-dropdown-button>\n }\n </gld-dropdown-menu>\n <!-- <gld-icon-button\n background\n name=\"more button of table cell\"\n iconSize=\"small\"\n [icon]=\"Icons.more2Fill\"> -->\n <!-- <gld-tile color=\"blue-to-green\" class=\"Menu\">\n <section class=\"Menu-content\">\n @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n <button\n class=\"Menu-button {{ tableColumnAction?.classToHover ?? '' }}\"\n [class.Menu-button--hidden]=\"\n !tableColumnAction.showWhen(buildDataStructure({ index }))\n \"\n (click)=\"\n tableActionFunction({\n tableColumnAction,\n tableColumns: tableColumns(),\n index,\n })\n \">\n <gld-icon size=\"tiny\" [icon]=\"tableColumnAction.icon\" />\n <span class=\"Menu-button-ellipsis\">{{ tableColumnAction.label }}</span>\n </button>\n }\n </section>\n </gld-tile> -->\n <!-- </gld-icon-button> -->\n }\n </section>\n }\n </section>\n }\n</article>\n\n<!-- Pagination -->\n@if (pagination()) {\n <section class=\"table-pagination\">\n <ng-content select=\"gld-table-pagination\" />\n </section>\n}\n\n", styles: ["@charset \"UTF-8\";:root{--gld-break-point--zero: 0;--gld-break-point--mobile: 320px;--gld-break-point--landscape: 576px;--gld-break-point--tablet: 768px;--gld-break-point--desktop: 1080px;--gld-break-point--extra-desktop: 1280px;--gld-font-size--heading-one: 36px;--gld-font-size--heading-two: 26px;--gld-font-size--heading-three: 20px;--gld-font-size--normal: 16px;--gld-font-size--small: 12px;--gld-font-size--tiny: 8px;--gld-font--poppins: \"Poppins\", sans-serif;--gld-radius--z: 0;--gld-radius--xxxs: 4px;--gld-radius--xxs: 6px;--gld-radius--xs: 8px;--gld-radius--s: 12px;--gld-radius--m: 16px;--gld-radius--l: 24px;--gld-radius--xl: 32px;--gld-radius--xxl: 40px;--gld-spacing--z: 0;--gld-spacing--xxxs: 4px;--gld-spacing--xxs: 8px;--gld-spacing--xs: 12px;--gld-spacing--s: 16px;--gld-spacing--m: 24px;--gld-spacing--l: 32px;--gld-spacing--xl: 48px;--gld-spacing--xxl: 70px;--gld-zindex--one: 1000;--gld-zindex--two: 2000;--gld-zindex--three: 3000;--gld-zindex--four: 4000;--gld-zindex--five: 5000;--gld-icon-size--large: 48px;--gld-icon-size--medium: 40px;--gld-icon-size--normal: 32px;--gld-icon-size--small: 24px;--gld-icon-size--tiny: 16px;--gld-red: #ef4444;--gld-red-transparent--005: rgba(239, 68, 68, .05);--gld-red-transparent--010: rgba(239, 68, 68, .1);--gld-red-transparent--020: rgba(239, 68, 68, .2);--gld-blue: #3c82f6;--gld-blue-transparent--005: rgba(60, 130, 246, .05);--gld-blue-transparent--010: rgba(60, 130, 246, .1);--gld-blue-transparent--020: rgba(60, 130, 246, .2);--gld-green: #12b981;--gld-green-transparent--005: rgba(18, 185, 129, .05);--gld-green-transparent--010: rgba(18, 185, 129, .1);--gld-green-transparent--020: rgba(18, 185, 129, .2);--gld-purple: #a855f7;--gld-purple-transparent--005: rgba(168, 85, 247, .05);--gld-purple-transparent--010: rgba(168, 85, 247, .1);--gld-purple-transparent--020: rgba(168, 85, 247, .2);--gld-purple-transparent--080: rgba(168, 85, 247, .8);--gld-mustard: #ebb305;--gld-mustard-transparent--005: rgba(235, 179, 5, .05);--gld-mustard-transparent--010: rgba(235, 179, 5, .1);--gld-mustard-transparent--020: rgba(235, 179, 5, .2);--gld-orange: #f97315;--gld-orange-transparent--005: rgba(249, 115, 21, .05);--gld-orange-transparent--010: rgba(249, 115, 21, .1);--gld-orange-transparent--020: rgba(249, 115, 21, .2);--gld-pink: #ec4899;--gld-pink-transparent--005: rgba(236, 72, 153, .05);--gld-pink-transparent--010: rgba(236, 72, 153, .1);--gld-pink-transparent--020: rgba(236, 72, 153, .2);--gld-pink-transparent--040: rgba(236, 72, 153, .4);--gld-pink-transparent--060: rgba(236, 72, 153, .6);--gld-pink-transparent--080: rgba(236, 72, 153, .8);--gld-gray: #c1c7e1;--gld-gray-transparent--010: rgba(193, 199, 225, .1);--gld-gray-transparent--020: rgba(193, 199, 225, .2);--gld-gray-transparent--030: rgba(193, 199, 225, .3);--gld-gray-transparent--040: rgba(193, 199, 225, .4);--gld-gray-transparent--050: rgba(193, 199, 225, .5);--gld-gray-transparent--060: rgba(193, 199, 225, .6);--gld-gray-transparent--070: rgba(193, 199, 225, .7);--gld-gray-transparent--080: rgba(193, 199, 225, .8);--gld-gray-transparent--090: rgba(193, 199, 225, .9);--gld-white: #fff;--gld-whitelight: #f9fafb;--gld-whitelight-transparent--010: rgba(249, 250, 251, .1);--gld-whitelight-transparent--020: rgba(249, 250, 251, .2);--gld-whitelight-transparent--030: rgba(249, 250, 251, .3);--gld-whitelight-transparent--040: rgba(249, 250, 251, .4);--gld-whitelight-transparent--050: rgba(249, 250, 251, .5);--gld-whitelight-transparent--060: rgba(249, 250, 251, .6);--gld-whitelight-transparent--070: rgba(249, 250, 251, .7);--gld-whitelight-transparent--080: rgba(249, 250, 251, .8);--gld-whitelight-transparent--090: rgba(249, 250, 251, .9);--gld-darkblue: #101827;--gld-darkblue-transparent--010: rgba(16, 24, 39, .1);--gld-darkblue-transparent--020: rgba(16, 24, 39, .2);--gld-darkblue-transparent--030: rgba(16, 24, 39, .3);--gld-darkblue-transparent--040: rgba(16, 24, 39, .4);--gld-darkblue-transparent--050: rgba(16, 24, 39, .5);--gld-darkblue-transparent--060: rgba(16, 24, 39, .6);--gld-darkblue-transparent--070: rgba(16, 24, 39, .7);--gld-darkblue-transparent--080: rgba(16, 24, 39, .8);--gld-darkblue-transparent--090: rgba(16, 24, 39, .9);--gld-border-size: 2px;--gld-animation-time--150: .15s;--gld-animation-time--250: .25s;--gld-animation-time--10s: 10s;--gld-line-height: 1.2;--gld-max-width: 1280px;--gld-navbar-height: 50px;--gld-sidebar-width: 250px}*,*:before,*:after{box-sizing:border-box;min-width:0}html,body{font-family:var(--gld-font--poppins)}body{margin:0}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin:0}p{text-wrap:pretty;margin:0}body.theme--light{color-scheme:light;--gld-foreground-color: var(--gld-darkblue);--gld-background-color: var(--gld-whitelight)}body.theme--dark{color-scheme:dark;--gld-foreground-color: var(--gld-whitelight);--gld-background-color: var(--gld-darkblue)}body.theme--system{color-scheme:light dark;--gld-foreground-color: light-dark(var(--gld-darkblue), var(--gld-whitelight));--gld-background-color: light-dark(var(--gld-whitelight), var(--gld-darkblue))}:host{width:100%}.table{--gld-color: var(--gld-foreground-color);--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-border-radius: var(--gld-radius--xxs);--gld-background: var(--gld-background-color);--gld-background--with-transparent: light-dark( var(--gld-gray-transparent--020), var(--gld-gray-transparent--010) );--gld-column-actions-or-selects-width: 40px;--gld-column-actions-and-selects-width: 80px;--gld-header-height: 40px;--gld-cell-height: 40px;--gld-min-height: 100px;min-height:var(--gld-min-height);display:grid;grid-template-columns:1fr;position:relative;border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-border-radius);background:var(--gld-background);overflow:hidden;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020)) transparent;scroll-behavior:smooth}.table::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.table::-webkit-scrollbar-track{background:transparent}.table::-webkit-scrollbar-thumb{background:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.table::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gld-gray-transparent--060),var(--gld-gray-transparent--040))}.table-content{display:flex;flex-wrap:nowrap;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020)) transparent;scroll-behavior:smooth}.table-content::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.table-content::-webkit-scrollbar-track{background:transparent}.table-content::-webkit-scrollbar-thumb{background:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.table-content::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gld-gray-transparent--060),var(--gld-gray-transparent--040))}.table-header,.table-cell{color:var(--color);font-family:var(--gld-font--poppins);padding:var(--gld-spacing--xxs) var(--gld-spacing--s);border-bottom:var(--gld-border-size) solid var(--gld-border-color)}.table-header-ellipsis,.table-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.table-header-ellipsis--hover,.table-cell-ellipsis--hover{cursor:pointer}.table-header{display:flex;align-items:center;font:600 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins);height:var(--gld-header-height);background:var(--gld-background--with-transparent)}.table-header.table-header--actions,.table-header.table-header--selects{justify-content:center}.table-header.table-header--actions.table-header--selects{justify-content:flex-start}.table-header--actions{background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-header--actions:before{content:\"\";position:absolute;inset:0;background:var(--gld-background--with-transparent)}.table-cell{display:flex;align-items:center;height:var(--gld-cell-height);font:400 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins)}.table-cell:last-of-type{margin-bottom:0;border-bottom:none}.table-cell.table-cell--actions,.table-cell.table-cell--selects{justify-content:center;padding:0}.table-cell--actions{position:relative;display:flex;justify-content:center;align-items:center;gap:var(--gld-spacing--xxxs);background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-column{flex:1 1 auto}.table-column--actions,.table-column--selects,.table-column--actions.table-column--selects{position:absolute;top:0;right:0}.table-column--actions.table-column--selects{width:var(--gld-column-actions-and-selects-width)}.table-column--actions,.table-column--selects{width:var(--gld-column-actions-or-selects-width)}.table-empty{width:100%;display:flex;color:var(--gld-color);background:var(--gld-background--with-transparent);padding:var(--gld-spacing--xs)}.table-empty p{font:400 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);text-transform:lowercase;margin:auto}.table-empty p:first-letter{text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropdownButtonComponent, selector: "gld-dropdown-button", inputs: ["value", "icon", "iconSize", "iconSpace", "moveTopToBottom", "moveLeftToRight", "direction"], outputs: ["changeValue"] }, { kind: "component", type: DropdownMenuComponent, selector: "gld-dropdown-menu", inputs: ["name", "type", "color", "size", "icon", "iconSize", "moveTopToBottom", "moveLeftToRight", "disabled", "full", "direction", "background", "selected", "initialValue"], outputs: ["changeValue", "changeFocus"] }, { kind: "component", type: LoaderComponent, selector: "gld-loader", inputs: ["loading", "background", "radius", "minHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1412
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1413
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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-loader loading background minHeight=\"100px\" />\n } @else {\n <!-- Table Columns -->\n @for (tableColumn of tableColumnsToShow(); track tableColumn) {\n <section\n class=\"table-column\"\n [style.flexBasis]=\"tableColumn.width\"\n [style.flexShrink]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n [style.flexGrow]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n [style.minWidth]=\"tableColumn.minWidth\"\n [style.maxWidth]=\"tableColumn.maxWidth\">\n <section class=\"table-header\">\n <span class=\"table-header-ellipsis\">{{ tableColumn.label }}</span>\n </section>\n @for (value of tableColumn.values; track $index) {\n <section\n class=\"table-cell\"\n [style.justifyContent]=\"tableColumn.justify\"\n [style.textAlign]=\"tableColumn.justify\">\n @if (tableColumn.transform(value) !== undefined) {\n @switch (true) {\n @case (tableColumn.template !== undefined) {\n <ng-container\n [ngTemplateOutlet]=\"tableColumn.template\"\n [ngTemplateOutletContext]=\"{ value: tableColumn.transform(value) }\" />\n }\n @default {\n <span class=\"table-cell-ellipsis\">{{ tableColumn.transform(value) }}</span>\n }\n }\n } @else {\n <span>-</span>\n }\n </section>\n }\n </section>\n } @empty {\n <!-- Empty -->\n <section class=\"table-empty\">\n <p>{{ emptyMessage() ? emptyMessage() : 'We have not data to show yet!' }}</p>\n </section>\n }\n }\n </section>\n\n <!-- Table Actions -->\n @if ((tableColumnActions().length || selects()) && !loading() && tableColumnsToShow().length) {\n <section\n class=\"table-column\"\n [class.table-column--actions]=\"tableColumnActions().length\"\n [class.table-column--selects]=\"selects()\">\n <!-- Header -->\n <section\n class=\"table-header\"\n [class.table-header--actions]=\"tableColumnActions().length\"\n [class.table-header--selects]=\"selects()\">\n <!-- Select All Checkbox -->\n @if (selectsAll()) {\n <!-- <mat-checkbox\n color=\"primary\"\n matTooltip=\"Todo\"\n matTooltipClass=\"Tooltip\"\n class=\"Checkbox\"\n [checked]=\"\n dragAndDropColumnSelected().length === dragAndDropColumns().at(0)?.values?.length\n \"\n [indeterminate]=\"\n !!dragAndDropColumnSelected().length &&\n dragAndDropColumnSelected().length !== dragAndDropColumns().at(0)?.values?.length\n \"\n (change)=\"onSelectOrUnselectAll($event, dragAndDropColumns())\"\n /> -->\n }\n </section>\n @for (value of tableColumnsToShow().at(0)?.values; track $index; let index = $index) {\n <!-- Cell -->\n <section class=\"table-cell table-cell--actions\">\n <!-- Select Checkbox -->\n @if (selects()) {\n <!-- <mat-checkbox\n color=\"primary\"\n class=\"Checkbox\"\n matTooltip=\"Seleccionar\"\n matTooltipClass=\"Tooltip\"\n [checked]=\"isSelected(dragAndDropColumns(), index)\"\n (change)=\"onSelect($event, dragAndDropColumns(), index)\" /> -->\n }\n @if (tableColumnActions()) {\n <!-- Dropdown Menu -->\n <gld-dropdown-menu\n background\n name=\"more button of table cell\"\n type=\"iconButton\"\n color=\"blue\"\n iconSize=\"small\"\n direction=\"left\"\n [icon]=\"Icons.more2Fill\"\n (changeValue)=\"\n tableActionFunction({\n tableColumnActionAsEvent: $event,\n tableColumns: tableColumns(),\n index,\n })\n \">\n @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n <gld-dropdown-button\n [value]=\"tableColumnAction\"\n [icon]=\"tableColumnAction.icon\"\n iconSize=\"tiny\">\n {{ tableColumnAction.label }}\n </gld-dropdown-button>\n }\n </gld-dropdown-menu>\n <!-- <gld-icon-button\n background\n name=\"more button of table cell\"\n iconSize=\"small\"\n [icon]=\"Icons.more2Fill\"> -->\n <!-- <gld-tile color=\"blue-to-green\" class=\"Menu\">\n <section class=\"Menu-content\">\n @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n <button\n class=\"Menu-button {{ tableColumnAction?.classToHover ?? '' }}\"\n [class.Menu-button--hidden]=\"\n !tableColumnAction.showWhen(buildDataStructure({ index }))\n \"\n (click)=\"\n tableActionFunction({\n tableColumnAction,\n tableColumns: tableColumns(),\n index,\n })\n \">\n <gld-icon size=\"tiny\" [icon]=\"tableColumnAction.icon\" />\n <span class=\"Menu-button-ellipsis\">{{ tableColumnAction.label }}</span>\n </button>\n }\n </section>\n </gld-tile> -->\n <!-- </gld-icon-button> -->\n }\n </section>\n }\n </section>\n }\n</article>\n\n<!-- Pagination -->\n@if (pagination()) {\n <section class=\"table-pagination\">\n <ng-content select=\"gld-table-pagination\" />\n </section>\n}\n\n", styles: ["@charset \"UTF-8\";:root{--gld-break-point--zero: 0;--gld-break-point--mobile: 320px;--gld-break-point--landscape: 576px;--gld-break-point--tablet: 768px;--gld-break-point--desktop: 1080px;--gld-break-point--extra-desktop: 1280px;--gld-font-size--heading-one: 36px;--gld-font-size--heading-two: 26px;--gld-font-size--heading-three: 20px;--gld-font-size--normal: 16px;--gld-font-size--small: 12px;--gld-font-size--tiny: 8px;--gld-font--poppins: \"Poppins\", sans-serif;--gld-radius--z: 0;--gld-radius--xxxs: 4px;--gld-radius--xxs: 6px;--gld-radius--xs: 8px;--gld-radius--s: 12px;--gld-radius--m: 16px;--gld-radius--l: 24px;--gld-radius--xl: 32px;--gld-radius--xxl: 40px;--gld-spacing--z: 0;--gld-spacing--xxxs: 4px;--gld-spacing--xxs: 8px;--gld-spacing--xs: 12px;--gld-spacing--s: 16px;--gld-spacing--m: 24px;--gld-spacing--l: 32px;--gld-spacing--xl: 48px;--gld-spacing--xxl: 70px;--gld-zindex--one: 1000;--gld-zindex--two: 2000;--gld-zindex--three: 3000;--gld-zindex--four: 4000;--gld-zindex--five: 5000;--gld-icon-size--large: 48px;--gld-icon-size--medium: 40px;--gld-icon-size--normal: 32px;--gld-icon-size--small: 24px;--gld-icon-size--tiny: 16px;--gld-red: #ef4444;--gld-red-transparent--005: rgba(239, 68, 68, .05);--gld-red-transparent--010: rgba(239, 68, 68, .1);--gld-red-transparent--020: rgba(239, 68, 68, .2);--gld-red-transparent--030: rgba(239, 68, 68, .3);--gld-red-transparent--040: rgba(239, 68, 68, .4);--gld-red-transparent--050: rgba(239, 68, 68, .5);--gld-red-transparent--060: rgba(239, 68, 68, .6);--gld-red-transparent--070: rgba(239, 68, 68, .7);--gld-red-transparent--080: rgba(239, 68, 68, .8);--gld-red-transparent--090: rgba(239, 68, 68, .9);--gld-blue: #3c82f6;--gld-blue-transparent--005: rgba(60, 130, 246, .05);--gld-blue-transparent--010: rgba(60, 130, 246, .1);--gld-blue-transparent--020: rgba(60, 130, 246, .2);--gld-blue-transparent--030: rgba(60, 130, 246, .3);--gld-blue-transparent--040: rgba(60, 130, 246, .4);--gld-blue-transparent--050: rgba(60, 130, 246, .5);--gld-blue-transparent--060: rgba(60, 130, 246, .6);--gld-blue-transparent--070: rgba(60, 130, 246, .7);--gld-blue-transparent--080: rgba(60, 130, 246, .8);--gld-blue-transparent--090: rgba(60, 130, 246, .9);--gld-green: #12b981;--gld-green-transparent--005: rgba(18, 185, 129, .05);--gld-green-transparent--010: rgba(18, 185, 129, .1);--gld-green-transparent--020: rgba(18, 185, 129, .2);--gld-green-transparent--030: rgba(18, 185, 129, .3);--gld-green-transparent--040: rgba(18, 185, 129, .4);--gld-green-transparent--050: rgba(18, 185, 129, .5);--gld-green-transparent--060: rgba(18, 185, 129, .6);--gld-green-transparent--070: rgba(18, 185, 129, .7);--gld-green-transparent--080: rgba(18, 185, 129, .8);--gld-green-transparent--090: rgba(18, 185, 129, .9);--gld-purple: #a855f7;--gld-purple-transparent--005: rgba(168, 85, 247, .05);--gld-purple-transparent--010: rgba(168, 85, 247, .1);--gld-purple-transparent--020: rgba(168, 85, 247, .2);--gld-purple-transparent--030: rgba(168, 85, 247, .3);--gld-purple-transparent--040: rgba(168, 85, 247, .4);--gld-purple-transparent--050: rgba(168, 85, 247, .5);--gld-purple-transparent--060: rgba(168, 85, 247, .6);--gld-purple-transparent--070: rgba(168, 85, 247, .7);--gld-purple-transparent--080: rgba(168, 85, 247, .8);--gld-purple-transparent--090: rgba(168, 85, 247, .9);--gld-mustard: #ebb305;--gld-mustard-transparent--005: rgba(235, 179, 5, .05);--gld-mustard-transparent--010: rgba(235, 179, 5, .1);--gld-mustard-transparent--020: rgba(235, 179, 5, .2);--gld-mustard-transparent--030: rgba(235, 179, 5, .3);--gld-mustard-transparent--040: rgba(235, 179, 5, .4);--gld-mustard-transparent--050: rgba(235, 179, 5, .5);--gld-mustard-transparent--060: rgba(235, 179, 5, .6);--gld-mustard-transparent--070: rgba(235, 179, 5, .7);--gld-mustard-transparent--080: rgba(235, 179, 5, .8);--gld-mustard-transparent--090: rgba(235, 179, 5, .9);--gld-orange: #f97315;--gld-orange-transparent--005: rgba(249, 115, 21, .05);--gld-orange-transparent--010: rgba(249, 115, 21, .1);--gld-orange-transparent--020: rgba(249, 115, 21, .2);--gld-orange-transparent--030: rgba(249, 115, 21, .3);--gld-orange-transparent--040: rgba(249, 115, 21, .4);--gld-orange-transparent--050: rgba(249, 115, 21, .5);--gld-orange-transparent--060: rgba(249, 115, 21, .6);--gld-orange-transparent--070: rgba(249, 115, 21, .7);--gld-orange-transparent--080: rgba(249, 115, 21, .8);--gld-orange-transparent--090: rgba(249, 115, 21, .9);--gld-pink: #ec4899;--gld-pink-transparent--005: rgba(236, 72, 153, .05);--gld-pink-transparent--010: rgba(236, 72, 153, .1);--gld-pink-transparent--020: rgba(236, 72, 153, .2);--gld-pink-transparent--030: rgba(236, 72, 153, .3);--gld-pink-transparent--040: rgba(236, 72, 153, .4);--gld-pink-transparent--050: rgba(236, 72, 153, .5);--gld-pink-transparent--060: rgba(236, 72, 153, .6);--gld-pink-transparent--070: rgba(236, 72, 153, .7);--gld-pink-transparent--080: rgba(236, 72, 153, .8);--gld-pink-transparent--090: rgba(236, 72, 153, .9);--gld-gray: #c1c7e1;--gld-gray-transparent--010: rgba(193, 199, 225, .1);--gld-gray-transparent--020: rgba(193, 199, 225, .2);--gld-gray-transparent--030: rgba(193, 199, 225, .3);--gld-gray-transparent--040: rgba(193, 199, 225, .4);--gld-gray-transparent--050: rgba(193, 199, 225, .5);--gld-gray-transparent--060: rgba(193, 199, 225, .6);--gld-gray-transparent--070: rgba(193, 199, 225, .7);--gld-gray-transparent--080: rgba(193, 199, 225, .8);--gld-gray-transparent--090: rgba(193, 199, 225, .9);--gld-white: #fff;--gld-whitelight: #f9fafb;--gld-whitelight-transparent--010: rgba(249, 250, 251, .1);--gld-whitelight-transparent--020: rgba(249, 250, 251, .2);--gld-whitelight-transparent--030: rgba(249, 250, 251, .3);--gld-whitelight-transparent--040: rgba(249, 250, 251, .4);--gld-whitelight-transparent--050: rgba(249, 250, 251, .5);--gld-whitelight-transparent--060: rgba(249, 250, 251, .6);--gld-whitelight-transparent--070: rgba(249, 250, 251, .7);--gld-whitelight-transparent--080: rgba(249, 250, 251, .8);--gld-whitelight-transparent--090: rgba(249, 250, 251, .9);--gld-darkblue: #101827;--gld-darkblue-transparent--010: rgba(16, 24, 39, .1);--gld-darkblue-transparent--020: rgba(16, 24, 39, .2);--gld-darkblue-transparent--030: rgba(16, 24, 39, .3);--gld-darkblue-transparent--040: rgba(16, 24, 39, .4);--gld-darkblue-transparent--050: rgba(16, 24, 39, .5);--gld-darkblue-transparent--060: rgba(16, 24, 39, .6);--gld-darkblue-transparent--070: rgba(16, 24, 39, .7);--gld-darkblue-transparent--080: rgba(16, 24, 39, .8);--gld-darkblue-transparent--090: rgba(16, 24, 39, .9);--gld-border-size: 1px;--gld-animation-time--150: .15s;--gld-animation-time--250: .25s;--gld-animation-time--10s: 10s;--gld-line-height: 1.2;--gld-max-width: 1280px;--gld-navbar-height: 50px;--gld-sidebar-width: 250px}*,*:before,*:after{box-sizing:border-box;min-width:0}html,body{font-family:var(--gld-font--poppins)}body{margin:0}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin:0}p{text-wrap:pretty;margin:0}body.theme--light{color-scheme:light;--gld-foreground-color: var(--gld-darkblue);--gld-background-color: var(--gld-whitelight)}body.theme--dark{color-scheme:dark;--gld-foreground-color: var(--gld-whitelight);--gld-background-color: var(--gld-darkblue)}body.theme--system{color-scheme:light dark;--gld-foreground-color: light-dark(var(--gld-darkblue), var(--gld-whitelight));--gld-background-color: light-dark(var(--gld-whitelight), var(--gld-darkblue))}:host{width:100%}.table{--gld-color: var(--gld-foreground-color);--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-border-radius: var(--gld-radius--xxs);--gld-background: var(--gld-background-color);--gld-background--with-transparent: light-dark( var(--gld-gray-transparent--020), var(--gld-gray-transparent--010) );--gld-column-actions-or-selects-width: 40px;--gld-column-actions-and-selects-width: 80px;--gld-header-height: 40px;--gld-cell-height: 40px;--gld-min-height: 100px;min-height:var(--gld-min-height);display:grid;grid-template-columns:1fr;position:relative;border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-border-radius);background:var(--gld-background);overflow:hidden}.table::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.table::-webkit-scrollbar-track{background:transparent}.table::-webkit-scrollbar-thumb{background:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.table::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gld-gray-transparent--060),var(--gld-gray-transparent--040))}.table{overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020)) transparent;scroll-behavior:smooth}.table-content{display:flex;flex-wrap:nowrap}.table-content::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.table-content::-webkit-scrollbar-track{background:transparent}.table-content::-webkit-scrollbar-thumb{background:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.table-content::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gld-gray-transparent--060),var(--gld-gray-transparent--040))}.table-content{overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020)) transparent;scroll-behavior:smooth}.table-header,.table-cell{color:var(--color);font-family:var(--gld-font--poppins);padding:var(--gld-spacing--xxs) var(--gld-spacing--s);border-bottom:var(--gld-border-size) solid var(--gld-border-color)}.table-header-ellipsis,.table-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.table-header-ellipsis--hover,.table-cell-ellipsis--hover{cursor:pointer}.table-header{display:flex;align-items:center;font:600 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins);height:var(--gld-header-height);background:var(--gld-background--with-transparent)}.table-header.table-header--actions,.table-header.table-header--selects{justify-content:center}.table-header.table-header--actions.table-header--selects{justify-content:flex-start}.table-header--actions{background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-header--actions:before{content:\"\";position:absolute;inset:0;background:var(--gld-background--with-transparent)}.table-cell{display:flex;align-items:center;height:var(--gld-cell-height);font:400 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins)}.table-cell:last-of-type{margin-bottom:0;border-bottom:none}.table-cell.table-cell--actions,.table-cell.table-cell--selects{justify-content:center;padding:0}.table-cell--actions{position:relative;display:flex;justify-content:center;align-items:center;gap:var(--gld-spacing--xxxs);background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-column{flex:1 1 auto}.table-column--actions,.table-column--selects,.table-column--actions.table-column--selects{position:absolute;top:0;right:0}.table-column--actions.table-column--selects{width:var(--gld-column-actions-and-selects-width)}.table-column--actions,.table-column--selects{width:var(--gld-column-actions-or-selects-width)}.table-empty{width:100%;display:flex;color:var(--gld-color);background:var(--gld-background--with-transparent);padding:var(--gld-spacing--xs)}.table-empty p{font:400 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);text-transform:lowercase;margin:auto}.table-empty p:first-letter{text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropdownButtonComponent, selector: "gld-dropdown-button", inputs: ["value", "icon", "iconSize", "iconSpace", "moveTopToBottom", "moveLeftToRight", "direction"], outputs: ["changeValue"] }, { kind: "component", type: DropdownMenuComponent, selector: "gld-dropdown-menu", inputs: ["name", "type", "color", "size", "icon", "iconSize", "moveTopToBottom", "moveLeftToRight", "disabled", "full", "direction", "background", "selected", "initialValue"], outputs: ["changeValue", "changeFocus"] }, { kind: "component", type: LoaderComponent, selector: "gld-loader", inputs: ["loading", "background", "radius", "minHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1412
1414
|
}
|
|
1413
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1415
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableComponent, decorators: [{
|
|
1414
1416
|
type: Component,
|
|
1415
|
-
args: [{ selector: 'gld-table', standalone: true, imports: [NgTemplateOutlet, ...components], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Search -->\n@if (search()) {\n <section class=\"table-search\">\n <ng-content select=\"gld-table-search\" />\n </section>\n}\n\n<!-- Table -->\n<article\n class=\"table\"\n [class.table--empty]=\"!tableColumnsToShow().length\"\n [style.height]=\"tableHeight()\">\n <!-- Table Content -->\n <section\n class=\"table-content\"\n [class.table-content--actions]=\"tableColumnActions().length\"\n [class.table-content--selects]=\"selects()\">\n <!-- Loading -->\n @if (loading()) {\n <gld-loader loading background minHeight=\"100px\" />\n } @else {\n <!-- Table Columns -->\n @for (tableColumn of tableColumnsToShow(); track tableColumn) {\n <section\n class=\"table-column\"\n [style.flexBasis]=\"tableColumn.width\"\n [style.flexShrink]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n [style.flexGrow]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n [style.minWidth]=\"tableColumn.minWidth\"\n [style.maxWidth]=\"tableColumn.maxWidth\">\n <section class=\"table-header\">\n <span class=\"table-header-ellipsis\">{{ tableColumn.label }}</span>\n </section>\n @for (value of tableColumn.values; track $index) {\n <section\n class=\"table-cell\"\n [style.justifyContent]=\"tableColumn.justify\"\n [style.textAlign]=\"tableColumn.justify\">\n @if (tableColumn.transform(value) !== undefined) {\n @switch (true) {\n @case (tableColumn.template !== undefined) {\n <ng-container\n [ngTemplateOutlet]=\"tableColumn.template\"\n [ngTemplateOutletContext]=\"{ value: tableColumn.transform(value) }\" />\n }\n @default {\n <span class=\"table-cell-ellipsis\">{{ tableColumn.transform(value) }}</span>\n }\n }\n } @else {\n <span>-</span>\n }\n </section>\n }\n </section>\n } @empty {\n <!-- Empty -->\n <section class=\"table-empty\">\n <p>{{ emptyMessage() ? emptyMessage() : 'We have not data to show yet!' }}</p>\n </section>\n }\n }\n </section>\n\n <!-- Table Actions -->\n @if ((tableColumnActions().length || selects()) && !loading() && tableColumnsToShow().length) {\n <section\n class=\"table-column\"\n [class.table-column--actions]=\"tableColumnActions().length\"\n [class.table-column--selects]=\"selects()\">\n <!-- Header -->\n <section\n class=\"table-header\"\n [class.table-header--actions]=\"tableColumnActions().length\"\n [class.table-header--selects]=\"selects()\">\n <!-- Select All Checkbox -->\n @if (selectsAll()) {\n <!-- <mat-checkbox\n color=\"primary\"\n matTooltip=\"Todo\"\n matTooltipClass=\"Tooltip\"\n class=\"Checkbox\"\n [checked]=\"\n dragAndDropColumnSelected().length === dragAndDropColumns().at(0)?.values?.length\n \"\n [indeterminate]=\"\n !!dragAndDropColumnSelected().length &&\n dragAndDropColumnSelected().length !== dragAndDropColumns().at(0)?.values?.length\n \"\n (change)=\"onSelectOrUnselectAll($event, dragAndDropColumns())\"\n /> -->\n }\n </section>\n @for (value of tableColumnsToShow().at(0)?.values; track $index; let index = $index) {\n <!-- Cell -->\n <section class=\"table-cell table-cell--actions\">\n <!-- Select Checkbox -->\n @if (selects()) {\n <!-- <mat-checkbox\n color=\"primary\"\n class=\"Checkbox\"\n matTooltip=\"Seleccionar\"\n matTooltipClass=\"Tooltip\"\n [checked]=\"isSelected(dragAndDropColumns(), index)\"\n (change)=\"onSelect($event, dragAndDropColumns(), index)\" /> -->\n }\n @if (tableColumnActions()) {\n <!-- Dropdown Menu -->\n <gld-dropdown-menu\n background\n name=\"more button of table cell\"\n type=\"iconButton\"\n color=\"blue\"\n iconSize=\"small\"\n direction=\"left\"\n [icon]=\"Icons.more2Fill\"\n (changeValue)=\"\n tableActionFunction({\n tableColumnActionAsEvent: $event,\n tableColumns: tableColumns(),\n index,\n })\n \">\n @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n <gld-dropdown-button\n [value]=\"tableColumnAction\"\n [icon]=\"tableColumnAction.icon\"\n iconSize=\"tiny\">\n {{ tableColumnAction.label }}\n </gld-dropdown-button>\n }\n </gld-dropdown-menu>\n <!-- <gld-icon-button\n background\n name=\"more button of table cell\"\n iconSize=\"small\"\n [icon]=\"Icons.more2Fill\"> -->\n <!-- <gld-tile color=\"blue-to-green\" class=\"Menu\">\n <section class=\"Menu-content\">\n @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n <button\n class=\"Menu-button {{ tableColumnAction?.classToHover ?? '' }}\"\n [class.Menu-button--hidden]=\"\n !tableColumnAction.showWhen(buildDataStructure({ index }))\n \"\n (click)=\"\n tableActionFunction({\n tableColumnAction,\n tableColumns: tableColumns(),\n index,\n })\n \">\n <gld-icon size=\"tiny\" [icon]=\"tableColumnAction.icon\" />\n <span class=\"Menu-button-ellipsis\">{{ tableColumnAction.label }}</span>\n </button>\n }\n </section>\n </gld-tile> -->\n <!-- </gld-icon-button> -->\n }\n </section>\n }\n </section>\n }\n</article>\n\n<!-- Pagination -->\n@if (pagination()) {\n <section class=\"table-pagination\">\n <ng-content select=\"gld-table-pagination\" />\n </section>\n}\n\n", styles: ["@charset \"UTF-8\";:root{--gld-break-point--zero: 0;--gld-break-point--mobile: 320px;--gld-break-point--landscape: 576px;--gld-break-point--tablet: 768px;--gld-break-point--desktop: 1080px;--gld-break-point--extra-desktop: 1280px;--gld-font-size--heading-one: 36px;--gld-font-size--heading-two: 26px;--gld-font-size--heading-three: 20px;--gld-font-size--normal: 16px;--gld-font-size--small: 12px;--gld-font-size--tiny: 8px;--gld-font--poppins: \"Poppins\", sans-serif;--gld-radius--z: 0;--gld-radius--xxxs: 4px;--gld-radius--xxs: 6px;--gld-radius--xs: 8px;--gld-radius--s: 12px;--gld-radius--m: 16px;--gld-radius--l: 24px;--gld-radius--xl: 32px;--gld-radius--xxl: 40px;--gld-spacing--z: 0;--gld-spacing--xxxs: 4px;--gld-spacing--xxs: 8px;--gld-spacing--xs: 12px;--gld-spacing--s: 16px;--gld-spacing--m: 24px;--gld-spacing--l: 32px;--gld-spacing--xl: 48px;--gld-spacing--xxl: 70px;--gld-zindex--one: 1000;--gld-zindex--two: 2000;--gld-zindex--three: 3000;--gld-zindex--four: 4000;--gld-zindex--five: 5000;--gld-icon-size--large: 48px;--gld-icon-size--medium: 40px;--gld-icon-size--normal: 32px;--gld-icon-size--small: 24px;--gld-icon-size--tiny: 16px;--gld-red: #ef4444;--gld-red-transparent--005: rgba(239, 68, 68, .05);--gld-red-transparent--010: rgba(239, 68, 68, .1);--gld-red-transparent--020: rgba(239, 68, 68, .2);--gld-blue: #3c82f6;--gld-blue-transparent--005: rgba(60, 130, 246, .05);--gld-blue-transparent--010: rgba(60, 130, 246, .1);--gld-blue-transparent--020: rgba(60, 130, 246, .2);--gld-green: #12b981;--gld-green-transparent--005: rgba(18, 185, 129, .05);--gld-green-transparent--010: rgba(18, 185, 129, .1);--gld-green-transparent--020: rgba(18, 185, 129, .2);--gld-purple: #a855f7;--gld-purple-transparent--005: rgba(168, 85, 247, .05);--gld-purple-transparent--010: rgba(168, 85, 247, .1);--gld-purple-transparent--020: rgba(168, 85, 247, .2);--gld-purple-transparent--080: rgba(168, 85, 247, .8);--gld-mustard: #ebb305;--gld-mustard-transparent--005: rgba(235, 179, 5, .05);--gld-mustard-transparent--010: rgba(235, 179, 5, .1);--gld-mustard-transparent--020: rgba(235, 179, 5, .2);--gld-orange: #f97315;--gld-orange-transparent--005: rgba(249, 115, 21, .05);--gld-orange-transparent--010: rgba(249, 115, 21, .1);--gld-orange-transparent--020: rgba(249, 115, 21, .2);--gld-pink: #ec4899;--gld-pink-transparent--005: rgba(236, 72, 153, .05);--gld-pink-transparent--010: rgba(236, 72, 153, .1);--gld-pink-transparent--020: rgba(236, 72, 153, .2);--gld-pink-transparent--040: rgba(236, 72, 153, .4);--gld-pink-transparent--060: rgba(236, 72, 153, .6);--gld-pink-transparent--080: rgba(236, 72, 153, .8);--gld-gray: #c1c7e1;--gld-gray-transparent--010: rgba(193, 199, 225, .1);--gld-gray-transparent--020: rgba(193, 199, 225, .2);--gld-gray-transparent--030: rgba(193, 199, 225, .3);--gld-gray-transparent--040: rgba(193, 199, 225, .4);--gld-gray-transparent--050: rgba(193, 199, 225, .5);--gld-gray-transparent--060: rgba(193, 199, 225, .6);--gld-gray-transparent--070: rgba(193, 199, 225, .7);--gld-gray-transparent--080: rgba(193, 199, 225, .8);--gld-gray-transparent--090: rgba(193, 199, 225, .9);--gld-white: #fff;--gld-whitelight: #f9fafb;--gld-whitelight-transparent--010: rgba(249, 250, 251, .1);--gld-whitelight-transparent--020: rgba(249, 250, 251, .2);--gld-whitelight-transparent--030: rgba(249, 250, 251, .3);--gld-whitelight-transparent--040: rgba(249, 250, 251, .4);--gld-whitelight-transparent--050: rgba(249, 250, 251, .5);--gld-whitelight-transparent--060: rgba(249, 250, 251, .6);--gld-whitelight-transparent--070: rgba(249, 250, 251, .7);--gld-whitelight-transparent--080: rgba(249, 250, 251, .8);--gld-whitelight-transparent--090: rgba(249, 250, 251, .9);--gld-darkblue: #101827;--gld-darkblue-transparent--010: rgba(16, 24, 39, .1);--gld-darkblue-transparent--020: rgba(16, 24, 39, .2);--gld-darkblue-transparent--030: rgba(16, 24, 39, .3);--gld-darkblue-transparent--040: rgba(16, 24, 39, .4);--gld-darkblue-transparent--050: rgba(16, 24, 39, .5);--gld-darkblue-transparent--060: rgba(16, 24, 39, .6);--gld-darkblue-transparent--070: rgba(16, 24, 39, .7);--gld-darkblue-transparent--080: rgba(16, 24, 39, .8);--gld-darkblue-transparent--090: rgba(16, 24, 39, .9);--gld-border-size: 2px;--gld-animation-time--150: .15s;--gld-animation-time--250: .25s;--gld-animation-time--10s: 10s;--gld-line-height: 1.2;--gld-max-width: 1280px;--gld-navbar-height: 50px;--gld-sidebar-width: 250px}*,*:before,*:after{box-sizing:border-box;min-width:0}html,body{font-family:var(--gld-font--poppins)}body{margin:0}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin:0}p{text-wrap:pretty;margin:0}body.theme--light{color-scheme:light;--gld-foreground-color: var(--gld-darkblue);--gld-background-color: var(--gld-whitelight)}body.theme--dark{color-scheme:dark;--gld-foreground-color: var(--gld-whitelight);--gld-background-color: var(--gld-darkblue)}body.theme--system{color-scheme:light dark;--gld-foreground-color: light-dark(var(--gld-darkblue), var(--gld-whitelight));--gld-background-color: light-dark(var(--gld-whitelight), var(--gld-darkblue))}:host{width:100%}.table{--gld-color: var(--gld-foreground-color);--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-border-radius: var(--gld-radius--xxs);--gld-background: var(--gld-background-color);--gld-background--with-transparent: light-dark( var(--gld-gray-transparent--020), var(--gld-gray-transparent--010) );--gld-column-actions-or-selects-width: 40px;--gld-column-actions-and-selects-width: 80px;--gld-header-height: 40px;--gld-cell-height: 40px;--gld-min-height: 100px;min-height:var(--gld-min-height);display:grid;grid-template-columns:1fr;position:relative;border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-border-radius);background:var(--gld-background);overflow:hidden;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020)) transparent;scroll-behavior:smooth}.table::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.table::-webkit-scrollbar-track{background:transparent}.table::-webkit-scrollbar-thumb{background:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.table::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gld-gray-transparent--060),var(--gld-gray-transparent--040))}.table-content{display:flex;flex-wrap:nowrap;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020)) transparent;scroll-behavior:smooth}.table-content::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.table-content::-webkit-scrollbar-track{background:transparent}.table-content::-webkit-scrollbar-thumb{background:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.table-content::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gld-gray-transparent--060),var(--gld-gray-transparent--040))}.table-header,.table-cell{color:var(--color);font-family:var(--gld-font--poppins);padding:var(--gld-spacing--xxs) var(--gld-spacing--s);border-bottom:var(--gld-border-size) solid var(--gld-border-color)}.table-header-ellipsis,.table-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.table-header-ellipsis--hover,.table-cell-ellipsis--hover{cursor:pointer}.table-header{display:flex;align-items:center;font:600 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins);height:var(--gld-header-height);background:var(--gld-background--with-transparent)}.table-header.table-header--actions,.table-header.table-header--selects{justify-content:center}.table-header.table-header--actions.table-header--selects{justify-content:flex-start}.table-header--actions{background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-header--actions:before{content:\"\";position:absolute;inset:0;background:var(--gld-background--with-transparent)}.table-cell{display:flex;align-items:center;height:var(--gld-cell-height);font:400 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins)}.table-cell:last-of-type{margin-bottom:0;border-bottom:none}.table-cell.table-cell--actions,.table-cell.table-cell--selects{justify-content:center;padding:0}.table-cell--actions{position:relative;display:flex;justify-content:center;align-items:center;gap:var(--gld-spacing--xxxs);background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-column{flex:1 1 auto}.table-column--actions,.table-column--selects,.table-column--actions.table-column--selects{position:absolute;top:0;right:0}.table-column--actions.table-column--selects{width:var(--gld-column-actions-and-selects-width)}.table-column--actions,.table-column--selects{width:var(--gld-column-actions-or-selects-width)}.table-empty{width:100%;display:flex;color:var(--gld-color);background:var(--gld-background--with-transparent);padding:var(--gld-spacing--xs)}.table-empty p{font:400 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);text-transform:lowercase;margin:auto}.table-empty p:first-letter{text-transform:uppercase}\n"] }]
|
|
1416
|
-
}] });
|
|
1417
|
+
args: [{ selector: 'gld-table', standalone: true, imports: [NgTemplateOutlet, ...components], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Search -->\n@if (search()) {\n <section class=\"table-search\">\n <ng-content select=\"gld-table-search\" />\n </section>\n}\n\n<!-- Table -->\n<article\n class=\"table\"\n [class.table--empty]=\"!tableColumnsToShow().length\"\n [style.height]=\"tableHeight()\">\n <!-- Table Content -->\n <section\n class=\"table-content\"\n [class.table-content--actions]=\"tableColumnActions().length\"\n [class.table-content--selects]=\"selects()\">\n <!-- Loading -->\n @if (loading()) {\n <gld-loader loading background minHeight=\"100px\" />\n } @else {\n <!-- Table Columns -->\n @for (tableColumn of tableColumnsToShow(); track tableColumn) {\n <section\n class=\"table-column\"\n [style.flexBasis]=\"tableColumn.width\"\n [style.flexShrink]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n [style.flexGrow]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n [style.minWidth]=\"tableColumn.minWidth\"\n [style.maxWidth]=\"tableColumn.maxWidth\">\n <section class=\"table-header\">\n <span class=\"table-header-ellipsis\">{{ tableColumn.label }}</span>\n </section>\n @for (value of tableColumn.values; track $index) {\n <section\n class=\"table-cell\"\n [style.justifyContent]=\"tableColumn.justify\"\n [style.textAlign]=\"tableColumn.justify\">\n @if (tableColumn.transform(value) !== undefined) {\n @switch (true) {\n @case (tableColumn.template !== undefined) {\n <ng-container\n [ngTemplateOutlet]=\"tableColumn.template\"\n [ngTemplateOutletContext]=\"{ value: tableColumn.transform(value) }\" />\n }\n @default {\n <span class=\"table-cell-ellipsis\">{{ tableColumn.transform(value) }}</span>\n }\n }\n } @else {\n <span>-</span>\n }\n </section>\n }\n </section>\n } @empty {\n <!-- Empty -->\n <section class=\"table-empty\">\n <p>{{ emptyMessage() ? emptyMessage() : 'We have not data to show yet!' }}</p>\n </section>\n }\n }\n </section>\n\n <!-- Table Actions -->\n @if ((tableColumnActions().length || selects()) && !loading() && tableColumnsToShow().length) {\n <section\n class=\"table-column\"\n [class.table-column--actions]=\"tableColumnActions().length\"\n [class.table-column--selects]=\"selects()\">\n <!-- Header -->\n <section\n class=\"table-header\"\n [class.table-header--actions]=\"tableColumnActions().length\"\n [class.table-header--selects]=\"selects()\">\n <!-- Select All Checkbox -->\n @if (selectsAll()) {\n <!-- <mat-checkbox\n color=\"primary\"\n matTooltip=\"Todo\"\n matTooltipClass=\"Tooltip\"\n class=\"Checkbox\"\n [checked]=\"\n dragAndDropColumnSelected().length === dragAndDropColumns().at(0)?.values?.length\n \"\n [indeterminate]=\"\n !!dragAndDropColumnSelected().length &&\n dragAndDropColumnSelected().length !== dragAndDropColumns().at(0)?.values?.length\n \"\n (change)=\"onSelectOrUnselectAll($event, dragAndDropColumns())\"\n /> -->\n }\n </section>\n @for (value of tableColumnsToShow().at(0)?.values; track $index; let index = $index) {\n <!-- Cell -->\n <section class=\"table-cell table-cell--actions\">\n <!-- Select Checkbox -->\n @if (selects()) {\n <!-- <mat-checkbox\n color=\"primary\"\n class=\"Checkbox\"\n matTooltip=\"Seleccionar\"\n matTooltipClass=\"Tooltip\"\n [checked]=\"isSelected(dragAndDropColumns(), index)\"\n (change)=\"onSelect($event, dragAndDropColumns(), index)\" /> -->\n }\n @if (tableColumnActions()) {\n <!-- Dropdown Menu -->\n <gld-dropdown-menu\n background\n name=\"more button of table cell\"\n type=\"iconButton\"\n color=\"blue\"\n iconSize=\"small\"\n direction=\"left\"\n [icon]=\"Icons.more2Fill\"\n (changeValue)=\"\n tableActionFunction({\n tableColumnActionAsEvent: $event,\n tableColumns: tableColumns(),\n index,\n })\n \">\n @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n <gld-dropdown-button\n [value]=\"tableColumnAction\"\n [icon]=\"tableColumnAction.icon\"\n iconSize=\"tiny\">\n {{ tableColumnAction.label }}\n </gld-dropdown-button>\n }\n </gld-dropdown-menu>\n <!-- <gld-icon-button\n background\n name=\"more button of table cell\"\n iconSize=\"small\"\n [icon]=\"Icons.more2Fill\"> -->\n <!-- <gld-tile color=\"blue-to-green\" class=\"Menu\">\n <section class=\"Menu-content\">\n @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n <button\n class=\"Menu-button {{ tableColumnAction?.classToHover ?? '' }}\"\n [class.Menu-button--hidden]=\"\n !tableColumnAction.showWhen(buildDataStructure({ index }))\n \"\n (click)=\"\n tableActionFunction({\n tableColumnAction,\n tableColumns: tableColumns(),\n index,\n })\n \">\n <gld-icon size=\"tiny\" [icon]=\"tableColumnAction.icon\" />\n <span class=\"Menu-button-ellipsis\">{{ tableColumnAction.label }}</span>\n </button>\n }\n </section>\n </gld-tile> -->\n <!-- </gld-icon-button> -->\n }\n </section>\n }\n </section>\n }\n</article>\n\n<!-- Pagination -->\n@if (pagination()) {\n <section class=\"table-pagination\">\n <ng-content select=\"gld-table-pagination\" />\n </section>\n}\n\n", styles: ["@charset \"UTF-8\";:root{--gld-break-point--zero: 0;--gld-break-point--mobile: 320px;--gld-break-point--landscape: 576px;--gld-break-point--tablet: 768px;--gld-break-point--desktop: 1080px;--gld-break-point--extra-desktop: 1280px;--gld-font-size--heading-one: 36px;--gld-font-size--heading-two: 26px;--gld-font-size--heading-three: 20px;--gld-font-size--normal: 16px;--gld-font-size--small: 12px;--gld-font-size--tiny: 8px;--gld-font--poppins: \"Poppins\", sans-serif;--gld-radius--z: 0;--gld-radius--xxxs: 4px;--gld-radius--xxs: 6px;--gld-radius--xs: 8px;--gld-radius--s: 12px;--gld-radius--m: 16px;--gld-radius--l: 24px;--gld-radius--xl: 32px;--gld-radius--xxl: 40px;--gld-spacing--z: 0;--gld-spacing--xxxs: 4px;--gld-spacing--xxs: 8px;--gld-spacing--xs: 12px;--gld-spacing--s: 16px;--gld-spacing--m: 24px;--gld-spacing--l: 32px;--gld-spacing--xl: 48px;--gld-spacing--xxl: 70px;--gld-zindex--one: 1000;--gld-zindex--two: 2000;--gld-zindex--three: 3000;--gld-zindex--four: 4000;--gld-zindex--five: 5000;--gld-icon-size--large: 48px;--gld-icon-size--medium: 40px;--gld-icon-size--normal: 32px;--gld-icon-size--small: 24px;--gld-icon-size--tiny: 16px;--gld-red: #ef4444;--gld-red-transparent--005: rgba(239, 68, 68, .05);--gld-red-transparent--010: rgba(239, 68, 68, .1);--gld-red-transparent--020: rgba(239, 68, 68, .2);--gld-red-transparent--030: rgba(239, 68, 68, .3);--gld-red-transparent--040: rgba(239, 68, 68, .4);--gld-red-transparent--050: rgba(239, 68, 68, .5);--gld-red-transparent--060: rgba(239, 68, 68, .6);--gld-red-transparent--070: rgba(239, 68, 68, .7);--gld-red-transparent--080: rgba(239, 68, 68, .8);--gld-red-transparent--090: rgba(239, 68, 68, .9);--gld-blue: #3c82f6;--gld-blue-transparent--005: rgba(60, 130, 246, .05);--gld-blue-transparent--010: rgba(60, 130, 246, .1);--gld-blue-transparent--020: rgba(60, 130, 246, .2);--gld-blue-transparent--030: rgba(60, 130, 246, .3);--gld-blue-transparent--040: rgba(60, 130, 246, .4);--gld-blue-transparent--050: rgba(60, 130, 246, .5);--gld-blue-transparent--060: rgba(60, 130, 246, .6);--gld-blue-transparent--070: rgba(60, 130, 246, .7);--gld-blue-transparent--080: rgba(60, 130, 246, .8);--gld-blue-transparent--090: rgba(60, 130, 246, .9);--gld-green: #12b981;--gld-green-transparent--005: rgba(18, 185, 129, .05);--gld-green-transparent--010: rgba(18, 185, 129, .1);--gld-green-transparent--020: rgba(18, 185, 129, .2);--gld-green-transparent--030: rgba(18, 185, 129, .3);--gld-green-transparent--040: rgba(18, 185, 129, .4);--gld-green-transparent--050: rgba(18, 185, 129, .5);--gld-green-transparent--060: rgba(18, 185, 129, .6);--gld-green-transparent--070: rgba(18, 185, 129, .7);--gld-green-transparent--080: rgba(18, 185, 129, .8);--gld-green-transparent--090: rgba(18, 185, 129, .9);--gld-purple: #a855f7;--gld-purple-transparent--005: rgba(168, 85, 247, .05);--gld-purple-transparent--010: rgba(168, 85, 247, .1);--gld-purple-transparent--020: rgba(168, 85, 247, .2);--gld-purple-transparent--030: rgba(168, 85, 247, .3);--gld-purple-transparent--040: rgba(168, 85, 247, .4);--gld-purple-transparent--050: rgba(168, 85, 247, .5);--gld-purple-transparent--060: rgba(168, 85, 247, .6);--gld-purple-transparent--070: rgba(168, 85, 247, .7);--gld-purple-transparent--080: rgba(168, 85, 247, .8);--gld-purple-transparent--090: rgba(168, 85, 247, .9);--gld-mustard: #ebb305;--gld-mustard-transparent--005: rgba(235, 179, 5, .05);--gld-mustard-transparent--010: rgba(235, 179, 5, .1);--gld-mustard-transparent--020: rgba(235, 179, 5, .2);--gld-mustard-transparent--030: rgba(235, 179, 5, .3);--gld-mustard-transparent--040: rgba(235, 179, 5, .4);--gld-mustard-transparent--050: rgba(235, 179, 5, .5);--gld-mustard-transparent--060: rgba(235, 179, 5, .6);--gld-mustard-transparent--070: rgba(235, 179, 5, .7);--gld-mustard-transparent--080: rgba(235, 179, 5, .8);--gld-mustard-transparent--090: rgba(235, 179, 5, .9);--gld-orange: #f97315;--gld-orange-transparent--005: rgba(249, 115, 21, .05);--gld-orange-transparent--010: rgba(249, 115, 21, .1);--gld-orange-transparent--020: rgba(249, 115, 21, .2);--gld-orange-transparent--030: rgba(249, 115, 21, .3);--gld-orange-transparent--040: rgba(249, 115, 21, .4);--gld-orange-transparent--050: rgba(249, 115, 21, .5);--gld-orange-transparent--060: rgba(249, 115, 21, .6);--gld-orange-transparent--070: rgba(249, 115, 21, .7);--gld-orange-transparent--080: rgba(249, 115, 21, .8);--gld-orange-transparent--090: rgba(249, 115, 21, .9);--gld-pink: #ec4899;--gld-pink-transparent--005: rgba(236, 72, 153, .05);--gld-pink-transparent--010: rgba(236, 72, 153, .1);--gld-pink-transparent--020: rgba(236, 72, 153, .2);--gld-pink-transparent--030: rgba(236, 72, 153, .3);--gld-pink-transparent--040: rgba(236, 72, 153, .4);--gld-pink-transparent--050: rgba(236, 72, 153, .5);--gld-pink-transparent--060: rgba(236, 72, 153, .6);--gld-pink-transparent--070: rgba(236, 72, 153, .7);--gld-pink-transparent--080: rgba(236, 72, 153, .8);--gld-pink-transparent--090: rgba(236, 72, 153, .9);--gld-gray: #c1c7e1;--gld-gray-transparent--010: rgba(193, 199, 225, .1);--gld-gray-transparent--020: rgba(193, 199, 225, .2);--gld-gray-transparent--030: rgba(193, 199, 225, .3);--gld-gray-transparent--040: rgba(193, 199, 225, .4);--gld-gray-transparent--050: rgba(193, 199, 225, .5);--gld-gray-transparent--060: rgba(193, 199, 225, .6);--gld-gray-transparent--070: rgba(193, 199, 225, .7);--gld-gray-transparent--080: rgba(193, 199, 225, .8);--gld-gray-transparent--090: rgba(193, 199, 225, .9);--gld-white: #fff;--gld-whitelight: #f9fafb;--gld-whitelight-transparent--010: rgba(249, 250, 251, .1);--gld-whitelight-transparent--020: rgba(249, 250, 251, .2);--gld-whitelight-transparent--030: rgba(249, 250, 251, .3);--gld-whitelight-transparent--040: rgba(249, 250, 251, .4);--gld-whitelight-transparent--050: rgba(249, 250, 251, .5);--gld-whitelight-transparent--060: rgba(249, 250, 251, .6);--gld-whitelight-transparent--070: rgba(249, 250, 251, .7);--gld-whitelight-transparent--080: rgba(249, 250, 251, .8);--gld-whitelight-transparent--090: rgba(249, 250, 251, .9);--gld-darkblue: #101827;--gld-darkblue-transparent--010: rgba(16, 24, 39, .1);--gld-darkblue-transparent--020: rgba(16, 24, 39, .2);--gld-darkblue-transparent--030: rgba(16, 24, 39, .3);--gld-darkblue-transparent--040: rgba(16, 24, 39, .4);--gld-darkblue-transparent--050: rgba(16, 24, 39, .5);--gld-darkblue-transparent--060: rgba(16, 24, 39, .6);--gld-darkblue-transparent--070: rgba(16, 24, 39, .7);--gld-darkblue-transparent--080: rgba(16, 24, 39, .8);--gld-darkblue-transparent--090: rgba(16, 24, 39, .9);--gld-border-size: 1px;--gld-animation-time--150: .15s;--gld-animation-time--250: .25s;--gld-animation-time--10s: 10s;--gld-line-height: 1.2;--gld-max-width: 1280px;--gld-navbar-height: 50px;--gld-sidebar-width: 250px}*,*:before,*:after{box-sizing:border-box;min-width:0}html,body{font-family:var(--gld-font--poppins)}body{margin:0}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin:0}p{text-wrap:pretty;margin:0}body.theme--light{color-scheme:light;--gld-foreground-color: var(--gld-darkblue);--gld-background-color: var(--gld-whitelight)}body.theme--dark{color-scheme:dark;--gld-foreground-color: var(--gld-whitelight);--gld-background-color: var(--gld-darkblue)}body.theme--system{color-scheme:light dark;--gld-foreground-color: light-dark(var(--gld-darkblue), var(--gld-whitelight));--gld-background-color: light-dark(var(--gld-whitelight), var(--gld-darkblue))}:host{width:100%}.table{--gld-color: var(--gld-foreground-color);--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-border-radius: var(--gld-radius--xxs);--gld-background: var(--gld-background-color);--gld-background--with-transparent: light-dark( var(--gld-gray-transparent--020), var(--gld-gray-transparent--010) );--gld-column-actions-or-selects-width: 40px;--gld-column-actions-and-selects-width: 80px;--gld-header-height: 40px;--gld-cell-height: 40px;--gld-min-height: 100px;min-height:var(--gld-min-height);display:grid;grid-template-columns:1fr;position:relative;border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-border-radius);background:var(--gld-background);overflow:hidden}.table::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.table::-webkit-scrollbar-track{background:transparent}.table::-webkit-scrollbar-thumb{background:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.table::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gld-gray-transparent--060),var(--gld-gray-transparent--040))}.table{overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020)) transparent;scroll-behavior:smooth}.table-content{display:flex;flex-wrap:nowrap}.table-content::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.table-content::-webkit-scrollbar-track{background:transparent}.table-content::-webkit-scrollbar-thumb{background:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.table-content::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gld-gray-transparent--060),var(--gld-gray-transparent--040))}.table-content{overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020)) transparent;scroll-behavior:smooth}.table-header,.table-cell{color:var(--color);font-family:var(--gld-font--poppins);padding:var(--gld-spacing--xxs) var(--gld-spacing--s);border-bottom:var(--gld-border-size) solid var(--gld-border-color)}.table-header-ellipsis,.table-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.table-header-ellipsis--hover,.table-cell-ellipsis--hover{cursor:pointer}.table-header{display:flex;align-items:center;font:600 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins);height:var(--gld-header-height);background:var(--gld-background--with-transparent)}.table-header.table-header--actions,.table-header.table-header--selects{justify-content:center}.table-header.table-header--actions.table-header--selects{justify-content:flex-start}.table-header--actions{background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-header--actions:before{content:\"\";position:absolute;inset:0;background:var(--gld-background--with-transparent)}.table-cell{display:flex;align-items:center;height:var(--gld-cell-height);font:400 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins)}.table-cell:last-of-type{margin-bottom:0;border-bottom:none}.table-cell.table-cell--actions,.table-cell.table-cell--selects{justify-content:center;padding:0}.table-cell--actions{position:relative;display:flex;justify-content:center;align-items:center;gap:var(--gld-spacing--xxxs);background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-column{flex:1 1 auto}.table-column--actions,.table-column--selects,.table-column--actions.table-column--selects{position:absolute;top:0;right:0}.table-column--actions.table-column--selects{width:var(--gld-column-actions-and-selects-width)}.table-column--actions,.table-column--selects{width:var(--gld-column-actions-or-selects-width)}.table-empty{width:100%;display:flex;color:var(--gld-color);background:var(--gld-background--with-transparent);padding:var(--gld-spacing--xs)}.table-empty p{font:400 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);text-transform:lowercase;margin:auto}.table-empty p:first-letter{text-transform:uppercase}\n"] }]
|
|
1418
|
+
}], 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"] }] } });
|
|
1417
1419
|
|
|
1418
1420
|
// Angular Imports
|
|
1419
1421
|
class TileComponent {
|
|
1420
|
-
color = input(TileColor.default);
|
|
1421
|
-
paddingSize = input(TilePaddingSize.zero);
|
|
1422
|
-
background = input(false, { transform: booleanAttribute });
|
|
1423
|
-
hover = input(false, { transform: booleanAttribute });
|
|
1424
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1425
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
1422
|
+
color = input(TileColor.default, ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
1423
|
+
paddingSize = input(TilePaddingSize.zero, ...(ngDevMode ? [{ debugName: "paddingSize" }] : []));
|
|
1424
|
+
background = input(false, ...(ngDevMode ? [{ debugName: "background", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
1425
|
+
hover = input(false, ...(ngDevMode ? [{ debugName: "hover", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
1426
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1427
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.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 });
|
|
1426
1428
|
}
|
|
1427
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1429
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TileComponent, decorators: [{
|
|
1428
1430
|
type: Component,
|
|
1429
1431
|
args: [{ selector: 'gld-tile', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article\n class=\"tile tile--{{ color() }} tile--padding-{{ paddingSize() }}\"\n [class.tile--background]=\"background()\"\n [class.tile--hover]=\"hover()\">\n <section class=\"tile-content\">\n <ng-content />\n </section>\n</article>\n", styles: [":host{width:100%;height:auto;position:relative;z-index:1}.tile{--gld-background: initial;--gld-background--hover: initial;--gld-border-color: transparent;--gld-padding-size: 0;--gld-radius: var(--gld-radius--xxs);width:inherit;height:inherit;position:relative;padding:var(--gld-padding-size);background:var(--gld-background);border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-radius);overflow:hidden;will-change:background;transition:background var(--gld-animation-time--150)}.tile--hover:hover,.tile--hover:focus{background:var(--gld-background--hover)}.tile.tile--hover{cursor:pointer}.tile--default{--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) )}.tile--default.tile--background{--gld-background: var(--gld-gray-transparent--010)}.tile--default.tile--hover{--gld-background--hover: var(--gld-gray-transparent--020)}.tile--blue{--gld-border-color: var(--gld-blue-transparent--020)}.tile--blue.tile--background{--gld-background: var(--gld-blue-transparent--005)}.tile--blue.tile--hover{--gld-background--hover: var(--gld-blue-transparent--010)}.tile--green{--gld-border-color: var(--gld-green-transparent--020)}.tile--green.tile--background{--gld-background: var(--gld-green-transparent--005)}.tile--green.tile--hover{--gld-background--hover: var(--gld-green-transparent--010)}.tile--purple{--gld-border-color: var(--gld-purple-transparent--020)}.tile--purple.tile--background{--gld-background: var(--gld-purple-transparent--005)}.tile--purple.tile--hover{--gld-background--hover: var(--gld-purple-transparent--010)}.tile--mustard{--gld-border-color: var(--gld-mustard-transparent--020)}.tile--mustard.tile--background{--gld-background: var(--gld-mustard-transparent--005)}.tile--mustard.tile--hover{--gld-background--hover: var(--gld-mustard-transparent--010)}.tile--orange{--gld-border-color: var(--gld-orange-transparent--020)}.tile--orange.tile--background{--gld-background: var(--gld-orange-transparent--005)}.tile--orange.tile--hover{--gld-background--hover: var(--gld-orange-transparent--010)}.tile--pink{--gld-border-color: var(--gld-pink-transparent--020)}.tile--pink.tile--background{--gld-background: var(--gld-pink-transparent--005)}.tile--pink.tile--hover{--gld-background--hover: var(--gld-pink-transparent--010)}.tile--red{--gld-border-color: var(--gld-red-transparent--020)}.tile--red.tile--background{--gld-background: var(--gld-red-transparent--005)}.tile--red.tile--hover{--gld-background--hover: var(--gld-red-transparent--010)}.tile--padding-tiny{--gld-padding-size: var(--gld-spacing--xxxs)}.tile--padding-small{--gld-padding-size: var(--gld-spacing--xs)}.tile--padding-normal{--gld-padding-size: var(--gld-spacing--s)}.tile--padding-medium{--gld-padding-size: var(--gld-spacing--l)}.tile--padding-large{--gld-padding-size: var(--gld-spacing--xl)}\n"] }]
|
|
1430
|
-
}] });
|
|
1432
|
+
}], 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 }] }] } });
|
|
1431
1433
|
|
|
1432
1434
|
// Always first
|
|
1433
1435
|
|