@rlucan/ui 20.0.3 → 20.0.6

package/fesm2022/rlucan-ui.mjs

@@ -1595,11 +1595,11 @@ class ForceVisibilityDirective {
         }
         else {
             if (this.visibilityFromTop !== 0) {
-                document.getElementsByTagName('app-root')[0].scrollTo(0, rect.top - +this.visibilityFromTop);
+                document.getElementsByClassName('force-visibility-root')[0].scrollTo(0, rect.top - +this.visibilityFromTop);
             }
             else {
                 if (rect.bottom > window.innerHeight) {
-                    document.getElementsByTagName('app-root')[0].scrollBy(0, rect.bottom - window.innerHeight + 15);
+                    document.getElementsByClassName('force-visibility-root')[0].scrollBy(0, rect.bottom - window.innerHeight + 15);
                 }
             }
         }
@@ -1977,6 +1977,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
             }] } });
 
 class AvatarComponent {
+    get styleDiameter() {
+        if (this.diameter === undefined) {
+            return undefined;
+        }
+        if (!isNaN(Number(this.diameter))) {
+            return this.diameter + 'px';
+        }
+        return this.diameter;
+    }
+    get height() {
+        return this.styleDiameter;
+    }
+    get width() {
+        return this.styleDiameter;
+    }
+    get fontSize() {
+        if (this.diameter === undefined) {
+            return undefined;
+        }
+        return 'calc(' + this.styleDiameter + ' / 2)';
+    }
+    get paddingBottom() {
+        if (this.diameter === undefined) {
+            return undefined;
+        }
+        return 'calc(' + this.styleDiameter + ' / 20)';
+    }
     get contrast() {
         const hexCode = this.user.shortColour.substring(1, 7);
         const hexR = parseInt(hexCode.substring(0, 2), 16);
@@ -1990,13 +2017,14 @@ class AvatarComponent {
         this.size = 'normal';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: AvatarComponent, isStandalone: false, selector: "ui-avatar", inputs: { user: "user", srcOptions: "srcOptions", size: "size" }, host: { properties: { "class": "this.size" } }, ngImport: i0, template: "<ui-file *ngIf=\"user.avatar || (!user.avatar && !user.shortName)\" [fileSize]=\"'avatar-' + size\" [srcData]=\"user.avatar || { mimeType: 'image/png'}\" [srcOptions]=\"srcOptions\" ></ui-file>\r\n<div *ngIf=\"!user.avatar && user.shortName\" [ngStyle]=\"{backgroundColor: user.shortColour, color: contrast}\">\r\n  {{ user.shortName }}\r\n</div>\r\n", styles: [":host{display:block;flex:0 0 auto}:host.mini{height:16px;width:16px}:host.mini div{font-size:10px}:host.small{height:24px;width:24px}:host.small div{font-size:13px}:host.smaller{height:50px;width:50px}:host.smaller div{font-size:1.5em}:host.normal{height:74px;width:74px}:host.normal div{font-size:37px}:host.bigger{height:100px;width:100px}:host.bigger div{font-size:50px}:host.big{height:150px;width:150px}:host.big div{font-size:75px}:host ui-file ::ng-deep img{border-radius:50%}:host div{display:flex;align-items:center;justify-content:center;width:100%;font-weight:700;color:#fff;background-size:cover;height:100%;border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: FileComponent, selector: "ui-file", inputs: ["fileSize", "srcOptions", "srcData", "srcUrl"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AvatarComponent, isStandalone: false, selector: "ui-avatar", inputs: { user: "user", srcOptions: "srcOptions", size: "size", diameter: "diameter" }, host: { properties: { "class": "this.size", "style.height": "this.height", "style.width": "this.width" } }, ngImport: i0, template: "@if (user.avatar || (!user.avatar && !user.shortName)) {\r\n    <ui-file [fileSize]=\"'avatar-' + size\" [srcData]=\"user.avatar || { mimeType: 'image/png'}\" [srcOptions]=\"srcOptions\" ></ui-file>\r\n}\r\n@if (!user.avatar && user.shortName) {\r\n    <div [ngStyle]=\"{backgroundColor: user.shortColour, color: contrast, 'font-size': fontSize, 'padding-bottom': paddingBottom}\">\r\n      {{ user.shortName }}\r\n    </div>\r\n}\r\n", styles: [":host{display:block;flex:0 0 auto}:host.mini{height:16px;width:16px}:host.mini div{font-size:10px}:host.small{height:24px;width:24px}:host.small div{font-size:13px}:host.smaller{height:50px;width:50px}:host.smaller div{font-size:1.5em}:host.normal{height:74px;width:74px}:host.normal div{font-size:37px}:host.bigger{height:100px;width:100px}:host.bigger div{font-size:50px}:host.big{height:150px;width:150px}:host.big div{font-size:75px}:host ui-file{max-width:100%!important;max-height:100%!important;height:100%!important;width:100%!important}:host ui-file ::ng-deep img{border-radius:50%}:host div{display:flex;align-items:center;justify-content:center;width:100%;font-weight:700;color:#fff;background-size:cover;height:100%;border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: FileComponent, selector: "ui-file", inputs: ["fileSize", "srcOptions", "srcData", "srcUrl"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-avatar', standalone: false, template: "<ui-file *ngIf=\"user.avatar || (!user.avatar && !user.shortName)\" [fileSize]=\"'avatar-' + size\" [srcData]=\"user.avatar || { mimeType: 'image/png'}\" [srcOptions]=\"srcOptions\" ></ui-file>\r\n<div *ngIf=\"!user.avatar && user.shortName\" [ngStyle]=\"{backgroundColor: user.shortColour, color: contrast}\">\r\n  {{ user.shortName }}\r\n</div>\r\n", styles: [":host{display:block;flex:0 0 auto}:host.mini{height:16px;width:16px}:host.mini div{font-size:10px}:host.small{height:24px;width:24px}:host.small div{font-size:13px}:host.smaller{height:50px;width:50px}:host.smaller div{font-size:1.5em}:host.normal{height:74px;width:74px}:host.normal div{font-size:37px}:host.bigger{height:100px;width:100px}:host.bigger div{font-size:50px}:host.big{height:150px;width:150px}:host.big div{font-size:75px}:host ui-file ::ng-deep img{border-radius:50%}:host div{display:flex;align-items:center;justify-content:center;width:100%;font-weight:700;color:#fff;background-size:cover;height:100%;border-radius:50%}\n"] }]
+            args: [{ selector: 'ui-avatar', standalone: false, template: "@if (user.avatar || (!user.avatar && !user.shortName)) {\r\n    <ui-file [fileSize]=\"'avatar-' + size\" [srcData]=\"user.avatar || { mimeType: 'image/png'}\" [srcOptions]=\"srcOptions\" ></ui-file>\r\n}\r\n@if (!user.avatar && user.shortName) {\r\n    <div [ngStyle]=\"{backgroundColor: user.shortColour, color: contrast, 'font-size': fontSize, 'padding-bottom': paddingBottom}\">\r\n      {{ user.shortName }}\r\n    </div>\r\n}\r\n", styles: [":host{display:block;flex:0 0 auto}:host.mini{height:16px;width:16px}:host.mini div{font-size:10px}:host.small{height:24px;width:24px}:host.small div{font-size:13px}:host.smaller{height:50px;width:50px}:host.smaller div{font-size:1.5em}:host.normal{height:74px;width:74px}:host.normal div{font-size:37px}:host.bigger{height:100px;width:100px}:host.bigger div{font-size:50px}:host.big{height:150px;width:150px}:host.big div{font-size:75px}:host ui-file{max-width:100%!important;max-height:100%!important;height:100%!important;width:100%!important}:host ui-file ::ng-deep img{border-radius:50%}:host div{display:flex;align-items:center;justify-content:center;width:100%;font-weight:700;color:#fff;background-size:cover;height:100%;border-radius:50%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { user: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }], srcOptions: [{
                 type: Input
             }], size: [{
@@ -2004,6 +2032,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                 args: ['class']
             }, {
                 type: Input
+            }], diameter: [{
+                type: Input
+            }], height: [{
+                type: HostBinding,
+                args: ['style.height']
+            }], width: [{
+                type: HostBinding,
+                args: ['style.width']
             }] } });
 
 class SubmitButtonComponent {