@aquera/nile-elements 1.6.8 → 1.6.9

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.6.8",
+  "version": "1.6.9",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -229,4 +229,4 @@
       "prettier --write"
     ]
   }
-}
+}

package/src/nile-auto-complete/nile-auto-complete.ts

@@ -33,7 +33,7 @@ export class NileAutoComplete extends NileElement {
 
   // Define component properties
 
-  @property({ type: Boolean }) disabled: boolean = false;
+  @property({ type: Boolean, reflect: true }) disabled: boolean = false;
 
   @property({ type: Boolean }) isDropdownOpen: boolean = false;
 

package/src/nile-calendar/nile-calendar.css.ts

@@ -640,9 +640,6 @@ export const styles = css`
 }
 :host([disabled]) .duration__value {
   cursor: not-allowed;
-  background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
-  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));
-  border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled));
 }
 `;
 

package/src/nile-calendar/nile-calendar.ts

@@ -295,7 +295,7 @@ private handleEndDateInput(event: CustomEvent): void {
             class="clear-button"
             variant="secondary"
             role="button"
-            ?disabled="${ !this.startDate || !this.endDate }"
+            ?disabled="${ !this.startDate || !this.endDate || this.disabled }"
             @keydown="${(e: KeyboardEvent) => {if (e.key === 'Enter' || e.key === ' ') this.clearDate();}}"
             @click="${this.clearDate}"
 
@@ -303,7 +303,7 @@ private handleEndDateInput(event: CustomEvent): void {
           }
           <nile-button 
           class="apply-button"  
-          ?disabled="${ !this.startDate || !this.endDate }"  
+          ?disabled="${ !this.startDate || !this.endDate || this.disabled }"  
           @click="${this.confimRange}"
           @keydown="${(e: KeyboardEvent) => {if (e.key === 'Enter' || e.key === ' ') this.confimRange();}}"
           > Apply</nile-button>

package/src/nile-dropdown/nile-dropdown.ts

@@ -289,6 +289,9 @@ export class NileDropdown extends NileElement {
     if(this.noOpenOnClick){
       return;
     }
+    if (this.disabled || this.isTriggerDisabled()) {
+      return;
+    }
     if (this.open) {
       this.hide();
     } else {
@@ -353,6 +356,11 @@ export class NileDropdown extends NileElement {
     this.updateAccessibleTrigger();
   }
 
+  private isTriggerDisabled(): boolean {
+    const trigger = this.querySelector('[slot="trigger"]') as any;
+    return trigger?.hasAttribute?.('disabled');
+  }
+
   //
   // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and
   // `aria-expanded`. These must be applied to the "accessible trigger" (the tabbable portion of the trigger element
@@ -387,7 +395,7 @@ export class NileDropdown extends NileElement {
 
   /** Shows the dropdown panel. */
   async show() {
-    if (this.open) {
+    if (this.open || this.disabled || this.isTriggerDisabled()) {
       return undefined;
     }
 
@@ -429,6 +437,8 @@ export class NileDropdown extends NileElement {
     document.removeEventListener('mousedown', this.handleDocumentMouseDown);
   }
 
+  private _triggerDisabledByDropdown = false;
+
   protected updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties);
     
@@ -444,6 +454,10 @@ export class NileDropdown extends NileElement {
       }
     }
     if (changedProperties.has('disabled')) {
+      if (this.disabled && this.open) {
+        void this.hide();
+      }
+      
       this.updateTriggerDisabledState();
     }
   }
@@ -451,17 +465,21 @@ export class NileDropdown extends NileElement {
   private updateTriggerDisabledState() {
     const trigger = this.querySelector('[slot="trigger"]') as any;
     if (!trigger) return;
-    const triggerAlreadyDisabled = trigger.hasAttribute('disabled');
-    if (this.disabled || triggerAlreadyDisabled) {
+    if (this.disabled){
+      if (!trigger.disabled) {
+        this._triggerDisabledByDropdown = true;
+      }
       trigger.disabled = true;
-      this.disabled = true;
+    } else if (this._triggerDisabledByDropdown) {
+      trigger.disabled = false;
+      this._triggerDisabledByDropdown = false;
     }
   }
 
   @watch('open', { waitUntilFirstUpdate: true })
   async handleOpenChange() {
     this.visibilityManager?.setup();
-    if (this.disabled) {
+    if ( this.open && (this.disabled || this.isTriggerDisabled()) ) {
       this.open = false;
       return;
     }

package/src/nile-stepper-item/nile-stepper-item.ts

@@ -148,7 +148,7 @@ export class NileStepperItem extends NileElement {
 	getSvg():TemplateResult{
 		let iconSize = this.size == 'sm' ? 20 : this.size == 'lg' ? 24 : 28;
 		return html`
-		<svg width="${iconSize}" height="${iconSize}" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<svg part="bulletin-svg" width="${iconSize}" height="${iconSize}" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path fill-rule="evenodd" clip-rule="evenodd" d="M22.7953 9.85334L13.2487 19.0667L10.7153 16.36C10.2487 15.92 9.51534 15.8933 8.982 16.2667C8.462 16.6533 8.31534 17.3333 8.63534 17.88L11.6353 22.76C11.9287 23.2133 12.4353 23.4933 13.0087 23.4933C13.5553 23.4933 14.0753 23.2133 14.3687 22.76C14.8487 22.1333 24.0087 11.2133 24.0087 11.2133C25.2087 9.98668 23.7553 8.90668 22.7953 9.84001V9.85334Z" fill="white"/>
 		</svg>
 		`

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

@@ -110,7 +110,7 @@ export class NileVerticalStepperItem extends NileElement {
 	getSvg():TemplateResult{
 		let iconSize = this.size == 'sm' ? 20 : this.size == 'lg' ? 24 : 28;
 		return html`
-		<svg width="${iconSize}" height="${iconSize}" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<svg part="bulletin-svg" width="${iconSize}" height="${iconSize}" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path fill-rule="evenodd" clip-rule="evenodd" d="M22.7953 9.85334L13.2487 19.0667L10.7153 16.36C10.2487 15.92 9.51534 15.8933 8.982 16.2667C8.462 16.6533 8.31534 17.3333 8.63534 17.88L11.6353 22.76C11.9287 23.2133 12.4353 23.4933 13.0087 23.4933C13.5553 23.4933 14.0753 23.2133 14.3687 22.76C14.8487 22.1333 24.0087 11.2133 24.0087 11.2133C25.2087 9.98668 23.7553 8.90668 22.7953 9.84001V9.85334Z" fill="white"/>
 		</svg>
 		`

package/vscode-html-custom-data.json

@@ -1557,7 +1557,7 @@
     },
     {
       "name": "nile-dropdown",
-      "description": "Nile icon component.\n\nEvents:\n\n  * `nile-show` {} - Emitted when the dropdown opens.\n\n  * `nile-after-show` {} - Emitted after the dropdown opens and all animations are complete.\n\n  * `nile-hide` {} - Emitted when the dropdown closes.\n\n  * `nile-after-hide` {} - Emitted after the dropdown closes and all animations are complete.\n\nSlots:\n\n  * ` ` {} - The dropdown's main content.\n\n  * `trigger` {} - The dropdown's trigger, usually a `<nile-button>` element.\n\nAttributes:\n\n  * `open` {`boolean`} - Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.\n\n  * `placement` {`TooltipPosition`} - The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.\n\n  * `disabled` {`boolean`} - Disables the dropdown so the panel will not open.\n\n  * `stay-open-on-select` {`boolean`} - By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ndropdowns that allow for multiple interactions.\n\n  * `distance` {`number`} - The distance in pixels from which to offset the panel away from its trigger.\n\n  * `noOpenOnClick` {`boolean`} - \n\n  * `skidding` {`number`} - The distance in pixels from which to offset the panel along its trigger.\n\n  * `sync` {`\"width\" | \"height\" | \"both\"`} - Syncs the popup's width or height to that of the anchor element.\n\n  * `hoist` {`boolean`} - Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n  * `portal` {`boolean`} - Enable portal mode to render the dropdown panel in a portal outside the component's DOM tree.\nThis provides better positioning control and prevents clipping issues in complex layouts.\n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\nProperties:\n\n  * `styles` - \n\n  * `popup` - \n\n  * `trigger` {`HTMLSlotElement`} - \n\n  * `panel` {`HTMLSlotElement`} - \n\n  * `open` {`boolean`} - Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.\n\n  * `placement` {`TooltipPosition`} - The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.\n\n  * `disabled` {`boolean`} - Disables the dropdown so the panel will not open.\n\n  * `stayOpenOnSelect` {`boolean`} - By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ndropdowns that allow for multiple interactions.\n\n  * `containingElement` {`HTMLElement | undefined`} - The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other\ncomponents that use a dropdown internally.\n\n  * `distance` {`number`} - The distance in pixels from which to offset the panel away from its trigger.\n\n  * `noOpenOnClick` {`boolean`} - \n\n  * `skidding` {`number`} - The distance in pixels from which to offset the panel along its trigger.\n\n  * `sync` {`\"width\" | \"height\" | \"both\"`} - Syncs the popup's width or height to that of the anchor element.\n\n  * `hoist` {`boolean`} - Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n  * `portal` {`boolean`} - Enable portal mode to render the dropdown panel in a portal outside the component's DOM tree.\nThis provides better positioning control and prevents clipping issues in complex layouts.\n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\n  * `portalManager` - \n\n  * `visibilityManager` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile icon component.\n\nEvents:\n\n  * `nile-show` {} - Emitted when the dropdown opens.\n\n  * `nile-after-show` {} - Emitted after the dropdown opens and all animations are complete.\n\n  * `nile-hide` {} - Emitted when the dropdown closes.\n\n  * `nile-after-hide` {} - Emitted after the dropdown closes and all animations are complete.\n\nSlots:\n\n  * ` ` {} - The dropdown's main content.\n\n  * `trigger` {} - The dropdown's trigger, usually a `<nile-button>` element.\n\nAttributes:\n\n  * `open` {`boolean`} - Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.\n\n  * `placement` {`TooltipPosition`} - The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.\n\n  * `disabled` {`boolean`} - Disables the dropdown so the panel will not open.\n\n  * `stay-open-on-select` {`boolean`} - By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ndropdowns that allow for multiple interactions.\n\n  * `distance` {`number`} - The distance in pixels from which to offset the panel away from its trigger.\n\n  * `noOpenOnClick` {`boolean`} - \n\n  * `skidding` {`number`} - The distance in pixels from which to offset the panel along its trigger.\n\n  * `sync` {`\"width\" | \"height\" | \"both\"`} - Syncs the popup's width or height to that of the anchor element.\n\n  * `hoist` {`boolean`} - Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n  * `portal` {`boolean`} - Enable portal mode to render the dropdown panel in a portal outside the component's DOM tree.\nThis provides better positioning control and prevents clipping issues in complex layouts.\n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\nProperties:\n\n  * `styles` - \n\n  * `popup` - \n\n  * `trigger` {`HTMLSlotElement`} - \n\n  * `panel` {`HTMLSlotElement`} - \n\n  * `open` {`boolean`} - Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.\n\n  * `placement` {`TooltipPosition`} - The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.\n\n  * `disabled` {`boolean`} - Disables the dropdown so the panel will not open.\n\n  * `stayOpenOnSelect` {`boolean`} - By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ndropdowns that allow for multiple interactions.\n\n  * `containingElement` {`HTMLElement | undefined`} - The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other\ncomponents that use a dropdown internally.\n\n  * `distance` {`number`} - The distance in pixels from which to offset the panel away from its trigger.\n\n  * `noOpenOnClick` {`boolean`} - \n\n  * `skidding` {`number`} - The distance in pixels from which to offset the panel along its trigger.\n\n  * `sync` {`\"width\" | \"height\" | \"both\"`} - Syncs the popup's width or height to that of the anchor element.\n\n  * `hoist` {`boolean`} - Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n  * `portal` {`boolean`} - Enable portal mode to render the dropdown panel in a portal outside the component's DOM tree.\nThis provides better positioning control and prevents clipping issues in complex layouts.\n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\n  * `portalManager` - \n\n  * `visibilityManager` - \n\n  * `_triggerDisabledByDropdown` {`boolean`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "open",