@usecapsule/core-components 3.0.1-dev.5 → 3.0.1-dev.7

Sign up to get free protection for your applications and to get access to all the features.
@@ -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-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-animation.cjs",[[1,"cpsl-animation",{"src":[1],"replayAnimation":[64]}]]],["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_33.cjs",[[1,"cpsl-pagination",{"initialPage":[2,"initial-page"],"totalPages":[2,"total-pages"],"visiblePages":[1026,"visible-pages"],"currentPage":[32]},null,{"currentPage":["watchChange"]}],[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-select",{"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"],"anchorEl":[32],"hasFocus":[32],"popoverOpen":[32],"hasSelectedItem":[32]},[[0,"cpslSelectItemClick","selectItemClickHandler"],[0,"cpslOpen","onPopoverOpen"],[0,"cpslClose","onPopoverClose"]],{"selectedValue":["onValueChange","handleValueChange"]}],[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-modal",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"footerExpanded":[4,"footer-expanded"],"footerTransitionDuration":[2,"footer-transition-duration"],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"],"hasFooter":[32]},null,{"footerExpanded":["toggleHeight"],"open":["toggleModal"]}],[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"],[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-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],"showOptionalLabel":[4,"show-optional-label"],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32]},null,{"disabled":["handleDisable"]}],[1,"cpsl-nav-button-group",{"selectedId":[1,"selected-id"]},null,{"selectedId":["selectItem"]}],[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]},null,{"fullWidth":["updateSlider"],"selectedTab":["updateTab"]}],[1,"cpsl-button",{"as":[1],"disabled":[516],"fullWidth":[4,"full-width"],"href":[1],"size":[1],"target":[1],"variant":[513]}],[1,"cpsl-button-group",{"selectedId":[1,"selected-id"]},null,{"selectedId":["selectItem"]}],[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-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);
11
+ return index.bootstrapLazy([["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-animation.cjs",[[1,"cpsl-animation",{"src":[1],"replayAnimation":[64]}]]],["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_33.cjs",[[1,"cpsl-pagination",{"initialPage":[2,"initial-page"],"totalPages":[2,"total-pages"],"visiblePages":[1026,"visible-pages"],"currentPage":[32]},null,{"currentPage":["watchChange"]}],[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-select",{"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"],"anchorEl":[32],"hasFocus":[32],"popoverOpen":[32],"hasSelectedItem":[32]},[[0,"cpslSelectItemClick","selectItemClickHandler"],[0,"cpslOpen","onPopoverOpen"],[0,"cpslClose","onPopoverClose"]],{"selectedValue":["onValueChange","handleValueChange"]}],[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-modal",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"footerExpanded":[4,"footer-expanded"],"footerTransitionDuration":[2,"footer-transition-duration"],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"],"hasFooter":[32]},null,{"footerExpanded":["toggleHeight"],"open":["toggleModal"]}],[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",{"hasStickyHeader":[4,"has-sticky-header"],"hasHorizontalScroll":[32],"hasVerticalScroll":[32],"tableHeadHeight":[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-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],"showOptionalLabel":[4,"show-optional-label"],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32]},null,{"disabled":["handleDisable"]}],[1,"cpsl-nav-button-group",{"selectedId":[1,"selected-id"]},null,{"selectedId":["selectItem"]}],[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]},null,{"fullWidth":["updateSlider"],"selectedTab":["updateTab"]}],[1,"cpsl-button",{"as":[1],"disabled":[516],"fullWidth":[4,"full-width"],"href":[1],"size":[1],"target":[1],"variant":[513]}],[1,"cpsl-button-group",{"selectedId":[1,"selected-id"]},null,{"selectedId":["selectItem"]}],[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-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;
@@ -104,8 +104,35 @@
104
104
  }
105
105
 
106
106
  .content {
107
- flex: 1;
108
107
  overflow: auto;
108
+ position: absolute;
109
+ top: 0;
110
+ left: 0;
111
+ right: 0;
112
+ bottom: 0;
113
+ }
114
+
115
+ .content-outer-container {
116
+ flex: 1;
117
+ position: relative;
118
+ }
119
+
120
+ .overlay {
121
+ position: absolute;
122
+ top: 0;
123
+ left: 0;
124
+ right: 0;
125
+ bottom: 0;
126
+ pointer-events: none;
127
+ }
128
+ .overlay.horizontal-scroll:not(.vertical-scroll) {
129
+ box-shadow: -24px 0px 24px -24px rgba(0, 0, 0, 0.1) inset, 24px 0px 24px -24px rgba(0, 0, 0, 0.1) inset;
130
+ }
131
+ .overlay.vertical-scroll:not(.horizontal-scroll) {
132
+ box-shadow: 0px -24px 24px -24px rgba(0, 0, 0, 0.1) inset, 0px 24px 24px -24px rgba(0, 0, 0, 0.1) inset;
133
+ }
134
+ .overlay.horizontal-scroll.vertical-scroll {
135
+ box-shadow: -24px -24px 24px -24px rgba(0, 0, 0, 0.1) inset, 24px 24px 24px -24px rgba(0, 0, 0, 0.1) inset;
109
136
  }
110
137
 
111
138
  .table-wrapper {
@@ -1,13 +1,51 @@
1
1
  import { Host, h } from "@stencil/core";
2
2
  export class CpslTable {
3
+ constructor() {
4
+ this.resizeOb = new ResizeObserver(entries => {
5
+ const rect = entries[0].contentRect;
6
+ const containerWidth = Math.round(rect.width);
7
+ const containerHeight = Math.round(rect.height);
8
+ const contentWidth = this.containerSlotEl.clientWidth;
9
+ const contentHeight = this.containerSlotEl.clientHeight;
10
+ if (contentWidth > containerWidth) {
11
+ this.hasHorizontalScroll = true;
12
+ }
13
+ else {
14
+ this.hasHorizontalScroll = false;
15
+ }
16
+ if (contentHeight > containerHeight) {
17
+ this.hasVerticalScroll = true;
18
+ }
19
+ else {
20
+ this.hasVerticalScroll = false;
21
+ }
22
+ });
23
+ this.hasHorizontalScroll = false;
24
+ this.hasVerticalScroll = false;
25
+ this.tableHeadHeight = 0;
26
+ this.hasStickyHeader = undefined;
27
+ }
28
+ componentDidLoad() {
29
+ this.resizeOb.observe(this.contentContainerEl);
30
+ if (this.hasStickyHeader) {
31
+ const tableHead = this.containerSlotEl.querySelector('thead');
32
+ this.tableHeadHeight = tableHead.clientHeight;
33
+ }
34
+ }
3
35
  get containerHeaderEl() {
4
36
  return this.el.querySelector('[slot="header"]');
5
37
  }
6
38
  get containerFooterEl() {
7
39
  return this.el.querySelector('[slot="footer"]');
8
40
  }
41
+ get contentContainerEl() {
42
+ return this.el.shadowRoot.getElementById('content-container');
43
+ }
44
+ get containerSlotEl() {
45
+ return this.el.querySelector('[slot="content"]');
46
+ }
9
47
  render() {
10
- return (h(Host, { key: '69d28584233c9f7545be8068c6f6fe5c6698d36f' }, h("cpsl-card", { key: 'fe1cdd5e9b0332d6056a38d32239057a252909e1', part: "table-container" }, h("div", { key: 'fd8eba0d9ebb48efb45617da3884d4a330a42704', class: { 'container-header': true, 'shown': Boolean(this.containerHeaderEl) } }, h("slot", { key: '8aaf689f820bc2c6732058b9d60a16d34974f0f0', name: "header" })), h("div", { key: '54610dd3abedc4f1214308a8b1f57d5f41b4d530', class: "content", part: "content" }, h("slot", { key: '49b369b546a08d25c85573e9807a4dd730a3e5e6', name: "content" })), h("div", { key: 'dcfb4bcbe1ad526bf07f4717ac4089711a8e4e70', class: { 'container-footer': true, 'shown': Boolean(this.containerFooterEl) } }, h("slot", { key: '4c60a98ad1098c77b8c14f8943fabe6141428fe0', name: "footer" })))));
48
+ return (h(Host, { key: '4a15f50ce49df01cb1529a08de57d99ea04c7d60' }, h("cpsl-card", { key: 'c515e9f590b83bb66c3cc5292c5fb16ac0151eab', part: "table-container" }, h("div", { key: '066b12c5f86d469d0dba78f6f20ed44b11071e8f', class: { 'container-header': true, 'shown': Boolean(this.containerHeaderEl) } }, h("slot", { key: 'a60b0d77ad95dd7af2bed4067dd7698394d38ae8', name: "header" })), h("div", { key: '992edf72e2763e17c44df0a053fb4515c8280af4', class: "content-outer-container" }, h("div", { key: '532b66c470e40b2c52e0948a514e0bf2da01d4a2', id: "content-container", class: { content: true }, part: "content" }, h("slot", { key: '5aec71b9b8ef537ac5e1426ab7c181da930ff045', name: "content" })), h("div", { key: '3f7c38510f7766e3011de4685f6a060afdb2ec2d', style: { top: `${this.tableHeadHeight}px` }, class: { 'overlay': true, 'horizontal-scroll': this.hasHorizontalScroll, 'vertical-scroll': this.hasVerticalScroll } })), h("div", { key: '59cce454d848c1661b726287cbb8d6bb3d6f632b', class: { 'container-footer': true, 'shown': Boolean(this.containerFooterEl) } }, h("slot", { key: 'ab559ea831cd9e5013e3cbd949779b19450466b8', name: "footer" })))));
11
49
  }
12
50
  static get is() { return "cpsl-table"; }
13
51
  static get encapsulation() { return "shadow"; }
@@ -21,6 +59,34 @@ export class CpslTable {
21
59
  "$": ["cpsl-table.css"]
22
60
  };
23
61
  }
62
+ static get properties() {
63
+ return {
64
+ "hasStickyHeader": {
65
+ "type": "boolean",
66
+ "mutable": false,
67
+ "complexType": {
68
+ "original": "boolean",
69
+ "resolved": "boolean",
70
+ "references": {}
71
+ },
72
+ "required": false,
73
+ "optional": true,
74
+ "docs": {
75
+ "tags": [],
76
+ "text": "Height of sticky header (if using) to offset the box shadow overlay."
77
+ },
78
+ "attribute": "has-sticky-header",
79
+ "reflect": false
80
+ }
81
+ };
82
+ }
83
+ static get states() {
84
+ return {
85
+ "hasHorizontalScroll": {},
86
+ "hasVerticalScroll": {},
87
+ "tableHeadHeight": {}
88
+ };
89
+ }
24
90
  static get elementRef() { return "el"; }
25
91
  }
26
92
  //# sourceMappingURL=cpsl-table.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"cpsl-table.js","sourceRoot":"","sources":["../../../../src/components/cpsl-table/cpsl-table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO5D,MAAM,OAAO,SAAS;IAGpB,IAAY,iBAAiB;QAC3B,OAAO,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAClD,CAAC;IAED,IAAY,iBAAiB;QAC3B,OAAO,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAClD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,kEAAW,IAAI,EAAC,iBAAiB;gBAC/B,4DAAK,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC,EAAE;oBAChF,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB;gBACN,4DAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS;oBACjC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB;gBACN,4DAAK,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC,EAAE;oBAChF,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACI,CACP,CACR,CAAC;IACJ,CAAC;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Element, h } from '@stencil/core';\n\n@Component({\n tag: 'cpsl-table',\n styleUrl: 'cpsl-table.scss',\n shadow: true,\n})\nexport class CpslTable {\n @Element() el!: HTMLCpslTableElement;\n\n private get containerHeaderEl() {\n return this.el.querySelector('[slot=\"header\"]');\n }\n\n private get containerFooterEl() {\n return this.el.querySelector('[slot=\"footer\"]');\n }\n\n render() {\n return (\n <Host>\n <cpsl-card part=\"table-container\">\n <div class={{ 'container-header': true, 'shown': Boolean(this.containerHeaderEl) }}>\n <slot name=\"header\"></slot>\n </div>\n <div class=\"content\" part=\"content\">\n <slot name=\"content\"></slot>\n </div>\n <div class={{ 'container-footer': true, 'shown': Boolean(this.containerFooterEl) }}>\n <slot name=\"footer\"></slot>\n </div>\n </cpsl-card>\n </Host>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"cpsl-table.js","sourceRoot":"","sources":["../../../../src/components/cpsl-table/cpsl-table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzE,MAAM,OAAO,SAAS;;QAqBZ,aAAQ,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE;YAE9C,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;YAGpC,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC9C,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAChD,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,CAAC,WAAW,CAAC;YACtD,MAAM,aAAa,GAAG,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC;YAExD,IAAI,YAAY,GAAG,cAAc,EAAE,CAAC;gBAClC,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;YAClC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC;YACnC,CAAC;YACD,IAAI,aAAa,GAAG,eAAe,EAAE,CAAC;gBACpC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;YAChC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;YACjC,CAAC;QACH,CAAC,CAAC,CAAC;mCAtCqC,KAAK;iCACP,KAAK;+BACR,CAAC;;;IAOpC,gBAAgB;QACd,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAE/C,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,MAAM,SAAS,GAAG,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YAC9D,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC,YAAY,CAAC;QAChD,CAAC;IACH,CAAC;IAwBD,IAAY,iBAAiB;QAC3B,OAAO,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAClD,CAAC;IAED,IAAY,iBAAiB;QAC3B,OAAO,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAClD,CAAC;IAED,IAAY,kBAAkB;QAC5B,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,mBAAmB,CAAC,CAAC;IAChE,CAAC;IAED,IAAY,eAAe;QACzB,OAAO,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IACnD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,kEAAW,IAAI,EAAC,iBAAiB;gBAC/B,4DAAK,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC,EAAE;oBAChF,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB;gBACN,4DAAK,KAAK,EAAC,yBAAyB;oBAClC,4DAAK,EAAE,EAAC,mBAAmB,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,IAAI,EAAC,SAAS;wBAClE,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB;oBACN,4DACE,KAAK,EAAE,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,eAAe,IAAI,EAAE,EAC3C,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,EAAE,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EAAE,GACpH,CACE;gBACN,4DAAK,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC,EAAE;oBAChF,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACI,CACP,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Element, h, State, Prop } from '@stencil/core';\n\n@Component({\n tag: 'cpsl-table',\n styleUrl: 'cpsl-table.scss',\n shadow: true,\n})\nexport class CpslTable {\n @Element() el!: HTMLCpslTableElement;\n\n @State() hasHorizontalScroll: boolean = false;\n @State() hasVerticalScroll: boolean = false;\n @State() tableHeadHeight: number = 0;\n\n /**\n * Height of sticky header (if using) to offset the box shadow overlay.\n */\n @Prop() hasStickyHeader?: boolean;\n\n componentDidLoad() {\n this.resizeOb.observe(this.contentContainerEl);\n\n if (this.hasStickyHeader) {\n const tableHead = this.containerSlotEl.querySelector('thead');\n this.tableHeadHeight = tableHead.clientHeight;\n }\n }\n\n private resizeOb = new ResizeObserver(entries => {\n // since we are observing only a single element, so we access the first element in entries array\n const rect = entries[0].contentRect;\n\n // current width & height\n const containerWidth = Math.round(rect.width);\n const containerHeight = Math.round(rect.height);\n const contentWidth = this.containerSlotEl.clientWidth;\n const contentHeight = this.containerSlotEl.clientHeight;\n\n if (contentWidth > containerWidth) {\n this.hasHorizontalScroll = true;\n } else {\n this.hasHorizontalScroll = false;\n }\n if (contentHeight > containerHeight) {\n this.hasVerticalScroll = true;\n } else {\n this.hasVerticalScroll = false;\n }\n });\n\n private get containerHeaderEl() {\n return this.el.querySelector('[slot=\"header\"]');\n }\n\n private get containerFooterEl() {\n return this.el.querySelector('[slot=\"footer\"]');\n }\n\n private get contentContainerEl() {\n return this.el.shadowRoot.getElementById('content-container');\n }\n\n private get containerSlotEl() {\n return this.el.querySelector('[slot=\"content\"]');\n }\n\n render() {\n return (\n <Host>\n <cpsl-card part=\"table-container\">\n <div class={{ 'container-header': true, 'shown': Boolean(this.containerHeaderEl) }}>\n <slot name=\"header\"></slot>\n </div>\n <div class=\"content-outer-container\">\n <div id=\"content-container\" class={{ content: true }} part=\"content\">\n <slot name=\"content\"></slot>\n </div>\n <div\n style={{ top: `${this.tableHeadHeight}px` }}\n class={{ 'overlay': true, 'horizontal-scroll': this.hasHorizontalScroll, 'vertical-scroll': this.hasVerticalScroll }}\n />\n </div>\n <div class={{ 'container-footer': true, 'shown': Boolean(this.containerFooterEl) }}>\n <slot name=\"footer\"></slot>\n </div>\n </cpsl-card>\n </Host>\n );\n }\n}\n"]}
@@ -46,7 +46,7 @@ export class CpslTabs {
46
46
  const tabsPosition = this.el.getBoundingClientRect();
47
47
  const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--tabs-border-width').slice(0, -2);
48
48
  const selectedTabRect = this.selectedTabRect;
49
- return (h(Host, { key: '8620de3b1cff8b60d0273f892ca7669cd53e479c', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, h("div", { key: '1441d0f383ae41c5293e2ced9a0c77b04e3cfd5f', class: "tabs-container" }, h("slot", { key: '78f40c6d6f4826bc83254349e35ef98faf3968ce' }), h("div", { key: '900ab917e38b71195cd498cc2ed05a90d48515ac', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
49
+ return (h(Host, { key: 'df9361608956f3f8e20b982120068b953a14bd1b', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, h("div", { key: 'a9bbb9371172df07aa24c803435b1da21b49744a', class: "tabs-container" }, h("slot", { key: '9d8c82a3531388035ca5a41cbdcc72c5d936cc31' }), h("div", { key: '17271c16be157fbe1296a1a71d1523bd6e9d2c03', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
50
50
  }
51
51
  static get is() { return "cpsl-tabs"; }
52
52
  static get encapsulation() { return "shadow"; }
@@ -31,7 +31,7 @@ export class CpslText {
31
31
  }
32
32
  }
33
33
  render() {
34
- return (h(Host, { key: '0f21250f8e8b38eeb854ba3b465c4ac0917b058b', class: {
34
+ return (h(Host, { key: '1886bb20c0cedf9fe76d81bb423a8310d0adf46f', class: {
35
35
  'primary': this.color === 'primary',
36
36
  'secondary': this.color === 'secondary',
37
37
  'tertiary': this.color === 'tertiary',
@@ -5,7 +5,7 @@ export class CpslTileButton {
5
5
  this.icon = undefined;
6
6
  }
7
7
  render() {
8
- return (h(Host, { key: 'f7d808cefadce272235872ba05cd60f9c0bffc3c' }, h("button", { key: '47e808a5ed0bdb6e0705d746844f74ce7ad07620', class: "button-native" }, h("cpsl-icon", { key: 'ba374a65bee6433b96d2f3c8abbe1da51f9172af', exportparts: "icon", src: this.src, icon: this.icon }), h("slot", { key: 'b5f55bdcec9566625f7c7a9567a933ff86815d6c' }))));
8
+ return (h(Host, { key: '80829e65291aff559b7fc599c83924646b344242' }, h("button", { key: '5984d2e8439caa4da667691bfb2bedf0b45d499e', class: "button-native" }, h("cpsl-icon", { key: '98e1220e588a050d0daf89873e9c40f0155e1997', exportparts: "icon", src: this.src, icon: this.icon }), h("slot", { key: '9b6b618fbbf527ab07955dde7a99ae27628e4c30' }))));
9
9
  }
10
10
  static get is() { return "cpsl-tile-button"; }
11
11
  static get encapsulation() { return "shadow"; }
@@ -16,7 +16,7 @@ var patchBrowser = () => {
16
16
 
17
17
  patchBrowser().then(async (options) => {
18
18
  await globalScripts();
19
- return bootstrapLazy([["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-animation",[[1,"cpsl-animation",{"src":[1],"replayAnimation":[64]}]]],["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_33",[[1,"cpsl-pagination",{"initialPage":[2,"initial-page"],"totalPages":[2,"total-pages"],"visiblePages":[1026,"visible-pages"],"currentPage":[32]},null,{"currentPage":["watchChange"]}],[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-select",{"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"],"anchorEl":[32],"hasFocus":[32],"popoverOpen":[32],"hasSelectedItem":[32]},[[0,"cpslSelectItemClick","selectItemClickHandler"],[0,"cpslOpen","onPopoverOpen"],[0,"cpslClose","onPopoverClose"]],{"selectedValue":["onValueChange","handleValueChange"]}],[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-modal",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"footerExpanded":[4,"footer-expanded"],"footerTransitionDuration":[2,"footer-transition-duration"],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"],"hasFooter":[32]},null,{"footerExpanded":["toggleHeight"],"open":["toggleModal"]}],[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"],[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-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],"showOptionalLabel":[4,"show-optional-label"],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32]},null,{"disabled":["handleDisable"]}],[1,"cpsl-nav-button-group",{"selectedId":[1,"selected-id"]},null,{"selectedId":["selectItem"]}],[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]},null,{"fullWidth":["updateSlider"],"selectedTab":["updateTab"]}],[1,"cpsl-button",{"as":[1],"disabled":[516],"fullWidth":[4,"full-width"],"href":[1],"size":[1],"target":[1],"variant":[513]}],[1,"cpsl-button-group",{"selectedId":[1,"selected-id"]},null,{"selectedId":["selectItem"]}],[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-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);
19
+ return bootstrapLazy([["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-animation",[[1,"cpsl-animation",{"src":[1],"replayAnimation":[64]}]]],["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_33",[[1,"cpsl-pagination",{"initialPage":[2,"initial-page"],"totalPages":[2,"total-pages"],"visiblePages":[1026,"visible-pages"],"currentPage":[32]},null,{"currentPage":["watchChange"]}],[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-select",{"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"],"anchorEl":[32],"hasFocus":[32],"popoverOpen":[32],"hasSelectedItem":[32]},[[0,"cpslSelectItemClick","selectItemClickHandler"],[0,"cpslOpen","onPopoverOpen"],[0,"cpslClose","onPopoverClose"]],{"selectedValue":["onValueChange","handleValueChange"]}],[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-modal",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"footerExpanded":[4,"footer-expanded"],"footerTransitionDuration":[2,"footer-transition-duration"],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"],"hasFooter":[32]},null,{"footerExpanded":["toggleHeight"],"open":["toggleModal"]}],[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",{"hasStickyHeader":[4,"has-sticky-header"],"hasHorizontalScroll":[32],"hasVerticalScroll":[32],"tableHeadHeight":[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-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],"showOptionalLabel":[4,"show-optional-label"],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32]},null,{"disabled":["handleDisable"]}],[1,"cpsl-nav-button-group",{"selectedId":[1,"selected-id"]},null,{"selectedId":["selectItem"]}],[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]},null,{"fullWidth":["updateSlider"],"selectedTab":["updateTab"]}],[1,"cpsl-button",{"as":[1],"disabled":[516],"fullWidth":[4,"full-width"],"href":[1],"size":[1],"target":[1],"variant":[513]}],[1,"cpsl-button-group",{"selectedId":[1,"selected-id"]},null,{"selectedId":["selectItem"]}],[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-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
@@ -15634,12 +15634,42 @@ const CpslTab = class {
15634
15634
  };
15635
15635
  CpslTab.style = CpslTabStyle0;
15636
15636
 
15637
- const cpslTableCss = ":host{--container-border-radius:var(--cpsl-border-radius-table-container);--container-border-color:var(--cpsl-color-background-16);--container-background-color:var(--cpsl-color-background-0);--container-border-width:1px;--container-header-padding-top:24px;--container-header-padding-bottom:24px;--container-header-padding-start:24px;--container-header-padding-end:24px;--container-header-border-width:1px;--container-header-border-color:var(--cpsl-color-background-16);--container-footer-padding-top:16px;--container-footer-padding-bottom:16px;--container-footer-padding-start:24px;--container-footer-padding-end:24px;--container-footer-border-width:1px;--container-footer-border-color:var(--cpsl-color-background-8);--table-header-padding-top:16px;--table-header-padding-bottom:16px;--table-header-padding-start:24px;--table-header-padding-end:24px;--table-header-background-color:var(--cpsl-color-background-4);--table-header-border-color:var(--cpsl-color-background-16);--table-header-border-width:1px;--table-content-padding-top:16px;--table-content-padding-bottom:16px;--table-content-padding-start:24px;--table-content-padding-end:24px;--table-content-border-color:var(--cpsl-color-background-8);--table-content-border-width:1px;display:block}:host cpsl-card{height:100%;--card-padding-top:0px;--card-padding-bottom:0px;--card-padding-start:0px;--card-padding-end:0px;--card-border-width:var(--container-border-width);--card-border-color:var(--container-border-color);--card-border-radius:var(--container-border-radius);--card-background-color:var(--container-background-color)}:host cpsl-card::part(card-container){height:100%;display:flex;flex-direction:column}.content{flex:1;overflow:auto}.table-wrapper{overflow:auto;height:100%}.container-header{display:none;-webkit-padding-start:var(--container-header-padding-start);padding-inline-start:var(--container-header-padding-start);-webkit-padding-end:var(--container-header-padding-end);padding-inline-end:var(--container-header-padding-end);padding-top:var(--container-header-padding-top);padding-bottom:var(--container-header-padding-bottom);border-bottom:var(--container-header-border-width) solid var(--container-header-border-color)}.container-footer{display:none;-webkit-padding-start:var(--container-footer-padding-start);padding-inline-start:var(--container-footer-padding-start);-webkit-padding-end:var(--container-footer-padding-end);padding-inline-end:var(--container-footer-padding-end);padding-top:var(--container-footer-padding-top);padding-bottom:var(--container-footer-padding-bottom);border-top:var(--container-footer-border-width) solid var(--container-footer-border-color)}.shown{display:block}";
15637
+ const cpslTableCss = ":host{--container-border-radius:var(--cpsl-border-radius-table-container);--container-border-color:var(--cpsl-color-background-16);--container-background-color:var(--cpsl-color-background-0);--container-border-width:1px;--container-header-padding-top:24px;--container-header-padding-bottom:24px;--container-header-padding-start:24px;--container-header-padding-end:24px;--container-header-border-width:1px;--container-header-border-color:var(--cpsl-color-background-16);--container-footer-padding-top:16px;--container-footer-padding-bottom:16px;--container-footer-padding-start:24px;--container-footer-padding-end:24px;--container-footer-border-width:1px;--container-footer-border-color:var(--cpsl-color-background-8);--table-header-padding-top:16px;--table-header-padding-bottom:16px;--table-header-padding-start:24px;--table-header-padding-end:24px;--table-header-background-color:var(--cpsl-color-background-4);--table-header-border-color:var(--cpsl-color-background-16);--table-header-border-width:1px;--table-content-padding-top:16px;--table-content-padding-bottom:16px;--table-content-padding-start:24px;--table-content-padding-end:24px;--table-content-border-color:var(--cpsl-color-background-8);--table-content-border-width:1px;display:block}:host cpsl-card{height:100%;--card-padding-top:0px;--card-padding-bottom:0px;--card-padding-start:0px;--card-padding-end:0px;--card-border-width:var(--container-border-width);--card-border-color:var(--container-border-color);--card-border-radius:var(--container-border-radius);--card-background-color:var(--container-background-color)}:host cpsl-card::part(card-container){height:100%;display:flex;flex-direction:column}.content{overflow:auto;position:absolute;top:0;left:0;right:0;bottom:0}.content-outer-container{flex:1;position:relative}.overlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.overlay.horizontal-scroll:not(.vertical-scroll){box-shadow:-24px 0px 24px -24px rgba(0, 0, 0, 0.1) inset, 24px 0px 24px -24px rgba(0, 0, 0, 0.1) inset}.overlay.vertical-scroll:not(.horizontal-scroll){box-shadow:0px -24px 24px -24px rgba(0, 0, 0, 0.1) inset, 0px 24px 24px -24px rgba(0, 0, 0, 0.1) inset}.overlay.horizontal-scroll.vertical-scroll{box-shadow:-24px -24px 24px -24px rgba(0, 0, 0, 0.1) inset, 24px 24px 24px -24px rgba(0, 0, 0, 0.1) inset}.table-wrapper{overflow:auto;height:100%}.container-header{display:none;-webkit-padding-start:var(--container-header-padding-start);padding-inline-start:var(--container-header-padding-start);-webkit-padding-end:var(--container-header-padding-end);padding-inline-end:var(--container-header-padding-end);padding-top:var(--container-header-padding-top);padding-bottom:var(--container-header-padding-bottom);border-bottom:var(--container-header-border-width) solid var(--container-header-border-color)}.container-footer{display:none;-webkit-padding-start:var(--container-footer-padding-start);padding-inline-start:var(--container-footer-padding-start);-webkit-padding-end:var(--container-footer-padding-end);padding-inline-end:var(--container-footer-padding-end);padding-top:var(--container-footer-padding-top);padding-bottom:var(--container-footer-padding-bottom);border-top:var(--container-footer-border-width) solid var(--container-footer-border-color)}.shown{display:block}";
15638
15638
  const CpslTableStyle0 = cpslTableCss;
15639
15639
 
15640
15640
  const CpslTable = class {
15641
15641
  constructor(hostRef) {
15642
15642
  registerInstance(this, hostRef);
15643
+ this.resizeOb = new ResizeObserver(entries => {
15644
+ const rect = entries[0].contentRect;
15645
+ const containerWidth = Math.round(rect.width);
15646
+ const containerHeight = Math.round(rect.height);
15647
+ const contentWidth = this.containerSlotEl.clientWidth;
15648
+ const contentHeight = this.containerSlotEl.clientHeight;
15649
+ if (contentWidth > containerWidth) {
15650
+ this.hasHorizontalScroll = true;
15651
+ }
15652
+ else {
15653
+ this.hasHorizontalScroll = false;
15654
+ }
15655
+ if (contentHeight > containerHeight) {
15656
+ this.hasVerticalScroll = true;
15657
+ }
15658
+ else {
15659
+ this.hasVerticalScroll = false;
15660
+ }
15661
+ });
15662
+ this.hasHorizontalScroll = false;
15663
+ this.hasVerticalScroll = false;
15664
+ this.tableHeadHeight = 0;
15665
+ this.hasStickyHeader = undefined;
15666
+ }
15667
+ componentDidLoad() {
15668
+ this.resizeOb.observe(this.contentContainerEl);
15669
+ if (this.hasStickyHeader) {
15670
+ const tableHead = this.containerSlotEl.querySelector('thead');
15671
+ this.tableHeadHeight = tableHead.clientHeight;
15672
+ }
15643
15673
  }
15644
15674
  get containerHeaderEl() {
15645
15675
  return this.el.querySelector('[slot="header"]');
@@ -15647,8 +15677,14 @@ const CpslTable = class {
15647
15677
  get containerFooterEl() {
15648
15678
  return this.el.querySelector('[slot="footer"]');
15649
15679
  }
15680
+ get contentContainerEl() {
15681
+ return this.el.shadowRoot.getElementById('content-container');
15682
+ }
15683
+ get containerSlotEl() {
15684
+ return this.el.querySelector('[slot="content"]');
15685
+ }
15650
15686
  render() {
15651
- return (h(Host, { key: '69d28584233c9f7545be8068c6f6fe5c6698d36f' }, h("cpsl-card", { key: 'fe1cdd5e9b0332d6056a38d32239057a252909e1', part: "table-container" }, h("div", { key: 'fd8eba0d9ebb48efb45617da3884d4a330a42704', class: { 'container-header': true, 'shown': Boolean(this.containerHeaderEl) } }, h("slot", { key: '8aaf689f820bc2c6732058b9d60a16d34974f0f0', name: "header" })), h("div", { key: '54610dd3abedc4f1214308a8b1f57d5f41b4d530', class: "content", part: "content" }, h("slot", { key: '49b369b546a08d25c85573e9807a4dd730a3e5e6', name: "content" })), h("div", { key: 'dcfb4bcbe1ad526bf07f4717ac4089711a8e4e70', class: { 'container-footer': true, 'shown': Boolean(this.containerFooterEl) } }, h("slot", { key: '4c60a98ad1098c77b8c14f8943fabe6141428fe0', name: "footer" })))));
15687
+ return (h(Host, { key: '4a15f50ce49df01cb1529a08de57d99ea04c7d60' }, h("cpsl-card", { key: 'c515e9f590b83bb66c3cc5292c5fb16ac0151eab', part: "table-container" }, h("div", { key: '066b12c5f86d469d0dba78f6f20ed44b11071e8f', class: { 'container-header': true, 'shown': Boolean(this.containerHeaderEl) } }, h("slot", { key: 'a60b0d77ad95dd7af2bed4067dd7698394d38ae8', name: "header" })), h("div", { key: '992edf72e2763e17c44df0a053fb4515c8280af4', class: "content-outer-container" }, h("div", { key: '532b66c470e40b2c52e0948a514e0bf2da01d4a2', id: "content-container", class: { content: true }, part: "content" }, h("slot", { key: '5aec71b9b8ef537ac5e1426ab7c181da930ff045', name: "content" })), h("div", { key: '3f7c38510f7766e3011de4685f6a060afdb2ec2d', style: { top: `${this.tableHeadHeight}px` }, class: { 'overlay': true, 'horizontal-scroll': this.hasHorizontalScroll, 'vertical-scroll': this.hasVerticalScroll } })), h("div", { key: '59cce454d848c1661b726287cbb8d6bb3d6f632b', class: { 'container-footer': true, 'shown': Boolean(this.containerFooterEl) } }, h("slot", { key: 'ab559ea831cd9e5013e3cbd949779b19450466b8', name: "footer" })))));
15652
15688
  }
15653
15689
  get el() { return getElement(this); }
15654
15690
  };
@@ -15707,7 +15743,7 @@ const CpslTabs = class {
15707
15743
  const tabsPosition = this.el.getBoundingClientRect();
15708
15744
  const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--tabs-border-width').slice(0, -2);
15709
15745
  const selectedTabRect = this.selectedTabRect;
15710
- return (h(Host, { key: '8620de3b1cff8b60d0273f892ca7669cd53e479c', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, h("div", { key: '1441d0f383ae41c5293e2ced9a0c77b04e3cfd5f', class: "tabs-container" }, h("slot", { key: '78f40c6d6f4826bc83254349e35ef98faf3968ce' }), h("div", { key: '900ab917e38b71195cd498cc2ed05a90d48515ac', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
15746
+ return (h(Host, { key: 'df9361608956f3f8e20b982120068b953a14bd1b', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, h("div", { key: 'a9bbb9371172df07aa24c803435b1da21b49744a', class: "tabs-container" }, h("slot", { key: '9d8c82a3531388035ca5a41cbdcc72c5d936cc31' }), h("div", { key: '17271c16be157fbe1296a1a71d1523bd6e9d2c03', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
15711
15747
  }
15712
15748
  get el() { return getElement(this); }
15713
15749
  static get watchers() { return {
@@ -15757,7 +15793,7 @@ const CpslText = class {
15757
15793
  }
15758
15794
  }
15759
15795
  render() {
15760
- return (h(Host, { key: '0f21250f8e8b38eeb854ba3b465c4ac0917b058b', class: {
15796
+ return (h(Host, { key: '1886bb20c0cedf9fe76d81bb423a8310d0adf46f', class: {
15761
15797
  'primary': this.color === 'primary',
15762
15798
  'secondary': this.color === 'secondary',
15763
15799
  'tertiary': this.color === 'tertiary',
@@ -15794,7 +15830,7 @@ const CpslTileButton = class {
15794
15830
  this.icon = undefined;
15795
15831
  }
15796
15832
  render() {
15797
- return (h(Host, { key: 'f7d808cefadce272235872ba05cd60f9c0bffc3c' }, h("button", { key: '47e808a5ed0bdb6e0705d746844f74ce7ad07620', class: "button-native" }, h("cpsl-icon", { key: 'ba374a65bee6433b96d2f3c8abbe1da51f9172af', exportparts: "icon", src: this.src, icon: this.icon }), h("slot", { key: 'b5f55bdcec9566625f7c7a9567a933ff86815d6c' }))));
15833
+ return (h(Host, { key: '80829e65291aff559b7fc599c83924646b344242' }, h("button", { key: '5984d2e8439caa4da667691bfb2bedf0b45d499e', class: "button-native" }, h("cpsl-icon", { key: '98e1220e588a050d0daf89873e9c40f0155e1997', exportparts: "icon", src: this.src, icon: this.icon }), h("slot", { key: '9b6b618fbbf527ab07955dde7a99ae27628e4c30' }))));
15798
15834
  }
15799
15835
  };
15800
15836
  CpslTileButton.style = CpslTileButtonStyle0;