@ngstarter-ui/components 1.0.21

package/fesm2022/ngstarter-ui-components-avatar.mjs

@@ -0,0 +1,235 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, ElementRef, input, booleanAttribute, forwardRef, Component } from '@angular/core';
+import { createAvatar } from '@dicebear/core';
+import { initials, identicon } from '@dicebear/collection';
+import { v7 } from 'uuid';
+import { SafeHtmlPipe } from '@ngstarter-ui/components/core';
+
+const AVATAR_ACCESSOR = new InjectionToken('AVATAR_ACCESSOR');
+
+const alreadyLoadedImages$1 = [];
+class Avatar {
+    _elementRef = inject(ElementRef);
+    image = input('', ...(ngDevMode ? [{ debugName: "image" }] : /* istanbul ignore next */ []));
+    variant = input('', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    clickable = input(false, { ...(ngDevMode ? { debugName: "clickable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    alt = input('', ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
+    automaticColor = input(...(ngDevMode ? [undefined, { debugName: "automaticColor" }] : /* istanbul ignore next */ []));
+    presenceIndicator = input(null, ...(ngDevMode ? [{ debugName: "presenceIndicator" }] : /* istanbul ignore next */ []));
+    imageLoaded;
+    showLabel = false;
+    ngOnInit() {
+        if (!this.image()) {
+            return;
+        }
+        this.imageLoaded = alreadyLoadedImages$1.includes(this.image());
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.showLabel = true;
+        }, 0);
+    }
+    ngOnChanges(changes) {
+        if (changes['automaticColor'] && changes['automaticColor'].currentValue) {
+            this._setAutomaticColor(changes['automaticColor'].currentValue);
+        }
+    }
+    onImageLoaded() {
+        if (this.imageLoaded) {
+            return;
+        }
+        alreadyLoadedImages$1.push(this.image());
+        this.imageLoaded = true;
+    }
+    _setAutomaticColor(color) {
+        if (!this.isValidHex(color)) {
+            throw new Error(`Invalid ${color} color, automatic color supports only a valid hex color`);
+        }
+        const element = this._elementRef.nativeElement;
+        element.style.setProperty('--ngs-avatar-bg', color);
+        element.style.setProperty('--ngs-avatar-border-color-auto', this._newShade(color, -25));
+        element.style.setProperty('--ngs-avatar-color', this._newShade(color, -150));
+    }
+    _newShade(hexColor, magnitude) {
+        hexColor = hexColor.replace(`#`, ``);
+        if (hexColor.length === 6) {
+            const decimalColor = parseInt(hexColor, 16);
+            let r = (decimalColor >> 16) + magnitude;
+            r > 255 && (r = 255);
+            r < 0 && (r = 0);
+            let g = (decimalColor & 0x0000ff) + magnitude;
+            g > 255 && (g = 255);
+            g < 0 && (g = 0);
+            let b = ((decimalColor >> 8) & 0x00ff) + magnitude;
+            b > 255 && (b = 255);
+            b < 0 && (b = 0);
+            return `#${(g | (b << 8) | (r << 16)).toString(16)}`;
+        }
+        else {
+            return hexColor;
+        }
+    }
+    ;
+    isValidHex(color) {
+        if (!color || typeof color !== 'string') {
+            return false;
+        }
+        // Validate hex values
+        if (color.substring(0, 1) === '#') {
+            color = color.substring(1);
+        }
+        switch (color.length) {
+            case 3: {
+                return /^[0-9A-F]{3}$/i.test(color);
+            }
+            case 6: {
+                return /^[0-9A-F]{6}$/i.test(color);
+            }
+            case 8: {
+                return /^[0-9A-F]{8}$/i.test(color);
+            }
+            default: {
+                return false;
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Avatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Avatar, isStandalone: true, selector: "ngs-avatar,[ngs-avatar]", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, automaticColor: { classPropertyName: "automaticColor", publicName: "automaticColor", isSignal: true, isRequired: false, transformFunction: null }, presenceIndicator: { classPropertyName: "presenceIndicator", publicName: "presenceIndicator", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-clickable": "clickable()", "class.has-automatic-color": "!!automaticColor()", "class.has-loaded-image": "image() && imageLoaded", "class.is-solid": "variant() === \"solid\"", "class.is-tonal": "variant() === \"tonal\"", "class.is-outlined": "variant() === \"outlined\"", "class.is-plain": "variant() === \"plain\"" }, classAttribute: "ngs-avatar" }, providers: [
+            {
+                provide: AVATAR_ACCESSOR,
+                useExisting: forwardRef(() => Avatar),
+                multi: true
+            }
+        ], exportAs: ["ngsAvatar"], usesOnChanges: true, ngImport: i0, template: "@if (image()) {\n  <img class=\"image\" loading=\"lazy\" [src]=\"image()\" [alt]=\"alt()\" (load)=\"onImageLoaded()\">\n}\n\n@if (presenceIndicator()) {\n  <div class=\"presence-indicator\"\n       [class.is-online]=\"presenceIndicator() === 'online'\"\n       [class.is-offline]=\"presenceIndicator() === 'offline'\"\n       [class.is-away]=\"presenceIndicator() === 'away'\"></div>\n}\n\n@if (label() && showLabel) {\n  <svg viewBox=\"0 0 50 50\" class=\"text\">\n    <text\n      x=\"50%\"\n      y=\"50%\"\n      alignment-baseline=\"central\"\n      text-anchor=\"middle\"\n      font-weight=\"inherit\"\n      font-size=\"20\"\n      fill=\"currentColor\">{{ label() }}</text>\n  </svg>\n}\n\n<ng-content select=\"mat-icon,ngs-icon\"/>\n", styles: [":host{--ngs-avatar-font-weight: 500;--ngs-avatar-size: calc(var(--spacing, .25rem) * 10);--ngs-avatar-border-radius: calc(infinity * 1px);--ngs-avatar-bg: var(--color-surface-container-highest);--ngs-avatar-color: var(--color-on-surface);--ngs-avatar-presence-indicator-size: 20%;--ngs-avatar-presence-indicator-position-top: 5%;--ngs-avatar-presence-indicator-position-end: 5%;--ngs-avatar-presence-indicator-online-bg: var(--color-positive);--ngs-avatar-presence-indicator-offline-bg: var(--color-on-surface-variant);--ngs-avatar-presence-indicator-away-bg: var(--color-notice);--ngs-avatar-presence-indicator-outline: var(--color-surface) solid 2px;--ngs-avatar-inner-border: inset 0 0 1px var(--color-outline-variant);--ngs-avatar-border-color: transparent;--ngs-avatar-border-width: 1px;display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;flex:none;text-transform:uppercase;position:relative;font-weight:var(--ngs-avatar-font-weight)}:host:not([class*=text-]){color:var(--ngs-avatar-color)}:host:not([class*=rounded]){border-radius:var(--ngs-avatar-border-radius)}:host:not([class*=w-]):not([class*=size-]){width:var(--ngs-avatar-size)}:host:not([class*=h-]):not([class*=size-]){height:var(--ngs-avatar-size)}:host:not([class*=bg-]):not(.has-loaded-image){background:var(--ngs-avatar-bg)}:host.is-solid{--ngs-avatar-bg: var(--color-primary);--ngs-avatar-color: var(--color-on-primary)}:host.is-tonal{--ngs-avatar-bg: var(--color-surface-container-highest);--ngs-avatar-color: var(--color-on-surface)}:host.is-outlined{--ngs-avatar-bg: transparent;--ngs-avatar-color: var(--color-on-surface);box-shadow:var(--ngs-avatar-inner-border)}:host.is-plain{--ngs-avatar-bg: transparent;--ngs-avatar-color: var(--color-on-surface)}:host .text{z-index:0;width:100%;height:100%}:host.has-loaded-image .text{display:none}:host.is-clickable{cursor:pointer}:host.is-hidden{display:none}:host.is-clickable:active{scale:.97}:host .image{display:inline;object-fit:cover;position:absolute;width:100%;height:100%;border-radius:inherit;z-index:1}:host .presence-indicator{position:absolute;z-index:1;outline:var(--ngs-avatar-presence-indicator-outline);border-radius:6.1875rem;width:var(--ngs-avatar-presence-indicator-size);height:var(--ngs-avatar-presence-indicator-size);top:var(--ngs-avatar-presence-indicator-position-top);inset-inline-end:var(--ngs-avatar-presence-indicator-position-end)}:host .presence-indicator.is-online{background:var(--ngs-avatar-presence-indicator-online-bg)}:host .presence-indicator.is-offline{background:var(--ngs-avatar-presence-indicator-offline-bg)}:host .presence-indicator.is-away{background:var(--ngs-avatar-presence-indicator-away-bg)}:host ::ng-deep .ngs-icon{display:flex;align-items:center;justify-content:center}:host.has-automatic-color{--ngs-avatar-border-color: var(--ngs-avatar-border-color-auto, transparent)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Avatar, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-avatar,[ngs-avatar]', exportAs: 'ngsAvatar', standalone: true, providers: [
+                        {
+                            provide: AVATAR_ACCESSOR,
+                            useExisting: forwardRef(() => Avatar),
+                            multi: true
+                        }
+                    ], host: {
+                        'class': 'ngs-avatar',
+                        '[class.is-clickable]': 'clickable()',
+                        '[class.has-automatic-color]': '!!automaticColor()',
+                        '[class.has-loaded-image]': 'image() && imageLoaded',
+                        '[class.is-solid]': 'variant() === "solid"',
+                        '[class.is-tonal]': 'variant() === "tonal"',
+                        '[class.is-outlined]': 'variant() === "outlined"',
+                        '[class.is-plain]': 'variant() === "plain"',
+                    }, template: "@if (image()) {\n  <img class=\"image\" loading=\"lazy\" [src]=\"image()\" [alt]=\"alt()\" (load)=\"onImageLoaded()\">\n}\n\n@if (presenceIndicator()) {\n  <div class=\"presence-indicator\"\n       [class.is-online]=\"presenceIndicator() === 'online'\"\n       [class.is-offline]=\"presenceIndicator() === 'offline'\"\n       [class.is-away]=\"presenceIndicator() === 'away'\"></div>\n}\n\n@if (label() && showLabel) {\n  <svg viewBox=\"0 0 50 50\" class=\"text\">\n    <text\n      x=\"50%\"\n      y=\"50%\"\n      alignment-baseline=\"central\"\n      text-anchor=\"middle\"\n      font-weight=\"inherit\"\n      font-size=\"20\"\n      fill=\"currentColor\">{{ label() }}</text>\n  </svg>\n}\n\n<ng-content select=\"mat-icon,ngs-icon\"/>\n", styles: [":host{--ngs-avatar-font-weight: 500;--ngs-avatar-size: calc(var(--spacing, .25rem) * 10);--ngs-avatar-border-radius: calc(infinity * 1px);--ngs-avatar-bg: var(--color-surface-container-highest);--ngs-avatar-color: var(--color-on-surface);--ngs-avatar-presence-indicator-size: 20%;--ngs-avatar-presence-indicator-position-top: 5%;--ngs-avatar-presence-indicator-position-end: 5%;--ngs-avatar-presence-indicator-online-bg: var(--color-positive);--ngs-avatar-presence-indicator-offline-bg: var(--color-on-surface-variant);--ngs-avatar-presence-indicator-away-bg: var(--color-notice);--ngs-avatar-presence-indicator-outline: var(--color-surface) solid 2px;--ngs-avatar-inner-border: inset 0 0 1px var(--color-outline-variant);--ngs-avatar-border-color: transparent;--ngs-avatar-border-width: 1px;display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;flex:none;text-transform:uppercase;position:relative;font-weight:var(--ngs-avatar-font-weight)}:host:not([class*=text-]){color:var(--ngs-avatar-color)}:host:not([class*=rounded]){border-radius:var(--ngs-avatar-border-radius)}:host:not([class*=w-]):not([class*=size-]){width:var(--ngs-avatar-size)}:host:not([class*=h-]):not([class*=size-]){height:var(--ngs-avatar-size)}:host:not([class*=bg-]):not(.has-loaded-image){background:var(--ngs-avatar-bg)}:host.is-solid{--ngs-avatar-bg: var(--color-primary);--ngs-avatar-color: var(--color-on-primary)}:host.is-tonal{--ngs-avatar-bg: var(--color-surface-container-highest);--ngs-avatar-color: var(--color-on-surface)}:host.is-outlined{--ngs-avatar-bg: transparent;--ngs-avatar-color: var(--color-on-surface);box-shadow:var(--ngs-avatar-inner-border)}:host.is-plain{--ngs-avatar-bg: transparent;--ngs-avatar-color: var(--color-on-surface)}:host .text{z-index:0;width:100%;height:100%}:host.has-loaded-image .text{display:none}:host.is-clickable{cursor:pointer}:host.is-hidden{display:none}:host.is-clickable:active{scale:.97}:host .image{display:inline;object-fit:cover;position:absolute;width:100%;height:100%;border-radius:inherit;z-index:1}:host .presence-indicator{position:absolute;z-index:1;outline:var(--ngs-avatar-presence-indicator-outline);border-radius:6.1875rem;width:var(--ngs-avatar-presence-indicator-size);height:var(--ngs-avatar-presence-indicator-size);top:var(--ngs-avatar-presence-indicator-position-top);inset-inline-end:var(--ngs-avatar-presence-indicator-position-end)}:host .presence-indicator.is-online{background:var(--ngs-avatar-presence-indicator-online-bg)}:host .presence-indicator.is-offline{background:var(--ngs-avatar-presence-indicator-offline-bg)}:host .presence-indicator.is-away{background:var(--ngs-avatar-presence-indicator-away-bg)}:host ::ng-deep .ngs-icon{display:flex;align-items:center;justify-content:center}:host.has-automatic-color{--ngs-avatar-border-color: var(--ngs-avatar-border-color-auto, transparent)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], automaticColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "automaticColor", required: false }] }], presenceIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "presenceIndicator", required: false }] }] } });
+
+class AvatarGroup {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AvatarGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: AvatarGroup, isStandalone: true, selector: "ngs-avatar-group", host: { classAttribute: "ngs-avatar-group" }, exportAs: ["ngsAvatarGroup"], ngImport: i0, template: "<ng-content/>\n", styles: [":host{--ngs-avatar-group-item-offset: calc(var(--spacing, .25rem) * 4);--ngs-avatar-group-item-border: 2px solid white;display:flex;flex:none;position:relative;align-items:center}:host ::ng-deep *+*{margin-left:calc(var(--ngs-avatar-group-item-offset) * -1)}:host ::ng-deep .ngs-avatar,:host ::ng-deep .ngs-avatar-total,:host ::ng-deep .ngs-avatar-more{border:var(--ngs-avatar-group-item-border);z-index:0}:host ::ng-deep .ngs-avatar:hover,:host ::ng-deep .ngs-avatar-total:hover,:host ::ng-deep .ngs-avatar-more:hover{z-index:1}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AvatarGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-avatar-group', exportAs: 'ngsAvatarGroup', standalone: true, host: {
+                        'class': 'ngs-avatar-group'
+                    }, template: "<ng-content/>\n", styles: [":host{--ngs-avatar-group-item-offset: calc(var(--spacing, .25rem) * 4);--ngs-avatar-group-item-border: 2px solid white;display:flex;flex:none;position:relative;align-items:center}:host ::ng-deep *+*{margin-left:calc(var(--ngs-avatar-group-item-offset) * -1)}:host ::ng-deep .ngs-avatar,:host ::ng-deep .ngs-avatar-total,:host ::ng-deep .ngs-avatar-more{border:var(--ngs-avatar-group-item-border);z-index:0}:host ::ng-deep .ngs-avatar:hover,:host ::ng-deep .ngs-avatar-total:hover,:host ::ng-deep .ngs-avatar-more:hover{z-index:1}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class AvatarMore {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AvatarMore, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: AvatarMore, isStandalone: true, selector: "ngs-avatar-more,[ngs-avatar-more]", host: { classAttribute: "ngs-avatar-more" }, exportAs: ["ngsAvatarMore"], ngImport: i0, template: "<ng-content/>\n", styles: [":host{--ngs-avatar-font-weight: 500;--ngs-avatar-size: calc(var(--spacing, .25rem) * 10);--ngs-avatar-border-radius: calc(infinity * 1px);--ngs-avatar-bg: oklch(69.6% .17 162.48);--ngs-avatar-color: white;--ngs-avatar-inner-border: inset 0 0 2px var(--color-border);--ngs-avatar-total-font-size: .75rem;--ngs-avatar-total-font-weight: 500;--ngs-avatar-total-color: white;--ngs-avatar-total-bg: var(--color-neutral-700);--ngs-avatar-total-hover-bg: var(--color-neutral-600);background:var(--ngs-avatar-total-bg);font-size:var(--ngs-avatar-total-font-size);font-weight:var(--ngs-avatar-total-font-weight);color:var(--ngs-avatar-total-color);border-radius:var(--ngs-avatar-border-radius);flex:none;display:flex;align-items:center;justify-content:center}:host:hover{background:var(--ngs-avatar-total-hover-bg)}:host:not([class*=w-]):not([class*=size-]){width:var(--ngs-avatar-size)}:host:not([class*=h-]):not([class*=size-]){height:var(--ngs-avatar-size)}:host-context(html.dark){--ngs-avatar-group-item-border: .125rem solid var(--color-neutral-950);--ngs-avatar-presence-indicator-outline: var(--color-neutral-950) solid 2px}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AvatarMore, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-avatar-more,[ngs-avatar-more]', exportAs: 'ngsAvatarMore', imports: [], host: {
+                        'class': 'ngs-avatar-more'
+                    }, template: "<ng-content/>\n", styles: [":host{--ngs-avatar-font-weight: 500;--ngs-avatar-size: calc(var(--spacing, .25rem) * 10);--ngs-avatar-border-radius: calc(infinity * 1px);--ngs-avatar-bg: oklch(69.6% .17 162.48);--ngs-avatar-color: white;--ngs-avatar-inner-border: inset 0 0 2px var(--color-border);--ngs-avatar-total-font-size: .75rem;--ngs-avatar-total-font-weight: 500;--ngs-avatar-total-color: white;--ngs-avatar-total-bg: var(--color-neutral-700);--ngs-avatar-total-hover-bg: var(--color-neutral-600);background:var(--ngs-avatar-total-bg);font-size:var(--ngs-avatar-total-font-size);font-weight:var(--ngs-avatar-total-font-weight);color:var(--ngs-avatar-total-color);border-radius:var(--ngs-avatar-border-radius);flex:none;display:flex;align-items:center;justify-content:center}:host:hover{background:var(--ngs-avatar-total-hover-bg)}:host:not([class*=w-]):not([class*=size-]){width:var(--ngs-avatar-size)}:host:not([class*=h-]):not([class*=size-]){height:var(--ngs-avatar-size)}:host-context(html.dark){--ngs-avatar-group-item-border: .125rem solid var(--color-neutral-950);--ngs-avatar-presence-indicator-outline: var(--color-neutral-950) solid 2px}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+// DEPRECATED
+class AvatarTotal {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AvatarTotal, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: AvatarTotal, isStandalone: true, selector: "ngs-avatar-total,[ngs-avatar-total]", host: { classAttribute: "ngs-avatar-total" }, exportAs: ["ngsAvatarTotal"], ngImport: i0, template: "<ng-content />\n", styles: [":host{--ngs-avatar-font-weight: 500;--ngs-avatar-size: calc(var(--spacing, .25rem) * 10);--ngs-avatar-border-radius: calc(infinity * 1px);--ngs-avatar-bg: oklch(69.6% .17 162.48);--ngs-avatar-color: white;--ngs-avatar-inner-border: inset 0 0 2px var(--color-border);--ngs-avatar-total-font-size: .75rem;--ngs-avatar-total-font-weight: 500;--ngs-avatar-total-color: white;--ngs-avatar-total-bg: var(--color-neutral-700);--ngs-avatar-total-hover-bg: var(--color-neutral-600);background:var(--ngs-avatar-total-bg);font-size:var(--ngs-avatar-total-font-size);font-weight:var(--ngs-avatar-total-font-weight);color:var(--ngs-avatar-total-color);border-radius:var(--ngs-avatar-border-radius);flex:none;display:flex;align-items:center;justify-content:center}:host:hover{background:var(--ngs-avatar-total-hover-bg)}:host:not([class*=w-]):not([class*=size-]){width:var(--ngs-avatar-size)}:host:not([class*=h-]):not([class*=size-]){height:var(--ngs-avatar-size)}:host-context(html.dark){--ngs-avatar-group-item-border: .125rem solid var(--color-neutral-950);--ngs-avatar-presence-indicator-outline: var(--color-neutral-950) solid 2px}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AvatarTotal, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-avatar-total,[ngs-avatar-total]', exportAs: 'ngsAvatarTotal', standalone: true, host: {
+                        'class': 'ngs-avatar-total'
+                    }, template: "<ng-content />\n", styles: [":host{--ngs-avatar-font-weight: 500;--ngs-avatar-size: calc(var(--spacing, .25rem) * 10);--ngs-avatar-border-radius: calc(infinity * 1px);--ngs-avatar-bg: oklch(69.6% .17 162.48);--ngs-avatar-color: white;--ngs-avatar-inner-border: inset 0 0 2px var(--color-border);--ngs-avatar-total-font-size: .75rem;--ngs-avatar-total-font-weight: 500;--ngs-avatar-total-color: white;--ngs-avatar-total-bg: var(--color-neutral-700);--ngs-avatar-total-hover-bg: var(--color-neutral-600);background:var(--ngs-avatar-total-bg);font-size:var(--ngs-avatar-total-font-size);font-weight:var(--ngs-avatar-total-font-weight);color:var(--ngs-avatar-total-color);border-radius:var(--ngs-avatar-border-radius);flex:none;display:flex;align-items:center;justify-content:center}:host:hover{background:var(--ngs-avatar-total-hover-bg)}:host:not([class*=w-]):not([class*=size-]){width:var(--ngs-avatar-size)}:host:not([class*=h-]):not([class*=size-]){height:var(--ngs-avatar-size)}:host-context(html.dark){--ngs-avatar-group-item-border: .125rem solid var(--color-neutral-950);--ngs-avatar-presence-indicator-outline: var(--color-neutral-950) solid 2px}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+const alreadyLoadedImages = [];
+const presets = {
+    'identicon': {
+        style: identicon,
+        options: {
+            scale: 55,
+            backgroundColor: ['cbebf7', 'ebe1fc', 'd1f9db', 'f7e4e7', 'fce8d4', 'dcfcf9']
+        }
+    },
+    'initials': {
+        style: initials,
+        options: {
+            scale: 75,
+            fontWeight: 500
+        }
+    }
+};
+class Dicebear {
+    image = input('', ...(ngDevMode ? [{ debugName: "image" }] : /* istanbul ignore next */ []));
+    clickable = input(false, { ...(ngDevMode ? { debugName: "clickable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    key = input(...(ngDevMode ? [undefined, { debugName: "key" }] : /* istanbul ignore next */ []));
+    preset = input('identicon', ...(ngDevMode ? [{ debugName: "preset" }] : /* istanbul ignore next */ []));
+    alt = input(...(ngDevMode ? [undefined, { debugName: "alt" }] : /* istanbul ignore next */ []));
+    presenceIndicator = input(null, ...(ngDevMode ? [{ debugName: "presenceIndicator" }] : /* istanbul ignore next */ []));
+    imageLoaded;
+    svg = '';
+    ngOnInit() {
+        if (this.image()) {
+            this.imageLoaded = alreadyLoadedImages.includes(this.image());
+        }
+        const preset = presets[this.preset()];
+        const avatar = createAvatar(preset.style, {
+            seed: this.key() || '',
+            ...preset.options
+        });
+        this.svg = avatar.toString().replace('viewboxMask', v7());
+    }
+    onImageLoaded() {
+        if (this.imageLoaded) {
+            return;
+        }
+        alreadyLoadedImages.push(this.image());
+        this.imageLoaded = true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Dicebear, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Dicebear, isStandalone: true, selector: "ngs-dicebear,[ngs-dicebear]", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, preset: { classPropertyName: "preset", publicName: "preset", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, presenceIndicator: { classPropertyName: "presenceIndicator", publicName: "presenceIndicator", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-clickable": "clickable()", "class.has-loaded-image": "image() && imageLoaded" }, classAttribute: "ngs-avatar ngs-dicebear" }, providers: [
+            {
+                provide: AVATAR_ACCESSOR,
+                useExisting: forwardRef(() => Dicebear),
+                multi: true
+            }
+        ], exportAs: ["ngsDicebear"], ngImport: i0, template: "@if (image()) {\n  <img class=\"image\" loading=\"lazy\" [src]=\"image()\"\n       [alt]=\"alt() || ''\" (load)=\"onImageLoaded()\">\n}\n\n@if (presenceIndicator()) {\n  <div class=\"presence-indicator\"\n       [class.is-online]=\"presenceIndicator() === 'online'\"\n       [class.is-offline]=\"presenceIndicator() === 'offline'\"\n       [class.is-away]=\"presenceIndicator() === 'away'\"></div>\n}\n\n@if (!image() && svg) {\n  <div class=\"svg\" [innerHTML]=\"svg | safeHtml\"></div>\n}\n", styles: [":host{--ngs-avatar-font-weight: 500;--ngs-avatar-size: calc(var(--spacing, .25rem) * 10);--ngs-avatar-border-radius: calc(infinity * 1px);--ngs-avatar-bg: var(--color-surface-container-high);--ngs-avatar-color: var(--color-on-surface);--ngs-avatar-presence-indicator-size: 20%;--ngs-avatar-presence-indicator-position-top: 5%;--ngs-avatar-presence-indicator-position-end: 5%;--ngs-avatar-presence-indicator-online-bg: var(--color-positive);--ngs-avatar-presence-indicator-offline-bg: var(--color-on-surface-variant);--ngs-avatar-presence-indicator-away-bg: var(--color-notice);--ngs-avatar-presence-indicator-outline: var(--color-surface) solid 2px;--ngs-avatar-inner-border: inset 0 0 2px var(--color-outline-variant);display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;flex:none;text-transform:uppercase;position:relative;font-weight:var(--ngs-avatar-font-weight)}:host:not([class*=shadow-]){box-shadow:var(--ngs-avatar-inner-border)}:host .svg{overflow:hidden;border-radius:inherit;position:absolute;inset:0;z-index:0}:host:not([class*=rounded]),:host:not([class*=rounded]) .svg{border-radius:var(--ngs-avatar-border-radius)}:host:not([class*=w-]):not([class*=size-]){width:var(--ngs-avatar-size)}:host:not([class*=h-]):not([class*=size-]){height:var(--ngs-avatar-size)}:host.is-clickable{cursor:pointer}:host.is-hidden{display:none}:host.is-clickable:active{scale:.97}:host .image{display:inline;object-fit:cover;position:absolute;width:100%;height:100%;border-radius:inherit;z-index:1}:host .presence-indicator{position:absolute;z-index:1;outline:var(--ngs-avatar-presence-indicator-outline);border-radius:6.1875rem;width:var(--ngs-avatar-presence-indicator-size);height:var(--ngs-avatar-presence-indicator-size);top:var(--ngs-avatar-presence-indicator-position-top);inset-inline-end:var(--ngs-avatar-presence-indicator-position-end)}:host .presence-indicator.is-online{background:var(--ngs-avatar-presence-indicator-online-bg)}:host .presence-indicator.is-offline{background:var(--ngs-avatar-presence-indicator-offline-bg)}:host .presence-indicator.is-away{background:var(--ngs-avatar-presence-indicator-away-bg)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Dicebear, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-dicebear,[ngs-dicebear]', exportAs: 'ngsDicebear', providers: [
+                        {
+                            provide: AVATAR_ACCESSOR,
+                            useExisting: forwardRef(() => Dicebear),
+                            multi: true
+                        }
+                    ], imports: [
+                        SafeHtmlPipe,
+                    ], host: {
+                        'class': 'ngs-avatar ngs-dicebear',
+                        '[class.is-clickable]': 'clickable()',
+                        '[class.has-loaded-image]': 'image() && imageLoaded',
+                    }, template: "@if (image()) {\n  <img class=\"image\" loading=\"lazy\" [src]=\"image()\"\n       [alt]=\"alt() || ''\" (load)=\"onImageLoaded()\">\n}\n\n@if (presenceIndicator()) {\n  <div class=\"presence-indicator\"\n       [class.is-online]=\"presenceIndicator() === 'online'\"\n       [class.is-offline]=\"presenceIndicator() === 'offline'\"\n       [class.is-away]=\"presenceIndicator() === 'away'\"></div>\n}\n\n@if (!image() && svg) {\n  <div class=\"svg\" [innerHTML]=\"svg | safeHtml\"></div>\n}\n", styles: [":host{--ngs-avatar-font-weight: 500;--ngs-avatar-size: calc(var(--spacing, .25rem) * 10);--ngs-avatar-border-radius: calc(infinity * 1px);--ngs-avatar-bg: var(--color-surface-container-high);--ngs-avatar-color: var(--color-on-surface);--ngs-avatar-presence-indicator-size: 20%;--ngs-avatar-presence-indicator-position-top: 5%;--ngs-avatar-presence-indicator-position-end: 5%;--ngs-avatar-presence-indicator-online-bg: var(--color-positive);--ngs-avatar-presence-indicator-offline-bg: var(--color-on-surface-variant);--ngs-avatar-presence-indicator-away-bg: var(--color-notice);--ngs-avatar-presence-indicator-outline: var(--color-surface) solid 2px;--ngs-avatar-inner-border: inset 0 0 2px var(--color-outline-variant);display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;flex:none;text-transform:uppercase;position:relative;font-weight:var(--ngs-avatar-font-weight)}:host:not([class*=shadow-]){box-shadow:var(--ngs-avatar-inner-border)}:host .svg{overflow:hidden;border-radius:inherit;position:absolute;inset:0;z-index:0}:host:not([class*=rounded]),:host:not([class*=rounded]) .svg{border-radius:var(--ngs-avatar-border-radius)}:host:not([class*=w-]):not([class*=size-]){width:var(--ngs-avatar-size)}:host:not([class*=h-]):not([class*=size-]){height:var(--ngs-avatar-size)}:host.is-clickable{cursor:pointer}:host.is-hidden{display:none}:host.is-clickable:active{scale:.97}:host .image{display:inline;object-fit:cover;position:absolute;width:100%;height:100%;border-radius:inherit;z-index:1}:host .presence-indicator{position:absolute;z-index:1;outline:var(--ngs-avatar-presence-indicator-outline);border-radius:6.1875rem;width:var(--ngs-avatar-presence-indicator-size);height:var(--ngs-avatar-presence-indicator-size);top:var(--ngs-avatar-presence-indicator-position-top);inset-inline-end:var(--ngs-avatar-presence-indicator-position-end)}:host .presence-indicator.is-online{background:var(--ngs-avatar-presence-indicator-online-bg)}:host .presence-indicator.is-offline{background:var(--ngs-avatar-presence-indicator-offline-bg)}:host .presence-indicator.is-away{background:var(--ngs-avatar-presence-indicator-away-bg)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], preset: [{ type: i0.Input, args: [{ isSignal: true, alias: "preset", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], presenceIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "presenceIndicator", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AVATAR_ACCESSOR, Avatar, AvatarGroup, AvatarMore, AvatarTotal, Dicebear };
+//# sourceMappingURL=ngstarter-ui-components-avatar.mjs.map

package/fesm2022/ngstarter-ui-components-avatar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngstarter-ui-components-avatar.mjs","sources":["../../../projects/components/avatar/src/types.ts","../../../projects/components/avatar/src/avatar/avatar.ts","../../../projects/components/avatar/src/avatar/avatar.html","../../../projects/components/avatar/src/avatar-group/avatar-group.ts","../../../projects/components/avatar/src/avatar-group/avatar-group.html","../../../projects/components/avatar/src/avatar-more/avatar-more.ts","../../../projects/components/avatar/src/avatar-more/avatar-more.html","../../../projects/components/avatar/src/avatar-total/avatar-total.ts","../../../projects/components/avatar/src/avatar-total/avatar-total.html","../../../projects/components/avatar/src/dicebear/dicebear.ts","../../../projects/components/avatar/src/dicebear/dicebear.html","../../../projects/components/avatar/ngstarter-ui-components-avatar.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\n\nexport const AVATAR_ACCESSOR = new InjectionToken('AVATAR_ACCESSOR');\nexport type AvatarPresenceIndicator = 'online' | 'offline' | 'away' | null | string;\nexport type AvatarVariant = 'solid' | 'tonal' | 'outlined' | 'plain' | string;\n","import {\n  AfterViewInit,\n  booleanAttribute,\n  Component,\n  ElementRef,\n  forwardRef,\n  inject,\n  input,\n  OnChanges,\n  OnInit,\n  SimpleChanges\n} from '@angular/core';\nimport { AVATAR_ACCESSOR, AvatarPresenceIndicator, AvatarVariant } from '../types';\n\nconst alreadyLoadedImages: string[] = [];\n\n@Component({\n  selector: 'ngs-avatar,[ngs-avatar]',\n  exportAs: 'ngsAvatar',\n  standalone: true,\n  templateUrl: './avatar.html',\n  styleUrl: './avatar.scss',\n  providers: [\n    {\n      provide: AVATAR_ACCESSOR,\n      useExisting: forwardRef(() => Avatar),\n      multi: true\n    }\n  ],\n  host: {\n    'class': 'ngs-avatar',\n    '[class.is-clickable]': 'clickable()',\n    '[class.has-automatic-color]': '!!automaticColor()',\n    '[class.has-loaded-image]': 'image() && imageLoaded',\n    '[class.is-solid]': 'variant() === \"solid\"',\n    '[class.is-tonal]': 'variant() === \"tonal\"',\n    '[class.is-outlined]': 'variant() === \"outlined\"',\n    '[class.is-plain]': 'variant() === \"plain\"',\n  }\n})\nexport class Avatar implements OnInit, OnChanges, AfterViewInit {\n  private _elementRef = inject(ElementRef);\n\n  image = input<string>('');\n  variant = input<AvatarVariant>('');\n  clickable = input(false, {\n    transform: booleanAttribute\n  });\n  label = input('');\n  alt = input('');\n  automaticColor = input();\n  presenceIndicator = input<AvatarPresenceIndicator>(null);\n\n  protected imageLoaded: boolean;\n  protected showLabel = false;\n\n  ngOnInit() {\n    if (!this.image()) {\n      return;\n    }\n\n    this.imageLoaded = alreadyLoadedImages.includes(<string>this.image());\n  }\n\n  ngAfterViewInit() {\n    setTimeout(() => {\n      this.showLabel = true;\n    }, 0);\n  }\n\n  ngOnChanges(changes: SimpleChanges) {\n    if (changes['automaticColor'] && changes['automaticColor'].currentValue) {\n      this._setAutomaticColor(changes['automaticColor'].currentValue);\n    }\n  }\n\n  onImageLoaded(): void {\n    if (this.imageLoaded) {\n      return;\n    }\n\n    alreadyLoadedImages.push(<string>this.image());\n    this.imageLoaded = true;\n  }\n\n  private _setAutomaticColor(color: any): void {\n    if (!this.isValidHex(color)) {\n      throw new Error(`Invalid ${color} color, automatic color supports only a valid hex color`);\n    }\n\n    const element = this._elementRef.nativeElement as HTMLElement;\n    element.style.setProperty('--ngs-avatar-bg', color);\n    element.style.setProperty('--ngs-avatar-border-color-auto', this._newShade(color, -25));\n    element.style.setProperty('--ngs-avatar-color', this._newShade(color, -150));\n  }\n\n  private _newShade(hexColor: string, magnitude: number): string {\n    hexColor = hexColor.replace(`#`, ``);\n      if (hexColor.length === 6) {\n      const decimalColor = parseInt(hexColor, 16);\n      let r = (decimalColor >> 16) + magnitude;\n      r > 255 && (r = 255);\n      r < 0 && (r = 0);\n      let g = (decimalColor & 0x0000ff) + magnitude;\n      g > 255 && (g = 255);\n      g < 0 && (g = 0);\n      let b = ((decimalColor >> 8) & 0x00ff) + magnitude;\n      b > 255 && (b = 255);\n      b < 0 && (b = 0);\n      return `#${(g | (b << 8) | (r << 16)).toString(16)}`;\n    } else {\n      return hexColor;\n    }\n  };\n\n  isValidHex(color: any): boolean {\n    if(!color || typeof color !== 'string') {\n      return false;\n    }\n\n    // Validate hex values\n    if(color.substring(0, 1) === '#') {\n      color = color.substring(1);\n    }\n\n    switch(color.length) {\n      case 3: {\n        return /^[0-9A-F]{3}$/i.test(color);\n      }\n      case 6: {\n        return /^[0-9A-F]{6}$/i.test(color);\n      }\n      case 8: {\n        return /^[0-9A-F]{8}$/i.test(color);\n      }\n      default: {\n        return false;\n      }\n    }\n  }\n}\n","@if (image()) {\n  <img class=\"image\" loading=\"lazy\" [src]=\"image()\" [alt]=\"alt()\" (load)=\"onImageLoaded()\">\n}\n\n@if (presenceIndicator()) {\n  <div class=\"presence-indicator\"\n       [class.is-online]=\"presenceIndicator() === 'online'\"\n       [class.is-offline]=\"presenceIndicator() === 'offline'\"\n       [class.is-away]=\"presenceIndicator() === 'away'\"></div>\n}\n\n@if (label() && showLabel) {\n  <svg viewBox=\"0 0 50 50\" class=\"text\">\n    <text\n      x=\"50%\"\n      y=\"50%\"\n      alignment-baseline=\"central\"\n      text-anchor=\"middle\"\n      font-weight=\"inherit\"\n      font-size=\"20\"\n      fill=\"currentColor\">{{ label() }}</text>\n  </svg>\n}\n\n<ng-content select=\"mat-icon,ngs-icon\"/>\n","import { Component } from '@angular/core';\n\n@Component({\n  selector: 'ngs-avatar-group',\n  exportAs: 'ngsAvatarGroup',\n  standalone: true,\n  templateUrl: './avatar-group.html',\n  styleUrl: './avatar-group.scss',\n  host: {\n    'class': 'ngs-avatar-group'\n  }\n})\nexport class AvatarGroup {\n}\n","<ng-content/>\n","import { Component } from '@angular/core';\n\n@Component({\n  selector: 'ngs-avatar-more,[ngs-avatar-more]',\n  exportAs: 'ngsAvatarMore',\n  imports: [],\n  templateUrl: './avatar-more.html',\n  styleUrl: './avatar-more.scss',\n  host: {\n    'class': 'ngs-avatar-more'\n  }\n})\nexport class AvatarMore {\n\n}\n","<ng-content/>\n","import { Component } from '@angular/core';\n\n// DEPRECATED\n@Component({\n  selector: 'ngs-avatar-total,[ngs-avatar-total]',\n  exportAs: 'ngsAvatarTotal',\n  standalone: true,\n  templateUrl: './avatar-total.html',\n  styleUrl: './avatar-total.scss',\n  host: {\n    'class': 'ngs-avatar-total'\n  }\n})\nexport class AvatarTotal {\n}\n","<ng-content />\n","import {\n  booleanAttribute,\n  Component,\n  forwardRef,\n  input, OnInit\n} from '@angular/core';\nimport { AVATAR_ACCESSOR, AvatarPresenceIndicator } from '../types';\nimport { createAvatar } from '@dicebear/core';\nimport { identicon, initials } from '@dicebear/collection';\nimport { v7 as uuid } from 'uuid';\nimport { SafeHtmlPipe } from '@ngstarter-ui/components/core';\n\nexport interface Preset {\n  style: any,\n  options?: {\n    scale?: number;\n    backgroundColor?: string[];\n    fontWeight?: number;\n  }\n}\n\nconst alreadyLoadedImages: string[] = [];\nconst presets: {[prop: string]: Preset} = {\n  'identicon': {\n    style: identicon,\n    options: {\n      scale: 55,\n      backgroundColor: ['cbebf7', 'ebe1fc', 'd1f9db', 'f7e4e7', 'fce8d4', 'dcfcf9']\n    }\n  },\n  'initials': {\n    style: initials,\n    options: {\n      scale: 75,\n      fontWeight: 500\n    }\n  }\n};\n\n@Component({\n  selector: 'ngs-dicebear,[ngs-dicebear]',\n  exportAs: 'ngsDicebear',\n  templateUrl: './dicebear.html',\n  styleUrl: './dicebear.scss',\n  providers: [\n    {\n      provide: AVATAR_ACCESSOR,\n      useExisting: forwardRef(() => Dicebear),\n      multi: true\n    }\n  ],\n  imports: [\n    SafeHtmlPipe,\n  ],\n  host: {\n    'class': 'ngs-avatar ngs-dicebear',\n    '[class.is-clickable]': 'clickable()',\n    '[class.has-loaded-image]': 'image() && imageLoaded',\n  }\n})\nexport class Dicebear implements OnInit {\n  image = input<string>('');\n  clickable = input(false, {\n    transform: booleanAttribute\n  });\n  key = input<any>();\n  preset = input<string>('identicon');\n  alt = input<string>();\n  presenceIndicator = input<AvatarPresenceIndicator>(null);\n\n  protected imageLoaded: boolean;\n  protected svg = '';\n\n  ngOnInit() {\n    if (this.image()) {\n      this.imageLoaded = alreadyLoadedImages.includes(<string>this.image());\n    }\n\n    const preset = presets[this.preset()];\n    const avatar = createAvatar(preset.style, {\n      seed: this.key() || '',\n      ...preset.options\n    });\n    this.svg = avatar.toString().replace('viewboxMask', uuid());\n  }\n\n  onImageLoaded(): void {\n    if (this.imageLoaded) {\n      return;\n    }\n\n    alreadyLoadedImages.push(<string>this.image());\n    this.imageLoaded = true;\n  }\n}\n","@if (image()) {\n  <img class=\"image\" loading=\"lazy\" [src]=\"image()\"\n       [alt]=\"alt() || ''\" (load)=\"onImageLoaded()\">\n}\n\n@if (presenceIndicator()) {\n  <div class=\"presence-indicator\"\n       [class.is-online]=\"presenceIndicator() === 'online'\"\n       [class.is-offline]=\"presenceIndicator() === 'offline'\"\n       [class.is-away]=\"presenceIndicator() === 'away'\"></div>\n}\n\n@if (!image() && svg) {\n  <div class=\"svg\" [innerHTML]=\"svg | safeHtml\"></div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["alreadyLoadedImages","uuid"],"mappings":"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"}

package/fesm2022/ngstarter-ui-components-badge.mjs

@@ -0,0 +1,97 @@
+import * as i0 from '@angular/core';
+import { Component, inject, ElementRef, ApplicationRef, EnvironmentInjector, Injector, Renderer2, input, booleanAttribute, computed, createComponent, Directive } from '@angular/core';
+
+class BadgeContent {
+    content;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BadgeContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: BadgeContent, isStandalone: true, selector: "ngs-badge-content", ngImport: i0, template: `{{ content }}`, isInline: true, styles: [":host.ngs-primary{--ngs-badge-background: var(--color-primary);--ngs-badge-text-color: var(--color-on-primary)}:host.ngs-accent{--ngs-badge-background: var(--color-secondary);--ngs-badge-text-color: var(--color-on-secondary)}:host.ngs-warn{--ngs-badge-background: var(--color-error);--ngs-badge-text-color: var(--color-on-error)}:host{position:absolute;display:flex;justify-content:center;align-content:center;align-items:center;border-radius:16px;font-family:var(--font-sans),serif;font-size:var(--ngs-badge-font-size, 10px);font-weight:600!important;white-space:nowrap;padding:0 4px;text-overflow:ellipsis;background:var(--ngs-badge-background-color, var(--color-primary));color:var(--ngs-badge-text-color, var(--color-on-primary));--_ngs-badge-current-size: var(--ngs-badge-size, 16px);min-width:var(--_ngs-badge-current-size);height:var(--_ngs-badge-current-size);line-height:var(--_ngs-badge-current-size);transition:transform .2s ease-in-out;pointer-events:none;z-index:1}:host-context(.ngs-badge-small) :host{--_ngs-badge-current-size: var(--ngs-badge-small-size, 6px);min-width:var(--_ngs-badge-current-size);height:var(--_ngs-badge-current-size);line-height:var(--_ngs-badge-current-size);font-size:0;color:transparent;padding:0}:host-context(.ngs-badge-small) :host:after{content:none}:host-context(.ngs-badge-small) :host *{display:none}:host-context(.ngs-badge-large) :host{--_ngs-badge-current-size: var(--ngs-badge-large-size, 18px);min-width:var(--_ngs-badge-current-size);height:var(--_ngs-badge-current-size);line-height:var(--_ngs-badge-current-size);font-size:12px}:host-context(.ngs-badge-hidden) :host{display:none}:host-context(.ngs-badge-disabled) :host{background:var(--color-surface-container-high);color:var(--color-on-surface-variant)}:host-context(.ngs-badge-above) :host{top:6px}:host-context(.ngs-badge-below) :host{bottom:6px}:host-context(.ngs-badge-before) :host{left:2px}:host-context(.ngs-badge-after) :host{right:2px}:host-context(.ngs-badge:not(.ngs-badge-overlap)) :host.ngs-badge-above{top:0}:host-context(.ngs-badge:not(.ngs-badge-overlap)) :host.ngs-badge-below{bottom:0}:host-context(.ngs-badge:not(.ngs-badge-overlap)) :host.ngs-badge-before{left:0}:host-context(.ngs-badge:not(.ngs-badge-overlap)) :host.ngs-badge-after{right:0}:host-context(.ngs-badge-overlap.ngs-badge-above:not(.ngs-badge-before):not(.ngs-badge-after)) :host{transform:translateY(-50%)}:host-context(.ngs-badge-overlap.ngs-badge-below:not(.ngs-badge-before):not(.ngs-badge-after)) :host{transform:translateY(50%)}:host-context(.ngs-badge-overlap.ngs-badge-before:not(.ngs-badge-above):not(.ngs-badge-below)) :host{transform:translate(-50%)}:host-context(.ngs-badge-overlap.ngs-badge-after:not(.ngs-badge-above):not(.ngs-badge-below)) :host{transform:translate(50%)}:host-context(.ngs-badge-overlap.ngs-badge-above.ngs-badge-before) :host{transform:translate(-50%,-50%)}:host-context(.ngs-badge-overlap.ngs-badge-above.ngs-badge-after) :host{transform:translate(50%,-50%)}:host-context(.ngs-badge-overlap.ngs-badge-below.ngs-badge-before) :host{transform:translate(-50%,50%)}:host-context(.ngs-badge-overlap.ngs-badge-below.ngs-badge-after) :host{transform:translate(50%,50%)}:host-context(.ngs-badge:not(.ngs-badge-overlap).ngs-badge-above:not(.ngs-badge-before):not(.ngs-badge-after)) :host{transform:translateY(-100%)}:host-context(.ngs-badge:not(.ngs-badge-overlap).ngs-badge-below:not(.ngs-badge-before):not(.ngs-badge-after)) :host{transform:translateY(100%)}:host-context(.ngs-badge:not(.ngs-badge-overlap).ngs-badge-before:not(.ngs-badge-above):not(.ngs-badge-below)) :host{transform:translate(-100%)}:host-context(.ngs-badge:not(.ngs-badge-overlap).ngs-badge-after:not(.ngs-badge-above):not(.ngs-badge-below)) :host{transform:translate(100%)}:host-context(.ngs-badge:not(.ngs-badge-overlap).ngs-badge-above.ngs-badge-before) :host{transform:translate(-100%,-100%)}:host-context(.ngs-badge:not(.ngs-badge-overlap).ngs-badge-above.ngs-badge-after) :host{transform:translate(100%,-100%)}:host-context(.ngs-badge:not(.ngs-badge-overlap).ngs-badge-below.ngs-badge-before) :host{transform:translate(-100%,100%)}:host-context(.ngs-badge:not(.ngs-badge-overlap).ngs-badge-below.ngs-badge-after) :host{transform:translate(100%,100%)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BadgeContent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-badge-content', standalone: true, template: `{{ content }}`, styles: [":host.ngs-primary{--ngs-badge-background: var(--color-primary);--ngs-badge-text-color: var(--color-on-primary)}:host.ngs-accent{--ngs-badge-background: var(--color-secondary);--ngs-badge-text-color: var(--color-on-secondary)}:host.ngs-warn{--ngs-badge-background: var(--color-error);--ngs-badge-text-color: var(--color-on-error)}:host{position:absolute;display:flex;justify-content:center;align-content:center;align-items:center;border-radius:16px;font-family:var(--font-sans),serif;font-size:var(--ngs-badge-font-size, 10px);font-weight:600!important;white-space:nowrap;padding:0 4px;text-overflow:ellipsis;background:var(--ngs-badge-background-color, var(--color-primary));color:var(--ngs-badge-text-color, var(--color-on-primary));--_ngs-badge-current-size: var(--ngs-badge-size, 16px);min-width:var(--_ngs-badge-current-size);height:var(--_ngs-badge-current-size);line-height:var(--_ngs-badge-current-size);transition:transform .2s ease-in-out;pointer-events:none;z-index:1}:host-context(.ngs-badge-small) :host{--_ngs-badge-current-size: var(--ngs-badge-small-size, 6px);min-width:var(--_ngs-badge-current-size);height:var(--_ngs-badge-current-size);line-height:var(--_ngs-badge-current-size);font-size:0;color:transparent;padding:0}:host-context(.ngs-badge-small) :host:after{content:none}:host-context(.ngs-badge-small) :host *{display:none}:host-context(.ngs-badge-large) :host{--_ngs-badge-current-size: var(--ngs-badge-large-size, 18px);min-width:var(--_ngs-badge-current-size);height:var(--_ngs-badge-current-size);line-height:var(--_ngs-badge-current-size);font-size:12px}:host-context(.ngs-badge-hidden) :host{display:none}:host-context(.ngs-badge-disabled) :host{background:var(--color-surface-container-high);color:var(--color-on-surface-variant)}:host-context(.ngs-badge-above) :host{top:6px}:host-context(.ngs-badge-below) :host{bottom:6px}:host-context(.ngs-badge-before) :host{left:2px}:host-context(.ngs-badge-after) :host{right:2px}:host-context(.ngs-badge:not(.ngs-badge-overlap)) :host.ngs-badge-above{top:0}:host-context(.ngs-badge:not(.ngs-badge-overlap)) :host.ngs-badge-below{bottom:0}:host-context(.ngs-badge:not(.ngs-badge-overlap)) :host.ngs-badge-before{left:0}:host-context(.ngs-badge:not(.ngs-badge-overlap)) :host.ngs-badge-after{right:0}:host-context(.ngs-badge-overlap.ngs-badge-above:not(.ngs-badge-before):not(.ngs-badge-after)) :host{transform:translateY(-50%)}:host-context(.ngs-badge-overlap.ngs-badge-below:not(.ngs-badge-before):not(.ngs-badge-after)) :host{transform:translateY(50%)}:host-context(.ngs-badge-overlap.ngs-badge-before:not(.ngs-badge-above):not(.ngs-badge-below)) :host{transform:translate(-50%)}:host-context(.ngs-badge-overlap.ngs-badge-after:not(.ngs-badge-above):not(.ngs-badge-below)) :host{transform:translate(50%)}:host-context(.ngs-badge-overlap.ngs-badge-above.ngs-badge-before) :host{transform:translate(-50%,-50%)}:host-context(.ngs-badge-overlap.ngs-badge-above.ngs-badge-after) :host{transform:translate(50%,-50%)}:host-context(.ngs-badge-overlap.ngs-badge-below.ngs-badge-before) :host{transform:translate(-50%,50%)}:host-context(.ngs-badge-overlap.ngs-badge-below.ngs-badge-after) :host{transform:translate(50%,50%)}:host-context(.ngs-badge:not(.ngs-badge-overlap).ngs-badge-above:not(.ngs-badge-before):not(.ngs-badge-after)) :host{transform:translateY(-100%)}:host-context(.ngs-badge:not(.ngs-badge-overlap).ngs-badge-below:not(.ngs-badge-before):not(.ngs-badge-after)) :host{transform:translateY(100%)}:host-context(.ngs-badge:not(.ngs-badge-overlap).ngs-badge-before:not(.ngs-badge-above):not(.ngs-badge-below)) :host{transform:translate(-100%)}:host-context(.ngs-badge:not(.ngs-badge-overlap).ngs-badge-after:not(.ngs-badge-above):not(.ngs-badge-below)) :host{transform:translate(100%)}:host-context(.ngs-badge:not(.ngs-badge-overlap).ngs-badge-above.ngs-badge-before) :host{transform:translate(-100%,-100%)}:host-context(.ngs-badge:not(.ngs-badge-overlap).ngs-badge-above.ngs-badge-after) :host{transform:translate(100%,-100%)}:host-context(.ngs-badge:not(.ngs-badge-overlap).ngs-badge-below.ngs-badge-before) :host{transform:translate(-100%,100%)}:host-context(.ngs-badge:not(.ngs-badge-overlap).ngs-badge-below.ngs-badge-after) :host{transform:translate(100%,100%)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class Badge {
+    _elementRef = inject(ElementRef);
+    _applicationRef = inject(ApplicationRef);
+    _environmentInjector = inject(EnvironmentInjector);
+    _injector = inject(Injector);
+    renderer = inject(Renderer2);
+    content = input(null, { ...(ngDevMode ? { debugName: "content" } : /* istanbul ignore next */ {}), alias: 'ngsBadge' });
+    color = input('primary', { ...(ngDevMode ? { debugName: "color" } : /* istanbul ignore next */ {}), alias: 'ngsBadgeColor' });
+    overlap = input(true, { ...(ngDevMode ? { debugName: "overlap" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'ngsBadgeOverlap' });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'ngsBadgeDisabled' });
+    position = input('above after', { ...(ngDevMode ? { debugName: "position" } : /* istanbul ignore next */ {}), alias: 'ngsBadgePosition' });
+    size = input('medium', { ...(ngDevMode ? { debugName: "size" } : /* istanbul ignore next */ {}), alias: 'ngsBadgeSize' });
+    hidden = input(false, { ...(ngDevMode ? { debugName: "hidden" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'ngsBadgeHidden' });
+    description = input('', { ...(ngDevMode ? { debugName: "description" } : /* istanbul ignore next */ {}), alias: 'ngsBadgeDescription' });
+    isAbove = computed(() => this.position().indexOf('below') === -1, ...(ngDevMode ? [{ debugName: "isAbove" }] : /* istanbul ignore next */ []));
+    isAfter = computed(() => this.position().indexOf('before') === -1, ...(ngDevMode ? [{ debugName: "isAfter" }] : /* istanbul ignore next */ []));
+    _componentRef = null;
+    ngOnInit() {
+        this.renderer.setStyle(this._elementRef.nativeElement, 'position', 'relative');
+        this.renderer.setStyle(this._elementRef.nativeElement, 'overflow', 'visible');
+    }
+    ngOnChanges() {
+        this._updateBadge();
+    }
+    ngOnDestroy() {
+        if (this._componentRef) {
+            this._applicationRef.detachView(this._componentRef.hostView);
+            this._componentRef.destroy();
+            this._componentRef = null;
+        }
+    }
+    _updateBadge() {
+        if (!this.content() && this._componentRef) {
+            this._applicationRef.detachView(this._componentRef.hostView);
+            this._componentRef.destroy();
+            this._componentRef = null;
+            return;
+        }
+        if (this.content() && !this._componentRef) {
+            this._componentRef = createComponent(BadgeContent, {
+                environmentInjector: this._environmentInjector,
+                elementInjector: this._injector
+            });
+            this._applicationRef.attachView(this._componentRef.hostView);
+            this._elementRef.nativeElement.appendChild(this._componentRef.location.nativeElement);
+        }
+        if (this._componentRef) {
+            this._componentRef.instance.content = this.content();
+            this._componentRef.changeDetectorRef.markForCheck();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Badge, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: Badge, isStandalone: true, selector: "[ngsBadge]", inputs: { content: { classPropertyName: "content", publicName: "ngsBadge", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "ngsBadgeColor", isSignal: true, isRequired: false, transformFunction: null }, overlap: { classPropertyName: "overlap", publicName: "ngsBadgeOverlap", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngsBadgeDisabled", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "ngsBadgePosition", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "ngsBadgeSize", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "ngsBadgeHidden", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "ngsBadgeDescription", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ngs-badge-small": "size() === \"small\"", "class.ngs-badge-medium": "size() === \"medium\"", "class.ngs-badge-large": "size() === \"large\"", "class.ngs-badge-hidden": "hidden() || !content()", "class.ngs-badge-disabled": "disabled()", "class.ngs-primary": "color() === \"primary\"", "class.ngs-accent": "color() === \"accent\"", "class.ngs-warn": "color() === \"warn\"", "class.ngs-badge-above": "isAbove()", "class.ngs-badge-below": "!isAbove()", "class.ngs-badge-before": "!isAfter()", "class.ngs-badge-after": "isAfter()", "class.ngs-badge-overlap": "overlap()" }, classAttribute: "ngs-badge" }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Badge, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsBadge]',
+                    standalone: true,
+                    host: {
+                        'class': 'ngs-badge',
+                        '[class.ngs-badge-small]': 'size() === "small"',
+                        '[class.ngs-badge-medium]': 'size() === "medium"',
+                        '[class.ngs-badge-large]': 'size() === "large"',
+                        '[class.ngs-badge-hidden]': 'hidden() || !content()',
+                        '[class.ngs-badge-disabled]': 'disabled()',
+                        '[class.ngs-primary]': 'color() === "primary"',
+                        '[class.ngs-accent]': 'color() === "accent"',
+                        '[class.ngs-warn]': 'color() === "warn"',
+                        '[class.ngs-badge-above]': 'isAbove()',
+                        '[class.ngs-badge-below]': '!isAbove()',
+                        '[class.ngs-badge-before]': '!isAfter()',
+                        '[class.ngs-badge-after]': 'isAfter()',
+                        '[class.ngs-badge-overlap]': 'overlap()',
+                    },
+                }]
+        }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsBadge", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsBadgeColor", required: false }] }], overlap: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsBadgeOverlap", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsBadgeDisabled", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsBadgePosition", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsBadgeSize", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsBadgeHidden", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsBadgeDescription", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Badge, BadgeContent };
+//# sourceMappingURL=ngstarter-ui-components-badge.mjs.map

package/fesm2022/ngstarter-ui-components-badge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngstarter-ui-components-badge.mjs","sources":["../../../projects/components/badge/src/badge/badge-content.ts","../../../projects/components/badge/src/badge/badge.ts","../../../projects/components/badge/ngstarter-ui-components-badge.ts"],"sourcesContent":["import { Component } from '@angular/core';\n\n@Component({\n  selector: 'ngs-badge-content',\n  standalone: true,\n  template: `{{ content }}`,\n  styleUrl: './badge.scss',\n})\nexport class BadgeContent {\n  content: any;\n}\n","import {\n  ApplicationRef,\n  booleanAttribute,\n  ComponentRef,\n  computed,\n  createComponent,\n  Directive,\n  ElementRef,\n  EnvironmentInjector,\n  inject,\n  Injector,\n  input,\n  OnChanges,\n  OnDestroy,\n  OnInit,\n  Renderer2,\n} from '@angular/core';\nimport { BadgeContent } from './badge-content';\nexport { BadgeContent };\n\nexport type BadgePosition =\n  | 'above after'\n  | 'above before'\n  | 'below after'\n  | 'below before'\n  | 'before'\n  | 'after'\n  | 'above'\n  | 'below';\n\nexport type BadgeSize = 'small' | 'medium' | 'large';\n\n@Directive({\n  selector: '[ngsBadge]',\n  standalone: true,\n  host: {\n    'class': 'ngs-badge',\n    '[class.ngs-badge-small]': 'size() === \"small\"',\n    '[class.ngs-badge-medium]': 'size() === \"medium\"',\n    '[class.ngs-badge-large]': 'size() === \"large\"',\n    '[class.ngs-badge-hidden]': 'hidden() || !content()',\n    '[class.ngs-badge-disabled]': 'disabled()',\n    '[class.ngs-primary]': 'color() === \"primary\"',\n    '[class.ngs-accent]': 'color() === \"accent\"',\n    '[class.ngs-warn]': 'color() === \"warn\"',\n    '[class.ngs-badge-above]': 'isAbove()',\n    '[class.ngs-badge-below]': '!isAbove()',\n    '[class.ngs-badge-before]': '!isAfter()',\n    '[class.ngs-badge-after]': 'isAfter()',\n    '[class.ngs-badge-overlap]': 'overlap()',\n  },\n})\nexport class Badge implements OnInit, OnChanges, OnDestroy {\n  private readonly _elementRef = inject(ElementRef);\n  private readonly _applicationRef = inject(ApplicationRef);\n  private readonly _environmentInjector = inject(EnvironmentInjector);\n  private readonly _injector = inject(Injector);\n  private readonly renderer = inject(Renderer2);\n\n  readonly content = input<any>(null, { alias: 'ngsBadge' });\n  readonly color = input<string>('primary', { alias: 'ngsBadgeColor' });\n  readonly overlap = input(true, { transform: booleanAttribute, alias: 'ngsBadgeOverlap' });\n  readonly disabled = input(false, { transform: booleanAttribute, alias: 'ngsBadgeDisabled' });\n  readonly position = input<BadgePosition>('above after', { alias: 'ngsBadgePosition' });\n  readonly size = input<BadgeSize>('medium', { alias: 'ngsBadgeSize' });\n  readonly hidden = input(false, { transform: booleanAttribute, alias: 'ngsBadgeHidden' });\n  readonly description = input<string>('', { alias: 'ngsBadgeDescription' });\n\n  readonly isAbove = computed(() => this.position().indexOf('below') === -1);\n  readonly isAfter = computed(() => this.position().indexOf('before') === -1);\n\n  private _componentRef: ComponentRef<BadgeContent> | null = null;\n\n  ngOnInit() {\n    this.renderer.setStyle(this._elementRef.nativeElement, 'position', 'relative');\n    this.renderer.setStyle(this._elementRef.nativeElement, 'overflow', 'visible');\n  }\n\n  ngOnChanges() {\n    this._updateBadge();\n  }\n\n  ngOnDestroy() {\n    if (this._componentRef) {\n      this._applicationRef.detachView(this._componentRef.hostView);\n      this._componentRef.destroy();\n      this._componentRef = null;\n    }\n  }\n\n  private _updateBadge() {\n    if (!this.content() && this._componentRef) {\n      this._applicationRef.detachView(this._componentRef.hostView);\n      this._componentRef.destroy();\n      this._componentRef = null;\n      return;\n    }\n\n    if (this.content() && !this._componentRef) {\n      this._componentRef = createComponent(BadgeContent, {\n        environmentInjector: this._environmentInjector,\n        elementInjector: this._injector\n      });\n      this._applicationRef.attachView(this._componentRef.hostView);\n      this._elementRef.nativeElement.appendChild(this._componentRef.location.nativeElement);\n    }\n\n    if (this._componentRef) {\n      this._componentRef.instance.content = this.content();\n      this._componentRef.changeDetectorRef.markForCheck();\n    }\n  }\n}\n\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngstarter-ui-components-block-loader.mjs

@@ -0,0 +1,48 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, numberAttribute, ChangeDetectionStrategy, Component, inject, ElementRef, Renderer2, Directive } from '@angular/core';
+import { ProgressSpinner } from '@ngstarter-ui/components/spinner';
+
+class BlockLoader {
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    spinnerDiameter = input(48, { ...(ngDevMode ? { debugName: "spinnerDiameter" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    spinnerStrokeWidth = input(4, { ...(ngDevMode ? { debugName: "spinnerStrokeWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BlockLoader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: BlockLoader, isStandalone: true, selector: "ngs-block-loader", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, spinnerDiameter: { classPropertyName: "spinnerDiameter", publicName: "spinnerDiameter", isSignal: true, isRequired: false, transformFunction: null }, spinnerStrokeWidth: { classPropertyName: "spinnerStrokeWidth", publicName: "spinnerStrokeWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-loading": "loading()" }, classAttribute: "ngs-block-loader" }, exportAs: ["ngsBlockLoader"], ngImport: i0, template: "<ngs-progress-spinner [diameter]=\"spinnerDiameter()\"\n                      [strokeWidth]=\"spinnerStrokeWidth()\"/>\n<div class=\"message\">\n  <ng-content/>\n</div>\n", styles: [":host{--ngs-block-loader-bg: rgba(255, 255, 255, .5);position:absolute;inset:0;background:var(--ngs-block-loader-bg);visibility:hidden;z-index:-99;pointer-events:none;display:flex;align-items:center;justify-content:center;border-radius:inherit;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4);-webkit-user-select:none;user-select:none}:host.is-loading{visibility:visible;z-index:99;pointer-events:auto}:host .message:empty{display:none}:host .message{font-size:.875rem;text-align:center;max-width:800px}:host-context(html.dark){--ngs-block-loader-bg: rgba(0, 0, 0, .7)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: ProgressSpinner, selector: "ngs-progress-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["ngsProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BlockLoader, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-block-loader', exportAs: 'ngsBlockLoader', imports: [
+                        ProgressSpinner
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'ngs-block-loader',
+                        '[class.is-loading]': 'loading()'
+                    }, template: "<ngs-progress-spinner [diameter]=\"spinnerDiameter()\"\n                      [strokeWidth]=\"spinnerStrokeWidth()\"/>\n<div class=\"message\">\n  <ng-content/>\n</div>\n", styles: [":host{--ngs-block-loader-bg: rgba(255, 255, 255, .5);position:absolute;inset:0;background:var(--ngs-block-loader-bg);visibility:hidden;z-index:-99;pointer-events:none;display:flex;align-items:center;justify-content:center;border-radius:inherit;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4);-webkit-user-select:none;user-select:none}:host.is-loading{visibility:visible;z-index:99;pointer-events:auto}:host .message:empty{display:none}:host .message{font-size:.875rem;text-align:center;max-width:800px}:host-context(html.dark){--ngs-block-loader-bg: rgba(0, 0, 0, .7)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], spinnerDiameter: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinnerDiameter", required: false }] }], spinnerStrokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinnerStrokeWidth", required: false }] }] } });
+
+class BlockLoaderContainerDirective {
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    ngOnInit() {
+        const element = this.elementRef.nativeElement;
+        this.renderer.setStyle(element, 'position', 'relative');
+    }
+    ngOnDestroy() {
+        const element = this.elementRef.nativeElement;
+        this.renderer.removeStyle(element, 'position');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BlockLoaderContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: BlockLoaderContainerDirective, isStandalone: true, selector: "[ngsBlockLoaderContainer]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BlockLoaderContainerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsBlockLoaderContainer]'
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BlockLoader, BlockLoaderContainerDirective };
+//# sourceMappingURL=ngstarter-ui-components-block-loader.mjs.map

package/fesm2022/ngstarter-ui-components-block-loader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngstarter-ui-components-block-loader.mjs","sources":["../../../projects/components/block-loader/src/block-loader/block-loader.ts","../../../projects/components/block-loader/src/block-loader/block-loader.html","../../../projects/components/block-loader/src/block-loader-container.directive.ts","../../../projects/components/block-loader/ngstarter-ui-components-block-loader.ts"],"sourcesContent":["import { booleanAttribute, ChangeDetectionStrategy, Component, input, numberAttribute } from '@angular/core';\nimport { ProgressSpinner } from '@ngstarter-ui/components/spinner';\n\n@Component({\n  selector: 'ngs-block-loader',\n  exportAs: 'ngsBlockLoader',\n  imports: [\n    ProgressSpinner\n  ],\n  templateUrl: './block-loader.html',\n  styleUrl: './block-loader.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'class': 'ngs-block-loader',\n    '[class.is-loading]': 'loading()'\n  }\n})\nexport class BlockLoader {\n  readonly loading = input(false, {\n    transform: booleanAttribute\n  });\n  readonly spinnerDiameter = input(48, {\n    transform: numberAttribute\n  });\n  readonly spinnerStrokeWidth = input(4, {\n    transform: numberAttribute\n  });\n}\n","<ngs-progress-spinner [diameter]=\"spinnerDiameter()\"\n                      [strokeWidth]=\"spinnerStrokeWidth()\"/>\n<div class=\"message\">\n  <ng-content/>\n</div>\n","import { Directive, ElementRef, inject, OnDestroy, OnInit, Renderer2 } from '@angular/core';\n\n@Directive({\n  selector: '[ngsBlockLoaderContainer]'\n})\nexport class BlockLoaderContainerDirective implements OnInit, OnDestroy {\n  private elementRef = inject(ElementRef);\n  private renderer = inject(Renderer2);\n\n  ngOnInit() {\n    const element = this.elementRef.nativeElement as HTMLElement;\n    this.renderer.setStyle(element, 'position', 'relative');\n  }\n\n  ngOnDestroy() {\n    const element = this.elementRef.nativeElement as HTMLElement;\n    this.renderer.removeStyle(element, 'position');\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}