@educarehq/solaris-ui 0.25.0 → 0.25.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.
@@ -5567,6 +5567,20 @@ class SolarisPopoverTriggerDirective {
5567
5567
  }
5568
5568
  });
5569
5569
  }
5570
+ getPositionOrigin() {
5571
+ // When topConnected (select / multi-select inside form-field), the CDK
5572
+ // origin must be the input box (.solaris-form-field__control-wrapper),
5573
+ // not the whole <solaris-form-field> host (which includes label + hints).
5574
+ // Otherwise the "top" fallback anchors above the label, leaving the
5575
+ // label detached instead of covered by the panel.
5576
+ if (this.solarisPopoverTopConnected()) {
5577
+ const wrapper = this.elementRef.nativeElement.querySelector(':scope > .solaris-form-field__control-wrapper');
5578
+ if (wrapper) {
5579
+ return wrapper;
5580
+ }
5581
+ }
5582
+ return this.elementRef.nativeElement;
5583
+ }
5570
5584
  createPositionStrategy() {
5571
5585
  const placement = this.solarisPopoverPlacement();
5572
5586
  const align = this.solarisPopoverAlign();
@@ -5588,7 +5602,7 @@ class SolarisPopoverTriggerDirective {
5588
5602
  }));
5589
5603
  return this.overlay
5590
5604
  .position()
5591
- .flexibleConnectedTo(this.elementRef)
5605
+ .flexibleConnectedTo(this.getPositionOrigin())
5592
5606
  .withPositions(allPositions)
5593
5607
  .withFlexibleDimensions(true)
5594
5608
  .withPush(true);
@@ -5727,7 +5741,9 @@ class SolarisPopoverTriggerDirective {
5727
5741
  }
5728
5742
  const size = {};
5729
5743
  // ElementRef is SSR-safe. offsetWidth is a read-only layout property.
5730
- const triggerWidth = this.elementRef.nativeElement.offsetWidth;
5744
+ // For topConnected, measure the control-wrapper (position origin) so the
5745
+ // panel matches the input width even if label/hint rows differ.
5746
+ const triggerWidth = this.getPositionOrigin().offsetWidth;
5731
5747
  const matchWidth = this.solarisPopoverMatchTriggerWidth();
5732
5748
  const minWidth = this.solarisPopoverMinWidth();
5733
5749
  const maxWidth = this.solarisPopoverMaxWidth();
@@ -14130,7 +14146,7 @@ class SolarisDialogContainerComponent {
14130
14146
  }
14131
14147
  }
