@nanoporetech-digital/components 1.15.6 → 2.1.0

package/dist/components/nano-rating.js

@@ -0,0 +1,240 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { HTMLElement, createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
+import { f as focusVisible } from './focus-visible.js';
+import { c as clamp } from './index2.js';
+
+const ratingCss = ".sc-nano-rating-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-rating,*.sc-nano-rating::before,*.sc-nano-rating::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-rating{display:none !important}.sc-nano-rating-h{--symbol-color:#b5aea7;--symbol-color-active:#f5cc49;--symbol-spacing:0.25rem;--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:inline-block}.rating-wrap.sc-nano-rating{position:relative;margin:0 calc(var(--symbol-spacing) * -1)}.rating.sc-nano-rating{position:relative;border-radius:5px;vertical-align:middle;width:100%;-webkit-transition:-webkit-box-shadow 0.15s ease;transition:-webkit-box-shadow 0.15s ease;transition:box-shadow 0.15s ease;transition:box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease}.rating.sc-nano-rating:focus{outline:none}.rating.focus-visible.sc-nano-rating:focus{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow)}.rating__symbols.sc-nano-rating{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;font-size:var(--symbol-size);color:var(--symbol-color);white-space:nowrap;cursor:pointer;line-height:0;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.rating__symbols--inactive.sc-nano-rating .rating__symbol.sc-nano-rating>.sc-nano-rating:not(nano-icon){background-color:currentColor !important}.rating__symbols.sc-nano-rating>*.sc-nano-rating{margin:var(--symbol-spacing)}.rating__symbols--indicator.sc-nano-rating{position:absolute;top:0;left:0;color:var(--symbol-color-active);pointer-events:none;width:100%}.rating__symbol.sc-nano-rating{-webkit-transition:0.2s -webkit-transform;transition:0.2s -webkit-transform;transition:0.2s transform;transition:0.2s transform, 0.2s -webkit-transform;text-align:center}.rating__symbol--hover.sc-nano-rating{-webkit-transform:scale(1.2);transform:scale(1.2)}.rating--disabled.sc-nano-rating .rating__symbols.sc-nano-rating,.rating--readonly.sc-nano-rating .rating__symbols.sc-nano-rating{cursor:default}.rating--disabled.sc-nano-rating .rating__symbol.sc-nano-rating,.rating--readonly.sc-nano-rating .rating__symbol.sc-nano-rating{-webkit-transform:none !important;transform:none !important}.rating--disabled.sc-nano-rating{opacity:0.5}.rating--disabled.sc-nano-rating .rating__symbols.sc-nano-rating{cursor:not-allowed}";
+
+const CANSHADOW = !!document.head.attachShadow;
+let Rating = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.nanoChange = createEvent(this, "nanoChange", 7);
+    this.nanoBlur = createEvent(this, "nanoBlur", 7);
+    this.nanoFocus = createEvent(this, "nanoFocus", 7);
+    this.hoverValue = 0;
+    this.isHovering = false;
+    /**
+     * The current rating.
+     */
+    this.value = 0;
+    /**
+     * The highest rating to show.
+     */
+    this.max = 5;
+    /**
+     * The minimum increment value allowed by the control.
+     */
+    this.precision = 1;
+    /**
+     * Makes the rating readonly.
+     */
+    this.readonly = false;
+    /**
+     * Disables the rating.
+     */
+    this.disabled = false;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    this.name = '';
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    this.symbolName = 'solid/star';
+    /**
+     * A function that returns the symbols to display.
+     * Allows for more granular control than `symbol-name`.
+     * Accepts an option `value` parameter you can use to map a specific symbol to a value.
+     */
+    this.symbol = (_) => '<nano-icon name="' + this.symbolName + '"></nano-icon>';
+    this.handleClick = (event) => {
+      if (this.disabled || this.readonly) {
+        return;
+      }
+      const newValue = this.getValueFromMousePosition(event);
+      this.value = newValue === this.value ? 0 : newValue;
+      this.isHovering = false;
+    };
+    this.handleKeyDown = (event) => {
+      if (this.disabled || this.readonly) {
+        return;
+      }
+      if (event.key === 'ArrowLeft') {
+        const decrement = event.shiftKey ? 1 : this.precision;
+        this.value = this.roundToPrecision(Math.max(0, this.value - decrement));
+        event.preventDefault();
+      }
+      if (event.key === 'ArrowRight') {
+        const increment = event.shiftKey ? 1 : this.precision;
+        this.value = this.roundToPrecision(Math.min(this.max, this.value + increment));
+        event.preventDefault();
+      }
+      if (event.key === 'Home') {
+        this.value = 0;
+        event.preventDefault();
+      }
+      if (event.key === 'End') {
+        this.value = this.max;
+        event.preventDefault();
+      }
+    };
+    this.handleMouseEnter = () => {
+      this.isHovering = true;
+    };
+    this.handleMouseLeave = () => {
+      this.isHovering = false;
+    };
+    this.handleFocus = () => {
+      this.nanoFocus.emit();
+    };
+    this.handleBlur = () => {
+      this.nanoBlur.emit();
+    };
+    this.handleMouseMove = (event) => {
+      this.hoverValue = this.getValueFromMousePosition(event);
+    };
+  }
+  handleValueChange() {
+    this.nanoChange.emit();
+  }
+  handleSymbolChange() {
+    this.symbol = (_) => '<nano-icon name="' + this.symbolName + '"></nano-icon>';
+  }
+  /**
+   * Sets focus on the rating.
+   */
+  async setFocus() {
+    this.rating.focus();
+  }
+  /**
+   * Removes focus from the rating.
+   */
+  async removeFocus() {
+    this.rating.blur();
+  }
+  getValueFromMousePosition(event) {
+    const containerLeft = this.rating.getBoundingClientRect().left;
+    const containerWidth = this.rating.getBoundingClientRect().width;
+    let num;
+    num = this.roundToPrecision(((event.clientX - containerLeft) / containerWidth) * this.max, this.precision);
+    if (this.isRtl)
+      num = this.max + this.precision - num;
+    return clamp(num, 0, this.max);
+  }
+  roundToPrecision(numberToRound, precision = 0.5) {
+    const multiplier = 1 / precision;
+    return Math.ceil(numberToRound * multiplier) / multiplier;
+  }
+  clip(displayValue) {
+    if (!this.rating)
+      return;
+    const tw = this.rating.getBoundingClientRect().width;
+    if (this.isRtl)
+      return `rect(0, ${tw}px, 2em, ${tw - (tw / 100) * ((displayValue / this.max) * 100)}px)`;
+    return `rect(0, ${(tw / 100) * ((displayValue / this.max) * 100)}px, 2em, 0)`;
+  }
+  _getRoot() {
+    return this.host.shadowRoot ? this.host.shadowRoot : this.host;
+  }
+  _fixClassNames() {
+    let ctxClasses = this.rating.className
+      .split(' ')
+      .filter((classStr) => classStr.match(/^sc-nano/));
+    let eles = this._getRoot().querySelectorAll('*');
+    if (!eles)
+      return;
+    Array.from(eles).map((ele) => {
+      ctxClasses.map((classStr) => ele.classList.add(classStr));
+    });
+  }
+  componentDidLoad() {
+    focusVisible.observe(this.rating);
+    setTimeout(() => (this.indicator.style.clip = this.clip(this.value)), 20);
+  }
+  connectedCallback() {
+    this.isRtl =
+      this.host.dir === 'rtl' ||
+        this.host.ownerDocument.dir === 'rtl';
+  }
+  disconnectedCallback() {
+    focusVisible.unobserve(this.rating);
+  }
+  componentDidRender() {
+    if (!this.host.shadowRoot || !CANSHADOW)
+      this._fixClassNames();
+  }
+  render() {
+    this.isRtl =
+      this.host.dir === 'rtl' ||
+        this.host.ownerDocument.dir === 'rtl';
+    let counter = Array.from(Array(this.max).keys());
+    let displayValue = 0;
+    if (this.disabled || this.readonly) {
+      displayValue = this.value;
+    }
+    else {
+      displayValue = this.isHovering ? this.hoverValue : this.value;
+    }
+    return (h("div", { class: "rating-wrap" }, h("div", { dir: this.isRtl ? 'rtl' : null, ref: (el) => (this.rating = el), part: "base", class: {
+        rating: true,
+        'rating--readonly': this.readonly,
+        'rating--disabled': this.disabled,
+      }, "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', "aria-valuenow": this.value, "aria-valuemin": 0, "aria-valuemax": this.max, tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("span", { class: "rating__symbols rating__symbols--inactive" }, counter.map((index) => (h("span", { class: {
+        rating__symbol: true,
+        'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
+      }, role: "presentation",
+      // Users can click the current value to clear the rating. When this happens, we set this.isHovering to
+      // false to prevent the hover state from confusing them as they move the mouse out of the control. This
+      // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.
+      onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), h("span", { ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
+        clip: this.clip(displayValue),
+      } }, counter.map((index) => (h("span", { class: {
+        rating__symbol: true,
+        'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
+      }, role: "presentation", innerHTML: this.symbol(index + 1) })))), h("input", { type: "hidden", name: this.name, value: this.value, disabled: this.disabled || this.readonly }))));
+  }
+  get host() { return this; }
+  static get watchers() { return {
+    "value": ["handleValueChange"],
+    "symbolName": ["handleSymbolChange"]
+  }; }
+  static get style() { return ratingCss; }
+};
+Rating = /*@__PURE__*/ proxyCustomElement(Rating, [2, "nano-rating", {
+    "value": [1538],
+    "max": [2],
+    "precision": [2],
+    "readonly": [4],
+    "disabled": [4],
+    "name": [1],
+    "symbolName": [1, "symbol-name"],
+    "symbol": [16],
+    "hoverValue": [32],
+    "isHovering": [32],
+    "setFocus": [64],
+    "removeFocus": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["nano-rating"];
+  components.forEach(tagName => { switch (tagName) {
+    case "nano-rating":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Rating);
+      }
+      break;
+  } });
+}
+
+const NanoRating = Rating;
+const defineCustomElement = defineCustomElement$1;
+
+export { NanoRating, defineCustomElement };
+
+//# sourceMappingURL=nano-rating.js.map

