@getflip/swirl-components-react 0.2.1 → 0.3.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/{flip-action-list-item.entry.8a7c3ed5.js → flip-action-list-item.entry.bfe816d0.js} +2 -2
- package/dist/{flip-action-list-section.entry.da0cdb9e.js → flip-action-list-section.entry.8072859c.js} +1 -1
- package/dist/{flip-action-list.entry.b8a1ea41.js → flip-action-list.entry.07c4e8cb.js} +1 -1
- package/dist/{flip-avatar-group.entry.b0e66358.js → flip-avatar-group.entry.f987aa8b.js} +18 -9
- package/dist/{flip-avatar.entry.6a8f2e19.js → flip-avatar.entry.7be29e5c.js} +19 -10
- package/dist/{flip-badge.entry.a6d07965.js → flip-badge.entry.bb0eb78d.js} +1 -1
- package/dist/{flip-banner.entry.f53786a0.js → flip-banner.entry.50b72a3f.js} +1 -1
- package/dist/flip-button-group.entry.9261c585.js +20 -0
- package/dist/flip-button.entry.98440a9e.js +35 -0
- package/dist/{flip-checkbox.entry.ade04b9c.js → flip-checkbox.entry.56d1e132.js} +2 -2
- package/dist/{flip-chip.entry.42861041.js → flip-chip.entry.e2be5143.js} +1 -1
- package/dist/{flip-date-input.entry.adafe713.js → flip-date-input.entry.2d5088ea.js} +1 -1
- package/dist/{flip-date-picker_3.entry.4a72cca9.js → flip-date-picker_3.entry.d61d1842.js} +82 -77
- package/dist/{flip-description-list-item.entry.0844c111.js → flip-description-list-item.entry.ebdd7136.js} +1 -1
- package/dist/{flip-description-list.entry.cdb5ba16.js → flip-description-list.entry.48a4d48b.js} +1 -1
- package/dist/{flip-dialog.entry.cdfca16a.js → flip-dialog.entry.bec58ff3.js} +2 -2
- package/dist/{flip-empty-state.entry.77f9c8ed.js → flip-empty-state.entry.d125feea.js} +1 -1
- package/dist/{flip-file-uploader.entry.43c0b766.js → flip-file-uploader.entry.d8919920.js} +2 -2
- package/dist/{flip-file-viewer-audio_6.entry.c9978e1a.js → flip-file-viewer-audio_6.entry.6ac11dbe.js} +697 -697
- package/dist/{flip-file-viewer.entry.85af31ff.js → flip-file-viewer.entry.66629b65.js} +3 -3
- package/dist/{flip-form-control.entry.ec90cfb9.js → flip-form-control.entry.c45d4428.js} +1 -1
- package/dist/{flip-form-group.entry.6256d521.js → flip-form-group.entry.52e6ee89.js} +4 -4
- package/dist/{flip-heading.entry.472e3005.js → flip-heading.entry.b20bb368.js} +1 -1
- package/dist/{flip-icon-add-photo.entry.d8ca058c.js → flip-icon-add-photo.entry.897fe115.js} +1 -1
- package/dist/{flip-icon-add.entry.79a8d7e6.js → flip-icon-add.entry.a04d115d.js} +1 -1
- package/dist/{flip-icon-admin-panel-settings.entry.abfc03bf.js → flip-icon-admin-panel-settings.entry.d1c445fd.js} +1 -1
- package/dist/{flip-icon-arrow-back.entry.eff9e6a3.js → flip-icon-arrow-back.entry.e054a0e8.js} +1 -1
- package/dist/{flip-icon-arrow-forward.entry.b0017297.js → flip-icon-arrow-forward.entry.ceea49fe.js} +1 -1
- package/dist/flip-icon-arrow-left_3.entry.ec0b28c1.js +35 -0
- package/dist/{flip-icon-arrow-right-small.entry.dd9ec828.js → flip-icon-arrow-right-small.entry.88470f4b.js} +1 -1
- package/dist/{flip-icon-attachment.entry.d41db045.js → flip-icon-attachment.entry.c141c860.js} +1 -1
- package/dist/{flip-icon-cancel.entry.c5b57f7f.js → flip-icon-cancel.entry.07a0efa7.js} +1 -1
- package/dist/{flip-icon-chat-bubble.entry.32859e94.js → flip-icon-chat-bubble.entry.13a6899b.js} +1 -1
- package/dist/{flip-icon-check-circle.entry.cf0be0f3.js → flip-icon-check-circle.entry.4c134688.js} +1 -1
- package/dist/{flip-icon-check-small.entry.c28df931.js → flip-icon-check-small.entry.1da0f061.js} +1 -1
- package/dist/{flip-icon-check-strong.entry.756abe1c.js → flip-icon-check-strong.entry.819065e2.js} +1 -1
- package/dist/{flip-icon-check.entry.71f246f6.js → flip-icon-check.entry.e9e18ec0.js} +1 -1
- package/dist/{flip-icon-chevron-left.entry.76299ff3.js → flip-icon-chevron-left.entry.8b4f8813.js} +1 -1
- package/dist/{flip-icon-chevron-right.entry.56cd2638.js → flip-icon-chevron-right.entry.d32eba9e.js} +1 -1
- package/dist/{flip-icon-close-small.entry.d5bce874.js → flip-icon-close-small.entry.e18fcac6.js} +1 -1
- package/dist/{flip-icon-close.entry.1c183b2c.js → flip-icon-close.entry.30a8abc3.js} +1 -1
- package/dist/{flip-icon-cloud-upload.entry.780eefd8.js → flip-icon-cloud-upload.entry.6412d35e.js} +1 -1
- package/dist/{flip-icon-comment.entry.9c85f2af.js → flip-icon-comment.entry.731b5907.js} +1 -1
- package/dist/{flip-icon-copy.entry.33ed327d.js → flip-icon-copy.entry.c29519f3.js} +1 -1
- package/dist/{flip-icon-date-range.entry.739ecf4e.js → flip-icon-date-range.entry.d6dea969.js} +1 -1
- package/dist/{flip-icon-delete.entry.f3cba347.js → flip-icon-delete.entry.e99d814a.js} +1 -1
- package/dist/{flip-icon-description.entry.d0f9e65c.js → flip-icon-description.entry.8448b398.js} +1 -1
- package/dist/{flip-icon-edit.entry.7b9f186f.js → flip-icon-edit.entry.3ae910b7.js} +1 -1
- package/dist/{flip-icon-emoji-mood.entry.e0b32fe1.js → flip-icon-emoji-mood.entry.89308bc3.js} +1 -1
- package/dist/{flip-icon-emoji-satisfied.entry.5ef82f25.js → flip-icon-emoji-satisfied.entry.5a9bca01.js} +1 -1
- package/dist/{flip-icon-error_3.entry.87fcf907.js → flip-icon-error_3.entry.f44ffe60.js} +1 -1
- package/dist/{flip-icon-expand-less_3.entry.8f8fb508.js → flip-icon-expand-less_3.entry.6e9d656c.js} +1 -1
- package/dist/{flip-icon-expand-more.entry.d2c9bf62.js → flip-icon-expand-more.entry.d0acac42.js} +1 -1
- package/dist/{flip-icon-file.entry.0d1868a4.js → flip-icon-file.entry.24508e1d.js} +1 -1
- package/dist/{flip-icon-folder-shared.entry.f1f4317b.js → flip-icon-folder-shared.entry.c829f971.js} +1 -1
- package/dist/{flip-icon-fullscreen-exit.entry.168a2e77.js → flip-icon-fullscreen-exit.entry.4f7369df.js} +1 -1
- package/dist/{flip-icon-fullscreen.entry.d78bc3a4.js → flip-icon-fullscreen.entry.fe6d6998.js} +1 -1
- package/dist/{flip-icon-group-assign.entry.2116431e.js → flip-icon-group-assign.entry.ba88a447.js} +1 -1
- package/dist/{flip-icon-groups-custom.entry.415539b5.js → flip-icon-groups-custom.entry.eeaaa045.js} +1 -1
- package/dist/{flip-icon-groups.entry.25ce8212.js → flip-icon-groups.entry.fb62ee22.js} +1 -1
- package/dist/{flip-icon-image.entry.ce484f72.js → flip-icon-image.entry.75eebbb0.js} +1 -1
- package/dist/{flip-icon-info.entry.3f6c72bb.js → flip-icon-info.entry.e30b9669.js} +1 -1
- package/dist/{flip-icon-inventory.entry.fc8b1c79.js → flip-icon-inventory.entry.39ebc534.js} +1 -1
- package/dist/{flip-icon-like.entry.34ea69dc.js → flip-icon-like.entry.80e5f8b9.js} +1 -1
- package/dist/{flip-icon-link.entry.94b7dd90.js → flip-icon-link.entry.c99a2106.js} +1 -1
- package/dist/{flip-icon-lock.entry.3e9c3e72.js → flip-icon-lock.entry.5957290a.js} +1 -1
- package/dist/{flip-icon-logout.entry.57363229.js → flip-icon-logout.entry.c6240d44.js} +1 -1
- package/dist/{flip-icon-mail.entry.b37d0b32.js → flip-icon-mail.entry.65b32c8b.js} +1 -1
- package/dist/{flip-icon-manage-accounts.entry.fb4e9a6b.js → flip-icon-manage-accounts.entry.73cd3a27.js} +1 -1
- package/dist/{flip-icon-mention.entry.2bfbfa63.js → flip-icon-mention.entry.088e8573.js} +1 -1
- package/dist/{flip-icon-message.entry.2df9486d.js → flip-icon-message.entry.e7306c78.js} +1 -1
- package/dist/{flip-icon-more-horizontal.entry.7f45f170.js → flip-icon-more-horizontal.entry.9b6c4ab4.js} +1 -1
- package/dist/{flip-icon-more-vertikal.entry.8045a647.js → flip-icon-more-vertikal.entry.43a77373.js} +1 -1
- package/dist/{flip-icon-notifications-active.entry.f03b2fc4.js → flip-icon-notifications-active.entry.b48ff150.js} +1 -1
- package/dist/{flip-icon-notifications-off.entry.dd8c68fd.js → flip-icon-notifications-off.entry.b60ef6aa.js} +1 -1
- package/dist/{flip-icon-notifications.entry.edc9821c.js → flip-icon-notifications.entry.e2d0f244.js} +1 -1
- package/dist/{flip-icon-open-in-new.entry.ff63ea33.js → flip-icon-open-in-new.entry.bdcb5f7e.js} +1 -1
- package/dist/{flip-icon-people-alt.entry.aad60933.js → flip-icon-people-alt.entry.4c0917f0.js} +1 -1
- package/dist/{flip-icon-person-off.entry.59a3c96c.js → flip-icon-person-off.entry.4dba1b98.js} +1 -1
- package/dist/{flip-icon-person.entry.e69d335c.js → flip-icon-person.entry.57042a58.js} +1 -1
- package/dist/{flip-icon-phone.entry.d3656af0.js → flip-icon-phone.entry.3ad46317.js} +1 -1
- package/dist/{flip-icon-poll.entry.16e1615e.js → flip-icon-poll.entry.c14b718c.js} +1 -1
- package/dist/{flip-icon-print.entry.16e54d5b.js → flip-icon-print.entry.42bc6751.js} +1 -1
- package/dist/{flip-icon-recieved.entry.7a850323.js → flip-icon-recieved.entry.35cc64fd.js} +1 -1
- package/dist/{flip-icon-remove.entry.88fa105e.js → flip-icon-remove.entry.7ce5335b.js} +1 -1
- package/dist/{flip-icon-search-strong.entry.fd001082.js → flip-icon-search-strong.entry.d6722aba.js} +1 -1
- package/dist/{flip-icon-search.entry.2efaf023.js → flip-icon-search.entry.c2c88135.js} +1 -1
- package/dist/{flip-icon-send.entry.6a4cd99f.js → flip-icon-send.entry.6d3ed0a4.js} +1 -1
- package/dist/{flip-icon-settings.entry.44aec164.js → flip-icon-settings.entry.3ab04c76.js} +1 -1
- package/dist/{flip-icon-time-filled.entry.bced668e.js → flip-icon-time-filled.entry.050c61d7.js} +1 -1
- package/dist/{flip-icon-time-outlined.entry.36bb857d.js → flip-icon-time-outlined.entry.195df6e9.js} +1 -1
- package/dist/{flip-icon-user-assign.entry.f55379f5.js → flip-icon-user-assign.entry.60316828.js} +1 -1
- package/dist/{flip-icon-video-camera.entry.23798820.js → flip-icon-video-camera.entry.d376e2da.js} +1 -1
- package/dist/{flip-icon-warning.entry.ac7a7e4c.js → flip-icon-warning.entry.7484d16e.js} +1 -1
- package/dist/flip-lightbox.entry.cdffd089.js +110 -0
- package/dist/{flip-link.entry.31692150.js → flip-link.entry.145e89bf.js} +1 -1
- package/dist/{flip-list.entry.1eac3a62.js → flip-list.entry.fcece197.js} +1 -1
- package/dist/flip-modal.entry.f20fd032.js +63 -0
- package/dist/{flip-option-list-item.entry.f911c3b8.js → flip-option-list-item.entry.ed931c3c.js} +1 -1
- package/dist/{flip-option-list-section.entry.0f67d7d7.js → flip-option-list-section.entry.c0084261.js} +1 -1
- package/dist/{flip-option-list.entry.32d7928a.js → flip-option-list.entry.a07fd2d3.js} +1 -1
- package/dist/{flip-pagination.entry.278034c1.js → flip-pagination.entry.a8a4c1bf.js} +1 -1
- package/dist/{flip-progress-indicator.entry.99e10b2c.js → flip-progress-indicator.entry.8069914b.js} +1 -1
- package/dist/{flip-radio-group.entry.7cc7a065.js → flip-radio-group.entry.4046ee83.js} +2 -2
- package/dist/{flip-radio.entry.eacccab0.js → flip-radio.entry.941e407b.js} +2 -2
- package/dist/{flip-resource-list-file-item.entry.4fd698ae.js → flip-resource-list-file-item.entry.678596e2.js} +1 -1
- package/dist/{flip-resource-list-item.entry.d9efc26d.js → flip-resource-list-item.entry.3ba2f6c5.js} +1 -1
- package/dist/{flip-resource-list.entry.dca2afcd.js → flip-resource-list.entry.b5f4d108.js} +1 -1
- package/dist/{flip-search.entry.7a786fe8.js → flip-search.entry.05617d72.js} +1 -1
- package/dist/{flip-stack.entry.a2afebf5.js → flip-stack.entry.60b7e7d8.js} +1 -1
- package/dist/{flip-switch.entry.9e81c9b0.js → flip-switch.entry.51a1856d.js} +1 -1
- package/dist/{flip-tab.entry.b64631a4.js → flip-tab.entry.fd12f894.js} +1 -1
- package/dist/flip-tabs.entry.9462dbaa.js +67 -0
- package/dist/{flip-tag.entry.c888703b.js → flip-tag.entry.923d754e.js} +1 -1
- package/dist/{flip-text-input.entry.8deff49d.js → flip-text-input.entry.09a6024a.js} +4 -4
- package/dist/{flip-text.entry.4bcd3eae.js → flip-text.entry.634f95b3.js} +1 -1
- package/dist/{flip-theme-provider.entry.1b167993.js → flip-theme-provider.entry.ab641668.js} +1 -1
- package/dist/{flip-thumbnail.entry.5f2effe1.js → flip-thumbnail.entry.9d00d2f8.js} +1 -1
- package/dist/{flip-toast-provider.entry.870ddb2c.js → flip-toast-provider.entry.d0391c9a.js} +1 -1
- package/dist/{flip-toast.entry.f8bc132d.js → flip-toast.entry.fac8df58.js} +4 -4
- package/dist/{flip-tooltip.entry.e4e0b3a6.js → flip-tooltip.entry.f7d80b92.js} +1 -1
- package/dist/{flip-video-thumbnail.entry.855576fe.js → flip-video-thumbnail.entry.f45c61bc.js} +1 -1
- package/dist/{flip-visually-hidden.entry.8d93e0bb.js → flip-visually-hidden.entry.1099adf3.js} +1 -1
- package/dist/{index.b70d4c92.js → index.0ccdd659.js} +231 -230
- package/dist/stencil-generated/index.d.ts +1 -0
- package/dist/swirl-components-react.js +44 -43
- package/dist/swirl-components-react.umd.cjs +31 -29
- package/package.json +2 -2
- package/dist/flip-button-group.entry.0342e82d.js +0 -15
- package/dist/flip-button.entry.b752e108.js +0 -33
- package/dist/flip-icon-arrow-left.entry.234146e1.js +0 -15
- package/dist/flip-icon-arrow-right.entry.d4a36d98.js +0 -15
- package/dist/flip-icon-download.entry.9adb287e.js +0 -15
- package/dist/flip-modal.entry.5df13219.js +0 -61
- package/dist/flip-tabs.entry.a42a1989.js +0 -92
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
import { r as n, h as e, H as a, g as r } from "./index.0ccdd659.js";
|
|
2
|
+
import { A as d } from "./a11y-dialog.esm-d7a94c8c.bd6ae411.js";
|
|
3
|
+
import { d as h, e as c } from "./bodyScrollLock.esm-ce6356d8.2c600fb9.js";
|
|
4
|
+
import { c as g } from "./index-6d2e18c6.289636d4.js";
|
|
5
|
+
import { q as b } from "./utils-b46bcd4f.79126bb2.js";
|
|
6
|
+
import "react";
|
|
7
|
+
import "react-dom";
|
|
8
|
+
import "./_commonjsHelpers-44457d8d.ba94af77.js";
|
|
9
|
+
const u = ':host{display:block}:host *{box-sizing:border-box}.lightbox{position:fixed;z-index:var(--s-z-40);background-color:rgba(0, 0, 0, 1);inset:0}.lightbox[aria-hidden="true"]{display:none}@media (min-width: 768px){.lightbox{background-color:rgba(0, 0, 0, 0.6)}}.lightbox:not(.lightbox--closing) .lightbox__body{-webkit-animation:0.15s lightbox-fade-in;animation:0.15s lightbox-fade-in}@media (prefers-reduced-motion){.lightbox:not(.lightbox--closing) .lightbox__body{-webkit-animation:none;animation:none}}.lightbox--closing{-webkit-animation:0.15s lightbox-fade-out;animation:0.15s lightbox-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.lightbox--closing{-webkit-animation:none;animation:none}}.lightbox__body{position:relative;width:100%;height:100%}.lightbox__header{position:absolute;z-index:1;top:0;right:0;left:0;display:flex;padding:var(--s-space-12) var(--s-space-16);justify-content:space-between;align-items:flex-start;pointer-events:none}.lightbox__controls{position:absolute;z-index:1;top:50%;right:0;left:0;display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:space-between;align-items:flex-start;pointer-events:none}@media (min-width: 768px){.lightbox__controls{display:flex}}.lightbox__close-button,.lightbox__download-button,.lightbox__previous-slide-button,.lightbox__next-slide-button{display:inline-flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);cursor:pointer;transition:opacity 0.15s;pointer-events:auto}.lightbox__close-button:disabled,.lightbox__download-button:disabled,.lightbox__previous-slide-button:disabled,.lightbox__next-slide-button:disabled{pointer-events:none;opacity:0}.lightbox__content{overflow:hidden;width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.lightbox__slides{display:flex;width:100%;height:100%}.lightbox__slides ::slotted(*){flex-basis:100%;flex-shrink:0;transition:transform 0.3s}@media (min-width: 768px){.lightbox__slides ::slotted(*){padding:4rem 5rem}}@media (prefers-reduced-motion){.lightbox__slides ::slotted(*){transition:none}}.lightbox__pagination{position:absolute;bottom:var(--s-space-32);left:50%;padding:var(--s-space-4) var(--s-space-12);border-radius:var(--s-border-radius-base);color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.6);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);transform:translateX(-50%);pointer-events:none}@media (min-width: 768px){.lightbox__pagination{display:none}}@-webkit-keyframes lightbox-fade-in{from{opacity:0}to{opacity:1}}@keyframes lightbox-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes lightbox-fade-out{from{opacity:1}to{opacity:0}}@keyframes lightbox-fade-out{from{opacity:1}to{opacity:0}}', p = class {
|
|
10
|
+
constructor(i) {
|
|
11
|
+
n(this, i), this.closeButtonLabel = "Close modal", this.downloadButtonLabel = "Download active slide content", this.nextSlideButtonLabel = "Next slide", this.previousSlideButtonLabel = "Previous slide", this.activeSlideIndex = 0, this.closing = !1, this.dragging = !1, this.mediaPlayers = [], this.onCloseButtonClick = () => {
|
|
12
|
+
this.close();
|
|
13
|
+
}, this.onDownloadButtonClick = () => {
|
|
14
|
+
var t;
|
|
15
|
+
(t = this.slides[this.activeSlideIndex]) === null || t === void 0 || t.download();
|
|
16
|
+
}, this.onKeyDown = (t) => {
|
|
17
|
+
t.code === "Escape" ? this.close() : t.code === "ArrowLeft" ? this.onPreviousSlideClick() : t.code === "ArrowRight" && this.onNextSlideClick();
|
|
18
|
+
}, this.onNextSlideClick = () => {
|
|
19
|
+
this.activateSlide(Math.min(this.slides.length - 1, this.activeSlideIndex + 1));
|
|
20
|
+
}, this.onPreviousSlideClick = () => {
|
|
21
|
+
this.activateSlide(Math.max(0, this.activeSlideIndex - 1));
|
|
22
|
+
}, this.registerSlides = () => {
|
|
23
|
+
this.slides = Array.from(this.el.children), this.setSlideAttributes(), this.updateMediaPlayers();
|
|
24
|
+
}, this.onPointerDown = (t) => {
|
|
25
|
+
t.preventDefault(), this.dragging = !0, this.dragStartPosition = t instanceof MouseEvent ? t.clientX : t.touches[0].clientX, this.slides.forEach((o) => {
|
|
26
|
+
o.style.transition = "none";
|
|
27
|
+
});
|
|
28
|
+
}, this.onPointerMove = (t) => {
|
|
29
|
+
if (this.dragging) {
|
|
30
|
+
t.preventDefault();
|
|
31
|
+
const o = t instanceof MouseEvent ? t.clientX - this.dragStartPosition : t.touches[0].clientX - this.dragStartPosition;
|
|
32
|
+
this.slides.forEach((s) => {
|
|
33
|
+
const l = this.activeSlideIndex * s.getBoundingClientRect().width;
|
|
34
|
+
this.dragDelta = o, s.style.transform = `translate3d(${(-l + this.dragDelta) / 16}rem, 0, 0)`;
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
}, this.onPointerUp = () => {
|
|
38
|
+
this.dragging = !1, this.dragStartPosition = void 0;
|
|
39
|
+
const t = this.dragDelta / this.slides[this.activeSlideIndex].getBoundingClientRect().width;
|
|
40
|
+
this.dragDelta = 0;
|
|
41
|
+
const o = t > 0.2, s = t < -0.2;
|
|
42
|
+
this.slides.forEach((l) => {
|
|
43
|
+
l.style.transition = "";
|
|
44
|
+
}), o ? this.onPreviousSlideClick() : s ? this.onNextSlideClick() : this.resetSlidePositions();
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
componentWillLoad() {
|
|
48
|
+
this.registerSlides();
|
|
49
|
+
}
|
|
50
|
+
componentDidLoad() {
|
|
51
|
+
this.modal = new d(this.modalEl), this.activateSlide(0);
|
|
52
|
+
}
|
|
53
|
+
disconnectedCallback() {
|
|
54
|
+
var i;
|
|
55
|
+
(i = this.modal) === null || i === void 0 || i.destroy(), this.unlockBodyScroll();
|
|
56
|
+
}
|
|
57
|
+
async open() {
|
|
58
|
+
this.modal.show(), this.lockBodyScroll();
|
|
59
|
+
}
|
|
60
|
+
async close() {
|
|
61
|
+
this.closing || (this.closing = !0, this.unlockBodyScroll(), setTimeout(() => {
|
|
62
|
+
this.modal.hide(), this.closing = !1;
|
|
63
|
+
}, 150));
|
|
64
|
+
}
|
|
65
|
+
async activateSlide(i) {
|
|
66
|
+
this.dragging = !1, this.activeSlideIndex = i, this.slides.forEach((t, o) => {
|
|
67
|
+
o === this.activeSlideIndex ? (t.removeAttribute("aria-hidden"), t.setAttribute("active", "true")) : o === this.activeSlideIndex - 1 || o === this.activeSlideIndex + 1 ? (t.setAttribute("aria-hidden", "true"), t.setAttribute("active", "true")) : t.setAttribute("aria-hidden", "true"), t.style.transform = `translate3d(-${100 * this.activeSlideIndex}%, 0, 0)`;
|
|
68
|
+
}), setTimeout(() => {
|
|
69
|
+
this.slides.forEach((t, o) => {
|
|
70
|
+
o !== this.activeSlideIndex && o !== this.activeSlideIndex - 1 && o !== this.activeSlideIndex + 1 && t.setAttribute("active", "false");
|
|
71
|
+
});
|
|
72
|
+
}, 300), this.stopAllMediaPlayers(), this.updateMediaPlayers();
|
|
73
|
+
}
|
|
74
|
+
setSlideAttributes() {
|
|
75
|
+
this.slides.forEach((i) => {
|
|
76
|
+
i.setAttribute("active", "false"), i.setAttribute("aria-label", i.file), i.setAttribute("aria-roledescription", "slide"), i.setAttribute("role", "group");
|
|
77
|
+
});
|
|
78
|
+
}
|
|
79
|
+
resetSlidePositions() {
|
|
80
|
+
this.slides.forEach((i) => {
|
|
81
|
+
i.style.transform = `translate3d(-${100 * this.activeSlideIndex}%, 0, 0)`;
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
lockBodyScroll() {
|
|
85
|
+
h(this.el);
|
|
86
|
+
}
|
|
87
|
+
unlockBodyScroll() {
|
|
88
|
+
c(this.el);
|
|
89
|
+
}
|
|
90
|
+
updateMediaPlayers() {
|
|
91
|
+
const i = b(this.el, "video");
|
|
92
|
+
this.mediaPlayers = i;
|
|
93
|
+
}
|
|
94
|
+
stopAllMediaPlayers() {
|
|
95
|
+
this.mediaPlayers.forEach((i) => i.pause());
|
|
96
|
+
}
|
|
97
|
+
render() {
|
|
98
|
+
const i = this.slides.length > 1, t = g("lightbox", {
|
|
99
|
+
"lightbox--closing": this.closing
|
|
100
|
+
});
|
|
101
|
+
return e(a, null, e("section", { "aria-hidden": "true", "aria-label": this.label, class: t, id: "lightbox", onMouseDown: this.onPointerDown, onMouseMove: this.onPointerMove, onMouseOut: this.onPointerUp, onMouseUp: this.onPointerUp, onKeyDown: this.onKeyDown, onTouchEnd: this.onPointerUp, onTouchMove: this.onPointerMove, onTouchStart: this.onPointerDown, ref: (o) => this.modalEl = o }, e("div", { class: "lightbox__body", role: "document" }, e("header", { class: "lightbox__header" }, e("button", { "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, e("flip-icon-close", null)), e("button", { "aria-label": this.downloadButtonLabel, class: "lightbox__download-button", onClick: this.onDownloadButtonClick }, e("flip-icon-download", null))), e("div", { "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, e("div", { "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides" }, e("slot", { onSlotchange: this.registerSlides }))), e("div", { class: "lightbox__controls" }, e("button", { "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, e("flip-icon-arrow-left", null)), e("button", { "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick }, e("flip-icon-arrow-right", null))), i && e("span", { class: "lightbox__pagination" }, e("span", { "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))));
|
|
102
|
+
}
|
|
103
|
+
get el() {
|
|
104
|
+
return r(this);
|
|
105
|
+
}
|
|
106
|
+
};
|
|
107
|
+
p.style = u;
|
|
108
|
+
export {
|
|
109
|
+
p as flip_lightbox
|
|
110
|
+
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as i, h as r, H as t } from "./index.
|
|
1
|
+
import { r as i, h as r, H as t } from "./index.0ccdd659.js";
|
|
2
2
|
import "react";
|
|
3
3
|
import "react-dom";
|
|
4
4
|
const s = ":host{display:inline-flex}:host *{box-sizing:border-box}.link{color:var(--s-interactive-primary-default);line-height:var(--s-line-height-base);text-underline-offset:var(--s-space-4)}.link:hover{color:var(--s-interactive-primary-hovered)}.link:active{color:var(--s-interactive-primary-pressed)}", a = class {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as e, h as l, H as n } from "./index.
|
|
1
|
+
import { r as e, h as l, H as n } from "./index.0ccdd659.js";
|
|
2
2
|
import "react";
|
|
3
3
|
import "react-dom";
|
|
4
4
|
const r = ':host{display:block}:host *{box-sizing:border-box}.flip-list{line-height:var(--s-line-height-base)}.flip-list ul,.flip-list ol{margin:0;padding:0;list-style-position:outside;list-style-type:none}.flip-list ul li{padding-left:1.5rem}.flip-list ul li:before{display:inline-block;width:1.5rem;margin-left:-1.5rem;text-align:center;content:"\u2022"}.flip-list ol{counter-reset:item}.flip-list ol ol{counter-reset:letter}.flip-list ol ol li:before{content:counter(letter, lower-alpha) ".";counter-increment:letter}.flip-list ol li{padding-left:1.5rem}.flip-list ol li:before{display:inline-block;min-width:1.5rem;font-variant-numeric:tabular-nums;margin-left:-1.5rem;padding-right:var(--s-space-8);text-align:right;content:counter(item) ".";counter-increment:item}', s = class {
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { r as h, c as m, h as a, H as p } from "./index.0ccdd659.js";
|
|
2
|
+
import { A as f } from "./a11y-dialog.esm-d7a94c8c.bd6ae411.js";
|
|
3
|
+
import { d as b, e as v } from "./bodyScrollLock.esm-ce6356d8.2c600fb9.js";
|
|
4
|
+
import { c as u } from "./index-6d2e18c6.289636d4.js";
|
|
5
|
+
import "react";
|
|
6
|
+
import "react-dom";
|
|
7
|
+
import "./_commonjsHelpers-44457d8d.ba94af77.js";
|
|
8
|
+
const g = ':host{--flip-ghost-button-background-default:var(--s-surface-overlay-default);--flip-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--flip-ghost-button-background-pressed:var(--s-surface-overlay-pressed);display:block}:host *{box-sizing:border-box}.modal{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;inset:0}.modal[aria-hidden="true"]{display:none}.modal:not(.modal--closing) .modal__backdrop{-webkit-animation:0.15s modal-backdrop-fade-in;animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal:not(.modal--closing) .modal__backdrop{-webkit-animation:none;animation:none}}.modal:not(.modal--closing) .modal__body{-webkit-animation:0.15s modal-scale-in;animation:0.15s modal-scale-in}@media (prefers-reduced-motion){.modal:not(.modal--closing) .modal__body{-webkit-animation:none;animation:none}}.modal--closing{-webkit-animation:0.15s modal-fade-out;animation:0.15s modal-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--closing{-webkit-animation:none;animation:none}}@media (min-width: 768px){.modal--scrollable .modal__content{padding-bottom:0}}.modal--scrollable:not(.modal--scrolled-down) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal--scrolled .modal__header{border-bottom:var(--s-border-width-default) solid var(--s-border-default)}}.modal__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.modal__body{position:relative;z-index:var(--s-z-40);display:flex;width:100vw;height:100vh;background-color:var(--s-surface-overlay-default);flex-direction:column}@media (min-width: 768px){.modal__body{width:90vw;max-width:33.75rem;height:auto;max-height:90vh;border-radius:var(--s-border-radius-base);box-shadow:0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.14)}}.modal__close-button{position:absolute;top:var(--s-space-8);left:var(--s-space-8)}@media (min-width: 768px){.modal__close-button{top:var(--s-space-16);right:var(--s-space-16);left:auto}}.modal__header{display:flex;height:3.5rem;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-8) + 2.5rem + var(--s-space-8));flex-shrink:0;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);gap:var(--s-space-16)}@media (min-width: 768px){.modal__header{height:4.125rem;padding-top:var(--s-space-24);padding-right:calc(var(--s-space-16) + 2.5rem + var(--s-space-8));padding-bottom:var(--s-space-16);padding-left:var(--s-space-24);border-bottom:none}}.modal__heading{overflow:hidden}.modal__heading::part(heading){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.modal__content{overflow-x:hidden;overflow-y:auto;padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-24);padding-left:var(--s-space-16);flex-grow:1;line-height:var(--s-line-height-base)}.modal__content ::slotted(*){margin:0}@media (min-width: 768px){.modal__content{padding-top:0;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}}.modal__controls{display:flex;padding-top:var(--s-space-16);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24);flex-shrink:0;justify-content:flex-end}@-webkit-keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@-webkit-keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes modal-fade-out{from{opacity:1}to{opacity:0}}@keyframes modal-fade-out{from{opacity:1}to{opacity:0}}', y = class {
|
|
9
|
+
constructor(e) {
|
|
10
|
+
h(this, e), this.primaryAction = m(this, "primaryAction", 7), this.secondaryAction = m(this, "secondaryAction", 7), this.closeButtonLabel = "Close modal", this.closing = !1, this.scrollable = !1, this.scrolled = !1, this.scrolledDown = !1, this.onKeyDown = (o) => {
|
|
11
|
+
o.code === "Escape" && this.close();
|
|
12
|
+
}, this.onBackdropClick = () => {
|
|
13
|
+
this.close();
|
|
14
|
+
}, this.onCloseButtonClick = () => {
|
|
15
|
+
this.close();
|
|
16
|
+
}, this.onPrimaryAction = (o) => {
|
|
17
|
+
this.primaryAction.emit(o), this.close();
|
|
18
|
+
}, this.onSecondaryAction = (o) => {
|
|
19
|
+
this.secondaryAction.emit(o), this.close();
|
|
20
|
+
}, this.determineScrollStatus = () => {
|
|
21
|
+
var o, i, l, t, s, d;
|
|
22
|
+
const r = ((o = this.scrollContainer) === null || o === void 0 ? void 0 : o.scrollTop) > 0, n = Math.ceil(((i = this.scrollContainer) === null || i === void 0 ? void 0 : i.scrollTop) + ((l = this.scrollContainer) === null || l === void 0 ? void 0 : l.offsetHeight)) >= ((t = this.scrollContainer) === null || t === void 0 ? void 0 : t.scrollHeight), c = ((s = this.scrollContainer) === null || s === void 0 ? void 0 : s.scrollHeight) > ((d = this.scrollContainer) === null || d === void 0 ? void 0 : d.offsetHeight);
|
|
23
|
+
r !== this.scrolled && (this.scrolled = r), n !== this.scrolledDown && (this.scrolledDown = n), c !== this.scrollable && (this.scrollable = c);
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
componentDidLoad() {
|
|
27
|
+
this.modal = new f(this.modalEl), this.determineScrollStatus();
|
|
28
|
+
}
|
|
29
|
+
disconnectedCallback() {
|
|
30
|
+
var e;
|
|
31
|
+
(e = this.modal) === null || e === void 0 || e.destroy(), this.unlockBodyScroll();
|
|
32
|
+
}
|
|
33
|
+
onWindowResize() {
|
|
34
|
+
this.determineScrollStatus();
|
|
35
|
+
}
|
|
36
|
+
async open() {
|
|
37
|
+
this.modal.show(), this.lockBodyScroll(), this.determineScrollStatus();
|
|
38
|
+
}
|
|
39
|
+
async close() {
|
|
40
|
+
this.closing || (this.closing = !0, this.unlockBodyScroll(), setTimeout(() => {
|
|
41
|
+
this.modal.hide(), this.closing = !1;
|
|
42
|
+
}, 150));
|
|
43
|
+
}
|
|
44
|
+
lockBodyScroll() {
|
|
45
|
+
b(this.scrollContainer);
|
|
46
|
+
}
|
|
47
|
+
unlockBodyScroll() {
|
|
48
|
+
v(this.scrollContainer);
|
|
49
|
+
}
|
|
50
|
+
render() {
|
|
51
|
+
const e = u("modal", {
|
|
52
|
+
"modal--closing": this.closing,
|
|
53
|
+
"modal--scrollable": this.scrollable,
|
|
54
|
+
"modal--scrolled": this.scrolled,
|
|
55
|
+
"modal--scrolled-down": this.scrolledDown
|
|
56
|
+
});
|
|
57
|
+
return a(p, null, a("section", { "aria-hidden": "true", "aria-label": this.label, class: e, id: "modal", onKeyDown: this.onKeyDown, ref: (o) => this.modalEl = o }, a("div", { class: "modal__backdrop", onClick: this.onBackdropClick }), a("div", { class: "modal__body", role: "document" }, a("flip-button", { class: "modal__close-button", hideLabel: !0, icon: "<flip-icon-close></flip-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), a("header", { class: "modal__header" }, a("flip-heading", { as: "h2", class: "modal__heading", level: 3, text: this.label })), a("div", { class: "modal__content", onScroll: this.determineScrollStatus, ref: (o) => this.scrollContainer = o }, a("slot", null)), a("footer", { class: "modal__controls" }, a("flip-button-group", { wrap: !0 }, this.secondaryActionLabel && a("flip-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction }), this.primaryActionLabel && a("flip-button", { intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))));
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
y.style = g;
|
|
61
|
+
export {
|
|
62
|
+
y as flip_modal
|
|
63
|
+
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as o, h as t, H as i } from "./index.
|
|
1
|
+
import { r as o, h as t, H as i } from "./index.0ccdd659.js";
|
|
2
2
|
import "react";
|
|
3
3
|
import "react-dom";
|
|
4
4
|
const e = ":host{display:block}:host *{box-sizing:border-box}.option-list-section{background-color:var(--s-surface-overlay-default)}.option-list-section__label{display:block;width:100%;padding:var(--s-space-8) var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}", l = class {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { r as o, c as s, h as r, H as l, g as n } from "./index.
|
|
1
|
+
import { r as o, c as s, h as r, H as l, g as n } from "./index.0ccdd659.js";
|
|
2
2
|
import "react";
|
|
3
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
|
+
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-12)}", d = class {
|
|
5
5
|
constructor(i) {
|
|
6
6
|
o(this, i), this.valueChange = s(this, "valueChange", 7);
|
|
7
7
|
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { r as s, c as l, h as i, H as c } from "./index.
|
|
1
|
+
import { r as s, c as l, h as i, H as c } from "./index.0ccdd659.js";
|
|
2
2
|
import { c as t } from "./index-6d2e18c6.289636d4.js";
|
|
3
3
|
import "react";
|
|
4
4
|
import "react-dom";
|
|
5
5
|
import "./_commonjsHelpers-44457d8d.ba94af77.js";
|
|
6
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),
|
|
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-
|
|
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-8);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 {
|
|
8
8
|
constructor(a) {
|
|
9
9
|
s(this, a), this.valueChange = l(this, "valueChange", 7), this.checked = !1, this.disabled = !1, this.onChange = () => {
|
|
10
10
|
this.checked = !0, this.valueChange.emit(this.value);
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { r as i, c as r, h as e, H as o, g as b } from "./index.0ccdd659.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 = '.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%;justify-content:flex-start;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.tabs__tab.sc-flip-tabs{position:relative;display:block;min-width:0;margin:0;padding:var(--s-space-4) var(--s-space-8);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(.tabs__tab--active):hover:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-default);content:"";transform:translateX(-50%);pointer-events:none}.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__tab--active.sc-flip-tabs:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-highlight);content:"";transform:translateX(-50%);pointer-events:none}', c = class {
|
|
7
|
+
constructor(t) {
|
|
8
|
+
i(this, t), this.tabActivated = r(this, "tabActivated", 7), this.tabs = [], this.onKeyDown = (a) => {
|
|
9
|
+
a.code === "ArrowLeft" ? (a.preventDefault(), this.activatePreviousTab()) : a.code === "ArrowRight" && (a.preventDefault(), this.activateNextTab());
|
|
10
|
+
};
|
|
11
|
+
}
|
|
12
|
+
componentWillLoad() {
|
|
13
|
+
this.collectTabs();
|
|
14
|
+
}
|
|
15
|
+
async activateTab(t) {
|
|
16
|
+
if (this.activeTab === t)
|
|
17
|
+
return;
|
|
18
|
+
this.activeTab = t, this.tabs.forEach((s) => s.active = !1);
|
|
19
|
+
const a = this.tabs.find((s) => s.tabId === t);
|
|
20
|
+
!Boolean(a) || (a.active = !0, this.tabActivated.emit(a));
|
|
21
|
+
}
|
|
22
|
+
activateNextTab() {
|
|
23
|
+
const t = this.tabs.findIndex((s) => s.tabId === this.activeTab), a = Math.min(this.tabs.length - 1, t + 1);
|
|
24
|
+
this.activateTab(this.tabs[a].tabId), requestAnimationFrame(() => {
|
|
25
|
+
var s;
|
|
26
|
+
(s = this.el.querySelector(".tabs__tab--active")) === null || s === void 0 || s.focus();
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
activatePreviousTab() {
|
|
30
|
+
const t = this.tabs.findIndex((s) => s.tabId === this.activeTab), a = Math.max(0, t - 1);
|
|
31
|
+
this.activateTab(this.tabs[a].tabId), requestAnimationFrame(() => {
|
|
32
|
+
var s;
|
|
33
|
+
(s = this.el.querySelector(".tabs__tab--active")) === null || s === void 0 || s.focus();
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
collectTabs() {
|
|
37
|
+
if (this.tabs = Array.from(this.el.querySelectorAll("flip-tab")), this.tabs.length === 0)
|
|
38
|
+
return;
|
|
39
|
+
const t = this.tabs.find((a) => a.tabId === this.initialTab);
|
|
40
|
+
this.activateTab(Boolean(t) ? t.tabId : this.tabs[0].tabId);
|
|
41
|
+
}
|
|
42
|
+
render() {
|
|
43
|
+
return e(o, null, e("div", { class: "tabs" }, e("div", { "aria-label": this.label, class: "tabs__tab-bar", onKeyDown: this.onKeyDown, role: "tablist" }, this.tabs.map((t) => {
|
|
44
|
+
const a = t.tabId === this.activeTab, s = l("tabs__tab", {
|
|
45
|
+
"tabs__tab--active": a
|
|
46
|
+
});
|
|
47
|
+
return e("button", {
|
|
48
|
+
"aria-controls": t.tabId,
|
|
49
|
+
"aria-selected": a ? "true" : "false",
|
|
50
|
+
class: s,
|
|
51
|
+
id: `tab-${t.tabId}`,
|
|
52
|
+
key: t.tabId,
|
|
53
|
+
onClick: () => this.activateTab(t.tabId),
|
|
54
|
+
role: "tab",
|
|
55
|
+
tabIndex: a ? 0 : -1,
|
|
56
|
+
type: "button"
|
|
57
|
+
}, e("span", { class: "tabs__tab-label" }, t.label));
|
|
58
|
+
})), e("slot", null)));
|
|
59
|
+
}
|
|
60
|
+
get el() {
|
|
61
|
+
return b(this);
|
|
62
|
+
}
|
|
63
|
+
};
|
|
64
|
+
c.style = n;
|
|
65
|
+
export {
|
|
66
|
+
c as flip_tabs
|
|
67
|
+
};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { r, c as h, h as t, H as c } from "./index.
|
|
1
|
+
import { r, c as h, h as t, H as c } from "./index.0ccdd659.js";
|
|
2
2
|
import { c as d } from "./index-6d2e18c6.289636d4.js";
|
|
3
3
|
import "react";
|
|
4
4
|
import "react-dom";
|
|
5
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 {
|
|
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);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}.text-input__suffix.sc-flip-text-input{padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}', f = class {
|
|
7
7
|
constructor(s) {
|
|
8
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
9
|
this.inputEl.value = "", this.value = "", this.valueChange.emit(""), this.inputEl.focus();
|
|
@@ -41,12 +41,12 @@ const x = '.sc-flip-text-input-h{display:block;width:100%}.sc-flip-text-input-h
|
|
|
41
41
|
}
|
|
42
42
|
render() {
|
|
43
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,
|
|
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, u = this.type === "password" && this.showPassword ? "text" : this.type, p = d("text-input", `text-input--type-${this.type}`, {
|
|
45
45
|
"text-input--clearable": this.clearable,
|
|
46
46
|
"text-input--disabled": this.disabled,
|
|
47
47
|
"text-input--show-password": this.type === "password" && this.showPassword
|
|
48
48
|
});
|
|
49
|
-
return t(c, null, t("div", { class:
|
|
49
|
+
return t(c, null, t("div", { class: p }, 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: u, 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
50
|
}
|
|
51
51
|
};
|
|
52
52
|
f.style = x;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { r as i, c as a, h as t, H as e } from "./index.
|
|
1
|
+
import { r as i, c as a, h as t, H as e } from "./index.0ccdd659.js";
|
|
2
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
|
|
6
|
+
const r = ":host{display:flex}:host *{box-sizing:border-box}.toast{display:flex;width:100%;max-width:28rem;padding:var(--s-space-16);border-radius:var(--s-border-radius-sm);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)}", n = class {
|
|
7
7
|
constructor(s) {
|
|
8
8
|
i(this, s), this.dismiss = a(this, "dismiss", 7), this.accessibleDismissLabel = "Dismiss", this.intent = "default", this.onDismiss = () => {
|
|
9
9
|
this.dismiss.emit(this.toastId);
|
|
@@ -33,7 +33,7 @@ const n = ":host{display:flex}:host *{box-sizing:border-box}.toast{display:flex;
|
|
|
33
33
|
};
|
|
34
34
|
}
|
|
35
35
|
};
|
|
36
|
-
|
|
36
|
+
n.style = r;
|
|
37
37
|
export {
|
|
38
|
-
|
|
38
|
+
n as flip_toast
|
|
39
39
|
};
|
package/dist/{flip-visually-hidden.entry.8d93e0bb.js → flip-visually-hidden.entry.1099adf3.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r, h as i, H as l } from "./index.
|
|
1
|
+
import { r, h as i, H as l } from "./index.0ccdd659.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 {
|