@edm-sdui/sdui 1.0.68 → 1.0.69
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
Binary file
|
|
@@ -116,11 +116,11 @@ export class ScrollableRowComponent {
|
|
|
116
116
|
});
|
|
117
117
|
}
|
|
118
118
|
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 }); }
|
|
119
|
-
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 ←\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 →\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:
|
|
119
|
+
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 ←\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 →\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:48px;height:48px;border:1px solid rgba(255,255,255,.34);border-radius:9999px;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}::ng-deep .column:has(.scrollable-row-shell){overflow:visible}@media (max-width: 767px){.scrollable-row-nav{display:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.UIComponentComponent, selector: "edm-sdui-component", inputs: ["uiComponent", "translateLabel"] }, { kind: "directive", type: i3.UIViewDirective, selector: "[edmSduiView]", inputs: ["edmSduiView", "disableClick"] }] }); }
|
|
120
120
|
}
|
|
121
121
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ScrollableRowComponent, decorators: [{
|
|
122
122
|
type: Component,
|
|
123
|
-
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 ←\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 →\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:
|
|
123
|
+
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 ←\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 →\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:48px;height:48px;border:1px solid rgba(255,255,255,.34);border-radius:9999px;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}::ng-deep .column:has(.scrollable-row-shell){overflow:visible}@media (max-width: 767px){.scrollable-row-nav{display:none}}\n"] }]
|
|
124
124
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
125
125
|
type: Inject,
|
|
126
126
|
args: ['uiComponent']
|
|
@@ -4243,11 +4243,11 @@ class ScrollableRowComponent {
|
|
|
4243
4243
|
});
|
|
4244
4244
|
}
|
|
4245
4245
|
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 }); }
|
|
4246
|
-
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 ←\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 →\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:
|
|
4246
|
+
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 ←\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 →\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:48px;height:48px;border:1px solid rgba(255,255,255,.34);border-radius:9999px;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}::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"] }] }); }
|
|
4247
4247
|
}
|
|
4248
4248
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ScrollableRowComponent, decorators: [{
|
|
4249
4249
|
type: Component,
|
|
4250
|
-
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 ←\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 →\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:
|
|
4250
|
+
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 ←\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 →\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:48px;height:48px;border:1px solid rgba(255,255,255,.34);border-radius:9999px;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}::ng-deep .column:has(.scrollable-row-shell){overflow:visible}@media (max-width: 767px){.scrollable-row-nav{display:none}}\n"] }]
|
|
4251
4251
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4252
4252
|
type: Inject,
|
|
4253
4253
|
args: ['uiComponent']
|