@ethlete/core 5.0.0-next.7 → 5.0.0-next.8
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 +6 -0
- package/fesm2022/ethlete-core.mjs +190 -59
- package/fesm2022/ethlete-core.mjs.map +1 -1
- package/generators/generators.json +9 -4
- package/generators/migrate-to-v5/color-naming.js +173 -0
- package/generators/migrate-to-v5/migration.js +6 -0
- package/generators/migrate-to-v5/schema.json +5 -0
- package/generators/{tailwind-4-theme → tailwind-4-color-theme}/generator.js +12 -12
- package/generators/{tailwind-4-theme → tailwind-4-color-theme}/schema.json +1 -1
- package/generators/tailwind-4-surface-theme/generator.js +267 -0
- package/generators/tailwind-4-surface-theme/schema.json +32 -0
- package/package.json +1 -1
- package/types/ethlete-core.d.ts +115 -30
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @ethlete/core
|
|
2
2
|
|
|
3
|
+
## 5.0.0-next.8
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#2958](https://github.com/ethlete-io/ethdk/pull/2958) [`8ecdfc0`](https://github.com/ethlete-io/ethdk/commit/8ecdfc00d785b0b535601b5d95ca7e2cd55455b6) Thanks [@github-actions](https://github.com/apps/github-actions)! - Add surface theming support alongside color theming
|
|
8
|
+
|
|
3
9
|
## 5.0.0-next.7
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
|
@@ -3357,7 +3357,7 @@ class AnimatedOverlayDirective {
|
|
|
3357
3357
|
this.unmountSubscription?.unsubscribe();
|
|
3358
3358
|
this.unmountSubscription = null;
|
|
3359
3359
|
this.applyComponentData(config.data);
|
|
3360
|
-
this.
|
|
3360
|
+
this.applyColorProvider(config.colorProvider);
|
|
3361
3361
|
const lifecycle = this.componentRef.instance.animatedLifecycle();
|
|
3362
3362
|
if (lifecycle) {
|
|
3363
3363
|
this.state.set('mounting');
|
|
@@ -3380,7 +3380,7 @@ class AnimatedOverlayDirective {
|
|
|
3380
3380
|
}
|
|
3381
3381
|
return;
|
|
3382
3382
|
}
|
|
3383
|
-
const { component, providers, data,
|
|
3383
|
+
const { component, providers, data, colorProvider } = config;
|
|
3384
3384
|
this.state.set('mounting');
|
|
3385
3385
|
this.beforeOpened$.next();
|
|
3386
3386
|
const injector = Injector.create({
|
|
@@ -3391,7 +3391,7 @@ class AnimatedOverlayDirective {
|
|
|
3391
3391
|
this.portal = new ComponentPortal(component, this.viewContainerRef, injector);
|
|
3392
3392
|
this.componentRef = this.overlayRef.attach(this.portal);
|
|
3393
3393
|
this.applyComponentData(data);
|
|
3394
|
-
this.
|
|
3394
|
+
this.applyColorProvider(colorProvider);
|
|
3395
3395
|
this.updateOverlaySize();
|
|
3396
3396
|
this.setupFloatingUI();
|
|
3397
3397
|
return this.componentRef.instance;
|
|
@@ -3437,10 +3437,10 @@ class AnimatedOverlayDirective {
|
|
|
3437
3437
|
Object.assign(this.componentRef.instance, data);
|
|
3438
3438
|
this.componentRef.changeDetectorRef.markForCheck();
|
|
3439
3439
|
}
|
|
3440
|
-
|
|
3441
|
-
if (!this.componentRef || !
|
|
3440
|
+
applyColorProvider(colorProvider) {
|
|
3441
|
+
if (!this.componentRef || !colorProvider)
|
|
3442
3442
|
return;
|
|
3443
|
-
this.componentRef.instance.
|
|
3443
|
+
this.componentRef.instance.setColorFromProvider(colorProvider);
|
|
3444
3444
|
}
|
|
3445
3445
|
updateOverlaySize() {
|
|
3446
3446
|
if (!this.overlayRef || !this.mirrorWidth())
|
|
@@ -5639,43 +5639,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
|
|
|
5639
5639
|
}]
|
|
5640
5640
|
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
|
|
5641
5641
|
|
|
5642
|
-
|
|
5643
|
-
|
|
5644
|
-
|
|
5642
|
+
const createCssColorThemeName = (name) => name.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`);
|
|
5643
|
+
const [ɵProvideColorThemes, injectColorThemes] = createStaticProvider(undefined, {
|
|
5644
|
+
name: 'Color Themes',
|
|
5645
|
+
});
|
|
5646
|
+
const [ɵProvideColorThemesPrefix, injectColorThemesPrefix] = createStaticProvider('et', {
|
|
5647
|
+
name: 'Themes Prefix',
|
|
5648
|
+
});
|
|
5649
|
+
const provideColorThemesWithTailwind4 = (themes, prefix = 'et') => [
|
|
5650
|
+
ɵProvideColorThemes(themes.map((theme) => theme.name)),
|
|
5651
|
+
ɵProvideColorThemesPrefix(prefix),
|
|
5652
|
+
];
|
|
5653
|
+
|
|
5654
|
+
class ColoredStylesComponent {
|
|
5655
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ColoredStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5656
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: ColoredStylesComponent, isStandalone: true, selector: "et-colored-styles", ngImport: i0, template: '', isInline: true, styles: [":where(.et-colored){--et-theme-color-primary-rgb: var(--et-color-primary);--et-theme-color-primary-opacity: 1;--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-primary: rgb(var(--et-theme-color-primary-rgb) / var(--et-theme-color-primary-opacity));--et-theme-color-on-primary-rgb: var(--et-color-on-primary);--et-theme-color-on-primary-opacity: 1;--et-theme-color-on-primary-solid: rgb( var(--et-theme-color-on-primary-rgb) / var(--et-theme-color-on-primary-opacity) );--et-theme-color-on-primary: rgb(var(--et-theme-color-on-primary-rgb) / var(--et-theme-color-on-primary-opacity));--et-theme-color-ink-rgb: var(--et-color-primary-ink, var(--et-color-primary));--et-theme-color-ink-opacity: 1;--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb) / var(--et-theme-color-ink-opacity));--et-theme-color-ink: rgb(var(--et-theme-color-ink-rgb) / var(--et-theme-color-ink-opacity))}:where(.et-colored:hover){--et-theme-color-primary-rgb: var(--et-color-primary-hover, var(--et-color-primary));--et-theme-color-on-primary-rgb: var(--et-color-on-primary-hover, var(--et-color-on-primary));--et-theme-color-ink-rgb: var( --et-color-primary-ink-hover, var(--et-color-primary-ink, var(--et-color-primary-hover, var(--et-color-primary))) )}:where(.et-colored:focus-visible){--et-theme-color-primary-rgb: var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)));--et-theme-color-on-primary-rgb: var( --et-color-on-primary-focus, var(--et-color-on-primary-hover, var(--et-color-on-primary)) );--et-theme-color-ink-rgb: var( --et-color-primary-ink-focus, var( --et-color-primary-ink-hover, var(--et-color-primary-ink, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)))) ) )}:where(.et-colored:active){--et-theme-color-primary-rgb: var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) );--et-theme-color-on-primary-rgb: var( --et-color-on-primary-active, var(--et-color-on-primary-focus, var(--et-color-on-primary-hover, var(--et-color-on-primary))) );--et-theme-color-ink-rgb: var( --et-color-primary-ink-active, var( --et-color-primary-ink-focus, var( --et-color-primary-ink-hover, var( --et-color-primary-ink, var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) ) ) ) ) )}:where(.et-colored[disabled]),:where(.et-colored[aria-disabled=true]){--et-theme-color-primary-rgb: var( --et-color-primary-disabled, var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) ) );--et-theme-color-on-primary-rgb: var( --et-color-on-primary-disabled, var( --et-color-on-primary-active, var(--et-color-on-primary-focus, var(--et-color-on-primary-hover, var(--et-color-on-primary))) ) );--et-theme-color-ink-rgb: var( --et-color-primary-ink-disabled, var( --et-color-primary-ink-active, var( --et-color-primary-ink-focus, var( --et-color-primary-ink-hover, var( --et-color-primary-ink, var( --et-color-primary-disabled, var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) ) ) ) ) ) ) )}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
5645
5657
|
}
|
|
5646
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type:
|
|
5658
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ColoredStylesComponent, decorators: [{
|
|
5647
5659
|
type: Component,
|
|
5648
|
-
args: [{ selector: 'et-
|
|
5660
|
+
args: [{ selector: 'et-colored-styles', template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":where(.et-colored){--et-theme-color-primary-rgb: var(--et-color-primary);--et-theme-color-primary-opacity: 1;--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-primary: rgb(var(--et-theme-color-primary-rgb) / var(--et-theme-color-primary-opacity));--et-theme-color-on-primary-rgb: var(--et-color-on-primary);--et-theme-color-on-primary-opacity: 1;--et-theme-color-on-primary-solid: rgb( var(--et-theme-color-on-primary-rgb) / var(--et-theme-color-on-primary-opacity) );--et-theme-color-on-primary: rgb(var(--et-theme-color-on-primary-rgb) / var(--et-theme-color-on-primary-opacity));--et-theme-color-ink-rgb: var(--et-color-primary-ink, var(--et-color-primary));--et-theme-color-ink-opacity: 1;--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb) / var(--et-theme-color-ink-opacity));--et-theme-color-ink: rgb(var(--et-theme-color-ink-rgb) / var(--et-theme-color-ink-opacity))}:where(.et-colored:hover){--et-theme-color-primary-rgb: var(--et-color-primary-hover, var(--et-color-primary));--et-theme-color-on-primary-rgb: var(--et-color-on-primary-hover, var(--et-color-on-primary));--et-theme-color-ink-rgb: var( --et-color-primary-ink-hover, var(--et-color-primary-ink, var(--et-color-primary-hover, var(--et-color-primary))) )}:where(.et-colored:focus-visible){--et-theme-color-primary-rgb: var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)));--et-theme-color-on-primary-rgb: var( --et-color-on-primary-focus, var(--et-color-on-primary-hover, var(--et-color-on-primary)) );--et-theme-color-ink-rgb: var( --et-color-primary-ink-focus, var( --et-color-primary-ink-hover, var(--et-color-primary-ink, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)))) ) )}:where(.et-colored:active){--et-theme-color-primary-rgb: var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) );--et-theme-color-on-primary-rgb: var( --et-color-on-primary-active, var(--et-color-on-primary-focus, var(--et-color-on-primary-hover, var(--et-color-on-primary))) );--et-theme-color-ink-rgb: var( --et-color-primary-ink-active, var( --et-color-primary-ink-focus, var( --et-color-primary-ink-hover, var( --et-color-primary-ink, var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) ) ) ) ) )}:where(.et-colored[disabled]),:where(.et-colored[aria-disabled=true]){--et-theme-color-primary-rgb: var( --et-color-primary-disabled, var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) ) );--et-theme-color-on-primary-rgb: var( --et-color-on-primary-disabled, var( --et-color-on-primary-active, var(--et-color-on-primary-focus, var(--et-color-on-primary-hover, var(--et-color-on-primary))) ) );--et-theme-color-ink-rgb: var( --et-color-primary-ink-disabled, var( --et-color-primary-ink-active, var( --et-color-primary-ink-focus, var( --et-color-primary-ink-hover, var( --et-color-primary-ink, var( --et-color-primary-disabled, var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) ) ) ) ) ) ) )}\n"] }]
|
|
5649
5661
|
}] });
|
|
5650
5662
|
|
|
5651
|
-
class
|
|
5663
|
+
class ColoredDirective {
|
|
5652
5664
|
constructor() {
|
|
5653
5665
|
this.styleManager = injectStyleManager();
|
|
5654
|
-
this.styleManager.mount(
|
|
5666
|
+
this.styleManager.mount(ColoredStylesComponent);
|
|
5655
5667
|
}
|
|
5656
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type:
|
|
5657
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type:
|
|
5668
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ColoredDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5669
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: ColoredDirective, isStandalone: true, selector: "[etColored]", host: { classAttribute: "et-colored" }, ngImport: i0 }); }
|
|
5658
5670
|
}
|
|
5659
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type:
|
|
5671
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ColoredDirective, decorators: [{
|
|
5660
5672
|
type: Directive,
|
|
5661
5673
|
args: [{
|
|
5662
|
-
selector: '[
|
|
5674
|
+
selector: '[etColored]',
|
|
5663
5675
|
host: {
|
|
5664
|
-
class: 'et-
|
|
5676
|
+
class: 'et-colored',
|
|
5665
5677
|
},
|
|
5666
5678
|
}]
|
|
5667
5679
|
}], ctorParameters: () => [] });
|
|
5668
5680
|
|
|
5669
|
-
const createCssThemeName = (name) => name.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`);
|
|
5670
|
-
const [ɵProvideColorThemes, injectColorThemes] = createStaticProvider(undefined, {
|
|
5671
|
-
name: 'Color Themes',
|
|
5672
|
-
});
|
|
5673
|
-
const [ɵProvideThemesPrefix, injectThemesPrefix] = createStaticProvider('et', { name: 'Themes Prefix' });
|
|
5674
|
-
const provideColorThemesWithTailwind4 = (themes, prefix = 'et') => [
|
|
5675
|
-
ɵProvideColorThemes(themes.map((theme) => theme.name)),
|
|
5676
|
-
ɵProvideThemesPrefix(prefix),
|
|
5677
|
-
];
|
|
5678
|
-
|
|
5679
5681
|
/**
|
|
5680
5682
|
* @deprecated Migrate to Tailwind v4. Intent to remove in v6.
|
|
5681
5683
|
*/
|
|
@@ -5739,7 +5741,7 @@ const createRootThemeCss = (themes) => {
|
|
|
5739
5741
|
};
|
|
5740
5742
|
const vars = [];
|
|
5741
5743
|
for (const theme of themes) {
|
|
5742
|
-
const name =
|
|
5744
|
+
const name = createCssColorThemeName(theme.name);
|
|
5743
5745
|
if (theme.secondary || theme.tertiary) {
|
|
5744
5746
|
vars.push(createVars(`${name}-primary`, theme.primary));
|
|
5745
5747
|
if (theme.secondary) {
|
|
@@ -5767,7 +5769,7 @@ const createRootThemeCss = (themes) => {
|
|
|
5767
5769
|
* @deprecated Migrate to Tailwind v4. Intent to remove in v6.
|
|
5768
5770
|
*/
|
|
5769
5771
|
const createThemeStyle = (theme, isAlt) => {
|
|
5770
|
-
const cssThemeName =
|
|
5772
|
+
const cssThemeName = createCssColorThemeName(theme.name);
|
|
5771
5773
|
const stringSuffix = isAlt ? '-alt' : '';
|
|
5772
5774
|
const selectors = [
|
|
5773
5775
|
...((theme.isDefault && !isAlt) || (theme.isDefaultAlt && isAlt)
|
|
@@ -5861,44 +5863,44 @@ const provideColorThemes = (themes) => {
|
|
|
5861
5863
|
createThemeStyle(theme, true);
|
|
5862
5864
|
}
|
|
5863
5865
|
createRootThemeCss(themes);
|
|
5864
|
-
return [ɵProvideColorThemes(themes.map((theme) => theme.name)),
|
|
5866
|
+
return [ɵProvideColorThemes(themes.map((theme) => theme.name)), ɵProvideColorThemesPrefix('et')];
|
|
5865
5867
|
};
|
|
5866
5868
|
|
|
5867
|
-
const
|
|
5868
|
-
class
|
|
5869
|
+
const COLOR_PROVIDER = new InjectionToken('ColorProvider');
|
|
5870
|
+
class ProvideColorDirective {
|
|
5869
5871
|
constructor() {
|
|
5870
5872
|
this.themes = injectColorThemes({ optional: true });
|
|
5871
|
-
this.prefix =
|
|
5873
|
+
this.prefix = injectColorThemesPrefix({ optional: true });
|
|
5872
5874
|
this.injector = inject(Injector);
|
|
5873
5875
|
this.currentProviderSync = null;
|
|
5874
|
-
this.
|
|
5875
|
-
this.
|
|
5876
|
-
this.
|
|
5877
|
-
const value = this.
|
|
5876
|
+
this.mainColor = input(undefined, { ...(ngDevMode ? { debugName: "mainColor" } : {}), alias: 'etProvideColor' });
|
|
5877
|
+
this.altColor = input(undefined, { ...(ngDevMode ? { debugName: "altColor" } : {}), alias: 'etProvideAltColor' });
|
|
5878
|
+
this.mainColorName = computed(() => {
|
|
5879
|
+
const value = this.mainColor();
|
|
5878
5880
|
if (!this.themes || !value)
|
|
5879
5881
|
return;
|
|
5880
5882
|
if (isDevMode() && !this.themes?.some((theme) => theme === value) && value !== null) {
|
|
5881
5883
|
console.error(`Theme ${value} does not exist. Please make sure to add it to provideColorThemes()`);
|
|
5882
5884
|
}
|
|
5883
|
-
return
|
|
5884
|
-
}, ...(ngDevMode ? [{ debugName: "
|
|
5885
|
-
this.
|
|
5886
|
-
const value = this.
|
|
5885
|
+
return createCssColorThemeName(value);
|
|
5886
|
+
}, ...(ngDevMode ? [{ debugName: "mainColorName" }] : []));
|
|
5887
|
+
this.altColorName = computed(() => {
|
|
5888
|
+
const value = this.altColor();
|
|
5887
5889
|
if (!this.themes || !value)
|
|
5888
5890
|
return;
|
|
5889
5891
|
if (isDevMode() && !this.themes?.some((theme) => theme === value) && value !== null) {
|
|
5890
5892
|
console.warn(`Theme ${value} does not exist. Please make sure to add it to provideColorThemes()`);
|
|
5891
5893
|
}
|
|
5892
|
-
return
|
|
5893
|
-
}, ...(ngDevMode ? [{ debugName: "
|
|
5894
|
+
return createCssColorThemeName(value);
|
|
5895
|
+
}, ...(ngDevMode ? [{ debugName: "altColorName" }] : []));
|
|
5894
5896
|
this.themeClass = computed(() => {
|
|
5895
5897
|
const themes = [];
|
|
5896
5898
|
const prefix = this.prefix || 'et';
|
|
5897
|
-
if (this.
|
|
5898
|
-
themes.push(`${prefix}-
|
|
5899
|
+
if (this.mainColorName()) {
|
|
5900
|
+
themes.push(`${prefix}-color--${this.mainColorName()}`);
|
|
5899
5901
|
}
|
|
5900
|
-
if (this.
|
|
5901
|
-
themes.push(`${prefix}-
|
|
5902
|
+
if (this.altColorName()) {
|
|
5903
|
+
themes.push(`${prefix}-color-alt--${this.altColorName()}`);
|
|
5902
5904
|
}
|
|
5903
5905
|
return themes.join(' ');
|
|
5904
5906
|
}, ...(ngDevMode ? [{ debugName: "themeClass" }] : []));
|
|
@@ -5907,11 +5909,11 @@ class ProvideThemeDirective {
|
|
|
5907
5909
|
this.currentProviderSync?.destroy();
|
|
5908
5910
|
runInInjectionContext(this.injector, () => {
|
|
5909
5911
|
this.currentProviderSync = effect(() => {
|
|
5910
|
-
const
|
|
5911
|
-
const
|
|
5912
|
+
const provideMainColor = provider.mainColor();
|
|
5913
|
+
const provideAltColor = provider.altColor();
|
|
5912
5914
|
untracked(() => {
|
|
5913
|
-
setInputSignal(this.
|
|
5914
|
-
setInputSignal(this.
|
|
5915
|
+
setInputSignal(this.mainColor, provideMainColor);
|
|
5916
|
+
setInputSignal(this.altColor, provideAltColor);
|
|
5915
5917
|
});
|
|
5916
5918
|
}, ...(ngDevMode ? [{ debugName: "currentProviderSync" }] : []));
|
|
5917
5919
|
});
|
|
@@ -5920,23 +5922,152 @@ class ProvideThemeDirective {
|
|
|
5920
5922
|
this.currentProviderSync?.destroy();
|
|
5921
5923
|
this.currentProviderSync = null;
|
|
5922
5924
|
}
|
|
5923
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type:
|
|
5924
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type:
|
|
5925
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ProvideColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5926
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: ProvideColorDirective, isStandalone: true, selector: "[etProvideColor]", inputs: { mainColor: { classPropertyName: "mainColor", publicName: "etProvideColor", isSignal: true, isRequired: false, transformFunction: null }, altColor: { classPropertyName: "altColor", publicName: "etProvideAltColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "themeClass()" } }, providers: [{ provide: COLOR_PROVIDER, useExisting: ProvideColorDirective }], ngImport: i0 }); }
|
|
5925
5927
|
}
|
|
5926
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type:
|
|
5928
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ProvideColorDirective, decorators: [{
|
|
5927
5929
|
type: Directive,
|
|
5928
5930
|
args: [{
|
|
5929
|
-
selector: '[
|
|
5930
|
-
providers: [{ provide:
|
|
5931
|
+
selector: '[etProvideColor]',
|
|
5932
|
+
providers: [{ provide: COLOR_PROVIDER, useExisting: ProvideColorDirective }],
|
|
5931
5933
|
host: {
|
|
5932
5934
|
'[class]': 'themeClass()',
|
|
5933
5935
|
},
|
|
5934
5936
|
}]
|
|
5935
|
-
}], propDecorators: {
|
|
5937
|
+
}], propDecorators: { mainColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "etProvideColor", required: false }] }], altColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "etProvideAltColor", required: false }] }] } });
|
|
5938
|
+
|
|
5939
|
+
const SURFACE_TYPE = {
|
|
5940
|
+
LIGHT: 'light',
|
|
5941
|
+
DARK: 'dark',
|
|
5942
|
+
};
|
|
5943
|
+
const createCssSurfaceName = (name) => name.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`);
|
|
5944
|
+
const resolveSurfaceByElevation = (themes, type, elevation) => themes.find((t) => t.type === type && t.elevation === elevation) ?? null;
|
|
5945
|
+
const [ɵProvideSurfaceThemes, injectSurfaceThemes] = createStaticProvider(undefined, {
|
|
5946
|
+
name: 'Surface Themes',
|
|
5947
|
+
});
|
|
5948
|
+
const [ɵProvideSurfaceThemesPrefix, injectSurfaceThemesPrefix] = createStaticProvider('et', {
|
|
5949
|
+
name: 'Surface Themes Prefix',
|
|
5950
|
+
});
|
|
5951
|
+
const provideSurfaceThemesWithTailwind4 = (themes, prefix = 'et') => [
|
|
5952
|
+
ɵProvideSurfaceThemes(themes),
|
|
5953
|
+
ɵProvideSurfaceThemesPrefix(prefix),
|
|
5954
|
+
];
|
|
5955
|
+
|
|
5956
|
+
const SURFACE_PROVIDER = new InjectionToken('SurfaceProvider');
|
|
5957
|
+
class ProvideSurfaceDirective {
|
|
5958
|
+
constructor() {
|
|
5959
|
+
this.themes = injectSurfaceThemes({ optional: true });
|
|
5960
|
+
this.prefix = injectSurfaceThemesPrefix({ optional: true });
|
|
5961
|
+
this.injector = inject(Injector);
|
|
5962
|
+
this.currentProviderSync = null;
|
|
5963
|
+
this.surface = input(undefined, { ...(ngDevMode ? { debugName: "surface" } : {}), alias: 'etProvideSurface' });
|
|
5964
|
+
this.resolvedTheme = computed(() => {
|
|
5965
|
+
const value = this.surface();
|
|
5966
|
+
if (!this.themes || !value)
|
|
5967
|
+
return null;
|
|
5968
|
+
const theme = this.themes.find((t) => t.name === value) ?? null;
|
|
5969
|
+
if (isDevMode() && !theme && value !== null) {
|
|
5970
|
+
console.error(`Surface theme ${value} does not exist. Please make sure to add it to provideSurfaceThemesWithTailwind4()`);
|
|
5971
|
+
}
|
|
5972
|
+
return theme;
|
|
5973
|
+
}, ...(ngDevMode ? [{ debugName: "resolvedTheme" }] : []));
|
|
5974
|
+
this.elevation = computed(() => this.resolvedTheme()?.elevation ?? 0, ...(ngDevMode ? [{ debugName: "elevation" }] : []));
|
|
5975
|
+
this.surfaceType = computed(() => this.resolvedTheme()?.type ?? null, ...(ngDevMode ? [{ debugName: "surfaceType" }] : []));
|
|
5976
|
+
this.neutralColor = computed(() => this.resolvedTheme()?.neutralColor ?? null, ...(ngDevMode ? [{ debugName: "neutralColor" }] : []));
|
|
5977
|
+
this.surfaceName = computed(() => {
|
|
5978
|
+
const value = this.surface();
|
|
5979
|
+
if (!this.themes || !value)
|
|
5980
|
+
return;
|
|
5981
|
+
return createCssSurfaceName(value);
|
|
5982
|
+
}, ...(ngDevMode ? [{ debugName: "surfaceName" }] : []));
|
|
5983
|
+
this.surfaceClass = computed(() => {
|
|
5984
|
+
const prefix = this.prefix || 'et';
|
|
5985
|
+
if (this.surfaceName()) {
|
|
5986
|
+
return `${prefix}-surface--${this.surfaceName()}`;
|
|
5987
|
+
}
|
|
5988
|
+
return '';
|
|
5989
|
+
}, ...(ngDevMode ? [{ debugName: "surfaceClass" }] : []));
|
|
5990
|
+
}
|
|
5991
|
+
syncWithProvider(provider) {
|
|
5992
|
+
this.currentProviderSync?.destroy();
|
|
5993
|
+
runInInjectionContext(this.injector, () => {
|
|
5994
|
+
this.currentProviderSync = effect(() => {
|
|
5995
|
+
const provideSurface = provider.surface();
|
|
5996
|
+
untracked(() => {
|
|
5997
|
+
setInputSignal(this.surface, provideSurface);
|
|
5998
|
+
});
|
|
5999
|
+
}, ...(ngDevMode ? [{ debugName: "currentProviderSync" }] : []));
|
|
6000
|
+
});
|
|
6001
|
+
}
|
|
6002
|
+
stopSyncWithProvider() {
|
|
6003
|
+
this.currentProviderSync?.destroy();
|
|
6004
|
+
this.currentProviderSync = null;
|
|
6005
|
+
}
|
|
6006
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ProvideSurfaceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
6007
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: ProvideSurfaceDirective, isStandalone: true, selector: "[etProvideSurface]", inputs: { surface: { classPropertyName: "surface", publicName: "etProvideSurface", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "surfaceClass()" } }, providers: [{ provide: SURFACE_PROVIDER, useExisting: ProvideSurfaceDirective }], ngImport: i0 }); }
|
|
6008
|
+
}
|
|
6009
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ProvideSurfaceDirective, decorators: [{
|
|
6010
|
+
type: Directive,
|
|
6011
|
+
args: [{
|
|
6012
|
+
selector: '[etProvideSurface]',
|
|
6013
|
+
providers: [{ provide: SURFACE_PROVIDER, useExisting: ProvideSurfaceDirective }],
|
|
6014
|
+
host: {
|
|
6015
|
+
'[class]': 'surfaceClass()',
|
|
6016
|
+
},
|
|
6017
|
+
}]
|
|
6018
|
+
}], propDecorators: { surface: [{ type: i0.Input, args: [{ isSignal: true, alias: "etProvideSurface", required: false }] }] } });
|
|
6019
|
+
|
|
6020
|
+
let uniqueId = 0;
|
|
6021
|
+
const [provideSurfaceContextTracker, injectSurfaceContextTracker] = createRootProvider(() => {
|
|
6022
|
+
const entries = signal([], ...(ngDevMode ? [{ debugName: "entries" }] : []));
|
|
6023
|
+
const topEntry = computed(() => {
|
|
6024
|
+
const stack = entries();
|
|
6025
|
+
return stack.length > 0 ? (stack[stack.length - 1] ?? null) : null;
|
|
6026
|
+
}, ...(ngDevMode ? [{ debugName: "topEntry" }] : []));
|
|
6027
|
+
const topType = computed(() => topEntry()?.type ?? null, ...(ngDevMode ? [{ debugName: "topType" }] : []));
|
|
6028
|
+
const topElevation = computed(() => topEntry()?.elevation ?? 0, ...(ngDevMode ? [{ debugName: "topElevation" }] : []));
|
|
6029
|
+
const topNeutralColor = computed(() => topEntry()?.neutralColor ?? null, ...(ngDevMode ? [{ debugName: "topNeutralColor" }] : []));
|
|
6030
|
+
const register = (type, elevation, neutralColor) => {
|
|
6031
|
+
const id = `surface-ctx-${uniqueId++}`;
|
|
6032
|
+
const entry = { id, type, elevation, neutralColor: neutralColor ?? null };
|
|
6033
|
+
entries.update((e) => [...e, entry]);
|
|
6034
|
+
return () => {
|
|
6035
|
+
entries.update((e) => e.filter((item) => item.id !== id));
|
|
6036
|
+
};
|
|
6037
|
+
};
|
|
6038
|
+
return { topType, topElevation, topNeutralColor, register };
|
|
6039
|
+
}, { name: 'SurfaceContextTracker' });
|
|
6040
|
+
|
|
6041
|
+
class SurfacedStylesComponent {
|
|
6042
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SurfacedStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6043
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: SurfacedStylesComponent, isStandalone: true, selector: "et-surfaced-styles", ngImport: i0, template: '', isInline: true, styles: [":where(.et-surfaced){--et-surface-background-rgb: var(--et-surface-background);--et-surface-background-solid: rgb(var(--et-surface-background-rgb));--et-surface-color-rgb: var(--et-surface-color);--et-surface-color-solid: rgb(var(--et-surface-color-rgb));--et-surface-color-muted-rgb: var(--et-surface-color-muted);--et-surface-color-muted-solid: rgb(var(--et-surface-color-muted-rgb));--et-surface-color-subtle-rgb: var(--et-surface-color-subtle);--et-surface-color-subtle-solid: rgb(var(--et-surface-color-subtle-rgb));--et-surface-border-rgb: var(--et-surface-border);--et-surface-border-solid: rgb(var(--et-surface-border-rgb))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
6044
|
+
}
|
|
6045
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SurfacedStylesComponent, decorators: [{
|
|
6046
|
+
type: Component,
|
|
6047
|
+
args: [{ selector: 'et-surfaced-styles', template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":where(.et-surfaced){--et-surface-background-rgb: var(--et-surface-background);--et-surface-background-solid: rgb(var(--et-surface-background-rgb));--et-surface-color-rgb: var(--et-surface-color);--et-surface-color-solid: rgb(var(--et-surface-color-rgb));--et-surface-color-muted-rgb: var(--et-surface-color-muted);--et-surface-color-muted-solid: rgb(var(--et-surface-color-muted-rgb));--et-surface-color-subtle-rgb: var(--et-surface-color-subtle);--et-surface-color-subtle-solid: rgb(var(--et-surface-color-subtle-rgb));--et-surface-border-rgb: var(--et-surface-border);--et-surface-border-solid: rgb(var(--et-surface-border-rgb))}\n"] }]
|
|
6048
|
+
}] });
|
|
6049
|
+
|
|
6050
|
+
class SurfacedDirective {
|
|
6051
|
+
constructor() {
|
|
6052
|
+
this.styleManager = injectStyleManager();
|
|
6053
|
+
this.styleManager.mount(SurfacedStylesComponent);
|
|
6054
|
+
}
|
|
6055
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SurfacedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
6056
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: SurfacedDirective, isStandalone: true, selector: "[etSurfaced]", host: { classAttribute: "et-surfaced" }, ngImport: i0 }); }
|
|
6057
|
+
}
|
|
6058
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SurfacedDirective, decorators: [{
|
|
6059
|
+
type: Directive,
|
|
6060
|
+
args: [{
|
|
6061
|
+
selector: '[etSurfaced]',
|
|
6062
|
+
host: {
|
|
6063
|
+
class: 'et-surfaced',
|
|
6064
|
+
},
|
|
6065
|
+
}]
|
|
6066
|
+
}], ctorParameters: () => [] });
|
|
5936
6067
|
|
|
5937
6068
|
/**
|
|
5938
6069
|
* Generated bundle index. Do not edit.
|
|
5939
6070
|
*/
|
|
5940
6071
|
|
|
5941
|
-
export { ANIMATABLE_TOKEN, ANIMATED_IF_TOKEN, ANIMATED_LIFECYCLE_TOKEN, AT_LEAST_ONE_REQUIRED, AnimatableDirective, AnimatedIfDirective, AnimatedLifecycleDirective, AnimatedOverlayDirective, BOUNDARY_ELEMENT_TOKEN, BREAKPOINT_INSTANCE_TOKEN, BREAKPOINT_ORDER, ClickOutsideDirective,
|
|
6072
|
+
export { ANIMATABLE_TOKEN, ANIMATED_IF_TOKEN, ANIMATED_LIFECYCLE_TOKEN, AT_LEAST_ONE_REQUIRED, AnimatableDirective, AnimatedIfDirective, AnimatedLifecycleDirective, AnimatedOverlayDirective, BOUNDARY_ELEMENT_TOKEN, BREAKPOINT_INSTANCE_TOKEN, BREAKPOINT_ORDER, COLOR_PROVIDER, ClickOutsideDirective, ColoredDirective, DEFAULT_MULTI_INSTANCE_RELS, DEFAULT_MULTI_INSTANCE_TAGS, DEFAULT_VIEWPORT_CONFIG, DISABLE_LOGGER_PARAM, DragHandleDirective, ET_DISABLE_SCROLL_TOP, ET_DISABLE_SCROLL_TOP_AS_RETURN_ROUTE, ET_DISABLE_SCROLL_TOP_ON_PATH_PARAM_CHANGE, ET_PROPERTY_REMOVED, FOCUS_VISIBLE_TRACKER_TOKEN, IS_ARRAY_NOT_EMPTY, IS_EMAIL, InferMimeTypePipe, IsArrayNotEmpty, IsEmail, jsonLd as JsonLD, KeyPressManager, MUST_MATCH, MustMatch, NormalizeGameResultTypePipe, NormalizeMatchParticipantsPipe, NormalizeMatchScorePipe, NormalizeMatchStatePipe, NormalizeMatchTypePipe, PropsDirective, ProvideColorDirective, ProvideSurfaceDirective, RUNTIME_ERROR_NO_DATA, RepeatDirective, ResizeHandlesComponent, RuntimeError, SEO_DIRECTIVE_TOKEN, SURFACE_PROVIDER, SURFACE_TYPE, ScrollObserverDirective, ScrollObserverEndDirective, ScrollObserverStartDirective, SeoDirective, StructuredDataComponent, SurfacedDirective, ToArrayPipe, TypedQueryList, ValidateAtLeastOneRequired, Validators, applyAlternateBinding, applyAlternateLanguagesBindings, applyArticleBindings, applyAuthorBinding, applyCanonicalBinding, applyDescriptionBinding, applyHeadBinding, applyHeadTitleBinding, applyHostListener, applyHostListeners, applyKeywordsBinding, applyLinkBinding, applyMetaBinding, applyNextBinding, applyOgBinding, applyOpenGraphBindings, applyPrevBinding, applyResourceHintsBindings, applyRobotsBinding, applySocialMediaBindings, applyStructuredDataBinding, applyTwitterCardBindings, areScrollStatesEqual, bindProps, boolBreakpointTransform, booleanBreakpointAttribute, boundingClientRectToElementRect, breakpointTransformBase, buildElementSignal, buildSignalEffects, clamp, clone, cloneFormGroup, computedTillFalsy, computedTillTruthy, controlValueSignal, controlValueSignalWithPrevious, createArrayPropertyBinding, createBulkPropertyBinding, createCanAnimateSignal, createComponentId, createCssColorThemeName, createCssSurfaceName, createDependencyStash, createDestroy, createDocumentElementSignal, createElementDictionary, createElementDimensions, createEmptyElementSignal, createFlipAnimation, createFlipAnimationGroup, createHostProps, createIsRenderedSignal, createLogger, createPropHandlers, createPropertyBinding, createProps, createProvider, createRootProvider, createRootThemeCss, createRxHostListener, createSetup, createStaticProvider, createStaticRootProvider, createSwatchCss, createTailwindColorThemes, createTailwindCssVar, createTailwindRgbVar, createThemeStyle, createUserConsentProvider, deferredSignal, deleteCookie, easeElastic, easeIn, easeInOut, easeLinear, easeOut, easeOutBack, easeOutBackStrong, elementCanScroll, equal, firstElementSignal, forceReflow, formatRuntimeError, fromNextFrame, getCookie, getDomain, getElementScrollCoordinates, getFormGroupValue, getGroupMatchPoints, getGroupMatchScore, getKnockoutMatchScore, getMatchScoreSubLine, getObjectProperty, getScrollContainerTarget, getScrollItemTarget, getScrollSnapTarget, hasCookie, inferMimeType, injectAngularRootElement, injectBoundaryElement, injectBreakpointInput, injectBreakpointIsMatched, injectBreakpointObserver, injectCanHover, injectColorThemes, injectColorThemesPrefix, injectCurrentBreakpoint, injectDeviceInputType, injectDisplayOrientation, injectFocusVisibleTracker, injectFragment, injectHasPrecisionInput, injectHasTouchInput, injectHostElement, injectIs2Xl, injectIsLandscape, injectIsLg, injectIsMd, injectIsPortrait, injectIsRouterInitialized, injectIsSm, injectIsXl, injectIsXs, injectLinkStore, injectLinkStoreConfig, injectLocale, injectMediaQueryIsMatched, injectMetaConfig, injectMetaStore, injectObserveBreakpoint, injectObserveMediaQuery, injectPathParam, injectPathParamChanges, injectPathParams, injectQueryParam, injectQueryParamChanges, injectQueryParams, injectRenderer, injectRoute, injectRouteData, injectRouteDataItem, injectRouteTitle, injectRouterEvent, injectRouterState, injectScrollbarDimensions, injectStructuredDataConfig, injectStructuredDataStore, injectStyleManager, injectSurfaceContextTracker, injectSurfaceThemes, injectSurfaceThemesPrefix, injectTemplateRef, injectTitleConfig, injectTitleStore, injectUrl, injectViewportConfig, injectViewportDimensions, injectViewportSize, isArray, isElementSignal, isElementVisible, isGroupMatch, isKnockoutMatch, isObject, maybeSignalValue, memoizeSignal, nextFrame, normalizeGameResultType, normalizeMatchParticipant, normalizeMatchParticipants, normalizeMatchScore, normalizeMatchState, normalizeMatchType, numberBreakpointAttribute, numberBreakpointTransform, previousSignalValue, provideBoundaryElement, provideBreakpointInstance, provideBreakpointObserver, provideColorThemes, provideColorThemesWithTailwind4, provideFocusVisibleTracker, provideLinkStore, provideLinkStoreConfig, provideLocale, provideMetaConfig, provideMetaStore, provideRenderer, provideStructuredDataConfig, provideStructuredDataStore, provideStyleManager, provideSurfaceContextTracker, provideSurfaceThemesWithTailwind4, provideTitleConfig, provideTitleStore, provideViewportConfig, resolveSurfaceByElevation, round, routerDisableScrollTop, scrollToElement, setCookie, setInputSignal, setupScrollRestoration, signalAnimatedNumber, signalAttributes, signalClasses, signalElementChildren, signalElementDimensions, signalElementIntersection, signalElementLastScrollDirection, signalElementMutations, signalElementScrollState, signalHostAttributes, signalHostClasses, signalHostElementDimensions, signalHostElementIntersection, signalHostElementLastScrollDirection, signalHostElementMutations, signalHostElementScrollState, signalHostStyles, signalIsRendered, signalStyles, switchQueryListChanges, syncSignal, templateComputed, toArray, toArrayTrackByFn, toStringBinding, transformOrReturn, typedBreakpointTransform, unbindProps, useCursorDragScroll, writeScrollbarSizeToCssVariables, writeViewportSizeToCssVariables, ɵProvideColorThemes, ɵProvideColorThemesPrefix, ɵProvideSurfaceThemes, ɵProvideSurfaceThemesPrefix };
|
|
5942
6073
|
//# sourceMappingURL=ethlete-core.mjs.map
|