@aquera/nile-elements 0.0.70 → 0.0.71

package/dist/src/nile-toast/nile-toast.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-toast.css.js","sourceRoot":"","sources":["../../../src/nile-toast/nile-toast.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqLxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Toast CSS\n */\nexport const styles = css`\n  :host {\n    display: contents;\n\n    /* For better DX, we'll reset the margin here so the base part can inherit it */\n    margin: 0;\n  }\n\n  .alert {\n    position: relative;\n    display: flex;\n    align-items: flex-start;\n    border: solid 2px 2px;\n    border-radius: 8px;\n    margin: inherit;\n    padding: 16px;\n    gap: 16px;\n    width: max-content;\n    min-width: 400px;\n  }\n\n  .alert:not(.alert--has-icon) .alert__icon,\n  .alert:not(.alert--closable) .alert__close-button {\n    display: none;\n  }\n\n  .alert__prefix-icon-container {\n    background-color: red;\n    border-radius: 4px;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .alert__icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: 10px;\n  }\n\n  .alert--success {\n    border: 1px solid var(--nile-toast-color-border-success);\n    background: var(--nile-toast-color-background-success);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--success .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-success);\n  }\n\n  .alert--info {\n    border: 1px solid var(--nile-toast-color-border-info);\n    background: var(--nile-toast-color-background-info);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--info .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-info);\n  }\n\n  .alert--warning {\n    border: 1px solid var(--nile-toast-color-border-warning);\n    background: var(--nile-toast-color-background-warning);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--warning .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-warning);\n  }\n\n  .alert--error {\n    border: 1px solid var(--nile-toast-color-border-error);\n    background: var(--nile-toast-color-background-error);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--error .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-error);\n  }\n\n  .alert--gray {\n    border: 1px solid var(--nile-toast-color-border-gray);\n    background: var(--nile-toast-color-background-gray);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--gray .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-gray);\n  }\n\n  .alert--black {\n    border: 1px solid var(--nile-toast-color-border-black);\n    background: var(--nile-toast-color-background-black);\n    box-shadow: var(--nile-toast-color-box-black);\n  }\n\n  .alert--black .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-black);\n  }\n\n  .alert__message {\n    flex: 1 1 auto;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    align-items: flex-start;\n    font-family: var(--nile-font-family-serif);\n    font-size: 14px;\n    line-height: 20px;\n    color: black;\n    gap:3px;\n  }\n\n  .alert__message--title {\n    font-weight: 600;\n    color:#344054;\n  }\n\n  .alert__message--content {\n    font-weight:400;\n    color:#475467;\n  }\n\n  .alert__message--content-only {\n    margin-top: 3px;\n  }\n\n  .alert__close-button {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .alert__tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n    margin-top: 4px;\n  }\n\n  .alert__tag {\n    height: 24px;\n    display: flex;\n    border-radius: 4px;\n    border: 1px solid #e5e9eb;\n    background: var(--nile-colors-white-base);\n  }\n\n  .alert__tag-content {\n    border-left: 1px solid #e5e9eb;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 6px;\n\n    color: var(--nile-colors-dark-900);\n    font-family: var\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n    letter-spacing: 0.2px;\n  }\n\n  .alert__tag-image {\n    height: 24px;\n    width: 24px;\n    border-radius: 4px 0 0 4px;\n  }\n\n  .alert__prefix-img {\n    height: 24px;\n    border-radius: 4px;\n  }\n\n  [hidden] {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-toast.css.js","sourceRoot":"","sources":["../../../src/nile-toast/nile-toast.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyLxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Toast CSS\n */\nexport const styles = css`\n  :host {\n    display: contents;\n\n    /* For better DX, we'll reset the margin here so the base part can inherit it */\n    margin: 0;\n  }\n\n  .alert {\n    position: relative;\n    display: flex;\n    align-items: flex-start;\n    border: solid 2px 2px;\n    border-radius: 8px;\n    margin: inherit;\n    padding: 16px;\n    gap: 16px;\n    width: max-content;\n    min-width: 400px;\n  }\n\n  .alert:not(.alert--has-icon) .alert__icon,\n  .alert:not(.alert--closable) .alert__close-button {\n    display: none;\n  }\n\n  .alert__prefix-icon-container {\n    background-color: red;\n    border-radius: 4px;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .alert__icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: 10px;\n  }\n\n  .alert--success {\n    border: 1px solid var(--nile-toast-color-border-success);\n    background: var(--nile-toast-color-background-success);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--success .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-success);\n  }\n\n  .alert--info {\n    border: 1px solid var(--nile-toast-color-border-info);\n    background: var(--nile-toast-color-background-info);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--info .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-info);\n  }\n\n  .alert--warning {\n    border: 1px solid var(--nile-toast-color-border-warning);\n    background: var(--nile-toast-color-background-warning);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--warning .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-warning);\n  }\n\n  .alert--error {\n    border: 1px solid var(--nile-toast-color-border-error);\n    background: var(--nile-toast-color-background-error);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--error .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-error);\n  }\n\n  .alert--gray {\n    border: 1px solid var(--nile-toast-color-border-gray);\n    background: var(--nile-toast-color-background-gray);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--gray .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-gray);\n  }\n\n  .alert--black {\n    border: 1px solid var(--nile-toast-color-border-black);\n    background: var(--nile-toast-color-background-black);\n    box-shadow: var(--nile-toast-color-box-black);\n  }\n\n  .alert--black .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-black);\n  }\n\n  .alert__message {\n    flex: 1 1 auto;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    align-items: flex-start;\n    font-family: var(--nile-font-family-serif);\n    font-size: 14px;\n    line-height: 20px;\n    color: black;\n    gap:3px;\n  }\n\n  .alert__message--title {\n    font-weight: 600;\n    color:#344054;\n  }\n\n  .alert__message--content {\n    font-weight:400;\n    color:#475467;\n  }\n\n  .alert__message--content-only {\n    margin-top: 3px;\n  }\n\n  .alert__close-button {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .alert__tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n    margin-top: 4px;\n  }\n\n  .alert__tag {\n    height: 24px;\n    display: flex;\n    border-radius: 4px;\n    border: 1px solid #e5e9eb;\n    background: var(--nile-colors-white-base);\n  }\n\n  .alert__tag-content {\n    border-left: 1px solid #e5e9eb;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 6px;\n\n    color: var(--nile-colors-dark-900);\n    font-family: var\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n    letter-spacing: 0.2px;\n  }\n\n  .alert__tag-image {\n    height: 24px;\n    width: 24px;\n    border-radius: 4px 0 0 4px;\n  }\n\n  .alert__prefix-img {\n    height: 24px;\n    border-radius: 4px;\n  }\n\n  .alert--no-content{\n    align-items:center ;\n  }\n\n  [hidden] {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-toast/nile-toast.js

@@ -226,6 +226,7 @@ let NileToast = class NileToast extends NileElement {
             'alert--error': this.variant === 'error',
             'alert--gray': this.variant === 'gray',
             'alert--black': this.variant === 'black',
+            'alert--no-content': this.content === '',
         })}
         role="alert"
         aria-hidden=${this.open ? 'false' : 'true'}
