@testgorilla/tgo-ui 1.0.13 → 1.1.0

package/fesm2020/testgorilla-tgo-ui.mjs

@@ -43,7 +43,7 @@ import { __decorate } from 'tslib';
 import { UntilDestroy } from '@ngneat/until-destroy';
 import * as i1$7 from '@ngneat/transloco';
 import { TranslocoModule, TranslocoService } from '@ngneat/transloco';
-import { lastValueFrom, Subscription } from 'rxjs';
+import { lastValueFrom, Subscription, ReplaySubject, debounceTime, map } from 'rxjs';
 import * as i4$1 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import * as i3$1 from '@angular/material/table';
@@ -284,10 +284,10 @@ class IconComponent {
     }
 }
 IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IconComponent, deps: [{ token: i1.MatIconRegistry }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IconComponent, selector: "ui-icon", inputs: { size: "size", cssClass: "cssClass", name: "name", color: "color" }, usesOnChanges: true, ngImport: i0, template: "<mat-icon [svgIcon]=\"name\" [attr.class]=\"customCssClass\"></mat-icon>\n", styles: ["mat-icon{display:flex}mat-icon.size-16 svg{width:16px;height:16px}mat-icon.size-24 svg{width:24px;height:24px}mat-icon.dark svg{color:#888}mat-icon.white svg{color:#fff}mat-icon.teal svg{color:#46a997}mat-icon.petrol svg{color:#276678}mat-icon.black svg{color:#000}\n"], dependencies: [{ kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None });
+IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IconComponent, selector: "ui-icon", inputs: { size: "size", cssClass: "cssClass", name: "name", color: "color" }, usesOnChanges: true, ngImport: i0, template: "<mat-icon [svgIcon]=\"name\" [attr.class]=\"customCssClass\"></mat-icon>\n", styles: ["mat-icon{display:flex}mat-icon.size-16 svg{width:16px;height:16px}mat-icon.size-24 svg{width:24px;height:24px}mat-icon.size-80 svg{width:80px;height:80px}mat-icon.dark svg{color:#888}mat-icon.white svg{color:#fff}mat-icon.teal svg{color:#46a997}mat-icon.petrol svg{color:#276678}mat-icon.black svg{color:#000}\n"], dependencies: [{ kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-icon', encapsulation: ViewEncapsulation.None, template: "<mat-icon [svgIcon]=\"name\" [attr.class]=\"customCssClass\"></mat-icon>\n", styles: ["mat-icon{display:flex}mat-icon.size-16 svg{width:16px;height:16px}mat-icon.size-24 svg{width:24px;height:24px}mat-icon.dark svg{color:#888}mat-icon.white svg{color:#fff}mat-icon.teal svg{color:#46a997}mat-icon.petrol svg{color:#276678}mat-icon.black svg{color:#000}\n"] }]
+            args: [{ selector: 'ui-icon', encapsulation: ViewEncapsulation.None, template: "<mat-icon [svgIcon]=\"name\" [attr.class]=\"customCssClass\"></mat-icon>\n", styles: ["mat-icon{display:flex}mat-icon.size-16 svg{width:16px;height:16px}mat-icon.size-24 svg{width:24px;height:24px}mat-icon.size-80 svg{width:80px;height:80px}mat-icon.dark svg{color:#888}mat-icon.white svg{color:#fff}mat-icon.teal svg{color:#46a997}mat-icon.petrol svg{color:#276678}mat-icon.black svg{color:#000}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatIconRegistry }, { type: i2.DomSanitizer }]; }, propDecorators: { size: [{
                 type: Input
             }], cssClass: [{
@@ -1060,14 +1060,14 @@ class FieldComponent {
          * @type {Boolean}
          * @memberof FieldComponent
          */
-        this.updateOnBlur = true;
+        this.updateOnBlur = false;
         /**
          * allow only digits in input
          *
          * @type {Boolean}
          * @memberof FieldComponent
          */
-        this.allowOnlyDigits = true;
+        this.allowOnlyDigits = false;
         /**
          * @ignore
          */
@@ -3309,40 +3309,147 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 class TagComponent {
     constructor() {
         /**
-         * Color
+         * Icon
+         *
+         * @type {string}
+         * @memberof TagComponent
+         */
+        this.icon = '';
+        /**
+         * Whether to allow the tag to be closed.
+         *
+         * @type {boolean}
+         * @default false
+         * @memberof TagComponent
+         */
+        this.allowClose = false;
+        /**
+         * Whether the tag is in read-only mode.
+         *
+         * @type {boolean}
+         * @default false
+         * @memberof TagComponent
+         */
+        this.readOnly = false;
+        /**
+         * Whether the tag is selected.
+         *
+         * @type {boolean}
+         * @default false
+         * @memberof TagComponent
+         */
+        this.isSelected = false;
+        /**
+         * Display icon when is selected
+         *
+         * @type {boolean}
+         * @default false
+         * @memberof TagComponent
+         */
+        this.showIconWhenSelected = false;
+        /**
+         * Specifies whether the element is disabled.
+         *
+         * @type {boolean}
+         * @default false
+         * @memberof TagComponent
+         */
+        this.isDisabled = false;
+        /**
+         * Event triggered when the tag should be closed.
+         *
+         * @event
+         * @memberof TagComponent
+         */
+        this.close = new EventEmitter();
+        /**
+         * Event triggered when a press action occurs.
          *
-         * @type {TagColor}
+         * @event
          * @memberof TagComponent
          */
-        this.color = 'teal';
+        this.press = new EventEmitter();
+        /**
+         * Subject that needs to be triggered when Label input changes, to check if it's truncated
+         * @private
+         * @type {void}
+         * @memberof TagComponent
+         */
+        this.checkLabelEllipsis$ = new ReplaySubject(1);
+        /**
+         * Observable that indicates if the Label is truncated
+         * debounceTime is used to wait for view to be initialized after receiving a new Label input
+         * @protected
+         * @type {boolean}
+         * @memberof TagComponent
+         */
+        this.isEllipseActiveObs$ = this.checkLabelEllipsis$.pipe(debounceTime(100), map(() => {
+            const el = this.labelElement.nativeElement;
+            return el.offsetWidth < el.scrollWidth;
+        }));
+        this.labelText = '';
+    }
+    /**
+     * Tag's label
+     *
+     * @memberof TagComponent
+     */
+    set label(value) {
+        this.labelText = value;
+        if (this.labelElement) {
+            this.isLabelEllipseActive();
+        }
+    }
+    ngAfterViewInit() {
+        this.isLabelEllipseActive();
+    }
+    onPress() {
+        if (!this.readOnly && !this.allowClose) {
+            this.isSelected = this.showIconWhenSelected ? !this.isSelected : false;
+            this.press.emit(this.isSelected);
+        }
+    }
+    onClose() {
+        this.close.emit();
+    }
+    isLabelEllipseActive() {
+        this.checkLabelEllipsis$.next();
+    }
+    get tabIndex() {
+        return this.isDisabled || this.readOnly ? -1 : 0;
+    }
+    get filled() {
+        return this.readOnly || this.allowClose || this.isSelected;
     }
 }
 TagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TagComponent, selector: "ui-tag", inputs: { text: "text", color: "color" }, ngImport: i0, template: "<span [class]=\"color\">{{ text }}</span>\n", styles: [":host span{display:inline-flex;color:#fff;font-size:12px;line-height:16px;padding:3px 8px;border-radius:4px;text-transform:uppercase;margin-right:8px}:host span.teal{background-color:#46a997}:host span.petrol{background-color:#276678}:host span.grey{background-color:#e0e0e0;color:#000}:host span.red{background-color:#cb7b7a}:host span.gold{background-color:#cca45f}\n"] });
+TagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TagComponent, selector: "ui-tag", inputs: { label: "label", icon: "icon", allowClose: "allowClose", readOnly: "readOnly", isSelected: "isSelected", showIconWhenSelected: "showIconWhenSelected", isDisabled: "isDisabled" }, outputs: { close: "close", press: "press" }, viewQueries: [{ propertyName: "labelElement", first: true, predicate: ["labelElement"], descendants: true }], ngImport: i0, template: "<div class=\"tag-wrapper\" [matTooltip]=\"(isEllipseActiveObs$ | async) ? labelText : ''\">\n  <div\n    [tabindex]=\"tabIndex\"\n    class=\"tag-container\"\n    [attr.data-testid]=\"'tag--container'\"\n    [ngClass]=\"{\n      filled: filled,\n      readonly: readOnly,\n      disabled: isDisabled,\n      outlined: !isSelected,\n    }\"\n    (click)=\"onPress()\"\n  >\n    <ui-icon *ngIf=\"icon\" class=\"icon\" [name]=\"icon\"></ui-icon>\n    <ui-icon *ngIf=\"isSelected && showIconWhenSelected\" class=\"icon\" [name]=\"'Check'\"></ui-icon>\n    <span class=\"tag-label\" #labelElement>{{ labelText }}</span>\n    <ui-icon [tabindex]=\"tabIndex\" *ngIf=\"allowClose\" class=\"delete-icon\" (click)=\"onClose()\" [name]=\"'Close'\"></ui-icon>\n  </div>\n</div>\n", styles: [":host .tag-wrapper{max-width:264px}:host .tag-container{height:32px;max-width:264px;border-radius:4px;display:flex;align-items:center;justify-content:center;padding:0 8px;width:-moz-fit-content;width:fit-content;cursor:pointer;margin:4px}:host .tag-container.outlined{border:1px solid #6894A0}:host .tag-container:focus{outline:1px dashed #888888;outline-offset:4px;background:#F6F6F6;border:1px solid #6894A0}:host .tag-container:focus.filled{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled{background:#E9F0F1;border:1px solid #E9F0F1}:host .tag-container.filled:hover{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled:active{background:#A9C2C9;border:1px solid #1B4754}:host .tag-container:hover{background:#F6F6F6;border:1px solid #6894A0}:host .tag-container:active{background:#E9F0F1}:host .tag-container.readonly{pointer-events:none}:host .tag-container.disabled{opacity:.5;border:1px solid #276678;background:#E9F0F1;pointer-events:none}:host .tag-container .tag-label{-webkit-user-select:none;user-select:none;font-size:14px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tag-container .icon{height:16px;width:16px;min-width:16px;margin-right:8px}:host .tag-container .delete-icon{display:flex;align-items:center;justify-content:center;margin-left:8px;text-align:center;border:1px solid transparent}:host .tag-container .delete-icon:focus{border:1px dashed #1B4754;border-radius:4px}:host .tag-container .delete-icon:focus-visible{outline:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-tag', template: "<span [class]=\"color\">{{ text }}</span>\n", styles: [":host span{display:inline-flex;color:#fff;font-size:12px;line-height:16px;padding:3px 8px;border-radius:4px;text-transform:uppercase;margin-right:8px}:host span.teal{background-color:#46a997}:host span.petrol{background-color:#276678}:host span.grey{background-color:#e0e0e0;color:#000}:host span.red{background-color:#cb7b7a}:host span.gold{background-color:#cca45f}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { text: [{
+            args: [{ selector: 'ui-tag', template: "<div class=\"tag-wrapper\" [matTooltip]=\"(isEllipseActiveObs$ | async) ? labelText : ''\">\n  <div\n    [tabindex]=\"tabIndex\"\n    class=\"tag-container\"\n    [attr.data-testid]=\"'tag--container'\"\n    [ngClass]=\"{\n      filled: filled,\n      readonly: readOnly,\n      disabled: isDisabled,\n      outlined: !isSelected,\n    }\"\n    (click)=\"onPress()\"\n  >\n    <ui-icon *ngIf=\"icon\" class=\"icon\" [name]=\"icon\"></ui-icon>\n    <ui-icon *ngIf=\"isSelected && showIconWhenSelected\" class=\"icon\" [name]=\"'Check'\"></ui-icon>\n    <span class=\"tag-label\" #labelElement>{{ labelText }}</span>\n    <ui-icon [tabindex]=\"tabIndex\" *ngIf=\"allowClose\" class=\"delete-icon\" (click)=\"onClose()\" [name]=\"'Close'\"></ui-icon>\n  </div>\n</div>\n", styles: [":host .tag-wrapper{max-width:264px}:host .tag-container{height:32px;max-width:264px;border-radius:4px;display:flex;align-items:center;justify-content:center;padding:0 8px;width:-moz-fit-content;width:fit-content;cursor:pointer;margin:4px}:host .tag-container.outlined{border:1px solid #6894A0}:host .tag-container:focus{outline:1px dashed #888888;outline-offset:4px;background:#F6F6F6;border:1px solid #6894A0}:host .tag-container:focus.filled{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled{background:#E9F0F1;border:1px solid #E9F0F1}:host .tag-container.filled:hover{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled:active{background:#A9C2C9;border:1px solid #1B4754}:host .tag-container:hover{background:#F6F6F6;border:1px solid #6894A0}:host .tag-container:active{background:#E9F0F1}:host .tag-container.readonly{pointer-events:none}:host .tag-container.disabled{opacity:.5;border:1px solid #276678;background:#E9F0F1;pointer-events:none}:host .tag-container .tag-label{-webkit-user-select:none;user-select:none;font-size:14px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tag-container .icon{height:16px;width:16px;min-width:16px;margin-right:8px}:host .tag-container .delete-icon{display:flex;align-items:center;justify-content:center;margin-left:8px;text-align:center;border:1px solid transparent}:host .tag-container .delete-icon:focus{border:1px dashed #1B4754;border-radius:4px}:host .tag-container .delete-icon:focus-visible{outline:none}\n"] }]
+        }], propDecorators: { label: [{
                 type: Input
-            }], color: [{
+            }], icon: [{
+                type: Input
+            }], allowClose: [{
+                type: Input
+            }], readOnly: [{
+                type: Input
+            }], isSelected: [{
+                type: Input
+            }], showIconWhenSelected: [{
                 type: Input
+            }], isDisabled: [{
+                type: Input
+            }], close: [{
+                type: Output
+            }], press: [{
+                type: Output
+            }], labelElement: [{
+                type: ViewChild,
+                args: ['labelElement']
             }] } });
 
-class TagComponentModule {
-}
-TagComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TagComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TagComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: TagComponentModule, declarations: [TagComponent], imports: [CommonModule], exports: [TagComponent] });
-TagComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TagComponentModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TagComponentModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [TagComponent],
-                    imports: [CommonModule],
-                    exports: [TagComponent],
-                    providers: [],
-                }]
-        }] });
-
 var TooltipPositionType;
 (function (TooltipPositionType) {
     TooltipPositionType["TOP"] = "top";
@@ -3411,6 +3518,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }]
         }] });
 
