@phcdevworks/spectre-components 1.10.0 → 1.12.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 +66 -1
- package/dist/alert.cjs.map +1 -1
- package/dist/alert.d.cts +2 -2
- package/dist/alert.d.ts +2 -2
- package/dist/alert.js.map +1 -1
- package/dist/avatar.cjs.map +1 -1
- package/dist/avatar.d.cts +2 -2
- package/dist/avatar.d.ts +2 -2
- package/dist/avatar.js.map +1 -1
- package/dist/badge.cjs.map +1 -1
- package/dist/badge.d.cts +2 -2
- package/dist/badge.d.ts +2 -2
- 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.map +1 -1
- package/dist/card.d.cts +2 -2
- package/dist/card.d.ts +2 -2
- package/dist/card.js.map +1 -1
- package/dist/container.cjs.map +1 -1
- package/dist/container.d.cts +2 -2
- package/dist/container.d.ts +2 -2
- package/dist/container.js.map +1 -1
- package/dist/dropdown.cjs.map +1 -1
- package/dist/dropdown.d.cts +2 -2
- package/dist/dropdown.d.ts +2 -2
- package/dist/dropdown.js.map +1 -1
- package/dist/{form-DgzRhNmg.d.cts → form-JrKDonG4.d.cts} +9 -1
- package/dist/{form-DgzRhNmg.d.ts → form-JrKDonG4.d.ts} +9 -1
- package/dist/grid.cjs.map +1 -1
- package/dist/grid.d.cts +2 -2
- package/dist/grid.d.ts +2 -2
- package/dist/grid.js.map +1 -1
- package/dist/icon-box.cjs.map +1 -1
- package/dist/icon-box.d.cts +2 -2
- package/dist/icon-box.d.ts +2 -2
- package/dist/icon-box.js.map +1 -1
- package/dist/index.cjs +340 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +3 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +334 -2
- 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/nav-item.cjs +500 -0
- package/dist/nav-item.cjs.map +1 -0
- package/dist/nav-item.d.cts +74 -0
- package/dist/nav-item.d.ts +74 -0
- package/dist/nav-item.js +497 -0
- package/dist/nav-item.js.map +1 -0
- package/dist/rating.cjs.map +1 -1
- package/dist/rating.d.cts +2 -2
- package/dist/rating.d.ts +2 -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.map +1 -1
- package/dist/spinner.d.cts +2 -2
- package/dist/spinner.d.ts +2 -2
- package/dist/spinner.js.map +1 -1
- package/dist/stack.cjs.map +1 -1
- package/dist/stack.d.cts +2 -2
- package/dist/stack.d.ts +2 -2
- package/dist/stack.js.map +1 -1
- package/dist/tag.cjs.map +1 -1
- package/dist/tag.d.cts +2 -2
- package/dist/tag.d.ts +2 -2
- package/dist/tag.js.map +1 -1
- package/dist/testimonial.cjs.map +1 -1
- package/dist/testimonial.d.cts +2 -2
- package/dist/testimonial.d.ts +2 -2
- package/dist/testimonial.js.map +1 -1
- package/dist/text.cjs +484 -0
- package/dist/text.cjs.map +1 -0
- package/dist/text.d.cts +53 -0
- package/dist/text.d.ts +53 -0
- package/dist/text.js +477 -0
- package/dist/text.js.map +1 -0
- 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/dist/toast.cjs.map +1 -1
- package/dist/toast.d.cts +2 -2
- package/dist/toast.d.ts +2 -2
- package/dist/toast.js.map +1 -1
- package/dist/tooltip.cjs.map +1 -1
- package/dist/tooltip.d.cts +2 -2
- package/dist/tooltip.d.ts +2 -2
- package/dist/tooltip.js.map +1 -1
- package/package.json +14 -4
package/dist/index.d.cts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { S as SpectreAlertSize, a as SpectreAlertVariant, b as SpectreAvatarShape, c as SpectreAvatarSize, S as SpectreBadgeSize, d as SpectreBadgeVariant, S as SpectreButtonSize, e as SpectreButtonType, f as SpectreButtonVariant, g as SpectreCardVariant, h as SpectreContainerMaxWidth, i as SpectreDropdownPlacement, j as SpectreGridColumns, k as SpectreGridGap, S as SpectreIconBoxSize, l as SpectreIconBoxVariant, S as SpectreInputSize, m as SpectreInputType, S as SpectreRatingSize, S as SpectreSpinnerSize, n as SpectreSpinnerVariant, o as SpectreStackAlign, p as SpectreStackBasis, q as SpectreStackDirection, S as SpectreTagSize, r as SpectreTagVariant, s as SpectreTestimonialVariant, t as
|
|
1
|
+
export { S as SpectreAlertSize, a as SpectreAlertVariant, b as SpectreAvatarShape, c as SpectreAvatarSize, S as SpectreBadgeSize, d as SpectreBadgeVariant, S as SpectreButtonSize, e as SpectreButtonType, f as SpectreButtonVariant, g as SpectreCardVariant, h as SpectreContainerMaxWidth, i as SpectreDropdownPlacement, j as SpectreGridColumns, k as SpectreGridGap, S as SpectreIconBoxSize, l as SpectreIconBoxVariant, S as SpectreInputSize, m as SpectreInputType, S as SpectreRatingSize, S as SpectreSpinnerSize, n as SpectreSpinnerVariant, o as SpectreStackAlign, p as SpectreStackBasis, q as SpectreStackDirection, S as SpectreTagSize, r as SpectreTagVariant, s as SpectreTestimonialVariant, t as SpectreTextFamily, u as SpectreTextLevel, v as SpectreTextSize, w as SpectreTextVariant, x as SpectreToastVariant, y as SpectreTooltipPlacement, z as spectreAlertSizes, A as spectreAlertVariants, B as spectreAvatarShapes, C as spectreAvatarSizes, z as spectreBadgeSizes, D as spectreBadgeVariants, z as spectreButtonSizes, E as spectreButtonTypes, F as spectreButtonVariants, G as spectreCardVariants, H as spectreContainerMaxWidths, I as spectreDropdownPlacements, J as spectreGridColumns, K as spectreGridGaps, z as spectreIconBoxSizes, L as spectreIconBoxVariants, z as spectreInputSizes, M as spectreInputTypes, z as spectreRatingSizes, z as spectreSpinnerSizes, N as spectreSpinnerVariants, O as spectreStackAligns, P as spectreStackBases, Q as spectreStackDirections, z as spectreTagSizes, R as spectreTagVariants, T as spectreTestimonialVariants, U as spectreTextFamilies, V as spectreTextLevels, W as spectreTextSizes, X as spectreTextVariants, Y as spectreToastVariants, Z as spectreTooltipPlacements } from './form-JrKDonG4.cjs';
|
|
2
2
|
export { SpectreButtonElement, SpectreButtonProps, defineSpectreButton } from './button.cjs';
|
|
3
3
|
export { SpectreInputElement, SpectreInputProps, defineSpectreInput } from './input.cjs';
|
|
4
4
|
export { SpectreTextareaElement, SpectreTextareaProps, defineSpectreTextarea } from './textarea.cjs';
|
|
@@ -25,9 +25,11 @@ export { SpectreDropdownElement, SpectreDropdownProps, defineSpectreDropdown } f
|
|
|
25
25
|
export { SpectreFooterElement, SpectreFooterProps, defineSpectreFooter } from './footer.cjs';
|
|
26
26
|
export { SpectreModalElement, SpectreModalProps, defineSpectreModal } from './modal.cjs';
|
|
27
27
|
export { SpectreNavElement, SpectreNavProps, defineSpectreNav } from './nav.cjs';
|
|
28
|
+
export { SpectreNavItemElement, SpectreNavItemProps, defineSpectreNavItem } from './nav-item.cjs';
|
|
28
29
|
export { SpectreSidebarElement, SpectreSidebarProps, defineSpectreSidebar } from './sidebar.cjs';
|
|
29
30
|
export { SpectreToastElement, SpectreToastProps, defineSpectreToast } from './toast.cjs';
|
|
30
31
|
export { SpectreTooltipElement, SpectreTooltipProps, defineSpectreTooltip } from './tooltip.cjs';
|
|
32
|
+
export { SpectreTextElement, SpectreTextProps, defineSpectreText } from './text.cjs';
|
|
31
33
|
import 'lit';
|
|
32
34
|
import './projectable-DLOn6eaW.cjs';
|
|
33
35
|
import './base-D0s95V2v.cjs';
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { S as SpectreAlertSize, a as SpectreAlertVariant, b as SpectreAvatarShape, c as SpectreAvatarSize, S as SpectreBadgeSize, d as SpectreBadgeVariant, S as SpectreButtonSize, e as SpectreButtonType, f as SpectreButtonVariant, g as SpectreCardVariant, h as SpectreContainerMaxWidth, i as SpectreDropdownPlacement, j as SpectreGridColumns, k as SpectreGridGap, S as SpectreIconBoxSize, l as SpectreIconBoxVariant, S as SpectreInputSize, m as SpectreInputType, S as SpectreRatingSize, S as SpectreSpinnerSize, n as SpectreSpinnerVariant, o as SpectreStackAlign, p as SpectreStackBasis, q as SpectreStackDirection, S as SpectreTagSize, r as SpectreTagVariant, s as SpectreTestimonialVariant, t as
|
|
1
|
+
export { S as SpectreAlertSize, a as SpectreAlertVariant, b as SpectreAvatarShape, c as SpectreAvatarSize, S as SpectreBadgeSize, d as SpectreBadgeVariant, S as SpectreButtonSize, e as SpectreButtonType, f as SpectreButtonVariant, g as SpectreCardVariant, h as SpectreContainerMaxWidth, i as SpectreDropdownPlacement, j as SpectreGridColumns, k as SpectreGridGap, S as SpectreIconBoxSize, l as SpectreIconBoxVariant, S as SpectreInputSize, m as SpectreInputType, S as SpectreRatingSize, S as SpectreSpinnerSize, n as SpectreSpinnerVariant, o as SpectreStackAlign, p as SpectreStackBasis, q as SpectreStackDirection, S as SpectreTagSize, r as SpectreTagVariant, s as SpectreTestimonialVariant, t as SpectreTextFamily, u as SpectreTextLevel, v as SpectreTextSize, w as SpectreTextVariant, x as SpectreToastVariant, y as SpectreTooltipPlacement, z as spectreAlertSizes, A as spectreAlertVariants, B as spectreAvatarShapes, C as spectreAvatarSizes, z as spectreBadgeSizes, D as spectreBadgeVariants, z as spectreButtonSizes, E as spectreButtonTypes, F as spectreButtonVariants, G as spectreCardVariants, H as spectreContainerMaxWidths, I as spectreDropdownPlacements, J as spectreGridColumns, K as spectreGridGaps, z as spectreIconBoxSizes, L as spectreIconBoxVariants, z as spectreInputSizes, M as spectreInputTypes, z as spectreRatingSizes, z as spectreSpinnerSizes, N as spectreSpinnerVariants, O as spectreStackAligns, P as spectreStackBases, Q as spectreStackDirections, z as spectreTagSizes, R as spectreTagVariants, T as spectreTestimonialVariants, U as spectreTextFamilies, V as spectreTextLevels, W as spectreTextSizes, X as spectreTextVariants, Y as spectreToastVariants, Z as spectreTooltipPlacements } from './form-JrKDonG4.js';
|
|
2
2
|
export { SpectreButtonElement, SpectreButtonProps, defineSpectreButton } from './button.js';
|
|
3
3
|
export { SpectreInputElement, SpectreInputProps, defineSpectreInput } from './input.js';
|
|
4
4
|
export { SpectreTextareaElement, SpectreTextareaProps, defineSpectreTextarea } from './textarea.js';
|
|
@@ -25,9 +25,11 @@ export { SpectreDropdownElement, SpectreDropdownProps, defineSpectreDropdown } f
|
|
|
25
25
|
export { SpectreFooterElement, SpectreFooterProps, defineSpectreFooter } from './footer.js';
|
|
26
26
|
export { SpectreModalElement, SpectreModalProps, defineSpectreModal } from './modal.js';
|
|
27
27
|
export { SpectreNavElement, SpectreNavProps, defineSpectreNav } from './nav.js';
|
|
28
|
+
export { SpectreNavItemElement, SpectreNavItemProps, defineSpectreNavItem } from './nav-item.js';
|
|
28
29
|
export { SpectreSidebarElement, SpectreSidebarProps, defineSpectreSidebar } from './sidebar.js';
|
|
29
30
|
export { SpectreToastElement, SpectreToastProps, defineSpectreToast } from './toast.js';
|
|
30
31
|
export { SpectreTooltipElement, SpectreTooltipProps, defineSpectreTooltip } from './tooltip.js';
|
|
32
|
+
export { SpectreTextElement, SpectreTextProps, defineSpectreText } from './text.js';
|
|
31
33
|
import 'lit';
|
|
32
34
|
import './projectable-D9YCo9NY.js';
|
|
33
35
|
import './base-D0s95V2v.js';
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { getButtonClasses, getInputLabelClasses, getInputClasses, getTextareaClasses, getSelectClasses, getCheckboxClasses, getRadioClasses, getLabelClasses, getFieldsetLegendClasses, getFieldsetClasses, getBadgeClasses, getCardClasses, getIconBoxClasses, getRatingClasses, getRatingStarClasses, getRatingStarsClasses, getRatingTextClasses, getTestimonialClasses, getAlertClasses, getAvatarClasses, getSpinnerClasses, getTagClasses, getPricingCardClasses, getContainerClasses, getGridClasses, getStackClasses, getDropdownClasses, getDropdownMenuClasses, getFooterClasses, getModalOverlayClasses, getModalClasses, getNavClasses, getSidebarClasses, getSidebarToggleClasses, getSidebarBackdropClasses, getToastClasses, getToastIconClasses, getTooltipClasses, getSectionClasses } from '@phcdevworks/spectre-ui';
|
|
1
|
+
import { getButtonClasses, getInputLabelClasses, getInputClasses, getTextareaClasses, getSelectClasses, getCheckboxClasses, getRadioClasses, getLabelClasses, getFieldsetLegendClasses, getFieldsetClasses, getBadgeClasses, getCardClasses, getIconBoxClasses, getRatingClasses, getRatingStarClasses, getRatingStarsClasses, getRatingTextClasses, getTestimonialClasses, getAlertClasses, getAvatarClasses, getSpinnerClasses, getTagClasses, getPricingCardClasses, getContainerClasses, getGridClasses, getStackClasses, getDropdownClasses, getDropdownMenuClasses, getFooterClasses, getModalOverlayClasses, getModalClasses, getNavClasses, getNavLinkClasses, getSidebarClasses, getSidebarToggleClasses, getSidebarBackdropClasses, getToastClasses, getToastIconClasses, getTooltipClasses, getTextClasses, getSectionClasses } from '@phcdevworks/spectre-ui';
|
|
2
2
|
import { LitElement, html, nothing } from 'lit';
|
|
3
3
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
4
4
|
import { live } from 'lit/directives/live.js';
|
|
5
|
+
import { literal, html as html$1 } from 'lit/static-html.js';
|
|
5
6
|
|
|
6
7
|
// src/utils/form.ts
|
|
7
8
|
var spectreInputSizes = ["sm", "md", "lg"];
|
|
@@ -201,6 +202,48 @@ function isTooltipPlacement(value) {
|
|
|
201
202
|
value
|
|
202
203
|
);
|
|
203
204
|
}
|
|
205
|
+
var spectreTextSizes = [
|
|
206
|
+
"xs",
|
|
207
|
+
"sm",
|
|
208
|
+
"md",
|
|
209
|
+
"lg",
|
|
210
|
+
"xl",
|
|
211
|
+
"2xl",
|
|
212
|
+
"3xl",
|
|
213
|
+
"4xl",
|
|
214
|
+
"5xl",
|
|
215
|
+
"6xl"
|
|
216
|
+
];
|
|
217
|
+
function isTextSize(value) {
|
|
218
|
+
return spectreTextSizes.includes(value);
|
|
219
|
+
}
|
|
220
|
+
var spectreTextVariants = [
|
|
221
|
+
"default",
|
|
222
|
+
"muted",
|
|
223
|
+
"subtle",
|
|
224
|
+
"meta",
|
|
225
|
+
"brand"
|
|
226
|
+
];
|
|
227
|
+
function isTextVariant(value) {
|
|
228
|
+
return spectreTextVariants.includes(value);
|
|
229
|
+
}
|
|
230
|
+
var spectreTextFamilies = ["sans", "serif", "mono"];
|
|
231
|
+
function isTextFamily(value) {
|
|
232
|
+
return spectreTextFamilies.includes(value);
|
|
233
|
+
}
|
|
234
|
+
var spectreTextLevels = [
|
|
235
|
+
"h1",
|
|
236
|
+
"h2",
|
|
237
|
+
"h3",
|
|
238
|
+
"h4",
|
|
239
|
+
"h5",
|
|
240
|
+
"h6",
|
|
241
|
+
"p",
|
|
242
|
+
"span"
|
|
243
|
+
];
|
|
244
|
+
function isTextLevel(value) {
|
|
245
|
+
return spectreTextLevels.includes(value);
|
|
246
|
+
}
|
|
204
247
|
function normalizeInt(value, fallback, min = 0) {
|
|
205
248
|
if (value == null || typeof value !== "number" || !Number.isInteger(value) || value < min) {
|
|
206
249
|
return fallback;
|
|
@@ -3407,6 +3450,208 @@ function defineSpectreNav(tagName = "sp-nav") {
|
|
|
3407
3450
|
customElements.define(tagName, SpectreNavElement);
|
|
3408
3451
|
return SpectreNavElement;
|
|
3409
3452
|
}
|
|
3453
|
+
var SpectreNavItemElement = class extends SpectreBaseElement {
|
|
3454
|
+
constructor() {
|
|
3455
|
+
super(...arguments);
|
|
3456
|
+
this.dropdown = false;
|
|
3457
|
+
this.href = void 0;
|
|
3458
|
+
this.label = void 0;
|
|
3459
|
+
this.open = false;
|
|
3460
|
+
this.placement = "bottom-start";
|
|
3461
|
+
this.triggerContent = [];
|
|
3462
|
+
this.menuContent = [];
|
|
3463
|
+
this.handleDocumentClick = (event) => {
|
|
3464
|
+
if (!this.open) {
|
|
3465
|
+
return;
|
|
3466
|
+
}
|
|
3467
|
+
if (!event.composedPath().includes(this)) {
|
|
3468
|
+
this.close();
|
|
3469
|
+
}
|
|
3470
|
+
};
|
|
3471
|
+
this.handleDocumentKeydown = (event) => {
|
|
3472
|
+
if (event.key === "Escape" && this.open) {
|
|
3473
|
+
this.close();
|
|
3474
|
+
this.triggerElement?.focus();
|
|
3475
|
+
}
|
|
3476
|
+
};
|
|
3477
|
+
}
|
|
3478
|
+
get id() {
|
|
3479
|
+
return super.id;
|
|
3480
|
+
}
|
|
3481
|
+
set id(value) {
|
|
3482
|
+
super.id = value;
|
|
3483
|
+
}
|
|
3484
|
+
get title() {
|
|
3485
|
+
return super.title;
|
|
3486
|
+
}
|
|
3487
|
+
set title(value) {
|
|
3488
|
+
super.title = value;
|
|
3489
|
+
}
|
|
3490
|
+
isInternalNode(node) {
|
|
3491
|
+
if (node.nodeType !== Node.ELEMENT_NODE) {
|
|
3492
|
+
return false;
|
|
3493
|
+
}
|
|
3494
|
+
const el = node;
|
|
3495
|
+
return el.hasAttribute("data-sp-nav-item-menu") || el.hasAttribute("data-sp-nav-item-trigger");
|
|
3496
|
+
}
|
|
3497
|
+
syncProjectedContent() {
|
|
3498
|
+
const nextTriggerContent = [];
|
|
3499
|
+
const nextMenuContent = [];
|
|
3500
|
+
this.childNodes.forEach((node) => {
|
|
3501
|
+
if (this.isInternalNode(node)) {
|
|
3502
|
+
return;
|
|
3503
|
+
}
|
|
3504
|
+
const isTriggerSlot = node.nodeType === Node.ELEMENT_NODE && node.getAttribute("slot") === "trigger";
|
|
3505
|
+
if (isTriggerSlot) {
|
|
3506
|
+
nextTriggerContent.push(node);
|
|
3507
|
+
} else {
|
|
3508
|
+
nextMenuContent.push(node);
|
|
3509
|
+
}
|
|
3510
|
+
});
|
|
3511
|
+
const changed = nextTriggerContent.length !== this.triggerContent.length || nextTriggerContent.some((n, i) => n !== this.triggerContent[i]) || nextMenuContent.length !== this.menuContent.length || nextMenuContent.some((n, i) => n !== this.menuContent[i]);
|
|
3512
|
+
if (changed) {
|
|
3513
|
+
this.triggerContent = nextTriggerContent;
|
|
3514
|
+
this.menuContent = nextMenuContent;
|
|
3515
|
+
}
|
|
3516
|
+
return changed;
|
|
3517
|
+
}
|
|
3518
|
+
get hasTriggerContent() {
|
|
3519
|
+
return hasMeaningfulContent(this.triggerContent);
|
|
3520
|
+
}
|
|
3521
|
+
get hasMenuContent() {
|
|
3522
|
+
return hasMeaningfulContent(this.menuContent);
|
|
3523
|
+
}
|
|
3524
|
+
connectedCallback() {
|
|
3525
|
+
super.connectedCallback();
|
|
3526
|
+
this.syncProjectedContent();
|
|
3527
|
+
this.startContentObserver();
|
|
3528
|
+
document.addEventListener("click", this.handleDocumentClick);
|
|
3529
|
+
document.addEventListener("keydown", this.handleDocumentKeydown);
|
|
3530
|
+
}
|
|
3531
|
+
disconnectedCallback() {
|
|
3532
|
+
this.stopContentObserver();
|
|
3533
|
+
document.removeEventListener("click", this.handleDocumentClick);
|
|
3534
|
+
document.removeEventListener("keydown", this.handleDocumentKeydown);
|
|
3535
|
+
super.disconnectedCallback();
|
|
3536
|
+
}
|
|
3537
|
+
update(changedProperties) {
|
|
3538
|
+
this.stopContentObserver();
|
|
3539
|
+
super.update(changedProperties);
|
|
3540
|
+
this.startContentObserver();
|
|
3541
|
+
}
|
|
3542
|
+
startContentObserver() {
|
|
3543
|
+
if (this.contentObserver) {
|
|
3544
|
+
return;
|
|
3545
|
+
}
|
|
3546
|
+
this.contentObserver = new MutationObserver(() => {
|
|
3547
|
+
if (this.syncProjectedContent()) {
|
|
3548
|
+
this.requestUpdate();
|
|
3549
|
+
}
|
|
3550
|
+
});
|
|
3551
|
+
this.contentObserver.observe(this, { childList: true });
|
|
3552
|
+
}
|
|
3553
|
+
stopContentObserver() {
|
|
3554
|
+
this.contentObserver?.disconnect();
|
|
3555
|
+
this.contentObserver = void 0;
|
|
3556
|
+
}
|
|
3557
|
+
willUpdate(changedProperties) {
|
|
3558
|
+
if (changedProperties.has("dropdown") && this.dropdown == null) {
|
|
3559
|
+
this.dropdown = false;
|
|
3560
|
+
}
|
|
3561
|
+
if (changedProperties.has("open") && this.open == null) {
|
|
3562
|
+
this.open = false;
|
|
3563
|
+
}
|
|
3564
|
+
if (changedProperties.has("placement") && (this.placement == null || !isDropdownPlacement(this.placement))) {
|
|
3565
|
+
this.placement = "bottom-start";
|
|
3566
|
+
}
|
|
3567
|
+
}
|
|
3568
|
+
get triggerElement() {
|
|
3569
|
+
return this.querySelector("[data-sp-nav-item-trigger]");
|
|
3570
|
+
}
|
|
3571
|
+
toggle() {
|
|
3572
|
+
if (this.open) {
|
|
3573
|
+
this.close();
|
|
3574
|
+
} else {
|
|
3575
|
+
this.openMenu();
|
|
3576
|
+
}
|
|
3577
|
+
}
|
|
3578
|
+
openMenu() {
|
|
3579
|
+
if (this.open) {
|
|
3580
|
+
return;
|
|
3581
|
+
}
|
|
3582
|
+
this.open = true;
|
|
3583
|
+
this.dispatchEvent(new CustomEvent("sp-open", { bubbles: true }));
|
|
3584
|
+
}
|
|
3585
|
+
close() {
|
|
3586
|
+
if (!this.open) {
|
|
3587
|
+
return;
|
|
3588
|
+
}
|
|
3589
|
+
this.open = false;
|
|
3590
|
+
this.dispatchEvent(new CustomEvent("sp-close", { bubbles: true }));
|
|
3591
|
+
}
|
|
3592
|
+
get wrapperClasses() {
|
|
3593
|
+
return getDropdownClasses();
|
|
3594
|
+
}
|
|
3595
|
+
get menuClasses() {
|
|
3596
|
+
return getDropdownMenuClasses({
|
|
3597
|
+
open: this.open ?? false,
|
|
3598
|
+
placement: this.placement
|
|
3599
|
+
});
|
|
3600
|
+
}
|
|
3601
|
+
get navLinkClasses() {
|
|
3602
|
+
return getNavLinkClasses();
|
|
3603
|
+
}
|
|
3604
|
+
renderLink() {
|
|
3605
|
+
return html`<a
|
|
3606
|
+
aria-label="${ifDefined(this.forwardedAriaLabel)}"
|
|
3607
|
+
class="${this.navLinkClasses}"
|
|
3608
|
+
href="${ifDefined(this.href)}"
|
|
3609
|
+
id="${ifDefined(this.id || void 0)}"
|
|
3610
|
+
title="${ifDefined(this.title || void 0)}"
|
|
3611
|
+
>${this.hasMenuContent ? this.menuContent : this.label}</a
|
|
3612
|
+
>`;
|
|
3613
|
+
}
|
|
3614
|
+
renderDropdown() {
|
|
3615
|
+
return html`<div
|
|
3616
|
+
class="${this.wrapperClasses}"
|
|
3617
|
+
id="${ifDefined(this.id || void 0)}"
|
|
3618
|
+
title="${ifDefined(this.title || void 0)}"
|
|
3619
|
+
>
|
|
3620
|
+
<button
|
|
3621
|
+
aria-expanded="${this.open ? "true" : "false"}"
|
|
3622
|
+
aria-haspopup="true"
|
|
3623
|
+
aria-label="${ifDefined(this.forwardedAriaLabel ?? this.label)}"
|
|
3624
|
+
class="${this.navLinkClasses}"
|
|
3625
|
+
data-sp-nav-item-trigger
|
|
3626
|
+
type="button"
|
|
3627
|
+
@click="${() => this.toggle()}"
|
|
3628
|
+
>
|
|
3629
|
+
${this.hasTriggerContent ? this.triggerContent : this.label}
|
|
3630
|
+
</button>
|
|
3631
|
+
<div class="${this.menuClasses}" data-sp-nav-item-menu>
|
|
3632
|
+
${this.hasMenuContent ? this.menuContent : nothing}
|
|
3633
|
+
</div>
|
|
3634
|
+
</div>`;
|
|
3635
|
+
}
|
|
3636
|
+
render() {
|
|
3637
|
+
return this.dropdown ? this.renderDropdown() : this.renderLink();
|
|
3638
|
+
}
|
|
3639
|
+
};
|
|
3640
|
+
SpectreNavItemElement.properties = {
|
|
3641
|
+
dropdown: { type: Boolean, reflect: true },
|
|
3642
|
+
href: { type: String },
|
|
3643
|
+
label: { type: String },
|
|
3644
|
+
open: { type: Boolean, reflect: true },
|
|
3645
|
+
placement: { type: String, reflect: true }
|
|
3646
|
+
};
|
|
3647
|
+
function defineSpectreNavItem(tagName = "sp-nav-item") {
|
|
3648
|
+
const existingElement = customElements.get(tagName);
|
|
3649
|
+
if (existingElement) {
|
|
3650
|
+
return existingElement;
|
|
3651
|
+
}
|
|
3652
|
+
customElements.define(tagName, SpectreNavItemElement);
|
|
3653
|
+
return SpectreNavItemElement;
|
|
3654
|
+
}
|
|
3410
3655
|
var SpectreSidebarElement = class extends SpectreProjectableElement {
|
|
3411
3656
|
constructor() {
|
|
3412
3657
|
super(...arguments);
|
|
@@ -3853,6 +4098,91 @@ function defineSpectreTooltip(tagName = "sp-tooltip") {
|
|
|
3853
4098
|
customElements.define(tagName, SpectreTooltipElement);
|
|
3854
4099
|
return SpectreTooltipElement;
|
|
3855
4100
|
}
|
|
4101
|
+
var LEVEL_TAGS = {
|
|
4102
|
+
h1: literal`h1`,
|
|
4103
|
+
h2: literal`h2`,
|
|
4104
|
+
h3: literal`h3`,
|
|
4105
|
+
h4: literal`h4`,
|
|
4106
|
+
h5: literal`h5`,
|
|
4107
|
+
h6: literal`h6`,
|
|
4108
|
+
p: literal`p`,
|
|
4109
|
+
span: literal`span`
|
|
4110
|
+
};
|
|
4111
|
+
var SpectreTextElement = class extends SpectreProjectableElement {
|
|
4112
|
+
constructor() {
|
|
4113
|
+
super(...arguments);
|
|
4114
|
+
this.level = "p";
|
|
4115
|
+
this.size = "md";
|
|
4116
|
+
this.variant = "default";
|
|
4117
|
+
}
|
|
4118
|
+
willUpdate(changedProperties) {
|
|
4119
|
+
if (changedProperties.has("family") && !isTextFamily(this.family)) {
|
|
4120
|
+
this.family = void 0;
|
|
4121
|
+
}
|
|
4122
|
+
if (changedProperties.has("level") && !isTextLevel(this.level)) {
|
|
4123
|
+
this.level = "p";
|
|
4124
|
+
}
|
|
4125
|
+
if (changedProperties.has("size") && !isTextSize(this.size)) {
|
|
4126
|
+
this.size = "md";
|
|
4127
|
+
}
|
|
4128
|
+
if (changedProperties.has("variant") && !isTextVariant(this.variant)) {
|
|
4129
|
+
this.variant = "default";
|
|
4130
|
+
}
|
|
4131
|
+
}
|
|
4132
|
+
get id() {
|
|
4133
|
+
return super.id;
|
|
4134
|
+
}
|
|
4135
|
+
set id(value) {
|
|
4136
|
+
super.id = value;
|
|
4137
|
+
}
|
|
4138
|
+
get title() {
|
|
4139
|
+
return super.title;
|
|
4140
|
+
}
|
|
4141
|
+
set title(value) {
|
|
4142
|
+
super.title = value;
|
|
4143
|
+
}
|
|
4144
|
+
getContentContainer() {
|
|
4145
|
+
return this.querySelector("[data-sp-text-native]");
|
|
4146
|
+
}
|
|
4147
|
+
isInternalNode(node) {
|
|
4148
|
+
if (node.nodeType !== Node.ELEMENT_NODE) {
|
|
4149
|
+
return false;
|
|
4150
|
+
}
|
|
4151
|
+
const el = node;
|
|
4152
|
+
return el.hasAttribute("data-sp-text-native");
|
|
4153
|
+
}
|
|
4154
|
+
render() {
|
|
4155
|
+
const tag = LEVEL_TAGS[this.level ?? "p"];
|
|
4156
|
+
const textClasses = getTextClasses({
|
|
4157
|
+
...this.family !== void 0 && { family: this.family },
|
|
4158
|
+
size: this.size ?? "md",
|
|
4159
|
+
variant: this.variant ?? "default"
|
|
4160
|
+
});
|
|
4161
|
+
return html$1`<${tag}
|
|
4162
|
+
aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
|
|
4163
|
+
aria-label="${ifDefined(this.forwardedAriaLabel)}"
|
|
4164
|
+
aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
|
|
4165
|
+
class="${textClasses}"
|
|
4166
|
+
data-sp-text-native
|
|
4167
|
+
id="${ifDefined(this.id || void 0)}"
|
|
4168
|
+
title="${ifDefined(this.title || void 0)}"
|
|
4169
|
+
>${this.hasProjectedContent ? this.projectedContent : nothing}</${tag}>`;
|
|
4170
|
+
}
|
|
4171
|
+
};
|
|
4172
|
+
SpectreTextElement.properties = {
|
|
4173
|
+
family: { type: String, reflect: true },
|
|
4174
|
+
level: { type: String, reflect: true },
|
|
4175
|
+
size: { type: String, reflect: true },
|
|
4176
|
+
variant: { type: String, reflect: true }
|
|
4177
|
+
};
|
|
4178
|
+
function defineSpectreText(tagName = "sp-text") {
|
|
4179
|
+
const existingElement = customElements.get(tagName);
|
|
4180
|
+
if (existingElement) {
|
|
4181
|
+
return existingElement;
|
|
4182
|
+
}
|
|
4183
|
+
customElements.define(tagName, SpectreTextElement);
|
|
4184
|
+
return SpectreTextElement;
|
|
4185
|
+
}
|
|
3856
4186
|
|
|
3857
4187
|
// src/index.ts
|
|
3858
4188
|
function defineSpectreComponents() {
|
|
@@ -3882,11 +4212,13 @@ function defineSpectreComponents() {
|
|
|
3882
4212
|
defineSpectreFooter();
|
|
3883
4213
|
defineSpectreModal();
|
|
3884
4214
|
defineSpectreNav();
|
|
4215
|
+
defineSpectreNavItem();
|
|
3885
4216
|
defineSpectreSidebar();
|
|
3886
4217
|
defineSpectreToast();
|
|
3887
4218
|
defineSpectreTooltip();
|
|
4219
|
+
defineSpectreText();
|
|
3888
4220
|
}
|
|
3889
4221
|
|
|
3890
|
-
export { SpectreAlertElement, SpectreAvatarElement, SpectreBadgeElement, SpectreButtonElement, SpectreCardElement, SpectreCheckboxElement, SpectreContainerElement, SpectreDropdownElement, SpectreFieldsetElement, SpectreFooterElement, SpectreGridElement, SpectreIconBoxElement, SpectreInputElement, SpectreLabelElement, SpectreModalElement, SpectreNavElement, SpectrePricingCardElement, SpectreRadioElement, SpectreRatingElement, SpectreSectionElement, SpectreSelectElement, SpectreSidebarElement, SpectreSpinnerElement, SpectreStackElement, SpectreTagElement, SpectreTestimonialElement, SpectreTextareaElement, SpectreToastElement, SpectreTooltipElement, defineSpectreAlert, defineSpectreAvatar, defineSpectreBadge, defineSpectreButton, defineSpectreCard, defineSpectreCheckbox, defineSpectreComponents, defineSpectreContainer, defineSpectreDropdown, defineSpectreFieldset, defineSpectreFooter, defineSpectreGrid, defineSpectreIconBox, defineSpectreInput, defineSpectreLabel, defineSpectreModal, defineSpectreNav, defineSpectrePricingCard, defineSpectreRadio, defineSpectreRating, defineSpectreSection, defineSpectreSelect, defineSpectreSidebar, defineSpectreSpinner, defineSpectreStack, defineSpectreTag, defineSpectreTestimonial, defineSpectreTextarea, defineSpectreToast, defineSpectreTooltip, spectreInputSizes as spectreAlertSizes, spectreAlertVariants, spectreAvatarShapes, spectreAvatarSizes, spectreInputSizes as spectreBadgeSizes, spectreBadgeVariants, spectreInputSizes as spectreButtonSizes, spectreButtonTypes, spectreButtonVariants, spectreCardVariants, spectreContainerMaxWidths, spectreDropdownPlacements, spectreGridColumns, spectreGridGaps, spectreInputSizes as spectreIconBoxSizes, spectreIconBoxVariants, spectreInputSizes, spectreInputTypes, spectreInputSizes as spectreRatingSizes, spectreInputSizes as spectreSpinnerSizes, spectreSpinnerVariants, spectreStackAligns, spectreStackBases, spectreStackDirections, spectreInputSizes as spectreTagSizes, spectreTagVariants, spectreTestimonialVariants, spectreToastVariants, spectreTooltipPlacements };
|
|
4222
|
+
export { SpectreAlertElement, SpectreAvatarElement, SpectreBadgeElement, SpectreButtonElement, SpectreCardElement, SpectreCheckboxElement, SpectreContainerElement, SpectreDropdownElement, SpectreFieldsetElement, SpectreFooterElement, SpectreGridElement, SpectreIconBoxElement, SpectreInputElement, SpectreLabelElement, SpectreModalElement, SpectreNavElement, SpectreNavItemElement, SpectrePricingCardElement, SpectreRadioElement, SpectreRatingElement, SpectreSectionElement, SpectreSelectElement, SpectreSidebarElement, SpectreSpinnerElement, SpectreStackElement, SpectreTagElement, SpectreTestimonialElement, SpectreTextElement, SpectreTextareaElement, SpectreToastElement, SpectreTooltipElement, defineSpectreAlert, defineSpectreAvatar, defineSpectreBadge, defineSpectreButton, defineSpectreCard, defineSpectreCheckbox, defineSpectreComponents, defineSpectreContainer, defineSpectreDropdown, defineSpectreFieldset, defineSpectreFooter, defineSpectreGrid, defineSpectreIconBox, defineSpectreInput, defineSpectreLabel, defineSpectreModal, defineSpectreNav, defineSpectreNavItem, defineSpectrePricingCard, defineSpectreRadio, defineSpectreRating, defineSpectreSection, defineSpectreSelect, defineSpectreSidebar, defineSpectreSpinner, defineSpectreStack, defineSpectreTag, defineSpectreTestimonial, defineSpectreText, defineSpectreTextarea, defineSpectreToast, defineSpectreTooltip, spectreInputSizes as spectreAlertSizes, spectreAlertVariants, spectreAvatarShapes, spectreAvatarSizes, spectreInputSizes as spectreBadgeSizes, spectreBadgeVariants, spectreInputSizes as spectreButtonSizes, spectreButtonTypes, spectreButtonVariants, spectreCardVariants, spectreContainerMaxWidths, spectreDropdownPlacements, spectreGridColumns, spectreGridGaps, spectreInputSizes as spectreIconBoxSizes, spectreIconBoxVariants, spectreInputSizes, spectreInputTypes, spectreInputSizes as spectreRatingSizes, spectreInputSizes as spectreSpinnerSizes, spectreSpinnerVariants, spectreStackAligns, spectreStackBases, spectreStackDirections, spectreInputSizes as spectreTagSizes, spectreTagVariants, spectreTestimonialVariants, spectreTextFamilies, spectreTextLevels, spectreTextSizes, spectreTextVariants, spectreToastVariants, spectreTooltipPlacements };
|
|
3891
4223
|
//# sourceMappingURL=index.js.map
|
|
3892
4224
|
//# sourceMappingURL=index.js.map
|