@ethlete/cdk 2.9.0 → 2.9.1
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 +8 -0
- package/esm2022/lib/components/forms/components/checkbox/components/checkbox-group/checkbox-group.component.mjs +3 -3
- package/esm2022/lib/components/forms/components/input/components/input-field/input-field.component.mjs +3 -7
- package/esm2022/lib/components/forms/components/radio/components/radio-group/radio-group.component.mjs +3 -3
- package/esm2022/lib/components/forms/components/segmented-button/components/segmented-button-field/segmented-button-field.component.mjs +3 -3
- package/esm2022/lib/components/forms/components/segmented-button/components/segmented-button-group/segmented-button-group.component.mjs +3 -3
- package/esm2022/lib/components/scrollable/components/scrollable/scrollable.component.mjs +3 -3
- package/fesm2022/ethlete-cdk.mjs +12 -16
- package/fesm2022/ethlete-cdk.mjs.map +1 -1
- package/lib/components/forms/components/checkbox/components/checkbox-group/checkbox-group.component.d.ts +1 -1
- package/lib/components/forms/components/input/components/input-field/input-field.component.d.ts +1 -1
- package/lib/components/forms/components/radio/components/radio-group/radio-group.component.d.ts +1 -1
- package/lib/components/forms/components/segmented-button/components/segmented-button-field/segmented-button-field.component.d.ts +1 -1
- package/lib/components/forms/components/segmented-button/components/segmented-button-group/segmented-button-group.component.d.ts +1 -1
- package/package.json +2 -2
package/fesm2022/ethlete-cdk.mjs
CHANGED
|
@@ -2309,11 +2309,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImpor
|
|
|
2309
2309
|
|
|
2310
2310
|
class CheckboxGroupComponent {
|
|
2311
2311
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CheckboxGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2312
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: CheckboxGroupComponent, isStandalone: true, selector: "et-checkbox-group", host: { classAttribute: "et-form-group et-checkbox-group" }, hostDirectives: [{ directive: CheckboxGroupDirective }, { directive: StaticFormGroupDirective }], ngImport: i0, template: ` <ng-content
|
|
2312
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: CheckboxGroupComponent, isStandalone: true, selector: "et-checkbox-group", host: { classAttribute: "et-form-group et-checkbox-group" }, hostDirectives: [{ directive: CheckboxGroupDirective }, { directive: StaticFormGroupDirective }], ngImport: i0, template: ` <ng-content /> `, isInline: true, styles: [":where(.et-checkbox-group){display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2313
2313
|
}
|
|
2314
2314
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CheckboxGroupComponent, decorators: [{
|
|
2315
2315
|
type: Component,
|
|
2316
|
-
args: [{ selector: 'et-checkbox-group', template: ` <ng-content
|
|
2316
|
+
args: [{ selector: 'et-checkbox-group', template: ` <ng-content /> `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
2317
2317
|
class: 'et-form-group et-checkbox-group',
|
|
2318
2318
|
}, hostDirectives: [CheckboxGroupDirective, StaticFormGroupDirective], styles: [":where(.et-checkbox-group){display:block}\n"] }]
|
|
2319
2319
|
}] });
|
|
@@ -2762,9 +2762,7 @@ class InputFieldComponent extends DecoratedFormFieldBase {
|
|
|
2762
2762
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: InputFieldComponent, isStandalone: true, selector: "et-input-field", host: { classAttribute: "et-form-field et-input-field" }, usesInheritance: true, hostDirectives: [{ directive: StaticFormFieldDirective }, { directive: WriteableInputDirective }, { directive: i0.forwardRef(function () { return DynamicFormFieldDirective; }), inputs: ["hideErrorMessage", "hideErrorMessage"] }], ngImport: i0, template: `
|
|
2763
2763
|
<ng-content select="et-label" />
|
|
2764
2764
|
<div class="et-input-field-input">
|
|
2765
|
-
<ng-content
|
|
2766
|
-
select="et-number-input, et-text-input, et-email-input, et-password-input, et-search-input, et-textarea-input"
|
|
2767
|
-
/>
|
|
2765
|
+
<ng-content />
|
|
2768
2766
|
</div>
|
|
2769
2767
|
<et-error [errors]="inputState.errors$ | async" />
|
|
2770
2768
|
`, isInline: true, dependencies: [{ kind: "component", type: ErrorComponent, selector: "et-error", inputs: ["errors"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
@@ -2776,9 +2774,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImpor
|
|
|
2776
2774
|
template: `
|
|
2777
2775
|
<ng-content select="et-label" />
|
|
2778
2776
|
<div class="et-input-field-input">
|
|
2779
|
-
<ng-content
|
|
2780
|
-
select="et-number-input, et-text-input, et-email-input, et-password-input, et-search-input, et-textarea-input"
|
|
2781
|
-
/>
|
|
2777
|
+
<ng-content />
|
|
2782
2778
|
</div>
|
|
2783
2779
|
<et-error [errors]="inputState.errors$ | async" />
|
|
2784
2780
|
`,
|
|
@@ -3092,7 +3088,7 @@ class RadioGroupComponent {
|
|
|
3092
3088
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3093
3089
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: RadioGroupComponent, isStandalone: true, selector: "et-radio-group", host: { classAttribute: "et-form-group et-radio-group" }, hostDirectives: [{ directive: StaticFormGroupDirective }, { directive: WriteableInputDirective }, { directive: i0.forwardRef(function () { return DynamicFormGroupDirective; }), inputs: ["hideErrorMessage", "hideErrorMessage"] }, { directive: RadioGroupDirective }], ngImport: i0, template: `
|
|
3094
3090
|
<div class="et-radio-group-container">
|
|
3095
|
-
<ng-content
|
|
3091
|
+
<ng-content />
|
|
3096
3092
|
</div>
|
|
3097
3093
|
<et-error [errors]="inputState.errors$ | async" />
|
|
3098
3094
|
`, isInline: true, styles: [":where(.et-radio-group){display:block}\n"], dependencies: [{ kind: "component", type: ErrorComponent, selector: "et-error", inputs: ["errors"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
@@ -3101,7 +3097,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImpor
|
|
|
3101
3097
|
type: Component,
|
|
3102
3098
|
args: [{ selector: 'et-radio-group', template: `
|
|
3103
3099
|
<div class="et-radio-group-container">
|
|
3104
|
-
<ng-content
|
|
3100
|
+
<ng-content />
|
|
3105
3101
|
</div>
|
|
3106
3102
|
<et-error [errors]="inputState.errors$ | async" />
|
|
3107
3103
|
`, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
@@ -3333,7 +3329,7 @@ class SegmentedButtonFieldComponent {
|
|
|
3333
3329
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: SegmentedButtonFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3334
3330
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: SegmentedButtonFieldComponent, isStandalone: true, selector: "et-segmented-button-field", host: { classAttribute: "et-form-field et-segmented-button-field" }, hostDirectives: [{ directive: StaticFormFieldDirective }, { directive: SegmentedButtonFieldDirective }], ngImport: i0, template: `
|
|
3335
3331
|
<div class="et-segmented-button-field-container">
|
|
3336
|
-
<ng-content
|
|
3332
|
+
<ng-content />
|
|
3337
3333
|
</div>
|
|
3338
3334
|
`, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3339
3335
|
}
|
|
@@ -3341,7 +3337,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImpor
|
|
|
3341
3337
|
type: Component,
|
|
3342
3338
|
args: [{ selector: 'et-segmented-button-field', template: `
|
|
3343
3339
|
<div class="et-segmented-button-field-container">
|
|
3344
|
-
<ng-content
|
|
3340
|
+
<ng-content />
|
|
3345
3341
|
</div>
|
|
3346
3342
|
`, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
3347
3343
|
class: 'et-form-field et-segmented-button-field',
|
|
@@ -3355,7 +3351,7 @@ class SegmentedButtonGroupComponent {
|
|
|
3355
3351
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: SegmentedButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3356
3352
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: SegmentedButtonGroupComponent, isStandalone: true, selector: "et-segmented-button-group", host: { classAttribute: "et-form-group et-segmented-button-group" }, hostDirectives: [{ directive: StaticFormGroupDirective }, { directive: WriteableInputDirective }, { directive: i0.forwardRef(function () { return DynamicFormGroupDirective; }), inputs: ["hideErrorMessage", "hideErrorMessage"] }, { directive: SegmentedButtonGroupDirective }], ngImport: i0, template: `
|
|
3357
3353
|
<div class="et-segmented-button-group-container">
|
|
3358
|
-
<ng-content
|
|
3354
|
+
<ng-content />
|
|
3359
3355
|
</div>
|
|
3360
3356
|
<et-error [errors]="inputState.errors$ | async" />
|
|
3361
3357
|
`, isInline: true, styles: [":where(.et-segmented-button-group){--et-segmented-button-group-gap: 1rem}.et-segmented-button-group-container{display:flex;gap:var(--et-segmented-button-group-gap)}\n"], dependencies: [{ kind: "component", type: ErrorComponent, selector: "et-error", inputs: ["errors"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
@@ -3364,7 +3360,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImpor
|
|
|
3364
3360
|
type: Component,
|
|
3365
3361
|
args: [{ selector: 'et-segmented-button-group', template: `
|
|
3366
3362
|
<div class="et-segmented-button-group-container">
|
|
3367
|
-
<ng-content
|
|
3363
|
+
<ng-content />
|
|
3368
3364
|
</div>
|
|
3369
3365
|
<et-error [errors]="inputState.errors$ | async" />
|
|
3370
3366
|
`, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
@@ -9282,13 +9278,13 @@ class ScrollableComponent {
|
|
|
9282
9278
|
.subscribe();
|
|
9283
9279
|
}
|
|
9284
9280
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ScrollableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9285
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: ScrollableComponent, isStandalone: true, selector: "et-scrollable", inputs: { itemSize: "itemSize", direction: "direction", scrollableRole: "scrollableRole", scrollableClass: "scrollableClass", 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", snap: ["snap", "snap", booleanAttribute], scrollMargin: ["scrollMargin", "scrollMargin", numberAttribute] }, outputs: { scrollStateChange: "scrollStateChange", intersectionChange: "intersectionChange" }, host: { properties: { "attr.item-size": "this.itemSize", "attr.direction": "this.direction", "attr.render-scrollbars": "this.renderScrollbars", "attr.sticky-buttons": "this.stickyButtons" }, classAttribute: "et-scrollable" }, queries: [{ propertyName: "activeElements", predicate: IS_ACTIVE_ELEMENT, descendants: true }, { propertyName: "elements", predicate: IS_ELEMENT, descendants: true }], viewQueries: [{ propertyName: "scrollable", first: true, predicate: ["scrollable"], descendants: true, static: true }], ngImport: i0, template: "<div\n #scrollable\n [attr.role]=\"scrollableRole ?? undefined\"\n [
|
|
9281
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: ScrollableComponent, isStandalone: true, selector: "et-scrollable", inputs: { itemSize: "itemSize", direction: "direction", scrollableRole: "scrollableRole", scrollableClass: "scrollableClass", 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", snap: ["snap", "snap", booleanAttribute], scrollMargin: ["scrollMargin", "scrollMargin", numberAttribute] }, outputs: { scrollStateChange: "scrollStateChange", intersectionChange: "intersectionChange" }, host: { properties: { "attr.item-size": "this.itemSize", "attr.direction": "this.direction", "attr.render-scrollbars": "this.renderScrollbars", "attr.sticky-buttons": "this.stickyButtons" }, classAttribute: "et-scrollable" }, queries: [{ propertyName: "activeElements", predicate: IS_ACTIVE_ELEMENT, descendants: true }, { propertyName: "elements", predicate: IS_ELEMENT, descendants: true }], viewQueries: [{ propertyName: "scrollable", first: true, predicate: ["scrollable"], descendants: true, static: true }], ngImport: i0, template: "<div\n #scrollable\n [attr.role]=\"scrollableRole ?? undefined\"\n [etCursorDragScroll]=\"cursorDragScroll\"\n [allowedDirection]=\"direction\"\n (etObserveScrollState)=\"_scrollStateChanged($event)\"\n (cursorDragStart)=\"setIsCursorDragging(true)\"\n (cursorDragEnd)=\"setIsCursorDragging(false)\"\n class=\"et-scrollable-container-outer\"\n>\n <div class=\"et-scroll-observer-first-element\"></div>\n <div [ngClass]=\"scrollableClass\" class=\"et-scrollable-container\">\n <ng-content />\n </div>\n <div class=\"et-scroll-observer-last-element\"></div>\n</div>\n\n<div *ngIf=\"renderMasks\" 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<div *ngIf=\"renderButtons\" 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)=\"scrollToStartEnd()\"\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", styles: [".et-scrollable{--mask: #121212 0, transparent 100%;--mask-size: 25px;--_auto-size: min-content;--_flow: column;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;grid-template-columns:auto 1fr auto}.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;grid-template-rows:auto 1fr 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[at-start=false] .et-scrollable-masks .et-scrollable-mask--start,.et-scrollable[at-start=false] .et-scrollable-buttons .et-scrollable-button--start{opacity:1}.et-scrollable[at-start=false] .et-scrollable-buttons .et-scrollable-button--start{pointer-events:all}.et-scrollable[at-end=false] .et-scrollable-masks .et-scrollable-mask--end,.et-scrollable[at-end=false] .et-scrollable-buttons .et-scrollable-button--end{opacity:1}.et-scrollable[at-end=false] .et-scrollable-buttons .et-scrollable-button--end{pointer-events:all}.et-scrollable .et-scrollable-container-outer{overflow:auto;display:grid;grid-row:1/1;grid-column:1/1}.et-scrollable .et-scrollable-container{display:grid;grid-auto-flow:var(--_flow)}.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;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%}\n"], dependencies: [{ kind: "directive", type: CursorDragScrollDirective, selector: "[etCursorDragScroll]", inputs: ["etCursorDragScroll", "allowedDirection"], outputs: ["cursorDragStart", "cursorDragMove", "cursorDragEnd"], exportAs: ["etCursorDragScroll"] }, { kind: "directive", type: ObserveScrollStateDirective, selector: "[etObserveScrollState]", inputs: ["rootMargin", "observerThreshold"], outputs: ["etObserveScrollState"], exportAs: ["etObserveScrollState"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChevronIconComponent, selector: "et-chevron-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
9286
9282
|
}
|
|
9287
9283
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ScrollableComponent, decorators: [{
|
|
9288
9284
|
type: Component,
|
|
9289
9285
|
args: [{ selector: 'et-scrollable', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CursorDragScrollDirective, ObserveScrollStateDirective, NgClass, NgIf, LetDirective, ChevronIconComponent], host: {
|
|
9290
9286
|
class: 'et-scrollable',
|
|
9291
|
-
}, template: "<div\n #scrollable\n [attr.role]=\"scrollableRole ?? undefined\"\n [
|
|
9287
|
+
}, template: "<div\n #scrollable\n [attr.role]=\"scrollableRole ?? undefined\"\n [etCursorDragScroll]=\"cursorDragScroll\"\n [allowedDirection]=\"direction\"\n (etObserveScrollState)=\"_scrollStateChanged($event)\"\n (cursorDragStart)=\"setIsCursorDragging(true)\"\n (cursorDragEnd)=\"setIsCursorDragging(false)\"\n class=\"et-scrollable-container-outer\"\n>\n <div class=\"et-scroll-observer-first-element\"></div>\n <div [ngClass]=\"scrollableClass\" class=\"et-scrollable-container\">\n <ng-content />\n </div>\n <div class=\"et-scroll-observer-last-element\"></div>\n</div>\n\n<div *ngIf=\"renderMasks\" 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<div *ngIf=\"renderButtons\" 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)=\"scrollToStartEnd()\"\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", styles: [".et-scrollable{--mask: #121212 0, transparent 100%;--mask-size: 25px;--_auto-size: min-content;--_flow: column;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;grid-template-columns:auto 1fr auto}.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;grid-template-rows:auto 1fr 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[at-start=false] .et-scrollable-masks .et-scrollable-mask--start,.et-scrollable[at-start=false] .et-scrollable-buttons .et-scrollable-button--start{opacity:1}.et-scrollable[at-start=false] .et-scrollable-buttons .et-scrollable-button--start{pointer-events:all}.et-scrollable[at-end=false] .et-scrollable-masks .et-scrollable-mask--end,.et-scrollable[at-end=false] .et-scrollable-buttons .et-scrollable-button--end{opacity:1}.et-scrollable[at-end=false] .et-scrollable-buttons .et-scrollable-button--end{pointer-events:all}.et-scrollable .et-scrollable-container-outer{overflow:auto;display:grid;grid-row:1/1;grid-column:1/1}.et-scrollable .et-scrollable-container{display:grid;grid-auto-flow:var(--_flow)}.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;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%}\n"] }]
|
|
9292
9288
|
}], propDecorators: { itemSize: [{
|
|
9293
9289
|
type: Input
|
|
9294
9290
|
}, {
|