@ethlete/cdk 4.3.1 → 4.3.2
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.
- package/CHANGELOG.md +10 -0
- package/esm2022/lib/components/overlay/components/overlay/services/overlay.service.mjs +2 -2
- package/esm2022/lib/components/overlay/components/overlay/types/overlay.types.mjs +1 -1
- package/esm2022/lib/components/overlay/components/overlay/utils/overlay-position-builder.mjs +7 -7
- package/esm2022/lib/components/scrollable/components/scrollable/scrollable.component.mjs +8 -7
- package/fesm2022/ethlete-cdk.mjs +13 -12
- package/fesm2022/ethlete-cdk.mjs.map +1 -1
- package/lib/components/overlay/components/overlay/types/overlay.types.d.ts +1 -1
- package/lib/components/overlay/components/overlay/utils/overlay-position-builder.d.ts +6 -6
- package/package.json +2 -2
package/fesm2022/ethlete-cdk.mjs
CHANGED
|
@@ -4431,7 +4431,7 @@ class OverlayPositionBuilder {
|
|
|
4431
4431
|
minHeight: undefined,
|
|
4432
4432
|
minWidth: undefined,
|
|
4433
4433
|
containerClass: ET_OVERLAY_DIALOG_CLASS,
|
|
4434
|
-
positionStrategy: this._overlay.position().global().centerHorizontally().centerVertically(),
|
|
4434
|
+
positionStrategy: () => this._overlay.position().global().centerHorizontally().centerVertically(),
|
|
4435
4435
|
},
|
|
4436
4436
|
fullScreenDialog: {
|
|
4437
4437
|
width: '100%',
|
|
@@ -4441,7 +4441,7 @@ class OverlayPositionBuilder {
|
|
|
4441
4441
|
minHeight: undefined,
|
|
4442
4442
|
minWidth: undefined,
|
|
4443
4443
|
containerClass: ET_OVERLAY_FULL_SCREEN_DIALOG_CLASS,
|
|
4444
|
-
positionStrategy: this._overlay.position().global().left('0').top('0').bottom('0').right('0'),
|
|
4444
|
+
positionStrategy: () => this._overlay.position().global().left('0').top('0').bottom('0').right('0'),
|
|
4445
4445
|
documentClass: 'et-overlay--full-screen-dialog-document',
|
|
4446
4446
|
applyTransformOrigin: true,
|
|
4447
4447
|
},
|
|
@@ -4453,7 +4453,7 @@ class OverlayPositionBuilder {
|
|
|
4453
4453
|
minHeight: undefined,
|
|
4454
4454
|
minWidth: undefined,
|
|
4455
4455
|
containerClass: ET_OVERLAY_BOTTOM_SHEET_CLASS,
|
|
4456
|
-
positionStrategy: this._overlay.position().global().centerHorizontally().bottom('0'),
|
|
4456
|
+
positionStrategy: () => this._overlay.position().global().centerHorizontally().bottom('0'),
|
|
4457
4457
|
dragToDismiss: {
|
|
4458
4458
|
direction: 'to-bottom',
|
|
4459
4459
|
},
|
|
@@ -4466,7 +4466,7 @@ class OverlayPositionBuilder {
|
|
|
4466
4466
|
minHeight: undefined,
|
|
4467
4467
|
minWidth: undefined,
|
|
4468
4468
|
containerClass: ET_OVERLAY_TOP_SHEET_CLASS,
|
|
4469
|
-
positionStrategy: this._overlay.position().global().centerHorizontally().top('0'),
|
|
4469
|
+
positionStrategy: () => this._overlay.position().global().centerHorizontally().top('0'),
|
|
4470
4470
|
dragToDismiss: {
|
|
4471
4471
|
direction: 'to-top',
|
|
4472
4472
|
},
|
|
@@ -4479,7 +4479,7 @@ class OverlayPositionBuilder {
|
|
|
4479
4479
|
minHeight: undefined,
|
|
4480
4480
|
minWidth: undefined,
|
|
4481
4481
|
containerClass: ET_OVERLAY_LEFT_SHEET_CLASS,
|
|
4482
|
-
positionStrategy: this._overlay.position().global().left('0').centerVertically(),
|
|
4482
|
+
positionStrategy: () => this._overlay.position().global().left('0').centerVertically(),
|
|
4483
4483
|
dragToDismiss: {
|
|
4484
4484
|
direction: 'to-left',
|
|
4485
4485
|
},
|
|
@@ -4492,7 +4492,7 @@ class OverlayPositionBuilder {
|
|
|
4492
4492
|
minHeight: undefined,
|
|
4493
4493
|
minWidth: undefined,
|
|
4494
4494
|
containerClass: ET_OVERLAY_RIGHT_SHEET_CLASS,
|
|
4495
|
-
positionStrategy: this._overlay.position().global().right('0').centerVertically(),
|
|
4495
|
+
positionStrategy: () => this._overlay.position().global().right('0').centerVertically(),
|
|
4496
4496
|
dragToDismiss: {
|
|
4497
4497
|
direction: 'to-right',
|
|
4498
4498
|
},
|
|
@@ -4956,7 +4956,7 @@ class OverlayService {
|
|
|
4956
4956
|
overlayRef.updatePosition(currConfig.position);
|
|
4957
4957
|
}
|
|
4958
4958
|
if (currConfig.positionStrategy) {
|
|
4959
|
-
cdkRef.overlayRef.updatePositionStrategy(currConfig.positionStrategy);
|
|
4959
|
+
cdkRef.overlayRef.updatePositionStrategy(currConfig.positionStrategy());
|
|
4960
4960
|
}
|
|
4961
4961
|
else {
|
|
4962
4962
|
cdkRef.overlayRef.updatePosition();
|
|
@@ -12187,7 +12187,7 @@ class ScrollableComponent {
|
|
|
12187
12187
|
this.lastElementIntersection = signalElementIntersection(this.lastElement, { root: this.scrollable });
|
|
12188
12188
|
this.lastElementVisibility = signal(null);
|
|
12189
12189
|
this.allScrollableChildren = signalElementChildren(this.scrollableContainer);
|
|
12190
|
-
this.scrollableChildren = computed(() => this.allScrollableChildren().filter((c) => !
|
|
12190
|
+
this.scrollableChildren = computed(() => this.allScrollableChildren().filter((c) => !isScrollableChildIgnored(c)));
|
|
12191
12191
|
this._disableSnapping$ = new Subject();
|
|
12192
12192
|
this.scrollableContentIntersections = signalElementIntersection(this.scrollableChildren, {
|
|
12193
12193
|
root: this.scrollable,
|
|
@@ -12296,11 +12296,11 @@ class ScrollableComponent {
|
|
|
12296
12296
|
if (!firstVisibleElement) {
|
|
12297
12297
|
return;
|
|
12298
12298
|
}
|
|
12299
|
-
const
|
|
12299
|
+
const initialNavigationItems = elementList.map((e) => ({
|
|
12300
12300
|
isActive: e === firstVisibleElement,
|
|
12301
12301
|
element: e,
|
|
12302
12302
|
}));
|
|
12303
|
-
this._initialScrollableNavigation.set(
|
|
12303
|
+
this._initialScrollableNavigation.set(initialNavigationItems);
|
|
12304
12304
|
}, { allowSignalWrites: true });
|
|
12305
12305
|
effect(() => {
|
|
12306
12306
|
const isAtStart = this.isAtStart();
|
|
@@ -12582,7 +12582,7 @@ class ScrollableComponent {
|
|
|
12582
12582
|
this._disableSnapping$.next();
|
|
12583
12583
|
}
|
|
12584
12584
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: ScrollableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12585
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: ScrollableComponent, isStandalone: true, selector: "et-scrollable", inputs: { _itemSize: ["itemSize", "_itemSize"], _direction: ["direction", "_direction"], _scrollableRole: ["scrollableRole", "_scrollableRole"], _scrollableClass: ["scrollableClass", "_scrollableClass"], _renderNavigation: ["renderNavigation", "_renderNavigation", booleanAttribute], _renderMasks: ["renderMasks", "_renderMasks", booleanAttribute], _renderButtons: ["renderButtons", "_renderButtons", booleanAttribute], _renderScrollbars: ["renderScrollbars", "_renderScrollbars", booleanAttribute], _stickyButtons: ["stickyButtons", "_stickyButtons", booleanAttribute], _cursorDragScroll: ["cursorDragScroll", "_cursorDragScroll", booleanAttribute], _disableActiveElementScrolling: ["disableActiveElementScrolling", "_disableActiveElementScrolling", booleanAttribute], _scrollMode: ["scrollMode", "_scrollMode"], _snap: ["snap", "_snap", booleanAttribute], _scrollMargin: ["scrollMargin", "_scrollMargin", numberAttribute] }, outputs: { scrollStateChange: "scrollStateChange", intersectionChange: "intersectionChange" }, host: { classAttribute: "et-scrollable" }, queries: [{ propertyName: "_activeElementList", predicate: SCROLLABLE_IS_ACTIVE_CHILD_TOKEN, descendants: true }], viewQueries: [{ propertyName: "_scrollable", first: true, predicate: ["scrollable"], descendants: true, static: true }, { propertyName: "_scrollableContainer", first: true, predicate: ["scrollableContainer"], descendants: true, static: true }, { propertyName: "_firstElement", first: true, predicate: ["firstElement"], descendants: true, static: true }, { propertyName: "_lastElement", first: true, predicate: ["lastElement"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"et-scrollable-wrapper\">\n <div\n #scrollable\n [attr.role]=\"scrollableRole() ?? undefined\"\n [etCursorDragScroll]=\"cursorDragScroll()\"\n [allowedDirection]=\"direction()\"\n (cursorDragStart)=\"setIsCursorDragging(true)\"\n (cursorDragEnd)=\"setIsCursorDragging(false)\"\n class=\"et-scrollable-container-outer\"\n >\n <div #scrollableContainer [ngClass]=\"scrollableClass()\" class=\"et-scrollable-container\">\n <div #firstElement class=\"et-scroll-observer-first-element\" etScrollableIgnoreChild></div>\n <ng-content />\n <div #lastElement class=\"et-scroll-observer-last-element\" etScrollableIgnoreChild></div>\n </div>\n </div>\n\n @if (renderMasks()) {\n <div class=\"et-scrollable-masks\">\n <div class=\"et-scrollable-mask et-scrollable-mask--start\"></div>\n <div class=\"et-scrollable-mask et-scrollable-mask--end\"></div>\n </div>\n }\n\n @if (renderButtons()) {\n <div class=\"et-scrollable-buttons\">\n <button\n (click)=\"scrollToStartDirection()\"\n class=\"et-scrollable-button et-scrollable-button--start\"\n aria-hidden=\"true\"\n type=\"button\"\n tabindex=\"-1\"\n >\n <et-chevron-icon />\n </button>\n <button\n (click)=\"scrollToEndDirection()\"\n class=\"et-scrollable-button et-scrollable-button--end\"\n aria-hidden=\"true\"\n type=\"button\"\n tabindex=\"-1\"\n >\n <et-chevron-icon />\n </button>\n </div>\n }\n</div>\n\n@if (renderNavigation()) {\n <div class=\"et-scrollable-navigation\" aria-hidden=\"true\">\n @for (item of scrollableNavigation(); track i; let i = $index) {\n <button\n [class.et-scrollable-navigation-item--active]=\"item.isActive\"\n (click)=\"scrollToElementViaNavigation(i, item.element)\"\n class=\"et-scrollable-navigation-item\"\n ></button>\n }\n </div>\n}\n", styles: [".et-scrollable{--mask: #121212 0, transparent 100%;--mask-size: 25px;--_auto-size: min-content;--_flow: column;display:block}.et-scrollable .et-scrollable-wrapper{display:grid;position:relative}.et-scrollable[item-size=same]{--_auto-size: 1fr}.et-scrollable[item-size=full]{--_auto-size: 100%}.et-scrollable[render-scrollbars=false] .et-scrollable-container-outer{scrollbar-width:none}.et-scrollable[render-scrollbars=false] .et-scrollable-container-outer::-webkit-scrollbar{display:none}.et-scrollable[direction=horizontal] .et-scrollable-container-outer{overflow-x:auto;overflow-y:hidden}.et-scrollable[direction=horizontal] .et-scrollable-container{grid-auto-columns:var(--_auto-size)}.et-scrollable[direction=horizontal] .et-scrollable-mask,.et-scrollable[direction=horizontal] .et-scrollable-button{inline-size:var(--mask-size);block-size:100%}.et-scrollable[direction=horizontal] .et-scrollable-mask--start,.et-scrollable[direction=horizontal] .et-scrollable-button--start{inset-block-start:0;inset-inline:0 0}.et-scrollable[direction=horizontal] .et-scrollable-mask--end,.et-scrollable[direction=horizontal] .et-scrollable-button--end{inset-block-start:0;inset-inline:calc(100% - 40px) 0}.et-scrollable[direction=horizontal] .et-scrollable-mask--start{background:linear-gradient(to right,var(--mask))}.et-scrollable[direction=horizontal] .et-scrollable-mask--end{background:linear-gradient(to left,var(--mask));inset-inline:calc(100% - var(--mask-size)) 100%}.et-scrollable[direction=horizontal] .et-scrollable-button--start{inset-block-start:calc(50% - 20px);transform:rotate(-90deg)}.et-scrollable[direction=horizontal] .et-scrollable-button--end{inset-block-start:calc(50% - 20px);transform:rotate(90deg)}.et-scrollable[direction=vertical]{--_flow: row}.et-scrollable[direction=vertical] .et-scrollable-container-outer{overflow-x:hidden;overflow-y:auto}.et-scrollable[direction=vertical] .et-scrollable-container{grid-auto-rows:var(--_auto-size)}.et-scrollable[direction=vertical] .et-scrollable-mask,.et-scrollable[direction=vertical] .et-scrollable-button{block-size:var(--mask-size);inline-size:100%}.et-scrollable[direction=vertical] .et-scrollable-mask--start,.et-scrollable[direction=vertical] .et-scrollable-button--start{inset-block-start:0;inset-inline-start:0}.et-scrollable[direction=vertical] .et-scrollable-mask--end,.et-scrollable[direction=vertical] .et-scrollable-button--end{inset-block-end:0;inset-inline-start:0}.et-scrollable[direction=vertical] .et-scrollable-mask--start{background:linear-gradient(to bottom,var(--mask))}.et-scrollable[direction=vertical] .et-scrollable-mask--end{background:linear-gradient(to top,var(--mask))}.et-scrollable[direction=vertical] .et-scrollable-button--start{inset-inline-start:calc(50% - 20px);transform:rotate(0)}.et-scrollable[direction=vertical] .et-scrollable-button--end{inset-inline-start:calc(50% - 20px);transform:rotate(180deg)}.et-scrollable:not(.et-scrollable--is-at-start) .et-scrollable-masks .et-scrollable-mask--start,.et-scrollable:not(.et-scrollable--is-at-start) .et-scrollable-buttons .et-scrollable-button--start{opacity:1}.et-scrollable:not(.et-scrollable--is-at-start) .et-scrollable-buttons .et-scrollable-button--start{pointer-events:all}.et-scrollable:not(.et-scrollable--is-at-end) .et-scrollable-masks .et-scrollable-mask--end,.et-scrollable:not(.et-scrollable--is-at-end) .et-scrollable-buttons .et-scrollable-button--end{opacity:1}.et-scrollable:not(.et-scrollable--is-at-end) .et-scrollable-buttons .et-scrollable-button--end{pointer-events:all}.et-scrollable .et-scrollable-container-outer{overflow:auto;display:grid;position:relative;grid-row:1/1;grid-column:1/1}.et-scrollable .et-scroll-observer-first-element,.et-scrollable .et-scroll-observer-last-element{position:absolute;block-size:100%;inline-size:1px;pointer-events:none}.et-scrollable .et-scroll-observer-first-element{inset-inline-start:1px}.et-scrollable .et-scroll-observer-last-element{inset-inline-end:1px}.et-scrollable .et-scrollable-container{display:grid;grid-auto-flow:var(--_flow);position:relative}.et-scrollable .et-scrollable-masks,.et-scrollable .et-scrollable-buttons{grid-row:1/1;grid-column:1/1;pointer-events:none}.et-scrollable .et-scrollable-masks .et-scrollable-mask,.et-scrollable .et-scrollable-masks .et-scrollable-button,.et-scrollable .et-scrollable-buttons .et-scrollable-mask,.et-scrollable .et-scrollable-buttons .et-scrollable-button{position:absolute;opacity:0}.et-scrollable.et-scrollable--can-scroll.et-scrollable--enable-overlay-animations .et-scrollable-mask,.et-scrollable.et-scrollable--can-scroll.et-scrollable--enable-overlay-animations .et-scrollable-button{transition:opacity .3s var(--ease-5)}.et-scrollable .et-scrollable-buttons .et-scrollable-button{background:transparent;border:none;padding:12px;inline-size:40px;block-size:40px;border-radius:4px;cursor:pointer}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-chevron-icon{pointer-events:none}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-scrollable-button--start{inset-inline:0 0}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-scrollable-button--end{inset-inline:calc(100% - 40px) 0}.et-scrollable[sticky-buttons=true]{--_sticky-margin: 10%}.et-scrollable[sticky-buttons=true] .et-scrollable-button{position:sticky}.et-scrollable[sticky-buttons=true][direction=horizontal] .et-scrollable-buttons{margin-block:var(--_sticky-margin)}.et-scrollable[sticky-buttons=true][direction=vertical] .et-scrollable-buttons{margin-inline:var(--_sticky-margin)}.et-scrollable[sticky-buttons=true][direction=vertical] .et-scrollable-buttons .et-scrollable-button--end{inset-block-start:100%}.et-scrollable .et-scrollable-navigation{display:flex;justify-content:center;gap:10px;margin-block-start:10px}.et-scrollable .et-scrollable-navigation .et-scrollable-navigation-item{all:unset;inline-size:10px;block-size:10px;display:block;background-color:#4b4b4b;border-radius:50%;cursor:pointer}.et-scrollable .et-scrollable-navigation .et-scrollable-navigation-item.et-scrollable-navigation-item--active{background-color:#c6c6c6}\n"], dependencies: [{ kind: "directive", type: CursorDragScrollDirective, selector: "[etCursorDragScroll]", inputs: ["etCursorDragScroll", "allowedDirection"], outputs: ["cursorDragStart", "cursorDragMove", "cursorDragEnd"], exportAs: ["etCursorDragScroll"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ChevronIconComponent, selector: "et-chevron-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
12585
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: ScrollableComponent, isStandalone: true, selector: "et-scrollable", inputs: { _itemSize: ["itemSize", "_itemSize"], _direction: ["direction", "_direction"], _scrollableRole: ["scrollableRole", "_scrollableRole"], _scrollableClass: ["scrollableClass", "_scrollableClass"], _renderNavigation: ["renderNavigation", "_renderNavigation", booleanAttribute], _renderMasks: ["renderMasks", "_renderMasks", booleanAttribute], _renderButtons: ["renderButtons", "_renderButtons", booleanAttribute], _renderScrollbars: ["renderScrollbars", "_renderScrollbars", booleanAttribute], _stickyButtons: ["stickyButtons", "_stickyButtons", booleanAttribute], _cursorDragScroll: ["cursorDragScroll", "_cursorDragScroll", booleanAttribute], _disableActiveElementScrolling: ["disableActiveElementScrolling", "_disableActiveElementScrolling", booleanAttribute], _scrollMode: ["scrollMode", "_scrollMode"], _snap: ["snap", "_snap", booleanAttribute], _scrollMargin: ["scrollMargin", "_scrollMargin", numberAttribute] }, outputs: { scrollStateChange: "scrollStateChange", intersectionChange: "intersectionChange" }, host: { classAttribute: "et-scrollable" }, queries: [{ propertyName: "_activeElementList", predicate: SCROLLABLE_IS_ACTIVE_CHILD_TOKEN, descendants: true }], viewQueries: [{ propertyName: "_scrollable", first: true, predicate: ["scrollable"], descendants: true, static: true }, { propertyName: "_scrollableContainer", first: true, predicate: ["scrollableContainer"], descendants: true, static: true }, { propertyName: "_firstElement", first: true, predicate: ["firstElement"], descendants: true, static: true }, { propertyName: "_lastElement", first: true, predicate: ["lastElement"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"et-scrollable-wrapper\">\n <div\n #scrollable\n [attr.role]=\"scrollableRole() ?? undefined\"\n [etCursorDragScroll]=\"cursorDragScroll()\"\n [allowedDirection]=\"direction()\"\n (cursorDragStart)=\"setIsCursorDragging(true)\"\n (cursorDragEnd)=\"setIsCursorDragging(false)\"\n class=\"et-scrollable-container-outer\"\n >\n <div #scrollableContainer [ngClass]=\"scrollableClass()\" class=\"et-scrollable-container\">\n <div #firstElement class=\"et-scroll-observer-first-element\" etScrollableIgnoreChild></div>\n <ng-content />\n <div #lastElement class=\"et-scroll-observer-last-element\" etScrollableIgnoreChild></div>\n </div>\n </div>\n\n @if (renderMasks()) {\n <div class=\"et-scrollable-masks\">\n <div class=\"et-scrollable-mask et-scrollable-mask--start\"></div>\n <div class=\"et-scrollable-mask et-scrollable-mask--end\"></div>\n </div>\n }\n\n @if (renderButtons()) {\n <div class=\"et-scrollable-buttons\">\n <button\n (click)=\"scrollToStartDirection()\"\n class=\"et-scrollable-button et-scrollable-button--start\"\n aria-hidden=\"true\"\n type=\"button\"\n tabindex=\"-1\"\n >\n <et-chevron-icon />\n </button>\n <button\n (click)=\"scrollToEndDirection()\"\n class=\"et-scrollable-button et-scrollable-button--end\"\n aria-hidden=\"true\"\n type=\"button\"\n tabindex=\"-1\"\n >\n <et-chevron-icon />\n </button>\n </div>\n }\n</div>\n\n@if (renderNavigation()) {\n <div class=\"et-scrollable-navigation\" aria-hidden=\"true\">\n @for (item of scrollableNavigation(); track i; let i = $index) {\n <button\n [class.et-scrollable-navigation-item--active]=\"item.isActive\"\n (click)=\"scrollToElementViaNavigation(i, item.element)\"\n class=\"et-scrollable-navigation-item\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n ></button>\n }\n </div>\n}\n", styles: [".et-scrollable{--mask: #121212 0, transparent 100%;--mask-size: 25px;--_auto-size: min-content;--_flow: column;display:block}.et-scrollable .et-scrollable-wrapper{display:grid;position:relative}.et-scrollable[item-size=same]{--_auto-size: 1fr}.et-scrollable[item-size=full]{--_auto-size: 100%}.et-scrollable[render-scrollbars=false] .et-scrollable-container-outer{scrollbar-width:none}.et-scrollable[render-scrollbars=false] .et-scrollable-container-outer::-webkit-scrollbar{display:none}.et-scrollable[direction=horizontal] .et-scrollable-container-outer{overflow-x:auto;overflow-y:hidden}.et-scrollable[direction=horizontal] .et-scrollable-container{grid-auto-columns:var(--_auto-size)}.et-scrollable[direction=horizontal] .et-scrollable-mask,.et-scrollable[direction=horizontal] .et-scrollable-button{inline-size:var(--mask-size);block-size:100%}.et-scrollable[direction=horizontal] .et-scrollable-mask--start,.et-scrollable[direction=horizontal] .et-scrollable-button--start{inset-block-start:0;inset-inline:0 0}.et-scrollable[direction=horizontal] .et-scrollable-mask--end,.et-scrollable[direction=horizontal] .et-scrollable-button--end{inset-block-start:0;inset-inline:calc(100% - 40px) 0}.et-scrollable[direction=horizontal] .et-scrollable-mask--start{background:linear-gradient(to right,var(--mask))}.et-scrollable[direction=horizontal] .et-scrollable-mask--end{background:linear-gradient(to left,var(--mask));inset-inline:calc(100% - var(--mask-size)) 100%}.et-scrollable[direction=horizontal] .et-scrollable-button--start{inset-block-start:calc(50% - 20px);transform:rotate(-90deg)}.et-scrollable[direction=horizontal] .et-scrollable-button--end{inset-block-start:calc(50% - 20px);transform:rotate(90deg)}.et-scrollable[direction=vertical]{--_flow: row}.et-scrollable[direction=vertical] .et-scrollable-container-outer{overflow-x:hidden;overflow-y:auto}.et-scrollable[direction=vertical] .et-scrollable-container{grid-auto-rows:var(--_auto-size)}.et-scrollable[direction=vertical] .et-scrollable-mask,.et-scrollable[direction=vertical] .et-scrollable-button{block-size:var(--mask-size);inline-size:100%}.et-scrollable[direction=vertical] .et-scrollable-mask--start,.et-scrollable[direction=vertical] .et-scrollable-button--start{inset-block-start:0;inset-inline-start:0}.et-scrollable[direction=vertical] .et-scrollable-mask--end,.et-scrollable[direction=vertical] .et-scrollable-button--end{inset-block-end:0;inset-inline-start:0}.et-scrollable[direction=vertical] .et-scrollable-mask--start{background:linear-gradient(to bottom,var(--mask))}.et-scrollable[direction=vertical] .et-scrollable-mask--end{background:linear-gradient(to top,var(--mask))}.et-scrollable[direction=vertical] .et-scrollable-button--start{inset-inline-start:calc(50% - 20px);transform:rotate(0)}.et-scrollable[direction=vertical] .et-scrollable-button--end{inset-inline-start:calc(50% - 20px);transform:rotate(180deg)}.et-scrollable:not(.et-scrollable--is-at-start) .et-scrollable-masks .et-scrollable-mask--start,.et-scrollable:not(.et-scrollable--is-at-start) .et-scrollable-buttons .et-scrollable-button--start{opacity:1}.et-scrollable:not(.et-scrollable--is-at-start) .et-scrollable-buttons .et-scrollable-button--start{pointer-events:all}.et-scrollable:not(.et-scrollable--is-at-end) .et-scrollable-masks .et-scrollable-mask--end,.et-scrollable:not(.et-scrollable--is-at-end) .et-scrollable-buttons .et-scrollable-button--end{opacity:1}.et-scrollable:not(.et-scrollable--is-at-end) .et-scrollable-buttons .et-scrollable-button--end{pointer-events:all}.et-scrollable .et-scrollable-container-outer{overflow:auto;display:grid;position:relative;grid-row:1/1;grid-column:1/1}.et-scrollable .et-scroll-observer-first-element,.et-scrollable .et-scroll-observer-last-element{position:absolute;block-size:100%;inline-size:1px;pointer-events:none}.et-scrollable .et-scroll-observer-first-element{inset-inline-start:1px}.et-scrollable .et-scroll-observer-last-element{inset-inline-end:1px}.et-scrollable .et-scrollable-container{display:grid;grid-auto-flow:var(--_flow);position:relative}.et-scrollable .et-scrollable-masks,.et-scrollable .et-scrollable-buttons{grid-row:1/1;grid-column:1/1;pointer-events:none}.et-scrollable .et-scrollable-masks .et-scrollable-mask,.et-scrollable .et-scrollable-masks .et-scrollable-button,.et-scrollable .et-scrollable-buttons .et-scrollable-mask,.et-scrollable .et-scrollable-buttons .et-scrollable-button{position:absolute;opacity:0}.et-scrollable.et-scrollable--can-scroll.et-scrollable--enable-overlay-animations .et-scrollable-mask,.et-scrollable.et-scrollable--can-scroll.et-scrollable--enable-overlay-animations .et-scrollable-button{transition:opacity .3s var(--ease-5)}.et-scrollable .et-scrollable-buttons .et-scrollable-button{background:transparent;border:none;padding:12px;inline-size:40px;block-size:40px;border-radius:4px;cursor:pointer}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-chevron-icon{pointer-events:none}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-scrollable-button--start{inset-inline:0 0}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-scrollable-button--end{inset-inline:calc(100% - 40px) 0}.et-scrollable[sticky-buttons=true]{--_sticky-margin: 10%}.et-scrollable[sticky-buttons=true] .et-scrollable-button{position:sticky}.et-scrollable[sticky-buttons=true][direction=horizontal] .et-scrollable-buttons{margin-block:var(--_sticky-margin)}.et-scrollable[sticky-buttons=true][direction=vertical] .et-scrollable-buttons{margin-inline:var(--_sticky-margin)}.et-scrollable[sticky-buttons=true][direction=vertical] .et-scrollable-buttons .et-scrollable-button--end{inset-block-start:100%}.et-scrollable .et-scrollable-navigation{display:flex;justify-content:center;gap:10px;margin-block-start:10px}.et-scrollable .et-scrollable-navigation .et-scrollable-navigation-item{all:unset;inline-size:10px;block-size:10px;display:block;background-color:#4b4b4b;border-radius:50%;cursor:pointer}.et-scrollable .et-scrollable-navigation .et-scrollable-navigation-item.et-scrollable-navigation-item--active{background-color:#c6c6c6}\n"], dependencies: [{ kind: "directive", type: CursorDragScrollDirective, selector: "[etCursorDragScroll]", inputs: ["etCursorDragScroll", "allowedDirection"], outputs: ["cursorDragStart", "cursorDragMove", "cursorDragEnd"], exportAs: ["etCursorDragScroll"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ChevronIconComponent, selector: "et-chevron-icon" }, { kind: "directive", type: ScrollableIgnoreChildDirective, selector: "[etScrollableIgnoreChild]", inputs: ["etScrollableIgnoreChild"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
12586
12586
|
}
|
|
12587
12587
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: ScrollableComponent, decorators: [{
|
|
12588
12588
|
type: Component,
|
|
@@ -12593,9 +12593,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
|
|
|
12593
12593
|
LetDirective,
|
|
12594
12594
|
ChevronIconComponent,
|
|
12595
12595
|
ScrollableIsActiveChildDirective,
|
|
12596
|
+
ScrollableIgnoreChildDirective,
|
|
12596
12597
|
], host: {
|
|
12597
12598
|
class: 'et-scrollable',
|
|
12598
|
-
}, template: "<div class=\"et-scrollable-wrapper\">\n <div\n #scrollable\n [attr.role]=\"scrollableRole() ?? undefined\"\n [etCursorDragScroll]=\"cursorDragScroll()\"\n [allowedDirection]=\"direction()\"\n (cursorDragStart)=\"setIsCursorDragging(true)\"\n (cursorDragEnd)=\"setIsCursorDragging(false)\"\n class=\"et-scrollable-container-outer\"\n >\n <div #scrollableContainer [ngClass]=\"scrollableClass()\" class=\"et-scrollable-container\">\n <div #firstElement class=\"et-scroll-observer-first-element\" etScrollableIgnoreChild></div>\n <ng-content />\n <div #lastElement class=\"et-scroll-observer-last-element\" etScrollableIgnoreChild></div>\n </div>\n </div>\n\n @if (renderMasks()) {\n <div class=\"et-scrollable-masks\">\n <div class=\"et-scrollable-mask et-scrollable-mask--start\"></div>\n <div class=\"et-scrollable-mask et-scrollable-mask--end\"></div>\n </div>\n }\n\n @if (renderButtons()) {\n <div class=\"et-scrollable-buttons\">\n <button\n (click)=\"scrollToStartDirection()\"\n class=\"et-scrollable-button et-scrollable-button--start\"\n aria-hidden=\"true\"\n type=\"button\"\n tabindex=\"-1\"\n >\n <et-chevron-icon />\n </button>\n <button\n (click)=\"scrollToEndDirection()\"\n class=\"et-scrollable-button et-scrollable-button--end\"\n aria-hidden=\"true\"\n type=\"button\"\n tabindex=\"-1\"\n >\n <et-chevron-icon />\n </button>\n </div>\n }\n</div>\n\n@if (renderNavigation()) {\n <div class=\"et-scrollable-navigation\" aria-hidden=\"true\">\n @for (item of scrollableNavigation(); track i; let i = $index) {\n <button\n [class.et-scrollable-navigation-item--active]=\"item.isActive\"\n (click)=\"scrollToElementViaNavigation(i, item.element)\"\n class=\"et-scrollable-navigation-item\"\n ></button>\n }\n </div>\n}\n", styles: [".et-scrollable{--mask: #121212 0, transparent 100%;--mask-size: 25px;--_auto-size: min-content;--_flow: column;display:block}.et-scrollable .et-scrollable-wrapper{display:grid;position:relative}.et-scrollable[item-size=same]{--_auto-size: 1fr}.et-scrollable[item-size=full]{--_auto-size: 100%}.et-scrollable[render-scrollbars=false] .et-scrollable-container-outer{scrollbar-width:none}.et-scrollable[render-scrollbars=false] .et-scrollable-container-outer::-webkit-scrollbar{display:none}.et-scrollable[direction=horizontal] .et-scrollable-container-outer{overflow-x:auto;overflow-y:hidden}.et-scrollable[direction=horizontal] .et-scrollable-container{grid-auto-columns:var(--_auto-size)}.et-scrollable[direction=horizontal] .et-scrollable-mask,.et-scrollable[direction=horizontal] .et-scrollable-button{inline-size:var(--mask-size);block-size:100%}.et-scrollable[direction=horizontal] .et-scrollable-mask--start,.et-scrollable[direction=horizontal] .et-scrollable-button--start{inset-block-start:0;inset-inline:0 0}.et-scrollable[direction=horizontal] .et-scrollable-mask--end,.et-scrollable[direction=horizontal] .et-scrollable-button--end{inset-block-start:0;inset-inline:calc(100% - 40px) 0}.et-scrollable[direction=horizontal] .et-scrollable-mask--start{background:linear-gradient(to right,var(--mask))}.et-scrollable[direction=horizontal] .et-scrollable-mask--end{background:linear-gradient(to left,var(--mask));inset-inline:calc(100% - var(--mask-size)) 100%}.et-scrollable[direction=horizontal] .et-scrollable-button--start{inset-block-start:calc(50% - 20px);transform:rotate(-90deg)}.et-scrollable[direction=horizontal] .et-scrollable-button--end{inset-block-start:calc(50% - 20px);transform:rotate(90deg)}.et-scrollable[direction=vertical]{--_flow: row}.et-scrollable[direction=vertical] .et-scrollable-container-outer{overflow-x:hidden;overflow-y:auto}.et-scrollable[direction=vertical] .et-scrollable-container{grid-auto-rows:var(--_auto-size)}.et-scrollable[direction=vertical] .et-scrollable-mask,.et-scrollable[direction=vertical] .et-scrollable-button{block-size:var(--mask-size);inline-size:100%}.et-scrollable[direction=vertical] .et-scrollable-mask--start,.et-scrollable[direction=vertical] .et-scrollable-button--start{inset-block-start:0;inset-inline-start:0}.et-scrollable[direction=vertical] .et-scrollable-mask--end,.et-scrollable[direction=vertical] .et-scrollable-button--end{inset-block-end:0;inset-inline-start:0}.et-scrollable[direction=vertical] .et-scrollable-mask--start{background:linear-gradient(to bottom,var(--mask))}.et-scrollable[direction=vertical] .et-scrollable-mask--end{background:linear-gradient(to top,var(--mask))}.et-scrollable[direction=vertical] .et-scrollable-button--start{inset-inline-start:calc(50% - 20px);transform:rotate(0)}.et-scrollable[direction=vertical] .et-scrollable-button--end{inset-inline-start:calc(50% - 20px);transform:rotate(180deg)}.et-scrollable:not(.et-scrollable--is-at-start) .et-scrollable-masks .et-scrollable-mask--start,.et-scrollable:not(.et-scrollable--is-at-start) .et-scrollable-buttons .et-scrollable-button--start{opacity:1}.et-scrollable:not(.et-scrollable--is-at-start) .et-scrollable-buttons .et-scrollable-button--start{pointer-events:all}.et-scrollable:not(.et-scrollable--is-at-end) .et-scrollable-masks .et-scrollable-mask--end,.et-scrollable:not(.et-scrollable--is-at-end) .et-scrollable-buttons .et-scrollable-button--end{opacity:1}.et-scrollable:not(.et-scrollable--is-at-end) .et-scrollable-buttons .et-scrollable-button--end{pointer-events:all}.et-scrollable .et-scrollable-container-outer{overflow:auto;display:grid;position:relative;grid-row:1/1;grid-column:1/1}.et-scrollable .et-scroll-observer-first-element,.et-scrollable .et-scroll-observer-last-element{position:absolute;block-size:100%;inline-size:1px;pointer-events:none}.et-scrollable .et-scroll-observer-first-element{inset-inline-start:1px}.et-scrollable .et-scroll-observer-last-element{inset-inline-end:1px}.et-scrollable .et-scrollable-container{display:grid;grid-auto-flow:var(--_flow);position:relative}.et-scrollable .et-scrollable-masks,.et-scrollable .et-scrollable-buttons{grid-row:1/1;grid-column:1/1;pointer-events:none}.et-scrollable .et-scrollable-masks .et-scrollable-mask,.et-scrollable .et-scrollable-masks .et-scrollable-button,.et-scrollable .et-scrollable-buttons .et-scrollable-mask,.et-scrollable .et-scrollable-buttons .et-scrollable-button{position:absolute;opacity:0}.et-scrollable.et-scrollable--can-scroll.et-scrollable--enable-overlay-animations .et-scrollable-mask,.et-scrollable.et-scrollable--can-scroll.et-scrollable--enable-overlay-animations .et-scrollable-button{transition:opacity .3s var(--ease-5)}.et-scrollable .et-scrollable-buttons .et-scrollable-button{background:transparent;border:none;padding:12px;inline-size:40px;block-size:40px;border-radius:4px;cursor:pointer}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-chevron-icon{pointer-events:none}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-scrollable-button--start{inset-inline:0 0}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-scrollable-button--end{inset-inline:calc(100% - 40px) 0}.et-scrollable[sticky-buttons=true]{--_sticky-margin: 10%}.et-scrollable[sticky-buttons=true] .et-scrollable-button{position:sticky}.et-scrollable[sticky-buttons=true][direction=horizontal] .et-scrollable-buttons{margin-block:var(--_sticky-margin)}.et-scrollable[sticky-buttons=true][direction=vertical] .et-scrollable-buttons{margin-inline:var(--_sticky-margin)}.et-scrollable[sticky-buttons=true][direction=vertical] .et-scrollable-buttons .et-scrollable-button--end{inset-block-start:100%}.et-scrollable .et-scrollable-navigation{display:flex;justify-content:center;gap:10px;margin-block-start:10px}.et-scrollable .et-scrollable-navigation .et-scrollable-navigation-item{all:unset;inline-size:10px;block-size:10px;display:block;background-color:#4b4b4b;border-radius:50%;cursor:pointer}.et-scrollable .et-scrollable-navigation .et-scrollable-navigation-item.et-scrollable-navigation-item--active{background-color:#c6c6c6}\n"] }]
|
|
12599
|
+
}, template: "<div class=\"et-scrollable-wrapper\">\n <div\n #scrollable\n [attr.role]=\"scrollableRole() ?? undefined\"\n [etCursorDragScroll]=\"cursorDragScroll()\"\n [allowedDirection]=\"direction()\"\n (cursorDragStart)=\"setIsCursorDragging(true)\"\n (cursorDragEnd)=\"setIsCursorDragging(false)\"\n class=\"et-scrollable-container-outer\"\n >\n <div #scrollableContainer [ngClass]=\"scrollableClass()\" class=\"et-scrollable-container\">\n <div #firstElement class=\"et-scroll-observer-first-element\" etScrollableIgnoreChild></div>\n <ng-content />\n <div #lastElement class=\"et-scroll-observer-last-element\" etScrollableIgnoreChild></div>\n </div>\n </div>\n\n @if (renderMasks()) {\n <div class=\"et-scrollable-masks\">\n <div class=\"et-scrollable-mask et-scrollable-mask--start\"></div>\n <div class=\"et-scrollable-mask et-scrollable-mask--end\"></div>\n </div>\n }\n\n @if (renderButtons()) {\n <div class=\"et-scrollable-buttons\">\n <button\n (click)=\"scrollToStartDirection()\"\n class=\"et-scrollable-button et-scrollable-button--start\"\n aria-hidden=\"true\"\n type=\"button\"\n tabindex=\"-1\"\n >\n <et-chevron-icon />\n </button>\n <button\n (click)=\"scrollToEndDirection()\"\n class=\"et-scrollable-button et-scrollable-button--end\"\n aria-hidden=\"true\"\n type=\"button\"\n tabindex=\"-1\"\n >\n <et-chevron-icon />\n </button>\n </div>\n }\n</div>\n\n@if (renderNavigation()) {\n <div class=\"et-scrollable-navigation\" aria-hidden=\"true\">\n @for (item of scrollableNavigation(); track i; let i = $index) {\n <button\n [class.et-scrollable-navigation-item--active]=\"item.isActive\"\n (click)=\"scrollToElementViaNavigation(i, item.element)\"\n class=\"et-scrollable-navigation-item\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n ></button>\n }\n </div>\n}\n", styles: [".et-scrollable{--mask: #121212 0, transparent 100%;--mask-size: 25px;--_auto-size: min-content;--_flow: column;display:block}.et-scrollable .et-scrollable-wrapper{display:grid;position:relative}.et-scrollable[item-size=same]{--_auto-size: 1fr}.et-scrollable[item-size=full]{--_auto-size: 100%}.et-scrollable[render-scrollbars=false] .et-scrollable-container-outer{scrollbar-width:none}.et-scrollable[render-scrollbars=false] .et-scrollable-container-outer::-webkit-scrollbar{display:none}.et-scrollable[direction=horizontal] .et-scrollable-container-outer{overflow-x:auto;overflow-y:hidden}.et-scrollable[direction=horizontal] .et-scrollable-container{grid-auto-columns:var(--_auto-size)}.et-scrollable[direction=horizontal] .et-scrollable-mask,.et-scrollable[direction=horizontal] .et-scrollable-button{inline-size:var(--mask-size);block-size:100%}.et-scrollable[direction=horizontal] .et-scrollable-mask--start,.et-scrollable[direction=horizontal] .et-scrollable-button--start{inset-block-start:0;inset-inline:0 0}.et-scrollable[direction=horizontal] .et-scrollable-mask--end,.et-scrollable[direction=horizontal] .et-scrollable-button--end{inset-block-start:0;inset-inline:calc(100% - 40px) 0}.et-scrollable[direction=horizontal] .et-scrollable-mask--start{background:linear-gradient(to right,var(--mask))}.et-scrollable[direction=horizontal] .et-scrollable-mask--end{background:linear-gradient(to left,var(--mask));inset-inline:calc(100% - var(--mask-size)) 100%}.et-scrollable[direction=horizontal] .et-scrollable-button--start{inset-block-start:calc(50% - 20px);transform:rotate(-90deg)}.et-scrollable[direction=horizontal] .et-scrollable-button--end{inset-block-start:calc(50% - 20px);transform:rotate(90deg)}.et-scrollable[direction=vertical]{--_flow: row}.et-scrollable[direction=vertical] .et-scrollable-container-outer{overflow-x:hidden;overflow-y:auto}.et-scrollable[direction=vertical] .et-scrollable-container{grid-auto-rows:var(--_auto-size)}.et-scrollable[direction=vertical] .et-scrollable-mask,.et-scrollable[direction=vertical] .et-scrollable-button{block-size:var(--mask-size);inline-size:100%}.et-scrollable[direction=vertical] .et-scrollable-mask--start,.et-scrollable[direction=vertical] .et-scrollable-button--start{inset-block-start:0;inset-inline-start:0}.et-scrollable[direction=vertical] .et-scrollable-mask--end,.et-scrollable[direction=vertical] .et-scrollable-button--end{inset-block-end:0;inset-inline-start:0}.et-scrollable[direction=vertical] .et-scrollable-mask--start{background:linear-gradient(to bottom,var(--mask))}.et-scrollable[direction=vertical] .et-scrollable-mask--end{background:linear-gradient(to top,var(--mask))}.et-scrollable[direction=vertical] .et-scrollable-button--start{inset-inline-start:calc(50% - 20px);transform:rotate(0)}.et-scrollable[direction=vertical] .et-scrollable-button--end{inset-inline-start:calc(50% - 20px);transform:rotate(180deg)}.et-scrollable:not(.et-scrollable--is-at-start) .et-scrollable-masks .et-scrollable-mask--start,.et-scrollable:not(.et-scrollable--is-at-start) .et-scrollable-buttons .et-scrollable-button--start{opacity:1}.et-scrollable:not(.et-scrollable--is-at-start) .et-scrollable-buttons .et-scrollable-button--start{pointer-events:all}.et-scrollable:not(.et-scrollable--is-at-end) .et-scrollable-masks .et-scrollable-mask--end,.et-scrollable:not(.et-scrollable--is-at-end) .et-scrollable-buttons .et-scrollable-button--end{opacity:1}.et-scrollable:not(.et-scrollable--is-at-end) .et-scrollable-buttons .et-scrollable-button--end{pointer-events:all}.et-scrollable .et-scrollable-container-outer{overflow:auto;display:grid;position:relative;grid-row:1/1;grid-column:1/1}.et-scrollable .et-scroll-observer-first-element,.et-scrollable .et-scroll-observer-last-element{position:absolute;block-size:100%;inline-size:1px;pointer-events:none}.et-scrollable .et-scroll-observer-first-element{inset-inline-start:1px}.et-scrollable .et-scroll-observer-last-element{inset-inline-end:1px}.et-scrollable .et-scrollable-container{display:grid;grid-auto-flow:var(--_flow);position:relative}.et-scrollable .et-scrollable-masks,.et-scrollable .et-scrollable-buttons{grid-row:1/1;grid-column:1/1;pointer-events:none}.et-scrollable .et-scrollable-masks .et-scrollable-mask,.et-scrollable .et-scrollable-masks .et-scrollable-button,.et-scrollable .et-scrollable-buttons .et-scrollable-mask,.et-scrollable .et-scrollable-buttons .et-scrollable-button{position:absolute;opacity:0}.et-scrollable.et-scrollable--can-scroll.et-scrollable--enable-overlay-animations .et-scrollable-mask,.et-scrollable.et-scrollable--can-scroll.et-scrollable--enable-overlay-animations .et-scrollable-button{transition:opacity .3s var(--ease-5)}.et-scrollable .et-scrollable-buttons .et-scrollable-button{background:transparent;border:none;padding:12px;inline-size:40px;block-size:40px;border-radius:4px;cursor:pointer}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-chevron-icon{pointer-events:none}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-scrollable-button--start{inset-inline:0 0}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-scrollable-button--end{inset-inline:calc(100% - 40px) 0}.et-scrollable[sticky-buttons=true]{--_sticky-margin: 10%}.et-scrollable[sticky-buttons=true] .et-scrollable-button{position:sticky}.et-scrollable[sticky-buttons=true][direction=horizontal] .et-scrollable-buttons{margin-block:var(--_sticky-margin)}.et-scrollable[sticky-buttons=true][direction=vertical] .et-scrollable-buttons{margin-inline:var(--_sticky-margin)}.et-scrollable[sticky-buttons=true][direction=vertical] .et-scrollable-buttons .et-scrollable-button--end{inset-block-start:100%}.et-scrollable .et-scrollable-navigation{display:flex;justify-content:center;gap:10px;margin-block-start:10px}.et-scrollable .et-scrollable-navigation .et-scrollable-navigation-item{all:unset;inline-size:10px;block-size:10px;display:block;background-color:#4b4b4b;border-radius:50%;cursor:pointer}.et-scrollable .et-scrollable-navigation .et-scrollable-navigation-item.et-scrollable-navigation-item--active{background-color:#c6c6c6}\n"] }]
|
|
12599
12600
|
}], ctorParameters: () => [], propDecorators: { _itemSize: [{
|
|
12600
12601
|
type: Input,
|
|
12601
12602
|
args: [{ alias: 'itemSize' }]
|