@star-ng/ui 0.0.0-placeholder.0 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +147 -3
- package/fesm2022/star-ng-ui-accordion.mjs +376 -0
- package/fesm2022/star-ng-ui-accordion.mjs.map +1 -0
- package/fesm2022/star-ng-ui-autocomplete.mjs +782 -0
- package/fesm2022/star-ng-ui-autocomplete.mjs.map +1 -0
- package/fesm2022/star-ng-ui-avatar.mjs +154 -0
- package/fesm2022/star-ng-ui-avatar.mjs.map +1 -0
- package/fesm2022/star-ng-ui-badge.mjs +153 -0
- package/fesm2022/star-ng-ui-badge.mjs.map +1 -0
- package/fesm2022/star-ng-ui-breadcrumb.mjs +199 -0
- package/fesm2022/star-ng-ui-breadcrumb.mjs.map +1 -0
- package/fesm2022/star-ng-ui-button.mjs +282 -0
- package/fesm2022/star-ng-ui-button.mjs.map +1 -0
- package/fesm2022/star-ng-ui-card.mjs +112 -0
- package/fesm2022/star-ng-ui-card.mjs.map +1 -0
- package/fesm2022/star-ng-ui-chart.mjs +1904 -0
- package/fesm2022/star-ng-ui-chart.mjs.map +1 -0
- package/fesm2022/star-ng-ui-checkbox.mjs +345 -0
- package/fesm2022/star-ng-ui-checkbox.mjs.map +1 -0
- package/fesm2022/star-ng-ui-core.mjs +392 -0
- package/fesm2022/star-ng-ui-core.mjs.map +1 -0
- package/fesm2022/star-ng-ui-data-display.mjs +1556 -0
- package/fesm2022/star-ng-ui-data-display.mjs.map +1 -0
- package/fesm2022/star-ng-ui-date-picker.mjs +2786 -0
- package/fesm2022/star-ng-ui-date-picker.mjs.map +1 -0
- package/fesm2022/star-ng-ui-dialog.mjs +948 -0
- package/fesm2022/star-ng-ui-dialog.mjs.map +1 -0
- package/fesm2022/star-ng-ui-drawer.mjs +158 -0
- package/fesm2022/star-ng-ui-drawer.mjs.map +1 -0
- package/fesm2022/star-ng-ui-editor.mjs +416 -0
- package/fesm2022/star-ng-ui-editor.mjs.map +1 -0
- package/fesm2022/star-ng-ui-field.mjs +378 -0
- package/fesm2022/star-ng-ui-field.mjs.map +1 -0
- package/fesm2022/star-ng-ui-file-upload.mjs +762 -0
- package/fesm2022/star-ng-ui-file-upload.mjs.map +1 -0
- package/fesm2022/star-ng-ui-i18n-de.mjs +179 -0
- package/fesm2022/star-ng-ui-i18n-de.mjs.map +1 -0
- package/fesm2022/star-ng-ui-i18n-es.mjs +179 -0
- package/fesm2022/star-ng-ui-i18n-es.mjs.map +1 -0
- package/fesm2022/star-ng-ui-input-group.mjs +188 -0
- package/fesm2022/star-ng-ui-input-group.mjs.map +1 -0
- package/fesm2022/star-ng-ui-input-mask.mjs +434 -0
- package/fesm2022/star-ng-ui-input-mask.mjs.map +1 -0
- package/fesm2022/star-ng-ui-input-number.mjs +691 -0
- package/fesm2022/star-ng-ui-input-number.mjs.map +1 -0
- package/fesm2022/star-ng-ui-input-otp.mjs +343 -0
- package/fesm2022/star-ng-ui-input-otp.mjs.map +1 -0
- package/fesm2022/star-ng-ui-input-tags.mjs +616 -0
- package/fesm2022/star-ng-ui-input-tags.mjs.map +1 -0
- package/fesm2022/star-ng-ui-knob.mjs +514 -0
- package/fesm2022/star-ng-ui-knob.mjs.map +1 -0
- package/fesm2022/star-ng-ui-layout.mjs +608 -0
- package/fesm2022/star-ng-ui-layout.mjs.map +1 -0
- package/fesm2022/star-ng-ui-listbox.mjs +978 -0
- package/fesm2022/star-ng-ui-listbox.mjs.map +1 -0
- package/fesm2022/star-ng-ui-media.mjs +833 -0
- package/fesm2022/star-ng-ui-media.mjs.map +1 -0
- package/fesm2022/star-ng-ui-menu.mjs +1840 -0
- package/fesm2022/star-ng-ui-menu.mjs.map +1 -0
- package/fesm2022/star-ng-ui-message.mjs +191 -0
- package/fesm2022/star-ng-ui-message.mjs.map +1 -0
- package/fesm2022/star-ng-ui-paginator.mjs +387 -0
- package/fesm2022/star-ng-ui-paginator.mjs.map +1 -0
- package/fesm2022/star-ng-ui-panel.mjs +324 -0
- package/fesm2022/star-ng-ui-panel.mjs.map +1 -0
- package/fesm2022/star-ng-ui-password.mjs +517 -0
- package/fesm2022/star-ng-ui-password.mjs.map +1 -0
- package/fesm2022/star-ng-ui-popover.mjs +241 -0
- package/fesm2022/star-ng-ui-popover.mjs.map +1 -0
- package/fesm2022/star-ng-ui-progress-bar.mjs +183 -0
- package/fesm2022/star-ng-ui-progress-bar.mjs.map +1 -0
- package/fesm2022/star-ng-ui-radio.mjs +411 -0
- package/fesm2022/star-ng-ui-radio.mjs.map +1 -0
- package/fesm2022/star-ng-ui-rating.mjs +211 -0
- package/fesm2022/star-ng-ui-rating.mjs.map +1 -0
- package/fesm2022/star-ng-ui-select-button.mjs +613 -0
- package/fesm2022/star-ng-ui-select-button.mjs.map +1 -0
- package/fesm2022/star-ng-ui-select.mjs +2523 -0
- package/fesm2022/star-ng-ui-select.mjs.map +1 -0
- package/fesm2022/star-ng-ui-skeleton.mjs +160 -0
- package/fesm2022/star-ng-ui-skeleton.mjs.map +1 -0
- package/fesm2022/star-ng-ui-slider.mjs +552 -0
- package/fesm2022/star-ng-ui-slider.mjs.map +1 -0
- package/fesm2022/star-ng-ui-spinner.mjs +148 -0
- package/fesm2022/star-ng-ui-spinner.mjs.map +1 -0
- package/fesm2022/star-ng-ui-stepper.mjs +360 -0
- package/fesm2022/star-ng-ui-stepper.mjs.map +1 -0
- package/fesm2022/star-ng-ui-table.mjs +3477 -0
- package/fesm2022/star-ng-ui-table.mjs.map +1 -0
- package/fesm2022/star-ng-ui-tabs.mjs +464 -0
- package/fesm2022/star-ng-ui-tabs.mjs.map +1 -0
- package/fesm2022/star-ng-ui-tag.mjs +129 -0
- package/fesm2022/star-ng-ui-tag.mjs.map +1 -0
- package/fesm2022/star-ng-ui-theme-switch.mjs +105 -0
- package/fesm2022/star-ng-ui-theme-switch.mjs.map +1 -0
- package/fesm2022/star-ng-ui-theme.mjs +98 -0
- package/fesm2022/star-ng-ui-theme.mjs.map +1 -0
- package/fesm2022/star-ng-ui-toast.mjs +298 -0
- package/fesm2022/star-ng-ui-toast.mjs.map +1 -0
- package/fesm2022/star-ng-ui-toggle-switch.mjs +316 -0
- package/fesm2022/star-ng-ui-toggle-switch.mjs.map +1 -0
- package/fesm2022/star-ng-ui-tooltip.mjs +297 -0
- package/fesm2022/star-ng-ui-tooltip.mjs.map +1 -0
- package/fesm2022/star-ng-ui-transloco.mjs +40 -0
- package/fesm2022/star-ng-ui-transloco.mjs.map +1 -0
- package/fesm2022/star-ng-ui-tree.mjs +1446 -0
- package/fesm2022/star-ng-ui-tree.mjs.map +1 -0
- package/fesm2022/star-ng-ui-utility.mjs +2134 -0
- package/fesm2022/star-ng-ui-utility.mjs.map +1 -0
- package/fesm2022/star-ng-ui.mjs +51 -0
- package/package.json +281 -5
- package/styles/_base.scss +70 -0
- package/styles/_shared.scss +2 -0
- package/styles/_tokens.scss +190 -0
- package/styles/controls/_accordion.scss +75 -0
- package/styles/controls/_autocomplete.scss +44 -0
- package/styles/controls/_avatar.scss +39 -0
- package/styles/controls/_breadcrumb.scss +45 -0
- package/styles/controls/_button.scss +137 -0
- package/styles/controls/_card.scss +38 -0
- package/styles/controls/_chart.scss +214 -0
- package/styles/controls/_chip.scss +51 -0
- package/styles/controls/_choice.scss +153 -0
- package/styles/controls/_data-display.scss +118 -0
- package/styles/controls/_date-picker.scss +300 -0
- package/styles/controls/_dialog.scss +123 -0
- package/styles/controls/_drawer.scss +118 -0
- package/styles/controls/_editor.scss +74 -0
- package/styles/controls/_field.scss +92 -0
- package/styles/controls/_file-upload.scss +136 -0
- package/styles/controls/_input-group.scss +104 -0
- package/styles/controls/_input-mask.scss +46 -0
- package/styles/controls/_input-number.scss +125 -0
- package/styles/controls/_knob.scss +76 -0
- package/styles/controls/_layout.scss +182 -0
- package/styles/controls/_listbox.scss +38 -0
- package/styles/controls/_media.scss +222 -0
- package/styles/controls/_menu.scss +254 -0
- package/styles/controls/_message.scss +48 -0
- package/styles/controls/_org-chart.scss +128 -0
- package/styles/controls/_paginator.scss +59 -0
- package/styles/controls/_panel.scss +83 -0
- package/styles/controls/_popover.scss +40 -0
- package/styles/controls/_progress-bar.scss +74 -0
- package/styles/controls/_select-button.scss +61 -0
- package/styles/controls/_select.scss +216 -0
- package/styles/controls/_skeleton.scss +43 -0
- package/styles/controls/_slider.scss +163 -0
- package/styles/controls/_spinner.scss +34 -0
- package/styles/controls/_stepper.scss +109 -0
- package/styles/controls/_table.scss +523 -0
- package/styles/controls/_tabs.scss +93 -0
- package/styles/controls/_tag.scss +84 -0
- package/styles/controls/_toast.scss +141 -0
- package/styles/controls/_tooltip.scss +14 -0
- package/styles/controls/_tree.scss +113 -0
- package/styles/controls/_utility.scss +654 -0
- package/styles/star-ng.css +5803 -0
- package/styles/star-ng.min.css +1 -0
- package/styles/star-ng.scss +50 -0
- package/theme/star-theme-first-paint.js +1 -0
- package/types/star-ng-ui-accordion.d.ts +82 -0
- package/types/star-ng-ui-autocomplete.d.ts +171 -0
- package/types/star-ng-ui-avatar.d.ts +43 -0
- package/types/star-ng-ui-badge.d.ts +46 -0
- package/types/star-ng-ui-breadcrumb.d.ts +39 -0
- package/types/star-ng-ui-button.d.ts +79 -0
- package/types/star-ng-ui-card.d.ts +29 -0
- package/types/star-ng-ui-chart.d.ts +337 -0
- package/types/star-ng-ui-checkbox.d.ts +92 -0
- package/types/star-ng-ui-core.d.ts +310 -0
- package/types/star-ng-ui-data-display.d.ts +339 -0
- package/types/star-ng-ui-date-picker.d.ts +701 -0
- package/types/star-ng-ui-dialog.d.ts +254 -0
- package/types/star-ng-ui-drawer.d.ts +29 -0
- package/types/star-ng-ui-editor.d.ts +96 -0
- package/types/star-ng-ui-field.d.ts +146 -0
- package/types/star-ng-ui-file-upload.d.ts +192 -0
- package/types/star-ng-ui-i18n-de.d.ts +7 -0
- package/types/star-ng-ui-i18n-es.d.ts +7 -0
- package/types/star-ng-ui-input-group.d.ts +58 -0
- package/types/star-ng-ui-input-mask.d.ts +126 -0
- package/types/star-ng-ui-input-number.d.ts +193 -0
- package/types/star-ng-ui-input-otp.d.ts +86 -0
- package/types/star-ng-ui-input-tags.d.ts +159 -0
- package/types/star-ng-ui-knob.d.ts +121 -0
- package/types/star-ng-ui-layout.d.ts +154 -0
- package/types/star-ng-ui-listbox.d.ts +197 -0
- package/types/star-ng-ui-media.d.ts +161 -0
- package/types/star-ng-ui-menu.d.ts +332 -0
- package/types/star-ng-ui-message.d.ts +52 -0
- package/types/star-ng-ui-paginator.d.ts +85 -0
- package/types/star-ng-ui-panel.d.ts +65 -0
- package/types/star-ng-ui-password.d.ts +129 -0
- package/types/star-ng-ui-popover.d.ts +57 -0
- package/types/star-ng-ui-progress-bar.d.ts +49 -0
- package/types/star-ng-ui-radio.d.ts +116 -0
- package/types/star-ng-ui-rating.d.ts +52 -0
- package/types/star-ng-ui-select-button.d.ts +169 -0
- package/types/star-ng-ui-select.d.ts +540 -0
- package/types/star-ng-ui-skeleton.d.ts +47 -0
- package/types/star-ng-ui-slider.d.ts +145 -0
- package/types/star-ng-ui-spinner.d.ts +29 -0
- package/types/star-ng-ui-stepper.d.ts +89 -0
- package/types/star-ng-ui-table.d.ts +829 -0
- package/types/star-ng-ui-tabs.d.ts +109 -0
- package/types/star-ng-ui-tag.d.ts +35 -0
- package/types/star-ng-ui-theme-switch.d.ts +36 -0
- package/types/star-ng-ui-theme.d.ts +95 -0
- package/types/star-ng-ui-toast.d.ts +84 -0
- package/types/star-ng-ui-toggle-switch.d.ts +81 -0
- package/types/star-ng-ui-tooltip.d.ts +66 -0
- package/types/star-ng-ui-transloco.d.ts +14 -0
- package/types/star-ng-ui-tree.d.ts +310 -0
- package/types/star-ng-ui-utility.d.ts +533 -0
- package/types/star-ng-ui.d.ts +51 -0
|
@@ -0,0 +1,316 @@
|
|
|
1
|
+
import { _IdGenerator } from "@angular/cdk/a11y";
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
import { ChangeDetectionStrategy, Component, booleanAttribute, inject, input, model, output, viewChild } from "@angular/core";
|
|
4
|
+
var StarToggleSwitch = class StarToggleSwitch {
|
|
5
|
+
checked = model(false, ...ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []);
|
|
6
|
+
disabled = input(false, {
|
|
7
|
+
...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
|
|
8
|
+
transform: booleanAttribute
|
|
9
|
+
});
|
|
10
|
+
readonly = input(false, {
|
|
11
|
+
...ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {},
|
|
12
|
+
transform: booleanAttribute
|
|
13
|
+
});
|
|
14
|
+
invalid = input(false, {
|
|
15
|
+
...ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {},
|
|
16
|
+
transform: booleanAttribute
|
|
17
|
+
});
|
|
18
|
+
touched = input(false, {
|
|
19
|
+
...ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {},
|
|
20
|
+
transform: booleanAttribute
|
|
21
|
+
});
|
|
22
|
+
name = input("", ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
|
|
23
|
+
size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
|
|
24
|
+
inputId = input(inject(_IdGenerator).getId("star-switch-"), ...ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []);
|
|
25
|
+
ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
|
|
26
|
+
hasLabel = input(true, {
|
|
27
|
+
...ngDevMode ? { debugName: "hasLabel" } : /* istanbul ignore next */ {},
|
|
28
|
+
transform: booleanAttribute
|
|
29
|
+
});
|
|
30
|
+
touch = output();
|
|
31
|
+
box = viewChild.required("box", ...ngDevMode ? [{ debugName: "box" }] : /* istanbul ignore next */ []);
|
|
32
|
+
onChange(box) {
|
|
33
|
+
if (this.readonly()) {
|
|
34
|
+
box.checked = this.checked();
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
37
|
+
this.checked.set(box.checked);
|
|
38
|
+
}
|
|
39
|
+
focus(options) {
|
|
40
|
+
this.box().nativeElement.focus(options);
|
|
41
|
+
}
|
|
42
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
43
|
+
minVersion: "12.0.0",
|
|
44
|
+
version: "22.2.6",
|
|
45
|
+
ngImport: i0,
|
|
46
|
+
type: StarToggleSwitch,
|
|
47
|
+
deps: [],
|
|
48
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
49
|
+
});
|
|
50
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
51
|
+
minVersion: "17.0.0",
|
|
52
|
+
version: "22.2.6",
|
|
53
|
+
type: StarToggleSwitch,
|
|
54
|
+
isStandalone: true,
|
|
55
|
+
selector: "star-toggle-switch",
|
|
56
|
+
inputs: {
|
|
57
|
+
checked: {
|
|
58
|
+
classPropertyName: "checked",
|
|
59
|
+
publicName: "checked",
|
|
60
|
+
isSignal: true,
|
|
61
|
+
isRequired: false,
|
|
62
|
+
transformFunction: null
|
|
63
|
+
},
|
|
64
|
+
disabled: {
|
|
65
|
+
classPropertyName: "disabled",
|
|
66
|
+
publicName: "disabled",
|
|
67
|
+
isSignal: true,
|
|
68
|
+
isRequired: false,
|
|
69
|
+
transformFunction: null
|
|
70
|
+
},
|
|
71
|
+
readonly: {
|
|
72
|
+
classPropertyName: "readonly",
|
|
73
|
+
publicName: "readonly",
|
|
74
|
+
isSignal: true,
|
|
75
|
+
isRequired: false,
|
|
76
|
+
transformFunction: null
|
|
77
|
+
},
|
|
78
|
+
invalid: {
|
|
79
|
+
classPropertyName: "invalid",
|
|
80
|
+
publicName: "invalid",
|
|
81
|
+
isSignal: true,
|
|
82
|
+
isRequired: false,
|
|
83
|
+
transformFunction: null
|
|
84
|
+
},
|
|
85
|
+
touched: {
|
|
86
|
+
classPropertyName: "touched",
|
|
87
|
+
publicName: "touched",
|
|
88
|
+
isSignal: true,
|
|
89
|
+
isRequired: false,
|
|
90
|
+
transformFunction: null
|
|
91
|
+
},
|
|
92
|
+
name: {
|
|
93
|
+
classPropertyName: "name",
|
|
94
|
+
publicName: "name",
|
|
95
|
+
isSignal: true,
|
|
96
|
+
isRequired: false,
|
|
97
|
+
transformFunction: null
|
|
98
|
+
},
|
|
99
|
+
size: {
|
|
100
|
+
classPropertyName: "size",
|
|
101
|
+
publicName: "size",
|
|
102
|
+
isSignal: true,
|
|
103
|
+
isRequired: false,
|
|
104
|
+
transformFunction: null
|
|
105
|
+
},
|
|
106
|
+
inputId: {
|
|
107
|
+
classPropertyName: "inputId",
|
|
108
|
+
publicName: "inputId",
|
|
109
|
+
isSignal: true,
|
|
110
|
+
isRequired: false,
|
|
111
|
+
transformFunction: null
|
|
112
|
+
},
|
|
113
|
+
ariaLabel: {
|
|
114
|
+
classPropertyName: "ariaLabel",
|
|
115
|
+
publicName: "ariaLabel",
|
|
116
|
+
isSignal: true,
|
|
117
|
+
isRequired: false,
|
|
118
|
+
transformFunction: null
|
|
119
|
+
},
|
|
120
|
+
hasLabel: {
|
|
121
|
+
classPropertyName: "hasLabel",
|
|
122
|
+
publicName: "hasLabel",
|
|
123
|
+
isSignal: true,
|
|
124
|
+
isRequired: false,
|
|
125
|
+
transformFunction: null
|
|
126
|
+
}
|
|
127
|
+
},
|
|
128
|
+
outputs: {
|
|
129
|
+
checked: "checkedChange",
|
|
130
|
+
touch: "touch"
|
|
131
|
+
},
|
|
132
|
+
host: {
|
|
133
|
+
properties: {
|
|
134
|
+
"class.star-switch--disabled": "disabled()",
|
|
135
|
+
"class.star-switch--invalid": "invalid() && touched()",
|
|
136
|
+
"class.star-switch--sm": "size() === 'sm'"
|
|
137
|
+
},
|
|
138
|
+
classAttribute: "star-switch"
|
|
139
|
+
},
|
|
140
|
+
viewQueries: [{
|
|
141
|
+
propertyName: "box",
|
|
142
|
+
first: true,
|
|
143
|
+
predicate: ["box"],
|
|
144
|
+
descendants: true,
|
|
145
|
+
isSignal: true
|
|
146
|
+
}],
|
|
147
|
+
ngImport: i0,
|
|
148
|
+
template: `
|
|
149
|
+
<label class="star-switch__label">
|
|
150
|
+
<input
|
|
151
|
+
#box
|
|
152
|
+
type="checkbox"
|
|
153
|
+
role="switch"
|
|
154
|
+
class="star-switch__input"
|
|
155
|
+
[id]="inputId()"
|
|
156
|
+
[attr.name]="name() || null"
|
|
157
|
+
[checked]="checked()"
|
|
158
|
+
[disabled]="disabled()"
|
|
159
|
+
[attr.aria-checked]="checked()"
|
|
160
|
+
[attr.aria-readonly]="readonly() || null"
|
|
161
|
+
[attr.aria-label]="ariaLabel()"
|
|
162
|
+
(change)="onChange(box)"
|
|
163
|
+
(blur)="touch.emit()"
|
|
164
|
+
/>
|
|
165
|
+
<span class="star-switch__track" aria-hidden="true"
|
|
166
|
+
><span class="star-switch__thumb"></span
|
|
167
|
+
></span>
|
|
168
|
+
@if (hasLabel()) {
|
|
169
|
+
<span class="star-switch__text"><ng-content /></span>
|
|
170
|
+
}
|
|
171
|
+
</label>
|
|
172
|
+
`,
|
|
173
|
+
isInline: true,
|
|
174
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
175
|
+
});
|
|
176
|
+
};
|
|
177
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
178
|
+
minVersion: "12.0.0",
|
|
179
|
+
version: "22.2.6",
|
|
180
|
+
ngImport: i0,
|
|
181
|
+
type: StarToggleSwitch,
|
|
182
|
+
decorators: [{
|
|
183
|
+
type: Component,
|
|
184
|
+
args: [{
|
|
185
|
+
selector: "star-toggle-switch",
|
|
186
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
187
|
+
host: {
|
|
188
|
+
class: "star-switch",
|
|
189
|
+
"[class.star-switch--disabled]": "disabled()",
|
|
190
|
+
"[class.star-switch--invalid]": "invalid() && touched()",
|
|
191
|
+
"[class.star-switch--sm]": "size() === 'sm'"
|
|
192
|
+
},
|
|
193
|
+
template: `
|
|
194
|
+
<label class="star-switch__label">
|
|
195
|
+
<input
|
|
196
|
+
#box
|
|
197
|
+
type="checkbox"
|
|
198
|
+
role="switch"
|
|
199
|
+
class="star-switch__input"
|
|
200
|
+
[id]="inputId()"
|
|
201
|
+
[attr.name]="name() || null"
|
|
202
|
+
[checked]="checked()"
|
|
203
|
+
[disabled]="disabled()"
|
|
204
|
+
[attr.aria-checked]="checked()"
|
|
205
|
+
[attr.aria-readonly]="readonly() || null"
|
|
206
|
+
[attr.aria-label]="ariaLabel()"
|
|
207
|
+
(change)="onChange(box)"
|
|
208
|
+
(blur)="touch.emit()"
|
|
209
|
+
/>
|
|
210
|
+
<span class="star-switch__track" aria-hidden="true"
|
|
211
|
+
><span class="star-switch__thumb"></span
|
|
212
|
+
></span>
|
|
213
|
+
@if (hasLabel()) {
|
|
214
|
+
<span class="star-switch__text"><ng-content /></span>
|
|
215
|
+
}
|
|
216
|
+
</label>
|
|
217
|
+
`
|
|
218
|
+
}]
|
|
219
|
+
}],
|
|
220
|
+
propDecorators: {
|
|
221
|
+
checked: [{
|
|
222
|
+
type: i0.Input,
|
|
223
|
+
args: [{
|
|
224
|
+
isSignal: true,
|
|
225
|
+
alias: "checked",
|
|
226
|
+
required: false
|
|
227
|
+
}]
|
|
228
|
+
}, {
|
|
229
|
+
type: i0.Output,
|
|
230
|
+
args: ["checkedChange"]
|
|
231
|
+
}],
|
|
232
|
+
disabled: [{
|
|
233
|
+
type: i0.Input,
|
|
234
|
+
args: [{
|
|
235
|
+
isSignal: true,
|
|
236
|
+
alias: "disabled",
|
|
237
|
+
required: false
|
|
238
|
+
}]
|
|
239
|
+
}],
|
|
240
|
+
readonly: [{
|
|
241
|
+
type: i0.Input,
|
|
242
|
+
args: [{
|
|
243
|
+
isSignal: true,
|
|
244
|
+
alias: "readonly",
|
|
245
|
+
required: false
|
|
246
|
+
}]
|
|
247
|
+
}],
|
|
248
|
+
invalid: [{
|
|
249
|
+
type: i0.Input,
|
|
250
|
+
args: [{
|
|
251
|
+
isSignal: true,
|
|
252
|
+
alias: "invalid",
|
|
253
|
+
required: false
|
|
254
|
+
}]
|
|
255
|
+
}],
|
|
256
|
+
touched: [{
|
|
257
|
+
type: i0.Input,
|
|
258
|
+
args: [{
|
|
259
|
+
isSignal: true,
|
|
260
|
+
alias: "touched",
|
|
261
|
+
required: false
|
|
262
|
+
}]
|
|
263
|
+
}],
|
|
264
|
+
name: [{
|
|
265
|
+
type: i0.Input,
|
|
266
|
+
args: [{
|
|
267
|
+
isSignal: true,
|
|
268
|
+
alias: "name",
|
|
269
|
+
required: false
|
|
270
|
+
}]
|
|
271
|
+
}],
|
|
272
|
+
size: [{
|
|
273
|
+
type: i0.Input,
|
|
274
|
+
args: [{
|
|
275
|
+
isSignal: true,
|
|
276
|
+
alias: "size",
|
|
277
|
+
required: false
|
|
278
|
+
}]
|
|
279
|
+
}],
|
|
280
|
+
inputId: [{
|
|
281
|
+
type: i0.Input,
|
|
282
|
+
args: [{
|
|
283
|
+
isSignal: true,
|
|
284
|
+
alias: "inputId",
|
|
285
|
+
required: false
|
|
286
|
+
}]
|
|
287
|
+
}],
|
|
288
|
+
ariaLabel: [{
|
|
289
|
+
type: i0.Input,
|
|
290
|
+
args: [{
|
|
291
|
+
isSignal: true,
|
|
292
|
+
alias: "ariaLabel",
|
|
293
|
+
required: false
|
|
294
|
+
}]
|
|
295
|
+
}],
|
|
296
|
+
hasLabel: [{
|
|
297
|
+
type: i0.Input,
|
|
298
|
+
args: [{
|
|
299
|
+
isSignal: true,
|
|
300
|
+
alias: "hasLabel",
|
|
301
|
+
required: false
|
|
302
|
+
}]
|
|
303
|
+
}],
|
|
304
|
+
touch: [{
|
|
305
|
+
type: i0.Output,
|
|
306
|
+
args: ["touch"]
|
|
307
|
+
}],
|
|
308
|
+
box: [{
|
|
309
|
+
type: i0.ViewChild,
|
|
310
|
+
args: ["box", { isSignal: true }]
|
|
311
|
+
}]
|
|
312
|
+
}
|
|
313
|
+
});
|
|
314
|
+
export { StarToggleSwitch };
|
|
315
|
+
|
|
316
|
+
//# sourceMappingURL=star-ng-ui-toggle-switch.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"star-ng-ui-toggle-switch.mjs","names":[],"sources":["../../../projects/star-ng/toggle-switch/toggle-switch.ts"],"sourcesContent":["import { _IdGenerator } from '@angular/cdk/a11y';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n inject,\n input,\n model,\n output,\n viewChild,\n} from '@angular/core';\nimport type { FormCheckboxControl } from '@angular/forms/signals';\n\n/**\n * On/off switch (PrimeNG `p-toggleswitch`). Native checkbox with `role=\"switch\"`, so Space toggles\n * and screen readers announce \"on\" / \"off\".\n *\n * `<star-toggle-switch [(checked)]=\"notify\">Email notifications</star-toggle-switch>`\n */\n@Component({\n selector: 'star-toggle-switch',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'star-switch',\n '[class.star-switch--disabled]': 'disabled()',\n '[class.star-switch--invalid]': 'invalid() && touched()',\n '[class.star-switch--sm]': \"size() === 'sm'\",\n },\n template: `\n <label class=\"star-switch__label\">\n <input\n #box\n type=\"checkbox\"\n role=\"switch\"\n class=\"star-switch__input\"\n [id]=\"inputId()\"\n [attr.name]=\"name() || null\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [attr.aria-checked]=\"checked()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-label]=\"ariaLabel()\"\n (change)=\"onChange(box)\"\n (blur)=\"touch.emit()\"\n />\n <span class=\"star-switch__track\" aria-hidden=\"true\"\n ><span class=\"star-switch__thumb\"></span\n ></span>\n @if (hasLabel()) {\n <span class=\"star-switch__text\"><ng-content /></span>\n }\n </label>\n `,\n})\nexport class StarToggleSwitch implements FormCheckboxControl {\n readonly checked = model(false);\n readonly disabled = input(false, { transform: booleanAttribute });\n readonly readonly = input(false, { transform: booleanAttribute });\n readonly invalid = input(false, { transform: booleanAttribute });\n readonly touched = input(false, { transform: booleanAttribute });\n readonly name = input('');\n readonly size = input<'sm' | 'md'>('md');\n readonly inputId = input(inject(_IdGenerator).getId('star-switch-'));\n readonly ariaLabel = input<string | null>(null);\n /** Set false when the switch has no visible label (then set `ariaLabel`). */\n readonly hasLabel = input(true, { transform: booleanAttribute });\n\n readonly touch = output<void>();\n\n private readonly box = viewChild.required<ElementRef<HTMLInputElement>>('box');\n\n protected onChange(box: HTMLInputElement): void {\n if (this.readonly()) {\n box.checked = this.checked();\n return;\n }\n this.checked.set(box.checked);\n }\n\n focus(options?: FocusOptions): void {\n this.box().nativeElement.focus(options);\n }\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,297 @@
|
|
|
1
|
+
import { _IdGenerator } from "@angular/cdk/a11y";
|
|
2
|
+
import { Directionality } from "@angular/cdk/bidi";
|
|
3
|
+
import { createFlexibleConnectedPositionStrategy, createOverlayRef, createRepositionScrollStrategy } from "@angular/cdk/overlay";
|
|
4
|
+
import { ComponentPortal } from "@angular/cdk/portal";
|
|
5
|
+
import * as i0 from "@angular/core";
|
|
6
|
+
import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, Injector, booleanAttribute, effect, inject, input, numberAttribute, signal } from "@angular/core";
|
|
7
|
+
import { StarDirectionService } from "@star-ng/ui/core";
|
|
8
|
+
const VERTICAL = {
|
|
9
|
+
top: [{
|
|
10
|
+
originX: "center",
|
|
11
|
+
originY: "top",
|
|
12
|
+
overlayX: "center",
|
|
13
|
+
overlayY: "bottom",
|
|
14
|
+
offsetY: -8
|
|
15
|
+
}, {
|
|
16
|
+
originX: "center",
|
|
17
|
+
originY: "bottom",
|
|
18
|
+
overlayX: "center",
|
|
19
|
+
overlayY: "top",
|
|
20
|
+
offsetY: 8
|
|
21
|
+
}],
|
|
22
|
+
bottom: [{
|
|
23
|
+
originX: "center",
|
|
24
|
+
originY: "bottom",
|
|
25
|
+
overlayX: "center",
|
|
26
|
+
overlayY: "top",
|
|
27
|
+
offsetY: 8
|
|
28
|
+
}, {
|
|
29
|
+
originX: "center",
|
|
30
|
+
originY: "top",
|
|
31
|
+
overlayX: "center",
|
|
32
|
+
overlayY: "bottom",
|
|
33
|
+
offsetY: -8
|
|
34
|
+
}]
|
|
35
|
+
};
|
|
36
|
+
function positionsFor(position, rtl) {
|
|
37
|
+
if (position === "top" || position === "bottom") return VERTICAL[position];
|
|
38
|
+
const physical = position === "start" ? rtl ? "right" : "left" : position === "end" ? rtl ? "left" : "right" : position;
|
|
39
|
+
const left = {
|
|
40
|
+
originX: rtl ? "end" : "start",
|
|
41
|
+
originY: "center",
|
|
42
|
+
overlayX: rtl ? "start" : "end",
|
|
43
|
+
overlayY: "center",
|
|
44
|
+
offsetX: -8
|
|
45
|
+
};
|
|
46
|
+
const right = {
|
|
47
|
+
originX: rtl ? "start" : "end",
|
|
48
|
+
originY: "center",
|
|
49
|
+
overlayX: rtl ? "end" : "start",
|
|
50
|
+
overlayY: "center",
|
|
51
|
+
offsetX: 8
|
|
52
|
+
};
|
|
53
|
+
return physical === "left" ? [left, right] : [right, left];
|
|
54
|
+
}
|
|
55
|
+
var StarTooltipPanel = class StarTooltipPanel {
|
|
56
|
+
text = signal("", ...ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []);
|
|
57
|
+
id = signal("", ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
|
|
58
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
59
|
+
minVersion: "12.0.0",
|
|
60
|
+
version: "22.2.6",
|
|
61
|
+
ngImport: i0,
|
|
62
|
+
type: StarTooltipPanel,
|
|
63
|
+
deps: [],
|
|
64
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
65
|
+
});
|
|
66
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
67
|
+
minVersion: "14.0.0",
|
|
68
|
+
version: "22.2.6",
|
|
69
|
+
type: StarTooltipPanel,
|
|
70
|
+
isStandalone: true,
|
|
71
|
+
selector: "star-tooltip-panel",
|
|
72
|
+
host: {
|
|
73
|
+
attributes: { "role": "tooltip" },
|
|
74
|
+
properties: { "id": "id()" },
|
|
75
|
+
classAttribute: "star-tooltip"
|
|
76
|
+
},
|
|
77
|
+
ngImport: i0,
|
|
78
|
+
template: `{{ text() }}`,
|
|
79
|
+
isInline: true,
|
|
80
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
81
|
+
});
|
|
82
|
+
};
|
|
83
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
84
|
+
minVersion: "12.0.0",
|
|
85
|
+
version: "22.2.6",
|
|
86
|
+
ngImport: i0,
|
|
87
|
+
type: StarTooltipPanel,
|
|
88
|
+
decorators: [{
|
|
89
|
+
type: Component,
|
|
90
|
+
args: [{
|
|
91
|
+
selector: "star-tooltip-panel",
|
|
92
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
93
|
+
host: {
|
|
94
|
+
class: "star-tooltip",
|
|
95
|
+
role: "tooltip",
|
|
96
|
+
"[id]": "id()"
|
|
97
|
+
},
|
|
98
|
+
template: `{{ text() }}`
|
|
99
|
+
}]
|
|
100
|
+
}]
|
|
101
|
+
});
|
|
102
|
+
var StarTooltip = class StarTooltip {
|
|
103
|
+
injector = inject(Injector);
|
|
104
|
+
host = inject(ElementRef);
|
|
105
|
+
panelId = inject(_IdGenerator).getId("star-tooltip-");
|
|
106
|
+
directionality = inject(Directionality);
|
|
107
|
+
starTooltip = input("", ...ngDevMode ? [{ debugName: "starTooltip" }] : /* istanbul ignore next */ []);
|
|
108
|
+
starTooltipPosition = input("top", ...ngDevMode ? [{ debugName: "starTooltipPosition" }] : /* istanbul ignore next */ []);
|
|
109
|
+
starTooltipShowDelay = input(300, {
|
|
110
|
+
...ngDevMode ? { debugName: "starTooltipShowDelay" } : /* istanbul ignore next */ {},
|
|
111
|
+
transform: numberAttribute
|
|
112
|
+
});
|
|
113
|
+
starTooltipHideDelay = input(0, {
|
|
114
|
+
...ngDevMode ? { debugName: "starTooltipHideDelay" } : /* istanbul ignore next */ {},
|
|
115
|
+
transform: numberAttribute
|
|
116
|
+
});
|
|
117
|
+
starTooltipDisabled = input(false, {
|
|
118
|
+
...ngDevMode ? { debugName: "starTooltipDisabled" } : /* istanbul ignore next */ {},
|
|
119
|
+
transform: booleanAttribute
|
|
120
|
+
});
|
|
121
|
+
describedBy = signal(null, ...ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []);
|
|
122
|
+
overlayRef = null;
|
|
123
|
+
panelRef = null;
|
|
124
|
+
timer;
|
|
125
|
+
constructor() {
|
|
126
|
+
inject(StarDirectionService);
|
|
127
|
+
effect(() => {
|
|
128
|
+
const text = this.starTooltip();
|
|
129
|
+
if (this.panelRef) this.panelRef.instance.text.set(text);
|
|
130
|
+
if ((!text || this.starTooltipDisabled()) && this.panelRef) this.hide();
|
|
131
|
+
});
|
|
132
|
+
inject(DestroyRef).onDestroy(() => {
|
|
133
|
+
clearTimeout(this.timer);
|
|
134
|
+
this.overlayRef?.dispose();
|
|
135
|
+
});
|
|
136
|
+
}
|
|
137
|
+
scheduleShow() {
|
|
138
|
+
clearTimeout(this.timer);
|
|
139
|
+
this.timer = setTimeout(() => this.show(), this.starTooltipShowDelay());
|
|
140
|
+
}
|
|
141
|
+
scheduleHide() {
|
|
142
|
+
clearTimeout(this.timer);
|
|
143
|
+
this.timer = setTimeout(() => this.hide(), this.starTooltipHideDelay());
|
|
144
|
+
}
|
|
145
|
+
show() {
|
|
146
|
+
if (!this.starTooltip() || this.starTooltipDisabled() || this.panelRef) return;
|
|
147
|
+
const strategy = createFlexibleConnectedPositionStrategy(this.injector, this.host).withPositions(positionsFor(this.starTooltipPosition(), this.directionality.value === "rtl")).withPush(true).withViewportMargin(8);
|
|
148
|
+
this.overlayRef ??= createOverlayRef(this.injector, {
|
|
149
|
+
positionStrategy: strategy,
|
|
150
|
+
scrollStrategy: createRepositionScrollStrategy(this.injector),
|
|
151
|
+
direction: this.directionality,
|
|
152
|
+
usePopover: true,
|
|
153
|
+
panelClass: "star-tooltip-pane"
|
|
154
|
+
});
|
|
155
|
+
this.overlayRef.updatePositionStrategy(strategy);
|
|
156
|
+
this.panelRef = this.overlayRef.attach(new ComponentPortal(StarTooltipPanel));
|
|
157
|
+
this.panelRef.instance.text.set(this.starTooltip());
|
|
158
|
+
this.panelRef.instance.id.set(this.panelId);
|
|
159
|
+
this.describedBy.set(this.panelId);
|
|
160
|
+
}
|
|
161
|
+
hide() {
|
|
162
|
+
clearTimeout(this.timer);
|
|
163
|
+
if (!this.panelRef) return;
|
|
164
|
+
this.overlayRef?.detach();
|
|
165
|
+
this.panelRef = null;
|
|
166
|
+
this.describedBy.set(null);
|
|
167
|
+
}
|
|
168
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
169
|
+
minVersion: "12.0.0",
|
|
170
|
+
version: "22.2.6",
|
|
171
|
+
ngImport: i0,
|
|
172
|
+
type: StarTooltip,
|
|
173
|
+
deps: [],
|
|
174
|
+
target: i0.ɵɵFactoryTarget.Directive
|
|
175
|
+
});
|
|
176
|
+
static ɵdir = i0.ɵɵngDeclareDirective({
|
|
177
|
+
minVersion: "17.1.0",
|
|
178
|
+
version: "22.2.6",
|
|
179
|
+
type: StarTooltip,
|
|
180
|
+
isStandalone: true,
|
|
181
|
+
selector: "[starTooltip]",
|
|
182
|
+
inputs: {
|
|
183
|
+
starTooltip: {
|
|
184
|
+
classPropertyName: "starTooltip",
|
|
185
|
+
publicName: "starTooltip",
|
|
186
|
+
isSignal: true,
|
|
187
|
+
isRequired: false,
|
|
188
|
+
transformFunction: null
|
|
189
|
+
},
|
|
190
|
+
starTooltipPosition: {
|
|
191
|
+
classPropertyName: "starTooltipPosition",
|
|
192
|
+
publicName: "starTooltipPosition",
|
|
193
|
+
isSignal: true,
|
|
194
|
+
isRequired: false,
|
|
195
|
+
transformFunction: null
|
|
196
|
+
},
|
|
197
|
+
starTooltipShowDelay: {
|
|
198
|
+
classPropertyName: "starTooltipShowDelay",
|
|
199
|
+
publicName: "starTooltipShowDelay",
|
|
200
|
+
isSignal: true,
|
|
201
|
+
isRequired: false,
|
|
202
|
+
transformFunction: null
|
|
203
|
+
},
|
|
204
|
+
starTooltipHideDelay: {
|
|
205
|
+
classPropertyName: "starTooltipHideDelay",
|
|
206
|
+
publicName: "starTooltipHideDelay",
|
|
207
|
+
isSignal: true,
|
|
208
|
+
isRequired: false,
|
|
209
|
+
transformFunction: null
|
|
210
|
+
},
|
|
211
|
+
starTooltipDisabled: {
|
|
212
|
+
classPropertyName: "starTooltipDisabled",
|
|
213
|
+
publicName: "starTooltipDisabled",
|
|
214
|
+
isSignal: true,
|
|
215
|
+
isRequired: false,
|
|
216
|
+
transformFunction: null
|
|
217
|
+
}
|
|
218
|
+
},
|
|
219
|
+
host: {
|
|
220
|
+
listeners: {
|
|
221
|
+
"mouseenter": "scheduleShow()",
|
|
222
|
+
"mouseleave": "scheduleHide()",
|
|
223
|
+
"focusin": "scheduleShow()",
|
|
224
|
+
"focusout": "scheduleHide()",
|
|
225
|
+
"keydown.escape": "hide()"
|
|
226
|
+
},
|
|
227
|
+
properties: { "attr.aria-describedby": "describedBy()" }
|
|
228
|
+
},
|
|
229
|
+
ngImport: i0
|
|
230
|
+
});
|
|
231
|
+
};
|
|
232
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
233
|
+
minVersion: "12.0.0",
|
|
234
|
+
version: "22.2.6",
|
|
235
|
+
ngImport: i0,
|
|
236
|
+
type: StarTooltip,
|
|
237
|
+
decorators: [{
|
|
238
|
+
type: Directive,
|
|
239
|
+
args: [{
|
|
240
|
+
selector: "[starTooltip]",
|
|
241
|
+
host: {
|
|
242
|
+
"(mouseenter)": "scheduleShow()",
|
|
243
|
+
"(mouseleave)": "scheduleHide()",
|
|
244
|
+
"(focusin)": "scheduleShow()",
|
|
245
|
+
"(focusout)": "scheduleHide()",
|
|
246
|
+
"(keydown.escape)": "hide()",
|
|
247
|
+
"[attr.aria-describedby]": "describedBy()"
|
|
248
|
+
}
|
|
249
|
+
}]
|
|
250
|
+
}],
|
|
251
|
+
ctorParameters: () => [],
|
|
252
|
+
propDecorators: {
|
|
253
|
+
starTooltip: [{
|
|
254
|
+
type: i0.Input,
|
|
255
|
+
args: [{
|
|
256
|
+
isSignal: true,
|
|
257
|
+
alias: "starTooltip",
|
|
258
|
+
required: false
|
|
259
|
+
}]
|
|
260
|
+
}],
|
|
261
|
+
starTooltipPosition: [{
|
|
262
|
+
type: i0.Input,
|
|
263
|
+
args: [{
|
|
264
|
+
isSignal: true,
|
|
265
|
+
alias: "starTooltipPosition",
|
|
266
|
+
required: false
|
|
267
|
+
}]
|
|
268
|
+
}],
|
|
269
|
+
starTooltipShowDelay: [{
|
|
270
|
+
type: i0.Input,
|
|
271
|
+
args: [{
|
|
272
|
+
isSignal: true,
|
|
273
|
+
alias: "starTooltipShowDelay",
|
|
274
|
+
required: false
|
|
275
|
+
}]
|
|
276
|
+
}],
|
|
277
|
+
starTooltipHideDelay: [{
|
|
278
|
+
type: i0.Input,
|
|
279
|
+
args: [{
|
|
280
|
+
isSignal: true,
|
|
281
|
+
alias: "starTooltipHideDelay",
|
|
282
|
+
required: false
|
|
283
|
+
}]
|
|
284
|
+
}],
|
|
285
|
+
starTooltipDisabled: [{
|
|
286
|
+
type: i0.Input,
|
|
287
|
+
args: [{
|
|
288
|
+
isSignal: true,
|
|
289
|
+
alias: "starTooltipDisabled",
|
|
290
|
+
required: false
|
|
291
|
+
}]
|
|
292
|
+
}]
|
|
293
|
+
}
|
|
294
|
+
});
|
|
295
|
+
export { StarTooltip, StarTooltipPanel };
|
|
296
|
+
|
|
297
|
+
//# sourceMappingURL=star-ng-ui-tooltip.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"star-ng-ui-tooltip.mjs","names":[],"sources":["../../../projects/star-ng/tooltip/tooltip.ts"],"sourcesContent":["import { _IdGenerator } from '@angular/cdk/a11y';\nimport { Directionality } from '@angular/cdk/bidi';\nimport {\n ConnectedPosition,\n createFlexibleConnectedPositionStrategy,\n createOverlayRef,\n createRepositionScrollStrategy,\n OverlayRef,\n} from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n ComponentRef,\n DestroyRef,\n Directive,\n effect,\n ElementRef,\n inject,\n Injector,\n input,\n numberAttribute,\n signal,\n} from '@angular/core';\nimport { StarDirectionService } from '@star-ng/ui/core';\n\n/**\n * Side of the host. `left` and `right` are the physical sides of the screen, as in CSS;\n * `start` and `end` follow the writing direction (`start` is the right side in right-to-left).\n */\nexport type StarTooltipPosition = 'top' | 'bottom' | 'left' | 'right' | 'start' | 'end';\n\nconst VERTICAL: Record<'top' | 'bottom', ConnectedPosition[]> = {\n top: [\n { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -8 },\n { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 8 },\n ],\n bottom: [\n { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 8 },\n { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -8 },\n ],\n};\n\n/**\n * Candidate places of the tooltip, the preferred one first. The CDK turns `start` and `end` around\n * in right-to-left but adds `offsetX` as it is, so a physical side needs the matching origin:\n * the left edge of the host is its `end` in right-to-left.\n */\nfunction positionsFor(position: StarTooltipPosition, rtl: boolean): ConnectedPosition[] {\n if (position === 'top' || position === 'bottom') return VERTICAL[position];\n const physical =\n position === 'start'\n ? rtl\n ? 'right'\n : 'left'\n : position === 'end'\n ? rtl\n ? 'left'\n : 'right'\n : position;\n const left: ConnectedPosition = {\n originX: rtl ? 'end' : 'start',\n originY: 'center',\n overlayX: rtl ? 'start' : 'end',\n overlayY: 'center',\n offsetX: -8,\n };\n const right: ConnectedPosition = {\n originX: rtl ? 'start' : 'end',\n originY: 'center',\n overlayX: rtl ? 'end' : 'start',\n overlayY: 'center',\n offsetX: 8,\n };\n return physical === 'left' ? [left, right] : [right, left];\n}\n\n@Component({\n selector: 'star-tooltip-panel',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { class: 'star-tooltip', role: 'tooltip', '[id]': 'id()' },\n template: `{{ text() }}`,\n})\nexport class StarTooltipPanel {\n readonly text = signal('');\n readonly id = signal('');\n}\n\n/**\n * Tooltip (PrimeNG `pTooltip`): shows on hover and keyboard focus, hides on Escape, links the\n * host with `aria-describedby`. Rendered as a native popover so it appears above dialogs.\n *\n * `<button starTooltip=\"Export to CSV\" starTooltipPosition=\"bottom\">…</button>`\n */\n@Directive({\n selector: '[starTooltip]',\n host: {\n '(mouseenter)': 'scheduleShow()',\n '(mouseleave)': 'scheduleHide()',\n '(focusin)': 'scheduleShow()',\n '(focusout)': 'scheduleHide()',\n '(keydown.escape)': 'hide()',\n '[attr.aria-describedby]': 'describedBy()',\n },\n})\nexport class StarTooltip {\n private readonly injector = inject(Injector);\n private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n private readonly panelId = inject(_IdGenerator).getId('star-tooltip-');\n private readonly directionality = inject(Directionality);\n\n readonly starTooltip = input('');\n readonly starTooltipPosition = input<StarTooltipPosition>('top');\n readonly starTooltipShowDelay = input(300, { transform: numberAttribute });\n readonly starTooltipHideDelay = input(0, { transform: numberAttribute });\n readonly starTooltipDisabled = input(false, { transform: booleanAttribute });\n\n protected readonly describedBy = signal<string | null>(null);\n\n private overlayRef: OverlayRef | null = null;\n private panelRef: ComponentRef<StarTooltipPanel> | null = null;\n private timer: ReturnType<typeof setTimeout> | undefined;\n\n constructor() {\n // Keeps the CDK direction in step with the page, so a tooltip opened after a switch is flipped.\n inject(StarDirectionService);\n effect(() => {\n const text = this.starTooltip();\n if (this.panelRef) this.panelRef.instance.text.set(text);\n if ((!text || this.starTooltipDisabled()) && this.panelRef) this.hide();\n });\n inject(DestroyRef).onDestroy(() => {\n clearTimeout(this.timer);\n this.overlayRef?.dispose();\n });\n }\n\n protected scheduleShow(): void {\n clearTimeout(this.timer);\n this.timer = setTimeout(() => this.show(), this.starTooltipShowDelay());\n }\n\n protected scheduleHide(): void {\n clearTimeout(this.timer);\n this.timer = setTimeout(() => this.hide(), this.starTooltipHideDelay());\n }\n\n show(): void {\n if (!this.starTooltip() || this.starTooltipDisabled() || this.panelRef) return;\n const strategy = createFlexibleConnectedPositionStrategy(this.injector, this.host)\n .withPositions(positionsFor(this.starTooltipPosition(), this.directionality.value === 'rtl'))\n .withPush(true)\n .withViewportMargin(8);\n this.overlayRef ??= createOverlayRef(this.injector, {\n positionStrategy: strategy,\n scrollStrategy: createRepositionScrollStrategy(this.injector),\n direction: this.directionality,\n usePopover: true,\n panelClass: 'star-tooltip-pane',\n });\n this.overlayRef.updatePositionStrategy(strategy);\n this.panelRef = this.overlayRef.attach(new ComponentPortal(StarTooltipPanel));\n this.panelRef.instance.text.set(this.starTooltip());\n this.panelRef.instance.id.set(this.panelId);\n this.describedBy.set(this.panelId);\n }\n\n hide(): void {\n clearTimeout(this.timer);\n if (!this.panelRef) return;\n this.overlayRef?.detach();\n this.panelRef = null;\n this.describedBy.set(null);\n }\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { inject } from "@angular/core";
|
|
2
|
+
import { toSignal } from "@angular/core/rxjs-interop";
|
|
3
|
+
import { TranslocoService } from "@jsverse/transloco";
|
|
4
|
+
import { STAR_UI_TEXT, STAR_UI_TEXT_DEFAULTS, STAR_UI_TEXT_PARAMS } from "@star-ng/ui/core";
|
|
5
|
+
import { map, merge } from "rxjs";
|
|
6
|
+
function provideStarUiTextFromTransloco(prefix = "ui") {
|
|
7
|
+
return {
|
|
8
|
+
provide: STAR_UI_TEXT,
|
|
9
|
+
useFactory: () => {
|
|
10
|
+
const transloco = inject(TranslocoService);
|
|
11
|
+
let version = 0;
|
|
12
|
+
const changed = toSignal(merge(transloco.langChanges$, transloco.events$).pipe(map(() => ++version)), { initialValue: version });
|
|
13
|
+
const translate = (name, fallback, params) => {
|
|
14
|
+
changed();
|
|
15
|
+
const key = `${prefix}.${name}`;
|
|
16
|
+
const value = transloco.translate(key, params);
|
|
17
|
+
return value && value !== key ? value : fallback;
|
|
18
|
+
};
|
|
19
|
+
const text = {};
|
|
20
|
+
for (const name of Object.keys(STAR_UI_TEXT_DEFAULTS)) {
|
|
21
|
+
const fallback = STAR_UI_TEXT_DEFAULTS[name];
|
|
22
|
+
if (typeof fallback === "function") {
|
|
23
|
+
const names = STAR_UI_TEXT_PARAMS[name] ?? [];
|
|
24
|
+
text[name] = (...args) => {
|
|
25
|
+
const params = Object.fromEntries(names.map((param, i) => [param, args[i]]));
|
|
26
|
+
const english = fallback(...args);
|
|
27
|
+
return translate(name, english, params);
|
|
28
|
+
};
|
|
29
|
+
} else Object.defineProperty(text, name, {
|
|
30
|
+
enumerable: true,
|
|
31
|
+
get: () => translate(name, fallback)
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
return text;
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
export { provideStarUiTextFromTransloco };
|
|
39
|
+
|
|
40
|
+
//# sourceMappingURL=star-ng-ui-transloco.mjs.map
|