@edm-sdui/sdui 1.0.66 → 1.0.68

package/fesm2022/edm-sdui-sdui.mjs

@@ -2081,10 +2081,10 @@ var UISize;
 })(UISize || (UISize = {}));
 
 const sizeMapping = {
-    [UISize.THUMB_1]: { width: '100px', height: '56px', scalable: false },
-    [UISize.THUMB_2]: { width: '105px', height: '40px', scalable: false },
+    [UISize.THUMB_1]: { width: '100px', height: '56px', scalable: true },
+    [UISize.THUMB_2]: { width: '106px', height: '40px', scalable: true },
     [UISize.THUMB_3]: { width: '210px', height: '118px', scalable: true },
-    [UISize.THUMB_4]: { width: '300px', height: '169px', scalable: true },
+    [UISize.THUMB_4]: { width: '300px', height: '170px', scalable: true },
     [UISize.ASSET_1]: { width: '26px', height: '26px', scalable: false },
     [UISize.ASSET_2]: { width: '16px', height: '16px', scalable: false },
     [UISize.ASSET_3]: { width: '80px', height: '80px', scalable: false },
@@ -2093,12 +2093,12 @@ const sizeMapping = {
     [UISize.ASSET_6]: { width: '20px', height: '20px', scalable: false },
     [UISize.ASSET_7]: { width: '22px', height: '22px', scalable: false },
     [UISize.ASSET_8]: { width: '24px', height: '24px', scalable: false },
-    [UISize.ASSET_9]: { width: '40px', height: '40px', scalable: false },
+    [UISize.ASSET_9]: { width: '60px', height: '60px', scalable: false },
     [UISize.ASSET_10]: { width: '30px', height: '30px', scalable: false },
     [UISize.CARD_1]: { width: '210px', height: '201px', scalable: true },
-    [UISize.CARD_2]: { width: '300px', height: '311px', scalable: true },
-    [UISize.CARD_3]: { width: '300px', height: '390px', scalable: false },
-    [UISize.CARD_4]: { width: '210px', height: '100%', scalable: true },
+    [UISize.CARD_2]: { width: '300px', height: '315px', scalable: true },
+    [UISize.CARD_3]: { width: '300px', height: '375px', scalable: false },
+    [UISize.CARD_4]: { width: '210px', height: '235px', scalable: true },
 };
 /** @deprecated Use `sizeMapping[size].height` */
 const sizeMappingHeight = Object.fromEntries(Object.entries(sizeMapping).map(([key, config]) => [key, config.height]));
@@ -2329,9 +2329,7 @@ class UIViewDirective {
         if (!config)
             return;
         let { width: widthValue, height: heightValue } = config;
-        if (config.scalable &&
-            this.isSmallScreen() &&
-            this.currentContainer === UIScreenContainerType.FLUID) {
+        if (config.scalable && this.isSmallScreen()) {
             widthValue = this.scalePixelValue(widthValue, 1.1);
             heightValue = this.scalePixelValue(heightValue, 1.1);
         }
@@ -3164,12 +3162,6 @@ class ImageComponent {
             }
         }
         if (this.imgElementRef?.nativeElement) {
-            if (element.size) {
-                const height = sizeMappingHeight[element.size];
-                const width = sizeMappingWidth[element.size];
-                this.renderer.setStyle(this.imgElementRef.nativeElement, 'height', height);
-                this.renderer.setStyle(this.imgElementRef.nativeElement, 'width', width);
-            }
             if (element.aspect) {
                 this.renderer.setStyle(this.imgElementRef.nativeElement, 'object-fit', aspectMapping[element.aspect]);
             }
@@ -3670,11 +3662,11 @@ class TagsRowTagComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TagsRowTagComponent, deps: [{ token: 'uiComponent' }, { token: i0.Renderer2 }, { token: FontSizeMappingService }, { token: ScrollSpyService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TagsRowTagComponent, isStandalone: false, selector: "edm-sdui-tags-row-tag", viewQueries: [{ propertyName: "tagElementRef", first: true, predicate: ["tagElement"], descendants: true }, { propertyName: "tagNameElementRef", first: true, predicate: ["tagNameElement"], descendants: true }], ngImport: i0, template: "<div class=\"row-tag\" #tagElement *ngIf=\"uiComponent\" [edmSduiView]=\"uiComponent.element\" (click)=\"onTagClick()\">\n    <span class=\"tag-name\" #tagNameElement>{{ uiComponent.element?.label ?? '' }}</span>\n</div>\n", styles: [":host{display:contents}.row-tag{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:.85px solid var(--tag-explorer-aux);cursor:pointer;font-size:16px;flex-shrink:0}.row-tag:hover{background-color:var(--bt-tag-explorer-on)}.row-tag--selected{border-color:var(--tag-explorer-highlight);background-color:var(--bt-tag-explorer-on);background-origin:border-box}.tag-name{font-weight:600;color:var(--font-bt-tag-explorer-on);font-size:15px;line-height:17.25px}\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: TagsRowTagComponent, isStandalone: false, selector: "edm-sdui-tags-row-tag", viewQueries: [{ propertyName: "tagElementRef", first: true, predicate: ["tagElement"], descendants: true }, { propertyName: "tagNameElementRef", first: true, predicate: ["tagNameElement"], descendants: true }], ngImport: i0, template: "<div class=\"row-tag\" #tagElement *ngIf=\"uiComponent\" [edmSduiView]=\"uiComponent.element\" (click)=\"onTagClick()\">\n    <span class=\"tag-name\" #tagNameElement>{{ uiComponent.element?.label ?? '' }}</span>\n</div>\n", styles: [":host{display:contents}.row-tag{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1.5px solid var(--tag-explorer-aux);cursor:pointer;font-size:16px;flex-shrink:0}.row-tag:hover{background-color:var(--bt-tag-explorer-on)}.row-tag--selected{border-color:var(--tag-explorer-highlight);background-color:var(--bt-tag-explorer-on);background-origin:border-box}.tag-name{font-weight:600;color:var(--font-bt-tag-explorer-on);font-size:15px;line-height:17.25px}\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: TagsRowTagComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'edm-sdui-tags-row-tag', template: "<div class=\"row-tag\" #tagElement *ngIf=\"uiComponent\" [edmSduiView]=\"uiComponent.element\" (click)=\"onTagClick()\">\n    <span class=\"tag-name\" #tagNameElement>{{ uiComponent.element?.label ?? '' }}</span>\n</div>\n", styles: [":host{display:contents}.row-tag{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:.85px solid var(--tag-explorer-aux);cursor:pointer;font-size:16px;flex-shrink:0}.row-tag:hover{background-color:var(--bt-tag-explorer-on)}.row-tag--selected{border-color:var(--tag-explorer-highlight);background-color:var(--bt-tag-explorer-on);background-origin:border-box}.tag-name{font-weight:600;color:var(--font-bt-tag-explorer-on);font-size:15px;line-height:17.25px}\n"] }]
+            args: [{ standalone: false, selector: 'edm-sdui-tags-row-tag', template: "<div class=\"row-tag\" #tagElement *ngIf=\"uiComponent\" [edmSduiView]=\"uiComponent.element\" (click)=\"onTagClick()\">\n    <span class=\"tag-name\" #tagNameElement>{{ uiComponent.element?.label ?? '' }}</span>\n</div>\n", styles: [":host{display:contents}.row-tag{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1.5px solid var(--tag-explorer-aux);cursor:pointer;font-size:16px;flex-shrink:0}.row-tag:hover{background-color:var(--bt-tag-explorer-on)}.row-tag--selected{border-color:var(--tag-explorer-highlight);background-color:var(--bt-tag-explorer-on);background-origin:border-box}.tag-name{font-weight:600;color:var(--font-bt-tag-explorer-on);font-size:15px;line-height:17.25px}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: ['uiComponent']
@@ -4139,9 +4131,13 @@ var picker_component = /*#__PURE__*/Object.freeze({
 });
 
 class ScrollableRowComponent {
-    constructor(uiComponent, renderer) {
+    constructor(uiComponent, renderer, zone) {
         this.uiComponent = uiComponent;
         this.renderer = renderer;
+        this.zone = zone;
+        this.canScroll = false;
+        this.canPrev = false;
+        this.canNext = false;
     }
     ngOnInit() {
     }
@@ -4150,10 +4146,74 @@ class ScrollableRowComponent {
             this.applyElement(this.uiComponent.element);
         }
         this.scroll();
+        setTimeout(() => this.updateTrackState(), 0);
+        this.resizeListener = () => this.updateTrackState();
+        window.addEventListener('resize', this.resizeListener);
+        if (typeof ResizeObserver !== 'undefined' && this.scrollableRowElementRef?.nativeElement) {
+            this.zone.runOutsideAngular(() => {
+                this.resizeObserver = new ResizeObserver(() => {
+                    this.zone.run(() => this.updateTrackState());
+                });
+                this.resizeObserver.observe(this.scrollableRowElementRef.nativeElement);
+            });
+        }
+    }
+    ngOnDestroy() {
+        if (this.resizeListener) {
+            window.removeEventListener('resize', this.resizeListener);
+        }
+        this.resizeObserver?.disconnect();
+    }
+    onTrackScroll() {
+        this.updateTrackState();
+    }
+    prev() {
+        this.scrollByStep(-1);
+    }
+    next() {
+        this.scrollByStep(1);
     }
     applyElement(element) {
         console.log(element);
     }
+    updateTrackState() {
+        const track = this.scrollableRowElementRef?.nativeElement;
+        if (!track) {
+            this.canScroll = false;
+            this.canPrev = false;
+            this.canNext = false;
+            return;
+        }
+        const maxLeft = Math.max(0, track.scrollWidth - track.clientWidth);
+        const left = Math.max(0, track.scrollLeft);
+        const tolerance = 2;
+        this.canScroll = maxLeft > tolerance;
+        this.canPrev = this.canScroll && left > tolerance;
+        this.canNext = this.canScroll && left < maxLeft - tolerance;
+    }
+    scrollByStep(direction) {
+        const track = this.scrollableRowElementRef?.nativeElement;
+        if (!track)
+            return;
+        const maxLeft = Math.max(0, track.scrollWidth - track.clientWidth);
+        const step = this.getTrackStep(track);
+        const targetLeft = Math.max(0, Math.min(maxLeft, track.scrollLeft + step * direction));
+        track.scrollTo({ left: targetLeft, behavior: 'smooth' });
+        setTimeout(() => this.updateTrackState(), 260);
+    }
+    getTrackStep(track) {
+        const firstItem = track.firstElementChild;
+        if (!firstItem)
+            return Math.max(1, track.clientWidth * 0.92);
+        const itemWidth = firstItem.getBoundingClientRect().width;
+        const styles = getComputedStyle(track);
+        const gapRaw = styles.columnGap || styles.gap || '0';
+        const gap = Number.parseFloat(gapRaw) || 0;
+        const cardStep = Math.max(1, itemWidth + gap);
+        const viewportStep = track.clientWidth * 0.92;
+        const cardsPerJump = Math.max(2, Math.floor(viewportStep / cardStep));
+        return Math.max(cardStep * cardsPerJump, viewportStep);
+    }
     scroll() {
         const scrollContainer = this.scrollableRowElementRef.nativeElement;
         let isDown = false;
@@ -4182,16 +4242,16 @@ class ScrollableRowComponent {
             scrollContainer.scrollLeft = scrollLeft - walk;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ScrollableRowComponent, deps: [{ token: 'uiComponent' }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ScrollableRowComponent, isStandalone: false, selector: "edm-sdui-scrollable-row", viewQueries: [{ propertyName: "scrollableRowElementRef", first: true, predicate: ["scrollableRowElement"], descendants: true }], ngImport: i0, template: "<div\n  #scrollableRowElement\n  [edmSduiView]=\"uiComponent.element\"\n  class=\"scrollable-row\"\n  *ngIf=\"uiComponent\"\n>\n  <edm-sdui-component\n    *ngFor=\"let component of uiComponent.components\"\n    [uiComponent]=\"component\"\n  >\n  </edm-sdui-component>\n</div>\n", styles: [":host{display:contents}.scrollable-row{display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden;white-space:nowrap;width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:pointer;scroll-padding-left:var(--sdui-content-inset-left, 0px);scroll-padding-right:var(--sdui-content-inset-right, 0px)}.scrollable-row::-webkit-scrollbar{display:none}.scrollable-row>*{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: UIComponentComponent, selector: "edm-sdui-component", inputs: ["uiComponent", "translateLabel"] }, { kind: "directive", type: UIViewDirective, selector: "[edmSduiView]", inputs: ["edmSduiView", "disableClick"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ScrollableRowComponent, deps: [{ token: 'uiComponent' }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ScrollableRowComponent, isStandalone: false, selector: "edm-sdui-scrollable-row", viewQueries: [{ propertyName: "scrollableRowElementRef", first: true, predicate: ["scrollableRowElement"], descendants: true }], ngImport: i0, template: "<div\n  class=\"scrollable-row-shell\"\n  [class.can-scroll]=\"canScroll\"\n  [class.track-scrolled]=\"canPrev\"\n  [class.track-at-end]=\"canScroll && !canNext\"\n  *ngIf=\"uiComponent\"\n>\n  <div\n    #scrollableRowElement\n    [edmSduiView]=\"uiComponent.element\"\n    class=\"scrollable-row\"\n    (scroll)=\"onTrackScroll()\"\n  >\n    <edm-sdui-component\n      *ngFor=\"let component of uiComponent.components\"\n      [uiComponent]=\"component\"\n    >\n    </edm-sdui-component>\n  </div>\n\n  <button\n    *ngIf=\"canScroll && canPrev\"\n    type=\"button\"\n    class=\"scrollable-row-nav scrollable-row-nav--prev\"\n    (click)=\"prev()\"\n    aria-label=\"Anterior\"\n  >\n    &#8592;\n  </button>\n  <button\n    *ngIf=\"canScroll && canNext\"\n    type=\"button\"\n    class=\"scrollable-row-nav scrollable-row-nav--next\"\n    (click)=\"next()\"\n    aria-label=\"Pr\u00F3ximo\"\n  >\n    &#8594;\n  </button>\n</div>\n", styles: [":host{display:contents}.scrollable-row-shell{position:relative;width:100%}.scrollable-row-shell:before,.scrollable-row-shell:after{content:\"\";position:absolute;top:0;bottom:0;width:clamp(1.5rem,4vw,2.625rem);pointer-events:none;z-index:4;opacity:0;transition:opacity .2s ease}.scrollable-row-shell:before{left:0;background:linear-gradient(90deg,var(--bg) 0%,transparent 100%)}.scrollable-row-shell:after{right:0;background:linear-gradient(270deg,var(--bg) 0%,transparent 100%)}.scrollable-row-shell.can-scroll:after{opacity:1}.scrollable-row-shell.track-scrolled:before{opacity:1}.scrollable-row-shell.track-at-end:after{opacity:0}.scrollable-row{display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden;white-space:nowrap;width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:pointer;scroll-behavior:smooth;scroll-padding-left:var(--sdui-content-inset-left, 0px);scroll-padding-right:var(--sdui-content-inset-right, 0px)}.scrollable-row::-webkit-scrollbar{display:none}.scrollable-row>*{flex-shrink:0}.scrollable-row-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:1px solid rgba(255,255,255,.34);background:#070a10c7;color:#f4f6fb;font-size:1.4rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;transition:opacity .18s ease,background-color .2s ease,border-color .2s ease}.scrollable-row-nav:hover,.scrollable-row-nav:focus{background:#121622e6;border-color:#ffffff8a;outline:none}.scrollable-row-nav--prev{left:-.75rem}.scrollable-row-nav--next{right:-.75rem}:host-context(.rounded) .scrollable-row-nav{border-radius:3.75rem}:host-context(.square) .scrollable-row-nav{border-radius:10px}::ng-deep .column:has(.scrollable-row-shell){overflow:visible}@media (max-width: 767px){.scrollable-row-nav{display:none}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: UIComponentComponent, selector: "edm-sdui-component", inputs: ["uiComponent", "translateLabel"] }, { kind: "directive", type: UIViewDirective, selector: "[edmSduiView]", inputs: ["edmSduiView", "disableClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ScrollableRowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'edm-sdui-scrollable-row', standalone: false, template: "<div\n  #scrollableRowElement\n  [edmSduiView]=\"uiComponent.element\"\n  class=\"scrollable-row\"\n  *ngIf=\"uiComponent\"\n>\n  <edm-sdui-component\n    *ngFor=\"let component of uiComponent.components\"\n    [uiComponent]=\"component\"\n  >\n  </edm-sdui-component>\n</div>\n", styles: [":host{display:contents}.scrollable-row{display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden;white-space:nowrap;width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:pointer;scroll-padding-left:var(--sdui-content-inset-left, 0px);scroll-padding-right:var(--sdui-content-inset-right, 0px)}.scrollable-row::-webkit-scrollbar{display:none}.scrollable-row>*{flex-shrink:0}\n"] }]
+            args: [{ selector: 'edm-sdui-scrollable-row', standalone: false, template: "<div\n  class=\"scrollable-row-shell\"\n  [class.can-scroll]=\"canScroll\"\n  [class.track-scrolled]=\"canPrev\"\n  [class.track-at-end]=\"canScroll && !canNext\"\n  *ngIf=\"uiComponent\"\n>\n  <div\n    #scrollableRowElement\n    [edmSduiView]=\"uiComponent.element\"\n    class=\"scrollable-row\"\n    (scroll)=\"onTrackScroll()\"\n  >\n    <edm-sdui-component\n      *ngFor=\"let component of uiComponent.components\"\n      [uiComponent]=\"component\"\n    >\n    </edm-sdui-component>\n  </div>\n\n  <button\n    *ngIf=\"canScroll && canPrev\"\n    type=\"button\"\n    class=\"scrollable-row-nav scrollable-row-nav--prev\"\n    (click)=\"prev()\"\n    aria-label=\"Anterior\"\n  >\n    &#8592;\n  </button>\n  <button\n    *ngIf=\"canScroll && canNext\"\n    type=\"button\"\n    class=\"scrollable-row-nav scrollable-row-nav--next\"\n    (click)=\"next()\"\n    aria-label=\"Pr\u00F3ximo\"\n  >\n    &#8594;\n  </button>\n</div>\n", styles: [":host{display:contents}.scrollable-row-shell{position:relative;width:100%}.scrollable-row-shell:before,.scrollable-row-shell:after{content:\"\";position:absolute;top:0;bottom:0;width:clamp(1.5rem,4vw,2.625rem);pointer-events:none;z-index:4;opacity:0;transition:opacity .2s ease}.scrollable-row-shell:before{left:0;background:linear-gradient(90deg,var(--bg) 0%,transparent 100%)}.scrollable-row-shell:after{right:0;background:linear-gradient(270deg,var(--bg) 0%,transparent 100%)}.scrollable-row-shell.can-scroll:after{opacity:1}.scrollable-row-shell.track-scrolled:before{opacity:1}.scrollable-row-shell.track-at-end:after{opacity:0}.scrollable-row{display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden;white-space:nowrap;width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:pointer;scroll-behavior:smooth;scroll-padding-left:var(--sdui-content-inset-left, 0px);scroll-padding-right:var(--sdui-content-inset-right, 0px)}.scrollable-row::-webkit-scrollbar{display:none}.scrollable-row>*{flex-shrink:0}.scrollable-row-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:1px solid rgba(255,255,255,.34);background:#070a10c7;color:#f4f6fb;font-size:1.4rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;transition:opacity .18s ease,background-color .2s ease,border-color .2s ease}.scrollable-row-nav:hover,.scrollable-row-nav:focus{background:#121622e6;border-color:#ffffff8a;outline:none}.scrollable-row-nav--prev{left:-.75rem}.scrollable-row-nav--next{right:-.75rem}:host-context(.rounded) .scrollable-row-nav{border-radius:3.75rem}:host-context(.square) .scrollable-row-nav{border-radius:10px}::ng-deep .column:has(.scrollable-row-shell){overflow:visible}@media (max-width: 767px){.scrollable-row-nav{display:none}}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: ['uiComponent']
-                }] }, { type: i0.Renderer2 }], propDecorators: { scrollableRowElementRef: [{
+                }] }, { type: i0.Renderer2 }, { type: i0.NgZone }], propDecorators: { scrollableRowElementRef: [{
                 type: ViewChild,
                 args: ['scrollableRowElement']
             }] } });