@six-group/ui-library 0.0.0-insider.24fcc9e

package/dist/components/six-tooltip.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SixTooltip extends Components.SixTooltip, HTMLElement {}
+export const SixTooltip: {
+  prototype: SixTooltip;
+  new (): SixTooltip;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/six-tooltip.js

@@ -0,0 +1,8 @@
+import { S as SixTooltip$1, d as defineCustomElement$1 } from './six-tooltip2.js';
+
+const SixTooltip = SixTooltip$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SixTooltip, defineCustomElement };
+
+//# sourceMappingURL=six-tooltip.js.map

package/dist/components/six-tooltip.js.map

@@ -0,0 +1 @@
+{"file":"six-tooltip.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/six-tooltip2.js

@@ -0,0 +1,194 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { P as Popover } from './popover.js';
+
+const sixTooltipCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--max-width:20rem;--hide-delay:0s;--hide-duration:0.125s;--hide-timing-function:ease;--show-delay:0.125s;--show-duration:0.125s;--show-timing-function:ease;display:contents}.tooltip-positioner{position:absolute;z-index:var(--six-z-index-tooltip);pointer-events:none}.tooltip{max-width:var(--max-width);border-radius:var(--six-border-radius-medium);background-color:var(--six-tooltip-background-color);font-family:var(--six-font-family);font-size:var(--six-tooltip-font-size);font-weight:var(--six-tooltip-font-weight);line-height:var(--six-tooltip-line-height);color:var(--six-tooltip-color);opacity:0;padding:var(--six-spacing-xxx-small) var(--six-spacing-x-small);transform:scale(0.8);transform-origin:bottom;transition-property:opacity, transform;transition-delay:var(--hide-delay);transition-duration:var(--hide-duration);transition-timing-function:var(--hide-timing-function)}.tooltip::after{content:\"\";position:absolute;width:0;height:0}.tooltip-positioner[data-popper-placement^=top] .tooltip{transform-origin:bottom}.tooltip-positioner[data-popper-placement^=bottom] .tooltip{transform-origin:top}.tooltip-positioner[data-popper-placement^=left] .tooltip{transform-origin:right}.tooltip-positioner[data-popper-placement^=right] .tooltip{transform-origin:left}.tooltip-positioner.popover-visible .tooltip{opacity:1;transform:none;transition-delay:var(--show-delay);transition-duration:var(--show-duration);transition-timing-function:var(--show-timing-function)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip::after{bottom:100%;left:calc(50% - var(--six-tooltip-arrow-size));border-bottom:var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);border-left:var(--six-tooltip-arrow-size) solid transparent;border-right:var(--six-tooltip-arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=bottom-start] .tooltip::after{left:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement=bottom-end] .tooltip::after{right:var(--six-tooltip-arrow-start-end-offset);left:auto}.tooltip-positioner[data-popper-placement^=top] .tooltip::after{top:100%;left:calc(50% - var(--six-tooltip-arrow-size));border-top:var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);border-left:var(--six-tooltip-arrow-size) solid transparent;border-right:var(--six-tooltip-arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=top-start] .tooltip::after{left:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement=top-end] .tooltip::after{right:var(--six-tooltip-arrow-start-end-offset);left:auto}.tooltip-positioner[data-popper-placement^=left] .tooltip::after{top:calc(50% - var(--six-tooltip-arrow-size));left:100%;border-left:var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);border-top:var(--six-tooltip-arrow-size) solid transparent;border-bottom:var(--six-tooltip-arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=left-start] .tooltip::after{top:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement=left-end] .tooltip::after{top:auto;bottom:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement^=right] .tooltip::after{top:calc(50% - var(--six-tooltip-arrow-size));right:100%;border-right:var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);border-top:var(--six-tooltip-arrow-size) solid transparent;border-bottom:var(--six-tooltip-arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=right-start] .tooltip::after{top:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement=right-end] .tooltip::after{top:auto;bottom:var(--six-tooltip-arrow-start-end-offset)}";
+
+let id = 0;
+const SixTooltip = /*@__PURE__*/ proxyCustomElement(class SixTooltip extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.sixShow = createEvent(this, "six-tooltip-show", 7);
+    this.sixAfterShow = createEvent(this, "six-tooltip-after-show", 7);
+    this.sixHide = createEvent(this, "six-tooltip-hide", 7);
+    this.sixAfterHide = createEvent(this, "six-tooltip-after-hide", 7);
+    this.componentId = `tooltip-${++id}`;
+    this.isVisible = false;
+    this.content = '';
+    this.placement = 'top';
+    this.disabled = false;
+    this.distance = 10;
+    this.open = false;
+    this.skidding = 0;
+    this.trigger = 'hover focus';
+  }
+  handleOpenChange() {
+    this.open ? this.show() : this.hide();
+  }
+  connectedCallback() {
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleMouseOver = this.handleMouseOver.bind(this);
+    this.handleMouseOut = this.handleMouseOut.bind(this);
+    this.handleSlotChange = this.handleSlotChange.bind(this);
+  }
+  componentDidLoad() {
+    this.target = this.getTarget();
+    this.popover = new Popover(this.target, this.tooltipPositioner);
+    this.syncOptions();
+    this.host.addEventListener('blur', this.handleBlur, true);
+    this.host.addEventListener('click', this.handleClick, true);
+    this.host.addEventListener('focus', this.handleFocus, true);
+    // Show on init if open
+    this.tooltipPositioner.hidden = !this.open;
+    if (this.open) {
+      this.show();
+    }
+  }
+  componentDidUpdate() {
+    this.syncOptions();
+  }
+  disconnectedCallback() {
+    if (this.popover) {
+      this.popover.destroy();
+    }
+    this.host.removeEventListener('blur', this.handleBlur, true);
+    this.host.removeEventListener('click', this.handleClick, true);
+    this.host.removeEventListener('focus', this.handleFocus, true);
+  }
+  /** Shows the tooltip. */
+  async show() {
+    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
+    if (this.isVisible || this.disabled) {
+      return;
+    }
+    const sixShow = this.sixShow.emit();
+    if (sixShow.defaultPrevented) {
+      this.open = false;
+      return;
+    }
+    this.isVisible = true;
+    this.open = true;
+    this.popover.show();
+  }
+  /** Shows the tooltip. */
+  async hide() {
+    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
+    if (!this.isVisible || this.disabled) {
+      return;
+    }
+    const sixHide = this.sixHide.emit();
+    if (sixHide.defaultPrevented) {
+      this.open = true;
+      return;
+    }
+    this.isVisible = false;
+    this.open = false;
+    this.popover.hide();
+  }
+  getTarget() {
+    // Get the first child that isn't a <style> or content slot
+    const target = [...this.host.children].find((el) => el.tagName.toLowerCase() !== 'style' && el.getAttribute('slot') !== 'content');
+    if (!target) {
+      throw new Error('Invalid tooltip target: no child element was found.');
+    }
+    return target;
+  }
+  handleBlur() {
+    if (this.hasTrigger('focus')) {
+      this.hide();
+    }
+  }
+  handleClick() {
+    if (this.hasTrigger('click')) {
+      this.open ? this.hide() : this.show();
+    }
+  }
+  handleFocus() {
+    if (this.hasTrigger('focus')) {
+      this.show();
+    }
+  }
+  handleKeyDown(event) {
+    // Pressing escape when the target element has focus should dismiss the tooltip
+    if (this.open && event.key === 'Escape') {
+      event.stopPropagation();
+      this.hide();
+    }
+  }
+  handleMouseOver() {
+    if (this.hasTrigger('hover')) {
+      this.show();
+    }
+  }
+  handleMouseOut() {
+    if (this.hasTrigger('hover')) {
+      this.hide();
+    }
+  }
+  handleSlotChange() {
+    const oldTarget = this.target;
+    const newTarget = this.getTarget();
+    if (newTarget !== oldTarget) {
+      if (oldTarget) {
+        oldTarget.removeAttribute('aria-describedby');
+      }
+      newTarget.setAttribute('aria-describedby', this.componentId);
+    }
+  }
+  hasTrigger(triggerType) {
+    const triggers = this.trigger.split(' ');
+    return triggers.includes(triggerType);
+  }
+  syncOptions() {
+    this.popover.setOptions({
+      placement: this.placement,
+      distance: this.distance,
+      skidding: this.skidding,
+      transitionElement: this.tooltip,
+      onAfterHide: () => this.sixAfterHide.emit(),
+      onAfterShow: () => this.sixAfterShow.emit(),
+    });
+  }
+  render() {
+    return (h(Host, { onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut }, h("slot", { onSlotchange: this.handleSlotChange }), h("div", { ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner" }, h("div", { part: "base", ref: (el) => (this.tooltip = el), id: this.componentId, class: {
+        tooltip: true,
+        'tooltip--open': this.open,
+      }, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, h("slot", { name: "content" }, this.content)))));
+  }
+  get host() { return this; }
+  static get watchers() { return {
+    "open": ["handleOpenChange"]
+  }; }
+  static get style() { return sixTooltipCss; }
+}, [1, "six-tooltip", {
+    "content": [1],
+    "placement": [1],
+    "disabled": [4],
+    "distance": [2],
+    "open": [1540],
+    "skidding": [2],
+    "trigger": [1],
+    "show": [64],
+    "hide": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["six-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "six-tooltip":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SixTooltip);
+      }
+      break;
+  } });
+}
+
+export { SixTooltip as S, defineCustomElement as d };
+
+//# sourceMappingURL=six-tooltip2.js.map

