@phcdevworks/spectre-components 1.4.0 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +164 -22
- package/dist/alert.cjs +455 -0
- package/dist/alert.cjs.map +1 -0
- package/dist/alert.d.cts +68 -0
- package/dist/alert.d.ts +68 -0
- package/dist/alert.js +450 -0
- package/dist/alert.js.map +1 -0
- package/dist/avatar.cjs +454 -0
- package/dist/avatar.cjs.map +1 -0
- package/dist/avatar.d.cts +74 -0
- package/dist/avatar.d.ts +74 -0
- package/dist/avatar.js +449 -0
- package/dist/avatar.js.map +1 -0
- package/dist/badge.cjs +5 -1
- package/dist/badge.cjs.map +1 -1
- package/dist/badge.d.cts +3 -2
- package/dist/badge.d.ts +3 -2
- package/dist/badge.js +5 -1
- package/dist/badge.js.map +1 -1
- package/dist/button.cjs.map +1 -1
- package/dist/button.d.cts +2 -2
- package/dist/button.d.ts +2 -2
- package/dist/button.js.map +1 -1
- package/dist/card.cjs +11 -2
- package/dist/card.cjs.map +1 -1
- package/dist/card.d.cts +3 -2
- package/dist/card.d.ts +3 -2
- package/dist/card.js +11 -2
- package/dist/card.js.map +1 -1
- package/dist/form-BumNzIay.d.cts +28 -0
- package/dist/form-BumNzIay.d.ts +28 -0
- package/dist/icon-box.cjs +5 -1
- package/dist/icon-box.cjs.map +1 -1
- package/dist/icon-box.d.cts +3 -2
- package/dist/icon-box.d.ts +3 -2
- package/dist/icon-box.js +5 -1
- package/dist/icon-box.js.map +1 -1
- package/dist/index.cjs +582 -9
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +6 -1
- package/dist/index.d.ts +6 -1
- package/dist/index.js +566 -11
- package/dist/index.js.map +1 -1
- package/dist/input.cjs.map +1 -1
- package/dist/input.d.cts +2 -2
- package/dist/input.d.ts +2 -2
- package/dist/input.js.map +1 -1
- package/dist/pricing-card.cjs +432 -0
- package/dist/pricing-card.cjs.map +1 -0
- package/dist/pricing-card.d.cts +60 -0
- package/dist/pricing-card.d.ts +60 -0
- package/dist/pricing-card.js +429 -0
- package/dist/pricing-card.js.map +1 -0
- package/dist/rating.cjs +6 -2
- package/dist/rating.cjs.map +1 -1
- package/dist/rating.d.cts +3 -2
- package/dist/rating.d.ts +3 -2
- package/dist/rating.js +6 -2
- package/dist/rating.js.map +1 -1
- package/dist/select.cjs.map +1 -1
- package/dist/select.d.cts +1 -1
- package/dist/select.d.ts +1 -1
- package/dist/select.js.map +1 -1
- package/dist/spinner.cjs +356 -0
- package/dist/spinner.cjs.map +1 -0
- package/dist/spinner.d.cts +52 -0
- package/dist/spinner.d.ts +52 -0
- package/dist/spinner.js +351 -0
- package/dist/spinner.js.map +1 -0
- package/dist/tag.cjs +473 -0
- package/dist/tag.cjs.map +1 -0
- package/dist/tag.d.cts +80 -0
- package/dist/tag.d.ts +80 -0
- package/dist/tag.js +468 -0
- package/dist/tag.js.map +1 -0
- package/dist/testimonial.cjs +14 -3
- package/dist/testimonial.cjs.map +1 -1
- package/dist/testimonial.d.cts +3 -2
- package/dist/testimonial.d.ts +3 -2
- package/dist/testimonial.js +14 -3
- package/dist/testimonial.js.map +1 -1
- package/dist/textarea.cjs.map +1 -1
- package/dist/textarea.d.cts +1 -1
- package/dist/textarea.d.ts +1 -1
- package/dist/textarea.js.map +1 -1
- package/package.json +36 -8
- package/dist/form-Dg6kuOS7.d.cts +0 -18
- package/dist/form-Dg6kuOS7.d.ts +0 -18
package/dist/index.cjs
CHANGED
|
@@ -59,7 +59,22 @@ var spectreBadgeVariants = [
|
|
|
59
59
|
function isBadgeVariant(value) {
|
|
60
60
|
return spectreBadgeVariants.includes(value);
|
|
61
61
|
}
|
|
62
|
-
var
|
|
62
|
+
var spectreAlertVariants = [
|
|
63
|
+
"info",
|
|
64
|
+
"success",
|
|
65
|
+
"warning",
|
|
66
|
+
"danger",
|
|
67
|
+
"neutral"
|
|
68
|
+
];
|
|
69
|
+
function isAlertVariant(value) {
|
|
70
|
+
return spectreAlertVariants.includes(value);
|
|
71
|
+
}
|
|
72
|
+
var spectreCardVariants = [
|
|
73
|
+
"elevated",
|
|
74
|
+
"flat",
|
|
75
|
+
"outline",
|
|
76
|
+
"ghost"
|
|
77
|
+
];
|
|
63
78
|
function isCardVariant(value) {
|
|
64
79
|
return spectreCardVariants.includes(value);
|
|
65
80
|
}
|
|
@@ -79,9 +94,55 @@ var spectreIconBoxVariants = [
|
|
|
79
94
|
function isIconBoxVariant(value) {
|
|
80
95
|
return spectreIconBoxVariants.includes(value);
|
|
81
96
|
}
|
|
82
|
-
var spectreTestimonialVariants = [
|
|
97
|
+
var spectreTestimonialVariants = [
|
|
98
|
+
"elevated",
|
|
99
|
+
"flat",
|
|
100
|
+
"outline",
|
|
101
|
+
"ghost"
|
|
102
|
+
];
|
|
83
103
|
function isTestimonialVariant(value) {
|
|
84
|
-
return spectreTestimonialVariants.includes(
|
|
104
|
+
return spectreTestimonialVariants.includes(
|
|
105
|
+
value
|
|
106
|
+
);
|
|
107
|
+
}
|
|
108
|
+
var spectreSpinnerVariants = [
|
|
109
|
+
"primary",
|
|
110
|
+
"secondary",
|
|
111
|
+
"success",
|
|
112
|
+
"warning",
|
|
113
|
+
"danger",
|
|
114
|
+
"info",
|
|
115
|
+
"neutral",
|
|
116
|
+
"accent",
|
|
117
|
+
"cta"
|
|
118
|
+
];
|
|
119
|
+
function isSpinnerVariant(value) {
|
|
120
|
+
return spectreSpinnerVariants.includes(value);
|
|
121
|
+
}
|
|
122
|
+
var spectreTagVariants = [
|
|
123
|
+
"default",
|
|
124
|
+
"primary",
|
|
125
|
+
"secondary",
|
|
126
|
+
"success",
|
|
127
|
+
"warning",
|
|
128
|
+
"danger",
|
|
129
|
+
"info",
|
|
130
|
+
"neutral",
|
|
131
|
+
"accent",
|
|
132
|
+
"cta",
|
|
133
|
+
"outline",
|
|
134
|
+
"ghost"
|
|
135
|
+
];
|
|
136
|
+
function isTagVariant(value) {
|
|
137
|
+
return spectreTagVariants.includes(value);
|
|
138
|
+
}
|
|
139
|
+
var spectreAvatarSizes = ["xs", "sm", "md", "lg", "xl"];
|
|
140
|
+
function isAvatarSize(value) {
|
|
141
|
+
return spectreAvatarSizes.includes(value);
|
|
142
|
+
}
|
|
143
|
+
var spectreAvatarShapes = ["circle", "square"];
|
|
144
|
+
function isAvatarShape(value) {
|
|
145
|
+
return spectreAvatarShapes.includes(value);
|
|
85
146
|
}
|
|
86
147
|
function normalizeInt(value, fallback, min = 0) {
|
|
87
148
|
if (value == null || typeof value !== "number" || !Number.isInteger(value) || value < min) {
|
|
@@ -1648,15 +1709,19 @@ var SpectreBadgeElement = class extends SpectreProjectableElement {
|
|
|
1648
1709
|
}
|
|
1649
1710
|
get badgeClasses() {
|
|
1650
1711
|
return spectreUi.getBadgeClasses({
|
|
1651
|
-
disabled: this.
|
|
1712
|
+
disabled: this.isDisabled,
|
|
1652
1713
|
fullWidth: this.fullWidth ?? false,
|
|
1653
1714
|
loading: this.loading ?? false,
|
|
1654
1715
|
size: this.size,
|
|
1655
1716
|
variant: this.variant
|
|
1656
1717
|
});
|
|
1657
1718
|
}
|
|
1719
|
+
get isDisabled() {
|
|
1720
|
+
return (this.disabled ?? false) || (this.loading ?? false);
|
|
1721
|
+
}
|
|
1658
1722
|
render() {
|
|
1659
1723
|
return lit.html`<span
|
|
1724
|
+
aria-busy="${this.loading ? "true" : "false"}"
|
|
1660
1725
|
aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
|
|
1661
1726
|
aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
|
|
1662
1727
|
aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
|
|
@@ -1738,7 +1803,7 @@ var SpectreCardElement = class extends SpectreProjectableElement {
|
|
|
1738
1803
|
}
|
|
1739
1804
|
get cardClasses() {
|
|
1740
1805
|
return spectreUi.getCardClasses({
|
|
1741
|
-
disabled: this.
|
|
1806
|
+
disabled: this.isDisabled,
|
|
1742
1807
|
fullHeight: this.fullHeight ?? false,
|
|
1743
1808
|
interactive: this.interactive ?? false,
|
|
1744
1809
|
loading: this.loading ?? false,
|
|
@@ -1746,8 +1811,12 @@ var SpectreCardElement = class extends SpectreProjectableElement {
|
|
|
1746
1811
|
variant: this.variant
|
|
1747
1812
|
});
|
|
1748
1813
|
}
|
|
1814
|
+
get isDisabled() {
|
|
1815
|
+
return (this.disabled ?? false) || (this.loading ?? false);
|
|
1816
|
+
}
|
|
1749
1817
|
render() {
|
|
1750
1818
|
return lit.html`<div
|
|
1819
|
+
aria-busy="${this.loading ? "true" : "false"}"
|
|
1751
1820
|
aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
|
|
1752
1821
|
aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
|
|
1753
1822
|
aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
|
|
@@ -1834,7 +1903,7 @@ var SpectreIconBoxElement = class extends SpectreProjectableElement {
|
|
|
1834
1903
|
}
|
|
1835
1904
|
get iconBoxClasses() {
|
|
1836
1905
|
return spectreUi.getIconBoxClasses({
|
|
1837
|
-
disabled: this.
|
|
1906
|
+
disabled: this.isDisabled,
|
|
1838
1907
|
fullWidth: this.fullWidth ?? false,
|
|
1839
1908
|
interactive: this.interactive ?? false,
|
|
1840
1909
|
loading: this.loading ?? false,
|
|
@@ -1843,8 +1912,12 @@ var SpectreIconBoxElement = class extends SpectreProjectableElement {
|
|
|
1843
1912
|
variant: this.variant
|
|
1844
1913
|
});
|
|
1845
1914
|
}
|
|
1915
|
+
get isDisabled() {
|
|
1916
|
+
return (this.disabled ?? false) || (this.loading ?? false);
|
|
1917
|
+
}
|
|
1846
1918
|
render() {
|
|
1847
1919
|
return lit.html`<div
|
|
1920
|
+
aria-busy="${this.loading ? "true" : "false"}"
|
|
1848
1921
|
aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
|
|
1849
1922
|
aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
|
|
1850
1923
|
aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
|
|
@@ -1916,11 +1989,14 @@ var SpectreRatingElement = class extends SpectreBaseElement {
|
|
|
1916
1989
|
}
|
|
1917
1990
|
get ratingClasses() {
|
|
1918
1991
|
return spectreUi.getRatingClasses({
|
|
1919
|
-
disabled: this.
|
|
1992
|
+
disabled: this.isDisabled,
|
|
1920
1993
|
loading: this.loading ?? false,
|
|
1921
1994
|
size: this.size
|
|
1922
1995
|
});
|
|
1923
1996
|
}
|
|
1997
|
+
get isDisabled() {
|
|
1998
|
+
return (this.disabled ?? false) || (this.loading ?? false);
|
|
1999
|
+
}
|
|
1924
2000
|
get effectiveMax() {
|
|
1925
2001
|
return this.max ?? 5;
|
|
1926
2002
|
}
|
|
@@ -1942,6 +2018,7 @@ var SpectreRatingElement = class extends SpectreBaseElement {
|
|
|
1942
2018
|
render() {
|
|
1943
2019
|
const trimmedLabel = this.label?.trim();
|
|
1944
2020
|
return lit.html`<div
|
|
2021
|
+
aria-busy="${this.loading ? "true" : "false"}"
|
|
1945
2022
|
aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
|
|
1946
2023
|
aria-label="${this.computedAriaLabel}"
|
|
1947
2024
|
aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
|
|
@@ -1952,7 +2029,7 @@ var SpectreRatingElement = class extends SpectreBaseElement {
|
|
|
1952
2029
|
title="${ifDefined_js.ifDefined(this.title || void 0)}"
|
|
1953
2030
|
>
|
|
1954
2031
|
<div class="${spectreUi.getRatingStarsClasses()}">${this.renderStars()}</div>
|
|
1955
|
-
${trimmedLabel ? lit.html`<span class="${spectreUi.getRatingTextClasses({ disabled: this.
|
|
2032
|
+
${trimmedLabel ? lit.html`<span class="${spectreUi.getRatingTextClasses({ disabled: this.isDisabled })}">${trimmedLabel}</span>` : lit.nothing}
|
|
1956
2033
|
</div>`;
|
|
1957
2034
|
}
|
|
1958
2035
|
};
|
|
@@ -2022,15 +2099,19 @@ var SpectreTestimonialElement = class extends SpectreProjectableElement {
|
|
|
2022
2099
|
}
|
|
2023
2100
|
get testimonialClasses() {
|
|
2024
2101
|
return spectreUi.getTestimonialClasses({
|
|
2025
|
-
disabled: this.
|
|
2102
|
+
disabled: this.isDisabled,
|
|
2026
2103
|
fullHeight: this.fullHeight ?? false,
|
|
2027
2104
|
interactive: this.interactive ?? false,
|
|
2028
2105
|
loading: this.loading ?? false,
|
|
2029
2106
|
variant: this.variant
|
|
2030
2107
|
});
|
|
2031
2108
|
}
|
|
2109
|
+
get isDisabled() {
|
|
2110
|
+
return (this.disabled ?? false) || (this.loading ?? false);
|
|
2111
|
+
}
|
|
2032
2112
|
render() {
|
|
2033
2113
|
return lit.html`<div
|
|
2114
|
+
aria-busy="${this.loading ? "true" : "false"}"
|
|
2034
2115
|
aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
|
|
2035
2116
|
aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
|
|
2036
2117
|
aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
|
|
@@ -2058,6 +2139,475 @@ function defineSpectreTestimonial(tagName = "sp-testimonial") {
|
|
|
2058
2139
|
customElements.define(tagName, SpectreTestimonialElement);
|
|
2059
2140
|
return SpectreTestimonialElement;
|
|
2060
2141
|
}
|
|
2142
|
+
var SpectreAlertElement = class extends SpectreProjectableElement {
|
|
2143
|
+
constructor() {
|
|
2144
|
+
super(...arguments);
|
|
2145
|
+
this.dismissed = false;
|
|
2146
|
+
this.disabled = false;
|
|
2147
|
+
this.fullWidth = false;
|
|
2148
|
+
this.loading = false;
|
|
2149
|
+
this.size = "md";
|
|
2150
|
+
this.variant = "info";
|
|
2151
|
+
}
|
|
2152
|
+
get id() {
|
|
2153
|
+
return super.id;
|
|
2154
|
+
}
|
|
2155
|
+
set id(value) {
|
|
2156
|
+
super.id = value;
|
|
2157
|
+
}
|
|
2158
|
+
get title() {
|
|
2159
|
+
return super.title;
|
|
2160
|
+
}
|
|
2161
|
+
set title(value) {
|
|
2162
|
+
super.title = value;
|
|
2163
|
+
}
|
|
2164
|
+
getContentContainer() {
|
|
2165
|
+
return this.querySelector("[data-sp-alert-native]");
|
|
2166
|
+
}
|
|
2167
|
+
isInternalNode(node) {
|
|
2168
|
+
if (node.nodeType !== Node.ELEMENT_NODE) {
|
|
2169
|
+
return false;
|
|
2170
|
+
}
|
|
2171
|
+
const el = node;
|
|
2172
|
+
return el.hasAttribute("data-sp-alert-native");
|
|
2173
|
+
}
|
|
2174
|
+
willUpdate(changedProperties) {
|
|
2175
|
+
if (changedProperties.has("dismissed") && this.dismissed == null) {
|
|
2176
|
+
this.dismissed = false;
|
|
2177
|
+
}
|
|
2178
|
+
if (changedProperties.has("disabled") && this.disabled == null) {
|
|
2179
|
+
this.disabled = false;
|
|
2180
|
+
}
|
|
2181
|
+
if (changedProperties.has("fullWidth") && this.fullWidth == null) {
|
|
2182
|
+
this.fullWidth = false;
|
|
2183
|
+
}
|
|
2184
|
+
if (changedProperties.has("loading") && this.loading == null) {
|
|
2185
|
+
this.loading = false;
|
|
2186
|
+
}
|
|
2187
|
+
if (changedProperties.has("variant") && (this.variant == null || !isAlertVariant(this.variant))) {
|
|
2188
|
+
this.variant = "info";
|
|
2189
|
+
}
|
|
2190
|
+
if (changedProperties.has("size") && (this.size == null || !isInputSize(this.size))) {
|
|
2191
|
+
this.size = "md";
|
|
2192
|
+
}
|
|
2193
|
+
}
|
|
2194
|
+
get alertClasses() {
|
|
2195
|
+
return spectreUi.getAlertClasses({
|
|
2196
|
+
disabled: this.isDisabled,
|
|
2197
|
+
dismissed: this.dismissed ?? false,
|
|
2198
|
+
fullWidth: this.fullWidth ?? false,
|
|
2199
|
+
loading: this.loading ?? false,
|
|
2200
|
+
size: this.size,
|
|
2201
|
+
variant: this.variant
|
|
2202
|
+
});
|
|
2203
|
+
}
|
|
2204
|
+
get isDisabled() {
|
|
2205
|
+
return (this.disabled ?? false) || (this.loading ?? false);
|
|
2206
|
+
}
|
|
2207
|
+
render() {
|
|
2208
|
+
return lit.html`<div
|
|
2209
|
+
aria-busy="${this.loading ? "true" : "false"}"
|
|
2210
|
+
aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
|
|
2211
|
+
aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
|
|
2212
|
+
aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
|
|
2213
|
+
class="${this.alertClasses}"
|
|
2214
|
+
data-sp-alert-native
|
|
2215
|
+
id="${ifDefined_js.ifDefined(this.id || void 0)}"
|
|
2216
|
+
role="alert"
|
|
2217
|
+
title="${ifDefined_js.ifDefined(this.title || void 0)}"
|
|
2218
|
+
>
|
|
2219
|
+
${this.hasProjectedContent ? this.projectedContent : lit.nothing}
|
|
2220
|
+
</div>`;
|
|
2221
|
+
}
|
|
2222
|
+
};
|
|
2223
|
+
SpectreAlertElement.properties = {
|
|
2224
|
+
dismissed: { type: Boolean, reflect: true },
|
|
2225
|
+
disabled: { type: Boolean, reflect: true },
|
|
2226
|
+
fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
|
|
2227
|
+
loading: { type: Boolean, reflect: true },
|
|
2228
|
+
size: { type: String, reflect: true },
|
|
2229
|
+
variant: { type: String, reflect: true }
|
|
2230
|
+
};
|
|
2231
|
+
function defineSpectreAlert(tagName = "sp-alert") {
|
|
2232
|
+
const existingElement = customElements.get(tagName);
|
|
2233
|
+
if (existingElement) {
|
|
2234
|
+
return existingElement;
|
|
2235
|
+
}
|
|
2236
|
+
customElements.define(tagName, SpectreAlertElement);
|
|
2237
|
+
return SpectreAlertElement;
|
|
2238
|
+
}
|
|
2239
|
+
var SpectreAvatarElement = class extends SpectreProjectableElement {
|
|
2240
|
+
constructor() {
|
|
2241
|
+
super(...arguments);
|
|
2242
|
+
this.disabled = false;
|
|
2243
|
+
this.fullWidth = false;
|
|
2244
|
+
this.interactive = false;
|
|
2245
|
+
this.loading = false;
|
|
2246
|
+
this.placeholder = false;
|
|
2247
|
+
this.shape = "circle";
|
|
2248
|
+
this.size = "md";
|
|
2249
|
+
}
|
|
2250
|
+
get id() {
|
|
2251
|
+
return super.id;
|
|
2252
|
+
}
|
|
2253
|
+
set id(value) {
|
|
2254
|
+
super.id = value;
|
|
2255
|
+
}
|
|
2256
|
+
get title() {
|
|
2257
|
+
return super.title;
|
|
2258
|
+
}
|
|
2259
|
+
set title(value) {
|
|
2260
|
+
super.title = value;
|
|
2261
|
+
}
|
|
2262
|
+
getContentContainer() {
|
|
2263
|
+
return this.querySelector("[data-sp-avatar-native]");
|
|
2264
|
+
}
|
|
2265
|
+
isInternalNode(node) {
|
|
2266
|
+
if (node.nodeType !== Node.ELEMENT_NODE) {
|
|
2267
|
+
return false;
|
|
2268
|
+
}
|
|
2269
|
+
const el = node;
|
|
2270
|
+
return el.hasAttribute("data-sp-avatar-native");
|
|
2271
|
+
}
|
|
2272
|
+
willUpdate(changedProperties) {
|
|
2273
|
+
if (changedProperties.has("disabled") && this.disabled == null) {
|
|
2274
|
+
this.disabled = false;
|
|
2275
|
+
}
|
|
2276
|
+
if (changedProperties.has("fullWidth") && this.fullWidth == null) {
|
|
2277
|
+
this.fullWidth = false;
|
|
2278
|
+
}
|
|
2279
|
+
if (changedProperties.has("interactive") && this.interactive == null) {
|
|
2280
|
+
this.interactive = false;
|
|
2281
|
+
}
|
|
2282
|
+
if (changedProperties.has("loading") && this.loading == null) {
|
|
2283
|
+
this.loading = false;
|
|
2284
|
+
}
|
|
2285
|
+
if (changedProperties.has("placeholder") && this.placeholder == null) {
|
|
2286
|
+
this.placeholder = false;
|
|
2287
|
+
}
|
|
2288
|
+
if (changedProperties.has("shape") && (this.shape == null || !isAvatarShape(this.shape))) {
|
|
2289
|
+
this.shape = "circle";
|
|
2290
|
+
}
|
|
2291
|
+
if (changedProperties.has("size") && (this.size == null || !isAvatarSize(this.size))) {
|
|
2292
|
+
this.size = "md";
|
|
2293
|
+
}
|
|
2294
|
+
}
|
|
2295
|
+
get avatarClasses() {
|
|
2296
|
+
return spectreUi.getAvatarClasses({
|
|
2297
|
+
disabled: this.isDisabled,
|
|
2298
|
+
fullWidth: this.fullWidth ?? false,
|
|
2299
|
+
interactive: this.interactive ?? false,
|
|
2300
|
+
loading: this.loading ?? false,
|
|
2301
|
+
placeholder: this.placeholder ?? false,
|
|
2302
|
+
shape: this.shape,
|
|
2303
|
+
size: this.size
|
|
2304
|
+
});
|
|
2305
|
+
}
|
|
2306
|
+
get isDisabled() {
|
|
2307
|
+
return (this.disabled ?? false) || (this.loading ?? false);
|
|
2308
|
+
}
|
|
2309
|
+
render() {
|
|
2310
|
+
return lit.html`<div
|
|
2311
|
+
aria-busy="${this.loading ? "true" : "false"}"
|
|
2312
|
+
aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
|
|
2313
|
+
aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
|
|
2314
|
+
aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
|
|
2315
|
+
class="${this.avatarClasses}"
|
|
2316
|
+
data-sp-avatar-native
|
|
2317
|
+
id="${ifDefined_js.ifDefined(this.id || void 0)}"
|
|
2318
|
+
title="${ifDefined_js.ifDefined(this.title || void 0)}"
|
|
2319
|
+
>
|
|
2320
|
+
${this.hasProjectedContent ? this.projectedContent : lit.nothing}
|
|
2321
|
+
</div>`;
|
|
2322
|
+
}
|
|
2323
|
+
};
|
|
2324
|
+
SpectreAvatarElement.properties = {
|
|
2325
|
+
disabled: { type: Boolean, reflect: true },
|
|
2326
|
+
fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
|
|
2327
|
+
interactive: { type: Boolean, reflect: true },
|
|
2328
|
+
loading: { type: Boolean, reflect: true },
|
|
2329
|
+
placeholder: { type: Boolean, reflect: true },
|
|
2330
|
+
shape: { type: String, reflect: true },
|
|
2331
|
+
size: { type: String, reflect: true }
|
|
2332
|
+
};
|
|
2333
|
+
function defineSpectreAvatar(tagName = "sp-avatar") {
|
|
2334
|
+
const existingElement = customElements.get(tagName);
|
|
2335
|
+
if (existingElement) {
|
|
2336
|
+
return existingElement;
|
|
2337
|
+
}
|
|
2338
|
+
customElements.define(tagName, SpectreAvatarElement);
|
|
2339
|
+
return SpectreAvatarElement;
|
|
2340
|
+
}
|
|
2341
|
+
var SpectreSpinnerElement = class extends SpectreBaseElement {
|
|
2342
|
+
constructor() {
|
|
2343
|
+
super(...arguments);
|
|
2344
|
+
this.disabled = false;
|
|
2345
|
+
this.loading = true;
|
|
2346
|
+
this.size = "md";
|
|
2347
|
+
}
|
|
2348
|
+
get id() {
|
|
2349
|
+
return super.id;
|
|
2350
|
+
}
|
|
2351
|
+
set id(value) {
|
|
2352
|
+
super.id = value;
|
|
2353
|
+
}
|
|
2354
|
+
get title() {
|
|
2355
|
+
return super.title;
|
|
2356
|
+
}
|
|
2357
|
+
set title(value) {
|
|
2358
|
+
super.title = value;
|
|
2359
|
+
}
|
|
2360
|
+
willUpdate(changedProperties) {
|
|
2361
|
+
if (changedProperties.has("disabled") && this.disabled == null) {
|
|
2362
|
+
this.disabled = false;
|
|
2363
|
+
}
|
|
2364
|
+
if (changedProperties.has("loading") && this.loading == null) {
|
|
2365
|
+
this.loading = true;
|
|
2366
|
+
}
|
|
2367
|
+
if (changedProperties.has("size") && (this.size == null || !isInputSize(this.size))) {
|
|
2368
|
+
this.size = "md";
|
|
2369
|
+
}
|
|
2370
|
+
if (changedProperties.has("variant") && this.variant != null && !isSpinnerVariant(this.variant)) {
|
|
2371
|
+
this.variant = void 0;
|
|
2372
|
+
}
|
|
2373
|
+
}
|
|
2374
|
+
get spinnerClasses() {
|
|
2375
|
+
return spectreUi.getSpinnerClasses({
|
|
2376
|
+
disabled: this.disabled ?? false,
|
|
2377
|
+
loading: this.loading ?? true,
|
|
2378
|
+
size: this.size,
|
|
2379
|
+
...this.variant != null ? { variant: this.variant } : {}
|
|
2380
|
+
});
|
|
2381
|
+
}
|
|
2382
|
+
get computedAriaLabel() {
|
|
2383
|
+
return this.forwardedAriaLabel ?? "Loading";
|
|
2384
|
+
}
|
|
2385
|
+
render() {
|
|
2386
|
+
return lit.html`<div
|
|
2387
|
+
aria-busy="${this.loading ? "true" : "false"}"
|
|
2388
|
+
aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
|
|
2389
|
+
aria-label="${this.computedAriaLabel}"
|
|
2390
|
+
aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
|
|
2391
|
+
class="${this.spinnerClasses}"
|
|
2392
|
+
data-sp-spinner-native
|
|
2393
|
+
id="${ifDefined_js.ifDefined(this.id || void 0)}"
|
|
2394
|
+
role="status"
|
|
2395
|
+
title="${ifDefined_js.ifDefined(this.title || void 0)}"
|
|
2396
|
+
></div>`;
|
|
2397
|
+
}
|
|
2398
|
+
};
|
|
2399
|
+
SpectreSpinnerElement.properties = {
|
|
2400
|
+
disabled: { type: Boolean, reflect: true },
|
|
2401
|
+
loading: { type: Boolean, reflect: true },
|
|
2402
|
+
size: { type: String, reflect: true },
|
|
2403
|
+
variant: { type: String, reflect: true }
|
|
2404
|
+
};
|
|
2405
|
+
function defineSpectreSpinner(tagName = "sp-spinner") {
|
|
2406
|
+
const existingElement = customElements.get(tagName);
|
|
2407
|
+
if (existingElement) {
|
|
2408
|
+
return existingElement;
|
|
2409
|
+
}
|
|
2410
|
+
customElements.define(tagName, SpectreSpinnerElement);
|
|
2411
|
+
return SpectreSpinnerElement;
|
|
2412
|
+
}
|
|
2413
|
+
var SpectreTagElement = class extends SpectreProjectableElement {
|
|
2414
|
+
constructor() {
|
|
2415
|
+
super(...arguments);
|
|
2416
|
+
this.dismissible = false;
|
|
2417
|
+
this.disabled = false;
|
|
2418
|
+
this.fullWidth = false;
|
|
2419
|
+
this.interactive = false;
|
|
2420
|
+
this.loading = false;
|
|
2421
|
+
this.selected = false;
|
|
2422
|
+
this.size = "md";
|
|
2423
|
+
this.variant = "default";
|
|
2424
|
+
}
|
|
2425
|
+
get id() {
|
|
2426
|
+
return super.id;
|
|
2427
|
+
}
|
|
2428
|
+
set id(value) {
|
|
2429
|
+
super.id = value;
|
|
2430
|
+
}
|
|
2431
|
+
get title() {
|
|
2432
|
+
return super.title;
|
|
2433
|
+
}
|
|
2434
|
+
set title(value) {
|
|
2435
|
+
super.title = value;
|
|
2436
|
+
}
|
|
2437
|
+
getContentContainer() {
|
|
2438
|
+
return this.querySelector("[data-sp-tag-native]");
|
|
2439
|
+
}
|
|
2440
|
+
isInternalNode(node) {
|
|
2441
|
+
if (node.nodeType !== Node.ELEMENT_NODE) {
|
|
2442
|
+
return false;
|
|
2443
|
+
}
|
|
2444
|
+
const el = node;
|
|
2445
|
+
return el.hasAttribute("data-sp-tag-native");
|
|
2446
|
+
}
|
|
2447
|
+
willUpdate(changedProperties) {
|
|
2448
|
+
if (changedProperties.has("dismissible") && this.dismissible == null) {
|
|
2449
|
+
this.dismissible = false;
|
|
2450
|
+
}
|
|
2451
|
+
if (changedProperties.has("disabled") && this.disabled == null) {
|
|
2452
|
+
this.disabled = false;
|
|
2453
|
+
}
|
|
2454
|
+
if (changedProperties.has("fullWidth") && this.fullWidth == null) {
|
|
2455
|
+
this.fullWidth = false;
|
|
2456
|
+
}
|
|
2457
|
+
if (changedProperties.has("interactive") && this.interactive == null) {
|
|
2458
|
+
this.interactive = false;
|
|
2459
|
+
}
|
|
2460
|
+
if (changedProperties.has("loading") && this.loading == null) {
|
|
2461
|
+
this.loading = false;
|
|
2462
|
+
}
|
|
2463
|
+
if (changedProperties.has("selected") && this.selected == null) {
|
|
2464
|
+
this.selected = false;
|
|
2465
|
+
}
|
|
2466
|
+
if (changedProperties.has("size") && (this.size == null || !isInputSize(this.size))) {
|
|
2467
|
+
this.size = "md";
|
|
2468
|
+
}
|
|
2469
|
+
if (changedProperties.has("variant") && (this.variant == null || !isTagVariant(this.variant))) {
|
|
2470
|
+
this.variant = "default";
|
|
2471
|
+
}
|
|
2472
|
+
}
|
|
2473
|
+
get tagClasses() {
|
|
2474
|
+
return spectreUi.getTagClasses({
|
|
2475
|
+
disabled: this.isDisabled,
|
|
2476
|
+
dismissible: this.dismissible ?? false,
|
|
2477
|
+
fullWidth: this.fullWidth ?? false,
|
|
2478
|
+
interactive: this.interactive ?? false,
|
|
2479
|
+
loading: this.loading ?? false,
|
|
2480
|
+
selected: this.selected ?? false,
|
|
2481
|
+
size: this.size,
|
|
2482
|
+
variant: this.variant
|
|
2483
|
+
});
|
|
2484
|
+
}
|
|
2485
|
+
get isDisabled() {
|
|
2486
|
+
return (this.disabled ?? false) || (this.loading ?? false);
|
|
2487
|
+
}
|
|
2488
|
+
render() {
|
|
2489
|
+
return lit.html`<span
|
|
2490
|
+
aria-busy="${this.loading ? "true" : "false"}"
|
|
2491
|
+
aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
|
|
2492
|
+
aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
|
|
2493
|
+
aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
|
|
2494
|
+
class="${this.tagClasses}"
|
|
2495
|
+
data-sp-tag-native
|
|
2496
|
+
id="${ifDefined_js.ifDefined(this.id || void 0)}"
|
|
2497
|
+
title="${ifDefined_js.ifDefined(this.title || void 0)}"
|
|
2498
|
+
>
|
|
2499
|
+
${this.hasProjectedContent ? this.projectedContent : lit.nothing}
|
|
2500
|
+
</span>`;
|
|
2501
|
+
}
|
|
2502
|
+
};
|
|
2503
|
+
SpectreTagElement.properties = {
|
|
2504
|
+
dismissible: { type: Boolean, reflect: true },
|
|
2505
|
+
disabled: { type: Boolean, reflect: true },
|
|
2506
|
+
fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
|
|
2507
|
+
interactive: { type: Boolean, reflect: true },
|
|
2508
|
+
loading: { type: Boolean, reflect: true },
|
|
2509
|
+
selected: { type: Boolean, reflect: true },
|
|
2510
|
+
size: { type: String, reflect: true },
|
|
2511
|
+
variant: { type: String, reflect: true }
|
|
2512
|
+
};
|
|
2513
|
+
function defineSpectreTag(tagName = "sp-tag") {
|
|
2514
|
+
const existingElement = customElements.get(tagName);
|
|
2515
|
+
if (existingElement) {
|
|
2516
|
+
return existingElement;
|
|
2517
|
+
}
|
|
2518
|
+
customElements.define(tagName, SpectreTagElement);
|
|
2519
|
+
return SpectreTagElement;
|
|
2520
|
+
}
|
|
2521
|
+
var SpectrePricingCardElement = class extends SpectreProjectableElement {
|
|
2522
|
+
constructor() {
|
|
2523
|
+
super(...arguments);
|
|
2524
|
+
this.disabled = false;
|
|
2525
|
+
this.featured = false;
|
|
2526
|
+
this.fullHeight = false;
|
|
2527
|
+
this.interactive = false;
|
|
2528
|
+
this.loading = false;
|
|
2529
|
+
}
|
|
2530
|
+
get id() {
|
|
2531
|
+
return super.id;
|
|
2532
|
+
}
|
|
2533
|
+
set id(value) {
|
|
2534
|
+
super.id = value;
|
|
2535
|
+
}
|
|
2536
|
+
get title() {
|
|
2537
|
+
return super.title;
|
|
2538
|
+
}
|
|
2539
|
+
set title(value) {
|
|
2540
|
+
super.title = value;
|
|
2541
|
+
}
|
|
2542
|
+
getContentContainer() {
|
|
2543
|
+
return this.querySelector("[data-sp-pricing-card-native]");
|
|
2544
|
+
}
|
|
2545
|
+
isInternalNode(node) {
|
|
2546
|
+
if (node.nodeType !== Node.ELEMENT_NODE) {
|
|
2547
|
+
return false;
|
|
2548
|
+
}
|
|
2549
|
+
const el = node;
|
|
2550
|
+
return el.hasAttribute("data-sp-pricing-card-native");
|
|
2551
|
+
}
|
|
2552
|
+
willUpdate(changedProperties) {
|
|
2553
|
+
if (changedProperties.has("disabled") && this.disabled == null) {
|
|
2554
|
+
this.disabled = false;
|
|
2555
|
+
}
|
|
2556
|
+
if (changedProperties.has("featured") && this.featured == null) {
|
|
2557
|
+
this.featured = false;
|
|
2558
|
+
}
|
|
2559
|
+
if (changedProperties.has("fullHeight") && this.fullHeight == null) {
|
|
2560
|
+
this.fullHeight = false;
|
|
2561
|
+
}
|
|
2562
|
+
if (changedProperties.has("interactive") && this.interactive == null) {
|
|
2563
|
+
this.interactive = false;
|
|
2564
|
+
}
|
|
2565
|
+
if (changedProperties.has("loading") && this.loading == null) {
|
|
2566
|
+
this.loading = false;
|
|
2567
|
+
}
|
|
2568
|
+
}
|
|
2569
|
+
get pricingCardClasses() {
|
|
2570
|
+
return spectreUi.getPricingCardClasses({
|
|
2571
|
+
disabled: this.isDisabled,
|
|
2572
|
+
featured: this.featured ?? false,
|
|
2573
|
+
fullHeight: this.fullHeight ?? false,
|
|
2574
|
+
interactive: this.interactive ?? false,
|
|
2575
|
+
loading: this.loading ?? false
|
|
2576
|
+
});
|
|
2577
|
+
}
|
|
2578
|
+
get isDisabled() {
|
|
2579
|
+
return (this.disabled ?? false) || (this.loading ?? false);
|
|
2580
|
+
}
|
|
2581
|
+
render() {
|
|
2582
|
+
return lit.html`<div
|
|
2583
|
+
aria-busy="${this.loading ? "true" : "false"}"
|
|
2584
|
+
aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
|
|
2585
|
+
aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
|
|
2586
|
+
aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
|
|
2587
|
+
class="${this.pricingCardClasses}"
|
|
2588
|
+
data-sp-pricing-card-native
|
|
2589
|
+
id="${ifDefined_js.ifDefined(this.id || void 0)}"
|
|
2590
|
+
title="${ifDefined_js.ifDefined(this.title || void 0)}"
|
|
2591
|
+
>
|
|
2592
|
+
${this.hasProjectedContent ? this.projectedContent : lit.nothing}
|
|
2593
|
+
</div>`;
|
|
2594
|
+
}
|
|
2595
|
+
};
|
|
2596
|
+
SpectrePricingCardElement.properties = {
|
|
2597
|
+
disabled: { type: Boolean, reflect: true },
|
|
2598
|
+
featured: { type: Boolean, reflect: true },
|
|
2599
|
+
fullHeight: { attribute: "full-height", type: Boolean, reflect: true },
|
|
2600
|
+
interactive: { type: Boolean, reflect: true },
|
|
2601
|
+
loading: { type: Boolean, reflect: true }
|
|
2602
|
+
};
|
|
2603
|
+
function defineSpectrePricingCard(tagName = "sp-pricing-card") {
|
|
2604
|
+
const existingElement = customElements.get(tagName);
|
|
2605
|
+
if (existingElement) {
|
|
2606
|
+
return existingElement;
|
|
2607
|
+
}
|
|
2608
|
+
customElements.define(tagName, SpectrePricingCardElement);
|
|
2609
|
+
return SpectrePricingCardElement;
|
|
2610
|
+
}
|
|
2061
2611
|
|
|
2062
2612
|
// src/index.ts
|
|
2063
2613
|
function defineSpectreComponents() {
|
|
@@ -2074,8 +2624,15 @@ function defineSpectreComponents() {
|
|
|
2074
2624
|
defineSpectreIconBox();
|
|
2075
2625
|
defineSpectreRating();
|
|
2076
2626
|
defineSpectreTestimonial();
|
|
2627
|
+
defineSpectreAlert();
|
|
2628
|
+
defineSpectreAvatar();
|
|
2629
|
+
defineSpectreSpinner();
|
|
2630
|
+
defineSpectreTag();
|
|
2631
|
+
defineSpectrePricingCard();
|
|
2077
2632
|
}
|
|
2078
2633
|
|
|
2634
|
+
exports.SpectreAlertElement = SpectreAlertElement;
|
|
2635
|
+
exports.SpectreAvatarElement = SpectreAvatarElement;
|
|
2079
2636
|
exports.SpectreBadgeElement = SpectreBadgeElement;
|
|
2080
2637
|
exports.SpectreButtonElement = SpectreButtonElement;
|
|
2081
2638
|
exports.SpectreCardElement = SpectreCardElement;
|
|
@@ -2084,11 +2641,16 @@ exports.SpectreFieldsetElement = SpectreFieldsetElement;
|
|
|
2084
2641
|
exports.SpectreIconBoxElement = SpectreIconBoxElement;
|
|
2085
2642
|
exports.SpectreInputElement = SpectreInputElement;
|
|
2086
2643
|
exports.SpectreLabelElement = SpectreLabelElement;
|
|
2644
|
+
exports.SpectrePricingCardElement = SpectrePricingCardElement;
|
|
2087
2645
|
exports.SpectreRadioElement = SpectreRadioElement;
|
|
2088
2646
|
exports.SpectreRatingElement = SpectreRatingElement;
|
|
2089
2647
|
exports.SpectreSelectElement = SpectreSelectElement;
|
|
2648
|
+
exports.SpectreSpinnerElement = SpectreSpinnerElement;
|
|
2649
|
+
exports.SpectreTagElement = SpectreTagElement;
|
|
2090
2650
|
exports.SpectreTestimonialElement = SpectreTestimonialElement;
|
|
2091
2651
|
exports.SpectreTextareaElement = SpectreTextareaElement;
|
|
2652
|
+
exports.defineSpectreAlert = defineSpectreAlert;
|
|
2653
|
+
exports.defineSpectreAvatar = defineSpectreAvatar;
|
|
2092
2654
|
exports.defineSpectreBadge = defineSpectreBadge;
|
|
2093
2655
|
exports.defineSpectreButton = defineSpectreButton;
|
|
2094
2656
|
exports.defineSpectreCard = defineSpectreCard;
|
|
@@ -2098,11 +2660,18 @@ exports.defineSpectreFieldset = defineSpectreFieldset;
|
|
|
2098
2660
|
exports.defineSpectreIconBox = defineSpectreIconBox;
|
|
2099
2661
|
exports.defineSpectreInput = defineSpectreInput;
|
|
2100
2662
|
exports.defineSpectreLabel = defineSpectreLabel;
|
|
2663
|
+
exports.defineSpectrePricingCard = defineSpectrePricingCard;
|
|
2101
2664
|
exports.defineSpectreRadio = defineSpectreRadio;
|
|
2102
2665
|
exports.defineSpectreRating = defineSpectreRating;
|
|
2103
2666
|
exports.defineSpectreSelect = defineSpectreSelect;
|
|
2667
|
+
exports.defineSpectreSpinner = defineSpectreSpinner;
|
|
2668
|
+
exports.defineSpectreTag = defineSpectreTag;
|
|
2104
2669
|
exports.defineSpectreTestimonial = defineSpectreTestimonial;
|
|
2105
2670
|
exports.defineSpectreTextarea = defineSpectreTextarea;
|
|
2671
|
+
exports.spectreAlertSizes = spectreInputSizes;
|
|
2672
|
+
exports.spectreAlertVariants = spectreAlertVariants;
|
|
2673
|
+
exports.spectreAvatarShapes = spectreAvatarShapes;
|
|
2674
|
+
exports.spectreAvatarSizes = spectreAvatarSizes;
|
|
2106
2675
|
exports.spectreBadgeSizes = spectreInputSizes;
|
|
2107
2676
|
exports.spectreBadgeVariants = spectreBadgeVariants;
|
|
2108
2677
|
exports.spectreButtonSizes = spectreInputSizes;
|
|
@@ -2114,6 +2683,10 @@ exports.spectreIconBoxVariants = spectreIconBoxVariants;
|
|
|
2114
2683
|
exports.spectreInputSizes = spectreInputSizes;
|
|
2115
2684
|
exports.spectreInputTypes = spectreInputTypes;
|
|
2116
2685
|
exports.spectreRatingSizes = spectreInputSizes;
|
|
2686
|
+
exports.spectreSpinnerSizes = spectreInputSizes;
|
|
2687
|
+
exports.spectreSpinnerVariants = spectreSpinnerVariants;
|
|
2688
|
+
exports.spectreTagSizes = spectreInputSizes;
|
|
2689
|
+
exports.spectreTagVariants = spectreTagVariants;
|
|
2117
2690
|
exports.spectreTestimonialVariants = spectreTestimonialVariants;
|
|
2118
2691
|
//# sourceMappingURL=index.cjs.map
|
|
2119
2692
|
//# sourceMappingURL=index.cjs.map
|