npm - @aquera/nile-elements - Versions diffs - 1.2.7-beta-1.9 → 1.2.7-beta-2.0 - Mend

@aquera/nile-elements 1.2.7-beta-1.9 → 1.2.7-beta-2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (618) hide show

package/demo/index.css CHANGED Viewed

@@ -1,4 +1,5 @@
 body {
+  font-family: var(--ng-font-family-body);
   justify-content: center;
   align-items: center;
   display: flex;
@@ -42,16 +43,32 @@ body {
   width:100%;
   word-wrap: break-word;
 }
+/*
 @font-face {
-  font-family: "colfax-regular";
-  src: url("https://assets.aquera.io/font/Colfax-Regular.otf")
-    format("opentype");
+  font-family: 'colfax-regular';
+  src: url('https://use.typekit.net/af/bac079/00000000000000003b9acde4/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/bac079/00000000000000003b9acde4/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/bac079/00000000000000003b9acde4/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3')
+      format('opentype');
   font-display: auto;
   font-style: normal;
-  font-weight: 400;
+  font-weight: normal;
 }
+@font-face {
+  font-family: 'colfax-regular';
+  src: url('https://use.typekit.net/af/522c51/00000000000000003b9acde6/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/522c51/00000000000000003b9acde6/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/522c51/00000000000000003b9acde6/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3')
+      format('opentype');
+  font-display: auto;
+  font-style: normal;
+  font-weight: bold;
+} */
 .stack {
   display: flex;

package/demo/index.html CHANGED Viewed

@@ -5,373 +5,53 @@
     <!-- <link rel="stylesheet" href="nxtgen.css" id="stylesheet" /> -->
     <link rel="stylesheet" href="variables.css" id="stylesheet" />
     <link rel="stylesheet" href="index.css" />
-    <script>
-      window.process = window.process || { env: { NODE_ENV: 'production' } };
-    </script>
-    <script type="module" src="index.js"></script>
     <style>
     </style>
+    <script type="module" src="index.js"></script>
   </head>
-  <body style="display: flex; flex-direction: column; gap: 2rem; height: 100%; width: 100vw; overflow: auto; font-family: var(--nile-font-family-sans-serif);">
+  <body>
-    <h1>🧪 Nile lite Tooltip – Prop Showcase</h1>
-    <!-- 1️⃣ Basic Content & Placement -->
-    <section>
-      <h2>Placement</h2>
-      <p>Use the <code>placement</code> attribute to set the preferred placement of the tooltip.</p>
-      <div class="placement-demo">
-        <!-- Top Row -->
-        <button id="top-start">top-start</button>
-        <button id="top">top</button>
-        <button id="top-end">top-end</button>
-        <!-- Left Column -->
-        <button id="left-start">left-start</button>
-        <button id="left">left</button>
-        <button id="left-end">left-end</button>
-        <!-- Right Column -->
-        <button id="right-start">right-start</button>
-        <button id="right">right</button>
-        <button id="right-end">right-end</button>
-        <!-- Bottom Row -->
-        <button id="bottom-start">bottom-start</button>
-        <button id="bottom">bottom</button>
-        <button id="bottom-end">bottom-end</button>
-        <!-- Tooltips -->
-        <nile-lite-tooltip for="top-start" content="top-start" placement="top-start"></nile-lite-tooltip>
-        <nile-lite-tooltip for="top" content="top" placement="top"></nile-lite-tooltip>
-        <nile-lite-tooltip for="top-end" content="top-end" placement="top-end"></nile-lite-tooltip>
-        <nile-lite-tooltip for="left-start" content="left-start" placement="left-start"></nile-lite-tooltip>
-        <nile-lite-tooltip for="left" content="left" placement="left"></nile-lite-tooltip>
-        <nile-lite-tooltip for="left-end" content="left-end" placement="left-end"></nile-lite-tooltip>
-        <nile-lite-tooltip for="right-start" content="right-start" placement="right-start"></nile-lite-tooltip>
-        <nile-lite-tooltip for="right" content="right" placement="right"></nile-lite-tooltip>
-        <nile-lite-tooltip for="right-end" content="right-end" placement="right-end"></nile-lite-tooltip>
-        <nile-lite-tooltip for="bottom-start" content="bottom-start element and content" placement="bottom-start"></nile-lite-tooltip>
-        <nile-lite-tooltip for="bottom" content="bottom" placement="bottom"></nile-lite-tooltip>
-        <nile-lite-tooltip for="bottom-end" content="bottom-end" placement="bottom-end"></nile-lite-tooltip>
-      </div>
-      <style>
-        .placement-demo {
-          position: relative;
-          display: grid;
-          grid-template-columns: repeat(5, 80px);
-          grid-template-rows: repeat(5, 60px);
-          justify-content: center;
-          align-items: center;
-          gap: 8px;
-          margin-top: 2rem;
-        }
-        .placement-demo button {
-          border: 1px solid #ccc;
-          background: #fff;
-          border-radius: 6px;
-          cursor: pointer;
-          padding: 6px 8px;
-          font-size: 12px;
-          transition: all 0.2s ease;
-        }
-        .placement-demo button:hover {
-          background: #eef6ff;
-          border-color: #90caf9;
-        }
-        /* Position buttons visually in grid */
-        #top-start { grid-column: 2; grid-row: 1; }
-        #top { grid-column: 3; grid-row: 1; }
-        #top-end { grid-column: 4; grid-row: 1; }
-        #left-start { grid-column: 1; grid-row: 2; }
-        #left { grid-column: 1; grid-row: 3; }
-        #left-end { grid-column: 1; grid-row: 4; }
-        #right-start { grid-column: 5; grid-row: 2; }
-        #right { grid-column: 5; grid-row: 3; }
-        #right-end { grid-column: 5; grid-row: 4; }
-        #bottom-start { grid-column: 2; grid-row: 5; }
-        #bottom { grid-column: 3; grid-row: 5; }
-        #bottom-end { grid-column: 4; grid-row: 5; }
-      </style>
-    </section>
-    <!-- 2️⃣ Size Variants -->
-    <section>
-      <h2>size: small vs large</h2>
-      <button id="small-btn">Small tooltip</button>
-      <nile-lite-tooltip  for="small-btn" id="small-tooltip" content="This is a small tooltip." size="small"   interactive intertia></nile-lite-tooltip>
-      <button id="large-btn">Large tooltip</button>
-      <nile-lite-tooltip  for="large-btn" id="large-tooltip" content="This is a larger tooltip for longer content that wraps nicely." size="large"  ></nile-lite-tooltip>
-    </section>
-    <!-- 3️⃣ Distance & Skidding -->
-    <section>
-      <h2>distance & skidding</h2>
-      <button id="offset-btn">Offset Tooltip</button>
-      <nile-lite-tooltip
-        for="offset-btn"
-        content="Distance = 16px, Skidding = 20px"
-        distance="16"
-        skidding="20"
-        placement="top"
-      ></nile-lite-tooltip>
-    </section>
-    <!-- 4️⃣ Disabled -->
-    <section>
-      <h2>disabled</h2>
-      <button id="disabled-btn">Disabled Tooltip</button>
-      <nile-lite-tooltip for="disabled-btn" content="You should not see this." disabled></nile-lite-tooltip>
-    </section>
-    <!-- 5️⃣ Trigger Variants -->
-    <section>
-      <h2>trigger</h2>
-      <button id="hover-btn">Hover (default)</button>
-      <nile-lite-tooltip for="hover-btn" content="Triggered by hover"></nile-lite-tooltip>
-      <button id="click-btn">Click</button>
-      <nile-lite-tooltip for="click-btn" content="This is a tooltip with click trigger" trigger="click"></nile-lite-tooltip>
-      <button id="focus-btn">Focus</button>
-      <nile-lite-tooltip for="focus-btn" content="Triggered by focus" trigger="focus"></nile-lite-tooltip>
-      <button id="manual-btn">Manual (open programmatically)</button>
-      <nile-lite-tooltip for="manual-btn" content="Controlled manually" trigger="manual" id="manual-tooltip"></nile-lite-tooltip>
-    </section>
-    <button id="controlled-btn">Controlled Tooltip</button>
-    <nile-lite-tooltip
-      for="controlled-btn"
-      id="controlled-tooltip"
-      content="This tooltip is controlled via JS"
-      trigger="manual"
-      open="false"
-    ></nile-lite-tooltip>
-    <button id="open-btn">Show Tooltip</button>
-    <button id="close-btn">Hide Tooltip</button>
-    <script>
-      const tooltip = document.querySelector('#controlled-tooltip');
-      document.querySelector('#open-btn').addEventListener('click', () => (tooltip.open = true));
-      document.querySelector('#close-btn').addEventListener('click', () => (tooltip.open = false));
-    </script>
-    <!-- 7️⃣ Hoisted Tooltip -->
-    <section>
-      <h2>hoist</h2>
-      <div style="position: relative; overflow: hidden; width: 200px; height: 100px; border: 1px dashed #aaa;">
-        <button id="hoisted-btn" style="position: absolute; bottom: 10px; left: 50px;">Hover me</button>
-        <nile-lite-tooltip
-          for="hoisted-btn"
-           allowHTML
-           content="<strong>Bold text</strong> and <em>italic</em> content that can go out"
-   hoist
-        ></nile-lite-tooltip>
-      </div>
-    </section>
-    <!-- 8️⃣ Wrapper Mode -->
-      <section>
-        <h2>Wrapper mode</h2>
-        <nile-lite-tooltip content="I’m applied to this wrapped button directly.">
-          <button>Hover me (wrapped)</button>
-        </nile-lite-tooltip>
-      </section>
-    <!-- 9️⃣ Round Arrow -->
-    <section>
-      <h2>round arrow</h2>
-      <button id="round-arrow-btn">Round Arrow</button>
-      <nile-lite-tooltip for="round-arrow-btn" content="Round Arrow" roundArrow></nile-lite-tooltip>
-    </section>
-    <!-- 10️⃣ Follow Cursor -->
-    <section>
-      <h2>follow cursor</h2>
-      <button id="follow-cursor-btn">Follow Cursor</button>
-      <nile-lite-tooltip for="follow-cursor-btn" content="Follow Cursor" followCursor="true"></nile-lite-tooltip>
-      <button id="follow-cursor-horizontal-btn">Follow Cursor Horizontal</button>
-      <nile-lite-tooltip for="follow-cursor-horizontal-btn" content="Follow Cursor Horizontal" followCursor="horizontal"></nile-lite-tooltip>
-      <button id="follow-cursor-vertical-btn">Follow Cursor Vertical</button>
-      <nile-lite-tooltip for="follow-cursor-vertical-btn" content="Follow Cursor Vertical" followCursor="vertical"></nile-lite-tooltip>
-      <button id="follow-cursor-initial-btn">Follow Cursor Initial</button>
-      <nile-lite-tooltip for="follow-cursor-initial-btn" content="Follow Cursor Initial" followCursor="initial"></nile-lite-tooltip>
-    </section>
-    <!-- 11️⃣ Duration -->
-    <section>
-      <h2>duration</h2>
-      <button id="duration-btn">Duration</button>
-      <nile-lite-tooltip for="duration-btn" content="Duration" duration="1000"></nile-lite-tooltip>
-      <button id="duration-show-hide-btn">Duration Show Hide</button>
-      <nile-lite-tooltip for="duration-show-hide-btn" content="Duration Show Hide" duration="1000,500"></nile-lite-tooltip>
-      <button id="duration-string-btn">Duration String</button>
-      <nile-lite-tooltip for="duration-string-btn" content="Duration String" duration="1s,500ms"></nile-lite-tooltip>
-    </section>
-    <nile-lite-tooltip content="Duration String"  followCursor="initial">
-    <svg height="100" width="100"><line x1="0" y1="0" x2="150" y2="150" style="stroke: tomato; stroke-width: 5;"></line></svg>
-  </nile-lite-tooltip>
-  <nile-lite-tooltip singleton size="large">
-    <button data-tippy-content="Tooltip for Button A">Button A</button>
-    <button data-tippy-content="Tooltip for Button B">Button B</button>
-    <button data-tippy-content="Tooltip for Button C">Button C</button>
-  </nile-lite-tooltip>
-  <nile-select class="virtual-scroll-string" placeholder="Please Select" searchEnabled="true" enableVirtualScroll="true">
-  </nile-select>
-  <script>
-    const optionsString = Array.from({ length: 100000 }, (_, i) => `Option This is a larger tooltip for longer content that wraps nicely  ${i + 1}`);
-    const basicString = document.querySelector('nile-select.virtual-scroll-string');
-    basicString.data = optionsString;
-  </script>
- <br><br>
-<nile-icon name="user" id="test-button"> Button</nile-icon>
-<nile-lite-tooltip for="test-button" content="Tooltip" open></nile-lite-tooltip>
-    <script>
-      const manualTooltip = document.querySelector('#manual-tooltip');
-      const manualBtn = document.querySelector('#manual-btn');
-      manualBtn.addEventListener('click', () => {
-        manualTooltip.content = 'This is a manual tooltip. <b>Hello</b>';
-        manualTooltip.open = !manualTooltip.open;
-      });
-      manualTooltip.addEventListener('nile-show', (e) => {
-        console.log('nile-show', e);
-      });
-      manualTooltip.addEventListener('nile-hide', (e) => {
-        console.log('nile-hide', e);
-      });
-      manualTooltip.addEventListener('nile-toggle', (e) => {
-        console.log('nile-toggle', e);
-      });
-      manualTooltip.addEventListener('nile-open', (e) => {
-        console.log('nile-open', e);
-      });
-      manualTooltip.addEventListener('nile-close', (e) => {
-        console.log('nile-close', e);
-      });
-      manualTooltip.addEventListener('nile-toggle', (e) => {
-        console.log('nile-toggle', e);
-      });
-    </script>
-<nile-lite-tooltip singleton placement="top">
-  <button content="Home">🏠</button>
-  <button content="Settings">⚙️</button>
-  <button content="Help">❓</button>
-</nile-lite-tooltip>
-<button id="manual-btn1">Manual trigger button</button>
-<nile-lite-tooltip
-  id="manual-tip"
-  for="manual-btn1"
-  open
-  allowHTML
-  interactive
-  trigger="manual"
-  content='This tooltip stays open until you close it manually!
-           '
-></nile-lite-tooltip>
-<button id="close-tip" style="margin-left:8px;">×</button>
-<script>
-  const manualTip = document.querySelector('#manual-tip');
-  const closeTip = document.querySelector('#close-tip');
-  closeTip.addEventListener('click', () => {
-    manualTip.open = false;
-  });
-</script>
-<button id="click-btn1">Click me</button>
-<nile-lite-tooltip
-  for="click-btn1"
-  trigger="click"
-  content="Click again to close!"
-></nile-lite-tooltip>
-<button id="focus-btn1">Focus me (Tab + Enter)</button>
-<nile-lite-tooltip
-  for="focus-btn1"
-  trigger="focus"
-  content="This tooltip appears when focused!"
-></nile-lite-tooltip>
-<button id="hover-btn1">Hover me</button>
-<nile-lite-tooltip
-  for="hover-btn1"
-  trigger="mouseenter"
-  content="This tooltip appears when you hover!"
-></nile-lite-tooltip>
-<button id="btn11">Hover 1</button>
-<nile-lite-tooltip for="btn11" content="Tooltip 1"></nile-lite-tooltip>
-<button id="btn222">Hover 2</button>
-<nile-lite-tooltip for="btn222" content="Tooltip 2"></nile-lite-tooltip>
+  <!-- nile-virtual-select examples -->
+  <div style="max-width: 400px; margin: 20px 0;">
+    <h3>Virtual Select Examples</h3>
+    <!-- Basic single select -->
+    <nile-virtual-select
+      id="basic-select"
+      label="Select a country"
+      placeholder="Choose a country..."
+      clearable
+      help-text="Select your country from the list"
+    ></nile-virtual-select>
+    <br><br>
+    <!-- Multi-select with search -->
+    <nile-virtual-select
+      id="multi-select"
+      label="Select technologies (multiple)"
+      placeholder="Choose technologies..."
+      multiple
+      search-enabled
+      clearable
+      help-text="Select multiple technologies"
+    ></nile-virtual-select>
+    <br><br>
+    <!-- Large dataset example -->
+    <nile-virtual-select
+      id="large-select"
+      label="Select from large dataset"
+      placeholder="Search and select..."
+      search-enabled
+      clearable
+      size="medium"
+    ></nile-virtual-select>
+  </div>
   </body>
-</html>
+</html>

package/demo/index.js CHANGED Viewed

@@ -69,3 +69,78 @@ function renderNewIcons(icons) {
 }
 w.addEventListener('message', getMessage);
+// nile-virtual-select examples
+document.addEventListener('DOMContentLoaded', () => {
+  // Basic select data
+  const countries = [
+    { label: 'United States', value: 'us' },
+    { label: 'United Kingdom', value: 'uk' },
+    { label: 'Canada', value: 'ca' },
+    { label: 'Australia', value: 'au' },
+    { label: 'Germany', value: 'de' },
+    { label: 'France', value: 'fr' },
+    { label: 'Italy', value: 'it' },
+    { label: 'Spain', value: 'es' },
+    { label: 'Japan', value: 'jp' },
+    { label: 'China', value: 'cn' },
+    { label: 'India', value: 'in' },
+    { label: 'Brazil', value: 'br' },
+  ];
+  // Technologies for multi-select
+  const technologies = [
+    { label: 'React', value: 'react' },
+    { label: 'Angular', value: 'angular' },
+    { label: 'Vue', value: 'vue' },
+    { label: 'Svelte', value: 'svelte' },
+    { label: 'Next.js', value: 'nextjs' },
+    { label: 'Nuxt', value: 'nuxt' },
+    { label: 'TypeScript', value: 'typescript' },
+    { label: 'JavaScript', value: 'javascript' },
+    { label: 'Node.js', value: 'nodejs' },
+    { label: 'Python', value: 'python' },
+    { label: 'Java', value: 'java' },
+    { label: 'Go', value: 'go' },
+    { label: 'Rust', value: 'rust' },
+    { label: 'C++', value: 'cpp' },
+    { label: 'C#', value: 'csharp' },
+  ];
+  // Large dataset (1000 items)
+  const largeDataset = Array.from({ length: 1000 }, (_, i) => ({
+    label: `Item ${i + 1}`,
+    value: `item-${i + 1}`,
+  }));
+  // Setup basic select
+  const basicSelect = document.querySelector('#basic-select');
+  if (basicSelect) {
+    basicSelect.data = countries;
+    basicSelect.addEventListener('nile-change', (e) => {
+      console.log('Basic select changed:', e.detail);
+    });
+  }
+  // Setup multi-select
+  const multiSelect = document.querySelector('#multi-select');
+  if (multiSelect) {
+    multiSelect.data = technologies;
+    multiSelect.addEventListener('nile-change', (e) => {
+      console.log('Multi-select changed:', e.detail);
+    });
+    multiSelect.addEventListener('nile-search', (e) => {
+      console.log('Search query:', e.detail.query);
+    });
+  }
+  // Setup large dataset select
+  const largeSelect = document.querySelector('#large-select');
+  if (largeSelect) {
+    largeSelect.data = largeDataset;
+    largeSelect.addEventListener('nile-scroll-end', (e) => {
+      console.log('Scrolled to end:', e.detail);
+      // Here you could load more data if needed
+    });
+  }
+});

package/demo/nxtgen.css CHANGED Viewed

@@ -454,6 +454,7 @@
   --ng-colors-border-secondary: var(--ng-color-graylightmode-200);
   --ng-colors-border-secondary-alt: #00000014;
   --ng-colors-border-tertiary: var(--ng-color-graylightmode-100);
+  --ng-colors-border-neutral: var(--ng-color-graylightmode-400);
   --ng-colors-border-disabled: var(--ng-color-graylightmode-300);
   --ng-colors-border-disabled-subtle: var(--ng-color-graylightmode-200);
   --ng-colors-border-brand: var(--ng-color-bluedark-500);

package/demo/variables.css CHANGED Viewed

@@ -318,7 +318,7 @@
   --nile-colors-green-400: #A5F3E1;
   --nile-colors-green-100: #F6FEFC;
   --nile-colors-dark-900: #000000;
-  --nile-colors-dark-500: #636363;
+  --nile-colors-dark-500: #7F7F7F;
   --nile-colors-dark-200: #F5F7F7;
   --nile-colors-dark-100: rgba(0, 0, 0, 0.1);
   --nile-colors-blue-700: #1978B8;