@six-group/ui-library 3.0.0-beta.1.7

package/dist/collection/components/six-timepicker/six-timepicker.types.js

@@ -0,0 +1,40 @@
+/*
+ * Defines the different time periods for the 12-hour-clock
+ */
+export var SixTimePeriod;
+(function (SixTimePeriod) {
+  SixTimePeriod["AM"] = "AM";
+  SixTimePeriod["PM"] = "PM";
+})(SixTimePeriod || (SixTimePeriod = {}));
+export var SixTimePropertyName;
+(function (SixTimePropertyName) {
+  SixTimePropertyName["HOURS"] = "hours";
+  SixTimePropertyName["MINUTES"] = "minutes";
+  SixTimePropertyName["SECONDS"] = "seconds";
+  SixTimePropertyName["MILLISECONDS"] = "milliseconds";
+  SixTimePropertyName["HAS_24_HOURS"] = "has24Hours";
+  SixTimePropertyName["PERIOD"] = "period";
+})(SixTimePropertyName || (SixTimePropertyName = {}));
+/*
+ * Defines the different time units allowed to use in a timestring
+ */
+export var TIME_FORMAT_CHAR;
+(function (TIME_FORMAT_CHAR) {
+  TIME_FORMAT_CHAR["HOUR_24"] = "HH";
+  TIME_FORMAT_CHAR["HOUR_12"] = "hh";
+  TIME_FORMAT_CHAR["MINUTE"] = "mm";
+  TIME_FORMAT_CHAR["SECOND"] = "ss";
+  TIME_FORMAT_CHAR["MILLISECOND"] = "ms";
+  TIME_FORMAT_CHAR["PERIOD"] = "aa";
+})(TIME_FORMAT_CHAR || (TIME_FORMAT_CHAR = {}));
+/*
+ * Defines a mapping from the time format unit characters to the sixTime property name
+ */
+export const TIME_FORMAT_CHAR_TO_SIX_TIME_PROPERTY_MAP = {
+  [TIME_FORMAT_CHAR.HOUR_24]: 'hours',
+  [TIME_FORMAT_CHAR.HOUR_12]: 'hours',
+  [TIME_FORMAT_CHAR.MINUTE]: 'minutes',
+  [TIME_FORMAT_CHAR.SECOND]: 'seconds',
+  [TIME_FORMAT_CHAR.MILLISECOND]: 'milliseconds',
+  [TIME_FORMAT_CHAR.PERIOD]: 'period',
+};

package/dist/collection/components/six-tooltip/six-tooltip.css

@@ -0,0 +1,146 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: inherit;
+}
+
+/**
+ * @prop --hide-delay: The amount of time to wait before hiding the tooltip.
+ * @prop --hide-duration: The amount of time the hide transition takes to complete.
+ * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.
+ * @prop --max-width: The maximum width of the tooltip.
+ * @prop --show-delay: The amount of time to wait before showing the tooltip.
+ * @prop --show-duration: The amount of time the show transition takes to complete.
+ * @prop --show-timing-function: The timing function (easing) to use for the show transition.
+ */
+: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);
+}

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

@@ -0,0 +1,435 @@
+import { Component, Element, Event, Host, Method, Prop, Watch, h } from '@stencil/core';
+import Popover from '../../utils/popover';
+let id = 0;
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot - The tooltip's target element. Only the first element will be used as the target.
+ * @slot content - The tooltip's content. Alternatively, you can use the content prop.
+ *
+ * @part base - The component's base wrapper.
+ */
+export class SixTooltip {
+  constructor() {
+    this.componentId = `tooltip-${++id}`;
+    this.isVisible = false;
+    /** The tooltip's content. Alternatively, you can use the content slot. */
+    this.content = '';
+    /**
+     * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
+     * inside of the viewport.
+     */
+    this.placement = 'top';
+    /** Set to true to disable the tooltip so it won't show when triggered. */
+    this.disabled = false;
+    /** The distance in pixels from which to offset the tooltip away from its target. */
+    this.distance = 10;
+    /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */
+    this.open = false;
+    /** The distance in pixels from which to offset the tooltip along its target. */
+    this.skidding = 0;
+    /**
+     * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
+     * options can be passed by separating them with a space. When manual is used, the tooltip must be activated
+     * programmatically.
+     */
+    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() {
+    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)))));
+  }
+  static get is() { return "six-tooltip"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["six-tooltip.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["six-tooltip.css"]
+  }; }
+  static get properties() { return {
+    "content": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The tooltip's content. Alternatively, you can use the content slot."
+      },
+      "attribute": "content",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "placement": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "| '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'",
+        "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport."
+      },
+      "attribute": "placement",
+      "reflect": false,
+      "defaultValue": "'top'"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true to disable the tooltip so it won't show when triggered."
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "distance": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The distance in pixels from which to offset the tooltip away from its target."
+      },
+      "attribute": "distance",
+      "reflect": false,
+      "defaultValue": "10"
+    },
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods."
+      },
+      "attribute": "open",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "skidding": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The distance in pixels from which to offset the tooltip along its target."
+      },
+      "attribute": "skidding",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "trigger": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\nprogrammatically."
+      },
+      "attribute": "trigger",
+      "reflect": false,
+      "defaultValue": "'hover focus'"
+    }
+  }; }
+  static get events() { return [{
+      "method": "sixShow",
+      "name": "six-tooltip-show",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown."
+      },
+      "complexType": {
+        "original": "EmptyPayload",
+        "resolved": "undefined",
+        "references": {
+          "EmptyPayload": {
+            "location": "import",
+            "path": "../../utils/types"
+          }
+        }
+      }
+    }, {
+      "method": "sixAfterShow",
+      "name": "six-tooltip-after-show",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted after the tooltip has shown and all transitions are complete."
+      },
+      "complexType": {
+        "original": "EmptyPayload",
+        "resolved": "undefined",
+        "references": {
+          "EmptyPayload": {
+            "location": "import",
+            "path": "../../utils/types"
+          }
+        }
+      }
+    }, {
+      "method": "sixHide",
+      "name": "six-tooltip-hide",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden."
+      },
+      "complexType": {
+        "original": "EmptyPayload",
+        "resolved": "undefined",
+        "references": {
+          "EmptyPayload": {
+            "location": "import",
+            "path": "../../utils/types"
+          }
+        }
+      }
+    }, {
+      "method": "sixAfterHide",
+      "name": "six-tooltip-after-hide",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted after the tooltip has hidden and all transitions are complete."
+      },
+      "complexType": {
+        "original": "EmptyPayload",
+        "resolved": "undefined",
+        "references": {
+          "EmptyPayload": {
+            "location": "import",
+            "path": "../../utils/types"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "show": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Shows the tooltip.",
+        "tags": []
+      }
+    },
+    "hide": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Shows the tooltip.",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "open",
+      "methodName": "handleOpenChange"
+    }]; }
+}