@ethlete/components 1.0.0-next.49 → 1.0.0-next.50
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,19 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 1.0.0-next.50
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`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.
|
|
8
|
+
|
|
9
|
+
- [#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.
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`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
|
|
14
|
+
`initial-value`, so its default could not apply. It now defaults to `currentColor` at 24%, and a
|
|
15
|
+
button's determinate loading spinner shows its track.
|
|
16
|
+
|
|
3
17
|
## 1.0.0-next.49
|
|
4
18
|
|
|
5
19
|
### 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, 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 ?? [])],
|
|
@@ -66268,7 +66319,7 @@ const TREE_IMPORTS = [TreeComponent, TreeDirective, TreeNodeDirective, TreeNodeD
|
|
|
66268
66319
|
|
|
66269
66320
|
// Generated from package.json by tools/scripts/generate-version.js - do not edit.
|
|
66270
66321
|
/** The version of `@ethlete/components` this build was cut from. */
|
|
66271
|
-
const COMPONENTS_VERSION = '1.0.0-next.
|
|
66322
|
+
const COMPONENTS_VERSION = '1.0.0-next.50';
|
|
66272
66323
|
|
|
66273
66324
|
/**
|
|
66274
66325
|
* Generated bundle index. Do not edit.
|