oasys-lib 2.10.0-rc.0 → 2.11.0
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/fesm2022/oasys-lib.mjs +101 -13
- package/fesm2022/oasys-lib.mjs.map +1 -1
- package/lib/components/alert/alert-cancel.directive.d.ts +3 -3
- package/lib/components/alert/alert-cancel.directive.d.ts.map +1 -1
- package/lib/components/alert/alert.component.d.ts +15 -5
- package/lib/components/alert/alert.component.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/assets/bloomandwild/variables.css +1 -1
- package/src/assets/bloomon/variables.css +1 -1
- package/src/assets/global/scss-breakpoints.scss +1 -1
package/fesm2022/oasys-lib.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Directive, Injectable, Inject, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken,
|
|
2
|
+
import { inject, ElementRef, Directive, Injectable, Inject, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, HostListener, EventEmitter, ViewChild, Output, ContentChild, NgModule, HostBinding, signal, forwardRef, computed, input, CUSTOM_ELEMENTS_SCHEMA, ViewChildren, ContentChildren } from '@angular/core';
|
|
3
3
|
import { BehaviorSubject, Subject, Observable } from 'rxjs';
|
|
4
4
|
import { takeUntil, take, map } from 'rxjs/operators';
|
|
5
5
|
import * as i1 from '@angular/cdk/layout';
|
|
@@ -10,15 +10,23 @@ import * as i1$1 from '@angular/forms';
|
|
|
10
10
|
import { ReactiveFormsModule, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
11
11
|
|
|
12
12
|
class OasysAlertCancelDirective {
|
|
13
|
-
elem;
|
|
14
13
|
text = '';
|
|
15
|
-
|
|
16
|
-
this.elem = elem;
|
|
17
|
-
}
|
|
14
|
+
elem = inject(ElementRef);
|
|
18
15
|
ngAfterContentChecked() {
|
|
19
|
-
this.text = this.elem.nativeElement.innerText;
|
|
16
|
+
this.text = this.elem ? this.elem.nativeElement.innerText : '';
|
|
17
|
+
}
|
|
18
|
+
focus() {
|
|
19
|
+
const element = this.elem ? this.elem.nativeElement : undefined;
|
|
20
|
+
if (element && typeof element.focus === 'function') {
|
|
21
|
+
const buttonElement = element.closest('button') ?? element;
|
|
22
|
+
if (typeof buttonElement.focus === 'function') {
|
|
23
|
+
setTimeout(() => {
|
|
24
|
+
buttonElement.focus();
|
|
25
|
+
}, 500);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
20
28
|
}
|
|
21
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OasysAlertCancelDirective, deps: [
|
|
29
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OasysAlertCancelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
22
30
|
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: OasysAlertCancelDirective, isStandalone: true, selector: "ui-alert-cancel, [ui-alert-cancel]", ngImport: i0 });
|
|
23
31
|
}
|
|
24
32
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OasysAlertCancelDirective, decorators: [{
|
|
@@ -27,7 +35,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
27
35
|
selector: 'ui-alert-cancel, [ui-alert-cancel]',
|
|
28
36
|
standalone: true,
|
|
29
37
|
}]
|
|
30
|
-
}]
|
|
38
|
+
}] });
|
|
31
39
|
|
|
32
40
|
class OasysAlertConfirmDirective {
|
|
33
41
|
elem;
|
|
@@ -462,11 +470,11 @@ class IconComponent {
|
|
|
462
470
|
});
|
|
463
471
|
}
|
|
464
472
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: IconComponent, deps: [{ token: DOCUMENT }, { token: TokenService }], target: i0.ɵɵFactoryTarget.Component });
|
|
465
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: IconComponent, isStandalone: true, selector: "ui-icon", inputs: { icon_size: "icon_size", icon_size_override: "icon_size_override", icon_name: "icon_name", icon_context: "icon_context", alt_text: "alt_text", icon_class: "icon_class" }, providers: [TokenService], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"iconPath\" class=\"ui-icon\" [ngClass]=\"iconDisplayClasses\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.width]=\"iconSizeInPixels\"\n [attr.height]=\"iconSizeInPixels\"\n [attr.class]=\"icon_class\"\n [attr.alt]=\"alt_text\"\n >\n <use [attr.xlink:href]=\"iconPath\"></use>\n </svg>\n</div>\n", styles: [".ui-icon{display:flex}.ui-icon svg{fill:currentColor}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
473
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: IconComponent, isStandalone: true, selector: "ui-icon", inputs: { icon_size: "icon_size", icon_size_override: "icon_size_override", icon_name: "icon_name", icon_context: "icon_context", alt_text: "alt_text", icon_class: "icon_class" }, providers: [TokenService], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"iconPath\" class=\"ui-icon\" [ngClass]=\"iconDisplayClasses\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.width]=\"iconSizeInPixels\"\n [attr.height]=\"iconSizeInPixels\"\n [attr.class]=\"icon_class\"\n [attr.alt]=\"alt_text\"\n [attr.role]=\"'presentation'\"\n >\n <use [attr.xlink:href]=\"iconPath\"></use>\n </svg>\n</div>\n", styles: [".ui-icon{display:flex}.ui-icon svg{fill:currentColor}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
466
474
|
}
|
|
467
475
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: IconComponent, decorators: [{
|
|
468
476
|
type: Component,
|
|
469
|
-
args: [{ selector: 'ui-icon', encapsulation: ViewEncapsulation.None, standalone: true, imports: [NgIf, NgClass], providers: [TokenService], template: "<div *ngIf=\"iconPath\" class=\"ui-icon\" [ngClass]=\"iconDisplayClasses\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.width]=\"iconSizeInPixels\"\n [attr.height]=\"iconSizeInPixels\"\n [attr.class]=\"icon_class\"\n [attr.alt]=\"alt_text\"\n >\n <use [attr.xlink:href]=\"iconPath\"></use>\n </svg>\n</div>\n", styles: [".ui-icon{display:flex}.ui-icon svg{fill:currentColor}\n"] }]
|
|
477
|
+
args: [{ selector: 'ui-icon', encapsulation: ViewEncapsulation.None, standalone: true, imports: [NgIf, NgClass], providers: [TokenService], template: "<div *ngIf=\"iconPath\" class=\"ui-icon\" [ngClass]=\"iconDisplayClasses\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.width]=\"iconSizeInPixels\"\n [attr.height]=\"iconSizeInPixels\"\n [attr.class]=\"icon_class\"\n [attr.alt]=\"alt_text\"\n [attr.role]=\"'presentation'\"\n >\n <use [attr.xlink:href]=\"iconPath\"></use>\n </svg>\n</div>\n", styles: [".ui-icon{display:flex}.ui-icon svg{fill:currentColor}\n"] }]
|
|
470
478
|
}], ctorParameters: () => [{ type: Document, decorators: [{
|
|
471
479
|
type: Inject,
|
|
472
480
|
args: [DOCUMENT]
|
|
@@ -641,11 +649,19 @@ class OasysAlertComponent {
|
|
|
641
649
|
breakpointService;
|
|
642
650
|
direction = 'dynamic';
|
|
643
651
|
tone = 'neutral';
|
|
652
|
+
aria_live = 'polite';
|
|
644
653
|
button_size = 'large';
|
|
654
|
+
// adding this ignore because changing this value requires a breaking change in FE monolith
|
|
655
|
+
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
645
656
|
cancel = new EventEmitter();
|
|
646
657
|
confirm = new EventEmitter();
|
|
647
658
|
cancelButton;
|
|
648
659
|
confirmButton;
|
|
660
|
+
cancelbuttoncontainer;
|
|
661
|
+
alertHost;
|
|
662
|
+
wasVisible = false;
|
|
663
|
+
hasFocusedOnCurrentVisibility = false;
|
|
664
|
+
ariaLiveElement;
|
|
649
665
|
constructor(breakpointService) {
|
|
650
666
|
this.breakpointService = breakpointService;
|
|
651
667
|
}
|
|
@@ -655,8 +671,9 @@ class OasysAlertComponent {
|
|
|
655
671
|
return true;
|
|
656
672
|
case 'horizontal':
|
|
657
673
|
return false;
|
|
658
|
-
default:
|
|
674
|
+
default: {
|
|
659
675
|
return this.breakpointService.currentSize.value === Breakpoint.MOBILE;
|
|
676
|
+
}
|
|
660
677
|
}
|
|
661
678
|
}
|
|
662
679
|
get buttonSize() {
|
|
@@ -670,8 +687,71 @@ class OasysAlertComponent {
|
|
|
670
687
|
confirmed() {
|
|
671
688
|
this.confirm.emit();
|
|
672
689
|
}
|
|
690
|
+
ngAfterViewInit() {
|
|
691
|
+
this.ariaLiveElement = this.alertHost?.nativeElement;
|
|
692
|
+
this.checkVisibilityAndFocus();
|
|
693
|
+
}
|
|
694
|
+
ngAfterContentChecked() {
|
|
695
|
+
this.checkVisibilityAndFocus();
|
|
696
|
+
}
|
|
697
|
+
checkVisibilityAndFocus() {
|
|
698
|
+
const isVisible = this.isComponentVisible();
|
|
699
|
+
if (isVisible && !this.wasVisible && this.ariaLiveElement && !this.cancelButton) {
|
|
700
|
+
// Temporarily remove and re-add aria-live to force screenreader announcement
|
|
701
|
+
// This tricks screenreaders into treating it as a new aria-live region
|
|
702
|
+
const currentAriaLive = this.aria_live;
|
|
703
|
+
this.ariaLiveElement.removeAttribute('aria-live');
|
|
704
|
+
this.ariaLiveElement.removeAttribute('role');
|
|
705
|
+
// Use requestAnimationFrame and setTimeout to ensure the DOM update cycle completes
|
|
706
|
+
// This gives screenreaders time to recognize the change
|
|
707
|
+
requestAnimationFrame(() => {
|
|
708
|
+
setTimeout(() => {
|
|
709
|
+
if (this.ariaLiveElement && this.isComponentVisible()) {
|
|
710
|
+
this.ariaLiveElement.setAttribute('aria-live', currentAriaLive);
|
|
711
|
+
this.ariaLiveElement.setAttribute('role', 'alert');
|
|
712
|
+
}
|
|
713
|
+
}, 50);
|
|
714
|
+
});
|
|
715
|
+
}
|
|
716
|
+
// only move focus if there is a button that requires focus
|
|
717
|
+
if (!this.cancelButton) {
|
|
718
|
+
this.wasVisible = isVisible;
|
|
719
|
+
return;
|
|
720
|
+
}
|
|
721
|
+
// Only focus when transitioning from hidden to visible
|
|
722
|
+
if (isVisible && (!this.wasVisible || !this.hasFocusedOnCurrentVisibility)) {
|
|
723
|
+
// Use setTimeout to ensure the DOM is fully updated before focusing
|
|
724
|
+
// This is (apparently) similar to how aria-live waits for the DOM update cycle
|
|
725
|
+
setTimeout(() => {
|
|
726
|
+
if (this.isComponentVisible() && this.cancelButton) {
|
|
727
|
+
const hostElement = this.alertHost?.nativeElement;
|
|
728
|
+
hostElement?.focus();
|
|
729
|
+
this.hasFocusedOnCurrentVisibility = true;
|
|
730
|
+
}
|
|
731
|
+
}, 0);
|
|
732
|
+
}
|
|
733
|
+
// Reset focus flag when component becomes hidden
|
|
734
|
+
if (!isVisible) {
|
|
735
|
+
this.hasFocusedOnCurrentVisibility = false;
|
|
736
|
+
}
|
|
737
|
+
this.wasVisible = isVisible;
|
|
738
|
+
}
|
|
739
|
+
isComponentVisible() {
|
|
740
|
+
const hostElement = this.alertHost?.nativeElement;
|
|
741
|
+
if (!hostElement)
|
|
742
|
+
return false;
|
|
743
|
+
const style = window.getComputedStyle(hostElement);
|
|
744
|
+
if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0') {
|
|
745
|
+
return false;
|
|
746
|
+
}
|
|
747
|
+
// Check if element is in the DOM and has dimensions
|
|
748
|
+
if (hostElement.offsetParent === null && style.position !== 'fixed') {
|
|
749
|
+
return false;
|
|
750
|
+
}
|
|
751
|
+
return true;
|
|
752
|
+
}
|
|
673
753
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OasysAlertComponent, deps: [{ token: BreakpointService }], target: i0.ɵɵFactoryTarget.Component });
|
|
674
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: OasysAlertComponent, isStandalone: true, selector: "ui-alert", inputs: { direction: "direction", tone: "tone", button_size: "button_size" }, outputs: { cancel: "cancel", confirm: "confirm" }, queries: [{ propertyName: "cancelButton", first: true, predicate: OasysAlertCancelDirective, descendants: true }, { propertyName: "confirmButton", first: true, predicate: OasysAlertConfirmDirective, descendants: true }], ngImport: i0, template: "<ui-box class=\"ui-alert\" box_space=\"near\" box_align_x=\"center\" [ngClass]=\"tone\">\n <ui-stack stack_direction=\"x\" stack_gap=\"near\">\n <div class=\"badge\" [ngClass]=\"tone\" [ngSwitch]=\"tone\">\n <ui-icon *ngSwitchCase=\"'negative'\" icon_name=\"error\"></ui-icon>\n <ui-icon *ngSwitchCase=\"'positive'\" icon_name=\"tick\"></ui-icon>\n <ui-icon *ngSwitchDefault icon_name=\"info\"></ui-icon>\n </div>\n\n <ui-stack stack_gap=\"near\" [stack_direction]=\"isVertical ? 'y' : 'x'\">\n <ui-stack
|
|
754
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: OasysAlertComponent, isStandalone: true, selector: "ui-alert", inputs: { direction: "direction", tone: "tone", aria_live: "aria_live", button_size: "button_size" }, outputs: { cancel: "cancel", confirm: "confirm" }, queries: [{ propertyName: "cancelButton", first: true, predicate: OasysAlertCancelDirective, descendants: true }, { propertyName: "confirmButton", first: true, predicate: OasysAlertConfirmDirective, descendants: true }], viewQueries: [{ propertyName: "cancelbuttoncontainer", first: true, predicate: ["cancelbuttoncontainer"], descendants: true, read: ElementRef }, { propertyName: "alertHost", first: true, predicate: ["alertHost"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ui-box class=\"ui-alert\" box_space=\"near\" box_align_x=\"center\" [ngClass]=\"tone\">\n <ui-stack stack_direction=\"x\" stack_gap=\"near\">\n <div class=\"badge\" [ngClass]=\"tone\" [ngSwitch]=\"tone\">\n <ui-icon *ngSwitchCase=\"'negative'\" icon_name=\"error\"></ui-icon>\n <ui-icon *ngSwitchCase=\"'positive'\" icon_name=\"tick\"></ui-icon>\n <ui-icon *ngSwitchDefault icon_name=\"info\"></ui-icon>\n </div>\n\n <ui-stack stack_gap=\"near\" [stack_direction]=\"isVertical ? 'y' : 'x'\">\n <ui-stack\n #alertHost\n class=\"content\"\n stack_direction=\"y\"\n role=\"alert\"\n [attr.aria-live]=\"cancelButton ? 'off' : aria_live\"\n [tabindex]=\"cancelButton ? -1 : 0\"\n >\n <div class=\"text-body--emphasis\">\n <ng-content select=\"ui-alert-title\"></ng-content>\n </div>\n <div>\n <ng-content select=\"ui-alert-content\"></ng-content>\n </div>\n </ui-stack>\n\n <ui-box\n box_space=\"none\"\n box_background=\"transparent\"\n [box_fill_mode]=\"isVertical ? 'fill' : 'fit'\"\n >\n <ui-stack\n [stack_wrap]=\"isVertical\"\n stack_direction=\"x\"\n stack_gap=\"near\"\n stack_distribute=\"end\"\n >\n <ui-button\n *ngIf=\"cancelButton && cancelButton.text\"\n #cancelbuttoncontainer\n button_type=\"tertiary\"\n [button_size]=\"buttonSize\"\n [button_text_nowrap]=\"!isVertical\"\n (clicked)=\"cancelled()\"\n >\n <ng-content select=\"ui-alert-cancel\"></ng-content>\n </ui-button>\n <ui-button\n *ngIf=\"confirmButton && confirmButton.text\"\n button_type=\"secondary\"\n [button_size]=\"buttonSize\"\n [button_text_nowrap]=\"!isVertical\"\n (clicked)=\"confirmed()\"\n >\n <ng-content select=\"ui-alert-confirm\"></ng-content>\n </ui-button>\n </ui-stack>\n </ui-box>\n </ui-stack>\n </ui-stack>\n</ui-box>\n", styles: [":host{display:contents}.ui-alert{background-color:var(--oasys-color-system-background-neutral)}.ui-alert.negative{background-color:var(--oasys-color-system-background-negative)}.ui-alert.positive{background-color:var(--oasys-color-system-background-positive)}.ui-alert .badge{padding:2px;border-radius:9999px;color:var(--oasys-color-brand-foreground-primary);background-color:var(--oasys-color-system-foreground-neutral)}.ui-alert .badge.negative{color:var(--oasys-color-brand-foreground-primary-on-dark);background-color:var(--oasys-color-system-foreground-negative)}.ui-alert .badge.positive{color:var(--oasys-color-brand-foreground-primary-on-dark);background-color:var(--oasys-color-system-foreground-positive)}.ui-alert .badge ui-icon{fill:currentColor}.ui-alert .content{gap:var(--oasys-spacing-tiny)}.ui-alert .content:focus{outline:unset}\n"], dependencies: [{ kind: "component", type: LayoutBoxComponent, selector: "ui-box", inputs: ["box_space", "box_space_top", "box_space_right", "box_space_bottom", "box_space_left", "box_align_x", "box_align_y", "box_fill_mode", "box_background", "box_content_fill_width", "box_border_color", "box_border_width", "box_border_style", "box_border_radius"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap", "stack_collapse_below", "stack_as_list"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["icon_size", "icon_size_override", "icon_name", "icon_context", "alt_text", "icon_class"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OasysButtonComponent, selector: "ui-button", inputs: ["button_icon", "button_icon_placement", "button_size", "button_type", "button_full_width", "button_event_type", "button_disabled", "button_selected", "button_text_nowrap", "aria_label", "aria_role", "href"], outputs: ["clicked"] }] });
|
|
675
755
|
}
|
|
676
756
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OasysAlertComponent, decorators: [{
|
|
677
757
|
type: Component,
|
|
@@ -685,11 +765,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
685
765
|
NgSwitchDefault,
|
|
686
766
|
NgIf,
|
|
687
767
|
OasysButtonComponent,
|
|
688
|
-
], template: "<ui-box class=\"ui-alert\" box_space=\"near\" box_align_x=\"center\" [ngClass]=\"tone\">\n <ui-stack stack_direction=\"x\" stack_gap=\"near\">\n <div class=\"badge\" [ngClass]=\"tone\" [ngSwitch]=\"tone\">\n <ui-icon *ngSwitchCase=\"'negative'\" icon_name=\"error\"></ui-icon>\n <ui-icon *ngSwitchCase=\"'positive'\" icon_name=\"tick\"></ui-icon>\n <ui-icon *ngSwitchDefault icon_name=\"info\"></ui-icon>\n </div>\n\n <ui-stack stack_gap=\"near\" [stack_direction]=\"isVertical ? 'y' : 'x'\">\n <ui-stack
|
|
768
|
+
], template: "<ui-box class=\"ui-alert\" box_space=\"near\" box_align_x=\"center\" [ngClass]=\"tone\">\n <ui-stack stack_direction=\"x\" stack_gap=\"near\">\n <div class=\"badge\" [ngClass]=\"tone\" [ngSwitch]=\"tone\">\n <ui-icon *ngSwitchCase=\"'negative'\" icon_name=\"error\"></ui-icon>\n <ui-icon *ngSwitchCase=\"'positive'\" icon_name=\"tick\"></ui-icon>\n <ui-icon *ngSwitchDefault icon_name=\"info\"></ui-icon>\n </div>\n\n <ui-stack stack_gap=\"near\" [stack_direction]=\"isVertical ? 'y' : 'x'\">\n <ui-stack\n #alertHost\n class=\"content\"\n stack_direction=\"y\"\n role=\"alert\"\n [attr.aria-live]=\"cancelButton ? 'off' : aria_live\"\n [tabindex]=\"cancelButton ? -1 : 0\"\n >\n <div class=\"text-body--emphasis\">\n <ng-content select=\"ui-alert-title\"></ng-content>\n </div>\n <div>\n <ng-content select=\"ui-alert-content\"></ng-content>\n </div>\n </ui-stack>\n\n <ui-box\n box_space=\"none\"\n box_background=\"transparent\"\n [box_fill_mode]=\"isVertical ? 'fill' : 'fit'\"\n >\n <ui-stack\n [stack_wrap]=\"isVertical\"\n stack_direction=\"x\"\n stack_gap=\"near\"\n stack_distribute=\"end\"\n >\n <ui-button\n *ngIf=\"cancelButton && cancelButton.text\"\n #cancelbuttoncontainer\n button_type=\"tertiary\"\n [button_size]=\"buttonSize\"\n [button_text_nowrap]=\"!isVertical\"\n (clicked)=\"cancelled()\"\n >\n <ng-content select=\"ui-alert-cancel\"></ng-content>\n </ui-button>\n <ui-button\n *ngIf=\"confirmButton && confirmButton.text\"\n button_type=\"secondary\"\n [button_size]=\"buttonSize\"\n [button_text_nowrap]=\"!isVertical\"\n (clicked)=\"confirmed()\"\n >\n <ng-content select=\"ui-alert-confirm\"></ng-content>\n </ui-button>\n </ui-stack>\n </ui-box>\n </ui-stack>\n </ui-stack>\n</ui-box>\n", styles: [":host{display:contents}.ui-alert{background-color:var(--oasys-color-system-background-neutral)}.ui-alert.negative{background-color:var(--oasys-color-system-background-negative)}.ui-alert.positive{background-color:var(--oasys-color-system-background-positive)}.ui-alert .badge{padding:2px;border-radius:9999px;color:var(--oasys-color-brand-foreground-primary);background-color:var(--oasys-color-system-foreground-neutral)}.ui-alert .badge.negative{color:var(--oasys-color-brand-foreground-primary-on-dark);background-color:var(--oasys-color-system-foreground-negative)}.ui-alert .badge.positive{color:var(--oasys-color-brand-foreground-primary-on-dark);background-color:var(--oasys-color-system-foreground-positive)}.ui-alert .badge ui-icon{fill:currentColor}.ui-alert .content{gap:var(--oasys-spacing-tiny)}.ui-alert .content:focus{outline:unset}\n"] }]
|
|
689
769
|
}], ctorParameters: () => [{ type: BreakpointService }], propDecorators: { direction: [{
|
|
690
770
|
type: Input
|
|
691
771
|
}], tone: [{
|
|
692
772
|
type: Input
|
|
773
|
+
}], aria_live: [{
|
|
774
|
+
type: Input
|
|
693
775
|
}], button_size: [{
|
|
694
776
|
type: Input
|
|
695
777
|
}], cancel: [{
|
|
@@ -702,6 +784,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
702
784
|
}], confirmButton: [{
|
|
703
785
|
type: ContentChild,
|
|
704
786
|
args: [OasysAlertConfirmDirective]
|
|
787
|
+
}], cancelbuttoncontainer: [{
|
|
788
|
+
type: ViewChild,
|
|
789
|
+
args: ['cancelbuttoncontainer', { read: ElementRef }]
|
|
790
|
+
}], alertHost: [{
|
|
791
|
+
type: ViewChild,
|
|
792
|
+
args: ['alertHost', { read: ElementRef }]
|
|
705
793
|
}] } });
|
|
706
794
|
|
|
707
795
|
class OasysAlertModule {
|