+class TagComponentModule {
+}
+TagComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TagComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TagComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: TagComponentModule, declarations: [TagComponent], imports: [CommonModule, IconComponentModule, TooltipComponentModule, MatTooltipModule], exports: [TagComponent] });
+TagComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TagComponentModule, imports: [CommonModule, IconComponentModule, TooltipComponentModule, MatTooltipModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TagComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [TagComponent],
+                    imports: [CommonModule, IconComponentModule, TooltipComponentModule, MatTooltipModule],
+                    exports: [TagComponent],
+                    providers: [],
+                }]
+        }] });
+
 class DropdownComponent {
     constructor() {
         this.class = 'ui-dropdown';
@@ -3930,6 +4052,208 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }]
         }] });
 
+class ToggleComponent {
+    constructor() {
+        /**
+         * The `selected` property determines the current state of the toggle switch.
+         *
+         * @type {boolean}
+         * @default false
+         * @memberof ToggleComponent
+         */
+        this.selected = false;
+        /**
+         * The `disabled` property determines whether the toggle switch is disabled.
+         *
+         * @type {boolean}
+         * @default false
+         * @memberof ToggleComponent
+         */
+        this.disabled = false;
+        /**
+         * The `toggle` event is triggered when the state of the toggle switch changes. It returns the new state.
+         *
+         * @type {event}
+         * @memberof ToggleComponent
+         */
+        this.toggle = new EventEmitter();
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    onToggle() {
+        if (!this.disabled) {
+            this.selected = !this.selected;
+            this.toggle.emit(this.selected);
+        }
+    }
+    writeValue(state) {
+        if (state) {
+            this.selected = state;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+}
+ToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ToggleComponent, selector: "ui-toggle", inputs: { selected: "selected", disabled: "disabled" }, outputs: { toggle: "toggle" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => ToggleComponent),
+            multi: true,
+        },
+    ], ngImport: i0, template: "<div\n  [tabIndex]=\"0\"\n  class=\"toggle-container\"\n  [ngClass]=\"{ 'active': selected, 'disabled': disabled }\"\n  (click)=\"onToggle()\"\n>\n  <div class=\"knob\"></div>\n</div>\n", styles: [":host .toggle-container{width:32px;height:16px;border-radius:16px;background:#888888;display:flex;align-items:center;padding:0 2px;cursor:pointer}:host .toggle-container:focus{outline:1px dashed #888888;outline-offset:4px}:host .toggle-container .knob{height:12px;width:12px;border-radius:16px;background:#F6F6F6;transition:transform .3s}:host .toggle-container.disabled{background:#E0E0E0;pointer-events:none}:host .toggle-container.disabled:focus{outline:none}:host .toggle-container.active{background:#46A997}:host .toggle-container.active.disabled{opacity:.5}:host .toggle-container.active .knob{transform:translate(16px)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-toggle', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ToggleComponent),
+                            multi: true,
+                        },
+                    ], template: "<div\n  [tabIndex]=\"0\"\n  class=\"toggle-container\"\n  [ngClass]=\"{ 'active': selected, 'disabled': disabled }\"\n  (click)=\"onToggle()\"\n>\n  <div class=\"knob\"></div>\n</div>\n", styles: [":host .toggle-container{width:32px;height:16px;border-radius:16px;background:#888888;display:flex;align-items:center;padding:0 2px;cursor:pointer}:host .toggle-container:focus{outline:1px dashed #888888;outline-offset:4px}:host .toggle-container .knob{height:12px;width:12px;border-radius:16px;background:#F6F6F6;transition:transform .3s}:host .toggle-container.disabled{background:#E0E0E0;pointer-events:none}:host .toggle-container.disabled:focus{outline:none}:host .toggle-container.active{background:#46A997}:host .toggle-container.active.disabled{opacity:.5}:host .toggle-container.active .knob{transform:translate(16px)}\n"] }]
+        }], propDecorators: { selected: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], toggle: [{
+                type: Output
+            }] } });
+
+class ToggleComponentModule {
+}
+ToggleComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ToggleComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ToggleComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: ToggleComponentModule, declarations: [ToggleComponent], imports: [CommonModule] });
+ToggleComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ToggleComponentModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ToggleComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ToggleComponent],
+                    imports: [CommonModule],
+                }]
+        }] });
+
+var AvatarSize;
+(function (AvatarSize) {
+    AvatarSize["SMALL"] = "small";
+    AvatarSize["MEDIUM"] = "medium";
+    AvatarSize["LARGE"] = "large";
+})(AvatarSize || (AvatarSize = {}));
+const iconSize = {
+    small: '16',
+    medium: '24',
+    large: '80',
+};
+
+class NameInitialsPipe {
+    transform(value) {
+        const initials = value.split(' ').filter(Boolean);
+        if (initials.length > 1) {
+            return initials.map(initial => initial[0].toUpperCase()).join('');
+        }
+        else {
+            const firstLetters = value.substring(0, 2);
+            return `${firstLetters[0]?.toUpperCase() ?? ''}${firstLetters[1]?.toLowerCase() ?? ''}`;
+        }
+    }
+}
+NameInitialsPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NameInitialsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+NameInitialsPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NameInitialsPipe, name: "nameInitials" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NameInitialsPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'nameInitials',
+                }]
+        }] });
+
+class AvatarComponent {
+    constructor() {
+        /**
+         * Input property for specifying the size of the avatar.
+         * @type {AvatarSize}
+         * @default AvatarSize.SMALL
+         * @memberof AvatarComponent
+         */
+        this.size = AvatarSize.SMALL;
+        /**
+         * Input property for specifying the URL of the image to display in the avatar.
+         * @type {string}
+         * @memberof AvatarComponent
+         */
+        this.imageUrl = '';
+        /**
+         * Input property for specifying the initials to display in the avatar.
+         * @type {string}
+         * @memberof AvatarComponent
+         */
+        this.name = '';
+        /**
+         * Input property for specifying the tooltip text for edit.
+         * @type {string}
+         * @memberof AvatarComponent
+         */
+        this.tooltipText = '';
+        /**
+         * Input property that makes avatar clickable.
+         * @type {boolean}
+         * @memberof AvatarComponent
+         */
+        this.allowClick = false;
+        /**
+         * Event emitted when the avatar is clicked.
+         * @type {void}
+         * @memberof AvatarComponent
+         */
+        this.avatarClick = new EventEmitter();
+        this.iconSize = iconSize;
+        this.avatarSize = AvatarSize;
+    }
+    onAvatarClick() {
+        this.avatarClick.emit();
+    }
+    get clickAllowance() {
+        return this.allowClick ? 'clickable' : 'non-clickable';
+    }
+}
+AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: AvatarComponent, selector: "ui-avatar", inputs: { size: "size", imageUrl: "imageUrl", name: "name", tooltipText: "tooltipText", allowClick: "allowClick" }, outputs: { avatarClick: "avatarClick" }, ngImport: i0, template: "<div\n  class=\"avatar-container\"\n  [attr.type]=\"!imageUrl && !name ? 'icon' : 'initials'\"\n  [ngClass]=\"[size, clickAllowance]\"\n  (click)=\"onAvatarClick()\"\n>\n  <span *ngIf=\"name && !imageUrl\">\n    {{ name | nameInitials }}\n  </span>\n  <img *ngIf=\"imageUrl\" [attr.src]=\"imageUrl\" [alt]=\"'profile-image'\">\n  <ui-icon color=\"dark\" [size]=\"iconSize[size]\" *ngIf=\"!imageUrl && !name\" [name]=\"'User-profile'\"></ui-icon>\n</div>\n\n", styles: [":host .clickable{cursor:pointer}:host .non-clickable{pointer-events:none}:host .avatar-container{font-family:Open Sans,sans-serif;font-weight:400;display:flex;justify-content:center;align-items:center;border-radius:100%;background:#CBD6CB;position:relative;-webkit-user-select:none;user-select:none}:host .avatar-container[type=icon]{background:#E0E0E0}:host .avatar-container img{width:100%;height:100%;object-fit:cover;border-radius:100%}:host .avatar-container.small{width:24px;height:24px;font-size:10px}:host .avatar-container.medium{width:48px;height:48px;font-size:20px}:host .avatar-container.large{width:120px;height:120px;font-size:50px;letter-spacing:-2}:host .avatar-container .edit-avatar{display:flex;justify-content:center;align-items:center;position:absolute;right:0;bottom:0;background:#F6F6F6;width:32px;height:32px;border-radius:100%;cursor:pointer;-webkit-backdrop-filter:drop-shadow(0px 8px 24px 4px #000000,8%);backdrop-filter:drop-shadow(0px 8px 24px 4px #000000,8%)}:host .avatar-container .edit-avatar:hover{background:#EDEDED}:host .avatar-container .edit-avatar:active{background:#E0E0E0}:host .avatar-container .edit-avatar:focus{outline:1px dashed #888888;outline-offset:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "pipe", type: NameInitialsPipe, name: "nameInitials" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-avatar', template: "<div\n  class=\"avatar-container\"\n  [attr.type]=\"!imageUrl && !name ? 'icon' : 'initials'\"\n  [ngClass]=\"[size, clickAllowance]\"\n  (click)=\"onAvatarClick()\"\n>\n  <span *ngIf=\"name && !imageUrl\">\n    {{ name | nameInitials }}\n  </span>\n  <img *ngIf=\"imageUrl\" [attr.src]=\"imageUrl\" [alt]=\"'profile-image'\">\n  <ui-icon color=\"dark\" [size]=\"iconSize[size]\" *ngIf=\"!imageUrl && !name\" [name]=\"'User-profile'\"></ui-icon>\n</div>\n\n", styles: [":host .clickable{cursor:pointer}:host .non-clickable{pointer-events:none}:host .avatar-container{font-family:Open Sans,sans-serif;font-weight:400;display:flex;justify-content:center;align-items:center;border-radius:100%;background:#CBD6CB;position:relative;-webkit-user-select:none;user-select:none}:host .avatar-container[type=icon]{background:#E0E0E0}:host .avatar-container img{width:100%;height:100%;object-fit:cover;border-radius:100%}:host .avatar-container.small{width:24px;height:24px;font-size:10px}:host .avatar-container.medium{width:48px;height:48px;font-size:20px}:host .avatar-container.large{width:120px;height:120px;font-size:50px;letter-spacing:-2}:host .avatar-container .edit-avatar{display:flex;justify-content:center;align-items:center;position:absolute;right:0;bottom:0;background:#F6F6F6;width:32px;height:32px;border-radius:100%;cursor:pointer;-webkit-backdrop-filter:drop-shadow(0px 8px 24px 4px #000000,8%);backdrop-filter:drop-shadow(0px 8px 24px 4px #000000,8%)}:host .avatar-container .edit-avatar:hover{background:#EDEDED}:host .avatar-container .edit-avatar:active{background:#E0E0E0}:host .avatar-container .edit-avatar:focus{outline:1px dashed #888888;outline-offset:4px}\n"] }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], imageUrl: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], tooltipText: [{
+                type: Input
+            }], allowClick: [{
+                type: Input
+            }], avatarClick: [{
+                type: Output
+            }] } });
+
+class AvatarComponentModule {
+}
+AvatarComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AvatarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AvatarComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: AvatarComponentModule, declarations: [AvatarComponent, NameInitialsPipe], imports: [CommonModule, IconComponentModule, MatTooltipModule], exports: [AvatarComponent] });
+AvatarComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AvatarComponentModule, imports: [CommonModule, IconComponentModule, MatTooltipModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AvatarComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AvatarComponent, NameInitialsPipe],
+                    imports: [CommonModule, IconComponentModule, MatTooltipModule],
+                    exports: [AvatarComponent],
+                }]
+        }] });
+
 /* eslint-disable */
 /* Components */
 // Alert Banner
