@getflip/swirl-components-react 0.1.1 → 0.2.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/_commonjsHelpers-44457d8d.ba94af77.js +37 -0
- package/dist/a11y-dialog.esm-d7a94c8c.bd6ae411.js +99 -0
- package/dist/bodyScrollLock.esm-ce6356d8.2c600fb9.js +93 -0
- package/dist/{flip-action-list-item.entry.0f7f7d1d.js → flip-action-list-item.entry.66f33805.js} +3 -2
- package/dist/{flip-action-list-section.entry.e3180209.js → flip-action-list-section.entry.2927ba41.js} +1 -1
- package/dist/{flip-action-list.entry.6281e19f.js → flip-action-list.entry.66352b19.js} +2 -2
- package/dist/{flip-avatar-group.entry.649a0faa.js → flip-avatar-group.entry.be7886a3.js} +3 -2
- package/dist/{flip-avatar.entry.8261b415.js → flip-avatar.entry.f95286a1.js} +3 -2
- package/dist/{flip-badge.entry.d0a48796.js → flip-badge.entry.3f2d34e9.js} +3 -2
- package/dist/{flip-banner.entry.f03180a7.js → flip-banner.entry.32f2ef57.js} +3 -2
- package/dist/{flip-button-group.entry.e48f9cab.js → flip-button-group.entry.ed86679b.js} +1 -1
- package/dist/flip-button.entry.555b8fd4.js +33 -0
- package/dist/{flip-checkbox.entry.03f73a8f.js → flip-checkbox.entry.9768035f.js} +5 -4
- package/dist/{flip-chip.entry.232a1cad.js → flip-chip.entry.5ebbf411.js} +3 -2
- package/dist/flip-date-input.entry.7bf9efc5.js +5473 -0
- package/dist/flip-date-picker_3.entry.54e0b84d.js +1270 -0
- package/dist/{flip-description-list-item.entry.460331a8.js → flip-description-list-item.entry.f4e6faf7.js} +1 -1
- package/dist/{flip-description-list.entry.489d5885.js → flip-description-list.entry.2b1d4579.js} +1 -1
- package/dist/flip-dialog.entry.2bbc3bff.js +45 -0
- package/dist/flip-empty-state.entry.376592fa.js +15 -0
- package/dist/{flip-file-uploader.entry.bbfb166b.js → flip-file-uploader.entry.c0ddf5a7.js} +3 -2
- package/dist/flip-file-viewer-audio_6.entry.d60d1099.js +16174 -0
- package/dist/flip-file-viewer.entry.0c2922e5.js +95 -0
- package/dist/flip-form-control.entry.71c275f5.js +58 -0
- package/dist/flip-form-group.entry.ad2385d5.js +18 -0
- package/dist/flip-heading.entry.1245bdda.js +18 -0
- package/dist/{flip-icon-add-photo.entry.b807c3bc.js → flip-icon-add-photo.entry.c3178433.js} +1 -1
- package/dist/{flip-icon-add.entry.df6780ff.js → flip-icon-add.entry.708a8c7c.js} +1 -1
- package/dist/{flip-icon-admin-panel-settings.entry.5afd720c.js → flip-icon-admin-panel-settings.entry.88af777a.js} +1 -1
- package/dist/{flip-icon-arrow-back.entry.43439868.js → flip-icon-arrow-back.entry.abd86e13.js} +1 -1
- package/dist/{flip-icon-arrow-forward.entry.1f80c674.js → flip-icon-arrow-forward.entry.ef6e8b77.js} +1 -1
- package/dist/flip-icon-arrow-left.entry.70be0607.js +15 -0
- package/dist/{flip-icon-arrow-right-small.entry.5bb4f048.js → flip-icon-arrow-right-small.entry.d342c71f.js} +1 -1
- package/dist/flip-icon-arrow-right.entry.bd9eae8e.js +15 -0
- package/dist/{flip-icon-attachment.entry.e7a4173b.js → flip-icon-attachment.entry.898243d2.js} +1 -1
- package/dist/flip-icon-cancel.entry.fac41df2.js +15 -0
- package/dist/{flip-icon-chat-bubble.entry.60ca55cf.js → flip-icon-chat-bubble.entry.016c1f0d.js} +1 -1
- package/dist/{flip-icon-check-circle.entry.36b7fab2.js → flip-icon-check-circle.entry.330f4038.js} +1 -1
- package/dist/{flip-icon-check-small.entry.26aa4c8e.js → flip-icon-check-small.entry.590b928f.js} +1 -1
- package/dist/{flip-icon-check-strong.entry.bf6545d9.js → flip-icon-check-strong.entry.8fb90e69.js} +1 -1
- package/dist/{flip-icon-check.entry.88a7260b.js → flip-icon-check.entry.bf4892a9.js} +1 -1
- package/dist/{flip-icon-chevron-left.entry.1eab612e.js → flip-icon-chevron-left.entry.8a5cd7ef.js} +1 -1
- package/dist/{flip-icon-chevron-right.entry.b55b235e.js → flip-icon-chevron-right.entry.ba87bdc8.js} +1 -1
- package/dist/{flip-icon-close-small.entry.2c855d87.js → flip-icon-close-small.entry.d3ca39fb.js} +1 -1
- package/dist/{flip-icon-close.entry.8b5754bd.js → flip-icon-close.entry.ebcf0fe6.js} +1 -1
- package/dist/{flip-icon-cloud-upload.entry.943d15aa.js → flip-icon-cloud-upload.entry.bf4e840b.js} +1 -1
- package/dist/{flip-icon-comment.entry.966dd929.js → flip-icon-comment.entry.dd07b7a4.js} +1 -1
- package/dist/{flip-icon-copy.entry.a762687c.js → flip-icon-copy.entry.796dcb43.js} +1 -1
- package/dist/{flip-icon-date-range.entry.c3029ef5.js → flip-icon-date-range.entry.53c670dc.js} +1 -1
- package/dist/{flip-icon-delete.entry.9a13cea4.js → flip-icon-delete.entry.df480685.js} +1 -1
- package/dist/{flip-icon-description.entry.c16ff02b.js → flip-icon-description.entry.da40cecc.js} +1 -1
- package/dist/{flip-icon-download.entry.3b48f816.js → flip-icon-download.entry.3926477e.js} +1 -1
- package/dist/{flip-icon-edit.entry.86590692.js → flip-icon-edit.entry.0f50ba4c.js} +1 -1
- package/dist/{flip-icon-emoji-mood.entry.5f75c0e7.js → flip-icon-emoji-mood.entry.4fa27f13.js} +1 -1
- package/dist/{flip-icon-emoji-satisfied.entry.a24e9f8b.js → flip-icon-emoji-satisfied.entry.9246c39b.js} +1 -1
- package/dist/{flip-icon-error.entry.0a68ce3b.js → flip-icon-error_3.entry.4e8dcd9e.js} +30 -6
- package/dist/flip-icon-expand-less_3.entry.f191352f.js +35 -0
- package/dist/{flip-icon-expand-more.entry.d3b47154.js → flip-icon-expand-more.entry.5dbcc3e3.js} +1 -1
- package/dist/{flip-icon-file.entry.9edd9ac5.js → flip-icon-file.entry.64c3e030.js} +1 -1
- package/dist/{flip-icon-folder-shared.entry.a79740f8.js → flip-icon-folder-shared.entry.87cd72cd.js} +1 -1
- package/dist/flip-icon-fullscreen-exit.entry.b274fc5c.js +15 -0
- package/dist/flip-icon-fullscreen.entry.a0a70cc8.js +15 -0
- package/dist/{flip-icon-group-assign.entry.ef36d758.js → flip-icon-group-assign.entry.17e70921.js} +1 -1
- package/dist/{flip-icon-groups-custom.entry.99781f2b.js → flip-icon-groups-custom.entry.ed78b313.js} +1 -1
- package/dist/{flip-icon-groups.entry.33d1e274.js → flip-icon-groups.entry.ff8a5e63.js} +1 -1
- package/dist/{flip-icon-image.entry.e653564c.js → flip-icon-image.entry.b010afb8.js} +1 -1
- package/dist/{flip-icon-info.entry.c0153488.js → flip-icon-info.entry.61351d50.js} +1 -1
- package/dist/{flip-icon-inventory.entry.394f2024.js → flip-icon-inventory.entry.f0ffd90a.js} +1 -1
- package/dist/{flip-icon-like.entry.db6411bc.js → flip-icon-like.entry.6b0034de.js} +1 -1
- package/dist/{flip-icon-link.entry.35fba400.js → flip-icon-link.entry.9229312e.js} +1 -1
- package/dist/{flip-icon-lock.entry.73ad40b7.js → flip-icon-lock.entry.03e5fa85.js} +1 -1
- package/dist/{flip-icon-logout.entry.bfdaf585.js → flip-icon-logout.entry.8b073a7d.js} +1 -1
- package/dist/{flip-icon-mail.entry.10764728.js → flip-icon-mail.entry.91482af2.js} +1 -1
- package/dist/{flip-icon-manage-accounts.entry.13926348.js → flip-icon-manage-accounts.entry.5de8be6f.js} +1 -1
- package/dist/{flip-icon-mention.entry.43a08812.js → flip-icon-mention.entry.ef803509.js} +1 -1
- package/dist/{flip-icon-message.entry.e45d5f55.js → flip-icon-message.entry.20ae73fb.js} +1 -1
- package/dist/{flip-icon-more-horizontal.entry.175a91a7.js → flip-icon-more-horizontal.entry.9a2357f0.js} +1 -1
- package/dist/{flip-icon-more-vertikal.entry.855f16e5.js → flip-icon-more-vertikal.entry.0447fdab.js} +1 -1
- package/dist/{flip-icon-notifications-active.entry.0591ff75.js → flip-icon-notifications-active.entry.3aa487b9.js} +1 -1
- package/dist/{flip-icon-notifications-off.entry.59926148.js → flip-icon-notifications-off.entry.285c2bb6.js} +1 -1
- package/dist/{flip-icon-notifications.entry.b3b4169c.js → flip-icon-notifications.entry.e60fed91.js} +1 -1
- package/dist/flip-icon-open-in-new.entry.9de4d7c0.js +15 -0
- package/dist/{flip-icon-people-alt.entry.b9304d1e.js → flip-icon-people-alt.entry.dd840fb1.js} +1 -1
- package/dist/{flip-icon-person-off.entry.26c00153.js → flip-icon-person-off.entry.df6c63b6.js} +1 -1
- package/dist/{flip-icon-person.entry.ed4eca20.js → flip-icon-person.entry.37939889.js} +1 -1
- package/dist/{flip-icon-phone.entry.add9f8fc.js → flip-icon-phone.entry.08245320.js} +1 -1
- package/dist/{flip-icon-poll.entry.37836068.js → flip-icon-poll.entry.e0ff1d9f.js} +1 -1
- package/dist/flip-icon-print.entry.f5fbd804.js +15 -0
- package/dist/{flip-icon-recieved.entry.850deffd.js → flip-icon-recieved.entry.5b4e2a50.js} +1 -1
- package/dist/flip-icon-remove.entry.98d516c6.js +15 -0
- package/dist/{flip-icon-search-strong.entry.fec41c91.js → flip-icon-search-strong.entry.afcf6af9.js} +1 -1
- package/dist/{flip-icon-cancel_2.entry.99f63020.js → flip-icon-search.entry.0f103075.js} +3 -13
- package/dist/{flip-icon-send.entry.e687d6bb.js → flip-icon-send.entry.fd3001a2.js} +1 -1
- package/dist/{flip-icon-settings.entry.2e503ce9.js → flip-icon-settings.entry.2b1e4bb0.js} +1 -1
- package/dist/{flip-icon-time-filled.entry.27c31492.js → flip-icon-time-filled.entry.7fa814d7.js} +1 -1
- package/dist/{flip-icon-time-outlined.entry.c1a0b4dd.js → flip-icon-time-outlined.entry.e3f601ce.js} +1 -1
- package/dist/{flip-icon-user-assign.entry.10daebb0.js → flip-icon-user-assign.entry.4951e82f.js} +1 -1
- package/dist/{flip-icon-video-camera.entry.984108e1.js → flip-icon-video-camera.entry.74f8a7b6.js} +1 -1
- package/dist/{flip-icon-warning.entry.f8cdae30.js → flip-icon-warning.entry.76ebfb1e.js} +1 -1
- package/dist/{flip-link.entry.2f2bd6f0.js → flip-link.entry.f67e488c.js} +1 -1
- package/dist/flip-list.entry.5cc5b288.js +18 -0
- package/dist/flip-modal.entry.4921d0b4.js +61 -0
- package/dist/flip-option-list-item.entry.fd1d85dd.js +30 -0
- package/dist/flip-option-list-section.entry.5509895e.js +15 -0
- package/dist/flip-option-list.entry.efe97de9.js +95 -0
- package/dist/flip-pagination.entry.b109c35d.js +27 -0
- package/dist/flip-progress-indicator.entry.b7cf2985.js +18 -0
- package/dist/flip-radio-group.entry.dfc6ef8e.js +35 -0
- package/dist/{flip-radio.entry.9f9bc376.js → flip-radio.entry.f153fc92.js} +6 -5
- package/dist/{flip-resource-list-file-item.entry.f74d3bd3.js → flip-resource-list-file-item.entry.26beeeee.js} +4 -3
- package/dist/{flip-resource-list-item.entry.96075846.js → flip-resource-list-item.entry.7cac7a7c.js} +4 -3
- package/dist/{flip-resource-list.entry.d85444bc.js → flip-resource-list.entry.75d10224.js} +1 -1
- package/dist/{flip-search.entry.52636549.js → flip-search.entry.eccdd9b5.js} +3 -2
- package/dist/{flip-stack.entry.90b930f5.js → flip-stack.entry.2448bd6b.js} +3 -2
- package/dist/{flip-switch.entry.6b0e71bc.js → flip-switch.entry.71d04383.js} +3 -2
- package/dist/{flip-tab.entry.56a0d1cd.js → flip-tab.entry.184626dd.js} +6 -5
- package/dist/{flip-tabs.entry.0c8b74db.js → flip-tabs.entry.9434fd96.js} +3 -2
- package/dist/{flip-tag.entry.202b87db.js → flip-tag.entry.5df8a6b4.js} +3 -2
- package/dist/flip-text-input.entry.55decf50.js +55 -0
- package/dist/flip-text.entry.2b6e3f56.js +18 -0
- package/dist/{flip-theme-provider.entry.6402a4bc.js → flip-theme-provider.entry.1570cb6b.js} +1 -1
- package/dist/{flip-thumbnail.entry.9c3af9fe.js → flip-thumbnail.entry.54ea67cf.js} +3 -2
- package/dist/{flip-toast-provider.entry.cbe2040b.js → flip-toast-provider.entry.0ee21f8b.js} +1 -1
- package/dist/{flip-toast.entry.647ec44c.js → flip-toast.entry.29ea2ead.js} +3 -2
- package/dist/{flip-tooltip.entry.f43ae208.js → flip-tooltip.entry.e6a904e4.js} +1 -1
- package/dist/flip-video-thumbnail.entry.f3cf1c28.js +83 -0
- package/dist/{flip-visually-hidden.entry.70e706df.js → flip-visually-hidden.entry.47d25a46.js} +1 -1
- package/dist/index-6d2e18c6.289636d4.js +37 -0
- package/dist/index.b6e7bb76.js +1359 -0
- package/dist/index.d.ts +1 -0
- package/dist/stencil-generated/index.d.ts +136 -0
- package/dist/stencil-generated/react-component-lib/createComponent.d.ts +10 -0
- package/dist/stencil-generated/react-component-lib/createOverlayComponent.d.ts +21 -0
- package/dist/stencil-generated/react-component-lib/index.d.ts +2 -0
- package/dist/stencil-generated/react-component-lib/interfaces.d.ts +29 -0
- package/dist/stencil-generated/react-component-lib/utils/attachProps.d.ts +12 -0
- package/dist/stencil-generated/react-component-lib/utils/case.d.ts +2 -0
- package/dist/stencil-generated/react-component-lib/utils/index.d.ts +10 -0
- package/dist/swirl-components-react.js +132 -102
- package/dist/swirl-components-react.umd.cjs +137 -17
- package/dist/utils-b46bcd4f.79126bb2.js +30 -0
- package/dist/vite-env.d.ts +1 -0
- package/package.json +5 -3
- package/dist/flip-button.entry.d68ba496.js +0 -32
- package/dist/flip-dialog.entry.cbf334d1.js +0 -139
- package/dist/flip-icon-expand-less.entry.d099c577.js +0 -15
- package/dist/flip-icon-today.entry.4d38a769.js +0 -15
- package/dist/flip-icon-visibility-off.entry.6a6e6a24.js +0 -15
- package/dist/flip-icon-visibility.entry.0d16fd8e.js +0 -15
- package/dist/flip-inline-error_2.entry.17e93f00.js +0 -28
- package/dist/flip-popover.entry.6309d3d5.js +0 -179
- package/dist/flip-radio-group.entry.afff6fac.js +0 -35
- package/dist/index-3c78bcaf.2675909b.js +0 -48
- package/dist/main.c9b46168.js +0 -1329
- package/dist/utils-03e3261c.f5223801.js +0 -16
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import { r as o, c, h as l, H as h, g as n } from "./index.b6e7bb76.js";
|
|
2
|
+
import { q as u } from "./utils-b46bcd4f.79126bb2.js";
|
|
3
|
+
import "react";
|
|
4
|
+
import "react-dom";
|
|
5
|
+
const d = ":host{display:block}:host *{box-sizing:border-box}", r = class {
|
|
6
|
+
constructor(t) {
|
|
7
|
+
o(this, t), this.valueChange = c(this, "valueChange", 7), this.value = [], this.onFocus = () => {
|
|
8
|
+
this.focusItem(0);
|
|
9
|
+
}, this.onClick = (e) => {
|
|
10
|
+
const s = e.target, i = s == null ? void 0 : s.closest("flip-option-list-item");
|
|
11
|
+
!Boolean(i) || this.selectItem(this.items.findIndex((a) => a.value === i.value));
|
|
12
|
+
}, this.onKeyDown = (e) => {
|
|
13
|
+
e.code === "ArrowDown" ? (e.preventDefault(), this.focusNextItem()) : e.code === "ArrowUp" ? (e.preventDefault(), this.focusPreviousItem()) : e.code === "Space" ? (e.preventDefault(), this.selectFocusedItem()) : e.code === "Home" ? (e.preventDefault(), this.focusItem(0)) : e.code === "End" ? (e.preventDefault(), this.focusItem(this.items.length - 1)) : e.code === "KeyA" && (e.metaKey || e.ctrlKey) && this.multiSelect && (e.preventDefault(), this.selectAllItems());
|
|
14
|
+
};
|
|
15
|
+
}
|
|
16
|
+
componentDidLoad() {
|
|
17
|
+
this.items = u(this.el, "flip-option-list-item"), this.setItemDisabledState(), this.setItemContext(), this.syncItemsWithValue();
|
|
18
|
+
}
|
|
19
|
+
watchDisabled() {
|
|
20
|
+
this.setItemDisabledState();
|
|
21
|
+
}
|
|
22
|
+
watchMultiSelect() {
|
|
23
|
+
this.setItemContext();
|
|
24
|
+
}
|
|
25
|
+
watchValue() {
|
|
26
|
+
this.syncItemsWithValue();
|
|
27
|
+
}
|
|
28
|
+
setItemDisabledState() {
|
|
29
|
+
this.items.forEach((t) => t.disabled = this.disabled);
|
|
30
|
+
}
|
|
31
|
+
setItemContext() {
|
|
32
|
+
this.multiSelect ? this.items.forEach((t) => t.context = "multi-select") : (this.items.forEach((t) => t.context = "single-select"), this.value.length > 1 && this.updateValue([this.value[0]]));
|
|
33
|
+
}
|
|
34
|
+
selectItem(t) {
|
|
35
|
+
if (this.disabled)
|
|
36
|
+
return;
|
|
37
|
+
const e = this.items[t], s = this.value.includes(e.value);
|
|
38
|
+
this.multiSelect || (this.value = []), s ? this.updateValue(this.value.filter((i) => i !== e.value)) : this.updateValue([...this.value, e.value]);
|
|
39
|
+
}
|
|
40
|
+
updateValue(t) {
|
|
41
|
+
this.value = t, this.valueChange.emit(this.value);
|
|
42
|
+
}
|
|
43
|
+
selectFocusedItem() {
|
|
44
|
+
this.disabled || this.getActiveItemIndex() === -1 || this.selectItem(this.getActiveItemIndex());
|
|
45
|
+
}
|
|
46
|
+
selectAllItems() {
|
|
47
|
+
if (this.disabled)
|
|
48
|
+
return;
|
|
49
|
+
this.items.every((e) => this.value.includes(e.value)) ? this.updateValue([]) : this.updateValue(this.items.map((e) => e.value));
|
|
50
|
+
}
|
|
51
|
+
syncItemsWithValue() {
|
|
52
|
+
this.items.forEach((t) => t.selected = this.value.includes(t.value));
|
|
53
|
+
}
|
|
54
|
+
focusItem(t) {
|
|
55
|
+
if (this.disabled)
|
|
56
|
+
return;
|
|
57
|
+
this.items.forEach((s) => s.shadowRoot.children[0].removeAttribute("tabIndex"));
|
|
58
|
+
const e = this.items[t].shadowRoot.children[0];
|
|
59
|
+
!Boolean(e) || (e.setAttribute("tabIndex", "0"), e.focus());
|
|
60
|
+
}
|
|
61
|
+
focusNextItem() {
|
|
62
|
+
if (this.disabled)
|
|
63
|
+
return;
|
|
64
|
+
const t = this.getActiveItemIndex(), e = Math.min(t + 1, this.items.length - 1);
|
|
65
|
+
this.focusItem(e);
|
|
66
|
+
}
|
|
67
|
+
focusPreviousItem() {
|
|
68
|
+
const t = this.getActiveItemIndex(), e = Math.max(t - 1, 0);
|
|
69
|
+
this.focusItem(e);
|
|
70
|
+
}
|
|
71
|
+
getActiveItemIndex() {
|
|
72
|
+
return this.items.map((t) => t.shadowRoot.children[0]).findIndex((t) => {
|
|
73
|
+
var e, s;
|
|
74
|
+
return t === document.activeElement || t === ((s = (e = document.activeElement) === null || e === void 0 ? void 0 : e.shadowRoot) === null || s === void 0 ? void 0 : s.querySelector('[role="option"]'));
|
|
75
|
+
});
|
|
76
|
+
}
|
|
77
|
+
render() {
|
|
78
|
+
const t = this.multiSelect ? "true" : void 0, e = this.disabled ? -1 : 0;
|
|
79
|
+
return l(h, null, l("div", { "aria-label": this.label, "aria-multiselectable": t, class: "option-list", onClick: this.onClick, onFocus: this.onFocus, onKeyDown: this.onKeyDown, role: "listbox", tabIndex: e }, l("slot", null)));
|
|
80
|
+
}
|
|
81
|
+
get el() {
|
|
82
|
+
return n(this);
|
|
83
|
+
}
|
|
84
|
+
static get watchers() {
|
|
85
|
+
return {
|
|
86
|
+
disabled: ["watchDisabled"],
|
|
87
|
+
multiSelect: ["watchMultiSelect"],
|
|
88
|
+
value: ["watchValue"]
|
|
89
|
+
};
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
r.style = d;
|
|
93
|
+
export {
|
|
94
|
+
r as flip_option_list
|
|
95
|
+
};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { r as p, c as r, h as a, H as c } from "./index.b6e7bb76.js";
|
|
2
|
+
import { c as g } from "./index-6d2e18c6.289636d4.js";
|
|
3
|
+
import "react";
|
|
4
|
+
import "react-dom";
|
|
5
|
+
import "./_commonjsHelpers-44457d8d.ba94af77.js";
|
|
6
|
+
const h = ":host{display:block;width:100%}:host *{box-sizing:border-box}.pagination{display:block;width:100%}.pagination--variant-simple .pagination__list{gap:var(--s-space-4)}.pagination__list{display:flex;margin:0;padding:0;justify-content:flex-start;align-items:center;line-height:var(--s-line-height-base);list-style:none;gap:var(--s-space-8)}@media (--from-tablet){.pagination__list{gap:var(--s-space-16)}}.pagination__advanced-label{display:flex;align-items:center;gap:var(--s-space-8);white-space:nowrap}.pagination__page-select-container{position:relative}.pagination__page-select{display:inline-flex;padding-right:var(--s-space-16);border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:center;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.pagination__page-select:focus{outline-color:var(--s-focus-default)}.pagination__page-select-icon{position:absolute;top:50%;right:0;transform:translateY(-50%);pointer-events:none}", b = class {
|
|
7
|
+
constructor(t) {
|
|
8
|
+
p(this, t), this.setPage = r(this, "setPage", 7), this.accessibleNextButtonLabel = "Next page", this.accessiblePrevButtonLabel = "Previous page", this.nextButtonLabel = "Next", this.pageLabel = "out of", this.prevButtonLabel = "Prev", this.pageSelectLabel = "Select a page", this.variant = "default", this.onPrevButtonClick = () => {
|
|
9
|
+
const e = Math.max(this.page - 1, 1);
|
|
10
|
+
this.page !== e && this.setPage.emit(e);
|
|
11
|
+
}, this.onNextButtonClick = () => {
|
|
12
|
+
const e = Math.min(this.page + 1, this.pages);
|
|
13
|
+
this.page !== e && this.setPage.emit(e);
|
|
14
|
+
}, this.onSelect = (e) => {
|
|
15
|
+
const i = +e.target.value;
|
|
16
|
+
this.page !== i && this.setPage.emit(i);
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
render() {
|
|
20
|
+
const t = this.variant !== "advanced", e = this.variant !== "simple", i = this.variant === "advanced", s = `${this.page} ${this.pageLabel} ${this.pages}`, l = g("pagination", `pagination--variant-${this.variant}`);
|
|
21
|
+
return a(c, null, a("nav", { "aria-label": this.label, class: l }, a("ul", { class: "pagination__list" }, a("li", { class: "pagination__list-item" }, a("flip-button", { class: "pagination__prev-button", disabled: this.page <= 1, flipAriaLabel: this.accessiblePrevButtonLabel, hideLabel: t, icon: "<flip-icon-chevron-left></flip-icon-chevron-left>", intent: "primary", label: this.prevButtonLabel, onClick: this.onPrevButtonClick })), e ? a("li", { class: "pagination__list-item" }, a("span", null, i ? a("span", { "aria-current": "page", class: "pagination__advanced-label" }, a("span", { class: "pagination__page-select-container" }, a("select", { "aria-label": this.pageSelectLabel, class: "pagination__page-select", onChange: this.onSelect }, new Array(this.pages).fill(void 0).map((n, o) => o + 1).map((n) => a("option", { selected: this.page === n, value: String(n) }, n))), a("flip-icon-expand-more", { "aria-hidden": "true", class: "pagination__page-select-icon", size: 16 })), a("span", { "aria-hidden": "true" }, this.pageLabel, " ", this.pages)) : a("span", { "aria-current": "page" }, s))) : a("li", { class: "pagination__list-item" }, a("flip-visually-hidden", null, a("span", { "aria-current": "page" }, s))), a("li", { class: "pagination__list-item" }, a("flip-button", { class: "pagination__next-button", disabled: this.page >= this.pages, flipAriaLabel: this.accessibleNextButtonLabel, hideLabel: t, icon: "<flip-icon-chevron-right></flip-icon-chevron-right>", iconPosition: "end", intent: "primary", label: this.nextButtonLabel, onClick: this.onNextButtonClick })))));
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
b.style = h;
|
|
25
|
+
export {
|
|
26
|
+
b as flip_pagination
|
|
27
|
+
};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { r as t, h as s, H as n } from "./index.b6e7bb76.js";
|
|
2
|
+
import { c } from "./index-6d2e18c6.289636d4.js";
|
|
3
|
+
import "react";
|
|
4
|
+
import "react-dom";
|
|
5
|
+
import "./_commonjsHelpers-44457d8d.ba94af77.js";
|
|
6
|
+
const d = ":host{display:block;width:100%}:host *{box-sizing:border-box}:host(.circle){display:inline-flex;width:auto}.progress-indicator--variant-bar{display:block;width:100%;height:0.25rem;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.progress-indicator--variant-bar::-webkit-progress-bar{border-radius:0.125rem;background-color:var(--s-surface-raised-default)}.progress-indicator--variant-bar::-webkit-progress-value{border-radius:0.125rem;background-color:var(--s-surface-highlight-default);-webkit-transition:width 0.25s;transition:width 0.25s}.progress-indicator--variant-bar::-moz-progress-bar{height:0.25rem;border-radius:0.125rem;background-color:var(--s-surface-highlight-default);-moz-transition:width 0.25s;transition:width 0.25s}@media (prefers-reduced-motion){.progress-indicator--variant-bar::-moz-progress-bar{-moz-transition:none;transition:none}}.progress-indicator--variant-bar.progress-indicator--size-s{height:0.125rem}.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-bar{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-value{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-s::-moz-progress-bar{height:0.125rem;border-radius:0.0625rem}.progress-indicator--variant-circle{position:relative;display:inline-flex;overflow:hidden;width:3rem;height:3rem}.progress-indicator--variant-circle.progress-indicator--size-s{width:1.5rem;height:1.5rem}.progress-indicator__circle{position:absolute;width:100%;height:100%;transform:rotate(-90deg);inset:0}.progress-indicator__circle-background{stroke:var(--s-border-default);stroke-linecap:round}.progress-indicator__circle-value{transition:stroke-dashoffset 0.25s;stroke:var(--s-interactive-primary-default);stroke-linecap:round}@media (prefers-reduced-motion){.progress-indicator__circle-value{transition:none}}", l = class {
|
|
7
|
+
constructor(a) {
|
|
8
|
+
t(this, a), this.size = "m", this.value = 0, this.variant = "bar";
|
|
9
|
+
}
|
|
10
|
+
render() {
|
|
11
|
+
const a = c("progress-indicator", `progress-indicator--size-${this.size}`, `progress-indicator--variant-${this.variant}`), i = this.size === "m" ? 4 : 2, r = this.size === "m" ? 20 : 10, e = Math.round(r * 2 * Math.PI), o = Math.round(e * ((100 - this.value) / 100));
|
|
12
|
+
return s(n, { class: this.variant }, this.variant === "bar" && s("progress", { "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: a, max: 100, value: this.value }), this.variant === "circle" && s("span", { role: "progressbar", "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: a }, s("svg", { class: "progress-indicator__circle", focusable: "false", viewBox: `0 0 ${(r + i) * 2} ${(r + i) * 2}` }, s("circle", { class: "progress-indicator__circle-background", cx: r + i, cy: r + i, r, fill: "none", "stroke-width": i }), s("circle", { class: "progress-indicator__circle-value", cx: r + i, cy: r + i, r, fill: "none", "stroke-width": i, "stroke-dasharray": e, "stroke-dashoffset": o }))));
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
l.style = d;
|
|
16
|
+
export {
|
|
17
|
+
l as flip_progress_indicator
|
|
18
|
+
};
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { r as o, c as s, h as r, H as l, g as n } from "./index.b6e7bb76.js";
|
|
2
|
+
import "react";
|
|
3
|
+
import "react-dom";
|
|
4
|
+
const u = ".sc-flip-radio-group-h{display:block}.sc-flip-radio-group-h *.sc-flip-radio-group{box-sizing:border-box}.radio-group.sc-flip-radio-group{display:flex;flex-direction:column;gap:var(--s-space-4)}", d = class {
|
|
5
|
+
constructor(i) {
|
|
6
|
+
o(this, i), this.valueChange = s(this, "valueChange", 7);
|
|
7
|
+
}
|
|
8
|
+
componentDidLoad() {
|
|
9
|
+
this.radioButtons = Array.from(this.el.querySelectorAll("flip-radio")), this.initValue(), this.handleValueChanges();
|
|
10
|
+
}
|
|
11
|
+
initValue() {
|
|
12
|
+
if (this.value === void 0)
|
|
13
|
+
return;
|
|
14
|
+
const i = this.radioButtons.find((e) => e.value === this.value);
|
|
15
|
+
!Boolean(i) || (i.checked = !0);
|
|
16
|
+
}
|
|
17
|
+
handleValueChanges() {
|
|
18
|
+
for (const [i, e] of Object.entries(this.radioButtons))
|
|
19
|
+
e.addEventListener("valueChange", () => {
|
|
20
|
+
(e.checked === !0 || e.checked === "true") && (this.valueChange.emit(e.value), this.value = e.value, this.radioButtons.forEach((t, a) => {
|
|
21
|
+
String(a) !== i && (t.checked = !1);
|
|
22
|
+
}));
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
render() {
|
|
26
|
+
return r(l, { "aria-describedby": this.flipAriaDescribedby, role: "radiogroup" }, r("div", { class: "radio-group" }, r("slot", null)));
|
|
27
|
+
}
|
|
28
|
+
get el() {
|
|
29
|
+
return n(this);
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
d.style = u;
|
|
33
|
+
export {
|
|
34
|
+
d as flip_radio_group
|
|
35
|
+
};
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { r as s, c as l, h as i, H as c } from "./
|
|
2
|
-
import { c as t } from "./index-
|
|
1
|
+
import { r as s, c as l, h as i, H as c } from "./index.b6e7bb76.js";
|
|
2
|
+
import { c as t } from "./index-6d2e18c6.289636d4.js";
|
|
3
3
|
import "react";
|
|
4
4
|
import "react-dom";
|
|
5
|
+
import "./_commonjsHelpers-44457d8d.ba94af77.js";
|
|
5
6
|
const n = `.sc-flip-radio-h{display:inline-flex}.sc-flip-radio-h *.sc-flip-radio{box-sizing:border-box}.radio.sc-flip-radio{display:inline-flex;cursor:pointer;line-height:var(--s-line-height-base)}.radio.sc-flip-radio:focus-within .radio__box.sc-flip-radio{box-shadow:0 0 0 0.0625rem var(--s-background-default),
|
|
6
|
-
0 0 0 0.1875rem var(--s-focus-default)}.radio--checked.sc-flip-radio .radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.radio--checked.sc-flip-radio .radio__box.sc-flip-radio{position:relative;border-color:var(--s-icon-highlight);background-color:var(--s-icon-highlight)}.radio--checked.sc-flip-radio .radio__box.sc-flip-radio:after{position:absolute;top:50%;left:50%;width:0.5rem;height:0.5rem;border-radius:50%;background-color:var(--s-background-default);content:"";transform:translate3d(-50%, -50%, 0)}.radio--invalid.radio--checked.sc-flip-radio .radio__box.sc-flip-radio,.radio--invalid.radio--indeterminate.sc-flip-radio .radio__box.sc-flip-radio{background-color:var(--s-icon-critical)}.radio--invalid.sc-flip-radio .radio__box.sc-flip-radio{border-color:var(--s-icon-critical)}.radio--disabled.sc-flip-radio{cursor:default}.radio--disabled.radio--checked.sc-flip-radio .radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{border-color:var(--s-icon-disabled);background-color:transparent}.radio--disabled.radio--checked.sc-flip-radio .radio__box.sc-flip-radio{border-color:var(--s-icon-disabled);background-color:var(--s-background-default)}.radio--disabled.radio--checked.sc-flip-radio .radio__box.sc-flip-radio:after{background-color:var(--s-icon-disabled)}.radio--disabled.sc-flip-radio .radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{background-color:transparent}.radio--disabled.sc-flip-radio .radio__box.sc-flip-radio{border-color:var(--s-icon-disabled);backround-color:var(--s-icon-disabled)}.radio--disabled.sc-flip-radio .radio__description.sc-flip-radio,.radio--disabled.sc-flip-radio .radio__label.sc-flip-radio{color:var(--s-text-disabled)}.radio__control.sc-flip-radio{position:relative;display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{background-color:var(--s-action-neutral-hovered)}.radio__box.sc-flip-radio{position:relative;display:flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:50%}.radio__label-container.sc-flip-radio{display:inline-flex;margin-left:var(--s-space-12);padding-top:var(--s-space-2);flex-direction:column}.radio__label.sc-flip-radio{font-weight:var(--s-font-weight-medium)}.radio__description.sc-flip-radio{color:var(--s-text-subdued)}`,
|
|
7
|
+
0 0 0 0.1875rem var(--s-focus-default)}.radio--checked.sc-flip-radio .radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.radio--checked.sc-flip-radio .radio__box.sc-flip-radio{position:relative;border-color:var(--s-icon-highlight);background-color:var(--s-icon-highlight)}.radio--checked.sc-flip-radio .radio__box.sc-flip-radio:after{position:absolute;top:50%;left:50%;width:0.5rem;height:0.5rem;border-radius:50%;background-color:var(--s-background-default);content:"";transform:translate3d(-50%, -50%, 0)}.radio--invalid.radio--checked.sc-flip-radio .radio__box.sc-flip-radio,.radio--invalid.radio--indeterminate.sc-flip-radio .radio__box.sc-flip-radio{background-color:var(--s-icon-critical)}.radio--invalid.sc-flip-radio .radio__box.sc-flip-radio{border-color:var(--s-icon-critical)}.radio--disabled.sc-flip-radio{cursor:default}.radio--disabled.radio--checked.sc-flip-radio .radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{border-color:var(--s-icon-disabled);background-color:transparent}.radio--disabled.radio--checked.sc-flip-radio .radio__box.sc-flip-radio{border-color:var(--s-icon-disabled);background-color:var(--s-background-default)}.radio--disabled.radio--checked.sc-flip-radio .radio__box.sc-flip-radio:after{background-color:var(--s-icon-disabled)}.radio--disabled.sc-flip-radio .radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{background-color:transparent}.radio--disabled.sc-flip-radio .radio__box.sc-flip-radio{border-color:var(--s-icon-disabled);backround-color:var(--s-icon-disabled)}.radio--disabled.sc-flip-radio .radio__description.sc-flip-radio,.radio--disabled.sc-flip-radio .radio__label.sc-flip-radio{color:var(--s-text-disabled)}.radio__control.sc-flip-radio{position:relative;display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{background-color:var(--s-action-neutral-hovered)}.radio__box.sc-flip-radio{position:relative;display:flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:50%}.radio__label-container.sc-flip-radio{display:inline-flex;margin-left:var(--s-space-12);padding-top:var(--s-space-2);flex-direction:column}.radio__label.sc-flip-radio{font-weight:var(--s-font-weight-medium)}.radio__description.sc-flip-radio{color:var(--s-text-subdued)}`, p = class {
|
|
7
8
|
constructor(a) {
|
|
8
9
|
s(this, a), this.valueChange = l(this, "valueChange", 7), this.checked = !1, this.disabled = !1, this.onChange = () => {
|
|
9
10
|
this.checked = !0, this.valueChange.emit(this.value);
|
|
@@ -19,7 +20,7 @@ const n = `.sc-flip-radio-h{display:inline-flex}.sc-flip-radio-h *.sc-flip-radio
|
|
|
19
20
|
return i(c, null, i("label", { class: e, htmlFor: this.inputId }, i("span", { class: "radio__control" }, i("flip-visually-hidden", null, i("input", { "aria-checked": o, "aria-invalid": d, checked: r, class: "radio__input", disabled: this.disabled, id: this.inputId, name: this.inputName, onChange: this.onChange, type: "radio", value: this.value })), i("span", { "aria-hidden": "true", class: "radio__box" })), i("span", { class: "radio__label-container" }, this.label && i("span", { class: "radio__label" }, this.label), this.description && i("span", { class: "radio__description" }, this.description))));
|
|
20
21
|
}
|
|
21
22
|
};
|
|
22
|
-
|
|
23
|
+
p.style = n;
|
|
23
24
|
export {
|
|
24
|
-
|
|
25
|
+
p as flip_radio
|
|
25
26
|
};
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import { r as l, c as a, h as e, H as n } from "./
|
|
2
|
-
import { c } from "./index-
|
|
1
|
+
import { r as l, c as a, h as e, H as n } from "./index.b6e7bb76.js";
|
|
2
|
+
import { c } from "./index-6d2e18c6.289636d4.js";
|
|
3
3
|
import "react";
|
|
4
4
|
import "react-dom";
|
|
5
|
-
|
|
5
|
+
import "./_commonjsHelpers-44457d8d.ba94af77.js";
|
|
6
|
+
const p = ':host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-file-item{position:relative;display:flex;width:100%;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-background-default);line-height:var(--s-line-height-base);gap:var(--s-space-12)}.resource-list-file-item:focus{background-color:var(--s-background-hovered);outline:none}.resource-list-file-item--has-control .resource-list-file-item__label-container{padding-right:calc(var(--s-space-12) + 2.5rem)}.resource-list-file-item__icon{color:var(--s-icon-highlight)}.resource-list-file-item__label-container{position:relative;display:flex;min-width:0;min-height:2.875rem;flex-grow:1;justify-content:center;flex-direction:column}.resource-list-file-item__label-container:after{position:absolute;right:0;bottom:calc(-1 * var(--s-space-12));left:0;height:0.0625rem;background-color:var(--s-border-default);content:""}.resource-list-file-item__label{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__description{overflow:hidden;margin-top:var(--s-space-2);color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__error-message{margin-top:var(--s-space-2)}.resource-list-file-item__remove-button{position:absolute;top:50%;right:var(--s-space-16);display:inline-flex;transform:translateY(-50%)}.resource-list-file-item__spinner{position:absolute;top:50%;right:var(--s-space-24);display:inline-flex;transform:translateY(-50%)}', m = class {
|
|
6
7
|
constructor(i) {
|
|
7
8
|
l(this, i), this.remove = a(this, "remove", 7), this.icon = "<flip-icon-file></flip-icon-file>", this.removeButtonLabel = "Remove file";
|
|
8
9
|
}
|
package/dist/{flip-resource-list-item.entry.96075846.js → flip-resource-list-item.entry.7cac7a7c.js}
RENAMED
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import { r as n, c as d, h as t, H as u, g as h } from "./
|
|
2
|
-
import { c as m } from "./index-
|
|
1
|
+
import { r as n, c as d, h as t, H as u, g as h } from "./index.b6e7bb76.js";
|
|
2
|
+
import { c as m } from "./index-6d2e18c6.289636d4.js";
|
|
3
3
|
import "react";
|
|
4
4
|
import "react-dom";
|
|
5
|
-
|
|
5
|
+
import "./_commonjsHelpers-44457d8d.ba94af77.js";
|
|
6
|
+
const b = ':host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-item{position:relative;width:100%}.resource-list-item--checked .resource-list-item__checkbox{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.resource-list-item--has-menu .resource-list-item__label-container{padding-right:calc(var(--s-space-16) + 2.5rem + var(--s-space-12))}@media (--from-tablet){.resource-list-item--selectable .resource-list-item__content{padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}}.resource-list-item--selectable .resource-list-item__label-container{padding-right:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}@media (--from-tablet){.resource-list-item--selectable .resource-list-item__label-container{padding-right:var(--s-space-16)}}.resource-list-item--hide-divider .resource-list-item__label-container:after{display:none}.resource-list-item__content{--flip-avatar-group-border-color:var(--s-background-default);--flip-badge-border-color:var(--s-background-default);display:flex;width:100%;padding-top:var(--s-space-12);padding-right:0;padding-bottom:var(--s-space-12);padding-left:var(--s-space-16);align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-background-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;text-decoration:none;cursor:pointer;gap:var(--s-space-12)}.resource-list-item__content:hover:not(:disabled){background-color:var(--s-background-hovered)}.resource-list-item__content:hover:not(:disabled) .resource-list-item__media{--flip-avatar-group-border-color:var(--s-background-hovered);--flip-badge-border-color:var(--s-background-hovered)}.resource-list-item__content:active:not(:disabled){background-color:var(--s-background-pressed)}.resource-list-item__content:active:not(:disabled) .resource-list-item__media{--flip-avatar-group-border-color:var(--s-background-pressed);--flip-badge-border-color:var(--s-background-pressed)}.resource-list-item__content:focus{background-color:var(--s-background-hovered);outline:none}.resource-list-item__content:focus .resource-list-item__media{--flip-avatar-group-border-color:var(--s-background-hovered);--flip-badge-border-color:var(--s-background-hovered)}.resource-list-item__content:disabled{color:var(--s-text-disabled);background-color:var(--s-background-default);cursor:default}.resource-list-item__content:disabled .resource-list-item__description{color:var(--s-text-disabled)}.resource-list-item__media{display:inline-flex}.resource-list-item__label-container{position:relative;display:flex;min-width:0;min-height:2.875rem;padding-right:var(--s-space-16);flex-grow:1;justify-content:center;flex-direction:column}.resource-list-item__label-container:after{position:absolute;right:0;bottom:calc(-1 * var(--s-space-12));left:0;height:0.0625rem;background-color:var(--s-border-default);content:""}.resource-list-item__label{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__description{overflow:hidden;margin-top:var(--s-space-2);color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__menu-trigger{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__checkbox{position:absolute;top:50%;right:var(--s-space-16);display:flex;width:1.25rem;height:1.25rem;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s);transform:translateY(-50%)}@media (--from-tablet){.resource-list-item__checkbox{right:auto;left:var(--s-space-16)}}.resource-list-item__checkbox-icon{display:inline-flex;width:1.0625rem;height:1.0625rem}.resource-list-item__checkbox-icon>*::part(icon){width:1.0625rem;height:1.0625rem}.resource-list-item__meta{position:absolute;top:calc(var(--s-space-12) + var(--s-space-4));right:var(--s-space-16);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}', p = class {
|
|
6
7
|
constructor(e) {
|
|
7
8
|
n(this, e), this.valueChange = d(this, "valueChange", 7), this.checked = !1, this.menuTriggerLabel = "Options", this.onClick = () => {
|
|
8
9
|
!this.selectable || (this.checked = !this.checked, this.valueChange.emit(this.checked));
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { r as c, c as r, h as a, H as i } from "./
|
|
2
|
-
import { c as t } from "./index-
|
|
1
|
+
import { r as c, c as r, h as a, H as i } from "./index.b6e7bb76.js";
|
|
2
|
+
import { c as t } from "./index-6d2e18c6.289636d4.js";
|
|
3
3
|
import "react";
|
|
4
4
|
import "react-dom";
|
|
5
|
+
import "./_commonjsHelpers-44457d8d.ba94af77.js";
|
|
5
6
|
const l = ".sc-flip-search-h{display:flex;width:100%}.sc-flip-search-h *.sc-flip-search{box-sizing:border-box}.search.sc-flip-search{position:relative;display:flex;width:100%}.search--disabled.sc-flip-search .search__icon.sc-flip-search{color:var(--s-icon-disabled)}.search--disabled.sc-flip-search .search__input.sc-flip-search{color:var(--s-text-disabled)}.search--disabled.sc-flip-search .search__input.sc-flip-search::-moz-placeholder{color:var(--s-text-disabled)}.search--disabled.sc-flip-search .search__input.sc-flip-search::placeholder{color:var(--s-text-disabled)}.search__icon.sc-flip-search{position:absolute;top:50%;left:var(--s-space-12);display:inline-flex;color:var(--s-icon-default);transform:translateY(-50%)}.search__input.sc-flip-search{width:100%;height:2.5rem;padding-top:var(--s-space-8);padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));border:none;border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--s-surface-raised-default);font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.search__input.sc-flip-search:focus{outline-color:var(--s-focus-default)}.search__input.sc-flip-search::-moz-placeholder{color:var(--s-text-subdued)}.search__input.sc-flip-search::placeholder{color:var(--s-text-subdued)}.search__input.sc-flip-search::-webkit-search-decoration,.search__input.sc-flip-search::-webkit-search-cancel-button,.search__input.sc-flip-search::-webkit-search-results-button,.search__input.sc-flip-search::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.search__input.sc-flip-search:not(:-moz-placeholder-shown)+.search__clear-button.sc-flip-search{display:inline-flex}.search__input.sc-flip-search:not(:placeholder-shown)+.search__clear-button.sc-flip-search{display:inline-flex}.search__clear-button.sc-flip-search{position:absolute;top:50%;right:var(--s-space-12);display:none;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer;transform:translateY(-50%)}", o = class {
|
|
6
7
|
constructor(s) {
|
|
7
8
|
c(this, s), this.inputBlur = r(this, "inputBlur", 7), this.inputFocus = r(this, "inputFocus", 7), this.valueChange = r(this, "valueChange", 7), this.clearButtonLabel = "Clear search term", this.placeholder = "Search \u2026", this.clear = () => {
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { r as i, h as s, H as e } from "./
|
|
2
|
-
import { c as n } from "./index-
|
|
1
|
+
import { r as i, h as s, H as e } from "./index.b6e7bb76.js";
|
|
2
|
+
import { c as n } from "./index-6d2e18c6.289636d4.js";
|
|
3
3
|
import "react";
|
|
4
4
|
import "react-dom";
|
|
5
|
+
import "./_commonjsHelpers-44457d8d.ba94af77.js";
|
|
5
6
|
const c = ":host{display:block;width:100%}:host *{box-sizing:border-box}.stack{display:flex;width:100%;max-width:100%}.stack ::slotted(*){min-width:0;max-width:100%;flex-basis:auto;flex-grow:0;flex-shrink:0}.stack--align-start{align-items:flex-start}.stack--align-center{align-items:center}.stack--align-end{align-items:flex-end}.stack--align-stretch{align-items:stretch}.stack--justify-start{justify-content:flex-start}.stack--justify-center{justify-content:center}.stack--justify-end{justify-content:flex-end}.stack--justify-space-between{justify-content:space-between}.stack--justify-space-around{justify-content:space-around}.stack--justify-space-evenly{justify-content:space-evenly}.stack--justify-stretch{justify-content:stretch}.stack--justify-stretch ::slotted(*){flex-grow:1}.stack--orientation-vertical{flex-direction:column}.stack--orientation-horizontal{flex-direction:row}.stack--wrap{flex-wrap:wrap}", r = class {
|
|
6
7
|
constructor(t) {
|
|
7
8
|
i(this, t), this.align = "start", this.as = "div", this.justify = "start", this.orientation = "vertical", this.spacing = "0", this.wrap = !1;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { r as n, c as r, h as e, H as a, g as o } from "./
|
|
2
|
-
import { c as l } from "./index-
|
|
1
|
+
import { r as n, c as r, h as e, H as a, g as o } from "./index.b6e7bb76.js";
|
|
2
|
+
import { c as l } from "./index-6d2e18c6.289636d4.js";
|
|
3
3
|
import "react";
|
|
4
4
|
import "react-dom";
|
|
5
|
+
import "./_commonjsHelpers-44457d8d.ba94af77.js";
|
|
5
6
|
const d = `.sc-flip-switch-h{display:inline-flex}.sc-flip-switch-h *.sc-flip-switch{box-sizing:border-box}.switch.sc-flip-switch{display:inline-flex;align-items:center;touch-action:none}.switch.sc-flip-switch:focus-within .switch__control.sc-flip-switch{box-shadow:0 0 0 0.0625rem var(--s-background-default),
|
|
6
7
|
0 0 0 0.1875rem var(--s-focus-default)}.switch--size-m.sc-flip-switch .switch__control.sc-flip-switch{width:2.75rem;height:1.5rem;border-radius:calc(1.5rem / 2)}.switch--size-m.sc-flip-switch .switch__thumb.sc-flip-switch{width:1.25rem;height:1.25rem}.switch--on.switch--size-m.sc-flip-switch .switch__thumb.sc-flip-switch{left:calc(100% - 1.25rem - var(--s-space-2))}.switch--on.sc-flip-switch .switch__control.sc-flip-switch{background-color:var(--s-interactive-primary-default)}.switch--on.sc-flip-switch .switch__thumb.sc-flip-switch{left:calc(100% - 0.875rem - var(--s-space-2))}.switch--disabled.sc-flip-switch .switch__control.sc-flip-switch{background-color:var(--s-interactive-primary-disabled);cursor:default}.switch--disabled.sc-flip-switch .switch__thumb.sc-flip-switch{background-color:var(--s-interactive-neutral-default)}.switch--disabled.sc-flip-switch .switch__label.sc-flip-switch{color:var(--s-text-disabled)}.switch__control.sc-flip-switch{position:relative;width:1.875rem;height:1.125rem;flex-shrink:0;border-radius:calc(1.125rem / 2);background-color:var(--s-interactive-primary-disabled);cursor:pointer;transition:background-color 0.2s}@media (prefers-reduced-motion){.switch__control.sc-flip-switch{transition:none}}.switch__thumb.sc-flip-switch{position:absolute;top:var(--s-space-2);left:var(--s-space-2);width:0.875rem;height:0.875rem;border-radius:50%;background-color:var(--s-surface-default);transition:left 0.2s;pointer-events:none}@media (prefers-reduced-motion){.switch__thumb.sc-flip-switch{transition:none}}.switch__label.sc-flip-switch{position:relative;z-index:1;margin-left:var(--s-space-12);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base)}`, f = class {
|
|
7
8
|
constructor(h) {
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import { r as s, h as a, H as i } from "./
|
|
2
|
-
import { c as o } from "./index-
|
|
1
|
+
import { r as s, h as a, H as i } from "./index.b6e7bb76.js";
|
|
2
|
+
import { c as o } from "./index-6d2e18c6.289636d4.js";
|
|
3
3
|
import "react";
|
|
4
4
|
import "react-dom";
|
|
5
|
-
|
|
5
|
+
import "./_commonjsHelpers-44457d8d.ba94af77.js";
|
|
6
|
+
const e = ":host{display:block;width:100%}:host *{box-sizing:border-box}.tab{display:none;width:100%;padding:var(--s-space-8)}.tab--active{display:block}", r = class {
|
|
6
7
|
constructor(t) {
|
|
7
8
|
s(this, t);
|
|
8
9
|
}
|
|
@@ -11,7 +12,7 @@ const e = ":host{display:block;width:100%}:host *{box-sizing:border-box}.tab{dis
|
|
|
11
12
|
return a(i, { "aria-labelledby": `tab-${this.tabId}`, id: this.tabId, role: "tabpanel", tabIndex: this.active ? 0 : -1 }, a("div", { class: t }, a("slot", null)));
|
|
12
13
|
}
|
|
13
14
|
};
|
|
14
|
-
|
|
15
|
+
r.style = e;
|
|
15
16
|
export {
|
|
16
|
-
|
|
17
|
+
r as flip_tab
|
|
17
18
|
};
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { r as o, c as r, h as s, H as n, g as b } from "./
|
|
2
|
-
import { c as l } from "./index-
|
|
1
|
+
import { r as o, c as r, h as s, H as n, g as b } from "./index.b6e7bb76.js";
|
|
2
|
+
import { c as l } from "./index-6d2e18c6.289636d4.js";
|
|
3
3
|
import "react";
|
|
4
4
|
import "react-dom";
|
|
5
|
+
import "./_commonjsHelpers-44457d8d.ba94af77.js";
|
|
5
6
|
const d = ".sc-flip-tabs-h{display:block;width:100%}.sc-flip-tabs-h *.sc-flip-tabs{box-sizing:border-box}.tabs.sc-flip-tabs{width:100%}.tabs__tab-bar.sc-flip-tabs{position:relative;display:flex;width:100%;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:flex-start;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (--from-tablet){.tabs__tab-bar.sc-flip-tabs{padding-right:0;padding-left:0}}.tabs__tab.sc-flip-tabs{display:block;min-width:0;margin:0;padding:var(--s-space-4) 0;border:none;background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);cursor:pointer}.tabs__tab.sc-flip-tabs:focus-visible{outline:none}.tabs__tab.sc-flip-tabs:focus-visible .tabs__tab-label.sc-flip-tabs{border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.125rem var(--s-focus-default)}.tabs__tab.sc-flip-tabs:not(:first-of-type){padding-left:var(--s-space-8)}.tabs__tab.sc-flip-tabs:not(:last-of-type){padding-right:var(--s-space-8)}.tabs__tab-label.sc-flip-tabs{display:block;overflow:hidden;width:100%;padding:var(--s-space-8) var(--s-space-8);text-align:center;white-space:nowrap;text-overflow:ellipsis}.tabs__tab--active.sc-flip-tabs{color:var(--s-text-highlight)}.tabs__indicator.sc-flip-tabs{position:absolute;bottom:0;left:0;width:0;height:0.125rem;border-radius:0.0625rem;background-color:var(--s-border-highlight);transition:background-color 0.15s, transform 0.15s, width 0.15s;transform:translate3d(0, 0, 0);pointer-events:none}@media (prefers-reduced-motion){.tabs__indicator.sc-flip-tabs{transition:none}}", c = class {
|
|
6
7
|
constructor(t) {
|
|
7
8
|
o(this, t), this.tabActivated = r(this, "tabActivated", 7), this.tabs = [], this.onKeyDown = (i) => {
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { r as e, c as s, h as t, H as n } from "./
|
|
2
|
-
import { c as i } from "./index-
|
|
1
|
+
import { r as e, c as s, h as t, H as n } from "./index.b6e7bb76.js";
|
|
2
|
+
import { c as i } from "./index-6d2e18c6.289636d4.js";
|
|
3
3
|
import "react";
|
|
4
4
|
import "react-dom";
|
|
5
|
+
import "./_commonjsHelpers-44457d8d.ba94af77.js";
|
|
5
6
|
const c = ":host{display:inline-flex}:host *{box-sizing:border-box}.tag{display:inline-flex;padding:var(--s-space-2) var(--s-space-8);align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-default);background-color:var(--s-surface-neutral-subdued);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);gap:var(--s-space-4)}.tag--intent-info{color:var(--s-text-info);background-color:var(--s-surface-info-subdued)}.tag--intent-info .tag__removal-button{color:var(--icon-info)}.tag--intent-critical{color:var(--s-text-critical);background-color:var(--s-surface-critical-subdued)}.tag--intent-critical .tag__removal-button{color:var(--icon-critical)}.tag--intent-warning{color:var(--s-text-warning);background-color:var(--s-surface-warning-subdued)}.tag--intent-warning .tag__removal-button{color:var(--icon-warning)}.tag--intent-success{color:var(--s-text-success);background-color:var(--s-surface-success-subdued)}.tag--intent-success .tag__removal-button{color:var(--icon-success)}.tag__removal-button{display:inline-flex;margin-right:calc(-1 * var(--s-space-4));padding:0;border:none;color:var(--s-icon-strong);background-color:transparent;cursor:pointer}.tag__removal-button:focus{outline-color:var(--s-focus-default)}", l = class {
|
|
6
7
|
constructor(a) {
|
|
7
8
|
e(this, a), this.remove = s(this, "remove", 7), this.intent = "default", this.removalButtonLabel = "Remove", this.onRemove = (r) => {
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { r, c as h, h as t, H as c } from "./index.b6e7bb76.js";
|
|
2
|
+
import { c as d } from "./index-6d2e18c6.289636d4.js";
|
|
3
|
+
import "react";
|
|
4
|
+
import "react-dom";
|
|
5
|
+
import "./_commonjsHelpers-44457d8d.ba94af77.js";
|
|
6
|
+
const x = '.sc-flip-text-input-h{display:block;width:100%}.sc-flip-text-input-h *.sc-flip-text-input{box-sizing:border-box}.text-input.sc-flip-text-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm)}.text-input--clearable.sc-flip-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--type-number.sc-flip-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--show-password.sc-flip-text-input .text-input__input.sc-flip-text-input{width:100%}.text-input--disabled.sc-flip-text-input .text-input__character-counter.sc-flip-text-input{color:var(--s-text-disabled)}.text-input__input.sc-flip-text-input{display:inline-flex;width:100%;max-height:13.75rem;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);resize:none;caret-color:var(--s-border-highlight)}.text-input__input.sc-flip-text-input:focus{outline:none}.text-input__input.sc-flip-text-input:disabled{color:var(--s-text-disabled);background-color:transparent}.text-input__input.sc-flip-text-input::-webkit-outer-spin-button,.text-input__input.sc-flip-text-input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.text-input__input[type="number"].sc-flip-text-input{-moz-appearance:textfield}input.text-input__input.sc-flip-text-input:not([type="password"]){width:0.25rem;min-width:0.25rem}.text-input__clear-button.sc-flip-text-input,.text-input__password-toggle.sc-flip-text-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__clear-button.sc-flip-text-input:focus,.text-input__password-toggle.sc-flip-text-input:focus{outline-color:var(--s-focus-default)}.text-input__stepper.sc-flip-text-input{position:absolute;top:-1.4375rem;right:0;display:flex;flex-direction:column}.text-input__step-button.sc-flip-text-input{display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__step-button.sc-flip-text-input:focus{outline-color:var(--s-focus-default)}.text-input__character-counter.sc-flip-text-input{position:absolute;top:-1.375rem;right:0;display:flex;color:var(--s-text-subdued);line-height:var(--s-line-height-sm);flex-direction:column}.text-input__prefix.sc-flip-text-input{padding-right:var(--s-space-4);font-size:var(--s-font-size-base)}.text-input__suffix.sc-flip-text-input{padding-left:var(--s-space-4);font-size:var(--s-font-size-base)}', f = class {
|
|
7
|
+
constructor(s) {
|
|
8
|
+
r(this, s), this.valueChange = h(this, "valueChange", 7), this.autoComplete = "on", this.clearButtonLabel = "Clear input", this.rows = 1, this.passwordToggleLabel = "Toggle password display", this.type = "text", this.showPassword = !1, this.clear = () => {
|
|
9
|
+
this.inputEl.value = "", this.value = "", this.valueChange.emit(""), this.inputEl.focus();
|
|
10
|
+
}, this.onChange = (e) => {
|
|
11
|
+
const i = e.target;
|
|
12
|
+
this.value = i.value, this.valueChange.emit(i.value);
|
|
13
|
+
}, this.onFocus = (e) => {
|
|
14
|
+
this.handleAutoSelect(e);
|
|
15
|
+
}, this.onInput = (e) => {
|
|
16
|
+
this.onChange(e);
|
|
17
|
+
}, this.onKeyPress = (e) => {
|
|
18
|
+
this.type === "number" && ["+", "-", "e"].includes(e.key) && e.preventDefault();
|
|
19
|
+
}, this.decreaseValue = () => {
|
|
20
|
+
if (this.type !== "number")
|
|
21
|
+
return;
|
|
22
|
+
const e = this.step || 1, i = isNaN(this.inputEl.valueAsNumber) ? this.min !== void 0 ? this.min + 1 : 1 : this.inputEl.valueAsNumber;
|
|
23
|
+
this.value = String(Math.max(this.min || -1 / 0, i - e)), this.valueChange.emit(this.value);
|
|
24
|
+
}, this.increaseValue = () => {
|
|
25
|
+
if (this.type !== "number")
|
|
26
|
+
return;
|
|
27
|
+
const e = this.step || 1, i = isNaN(this.inputEl.valueAsNumber) ? this.min !== void 0 ? this.min - 1 : -1 : this.inputEl.valueAsNumber;
|
|
28
|
+
this.value = String(Math.min(this.max || 1 / 0, i + e)), this.valueChange.emit(this.value);
|
|
29
|
+
}, this.togglePassword = () => {
|
|
30
|
+
this.type === "password" && (this.showPassword = !this.showPassword);
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
componentDidRender() {
|
|
34
|
+
this.adjustInputSize();
|
|
35
|
+
}
|
|
36
|
+
adjustInputSize() {
|
|
37
|
+
this.rows > 1 && (this.inputEl.style.width = "", this.inputEl.style.height = "", this.inputEl.style.height = this.inputEl.scrollHeight / 16 + "rem"), this.rows === 1 && (this.inputEl.style.height = "", this.inputEl.style.width = "", this.type !== "password" && (this.inputEl.style.width = this.inputEl.scrollWidth / 16 + "rem"));
|
|
38
|
+
}
|
|
39
|
+
handleAutoSelect(s) {
|
|
40
|
+
!this.autoSelect || s.target.select();
|
|
41
|
+
}
|
|
42
|
+
render() {
|
|
43
|
+
var s;
|
|
44
|
+
const e = this.rows === 1 ? "input" : "textarea", i = this.invalid === !0 ? "true" : this.invalid === !1 ? "false" : void 0, n = this.type === "number" && !this.disabled, a = this.type === "password" && !this.disabled, l = this.clearable && !this.disabled && Boolean(this.value) && !a && !n && !this.showCharacterCounter, p = this.type === "password" && this.showPassword ? "text" : this.type, u = d("text-input", `text-input--type-${this.type}`, {
|
|
45
|
+
"text-input--clearable": this.clearable,
|
|
46
|
+
"text-input--disabled": this.disabled,
|
|
47
|
+
"text-input--show-password": this.type === "password" && this.showPassword
|
|
48
|
+
});
|
|
49
|
+
return t(c, null, t("div", { class: u }, this.prefixLabel && t("span", { class: "text-input__prefix" }, this.prefixLabel), t(e, { "aria-describedby": this.flipAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-invalid": i, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : void 0, min: this.type === "number" ? this.min : void 0, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, ref: (o) => this.inputEl = o, required: this.required, rows: this.rows > 1 ? this.rows : void 0, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : void 0, type: p, value: this.rows === 1 ? this.value : void 0 }, this.rows > 1 && this.value), this.suffixLabel && t("span", { class: "text-input__suffix" }, this.suffixLabel), l && t("button", { "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, type: "button" }, t("flip-icon-cancel", null)), a && t("button", { "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? t("flip-icon-visibility-off", null) : t("flip-icon-visibility", null)), n && t("span", { class: "text-input__stepper" }, t("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, t("flip-icon-expand-less", null)), t("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, t("flip-icon-expand-more", null))), this.showCharacterCounter && t("span", { class: "text-input__character-counter" }, ((s = this.value) === null || s === void 0 ? void 0 : s.length) || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")));
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
f.style = x;
|
|
53
|
+
export {
|
|
54
|
+
f as flip_text_input
|
|
55
|
+
};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { r as i, h as e, H as o } from "./index.b6e7bb76.js";
|
|
2
|
+
import { c as l } from "./index-6d2e18c6.289636d4.js";
|
|
3
|
+
import "react";
|
|
4
|
+
import "react-dom";
|
|
5
|
+
import "./_commonjsHelpers-44457d8d.ba94af77.js";
|
|
6
|
+
const n = ":host{display:block}:host *{box-sizing:border-box}.text{margin:0;padding:0}.text--align-start{text-align:start}.text--align-center{text-align:center}.text--align-end{text-align:end}.text--color-default{color:var(--s-text-default)}.text--color-subdued{color:var(--s-text-subdued)}.text--color-critical{color:var(--s-text-critical)}.text--color-success{color:var(--s-text-success)}.text--color-warning{color:var(--s-text-warning)}.text--size-sm{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}.text--size-base{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}.text--size-lg{font-size:var(--s-font-size-lg);line-height:var(--s-line-height-lg)}.text--weight-normal{font-weight:var(--s-font-weight-normal)}.text--weight-medium{font-weight:var(--s-font-weight-medium)}.text--weight-semibold{font-weight:var(--s-font-weight-semibold)}.text--weight-bold{font-weight:var(--s-font-weight-bold)}.text--font-style-normal{font-style:normal}.text--font-style-italic{font-style:italic}", a = class {
|
|
7
|
+
constructor(t) {
|
|
8
|
+
i(this, t), this.align = "start", this.as = "p", this.color = "default", this.fontStyle = "normal", this.size = "base", this.weight = "normal";
|
|
9
|
+
}
|
|
10
|
+
render() {
|
|
11
|
+
const t = this.as, s = l("text", `text--align-${this.align}`, `text--color-${this.color}`, `text--font-style-${this.fontStyle}`, `text--size-${this.size}`, `text--weight-${this.weight}`);
|
|
12
|
+
return e(o, null, e(t, { class: s }, e("slot", null)));
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
a.style = n;
|
|
16
|
+
export {
|
|
17
|
+
a as flip_text
|
|
18
|
+
};
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { r as t, h as a, H as s } from "./
|
|
2
|
-
import { c as l } from "./index-
|
|
1
|
+
import { r as t, h as a, H as s } from "./index.b6e7bb76.js";
|
|
2
|
+
import { c as l } from "./index-6d2e18c6.289636d4.js";
|
|
3
3
|
import "react";
|
|
4
4
|
import "react-dom";
|
|
5
|
+
import "./_commonjsHelpers-44457d8d.ba94af77.js";
|
|
5
6
|
const m = ":host{display:inline-flex}:host *{box-sizing:border-box}.thumbnail{position:relative;display:inline-flex;overflow:hidden;border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.03125rem rgba(0, 0, 0, 0.1)}.thumbnail--size-s{--flip-thumbnail-size:2.5rem}.thumbnail--size-m{--flip-thumbnail-size:3rem}.thumbnail--size-l{--flip-thumbnail-size:4rem}.thumbnail--format-landscape{width:var(--flip-thumbnail-size);aspect-ratio:4 / 3}.thumbnail--format-landscape .thumbnail__image{width:100%}.thumbnail--format-portrait{height:var(--flip-thumbnail-size);aspect-ratio:3 / 4}.thumbnail--format-portrait .thumbnail__image{height:100%}.thumbnail--format-square{width:var(--flip-thumbnail-size);height:var(--flip-thumbnail-size)}.thumbnail--format-square .thumbnail__image{width:100%}.thumbnail__image{position:absolute;top:50%;left:50%;transform:translate3d(-50%, -50%, 0)}", r = class {
|
|
6
7
|
constructor(i) {
|
|
7
8
|
t(this, i), this.format = "landscape", this.size = "m";
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { r as i, c as a, h as t, H as e } from "./
|
|
2
|
-
import { c as o } from "./index-
|
|
1
|
+
import { r as i, c as a, h as t, H as e } from "./index.b6e7bb76.js";
|
|
2
|
+
import { c as o } from "./index-6d2e18c6.289636d4.js";
|
|
3
3
|
import "react";
|
|
4
4
|
import "react-dom";
|
|
5
|
+
import "./_commonjsHelpers-44457d8d.ba94af77.js";
|
|
5
6
|
const n = ":host{display:flex}:host *{box-sizing:border-box}.toast{display:flex;width:100%;max-width:28rem;padding:var(--s-space-16);border-radius:0.75rem;color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default)}.toast--intent-critical{background-color:var(--s-surface-critical-default)}.toast--intent-success{background-color:var(--s-surface-success-default)}.toast__icon{display:inline-flex;margin-top:calc(-1 * var(--s-space-2));margin-right:0.625rem;flex-shrink:0}.toast__icon ::part(icon){color:var(--s-icon-on-status)}.toast__content{flex-grow:1;line-height:var(--s-line-height-base);text-align:left}.toast__dismiss-button{display:inline-flex;min-width:1.5rem;height:1.5rem;margin-top:calc(-1 * var(--s-space-2));margin-left:var(--s-space-16);padding:0;flex-shrink:0;justify-content:center;align-items:center;border:none;color:var(--s-text-on-status);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-semibold);cursor:pointer}.toast__dismiss-button ::part(icon){color:var(--s-icon-on-status)}", r = class {
|
|
6
7
|
constructor(s) {
|
|
7
8
|
i(this, s), this.dismiss = a(this, "dismiss", 7), this.accessibleDismissLabel = "Dismiss", this.intent = "default", this.onDismiss = () => {
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import { r as t, h as n, H as a } from "./index.b6e7bb76.js";
|
|
2
|
+
import "react";
|
|
3
|
+
import "react-dom";
|
|
4
|
+
const e = `:host {
|
|
5
|
+
display: flex;
|
|
6
|
+
width: 100%;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
:host * {
|
|
10
|
+
box-sizing: border-box;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.video-thumbnail {
|
|
14
|
+
position: relative;
|
|
15
|
+
display: inline-flex;
|
|
16
|
+
width: 100%;
|
|
17
|
+
margin: 0;
|
|
18
|
+
padding: 0;
|
|
19
|
+
border: none;
|
|
20
|
+
background-color: transparent;
|
|
21
|
+
cursor: pointer;
|
|
22
|
+
container-type: inline-size;
|
|
23
|
+
container-name: video-thumbnail;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.video-thumbnail:after {
|
|
27
|
+
position: absolute;
|
|
28
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
29
|
+
content: "";
|
|
30
|
+
inset: 0;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.video-thumbnail:focus {
|
|
34
|
+
outline-color: var(--s-focus-default);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.video-thumbnail__image {
|
|
38
|
+
width: 100%;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.video-thumbnail__duration {
|
|
42
|
+
position: absolute;
|
|
43
|
+
bottom: var(--s-space-8);
|
|
44
|
+
left: var(--s-space-8);
|
|
45
|
+
padding: var(--s-space-2) var(--s-space-8);
|
|
46
|
+
border-radius: var(--s-border-radius-sm);
|
|
47
|
+
color: var(--s-text-on-image);
|
|
48
|
+
background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
|
|
49
|
+
rgba(255, 255, 255, 0.1);
|
|
50
|
+
font-size: var(--s-font-size-sm);
|
|
51
|
+
font-weight: var(--s-font-weight-medium);
|
|
52
|
+
line-height: var(--s-line-height-sm);
|
|
53
|
+
letter-spacing: var(--s-letter-spacing-tighter);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.video-thumbnail__play-icon {
|
|
57
|
+
position: absolute;
|
|
58
|
+
z-index: 1;
|
|
59
|
+
top: 50%;
|
|
60
|
+
left: 50%;
|
|
61
|
+
width: 2.5rem;
|
|
62
|
+
height: 2.5rem;
|
|
63
|
+
transform: translate3d(-50%, -50%, 0);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
@container video-thumbnail (min-width: 448px) {
|
|
67
|
+
.video-thumbnail__play-icon {
|
|
68
|
+
width: 3.5rem;
|
|
69
|
+
height: 4.5rem;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
`, o = class {
|
|
73
|
+
constructor(i) {
|
|
74
|
+
t(this, i), this.durationLabel = "Duration";
|
|
75
|
+
}
|
|
76
|
+
render() {
|
|
77
|
+
return n(a, null, n("button", { "aria-describedby": this.duration !== void 0 ? "duration" : void 0, "aria-label": this.label, class: "video-thumbnail", type: "button" }, n("img", { alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && n("span", { class: "video-thumbnail__duration", id: "duration" }, n("flip-visually-hidden", null, this.durationLabel), this.duration), n("svg", { class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, n("path", { d: "M15 14.65V25.35C15 26.1167 15.35 26.7 16.05 27.1C16.75 27.5 17.4333 27.4667 18.1 27L26.4 21.7C27.0333 21.3 27.35 20.7333 27.35 20C27.35 19.2667 27.0333 18.7 26.4 18.3L18.1 13C17.4333 12.5333 16.75 12.5 16.05 12.9C15.35 13.3 15 13.8833 15 14.65ZM20 40C17.2333 40 14.6333 39.4747 12.2 38.424C9.76667 37.3747 7.65 35.95 5.85 34.15C4.05 32.35 2.62533 30.2333 1.576 27.8C0.525334 25.3667 0 22.7667 0 20C0 17.2333 0.525334 14.6333 1.576 12.2C2.62533 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.62467 12.2 1.574C14.6333 0.524667 17.2333 0 20 0C22.7667 0 25.3667 0.524667 27.8 1.574C30.2333 2.62467 32.35 4.05 34.15 5.85C35.95 7.65 37.3747 9.76667 38.424 12.2C39.4747 14.6333 40 17.2333 40 20C40 22.7667 39.4747 25.3667 38.424 27.8C37.3747 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3747 27.8 38.424C25.3667 39.4747 22.7667 40 20 40Z", fill: "white", "fill-opacity": "0.95" }))));
|
|
78
|
+
}
|
|
79
|
+
};
|
|
80
|
+
o.style = e;
|
|
81
|
+
export {
|
|
82
|
+
o as flip_video_thumbnail
|
|
83
|
+
};
|
package/dist/{flip-visually-hidden.entry.70e706df.js → flip-visually-hidden.entry.47d25a46.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r, h as i, H as l } from "./
|
|
1
|
+
import { r, h as i, H as l } from "./index.b6e7bb76.js";
|
|
2
2
|
import "react";
|
|
3
3
|
import "react-dom";
|
|
4
4
|
const t = ":host{position:absolute;display:inline;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;word-wrap:normal;clip:rect(0, 0, 0, 0)}", o = class {
|