@brandsync/wc 1.2.0 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +417 -0
- package/dist/brandsync-wc/brandsync-wc.esm.js +1 -1
- package/dist/brandsync-wc/p-03676f8a.entry.js +1 -0
- package/dist/brandsync-wc/{p-718ce85f.entry.js → p-04c26826.entry.js} +1 -1
- package/dist/brandsync-wc/{p-f94449da.entry.js → p-0c8050e8.entry.js} +1 -1
- package/dist/brandsync-wc/p-0d5cc77f.entry.js +1 -0
- package/dist/brandsync-wc/{p-7f14660d.entry.js → p-19c98e13.entry.js} +1 -1
- package/dist/brandsync-wc/{p-a35d5ea7.entry.js → p-23758f81.entry.js} +1 -1
- package/dist/brandsync-wc/{p-b6425ac2.entry.js → p-29c360f3.entry.js} +1 -1
- package/dist/brandsync-wc/{p-260e14de.entry.js → p-35d98580.entry.js} +1 -1
- package/dist/brandsync-wc/{p-aac6b59b.entry.js → p-39204377.entry.js} +1 -1
- package/dist/brandsync-wc/p-5a4db480.entry.js +1 -0
- package/dist/brandsync-wc/{p-8f2cfe31.entry.js → p-5d118af1.entry.js} +1 -1
- package/dist/brandsync-wc/{p-c76ca89f.entry.js → p-76d391d7.entry.js} +1 -1
- package/dist/brandsync-wc/{p-7655e741.entry.js → p-7de20530.entry.js} +1 -1
- package/dist/brandsync-wc/{p-1e9ceb9d.entry.js → p-7ea0133f.entry.js} +1 -1
- package/dist/brandsync-wc/{p-650b7eef.entry.js → p-8acb623e.entry.js} +1 -1
- package/dist/brandsync-wc/{p-f6fafbd6.entry.js → p-8ec95da5.entry.js} +1 -1
- package/dist/brandsync-wc/{p-0921ca0d.entry.js → p-94266d72.entry.js} +1 -1
- package/dist/brandsync-wc/{p-205deb32.entry.js → p-96d1ce21.entry.js} +1 -1
- package/dist/brandsync-wc/{p-67bc2ec8.entry.js → p-9ad278f4.entry.js} +1 -1
- package/dist/brandsync-wc/{p-c8480d21.entry.js → p-9f9c1a1d.entry.js} +1 -1
- package/dist/brandsync-wc/{p-ed704126.entry.js → p-b2704450.entry.js} +1 -1
- package/dist/brandsync-wc/{p-a597dc2b.entry.js → p-bcafba87.entry.js} +1 -1
- package/dist/brandsync-wc/{p-3e6d37a4.entry.js → p-bd2cc2c6.entry.js} +1 -1
- package/dist/brandsync-wc/{p-2e7586dd.entry.js → p-be675b82.entry.js} +1 -1
- package/dist/brandsync-wc/{p-6970a24c.entry.js → p-bf4a5b1b.entry.js} +1 -1
- package/dist/brandsync-wc/{p-ce08c9d7.entry.js → p-c4a16564.entry.js} +1 -1
- package/dist/brandsync-wc/{p-393efb5d.entry.js → p-cd703364.entry.js} +1 -1
- package/dist/brandsync-wc/{p-c7b9a5c7.entry.js → p-d589fa72.entry.js} +1 -1
- package/dist/brandsync-wc/{p-03f9fd54.entry.js → p-d5d15d9f.entry.js} +1 -1
- package/dist/brandsync-wc/{p-41732f18.entry.js → p-e58b1dbb.entry.js} +1 -1
- package/dist/brandsync-wc/{p-17dbd4b3.entry.js → p-eae7587e.entry.js} +1 -1
- package/dist/brandsync-wc/{p-cff188cb.entry.js → p-f196642a.entry.js} +1 -1
- package/dist/cjs/brandsync-wc.cjs.js +1 -1
- package/dist/cjs/bs-ai-disclaimer.cjs.entry.js +1 -1
- package/dist/cjs/bs-ai-greeting.cjs.entry.js +1 -1
- package/dist/cjs/bs-ai-thinking.cjs.entry.js +1 -1
- package/dist/cjs/bs-attachment-list.cjs.entry.js +1 -1
- package/dist/cjs/bs-breadcrumbs.cjs.entry.js +1 -1
- package/dist/cjs/bs-button-skeleton.cjs.entry.js +1 -1
- package/dist/cjs/bs-chatbot-feedback.cjs.entry.js +1 -1
- package/dist/cjs/bs-chatbot-header.cjs.entry.js +1 -1
- package/dist/cjs/bs-chatbot-response-action.cjs.entry.js +1 -1
- package/dist/cjs/bs-chatbot-sources-drawer.cjs.entry.js +1 -1
- package/dist/cjs/bs-chatbot-suggestion-button.cjs.entry.js +1 -1
- package/dist/cjs/bs-checkbox-skeleton.cjs.entry.js +1 -1
- package/dist/cjs/bs-inline-tab.cjs.entry.js +1 -1
- package/dist/cjs/bs-input.cjs.entry.js +2 -2
- package/dist/cjs/bs-menu-item.cjs.entry.js +1 -1
- package/dist/cjs/bs-menu.cjs.entry.js +1 -1
- package/dist/cjs/bs-navigation-drawer-item.cjs.entry.js +1 -1
- package/dist/cjs/bs-navigation-drawer.cjs.entry.js +1 -1
- package/dist/cjs/bs-pagination.cjs.entry.js +1 -1
- package/dist/cjs/bs-progress-linear.cjs.entry.js +65 -0
- package/dist/cjs/bs-progress.cjs.entry.js +69 -0
- package/dist/cjs/bs-radio.cjs.entry.js +1 -1
- package/dist/cjs/bs-slider.cjs.entry.js +1 -1
- package/dist/cjs/bs-snackbar.cjs.entry.js +1 -1
- package/dist/cjs/bs-source-link.cjs.entry.js +2 -2
- package/dist/cjs/bs-stepper-step.cjs.entry.js +1 -1
- package/dist/cjs/bs-stepper.cjs.entry.js +1 -1
- package/dist/cjs/bs-switch.cjs.entry.js +1 -1
- package/dist/cjs/bs-tab.cjs.entry.js +1 -1
- package/dist/cjs/bs-tabs.cjs.entry.js +1 -1
- package/dist/cjs/bs-toast.cjs.entry.js +1 -1
- package/dist/cjs/bs-tooltip.cjs.entry.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +2 -0
- package/dist/collection/components/bs-ai-disclaimer/bs-ai-disclaimer.js +1 -1
- package/dist/collection/components/bs-ai-greeting/bs-ai-greeting.js +1 -1
- package/dist/collection/components/bs-ai-thinking/bs-ai-thinking.js +1 -1
- package/dist/collection/components/bs-attachment-list/bs-attachment-list.js +1 -1
- package/dist/collection/components/bs-breadcrumb/bs-breadcrumbs/bs-breadcrumbs.js +1 -1
- package/dist/collection/components/bs-button-skeleton/bs-button-skeleton.js +1 -1
- package/dist/collection/components/bs-chatbot-feedback/bs-chatbot-feedback.js +1 -1
- package/dist/collection/components/bs-chatbot-header/bs-chatbot-header.js +1 -1
- package/dist/collection/components/bs-chatbot-response-action/bs-chatbot-response-action.js +1 -1
- package/dist/collection/components/bs-chatbot-sources-drawer/bs-chatbot-sources-drawer.js +1 -1
- package/dist/collection/components/bs-chatbot-suggestion-button/bs-chatbot-suggestion-button.js +1 -1
- package/dist/collection/components/bs-checkbox/bs-checkbox-skeleton/bs-checkbox-skeleton.js +1 -1
- package/dist/collection/components/bs-input/bs-input.js +2 -2
- package/dist/collection/components/bs-menu/bs-menu.js +1 -1
- package/dist/collection/components/bs-menu-item/bs-menu-item.js +1 -1
- package/dist/collection/components/bs-pagination/bs-pagination.js +1 -1
- package/dist/collection/components/bs-progress/bs-progress.cmp.test.js +96 -0
- package/dist/collection/components/bs-progress/bs-progress.css +119 -0
- package/dist/collection/components/bs-progress/bs-progress.js +212 -0
- package/dist/collection/components/bs-progress/bs-progress.stories.js +72 -0
- package/dist/collection/components/bs-progress-linear/bs-progress-linear.cmp.test.js +92 -0
- package/dist/collection/components/bs-progress-linear/bs-progress-linear.css +108 -0
- package/dist/collection/components/bs-progress-linear/bs-progress-linear.js +192 -0
- package/dist/collection/components/bs-progress-linear/bs-progress-linear.stories.js +66 -0
- package/dist/collection/components/bs-radio/bs-radio.js +1 -1
- package/dist/collection/components/bs-slider/bs-slider.js +1 -1
- package/dist/collection/components/bs-snackbar/bs-snackbar.js +1 -1
- package/dist/collection/components/bs-source-link/bs-source-link.js +2 -2
- package/dist/collection/components/bs-stepper/bs-stepper/bs-stepper.js +1 -1
- package/dist/collection/components/bs-stepper/bs-stepper-step/bs-stepper-step.js +1 -1
- package/dist/collection/components/bs-switch/bs-switch.js +1 -1
- package/dist/collection/components/bs-tab/bs-inline-tab/bs-inline-tab.js +1 -1
- package/dist/collection/components/bs-tab/bs-tab/bs-tab.js +1 -1
- package/dist/collection/components/bs-tab/bs-tabs/bs-tabs.js +1 -1
- package/dist/collection/components/bs-toast/bs-toast.js +1 -1
- package/dist/collection/components/bs-tooltip/bs-tooltip.js +1 -1
- package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.js +1 -1
- package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer-item/bs-navigation-drawer-item.js +1 -1
- package/dist/components/bs-ai-disclaimer.js +1 -1
- package/dist/components/bs-ai-greeting.js +1 -1
- package/dist/components/bs-ai-thinking.js +1 -1
- package/dist/components/bs-attachment-list.js +1 -1
- package/dist/components/bs-breadcrumb-overflow.js +1 -1
- package/dist/components/bs-breadcrumbs.js +1 -1
- package/dist/components/bs-button-skeleton.js +1 -1
- package/dist/components/bs-chatbot-feedback.js +1 -1
- package/dist/components/bs-chatbot-header.js +1 -1
- package/dist/components/bs-chatbot-response-action.js +1 -1
- package/dist/components/bs-chatbot-sources-drawer.js +1 -1
- package/dist/components/bs-chatbot-suggestion-button.js +1 -1
- package/dist/components/bs-checkbox-skeleton.js +1 -1
- package/dist/components/bs-inline-tab.js +1 -1
- package/dist/components/bs-input.js +1 -1
- package/dist/components/bs-menu-item.js +1 -1
- package/dist/components/bs-menu.js +1 -1
- package/dist/components/bs-navigation-drawer-item.js +1 -1
- package/dist/components/bs-navigation-drawer.js +1 -1
- package/dist/components/bs-pagination.js +1 -1
- package/dist/components/bs-progress-linear.d.ts +11 -0
- package/dist/components/bs-progress-linear.js +1 -0
- package/dist/components/bs-progress.d.ts +11 -0
- package/dist/components/bs-progress.js +1 -0
- package/dist/components/bs-radio.js +1 -1
- package/dist/components/bs-slider.js +1 -1
- package/dist/components/bs-snackbar.js +1 -1
- package/dist/components/bs-source-link.js +1 -1
- package/dist/components/bs-stepper-step.js +1 -1
- package/dist/components/bs-stepper.js +1 -1
- package/dist/components/bs-switch.js +1 -1
- package/dist/components/bs-tab.js +1 -1
- package/dist/components/bs-tabs.js +1 -1
- package/dist/components/bs-toast.js +1 -1
- package/dist/components/bs-tooltip.js +1 -1
- package/dist/components/{p-BlCziuES.js → p-BIgPiuc-.js} +1 -1
- package/dist/components/{p-Bg98eW9H.js → p-BUtz3sub.js} +1 -1
- package/dist/components/{p-BOP5EJrQ.js → p-Rn1IWs8l.js} +1 -1
- package/dist/esm/brandsync-wc.js +1 -1
- package/dist/esm/bs-ai-disclaimer.entry.js +1 -1
- package/dist/esm/bs-ai-greeting.entry.js +1 -1
- package/dist/esm/bs-ai-thinking.entry.js +1 -1
- package/dist/esm/bs-attachment-list.entry.js +1 -1
- package/dist/esm/bs-breadcrumbs.entry.js +1 -1
- package/dist/esm/bs-button-skeleton.entry.js +1 -1
- package/dist/esm/bs-chatbot-feedback.entry.js +1 -1
- package/dist/esm/bs-chatbot-header.entry.js +1 -1
- package/dist/esm/bs-chatbot-response-action.entry.js +1 -1
- package/dist/esm/bs-chatbot-sources-drawer.entry.js +1 -1
- package/dist/esm/bs-chatbot-suggestion-button.entry.js +1 -1
- package/dist/esm/bs-checkbox-skeleton.entry.js +1 -1
- package/dist/esm/bs-inline-tab.entry.js +1 -1
- package/dist/esm/bs-input.entry.js +2 -2
- package/dist/esm/bs-menu-item.entry.js +1 -1
- package/dist/esm/bs-menu.entry.js +1 -1
- package/dist/esm/bs-navigation-drawer-item.entry.js +1 -1
- package/dist/esm/bs-navigation-drawer.entry.js +1 -1
- package/dist/esm/bs-pagination.entry.js +1 -1
- package/dist/esm/bs-progress-linear.entry.js +63 -0
- package/dist/esm/bs-progress.entry.js +67 -0
- package/dist/esm/bs-radio.entry.js +1 -1
- package/dist/esm/bs-slider.entry.js +1 -1
- package/dist/esm/bs-snackbar.entry.js +1 -1
- package/dist/esm/bs-source-link.entry.js +2 -2
- package/dist/esm/bs-stepper-step.entry.js +1 -1
- package/dist/esm/bs-stepper.entry.js +1 -1
- package/dist/esm/bs-switch.entry.js +1 -1
- package/dist/esm/bs-tab.entry.js +1 -1
- package/dist/esm/bs-tabs.entry.js +1 -1
- package/dist/esm/bs-toast.entry.js +1 -1
- package/dist/esm/bs-tooltip.entry.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/bs-progress/bs-progress.cmp.test.d.ts +1 -0
- package/dist/types/components/bs-progress/bs-progress.d.ts +46 -0
- package/dist/types/components/bs-progress/bs-progress.stories.d.ts +18 -0
- package/dist/types/components/bs-progress-linear/bs-progress-linear.cmp.test.d.ts +1 -0
- package/dist/types/components/bs-progress-linear/bs-progress-linear.d.ts +50 -0
- package/dist/types/components/bs-progress-linear/bs-progress-linear.stories.d.ts +17 -0
- package/dist/types/components.d.ts +241 -0
- package/package.json +1 -1
- package/dist/brandsync-wc/p-04d6aa95.entry.js +0 -1
|
@@ -69,7 +69,7 @@ const BsNavigationDrawer = class {
|
|
|
69
69
|
this.bsSearchClick.emit();
|
|
70
70
|
};
|
|
71
71
|
render() {
|
|
72
|
-
return (h("nav", { key: '
|
|
72
|
+
return (h("nav", { key: '5f9142beebc8a91756b5b081b8f5a1dec70cd0c4', class: "bs-navigation-drawer", "aria-label": this.heading }, this.showLogo && (h("div", { key: '5d09b42c51836937ff0abf74e82504a8bde1b6ff', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--full" }, h("bs-logo", { key: '3b4ada54adc5fcdceba8a78e502d2ed2b1f930b9', variant: "full", background: this.logoBackground }))), this.showLogo && (h("div", { key: 'b59e5b16a7dbf6fbc5af144d8b4f1d70be68d060', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--mark" }, h("bs-logo", { key: '4c3192c228124af2f8413852e151977d4ad2427e', variant: "mark", background: this.logoBackground }))), h("div", { key: 'f2d8da6abcc2b1108df1b82cb829573e450aacc9', class: "bs-navigation-drawer__title-row" }, h("span", { key: '11362835e58c41c5d4761218cf3b6fc1e902226f', part: "title", class: "bs-navigation-drawer__title" }, this.heading), this.collapsible && (h("button", { key: 'a00926b34b406edde376ebf671f9fad790368c14', type: "button", part: "collapse", class: "bs-navigation-drawer__collapse", "aria-label": this.collapsed ? 'Expand' : 'Collapse', "aria-pressed": this.collapsed ? 'true' : 'false', onClick: this.onCollapseClick }, h(CaretLeftIcon, { key: '77f3c08e3d4fae996c99d940cce50d8757cd4c64' })))), h("div", { key: '947e14756be1455fe223e4e5f2601f1be7bc8c52', part: "search", class: "bs-navigation-drawer__search" }, h("slot", { key: '79776006ffd5daa2b523c9827d8887abe2db0175', name: "search" })), h("button", { key: '427a7aa68d05f6d34d903ed93b2e1376e96a5fcb', type: "button", part: "search-trigger", class: "bs-navigation-drawer__search-trigger", "aria-label": "Search", onClick: this.onSearchTriggerClick }, h(SearchIcon, { key: '28e2055df8fc91f43ed2df1e061d6e3b43538f31' })), h("div", { key: 'b569bd43632d530ea8b6d898b636460f4e8f9868', part: "items", class: "bs-navigation-drawer__items" }, h("slot", { key: '62feb03ea99fd499dd864cb931ccd44371a76ea8' }))));
|
|
73
73
|
}
|
|
74
74
|
static get watchers() { return {
|
|
75
75
|
"collapsed": [{
|
|
@@ -68,7 +68,7 @@ const BsPagination = class {
|
|
|
68
68
|
}
|
|
69
69
|
render() {
|
|
70
70
|
const pageList = this.getPageList();
|
|
71
|
-
return (h("nav", { key: '
|
|
71
|
+
return (h("nav", { key: '1cd9579d68bedee2d0e6e04a96a9ac3230ce21b9', "aria-label": "Pagination" }, h("ul", { key: 'c279f92f1f08f17724a59ddd9a9ff6086307deb1', part: "list", class: "bs-pagination__list" }, h("li", { key: 'cec04dcf7f6e1f6be5774b3a68aacf7f2ec27224', part: "item", class: "bs-pagination__item" }, h("button", { key: 'ed917eaac4275e19de2f9bc2e2cfde4ce03fb93e', part: "prev", type: "button", class: "bs-pagination__control", "aria-label": this.previousLabel, disabled: this.currentPage <= 1, onClick: () => this.goToPage(this.currentPage - 1) }, h(ChevronLeftIcon, { key: 'd0448255baeaceb830aa1b4eefc0d065c5730b2e' }))), pageList.map((item, index) => item === 'ellipsis' ? (h("li", { part: "item", class: "bs-pagination__item", key: `ellipsis-${index}` }, h("span", { part: "ellipsis", class: "bs-pagination__ellipsis", "aria-hidden": "true" }, h(EllipsisIcon, null)))) : (h("li", { part: "item", class: "bs-pagination__item", key: item }, h("button", { part: item === this.currentPage ? 'page current' : 'page', type: "button", class: `bs-pagination__control bs-pagination__page ${item === this.currentPage ? 'bs-pagination__page--current' : ''}`, "aria-label": `Go to page ${item}`, "aria-current": item === this.currentPage ? 'page' : undefined, onClick: () => this.goToPage(item) }, item)))), h("li", { key: 'b0acab6503ad12774d3e1fdc9db75a5403439b49', part: "item", class: "bs-pagination__item" }, h("button", { key: 'e8f1fafeb042983b5d2eedbfd9a145337cb91989', part: "next", type: "button", class: "bs-pagination__control", "aria-label": this.nextLabel, disabled: this.currentPage >= this.safeTotalPages, onClick: () => this.goToPage(this.currentPage + 1) }, h(ChevronRightIcon, { key: '4ee1e79e9f3fd68344e871bb376b6027eb50808e' }))))));
|
|
72
72
|
}
|
|
73
73
|
};
|
|
74
74
|
function range(start, end) {
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { r as registerInstance, a as getElement, h } from './index-CvfB8CQv.js';
|
|
2
|
+
|
|
3
|
+
const bsProgressLinearCss = () => `:host{display:flex;--bs-progress-linear-gap:var(--bs-spacing-100);--bs-progress-linear-track:var(--bs-surface-container);--bs-progress-linear-fill:var(--bs-color-primary-default);--bs-progress-linear-radius:120px;--bs-progress-linear-height-sm:4px;--bs-progress-linear-height-lg:8px;--bs-progress-linear-label-color:var(--bs-text-default);--bs-progress-linear-label-font-size:var(--bs-fontsize-body-md);--bs-progress-linear-label-line-height:var(--bs-line-height-body-md);--bs-progress-linear-transition-duration:0.3s;--bs-progress-linear-slide-duration:1.6s}.bs-progress-linear{display:flex;flex-direction:column;width:100%;gap:var(--bs-progress-linear-gap);font-family:inherit}.bs-progress-linear__track{position:relative;width:100%;border-radius:var(--bs-progress-linear-radius);background:var(--bs-progress-linear-track);overflow:hidden}.bs-progress-linear__track--small{height:var(--bs-progress-linear-height-sm)}.bs-progress-linear__track--large{height:var(--bs-progress-linear-height-lg)}.bs-progress-linear__fill{height:100%;border-radius:var(--bs-progress-linear-radius);background:var(--bs-progress-linear-fill);transition:width var(--bs-progress-linear-transition-duration) ease}.bs-progress-linear__fill--indeterminate{position:absolute;top:0;left:0;width:24%;min-width:80px;background:linear-gradient(90deg, transparent 0%, var(--bs-progress-linear-fill) 50%, transparent 100%);animation:bs-progress-linear-slide var(--bs-progress-linear-slide-duration) ease-in-out infinite}@keyframes bs-progress-linear-slide{from{transform:translateX(-100%)}to{transform:translateX(250%)}}@media (prefers-reduced-motion: reduce){.bs-progress-linear__fill--indeterminate{animation-duration:calc(var(--bs-progress-linear-slide-duration) * 4)}}.bs-progress-linear__label{color:var(--bs-progress-linear-label-color);font-size:var(--bs-progress-linear-label-font-size);line-height:calc(var(--bs-progress-linear-label-line-height) * 1px)}`;
|
|
4
|
+
|
|
5
|
+
const BsProgressLinear = class {
|
|
6
|
+
constructor(hostRef) {
|
|
7
|
+
registerInstance(this, hostRef);
|
|
8
|
+
}
|
|
9
|
+
get el() { return getElement(this); }
|
|
10
|
+
/** Whether the default slot currently has any real (non-whitespace) content -- the label
|
|
11
|
+
* wrapper is only rendered when `showLabel` is true AND slotted content exists, so an empty
|
|
12
|
+
* label never reserves visual space/line-height for nothing. Recomputed on `slotchange`. */
|
|
13
|
+
hasLabelContent = false;
|
|
14
|
+
/** `determinate` renders a static fill reflecting `value`; `indeterminate` renders a
|
|
15
|
+
* continuously sliding gradient bar and ignores `value`. */
|
|
16
|
+
type = 'determinate';
|
|
17
|
+
/** Bar height: `small` (4px) or `large` (8px). */
|
|
18
|
+
size = 'large';
|
|
19
|
+
/** Progress percentage, `0`-`100`. Only meaningful for `type="determinate"` -- ignored (and
|
|
20
|
+
* never rendered) for `type="indeterminate"`. Out-of-range values are clamped defensively. */
|
|
21
|
+
value = 0;
|
|
22
|
+
/** Shows the slotted label below the bar. When `false`, or when no content is slotted, the
|
|
23
|
+
* label wrapper isn't rendered at all. Defaults to `true`. */
|
|
24
|
+
showLabel = true;
|
|
25
|
+
get clampedValue() {
|
|
26
|
+
return Math.min(100, Math.max(0, this.value));
|
|
27
|
+
}
|
|
28
|
+
render() {
|
|
29
|
+
const isDeterminate = this.type === 'determinate';
|
|
30
|
+
const value = this.clampedValue;
|
|
31
|
+
return (h("div", { key: '5c8e982bad03ed994700f3021a2304f4b51b3f4a', part: "container", class: "bs-progress-linear" }, h("div", { key: 'e2327781cdfbec66cee4a09a0d518cd71f9a8fb7', part: "track", class: `bs-progress-linear__track bs-progress-linear__track--${this.size}`, role: "progressbar", "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (h("div", { part: "fill", class: "bs-progress-linear__fill", style: { width: `${value}%` } })) : (
|
|
32
|
+
// Figma's indeterminate bar is a soft "comet" gradient segment (transparent -> blue ->
|
|
33
|
+
// transparent) sliding left-to-right across the track's full width in a loop -- the
|
|
34
|
+
// same fade concept as bs-progress's indeterminate ring's conic-gradient comet tail,
|
|
35
|
+
// but along a straight line via a linear-gradient + `transform: translateX(...)`
|
|
36
|
+
// keyframe animation instead of a rotating conic-gradient.
|
|
37
|
+
h("div", { part: "fill", class: "bs-progress-linear__fill bs-progress-linear__fill--indeterminate" }))), this.showLabel && this.hasLabelContent && (h("span", { key: 'adbb34071dedfe8e164f1cf208e95c7f1f241399', part: "label", class: "bs-progress-linear__label" }, h("slot", { key: '74020827d39b5d7d38feee377058c434f7e78f11' })))));
|
|
38
|
+
}
|
|
39
|
+
// The default slot's assigned content lives in the host's light DOM regardless of whether a
|
|
40
|
+
// <slot> is currently rendered in the shadow tree, so this can be computed directly from the
|
|
41
|
+
// host's childNodes -- no need to render an always-present hidden <slot> just to observe it.
|
|
42
|
+
componentWillLoad() {
|
|
43
|
+
this.updateLabelVisibility();
|
|
44
|
+
this.mutationObserver = new MutationObserver(() => this.updateLabelVisibility());
|
|
45
|
+
this.mutationObserver.observe(this.el, { childList: true, characterData: true, subtree: true });
|
|
46
|
+
}
|
|
47
|
+
disconnectedCallback() {
|
|
48
|
+
this.mutationObserver?.disconnect();
|
|
49
|
+
}
|
|
50
|
+
mutationObserver;
|
|
51
|
+
updateLabelVisibility() {
|
|
52
|
+
this.hasLabelContent = Array.from(this.el.childNodes).some(node => {
|
|
53
|
+
if (node.nodeType === Node.TEXT_NODE)
|
|
54
|
+
return (node.textContent ?? '').trim().length > 0;
|
|
55
|
+
if (node.nodeType === Node.ELEMENT_NODE)
|
|
56
|
+
return true;
|
|
57
|
+
return false;
|
|
58
|
+
});
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
BsProgressLinear.style = bsProgressLinearCss();
|
|
62
|
+
|
|
63
|
+
export { BsProgressLinear as bs_progress_linear };
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { r as registerInstance, h } from './index-CvfB8CQv.js';
|
|
2
|
+
|
|
3
|
+
const bsProgressCss = () => `:host{display:inline-flex;--bs-progress-gap:var(--bs-spacing-100);--bs-progress-track:var(--bs-neutral-200);--bs-progress-arc:var(--bs-color-primary-default);--bs-progress-label-color:var(--bs-color-primary-default);--bs-progress-label-font-size-sm:var(--bs-fontsize-caption-md);--bs-progress-label-line-height-sm:var(--bs-line-height-caption-md);--bs-progress-label-font-size-lg:var(--bs-fontsize-body-md);--bs-progress-label-line-height-lg:var(--bs-line-height-body-md);--bs-progress-label-font-weight:var(--bs-font-weight-medium);--bs-progress-spin-duration:1.4s}.bs-progress{display:inline-flex;flex-direction:column;align-items:center;gap:var(--bs-progress-gap);font-family:inherit}.bs-progress__box{position:relative;display:inline-flex}.bs-progress__ring{transform:rotate(-90deg);overflow:visible}.bs-progress__track{stroke:var(--bs-progress-track)}.bs-progress__arc{stroke:var(--bs-progress-arc);transition:stroke-dashoffset 0.3s ease}.bs-progress__spinner{width:100%;height:100%;border-radius:50%;background:conic-gradient(from 0deg, transparent 0deg, var(--bs-progress-arc) var(--bs-progress-spinner-sweep), transparent var(--bs-progress-spinner-sweep));-webkit-mask:radial-gradient( farthest-side, transparent calc(100% - var(--bs-progress-spinner-stroke-width) - 1px), #000 calc(100% - var(--bs-progress-spinner-stroke-width)) );mask:radial-gradient( farthest-side, transparent calc(100% - var(--bs-progress-spinner-stroke-width) - 1px), #000 calc(100% - var(--bs-progress-spinner-stroke-width)) );animation:bs-progress-spin var(--bs-progress-spin-duration) linear infinite}@keyframes bs-progress-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.bs-progress__spinner{animation-duration:calc(var(--bs-progress-spin-duration) * 4)}}.bs-progress__label{color:var(--bs-progress-label-color);font-weight:var(--bs-progress-label-font-weight);text-align:center}.bs-progress__label--small,.bs-progress__label--medium{font-size:var(--bs-progress-label-font-size-sm);line-height:calc(var(--bs-progress-label-line-height-sm) * 1px)}.bs-progress__label--large{font-size:var(--bs-progress-label-font-size-lg);line-height:calc(var(--bs-progress-label-line-height-lg) * 1px)}`;
|
|
4
|
+
|
|
5
|
+
// Diameter in px per `size` -- matches the Figma spec's three fixed sizes exactly.
|
|
6
|
+
const DIAMETERS = {
|
|
7
|
+
small: 44,
|
|
8
|
+
medium: 48,
|
|
9
|
+
large: 64,
|
|
10
|
+
};
|
|
11
|
+
// How much of the ring the indeterminate sweep covers before fading back to transparent -- the
|
|
12
|
+
// remainder (to 360deg) is the visible "gap" in the ring. Matches the Figma mock's proportions.
|
|
13
|
+
const INDETERMINATE_SWEEP_DEGREES = 300;
|
|
14
|
+
const BsProgress = class {
|
|
15
|
+
constructor(hostRef) {
|
|
16
|
+
registerInstance(this, hostRef);
|
|
17
|
+
}
|
|
18
|
+
/** `determinate` renders a static arc sweep reflecting `value` (with an optional percentage
|
|
19
|
+
* label); `indeterminate` renders a continuously spinning ring and never shows a label, since
|
|
20
|
+
* there's no known percentage to report. */
|
|
21
|
+
type = 'determinate';
|
|
22
|
+
/** Overall diameter: `small` (44px), `medium` (48px), or `large` (64px). */
|
|
23
|
+
size = 'small';
|
|
24
|
+
/** Ring stroke width in px -- `4` or `8`, matching Figma's two stroke-width variants. A number,
|
|
25
|
+
* not the Figma label's literal `"4 px"` string. */
|
|
26
|
+
strokeWidth = 4;
|
|
27
|
+
/** Progress percentage, `0`-`100`. Only meaningful for `type="determinate"` -- ignored (and
|
|
28
|
+
* never rendered) for `type="indeterminate"`. Out-of-range values are clamped defensively. */
|
|
29
|
+
value = 0;
|
|
30
|
+
/** Shows the `${value}%` label below the ring. Only takes effect for `type="determinate"` --
|
|
31
|
+
* `indeterminate` never shows a label regardless of this prop, since there's no percentage to
|
|
32
|
+
* show. Defaults to `true`. */
|
|
33
|
+
showLabel = true;
|
|
34
|
+
get clampedValue() {
|
|
35
|
+
return Math.min(100, Math.max(0, this.value));
|
|
36
|
+
}
|
|
37
|
+
get diameter() {
|
|
38
|
+
return DIAMETERS[this.size];
|
|
39
|
+
}
|
|
40
|
+
get radius() {
|
|
41
|
+
return (this.diameter - this.strokeWidth) / 2;
|
|
42
|
+
}
|
|
43
|
+
get circumference() {
|
|
44
|
+
return 2 * Math.PI * this.radius;
|
|
45
|
+
}
|
|
46
|
+
render() {
|
|
47
|
+
const diameter = this.diameter;
|
|
48
|
+
const radius = this.radius;
|
|
49
|
+
const circumference = this.circumference;
|
|
50
|
+
const isDeterminate = this.type === 'determinate';
|
|
51
|
+
const value = this.clampedValue;
|
|
52
|
+
const dashOffset = circumference * (1 - value / 100);
|
|
53
|
+
return (h("div", { key: '359251959b842695100d52b8fb4707708ed8fb5d', part: "container", class: "bs-progress" }, h("div", { key: '397c8cecc86bc564c9c7e4fadbbbcf05bae71c58', class: "bs-progress__box", style: { width: `${diameter}px`, height: `${diameter}px` }, role: "progressbar", "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (h("svg", { class: "bs-progress__ring", width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}` }, h("circle", { part: "track", class: "bs-progress__track", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none" }), h("circle", { part: "arc", class: "bs-progress__arc", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none", "stroke-linecap": "round", "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))) : (
|
|
54
|
+
// Figma's indeterminate ring is a fading "comet tail" (transparent -> solid color),
|
|
55
|
+
// not a flat-colored partial arc -- SVG has no angular/conic gradient primitive, so a
|
|
56
|
+
// CSS conic-gradient (color varying by angle) + a radial-gradient mask (carving the
|
|
57
|
+
// gradient disc down to a ring of exactly `strokeWidth`) is used instead of the
|
|
58
|
+
// stroke-dasharray technique the determinate ring uses.
|
|
59
|
+
h("div", { part: "arc", class: "bs-progress__spinner", style: {
|
|
60
|
+
'--bs-progress-spinner-stroke-width': `${this.strokeWidth}px`,
|
|
61
|
+
'--bs-progress-spinner-sweep': `${INDETERMINATE_SWEEP_DEGREES}deg`,
|
|
62
|
+
} }))), isDeterminate && this.showLabel && (h("span", { key: '90b9d66a1e5cb7c8bc392e99636386c765e6479c', part: "label", class: `bs-progress__label bs-progress__label--${this.size}` }, value, "%"))));
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
BsProgress.style = bsProgressCss();
|
|
66
|
+
|
|
67
|
+
export { BsProgress as bs_progress };
|
|
@@ -38,7 +38,7 @@ const BsRadio = class {
|
|
|
38
38
|
}
|
|
39
39
|
};
|
|
40
40
|
render() {
|
|
41
|
-
return (h("label", { key: '
|
|
41
|
+
return (h("label", { key: '161bfbd0b2275f33cb8fbc5b3e4851ec30edbbce', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: '264d57cbd6c4f0052d8db28fb0fb11e274448b9b', class: "bs-radio__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("span", { key: 'c7caedd6dfad0b5808a6e1bea575c4f958d2ea0b', class: "bs-radio__hit-area" }, h("span", { key: '1192afc8c59dce5fdf5c226dd560e4885175a73c', class: "bs-radio__state-layer" }, h("span", { key: '7869c22cde3a99465500cc7cb52b281189db6f94', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: '8f9cce005680970137aa380f64792a877a28fee6', part: "dot", class: "bs-radio__dot" })))), h("span", { key: 'a1539f067d44caf5988a1a86755bf47d9738fe08', part: "label", class: "bs-radio__label" }, h("slot", { key: 'be0394e88cc984e2d558881be9305753fec90ddc' }))));
|
|
42
42
|
}
|
|
43
43
|
static get delegatesFocus() { return true; }
|
|
44
44
|
};
|
|
@@ -180,7 +180,7 @@ const BsSlider = class {
|
|
|
180
180
|
render() {
|
|
181
181
|
const isRange = this.type === 'range';
|
|
182
182
|
const rootClasses = ['bs-slider', this.disabled ? 'bs-slider--disabled' : ''].filter(Boolean).join(' ');
|
|
183
|
-
return (h("div", { key: '
|
|
183
|
+
return (h("div", { key: '1cbd5e53dd0d8fb327d8584428dd21332661b5e2', class: rootClasses }, this.showLabel && (h("div", { key: '3634d341e67ebc1bfba90b86b104fa5553d67d1d', class: "bs-slider__header" }, h("span", { key: '3ebf6d66bd5c8e51fe9d9b42844cbfc1c45ae696', id: "bs-slider-label", part: "label", class: "bs-slider__label" }, this.label), isRange ? (h("span", { class: "bs-slider__value-fields" }, this.renderPercentField(this.percent(this.effectiveValueStart), this.onStartPercentFieldChange, this.ariaLabel ?? 'Start value'), h("span", { class: "bs-slider__separator" }, "\u2013"), this.renderPercentField(this.percent(this.effectiveValueEnd), this.onEndPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} end` : 'End value'))) : (this.renderPercentField(this.percent(this.value), this.onPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} value` : 'Value')))), h("div", { key: '874e62bf31a4fdba314c9999d15abfbf211fb5bc', class: "bs-slider__row" }, this.showLabel && (h("span", { key: 'eb26f532ddac948279faa4bc6c60d263b0538ee6', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: '01bab87bfab37495ce857bbfd16d8417aea61a61', part: "bound", class: "bs-slider__bound" }, this.max)))));
|
|
184
184
|
}
|
|
185
185
|
static get delegatesFocus() { return true; }
|
|
186
186
|
};
|
|
@@ -29,7 +29,7 @@ const BsSnackbar = class {
|
|
|
29
29
|
this.bsDismiss.emit();
|
|
30
30
|
};
|
|
31
31
|
render() {
|
|
32
|
-
return (h("div", { key: '
|
|
32
|
+
return (h("div", { key: '3251935ac23aa9157004eefdb6e324234eb6bfcb', part: "container", class: `bs-snackbar bs-snackbar--${this.variant}`, role: "status", "aria-live": this.variant === 'error' ? 'assertive' : 'polite' }, h("div", { key: 'c45e3cbe89cf2b956e46c71db87eb9644d3ef4df', class: "bs-snackbar__content" }, h("span", { key: '840a2ab80a6ff4691eb341157f8285f70310ec33', part: "icon", class: "bs-snackbar__icon", "aria-hidden": "true" }, this.loading ? h("span", { class: "bs-snackbar__spinner" }) : h(CheckCircleIcon, null)), h("span", { key: '6f947d2327529ae23c4de691ea509b39ce5e2490', part: "message", class: "bs-snackbar__message" }, h("slot", { key: '4cde5846deeb26cfb4fa134e789b641c9674618d' }))), h("div", { key: 'f5c1cc73c36ddfd5feef19fbcc24668c407cbd3d', class: "bs-snackbar__actions" }, this.actionLabel && (h("button", { key: 'ae7b54aee03e21f0d770b6440a5ef0138f835be8', part: "action", type: "button", class: "bs-snackbar__action", onClick: this.onAction }, this.actionLabel)), h("button", { key: 'f689a78a40fbd268760e9624ed0f02ba3ac71b07', part: "close", type: "button", class: "bs-snackbar__close", "aria-label": "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: 'e731694f295179bb1cf85111116e2bf8f5e83cb7' })))));
|
|
33
33
|
}
|
|
34
34
|
};
|
|
35
35
|
const CheckCircleIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M8.25 12.75L10.5 15L15.75 9.75", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
|
|
@@ -24,8 +24,8 @@ const BsSourceLink = class {
|
|
|
24
24
|
};
|
|
25
25
|
render() {
|
|
26
26
|
const inner = [
|
|
27
|
-
h("span", { key: '
|
|
28
|
-
h("span", { key: '
|
|
27
|
+
h("span", { key: '6e0bde7df2c893933c6490a995e418a43de6454f', class: "bs-source-link__left" }, h("span", { key: '9724f21e43696b3a07daabd05a348eaee96cd082', class: "bs-source-link__filename-row" }, h("span", { key: '901c8a90c0707197d0ae5f5c053f2e197683c973', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: 'ca4ecd68ec7149bfe61830b3bd75a45e7086c165', name: "icon" }, h(FileTextIcon, { key: '656b72e726370c03b271e83397666be76544eb65' }))), h("p", { key: 'c20b0bc181548a81c57364b707afba77d535d62a', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: '3178845a3c16d2ffd5fc1942806851370d966290', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: '6967d7fa214067d5e0d14123d287c4ce6cf40496', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: 'a58b3e8d2d8ef4a23c8d6155454ab5825fd737b5', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: '1701393a524375eee95905308a9b8be1b9647bc8', part: "version", class: "bs-source-link__version" }, this.version)))),
|
|
28
|
+
h("span", { key: 'a291c8de9d56e8b269660441930b4bf95977883f', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: '90a1a20ee9f84e5e339fa2a11c59691f6f45759f' })),
|
|
29
29
|
];
|
|
30
30
|
return this.href ? (h("a", { class: "bs-source-link", href: this.href, target: this.target, rel: "noopener noreferrer", onClick: this.onClick }, inner)) : (h("button", { type: "button", class: "bs-source-link", onClick: this.onClick }, inner));
|
|
31
31
|
}
|
|
@@ -32,7 +32,7 @@ const BsStepperStep = class {
|
|
|
32
32
|
}
|
|
33
33
|
render() {
|
|
34
34
|
const state = this.state;
|
|
35
|
-
return (h(Host, { key: '
|
|
35
|
+
return (h(Host, { key: '0885597069b454df03e0797e6fc3ec4bba3357b1', role: "listitem", class: `bs-stepper-step--${this.direction}` }, h("div", { key: 'e5bf87615b06b2ffd35b18329a925171c45cbf4e', class: "bs-stepper-step__top" }, h("span", { key: 'e82c4b4d88769d9301a258f9f8ba10e75aac381d', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: '61b0982711c74851add824ccb561f26711ed1162', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: 'f53ba1c507f79cac0ee4cde326c2a95580b95ea2' }), state === 'error' && h(ExclamationIcon, { key: '9671c46079a379711410c878cb520d915ff419b3' })), h("span", { key: 'af6ba4667e1237ff2ade9947a19ccea455aa1cb1', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: '337b424d21fa9ad1c1289a314d1e4aee1d868e08', class: "bs-stepper-step__connector-line" }))), h("span", { key: '265d260e904153b4875fecd899affb5e16482e52', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: '2402a6d04e7467ea9b14b86569093226253ce934', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: 'ed6b927749fb9b174bf481e862fc4109ca557e1a', part: "description", class: "bs-stepper-step__description" }, this.description)))));
|
|
36
36
|
}
|
|
37
37
|
};
|
|
38
38
|
const CheckIcon = () => (h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M2.5 9L6 12.5L14 4.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
|
|
@@ -41,7 +41,7 @@ const BsStepper = class {
|
|
|
41
41
|
});
|
|
42
42
|
}
|
|
43
43
|
render() {
|
|
44
|
-
return h("slot", { key: '
|
|
44
|
+
return h("slot", { key: 'ce510c14afc31408f1a8b04a6ab6a6bc8480dd97', onSlotchange: this.onSlotChange });
|
|
45
45
|
}
|
|
46
46
|
static get watchers() { return {
|
|
47
47
|
"currentStep": [{
|
|
@@ -46,7 +46,7 @@ const BsSwitch = class {
|
|
|
46
46
|
const knobClasses = ['bs-switch__knob', `bs-switch__knob--${this.size}`, this.disabled ? 'bs-switch__knob--disabled' : '']
|
|
47
47
|
.filter(Boolean)
|
|
48
48
|
.join(' ');
|
|
49
|
-
return (h("label", { key: '
|
|
49
|
+
return (h("label", { key: '8cc77a7334a032869209299197e49619d3ac6291', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: '2d052950431ecd2ea7dfdfef8252ef2ec5bd2dc4', class: "bs-switch__input", type: "checkbox", role: "switch", checked: this.checked, disabled: this.disabled, "aria-checked": String(this.checked), "aria-label": this.ariaLabel, onChange: this.onChange }), h("span", { key: 'f3a7f7260a0f915e22eb32408495c4e114a9bcff', part: "track", class: trackClasses }, h("span", { key: '4c59c865cca27b3d7f068a2798a5901a43b1ef40', part: "knob", class: knobClasses })), h("span", { key: '807b245462b4b44f224beb892312f914625065e6', part: "label", class: "bs-switch__label" }, h("slot", { key: '056f758a35f0a9f5392561a6a47a3f8a65c9ffc7' }))));
|
|
50
50
|
}
|
|
51
51
|
static get delegatesFocus() { return true; }
|
|
52
52
|
};
|
package/dist/esm/bs-tab.entry.js
CHANGED
|
@@ -70,7 +70,7 @@ const BsTab = class {
|
|
|
70
70
|
const iconOnly = this.hasIcon && !this.hasLabel;
|
|
71
71
|
const vertical = this.hasIcon && this.hasLabel && this.iconPosition === 'top';
|
|
72
72
|
const showBadge = this.hasBadge && !iconOnly && !vertical;
|
|
73
|
-
return (h("button", { key: '
|
|
73
|
+
return (h("button", { key: '582c9b12915fa85e4b05114e4c1d5a15ec9253d1', type: "button", part: "tab", role: "tab", class: `bs-tab ${this.selected ? 'bs-tab--selected' : ''} ${this.disabled ? 'bs-tab--disabled' : ''} ${iconOnly ? 'bs-tab--icon-only' : ''} ${vertical ? 'bs-tab--vertical' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: 'd2e55d29b23478056bb3f24a00ec1237fa9e0a9d', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: '767704d1770a124686fa503c0ca19b651412c07f', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '8d4f45d058cbbd5bc64a03862048faaaa1effdf3', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: '45805bbb18a4a8a39b01e1bc81a37a2b09449d3c', onSlotchange: this.onLabelSlotchange })), h("span", { key: '27a3379b320a5ac2f2a437c8ca980989cf5ed239', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: '2bbd98cc2c68472a9399b3c5ff67ddbeae441949', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: '3f75545064c2114483382e1ee65e23f5aad33ccd', part: "indicator", class: "bs-tab__indicator" })));
|
|
74
74
|
}
|
|
75
75
|
};
|
|
76
76
|
BsTab.style = bsTabCss();
|
|
@@ -29,7 +29,7 @@ const BsTabs = class {
|
|
|
29
29
|
}
|
|
30
30
|
render() {
|
|
31
31
|
const vertical = this.orientation === 'vertical';
|
|
32
|
-
return (h("div", { key: '
|
|
32
|
+
return (h("div", { key: 'a2e67e62af5aec684a0b79e06905e1d2dbc1d469', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: '6b3b19d55ff342c65ef321e6556cf56701dc18a0' })));
|
|
33
33
|
}
|
|
34
34
|
};
|
|
35
35
|
BsTabs.style = bsTabsCss();
|
|
@@ -17,7 +17,7 @@ const BsToast = class {
|
|
|
17
17
|
this.bsDismiss.emit();
|
|
18
18
|
};
|
|
19
19
|
render() {
|
|
20
|
-
return (h("div", { key: '
|
|
20
|
+
return (h("div", { key: '601af8a97314bc7d5119f0e3d333bf7361253c82', part: "container", class: `bs-toast bs-toast--${this.state}`, role: "status", "aria-live": this.state === 'error' ? 'assertive' : 'polite' }, h("div", { key: '3d497021797f520831a4ee896e1a17ccf980c5ce', class: "bs-toast__content" }, h("span", { key: 'c2c881ca3eef65884914f18b5dbed59f20067650', part: "icon", class: "bs-toast__icon", "aria-hidden": "true" }, h(StateIcon, { key: '0b02a6e4ed1cc0421659cba0479b05ecb638749d', state: this.state })), h("span", { key: '138aedff518384bf0ee185711ba1b2194c71c8e3', part: "message", class: "bs-toast__message" }, h("slot", { key: 'd1e46ef85c2101904234fce982d1f45b8b799ddb' }))), h("div", { key: 'eeaa1695bb943483df6b2c1f91ea99aebf48587b', class: "bs-toast__actions" }, h("button", { key: '300a542e27c8c7c92a51cc25def8a82046fd2ad1', part: "close", type: "button", class: "bs-toast__close", "aria-label": "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: '547514944e5c0142f11eec104ac8fe3f161a8b62' })))));
|
|
21
21
|
}
|
|
22
22
|
};
|
|
23
23
|
const StateIcon = ({ state }) => {
|
|
@@ -14,7 +14,7 @@ const BsTooltip = class {
|
|
|
14
14
|
*/
|
|
15
15
|
placement = 'top';
|
|
16
16
|
render() {
|
|
17
|
-
return (h("div", { key: '
|
|
17
|
+
return (h("div", { key: '062ea3196a5a89090efda9c1740d797302b7e71a', class: "bs-tooltip" }, h("span", { key: 'ede20a2edfd834182b46d143d682cdd994ba74f3', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: '05f0ead68e3e70c7ead8c7f0b275e5903ffb73ba', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: '0af70f3d08a96110c684a570c03f758cb9388774' }))));
|
|
18
18
|
}
|
|
19
19
|
};
|
|
20
20
|
BsTooltip.style = bsTooltipCss();
|
package/dist/esm/loader.js
CHANGED
|
@@ -4,7 +4,7 @@ export { s as setNonce } from './index-CvfB8CQv.js';
|
|
|
4
4
|
const defineCustomElements = async (win, options) => {
|
|
5
5
|
if (typeof window === 'undefined') return undefined;
|
|
6
6
|
await globalScripts();
|
|
7
|
-
return bootstrapLazy([["bs-input",[[785,"bs-input",{"value":[1025],"type":[1],"label":[1],"placeholder":[1],"description":[1],"error":[1],"disabled":[4],"required":[4],"step":[2],"min":[2],"max":[2],"options":[16],"rows":[2],"chips":[16],"titleOptions":[16],"initialsTitle":[1,"initials-title"],"countryOptions":[16],"country":[1],"length":[2],"open":[1540],"hasIcon":[32],"hasEndIcon":[32],"passwordVisible":[32],"chipDraft":[32]},[[0,"keydown","onHostKeydown"],[0,"focusout","onHostFocusOut"]]]]],["bs-attachment",[[513,"bs-attachment",{"type":[1],"fileName":[1,"file-name"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"loading":[4],"removable":[4]}]]],["bs-breadcrumb-overflow",[[513,"bs-breadcrumb-overflow",{"items":[16],"overflowLabel":[1,"overflow-label"],"size":[513],"open":[32]},[[0,"keydown","onHostKeydown"],[0,"focusout","onHostFocusOut"]]]]],["bs-chatbot-header",[[769,"bs-chatbot-header",{"heading":[1],"expanded":[1540]}]]],["bs-dialog",[[769,"bs-dialog",{"open":[1540],"heading":[1],"size":[1],"centered":[516],"hasFooter":[32],"hasImage":[32],"hasIcon":[32]},[[4,"keydown","onKeydown"],[4,"focusin","onFocusIn"]]]]],["bs-navigation-drawer",[[769,"bs-navigation-drawer",{"heading":[1],"collapsible":[4],"collapsed":[1540],"logoBackground":[1,"logo-background"],"showLogo":[4,"show-logo"]},null,{"collapsed":[{"onCollapsedChange":0}]}]]],["bs-navigation-header",[[769,"bs-navigation-header",{"alignment":[1],"ariaLabel":[1,"aria-label"],"skipToContentHref":[1,"skip-to-content-href"],"skipToContentLabel":[1,"skip-to-content-label"],"logoBackground":[1,"logo-background"]}]]],["bs-ai-disclaimer",[[257,"bs-ai-disclaimer"]]],["bs-ai-greeting",[[513,"bs-ai-greeting",{"assistantName":[1,"assistant-name"],"productName":[1,"product-name"]}]]],["bs-ai-thinking",[[513,"bs-ai-thinking",{"label":[1]}]]],["bs-attachment-list",[[769,"bs-attachment-list",{"ariaLabel":[1,"aria-label"],"canScrollRight":[32]}]]],["bs-avatar",[[513,"bs-avatar",{"type":[1],"size":[1],"initials":[1],"src":[1],"alt":[1],"ariaLabel":[1,"aria-label"],"disabled":[516]}]]],["bs-badge",[[769,"bs-badge",{"variant":[1]}]]],["bs-breadcrumb",[[769,"bs-breadcrumb",{"href":[1],"current":[516],"size":[513]}]]],["bs-breadcrumbs",[[769,"bs-breadcrumbs",{"label":[1],"size":[1]},null,{"size":[{"onSizeChange":0}]}]]],["bs-button",[[785,"bs-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1],"ariaLabel":[1,"aria-label"],"hasIcon":[32],"hasEndIcon":[32],"hasLabel":[32]}]]],["bs-button-skeleton",[[513,"bs-button-skeleton",{"size":[1]}]]],["bs-card",[[769,"bs-card",{"surface":[1],"hasImage":[32]}]]],["bs-chatbot-feedback",[[513,"bs-chatbot-feedback",{"rating":[1538],"submitted":[1540],"comment":[1025],"heading":[1],"subtitle":[1]}]]],["bs-chatbot-response-action",[[769,"bs-chatbot-response-action",{"sourcesCount":[2,"sources-count"],"menuOpen":[1540,"menu-open"]},[[4,"click","onDocumentClick"],[4,"keydown","onKeydown"]]]]],["bs-chatbot-sources-drawer",[[769,"bs-chatbot-sources-drawer",{"heading":[1],"count":[2],"slottedCount":[32]}]]],["bs-chatbot-suggestion-button",[[769,"bs-chatbot-suggestion-button",{"disabled":[4]}]]],["bs-checkbox",[[785,"bs-checkbox",{"size":[1],"checked":[1540],"indeterminate":[1540],"disabled":[4],"error":[4],"ariaLabel":[1,"aria-label"]},null,{"indeterminate":[{"onIndeterminateChange":0}]}]]],["bs-checkbox-skeleton",[[513,"bs-checkbox-skeleton",{"size":[1]}]]],["bs-chip-filter",[[785,"bs-chip-filter",{"size":[1],"selected":[1540],"dropdown":[4],"disabled":[4],"ariaLabel":[1,"aria-label"],"hasIcon":[32]}]]],["bs-chip-informative",[[769,"bs-chip-informative",{"color":[1],"size":[1],"disabled":[516],"hasIcon":[32]}]]],["bs-chip-input",[[785,"bs-chip-input",{"size":[1],"selected":[1540],"disabled":[516],"hasIcon":[32],"labelText":[32]}]]],["bs-composer",[[785,"bs-composer",{"variant":[1],"placeholder":[1],"value":[1],"state":[1],"ariaLabel":[1,"aria-label"],"hasAttachments":[32]}]]],["bs-composer-status-banner",[[769,"bs-composer-status-banner",{"type":[1],"message":[1],"showIcon":[4,"show-icon"],"showButton":[4,"show-button"],"actionLabel":[1,"action-label"],"allowClose":[4,"allow-close"]}]]],["bs-data-table",[[513,"bs-data-table",{"columns":[16],"rows":[16],"sortColumn":[1,"sort-column"],"sortDirection":[1,"sort-direction"],"selectable":[4],"cellRenderer":[16],"selectedIds":[32]}]]],["bs-inline-tab",[[769,"bs-inline-tab",{"selected":[516],"disabled":[4],"ariaLabel":[1,"aria-label"],"hasIcon":[32],"hasLabel":[32]}]]],["bs-navigation-drawer-item",[[769,"bs-navigation-drawer-item",{"selected":[516],"expandable":[4],"expanded":[1540],"nested":[4],"ariaLabel":[1,"aria-label"],"collapsed":[516],"hasIcon":[32]}]]],["bs-pagination",[[513,"bs-pagination",{"totalPages":[2,"total-pages"],"currentPage":[1538,"current-page"],"siblingCount":[2,"sibling-count"],"previousLabel":[1,"previous-label"],"nextLabel":[1,"next-label"]}]]],["bs-radio",[[785,"bs-radio",{"name":[1],"value":[1],"checked":[1540],"disabled":[4]}]]],["bs-slider",[[529,"bs-slider",{"type":[1],"showLabel":[4,"show-label"],"label":[1],"min":[2],"max":[2],"step":[2],"value":[1026],"valueStart":[1026,"value-start"],"valueEnd":[1026,"value-end"],"segments":[2],"disabled":[4],"ariaLabel":[1,"aria-label"]}]]],["bs-snackbar",[[769,"bs-snackbar",{"variant":[1],"loading":[4],"actionLabel":[1,"action-label"]}]]],["bs-source-link",[[769,"bs-source-link",{"fileName":[1,"file-name"],"sourceName":[1,"source-name"],"version":[1],"href":[1],"target":[1]}]]],["bs-stepper",[[769,"bs-stepper",{"currentStep":[2,"current-step"],"direction":[513],"showDescription":[4,"show-description"]},null,{"currentStep":[{"onPropChange":0}],"direction":[{"onPropChange":0}],"showDescription":[{"onPropChange":0}]}]]],["bs-stepper-step",[[513,"bs-stepper-step",{"name":[1],"description":[1],"error":[4],"disabled":[4],"computedState":[1,"computed-state"],"direction":[1],"showDescription":[4,"show-description"]}]]],["bs-switch",[[785,"bs-switch",{"size":[1],"checked":[1540],"disabled":[4],"ariaLabel":[1,"aria-label"]}]]],["bs-tab",[[769,"bs-tab",{"selected":[516],"disabled":[4],"iconPosition":[1,"icon-position"],"ariaLabel":[1,"aria-label"],"hasIcon":[32],"hasLabel":[32],"hasBadge":[32]}]]],["bs-tabs",[[769,"bs-tabs",{"type":[1],"orientation":[1]},[[0,"bsSelect","onTabSelect"]]]]],["bs-toast",[[769,"bs-toast",{"state":[1]}]]],["bs-menu-item",[[769,"bs-menu-item",{"disabled":[4],"hasIcon":[32]}]]],["bs-tooltip",[[769,"bs-tooltip",{"placement":[1]}]]],["bs-icon-button",[[785,"bs-icon-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["bs-logo",[[513,"bs-logo",{"variant":[1],"background":[1],"src":[1],"alt":[1]}]]],["bs-menu",[[257,"bs-menu"]]]], options);
|
|
7
|
+
return bootstrapLazy([["bs-input",[[785,"bs-input",{"value":[1025],"type":[1],"label":[1],"placeholder":[1],"description":[1],"error":[1],"disabled":[4],"required":[4],"step":[2],"min":[2],"max":[2],"options":[16],"rows":[2],"chips":[16],"titleOptions":[16],"initialsTitle":[1,"initials-title"],"countryOptions":[16],"country":[1],"length":[2],"open":[1540],"hasIcon":[32],"hasEndIcon":[32],"passwordVisible":[32],"chipDraft":[32]},[[0,"keydown","onHostKeydown"],[0,"focusout","onHostFocusOut"]]]]],["bs-attachment",[[513,"bs-attachment",{"type":[1],"fileName":[1,"file-name"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"loading":[4],"removable":[4]}]]],["bs-breadcrumb-overflow",[[513,"bs-breadcrumb-overflow",{"items":[16],"overflowLabel":[1,"overflow-label"],"size":[513],"open":[32]},[[0,"keydown","onHostKeydown"],[0,"focusout","onHostFocusOut"]]]]],["bs-chatbot-header",[[769,"bs-chatbot-header",{"heading":[1],"expanded":[1540]}]]],["bs-dialog",[[769,"bs-dialog",{"open":[1540],"heading":[1],"size":[1],"centered":[516],"hasFooter":[32],"hasImage":[32],"hasIcon":[32]},[[4,"keydown","onKeydown"],[4,"focusin","onFocusIn"]]]]],["bs-navigation-drawer",[[769,"bs-navigation-drawer",{"heading":[1],"collapsible":[4],"collapsed":[1540],"logoBackground":[1,"logo-background"],"showLogo":[4,"show-logo"]},null,{"collapsed":[{"onCollapsedChange":0}]}]]],["bs-navigation-header",[[769,"bs-navigation-header",{"alignment":[1],"ariaLabel":[1,"aria-label"],"skipToContentHref":[1,"skip-to-content-href"],"skipToContentLabel":[1,"skip-to-content-label"],"logoBackground":[1,"logo-background"]}]]],["bs-ai-disclaimer",[[257,"bs-ai-disclaimer"]]],["bs-ai-greeting",[[513,"bs-ai-greeting",{"assistantName":[1,"assistant-name"],"productName":[1,"product-name"]}]]],["bs-ai-thinking",[[513,"bs-ai-thinking",{"label":[1]}]]],["bs-attachment-list",[[769,"bs-attachment-list",{"ariaLabel":[1,"aria-label"],"canScrollRight":[32]}]]],["bs-avatar",[[513,"bs-avatar",{"type":[1],"size":[1],"initials":[1],"src":[1],"alt":[1],"ariaLabel":[1,"aria-label"],"disabled":[516]}]]],["bs-badge",[[769,"bs-badge",{"variant":[1]}]]],["bs-breadcrumb",[[769,"bs-breadcrumb",{"href":[1],"current":[516],"size":[513]}]]],["bs-breadcrumbs",[[769,"bs-breadcrumbs",{"label":[1],"size":[1]},null,{"size":[{"onSizeChange":0}]}]]],["bs-button",[[785,"bs-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1],"ariaLabel":[1,"aria-label"],"hasIcon":[32],"hasEndIcon":[32],"hasLabel":[32]}]]],["bs-button-skeleton",[[513,"bs-button-skeleton",{"size":[1]}]]],["bs-card",[[769,"bs-card",{"surface":[1],"hasImage":[32]}]]],["bs-chatbot-feedback",[[513,"bs-chatbot-feedback",{"rating":[1538],"submitted":[1540],"comment":[1025],"heading":[1],"subtitle":[1]}]]],["bs-chatbot-response-action",[[769,"bs-chatbot-response-action",{"sourcesCount":[2,"sources-count"],"menuOpen":[1540,"menu-open"]},[[4,"click","onDocumentClick"],[4,"keydown","onKeydown"]]]]],["bs-chatbot-sources-drawer",[[769,"bs-chatbot-sources-drawer",{"heading":[1],"count":[2],"slottedCount":[32]}]]],["bs-chatbot-suggestion-button",[[769,"bs-chatbot-suggestion-button",{"disabled":[4]}]]],["bs-checkbox",[[785,"bs-checkbox",{"size":[1],"checked":[1540],"indeterminate":[1540],"disabled":[4],"error":[4],"ariaLabel":[1,"aria-label"]},null,{"indeterminate":[{"onIndeterminateChange":0}]}]]],["bs-checkbox-skeleton",[[513,"bs-checkbox-skeleton",{"size":[1]}]]],["bs-chip-filter",[[785,"bs-chip-filter",{"size":[1],"selected":[1540],"dropdown":[4],"disabled":[4],"ariaLabel":[1,"aria-label"],"hasIcon":[32]}]]],["bs-chip-informative",[[769,"bs-chip-informative",{"color":[1],"size":[1],"disabled":[516],"hasIcon":[32]}]]],["bs-chip-input",[[785,"bs-chip-input",{"size":[1],"selected":[1540],"disabled":[516],"hasIcon":[32],"labelText":[32]}]]],["bs-composer",[[785,"bs-composer",{"variant":[1],"placeholder":[1],"value":[1],"state":[1],"ariaLabel":[1,"aria-label"],"hasAttachments":[32]}]]],["bs-composer-status-banner",[[769,"bs-composer-status-banner",{"type":[1],"message":[1],"showIcon":[4,"show-icon"],"showButton":[4,"show-button"],"actionLabel":[1,"action-label"],"allowClose":[4,"allow-close"]}]]],["bs-data-table",[[513,"bs-data-table",{"columns":[16],"rows":[16],"sortColumn":[1,"sort-column"],"sortDirection":[1,"sort-direction"],"selectable":[4],"cellRenderer":[16],"selectedIds":[32]}]]],["bs-inline-tab",[[769,"bs-inline-tab",{"selected":[516],"disabled":[4],"ariaLabel":[1,"aria-label"],"hasIcon":[32],"hasLabel":[32]}]]],["bs-navigation-drawer-item",[[769,"bs-navigation-drawer-item",{"selected":[516],"expandable":[4],"expanded":[1540],"nested":[4],"ariaLabel":[1,"aria-label"],"collapsed":[516],"hasIcon":[32]}]]],["bs-pagination",[[513,"bs-pagination",{"totalPages":[2,"total-pages"],"currentPage":[1538,"current-page"],"siblingCount":[2,"sibling-count"],"previousLabel":[1,"previous-label"],"nextLabel":[1,"next-label"]}]]],["bs-progress",[[513,"bs-progress",{"type":[1],"size":[1],"strokeWidth":[2,"stroke-width"],"value":[2],"showLabel":[4,"show-label"]}]]],["bs-progress-linear",[[769,"bs-progress-linear",{"type":[1],"size":[1],"value":[2],"showLabel":[4,"show-label"],"hasLabelContent":[32]}]]],["bs-radio",[[785,"bs-radio",{"name":[1],"value":[1],"checked":[1540],"disabled":[4]}]]],["bs-slider",[[529,"bs-slider",{"type":[1],"showLabel":[4,"show-label"],"label":[1],"min":[2],"max":[2],"step":[2],"value":[1026],"valueStart":[1026,"value-start"],"valueEnd":[1026,"value-end"],"segments":[2],"disabled":[4],"ariaLabel":[1,"aria-label"]}]]],["bs-snackbar",[[769,"bs-snackbar",{"variant":[1],"loading":[4],"actionLabel":[1,"action-label"]}]]],["bs-source-link",[[769,"bs-source-link",{"fileName":[1,"file-name"],"sourceName":[1,"source-name"],"version":[1],"href":[1],"target":[1]}]]],["bs-stepper",[[769,"bs-stepper",{"currentStep":[2,"current-step"],"direction":[513],"showDescription":[4,"show-description"]},null,{"currentStep":[{"onPropChange":0}],"direction":[{"onPropChange":0}],"showDescription":[{"onPropChange":0}]}]]],["bs-stepper-step",[[513,"bs-stepper-step",{"name":[1],"description":[1],"error":[4],"disabled":[4],"computedState":[1,"computed-state"],"direction":[1],"showDescription":[4,"show-description"]}]]],["bs-switch",[[785,"bs-switch",{"size":[1],"checked":[1540],"disabled":[4],"ariaLabel":[1,"aria-label"]}]]],["bs-tab",[[769,"bs-tab",{"selected":[516],"disabled":[4],"iconPosition":[1,"icon-position"],"ariaLabel":[1,"aria-label"],"hasIcon":[32],"hasLabel":[32],"hasBadge":[32]}]]],["bs-tabs",[[769,"bs-tabs",{"type":[1],"orientation":[1]},[[0,"bsSelect","onTabSelect"]]]]],["bs-toast",[[769,"bs-toast",{"state":[1]}]]],["bs-menu-item",[[769,"bs-menu-item",{"disabled":[4],"hasIcon":[32]}]]],["bs-tooltip",[[769,"bs-tooltip",{"placement":[1]}]]],["bs-icon-button",[[785,"bs-icon-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["bs-logo",[[513,"bs-logo",{"variant":[1],"background":[1],"src":[1],"alt":[1]}]]],["bs-menu",[[257,"bs-menu"]]]], options);
|
|
8
8
|
};
|
|
9
9
|
|
|
10
10
|
export { defineCustomElements };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
export type BsProgressType = 'determinate' | 'indeterminate';
|
|
2
|
+
export type BsProgressSize = 'small' | 'medium' | 'large';
|
|
3
|
+
export type BsProgressStrokeWidth = 4 | 8;
|
|
4
|
+
/**
|
|
5
|
+
* A circular progress indicator -- either a static ring showing a percentage sweep
|
|
6
|
+
* (`type="determinate"`) or a continuously spinning ring signaling in-progress work with no known
|
|
7
|
+
* completion percentage (`type="indeterminate"`).
|
|
8
|
+
*
|
|
9
|
+
* ## When to use
|
|
10
|
+
* - Showing the progress of a task with a known, quantifiable completion percentage (`determinate`).
|
|
11
|
+
* - Signaling that work is happening in the background with no meaningful percentage to report
|
|
12
|
+
* (`indeterminate`), e.g. while waiting on a network response.
|
|
13
|
+
*
|
|
14
|
+
* ## When not to use
|
|
15
|
+
* - For a horizontal, bar-shaped progress indicator -- this component is a ring, not a bar.
|
|
16
|
+
* - For a percentage that's better expressed as plain text, without the reserved space and visual
|
|
17
|
+
* weight of a ring.
|
|
18
|
+
*
|
|
19
|
+
* @part container - The outer wrapper (ring + optional label).
|
|
20
|
+
* @part track - The background track circle.
|
|
21
|
+
* @part arc - The colored progress/spinner arc circle.
|
|
22
|
+
* @part label - The percentage label (`determinate` + `showLabel` only).
|
|
23
|
+
*/
|
|
24
|
+
export declare class BsProgress {
|
|
25
|
+
/** `determinate` renders a static arc sweep reflecting `value` (with an optional percentage
|
|
26
|
+
* label); `indeterminate` renders a continuously spinning ring and never shows a label, since
|
|
27
|
+
* there's no known percentage to report. */
|
|
28
|
+
type: BsProgressType;
|
|
29
|
+
/** Overall diameter: `small` (44px), `medium` (48px), or `large` (64px). */
|
|
30
|
+
size: BsProgressSize;
|
|
31
|
+
/** Ring stroke width in px -- `4` or `8`, matching Figma's two stroke-width variants. A number,
|
|
32
|
+
* not the Figma label's literal `"4 px"` string. */
|
|
33
|
+
strokeWidth: BsProgressStrokeWidth;
|
|
34
|
+
/** Progress percentage, `0`-`100`. Only meaningful for `type="determinate"` -- ignored (and
|
|
35
|
+
* never rendered) for `type="indeterminate"`. Out-of-range values are clamped defensively. */
|
|
36
|
+
value: number;
|
|
37
|
+
/** Shows the `${value}%` label below the ring. Only takes effect for `type="determinate"` --
|
|
38
|
+
* `indeterminate` never shows a label regardless of this prop, since there's no percentage to
|
|
39
|
+
* show. Defaults to `true`. */
|
|
40
|
+
showLabel: boolean;
|
|
41
|
+
private get clampedValue();
|
|
42
|
+
private get diameter();
|
|
43
|
+
private get radius();
|
|
44
|
+
private get circumference();
|
|
45
|
+
render(): any;
|
|
46
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/web-components-vite';
|
|
2
|
+
import type { BsProgressType, BsProgressSize, BsProgressStrokeWidth } from './bs-progress';
|
|
3
|
+
interface BsProgressArgs {
|
|
4
|
+
type: BsProgressType;
|
|
5
|
+
size: BsProgressSize;
|
|
6
|
+
strokeWidth: BsProgressStrokeWidth;
|
|
7
|
+
value: number;
|
|
8
|
+
showLabel: boolean;
|
|
9
|
+
}
|
|
10
|
+
declare const meta: Meta<BsProgressArgs>;
|
|
11
|
+
export default meta;
|
|
12
|
+
type Story = StoryObj<BsProgressArgs>;
|
|
13
|
+
export declare const Default: Story;
|
|
14
|
+
export declare const Sizes: Story;
|
|
15
|
+
export declare const StrokeWidths: Story;
|
|
16
|
+
export declare const Values: Story;
|
|
17
|
+
export declare const WithoutLabel: Story;
|
|
18
|
+
export declare const Indeterminate: Story;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
export type BsProgressLinearType = 'determinate' | 'indeterminate';
|
|
2
|
+
export type BsProgressLinearSize = 'small' | 'large';
|
|
3
|
+
/**
|
|
4
|
+
* A linear (horizontal) progress indicator -- either a static bar showing a percentage fill
|
|
5
|
+
* (`type="determinate"`) or a continuously sliding bar signaling in-progress work with no known
|
|
6
|
+
* completion percentage (`type="indeterminate"`).
|
|
7
|
+
*
|
|
8
|
+
* ## When to use
|
|
9
|
+
* - Showing the progress of a task with a known, quantifiable completion percentage (`determinate`),
|
|
10
|
+
* e.g. a file upload.
|
|
11
|
+
* - Signaling that work is happening in the background with no meaningful percentage to report
|
|
12
|
+
* (`indeterminate`), e.g. while waiting on a network response.
|
|
13
|
+
*
|
|
14
|
+
* ## When not to use
|
|
15
|
+
* - For a compact, ring-shaped progress indicator -- use `bs-progress` (circular) instead.
|
|
16
|
+
* - For a percentage that's better expressed as plain text, without the reserved space and visual
|
|
17
|
+
* weight of a bar.
|
|
18
|
+
*
|
|
19
|
+
* @slot - Free-form label content rendered below the bar (e.g. "Uploading..."), gated by
|
|
20
|
+
* `showLabel`. Unlike `bs-progress`'s label, this is not a computed `${value}%` string -- it's
|
|
21
|
+
* consumer-supplied content, per the Figma spec's free-text "Label" placeholder.
|
|
22
|
+
* @part container - The outer wrapper (bar + optional label).
|
|
23
|
+
* @part track - The background track bar.
|
|
24
|
+
* @part fill - The colored progress/sliding fill bar.
|
|
25
|
+
* @part label - The label wrapper (only rendered when `showLabel` is true and slotted content exists).
|
|
26
|
+
*/
|
|
27
|
+
export declare class BsProgressLinear {
|
|
28
|
+
el: HTMLElement;
|
|
29
|
+
/** Whether the default slot currently has any real (non-whitespace) content -- the label
|
|
30
|
+
* wrapper is only rendered when `showLabel` is true AND slotted content exists, so an empty
|
|
31
|
+
* label never reserves visual space/line-height for nothing. Recomputed on `slotchange`. */
|
|
32
|
+
private hasLabelContent;
|
|
33
|
+
/** `determinate` renders a static fill reflecting `value`; `indeterminate` renders a
|
|
34
|
+
* continuously sliding gradient bar and ignores `value`. */
|
|
35
|
+
type: BsProgressLinearType;
|
|
36
|
+
/** Bar height: `small` (4px) or `large` (8px). */
|
|
37
|
+
size: BsProgressLinearSize;
|
|
38
|
+
/** Progress percentage, `0`-`100`. Only meaningful for `type="determinate"` -- ignored (and
|
|
39
|
+
* never rendered) for `type="indeterminate"`. Out-of-range values are clamped defensively. */
|
|
40
|
+
value: number;
|
|
41
|
+
/** Shows the slotted label below the bar. When `false`, or when no content is slotted, the
|
|
42
|
+
* label wrapper isn't rendered at all. Defaults to `true`. */
|
|
43
|
+
showLabel: boolean;
|
|
44
|
+
private get clampedValue();
|
|
45
|
+
render(): any;
|
|
46
|
+
componentWillLoad(): void;
|
|
47
|
+
disconnectedCallback(): void;
|
|
48
|
+
private mutationObserver?;
|
|
49
|
+
private updateLabelVisibility;
|
|
50
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/web-components-vite';
|
|
2
|
+
import type { BsProgressLinearType, BsProgressLinearSize } from './bs-progress-linear';
|
|
3
|
+
interface BsProgressLinearArgs {
|
|
4
|
+
type: BsProgressLinearType;
|
|
5
|
+
size: BsProgressLinearSize;
|
|
6
|
+
value: number;
|
|
7
|
+
showLabel: boolean;
|
|
8
|
+
label: string;
|
|
9
|
+
}
|
|
10
|
+
declare const meta: Meta<BsProgressLinearArgs>;
|
|
11
|
+
export default meta;
|
|
12
|
+
type Story = StoryObj<BsProgressLinearArgs>;
|
|
13
|
+
export declare const Default: Story;
|
|
14
|
+
export declare const Sizes: Story;
|
|
15
|
+
export declare const Values: Story;
|
|
16
|
+
export declare const WithoutLabel: Story;
|
|
17
|
+
export declare const Indeterminate: Story;
|