@aquera/nile-elements 0.1.55-beta-1 → 0.1.55-patch-1

package/dist/src/internal/resizable-styles.js

@@ -0,0 +1,144 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { css } from 'lit';
+/**
+ * Resizable Styles Utility
+ * Centralized styles for resizable table functionality
+ */
+export const resizableHostStyles = css `
+  /* Resizable-specific host styles */
+  :host([resizable]) {
+    position: relative;
+    overflow: hidden;
+    table-layout: fixed;
+  }
+`;
+export const resizableHeaderStyles = css `
+  /* Resizable-specific header styles */
+  :host([resizable]) {
+    position: relative;
+    border-right: 1px solid var(--nile-colors-neutral-400);
+  }
+
+  /* Resizable-specific wrapper styles */
+  :host([resizable]) .header__item__wrapper {
+    position: relative;
+  }
+`;
+export const resizerStyles = css `
+  /* Resizer styles - only apply when resizable */
+  .resizer {
+    position: absolute;
+    right: 0;
+    top: -1000px;
+    bottom: -1000px;
+    width: 8px;
+    cursor: col-resize;
+    user-select: none;
+    background-color: var(--nile-colors-neutral-100);
+    transition: background-color 0.2s;
+    z-index: 10;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    pointer-events: none;
+  }
+
+  :host([resizable]):hover .resizer {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .resizer::before {
+    content: '';
+    position: absolute;
+    right: 3px;
+    top: 0;
+    width: 2px;
+    height: 100%;
+    background-color: var(--nile-colors-neutral-500);
+    opacity: 0.8;
+  }
+
+  .resizer:hover {
+    background-color: var(--nile-colors-neutral-400);
+  }
+
+  .resizer:hover::before {
+    background-color: var(--nile-colors-neutral-700);
+    opacity: 1;
+  }
+
+  .resizer.resizing {
+    background-color: var(--nile-colors-neutral-400);
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .resizer.resizing::before {
+    background-color: var(--nile-colors-neutral-700);
+    opacity: 1;
+    width: 3px;
+  }
+`;
+export const headerResizerStyles = css `
+  /* Header resizer styles */
+  .resizer {
+    position: absolute;
+    right: -2px;
+    top: -1000px;
+    bottom: -1000px;
+    width: 8px;
+    cursor: ew-resize;
+    user-select: none;
+    transition: background-color 0.2s;
+    z-index: 10;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+  }
+
+  :host([resizable]):hover .resizer {
+    opacity: 1;
+  }
+
+  .resizer::before {
+    content: '';
+    position: absolute;
+    height: 100%;
+    opacity: 0.8;
+  }
+
+  .resizer.resizing {
+    border-right: 4px double var(--nile-colors-neutral-400);
+    background-color: transparent;
+    opacity: 1;
+  }
+`;
+export const resizableSlotStyles = css `
+  /* Slot styles for resizable mode */
+  :host([resizable]) ::slotted(*) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+  }
+
+  :host([resizable]) ::slotted(span),
+  :host([resizable]) ::slotted(div),
+  :host([resizable]) ::slotted(p) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+  }
+`;
+export const tableLayoutStyles = css `
+  /* Apply fixed table layout only when resizable columns are present */
+  .nile__table__body[resizable] {
+    table-layout: fixed;
+  }
+`;
+//# sourceMappingURL=resizable-styles.js.map