@@ -3938,5 +4262,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AlertBannerComponent, AlertBannerComponentModule, BannerActionComponent, BannerActionComponentModule, ButtonComponent, ButtonComponentModule, CardComponent, CardComponentModule, CheckboxComponent, CheckboxComponentModule, ColumnAlignmentEnum, ColumnTypeEnum, ConfirmDialogComponent, ConfirmDialogComponentModule, CreateAccountComponent, CreateAccountComponentModule, CreatePasswordComponent, CreatePasswordComponentModule, DataPropertyGetterPipe, DatepickerComponent, DatepickerComponentModule, DialogComponent, DialogComponentModule, DialogService, DropdownComponent, DropdownComponentModule, ElevationShadowComponent, ElevationShadowComponentModule, ElevationType, FieldComponent, FieldComponentModule, FileUploadComponent, FileUploadComponentModule, ForgotPasswordComponent, ForgotPasswordComponentModule, IconComponent, IconComponentModule, IconLabelComponent, IconLabelComponentModule, LabelComponent, LabelComponentModule, LabelSizeEnum, LoginComponent, LoginComponentModule, LogoComponent, LogoComponentModule, LogoPathEnum, LogoTypeEnum, NavbarComponent, NavbarComponentModule, NavigationComponent, NavigationComponentModule, PaginatorComponent, PaginatorComponentModule, ProgressBarComponent, ProgressBarComponentModule, RadioButtonComponent, RadioButtonComponentModule, RatingComponent, RatingComponentModule, SnackbarComponent, SnackbarComponentModule, SnackbarService, SpinnerComponent, SpinnerComponentModule, TableComponent, TableComponentModule, TagComponent, TagComponentModule, TooltipComponent, TooltipComponentModule, TooltipPositionType, preloadLang };
+export { AlertBannerComponent, AlertBannerComponentModule, AvatarComponent, AvatarComponentModule, BannerActionComponent, BannerActionComponentModule, ButtonComponent, ButtonComponentModule, CardComponent, CardComponentModule, CheckboxComponent, CheckboxComponentModule, ColumnAlignmentEnum, ColumnTypeEnum, ConfirmDialogComponent, ConfirmDialogComponentModule, CreateAccountComponent, CreateAccountComponentModule, CreatePasswordComponent, CreatePasswordComponentModule, DataPropertyGetterPipe, DatepickerComponent, DatepickerComponentModule, DialogComponent, DialogComponentModule, DialogService, DropdownComponent, DropdownComponentModule, ElevationShadowComponent, ElevationShadowComponentModule, ElevationType, FieldComponent, FieldComponentModule, FileUploadComponent, FileUploadComponentModule, ForgotPasswordComponent, ForgotPasswordComponentModule, IconComponent, IconComponentModule, IconLabelComponent, IconLabelComponentModule, LabelComponent, LabelComponentModule, LabelSizeEnum, LoginComponent, LoginComponentModule, LogoComponent, LogoComponentModule, LogoPathEnum, LogoTypeEnum, NavbarComponent, NavbarComponentModule, NavigationComponent, NavigationComponentModule, PaginatorComponent, PaginatorComponentModule, ProgressBarComponent, ProgressBarComponentModule, RadioButtonComponent, RadioButtonComponentModule, RatingComponent, RatingComponentModule, SnackbarComponent, SnackbarComponentModule, SnackbarService, SpinnerComponent, SpinnerComponentModule, TableComponent, TableComponentModule, TagComponent, TagComponentModule, ToggleComponent, ToggleComponentModule, TooltipComponent, TooltipComponentModule, TooltipPositionType, preloadLang };
 //# sourceMappingURL=testgorilla-tgo-ui.mjs.map