@phcdevworks/spectre-components 0.0.1 → 1.0.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/dist/base-DQtCQ-dP.d.cts +22 -0
- package/dist/base-DQtCQ-dP.d.ts +22 -0
- package/dist/button.cjs +149 -124
- package/dist/button.cjs.map +1 -1
- package/dist/button.d.cts +15 -40
- package/dist/button.d.ts +15 -40
- package/dist/button.js +150 -125
- package/dist/button.js.map +1 -1
- package/dist/checkbox.cjs +140 -25
- package/dist/checkbox.cjs.map +1 -1
- package/dist/checkbox.d.cts +32 -32
- package/dist/checkbox.d.ts +32 -32
- package/dist/checkbox.js +141 -26
- package/dist/checkbox.js.map +1 -1
- package/dist/fieldset.cjs +96 -50
- package/dist/fieldset.cjs.map +1 -1
- package/dist/fieldset.d.cts +24 -36
- package/dist/fieldset.d.ts +24 -36
- package/dist/fieldset.js +96 -50
- package/dist/fieldset.js.map +1 -1
- package/dist/form-iI7vV-3W.d.cts +6 -0
- package/dist/form-iI7vV-3W.d.ts +6 -0
- package/dist/index.cjs +298 -826
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +5 -2
- package/dist/index.d.ts +5 -2
- package/dist/index.js +300 -827
- package/dist/index.js.map +1 -1
- package/dist/input.cjs +70 -59
- package/dist/input.cjs.map +1 -1
- package/dist/input.d.cts +25 -36
- package/dist/input.d.ts +25 -36
- package/dist/input.js +70 -59
- package/dist/input.js.map +1 -1
- package/dist/label.cjs +101 -38
- package/dist/label.cjs.map +1 -1
- package/dist/label.d.cts +16 -20
- package/dist/label.d.ts +16 -20
- package/dist/label.js +101 -38
- package/dist/label.js.map +1 -1
- package/dist/projectable-DcnBRiko.d.cts +17 -0
- package/dist/projectable-SzbPvXfM.d.ts +17 -0
- package/dist/radio.cjs +140 -25
- package/dist/radio.cjs.map +1 -1
- package/dist/radio.d.cts +32 -32
- package/dist/radio.d.ts +32 -32
- package/dist/radio.js +141 -26
- package/dist/radio.js.map +1 -1
- package/dist/select.cjs +142 -113
- package/dist/select.cjs.map +1 -1
- package/dist/select.d.cts +23 -41
- package/dist/select.d.ts +23 -41
- package/dist/select.js +143 -113
- package/dist/select.js.map +1 -1
- package/dist/textarea.cjs +24 -223
- package/dist/textarea.cjs.map +1 -1
- package/dist/textarea.d.cts +20 -32
- package/dist/textarea.d.ts +20 -32
- package/dist/textarea.js +24 -223
- package/dist/textarea.js.map +1 -1
- package/package.json +11 -11
package/dist/input.js
CHANGED
|
@@ -4,46 +4,12 @@ import { ifDefined } from 'lit/directives/if-defined.js';
|
|
|
4
4
|
import { getInputClasses } from '@phcdevworks/spectre-ui';
|
|
5
5
|
|
|
6
6
|
// src/components/input/sp-input.ts
|
|
7
|
-
var
|
|
8
|
-
"text",
|
|
9
|
-
"email",
|
|
10
|
-
"password",
|
|
11
|
-
"search",
|
|
12
|
-
"tel",
|
|
13
|
-
"url",
|
|
14
|
-
"number",
|
|
15
|
-
"date",
|
|
16
|
-
"datetime-local",
|
|
17
|
-
"month",
|
|
18
|
-
"time",
|
|
19
|
-
"week"
|
|
20
|
-
];
|
|
21
|
-
var spectreInputSizes = ["sm", "md", "lg"];
|
|
22
|
-
function isInputType(value) {
|
|
23
|
-
return spectreInputTypes.includes(value);
|
|
24
|
-
}
|
|
25
|
-
function isInputSize(value) {
|
|
26
|
-
return spectreInputSizes.includes(value);
|
|
27
|
-
}
|
|
28
|
-
var SpectreInputElement = class extends LitElement {
|
|
7
|
+
var SpectreBaseElement = class extends LitElement {
|
|
29
8
|
constructor() {
|
|
30
9
|
super(...arguments);
|
|
31
10
|
this.ariaLabel = null;
|
|
32
11
|
this.ariaLabelledBy = null;
|
|
33
12
|
this.ariaDescribedBy = null;
|
|
34
|
-
this.autofocus = false;
|
|
35
|
-
this.disabled = false;
|
|
36
|
-
this.fullWidth = false;
|
|
37
|
-
this.invalid = false;
|
|
38
|
-
this.loading = false;
|
|
39
|
-
this.pill = false;
|
|
40
|
-
this.readonly = false;
|
|
41
|
-
this.required = false;
|
|
42
|
-
this.size = "md";
|
|
43
|
-
this.success = false;
|
|
44
|
-
this.title = "";
|
|
45
|
-
this.type = "text";
|
|
46
|
-
this.value = "";
|
|
47
13
|
}
|
|
48
14
|
get id() {
|
|
49
15
|
return this._id ?? "";
|
|
@@ -59,6 +25,8 @@ var SpectreInputElement = class extends LitElement {
|
|
|
59
25
|
}
|
|
60
26
|
this.requestUpdate();
|
|
61
27
|
}
|
|
28
|
+
// Spectre components intentionally render in light DOM so the global
|
|
29
|
+
// `@phcdevworks/spectre-ui` styling contract can apply directly.
|
|
62
30
|
createRenderRoot() {
|
|
63
31
|
return this;
|
|
64
32
|
}
|
|
@@ -95,6 +63,62 @@ var SpectreInputElement = class extends LitElement {
|
|
|
95
63
|
}
|
|
96
64
|
super.removeAttribute(qualifiedName);
|
|
97
65
|
}
|
|
66
|
+
get forwardedAriaLabel() {
|
|
67
|
+
const value = this.ariaLabel?.trim();
|
|
68
|
+
return value ? value : void 0;
|
|
69
|
+
}
|
|
70
|
+
get forwardedAriaLabelledBy() {
|
|
71
|
+
const value = this.ariaLabelledBy?.trim();
|
|
72
|
+
return value ? value : void 0;
|
|
73
|
+
}
|
|
74
|
+
get forwardedAriaDescribedBy() {
|
|
75
|
+
const value = this.ariaDescribedBy?.trim();
|
|
76
|
+
return value ? value : void 0;
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
|
+
SpectreBaseElement.properties = {
|
|
80
|
+
ariaLabel: { attribute: "aria-label", type: String },
|
|
81
|
+
ariaLabelledBy: { attribute: "aria-labelledby", type: String },
|
|
82
|
+
ariaDescribedBy: { attribute: "aria-describedby", type: String }
|
|
83
|
+
};
|
|
84
|
+
var spectreInputSizes = ["sm", "md", "lg"];
|
|
85
|
+
function isInputSize(value) {
|
|
86
|
+
return spectreInputSizes.includes(value);
|
|
87
|
+
}
|
|
88
|
+
var spectreInputTypes = [
|
|
89
|
+
"text",
|
|
90
|
+
"email",
|
|
91
|
+
"password",
|
|
92
|
+
"search",
|
|
93
|
+
"tel",
|
|
94
|
+
"url",
|
|
95
|
+
"number",
|
|
96
|
+
"date",
|
|
97
|
+
"datetime-local",
|
|
98
|
+
"month",
|
|
99
|
+
"time",
|
|
100
|
+
"week"
|
|
101
|
+
];
|
|
102
|
+
function isInputType(value) {
|
|
103
|
+
return spectreInputTypes.includes(value);
|
|
104
|
+
}
|
|
105
|
+
var SpectreInputElement = class extends SpectreBaseElement {
|
|
106
|
+
constructor() {
|
|
107
|
+
super(...arguments);
|
|
108
|
+
this.autofocus = false;
|
|
109
|
+
this.disabled = false;
|
|
110
|
+
this.fullWidth = false;
|
|
111
|
+
this.invalid = false;
|
|
112
|
+
this.loading = false;
|
|
113
|
+
this.pill = false;
|
|
114
|
+
this.readonly = false;
|
|
115
|
+
this.required = false;
|
|
116
|
+
this.size = "md";
|
|
117
|
+
this.success = false;
|
|
118
|
+
this.title = "";
|
|
119
|
+
this.type = "text";
|
|
120
|
+
this.value = "";
|
|
121
|
+
}
|
|
98
122
|
willUpdate(changedProperties) {
|
|
99
123
|
if (changedProperties.has("size") && !isInputSize(this.size)) {
|
|
100
124
|
this.size = "md";
|
|
@@ -130,18 +154,6 @@ var SpectreInputElement = class extends LitElement {
|
|
|
130
154
|
get nativeInput() {
|
|
131
155
|
return this.querySelector("[data-sp-input-native]");
|
|
132
156
|
}
|
|
133
|
-
get forwardedAriaLabel() {
|
|
134
|
-
const ariaLabel = this.ariaLabel?.trim();
|
|
135
|
-
return ariaLabel ? ariaLabel : void 0;
|
|
136
|
-
}
|
|
137
|
-
get forwardedAriaLabelledBy() {
|
|
138
|
-
const ariaLabelledBy = this.ariaLabelledBy?.trim();
|
|
139
|
-
return ariaLabelledBy ? ariaLabelledBy : void 0;
|
|
140
|
-
}
|
|
141
|
-
get forwardedAriaDescribedBy() {
|
|
142
|
-
const ariaDescribedBy = this.ariaDescribedBy?.trim();
|
|
143
|
-
return ariaDescribedBy ? ariaDescribedBy : void 0;
|
|
144
|
-
}
|
|
145
157
|
handleInput(event) {
|
|
146
158
|
const input = event.currentTarget;
|
|
147
159
|
this.value = input.value;
|
|
@@ -169,6 +181,7 @@ var SpectreInputElement = class extends LitElement {
|
|
|
169
181
|
class=${this.inputClasses}
|
|
170
182
|
data-sp-input-native
|
|
171
183
|
?disabled=${this.isDisabled}
|
|
184
|
+
form=${ifDefined(this.form)}
|
|
172
185
|
?readonly=${this.readonly}
|
|
173
186
|
?required=${this.required}
|
|
174
187
|
id=${ifDefined(this.id || void 0)}
|
|
@@ -190,27 +203,25 @@ var SpectreInputElement = class extends LitElement {
|
|
|
190
203
|
}
|
|
191
204
|
};
|
|
192
205
|
SpectreInputElement.properties = {
|
|
193
|
-
|
|
194
|
-
ariaLabelledBy: { attribute: "aria-labelledby", type: String },
|
|
195
|
-
ariaDescribedBy: { attribute: "aria-describedby", type: String },
|
|
196
|
-
autocomplete: { type: String },
|
|
206
|
+
autocomplete: { type: String, reflect: true },
|
|
197
207
|
autofocus: { type: Boolean, reflect: true },
|
|
198
208
|
disabled: { type: Boolean, reflect: true },
|
|
209
|
+
form: { type: String },
|
|
199
210
|
fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
|
|
200
|
-
inputmode: { type: String },
|
|
211
|
+
inputmode: { type: String, reflect: true },
|
|
201
212
|
invalid: { type: Boolean, reflect: true },
|
|
202
213
|
loading: { type: Boolean, reflect: true },
|
|
203
|
-
max: { type: String },
|
|
204
|
-
maxlength: { type: Number },
|
|
205
|
-
min: { type: String },
|
|
206
|
-
minlength: { type: Number },
|
|
207
|
-
name: { type: String },
|
|
214
|
+
max: { type: String, reflect: true },
|
|
215
|
+
maxlength: { type: Number, reflect: true },
|
|
216
|
+
min: { type: String, reflect: true },
|
|
217
|
+
minlength: { type: Number, reflect: true },
|
|
218
|
+
name: { type: String, reflect: true },
|
|
208
219
|
pill: { type: Boolean, reflect: true },
|
|
209
|
-
placeholder: { type: String },
|
|
220
|
+
placeholder: { type: String, reflect: true },
|
|
210
221
|
readonly: { type: Boolean, reflect: true },
|
|
211
222
|
required: { type: Boolean, reflect: true },
|
|
212
223
|
size: { type: String, reflect: true },
|
|
213
|
-
step: { type: String },
|
|
224
|
+
step: { type: String, reflect: true },
|
|
214
225
|
success: { type: Boolean, reflect: true },
|
|
215
226
|
title: { type: String, reflect: true },
|
|
216
227
|
type: { type: String, reflect: true },
|
package/dist/input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/input/sp-input.ts"],"names":[],"mappings":"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","file":"input.js","sourcesContent":["import { LitElement, html } from 'lit';\nimport { live } from 'lit/directives/live.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport {\n getInputClasses,\n type InputSize,\n} from '@phcdevworks/spectre-ui';\n\nexport const spectreInputTypes = [\n 'text',\n 'email',\n 'password',\n 'search',\n 'tel',\n 'url',\n 'number',\n 'date',\n 'datetime-local',\n 'month',\n 'time',\n 'week',\n] as const;\n\nexport const spectreInputSizes = ['sm', 'md', 'lg'] as const;\n\nexport type SpectreInputType = (typeof spectreInputTypes)[number];\nexport type SpectreInputSize = (typeof spectreInputSizes)[number];\n\nexport interface SpectreInputProps {\n autocomplete?: string;\n autofocus?: boolean;\n disabled?: boolean;\n fullWidth?: boolean;\n inputmode?: string;\n invalid?: boolean;\n loading?: boolean;\n max?: string;\n maxlength?: number | undefined;\n min?: string;\n minlength?: number | undefined;\n name?: string;\n pill?: boolean;\n placeholder?: string;\n readonly?: boolean;\n required?: boolean;\n size?: SpectreInputSize;\n step?: string;\n success?: boolean;\n title?: string;\n type?: SpectreInputType;\n value?: string;\n}\n\nfunction isInputType(value: string): value is SpectreInputType {\n return (spectreInputTypes as readonly string[]).includes(value);\n}\n\nexport function isInputSize(value: string): value is InputSize {\n return (spectreInputSizes as readonly string[]).includes(value);\n}\n\nexport class SpectreInputElement extends LitElement implements SpectreInputProps {\n static properties = {\n ariaLabel: { attribute: 'aria-label', type: String },\n ariaLabelledBy: { attribute: 'aria-labelledby', type: String },\n ariaDescribedBy: { attribute: 'aria-describedby', type: String },\n autocomplete: { type: String },\n autofocus: { type: Boolean, reflect: true },\n disabled: { type: Boolean, reflect: true },\n fullWidth: { attribute: 'full-width', type: Boolean, reflect: true },\n inputmode: { type: String },\n invalid: { type: Boolean, reflect: true },\n loading: { type: Boolean, reflect: true },\n max: { type: String },\n maxlength: { type: Number },\n min: { type: String },\n minlength: { type: Number },\n name: { type: String },\n pill: { type: Boolean, reflect: true },\n placeholder: { type: String },\n readonly: { type: Boolean, reflect: true },\n required: { type: Boolean, reflect: true },\n size: { type: String, reflect: true },\n step: { type: String },\n success: { type: Boolean, reflect: true },\n title: { type: String, reflect: true },\n type: { type: String, reflect: true },\n value: { type: String },\n };\n\n ariaLabel: string | null = null;\n ariaLabelledBy: string | null = null;\n ariaDescribedBy: string | null = null;\n autocomplete?: string;\n autofocus = false;\n disabled = false;\n fullWidth = false;\n inputmode?: string;\n invalid = false;\n loading = false;\n max?: string;\n maxlength?: number | undefined;\n min?: string;\n minlength?: number | undefined;\n name?: string;\n pill = false;\n placeholder?: string;\n readonly = false;\n required = false;\n size: SpectreInputSize = 'md';\n step?: string;\n success = false;\n override title = '';\n type: SpectreInputType = 'text';\n value = '';\n private _id?: string;\n\n override get id(): string {\n return this._id ?? '';\n }\n\n override set id(value: string) {\n if ((this._id ?? '') === value) {\n return;\n }\n\n this._id = value;\n\n const host = this as unknown as HTMLElement;\n if (HTMLElement.prototype.hasAttribute.call(host, 'id')) {\n HTMLElement.prototype.removeAttribute.call(host, 'id');\n }\n\n this.requestUpdate();\n }\n\n createRenderRoot(): this {\n // Spectre components intentionally render in light DOM so the global\n // `@phcdevworks/spectre-ui` styling contract can apply directly.\n return this;\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n const hostId = super.getAttribute('id');\n\n if (hostId !== null) {\n this.id = hostId;\n }\n }\n\n override getAttribute(qualifiedName: string): string | null {\n if (qualifiedName === 'id') {\n return this.id || null;\n }\n\n return super.getAttribute(qualifiedName);\n }\n\n override hasAttribute(qualifiedName: string): boolean {\n if (qualifiedName === 'id') {\n return this.id !== '';\n }\n\n return super.hasAttribute(qualifiedName);\n }\n\n override setAttribute(qualifiedName: string, value: string): void {\n if (qualifiedName === 'id') {\n this.id = value;\n return;\n }\n\n super.setAttribute(qualifiedName, value);\n }\n\n override removeAttribute(qualifiedName: string): void {\n if (qualifiedName === 'id') {\n this.id = '';\n return;\n }\n\n super.removeAttribute(qualifiedName);\n }\n\n protected override willUpdate(changedProperties: Map<PropertyKey, unknown>): void {\n if (changedProperties.has('size') && !isInputSize(this.size)) {\n this.size = 'md';\n }\n\n if (changedProperties.has('type') && !isInputType(this.type)) {\n this.type = 'text';\n }\n\n if (changedProperties.has('value') && this.value == null) {\n this.value = '';\n }\n\n if (changedProperties.has('maxlength')) {\n if (\n this.maxlength == null ||\n !Number.isInteger(this.maxlength) ||\n this.maxlength < 0\n ) {\n this.maxlength = undefined;\n }\n }\n\n if (changedProperties.has('minlength')) {\n if (\n this.minlength == null ||\n !Number.isInteger(this.minlength) ||\n this.minlength < 0\n ) {\n this.minlength = undefined;\n }\n }\n }\n\n private get inputClasses(): string {\n return getInputClasses({\n fullWidth: this.fullWidth,\n pill: this.pill,\n size: this.size,\n state: this.isDisabled\n ? this.disabled\n ? 'disabled'\n : 'loading'\n : this.invalid\n ? 'error'\n : this.success\n ? 'success'\n : 'default',\n });\n }\n\n private get isDisabled(): boolean {\n return this.disabled || this.loading;\n }\n\n private get nativeInput(): HTMLInputElement | null {\n return this.querySelector('[data-sp-input-native]');\n }\n\n private get forwardedAriaLabel(): string | undefined {\n const ariaLabel = this.ariaLabel?.trim();\n return ariaLabel ? ariaLabel : undefined;\n }\n\n private get forwardedAriaLabelledBy(): string | undefined {\n const ariaLabelledBy = this.ariaLabelledBy?.trim();\n return ariaLabelledBy ? ariaLabelledBy : undefined;\n }\n\n private get forwardedAriaDescribedBy(): string | undefined {\n const ariaDescribedBy = this.ariaDescribedBy?.trim();\n return ariaDescribedBy ? ariaDescribedBy : undefined;\n }\n\n private handleInput(event: Event): void {\n const input = event.currentTarget as HTMLInputElement;\n this.value = input.value;\n }\n\n private handleChange(event: Event): void {\n const input = event.currentTarget as HTMLInputElement;\n this.value = input.value;\n }\n\n override focus(options?: FocusOptions): void {\n this.nativeInput?.focus(options);\n }\n\n override blur(): void {\n this.nativeInput?.blur();\n }\n\n override render() {\n return html`\n <input\n aria-busy=${this.loading ? 'true' : 'false'}\n aria-describedby=${ifDefined(this.forwardedAriaDescribedBy)}\n aria-invalid=${ifDefined(this.invalid ? 'true' : undefined)}\n aria-label=${ifDefined(this.forwardedAriaLabel)}\n aria-labelledby=${ifDefined(this.forwardedAriaLabelledBy)}\n autocomplete=${ifDefined(this.autocomplete)}\n ?autofocus=${this.autofocus}\n class=${this.inputClasses}\n data-sp-input-native\n ?disabled=${this.isDisabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n id=${ifDefined(this.id || undefined)}\n inputmode=${ifDefined(this.inputmode)}\n max=${ifDefined(this.max)}\n maxlength=${ifDefined(this.maxlength)}\n min=${ifDefined(this.min)}\n minlength=${ifDefined(this.minlength)}\n name=${ifDefined(this.name)}\n placeholder=${ifDefined(this.placeholder)}\n step=${ifDefined(this.step)}\n title=${ifDefined(this.title || undefined)}\n type=${this.type}\n .value=${live(this.value)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n />\n `;\n }\n}\n\nexport function defineSpectreInput(tagName = 'sp-input'): typeof SpectreInputElement {\n const existingElement = customElements.get(tagName);\n\n if (existingElement) {\n return existingElement as unknown as typeof SpectreInputElement;\n }\n\n customElements.define(tagName, SpectreInputElement);\n return SpectreInputElement;\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/utils/base.ts","../src/utils/form.ts","../src/components/input/sp-input.ts"],"names":[],"mappings":"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","file":"input.js","sourcesContent":["import { LitElement, type PropertyDeclarations } from 'lit';\n\nexport class SpectreBaseElement extends LitElement {\n static properties: PropertyDeclarations = {\n ariaLabel: { attribute: 'aria-label', type: String },\n ariaLabelledBy: { attribute: 'aria-labelledby', type: String },\n ariaDescribedBy: { attribute: 'aria-describedby', type: String },\n };\n\n ariaLabel: string | null = null;\n ariaLabelledBy: string | null = null;\n ariaDescribedBy: string | null = null;\n\n private _id?: string;\n\n override get id(): string {\n return this._id ?? '';\n }\n\n override set id(value: string) {\n if ((this._id ?? '') === value) {\n return;\n }\n\n this._id = value;\n\n const host = this as unknown as HTMLElement;\n if (HTMLElement.prototype.hasAttribute.call(host, 'id')) {\n HTMLElement.prototype.removeAttribute.call(host, 'id');\n }\n\n this.requestUpdate();\n }\n\n // Spectre components intentionally render in light DOM so the global\n // `@phcdevworks/spectre-ui` styling contract can apply directly.\n createRenderRoot(): this {\n return this;\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n const hostId = super.getAttribute('id');\n if (hostId !== null) {\n this.id = hostId;\n }\n }\n\n override getAttribute(qualifiedName: string): string | null {\n if (qualifiedName === 'id') {\n return this.id || null;\n }\n\n return super.getAttribute(qualifiedName);\n }\n\n override hasAttribute(qualifiedName: string): boolean {\n if (qualifiedName === 'id') {\n return this.id !== '';\n }\n\n return super.hasAttribute(qualifiedName);\n }\n\n override setAttribute(qualifiedName: string, value: string): void {\n if (qualifiedName === 'id') {\n this.id = value;\n return;\n }\n\n super.setAttribute(qualifiedName, value);\n }\n\n override removeAttribute(qualifiedName: string): void {\n if (qualifiedName === 'id') {\n this.id = '';\n return;\n }\n\n super.removeAttribute(qualifiedName);\n }\n\n protected get forwardedAriaLabel(): string | undefined {\n const value = this.ariaLabel?.trim();\n return value ? value : undefined;\n }\n\n protected get forwardedAriaLabelledBy(): string | undefined {\n const value = this.ariaLabelledBy?.trim();\n return value ? value : undefined;\n }\n\n protected get forwardedAriaDescribedBy(): string | undefined {\n const value = this.ariaDescribedBy?.trim();\n return value ? value : undefined;\n }\n}\n","import { type InputSize } from '@phcdevworks/spectre-ui';\n\nexport const spectreInputSizes = ['sm', 'md', 'lg'] as const;\nexport type SpectreInputSize = (typeof spectreInputSizes)[number];\n\nexport function isInputSize(value: string): value is InputSize {\n return (spectreInputSizes as readonly string[]).includes(value);\n}\n\nexport const spectreInputTypes = [\n 'text',\n 'email',\n 'password',\n 'search',\n 'tel',\n 'url',\n 'number',\n 'date',\n 'datetime-local',\n 'month',\n 'time',\n 'week',\n] as const;\n\nexport type SpectreInputType = (typeof spectreInputTypes)[number];\n\nexport function isInputType(value: string): value is SpectreInputType {\n return (spectreInputTypes as readonly string[]).includes(value);\n}\n","import { html } from 'lit';\nimport { live } from 'lit/directives/live.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { SpectreBaseElement } from '../../utils/base';\nimport {\n spectreInputSizes,\n isInputSize,\n type SpectreInputSize,\n spectreInputTypes,\n isInputType,\n type SpectreInputType,\n} from '../../utils/form';\n\nimport { getInputClasses } from '@phcdevworks/spectre-ui';\n\nexport {\n spectreInputSizes,\n isInputSize,\n type SpectreInputSize,\n spectreInputTypes,\n isInputType,\n type SpectreInputType,\n};\n\nexport interface SpectreInputProps {\n ariaLabel?: string | null;\n ariaLabelledBy?: string | null;\n ariaDescribedBy?: string | null;\n autocomplete?: string;\n autofocus?: boolean;\n disabled?: boolean;\n form?: string;\n fullWidth?: boolean;\n inputmode?: string;\n invalid?: boolean;\n loading?: boolean;\n max?: string;\n maxlength?: number | undefined;\n min?: string;\n minlength?: number | undefined;\n name?: string | undefined;\n pill?: boolean;\n placeholder?: string | undefined;\n readonly?: boolean;\n required?: boolean;\n size?: SpectreInputSize;\n step?: string;\n success?: boolean;\n title?: string;\n type?: SpectreInputType;\n value?: string;\n}\n\nexport class SpectreInputElement extends SpectreBaseElement implements SpectreInputProps {\n static properties = {\n autocomplete: { type: String, reflect: true },\n autofocus: { type: Boolean, reflect: true },\n disabled: { type: Boolean, reflect: true },\n form: { type: String },\n fullWidth: { attribute: 'full-width', type: Boolean, reflect: true },\n inputmode: { type: String, reflect: true },\n invalid: { type: Boolean, reflect: true },\n loading: { type: Boolean, reflect: true },\n max: { type: String, reflect: true },\n maxlength: { type: Number, reflect: true },\n min: { type: String, reflect: true },\n minlength: { type: Number, reflect: true },\n name: { type: String, reflect: true },\n pill: { type: Boolean, reflect: true },\n placeholder: { type: String, reflect: true },\n readonly: { type: Boolean, reflect: true },\n required: { type: Boolean, reflect: true },\n size: { type: String, reflect: true },\n step: { type: String, reflect: true },\n success: { type: Boolean, reflect: true },\n title: { type: String, reflect: true },\n type: { type: String, reflect: true },\n value: { type: String },\n };\n\n autocomplete?: string;\n autofocus = false;\n disabled = false;\n form?: string;\n fullWidth = false;\n inputmode?: string;\n invalid = false;\n loading = false;\n max?: string;\n maxlength?: number | undefined;\n min?: string;\n minlength?: number | undefined;\n name?: string;\n pill = false;\n placeholder?: string;\n readonly = false;\n required = false;\n size: SpectreInputSize = 'md';\n step?: string;\n success = false;\n override title = '';\n type: SpectreInputType = 'text';\n value = '';\n\n protected override willUpdate(changedProperties: Map<PropertyKey, unknown>): void {\n if (changedProperties.has('size') && !isInputSize(this.size)) {\n this.size = 'md';\n }\n\n if (changedProperties.has('type') && !isInputType(this.type)) {\n this.type = 'text';\n }\n\n if (changedProperties.has('value') && this.value == null) {\n this.value = '';\n }\n\n if (changedProperties.has('maxlength')) {\n if (\n this.maxlength == null ||\n !Number.isInteger(this.maxlength) ||\n this.maxlength < 0\n ) {\n this.maxlength = undefined;\n }\n }\n\n if (changedProperties.has('minlength')) {\n if (\n this.minlength == null ||\n !Number.isInteger(this.minlength) ||\n this.minlength < 0\n ) {\n this.minlength = undefined;\n }\n }\n }\n\n private get inputClasses(): string {\n return getInputClasses({\n fullWidth: this.fullWidth,\n pill: this.pill,\n size: this.size,\n state: this.isDisabled\n ? this.disabled\n ? 'disabled'\n : 'loading'\n : this.invalid\n ? 'error'\n : this.success\n ? 'success'\n : 'default',\n });\n }\n\n private get isDisabled(): boolean {\n return this.disabled || this.loading;\n }\n\n private get nativeInput(): HTMLInputElement | null {\n return this.querySelector('[data-sp-input-native]');\n }\n\n private handleInput(event: Event): void {\n const input = event.currentTarget as HTMLInputElement;\n this.value = input.value;\n }\n\n private handleChange(event: Event): void {\n const input = event.currentTarget as HTMLInputElement;\n this.value = input.value;\n }\n\n override focus(options?: FocusOptions): void {\n this.nativeInput?.focus(options);\n }\n\n override blur(): void {\n this.nativeInput?.blur();\n }\n\n override render() {\n return html`\n <input\n aria-busy=${this.loading ? 'true' : 'false'}\n aria-describedby=${ifDefined(this.forwardedAriaDescribedBy)}\n aria-invalid=${ifDefined(this.invalid ? 'true' : undefined)}\n aria-label=${ifDefined(this.forwardedAriaLabel)}\n aria-labelledby=${ifDefined(this.forwardedAriaLabelledBy)}\n autocomplete=${ifDefined(this.autocomplete)}\n ?autofocus=${this.autofocus}\n class=${this.inputClasses}\n data-sp-input-native\n ?disabled=${this.isDisabled}\n form=${ifDefined(this.form)}\n ?readonly=${this.readonly}\n ?required=${this.required}\n id=${ifDefined(this.id || undefined)}\n inputmode=${ifDefined(this.inputmode)}\n max=${ifDefined(this.max)}\n maxlength=${ifDefined(this.maxlength)}\n min=${ifDefined(this.min)}\n minlength=${ifDefined(this.minlength)}\n name=${ifDefined(this.name)}\n placeholder=${ifDefined(this.placeholder)}\n step=${ifDefined(this.step)}\n title=${ifDefined(this.title || undefined)}\n type=${this.type}\n .value=${live(this.value)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n />\n `;\n }\n}\n\nexport function defineSpectreInput(tagName = 'sp-input'): typeof SpectreInputElement {\n const existingElement = customElements.get(tagName);\n\n if (existingElement) {\n return existingElement as unknown as typeof SpectreInputElement;\n }\n\n customElements.define(tagName, SpectreInputElement);\n return SpectreInputElement;\n}\n"]}
|
package/dist/label.cjs
CHANGED
|
@@ -4,10 +4,12 @@ var lit = require('lit');
|
|
|
4
4
|
var ifDefined_js = require('lit/directives/if-defined.js');
|
|
5
5
|
|
|
6
6
|
// src/components/label/sp-label.ts
|
|
7
|
-
var
|
|
7
|
+
var SpectreBaseElement = class extends lit.LitElement {
|
|
8
8
|
constructor() {
|
|
9
9
|
super(...arguments);
|
|
10
|
-
this.
|
|
10
|
+
this.ariaLabel = null;
|
|
11
|
+
this.ariaLabelledBy = null;
|
|
12
|
+
this.ariaDescribedBy = null;
|
|
11
13
|
}
|
|
12
14
|
get id() {
|
|
13
15
|
return this._id ?? "";
|
|
@@ -23,6 +25,8 @@ var SpectreLabelElement = class extends lit.LitElement {
|
|
|
23
25
|
}
|
|
24
26
|
this.requestUpdate();
|
|
25
27
|
}
|
|
28
|
+
// Spectre components intentionally render in light DOM so the global
|
|
29
|
+
// `@phcdevworks/spectre-ui` styling contract can apply directly.
|
|
26
30
|
createRenderRoot() {
|
|
27
31
|
return this;
|
|
28
32
|
}
|
|
@@ -32,12 +36,6 @@ var SpectreLabelElement = class extends lit.LitElement {
|
|
|
32
36
|
if (hostId !== null) {
|
|
33
37
|
this.id = hostId;
|
|
34
38
|
}
|
|
35
|
-
this.syncProjectedContent();
|
|
36
|
-
this.startContentObserver();
|
|
37
|
-
}
|
|
38
|
-
disconnectedCallback() {
|
|
39
|
-
this.stopContentObserver();
|
|
40
|
-
super.disconnectedCallback();
|
|
41
39
|
}
|
|
42
40
|
getAttribute(qualifiedName) {
|
|
43
41
|
if (qualifiedName === "id") {
|
|
@@ -65,24 +63,88 @@ var SpectreLabelElement = class extends lit.LitElement {
|
|
|
65
63
|
}
|
|
66
64
|
super.removeAttribute(qualifiedName);
|
|
67
65
|
}
|
|
66
|
+
get forwardedAriaLabel() {
|
|
67
|
+
const value = this.ariaLabel?.trim();
|
|
68
|
+
return value ? value : void 0;
|
|
69
|
+
}
|
|
70
|
+
get forwardedAriaLabelledBy() {
|
|
71
|
+
const value = this.ariaLabelledBy?.trim();
|
|
72
|
+
return value ? value : void 0;
|
|
73
|
+
}
|
|
74
|
+
get forwardedAriaDescribedBy() {
|
|
75
|
+
const value = this.ariaDescribedBy?.trim();
|
|
76
|
+
return value ? value : void 0;
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
|
+
SpectreBaseElement.properties = {
|
|
80
|
+
ariaLabel: { attribute: "aria-label", type: String },
|
|
81
|
+
ariaLabelledBy: { attribute: "aria-labelledby", type: String },
|
|
82
|
+
ariaDescribedBy: { attribute: "aria-describedby", type: String }
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
// src/utils/dom.ts
|
|
86
|
+
function hasMeaningfulContent(nodes) {
|
|
87
|
+
return nodes.some((node) => {
|
|
88
|
+
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
89
|
+
return true;
|
|
90
|
+
}
|
|
91
|
+
if (node.nodeType === Node.TEXT_NODE) {
|
|
92
|
+
return (node.textContent?.trim().length ?? 0) > 0;
|
|
93
|
+
}
|
|
94
|
+
return false;
|
|
95
|
+
});
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
// src/utils/projectable.ts
|
|
99
|
+
var SpectreProjectableElement = class extends SpectreBaseElement {
|
|
100
|
+
constructor() {
|
|
101
|
+
super(...arguments);
|
|
102
|
+
this.projectedContent = [];
|
|
103
|
+
}
|
|
104
|
+
get hasProjectedContent() {
|
|
105
|
+
return hasMeaningfulContent(this.projectedContent);
|
|
106
|
+
}
|
|
107
|
+
connectedCallback() {
|
|
108
|
+
super.connectedCallback();
|
|
109
|
+
this.syncProjectedContent();
|
|
110
|
+
this.startContentObserver();
|
|
111
|
+
}
|
|
112
|
+
disconnectedCallback() {
|
|
113
|
+
this.stopContentObserver();
|
|
114
|
+
super.disconnectedCallback();
|
|
115
|
+
}
|
|
68
116
|
update(changedProperties) {
|
|
69
117
|
this.stopContentObserver();
|
|
70
118
|
super.update(changedProperties);
|
|
71
119
|
this.startContentObserver();
|
|
72
120
|
}
|
|
73
|
-
|
|
74
|
-
|
|
121
|
+
syncProjectedContent() {
|
|
122
|
+
const nextProjectedContent = [];
|
|
123
|
+
const sourceNodes = [
|
|
124
|
+
...this.childNodes,
|
|
125
|
+
...this.getContentContainer()?.childNodes ?? []
|
|
126
|
+
];
|
|
127
|
+
sourceNodes.forEach((node) => {
|
|
128
|
+
if (!this.isInternalNode(node) && !nextProjectedContent.includes(node)) {
|
|
129
|
+
nextProjectedContent.push(node);
|
|
130
|
+
}
|
|
131
|
+
});
|
|
132
|
+
const hasChanged = nextProjectedContent.length !== this.projectedContent.length || nextProjectedContent.some((node, index) => node !== this.projectedContent[index]);
|
|
133
|
+
if (hasChanged) {
|
|
134
|
+
this.projectedContent = nextProjectedContent;
|
|
135
|
+
}
|
|
136
|
+
return hasChanged;
|
|
75
137
|
}
|
|
76
138
|
startContentObserver() {
|
|
77
139
|
if (this.contentObserver) {
|
|
78
140
|
return;
|
|
79
141
|
}
|
|
80
142
|
this.contentObserver = new MutationObserver((mutations) => {
|
|
81
|
-
const isInternalMovement = mutations.every(
|
|
82
|
-
|
|
83
|
-
(node) => this.
|
|
84
|
-
) && Array.from(mutation.addedNodes).every((node) => this.
|
|
85
|
-
|
|
143
|
+
const isInternalMovement = mutations.every(
|
|
144
|
+
(mutation) => Array.from(mutation.removedNodes).every(
|
|
145
|
+
(node) => this.isInternalNode(node) || this.contains(node)
|
|
146
|
+
) && Array.from(mutation.addedNodes).every((node) => this.isInternalNode(node))
|
|
147
|
+
);
|
|
86
148
|
if (isInternalMovement) {
|
|
87
149
|
return;
|
|
88
150
|
}
|
|
@@ -96,50 +158,51 @@ var SpectreLabelElement = class extends lit.LitElement {
|
|
|
96
158
|
this.contentObserver?.disconnect();
|
|
97
159
|
this.contentObserver = void 0;
|
|
98
160
|
}
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
if (nextProjectedContent.length === this.projectedContent.length && nextProjectedContent.every((node, index) => node === this.projectedContent[index])) {
|
|
161
|
+
};
|
|
162
|
+
|
|
163
|
+
// src/components/label/sp-label.ts
|
|
164
|
+
var SpectreLabelElement = class extends SpectreProjectableElement {
|
|
165
|
+
constructor() {
|
|
166
|
+
super(...arguments);
|
|
167
|
+
this.title = "";
|
|
168
|
+
}
|
|
169
|
+
getContentContainer() {
|
|
170
|
+
return this.querySelector("[data-sp-label-native]");
|
|
171
|
+
}
|
|
172
|
+
isInternalNode(node) {
|
|
173
|
+
if (node.nodeType !== Node.ELEMENT_NODE) {
|
|
113
174
|
return false;
|
|
114
175
|
}
|
|
115
|
-
|
|
116
|
-
return
|
|
117
|
-
}
|
|
118
|
-
isInternalLabelNode(node) {
|
|
119
|
-
return node === this.nativeLabel;
|
|
176
|
+
const el = node;
|
|
177
|
+
return el.hasAttribute("data-sp-label-native");
|
|
120
178
|
}
|
|
121
179
|
focus(options) {
|
|
122
|
-
this.
|
|
180
|
+
this.getContentContainer()?.focus(options);
|
|
123
181
|
}
|
|
124
182
|
blur() {
|
|
125
|
-
this.
|
|
183
|
+
this.getContentContainer()?.blur();
|
|
126
184
|
}
|
|
127
185
|
render() {
|
|
128
186
|
return lit.html`
|
|
129
187
|
<label
|
|
188
|
+
aria-describedby=${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}
|
|
189
|
+
aria-label=${ifDefined_js.ifDefined(this.forwardedAriaLabel)}
|
|
190
|
+
aria-labelledby=${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}
|
|
130
191
|
class='sp-label'
|
|
131
192
|
data-sp-label-native
|
|
132
193
|
for=${ifDefined_js.ifDefined(this.htmlFor)}
|
|
133
194
|
id=${ifDefined_js.ifDefined(this.id || void 0)}
|
|
134
195
|
tabindex='-1'
|
|
196
|
+
title=${ifDefined_js.ifDefined(this.title || void 0)}
|
|
135
197
|
>
|
|
136
|
-
${this.
|
|
198
|
+
${this.hasProjectedContent ? this.projectedContent : lit.nothing}
|
|
137
199
|
</label>
|
|
138
200
|
`;
|
|
139
201
|
}
|
|
140
202
|
};
|
|
141
203
|
SpectreLabelElement.properties = {
|
|
142
|
-
htmlFor: { attribute: "for", type: String }
|
|
204
|
+
htmlFor: { attribute: "for", type: String, reflect: true },
|
|
205
|
+
title: { type: String, reflect: true }
|
|
143
206
|
};
|
|
144
207
|
function defineSpectreLabel(tagName = "sp-label") {
|
|
145
208
|
const existingElement = customElements.get(tagName);
|
package/dist/label.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/label/sp-label.ts"],"names":["LitElement","html","ifDefined","nothing"],"mappings":"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","file":"label.cjs","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport interface SpectreLabelProps {\n htmlFor?: string;\n}\n\nexport class SpectreLabelElement extends LitElement implements SpectreLabelProps {\n static properties = {\n htmlFor: { attribute: 'for', type: String },\n };\n\n htmlFor?: string;\n private _id?: string;\n private projectedContent: Node[] = [];\n private contentObserver?: MutationObserver | undefined;\n\n override get id(): string {\n return this._id ?? '';\n }\n\n override set id(value: string) {\n if ((this._id ?? '') === value) {\n return;\n }\n\n this._id = value;\n\n const host = this as unknown as HTMLElement;\n if (HTMLElement.prototype.hasAttribute.call(host, 'id')) {\n HTMLElement.prototype.removeAttribute.call(host, 'id');\n }\n\n this.requestUpdate();\n }\n\n createRenderRoot(): this {\n return this;\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n const hostId = super.getAttribute('id');\n\n if (hostId !== null) {\n this.id = hostId;\n }\n\n this.syncProjectedContent();\n this.startContentObserver();\n }\n\n override disconnectedCallback(): void {\n this.stopContentObserver();\n super.disconnectedCallback();\n }\n\n override getAttribute(qualifiedName: string): string | null {\n if (qualifiedName === 'id') {\n return this.id || null;\n }\n\n return super.getAttribute(qualifiedName);\n }\n\n override hasAttribute(qualifiedName: string): boolean {\n if (qualifiedName === 'id') {\n return this.id !== '';\n }\n\n return super.hasAttribute(qualifiedName);\n }\n\n override setAttribute(qualifiedName: string, value: string): void {\n if (qualifiedName === 'id') {\n this.id = value;\n return;\n }\n\n super.setAttribute(qualifiedName, value);\n }\n\n override removeAttribute(qualifiedName: string): void {\n if (qualifiedName === 'id') {\n this.id = '';\n return;\n }\n\n super.removeAttribute(qualifiedName);\n }\n\n protected override update(changedProperties: Map<PropertyKey, unknown>): void {\n this.stopContentObserver();\n super.update(changedProperties);\n this.startContentObserver();\n }\n\n private get nativeLabel(): HTMLLabelElement | null {\n return this.querySelector('[data-sp-label-native]');\n }\n\n private startContentObserver(): void {\n if (this.contentObserver) {\n return;\n }\n\n this.contentObserver = new MutationObserver((mutations) => {\n const isInternalMovement = mutations.every((mutation) => {\n return (\n Array.from(mutation.removedNodes).every(\n (node) => this.isInternalLabelNode(node) || this.contains(node),\n ) &&\n Array.from(mutation.addedNodes).every((node) => this.isInternalLabelNode(node))\n );\n });\n\n if (isInternalMovement) {\n return;\n }\n\n if (this.syncProjectedContent()) {\n this.requestUpdate();\n }\n });\n\n this.contentObserver.observe(this, { childList: true });\n }\n\n private stopContentObserver(): void {\n this.contentObserver?.disconnect();\n this.contentObserver = undefined;\n }\n\n private syncProjectedContent(): boolean {\n const nextProjectedContent: Node[] = [];\n\n Array.from(this.childNodes).forEach((node) => {\n if (this.isInternalLabelNode(node)) {\n this.projectedContent.forEach((projectedNode) => {\n if (projectedNode.parentNode !== this && this.contains(projectedNode)) {\n nextProjectedContent.push(projectedNode);\n }\n });\n return;\n }\n\n nextProjectedContent.push(node);\n });\n\n if (\n nextProjectedContent.length === this.projectedContent.length &&\n nextProjectedContent.every((node, index) => node === this.projectedContent[index])\n ) {\n return false;\n }\n\n this.projectedContent = nextProjectedContent;\n return true;\n }\n\n private isInternalLabelNode(node: Node): boolean {\n return node === this.nativeLabel;\n }\n\n override focus(options?: FocusOptions): void {\n this.nativeLabel?.focus(options);\n }\n\n override blur(): void {\n this.nativeLabel?.blur();\n }\n\n override render() {\n return html`\n <label\n class='sp-label'\n data-sp-label-native\n for=${ifDefined(this.htmlFor)}\n id=${ifDefined(this.id || undefined)}\n tabindex='-1'\n >\n ${this.projectedContent.length > 0 ? this.projectedContent : nothing}\n </label>\n `;\n }\n}\n\nexport function defineSpectreLabel(tagName = 'sp-label'): typeof SpectreLabelElement {\n const existingElement = customElements.get(tagName);\n\n if (existingElement) {\n return existingElement as unknown as typeof SpectreLabelElement;\n }\n\n customElements.define(tagName, SpectreLabelElement);\n return SpectreLabelElement;\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/utils/base.ts","../src/utils/dom.ts","../src/utils/projectable.ts","../src/components/label/sp-label.ts"],"names":["LitElement","html","ifDefined","nothing"],"mappings":"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","file":"label.cjs","sourcesContent":["import { LitElement, type PropertyDeclarations } from 'lit';\n\nexport class SpectreBaseElement extends LitElement {\n static properties: PropertyDeclarations = {\n ariaLabel: { attribute: 'aria-label', type: String },\n ariaLabelledBy: { attribute: 'aria-labelledby', type: String },\n ariaDescribedBy: { attribute: 'aria-describedby', type: String },\n };\n\n ariaLabel: string | null = null;\n ariaLabelledBy: string | null = null;\n ariaDescribedBy: string | null = null;\n\n private _id?: string;\n\n override get id(): string {\n return this._id ?? '';\n }\n\n override set id(value: string) {\n if ((this._id ?? '') === value) {\n return;\n }\n\n this._id = value;\n\n const host = this as unknown as HTMLElement;\n if (HTMLElement.prototype.hasAttribute.call(host, 'id')) {\n HTMLElement.prototype.removeAttribute.call(host, 'id');\n }\n\n this.requestUpdate();\n }\n\n // Spectre components intentionally render in light DOM so the global\n // `@phcdevworks/spectre-ui` styling contract can apply directly.\n createRenderRoot(): this {\n return this;\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n const hostId = super.getAttribute('id');\n if (hostId !== null) {\n this.id = hostId;\n }\n }\n\n override getAttribute(qualifiedName: string): string | null {\n if (qualifiedName === 'id') {\n return this.id || null;\n }\n\n return super.getAttribute(qualifiedName);\n }\n\n override hasAttribute(qualifiedName: string): boolean {\n if (qualifiedName === 'id') {\n return this.id !== '';\n }\n\n return super.hasAttribute(qualifiedName);\n }\n\n override setAttribute(qualifiedName: string, value: string): void {\n if (qualifiedName === 'id') {\n this.id = value;\n return;\n }\n\n super.setAttribute(qualifiedName, value);\n }\n\n override removeAttribute(qualifiedName: string): void {\n if (qualifiedName === 'id') {\n this.id = '';\n return;\n }\n\n super.removeAttribute(qualifiedName);\n }\n\n protected get forwardedAriaLabel(): string | undefined {\n const value = this.ariaLabel?.trim();\n return value ? value : undefined;\n }\n\n protected get forwardedAriaLabelledBy(): string | undefined {\n const value = this.ariaLabelledBy?.trim();\n return value ? value : undefined;\n }\n\n protected get forwardedAriaDescribedBy(): string | undefined {\n const value = this.ariaDescribedBy?.trim();\n return value ? value : undefined;\n }\n}\n","export function hasMeaningfulContent(nodes: readonly Node[]): boolean {\n return nodes.some((node) => {\n if (node.nodeType === Node.ELEMENT_NODE) {\n return true;\n }\n\n if (node.nodeType === Node.TEXT_NODE) {\n return (node.textContent?.trim().length ?? 0) > 0;\n }\n\n return false;\n });\n}\n","import { SpectreBaseElement } from './base';\nimport { hasMeaningfulContent } from './dom';\n\nexport abstract class SpectreProjectableElement extends SpectreBaseElement {\n protected projectedContent: Node[] = [];\n private contentObserver?: MutationObserver | undefined;\n\n // Return the native container whose existing children are also treated as\n // projected content sources (e.g. the rendered <button>, <select>, <label>).\n protected abstract getContentContainer(): Element | null;\n\n // Return true if the node was rendered by this component and should not be\n // treated as external projected content.\n protected abstract isInternalNode(node: Node): boolean;\n\n protected get hasProjectedContent(): boolean {\n return hasMeaningfulContent(this.projectedContent);\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.syncProjectedContent();\n this.startContentObserver();\n }\n\n override disconnectedCallback(): void {\n this.stopContentObserver();\n super.disconnectedCallback();\n }\n\n protected override update(changedProperties: Map<PropertyKey, unknown>): void {\n this.stopContentObserver();\n super.update(changedProperties);\n this.startContentObserver();\n }\n\n protected syncProjectedContent(): boolean {\n const nextProjectedContent: Node[] = [];\n const sourceNodes = [\n ...this.childNodes,\n ...(this.getContentContainer()?.childNodes ?? []),\n ];\n\n sourceNodes.forEach((node) => {\n if (!this.isInternalNode(node) && !nextProjectedContent.includes(node)) {\n nextProjectedContent.push(node);\n }\n });\n\n const hasChanged =\n nextProjectedContent.length !== this.projectedContent.length ||\n nextProjectedContent.some((node, index) => node !== this.projectedContent[index]);\n\n if (hasChanged) {\n this.projectedContent = nextProjectedContent;\n }\n\n return hasChanged;\n }\n\n private startContentObserver(): void {\n if (this.contentObserver) {\n return;\n }\n\n this.contentObserver = new MutationObserver((mutations) => {\n const isInternalMovement = mutations.every((mutation) =>\n Array.from(mutation.removedNodes).every(\n (node) => this.isInternalNode(node) || this.contains(node),\n ) &&\n Array.from(mutation.addedNodes).every((node) => this.isInternalNode(node)),\n );\n\n if (isInternalMovement) {\n return;\n }\n\n if (this.syncProjectedContent()) {\n this.requestUpdate();\n }\n });\n\n this.contentObserver.observe(this, { childList: true });\n }\n\n private stopContentObserver(): void {\n this.contentObserver?.disconnect();\n this.contentObserver = undefined;\n }\n}\n","import { html, nothing } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { SpectreProjectableElement } from '../../utils/projectable';\n\nexport interface SpectreLabelProps {\n ariaLabel?: string | null;\n ariaLabelledBy?: string | null;\n ariaDescribedBy?: string | null;\n htmlFor?: string;\n title?: string;\n}\n\nexport class SpectreLabelElement extends SpectreProjectableElement implements SpectreLabelProps {\n static properties = {\n htmlFor: { attribute: 'for', type: String, reflect: true },\n title: { type: String, reflect: true },\n };\n\n htmlFor?: string;\n override title = '';\n\n protected override getContentContainer(): Element | null {\n return this.querySelector('[data-sp-label-native]');\n }\n\n protected override isInternalNode(node: Node): boolean {\n if (node.nodeType !== Node.ELEMENT_NODE) {\n return false;\n }\n\n const el = node as Element;\n return el.hasAttribute('data-sp-label-native');\n }\n\n override focus(options?: FocusOptions): void {\n (this.getContentContainer() as HTMLLabelElement | null)?.focus(options);\n }\n\n override blur(): void {\n (this.getContentContainer() as HTMLLabelElement | null)?.blur();\n }\n\n override render() {\n return html`\n <label\n aria-describedby=${ifDefined(this.forwardedAriaDescribedBy)}\n aria-label=${ifDefined(this.forwardedAriaLabel)}\n aria-labelledby=${ifDefined(this.forwardedAriaLabelledBy)}\n class='sp-label'\n data-sp-label-native\n for=${ifDefined(this.htmlFor)}\n id=${ifDefined(this.id || undefined)}\n tabindex='-1'\n title=${ifDefined(this.title || undefined)}\n >\n ${this.hasProjectedContent ? this.projectedContent : nothing}\n </label>\n `;\n }\n}\n\nexport function defineSpectreLabel(tagName = 'sp-label'): typeof SpectreLabelElement {\n const existingElement = customElements.get(tagName);\n\n if (existingElement) {\n return existingElement as unknown as typeof SpectreLabelElement;\n }\n\n customElements.define(tagName, SpectreLabelElement);\n return SpectreLabelElement;\n}\n"]}
|
package/dist/label.d.cts
CHANGED
|
@@ -1,35 +1,31 @@
|
|
|
1
1
|
import * as lit_html from 'lit-html';
|
|
2
|
-
import {
|
|
2
|
+
import { S as SpectreProjectableElement } from './projectable-DcnBRiko.cjs';
|
|
3
|
+
import './base-DQtCQ-dP.cjs';
|
|
4
|
+
import 'lit';
|
|
3
5
|
|
|
4
6
|
interface SpectreLabelProps {
|
|
7
|
+
ariaLabel?: string | null;
|
|
8
|
+
ariaLabelledBy?: string | null;
|
|
9
|
+
ariaDescribedBy?: string | null;
|
|
5
10
|
htmlFor?: string;
|
|
11
|
+
title?: string;
|
|
6
12
|
}
|
|
7
|
-
declare class SpectreLabelElement extends
|
|
13
|
+
declare class SpectreLabelElement extends SpectreProjectableElement implements SpectreLabelProps {
|
|
8
14
|
static properties: {
|
|
9
15
|
htmlFor: {
|
|
10
16
|
attribute: string;
|
|
11
17
|
type: StringConstructor;
|
|
18
|
+
reflect: boolean;
|
|
19
|
+
};
|
|
20
|
+
title: {
|
|
21
|
+
type: StringConstructor;
|
|
22
|
+
reflect: boolean;
|
|
12
23
|
};
|
|
13
24
|
};
|
|
14
25
|
htmlFor?: string;
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
get id(): string;
|
|
19
|
-
set id(value: string);
|
|
20
|
-
createRenderRoot(): this;
|
|
21
|
-
connectedCallback(): void;
|
|
22
|
-
disconnectedCallback(): void;
|
|
23
|
-
getAttribute(qualifiedName: string): string | null;
|
|
24
|
-
hasAttribute(qualifiedName: string): boolean;
|
|
25
|
-
setAttribute(qualifiedName: string, value: string): void;
|
|
26
|
-
removeAttribute(qualifiedName: string): void;
|
|
27
|
-
protected update(changedProperties: Map<PropertyKey, unknown>): void;
|
|
28
|
-
private get nativeLabel();
|
|
29
|
-
private startContentObserver;
|
|
30
|
-
private stopContentObserver;
|
|
31
|
-
private syncProjectedContent;
|
|
32
|
-
private isInternalLabelNode;
|
|
26
|
+
title: string;
|
|
27
|
+
protected getContentContainer(): Element | null;
|
|
28
|
+
protected isInternalNode(node: Node): boolean;
|
|
33
29
|
focus(options?: FocusOptions): void;
|
|
34
30
|
blur(): void;
|
|
35
31
|
render(): lit_html.TemplateResult<1>;
|
package/dist/label.d.ts
CHANGED
|
@@ -1,35 +1,31 @@
|
|
|
1
1
|
import * as lit_html from 'lit-html';
|
|
2
|
-
import {
|
|
2
|
+
import { S as SpectreProjectableElement } from './projectable-SzbPvXfM.js';
|
|
3
|
+
import './base-DQtCQ-dP.js';
|
|
4
|
+
import 'lit';
|
|
3
5
|
|
|
4
6
|
interface SpectreLabelProps {
|
|
7
|
+
ariaLabel?: string | null;
|
|
8
|
+
ariaLabelledBy?: string | null;
|
|
9
|
+
ariaDescribedBy?: string | null;
|
|
5
10
|
htmlFor?: string;
|
|
11
|
+
title?: string;
|
|
6
12
|
}
|
|
7
|
-
declare class SpectreLabelElement extends
|
|
13
|
+
declare class SpectreLabelElement extends SpectreProjectableElement implements SpectreLabelProps {
|
|
8
14
|
static properties: {
|
|
9
15
|
htmlFor: {
|
|
10
16
|
attribute: string;
|
|
11
17
|
type: StringConstructor;
|
|
18
|
+
reflect: boolean;
|
|
19
|
+
};
|
|
20
|
+
title: {
|
|
21
|
+
type: StringConstructor;
|
|
22
|
+
reflect: boolean;
|
|
12
23
|
};
|
|
13
24
|
};
|
|
14
25
|
htmlFor?: string;
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
get id(): string;
|
|
19
|
-
set id(value: string);
|
|
20
|
-
createRenderRoot(): this;
|
|
21
|
-
connectedCallback(): void;
|
|
22
|
-
disconnectedCallback(): void;
|
|
23
|
-
getAttribute(qualifiedName: string): string | null;
|
|
24
|
-
hasAttribute(qualifiedName: string): boolean;
|
|
25
|
-
setAttribute(qualifiedName: string, value: string): void;
|
|
26
|
-
removeAttribute(qualifiedName: string): void;
|
|
27
|
-
protected update(changedProperties: Map<PropertyKey, unknown>): void;
|
|
28
|
-
private get nativeLabel();
|
|
29
|
-
private startContentObserver;
|
|
30
|
-
private stopContentObserver;
|
|
31
|
-
private syncProjectedContent;
|
|
32
|
-
private isInternalLabelNode;
|
|
26
|
+
title: string;
|
|
27
|
+
protected getContentContainer(): Element | null;
|
|
28
|
+
protected isInternalNode(node: Node): boolean;
|
|
33
29
|
focus(options?: FocusOptions): void;
|
|
34
30
|
blur(): void;
|
|
35
31
|
render(): lit_html.TemplateResult<1>;
|