@usecapsule/core-components 1.0.8 → 1.0.9

package/dist/cjs/capsule.cjs.js

@@ -19,7 +19,7 @@ const patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["cpsl-col.cjs",[[1,"cpsl-col",{"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"pull":[1],"pullXs":[1,"pull-xs"],"pullSm":[1,"pull-sm"],"pullMd":[1,"pull-md"],"pullLg":[1,"pull-lg"],"pullXl":[1,"pull-xl"],"push":[1],"pushXs":[1,"push-xs"],"pushSm":[1,"push-sm"],"pushMd":[1,"push-md"],"pushLg":[1,"push-lg"],"pushXl":[1,"push-xl"],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]},[[9,"resize","onResize"]]]]],["cpsl-grid.cjs",[[1,"cpsl-grid",{"fixed":[4]}]]],["cpsl-info-box.cjs",[[1,"cpsl-info-box"]]],["cpsl-row.cjs",[[1,"cpsl-row"]]],["cpsl-alert_17.cjs",[[1,"cpsl-code-input",{"code":[1025],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"length":[2],"type":[1]}],[1,"cpsl-input",{"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"noAutoDisable":[4,"no-auto-disable"],"autofocus":[4],"disabled":[4],"enterkeyhint":[1],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"inputmode":[1],"label":[1],"max":[8],"maxlength":[2],"min":[8],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32]},null,{"disabled":["handleDisable"]}],[1,"cpsl-slide-button",{"endIcon":[1,"end-icon"],"endText":[1,"end-text"],"startIcon":[1,"start-icon"],"startText":[1,"start-text"]}],[1,"cpsl-tile-button",{"src":[1],"icon":[1]}],[1,"cpsl-alert",{"type":[1],"icon":[1]}],[1,"cpsl-button",{"disabled":[516],"variant":[513]}],[1,"cpsl-divider"],[1,"cpsl-modal",{"footerExpanded":[4,"footer-expanded"],"transitionDuration":[2,"transition-duration"],"noFooter":[32]},null,{"footerExpanded":["toggleHeight"]}],[1,"cpsl-overlay",{"open":[4],"transitionDuration":[2,"transition-duration"]},null,{"open":["toggleHeight"]}],[1,"cpsl-pill",{"text":[1]}],[1,"cpsl-progress-indicator",{"totalSteps":[2,"total-steps"],"step":[2]}],[1,"cpsl-qr-code",{"url":[1],"imageSrc":[1,"image-src"],"size":[2]}],[1,"cpsl-spinner",{"size":[2],"speed":[2]}],[1,"cpsl-tab",{"selected":[4],"tab":[1]},[[8,"cpslTabsChanged","onTabsChanged"],[8,"cpslTabsInit","onTabsInit"]]],[1,"cpsl-tabs",{"fullWidth":[4,"full-width"],"selectedTab":[1025,"selected-tab"],"selectedTabRect":[32],"loaded":[32]},null,{"fullWidth":["updateSlider"]}],[1,"cpsl-text"],[1,"cpsl-icon",{"src":[1],"icon":[1]}]]]], options);
+  return index.bootstrapLazy([["cpsl-col.cjs",[[1,"cpsl-col",{"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"pull":[1],"pullXs":[1,"pull-xs"],"pullSm":[1,"pull-sm"],"pullMd":[1,"pull-md"],"pullLg":[1,"pull-lg"],"pullXl":[1,"pull-xl"],"push":[1],"pushXs":[1,"push-xs"],"pushSm":[1,"push-sm"],"pushMd":[1,"push-md"],"pushLg":[1,"push-lg"],"pushXl":[1,"push-xl"],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]},[[9,"resize","onResize"]]]]],["cpsl-grid.cjs",[[1,"cpsl-grid",{"fixed":[4]}]]],["cpsl-info-box.cjs",[[1,"cpsl-info-box"]]],["cpsl-row.cjs",[[1,"cpsl-row"]]],["cpsl-alert_17.cjs",[[1,"cpsl-code-input",{"code":[1025],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"length":[2],"type":[1]}],[1,"cpsl-input",{"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"noAutoDisable":[4,"no-auto-disable"],"autofocus":[4],"disabled":[4],"enterkeyhint":[1],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"inputmode":[1],"label":[1],"max":[8],"maxlength":[2],"min":[8],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32]},null,{"disabled":["handleDisable"]}],[1,"cpsl-slide-button",{"endIcon":[1,"end-icon"],"endText":[1,"end-text"],"startIcon":[1,"start-icon"],"startText":[1,"start-text"]}],[1,"cpsl-tile-button",{"src":[1],"icon":[1]}],[1,"cpsl-alert",{"type":[1],"icon":[1]}],[1,"cpsl-button",{"disabled":[516],"variant":[513]}],[1,"cpsl-divider"],[1,"cpsl-modal",{"footerExpanded":[4,"footer-expanded"],"transitionDuration":[2,"transition-duration"],"noFooter":[32]},null,{"footerExpanded":["toggleHeight"]}],[1,"cpsl-overlay",{"open":[4],"transitionDuration":[2,"transition-duration"]},null,{"open":["toggleHeight"]}],[1,"cpsl-pill",{"text":[1]}],[1,"cpsl-progress-indicator",{"totalSteps":[2,"total-steps"],"step":[2]}],[1,"cpsl-qr-code",{"url":[1],"imageSrc":[1,"image-src"],"size":[2]}],[1,"cpsl-spinner",{"size":[2],"speed":[2]}],[1,"cpsl-tab",{"selected":[4],"tab":[1]},[[8,"cpslTabsChanged","onTabsChanged"],[8,"cpslTabsInit","onTabsInit"]]],[1,"cpsl-tabs",{"fullWidth":[4,"full-width"],"selectedTab":[1,"selected-tab"],"selectedTabRect":[32],"loaded":[32]},null,{"fullWidth":["updateSlider"],"selectedTab":["updateTab"]}],[1,"cpsl-text"],[1,"cpsl-icon",{"src":[1],"icon":[1]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/cpsl-alert_17.cjs.entry.js

@@ -7401,14 +7401,21 @@ const CpslTabs = class {
             this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();
         }, 50);
     }
+    updateTab(newValue, oldValue) {
+        if (Boolean(newValue) && !Boolean(oldValue)) {
+            this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();
+        }
+    }
     componentWillLoad() {
-        this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();
+        var _a, _b;
+        this.selectedTabRect = (_b = (_a = getTab(this.tabs, this.selectedTab)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== null && _b !== void 0 ? _b : { width: 0, x: 0 };
         this.cpslTabsInit.emit({
             tab: this.selectedTab,
         });
     }
     componentDidLoad() {
-        this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();
+        var _a, _b;
+        this.selectedTabRect = (_b = (_a = getTab(this.tabs, this.selectedTab)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== null && _b !== void 0 ? _b : { width: 0, x: 0 };
         setTimeout(() => {
             this.loaded = true;
         }, 50);
@@ -7420,18 +7427,16 @@ const CpslTabs = class {
         const tabsPosition = this.el.getBoundingClientRect();
         const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--border-width').slice(0, -2);
         const selectedTabRect = this.selectedTabRect;
-        return (index.h(index.Host, { key: 'b64847167837c21748fce136be621c5cd3056383', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, index.h("div", { key: '97f898ee1c1a29c673a901d37e0c2aa20f73e06e', class: "tabs-container" }, index.h("slot", { key: '6a731c26802bc1b08c6b5fe92b2a6f1da438ee89' }), index.h("div", { key: 'c69d074579a90b804f038f5ace589a1c98ed45e1', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
+        return (index.h(index.Host, { key: '0ed728859b1d8e218bda3fdc4022cdd061552d8d', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, index.h("div", { key: 'b2cc2886ff4523c227b713385577375df9c1b4e7', class: "tabs-container" }, index.h("slot", { key: '591895925b58373da582610cf775d1828179b395' }), index.h("div", { key: '57bd7718e0525fdd20eaa5b005fc8d33408f45f8', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "fullWidth": ["updateSlider"]
+        "fullWidth": ["updateSlider"],
+        "selectedTab": ["updateTab"]
     }; }
 };
 const getTab = (tabs, tab) => {
     const tabEl = typeof tab === 'string' ? tabs.find(t => t.tab === tab) : tab;
-    if (!tabEl) {
-        console.error(`tab with id: "${tabEl}" does not exist`);
-    }
     return tabEl;
 };
 CpslTabs.style = CpslTabsStyle0;