@aquera/nile-elements 1.4.9 → 1.5.0

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.4.9",
+  "version": "1.5.0",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-date-picker/nile-date-picker.ts

@@ -79,6 +79,8 @@ export class NileDatePicker extends NileElement {
 
   @property({ type: Boolean, attribute: true, reflect: true }) showMonthDropdown = false;
 
+  @property({ type: Boolean, attribute: true, reflect: true }) portal = false;
+
   @query('nile-dropdown') dropdown: NileDropdown;
 
  /**
@@ -139,7 +141,7 @@ export class NileDatePicker extends NileElement {
 
   render(): TemplateResult {
     return html`
-      <nile-dropdown .open="${this.open}" part="dd-base" .hoist="${true}" distance="6" exportparts="base">
+      <nile-dropdown .open="${this.open}" part="dd-base" .hoist="${true}" distance="6" exportparts="base" .portal="${this.portal}">
         <slot slot="trigger" part="trigger" name="trigger"></slot>
 
         <nile-calendar

package/src/nile-file-preview/nile-file-preview.css.ts

@@ -13,6 +13,7 @@ import {css} from 'lit';
 export const styles = css`
   :host {
     display: inline-block;
+    width: 100%;
   }
 
   * {
@@ -36,7 +37,7 @@ export const styles = css`
 
   .horizontal-div {
     max-height: 62px;
-    width: 648px;
+    width: 100%;
     min-width: 230px;
     padding: 12px;
     display: flex;
@@ -263,7 +264,7 @@ export const styles = css`
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    width: 500px;
+    width: 100%;
   }
 
   .preview-file-info p:last-of-type{
@@ -274,7 +275,7 @@ export const styles = css`
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    width: 500px;
+    width: 100%;
   }
 
   .no-preview > nile-icon:hover {
@@ -584,6 +585,9 @@ export const styles = css`
   li {
     list-style-type: none;
   }
+  .preview-file-info p {
+    width: 100%;
+    }
 `;
 
 export default [styles];

package/src/nile-file-preview/nile-file-preview.template.ts

@@ -16,16 +16,16 @@ import { NileFilePreview } from './nile-file-preview';
     return html`
       <div class="uploading" part="horizontal-uploading-state">
         <nile-loader width="24" height="24"></nile-loader>
-        <div class="progress-bar-container">
-          <div class="progress-bar-percent">
-            <p>Uploading File...</p>
-            <p>${uploadStatus}%</p>
+        <div class="progress-bar-container" part="horizontal-progress-bar-container">
+          <div class="progress-bar-percent" part="horizontal-progress-bar-percent">
+            <p part="horizontal-progress-bar-percent-text">Uploading File...</p>
+            <p part="horizontal-progress-bar-percent-value">${uploadStatus}%</p>
           </div>
           <nile-progress-bar
             part="horizontal-progress-bar"
             value="${uploadStatus}"
           ></nile-progress-bar>
-          <p class="horizontal-file-name">${file.name}</p>
+          <p class="horizontal-file-name" part="horizontal-file-name">${file.name}</p>
         </div>
         <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e)} name="cancelIcon">
           <nile-icon
@@ -45,25 +45,27 @@ export function getHorizontalPreviewState(
 ): TemplateResult {
   return html`
     <div class="preview horizontal-div" part="horizontal-preview-state">
-      <div class="preview-inner">
-        <div class="preview-image-container">
+      <div class="preview-inner" part="horizontal-preview-inner">
+        <div class="preview-image-container" part="horizontal-preview-image-container">
             <img
               class="image-preview"
               src=${url}
               alt=${file.name}
+              part="horizontal-preview-image"
             />
         </div>
-        <div class="preview-file-info">
-          <p>${file.name}</p>
-          <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
+        <div class="preview-file-info" part="horizontal-preview-file-info">
+          <p part="horizontal-preview-file-info-name">${file.name}</p>
+          <p part="horizontal-preview-file-info-type">${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
         </div>
       </div>
-      <div class="preview-actions">
+      <div class="preview-actions" part="horizontal-preview-actions">
         <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name="cancel-icon">
           <nile-icon
             name="trash"
             size="14"
             class="icon"
+            part="horizontal-preview-actions-icon"
           ></nile-icon>
         </slot>
       </div>
@@ -77,13 +79,13 @@ export function getHorizontalNoPreviewState(
 ): TemplateResult {
   return html`
     <div class="no-preview horizontal-div" part="horizontal-no-preview-state">
-      <div class="no-preview-container">
-        <div class="document-icon">
+      <div class="no-preview-container" part="horizontal-no-preview-container">
+        <div class="document-icon" part="horizontal-no-preview-document-icon">
           <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
         </div>
-        <div class="preview-file-info">
-          <p>${file.name}</p>
-          <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
+        <div class="preview-file-info" part="horizontal-no-preview-file-info">
+          <p part="horizontal-no-preview-file-info-name">${file.name}</p>
+          <p part="horizontal-no-preview-file-info-type">${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
         </div>
       </div>
       <div>
@@ -92,6 +94,7 @@ export function getHorizontalNoPreviewState(
             name="trash"
             size="14"
             class="icon"
+            part="horizontal-no-preview-actions-icon"
           ></nile-icon>
         </slot>
       </div>
@@ -108,12 +111,12 @@ export function getHorizontalErrorState(
   truncateString(nileFilePreview);
   return html`
     <div class="error horizontal-div" part="horizontal-error-state">
-      <div class="error-container">
-        <div class="error-icon">
+      <div class="error-container" part="horizontal-error-container">
+        <div class="error-icon" part="horizontal-error-icon">
           <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
         </div>
-        <div class="file-info">
-          <p class="horizontal-file-name">${file.name}</p>
+        <div class="file-info" part="horizontal-error-file-info">
+          <p class="horizontal-file-name" part="horizontal-error-file-info-name">${file.name}</p>
           ${
             nileFilePreview.isStringTruncated
               ? html`<nile-tooltip content=${errorMessage}>
@@ -128,6 +131,7 @@ export function getHorizontalErrorState(
             name="close"
             size="14"
             class="icon"
+            part="horizontal-error-actions-icon"
           ></nile-icon>
         </slot>
     </div>
@@ -141,17 +145,17 @@ export function getVerticalUploadingState(
 ): TemplateResult {
   return html`
     <div class="vertical-div vertical-uploading" part="vertical-uploading-state">
-      <div class="loading">
+      <div class="loading" part="vertical-loading">
         <nile-loader width="24" height="24"></nile-loader>
       </div>
 
-      <div class="progress-bar-container">
-        <div class="progress-bar-percent">
-          <p>Uploading...</p>
-          <p>${uploadStatus}%</p>
+      <div class="progress-bar-container" part="vertical-progress-bar-container">
+        <div class="progress-bar-percent" part="vertical-progress-bar-percent">
+          <p part="vertical-progress-bar-percent-text">Uploading...</p>
+          <p part="vertical-progress-bar-percent-value">${uploadStatus}%</p>
         </div>
         <nile-progress-bar value=${uploadStatus}></nile-progress-bar>
-        <p class="vertical-file-name">${file.name}</p>
+        <p class="vertical-file-name" part="vertical-file-name">${file.name}</p>
       </div>
 
       <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e)} name="cancelIcon">
@@ -159,6 +163,7 @@ export function getVerticalUploadingState(
           name="close"
           size="14"
           class="icon corner-icon"
+          part="vertical-uploading-actions-icon"
         ></nile-icon>
       </slot>
     </div>
@@ -173,17 +178,18 @@ export function getVerticalPreviewState(
 ): TemplateResult {
   return html`
     <div class="vertical-div vertical-preview" part="vertical-preview-state">
-      <div>
+      <div part="vertical-preview-image-container">
         <img
           class="image-preview"
+          part="vertical-preview-image"
           src=${url}
           alt=${file.name}
         />
       </div>
 
-      <div class="content-container">
-        <p>${file.name}</p>
-         <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
+      <div class="content-container" part="vertical-preview-file-info">
+        <p part="vertical-preview-file-info-name">${file.name}</p>
+         <p part="vertical-preview-file-info-type">${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
       </div>
 
       <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name="cancelIcon">
@@ -191,6 +197,7 @@ export function getVerticalPreviewState(
           name="trash"
           size="14"
           class="icon corner-icon"
+          part="vertical-preview-actions-icon"
         ></nile-icon>
       </slot>
     </div>
@@ -203,13 +210,13 @@ export function getVerticalNoPreviewState(
 ): TemplateResult {
   return html`
     <div class="vertical-div vertical-no-preview" part="vertical-no-preview-state">
-      <div class="vertical-document-icon">
+      <div class="vertical-document-icon" part="vertical-no-preview-document-icon">
         <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
       </div>
 
-      <div class="content-container">
-        <p>${file.name}</p>
-        <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
+      <div class="content-container" part="vertical-no-preview-file-info">
+        <p part="vertical-no-preview-file-info-name">${file.name}</p>
+        <p part="vertical-no-preview-file-info-type">${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
       </div>
 
       <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name="cancelIcon">
@@ -217,6 +224,7 @@ export function getVerticalNoPreviewState(
           name="trash"
           size="14"
           class="icon corner-icon"
+          part="vertical-no-preview-actions-icon"
         ></nile-icon>
       </slot>
     </div>
@@ -232,12 +240,12 @@ export function getVerticalErrorState(
   truncateString(nileFilePreview);
   return html`
     <div class="vertical-div vertical-error" part="vertical-error-state">
-      <div class="vertical-document-icon error-bg">
+      <div class="vertical-document-icon error-bg" part="vertical-error-document-icon">
         <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
       </div>
 
-      <div class="file-info-vertical-state">
-        <p class="vertical-file-name">${file.name}</p>
+      <div class="file-info-vertical-state" part="vertical-error-file-info">
+        <p class="vertical-file-name" part="vertical-error-file-info-name">${file.name}</p>
         ${
           nileFilePreview.isStringTruncated
             ? html`<nile-tooltip content=${errorMessage}>
@@ -252,6 +260,7 @@ export function getVerticalErrorState(
           name="close"
           size="14"
           class="icon corner-icon"
+          part="vertical-error-actions-icon"
         ></nile-icon>
       </slot>
     </div>

package/src/nile-icon/icons/svg/index.ts

@@ -303,6 +303,7 @@ export { default as ngarrownarrowright } from './ng-arrow-narrow-right';
 export { default as ngarrowup } from './ng-arrow-up';
 export { default as ngbarchart12 } from './ng-bar-chart-12';
 export { default as ngbarchartsquare02 } from './ng-bar-chart-square-02';
+export { default as ngbatterycharging } from './ng-battery-charging';
 export { default as ngbell01 } from './ng-bell-01';
 export { default as ngbellringing04 } from './ng-bell-ringing-04';
 export { default as ngbold01 } from './ng-bold-01';
@@ -344,6 +345,7 @@ export { default as ngfilecheck02 } from './ng-file-check-02';
 export { default as ngfilequestion03 } from './ng-file-question-03';
 export { default as ngfilterlines } from './ng-filter-lines';
 export { default as nggrid01 } from './ng-grid-01';
+export { default as nghash } from './ng-hash';
 export { default as nghelpcircle } from './ng-help-circle';
 export { default as nghomeline } from './ng-home-line';
 export { default as ngimage03 } from './ng-image-03';
@@ -362,6 +364,7 @@ export { default as ngmenu05 } from './ng-menu-05';
 export { default as ngmessagetextsquare01 } from './ng-message-text-square-01';
 export { default as ngminimize02 } from './ng-minimize-02';
 export { default as ngminus } from './ng-minus';
+export { default as ngmonitor } from './ng-monitor';
 export { default as ngpiechart03 } from './ng-pie-chart-03';
 export { default as ngplus } from './ng-plus';
 export { default as ngrefreshcw02 } from './ng-refresh-cw-02';
@@ -369,12 +372,15 @@ export { default as ngrocket02 } from './ng-rocket-02';
 export { default as ngrows01 } from './ng-rows-01';
 export { default as ngsearchlg } from './ng-search-lg';
 export { default as ngsend01 } from './ng-send-01';
+export { default as ngserver } from './ng-server';
 export { default as ngsettings01 } from './ng-settings-01';
 export { default as ngshare04 } from './ng-share-04';
 export { default as ngshare06 } from './ng-share-06';
+export { default as ngshieldtick } from './ng-shield-tick';
 export { default as ngshoppingbag01 } from './ng-shopping-bag-01';
 export { default as ngstars02 } from './ng-stars-02';
 export { default as ngswitchhorizontal01 } from './ng-switch-horizontal-01';
+export { default as ngtag } from './ng-tag';
 export { default as ngtrash01 } from './ng-trash-01';
 export { default as ngtrash03 } from './ng-trash-03';
 export { default as ngtrendup01 } from './ng-trend-up-01';
@@ -387,6 +393,7 @@ export { default as ngusercheck02 } from './ng-user-check-02';
 export { default as nguserplus02 } from './ng-user-plus-02';
 export { default as nguserright01 } from './ng-user-right-01';
 export { default as ngusers01 } from './ng-users-01';
+export { default as ngwifi } from './ng-wifi';
 export { default as ngxcircle } from './ng-x-circle';
 export { default as ngxclose } from './ng-x-close';
 export { default as ngxsquare } from './ng-x-square';

package/src/nile-icon/icons/svg/ng-battery-charging.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIj48cGF0aCBkPSJNMTAuODMzMyAxNUwxMi41IDEySDguNUwxMC4xNjY3IDlNMjIgMTNWMTFNNi44IDE4SDE0LjJDMTUuODgwMiAxOCAxNi43MjAyIDE4IDE3LjM2MiAxNy42NzNDMTcuOTI2NSAxNy4zODU0IDE4LjM4NTQgMTYuOTI2NSAxOC42NzMgMTYuMzYyQzE5IDE1LjcyMDIgMTkgMTQuODgwMiAxOSAxMy4yVjEwLjhDMTkgOS4xMTk4NCAxOSA4LjI3OTc2IDE4LjY3MyA3LjYzODAzQzE4LjM4NTQgNy4wNzM1NCAxNy45MjY1IDYuNjE0NiAxNy4zNjIgNi4zMjY5OEMxNi43MjAyIDYgMTUuODgwMiA2IDE0LjIgNkg2LjhDNS4xMTk4NCA2IDQuMjc5NzYgNiAzLjYzODAzIDYuMzI2OThDMy4wNzM1NCA2LjYxNDYgMi42MTQ2IDcuMDczNTQgMi4zMjY5OCA3LjYzODAzQzIgOC4yNzk3NiAyIDkuMTE5ODQgMiAxMC44VjEzLjJDMiAxNC44ODAyIDIgMTUuNzIwMiAyLjMyNjk4IDE2LjM2MkMyLjYxNDYgMTYuOTI2NSAzLjA3MzU0IDE3LjM4NTQgMy42MzgwMyAxNy42NzNDNC4yNzk3NiAxOCA1LjExOTg0IDE4IDYuOCAxOFoiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=";

package/src/nile-icon/icons/svg/ng-hash.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIj48cGF0aCBkPSJNNCA4SDIwTTQgMTZIMjBNOCAzVjIxTTE2IDNWMjEiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=";

package/src/nile-icon/icons/svg/ng-monitor.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIj48cGF0aCBkPSJNNS41IDIwSDhNMTcgOUgxNy4wMU04IDZINS4yQzQuMDc5OSA2IDMuNTE5ODQgNiAzLjA5MjAyIDYuMjE3OTlDMi43MTU2OSA2LjQwOTczIDIuNDA5NzMgNi43MTU2OSAyLjIxNzk5IDcuMDkyMDJDMiA3LjUxOTg0IDIgOC4wNzk5IDIgOS4yVjEyLjhDMiAxMy45MjAxIDIgMTQuNDgwMiAyLjIxNzk5IDE0LjkwOEMyLjQwOTczIDE1LjI4NDMgMi43MTU2OSAxNS41OTAzIDMuMDkyMDIgMTUuNzgyQzMuNTE5ODQgMTYgNC4wNzk5IDE2IDUuMiAxNkg4TTE1LjIgMjBIMTguOEMxOS45MjAxIDIwIDIwLjQ4MDIgMjAgMjAuOTA4IDE5Ljc4MkMyMS4yODQzIDE5LjU5MDMgMjEuNTkwMyAxOS4yODQzIDIxLjc4MiAxOC45MDhDMjIgMTguNDgwMiAyMiAxNy45MjAxIDIyIDE2LjhWNy4yQzIyIDYuMDc5OSAyMiA1LjUxOTg0IDIxLjc4MiA1LjA5MjAyQzIxLjU5MDMgNC43MTU2OSAyMS4yODQzIDQuNDA5NzMgMjAuOTA4IDQuMjE3OTlDMjAuNDgwMiA0IDE5LjkyMDEgNCAxOC44IDRIMTUuMkMxNC4wNzk5IDQgMTMuNTE5OCA0IDEzLjA5MiA0LjIxNzk5QzEyLjcxNTcgNC40MDk3MyAxMi40MDk3IDQuNzE1NjkgMTIuMjE4IDUuMDkyMDJDMTIgNS41MTk4NCAxMiA2LjA3OTg5IDEyIDcuMlYxNi44QzEyIDE3LjkyMDEgMTIgMTguNDgwMiAxMi4yMTggMTguOTA4QzEyLjQwOTcgMTkuMjg0MyAxMi43MTU3IDE5LjU5MDMgMTMuMDkyIDE5Ljc4MkMxMy41MTk4IDIwIDE0LjA3OTkgMjAgMTUuMiAyMFpNMTggMTVDMTggMTUuNTUyMyAxNy41NTIzIDE2IDE3IDE2QzE2LjQ0NzcgMTYgMTYgMTUuNTUyMyAxNiAxNUMxNiAxNC40NDc3IDE2LjQ0NzcgMTQgMTcgMTRDMTcuNTUyMyAxNCAxOCAxNC40NDc3IDE4IDE1WiIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==";

package/src/nile-icon/icons/svg/ng-server.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIj48cGF0aCBkPSJNMjIgMTcuNUwyMS4zMDgzIDcuNDY5NzVDMjEuMTk5NyA1Ljg5NTA0IDIxLjE0NTQgNS4xMDc2OCAyMC44MDQxIDQuNTEwODJDMjAuNTAzNiAzLjk4NTMzIDIwLjA1MTIgMy41NjMwNCAxOS41MDYyIDMuMjk5NDJDMTguODg3MyAzIDE4LjA5ODEgMyAxNi41MTk2IDNINy40ODAzN0M1LjkwMTkxIDMgNS4xMTI2OCAzIDQuNDkzNzYgMy4yOTk0MkMzLjk0ODg0IDMuNTYzMDQgMy40OTY0MiAzLjk4NTMzIDMuMTk1OTQgNC41MTA4MkMyLjg1NDY0IDUuMTA3NjggMi44MDAzNCA1Ljg5NTAzIDIuNjkxNzQgNy40Njk3NUwyIDE3LjVNMjIgMTcuNUMyMiAxOS40MzMgMjAuNDMzIDIxIDE4LjUgMjFINS41QzMuNTY3IDIxIDIgMTkuNDMzIDIgMTcuNU0yMiAxNy41QzIyIDE1LjU2NyAyMC40MzMgMTQgMTguNSAxNEg1LjVDMy41NjcgMTQgMiAxNS41NjcgMiAxNy41TTYgMTcuNUg2LjAxTTEyIDE3LjVIMTgiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=";

package/src/nile-icon/icons/svg/ng-shield-tick.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIyMiIgdmlld0JveD0iMCAwIDE4IDIyIiBmaWxsPSJub25lIj48cGF0aCBkPSJNNS44MDAxNyAxMC4yMzE4TDcuODAwMTcgMTIuMjMxOEwxMi4zMDAyIDcuNzMxOE0xNi44MDAyIDEwLjczMThDMTYuODAwMiAxNS42NDAyIDExLjQ0NjIgMTkuMjEwMiA5LjQ5ODE2IDIwLjM0NjdDOS4yNzY3NyAyMC40NzU4IDkuMTY2MDcgMjAuNTQwNCA5LjAwOTg1IDIwLjU3MzlDOC44ODg2MSAyMC41OTk5IDguNzExNzMgMjAuNTk5OSA4LjU5MDQ5IDIwLjU3MzlDOC40MzQyNyAyMC41NDA0IDguMzIzNTcgMjAuNDc1OCA4LjEwMjE4IDIwLjM0NjdDNi4xNTQxMyAxOS4yMTAyIDAuODAwMTcxIDE1LjY0MDIgMC44MDAxNzEgMTAuNzMxOFY1Ljk0OTQxQzAuODAwMTcxIDUuMTQ5ODkgMC44MDAxNzEgNC43NTAxNCAwLjkzMDkzMSA0LjQwNjUxQzEuMDQ2NDUgNC4xMDI5NSAxLjIzNDE1IDMuODMyMDggMS40Nzc4MyAzLjYxNzMzQzEuNzUzNjcgMy4zNzQyNCAyLjEyNzk3IDMuMjMzODggMi44NzY1OCAyLjk1MzE1TDguMjM4MzcgMC45NDI0NzhDOC40NDYyNyAwLjg2NDUxNyA4LjU1MDIyIDAuODI1NTM3IDguNjU3MTUgMC44MTAwODRDOC43NTIwMSAwLjc5NjM3OCA4Ljg0ODM0IDAuNzk2Mzc4IDguOTQzMTkgMC44MTAwODRDOS4wNTAxMiAwLjgyNTUzNyA5LjE1NDA3IDAuODY0NTE3IDkuMzYxOTcgMC45NDI0NzhMMTQuNzIzOCAyLjk1MzE1QzE1LjQ3MjQgMy4yMzM4OCAxNS44NDY3IDMuMzc0MjQgMTYuMTIyNSAzLjYxNzMzQzE2LjM2NjIgMy44MzIwOCAxNi41NTM5IDQuMTAyOTUgMTYuNjY5NCA0LjQwNjUxQzE2LjgwMDIgNC43NTAxNCAxNi44MDAyIDUuMTQ5ODkgMTYuODAwMiA1Ljk0OTQxVjEwLjczMThaIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+";

package/src/nile-icon/icons/svg/ng-tag.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIj48cGF0aCBkPSJNOCA4SDguMDFNNC41NjI3NCAyLjkzNzI2TDIuOTM3MjYgNC41NjI3NEMyLjU5MTM2IDQuOTA4NjQgMi40MTg0IDUuMDgxNiAyLjI5NDcyIDUuMjgzNDNDMi4xODUwNiA1LjQ2MjM3IDIuMTA0MjUgNS42NTc0NiAyLjA1NTI2IDUuODYxNTRDMiA2LjA5MTcxIDIgNi4zMzYzIDIgNi44MjU0OEwyIDkuNjc0NTJDMiAxMC4xNjM3IDIgMTAuNDA4MyAyLjA1NTI2IDEwLjYzODVDMi4xMDQyNSAxMC44NDI1IDIuMTg1MDYgMTEuMDM3NiAyLjI5NDcyIDExLjIxNjZDMi40MTg0IDExLjQxODQgMi41OTEzNSAxMS41OTE0IDIuOTM3MjYgMTEuOTM3M0wxMC42MDU5IDE5LjYwNTlDMTEuNzkzOSAyMC43OTM5IDEyLjM4OCAyMS4zODggMTMuMDcyOSAyMS42MTA1QzEzLjY3NTUgMjEuODA2MyAxNC4zMjQ1IDIxLjgwNjMgMTQuOTI3IDIxLjYxMDVDMTUuNjEyIDIxLjM4OCAxNi4yMDYxIDIwLjc5MzkgMTcuMzk0MSAxOS42MDU5TDE5LjYwNTkgMTcuMzk0MUMyMC43OTM5IDE2LjIwNjEgMjEuMzg4IDE1LjYxMiAyMS42MTA1IDE0LjkyN0MyMS44MDYzIDE0LjMyNDUgMjEuODA2MyAxMy42NzU1IDIxLjYxMDUgMTMuMDcyOUMyMS4zODggMTIuMzg4IDIwLjc5MzkgMTEuNzkzOSAxOS42MDU5IDEwLjYwNTlMMTEuOTM3MyAyLjkzNzI2QzExLjU5MTQgMi41OTEzNiAxMS40MTg0IDIuNDE4NCAxMS4yMTY2IDIuMjk0NzJDMTEuMDM3NiAyLjE4NTA2IDEwLjg0MjUgMi4xMDQyNSAxMC42Mzg1IDIuMDU1MjZDMTAuNDA4MyAyIDEwLjE2MzcgMiA5LjY3NDUyIDJMNi44MjU0OCAyQzYuMzM2MyAyIDYuMDkxNzEgMiA1Ljg2MTU0IDIuMDU1MjZDNS42NTc0NiAyLjEwNDI1IDUuNDYyMzcgMi4xODUwNiA1LjI4MzQzIDIuMjk0NzJDNS4wODE2IDIuNDE4NCA0LjkwODY1IDIuNTkxMzUgNC41NjI3NCAyLjkzNzI2Wk04LjUgOEM4LjUgOC4yNzYxNCA4LjI3NjE0IDguNSA4IDguNUM3LjcyMzg2IDguNSA3LjUgOC4yNzYxNCA3LjUgOEM3LjUgNy43MjM4NiA3LjcyMzg2IDcuNSA4IDcuNUM4LjI3NjE0IDcuNSA4LjUgNy43MjM4NiA4LjUgOFoiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=";

package/src/nile-icon/icons/svg/ng-wifi.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIj48cGF0aCBkPSJNMTIgMTkuNUgxMi4wMU0yMi44MDY0IDguNzAwNzZDMTkuOTU5NSA2LjA5MTk5IDE2LjE2NTYgNC41IDExLjk5OTkgNC41QzcuODM0MTQgNC41IDQuMDQwMjMgNi4wOTE5OSAxLjE5MzM2IDguNzAwNzZNNC43MzE5MyAxMi4yNDNDNi42NzAwNiAxMC41MzU3IDkuMjE0MDcgOS41IDEyIDkuNUMxNC43ODU5IDkuNSAxNy4zMjk5IDEwLjUzNTcgMTkuMjY4IDEyLjI0M00xNS42OTgzIDE1Ljc3NTFDMTQuNjc5MiAxNC45NzYzIDEzLjM5NTIgMTQuNSAxMS45OTk5IDE0LjVDMTAuNTgzNSAxNC41IDkuMjgxNzIgMTQuOTkwOCA4LjI1NTM3IDE1LjgxMTYiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=";

package/src/nile-select/nile-select.ts

@@ -402,7 +402,7 @@ export class NileSelect extends NileElement implements NileFormControl{
     if(_changedProperties.has('multiple')) {
       this.setCheckBoxInOption(this.multiple as boolean);
     }
-    if(_changedProperties.has('enableDescription')) {
+    if (_changedProperties.has('enableDescription')) {
       this.setEnableDescriptionInOptions();
     }
 
@@ -443,14 +443,16 @@ export class NileSelect extends NileElement implements NileFormControl{
   }
 
   setEnableDescriptionInOptions() {
-    if (!this.options.length) {
-      this.options = this.getAllOptions();
-    }
+    this.options = this.getAllOptions();
 
     this.options.forEach((option: NileOption) => {
-      if (option) {
-        option.isDescriptionEnabled = !!this.enableDescription;
-      }
+      (option?.updateComplete ?? Promise.resolve())
+        .then(() => {
+          option.isDescriptionEnabled = this.enableDescription;
+        })
+        .catch(() => {
+          // ignore individual option update failures
+        });
     });
   }
 
@@ -849,6 +851,7 @@ export class NileSelect extends NileElement implements NileFormControl{
     if (this.portal && this.open) {
       this.portalManager.updatePortalOptions();
     }
+    this.setEnableDescriptionInOptions();
   }
 
   private handleTagRemove(event: NileRemoveEvent, option: NileOption) {

package/vscode-html-custom-data.json

@@ -1187,7 +1187,7 @@
     },
     {
       "name": "nile-date-picker",
-      "description": "Attributes:\n\n  * `range` {`boolean`} - \n\n  * `hideTypes` {`boolean`} - \n\n  * `doubleClickUnselect` {`boolean`} - \n\n  * `allowClear` {`boolean`} - \n\n  * `open` {`boolean`} - \n\n  * `hide-time-zone` {`boolean`} - \n\n  * `type` {`\"absolute\" | \"relative\"`} - \n\n  * `showManualInputs` {`boolean`} - \n\n  * `value` - \n\n  * `hide-duration-fields` - \n\n  * `allowedDates` - \n\n  * `syncDatePicker` {`boolean`} - \n\n  * `dateFormat` {`string`} - \n\n  * `rangeSeparator` {`string`} - \n\n  * `startYear` {`number`} - \n\n  * `endYear` {`number`} - \n\n  * `showYearDropdown` {`boolean`} - \n\n  * `showMonthDropdown` {`boolean`} - \n\nProperties:\n\n  * `range` {`boolean`} - \n\n  * `hideTypes` {`boolean`} - \n\n  * `doubleClickUnselect` {`boolean`} - \n\n  * `allowClear` {`boolean`} - \n\n  * `open` {`boolean`} - \n\n  * `hideTimeZone` {`boolean`} - \n\n  * `type` {`\"absolute\" | \"relative\"`} - \n\n  * `showManualInputs` {`boolean`} - \n\n  * `value` - \n\n  * `hideDurationFields` - \n\n  * `allowedDates` - \n\n  * `syncDatePicker` {`boolean`} - \n\n  * `dateFormat` {`string`} - \n\n  * `rangeSeparator` {`string`} - \n\n  * `startYear` {`number`} - \n\n  * `endYear` {`number`} - \n\n  * `showYearDropdown` {`boolean`} - \n\n  * `showMonthDropdown` {`boolean`} - \n\n  * `dropdown` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Attributes:\n\n  * `range` {`boolean`} - \n\n  * `hideTypes` {`boolean`} - \n\n  * `doubleClickUnselect` {`boolean`} - \n\n  * `allowClear` {`boolean`} - \n\n  * `open` {`boolean`} - \n\n  * `hide-time-zone` {`boolean`} - \n\n  * `type` {`\"absolute\" | \"relative\"`} - \n\n  * `showManualInputs` {`boolean`} - \n\n  * `value` - \n\n  * `hide-duration-fields` - \n\n  * `allowedDates` - \n\n  * `syncDatePicker` {`boolean`} - \n\n  * `dateFormat` {`string`} - \n\n  * `rangeSeparator` {`string`} - \n\n  * `startYear` {`number`} - \n\n  * `endYear` {`number`} - \n\n  * `showYearDropdown` {`boolean`} - \n\n  * `showMonthDropdown` {`boolean`} - \n\n  * `portal` {`boolean`} - \n\nProperties:\n\n  * `range` {`boolean`} - \n\n  * `hideTypes` {`boolean`} - \n\n  * `doubleClickUnselect` {`boolean`} - \n\n  * `allowClear` {`boolean`} - \n\n  * `open` {`boolean`} - \n\n  * `hideTimeZone` {`boolean`} - \n\n  * `type` {`\"absolute\" | \"relative\"`} - \n\n  * `showManualInputs` {`boolean`} - \n\n  * `value` - \n\n  * `hideDurationFields` - \n\n  * `allowedDates` - \n\n  * `syncDatePicker` {`boolean`} - \n\n  * `dateFormat` {`string`} - \n\n  * `rangeSeparator` {`string`} - \n\n  * `startYear` {`number`} - \n\n  * `endYear` {`number`} - \n\n  * `showYearDropdown` {`boolean`} - \n\n  * `showMonthDropdown` {`boolean`} - \n\n  * `portal` {`boolean`} - \n\n  * `dropdown` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "range",
@@ -1278,6 +1278,11 @@
           "name": "showMonthDropdown",
           "description": "`showMonthDropdown` {`boolean`} - \n\nProperty: showMonthDropdown\n\nDefault: false",
           "valueSet": "v"
+        },
+        {
+          "name": "portal",
+          "description": "`portal` {`boolean`} - \n\nProperty: portal\n\nDefault: false",
+          "valueSet": "v"
         }
       ]
     },