@educarehq/solaris-ui 0.17.0 → 0.17.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, inject, PLATFORM_ID, Injectable, Pipe, Directive, signal, DestroyRef, DOCUMENT, input, computed, ChangeDetectionStrategy, Component, output, ElementRef, EnvironmentInjector, effect, createComponent, HostListener, model, TemplateRef, ViewContainerRef, contentChild, forwardRef, ViewChild, ViewEncapsulation, contentChildren, NgZone, Injector, viewChild, isDevMode, ChangeDetectorRef, booleanAttribute, numberAttribute, afterNextRender, viewChildren, ApplicationRef } from '@angular/core';
|
|
2
|
+
import { InjectionToken, inject, PLATFORM_ID, Injectable, Pipe, Directive, signal, DestroyRef, DOCUMENT, input, computed, ChangeDetectionStrategy, Component, output, ElementRef, EnvironmentInjector, effect, createComponent, HostListener, model, TemplateRef, ViewContainerRef, contentChild, forwardRef, ViewChild, ViewEncapsulation, Renderer2, contentChildren, NgZone, Injector, viewChild, isDevMode, ChangeDetectorRef, booleanAttribute, numberAttribute, afterNextRender, viewChildren, ApplicationRef } from '@angular/core';
|
|
3
3
|
import { isPlatformBrowser, DOCUMENT as DOCUMENT$1, NgTemplateOutlet } from '@angular/common';
|
|
4
4
|
import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
|
|
5
5
|
import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
|
|
@@ -2939,12 +2939,20 @@ class SolarisButtonDirective {
|
|
|
2939
2939
|
if (this.isButton && initialType === null) {
|
|
2940
2940
|
el.setAttribute('type', 'button');
|
|
2941
2941
|
}
|
|
2942
|
-
//
|
|
2943
|
-
//
|
|
2944
|
-
el.
|
|
2945
|
-
|
|
2946
|
-
|
|
2947
|
-
el.
|
|
2942
|
+
// Preserve SSR attributes during hydration. Angular applies input bindings
|
|
2943
|
+
// after directive construction, so writing defaults here would flash them.
|
|
2944
|
+
if (!el.hasAttribute('data-appearance')) {
|
|
2945
|
+
el.setAttribute('data-appearance', this.appearance());
|
|
2946
|
+
}
|
|
2947
|
+
if (!el.hasAttribute('data-color')) {
|
|
2948
|
+
el.setAttribute('data-color', this.color());
|
|
2949
|
+
}
|
|
2950
|
+
if (!el.hasAttribute('data-radius')) {
|
|
2951
|
+
el.setAttribute('data-radius', this.radius());
|
|
2952
|
+
}
|
|
2953
|
+
if (!el.hasAttribute('data-shape')) {
|
|
2954
|
+
el.setAttribute('data-shape', this.shape());
|
|
2955
|
+
}
|
|
2948
2956
|
effect(() => {
|
|
2949
2957
|
if (this.loading()) {
|
|
2950
2958
|
this.attachSpinner();
|
|
@@ -3099,12 +3107,20 @@ class SolarisIconButtonDirective {
|
|
|
3099
3107
|
if (this.isButton && initialType === null) {
|
|
3100
3108
|
el.setAttribute('type', 'button');
|
|
3101
3109
|
}
|
|
3102
|
-
//
|
|
3103
|
-
//
|
|
3104
|
-
el.
|
|
3105
|
-
|
|
3106
|
-
|
|
3107
|
-
el.
|
|
3110
|
+
// Preserve SSR attributes during hydration. Angular applies input bindings
|
|
3111
|
+
// after directive construction, so writing defaults here would flash them.
|
|
3112
|
+
if (!el.hasAttribute('data-appearance')) {
|
|
3113
|
+
el.setAttribute('data-appearance', this.appearance());
|
|
3114
|
+
}
|
|
3115
|
+
if (!el.hasAttribute('data-color')) {
|
|
3116
|
+
el.setAttribute('data-color', this.color());
|
|
3117
|
+
}
|
|
3118
|
+
if (!el.hasAttribute('data-radius')) {
|
|
3119
|
+
el.setAttribute('data-radius', this.radius());
|
|
3120
|
+
}
|
|
3121
|
+
if (!el.hasAttribute('data-shape')) {
|
|
3122
|
+
el.setAttribute('data-shape', this.shape());
|
|
3123
|
+
}
|
|
3108
3124
|
}
|
|
3109
3125
|
onClick(event) {
|
|
3110
3126
|
if (this.isEffectivelyDisabled() && this.isAnchor) {
|
|
@@ -3657,7 +3673,7 @@ class SolarisMegaMenuComponent {
|
|
|
3657
3673
|
provide: SOLARIS_MEGA_MENU,
|
|
3658
3674
|
useExisting: forwardRef(() => SolarisMegaMenuComponent),
|
|
3659
3675
|
},
|
|
3660
|
-
], queries: [{ propertyName: "panel", first: true, predicate: SolarisMegaMenuPanelDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "overlayPanel", first: true, predicate: ["overlayPanel"], descendants: true, static: true }], ngImport: i0, template: "<ng-content select=\"[solaris-mega-menu-trigger]\" />\n<ng-content select=\"ng-template[solaris-mega-menu-panel]\" />\n\n<ng-template #overlayPanel>\n <section\n class=\"solaris-mega-menu__panel\"\n [id]=\"panelId\"\n tabindex=\"-1\"\n (pointerenter)=\"onPanelPointerEnter()\"\n (pointerleave)=\"onPanelPointerLeave()\"\n (focusout)=\"onPanelFocusOut()\"\n (keydown.escape)=\"onPanelEscape($event)\"\n >\n <ng-container *ngTemplateOutlet=\"panel()?.templateRef\" />\n </section>\n</ng-template>\n", styles: ["solaris-mega-menu{display:inline-block}[solaris-mega-menu-trigger]{display:inline-flex;align-items:center;gap:var(--solaris-spacing-2);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-mega-menu-trigger__chevron{flex:0 0 auto;
|
|
3676
|
+
], queries: [{ propertyName: "panel", first: true, predicate: SolarisMegaMenuPanelDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "overlayPanel", first: true, predicate: ["overlayPanel"], descendants: true, static: true }], ngImport: i0, template: "<ng-content select=\"[solaris-mega-menu-trigger]\" />\n<ng-content select=\"ng-template[solaris-mega-menu-panel]\" />\n\n<ng-template #overlayPanel>\n <section\n class=\"solaris-mega-menu__panel\"\n [id]=\"panelId\"\n tabindex=\"-1\"\n (pointerenter)=\"onPanelPointerEnter()\"\n (pointerleave)=\"onPanelPointerLeave()\"\n (focusout)=\"onPanelFocusOut()\"\n (keydown.escape)=\"onPanelEscape($event)\"\n >\n <ng-container *ngTemplateOutlet=\"panel()?.templateRef\" />\n </section>\n</ng-template>\n", styles: ["solaris-mega-menu{display:inline-block}[solaris-mega-menu-trigger]{display:inline-flex;align-items:center;gap:var(--solaris-spacing-2);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-mega-menu-trigger__chevron{order:1;flex:0 0 auto;transform:rotate(45deg);margin-inline-start:auto;width:var(--solaris-spacing-2);height:var(--solaris-spacing-2);border-right:var(--solaris-border-width-sm) solid currentcolor;border-bottom:var(--solaris-border-width-sm) solid currentcolor;transition:transform var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}[solaris-mega-menu-trigger][data-open] .solaris-mega-menu-trigger__chevron{transform:rotate(-135deg)}[solaris-mega-menu-trigger][data-appearance=underline]{border-bottom:2px solid transparent}[solaris-mega-menu-trigger][data-appearance=underline][data-open]{border-bottom-color:transparent}[solaris-mega-menu-anchor]{position:relative}.solaris-mega-menu-anchor__underline{bottom:1px;height:2px;position:absolute;pointer-events:none;z-index:var(--solaris-z-index-raised);background:var(--solaris-primary-base);transition:left var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),width var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}[solaris-mega-menu-trigger][data-appearance=underline]:hover,[solaris-mega-menu-trigger][data-appearance=underline]:focus-visible{background:transparent}[solaris-mega-menu-trigger][data-appearance=text]{color:var(--solaris-text-muted)}[solaris-mega-menu-trigger][data-appearance=text][data-open]{color:var(--solaris-text-strong)}.solaris-mega-menu__panel{--solaris-mega-menu-shadow: var(--solaris-shadow-lg);--solaris-mega-menu-color: var(--solaris-text-default);--solaris-mega-menu-background: var(--solaris-surface-raised);width:100%;box-sizing:border-box;color:var(--solaris-mega-menu-color);box-shadow:var(--solaris-mega-menu-shadow);background:var(--solaris-mega-menu-background);animation:solaris-mega-menu-enter var(--solaris-motion-duration-fast) var(--solaris-motion-easing-decelerate)}.cdk-overlay-backdrop.solaris-mega-menu-backdrop{pointer-events:none;background:transparent}.solaris-mega-menu-backdrop__region{display:block;position:absolute;pointer-events:auto;background:var(--solaris-backdrop)}.solaris-mega-menu-backdrop__region--top,.solaris-mega-menu-backdrop__region--bottom{right:0;left:0}.solaris-mega-menu-backdrop__region--top{top:0}.solaris-mega-menu-backdrop__region--bottom{bottom:0}.solaris-mega-menu-backdrop__region--left{left:0}.solaris-mega-menu-backdrop__region--right{right:0}@keyframes solaris-mega-menu-enter{0%{opacity:0;transform:translateY(calc(-1 * var(--solaris-spacing-1)))}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){[solaris-mega-menu-trigger],.solaris-mega-menu-anchor__underline,.solaris-mega-menu-trigger__chevron,.solaris-mega-menu__panel{animation:none;transition:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
3661
3677
|
}
|
|
3662
3678
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisMegaMenuComponent, decorators: [{
|
|
3663
3679
|
type: Component,
|
|
@@ -3669,7 +3685,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3669
3685
|
], host: {
|
|
3670
3686
|
class: 'solaris-mega-menu',
|
|
3671
3687
|
'[attr.data-open]': 'isOpen() ? "" : null',
|
|
3672
|
-
}, template: "<ng-content select=\"[solaris-mega-menu-trigger]\" />\n<ng-content select=\"ng-template[solaris-mega-menu-panel]\" />\n\n<ng-template #overlayPanel>\n <section\n class=\"solaris-mega-menu__panel\"\n [id]=\"panelId\"\n tabindex=\"-1\"\n (pointerenter)=\"onPanelPointerEnter()\"\n (pointerleave)=\"onPanelPointerLeave()\"\n (focusout)=\"onPanelFocusOut()\"\n (keydown.escape)=\"onPanelEscape($event)\"\n >\n <ng-container *ngTemplateOutlet=\"panel()?.templateRef\" />\n </section>\n</ng-template>\n", styles: ["solaris-mega-menu{display:inline-block}[solaris-mega-menu-trigger]{display:inline-flex;align-items:center;gap:var(--solaris-spacing-2);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-mega-menu-trigger__chevron{flex:0 0 auto;
|
|
3688
|
+
}, template: "<ng-content select=\"[solaris-mega-menu-trigger]\" />\n<ng-content select=\"ng-template[solaris-mega-menu-panel]\" />\n\n<ng-template #overlayPanel>\n <section\n class=\"solaris-mega-menu__panel\"\n [id]=\"panelId\"\n tabindex=\"-1\"\n (pointerenter)=\"onPanelPointerEnter()\"\n (pointerleave)=\"onPanelPointerLeave()\"\n (focusout)=\"onPanelFocusOut()\"\n (keydown.escape)=\"onPanelEscape($event)\"\n >\n <ng-container *ngTemplateOutlet=\"panel()?.templateRef\" />\n </section>\n</ng-template>\n", styles: ["solaris-mega-menu{display:inline-block}[solaris-mega-menu-trigger]{display:inline-flex;align-items:center;gap:var(--solaris-spacing-2);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-mega-menu-trigger__chevron{order:1;flex:0 0 auto;transform:rotate(45deg);margin-inline-start:auto;width:var(--solaris-spacing-2);height:var(--solaris-spacing-2);border-right:var(--solaris-border-width-sm) solid currentcolor;border-bottom:var(--solaris-border-width-sm) solid currentcolor;transition:transform var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}[solaris-mega-menu-trigger][data-open] .solaris-mega-menu-trigger__chevron{transform:rotate(-135deg)}[solaris-mega-menu-trigger][data-appearance=underline]{border-bottom:2px solid transparent}[solaris-mega-menu-trigger][data-appearance=underline][data-open]{border-bottom-color:transparent}[solaris-mega-menu-anchor]{position:relative}.solaris-mega-menu-anchor__underline{bottom:1px;height:2px;position:absolute;pointer-events:none;z-index:var(--solaris-z-index-raised);background:var(--solaris-primary-base);transition:left var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),width var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}[solaris-mega-menu-trigger][data-appearance=underline]:hover,[solaris-mega-menu-trigger][data-appearance=underline]:focus-visible{background:transparent}[solaris-mega-menu-trigger][data-appearance=text]{color:var(--solaris-text-muted)}[solaris-mega-menu-trigger][data-appearance=text][data-open]{color:var(--solaris-text-strong)}.solaris-mega-menu__panel{--solaris-mega-menu-shadow: var(--solaris-shadow-lg);--solaris-mega-menu-color: var(--solaris-text-default);--solaris-mega-menu-background: var(--solaris-surface-raised);width:100%;box-sizing:border-box;color:var(--solaris-mega-menu-color);box-shadow:var(--solaris-mega-menu-shadow);background:var(--solaris-mega-menu-background);animation:solaris-mega-menu-enter var(--solaris-motion-duration-fast) var(--solaris-motion-easing-decelerate)}.cdk-overlay-backdrop.solaris-mega-menu-backdrop{pointer-events:none;background:transparent}.solaris-mega-menu-backdrop__region{display:block;position:absolute;pointer-events:auto;background:var(--solaris-backdrop)}.solaris-mega-menu-backdrop__region--top,.solaris-mega-menu-backdrop__region--bottom{right:0;left:0}.solaris-mega-menu-backdrop__region--top{top:0}.solaris-mega-menu-backdrop__region--bottom{bottom:0}.solaris-mega-menu-backdrop__region--left{left:0}.solaris-mega-menu-backdrop__region--right{right:0}@keyframes solaris-mega-menu-enter{0%{opacity:0;transform:translateY(calc(-1 * var(--solaris-spacing-1)))}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){[solaris-mega-menu-trigger],.solaris-mega-menu-anchor__underline,.solaris-mega-menu-trigger__chevron,.solaris-mega-menu__panel{animation:none;transition:none}}\n"] }]
|
|
3673
3689
|
}], ctorParameters: () => [], propDecorators: { overlayPanel: [{
|
|
3674
3690
|
type: ViewChild,
|
|
3675
3691
|
args: ['overlayPanel', { static: true }]
|
|
@@ -3738,23 +3754,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3738
3754
|
}]
|
|
3739
3755
|
}] });
|
|
3740
3756
|
|
|
3741
|
-
// SECURITY_EXCEPTION_FILE: Native host access sets the semantic button type
|
|
3757
|
+
// SECURITY_EXCEPTION_FILE: Native host access sets the semantic button type. Renderer2 creates the decorative chevron for both SSR and browser rendering; directive specs cover trigger semantics and interaction.
|
|
3742
3758
|
class SolarisMegaMenuTriggerDirective {
|
|
3743
3759
|
megaMenu = inject(SOLARIS_MEGA_MENU);
|
|
3744
3760
|
elementRef = inject(ElementRef);
|
|
3745
|
-
|
|
3746
|
-
|
|
3747
|
-
destroyRef = inject(DestroyRef);
|
|
3748
|
-
chevronRef = null;
|
|
3761
|
+
renderer = inject(Renderer2);
|
|
3762
|
+
isPointerInteraction = false;
|
|
3749
3763
|
constructor() {
|
|
3750
3764
|
if (this.elementRef.nativeElement.getAttribute('type') === null) {
|
|
3751
3765
|
this.elementRef.nativeElement.setAttribute('type', 'button');
|
|
3752
3766
|
}
|
|
3753
|
-
this.
|
|
3754
|
-
this.destroyRef.onDestroy(() => this.chevronRef?.destroy());
|
|
3767
|
+
this.ensureChevron();
|
|
3755
3768
|
}
|
|
3756
3769
|
onClick() {
|
|
3757
3770
|
this.megaMenu.toggleFromClick();
|
|
3771
|
+
this.isPointerInteraction = false;
|
|
3772
|
+
}
|
|
3773
|
+
onPointerDown() {
|
|
3774
|
+
this.isPointerInteraction = true;
|
|
3775
|
+
}
|
|
3776
|
+
onPointerCancel() {
|
|
3777
|
+
this.isPointerInteraction = false;
|
|
3758
3778
|
}
|
|
3759
3779
|
onPointerEnter() {
|
|
3760
3780
|
this.megaMenu.scheduleOpen();
|
|
@@ -3763,6 +3783,9 @@ class SolarisMegaMenuTriggerDirective {
|
|
|
3763
3783
|
this.megaMenu.scheduleClose();
|
|
3764
3784
|
}
|
|
3765
3785
|
onFocusIn() {
|
|
3786
|
+
if (this.isPointerInteraction) {
|
|
3787
|
+
return;
|
|
3788
|
+
}
|
|
3766
3789
|
this.megaMenu.open();
|
|
3767
3790
|
}
|
|
3768
3791
|
onArrowDown(event) {
|
|
@@ -3773,23 +3796,18 @@ class SolarisMegaMenuTriggerDirective {
|
|
|
3773
3796
|
event.preventDefault();
|
|
3774
3797
|
this.megaMenu.close(true);
|
|
3775
3798
|
}
|
|
3776
|
-
|
|
3777
|
-
|
|
3799
|
+
ensureChevron() {
|
|
3800
|
+
const host = this.elementRef.nativeElement;
|
|
3801
|
+
if (host.querySelector('.solaris-mega-menu-trigger__chevron')) {
|
|
3778
3802
|
return;
|
|
3779
3803
|
}
|
|
3780
|
-
const
|
|
3781
|
-
|
|
3782
|
-
|
|
3783
|
-
|
|
3784
|
-
chevronRef.setInput('decorative', true);
|
|
3785
|
-
chevronRef.changeDetectorRef.detectChanges();
|
|
3786
|
-
const chevronElement = chevronRef.location.nativeElement;
|
|
3787
|
-
chevronElement.classList.add('solaris-mega-menu-trigger__chevron');
|
|
3788
|
-
this.elementRef.nativeElement.appendChild(chevronElement);
|
|
3789
|
-
this.chevronRef = chevronRef;
|
|
3804
|
+
const chevron = this.renderer.createElement('span');
|
|
3805
|
+
this.renderer.addClass(chevron, 'solaris-mega-menu-trigger__chevron');
|
|
3806
|
+
this.renderer.setAttribute(chevron, 'aria-hidden', 'true');
|
|
3807
|
+
this.renderer.appendChild(host, chevron);
|
|
3790
3808
|
}
|
|
3791
3809
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisMegaMenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3792
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: SolarisMegaMenuTriggerDirective, isStandalone: true, selector: "button[solaris-mega-menu-trigger]", host: { listeners: { "click": "onClick()", "pointerenter": "onPointerEnter()", "pointerleave": "onPointerLeave()", "focusin": "onFocusIn()", "keydown.arrowdown": "onArrowDown($event)", "keydown.escape": "onEscape($event)" }, properties: { "attr.aria-controls": "megaMenu.panelId", "attr.aria-expanded": "megaMenu.isOpen() ? \"true\" : \"false\"", "attr.aria-haspopup": "\"true\"", "attr.data-open": "megaMenu.isOpen() ? \"\" : null", "attr.data-appearance": "megaMenu.appearance()" }, classAttribute: "solaris-mega-menu-trigger" }, ngImport: i0 });
|
|
3810
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: SolarisMegaMenuTriggerDirective, isStandalone: true, selector: "button[solaris-mega-menu-trigger]", host: { listeners: { "click": "onClick()", "pointerdown": "onPointerDown()", "pointercancel": "onPointerCancel()", "pointerenter": "onPointerEnter()", "pointerleave": "onPointerLeave()", "focusin": "onFocusIn()", "keydown.arrowdown": "onArrowDown($event)", "keydown.escape": "onEscape($event)" }, properties: { "attr.aria-controls": "megaMenu.panelId", "attr.aria-expanded": "megaMenu.isOpen() ? \"true\" : \"false\"", "attr.aria-haspopup": "\"true\"", "attr.data-open": "megaMenu.isOpen() ? \"\" : null", "attr.data-appearance": "megaMenu.appearance()" }, classAttribute: "solaris-mega-menu-trigger" }, ngImport: i0 });
|
|
3793
3811
|
}
|
|
3794
3812
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisMegaMenuTriggerDirective, decorators: [{
|
|
3795
3813
|
type: Directive,
|
|
@@ -3808,6 +3826,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3808
3826
|
}], ctorParameters: () => [], propDecorators: { onClick: [{
|
|
3809
3827
|
type: HostListener,
|
|
3810
3828
|
args: ['click']
|
|
3829
|
+
}], onPointerDown: [{
|
|
3830
|
+
type: HostListener,
|
|
3831
|
+
args: ['pointerdown']
|
|
3832
|
+
}], onPointerCancel: [{
|
|
3833
|
+
type: HostListener,
|
|
3834
|
+
args: ['pointercancel']
|
|
3811
3835
|
}], onPointerEnter: [{
|
|
3812
3836
|
type: HostListener,
|
|
3813
3837
|
args: ['pointerenter']
|