@@ -259,21 +260,23 @@ let NileToast = class NileToast extends NileElement {
           aria-live="polite"
           @slotchange="${this.handleSlotChange}"
         >
-          <div
+          <span
             ?hidden="${this.hasSlottedContent && this.title === ''}"
             class="alert__message--title"
           >
             ${this.title}
-          </div>
-          <div
-            ?hidden="${this.hasSlottedContent && this.content === ''}"
-            class="alert__message--content ${this.title === ''
-            ? 'alert__message--content-only'
-            : ''}"
-          >
-            ${this.content}
-          </div>
-
+          </span>
+          ${this.title
+            ? html ` <span
+                ?hidden="${this.content === ''}"
+                class=${classMap({
+                'alert__message--content': true,
+                'alert__message--content-only': !!this.title,
+            })}
+              >
+                ${this.content}
+              </span>`
+            : null}
           ${this.tags?.length > 0
             ? html `
                 <div class="alert__tags">
@@ -298,7 +301,7 @@ let NileToast = class NileToast extends NileElement {
                 @click=${this.handleCloseClick}
               ></nile-icon-button>
             `
-            : ''}
+            : null}
       </div>
     `;
     }

package/dist/src/nile-toast/nile-toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-toast.js","sourceRoot":"","sources":["../../../src/nile-toast/nile-toast.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, CSSResultArray, TemplateResult } from 'lit-element';\n\nimport '../nile-icon-button/nile-icon-button';\nimport { animateTo, stopAnimations } from '../internal/animate';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport {\n  getAnimation,\n  setDefaultAnimation,\n} from '../utilities/animation-registry';\nimport { HasSlotController } from '../internal/slot';\nimport { html } from 'lit';\nimport { waitForEvent } from '../internal/event';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport { styles } from './nile-toast.css';\nimport type { CSSResultGroup } from 'lit';\n\nconst toastStack = Object.assign(document.createElement('div'), {\n  className: 'nile-toast-stack',\n});\n\n/**\n * Nile icon component.\n *\n * @tag nile-toast\n *\n * @dependency nile-icon-button\n *\n * @slot - The alert's main content.\n * @slot icon - An icon to show in the alert. Works best with `<nile-icon>`.\n *\n * @event nile-show - Emitted when the alert opens.\n * @event nile-after-show - Emitted after the alert opens and all animations are complete.\n * @event nile-hide - Emitted when the alert closes.\n * @event nile-after-hide - Emitted after the alert closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper.\n * @csspart icon - The container that wraps the optional icon.\n * @csspart message - The container that wraps the alert's main content.\n * @csspart close-button - The close button, an `<nile-icon-button>`.\n * @csspart close-button__base - The close button's exported `base` part.\n *\n * @animation alert.show - The animation to use when showing the alert.\n * @animation alert.hide - The animation to use when hiding the alert.\n */\n\n@customElement('nile-toast')\nexport class NileToast extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  private autoHideTimeout: number;\n  private readonly hasSlotController = new HasSlotController(\n    this,\n    'icon',\n    'suffix'\n  );\n\n  @query('[part~=\"base\"]') base: HTMLElement;\n\n  /**\n   * Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @property({ type: Boolean, reflect: true }) noIcon = false;\n\n  /** Enables a close button that allows the user to dismiss the alert. */\n\n  @property({ type: Boolean, reflect: true }) closable = false;\n\n  @property({ type: Boolean, reflect: true }) hasSlottedContent = false;\n\n  @property({ type: Boolean, reflect: true }) hasSlottedIcon = false;\n\n  @property({ type: String, reflect: true }) prefixImageUrl = '';\n\n  /** The alert's theme variant. */\n  @property({ reflect: true }) variant:\n    | 'success'\n    | 'info'\n    | 'warning'\n    | 'error'\n    | 'gray'\n    | 'black' = 'success';\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\n   * the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\n   * the alert will not close on its own.\n   */\n  @property({ type: Number }) duration = Infinity;\n\n  @property({ type: String }) title = '';\n\n  @property({ type: String }) content = '';\n\n  @property({ type: Array, reflect: true }) tags: any[] = [];\n\n  firstUpdated() {\n    this.base.hidden = !this.open;\n  }\n\n  private restartAutoHide() {\n    clearTimeout(this.autoHideTimeout);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(\n        () => this.hide(),\n        this.duration\n      );\n    }\n  }\n\n  private handleCloseClick() {\n    this.hide();\n  }\n\n  private handleMouseMove() {\n    this.restartAutoHide();\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.emit('nile-show');\n\n      if (this.duration < Infinity) {\n        this.restartAutoHide();\n      }\n\n      await stopAnimations(this.base);\n      this.base.hidden = false;\n      const { keyframes, options } = getAnimation(this, 'alert.show', {\n        dir: 'ltr',\n      });\n      await animateTo(this.base, keyframes, options);\n\n      this.emit('nile-after-show');\n    } else {\n      // Hide\n      this.emit('nile-hide');\n\n      clearTimeout(this.autoHideTimeout);\n\n      await stopAnimations(this.base);\n      const { keyframes, options } = getAnimation(this, 'alert.hide', {\n        dir: 'ltr',\n      });\n      await animateTo(this.base, keyframes, options);\n      this.base.hidden = true;\n\n      this.emit('nile-after-hide');\n    }\n  }\n\n  @watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /** Shows the alert. */\n  async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, 'nile-after-show');\n  }\n\n  /** Hides the alert */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'nile-after-hide');\n  }\n\n  getIconNameByVariant() {\n    switch (this.variant) {\n      case 'success':\n        return 'check-circle';\n      case 'info':\n        return 'info-circle';\n      case 'warning':\n        return 'alert-circle';\n      case 'error':\n        return 'alert-circle';\n      case 'gray':\n        return 'info-circle';\n      case 'black':\n        return 'info-circle';\n    }\n  }\n\n  getIconColorByVariant() {\n    switch (this.variant) {\n      case 'success':\n        return 'var(--nile-toast-color-icon-color-success)';\n      case 'info':\n        return 'var(--nile-toast-color-icon-color-info)';\n      case 'warning':\n        return 'var(--nile-toast-color-icon-color-warning)';\n      case 'error':\n        return 'var(--nile-toast-color-icon-color-error)';\n      case 'gray':\n        return 'var(--nile-toast-color-icon-color-gray)';\n      case 'black':\n        return 'var(--nile-toast-color-icon-color-black)';\n    }\n  }\n\n  handleSlotChange(e: any) {\n    const slot = e.target;\n    const nodes = slot.assignedNodes({ flatten: true });\n    if (slot.name === 'message') {\n      const nodes = slot.assignedNodes({ flatten: true });\n      this.hasSlottedContent = nodes.length > 0;\n    }\n\n    if (slot.name === 'icon') {\n      const nodes = slot.assignedNodes({ flatten: true });\n      this.hasSlottedIcon = nodes.length > 0;\n    }\n  }\n\n  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   */\n  async toast() {\n    return new Promise<void>(resolve => {\n      if (toastStack.parentElement === null) {\n        document.body.append(toastStack);\n      }\n\n      toastStack.appendChild(this);\n\n      // Wait for the toast stack to render\n      requestAnimationFrame(() => {\n        // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- force a reflow for the initial transition\n        this.clientWidth;\n        this.show();\n      });\n\n      this.addEventListener(\n        'nile-after-hide',\n        () => {\n          toastStack.removeChild(this);\n          resolve();\n\n          // Remove the toast stack from the DOM when there are no more alerts\n          if (toastStack.querySelector('nile-alert') === null) {\n            toastStack.remove();\n          }\n        },\n        { once: true }\n      );\n    });\n  }\n\n  private toastTags(content: string, imageUrl: string) {\n    return html`\n      <div class=\"alert__tag\">\n        <img class=\"alert__tag-image\" src=\"${imageUrl}\" />\n        <span class=\"alert__tag-content\"> ${content} </span>\n      </div>\n    `;\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          alert: true,\n          'alert--open': this.open,\n          'alert--closable': this.closable,\n          'alert--has-icon': this.hasSlotController.test('icon'),\n          'alert--success': this.variant === 'success',\n          'alert--info': this.variant === 'info',\n          'alert--warning': this.variant === 'warning',\n          'alert--error': this.variant === 'error',\n          'alert--gray': this.variant === 'gray',\n          'alert--black': this.variant === 'black',\n        })}\n        role=\"alert\"\n        aria-hidden=${this.open ? 'false' : 'true'}\n        @mousemove=${this.handleMouseMove}\n      >\n        <slot name=\"icon\" part=\"icon\" ?hidden=\"${this.noIcon === true}\">\n          ${!this.prefixImageUrl\n            ? html`\n                <div\n                  class=\"alert__prefix-icon-container\"\n                  ?hidden=\"${this.hasSlottedIcon ||\n                  this.prefixImageUrl.length > 0}\"\n                >\n                  <nile-icon\n                    name=\"${this.getIconNameByVariant()}\"\n                    size=\"20\"\n                    color=\"${this.getIconColorByVariant()}\"\n                    method=\"stroke\"\n                  ></nile-icon>\n                </div>\n              `\n            : html`\n                <img src=\"${this.prefixImageUrl}\" class=\"alert__prefix-img\" />\n              `}\n        </slot>\n\n        <slot\n          name=\"message\"\n          part=\"message\"\n          class=\"alert__message\"\n          aria-live=\"polite\"\n          @slotchange=\"${this.handleSlotChange}\"\n        >\n          <div\n            ?hidden=\"${this.hasSlottedContent && this.title === ''}\"\n            class=\"alert__message--title\"\n          >\n            ${this.title}\n          </div>\n          <div\n            ?hidden=\"${this.hasSlottedContent && this.content === ''}\"\n            class=\"alert__message--content ${this.title === ''\n              ? 'alert__message--content-only'\n              : ''}\"\n          >\n            ${this.content}\n          </div>\n\n          ${this.tags?.length > 0\n            ? html`\n                <div class=\"alert__tags\">\n                  ${this.tags.map(\n                    tag =>\n                      html`<span\n                        >${this.toastTags(tag.content, tag.imageUrl)}</span\n                      >`\n                  )}\n                </div>\n              `\n            : ``}\n        </slot>\n\n        ${this.closable\n          ? html`\n              <nile-icon-button\n                part=\"close-button\"\n                exportparts=\"base:close-button__base\"\n                class=\"alert__close-button\"\n                name=\"close\"\n                label=\"close\"\n                size=\"20\"\n                color=\"#98A2B3\"\n                @click=${this.handleCloseClick}\n              ></nile-icon-button>\n            `\n          : ''}\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation('alert.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.8 },\n    { opacity: 1, scale: 1 },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\nsetDefaultAnimation('alert.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.8 },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\nexport default NileToast;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-toast': NileToast;\n  }\n}\n"]}
+{"version":3,"file":"nile-toast.js","sourceRoot":"","sources":["../../../src/nile-toast/nile-toast.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, CSSResultArray, TemplateResult } from 'lit-element';\n\nimport '../nile-icon-button/nile-icon-button';\nimport { animateTo, stopAnimations } from '../internal/animate';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport {\n  getAnimation,\n  setDefaultAnimation,\n} from '../utilities/animation-registry';\nimport { HasSlotController } from '../internal/slot';\nimport { html } from 'lit';\nimport { waitForEvent } from '../internal/event';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport { styles } from './nile-toast.css';\nimport type { CSSResultGroup } from 'lit';\n\nconst toastStack = Object.assign(document.createElement('div'), {\n  className: 'nile-toast-stack',\n});\n\n/**\n * Nile icon component.\n *\n * @tag nile-toast\n *\n * @dependency nile-icon-button\n *\n * @slot - The alert's main content.\n * @slot icon - An icon to show in the alert. Works best with `<nile-icon>`.\n *\n * @event nile-show - Emitted when the alert opens.\n * @event nile-after-show - Emitted after the alert opens and all animations are complete.\n * @event nile-hide - Emitted when the alert closes.\n * @event nile-after-hide - Emitted after the alert closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper.\n * @csspart icon - The container that wraps the optional icon.\n * @csspart message - The container that wraps the alert's main content.\n * @csspart close-button - The close button, an `<nile-icon-button>`.\n * @csspart close-button__base - The close button's exported `base` part.\n *\n * @animation alert.show - The animation to use when showing the alert.\n * @animation alert.hide - The animation to use when hiding the alert.\n */\n\n@customElement('nile-toast')\nexport class NileToast extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  private autoHideTimeout: number;\n  private readonly hasSlotController = new HasSlotController(\n    this,\n    'icon',\n    'suffix'\n  );\n\n  @query('[part~=\"base\"]') base: HTMLElement;\n\n  /**\n   * Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @property({ type: Boolean, reflect: true }) noIcon = false;\n\n  /** Enables a close button that allows the user to dismiss the alert. */\n\n  @property({ type: Boolean, reflect: true }) closable = false;\n\n  @property({ type: Boolean, reflect: true }) hasSlottedContent = false;\n\n  @property({ type: Boolean, reflect: true }) hasSlottedIcon = false;\n\n  @property({ type: String, reflect: true }) prefixImageUrl = '';\n\n  /** The alert's theme variant. */\n  @property({ reflect: true }) variant:\n    | 'success'\n    | 'info'\n    | 'warning'\n    | 'error'\n    | 'gray'\n    | 'black' = 'success';\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\n   * the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\n   * the alert will not close on its own.\n   */\n  @property({ type: Number }) duration = Infinity;\n\n  @property({ type: String }) title = '';\n\n  @property({ type: String }) content = '';\n\n  @property({ type: Array, reflect: true }) tags: any[] = [];\n\n  firstUpdated() {\n    this.base.hidden = !this.open;\n  }\n\n  private restartAutoHide() {\n    clearTimeout(this.autoHideTimeout);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(\n        () => this.hide(),\n        this.duration\n      );\n    }\n  }\n\n  private handleCloseClick() {\n    this.hide();\n  }\n\n  private handleMouseMove() {\n    this.restartAutoHide();\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.emit('nile-show');\n\n      if (this.duration < Infinity) {\n        this.restartAutoHide();\n      }\n\n      await stopAnimations(this.base);\n      this.base.hidden = false;\n      const { keyframes, options } = getAnimation(this, 'alert.show', {\n        dir: 'ltr',\n      });\n      await animateTo(this.base, keyframes, options);\n\n      this.emit('nile-after-show');\n    } else {\n      // Hide\n      this.emit('nile-hide');\n\n      clearTimeout(this.autoHideTimeout);\n\n      await stopAnimations(this.base);\n      const { keyframes, options } = getAnimation(this, 'alert.hide', {\n        dir: 'ltr',\n      });\n      await animateTo(this.base, keyframes, options);\n      this.base.hidden = true;\n\n      this.emit('nile-after-hide');\n    }\n  }\n\n  @watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /** Shows the alert. */\n  async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, 'nile-after-show');\n  }\n\n  /** Hides the alert */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'nile-after-hide');\n  }\n\n  getIconNameByVariant() {\n    switch (this.variant) {\n      case 'success':\n        return 'check-circle';\n      case 'info':\n        return 'info-circle';\n      case 'warning':\n        return 'alert-circle';\n      case 'error':\n        return 'alert-circle';\n      case 'gray':\n        return 'info-circle';\n      case 'black':\n        return 'info-circle';\n    }\n  }\n\n  getIconColorByVariant() {\n    switch (this.variant) {\n      case 'success':\n        return 'var(--nile-toast-color-icon-color-success)';\n      case 'info':\n        return 'var(--nile-toast-color-icon-color-info)';\n      case 'warning':\n        return 'var(--nile-toast-color-icon-color-warning)';\n      case 'error':\n        return 'var(--nile-toast-color-icon-color-error)';\n      case 'gray':\n        return 'var(--nile-toast-color-icon-color-gray)';\n      case 'black':\n        return 'var(--nile-toast-color-icon-color-black)';\n    }\n  }\n\n  handleSlotChange(e: any) {\n    const slot = e.target;\n    const nodes = slot.assignedNodes({ flatten: true });\n    if (slot.name === 'message') {\n      const nodes = slot.assignedNodes({ flatten: true });\n      this.hasSlottedContent = nodes.length > 0;\n    }\n\n    if (slot.name === 'icon') {\n      const nodes = slot.assignedNodes({ flatten: true });\n      this.hasSlottedIcon = nodes.length > 0;\n    }\n  }\n\n  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   */\n  async toast() {\n    return new Promise<void>(resolve => {\n      if (toastStack.parentElement === null) {\n        document.body.append(toastStack);\n      }\n\n      toastStack.appendChild(this);\n\n      // Wait for the toast stack to render\n      requestAnimationFrame(() => {\n        // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- force a reflow for the initial transition\n        this.clientWidth;\n        this.show();\n      });\n\n      this.addEventListener(\n        'nile-after-hide',\n        () => {\n          toastStack.removeChild(this);\n          resolve();\n\n          // Remove the toast stack from the DOM when there are no more alerts\n          if (toastStack.querySelector('nile-alert') === null) {\n            toastStack.remove();\n          }\n        },\n        { once: true }\n      );\n    });\n  }\n\n  private toastTags(content: string, imageUrl: string) {\n    return html`\n      <div class=\"alert__tag\">\n        <img class=\"alert__tag-image\" src=\"${imageUrl}\" />\n        <span class=\"alert__tag-content\"> ${content} </span>\n      </div>\n    `;\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          alert: true,\n          'alert--open': this.open,\n          'alert--closable': this.closable,\n          'alert--has-icon': this.hasSlotController.test('icon'),\n          'alert--success': this.variant === 'success',\n          'alert--info': this.variant === 'info',\n          'alert--warning': this.variant === 'warning',\n          'alert--error': this.variant === 'error',\n          'alert--gray': this.variant === 'gray',\n          'alert--black': this.variant === 'black',\n          'alert--no-content': this.content === '',\n        })}\n        role=\"alert\"\n        aria-hidden=${this.open ? 'false' : 'true'}\n        @mousemove=${this.handleMouseMove}\n      >\n        <slot name=\"icon\" part=\"icon\" ?hidden=\"${this.noIcon === true}\">\n          ${!this.prefixImageUrl\n            ? html`\n                <div\n                  class=\"alert__prefix-icon-container\"\n                  ?hidden=\"${this.hasSlottedIcon ||\n                  this.prefixImageUrl.length > 0}\"\n                >\n                  <nile-icon\n                    name=\"${this.getIconNameByVariant()}\"\n                    size=\"20\"\n                    color=\"${this.getIconColorByVariant()}\"\n                    method=\"stroke\"\n                  ></nile-icon>\n                </div>\n              `\n            : html`\n                <img src=\"${this.prefixImageUrl}\" class=\"alert__prefix-img\" />\n              `}\n        </slot>\n\n        <slot\n          name=\"message\"\n          part=\"message\"\n          class=\"alert__message\"\n          aria-live=\"polite\"\n          @slotchange=\"${this.handleSlotChange}\"\n        >\n          <span\n            ?hidden=\"${this.hasSlottedContent && this.title === ''}\"\n            class=\"alert__message--title\"\n          >\n            ${this.title}\n          </span>\n          ${this.title\n            ? html` <span\n                ?hidden=\"${this.content === ''}\"\n                class=${classMap({\n                  'alert__message--content': true,\n                  'alert__message--content-only': !!this.title,\n                })}\n              >\n                ${this.content}\n              </span>`\n            : null}\n          ${this.tags?.length > 0\n            ? html`\n                <div class=\"alert__tags\">\n                  ${this.tags.map(\n                    tag =>\n                      html`<span\n                        >${this.toastTags(tag.content, tag.imageUrl)}</span\n                      >`\n                  )}\n                </div>\n              `\n            : ``}\n        </slot>\n\n        ${this.closable\n          ? html`\n              <nile-icon-button\n                part=\"close-button\"\n                exportparts=\"base:close-button__base\"\n                class=\"alert__close-button\"\n                name=\"close\"\n                label=\"close\"\n                size=\"20\"\n                color=\"#98A2B3\"\n                @click=${this.handleCloseClick}\n              ></nile-icon-button>\n            `\n          : null}\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation('alert.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.8 },\n    { opacity: 1, scale: 1 },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\nsetDefaultAnimation('alert.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.8 },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\nexport default NileToast;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-toast': NileToast;\n  }\n}\n"]}

