@aquera/nile-elements 1.3.3-beta-1.3 → 1.3.3-beta-1.4

package/.editorconfig

@@ -0,0 +1,29 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.json]
+indent_size = 2
+
+[*.{html,js,md}]
+block_comment_start = /**
+block_comment = *
+block_comment_end = */

package/.nycrc

@@ -0,0 +1,17 @@
+{
+  "extends": "@istanbuljs/nyc-config-browserify",
+  "all": true,
+  "include": ["dist/src/**/*.js"],
+  "exclude": [
+    "dist/src/**/*.test.js",
+    "dist/src/**/test-helpers/**",
+    "dist/src/**/__mocks__/**",
+    "node_modules/**"
+  ],
+  "reporter": ["html", "text-summary"],
+  "check-coverage": true,
+  "statements": 100,
+  "branches": 100,
+  "functions": 100,
+  "lines": 100
+}

package/.storybook/main.js

@@ -0,0 +1,3 @@
+module.exports = {
+  stories: ['../dist/stories/**/*.stories.{js,md,mdx}'],
+};

package/.storybook/server.mjs

@@ -0,0 +1,8 @@
+import { storybookPlugin } from '@web/dev-server-storybook';
+import baseConfig from '../web-dev-server.config.mjs';
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  ...baseConfig,
+  open: '/',
+  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
+});

package/demo/fetchTextFromFileWorker.js

@@ -0,0 +1,10 @@
+
+
+self.onmessage = (msg) =>{
+  fetch(msg.data).then((txt)=>{
+    return txt.text()
+  }).then((text)=>{
+    self.postMessage(text)
+  })
+}
+

package/demo/index.css