package/dist/src/internal/resizable-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable-styles.js","sourceRoot":"","sources":["../../../src/internal/resizable-styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;GAGG;AAEH,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;CAOrC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;CAWvC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsD/B,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCrC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;CAiBrC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;CAKnC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Resizable Styles Utility\n * Centralized styles for resizable table functionality\n */\n\nexport const resizableHostStyles = css`\n  /* Resizable-specific host styles */\n  :host([resizable]) {\n    position: relative;\n    overflow: hidden;\n    table-layout: fixed;\n  }\n`;\n\nexport const resizableHeaderStyles = css`\n  /* Resizable-specific header styles */\n  :host([resizable]) {\n    position: relative;\n    border-right: 1px solid var(--nile-colors-neutral-400);\n  }\n\n  /* Resizable-specific wrapper styles */\n  :host([resizable]) .header__item__wrapper {\n    position: relative;\n  }\n`;\n\nexport const resizerStyles = css`\n  /* Resizer styles - only apply when resizable */\n  .resizer {\n    position: absolute;\n    right: 0;\n    top: -1000px;\n    bottom: -1000px;\n    width: 8px;\n    cursor: col-resize;\n    user-select: none;\n    background-color: var(--nile-colors-neutral-100);\n    transition: background-color 0.2s;\n    z-index: 10;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n    pointer-events: none;\n  }\n\n  :host([resizable]):hover .resizer {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  .resizer::before {\n    content: '';\n    position: absolute;\n    right: 3px;\n    top: 0;\n    width: 2px;\n    height: 100%;\n    background-color: var(--nile-colors-neutral-500);\n    opacity: 0.8;\n  }\n\n  .resizer:hover {\n    background-color: var(--nile-colors-neutral-400);\n  }\n\n  .resizer:hover::before {\n    background-color: var(--nile-colors-neutral-700);\n    opacity: 1;\n  }\n\n  .resizer.resizing {\n    background-color: var(--nile-colors-neutral-400);\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  .resizer.resizing::before {\n    background-color: var(--nile-colors-neutral-700);\n    opacity: 1;\n    width: 3px;\n  }\n`;\n\nexport const headerResizerStyles = css`\n  /* Header resizer styles */\n  .resizer {\n    position: absolute;\n    right: -2px;\n    top: -1000px;\n    bottom: -1000px;\n    width: 8px;\n    cursor: ew-resize;\n    user-select: none;\n    transition: background-color 0.2s;\n    z-index: 10;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n  }\n\n  :host([resizable]):hover .resizer {\n    opacity: 1;\n  }\n\n  .resizer::before {\n    content: '';\n    position: absolute;\n    height: 100%;\n    opacity: 0.8;\n  }\n\n  .resizer.resizing {\n    border-right: 4px double var(--nile-colors-neutral-400);\n    background-color: transparent;\n    opacity: 1;\n  }\n`;\n\nexport const resizableSlotStyles = css`\n  /* Slot styles for resizable mode */\n  :host([resizable]) ::slotted(*) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: block;\n  }\n\n  :host([resizable]) ::slotted(span),\n  :host([resizable]) ::slotted(div),\n  :host([resizable]) ::slotted(p) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: block;\n  }\n`;\n\nexport const tableLayoutStyles = css`\n  /* Apply fixed table layout only when resizable columns are present */\n  .nile__table__body[resizable] {\n    table-layout: fixed;\n  }\n`; \n"]}

package/dist/src/nile-badge/__snapshots__/nile-badge.test.snap.js

@@ -0,0 +1,17 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["NileBadge should display the default slot content"] = 
+`<span
+  class="badge badge--badge-color badge--normal"
+  part="base"
+>
+  <slot
+    class="badge__content"
+    part="content"
+  >
+  </slot>
+</span>
+`;
+/* end snapshot NileBadge should display the default slot content */
+

package/dist/src/nile-calendar/__snapshots__/nile-calendar.test.snap.js