package/dist/src/nile-vertical-stepper-item/index.d.ts

@@ -0,0 +1 @@
+export { NileVerticalStepperItem } from './nile-vertical-stepper-item';

package/dist/src/nile-vertical-stepper-item/index.js

@@ -0,0 +1,2 @@
+export { NileVerticalStepperItem } from './nile-vertical-stepper-item';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-vertical-stepper-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-vertical-stepper-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC","sourcesContent":["export { NileVerticalStepperItem } from './nile-vertical-stepper-item';"]}

package/dist/src/nile-vertical-stepper-item/nile-vertical-stepper-item.css.d.ts

@@ -0,0 +1,12 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+/**
+ * VerticalStepperItem CSS
+ */
+export declare const styles: import("lit-element").CSSResult;
+declare const _default: import("lit-element").CSSResult[];
+export default _default;

package/dist/src/nile-vertical-stepper-item/nile-vertical-stepper-item.css.js

@@ -0,0 +1,128 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+import { css } from 'lit-element';
+/**
+ * VerticalStepperItem CSS
+ */
+export const styles = css `
+	:host {
+		--vertical-stepper-flex-val:1;
+		flex-grow:var(--vertical-stepper-flex-val);
+		--bulletin--dot--seperation:30%;
+		--min-line-container-height:25px;
+	}
+
+	.stepper__item {
+		display:flex;
+		column-gap:var(--item-spacing);
+		height:100%;
+	}
+
+	.stepper__item--sm {
+		--item-spacing: var(--nile-spacing-spacing-lg);
+		--stepper-item-title-size:14px;
+		--stepper-item-subtitle-size:14px;
+		--stepper-item-text-line-height:20px;
+		--circle-height:16px;
+	}
+
+	.stepper__item--md {
+		--item-spacing: var(--nile-spacing-spacing-xl);
+		--stepper-item-title-size:16px;
+		--stepper-item-subtitle-size:16px;
+		--stepper-item-text-line-heightt:24px;
+		--circle-height:20px;
+	}
+
+	.stepper__item--lg {
+		--item-spacing: var(--nile-spacing-spacing-xl);
+		--stepper-item-title-size:16px;
+		--stepper-item-subtitle-size:16px;
+		--stepper-item-text-line-height:24px;
+		--circle-height:28px;
+	}
+	
+	.stepper-item__connector-content{
+		display: flex;
+		flex-direction: column;
+	}
+	.stepper__item__bulletin {
+		display:grid;
+		place-content:center;
+	}
+
+	.stepper__bulletin--dot {
+		width: var(--circle-height);
+		aspect-ratio: 1 / 1;
+		border-radius: 50%;
+		background: radial-gradient(var(--nile-colors-gray-light-mode-300) var(--bulletin--dot--seperation), var(--nile-colors-gray-neutral-50) var(--bulletin--dot--seperation));
+		border: 2px solid var(--nile-colors-gray-light-mode-200);
+	}
+
+	.stepper__bulletin__dot--active{
+		background: radial-gradient(#fff var(--bulletin--dot--seperation), var(--nile-colors-primary-600) var(--bulletin--dot--seperation));
+		border: 2px solid #85AAD18A;
+	}
+
+	.stepper__bulletin--icon {
+		display:grid;
+		place-content:center;
+		width: var(--circle-height);
+		border: 2px solid var(--nile-colors-primary-600);
+		aspect-ratio: 1 / 1;
+		border-radius: 50%;
+		background-color:var(--nile-colors-primary-600);
+		overflow:hidden;
+	}
+
+	.stepper__item__line__container{
+		flex-grow: 1;
+		display: flex;
+		justify-content: center;
+		padding: 2px;
+		min-height: var(--min-line-container-height);
+	}
+
+	.stepper__item__line{
+		height:100%;
+		border-left: 2px solid var(--nile-colors-gray-light-mode-200);
+	}
+	.stepper__item__line--active{
+		border-left: 2px solid var(--nile-colors-primary-600);
+	}
+
+	.stepper__item__content{
+		display:flex;
+		flex-direction:column;
+		justify-content:start;
+	}
+	.stepper__content__title {
+		color:var(--nile-colors-gray-light-mode-700);
+		font-size: var(--stepper-item-title-size);
+		line-height: var(--stepper-item-text-line-height);
+		font-family:Inter;
+		font-weight: 600;
+	}
+
+	.stepper__content__title--active{
+		color:var(--nile-colors-primary-700);
+	}
+
+	.stepper__content__subtitle {
+		color:var(--nile-colors-gray-light-mode-600);
+		font-size: var(--stepper-item-subtitle-size);
+		line-height: var(--stepper-item-text-line-height);
+		font-family:Inter;
+		font-weight: 400;
+	}
+
+	.stepper__content__subtitle--active{
+		color:var(--nile-colors-primary-600);
+	}
+`;
+export default [styles];
+//# sourceMappingURL=nile-vertical-stepper-item.css.js.map

