@aquera/nile-elements 0.1.63-beta-1.1 → 0.1.63

package/dist/src/nile-icon-button/nile-icon-button.css.js

@@ -11,10 +11,7 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     display: inline-block;
-    color:  var(--nile-colors-neutral-700);
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+    color: hsl(240 5.2% 33.9%);
   }
 
   .icon-button {
@@ -23,10 +20,10 @@ export const styles = css `
     align-items: center;
     background: none;
     border: none;
-    border-radius: var(--nile-radius-sm);
+    border-radius: 0.25rem;
     font-size: inherit;
     color: inherit;
-    padding: var(--nile-radius-md);
+    padding: 0.5rem;
     cursor: pointer;
     transition: 50ms;
     -webkit-appearance: none;
@@ -34,7 +31,7 @@ export const styles = css `
 
   .icon-button:hover:not(.icon-button--disabled),
   .icon-button:focus-visible:not(.icon-button--disabled) {
-    color: var(--nile-colors-blue-500)
+    color: hsl(200.4 98% 39.4%);
   }
 
   .icon-button:active:not(.icon-button--disabled) {

package/dist/src/nile-icon-button/nile-icon-button.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-icon-button.css.js","sourceRoot":"","sources":["../../../src/nile-icon-button/nile-icon-button.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDxB,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';\n\n/**\n * IconButton CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n    color:  var(--nile-colors-neutral-700);\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .icon-button {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    background: none;\n    border: none;\n    border-radius: var(--nile-radius-sm);\n    font-size: inherit;\n    color: inherit;\n    padding: var(--nile-radius-md);\n    cursor: pointer;\n    transition: 50ms;\n    -webkit-appearance: none;\n  }\n\n  .icon-button:hover:not(.icon-button--disabled),\n  .icon-button:focus-visible:not(.icon-button--disabled) {\n    color: var(--nile-colors-blue-500)\n  }\n\n  .icon-button:active:not(.icon-button--disabled) {\n    color: hsl(201.3 96.3% 32.2%);\n  }\n\n  .icon-button:focus {\n    outline: none;\n  }\n\n  .icon-button--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .icon-button:focus-visible {\n    outline: hsl(200.4 98% 39.4%);\n    outline-offset: 1px;\n  }\n\n  .icon-button__icon {\n    pointer-events: none;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-icon-button.css.js","sourceRoot":"","sources":["../../../src/nile-icon-button/nile-icon-button.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CxB,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';\n\n/**\n * IconButton CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n    color: hsl(240 5.2% 33.9%);\n  }\n\n  .icon-button {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    background: none;\n    border: none;\n    border-radius: 0.25rem;\n    font-size: inherit;\n    color: inherit;\n    padding: 0.5rem;\n    cursor: pointer;\n    transition: 50ms;\n    -webkit-appearance: none;\n  }\n\n  .icon-button:hover:not(.icon-button--disabled),\n  .icon-button:focus-visible:not(.icon-button--disabled) {\n    color: hsl(200.4 98% 39.4%);\n  }\n\n  .icon-button:active:not(.icon-button--disabled) {\n    color: hsl(201.3 96.3% 32.2%);\n  }\n\n  .icon-button:focus {\n    outline: none;\n  }\n\n  .icon-button--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .icon-button:focus-visible {\n    outline: hsl(200.4 98% 39.4%);\n    outline-offset: 1px;\n  }\n\n  .icon-button__icon {\n    pointer-events: none;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-icon-button/nile-icon-button.d.ts

@@ -66,7 +66,6 @@ export declare class NileIconButton extends NileElement {
     blur(): void;
     private handleMouseOver;
     private handleMouseLeave;
-    private getTokenValueResolved;
     render(): TemplateResult;
 }
 export default NileIconButton;

package/dist/src/nile-icon-button/nile-icon-button.js

@@ -77,14 +77,6 @@ let NileIconButton = class NileIconButton extends NileElement {
     handleMouseLeave(e) {
         this.ishovered = false;
     }
-    getTokenValueResolved() {
-        const thisValue = this;
-        const value = Number(getComputedStyle(thisValue).getPropertyValue('--nile-width-14px').trim().split('px')[0]);
-        if (!value) {
-            return Number(getComputedStyle(thisValue).getPropertyValue('--ng-height-12px').trim().split('px')[0]);
-        }
-        return value;
-    }
     render() {
         const isLink = this.href ? true : false;
         const tag = isLink ? literal `a` : literal `button`;
@@ -122,7 +114,7 @@ let NileIconButton = class NileIconButton extends NileElement {
             src=${ifDefined(this.src)}
             .color=${this.color}
             aria-hidden="true"
-            size="${this.getTokenValueResolved()}"
+            size="14"
           ></nile-icon>
         </a>
       `;
@@ -160,7 +152,7 @@ let NileIconButton = class NileIconButton extends NileElement {
             src=${ifDefined(this.src)}
             .color=${this.color}
             aria-hidden="true"
-            size="${this.getTokenValueResolved()}"
+            size="14"
           ></nile-icon>
         </button>
       `;

package/dist/src/nile-icon-button/nile-icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-icon-button.js","sourceRoot":"","sources":["../../../src/nile-icon-button/nile-icon-button.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  CSSResultArray,\n  TemplateResult,\n  html,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-icon-button.css';\n\nimport '../nile-icon';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query, state } from 'lit/decorators.js';\nimport { literal } from 'lit/static-html.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { CSSResultGroup } from 'lit';\nimport NileElement from '../internal/nile-element';\n\n/**\n * @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n * @status stable\n * @since 2.0\n *\n * @dependency nile-icon\n *\n * @event nile-blur - Emitted when the icon button loses focus.\n * @event nile-focus - Emitted when the icon button gains focus.\n *\n * @csspart base - The component's base wrapper.\n */\n/**\n * Nile icon component.\n *\n * @tag nile-icon-button\n *\n */\n@customElement('nile-icon-button')\nexport class NileIconButton extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  @query('.icon-button') button: HTMLButtonElement | HTMLLinkElement;\n\n  @state() private hasFocus = false;\n\n  /** The name of the icon to draw. Available names depend on the icon library being used. */\n  @property() name?: string;\n\n  /** The name of a registered custom icon library. */\n  @property() library?: string;\n\n  /**\n   * An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\n   * can result in XSS attacks.\n   */\n  @property() src?: string;\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @property() href?: string;\n\n  /** Tells the browser where to open the link. Only used when `href` is set. */\n  @property() target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */\n  @property() download?: string;\n\n  /**\n   * A description that gets read by assistive devices. For optimal accessibility, you should always include a label\n   * that describes what the icon button does.\n   */\n  @property() label = '';\n\n  /** Disables the button. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**Default color to icon */\n  @property({ type: String, reflect: true }) color?: string;\n\n  @property({ type: Boolean, reflect: true }) ishovered: boolean = false;\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('nile-blur');\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('nile-focus');\n  }\n\n  private handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  }\n\n  /** Simulates a click on the icon button. */\n  click() {\n    this.button.click();\n  }\n\n  /** Sets focus on the icon button. */\n  focus(options?: FocusOptions) {\n    this.button.focus(options);\n  }\n\n  /** Removes focus from the icon button. */\n  blur() {\n    this.button.blur();\n  }\n\n  private handleMouseOver(e: any) {\n    this.ishovered = true;\n  }\n  private handleMouseLeave(e: any) {\n    this.ishovered = false;\n  }\n\n  private getTokenValueResolved(): any {\n    const thisValue = this; \n  \n    const value = Number(getComputedStyle(thisValue).getPropertyValue('--nile-width-14px').trim().split('px')[0]);\n    if (!value) {\n      return Number(getComputedStyle(thisValue).getPropertyValue('--ng-height-12px').trim().split('px')[0]);\n    }\n    return value;\n  }\n\n  render(): TemplateResult {\n    const isLink = this.href ? true : false;\n    const tag = isLink ? literal`a` : literal`button`;\n    /* eslint-disable lit/binding-positions, lit/no-invalid-html */\n    if(isLink){\n      return html`\n        <a\n          part=\"base\"\n          class=${classMap({\n            'icon-button': true,\n            'icon-button--disabled': !isLink && this.disabled,\n            'icon-button--focused': this.hasFocus,\n          })}\n          .disabled=${isLink}\n          type=${ifDefined(isLink ? undefined : 'button')}\n          href=${ifDefined(isLink ? this.href : undefined)}\n          target=${ifDefined(isLink ? this.target : undefined)}\n          download=${ifDefined(isLink ? this.download : undefined)}\n          rel=${ifDefined(\n            isLink && this.target ? 'noreferrer noopener' : undefined\n          )}\n          role=${ifDefined(isLink ? undefined : 'button')}\n          aria-disabled=${this.disabled ? 'true' : 'false'}\n          aria-label=\"${this.label}\"\n          tabindex=${this.disabled ? '-1' : '0'}\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n          @click=${this.handleClick}\n          @mouseover=${this.handleMouseOver}\n          @mouseleave=${this.handleMouseLeave}\n        >\n      \n          <nile-icon\n            class=\"icon-button__icon\"\n            name=${ifDefined(this.name)}\n            library=${ifDefined(this.library)}\n            src=${ifDefined(this.src)}\n            .color=${this.color}\n            aria-hidden=\"true\"\n            size=\"${this.getTokenValueResolved()}\"\n          ></nile-icon>\n        </a>\n      `;\n    }\n    else{\n      return html`\n        <button\n          part=\"base\"\n          class=${classMap({\n            'icon-button': true,\n            'icon-button--disabled': !isLink && this.disabled,\n            'icon-button--focused': this.hasFocus,\n          })}\n          .disabled=${isLink}\n          type=${ifDefined(isLink ? undefined : 'button')}\n          href=${ifDefined(isLink ? this.href : undefined)}\n          target=${ifDefined(isLink ? this.target : undefined)}\n          download=${ifDefined(isLink ? this.download : undefined)}\n          rel=${ifDefined(\n            isLink && this.target ? 'noreferrer noopener' : undefined\n          )}\n          role=${ifDefined(isLink ? undefined : 'button')}\n          aria-disabled=${this.disabled ? 'true' : 'false'}\n          aria-label=\"${this.label}\"\n          tabindex=${this.disabled ? '-1' : '0'}\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n          @click=${this.handleClick}\n          @mouseover=${this.handleMouseOver}\n          @mouseleave=${this.handleMouseLeave}\n        >\n      \n          <nile-icon\n            class=\"icon-button__icon\"\n            name=${ifDefined(this.name)}\n            library=${ifDefined(this.library)}\n            src=${ifDefined(this.src)}\n            .color=${this.color}\n            aria-hidden=\"true\"\n            size=\"${this.getTokenValueResolved()}\"\n          ></nile-icon>\n        </button>\n      `;\n    }\n  }\n}\n\nexport default NileIconButton;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-icon-button': NileIconButton;\n  }\n}\n"]}
+{"version":3,"file":"nile-icon-button.js","sourceRoot":"","sources":["../../../src/nile-icon-button/nile-icon-button.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAIL,IAAI,GACL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;;;;;;;GAWG;AACH;;;;;GAKG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,WAAW;IAAxC;;QAKY,aAAQ,GAAG,KAAK,CAAC;QAuBlC;;;WAGG;QACS,UAAK,GAAG,EAAE,CAAC;QAEvB,2BAA2B;QACiB,aAAQ,GAAG,KAAK,CAAC;QAKjB,cAAS,GAAY,KAAK,CAAC;IA8HzE,CAAC;IA5HS,UAAU;QAChB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACzB,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC1B,CAAC;IAEO,WAAW,CAAC,KAAiB;QACnC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAED,4CAA4C;IAC5C,KAAK;QACH,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;IACtB,CAAC;IAED,qCAAqC;IACrC,KAAK,CAAC,OAAsB;QAC1B,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC7B,CAAC;IAED,0CAA0C;IAC1C,IAAI;QACF,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAEO,eAAe,CAAC,CAAM;QAC5B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IACO,gBAAgB,CAAC,CAAM;QAC7B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC;IAED,MAAM;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;QACxC,MAAM,GAAG,GAAG,MAAM,CAAC,CAAC,CAAC,OAAO,CAAA,GAAG,CAAC,CAAC,CAAC,OAAO,CAAA,QAAQ,CAAC;QAClD,+DAA+D;QAC/D,IAAG,MAAM,EAAC,CAAC;YACT,OAAO,IAAI,CAAA;;;kBAGC,QAAQ,CAAC;gBACf,aAAa,EAAE,IAAI;gBACnB,uBAAuB,EAAE,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ;gBACjD,sBAAsB,EAAE,IAAI,CAAC,QAAQ;aACtC,CAAC;sBACU,MAAM;iBACX,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC;iBACxC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;mBACvC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;qBACzC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;gBAClD,SAAS,CACb,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,CAC1D;iBACM,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC;0BAC/B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;wBAClC,IAAI,CAAC,KAAK;qBACb,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG;kBAC7B,IAAI,CAAC,UAAU;mBACd,IAAI,CAAC,WAAW;mBAChB,IAAI,CAAC,WAAW;uBACZ,IAAI,CAAC,eAAe;wBACnB,IAAI,CAAC,gBAAgB;;;;;mBAK1B,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;sBACjB,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;kBAC3B,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;qBAChB,IAAI,CAAC,KAAK;;;;;OAKxB,CAAC;QACJ,CAAC;aACG,CAAC;YACH,OAAO,IAAI,CAAA;;;kBAGC,QAAQ,CAAC;gBACf,aAAa,EAAE,IAAI;gBACnB,uBAAuB,EAAE,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ;gBACjD,sBAAsB,EAAE,IAAI,CAAC,QAAQ;aACtC,CAAC;sBACU,MAAM;iBACX,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC;iBACxC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;mBACvC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;qBACzC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;gBAClD,SAAS,CACb,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,CAC1D;iBACM,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC;0BAC/B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;wBAClC,IAAI,CAAC,KAAK;qBACb,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG;kBAC7B,IAAI,CAAC,UAAU;mBACd,IAAI,CAAC,WAAW;mBAChB,IAAI,CAAC,WAAW;uBACZ,IAAI,CAAC,eAAe;wBACnB,IAAI,CAAC,gBAAgB;;;;;mBAK1B,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;sBACjB,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;kBAC3B,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;qBAChB,IAAI,CAAC,KAAK;;;;;OAKxB,CAAC;QACJ,CAAC;IACH,CAAC;;AApKM,qBAAM,GAAmB,MAAM,AAAzB,CAA0B;AAEhB;IAAtB,KAAK,CAAC,cAAc,CAAC;8CAA6C;AAElD;IAAhB,KAAK,EAAE;gDAA0B;AAGtB;IAAX,QAAQ,EAAE;4CAAe;AAGd;IAAX,QAAQ,EAAE;+CAAkB;AAMjB;IAAX,QAAQ,EAAE;2CAAc;AAGb;IAAX,QAAQ,EAAE;4CAAe;AAGd;IAAX,QAAQ,EAAE;8CAAkD;AAGjD;IAAX,QAAQ,EAAE;gDAAmB;AAMlB;IAAX,QAAQ,EAAE;6CAAY;AAGqB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAkB;AAGlB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAgB;AAEd;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAA4B;AAxC5D,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAsK1B;;AAED,eAAe,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 {\n  LitElement,\n  CSSResultArray,\n  TemplateResult,\n  html,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-icon-button.css';\n\nimport '../nile-icon';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query, state } from 'lit/decorators.js';\nimport { literal } from 'lit/static-html.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { CSSResultGroup } from 'lit';\nimport NileElement from '../internal/nile-element';\n\n/**\n * @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n * @status stable\n * @since 2.0\n *\n * @dependency nile-icon\n *\n * @event nile-blur - Emitted when the icon button loses focus.\n * @event nile-focus - Emitted when the icon button gains focus.\n *\n * @csspart base - The component's base wrapper.\n */\n/**\n * Nile icon component.\n *\n * @tag nile-icon-button\n *\n */\n@customElement('nile-icon-button')\nexport class NileIconButton extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  @query('.icon-button') button: HTMLButtonElement | HTMLLinkElement;\n\n  @state() private hasFocus = false;\n\n  /** The name of the icon to draw. Available names depend on the icon library being used. */\n  @property() name?: string;\n\n  /** The name of a registered custom icon library. */\n  @property() library?: string;\n\n  /**\n   * An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\n   * can result in XSS attacks.\n   */\n  @property() src?: string;\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @property() href?: string;\n\n  /** Tells the browser where to open the link. Only used when `href` is set. */\n  @property() target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */\n  @property() download?: string;\n\n  /**\n   * A description that gets read by assistive devices. For optimal accessibility, you should always include a label\n   * that describes what the icon button does.\n   */\n  @property() label = '';\n\n  /** Disables the button. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**Default color to icon */\n  @property({ type: String, reflect: true }) color?: string;\n\n  @property({ type: Boolean, reflect: true }) ishovered: boolean = false;\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('nile-blur');\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('nile-focus');\n  }\n\n  private handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  }\n\n  /** Simulates a click on the icon button. */\n  click() {\n    this.button.click();\n  }\n\n  /** Sets focus on the icon button. */\n  focus(options?: FocusOptions) {\n    this.button.focus(options);\n  }\n\n  /** Removes focus from the icon button. */\n  blur() {\n    this.button.blur();\n  }\n\n  private handleMouseOver(e: any) {\n    this.ishovered = true;\n  }\n  private handleMouseLeave(e: any) {\n    this.ishovered = false;\n  }\n\n  render(): TemplateResult {\n    const isLink = this.href ? true : false;\n    const tag = isLink ? literal`a` : literal`button`;\n    /* eslint-disable lit/binding-positions, lit/no-invalid-html */\n    if(isLink){\n      return html`\n        <a\n          part=\"base\"\n          class=${classMap({\n            'icon-button': true,\n            'icon-button--disabled': !isLink && this.disabled,\n            'icon-button--focused': this.hasFocus,\n          })}\n          .disabled=${isLink}\n          type=${ifDefined(isLink ? undefined : 'button')}\n          href=${ifDefined(isLink ? this.href : undefined)}\n          target=${ifDefined(isLink ? this.target : undefined)}\n          download=${ifDefined(isLink ? this.download : undefined)}\n          rel=${ifDefined(\n            isLink && this.target ? 'noreferrer noopener' : undefined\n          )}\n          role=${ifDefined(isLink ? undefined : 'button')}\n          aria-disabled=${this.disabled ? 'true' : 'false'}\n          aria-label=\"${this.label}\"\n          tabindex=${this.disabled ? '-1' : '0'}\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n          @click=${this.handleClick}\n          @mouseover=${this.handleMouseOver}\n          @mouseleave=${this.handleMouseLeave}\n        >\n      \n          <nile-icon\n            class=\"icon-button__icon\"\n            name=${ifDefined(this.name)}\n            library=${ifDefined(this.library)}\n            src=${ifDefined(this.src)}\n            .color=${this.color}\n            aria-hidden=\"true\"\n            size=\"14\"\n          ></nile-icon>\n        </a>\n      `;\n    }\n    else{\n      return html`\n        <button\n          part=\"base\"\n          class=${classMap({\n            'icon-button': true,\n            'icon-button--disabled': !isLink && this.disabled,\n            'icon-button--focused': this.hasFocus,\n          })}\n          .disabled=${isLink}\n          type=${ifDefined(isLink ? undefined : 'button')}\n          href=${ifDefined(isLink ? this.href : undefined)}\n          target=${ifDefined(isLink ? this.target : undefined)}\n          download=${ifDefined(isLink ? this.download : undefined)}\n          rel=${ifDefined(\n            isLink && this.target ? 'noreferrer noopener' : undefined\n          )}\n          role=${ifDefined(isLink ? undefined : 'button')}\n          aria-disabled=${this.disabled ? 'true' : 'false'}\n          aria-label=\"${this.label}\"\n          tabindex=${this.disabled ? '-1' : '0'}\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n          @click=${this.handleClick}\n          @mouseover=${this.handleMouseOver}\n          @mouseleave=${this.handleMouseLeave}\n        >\n      \n          <nile-icon\n            class=\"icon-button__icon\"\n            name=${ifDefined(this.name)}\n            library=${ifDefined(this.library)}\n            src=${ifDefined(this.src)}\n            .color=${this.color}\n            aria-hidden=\"true\"\n            size=\"14\"\n          ></nile-icon>\n        </button>\n      `;\n    }\n  }\n}\n\nexport default NileIconButton;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-icon-button': NileIconButton;\n  }\n}\n"]}

