@lucca-front/ng 21.0.0-rc.3 → 21.0.0-rc.4

package/fesm2022/lucca-front-ng-user.mjs

@@ -1,7 +1,8 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Pipe, NgModule, input, booleanAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, effect, Injectable, forwardRef, Inject, Optional, SkipSelf, Self, Input, Directive, ElementRef, Output, ViewChild, HostBinding } from '@angular/core';
-import { ɵeffectWithDeps as _effectWithDeps, LuClass, ALuOnOpenSubscriber, getIntl, ALuOnCloseSubscriber, ALuOnScrollBottomSubscriber } from '@lucca-front/ng/core';
+import { InjectionToken, inject, Pipe, NgModule, input, booleanAttribute, computed, Input, Optional, ViewEncapsulation, ChangeDetectionStrategy, Component, ChangeDetectorRef, effect, Injectable, forwardRef, Inject, SkipSelf, Self, Directive, ElementRef, Output, ViewChild, HostBinding } from '@angular/core';
+import { LuClass, ALuOnOpenSubscriber, getIntl, ALuOnCloseSubscriber, ALuOnScrollBottomSubscriber } from '@lucca-front/ng/core';
 import { NgStyle, AsyncPipe } from '@angular/common';
+import { IconComponent } from '@lucca-front/ng/icon';
 import * as i1$1 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
 import * as i1 from '@angular/forms';