@@ -0,0 +1,310 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["NileCalendar renders correctly with default properties"] = 
+`<div class="base">
+  <div class="calendar-config hidden">
+    <div class="calendar-switcher">
+      <nile-tab-group
+        centered=""
+        value="absolute"
+      >
+        <nile-tab
+          active=""
+          aria-disabled="false"
+          aria-selected="true"
+          centered=""
+          id="nile-tab-1"
+          panel="absolute"
+          role="tab"
+          slot="nav"
+        >
+          Absolute
+        </nile-tab>
+        <nile-tab
+          aria-disabled="false"
+          aria-selected="false"
+          centered=""
+          id="nile-tab-2"
+          panel="relative"
+          role="tab"
+          slot="nav"
+        >
+          Relative
+        </nile-tab>
+      </nile-tab-group>
+    </div>
+  </div>
+  <div class="calendar-wrapper">
+    <div class="calendar-container">
+      <div class="calendar">
+        <div class="calendar-header">
+          <nile-icon
+            class="calendar-header__month-navigation"
+            color="black"
+            description=""
+            method="fill"
+            name="arrowleft"
+            set="local"
+            size="16"
+            style="--nile-svg-fill: black; --nile-svg-height: 16px; --nile-svg-width: 16px;"
+          >
+          </nile-icon>
+          <span>
+            August
+            2025
+          </span>
+          <nile-icon
+            class="calendar-header__month-navigation"
+            color="black"
+            description=""
+            method="fill"
+            name="arrowright"
+            set="local"
+            size="16"
+            style="--nile-svg-fill: black; --nile-svg-height: 16px; --nile-svg-width: 16px;"
+          >
+          </nile-icon>
+        </div>
+        <div class="days_container">
+          <div class="day_name">
+            Su
+          </div>
+          <div class="day_name">
+            Mo
+          </div>
+          <div class="day_name">
+            Tu
+          </div>
+          <div class="day_name">
+            We
+          </div>
+          <div class="day_name">
+            Th
+          </div>
+          <div class="day_name">
+            Fr
+          </div>
+          <div class="day_name">
+            Sa
+          </div>
+          <div class="day_date filler">
+            <span style="position:relative;">
+              27
+            </span>
+          </div>
+          <div class="day_date filler">
+            <span style="position:relative;">
+              28
+            </span>
+          </div>
+          <div class="day_date filler">
+            <span style="position:relative;">
+              29
+            </span>
+          </div>
+          <div class="day_date filler">
+            <span style="position:relative;">
+              30
+            </span>
+          </div>
+          <div class="day_date filler">
+            <span style="position:relative;">
+              31
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              1
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              2
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              3
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              4
+              <div class="current__date__dot">
+              </div>
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              5
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              6
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              7
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              8
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              9
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              10
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              11
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              12
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              13
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              14
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              15
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              16
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              17
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              18
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              19
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              20
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              21
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              22
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              23
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              24
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              25
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              26
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              27
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              28
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              29
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              30
+            </span>
+          </div>
+          <div class="day_date">
+            <span style="position:relative;">
+              31
+            </span>
+          </div>
+          <div class="day_date filler">
+            <span style="position:relative;">
+              1
+            </span>
+          </div>
+          <div class="day_date filler">
+            <span style="position:relative;">
+              2
+            </span>
+          </div>
+          <div class="day_date filler">
+            <span style="position:relative;">
+              3
+            </span>
+          </div>
+          <div class="day_date filler">
+            <span style="position:relative;">
+              4
+            </span>
+          </div>
+          <div class="day_date filler">
+            <span style="position:relative;">
+              5
+            </span>
+          </div>
+          <div class="day_date filler">
+            <span style="position:relative;">
+              6
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+/* end snapshot NileCalendar renders correctly with default properties */
+

package/dist/src/nile-card/__snapshots__/nile-card.test.snap.js

@@ -0,0 +1,34 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["Nile Card should render the card properly"] = 
+`<div
+  class="card card--has-footer"
+  part="base"
+>
+  <div
+    class="body__wrapper"
+    part="body__wrapper"
+  >
+    <slot
+      class="card__header"
+      name="header"
+      part="header"
+    >
+    </slot>
+    <slot
+      class="card__body"
+      part="body"
+    >
+    </slot>
+  </div>
+  <slot
+    class="card__footer"
+    name="footer"
+    part="footer"
+  >
+  </slot>
+</div>
+`;
+/* end snapshot Nile Card should render the card properly */
+

package/dist/src/nile-checkbox/__snapshots__/nile-checkbox.test.snap.js

@@ -0,0 +1,31 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["NileCheckbox renders correctly with default properties"] = 
+`<label
+  class="checkbox checkbox--medium"
+  part="base"
+>
+  <input
+    aria-checked="false"
+    class="checkbox__input"
+    name=""
+    title=""
+    type="checkbox"
+  >
+  <span
+    class="checkbox__control"
+    part="control"
+  >
+  </span>
+  <div
+    class="checkbox__label"
+    part="label"
+  >
+    <slot>
+    </slot>
+  </div>
+</label>
+`;
+/* end snapshot NileCheckbox renders correctly with default properties */
+

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

@@ -41,10 +41,11 @@ export declare class NileCodeEditor extends NileElement {
     debounceTimeout: number;
     aboveCursor: boolean;
     tabCompletion: boolean;
-    monospaceFontFamily: boolean;
+    defaultFont: boolean;
     view: EditorView;
     viewState: EditorState;
     private timeOut;
+    private isSpacePressed;
     private lineNumbersComp;
     private restrictSingleLineComp;
     private readOnlyComp;
@@ -64,6 +65,8 @@ export declare class NileCodeEditor extends NileElement {
     protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     render(): TemplateResult;
     createNewView(emitEvent?: boolean): void;
+    checkForSpaceKey(e: KeyboardEvent): void;
+    handleEscapeKey(e: KeyboardEvent): void;
     createState(): EditorState;
     /**
      * Custom autocomplete handler for code editor suggestions

package/dist/src/nile-code-editor/nile-code-editor.js

@@ -58,8 +58,9 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
         this.debounceTimeout = 200;
         this.aboveCursor = false;
         this.tabCompletion = true;
-        this.monospaceFontFamily = false;
+        this.defaultFont = false;
         this.timeOut = null;
+        this.isSpacePressed = false;
         // Compartments for initialiazing and switching extensions
         this.lineNumbersComp = new Compartment();
         this.restrictSingleLineComp = new Compartment();
@@ -227,15 +228,27 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
             parent: this.codeEditor
         });
         this.view.dom.addEventListener('keydown', (e) => {
-            if (e.key === 'Escape' && this.view && completionStatus(this.view.state) !== null) {
-                e.stopPropagation();
-                e.preventDefault();
-                closeCompletion(this.view);
-            }
+            this.checkForSpaceKey(e);
+            this.handleEscapeKey(e);
         }, true);
         if (emitEvent)
             this.emit('nile-after-update', { createNewView: this.createNewView, codeMirrorInstance: this.view, }, false);
     }
+    checkForSpaceKey(e) {
+        if (e.code === 'Space' && !e.ctrlKey) {
+            this.isSpacePressed = true;
+        }
+        else {
+            this.isSpacePressed = false;
+        }
+    }
+    handleEscapeKey(e) {
+        if (e.key === 'Escape' && this.view && completionStatus(this.view.state) !== null) {
+            e.stopPropagation();
+            e.preventDefault();
+            closeCompletion(this.view);
+        }
+    }
     createState() {
         const lineNumbersExtension = this.lineNumbersComp.of(this.getLineNumbersExension());
         const readOnlyExtension = this.readOnlyComp.of(this.getReadOnlyExtension());
@@ -329,7 +342,7 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
         const baseMatch = textBeforeCursor.match(/([a-zA-Z_$][\w$]*)$/);
         if (!baseMatch) {
             const trimmedText = textBeforeCursor.trim();
-            if (trimmedText === '') {
+            if (trimmedText === '' && !this.isSpacePressed) {
                 const optionsList = Object.keys(this.customAutoCompletions).filter(key => Object.keys(this.customAutoCompletions[key]).length);
                 const options = optionsList.map((key) => ({
                     label: key,
@@ -433,12 +446,12 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
     }
     getCustomThemeExtension() {
         if (this.customThemeCSS) {
-            if (this.monospaceFontFamily) {
+            if (this.defaultFont) {
                 return [EditorView.theme(this.customThemeCSS), EditorView.theme(customisedThemeCss), EditorView.theme(fontFamily)];
             }
             return [EditorView.theme(this.customThemeCSS), EditorView.theme(customisedThemeCss)];
         }
-        if (this.monospaceFontFamily) {
+        if (this.defaultFont) {
             return [EditorView.theme(customisedThemeCss), EditorView.theme(fontFamily)];
         }
         return [EditorView.theme(customisedThemeCss)];
@@ -524,7 +537,7 @@ __decorate([
 ], NileCodeEditor.prototype, "tabCompletion", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: true })
-], NileCodeEditor.prototype, "monospaceFontFamily", void 0);
+], NileCodeEditor.prototype, "defaultFont", void 0);
 NileCodeEditor = __decorate([
     customElement('nile-code-editor')
 ], NileCodeEditor);