package/dist/src/nile-inline-edit/nile-inline-edit.css.js

@@ -11,49 +11,43 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     box-sizing: border-box;
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .inline__edit--label {
-    color: var(--nile-inline-edit-label-font-color, var(--ng-colors-text-primary-900));
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    color: var(--nile-inline-edit-label-font-color);
+    font-family: var(--nile-font-family-serif);
+    font-size: var(--nile-type-scale-3);
     font-style: normal;
-    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
-    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));
-    margin-bottom: var(--nile-spacing-sm);
+    font-weight: var(--nile-font-weight-medium);
+    line-height: 20px;
+    margin-bottom: 6px;
   }
 
   .inline__edit--open--container {
     display: block;
-    width: var(--nile-width-width-xxs, var(--ng-spacing-80));
+    width: var(--nile-width-width-xxs);
     box-sizing: border-box;
   }
 
   .inline__edit--container {
     box-sizing: border-box;
-    width: var(--nile-width-width-xxs, var(--ng-width-80));
-    min-width: var(--nile-width-width-xxs, var(--ng-width-80));
-    min-height: var(--nile-height-40px, var(--ng-height-40px));
+    width: var(--nile-width-width-xxs);
+    min-width: var(--nile-width-width-xxs);
+    min-height: 40px;
     height: auto;
-    padding-top: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
-    padding-bottom: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
-    padding-left: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
-    padding-right:var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
-    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));
-    color: var(--nile-inline-edit-font-color, var(--ng-colors-text-quaternary-500));
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
-    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
+    padding: var(--nile-spacing-spacing-md) var(--nile-spacing-spacing-lg);
+    border-radius: var(--nile-radius-radius-xs);
+    color: var(--nile-inline-edit-font-color);
+    font-family: var(--nile-font-family-serif);
+    font-size: var(--nile-type-scale-4);
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
-    line-height: var(--nile-spacing-spacing-3xl, var(--ng-line-height-text-md));
+    font-weight: var(--nile-font-weight-regular);
+    line-height: var(--nile-spacing-spacing-3xl);
     word-wrap: break-word;
   }
 
   .inline__edit--container:hover {
-    background-color:var(--nile-inline-edit-hover-background-color, var(--ng-colors-bg-secondary-hover));
+    background-color:var(--nile-inline-edit-hover-background-color);
   }
 `;
 export default [styles];

package/dist/src/nile-inline-edit/nile-inline-edit.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-inline-edit.css.js","sourceRoot":"","sources":["../../../src/nile-inline-edit/nile-inline-edit.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CxB,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';\n\n/**\n * InlineEdit CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .inline__edit--label {\n    color: var(--nile-inline-edit-label-font-color, var(--ng-colors-text-primary-900));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n    margin-bottom: var(--nile-spacing-sm);\n  }\n\n  .inline__edit--open--container {\n    display: block;\n    width: var(--nile-width-width-xxs, var(--ng-spacing-80));\n    box-sizing: border-box;\n  }\n\n  .inline__edit--container {\n    box-sizing: border-box;\n    width: var(--nile-width-width-xxs, var(--ng-width-80));\n    min-width: var(--nile-width-width-xxs, var(--ng-width-80));\n    min-height: var(--nile-height-40px, var(--ng-height-40px));\n    height: auto;\n    padding-top: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n    padding-bottom: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n    padding-left: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n    padding-right:var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));\n    color: var(--nile-inline-edit-font-color, var(--ng-colors-text-quaternary-500));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-spacing-spacing-3xl, var(--ng-line-height-text-md));\n    word-wrap: break-word;\n  }\n\n  .inline__edit--container:hover {\n    background-color:var(--nile-inline-edit-hover-background-color, var(--ng-colors-bg-secondary-hover));\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-inline-edit.css.js","sourceRoot":"","sources":["../../../src/nile-inline-edit/nile-inline-edit.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCxB,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';\n\n/**\n * InlineEdit CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n  }\n\n  .inline__edit--label {\n    color: var(--nile-inline-edit-label-font-color);\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-type-scale-3);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium);\n    line-height: 20px;\n    margin-bottom: 6px;\n  }\n\n  .inline__edit--open--container {\n    display: block;\n    width: var(--nile-width-width-xxs);\n    box-sizing: border-box;\n  }\n\n  .inline__edit--container {\n    box-sizing: border-box;\n    width: var(--nile-width-width-xxs);\n    min-width: var(--nile-width-width-xxs);\n    min-height: 40px;\n    height: auto;\n    padding: var(--nile-spacing-spacing-md) var(--nile-spacing-spacing-lg);\n    border-radius: var(--nile-radius-radius-xs);\n    color: var(--nile-inline-edit-font-color);\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-type-scale-4);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    line-height: var(--nile-spacing-spacing-3xl);\n    word-wrap: break-word;\n  }\n\n  .inline__edit--container:hover {\n    background-color:var(--nile-inline-edit-hover-background-color);\n  }\n`;\n\nexport default [styles];\n"]}