cerxos-ui 0.0.10 → 0.0.12
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/README.md +63 -63
- package/fesm2022/cerxos-ui.mjs +87 -35
- package/fesm2022/cerxos-ui.mjs.map +1 -1
- package/index.d.ts +11 -3
- package/package.json +2 -2
- package/styles/tailwind.css +3 -3
- package/tokens/theme-dark.css +16 -16
- package/tokens/theme-default.css +15 -15
package/README.md
CHANGED
|
@@ -1,63 +1,63 @@
|
|
|
1
|
-
# CerxosUi
|
|
2
|
-
|
|
3
|
-
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.
|
|
4
|
-
|
|
5
|
-
## Code scaffolding
|
|
6
|
-
|
|
7
|
-
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
|
8
|
-
|
|
9
|
-
```bash
|
|
10
|
-
ng generate component component-name
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
|
14
|
-
|
|
15
|
-
```bash
|
|
16
|
-
ng generate --help
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
## Building
|
|
20
|
-
|
|
21
|
-
To build the library, run:
|
|
22
|
-
|
|
23
|
-
```bash
|
|
24
|
-
ng build cerxos-ui
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
|
|
28
|
-
|
|
29
|
-
### Publishing the Library
|
|
30
|
-
|
|
31
|
-
Once the project is built, you can publish your library by following these steps:
|
|
32
|
-
|
|
33
|
-
1. Navigate to the `dist` directory:
|
|
34
|
-
```bash
|
|
35
|
-
cd dist/cerxos-ui
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
2. Run the `npm publish` command to publish your library to the npm registry:
|
|
39
|
-
```bash
|
|
40
|
-
npm publish
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
## Running unit tests
|
|
44
|
-
|
|
45
|
-
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
|
46
|
-
|
|
47
|
-
```bash
|
|
48
|
-
ng test
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
## Running end-to-end tests
|
|
52
|
-
|
|
53
|
-
For end-to-end (e2e) testing, run:
|
|
54
|
-
|
|
55
|
-
```bash
|
|
56
|
-
ng e2e
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
|
60
|
-
|
|
61
|
-
## Additional Resources
|
|
62
|
-
|
|
63
|
-
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|
|
1
|
+
# CerxosUi
|
|
2
|
+
|
|
3
|
+
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.
|
|
4
|
+
|
|
5
|
+
## Code scaffolding
|
|
6
|
+
|
|
7
|
+
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
ng generate component component-name
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
ng generate --help
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Building
|
|
20
|
+
|
|
21
|
+
To build the library, run:
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
ng build cerxos-ui
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
|
|
28
|
+
|
|
29
|
+
### Publishing the Library
|
|
30
|
+
|
|
31
|
+
Once the project is built, you can publish your library by following these steps:
|
|
32
|
+
|
|
33
|
+
1. Navigate to the `dist` directory:
|
|
34
|
+
```bash
|
|
35
|
+
cd dist/cerxos-ui
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
2. Run the `npm publish` command to publish your library to the npm registry:
|
|
39
|
+
```bash
|
|
40
|
+
npm publish
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## Running unit tests
|
|
44
|
+
|
|
45
|
+
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
|
46
|
+
|
|
47
|
+
```bash
|
|
48
|
+
ng test
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Running end-to-end tests
|
|
52
|
+
|
|
53
|
+
For end-to-end (e2e) testing, run:
|
|
54
|
+
|
|
55
|
+
```bash
|
|
56
|
+
ng e2e
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
|
60
|
+
|
|
61
|
+
## Additional Resources
|
|
62
|
+
|
|
63
|
+
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|
package/fesm2022/cerxos-ui.mjs
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, EventEmitter, ElementRef, HostListener, ViewChildren, ViewChild, Output, Input, ChangeDetectionStrategy, Attribute, forwardRef, Directive, ContentChildren, ContentChild } from '@angular/core';
|
|
2
|
+
import { Component, EventEmitter, ElementRef, HostListener, ViewChildren, ViewChild, Output, Input, ChangeDetectionStrategy, Attribute, forwardRef, Directive, ContentChildren, ContentChild, HostBinding } from '@angular/core';
|
|
3
3
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
4
4
|
import * as i1 from '@angular/common';
|
|
5
5
|
import { NgTemplateOutlet, CommonModule, NgIf } from '@angular/common';
|
|
6
6
|
|
|
7
7
|
class CerxosUi {
|
|
8
8
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CerxosUi, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CerxosUi, isStandalone: true, selector: "cxs-cerxos-ui", ngImport: i0, template: `
|
|
10
|
-
<p>
|
|
11
|
-
cerxos-ui works!
|
|
12
|
-
</p>
|
|
9
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CerxosUi, isStandalone: true, selector: "cxs-cerxos-ui", ngImport: i0, template: `
|
|
10
|
+
<p>
|
|
11
|
+
cerxos-ui works!
|
|
12
|
+
</p>
|
|
13
13
|
`, isInline: true, styles: [""] });
|
|
14
14
|
}
|
|
15
15
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CerxosUi, decorators: [{
|
|
16
16
|
type: Component,
|
|
17
|
-
args: [{ selector: 'cxs-cerxos-ui', imports: [], template: `
|
|
18
|
-
<p>
|
|
19
|
-
cerxos-ui works!
|
|
20
|
-
</p>
|
|
17
|
+
args: [{ selector: 'cxs-cerxos-ui', imports: [], template: `
|
|
18
|
+
<p>
|
|
19
|
+
cerxos-ui works!
|
|
20
|
+
</p>
|
|
21
21
|
` }]
|
|
22
22
|
}] });
|
|
23
23
|
|
|
@@ -209,8 +209,10 @@ class CxsActionMenuComponent {
|
|
|
209
209
|
setTimeout(() => {
|
|
210
210
|
const menuEl = this.menu?.nativeElement;
|
|
211
211
|
const menuRect = menuEl?.getBoundingClientRect();
|
|
212
|
-
const
|
|
213
|
-
const
|
|
212
|
+
const measuredWidth = menuRect?.width ?? 0;
|
|
213
|
+
const measuredHeight = menuRect?.height ?? 0;
|
|
214
|
+
const menuWidth = measuredWidth > 1 ? measuredWidth : 160;
|
|
215
|
+
const menuHeight = measuredHeight > 1 ? measuredHeight : 0;
|
|
214
216
|
let top = rect.bottom + offset;
|
|
215
217
|
let left = this.align === 'end' ? rect.right - menuWidth : rect.left;
|
|
216
218
|
if (top + menuHeight > window.innerHeight) {
|
|
@@ -310,11 +312,11 @@ class CxsAlertComponent {
|
|
|
310
312
|
this.closed.emit();
|
|
311
313
|
}
|
|
312
314
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
313
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsAlertComponent, isStandalone: true, selector: "cxs-alert", inputs: { variant: "variant", title: "title", dismissible: "dismissible" }, outputs: { closed: "closed" }, ngImport: i0, template: "@if (isVisible) {\
|
|
315
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsAlertComponent, isStandalone: true, selector: "cxs-alert", inputs: { variant: "variant", title: "title", dismissible: "dismissible" }, outputs: { closed: "closed" }, ngImport: i0, template: "@if (isVisible) {\n <div [class]=\"alertClass\" role=\"status\" aria-live=\"polite\">\n <div class=\"flex flex-col gap-1\">\n @if (title) {\n <div [class]=\"titleClass\">{{ title }}</div>\n }\n <div class=\"text-[var(--cxs-color-on-surface)]\">\n <ng-content></ng-content>\n </div>\n </div>\n @if (dismissible) {\n <button\n type=\"button\"\n [class]=\"closeButtonClass\"\n aria-label=\"Dismiss alert\"\n (click)=\"onClose()\"\n >\n x\n </button>\n }\n </div>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
314
316
|
}
|
|
315
317
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsAlertComponent, decorators: [{
|
|
316
318
|
type: Component,
|
|
317
|
-
args: [{ selector: 'cxs-alert', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isVisible) {\
|
|
319
|
+
args: [{ selector: 'cxs-alert', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isVisible) {\n <div [class]=\"alertClass\" role=\"status\" aria-live=\"polite\">\n <div class=\"flex flex-col gap-1\">\n @if (title) {\n <div [class]=\"titleClass\">{{ title }}</div>\n }\n <div class=\"text-[var(--cxs-color-on-surface)]\">\n <ng-content></ng-content>\n </div>\n </div>\n @if (dismissible) {\n <button\n type=\"button\"\n [class]=\"closeButtonClass\"\n aria-label=\"Dismiss alert\"\n (click)=\"onClose()\"\n >\n x\n </button>\n }\n </div>\n}\n" }]
|
|
318
320
|
}], propDecorators: { variant: [{
|
|
319
321
|
type: Input
|
|
320
322
|
}], title: [{
|
|
@@ -443,11 +445,11 @@ class CxsBadgeComponent {
|
|
|
443
445
|
return [BASE_CLASSES$8, VARIANT_CLASSES$7[this.variant], SIZE_CLASSES$7[this.size]].join(' ');
|
|
444
446
|
}
|
|
445
447
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
446
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CxsBadgeComponent, isStandalone: true, selector: "cxs-badge", inputs: { variant: "variant", size: "size" }, ngImport: i0, template: "<span [class]=\"badgeClass\">\
|
|
448
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CxsBadgeComponent, isStandalone: true, selector: "cxs-badge", inputs: { variant: "variant", size: "size" }, ngImport: i0, template: "<span [class]=\"badgeClass\">\n <ng-content></ng-content>\n</span>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
447
449
|
}
|
|
448
450
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsBadgeComponent, decorators: [{
|
|
449
451
|
type: Component,
|
|
450
|
-
args: [{ selector: 'cxs-badge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [class]=\"badgeClass\">\
|
|
452
|
+
args: [{ selector: 'cxs-badge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [class]=\"badgeClass\">\n <ng-content></ng-content>\n</span>\n" }]
|
|
451
453
|
}], propDecorators: { variant: [{
|
|
452
454
|
type: Input
|
|
453
455
|
}], size: [{
|
|
@@ -627,11 +629,11 @@ class CxsBreadcrumbComponent {
|
|
|
627
629
|
return item.rel ?? null;
|
|
628
630
|
}
|
|
629
631
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
630
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsBreadcrumbComponent, isStandalone: true, selector: "cxs-breadcrumb", inputs: { items: "items", separator: "separator", ariaLabel: "ariaLabel", size: "size", variant: "variant", disabled: "disabled" }, ngImport: i0, template: "<nav [attr.aria-label]=\"ariaLabel\">\
|
|
632
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsBreadcrumbComponent, isStandalone: true, selector: "cxs-breadcrumb", inputs: { items: "items", separator: "separator", ariaLabel: "ariaLabel", size: "size", variant: "variant", disabled: "disabled" }, ngImport: i0, template: "<nav [attr.aria-label]=\"ariaLabel\">\n <ol [class]=\"listClass\">\n @for (item of items; track item; let last = $last) {\n <li [class]=\"itemClass\">\n @if (isLink(item, last)) {\n <a\n [class]=\"getLinkClass(item)\"\n [attr.href]=\"item.href\"\n [attr.target]=\"item.target ?? null\"\n [attr.rel]=\"getItemRel(item)\"\n [attr.aria-label]=\"item.ariaLabel ?? null\"\n >\n {{ item.label }}\n </a>\n } @else {\n <span\n [class]=\"getLabelClass(item, last)\"\n [attr.aria-current]=\"last ? 'page' : null\"\n >\n {{ item.label }}\n </span>\n }\n @if (!last && separator) {\n <span [class]=\"separatorClass\" aria-hidden=\"true\">{{ separator }}</span>\n }\n </li>\n }\n </ol>\n</nav>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
631
633
|
}
|
|
632
634
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsBreadcrumbComponent, decorators: [{
|
|
633
635
|
type: Component,
|
|
634
|
-
args: [{ selector: 'cxs-breadcrumb', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav [attr.aria-label]=\"ariaLabel\">\
|
|
636
|
+
args: [{ selector: 'cxs-breadcrumb', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav [attr.aria-label]=\"ariaLabel\">\n <ol [class]=\"listClass\">\n @for (item of items; track item; let last = $last) {\n <li [class]=\"itemClass\">\n @if (isLink(item, last)) {\n <a\n [class]=\"getLinkClass(item)\"\n [attr.href]=\"item.href\"\n [attr.target]=\"item.target ?? null\"\n [attr.rel]=\"getItemRel(item)\"\n [attr.aria-label]=\"item.ariaLabel ?? null\"\n >\n {{ item.label }}\n </a>\n } @else {\n <span\n [class]=\"getLabelClass(item, last)\"\n [attr.aria-current]=\"last ? 'page' : null\"\n >\n {{ item.label }}\n </span>\n }\n @if (!last && separator) {\n <span [class]=\"separatorClass\" aria-hidden=\"true\">{{ separator }}</span>\n }\n </li>\n }\n </ol>\n</nav>\n" }]
|
|
635
637
|
}], propDecorators: { items: [{
|
|
636
638
|
type: Input
|
|
637
639
|
}], separator: [{
|
|
@@ -680,11 +682,11 @@ class CxsButtonComponent {
|
|
|
680
682
|
.join(' ');
|
|
681
683
|
}
|
|
682
684
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsButtonComponent, deps: [{ token: 'class', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
683
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsButtonComponent, isStandalone: true, selector: "cxs-button", inputs: { variant: "variant", size: "size", disabled: "disabled", loading: "loading", type: "type" }, ngImport: i0, template: "<button\
|
|
685
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsButtonComponent, isStandalone: true, selector: "cxs-button", inputs: { variant: "variant", size: "size", disabled: "disabled", loading: "loading", type: "type" }, ngImport: i0, template: "<button\n [class]=\"buttonClass\"\n [attr.type]=\"type\"\n [disabled]=\"isDisabled\"\n [attr.aria-busy]=\"loading ? 'true' : null\"\n>\n @if (loading) {\n <span\n class=\"h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent\"\n aria-hidden=\"true\"\n ></span>\n }\n <ng-content select=\"[cxsButtonIcon]\"></ng-content>\n <span class=\"truncate\">\n <ng-content></ng-content>\n </span>\n</button>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
684
686
|
}
|
|
685
687
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsButtonComponent, decorators: [{
|
|
686
688
|
type: Component,
|
|
687
|
-
args: [{ selector: 'cxs-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\
|
|
689
|
+
args: [{ selector: 'cxs-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n [class]=\"buttonClass\"\n [attr.type]=\"type\"\n [disabled]=\"isDisabled\"\n [attr.aria-busy]=\"loading ? 'true' : null\"\n>\n @if (loading) {\n <span\n class=\"h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent\"\n aria-hidden=\"true\"\n ></span>\n }\n <ng-content select=\"[cxsButtonIcon]\"></ng-content>\n <span class=\"truncate\">\n <ng-content></ng-content>\n </span>\n</button>\n" }]
|
|
688
690
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
689
691
|
type: Attribute,
|
|
690
692
|
args: ['class']
|
|
@@ -729,11 +731,11 @@ class CxsCardComponent {
|
|
|
729
731
|
.join(' ');
|
|
730
732
|
}
|
|
731
733
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
732
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CxsCardComponent, isStandalone: true, selector: "cxs-card", inputs: { variant: "variant", size: "size", elevated: "elevated", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby" }, ngImport: i0, template: "<section\
|
|
734
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CxsCardComponent, isStandalone: true, selector: "cxs-card", inputs: { variant: "variant", size: "size", elevated: "elevated", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby" }, ngImport: i0, template: "<section\n [class]=\"cardClass\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n>\n <ng-content></ng-content>\n</section>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
733
735
|
}
|
|
734
736
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsCardComponent, decorators: [{
|
|
735
737
|
type: Component,
|
|
736
|
-
args: [{ selector: 'cxs-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\
|
|
738
|
+
args: [{ selector: 'cxs-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n [class]=\"cardClass\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n>\n <ng-content></ng-content>\n</section>\n" }]
|
|
737
739
|
}], propDecorators: { variant: [{
|
|
738
740
|
type: Input
|
|
739
741
|
}], size: [{
|
|
@@ -851,7 +853,7 @@ class CxsCheckboxComponent {
|
|
|
851
853
|
useExisting: forwardRef(() => CxsCheckboxComponent),
|
|
852
854
|
multi: true
|
|
853
855
|
}
|
|
854
|
-
], ngImport: i0, template: "<label [class]=\"wrapperClass\">\
|
|
856
|
+
], ngImport: i0, template: "<label [class]=\"wrapperClass\">\n <input\n class=\"peer sr-only\"\n type=\"checkbox\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-checked]=\"ariaChecked\"\n [attr.autofocus]=\"autofocus ? true : null\"\n [checked]=\"checked\"\n [indeterminate]=\"indeterminate\"\n [disabled]=\"isDisabled\"\n [required]=\"required\"\n (change)=\"onCheckboxChange($event)\"\n (blur)=\"onBlur()\"\n />\n <span [class]=\"controlClass\" aria-hidden=\"true\"></span>\n @if (label) {\n <span [class]=\"labelClass\">{{ label }}</span>\n } @else {\n <span [class]=\"labelClass\">\n <ng-content></ng-content>\n </span>\n }\n</label>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
855
857
|
}
|
|
856
858
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsCheckboxComponent, decorators: [{
|
|
857
859
|
type: Component,
|
|
@@ -861,7 +863,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
861
863
|
useExisting: forwardRef(() => CxsCheckboxComponent),
|
|
862
864
|
multi: true
|
|
863
865
|
}
|
|
864
|
-
], template: "<label [class]=\"wrapperClass\">\
|
|
866
|
+
], template: "<label [class]=\"wrapperClass\">\n <input\n class=\"peer sr-only\"\n type=\"checkbox\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-checked]=\"ariaChecked\"\n [attr.autofocus]=\"autofocus ? true : null\"\n [checked]=\"checked\"\n [indeterminate]=\"indeterminate\"\n [disabled]=\"isDisabled\"\n [required]=\"required\"\n (change)=\"onCheckboxChange($event)\"\n (blur)=\"onBlur()\"\n />\n <span [class]=\"controlClass\" aria-hidden=\"true\"></span>\n @if (label) {\n <span [class]=\"labelClass\">{{ label }}</span>\n } @else {\n <span [class]=\"labelClass\">\n <ng-content></ng-content>\n </span>\n }\n</label>\n" }]
|
|
865
867
|
}], propDecorators: { checked: [{
|
|
866
868
|
type: Input
|
|
867
869
|
}], indeterminate: [{
|
|
@@ -1691,8 +1693,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
1691
1693
|
args: [CxsDataTableCellDirective]
|
|
1692
1694
|
}] } });
|
|
1693
1695
|
|
|
1694
|
-
const OVERLAY_CLASSES = 'fixed inset-0 z-50 flex items-center justify-center bg-[rgba(15,23,42,0.45)] p-4';
|
|
1695
|
-
const PANEL_BASE_CLASSES = 'w-full rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
|
|
1696
|
+
const OVERLAY_CLASSES = 'cxs-dialog-overlay fixed inset-0 z-50 flex items-center justify-center bg-[rgba(15,23,42,0.45)] p-4';
|
|
1697
|
+
const PANEL_BASE_CLASSES = 'cxs-dialog-panel w-full rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
|
|
1696
1698
|
'bg-[var(--cxs-color-surface)] text-[var(--cxs-color-on-surface)] shadow-[var(--cxs-shadow-sm)] ' +
|
|
1697
1699
|
'p-6 outline-none';
|
|
1698
1700
|
const PANEL_SIZE_CLASSES = {
|
|
@@ -1794,11 +1796,11 @@ class CxsDialogComponent {
|
|
|
1794
1796
|
});
|
|
1795
1797
|
}
|
|
1796
1798
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsDialogComponent, deps: [{ token: 'class', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1797
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsDialogComponent, isStandalone: true, selector: "cxs-dialog", inputs: { open: "open", title: "title", description: "description", ariaLabel: "ariaLabel", size: "size", dismissible: "dismissible", closeOnBackdrop: "closeOnBackdrop", closeOnEscape: "closeOnEscape" }, outputs: { openChange: "openChange", closed: "closed" }, viewQueries: [{ propertyName: "dialogPanel", first: true, predicate: ["dialogPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (open) {\n <div [class]=\"overlayClass\" (click)=\"onBackdropClick($event)\">\n <div\n #dialogPanel\n [class]=\"panelClass\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"title ? titleId : null\"\n [attr.aria-describedby]=\"description ? descriptionId : null\"\n [attr.aria-label]=\"ariaLabelValue\"\n tabindex=\"-1\"\n (keydown)=\"onKeydown($event)\"\n >\n <div class=\"flex items-start gap-3\">\n <div class=\"flex-1\">\n @if (title) {\n <h2 [id]=\"titleId\" [class]=\"titleClass\">{{ title }}</h2>\n }\n @if (description) {\n <p [id]=\"descriptionId\" [class]=\"descriptionClass\">{{ description }}</p>\n }\n </div>\n @if (dismissible) {\n <button\n type=\"button\"\n [class]=\"closeButtonClass\"\n aria-label=\"Close dialog\"\n (click)=\"requestClose('dismiss')\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n </svg>\n </button>\n }\n </div>\n\n <div [class]=\"bodyClass\">\n <ng-content></ng-content>\n </div>\n\n <div [class]=\"actionsClass\">\n <ng-content select=\"[cxsDialogActions]\"></ng-content>\n </div>\n </div>\n </div>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1799
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsDialogComponent, isStandalone: true, selector: "cxs-dialog", inputs: { open: "open", title: "title", description: "description", ariaLabel: "ariaLabel", size: "size", dismissible: "dismissible", closeOnBackdrop: "closeOnBackdrop", closeOnEscape: "closeOnEscape" }, outputs: { openChange: "openChange", closed: "closed" }, viewQueries: [{ propertyName: "dialogPanel", first: true, predicate: ["dialogPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (open) {\n <div [class]=\"overlayClass\" (click)=\"onBackdropClick($event)\">\n <div\n #dialogPanel\n [class]=\"panelClass\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"title ? titleId : null\"\n [attr.aria-describedby]=\"description ? descriptionId : null\"\n [attr.aria-label]=\"ariaLabelValue\"\n tabindex=\"-1\"\n (keydown)=\"onKeydown($event)\"\n >\n <div class=\"flex items-start gap-3\">\n <div class=\"flex-1\">\n @if (title) {\n <h2 [id]=\"titleId\" [class]=\"titleClass\">{{ title }}</h2>\n }\n @if (description) {\n <p [id]=\"descriptionId\" [class]=\"descriptionClass\">{{ description }}</p>\n }\n </div>\n @if (dismissible) {\n <button\n type=\"button\"\n [class]=\"closeButtonClass\"\n aria-label=\"Close dialog\"\n (click)=\"requestClose('dismiss')\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n </svg>\n </button>\n }\n </div>\n\n <div [class]=\"bodyClass\">\n <ng-content></ng-content>\n </div>\n\n <div [class]=\"actionsClass\">\n <ng-content select=\"[cxsDialogActions]\"></ng-content>\n </div>\n </div>\n </div>\n}\n", styles: [":host{display:contents}.cxs-dialog-overlay{animation:cxs-dialog-overlay-appear .22s ease-out}.cxs-dialog-panel{animation:cxs-dialog-panel-appear .26s cubic-bezier(.16,1,.3,1);transform-origin:center;will-change:opacity,transform}@keyframes cxs-dialog-overlay-appear{0%{opacity:0}to{opacity:1}}@keyframes cxs-dialog-panel-appear{0%{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.cxs-dialog-overlay,.cxs-dialog-panel{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1798
1800
|
}
|
|
1799
1801
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsDialogComponent, decorators: [{
|
|
1800
1802
|
type: Component,
|
|
1801
|
-
args: [{ selector: 'cxs-dialog', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (open) {\n <div [class]=\"overlayClass\" (click)=\"onBackdropClick($event)\">\n <div\n #dialogPanel\n [class]=\"panelClass\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"title ? titleId : null\"\n [attr.aria-describedby]=\"description ? descriptionId : null\"\n [attr.aria-label]=\"ariaLabelValue\"\n tabindex=\"-1\"\n (keydown)=\"onKeydown($event)\"\n >\n <div class=\"flex items-start gap-3\">\n <div class=\"flex-1\">\n @if (title) {\n <h2 [id]=\"titleId\" [class]=\"titleClass\">{{ title }}</h2>\n }\n @if (description) {\n <p [id]=\"descriptionId\" [class]=\"descriptionClass\">{{ description }}</p>\n }\n </div>\n @if (dismissible) {\n <button\n type=\"button\"\n [class]=\"closeButtonClass\"\n aria-label=\"Close dialog\"\n (click)=\"requestClose('dismiss')\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n </svg>\n </button>\n }\n </div>\n\n <div [class]=\"bodyClass\">\n <ng-content></ng-content>\n </div>\n\n <div [class]=\"actionsClass\">\n <ng-content select=\"[cxsDialogActions]\"></ng-content>\n </div>\n </div>\n </div>\n}\n" }]
|
|
1803
|
+
args: [{ selector: 'cxs-dialog', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (open) {\n <div [class]=\"overlayClass\" (click)=\"onBackdropClick($event)\">\n <div\n #dialogPanel\n [class]=\"panelClass\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"title ? titleId : null\"\n [attr.aria-describedby]=\"description ? descriptionId : null\"\n [attr.aria-label]=\"ariaLabelValue\"\n tabindex=\"-1\"\n (keydown)=\"onKeydown($event)\"\n >\n <div class=\"flex items-start gap-3\">\n <div class=\"flex-1\">\n @if (title) {\n <h2 [id]=\"titleId\" [class]=\"titleClass\">{{ title }}</h2>\n }\n @if (description) {\n <p [id]=\"descriptionId\" [class]=\"descriptionClass\">{{ description }}</p>\n }\n </div>\n @if (dismissible) {\n <button\n type=\"button\"\n [class]=\"closeButtonClass\"\n aria-label=\"Close dialog\"\n (click)=\"requestClose('dismiss')\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n </svg>\n </button>\n }\n </div>\n\n <div [class]=\"bodyClass\">\n <ng-content></ng-content>\n </div>\n\n <div [class]=\"actionsClass\">\n <ng-content select=\"[cxsDialogActions]\"></ng-content>\n </div>\n </div>\n </div>\n}\n", styles: [":host{display:contents}.cxs-dialog-overlay{animation:cxs-dialog-overlay-appear .22s ease-out}.cxs-dialog-panel{animation:cxs-dialog-panel-appear .26s cubic-bezier(.16,1,.3,1);transform-origin:center;will-change:opacity,transform}@keyframes cxs-dialog-overlay-appear{0%{opacity:0}to{opacity:1}}@keyframes cxs-dialog-panel-appear{0%{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.cxs-dialog-overlay,.cxs-dialog-panel{animation:none}}\n"] }]
|
|
1802
1804
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
1803
1805
|
type: Attribute,
|
|
1804
1806
|
args: ['class']
|
|
@@ -3083,7 +3085,7 @@ class CxsRadioComponent {
|
|
|
3083
3085
|
useExisting: forwardRef(() => CxsRadioComponent),
|
|
3084
3086
|
multi: true
|
|
3085
3087
|
}
|
|
3086
|
-
], ngImport: i0, template: "<label [class]=\"wrapperClass\">\
|
|
3088
|
+
], ngImport: i0, template: "<label [class]=\"wrapperClass\">\n <input\n class=\"peer sr-only\"\n type=\"radio\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-invalid]=\"invalid ? 'true' : null\"\n [attr.autofocus]=\"autofocus ? true : null\"\n [checked]=\"isChecked\"\n [disabled]=\"isDisabled\"\n [required]=\"required\"\n (change)=\"onRadioChange($event)\"\n (blur)=\"onBlur()\"\n />\n <span [class]=\"controlClass\" aria-hidden=\"true\"></span>\n <span [class]=\"labelClass\">\n <ng-content></ng-content>\n </span>\n</label>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3087
3089
|
}
|
|
3088
3090
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsRadioComponent, decorators: [{
|
|
3089
3091
|
type: Component,
|
|
@@ -3093,7 +3095,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
3093
3095
|
useExisting: forwardRef(() => CxsRadioComponent),
|
|
3094
3096
|
multi: true
|
|
3095
3097
|
}
|
|
3096
|
-
], template: "<label [class]=\"wrapperClass\">\
|
|
3098
|
+
], template: "<label [class]=\"wrapperClass\">\n <input\n class=\"peer sr-only\"\n type=\"radio\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-invalid]=\"invalid ? 'true' : null\"\n [attr.autofocus]=\"autofocus ? true : null\"\n [checked]=\"isChecked\"\n [disabled]=\"isDisabled\"\n [required]=\"required\"\n (change)=\"onRadioChange($event)\"\n (blur)=\"onBlur()\"\n />\n <span [class]=\"controlClass\" aria-hidden=\"true\"></span>\n <span [class]=\"labelClass\">\n <ng-content></ng-content>\n </span>\n</label>\n" }]
|
|
3097
3099
|
}], propDecorators: { value: [{
|
|
3098
3100
|
type: Input
|
|
3099
3101
|
}], name: [{
|
|
@@ -3504,8 +3506,10 @@ const POSITION_CLASSES = {
|
|
|
3504
3506
|
left: 'fixed left-6 top-1/2 -translate-y-1/2 items-start',
|
|
3505
3507
|
center: 'fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 items-center'
|
|
3506
3508
|
};
|
|
3507
|
-
const BASE_CLASSES = 'pointer-events-auto flex w-full items-start gap-3 rounded-[var(--cxs-radius-md)] ' +
|
|
3509
|
+
const BASE_CLASSES = 'cxs-toast-panel pointer-events-auto flex w-full items-start gap-3 rounded-[var(--cxs-radius-md)] ' +
|
|
3508
3510
|
'border px-4 py-3 shadow-[var(--cxs-shadow-sm)]';
|
|
3511
|
+
const EXIT_CLASSES = 'cxs-toast-panel-exit';
|
|
3512
|
+
const EXIT_ANIMATION_MS = 220;
|
|
3509
3513
|
const WIDTH_CLASSES = {
|
|
3510
3514
|
sm: 'max-w-sm',
|
|
3511
3515
|
md: 'max-w-md',
|
|
@@ -3530,6 +3534,7 @@ const CLOSE_BUTTON_CLASSES = 'inline-flex h-8 w-8 items-center justify-center ro
|
|
|
3530
3534
|
'focus-visible:outline-[var(--cxs-color-focus)]';
|
|
3531
3535
|
class CxsToastComponent {
|
|
3532
3536
|
hostClass;
|
|
3537
|
+
changeDetectorRef;
|
|
3533
3538
|
open = false;
|
|
3534
3539
|
title;
|
|
3535
3540
|
message;
|
|
@@ -3541,26 +3546,43 @@ class CxsToastComponent {
|
|
|
3541
3546
|
maxWidth = 'sm';
|
|
3542
3547
|
openChange = new EventEmitter();
|
|
3543
3548
|
dismissed = new EventEmitter();
|
|
3549
|
+
rendered = false;
|
|
3550
|
+
exiting = false;
|
|
3544
3551
|
timeoutId = null;
|
|
3545
|
-
|
|
3552
|
+
exitTimeoutId = null;
|
|
3553
|
+
constructor(hostClass, changeDetectorRef) {
|
|
3546
3554
|
this.hostClass = hostClass;
|
|
3555
|
+
this.changeDetectorRef = changeDetectorRef;
|
|
3547
3556
|
}
|
|
3548
3557
|
ngOnChanges(changes) {
|
|
3558
|
+
if (changes['open']) {
|
|
3559
|
+
if (this.open) {
|
|
3560
|
+
this.showToast();
|
|
3561
|
+
}
|
|
3562
|
+
else {
|
|
3563
|
+
this.startExitAnimation();
|
|
3564
|
+
}
|
|
3565
|
+
}
|
|
3549
3566
|
if (changes['open'] || changes['duration']) {
|
|
3550
3567
|
this.resetTimer();
|
|
3551
3568
|
}
|
|
3552
3569
|
}
|
|
3553
3570
|
ngOnDestroy() {
|
|
3554
3571
|
this.clearTimer();
|
|
3572
|
+
this.clearExitTimer();
|
|
3555
3573
|
}
|
|
3556
3574
|
get hostClassName() {
|
|
3557
3575
|
return [HOST_BASE_CLASSES, POSITION_CLASSES[this.position]].join(' ');
|
|
3558
3576
|
}
|
|
3577
|
+
get positionAttribute() {
|
|
3578
|
+
return this.position;
|
|
3579
|
+
}
|
|
3559
3580
|
get toastClass() {
|
|
3560
3581
|
return [
|
|
3561
3582
|
BASE_CLASSES,
|
|
3562
3583
|
WIDTH_CLASSES[this.maxWidth],
|
|
3563
3584
|
VARIANT_CLASSES[this.variant],
|
|
3585
|
+
this.exiting ? EXIT_CLASSES : null,
|
|
3564
3586
|
this.hostClass
|
|
3565
3587
|
]
|
|
3566
3588
|
.filter(Boolean)
|
|
@@ -3593,6 +3615,27 @@ class CxsToastComponent {
|
|
|
3593
3615
|
requestClose(reason) {
|
|
3594
3616
|
this.openChange.emit(false);
|
|
3595
3617
|
this.dismissed.emit(reason);
|
|
3618
|
+
this.startExitAnimation();
|
|
3619
|
+
}
|
|
3620
|
+
showToast() {
|
|
3621
|
+
this.clearExitTimer();
|
|
3622
|
+
this.rendered = true;
|
|
3623
|
+
this.exiting = false;
|
|
3624
|
+
}
|
|
3625
|
+
startExitAnimation() {
|
|
3626
|
+
if (!this.rendered || this.exiting) {
|
|
3627
|
+
return;
|
|
3628
|
+
}
|
|
3629
|
+
this.clearTimer();
|
|
3630
|
+
this.clearExitTimer();
|
|
3631
|
+
this.exiting = true;
|
|
3632
|
+
this.changeDetectorRef.markForCheck();
|
|
3633
|
+
this.exitTimeoutId = setTimeout(() => {
|
|
3634
|
+
this.rendered = false;
|
|
3635
|
+
this.exiting = false;
|
|
3636
|
+
this.exitTimeoutId = null;
|
|
3637
|
+
this.changeDetectorRef.markForCheck();
|
|
3638
|
+
}, EXIT_ANIMATION_MS);
|
|
3596
3639
|
}
|
|
3597
3640
|
resetTimer() {
|
|
3598
3641
|
this.clearTimer();
|
|
@@ -3608,16 +3651,22 @@ class CxsToastComponent {
|
|
|
3608
3651
|
this.timeoutId = null;
|
|
3609
3652
|
}
|
|
3610
3653
|
}
|
|
3611
|
-
|
|
3612
|
-
|
|
3654
|
+
clearExitTimer() {
|
|
3655
|
+
if (this.exitTimeoutId) {
|
|
3656
|
+
clearTimeout(this.exitTimeoutId);
|
|
3657
|
+
this.exitTimeoutId = null;
|
|
3658
|
+
}
|
|
3659
|
+
}
|
|
3660
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsToastComponent, deps: [{ token: 'class', attribute: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3661
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsToastComponent, isStandalone: true, selector: "cxs-toast", inputs: { open: "open", title: "title", message: "message", ariaLabel: "ariaLabel", variant: "variant", dismissible: "dismissible", duration: "duration", position: "position", maxWidth: "maxWidth" }, outputs: { openChange: "openChange", dismissed: "dismissed" }, host: { properties: { "attr.data-cxs-toast-position": "this.positionAttribute" } }, usesOnChanges: true, ngImport: i0, template: "@if (rendered) {\n <div [class]=\"hostClassName\">\n <div\n [class]=\"toastClass\"\n [attr.role]=\"role\"\n [attr.aria-live]=\"ariaLive\"\n [attr.aria-label]=\"ariaLabelValue\"\n >\n <div class=\"flex-1\">\n @if (title) {\n <p [class]=\"titleClass\">{{ title }}</p>\n }\n @if (message) {\n <p [class]=\"messageClass\">{{ message }}</p>\n }\n <ng-content></ng-content>\n <div [class]=\"actionsClass\">\n <ng-content select=\"[cxsToastAction]\"></ng-content>\n </div>\n </div>\n @if (dismissible) {\n <button\n type=\"button\"\n [class]=\"closeButtonClass\"\n aria-label=\"Dismiss notification\"\n (click)=\"requestClose('dismiss')\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n </svg>\n\n </button>\n }\n </div>\n </div>\n}\n", styles: [":host{display:contents}.cxs-toast-panel{animation:cxs-toast-enter .24s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}.cxs-toast-panel-exit{animation:cxs-toast-exit .22s ease-in forwards}:host([data-cxs-toast-position=\"bottom-right\"]) .cxs-toast-panel,:host([data-cxs-toast-position=\"right\"]) .cxs-toast-panel,:host([data-cxs-toast-position=\"top-right\"]) .cxs-toast-panel{--cxs-toast-enter-x: 120%;--cxs-toast-enter-y: 0}:host([data-cxs-toast-position=\"bottom-left\"]) .cxs-toast-panel,:host([data-cxs-toast-position=\"left\"]) .cxs-toast-panel,:host([data-cxs-toast-position=\"top-left\"]) .cxs-toast-panel{--cxs-toast-enter-x: -120%;--cxs-toast-enter-y: 0}:host([data-cxs-toast-position=\"bottom\"]) .cxs-toast-panel{--cxs-toast-enter-x: 0;--cxs-toast-enter-y: 120%}:host([data-cxs-toast-position=\"top\"]) .cxs-toast-panel{--cxs-toast-enter-x: 0;--cxs-toast-enter-y: -120%}:host([data-cxs-toast-position=\"bottom-right\"]) .cxs-toast-panel{--cxs-toast-enter-x: 120%;--cxs-toast-enter-y: 120%}:host([data-cxs-toast-position=\"bottom-left\"]) .cxs-toast-panel{--cxs-toast-enter-x: -120%;--cxs-toast-enter-y: 120%}:host([data-cxs-toast-position=\"top-right\"]) .cxs-toast-panel{--cxs-toast-enter-x: 120%;--cxs-toast-enter-y: -120%}:host([data-cxs-toast-position=\"top-left\"]) .cxs-toast-panel{--cxs-toast-enter-x: -120%;--cxs-toast-enter-y: -120%}:host([data-cxs-toast-position=\"center\"]) .cxs-toast-panel{--cxs-toast-enter-x: 0;--cxs-toast-enter-y: 1rem}@keyframes cxs-toast-enter{0%{opacity:0;transform:translate3d(var(--cxs-toast-enter-x, 120%),var(--cxs-toast-enter-y, 120%),0)}to{opacity:1;transform:translateZ(0)}}@keyframes cxs-toast-exit{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(var(--cxs-toast-enter-x, 120%),var(--cxs-toast-enter-y, 120%),0)}}@media (prefers-reduced-motion: reduce){.cxs-toast-panel,.cxs-toast-panel-exit{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3613
3662
|
}
|
|
3614
3663
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsToastComponent, decorators: [{
|
|
3615
3664
|
type: Component,
|
|
3616
|
-
args: [{ selector: 'cxs-toast', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (
|
|
3665
|
+
args: [{ selector: 'cxs-toast', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (rendered) {\n <div [class]=\"hostClassName\">\n <div\n [class]=\"toastClass\"\n [attr.role]=\"role\"\n [attr.aria-live]=\"ariaLive\"\n [attr.aria-label]=\"ariaLabelValue\"\n >\n <div class=\"flex-1\">\n @if (title) {\n <p [class]=\"titleClass\">{{ title }}</p>\n }\n @if (message) {\n <p [class]=\"messageClass\">{{ message }}</p>\n }\n <ng-content></ng-content>\n <div [class]=\"actionsClass\">\n <ng-content select=\"[cxsToastAction]\"></ng-content>\n </div>\n </div>\n @if (dismissible) {\n <button\n type=\"button\"\n [class]=\"closeButtonClass\"\n aria-label=\"Dismiss notification\"\n (click)=\"requestClose('dismiss')\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n </svg>\n\n </button>\n }\n </div>\n </div>\n}\n", styles: [":host{display:contents}.cxs-toast-panel{animation:cxs-toast-enter .24s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}.cxs-toast-panel-exit{animation:cxs-toast-exit .22s ease-in forwards}:host([data-cxs-toast-position=\"bottom-right\"]) .cxs-toast-panel,:host([data-cxs-toast-position=\"right\"]) .cxs-toast-panel,:host([data-cxs-toast-position=\"top-right\"]) .cxs-toast-panel{--cxs-toast-enter-x: 120%;--cxs-toast-enter-y: 0}:host([data-cxs-toast-position=\"bottom-left\"]) .cxs-toast-panel,:host([data-cxs-toast-position=\"left\"]) .cxs-toast-panel,:host([data-cxs-toast-position=\"top-left\"]) .cxs-toast-panel{--cxs-toast-enter-x: -120%;--cxs-toast-enter-y: 0}:host([data-cxs-toast-position=\"bottom\"]) .cxs-toast-panel{--cxs-toast-enter-x: 0;--cxs-toast-enter-y: 120%}:host([data-cxs-toast-position=\"top\"]) .cxs-toast-panel{--cxs-toast-enter-x: 0;--cxs-toast-enter-y: -120%}:host([data-cxs-toast-position=\"bottom-right\"]) .cxs-toast-panel{--cxs-toast-enter-x: 120%;--cxs-toast-enter-y: 120%}:host([data-cxs-toast-position=\"bottom-left\"]) .cxs-toast-panel{--cxs-toast-enter-x: -120%;--cxs-toast-enter-y: 120%}:host([data-cxs-toast-position=\"top-right\"]) .cxs-toast-panel{--cxs-toast-enter-x: 120%;--cxs-toast-enter-y: -120%}:host([data-cxs-toast-position=\"top-left\"]) .cxs-toast-panel{--cxs-toast-enter-x: -120%;--cxs-toast-enter-y: -120%}:host([data-cxs-toast-position=\"center\"]) .cxs-toast-panel{--cxs-toast-enter-x: 0;--cxs-toast-enter-y: 1rem}@keyframes cxs-toast-enter{0%{opacity:0;transform:translate3d(var(--cxs-toast-enter-x, 120%),var(--cxs-toast-enter-y, 120%),0)}to{opacity:1;transform:translateZ(0)}}@keyframes cxs-toast-exit{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(var(--cxs-toast-enter-x, 120%),var(--cxs-toast-enter-y, 120%),0)}}@media (prefers-reduced-motion: reduce){.cxs-toast-panel,.cxs-toast-panel-exit{animation:none}}\n"] }]
|
|
3617
3666
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
3618
3667
|
type: Attribute,
|
|
3619
3668
|
args: ['class']
|
|
3620
|
-
}] }], propDecorators: { open: [{
|
|
3669
|
+
}] }, { type: i0.ChangeDetectorRef }], propDecorators: { open: [{
|
|
3621
3670
|
type: Input
|
|
3622
3671
|
}], title: [{
|
|
3623
3672
|
type: Input
|
|
@@ -3639,6 +3688,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
3639
3688
|
type: Output
|
|
3640
3689
|
}], dismissed: [{
|
|
3641
3690
|
type: Output
|
|
3691
|
+
}], positionAttribute: [{
|
|
3692
|
+
type: HostBinding,
|
|
3693
|
+
args: ['attr.data-cxs-toast-position']
|
|
3642
3694
|
}] } });
|
|
3643
3695
|
|
|
3644
3696
|
const WRAPPER_CLASSES = 'relative inline-flex';
|