package/dist/components/six-tooltip2.js.map

@@ -0,0 +1 @@
+{"file":"six-tooltip2.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,0xHAA0xH;;ACIhzH,IAAI,EAAE,GAAG,CAAC,CAAC;MAmBE,UAAU;;;;;;;;;IACrB,gBAAW,GAAG,WAAW,EAAE,EAAE,EAAE,CAAC;IAChC,cAAS,GAAG,KAAK,CAAC;mBASA,EAAE;qBAkBH,KAAK;oBAGH,KAAK;oBAGL,EAAE;gBAG0B,KAAK;oBAGjC,CAAC;mBAOF,aAAa;;EAG/B,gBAAgB;IACd,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;GACvC;EAcD,iBAAiB;IACf,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACnD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACvD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACrD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC1D;EAED,gBAAgB;IACd,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;IAC/B,IAAI,CAAC,OAAO,GAAG,IAAI,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAChE,IAAI,CAAC,WAAW,EAAE,CAAC;IAEnB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;IAC1D,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;IAC5D,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;;IAG5D,IAAI,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IAC3C,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;GACF;EAED,kBAAkB;IAChB,IAAI,CAAC,WAAW,EAAE,CAAC;GACpB;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,OAAO,EAAE;MAChB,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;KACxB;IAED,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;IAC7D,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;IAC/D,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;GAChE;;EAID,MAAM,IAAI;;IAER,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,QAAQ,EAAE;MACnC,OAAO;KACR;IAED,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;IACpC,IAAI,OAAO,CAAC,gBAAgB,EAAE;MAC5B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;MAClB,OAAO;KACR;IAED,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACjB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;GACrB;;EAID,MAAM,IAAI;;IAER,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,QAAQ,EAAE;MACpC,OAAO;KACR;IAED,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;IACpC,IAAI,OAAO,CAAC,gBAAgB,EAAE;MAC5B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;MACjB,OAAO;KACR;IAED,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACvB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAClB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;GACrB;EAED,SAAS;;IAEP,MAAM,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CACzC,CAAC,EAAE,KAAK,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,OAAO,IAAI,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,SAAS,CACvE,CAAC;IAEjB,IAAI,CAAC,MAAM,EAAE;MACX,MAAM,IAAI,KAAK,CAAC,qDAAqD,CAAC,CAAC;KACxE;IAED,OAAO,MAAM,CAAC;GACf;EAED,UAAU;IACR,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;MAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;GACF;EAED,WAAW;IACT,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;MAC5B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;KACvC;GACF;EAED,WAAW;IACT,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;MAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;GACF;EAED,aAAa,CAAC,KAAoB;;IAEhC,IAAI,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;MACvC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;GACF;EAED,eAAe;IACb,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;MAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;GACF;EAED,cAAc;IACZ,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;MAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;GACF;EAED,gBAAgB;IACd,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC;IAC9B,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;IAEnC,IAAI,SAAS,KAAK,SAAS,EAAE;MAC3B,IAAI,SAAS,EAAE;QACb,SAAS,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;OAC/C;MACD,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;KAC9D;GACF;EAED,UAAU,CAAC,WAAmB;IAC5B,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,QAAQ,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;GACvC;EAED,WAAW;IACT,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC;MACtB,SAAS,EAAE,IAAI,CAAC,SAAS;MACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,iBAAiB,EAAE,IAAI,CAAC,OAAO;MAC/B,WAAW,EAAE,MAAM,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;MAC3C,WAAW,EAAE,MAAM,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;KAC5C,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,WAAW,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,EAAE,IAAI,CAAC,cAAc,IACrG,YAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAI,EAC7C,WAAK,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,iBAAiB,GAAG,EAAE,CAAC,EAAE,KAAK,EAAC,oBAAoB,IACzE,WACE,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAChC,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;QACb,eAAe,EAAE,IAAI,CAAC,IAAI;OAC3B,EACD,IAAI,EAAC,SAAS,iBACD,IAAI,CAAC,IAAI,GAAG,OAAO,GAAG,MAAM,IAEzC,YAAM,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAQ,CACtC,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/six-tooltip/six-tooltip.scss?tag=six-tooltip&encapsulation=shadow","./src/components/six-tooltip/six-tooltip.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --hide-delay: The amount of time to wait before hiding the tooltip.\n * @prop --hide-duration: The amount of time the hide transition takes to complete.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --show-delay: The amount of time to wait before showing the tooltip.\n * @prop --show-duration: The amount of time the show transition takes to complete.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n */\n:host {\n  --max-width: 20rem;\n  --hide-delay: 0s;\n  --hide-duration: 0.125s;\n  --hide-timing-function: ease;\n  --show-delay: 0.125s;\n  --show-duration: 0.125s;\n  --show-timing-function: ease;\n\n  display: contents;\n}\n\n.tooltip-positioner {\n  position: absolute;\n  z-index: var(--six-z-index-tooltip);\n  pointer-events: none;\n}\n\n.tooltip {\n  max-width: var(--max-width);\n  border-radius: var(--six-border-radius-medium);\n  background-color: var(--six-tooltip-background-color);\n  font-family: var(--six-font-family);\n  font-size: var(--six-tooltip-font-size);\n  font-weight: var(--six-tooltip-font-weight);\n  line-height: var(--six-tooltip-line-height);\n  color: var(--six-tooltip-color);\n  opacity: 0;\n  padding: var(--six-spacing-xxx-small) var(--six-spacing-x-small);\n  transform: scale(0.8);\n  transform-origin: bottom;\n  transition-property: opacity, transform;\n  transition-delay: var(--hide-delay);\n  transition-duration: var(--hide-duration);\n  transition-timing-function: var(--hide-timing-function);\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n  }\n}\n\n.tooltip-positioner {\n  &[data-popper-placement^='top'] .tooltip {\n    transform-origin: bottom;\n  }\n\n  &[data-popper-placement^='bottom'] .tooltip {\n    transform-origin: top;\n  }\n\n  &[data-popper-placement^='left'] .tooltip {\n    transform-origin: right;\n  }\n\n  &[data-popper-placement^='right'] .tooltip {\n    transform-origin: left;\n  }\n\n  &.popover-visible .tooltip {\n    opacity: 1;\n    transform: none;\n    transition-delay: var(--show-delay);\n    transition-duration: var(--show-duration);\n    transition-timing-function: var(--show-timing-function);\n  }\n}\n\n// Arrow + bottom\n.tooltip-positioner[data-popper-placement^='bottom'] .tooltip::after {\n  bottom: 100%;\n  left: calc(50% - var(--six-tooltip-arrow-size));\n  border-bottom: var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);\n  border-left: var(--six-tooltip-arrow-size) solid transparent;\n  border-right: var(--six-tooltip-arrow-size) solid transparent;\n}\n\n.tooltip-positioner[data-popper-placement='bottom-start'] .tooltip::after {\n  left: var(--six-tooltip-arrow-start-end-offset);\n}\n\n.tooltip-positioner[data-popper-placement='bottom-end'] .tooltip::after {\n  right: var(--six-tooltip-arrow-start-end-offset);\n  left: auto;\n}\n\n// Arrow + top\n.tooltip-positioner[data-popper-placement^='top'] .tooltip::after {\n  top: 100%;\n  left: calc(50% - var(--six-tooltip-arrow-size));\n  border-top: var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);\n  border-left: var(--six-tooltip-arrow-size) solid transparent;\n  border-right: var(--six-tooltip-arrow-size) solid transparent;\n}\n\n.tooltip-positioner[data-popper-placement='top-start'] .tooltip::after {\n  left: var(--six-tooltip-arrow-start-end-offset);\n}\n\n.tooltip-positioner[data-popper-placement='top-end'] .tooltip::after {\n  right: var(--six-tooltip-arrow-start-end-offset);\n  left: auto;\n}\n\n// Arrow + left\n.tooltip-positioner[data-popper-placement^='left'] .tooltip::after {\n  top: calc(50% - var(--six-tooltip-arrow-size));\n  left: 100%;\n  border-left: var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);\n  border-top: var(--six-tooltip-arrow-size) solid transparent;\n  border-bottom: var(--six-tooltip-arrow-size) solid transparent;\n}\n\n.tooltip-positioner[data-popper-placement='left-start'] .tooltip::after {\n  top: var(--six-tooltip-arrow-start-end-offset);\n}\n\n.tooltip-positioner[data-popper-placement='left-end'] .tooltip::after {\n  top: auto;\n  bottom: var(--six-tooltip-arrow-start-end-offset);\n}\n\n// Arrow + right\n.tooltip-positioner[data-popper-placement^='right'] .tooltip::after {\n  top: calc(50% - var(--six-tooltip-arrow-size));\n  right: 100%;\n  border-right: var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);\n  border-top: var(--six-tooltip-arrow-size) solid transparent;\n  border-bottom: var(--six-tooltip-arrow-size) solid transparent;\n}\n\n.tooltip-positioner[data-popper-placement='right-start'] .tooltip::after {\n  top: var(--six-tooltip-arrow-start-end-offset);\n}\n\n.tooltip-positioner[data-popper-placement='right-end'] .tooltip::after {\n  top: auto;\n  bottom: var(--six-tooltip-arrow-start-end-offset);\n}\n","import { Component, Element, Event, EventEmitter, Host, Method, Prop, Watch, h } from '@stencil/core';\nimport Popover from '../../utils/popover';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The tooltip's target element. Only the first element will be used as the target.\n * @slot content - The tooltip's content. Alternatively, you can use the content prop.\n *\n * @part base - The component's base wrapper.\n */\n\n@Component({\n  tag: 'six-tooltip',\n  styleUrl: 'six-tooltip.scss',\n  shadow: true,\n})\nexport class SixTooltip {\n  componentId = `tooltip-${++id}`;\n  isVisible = false;\n  popover: Popover;\n  tooltipPositioner: HTMLElement;\n  target: HTMLElement;\n  tooltip: any;\n\n  @Element() host: HTMLSixTooltipElement;\n\n  /** The tooltip's content. Alternatively, you can use the content slot. */\n  @Prop() content = '';\n\n  /**\n   * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n   * inside of the viewport.\n   */\n  @Prop() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /** Set to true to disable the tooltip so it won't show when triggered. */\n  @Prop() disabled = false;\n\n  /** The distance in pixels from which to offset the tooltip away from its target. */\n  @Prop() distance = 10;\n\n  /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The distance in pixels from which to offset the tooltip along its target. */\n  @Prop() skidding = 0;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger = 'hover focus';\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. */\n  @Event({ eventName: 'six-tooltip-show' }) sixShow: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the tooltip has shown and all transitions are complete. */\n  @Event({ eventName: 'six-tooltip-after-show' }) sixAfterShow: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. */\n  @Event({ eventName: 'six-tooltip-hide' }) sixHide: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the tooltip has hidden and all transitions are complete. */\n  @Event({ eventName: 'six-tooltip-after-hide' }) sixAfterHide: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.handleBlur = this.handleBlur.bind(this);\n    this.handleClick = this.handleClick.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.handleMouseOver = this.handleMouseOver.bind(this);\n    this.handleMouseOut = this.handleMouseOut.bind(this);\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n  }\n\n  componentDidLoad() {\n    this.target = this.getTarget();\n    this.popover = new Popover(this.target, this.tooltipPositioner);\n    this.syncOptions();\n\n    this.host.addEventListener('blur', this.handleBlur, true);\n    this.host.addEventListener('click', this.handleClick, true);\n    this.host.addEventListener('focus', this.handleFocus, true);\n\n    // Show on init if open\n    this.tooltipPositioner.hidden = !this.open;\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  componentDidUpdate() {\n    this.syncOptions();\n  }\n\n  disconnectedCallback() {\n    if (this.popover) {\n      this.popover.destroy();\n    }\n\n    this.host.removeEventListener('blur', this.handleBlur, true);\n    this.host.removeEventListener('click', this.handleClick, true);\n    this.host.removeEventListener('focus', this.handleFocus, true);\n  }\n\n  /** Shows the tooltip. */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible || this.disabled) {\n      return;\n    }\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.isVisible = true;\n    this.open = true;\n    this.popover.show();\n  }\n\n  /** Shows the tooltip. */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible || this.disabled) {\n      return;\n    }\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.isVisible = false;\n    this.open = false;\n    this.popover.hide();\n  }\n\n  getTarget() {\n    // Get the first child that isn't a <style> or content slot\n    const target = [...this.host.children].find(\n      (el) => el.tagName.toLowerCase() !== 'style' && el.getAttribute('slot') !== 'content'\n    ) as HTMLElement;\n\n    if (!target) {\n      throw new Error('Invalid tooltip target: no child element was found.');\n    }\n\n    return target;\n  }\n\n  handleBlur() {\n    if (this.hasTrigger('focus')) {\n      this.hide();\n    }\n  }\n\n  handleClick() {\n    if (this.hasTrigger('click')) {\n      this.open ? this.hide() : this.show();\n    }\n  }\n\n  handleFocus() {\n    if (this.hasTrigger('focus')) {\n      this.show();\n    }\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    // Pressing escape when the target element has focus should dismiss the tooltip\n    if (this.open && event.key === 'Escape') {\n      event.stopPropagation();\n      this.hide();\n    }\n  }\n\n  handleMouseOver() {\n    if (this.hasTrigger('hover')) {\n      this.show();\n    }\n  }\n\n  handleMouseOut() {\n    if (this.hasTrigger('hover')) {\n      this.hide();\n    }\n  }\n\n  handleSlotChange() {\n    const oldTarget = this.target;\n    const newTarget = this.getTarget();\n\n    if (newTarget !== oldTarget) {\n      if (oldTarget) {\n        oldTarget.removeAttribute('aria-describedby');\n      }\n      newTarget.setAttribute('aria-describedby', this.componentId);\n    }\n  }\n\n  hasTrigger(triggerType: string) {\n    const triggers = this.trigger.split(' ');\n    return triggers.includes(triggerType);\n  }\n\n  syncOptions() {\n    this.popover.setOptions({\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n      transitionElement: this.tooltip,\n      onAfterHide: () => this.sixAfterHide.emit(),\n      onAfterShow: () => this.sixAfterShow.emit(),\n    });\n  }\n\n  render() {\n    return (\n      <Host onKeyDown={this.handleKeyDown} onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>\n        <slot onSlotchange={this.handleSlotChange} />\n        <div ref={(el) => (this.tooltipPositioner = el)} class=\"tooltip-positioner\">\n          <div\n            part=\"base\"\n            ref={(el) => (this.tooltip = el)}\n            id={this.componentId}\n            class={{\n              tooltip: true,\n              'tooltip--open': this.open,\n            }}\n            role=\"tooltip\"\n            aria-hidden={this.open ? 'false' : 'true'}\n          >\n            <slot name=\"content\">{this.content}</slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/slot.js

@@ -0,0 +1,47 @@
+//
+//
+// Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a
+// string. This is useful because we can't use slot.textContent as an alternative.
+//
+function getTextContent(slot) {
+  const nodes = slot ? slot.assignedNodes({ flatten: true }) : [];
+  let text = '';
+  [...nodes].map((node) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      text += node.textContent;
+    }
+  });
+  return text;
+}
+//
+// Determines whether an element has a slot. If name is specified, the function will look for a corresponding named
+// slot, otherwise it will look for a "default" slot (e.g. a non-empty text node or an element with no slot attribute).
+//
+function hasSlot(el, name) {
+  // Look for a named slot
+  if (name) {
+    return el.querySelector(`[slot="${name}"]`) !== null;
+  }
+  // Look for a default slot
+  return Array.from(el.childNodes).some((node) => {
+    if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== '') {
+      return true;
+    }
+    if (node.nodeType === node.ELEMENT_NODE) {
+      const el = node;
+      if (!el.hasAttribute('slot')) {
+        return true;
+      }
+    }
+    return false;
+  });
+}
+const fromPairs = (acc, [k, v]) => (Object.assign(Object.assign({}, acc), { [k]: v }));
+const getAvailableSlots = (slots) => (host) => Object.values(slots)
+  .map((name) => [name, hasSlot(host, name)])
+  .reduce(fromPairs, {});
+const getSlotChildren = (el) => { var _a; return (_a = el.querySelector('slot')) === null || _a === void 0 ? void 0 : _a.assignedElements({ flatten: true }); };
+
+export { getTextContent as a, getSlotChildren as b, getAvailableSlots as g, hasSlot as h };
+
+//# sourceMappingURL=slot.js.map

