@aquera/nile-elements 1.0.1-beta-1.2 → 1.0.1-beta-1.4

package/dist/src/nile-error-message/nile-error-message.js

@@ -46,11 +46,12 @@ let NileErrorMessage = class NileErrorMessage extends LitElement {
         this.isExpanded = !this.isExpanded;
     }
     render() {
-        const iconName = this.isExpanded ? 'arrowup' : 'arrowdown';
+        const iconName = this.isExpanded ? 'var(--nile-icon-arrow-up, var(--ng-icon-chevron-up))' : 'var(--nile-icon-arrow-down, var(--ng-icon-chevron-down))';
         return html `
       <div class="nile-error-message" part="base">
         <nile-icon
-          name="info2"
+          name="var(--nile-icon-info, var(--ng-icon-info-circle))"
+          method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
           size="14"
           class="nile-error-message__icon"
           part="icon"
@@ -69,7 +70,7 @@ let NileErrorMessage = class NileErrorMessage extends LitElement {
               class="nile-error-message__more-button"
               @click=${this.toggleExpanded}
               >${this.isExpanded ? 'View Less' : 'View More'}
-              <nile-icon color="var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600))" part="icon" size="14" name="${iconName}"></nile-icon>
+              <nile-icon color="var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600))" part="icon" size="14" name="${iconName}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"></nile-icon>
               </span
             > ` : ``}
             </div>

package/dist/src/nile-error-message/nile-error-message.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-error-message.js","sourceRoot":"","sources":["../../../src/nile-error-message/nile-error-message.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-error-message.css';\n\n/**\n * A custom error message component that displays error information to the user.\n * @customElement nile-error-message\n */\n@customElement('nile-error-message')\nexport class NileErrorMessage extends LitElement {\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  // Represents the error message to be displayed to the user.\n  @property({ type: String })\n  errorMessage: string = '';\n\n  // Represents additional details about the error, like stack trace or other info.\n  @property({ type: String })\n  errorResponse: string;\n\n  // Extended error information\n  @property({ type: String })\n  errorResponseLong: string;\n\n  @property({ type: Boolean })\n  isExpanded: boolean = false;\n\n  @property({ type: String }) maxWidth: string;\n\n  @property({ type: String }) maxHeight: string;\n\n  @property({ type: String }) maxDialogHeight: string;\n\n  // The maximum length before truncation.\n  private readonly MAX_LENGTH: number = 100;\n\n  /**\n   * Get a truncated version of the errorResponse if it's too long.\n   * @returns {string}\n   */\n  getTruncatedResponse(): string {\n    if (this.errorResponse.length > this.MAX_LENGTH) {\n      return `${this.errorResponse.substring(0, this.MAX_LENGTH)}...`;\n    }\n    return this.errorResponse;\n  }\n\n  updated(changedProperties: Map<string, any>) {\n    if (changedProperties.has('maxWidth')) {\n      this.style.setProperty('--nile-error-max-width', this.maxWidth);\n    }\n    if (changedProperties.has('maxHeight')) {\n      this.style.setProperty('--nile-error-max-height', this.maxHeight);\n    }\n    if (changedProperties.has('maxDialogHeight')) {\n      this.style.setProperty('--nile-error-max-dialog-height', this.maxDialogHeight);\n    }\n  }\n\n  /**\n   * Toggle the expanded state of the error response.\n   */\n  toggleExpanded() {\n    this.isExpanded = !this.isExpanded;\n  }\n\n  public render(): TemplateResult {\n    const iconName = this.isExpanded ? 'arrowup' : 'arrowdown';\n\n    return html`\n      <div class=\"nile-error-message\" part=\"base\">\n        <nile-icon\n          name=\"info2\"\n          size=\"14\"\n          class=\"nile-error-message__icon\"\n          part=\"icon\"\n          color=\"var(--nile-colors-red-700, var(--ng-colors-fg-error-primary))\"\n        ></nile-icon>\n        <span class=\"nile-error-message__error\">${this.errorMessage}</span>\n\n\n        ${this.errorResponse\n        ? html`\n            <div class=\"nile-error-message__response\">\n            ${this.errorResponse}\n            ${this.errorResponseLong\n                ? html`\n              <span\n              class=\"nile-error-message__more-button\"\n              @click=${this.toggleExpanded}\n              >${this.isExpanded ? 'View Less' : 'View More'}\n              <nile-icon color=\"var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600))\" part=\"icon\" size=\"14\" name=\"${iconName}\"></nile-icon>\n              </span\n            > `:``}\n            </div>\n            `\n        : ``}\n\n        <div\n          class=\"nile-error-message__response-expanded ${this.isExpanded\n            ? 'expanded'\n            : 'collapsed'}\"\n        >\n          ${this.errorResponseLong}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-error-message': NileErrorMessage;\n  }\n}\n"]}
+{"version":3,"file":"nile-error-message.js","sourceRoot":"","sources":["../../../src/nile-error-message/nile-error-message.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-error-message.css';\n\n/**\n * A custom error message component that displays error information to the user.\n * @customElement nile-error-message\n */\n@customElement('nile-error-message')\nexport class NileErrorMessage extends LitElement {\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  // Represents the error message to be displayed to the user.\n  @property({ type: String })\n  errorMessage: string = '';\n\n  // Represents additional details about the error, like stack trace or other info.\n  @property({ type: String })\n  errorResponse: string;\n\n  // Extended error information\n  @property({ type: String })\n  errorResponseLong: string;\n\n  @property({ type: Boolean })\n  isExpanded: boolean = false;\n\n  @property({ type: String }) maxWidth: string;\n\n  @property({ type: String }) maxHeight: string;\n\n  @property({ type: String }) maxDialogHeight: string;\n\n  // The maximum length before truncation.\n  private readonly MAX_LENGTH: number = 100;\n\n  /**\n   * Get a truncated version of the errorResponse if it's too long.\n   * @returns {string}\n   */\n  getTruncatedResponse(): string {\n    if (this.errorResponse.length > this.MAX_LENGTH) {\n      return `${this.errorResponse.substring(0, this.MAX_LENGTH)}...`;\n    }\n    return this.errorResponse;\n  }\n\n  updated(changedProperties: Map<string, any>) {\n    if (changedProperties.has('maxWidth')) {\n      this.style.setProperty('--nile-error-max-width', this.maxWidth);\n    }\n    if (changedProperties.has('maxHeight')) {\n      this.style.setProperty('--nile-error-max-height', this.maxHeight);\n    }\n    if (changedProperties.has('maxDialogHeight')) {\n      this.style.setProperty('--nile-error-max-dialog-height', this.maxDialogHeight);\n    }\n  }\n\n  /**\n   * Toggle the expanded state of the error response.\n   */\n  toggleExpanded() {\n    this.isExpanded = !this.isExpanded;\n  }\n\n  public render(): TemplateResult {\n    const iconName = this.isExpanded ? 'var(--nile-icon-arrow-up, var(--ng-icon-chevron-up))' : 'var(--nile-icon-arrow-down, var(--ng-icon-chevron-down))';\n\n    return html`\n      <div class=\"nile-error-message\" part=\"base\">\n        <nile-icon\n          name=\"var(--nile-icon-info, var(--ng-icon-info-circle))\"\n          method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n          size=\"14\"\n          class=\"nile-error-message__icon\"\n          part=\"icon\"\n          color=\"var(--nile-colors-red-700, var(--ng-colors-fg-error-primary))\"\n        ></nile-icon>\n        <span class=\"nile-error-message__error\">${this.errorMessage}</span>\n\n\n        ${this.errorResponse\n        ? html`\n            <div class=\"nile-error-message__response\">\n            ${this.errorResponse}\n            ${this.errorResponseLong\n                ? html`\n              <span\n              class=\"nile-error-message__more-button\"\n              @click=${this.toggleExpanded}\n              >${this.isExpanded ? 'View Less' : 'View More'}\n              <nile-icon color=\"var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600))\" part=\"icon\" size=\"14\" name=\"${iconName}\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"></nile-icon>\n              </span\n            > `:``}\n            </div>\n            `\n        : ``}\n\n        <div\n          class=\"nile-error-message__response-expanded ${this.isExpanded\n            ? 'expanded'\n            : 'collapsed'}\"\n        >\n          ${this.errorResponseLong}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-error-message': NileErrorMessage;\n  }\n}\n"]}

package/dist/src/nile-error-notification/nile-error-notification.js

@@ -44,7 +44,8 @@ let NileErrorNotification = class NileErrorNotification extends LitElement {
         return html `
       <div class="nile-error-notification" part="container">
         <nile-icon
-          name="info2"
+          name="var(--nile-icon-info, var(--ng-icon-info-circle))"
+          method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
           size="14"
           class="nile-error-notification__icon"
           part="icon"

package/dist/src/nile-error-notification/nile-error-notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-error-notification.js","sourceRoot":"","sources":["../../../src/nile-error-notification/nile-error-notification.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EACL,UAAU,EACV,IAAI,GAIL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEvD;;;;;GAKG;AAEI,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAA9C;;QASL,4DAA4D;QAChB,iBAAY,GAAW,EAAE,CAAC;QAE1B,UAAK,GAAW,EAAE,CAAC;QAgC/D,gBAAgB;IAClB,CAAC;IA5CC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAMS,OAAO,CAAC,kBAAkC;QAClD,IAAG,kBAAkB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAC,CAAC;YAClC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,oBAAoB,EAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACzD,CAAC;IACH,CAAC;IAED,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACX,OAAO,IAAI,CAAA;;;;;;;;;;YAUH,IAAI,CAAC,YAAY;;;KAGxB,CAAC;IACJ,CAAC;CAGF,CAAA;AAnC6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAG,CAAC;2DAA2B;AAE1B;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAG,CAAC;oDAAoB;AAZpD,qBAAqB;IADjC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,qBAAqB,CA6CjC;;AAED,eAAe,qBAAqB,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  html,\n  CSSResultArray,\n  TemplateResult,\n  PropertyValues,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-error-notification.css';\n\n/**\n * Nile icon component.\n *\n * @tag nile-error-notification\n *\n */\n@customElement('nile-error-notification')\nexport class NileErrorNotification extends LitElement {\n  /**\n   * The styles for ErrorNotification\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  // Represents the error message to be displayed to the user.\n  @property({ type: String, reflect: true  }) errorMessage: string = '';\n\n  @property({ type: String, reflect: true  }) color: string = '';\n  protected updated(_changedProperties: PropertyValues): void {\n    if(_changedProperties.has('color')){\n      this.style.setProperty('--indication-color',this.color)\n    }\n  }\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  public render(): TemplateResult {\n    return html`\n      <div class=\"nile-error-notification\" part=\"container\">\n        <nile-icon\n          name=\"info2\"\n          size=\"14\"\n          class=\"nile-error-notification__icon\"\n          part=\"icon\"\n          color=\"var(--indication-color)\"\n        ></nile-icon>\n        <span part=\"message\">\n          ${this.errorMessage}\n        </span>\n      </div>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileErrorNotification;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-error-notification': NileErrorNotification;\n  }\n}\n"]}
+{"version":3,"file":"nile-error-notification.js","sourceRoot":"","sources":["../../../src/nile-error-notification/nile-error-notification.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EACL,UAAU,EACV,IAAI,GAIL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEvD;;;;;GAKG;AAEI,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAA9C;;QASL,4DAA4D;QAChB,iBAAY,GAAW,EAAE,CAAC;QAE1B,UAAK,GAAW,EAAE,CAAC;QAiC/D,gBAAgB;IAClB,CAAC;IA7CC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAMS,OAAO,CAAC,kBAAkC;QAClD,IAAG,kBAAkB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAC,CAAC;YAClC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,oBAAoB,EAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACzD,CAAC;IACH,CAAC;IAED,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACX,OAAO,IAAI,CAAA;;;;;;;;;;;YAWH,IAAI,CAAC,YAAY;;;KAGxB,CAAC;IACJ,CAAC;CAGF,CAAA;AApC6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAG,CAAC;2DAA2B;AAE1B;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAG,CAAC;oDAAoB;AAZpD,qBAAqB;IADjC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,qBAAqB,CA8CjC;;AAED,eAAe,qBAAqB,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  html,\n  CSSResultArray,\n  TemplateResult,\n  PropertyValues,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-error-notification.css';\n\n/**\n * Nile icon component.\n *\n * @tag nile-error-notification\n *\n */\n@customElement('nile-error-notification')\nexport class NileErrorNotification extends LitElement {\n  /**\n   * The styles for ErrorNotification\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  // Represents the error message to be displayed to the user.\n  @property({ type: String, reflect: true  }) errorMessage: string = '';\n\n  @property({ type: String, reflect: true  }) color: string = '';\n  protected updated(_changedProperties: PropertyValues): void {\n    if(_changedProperties.has('color')){\n      this.style.setProperty('--indication-color',this.color)\n    }\n  }\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  public render(): TemplateResult {\n    return html`\n      <div class=\"nile-error-notification\" part=\"container\">\n        <nile-icon\n          name=\"var(--nile-icon-info, var(--ng-icon-info-circle))\"\n          method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n          size=\"14\"\n          class=\"nile-error-notification__icon\"\n          part=\"icon\"\n          color=\"var(--indication-color)\"\n        ></nile-icon>\n        <span part=\"message\">\n          ${this.errorMessage}\n        </span>\n      </div>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileErrorNotification;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-error-notification': NileErrorNotification;\n  }\n}\n"]}

