@aquera/nile-elements 1.5.5 → 1.5.6

package/src/nile-code-editor/nile-code-editor.ts

@@ -585,7 +585,13 @@ export class NileCodeEditor extends NileElement {
   }
 
   getReadOnlyExtension() {
-    return (this.readonly || this.disabled) ? EditorState.readOnly.of(true) : [];
+    if(this.readonly || this.disabled) {
+      return [
+        EditorState.readOnly.of(true),
+        EditorView.editable.of(false),
+      ]
+    }
+    return [];
   }
 
   getSingleLineExtension() {

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

@@ -81,6 +81,8 @@ export class NileDatePicker extends NileElement {
 
   @property({ type: Boolean, attribute: true, reflect: true }) portal = false;
 
+  @property({ type: Boolean, attribute: true, reflect: true }) disabled = false;
+
   @query('nile-dropdown') dropdown: NileDropdown;
 
  /**
@@ -116,6 +118,23 @@ export class NileDatePicker extends NileElement {
       }
     });
   }
+  
+  updated(changedProperties: Map<string, unknown>) {
+    super.updated(changedProperties);
+    if (changedProperties.has('disabled')) {
+      this.updateTriggerDisabledState();
+    }
+  }
+  
+
+  private updateTriggerDisabledState() {
+    const trigger = this.querySelector('[slot="trigger"]') as HTMLElement | null;
+    if (!trigger) return;
+    if ('disabled' in trigger) {
+      (trigger as any).disabled = this.disabled;
+    }
+  }
+  
 
   private jumpTo(date: Date) {
     this.open = true;
@@ -141,8 +160,8 @@ export class NileDatePicker extends NileElement {
 
   render(): TemplateResult {
     return html`
-      <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-dropdown ?disabled="${this.disabled}" .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
           .hideTypes="${this.hideTypes}"
@@ -179,6 +198,7 @@ export class NileDatePicker extends NileElement {
 
     const detail = event.detail;
     const triggerInput = this.querySelector("nile-input");
+    if (this.disabled) return;
 
     if (!this.range) {
       const picked = detail.value;

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

@@ -443,6 +443,17 @@ export class NileDropdown extends NileElement {
         this.portalManager = null;
       }
     }
+    if (changedProperties.has('disabled')) {
+      this.updateTriggerDisabledState();
+    }
+  }
+  
+  private updateTriggerDisabledState() {
+    const trigger = this.querySelector('[slot="trigger"]') as HTMLElement | null;
+    if (!trigger) return;
+    if ('disabled' in trigger) {
+      (trigger as any).disabled = this.disabled;
+    }
   }
 
   @watch('open', { waitUntilFirstUpdate: true })

package/src/nile-file-upload/utils/file-validation.util.ts

@@ -85,13 +85,18 @@ export const setUpDragHandler = (
     }
 
     let updatedFiles = [];
-    for (const file of newFiles) {
-      if(nileFileUpload.allowedTypes.includes(file.type)) {
-        updatedFiles.push(file);
-      } else {
-        nileFileUpload.errorMessage = FileUploadError.INVALID_FORMAT;
+    if(nileFileUpload.allowedTypes.length > 0) {
+      for (const file of newFiles) {
+        if(nileFileUpload.allowedTypes.includes(file.type)) {
+          updatedFiles.push(file);
+        } else {
+          nileFileUpload.errorMessage = FileUploadError.INVALID_FORMAT;
+        }
       }
     }
+    if(updatedFiles.length === 0) {
+      updatedFiles = newFiles;
+    }
 
     nileFileUpload.uploadedFiles = [...uploadedFiles, ...updatedFiles];
     nileFileUpload.requestUpdate();

package/src/nile-filter-chip/nile-filter-chip.css.ts

@@ -146,6 +146,28 @@ nile-badge::part(content) {
  line-height: 20px;
 }
 
+:host([disabled]) .chip {
+  background-color: var(--nile-colors-white-base, var(--ng-colors-bg-disabled-subtle));
+  border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled));
+  color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary-700));
+  cursor: not-allowed;
+  opacity: var(--nile-opacity-100, var(--ng-opacity-50));
+}
+
+:host([disabled]) .label {
+  color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary-700));
+  font-family:colfax-regular;
+}
+
+:host([disabled]) .value {
+  color: var(--nile-colors-primary-500, var(--ng-colors-text-brand-secondary-700));
+}
+
+:host([disabled]) nile-badge::part(base) {
+  background-color: var(--nile-colors-primary-500,var(--ng-colors-text-brand-secondary-700));
+  color: var(--nile-colors-white-base, var(--ng-colors-text-white));
+}
+
 `;
 
 export default [styles];

package/src/nile-filter-chip/nile-filter-chip.ts

@@ -18,6 +18,7 @@ export class NileFilterChip extends NileElement {
   @property({ type: String }) icon = '';
   @property({ type: String }) removeIcon = '';
   @property({ type: Boolean, reflect: true }) active = false;
+  @property({type:Boolean, reflect:true}) disabled = false;
 
 
   private static activeChips: NileFilterChip[] = [];
@@ -55,6 +56,7 @@ export class NileFilterChip extends NileElement {
   }
 
   private handleClick() {
+    if (this.disabled) return;
     this.dispatchEvent(
       new CustomEvent('nile-click', { detail: { value: this.value, viewMoreCount: this.viewMoreCount } })
     );

package/src/nile-inline-edit/nile-inline-edit.css.ts

@@ -25,7 +25,7 @@ export const styles = css`
     font-style: normal;
     font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
     line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));
-    margin-bottom: var(--nile-spacing-sm);
+    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));
   }
 
   .inline__edit--open--container {
@@ -40,23 +40,32 @@ export const styles = css`
     min-width: var(--nile-width-width-xxs, var(--ng-width-80));
     min-height: var(--nile-height-40px, var(--ng-height-40px));
     height: auto;
-    padding-top: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
-    padding-bottom: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
+    padding-top: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
+    padding-bottom: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
     padding-left: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
     padding-right:var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
     border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));
     color: var(--nile-inline-edit-font-color, var(--ng-colors-text-quaternary-500));
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
-    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
+    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
     font-style: normal;
     font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     line-height: var(--nile-spacing-spacing-3xl, var(--ng-line-height-text-md));
     word-wrap: break-word;
+    width: 100%;
   }
 
   .inline__edit--container:hover {
-    background-color:var(--nile-inline-edit-hover-background-color, var(--ng-colors-bg-secondary-hover));
+    background-color: var(--nile-inline-edit-hover-background-color, var(--ng-colors-bg-secondary-hover));
   }
+
+  :host([disabled]) .inline__edit--container,
+  :host([disabled]) .inline__edit--container:hover {
+  background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
+  color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
+  cursor: not-allowed;
+}
+
 `;
 
 export default [styles];

package/src/nile-inline-edit/nile-inline-edit.ts

@@ -55,6 +55,9 @@ export class NileInlineEdit extends NileElement {
   /** Enables automatic closing when focus moves outside the component or when clicking outside */
   @property({ type: Boolean, attribute: 'auto-close' }) autoClose: boolean = false;
 
+  /** Disables the inline edit, preventing it from being opened */
+  @property({ type: Boolean, reflect: true}) disabled: boolean = false;
+
   /* #endregion */
 
   /* #region Methods */
@@ -109,6 +112,7 @@ export class NileInlineEdit extends NileElement {
   }
 
   private handleClick() {
+    if (this.disabled) return;
     this.open = true;
   }
   public render(): TemplateResult {

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

@@ -194,7 +194,7 @@ export const styles = css`
   }
 
   .input--standard.input--disabled {
-    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-disabled-subtle));
+    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
     border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled));
     /* opacity: 0.5; */
     cursor: not-allowed;
@@ -205,7 +205,8 @@ export const styles = css`
   }
 
   .input--standard.input--disabled .input__control::placeholder {
-    color: var(--nile-input-standard-disabled-placeholder-font-color, var(--ng-colors-text-disabled));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
+    background:var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
   }
 
   .input--standard.input--warning {
@@ -261,7 +262,6 @@ export const styles = css`
 
   .input--filled.input--disabled {
     background-color: var(--nile-colors-dark-100);
-    opacity: 0.5;
     cursor: not-allowed;
   }
 
@@ -335,7 +335,7 @@ export const styles = css`
   .input__control::placeholder {
     color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder));
     user-select: none;
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
   }
 
   .input:hover:not(.input--disabled) .input__control {

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

@@ -46,8 +46,7 @@ export const styles = css`
   .link--disabled {
     color: var(--nile-colors-primary-500, var(--ng-colors-text-tertiary-600));
     cursor: not-allowed;
-    pointer-events: none;
-    opacity: 0.6;
+    
   }
 
   .link.link--disabled:not(.link__button) .link__label {

package/src/nile-link/nile-link.ts

@@ -80,6 +80,7 @@ export class NileLink extends NileElement {
 
   handleClick(e: MouseEvent) {
     if (this.disabled) {
+      e.preventDefault();
       e.stopPropagation();
       return;
     }

package/src/nile-qr-code/index.ts

@@ -0,0 +1 @@
+export { NileQrCode } from './nile-qr-code';