@@ -0,0 +1,202 @@
+body {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100vh;
+}
+
+
+ 
+
+#demo {
+  max-width: 40ch;
+  padding: 48px;
+}
+.pad {
+  padding: 32px;
+}
+.heading {
+  padding-left: 1.5rem;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  border-bottom: solid 1px #ddd;
+  font-weight: 600;
+}
+
+#new-icons{
+  display:grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+}
+#new-icons div {
+  width:8rem;
+  cursor: pointer;
+  padding:1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border:1px solid grey;
+
+}
+
+#new-icons div > small{
+  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-display: auto;
+  font-style: normal;
+  font-weight: 400;
+}
+
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.stack--hor {
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+}
+
+.hstack {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-self: stretch;
+}
+
+.vstack {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-self: stretch;
+}
+
+nile-drawer {
+  display: flex;
+  flex-direction: column;
+}
+
+[slot='footer'] {
+  padding-top: 0;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.nds-help {
+  font-size: 12px;
+}
+
+.frame-left-lg {
+  padding-left: 4rem;
+}
+
+.body {
+  display: flex;
+}
+
+
+nile-input:not(:defined),
+nile-button:not(:defined),
+nile-icon:not(:defined),
+nile-icon-button:not(:defined),
+nile-tree:not(:defined),
+nile-table:not(:defined),
+nile-sidebar-menu:not(:defined),
+nile-filter-chip:not(:defined),
+nile-radio-group:not(:defined),
+nile-popover:not(:defined),
+nile-option:not(:defined),
+nile-sidebar-wrapper:not(:defined),
+nile-card:not(:defined),
+nile-table-body:not(:defined),
+nile-list-item:not(:defined),
+nile-tab-group:not(:defined),
+nile-vertical-stepper-item:not(:defined),
+nile-tab:not(:defined),
+nile-content-editor:not(:defined),
+nile-tab-panel:not(:defined),
+nile-drawer:not(:defined),
+nile-error-notification:not(:defined),
+nile-menu-item:not(:defined),
+nile-divider:not(:defined),
+nile-date-picker:not(:defined),
+nile-footer:not(:defined),
+nile-chip:not(:defined),
+nile-slide-toggle:not(:defined),
+nile-progress-bar:not(:defined),
+nile-auto-complete:not(:defined),
+nile-tree-item:not(:defined),
+nile-form-help-text:not(:defined),
+nile-sidebar-menu-items:not(:defined),
+nile-section-message:not(:defined),
+nile-table-row:not(:defined),
+nile-badge:not(:defined),
+nile-file-upload:not(:defined),
+nile-textarea:not(:defined),
+nile-checkbox:not(:defined),
+nile-page-header:not(:defined),
+nile-file-preview:not(:defined),
+nile-tooltip:not(:defined),
+nile-inline-edit:not(:defined),
+nile-circular-progressbar:not(:defined),
+nile-breadcrumb:not(:defined),
+nile-sidebar:not(:defined),
+nile-table-header-item:not(:defined),
+nile-popup:not(:defined),
+nile-link:not(:defined),
+nile-button-toggle-group:not(:defined),
+nile-stepper-item:not(:defined),
+nile-select:not(:defined),
+nile-button-filter:not(:defined),
+nile-empty-state:not(:defined),
+nile-tag:not(:defined),
+nile-table-cell-item:not(:defined),
+nile-radio:not(:defined),
+nile-breadcrumb-item:not(:defined),
+nile-list:not(:defined),
+nile-menu:not(:defined),
+nile-title:not(:defined),
+nile-heading:not(:defined),
+nile-code-editor:not(:defined),
+nile-toast:not(:defined),
+nile-toolbar:not(:defined),
+nile-calendar:not(:defined),
+nile-accordion:not(:defined),
+nile-form-error-message:not(:defined),
+nile-avatar:not(:defined),
+nile-switcher:not(:defined),
+nile-spinner:not(:defined),
+nile-form-group:not(:defined),
+nile-hero:not(:defined),
+nile-dialog:not(:defined),
+nile-split-panel:not(:defined),
+nile-error-message:not(:defined),
+nile-hero-header:not(:defined),
+nile-dropdown:not(:defined),
+nile-format-date:not(:defined),
+nile-loader:not(:defined),
+nile-button-toggle:not(:defined),
+nile-stepper:not(:defined) {
+  opacity: 0;
+}
+
+
+
+
+
+
+
+
+

package/demo/index.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="" id="stylesheet" />
+    <script>
+  const params = new URLSearchParams(window.location.search);
+  const style = params.get('style') || 'variables.css';
+  document.getElementById('stylesheet').href = style;
+</script>
+
+    <!-- <link rel="stylesheet" href="variables.css" id="stylesheet" /> -->
+    <link rel="stylesheet" href="index.css" />
+
+    <style>
+ 
+    </style>
+    <script type="module" src="index.js"></script>
+  </head>
+  <body> 
+
+
+ 
+
+ 
+
+<!-- <nile-input
+  type="password"
+  canSavePassword>
+</nile-input>
+  -->
+ 
+
+  <nile-chip
+   autoCompleteOptions='["React", "Angular", "Vue", "Tailwind"]'
+   acceptUserInput
+></nile-chip>
+
+
+<nile-button id="small-btn1">Small tooltip</nile-button>
+<nile-lite-tooltip for="small-btn1" id="small-tooltip1" content="This is a small tooltip." size="small"></nile-lite-tooltip>
+
+
+  </body>
+</html>

package/demo/index.js

@@ -0,0 +1,71 @@
+function changeImportBasedOnURLParam() {
+  const urlParams = new URLSearchParams(window.location.search);
+  const variableStyle = urlParams.get('variableStyle');
+
+  if (variableStyle) {
+    const stylesheet = document.getElementById('stylesheet');
+    if (stylesheet) {
+      stylesheet.href = `${variableStyle}.css`;
+    }
+  }
+}
+
+changeImportBasedOnURLParam();
+
+window.showDrawer = true;
+window.iconPath = '';
+// import { html, render } from 'lit';
+// import '../dist/src/nile-badge/index.js';
+import '../dist/src/index.js';
+// import '../dist/src/nile-input/index.js';
+
+// find html element by id
+const demo = document.getElementById('close');
+demo?.addEventListener('click', () => {
+  console.log('clicked', window.showDrawer);
+  window.showDrawer = false;
+});
+
+// for testing calendar
+document.addEventListener('DOMContentLoaded', () => {
+  const myComponent = document.querySelector('nile-calendar');
+  if (myComponent) {
+    // Accessing the allowedDates property after the component has been rendered
+    myComponent.allowedDates = {
+      startDate: '2024-03-24',
+      endDate: '2024-03-29',
+    };
+  } else {
+    console.error('Error: my-component not found in the DOM.');
+  }
+});
+
+/*
+ * Added service worker to handle expensive flow of fetching huge amount of data from the filenames text file created through build script
+ */
+const w = new Worker('fetchTextFromFileWorker.js');
+const getMessage = msg => {
+  const icons = splitStringBy(msg.data, ',');
+  /*For rendering the available icons*/
+  //   renderNewIcons(icons);
+};
+
+function splitStringBy(str, separator) {
+  return str.split(separator);
+}
+
+// rendering icons from filenames text file
+function renderNewIcons(icons) {
+  const iconsDiv = document.getElementById('new-icons');
+  iconsDiv.innerHTML = '';
+  icons?.forEach(icon => {
+    iconsDiv.innerHTML = ` ${iconsDiv.innerHTML}
+      <div title='${icon}' alt='${icon}'>
+        <nile-icon method="stroke" name=${icon.toLowerCase()} > </nile-icon>
+        <small>${icon}</small>
+      </div>`;
+  });
+  w.removeEventListener('message', getMessage);
+}
+
+w.addEventListener('message', getMessage);