@@ -151,33 +152,37 @@ class LuUserPictureComponent {
          * User Display format.
          * It is set to 'LU_DEFAULT_DISPLAY_POLICY' by default
          */
-        this.displayFormat = input(displayPictureFormatRecord[inject(LU_DEFAULT_DISPLAY_POLICY)]);
-        this.user = input();
-        this.AI = input(false, { transform: booleanAttribute });
-        this.size = input('M');
+        this.displayFormat = displayPictureFormatRecord[inject(LU_DEFAULT_DISPLAY_POLICY)];
         /**
          * Image loading attribute
          * It is set to 'lazy' by default
          *
          * (more info: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading)
          */
-        this.imageLoadingAttribute = input('lazy');
-        this.initials = computed(() => luUserDisplay(this.user(), this.displayFormat()));
-        this.modSize = computed(() => `mod-${this.size()}`);
+        this.imageLoadingAttribute = 'lazy';
+        this.AI = input(false, { transform: booleanAttribute });
+        this.size = input('M');
+        this.initials = '';
         this.hasPicture = false;
         this.pictureHref = '';
         this.style = {};
-        _effectWithDeps([this.user], (user) => {
-            if (user) {
-                const pictureHref = user?.picture?.href || user?.pictureHref;
-                this.hasPicture = !!pictureHref;
-                this.pictureHref = pictureHref;
-                if (!this.hasPicture) {
-                    const hsl = this.getNameHue();
-                    this.style = { 'background-color': `hsl(${hsl}, 60%, 60%)` };
-                }
-            }
-        });
+        this.modSize = computed(() => `mod-${this.size()}`);
+    }
+    set user(user) {
+        this._user = user;
+        const pictureHref = user?.picture?.href || user?.pictureHref;
+        this.hasPicture = !!pictureHref;
+        this.pictureHref = pictureHref;
+        if (!this.hasPicture) {
+            const hsl = this.getNameHue();
+            this.style = { 'background-color': `hsl(${hsl}, 60%, 60%)` };
+        }
+    }
+    get user() {
+        return this._user;
+    }
+    ngOnChanges() {
+        this.initials = luUserDisplay(this.user, this.displayFormat);
     }
     pictureError() {
         this.hasPicture = false;
@@ -186,18 +191,18 @@ class LuUserPictureComponent {
     }
     getNameHue() {
         // we sum the chars in user's firstname + lastname
-        const charSum = luUserDisplay(this.user(), LuDisplayFullname.firstlast)
+        const charSum = luUserDisplay(this._user, LuDisplayFullname.firstlast)
             .split('')
             .reduce((sum, a) => sum + a.charCodeAt(0), 0);
         // and take a modulo 360 for hue
         return charSum % 360;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LuUserPictureComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: LuUserPictureComponent, isStandalone: true, selector: "lu-user-picture", inputs: { displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: true, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, AI: { classPropertyName: "AI", publicName: "AI", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, imageLoadingAttribute: { classPropertyName: "imageLoadingAttribute", publicName: "imageLoadingAttribute", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.mod-AI": "AI()", "class.mod-XS": "size() === \"XS\"", "class.mod-S": "size() === \"S\"", "class.mod-M": "size() === \"M\"", "class.mod-L": "size() === \"L\"", "class.mod-XL": "size() === \"XL\"", "class.mod-XXL": "size() === \"XXL\"", "class.mod-XXXL": "size() === \"XXXL\"" }, classAttribute: "avatar" }, ngImport: i0, template: "@if (hasPicture) {\n\t<img class=\"avatar-picture\" [src]=\"pictureHref\" alt=\"\" (error)=\"pictureError()\" [loading]=\"imageLoadingAttribute()\" />\n} @else {\n\t<div class=\"avatar-picture\" [ngStyle]=\"!AI() && style\">\n\t\t<span class=\"avatar-picture-initials\" translate=\"no\">{{ initials() }}</span>\n\t</div>\n}\n", styles: ["@charset \"UTF-8\";@layer components{.avatar,.lu-user-picture{--components-avatar-size: 2.5rem;--components-avatar-fontSize: var(--pr-t-font-body-M-fontSize);--components-avatar-border: 2px;--components-avatar-scale: 1;--components-avatar-background: var(--pr-t-elevation-surface-default);--components-avatar-placeholder-size: 1.25rem;--components-avatar-AI-size: var(--pr-t-font-fontSize-200);--components-avatar-borderRadius: var(--pr-t-border-radius-full);--components-avatar-picture-background: var(--palettes-neutral-200);--components-avatar-picture-initials-display: block;display:inline-block;vertical-align:middle;border-radius:var(--components-avatar-borderRadius);inline-size:var(--components-avatar-size);aspect-ratio:1}.avatar-picture{background-color:var(--components-avatar-picture-background);border-radius:var(--components-avatar-borderRadius);background-position:center;background-size:cover;background-repeat:no-repeat;inline-size:var(--components-avatar-size);object-fit:cover;object-position:center;aspect-ratio:1;display:flex;justify-content:center;align-items:center}.avatar-picture-initials{font-size:var(--components-avatar-fontSize);font-weight:var(--pr-t-font-fontWeight-bold);font-family:var(--pr-t-font-family-brand);line-height:1;color:var(--pr-t-color-text-reverse);display:var(--components-avatar-picture-initials-display)}.avatarWrapper{margin:0;padding:0;list-style-type:none;display:flex;flex-wrap:wrap;align-content:flex-start;row-gap:var(--components-avatarWrapper-rowGap)}.avatarWrapper .avatar{box-shadow:0 0 0 var(--components-avatar-border) var(--components-avatar-background)}.avatarWrapper-item:not(:last-child){margin-inline-end:calc(var(--components-avatarWrapper-overlap) * -1)}.avatarWrapper-item-action{padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;display:flex;text-decoration:none;transition:transform var(--commons-animations-durations-fast);transform:scale(var(--components-avatarWrapper-scale));color:currentColor}.avatarWrapper-item-action:hover,.avatarWrapper-item-action:focus{--components-avatarWrapper-scale: 1.1}.avatarWrapper-item-action:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px;border-radius:var(--pr-t-border-radius-full)}.avatarWrapper-item-action-more{box-shadow:0 0 0 var(--components-avatar-border) var(--components-avatar-background);border-radius:var(--pr-t-border-radius-full);display:flex;align-items:center;justify-content:center;background-color:var(--palettes-neutral-200);inline-size:var(--components-avatar-size);block-size:var(--components-avatar-size);font-size:var(--components-avatarWrapper-fontSize)}}@layer mods{.avatar.mod-XS,.lu-user-picture.mod-XS{--components-avatar-size: 1.5rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-150);--components-avatar-placeholder-size: .75rem;--components-avatar-border: 1px}.avatar.mod-S,.lu-user-picture.mod-S{--components-avatar-size: 2rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-175);--components-avatar-placeholder-size: 1rem}.avatar.mod-L,.lu-user-picture.mod-L{--components-avatar-size: 3rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-225);--components-avatar-placeholder-size: 1.75rem}.avatar.mod-XL,.lu-user-picture.mod-XL{--components-avatar-size: 4rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-275);--components-avatar-placeholder-size: 2rem}.avatar.mod-XXL,.lu-user-picture.mod-XXL{--components-avatar-size: 5rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-350);--components-avatar-placeholder-size: 2.25rem}.avatar.mod-XXXL,.lu-user-picture.mod-XXXL{--components-avatar-size: 6rem;--components-avatar-fontSize: 2.25rem;--components-avatar-placeholder-size: 2.5rem}.avatar.mod-placeholder,.lu-user-picture.mod-placeholder{--components-avatar-picture-initials-display: none}.avatar.mod-placeholder .avatar-picture,.lu-user-picture.mod-placeholder .avatar-picture{background-color:var(--palettes-neutral-200)!important}.avatar.mod-placeholder .avatar-picture:before,.lu-user-picture.mod-placeholder .avatar-picture:before{--icon-content: \"\\e990\";display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:Lucca icons;content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;color:var(--palettes-neutral-600);font-weight:var(--pr-t-font-fontWeight-regular);font-size:var(--components-avatar-placeholder-size)}}.avatar.mod-AI,.lu-user-picture.mod-AI{--components-avatar-borderRadius: var(--pr-t-border-radius-default);--components-avatar-picture-background: var(--palettes-neutral-0);--components-avatar-picture-initials-display: none}.avatar.mod-AI .avatar-picture:before,.lu-user-picture.mod-AI .avatar-picture:before{background-image:linear-gradient(135deg,var(--palettes-AI-600),var(--palettes-brand-500));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;--icon-content: \"\\e9f5\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:Lucca icons;content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;font-size:var(--components-avatar-AI-size)}@layer components{.avatarWrapper{--components-avatar-size: 2.5rem;--components-avatar-fontSize: var(--pr-t-font-body-M-fontSize);--components-avatar-border: 2px;--components-avatar-scale: 1;--components-avatar-background: var(--pr-t-elevation-surface-default);--components-avatar-placeholder-size: 1.25rem;--components-avatar-AI-size: var(--pr-t-font-fontSize-200);--components-avatar-borderRadius: var(--pr-t-border-radius-full);--components-avatar-picture-background: var(--palettes-neutral-200);--components-avatar-picture-initials-display: block;--components-avatarWrapper-fontSize: var(--pr-t-font-body-M-fontSize);--components-avatarWrapper-overlap: var(--pr-t-spacings-100);--components-avatarWrapper-rowGap: var(--pr-t-spacings-50)}}@layer mods{.avatarWrapper.mod-XL .avatar,.avatarWrapper.mod-XL .avatarWrapper-item-action{--components-avatar-size: 4rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-275);--components-avatar-placeholder-size: 2rem}.avatarWrapper.mod-L .avatar,.avatarWrapper.mod-L .avatarWrapper-item-action{--components-avatar-size: 3rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-225);--components-avatar-placeholder-size: 1.75rem}.avatarWrapper.mod-S{--components-avatarWrapper-overlap: var(--pr-t-spacings-50);--components-avatarWrapper-rowGap: var(--pr-t-spacings-25)}.avatarWrapper.mod-S .avatar,.avatarWrapper.mod-S .avatarWrapper-item-action{--components-avatar-size: 2rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-175);--components-avatar-placeholder-size: 1rem}.avatarWrapper.mod-XS{--components-avatarWrapper-overlap: var(--pr-t-spacings-50);--components-avatarWrapper-rowGap: var(--pr-t-spacings-25)}.avatarWrapper.mod-XS .avatar,.avatarWrapper.mod-XS .avatarWrapper-item-action{--components-avatar-size: 1.5rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-150);--components-avatar-placeholder-size: .75rem;--components-avatar-border: 1px}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: LuUserPictureComponent, isStandalone: true, selector: "lu-user-picture", inputs: { displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: false, isRequired: false, transformFunction: null }, imageLoadingAttribute: { classPropertyName: "imageLoadingAttribute", publicName: "imageLoadingAttribute", isSignal: false, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: false, isRequired: false, transformFunction: null }, AI: { classPropertyName: "AI", publicName: "AI", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.mod-AI": "AI()", "class.mod-XS": "size() === \"XS\"", "class.mod-S": "size() === \"S\"", "class.mod-M": "size() === \"M\"", "class.mod-L": "size() === \"L\"", "class.mod-XL": "size() === \"XL\"", "class.mod-XXL": "size() === \"XXL\"", "class.mod-XXXL": "size() === \"XXXL\"" }, classAttribute: "avatar" }, usesOnChanges: true, ngImport: i0, template: "@if (hasPicture) {\n\t<img class=\"avatar-picture\" [src]=\"pictureHref\" alt=\"\" (error)=\"pictureError()\" [loading]=\"imageLoadingAttribute\" />\n} @else {\n\t<div class=\"avatar-picture\" [ngStyle]=\"!AI() && style\">\n\t\t<span class=\"avatar-picture-initials\" translate=\"no\">{{ initials }}</span>\n\t</div>\n}\n", styles: ["@charset \"UTF-8\";@layer components{.avatar,.lu-user-picture{--components-avatar-size: 2.5rem;--components-avatar-fontSize: var(--pr-t-font-body-M-fontSize);--components-avatar-border: 2px;--components-avatar-scale: 1;--components-avatar-background: var(--pr-t-elevation-surface-default);--components-avatar-placeholder-size: 1.25rem;--components-avatar-AI-size: var(--pr-t-font-fontSize-200);--components-avatar-borderRadius: var(--pr-t-border-radius-full);--components-avatar-picture-background: var(--palettes-neutral-200);--components-avatar-picture-initials-display: block;display:inline-block;vertical-align:middle;border-radius:var(--components-avatar-borderRadius);inline-size:var(--components-avatar-size);aspect-ratio:1}.avatar-picture{background-color:var(--components-avatar-picture-background);border-radius:var(--components-avatar-borderRadius);background-position:center;background-size:cover;background-repeat:no-repeat;inline-size:var(--components-avatar-size);object-fit:cover;object-position:center;aspect-ratio:1;display:flex;justify-content:center;align-items:center}.avatar-picture-initials{font-size:var(--components-avatar-fontSize);font-weight:var(--pr-t-font-fontWeight-bold);font-family:var(--pr-t-font-family-brand);line-height:1;color:var(--pr-t-color-text-reverse);display:var(--components-avatar-picture-initials-display)}.avatarWrapper{margin:0;padding:0;list-style-type:none;display:flex;flex-wrap:wrap;align-content:flex-start;row-gap:var(--components-avatarWrapper-rowGap)}.avatarWrapper .avatar{box-shadow:0 0 0 var(--components-avatar-border) var(--components-avatar-background)}.avatarWrapper-item:not(:last-child){margin-inline-end:calc(var(--components-avatarWrapper-overlap) * -1)}.avatarWrapper-item-action{padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;display:flex;text-decoration:none;transition:transform var(--commons-animations-durations-fast);transform:scale(var(--components-avatarWrapper-scale));color:currentColor}.avatarWrapper-item-action:hover,.avatarWrapper-item-action:focus{--components-avatarWrapper-scale: 1.1}.avatarWrapper-item-action:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px;border-radius:var(--pr-t-border-radius-full)}.avatarWrapper-item-action-more{box-shadow:0 0 0 var(--components-avatar-border) var(--components-avatar-background);border-radius:var(--pr-t-border-radius-full);display:flex;align-items:center;justify-content:center;background-color:var(--palettes-neutral-200);inline-size:var(--components-avatar-size);block-size:var(--components-avatar-size);font-size:var(--components-avatarWrapper-fontSize)}}@layer mods{.avatar.mod-XS,.lu-user-picture.mod-XS{--components-avatar-size: 1.5rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-150);--components-avatar-placeholder-size: .75rem;--components-avatar-border: 1px}.avatar.mod-S,.lu-user-picture.mod-S{--components-avatar-size: 2rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-175);--components-avatar-placeholder-size: 1rem}.avatar.mod-L,.lu-user-picture.mod-L{--components-avatar-size: 3rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-225);--components-avatar-placeholder-size: 1.75rem}.avatar.mod-XL,.lu-user-picture.mod-XL{--components-avatar-size: 4rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-275);--components-avatar-placeholder-size: 2rem}.avatar.mod-XXL,.lu-user-picture.mod-XXL{--components-avatar-size: 5rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-350);--components-avatar-placeholder-size: 2.25rem}.avatar.mod-XXXL,.lu-user-picture.mod-XXXL{--components-avatar-size: 6rem;--components-avatar-fontSize: 2.25rem;--components-avatar-placeholder-size: 2.5rem}.avatar.mod-placeholder,.lu-user-picture.mod-placeholder{--components-avatar-picture-initials-display: none}.avatar.mod-placeholder .avatar-picture,.lu-user-picture.mod-placeholder .avatar-picture{background-color:var(--palettes-neutral-200)!important}.avatar.mod-placeholder .avatar-picture:before,.lu-user-picture.mod-placeholder .avatar-picture:before{--icon-content: \"\\e990\";display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:Lucca icons;content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;color:var(--palettes-neutral-600);font-weight:var(--pr-t-font-fontWeight-regular);font-size:var(--components-avatar-placeholder-size)}}.avatar.mod-AI,.lu-user-picture.mod-AI{--components-avatar-borderRadius: var(--pr-t-border-radius-default);--components-avatar-picture-background: var(--palettes-neutral-0);--components-avatar-picture-initials-display: none}.avatar.mod-AI .avatar-picture:before,.lu-user-picture.mod-AI .avatar-picture:before{background-image:linear-gradient(135deg,var(--palettes-AI-600),var(--palettes-brand-500));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;--icon-content: \"\\e9f5\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:Lucca icons;content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;font-size:var(--components-avatar-AI-size)}@layer components{.avatarWrapper{--components-avatar-size: 2.5rem;--components-avatar-fontSize: var(--pr-t-font-body-M-fontSize);--components-avatar-border: 2px;--components-avatar-scale: 1;--components-avatar-background: var(--pr-t-elevation-surface-default);--components-avatar-placeholder-size: 1.25rem;--components-avatar-AI-size: var(--pr-t-font-fontSize-200);--components-avatar-borderRadius: var(--pr-t-border-radius-full);--components-avatar-picture-background: var(--palettes-neutral-200);--components-avatar-picture-initials-display: block;--components-avatarWrapper-fontSize: var(--pr-t-font-body-M-fontSize);--components-avatarWrapper-overlap: var(--pr-t-spacings-100);--components-avatarWrapper-rowGap: var(--pr-t-spacings-50)}}@layer mods{.avatarWrapper.mod-XL .avatar,.avatarWrapper.mod-XL .avatarWrapper-item-action{--components-avatar-size: 4rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-275);--components-avatar-placeholder-size: 2rem}.avatarWrapper.mod-L .avatar,.avatarWrapper.mod-L .avatarWrapper-item-action{--components-avatar-size: 3rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-225);--components-avatar-placeholder-size: 1.75rem}.avatarWrapper.mod-S{--components-avatarWrapper-overlap: var(--pr-t-spacings-50);--components-avatarWrapper-rowGap: var(--pr-t-spacings-25)}.avatarWrapper.mod-S .avatar,.avatarWrapper.mod-S .avatarWrapper-item-action{--components-avatar-size: 2rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-175);--components-avatar-placeholder-size: 1rem}.avatarWrapper.mod-XS{--components-avatarWrapper-overlap: var(--pr-t-spacings-50);--components-avatarWrapper-rowGap: var(--pr-t-spacings-25)}.avatarWrapper.mod-XS .avatar,.avatarWrapper.mod-XS .avatarWrapper-item-action{--components-avatar-size: 1.5rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-150);--components-avatar-placeholder-size: .75rem;--components-avatar-border: 1px}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LuUserPictureComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lu-user-picture', imports: [NgStyle], host: {
+            args: [{ selector: 'lu-user-picture', imports: [NgStyle, IconComponent], host: {
                         class: 'avatar',
                         '[class.mod-AI]': 'AI()',
                         '[class.mod-XS]': 'size() === "XS"',
@@ -207,8 +212,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
                         '[class.mod-XL]': 'size() === "XL"',
                         '[class.mod-XXL]': 'size() === "XXL"',
                         '[class.mod-XXXL]': 'size() === "XXXL"',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (hasPicture) {\n\t<img class=\"avatar-picture\" [src]=\"pictureHref\" alt=\"\" (error)=\"pictureError()\" [loading]=\"imageLoadingAttribute()\" />\n} @else {\n\t<div class=\"avatar-picture\" [ngStyle]=\"!AI() && style\">\n\t\t<span class=\"avatar-picture-initials\" translate=\"no\">{{ initials() }}</span>\n\t</div>\n}\n", styles: ["@charset \"UTF-8\";@layer components{.avatar,.lu-user-picture{--components-avatar-size: 2.5rem;--components-avatar-fontSize: var(--pr-t-font-body-M-fontSize);--components-avatar-border: 2px;--components-avatar-scale: 1;--components-avatar-background: var(--pr-t-elevation-surface-default);--components-avatar-placeholder-size: 1.25rem;--components-avatar-AI-size: var(--pr-t-font-fontSize-200);--components-avatar-borderRadius: var(--pr-t-border-radius-full);--components-avatar-picture-background: var(--palettes-neutral-200);--components-avatar-picture-initials-display: block;display:inline-block;vertical-align:middle;border-radius:var(--components-avatar-borderRadius);inline-size:var(--components-avatar-size);aspect-ratio:1}.avatar-picture{background-color:var(--components-avatar-picture-background);border-radius:var(--components-avatar-borderRadius);background-position:center;background-size:cover;background-repeat:no-repeat;inline-size:var(--components-avatar-size);object-fit:cover;object-position:center;aspect-ratio:1;display:flex;justify-content:center;align-items:center}.avatar-picture-initials{font-size:var(--components-avatar-fontSize);font-weight:var(--pr-t-font-fontWeight-bold);font-family:var(--pr-t-font-family-brand);line-height:1;color:var(--pr-t-color-text-reverse);display:var(--components-avatar-picture-initials-display)}.avatarWrapper{margin:0;padding:0;list-style-type:none;display:flex;flex-wrap:wrap;align-content:flex-start;row-gap:var(--components-avatarWrapper-rowGap)}.avatarWrapper .avatar{box-shadow:0 0 0 var(--components-avatar-border) var(--components-avatar-background)}.avatarWrapper-item:not(:last-child){margin-inline-end:calc(var(--components-avatarWrapper-overlap) * -1)}.avatarWrapper-item-action{padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;display:flex;text-decoration:none;transition:transform var(--commons-animations-durations-fast);transform:scale(var(--components-avatarWrapper-scale));color:currentColor}.avatarWrapper-item-action:hover,.avatarWrapper-item-action:focus{--components-avatarWrapper-scale: 1.1}.avatarWrapper-item-action:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px;border-radius:var(--pr-t-border-radius-full)}.avatarWrapper-item-action-more{box-shadow:0 0 0 var(--components-avatar-border) var(--components-avatar-background);border-radius:var(--pr-t-border-radius-full);display:flex;align-items:center;justify-content:center;background-color:var(--palettes-neutral-200);inline-size:var(--components-avatar-size);block-size:var(--components-avatar-size);font-size:var(--components-avatarWrapper-fontSize)}}@layer mods{.avatar.mod-XS,.lu-user-picture.mod-XS{--components-avatar-size: 1.5rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-150);--components-avatar-placeholder-size: .75rem;--components-avatar-border: 1px}.avatar.mod-S,.lu-user-picture.mod-S{--components-avatar-size: 2rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-175);--components-avatar-placeholder-size: 1rem}.avatar.mod-L,.lu-user-picture.mod-L{--components-avatar-size: 3rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-225);--components-avatar-placeholder-size: 1.75rem}.avatar.mod-XL,.lu-user-picture.mod-XL{--components-avatar-size: 4rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-275);--components-avatar-placeholder-size: 2rem}.avatar.mod-XXL,.lu-user-picture.mod-XXL{--components-avatar-size: 5rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-350);--components-avatar-placeholder-size: 2.25rem}.avatar.mod-XXXL,.lu-user-picture.mod-XXXL{--components-avatar-size: 6rem;--components-avatar-fontSize: 2.25rem;--components-avatar-placeholder-size: 2.5rem}.avatar.mod-placeholder,.lu-user-picture.mod-placeholder{--components-avatar-picture-initials-display: none}.avatar.mod-placeholder .avatar-picture,.lu-user-picture.mod-placeholder .avatar-picture{background-color:var(--palettes-neutral-200)!important}.avatar.mod-placeholder .avatar-picture:before,.lu-user-picture.mod-placeholder .avatar-picture:before{--icon-content: \"\\e990\";display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:Lucca icons;content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;color:var(--palettes-neutral-600);font-weight:var(--pr-t-font-fontWeight-regular);font-size:var(--components-avatar-placeholder-size)}}.avatar.mod-AI,.lu-user-picture.mod-AI{--components-avatar-borderRadius: var(--pr-t-border-radius-default);--components-avatar-picture-background: var(--palettes-neutral-0);--components-avatar-picture-initials-display: none}.avatar.mod-AI .avatar-picture:before,.lu-user-picture.mod-AI .avatar-picture:before{background-image:linear-gradient(135deg,var(--palettes-AI-600),var(--palettes-brand-500));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;--icon-content: \"\\e9f5\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:Lucca icons;content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;font-size:var(--components-avatar-AI-size)}@layer components{.avatarWrapper{--components-avatar-size: 2.5rem;--components-avatar-fontSize: var(--pr-t-font-body-M-fontSize);--components-avatar-border: 2px;--components-avatar-scale: 1;--components-avatar-background: var(--pr-t-elevation-surface-default);--components-avatar-placeholder-size: 1.25rem;--components-avatar-AI-size: var(--pr-t-font-fontSize-200);--components-avatar-borderRadius: var(--pr-t-border-radius-full);--components-avatar-picture-background: var(--palettes-neutral-200);--components-avatar-picture-initials-display: block;--components-avatarWrapper-fontSize: var(--pr-t-font-body-M-fontSize);--components-avatarWrapper-overlap: var(--pr-t-spacings-100);--components-avatarWrapper-rowGap: var(--pr-t-spacings-50)}}@layer mods{.avatarWrapper.mod-XL .avatar,.avatarWrapper.mod-XL .avatarWrapper-item-action{--components-avatar-size: 4rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-275);--components-avatar-placeholder-size: 2rem}.avatarWrapper.mod-L .avatar,.avatarWrapper.mod-L .avatarWrapper-item-action{--components-avatar-size: 3rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-225);--components-avatar-placeholder-size: 1.75rem}.avatarWrapper.mod-S{--components-avatarWrapper-overlap: var(--pr-t-spacings-50);--components-avatarWrapper-rowGap: var(--pr-t-spacings-25)}.avatarWrapper.mod-S .avatar,.avatarWrapper.mod-S .avatarWrapper-item-action{--components-avatar-size: 2rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-175);--components-avatar-placeholder-size: 1rem}.avatarWrapper.mod-XS{--components-avatarWrapper-overlap: var(--pr-t-spacings-50);--components-avatarWrapper-rowGap: var(--pr-t-spacings-25)}.avatarWrapper.mod-XS .avatar,.avatarWrapper.mod-XS .avatarWrapper-item-action{--components-avatar-size: 1.5rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-150);--components-avatar-placeholder-size: .75rem;--components-avatar-border: 1px}}\n"] }]
-        }], ctorParameters: () => [] });
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (hasPicture) {\n\t<img class=\"avatar-picture\" [src]=\"pictureHref\" alt=\"\" (error)=\"pictureError()\" [loading]=\"imageLoadingAttribute\" />\n} @else {\n\t<div class=\"avatar-picture\" [ngStyle]=\"!AI() && style\">\n\t\t<span class=\"avatar-picture-initials\" translate=\"no\">{{ initials }}</span>\n\t</div>\n}\n", styles: ["@charset \"UTF-8\";@layer components{.avatar,.lu-user-picture{--components-avatar-size: 2.5rem;--components-avatar-fontSize: var(--pr-t-font-body-M-fontSize);--components-avatar-border: 2px;--components-avatar-scale: 1;--components-avatar-background: var(--pr-t-elevation-surface-default);--components-avatar-placeholder-size: 1.25rem;--components-avatar-AI-size: var(--pr-t-font-fontSize-200);--components-avatar-borderRadius: var(--pr-t-border-radius-full);--components-avatar-picture-background: var(--palettes-neutral-200);--components-avatar-picture-initials-display: block;display:inline-block;vertical-align:middle;border-radius:var(--components-avatar-borderRadius);inline-size:var(--components-avatar-size);aspect-ratio:1}.avatar-picture{background-color:var(--components-avatar-picture-background);border-radius:var(--components-avatar-borderRadius);background-position:center;background-size:cover;background-repeat:no-repeat;inline-size:var(--components-avatar-size);object-fit:cover;object-position:center;aspect-ratio:1;display:flex;justify-content:center;align-items:center}.avatar-picture-initials{font-size:var(--components-avatar-fontSize);font-weight:var(--pr-t-font-fontWeight-bold);font-family:var(--pr-t-font-family-brand);line-height:1;color:var(--pr-t-color-text-reverse);display:var(--components-avatar-picture-initials-display)}.avatarWrapper{margin:0;padding:0;list-style-type:none;display:flex;flex-wrap:wrap;align-content:flex-start;row-gap:var(--components-avatarWrapper-rowGap)}.avatarWrapper .avatar{box-shadow:0 0 0 var(--components-avatar-border) var(--components-avatar-background)}.avatarWrapper-item:not(:last-child){margin-inline-end:calc(var(--components-avatarWrapper-overlap) * -1)}.avatarWrapper-item-action{padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;display:flex;text-decoration:none;transition:transform var(--commons-animations-durations-fast);transform:scale(var(--components-avatarWrapper-scale));color:currentColor}.avatarWrapper-item-action:hover,.avatarWrapper-item-action:focus{--components-avatarWrapper-scale: 1.1}.avatarWrapper-item-action:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px;border-radius:var(--pr-t-border-radius-full)}.avatarWrapper-item-action-more{box-shadow:0 0 0 var(--components-avatar-border) var(--components-avatar-background);border-radius:var(--pr-t-border-radius-full);display:flex;align-items:center;justify-content:center;background-color:var(--palettes-neutral-200);inline-size:var(--components-avatar-size);block-size:var(--components-avatar-size);font-size:var(--components-avatarWrapper-fontSize)}}@layer mods{.avatar.mod-XS,.lu-user-picture.mod-XS{--components-avatar-size: 1.5rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-150);--components-avatar-placeholder-size: .75rem;--components-avatar-border: 1px}.avatar.mod-S,.lu-user-picture.mod-S{--components-avatar-size: 2rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-175);--components-avatar-placeholder-size: 1rem}.avatar.mod-L,.lu-user-picture.mod-L{--components-avatar-size: 3rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-225);--components-avatar-placeholder-size: 1.75rem}.avatar.mod-XL,.lu-user-picture.mod-XL{--components-avatar-size: 4rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-275);--components-avatar-placeholder-size: 2rem}.avatar.mod-XXL,.lu-user-picture.mod-XXL{--components-avatar-size: 5rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-350);--components-avatar-placeholder-size: 2.25rem}.avatar.mod-XXXL,.lu-user-picture.mod-XXXL{--components-avatar-size: 6rem;--components-avatar-fontSize: 2.25rem;--components-avatar-placeholder-size: 2.5rem}.avatar.mod-placeholder,.lu-user-picture.mod-placeholder{--components-avatar-picture-initials-display: none}.avatar.mod-placeholder .avatar-picture,.lu-user-picture.mod-placeholder .avatar-picture{background-color:var(--palettes-neutral-200)!important}.avatar.mod-placeholder .avatar-picture:before,.lu-user-picture.mod-placeholder .avatar-picture:before{--icon-content: \"\\e990\";display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:Lucca icons;content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;color:var(--palettes-neutral-600);font-weight:var(--pr-t-font-fontWeight-regular);font-size:var(--components-avatar-placeholder-size)}}.avatar.mod-AI,.lu-user-picture.mod-AI{--components-avatar-borderRadius: var(--pr-t-border-radius-default);--components-avatar-picture-background: var(--palettes-neutral-0);--components-avatar-picture-initials-display: none}.avatar.mod-AI .avatar-picture:before,.lu-user-picture.mod-AI .avatar-picture:before{background-image:linear-gradient(135deg,var(--palettes-AI-600),var(--palettes-brand-500));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;--icon-content: \"\\e9f5\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:Lucca icons;content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;font-size:var(--components-avatar-AI-size)}@layer components{.avatarWrapper{--components-avatar-size: 2.5rem;--components-avatar-fontSize: var(--pr-t-font-body-M-fontSize);--components-avatar-border: 2px;--components-avatar-scale: 1;--components-avatar-background: var(--pr-t-elevation-surface-default);--components-avatar-placeholder-size: 1.25rem;--components-avatar-AI-size: var(--pr-t-font-fontSize-200);--components-avatar-borderRadius: var(--pr-t-border-radius-full);--components-avatar-picture-background: var(--palettes-neutral-200);--components-avatar-picture-initials-display: block;--components-avatarWrapper-fontSize: var(--pr-t-font-body-M-fontSize);--components-avatarWrapper-overlap: var(--pr-t-spacings-100);--components-avatarWrapper-rowGap: var(--pr-t-spacings-50)}}@layer mods{.avatarWrapper.mod-XL .avatar,.avatarWrapper.mod-XL .avatarWrapper-item-action{--components-avatar-size: 4rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-275);--components-avatar-placeholder-size: 2rem}.avatarWrapper.mod-L .avatar,.avatarWrapper.mod-L .avatarWrapper-item-action{--components-avatar-size: 3rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-225);--components-avatar-placeholder-size: 1.75rem}.avatarWrapper.mod-S{--components-avatarWrapper-overlap: var(--pr-t-spacings-50);--components-avatarWrapper-rowGap: var(--pr-t-spacings-25)}.avatarWrapper.mod-S .avatar,.avatarWrapper.mod-S .avatarWrapper-item-action{--components-avatar-size: 2rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-175);--components-avatar-placeholder-size: 1rem}.avatarWrapper.mod-XS{--components-avatarWrapper-overlap: var(--pr-t-spacings-50);--components-avatarWrapper-rowGap: var(--pr-t-spacings-25)}.avatarWrapper.mod-XS .avatar,.avatarWrapper.mod-XS .avatarWrapper-item-action{--components-avatar-size: 1.5rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-150);--components-avatar-placeholder-size: .75rem;--components-avatar-border: 1px}}\n"] }]
+        }], propDecorators: { displayFormat: [{
+                type: Input
+            }, {
+                type: Optional
+            }], imageLoadingAttribute: [{
+                type: Input
+            }], user: [{
+                type: Input
+            }] } });
 
 /**
  * Displays user picture and name. LuUserTileUserInput's role can be specified, and the footer is customizable.
@@ -216,27 +229,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
 class LuUserTileComponent {
     #luClass;
     #defaultFormat;
+    #changeDetector;
+    /**
+     * LuUserTileUserInput to display.
+     */
+    set user(user) {
+        this._user = user;
+        this.#changeDetector.markForCheck();
+    }
+    get user() {
+        return this._user;
+    }
+    /**
+     * User Display format.
+     * It is set to 'LU_DEFAULT_DISPLAY_POLICY' by default
+     */
+    set displayFormat(displayFormat) {
+        this._displayFormat = displayFormat;
+        this.displayPictureFormat = displayPictureFormatRecord[displayFormat];
+        this.#changeDetector.markForCheck();
+    }
+    get displayFormat() {
+        return this._displayFormat;
+    }
+    /**
+     * LuUserTileUserInput role to display
+     */
+    set role(role) {
+        this._role = role;
+        this.#changeDetector.markForCheck();
+    }
+    get role() {
+        return this._role;
+    }
     constructor() {
         this.#luClass = inject(LuClass);
         this.#defaultFormat = inject(LU_DEFAULT_DISPLAY_POLICY);
-        /**
-         * LuUserTileUserInput to display.
-         */
-        this.user = input();
-        /**
-         * User Display format.
-         * It is set to 'LU_DEFAULT_DISPLAY_POLICY' by default
-         */
-        this.displayFormat = input();
-        /**
-         * LuUserTileUserInput role to display
-         */
-        this.role = input();
+        this.#changeDetector = inject(ChangeDetectorRef);
+        this.displayPictureFormat = displayPictureFormatRecord[this.#defaultFormat];
         /**
          * Which size should the user tile be? Defaults to medium
          */
         this.size = input();
-        this.displayPictureFormat = computed(() => (this.displayFormat() ? displayPictureFormatRecord[this.displayFormat()] : displayPictureFormatRecord[this.#defaultFormat]));
         effect(() => {
             this.#luClass.setState({
                 [`mod-${this.size()}`]: !!this.size(),
@@ -244,12 +278,18 @@ class LuUserTileComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LuUserTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: LuUserTileComponent, isStandalone: true, selector: "lu-user-tile", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "userTile" }, providers: [LuClass], ngImport: i0, template: "<lu-user-picture [user]=\"user()\" [displayFormat]=\"displayPictureFormat()\" />\n<div class=\"userTile-content\">\n\t<div class=\"userTile-content-name\" translate=\"no\">{{ user() | luUserDisplay: displayFormat() }}</div>\n\t@if (role() || user()?.jobTitle) {\n\t\t<div class=\"userTile-content-info\">{{ role() ? role() : user()?.jobTitle }}</div>\n\t}\n\t<div class=\"userTile-content-slotBottom\">\n\t\t<ng-content />\n\t</div>\n</div>\n", styles: ["@layer components{.userTile{--components-userTile-title-fontSize: var(--pr-t-font-body-M-fontSize);--components-userTile-title-lineHeight: var(--pr-t-font-body-M-lineHeight);--components-userTile-info-fontSize: var(--pr-t-font-body-S-fontSize);--components-userTile-info-lineHeight: var(--pr-t-font-body-S-lineHeight);--components-userTile-gap: var(--pr-t-spacings-150);display:flex;align-items:center;gap:var(--components-userTile-gap);overflow-wrap:break-word}.userTile .avatar{display:flex;align-self:start;align-items:center;min-block-size:var(--components-avatar-size)}.userTile:has(.userTile-content-info) .avatar{block-size:calc(var(--components-userTile-title-lineHeight) + var(--components-userTile-info-lineHeight))}.userTile-content{display:flex;flex-direction:column;margin:0}.userTile-content-name{font-size:var(--components-userTile-title-fontSize);line-height:var(--components-userTile-title-lineHeight);color:var(--pr-t-color-text);margin:0}.userTile-content-info{font-size:var(--components-userTile-info-fontSize);line-height:var(--components-userTile-info-lineHeight);color:var(--palettes-neutral-600);margin:0}.userTile-content-slotBottom{font:var(--pr-t-font-body-S)}.userTile-content-slotBottom:empty{display:none}}@layer mods{.userTile.mod-XS{--components-userTile-gap: var(--pr-t-spacings-100);--components-userTile-title-fontSize: var(--pr-t-font-body-S-fontSize);--components-userTile-title-lineHeight: var(--pr-t-font-body-S-lineHeight);--components-userTile-info-fontSize: var(--pr-t-font-body-XS-fontSize);--components-userTile-info-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.userTile.mod-XS .avatar{--components-avatar-size: 1.5rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-150);--components-avatar-placeholder-size: .75rem;--components-avatar-border: 1px}.userTile.mod-S{--components-userTile-gap: var(--pr-t-spacings-100)}.userTile.mod-S .avatar{--components-avatar-size: 2rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-175);--components-avatar-placeholder-size: 1rem}.userTile.mod-L .avatar{--components-avatar-size: 3rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-225);--components-avatar-placeholder-size: 1.75rem}.userTile.mod-XL .avatar{--components-avatar-size: 4rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-275);--components-avatar-placeholder-size: 2rem}.userTile.mod-XXL .avatar{--components-avatar-size: 5rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-350);--components-avatar-placeholder-size: 2.25rem}.userTile.mod-XXXL .avatar{--components-avatar-size: 6rem;--components-avatar-fontSize: 2.25rem;--components-avatar-placeholder-size: 2.5rem}}\n"], dependencies: [{ kind: "pipe", type: LuUserDisplayPipe, name: "luUserDisplay" }, { kind: "component", type: LuUserPictureComponent, selector: "lu-user-picture", inputs: ["displayFormat", "user", "AI", "size", "imageLoadingAttribute"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: LuUserTileComponent, isStandalone: true, selector: "lu-user-tile", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: false, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: false, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "userTile" }, providers: [LuClass], ngImport: i0, template: "<lu-user-picture [user]=\"user\" [displayFormat]=\"displayPictureFormat\" />\n<div class=\"userTile-content\">\n\t<div class=\"userTile-content-name\" translate=\"no\">{{ user | luUserDisplay: displayFormat }}</div>\n\t@if (role || user?.jobTitle) {\n\t\t<div class=\"userTile-content-info\">{{ role ? role : user?.jobTitle }}</div>\n\t}\n\t<div class=\"userTile-content-slotBottom\">\n\t\t<ng-content />\n\t</div>\n</div>\n", styles: ["@layer components{.userTile{--components-userTile-title-fontSize: var(--pr-t-font-body-M-fontSize);--components-userTile-title-lineHeight: var(--pr-t-font-body-M-lineHeight);--components-userTile-info-fontSize: var(--pr-t-font-body-S-fontSize);--components-userTile-info-lineHeight: var(--pr-t-font-body-S-lineHeight);--components-userTile-gap: var(--pr-t-spacings-150);display:flex;align-items:center;gap:var(--components-userTile-gap);overflow-wrap:break-word}.userTile .avatar{display:flex;align-self:start;align-items:center;min-block-size:var(--components-avatar-size)}.userTile:has(.userTile-content-info) .avatar{block-size:calc(var(--components-userTile-title-lineHeight) + var(--components-userTile-info-lineHeight))}.userTile-content{display:flex;flex-direction:column;margin:0}.userTile-content-name{font-size:var(--components-userTile-title-fontSize);line-height:var(--components-userTile-title-lineHeight);color:var(--pr-t-color-text);margin:0}.userTile-content-info{font-size:var(--components-userTile-info-fontSize);line-height:var(--components-userTile-info-lineHeight);color:var(--palettes-neutral-600);margin:0}.userTile-content-slotBottom{font:var(--pr-t-font-body-S)}.userTile-content-slotBottom:empty{display:none}}@layer mods{.userTile.mod-XS{--components-userTile-gap: var(--pr-t-spacings-100);--components-userTile-title-fontSize: var(--pr-t-font-body-S-fontSize);--components-userTile-title-lineHeight: var(--pr-t-font-body-S-lineHeight);--components-userTile-info-fontSize: var(--pr-t-font-body-XS-fontSize);--components-userTile-info-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.userTile.mod-XS .avatar{--components-avatar-size: 1.5rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-150);--components-avatar-placeholder-size: .75rem;--components-avatar-border: 1px}.userTile.mod-S{--components-userTile-gap: var(--pr-t-spacings-100)}.userTile.mod-S .avatar{--components-avatar-size: 2rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-175);--components-avatar-placeholder-size: 1rem}.userTile.mod-L .avatar{--components-avatar-size: 3rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-225);--components-avatar-placeholder-size: 1.75rem}.userTile.mod-XL .avatar{--components-avatar-size: 4rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-275);--components-avatar-placeholder-size: 2rem}.userTile.mod-XXL .avatar{--components-avatar-size: 5rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-350);--components-avatar-placeholder-size: 2.25rem}.userTile.mod-XXXL .avatar{--components-avatar-size: 6rem;--components-avatar-fontSize: 2.25rem;--components-avatar-placeholder-size: 2.5rem}}\n"], dependencies: [{ kind: "pipe", type: LuUserDisplayPipe, name: "luUserDisplay" }, { kind: "component", type: LuUserPictureComponent, selector: "lu-user-picture", inputs: ["displayFormat", "imageLoadingAttribute", "user", "AI", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LuUserTileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lu-user-tile', imports: [LuUserDisplayPipe, LuUserPictureComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'userTile' }, encapsulation: ViewEncapsulation.None, providers: [LuClass], template: "<lu-user-picture [user]=\"user()\" [displayFormat]=\"displayPictureFormat()\" />\n<div class=\"userTile-content\">\n\t<div class=\"userTile-content-name\" translate=\"no\">{{ user() | luUserDisplay: displayFormat() }}</div>\n\t@if (role() || user()?.jobTitle) {\n\t\t<div class=\"userTile-content-info\">{{ role() ? role() : user()?.jobTitle }}</div>\n\t}\n\t<div class=\"userTile-content-slotBottom\">\n\t\t<ng-content />\n\t</div>\n</div>\n", styles: ["@layer components{.userTile{--components-userTile-title-fontSize: var(--pr-t-font-body-M-fontSize);--components-userTile-title-lineHeight: var(--pr-t-font-body-M-lineHeight);--components-userTile-info-fontSize: var(--pr-t-font-body-S-fontSize);--components-userTile-info-lineHeight: var(--pr-t-font-body-S-lineHeight);--components-userTile-gap: var(--pr-t-spacings-150);display:flex;align-items:center;gap:var(--components-userTile-gap);overflow-wrap:break-word}.userTile .avatar{display:flex;align-self:start;align-items:center;min-block-size:var(--components-avatar-size)}.userTile:has(.userTile-content-info) .avatar{block-size:calc(var(--components-userTile-title-lineHeight) + var(--components-userTile-info-lineHeight))}.userTile-content{display:flex;flex-direction:column;margin:0}.userTile-content-name{font-size:var(--components-userTile-title-fontSize);line-height:var(--components-userTile-title-lineHeight);color:var(--pr-t-color-text);margin:0}.userTile-content-info{font-size:var(--components-userTile-info-fontSize);line-height:var(--components-userTile-info-lineHeight);color:var(--palettes-neutral-600);margin:0}.userTile-content-slotBottom{font:var(--pr-t-font-body-S)}.userTile-content-slotBottom:empty{display:none}}@layer mods{.userTile.mod-XS{--components-userTile-gap: var(--pr-t-spacings-100);--components-userTile-title-fontSize: var(--pr-t-font-body-S-fontSize);--components-userTile-title-lineHeight: var(--pr-t-font-body-S-lineHeight);--components-userTile-info-fontSize: var(--pr-t-font-body-XS-fontSize);--components-userTile-info-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.userTile.mod-XS .avatar{--components-avatar-size: 1.5rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-150);--components-avatar-placeholder-size: .75rem;--components-avatar-border: 1px}.userTile.mod-S{--components-userTile-gap: var(--pr-t-spacings-100)}.userTile.mod-S .avatar{--components-avatar-size: 2rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-175);--components-avatar-placeholder-size: 1rem}.userTile.mod-L .avatar{--components-avatar-size: 3rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-225);--components-avatar-placeholder-size: 1.75rem}.userTile.mod-XL .avatar{--components-avatar-size: 4rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-275);--components-avatar-placeholder-size: 2rem}.userTile.mod-XXL .avatar{--components-avatar-size: 5rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-350);--components-avatar-placeholder-size: 2.25rem}.userTile.mod-XXXL .avatar{--components-avatar-size: 6rem;--components-avatar-fontSize: 2.25rem;--components-avatar-placeholder-size: 2.5rem}}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'lu-user-tile', imports: [LuUserDisplayPipe, LuUserPictureComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'userTile' }, encapsulation: ViewEncapsulation.None, providers: [LuClass], template: "<lu-user-picture [user]=\"user\" [displayFormat]=\"displayPictureFormat\" />\n<div class=\"userTile-content\">\n\t<div class=\"userTile-content-name\" translate=\"no\">{{ user | luUserDisplay: displayFormat }}</div>\n\t@if (role || user?.jobTitle) {\n\t\t<div class=\"userTile-content-info\">{{ role ? role : user?.jobTitle }}</div>\n\t}\n\t<div class=\"userTile-content-slotBottom\">\n\t\t<ng-content />\n\t</div>\n</div>\n", styles: ["@layer components{.userTile{--components-userTile-title-fontSize: var(--pr-t-font-body-M-fontSize);--components-userTile-title-lineHeight: var(--pr-t-font-body-M-lineHeight);--components-userTile-info-fontSize: var(--pr-t-font-body-S-fontSize);--components-userTile-info-lineHeight: var(--pr-t-font-body-S-lineHeight);--components-userTile-gap: var(--pr-t-spacings-150);display:flex;align-items:center;gap:var(--components-userTile-gap);overflow-wrap:break-word}.userTile .avatar{display:flex;align-self:start;align-items:center;min-block-size:var(--components-avatar-size)}.userTile:has(.userTile-content-info) .avatar{block-size:calc(var(--components-userTile-title-lineHeight) + var(--components-userTile-info-lineHeight))}.userTile-content{display:flex;flex-direction:column;margin:0}.userTile-content-name{font-size:var(--components-userTile-title-fontSize);line-height:var(--components-userTile-title-lineHeight);color:var(--pr-t-color-text);margin:0}.userTile-content-info{font-size:var(--components-userTile-info-fontSize);line-height:var(--components-userTile-info-lineHeight);color:var(--palettes-neutral-600);margin:0}.userTile-content-slotBottom{font:var(--pr-t-font-body-S)}.userTile-content-slotBottom:empty{display:none}}@layer mods{.userTile.mod-XS{--components-userTile-gap: var(--pr-t-spacings-100);--components-userTile-title-fontSize: var(--pr-t-font-body-S-fontSize);--components-userTile-title-lineHeight: var(--pr-t-font-body-S-lineHeight);--components-userTile-info-fontSize: var(--pr-t-font-body-XS-fontSize);--components-userTile-info-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.userTile.mod-XS .avatar{--components-avatar-size: 1.5rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-150);--components-avatar-placeholder-size: .75rem;--components-avatar-border: 1px}.userTile.mod-S{--components-userTile-gap: var(--pr-t-spacings-100)}.userTile.mod-S .avatar{--components-avatar-size: 2rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-175);--components-avatar-placeholder-size: 1rem}.userTile.mod-L .avatar{--components-avatar-size: 3rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-225);--components-avatar-placeholder-size: 1.75rem}.userTile.mod-XL .avatar{--components-avatar-size: 4rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-275);--components-avatar-placeholder-size: 2rem}.userTile.mod-XXL .avatar{--components-avatar-size: 5rem;--components-avatar-fontSize: var(--pr-t-font-fontSize-350);--components-avatar-placeholder-size: 2.25rem}.userTile.mod-XXXL .avatar{--components-avatar-size: 6rem;--components-avatar-fontSize: 2.25rem;--components-avatar-placeholder-size: 2.5rem}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { user: [{
+                type: Input
+            }], displayFormat: [{
+                type: Input
+            }], role: [{
+                type: Input
+            }] } });
 
 /**
  * @deprecated use `LuUserTileComponent` instead
@@ -257,7 +297,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
 class LuUserTileModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LuUserTileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: LuUserTileModule, imports: [LuUserTileComponent], exports: [LuUserTileComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LuUserTileModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LuUserTileModule, imports: [LuUserTileComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LuUserTileModule, decorators: [{
             type: NgModule,
@@ -273,7 +313,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
 class LuUserPictureModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LuUserPictureModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: LuUserPictureModule, imports: [LuUserPictureComponent], exports: [LuUserPictureComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LuUserPictureModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LuUserPictureModule, imports: [LuUserPictureComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LuUserPictureModule, decorators: [{
             type: NgModule,