@aquera/nile-elements 0.0.97 → 0.0.98

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

@@ -1 +1 @@
-{"version":3,"file":"nile-popover.js","sourceRoot":"","sources":["../../../src/nile-popover/nile-popover.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 {\n  LitElement,\n  html,\n  property,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit-element';\nimport { customElement, state } from 'lit/decorators.js';\nimport { styles } from './nile-popover.css';\nimport type NilePopup from '../nile-popup/nile-popup';\nimport { string } from '../nile-icon/icons/svg';\n\n/**\n * Nile icon component.\n *\n * @tag nile-popover\n *\n */\n@customElement('nile-popover')\nexport class NilePopover extends LitElement {\n  /**\n   * The styles for Popover\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  /**\n   * The preferred placement of the popover. Note that the actual placement may vary as needed to keep the tooltip\n   * inside of the viewport.\n   */\n  @property() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /** The distance in pixels from which to offset the popover away from its target. */\n  @property({ type: Number }) distance = 18;\n\n  @property({ type: Boolean, attribute: 'arrow' }) arrow = true;\n\n  /** Gives the title to the popover */\n  @property({ type: String }) title = '';\n\n  @state() private isShow = false;\n\n  @property({ attribute: 'arrow-placement' }) arrowPlacement:\n    | 'start'\n    | 'end'\n    | 'center'\n    | 'anchor' = 'anchor';\n\n  /**\n   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n   */\n  @property({ type: Boolean }) hoist = false;\n\n  @property({ type: Boolean }) flip = false;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n\n  connectedCallback() {\n    super.connectedCallback();\n    document.addEventListener('click', this.handleDocumentClick);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this.handleDocumentClick);\n  }\n\n  private handleClick = () => {\n    this.isShow = !this.isShow;\n    const allPopovers = document.querySelectorAll('nile-popover');\n\n    allPopovers.forEach(popover => {\n      if (popover !== this) {\n        popover.isShow = false;\n      }\n    });\n  };\n\n  private handleDocumentClick = () => {\n    if (this.isShow) {\n      this.isShow = !this.isShow;\n    }\n  };\n\n  public render(): TemplateResult {\n    return html`\n      <nile-popup\n        active\n        .arrow=\"${this.arrow && this.isShow}\"\n        distance=\"${this.distance}\"\n        placement=\"${this.placement}\"\n        @click=${(e: Event) => e.stopPropagation()}\n        arrowPlacement=\"${this.arrowPlacement}\"\n        .flip=\"${this.flip}\"\n        shift\n        strategy=${this.hoist ? 'fixed' : 'absolute'}\n      >\n        <slot\n          slot=\"anchor\"\n          name=\"anchor\"\n          aria-describedby=\"tooltip\"\n          @click=${this.handleClick}\n        ></slot>\n        ${this.isShow\n          ? html` <div part=\"popover\" class=\"popover__box\">\n              <slot name=\"title\" class=\"popover__title\">${this.title}</slot>\n              <slot part=\"base\"></slot>\n              <slot name=\"action\" class=\"popover__action\"> </slot>\n            </div>`\n          : html``}\n      </nile-popup>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NilePopover;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-popover': NilePopover;\n  }\n}\n"]}
+{"version":3,"file":"nile-popover.js","sourceRoot":"","sources":["../../../src/nile-popover/nile-popover.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 {\n  LitElement,\n  html,\n  property,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit-element';\nimport { customElement, state } from 'lit/decorators.js';\nimport { styles } from './nile-popover.css';\nimport type NilePopup from '../nile-popup/nile-popup';\nimport { string } from '../nile-icon/icons/svg';\n\n/**\n * Nile icon component.\n *\n * @tag nile-popover\n *\n */\n@customElement('nile-popover')\nexport class NilePopover extends LitElement {\n  /**\n   * The styles for Popover\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  /**\n   * The preferred placement of the popover. Note that the actual placement may vary as needed to keep the tooltip\n   * inside of the viewport.\n   */\n  @property() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /** The distance in pixels from which to offset the popover away from its target. */\n  @property({ type: Number }) distance = 18;\n\n  @property({ type: Boolean, attribute: 'arrow' }) arrow = true;\n\n  /** Gives the title to the popover */\n  @property({ type: String }) title = '';\n\n  @property({type:Boolean, attribute:'open'}) isShow = false;\n\n  @property({ attribute: 'arrow-placement' }) arrowPlacement:\n    | 'start'\n    | 'end'\n    | 'center'\n    | 'anchor' = 'anchor';\n\n  /**\n   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n   */\n  @property({ type: Boolean }) hoist = false;\n\n  @property({ type: Boolean }) flip = false;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n\n  connectedCallback() {\n    super.connectedCallback();\n    document.addEventListener('click', this.handleDocumentClick);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this.handleDocumentClick);\n  }\n\n  private handleClick = () => {\n    this.isShow = !this.isShow;\n    const allPopovers = document.querySelectorAll('nile-popover');\n\n    allPopovers.forEach(popover => {\n      if (popover !== this) {\n        popover.isShow = false;\n      }\n    });\n  };\n\n  private handleDocumentClick = () => {\n    if (this.isShow) {\n      this.isShow = !this.isShow;\n    }\n  };\n\n  public render(): TemplateResult {\n    return html`\n      <nile-popup\n        active\n        .arrow=\"${this.arrow && this.isShow}\"\n        distance=\"${this.distance}\"\n        placement=\"${this.placement}\"\n        @click=${(e: Event) => e.stopPropagation()}\n        arrowPlacement=\"${this.arrowPlacement}\"\n        .flip=\"${this.flip}\"\n        shift\n        strategy=${this.hoist ? 'fixed' : 'absolute'}\n      >\n        <slot\n          slot=\"anchor\"\n          name=\"anchor\"\n          aria-describedby=\"tooltip\"\n          @click=${this.handleClick}\n        ></slot>\n        ${this.isShow\n          ? html` <div part=\"popover\" class=\"popover__box\">\n              <slot name=\"title\" class=\"popover__title\">${this.title}</slot>\n              <slot part=\"base\"></slot>\n              <slot name=\"action\" class=\"popover__action\"> </slot>\n            </div>`\n          : html``}\n      </nile-popup>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NilePopover;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-popover': NilePopover;\n  }\n}\n"]}

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

@@ -17,6 +17,8 @@ export const styles = css `
   }
 
   .alert {
+    max-width: 100%;
+    box-sizing: border-box;
     position: relative;
     display: flex;
     align-items: flex-start;
@@ -167,7 +169,7 @@ export const styles = css `
     padding: 0 6px;
 
     color: var(--nile-colors-dark-900);
-    font-family: var
+    font-family:  var(--nile-font-family-serif);
     font-size: 14px;
     font-style: normal;
     font-weight: 400;

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"]}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2LxB,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    max-width: 100%;\n    box-sizing: border-box;\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(--nile-font-family-serif);\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"]}