@edm-sdui/sdui 1.0.24 → 1.0.26

package/fesm2022/edm-sdui-sdui.mjs

@@ -918,6 +918,7 @@ var UIAsset;
     UIAsset["IC_DOWNLOAD_PROFILE"] = "ic_download_profile";
     UIAsset["IC_HOUR_PROFILE"] = "ic_hour_profile";
     UIAsset["IC_LINK_GENERIC_PROFILE"] = "ic_link_generic_profile";
+    UIAsset["IC_MY_POST_MY_APP"] = "ic_my_post_my_app";
     UIAsset["IC_NOTIFICATION_PROFILE_OFF"] = "ic_notification_profile_off";
     UIAsset["IC_NOTIFICATION_PROFILE_ON"] = "ic_notification_profile_on";
     UIAsset["IC_POST_SAVE_MY_APP"] = "ic_post_save_my_app";
@@ -1287,6 +1288,7 @@ const assetMapping = {
     [UIAsset.IC_DOWNLOAD_PROFILE]: 'assets/images/ic-download-profile.svg',
     [UIAsset.IC_HOUR_PROFILE]: 'assets/images/ic-hour-profile.svg',
     [UIAsset.IC_LINK_GENERIC_PROFILE]: 'assets/images/ic-link-generic-profile.svg',
+    [UIAsset.IC_MY_POST_MY_APP]: 'assets/images/ic-my-post-my-app.svg',
     [UIAsset.IC_NOTIFICATION_PROFILE_OFF]: 'assets/images/ic-notification-profile-off.svg',
     [UIAsset.IC_NOTIFICATION_PROFILE_ON]: 'assets/images/ic-notification-profile-on.svg',
     [UIAsset.IC_POST_SAVE_MY_APP]: 'assets/images/ic-post-save-my-app.svg',
@@ -3145,6 +3147,8 @@ class ProfileButtonComponent {
     ngAfterViewInit() {
         if (this.uiComponent.element) {
             this.applyElement(this.uiComponent.element);
+            // esperar o layout para medir o texto já com estilos aplicados
+            setTimeout(() => this.fitLabelToTwoLines(), 0);
         }
     }
     applyElement(element) {
@@ -3160,15 +3164,59 @@ class ProfileButtonComponent {
         this.renderer.setStyle(this.profileButtonLabelElementRef.nativeElement, 'font-size', this.fontSizeMappingService.getMapping()[UITextStyle.CAPTION_2]);
         this.renderer.setStyle(this.profileButtonLabelElementRef.nativeElement, 'color', colorMapping[UIColor.MAIN1]);
     }
+    fitLabelToTwoLines(maxLines = 2, minFontSizePx = 10) {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        const labelElement = this.profileButtonLabelElementRef?.nativeElement;
+        if (!labelElement) {
+            return;
+        }
+        const computedStyles = window.getComputedStyle(labelElement);
+        let fontSize = parseFloat(computedStyles.fontSize);
+        if (!Number.isFinite(fontSize)) {
+            return;
+        }
+        const lineHeight = computedStyles.lineHeight === 'normal'
+            ? fontSize * 1.2
+            : parseFloat(computedStyles.lineHeight);
+        if (!Number.isFinite(lineHeight) || lineHeight <= 0) {
+            return;
+        }
+        const lineHeightRatio = lineHeight / fontSize;
+        const updateMetrics = (forceHeight) => {
+            const targetHeight = lineHeightRatio * fontSize * maxLines;
+            this.renderer.setStyle(labelElement, 'line-height', `${lineHeightRatio * fontSize}px`);
+            this.renderer.setStyle(labelElement, 'max-height', `${targetHeight}px`);
+            if (forceHeight) {
+                this.renderer.setStyle(labelElement, 'height', `${targetHeight}px`);
+            }
+            else {
+                this.renderer.removeStyle(labelElement, 'height');
+            }
+            return targetHeight;
+        };
+        let targetHeight = updateMetrics(false);
+        let constrained = false;
+        while (labelElement.scrollHeight > targetHeight && fontSize > minFontSizePx) {
+            fontSize -= 1;
+            this.renderer.setStyle(labelElement, 'font-size', `${fontSize}px`);
+            targetHeight = updateMetrics(true);
+            constrained = true;
+        }
+        if (!constrained) {
+            this.renderer.removeStyle(labelElement, 'height');
+        }
+    }
     getAssetPath(asset) {
         return assetMapping[asset];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProfileButtonComponent, deps: [{ token: 'uiComponent' }, { token: i0.Renderer2 }, { token: FontSizeMappingService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ProfileButtonComponent, isStandalone: false, selector: "edm-sdui-profile-button", viewQueries: [{ propertyName: "profileButtonElementRef", first: true, predicate: ["profileButtonElement"], descendants: true }, { propertyName: "profileButtonLabelElementRef", first: true, predicate: ["profileButtonLabelElement"], descendants: true }, { propertyName: "profileButtonImageElementRef", first: true, predicate: ["profileButtonImageElement"], descendants: true }], ngImport: i0, template: "<button #profileButtonElement [edmSduiView]=\"uiComponent.element\" class=\"profile-button\" *ngIf=\"uiComponent\">\n  <img #profileButtonImageElement *ngIf=\"uiComponent.element.asset\" [src]=\"getAssetPath(uiComponent.element.asset)\" alt=\"Profile\" class=\"profile-image\">\n  <span #profileButtonLabelElement class=\"profile-label\">{{ uiComponent.element.label }}</span>\n</button>\n", styles: [":host{display:contents}.profile-button{display:flex;padding:16px 16px 0;border-radius:20px;background-color:var(--bt-profile);border:none;cursor:pointer;flex-direction:column;height:108px;width:108px;align-items:start;justify-content:start;gap:24px}.profile-button:hover{background-color:#0000000d;cursor:pointer}.profile-button .profile-image{width:24px;height:24px}.profile-button .profile-label{white-space:normal;word-break:break-word;overflow-wrap:break-word;max-width:100%;display:block;text-align:left}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: UIViewDirective, selector: "[edmSduiView]", inputs: ["edmSduiView", "disableClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ProfileButtonComponent, isStandalone: false, selector: "edm-sdui-profile-button", viewQueries: [{ propertyName: "profileButtonElementRef", first: true, predicate: ["profileButtonElement"], descendants: true }, { propertyName: "profileButtonLabelElementRef", first: true, predicate: ["profileButtonLabelElement"], descendants: true }, { propertyName: "profileButtonImageElementRef", first: true, predicate: ["profileButtonImageElement"], descendants: true }], ngImport: i0, template: "<button #profileButtonElement [edmSduiView]=\"uiComponent.element\" class=\"profile-button\" *ngIf=\"uiComponent\">\n  <img #profileButtonImageElement *ngIf=\"uiComponent.element.asset\" [src]=\"getAssetPath(uiComponent.element.asset)\" alt=\"Profile\" class=\"profile-image\">\n  <span #profileButtonLabelElement class=\"profile-label\">{{ uiComponent.element.label }}</span>\n</button>\n", styles: [":host{display:contents}.profile-button{display:flex;padding:16px 16px 0;border-radius:20px;background-color:var(--bt-profile);border:none;cursor:pointer;flex-direction:column;height:108px;width:108px;align-items:start;justify-content:start;gap:24px}.profile-button:hover{background-color:#0000000d;cursor:pointer}.profile-button .profile-image{width:24px;height:24px}.profile-button .profile-label{max-width:100%;white-space:normal;word-break:keep-all;overflow-wrap:normal;text-align:left;line-height:1.25;max-height:2.5em;overflow:hidden;text-overflow:ellipsis;display:block;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;-webkit-hyphens:none;hyphens:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: UIViewDirective, selector: "[edmSduiView]", inputs: ["edmSduiView", "disableClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProfileButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'edm-sdui-profile-button', standalone: false, template: "<button #profileButtonElement [edmSduiView]=\"uiComponent.element\" class=\"profile-button\" *ngIf=\"uiComponent\">\n  <img #profileButtonImageElement *ngIf=\"uiComponent.element.asset\" [src]=\"getAssetPath(uiComponent.element.asset)\" alt=\"Profile\" class=\"profile-image\">\n  <span #profileButtonLabelElement class=\"profile-label\">{{ uiComponent.element.label }}</span>\n</button>\n", styles: [":host{display:contents}.profile-button{display:flex;padding:16px 16px 0;border-radius:20px;background-color:var(--bt-profile);border:none;cursor:pointer;flex-direction:column;height:108px;width:108px;align-items:start;justify-content:start;gap:24px}.profile-button:hover{background-color:#0000000d;cursor:pointer}.profile-button .profile-image{width:24px;height:24px}.profile-button .profile-label{white-space:normal;word-break:break-word;overflow-wrap:break-word;max-width:100%;display:block;text-align:left}\n"] }]
+            args: [{ selector: 'edm-sdui-profile-button', standalone: false, template: "<button #profileButtonElement [edmSduiView]=\"uiComponent.element\" class=\"profile-button\" *ngIf=\"uiComponent\">\n  <img #profileButtonImageElement *ngIf=\"uiComponent.element.asset\" [src]=\"getAssetPath(uiComponent.element.asset)\" alt=\"Profile\" class=\"profile-image\">\n  <span #profileButtonLabelElement class=\"profile-label\">{{ uiComponent.element.label }}</span>\n</button>\n", styles: [":host{display:contents}.profile-button{display:flex;padding:16px 16px 0;border-radius:20px;background-color:var(--bt-profile);border:none;cursor:pointer;flex-direction:column;height:108px;width:108px;align-items:start;justify-content:start;gap:24px}.profile-button:hover{background-color:#0000000d;cursor:pointer}.profile-button .profile-image{width:24px;height:24px}.profile-button .profile-label{max-width:100%;white-space:normal;word-break:keep-all;overflow-wrap:normal;text-align:left;line-height:1.25;max-height:2.5em;overflow:hidden;text-overflow:ellipsis;display:block;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;-webkit-hyphens:none;hyphens:none}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: ['uiComponent']