@educarehq/solaris-ui 0.17.0 → 0.17.2
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.
|
@@ -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-
|
|
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-normal) var(--solaris-motion-easing-standard)}[solaris-mega-menu-trigger]:after{content:\"\";flex:0 0 auto;width:var(--solaris-spacing-4);height:var(--solaris-spacing-4);background:currentcolor;transform:rotate(0);transform-origin:center;transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard);mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 6 5 5 5-5' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E\") center/contain no-repeat;-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 6 5 5 5-5' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E\") center/contain no-repeat}[solaris-mega-menu-trigger][data-open]:after{transform:rotate(180deg)}[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-normal) var(--solaris-motion-easing-standard),width var(--solaris-motion-duration-normal) 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]:after,.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-
|
|
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-normal) var(--solaris-motion-easing-standard)}[solaris-mega-menu-trigger]:after{content:\"\";flex:0 0 auto;width:var(--solaris-spacing-4);height:var(--solaris-spacing-4);background:currentcolor;transform:rotate(0);transform-origin:center;transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard);mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 6 5 5 5-5' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E\") center/contain no-repeat;-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 6 5 5 5-5' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E\") center/contain no-repeat}[solaris-mega-menu-trigger][data-open]:after{transform:rotate(180deg)}[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-normal) var(--solaris-motion-easing-standard),width var(--solaris-motion-duration-normal) 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]:after,.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,25 @@ 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; 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
|
-
platformId = inject(PLATFORM_ID);
|
|
3747
|
-
destroyRef = inject(DestroyRef);
|
|
3748
|
-
chevronRef = null;
|
|
3761
|
+
isPointerInteraction = false;
|
|
3749
3762
|
constructor() {
|
|
3750
3763
|
if (this.elementRef.nativeElement.getAttribute('type') === null) {
|
|
3751
3764
|
this.elementRef.nativeElement.setAttribute('type', 'button');
|
|
3752
3765
|
}
|
|
3753
|
-
this.attachChevron();
|
|
3754
|
-
this.destroyRef.onDestroy(() => this.chevronRef?.destroy());
|
|
3755
3766
|
}
|
|
3756
3767
|
onClick() {
|
|
3757
3768
|
this.megaMenu.toggleFromClick();
|
|
3769
|
+
this.isPointerInteraction = false;
|
|
3770
|
+
}
|
|
3771
|
+
onPointerDown() {
|
|
3772
|
+
this.isPointerInteraction = true;
|
|
3773
|
+
}
|
|
3774
|
+
onPointerCancel() {
|
|
3775
|
+
this.isPointerInteraction = false;
|
|
3758
3776
|
}
|
|
3759
3777
|
onPointerEnter() {
|
|
3760
3778
|
this.megaMenu.scheduleOpen();
|
|
@@ -3763,6 +3781,9 @@ class SolarisMegaMenuTriggerDirective {
|
|
|
3763
3781
|
this.megaMenu.scheduleClose();
|
|
3764
3782
|
}
|
|
3765
3783
|
onFocusIn() {
|
|
3784
|
+
if (this.isPointerInteraction) {
|
|
3785
|
+
return;
|
|
3786
|
+
}
|
|
3766
3787
|
this.megaMenu.open();
|
|
3767
3788
|
}
|
|
3768
3789
|
onArrowDown(event) {
|
|
@@ -3773,23 +3794,8 @@ class SolarisMegaMenuTriggerDirective {
|
|
|
3773
3794
|
event.preventDefault();
|
|
3774
3795
|
this.megaMenu.close(true);
|
|
3775
3796
|
}
|
|
3776
|
-
attachChevron() {
|
|
3777
|
-
if (!isPlatformBrowser(this.platformId)) {
|
|
3778
|
-
return;
|
|
3779
|
-
}
|
|
3780
|
-
const chevronRef = createComponent(SolarisIconComponent, {
|
|
3781
|
-
environmentInjector: this.environmentInjector,
|
|
3782
|
-
});
|
|
3783
|
-
chevronRef.setInput('name', 'chevron-down');
|
|
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;
|
|
3790
|
-
}
|
|
3791
3797
|
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 });
|
|
3798
|
+
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
3799
|
}
|
|
3794
3800
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisMegaMenuTriggerDirective, decorators: [{
|
|
3795
3801
|
type: Directive,
|
|
@@ -3808,6 +3814,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3808
3814
|
}], ctorParameters: () => [], propDecorators: { onClick: [{
|
|
3809
3815
|
type: HostListener,
|
|
3810
3816
|
args: ['click']
|
|
3817
|
+
}], onPointerDown: [{
|
|
3818
|
+
type: HostListener,
|
|
3819
|
+
args: ['pointerdown']
|
|
3820
|
+
}], onPointerCancel: [{
|
|
3821
|
+
type: HostListener,
|
|
3822
|
+
args: ['pointercancel']
|
|
3811
3823
|
}], onPointerEnter: [{
|
|
3812
3824
|
type: HostListener,
|
|
3813
3825
|
args: ['pointerenter']
|