package/dist/components/nano-rating.js.map

@@ -0,0 +1 @@
+{"file":"nano-rating.js","mappings":"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","names":[],"sources":["./src/components/rating/rating.scss?tag=nano-rating&encapsulation=scoped","./src/components/rating/rating.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n  * @prop --symbol-color: The inactive color for symbols. Defaults to #{$color-palegrey}\n  * @prop --symbol-color-active: The active color for symbols. Defaults to #{$color-palegrey}\n  * @prop --symbol-size: The size of symbols. Defaults to contextual font size\n  * @prop --symbol-spacing: The spacing to use around symbols. Defaults to .25rem\n  * @prop --focus-shadow: Box shadow style when focused. Defaults to #{$control-focus-style}\n  */\n\n  --symbol-color: #{$color-palegrey};\n  --symbol-color-active: #{$color-yellow};\n  --symbol-spacing: 0.25rem;\n  --focus-shadow: #{$control-focus-style};\n\n  display: inline-block;\n}\n\n.rating-wrap {\n  position: relative;\n  margin: 0 calc(var(--symbol-spacing) * -1);\n}\n\n.rating {\n  position: relative;\n  border-radius: 5px;\n  vertical-align: middle;\n  width: 100%;\n  transition: box-shadow 0.15s ease;\n\n  &:focus {\n    outline: none;\n  }\n\n  &.focus-visible:focus {\n    box-shadow: var(--focus-shadow);\n  }\n\n  &__symbols {\n    display: flex;\n    align-items: center;\n    position: relative;\n    font-size: var(--symbol-size);\n    color: var(--symbol-color);\n    white-space: nowrap;\n    cursor: pointer;\n    line-height: 0;\n    justify-content: space-between;\n\n    &--inactive {\n      .rating__symbol > :not(nano-icon) {\n        background-color: currentColor !important;\n      }\n    }\n\n    > * {\n      margin: var(--symbol-spacing);\n    }\n\n    &--indicator {\n      position: absolute;\n      top: 0;\n      left: 0;\n      color: var(--symbol-color-active);\n      pointer-events: none;\n      width: 100%;\n    }\n  }\n\n  &__symbol {\n    transition: 0.2s transform;\n    text-align: center;\n\n    &--hover {\n      transform: scale(1.2);\n    }\n  }\n\n  &--disabled,\n  &--readonly {\n    .rating__symbols {\n      cursor: default;\n    }\n\n    .rating__symbol {\n      transform: none !important;\n    }\n  }\n\n  &--disabled {\n    opacity: 0.5;\n\n    .rating__symbols {\n      cursor: not-allowed;\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  ComponentInterface,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { clamp } from '../../utils';\n\nconst CANSHADOW = !!document.head.attachShadow;\n\n/**\n * Rating - a form element to allow the viewing and input of user feedback.\n */\n@Component({\n  tag: 'nano-rating',\n  styleUrl: 'rating.scss',\n  scoped: true,\n})\nexport class Rating implements ComponentInterface {\n  private rating: HTMLElement;\n  private isRtl: boolean;\n  private indicator: HTMLElement;\n\n  @Element() host: HTMLNanoRatingElement;\n\n  @State() hoverValue = 0;\n  @State() isHovering = false;\n\n  /**\n   * The current rating.\n   */\n  @Prop({ mutable: true, reflect: true }) value = 0;\n\n  /**\n   * The highest rating to show.\n   */\n  @Prop() max = 5;\n\n  /**\n   * The minimum increment value allowed by the control.\n   */\n  @Prop() precision = 1;\n\n  /**\n   * Makes the rating readonly.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Disables the rating.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name = '';\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() symbolName = 'solid/star';\n\n  /**\n   * A function that returns the symbols to display.\n   * Allows for more granular control than `symbol-name`.\n   * Accepts an option `value` parameter you can use to map a specific symbol to a value.\n   */\n  @Prop() symbol = (_: number) =>\n    '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n\n  @Watch('value')\n  handleValueChange() {\n    this.nanoChange.emit();\n  }\n\n  @Watch('symbolName')\n  handleSymbolChange() {\n    this.symbol = (_: number) =>\n      '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n  }\n\n  /**\n   * Emitted when the rating's value changes.\n   */\n  @Event() nanoChange!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Sets focus on the rating.\n   */\n  @Method()\n  async setFocus() {\n    this.rating.focus();\n  }\n\n  /**\n   * Removes focus from the rating.\n   */\n  @Method()\n  async removeFocus() {\n    this.rating.blur();\n  }\n\n  private getValueFromMousePosition(event: MouseEvent) {\n    const containerLeft = this.rating.getBoundingClientRect().left;\n    const containerWidth = this.rating.getBoundingClientRect().width;\n\n    let num: number;\n    num = this.roundToPrecision(\n      ((event.clientX - containerLeft) / containerWidth) * this.max,\n      this.precision\n    );\n    if (this.isRtl) num = this.max + this.precision - num;\n\n    return clamp(num, 0, this.max);\n  }\n\n  private roundToPrecision(numberToRound: number, precision = 0.5) {\n    const multiplier = 1 / precision;\n    return Math.ceil(numberToRound * multiplier) / multiplier;\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const newValue = this.getValueFromMousePosition(event);\n    this.value = newValue === this.value ? 0 : newValue;\n    this.isHovering = false;\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    if (event.key === 'ArrowLeft') {\n      const decrement = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(Math.max(0, this.value - decrement));\n      event.preventDefault();\n    }\n\n    if (event.key === 'ArrowRight') {\n      const increment = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(\n        Math.min(this.max, this.value + increment)\n      );\n      event.preventDefault();\n    }\n\n    if (event.key === 'Home') {\n      this.value = 0;\n      event.preventDefault();\n    }\n\n    if (event.key === 'End') {\n      this.value = this.max;\n      event.preventDefault();\n    }\n  };\n\n  private handleMouseEnter = () => {\n    this.isHovering = true;\n  };\n\n  private handleMouseLeave = () => {\n    this.isHovering = false;\n  };\n\n  private handleFocus = () => {\n    this.nanoFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.nanoBlur.emit();\n  };\n\n  private handleMouseMove = (event: MouseEvent) => {\n    this.hoverValue = this.getValueFromMousePosition(event);\n  };\n\n  private clip(displayValue: number) {\n    if (!this.rating) return;\n    const tw = this.rating.getBoundingClientRect().width;\n    if (this.isRtl)\n      return `rect(0, ${tw}px, 2em, ${\n        tw - (tw / 100) * ((displayValue / this.max) * 100)\n      }px)`;\n    return `rect(0, ${\n      (tw / 100) * ((displayValue / this.max) * 100)\n    }px, 2em, 0)`;\n  }\n\n  private _getRoot() {\n    return this.host.shadowRoot ? this.host.shadowRoot : this.host;\n  }\n\n  private _fixClassNames() {\n    let ctxClasses = this.rating.className\n      .split(' ')\n      .filter((classStr) => classStr.match(/^sc-nano/));\n    let eles = this._getRoot().querySelectorAll('*');\n    if (!eles) return;\n    Array.from(eles).map((ele: HTMLElement) => {\n      ctxClasses.map((classStr) => ele.classList.add(classStr));\n    });\n  }\n\n  componentDidLoad() {\n    focusVisible.observe(this.rating);\n    setTimeout(() => (this.indicator.style.clip = this.clip(this.value)), 20);\n  }\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.rating);\n  }\n\n  componentDidRender() {\n    if (!this.host.shadowRoot || !CANSHADOW) this._fixClassNames();\n  }\n\n  render() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n\n    let counter = Array.from(Array(this.max).keys());\n\n    let displayValue = 0;\n    if (this.disabled || this.readonly) {\n      displayValue = this.value;\n    } else {\n      displayValue = this.isHovering ? this.hoverValue : this.value;\n    }\n\n    return (\n      <div class=\"rating-wrap\">\n        <div\n          dir={this.isRtl ? 'rtl' : null}\n          ref={(el) => (this.rating = el)}\n          part=\"base\"\n          class={{\n            rating: true,\n            'rating--readonly': this.readonly,\n            'rating--disabled': this.disabled,\n          }}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-readonly={this.readonly ? 'true' : 'false'}\n          aria-valuenow={this.value}\n          aria-valuemin={0}\n          aria-valuemax={this.max}\n          tabIndex={this.disabled ? -1 : 0}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseEnter={this.handleMouseEnter}\n          onMouseLeave={this.handleMouseLeave}\n          onMouseMove={this.handleMouseMove}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n        >\n          <span class=\"rating__symbols rating__symbols--inactive\">\n            {counter.map((index) => (\n              <span\n                class={{\n                  rating__symbol: true,\n                  'rating__symbol--hover':\n                    this.isHovering && Math.ceil(displayValue) === index + 1,\n                }}\n                role=\"presentation\"\n                // Users can click the current value to clear the rating. When this happens, we set this.isHovering to\n                // false to prevent the hover state from confusing them as they move the mouse out of the control. This\n                // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.\n                onMouseEnter={this.handleMouseEnter}\n                innerHTML={this.symbol(index + 1)}\n              />\n            ))}\n          </span>\n\n          <span\n            ref={(span) => (this.indicator = span)}\n            class=\"rating__symbols rating__symbols--indicator\"\n            style={{\n              clip: this.clip(displayValue),\n            }}\n          >\n            {counter.map((index) => (\n              <span\n                class={{\n                  rating__symbol: true,\n                  'rating__symbol--hover':\n                    this.isHovering && Math.ceil(displayValue) === index + 1,\n                }}\n                role=\"presentation\"\n                innerHTML={this.symbol(index + 1)}\n              />\n            ))}\n          </span>\n          <input\n            type=\"hidden\"\n            name={this.name}\n            value={this.value}\n            disabled={this.disabled || this.readonly}\n          />\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nano-resize-observe.d.ts

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

package/dist/components/nano-resize-observe.js

@@ -0,0 +1,11 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { R as ResizeObserve, d as defineCustomElement$1 } from './resize-observe.js';
+
+const NanoResizeObserve = ResizeObserve;
+const defineCustomElement = defineCustomElement$1;
+
+export { NanoResizeObserve, defineCustomElement };
+
+//# sourceMappingURL=nano-resize-observe.js.map

package/dist/components/nano-resize-observe.js.map

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

package/dist/components/nano-select.d.ts

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

package/dist/components/nano-select.js

@@ -0,0 +1,11 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { S as Select, d as defineCustomElement$1 } from './select.js';
+
+const NanoSelect = Select;
+const defineCustomElement = defineCustomElement$1;
+
+export { NanoSelect, defineCustomElement };
+
+//# sourceMappingURL=nano-select.js.map

package/dist/components/nano-select.js.map

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

package/dist/components/nano-skeleton.d.ts

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

package/dist/components/nano-skeleton.js

@@ -0,0 +1,11 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { S as Skeleton, d as defineCustomElement$1 } from './skeleton.js';
+
+const NanoSkeleton = Skeleton;
+const defineCustomElement = defineCustomElement$1;
+
+export { NanoSkeleton, defineCustomElement };
+
+//# sourceMappingURL=nano-skeleton.js.map

package/dist/components/nano-skeleton.js.map

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

package/dist/components/nano-slide.d.ts

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

package/dist/components/nano-slide.js

@@ -0,0 +1,66 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+
+const slideCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%;min-height:100%;font-size:18px;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;-webkit-transition:opacity 0.2s;transition:opacity 0.2s;opacity:0}:host([ready]){opacity:1}";
+
+let Slide = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.nanoSlideReady = createEvent(this, "nanoSlideReady", 7);
+    /**
+     * Used to to inform the parent slides components of readiness.
+     * This will automatically be set to true when the slide has loaded but can be set and updated manually.
+     */
+    this.ready = null;
+  }
+  readyChange(newReady, oldReady) {
+    if (typeof oldReady !== 'undefined' &&
+      oldReady === false &&
+      newReady === true) {
+      this.nanoSlideReady.emit();
+    }
+  }
+  componentDidLoad() {
+    // ready state is being loaded manually
+    if (typeof this.ready === 'boolean')
+      return;
+    setTimeout(() => {
+      this.nanoSlideReady.emit();
+      this.ready = true;
+    });
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get watchers() { return {
+    "ready": ["readyChange"]
+  }; }
+  static get style() { return slideCss; }
+};
+Slide = /*@__PURE__*/ proxyCustomElement(Slide, [1, "nano-slide", {
+    "ready": [1540]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["nano-slide"];
+  components.forEach(tagName => { switch (tagName) {
+    case "nano-slide":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Slide);
+      }
+      break;
+  } });
+}
+
+const NanoSlide = Slide;
+const defineCustomElement = defineCustomElement$1;
+
+export { NanoSlide, defineCustomElement };
+
+//# sourceMappingURL=nano-slide.js.map

