@getflip/swirl-components 0.248.0 → 0.249.1
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/components.json +155 -1
- package/dist/cjs/file-manager.cjs.entry.js +1 -1
- package/dist/cjs/index-2ab5d772.js +8 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/cjs/swirl-select.cjs.entry.js +1 -1
- package/dist/cjs/swirl-toggle-button.cjs.entry.js +30 -0
- package/dist/cjs/swirl-toggle-group.cjs.entry.js +73 -0
- package/dist/cjs/swirl-tree-navigation-item.cjs.entry.js +1 -1
- package/dist/cjs/swirl-tree-view-item.cjs.entry.js +3 -3
- package/dist/cjs/swirl-tree-view.cjs.entry.js +1 -1
- package/dist/cjs/swirl-video-thumbnail.cjs.entry.js +1 -1
- package/dist/cjs/swirl-visually-hidden.cjs.entry.js +1 -1
- package/dist/collection/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/collection/collection-manifest.json +2 -0
- package/dist/collection/components/swirl-select/swirl-select.css +2 -3
- package/dist/collection/components/swirl-toggle-button/swirl-toggle-button.css +72 -0
- package/dist/collection/components/swirl-toggle-button/swirl-toggle-button.js +86 -0
- package/dist/collection/components/swirl-toggle-button/swirl-toggle-button.spec.js +41 -0
- package/dist/collection/components/swirl-toggle-button/swirl-toggle-button.stories.js +21 -0
- package/dist/collection/components/swirl-toggle-group/swirl-toggle-group.css +13 -0
- package/dist/collection/components/swirl-toggle-group/swirl-toggle-group.js +123 -0
- package/dist/collection/components/swirl-toggle-group/swirl-toggle-group.spec.js +80 -0
- package/dist/collection/components/swirl-toggle-group/swirl-toggle-group.stories.js +25 -0
- package/dist/collection/components/swirl-tree-navigation-item/swirl-tree-navigation-item.js +1 -1
- package/dist/collection/components/swirl-tree-view/swirl-tree-view.js +1 -1
- package/dist/collection/components/swirl-tree-view-item/swirl-tree-view-item.js +3 -3
- package/dist/collection/components/swirl-video-thumbnail/swirl-video-thumbnail.js +1 -1
- package/dist/collection/components/swirl-visually-hidden/swirl-visually-hidden.js +1 -1
- package/dist/collection/prototypes/file-manager/file-manager.js +1 -1
- package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/components/file-manager.js +1 -1
- package/dist/components/index.js +4 -0
- package/dist/components/swirl-select.js +1 -1
- package/dist/components/swirl-toggle-button.d.ts +11 -0
- package/dist/components/swirl-toggle-button.js +48 -0
- package/dist/components/swirl-toggle-group.d.ts +11 -0
- package/dist/components/swirl-toggle-group.js +97 -0
- package/dist/components/swirl-tree-navigation-item.js +1 -1
- package/dist/components/swirl-tree-view-item.js +3 -3
- package/dist/components/swirl-tree-view.js +1 -1
- package/dist/components/swirl-video-thumbnail.js +1 -1
- package/dist/components/swirl-visually-hidden2.js +1 -1
- package/dist/esm/file-manager.entry.js +1 -1
- package/dist/esm/index-1878a8d8.js +8 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-components.js +1 -1
- package/dist/esm/swirl-select.entry.js +1 -1
- package/dist/esm/swirl-toggle-button.entry.js +26 -0
- package/dist/esm/swirl-toggle-group.entry.js +69 -0
- package/dist/esm/swirl-tree-navigation-item.entry.js +1 -1
- package/dist/esm/swirl-tree-view-item.entry.js +3 -3
- package/dist/esm/swirl-tree-view.entry.js +1 -1
- package/dist/esm/swirl-video-thumbnail.entry.js +1 -1
- package/dist/esm/swirl-visually-hidden.entry.js +1 -1
- package/dist/swirl-components/p-2df2d4a1.entry.js +1 -0
- package/dist/swirl-components/{p-a08ddc40.entry.js → p-54be10f4.entry.js} +1 -1
- package/dist/swirl-components/{p-9baf4f00.entry.js → p-5dafbb60.entry.js} +1 -1
- package/dist/swirl-components/{p-3cd9c731.entry.js → p-97c80565.entry.js} +1 -1
- package/dist/swirl-components/{p-60e91f60.entry.js → p-ad58cba9.entry.js} +1 -1
- package/dist/swirl-components/{p-1005379b.entry.js → p-badac56a.entry.js} +1 -1
- package/dist/swirl-components/p-be277b72.entry.js +1 -0
- package/dist/swirl-components/p-d59542f6.entry.js +1 -0
- package/dist/swirl-components/p-f7280604.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-toggle-button/swirl-toggle-button.d.ts +7 -0
- package/dist/types/components/swirl-toggle-button/swirl-toggle-button.stories.d.ts +14 -0
- package/dist/types/components/swirl-toggle-group/swirl-toggle-group.d.ts +13 -0
- package/dist/types/components/swirl-toggle-group/swirl-toggle-group.stories.d.ts +14 -0
- package/dist/types/components.d.ts +50 -0
- package/package.json +1 -1
- package/vscode-data.json +34 -0
- package/dist/swirl-components/p-128d8185.entry.js +0 -1
- package/dist/swirl-components/p-a4229943.entry.js +0 -1
|
@@ -90,7 +90,7 @@ const FileManager$1 = /*@__PURE__*/ proxyCustomElement(class FileManager extends
|
|
|
90
90
|
onClick: () => this.selectItem(item) }, "type" in item ? (h("swirl-icon-file", { slot: "media" })) : (h("swirl-icon-folder-shared", { slot: "media" })))))) : (h("swirl-box", { padding: "16" }, h("swirl-text", { color: "subdued", weight: "medium" }, "This directory is empty.")));
|
|
91
91
|
}
|
|
92
92
|
render() {
|
|
93
|
-
return (h(Host, { key: '
|
|
93
|
+
return (h(Host, { key: 'b10b33ed0d11a29f44ec5adf1ecb03f69ba0a56c' }, h("swirl-app-layout", { key: '5ff76261fa1f4b6b7979147c80cf3e7e31e99b79', appName: "Documents", backToNavigationViewButtonLabel: "Back to documents list", ctaIcon: "<swirl-icon-add></swirl-icon-add>", ctaLabel: "Upload file", navigationLabel: "Documents", onNavigationBackButtonClick: this.resetSelectedDirectory, ref: (el) => (this.layout = el), sidebarCloseButtonLabel: "Close file info", sidebarHeading: "File info", showNavigationBackButton: Boolean(this.selectedDirectory), transitionStyle: "dialog" }, h("swirl-resource-list", { key: '293ec511ed760124b2e7f9f2bde5de52f467f41b', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: '8f71dfbd37ea1cd5c8dd04d07f2088a49f825626', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: '87e2edb961f3ad43af8a5c7cb23b04ebd6f260ce', label: "Sort items" })), h("swirl-stack", { key: '7cb962bde0a5de73fd2c386fca08dd90a40efdbc', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: '0579c26627e50d9e5756cd567090dfbea14539cc' }, h("swirl-heading", { key: 'f4c15f445c7d17903f54f20fb2b49e575ae22c58', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: 'da4cf0236d38d06f45fe7b583793330ea882a236', color: "subdued", truncate: true }, this.selectedFile?.description))), Boolean(this.selectedFile) ? (h("swirl-file-viewer", { file: this.selectedFile.url, slot: "content", type: this.selectedFile.type })) : (h("swirl-box", { cover: true, centerBlock: true, centerInline: true, padding: "16", slot: "content" }, h("swirl-empty-state", { heading: "Nothing to see here.", illustration: "/images/empty-state-1.svg" }, "Please select a file from the list."))), h("div", { key: '4ae29a97fd0a4c1bd3394c5a0a9c9ae7332eb0f1', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '9a72c17147bfd32c3a770b815c53975f763ec0df', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: 'af463b80409ee20a4a9b4be52bd90f3005fc3652', padding: "16", slot: "sidebar" }, h("swirl-text", { key: '35fe992269f17fd94d3f9240fa221832f8ef0b22', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: 'dbaa51e978000f29ed0f87407418fdf7a40f10d8', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: 'd76f81e6f05fede8ca6249c47e989af632abe0d1', value: ["ascending"] }, h("swirl-option-list-item", { key: '76c647333fb7464d01199d2ab648d1cb1869f75b', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: '2fc0f977ce6e52b8975e39e0e0733cc2eaae1d2d', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: '8d49685bdf33c7c95c33d2fb0941ee6e30e36aea', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
|
|
94
94
|
}
|
|
95
95
|
}, [1, "file-manager", {
|
|
96
96
|
"selectedDirectory": [32],
|
package/dist/components/index.js
CHANGED
|
@@ -345,6 +345,8 @@ import { SwirlThumbnail } from './swirl-thumbnail.js';
|
|
|
345
345
|
import { SwirlTimeInput } from './swirl-time-input.js';
|
|
346
346
|
import { SwirlToast } from './swirl-toast.js';
|
|
347
347
|
import { SwirlToastProvider } from './swirl-toast-provider.js';
|
|
348
|
+
import { SwirlToggleButton } from './swirl-toggle-button.js';
|
|
349
|
+
import { SwirlToggleGroup } from './swirl-toggle-group.js';
|
|
348
350
|
import { SwirlToolbar } from './swirl-toolbar.js';
|
|
349
351
|
import { SwirlTooltip } from './swirl-tooltip.js';
|
|
350
352
|
import { SwirlTreeNavigationItem } from './swirl-tree-navigation-item.js';
|
|
@@ -705,6 +707,8 @@ const defineCustomElements = (opts) => {
|
|
|
705
707
|
SwirlTimeInput,
|
|
706
708
|
SwirlToast,
|
|
707
709
|
SwirlToastProvider,
|
|
710
|
+
SwirlToggleButton,
|
|
711
|
+
SwirlToggleGroup,
|
|
708
712
|
SwirlToolbar,
|
|
709
713
|
SwirlTooltip,
|
|
710
714
|
SwirlTreeNavigationItem,
|
|
@@ -14,7 +14,7 @@ import { d as defineCustomElement$4 } from './swirl-tag2.js';
|
|
|
14
14
|
import { d as defineCustomElement$3 } from './swirl-text2.js';
|
|
15
15
|
import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
|
|
16
16
|
|
|
17
|
-
const swirlSelectCss = ".sc-swirl-select-h{display:block;width:100%}.sc-swirl-select-h *.sc-swirl-select{box-sizing:border-box}.select.sc-swirl-select{position:relative;display:flex;width:100%}.select.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:var(--s-space-16)}@media (min-width: 768px){.select.sc-swirl-select .sc-swirl-select::part(popover__scroll-container){padding-top:0}}.select--placement-top-start.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:-2.25rem}.select--multi.sc-swirl-select .select__input.sc-swirl-select{position:absolute;width:100%;height:100%;pointer-events:none;opacity:0}.select--multi.sc-swirl-select .select__multi-select-values.sc-swirl-select{display:flex}.select--disabled.sc-swirl-select .select__input.sc-swirl-select{color:var(--s-text-disabled)}.select--disabled.sc-swirl-select .select__indicator.sc-swirl-select{color:var(--s-icon-disabled)}.select--inline.sc-swirl-select .select__indicator.sc-swirl-select{transform:translateY(-50%)}.select--standalone.sc-swirl-select{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.select--standalone.sc-swirl-select .select__indicator.sc-swirl-select{position:relative;top:auto;right:auto;cursor:pointer;transform:none}.select--standalone.sc-swirl-select .select__input.sc-swirl-select{padding-right:var(--s-space-8);font-weight:var(--s-font-weight-medium);cursor:pointer}.select--standalone.sc-swirl-select .select__value-container.sc-swirl-select{width:-webkit-min-content;width:-moz-min-content;width:min-content}.select--search-loading.sc-swirl-select .select__search-input.sc-swirl-select{padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8))}.select__resize-helper.sc-swirl-select{display:block;
|
|
17
|
+
const swirlSelectCss = ".sc-swirl-select-h{display:block;width:100%}.sc-swirl-select-h *.sc-swirl-select{box-sizing:border-box}.select.sc-swirl-select{position:relative;display:flex;width:100%}.select.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:var(--s-space-16)}@media (min-width: 768px){.select.sc-swirl-select .sc-swirl-select::part(popover__scroll-container){padding-top:0}}.select--placement-top-start.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:-2.25rem}.select--multi.sc-swirl-select .select__input.sc-swirl-select{position:absolute;width:100%;height:100%;pointer-events:none;opacity:0}.select--multi.sc-swirl-select .select__multi-select-values.sc-swirl-select{display:flex}.select--disabled.sc-swirl-select .select__input.sc-swirl-select{color:var(--s-text-disabled)}.select--disabled.sc-swirl-select .select__indicator.sc-swirl-select{color:var(--s-icon-disabled)}.select--inline.sc-swirl-select .select__indicator.sc-swirl-select{transform:translateY(-50%)}.select--standalone.sc-swirl-select{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.select--standalone.sc-swirl-select .select__indicator.sc-swirl-select{position:relative;top:auto;right:auto;cursor:pointer;transform:none}.select--standalone.sc-swirl-select .select__input.sc-swirl-select{padding-right:var(--s-space-8);font-weight:var(--s-font-weight-medium);cursor:pointer}.select--standalone.sc-swirl-select .select__value-container.sc-swirl-select{width:-webkit-min-content;width:-moz-min-content;width:min-content}.select--search-loading.sc-swirl-select .select__search-input.sc-swirl-select{padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8))}.select__resize-helper.sc-swirl-select{display:block;width:auto;height:0;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));padding-right:var(--s-space-8);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left;white-space:pre;white-space:pre;vertical-align:top;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__resize-helper.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__input.sc-swirl-select{display:block;overflow:hidden;width:100%;height:1.25rem;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default}.select__input.sc-swirl-select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__multi-select-values.sc-swirl-select{display:none;overflow:hidden;width:100%;min-height:1.25rem;padding-right:calc(1.5rem + var(--s-space-8));flex-wrap:wrap;gap:var(--s-space-8)}.select__multi-select-values.sc-swirl-select .sc-swirl-select::part(tag){height:1.25rem;padding:0 var(--s-space-4)}.select__indicator.sc-swirl-select{position:absolute;top:50%;right:0;display:inline-flex;color:var(--s-icon-default);transform:translateY(calc(-50% - var(--s-space-8)))}.select__search.sc-swirl-select{position:relative;display:flex;width:100%;padding:0.0625rem var(--s-space-8);border-bottom:0.0625rem solid var(--s-border-default);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.select__search.sc-swirl-select{position:sticky;z-index:1;top:0;padding-top:var(--s-space-8);padding-right:0.0625rem;padding-left:0.0625rem}}.select__search-icon.sc-swirl-select{position:absolute;top:50%;left:calc(var(--s-space-8) * 2);display:inline-flex;color:var(--s-icon-default);transform:translateY(-50%)}@media (min-width: 768px){.select__search-icon.sc-swirl-select{left:var(--s-space-12);margin-top:var(--s-space-4);padding:0.0625rem}}.select__search-input.sc-swirl-select{width:100%;height:2.5rem;padding-right:var(--s-space-12);padding-left:calc(var(--s-space-12) + 1.25rem + var(--s-space-8));align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.select__search-input.sc-swirl-select:focus:not(:focus-visible){outline:none}.select__search-input.sc-swirl-select:focus-visible{outline-color:var(--s-focus-default)}.select__search-input.sc-swirl-select::-moz-placeholder{color:var(--s-text-subdued)}.select__search-input.sc-swirl-select::placeholder{color:var(--s-text-subdued)}.select__search-input.sc-swirl-select::-webkit-search-decoration,.select__search-input.sc-swirl-select::-webkit-search-cancel-button,.select__search-input.sc-swirl-select::-webkit-search-results-button,.select__search-input.sc-swirl-select::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__search-input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__search-spinner.sc-swirl-select{position:absolute;top:50%;right:var(--s-space-12);display:inline-flex;transform:translateY(-50%)}@media (min-width: 768px){.select__search-spinner.sc-swirl-select{margin-top:var(--s-space-4)}}.select__empty-list-label.sc-swirl-select{padding:var(--s-space-12) var(--s-space-12) 0}.select__empty-list-label.sc-swirl-select:not(:only-child){display:none}@media (min-width: 768px){.select__empty-list-label.sc-swirl-select{padding:var(--s-space-12) var(--s-space-12) var(--s-space-8)}}";
|
|
18
18
|
const SwirlSelectStyle0 = swirlSelectCss;
|
|
19
19
|
|
|
20
20
|
const SwirlSelect$1 = /*@__PURE__*/ proxyCustomElement(class SwirlSelect extends HTMLElement {
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface SwirlToggleButton extends Components.SwirlToggleButton, HTMLElement {}
|
|
4
|
+
export const SwirlToggleButton: {
|
|
5
|
+
prototype: SwirlToggleButton;
|
|
6
|
+
new (): SwirlToggleButton;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
|
|
2
|
+
import { c as classNames } from './index2.js';
|
|
3
|
+
|
|
4
|
+
const swirlToggleButtonCss = ":host{display:inline-block}:host *{box-sizing:border-box}.button{display:inline-flex;width:100%;padding:var(--s-space-8) var(--s-space-16);justify-content:center;align-items:center;border:none;border-top-left-radius:var(--swirl-button-border-top-left-radius);border-top-right-radius:var(--swirl-button-border-top-right-radius);border-bottom-right-radius:var(--swirl-button-border-bottom-right-radius);border-bottom-left-radius:var(--swirl-button-border-bottom-left-radius);color:var(--s-text-default);background-color:var(--swirl-ghost-button-background-default);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);text-decoration:none;cursor:pointer}.button:hover{background-color:var(--swirl-ghost-button-background-hovered)}.button:active{background-color:var(--swirl-ghost-button-background-pressed)}.button:focus:not(:focus-visible){outline:none}.button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.button.button--pressed{background-color:var(--swirl-flat-button-background-default)}.button.button--pressed:hover{background-color:var(--swirl-flat-button-background-hovered)}.button.button--pressed:active{background-color:var(--swirl-flat-button-background-pressed)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.button__label{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}";
|
|
5
|
+
const SwirlToggleButtonStyle0 = swirlToggleButtonCss;
|
|
6
|
+
|
|
7
|
+
const SwirlToggleButton$1 = /*@__PURE__*/ proxyCustomElement(class SwirlToggleButton extends HTMLElement {
|
|
8
|
+
constructor() {
|
|
9
|
+
super();
|
|
10
|
+
this.__registerHost();
|
|
11
|
+
this.__attachShadow();
|
|
12
|
+
this.onClick = () => {
|
|
13
|
+
this.isPressed = true;
|
|
14
|
+
};
|
|
15
|
+
this.identifier = undefined;
|
|
16
|
+
this.label = undefined;
|
|
17
|
+
this.isPressed = false;
|
|
18
|
+
}
|
|
19
|
+
render() {
|
|
20
|
+
const classNames$1 = classNames("button", {
|
|
21
|
+
"button--pressed": this.isPressed,
|
|
22
|
+
});
|
|
23
|
+
return (h("button", { key: '8687bd6e29b035db9a66d5e5f5026f86327dbeb3', class: classNames$1, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, h("span", { key: 'd94933863510e6bdc62cbc3b4596377811db72ec', class: "button__label" }, this.label)));
|
|
24
|
+
}
|
|
25
|
+
static get style() { return SwirlToggleButtonStyle0; }
|
|
26
|
+
}, [1, "swirl-toggle-button", {
|
|
27
|
+
"identifier": [1],
|
|
28
|
+
"label": [1],
|
|
29
|
+
"isPressed": [1028, "is-pressed"]
|
|
30
|
+
}]);
|
|
31
|
+
function defineCustomElement$1() {
|
|
32
|
+
if (typeof customElements === "undefined") {
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
const components = ["swirl-toggle-button"];
|
|
36
|
+
components.forEach(tagName => { switch (tagName) {
|
|
37
|
+
case "swirl-toggle-button":
|
|
38
|
+
if (!customElements.get(tagName)) {
|
|
39
|
+
customElements.define(tagName, SwirlToggleButton$1);
|
|
40
|
+
}
|
|
41
|
+
break;
|
|
42
|
+
} });
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
const SwirlToggleButton = SwirlToggleButton$1;
|
|
46
|
+
const defineCustomElement = defineCustomElement$1;
|
|
47
|
+
|
|
48
|
+
export { SwirlToggleButton, defineCustomElement };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface SwirlToggleGroup extends Components.SwirlToggleGroup, HTMLElement {}
|
|
4
|
+
export const SwirlToggleGroup: {
|
|
5
|
+
prototype: SwirlToggleGroup;
|
|
6
|
+
new (): SwirlToggleGroup;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
|
|
2
|
+
import { d as defineCustomElement$2 } from './swirl-stack2.js';
|
|
3
|
+
|
|
4
|
+
const swirlToggleGroupCss = ":host{display:inline-block}:host *{box-sizing:border-box}.toggle-group{padding:var(--s-space-4);background-color:var(--s-surface-default);border-radius:var(--s-border-radius-base)}";
|
|
5
|
+
const SwirlToggleGroupStyle0 = swirlToggleGroupCss;
|
|
6
|
+
|
|
7
|
+
const SwirlToggleGroup$1 = /*@__PURE__*/ proxyCustomElement(class SwirlToggleGroup extends HTMLElement {
|
|
8
|
+
constructor() {
|
|
9
|
+
super();
|
|
10
|
+
this.__registerHost();
|
|
11
|
+
this.__attachShadow();
|
|
12
|
+
this.selectedToggleChange = createEvent(this, "selectedToggleChange", 7);
|
|
13
|
+
this.toggleButtons = [];
|
|
14
|
+
this.onSlotChange = () => {
|
|
15
|
+
this.toggleButtons = Array.from(this.el.querySelectorAll("swirl-toggle-button"));
|
|
16
|
+
this.setTogglePressedStates();
|
|
17
|
+
};
|
|
18
|
+
this.selectedToggleId = undefined;
|
|
19
|
+
}
|
|
20
|
+
watchSelectedToggleId(newValue, oldValue) {
|
|
21
|
+
if (newValue !== oldValue) {
|
|
22
|
+
this.selectedToggleChange.emit(newValue);
|
|
23
|
+
this.setTogglePressedStates();
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
onClick(event) {
|
|
27
|
+
const target = event.target;
|
|
28
|
+
if (target?.tagName === "SWIRL-TOGGLE-BUTTON") {
|
|
29
|
+
event.stopPropagation();
|
|
30
|
+
const toggleButton = target;
|
|
31
|
+
this.selectedToggleId = toggleButton.identifier;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
setTogglePressedStates() {
|
|
35
|
+
if (!this.toggleButtons?.length) {
|
|
36
|
+
return;
|
|
37
|
+
}
|
|
38
|
+
if (!this.selectedToggleId) {
|
|
39
|
+
this.toggleButtonWithId(this.toggleButtons[0].identifier);
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
const toggleWithIdentifierExists = this.toggleButtons.some((toggleButton) => toggleButton.identifier === this.selectedToggleId);
|
|
43
|
+
if (!toggleWithIdentifierExists) {
|
|
44
|
+
this.toggleButtonWithId(this.toggleButtons[0].identifier);
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
47
|
+
this.toggleButtonWithId(this.selectedToggleId);
|
|
48
|
+
}
|
|
49
|
+
toggleButtonWithId(identifier) {
|
|
50
|
+
if (!this.toggleButtons?.length) {
|
|
51
|
+
return;
|
|
52
|
+
}
|
|
53
|
+
this.toggleButtons.forEach((toggleButton) => {
|
|
54
|
+
if (toggleButton.identifier === identifier) {
|
|
55
|
+
toggleButton.isPressed = true;
|
|
56
|
+
}
|
|
57
|
+
else {
|
|
58
|
+
toggleButton.isPressed = false;
|
|
59
|
+
}
|
|
60
|
+
});
|
|
61
|
+
}
|
|
62
|
+
render() {
|
|
63
|
+
return (h("swirl-stack", { key: 'c150389754cff2002bb60e9827f625aab3cb9e83', class: "toggle-group", spacing: "4", orientation: "horizontal", align: "center", role: "group" }, h("slot", { key: '0e0f8f134ebb4eadd40280dd90875a536eb804ac', onSlotchange: this.onSlotChange })));
|
|
64
|
+
}
|
|
65
|
+
get el() { return this; }
|
|
66
|
+
static get watchers() { return {
|
|
67
|
+
"selectedToggleId": ["watchSelectedToggleId"]
|
|
68
|
+
}; }
|
|
69
|
+
static get style() { return SwirlToggleGroupStyle0; }
|
|
70
|
+
}, [1, "swirl-toggle-group", {
|
|
71
|
+
"selectedToggleId": [1025, "selected-toggle-id"]
|
|
72
|
+
}, [[0, "click", "onClick"]], {
|
|
73
|
+
"selectedToggleId": ["watchSelectedToggleId"]
|
|
74
|
+
}]);
|
|
75
|
+
function defineCustomElement$1() {
|
|
76
|
+
if (typeof customElements === "undefined") {
|
|
77
|
+
return;
|
|
78
|
+
}
|
|
79
|
+
const components = ["swirl-toggle-group", "swirl-stack"];
|
|
80
|
+
components.forEach(tagName => { switch (tagName) {
|
|
81
|
+
case "swirl-toggle-group":
|
|
82
|
+
if (!customElements.get(tagName)) {
|
|
83
|
+
customElements.define(tagName, SwirlToggleGroup$1);
|
|
84
|
+
}
|
|
85
|
+
break;
|
|
86
|
+
case "swirl-stack":
|
|
87
|
+
if (!customElements.get(tagName)) {
|
|
88
|
+
defineCustomElement$2();
|
|
89
|
+
}
|
|
90
|
+
break;
|
|
91
|
+
} });
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
const SwirlToggleGroup = SwirlToggleGroup$1;
|
|
95
|
+
const defineCustomElement = defineCustomElement$1;
|
|
96
|
+
|
|
97
|
+
export { SwirlToggleGroup, defineCustomElement };
|
|
@@ -22,7 +22,7 @@ const SwirlTreeNavigationItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTr
|
|
|
22
22
|
"tree-navigation-item--active": this.active,
|
|
23
23
|
"tree-navigation-item--has-icon": Boolean(this.icon),
|
|
24
24
|
});
|
|
25
|
-
return (h(Host, { key: '
|
|
25
|
+
return (h(Host, { key: '667fff329a7d1df17448843b551660a3b57b00d1' }, h(Tag, { key: '641aaec069e941841a2b46a37235a03c823d76cc', class: className, href: this.href, target: this.target, type: isLink ? undefined : "button" }, this.icon && (h("span", { key: 'c539f98f02ec6c0a91587947d23fc70851a20789', class: "tree-navigation-item__icon", innerHTML: this.icon })), h("span", { key: '58a1037a0f3e35c4ff1245fa07ead267aa4b41e4', class: "tree-navigation-item__label" }, this.label))));
|
|
26
26
|
}
|
|
27
27
|
get el() { return this; }
|
|
28
28
|
static get style() { return SwirlTreeNavigationItemStyle0; }
|
|
@@ -81,11 +81,11 @@ const SwirlTreeViewItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTreeView
|
|
|
81
81
|
"tree-view-item--has-tags": hasTags,
|
|
82
82
|
});
|
|
83
83
|
const hasChildren = Boolean(this.el.querySelector("swirl-tree-view-item"));
|
|
84
|
-
return (h(Host, { key: '
|
|
84
|
+
return (h(Host, { key: '15130b1a24bf5106cfd290b42664d931204a9cf7', id: this.itemId, role: "none" }, h("li", { key: '41f4cd48edd031505c0e67a6f15006ec71cf59ea', class: className, role: "none" }, h("a", { key: '922ef1a373afd9c9345a2f9a6b2b2201144ae8e3', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren ? undefined : String(this.expanded), "aria-level": this.level + 1, "aria-owns": hasChildren ? `${this.itemId}-children` : undefined, "aria-selected": String(this.selected), class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, style: {
|
|
85
85
|
paddingLeft: `calc(${this.level} * var(--s-space-12) + var(--s-space-${this.expandable ? "4" : "8"}))`,
|
|
86
|
-
}, ref: (el) => (this.link = el), role: "treeitem", tabIndex: this.selected ? 0 : -1 }, this.expandable && (h("span", { key: '
|
|
86
|
+
}, ref: (el) => (this.link = el), role: "treeitem", tabIndex: this.selected ? 0 : -1 }, this.expandable && (h("span", { key: '3beb6a201aef63c534e9443a7793c677be8be221', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: '980561e9867b1eadcdf00f8d55e362470e0d3a8a' }, this.expanded ? (h("swirl-icon-expand-more", { onClick: this.onClickCollapse, size: 24 })) : (h("swirl-icon-chevron-right", { onClick: this.onClickExpand, size: 24 })))))), Boolean(this.icon) && (h(Fragment, { key: '12ab5019112735ec0f5046eebe02f81147f3d4bd' }, h("span", { key: '267ad77c9aef6f6f638c9297293a6989315af8dc', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: '6d32708751df76fd938accc329471f7962aedbcd', class: "tree-view-item__label" }, this.label), h("span", { key: '2a12c026e1b213bd195057091c5af752c1b064a7', class: "tree-view-item__tags" }, h("slot", { key: '2e70d4b8d8a320a8e8ba328c88b3ae51d53d6984', name: "tags" }))), h("ul", { key: '02542b147b3b8a017482c9fed1c9836c5aa96007', "aria-label": this.label, class: "tree-view-item__children", id: `${this.itemId}-children`, role: "group", style: {
|
|
87
87
|
display: !this.expanded || !hasChildren ? "none" : undefined,
|
|
88
|
-
} }, h("slot", { key: '
|
|
88
|
+
} }, h("slot", { key: '69de62e0d22ca3275ef5d623ce96b51abe235069' })))));
|
|
89
89
|
}
|
|
90
90
|
get el() { return this; }
|
|
91
91
|
static get style() { return SwirlTreeViewItemStyle0; }
|
|
@@ -197,7 +197,7 @@ const SwirlTreeView$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTreeView ext
|
|
|
197
197
|
return nestedSibling ?? undefined;
|
|
198
198
|
}
|
|
199
199
|
render() {
|
|
200
|
-
return (h(Host, { key: '
|
|
200
|
+
return (h(Host, { key: 'b666d321da58d3901f4cbbfe63a24bacdde640cf' }, h("ul", { key: '8ab176b6a697362ea7dbf8c88e83ad7e1c744cd3', "aria-label": this.label, class: "tree-view", role: "tree" }, h("slot", { key: 'defdbe195aec8654324c608c83382f2a4d233221', onSlotchange: this.onSlotChange }))));
|
|
201
201
|
}
|
|
202
202
|
get el() { return this; }
|
|
203
203
|
static get style() { return SwirlTreeViewStyle0; }
|
|
@@ -15,7 +15,7 @@ const SwirlVideoThumbnail$1 = /*@__PURE__*/ proxyCustomElement(class SwirlVideoT
|
|
|
15
15
|
this.src = undefined;
|
|
16
16
|
}
|
|
17
17
|
render() {
|
|
18
|
-
return (h(Host, { key: '
|
|
18
|
+
return (h(Host, { key: '86bd3f7055dc7f6657ebeb4bd622851ddb795bb4' }, h("button", { key: '0e14617879ac71bcf65e9b03e7317a2cccb66022', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: '19a3fb9095d4e6c6309b05c124c6f46d3c80af44', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: 'ee25801c68ae932b9c42ffaa767b08ed85b740f9', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: '1a2bebc69d6d3f237c31b526dc5e5d2888135cc8' }, this.durationLabel), this.duration)), h("svg", { key: '854b3e0a64de7a2b4108fa94aefa2ee9981b7cf2', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'e2ddc41d27f17ede02a511e1b9b0108e768c2f44', 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" })))));
|
|
19
19
|
}
|
|
20
20
|
static get style() { return SwirlVideoThumbnailStyle0; }
|
|
21
21
|
}, [1, "swirl-video-thumbnail", {
|
|
@@ -9,7 +9,7 @@ const SwirlVisuallyHidden = /*@__PURE__*/ proxyCustomElement(class SwirlVisually
|
|
|
9
9
|
this.__registerHost();
|
|
10
10
|
}
|
|
11
11
|
render() {
|
|
12
|
-
return (h(Host, { key: '
|
|
12
|
+
return (h(Host, { key: '9bfa953d16b7bfa3541731eb02ea52f208ef7aae' }, h("slot", { key: '8bbaf9f607a6d3eaa4eb24c0556e2a19950fa293' })));
|
|
13
13
|
}
|
|
14
14
|
static get style() { return SwirlVisuallyHiddenStyle0; }
|
|
15
15
|
}, [6, "swirl-visually-hidden"]);
|
|
@@ -58,7 +58,7 @@ const FileManager = class {
|
|
|
58
58
|
onClick: () => this.selectItem(item) }, "type" in item ? (h("swirl-icon-file", { slot: "media" })) : (h("swirl-icon-folder-shared", { slot: "media" })))))) : (h("swirl-box", { padding: "16" }, h("swirl-text", { color: "subdued", weight: "medium" }, "This directory is empty.")));
|
|
59
59
|
}
|
|
60
60
|
render() {
|
|
61
|
-
return (h(Host, { key: '
|
|
61
|
+
return (h(Host, { key: 'b10b33ed0d11a29f44ec5adf1ecb03f69ba0a56c' }, h("swirl-app-layout", { key: '5ff76261fa1f4b6b7979147c80cf3e7e31e99b79', appName: "Documents", backToNavigationViewButtonLabel: "Back to documents list", ctaIcon: "<swirl-icon-add></swirl-icon-add>", ctaLabel: "Upload file", navigationLabel: "Documents", onNavigationBackButtonClick: this.resetSelectedDirectory, ref: (el) => (this.layout = el), sidebarCloseButtonLabel: "Close file info", sidebarHeading: "File info", showNavigationBackButton: Boolean(this.selectedDirectory), transitionStyle: "dialog" }, h("swirl-resource-list", { key: '293ec511ed760124b2e7f9f2bde5de52f467f41b', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: '8f71dfbd37ea1cd5c8dd04d07f2088a49f825626', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: '87e2edb961f3ad43af8a5c7cb23b04ebd6f260ce', label: "Sort items" })), h("swirl-stack", { key: '7cb962bde0a5de73fd2c386fca08dd90a40efdbc', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: '0579c26627e50d9e5756cd567090dfbea14539cc' }, h("swirl-heading", { key: 'f4c15f445c7d17903f54f20fb2b49e575ae22c58', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: 'da4cf0236d38d06f45fe7b583793330ea882a236', color: "subdued", truncate: true }, this.selectedFile?.description))), Boolean(this.selectedFile) ? (h("swirl-file-viewer", { file: this.selectedFile.url, slot: "content", type: this.selectedFile.type })) : (h("swirl-box", { cover: true, centerBlock: true, centerInline: true, padding: "16", slot: "content" }, h("swirl-empty-state", { heading: "Nothing to see here.", illustration: "/images/empty-state-1.svg" }, "Please select a file from the list."))), h("div", { key: '4ae29a97fd0a4c1bd3394c5a0a9c9ae7332eb0f1', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '9a72c17147bfd32c3a770b815c53975f763ec0df', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: 'af463b80409ee20a4a9b4be52bd90f3005fc3652', padding: "16", slot: "sidebar" }, h("swirl-text", { key: '35fe992269f17fd94d3f9240fa221832f8ef0b22', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: 'dbaa51e978000f29ed0f87407418fdf7a40f10d8', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: 'd76f81e6f05fede8ca6249c47e989af632abe0d1', value: ["ascending"] }, h("swirl-option-list-item", { key: '76c647333fb7464d01199d2ab648d1cb1869f75b', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: '2fc0f977ce6e52b8975e39e0e0733cc2eaae1d2d', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: '8d49685bdf33c7c95c33d2fb0941ee6e30e36aea', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
|
|
62
62
|
}
|
|
63
63
|
};
|
|
64
64
|
|
|
@@ -2621,6 +2621,14 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
|
|
|
2621
2621
|
return import(
|
|
2622
2622
|
/* webpackMode: "lazy" */
|
|
2623
2623
|
'./swirl-toast-provider.entry.js').then(processMod, consoleError);
|
|
2624
|
+
case 'swirl-toggle-button':
|
|
2625
|
+
return import(
|
|
2626
|
+
/* webpackMode: "lazy" */
|
|
2627
|
+
'./swirl-toggle-button.entry.js').then(processMod, consoleError);
|
|
2628
|
+
case 'swirl-toggle-group':
|
|
2629
|
+
return import(
|
|
2630
|
+
/* webpackMode: "lazy" */
|
|
2631
|
+
'./swirl-toggle-group.entry.js').then(processMod, consoleError);
|
|
2624
2632
|
case 'swirl-toolbar':
|
|
2625
2633
|
return import(
|
|
2626
2634
|
/* webpackMode: "lazy" */
|