package/dist/src/nile-vertical-stepper-item/nile-vertical-stepper-item.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-vertical-stepper-item.css.js","sourceRoot":"","sources":["../../../src/nile-vertical-stepper-item/nile-vertical-stepper-item.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmHxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit-element';\n\n/**\n * VerticalStepperItem CSS\n */\nexport const styles = css`\n\t:host {\n\t\t--vertical-stepper-flex-val:1;\n\t\tflex-grow:var(--vertical-stepper-flex-val);\n\t\t--bulletin--dot--seperation:30%;\n\t\t--min-line-container-height:25px;\n\t}\n\n\t.stepper__item {\n\t\tdisplay:flex;\n\t\tcolumn-gap:var(--item-spacing);\n\t\theight:100%;\n\t}\n\n\t.stepper__item--sm {\n\t\t--item-spacing: var(--nile-spacing-spacing-lg);\n\t\t--stepper-item-title-size:14px;\n\t\t--stepper-item-subtitle-size:14px;\n\t\t--stepper-item-text-line-height:20px;\n\t\t--circle-height:16px;\n\t}\n\n\t.stepper__item--md {\n\t\t--item-spacing: var(--nile-spacing-spacing-xl);\n\t\t--stepper-item-title-size:16px;\n\t\t--stepper-item-subtitle-size:16px;\n\t\t--stepper-item-text-line-heightt:24px;\n\t\t--circle-height:20px;\n\t}\n\n\t.stepper__item--lg {\n\t\t--item-spacing: var(--nile-spacing-spacing-xl);\n\t\t--stepper-item-title-size:16px;\n\t\t--stepper-item-subtitle-size:16px;\n\t\t--stepper-item-text-line-height:24px;\n\t\t--circle-height:28px;\n\t}\n\t\n\t.stepper-item__connector-content{\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n\t.stepper__item__bulletin {\n\t\tdisplay:grid;\n\t\tplace-content:center;\n\t}\n\n\t.stepper__bulletin--dot {\n\t\twidth: var(--circle-height);\n\t\taspect-ratio: 1 / 1;\n\t\tborder-radius: 50%;\n\t\tbackground: radial-gradient(var(--nile-colors-gray-light-mode-300) var(--bulletin--dot--seperation), var(--nile-colors-gray-neutral-50) var(--bulletin--dot--seperation));\n\t\tborder: 2px solid var(--nile-colors-gray-light-mode-200);\n\t}\n\n\t.stepper__bulletin__dot--active{\n\t\tbackground: radial-gradient(#fff var(--bulletin--dot--seperation), var(--nile-colors-primary-600) var(--bulletin--dot--seperation));\n\t\tborder: 2px solid #85AAD18A;\n\t}\n\n\t.stepper__bulletin--icon {\n\t\tdisplay:grid;\n\t\tplace-content:center;\n\t\twidth: var(--circle-height);\n\t\tborder: 2px solid var(--nile-colors-primary-600);\n\t\taspect-ratio: 1 / 1;\n\t\tborder-radius: 50%;\n\t\tbackground-color:var(--nile-colors-primary-600);\n\t\toverflow:hidden;\n\t}\n\n\t.stepper__item__line__container{\n\t\tflex-grow: 1;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\tpadding: 2px;\n\t\tmin-height: var(--min-line-container-height);\n\t}\n\n\t.stepper__item__line{\n\t\theight:100%;\n\t\tborder-left: 2px solid var(--nile-colors-gray-light-mode-200);\n\t}\n\t.stepper__item__line--active{\n\t\tborder-left: 2px solid var(--nile-colors-primary-600);\n\t}\n\n\t.stepper__item__content{\n\t\tdisplay:flex;\n\t\tflex-direction:column;\n\t\tjustify-content:start;\n\t}\n\t.stepper__content__title {\n\t\tcolor:var(--nile-colors-gray-light-mode-700);\n\t\tfont-size: var(--stepper-item-title-size);\n\t\tline-height: var(--stepper-item-text-line-height);\n\t\tfont-family:Inter;\n\t\tfont-weight: 600;\n\t}\n\n\t.stepper__content__title--active{\n\t\tcolor:var(--nile-colors-primary-700);\n\t}\n\n\t.stepper__content__subtitle {\n\t\tcolor:var(--nile-colors-gray-light-mode-600);\n\t\tfont-size: var(--stepper-item-subtitle-size);\n\t\tline-height: var(--stepper-item-text-line-height);\n\t\tfont-family:Inter;\n\t\tfont-weight: 400;\n\t}\n\n\t.stepper__content__subtitle--active{\n\t\tcolor:var(--nile-colors-primary-600);\n\t}\n`;\n\nexport default [styles];"]}

