@getflip/swirl-components 0.522.0 → 0.523.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 +57 -10
- package/dist/cjs/index-DfC2lanl.js +4 -4
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/cjs/swirl-pdf-reader.cjs.entry.js +6 -6
- package/dist/cjs/swirl-tab-bar.cjs.entry.js +3 -3
- package/dist/cjs/swirl-tab.cjs.entry.js +1 -1
- package/dist/cjs/swirl-tabs.cjs.entry.js +4 -1
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/swirl-pdf-reader/swirl-pdf-reader.js +6 -6
- package/dist/collection/components/swirl-tab/swirl-tab.js +25 -1
- package/dist/collection/components/swirl-tab-bar/swirl-tab-bar.css +10 -0
- package/dist/collection/components/swirl-tab-bar/swirl-tab-bar.js +2 -2
- package/dist/collection/components/swirl-tab-bar/swirl-tab-bar.stories.js +27 -22
- package/dist/collection/components/swirl-tabs/swirl-tabs.js +4 -1
- package/dist/collection/components/swirl-tabs/swirl-tabs.stories.js +19 -0
- package/dist/components/swirl-pdf-reader.js +1 -1
- package/dist/components/swirl-tab-bar2.js +1 -1
- package/dist/components/swirl-tab.js +1 -1
- package/dist/components/swirl-tabs.js +1 -1
- package/dist/esm/index-BdGaOt5L.js +4 -4
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-components.js +1 -1
- package/dist/esm/swirl-pdf-reader.entry.js +6 -6
- package/dist/esm/swirl-tab-bar.entry.js +3 -3
- package/dist/esm/swirl-tab.entry.js +1 -1
- package/dist/esm/swirl-tabs.entry.js +4 -1
- package/dist/swirl-components/p-17c0ccd3.entry.js +1 -0
- package/dist/swirl-components/{p-191c2f65.entry.js → p-1e6aa1a4.entry.js} +1 -1
- package/dist/swirl-components/p-9b809cf4.entry.js +1 -0
- package/dist/swirl-components/p-b771be58.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-tab/swirl-tab.d.ts +2 -0
- package/dist/types/components/swirl-tab-bar/swirl-tab-bar.d.ts +11 -0
- package/dist/types/components/swirl-tabs/swirl-tabs.stories.d.ts +1 -0
- package/dist/types/components.d.ts +4 -2
- package/package.json +1 -1
- package/dist/swirl-components/p-697e45f4.entry.js +0 -1
- package/dist/swirl-components/p-a234d1c3.entry.js +0 -1
- package/dist/swirl-components/p-b7fa3ead.entry.js +0 -1
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var index = require('./index-DfC2lanl.js');
|
|
4
|
-
var bodyScrollLock = require('./body-scroll-lock-DVYwmTS6.js');
|
|
5
4
|
var index$1 = require('./index-DcAhLZUH.js');
|
|
6
5
|
var utils = require('./utils-UfZG-xPD.js');
|
|
6
|
+
var bodyScrollLock = require('./body-scroll-lock-DVYwmTS6.js');
|
|
7
7
|
|
|
8
8
|
const swirlPdfReaderCss = () => `:host{--thumbnails-width:7rem;display:block}:host *{box-sizing:border-box}.pdf-reader{position:fixed;z-index:var(--s-z-40);background-color:var(--s-surface-neutral-subdued);inset:0;touch-action:pan-x pan-y;border:none;padding:0;width:100%;height:100%;max-width:none;max-height:none;overflow:visible}.pdf-reader::backdrop{display:none}.pdf-reader:not([open]){display:none}.pdf-reader:not(.pdf-reader--closing) .pdf-reader__body{animation:0.15s pdf-reader-fade-in}@media (prefers-reduced-motion){.pdf-reader:not(.pdf-reader--closing) .pdf-reader__body{animation:none}}.pdf-reader--closing{animation:0.15s pdf-reader-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.pdf-reader--closing{animation:none}}.pdf-reader--show-thumbnails .pdf-reader__thumbnails{max-width:var(--thumbnails-width)}.pdf-reader--show-thumbnails .pdf-reader__floating-tools{left:calc(var(--s-space-16) + var(--thumbnails-width))}.pdf-reader--hide-menu .pdf-reader__menu{display:none}.pdf-reader__body{position:relative;width:100%;height:100%}.pdf-reader__header{display:flex;height:calc(4rem + env(safe-area-inset-top, 0));padding-top:env(safe-area-inset-top, 0);padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-8)}.pdf-reader__header-left,.pdf-reader__header-right{display:flex;flex-grow:1;align-items:center;gap:var(--s-space-8);min-width:0}@media (min-width: 768px){.pdf-reader__header-left,.pdf-reader__header-right{flex-basis:calc(100 / 3 * 1%);flex-grow:0}}.pdf-reader__header-right{justify-content:flex-end;flex-shrink:0}.pdf-reader__header-center{display:none;flex-grow:1;justify-content:center;align-items:center;gap:var(--s-space-16)}@media (min-width: 768px){.pdf-reader__header-center{display:flex}}.pdf-reader__label{overflow:hidden;flex-grow:1;font-weight:var(--s-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis}.pdf-reader__zoom-button-container{display:flex;align-items:center;gap:var(--s-space-8)}.pdf-reader__zoom-button-container>*:not(:last-child){position:relative}.pdf-reader__zoom-button-container>*:not(:last-child):after{position:absolute;top:50%;right:calc(-1 * var(--s-space-4));width:var(--s-border-width-default);height:1.5rem;background-color:var(--s-border-default);content:"";transform:translate3d(50%, -50%, 0)}.pdf-reader__zoom-select-container{position:relative}.pdf-reader__zoom-select{display:inline-flex;height:2.5rem;padding-right:var(--s-space-12);padding-right:calc(var(--s-space-8) + 1.5rem + var(--s-space-12));padding-left:var(--s-space-12);justify-content:flex-start;align-items:center;border:var(--s-border-width-default) solid var(--s-border-default);border-radius:var(--s-border-radius-sm);color:var(--s-interactive-neutral-default);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.pdf-reader__zoom-select:focus:not(:focus-visible){outline:none}.pdf-reader__zoom-select:focus-visible{outline-color:var(--s-focus-default)}.pdf-reader__zoom-select-icon{position:absolute;top:50%;right:var(--s-space-8);display:inline-flex;transform:translateY(-50%);pointer-events:none}.pdf-reader__content{display:flex;width:100%;height:calc(100% - 4rem)}.pdf-reader__thumbnails{display:flex;overflow-x:hidden;overflow-y:auto;max-width:0;height:100%;padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);flex-basis:var(--thumbnails-width);flex-grow:0;flex-shrink:0;align-items:center;background-color:var(--s-background-default);flex-direction:column;transition:max-width 0.2s linear;box-shadow:inset calc(-1 * var(--s-border-width-default)) 0 0 0 var(--s-border-default);gap:var(--s-space-4)}.pdf-reader__thumbnail{width:5rem;margin:0;padding:0;border:var(--s-border-width-default) solid var(--s-border-default);background-color:transparent;cursor:pointer}.pdf-reader__thumbnail>img{display:inline-flex;width:100%}.pdf-reader__thumbnail--active{border-width:0.125rem;border-color:var(--s-border-highlight)}.pdf-reader__viewer{flex-grow:1}.pdf-reader__mobile-zoom-controls{position:absolute;z-index:1;right:var(--s-space-16);bottom:var(--s-space-32);display:flex;padding-bottom:var(--s-space-4);flex-direction:column;gap:var(--s-space-8)}@media (min-width: 768px){.pdf-reader__mobile-zoom-controls{display:none}}.pdf-reader__mobile-zoom-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}.pdf-reader__mobile-zoom-button:disabled{cursor:default}.pdf-reader__floating-tools{position:fixed;z-index:1;bottom:var(--s-space-16);left:var(--s-space-16);display:none;flex-direction:column;transition:left 0.2s linear;gap:var(--s-space-12)}@media (min-width: 768px){.pdf-reader__floating-tools{display:flex}}.pdf-reader__floating-tool-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}.pdf-reader__meta{display:flex;padding-top:var(--s-space-4);padding-right:var(--s-space-16);padding-bottom:var(--s-space-4);padding-left:var(--s-space-8);align-items:center;gap:var(--s-space-12)}@media (min-width: 768px){.pdf-reader__meta{max-width:18rem}}.pdf-reader__file-icon{display:inline-flex;padding-left:var(--s-space-4);flex-shrink:0}.pdf-reader__file-info{display:flex;min-width:0;flex-grow:1;flex-direction:column}@keyframes pdf-reader-fade-in{from{opacity:0}to{opacity:1}}@keyframes pdf-reader-fade-out{from{opacity:1}to{opacity:0}}`;
|
|
9
9
|
|
|
10
10
|
const SwirlPdfReader = class {
|
|
11
11
|
constructor(hostRef) {
|
|
12
12
|
index.registerInstance(this, hostRef);
|
|
13
|
-
this.modalClose = index.createEvent(this, "modalClose",
|
|
14
|
-
this.modalOpen = index.createEvent(this, "modalOpen",
|
|
13
|
+
this.modalClose = index.createEvent(this, "modalClose", 3);
|
|
14
|
+
this.modalOpen = index.createEvent(this, "modalOpen", 3);
|
|
15
15
|
this.autoZoomLabel = "Full width";
|
|
16
16
|
this.closeButtonLabel = "Close PDF viewer";
|
|
17
17
|
this.downloadButtonEnabled = true;
|
|
@@ -200,15 +200,15 @@ const SwirlPdfReader = class {
|
|
|
200
200
|
"pdf-reader--hide-menu": !hasMenuItems,
|
|
201
201
|
"pdf-reader--show-thumbnails": this.showThumbnails,
|
|
202
202
|
});
|
|
203
|
-
return (index.h(index.Host, { key: '
|
|
203
|
+
return (index.h(index.Host, { key: '57810a7174cb657af4d5ba1856c6fbb87ce5ae31' }, index.h("dialog", { key: '360d8e98c1c52837ed27fb7cd337b16ce7bfe2cd', "aria-label": this.label, class: className, id: "pdf-reader", onClose: this.onClose, onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, index.h("div", { key: '7e66538314fb4764355b1610012ea42fb237e5d0', class: "pdf-reader__body", role: "document" }, index.h("header", { key: '14fac3323e9b3fa251319c90a62f6f66e78f9ada', class: "pdf-reader__header" }, index.h("span", { key: '4cd2232d3c43c1dd6f0d132308fec448517fb9aa', class: "pdf-reader__header-left" }, index.h("swirl-button", { key: '49a36a382e8b48d528cf276d35943d4a9d9f4fc1', class: "pdf-reader__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), index.h("span", { key: 'b687e1b77d37ffa04170dd407ac1cef05b2491a4', class: "pdf-reader__label" }, this.label)), index.h("span", { key: '0fe6d58325f7b81deee0c65677242cfa24e79f2c', class: "pdf-reader__header-center" }, index.h("span", { key: '47dc904919d61ab1b114a246d602011fc863a39b', class: "pdf-reader__zoom-button-container" }, index.h("swirl-button", { key: '413a7f85a241eb9cd04922a70d2a3e48086d09ea', class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[0], hideLabel: true, icon: "<swirl-icon-remove></swirl-icon-remove>", label: this.zoomOutButtonLabel, onClick: this.onZoomOutButtonClick }), index.h("swirl-button", { key: '2bdb470ca1ebe725fa1a70973a40deeda9cd5931', class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], hideLabel: true, icon: "<swirl-icon-add></swirl-icon-add>", label: this.zoomInButtonLabel, onClick: this.onZoomInButtonClick })), index.h("span", { key: 'd076fa101128e864578a2140a53bfc8827383fa1', class: "pdf-reader__zoom-select-container" }, index.h("select", { key: '1463bf142356cff5bb0ec7b36bdb3cb8ee986d3b', "aria-label": this.zoomSelectLabel, class: "pdf-reader__zoom-select", name: "zoom-select", id: "zoom-select", onChange: this.onZoomChange }, index.h("option", { key: '02a585b65695beac044c0a008b9a434225980c28', selected: this.zoom === "auto", value: "auto" }, this.autoZoomLabel), this.zoomSteps.map((zoom) => (index.h("option", { key: zoom, selected: this.zoom === zoom, value: zoom }, zoom * 100, "%")))), index.h("swirl-icon-expand-more", { key: '61e19d18959982b0b36af728514dff01719dfc0c', class: "pdf-reader__zoom-select-icon" }))), index.h("span", { key: 'e13d90ffbed8a25a724889a04da095aa1a7bac9f', class: "pdf-reader__header-right" }, index.h("swirl-popover-trigger", { key: '324a873cff051439e7e5ee24486a9e48333ac1ac', swirlPopover: this.menu }, index.h("swirl-button", { key: '66806d4a8f2180537936fcf491fe5fdea0ca63b4', class: "pdf-reader__menu-button", hideLabel: true, icon: "<swirl-icon-more-vertikal></swirl-icon-more-vertikal>", label: this.menuTriggerLabel }))), index.h("span", { key: '582a8f54d6af4b221de593ef2a3914f1211949fb', class: "pdf-reader__floating-tools" }, index.h("button", { key: '60ce2600dec0ea344bf5b7f33b6ce33802bc693b', "aria-label": this.sideBySideButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleViewMode, type: "button" }, index.h("swirl-icon-menu-book", { key: '291df0f92d96fc37bc8ad46cbb977f98dfa31590' })), index.h("button", { key: 'b7239444d91a861a200c6aa78eac66c789a88a6c', "aria-controls": "thumbnails", "aria-expanded": String(Boolean(this.showThumbnails)), "aria-label": this.thumbnailsButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleThumbnals, type: "button" }, index.h("swirl-icon-file-copy", { key: '8d92b11f82e422b89a929ee3ce3009402f502f9f' })))), index.h("div", { key: 'c6dc6fa929957dc8a0113c6355bc1f9a9357be79', class: "pdf-reader__content" }, index.h("nav", { key: 'e80b1aa4b4e139a94f501c09293a0baa4b21c7ce', "aria-label": this.thumbnailsLabel, class: "pdf-reader__thumbnails", id: "thumbnails" }, this.loadingThumbnails && index.h("swirl-spinner", { key: 'f550b620ebf6a183730fcbacfff6dfe14d4638e7' }), !this.loadingThumbnails &&
|
|
204
204
|
this.thumbnails.map((thumbnail, index$2) => {
|
|
205
205
|
const thumbnailClassName = index$1.classnames("pdf-reader__thumbnail", {
|
|
206
206
|
"pdf-reader__thumbnail--active": this.visiblePages[0] === index$2 + 1,
|
|
207
207
|
});
|
|
208
208
|
return (index.h("button", { "aria-label": `${this.thumbnailButtonLabel} ${index$2 + 1}`, class: thumbnailClassName, onClick: this.onThumbnailClick(index$2), type: "button" }, index.h("img", { src: thumbnail.toDataURL("image/png"), alt: "" })));
|
|
209
|
-
})), index.h("swirl-file-viewer", { key: '
|
|
209
|
+
})), index.h("swirl-file-viewer", { key: '69c3a0268802db3cd2e09dc0274a1004de99d292', active: this.active, class: "pdf-reader__viewer", disablePrint: !this.printButtonEnabled, file: this.file, fileName: this.fileName, onActivate: this.onActivate, onVisiblePagesChange: this.onVisiblePagesChange, pdfWorkerSrc: this.pdfWorkerSrc, ref: (el) => (this.viewer = el), type: "application/pdf", viewMode: this.viewMode, zoom: this.zoom, skipNativeDownload: this.skipNativeDownload }), index.h("div", { key: '5012cd0417f4be6b46001d6b660f47dc84f7f699', class: "pdf-reader__mobile-zoom-controls" }, index.h("button", { key: 'd51564171076acca2306164ea5eaa3453ef3be90', "aria-label": this.autoZoomLabel, class: "pdf-reader__mobile-zoom-button", onClick: this.onZoomAutoButtonClick, type: "button" }, this.zoom === "auto" ? (index.h("swirl-icon-fullscreen-exit", null)) : (index.h("swirl-icon-fullscreen", null))), index.h("button", { key: '9816dd55f9961fe5503de783643cb2373d216f87', "aria-label": this.zoomInButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], onClick: this.onZoomInButtonClick, type: "button" }, index.h("swirl-icon-add", { key: '4ea3a3a52c4e425d400390a57b7075661d75d8cd' })), index.h("button", { key: '005728ec07e2b48f1cfd3810bd357ffbf2dfad6d', "aria-label": this.zoomOutButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[0], onClick: this.onZoomOutButtonClick, type: "button" }, index.h("swirl-icon-remove", { key: '189615f4a4879b3db7f500a7bc82f957351745fa' }))))), index.h("swirl-popover", { key: 'a580ea4c5d90336555d52037e47209f599563c74', animation: "scale-in-y", disableScrollLock: true, id: "menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, index.h("swirl-stack", { key: 'a05e11797d611cf17ee0c0631fb9f22ec4c287e7' }, index.h("div", { key: '93c93e65f94ade2201ed7b922078ebf9feed041b', class: "pdf-reader__meta" }, index.h("div", { key: 'fe8c3870f44ca3ac8e6b5eab47582d498a00bb90', class: "pdf-reader__file-icon" }, index.h("svg", { key: '28d373975315d1197741a6dadc862abc9352e9d0', fill: "none", height: "36", viewBox: "0 0 24 36", width: "24" }, index.h("path", { key: '6012d64c8ddbfec856bd0ff44e0a1150e198d291', d: "M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z", fill: "white" }), index.h("path", { key: '26a1a3d4a35292fd389b9280418bec6d23cb6ee3', d: "M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z", fill: "white" }), index.h("path", { key: '0fdf053860fd4e2fde4ab7ca0e0651f77ab15cb2', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }), index.h("path", { key: 'e8d5c0a130c6735ea94fc067e74c73ea64f4495d', d: "M3.59961 9.00001C3.59961 8.0059 4.4055 7.20001 5.39961 7.20001H14.854C15.3314 7.20001 15.7893 7.38965 16.1268 7.72722L19.8724 11.4728C20.21 11.8104 20.3996 12.2682 20.3996 12.7456V27C20.3996 27.9941 19.5937 28.8 18.5996 28.8H5.39961C4.4055 28.8 3.59961 27.9941 3.59961 27V9.00001Z", fill: "#FF574D" }), index.h("path", { key: 'f1bc509a0510c65a7e41f0cc80d8f20810e34f5d', d: "M15.5996 7.36166V10.2C15.5996 11.1941 16.4055 12 17.3996 12H20.2379C20.3237 12.1884 20.3768 12.3913 20.3937 12.6H17.3996C16.0785 12.6 15.0067 11.5325 14.9996 10.213L14.9996 7.20587C15.2083 7.2228 15.4112 7.27593 15.5996 7.36166Z", fill: "white" }), index.h("path", { key: 'f47c3124bdc58045e45811c38dd4d13144f04eee', d: "M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z", fill: "white" }), index.h("path", { key: 'd6580968d282e3b65a13e473af451cc8df26cb3d', d: "M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z", fill: "white" }), index.h("path", { key: '14669b5e5270a6d6aa64cecc48da8af91d7cccdc', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }))), index.h("div", { key: '9b4d0b65b78ee34a12887ad3dd681a868826db87', class: "pdf-reader__file-info" }, index.h("swirl-text", { key: '8056dbc7b8f945480f69a433e9d959cd51d5892a', truncate: true, weight: "semibold" }, this.label), index.h("swirl-text", { key: '8f341c5666c15e9a1a88dbffe2384c707b333b9b', color: "subdued", size: "sm", truncate: true }, this.fileTypeLabel))), hasMenuItems && index.h("swirl-separator", { key: '09d56282bc88ae9e7075d33d737036b2aaa60566' }), index.h("swirl-action-list", { key: '341d3fbc229cc529c377eddc4a6373021f7bb3f0', class: "pdf-reader__menu" }, this.printButtonEnabled && (index.h("swirl-action-list-item", { key: 'f76522129bda6733a1ca6070211252cb6514c6f0', class: "pdf-reader__print-button", icon: "<swirl-icon-print></swirl-icon-print>", label: this.printButtonLabel, onClick: this.onPrintButtonClick })), this.downloadButtonEnabled && (index.h("swirl-action-list-item", { key: 'e5a515de9441085f825311da1412045b631751c9', class: "pdf-reader__download-button", disabled: this.downloading, icon: !this.downloading
|
|
210
210
|
? "<swirl-icon-download></swirl-icon-download>"
|
|
211
|
-
: '<swirl-spinner size="xs"></swirl-spinner>', label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), index.h("slot", { key: '
|
|
211
|
+
: '<swirl-spinner size="xs"></swirl-spinner>', label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), index.h("slot", { key: 'be9b3f47319dd8271333601d6e4e0b2000009608', name: "menu-items" })))))));
|
|
212
212
|
}
|
|
213
213
|
get el() { return index.getElement(this); }
|
|
214
214
|
static get watchers() { return {
|
|
@@ -4,7 +4,7 @@ var index = require('./index-DfC2lanl.js');
|
|
|
4
4
|
var index$1 = require('./index-DcAhLZUH.js');
|
|
5
5
|
var utils = require('./utils-UfZG-xPD.js');
|
|
6
6
|
|
|
7
|
-
const swirlTabBarCss = () => `.sc-swirl-tab-bar-h{display:flex;height:var(--swirl-tab-bar-height)}.sc-swirl-tab-bar-h *.sc-swirl-tab-bar{box-sizing:border-box}.tab-bar.sc-swirl-tab-bar{position:relative;display:flex;overflow-x:auto;width:100%;justify-content:flex-start;scrollbar-width:none}.tab-bar.tab-bar--variant-default.sc-swirl-tab-bar{border-bottom:var(--swirl-tab-bar-border-width) solid var(--s-border-default)}.tab-bar.tab-bar--variant-pill.sc-swirl-tab-bar{gap:var(--s-space-8)}.tab-bar--wrap.sc-swirl-tab-bar{flex-wrap:wrap}.tab-bar--justify-evenly.sc-swirl-tab-bar>*.sc-swirl-tab-bar,.tab-bar--justify-evenly.sc-swirl-tab-bar .tab-bar__tab.sc-swirl-tab-bar{flex:1}.tab-bar__tab.sc-swirl-tab-bar{position:relative;display:flex;min-width:-moz-fit-content;min-width:fit-content;margin:0;justify-content:center;align-items:center;border:none;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);cursor:pointer}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar{padding:var(--s-space-4) var(--s-space-8);color:var(--s-interactive-neutral-default);background-color:transparent}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover{color:var(--s-interactive-neutral-hovered)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__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}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-interactive-neutral-hovered)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):active{color:var(--s-interactive-neutral-pressed)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):active .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-interactive-neutral-pressed)}.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active.sc-swirl-tab-bar{color:var(--s-text-highlight)}.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active.sc-swirl-tab-bar: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}.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active.sc-swirl-tab-bar .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-text-highlight)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:focus{outline:none}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:focus-visible .tab-bar__tab-label.sc-swirl-tab-bar{border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.125rem var(--s-focus-default)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar{padding:var(--s-space-8) var(--s-space-16);border-radius:var(--s-border-radius-full-round);color:var(--s-text-default);background:var(--s-action-neutral-default);gap:var(--s-space-8)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar:hover{background:var(--s-action-neutral-hovered)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar:active{background:var(--s-action-neutral-pressed)}.tab-bar__tab.tab-bar__tab--variant-pill.tab-bar__tab--active.sc-swirl-tab-bar{color:var(--s-text-on-action-primary);background:var(--s-action-primary-default)}.tab-bar__tab.tab-bar__tab--variant-pill.tab-bar__tab--active.sc-swirl-tab-bar .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-text-on-action-primary)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-text-subdued)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tab-bar__tab.sc-swirl-tab-bar{padding:calc(var(--s-space-4) + var(--s-space-2)) var(--s-space-8);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tab-bar__tab-icon.sc-swirl-tab-bar{display:inline-flex}.tab-bar__tab-label.sc-swirl-tab-bar{display:inline-flex;padding:var(--s-space-8) var(--s-space-8);text-align:center;white-space:nowrap;gap:var(--s-space-4)}.tab-bar__tab-label.tab-bar__tab-label--variant-pill.sc-swirl-tab-bar{padding:0}.tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-interactive-neutral-default);font-weight:var(--s-font-weight-normal)}`;
|
|
7
|
+
const swirlTabBarCss = () => `.sc-swirl-tab-bar-h{display:flex;height:var(--swirl-tab-bar-height)}.sc-swirl-tab-bar-h *.sc-swirl-tab-bar{box-sizing:border-box}.tab-bar.sc-swirl-tab-bar{position:relative;display:flex;overflow-x:auto;width:100%;justify-content:flex-start;scrollbar-width:none}.tab-bar.tab-bar--variant-default.sc-swirl-tab-bar{border-bottom:var(--swirl-tab-bar-border-width) solid var(--s-border-default)}.tab-bar.tab-bar--variant-pill.sc-swirl-tab-bar{gap:var(--s-space-8)}.tab-bar--wrap.sc-swirl-tab-bar{flex-wrap:wrap}.tab-bar--justify-evenly.sc-swirl-tab-bar>*.sc-swirl-tab-bar,.tab-bar--justify-evenly.sc-swirl-tab-bar .tab-bar__tab.sc-swirl-tab-bar{flex:1}.tab-bar__tab.sc-swirl-tab-bar{position:relative;display:flex;min-width:-moz-fit-content;min-width:fit-content;margin:0;justify-content:center;align-items:center;border:none;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);cursor:pointer}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar{padding:var(--s-space-4) var(--s-space-8);color:var(--s-interactive-neutral-default);background-color:transparent}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover{color:var(--s-interactive-neutral-hovered)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__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}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-interactive-neutral-hovered)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):active{color:var(--s-interactive-neutral-pressed)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):active .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-interactive-neutral-pressed)}.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active.sc-swirl-tab-bar{color:var(--s-text-highlight)}.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active.sc-swirl-tab-bar: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}.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active.sc-swirl-tab-bar .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-text-highlight)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:focus{outline:none}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:focus-visible .tab-bar__tab-label.sc-swirl-tab-bar{border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.125rem var(--s-focus-default)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar{padding:var(--s-space-8) var(--s-space-16);border-radius:var(--s-border-radius-full-round);color:var(--s-text-default);background:var(--s-action-neutral-default);gap:var(--s-space-8)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar:hover{background:var(--s-action-neutral-hovered)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar:active{background:var(--s-action-neutral-pressed)}.tab-bar__tab.tab-bar__tab--variant-pill.tab-bar__tab--active.sc-swirl-tab-bar{color:var(--s-text-on-action-primary);background:var(--s-action-primary-default)}.tab-bar__tab.tab-bar__tab--variant-pill.tab-bar__tab--active.sc-swirl-tab-bar .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-text-on-action-primary)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-text-subdued)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar .tab-bar__tab-badge.sc-swirl-tab-bar{--swirl-badge-border-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tab-bar__tab.sc-swirl-tab-bar{padding:calc(var(--s-space-4) + var(--s-space-2)) var(--s-space-8);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tab-bar__tab-icon.sc-swirl-tab-bar{display:inline-flex}.tab-bar__tab-label.sc-swirl-tab-bar{display:inline-flex;padding:var(--s-space-8) var(--s-space-8);text-align:center;white-space:nowrap;gap:var(--s-space-4)}.tab-bar__tab-label.tab-bar__tab-label--variant-pill.sc-swirl-tab-bar{padding:0}.tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-interactive-neutral-default);font-weight:var(--s-font-weight-normal)}.tab-bar__tab-badge.sc-swirl-tab-bar{padding-left:calc(var(--s-space-4) + var(--s-space-2))}`;
|
|
8
8
|
|
|
9
9
|
const SwirlTabBar = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -64,7 +64,7 @@ const SwirlTabBar = class {
|
|
|
64
64
|
? `var(--s-space-${this.paddingBlockStart})`
|
|
65
65
|
: undefined,
|
|
66
66
|
};
|
|
67
|
-
return (index.h(index.Host, { key: '
|
|
67
|
+
return (index.h(index.Host, { key: '51fed6a97827130f1204dc3c25f8536b039901f9' }, index.h("div", { key: 'ee9a9cb8c16d06fe70233e5462225edafbf49122', "aria-label": this.label, class: className, onKeyDown: this.onKeyDown, role: this.disableTabSemantics ? undefined : "tablist", style: styles }, this.tabs.map((tab) => {
|
|
68
68
|
const className = index$1.classnames("tab-bar__tab", {
|
|
69
69
|
"tab-bar__tab--active": tab.active,
|
|
70
70
|
"tab-bar__tab--variant-pill": this.variant === "pill",
|
|
@@ -79,7 +79,7 @@ const SwirlTabBar = class {
|
|
|
79
79
|
? "true"
|
|
80
80
|
: "false", class: className, id: `tab-${tab.id}`, key: tab.tooltip ? undefined : tab.id,
|
|
81
81
|
// eslint-disable-next-line react/jsx-no-bind
|
|
82
|
-
onClick: () => this.activateTab.emit(tab.id), onFocus: this.onTabFocus, role: this.disableTabSemantics ? undefined : "tab", tabIndex: this.disableTabSemantics ? undefined : tab.active ? 0 : -1, type: "button" }, tab.icon && (index.h("span", { class: "tab-bar__tab-icon", innerHTML: tab.icon })), index.h("span", { class: labelClassName }, tab.label, tab.suffix && (index.h("span", { class: "tab-bar__tab-suffix" }, tab.suffix)))));
|
|
82
|
+
onClick: () => this.activateTab.emit(tab.id), onFocus: this.onTabFocus, role: this.disableTabSemantics ? undefined : "tab", tabIndex: this.disableTabSemantics ? undefined : tab.active ? 0 : -1, type: "button" }, tab.icon && (index.h("span", { class: "tab-bar__tab-icon", innerHTML: tab.icon })), index.h("span", { class: labelClassName }, tab.label, tab.suffix && (index.h("span", { class: "tab-bar__tab-suffix" }, tab.suffix)), tab.badge && (index.h("swirl-badge", { class: "tab-bar__tab-badge", intent: tab.badge.intent ?? "info", label: tab.badge.label, size: "xs", variant: "dot" })))));
|
|
83
83
|
return tab.tooltip ? (index.h("swirl-tooltip", { content: tab.tooltip, key: tab.id }, tabButton)) : (tabButton);
|
|
84
84
|
}))));
|
|
85
85
|
}
|
|
@@ -12,7 +12,7 @@ const SwirlTab = class {
|
|
|
12
12
|
}
|
|
13
13
|
render() {
|
|
14
14
|
const className = index$1.classnames("tab", { "tab--active": this.active });
|
|
15
|
-
return (index.h(index.Host, { key: '
|
|
15
|
+
return (index.h(index.Host, { key: '6708f1585aefc6ecd5d2d3eee159e358c7e47e16', "aria-labelledby": `tab-${this.tabId}`, id: this.tabId, role: "tabpanel", tabIndex: this.active ? 0 : -1, class: className, style: { padding: `var(--s-space-${this.padding})` } }, index.h("slot", { key: 'adba089df5cd6c60a8387f1321159a09daeb7d23' })));
|
|
16
16
|
}
|
|
17
17
|
};
|
|
18
18
|
SwirlTab.style = swirlTabCss();
|
|
@@ -68,9 +68,12 @@ const SwirlTabs = class {
|
|
|
68
68
|
const initialTab = this.tabs.find((tab) => tab.tabId === this.initialTab);
|
|
69
69
|
this.activateTab(Boolean(initialTab) ? initialTab.tabId : this.tabs[0].tabId);
|
|
70
70
|
}
|
|
71
|
+
// only runs on load and on activation
|
|
72
|
+
// a prop change at runtime is not picked up until the next tab click
|
|
71
73
|
updateTabBarTabs() {
|
|
72
74
|
this.tabBarTabs = this.tabs.map((tab) => ({
|
|
73
75
|
active: this.activeTab === tab.tabId,
|
|
76
|
+
badge: tab.badge,
|
|
74
77
|
icon: tab.icon,
|
|
75
78
|
id: tab.tabId,
|
|
76
79
|
label: tab.label,
|
|
@@ -78,7 +81,7 @@ const SwirlTabs = class {
|
|
|
78
81
|
}));
|
|
79
82
|
}
|
|
80
83
|
render() {
|
|
81
|
-
return (index.h(index.Host, { key: '
|
|
84
|
+
return (index.h(index.Host, { key: '4d7f710d18d9d1b58fc658dbf8e6922a46a19cb0' }, index.h("div", { key: 'ada4ac17bf87a77bf63b5459b8c7a20560913b59', class: "tabs" }, index.h("swirl-tab-bar", { key: '53f3aaaab6a55e2f907e6db2d94a11db3b1100fa', label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs, justify: this.justifyTabBar, paddingBlockEnd: this.tabBarPaddingBlockEnd, paddingBlockStart: this.tabBarPaddingBlockStart, paddingInlineEnd: this.tabBarPaddingInlineEnd, paddingInlineStart: this.tabBarPaddingInlineStart, variant: this.tabBarVariant })), index.h("slot", { key: '524a105bd28721d506d0e6a067f1a054c272dc52' })));
|
|
82
85
|
}
|
|
83
86
|
get el() { return index.getElement(this); }
|
|
84
87
|
};
|
|
@@ -50,8 +50,8 @@
|
|
|
50
50
|
"components/swirl-spinner/swirl-spinner.js",
|
|
51
51
|
"components/swirl-status-indicator/swirl-status-indicator.js",
|
|
52
52
|
"components/swirl-switch/swirl-switch.js",
|
|
53
|
-
"components/swirl-tab/swirl-tab.js",
|
|
54
53
|
"components/swirl-tab-bar/swirl-tab-bar.js",
|
|
54
|
+
"components/swirl-tab/swirl-tab.js",
|
|
55
55
|
"components/swirl-table/swirl-table.js",
|
|
56
56
|
"components/swirl-table-column/swirl-table-column.js",
|
|
57
57
|
"components/swirl-tag/swirl-tag.js",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { h, Host, } from "@stencil/core";
|
|
2
|
-
import { disableBodyScroll, enableBodyScroll } from "../../utils/body-scroll-lock";
|
|
3
2
|
import classnames from "classnames";
|
|
4
3
|
import { isMobileViewport, querySelectorAllDeep } from "../../utils";
|
|
4
|
+
import { disableBodyScroll, enableBodyScroll, } from "../../utils/body-scroll-lock";
|
|
5
5
|
/**
|
|
6
6
|
* @slot menu-items - Optional menu items displayed in the file menu.
|
|
7
7
|
*/
|
|
@@ -195,15 +195,15 @@ export class SwirlPdfReader {
|
|
|
195
195
|
"pdf-reader--hide-menu": !hasMenuItems,
|
|
196
196
|
"pdf-reader--show-thumbnails": this.showThumbnails,
|
|
197
197
|
});
|
|
198
|
-
return (h(Host, { key: '
|
|
198
|
+
return (h(Host, { key: '57810a7174cb657af4d5ba1856c6fbb87ce5ae31' }, h("dialog", { key: '360d8e98c1c52837ed27fb7cd337b16ce7bfe2cd', "aria-label": this.label, class: className, id: "pdf-reader", onClose: this.onClose, onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, h("div", { key: '7e66538314fb4764355b1610012ea42fb237e5d0', class: "pdf-reader__body", role: "document" }, h("header", { key: '14fac3323e9b3fa251319c90a62f6f66e78f9ada', class: "pdf-reader__header" }, h("span", { key: '4cd2232d3c43c1dd6f0d132308fec448517fb9aa', class: "pdf-reader__header-left" }, h("swirl-button", { key: '49a36a382e8b48d528cf276d35943d4a9d9f4fc1', class: "pdf-reader__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), h("span", { key: 'b687e1b77d37ffa04170dd407ac1cef05b2491a4', class: "pdf-reader__label" }, this.label)), h("span", { key: '0fe6d58325f7b81deee0c65677242cfa24e79f2c', class: "pdf-reader__header-center" }, h("span", { key: '47dc904919d61ab1b114a246d602011fc863a39b', class: "pdf-reader__zoom-button-container" }, h("swirl-button", { key: '413a7f85a241eb9cd04922a70d2a3e48086d09ea', class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[0], hideLabel: true, icon: "<swirl-icon-remove></swirl-icon-remove>", label: this.zoomOutButtonLabel, onClick: this.onZoomOutButtonClick }), h("swirl-button", { key: '2bdb470ca1ebe725fa1a70973a40deeda9cd5931', class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], hideLabel: true, icon: "<swirl-icon-add></swirl-icon-add>", label: this.zoomInButtonLabel, onClick: this.onZoomInButtonClick })), h("span", { key: 'd076fa101128e864578a2140a53bfc8827383fa1', class: "pdf-reader__zoom-select-container" }, h("select", { key: '1463bf142356cff5bb0ec7b36bdb3cb8ee986d3b', "aria-label": this.zoomSelectLabel, class: "pdf-reader__zoom-select", name: "zoom-select", id: "zoom-select", onChange: this.onZoomChange }, h("option", { key: '02a585b65695beac044c0a008b9a434225980c28', selected: this.zoom === "auto", value: "auto" }, this.autoZoomLabel), this.zoomSteps.map((zoom) => (h("option", { key: zoom, selected: this.zoom === zoom, value: zoom }, zoom * 100, "%")))), h("swirl-icon-expand-more", { key: '61e19d18959982b0b36af728514dff01719dfc0c', class: "pdf-reader__zoom-select-icon" }))), h("span", { key: 'e13d90ffbed8a25a724889a04da095aa1a7bac9f', class: "pdf-reader__header-right" }, h("swirl-popover-trigger", { key: '324a873cff051439e7e5ee24486a9e48333ac1ac', swirlPopover: this.menu }, h("swirl-button", { key: '66806d4a8f2180537936fcf491fe5fdea0ca63b4', class: "pdf-reader__menu-button", hideLabel: true, icon: "<swirl-icon-more-vertikal></swirl-icon-more-vertikal>", label: this.menuTriggerLabel }))), h("span", { key: '582a8f54d6af4b221de593ef2a3914f1211949fb', class: "pdf-reader__floating-tools" }, h("button", { key: '60ce2600dec0ea344bf5b7f33b6ce33802bc693b', "aria-label": this.sideBySideButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleViewMode, type: "button" }, h("swirl-icon-menu-book", { key: '291df0f92d96fc37bc8ad46cbb977f98dfa31590' })), h("button", { key: 'b7239444d91a861a200c6aa78eac66c789a88a6c', "aria-controls": "thumbnails", "aria-expanded": String(Boolean(this.showThumbnails)), "aria-label": this.thumbnailsButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleThumbnals, type: "button" }, h("swirl-icon-file-copy", { key: '8d92b11f82e422b89a929ee3ce3009402f502f9f' })))), h("div", { key: 'c6dc6fa929957dc8a0113c6355bc1f9a9357be79', class: "pdf-reader__content" }, h("nav", { key: 'e80b1aa4b4e139a94f501c09293a0baa4b21c7ce', "aria-label": this.thumbnailsLabel, class: "pdf-reader__thumbnails", id: "thumbnails" }, this.loadingThumbnails && h("swirl-spinner", { key: 'f550b620ebf6a183730fcbacfff6dfe14d4638e7' }), !this.loadingThumbnails &&
|
|
199
199
|
this.thumbnails.map((thumbnail, index) => {
|
|
200
200
|
const thumbnailClassName = classnames("pdf-reader__thumbnail", {
|
|
201
201
|
"pdf-reader__thumbnail--active": this.visiblePages[0] === index + 1,
|
|
202
202
|
});
|
|
203
203
|
return (h("button", { "aria-label": `${this.thumbnailButtonLabel} ${index + 1}`, class: thumbnailClassName, onClick: this.onThumbnailClick(index), type: "button" }, h("img", { src: thumbnail.toDataURL("image/png"), alt: "" })));
|
|
204
|
-
})), h("swirl-file-viewer", { key: '
|
|
204
|
+
})), h("swirl-file-viewer", { key: '69c3a0268802db3cd2e09dc0274a1004de99d292', active: this.active, class: "pdf-reader__viewer", disablePrint: !this.printButtonEnabled, file: this.file, fileName: this.fileName, onActivate: this.onActivate, onVisiblePagesChange: this.onVisiblePagesChange, pdfWorkerSrc: this.pdfWorkerSrc, ref: (el) => (this.viewer = el), type: "application/pdf", viewMode: this.viewMode, zoom: this.zoom, skipNativeDownload: this.skipNativeDownload }), h("div", { key: '5012cd0417f4be6b46001d6b660f47dc84f7f699', class: "pdf-reader__mobile-zoom-controls" }, h("button", { key: 'd51564171076acca2306164ea5eaa3453ef3be90', "aria-label": this.autoZoomLabel, class: "pdf-reader__mobile-zoom-button", onClick: this.onZoomAutoButtonClick, type: "button" }, this.zoom === "auto" ? (h("swirl-icon-fullscreen-exit", null)) : (h("swirl-icon-fullscreen", null))), h("button", { key: '9816dd55f9961fe5503de783643cb2373d216f87', "aria-label": this.zoomInButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], onClick: this.onZoomInButtonClick, type: "button" }, h("swirl-icon-add", { key: '4ea3a3a52c4e425d400390a57b7075661d75d8cd' })), h("button", { key: '005728ec07e2b48f1cfd3810bd357ffbf2dfad6d', "aria-label": this.zoomOutButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[0], onClick: this.onZoomOutButtonClick, type: "button" }, h("swirl-icon-remove", { key: '189615f4a4879b3db7f500a7bc82f957351745fa' }))))), h("swirl-popover", { key: 'a580ea4c5d90336555d52037e47209f599563c74', animation: "scale-in-y", disableScrollLock: true, id: "menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", { key: 'a05e11797d611cf17ee0c0631fb9f22ec4c287e7' }, h("div", { key: '93c93e65f94ade2201ed7b922078ebf9feed041b', class: "pdf-reader__meta" }, h("div", { key: 'fe8c3870f44ca3ac8e6b5eab47582d498a00bb90', class: "pdf-reader__file-icon" }, h("svg", { key: '28d373975315d1197741a6dadc862abc9352e9d0', fill: "none", height: "36", viewBox: "0 0 24 36", width: "24" }, h("path", { key: '6012d64c8ddbfec856bd0ff44e0a1150e198d291', d: "M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z", fill: "white" }), h("path", { key: '26a1a3d4a35292fd389b9280418bec6d23cb6ee3', d: "M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z", fill: "white" }), h("path", { key: '0fdf053860fd4e2fde4ab7ca0e0651f77ab15cb2', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }), h("path", { key: 'e8d5c0a130c6735ea94fc067e74c73ea64f4495d', d: "M3.59961 9.00001C3.59961 8.0059 4.4055 7.20001 5.39961 7.20001H14.854C15.3314 7.20001 15.7893 7.38965 16.1268 7.72722L19.8724 11.4728C20.21 11.8104 20.3996 12.2682 20.3996 12.7456V27C20.3996 27.9941 19.5937 28.8 18.5996 28.8H5.39961C4.4055 28.8 3.59961 27.9941 3.59961 27V9.00001Z", fill: "#FF574D" }), h("path", { key: 'f1bc509a0510c65a7e41f0cc80d8f20810e34f5d', d: "M15.5996 7.36166V10.2C15.5996 11.1941 16.4055 12 17.3996 12H20.2379C20.3237 12.1884 20.3768 12.3913 20.3937 12.6H17.3996C16.0785 12.6 15.0067 11.5325 14.9996 10.213L14.9996 7.20587C15.2083 7.2228 15.4112 7.27593 15.5996 7.36166Z", fill: "white" }), h("path", { key: 'f47c3124bdc58045e45811c38dd4d13144f04eee', d: "M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z", fill: "white" }), h("path", { key: 'd6580968d282e3b65a13e473af451cc8df26cb3d', d: "M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z", fill: "white" }), h("path", { key: '14669b5e5270a6d6aa64cecc48da8af91d7cccdc', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }))), h("div", { key: '9b4d0b65b78ee34a12887ad3dd681a868826db87', class: "pdf-reader__file-info" }, h("swirl-text", { key: '8056dbc7b8f945480f69a433e9d959cd51d5892a', truncate: true, weight: "semibold" }, this.label), h("swirl-text", { key: '8f341c5666c15e9a1a88dbffe2384c707b333b9b', color: "subdued", size: "sm", truncate: true }, this.fileTypeLabel))), hasMenuItems && h("swirl-separator", { key: '09d56282bc88ae9e7075d33d737036b2aaa60566' }), h("swirl-action-list", { key: '341d3fbc229cc529c377eddc4a6373021f7bb3f0', class: "pdf-reader__menu" }, this.printButtonEnabled && (h("swirl-action-list-item", { key: 'f76522129bda6733a1ca6070211252cb6514c6f0', class: "pdf-reader__print-button", icon: "<swirl-icon-print></swirl-icon-print>", label: this.printButtonLabel, onClick: this.onPrintButtonClick })), this.downloadButtonEnabled && (h("swirl-action-list-item", { key: 'e5a515de9441085f825311da1412045b631751c9', class: "pdf-reader__download-button", disabled: this.downloading, icon: !this.downloading
|
|
205
205
|
? "<swirl-icon-download></swirl-icon-download>"
|
|
206
|
-
: '<swirl-spinner size="xs"></swirl-spinner>', label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), h("slot", { key: '
|
|
206
|
+
: '<swirl-spinner size="xs"></swirl-spinner>', label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), h("slot", { key: 'be9b3f47319dd8271333601d6e4e0b2000009608', name: "menu-items" })))))));
|
|
207
207
|
}
|
|
208
208
|
static get is() { return "swirl-pdf-reader"; }
|
|
209
209
|
static get encapsulation() { return "shadow"; }
|
|
@@ -656,7 +656,7 @@ export class SwirlPdfReader {
|
|
|
656
656
|
return [{
|
|
657
657
|
"method": "modalClose",
|
|
658
658
|
"name": "modalClose",
|
|
659
|
-
"bubbles":
|
|
659
|
+
"bubbles": false,
|
|
660
660
|
"cancelable": true,
|
|
661
661
|
"composed": true,
|
|
662
662
|
"docs": {
|
|
@@ -671,7 +671,7 @@ export class SwirlPdfReader {
|
|
|
671
671
|
}, {
|
|
672
672
|
"method": "modalOpen",
|
|
673
673
|
"name": "modalOpen",
|
|
674
|
-
"bubbles":
|
|
674
|
+
"bubbles": false,
|
|
675
675
|
"cancelable": true,
|
|
676
676
|
"composed": true,
|
|
677
677
|
"docs": {
|
|
@@ -6,7 +6,7 @@ export class SwirlTab {
|
|
|
6
6
|
}
|
|
7
7
|
render() {
|
|
8
8
|
const className = classnames("tab", { "tab--active": this.active });
|
|
9
|
-
return (h(Host, { key: '
|
|
9
|
+
return (h(Host, { key: '6708f1585aefc6ecd5d2d3eee159e358c7e47e16', "aria-labelledby": `tab-${this.tabId}`, id: this.tabId, role: "tabpanel", tabIndex: this.active ? 0 : -1, class: className, style: { padding: `var(--s-space-${this.padding})` } }, h("slot", { key: 'adba089df5cd6c60a8387f1321159a09daeb7d23' })));
|
|
10
10
|
}
|
|
11
11
|
static get is() { return "swirl-tab"; }
|
|
12
12
|
static get encapsulation() { return "shadow"; }
|
|
@@ -41,6 +41,30 @@ export class SwirlTab {
|
|
|
41
41
|
"reflect": false,
|
|
42
42
|
"attribute": "active"
|
|
43
43
|
},
|
|
44
|
+
"badge": {
|
|
45
|
+
"type": "unknown",
|
|
46
|
+
"mutable": false,
|
|
47
|
+
"complexType": {
|
|
48
|
+
"original": "SwirlTabBarTabBadge",
|
|
49
|
+
"resolved": "{ intent?: SwirlBadgeIntent; label: string; }",
|
|
50
|
+
"references": {
|
|
51
|
+
"SwirlTabBarTabBadge": {
|
|
52
|
+
"location": "import",
|
|
53
|
+
"path": "../swirl-tab-bar/swirl-tab-bar",
|
|
54
|
+
"id": "src/components/swirl-tab-bar/swirl-tab-bar.tsx::SwirlTabBarTabBadge",
|
|
55
|
+
"referenceLocation": "SwirlTabBarTabBadge"
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
},
|
|
59
|
+
"required": false,
|
|
60
|
+
"optional": true,
|
|
61
|
+
"docs": {
|
|
62
|
+
"tags": [],
|
|
63
|
+
"text": ""
|
|
64
|
+
},
|
|
65
|
+
"getter": false,
|
|
66
|
+
"setter": false
|
|
67
|
+
},
|
|
44
68
|
"icon": {
|
|
45
69
|
"type": "string",
|
|
46
70
|
"mutable": false,
|
|
@@ -148,6 +148,12 @@
|
|
|
148
148
|
color: var(--s-text-subdued);
|
|
149
149
|
}
|
|
150
150
|
|
|
151
|
+
/* the badge sits inline on a pill, so it needs no border to separate it from its surroundings */
|
|
152
|
+
|
|
153
|
+
.tab-bar__tab.tab-bar__tab--variant-pill .tab-bar__tab-badge {
|
|
154
|
+
--swirl-badge-border-color: transparent;
|
|
155
|
+
}
|
|
156
|
+
|
|
151
157
|
@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
|
|
152
158
|
|
|
153
159
|
.tab-bar__tab {
|
|
@@ -177,3 +183,7 @@
|
|
|
177
183
|
color: var(--s-interactive-neutral-default);
|
|
178
184
|
font-weight: var(--s-font-weight-normal);
|
|
179
185
|
}
|
|
186
|
+
|
|
187
|
+
.tab-bar__tab-badge {
|
|
188
|
+
padding-left: calc(var(--s-space-4) + var(--s-space-2));
|
|
189
|
+
}
|
|
@@ -55,7 +55,7 @@ export class SwirlTabBar {
|
|
|
55
55
|
? `var(--s-space-${this.paddingBlockStart})`
|
|
56
56
|
: undefined,
|
|
57
57
|
};
|
|
58
|
-
return (h(Host, { key: '
|
|
58
|
+
return (h(Host, { key: '51fed6a97827130f1204dc3c25f8536b039901f9' }, h("div", { key: 'ee9a9cb8c16d06fe70233e5462225edafbf49122', "aria-label": this.label, class: className, onKeyDown: this.onKeyDown, role: this.disableTabSemantics ? undefined : "tablist", style: styles }, this.tabs.map((tab) => {
|
|
59
59
|
const className = classnames("tab-bar__tab", {
|
|
60
60
|
"tab-bar__tab--active": tab.active,
|
|
61
61
|
"tab-bar__tab--variant-pill": this.variant === "pill",
|
|
@@ -70,7 +70,7 @@ export class SwirlTabBar {
|
|
|
70
70
|
? "true"
|
|
71
71
|
: "false", class: className, id: `tab-${tab.id}`, key: tab.tooltip ? undefined : tab.id,
|
|
72
72
|
// eslint-disable-next-line react/jsx-no-bind
|
|
73
|
-
onClick: () => this.activateTab.emit(tab.id), onFocus: this.onTabFocus, role: this.disableTabSemantics ? undefined : "tab", tabIndex: this.disableTabSemantics ? undefined : tab.active ? 0 : -1, type: "button" }, tab.icon && (h("span", { class: "tab-bar__tab-icon", innerHTML: tab.icon })), h("span", { class: labelClassName }, tab.label, tab.suffix && (h("span", { class: "tab-bar__tab-suffix" }, tab.suffix)))));
|
|
73
|
+
onClick: () => this.activateTab.emit(tab.id), onFocus: this.onTabFocus, role: this.disableTabSemantics ? undefined : "tab", tabIndex: this.disableTabSemantics ? undefined : tab.active ? 0 : -1, type: "button" }, tab.icon && (h("span", { class: "tab-bar__tab-icon", innerHTML: tab.icon })), h("span", { class: labelClassName }, tab.label, tab.suffix && (h("span", { class: "tab-bar__tab-suffix" }, tab.suffix)), tab.badge && (h("swirl-badge", { class: "tab-bar__tab-badge", intent: tab.badge.intent ?? "info", label: tab.badge.label, size: "xs", variant: "dot" })))));
|
|
74
74
|
return tab.tooltip ? (h("swirl-tooltip", { content: tab.tooltip, key: tab.id }, tabButton)) : (tabButton);
|
|
75
75
|
}))));
|
|
76
76
|
}
|
|
@@ -14,28 +14,33 @@ const Template = (args) => {
|
|
|
14
14
|
const element = generateStoryElement("swirl-tab-bar", args);
|
|
15
15
|
return element;
|
|
16
16
|
};
|
|
17
|
+
const tabs = [
|
|
18
|
+
{
|
|
19
|
+
active: false,
|
|
20
|
+
id: "tab1",
|
|
21
|
+
label: "A Tab",
|
|
22
|
+
suffix: "2",
|
|
23
|
+
tooltip: "With a tooltip",
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
active: true,
|
|
27
|
+
badge: {
|
|
28
|
+
intent: "info",
|
|
29
|
+
label: "Batches running",
|
|
30
|
+
},
|
|
31
|
+
icon: '<swirl-icon glyph="emoji-mood" size="20"></swirl-icon>',
|
|
32
|
+
id: "tab2",
|
|
33
|
+
label: "Another Tab",
|
|
34
|
+
suffix: "12",
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
active: false,
|
|
38
|
+
icon: '<swirl-icon glyph="emoji-satisfied" size="20"></swirl-icon>',
|
|
39
|
+
id: "tab3",
|
|
40
|
+
label: "Yet Another Tab",
|
|
41
|
+
},
|
|
42
|
+
];
|
|
17
43
|
export const SwirlTabBar = Template.bind({});
|
|
18
44
|
SwirlTabBar.args = {
|
|
19
|
-
tabs
|
|
20
|
-
{
|
|
21
|
-
active: false,
|
|
22
|
-
id: "tab1",
|
|
23
|
-
label: "A Tab",
|
|
24
|
-
suffix: "2",
|
|
25
|
-
tooltip: "With a tooltip",
|
|
26
|
-
},
|
|
27
|
-
{
|
|
28
|
-
active: true,
|
|
29
|
-
icon: '<swirl-icon glyph="emoji-mood" size="20"></swirl-icon>',
|
|
30
|
-
id: "tab2",
|
|
31
|
-
label: "Another Tab",
|
|
32
|
-
suffix: "12",
|
|
33
|
-
},
|
|
34
|
-
{
|
|
35
|
-
active: false,
|
|
36
|
-
icon: '<swirl-icon glyph="emoji-satisfied" size="20"></swirl-icon>',
|
|
37
|
-
id: "tab3",
|
|
38
|
-
label: "Yet Another Tab",
|
|
39
|
-
},
|
|
40
|
-
],
|
|
45
|
+
tabs,
|
|
41
46
|
};
|
|
@@ -61,9 +61,12 @@ export class SwirlTabs {
|
|
|
61
61
|
const initialTab = this.tabs.find((tab) => tab.tabId === this.initialTab);
|
|
62
62
|
this.activateTab(Boolean(initialTab) ? initialTab.tabId : this.tabs[0].tabId);
|
|
63
63
|
}
|
|
64
|
+
// only runs on load and on activation
|
|
65
|
+
// a prop change at runtime is not picked up until the next tab click
|
|
64
66
|
updateTabBarTabs() {
|
|
65
67
|
this.tabBarTabs = this.tabs.map((tab) => ({
|
|
66
68
|
active: this.activeTab === tab.tabId,
|
|
69
|
+
badge: tab.badge,
|
|
67
70
|
icon: tab.icon,
|
|
68
71
|
id: tab.tabId,
|
|
69
72
|
label: tab.label,
|
|
@@ -71,7 +74,7 @@ export class SwirlTabs {
|
|
|
71
74
|
}));
|
|
72
75
|
}
|
|
73
76
|
render() {
|
|
74
|
-
return (h(Host, { key: '
|
|
77
|
+
return (h(Host, { key: '4d7f710d18d9d1b58fc658dbf8e6922a46a19cb0' }, h("div", { key: 'ada4ac17bf87a77bf63b5459b8c7a20560913b59', class: "tabs" }, h("swirl-tab-bar", { key: '53f3aaaab6a55e2f907e6db2d94a11db3b1100fa', label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs, justify: this.justifyTabBar, paddingBlockEnd: this.tabBarPaddingBlockEnd, paddingBlockStart: this.tabBarPaddingBlockStart, paddingInlineEnd: this.tabBarPaddingInlineEnd, paddingInlineStart: this.tabBarPaddingInlineStart, variant: this.tabBarVariant })), h("slot", { key: '524a105bd28721d506d0e6a067f1a054c272dc52' })));
|
|
75
78
|
}
|
|
76
79
|
static get is() { return "swirl-tabs"; }
|
|
77
80
|
static get encapsulation() { return "scoped"; }
|
|
@@ -24,3 +24,22 @@ SwirlTabs.args = {
|
|
|
24
24
|
initialTab: "tab-2",
|
|
25
25
|
label: "Tabs",
|
|
26
26
|
};
|
|
27
|
+
const StatusBadgesTemplate = (args) => {
|
|
28
|
+
const element = generateStoryElement("swirl-tabs", args);
|
|
29
|
+
element.innerHTML = `
|
|
30
|
+
<swirl-tab label="Users" tab-id="tab-1"><swirl-text>Users</swirl-text></swirl-tab>
|
|
31
|
+
<swirl-tab label="Invite code batches" tab-id="tab-2"><swirl-text>Invite code batches</swirl-text></swirl-tab>
|
|
32
|
+
<swirl-tab label="Groups" tab-id="tab-3"><swirl-text>Groups</swirl-text></swirl-tab>
|
|
33
|
+
`;
|
|
34
|
+
// badge is an object, so it has to be set as a property
|
|
35
|
+
element.querySelector("[tab-id='tab-2']").badge = {
|
|
36
|
+
intent: "info",
|
|
37
|
+
label: "Batches running",
|
|
38
|
+
};
|
|
39
|
+
return element;
|
|
40
|
+
};
|
|
41
|
+
export const StatusBadges = StatusBadgesTemplate.bind({});
|
|
42
|
+
StatusBadges.args = {
|
|
43
|
+
initialTab: "tab-1",
|
|
44
|
+
label: "Tabs",
|
|
45
|
+
};
|