@tmorrow/cre8-wc 1.2.4 → 1.2.6

package/lib/components/loading-spinner/loading-spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-spinner.js","sourceRoot":"","sources":["../../../components/loading-spinner/loading-spinner.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './loading-spinner.styles.js';\n\n/**\n * A loading spinner notifies the user that their request is being processed while the front end is retrieving data\n * or performing slow computations.\n *\n * Providing visibility of a system's status is one of the most important rules of UI design. When the user has to\n * guess or assume that the system is responding to their input, they may send a command such as submit multiple\n * times, while also being anxious that the application is frozen or not working.\n *\n * While it is most ideal to improve system performance such that there is no perceptible delay, in some cases this\n * is not possible. In these cases, the immediate response should be a progress indicator to give a visual indication\n * that their command was received and that the application is working.\n *\n * The length of time for the system response is a good general guideline for which progress indicator to use.\n *\n * ## Determinable vs indeterminate progress\n *\n * A progress meter provides feedback that the system is working and gives the user an indication of how much time\n * they will wait. This indicator should be used when the system response time is longer and determinable. See\n * ProgressMeter component for further examples and accessibility considerations.\n *\n * ## How to Use\n *\n * The loading-spinner component can be used to indicate loading state on the component level all the way up to the\n * page level. There are two loading styles: determinate (loading progress represents percentage of total load time)\n * and indeterminate (a spinning animation that persists while loading continues)\n *\n * 1. Choose determinate or indeterminate. UX best practices leans more towards recommending the indeterminate\n * progress indicator if load time is unknown, while determinate is less user friendly unless the label indicates\n * the percentage loaded as well.\n * 2. Choose a size and use it according to context, guidance should be given by your design or content team.\n * 3. A common label to use is `Loading…`, guidance should be given by your design content team.\n * 4. If you choose to use the determinate loader then you must also control the progress attribute's value which\n * controls the percentage of the circle that shows (values 0-100 accepted);\n * 5. For dark backgrounds, add the `inverse` attribute to the `<cre8-loading-spinner>` tag.\n * 6. For accessibility reasons, always include a label input unless explicitly informed to do otherwise by design or\n * accessibility teams.\n * 7. The lg variant is usually suitable for containers or block level loading placeholders while the sm size is\n * meant for more inline loading states.\n *\n */\nexport class Cre8LoadingSpinner extends Cre8Element {\n    static styles = (styles);\n\n  /**\n   * Mode of the spinner, defaults to indeterminate.\n   * If true, renders a standard progress indicator, fills via the progress property from 0% to 100%.\n   * If false or undefined, renders indeterminate spinner which animates in a spinning motion until component is\n   * destroyed.\n   */\n  @property({ type: Boolean, reflect: true })\n      determinate?: boolean;\n\n  /**\n   * Inverse property used for dark backgrounds.\n   */\n  @property({ type: Boolean, reflect: true })\n      inverse?: boolean;\n\n  /**\n   * Neutral property used for secondary neutral loading button.\n   */\n  @property({ type: Boolean, reflect: true })\n      neutral?: boolean;\n\n  /**\n   * Property that specifies which button variant is using the loading spinner\n   */\n  @property()\n      buttonVariant? : 'primary' | 'secondary' | 'tertiary';\n\n  /**\n   * Label to show along with progress indicator.\n   * This is required to meet accessibility requirements for this component.\n   */\n  @property()\n      label?: string;\n\n  /**\n   * Progress to display, between 0 and 100. Requires determinate property to be set to true.\n   * */\n  @property({ reflect: true, type: Number })\n      progress = 0;\n\n  /**\n   * Size of the progress indicator and position of the label, if a label has been defined using the label property.\n   * - **large** renders a large progress indicator at 72px in width/height with the label below.\n   * - **small** renders a small progress indicator at 24px in width/height with the label to the right.\n   */\n  @property()\n      size?: 'large' | 'small' = 'large';\n\n  private labelId: string;\n\n  constructor() {\n      super();\n      const randomId = Math.floor(Math.random() * 900000) + 100000;\n      this.labelId = `cre8-spinner-${randomId}`;\n  }\n\n  private renderDeterminateSpinner() {\n      const progress = Math.max(Math.min(100, this.progress === 0 ? (this.progress = 1) : this.progress), 0);\n      const dashOffset = 2 * 3.1415926 * 45 - (progress / 100) * (2 * 3.1415926 * 45);\n\n      return html` ${this.size === 'small'\n          ? html`\n          <svg class=\"cre8-c-spinner__icon cre8-c-spinner__icon-small\" aria-hidden=\"true\" viewBox=\"0 0 100 100\">\n            <circle cx=\"50%\" cy=\"50%\" r=\"43\" stroke-dashoffset=\"${dashOffset}\"></circle>\n          </svg>\n        `\n          : html` <svg class=\"cre8-c-spinner__icon\" aria-hidden=\"true\" viewBox=\"0 0 100 100\">\n          <circle cx=\"50%\" cy=\"50%\" r=\"45\" stroke-dashoffset=\"${dashOffset}\"></circle>\n        </svg>`}`;\n  }\n\n  private renderInDeterminateSpinner() {\n      return html` ${this.size === 'small'\n          ? html`\n          <svg class=\"cre8-c-spinner__icon cre8-c-spinner__icon-small\" aria-hidden=\"true\" viewBox=\"0 0 100 100\">\n            <circle cx=\"50%\" cy=\"50%\" r=\"43\"></circle>\n          </svg>\n        `\n          : html` <svg class=\"cre8-c-spinner__icon\" aria-hidden=\"true\" viewBox=\"0 0 100 100\">\n          <circle cx=\"50%\" cy=\"50%\" r=\"45\"></circle>\n        </svg>`}`;\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-spinner', {\n          'cre8-c-spinner--large': this.size === 'large',\n          'cre8-c-spinner--small': this.size === 'small',\n          'cre8-c-spinner--inverse': this.inverse,\n          'cre8-c-spinner--neutral': this.neutral,\n          'cre8-c-spinner--primary': this.buttonVariant === 'primary',\n          'cre8-c-spinner--secondary': this.buttonVariant === 'secondary',\n          'cre8-c-spinner--tertiary': this.buttonVariant === 'tertiary',\n          'cre8-c-spinner--determinate': this.determinate,\n          'cre8-c-spinner--indeterminate': !this.determinate,\n      });\n      return html`\n      <div\n        class=\"${componentClassNames}\"\n        role=\"progressbar\"\n        aria-labelledby=\"${this.labelId}\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow=\"${this.determinate ? this.progress : nothing}\"\n        part=\"base\"\n      >\n        ${this.determinate ? this.renderDeterminateSpinner() : this.renderInDeterminateSpinner()}\n        <div\n          id=\"${this.labelId}\"\n          class=\"${!this.label ? 'cre8-c-spinner__hidden-label' : 'cre8-c-spinner__label'}\"\n          part=\"label\"\n        >\n          ${this.label}\n        </div>\n      </div>\n    `;\n  }\n}\nif (customElements.get('cre8-loading-spinner') === undefined) {\n    customElements.define('cre8-loading-spinner', Cre8LoadingSpinner);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-loading-spinner': Cre8LoadingSpinner;\n  }\n}\n\nexport default Cre8LoadingSpinner;\n"]}

package/lib/components/loading-spinner/loading-spinner.styles.d.ts

@@ -0,0 +1,3 @@
+declare const styles: import("lit").CSSResult;
+export default styles;
+//# sourceMappingURL=loading-spinner.styles.d.ts.map

package/lib/components/loading-spinner/loading-spinner.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-spinner.styles.d.ts","sourceRoot":"","sources":["../../../components/loading-spinner/loading-spinner.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBA8sBV,CAAC;AACH,eAAe,MAAM,CAAC"}