@saitec/ui 0.1.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.
Potentially problematic release.
This version of @saitec/ui might be problematic. Click here for more details.
- package/README.md +64 -0
- package/fesm2022/saitec-ui-autocomplete.mjs +214 -0
- package/fesm2022/saitec-ui-autocomplete.mjs.map +1 -0
- package/fesm2022/saitec-ui-badge.mjs +26 -0
- package/fesm2022/saitec-ui-badge.mjs.map +1 -0
- package/fesm2022/saitec-ui-button.mjs +35 -0
- package/fesm2022/saitec-ui-button.mjs.map +1 -0
- package/fesm2022/saitec-ui-card.mjs +28 -0
- package/fesm2022/saitec-ui-card.mjs.map +1 -0
- package/fesm2022/saitec-ui-checkbox.mjs +87 -0
- package/fesm2022/saitec-ui-checkbox.mjs.map +1 -0
- package/fesm2022/saitec-ui-chip.mjs +32 -0
- package/fesm2022/saitec-ui-chip.mjs.map +1 -0
- package/fesm2022/saitec-ui-confirm.mjs +93 -0
- package/fesm2022/saitec-ui-confirm.mjs.map +1 -0
- package/fesm2022/saitec-ui-core.mjs +4 -0
- package/fesm2022/saitec-ui-core.mjs.map +1 -0
- package/fesm2022/saitec-ui-date-picker.mjs +92 -0
- package/fesm2022/saitec-ui-date-picker.mjs.map +1 -0
- package/fesm2022/saitec-ui-dialog.mjs +95 -0
- package/fesm2022/saitec-ui-dialog.mjs.map +1 -0
- package/fesm2022/saitec-ui-divider.mjs +22 -0
- package/fesm2022/saitec-ui-divider.mjs.map +1 -0
- package/fesm2022/saitec-ui-drawer.mjs +96 -0
- package/fesm2022/saitec-ui-drawer.mjs.map +1 -0
- package/fesm2022/saitec-ui-fieldset.mjs +32 -0
- package/fesm2022/saitec-ui-fieldset.mjs.map +1 -0
- package/fesm2022/saitec-ui-file-upload.mjs +206 -0
- package/fesm2022/saitec-ui-file-upload.mjs.map +1 -0
- package/fesm2022/saitec-ui-form-field.mjs +30 -0
- package/fesm2022/saitec-ui-form-field.mjs.map +1 -0
- package/fesm2022/saitec-ui-input-number.mjs +250 -0
- package/fesm2022/saitec-ui-input-number.mjs.map +1 -0
- package/fesm2022/saitec-ui-input.mjs +95 -0
- package/fesm2022/saitec-ui-input.mjs.map +1 -0
- package/fesm2022/saitec-ui-menu.mjs +46 -0
- package/fesm2022/saitec-ui-menu.mjs.map +1 -0
- package/fesm2022/saitec-ui-menubar.mjs +72 -0
- package/fesm2022/saitec-ui-menubar.mjs.map +1 -0
- package/fesm2022/saitec-ui-message.mjs +28 -0
- package/fesm2022/saitec-ui-message.mjs.map +1 -0
- package/fesm2022/saitec-ui-multiselect.mjs +209 -0
- package/fesm2022/saitec-ui-multiselect.mjs.map +1 -0
- package/fesm2022/saitec-ui-panel.mjs +32 -0
- package/fesm2022/saitec-ui-panel.mjs.map +1 -0
- package/fesm2022/saitec-ui-progress-spinner.mjs +24 -0
- package/fesm2022/saitec-ui-progress-spinner.mjs.map +1 -0
- package/fesm2022/saitec-ui-select.mjs +105 -0
- package/fesm2022/saitec-ui-select.mjs.map +1 -0
- package/fesm2022/saitec-ui-table.mjs +172 -0
- package/fesm2022/saitec-ui-table.mjs.map +1 -0
- package/fesm2022/saitec-ui-tabs.mjs +170 -0
- package/fesm2022/saitec-ui-tabs.mjs.map +1 -0
- package/fesm2022/saitec-ui-tag.mjs +26 -0
- package/fesm2022/saitec-ui-tag.mjs.map +1 -0
- package/fesm2022/saitec-ui-textarea.mjs +95 -0
- package/fesm2022/saitec-ui-textarea.mjs.map +1 -0
- package/fesm2022/saitec-ui-toast.mjs +109 -0
- package/fesm2022/saitec-ui-toast.mjs.map +1 -0
- package/fesm2022/saitec-ui-toggle-switch.mjs +85 -0
- package/fesm2022/saitec-ui-toggle-switch.mjs.map +1 -0
- package/fesm2022/saitec-ui-toolbar.mjs +20 -0
- package/fesm2022/saitec-ui-toolbar.mjs.map +1 -0
- package/fesm2022/saitec-ui-tooltip.mjs +219 -0
- package/fesm2022/saitec-ui-tooltip.mjs.map +1 -0
- package/fesm2022/saitec-ui.mjs +22 -0
- package/fesm2022/saitec-ui.mjs.map +1 -0
- package/lib/core/themes/dark.css +233 -0
- package/lib/core/themes/light.css +210 -0
- package/lib/core/tokens/components/autocomplete.css +26 -0
- package/lib/core/tokens/components/badge.css +26 -0
- package/lib/core/tokens/components/button.css +90 -0
- package/lib/core/tokens/components/card.css +15 -0
- package/lib/core/tokens/components/checkbox.css +17 -0
- package/lib/core/tokens/components/chip.css +16 -0
- package/lib/core/tokens/components/confirm.css +8 -0
- package/lib/core/tokens/components/date-picker.css +18 -0
- package/lib/core/tokens/components/dialog.css +18 -0
- package/lib/core/tokens/components/divider.css +9 -0
- package/lib/core/tokens/components/drawer.css +16 -0
- package/lib/core/tokens/components/fieldset.css +15 -0
- package/lib/core/tokens/components/file-upload.css +31 -0
- package/lib/core/tokens/components/form-field.css +14 -0
- package/lib/core/tokens/components/input-number.css +20 -0
- package/lib/core/tokens/components/input.css +31 -0
- package/lib/core/tokens/components/menu.css +19 -0
- package/lib/core/tokens/components/menubar.css +18 -0
- package/lib/core/tokens/components/message.css +29 -0
- package/lib/core/tokens/components/multiselect.css +25 -0
- package/lib/core/tokens/components/panel.css +18 -0
- package/lib/core/tokens/components/progress-spinner.css +10 -0
- package/lib/core/tokens/components/select.css +18 -0
- package/lib/core/tokens/components/table.css +32 -0
- package/lib/core/tokens/components/tabs.css +18 -0
- package/lib/core/tokens/components/tag.css +29 -0
- package/lib/core/tokens/components/textarea.css +19 -0
- package/lib/core/tokens/components/toast.css +22 -0
- package/lib/core/tokens/components/toggle-switch.css +17 -0
- package/lib/core/tokens/components/toolbar.css +11 -0
- package/lib/core/tokens/components/tooltip.css +12 -0
- package/lib/core/tokens/components.css +50 -0
- package/lib/core/tokens/foundations.css +132 -0
- package/lib/core/tokens/primitives.css +159 -0
- package/package.json +162 -0
- package/styles.css +7 -0
- package/types/saitec-ui-autocomplete.d.ts +50 -0
- package/types/saitec-ui-badge.d.ts +15 -0
- package/types/saitec-ui-button.d.ts +22 -0
- package/types/saitec-ui-card.d.ts +13 -0
- package/types/saitec-ui-checkbox.d.ts +33 -0
- package/types/saitec-ui-chip.d.ts +13 -0
- package/types/saitec-ui-confirm.d.ts +38 -0
- package/types/saitec-ui-core.d.ts +7 -0
- package/types/saitec-ui-date-picker.d.ts +35 -0
- package/types/saitec-ui-dialog.d.ts +29 -0
- package/types/saitec-ui-divider.d.ts +13 -0
- package/types/saitec-ui-drawer.d.ts +31 -0
- package/types/saitec-ui-fieldset.d.ts +13 -0
- package/types/saitec-ui-file-upload.d.ts +43 -0
- package/types/saitec-ui-form-field.d.ts +14 -0
- package/types/saitec-ui-input-number.d.ts +60 -0
- package/types/saitec-ui-input.d.ts +39 -0
- package/types/saitec-ui-menu.d.ts +17 -0
- package/types/saitec-ui-menubar.d.ts +21 -0
- package/types/saitec-ui-message.d.ts +15 -0
- package/types/saitec-ui-multiselect.d.ts +54 -0
- package/types/saitec-ui-panel.d.ts +13 -0
- package/types/saitec-ui-progress-spinner.d.ts +13 -0
- package/types/saitec-ui-select.d.ts +36 -0
- package/types/saitec-ui-table.d.ts +57 -0
- package/types/saitec-ui-tabs.d.ts +57 -0
- package/types/saitec-ui-tag.d.ts +15 -0
- package/types/saitec-ui-textarea.d.ts +37 -0
- package/types/saitec-ui-toast.d.ts +43 -0
- package/types/saitec-ui-toggle-switch.d.ts +32 -0
- package/types/saitec-ui-toolbar.d.ts +9 -0
- package/types/saitec-ui-tooltip.d.ts +38 -0
- package/types/saitec-ui.d.ts +8 -0
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, output, signal, computed, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
4
|
+
|
|
5
|
+
let nextCheckboxId = 0;
|
|
6
|
+
class SuiCheckbox {
|
|
7
|
+
id = input(`sui-checkbox-${++nextCheckboxId}`, /* @ts-ignore */
|
|
8
|
+
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
9
|
+
name = input(/* @ts-ignore */
|
|
10
|
+
...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
|
|
11
|
+
disabled = input(false, /* @ts-ignore */
|
|
12
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
13
|
+
required = input(false, /* @ts-ignore */
|
|
14
|
+
...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
15
|
+
indeterminate = input(false, /* @ts-ignore */
|
|
16
|
+
...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
|
|
17
|
+
ariaLabel = input(/* @ts-ignore */
|
|
18
|
+
...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
19
|
+
label = input(/* @ts-ignore */
|
|
20
|
+
...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
21
|
+
ariaDescribedBy = input(/* @ts-ignore */
|
|
22
|
+
...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
|
|
23
|
+
ariaInvalid = input(/* @ts-ignore */
|
|
24
|
+
...(ngDevMode ? [undefined, { debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
25
|
+
valueChange = output();
|
|
26
|
+
focused = output();
|
|
27
|
+
blurred = output();
|
|
28
|
+
checked = signal(false, /* @ts-ignore */
|
|
29
|
+
...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
|
|
30
|
+
formDisabled = signal(false, /* @ts-ignore */
|
|
31
|
+
...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
|
|
32
|
+
isDisabled = computed(() => this.disabled() || this.formDisabled(), /* @ts-ignore */
|
|
33
|
+
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
34
|
+
onChange = () => { };
|
|
35
|
+
onTouched = () => { };
|
|
36
|
+
writeValue(value) {
|
|
37
|
+
this.checked.set(value ?? false);
|
|
38
|
+
}
|
|
39
|
+
registerOnChange(fn) {
|
|
40
|
+
this.onChange = fn;
|
|
41
|
+
}
|
|
42
|
+
registerOnTouched(fn) {
|
|
43
|
+
this.onTouched = fn;
|
|
44
|
+
}
|
|
45
|
+
setDisabledState(disabled) {
|
|
46
|
+
this.formDisabled.set(disabled);
|
|
47
|
+
}
|
|
48
|
+
handleChange(event) {
|
|
49
|
+
const element = event.target;
|
|
50
|
+
const value = element.checked;
|
|
51
|
+
this.checked.set(value);
|
|
52
|
+
this.onChange(value);
|
|
53
|
+
this.valueChange.emit(value);
|
|
54
|
+
}
|
|
55
|
+
handleFocus(event) {
|
|
56
|
+
this.focused.emit(event);
|
|
57
|
+
}
|
|
58
|
+
handleBlur(event) {
|
|
59
|
+
this.onTouched();
|
|
60
|
+
this.blurred.emit(event);
|
|
61
|
+
}
|
|
62
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
63
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SuiCheckbox, isStandalone: true, selector: "sui-checkbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "ariaInvalid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", focused: "focused", blurred: "blurred" }, providers: [
|
|
64
|
+
{
|
|
65
|
+
provide: NG_VALUE_ACCESSOR,
|
|
66
|
+
useExisting: forwardRef(() => SuiCheckbox),
|
|
67
|
+
multi: true
|
|
68
|
+
}
|
|
69
|
+
], ngImport: i0, template: "<div class=\"sui-checkbox-container\">\r\n <input\r\n class=\"sui-checkbox\"\r\n\r\n type=\"checkbox\"\r\n\r\n [id]=\"id()\"\r\n [name]=\"name() ?? ''\"\r\n\r\n [checked]=\"checked()\"\r\n [disabled]=\"isDisabled()\"\r\n [required]=\"required()\"\r\n\r\n [indeterminate]=\"indeterminate()\"\r\n\r\n [attr.aria-label]=\"ariaLabel() ?? null\"\r\n [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\r\n [attr.aria-invalid]=\"ariaInvalid() ?? null\"\r\n\r\n (change)=\"handleChange($event)\"\r\n (focus)=\"handleFocus($event)\"\r\n (blur)=\"handleBlur($event)\"\r\n />\r\n\r\n @if (label()) {\r\n <label\r\n class=\"sui-checkbox-label\"\r\n [for]=\"id()\">\r\n {{ label() }}\r\n </label>\r\n }\r\n</div>", styles: [":host{display:inline-flex}.sui-checkbox-container{display:inline-flex;align-items:center;gap:.5rem}.sui-checkbox{width:var(--sui-checkbox-size);height:var(--sui-checkbox-size);margin:0;cursor:pointer;accent-color:var(--sui-checkbox-checked-background)}.sui-checkbox-label{cursor:pointer;font-family:inherit;font-size:var(--sui-control-font-size-md);color:var(--sui-checkbox-label-text);-webkit-user-select:none;user-select:none}.sui-checkbox:disabled,.sui-checkbox:disabled+.sui-checkbox-label{cursor:not-allowed}.sui-checkbox:disabled+.sui-checkbox-label{color:var(--sui-color-content-disabled)}.sui-checkbox:focus-visible{outline:var(--sui-focus-ring-width) solid var(--sui-checkbox-focus-color);outline-offset:var(--sui-focus-ring-offset)}.sui-checkbox[aria-invalid=true]{outline:var(--sui-focus-ring-width) solid var(--sui-color-danger);outline-offset:var(--sui-focus-ring-offset)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
70
|
+
}
|
|
71
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiCheckbox, decorators: [{
|
|
72
|
+
type: Component,
|
|
73
|
+
args: [{ selector: 'sui-checkbox', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
74
|
+
{
|
|
75
|
+
provide: NG_VALUE_ACCESSOR,
|
|
76
|
+
useExisting: forwardRef(() => SuiCheckbox),
|
|
77
|
+
multi: true
|
|
78
|
+
}
|
|
79
|
+
], template: "<div class=\"sui-checkbox-container\">\r\n <input\r\n class=\"sui-checkbox\"\r\n\r\n type=\"checkbox\"\r\n\r\n [id]=\"id()\"\r\n [name]=\"name() ?? ''\"\r\n\r\n [checked]=\"checked()\"\r\n [disabled]=\"isDisabled()\"\r\n [required]=\"required()\"\r\n\r\n [indeterminate]=\"indeterminate()\"\r\n\r\n [attr.aria-label]=\"ariaLabel() ?? null\"\r\n [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\r\n [attr.aria-invalid]=\"ariaInvalid() ?? null\"\r\n\r\n (change)=\"handleChange($event)\"\r\n (focus)=\"handleFocus($event)\"\r\n (blur)=\"handleBlur($event)\"\r\n />\r\n\r\n @if (label()) {\r\n <label\r\n class=\"sui-checkbox-label\"\r\n [for]=\"id()\">\r\n {{ label() }}\r\n </label>\r\n }\r\n</div>", styles: [":host{display:inline-flex}.sui-checkbox-container{display:inline-flex;align-items:center;gap:.5rem}.sui-checkbox{width:var(--sui-checkbox-size);height:var(--sui-checkbox-size);margin:0;cursor:pointer;accent-color:var(--sui-checkbox-checked-background)}.sui-checkbox-label{cursor:pointer;font-family:inherit;font-size:var(--sui-control-font-size-md);color:var(--sui-checkbox-label-text);-webkit-user-select:none;user-select:none}.sui-checkbox:disabled,.sui-checkbox:disabled+.sui-checkbox-label{cursor:not-allowed}.sui-checkbox:disabled+.sui-checkbox-label{color:var(--sui-color-content-disabled)}.sui-checkbox:focus-visible{outline:var(--sui-focus-ring-width) solid var(--sui-checkbox-focus-color);outline-offset:var(--sui-focus-ring-offset)}.sui-checkbox[aria-invalid=true]{outline:var(--sui-focus-ring-width) solid var(--sui-color-danger);outline-offset:var(--sui-focus-ring-offset)}\n"] }]
|
|
80
|
+
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], ariaInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaInvalid", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
|
|
81
|
+
|
|
82
|
+
/**
|
|
83
|
+
* Generated bundle index. Do not edit.
|
|
84
|
+
*/
|
|
85
|
+
|
|
86
|
+
export { SuiCheckbox };
|
|
87
|
+
//# sourceMappingURL=saitec-ui-checkbox.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"saitec-ui-checkbox.mjs","sources":["../../../projects/ui/checkbox/src/checkbox.component.ts","../../../projects/ui/checkbox/src/checkbox.component.html","../../../projects/ui/checkbox/src/saitec-ui-checkbox.ts"],"sourcesContent":["import {\r\n ChangeDetectionStrategy,\r\n Component,\r\n computed,\r\n forwardRef,\r\n input,\r\n output,\r\n signal\r\n} from '@angular/core';\r\nimport {\r\n ControlValueAccessor,\r\n NG_VALUE_ACCESSOR\r\n} from '@angular/forms';\r\n\r\nlet nextCheckboxId = 0;\r\n\r\n@Component({\r\n selector: 'sui-checkbox',\r\n standalone: true,\r\n templateUrl: './checkbox.component.html',\r\n styleUrl: './checkbox.component.css',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n providers: [\r\n {\r\n provide: NG_VALUE_ACCESSOR,\r\n useExisting: forwardRef(() => SuiCheckbox),\r\n multi: true\r\n }\r\n ]\r\n})\r\nexport class SuiCheckbox implements ControlValueAccessor {\r\n\r\n id = input(`sui-checkbox-${++nextCheckboxId}`);\r\n\r\n name = input<string>();\r\n\r\n disabled = input(false);\r\n\r\n required = input(false);\r\n\r\n indeterminate = input(false);\r\n\r\n ariaLabel = input<string>();\r\n\r\n label = input<string>();\r\n\r\n ariaDescribedBy = input<string>();\r\n\r\n ariaInvalid = input<boolean>();\r\n\r\n valueChange = output<boolean>();\r\n\r\n focused = output<FocusEvent>();\r\n\r\n blurred = output<FocusEvent>();\r\n\r\n protected readonly checked = signal(false);\r\n\r\n private readonly formDisabled = signal(false);\r\n\r\n protected readonly isDisabled = computed(\r\n () => this.disabled() || this.formDisabled()\r\n );\r\n\r\n private onChange: (value: boolean) => void = () => {};\r\n\r\n private onTouched: () => void = () => {};\r\n\r\n writeValue(value: boolean | null | undefined): void {\r\n this.checked.set(value ?? false);\r\n }\r\n\r\n registerOnChange(fn: (value: boolean) => void): void {\r\n this.onChange = fn;\r\n }\r\n\r\n registerOnTouched(fn: () => void): void {\r\n this.onTouched = fn;\r\n }\r\n\r\n setDisabledState(disabled: boolean): void {\r\n this.formDisabled.set(disabled);\r\n }\r\n\r\n protected handleChange(event: Event): void {\r\n const element = event.target as HTMLInputElement;\r\n const value = element.checked;\r\n\r\n this.checked.set(value);\r\n\r\n this.onChange(value);\r\n this.valueChange.emit(value);\r\n }\r\n\r\n protected handleFocus(event: FocusEvent): void {\r\n this.focused.emit(event);\r\n }\r\n\r\n protected handleBlur(event: FocusEvent): void {\r\n this.onTouched();\r\n this.blurred.emit(event);\r\n }\r\n}","<div class=\"sui-checkbox-container\">\r\n <input\r\n class=\"sui-checkbox\"\r\n\r\n type=\"checkbox\"\r\n\r\n [id]=\"id()\"\r\n [name]=\"name() ?? ''\"\r\n\r\n [checked]=\"checked()\"\r\n [disabled]=\"isDisabled()\"\r\n [required]=\"required()\"\r\n\r\n [indeterminate]=\"indeterminate()\"\r\n\r\n [attr.aria-label]=\"ariaLabel() ?? null\"\r\n [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\r\n [attr.aria-invalid]=\"ariaInvalid() ?? null\"\r\n\r\n (change)=\"handleChange($event)\"\r\n (focus)=\"handleFocus($event)\"\r\n (blur)=\"handleBlur($event)\"\r\n />\r\n\r\n @if (label()) {\r\n <label\r\n class=\"sui-checkbox-label\"\r\n [for]=\"id()\">\r\n {{ label() }}\r\n </label>\r\n }\r\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, output, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
|
|
4
|
+
class SuiChip {
|
|
5
|
+
label = input(/* @ts-ignore */
|
|
6
|
+
...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
7
|
+
removable = input(false, /* @ts-ignore */
|
|
8
|
+
...(ngDevMode ? [{ debugName: "removable" }] : /* istanbul ignore next */ []));
|
|
9
|
+
disabled = input(false, /* @ts-ignore */
|
|
10
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
11
|
+
removed = output();
|
|
12
|
+
remove(event) {
|
|
13
|
+
event.stopPropagation();
|
|
14
|
+
if (this.disabled()) {
|
|
15
|
+
return;
|
|
16
|
+
}
|
|
17
|
+
this.removed.emit();
|
|
18
|
+
}
|
|
19
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
20
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SuiChip, isStandalone: true, selector: "sui-chip", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, ngImport: i0, template: "<span\n class=\"sui-chip\"\n [class.sui-chip-disabled]=\"disabled()\">\n\n <span class=\"sui-chip-content\">\n <ng-content />\n\n @if (label()) {\n {{ label() }}\n }\n </span>\n\n @if (removable()) {\n <button\n type=\"button\"\n class=\"sui-chip-remove\"\n [disabled]=\"disabled()\"\n aria-label=\"Remove\"\n (click)=\"remove($event)\">\n\n \u00D7\n\n </button>\n }\n\n</span>", styles: [":host{display:inline-flex}.sui-chip{display:inline-flex;align-items:center;gap:var(--sui-chip-gap);min-height:var(--sui-chip-height);padding-inline:var(--sui-chip-padding-x);box-sizing:border-box;font-family:inherit;font-size:.875rem;line-height:1.25rem;color:var(--sui-chip-text);background:var(--sui-chip-background);border:var(--sui-chip-border-width) solid var(--sui-chip-border);border-radius:var(--sui-chip-radius)}.sui-chip-content{display:inline-flex;align-items:center;gap:var(--sui-chip-gap)}.sui-chip-remove{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;color:var(--sui-chip-remove-text);background:transparent;border:0;border-radius:50%;cursor:pointer;font-family:inherit;font-size:1rem;line-height:1}.sui-chip-remove:hover:not(:disabled){color:var(--sui-chip-remove-text-hover);background:var(--sui-chip-remove-background-hover)}.sui-chip-remove:focus-visible{outline:2px solid var(--sui-color-focus);outline-offset:1px}.sui-chip-disabled{opacity:var(--sui-chip-disabled-opacity);cursor:not-allowed}.sui-chip-remove:disabled{cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
21
|
+
}
|
|
22
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiChip, decorators: [{
|
|
23
|
+
type: Component,
|
|
24
|
+
args: [{ selector: 'sui-chip', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n class=\"sui-chip\"\n [class.sui-chip-disabled]=\"disabled()\">\n\n <span class=\"sui-chip-content\">\n <ng-content />\n\n @if (label()) {\n {{ label() }}\n }\n </span>\n\n @if (removable()) {\n <button\n type=\"button\"\n class=\"sui-chip-remove\"\n [disabled]=\"disabled()\"\n aria-label=\"Remove\"\n (click)=\"remove($event)\">\n\n \u00D7\n\n </button>\n }\n\n</span>", styles: [":host{display:inline-flex}.sui-chip{display:inline-flex;align-items:center;gap:var(--sui-chip-gap);min-height:var(--sui-chip-height);padding-inline:var(--sui-chip-padding-x);box-sizing:border-box;font-family:inherit;font-size:.875rem;line-height:1.25rem;color:var(--sui-chip-text);background:var(--sui-chip-background);border:var(--sui-chip-border-width) solid var(--sui-chip-border);border-radius:var(--sui-chip-radius)}.sui-chip-content{display:inline-flex;align-items:center;gap:var(--sui-chip-gap)}.sui-chip-remove{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;color:var(--sui-chip-remove-text);background:transparent;border:0;border-radius:50%;cursor:pointer;font-family:inherit;font-size:1rem;line-height:1}.sui-chip-remove:hover:not(:disabled){color:var(--sui-chip-remove-text-hover);background:var(--sui-chip-remove-background-hover)}.sui-chip-remove:focus-visible{outline:2px solid var(--sui-color-focus);outline-offset:1px}.sui-chip-disabled{opacity:var(--sui-chip-disabled-opacity);cursor:not-allowed}.sui-chip-remove:disabled{cursor:not-allowed}\n"] }]
|
|
25
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* Generated bundle index. Do not edit.
|
|
29
|
+
*/
|
|
30
|
+
|
|
31
|
+
export { SuiChip };
|
|
32
|
+
//# sourceMappingURL=saitec-ui-chip.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"saitec-ui-chip.mjs","sources":["../../../projects/ui/chip/src/chip.component.ts","../../../projects/ui/chip/src/chip.component.html","../../../projects/ui/chip/src/saitec-ui-chip.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n input,\n output\n} from '@angular/core';\n\n@Component({\n selector: 'sui-chip',\n standalone: true,\n templateUrl: './chip.component.html',\n styleUrl: './chip.component.css',\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SuiChip {\n\n label = input<string>();\n\n removable = input(false);\n\n disabled = input(false);\n\n removed = output<void>();\n\n protected remove(event: MouseEvent): void {\n event.stopPropagation();\n\n if (this.disabled()) {\n return;\n }\n\n this.removed.emit();\n }\n}","<span\n class=\"sui-chip\"\n [class.sui-chip-disabled]=\"disabled()\">\n\n <span class=\"sui-chip-content\">\n <ng-content />\n\n @if (label()) {\n {{ label() }}\n }\n </span>\n\n @if (removable()) {\n <button\n type=\"button\"\n class=\"sui-chip-remove\"\n [disabled]=\"disabled()\"\n aria-label=\"Remove\"\n (click)=\"remove($event)\">\n\n ×\n\n </button>\n }\n\n</span>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;MAca,OAAO,CAAA;AAEhB,IAAA,KAAK,GAAG,KAAK;yFAAU;IAEvB,SAAS,GAAG,KAAK,CAAC,KAAK;kFAAC;IAExB,QAAQ,GAAG,KAAK,CAAC,KAAK;iFAAC;IAEvB,OAAO,GAAG,MAAM,EAAQ;AAEd,IAAA,MAAM,CAAC,KAAiB,EAAA;QAC9B,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;YACjB;QACJ;AAEA,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;IACvB;uGAlBS,OAAO,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAP,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,OAAO,8eCdpB,6fAyBO,EAAA,MAAA,EAAA,CAAA,4lCAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDXM,OAAO,EAAA,UAAA,EAAA,CAAA;kBAPnB,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,UAAU,EAAA,UAAA,EACR,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,6fAAA,EAAA,MAAA,EAAA,CAAA,4lCAAA,CAAA,EAAA;;;AEZnD;;AAEG;;;;"}
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { signal, Injectable, inject, computed, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { SuiDialog } from '@saitec/ui/dialog';
|
|
4
|
+
import { SuiButton } from '@saitec/ui/button';
|
|
5
|
+
|
|
6
|
+
class SuiConfirmService {
|
|
7
|
+
_request = signal(null, /* @ts-ignore */
|
|
8
|
+
...(ngDevMode ? [{ debugName: "_request" }] : /* istanbul ignore next */ []));
|
|
9
|
+
request = this._request.asReadonly();
|
|
10
|
+
confirm(options) {
|
|
11
|
+
/*
|
|
12
|
+
* Only one confirmation dialog is active
|
|
13
|
+
* at a time.
|
|
14
|
+
*/
|
|
15
|
+
const current = this._request();
|
|
16
|
+
if (current) {
|
|
17
|
+
current.resolve(false);
|
|
18
|
+
}
|
|
19
|
+
return new Promise(resolve => {
|
|
20
|
+
this._request.set({
|
|
21
|
+
header: options.header ??
|
|
22
|
+
'Confirmation',
|
|
23
|
+
message: options.message,
|
|
24
|
+
acceptLabel: options.acceptLabel ??
|
|
25
|
+
'Accept',
|
|
26
|
+
rejectLabel: options.rejectLabel ??
|
|
27
|
+
'Cancel',
|
|
28
|
+
severity: options.severity ??
|
|
29
|
+
'primary',
|
|
30
|
+
dismissible: options.dismissible ??
|
|
31
|
+
false,
|
|
32
|
+
closeOnEscape: options.closeOnEscape ??
|
|
33
|
+
true,
|
|
34
|
+
resolve
|
|
35
|
+
});
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
accept() {
|
|
39
|
+
this.finish(true);
|
|
40
|
+
}
|
|
41
|
+
reject() {
|
|
42
|
+
this.finish(false);
|
|
43
|
+
}
|
|
44
|
+
finish(result) {
|
|
45
|
+
const request = this._request();
|
|
46
|
+
if (!request) {
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
this._request.set(null);
|
|
50
|
+
request.resolve(result);
|
|
51
|
+
}
|
|
52
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiConfirmService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
53
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiConfirmService, providedIn: 'root' });
|
|
54
|
+
}
|
|
55
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiConfirmService, decorators: [{
|
|
56
|
+
type: Injectable,
|
|
57
|
+
args: [{
|
|
58
|
+
providedIn: 'root'
|
|
59
|
+
}]
|
|
60
|
+
}] });
|
|
61
|
+
|
|
62
|
+
class SuiConfirm {
|
|
63
|
+
confirm = inject(SuiConfirmService);
|
|
64
|
+
visible = computed(() => this.confirm.request() !== null, /* @ts-ignore */
|
|
65
|
+
...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
|
|
66
|
+
accept() {
|
|
67
|
+
this.confirm.accept();
|
|
68
|
+
}
|
|
69
|
+
reject() {
|
|
70
|
+
this.confirm.reject();
|
|
71
|
+
}
|
|
72
|
+
handleVisibleChange(visible) {
|
|
73
|
+
if (!visible) {
|
|
74
|
+
this.confirm.reject();
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiConfirm, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
78
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SuiConfirm, isStandalone: true, selector: "sui-confirm", ngImport: i0, template: "@if (confirm.request(); as request) {\n\n <sui-dialog\n [visible]=\"visible()\"\n (visibleChange)=\"handleVisibleChange($event)\"\n [header]=\"request.header\"\n [dismissible]=\"request.dismissible\"\n [closeOnEscape]=\"request.closeOnEscape\"\n [showCloseButton]=\"request.dismissible\"\n width=\"28rem\">\n\n <div class=\"sui-confirm-content\">\n\n <div\n class=\"sui-confirm-icon\"\n [class.sui-confirm-icon-primary]=\"\n request.severity === 'primary'\n \"\n [class.sui-confirm-icon-warning]=\"\n request.severity === 'warning'\n \"\n [class.sui-confirm-icon-danger]=\"\n request.severity === 'danger'\n \"\n aria-hidden=\"true\">\n\n @switch (request.severity) {\n\n @case ('danger') {\n !\n }\n\n @case ('warning') {\n !\n }\n\n @default {\n ?\n }\n\n }\n\n </div>\n\n <div class=\"sui-confirm-message\">\n {{ request.message }}\n </div>\n\n </div>\n\n <div suiDialogFooter>\n\n <sui-button\n severity=\"secondary\"\n (click)=\"reject()\">\n {{ request.rejectLabel }}\n </sui-button>\n\n <sui-button\n [severity]=\"\n request.severity === 'danger'\n ? 'danger'\n : 'primary'\n \"\n (click)=\"accept()\">\n {{ request.acceptLabel }}\n </sui-button>\n\n </div>\n\n </sui-dialog>\n\n}", styles: [":host{display:contents}.sui-confirm-content{display:flex;align-items:flex-start;gap:var(--sui-confirm-gap)}.sui-confirm-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2.5rem;height:2.5rem;border-radius:50%;font-family:inherit;font-size:1.25rem;font-weight:var(--sui-font-weight-bold)}.sui-confirm-icon-primary{color:var(--sui-color-selection-text);background:var(--sui-color-selection-background)}.sui-confirm-icon-warning{color:var(--sui-color-warning-surface-text);background:var(--sui-color-warning-surface)}.sui-confirm-icon-danger{color:var(--sui-color-danger-surface-text);background:var(--sui-color-danger-surface)}.sui-confirm-message{padding-top:.5rem;font-family:inherit;font-size:var(--sui-confirm-message-font-size);line-height:1.4rem;color:var(--sui-confirm-message-text)}\n"], dependencies: [{ kind: "component", type: SuiDialog, selector: "sui-dialog", inputs: ["visible", "header", "modal", "dismissible", "closeOnEscape", "showCloseButton", "blockScroll", "width", "maxWidth"], outputs: ["visibleChange", "opened", "closed"] }, { kind: "component", type: SuiButton, selector: "sui-button", inputs: ["variant", "severity", "size", "type", "disabled", "loading", "fullWidth", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
79
|
+
}
|
|
80
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiConfirm, decorators: [{
|
|
81
|
+
type: Component,
|
|
82
|
+
args: [{ selector: 'sui-confirm', standalone: true, imports: [
|
|
83
|
+
SuiDialog,
|
|
84
|
+
SuiButton
|
|
85
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (confirm.request(); as request) {\n\n <sui-dialog\n [visible]=\"visible()\"\n (visibleChange)=\"handleVisibleChange($event)\"\n [header]=\"request.header\"\n [dismissible]=\"request.dismissible\"\n [closeOnEscape]=\"request.closeOnEscape\"\n [showCloseButton]=\"request.dismissible\"\n width=\"28rem\">\n\n <div class=\"sui-confirm-content\">\n\n <div\n class=\"sui-confirm-icon\"\n [class.sui-confirm-icon-primary]=\"\n request.severity === 'primary'\n \"\n [class.sui-confirm-icon-warning]=\"\n request.severity === 'warning'\n \"\n [class.sui-confirm-icon-danger]=\"\n request.severity === 'danger'\n \"\n aria-hidden=\"true\">\n\n @switch (request.severity) {\n\n @case ('danger') {\n !\n }\n\n @case ('warning') {\n !\n }\n\n @default {\n ?\n }\n\n }\n\n </div>\n\n <div class=\"sui-confirm-message\">\n {{ request.message }}\n </div>\n\n </div>\n\n <div suiDialogFooter>\n\n <sui-button\n severity=\"secondary\"\n (click)=\"reject()\">\n {{ request.rejectLabel }}\n </sui-button>\n\n <sui-button\n [severity]=\"\n request.severity === 'danger'\n ? 'danger'\n : 'primary'\n \"\n (click)=\"accept()\">\n {{ request.acceptLabel }}\n </sui-button>\n\n </div>\n\n </sui-dialog>\n\n}", styles: [":host{display:contents}.sui-confirm-content{display:flex;align-items:flex-start;gap:var(--sui-confirm-gap)}.sui-confirm-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2.5rem;height:2.5rem;border-radius:50%;font-family:inherit;font-size:1.25rem;font-weight:var(--sui-font-weight-bold)}.sui-confirm-icon-primary{color:var(--sui-color-selection-text);background:var(--sui-color-selection-background)}.sui-confirm-icon-warning{color:var(--sui-color-warning-surface-text);background:var(--sui-color-warning-surface)}.sui-confirm-icon-danger{color:var(--sui-color-danger-surface-text);background:var(--sui-color-danger-surface)}.sui-confirm-message{padding-top:.5rem;font-family:inherit;font-size:var(--sui-confirm-message-font-size);line-height:1.4rem;color:var(--sui-confirm-message-text)}\n"] }]
|
|
86
|
+
}] });
|
|
87
|
+
|
|
88
|
+
/**
|
|
89
|
+
* Generated bundle index. Do not edit.
|
|
90
|
+
*/
|
|
91
|
+
|
|
92
|
+
export { SuiConfirm, SuiConfirmService };
|
|
93
|
+
//# sourceMappingURL=saitec-ui-confirm.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"saitec-ui-confirm.mjs","sources":["../../../projects/ui/confirm/src/confirm.service.ts","../../../projects/ui/confirm/src/confirm.component.ts","../../../projects/ui/confirm/src/confirm.component.html","../../../projects/ui/confirm/src/saitec-ui-confirm.ts"],"sourcesContent":["import {\r\n Injectable,\r\n signal\r\n} from '@angular/core';\r\n\r\nexport type SuiConfirmSeverity =\r\n | 'primary'\r\n | 'danger'\r\n | 'warning';\r\n\r\nexport interface SuiConfirmOptions {\r\n header?: string;\r\n\r\n message: string;\r\n\r\n acceptLabel?: string;\r\n\r\n rejectLabel?: string;\r\n\r\n severity?: SuiConfirmSeverity;\r\n\r\n dismissible?: boolean;\r\n\r\n closeOnEscape?: boolean;\r\n}\r\n\r\nexport interface SuiConfirmRequest\r\n extends Required<\r\n Pick<\r\n SuiConfirmOptions,\r\n | 'header'\r\n | 'message'\r\n | 'acceptLabel'\r\n | 'rejectLabel'\r\n | 'severity'\r\n | 'dismissible'\r\n | 'closeOnEscape'\r\n >\r\n > {\r\n resolve: (result: boolean) => void;\r\n}\r\n\r\n@Injectable({\r\n providedIn: 'root'\r\n})\r\nexport class SuiConfirmService {\r\n\r\n private readonly _request =\r\n signal<SuiConfirmRequest | null>(null);\r\n\r\n readonly request =\r\n this._request.asReadonly();\r\n\r\n confirm(\r\n options: SuiConfirmOptions\r\n ): Promise<boolean> {\r\n\r\n /*\r\n * Only one confirmation dialog is active\r\n * at a time.\r\n */\r\n const current = this._request();\r\n\r\n if (current) {\r\n current.resolve(false);\r\n }\r\n\r\n return new Promise<boolean>(resolve => {\r\n\r\n this._request.set({\r\n header:\r\n options.header ??\r\n 'Confirmation',\r\n\r\n message:\r\n options.message,\r\n\r\n acceptLabel:\r\n options.acceptLabel ??\r\n 'Accept',\r\n\r\n rejectLabel:\r\n options.rejectLabel ??\r\n 'Cancel',\r\n\r\n severity:\r\n options.severity ??\r\n 'primary',\r\n\r\n dismissible:\r\n options.dismissible ??\r\n false,\r\n\r\n closeOnEscape:\r\n options.closeOnEscape ??\r\n true,\r\n\r\n resolve\r\n });\r\n\r\n });\r\n }\r\n\r\n accept(): void {\r\n this.finish(true);\r\n }\r\n\r\n reject(): void {\r\n this.finish(false);\r\n }\r\n\r\n private finish(\r\n result: boolean\r\n ): void {\r\n\r\n const request =\r\n this._request();\r\n\r\n if (!request) {\r\n return;\r\n }\r\n\r\n this._request.set(null);\r\n\r\n request.resolve(result);\r\n }\r\n}","import {\n ChangeDetectionStrategy,\n Component,\n computed,\n inject\n} from '@angular/core';\n\nimport {\n SuiDialog\n} from '@saitec/ui/dialog';\n\nimport {\n SuiButton\n} from '@saitec/ui/button';\n\nimport {\n SuiConfirmService\n} from './confirm.service';\n\n@Component({\n selector: 'sui-confirm',\n standalone: true,\n imports: [\n SuiDialog,\n SuiButton\n ],\n templateUrl: './confirm.component.html',\n styleUrl: './confirm.component.css',\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SuiConfirm {\n\n protected readonly confirm =\n inject(SuiConfirmService);\n\n protected readonly visible =\n computed(\n () => this.confirm.request() !== null\n );\n\n protected accept(): void {\n this.confirm.accept();\n }\n\n protected reject(): void {\n this.confirm.reject();\n }\n\n protected handleVisibleChange(\n visible: boolean\n ): void {\n\n if (!visible) {\n this.confirm.reject();\n }\n }\n}","@if (confirm.request(); as request) {\n\n <sui-dialog\n [visible]=\"visible()\"\n (visibleChange)=\"handleVisibleChange($event)\"\n [header]=\"request.header\"\n [dismissible]=\"request.dismissible\"\n [closeOnEscape]=\"request.closeOnEscape\"\n [showCloseButton]=\"request.dismissible\"\n width=\"28rem\">\n\n <div class=\"sui-confirm-content\">\n\n <div\n class=\"sui-confirm-icon\"\n [class.sui-confirm-icon-primary]=\"\n request.severity === 'primary'\n \"\n [class.sui-confirm-icon-warning]=\"\n request.severity === 'warning'\n \"\n [class.sui-confirm-icon-danger]=\"\n request.severity === 'danger'\n \"\n aria-hidden=\"true\">\n\n @switch (request.severity) {\n\n @case ('danger') {\n !\n }\n\n @case ('warning') {\n !\n }\n\n @default {\n ?\n }\n\n }\n\n </div>\n\n <div class=\"sui-confirm-message\">\n {{ request.message }}\n </div>\n\n </div>\n\n <div suiDialogFooter>\n\n <sui-button\n severity=\"secondary\"\n (click)=\"reject()\">\n {{ request.rejectLabel }}\n </sui-button>\n\n <sui-button\n [severity]=\"\n request.severity === 'danger'\n ? 'danger'\n : 'primary'\n \"\n (click)=\"accept()\">\n {{ request.acceptLabel }}\n </sui-button>\n\n </div>\n\n </sui-dialog>\n\n}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;MA6Ca,iBAAiB,CAAA;IAET,QAAQ,GACrB,MAAM,CAA2B,IAAI;iFAAC;AAEjC,IAAA,OAAO,GACZ,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE;AAE9B,IAAA,OAAO,CACH,OAA0B,EAAA;AAG1B;;;AAGG;AACH,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,EAAE;QAE/B,IAAI,OAAO,EAAE;AACT,YAAA,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC;QAC1B;AAEA,QAAA,OAAO,IAAI,OAAO,CAAU,OAAO,IAAG;AAElC,YAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC;gBACd,MAAM,EACF,OAAO,CAAC,MAAM;oBACd,cAAc;gBAElB,OAAO,EACH,OAAO,CAAC,OAAO;gBAEnB,WAAW,EACP,OAAO,CAAC,WAAW;oBACnB,QAAQ;gBAEZ,WAAW,EACP,OAAO,CAAC,WAAW;oBACnB,QAAQ;gBAEZ,QAAQ,EACJ,OAAO,CAAC,QAAQ;oBAChB,SAAS;gBAEb,WAAW,EACP,OAAO,CAAC,WAAW;oBACnB,KAAK;gBAET,aAAa,EACT,OAAO,CAAC,aAAa;oBACrB,IAAI;gBAER;AACH,aAAA,CAAC;AAEN,QAAA,CAAC,CAAC;IACN;IAEA,MAAM,GAAA;AACF,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;IACrB;IAEA,MAAM,GAAA;AACF,QAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;IACtB;AAEQ,IAAA,MAAM,CACV,MAAe,EAAA;AAGf,QAAA,MAAM,OAAO,GACT,IAAI,CAAC,QAAQ,EAAE;QAEnB,IAAI,CAAC,OAAO,EAAE;YACV;QACJ;AAEA,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC;AAEvB,QAAA,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC;IAC3B;uGAhFS,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,iBAAiB,cAFd,MAAM,EAAA,CAAA;;2FAET,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAH7B,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,UAAU,EAAE;AACf,iBAAA;;;MCdY,UAAU,CAAA;AAEA,IAAA,OAAO,GACtB,MAAM,CAAC,iBAAiB,CAAC;AAEV,IAAA,OAAO,GACtB,QAAQ,CACJ,MAAM,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,KAAK,IAAI;gFACxC;IAEK,MAAM,GAAA;AACZ,QAAA,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE;IACzB;IAEU,MAAM,GAAA;AACZ,QAAA,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE;IACzB;AAEU,IAAA,mBAAmB,CACzB,OAAgB,EAAA;QAGhB,IAAI,CAAC,OAAO,EAAE;AACV,YAAA,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE;QACzB;IACJ;uGAzBS,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC9BvB,+4DAwEC,EAAA,MAAA,EAAA,CAAA,6zBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDjDO,SAAS,sOACT,SAAS,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,EAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,WAAA,EAAA,WAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAMJ,UAAU,EAAA,UAAA,EAAA,CAAA;kBAXtB,SAAS;+BACI,aAAa,EAAA,UAAA,EACX,IAAI,EAAA,OAAA,EACP;wBACL,SAAS;wBACT;qBACH,EAAA,eAAA,EAGgB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,+4DAAA,EAAA,MAAA,EAAA,CAAA,6zBAAA,CAAA,EAAA;;;AE5BnD;;AAEG;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"saitec-ui-core.mjs","sources":["../../../projects/ui/core/src/saitec-ui-core.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"AAAA;;AAEG"}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, output, signal, computed, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
4
|
+
|
|
5
|
+
let nextDatePickerId = 0;
|
|
6
|
+
class SuiDatePicker {
|
|
7
|
+
id = input(`sui-date-picker-${++nextDatePickerId}`, /* @ts-ignore */
|
|
8
|
+
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
9
|
+
name = input(/* @ts-ignore */
|
|
10
|
+
...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
|
|
11
|
+
placeholder = input('', /* @ts-ignore */
|
|
12
|
+
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
13
|
+
disabled = input(false, /* @ts-ignore */
|
|
14
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
15
|
+
readonly = input(false, /* @ts-ignore */
|
|
16
|
+
...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
17
|
+
required = input(false, /* @ts-ignore */
|
|
18
|
+
...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
19
|
+
min = input(/* @ts-ignore */
|
|
20
|
+
...(ngDevMode ? [undefined, { debugName: "min" }] : /* istanbul ignore next */ []));
|
|
21
|
+
max = input(/* @ts-ignore */
|
|
22
|
+
...(ngDevMode ? [undefined, { debugName: "max" }] : /* istanbul ignore next */ []));
|
|
23
|
+
ariaLabel = input(/* @ts-ignore */
|
|
24
|
+
...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
25
|
+
ariaDescribedBy = input(/* @ts-ignore */
|
|
26
|
+
...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
|
|
27
|
+
ariaInvalid = input(/* @ts-ignore */
|
|
28
|
+
...(ngDevMode ? [undefined, { debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
29
|
+
valueChange = output();
|
|
30
|
+
focused = output();
|
|
31
|
+
blurred = output();
|
|
32
|
+
value = signal(null, /* @ts-ignore */
|
|
33
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
34
|
+
formDisabled = signal(false, /* @ts-ignore */
|
|
35
|
+
...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
|
|
36
|
+
isDisabled = computed(() => this.disabled() ||
|
|
37
|
+
this.formDisabled(), /* @ts-ignore */
|
|
38
|
+
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
39
|
+
onChange = () => { };
|
|
40
|
+
onTouched = () => { };
|
|
41
|
+
writeValue(value) {
|
|
42
|
+
this.value.set(value ?? null);
|
|
43
|
+
}
|
|
44
|
+
registerOnChange(fn) {
|
|
45
|
+
this.onChange = fn;
|
|
46
|
+
}
|
|
47
|
+
registerOnTouched(fn) {
|
|
48
|
+
this.onTouched = fn;
|
|
49
|
+
}
|
|
50
|
+
setDisabledState(disabled) {
|
|
51
|
+
this.formDisabled.set(disabled);
|
|
52
|
+
}
|
|
53
|
+
handleChange(event) {
|
|
54
|
+
const element = event.target;
|
|
55
|
+
const value = element.value || null;
|
|
56
|
+
this.value.set(value);
|
|
57
|
+
this.onChange(value);
|
|
58
|
+
this.valueChange.emit(value);
|
|
59
|
+
}
|
|
60
|
+
handleFocus(event) {
|
|
61
|
+
this.focused.emit(event);
|
|
62
|
+
}
|
|
63
|
+
handleBlur(event) {
|
|
64
|
+
this.onTouched();
|
|
65
|
+
this.blurred.emit(event);
|
|
66
|
+
}
|
|
67
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
68
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: SuiDatePicker, isStandalone: true, selector: "sui-date-picker", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "ariaInvalid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", focused: "focused", blurred: "blurred" }, providers: [
|
|
69
|
+
{
|
|
70
|
+
provide: NG_VALUE_ACCESSOR,
|
|
71
|
+
useExisting: forwardRef(() => SuiDatePicker),
|
|
72
|
+
multi: true
|
|
73
|
+
}
|
|
74
|
+
], ngImport: i0, template: "<input\n class=\"sui-date-picker\"\n\n type=\"date\"\n\n [id]=\"id()\"\n [name]=\"name() ?? ''\"\n\n [value]=\"value() ?? ''\"\n\n [placeholder]=\"placeholder()\"\n\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n\n [attr.min]=\"min() ?? null\"\n [attr.max]=\"max() ?? null\"\n\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n [attr.aria-invalid]=\"ariaInvalid() ?? null\"\n\n (change)=\"handleChange($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"\n/>", styles: [":host{display:block;width:100%}.sui-date-picker{display:block;width:100%;min-height:var(--sui-date-picker-height);box-sizing:border-box;padding:var(--sui-space-2) var(--sui-date-picker-padding-x);font-family:inherit;font-size:var(--sui-control-font-size-md);line-height:1.25rem;color:var(--sui-date-picker-text);background:var(--sui-date-picker-background);border:1px solid var(--sui-date-picker-border);border-radius:var(--sui-date-picker-radius);outline:none;transition:border-color var(--sui-duration-normal) var(--sui-easing-standard),box-shadow var(--sui-duration-normal) var(--sui-easing-standard),background-color var(--sui-duration-normal) var(--sui-easing-standard)}.sui-date-picker:hover:not(:disabled):not(:read-only){border-color:var(--sui-date-picker-border-hover)}.sui-date-picker:focus{border-color:var(--sui-date-picker-border-focus);box-shadow:0 0 0 var(--sui-focus-ring-width) var(--sui-date-picker-focus-color)}.sui-date-picker:disabled{cursor:not-allowed;color:var(--sui-date-picker-disabled-text);background:var(--sui-date-picker-disabled-background);border-color:var(--sui-color-border)}.sui-date-picker:read-only{background:var(--sui-color-surface-alt)}.sui-date-picker[aria-invalid=true]{border-color:var(--sui-color-danger)}.sui-date-picker[aria-invalid=true]:focus{box-shadow:0 0 0 var(--sui-focus-ring-width) var(--sui-color-danger)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
75
|
+
}
|
|
76
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiDatePicker, decorators: [{
|
|
77
|
+
type: Component,
|
|
78
|
+
args: [{ selector: 'sui-date-picker', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
79
|
+
{
|
|
80
|
+
provide: NG_VALUE_ACCESSOR,
|
|
81
|
+
useExisting: forwardRef(() => SuiDatePicker),
|
|
82
|
+
multi: true
|
|
83
|
+
}
|
|
84
|
+
], template: "<input\n class=\"sui-date-picker\"\n\n type=\"date\"\n\n [id]=\"id()\"\n [name]=\"name() ?? ''\"\n\n [value]=\"value() ?? ''\"\n\n [placeholder]=\"placeholder()\"\n\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n\n [attr.min]=\"min() ?? null\"\n [attr.max]=\"max() ?? null\"\n\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n [attr.aria-invalid]=\"ariaInvalid() ?? null\"\n\n (change)=\"handleChange($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"\n/>", styles: [":host{display:block;width:100%}.sui-date-picker{display:block;width:100%;min-height:var(--sui-date-picker-height);box-sizing:border-box;padding:var(--sui-space-2) var(--sui-date-picker-padding-x);font-family:inherit;font-size:var(--sui-control-font-size-md);line-height:1.25rem;color:var(--sui-date-picker-text);background:var(--sui-date-picker-background);border:1px solid var(--sui-date-picker-border);border-radius:var(--sui-date-picker-radius);outline:none;transition:border-color var(--sui-duration-normal) var(--sui-easing-standard),box-shadow var(--sui-duration-normal) var(--sui-easing-standard),background-color var(--sui-duration-normal) var(--sui-easing-standard)}.sui-date-picker:hover:not(:disabled):not(:read-only){border-color:var(--sui-date-picker-border-hover)}.sui-date-picker:focus{border-color:var(--sui-date-picker-border-focus);box-shadow:0 0 0 var(--sui-focus-ring-width) var(--sui-date-picker-focus-color)}.sui-date-picker:disabled{cursor:not-allowed;color:var(--sui-date-picker-disabled-text);background:var(--sui-date-picker-disabled-background);border-color:var(--sui-color-border)}.sui-date-picker:read-only{background:var(--sui-color-surface-alt)}.sui-date-picker[aria-invalid=true]{border-color:var(--sui-color-danger)}.sui-date-picker[aria-invalid=true]:focus{box-shadow:0 0 0 var(--sui-focus-ring-width) var(--sui-color-danger)}\n"] }]
|
|
85
|
+
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], ariaInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaInvalid", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
|
|
86
|
+
|
|
87
|
+
/**
|
|
88
|
+
* Generated bundle index. Do not edit.
|
|
89
|
+
*/
|
|
90
|
+
|
|
91
|
+
export { SuiDatePicker };
|
|
92
|
+
//# sourceMappingURL=saitec-ui-date-picker.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"saitec-ui-date-picker.mjs","sources":["../../../projects/ui/date-picker/src/date-picker.component.ts","../../../projects/ui/date-picker/src/date-picker.component.html","../../../projects/ui/date-picker/src/saitec-ui-date-picker.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n computed,\n forwardRef,\n input,\n output,\n signal\n} from '@angular/core';\n\nimport {\n ControlValueAccessor,\n NG_VALUE_ACCESSOR\n} from '@angular/forms';\n\nlet nextDatePickerId = 0;\n\n@Component({\n selector: 'sui-date-picker',\n standalone: true,\n templateUrl: './date-picker.component.html',\n styleUrl: './date-picker.component.css',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SuiDatePicker),\n multi: true\n }\n ]\n})\nexport class SuiDatePicker implements ControlValueAccessor {\n\n id = input(`sui-date-picker-${++nextDatePickerId}`);\n\n name = input<string>();\n\n placeholder = input('');\n\n disabled = input(false);\n\n readonly = input(false);\n\n required = input(false);\n\n min = input<string>();\n\n max = input<string>();\n\n ariaLabel = input<string>();\n\n ariaDescribedBy = input<string>();\n\n ariaInvalid = input<boolean>();\n\n valueChange = output<string | null>();\n\n focused = output<FocusEvent>();\n\n blurred = output<FocusEvent>();\n\n protected readonly value =\n signal<string | null>(null);\n\n private readonly formDisabled =\n signal(false);\n\n protected readonly isDisabled =\n computed(\n () =>\n this.disabled() ||\n this.formDisabled()\n );\n\n private onChange:\n (value: string | null) => void =\n () => {};\n\n private onTouched:\n () => void =\n () => {};\n\n writeValue(\n value: string | null | undefined\n ): void {\n this.value.set(value ?? null);\n }\n\n registerOnChange(\n fn: (value: string | null) => void\n ): void {\n this.onChange = fn;\n }\n\n registerOnTouched(\n fn: () => void\n ): void {\n this.onTouched = fn;\n }\n\n setDisabledState(\n disabled: boolean\n ): void {\n this.formDisabled.set(disabled);\n }\n\n protected handleChange(\n event: Event\n ): void {\n\n const element =\n event.target as HTMLInputElement;\n\n const value =\n element.value || null;\n\n this.value.set(value);\n\n this.onChange(value);\n this.valueChange.emit(value);\n }\n\n protected handleFocus(\n event: FocusEvent\n ): void {\n this.focused.emit(event);\n }\n\n protected handleBlur(\n event: FocusEvent\n ): void {\n this.onTouched();\n this.blurred.emit(event);\n }\n}","<input\n class=\"sui-date-picker\"\n\n type=\"date\"\n\n [id]=\"id()\"\n [name]=\"name() ?? ''\"\n\n [value]=\"value() ?? ''\"\n\n [placeholder]=\"placeholder()\"\n\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n\n [attr.min]=\"min() ?? null\"\n [attr.max]=\"max() ?? null\"\n\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n [attr.aria-invalid]=\"ariaInvalid() ?? null\"\n\n (change)=\"handleChange($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"\n/>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { inject, model, input, output, effect, HostListener, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { DOCUMENT } from '@angular/common';
|
|
4
|
+
|
|
5
|
+
class SuiDialog {
|
|
6
|
+
document = inject(DOCUMENT);
|
|
7
|
+
visible = model(false, /* @ts-ignore */
|
|
8
|
+
...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
|
|
9
|
+
header = input(/* @ts-ignore */
|
|
10
|
+
...(ngDevMode ? [undefined, { debugName: "header" }] : /* istanbul ignore next */ []));
|
|
11
|
+
modal = input(true, /* @ts-ignore */
|
|
12
|
+
...(ngDevMode ? [{ debugName: "modal" }] : /* istanbul ignore next */ []));
|
|
13
|
+
dismissible = input(true, /* @ts-ignore */
|
|
14
|
+
...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
|
|
15
|
+
closeOnEscape = input(true, /* @ts-ignore */
|
|
16
|
+
...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
|
|
17
|
+
showCloseButton = input(true, /* @ts-ignore */
|
|
18
|
+
...(ngDevMode ? [{ debugName: "showCloseButton" }] : /* istanbul ignore next */ []));
|
|
19
|
+
blockScroll = input(true, /* @ts-ignore */
|
|
20
|
+
...(ngDevMode ? [{ debugName: "blockScroll" }] : /* istanbul ignore next */ []));
|
|
21
|
+
width = input('32rem', /* @ts-ignore */
|
|
22
|
+
...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
23
|
+
maxWidth = input('calc(100vw - 2rem)', /* @ts-ignore */
|
|
24
|
+
...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
|
|
25
|
+
opened = output();
|
|
26
|
+
closed = output();
|
|
27
|
+
previousBodyOverflow;
|
|
28
|
+
constructor() {
|
|
29
|
+
effect(() => {
|
|
30
|
+
this.updateBodyScroll(this.visible());
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
handleEscape() {
|
|
34
|
+
if (this.visible() &&
|
|
35
|
+
this.closeOnEscape()) {
|
|
36
|
+
this.close();
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
handleBackdrop() {
|
|
40
|
+
if (this.modal() &&
|
|
41
|
+
this.dismissible()) {
|
|
42
|
+
this.close();
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
close() {
|
|
46
|
+
if (!this.visible()) {
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
this.visible.set(false);
|
|
50
|
+
this.closed.emit();
|
|
51
|
+
}
|
|
52
|
+
open() {
|
|
53
|
+
if (this.visible()) {
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
this.visible.set(true);
|
|
57
|
+
this.opened.emit();
|
|
58
|
+
}
|
|
59
|
+
updateBodyScroll(visible) {
|
|
60
|
+
if (!this.blockScroll()) {
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
const body = this.document.body;
|
|
64
|
+
if (visible) {
|
|
65
|
+
this.previousBodyOverflow = body.style.overflow;
|
|
66
|
+
body.style.overflow = 'hidden';
|
|
67
|
+
}
|
|
68
|
+
else {
|
|
69
|
+
body.style.overflow =
|
|
70
|
+
this.previousBodyOverflow ?? '';
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
ngOnDestroy() {
|
|
74
|
+
if (this.blockScroll()) {
|
|
75
|
+
this.document.body.style.overflow =
|
|
76
|
+
this.previousBodyOverflow ?? '';
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
80
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SuiDialog, isStandalone: true, selector: "sui-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, blockScroll: { classPropertyName: "blockScroll", publicName: "blockScroll", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", opened: "opened", closed: "closed" }, host: { listeners: { "document:keydown.escape": "handleEscape()" } }, ngImport: i0, template: "<div\n class=\"sui-dialog-overlay\"\n [class.sui-dialog-overlay-visible]=\"visible()\"\n [class.sui-dialog-overlay-modal]=\"modal()\"\n [attr.aria-hidden]=\"!visible()\"\n (click)=\"handleBackdrop()\">\n\n <section\n class=\"sui-dialog\"\n [class.sui-dialog-visible]=\"visible()\"\n [style.width]=\"width()\"\n [style.max-width]=\"maxWidth()\"\n role=\"dialog\"\n [attr.aria-modal]=\"modal()\"\n (click)=\"$event.stopPropagation()\">\n\n <header class=\"sui-dialog-header\">\n\n <div class=\"sui-dialog-header-content\">\n\n <ng-content select=\"[suiDialogHeader]\" />\n\n @if (header()) {\n <span class=\"sui-dialog-title\">\n {{ header() }}\n </span>\n }\n\n </div>\n\n @if (showCloseButton()) {\n <button\n type=\"button\"\n class=\"sui-dialog-close\"\n aria-label=\"Close\"\n (click)=\"close()\">\n \u00D7\n </button>\n }\n\n </header>\n\n <div class=\"sui-dialog-content\">\n <ng-content />\n </div>\n\n <footer class=\"sui-dialog-footer\">\n <ng-content select=\"[suiDialogFooter]\" />\n </footer>\n\n </section>\n\n</div>", styles: [":host{display:contents}.sui-dialog-overlay{position:fixed;inset:0;z-index:var(--sui-dialog-z-index);display:flex;align-items:center;justify-content:center;padding:var(--sui-space-4);box-sizing:border-box;visibility:hidden;pointer-events:none;background:transparent;transition:background-color var(--sui-duration-normal) var(--sui-easing-standard),visibility var(--sui-duration-normal) var(--sui-easing-standard)}.sui-dialog-overlay-visible{visibility:visible;pointer-events:auto}.sui-dialog-overlay-visible.sui-dialog-overlay-modal{background:var(--sui-dialog-overlay-background)}.sui-dialog{display:flex;flex-direction:column;max-height:calc(100vh - 2rem);color:var(--sui-dialog-text);background:var(--sui-dialog-background);border:var(--sui-dialog-border-width) solid var(--sui-dialog-border);border-radius:var(--sui-dialog-radius);box-shadow:var(--sui-dialog-shadow);opacity:0;transform:translateY(-.5rem) scale(.98);transition:opacity var(--sui-duration-normal) var(--sui-easing-standard),transform var(--sui-duration-normal) var(--sui-easing-standard)}.sui-dialog-visible{opacity:1;transform:translateY(0) scale(1)}.sui-dialog-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;min-height:3.5rem;padding:var(--sui-dialog-footer-padding);border-bottom:var(--sui-dialog-border-width) solid var(--sui-dialog-border)}.sui-dialog-header-content{display:flex;align-items:center;gap:var(--sui-space-2);min-width:0}.sui-dialog-title{font-family:inherit;font-size:var(--sui-control-font-size-lg);font-weight:var(--sui-font-weight-semibold);color:var(--sui-dialog-text)}.sui-dialog-close{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;color:var(--sui-dialog-close-text);background:transparent;border:0;border-radius:.375rem;cursor:pointer;font-family:inherit;font-size:1.5rem;line-height:1}.sui-dialog-close:hover{color:var(--sui-color-content);background:var(--sui-dialog-close-background-hover)}.sui-dialog-close:focus-visible{outline:var(--sui-focus-ring-width) solid var(--sui-color-focus);outline-offset:var(--sui-focus-ring-offset)}.sui-dialog-content{flex:1;min-height:0;padding:var(--sui-dialog-content-padding);overflow:auto}.sui-dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--sui-space-2);flex-shrink:0;padding:.75rem 1rem;border-top:var(--sui-dialog-border-width) solid var(--sui-dialog-border)}.sui-dialog-footer:empty{display:none}@media(prefers-reduced-motion:reduce){.sui-dialog,.sui-dialog-overlay{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
81
|
+
}
|
|
82
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiDialog, decorators: [{
|
|
83
|
+
type: Component,
|
|
84
|
+
args: [{ selector: 'sui-dialog', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"sui-dialog-overlay\"\n [class.sui-dialog-overlay-visible]=\"visible()\"\n [class.sui-dialog-overlay-modal]=\"modal()\"\n [attr.aria-hidden]=\"!visible()\"\n (click)=\"handleBackdrop()\">\n\n <section\n class=\"sui-dialog\"\n [class.sui-dialog-visible]=\"visible()\"\n [style.width]=\"width()\"\n [style.max-width]=\"maxWidth()\"\n role=\"dialog\"\n [attr.aria-modal]=\"modal()\"\n (click)=\"$event.stopPropagation()\">\n\n <header class=\"sui-dialog-header\">\n\n <div class=\"sui-dialog-header-content\">\n\n <ng-content select=\"[suiDialogHeader]\" />\n\n @if (header()) {\n <span class=\"sui-dialog-title\">\n {{ header() }}\n </span>\n }\n\n </div>\n\n @if (showCloseButton()) {\n <button\n type=\"button\"\n class=\"sui-dialog-close\"\n aria-label=\"Close\"\n (click)=\"close()\">\n \u00D7\n </button>\n }\n\n </header>\n\n <div class=\"sui-dialog-content\">\n <ng-content />\n </div>\n\n <footer class=\"sui-dialog-footer\">\n <ng-content select=\"[suiDialogFooter]\" />\n </footer>\n\n </section>\n\n</div>", styles: [":host{display:contents}.sui-dialog-overlay{position:fixed;inset:0;z-index:var(--sui-dialog-z-index);display:flex;align-items:center;justify-content:center;padding:var(--sui-space-4);box-sizing:border-box;visibility:hidden;pointer-events:none;background:transparent;transition:background-color var(--sui-duration-normal) var(--sui-easing-standard),visibility var(--sui-duration-normal) var(--sui-easing-standard)}.sui-dialog-overlay-visible{visibility:visible;pointer-events:auto}.sui-dialog-overlay-visible.sui-dialog-overlay-modal{background:var(--sui-dialog-overlay-background)}.sui-dialog{display:flex;flex-direction:column;max-height:calc(100vh - 2rem);color:var(--sui-dialog-text);background:var(--sui-dialog-background);border:var(--sui-dialog-border-width) solid var(--sui-dialog-border);border-radius:var(--sui-dialog-radius);box-shadow:var(--sui-dialog-shadow);opacity:0;transform:translateY(-.5rem) scale(.98);transition:opacity var(--sui-duration-normal) var(--sui-easing-standard),transform var(--sui-duration-normal) var(--sui-easing-standard)}.sui-dialog-visible{opacity:1;transform:translateY(0) scale(1)}.sui-dialog-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;min-height:3.5rem;padding:var(--sui-dialog-footer-padding);border-bottom:var(--sui-dialog-border-width) solid var(--sui-dialog-border)}.sui-dialog-header-content{display:flex;align-items:center;gap:var(--sui-space-2);min-width:0}.sui-dialog-title{font-family:inherit;font-size:var(--sui-control-font-size-lg);font-weight:var(--sui-font-weight-semibold);color:var(--sui-dialog-text)}.sui-dialog-close{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;color:var(--sui-dialog-close-text);background:transparent;border:0;border-radius:.375rem;cursor:pointer;font-family:inherit;font-size:1.5rem;line-height:1}.sui-dialog-close:hover{color:var(--sui-color-content);background:var(--sui-dialog-close-background-hover)}.sui-dialog-close:focus-visible{outline:var(--sui-focus-ring-width) solid var(--sui-color-focus);outline-offset:var(--sui-focus-ring-offset)}.sui-dialog-content{flex:1;min-height:0;padding:var(--sui-dialog-content-padding);overflow:auto}.sui-dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--sui-space-2);flex-shrink:0;padding:.75rem 1rem;border-top:var(--sui-dialog-border-width) solid var(--sui-dialog-border)}.sui-dialog-footer:empty{display:none}@media(prefers-reduced-motion:reduce){.sui-dialog,.sui-dialog-overlay{transition:none}}\n"] }]
|
|
85
|
+
}], ctorParameters: () => [], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], blockScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "blockScroll", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], handleEscape: [{
|
|
86
|
+
type: HostListener,
|
|
87
|
+
args: ['document:keydown.escape']
|
|
88
|
+
}] } });
|
|
89
|
+
|
|
90
|
+
/**
|
|
91
|
+
* Generated bundle index. Do not edit.
|
|
92
|
+
*/
|
|
93
|
+
|
|
94
|
+
export { SuiDialog };
|
|
95
|
+
//# sourceMappingURL=saitec-ui-dialog.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"saitec-ui-dialog.mjs","sources":["../../../projects/ui/dialog/src/dialog.component.ts","../../../projects/ui/dialog/src/dialog.component.html","../../../projects/ui/dialog/src/saitec-ui-dialog.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n effect,\n HostListener,\n inject,\n input,\n model,\n OnDestroy,\n output\n} from '@angular/core';\n\nimport { DOCUMENT } from '@angular/common';\n\n@Component({\n selector: 'sui-dialog',\n standalone: true,\n templateUrl: './dialog.component.html',\n styleUrl: './dialog.component.css',\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SuiDialog implements OnDestroy {\n\n private readonly document = inject(DOCUMENT);\n\n visible = model(false);\n\n header = input<string>();\n\n modal = input(true);\n\n dismissible = input(true);\n\n closeOnEscape = input(true);\n\n showCloseButton = input(true);\n\n blockScroll = input(true);\n\n width = input('32rem');\n\n maxWidth = input('calc(100vw - 2rem)');\n\n opened = output<void>();\n\n closed = output<void>();\n\n private previousBodyOverflow?: string;\n\n constructor() {\n effect(() => {\n this.updateBodyScroll(this.visible());\n });\n }\n\n @HostListener('document:keydown.escape')\n protected handleEscape(): void {\n if (\n this.visible() &&\n this.closeOnEscape()\n ) {\n this.close();\n }\n }\n\n protected handleBackdrop(): void {\n if (\n this.modal() &&\n this.dismissible()\n ) {\n this.close();\n }\n }\n\n protected close(): void {\n if (!this.visible()) {\n return;\n }\n\n this.visible.set(false);\n this.closed.emit();\n }\n\n public open(): void {\n if (this.visible()) {\n return;\n }\n\n this.visible.set(true);\n this.opened.emit();\n }\n\n private updateBodyScroll(visible: boolean): void {\n if (!this.blockScroll()) {\n return;\n }\n\n const body = this.document.body;\n\n if (visible) {\n this.previousBodyOverflow = body.style.overflow;\n body.style.overflow = 'hidden';\n }\n else {\n body.style.overflow =\n this.previousBodyOverflow ?? '';\n }\n }\n\n ngOnDestroy(): void {\n if (this.blockScroll()) {\n this.document.body.style.overflow =\n this.previousBodyOverflow ?? '';\n }\n }\n}","<div\n class=\"sui-dialog-overlay\"\n [class.sui-dialog-overlay-visible]=\"visible()\"\n [class.sui-dialog-overlay-modal]=\"modal()\"\n [attr.aria-hidden]=\"!visible()\"\n (click)=\"handleBackdrop()\">\n\n <section\n class=\"sui-dialog\"\n [class.sui-dialog-visible]=\"visible()\"\n [style.width]=\"width()\"\n [style.max-width]=\"maxWidth()\"\n role=\"dialog\"\n [attr.aria-modal]=\"modal()\"\n (click)=\"$event.stopPropagation()\">\n\n <header class=\"sui-dialog-header\">\n\n <div class=\"sui-dialog-header-content\">\n\n <ng-content select=\"[suiDialogHeader]\" />\n\n @if (header()) {\n <span class=\"sui-dialog-title\">\n {{ header() }}\n </span>\n }\n\n </div>\n\n @if (showCloseButton()) {\n <button\n type=\"button\"\n class=\"sui-dialog-close\"\n aria-label=\"Close\"\n (click)=\"close()\">\n ×\n </button>\n }\n\n </header>\n\n <div class=\"sui-dialog-content\">\n <ng-content />\n </div>\n\n <footer class=\"sui-dialog-footer\">\n <ng-content select=\"[suiDialogFooter]\" />\n </footer>\n\n </section>\n\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
|
|
4
|
+
class SuiDivider {
|
|
5
|
+
orientation = input('horizontal', /* @ts-ignore */
|
|
6
|
+
...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
|
|
7
|
+
align = input('center', /* @ts-ignore */
|
|
8
|
+
...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
|
|
9
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiDivider, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: SuiDivider, isStandalone: true, selector: "sui-divider", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"sui-divider\"\n [class.sui-divider-horizontal]=\"orientation() === 'horizontal'\"\n [class.sui-divider-vertical]=\"orientation() === 'vertical'\"\n [class.sui-divider-start]=\"align() === 'start'\"\n [class.sui-divider-center]=\"align() === 'center'\"\n [class.sui-divider-end]=\"align() === 'end'\"\n role=\"separator\"\n [attr.aria-orientation]=\"orientation()\">\n\n <span class=\"sui-divider-line\"></span>\n\n <span class=\"sui-divider-content\">\n <ng-content />\n </span>\n\n <span class=\"sui-divider-line\"></span>\n</div>", styles: [":host{display:block}.sui-divider{color:var(--sui-divider-text)}.sui-divider-horizontal{display:flex;align-items:center;width:100%;gap:.75rem;margin:1rem 0}.sui-divider-horizontal .sui-divider-line{height:1px;background:var(--sui-divider-color);flex:1}.sui-divider-horizontal.sui-divider-start .sui-divider-line:first-child{flex:0 0 0}.sui-divider-horizontal.sui-divider-end .sui-divider-line:last-child{flex:0 0 0}.sui-divider-content{display:inline-flex;align-items:center;white-space:nowrap;font-family:inherit;font-size:var(--sui-divider-font-size)}.sui-divider-vertical{display:inline-flex;flex-direction:column;align-items:center;align-self:stretch;min-height:1rem;margin:0 1rem}.sui-divider-vertical .sui-divider-line{width:1px;background:var(--sui-divider-color);flex:1}.sui-divider-vertical .sui-divider-content{margin:.5rem 0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11
|
+
}
|
|
12
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiDivider, decorators: [{
|
|
13
|
+
type: Component,
|
|
14
|
+
args: [{ selector: 'sui-divider', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"sui-divider\"\n [class.sui-divider-horizontal]=\"orientation() === 'horizontal'\"\n [class.sui-divider-vertical]=\"orientation() === 'vertical'\"\n [class.sui-divider-start]=\"align() === 'start'\"\n [class.sui-divider-center]=\"align() === 'center'\"\n [class.sui-divider-end]=\"align() === 'end'\"\n role=\"separator\"\n [attr.aria-orientation]=\"orientation()\">\n\n <span class=\"sui-divider-line\"></span>\n\n <span class=\"sui-divider-content\">\n <ng-content />\n </span>\n\n <span class=\"sui-divider-line\"></span>\n</div>", styles: [":host{display:block}.sui-divider{color:var(--sui-divider-text)}.sui-divider-horizontal{display:flex;align-items:center;width:100%;gap:.75rem;margin:1rem 0}.sui-divider-horizontal .sui-divider-line{height:1px;background:var(--sui-divider-color);flex:1}.sui-divider-horizontal.sui-divider-start .sui-divider-line:first-child{flex:0 0 0}.sui-divider-horizontal.sui-divider-end .sui-divider-line:last-child{flex:0 0 0}.sui-divider-content{display:inline-flex;align-items:center;white-space:nowrap;font-family:inherit;font-size:var(--sui-divider-font-size)}.sui-divider-vertical{display:inline-flex;flex-direction:column;align-items:center;align-self:stretch;min-height:1rem;margin:0 1rem}.sui-divider-vertical .sui-divider-line{width:1px;background:var(--sui-divider-color);flex:1}.sui-divider-vertical .sui-divider-content{margin:.5rem 0}\n"] }]
|
|
15
|
+
}], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }] } });
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* Generated bundle index. Do not edit.
|
|
19
|
+
*/
|
|
20
|
+
|
|
21
|
+
export { SuiDivider };
|
|
22
|
+
//# sourceMappingURL=saitec-ui-divider.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"saitec-ui-divider.mjs","sources":["../../../projects/ui/divider/src/divider.component.ts","../../../projects/ui/divider/src/divider.component.html","../../../projects/ui/divider/src/saitec-ui-divider.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n input\n} from '@angular/core';\n\nexport type SuiDividerOrientation =\n | 'horizontal'\n | 'vertical';\n\nexport type SuiDividerAlign =\n | 'start'\n | 'center'\n | 'end';\n\n@Component({\n selector: 'sui-divider',\n standalone: true,\n templateUrl: './divider.component.html',\n styleUrl: './divider.component.css',\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SuiDivider {\n\n orientation = input<SuiDividerOrientation>('horizontal');\n\n align = input<SuiDividerAlign>('center');\n}","<div\n class=\"sui-divider\"\n [class.sui-divider-horizontal]=\"orientation() === 'horizontal'\"\n [class.sui-divider-vertical]=\"orientation() === 'vertical'\"\n [class.sui-divider-start]=\"align() === 'start'\"\n [class.sui-divider-center]=\"align() === 'center'\"\n [class.sui-divider-end]=\"align() === 'end'\"\n role=\"separator\"\n [attr.aria-orientation]=\"orientation()\">\n\n <span class=\"sui-divider-line\"></span>\n\n <span class=\"sui-divider-content\">\n <ng-content />\n </span>\n\n <span class=\"sui-divider-line\"></span>\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;MAsBa,UAAU,CAAA;IAEnB,WAAW,GAAG,KAAK,CAAwB,YAAY;oFAAC;IAExD,KAAK,GAAG,KAAK,CAAkB,QAAQ;8EAAC;uGAJ/B,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,qVCtBvB,+kBAiBM,EAAA,MAAA,EAAA,CAAA,u0BAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDKO,UAAU,EAAA,UAAA,EAAA,CAAA;kBAPtB,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,UAAA,EACX,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,+kBAAA,EAAA,MAAA,EAAA,CAAA,u0BAAA,CAAA,EAAA;;;AEpBnD;;AAEG;;;;"}
|