@usecapsule/core-components 2.0.1 → 2.0.2

package/dist/capsule/cpsl-slide-button.entry.js.map

@@ -0,0 +1 @@
+{"file":"cpsl-slide-button.entry.esm.js","mappings":"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","names":[],"sources":["src/components/cpsl-slide-button/cpsl-slide-button.scss?tag=cpsl-slide-button&encapsulation=shadow","src/components/cpsl-slide-button/cpsl-slide-button.tsx"],"sourcesContent":["@import '../../themes/capsule.globals';\n\n:host {\n  /* SLIDER CONTAINER VARS */\n  --slider-container-font-size: 14px;\n  --slider-container-height: 44px;\n  --slider-container-border-width: 1px;\n  --slider-container-box-shadow: 0px 0px 4px 0px var(--cpsl-color-alpha-black-10) inset;\n\n  --slider-container-start-background-color: var(--cpsl-color-slideButton-slider-container-start-background);\n  --slider-container-end-background-color: var(--cpsl-color-slideButton-slider-container-end-background);\n  --slider-container-start-border-color: var(--cpsl-color-slideButton-slider-container-start-border);\n  --slider-container-end-border-color: var(--cpsl-color-slideButton-slider-container-end-border);\n\n  /* SLIDER VARS */\n  --slider-border-width: 1px;\n  --slider-box-shadow: 3px 0px 4px 0px var(--cpsl-color-alpha-black-16);\n\n  --slider-border-color: var(--cpsl-color-slideButton-slider-border);\n  --slider-background-color: var(--cpsl-color-slideButton-slider-background);\n  --slider-color: var(--cpsl-color-slideButton-slider-text);\n\n  /* START TEXT VARS */\n  --start-text-color: var(--cpsl-color-slideButton-start-text);\n\n  /* END TEXT VARS */\n  --end-text-color: var(--cpsl-color-slideButton-end-text);\n\n  font-family: $font-family-base;\n  display: block;\n}\n\n.slider-container {\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n\n  font-size: var(--slider-container-font-size);\n  font-weight: 500;\n\n  height: var(--slider-container-height);\n\n  border-width: var(--slider-container-border-width);\n  border-style: solid;\n  border-radius: calc(var(--slider-container-height) / 2);\n\n  box-shadow: var(--slider-container-box-shadow);\n}\n\n.slider-container-background {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n\n.start-slider-container-background {\n  background-color: var(--slider-container-start-background-color);\n  border-color: var(--slider-container-start-border-color);\n  opacity: 100%;\n}\n\n.end-slider-container-background {\n  background-color: var(--slider-container-end-background-color);\n  border-color: var(--slider-container-end-border-color);\n  opacity: 0%;\n}\n\n.start-text {\n  user-select: none;\n  color: var(--start-text-color);\n  position: absolute;\n  text-align: center;\n\n  opacity: 100%;\n\n  // Make text the width of the container minus the button, gap and right padding\n  width: calc(100% - var(--slider-container-height) - 8px - 16px);\n  left: calc(var(--slider-container-height) - 4px + 8px);\n\n  &.disabled {\n    left: 0;\n    width: 100%;\n  }\n}\n\n.end-text {\n  user-select: none;\n  color: var(--end-text-color);\n  position: absolute;\n  text-align: center;\n\n  opacity: 0%;\n\n  // Make text the width of the container minus the button, gap and left padding\n  width: calc(100% - var(--slider-container-height) - 8px);\n  left: 16px;\n}\n\n.icon {\n  position: absolute;\n}\n\n.start-icon {\n  opacity: 100%;\n}\n\n.end-icon {\n  opacity: 0%;\n}\n\n.slider {\n  left: 1px;\n  cursor: pointer;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  position: absolute;\n  z-index: 10;\n\n  height: calc(var(--slider-container-height) - 4px);\n  width: calc(var(--slider-container-height) - 4px);\n\n  color: var(--slider-color);\n  background-color: var(--slider-background-color);\n\n  border-width: var(--slider-border-width);\n  border-style: solid;\n  border-color: var(--slider-border-color);\n  border-radius: 100%;\n\n  box-shadow: var(--slider-box-shadow);\n\n  cpsl-icon {\n    --icon-color: var(--slider-color);\n  }\n\n  &.disabled {\n    visibility: hidden;\n  }\n}\n","import { Component, Host, Prop, h, Element, EventEmitter, Event } from '@stencil/core';\nimport { IconType } from '../../interface';\n\n@Component({\n  tag: 'cpsl-slide-button',\n  styleUrl: 'cpsl-slide-button.scss',\n  shadow: true,\n})\nexport class CpslSlideButton {\n  @Element() el!: HTMLCpslSlideButtonElement;\n\n  /**\n   * Whether or not the component is disabled. If true, the component will display the `startText`.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * The name of the ending icon to show.\n   */\n  @Prop() endIcon: IconType;\n\n  /**\n   * The ending text.\n   */\n  @Prop() endText: string;\n\n  /**\n   * The name of the starting icon to show.\n   */\n  @Prop() startIcon: IconType;\n\n  /**\n   * The starting text.\n   */\n  @Prop() startText: string;\n\n  /**\n   * The `cpslComplete` event is fired when the slider is at the end.\n   */\n  @Event() cpslComplete!: EventEmitter<boolean>;\n\n  componentDidLoad() {\n    this.dragElement(this.el.shadowRoot.getElementById('slider'));\n  }\n\n  private dragElement(el: HTMLElement) {\n    const pointerDown = (e: PointerEvent) => {\n      pos3 = e.clientX;\n\n      switch (e.pointerType) {\n        case 'mouse':\n          el.onmousedown = dragMouseDown;\n          break;\n        default:\n          el.ontouchstart = dragTouchDown;\n      }\n    };\n\n    const dragMouseDown = (e: MouseEvent) => {\n      e.preventDefault();\n      // get the mouse cursor position at startup:\n      pos3 = e.clientX;\n      document.onmouseup = closeDragElement;\n      // call a function whenever the cursor moves:\n      document.onmousemove = elementMouseDrag;\n    };\n\n    const dragTouchDown = (e: TouchEvent) => {\n      e.preventDefault();\n      const touchLocation = e.targetTouches[0];\n      // get the mouse cursor position at startup:\n      pos3 = touchLocation.clientX;\n      document.ontouchend = closeDragElement;\n      // call a function whenever the cursor moves:\n      document.ontouchmove = elementTouchDrag;\n    };\n\n    const elementMouseDrag = (e: MouseEvent) => {\n      e.preventDefault();\n      // calculate the new cursor position:\n      pos1 = pos3 - e.clientX;\n      pos3 = e.clientX;\n      // set the element's new position:\n      finishElementDrag(pos1);\n    };\n\n    const elementTouchDrag = (e: TouchEvent) => {\n      e.preventDefault();\n      const touchLocation = e.targetTouches[0];\n      // calculate the new cursor position:\n      pos1 = pos3 - touchLocation.clientX;\n      pos3 = touchLocation.clientX;\n      // set the element's new position:\n      finishElementDrag(pos1);\n    };\n\n    const finishElementDrag = (pos: number) => {\n      const newPos = el.offsetLeft - pos;\n      if (newPos >= minX && newPos <= maxX) {\n        const newPosPercent = Math.max(Math.min(Math.round((newPos / maxX) * 100) / 100, 100), 0);\n\n        startTextEl.style.opacity = `${(1 - newPosPercent * 2) * 100}%`;\n        endTextEl.style.opacity = `${newPosPercent * 100}%`;\n\n        startIconEl.style.opacity = `${(1 - newPosPercent * 2) * 100}%`;\n        endIconEl.style.opacity = `${newPosPercent * 100}%`;\n\n        endBackgroundEl.style.opacity = `${newPosPercent * 100}%`;\n\n        el.style.left = `${newPos}px`;\n      }\n    };\n\n    const closeDragElement = () => {\n      if (el.offsetLeft + sliderHeight >= containerWidth - sliderHeight / 2) {\n        el.style.left = `${maxX}px`;\n        startTextEl.style.opacity = '0%';\n        endTextEl.style.opacity = '100%';\n        startIconEl.style.opacity = '0%';\n        endIconEl.style.opacity = '100%';\n        endBackgroundEl.style.opacity = '100%';\n        this.cpslComplete.emit(true);\n      } else {\n        el.style.left = `${minX}px`;\n        startTextEl.style.opacity = '100%';\n        endTextEl.style.opacity = '0%';\n        startIconEl.style.opacity = '100%';\n        endIconEl.style.opacity = '0%';\n        endBackgroundEl.style.opacity = '0%';\n      }\n      // stop moving when mouse button is released:\n      document.onmouseup = null;\n      document.onmousemove = null;\n      document.ontouchend = null;\n      document.ontouchmove = null;\n    };\n\n    const startIconEl = this.startIconEl;\n    const endIconEl = this.endIconEl;\n    const startTextEl = this.startTextEl;\n    const endTextEl = this.endTextEl;\n    const endBackgroundEl = this.endBackgroundEl;\n\n    const sliderContainerEl = this.sliderContainerEl;\n    const containerWidth = sliderContainerEl.clientWidth;\n\n    const sliderHeight = el.getBoundingClientRect().height;\n\n    // Offset min by 1 for 1px left padding\n    const minX = 1;\n    // Offset max by the slider width and 1px for padding\n    const maxX = containerWidth - sliderHeight - 1;\n\n    let pos1 = 0,\n      pos3 = 0;\n\n    el.onpointerdown = pointerDown;\n  }\n\n  private get sliderContainerEl() {\n    return this.el.shadowRoot.getElementById('slider-container');\n  }\n\n  private get startTextEl() {\n    return this.el.shadowRoot.getElementById('start-text');\n  }\n\n  private get endTextEl() {\n    return this.el.shadowRoot.getElementById('end-text');\n  }\n\n  private get endBackgroundEl() {\n    return this.el.shadowRoot.getElementById('end-slider-container-background');\n  }\n\n  private get startIconEl() {\n    return this.el.shadowRoot.getElementById('start-icon');\n  }\n\n  private get endIconEl() {\n    return this.el.shadowRoot.getElementById('end-icon');\n  }\n\n  render() {\n    return (\n      <Host>\n        <div id=\"slider-container\" class=\"slider-container\">\n          <div id=\"start-slider-container-background\" class={{ 'start-slider-container-background': true, 'slider-container-background': true }} />\n          <div id=\"end-slider-container-background\" class={{ 'end-slider-container-background': true, 'slider-container-background': true }} />\n          <div id=\"slider\" class={{ slider: true, disabled: this.disabled }}>\n            <cpsl-icon id=\"start-icon\" class={{ 'start-icon': true, 'icon': true }} icon={this.startIcon} />\n            <cpsl-icon id=\"end-icon\" class={{ 'end-icon': true, 'icon': true }} icon={this.endIcon} />\n          </div>\n          <span id=\"start-text\" class={{ 'start-text': true, 'disabled': this.disabled }}>\n            {this.startText}\n          </span>\n          <span id=\"end-text\" class=\"end-text\">\n            {this.endText}\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/capsule/cpsl-spinner.entry.js

@@ -0,0 +1,25 @@
+import { r as registerInstance, h, a as Host } from './index-f19e63df.js';
+
+const cpslSpinnerCss = ":host{--path-color:var(--cpsl-color-spinner-path);--circle-color:var(--cpsl-color-spinner-circle);display:flex;justify-content:center;align-items:center}:host path{stroke:var(--path-color)}:host circle{fill:var(--circle-color)}";
+
+const CpslSpinner = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.size = 54;
+        this.speed = 1;
+    }
+    render() {
+        return (h(Host, { key: 'a5750daafb24fde73b6b86dc441132aa388a72bc', style: {
+                'height': `${this.size}px`,
+                'width': `${this.size}px`,
+                'animation': `spin ${this.speed}s linear infinite`,
+                '-webkit-animation': `spin ${this.speed}s linear infinite`,
+                '-moz-animation': `spin ${this.speed}s linear infinite`,
+            } }, h("svg", { key: 'a4aae8ef7eb5e46f59aa3f6f9b2c121e277c275b', height: this.size, width: this.size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 54 54", fill: "none" }, h("path", { key: '2f759dc4725d298cfe114973e5d33c8237c3c06b', d: "M43.1586 17C39.8082 11.5978 33.8243 8 27 8C16.5066 8 8 16.5066 8 27C8 37.4934 16.5066 46 27 46C33.8242 46 39.8082 42.4022 43.1586 37", "stroke-width": "6", "stroke-linecap": "round" }), h("circle", { key: 'b4a4c9553ea35e28a1a116641cab7bd8a434e5c6', cx: "45", cy: "27", r: "5" }))));
+    }
+};
+CpslSpinner.style = cpslSpinnerCss;
+
+export { CpslSpinner as cpsl_spinner };
+
+//# sourceMappingURL=cpsl-spinner.entry.js.map

package/dist/capsule/cpsl-spinner.entry.js.map

@@ -0,0 +1 @@
+{"file":"cpsl-spinner.entry.esm.js","mappings":";;AAAA,MAAM,cAAc,GAAG,qOAAqO;;MCO/O,WAAW;;;oBAKE,EAAE;qBAMD,CAAC;;IAE1B,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;gBAC1B,OAAO,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;gBACzB,WAAW,EAAE,QAAQ,IAAI,CAAC,KAAK,mBAAmB;gBAClD,mBAAmB,EAAE,QAAQ,IAAI,CAAC,KAAK,mBAAmB;gBAC1D,gBAAgB,EAAE,QAAQ,IAAI,CAAC,KAAK,mBAAmB;aACxD,IAED,4DAAK,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,IAC1G,6DACE,CAAC,EAAC,sIAAsI,kBAC3H,GAAG,oBACD,OAAO,GACtB,EACF,+DAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,GAAG,CAC5B,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/cpsl-spinner/cpsl-spinner.scss?tag=cpsl-spinner&encapsulation=shadow","src/components/cpsl-spinner/cpsl-spinner.tsx"],"sourcesContent":["@import '../../themes/capsule.globals';\n\n:host {\n  --path-color: var(--cpsl-color-spinner-path);\n  --circle-color: var(--cpsl-color-spinner-circle);\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  path {\n    stroke: var(--path-color);\n  }\n\n  circle {\n    fill: var(--circle-color);\n  }\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-spinner',\n  styleUrl: 'cpsl-spinner.scss',\n  shadow: true,\n})\nexport class CpslSpinner {\n  /**\n   * Size of the spinner in pixels.\n   * Default is 50.\n   */\n  @Prop() size?: number = 54;\n\n  /**\n   * Rotation speed of the spinner in seconds.\n   * Default is 1.\n   */\n  @Prop() speed?: number = 1;\n\n  render() {\n    return (\n      <Host\n        style={{\n          'height': `${this.size}px`,\n          'width': `${this.size}px`,\n          'animation': `spin ${this.speed}s linear infinite`,\n          '-webkit-animation': `spin ${this.speed}s linear infinite`,\n          '-moz-animation': `spin ${this.speed}s linear infinite`,\n        }}\n      >\n        <svg height={this.size} width={this.size} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 54 54\" fill=\"none\">\n          <path\n            d=\"M43.1586 17C39.8082 11.5978 33.8243 8 27 8C16.5066 8 8 16.5066 8 27C8 37.4934 16.5066 46 27 46C33.8242 46 39.8082 42.4022 43.1586 37\"\n            stroke-width=\"6\"\n            stroke-linecap=\"round\"\n          />\n          <circle cx=\"45\" cy=\"27\" r=\"5\" />\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/capsule/cpsl-tab.entry.js

@@ -0,0 +1,37 @@
+import { r as registerInstance, e as createEvent, h, a as Host, g as getElement } from './index-f19e63df.js';
+
+const cpslTabCss = ":host{--tab-color:var(--cpsl-color-text-primary);padding-top:var(--tab-top-padding);padding-bottom:var(--tab-bottom-padding);padding-left:var(--tab-left-padding);padding-right:var(--tab-right-padding);display:flex;flex:1 1 auto;align-items:center;cursor:pointer;z-index:10}.tab-container{align-items:center;overflow:hidden;width:100%;text-overflow:ellipsis;text-align:center;white-space:nowrap;font-weight:500;color:var(--tab-color)}";
+
+const CpslTab = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.cpslTabButtonClick = createEvent(this, "cpslTabButtonClick", 7);
+        this.onTabClicked = () => {
+            this.cpslTabButtonClick.emit({ tab: this.tab, selected: this.selected });
+        };
+        this.selected = false;
+        this.tab = undefined;
+    }
+    onTabsChanged(ev) {
+        this.setSelected(ev);
+    }
+    onTabsInit(ev) {
+        this.setSelected(ev);
+    }
+    setSelected(ev) {
+        const dispatchedFrom = ev.target;
+        const parent = this.el.parentElement;
+        if (ev.composedPath().includes(parent) || (dispatchedFrom === null || dispatchedFrom === void 0 ? void 0 : dispatchedFrom.contains(this.el))) {
+            this.selected = this.tab === ev.detail.tab;
+        }
+    }
+    render() {
+        return (h(Host, { key: 'b16c5891e0c814a6a8e1b498b3efc8ce4d9cf45e', onClick: this.onTabClicked }, h("div", { key: '3227832d09b2cea5be41ce528e58b8f246386d79', class: { 'tab-container': true } }, h("slot", { key: 'd578f97656b4f6596b044cd93575574463160600' }))));
+    }
+    get el() { return getElement(this); }
+};
+CpslTab.style = cpslTabCss;
+
+export { CpslTab as cpsl_tab };
+
+//# sourceMappingURL=cpsl-tab.entry.js.map

package/dist/capsule/cpsl-tab.entry.js.map

@@ -0,0 +1 @@
+{"file":"cpsl-tab.entry.esm.js","mappings":";;AAAA,MAAM,UAAU,GAAG,mbAAmb;;MCSzb,OAAO;;;;QAuCV,iBAAY,GAAG;YACrB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;SAC1E,CAAC;wBAnCiB,KAAK;;;IAexB,aAAa,CAAC,EAAuC;QACnD,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;KACtB;IAGD,UAAU,CAAC,EAAuC;QAChD,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;KACtB;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;YAC3E,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;SAC5C;KACF;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,YAAY,IAC9B,4DAAK,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,IACnC,8DAAa,CACT,CACD,EACP;KACH;;;;;;;","names":[],"sources":["src/components/cpsl-tab/cpsl-tab.scss?tag=cpsl-tab&encapsulation=shadow","src/components/cpsl-tab/cpsl-tab.tsx"],"sourcesContent":[":host {\n  --tab-color: var(--cpsl-color-text-primary);\n  padding-top: var(--tab-top-padding);\n  padding-bottom: var(--tab-bottom-padding);\n  padding-left: var(--tab-left-padding);\n  padding-right: var(--tab-right-padding);\n\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n\n  cursor: pointer;\n\n  z-index: 10;\n}\n\n.tab-container {\n  align-items: center;\n  overflow: hidden;\n  width: 100%;\n  text-overflow: ellipsis;\n  text-align: center;\n  white-space: nowrap;\n  font-weight: 500;\n  color: var(--tab-color);\n}\n","import { Component, Host, Prop, h, Event, EventEmitter, Listen, Element } from '@stencil/core';\nimport { TabClickEventDetail } 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  @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  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 onClick={this.onTabClicked}>\n        <div class={{ 'tab-container': true }}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/capsule/cpsl-tabs.entry.js

@@ -0,0 +1,71 @@
+import { r as registerInstance, e as createEvent, h, a as Host, g as getElement } from './index-f19e63df.js';
+
+const cpslTabsCss = ":host{--tab-top-padding:5px;--tab-bottom-padding:5px;--tab-left-padding:16px;--tab-right-padding:16px;--tabs-border-radius:var(--cpsl-border-radius-tabs);--tabs-font-size:12px;--tabs-line-height:24px;--tabs-border-width:1px;--tabs-border-color:var(--cpsl-color-tabs-border);--tabs-background-color:var(--cpsl-color-tabs-background);--slider-background-color:var(--cpsl-color-tabs-slider-background);display:inline-block;max-width:100%;font-family:var(--cpsl-font-family, inherit)}:host(.full-width){display:block}.tabs-container{position:relative;display:flex;overflow-x:scroll;overflow-y:hidden;border-width:var(--tabs-border-width);border-style:solid;border-color:var(--tabs-border-color);border-radius:var(--tabs-border-radius);background-color:var(--tabs-background-color);font-size:var(--tabs-font-size);line-height:var(--tabs-line-height);-ms-overflow-style:none;scrollbar-width:none}.tabs-container::-webkit-scrollbar{display:none}.slider{position:absolute;top:calc(var(--tabs-border-width) * -1);bottom:calc(var(--tabs-border-width) * -1);left:-1px;border-width:var(--tabs-border-width);border-style:solid;border-color:var(--tabs-border-color);border-radius:var(--tabs-border-radius);background-color:var(--slider-background-color);box-shadow:-1px 0px 2px 0px var(--cpsl-color-alpha-black-10), 1px 0px 2px 0px var(--cpsl-color-alpha-black-10)}.loaded{transition:all 0.5s}";
+
+const CpslTabs = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.cpslTabsChanged = createEvent(this, "cpslTabsChanged", 7);
+        this.cpslTabsInit = createEvent(this, "cpslTabsInit", 7);
+        this.onTabClicked = (ev) => {
+            const { tab } = ev.detail;
+            if (tab !== this.selectedTab) {
+                this.selectedTabRect = getTab(this.tabs, tab).getBoundingClientRect();
+                this.cpslTabsChanged.emit({
+                    tab,
+                });
+            }
+        };
+        this.selectedTabRect = undefined;
+        this.loaded = false;
+        this.fullWidth = undefined;
+        this.selectedTab = undefined;
+    }
+    updateSlider() {
+        setTimeout(() => {
+            this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();
+        }, 50);
+    }
+    updateTab(newValue, oldValue) {
+        if (Boolean(newValue) && !Boolean(oldValue)) {
+            this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();
+        }
+    }
+    componentWillLoad() {
+        var _a, _b;
+        this.selectedTabRect = (_b = (_a = getTab(this.tabs, this.selectedTab)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== null && _b !== void 0 ? _b : { width: 0, x: 0 };
+        this.cpslTabsInit.emit({
+            tab: this.selectedTab,
+        });
+    }
+    componentDidLoad() {
+        var _a, _b;
+        this.selectedTabRect = (_b = (_a = getTab(this.tabs, this.selectedTab)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== null && _b !== void 0 ? _b : { width: 0, x: 0 };
+        setTimeout(() => {
+            this.loaded = true;
+        }, 50);
+    }
+    get tabs() {
+        return Array.from(this.el.querySelectorAll('cpsl-tab'));
+    }
+    render() {
+        const tabsPosition = this.el.getBoundingClientRect();
+        const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--tabs-border-width').slice(0, -2);
+        const selectedTabRect = this.selectedTabRect;
+        return (h(Host, { key: '5f03a3f029645ee970383b37e191232d621c53b9', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, h("div", { key: 'e2c5310cf6fcf9d4d78c0d21c27f2ed1383d5798', class: "tabs-container" }, h("slot", { key: '033a6f5a08a857902709c1c7e167a181433424e4' }), h("div", { key: '85d604ec4134f5d0a19922b0c2a4c3df85a97d67', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "fullWidth": ["updateSlider"],
+        "selectedTab": ["updateTab"]
+    }; }
+};
+const getTab = (tabs, tab) => {
+    const tabEl = typeof tab === 'string' ? tabs.find(t => t.tab === tab) : tab;
+    return tabEl;
+};
+CpslTabs.style = cpslTabsCss;
+
+export { CpslTabs as cpsl_tabs };
+
+//# sourceMappingURL=cpsl-tabs.entry.js.map

package/dist/capsule/cpsl-tabs.entry.js.map

@@ -0,0 +1 @@
+{"file":"cpsl-tabs.entry.esm.js","mappings":"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","names":[],"sources":["src/components/cpsl-tabs/cpsl-tabs.scss?tag=cpsl-tabs&encapsulation=shadow","src/components/cpsl-tabs/cpsl-tabs.tsx"],"sourcesContent":["@import '../../themes/capsule.globals';\n\n:host {\n  --tab-top-padding: 5px;\n  --tab-bottom-padding: 5px;\n  --tab-left-padding: 16px;\n  --tab-right-padding: 16px;\n\n  --tabs-border-radius: var(--cpsl-border-radius-tabs);\n  --tabs-font-size: 12px;\n  --tabs-line-height: 24px;\n  --tabs-border-width: 1px;\n  --tabs-border-color: var(--cpsl-color-tabs-border);\n  --tabs-background-color: var(--cpsl-color-tabs-background);\n\n  --slider-background-color: var(--cpsl-color-tabs-slider-background);\n\n  display: inline-block;\n  max-width: 100%;\n  font-family: $font-family-base;\n}\n\n:host(.full-width) {\n  display: block;\n}\n\n.tabs-container {\n  position: relative;\n  display: flex;\n  overflow-x: scroll;\n  overflow-y: hidden;\n\n  border-width: var(--tabs-border-width);\n  border-style: solid;\n  border-color: var(--tabs-border-color);\n  border-radius: var(--tabs-border-radius);\n\n  background-color: var(--tabs-background-color);\n\n  font-size: var(--tabs-font-size);\n  line-height: var(--tabs-line-height);\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n}\n\n.slider {\n  position: absolute;\n  top: calc(var(--tabs-border-width) * -1);\n  bottom: calc(var(--tabs-border-width) * -1);\n  left: -1px;\n\n  border-width: var(--tabs-border-width);\n  border-style: solid;\n  border-color: var(--tabs-border-color);\n  border-radius: var(--tabs-border-radius);\n\n  background-color: var(--slider-background-color);\n\n  box-shadow: -1px 0px 2px 0px var(--cpsl-color-alpha-black-10), 1px 0px 2px 0px var(--cpsl-color-alpha-black-10);\n}\n\n.loaded {\n  transition: all 0.5s;\n}\n","import { Component, Host, Element, h, Event, Prop, EventEmitter, State, Watch } from '@stencil/core';\nimport { TabClickEventDetail } from '../cpsl-tab/tab-interface';\nimport { TabsChangedEventDetail } from './tabs-interface';\n\n@Component({\n  tag: 'cpsl-tabs',\n  styleUrl: 'cpsl-tabs.scss',\n  shadow: true,\n})\nexport class CpslTabs {\n  @Element() el!: HTMLCpslTabsElement;\n\n  @State() selectedTabRect?: DOMRect;\n  @State() loaded: boolean = false;\n\n  /**\n   * Whether or not the tabs take the full width of their container.\n   */\n  @Prop() fullWidth?: boolean;\n\n  /**\n   * The selected tab component\n   */\n  @Prop() selectedTab?: string;\n\n  /**\n   * Emitted when a tab is changed\n   */\n  @Event() cpslTabsChanged!: EventEmitter<TabsChangedEventDetail>;\n\n  /**\n   * Emitted when tabs are initialized\n   * @internal\n   */\n  @Event() cpslTabsInit!: EventEmitter<TabsChangedEventDetail>;\n\n  @Watch('fullWidth')\n  updateSlider() {\n    // Allow component to condense or expand before recalculating silder\n    setTimeout(() => {\n      this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();\n    }, 50);\n  }\n\n  @Watch('selectedTab')\n  updateTab(newValue?: string, oldValue?: string) {\n    if (Boolean(newValue) && !Boolean(oldValue)) {\n      this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();\n    }\n  }\n\n  componentWillLoad() {\n    this.selectedTabRect = getTab(this.tabs, this.selectedTab)?.getBoundingClientRect() ?? ({ width: 0, x: 0 } as DOMRect);\n\n    this.cpslTabsInit.emit({\n      tab: this.selectedTab,\n    });\n  }\n\n  componentDidLoad() {\n    this.selectedTabRect = getTab(this.tabs, this.selectedTab)?.getBoundingClientRect() ?? ({ width: 0, x: 0 } as DOMRect);\n\n    // Allow slider to be rendered with the correct initial style before the transition is added\n    setTimeout(() => {\n      this.loaded = true;\n    }, 50);\n  }\n\n  private get tabs() {\n    return Array.from(this.el.querySelectorAll('cpsl-tab'));\n  }\n\n  private onTabClicked = (ev: CustomEvent<TabClickEventDetail>) => {\n    const { tab } = ev.detail;\n\n    if (tab !== this.selectedTab) {\n      this.selectedTabRect = getTab(this.tabs, tab).getBoundingClientRect();\n\n      this.cpslTabsChanged.emit({\n        tab,\n      });\n    }\n  };\n\n  render() {\n    const tabsPosition = this.el.getBoundingClientRect();\n    // Get border width as a number\n    const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--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}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` }}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n\nconst getTab = (tabs: HTMLCpslTabElement[], tab: string | HTMLCpslTabElement): HTMLCpslTabElement | undefined => {\n  const tabEl = typeof tab === 'string' ? tabs.find(t => t.tab === tab) : tab;\n\n  return tabEl;\n};\n"],"version":3}

package/dist/capsule/cpsl-text.entry.js

@@ -0,0 +1,66 @@
+import { r as registerInstance, h, a as Host } from './index-f19e63df.js';
+
+const cpslTextCss = ":host{font-family:var(--cpsl-font-family, inherit);color:var(--cpsl-color-text-primary);padding:0px;margin:0px;display:block}:host p,h1,h2,h3,h4,h5,h6{padding:0px;margin:0px;font-weight:inherit;font-size:inherit;letter-spacing:inherit}:host(.primary){color:var(--cpsl-color-text-primary)}:host(.secondary){color:var(--cpsl-color-text-secondary)}:host(.subtle){color:var(--cpsl-color-text-subtle)}:host(.inverted){color:var(--cpsl-color-text-inverted)}:host(.error){color:var(--cpsl-color-text-error)}:host(.medium){font-weight:500}:host(.semi-bold){font-weight:600}:host(.bold){font-weight:700}:host(.body-2xs){font-size:var(--cpsl-font-size-body-2xs)}:host(.body-xs){font-size:var(--cpsl-font-size-body-xs)}:host(.body-s){font-size:var(--cpsl-font-size-body-s)}:host(.body-m){font-size:var(--cpsl-font-size-body-m)}:host(.body-l){font-size:var(--cpsl-font-size-body-l)}:host(.body-xl){font-size:var(--cpsl-font-size-body-xl)}:host(.heading-xs){font-size:var(--cpsl-font-size-heading-xs)}:host(.heading-s){font-size:var(--cpsl-font-size-heading-s)}:host(.heading-m){font-size:var(--cpsl-font-size-heading-m);letter-spacing:-0.4px}:host(.heading-l){font-size:var(--cpsl-font-size-heading-l);letter-spacing:-1.12px}:host(.heading-xl){font-size:var(--cpsl-font-size-heading-xl);letter-spacing:-1.28px}:host(.heading-2xl){font-size:var(--cpsl-font-size-heading-2xl);letter-spacing:-1.44px}";
+
+const CpslText = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.color = 'primary';
+        this.variant = 'bodyM';
+        this.weight = 'regular';
+    }
+    get Content() {
+        switch (this.variant) {
+            case 'headingXS': {
+                return (h("h6", null, h("slot", null)));
+            }
+            case 'headingS': {
+                return (h("h5", null, h("slot", null)));
+            }
+            case 'headingM': {
+                return (h("h4", null, h("slot", null)));
+            }
+            case 'headingL': {
+                return (h("h3", null, h("slot", null)));
+            }
+            case 'headingXL': {
+                return (h("h2", null, h("slot", null)));
+            }
+            case 'heading2XL': {
+                return (h("h1", null, h("slot", null)));
+            }
+            default: {
+                return (h("p", null, h("slot", null)));
+            }
+        }
+    }
+    render() {
+        return (h(Host, { key: '81d87b0076045e9a26a78d1a237c2d83a3bdbdc5', class: {
+                'primary': this.color === 'primary',
+                'secondary': this.color === 'secondary',
+                'subtle': this.color === 'subtle',
+                'inverted': this.color === 'inverted',
+                'error': this.color === 'error',
+                'medium': this.weight === 'medium',
+                'semi-bold': this.weight === 'semiBold',
+                'bold': this.weight === 'bold',
+                'body-2xs': this.variant === 'body2XS',
+                'body-xs': this.variant === 'bodyXS',
+                'body-s': this.variant === 'bodyS',
+                'body-m': this.variant === 'bodyM',
+                'body-l': this.variant === 'bodyL',
+                'body-xl': this.variant === 'bodyXL',
+                'heading-xs': this.variant === 'headingXS',
+                'heading-s': this.variant === 'headingS',
+                'heading-m': this.variant === 'headingM',
+                'heading-l': this.variant === 'headingL',
+                'heading-xl': this.variant === 'headingXL',
+                'heading-2xl': this.variant === 'heading2XL',
+            } }, this.Content));
+    }
+};
+CpslText.style = cpslTextCss;
+
+export { CpslText as cpsl_text };
+
+//# sourceMappingURL=cpsl-text.entry.js.map

package/dist/capsule/cpsl-text.entry.js.map

@@ -0,0 +1 @@
+{"file":"cpsl-text.entry.esm.js","mappings":";;AAAA,MAAM,WAAW,GAAG,22CAA22C;;MCOl3C,QAAQ;;;qBAMyD,SAAS;uBAO+E,OAAO;sBAO7G,SAAS;;IAEvE,IAAY,OAAO;QACjB,QAAQ,IAAI,CAAC,OAAO;YAClB,KAAK,WAAW,EAAE;gBAChB,QACE,cACE,eAAa,CACV,EACL;aACH;YACD,KAAK,UAAU,EAAE;gBACf,QACE,cACE,eAAa,CACV,EACL;aACH;YACD,KAAK,UAAU,EAAE;gBACf,QACE,cACE,eAAa,CACV,EACL;aACH;YACD,KAAK,UAAU,EAAE;gBACf,QACE,cACE,eAAa,CACV,EACL;aACH;YACD,KAAK,WAAW,EAAE;gBAChB,QACE,cACE,eAAa,CACV,EACL;aACH;YACD,KAAK,YAAY,EAAE;gBACjB,QACE,cACE,eAAa,CACV,EACL;aACH;YACD,SAAS;gBACP,QACE,aACE,eAAa,CACX,EACJ;aACH;SACF;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBAEL,SAAS,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;gBACnC,WAAW,EAAE,IAAI,CAAC,KAAK,KAAK,WAAW;gBACvC,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;gBACjC,UAAU,EAAE,IAAI,CAAC,KAAK,KAAK,UAAU;gBACrC,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;gBAE/B,QAAQ,EAAE,IAAI,CAAC,MAAM,KAAK,QAAQ;gBAClC,WAAW,EAAE,IAAI,CAAC,MAAM,KAAK,UAAU;gBACvC,MAAM,EAAE,IAAI,CAAC,MAAM,KAAK,MAAM;gBAE9B,UAAU,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACtC,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;gBACpC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBAClC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBAClC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBAClC,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;gBACpC,YAAY,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;gBAC1C,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACxC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACxC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACxC,YAAY,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;gBAC1C,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,YAAY;aAC7C,IAEA,IAAI,CAAC,OAAO,CACR,EACP;KACH;;;;;;","names":[],"sources":["src/components/cpsl-text/cpsl-text.scss?tag=cpsl-text&encapsulation=shadow","src/components/cpsl-text/cpsl-text.tsx"],"sourcesContent":["@import '../../themes/capsule.globals';\n\n:host {\n  font-family: $font-family-base;\n\n  color: var(--cpsl-color-text-primary);\n  padding: 0px;\n  margin: 0px;\n\n  display: block;\n}\n\n:host p,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  padding: 0px;\n  margin: 0px;\n  font-weight: inherit;\n  font-size: inherit;\n  letter-spacing: inherit;\n}\n\n:host(.primary) {\n  color: var(--cpsl-color-text-primary);\n}\n\n:host(.secondary) {\n  color: var(--cpsl-color-text-secondary);\n}\n\n:host(.subtle) {\n  color: var(--cpsl-color-text-subtle);\n}\n\n:host(.inverted) {\n  color: var(--cpsl-color-text-inverted);\n}\n\n:host(.error) {\n  color: var(--cpsl-color-text-error);\n}\n\n:host(.medium) {\n  font-weight: 500;\n}\n\n:host(.semi-bold) {\n  font-weight: 600;\n}\n\n:host(.bold) {\n  font-weight: 700;\n}\n\n:host(.body-2xs) {\n  font-size: var(--cpsl-font-size-body-2xs);\n}\n\n:host(.body-xs) {\n  font-size: var(--cpsl-font-size-body-xs);\n}\n\n:host(.body-s) {\n  font-size: var(--cpsl-font-size-body-s);\n}\n\n:host(.body-m) {\n  font-size: var(--cpsl-font-size-body-m);\n}\n\n:host(.body-l) {\n  font-size: var(--cpsl-font-size-body-l);\n}\n\n:host(.body-xl) {\n  font-size: var(--cpsl-font-size-body-xl);\n}\n\n:host(.heading-xs) {\n  font-size: var(--cpsl-font-size-heading-xs);\n}\n\n:host(.heading-s) {\n  font-size: var(--cpsl-font-size-heading-s);\n}\n\n:host(.heading-m) {\n  font-size: var(--cpsl-font-size-heading-m);\n  letter-spacing: -0.4px;\n}\n\n:host(.heading-l) {\n  font-size: var(--cpsl-font-size-heading-l);\n  letter-spacing: -1.12px;\n}\n\n:host(.heading-xl) {\n  font-size: var(--cpsl-font-size-heading-xl);\n  letter-spacing: -1.28px;\n}\n\n:host(.heading-2xl) {\n  font-size: var(--cpsl-font-size-heading-2xl);\n  letter-spacing: -1.44px;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-text',\n  styleUrl: 'cpsl-text.scss',\n  shadow: true,\n})\nexport class CpslText {\n  /**\n   * The color of text.\n   * Options are: `\"primary\"`, `\"secondary\", `\"subtle\", `\"inverted\", `\"error\".\n   * Default is: `\"primary\"`.\n   */\n  @Prop() color?: 'primary' | 'secondary' | 'subtle' | 'inverted' | 'error' = 'primary';\n\n  /**\n   * The variant of text.\n   * Options are: `\"body2XS\"`, `\"bodyXS\", `\"bodyS\", `\"bodyM\", `\"bodyL\", `\"bodyXL\", `\"headingXS\", `\"headingS\", `\"headingM\", `\"headingL\", `\"headingXL\", `\"heading2XL\".\n   * Default is: `\"bodyM\"`.\n   */\n  @Prop() variant?: 'body2XS' | 'bodyXS' | 'bodyS' | 'bodyM' | 'bodyL' | 'bodyXL' | 'headingXS' | 'headingS' | 'headingM' | 'headingL' | 'headingXL' | 'heading2XL' = 'bodyM';\n\n  /**\n   * The weight of text.\n   * Options are: `\"regular\"`, `\"medium\", `\"semiBold\", `\"bold\".\n   * Default is: `\"regular\"`.\n   */\n  @Prop() weight?: 'regular' | 'medium' | 'semiBold' | 'bold' = 'regular';\n\n  private get Content() {\n    switch (this.variant) {\n      case 'headingXS': {\n        return (\n          <h6>\n            <slot></slot>\n          </h6>\n        );\n      }\n      case 'headingS': {\n        return (\n          <h5>\n            <slot></slot>\n          </h5>\n        );\n      }\n      case 'headingM': {\n        return (\n          <h4>\n            <slot></slot>\n          </h4>\n        );\n      }\n      case 'headingL': {\n        return (\n          <h3>\n            <slot></slot>\n          </h3>\n        );\n      }\n      case 'headingXL': {\n        return (\n          <h2>\n            <slot></slot>\n          </h2>\n        );\n      }\n      case 'heading2XL': {\n        return (\n          <h1>\n            <slot></slot>\n          </h1>\n        );\n      }\n      default: {\n        return (\n          <p>\n            <slot></slot>\n          </p>\n        );\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          // COLORS\n          'primary': this.color === 'primary',\n          'secondary': this.color === 'secondary',\n          'subtle': this.color === 'subtle',\n          'inverted': this.color === 'inverted',\n          'error': this.color === 'error',\n          // WEIGHTS\n          'medium': this.weight === 'medium',\n          'semi-bold': this.weight === 'semiBold',\n          'bold': this.weight === 'bold',\n          // SIZES\n          'body-2xs': this.variant === 'body2XS',\n          'body-xs': this.variant === 'bodyXS',\n          'body-s': this.variant === 'bodyS',\n          'body-m': this.variant === 'bodyM',\n          'body-l': this.variant === 'bodyL',\n          'body-xl': this.variant === 'bodyXL',\n          'heading-xs': this.variant === 'headingXS',\n          'heading-s': this.variant === 'headingS',\n          'heading-m': this.variant === 'headingM',\n          'heading-l': this.variant === 'headingL',\n          'heading-xl': this.variant === 'headingXL',\n          'heading-2xl': this.variant === 'heading2XL',\n        }}\n      >\n        {this.Content}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/capsule/cpsl-tile-button.entry.js

@@ -0,0 +1,19 @@
+import { r as registerInstance, h, a as Host } from './index-f19e63df.js';
+
+const cpslTileButtonCss = ":host{--button-icon-color:var(--cpsl-color-text-primary);--button-border-radius:var(--cpsl-border-radius-tile-button);--button-background-color:var(--cpsl-color-tile-button-surface-default);--button-border-color:var(--cpsl-color-tile-button-border);--button-width:72px;--button-height:56px;--button-gap:4px;--button-box-shadow:0px -4px 4px 0px var(--cpsl-color-alpha-black-2) inset, 0px 4px 4px 0px var(--cpsl-color-alpha-white-4) inset}:host :hover{--button-background-color:var(--cpsl-color-tile-button-surface-hover)}:host :active{--button-background-color:var(--cpsl-color-tile-button-surface-pressed)}.button-native{border-radius:var(--button-border-radius);-webkit-padding-start:var(--button-padding-start);padding-inline-start:var(--button-padding-start);-webkit-padding-end:var(--button-padding-end);padding-inline-end:var(--button-padding-end);padding-top:var(--button-padding-top);padding-bottom:var(--button-padding-bottom);border:1px solid transparent;cursor:pointer;background-color:var(--button-background-color);border-color:var(--button-border-color);display:flex;flex-direction:column;gap:var(--button-gap);align-items:center;justify-content:center;width:var(--button-width);height:var(--button-height);box-shadow:var(--button-box-shadow)}.button-native cpsl-icon{--icon-color:var(--button-icon-color)}";
+
+const CpslTileButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.src = undefined;
+        this.icon = undefined;
+    }
+    render() {
+        return (h(Host, { key: '14b2eadfe974ab600b6acf93e583bda702a8d764' }, h("button", { key: 'd49e6badbcf1f7a30f97e7348e7171924c00b52f', class: "button-native" }, h("cpsl-icon", { key: '6fee0738b703c3f16a3e0bec4e8cb81393bbfbf6', exportparts: "icon", src: this.src, icon: this.icon }), h("slot", { key: 'b74a90c5b5bf6cd61e05f45244f78312b68fddbb' }))));
+    }
+};
+CpslTileButton.style = cpslTileButtonCss;
+
+export { CpslTileButton as cpsl_tile_button };
+
+//# sourceMappingURL=cpsl-tile-button.entry.js.map

package/dist/capsule/cpsl-tile-button.entry.js.map

@@ -0,0 +1 @@
+{"file":"cpsl-tile-button.entry.esm.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,yyCAAyyC;;MCQtzC,cAAc;;;;;;IAWzB,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,+DAAQ,KAAK,EAAC,eAAe,IAC3B,kEAAW,WAAW,EAAC,MAAM,EAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,EAChE,8DAAa,CACN,CACJ,EACP;KACH;;;;;;","names":[],"sources":["src/components/cpsl-tile-button/cpsl-tile-button.scss?tag=cpsl-tile-button&encapsulation=shadow","src/components/cpsl-tile-button/cpsl-tile-button.tsx"],"sourcesContent":["@import '../../themes/capsule.globals';\n\n:host {\n  --button-icon-color: var(--cpsl-color-text-primary);\n\n  --button-border-radius: var(--cpsl-border-radius-tile-button);\n\n  --button-background-color: var(--cpsl-color-tile-button-surface-default);\n  --button-border-color: var(--cpsl-color-tile-button-border);\n\n  --button-width: 72px;\n  --button-height: 56px;\n  --button-gap: 4px;\n\n  --button-box-shadow: 0px -4px 4px 0px var(--cpsl-color-alpha-black-2) inset, 0px 4px 4px 0px var(--cpsl-color-alpha-white-4) inset;\n}\n\n:host {\n  :hover {\n    --button-background-color: var(--cpsl-color-tile-button-surface-hover);\n  }\n  :active {\n    --button-background-color: var(--cpsl-color-tile-button-surface-pressed);\n  }\n}\n\n.button-native {\n  @include border-radius(var(--button-border-radius));\n  @include padding(var(--button-padding-top), var(--button-padding-end), var(--button-padding-bottom), var(--button-padding-start));\n\n  border: 1px solid transparent;\n  cursor: pointer;\n\n  background-color: var(--button-background-color);\n  border-color: var(--button-border-color);\n\n  display: flex;\n  flex-direction: column;\n  gap: var(--button-gap);\n\n  align-items: center;\n  justify-content: center;\n\n  width: var(--button-width);\n  height: var(--button-height);\n\n  box-shadow: var(--button-box-shadow);\n\n  cpsl-icon {\n    --icon-color: var(--button-icon-color);\n  }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport { IconType } from '../../interface';\n\n@Component({\n  tag: 'cpsl-tile-button',\n  styleUrl: 'cpsl-tile-button.scss',\n  shadow: true,\n})\nexport class CpslTileButton {\n  /**\n   * The external source of the icon. If both `icon` and `src` are provided, `icon` will be used.\n   */\n  @Prop() src?: string;\n\n  /**\n   * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.\n   */\n  @Prop() icon?: IconType;\n\n  render() {\n    return (\n      <Host>\n        <button class=\"button-native\">\n          <cpsl-icon exportparts=\"icon\" src={this.src} icon={this.icon} />\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}