package/dist/components/nano-slide.js.map

@@ -0,0 +1 @@
+{"file":"nano-slide.js","mappings":";;;;;AAAA,MAAM,QAAQ,GAAG,snBAAsnB;;ICgB1nB,KAAK;EALlB;;;;;;;;;IAe0C,UAAK,GAAmB,IAAI,CAAC;GA6BtE;EA1BC,WAAW,CAAC,QAAwB,EAAE,QAAyB;IAC7D,IACE,OAAO,QAAQ,KAAK,WAAW;MAC/B,QAAQ,KAAK,KAAK;MAClB,QAAQ,KAAK,IAAI,EACjB;MACA,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;KAC5B;GACF;EAED,gBAAgB;;IAEd,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,SAAS;MAAE,OAAO;IAC5C,UAAU,CAAC;MACT,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;MAC3B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;KACnB,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAQ,CACH,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/slides/slide.scss?tag=nano-slide&encapsulation=shadow","./src/components/slides/slide.tsx"],"sourcesContent":["// Slide\n// --------------------------------------------------\n\n:host {\n  // Center slide text vertically\n  display: flex;\n  position: relative;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  min-height: 100%;\n  font-size: 18px;\n  text-align: center;\n  box-sizing: border-box;\n  overflow: hidden;\n  transition: opacity 0.2s;\n  opacity: 0;\n}\n\n:host([ready]) {\n  opacity: 1;\n}\n","import {\n  Component,\n  ComponentInterface,\n  Host,\n  h,\n  Event,\n  EventEmitter,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\n@Component({\n  tag: 'nano-slide',\n  styleUrl: 'slide.scss',\n  shadow: true,\n})\nexport class Slide implements ComponentInterface {\n  /**\n   * Fired when the slide has loaded.\n   */\n  @Event() nanoSlideReady!: EventEmitter<void>;\n\n  /**\n   * Used to to inform the parent slides components of readiness.\n   * This will automatically be set to true when the slide has loaded but can be set and updated manually.\n   */\n  @Prop({ mutable: true, reflect: true }) ready: boolean | null = null;\n\n  @Watch('ready')\n  readyChange(newReady: boolean | null, oldReady?: boolean | null) {\n    if (\n      typeof oldReady !== 'undefined' &&\n      oldReady === false &&\n      newReady === true\n    ) {\n      this.nanoSlideReady.emit();\n    }\n  }\n\n  componentDidLoad() {\n    // ready state is being loaded manually\n    if (typeof this.ready === 'boolean') return;\n    setTimeout(() => {\n      this.nanoSlideReady.emit();\n      this.ready = true;\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nano-slides.d.ts

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