package/dist/src/nile-file-preview/nile-file-preview.template.js

@@ -20,7 +20,8 @@ export function getHorizontalUploadingState(file, uploadStatus) {
         </div>
         <slot @click=${(e) => cancelFileUpload(file, e)} name="cancelIcon">
           <nile-icon
-            name="close"
+            name="var(--nile-icon-close, var(--ng-icon-x-close))"
+            method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
             size="14"
             class="icon"
           ></nile-icon>
@@ -47,7 +48,8 @@ export function getHorizontalPreviewState(url, file, originalUrl) {
       <slot name="cancelIcon">
         <nile-icon
           @click=${(e) => removeFile(file, e, originalUrl)}
-          name="trash"
+          name="var(--nile-icon-trash, var(--ng-icon-trash-01))"
+          method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
           size="14"
           class="icon"
         ></nile-icon>
@@ -60,7 +62,7 @@ export function getHorizontalNoPreviewState(file, originalUrl) {
     <div class="no-preview horizontal-div">
       <div class="no-preview-container">
         <div class="document-icon">
-          <nile-icon name="general" size="20" color="var(--nile-colors-blue-500, var(--ng-componentcolors-utility-brand-600))"></nile-icon>
+          <nile-icon name="var(--nile-icon-general, var(--ng-icon-file-06))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="20" color="var(--nile-colors-blue-500, var(--ng-componentcolors-utility-brand-600))"></nile-icon>
         </div>
         <div class="preview-file-info">
           <p>${file.name}</p>
@@ -71,7 +73,8 @@ export function getHorizontalNoPreviewState(file, originalUrl) {
         <slot name="cancelIcon">
           <nile-icon
             @click=${(e) => removeFile(file, e, originalUrl)}
-            name="trash"
+            name="var(--nile-icon-trash, var(--ng-icon-trash-01))"
+            method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
             size="14"
             class="icon"
           ></nile-icon>
@@ -85,7 +88,7 @@ export function getHorizontalErrorState(file, errorMessage, originalUrl) {
     <div class="error horizontal-div">
       <div class="error-container">
         <div class="error-icon">
-          <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600))"></nile-icon>
+          <nile-icon name="var(--nile-icon-info, var(--ng-icon-info-circle))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="20" color="var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600))"></nile-icon>
         </div>
         <div class="file-info">
           <p>${file.name}</p>
@@ -97,7 +100,8 @@ export function getHorizontalErrorState(file, errorMessage, originalUrl) {
       <slot name="cancelIcon">
           <nile-icon
             @click=${(e) => removeFile(file, e, originalUrl)}
-            name="close"
+            name="var(--nile-icon-close, var(--ng-icon-x-close))"
+            method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
             size="14"
             class="icon"
           ></nile-icon>
@@ -125,7 +129,8 @@ export function getVerticalUploadingState(file, uploadStatus) {
       <slot name="cancelIcon">
         <nile-icon
           @click=${(e) => cancelFileUpload(file, e)}
-          name="close"
+          name="var(--nile-icon-close, var(--ng-icon-x-close))"
+          method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
           size="14"
           class="icon corner-icon"
         ></nile-icon>
@@ -152,7 +157,8 @@ export function getVerticalPreviewState(url, file, originalUrl) {
       <slot name="cancelIcon">
         <nile-icon
           @click=${(e) => removeFile(file, e, originalUrl)}
-          name="trash"
+          name="var(--nile-icon-trash, var(--ng-icon-trash-01))"
+          method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
           size="14"
           class="icon corner-icon"
         ></nile-icon>
@@ -164,7 +170,7 @@ export function getVerticalNoPreviewState(file, originalUrl) {
     return html `
     <div class="vertical-div vertical-no-preview">
       <div class="vertical-document-icon">
-        <nile-icon name="general" size="20" color="var(--nile-colors-blue-500, var(--ng-componentcolors-utility-brand-600))"></nile-icon>
+        <nile-icon name="var(--nile-icon-general, var(--ng-icon-file-06))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="20" color="var(--nile-colors-blue-500, var(--ng-componentcolors-utility-brand-600))"></nile-icon>
       </div>
 
       <div class="content-container">
@@ -175,7 +181,8 @@ export function getVerticalNoPreviewState(file, originalUrl) {
       <slot name="cancelIcon">
         <nile-icon
           @click=${(e) => removeFile(file, e, originalUrl)}
-          name="trash"
+          name="var(--nile-icon-trash, var(--ng-icon-trash-01))"
+          method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
           size="14"
           class="icon corner-icon"
         ></nile-icon>
@@ -187,7 +194,7 @@ export function getVerticalErrorState(file, errorMessage, originalUrl) {
     return html `
     <div class="vertical-div vertical-error">
       <div class="vertical-document-icon error-bg">
-        <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600))"></nile-icon>
+        <nile-icon name="var(--nile-icon-info, var(--ng-icon-info-circle))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="20" color="var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600))"></nile-icon>
       </div>
 
       <div class="file-info-vertical-state">
@@ -199,7 +206,8 @@ export function getVerticalErrorState(file, errorMessage, originalUrl) {
 
       <slot name="cancelIcon" @click=${(e) => removeFile(file, e, originalUrl)}>
         <nile-icon
-          name="close"
+          name="var(--nile-icon-close, var(--ng-icon-x-close))"
+          method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
           size="14"
           class="icon corner-icon"
         ></nile-icon>

package/dist/src/nile-file-preview/nile-file-preview.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-file-preview.template.js","sourceRoot":"","sources":["../../../src/nile-file-preview/nile-file-preview.template.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Template File for nile-preview component\n */\n\nimport './nile-file-preview.css';\nimport { html, TemplateResult } from 'lit';\nimport { FilePreviewErrorMessages, RemoveFileDetail } from './types';\nimport { removeFile, cancelFileUpload } from './utils';\n\n export function getHorizontalUploadingState(\n  file: File,\n  uploadStatus: number\n ): TemplateResult {\n    return html`\n      <div class=\"uploading\">\n        <nile-loader width=\"24\" height=\"24\"></nile-loader>\n        <div class=\"progress-bar-container\">\n          <div class=\"progress-bar-percent\">\n            <p>Uploading File...</p>\n            <p>${uploadStatus}%</p>\n          </div>\n          <nile-progress-bar\n            value=\"${uploadStatus}\"\n          ></nile-progress-bar>\n          <p>${file.name}</p>\n        </div>\n        <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e)} name=\"cancelIcon\">\n          <nile-icon\n            name=\"close\"\n            size=\"14\"\n            class=\"icon\"\n          ></nile-icon>\n        </slot>\n      </div>\n    `;\n  }\n\nexport function getHorizontalPreviewState(\n  url: string,\n  file: File,\n  originalUrl: string\n): TemplateResult {\n  return html`\n    <div class=\"preview horizontal-div\">\n      <div class=\"preview-inner\">\n        <div class=\"preview-image-container\">\n            <img\n              class=\"image-preview\"\n              src=${url}\n              alt=${file.name}\n            />\n        </div>\n        <div class=\"preview-file-info\">\n          <p>${file.name}</p>\n          <p>${(file.type.split('/')[1]).toUpperCase()} &#8226; ${(Number(file.size) / 1024).toFixed(0)}KB</p>\n        </div>\n      </div>\n      <slot name=\"cancelIcon\">\n        <nile-icon\n          @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}\n          name=\"trash\"\n          size=\"14\"\n          class=\"icon\"\n        ></nile-icon>\n      </slot>\n    </div>\n  `;\n}\n\nexport function getHorizontalNoPreviewState(\n  file: File,\n  originalUrl: string\n): TemplateResult {\n  return html`\n    <div class=\"no-preview horizontal-div\">\n      <div class=\"no-preview-container\">\n        <div class=\"document-icon\">\n          <nile-icon name=\"general\" size=\"20\" color=\"var(--nile-colors-blue-500, var(--ng-componentcolors-utility-brand-600))\"></nile-icon>\n        </div>\n        <div class=\"preview-file-info\">\n          <p>${file.name}</p>\n          <p>${(file.type.split('/')[1]).toUpperCase()} &#8226; ${(Number(file.size) / 1034).toFixed(0)}KB</p>\n        </div>\n      </div>\n      <div>\n        <slot name=\"cancelIcon\">\n          <nile-icon\n            @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}\n            name=\"trash\"\n            size=\"14\"\n            class=\"icon\"\n          ></nile-icon>\n        </slot>\n      </div>\n    </div>\n  `;\n}\n\nexport function getHorizontalErrorState(\n  file: File,\n  errorMessage: string,\n  originalUrl: string\n): TemplateResult {\n  return html`\n    <div class=\"error horizontal-div\">\n      <div class=\"error-container\">\n        <div class=\"error-icon\">\n          <nile-icon name=\"info-icon\" size=\"20\" color=\"var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600))\"></nile-icon>\n        </div>\n        <div class=\"file-info\">\n          <p>${file.name}</p>\n          <nile-tooltip content=${errorMessage}>\n            <p>${errorMessage}</p>\n          </nile-tooltip>\n        </div>\n      </div>\n      <slot name=\"cancelIcon\">\n          <nile-icon\n            @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}\n            name=\"close\"\n            size=\"14\"\n            class=\"icon\"\n          ></nile-icon>\n        </slot>\n    </div>\n  `;\n}\n\n// vertical states\nexport function getVerticalUploadingState(\n  file: File,\n  uploadStatus: number\n): TemplateResult {\n  return html`\n    <div class=\"vertical-div vertical-uploading\">\n      <div class=\"loading\">\n        <nile-loader width=\"24\" height=\"24\"></nile-loader>\n      </div>\n\n      <div class=\"progress-bar-container\">\n        <div class=\"progress-bar-percent\">\n          <p>Uploading...</p>\n          <p>${uploadStatus}%</p>\n        </div>\n        <nile-progress-bar value=${uploadStatus}></nile-progress-bar>\n        <p>${file.name}</p>\n      </div>\n\n      <slot name=\"cancelIcon\">\n        <nile-icon\n          @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e)}\n          name=\"close\"\n          size=\"14\"\n          class=\"icon corner-icon\"\n        ></nile-icon>\n      </slot>\n    </div>\n  `;\n}\n\n\nexport function getVerticalPreviewState(\n  url: string,\n  file: File,\n  originalUrl: string\n): TemplateResult {\n  return html`\n    <div class=\"vertical-div vertical-preview\">\n      <div>\n        <img\n          class=\"image-preview\"\n          src=${url}\n          alt=${file.name}\n        />\n      </div>\n\n      <div class=\"content-container\">\n        <p>${file.name}</p>\n         <p>${(file.type.split('/')[1]).toUpperCase()} &#8226; ${(Number(file.size) / 1024).toFixed(0)}KB</p>\n      </div>\n\n      <slot name=\"cancelIcon\">\n        <nile-icon\n          @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}\n          name=\"trash\"\n          size=\"14\"\n          class=\"icon corner-icon\"\n        ></nile-icon>\n      </slot>\n    </div>\n  `;\n}\n\nexport function getVerticalNoPreviewState(\n  file: File,\n  originalUrl: string\n): TemplateResult {\n  return html`\n    <div class=\"vertical-div vertical-no-preview\">\n      <div class=\"vertical-document-icon\">\n        <nile-icon name=\"general\" size=\"20\" color=\"var(--nile-colors-blue-500, var(--ng-componentcolors-utility-brand-600))\"></nile-icon>\n      </div>\n\n      <div class=\"content-container\">\n        <p>${file.name}</p>\n        <p>${file.type} &#8226; ${(Number(file.size) / 1024).toFixed(0)}KB</p>\n      </div>\n\n      <slot name=\"cancelIcon\">\n        <nile-icon\n          @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}\n          name=\"trash\"\n          size=\"14\"\n          class=\"icon corner-icon\"\n        ></nile-icon>\n      </slot>\n    </div>\n  `;\n}\n\nexport function getVerticalErrorState(\n  file: File,\n  errorMessage: string,\n  originalUrl: string\n): TemplateResult {\n  return html`\n    <div class=\"vertical-div vertical-error\">\n      <div class=\"vertical-document-icon error-bg\">\n        <nile-icon name=\"info-icon\" size=\"20\" color=\"var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600))\"></nile-icon>\n      </div>\n\n      <div class=\"file-info-vertical-state\">\n        <p>${file.name}</p>\n        <nile-tooltip content=${errorMessage}>\n          <p>${errorMessage}</p>\n        </nile-tooltip>\n      </div>\n\n      <slot name=\"cancelIcon\" @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}>\n        <nile-icon\n          name=\"close\"\n          size=\"14\"\n          class=\"icon corner-icon\"\n        ></nile-icon>\n      </slot>\n    </div>\n  `;\n}"]}
+{"version":3,"file":"nile-file-preview.template.js","sourceRoot":"","sources":["../../../src/nile-file-preview/nile-file-preview.template.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Template File for nile-preview component\n */\n\nimport './nile-file-preview.css';\nimport { html, TemplateResult } from 'lit';\nimport { FilePreviewErrorMessages, RemoveFileDetail } from './types';\nimport { removeFile, cancelFileUpload } from './utils';\n\n export function getHorizontalUploadingState(\n  file: File,\n  uploadStatus: number\n ): TemplateResult {\n    return html`\n      <div class=\"uploading\">\n        <nile-loader width=\"24\" height=\"24\"></nile-loader>\n        <div class=\"progress-bar-container\">\n          <div class=\"progress-bar-percent\">\n            <p>Uploading File...</p>\n            <p>${uploadStatus}%</p>\n          </div>\n          <nile-progress-bar\n            value=\"${uploadStatus}\"\n          ></nile-progress-bar>\n          <p>${file.name}</p>\n        </div>\n        <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e)} name=\"cancelIcon\">\n          <nile-icon\n            name=\"var(--nile-icon-close, var(--ng-icon-x-close))\"\n            method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n            size=\"14\"\n            class=\"icon\"\n          ></nile-icon>\n        </slot>\n      </div>\n    `;\n  }\n\nexport function getHorizontalPreviewState(\n  url: string,\n  file: File,\n  originalUrl: string\n): TemplateResult {\n  return html`\n    <div class=\"preview horizontal-div\">\n      <div class=\"preview-inner\">\n        <div class=\"preview-image-container\">\n            <img\n              class=\"image-preview\"\n              src=${url}\n              alt=${file.name}\n            />\n        </div>\n        <div class=\"preview-file-info\">\n          <p>${file.name}</p>\n          <p>${(file.type.split('/')[1]).toUpperCase()} &#8226; ${(Number(file.size) / 1024).toFixed(0)}KB</p>\n        </div>\n      </div>\n      <slot name=\"cancelIcon\">\n        <nile-icon\n          @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}\n          name=\"var(--nile-icon-trash, var(--ng-icon-trash-01))\"\n          method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n          size=\"14\"\n          class=\"icon\"\n        ></nile-icon>\n      </slot>\n    </div>\n  `;\n}\n\nexport function getHorizontalNoPreviewState(\n  file: File,\n  originalUrl: string\n): TemplateResult {\n  return html`\n    <div class=\"no-preview horizontal-div\">\n      <div class=\"no-preview-container\">\n        <div class=\"document-icon\">\n          <nile-icon name=\"var(--nile-icon-general, var(--ng-icon-file-06))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"20\" color=\"var(--nile-colors-blue-500, var(--ng-componentcolors-utility-brand-600))\"></nile-icon>\n        </div>\n        <div class=\"preview-file-info\">\n          <p>${file.name}</p>\n          <p>${(file.type.split('/')[1]).toUpperCase()} &#8226; ${(Number(file.size) / 1034).toFixed(0)}KB</p>\n        </div>\n      </div>\n      <div>\n        <slot name=\"cancelIcon\">\n          <nile-icon\n            @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}\n            name=\"var(--nile-icon-trash, var(--ng-icon-trash-01))\"\n            method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n            size=\"14\"\n            class=\"icon\"\n          ></nile-icon>\n        </slot>\n      </div>\n    </div>\n  `;\n}\n\nexport function getHorizontalErrorState(\n  file: File,\n  errorMessage: string,\n  originalUrl: string\n): TemplateResult {\n  return html`\n    <div class=\"error horizontal-div\">\n      <div class=\"error-container\">\n        <div class=\"error-icon\">\n          <nile-icon name=\"var(--nile-icon-info, var(--ng-icon-info-circle))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"20\" color=\"var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600))\"></nile-icon>\n        </div>\n        <div class=\"file-info\">\n          <p>${file.name}</p>\n          <nile-tooltip content=${errorMessage}>\n            <p>${errorMessage}</p>\n          </nile-tooltip>\n        </div>\n      </div>\n      <slot name=\"cancelIcon\">\n          <nile-icon\n            @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}\n            name=\"var(--nile-icon-close, var(--ng-icon-x-close))\"\n            method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n            size=\"14\"\n            class=\"icon\"\n          ></nile-icon>\n        </slot>\n    </div>\n  `;\n}\n\n// vertical states\nexport function getVerticalUploadingState(\n  file: File,\n  uploadStatus: number\n): TemplateResult {\n  return html`\n    <div class=\"vertical-div vertical-uploading\">\n      <div class=\"loading\">\n        <nile-loader width=\"24\" height=\"24\"></nile-loader>\n      </div>\n\n      <div class=\"progress-bar-container\">\n        <div class=\"progress-bar-percent\">\n          <p>Uploading...</p>\n          <p>${uploadStatus}%</p>\n        </div>\n        <nile-progress-bar value=${uploadStatus}></nile-progress-bar>\n        <p>${file.name}</p>\n      </div>\n\n      <slot name=\"cancelIcon\">\n        <nile-icon\n          @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e)}\n          name=\"var(--nile-icon-close, var(--ng-icon-x-close))\"\n          method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n          size=\"14\"\n          class=\"icon corner-icon\"\n        ></nile-icon>\n      </slot>\n    </div>\n  `;\n}\n\n\nexport function getVerticalPreviewState(\n  url: string,\n  file: File,\n  originalUrl: string\n): TemplateResult {\n  return html`\n    <div class=\"vertical-div vertical-preview\">\n      <div>\n        <img\n          class=\"image-preview\"\n          src=${url}\n          alt=${file.name}\n        />\n      </div>\n\n      <div class=\"content-container\">\n        <p>${file.name}</p>\n         <p>${(file.type.split('/')[1]).toUpperCase()} &#8226; ${(Number(file.size) / 1024).toFixed(0)}KB</p>\n      </div>\n\n      <slot name=\"cancelIcon\">\n        <nile-icon\n          @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}\n          name=\"var(--nile-icon-trash, var(--ng-icon-trash-01))\"\n          method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n          size=\"14\"\n          class=\"icon corner-icon\"\n        ></nile-icon>\n      </slot>\n    </div>\n  `;\n}\n\nexport function getVerticalNoPreviewState(\n  file: File,\n  originalUrl: string\n): TemplateResult {\n  return html`\n    <div class=\"vertical-div vertical-no-preview\">\n      <div class=\"vertical-document-icon\">\n        <nile-icon name=\"var(--nile-icon-general, var(--ng-icon-file-06))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"20\" color=\"var(--nile-colors-blue-500, var(--ng-componentcolors-utility-brand-600))\"></nile-icon>\n      </div>\n\n      <div class=\"content-container\">\n        <p>${file.name}</p>\n        <p>${file.type} &#8226; ${(Number(file.size) / 1024).toFixed(0)}KB</p>\n      </div>\n\n      <slot name=\"cancelIcon\">\n        <nile-icon\n          @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}\n          name=\"var(--nile-icon-trash, var(--ng-icon-trash-01))\"\n          method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n          size=\"14\"\n          class=\"icon corner-icon\"\n        ></nile-icon>\n      </slot>\n    </div>\n  `;\n}\n\nexport function getVerticalErrorState(\n  file: File,\n  errorMessage: string,\n  originalUrl: string\n): TemplateResult {\n  return html`\n    <div class=\"vertical-div vertical-error\">\n      <div class=\"vertical-document-icon error-bg\">\n        <nile-icon name=\"var(--nile-icon-info, var(--ng-icon-info-circle))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"20\" color=\"var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600))\"></nile-icon>\n      </div>\n\n      <div class=\"file-info-vertical-state\">\n        <p>${file.name}</p>\n        <nile-tooltip content=${errorMessage}>\n          <p>${errorMessage}</p>\n        </nile-tooltip>\n      </div>\n\n      <slot name=\"cancelIcon\" @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}>\n        <nile-icon\n          name=\"var(--nile-icon-close, var(--ng-icon-x-close))\"\n          method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n          size=\"14\"\n          class=\"icon corner-icon\"\n        ></nile-icon>\n      </slot>\n    </div>\n  `;\n}"]}

package/dist/src/nile-file-upload/nile-file-upload.template.js

@@ -10,7 +10,7 @@ export const getHorizontalDefaultState = (browseFiles, title, subtitle, errorMes
     <div class=${classMap({ 'hover-border': state === "hover", 'horizontal-div': true })}>
       <div class="inner-div">
         <slot name="uploadIcon">
-          <nile-icon name="upload" size="24"></nile-icon>
+          <nile-icon name="var(--nile-icon-upload, var(--ng-icon-upload-01))" size="24" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"></nile-icon>
         </slot>
         <div class="content">
           <slot name="title">
@@ -34,7 +34,7 @@ export const getHorizontalDefaultState = (browseFiles, title, subtitle, errorMes
     </div>
     ${errorMessage ?
     html `<div class="upload-error">
-        <nile-icon name="warning" size="12" color="red"></nile-icon>
+        <nile-icon name="var(--nile-icon-warning, var(--ng-icon-alert-circle))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="12" color="red"></nile-icon>
         <span>${errorMessage}</span>
       </div>` :
     html ``}
@@ -46,7 +46,7 @@ export const getHorizontalDisabledtState = (browseFiles, title, subtitle) => htm
   >
      <div class="inner-div">
       <slot name="uploadIcon">
-        <nile-icon name="upload" size="24"></nile-icon>
+        <nile-icon name="var(--nile-icon-upload, var(--ng-icon-upload-01))" size="24" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"></nile-icon>
       </slot>
       <div class="content">
         <slot name="title">
@@ -74,13 +74,15 @@ export const getHorizontalDragState = () => html `
     <div class="icons-container">
       <nile-icon
         color="var(--nile-colors-blue-500)"
-        name="general"
+        name="var(--nile-icon-general, var(--ng-icon-file-06))"
+        method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
         size="20"
         class="general-icon"
       ></nile-icon>
       <nile-icon
         color="var(--nile-colors-blue-500)"
-        name="image"
+        name="var(--nile-icon-image, var(--ng-icon-image-03))"
+        method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
         size="24"
         class="image-icon"
       ></nile-icon>
@@ -93,7 +95,7 @@ export const getVerticalDefaultState = (browseFiles, title, subtitle, errorMessa
   <div>
     <div class=${classMap({ 'hover-border': state === "hover", 'vertical-div': true })}>
       <slot name="uploadIcon">
-        <nile-icon name="upload" size="24"></nile-icon>
+        <nile-icon name="var(--nile-icon-upload, var(--ng-icon-upload-01))" size="24" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"></nile-icon>
       </slot>
       <div class="content-container">
         <slot name="title">
@@ -116,7 +118,7 @@ export const getVerticalDefaultState = (browseFiles, title, subtitle, errorMessa
     </div>
     ${errorMessage ?
     html `<div class="upload-error">
-        <nile-icon name="warning" size="12" color="red"></nile-icon>
+        <nile-icon name="var(--nile-icon-warning, var(--ng-icon-alert-circle))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="12" color="red"></nile-icon>
         <span>${errorMessage}</span>
       </div>` :
     html ``}
@@ -127,7 +129,7 @@ export const getVerticalDisabledState = (browseFiles, title, subtitle) => html `
     class="vertical-deafult vertical-div disable"
   >
     <slot name="uploadIcon">
-      <nile-icon name="upload" size="24"></nile-icon>
+      <nile-icon name="var(--nile-icon-upload, var(--ng-icon-upload-01))" size="24" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"></nile-icon>
     </slot>
     <div class="content-container">
       <slot name="title">
@@ -154,13 +156,15 @@ export const getVerticalDragState = () => html `
     <div class="icons-container">
       <nile-icon
         color="var(--nile-colors-blue-500)"
-        name="general"
+        name="var(--nile-icon-general, var(--ng-icon-file-06))"
+        method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
         size="20"
         class="general-icon"
       ></nile-icon>
       <nile-icon
         color="var(--nile-colors-blue-500)"
-        name="image"
+        name="var(--nile-icon-image, var(--ng-icon-image-03))"
+        method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
         size="24"
         class="image-icon"
       ></nile-icon>

package/dist/src/nile-file-upload/nile-file-upload.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-file-upload.template.js","sourceRoot":"","sources":["../../../src/nile-file-upload/nile-file-upload.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,wBAAwB,CAAC;AAEhC,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAG5D,IAAI,mBAAgC,CAAC;AACrC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,WAAwB,EAAQ,EAAE;IAC/D,mBAAmB,GAAG,WAAW,CAAC;AACpC,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,yBAAyB,GAAG,CACvC,WAAqB,EACrB,KAAa,EACb,QAAgB,EAChB,YAAoB,EACpB,KAAsB,EACN,EAAE,CAAC,IAAI,CAAA;;iBAER,QAAQ,CAAC,EAAE,cAAc,EAAE,KAAK,KAAK,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAAC;;;;;;;kBAOtE,KAAK;;;iBAGN,QAAQ;;;;;;kBAMP,CAAC,CAAoB,EAAE,EAAE,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC,CAAC;;;qBAGzD,WAAW;;;;;;MAM1B,YAAY,CAAC,CAAC;IACd,IAAI,CAAA;;gBAEM,YAAY;aACf,CAAC,CAAC;IACT,IAAI,CAAA,EACN;;CAEH,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,CACzC,WAAqB,EACrB,KAAa,EACb,QAAgB,EACA,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;gBAUT,KAAK;;;eAGN,QAAQ;;;;;;gBAMP,CAAC,CAAoB,EAAE,EAAE,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC,CAAC;;;mBAGzD,WAAW;;;;;;CAM7B,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAmB,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;CAkB/D,CAAC;AAEF,mBAAmB;AACnB,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACrC,WAAqB,EACrB,KAAa,EACb,QAAgB,EAChB,YAAoB,EACpB,KAAsB,EACN,EAAE,CAAC,IAAI,CAAA;;iBAER,QAAQ,CAAC,EAAE,cAAc,EAAE,KAAK,KAAK,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC;;;;;;gBAMtE,KAAK;;;eAGN,QAAQ;;;;;kBAKL,CAAC,CAAoB,EAAE,EAAE,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC,CAAC;;;qBAGzD,WAAW;;;;;;MAM1B,YAAY,CAAC,CAAC;IACd,IAAI,CAAA;;gBAEM,YAAY;aACf,CAAC,CAAC;IACT,IAAI,CAAA,EACN;;CAEH,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,CACtC,WAAqB,EACrB,KAAa,EACb,QAAgB,EACA,EAAE,CAAC,IAAI,CAAA;;;;;;;;;cASX,KAAK;;;aAGN,QAAQ;;;;;gBAKL,CAAC,CAAoB,EAAE,EAAE,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC,CAAC;;;mBAGzD,WAAW;;;;;;CAM7B,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAmB,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;CAkB7D,CAAC","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport './nile-file-upload.css';\nimport { DragHandler } from './utils/drag-drop.util';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport { FileUploadState } from './types/file-upload.enums';\n\nlet dragHandlerInstance: DragHandler;\nexport const getDragHandler = (dragHandler: DragHandler): void => {\n  dragHandlerInstance = dragHandler;\n}\n\nexport const getHorizontalDefaultState = (\n  browseFiles: Function,\n  title: string,\n  subtitle: string,\n  errorMessage: string,\n  state: FileUploadState\n): TemplateResult => html`\n  <div>\n    <div class=${classMap({ 'hover-border': state === \"hover\", 'horizontal-div': true })}>\n      <div class=\"inner-div\">\n        <slot name=\"uploadIcon\">\n          <nile-icon name=\"upload\" size=\"24\"></nile-icon>\n        </slot>\n        <div class=\"content\">\n          <slot name=\"title\">\n            <h4>${title}</h4>\n          </slot>\n          <slot name=\"subtitle\">\n            <p>${subtitle}</p>\n          </slot>\n        </div>\n      </div>\n      <input\n        type=\"file\"\n        @change=${(e: Event | DragEvent) => dragHandlerInstance.handleFiles(e)}\n        multiple\n      />\n      <slot @click=${browseFiles} name=\"browseFileButton\">\n        <nile-button variant=\"tertiary\">\n          Browse File\n        </nile-button>\n      </slot>\n    </div>\n    ${errorMessage ?\n      html`<div class=\"upload-error\">\n        <nile-icon name=\"warning\" size=\"12\" color=\"red\"></nile-icon>\n        <span>${errorMessage}</span>\n      </div>` :\n      html``\n    }\n  </div>\n`;\n\nexport const getHorizontalDisabledtState = (\n  browseFiles: Function,\n  title: string,\n  subtitle: string\n): TemplateResult => html`\n  <div\n    class=\"horizontal-div disable\"\n  >\n     <div class=\"inner-div\">\n      <slot name=\"uploadIcon\">\n        <nile-icon name=\"upload\" size=\"24\"></nile-icon>\n      </slot>\n      <div class=\"content\">\n        <slot name=\"title\">\n          <h4>${title}</h4>\n        </slot>\n        <slot name=\"subtitle\">\n          <p>${subtitle}</p>\n        </slot>\n      </div>\n    </div>\n    <input\n      type=\"file\"\n      @change=${(e: Event | DragEvent) => dragHandlerInstance.handleFiles(e)}\n      multiple\n    />\n    <slot @click=${browseFiles} name=\"browseFileButton\">\n      <nile-button variant=\"tertiary\">\n        Browse File\n      </nile-button>\n    </slot>\n  </div>\n`;\n\nexport const getHorizontalDragState = (): TemplateResult => html`\n  <div class=\"horizontal-div dragging\">\n    <div class=\"icons-container\">\n      <nile-icon\n        color=\"var(--nile-colors-blue-500)\"\n        name=\"general\"\n        size=\"20\"\n        class=\"general-icon\"\n      ></nile-icon>\n      <nile-icon\n        color=\"var(--nile-colors-blue-500)\"\n        name=\"image\"\n        size=\"24\"\n        class=\"image-icon\"\n      ></nile-icon>\n    </div>\n    <p>Drop files here to upload</p>\n  </div>\n`;\n\n//  Vertical States\nexport const getVerticalDefaultState = (\n  browseFiles: Function,\n  title: string,\n  subtitle: string,\n  errorMessage: string,\n  state: FileUploadState\n): TemplateResult => html`\n  <div>\n    <div class=${classMap({ 'hover-border': state === \"hover\", 'vertical-div': true })}>\n      <slot name=\"uploadIcon\">\n        <nile-icon name=\"upload\" size=\"24\"></nile-icon>\n      </slot>\n      <div class=\"content-container\">\n        <slot name=\"title\">\n          <h4>${title}</h4>\n        </slot>\n        <slot name=\"subtitle\">\n          <p>${subtitle}</p>\n        </slot>\n      </div>\n      <input\n        type=\"file\"\n        @change=${(e: Event | DragEvent) => dragHandlerInstance.handleFiles(e)}\n        multiple\n      />\n      <slot @click=${browseFiles} name=\"browseFileButton\">\n        <nile-button variant=\"tertiary\">\n          Browse File\n        </nile-button>\n      </slot>\n    </div>\n    ${errorMessage ?\n      html`<div class=\"upload-error\">\n        <nile-icon name=\"warning\" size=\"12\" color=\"red\"></nile-icon>\n        <span>${errorMessage}</span>\n      </div>` :\n      html``\n    }\n  </div>\n`;\n\nexport const getVerticalDisabledState = (\n  browseFiles: Function,\n  title: string,\n  subtitle: string\n): TemplateResult => html`\n  <div\n    class=\"vertical-deafult vertical-div disable\"\n  >\n    <slot name=\"uploadIcon\">\n      <nile-icon name=\"upload\" size=\"24\"></nile-icon>\n    </slot>\n    <div class=\"content-container\">\n      <slot name=\"title\">\n        <h4>${title}</h4>\n      </slot>\n      <slot name=\"title\">\n        <p>${subtitle}</p>\n      </slot>\n    </div>\n    <input\n      type=\"file\"\n      @change=${(e: Event | DragEvent) => dragHandlerInstance.handleFiles(e)}\n      multiple\n    />\n    <slot @click=${browseFiles} name=\"browseFileButton\">\n      <nile-button variant=\"tertiary\">\n        Browse File\n      </nile-button>\n    </slot>\n  </div>\n`;\n\nexport const getVerticalDragState = (): TemplateResult => html`\n  <div class=\"vertical-div vertical-drag\">\n    <div class=\"icons-container\">\n      <nile-icon\n        color=\"var(--nile-colors-blue-500)\"\n        name=\"general\"\n        size=\"20\"\n        class=\"general-icon\"\n      ></nile-icon>\n      <nile-icon\n        color=\"var(--nile-colors-blue-500)\"\n        name=\"image\"\n        size=\"24\"\n        class=\"image-icon\"\n      ></nile-icon>\n    </div>\n    <p>Drop files here to upload</p>\n  </div>\n`;"]}
+{"version":3,"file":"nile-file-upload.template.js","sourceRoot":"","sources":["../../../src/nile-file-upload/nile-file-upload.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,wBAAwB,CAAC;AAEhC,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAG5D,IAAI,mBAAgC,CAAC;AACrC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,WAAwB,EAAQ,EAAE;IAC/D,mBAAmB,GAAG,WAAW,CAAC;AACpC,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,yBAAyB,GAAG,CACvC,WAAqB,EACrB,KAAa,EACb,QAAgB,EAChB,YAAoB,EACpB,KAAsB,EACN,EAAE,CAAC,IAAI,CAAA;;iBAER,QAAQ,CAAC,EAAE,cAAc,EAAE,KAAK,KAAK,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAAC;;;;;;;kBAOtE,KAAK;;;iBAGN,QAAQ;;;;;;kBAMP,CAAC,CAAoB,EAAE,EAAE,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC,CAAC;;;qBAGzD,WAAW;;;;;;MAM1B,YAAY,CAAC,CAAC;IACd,IAAI,CAAA;;gBAEM,YAAY;aACf,CAAC,CAAC;IACT,IAAI,CAAA,EACN;;CAEH,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,CACzC,WAAqB,EACrB,KAAa,EACb,QAAgB,EACA,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;gBAUT,KAAK;;;eAGN,QAAQ;;;;;;gBAMP,CAAC,CAAoB,EAAE,EAAE,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC,CAAC;;;mBAGzD,WAAW;;;;;;CAM7B,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAmB,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;CAoB/D,CAAC;AAEF,mBAAmB;AACnB,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACrC,WAAqB,EACrB,KAAa,EACb,QAAgB,EAChB,YAAoB,EACpB,KAAsB,EACN,EAAE,CAAC,IAAI,CAAA;;iBAER,QAAQ,CAAC,EAAE,cAAc,EAAE,KAAK,KAAK,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC;;;;;;gBAMtE,KAAK;;;eAGN,QAAQ;;;;;kBAKL,CAAC,CAAoB,EAAE,EAAE,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC,CAAC;;;qBAGzD,WAAW;;;;;;MAM1B,YAAY,CAAC,CAAC;IACd,IAAI,CAAA;;gBAEM,YAAY;aACf,CAAC,CAAC;IACT,IAAI,CAAA,EACN;;CAEH,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,CACtC,WAAqB,EACrB,KAAa,EACb,QAAgB,EACA,EAAE,CAAC,IAAI,CAAA;;;;;;;;;cASX,KAAK;;;aAGN,QAAQ;;;;;gBAKL,CAAC,CAAoB,EAAE,EAAE,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC,CAAC;;;mBAGzD,WAAW;;;;;;CAM7B,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAmB,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;CAoB7D,CAAC","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport './nile-file-upload.css';\nimport { DragHandler } from './utils/drag-drop.util';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport { FileUploadState } from './types/file-upload.enums';\n\nlet dragHandlerInstance: DragHandler;\nexport const getDragHandler = (dragHandler: DragHandler): void => {\n  dragHandlerInstance = dragHandler;\n}\n\nexport const getHorizontalDefaultState = (\n  browseFiles: Function,\n  title: string,\n  subtitle: string,\n  errorMessage: string,\n  state: FileUploadState\n): TemplateResult => html`\n  <div>\n    <div class=${classMap({ 'hover-border': state === \"hover\", 'horizontal-div': true })}>\n      <div class=\"inner-div\">\n        <slot name=\"uploadIcon\">\n          <nile-icon name=\"var(--nile-icon-upload, var(--ng-icon-upload-01))\" size=\"24\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"></nile-icon>\n        </slot>\n        <div class=\"content\">\n          <slot name=\"title\">\n            <h4>${title}</h4>\n          </slot>\n          <slot name=\"subtitle\">\n            <p>${subtitle}</p>\n          </slot>\n        </div>\n      </div>\n      <input\n        type=\"file\"\n        @change=${(e: Event | DragEvent) => dragHandlerInstance.handleFiles(e)}\n        multiple\n      />\n      <slot @click=${browseFiles} name=\"browseFileButton\">\n        <nile-button variant=\"tertiary\">\n          Browse File\n        </nile-button>\n      </slot>\n    </div>\n    ${errorMessage ?\n      html`<div class=\"upload-error\">\n        <nile-icon name=\"var(--nile-icon-warning, var(--ng-icon-alert-circle))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"12\" color=\"red\"></nile-icon>\n        <span>${errorMessage}</span>\n      </div>` :\n      html``\n    }\n  </div>\n`;\n\nexport const getHorizontalDisabledtState = (\n  browseFiles: Function,\n  title: string,\n  subtitle: string\n): TemplateResult => html`\n  <div\n    class=\"horizontal-div disable\"\n  >\n     <div class=\"inner-div\">\n      <slot name=\"uploadIcon\">\n        <nile-icon name=\"var(--nile-icon-upload, var(--ng-icon-upload-01))\" size=\"24\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"></nile-icon>\n      </slot>\n      <div class=\"content\">\n        <slot name=\"title\">\n          <h4>${title}</h4>\n        </slot>\n        <slot name=\"subtitle\">\n          <p>${subtitle}</p>\n        </slot>\n      </div>\n    </div>\n    <input\n      type=\"file\"\n      @change=${(e: Event | DragEvent) => dragHandlerInstance.handleFiles(e)}\n      multiple\n    />\n    <slot @click=${browseFiles} name=\"browseFileButton\">\n      <nile-button variant=\"tertiary\">\n        Browse File\n      </nile-button>\n    </slot>\n  </div>\n`;\n\nexport const getHorizontalDragState = (): TemplateResult => html`\n  <div class=\"horizontal-div dragging\">\n    <div class=\"icons-container\">\n      <nile-icon\n        color=\"var(--nile-colors-blue-500)\"\n        name=\"var(--nile-icon-general, var(--ng-icon-file-06))\"\n        method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n        size=\"20\"\n        class=\"general-icon\"\n      ></nile-icon>\n      <nile-icon\n        color=\"var(--nile-colors-blue-500)\"\n        name=\"var(--nile-icon-image, var(--ng-icon-image-03))\"\n        method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n        size=\"24\"\n        class=\"image-icon\"\n      ></nile-icon>\n    </div>\n    <p>Drop files here to upload</p>\n  </div>\n`;\n\n//  Vertical States\nexport const getVerticalDefaultState = (\n  browseFiles: Function,\n  title: string,\n  subtitle: string,\n  errorMessage: string,\n  state: FileUploadState\n): TemplateResult => html`\n  <div>\n    <div class=${classMap({ 'hover-border': state === \"hover\", 'vertical-div': true })}>\n      <slot name=\"uploadIcon\">\n        <nile-icon name=\"var(--nile-icon-upload, var(--ng-icon-upload-01))\" size=\"24\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"></nile-icon>\n      </slot>\n      <div class=\"content-container\">\n        <slot name=\"title\">\n          <h4>${title}</h4>\n        </slot>\n        <slot name=\"subtitle\">\n          <p>${subtitle}</p>\n        </slot>\n      </div>\n      <input\n        type=\"file\"\n        @change=${(e: Event | DragEvent) => dragHandlerInstance.handleFiles(e)}\n        multiple\n      />\n      <slot @click=${browseFiles} name=\"browseFileButton\">\n        <nile-button variant=\"tertiary\">\n          Browse File\n        </nile-button>\n      </slot>\n    </div>\n    ${errorMessage ?\n      html`<div class=\"upload-error\">\n        <nile-icon name=\"var(--nile-icon-warning, var(--ng-icon-alert-circle))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"12\" color=\"red\"></nile-icon>\n        <span>${errorMessage}</span>\n      </div>` :\n      html``\n    }\n  </div>\n`;\n\nexport const getVerticalDisabledState = (\n  browseFiles: Function,\n  title: string,\n  subtitle: string\n): TemplateResult => html`\n  <div\n    class=\"vertical-deafult vertical-div disable\"\n  >\n    <slot name=\"uploadIcon\">\n      <nile-icon name=\"var(--nile-icon-upload, var(--ng-icon-upload-01))\" size=\"24\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"></nile-icon>\n    </slot>\n    <div class=\"content-container\">\n      <slot name=\"title\">\n        <h4>${title}</h4>\n      </slot>\n      <slot name=\"title\">\n        <p>${subtitle}</p>\n      </slot>\n    </div>\n    <input\n      type=\"file\"\n      @change=${(e: Event | DragEvent) => dragHandlerInstance.handleFiles(e)}\n      multiple\n    />\n    <slot @click=${browseFiles} name=\"browseFileButton\">\n      <nile-button variant=\"tertiary\">\n        Browse File\n      </nile-button>\n    </slot>\n  </div>\n`;\n\nexport const getVerticalDragState = (): TemplateResult => html`\n  <div class=\"vertical-div vertical-drag\">\n    <div class=\"icons-container\">\n      <nile-icon\n        color=\"var(--nile-colors-blue-500)\"\n        name=\"var(--nile-icon-general, var(--ng-icon-file-06))\"\n        method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n        size=\"20\"\n        class=\"general-icon\"\n      ></nile-icon>\n      <nile-icon\n        color=\"var(--nile-colors-blue-500)\"\n        name=\"var(--nile-icon-image, var(--ng-icon-image-03))\"\n        method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n        size=\"24\"\n        class=\"image-icon\"\n      ></nile-icon>\n    </div>\n    <p>Drop files here to upload</p>\n  </div>\n`;"]}

package/dist/src/nile-filter-chip/nile-filter-chip.js

@@ -87,7 +87,7 @@ let NileFilterChip = NileFilterChip_1 = class NileFilterChip extends NileElement
       ${this.closable
             ? html `
             <span class="close-icon" @click="${this.handleClose}">
-              <nile-icon name="${this.removeIcon || 'close'}" size="12"></nile-icon>
+              <nile-icon name="${this.removeIcon || 'var(--nile-icon-close, var(--ng-icon-x-close))'}" size="12" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"></nile-icon>
             </span>
           `
             : html ``}

package/dist/src/nile-filter-chip/nile-filter-chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-filter-chip.js","sourceRoot":"","sources":["../../../src/nile-filter-chip/nile-filter-chip.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport NileElement from '../internal/nile-element';\nimport { styles } from './nile-filter-chip.css';\n\n/**\n * Nile filter-chip component.\n *\n * @tag nile-filter-chip\n */\n@customElement('nile-filter-chip')\nexport class NileFilterChip extends NileElement {\n  @property({ type: String }) label = '';\n  @property({ type: String }) value = '';\n  @property({ type: Number }) viewMoreCount: number = 0;\n  @property({ type: Boolean }) editable = false;\n  @property({ type: Boolean }) closable = false;\n  @property({ type: String }) icon = '';\n  @property({ type: String }) removeIcon = '';\n  @property({ type: Boolean, reflect: true }) active = false;\n\n\n  private static activeChips: NileFilterChip[] = [];\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.registerChip();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.unregisterChip();\n  }\n\n  private registerChip() {\n    NileFilterChip.activeChips.push(this);\n  }\n\n  private unregisterChip() {\n    NileFilterChip.activeChips = NileFilterChip.activeChips.filter(\n      (chip) => chip !== this\n    );\n  }\n\n  private handleClose(event: Event) {\n    event.stopPropagation();\n    this.dispatchEvent(\n      new CustomEvent('nile-close', { detail: { value: this.value, viewMoreCount: this.viewMoreCount } })\n    );\n    this.remove();\n  }\n\n  private handleClick() {\n    this.dispatchEvent(\n      new CustomEvent('nile-click', { detail: { value: this.value, viewMoreCount: this.viewMoreCount } })\n    );\n  }\n\n  private getLabelSlot(): TemplateResult {\n    return html`\n    <span class=\"label-wrapper\">\n      <slot name=\"label\">\n        <span class=\"label\" part=\"label\">${this.label}:</span>\n      </slot>\n    </span>\n\n    `;\n  }\n\n  private getValueSlot(): TemplateResult {\n    return html`\n    <span class=\"value-wrapper\">\n      <slot name=\"value\">\n        <span class=\"value\" part=\"value\">${this.value}</span>\n      </slot>\n    </span>\n\n    `;\n  }\n\n  private getviewMoreCountSlot(): TemplateResult {\n    return html`\n      <slot name=\"suffix\">\n        ${this.viewMoreCount\n          ? html`\n          <span class=\"badge-wrapper\">\n              <nile-badge variant=\"primary\" pilltype=\"pill-color\">\n                +${this.viewMoreCount}\n              </nile-badge>\n          </span>\n\n            `\n          : html``}\n      </slot>\n    `;\n  }\n\n  private getCloseIconSlot(): TemplateResult {\n    return html`\n      ${this.closable\n        ? html`\n            <span class=\"close-icon\" @click=\"${this.handleClose}\">\n              <nile-icon name=\"${this.removeIcon || 'close'}\" size=\"12\"></nile-icon>\n            </span>\n          `\n        : html``}\n    `;\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"chip\" @click=\"${this.handleClick}\">\n        <slot name=\"icon\">\n          ${this.icon ? html`<span class=\"icon\">${this.icon}</span>` : html``}\n        </slot>\n        ${this.getLabelSlot()}\n        <slot name=\"content\"></slot>\n        ${this.getValueSlot()}\n        ${this.getviewMoreCountSlot()}\n        ${this.getCloseIconSlot()}\n      </div>\n    `;\n  }\n}\n\nexport default NileFilterChip;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-filter-chip': NileFilterChip;\n  }\n}\n"]}
+{"version":3,"file":"nile-filter-chip.js","sourceRoot":"","sources":["../../../src/nile-filter-chip/nile-filter-chip.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport NileElement from '../internal/nile-element';\nimport { styles } from './nile-filter-chip.css';\n\n/**\n * Nile filter-chip component.\n *\n * @tag nile-filter-chip\n */\n@customElement('nile-filter-chip')\nexport class NileFilterChip extends NileElement {\n  @property({ type: String }) label = '';\n  @property({ type: String }) value = '';\n  @property({ type: Number }) viewMoreCount: number = 0;\n  @property({ type: Boolean }) editable = false;\n  @property({ type: Boolean }) closable = false;\n  @property({ type: String }) icon = '';\n  @property({ type: String }) removeIcon = '';\n  @property({ type: Boolean, reflect: true }) active = false;\n\n\n  private static activeChips: NileFilterChip[] = [];\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.registerChip();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.unregisterChip();\n  }\n\n  private registerChip() {\n    NileFilterChip.activeChips.push(this);\n  }\n\n  private unregisterChip() {\n    NileFilterChip.activeChips = NileFilterChip.activeChips.filter(\n      (chip) => chip !== this\n    );\n  }\n\n  private handleClose(event: Event) {\n    event.stopPropagation();\n    this.dispatchEvent(\n      new CustomEvent('nile-close', { detail: { value: this.value, viewMoreCount: this.viewMoreCount } })\n    );\n    this.remove();\n  }\n\n  private handleClick() {\n    this.dispatchEvent(\n      new CustomEvent('nile-click', { detail: { value: this.value, viewMoreCount: this.viewMoreCount } })\n    );\n  }\n\n  private getLabelSlot(): TemplateResult {\n    return html`\n    <span class=\"label-wrapper\">\n      <slot name=\"label\">\n        <span class=\"label\" part=\"label\">${this.label}:</span>\n      </slot>\n    </span>\n\n    `;\n  }\n\n  private getValueSlot(): TemplateResult {\n    return html`\n    <span class=\"value-wrapper\">\n      <slot name=\"value\">\n        <span class=\"value\" part=\"value\">${this.value}</span>\n      </slot>\n    </span>\n\n    `;\n  }\n\n  private getviewMoreCountSlot(): TemplateResult {\n    return html`\n      <slot name=\"suffix\">\n        ${this.viewMoreCount\n          ? html`\n          <span class=\"badge-wrapper\">\n              <nile-badge variant=\"primary\" pilltype=\"pill-color\">\n                +${this.viewMoreCount}\n              </nile-badge>\n          </span>\n\n            `\n          : html``}\n      </slot>\n    `;\n  }\n\n  private getCloseIconSlot(): TemplateResult {\n    return html`\n      ${this.closable\n        ? html`\n            <span class=\"close-icon\" @click=\"${this.handleClose}\">\n              <nile-icon name=\"${this.removeIcon || 'var(--nile-icon-close, var(--ng-icon-x-close))'}\" size=\"12\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"></nile-icon>\n            </span>\n          `\n        : html``}\n    `;\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"chip\" @click=\"${this.handleClick}\">\n        <slot name=\"icon\">\n          ${this.icon ? html`<span class=\"icon\">${this.icon}</span>` : html``}\n        </slot>\n        ${this.getLabelSlot()}\n        <slot name=\"content\"></slot>\n        ${this.getValueSlot()}\n        ${this.getviewMoreCountSlot()}\n        ${this.getCloseIconSlot()}\n      </div>\n    `;\n  }\n}\n\nexport default NileFilterChip;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-filter-chip': NileFilterChip;\n  }\n}\n"]}

package/dist/src/nile-form-error-message/nile-form-error-message.js

@@ -31,7 +31,7 @@ let NileFormErrorMessage = class NileFormErrorMessage extends LitElement {
     render() {
         return html `
       <div class="nile-form-error-message">
-       <nile-icon name="info2" size="14" class="nile-form-error-message__icon" color="var(--nile-colors-red-700, var(--ng-colors-fg-error-secondary))"> </nile-icon> <slot> </slot>
+       <nile-icon name="var(--nile-icon-info, var(--ng-icon-info-circle))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="14" class="nile-form-error-message__icon" color="var(--nile-colors-red-700, var(--ng-colors-fg-error-secondary))"> </nile-icon> <slot> </slot>
         </div>
 			`;
     }

package/dist/src/nile-form-error-message/nile-form-error-message.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-form-error-message.js","sourceRoot":"","sources":["../../../src/nile-form-error-message/nile-form-error-message.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAC,UAAU,EAAE,IAAI,EAAiC,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAY,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAC,MAAM,EAAC,MAAM,+BAA+B,CAAC;AAErD;;;;;GAKG;AAEI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAEnD;;;OAGG;IACI,MAAM,KAAK,MAAM;QACvB,OAAO,CAAC,MAAM,CAAC,CAAC;IACjB,CAAC;IAED,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACZ,OAAO,IAAI,CAAA;;;;IAIT,CAAC;IACJ,CAAC;CAGD,CAAA;AA3BY,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CA2BhC;;AAED,eAAe,oBAAoB,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 {LitElement, html, CSSResultArray, TemplateResult} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport {styles} from './nile-form-error-message.css';\n\n/**\n * Nile icon component.\n *\n * @tag nile-form-error-message\n *\n */\n@customElement('nile-form-error-message')\nexport class NileFormErrorMessage extends LitElement {\n\n\t/**\n\t * The styles for FormErrorMessage\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\treturn html`\n      <div class=\"nile-form-error-message\">\n       <nile-icon name=\"info2\" size=\"14\" class=\"nile-form-error-message__icon\" color=\"var(--nile-colors-red-700, var(--ng-colors-fg-error-secondary))\"> </nile-icon> <slot> </slot>\n        </div>\n\t\t\t`;\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileFormErrorMessage;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-form-error-message': NileFormErrorMessage;\n  }\n}\n"]}
+{"version":3,"file":"nile-form-error-message.js","sourceRoot":"","sources":["../../../src/nile-form-error-message/nile-form-error-message.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAC,UAAU,EAAE,IAAI,EAAiC,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAY,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAC,MAAM,EAAC,MAAM,+BAA+B,CAAC;AAErD;;;;;GAKG;AAEI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAEnD;;;OAGG;IACI,MAAM,KAAK,MAAM;QACvB,OAAO,CAAC,MAAM,CAAC,CAAC;IACjB,CAAC;IAED,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACZ,OAAO,IAAI,CAAA;;;;IAIT,CAAC;IACJ,CAAC;CAGD,CAAA;AA3BY,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CA2BhC;;AAED,eAAe,oBAAoB,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 {LitElement, html, CSSResultArray, TemplateResult} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport {styles} from './nile-form-error-message.css';\n\n/**\n * Nile icon component.\n *\n * @tag nile-form-error-message\n *\n */\n@customElement('nile-form-error-message')\nexport class NileFormErrorMessage extends LitElement {\n\n\t/**\n\t * The styles for FormErrorMessage\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\treturn html`\n      <div class=\"nile-form-error-message\">\n       <nile-icon name=\"var(--nile-icon-info, var(--ng-icon-info-circle))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"14\" class=\"nile-form-error-message__icon\" color=\"var(--nile-colors-red-700, var(--ng-colors-fg-error-secondary))\"> </nile-icon> <slot> </slot>\n        </div>\n\t\t\t`;\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileFormErrorMessage;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-form-error-message': NileFormErrorMessage;\n  }\n}\n"]}

package/dist/src/nile-form-help-text/nile-form-help-text.js

@@ -41,7 +41,7 @@ let NileFormHelpText = class NileFormHelpText extends LitElement {
      * @slot This is a slot test
      */
     render() {
-        const iconName = this.isExpanded ? 'arrowup' : 'arrowdown';
+        const iconName = this.isExpanded ? 'var(--nile-icon-arrow-up, var(--ng-icon-chevron-up))' : 'var(--nile-icon-arrow-down, var(--ng-icon-chevron-down))';
         return html `
     <div 
       class="${classMap({
@@ -64,7 +64,7 @@ let NileFormHelpText = class NileFormHelpText extends LitElement {
           part="toggle-button"
           @click=${this.toggleExpanded}
         >${this.isExpanded ? 'View Less' : 'View More'}
-          <nile-icon color="#005EA6" part="icon" size="14" name="${iconName}"></nile-icon>
+          <nile-icon color="#005EA6" part="icon" size="14" name="${iconName}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"></nile-icon>
         </span>
       ` : nothing}
     </div>

package/dist/src/nile-form-help-text/nile-form-help-text.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-form-help-text.js","sourceRoot":"","sources":["../../../src/nile-form-help-text/nile-form-help-text.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAC,UAAU,EAAE,IAAI,EAAkC,OAAO,EAAiB,MAAM,KAAK,CAAC;AAC9F,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD;;;;;GAKG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QASwC,eAAU,GAAY,KAAK,CAAC;QAEhE,eAAU,GAAY,KAAK,CAAC;IAgFvC,CAAC;IA1FC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAUD,gBAAgB;IAEhB,qBAAqB;IAEX,YAAY,CAAC,kBAAkC;QACvD,IAAI,CAAC,cAAc,GAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAClE,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;IACnC,CAAC;IAED;;;OAGG;IACI,MAAM;QACX,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC;QAE3D,OAAO,IAAI,CAAA;;eAEA,QAAQ,CAAC;YAChB,qBAAqB,EAAC,IAAI;YAC1B,+BAA+B,EAAC,IAAI,CAAC,UAAU;SAC9C,CAAC;;;;iBAIO,QAAQ,CAAC;YAChB,kBAAkB,EAAC,IAAI;YACvB,4BAA4B,EAAC,IAAI,CAAC,UAAU;SAC3C,CAAC;;6BAEiB,IAAI,CAAC,wBAAwB;;QAElD,IAAI,CAAC,UAAU,CAAA,CAAC,CAAA,IAAI,CAAA;;;;mBAIT,IAAI,CAAC,cAAc;WAC3B,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;mEACa,QAAQ;;OAEpE,CAAA,CAAC,CAAA,OAAO;;GAEZ,CAAC;IACF,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;IACrC,CAAC;IAED,wBAAwB;QACtB,IAAG,CAAC,IAAI,CAAC,aAAa;YAAE,OAAO;QAC/B,IAAI,CAAC,UAAU,GAAC,IAAI,CAAC,aAAa,CAAC,WAAW,GAAC,IAAI,CAAC,aAAa,CAAC,WAAW,CAAA;IAC/E,CAAC;IAED;;;OAGG;IACH,kBAAkB,CAAC,OAAmB;QAEpC,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE;YAClD,KAAK,IAAI,KAAK,IAAI,OAAO,EAAE,CAAC;gBAC1B,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC;gBACzC,IAAI,QAAQ;oBAAE,IAAI,CAAC,wBAAwB,EAAE,CAAC;YAChD,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAEhC,OAAO,cAAc,CAAC,CAAC,mDAAmD;IAC5E,CAAC;CACF,CAAA;AAlF8C;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAG,CAAC;oDAA6B;AAEhE;IAAR,KAAK,EAAE;oDAA6B;AAET;IAA3B,KAAK,CAAC,mBAAmB,CAAC;uDAA+B;AAb/C,gBAAgB;IAD5B,aAAa,CAAC,qBAAqB,CAAC;GACxB,gBAAgB,CA2F5B;;AAED,eAAe,gBAAgB,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 {LitElement, html, CSSResultArray, TemplateResult, nothing, PropertyValues} from 'lit';\nimport { customElement, query, property, state } from 'lit/decorators.js';\nimport {styles} from './nile-form-help-text.css';\nimport { classMap } from 'lit/directives/class-map.js';\n\n/**\n * Nile icon component.\n *\n * @tag nile-form-help-text\n *\n */\n@customElement('nile-form-help-text')\nexport class NileFormHelpText extends LitElement {\n  /**\n   * The styles for FormHelpText\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  @property({ type: Boolean, reflect: true  }) isExpanded: boolean = false;\n\n  @state() showButton: boolean = false;\n\n  @query('.help__text__full') textContainer:HTMLSpanElement;\n\n  private resizeObserver:ResizeObserver;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  protected firstUpdated(_changedProperties: PropertyValues): void {\n    this.resizeObserver=this.observeWidthChange(this.textContainer);\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver.disconnect();\n  }\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  public render(): TemplateResult {\n    const iconName = this.isExpanded ? 'arrowup' : 'arrowdown';\n\n    return html`\n    <div \n      class=\"${classMap({\n        'nile-form-help-text':true,\n        \"nile-form-help-text--expanded\":this.isExpanded\n        })}\" \n      part=\"container\"\n    >\n      <span\n        class=\"${classMap({\n          \"help__text__full\":true,\n          \"help__text__full--expanded\":this.isExpanded\n          })}\"\n        >\n        <slot @slotchange=\"${this.decideToToggleShowButton}\"></slot>\n      </span>\n      ${this.showButton?html`\n        <span\n          class=\"nile-form-help-text__more-button\"\n          part=\"toggle-button\"\n          @click=${this.toggleExpanded}\n        >${this.isExpanded ? 'View Less' : 'View More'}\n          <nile-icon color=\"#005EA6\" part=\"icon\" size=\"14\" name=\"${iconName}\"></nile-icon>\n        </span>\n      `:nothing}\n    </div>\n  `;\n  }\n\n  toggleExpanded() {\n    this.isExpanded = !this.isExpanded;\n  }\n  \n  decideToToggleShowButton(){\n    if(!this.textContainer) return;\n    this.showButton=this.textContainer.clientWidth<this.textContainer.scrollWidth\n  }\n\n  /**\n   * Logs whenever the width of an element changes.\n   * @param {HTMLElement} element - The element to observe for width changes.\n   */\n  observeWidthChange(element:HTMLElement) {\n\n    const resizeObserver = new ResizeObserver(entries => {\n      for (let entry of entries) {\n        const newWidth = entry.contentRect.width;\n        if (newWidth) this.decideToToggleShowButton();\n      }\n    });\n\n    resizeObserver.observe(element);\n\n    return resizeObserver; // Return observer to allow disconnection if needed\n  }\n}\n\nexport default NileFormHelpText;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-form-help-text': NileFormHelpText;\n  }\n}"]}
+{"version":3,"file":"nile-form-help-text.js","sourceRoot":"","sources":["../../../src/nile-form-help-text/nile-form-help-text.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAC,UAAU,EAAE,IAAI,EAAkC,OAAO,EAAiB,MAAM,KAAK,CAAC;AAC9F,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD;;;;;GAKG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QASwC,eAAU,GAAY,KAAK,CAAC;QAEhE,eAAU,GAAY,KAAK,CAAC;IAgFvC,CAAC;IA1FC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAUD,gBAAgB;IAEhB,qBAAqB;IAEX,YAAY,CAAC,kBAAkC;QACvD,IAAI,CAAC,cAAc,GAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAClE,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;IACnC,CAAC;IAED;;;OAGG;IACI,MAAM;QACX,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,sDAAsD,CAAC,CAAC,CAAC,0DAA0D,CAAC;QAEvJ,OAAO,IAAI,CAAA;;eAEA,QAAQ,CAAC;YAChB,qBAAqB,EAAC,IAAI;YAC1B,+BAA+B,EAAC,IAAI,CAAC,UAAU;SAC9C,CAAC;;;;iBAIO,QAAQ,CAAC;YAChB,kBAAkB,EAAC,IAAI;YACvB,4BAA4B,EAAC,IAAI,CAAC,UAAU;SAC3C,CAAC;;6BAEiB,IAAI,CAAC,wBAAwB;;QAElD,IAAI,CAAC,UAAU,CAAA,CAAC,CAAA,IAAI,CAAA;;;;mBAIT,IAAI,CAAC,cAAc;WAC3B,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;mEACa,QAAQ;;OAEpE,CAAA,CAAC,CAAA,OAAO;;GAEZ,CAAC;IACF,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;IACrC,CAAC;IAED,wBAAwB;QACtB,IAAG,CAAC,IAAI,CAAC,aAAa;YAAE,OAAO;QAC/B,IAAI,CAAC,UAAU,GAAC,IAAI,CAAC,aAAa,CAAC,WAAW,GAAC,IAAI,CAAC,aAAa,CAAC,WAAW,CAAA;IAC/E,CAAC;IAED;;;OAGG;IACH,kBAAkB,CAAC,OAAmB;QAEpC,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE;YAClD,KAAK,IAAI,KAAK,IAAI,OAAO,EAAE,CAAC;gBAC1B,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC;gBACzC,IAAI,QAAQ;oBAAE,IAAI,CAAC,wBAAwB,EAAE,CAAC;YAChD,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAEhC,OAAO,cAAc,CAAC,CAAC,mDAAmD;IAC5E,CAAC;CACF,CAAA;AAlF8C;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAG,CAAC;oDAA6B;AAEhE;IAAR,KAAK,EAAE;oDAA6B;AAET;IAA3B,KAAK,CAAC,mBAAmB,CAAC;uDAA+B;AAb/C,gBAAgB;IAD5B,aAAa,CAAC,qBAAqB,CAAC;GACxB,gBAAgB,CA2F5B;;AAED,eAAe,gBAAgB,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 {LitElement, html, CSSResultArray, TemplateResult, nothing, PropertyValues} from 'lit';\nimport { customElement, query, property, state } from 'lit/decorators.js';\nimport {styles} from './nile-form-help-text.css';\nimport { classMap } from 'lit/directives/class-map.js';\n\n/**\n * Nile icon component.\n *\n * @tag nile-form-help-text\n *\n */\n@customElement('nile-form-help-text')\nexport class NileFormHelpText extends LitElement {\n  /**\n   * The styles for FormHelpText\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  @property({ type: Boolean, reflect: true  }) isExpanded: boolean = false;\n\n  @state() showButton: boolean = false;\n\n  @query('.help__text__full') textContainer:HTMLSpanElement;\n\n  private resizeObserver:ResizeObserver;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  protected firstUpdated(_changedProperties: PropertyValues): void {\n    this.resizeObserver=this.observeWidthChange(this.textContainer);\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver.disconnect();\n  }\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  public render(): TemplateResult {\n    const iconName = this.isExpanded ? 'var(--nile-icon-arrow-up, var(--ng-icon-chevron-up))' : 'var(--nile-icon-arrow-down, var(--ng-icon-chevron-down))';\n\n    return html`\n    <div \n      class=\"${classMap({\n        'nile-form-help-text':true,\n        \"nile-form-help-text--expanded\":this.isExpanded\n        })}\" \n      part=\"container\"\n    >\n      <span\n        class=\"${classMap({\n          \"help__text__full\":true,\n          \"help__text__full--expanded\":this.isExpanded\n          })}\"\n        >\n        <slot @slotchange=\"${this.decideToToggleShowButton}\"></slot>\n      </span>\n      ${this.showButton?html`\n        <span\n          class=\"nile-form-help-text__more-button\"\n          part=\"toggle-button\"\n          @click=${this.toggleExpanded}\n        >${this.isExpanded ? 'View Less' : 'View More'}\n          <nile-icon color=\"#005EA6\" part=\"icon\" size=\"14\" name=\"${iconName}\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"></nile-icon>\n        </span>\n      `:nothing}\n    </div>\n  `;\n  }\n\n  toggleExpanded() {\n    this.isExpanded = !this.isExpanded;\n  }\n  \n  decideToToggleShowButton(){\n    if(!this.textContainer) return;\n    this.showButton=this.textContainer.clientWidth<this.textContainer.scrollWidth\n  }\n\n  /**\n   * Logs whenever the width of an element changes.\n   * @param {HTMLElement} element - The element to observe for width changes.\n   */\n  observeWidthChange(element:HTMLElement) {\n\n    const resizeObserver = new ResizeObserver(entries => {\n      for (let entry of entries) {\n        const newWidth = entry.contentRect.width;\n        if (newWidth) this.decideToToggleShowButton();\n      }\n    });\n\n    resizeObserver.observe(element);\n\n    return resizeObserver; // Return observer to allow disconnection if needed\n  }\n}\n\nexport default NileFormHelpText;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-form-help-text': NileFormHelpText;\n  }\n}"]}

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

@@ -19,7 +19,7 @@ import { classMap } from 'lit/directives/class-map.js';
 let NileHero = class NileHero extends NileElement {
     constructor() {
         super(...arguments);
-        this.icon = 'action';
+        this.icon = 'var(--nile-icon-action, var(--ng-icon-action))';
         this.collapse = false;
         this.imgSrc = '';
         this.heroText = '';
@@ -49,7 +49,7 @@ let NileHero = class NileHero extends NileElement {
 			<div class="hero__slot__container" style="opacity:${this.collapse ? 0 : 1}">
 			 <div class="hero__slot">
 			 	<span class="icon__container">
-					<nile-icon size="16" method="stroke" name="${this.icon}"></nile-icon>
+					<nile-icon size="16" method="var(--nile-svg-method-stroke, var(--ng-svg-method-stroke))" name="${this.icon}"></nile-icon>
 				</span>
 				<slot></slot>
 			 </div>

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

@@ -1 +1 @@
-{"version":3,"file":"nile-hero.js","sourceRoot":"","sources":["../../../src/nile-hero/nile-hero.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAa,IAAI,EAAyC,MAAM,KAAK,CAAC;AAC7E,OAAO,EAAE,aAAa,EAAgB,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAC,MAAM,EAAC,MAAM,iBAAiB,CAAC;AACvC,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAGvD;;;;;GAKG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,WAAW;IAAlC;;QACuB,SAAI,GAAW,QAAQ,CAAC;QACT,aAAQ,GAAY,KAAK,CAAC;QAEnB,WAAM,GAAW,EAAE,CAAC;QAClB,aAAQ,GAAW,EAAE,CAAC;QAwC3E,gBAAgB;IACjB,CAAC;IAvCA;;;OAGG;IACI,MAAM,KAAK,MAAM;QACvB,OAAO,CAAC,MAAM,CAAC,CAAC;IACjB,CAAC;IAED,gBAAgB;IAChB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACZ,OAAO,IAAI,CAAA;4CAC+B,QAAQ,CAAC;YAClD,iBAAiB,EAAC,IAAI;YACtB,4BAA4B,EAAC,IAAI,CAAC,QAAQ;YAC1C,2BAA2B,EAAC,CAAC,IAAI,CAAC,QAAQ;SAC1C,CAAC;gGAC4F,IAAI,CAAC,QAAQ,CAAA,CAAC,CAAA,CAAC,CAAA,CAAC,CAAA,CAAC,gBAAgB,IAAI,CAAC,QAAQ,WAAW,IAAI,CAAC,IAAI;uDAC3G,IAAI,CAAC,QAAQ,CAAA,CAAC,CAAA,CAAC,CAAA,CAAC,CAAA,CAAC;;;kDAGtB,IAAI,CAAC,IAAI;;;;;uDAKJ,IAAI,CAAC,QAAQ,CAAA,CAAC,CAAA,CAAC,CAAA,CAAC,CAAA,CAAC;gBACxD,IAAI,CAAC,MAAM;;;GAGxB,CAAC;IACH,CAAC;CAGD,CAAA;AA7C6B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAyB;AACT;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAA2B;AAEnB;IAAlD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;wCAAqB;AAClB;IAApD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;0CAAuB;AAL/D,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA8CpB;;AAED,eAAe,QAAQ,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 {LitElement, html, CSSResultArray, TemplateResult,nothing} from 'lit';\nimport { customElement, query, state, property } from 'lit/decorators.js';\nimport {styles} from './nile-hero.css';\nimport NileElement from '../internal/nile-element';\nimport { classMap } from 'lit/directives/class-map.js';\n\n\n/**\n * Nile hero component.\n *\n * @tag nile-hero\n *\n */\n@customElement('nile-hero')\nexport class NileHero extends NileElement {\n\t@property({ reflect: true }) icon: string = 'action';\n\t@property({ reflect: true, type: Boolean }) collapse: boolean = false;\n\n\t@property({ reflect: true, attribute: 'img-src' }) imgSrc: string = '';\n\t@property({ reflect: true, attribute: 'hero-text' }) heroText: string = '';\n\n\t/**\n\t * The styles for nile-hero\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\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\treturn html`\n\t\t<div part=\"nile__hero__container\" class=${classMap({\n\t\t\t\"hero__container\":true,\n\t\t\t\"hero__container--collapsed\":this.collapse,\n\t\t\t\"hero__container--expanded\":!this.collapse\n\t\t})}>\n\t\t\t<nile-hero-header part=\"nile__hero__header\" class='hero__header--collapsed' style=\"opacity:${this.collapse?1:0}\" hero-text=\"${this.heroText}\" icon=\"${this.icon}\"></nile-hero-header>\n\t\t\t<div class=\"hero__slot__container\" style=\"opacity:${this.collapse?0:1}\">\n\t\t\t <div class=\"hero__slot\">\n\t\t\t \t<span class=\"icon__container\">\n\t\t\t\t\t<nile-icon size=\"16\" method=\"stroke\" name=\"${this.icon}\"></nile-icon>\n\t\t\t\t</span>\n\t\t\t\t<slot></slot>\n\t\t\t </div>\n\t\t\t</div>\n\t\t\t<div class=\"hero__img__container\"  style=\"opacity:${this.collapse?0:1}\" id=\"hero__img__container\">\n\t\t\t\t<img src=\"${this.imgSrc}\" class=\"hero__img\">\n\t\t\t</div>\n\t\t</div>\n\t\t`;\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileHero;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-hero': NileHero;\n  }\n}"]}
+{"version":3,"file":"nile-hero.js","sourceRoot":"","sources":["../../../src/nile-hero/nile-hero.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAa,IAAI,EAAyC,MAAM,KAAK,CAAC;AAC7E,OAAO,EAAE,aAAa,EAAgB,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAC,MAAM,EAAC,MAAM,iBAAiB,CAAC;AACvC,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAGvD;;;;;GAKG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,WAAW;IAAlC;;QACuB,SAAI,GAAW,gDAAgD,CAAC;QACjD,aAAQ,GAAY,KAAK,CAAC;QAEnB,WAAM,GAAW,EAAE,CAAC;QAClB,aAAQ,GAAW,EAAE,CAAC;QAwC3E,gBAAgB;IACjB,CAAC;IAvCA;;;OAGG;IACI,MAAM,KAAK,MAAM;QACvB,OAAO,CAAC,MAAM,CAAC,CAAC;IACjB,CAAC;IAED,gBAAgB;IAChB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACZ,OAAO,IAAI,CAAA;4CAC+B,QAAQ,CAAC;YAClD,iBAAiB,EAAC,IAAI;YACtB,4BAA4B,EAAC,IAAI,CAAC,QAAQ;YAC1C,2BAA2B,EAAC,CAAC,IAAI,CAAC,QAAQ;SAC1C,CAAC;gGAC4F,IAAI,CAAC,QAAQ,CAAA,CAAC,CAAA,CAAC,CAAA,CAAC,CAAA,CAAC,gBAAgB,IAAI,CAAC,QAAQ,WAAW,IAAI,CAAC,IAAI;uDAC3G,IAAI,CAAC,QAAQ,CAAA,CAAC,CAAA,CAAC,CAAA,CAAC,CAAA,CAAC;;;sGAG8B,IAAI,CAAC,IAAI;;;;;uDAKxD,IAAI,CAAC,QAAQ,CAAA,CAAC,CAAA,CAAC,CAAA,CAAC,CAAA,CAAC;gBACxD,IAAI,CAAC,MAAM;;;GAGxB,CAAC;IACH,CAAC;CAGD,CAAA;AA7C6B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAiE;AACjD;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAA2B;AAEnB;IAAlD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;wCAAqB;AAClB;IAApD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;0CAAuB;AAL/D,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA8CpB;;AAED,eAAe,QAAQ,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 {LitElement, html, CSSResultArray, TemplateResult,nothing} from 'lit';\nimport { customElement, query, state, property } from 'lit/decorators.js';\nimport {styles} from './nile-hero.css';\nimport NileElement from '../internal/nile-element';\nimport { classMap } from 'lit/directives/class-map.js';\n\n\n/**\n * Nile hero component.\n *\n * @tag nile-hero\n *\n */\n@customElement('nile-hero')\nexport class NileHero extends NileElement {\n\t@property({ reflect: true }) icon: string = 'var(--nile-icon-action, var(--ng-icon-action))';\n\t@property({ reflect: true, type: Boolean }) collapse: boolean = false;\n\n\t@property({ reflect: true, attribute: 'img-src' }) imgSrc: string = '';\n\t@property({ reflect: true, attribute: 'hero-text' }) heroText: string = '';\n\n\t/**\n\t * The styles for nile-hero\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\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\treturn html`\n\t\t<div part=\"nile__hero__container\" class=${classMap({\n\t\t\t\"hero__container\":true,\n\t\t\t\"hero__container--collapsed\":this.collapse,\n\t\t\t\"hero__container--expanded\":!this.collapse\n\t\t})}>\n\t\t\t<nile-hero-header part=\"nile__hero__header\" class='hero__header--collapsed' style=\"opacity:${this.collapse?1:0}\" hero-text=\"${this.heroText}\" icon=\"${this.icon}\"></nile-hero-header>\n\t\t\t<div class=\"hero__slot__container\" style=\"opacity:${this.collapse?0:1}\">\n\t\t\t <div class=\"hero__slot\">\n\t\t\t \t<span class=\"icon__container\">\n\t\t\t\t\t<nile-icon size=\"16\" method=\"var(--nile-svg-method-stroke, var(--ng-svg-method-stroke))\" name=\"${this.icon}\"></nile-icon>\n\t\t\t\t</span>\n\t\t\t\t<slot></slot>\n\t\t\t </div>\n\t\t\t</div>\n\t\t\t<div class=\"hero__img__container\"  style=\"opacity:${this.collapse?0:1}\" id=\"hero__img__container\">\n\t\t\t\t<img src=\"${this.imgSrc}\" class=\"hero__img\">\n\t\t\t</div>\n\t\t</div>\n\t\t`;\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileHero;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-hero': NileHero;\n  }\n}"]}

package/dist/src/nile-hero-header/nile-hero-header.js

@@ -18,7 +18,7 @@ import NileElement from '../internal/nile-element';
 let NileHeroHeader = class NileHeroHeader extends NileElement {
     constructor() {
         super(...arguments);
-        this.icon = 'action';
+        this.icon = 'var(--nile-icon-action, var(--ng-icon-action))';
         this.heroText = 'Nile Hero';
         /* #endregion */
     }
@@ -38,7 +38,7 @@ let NileHeroHeader = class NileHeroHeader extends NileElement {
     render() {
         return html `
 				<span class="icon__container">
-					<nile-icon method="stroke" size="16" name="${this.icon}"></nile-icon>
+					<nile-icon method="var(--nile-svg-method-stroke, var(--ng-svg-method-stroke))" size="16" name="${this.icon}"></nile-icon>
 				</span>
 				<span class="hero__text">${this.heroText}</span>
 			`;