package/dist/components/slot.js.map

@@ -0,0 +1 @@
+{"file":"slot.js","mappings":"AAAA;AAqBA;AACA;AACA;AACA;SACgB,cAAc,CAAC,IAAqB;EAClD,MAAM,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,GAAG,EAAE,CAAC;EAChE,IAAI,IAAI,GAAG,EAAE,CAAC;EAEd,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI;IAClB,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,EAAE;MACpC,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC;KAC1B;GACF,CAAC,CAAC;EAEH,OAAO,IAAI,CAAC;AACd,CAAC;AAED;AACA;AACA;AACA;SACgB,OAAO,CAAC,EAAe,EAAE,IAAa;;EAEpD,IAAI,IAAI,EAAE;IACR,OAAO,EAAE,CAAC,aAAa,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC;GACtD;;EAGD,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI;IACzC,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;MACtE,OAAO,IAAI,CAAC;KACb;IAED,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE;MACvC,MAAM,EAAE,GAAG,IAAmB,CAAC;MAC/B,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;QAC5B,OAAO,IAAI,CAAC;OACb;KACF;IAED,OAAO,KAAK,CAAC;GACd,CAAC,CAAC;AACL,CAAC;AAID,MAAM,SAAS,GAAG,CAAmB,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAe,sCAAW,GAAG,KAAE,CAAC,CAAC,GAAG,CAAC,IAAG,CAAC;MAE3E,iBAAiB,GAC5B,CAAmB,KAAQ,KAC3B,CAAwB,IAAO,KAC7B,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC;GACjB,GAAG,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;GAC1C,MAAM,CAAC,SAAS,EAAE,EAAuB,EAAE;MAErC,eAAe,GAAG,CAAwB,EAAe,eACpE,OAAA,MAAA,EAAE,CAAC,aAAa,CAAC,MAAM,CAAC,0CAAE,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAQ,CAAA;;;;","names":[],"sources":["./src/utils/slot.ts"],"sourcesContent":["//\n// Given a slot, this function iterates over all of its assigned element and text nodes and returns the concatenated\n// HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.\n//\nexport function getInnerHTML(slot: HTMLSlotElement): string {\n  const nodes = slot.assignedNodes({ flatten: true });\n  let html = '';\n\n  [...nodes].map((node) => {\n    if (node.nodeType === Node.ELEMENT_NODE) {\n      html += (node as HTMLElement).outerHTML;\n    }\n\n    if (node.nodeType === Node.TEXT_NODE) {\n      html += node.textContent;\n    }\n  });\n\n  return html;\n}\n\n//\n// Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a\n// string. This is useful because we can't use slot.textContent as an alternative.\n//\nexport function getTextContent(slot: HTMLSlotElement): string {\n  const nodes = slot ? slot.assignedNodes({ flatten: true }) : [];\n  let text = '';\n\n  [...nodes].map((node) => {\n    if (node.nodeType === Node.TEXT_NODE) {\n      text += node.textContent;\n    }\n  });\n\n  return text;\n}\n\n//\n// Determines whether an element has a slot. If name is specified, the function will look for a corresponding named\n// slot, otherwise it will look for a \"default\" slot (e.g. a non-empty text node or an element with no slot attribute).\n//\nexport function hasSlot(el: HTMLElement, name?: string) {\n  // Look for a named slot\n  if (name) {\n    return el.querySelector(`[slot=\"${name}\"]`) !== null;\n  }\n\n  // Look for a default slot\n  return Array.from(el.childNodes).some((node) => {\n    if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== '') {\n      return true;\n    }\n\n    if (node.nodeType === node.ELEMENT_NODE) {\n      const el = node as HTMLElement;\n      if (!el.hasAttribute('slot')) {\n        return true;\n      }\n    }\n\n    return false;\n  });\n}\n\ntype AvailableSlots<T> = { readonly [K in keyof T]: boolean };\n\nconst fromPairs = <T extends string>(acc, [k, v]: [T, boolean]) => ({ ...acc, [k]: v });\n\nexport const getAvailableSlots =\n  <T extends object>(slots: T) =>\n  <E extends HTMLElement>(host: E): AvailableSlots<T> =>\n    Object.values(slots)\n      .map((name) => [name, hasSlot(host, name)])\n      .reduce(fromPairs, {} as AvailableSlots<T>);\n\nexport const getSlotChildren = <T extends HTMLElement>(el: HTMLElement) =>\n  el.querySelector('slot')?.assignedElements({ flatten: true }) as T[];\n"],"version":3}

