@usecapsule/core-components 3.4.1-dev.3 → 3.5.0
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-7d6ee79c.entry.js → p-e3d856af.entry.js} +2 -2
- package/dist/capsule/p-e3d856af.entry.js.map +1 -0
- package/dist/cjs/capsule.cjs.js +1 -1
- package/dist/cjs/cpsl-alert_34.cjs.entry.js +16 -2
- package/dist/cjs/cpsl-alert_34.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/cpsl-tab/cpsl-tab.js +32 -1
- package/dist/collection/components/cpsl-tab/cpsl-tab.js.map +1 -1
- package/dist/collection/components/cpsl-tab/tab-interface.js.map +1 -1
- package/dist/collection/components/cpsl-tabs/cpsl-tabs.js +16 -1
- package/dist/collection/components/cpsl-tabs/cpsl-tabs.js.map +1 -1
- package/dist/esm/capsule.js +1 -1
- package/dist/esm/cpsl-alert_34.entry.js +16 -2
- package/dist/esm/cpsl-alert_34.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/cpsl-tab/cpsl-tab.d.ts +7 -1
- package/dist/types/components/cpsl-tab/tab-interface.d.ts +3 -0
- package/dist/types/components/cpsl-tabs/cpsl-tabs.d.ts +2 -0
- package/dist/types/components.d.ts +3 -2
- package/package.json +5 -4
- package/dist/capsule/p-7d6ee79c.entry.js.map +0 -1
- /package/dist/types/Users/{taylorbosch/Documents/GitHub/Capsule → norwood/capsule-repos}/web-sdk/packages/core-components/.stencil/scripts/buildAssets.d.ts +0 -0
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-hero.cjs",[[1,"cpsl-hero",{"height":[2],"hideFadeOut":[4,"hide-fade-out"],"variant":[513],"title":[513],"subtitle":[513],"withDefaultTheme":[4,"with-default-theme"]}]]],["cpsl-modal-v2.cjs",[[1,"cpsl-modal-v2",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"elevated":[4],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"]},null,{"open":["toggleHeight"]}]]],["cpsl-nav-button.cjs",[[1,"cpsl-nav-button",{"disabled":[516],"exactMainRouteMatch":[4,"exact-main-route-match"],"exactSubRouteMatch":[4,"exact-sub-route-match"],"route":[1],"subRoutes":[16],"path":[1]}]]],["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-identicon.cjs",[[1,"cpsl-identicon",{"hash":[1],"size":[1],"variant":[1]}]]],["cpsl-info-box.cjs",[[1,"cpsl-info-box"]]],["cpsl-row.cjs",[[1,"cpsl-row"]]],["cpsl-alert_34.cjs",[[1,"cpsl-pagination",{"initialPage":[2,"initial-page"],"totalPages":[2,"total-pages"],"visiblePages":[1026,"visible-pages"],"currentPage":[32]},null,{"currentPage":["watchChange"]}],[1,"cpsl-select",{"anchorElId":[1,"anchor-el-id"],"autoWidth":[4,"auto-width"],"disabled":[4],"dropdownMaxHeight":[2,"dropdown-max-height"],"errorText":[1,"error-text"],"formatValue":[16],"helperText":[1,"helper-text"],"id":[1],"label":[1],"placeholder":[1],"required":[4],"selectedValue":[1,"selected-value"],"showFormattedSelectedItem":[4,"show-formatted-selected-item"],"showOptionalLabel":[4,"show-optional-label"],"showSearch":[4,"show-search"],"searchPlaceholder":[1,"search-placeholder"],"anchorEl":[32],"hasFocus":[32],"popoverOpen":[32],"hasSelectedItem":[32]},[[0,"cpslSelectItemClick","selectItemClickHandler"],[0,"cpslOpen","onPopoverOpen"],[0,"cpslClose","onPopoverClose"]],{"selectedValue":["onValueChange","handleValueChange"]}],[1,"cpsl-file-upload",{"errorText":[1,"error-text"],"externalFilename":[1,"external-filename"],"externalSrc":[1,"external-src"],"fileTypes":[16],"helperText":[1,"helper-text"],"label":[1],"required":[4],"showOptionalLabel":[4,"show-optional-label"],"uploadFile":[16],"file":[32],"dragOver":[32],"dragError":[32],"isUploading":[32],"uploadError":[32]}],[1,"cpsl-auth-modal",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"],"hasFooter":[32],"isMobile":[32]},null,{"open":["toggleModal"]}],[1,"cpsl-alert",{"icon":[1],"variant":[1]}],[1,"cpsl-checkbox",{"checked":[4]}],[1,"cpsl-code-input",{"code":[1025],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"length":[2],"type":[1]}],[1,"cpsl-drawer",{"anchor":[1],"anchorPosition":[2,"anchor-position"],"noOverlay":[4,"no-overlay"],"open":[4],"size":[8],"transitionDuration":[2,"transition-duration"],"transitionFunction":[1,"transition-function"],"variant":[1],"zIndexOverride":[2,"z-index-override"],"closedAnchorPosition":[32],"showTransition":[32]}],[1,"cpsl-icon-group",{"expandFrom":[1,"expand-from"],"disabled":[4],"icons":[16],"isHovered":[32]}],[1,"cpsl-slide-button",{"disabled":[4],"endIcon":[1,"end-icon"],"endText":[1,"end-text"],"startIcon":[1,"start-icon"],"startText":[1,"start-text"]}],[1,"cpsl-table",{"hasHorizontalScroll":[32],"hasVerticalScroll":[32]}],[1,"cpsl-tile-button",{"src":[1],"icon":[1]}],[1,"cpsl-app-bar",{"height":[2],"position":[1],"zIndexOverride":[2,"z-index-override"]}],[1,"cpsl-avatar",{"alt":[1],"src":[1],"variant":[1]}],[1,"cpsl-divider"],[1,"cpsl-dropdown",{"width":[1],"hasCpslSearch":[4,"has-cpsl-search"],"items":[16],"selectedItem":[1040],"isOpen":[32],"searchQuery":[32],"filteredItems":[32]},[[9,"resize","handleResize"]],{"selectedItem":["handleSelectedItemChange"],"isOpen":["handleOpenChange"]}],[1,"cpsl-nav-button-group"],[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-radio",{"checked":[4]}],[1,"cpsl-select-item",{"selected":[4],"value":[1]}],[1,"cpsl-switch",{"checked":[4]}],[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]},
|
|
11
|
+
return index.bootstrapLazy([["cpsl-hero.cjs",[[1,"cpsl-hero",{"height":[2],"hideFadeOut":[4,"hide-fade-out"],"variant":[513],"title":[513],"subtitle":[513],"withDefaultTheme":[4,"with-default-theme"]}]]],["cpsl-modal-v2.cjs",[[1,"cpsl-modal-v2",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"elevated":[4],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"]},null,{"open":["toggleHeight"]}]]],["cpsl-nav-button.cjs",[[1,"cpsl-nav-button",{"disabled":[516],"exactMainRouteMatch":[4,"exact-main-route-match"],"exactSubRouteMatch":[4,"exact-sub-route-match"],"route":[1],"subRoutes":[16],"path":[1]}]]],["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-identicon.cjs",[[1,"cpsl-identicon",{"hash":[1],"size":[1],"variant":[1]}]]],["cpsl-info-box.cjs",[[1,"cpsl-info-box"]]],["cpsl-row.cjs",[[1,"cpsl-row"]]],["cpsl-alert_34.cjs",[[1,"cpsl-pagination",{"initialPage":[2,"initial-page"],"totalPages":[2,"total-pages"],"visiblePages":[1026,"visible-pages"],"currentPage":[32]},null,{"currentPage":["watchChange"]}],[1,"cpsl-select",{"anchorElId":[1,"anchor-el-id"],"autoWidth":[4,"auto-width"],"disabled":[4],"dropdownMaxHeight":[2,"dropdown-max-height"],"errorText":[1,"error-text"],"formatValue":[16],"helperText":[1,"helper-text"],"id":[1],"label":[1],"placeholder":[1],"required":[4],"selectedValue":[1,"selected-value"],"showFormattedSelectedItem":[4,"show-formatted-selected-item"],"showOptionalLabel":[4,"show-optional-label"],"showSearch":[4,"show-search"],"searchPlaceholder":[1,"search-placeholder"],"anchorEl":[32],"hasFocus":[32],"popoverOpen":[32],"hasSelectedItem":[32]},[[0,"cpslSelectItemClick","selectItemClickHandler"],[0,"cpslOpen","onPopoverOpen"],[0,"cpslClose","onPopoverClose"]],{"selectedValue":["onValueChange","handleValueChange"]}],[1,"cpsl-file-upload",{"errorText":[1,"error-text"],"externalFilename":[1,"external-filename"],"externalSrc":[1,"external-src"],"fileTypes":[16],"helperText":[1,"helper-text"],"label":[1],"required":[4],"showOptionalLabel":[4,"show-optional-label"],"uploadFile":[16],"file":[32],"dragOver":[32],"dragError":[32],"isUploading":[32],"uploadError":[32]}],[1,"cpsl-auth-modal",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"],"hasFooter":[32],"isMobile":[32]},null,{"open":["toggleModal"]}],[1,"cpsl-alert",{"icon":[1],"variant":[1]}],[1,"cpsl-checkbox",{"checked":[4]}],[1,"cpsl-code-input",{"code":[1025],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"length":[2],"type":[1]}],[1,"cpsl-drawer",{"anchor":[1],"anchorPosition":[2,"anchor-position"],"noOverlay":[4,"no-overlay"],"open":[4],"size":[8],"transitionDuration":[2,"transition-duration"],"transitionFunction":[1,"transition-function"],"variant":[1],"zIndexOverride":[2,"z-index-override"],"closedAnchorPosition":[32],"showTransition":[32]}],[1,"cpsl-icon-group",{"expandFrom":[1,"expand-from"],"disabled":[4],"icons":[16],"isHovered":[32]}],[1,"cpsl-slide-button",{"disabled":[4],"endIcon":[1,"end-icon"],"endText":[1,"end-text"],"startIcon":[1,"start-icon"],"startText":[1,"start-text"]}],[1,"cpsl-table",{"hasHorizontalScroll":[32],"hasVerticalScroll":[32]}],[1,"cpsl-tile-button",{"src":[1],"icon":[1]}],[1,"cpsl-app-bar",{"height":[2],"position":[1],"zIndexOverride":[2,"z-index-override"]}],[1,"cpsl-avatar",{"alt":[1],"src":[1],"variant":[1]}],[1,"cpsl-divider"],[1,"cpsl-dropdown",{"width":[1],"hasCpslSearch":[4,"has-cpsl-search"],"items":[16],"selectedItem":[1040],"isOpen":[32],"searchQuery":[32],"filteredItems":[32]},[[9,"resize","handleResize"]],{"selectedItem":["handleSelectedItemChange"],"isOpen":["handleOpenChange"]}],[1,"cpsl-nav-button-group"],[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-radio",{"checked":[4]}],[1,"cpsl-select-item",{"selected":[4],"value":[1]}],[1,"cpsl-switch",{"checked":[4]}],[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]},[[8,"cpslTabButtonSizeChange","onTabSizeChange"]],{"fullWidth":["updateSlider"],"selectedTab":["updateTab"]}],[1,"cpsl-button-group",{"selectedId":[1,"selected-id"]},null,{"selectedId":["selectItem"]}],[1,"cpsl-input",{"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"noAutoDisable":[4,"no-auto-disable"],"autofocus":[4],"disabled":[4],"contrastText":[4,"contrast-text"],"enterkeyhint":[1],"errorText":[1,"error-text"],"mask":[1],"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],"showOptionalLabel":[4,"show-optional-label"],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32],"maskedInput":[32]},null,{"disabled":["handleDisable"],"mask":["handleSetupMask"],"value":["handleValueChange"]}],[1,"cpsl-popover",{"anchorEl":[16],"anchorOriginHorizontal":[1,"anchor-origin-horizontal"],"anchorOriginVertical":[1,"anchor-origin-vertical"],"autoWidth":[4,"auto-width"],"disabled":[4],"preventBlur":[4,"prevent-blur"],"transformOriginHorizontal":[1,"transform-origin-horizontal"],"transformOriginVertical":[1,"transform-origin-vertical"],"triggerAction":[1,"trigger-action"],"trigger":[1],"windowPadding":[2,"window-padding"],"open":[32],"positionX":[32],"positionY":[32],"closePopover":[64]},null,{"trigger":["onTriggerChange"],"triggerAction":["onTriggerChange"],"preventBlur":["onTriggerChange"],"anchorOriginHorizontal":["onAnchorChange"],"anchorOriginVertical":["onAnchorChange"],"open":["onOpenChange"]}],[1,"cpsl-spinner",{"size":[2],"speed":[2]}],[1,"cpsl-button",{"as":[1],"disabled":[516],"fullWidth":[4,"full-width"],"href":[1],"size":[1],"target":[1],"variant":[513]}],[1,"cpsl-card"],[1,"cpsl-overlay",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"open":[4],"zIndexOverride":[2,"z-index-override"]},null,{"open":["toggleHeight"]}],[1,"cpsl-text",{"color":[1],"variant":[1],"weight":[1]}],[1,"cpsl-icon",{"src":[1],"icon":[1]}]]]], options);
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
exports.setNonce = index.setNonce;
|
|
@@ -13,6 +13,13 @@ export class CpslTab {
|
|
|
13
13
|
onTabsInit(ev) {
|
|
14
14
|
this.setSelected(ev);
|
|
15
15
|
}
|
|
16
|
+
componentDidLoad() {
|
|
17
|
+
new MutationObserver(() => {
|
|
18
|
+
this.cpslTabButtonSizeChange.emit({ tab: this.tab });
|
|
19
|
+
}).observe(this.el, {
|
|
20
|
+
attributes: true,
|
|
21
|
+
});
|
|
22
|
+
}
|
|
16
23
|
setSelected(ev) {
|
|
17
24
|
const dispatchedFrom = ev.target;
|
|
18
25
|
const parent = this.el.parentElement;
|
|
@@ -21,7 +28,7 @@ export class CpslTab {
|
|
|
21
28
|
}
|
|
22
29
|
}
|
|
23
30
|
render() {
|
|
24
|
-
return (h(Host, { key: '
|
|
31
|
+
return (h(Host, { key: '0db72b4aafeb1dcb0f9eb79adfc05ed9d8cfceee', class: { selected: this.selected }, onClick: this.onTabClicked }, h("div", { key: '62026b52a408de0eeea4b5bd93fa48d0e56b54e7', class: { 'tab-container': true } }, h("slot", { key: '2755cbce3b4911c7dd691f0e7bbbabe91d0314a1', name: "start" }), h("div", { key: '0a3533933c1f4b148f51c9a3ec16cc043b0626be', class: "content" }, h("slot", { key: 'a4952347ee3850ed6cf52917787b29e35fddabd5' })), h("slot", { key: 'a77a1b0b1f0ff5238d42d3b185f16799532508be', name: "end" }))));
|
|
25
32
|
}
|
|
26
33
|
static get is() { return "cpsl-tab"; }
|
|
27
34
|
static get encapsulation() { return "shadow"; }
|
|
@@ -99,6 +106,30 @@ export class CpslTab {
|
|
|
99
106
|
}
|
|
100
107
|
}
|
|
101
108
|
}
|
|
109
|
+
}, {
|
|
110
|
+
"method": "cpslTabButtonSizeChange",
|
|
111
|
+
"name": "cpslTabButtonSizeChange",
|
|
112
|
+
"bubbles": true,
|
|
113
|
+
"cancelable": true,
|
|
114
|
+
"composed": true,
|
|
115
|
+
"docs": {
|
|
116
|
+
"tags": [{
|
|
117
|
+
"name": "internal",
|
|
118
|
+
"text": undefined
|
|
119
|
+
}],
|
|
120
|
+
"text": "Emitted when tab size changes"
|
|
121
|
+
},
|
|
122
|
+
"complexType": {
|
|
123
|
+
"original": "TabSizeChangeEventDetail",
|
|
124
|
+
"resolved": "TabSizeChangeEventDetail",
|
|
125
|
+
"references": {
|
|
126
|
+
"TabSizeChangeEventDetail": {
|
|
127
|
+
"location": "import",
|
|
128
|
+
"path": "./tab-interface",
|
|
129
|
+
"id": "src/components/cpsl-tab/tab-interface.ts::TabSizeChangeEventDetail"
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
}
|
|
102
133
|
}];
|
|
103
134
|
}
|
|
104
135
|
static get elementRef() { return "el"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cpsl-tab.js","sourceRoot":"","sources":["../../../../src/components/cpsl-tab/cpsl-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAS/F,MAAM,OAAO,OAAO;;
|
|
1
|
+
{"version":3,"file":"cpsl-tab.js","sourceRoot":"","sources":["../../../../src/components/cpsl-tab/cpsl-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAS/F,MAAM,OAAO,OAAO;;QAqDV,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QAC3E,CAAC,CAAC;wBAjDiB,KAAK;;;IAqBxB,aAAa,CAAC,EAAuC;QACnD,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IACvB,CAAC;IAGD,UAAU,CAAC,EAAuC;QAChD,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IACvB,CAAC;IAED,gBAAgB;QACd,IAAI,gBAAgB,CAAC,GAAG,EAAE;YACxB,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;QACvD,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;YAClB,UAAU,EAAE,IAAI;SACjB,CAAC,CAAC;IACL,CAAC;IAEO,WAAW,CAAC,EAAuC;QACzD,MAAM,cAAc,GAAG,EAAE,CAAC,MAAqB,CAAC;QAChD,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,aAA4B,CAAC;QAEpD,IAAI,EAAE,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAI,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA,EAAE,CAAC;YAC5E,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;QAC7C,CAAC;IACH,CAAC;IAMD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,YAAY;YAClE,4DAAK,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE;gBACnC,6DAAM,IAAI,EAAC,OAAO,GAAQ;gBAC1B,4DAAK,KAAK,EAAC,SAAS;oBAClB,8DAAa,CACT;gBACN,6DAAM,IAAI,EAAC,KAAK,GAAQ,CACpB,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Listen, Element } from '@stencil/core';\nimport { TabClickEventDetail, TabSizeChangeEventDetail } from './tab-interface';\nimport { TabsChangedEventDetail } from '../cpsl-tabs/tabs-interface';\n\n@Component({\n tag: 'cpsl-tab',\n styleUrl: 'cpsl-tab.scss',\n shadow: true,\n})\nexport class CpslTab {\n @Element() el!: HTMLCpslTabElement;\n\n /**\n * The selected tab component\n */\n @Prop() selected = false;\n\n /**\n * A tab id must be provided for each `cpsl-tab`. It's used internally to reference\n * the selected tab or by the router to switch between them.\n */\n @Prop() tab: string;\n\n /**\n * Emitted when tabs are clicked\n * @internal\n */\n @Event() cpslTabButtonClick!: EventEmitter<TabClickEventDetail>;\n\n /**\n * Emitted when tab size changes\n * @internal\n */\n @Event() cpslTabButtonSizeChange!: EventEmitter<TabSizeChangeEventDetail>;\n\n @Listen('cpslTabsChanged', { target: 'window' })\n onTabsChanged(ev: CustomEvent<TabsChangedEventDetail>) {\n this.setSelected(ev);\n }\n\n @Listen('cpslTabsInit', { target: 'window' })\n onTabsInit(ev: CustomEvent<TabsChangedEventDetail>) {\n this.setSelected(ev);\n }\n\n componentDidLoad() {\n new MutationObserver(() => {\n this.cpslTabButtonSizeChange.emit({ tab: this.tab });\n }).observe(this.el, {\n attributes: true,\n });\n }\n\n private setSelected(ev: CustomEvent<TabsChangedEventDetail>) {\n const dispatchedFrom = ev.target as HTMLElement;\n const parent = this.el.parentElement as EventTarget;\n\n if (ev.composedPath().includes(parent) || dispatchedFrom?.contains(this.el)) {\n this.selected = this.tab === ev.detail.tab;\n }\n }\n\n private onTabClicked = () => {\n this.cpslTabButtonClick.emit({ tab: this.tab, selected: this.selected });\n };\n\n render() {\n return (\n <Host class={{ selected: this.selected }} onClick={this.onTabClicked}>\n <div class={{ 'tab-container': true }}>\n <slot name=\"start\"></slot>\n <div class=\"content\">\n <slot></slot>\n </div>\n <slot name=\"end\"></slot>\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab-interface.js","sourceRoot":"","sources":["../../../../src/components/cpsl-tab/tab-interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface TabClickEventDetail {\n tab: string;\n selected: boolean;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"tab-interface.js","sourceRoot":"","sources":["../../../../src/components/cpsl-tab/tab-interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface TabClickEventDetail {\n tab: string;\n selected: boolean;\n}\n\nexport interface TabSizeChangeEventDetail {\n tab: string;\n}\n"]}
|
|
@@ -26,6 +26,12 @@ export class CpslTabs {
|
|
|
26
26
|
this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
|
+
onTabSizeChange(ev) {
|
|
30
|
+
const { tab } = ev.detail;
|
|
31
|
+
if (tab === this.selectedTab) {
|
|
32
|
+
this.selectedTabRect = getTab(this.tabs, tab).getBoundingClientRect();
|
|
33
|
+
}
|
|
34
|
+
}
|
|
29
35
|
componentWillLoad() {
|
|
30
36
|
var _a, _b;
|
|
31
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 };
|
|
@@ -49,7 +55,7 @@ export class CpslTabs {
|
|
|
49
55
|
// Get border width as a number
|
|
50
56
|
const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--tabs-border-width').slice(0, -2);
|
|
51
57
|
const selectedTabRect = this.selectedTabRect;
|
|
52
|
-
return (h(Host, { key: '
|
|
58
|
+
return (h(Host, { key: 'a7b201091e8e803fdb6179883382c951cc88a888', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, h("div", { key: '7370e97866ec851b2e26231e88db112fc41dd1fd', class: "tabs-container" }, h("slot", { key: 'd2638cefef452fb3da3e0b6f7a5b852506a8e213' }), h("div", { key: 'ff20d8ff3baeb36f69cbc4a88a91639129642889', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width - 8}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth}px` } }))));
|
|
53
59
|
}
|
|
54
60
|
static get is() { return "cpsl-tabs"; }
|
|
55
61
|
static get encapsulation() { return "shadow"; }
|
|
@@ -165,6 +171,15 @@ export class CpslTabs {
|
|
|
165
171
|
"methodName": "updateTab"
|
|
166
172
|
}];
|
|
167
173
|
}
|
|
174
|
+
static get listeners() {
|
|
175
|
+
return [{
|
|
176
|
+
"name": "cpslTabButtonSizeChange",
|
|
177
|
+
"method": "onTabSizeChange",
|
|
178
|
+
"target": "window",
|
|
179
|
+
"capture": false,
|
|
180
|
+
"passive": false
|
|
181
|
+
}];
|
|
182
|
+
}
|
|
168
183
|
}
|
|
169
184
|
const getTab = (tabs, tab) => {
|
|
170
185
|
const tabEl = typeof tab === 'string' ? tabs.find(t => t.tab === tab) : tab;
|
|
@@ -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;
|
|
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, Listen } from '@stencil/core';\nimport { TabClickEventDetail, TabSizeChangeEventDetail } 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) && !oldValue) {\n this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();\n }\n }\n\n @Listen('cpslTabButtonSizeChange', { target: 'window' })\n onTabSizeChange(ev: CustomEvent<TabSizeChangeEventDetail>) {\n const { tab } = ev.detail;\n\n if (tab === this.selectedTab) {\n this.selectedTabRect = getTab(this.tabs, tab).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('--tabs-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 - 8}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth}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 @@ var patchBrowser = () => {
|
|
|
16
16
|
|
|
17
17
|
patchBrowser().then(async (options) => {
|
|
18
18
|
await globalScripts();
|
|
19
|
-
return bootstrapLazy([["cpsl-hero",[[1,"cpsl-hero",{"height":[2],"hideFadeOut":[4,"hide-fade-out"],"variant":[513],"title":[513],"subtitle":[513],"withDefaultTheme":[4,"with-default-theme"]}]]],["cpsl-modal-v2",[[1,"cpsl-modal-v2",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"elevated":[4],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"]},null,{"open":["toggleHeight"]}]]],["cpsl-nav-button",[[1,"cpsl-nav-button",{"disabled":[516],"exactMainRouteMatch":[4,"exact-main-route-match"],"exactSubRouteMatch":[4,"exact-sub-route-match"],"route":[1],"subRoutes":[16],"path":[1]}]]],["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-identicon",[[1,"cpsl-identicon",{"hash":[1],"size":[1],"variant":[1]}]]],["cpsl-info-box",[[1,"cpsl-info-box"]]],["cpsl-row",[[1,"cpsl-row"]]],["cpsl-alert_34",[[1,"cpsl-pagination",{"initialPage":[2,"initial-page"],"totalPages":[2,"total-pages"],"visiblePages":[1026,"visible-pages"],"currentPage":[32]},null,{"currentPage":["watchChange"]}],[1,"cpsl-select",{"anchorElId":[1,"anchor-el-id"],"autoWidth":[4,"auto-width"],"disabled":[4],"dropdownMaxHeight":[2,"dropdown-max-height"],"errorText":[1,"error-text"],"formatValue":[16],"helperText":[1,"helper-text"],"id":[1],"label":[1],"placeholder":[1],"required":[4],"selectedValue":[1,"selected-value"],"showFormattedSelectedItem":[4,"show-formatted-selected-item"],"showOptionalLabel":[4,"show-optional-label"],"showSearch":[4,"show-search"],"searchPlaceholder":[1,"search-placeholder"],"anchorEl":[32],"hasFocus":[32],"popoverOpen":[32],"hasSelectedItem":[32]},[[0,"cpslSelectItemClick","selectItemClickHandler"],[0,"cpslOpen","onPopoverOpen"],[0,"cpslClose","onPopoverClose"]],{"selectedValue":["onValueChange","handleValueChange"]}],[1,"cpsl-file-upload",{"errorText":[1,"error-text"],"externalFilename":[1,"external-filename"],"externalSrc":[1,"external-src"],"fileTypes":[16],"helperText":[1,"helper-text"],"label":[1],"required":[4],"showOptionalLabel":[4,"show-optional-label"],"uploadFile":[16],"file":[32],"dragOver":[32],"dragError":[32],"isUploading":[32],"uploadError":[32]}],[1,"cpsl-auth-modal",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"],"hasFooter":[32],"isMobile":[32]},null,{"open":["toggleModal"]}],[1,"cpsl-alert",{"icon":[1],"variant":[1]}],[1,"cpsl-checkbox",{"checked":[4]}],[1,"cpsl-code-input",{"code":[1025],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"length":[2],"type":[1]}],[1,"cpsl-drawer",{"anchor":[1],"anchorPosition":[2,"anchor-position"],"noOverlay":[4,"no-overlay"],"open":[4],"size":[8],"transitionDuration":[2,"transition-duration"],"transitionFunction":[1,"transition-function"],"variant":[1],"zIndexOverride":[2,"z-index-override"],"closedAnchorPosition":[32],"showTransition":[32]}],[1,"cpsl-icon-group",{"expandFrom":[1,"expand-from"],"disabled":[4],"icons":[16],"isHovered":[32]}],[1,"cpsl-slide-button",{"disabled":[4],"endIcon":[1,"end-icon"],"endText":[1,"end-text"],"startIcon":[1,"start-icon"],"startText":[1,"start-text"]}],[1,"cpsl-table",{"hasHorizontalScroll":[32],"hasVerticalScroll":[32]}],[1,"cpsl-tile-button",{"src":[1],"icon":[1]}],[1,"cpsl-app-bar",{"height":[2],"position":[1],"zIndexOverride":[2,"z-index-override"]}],[1,"cpsl-avatar",{"alt":[1],"src":[1],"variant":[1]}],[1,"cpsl-divider"],[1,"cpsl-dropdown",{"width":[1],"hasCpslSearch":[4,"has-cpsl-search"],"items":[16],"selectedItem":[1040],"isOpen":[32],"searchQuery":[32],"filteredItems":[32]},[[9,"resize","handleResize"]],{"selectedItem":["handleSelectedItemChange"],"isOpen":["handleOpenChange"]}],[1,"cpsl-nav-button-group"],[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-radio",{"checked":[4]}],[1,"cpsl-select-item",{"selected":[4],"value":[1]}],[1,"cpsl-switch",{"checked":[4]}],[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]},
|
|
19
|
+
return bootstrapLazy([["cpsl-hero",[[1,"cpsl-hero",{"height":[2],"hideFadeOut":[4,"hide-fade-out"],"variant":[513],"title":[513],"subtitle":[513],"withDefaultTheme":[4,"with-default-theme"]}]]],["cpsl-modal-v2",[[1,"cpsl-modal-v2",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"elevated":[4],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"]},null,{"open":["toggleHeight"]}]]],["cpsl-nav-button",[[1,"cpsl-nav-button",{"disabled":[516],"exactMainRouteMatch":[4,"exact-main-route-match"],"exactSubRouteMatch":[4,"exact-sub-route-match"],"route":[1],"subRoutes":[16],"path":[1]}]]],["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-identicon",[[1,"cpsl-identicon",{"hash":[1],"size":[1],"variant":[1]}]]],["cpsl-info-box",[[1,"cpsl-info-box"]]],["cpsl-row",[[1,"cpsl-row"]]],["cpsl-alert_34",[[1,"cpsl-pagination",{"initialPage":[2,"initial-page"],"totalPages":[2,"total-pages"],"visiblePages":[1026,"visible-pages"],"currentPage":[32]},null,{"currentPage":["watchChange"]}],[1,"cpsl-select",{"anchorElId":[1,"anchor-el-id"],"autoWidth":[4,"auto-width"],"disabled":[4],"dropdownMaxHeight":[2,"dropdown-max-height"],"errorText":[1,"error-text"],"formatValue":[16],"helperText":[1,"helper-text"],"id":[1],"label":[1],"placeholder":[1],"required":[4],"selectedValue":[1,"selected-value"],"showFormattedSelectedItem":[4,"show-formatted-selected-item"],"showOptionalLabel":[4,"show-optional-label"],"showSearch":[4,"show-search"],"searchPlaceholder":[1,"search-placeholder"],"anchorEl":[32],"hasFocus":[32],"popoverOpen":[32],"hasSelectedItem":[32]},[[0,"cpslSelectItemClick","selectItemClickHandler"],[0,"cpslOpen","onPopoverOpen"],[0,"cpslClose","onPopoverClose"]],{"selectedValue":["onValueChange","handleValueChange"]}],[1,"cpsl-file-upload",{"errorText":[1,"error-text"],"externalFilename":[1,"external-filename"],"externalSrc":[1,"external-src"],"fileTypes":[16],"helperText":[1,"helper-text"],"label":[1],"required":[4],"showOptionalLabel":[4,"show-optional-label"],"uploadFile":[16],"file":[32],"dragOver":[32],"dragError":[32],"isUploading":[32],"uploadError":[32]}],[1,"cpsl-auth-modal",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"],"hasFooter":[32],"isMobile":[32]},null,{"open":["toggleModal"]}],[1,"cpsl-alert",{"icon":[1],"variant":[1]}],[1,"cpsl-checkbox",{"checked":[4]}],[1,"cpsl-code-input",{"code":[1025],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"length":[2],"type":[1]}],[1,"cpsl-drawer",{"anchor":[1],"anchorPosition":[2,"anchor-position"],"noOverlay":[4,"no-overlay"],"open":[4],"size":[8],"transitionDuration":[2,"transition-duration"],"transitionFunction":[1,"transition-function"],"variant":[1],"zIndexOverride":[2,"z-index-override"],"closedAnchorPosition":[32],"showTransition":[32]}],[1,"cpsl-icon-group",{"expandFrom":[1,"expand-from"],"disabled":[4],"icons":[16],"isHovered":[32]}],[1,"cpsl-slide-button",{"disabled":[4],"endIcon":[1,"end-icon"],"endText":[1,"end-text"],"startIcon":[1,"start-icon"],"startText":[1,"start-text"]}],[1,"cpsl-table",{"hasHorizontalScroll":[32],"hasVerticalScroll":[32]}],[1,"cpsl-tile-button",{"src":[1],"icon":[1]}],[1,"cpsl-app-bar",{"height":[2],"position":[1],"zIndexOverride":[2,"z-index-override"]}],[1,"cpsl-avatar",{"alt":[1],"src":[1],"variant":[1]}],[1,"cpsl-divider"],[1,"cpsl-dropdown",{"width":[1],"hasCpslSearch":[4,"has-cpsl-search"],"items":[16],"selectedItem":[1040],"isOpen":[32],"searchQuery":[32],"filteredItems":[32]},[[9,"resize","handleResize"]],{"selectedItem":["handleSelectedItemChange"],"isOpen":["handleOpenChange"]}],[1,"cpsl-nav-button-group"],[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-radio",{"checked":[4]}],[1,"cpsl-select-item",{"selected":[4],"value":[1]}],[1,"cpsl-switch",{"checked":[4]}],[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]},[[8,"cpslTabButtonSizeChange","onTabSizeChange"]],{"fullWidth":["updateSlider"],"selectedTab":["updateTab"]}],[1,"cpsl-button-group",{"selectedId":[1,"selected-id"]},null,{"selectedId":["selectItem"]}],[1,"cpsl-input",{"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"noAutoDisable":[4,"no-auto-disable"],"autofocus":[4],"disabled":[4],"contrastText":[4,"contrast-text"],"enterkeyhint":[1],"errorText":[1,"error-text"],"mask":[1],"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],"showOptionalLabel":[4,"show-optional-label"],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32],"maskedInput":[32]},null,{"disabled":["handleDisable"],"mask":["handleSetupMask"],"value":["handleValueChange"]}],[1,"cpsl-popover",{"anchorEl":[16],"anchorOriginHorizontal":[1,"anchor-origin-horizontal"],"anchorOriginVertical":[1,"anchor-origin-vertical"],"autoWidth":[4,"auto-width"],"disabled":[4],"preventBlur":[4,"prevent-blur"],"transformOriginHorizontal":[1,"transform-origin-horizontal"],"transformOriginVertical":[1,"transform-origin-vertical"],"triggerAction":[1,"trigger-action"],"trigger":[1],"windowPadding":[2,"window-padding"],"open":[32],"positionX":[32],"positionY":[32],"closePopover":[64]},null,{"trigger":["onTriggerChange"],"triggerAction":["onTriggerChange"],"preventBlur":["onTriggerChange"],"anchorOriginHorizontal":["onAnchorChange"],"anchorOriginVertical":["onAnchorChange"],"open":["onOpenChange"]}],[1,"cpsl-spinner",{"size":[2],"speed":[2]}],[1,"cpsl-button",{"as":[1],"disabled":[516],"fullWidth":[4,"full-width"],"href":[1],"size":[1],"target":[1],"variant":[513]}],[1,"cpsl-card"],[1,"cpsl-overlay",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"open":[4],"zIndexOverride":[2,"z-index-override"]},null,{"open":["toggleHeight"]}],[1,"cpsl-text",{"color":[1],"variant":[1],"weight":[1]}],[1,"cpsl-icon",{"src":[1],"icon":[1]}]]]], options);
|
|
20
20
|
});
|
|
21
21
|
|
|
22
22
|
//# sourceMappingURL=capsule.js.map
|
|
@@ -19337,6 +19337,7 @@ const CpslTab = class {
|
|
|
19337
19337
|
constructor(hostRef) {
|
|
19338
19338
|
registerInstance(this, hostRef);
|
|
19339
19339
|
this.cpslTabButtonClick = createEvent(this, "cpslTabButtonClick", 7);
|
|
19340
|
+
this.cpslTabButtonSizeChange = createEvent(this, "cpslTabButtonSizeChange", 7);
|
|
19340
19341
|
this.onTabClicked = () => {
|
|
19341
19342
|
this.cpslTabButtonClick.emit({ tab: this.tab, selected: this.selected });
|
|
19342
19343
|
};
|
|
@@ -19349,6 +19350,13 @@ const CpslTab = class {
|
|
|
19349
19350
|
onTabsInit(ev) {
|
|
19350
19351
|
this.setSelected(ev);
|
|
19351
19352
|
}
|
|
19353
|
+
componentDidLoad() {
|
|
19354
|
+
new MutationObserver(() => {
|
|
19355
|
+
this.cpslTabButtonSizeChange.emit({ tab: this.tab });
|
|
19356
|
+
}).observe(this.el, {
|
|
19357
|
+
attributes: true,
|
|
19358
|
+
});
|
|
19359
|
+
}
|
|
19352
19360
|
setSelected(ev) {
|
|
19353
19361
|
const dispatchedFrom = ev.target;
|
|
19354
19362
|
const parent = this.el.parentElement;
|
|
@@ -19357,7 +19365,7 @@ const CpslTab = class {
|
|
|
19357
19365
|
}
|
|
19358
19366
|
}
|
|
19359
19367
|
render() {
|
|
19360
|
-
return (h(Host, { key: '
|
|
19368
|
+
return (h(Host, { key: '0db72b4aafeb1dcb0f9eb79adfc05ed9d8cfceee', class: { selected: this.selected }, onClick: this.onTabClicked }, h("div", { key: '62026b52a408de0eeea4b5bd93fa48d0e56b54e7', class: { 'tab-container': true } }, h("slot", { key: '2755cbce3b4911c7dd691f0e7bbbabe91d0314a1', name: "start" }), h("div", { key: '0a3533933c1f4b148f51c9a3ec16cc043b0626be', class: "content" }, h("slot", { key: 'a4952347ee3850ed6cf52917787b29e35fddabd5' })), h("slot", { key: 'a77a1b0b1f0ff5238d42d3b185f16799532508be', name: "end" }))));
|
|
19361
19369
|
}
|
|
19362
19370
|
get el() { return getElement(this); }
|
|
19363
19371
|
};
|
|
@@ -19454,6 +19462,12 @@ const CpslTabs = class {
|
|
|
19454
19462
|
this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();
|
|
19455
19463
|
}
|
|
19456
19464
|
}
|
|
19465
|
+
onTabSizeChange(ev) {
|
|
19466
|
+
const { tab } = ev.detail;
|
|
19467
|
+
if (tab === this.selectedTab) {
|
|
19468
|
+
this.selectedTabRect = getTab(this.tabs, tab).getBoundingClientRect();
|
|
19469
|
+
}
|
|
19470
|
+
}
|
|
19457
19471
|
componentWillLoad() {
|
|
19458
19472
|
var _a, _b;
|
|
19459
19473
|
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 };
|
|
@@ -19477,7 +19491,7 @@ const CpslTabs = class {
|
|
|
19477
19491
|
// Get border width as a number
|
|
19478
19492
|
const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--tabs-border-width').slice(0, -2);
|
|
19479
19493
|
const selectedTabRect = this.selectedTabRect;
|
|
19480
|
-
return (h(Host, { key: '
|
|
19494
|
+
return (h(Host, { key: 'a7b201091e8e803fdb6179883382c951cc88a888', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, h("div", { key: '7370e97866ec851b2e26231e88db112fc41dd1fd', class: "tabs-container" }, h("slot", { key: 'd2638cefef452fb3da3e0b6f7a5b852506a8e213' }), h("div", { key: 'ff20d8ff3baeb36f69cbc4a88a91639129642889', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width - 8}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth}px` } }))));
|
|
19481
19495
|
}
|
|
19482
19496
|
get el() { return getElement(this); }
|
|
19483
19497
|
static get watchers() { return {
|