14132
14148
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
14133
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: SolarisDialogContainerComponent, isStandalone: true, selector: "solaris-dialog-container", inputs: { externalComponent: { classPropertyName: "externalComponent", publicName: "externalComponent", isSignal: true, isRequired: false, transformFunction: null }, simpleOptions: { classPropertyName: "simpleOptions", publicName: "simpleOptions", isSignal: true, isRequired: false, transformFunction: null }, externalComponentConfig: { classPropertyName: "externalComponentConfig", publicName: "externalComponentConfig", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown.escape": "onEscapePress()" }, properties: { "attr.data-fullscreen": "hostFullscreen", "attr.data-radius": "hostRadius", "attr.data-variant": "hostVariant", "attr.data-density": "hostDensity", "attr.data-backdrop": "hasBackdrop", "attr.data-appearance": "hostAppearance", "attr.data-placement": "hostPlacement", "attr.data-header-separator": "hostHeaderSeparator", "attr.data-footer-separator": "hostFooterSeparator" }, classAttribute: "solaris-dialog-container" }, viewQueries: [{ propertyName: "_componentHost", first: true, predicate: ["componentHost"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "_dialogPanel", first: true, predicate: ["dialogPanel"], descendants: true, isSignal: true }, { propertyName: "_focusTrap", first: true, predicate: CdkTrapFocus, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"solaris-dialog-backdrop\"\n tabindex=\"-1\"\n (click)=\"onBackdropClick($event)\"\n (keydown.escape)=\"onBackdropClick($event)\"\n>\n <div\n #dialogPanel\n tabindex=\"-1\"\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"false\"\n [attr.role]=\"dialogRole\"\n [attr.aria-label]=\"panelAriaLabel\"\n [attr.aria-labelledby]=\"panelAriaLabelledBy\"\n [attr.aria-describedby]=\"panelAriaDescribedBy\"\n [style.width]=\"panelWidth\"\n class=\"solaris-dialog-panel\"\n [style.height]=\"panelHeight\"\n [style.min-width]=\"panelMinWidth\"\n [style.max-width]=\"panelMaxWidth\"\n [style.min-height]=\"panelMinHeight\"\n [style.max-height]=\"panelMaxHeight\"\n [attr.aria-modal]=\"hasBackdrop ? 'true' : 'false'\"\n >\n @if (isSimpleMode) {\n <solaris-dialog [options]=\"simpleOptions()!\" />\n } @else {\n <ng-template #componentHost></ng-template>\n }\n @if (closeable) {\n <button\n type=\"button\"\n data-dialog-close\n (click)=\"closeDialog()\"\n [attr.aria-label]=\"resolvedCloseLabel\"\n class=\"solaris-dialog-container__close\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n </div>\n</div>\n", styles: [":host{--solaris-dialog-panel-padding: 0;--solaris-dialog-panel-min-width: 448px;--solaris-dialog-backdrop-bg: var(--solaris-backdrop);--solaris-dialog-panel-bg: var(--solaris-surface-base);--solaris-dialog-z-index: var(--solaris-z-index-modal);--solaris-dialog-panel-shadow: var(--solaris-shadow-lg);--solaris-dialog-panel-radius: var(--solaris-radius-lg);--solaris-dialog-panel-border: var(--solaris-border-default);--solaris-dialog-panel-max-width: calc(100vw - var(--solaris-spacing-8));--solaris-dialog-panel-max-height: calc(100dvh - var(--solaris-spacing-8));inset:0;display:flex;position:fixed;overflow:hidden;align-items:center;justify-content:center;z-index:var(--solaris-dialog-z-index)}:host([data-placement=top]){align-items:flex-start}:host([data-placement=bottom]){align-items:flex-end}:host([data-placement=left]){justify-content:flex-start}:host([data-placement=right]){justify-content:flex-end}:host([data-placement=top-left]){align-items:flex-start;justify-content:flex-start}:host([data-placement=top-right]){align-items:flex-start;justify-content:flex-end}:host([data-placement=bottom-left]){align-items:flex-end;justify-content:flex-start}:host([data-placement=bottom-right]){align-items:flex-end;justify-content:flex-end}:host([data-radius=none]){--solaris-dialog-panel-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-dialog-panel-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-dialog-panel-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-dialog-panel-radius: var(--solaris-radius-lg)}:host([data-radius=full]){--solaris-dialog-panel-radius: var(--solaris-radius-full)}:host([data-backdrop=false]){--solaris-dialog-backdrop-bg: transparent;pointer-events:none}.solaris-dialog-backdrop{inset:0;display:flex;position:fixed;align-items:center;justify-content:center;background:var(--solaris-dialog-backdrop-bg)}:host([data-placement=top]) .solaris-dialog-backdrop{align-items:flex-start;padding-top:var(--solaris-spacing-4)}:host([data-placement=bottom]) .solaris-dialog-backdrop{align-items:flex-end;padding-bottom:var(--solaris-spacing-4)}:host([data-placement=left]) .solaris-dialog-backdrop{justify-content:flex-start;padding-left:var(--solaris-spacing-4)}:host([data-placement=right]) .solaris-dialog-backdrop{justify-content:flex-end;padding-right:var(--solaris-spacing-4)}:host([data-placement=top-left]) .solaris-dialog-backdrop{align-items:flex-start;justify-content:flex-start;padding-top:var(--solaris-spacing-4);padding-left:var(--solaris-spacing-4)}:host([data-placement=top-right]) .solaris-dialog-backdrop{align-items:flex-start;justify-content:flex-end;padding-top:var(--solaris-spacing-4);padding-right:var(--solaris-spacing-4)}:host([data-placement=bottom-left]) .solaris-dialog-backdrop{align-items:flex-end;justify-content:flex-start;padding-left:var(--solaris-spacing-4);padding-bottom:var(--solaris-spacing-4)}:host([data-placement=bottom-right]) .solaris-dialog-backdrop{align-items:flex-end;justify-content:flex-end;padding-right:var(--solaris-spacing-4);padding-bottom:var(--solaris-spacing-4)}:host([data-backdrop=false]) .solaris-dialog-backdrop{pointer-events:none}:host([data-backdrop=false]) .solaris-dialog-panel{pointer-events:auto}.solaris-dialog-panel{display:flex;overflow:hidden;position:relative;flex-direction:column;box-sizing:border-box;background:var(--solaris-dialog-panel-bg);box-shadow:var(--solaris-dialog-panel-shadow);max-width:var(--solaris-dialog-panel-max-width);min-width:var(--solaris-dialog-panel-min-width);border-radius:var(--solaris-dialog-panel-radius);max-height:var(--solaris-dialog-panel-max-height);animation:solaris-dialog-enter var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate)}.solaris-dialog-container__close{border:none;display:flex;cursor:pointer;background:none;aspect-ratio:1/1;position:absolute;align-items:center;top:var(--solaris-spacing-3);right:var(--solaris-spacing-3);width:var(--solaris-spacing-4);height:var(--solaris-spacing-4);color:var(--solaris-text-muted);font-size:var(--solaris-font-size-lg);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate)}.solaris-dialog-container__close:hover{color:var(--solaris-text-strong)}:host([data-appearance=outline]) .solaris-dialog-panel{border:var(--solaris-border-width-sm) solid var(--solaris-dialog-panel-border)}:host([data-fullscreen]) .solaris-dialog-panel{width:100vw;height:100dvh;max-width:100vw;border-radius:0;max-height:100dvh}@keyframes solaris-dialog-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.solaris-dialog-panel{animation:none}}:host-context([data-reduced-motion=true]) .solaris-dialog-panel{animation:none}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: SolarisDialogComponent, selector: "solaris-dialog", inputs: ["options"] }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
14149
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: SolarisDialogContainerComponent, isStandalone: true, selector: "solaris-dialog-container", inputs: { externalComponent: { classPropertyName: "externalComponent", publicName: "externalComponent", isSignal: true, isRequired: false, transformFunction: null }, simpleOptions: { classPropertyName: "simpleOptions", publicName: "simpleOptions", isSignal: true, isRequired: false, transformFunction: null }, externalComponentConfig: { classPropertyName: "externalComponentConfig", publicName: "externalComponentConfig", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown.escape": "onEscapePress()" }, properties: { "attr.data-fullscreen": "hostFullscreen", "attr.data-radius": "hostRadius", "attr.data-variant": "hostVariant", "attr.data-density": "hostDensity", "attr.data-backdrop": "hasBackdrop", "attr.data-appearance": "hostAppearance", "attr.data-placement": "hostPlacement", "attr.data-header-separator": "hostHeaderSeparator", "attr.data-footer-separator": "hostFooterSeparator" }, classAttribute: "solaris-dialog-container" }, viewQueries: [{ propertyName: "_componentHost", first: true, predicate: ["componentHost"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "_dialogPanel", first: true, predicate: ["dialogPanel"], descendants: true, isSignal: true }, { propertyName: "_focusTrap", first: true, predicate: CdkTrapFocus, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"solaris-dialog-backdrop\"\n tabindex=\"-1\"\n (click)=\"onBackdropClick($event)\"\n (keydown.escape)=\"onBackdropClick($event)\"\n>\n <div\n #dialogPanel\n tabindex=\"-1\"\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"false\"\n [attr.role]=\"dialogRole\"\n [attr.aria-label]=\"panelAriaLabel\"\n [attr.aria-labelledby]=\"panelAriaLabelledBy\"\n [attr.aria-describedby]=\"panelAriaDescribedBy\"\n [style.width]=\"panelWidth\"\n class=\"solaris-dialog-panel\"\n [style.height]=\"panelHeight\"\n [style.min-width]=\"panelMinWidth\"\n [style.max-width]=\"panelMaxWidth\"\n [style.min-height]=\"panelMinHeight\"\n [style.max-height]=\"panelMaxHeight\"\n [attr.aria-modal]=\"hasBackdrop ? 'true' : 'false'\"\n >\n @if (isSimpleMode) {\n <solaris-dialog [options]=\"simpleOptions()!\" />\n } @else {\n <ng-template #componentHost></ng-template>\n }\n @if (closeable) {\n <button\n type=\"button\"\n data-dialog-close\n (click)=\"closeDialog()\"\n [attr.aria-label]=\"resolvedCloseLabel\"\n class=\"solaris-dialog-container__close\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n </div>\n</div>\n", styles: [":host{--solaris-dialog-panel-padding: 0;--solaris-dialog-panel-min-width: 400px;--solaris-dialog-backdrop-bg: var(--solaris-backdrop);--solaris-dialog-panel-bg: var(--solaris-surface-base);--solaris-dialog-z-index: var(--solaris-z-index-modal);--solaris-dialog-panel-shadow: var(--solaris-shadow-lg);--solaris-dialog-panel-radius: var(--solaris-radius-lg);--solaris-dialog-panel-border: var(--solaris-border-default);--solaris-dialog-panel-max-width: calc(100vw - var(--solaris-spacing-8));--solaris-dialog-panel-max-height: calc(100dvh - var(--solaris-spacing-8));inset:0;display:flex;position:fixed;overflow:hidden;align-items:center;justify-content:center;z-index:var(--solaris-dialog-z-index)}:host([data-placement=top]){align-items:flex-start}:host([data-placement=bottom]){align-items:flex-end}:host([data-placement=left]){justify-content:flex-start}:host([data-placement=right]){justify-content:flex-end}:host([data-placement=top-left]){align-items:flex-start;justify-content:flex-start}:host([data-placement=top-right]){align-items:flex-start;justify-content:flex-end}:host([data-placement=bottom-left]){align-items:flex-end;justify-content:flex-start}:host([data-placement=bottom-right]){align-items:flex-end;justify-content:flex-end}:host([data-radius=none]){--solaris-dialog-panel-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-dialog-panel-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-dialog-panel-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-dialog-panel-radius: var(--solaris-radius-lg)}:host([data-radius=full]){--solaris-dialog-panel-radius: var(--solaris-radius-full)}:host([data-backdrop=false]){--solaris-dialog-backdrop-bg: transparent;pointer-events:none}.solaris-dialog-backdrop{inset:0;display:flex;position:fixed;align-items:center;justify-content:center;background:var(--solaris-dialog-backdrop-bg)}:host([data-placement=top]) .solaris-dialog-backdrop{align-items:flex-start;padding-top:var(--solaris-spacing-4)}:host([data-placement=bottom]) .solaris-dialog-backdrop{align-items:flex-end;padding-bottom:var(--solaris-spacing-4)}:host([data-placement=left]) .solaris-dialog-backdrop{justify-content:flex-start;padding-left:var(--solaris-spacing-4)}:host([data-placement=right]) .solaris-dialog-backdrop{justify-content:flex-end;padding-right:var(--solaris-spacing-4)}:host([data-placement=top-left]) .solaris-dialog-backdrop{align-items:flex-start;justify-content:flex-start;padding-top:var(--solaris-spacing-4);padding-left:var(--solaris-spacing-4)}:host([data-placement=top-right]) .solaris-dialog-backdrop{align-items:flex-start;justify-content:flex-end;padding-top:var(--solaris-spacing-4);padding-right:var(--solaris-spacing-4)}:host([data-placement=bottom-left]) .solaris-dialog-backdrop{align-items:flex-end;justify-content:flex-start;padding-left:var(--solaris-spacing-4);padding-bottom:var(--solaris-spacing-4)}:host([data-placement=bottom-right]) .solaris-dialog-backdrop{align-items:flex-end;justify-content:flex-end;padding-right:var(--solaris-spacing-4);padding-bottom:var(--solaris-spacing-4)}:host([data-backdrop=false]) .solaris-dialog-backdrop{pointer-events:none}:host([data-backdrop=false]) .solaris-dialog-panel{pointer-events:auto}.solaris-dialog-panel{display:flex;overflow:hidden;position:relative;flex-direction:column;box-sizing:border-box;background:var(--solaris-dialog-panel-bg);box-shadow:var(--solaris-dialog-panel-shadow);max-width:var(--solaris-dialog-panel-max-width);min-width:var(--solaris-dialog-panel-min-width);border-radius:var(--solaris-dialog-panel-radius);max-height:var(--solaris-dialog-panel-max-height);animation:solaris-dialog-enter var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate)}.solaris-dialog-container__close{border:none;display:flex;cursor:pointer;background:none;aspect-ratio:1/1;position:absolute;align-items:center;top:var(--solaris-spacing-3);right:var(--solaris-spacing-3);width:var(--solaris-spacing-4);height:var(--solaris-spacing-4);color:var(--solaris-text-muted);font-size:var(--solaris-font-size-lg);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate)}.solaris-dialog-container__close:hover{color:var(--solaris-text-strong)}:host([data-appearance=outline]) .solaris-dialog-panel{border:var(--solaris-border-width-sm) solid var(--solaris-dialog-panel-border)}:host([data-fullscreen]) .solaris-dialog-panel{width:100vw;height:100dvh;max-width:100vw;border-radius:0;max-height:100dvh}@keyframes solaris-dialog-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.solaris-dialog-panel{animation:none}}:host-context([data-reduced-motion=true]) .solaris-dialog-panel{animation:none}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: SolarisDialogComponent, selector: "solaris-dialog", inputs: ["options"] }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
14134
14150
  }
14135
14151
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogContainerComponent, decorators: [{
14136
14152
  type: Component,
@@ -14145,7 +14161,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
14145
14161
  '[attr.data-placement]': 'hostPlacement',
14146
14162
  '[attr.data-header-separator]': 'hostHeaderSeparator',
14147
14163
  '[attr.data-footer-separator]': 'hostFooterSeparator',
14148
- }, template: "<div\n class=\"solaris-dialog-backdrop\"\n tabindex=\"-1\"\n (click)=\"onBackdropClick($event)\"\n (keydown.escape)=\"onBackdropClick($event)\"\n>\n <div\n #dialogPanel\n tabindex=\"-1\"\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"false\"\n [attr.role]=\"dialogRole\"\n [attr.aria-label]=\"panelAriaLabel\"\n [attr.aria-labelledby]=\"panelAriaLabelledBy\"\n [attr.aria-describedby]=\"panelAriaDescribedBy\"\n [style.width]=\"panelWidth\"\n class=\"solaris-dialog-panel\"\n [style.height]=\"panelHeight\"\n [style.min-width]=\"panelMinWidth\"\n [style.max-width]=\"panelMaxWidth\"\n [style.min-height]=\"panelMinHeight\"\n [style.max-height]=\"panelMaxHeight\"\n [attr.aria-modal]=\"hasBackdrop ? 'true' : 'false'\"\n >\n @if (isSimpleMode) {\n <solaris-dialog [options]=\"simpleOptions()!\" />\n } @else {\n <ng-template #componentHost></ng-template>\n }\n @if (closeable) {\n <button\n type=\"button\"\n data-dialog-close\n (click)=\"closeDialog()\"\n [attr.aria-label]=\"resolvedCloseLabel\"\n class=\"solaris-dialog-container__close\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n </div>\n</div>\n", styles: [":host{--solaris-dialog-panel-padding: 0;--solaris-dialog-panel-min-width: 448px;--solaris-dialog-backdrop-bg: var(--solaris-backdrop);--solaris-dialog-panel-bg: var(--solaris-surface-base);--solaris-dialog-z-index: var(--solaris-z-index-modal);--solaris-dialog-panel-shadow: var(--solaris-shadow-lg);--solaris-dialog-panel-radius: var(--solaris-radius-lg);--solaris-dialog-panel-border: var(--solaris-border-default);--solaris-dialog-panel-max-width: calc(100vw - var(--solaris-spacing-8));--solaris-dialog-panel-max-height: calc(100dvh - var(--solaris-spacing-8));inset:0;display:flex;position:fixed;overflow:hidden;align-items:center;justify-content:center;z-index:var(--solaris-dialog-z-index)}:host([data-placement=top]){align-items:flex-start}:host([data-placement=bottom]){align-items:flex-end}:host([data-placement=left]){justify-content:flex-start}:host([data-placement=right]){justify-content:flex-end}:host([data-placement=top-left]){align-items:flex-start;justify-content:flex-start}:host([data-placement=top-right]){align-items:flex-start;justify-content:flex-end}:host([data-placement=bottom-left]){align-items:flex-end;justify-content:flex-start}:host([data-placement=bottom-right]){align-items:flex-end;justify-content:flex-end}:host([data-radius=none]){--solaris-dialog-panel-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-dialog-panel-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-dialog-panel-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-dialog-panel-radius: var(--solaris-radius-lg)}:host([data-radius=full]){--solaris-dialog-panel-radius: var(--solaris-radius-full)}:host([data-backdrop=false]){--solaris-dialog-backdrop-bg: transparent;pointer-events:none}.solaris-dialog-backdrop{inset:0;display:flex;position:fixed;align-items:center;justify-content:center;background:var(--solaris-dialog-backdrop-bg)}:host([data-placement=top]) .solaris-dialog-backdrop{align-items:flex-start;padding-top:var(--solaris-spacing-4)}:host([data-placement=bottom]) .solaris-dialog-backdrop{align-items:flex-end;padding-bottom:var(--solaris-spacing-4)}:host([data-placement=left]) .solaris-dialog-backdrop{justify-content:flex-start;padding-left:var(--solaris-spacing-4)}:host([data-placement=right]) .solaris-dialog-backdrop{justify-content:flex-end;padding-right:var(--solaris-spacing-4)}:host([data-placement=top-left]) .solaris-dialog-backdrop{align-items:flex-start;justify-content:flex-start;padding-top:var(--solaris-spacing-4);padding-left:var(--solaris-spacing-4)}:host([data-placement=top-right]) .solaris-dialog-backdrop{align-items:flex-start;justify-content:flex-end;padding-top:var(--solaris-spacing-4);padding-right:var(--solaris-spacing-4)}:host([data-placement=bottom-left]) .solaris-dialog-backdrop{align-items:flex-end;justify-content:flex-start;padding-left:var(--solaris-spacing-4);padding-bottom:var(--solaris-spacing-4)}:host([data-placement=bottom-right]) .solaris-dialog-backdrop{align-items:flex-end;justify-content:flex-end;padding-right:var(--solaris-spacing-4);padding-bottom:var(--solaris-spacing-4)}:host([data-backdrop=false]) .solaris-dialog-backdrop{pointer-events:none}:host([data-backdrop=false]) .solaris-dialog-panel{pointer-events:auto}.solaris-dialog-panel{display:flex;overflow:hidden;position:relative;flex-direction:column;box-sizing:border-box;background:var(--solaris-dialog-panel-bg);box-shadow:var(--solaris-dialog-panel-shadow);max-width:var(--solaris-dialog-panel-max-width);min-width:var(--solaris-dialog-panel-min-width);border-radius:var(--solaris-dialog-panel-radius);max-height:var(--solaris-dialog-panel-max-height);animation:solaris-dialog-enter var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate)}.solaris-dialog-container__close{border:none;display:flex;cursor:pointer;background:none;aspect-ratio:1/1;position:absolute;align-items:center;top:var(--solaris-spacing-3);right:var(--solaris-spacing-3);width:var(--solaris-spacing-4);height:var(--solaris-spacing-4);color:var(--solaris-text-muted);font-size:var(--solaris-font-size-lg);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate)}.solaris-dialog-container__close:hover{color:var(--solaris-text-strong)}:host([data-appearance=outline]) .solaris-dialog-panel{border:var(--solaris-border-width-sm) solid var(--solaris-dialog-panel-border)}:host([data-fullscreen]) .solaris-dialog-panel{width:100vw;height:100dvh;max-width:100vw;border-radius:0;max-height:100dvh}@keyframes solaris-dialog-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.solaris-dialog-panel{animation:none}}:host-context([data-reduced-motion=true]) .solaris-dialog-panel{animation:none}\n"] }]
14164
+ }, template: "<div\n class=\"solaris-dialog-backdrop\"\n tabindex=\"-1\"\n (click)=\"onBackdropClick($event)\"\n (keydown.escape)=\"onBackdropClick($event)\"\n>\n <div\n #dialogPanel\n tabindex=\"-1\"\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"false\"\n [attr.role]=\"dialogRole\"\n [attr.aria-label]=\"panelAriaLabel\"\n [attr.aria-labelledby]=\"panelAriaLabelledBy\"\n [attr.aria-describedby]=\"panelAriaDescribedBy\"\n [style.width]=\"panelWidth\"\n class=\"solaris-dialog-panel\"\n [style.height]=\"panelHeight\"\n [style.min-width]=\"panelMinWidth\"\n [style.max-width]=\"panelMaxWidth\"\n [style.min-height]=\"panelMinHeight\"\n [style.max-height]=\"panelMaxHeight\"\n [attr.aria-modal]=\"hasBackdrop ? 'true' : 'false'\"\n >\n @if (isSimpleMode) {\n <solaris-dialog [options]=\"simpleOptions()!\" />\n } @else {\n <ng-template #componentHost></ng-template>\n }\n @if (closeable) {\n <button\n type=\"button\"\n data-dialog-close\n (click)=\"closeDialog()\"\n [attr.aria-label]=\"resolvedCloseLabel\"\n class=\"solaris-dialog-container__close\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n </div>\n</div>\n", styles: [":host{--solaris-dialog-panel-padding: 0;--solaris-dialog-panel-min-width: 400px;--solaris-dialog-backdrop-bg: var(--solaris-backdrop);--solaris-dialog-panel-bg: var(--solaris-surface-base);--solaris-dialog-z-index: var(--solaris-z-index-modal);--solaris-dialog-panel-shadow: var(--solaris-shadow-lg);--solaris-dialog-panel-radius: var(--solaris-radius-lg);--solaris-dialog-panel-border: var(--solaris-border-default);--solaris-dialog-panel-max-width: calc(100vw - var(--solaris-spacing-8));--solaris-dialog-panel-max-height: calc(100dvh - var(--solaris-spacing-8));inset:0;display:flex;position:fixed;overflow:hidden;align-items:center;justify-content:center;z-index:var(--solaris-dialog-z-index)}:host([data-placement=top]){align-items:flex-start}:host([data-placement=bottom]){align-items:flex-end}:host([data-placement=left]){justify-content:flex-start}:host([data-placement=right]){justify-content:flex-end}:host([data-placement=top-left]){align-items:flex-start;justify-content:flex-start}:host([data-placement=top-right]){align-items:flex-start;justify-content:flex-end}:host([data-placement=bottom-left]){align-items:flex-end;justify-content:flex-start}:host([data-placement=bottom-right]){align-items:flex-end;justify-content:flex-end}:host([data-radius=none]){--solaris-dialog-panel-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-dialog-panel-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-dialog-panel-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-dialog-panel-radius: var(--solaris-radius-lg)}:host([data-radius=full]){--solaris-dialog-panel-radius: var(--solaris-radius-full)}:host([data-backdrop=false]){--solaris-dialog-backdrop-bg: transparent;pointer-events:none}.solaris-dialog-backdrop{inset:0;display:flex;position:fixed;align-items:center;justify-content:center;background:var(--solaris-dialog-backdrop-bg)}:host([data-placement=top]) .solaris-dialog-backdrop{align-items:flex-start;padding-top:var(--solaris-spacing-4)}:host([data-placement=bottom]) .solaris-dialog-backdrop{align-items:flex-end;padding-bottom:var(--solaris-spacing-4)}:host([data-placement=left]) .solaris-dialog-backdrop{justify-content:flex-start;padding-left:var(--solaris-spacing-4)}:host([data-placement=right]) .solaris-dialog-backdrop{justify-content:flex-end;padding-right:var(--solaris-spacing-4)}:host([data-placement=top-left]) .solaris-dialog-backdrop{align-items:flex-start;justify-content:flex-start;padding-top:var(--solaris-spacing-4);padding-left:var(--solaris-spacing-4)}:host([data-placement=top-right]) .solaris-dialog-backdrop{align-items:flex-start;justify-content:flex-end;padding-top:var(--solaris-spacing-4);padding-right:var(--solaris-spacing-4)}:host([data-placement=bottom-left]) .solaris-dialog-backdrop{align-items:flex-end;justify-content:flex-start;padding-left:var(--solaris-spacing-4);padding-bottom:var(--solaris-spacing-4)}:host([data-placement=bottom-right]) .solaris-dialog-backdrop{align-items:flex-end;justify-content:flex-end;padding-right:var(--solaris-spacing-4);padding-bottom:var(--solaris-spacing-4)}:host([data-backdrop=false]) .solaris-dialog-backdrop{pointer-events:none}:host([data-backdrop=false]) .solaris-dialog-panel{pointer-events:auto}.solaris-dialog-panel{display:flex;overflow:hidden;position:relative;flex-direction:column;box-sizing:border-box;background:var(--solaris-dialog-panel-bg);box-shadow:var(--solaris-dialog-panel-shadow);max-width:var(--solaris-dialog-panel-max-width);min-width:var(--solaris-dialog-panel-min-width);border-radius:var(--solaris-dialog-panel-radius);max-height:var(--solaris-dialog-panel-max-height);animation:solaris-dialog-enter var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate)}.solaris-dialog-container__close{border:none;display:flex;cursor:pointer;background:none;aspect-ratio:1/1;position:absolute;align-items:center;top:var(--solaris-spacing-3);right:var(--solaris-spacing-3);width:var(--solaris-spacing-4);height:var(--solaris-spacing-4);color:var(--solaris-text-muted);font-size:var(--solaris-font-size-lg);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate)}.solaris-dialog-container__close:hover{color:var(--solaris-text-strong)}:host([data-appearance=outline]) .solaris-dialog-panel{border:var(--solaris-border-width-sm) solid var(--solaris-dialog-panel-border)}:host([data-fullscreen]) .solaris-dialog-panel{width:100vw;height:100dvh;max-width:100vw;border-radius:0;max-height:100dvh}@keyframes solaris-dialog-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.solaris-dialog-panel{animation:none}}:host-context([data-reduced-motion=true]) .solaris-dialog-panel{animation:none}\n"] }]
14149
14165
  }], ctorParameters: () => [], propDecorators: { externalComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalComponent", required: false }] }], simpleOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "simpleOptions", required: false }] }], externalComponentConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalComponentConfig", required: false }] }], _componentHost: [{ type: i0.ViewChild, args: ['componentHost', { ...{
14150
14166
  read: ViewContainerRef,
14151
14167
  }, isSignal: true }] }], _dialogPanel: [{ type: i0.ViewChild, args: ['dialogPanel', { isSignal: true }] }], _focusTrap: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkTrapFocus), { isSignal: true }] }], onEscapePress: [{