@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.
- 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
package/README.md
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
# Ui
|
|
2
|
+
|
|
3
|
+
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 22.1.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 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
|
+
|
|
35
|
+
```bash
|
|
36
|
+
cd dist/ui
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
2. Run the `npm publish` command to publish your library to the npm registry:
|
|
40
|
+
```bash
|
|
41
|
+
npm publish
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
## Running unit tests
|
|
45
|
+
|
|
46
|
+
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
|
47
|
+
|
|
48
|
+
```bash
|
|
49
|
+
ng test
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## Running end-to-end tests
|
|
53
|
+
|
|
54
|
+
For end-to-end (e2e) testing, run:
|
|
55
|
+
|
|
56
|
+
```bash
|
|
57
|
+
ng e2e
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
|
61
|
+
|
|
62
|
+
## Additional Resources
|
|
63
|
+
|
|
64
|
+
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.
|
|
@@ -0,0 +1,214 @@
|
|
|
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
|
+
import * as i1 from '@angular/cdk/overlay';
|
|
5
|
+
import { OverlayModule } from '@angular/cdk/overlay';
|
|
6
|
+
|
|
7
|
+
let nextAutocompleteId = 0;
|
|
8
|
+
class SuiAutocomplete {
|
|
9
|
+
id = input(`sui-autocomplete-${++nextAutocompleteId}`, /* @ts-ignore */
|
|
10
|
+
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
11
|
+
name = input(/* @ts-ignore */
|
|
12
|
+
...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
|
|
13
|
+
options = input([], /* @ts-ignore */
|
|
14
|
+
...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
15
|
+
placeholder = input('', /* @ts-ignore */
|
|
16
|
+
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
17
|
+
disabled = input(false, /* @ts-ignore */
|
|
18
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
19
|
+
readonly = input(false, /* @ts-ignore */
|
|
20
|
+
...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
21
|
+
required = input(false, /* @ts-ignore */
|
|
22
|
+
...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
23
|
+
minLength = input(1, /* @ts-ignore */
|
|
24
|
+
...(ngDevMode ? [{ debugName: "minLength" }] : /* istanbul ignore next */ []));
|
|
25
|
+
forceSelection = input(false, /* @ts-ignore */
|
|
26
|
+
...(ngDevMode ? [{ debugName: "forceSelection" }] : /* istanbul ignore next */ []));
|
|
27
|
+
emptyMessage = input('No results found', /* @ts-ignore */
|
|
28
|
+
...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
|
|
29
|
+
ariaLabel = input(/* @ts-ignore */
|
|
30
|
+
...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
31
|
+
ariaDescribedBy = input(/* @ts-ignore */
|
|
32
|
+
...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
|
|
33
|
+
ariaInvalid = input(/* @ts-ignore */
|
|
34
|
+
...(ngDevMode ? [undefined, { debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
35
|
+
search = output();
|
|
36
|
+
valueChange = output();
|
|
37
|
+
optionSelected = output();
|
|
38
|
+
focused = output();
|
|
39
|
+
blurred = output();
|
|
40
|
+
text = signal('', /* @ts-ignore */
|
|
41
|
+
...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
|
|
42
|
+
value = signal(undefined, /* @ts-ignore */
|
|
43
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
44
|
+
panelVisible = signal(false, /* @ts-ignore */
|
|
45
|
+
...(ngDevMode ? [{ debugName: "panelVisible" }] : /* istanbul ignore next */ []));
|
|
46
|
+
activeIndex = signal(-1, /* @ts-ignore */
|
|
47
|
+
...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
|
|
48
|
+
formDisabled = signal(false, /* @ts-ignore */
|
|
49
|
+
...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
|
|
50
|
+
isDisabled = computed(() => this.disabled() || this.formDisabled(), /* @ts-ignore */
|
|
51
|
+
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
52
|
+
hasOptions = computed(() => this.options().length > 0, /* @ts-ignore */
|
|
53
|
+
...(ngDevMode ? [{ debugName: "hasOptions" }] : /* istanbul ignore next */ []));
|
|
54
|
+
showEmptyMessage = computed(() => this.panelVisible() &&
|
|
55
|
+
this.text().length >= this.minLength() &&
|
|
56
|
+
this.options().length === 0, /* @ts-ignore */
|
|
57
|
+
...(ngDevMode ? [{ debugName: "showEmptyMessage" }] : /* istanbul ignore next */ []));
|
|
58
|
+
onChange = () => { };
|
|
59
|
+
onTouched = () => { };
|
|
60
|
+
writeValue(value) {
|
|
61
|
+
this.value.set(value);
|
|
62
|
+
const option = this.options().find(item => Object.is(item.value, value));
|
|
63
|
+
this.text.set(option?.label ?? '');
|
|
64
|
+
}
|
|
65
|
+
registerOnChange(fn) {
|
|
66
|
+
this.onChange = fn;
|
|
67
|
+
}
|
|
68
|
+
registerOnTouched(fn) {
|
|
69
|
+
this.onTouched = fn;
|
|
70
|
+
}
|
|
71
|
+
setDisabledState(disabled) {
|
|
72
|
+
this.formDisabled.set(disabled);
|
|
73
|
+
}
|
|
74
|
+
handleInput(event) {
|
|
75
|
+
const element = event.target;
|
|
76
|
+
const query = element.value;
|
|
77
|
+
this.text.set(query);
|
|
78
|
+
this.activeIndex.set(-1);
|
|
79
|
+
if (query.length >= this.minLength()) {
|
|
80
|
+
this.panelVisible.set(true);
|
|
81
|
+
this.search.emit(query);
|
|
82
|
+
}
|
|
83
|
+
else {
|
|
84
|
+
this.panelVisible.set(false);
|
|
85
|
+
}
|
|
86
|
+
if (!this.forceSelection()) {
|
|
87
|
+
this.value.set(query);
|
|
88
|
+
this.onChange(query);
|
|
89
|
+
this.valueChange.emit(query);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
selectOption(option) {
|
|
93
|
+
if (option.disabled) {
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
96
|
+
this.value.set(option.value);
|
|
97
|
+
this.text.set(option.label);
|
|
98
|
+
this.onChange(option.value);
|
|
99
|
+
this.valueChange.emit(option.value);
|
|
100
|
+
this.optionSelected.emit(option);
|
|
101
|
+
this.closePanel();
|
|
102
|
+
}
|
|
103
|
+
handleFocus(event) {
|
|
104
|
+
this.focused.emit(event);
|
|
105
|
+
if (this.text().length >= this.minLength()) {
|
|
106
|
+
this.panelVisible.set(true);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
handleBlur(event) {
|
|
110
|
+
this.onTouched();
|
|
111
|
+
this.blurred.emit(event);
|
|
112
|
+
/*
|
|
113
|
+
* Give an option click enough time to execute
|
|
114
|
+
* before closing the panel.
|
|
115
|
+
*/
|
|
116
|
+
setTimeout(() => {
|
|
117
|
+
if (this.forceSelection()) {
|
|
118
|
+
const selected = this.options().find(option => Object.is(option.value, this.value()));
|
|
119
|
+
if (selected) {
|
|
120
|
+
this.text.set(selected.label);
|
|
121
|
+
}
|
|
122
|
+
else {
|
|
123
|
+
this.text.set('');
|
|
124
|
+
this.value.set(undefined);
|
|
125
|
+
this.onChange(undefined);
|
|
126
|
+
this.valueChange.emit(undefined);
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
this.closePanel();
|
|
130
|
+
});
|
|
131
|
+
}
|
|
132
|
+
handleKeyDown(event) {
|
|
133
|
+
if (event.key === 'Escape') {
|
|
134
|
+
this.closePanel();
|
|
135
|
+
return;
|
|
136
|
+
}
|
|
137
|
+
const options = this.options();
|
|
138
|
+
if (event.key === 'ArrowDown') {
|
|
139
|
+
event.preventDefault();
|
|
140
|
+
this.panelVisible.set(true);
|
|
141
|
+
this.moveActive(1);
|
|
142
|
+
return;
|
|
143
|
+
}
|
|
144
|
+
if (event.key === 'ArrowUp') {
|
|
145
|
+
event.preventDefault();
|
|
146
|
+
this.moveActive(-1);
|
|
147
|
+
return;
|
|
148
|
+
}
|
|
149
|
+
if (event.key === 'Enter' &&
|
|
150
|
+
this.panelVisible()) {
|
|
151
|
+
const index = this.activeIndex();
|
|
152
|
+
if (index >= 0 &&
|
|
153
|
+
index < options.length) {
|
|
154
|
+
event.preventDefault();
|
|
155
|
+
this.selectOption(options[index]);
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
isSelected(option) {
|
|
160
|
+
return Object.is(option.value, this.value());
|
|
161
|
+
}
|
|
162
|
+
moveActive(direction) {
|
|
163
|
+
const options = this.options();
|
|
164
|
+
if (options.length === 0) {
|
|
165
|
+
this.activeIndex.set(-1);
|
|
166
|
+
return;
|
|
167
|
+
}
|
|
168
|
+
let index = this.activeIndex();
|
|
169
|
+
for (let attempt = 0; attempt < options.length; attempt++) {
|
|
170
|
+
index += direction;
|
|
171
|
+
if (index >= options.length) {
|
|
172
|
+
index = 0;
|
|
173
|
+
}
|
|
174
|
+
if (index < 0) {
|
|
175
|
+
index = options.length - 1;
|
|
176
|
+
}
|
|
177
|
+
if (!options[index].disabled) {
|
|
178
|
+
this.activeIndex.set(index);
|
|
179
|
+
return;
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
closePanel() {
|
|
184
|
+
this.panelVisible.set(false);
|
|
185
|
+
this.activeIndex.set(-1);
|
|
186
|
+
}
|
|
187
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
188
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SuiAutocomplete, isStandalone: true, selector: "sui-autocomplete", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", 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 }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, forceSelection: { classPropertyName: "forceSelection", publicName: "forceSelection", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", 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: { search: "search", valueChange: "valueChange", optionSelected: "optionSelected", focused: "focused", blurred: "blurred" }, providers: [
|
|
189
|
+
{
|
|
190
|
+
provide: NG_VALUE_ACCESSOR,
|
|
191
|
+
useExisting: forwardRef(() => SuiAutocomplete),
|
|
192
|
+
multi: true
|
|
193
|
+
}
|
|
194
|
+
], ngImport: i0, template: "<div\n class=\"sui-autocomplete\"\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\">\n\n <input\n class=\"sui-autocomplete-input\"\n\n type=\"text\"\n\n [id]=\"id()\"\n [name]=\"name() ?? ''\"\n\n [value]=\"text()\"\n\n [placeholder]=\"placeholder()\"\n\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n\n autocomplete=\"off\"\n\n role=\"combobox\"\n\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n [attr.aria-invalid]=\"ariaInvalid() ?? null\"\n\n [attr.aria-expanded]=\"panelVisible()\"\n aria-autocomplete=\"list\"\n\n (input)=\"handleInput($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"handleKeyDown($event)\"\n />\n\n</div>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"panelVisible()\"\n [cdkConnectedOverlayHasBackdrop]=\"false\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n [cdkConnectedOverlayPush]=\"true\">\n\n <div\n class=\"sui-autocomplete-panel\"\n role=\"listbox\">\n\n @for (\n option of options();\n track $index;\n let index = $index\n ) {\n\n <div\n class=\"sui-autocomplete-option\"\n\n [class.sui-autocomplete-option-active]=\"\n activeIndex() === index\n \"\n\n [class.sui-autocomplete-option-selected]=\"\n isSelected(option)\n \"\n\n [class.sui-autocomplete-option-disabled]=\"\n option.disabled\n \"\n\n role=\"option\"\n\n [attr.aria-selected]=\"\n isSelected(option)\n \"\n\n [attr.aria-disabled]=\"\n option.disabled ?? false\n \"\n\n (mousedown)=\"\n $event.preventDefault()\n \"\n\n (click)=\"\n selectOption(option)\n \">\n\n {{ option.label }}\n\n </div>\n\n }\n\n @if (showEmptyMessage()) {\n\n <div\n class=\"sui-autocomplete-empty\">\n {{ emptyMessage() }}\n </div>\n\n }\n\n </div>\n\n</ng-template>", styles: [":host{display:block;width:100%}.sui-autocomplete{display:block;width:100%}.sui-autocomplete-input{display:block;width:100%;min-height:var(--sui-autocomplete-height);box-sizing:border-box;padding:var(--sui-space-2) var(--sui-autocomplete-padding-x);font-family:inherit;font-size:var(--sui-control-font-size-md);line-height:1.25rem;color:var(--sui-autocomplete-text);background:var(--sui-autocomplete-background);border:var(--sui-autocomplete-border-width) solid var(--sui-autocomplete-border);border-radius:var(--sui-autocomplete-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-autocomplete-input::placeholder{color:var(--sui-autocomplete-placeholder)}.sui-autocomplete-input:hover:not(:disabled):not(:read-only){border-color:var(--sui-autocomplete-border-hover)}.sui-autocomplete-input:focus{border-color:var(--sui-autocomplete-border-focus);box-shadow:0 0 0 var(--sui-focus-ring-width) var(--sui-autocomplete-focus-color)}.sui-autocomplete-input:disabled{cursor:not-allowed;color:var(--sui-color-content-disabled);background:var(--sui-color-surface-alt)}.sui-autocomplete-input[aria-invalid=true]{border-color:var(--sui-color-danger)}.sui-autocomplete-panel{min-width:12rem;max-height:16rem;overflow-y:auto;box-sizing:border-box;padding:.25rem;color:var(--sui-autocomplete-option-text);background:var(--sui-autocomplete-panel-background);border:1px solid var(--sui-autocomplete-panel-border);border-radius:var(--sui-autocomplete-panel-radius);box-shadow:var(--sui-autocomplete-panel-shadow)}.sui-autocomplete-option{padding:.5rem .75rem;border-radius:.25rem;font-family:inherit;font-size:.875rem;cursor:pointer;-webkit-user-select:none;user-select:none}.sui-autocomplete-option:hover,.sui-autocomplete-option-active{background:var(--sui-autocomplete-option-background-hover)}.sui-autocomplete-option-selected{color:var(--sui-color-selection-text);background:var(--sui-autocomplete-option-background-active)}.sui-autocomplete-option-disabled{color:var(--sui-autocomplete-option-disabled-text);cursor:not-allowed;opacity:.65}.sui-autocomplete-empty{padding:.75rem;color:var(--sui-autocomplete-empty-text);font-family:inherit;font-size:.875rem;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
195
|
+
}
|
|
196
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiAutocomplete, decorators: [{
|
|
197
|
+
type: Component,
|
|
198
|
+
args: [{ selector: 'sui-autocomplete', standalone: true, imports: [
|
|
199
|
+
OverlayModule
|
|
200
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
201
|
+
{
|
|
202
|
+
provide: NG_VALUE_ACCESSOR,
|
|
203
|
+
useExisting: forwardRef(() => SuiAutocomplete),
|
|
204
|
+
multi: true
|
|
205
|
+
}
|
|
206
|
+
], template: "<div\n class=\"sui-autocomplete\"\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\">\n\n <input\n class=\"sui-autocomplete-input\"\n\n type=\"text\"\n\n [id]=\"id()\"\n [name]=\"name() ?? ''\"\n\n [value]=\"text()\"\n\n [placeholder]=\"placeholder()\"\n\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n\n autocomplete=\"off\"\n\n role=\"combobox\"\n\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n [attr.aria-invalid]=\"ariaInvalid() ?? null\"\n\n [attr.aria-expanded]=\"panelVisible()\"\n aria-autocomplete=\"list\"\n\n (input)=\"handleInput($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"handleKeyDown($event)\"\n />\n\n</div>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"panelVisible()\"\n [cdkConnectedOverlayHasBackdrop]=\"false\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n [cdkConnectedOverlayPush]=\"true\">\n\n <div\n class=\"sui-autocomplete-panel\"\n role=\"listbox\">\n\n @for (\n option of options();\n track $index;\n let index = $index\n ) {\n\n <div\n class=\"sui-autocomplete-option\"\n\n [class.sui-autocomplete-option-active]=\"\n activeIndex() === index\n \"\n\n [class.sui-autocomplete-option-selected]=\"\n isSelected(option)\n \"\n\n [class.sui-autocomplete-option-disabled]=\"\n option.disabled\n \"\n\n role=\"option\"\n\n [attr.aria-selected]=\"\n isSelected(option)\n \"\n\n [attr.aria-disabled]=\"\n option.disabled ?? false\n \"\n\n (mousedown)=\"\n $event.preventDefault()\n \"\n\n (click)=\"\n selectOption(option)\n \">\n\n {{ option.label }}\n\n </div>\n\n }\n\n @if (showEmptyMessage()) {\n\n <div\n class=\"sui-autocomplete-empty\">\n {{ emptyMessage() }}\n </div>\n\n }\n\n </div>\n\n</ng-template>", styles: [":host{display:block;width:100%}.sui-autocomplete{display:block;width:100%}.sui-autocomplete-input{display:block;width:100%;min-height:var(--sui-autocomplete-height);box-sizing:border-box;padding:var(--sui-space-2) var(--sui-autocomplete-padding-x);font-family:inherit;font-size:var(--sui-control-font-size-md);line-height:1.25rem;color:var(--sui-autocomplete-text);background:var(--sui-autocomplete-background);border:var(--sui-autocomplete-border-width) solid var(--sui-autocomplete-border);border-radius:var(--sui-autocomplete-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-autocomplete-input::placeholder{color:var(--sui-autocomplete-placeholder)}.sui-autocomplete-input:hover:not(:disabled):not(:read-only){border-color:var(--sui-autocomplete-border-hover)}.sui-autocomplete-input:focus{border-color:var(--sui-autocomplete-border-focus);box-shadow:0 0 0 var(--sui-focus-ring-width) var(--sui-autocomplete-focus-color)}.sui-autocomplete-input:disabled{cursor:not-allowed;color:var(--sui-color-content-disabled);background:var(--sui-color-surface-alt)}.sui-autocomplete-input[aria-invalid=true]{border-color:var(--sui-color-danger)}.sui-autocomplete-panel{min-width:12rem;max-height:16rem;overflow-y:auto;box-sizing:border-box;padding:.25rem;color:var(--sui-autocomplete-option-text);background:var(--sui-autocomplete-panel-background);border:1px solid var(--sui-autocomplete-panel-border);border-radius:var(--sui-autocomplete-panel-radius);box-shadow:var(--sui-autocomplete-panel-shadow)}.sui-autocomplete-option{padding:.5rem .75rem;border-radius:.25rem;font-family:inherit;font-size:.875rem;cursor:pointer;-webkit-user-select:none;user-select:none}.sui-autocomplete-option:hover,.sui-autocomplete-option-active{background:var(--sui-autocomplete-option-background-hover)}.sui-autocomplete-option-selected{color:var(--sui-color-selection-text);background:var(--sui-autocomplete-option-background-active)}.sui-autocomplete-option-disabled{color:var(--sui-autocomplete-option-disabled-text);cursor:not-allowed;opacity:.65}.sui-autocomplete-empty{padding:.75rem;color:var(--sui-autocomplete-empty-text);font-family:inherit;font-size:.875rem;text-align:center}\n"] }]
|
|
207
|
+
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", 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 }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], forceSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceSelection", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", 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 }] }], search: [{ type: i0.Output, args: ["search"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
|
|
208
|
+
|
|
209
|
+
/**
|
|
210
|
+
* Generated bundle index. Do not edit.
|
|
211
|
+
*/
|
|
212
|
+
|
|
213
|
+
export { SuiAutocomplete };
|
|
214
|
+
//# sourceMappingURL=saitec-ui-autocomplete.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"saitec-ui-autocomplete.mjs","sources":["../../../projects/ui/autocomplete/src/autocomplete.component.ts","../../../projects/ui/autocomplete/src/autocomplete.component.html","../../../projects/ui/autocomplete/src/saitec-ui-autocomplete.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\nimport {\n OverlayModule\n} from '@angular/cdk/overlay';\n\nimport {\n SuiOption\n} from '@saitec/ui/core';\n\nlet nextAutocompleteId = 0;\n\n@Component({\n selector: 'sui-autocomplete',\n standalone: true,\n imports: [\n OverlayModule\n ],\n templateUrl: './autocomplete.component.html',\n styleUrl: './autocomplete.component.css',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SuiAutocomplete),\n multi: true\n }\n ]\n})\nexport class SuiAutocomplete implements ControlValueAccessor {\n\n id = input(`sui-autocomplete-${++nextAutocompleteId}`);\n\n name = input<string>();\n\n options = input<SuiOption[]>([]);\n\n placeholder = input('');\n\n disabled = input(false);\n\n readonly = input(false);\n\n required = input(false);\n\n minLength = input(1);\n\n forceSelection = input(false);\n\n emptyMessage = input('No results found');\n\n ariaLabel = input<string>();\n\n ariaDescribedBy = input<string>();\n\n ariaInvalid = input<boolean>();\n\n search = output<string>();\n\n valueChange = output<unknown>();\n\n optionSelected = output<SuiOption>();\n\n focused = output<FocusEvent>();\n\n blurred = output<FocusEvent>();\n\n protected readonly text = signal('');\n\n protected readonly value = signal<unknown>(undefined);\n\n protected readonly panelVisible = signal(false);\n\n protected readonly activeIndex = signal(-1);\n\n private readonly formDisabled = signal(false);\n\n protected readonly isDisabled = computed(\n () => this.disabled() || this.formDisabled()\n );\n\n protected readonly hasOptions = computed(\n () => this.options().length > 0\n );\n\n protected readonly showEmptyMessage = computed(\n () =>\n this.panelVisible() &&\n this.text().length >= this.minLength() &&\n this.options().length === 0\n );\n\n private onChange: (value: unknown) => void = () => {};\n\n private onTouched: () => void = () => {};\n\n writeValue(value: unknown): void {\n this.value.set(value);\n\n const option = this.options().find(\n item => Object.is(item.value, value)\n );\n\n this.text.set(\n option?.label ?? ''\n );\n }\n\n registerOnChange(\n fn: (value: unknown) => void\n ): void {\n this.onChange = fn;\n }\n\n registerOnTouched(\n fn: () => void\n ): void {\n this.onTouched = fn;\n }\n\n setDisabledState(disabled: boolean): void {\n this.formDisabled.set(disabled);\n }\n\n protected handleInput(event: Event): void {\n const element =\n event.target as HTMLInputElement;\n\n const query = element.value;\n\n this.text.set(query);\n this.activeIndex.set(-1);\n\n if (query.length >= this.minLength()) {\n this.panelVisible.set(true);\n this.search.emit(query);\n }\n else {\n this.panelVisible.set(false);\n }\n\n if (!this.forceSelection()) {\n this.value.set(query);\n\n this.onChange(query);\n this.valueChange.emit(query);\n }\n }\n\n protected selectOption(\n option: SuiOption\n ): void {\n\n if (option.disabled) {\n return;\n }\n\n this.value.set(option.value);\n this.text.set(option.label);\n\n this.onChange(option.value);\n\n this.valueChange.emit(option.value);\n this.optionSelected.emit(option);\n\n this.closePanel();\n }\n\n protected handleFocus(\n event: FocusEvent\n ): void {\n\n this.focused.emit(event);\n\n if (\n this.text().length >= this.minLength()\n ) {\n this.panelVisible.set(true);\n }\n }\n\n protected handleBlur(\n event: FocusEvent\n ): void {\n\n this.onTouched();\n this.blurred.emit(event);\n\n /*\n * Give an option click enough time to execute\n * before closing the panel.\n */\n setTimeout(() => {\n\n if (this.forceSelection()) {\n\n const selected =\n this.options().find(\n option =>\n Object.is(\n option.value,\n this.value()\n )\n );\n\n if (selected) {\n this.text.set(selected.label);\n }\n else {\n this.text.set('');\n this.value.set(undefined);\n\n this.onChange(undefined);\n this.valueChange.emit(undefined);\n }\n }\n\n this.closePanel();\n\n });\n }\n\n protected handleKeyDown(\n event: KeyboardEvent\n ): void {\n\n if (event.key === 'Escape') {\n this.closePanel();\n return;\n }\n\n const options =\n this.options();\n\n if (\n event.key === 'ArrowDown'\n ) {\n event.preventDefault();\n\n this.panelVisible.set(true);\n\n this.moveActive(1);\n\n return;\n }\n\n if (\n event.key === 'ArrowUp'\n ) {\n event.preventDefault();\n\n this.moveActive(-1);\n\n return;\n }\n\n if (\n event.key === 'Enter' &&\n this.panelVisible()\n ) {\n\n const index =\n this.activeIndex();\n\n if (\n index >= 0 &&\n index < options.length\n ) {\n event.preventDefault();\n\n this.selectOption(\n options[index]\n );\n }\n }\n }\n\n protected isSelected(\n option: SuiOption\n ): boolean {\n return Object.is(\n option.value,\n this.value()\n );\n }\n\n private moveActive(\n direction: number\n ): void {\n\n const options =\n this.options();\n\n if (options.length === 0) {\n this.activeIndex.set(-1);\n return;\n }\n\n let index =\n this.activeIndex();\n\n for (\n let attempt = 0;\n attempt < options.length;\n attempt++\n ) {\n\n index += direction;\n\n if (index >= options.length) {\n index = 0;\n }\n\n if (index < 0) {\n index = options.length - 1;\n }\n\n if (!options[index].disabled) {\n this.activeIndex.set(index);\n return;\n }\n }\n }\n\n private closePanel(): void {\n this.panelVisible.set(false);\n this.activeIndex.set(-1);\n }\n}","<div\n class=\"sui-autocomplete\"\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\">\n\n <input\n class=\"sui-autocomplete-input\"\n\n type=\"text\"\n\n [id]=\"id()\"\n [name]=\"name() ?? ''\"\n\n [value]=\"text()\"\n\n [placeholder]=\"placeholder()\"\n\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n\n autocomplete=\"off\"\n\n role=\"combobox\"\n\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n [attr.aria-invalid]=\"ariaInvalid() ?? null\"\n\n [attr.aria-expanded]=\"panelVisible()\"\n aria-autocomplete=\"list\"\n\n (input)=\"handleInput($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"handleKeyDown($event)\"\n />\n\n</div>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"panelVisible()\"\n [cdkConnectedOverlayHasBackdrop]=\"false\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n [cdkConnectedOverlayPush]=\"true\">\n\n <div\n class=\"sui-autocomplete-panel\"\n role=\"listbox\">\n\n @for (\n option of options();\n track $index;\n let index = $index\n ) {\n\n <div\n class=\"sui-autocomplete-option\"\n\n [class.sui-autocomplete-option-active]=\"\n activeIndex() === index\n \"\n\n [class.sui-autocomplete-option-selected]=\"\n isSelected(option)\n \"\n\n [class.sui-autocomplete-option-disabled]=\"\n option.disabled\n \"\n\n role=\"option\"\n\n [attr.aria-selected]=\"\n isSelected(option)\n \"\n\n [attr.aria-disabled]=\"\n option.disabled ?? false\n \"\n\n (mousedown)=\"\n $event.preventDefault()\n \"\n\n (click)=\"\n selectOption(option)\n \">\n\n {{ option.label }}\n\n </div>\n\n }\n\n @if (showEmptyMessage()) {\n\n <div\n class=\"sui-autocomplete-empty\">\n {{ emptyMessage() }}\n </div>\n\n }\n\n </div>\n\n</ng-template>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
|
|
4
|
+
class SuiBadge {
|
|
5
|
+
value = input(/* @ts-ignore */
|
|
6
|
+
...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
|
|
7
|
+
severity = input('primary', /* @ts-ignore */
|
|
8
|
+
...(ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []));
|
|
9
|
+
size = input('medium', /* @ts-ignore */
|
|
10
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
11
|
+
rounded = input(true, /* @ts-ignore */
|
|
12
|
+
...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
|
|
13
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: SuiBadge, isStandalone: true, selector: "sui-badge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span\n class=\"sui-badge\"\n [class.sui-badge-primary]=\"severity() === 'primary'\"\n [class.sui-badge-secondary]=\"severity() === 'secondary'\"\n [class.sui-badge-success]=\"severity() === 'success'\"\n [class.sui-badge-info]=\"severity() === 'info'\"\n [class.sui-badge-warning]=\"severity() === 'warning'\"\n [class.sui-badge-danger]=\"severity() === 'danger'\"\n\n [class.sui-badge-small]=\"size() === 'small'\"\n [class.sui-badge-medium]=\"size() === 'medium'\"\n [class.sui-badge-large]=\"size() === 'large'\"\n\n [class.sui-badge-rounded]=\"rounded()\">\n {{ value() }}\n</span>", styles: [":host{display:inline-flex}.sui-badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;height:1.5rem;padding-inline:var(--sui-badge-padding-x-md);box-sizing:border-box;font-family:inherit;font-size:var(--sui-badge-font-size-md);font-weight:var(--sui-badge-font-weight);line-height:1;white-space:nowrap}.sui-badge-rounded{border-radius:var(--sui-badge-radius)}.sui-badge-small{min-width:1.25rem;height:1.25rem;padding-inline:var(--sui-badge-padding-x-sm);font-size:var(--sui-badge-font-size-sm)}.sui-badge-medium{min-width:1.5rem;height:1.5rem;font-size:var(--sui-badge-font-size-md)}.sui-badge-large{min-width:1.75rem;height:1.75rem;padding-inline:var(--sui-badge-padding-x-lg);font-size:var(--sui-badge-font-size-lg)}.sui-badge-primary{color:var(--sui-badge-primary-text);background:var(--sui-badge-primary-background)}.sui-badge-secondary{color:var(--sui-badge-secondary-text);background:var(--sui-badge-secondary-background)}.sui-badge-success{color:var(--sui-badge-success-text);background:var(--sui-badge-success-background)}.sui-badge-info{color:var(--sui-badge-info-text);background:var(--sui-badge-info-background)}.sui-badge-warning{color:var(--sui-badge-warning-text);background:var(--sui-badge-warning-background)}.sui-badge-danger{color:var(--sui-badge-danger-text);background:var(--sui-badge-danger-background)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
15
|
+
}
|
|
16
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiBadge, decorators: [{
|
|
17
|
+
type: Component,
|
|
18
|
+
args: [{ selector: 'sui-badge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n class=\"sui-badge\"\n [class.sui-badge-primary]=\"severity() === 'primary'\"\n [class.sui-badge-secondary]=\"severity() === 'secondary'\"\n [class.sui-badge-success]=\"severity() === 'success'\"\n [class.sui-badge-info]=\"severity() === 'info'\"\n [class.sui-badge-warning]=\"severity() === 'warning'\"\n [class.sui-badge-danger]=\"severity() === 'danger'\"\n\n [class.sui-badge-small]=\"size() === 'small'\"\n [class.sui-badge-medium]=\"size() === 'medium'\"\n [class.sui-badge-large]=\"size() === 'large'\"\n\n [class.sui-badge-rounded]=\"rounded()\">\n {{ value() }}\n</span>", styles: [":host{display:inline-flex}.sui-badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;height:1.5rem;padding-inline:var(--sui-badge-padding-x-md);box-sizing:border-box;font-family:inherit;font-size:var(--sui-badge-font-size-md);font-weight:var(--sui-badge-font-weight);line-height:1;white-space:nowrap}.sui-badge-rounded{border-radius:var(--sui-badge-radius)}.sui-badge-small{min-width:1.25rem;height:1.25rem;padding-inline:var(--sui-badge-padding-x-sm);font-size:var(--sui-badge-font-size-sm)}.sui-badge-medium{min-width:1.5rem;height:1.5rem;font-size:var(--sui-badge-font-size-md)}.sui-badge-large{min-width:1.75rem;height:1.75rem;padding-inline:var(--sui-badge-padding-x-lg);font-size:var(--sui-badge-font-size-lg)}.sui-badge-primary{color:var(--sui-badge-primary-text);background:var(--sui-badge-primary-background)}.sui-badge-secondary{color:var(--sui-badge-secondary-text);background:var(--sui-badge-secondary-background)}.sui-badge-success{color:var(--sui-badge-success-text);background:var(--sui-badge-success-background)}.sui-badge-info{color:var(--sui-badge-info-text);background:var(--sui-badge-info-background)}.sui-badge-warning{color:var(--sui-badge-warning-text);background:var(--sui-badge-warning-background)}.sui-badge-danger{color:var(--sui-badge-danger-text);background:var(--sui-badge-danger-background)}\n"] }]
|
|
19
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }] } });
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* Generated bundle index. Do not edit.
|
|
23
|
+
*/
|
|
24
|
+
|
|
25
|
+
export { SuiBadge };
|
|
26
|
+
//# sourceMappingURL=saitec-ui-badge.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"saitec-ui-badge.mjs","sources":["../../../projects/ui/badge/src/badge.component.ts","../../../projects/ui/badge/src/badge.component.html","../../../projects/ui/badge/src/saitec-ui-badge.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n input\n} from '@angular/core';\n\nexport type SuiBadgeSeverity =\n | 'primary'\n | 'secondary'\n | 'success'\n | 'info'\n | 'warning'\n | 'danger';\n\nexport type SuiBadgeSize =\n | 'small'\n | 'medium'\n | 'large';\n\n@Component({\n selector: 'sui-badge',\n standalone: true,\n templateUrl: './badge.component.html',\n styleUrl: './badge.component.css',\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SuiBadge {\n\n value = input<string | number>();\n\n severity = input<SuiBadgeSeverity>('primary');\n\n size = input<SuiBadgeSize>('medium');\n\n rounded = input(true);\n}","<span\n class=\"sui-badge\"\n [class.sui-badge-primary]=\"severity() === 'primary'\"\n [class.sui-badge-secondary]=\"severity() === 'secondary'\"\n [class.sui-badge-success]=\"severity() === 'success'\"\n [class.sui-badge-info]=\"severity() === 'info'\"\n [class.sui-badge-warning]=\"severity() === 'warning'\"\n [class.sui-badge-danger]=\"severity() === 'danger'\"\n\n [class.sui-badge-small]=\"size() === 'small'\"\n [class.sui-badge-medium]=\"size() === 'medium'\"\n [class.sui-badge-large]=\"size() === 'large'\"\n\n [class.sui-badge-rounded]=\"rounded()\">\n {{ value() }}\n</span>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;MA0Ba,QAAQ,CAAA;AAEjB,IAAA,KAAK,GAAG,KAAK;yFAAmB;IAEhC,QAAQ,GAAG,KAAK,CAAmB,SAAS;iFAAC;IAE7C,IAAI,GAAG,KAAK,CAAe,QAAQ;6EAAC;IAEpC,OAAO,GAAG,KAAK,CAAC,IAAI;gFAAC;uGARZ,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAR,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,QAAQ,6jBC1BrB,gnBAeO,EAAA,MAAA,EAAA,CAAA,60CAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDWM,QAAQ,EAAA,UAAA,EAAA,CAAA;kBAPpB,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,EAAA,UAAA,EACT,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,gnBAAA,EAAA,MAAA,EAAA,CAAA,60CAAA,CAAA,EAAA;;;AExBnD;;AAEG;;;;"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, booleanAttribute, computed, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
|
|
4
|
+
class SuiButton {
|
|
5
|
+
variant = input('primary', /* @ts-ignore */
|
|
6
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
7
|
+
severity = input('primary', /* @ts-ignore */
|
|
8
|
+
...(ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []));
|
|
9
|
+
size = input('md', /* @ts-ignore */
|
|
10
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
11
|
+
type = input('button', /* @ts-ignore */
|
|
12
|
+
...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
13
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
14
|
+
loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
15
|
+
fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
16
|
+
ariaLabel = input(null, /* @ts-ignore */
|
|
17
|
+
...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
18
|
+
isDisabled = computed(() => this.disabled() || this.loading(), /* @ts-ignore */
|
|
19
|
+
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
20
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
21
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SuiButton, isStandalone: true, selector: "sui-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.sui-button-host--full-width": "fullWidth()" } }, ngImport: i0, template: "<button\r\n class=\"sui-button\"\r\n\r\n [class.sui-button--primary]=\"severity() === 'primary'\"\r\n [class.sui-button--secondary]=\"severity() === 'secondary'\"\r\n [class.sui-button--success]=\"severity() === 'success'\"\r\n [class.sui-button--info]=\"severity() === 'info'\"\r\n [class.sui-button--warning]=\"severity() === 'warning'\"\r\n [class.sui-button--danger]=\"severity() === 'danger'\"\r\n [class.sui-button--ghost]=\"severity() === 'ghost'\"\r\n\r\n [class.sui-button--xs]=\"size() === 'xs'\"\r\n [class.sui-button--sm]=\"size() === 'sm'\"\r\n [class.sui-button--md]=\"size() === 'md'\"\r\n [class.sui-button--lg]=\"size() === 'lg'\"\r\n [class.sui-button--xl]=\"size() === 'xl'\"\r\n\r\n [class.sui-button--full-width]=\"fullWidth()\"\r\n [class.sui-button--loading]=\"loading()\"\r\n\r\n [type]=\"type()\"\r\n [disabled]=\"isDisabled()\"\r\n\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [attr.aria-busy]=\"loading() ? 'true' : null\"\r\n>\r\n @if (loading()) {\r\n <span\r\n class=\"sui-button__spinner\"\r\n aria-hidden=\"true\">\r\n </span>\r\n }\r\n\r\n <span class=\"sui-button__content\">\r\n <ng-content />\r\n </span>\r\n</button>", styles: [":host{display:inline-block}:host(.sui-button-host--full-width){display:block;width:100%}.sui-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--sui-button-gap);box-sizing:border-box;margin:0;border-style:solid;border-width:var(--sui-button-border-width);border-radius:var(--sui-button-radius);font-family:inherit;font-weight:var(--sui-button-font-weight);line-height:1;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--sui-duration-normal) var(--sui-easing-standard),border-color var(--sui-duration-normal) var(--sui-easing-standard),color var(--sui-duration-normal) var(--sui-easing-standard),box-shadow var(--sui-duration-normal) var(--sui-easing-standard),opacity var(--sui-duration-normal) var(--sui-easing-standard)}.sui-button--xs{height:var(--sui-button-height-xs);padding-inline:var(--sui-button-padding-x-xs);font-size:var(--sui-control-font-size-xs)}.sui-button--sm{height:var(--sui-button-height-sm);padding-inline:var(--sui-button-padding-x-sm);font-size:var(--sui-control-font-size-sm)}.sui-button--md{height:var(--sui-button-height-md);padding-inline:var(--sui-button-padding-x-md);font-size:var(--sui-control-font-size-md)}.sui-button--lg{height:var(--sui-button-height-lg);padding-inline:var(--sui-button-padding-x-lg);font-size:var(--sui-control-font-size-lg)}.sui-button--xl{height:var(--sui-button-height-xl);padding-inline:var(--sui-button-padding-x-xl);font-size:var(--sui-control-font-size-xl)}.sui-button--primary{background-color:var(--sui-button-primary-background);border-color:var(--sui-button-primary-border);color:var(--sui-button-primary-text)}.sui-button--primary:hover:not(:disabled){background-color:var(--sui-button-primary-background-hover);border-color:var(--sui-button-primary-border-hover)}.sui-button--primary:active:not(:disabled){background-color:var(--sui-button-primary-background-active);border-color:var(--sui-button-primary-border-active)}.sui-button--secondary{background-color:var(--sui-button-secondary-background);border-color:var(--sui-button-secondary-border);color:var(--sui-button-secondary-text)}.sui-button--secondary:hover:not(:disabled){background-color:var(--sui-button-secondary-background-hover);border-color:var(--sui-button-secondary-border-hover)}.sui-button--secondary:active:not(:disabled){background-color:var(--sui-button-secondary-background-active);border-color:var(--sui-button-secondary-border-active)}.sui-button--success{background-color:var(--sui-button-success-background);border-color:var(--sui-button-success-border);color:var(--sui-button-success-text)}.sui-button--success:hover:not(:disabled){background-color:var(--sui-button-success-background-hover);border-color:var(--sui-button-success-border-hover)}.sui-button--success:active:not(:disabled){background-color:var(--sui-button-success-background-active);border-color:var(--sui-button-success-border-active)}.sui-button--info{background-color:var(--sui-button-info-background);border-color:var(--sui-button-info-border);color:var(--sui-button-info-text)}.sui-button--info:hover:not(:disabled){background-color:var(--sui-button-info-background-hover);border-color:var(--sui-button-info-border-hover)}.sui-button--info:active:not(:disabled){background-color:var(--sui-button-info-background-active);border-color:var(--sui-button-info-border-active)}.sui-button--warning{background-color:var(--sui-button-warning-background);border-color:var(--sui-button-warning-border);color:var(--sui-button-warning-text)}.sui-button--warning:hover:not(:disabled){background-color:var(--sui-button-warning-background-hover);border-color:var(--sui-button-warning-border-hover)}.sui-button--warning:active:not(:disabled){background-color:var(--sui-button-warning-background-active);border-color:var(--sui-button-warning-border-active)}.sui-button--danger{background-color:var(--sui-button-danger-background);border-color:var(--sui-button-danger-border);color:var(--sui-button-danger-text)}.sui-button--danger:hover:not(:disabled){background-color:var(--sui-button-danger-background-hover);border-color:var(--sui-button-danger-border-hover)}.sui-button--danger:active:not(:disabled){background-color:var(--sui-button-danger-background-active);border-color:var(--sui-button-danger-border-active)}.sui-button--ghost{background-color:var(--sui-button-ghost-background);border-color:var(--sui-button-ghost-border);color:var(--sui-button-ghost-text)}.sui-button--ghost:hover:not(:disabled){background-color:var(--sui-button-ghost-background-hover)}.sui-button--ghost:active:not(:disabled){background-color:var(--sui-button-ghost-background-active)}.sui-button:focus-visible{outline:var(--sui-focus-ring-width) solid var(--sui-button-focus-color);outline-offset:var(--sui-focus-ring-offset)}.sui-button:disabled{opacity:var(--sui-button-disabled-opacity);cursor:not-allowed}.sui-button--full-width{width:100%}.sui-button__content{display:inline-flex;align-items:center;justify-content:center}.sui-button__spinner{width:1em;height:1em;flex:0 0 auto;border:var(--sui-button-spinner-border-width) solid currentColor;border-right-color:transparent;border-radius:50%;animation:sui-button-spin var(--sui-button-spinner-duration) linear infinite}@keyframes sui-button-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.sui-button{transition:none}.sui-button__spinner{animation-duration:1.2s}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
22
|
+
}
|
|
23
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiButton, decorators: [{
|
|
24
|
+
type: Component,
|
|
25
|
+
args: [{ selector: 'sui-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
26
|
+
'[class.sui-button-host--full-width]': 'fullWidth()'
|
|
27
|
+
}, template: "<button\r\n class=\"sui-button\"\r\n\r\n [class.sui-button--primary]=\"severity() === 'primary'\"\r\n [class.sui-button--secondary]=\"severity() === 'secondary'\"\r\n [class.sui-button--success]=\"severity() === 'success'\"\r\n [class.sui-button--info]=\"severity() === 'info'\"\r\n [class.sui-button--warning]=\"severity() === 'warning'\"\r\n [class.sui-button--danger]=\"severity() === 'danger'\"\r\n [class.sui-button--ghost]=\"severity() === 'ghost'\"\r\n\r\n [class.sui-button--xs]=\"size() === 'xs'\"\r\n [class.sui-button--sm]=\"size() === 'sm'\"\r\n [class.sui-button--md]=\"size() === 'md'\"\r\n [class.sui-button--lg]=\"size() === 'lg'\"\r\n [class.sui-button--xl]=\"size() === 'xl'\"\r\n\r\n [class.sui-button--full-width]=\"fullWidth()\"\r\n [class.sui-button--loading]=\"loading()\"\r\n\r\n [type]=\"type()\"\r\n [disabled]=\"isDisabled()\"\r\n\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [attr.aria-busy]=\"loading() ? 'true' : null\"\r\n>\r\n @if (loading()) {\r\n <span\r\n class=\"sui-button__spinner\"\r\n aria-hidden=\"true\">\r\n </span>\r\n }\r\n\r\n <span class=\"sui-button__content\">\r\n <ng-content />\r\n </span>\r\n</button>", styles: [":host{display:inline-block}:host(.sui-button-host--full-width){display:block;width:100%}.sui-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--sui-button-gap);box-sizing:border-box;margin:0;border-style:solid;border-width:var(--sui-button-border-width);border-radius:var(--sui-button-radius);font-family:inherit;font-weight:var(--sui-button-font-weight);line-height:1;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--sui-duration-normal) var(--sui-easing-standard),border-color var(--sui-duration-normal) var(--sui-easing-standard),color var(--sui-duration-normal) var(--sui-easing-standard),box-shadow var(--sui-duration-normal) var(--sui-easing-standard),opacity var(--sui-duration-normal) var(--sui-easing-standard)}.sui-button--xs{height:var(--sui-button-height-xs);padding-inline:var(--sui-button-padding-x-xs);font-size:var(--sui-control-font-size-xs)}.sui-button--sm{height:var(--sui-button-height-sm);padding-inline:var(--sui-button-padding-x-sm);font-size:var(--sui-control-font-size-sm)}.sui-button--md{height:var(--sui-button-height-md);padding-inline:var(--sui-button-padding-x-md);font-size:var(--sui-control-font-size-md)}.sui-button--lg{height:var(--sui-button-height-lg);padding-inline:var(--sui-button-padding-x-lg);font-size:var(--sui-control-font-size-lg)}.sui-button--xl{height:var(--sui-button-height-xl);padding-inline:var(--sui-button-padding-x-xl);font-size:var(--sui-control-font-size-xl)}.sui-button--primary{background-color:var(--sui-button-primary-background);border-color:var(--sui-button-primary-border);color:var(--sui-button-primary-text)}.sui-button--primary:hover:not(:disabled){background-color:var(--sui-button-primary-background-hover);border-color:var(--sui-button-primary-border-hover)}.sui-button--primary:active:not(:disabled){background-color:var(--sui-button-primary-background-active);border-color:var(--sui-button-primary-border-active)}.sui-button--secondary{background-color:var(--sui-button-secondary-background);border-color:var(--sui-button-secondary-border);color:var(--sui-button-secondary-text)}.sui-button--secondary:hover:not(:disabled){background-color:var(--sui-button-secondary-background-hover);border-color:var(--sui-button-secondary-border-hover)}.sui-button--secondary:active:not(:disabled){background-color:var(--sui-button-secondary-background-active);border-color:var(--sui-button-secondary-border-active)}.sui-button--success{background-color:var(--sui-button-success-background);border-color:var(--sui-button-success-border);color:var(--sui-button-success-text)}.sui-button--success:hover:not(:disabled){background-color:var(--sui-button-success-background-hover);border-color:var(--sui-button-success-border-hover)}.sui-button--success:active:not(:disabled){background-color:var(--sui-button-success-background-active);border-color:var(--sui-button-success-border-active)}.sui-button--info{background-color:var(--sui-button-info-background);border-color:var(--sui-button-info-border);color:var(--sui-button-info-text)}.sui-button--info:hover:not(:disabled){background-color:var(--sui-button-info-background-hover);border-color:var(--sui-button-info-border-hover)}.sui-button--info:active:not(:disabled){background-color:var(--sui-button-info-background-active);border-color:var(--sui-button-info-border-active)}.sui-button--warning{background-color:var(--sui-button-warning-background);border-color:var(--sui-button-warning-border);color:var(--sui-button-warning-text)}.sui-button--warning:hover:not(:disabled){background-color:var(--sui-button-warning-background-hover);border-color:var(--sui-button-warning-border-hover)}.sui-button--warning:active:not(:disabled){background-color:var(--sui-button-warning-background-active);border-color:var(--sui-button-warning-border-active)}.sui-button--danger{background-color:var(--sui-button-danger-background);border-color:var(--sui-button-danger-border);color:var(--sui-button-danger-text)}.sui-button--danger:hover:not(:disabled){background-color:var(--sui-button-danger-background-hover);border-color:var(--sui-button-danger-border-hover)}.sui-button--danger:active:not(:disabled){background-color:var(--sui-button-danger-background-active);border-color:var(--sui-button-danger-border-active)}.sui-button--ghost{background-color:var(--sui-button-ghost-background);border-color:var(--sui-button-ghost-border);color:var(--sui-button-ghost-text)}.sui-button--ghost:hover:not(:disabled){background-color:var(--sui-button-ghost-background-hover)}.sui-button--ghost:active:not(:disabled){background-color:var(--sui-button-ghost-background-active)}.sui-button:focus-visible{outline:var(--sui-focus-ring-width) solid var(--sui-button-focus-color);outline-offset:var(--sui-focus-ring-offset)}.sui-button:disabled{opacity:var(--sui-button-disabled-opacity);cursor:not-allowed}.sui-button--full-width{width:100%}.sui-button__content{display:inline-flex;align-items:center;justify-content:center}.sui-button__spinner{width:1em;height:1em;flex:0 0 auto;border:var(--sui-button-spinner-border-width) solid currentColor;border-right-color:transparent;border-radius:50%;animation:sui-button-spin var(--sui-button-spinner-duration) linear infinite}@keyframes sui-button-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.sui-button{transition:none}.sui-button__spinner{animation-duration:1.2s}}\n"] }]
|
|
28
|
+
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
* Generated bundle index. Do not edit.
|
|
32
|
+
*/
|
|
33
|
+
|
|
34
|
+
export { SuiButton };
|
|
35
|
+
//# sourceMappingURL=saitec-ui-button.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"saitec-ui-button.mjs","sources":["../../../projects/ui/button/src/button.component.ts","../../../projects/ui/button/src/button.component.html","../../../projects/ui/button/src/saitec-ui-button.ts"],"sourcesContent":["import {\r\n booleanAttribute,\r\n ChangeDetectionStrategy,\r\n Component,\r\n computed,\r\n input\r\n} from '@angular/core';\r\n\r\nexport type SuiButtonVariant =\r\n | 'primary'\r\n | 'secondary'\r\n | 'danger'\r\n | 'ghost';\r\n\r\nexport type SuiButtonSeverity =\r\n | 'primary'\r\n | 'secondary'\r\n | 'success'\r\n | 'info'\r\n | 'warning'\r\n | 'danger'\r\n | 'ghost';\r\n\r\nexport type SuiButtonSize =\r\n | 'xs'\r\n | 'sm'\r\n | 'md'\r\n | 'lg'\r\n | 'xl';\r\n\r\nexport type SuiButtonType =\r\n | 'button'\r\n | 'submit'\r\n | 'reset';\r\n\r\n@Component({\r\n selector: 'sui-button',\r\n standalone: true,\r\n templateUrl: './button.component.html',\r\n styleUrl: './button.component.css',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n host: {\r\n '[class.sui-button-host--full-width]': 'fullWidth()'\r\n }\r\n})\r\nexport class SuiButton {\r\n readonly variant = input<SuiButtonVariant>('primary');\r\n readonly severity = input<SuiButtonSeverity>('primary');\r\n\r\n readonly size = input<SuiButtonSize>('md');\r\n\r\n readonly type = input<SuiButtonType>('button');\r\n\r\n readonly disabled = input(false, {\r\n transform: booleanAttribute\r\n });\r\n\r\n readonly loading = input(false, {\r\n transform: booleanAttribute\r\n });\r\n\r\n readonly fullWidth = input(false, {\r\n transform: booleanAttribute\r\n });\r\n\r\n readonly ariaLabel = input<string | null>(null);\r\n\r\n readonly isDisabled = computed(\r\n () => this.disabled() || this.loading()\r\n );\r\n}","<button\r\n class=\"sui-button\"\r\n\r\n [class.sui-button--primary]=\"severity() === 'primary'\"\r\n [class.sui-button--secondary]=\"severity() === 'secondary'\"\r\n [class.sui-button--success]=\"severity() === 'success'\"\r\n [class.sui-button--info]=\"severity() === 'info'\"\r\n [class.sui-button--warning]=\"severity() === 'warning'\"\r\n [class.sui-button--danger]=\"severity() === 'danger'\"\r\n [class.sui-button--ghost]=\"severity() === 'ghost'\"\r\n\r\n [class.sui-button--xs]=\"size() === 'xs'\"\r\n [class.sui-button--sm]=\"size() === 'sm'\"\r\n [class.sui-button--md]=\"size() === 'md'\"\r\n [class.sui-button--lg]=\"size() === 'lg'\"\r\n [class.sui-button--xl]=\"size() === 'xl'\"\r\n\r\n [class.sui-button--full-width]=\"fullWidth()\"\r\n [class.sui-button--loading]=\"loading()\"\r\n\r\n [type]=\"type()\"\r\n [disabled]=\"isDisabled()\"\r\n\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [attr.aria-busy]=\"loading() ? 'true' : null\"\r\n>\r\n @if (loading()) {\r\n <span\r\n class=\"sui-button__spinner\"\r\n aria-hidden=\"true\">\r\n </span>\r\n }\r\n\r\n <span class=\"sui-button__content\">\r\n <ng-content />\r\n </span>\r\n</button>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;MA6Ca,SAAS,CAAA;IACT,OAAO,GAAG,KAAK,CAAmB,SAAS;gFAAC;IAC5C,QAAQ,GAAG,KAAK,CAAoB,SAAS;iFAAC;IAE9C,IAAI,GAAG,KAAK,CAAgB,IAAI;6EAAC;IAEjC,IAAI,GAAG,KAAK,CAAgB,QAAQ;6EAAC;IAErC,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAC3B,SAAS,EAAE,gBAAgB,EAAA,CAC7B;IAEO,OAAO,GAAG,KAAK,CAAC,KAAK,+EAC1B,SAAS,EAAE,gBAAgB,EAAA,CAC7B;IAEO,SAAS,GAAG,KAAK,CAAC,KAAK,iFAC5B,SAAS,EAAE,gBAAgB,EAAA,CAC7B;IAEO,SAAS,GAAG,KAAK,CAAgB,IAAI;kFAAC;AAEtC,IAAA,UAAU,GAAG,QAAQ,CAC1B,MAAM,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,OAAO,EAAE;mFAC1C;uGAxBQ,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAT,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,SAAS,gpCC7CtB,gvCAoCS,EAAA,MAAA,EAAA,CAAA,6wKAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDSI,SAAS,EAAA,UAAA,EAAA,CAAA;kBAVrB,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,cACV,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACF,wBAAA,qCAAqC,EAAE;AAC1C,qBAAA,EAAA,QAAA,EAAA,gvCAAA,EAAA,MAAA,EAAA,CAAA,6wKAAA,CAAA,EAAA;;;AE3CL;;AAEG;;;;"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
|
|
4
|
+
class SuiCard {
|
|
5
|
+
title = input(/* @ts-ignore */
|
|
6
|
+
...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
|
|
7
|
+
subtitle = input(/* @ts-ignore */
|
|
8
|
+
...(ngDevMode ? [undefined, { debugName: "subtitle" }] : /* istanbul ignore next */ []));
|
|
9
|
+
padding = input(true, /* @ts-ignore */
|
|
10
|
+
...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
|
|
11
|
+
bordered = input(true, /* @ts-ignore */
|
|
12
|
+
...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
|
|
13
|
+
shadow = input(true, /* @ts-ignore */
|
|
14
|
+
...(ngDevMode ? [{ debugName: "shadow" }] : /* istanbul ignore next */ []));
|
|
15
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
16
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SuiCard, isStandalone: true, selector: "sui-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section\n class=\"sui-card\"\n [class.sui-card-bordered]=\"bordered()\"\n [class.sui-card-shadow]=\"shadow()\">\n\n @if (title() || subtitle()) {\n <header class=\"sui-card-header\">\n\n @if (title()) {\n <div class=\"sui-card-title\">\n {{ title() }}\n </div>\n }\n\n @if (subtitle()) {\n <div class=\"sui-card-subtitle\">\n {{ subtitle() }}\n </div>\n }\n\n </header>\n }\n\n <ng-content select=\"[suiCardHeader]\" />\n\n <div\n class=\"sui-card-content\"\n [class.sui-card-content-padding]=\"padding()\">\n\n <ng-content />\n\n </div>\n\n <ng-content select=\"[suiCardFooter]\" />\n\n</section>", styles: [":host{display:block}.sui-card{overflow:hidden;color:var(--sui-card-text);background:var(--sui-card-background);border-radius:var(--sui-card-radius)}.sui-card-bordered{border:var(--sui-card-border-width) solid var(--sui-card-border)}.sui-card-shadow{box-shadow:var(--sui-card-shadow)}.sui-card-header{padding:var(--sui-card-padding) var(--sui-card-padding) 0}.sui-card-title{font-family:inherit;font-size:var(--sui-control-font-size-lg);font-weight:var(--sui-card-title-font-weight);line-height:1.5rem;color:var(--sui-card-title-text)}.sui-card-subtitle{margin-top:var(--sui-space-1);font-family:inherit;font-size:var(--sui-control-font-size-sm);line-height:1.25rem;color:var(--sui-card-subtitle-text)}.sui-card-content{display:block}.sui-card-content-padding{padding:var(--sui-card-padding)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
17
|
+
}
|
|
18
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SuiCard, decorators: [{
|
|
19
|
+
type: Component,
|
|
20
|
+
args: [{ selector: 'sui-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n class=\"sui-card\"\n [class.sui-card-bordered]=\"bordered()\"\n [class.sui-card-shadow]=\"shadow()\">\n\n @if (title() || subtitle()) {\n <header class=\"sui-card-header\">\n\n @if (title()) {\n <div class=\"sui-card-title\">\n {{ title() }}\n </div>\n }\n\n @if (subtitle()) {\n <div class=\"sui-card-subtitle\">\n {{ subtitle() }}\n </div>\n }\n\n </header>\n }\n\n <ng-content select=\"[suiCardHeader]\" />\n\n <div\n class=\"sui-card-content\"\n [class.sui-card-content-padding]=\"padding()\">\n\n <ng-content />\n\n </div>\n\n <ng-content select=\"[suiCardFooter]\" />\n\n</section>", styles: [":host{display:block}.sui-card{overflow:hidden;color:var(--sui-card-text);background:var(--sui-card-background);border-radius:var(--sui-card-radius)}.sui-card-bordered{border:var(--sui-card-border-width) solid var(--sui-card-border)}.sui-card-shadow{box-shadow:var(--sui-card-shadow)}.sui-card-header{padding:var(--sui-card-padding) var(--sui-card-padding) 0}.sui-card-title{font-family:inherit;font-size:var(--sui-control-font-size-lg);font-weight:var(--sui-card-title-font-weight);line-height:1.5rem;color:var(--sui-card-title-text)}.sui-card-subtitle{margin-top:var(--sui-space-1);font-family:inherit;font-size:var(--sui-control-font-size-sm);line-height:1.25rem;color:var(--sui-card-subtitle-text)}.sui-card-content{display:block}.sui-card-content-padding{padding:var(--sui-card-padding)}\n"] }]
|
|
21
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }] } });
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* Generated bundle index. Do not edit.
|
|
25
|
+
*/
|
|
26
|
+
|
|
27
|
+
export { SuiCard };
|
|
28
|
+
//# sourceMappingURL=saitec-ui-card.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"saitec-ui-card.mjs","sources":["../../../projects/ui/card/src/card.component.ts","../../../projects/ui/card/src/card.component.html","../../../projects/ui/card/src/saitec-ui-card.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n input\n} from '@angular/core';\n\n@Component({\n selector: 'sui-card',\n standalone: true,\n templateUrl: './card.component.html',\n styleUrl: './card.component.css',\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SuiCard {\n\n title = input<string>();\n\n subtitle = input<string>();\n\n padding = input(true);\n\n bordered = input(true);\n\n shadow = input(true);\n}","<section\n class=\"sui-card\"\n [class.sui-card-bordered]=\"bordered()\"\n [class.sui-card-shadow]=\"shadow()\">\n\n @if (title() || subtitle()) {\n <header class=\"sui-card-header\">\n\n @if (title()) {\n <div class=\"sui-card-title\">\n {{ title() }}\n </div>\n }\n\n @if (subtitle()) {\n <div class=\"sui-card-subtitle\">\n {{ subtitle() }}\n </div>\n }\n\n </header>\n }\n\n <ng-content select=\"[suiCardHeader]\" />\n\n <div\n class=\"sui-card-content\"\n [class.sui-card-content-padding]=\"padding()\">\n\n <ng-content />\n\n </div>\n\n <ng-content select=\"[suiCardFooter]\" />\n\n</section>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;MAaa,OAAO,CAAA;AAEhB,IAAA,KAAK,GAAG,KAAK;yFAAU;AAEvB,IAAA,QAAQ,GAAG,KAAK;4FAAU;IAE1B,OAAO,GAAG,KAAK,CAAC,IAAI;gFAAC;IAErB,QAAQ,GAAG,KAAK,CAAC,IAAI;iFAAC;IAEtB,MAAM,GAAG,KAAK,CAAC,IAAI;+EAAC;uGAVX,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,msBCbpB,oyBAmCU,EAAA,MAAA,EAAA,CAAA,2xBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDtBG,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,oyBAAA,EAAA,MAAA,EAAA,CAAA,2xBAAA,CAAA,EAAA;;;AEXnD;;AAEG;;;;"}
|