uisuite 1.0.0 → 1.0.2
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 +15 -143
- package/esm2022/lib/button/button.component.mjs +19 -5
- package/fesm2022/uisuite.mjs +18 -4
- package/fesm2022/uisuite.mjs.map +1 -1
- package/lib/button/button.component.d.ts +13 -1
- package/package.json +1 -1
- package/uisuite-1.0.0.tgz +0 -0
package/README.md
CHANGED
|
@@ -26,15 +26,14 @@ UIsuite uses standalone components, so you can import them directly:
|
|
|
26
26
|
|
|
27
27
|
```typescript
|
|
28
28
|
import { Component } from '@angular/core';
|
|
29
|
-
import {
|
|
29
|
+
import { ButtonComponent } from 'uisuite';
|
|
30
30
|
|
|
31
31
|
@Component({
|
|
32
32
|
selector: 'app-root',
|
|
33
33
|
standalone: true,
|
|
34
|
-
imports: [
|
|
34
|
+
imports: [ButtonComponent],
|
|
35
35
|
template: `
|
|
36
|
-
<
|
|
37
|
-
<ui-input placeholder="Enter text"></ui-input>
|
|
36
|
+
<uButton variant="primary">Click Me</uButton>
|
|
38
37
|
`
|
|
39
38
|
})
|
|
40
39
|
export class AppComponent {}
|
|
@@ -66,13 +65,13 @@ Or import in your `angular.json`:
|
|
|
66
65
|
Versatile button component with multiple variants and sizes.
|
|
67
66
|
|
|
68
67
|
```html
|
|
69
|
-
<
|
|
70
|
-
<
|
|
71
|
-
<
|
|
72
|
-
<
|
|
73
|
-
<
|
|
74
|
-
<
|
|
75
|
-
<
|
|
68
|
+
<uButton variant="primary" size="medium">Primary Button</uButton>
|
|
69
|
+
<uButton variant="secondary">Secondary Button</uButton>
|
|
70
|
+
<uButton variant="outline">Outline Button</uButton>
|
|
71
|
+
<uButton variant="ghost">Ghost Button</uButton>
|
|
72
|
+
<uButton variant="danger">Danger Button</uButton>
|
|
73
|
+
<uButton [loading]="true">Loading...</uButton>
|
|
74
|
+
<uButton [disabled]="true">Disabled</uButton>
|
|
76
75
|
```
|
|
77
76
|
|
|
78
77
|
**Props:**
|
|
@@ -82,144 +81,17 @@ Versatile button component with multiple variants and sizes.
|
|
|
82
81
|
- `loading`: boolean
|
|
83
82
|
- `fullWidth`: boolean
|
|
84
83
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
Form input with validation states and character counting.
|
|
88
|
-
|
|
89
|
-
```html
|
|
90
|
-
<ui-input
|
|
91
|
-
type="email"
|
|
92
|
-
placeholder="Enter email"
|
|
93
|
-
[formControl]="emailControl"
|
|
94
|
-
></ui-input>
|
|
95
|
-
|
|
96
|
-
<ui-input
|
|
97
|
-
placeholder="With character limit"
|
|
98
|
-
[maxLength]="100"
|
|
99
|
-
[showCharCount]="true"
|
|
100
|
-
></ui-input>
|
|
101
|
-
```
|
|
102
|
-
|
|
103
|
-
**Props:**
|
|
104
|
-
- `type`: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search'
|
|
105
|
-
- `size`: 'small' | 'medium' | 'large'
|
|
106
|
-
- `placeholder`: string
|
|
107
|
-
- `disabled`: boolean
|
|
108
|
-
- `readonly`: boolean
|
|
109
|
-
- `required`: boolean
|
|
110
|
-
- `invalid`: boolean
|
|
111
|
-
- `maxLength`: number
|
|
112
|
-
- `showCharCount`: boolean
|
|
113
|
-
|
|
114
|
-
### Checkbox
|
|
115
|
-
|
|
116
|
-
Checkbox with indeterminate state support.
|
|
117
|
-
|
|
118
|
-
```html
|
|
119
|
-
<ui-checkbox label="Accept terms"></ui-checkbox>
|
|
120
|
-
<ui-checkbox [formControl]="agreeControl">I agree</ui-checkbox>
|
|
121
|
-
<ui-checkbox [indeterminate]="true"></ui-checkbox>
|
|
122
|
-
```
|
|
123
|
-
|
|
124
|
-
**Props:**
|
|
125
|
-
- `label`: string
|
|
126
|
-
- `disabled`: boolean
|
|
127
|
-
- `indeterminate`: boolean
|
|
128
|
-
|
|
129
|
-
### Modal
|
|
130
|
-
|
|
131
|
-
Flexible modal/dialog component.
|
|
132
|
-
|
|
133
|
-
```html
|
|
134
|
-
<ui-modal
|
|
135
|
-
[(isOpen)]="showModal"
|
|
136
|
-
title="Confirm Action"
|
|
137
|
-
size="medium"
|
|
138
|
-
[showFooter]="true"
|
|
139
|
-
>
|
|
140
|
-
<p>Are you sure you want to proceed?</p>
|
|
141
|
-
|
|
142
|
-
<div modal-footer>
|
|
143
|
-
<ui-button variant="ghost" (click)="showModal = false">Cancel</ui-button>
|
|
144
|
-
<ui-button variant="primary" (click)="confirm()">Confirm</ui-button>
|
|
145
|
-
</div>
|
|
146
|
-
</ui-modal>
|
|
147
|
-
```
|
|
148
|
-
|
|
149
|
-
**Props:**
|
|
150
|
-
- `isOpen`: boolean
|
|
151
|
-
- `title`: string
|
|
152
|
-
- `size`: 'small' | 'medium' | 'large' | 'fullscreen'
|
|
153
|
-
- `showHeader`: boolean
|
|
154
|
-
- `showFooter`: boolean
|
|
155
|
-
- `showCloseButton`: boolean
|
|
156
|
-
- `closeOnBackdropClick`: boolean
|
|
157
|
-
- `closeOnEscape`: boolean
|
|
158
|
-
|
|
159
|
-
**Events:**
|
|
160
|
-
- `(closed)`: Emitted when modal closes
|
|
161
|
-
- `(opened)`: Emitted when modal opens
|
|
162
|
-
|
|
163
|
-
## 🎨 Theming
|
|
164
|
-
|
|
165
|
-
UIsuite uses CSS custom properties for easy customization. Override these variables in your global stylesheet:
|
|
166
|
-
|
|
167
|
-
```css
|
|
168
|
-
:root {
|
|
169
|
-
/* Primary colors */
|
|
170
|
-
--ui-color-primary-600: #your-brand-color;
|
|
171
|
-
--ui-color-primary-700: #your-brand-color-dark;
|
|
172
|
-
|
|
173
|
-
/* Spacing */
|
|
174
|
-
--ui-spacing-4: 1rem;
|
|
175
|
-
|
|
176
|
-
/* Border radius */
|
|
177
|
-
--ui-radius-md: 0.5rem;
|
|
178
|
-
|
|
179
|
-
/* Typography */
|
|
180
|
-
--ui-font-family-base: 'Your Font', sans-serif;
|
|
181
|
-
}
|
|
182
|
-
```
|
|
183
|
-
|
|
184
|
-
## 🔧 Reactive Forms Integration
|
|
185
|
-
|
|
186
|
-
All form components implement `ControlValueAccessor` for seamless integration with Angular reactive forms:
|
|
187
|
-
|
|
188
|
-
```typescript
|
|
189
|
-
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
|
190
|
-
import { UiInputComponent, UiCheckboxComponent } from 'uisuite';
|
|
191
|
-
|
|
192
|
-
@Component({
|
|
193
|
-
selector: 'app-form',
|
|
194
|
-
standalone: true,
|
|
195
|
-
imports: [ReactiveFormsModule, UiInputComponent, UiCheckboxComponent],
|
|
196
|
-
template: `
|
|
197
|
-
<form [formGroup]="form">
|
|
198
|
-
<ui-input formControlName="email" type="email"></ui-input>
|
|
199
|
-
<ui-checkbox formControlName="agree"></ui-checkbox>
|
|
200
|
-
</form>
|
|
201
|
-
`
|
|
202
|
-
})
|
|
203
|
-
export class FormComponent {
|
|
204
|
-
form = new FormGroup({
|
|
205
|
-
email: new FormControl(''),
|
|
206
|
-
agree: new FormControl(false)
|
|
207
|
-
});
|
|
208
|
-
}
|
|
209
|
-
```
|
|
84
|
+
|
|
210
85
|
|
|
211
86
|
## 📖 Documentation
|
|
212
87
|
|
|
213
|
-
For detailed documentation and examples, visit [
|
|
88
|
+
For detailed documentation and examples, visit [https://github.com/ksindhi/uisuite](https://github.com/ksindhi/uisuite)
|
|
214
89
|
|
|
215
90
|
## 🤝 Contributing
|
|
216
91
|
|
|
217
92
|
Contributions are welcome! Please feel free to submit a Pull Request.
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
MIT © [Your Name]
|
|
222
|
-
|
|
93
|
+
visit [https://github.com/ksindhi/uisuite](https://github.com/ksindhi/uisuite)
|
|
94
|
+
|
|
223
95
|
## 🙏 Support
|
|
224
96
|
|
|
225
|
-
If you like this project, please give it a ⭐ on [GitHub](https://github.com/
|
|
97
|
+
If you like this project, please give it a ⭐ on [GitHub](https://github.com/ksindhi/uisuite)!
|
|
@@ -46,15 +46,27 @@ export class ButtonComponent {
|
|
|
46
46
|
* ARIA label for accessibility
|
|
47
47
|
*/
|
|
48
48
|
ariaLabel;
|
|
49
|
+
/**
|
|
50
|
+
* Button color
|
|
51
|
+
* - primary: Primary brand color (default)
|
|
52
|
+
* - success: Green color for success actions
|
|
53
|
+
* - warning: Yellow/amber color for warnings
|
|
54
|
+
* - danger: Red color for dangerous actions
|
|
55
|
+
* - accent: Accent color for highlights
|
|
56
|
+
* - white: White color for dark backgrounds
|
|
57
|
+
* - info: Blue color for informational actions
|
|
58
|
+
*/
|
|
59
|
+
color = 'primary';
|
|
49
60
|
get buttonClasses() {
|
|
50
61
|
return [
|
|
51
62
|
'u-button',
|
|
52
63
|
`u-button--${this.variant}`,
|
|
53
|
-
`u-button--${this.size}
|
|
64
|
+
`u-button--${this.size}`,
|
|
65
|
+
`u-button--color-${this.color}`
|
|
54
66
|
].filter(Boolean).join(' ');
|
|
55
67
|
}
|
|
56
68
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
57
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ButtonComponent, isStandalone: true, selector: "uButton", inputs: { variant: "variant", size: "size", type: "type", disabled: "disabled", ariaLabel: "ariaLabel" }, ngImport: i0, template: `
|
|
69
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ButtonComponent, isStandalone: true, selector: "uButton", inputs: { variant: "variant", size: "size", type: "type", disabled: "disabled", ariaLabel: "ariaLabel", color: "color" }, ngImport: i0, template: `
|
|
58
70
|
<button
|
|
59
71
|
[type]="type"
|
|
60
72
|
[disabled]="disabled"
|
|
@@ -63,7 +75,7 @@ export class ButtonComponent {
|
|
|
63
75
|
>
|
|
64
76
|
<ng-content></ng-content>
|
|
65
77
|
</button>
|
|
66
|
-
`, isInline: true, styles: [".u-button{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:.375rem;font-size:.875rem;font-weight:500;transition:all .15s ease;cursor:pointer;border:1px solid transparent;outline:none}.u-button:focus-visible{outline:2px solid
|
|
78
|
+
`, isInline: true, styles: [".u-button{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:.375rem;font-size:.875rem;font-weight:500;transition:all .15s ease;cursor:pointer;border:1px solid transparent;outline:none}.u-button:focus-visible{outline:2px solid var(--uicolor-slate-400);outline-offset:2px}.u-button:disabled{pointer-events:none;opacity:.5}.u-button--default{height:2.5rem;padding:.5rem 1rem}.u-button--sm{height:2.25rem;padding:.5rem .75rem;font-size:.813rem}.u-button--lg{height:2.75rem;padding:.5rem 2rem}.u-button--icon{height:2.5rem;width:2.5rem;padding:0}.u-button--icon-sm{height:2.25rem;width:2.25rem;padding:0}.u-button--icon-lg{height:2.75rem;width:2.75rem;padding:0}.u-button--default{background-color:var(--uicolor-slate-900);color:#fff}.u-button--default:hover:not(:disabled){background-color:var(--uicolor-slate-800)}.u-button--default:active:not(:disabled){background-color:var(--uicolor-slate-700)}.u-button--outline{background-color:#fff;border-color:var(--uicolor-slate-300);color:var(--uicolor-slate-900)}.u-button--outline:hover:not(:disabled){background-color:var(--uicolor-slate-100)}.u-button--outline:active:not(:disabled){background-color:var(--uicolor-slate-200)}.u-button--ghost{background-color:transparent;border-color:transparent;color:inherit}.u-button--ghost:hover:not(:disabled){background-color:transparent}.u-button--ghost:active:not(:disabled){background-color:transparent}.u-button--destructive{background-color:var(--uicolor-danger-600);color:#fff}.u-button--destructive:hover:not(:disabled){background-color:var(--uicolor-danger-700)}.u-button--destructive:active:not(:disabled){background-color:var(--uicolor-danger-800)}.u-button--secondary{background-color:var(--uicolor-slate-100);color:var(--uicolor-slate-900)}.u-button--secondary:hover:not(:disabled){background-color:var(--uicolor-slate-200)}.u-button--secondary:active:not(:disabled){background-color:var(--uicolor-slate-300)}.u-button--link{background:unset!important;border:unset!important;color:var(--uicolor-primary-600);text-decoration:underline;text-underline-offset:4px;padding:0;height:auto}.u-button--link:hover:not(:disabled){text-decoration:none;color:var(--uicolor-primary-700)}.u-button--link:active:not(:disabled){color:var(--uicolor-primary-800)}.u-button--color-primary.u-button--default{background-color:var(--uicolor-primary-600);color:#fff}.u-button--color-primary.u-button--default:hover:not(:disabled){background-color:var(--uicolor-primary-700)}.u-button--color-primary.u-button--default:active:not(:disabled){background-color:var(--uicolor-primary-800)}.u-button--color-primary.u-button--outline{background-color:#fff;border-color:var(--uicolor-primary-600);color:var(--uicolor-primary-600)}.u-button--color-primary.u-button--outline:hover:not(:disabled){background-color:var(--uicolor-primary-100)}.u-button--color-primary.u-button--outline:active:not(:disabled){background-color:var(--uicolor-primary-200)}.u-button--color-primary.u-button--ghost{background-color:transparent;border-color:transparent;color:var(--uicolor-primary-600)}.u-button--color-primary.u-button--ghost:hover:not(:disabled){background-color:transparent}.u-button--color-primary.u-button--ghost:active:not(:disabled){background-color:transparent}.u-button--color-success.u-button--default{background-color:var(--uicolor-success-600);color:#fff}.u-button--color-success.u-button--default:hover:not(:disabled){background-color:var(--uicolor-success-700)}.u-button--color-success.u-button--default:active:not(:disabled){background-color:var(--uicolor-success-800)}.u-button--color-success.u-button--outline{background-color:#fff;border-color:var(--uicolor-success-600);color:var(--uicolor-success-600)}.u-button--color-success.u-button--outline:hover:not(:disabled){background-color:var(--uicolor-success-100)}.u-button--color-success.u-button--outline:active:not(:disabled){background-color:var(--uicolor-success-200)}.u-button--color-success.u-button--ghost{background-color:transparent;border-color:transparent;color:var(--uicolor-success-600)}.u-button--color-success.u-button--ghost:hover:not(:disabled){background-color:transparent}.u-button--color-success.u-button--ghost:active:not(:disabled){background-color:transparent}.u-button--color-warning.u-button--default{background-color:var(--uicolor-warning-500);color:var(--uicolor-slate-900)}.u-button--color-warning.u-button--default:hover:not(:disabled){background-color:var(--uicolor-warning-600)}.u-button--color-warning.u-button--default:active:not(:disabled){background-color:var(--uicolor-warning-700)}.u-button--color-warning.u-button--outline{background-color:#fff;border-color:var(--uicolor-warning-700);color:var(--uicolor-warning-700)}.u-button--color-warning.u-button--outline:hover:not(:disabled){background-color:var(--uicolor-warning-100)}.u-button--color-warning.u-button--outline:active:not(:disabled){background-color:var(--uicolor-warning-200)}.u-button--color-warning.u-button--ghost{background-color:transparent;border-color:transparent;color:var(--uicolor-warning-700)}.u-button--color-warning.u-button--ghost:hover:not(:disabled){background-color:transparent}.u-button--color-warning.u-button--ghost:active:not(:disabled){background-color:transparent}.u-button--color-danger.u-button--default{background-color:var(--uicolor-danger-600);color:#fff}.u-button--color-danger.u-button--default:hover:not(:disabled){background-color:var(--uicolor-danger-700)}.u-button--color-danger.u-button--default:active:not(:disabled){background-color:var(--uicolor-danger-800)}.u-button--color-danger.u-button--outline{background-color:#fff;border-color:var(--uicolor-danger-600);color:var(--uicolor-danger-600)}.u-button--color-danger.u-button--outline:hover:not(:disabled){background-color:var(--uicolor-danger-100)}.u-button--color-danger.u-button--outline:active:not(:disabled){background-color:var(--uicolor-danger-200)}.u-button--color-danger.u-button--ghost{background-color:transparent;border-color:transparent;color:var(--uicolor-danger-600)}.u-button--color-danger.u-button--ghost:hover:not(:disabled){background-color:transparent}.u-button--color-danger.u-button--ghost:active:not(:disabled){background-color:transparent}.u-button--color-accent.u-button--default{background-color:var(--uicolor-accent-600);color:#fff}.u-button--color-accent.u-button--default:hover:not(:disabled){background-color:var(--uicolor-accent-700)}.u-button--color-accent.u-button--default:active:not(:disabled){background-color:var(--uicolor-accent-800)}.u-button--color-accent.u-button--outline{background-color:#fff;border-color:var(--uicolor-accent-600);color:var(--uicolor-accent-600)}.u-button--color-accent.u-button--outline:hover:not(:disabled){background-color:var(--uicolor-accent-100)}.u-button--color-accent.u-button--outline:active:not(:disabled){background-color:var(--uicolor-accent-200)}.u-button--color-accent.u-button--ghost{background-color:transparent;border-color:transparent;color:var(--uicolor-accent-600)}.u-button--color-accent.u-button--ghost:hover:not(:disabled){background-color:transparent}.u-button--color-accent.u-button--ghost:active:not(:disabled){background-color:transparent}.u-button--color-white.u-button--default{background-color:#fff;color:var(--uicolor-slate-900);border-color:var(--uicolor-slate-300)}.u-button--color-white.u-button--default:hover:not(:disabled){background-color:var(--uicolor-slate-100)}.u-button--color-white.u-button--default:active:not(:disabled){background-color:var(--uicolor-slate-200)}.u-button--color-white.u-button--outline{background-color:#fff;border-color:#fff;color:var(--uicolor-slate-900)}.u-button--color-white.u-button--outline:hover:not(:disabled){background-color:var(--uicolor-slate-100)}.u-button--color-white.u-button--outline:active:not(:disabled){background-color:var(--uicolor-slate-200)}.u-button--color-info.u-button--default{background-color:var(--uicolor-primary-600);color:#fff}.u-button--color-info.u-button--default:hover:not(:disabled){background-color:var(--uicolor-primary-700)}.u-button--color-info.u-button--default:active:not(:disabled){background-color:var(--uicolor-primary-800)}.u-button--color-info.u-button--outline{background-color:#fff;border-color:var(--uicolor-primary-600);color:var(--uicolor-primary-600)}.u-button--color-info.u-button--outline:hover:not(:disabled){background-color:var(--uicolor-primary-100)}.u-button--color-info.u-button--outline:active:not(:disabled){background-color:var(--uicolor-primary-200)}.u-button--color-info.u-button--ghost{background-color:transparent;border-color:transparent;color:var(--uicolor-primary-600)}.u-button--color-info.u-button--ghost:hover:not(:disabled){background-color:transparent}.u-button--color-info.u-button--ghost:active:not(:disabled){background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
67
79
|
}
|
|
68
80
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
69
81
|
type: Component,
|
|
@@ -76,7 +88,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
76
88
|
>
|
|
77
89
|
<ng-content></ng-content>
|
|
78
90
|
</button>
|
|
79
|
-
`, styles: [".u-button{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:.375rem;font-size:.875rem;font-weight:500;transition:all .15s ease;cursor:pointer;border:1px solid transparent;outline:none}.u-button:focus-visible{outline:2px solid
|
|
91
|
+
`, styles: [".u-button{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:.375rem;font-size:.875rem;font-weight:500;transition:all .15s ease;cursor:pointer;border:1px solid transparent;outline:none}.u-button:focus-visible{outline:2px solid var(--uicolor-slate-400);outline-offset:2px}.u-button:disabled{pointer-events:none;opacity:.5}.u-button--default{height:2.5rem;padding:.5rem 1rem}.u-button--sm{height:2.25rem;padding:.5rem .75rem;font-size:.813rem}.u-button--lg{height:2.75rem;padding:.5rem 2rem}.u-button--icon{height:2.5rem;width:2.5rem;padding:0}.u-button--icon-sm{height:2.25rem;width:2.25rem;padding:0}.u-button--icon-lg{height:2.75rem;width:2.75rem;padding:0}.u-button--default{background-color:var(--uicolor-slate-900);color:#fff}.u-button--default:hover:not(:disabled){background-color:var(--uicolor-slate-800)}.u-button--default:active:not(:disabled){background-color:var(--uicolor-slate-700)}.u-button--outline{background-color:#fff;border-color:var(--uicolor-slate-300);color:var(--uicolor-slate-900)}.u-button--outline:hover:not(:disabled){background-color:var(--uicolor-slate-100)}.u-button--outline:active:not(:disabled){background-color:var(--uicolor-slate-200)}.u-button--ghost{background-color:transparent;border-color:transparent;color:inherit}.u-button--ghost:hover:not(:disabled){background-color:transparent}.u-button--ghost:active:not(:disabled){background-color:transparent}.u-button--destructive{background-color:var(--uicolor-danger-600);color:#fff}.u-button--destructive:hover:not(:disabled){background-color:var(--uicolor-danger-700)}.u-button--destructive:active:not(:disabled){background-color:var(--uicolor-danger-800)}.u-button--secondary{background-color:var(--uicolor-slate-100);color:var(--uicolor-slate-900)}.u-button--secondary:hover:not(:disabled){background-color:var(--uicolor-slate-200)}.u-button--secondary:active:not(:disabled){background-color:var(--uicolor-slate-300)}.u-button--link{background:unset!important;border:unset!important;color:var(--uicolor-primary-600);text-decoration:underline;text-underline-offset:4px;padding:0;height:auto}.u-button--link:hover:not(:disabled){text-decoration:none;color:var(--uicolor-primary-700)}.u-button--link:active:not(:disabled){color:var(--uicolor-primary-800)}.u-button--color-primary.u-button--default{background-color:var(--uicolor-primary-600);color:#fff}.u-button--color-primary.u-button--default:hover:not(:disabled){background-color:var(--uicolor-primary-700)}.u-button--color-primary.u-button--default:active:not(:disabled){background-color:var(--uicolor-primary-800)}.u-button--color-primary.u-button--outline{background-color:#fff;border-color:var(--uicolor-primary-600);color:var(--uicolor-primary-600)}.u-button--color-primary.u-button--outline:hover:not(:disabled){background-color:var(--uicolor-primary-100)}.u-button--color-primary.u-button--outline:active:not(:disabled){background-color:var(--uicolor-primary-200)}.u-button--color-primary.u-button--ghost{background-color:transparent;border-color:transparent;color:var(--uicolor-primary-600)}.u-button--color-primary.u-button--ghost:hover:not(:disabled){background-color:transparent}.u-button--color-primary.u-button--ghost:active:not(:disabled){background-color:transparent}.u-button--color-success.u-button--default{background-color:var(--uicolor-success-600);color:#fff}.u-button--color-success.u-button--default:hover:not(:disabled){background-color:var(--uicolor-success-700)}.u-button--color-success.u-button--default:active:not(:disabled){background-color:var(--uicolor-success-800)}.u-button--color-success.u-button--outline{background-color:#fff;border-color:var(--uicolor-success-600);color:var(--uicolor-success-600)}.u-button--color-success.u-button--outline:hover:not(:disabled){background-color:var(--uicolor-success-100)}.u-button--color-success.u-button--outline:active:not(:disabled){background-color:var(--uicolor-success-200)}.u-button--color-success.u-button--ghost{background-color:transparent;border-color:transparent;color:var(--uicolor-success-600)}.u-button--color-success.u-button--ghost:hover:not(:disabled){background-color:transparent}.u-button--color-success.u-button--ghost:active:not(:disabled){background-color:transparent}.u-button--color-warning.u-button--default{background-color:var(--uicolor-warning-500);color:var(--uicolor-slate-900)}.u-button--color-warning.u-button--default:hover:not(:disabled){background-color:var(--uicolor-warning-600)}.u-button--color-warning.u-button--default:active:not(:disabled){background-color:var(--uicolor-warning-700)}.u-button--color-warning.u-button--outline{background-color:#fff;border-color:var(--uicolor-warning-700);color:var(--uicolor-warning-700)}.u-button--color-warning.u-button--outline:hover:not(:disabled){background-color:var(--uicolor-warning-100)}.u-button--color-warning.u-button--outline:active:not(:disabled){background-color:var(--uicolor-warning-200)}.u-button--color-warning.u-button--ghost{background-color:transparent;border-color:transparent;color:var(--uicolor-warning-700)}.u-button--color-warning.u-button--ghost:hover:not(:disabled){background-color:transparent}.u-button--color-warning.u-button--ghost:active:not(:disabled){background-color:transparent}.u-button--color-danger.u-button--default{background-color:var(--uicolor-danger-600);color:#fff}.u-button--color-danger.u-button--default:hover:not(:disabled){background-color:var(--uicolor-danger-700)}.u-button--color-danger.u-button--default:active:not(:disabled){background-color:var(--uicolor-danger-800)}.u-button--color-danger.u-button--outline{background-color:#fff;border-color:var(--uicolor-danger-600);color:var(--uicolor-danger-600)}.u-button--color-danger.u-button--outline:hover:not(:disabled){background-color:var(--uicolor-danger-100)}.u-button--color-danger.u-button--outline:active:not(:disabled){background-color:var(--uicolor-danger-200)}.u-button--color-danger.u-button--ghost{background-color:transparent;border-color:transparent;color:var(--uicolor-danger-600)}.u-button--color-danger.u-button--ghost:hover:not(:disabled){background-color:transparent}.u-button--color-danger.u-button--ghost:active:not(:disabled){background-color:transparent}.u-button--color-accent.u-button--default{background-color:var(--uicolor-accent-600);color:#fff}.u-button--color-accent.u-button--default:hover:not(:disabled){background-color:var(--uicolor-accent-700)}.u-button--color-accent.u-button--default:active:not(:disabled){background-color:var(--uicolor-accent-800)}.u-button--color-accent.u-button--outline{background-color:#fff;border-color:var(--uicolor-accent-600);color:var(--uicolor-accent-600)}.u-button--color-accent.u-button--outline:hover:not(:disabled){background-color:var(--uicolor-accent-100)}.u-button--color-accent.u-button--outline:active:not(:disabled){background-color:var(--uicolor-accent-200)}.u-button--color-accent.u-button--ghost{background-color:transparent;border-color:transparent;color:var(--uicolor-accent-600)}.u-button--color-accent.u-button--ghost:hover:not(:disabled){background-color:transparent}.u-button--color-accent.u-button--ghost:active:not(:disabled){background-color:transparent}.u-button--color-white.u-button--default{background-color:#fff;color:var(--uicolor-slate-900);border-color:var(--uicolor-slate-300)}.u-button--color-white.u-button--default:hover:not(:disabled){background-color:var(--uicolor-slate-100)}.u-button--color-white.u-button--default:active:not(:disabled){background-color:var(--uicolor-slate-200)}.u-button--color-white.u-button--outline{background-color:#fff;border-color:#fff;color:var(--uicolor-slate-900)}.u-button--color-white.u-button--outline:hover:not(:disabled){background-color:var(--uicolor-slate-100)}.u-button--color-white.u-button--outline:active:not(:disabled){background-color:var(--uicolor-slate-200)}.u-button--color-info.u-button--default{background-color:var(--uicolor-primary-600);color:#fff}.u-button--color-info.u-button--default:hover:not(:disabled){background-color:var(--uicolor-primary-700)}.u-button--color-info.u-button--default:active:not(:disabled){background-color:var(--uicolor-primary-800)}.u-button--color-info.u-button--outline{background-color:#fff;border-color:var(--uicolor-primary-600);color:var(--uicolor-primary-600)}.u-button--color-info.u-button--outline:hover:not(:disabled){background-color:var(--uicolor-primary-100)}.u-button--color-info.u-button--outline:active:not(:disabled){background-color:var(--uicolor-primary-200)}.u-button--color-info.u-button--ghost{background-color:transparent;border-color:transparent;color:var(--uicolor-primary-600)}.u-button--color-info.u-button--ghost:hover:not(:disabled){background-color:transparent}.u-button--color-info.u-button--ghost:active:not(:disabled){background-color:transparent}\n"] }]
|
|
80
92
|
}], propDecorators: { variant: [{
|
|
81
93
|
type: Input
|
|
82
94
|
}], size: [{
|
|
@@ -87,5 +99,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
87
99
|
type: Input
|
|
88
100
|
}], ariaLabel: [{
|
|
89
101
|
type: Input
|
|
102
|
+
}], color: [{
|
|
103
|
+
type: Input
|
|
90
104
|
}] } });
|
|
91
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
105
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Vpc3VpdGUvc3JjL2xpYi9idXR0b24vYnV0dG9uLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBZSxNQUFNLGVBQWUsQ0FBQztBQUM5RCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7O0FBTS9DOzs7Ozs7Ozs7OztHQVdHO0FBaUJILE1BQU0sT0FBTyxlQUFlO0lBQzFCOzs7Ozs7OztPQVFHO0lBQ00sT0FBTyxHQUFrQixTQUFTLENBQUM7SUFFNUM7Ozs7Ozs7O09BUUc7SUFDTSxJQUFJLEdBQWUsU0FBUyxDQUFDO0lBRXRDOztPQUVHO0lBQ00sSUFBSSxHQUFrQyxRQUFRLENBQUM7SUFFeEQ7O09BRUc7SUFDTSxRQUFRLEdBQVksS0FBSyxDQUFDO0lBR25DOztPQUVHO0lBQ00sU0FBUyxDQUFVO0lBRTVCOzs7Ozs7Ozs7T0FTRztJQUNNLEtBQUssR0FBZ0IsU0FBUyxDQUFDO0lBRXhDLElBQUksYUFBYTtRQUNmLE9BQU87WUFDTCxVQUFVO1lBQ1YsYUFBYSxJQUFJLENBQUMsT0FBTyxFQUFFO1lBQzNCLGFBQWEsSUFBSSxDQUFDLElBQUksRUFBRTtZQUN4QixtQkFBbUIsSUFBSSxDQUFDLEtBQUssRUFBRTtTQUNoQyxDQUFDLE1BQU0sQ0FBQyxPQUFPLENBQUMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7SUFDOUIsQ0FBQzt3R0ExRFUsZUFBZTs0RkFBZixlQUFlLDZMQVpoQjs7Ozs7Ozs7O0dBU1Qsa3FSQVZTLFlBQVk7OzRGQWFYLGVBQWU7a0JBaEIzQixTQUFTOytCQUNFLFNBQVMsY0FDUCxJQUFJLFdBQ1AsQ0FBQyxZQUFZLENBQUMsWUFDYjs7Ozs7Ozs7O0dBU1Q7OEJBYVEsT0FBTztzQkFBZixLQUFLO2dCQVdHLElBQUk7c0JBQVosS0FBSztnQkFLRyxJQUFJO3NCQUFaLEtBQUs7Z0JBS0csUUFBUTtzQkFBaEIsS0FBSztnQkFNRyxTQUFTO3NCQUFqQixLQUFLO2dCQVlHLEtBQUs7c0JBQWIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIEhvc3RCaW5kaW5nIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuXG5leHBvcnQgdHlwZSBCdXR0b25WYXJpYW50ID0gJ2RlZmF1bHQnIHwgJ291dGxpbmUnIHwgJ2dob3N0JyB8ICdkZXN0cnVjdGl2ZScgfCAnc2Vjb25kYXJ5JyB8ICdsaW5rJztcbmV4cG9ydCB0eXBlIEJ1dHRvblNpemUgPSAnZGVmYXVsdCcgfCAnc20nIHwgJ2xnJyB8ICdpY29uJyB8ICdpY29uLXNtJyB8ICdpY29uLWxnJztcbmV4cG9ydCB0eXBlIEJ1dHRvbkNvbG9yID0gJ3ByaW1hcnknIHwgJ3N1Y2Nlc3MnIHwgJ3dhcm5pbmcnIHwgJ2RhbmdlcicgfCAnYWNjZW50JyB8ICd3aGl0ZScgfCAnaW5mbyc7XG5cbi8qKlxuICogQnV0dG9uIENvbXBvbmVudCAtIEJhc2VkIG9uIHNoYWRjbi91aVxuICogXG4gKiBBIHZlcnNhdGlsZSBidXR0b24gY29tcG9uZW50IHdpdGggbXVsdGlwbGUgdmFyaWFudHMgYW5kIHNpemVzLlxuICogXG4gKiBAZXhhbXBsZVxuICogYGBgaHRtbFxuICogPHVCdXR0b24+Q2xpY2sgbWU8L3VCdXR0b24+XG4gKiA8dUJ1dHRvbiB2YXJpYW50PVwib3V0bGluZVwiIHNpemU9XCJzbVwiPlNtYWxsIE91dGxpbmU8L3VCdXR0b24+XG4gKiA8dUJ1dHRvbiB2YXJpYW50PVwiZGVzdHJ1Y3RpdmVcIj5EZWxldGU8L3VCdXR0b24+XG4gKiBgYGBcbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndUJ1dHRvbicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGVdLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxidXR0b25cbiAgICAgIFt0eXBlXT1cInR5cGVcIlxuICAgICAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcbiAgICAgIFtjbGFzc109XCJidXR0b25DbGFzc2VzXCJcbiAgICAgIFthdHRyLmFyaWEtbGFiZWxdPVwiYXJpYUxhYmVsXCJcbiAgICA+XG4gICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgPC9idXR0b24+XG4gIGAsXG4gIHN0eWxlVXJsczogWycuL2J1dHRvbi5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIEJ1dHRvbkNvbXBvbmVudCB7XG4gIC8qKlxuICAgKiBCdXR0b24gdmFyaWFudFxuICAgKiAtIGRlZmF1bHQ6IFByaW1hcnkgYnV0dG9uIHN0eWxlXG4gICAqIC0gb3V0bGluZTogT3V0bGluZWQgYnV0dG9uXG4gICAqIC0gZ2hvc3Q6IE1pbmltYWwgYnV0dG9uIHdpdGggbm8gYm9yZGVyXG4gICAqIC0gZGVzdHJ1Y3RpdmU6IEZvciBkZXN0cnVjdGl2ZSBhY3Rpb25zIChkZWxldGUsIHJlbW92ZSwgZXRjLilcbiAgICogLSBzZWNvbmRhcnk6IFNlY29uZGFyeSBhY3Rpb24gYnV0dG9uXG4gICAqIC0gbGluazogUmVuZGVycyBhcyBhIGxpbmstc3R5bGVkIGJ1dHRvblxuICAgKi9cbiAgQElucHV0KCkgdmFyaWFudDogQnV0dG9uVmFyaWFudCA9ICdkZWZhdWx0JztcblxuICAvKipcbiAgICogQnV0dG9uIHNpemVcbiAgICogLSBkZWZhdWx0OiBTdGFuZGFyZCBidXR0b24gc2l6ZVxuICAgKiAtIHNtOiBTbWFsbCBidXR0b25cbiAgICogLSBsZzogTGFyZ2UgYnV0dG9uXG4gICAqIC0gaWNvbjogU3F1YXJlIGljb24gYnV0dG9uIChkZWZhdWx0IHNpemUpXG4gICAqIC0gaWNvbi1zbTogU21hbGwgc3F1YXJlIGljb24gYnV0dG9uXG4gICAqIC0gaWNvbi1sZzogTGFyZ2Ugc3F1YXJlIGljb24gYnV0dG9uXG4gICAqL1xuICBASW5wdXQoKSBzaXplOiBCdXR0b25TaXplID0gJ2RlZmF1bHQnO1xuXG4gIC8qKlxuICAgKiBIVE1MIGJ1dHRvbiB0eXBlXG4gICAqL1xuICBASW5wdXQoKSB0eXBlOiAnYnV0dG9uJyB8ICdzdWJtaXQnIHwgJ3Jlc2V0JyA9ICdidXR0b24nO1xuXG4gIC8qKlxuICAgKiBXaGV0aGVyIHRoZSBidXR0b24gaXMgZGlzYWJsZWRcbiAgICovXG4gIEBJbnB1dCgpIGRpc2FibGVkOiBib29sZWFuID0gZmFsc2U7XG5cblxuICAvKipcbiAgICogQVJJQSBsYWJlbCBmb3IgYWNjZXNzaWJpbGl0eVxuICAgKi9cbiAgQElucHV0KCkgYXJpYUxhYmVsPzogc3RyaW5nO1xuXG4gIC8qKlxuICAgKiBCdXR0b24gY29sb3JcbiAgICogLSBwcmltYXJ5OiBQcmltYXJ5IGJyYW5kIGNvbG9yIChkZWZhdWx0KVxuICAgKiAtIHN1Y2Nlc3M6IEdyZWVuIGNvbG9yIGZvciBzdWNjZXNzIGFjdGlvbnNcbiAgICogLSB3YXJuaW5nOiBZZWxsb3cvYW1iZXIgY29sb3IgZm9yIHdhcm5pbmdzXG4gICAqIC0gZGFuZ2VyOiBSZWQgY29sb3IgZm9yIGRhbmdlcm91cyBhY3Rpb25zXG4gICAqIC0gYWNjZW50OiBBY2NlbnQgY29sb3IgZm9yIGhpZ2hsaWdodHNcbiAgICogLSB3aGl0ZTogV2hpdGUgY29sb3IgZm9yIGRhcmsgYmFja2dyb3VuZHNcbiAgICogLSBpbmZvOiBCbHVlIGNvbG9yIGZvciBpbmZvcm1hdGlvbmFsIGFjdGlvbnNcbiAgICovXG4gIEBJbnB1dCgpIGNvbG9yOiBCdXR0b25Db2xvciA9ICdwcmltYXJ5JztcblxuICBnZXQgYnV0dG9uQ2xhc3NlcygpOiBzdHJpbmcge1xuICAgIHJldHVybiBbXG4gICAgICAndS1idXR0b24nLFxuICAgICAgYHUtYnV0dG9uLS0ke3RoaXMudmFyaWFudH1gLFxuICAgICAgYHUtYnV0dG9uLS0ke3RoaXMuc2l6ZX1gLFxuICAgICAgYHUtYnV0dG9uLS1jb2xvci0ke3RoaXMuY29sb3J9YFxuICAgIF0uZmlsdGVyKEJvb2xlYW4pLmpvaW4oJyAnKTtcbiAgfVxufVxuIl19
|
package/fesm2022/uisuite.mjs
CHANGED
|
@@ -47,15 +47,27 @@ class ButtonComponent {
|
|
|
47
47
|
* ARIA label for accessibility
|
|
48
48
|
*/
|
|
49
49
|
ariaLabel;
|
|
50
|
+
/**
|
|
51
|
+
* Button color
|
|
52
|
+
* - primary: Primary brand color (default)
|
|
53
|
+
* - success: Green color for success actions
|
|
54
|
+
* - warning: Yellow/amber color for warnings
|
|
55
|
+
* - danger: Red color for dangerous actions
|
|
56
|
+
* - accent: Accent color for highlights
|
|
57
|
+
* - white: White color for dark backgrounds
|
|
58
|
+
* - info: Blue color for informational actions
|
|
59
|
+
*/
|
|
60
|
+
color = 'primary';
|
|
50
61
|
get buttonClasses() {
|
|
51
62
|
return [
|
|
52
63
|
'u-button',
|
|
53
64
|
`u-button--${this.variant}`,
|
|
54
|
-
`u-button--${this.size}
|
|
65
|
+
`u-button--${this.size}`,
|
|
66
|
+
`u-button--color-${this.color}`
|
|
55
67
|
].filter(Boolean).join(' ');
|
|
56
68
|
}
|
|
57
69
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
58
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ButtonComponent, isStandalone: true, selector: "uButton", inputs: { variant: "variant", size: "size", type: "type", disabled: "disabled", ariaLabel: "ariaLabel" }, ngImport: i0, template: `
|
|
70
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ButtonComponent, isStandalone: true, selector: "uButton", inputs: { variant: "variant", size: "size", type: "type", disabled: "disabled", ariaLabel: "ariaLabel", color: "color" }, ngImport: i0, template: `
|
|
59
71
|
<button
|
|
60
72
|
[type]="type"
|
|
61
73
|
[disabled]="disabled"
|
|
@@ -64,7 +76,7 @@ class ButtonComponent {
|
|
|
64
76
|
>
|
|
65
77
|
<ng-content></ng-content>
|
|
66
78
|
</button>
|
|
67
|
-
`, isInline: true, styles: [".u-button{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:.375rem;font-size:.875rem;font-weight:500;transition:all .15s ease;cursor:pointer;border:1px solid transparent;outline:none}.u-button:focus-visible{outline:2px solid
|
|
79
|
+
`, isInline: true, styles: [".u-button{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:.375rem;font-size:.875rem;font-weight:500;transition:all .15s ease;cursor:pointer;border:1px solid transparent;outline:none}.u-button:focus-visible{outline:2px solid var(--uicolor-slate-400);outline-offset:2px}.u-button:disabled{pointer-events:none;opacity:.5}.u-button--default{height:2.5rem;padding:.5rem 1rem}.u-button--sm{height:2.25rem;padding:.5rem .75rem;font-size:.813rem}.u-button--lg{height:2.75rem;padding:.5rem 2rem}.u-button--icon{height:2.5rem;width:2.5rem;padding:0}.u-button--icon-sm{height:2.25rem;width:2.25rem;padding:0}.u-button--icon-lg{height:2.75rem;width:2.75rem;padding:0}.u-button--default{background-color:var(--uicolor-slate-900);color:#fff}.u-button--default:hover:not(:disabled){background-color:var(--uicolor-slate-800)}.u-button--default:active:not(:disabled){background-color:var(--uicolor-slate-700)}.u-button--outline{background-color:#fff;border-color:var(--uicolor-slate-300);color:var(--uicolor-slate-900)}.u-button--outline:hover:not(:disabled){background-color:var(--uicolor-slate-100)}.u-button--outline:active:not(:disabled){background-color:var(--uicolor-slate-200)}.u-button--ghost{background-color:transparent;border-color:transparent;color:inherit}.u-button--ghost:hover:not(:disabled){background-color:transparent}.u-button--ghost:active:not(:disabled){background-color:transparent}.u-button--destructive{background-color:var(--uicolor-danger-600);color:#fff}.u-button--destructive:hover:not(:disabled){background-color:var(--uicolor-danger-700)}.u-button--destructive:active:not(:disabled){background-color:var(--uicolor-danger-800)}.u-button--secondary{background-color:var(--uicolor-slate-100);color:var(--uicolor-slate-900)}.u-button--secondary:hover:not(:disabled){background-color:var(--uicolor-slate-200)}.u-button--secondary:active:not(:disabled){background-color:var(--uicolor-slate-300)}.u-button--link{background:unset!important;border:unset!important;color:var(--uicolor-primary-600);text-decoration:underline;text-underline-offset:4px;padding:0;height:auto}.u-button--link:hover:not(:disabled){text-decoration:none;color:var(--uicolor-primary-700)}.u-button--link:active:not(:disabled){color:var(--uicolor-primary-800)}.u-button--color-primary.u-button--default{background-color:var(--uicolor-primary-600);color:#fff}.u-button--color-primary.u-button--default:hover:not(:disabled){background-color:var(--uicolor-primary-700)}.u-button--color-primary.u-button--default:active:not(:disabled){background-color:var(--uicolor-primary-800)}.u-button--color-primary.u-button--outline{background-color:#fff;border-color:var(--uicolor-primary-600);color:var(--uicolor-primary-600)}.u-button--color-primary.u-button--outline:hover:not(:disabled){background-color:var(--uicolor-primary-100)}.u-button--color-primary.u-button--outline:active:not(:disabled){background-color:var(--uicolor-primary-200)}.u-button--color-primary.u-button--ghost{background-color:transparent;border-color:transparent;color:var(--uicolor-primary-600)}.u-button--color-primary.u-button--ghost:hover:not(:disabled){background-color:transparent}.u-button--color-primary.u-button--ghost:active:not(:disabled){background-color:transparent}.u-button--color-success.u-button--default{background-color:var(--uicolor-success-600);color:#fff}.u-button--color-success.u-button--default:hover:not(:disabled){background-color:var(--uicolor-success-700)}.u-button--color-success.u-button--default:active:not(:disabled){background-color:var(--uicolor-success-800)}.u-button--color-success.u-button--outline{background-color:#fff;border-color:var(--uicolor-success-600);color:var(--uicolor-success-600)}.u-button--color-success.u-button--outline:hover:not(:disabled){background-color:var(--uicolor-success-100)}.u-button--color-success.u-button--outline:active:not(:disabled){background-color:var(--uicolor-success-200)}.u-button--color-success.u-button--ghost{background-color:transparent;border-color:transparent;color:var(--uicolor-success-600)}.u-button--color-success.u-button--ghost:hover:not(:disabled){background-color:transparent}.u-button--color-success.u-button--ghost:active:not(:disabled){background-color:transparent}.u-button--color-warning.u-button--default{background-color:var(--uicolor-warning-500);color:var(--uicolor-slate-900)}.u-button--color-warning.u-button--default:hover:not(:disabled){background-color:var(--uicolor-warning-600)}.u-button--color-warning.u-button--default:active:not(:disabled){background-color:var(--uicolor-warning-700)}.u-button--color-warning.u-button--outline{background-color:#fff;border-color:var(--uicolor-warning-700);color:var(--uicolor-warning-700)}.u-button--color-warning.u-button--outline:hover:not(:disabled){background-color:var(--uicolor-warning-100)}.u-button--color-warning.u-button--outline:active:not(:disabled){background-color:var(--uicolor-warning-200)}.u-button--color-warning.u-button--ghost{background-color:transparent;border-color:transparent;color:var(--uicolor-warning-700)}.u-button--color-warning.u-button--ghost:hover:not(:disabled){background-color:transparent}.u-button--color-warning.u-button--ghost:active:not(:disabled){background-color:transparent}.u-button--color-danger.u-button--default{background-color:var(--uicolor-danger-600);color:#fff}.u-button--color-danger.u-button--default:hover:not(:disabled){background-color:var(--uicolor-danger-700)}.u-button--color-danger.u-button--default:active:not(:disabled){background-color:var(--uicolor-danger-800)}.u-button--color-danger.u-button--outline{background-color:#fff;border-color:var(--uicolor-danger-600);color:var(--uicolor-danger-600)}.u-button--color-danger.u-button--outline:hover:not(:disabled){background-color:var(--uicolor-danger-100)}.u-button--color-danger.u-button--outline:active:not(:disabled){background-color:var(--uicolor-danger-200)}.u-button--color-danger.u-button--ghost{background-color:transparent;border-color:transparent;color:var(--uicolor-danger-600)}.u-button--color-danger.u-button--ghost:hover:not(:disabled){background-color:transparent}.u-button--color-danger.u-button--ghost:active:not(:disabled){background-color:transparent}.u-button--color-accent.u-button--default{background-color:var(--uicolor-accent-600);color:#fff}.u-button--color-accent.u-button--default:hover:not(:disabled){background-color:var(--uicolor-accent-700)}.u-button--color-accent.u-button--default:active:not(:disabled){background-color:var(--uicolor-accent-800)}.u-button--color-accent.u-button--outline{background-color:#fff;border-color:var(--uicolor-accent-600);color:var(--uicolor-accent-600)}.u-button--color-accent.u-button--outline:hover:not(:disabled){background-color:var(--uicolor-accent-100)}.u-button--color-accent.u-button--outline:active:not(:disabled){background-color:var(--uicolor-accent-200)}.u-button--color-accent.u-button--ghost{background-color:transparent;border-color:transparent;color:var(--uicolor-accent-600)}.u-button--color-accent.u-button--ghost:hover:not(:disabled){background-color:transparent}.u-button--color-accent.u-button--ghost:active:not(:disabled){background-color:transparent}.u-button--color-white.u-button--default{background-color:#fff;color:var(--uicolor-slate-900);border-color:var(--uicolor-slate-300)}.u-button--color-white.u-button--default:hover:not(:disabled){background-color:var(--uicolor-slate-100)}.u-button--color-white.u-button--default:active:not(:disabled){background-color:var(--uicolor-slate-200)}.u-button--color-white.u-button--outline{background-color:#fff;border-color:#fff;color:var(--uicolor-slate-900)}.u-button--color-white.u-button--outline:hover:not(:disabled){background-color:var(--uicolor-slate-100)}.u-button--color-white.u-button--outline:active:not(:disabled){background-color:var(--uicolor-slate-200)}.u-button--color-info.u-button--default{background-color:var(--uicolor-primary-600);color:#fff}.u-button--color-info.u-button--default:hover:not(:disabled){background-color:var(--uicolor-primary-700)}.u-button--color-info.u-button--default:active:not(:disabled){background-color:var(--uicolor-primary-800)}.u-button--color-info.u-button--outline{background-color:#fff;border-color:var(--uicolor-primary-600);color:var(--uicolor-primary-600)}.u-button--color-info.u-button--outline:hover:not(:disabled){background-color:var(--uicolor-primary-100)}.u-button--color-info.u-button--outline:active:not(:disabled){background-color:var(--uicolor-primary-200)}.u-button--color-info.u-button--ghost{background-color:transparent;border-color:transparent;color:var(--uicolor-primary-600)}.u-button--color-info.u-button--ghost:hover:not(:disabled){background-color:transparent}.u-button--color-info.u-button--ghost:active:not(:disabled){background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
68
80
|
}
|
|
69
81
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
70
82
|
type: Component,
|
|
@@ -77,7 +89,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
77
89
|
>
|
|
78
90
|
<ng-content></ng-content>
|
|
79
91
|
</button>
|
|
80
|
-
`, styles: [".u-button{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:.375rem;font-size:.875rem;font-weight:500;transition:all .15s ease;cursor:pointer;border:1px solid transparent;outline:none}.u-button:focus-visible{outline:2px solid
|
|
92
|
+
`, styles: [".u-button{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:.375rem;font-size:.875rem;font-weight:500;transition:all .15s ease;cursor:pointer;border:1px solid transparent;outline:none}.u-button:focus-visible{outline:2px solid var(--uicolor-slate-400);outline-offset:2px}.u-button:disabled{pointer-events:none;opacity:.5}.u-button--default{height:2.5rem;padding:.5rem 1rem}.u-button--sm{height:2.25rem;padding:.5rem .75rem;font-size:.813rem}.u-button--lg{height:2.75rem;padding:.5rem 2rem}.u-button--icon{height:2.5rem;width:2.5rem;padding:0}.u-button--icon-sm{height:2.25rem;width:2.25rem;padding:0}.u-button--icon-lg{height:2.75rem;width:2.75rem;padding:0}.u-button--default{background-color:var(--uicolor-slate-900);color:#fff}.u-button--default:hover:not(:disabled){background-color:var(--uicolor-slate-800)}.u-button--default:active:not(:disabled){background-color:var(--uicolor-slate-700)}.u-button--outline{background-color:#fff;border-color:var(--uicolor-slate-300);color:var(--uicolor-slate-900)}.u-button--outline:hover:not(:disabled){background-color:var(--uicolor-slate-100)}.u-button--outline:active:not(:disabled){background-color:var(--uicolor-slate-200)}.u-button--ghost{background-color:transparent;border-color:transparent;color:inherit}.u-button--ghost:hover:not(:disabled){background-color:transparent}.u-button--ghost:active:not(:disabled){background-color:transparent}.u-button--destructive{background-color:var(--uicolor-danger-600);color:#fff}.u-button--destructive:hover:not(:disabled){background-color:var(--uicolor-danger-700)}.u-button--destructive:active:not(:disabled){background-color:var(--uicolor-danger-800)}.u-button--secondary{background-color:var(--uicolor-slate-100);color:var(--uicolor-slate-900)}.u-button--secondary:hover:not(:disabled){background-color:var(--uicolor-slate-200)}.u-button--secondary:active:not(:disabled){background-color:var(--uicolor-slate-300)}.u-button--link{background:unset!important;border:unset!important;color:var(--uicolor-primary-600);text-decoration:underline;text-underline-offset:4px;padding:0;height:auto}.u-button--link:hover:not(:disabled){text-decoration:none;color:var(--uicolor-primary-700)}.u-button--link:active:not(:disabled){color:var(--uicolor-primary-800)}.u-button--color-primary.u-button--default{background-color:var(--uicolor-primary-600);color:#fff}.u-button--color-primary.u-button--default:hover:not(:disabled){background-color:var(--uicolor-primary-700)}.u-button--color-primary.u-button--default:active:not(:disabled){background-color:var(--uicolor-primary-800)}.u-button--color-primary.u-button--outline{background-color:#fff;border-color:var(--uicolor-primary-600);color:var(--uicolor-primary-600)}.u-button--color-primary.u-button--outline:hover:not(:disabled){background-color:var(--uicolor-primary-100)}.u-button--color-primary.u-button--outline:active:not(:disabled){background-color:var(--uicolor-primary-200)}.u-button--color-primary.u-button--ghost{background-color:transparent;border-color:transparent;color:var(--uicolor-primary-600)}.u-button--color-primary.u-button--ghost:hover:not(:disabled){background-color:transparent}.u-button--color-primary.u-button--ghost:active:not(:disabled){background-color:transparent}.u-button--color-success.u-button--default{background-color:var(--uicolor-success-600);color:#fff}.u-button--color-success.u-button--default:hover:not(:disabled){background-color:var(--uicolor-success-700)}.u-button--color-success.u-button--default:active:not(:disabled){background-color:var(--uicolor-success-800)}.u-button--color-success.u-button--outline{background-color:#fff;border-color:var(--uicolor-success-600);color:var(--uicolor-success-600)}.u-button--color-success.u-button--outline:hover:not(:disabled){background-color:var(--uicolor-success-100)}.u-button--color-success.u-button--outline:active:not(:disabled){background-color:var(--uicolor-success-200)}.u-button--color-success.u-button--ghost{background-color:transparent;border-color:transparent;color:var(--uicolor-success-600)}.u-button--color-success.u-button--ghost:hover:not(:disabled){background-color:transparent}.u-button--color-success.u-button--ghost:active:not(:disabled){background-color:transparent}.u-button--color-warning.u-button--default{background-color:var(--uicolor-warning-500);color:var(--uicolor-slate-900)}.u-button--color-warning.u-button--default:hover:not(:disabled){background-color:var(--uicolor-warning-600)}.u-button--color-warning.u-button--default:active:not(:disabled){background-color:var(--uicolor-warning-700)}.u-button--color-warning.u-button--outline{background-color:#fff;border-color:var(--uicolor-warning-700);color:var(--uicolor-warning-700)}.u-button--color-warning.u-button--outline:hover:not(:disabled){background-color:var(--uicolor-warning-100)}.u-button--color-warning.u-button--outline:active:not(:disabled){background-color:var(--uicolor-warning-200)}.u-button--color-warning.u-button--ghost{background-color:transparent;border-color:transparent;color:var(--uicolor-warning-700)}.u-button--color-warning.u-button--ghost:hover:not(:disabled){background-color:transparent}.u-button--color-warning.u-button--ghost:active:not(:disabled){background-color:transparent}.u-button--color-danger.u-button--default{background-color:var(--uicolor-danger-600);color:#fff}.u-button--color-danger.u-button--default:hover:not(:disabled){background-color:var(--uicolor-danger-700)}.u-button--color-danger.u-button--default:active:not(:disabled){background-color:var(--uicolor-danger-800)}.u-button--color-danger.u-button--outline{background-color:#fff;border-color:var(--uicolor-danger-600);color:var(--uicolor-danger-600)}.u-button--color-danger.u-button--outline:hover:not(:disabled){background-color:var(--uicolor-danger-100)}.u-button--color-danger.u-button--outline:active:not(:disabled){background-color:var(--uicolor-danger-200)}.u-button--color-danger.u-button--ghost{background-color:transparent;border-color:transparent;color:var(--uicolor-danger-600)}.u-button--color-danger.u-button--ghost:hover:not(:disabled){background-color:transparent}.u-button--color-danger.u-button--ghost:active:not(:disabled){background-color:transparent}.u-button--color-accent.u-button--default{background-color:var(--uicolor-accent-600);color:#fff}.u-button--color-accent.u-button--default:hover:not(:disabled){background-color:var(--uicolor-accent-700)}.u-button--color-accent.u-button--default:active:not(:disabled){background-color:var(--uicolor-accent-800)}.u-button--color-accent.u-button--outline{background-color:#fff;border-color:var(--uicolor-accent-600);color:var(--uicolor-accent-600)}.u-button--color-accent.u-button--outline:hover:not(:disabled){background-color:var(--uicolor-accent-100)}.u-button--color-accent.u-button--outline:active:not(:disabled){background-color:var(--uicolor-accent-200)}.u-button--color-accent.u-button--ghost{background-color:transparent;border-color:transparent;color:var(--uicolor-accent-600)}.u-button--color-accent.u-button--ghost:hover:not(:disabled){background-color:transparent}.u-button--color-accent.u-button--ghost:active:not(:disabled){background-color:transparent}.u-button--color-white.u-button--default{background-color:#fff;color:var(--uicolor-slate-900);border-color:var(--uicolor-slate-300)}.u-button--color-white.u-button--default:hover:not(:disabled){background-color:var(--uicolor-slate-100)}.u-button--color-white.u-button--default:active:not(:disabled){background-color:var(--uicolor-slate-200)}.u-button--color-white.u-button--outline{background-color:#fff;border-color:#fff;color:var(--uicolor-slate-900)}.u-button--color-white.u-button--outline:hover:not(:disabled){background-color:var(--uicolor-slate-100)}.u-button--color-white.u-button--outline:active:not(:disabled){background-color:var(--uicolor-slate-200)}.u-button--color-info.u-button--default{background-color:var(--uicolor-primary-600);color:#fff}.u-button--color-info.u-button--default:hover:not(:disabled){background-color:var(--uicolor-primary-700)}.u-button--color-info.u-button--default:active:not(:disabled){background-color:var(--uicolor-primary-800)}.u-button--color-info.u-button--outline{background-color:#fff;border-color:var(--uicolor-primary-600);color:var(--uicolor-primary-600)}.u-button--color-info.u-button--outline:hover:not(:disabled){background-color:var(--uicolor-primary-100)}.u-button--color-info.u-button--outline:active:not(:disabled){background-color:var(--uicolor-primary-200)}.u-button--color-info.u-button--ghost{background-color:transparent;border-color:transparent;color:var(--uicolor-primary-600)}.u-button--color-info.u-button--ghost:hover:not(:disabled){background-color:transparent}.u-button--color-info.u-button--ghost:active:not(:disabled){background-color:transparent}\n"] }]
|
|
81
93
|
}], propDecorators: { variant: [{
|
|
82
94
|
type: Input
|
|
83
95
|
}], size: [{
|
|
@@ -88,6 +100,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
88
100
|
type: Input
|
|
89
101
|
}], ariaLabel: [{
|
|
90
102
|
type: Input
|
|
103
|
+
}], color: [{
|
|
104
|
+
type: Input
|
|
91
105
|
}] } });
|
|
92
106
|
|
|
93
107
|
/*
|
package/fesm2022/uisuite.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"uisuite.mjs","sources":["../../../projects/uisuite/src/lib/button/button.component.ts","../../../projects/uisuite/src/public-api.ts","../../../projects/uisuite/src/uisuite.ts"],"sourcesContent":["import { Component, Input, HostBinding } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nexport type ButtonVariant = 'default' | 'outline' | 'ghost' | 'destructive' | 'secondary' | 'link';\nexport type ButtonSize = 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';\n\n/**\n * Button Component - Based on shadcn/ui\n * \n * A versatile button component with multiple variants and sizes.\n * \n * @example\n * ```html\n * <uButton>Click me</uButton>\n * <uButton variant=\"outline\" size=\"sm\">Small Outline</uButton>\n * <uButton variant=\"destructive\">Delete</uButton>\n * ```\n */\n@Component({\n
|
|
1
|
+
{"version":3,"file":"uisuite.mjs","sources":["../../../projects/uisuite/src/lib/button/button.component.ts","../../../projects/uisuite/src/public-api.ts","../../../projects/uisuite/src/uisuite.ts"],"sourcesContent":["import { Component, Input, HostBinding } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nexport type ButtonVariant = 'default' | 'outline' | 'ghost' | 'destructive' | 'secondary' | 'link';\nexport type ButtonSize = 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';\nexport type ButtonColor = 'primary' | 'success' | 'warning' | 'danger' | 'accent' | 'white' | 'info';\n\n/**\n * Button Component - Based on shadcn/ui\n * \n * A versatile button component with multiple variants and sizes.\n * \n * @example\n * ```html\n * <uButton>Click me</uButton>\n * <uButton variant=\"outline\" size=\"sm\">Small Outline</uButton>\n * <uButton variant=\"destructive\">Delete</uButton>\n * ```\n */\n@Component({\n selector: 'uButton',\n standalone: true,\n imports: [CommonModule],\n template: `\n <button\n [type]=\"type\"\n [disabled]=\"disabled\"\n [class]=\"buttonClasses\"\n [attr.aria-label]=\"ariaLabel\"\n >\n <ng-content></ng-content>\n </button>\n `,\n styleUrls: ['./button.component.scss']\n})\nexport class ButtonComponent {\n /**\n * Button variant\n * - default: Primary button style\n * - outline: Outlined button\n * - ghost: Minimal button with no border\n * - destructive: For destructive actions (delete, remove, etc.)\n * - secondary: Secondary action button\n * - link: Renders as a link-styled button\n */\n @Input() variant: ButtonVariant = 'default';\n\n /**\n * Button size\n * - default: Standard button size\n * - sm: Small button\n * - lg: Large button\n * - icon: Square icon button (default size)\n * - icon-sm: Small square icon button\n * - icon-lg: Large square icon button\n */\n @Input() size: ButtonSize = 'default';\n\n /**\n * HTML button type\n */\n @Input() type: 'button' | 'submit' | 'reset' = 'button';\n\n /**\n * Whether the button is disabled\n */\n @Input() disabled: boolean = false;\n\n\n /**\n * ARIA label for accessibility\n */\n @Input() ariaLabel?: string;\n\n /**\n * Button color\n * - primary: Primary brand color (default)\n * - success: Green color for success actions\n * - warning: Yellow/amber color for warnings\n * - danger: Red color for dangerous actions\n * - accent: Accent color for highlights\n * - white: White color for dark backgrounds\n * - info: Blue color for informational actions\n */\n @Input() color: ButtonColor = 'primary';\n\n get buttonClasses(): string {\n return [\n 'u-button',\n `u-button--${this.variant}`,\n `u-button--${this.size}`,\n `u-button--color-${this.color}`\n ].filter(Boolean).join(' ');\n }\n}\n","/*\n * Public API Surface of uisuite\n * \n * This file exports all components, directives, and services.\n */\n\n// Version\nexport const UISUITE_VERSION = '0.0.0';\n\n// Components\nexport * from './lib/button/button.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAOA;;;;;;;;;;;AAWG;MAiBU,eAAe,CAAA;AAC1B;;;;;;;;AAQG;IACM,OAAO,GAAkB,SAAS,CAAC;AAE5C;;;;;;;;AAQG;IACM,IAAI,GAAe,SAAS,CAAC;AAEtC;;AAEG;IACM,IAAI,GAAkC,QAAQ,CAAC;AAExD;;AAEG;IACM,QAAQ,GAAY,KAAK,CAAC;AAGnC;;AAEG;AACM,IAAA,SAAS,CAAU;AAE5B;;;;;;;;;AASG;IACM,KAAK,GAAgB,SAAS,CAAC;AAExC,IAAA,IAAI,aAAa,GAAA;QACf,OAAO;YACL,UAAU;YACV,CAAa,UAAA,EAAA,IAAI,CAAC,OAAO,CAAE,CAAA;YAC3B,CAAa,UAAA,EAAA,IAAI,CAAC,IAAI,CAAE,CAAA;YACxB,CAAmB,gBAAA,EAAA,IAAI,CAAC,KAAK,CAAE,CAAA;SAChC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC7B;wGA1DU,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,eAAe,EAZhB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,SAAA,EAAA,WAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;;;AAST,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,2lRAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAVS,YAAY,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAaX,eAAe,EAAA,UAAA,EAAA,CAAA;kBAhB3B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,SAAS,cACP,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,CAAC,EACb,QAAA,EAAA,CAAA;;;;;;;;;AAST,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,2lRAAA,CAAA,EAAA,CAAA;8BAaQ,OAAO,EAAA,CAAA;sBAAf,KAAK;gBAWG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBAKG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBAKG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBAMG,SAAS,EAAA,CAAA;sBAAjB,KAAK;gBAYG,KAAK,EAAA,CAAA;sBAAb,KAAK;;;ACpFR;;;;AAIG;AAEH;AACO,MAAM,eAAe,GAAG;;ACP/B;;AAEG;;;;"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as i0 from "@angular/core";
|
|
2
2
|
export type ButtonVariant = 'default' | 'outline' | 'ghost' | 'destructive' | 'secondary' | 'link';
|
|
3
3
|
export type ButtonSize = 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';
|
|
4
|
+
export type ButtonColor = 'primary' | 'success' | 'warning' | 'danger' | 'accent' | 'white' | 'info';
|
|
4
5
|
/**
|
|
5
6
|
* Button Component - Based on shadcn/ui
|
|
6
7
|
*
|
|
@@ -46,7 +47,18 @@ export declare class ButtonComponent {
|
|
|
46
47
|
* ARIA label for accessibility
|
|
47
48
|
*/
|
|
48
49
|
ariaLabel?: string;
|
|
50
|
+
/**
|
|
51
|
+
* Button color
|
|
52
|
+
* - primary: Primary brand color (default)
|
|
53
|
+
* - success: Green color for success actions
|
|
54
|
+
* - warning: Yellow/amber color for warnings
|
|
55
|
+
* - danger: Red color for dangerous actions
|
|
56
|
+
* - accent: Accent color for highlights
|
|
57
|
+
* - white: White color for dark backgrounds
|
|
58
|
+
* - info: Blue color for informational actions
|
|
59
|
+
*/
|
|
60
|
+
color: ButtonColor;
|
|
49
61
|
get buttonClasses(): string;
|
|
50
62
|
static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
|
|
51
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "uButton", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "type": { "alias": "type"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, {}, never, ["*"], true, never>;
|
|
63
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "uButton", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "type": { "alias": "type"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, {}, never, ["*"], true, never>;
|
|
52
64
|
}
|
package/package.json
CHANGED
package/uisuite-1.0.0.tgz
DELETED
|
Binary file
|