package/dist/src/nile-vertical-stepper-item/nile-vertical-stepper-item.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { CSSResultArray, TemplateResult } from 'lit-element';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile vertical-stepper-item component.
+ *
+ * @tag nile-vertical-stepper-item
+ *
+ */
+export declare class NileVerticalStepperItem extends NileElement {
+    title: string;
+    subtitle: string;
+    private contentBelow;
+    private size;
+    private icon;
+    private isFirst;
+    private isLast;
+    private isComplete;
+    private isCurrent;
+    private currentStepValue;
+    private completedStepValue;
+    private calculatedCompletedStepValue;
+    private value;
+    private haveFlex;
+    /**
+     * The styles for nile-vertical-stepper-item
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles(): CSSResultArray;
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    render(): TemplateResult;
+}
+export default NileVerticalStepperItem;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-vertical-stepper-item': NileVerticalStepperItem;
+    }
+}

package/dist/src/nile-vertical-stepper-item/nile-vertical-stepper-item.js

@@ -0,0 +1,145 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { nothing, html, property } from 'lit-element';
+import { customElement, state } from 'lit/decorators.js';
+import { styles } from './nile-vertical-stepper-item.css';
+import NileElement from '../internal/nile-element';
+import { classMap } from 'lit/directives/class-map.js';
+/**
+ * Nile vertical-stepper-item component.
+ *
+ * @tag nile-vertical-stepper-item
+ *
+ */
+let NileVerticalStepperItem = class NileVerticalStepperItem extends NileElement {
+    constructor() {
+        super(...arguments);
+        /* Properties passed directly */
+        this.title = '';
+        this.subtitle = '';
+        /* Properties passed to parent component: NileStepper */
+        this.contentBelow = false;
+        this.size = 'md';
+        this.icon = 'tick';
+        /* Properties Computed at parent level component NileStepper */
+        this.isFirst = false;
+        this.isLast = false;
+        this.isComplete = false;
+        this.isCurrent = false;
+        this.haveFlex = true;
+        /* #endregion */
+    }
+    /**
+     * The styles for nile-vertical-stepper-item
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles() {
+        return [styles];
+    }
+    /* #endregion */
+    /* #region Methods */
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    render() {
+        if (this.isLast)
+            this.style.setProperty('--vertical-stepper-flex-val', `0`);
+        const isCurrent = this.isCurrent;
+        const isComplete = this.isComplete;
+        let showCompletedIcon = false;
+        if (isComplete && !isCurrent || this.completedStepValue == this.value)
+            showCompletedIcon = true;
+        let suffixStepperLineActive = false;
+        if (isComplete) {
+            suffixStepperLineActive = true;
+            if (this.calculatedCompletedStepValue == this.value)
+                suffixStepperLineActive = false;
+        }
+        let iconSize = this.size == 'sm' ? 14 : this.size == 'md' ? 16 : 20;
+        return html `
+			<div class="${classMap({
+            'stepper__item': true,
+            'stepper__item--selected': isCurrent,
+            'stepper__item--default': !isCurrent,
+            'stepper__item--sm': this.size == 'sm',
+            'stepper__item--md': this.size == 'md',
+            'stepper__item--lg': this.size == 'lg',
+        })}">
+				<div class="stepper-item__connector-content">
+					<div class="stepper__item__bulletin">
+						${showCompletedIcon ?
+            html `<div class="stepper__bulletin--icon">
+									<svg width="${iconSize}" height="${iconSize}" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+										<g clip-path="url(#clip0_10902_1507)">
+										<path fill-rule="evenodd" clip-rule="evenodd" d="M22.7953 9.85334L13.2487 19.0667L10.7153 16.36C10.2487 15.92 9.51534 15.8933 8.982 16.2667C8.462 16.6533 8.31534 17.3333 8.63534 17.88L11.6353 22.76C11.9287 23.2133 12.4353 23.4933 13.0087 23.4933C13.5553 23.4933 14.0753 23.2133 14.3687 22.76C14.8487 22.1333 24.0087 11.2133 24.0087 11.2133C25.2087 9.98668 23.7553 8.90668 22.7953 9.84001V9.85334Z" fill="white"/>
+										</g>
+									</svg>
+								</div>`
+            : html `<div class="${classMap({ 'stepper__bulletin--dot': true, 'stepper__bulletin__dot--active': isCurrent })}"></div>`}
+					</div>
+					<div class="stepper__item__line__container">
+						${this.isLast ? nothing : html `<div class="${classMap({ 'stepper__item__line': true, 'stepper__item__line--active': suffixStepperLineActive })}"></div>`}
+					</div>
+				</div>
+				<div class="stepper__item__content">
+					<div class="${classMap({ 'stepper__content__title': true, 'stepper__content__title--active': isCurrent })}">${this.title}</div>
+					<div class="${classMap({ 'stepper__content__subtitle': true, 'stepper__content__subtitle--active': isCurrent })}">${this.subtitle}</div>
+				</div>
+			</div>
+			`;
+    }
+};
+__decorate([
+    property()
+], NileVerticalStepperItem.prototype, "title", void 0);
+__decorate([
+    property()
+], NileVerticalStepperItem.prototype, "subtitle", void 0);
+__decorate([
+    state()
+], NileVerticalStepperItem.prototype, "contentBelow", void 0);
+__decorate([
+    state()
+], NileVerticalStepperItem.prototype, "size", void 0);
+__decorate([
+    state()
+], NileVerticalStepperItem.prototype, "icon", void 0);
+__decorate([
+    state()
+], NileVerticalStepperItem.prototype, "isFirst", void 0);
+__decorate([
+    state()
+], NileVerticalStepperItem.prototype, "isLast", void 0);
+__decorate([
+    state()
+], NileVerticalStepperItem.prototype, "isComplete", void 0);
+__decorate([
+    state()
+], NileVerticalStepperItem.prototype, "isCurrent", void 0);
+__decorate([
+    state()
+], NileVerticalStepperItem.prototype, "currentStepValue", void 0);
+__decorate([
+    state()
+], NileVerticalStepperItem.prototype, "completedStepValue", void 0);
+__decorate([
+    state()
+], NileVerticalStepperItem.prototype, "calculatedCompletedStepValue", void 0);
+__decorate([
+    state()
+], NileVerticalStepperItem.prototype, "value", void 0);
+__decorate([
+    state()
+], NileVerticalStepperItem.prototype, "haveFlex", void 0);
+NileVerticalStepperItem = __decorate([
+    customElement('nile-vertical-stepper-item')
+], NileVerticalStepperItem);
+export { NileVerticalStepperItem };
+export default NileVerticalStepperItem;
+//# sourceMappingURL=nile-vertical-stepper-item.js.map

package/dist/src/nile-vertical-stepper-item/nile-vertical-stepper-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-vertical-stepper-item.js","sourceRoot":"","sources":["../../../src/nile-vertical-stepper-item/nile-vertical-stepper-item.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, nothing, html, property, CSSResultArray, TemplateResult} from 'lit-element';\nimport { customElement, state } from 'lit/decorators.js';\nimport {styles} from './nile-vertical-stepper-item.css';\nimport NileElement from '../internal/nile-element';\nimport { classMap } from 'lit/directives/class-map.js';\n\n\n/**\n * Nile vertical-stepper-item component.\n *\n * @tag nile-vertical-stepper-item\n *\n */\n@customElement('nile-vertical-stepper-item')\nexport class NileVerticalStepperItem extends NileElement {\n\t/* Properties passed directly */\n\t@property() title: string = '';\n\t@property() subtitle: string = '';\n\n\n\t/* Properties passed to parent component: NileStepper */\n\t@state() private contentBelow = false;\n\t@state() private size : 'sm' | 'md' | 'lg' = 'md';\n\t@state() private icon = 'tick';\n\n\n\t/* Properties Computed at parent level component NileStepper */\n\t@state() private isFirst = false;\n\t@state() private isLast = false;\n\n\t@state() private isComplete = false;\n\t@state() private isCurrent = false;\n\t@state() private currentStepValue :Number;\n\t@state() private completedStepValue :Number;\n\t@state() private calculatedCompletedStepValue :Number;\n\n\t@state() private value :Number;\n\t@state() private haveFlex :Boolean=true;\n\n\t/**\n\t * The styles for nile-vertical-stepper-item\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\n\t/* #endregion */\n\n\t/* #region Methods */\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\t\tif (this.isLast) this.style.setProperty('--vertical-stepper-flex-val', `0`);\n\t\tconst isCurrent = this.isCurrent;\n\t\tconst isComplete = this.isComplete;\n\n\t\tlet showCompletedIcon=false;\n\t\tif(isComplete && !isCurrent || this.completedStepValue==this.value) showCompletedIcon=true;\n\n\t\tlet suffixStepperLineActive = false;\n\t\tif (isComplete) {\n\t\t\tsuffixStepperLineActive = true;\n\t\t\tif (this.calculatedCompletedStepValue == this.value) suffixStepperLineActive = false;\n\t\t}\n\n\t\tlet iconSize = this.size == 'sm'?14:this.size == 'md'?16:20;\n\t\treturn html`\n\t\t\t<div class=\"${classMap({\n\t\t\t\t'stepper__item':true,\n\t\t\t\t'stepper__item--selected':isCurrent,\n\t\t\t\t'stepper__item--default':!isCurrent,\n\t\t\t\t'stepper__item--sm':this.size=='sm',\n\t\t\t\t'stepper__item--md':this.size=='md',\n\t\t\t\t'stepper__item--lg':this.size=='lg',\n\t\t\t})}\">\n\t\t\t\t<div class=\"stepper-item__connector-content\">\n\t\t\t\t\t<div class=\"stepper__item__bulletin\">\n\t\t\t\t\t\t${showCompletedIcon ? \n\t\t\t\t\t\t\thtml`<div class=\"stepper__bulletin--icon\">\n\t\t\t\t\t\t\t\t\t<svg width=\"${iconSize}\" height=\"${iconSize}\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t\t\t\t<g clip-path=\"url(#clip0_10902_1507)\">\n\t\t\t\t\t\t\t\t\t\t<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M22.7953 9.85334L13.2487 19.0667L10.7153 16.36C10.2487 15.92 9.51534 15.8933 8.982 16.2667C8.462 16.6533 8.31534 17.3333 8.63534 17.88L11.6353 22.76C11.9287 23.2133 12.4353 23.4933 13.0087 23.4933C13.5553 23.4933 14.0753 23.2133 14.3687 22.76C14.8487 22.1333 24.0087 11.2133 24.0087 11.2133C25.2087 9.98668 23.7553 8.90668 22.7953 9.84001V9.85334Z\" fill=\"white\"/>\n\t\t\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t</div>`\n\t\t\t\t\t\t\t: html`<div class=\"${classMap({ 'stepper__bulletin--dot':true, 'stepper__bulletin__dot--active':isCurrent })}\"></div>`\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"stepper__item__line__container\">\n\t\t\t\t\t\t${this.isLast?nothing : html`<div class=\"${classMap({ 'stepper__item__line':true, 'stepper__item__line--active':suffixStepperLineActive })}\"></div>`}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"stepper__item__content\">\n\t\t\t\t\t<div class=\"${classMap({ 'stepper__content__title':true, 'stepper__content__title--active':isCurrent })}\">${this.title}</div>\n\t\t\t\t\t<div class=\"${classMap({ 'stepper__content__subtitle':true, 'stepper__content__subtitle--active':isCurrent })}\">${this.subtitle}</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t`;\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileVerticalStepperItem;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-vertical-stepper-item': NileVerticalStepperItem;\n  }\n}"]}