@aquera/nile-elements 0.1.70-beta-1.0 → 0.1.70-beta-1.2

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,6 +41,7 @@ export declare class NileCodeEditor extends NileElement {
     debounceTimeout: number;
     aboveCursor: boolean;
     tabCompletion: boolean;
+    defaultFont: boolean;
     view: EditorView;
     viewState: EditorState;
     private timeOut;
@@ -51,6 +52,7 @@ export declare class NileCodeEditor extends NileElement {
     private placeholderComp;
     private defaultSyntaxHighlightingComp;
     private themeComp;
+    private autoCompletionComp;
     private isSpacePressed;
     /**
      * The styles for CodeEditor

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

@@ -17,13 +17,12 @@ import { javascript, javascriptLanguage, } from '@codemirror/lang-javascript';
 import { sql } from '@codemirror/lang-sql';
 import { json } from '@codemirror/lang-json';
 import { html as htmlLang } from '@codemirror/lang-html';
-import { autocompletion, closeCompletion, completionStatus } from '@codemirror/autocomplete';
+import { autocompletion, acceptCompletion, closeCompletion, completionStatus } from '@codemirror/autocomplete';
 import NileElement from '../internal/nile-element';
 import { basicSetup } from './extensionSetup';
 import { classMap } from 'lit/directives/class-map.js';
-import { Theme as DefaultTheme, customisedThemeCss } from './theme';
+import { customisedThemeCss, fontFamily } from './theme';
 import { keymap } from '@codemirror/view';
-import { acceptCompletion } from '@codemirror/autocomplete';
 // Choose the appropriate mode for your use case
 /**
  * Nile icon component.
@@ -58,6 +57,7 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
         this.debounceTimeout = 200;
         this.aboveCursor = false;
         this.tabCompletion = true;
+        this.defaultFont = false;
         this.timeOut = null;
         // Compartments for initialiazing and switching extensions
         this.lineNumbersComp = new Compartment();
@@ -67,6 +67,7 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
         this.placeholderComp = new Compartment();
         this.defaultSyntaxHighlightingComp = new Compartment();
         this.themeComp = new Compartment();
+        this.autoCompletionComp = new Compartment();
         this.isSpacePressed = false;
         /**
          * Custom autocomplete handler for code editor suggestions
@@ -146,6 +147,13 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
                 ]
             });
         }
+        if (changedProperties.has('aboveCursor')) {
+            this.view.dispatch({
+                effects: [
+                    this.autoCompletionComp.reconfigure(autocompletion({ aboveCursor: this.aboveCursor }))
+                ]
+            });
+        }
         if (changedProperties.has('placeholder')) {
             this.view.dispatch({
                 effects: [
@@ -273,7 +281,7 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
                 customAutoCompletions,
                 placeholderExtension,
                 defaultSyntaxHighlightingExtension,
-                autocompletion({ aboveCursor: this.aboveCursor }),
+                this.autoCompletionComp.of(autocompletion({ aboveCursor: this.aboveCursor })),
                 language,
                 customThemeExtension,
                 this.getTabCompletionKeymap(),
@@ -445,9 +453,15 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
     }
     getCustomThemeExtension() {
         if (this.customThemeCSS) {
+            if (this.defaultFont) {
+                return [EditorView.theme(this.customThemeCSS), EditorView.theme(customisedThemeCss), EditorView.theme(fontFamily)];
+            }
             return [EditorView.theme(this.customThemeCSS), EditorView.theme(customisedThemeCss)];
         }
-        return [EditorView.theme(customisedThemeCss), EditorView.theme(DefaultTheme)];
+        if (this.defaultFont) {
+            return [EditorView.theme(customisedThemeCss), EditorView.theme(fontFamily)];
+        }
+        return [EditorView.theme(customisedThemeCss)];
     }
     restrictSingleLine() {
         return EditorState.transactionFilter.of(tr => tr.newDoc.lines > 1 ? [] : tr);
@@ -528,6 +542,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true, attribute: true })
 ], NileCodeEditor.prototype, "tabCompletion", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: true })
+], NileCodeEditor.prototype, "defaultFont", void 0);
 NileCodeEditor = __decorate([
     customElement('nile-code-editor')
 ], NileCodeEditor);