@ethlete/components 1.0.0-next.49 → 1.0.0-next.51
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
CHANGED
|
@@ -1,5 +1,25 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 1.0.0-next.51
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#3063](https://github.com/ethlete-io/ethdk/pull/3063) [`37067ce`](https://github.com/ethlete-io/ethdk/commit/37067cee67c5cd360360a5f59c29f58afc08e62c) Thanks [@TomTomB](https://github.com/TomTomB)! - A single-scheme app no longer needs a root `etProvideSurface`: its default surface paints `:root` unconditionally once the surface CSS is regenerated, and the outermost provider resolves it through the new `injectDefaultSurfaceTheme()` / `injectSurfaceType()`.
|
|
8
|
+
|
|
9
|
+
## 1.0.0-next.50
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- [`4c322ab`](https://github.com/ethlete-io/ethdk/commit/4c322ab07f2f5cdfb2ef72bc94044eab434dee3c) Thanks [@TomTomB](https://github.com/TomTomB)! - Buttons take an optional `progress` input (`0`-`100`) that makes the loading spinner determinate.
|
|
14
|
+
|
|
15
|
+
- [#3061](https://github.com/ethlete-io/ethdk/pull/3061) [`7cd3da8`](https://github.com/ethlete-io/ethdk/commit/7cd3da8342d0d619f06154d4155cfafedbed28f4) Thanks [@github-actions](https://github.com/apps/github-actions)! - Overlays: `data-et-overlay-layer` (or a per-open `zIndex`) puts an overlay above the default stacking level, which is how the query devtools panel and its toggle now stay visible over an app's own modals and tooltips.
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- [`0b67ec5`](https://github.com/ethlete-io/ethdk/commit/0b67ec598b899c4c4716588a15a8c3cdd3335d87) Thanks [@TomTomB](https://github.com/TomTomB)! - Fix the spinner's `track` never painting: `--et-spinner-track-color` was registered with an
|
|
20
|
+
`initial-value`, so its default could not apply. It now defaults to `currentColor` at 24%, and a
|
|
21
|
+
button's determinate loading spinner shows its track.
|
|
22
|
+
|
|
3
23
|
## 1.0.0-next.49
|
|
4
24
|
|
|
5
25
|
### Minor Changes
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { InjectionToken, input, booleanAttribute, signal, computed, effect, untracked, Directive, inject, afterNextRender, DestroyRef, TemplateRef, ElementRef, model, linkedSignal, ViewEncapsulation, Component, numberAttribute, contentChildren, Injector, output, runInInjectionContext, contentChild, NgZone, ApplicationRef, viewChild, ViewContainerRef, createEnvironmentInjector, DOCUMENT, EnvironmentInjector, inputBinding, createComponent, isSignal, assertInInjectionContext, isDevMode as isDevMode$1, provideEnvironmentInitializer, viewChildren, afterRenderEffect, outputBinding, afterEveryRender, PLATFORM_ID } from '@angular/core';
|
|
3
3
|
import * as i1 from '@ethlete/core';
|
|
4
|
-
import { injectHostElement, RuntimeError, createComponentId, ProvideColorDirective, defineLabels, toProvideFn, toInjectFn, toToken, injectStyleManager, SurfaceInteractiveDirective, createCanAnimateSignal, ColorInteractiveDirective, injectSuccessTheme, injectWarningTheme, injectErrorTheme, injectLocale, defineStaticRootProvider, inferMimeType, injectColorThemes, injectRenderer, ProvideSurfaceDirective, COLOR_PROVIDER, SURFACE_PROVIDER, injectSurfaceThemes, injectSurfaceThemesPrefix, injectSurfaceContextTracker, injectBoundaryElement, ANIMATED_LIFECYCLE_TOKEN, resolveAppRootColorProvider, resolveSurfaceByElevation, createCssSurfaceName, provideBoundaryElement, AnimatedLifecycleDirective, injectBreakpointObserver, isHTMLElement, equal, animationDebugLog, defineRootProvider, injectOverlayRuntime, anchoredOverlayPosition, enableAnchoredOverlayPositionExtras, randomId, forceReflow, nextFrame, elementCanScroll, matchesReducedMotion, createSwipeTracker, ScrollObserverDirective, signalElementScrollState, ScrollObserverStartDirective, ScrollObserverEndDirective, applyHostListener, injectQueryParam, defineProvider, fromNextFrame, injectRoute, createUnsavedChangesTracker, createDocumentElementSignal, AnimatedIfDirective, signalElementDimensions, applyInitialFocus, syncSignal, AutoSurfaceDirective, setInputSignal, injectTemplateRef, signalHostElementScrollState, applyStructuredDataBinding, typedBreakpointTransform, signalElementChildren, signalElementIntersection, signalHostAttributes, signalHostClasses, signalHostStyles, getScrollContainerTarget, getScrollItemTarget, getElementScrollCoordinates, provideBreakpointInstance, signalClasses, useCursorDragScroll, signalStyles, getScrollSnapTarget, injectPrefersReducedMotion, injectIsDocumentVisible, signalHostElementIntersection, clamp as clamp$1, copyToClipboard, injectAnimatedBlockSize, injectObserveBreakpoint, signalDeferredLoading, AnimatableDirective, ColorInteractiveContainerDirective, ColorInteractiveExcludeDirective, createFlipAnimation, createObjectUrlHandle, createFlipAnimationGroup, focusElement, isFocusable, getFocusableElements, ColorInteractiveHasFocusDirective, dragGestureFrom, injectFocusVisibleTracker, htmlToMarkdown, markdownToHtml, injectHasTouchInput, signalHostElementDimensions, DragHandleDirective, ResizeHandlesComponent, numberBreakpointTransform, applyLinkBinding, applyHeadTitleBinding, injectColorPalette, injectViewportSize, injectFileDownload, injectRouterEvent, canUseSessionMemory, createAutoSessionMemoryKey, createSessionMemory } from '@ethlete/core';
|
|
4
|
+
import { injectHostElement, RuntimeError, createComponentId, ProvideColorDirective, defineLabels, toProvideFn, toInjectFn, toToken, injectStyleManager, SurfaceInteractiveDirective, createCanAnimateSignal, ColorInteractiveDirective, injectSuccessTheme, injectWarningTheme, injectErrorTheme, injectLocale, defineStaticRootProvider, inferMimeType, injectColorThemes, injectRenderer, ProvideSurfaceDirective, COLOR_PROVIDER, SURFACE_PROVIDER, injectSurfaceThemes, injectSurfaceThemesPrefix, injectSurfaceContextTracker, injectBoundaryElement, ANIMATED_LIFECYCLE_TOKEN, resolveAppRootColorProvider, resolveSurfaceByElevation, createCssSurfaceName, provideBoundaryElement, AnimatedLifecycleDirective, injectBreakpointObserver, isHTMLElement, equal, animationDebugLog, resolveOverlayLayer, defineRootProvider, injectOverlayRuntime, anchoredOverlayPosition, enableAnchoredOverlayPositionExtras, randomId, forceReflow, nextFrame, elementCanScroll, matchesReducedMotion, createSwipeTracker, ScrollObserverDirective, signalElementScrollState, ScrollObserverStartDirective, ScrollObserverEndDirective, applyHostListener, injectQueryParam, defineProvider, fromNextFrame, injectRoute, createUnsavedChangesTracker, createDocumentElementSignal, AnimatedIfDirective, signalElementDimensions, applyInitialFocus, syncSignal, AutoSurfaceDirective, setInputSignal, injectTemplateRef, signalHostElementScrollState, applyStructuredDataBinding, typedBreakpointTransform, signalElementChildren, signalElementIntersection, signalHostAttributes, signalHostClasses, signalHostStyles, getScrollContainerTarget, getScrollItemTarget, getElementScrollCoordinates, provideBreakpointInstance, signalClasses, useCursorDragScroll, signalStyles, getScrollSnapTarget, injectPrefersReducedMotion, injectIsDocumentVisible, signalHostElementIntersection, clamp as clamp$1, copyToClipboard, injectAnimatedBlockSize, injectObserveBreakpoint, signalDeferredLoading, AnimatableDirective, ColorInteractiveContainerDirective, ColorInteractiveExcludeDirective, createFlipAnimation, createObjectUrlHandle, createFlipAnimationGroup, focusElement, isFocusable, getFocusableElements, ColorInteractiveHasFocusDirective, dragGestureFrom, injectFocusVisibleTracker, htmlToMarkdown, markdownToHtml, injectHasTouchInput, signalHostElementDimensions, DragHandleDirective, ResizeHandlesComponent, numberBreakpointTransform, applyLinkBinding, applyHeadTitleBinding, injectColorPalette, injectSurfaceType, injectViewportSize, injectFileDownload, injectRouterEvent, canUseSessionMemory, createAutoSessionMemoryKey, createSessionMemory } from '@ethlete/core';
|
|
5
5
|
import { NgTemplateOutlet, NgComponentOutlet, Location, DOCUMENT as DOCUMENT$1, isPlatformBrowser } from '@angular/common';
|
|
6
6
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
7
7
|
import { format, startOfWeek, startOfDay, endOfWeek, isBefore, addDays, endOfMonth, startOfMonth, isSameYear, isSameMonth, isSameDay, startOfYear, isAfter, addYears, addMonths, setMonth, setYear, getDate, setDate, lastDayOfMonth, getWeek, endOfYear, parse, isValid, setSeconds, setMinutes, setHours, setMilliseconds, endOfDay, eachDayOfInterval, differenceInCalendarDays, addMinutes, differenceInMinutes, addHours } from 'date-fns';
|
|
@@ -2246,7 +2246,7 @@ class SpinnerComponent {
|
|
|
2246
2246
|
</div>
|
|
2247
2247
|
</div>
|
|
2248
2248
|
}
|
|
2249
|
-
`, isInline: true, styles: ["@layer components{@property --et-spinner-size{syntax: \"<length>\"; inherits: false; initial-value: 18px;}@property --et-spinner-stroke-width{syntax: \"<length>\"; inherits: false; initial-value: 2.25px;}@property --et-spinner-color{syntax: \"<color>\"; inherits: true; initial-value: currentColor;}@property --et-spinner-
|
|
2249
|
+
`, isInline: true, styles: ["@layer components{@property --et-spinner-size{syntax: \"<length>\"; inherits: false; initial-value: 18px;}@property --et-spinner-stroke-width{syntax: \"<length>\"; inherits: false; initial-value: 2.25px;}@property --et-spinner-color{syntax: \"<color>\"; inherits: true; initial-value: currentColor;}@property --et-spinner-duration{syntax: \"<time>\"; inherits: false; initial-value: 1333ms;}@keyframes et-spinner-rotate{to{transform:rotate(360deg)}}@keyframes et-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@keyframes et-spinner-left-spin{0%{transform:rotate(260deg)}50%{transform:rotate(130deg)}to{transform:rotate(260deg)}}@keyframes et-spinner-right-spin{0%{transform:rotate(-260deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-260deg)}}.et-spinner{position:relative;display:inline-block;width:var(--et-spinner-size);height:var(--et-spinner-size);color:var(--et-spinner-color);direction:ltr;vertical-align:middle;line-height:0;overflow:hidden}.et-spinner .et-spinner-track-container,.et-spinner .et-spinner-track-graphic,.et-spinner .et-spinner-indeterminate-container,.et-spinner .et-spinner-layer,.et-spinner .et-spinner-circle-graphic{position:absolute;inset:0;width:100%;height:100%}.et-spinner .et-spinner-track-container{transform:rotate(-90deg)}.et-spinner .et-spinner-track-graphic,.et-spinner .et-spinner-circle-graphic{fill:none}.et-spinner .et-spinner-track-circle,.et-spinner .et-spinner-circle-graphic circle{fill:none;stroke:currentColor}.et-spinner .et-spinner-track-circle{stroke:var(--et-spinner-track-color, color-mix(in srgb, currentColor 24%, transparent));stroke-linecap:round}.et-spinner .et-spinner-circle-graphic circle{stroke-linecap:round;stroke-linejoin:round}.et-spinner .et-spinner-indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;animation:et-spinner-rotate 1568ms linear infinite}.et-spinner .et-spinner-layer{animation:et-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-gap-patch{position:absolute;top:0;left:47.5%;box-sizing:border-box;width:5%;height:100%;overflow:hidden}.et-spinner .et-spinner-gap-patch .et-spinner-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}.et-spinner .et-spinner-circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}.et-spinner .et-spinner-circle-clipper .et-spinner-circle-graphic{width:200%}.et-spinner .et-spinner-circle-right .et-spinner-circle-graphic{left:-100%}.et-spinner .et-spinner-circle-left .et-spinner-circle-graphic{animation:et-spinner-left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-circle-right .et-spinner-circle-graphic{animation:et-spinner-right-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-determinate-graphic{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none}.et-spinner .et-spinner-determinate-circle{fill:none;stroke:currentColor;stroke-linecap:round;transition:stroke-dashoffset .2s linear}.et-spinner:where(.et-spinner--themed){--et-spinner-color: var(--et-theme-color-primary-solid, currentColor)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2250
2250
|
}
|
|
2251
2251
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
2252
2252
|
type: Component,
|
|
@@ -2337,16 +2337,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
2337
2337
|
'[attr.aria-valuenow]': 'determinate() ? clampedValue() : null',
|
|
2338
2338
|
'[attr.aria-valuemin]': 'determinate() ? 0 : null',
|
|
2339
2339
|
'[attr.aria-valuemax]': 'determinate() ? 100 : null',
|
|
2340
|
-
}, styles: ["@layer components{@property --et-spinner-size{syntax: \"<length>\"; inherits: false; initial-value: 18px;}@property --et-spinner-stroke-width{syntax: \"<length>\"; inherits: false; initial-value: 2.25px;}@property --et-spinner-color{syntax: \"<color>\"; inherits: true; initial-value: currentColor;}@property --et-spinner-
|
|
2340
|
+
}, styles: ["@layer components{@property --et-spinner-size{syntax: \"<length>\"; inherits: false; initial-value: 18px;}@property --et-spinner-stroke-width{syntax: \"<length>\"; inherits: false; initial-value: 2.25px;}@property --et-spinner-color{syntax: \"<color>\"; inherits: true; initial-value: currentColor;}@property --et-spinner-duration{syntax: \"<time>\"; inherits: false; initial-value: 1333ms;}@keyframes et-spinner-rotate{to{transform:rotate(360deg)}}@keyframes et-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@keyframes et-spinner-left-spin{0%{transform:rotate(260deg)}50%{transform:rotate(130deg)}to{transform:rotate(260deg)}}@keyframes et-spinner-right-spin{0%{transform:rotate(-260deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-260deg)}}.et-spinner{position:relative;display:inline-block;width:var(--et-spinner-size);height:var(--et-spinner-size);color:var(--et-spinner-color);direction:ltr;vertical-align:middle;line-height:0;overflow:hidden}.et-spinner .et-spinner-track-container,.et-spinner .et-spinner-track-graphic,.et-spinner .et-spinner-indeterminate-container,.et-spinner .et-spinner-layer,.et-spinner .et-spinner-circle-graphic{position:absolute;inset:0;width:100%;height:100%}.et-spinner .et-spinner-track-container{transform:rotate(-90deg)}.et-spinner .et-spinner-track-graphic,.et-spinner .et-spinner-circle-graphic{fill:none}.et-spinner .et-spinner-track-circle,.et-spinner .et-spinner-circle-graphic circle{fill:none;stroke:currentColor}.et-spinner .et-spinner-track-circle{stroke:var(--et-spinner-track-color, color-mix(in srgb, currentColor 24%, transparent));stroke-linecap:round}.et-spinner .et-spinner-circle-graphic circle{stroke-linecap:round;stroke-linejoin:round}.et-spinner .et-spinner-indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;animation:et-spinner-rotate 1568ms linear infinite}.et-spinner .et-spinner-layer{animation:et-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-gap-patch{position:absolute;top:0;left:47.5%;box-sizing:border-box;width:5%;height:100%;overflow:hidden}.et-spinner .et-spinner-gap-patch .et-spinner-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}.et-spinner .et-spinner-circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}.et-spinner .et-spinner-circle-clipper .et-spinner-circle-graphic{width:200%}.et-spinner .et-spinner-circle-right .et-spinner-circle-graphic{left:-100%}.et-spinner .et-spinner-circle-left .et-spinner-circle-graphic{animation:et-spinner-left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-circle-right .et-spinner-circle-graphic{animation:et-spinner-right-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-determinate-graphic{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none}.et-spinner .et-spinner-determinate-circle{fill:none;stroke:currentColor;stroke-linecap:round;transition:stroke-dashoffset .2s linear}.et-spinner:where(.et-spinner--themed){--et-spinner-color: var(--et-theme-color-primary-solid, currentColor)}}\n"] }]
|
|
2341
2341
|
}], propDecorators: { diameter: [{ type: i0.Input, args: [{ isSignal: true, alias: "diameter", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], track: [{ type: i0.Input, args: [{ isSignal: true, alias: "track", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], determinate: [{ type: i0.Input, args: [{ isSignal: true, alias: "determinate", required: false }] }] } });
|
|
2342
2342
|
|
|
2343
2343
|
class ButtonPropertiesStylesComponent {
|
|
2344
2344
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ButtonPropertiesStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2345
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: ButtonPropertiesStylesComponent, isStandalone: true, selector: "et-button-properties-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{@property --et-button-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-button-padding{syntax: \"*\"; inherits: false; initial-value: 8px 16px;}@property --et-button-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-button-font-weight{syntax: \"<number>\"; inherits: false; initial-value: 500;}@property --et-button-cursor{syntax: \"*\"; inherits: false; initial-value: pointer;}@property --et-button-opacity-disabled{syntax: \"<number>\"; inherits: false; initial-value: .4;}@property --et-button-gap{syntax: \"<length>\"; inherits: false; initial-value: 8px;}@property --et-button-line-height{syntax: \"<number>\"; inherits: false; initial-value: 1.5;}@property --et-button-border-width{syntax: \"<length>\"; inherits: false; initial-value: 1px;}.et-button-loader{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .12s ease}.et-button-loader .et-button-loader-spinner{--et-spinner-color: currentColor;--et-spinner-
|
|
2345
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: ButtonPropertiesStylesComponent, isStandalone: true, selector: "et-button-properties-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{@property --et-button-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-button-padding{syntax: \"*\"; inherits: false; initial-value: 8px 16px;}@property --et-button-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-button-font-weight{syntax: \"<number>\"; inherits: false; initial-value: 500;}@property --et-button-cursor{syntax: \"*\"; inherits: false; initial-value: pointer;}@property --et-button-opacity-disabled{syntax: \"<number>\"; inherits: false; initial-value: .4;}@property --et-button-gap{syntax: \"<length>\"; inherits: false; initial-value: 8px;}@property --et-button-line-height{syntax: \"<number>\"; inherits: false; initial-value: 1.5;}@property --et-button-border-width{syntax: \"<length>\"; inherits: false; initial-value: 1px;}.et-button-loader{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .12s ease}.et-button-loader .et-button-loader-spinner{--et-spinner-color: currentColor;--et-spinner-duration: .7s}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2346
2346
|
}
|
|
2347
2347
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ButtonPropertiesStylesComponent, decorators: [{
|
|
2348
2348
|
type: Component,
|
|
2349
|
-
args: [{ selector: 'et-button-properties-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{@property --et-button-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-button-padding{syntax: \"*\"; inherits: false; initial-value: 8px 16px;}@property --et-button-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-button-font-weight{syntax: \"<number>\"; inherits: false; initial-value: 500;}@property --et-button-cursor{syntax: \"*\"; inherits: false; initial-value: pointer;}@property --et-button-opacity-disabled{syntax: \"<number>\"; inherits: false; initial-value: .4;}@property --et-button-gap{syntax: \"<length>\"; inherits: false; initial-value: 8px;}@property --et-button-line-height{syntax: \"<number>\"; inherits: false; initial-value: 1.5;}@property --et-button-border-width{syntax: \"<length>\"; inherits: false; initial-value: 1px;}.et-button-loader{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .12s ease}.et-button-loader .et-button-loader-spinner{--et-spinner-color: currentColor;--et-spinner-
|
|
2349
|
+
args: [{ selector: 'et-button-properties-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{@property --et-button-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-button-padding{syntax: \"*\"; inherits: false; initial-value: 8px 16px;}@property --et-button-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-button-font-weight{syntax: \"<number>\"; inherits: false; initial-value: 500;}@property --et-button-cursor{syntax: \"*\"; inherits: false; initial-value: pointer;}@property --et-button-opacity-disabled{syntax: \"<number>\"; inherits: false; initial-value: .4;}@property --et-button-gap{syntax: \"<length>\"; inherits: false; initial-value: 8px;}@property --et-button-line-height{syntax: \"<number>\"; inherits: false; initial-value: 1.5;}@property --et-button-border-width{syntax: \"<length>\"; inherits: false; initial-value: 1px;}.et-button-loader{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .12s ease}.et-button-loader .et-button-loader-spinner{--et-spinner-color: currentColor;--et-spinner-duration: .7s}}\n"] }]
|
|
2350
2350
|
}] });
|
|
2351
2351
|
|
|
2352
2352
|
class ButtonStylesDirective {
|
|
@@ -2378,13 +2378,20 @@ class ButtonDirective {
|
|
|
2378
2378
|
...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
2379
2379
|
this.pressed = input(false, { ...(ngDevMode ? { debugName: "pressed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2380
2380
|
this.emitAriaPressed = input(true, { ...(ngDevMode ? { debugName: "emitAriaPressed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2381
|
+
/**
|
|
2382
|
+
* How far along the work behind `loading` is, as a percentage (`0`-`100`). Leave it unset for work
|
|
2383
|
+
* of unknown length - the loading spinner then stays indeterminate.
|
|
2384
|
+
*/
|
|
2385
|
+
this.progress = input(null, { ...(ngDevMode ? { debugName: "progress" } : /* istanbul ignore next */ {}), transform: (value) => (value === null || value === undefined || value === '' ? null : numberAttribute(value)) });
|
|
2381
2386
|
this.IS_BUTTON = this.elementRef.nativeElement.tagName === 'BUTTON';
|
|
2382
2387
|
this.IS_ANCHOR = this.elementRef.nativeElement.tagName === 'A';
|
|
2383
2388
|
this.isInactive = computed(() => this.disabled() || this.loading(), /* @ts-ignore */
|
|
2384
2389
|
...(ngDevMode ? [{ debugName: "isInactive" }] : /* istanbul ignore next */ []));
|
|
2390
|
+
this.hasProgress = computed(() => this.progress() !== null, /* @ts-ignore */
|
|
2391
|
+
...(ngDevMode ? [{ debugName: "hasProgress" }] : /* istanbul ignore next */ []));
|
|
2385
2392
|
}
|
|
2386
2393
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2387
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: ButtonDirective, isStandalone: true, selector: "[etButton]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, emitAriaPressed: { classPropertyName: "emitAriaPressed", publicName: "emitAriaPressed", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-loading": "loading() ? true : null", "attr.data-pressed": "pressed() ? true : null", "attr.disabled": "IS_BUTTON && isInactive() ? \"\" : null", "attr.aria-busy": "loading() ? true : null", "attr.aria-disabled": "isInactive() ? true : null", "attr.aria-pressed": "emitAriaPressed() && pressed() ? true : null", "attr.type": "IS_BUTTON ? type() : null", "attr.tabindex": "IS_ANCHOR && isInactive() ? -1 : null" } }, exportAs: ["etButton"], hostDirectives: [{ directive: i1.SurfaceInteractiveDirective }], ngImport: i0 }); }
|
|
2394
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: ButtonDirective, isStandalone: true, selector: "[etButton]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, emitAriaPressed: { classPropertyName: "emitAriaPressed", publicName: "emitAriaPressed", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-loading": "loading() ? true : null", "attr.data-pressed": "pressed() ? true : null", "attr.disabled": "IS_BUTTON && isInactive() ? \"\" : null", "attr.aria-busy": "loading() ? true : null", "attr.aria-disabled": "isInactive() ? true : null", "attr.aria-pressed": "emitAriaPressed() && pressed() ? true : null", "attr.type": "IS_BUTTON ? type() : null", "attr.tabindex": "IS_ANCHOR && isInactive() ? -1 : null" } }, exportAs: ["etButton"], hostDirectives: [{ directive: i1.SurfaceInteractiveDirective }], ngImport: i0 }); }
|
|
2388
2395
|
}
|
|
2389
2396
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ButtonDirective, decorators: [{
|
|
2390
2397
|
type: Directive,
|
|
@@ -2403,7 +2410,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
2403
2410
|
'[attr.tabindex]': 'IS_ANCHOR && isInactive() ? -1 : null',
|
|
2404
2411
|
},
|
|
2405
2412
|
}]
|
|
2406
|
-
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }], emitAriaPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitAriaPressed", required: false }] }] } });
|
|
2413
|
+
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }], emitAriaPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitAriaPressed", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }] } });
|
|
2407
2414
|
|
|
2408
2415
|
const INHERIT_COLOR = 'inherit';
|
|
2409
2416
|
class ButtonColorDirective {
|
|
@@ -2609,7 +2616,7 @@ class ButtonComponent {
|
|
|
2609
2616
|
...(ngDevMode ? [{ debugName: "pressedVariant" }] : /* istanbul ignore next */ []));
|
|
2610
2617
|
}
|
|
2611
2618
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2612
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ButtonComponent, isStandalone: true, selector: "[et-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconAlignment: { classPropertyName: "iconAlignment", publicName: "iconAlignment", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-icon-alignment": "iconAlignment()", "attr.data-variant": "variant()", "attr.data-size": "size()", "attr.data-pressed-variant": "pressedVariant()", "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-button" }, hostDirectives: [{ directive: ButtonDirective, inputs: ["disabled", "disabled", "loading", "loading", "type", "type", "pressed", "pressed"] }, { directive: ButtonStylesDirective }, { directive: i1.ColorInteractiveDirective }, { directive: FocusRingDirective }, { directive: ButtonColorDirective, inputs: ["color", "color", "pressedColor", "pressedColor"] }], ngImport: i0, template: `
|
|
2619
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ButtonComponent, isStandalone: true, selector: "[et-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconAlignment: { classPropertyName: "iconAlignment", publicName: "iconAlignment", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-icon-alignment": "iconAlignment()", "attr.data-variant": "variant()", "attr.data-size": "size()", "attr.data-pressed-variant": "pressedVariant()", "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-button" }, hostDirectives: [{ directive: ButtonDirective, inputs: ["disabled", "disabled", "loading", "loading", "progress", "progress", "type", "type", "pressed", "pressed"] }, { directive: ButtonStylesDirective }, { directive: i1.ColorInteractiveDirective }, { directive: FocusRingDirective }, { directive: ButtonColorDirective, inputs: ["color", "color", "pressedColor", "pressedColor"] }], ngImport: i0, template: `
|
|
2613
2620
|
@if (iconAlignment() === 'start') {
|
|
2614
2621
|
<div class="et-button-icon">
|
|
2615
2622
|
<ng-container *ngTemplateOutlet="iconTpl" />
|
|
@@ -2631,6 +2638,9 @@ class ButtonComponent {
|
|
|
2631
2638
|
<et-spinner
|
|
2632
2639
|
[diameter]="spinnerConfig().diameter"
|
|
2633
2640
|
[strokeWidth]="spinnerConfig().strokeWidth"
|
|
2641
|
+
[determinate]="buttonDir.hasProgress()"
|
|
2642
|
+
[track]="buttonDir.hasProgress()"
|
|
2643
|
+
[value]="buttonDir.progress() ?? 0"
|
|
2634
2644
|
class="et-button-loader-spinner"
|
|
2635
2645
|
/>
|
|
2636
2646
|
</div>
|
|
@@ -2665,6 +2675,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
2665
2675
|
<et-spinner
|
|
2666
2676
|
[diameter]="spinnerConfig().diameter"
|
|
2667
2677
|
[strokeWidth]="spinnerConfig().strokeWidth"
|
|
2678
|
+
[determinate]="buttonDir.hasProgress()"
|
|
2679
|
+
[track]="buttonDir.hasProgress()"
|
|
2680
|
+
[value]="buttonDir.progress() ?? 0"
|
|
2668
2681
|
class="et-button-loader-spinner"
|
|
2669
2682
|
/>
|
|
2670
2683
|
</div>
|
|
@@ -2676,7 +2689,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
2676
2689
|
`, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, SpinnerComponent], hostDirectives: [
|
|
2677
2690
|
{
|
|
2678
2691
|
directive: ButtonDirective,
|
|
2679
|
-
inputs: ['disabled', 'loading', 'type', 'pressed'],
|
|
2692
|
+
inputs: ['disabled', 'loading', 'progress', 'type', 'pressed'],
|
|
2680
2693
|
},
|
|
2681
2694
|
ButtonStylesDirective,
|
|
2682
2695
|
ColorInteractiveDirective,
|
|
@@ -2715,7 +2728,7 @@ class IconButtonComponent {
|
|
|
2715
2728
|
...(ngDevMode ? [{ debugName: "pressedVariant" }] : /* istanbul ignore next */ []));
|
|
2716
2729
|
}
|
|
2717
2730
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2718
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: IconButtonComponent, isStandalone: true, selector: "[et-icon-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()", "attr.data-size": "size()", "attr.data-pressed-variant": "pressedVariant()", "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-icon-button" }, hostDirectives: [{ directive: ButtonDirective, inputs: ["disabled", "disabled", "loading", "loading", "type", "type", "pressed", "pressed", "emitAriaPressed", "emitAriaPressed"] }, { directive: ButtonStylesDirective }, { directive: i1.ColorInteractiveDirective }, { directive: FocusRingDirective }, { directive: ButtonColorDirective, inputs: ["color", "color", "pressedColor", "pressedColor"] }], ngImport: i0, template: `
|
|
2731
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: IconButtonComponent, isStandalone: true, selector: "[et-icon-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()", "attr.data-size": "size()", "attr.data-pressed-variant": "pressedVariant()", "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-icon-button" }, hostDirectives: [{ directive: ButtonDirective, inputs: ["disabled", "disabled", "loading", "loading", "progress", "progress", "type", "type", "pressed", "pressed", "emitAriaPressed", "emitAriaPressed"] }, { directive: ButtonStylesDirective }, { directive: i1.ColorInteractiveDirective }, { directive: FocusRingDirective }, { directive: ButtonColorDirective, inputs: ["color", "color", "pressedColor", "pressedColor"] }], ngImport: i0, template: `
|
|
2719
2732
|
<div class="et-icon-button-icon">
|
|
2720
2733
|
<ng-content select="[etIcon]" />
|
|
2721
2734
|
</div>
|
|
@@ -2725,6 +2738,9 @@ class IconButtonComponent {
|
|
|
2725
2738
|
<et-spinner
|
|
2726
2739
|
[diameter]="spinnerConfig().diameter"
|
|
2727
2740
|
[strokeWidth]="spinnerConfig().strokeWidth"
|
|
2741
|
+
[determinate]="buttonDir.hasProgress()"
|
|
2742
|
+
[track]="buttonDir.hasProgress()"
|
|
2743
|
+
[value]="buttonDir.progress() ?? 0"
|
|
2728
2744
|
class="et-button-loader-spinner"
|
|
2729
2745
|
/>
|
|
2730
2746
|
</div>
|
|
@@ -2743,6 +2759,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
2743
2759
|
<et-spinner
|
|
2744
2760
|
[diameter]="spinnerConfig().diameter"
|
|
2745
2761
|
[strokeWidth]="spinnerConfig().strokeWidth"
|
|
2762
|
+
[determinate]="buttonDir.hasProgress()"
|
|
2763
|
+
[track]="buttonDir.hasProgress()"
|
|
2764
|
+
[value]="buttonDir.progress() ?? 0"
|
|
2746
2765
|
class="et-button-loader-spinner"
|
|
2747
2766
|
/>
|
|
2748
2767
|
</div>
|
|
@@ -2750,7 +2769,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
2750
2769
|
`, encapsulation: ViewEncapsulation.None, imports: [SpinnerComponent], hostDirectives: [
|
|
2751
2770
|
{
|
|
2752
2771
|
directive: ButtonDirective,
|
|
2753
|
-
inputs: ['disabled', 'loading', 'type', 'pressed', 'emitAriaPressed'],
|
|
2772
|
+
inputs: ['disabled', 'loading', 'progress', 'type', 'pressed', 'emitAriaPressed'],
|
|
2754
2773
|
},
|
|
2755
2774
|
ButtonStylesDirective,
|
|
2756
2775
|
ColorInteractiveDirective,
|
|
@@ -8685,7 +8704,7 @@ class FabComponent {
|
|
|
8685
8704
|
...(ngDevMode ? [{ debugName: "expandedAttr" }] : /* istanbul ignore next */ []));
|
|
8686
8705
|
}
|
|
8687
8706
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8688
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: FabComponent, isStandalone: true, selector: "[et-fab]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, iconAlignment: { classPropertyName: "iconAlignment", publicName: "iconAlignment", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()", "attr.data-size": "size()", "attr.data-expanded": "expandedAttr()", "attr.data-icon-alignment": "iconAlignment()", "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-fab" }, hostDirectives: [{ directive: ButtonDirective, inputs: ["disabled", "disabled", "loading", "loading", "type", "type"] }, { directive: ButtonStylesDirective }, { directive: FocusRingDirective }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: `
|
|
8707
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: FabComponent, isStandalone: true, selector: "[et-fab]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, iconAlignment: { classPropertyName: "iconAlignment", publicName: "iconAlignment", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()", "attr.data-size": "size()", "attr.data-expanded": "expandedAttr()", "attr.data-icon-alignment": "iconAlignment()", "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-fab" }, hostDirectives: [{ directive: ButtonDirective, inputs: ["disabled", "disabled", "loading", "loading", "progress", "progress", "type", "type"] }, { directive: ButtonStylesDirective }, { directive: FocusRingDirective }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: `
|
|
8689
8708
|
@if (iconAlignment() === 'start') {
|
|
8690
8709
|
<div class="et-fab-icon">
|
|
8691
8710
|
<ng-container *ngTemplateOutlet="iconTpl" />
|
|
@@ -8705,6 +8724,9 @@ class FabComponent {
|
|
|
8705
8724
|
<et-spinner
|
|
8706
8725
|
[diameter]="spinnerConfig().diameter"
|
|
8707
8726
|
[strokeWidth]="spinnerConfig().strokeWidth"
|
|
8727
|
+
[determinate]="buttonDir.hasProgress()"
|
|
8728
|
+
[track]="buttonDir.hasProgress()"
|
|
8729
|
+
[value]="buttonDir.progress() ?? 0"
|
|
8708
8730
|
class="et-button-loader-spinner"
|
|
8709
8731
|
/>
|
|
8710
8732
|
</div>
|
|
@@ -8737,6 +8759,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
8737
8759
|
<et-spinner
|
|
8738
8760
|
[diameter]="spinnerConfig().diameter"
|
|
8739
8761
|
[strokeWidth]="spinnerConfig().strokeWidth"
|
|
8762
|
+
[determinate]="buttonDir.hasProgress()"
|
|
8763
|
+
[track]="buttonDir.hasProgress()"
|
|
8764
|
+
[value]="buttonDir.progress() ?? 0"
|
|
8740
8765
|
class="et-button-loader-spinner"
|
|
8741
8766
|
/>
|
|
8742
8767
|
</div>
|
|
@@ -8748,7 +8773,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
8748
8773
|
`, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, SpinnerComponent], hostDirectives: [
|
|
8749
8774
|
{
|
|
8750
8775
|
directive: ButtonDirective,
|
|
8751
|
-
inputs: ['disabled', 'loading', 'type'],
|
|
8776
|
+
inputs: ['disabled', 'loading', 'progress', 'type'],
|
|
8752
8777
|
},
|
|
8753
8778
|
ButtonStylesDirective,
|
|
8754
8779
|
FocusRingDirective,
|
|
@@ -8789,7 +8814,7 @@ class TextButtonComponent {
|
|
|
8789
8814
|
...(ngDevMode ? [{ debugName: "spinnerConfig" }] : /* istanbul ignore next */ []));
|
|
8790
8815
|
}
|
|
8791
8816
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TextButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8792
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TextButtonComponent, isStandalone: true, selector: "[et-text-button]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconAlignment: { classPropertyName: "iconAlignment", publicName: "iconAlignment", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-icon-alignment": "iconAlignment()", "attr.data-size": "size()", "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-text-button" }, hostDirectives: [{ directive: ButtonDirective, inputs: ["disabled", "disabled", "loading", "loading", "type", "type"] }, { directive: ButtonStylesDirective }, { directive: i1.ColorInteractiveDirective }, { directive: FocusRingDirective }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: `
|
|
8817
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TextButtonComponent, isStandalone: true, selector: "[et-text-button]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconAlignment: { classPropertyName: "iconAlignment", publicName: "iconAlignment", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-icon-alignment": "iconAlignment()", "attr.data-size": "size()", "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-text-button" }, hostDirectives: [{ directive: ButtonDirective, inputs: ["disabled", "disabled", "loading", "loading", "progress", "progress", "type", "type"] }, { directive: ButtonStylesDirective }, { directive: i1.ColorInteractiveDirective }, { directive: FocusRingDirective }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: `
|
|
8793
8818
|
@if (iconAlignment() === 'start') {
|
|
8794
8819
|
<div class="et-text-button-icon">
|
|
8795
8820
|
<ng-container *ngTemplateOutlet="iconTpl" />
|
|
@@ -8811,6 +8836,9 @@ class TextButtonComponent {
|
|
|
8811
8836
|
<et-spinner
|
|
8812
8837
|
[diameter]="spinnerConfig().diameter"
|
|
8813
8838
|
[strokeWidth]="spinnerConfig().strokeWidth"
|
|
8839
|
+
[determinate]="buttonDir.hasProgress()"
|
|
8840
|
+
[track]="buttonDir.hasProgress()"
|
|
8841
|
+
[value]="buttonDir.progress() ?? 0"
|
|
8814
8842
|
class="et-button-loader-spinner"
|
|
8815
8843
|
/>
|
|
8816
8844
|
</div>
|
|
@@ -8845,6 +8873,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
8845
8873
|
<et-spinner
|
|
8846
8874
|
[diameter]="spinnerConfig().diameter"
|
|
8847
8875
|
[strokeWidth]="spinnerConfig().strokeWidth"
|
|
8876
|
+
[determinate]="buttonDir.hasProgress()"
|
|
8877
|
+
[track]="buttonDir.hasProgress()"
|
|
8878
|
+
[value]="buttonDir.progress() ?? 0"
|
|
8848
8879
|
class="et-button-loader-spinner"
|
|
8849
8880
|
/>
|
|
8850
8881
|
</div>
|
|
@@ -8856,7 +8887,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
8856
8887
|
`, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, SpinnerComponent], hostDirectives: [
|
|
8857
8888
|
{
|
|
8858
8889
|
directive: ButtonDirective,
|
|
8859
|
-
inputs: ['disabled', 'loading', 'type'],
|
|
8890
|
+
inputs: ['disabled', 'loading', 'progress', 'type'],
|
|
8860
8891
|
},
|
|
8861
8892
|
ButtonStylesDirective,
|
|
8862
8893
|
ColorInteractiveDirective,
|
|
@@ -8899,7 +8930,7 @@ class WindowControlButtonComponent {
|
|
|
8899
8930
|
...(ngDevMode ? [{ debugName: "spinnerConfig" }] : /* istanbul ignore next */ []));
|
|
8900
8931
|
}
|
|
8901
8932
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: WindowControlButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8902
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: WindowControlButtonComponent, isStandalone: true, selector: "[et-window-control-button]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, kind: { classPropertyName: "kind", publicName: "kind", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-kind": "kind()", "attr.data-size": "size()", "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-window-control-button" }, hostDirectives: [{ directive: ButtonDirective, inputs: ["disabled", "disabled", "loading", "loading", "type", "type", "pressed", "pressed"] }, { directive: ButtonStylesDirective }, { directive: i1.ColorInteractiveDirective }, { directive: FocusRingDirective }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: `
|
|
8933
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: WindowControlButtonComponent, isStandalone: true, selector: "[et-window-control-button]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, kind: { classPropertyName: "kind", publicName: "kind", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-kind": "kind()", "attr.data-size": "size()", "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-window-control-button" }, hostDirectives: [{ directive: ButtonDirective, inputs: ["disabled", "disabled", "loading", "loading", "progress", "progress", "type", "type", "pressed", "pressed"] }, { directive: ButtonStylesDirective }, { directive: i1.ColorInteractiveDirective }, { directive: FocusRingDirective }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: `
|
|
8903
8934
|
<div class="et-window-control-button-icon">
|
|
8904
8935
|
<ng-content />
|
|
8905
8936
|
</div>
|
|
@@ -8909,6 +8940,9 @@ class WindowControlButtonComponent {
|
|
|
8909
8940
|
<et-spinner
|
|
8910
8941
|
[diameter]="spinnerConfig().diameter"
|
|
8911
8942
|
[strokeWidth]="spinnerConfig().strokeWidth"
|
|
8943
|
+
[determinate]="buttonDir.hasProgress()"
|
|
8944
|
+
[track]="buttonDir.hasProgress()"
|
|
8945
|
+
[value]="buttonDir.progress() ?? 0"
|
|
8912
8946
|
class="et-button-loader-spinner"
|
|
8913
8947
|
/>
|
|
8914
8948
|
</div>
|
|
@@ -8927,6 +8961,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
8927
8961
|
<et-spinner
|
|
8928
8962
|
[diameter]="spinnerConfig().diameter"
|
|
8929
8963
|
[strokeWidth]="spinnerConfig().strokeWidth"
|
|
8964
|
+
[determinate]="buttonDir.hasProgress()"
|
|
8965
|
+
[track]="buttonDir.hasProgress()"
|
|
8966
|
+
[value]="buttonDir.progress() ?? 0"
|
|
8930
8967
|
class="et-button-loader-spinner"
|
|
8931
8968
|
/>
|
|
8932
8969
|
</div>
|
|
@@ -8934,7 +8971,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
8934
8971
|
`, encapsulation: ViewEncapsulation.None, imports: [SpinnerComponent], hostDirectives: [
|
|
8935
8972
|
{
|
|
8936
8973
|
directive: ButtonDirective,
|
|
8937
|
-
inputs: ['disabled', 'loading', 'type', 'pressed'],
|
|
8974
|
+
inputs: ['disabled', 'loading', 'progress', 'type', 'pressed'],
|
|
8938
8975
|
},
|
|
8939
8976
|
ButtonStylesDirective,
|
|
8940
8977
|
ColorInteractiveDirective,
|
|
@@ -9676,6 +9713,18 @@ const resolveOriginDocument = (origin, fallback) => {
|
|
|
9676
9713
|
return origin.target.ownerDocument ?? fallback;
|
|
9677
9714
|
return fallback;
|
|
9678
9715
|
};
|
|
9716
|
+
/**
|
|
9717
|
+
* The stacking level an overlay opened from `origin` mounts at: whatever the nearest ancestor
|
|
9718
|
+
* declaring `data-et-overlay-layer` says, so an overlay opened from inside an always-on-top surface
|
|
9719
|
+
* (the query devtools panel, say) is not painted behind it.
|
|
9720
|
+
*/
|
|
9721
|
+
const resolveZIndex = (origin, document) => {
|
|
9722
|
+
const resolved = resolveOrigin(origin, document);
|
|
9723
|
+
if (resolved instanceof HTMLElement) {
|
|
9724
|
+
return resolveOverlayLayer(resolved);
|
|
9725
|
+
}
|
|
9726
|
+
return resolveOverlayLayer(resolved?.target instanceof Element ? resolved.target : null);
|
|
9727
|
+
};
|
|
9679
9728
|
const OVERLAY_MANAGER_DEF = /* @__PURE__ */ defineRootProvider(() => {
|
|
9680
9729
|
const overlayRuntime = injectOverlayRuntime();
|
|
9681
9730
|
const injector = inject(EnvironmentInjector);
|
|
@@ -9706,6 +9755,7 @@ const OVERLAY_MANAGER_DEF = /* @__PURE__ */ defineRootProvider(() => {
|
|
|
9706
9755
|
id,
|
|
9707
9756
|
component,
|
|
9708
9757
|
document: resolveOriginDocument(config.origin, document),
|
|
9758
|
+
zIndex: config.zIndex ?? resolveZIndex(config.origin, document),
|
|
9709
9759
|
viewContainerRef: config.viewContainerRef,
|
|
9710
9760
|
injector: config.injector,
|
|
9711
9761
|
providers: [{ provide: OVERLAY_REF, useValue: overlayRef }, ...(config.providers ?? [])],
|
|
@@ -9745,6 +9795,7 @@ const OVERLAY_MANAGER_DEF = /* @__PURE__ */ defineRootProvider(() => {
|
|
|
9745
9795
|
id,
|
|
9746
9796
|
component: OverlayContainerComponent,
|
|
9747
9797
|
document: resolveOriginDocument(resolvedConfig.origin, document),
|
|
9798
|
+
zIndex: resolvedConfig.zIndex ?? resolveZIndex(resolvedConfig.origin, document),
|
|
9748
9799
|
viewContainerRef: resolvedConfig.viewContainerRef,
|
|
9749
9800
|
injector: resolvedConfig.injector,
|
|
9750
9801
|
providers: [{ provide: OVERLAY_REF, useValue: overlayRef }, ...(resolvedConfig.providers ?? [])],
|
|
@@ -55043,6 +55094,7 @@ let nextHeadingId = 0;
|
|
|
55043
55094
|
class StreamConsentComponent {
|
|
55044
55095
|
constructor() {
|
|
55045
55096
|
this.parentSurfaceProvider = inject(SURFACE_PROVIDER, { optional: true, skipSelf: true });
|
|
55097
|
+
this.surfaceType = injectSurfaceType();
|
|
55046
55098
|
this.config = injectStreamConsentConfig();
|
|
55047
55099
|
this.labels = injectStreamLabels();
|
|
55048
55100
|
this.surfaceThemes = injectSurfaceThemes({ optional: true });
|
|
@@ -55051,7 +55103,7 @@ class StreamConsentComponent {
|
|
|
55051
55103
|
const themes = this.surfaceThemes;
|
|
55052
55104
|
if (!themes)
|
|
55053
55105
|
return null;
|
|
55054
|
-
const type = this.
|
|
55106
|
+
const type = this.surfaceType();
|
|
55055
55107
|
const elevation = (this.parentSurfaceProvider?.elevation() ?? 0) + 1;
|
|
55056
55108
|
return resolveSurfaceByElevation(themes, type, elevation)?.name ?? null;
|
|
55057
55109
|
}, /* @ts-ignore */
|
|
@@ -55125,6 +55177,7 @@ class StreamPlayerErrorComponent {
|
|
|
55125
55177
|
constructor() {
|
|
55126
55178
|
this.errorDirective = inject(STREAM_PLAYER_ERROR_TOKEN);
|
|
55127
55179
|
this.parentSurfaceProvider = inject(SURFACE_PROVIDER, { optional: true, skipSelf: true });
|
|
55180
|
+
this.surfaceType = injectSurfaceType();
|
|
55128
55181
|
this.config = injectStreamPlayerErrorConfig();
|
|
55129
55182
|
this.labels = injectStreamLabels();
|
|
55130
55183
|
this.surfaceThemes = injectSurfaceThemes({ optional: true });
|
|
@@ -55132,7 +55185,7 @@ class StreamPlayerErrorComponent {
|
|
|
55132
55185
|
const themes = this.surfaceThemes;
|
|
55133
55186
|
if (!themes)
|
|
55134
55187
|
return null;
|
|
55135
|
-
const type = this.
|
|
55188
|
+
const type = this.surfaceType();
|
|
55136
55189
|
const elevation = (this.parentSurfaceProvider?.elevation() ?? 0) + 1;
|
|
55137
55190
|
return resolveSurfaceByElevation(themes, type, elevation)?.name ?? null;
|
|
55138
55191
|
}, /* @ts-ignore */
|
|
@@ -56961,6 +57014,7 @@ class PipSlotPlaceholderComponent {
|
|
|
56961
57014
|
constructor() {
|
|
56962
57015
|
this.slotPlayerId = inject(STREAM_SLOT_PLAYER_ID_TOKEN);
|
|
56963
57016
|
this.parentSurfaceProvider = inject(SURFACE_PROVIDER, { optional: true, skipSelf: true });
|
|
57017
|
+
this.surfaceType = injectSurfaceType();
|
|
56964
57018
|
this.pipManager = injectPipManager();
|
|
56965
57019
|
this.config = injectPipSlotPlaceholderConfig();
|
|
56966
57020
|
this.labels = injectStreamLabels();
|
|
@@ -56971,7 +57025,7 @@ class PipSlotPlaceholderComponent {
|
|
|
56971
57025
|
const themes = this.surfaceThemes;
|
|
56972
57026
|
if (!themes)
|
|
56973
57027
|
return null;
|
|
56974
|
-
const type = this.
|
|
57028
|
+
const type = this.surfaceType();
|
|
56975
57029
|
const elevation = (this.parentSurfaceProvider?.elevation() ?? 0) + 1;
|
|
56976
57030
|
return resolveSurfaceByElevation(themes, type, elevation)?.name ?? null;
|
|
56977
57031
|
}, /* @ts-ignore */
|
|
@@ -57364,6 +57418,7 @@ class StreamPlayerSlotDirective {
|
|
|
57364
57418
|
this.playerComponent = inject(STREAM_PLAYER_COMPONENT_TOKEN);
|
|
57365
57419
|
this.provideSurface = inject(ProvideSurfaceDirective);
|
|
57366
57420
|
this.parentSurfaceProvider = inject(SURFACE_PROVIDER, { optional: true, skipSelf: true });
|
|
57421
|
+
this.surfaceType = injectSurfaceType();
|
|
57367
57422
|
this.surfaceThemes = injectSurfaceThemes({ optional: true });
|
|
57368
57423
|
this.styleManager = injectStyleManager();
|
|
57369
57424
|
this.streamSlotPriority = input(false, { ...(ngDevMode ? { debugName: "streamSlotPriority" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
@@ -57373,7 +57428,7 @@ class StreamPlayerSlotDirective {
|
|
|
57373
57428
|
const themes = this.surfaceThemes;
|
|
57374
57429
|
if (!themes)
|
|
57375
57430
|
return null;
|
|
57376
|
-
const type = this.
|
|
57431
|
+
const type = this.surfaceType();
|
|
57377
57432
|
const elevation = (this.parentSurfaceProvider?.elevation() ?? 0) + 1;
|
|
57378
57433
|
return resolveSurfaceByElevation(themes, type, elevation);
|
|
57379
57434
|
}, /* @ts-ignore */
|
|
@@ -66268,7 +66323,7 @@ const TREE_IMPORTS = [TreeComponent, TreeDirective, TreeNodeDirective, TreeNodeD
|
|
|
66268
66323
|
|
|
66269
66324
|
// Generated from package.json by tools/scripts/generate-version.js - do not edit.
|
|
66270
66325
|
/** The version of `@ethlete/components` this build was cut from. */
|
|
66271
|
-
const COMPONENTS_VERSION = '1.0.0-next.
|
|
66326
|
+
const COMPONENTS_VERSION = '1.0.0-next.51';
|
|
66272
66327
|
|
|
66273
66328
|
/**
|
|
66274
66329
|
* Generated bundle index. Do not edit.
|