package/dist/components.d.ts

@@ -0,0 +1,148 @@
+
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * DO NOT MODIFY IT MANUALLY
+ */
+export interface JsonDocs {
+    components: JsonDocsComponent[];
+    timestamp: string;
+    compiler: {
+        name: string;
+        version: string;
+        typescriptVersion: string;
+    };
+}
+export interface JsonDocsComponent {
+    dirPath?: string;
+    fileName?: string;
+    filePath?: string;
+    readmePath?: string;
+    usagesDir?: string;
+    encapsulation: 'shadow' | 'scoped' | 'none';
+    tag: string;
+    readme: string;
+    docs: string;
+    docsTags: JsonDocsTag[];
+    /**
+     * The text from the class-level JSDoc for a Stencil component, if present.
+     */
+    overview?: string;
+    usage: JsonDocsUsage;
+    props: JsonDocsProp[];
+    methods: JsonDocsMethod[];
+    events: JsonDocsEvent[];
+    listeners: JsonDocsListener[];
+    styles: JsonDocsStyle[];
+    slots: JsonDocsSlot[];
+    parts: JsonDocsPart[];
+    dependents: string[];
+    dependencies: string[];
+    dependencyGraph: JsonDocsDependencyGraph;
+    deprecation?: string;
+}
+export interface JsonDocsDependencyGraph {
+    [tagName: string]: string[];
+}
+export interface JsonDocsTag {
+    name: string;
+    text?: string;
+}
+export interface JsonDocsValue {
+    value?: string;
+    type: string;
+}
+/**
+ * A mapping of file names to their contents.
+ *
+ * This type is meant to be used when reading one or more usage markdown files associated with a component. For the
+ * given directory structure:
+ * ```
+ * src/components/my-component
+ * ├── my-component.tsx
+ * └── usage
+ *     ├── bar.md
+ *     └── foo.md
+ * ```
+ * an instance of this type would include the name of the markdown file, mapped to its contents:
+ * ```ts
+ * {
+ *   'bar': STRING_CONTENTS_OF_BAR.MD
+ *   'foo': STRING_CONTENTS_OF_FOO.MD
+ * }
+ * ```
+ */
+export interface JsonDocsUsage {
+    [key: string]: string;
+}
+export interface JsonDocsProp {
+    name: string;
+    type: string;
+    mutable: boolean;
+    /**
+     * The name of the attribute that is exposed to configure a compiled web component
+     */
+    attr?: string;
+    reflectToAttr: boolean;
+    docs: string;
+    docsTags: JsonDocsTag[];
+    default: string;
+    deprecation?: string;
+    values: JsonDocsValue[];
+    optional: boolean;
+    required: boolean;
+}
+export interface JsonDocsMethod {
+    name: string;
+    docs: string;
+    docsTags: JsonDocsTag[];
+    deprecation?: string;
+    signature: string;
+    returns: JsonDocsMethodReturn;
+    parameters: JsonDocMethodParameter[];
+}
+export interface JsonDocsMethodReturn {
+    type: string;
+    docs: string;
+}
+export interface JsonDocMethodParameter {
+    name: string;
+    type: string;
+    docs: string;
+}
+export interface JsonDocsEvent {
+    event: string;
+    bubbles: boolean;
+    cancelable: boolean;
+    composed: boolean;
+    docs: string;
+    docsTags: JsonDocsTag[];
+    deprecation?: string;
+    detail: string;
+}
+export interface JsonDocsStyle {
+    name: string;
+    docs: string;
+    annotation: string;
+}
+export interface JsonDocsListener {
+    event: string;
+    target?: string;
+    capture: boolean;
+    passive: boolean;
+}
+export interface JsonDocsSlot {
+    name: string;
+    docs: string;
+}
+export interface JsonDocsPart {
+    name: string;
+    docs: string;
+}
+export interface StyleDoc {
+    name: string;
+    docs: string;
+    annotation: 'prop';
+}
+
+declare const _default: JsonDocs;
+export default _default;