@rt-tools/ui-kit 0.0.20 → 0.0.21

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.
Files changed (11) hide show
  1. package/fesm2022/rt-tools-ui-kit.mjs +136 -67
  2. package/fesm2022/rt-tools-ui-kit.mjs.map +1 -1
  3. package/package.json +5 -5
  4. package/rt-tools-ui-kit-0.0.21.tgz +0 -0
  5. package/src/lib/ui-kit/buttons/unified-button/rtui-button.component.scss +247 -0
  6. package/src/lib/ui-kit/icon/rtui-icon.component.scss +110 -0
  7. package/src/styles/color-scheme.spec.ts +5 -5
  8. package/src/styles/components/_rtui_button.scss +95 -0
  9. package/types/rt-tools-ui-kit.d.ts +46 -32
  10. package/rt-tools-ui-kit-0.0.20.tgz +0 -0
  11. package/src/lib/ui-kit/buttons/icon-round/rtui-round-icon-button.component.scss +0 -44
package/package.json CHANGED
@@ -1,18 +1,18 @@
1
1
  {
2
2
  "name": "@rt-tools/ui-kit",
3
- "version": "0.0.20",
3
+ "version": "0.0.21",
4
4
  "license": "Apache-2.0",
5
5
  "author": "Yauheni Krumin",
6
6
  "type": "module",
7
7
  "dependencies": {
8
8
  "tslib": "^2.8.0",
9
- "@rt-tools/core": "^0.0.3",
10
- "@rt-tools/store": "^0.0.4",
9
+ "@rt-tools/core": "^0.0.4",
10
+ "@rt-tools/store": "^0.0.5",
11
11
  "@rt-tools/utils": "^0.0.6"
12
12
  },
13
13
  "peerDependencies": {
14
- "@rt-tools/core": "^0.0.3",
15
- "@rt-tools/store": "^0.0.4",
14
+ "@rt-tools/core": "^0.0.4",
15
+ "@rt-tools/store": "^0.0.5",
16
16
  "@rt-tools/utils": "^0.0.6",
17
17
  "@angular/animations": "^21.0.0",
18
18
  "@angular/cdk": "^21.0.0",
package/rt-tools-ui-kit-0.0.21.tgz ADDED
Binary file
package/src/lib/ui-kit/buttons/unified-button/rtui-button.component.scss ADDED
@@ -0,0 +1,247 @@
1
+ :host {
2
+ display: inline-block;
3
+ }
4
+
5
+ :host(.rtui-button-full) {
6
+ display: block;
7
+ width: 100%;
8
+
9
+ .rtui-button {
10
+ width: 100%;
11
+ }
12
+ }
13
+
14
+ .rtui-button {
15
+ position: relative;
16
+ display: inline-flex;
17
+ align-items: center;
18
+ justify-content: center;
19
+ border: 0;
20
+ background-color: transparent;
21
+ color: var(--mat-sys-on-surface-variant);
22
+ cursor: pointer;
23
+ line-height: 1;
24
+ transition:
25
+ background-color 0.15s ease,
26
+ color 0.15s ease,
27
+ opacity 0.15s ease;
28
+
29
+ rtui-icon {
30
+ color: inherit;
31
+ }
32
+
33
+ rtui-spinner {
34
+ display: flex;
35
+ align-items: center;
36
+ justify-content: center;
37
+ }
38
+
39
+ &:disabled {
40
+ cursor: not-allowed;
41
+ opacity: 0.38;
42
+ }
43
+
44
+ &--loading {
45
+ cursor: wait;
46
+ }
47
+
48
+ /* ===================== icon / fab ===================== */
49
+ &--type-icon,
50
+ &--type-fab {
51
+ border-radius: 1.5rem;
52
+
53
+ &:hover:not(:disabled) {
54
+ background-color: var(--rt-bg-base-hover);
55
+ }
56
+ }
57
+
58
+ &--type-icon.rtui-button--size-xs,
59
+ &--type-fab.rtui-button--size-xs {
60
+ padding: 0.25rem;
61
+ }
62
+
63
+ &--type-icon.rtui-button--size-sm,
64
+ &--type-fab.rtui-button--size-sm {
65
+ padding: 0.375rem;
66
+ }
67
+
68
+ &--type-icon.rtui-button--size-md,
69
+ &--type-fab.rtui-button--size-md {
70
+ padding: 0.5rem;
71
+ }
72
+
73
+ &--type-icon.rtui-button--size-lg,
74
+ &--type-fab.rtui-button--size-lg {
75
+ padding: 0.625rem;
76
+ }
77
+
78
+ &--type-icon.rtui-button--variant-primary,
79
+ &--type-fab.rtui-button--variant-primary {
80
+ color: var(--rt-icon-accent-primary);
81
+ }
82
+
83
+ &--type-icon.rtui-button--variant-danger,
84
+ &--type-fab.rtui-button--variant-danger {
85
+ color: var(--rt-icon-accent-danger);
86
+ }
87
+
88
+ &--type-icon.rtui-button--variant-success,
89
+ &--type-fab.rtui-button--variant-success {
90
+ color: var(--rt-icon-accent-success);
91
+ }
92
+
93
+ &--type-icon.rtui-button--variant-warning,
94
+ &--type-fab.rtui-button--variant-warning {
95
+ color: var(--rt-icon-accent-warning);
96
+ }
97
+
98
+ &--type-icon.rtui-button--variant-accent,
99
+ &--type-fab.rtui-button--variant-accent {
100
+ color: var(--rt-icon-accent-info);
101
+ }
102
+
103
+ /* ===================== pill ===================== */
104
+ &--type-pill {
105
+ gap: 0.375rem;
106
+ border-radius: 1.5rem;
107
+ background-color: var(--mat-sys-surface-container-high);
108
+ color: var(--mat-sys-on-surface-variant);
109
+ font-weight: 500;
110
+
111
+ &:hover:not(:disabled) {
112
+ background-color: var(--mat-sys-surface-container-highest);
113
+ }
114
+
115
+ &:active:not(:disabled) {
116
+ background-color: var(--mat-sys-surface-dim);
117
+ }
118
+ }
119
+
120
+ /* pill sizes */
121
+ &--type-pill.rtui-button--size-xs {
122
+ padding: 0.25rem 0.5rem;
123
+ font-size: 0.6875rem;
124
+ }
125
+
126
+ &--type-pill.rtui-button--size-sm {
127
+ padding: 0.375rem 0.625rem;
128
+ font-size: 0.75rem;
129
+ }
130
+
131
+ &--type-pill.rtui-button--size-md {
132
+ padding: 0.5rem 0.875rem;
133
+ font-size: 0.8125rem;
134
+ }
135
+
136
+ &--type-pill.rtui-button--size-lg {
137
+ padding: 0.625rem 1rem;
138
+ font-size: 0.875rem;
139
+ }
140
+
141
+ /* pill radius */
142
+ &--type-pill.rtui-button--radius-none {
143
+ border-radius: 0;
144
+ }
145
+
146
+ &--type-pill.rtui-button--radius-sm {
147
+ border-radius: 0.25rem;
148
+ }
149
+
150
+ &--type-pill.rtui-button--radius-md {
151
+ border-radius: 0.5rem;
152
+ }
153
+
154
+ &--type-pill.rtui-button--radius-lg {
155
+ border-radius: 0.75rem;
156
+ }
157
+
158
+ &--type-pill.rtui-button--radius-full {
159
+ border-radius: 1.5rem;
160
+ }
161
+
162
+ /* pill variants */
163
+ &--type-pill.rtui-button--variant-primary {
164
+ background-color: var(--rt-bg-accent-primary-subtle);
165
+ color: var(--rt-text-accent-primary);
166
+
167
+ &:hover:not(:disabled) {
168
+ background-color: color-mix(in srgb, var(--rt-bg-accent-primary-subtle) 92%, var(--rt-color-neutral-100));
169
+ }
170
+
171
+ &:active:not(:disabled) {
172
+ background-color: color-mix(in srgb, var(--rt-bg-accent-primary-subtle) 84%, var(--rt-color-neutral-100));
173
+ }
174
+ }
175
+
176
+ &--type-pill.rtui-button--variant-danger {
177
+ background-color: var(--rt-bg-accent-danger-subtle);
178
+ color: var(--rt-text-accent-danger);
179
+
180
+ &:hover:not(:disabled) {
181
+ background-color: color-mix(in srgb, var(--rt-bg-accent-danger-subtle) 92%, var(--rt-color-neutral-100));
182
+ }
183
+
184
+ &:active:not(:disabled) {
185
+ background-color: color-mix(in srgb, var(--rt-bg-accent-danger-subtle) 84%, var(--rt-color-neutral-100));
186
+ }
187
+ }
188
+
189
+ &--type-pill.rtui-button--variant-success {
190
+ background-color: var(--rt-bg-accent-success-subtle);
191
+ color: var(--rt-text-accent-success);
192
+
193
+ &:hover:not(:disabled) {
194
+ background-color: color-mix(in srgb, var(--rt-bg-accent-success-subtle) 92%, var(--rt-color-neutral-100));
195
+ }
196
+
197
+ &:active:not(:disabled) {
198
+ background-color: color-mix(in srgb, var(--rt-bg-accent-success-subtle) 84%, var(--rt-color-neutral-100));
199
+ }
200
+ }
201
+
202
+ &--type-pill.rtui-button--variant-warning {
203
+ background-color: var(--rt-bg-accent-warning-subtle);
204
+ color: var(--rt-text-accent-warning);
205
+
206
+ &:hover:not(:disabled) {
207
+ background-color: color-mix(in srgb, var(--rt-bg-accent-warning-subtle) 92%, var(--rt-color-neutral-100));
208
+ }
209
+
210
+ &:active:not(:disabled) {
211
+ background-color: color-mix(in srgb, var(--rt-bg-accent-warning-subtle) 84%, var(--rt-color-neutral-100));
212
+ }
213
+ }
214
+
215
+ &--type-pill.rtui-button--variant-accent {
216
+ background-color: var(--rt-bg-accent-info-subtle);
217
+ color: var(--rt-text-accent-info);
218
+
219
+ &:hover:not(:disabled) {
220
+ background-color: color-mix(in srgb, var(--rt-bg-accent-info-subtle) 92%, var(--rt-color-neutral-100));
221
+ }
222
+
223
+ &:active:not(:disabled) {
224
+ background-color: color-mix(in srgb, var(--rt-bg-accent-info-subtle) 84%, var(--rt-color-neutral-100));
225
+ }
226
+ }
227
+
228
+ /* pill appearance: text — transparent, borderless inline-text look.
229
+ Radius is intentionally left to the `--radius-*` modifier (defaults to
230
+ full) so a text-appearance pill keeps its pill shape. */
231
+ &--type-pill.rtui-button--appearance-text {
232
+ min-height: 1.875rem;
233
+ padding: 0 0.625rem;
234
+ background-color: transparent;
235
+ color: var(--mat-sys-on-surface-variant);
236
+ font-size: 1rem;
237
+ font-weight: 400;
238
+
239
+ &:hover:not(:disabled) {
240
+ background-color: var(--rt-bg-base-hover);
241
+ }
242
+
243
+ &:active:not(:disabled) {
244
+ background-color: var(--rt-bg-base-hover);
245
+ }
246
+ }
247
+ }
package/src/lib/ui-kit/icon/rtui-icon.component.scss ADDED
@@ -0,0 +1,110 @@
1
+ .rtui-icon {
2
+ display: inline-flex;
3
+ align-items: center;
4
+ justify-content: center;
5
+
6
+ &--loading {
7
+ visibility: hidden;
8
+ }
9
+
10
+ &--rotate {
11
+ animation: rt-icon-rotation 1s linear infinite;
12
+ }
13
+
14
+ .mat-icon {
15
+ width: inherit;
16
+ height: inherit;
17
+ color: inherit;
18
+ font-size: inherit;
19
+ }
20
+
21
+ &--size-xs {
22
+ width: 0.875rem;
23
+ height: 0.875rem;
24
+ font-size: 0.875rem;
25
+ }
26
+
27
+ &--size-sm {
28
+ width: 1rem;
29
+ height: 1rem;
30
+ font-size: 1rem;
31
+ }
32
+
33
+ &--size-md {
34
+ width: 1.5rem;
35
+ height: 1.5rem;
36
+ font-size: 1.5rem;
37
+ }
38
+
39
+ &--size-lg {
40
+ width: 2rem;
41
+ height: 2rem;
42
+ font-size: 2rem;
43
+ }
44
+
45
+ &--size-xl {
46
+ width: 2.5rem;
47
+ height: 2.5rem;
48
+ font-size: 2.5rem;
49
+ }
50
+
51
+ &--size-xxl {
52
+ width: 3rem;
53
+ height: 3rem;
54
+ font-size: 3rem;
55
+ }
56
+
57
+ &--size-3xl {
58
+ width: 3.5rem;
59
+ height: 3.5rem;
60
+ font-size: 3.5rem;
61
+ }
62
+
63
+ &--theme-inherit {
64
+ color: inherit;
65
+ }
66
+
67
+ &--theme-primary {
68
+ color: var(--rt-icon-accent-primary);
69
+ }
70
+
71
+ &--theme-primary-strong {
72
+ color: var(--rt-icon-accent-primary);
73
+ }
74
+
75
+ &--theme-neutral {
76
+ color: var(--rt-icon-neutral-soft);
77
+ }
78
+
79
+ &--theme-disabled {
80
+ color: var(--rt-icon-neutral-disabled);
81
+ }
82
+
83
+ &--theme-muted {
84
+ color: var(--rt-icon-neutral-soft);
85
+ }
86
+
87
+ &--theme-white {
88
+ color: var(--rt-icon-static-light);
89
+ }
90
+
91
+ &--theme-danger {
92
+ color: var(--rt-icon-accent-danger);
93
+ }
94
+
95
+ &--theme-success {
96
+ color: var(--rt-icon-accent-success);
97
+ }
98
+ }
99
+
100
+ /* Inside a text-appearance button, every projected icon renders at a single
101
+ uniform size regardless of the `size` modifier it was given, so labelled
102
+ text buttons read consistently (e.g. report-header currency/hotels/period
103
+ triggers). This component is ViewEncapsulation.None, so the rule is global
104
+ and reaches the projected icon; specificity (0,2,0) wins over the icon's own
105
+ `--size-*` (0,1,0). */
106
+ .rtui-button--appearance-text .rtui-icon {
107
+ width: 1.375rem;
108
+ height: 1.375rem;
109
+ font-size: 1.375rem;
110
+ }
package/src/styles/color-scheme.spec.ts CHANGED
@@ -195,7 +195,7 @@ describe('rt-tools color schemes', () => {
195
195
  describe('rt.color-scheme mixin', () => {
196
196
  it('emits a scoped [data-rt-scheme] block with only raw role rows', () => {
197
197
  const css: string = compileWithMixin(
198
- '@include rt.color-scheme(\'teal\', (primary: (20: #b3e3e1, 100: #008582), brand: (100: #008582)));'
198
+ '@include rt.color-scheme("teal", (primary: (20: #b3e3e1, 100: #008582), brand: (100: #008582)));'
199
199
  ).css;
200
200
 
201
201
  const block: string = css.slice(css.indexOf('[data-rt-scheme=teal]'));
@@ -209,22 +209,22 @@ describe('rt-tools color schemes', () => {
209
209
  });
210
210
 
211
211
  it('rejects an unknown role', () => {
212
- expect(() => compileWithMixin('@include rt.color-scheme(\'x\', (foo: (100: #000000)));')).toThrow(/unknown role/i);
212
+ expect(() => compileWithMixin('@include rt.color-scheme("x", (foo: (100: #000000)));')).toThrow(/unknown role/i);
213
213
  });
214
214
 
215
215
  it('rejects an out-of-range tone', () => {
216
- expect(() => compileWithMixin('@include rt.color-scheme(\'x\', (primary: (150: #000000)));')).toThrow(/integer 0–100/i);
216
+ expect(() => compileWithMixin('@include rt.color-scheme("x", (primary: (150: #000000)));')).toThrow(/integer 0–100/i);
217
217
  });
218
218
 
219
219
  it('rejects an empty role map', () => {
220
- expect(() => compileWithMixin('@include rt.color-scheme(\'x\', ());')).toThrow(/non-empty map/i);
220
+ expect(() => compileWithMixin('@include rt.color-scheme("x", ());')).toThrow(/non-empty map/i);
221
221
  });
222
222
  });
223
223
 
224
224
  describe('teal reference case', () => {
225
225
  it('a teal primary ramp recolors --rt-bg-accent-primary-solid to teal', () => {
226
226
  const css: string = compileWithMixin(
227
- '@include rt.color-scheme(\'teal\', (primary: (20: #b3e3e1, 40: #5cb8b5, 60: #1a9d99, 100: #008582)));'
227
+ '@include rt.color-scheme("teal", (primary: (20: #b3e3e1, 40: #5cb8b5, 60: #1a9d99, 100: #008582)));'
228
228
  ).css;
229
229
 
230
230
  const scheme: Record<string, string> = extractDeclarations(css, '--rt-color-primary-\\d+');
package/src/styles/components/_rtui_button.scss CHANGED
@@ -118,6 +118,36 @@ $rtui-button: (
118
118
  hover-bg: var(--rt-color-orange-5),
119
119
  active-shadow: var(--rt-color-orange-40),
120
120
  ),
121
+ accent-text: (
122
+ border: 0,
123
+ bg: transparent,
124
+ color: var(--rt-text-accent-info),
125
+ hover-bg: var(--rt-bg-base-hover),
126
+ ),
127
+ success-text: (
128
+ border: 0,
129
+ bg: transparent,
130
+ color: var(--rt-text-accent-success),
131
+ hover-bg: var(--rt-bg-base-hover),
132
+ ),
133
+ secondary-text: (
134
+ border: 0,
135
+ bg: transparent,
136
+ color: var(--rt-text-base-secondary),
137
+ hover-bg: var(--rt-bg-base-hover),
138
+ ),
139
+ error-text: (
140
+ border: 0,
141
+ bg: transparent,
142
+ color: var(--rt-text-accent-danger),
143
+ hover-bg: var(--rt-bg-base-hover),
144
+ ),
145
+ warning-text: (
146
+ border: 0,
147
+ bg: transparent,
148
+ color: var(--rt-text-accent-warning),
149
+ hover-bg: var(--rt-bg-base-hover),
150
+ ),
121
151
  size-sm: (
122
152
  gap: 4px,
123
153
  padding: 4px 8px,
@@ -424,6 +454,71 @@ $rtui-button: (
424
454
  }
425
455
  }
426
456
 
457
+ /* text — transparent, borderless label with a subtle hover wash.
458
+ Shared box matches the legacy text-button (inline-text look). Compound
459
+ `.rtui-btn[...-text]` (0,2,0) outranks the size tokens (0,1,0) regardless of order. */
460
+ .rtui-btn[class*='-text'] {
461
+ --font-size: 16px;
462
+ --gap: 8px;
463
+ --padding: 0 10px;
464
+
465
+ min-height: 30px;
466
+ border-radius: 5px;
467
+ font-weight: 400;
468
+ }
469
+
470
+ .rtui-btn-accent-text {
471
+ --border: var(--rt-rtui-btn-accent-text-border);
472
+ --bg: var(--rt-rtui-btn-accent-text-bg);
473
+ --color: var(--rt-rtui-btn-accent-text-color);
474
+
475
+ &:hover {
476
+ --bg: var(--rt-rtui-btn-accent-text-hover-bg);
477
+ }
478
+ }
479
+
480
+ .rtui-btn-success-text {
481
+ --border: var(--rt-rtui-btn-success-text-border);
482
+ --bg: var(--rt-rtui-btn-success-text-bg);
483
+ --color: var(--rt-rtui-btn-success-text-color);
484
+
485
+ &:hover {
486
+ --bg: var(--rt-rtui-btn-success-text-hover-bg);
487
+ }
488
+ }
489
+
490
+ /* secondary-text resolves its colour ON the element so the `--rt-text-base-secondary`
491
+ semantic (`--mat-sys-on-surface-variant` hybrid) lands where Material is in scope. */
492
+ .rtui-btn-secondary-text {
493
+ --border: var(--rt-rtui-btn-secondary-text-border);
494
+ --bg: var(--rt-rtui-btn-secondary-text-bg);
495
+ --color: var(--mat-sys-on-surface-variant, var(--rt-rtui-btn-secondary-text-color));
496
+
497
+ &:hover {
498
+ --bg: var(--rt-rtui-btn-secondary-text-hover-bg);
499
+ }
500
+ }
501
+
502
+ .rtui-btn-error-text {
503
+ --border: var(--rt-rtui-btn-error-text-border);
504
+ --bg: var(--rt-rtui-btn-error-text-bg);
505
+ --color: var(--rt-rtui-btn-error-text-color);
506
+
507
+ &:hover {
508
+ --bg: var(--rt-rtui-btn-error-text-hover-bg);
509
+ }
510
+ }
511
+
512
+ .rtui-btn-warning-text {
513
+ --border: var(--rt-rtui-btn-warning-text-border);
514
+ --bg: var(--rt-rtui-btn-warning-text-bg);
515
+ --color: var(--rt-rtui-btn-warning-text-color);
516
+
517
+ &:hover {
518
+ --bg: var(--rt-rtui-btn-warning-text-hover-bg);
519
+ }
520
+ }
521
+
427
522
  /* size */
428
523
  .rtui-btn-sm {
429
524
  --gap: var(--rt-rtui-btn-size-sm-gap);
package/types/rt-tools-ui-kit.d.ts CHANGED
@@ -9,10 +9,11 @@ import { MatDrawer } from '@angular/material/sidenav';
9
9
  import { OverlayRef, ComponentType, ConnectedPosition, CdkOverlayOrigin } from '@angular/cdk/overlay';
10
10
  import { ComponentType as ComponentType$1 } from '@angular/cdk/portal';
11
11
  import { HttpErrorResponse } from '@angular/common/http';
12
- import { MatFormFieldAppearance } from '@angular/material/form-field';
13
- import { PageModel, SortModel, FilterOperatorType, FilterModel, FILTER_OPERATOR_TYPE_ENUM, POSITION_ENUM, OSTypes } from '@rt-tools/utils';
14
12
  import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
13
+ import * as i1 from '@angular/material/tooltip';
15
14
  import { TooltipPosition } from '@angular/material/tooltip';
15
+ import { MatFormFieldAppearance } from '@angular/material/form-field';
16
+ import { PageModel, SortModel, FilterOperatorType, FilterModel, FILTER_OPERATOR_TYPE_ENUM, POSITION_ENUM, OSTypes } from '@rt-tools/utils';
16
17
  import { AnimationPlayer, AnimationTriggerMetadata } from '@angular/animations';
17
18
  import { MatSnackBarConfig, MatSnackBarRef } from '@angular/material/snack-bar';
18
19
  import { CdkDragDrop } from '@angular/cdk/drag-drop';
@@ -282,39 +283,52 @@ declare class RtuiAsideContainerComponent {
282
283
  static ɵcmp: i0.ɵɵComponentDeclaration<RtuiAsideContainerComponent, "rtui-aside-container", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "isMobile": { "alias": "isMobile"; "required": true; "isSignal": true; }; "isSubmitButtonDisabled": { "alias": "isSubmitButtonDisabled"; "required": true; "isSignal": true; }; "isFooterShown": { "alias": "isFooterShown"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "isRequestErrorShown": { "alias": "isRequestErrorShown"; "required": false; "isSignal": true; }; "headerActionsButtons": { "alias": "headerActionsButtons"; "required": false; "isSignal": true; }; "requestError": { "alias": "requestError"; "required": false; "isSignal": true; }; "submitButtonTitle": { "alias": "submitButtonTitle"; "required": false; "isSignal": true; }; "cancelButtonTitle": { "alias": "cancelButtonTitle"; "required": false; "isSignal": true; }; "submitButtonTooltip": { "alias": "submitButtonTooltip"; "required": false; "isSignal": true; }; }, { "submitAction": "submitAction"; "cancelAction": "cancelAction"; "headerAction": "headerAction"; }, ["headerTpl"], ["*"], true, never>;
283
284
  }
284
285
 
285
- declare class RtuiRoundIconButtonComponent {
286
- icon: InputSignal<string>;
287
- static ɵfac: i0.ɵɵFactoryDeclaration<RtuiRoundIconButtonComponent, never>;
288
- static ɵcmp: i0.ɵɵComponentDeclaration<RtuiRoundIconButtonComponent, "rtui-round-icon-button", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
286
+ type RtuiIconSizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | '3xl';
287
+ type RtuiIconThemeType = 'inherit' | 'primary' | 'primary-strong' | 'neutral' | 'disabled' | 'muted' | 'white' | 'danger' | 'success';
288
+ declare class RtuiIconComponent {
289
+ #private;
290
+ protected readonly fontLoaded: Signal<boolean>;
291
+ protected readonly hostClasses: Signal<string>;
292
+ readonly size: InputSignal<RtuiIconSizeType>;
293
+ readonly theme: InputSignal<RtuiIconThemeType>;
294
+ readonly glyph: InputSignalWithTransform<string, unknown>;
295
+ readonly outlined: InputSignalWithTransform<boolean, BooleanInput>;
296
+ readonly rotate: InputSignalWithTransform<boolean, BooleanInput>;
297
+ constructor();
298
+ static ɵfac: i0.ɵɵFactoryDeclaration<RtuiIconComponent, never>;
299
+ static ɵcmp: i0.ɵɵComponentDeclaration<RtuiIconComponent, "rtui-icon", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "glyph": { "alias": "glyph"; "required": false; "isSignal": true; }; "outlined": { "alias": "outlined"; "required": false; "isSignal": true; }; "rotate": { "alias": "rotate"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1.MatTooltip; inputs: { "matTooltip": "tooltip"; "matTooltipPosition": "tooltipPosition"; "matTooltipDisabled": "tooltipDisabled"; }; outputs: {}; }]>;
289
300
  }
290
301
 
291
- declare enum BUTTON_SIZE {
292
- SMALL = "sm",
293
- MEDIUM = "md",
294
- LARGE = "lg",
295
- FULL = "full"
296
- }
297
- type ButtonSizeType = BUTTON_SIZE.SMALL | BUTTON_SIZE.MEDIUM | BUTTON_SIZE.LARGE | BUTTON_SIZE.FULL;
298
- declare enum BUTTON_COLOR {
299
- ACCENT = "accent",
300
- SUCCESS = "success",
301
- SECONDARY = "secondary",
302
- ERROR = "error",
303
- WARNING = "warning"
304
- }
305
- type ButtonColorType = BUTTON_COLOR.ACCENT | BUTTON_COLOR.SUCCESS | BUTTON_COLOR.ERROR | BUTTON_COLOR.WARNING | BUTTON_COLOR.SECONDARY;
306
- declare enum BUTTON_APPEARANCE {
307
- OUTLINE = "outline",
308
- LIGHT = "light"
302
+ declare namespace IRtuiButton {
303
+ type Type = 'icon' | 'fab' | 'pill';
304
+ type Variant = 'default' | 'primary' | 'danger' | 'success' | 'warning' | 'accent';
305
+ type Size = 'xs' | 'sm' | 'md' | 'lg';
306
+ type Radius = 'none' | 'sm' | 'md' | 'lg' | 'full';
307
+ type Appearance = 'solid' | 'outline' | 'light' | 'text';
308
+ type IconPosition = 'start' | 'end';
309
309
  }
310
- type ButtonAppearanceType = BUTTON_APPEARANCE.OUTLINE | BUTTON_APPEARANCE.LIGHT;
311
310
  declare class RtuiButtonComponent {
312
- readonly size: InputSignal<ButtonSizeType>;
313
- readonly color: InputSignal<ButtonColorType>;
314
- readonly appearance: InputSignal<Nullable<ButtonAppearanceType>>;
315
- readonly modifierClass: Signal<string>;
311
+ protected readonly resolvedIconSize: Signal<RtuiIconSizeType>;
312
+ protected readonly spinnerSize: Signal<number>;
313
+ protected readonly modifiers: Signal<Record<string, boolean>>;
314
+ readonly type: InputSignal<IRtuiButton.Type>;
315
+ readonly variant: InputSignal<IRtuiButton.Variant>;
316
+ readonly appearance: InputSignal<IRtuiButton.Appearance | undefined>;
317
+ readonly size: InputSignal<IRtuiButton.Size>;
318
+ readonly radius: InputSignal<IRtuiButton.Radius>;
319
+ readonly icon: InputSignalWithTransform<string, unknown>;
320
+ readonly iconPosition: InputSignal<IRtuiButton.IconPosition>;
321
+ readonly iconSize: InputSignal<RtuiIconSizeType | undefined>;
322
+ readonly text: InputSignalWithTransform<string, unknown>;
323
+ readonly loading: InputSignalWithTransform<boolean, BooleanInput>;
324
+ readonly disabled: InputSignalWithTransform<boolean, BooleanInput>;
325
+ readonly outlined: InputSignalWithTransform<boolean, BooleanInput>;
326
+ readonly fullWidth: InputSignalWithTransform<boolean, BooleanInput>;
327
+ readonly spinnerDiameter: InputSignal<number | undefined>;
328
+ readonly clicked: OutputEmitterRef<void>;
329
+ protected onClick(): void;
316
330
  static ɵfac: i0.ɵɵFactoryDeclaration<RtuiButtonComponent, never>;
317
- static ɵcmp: i0.ɵɵComponentDeclaration<RtuiButtonComponent, "a[rtui-btn], button[rtui-btn]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
331
+ static ɵcmp: i0.ɵɵComponentDeclaration<RtuiButtonComponent, "rtui-button", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "outlined": { "alias": "outlined"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "spinnerDiameter": { "alias": "spinnerDiameter"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["*"], true, [{ directive: typeof i1.MatTooltip; inputs: { "matTooltip": "tooltip"; "matTooltipPosition": "tooltipPosition"; "matTooltipDisabled": "tooltipDisabled"; "matTooltipClass": "tooltipClass"; }; outputs: {}; }]>;
318
332
  }
319
333
 
320
334
  declare class RtuiMultiButtonComponent {
@@ -1689,5 +1703,5 @@ declare class RtThemeDirective {
1689
1703
  static ɵdir: i0.ɵɵDirectiveDeclaration<RtThemeDirective, "[rtTheme]", never, { "rtTheme": { "alias": "rtTheme"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
1690
1704
  }
1691
1705
 
1692
- export { ASIDE_BUTTONS_ENUM, ASIDE_REF, AsideRef, BUTTON_APPEARANCE, BUTTON_COLOR, BUTTON_SIZE, DEFAULT_PAGE_MODEL, DEFAULT_PAGE_SIZE, IAside, IModal, INFO_BADGE_SIZE_ENUM, INFO_BADGE_TYPE_ENUM, IRtActionBar, IRtSnackBar, ISideMenu, ITable, MODAL_WINDOW_SIZE_ENUM, RTUI_TABLE_COMPONENT_TOKEN, RTUI_TABLE_STOP_ROW_CLICK_ATTRIBUTE, RT_ACCENT_ROLE_ENUM, RT_COLOR_SCHEME_STORAGE_KEY, RT_DARK_CLASS, RT_DEFAULT_SCHEME, RT_SCHEME_ATTRIBUTE, RT_THEME_ATTRIBUTE, RT_THEME_AUTO_CLASS, RT_THEME_ENUM, RT_THEME_STORAGE_KEY, RtActionBarService, RtAsideService, RtDynamicListSelectorsDirective, RtModalService, RtPopoverDirective, RtSnackBarService, RtTableConfigService, RtTableSelectorsDirective, RtThemeDirective, RtThemeService, RtuiActionBarComponent, RtuiActionBarContainerComponent, RtuiAsideContainerComponent, RtuiAsideContainerHeaderDirective, RtuiButtonComponent, RtuiClearButtonComponent, RtuiCustomTableCellsDirective, RtuiDynamicInputAdditionalControlDirective, RtuiDynamicInputComponent, RtuiDynamicListComponent, RtuiDynamicListCustomTableCellsDirective, RtuiDynamicListRowActionsDirective, RtuiDynamicListRowAdditionalActionsDirective, RtuiDynamicListToolbarActionsDirective, RtuiDynamicListToolbarSelectorsDirective, RtuiDynamicSelectorAdditionalControlDirective, RtuiDynamicSelectorComponent, RtuiDynamicSelectorItemAdditionalControlDirective, RtuiDynamicSelectorItemTitleDirective, RtuiDynamicSelectorItemTitleProjectionDirective, RtuiDynamicSelectorListActionsComponent, RtuiDynamicSelectorPlaceholderComponent, RtuiDynamicSelectorSelectedListComponent, RtuiFileUploadComponent, RtuiHeaderCenterDirective, RtuiHeaderComponent, RtuiHeaderLeftDirective, RtuiHeaderRightDirective, RtuiImageUploadComponent, RtuiInfoBadgeComponent, RtuiModalComponent, RtuiMultiButtonComponent, RtuiMultiSelectorPopupComponent, RtuiPaginationComponent, RtuiRoundIconButtonComponent, RtuiScrollableContainerComponent, RtuiScrollableContainerContentDirective, RtuiScrollableContainerFooterDirective, RtuiScrollableContainerHeaderDirective, RtuiSideMenuComponent, RtuiSideMenuFooterDirective, RtuiSideMenuHeaderDirective, RtuiSnackBarComponent, RtuiSpinnerComponent, RtuiStopTableRowClickDirective, RtuiTableAdditionalRowActionsDirective, RtuiTableComponent, RtuiTableRowActionsDirective, RtuiTableRowClickDirective, RtuiToggleComponent, RtuiToolbarCenterDirective, RtuiToolbarComponent, RtuiToolbarLeftDirective, RtuiToolbarRightDirective, TABLE_COLUMN_FILTER_TYPES_ENUM, TABLE_COLUMN_TYPES_ENUM, TEXT_CELL_COLOR_ENUM, TOGGLE_SIZE_TYPE_ENUM, darkenHexColor, ddServices, getColorBasedOnBackground, progressDecreaseAnimation, progressIncreaseAnimation, provideRtUi };
1693
- export type { AsideButtonsType, AsidePositions, ButtonAppearanceType, ButtonColorType, ButtonSizeType, IImageUploadFormat, IInfoBadgeSizeType, IRtuiTable, Icon, IconSideType, InfoBadgeType, MenuItemTrigger, ModalWindowSizeType, NameValueType, RtAccentRole, RtColorSchemeRamp, RtThemeType, Select, ToggleSizeType };
1706
+ export { ASIDE_BUTTONS_ENUM, ASIDE_REF, AsideRef, DEFAULT_PAGE_MODEL, DEFAULT_PAGE_SIZE, IAside, IModal, INFO_BADGE_SIZE_ENUM, INFO_BADGE_TYPE_ENUM, IRtActionBar, IRtSnackBar, IRtuiButton, ISideMenu, ITable, MODAL_WINDOW_SIZE_ENUM, RTUI_TABLE_COMPONENT_TOKEN, RTUI_TABLE_STOP_ROW_CLICK_ATTRIBUTE, RT_ACCENT_ROLE_ENUM, RT_COLOR_SCHEME_STORAGE_KEY, RT_DARK_CLASS, RT_DEFAULT_SCHEME, RT_SCHEME_ATTRIBUTE, RT_THEME_ATTRIBUTE, RT_THEME_AUTO_CLASS, RT_THEME_ENUM, RT_THEME_STORAGE_KEY, RtActionBarService, RtAsideService, RtDynamicListSelectorsDirective, RtModalService, RtPopoverDirective, RtSnackBarService, RtTableConfigService, RtTableSelectorsDirective, RtThemeDirective, RtThemeService, RtuiActionBarComponent, RtuiActionBarContainerComponent, RtuiAsideContainerComponent, RtuiAsideContainerHeaderDirective, RtuiButtonComponent, RtuiClearButtonComponent, RtuiCustomTableCellsDirective, RtuiDynamicInputAdditionalControlDirective, RtuiDynamicInputComponent, RtuiDynamicListComponent, RtuiDynamicListCustomTableCellsDirective, RtuiDynamicListRowActionsDirective, RtuiDynamicListRowAdditionalActionsDirective, RtuiDynamicListToolbarActionsDirective, RtuiDynamicListToolbarSelectorsDirective, RtuiDynamicSelectorAdditionalControlDirective, RtuiDynamicSelectorComponent, RtuiDynamicSelectorItemAdditionalControlDirective, RtuiDynamicSelectorItemTitleDirective, RtuiDynamicSelectorItemTitleProjectionDirective, RtuiDynamicSelectorListActionsComponent, RtuiDynamicSelectorPlaceholderComponent, RtuiDynamicSelectorSelectedListComponent, RtuiFileUploadComponent, RtuiHeaderCenterDirective, RtuiHeaderComponent, RtuiHeaderLeftDirective, RtuiHeaderRightDirective, RtuiIconComponent, RtuiImageUploadComponent, RtuiInfoBadgeComponent, RtuiModalComponent, RtuiMultiButtonComponent, RtuiMultiSelectorPopupComponent, RtuiPaginationComponent, RtuiScrollableContainerComponent, RtuiScrollableContainerContentDirective, RtuiScrollableContainerFooterDirective, RtuiScrollableContainerHeaderDirective, RtuiSideMenuComponent, RtuiSideMenuFooterDirective, RtuiSideMenuHeaderDirective, RtuiSnackBarComponent, RtuiSpinnerComponent, RtuiStopTableRowClickDirective, RtuiTableAdditionalRowActionsDirective, RtuiTableComponent, RtuiTableRowActionsDirective, RtuiTableRowClickDirective, RtuiToggleComponent, RtuiToolbarCenterDirective, RtuiToolbarComponent, RtuiToolbarLeftDirective, RtuiToolbarRightDirective, TABLE_COLUMN_FILTER_TYPES_ENUM, TABLE_COLUMN_TYPES_ENUM, TEXT_CELL_COLOR_ENUM, TOGGLE_SIZE_TYPE_ENUM, darkenHexColor, ddServices, getColorBasedOnBackground, progressDecreaseAnimation, progressIncreaseAnimation, provideRtUi };
1707
+ export type { AsideButtonsType, AsidePositions, IImageUploadFormat, IInfoBadgeSizeType, IRtuiTable, Icon, IconSideType, InfoBadgeType, MenuItemTrigger, ModalWindowSizeType, NameValueType, RtAccentRole, RtColorSchemeRamp, RtThemeType, RtuiIconSizeType, RtuiIconThemeType, Select, ToggleSizeType };
package/rt-tools-ui-kit-0.0.20.tgz DELETED
Binary file