@usecapsule/core-components 1.0.8 → 1.0.9
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/capsule/capsule.esm.js +1 -1
- package/dist/capsule/capsule.esm.js.map +1 -1
- package/dist/capsule/{p-1fd4cb56.entry.js → p-7593cd06.entry.js} +4 -4
- package/dist/capsule/p-7593cd06.entry.js.map +1 -0
- package/dist/cjs/capsule.cjs.js +1 -1
- package/dist/cjs/cpsl-alert_17.cjs.entry.js +12 -7
- package/dist/cjs/cpsl-alert_17.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/cpsl-tabs/cpsl-tabs.js +14 -7
- package/dist/collection/components/cpsl-tabs/cpsl-tabs.js.map +1 -1
- package/dist/esm/capsule.js +1 -1
- package/dist/esm/cpsl-alert_17.entry.js +12 -7
- package/dist/esm/cpsl-alert_17.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/cpsl-tabs/cpsl-tabs.d.ts +1 -0
- package/package.json +2 -2
- package/dist/capsule/p-1fd4cb56.entry.js.map +0 -1
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
|
|
|
8
8
|
const defineCustomElements = async (win, options) => {
|
|
9
9
|
if (typeof window === 'undefined') return undefined;
|
|
10
10
|
await appGlobals.globalScripts();
|
|
11
|
-
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":[
|
|
11
|
+
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);
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
exports.setNonce = index.setNonce;
|
|
@@ -20,14 +20,21 @@ export class CpslTabs {
|
|
|
20
20
|
this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();
|
|
21
21
|
}, 50);
|
|
22
22
|
}
|
|
23
|
+
updateTab(newValue, oldValue) {
|
|
24
|
+
if (Boolean(newValue) && !Boolean(oldValue)) {
|
|
25
|
+
this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();
|
|
26
|
+
}
|
|
27
|
+
}
|
|
23
28
|
componentWillLoad() {
|
|
24
|
-
|
|
29
|
+
var _a, _b;
|
|
30
|
+
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 };
|
|
25
31
|
this.cpslTabsInit.emit({
|
|
26
32
|
tab: this.selectedTab,
|
|
27
33
|
});
|
|
28
34
|
}
|
|
29
35
|
componentDidLoad() {
|
|
30
|
-
|
|
36
|
+
var _a, _b;
|
|
37
|
+
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 };
|
|
31
38
|
setTimeout(() => {
|
|
32
39
|
this.loaded = true;
|
|
33
40
|
}, 50);
|
|
@@ -39,7 +46,7 @@ export class CpslTabs {
|
|
|
39
46
|
const tabsPosition = this.el.getBoundingClientRect();
|
|
40
47
|
const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--border-width').slice(0, -2);
|
|
41
48
|
const selectedTabRect = this.selectedTabRect;
|
|
42
|
-
return (h(Host, { key: '
|
|
49
|
+
return (h(Host, { key: '0ed728859b1d8e218bda3fdc4022cdd061552d8d', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, h("div", { key: 'b2cc2886ff4523c227b713385577375df9c1b4e7', class: "tabs-container" }, h("slot", { key: '591895925b58373da582610cf775d1828179b395' }), h("div", { key: '57bd7718e0525fdd20eaa5b005fc8d33408f45f8', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
|
|
43
50
|
}
|
|
44
51
|
static get is() { return "cpsl-tabs"; }
|
|
45
52
|
static get encapsulation() { return "shadow"; }
|
|
@@ -74,7 +81,7 @@ export class CpslTabs {
|
|
|
74
81
|
},
|
|
75
82
|
"selectedTab": {
|
|
76
83
|
"type": "string",
|
|
77
|
-
"mutable":
|
|
84
|
+
"mutable": false,
|
|
78
85
|
"complexType": {
|
|
79
86
|
"original": "string",
|
|
80
87
|
"resolved": "string",
|
|
@@ -150,14 +157,14 @@ export class CpslTabs {
|
|
|
150
157
|
return [{
|
|
151
158
|
"propName": "fullWidth",
|
|
152
159
|
"methodName": "updateSlider"
|
|
160
|
+
}, {
|
|
161
|
+
"propName": "selectedTab",
|
|
162
|
+
"methodName": "updateTab"
|
|
153
163
|
}];
|
|
154
164
|
}
|
|
155
165
|
}
|
|
156
166
|
const getTab = (tabs, tab) => {
|
|
157
167
|
const tabEl = typeof tab === 'string' ? tabs.find(t => t.tab === tab) : tab;
|
|
158
|
-
if (!tabEl) {
|
|
159
|
-
console.error(`tab with id: "${tabEl}" does not exist`);
|
|
160
|
-
}
|
|
161
168
|
return tabEl;
|
|
162
169
|
};
|
|
163
170
|
//# sourceMappingURL=cpsl-tabs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cpsl-tabs.js","sourceRoot":"","sources":["../../../../src/components/cpsl-tabs/cpsl-tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAgB,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AASrG,MAAM,OAAO,QAAQ;;
|
|
1
|
+
{"version":3,"file":"cpsl-tabs.js","sourceRoot":"","sources":["../../../../src/components/cpsl-tabs/cpsl-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Element, h, Event, Prop, EventEmitter, State, Watch } from '@stencil/core';\nimport { TabClickEventDetail } from '../cpsl-tab/tab-interface';\nimport { TabsChangedEventDetail } from './tabs-interface';\n\n@Component({\n tag: 'cpsl-tabs',\n styleUrl: 'cpsl-tabs.scss',\n shadow: true,\n})\nexport class CpslTabs {\n @Element() el!: HTMLCpslTabsElement;\n\n @State() selectedTabRect?: DOMRect;\n @State() loaded: boolean = false;\n\n /**\n * Whether or not the tabs take the full width of their container.\n */\n @Prop() fullWidth?: boolean;\n\n /**\n * The selected tab component\n */\n @Prop() selectedTab?: string;\n\n /**\n * Emitted when a tab is changed\n */\n @Event() cpslTabsChanged!: EventEmitter<TabsChangedEventDetail>;\n\n /**\n * Emitted when tabs are initialized\n * @internal\n */\n @Event() cpslTabsInit!: EventEmitter<TabsChangedEventDetail>;\n\n @Watch('fullWidth')\n updateSlider() {\n // Allow component to condense or expand before recalculating silder\n setTimeout(() => {\n this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();\n }, 50);\n }\n\n @Watch('selectedTab')\n updateTab(newValue?: string, oldValue?: string) {\n if (Boolean(newValue) && !Boolean(oldValue)) {\n this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();\n }\n }\n\n componentWillLoad() {\n this.selectedTabRect = getTab(this.tabs, this.selectedTab)?.getBoundingClientRect() ?? ({ width: 0, x: 0 } as DOMRect);\n\n this.cpslTabsInit.emit({\n tab: this.selectedTab,\n });\n }\n\n componentDidLoad() {\n this.selectedTabRect = getTab(this.tabs, this.selectedTab)?.getBoundingClientRect() ?? ({ width: 0, x: 0 } as DOMRect);\n\n // Allow slider to be rendered with the correct initial style before the transition is added\n setTimeout(() => {\n this.loaded = true;\n }, 50);\n }\n\n private get tabs() {\n return Array.from(this.el.querySelectorAll('cpsl-tab'));\n }\n\n private onTabClicked = (ev: CustomEvent<TabClickEventDetail>) => {\n const { tab } = ev.detail;\n\n if (tab !== this.selectedTab) {\n this.selectedTabRect = getTab(this.tabs, tab).getBoundingClientRect();\n\n this.cpslTabsChanged.emit({\n tab,\n });\n }\n };\n\n render() {\n const tabsPosition = this.el.getBoundingClientRect();\n // Get border width as a number\n const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--border-width').slice(0, -2);\n const selectedTabRect = this.selectedTabRect;\n\n return (\n <Host class={{ 'full-width': this.fullWidth }} onCpslTabButtonClick={this.onTabClicked}>\n <div class=\"tabs-container\">\n <slot></slot>\n <div\n class={{ slider: true, loaded: this.loaded }}\n style={{ width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` }}\n />\n </div>\n </Host>\n );\n }\n}\n\nconst getTab = (tabs: HTMLCpslTabElement[], tab: string | HTMLCpslTabElement): HTMLCpslTabElement | undefined => {\n const tabEl = typeof tab === 'string' ? tabs.find(t => t.tab === tab) : tab;\n\n return tabEl;\n};\n"]}
|
package/dist/esm/capsule.js
CHANGED
|
@@ -16,7 +16,7 @@ const patchBrowser = () => {
|
|
|
16
16
|
|
|
17
17
|
patchBrowser().then(async (options) => {
|
|
18
18
|
await globalScripts();
|
|
19
|
-
return bootstrapLazy([["cpsl-col",[[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",[[1,"cpsl-grid",{"fixed":[4]}]]],["cpsl-info-box",[[1,"cpsl-info-box"]]],["cpsl-row",[[1,"cpsl-row"]]],["cpsl-alert_17",[[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":[
|
|
19
|
+
return bootstrapLazy([["cpsl-col",[[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",[[1,"cpsl-grid",{"fixed":[4]}]]],["cpsl-info-box",[[1,"cpsl-info-box"]]],["cpsl-row",[[1,"cpsl-row"]]],["cpsl-alert_17",[[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);
|
|
20
20
|
});
|
|
21
21
|
|
|
22
22
|
//# sourceMappingURL=capsule.js.map
|
|
@@ -7397,14 +7397,21 @@ const CpslTabs = class {
|
|
|
7397
7397
|
this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();
|
|
7398
7398
|
}, 50);
|
|
7399
7399
|
}
|
|
7400
|
+
updateTab(newValue, oldValue) {
|
|
7401
|
+
if (Boolean(newValue) && !Boolean(oldValue)) {
|
|
7402
|
+
this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();
|
|
7403
|
+
}
|
|
7404
|
+
}
|
|
7400
7405
|
componentWillLoad() {
|
|
7401
|
-
|
|
7406
|
+
var _a, _b;
|
|
7407
|
+
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 };
|
|
7402
7408
|
this.cpslTabsInit.emit({
|
|
7403
7409
|
tab: this.selectedTab,
|
|
7404
7410
|
});
|
|
7405
7411
|
}
|
|
7406
7412
|
componentDidLoad() {
|
|
7407
|
-
|
|
7413
|
+
var _a, _b;
|
|
7414
|
+
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 };
|
|
7408
7415
|
setTimeout(() => {
|
|
7409
7416
|
this.loaded = true;
|
|
7410
7417
|
}, 50);
|
|
@@ -7416,18 +7423,16 @@ const CpslTabs = class {
|
|
|
7416
7423
|
const tabsPosition = this.el.getBoundingClientRect();
|
|
7417
7424
|
const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--border-width').slice(0, -2);
|
|
7418
7425
|
const selectedTabRect = this.selectedTabRect;
|
|
7419
|
-
return (h(Host, { key: '
|
|
7426
|
+
return (h(Host, { key: '0ed728859b1d8e218bda3fdc4022cdd061552d8d', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, h("div", { key: 'b2cc2886ff4523c227b713385577375df9c1b4e7', class: "tabs-container" }, h("slot", { key: '591895925b58373da582610cf775d1828179b395' }), h("div", { key: '57bd7718e0525fdd20eaa5b005fc8d33408f45f8', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
|
|
7420
7427
|
}
|
|
7421
7428
|
get el() { return getElement(this); }
|
|
7422
7429
|
static get watchers() { return {
|
|
7423
|
-
"fullWidth": ["updateSlider"]
|
|
7430
|
+
"fullWidth": ["updateSlider"],
|
|
7431
|
+
"selectedTab": ["updateTab"]
|
|
7424
7432
|
}; }
|
|
7425
7433
|
};
|
|
7426
7434
|
const getTab = (tabs, tab) => {
|
|
7427
7435
|
const tabEl = typeof tab === 'string' ? tabs.find(t => t.tab === tab) : tab;
|
|
7428
|
-
if (!tabEl) {
|
|
7429
|
-
console.error(`tab with id: "${tabEl}" does not exist`);
|
|
7430
|
-
}
|
|
7431
7436
|
return tabEl;
|
|
7432
7437
|
};
|
|
7433
7438
|
CpslTabs.style = CpslTabsStyle0;
|