cerxos-ui 0.0.11 → 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 +83 -33
- 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
|
|
|
@@ -312,11 +312,11 @@ class CxsAlertComponent {
|
|
|
312
312
|
this.closed.emit();
|
|
313
313
|
}
|
|
314
314
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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) {\
|
|
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 });
|
|
316
316
|
}
|
|
317
317
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsAlertComponent, decorators: [{
|
|
318
318
|
type: Component,
|
|
319
|
-
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" }]
|
|
320
320
|
}], propDecorators: { variant: [{
|
|
321
321
|
type: Input
|
|
322
322
|
}], title: [{
|
|
@@ -445,11 +445,11 @@ class CxsBadgeComponent {
|
|
|
445
445
|
return [BASE_CLASSES$8, VARIANT_CLASSES$7[this.variant], SIZE_CLASSES$7[this.size]].join(' ');
|
|
446
446
|
}
|
|
447
447
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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\">\
|
|
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 });
|
|
449
449
|
}
|
|
450
450
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsBadgeComponent, decorators: [{
|
|
451
451
|
type: Component,
|
|
452
|
-
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" }]
|
|
453
453
|
}], propDecorators: { variant: [{
|
|
454
454
|
type: Input
|
|
455
455
|
}], size: [{
|
|
@@ -629,11 +629,11 @@ class CxsBreadcrumbComponent {
|
|
|
629
629
|
return item.rel ?? null;
|
|
630
630
|
}
|
|
631
631
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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\">\
|
|
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 });
|
|
633
633
|
}
|
|
634
634
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsBreadcrumbComponent, decorators: [{
|
|
635
635
|
type: Component,
|
|
636
|
-
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" }]
|
|
637
637
|
}], propDecorators: { items: [{
|
|
638
638
|
type: Input
|
|
639
639
|
}], separator: [{
|
|
@@ -682,11 +682,11 @@ class CxsButtonComponent {
|
|
|
682
682
|
.join(' ');
|
|
683
683
|
}
|
|
684
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 });
|
|
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\
|
|
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 });
|
|
686
686
|
}
|
|
687
687
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsButtonComponent, decorators: [{
|
|
688
688
|
type: Component,
|
|
689
|
-
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" }]
|
|
690
690
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
691
691
|
type: Attribute,
|
|
692
692
|
args: ['class']
|
|
@@ -731,11 +731,11 @@ class CxsCardComponent {
|
|
|
731
731
|
.join(' ');
|
|
732
732
|
}
|
|
733
733
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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\
|
|
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 });
|
|
735
735
|
}
|
|
736
736
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsCardComponent, decorators: [{
|
|
737
737
|
type: Component,
|
|
738
|
-
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" }]
|
|
739
739
|
}], propDecorators: { variant: [{
|
|
740
740
|
type: Input
|
|
741
741
|
}], size: [{
|
|
@@ -853,7 +853,7 @@ class CxsCheckboxComponent {
|
|
|
853
853
|
useExisting: forwardRef(() => CxsCheckboxComponent),
|
|
854
854
|
multi: true
|
|
855
855
|
}
|
|
856
|
-
], 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 });
|
|
857
857
|
}
|
|
858
858
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsCheckboxComponent, decorators: [{
|
|
859
859
|
type: Component,
|
|
@@ -863,7 +863,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
863
863
|
useExisting: forwardRef(() => CxsCheckboxComponent),
|
|
864
864
|
multi: true
|
|
865
865
|
}
|
|
866
|
-
], 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" }]
|
|
867
867
|
}], propDecorators: { checked: [{
|
|
868
868
|
type: Input
|
|
869
869
|
}], indeterminate: [{
|
|
@@ -1693,8 +1693,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
1693
1693
|
args: [CxsDataTableCellDirective]
|
|
1694
1694
|
}] } });
|
|
1695
1695
|
|
|
1696
|
-
const OVERLAY_CLASSES = 'fixed inset-0 z-50 flex items-center justify-center bg-[rgba(15,23,42,0.45)] p-4';
|
|
1697
|
-
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)] ' +
|
|
1698
1698
|
'bg-[var(--cxs-color-surface)] text-[var(--cxs-color-on-surface)] shadow-[var(--cxs-shadow-sm)] ' +
|
|
1699
1699
|
'p-6 outline-none';
|
|
1700
1700
|
const PANEL_SIZE_CLASSES = {
|
|
@@ -1796,11 +1796,11 @@ class CxsDialogComponent {
|
|
|
1796
1796
|
});
|
|
1797
1797
|
}
|
|
1798
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 });
|
|
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", 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 });
|
|
1800
1800
|
}
|
|
1801
1801
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsDialogComponent, decorators: [{
|
|
1802
1802
|
type: Component,
|
|
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" }]
|
|
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"] }]
|
|
1804
1804
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
1805
1805
|
type: Attribute,
|
|
1806
1806
|
args: ['class']
|
|
@@ -3085,7 +3085,7 @@ class CxsRadioComponent {
|
|
|
3085
3085
|
useExisting: forwardRef(() => CxsRadioComponent),
|
|
3086
3086
|
multi: true
|
|
3087
3087
|
}
|
|
3088
|
-
], 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 });
|
|
3089
3089
|
}
|
|
3090
3090
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsRadioComponent, decorators: [{
|
|
3091
3091
|
type: Component,
|
|
@@ -3095,7 +3095,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
3095
3095
|
useExisting: forwardRef(() => CxsRadioComponent),
|
|
3096
3096
|
multi: true
|
|
3097
3097
|
}
|
|
3098
|
-
], 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" }]
|
|
3099
3099
|
}], propDecorators: { value: [{
|
|
3100
3100
|
type: Input
|
|
3101
3101
|
}], name: [{
|
|
@@ -3506,8 +3506,10 @@ const POSITION_CLASSES = {
|
|
|
3506
3506
|
left: 'fixed left-6 top-1/2 -translate-y-1/2 items-start',
|
|
3507
3507
|
center: 'fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 items-center'
|
|
3508
3508
|
};
|
|
3509
|
-
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)] ' +
|
|
3510
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;
|
|
3511
3513
|
const WIDTH_CLASSES = {
|
|
3512
3514
|
sm: 'max-w-sm',
|
|
3513
3515
|
md: 'max-w-md',
|
|
@@ -3532,6 +3534,7 @@ const CLOSE_BUTTON_CLASSES = 'inline-flex h-8 w-8 items-center justify-center ro
|
|
|
3532
3534
|
'focus-visible:outline-[var(--cxs-color-focus)]';
|
|
3533
3535
|
class CxsToastComponent {
|
|
3534
3536
|
hostClass;
|
|
3537
|
+
changeDetectorRef;
|
|
3535
3538
|
open = false;
|
|
3536
3539
|
title;
|
|
3537
3540
|
message;
|
|
@@ -3543,26 +3546,43 @@ class CxsToastComponent {
|
|
|
3543
3546
|
maxWidth = 'sm';
|
|
3544
3547
|
openChange = new EventEmitter();
|
|
3545
3548
|
dismissed = new EventEmitter();
|
|
3549
|
+
rendered = false;
|
|
3550
|
+
exiting = false;
|
|
3546
3551
|
timeoutId = null;
|
|
3547
|
-
|
|
3552
|
+
exitTimeoutId = null;
|
|
3553
|
+
constructor(hostClass, changeDetectorRef) {
|
|
3548
3554
|
this.hostClass = hostClass;
|
|
3555
|
+
this.changeDetectorRef = changeDetectorRef;
|
|
3549
3556
|
}
|
|
3550
3557
|
ngOnChanges(changes) {
|
|
3558
|
+
if (changes['open']) {
|
|
3559
|
+
if (this.open) {
|
|
3560
|
+
this.showToast();
|
|
3561
|
+
}
|
|
3562
|
+
else {
|
|
3563
|
+
this.startExitAnimation();
|
|
3564
|
+
}
|
|
3565
|
+
}
|
|
3551
3566
|
if (changes['open'] || changes['duration']) {
|
|
3552
3567
|
this.resetTimer();
|
|
3553
3568
|
}
|
|
3554
3569
|
}
|
|
3555
3570
|
ngOnDestroy() {
|
|
3556
3571
|
this.clearTimer();
|
|
3572
|
+
this.clearExitTimer();
|
|
3557
3573
|
}
|
|
3558
3574
|
get hostClassName() {
|
|
3559
3575
|
return [HOST_BASE_CLASSES, POSITION_CLASSES[this.position]].join(' ');
|
|
3560
3576
|
}
|
|
3577
|
+
get positionAttribute() {
|
|
3578
|
+
return this.position;
|
|
3579
|
+
}
|
|
3561
3580
|
get toastClass() {
|
|
3562
3581
|
return [
|
|
3563
3582
|
BASE_CLASSES,
|
|
3564
3583
|
WIDTH_CLASSES[this.maxWidth],
|
|
3565
3584
|
VARIANT_CLASSES[this.variant],
|
|
3585
|
+
this.exiting ? EXIT_CLASSES : null,
|
|
3566
3586
|
this.hostClass
|
|
3567
3587
|
]
|
|
3568
3588
|
.filter(Boolean)
|
|
@@ -3595,6 +3615,27 @@ class CxsToastComponent {
|
|
|
3595
3615
|
requestClose(reason) {
|
|
3596
3616
|
this.openChange.emit(false);
|
|
3597
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);
|
|
3598
3639
|
}
|
|
3599
3640
|
resetTimer() {
|
|
3600
3641
|
this.clearTimer();
|
|
@@ -3610,16 +3651,22 @@ class CxsToastComponent {
|
|
|
3610
3651
|
this.timeoutId = null;
|
|
3611
3652
|
}
|
|
3612
3653
|
}
|
|
3613
|
-
|
|
3614
|
-
|
|
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 });
|
|
3615
3662
|
}
|
|
3616
3663
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsToastComponent, decorators: [{
|
|
3617
3664
|
type: Component,
|
|
3618
|
-
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"] }]
|
|
3619
3666
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
3620
3667
|
type: Attribute,
|
|
3621
3668
|
args: ['class']
|
|
3622
|
-
}] }], propDecorators: { open: [{
|
|
3669
|
+
}] }, { type: i0.ChangeDetectorRef }], propDecorators: { open: [{
|
|
3623
3670
|
type: Input
|
|
3624
3671
|
}], title: [{
|
|
3625
3672
|
type: Input
|
|
@@ -3641,6 +3688,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
3641
3688
|
type: Output
|
|
3642
3689
|
}], dismissed: [{
|
|
3643
3690
|
type: Output
|
|
3691
|
+
}], positionAttribute: [{
|
|
3692
|
+
type: HostBinding,
|
|
3693
|
+
args: ['attr.data-cxs-toast-position']
|
|
3644
3694
|
}] } });
|
|
3645
3695
|
|
|
3646
3696
|
const WRAPPER_CLASSES = 'relative inline-flex';
|