npm - @aquera/nile-elements - Versions diffs - 1.4.4-beta-1.0 → 1.4.4-beta-1.2 - Mend

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

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 (492) hide show

package/demo/index.html CHANGED Viewed

@@ -5,7 +5,7 @@
     <link rel="stylesheet" href="" id="stylesheet" />
     <script>
   const params = new URLSearchParams(window.location.search);
-  const style = params.get('style') || 'nxtgen.css';
+  const style = params.get('style') || 'variables.css';
   document.getElementById('stylesheet').href = style;
 </script>
@@ -13,73 +13,39 @@
     <link rel="stylesheet" href="index.css" />
     <style>
- .carousel-slide {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	padding: 4rem 2rem;
-	background: linear-gradient(135deg, var(--nile-colors-primary-600, var(--ng-color-brand-600)) 0%, var(--nile-colors-primary-700, var(--ng-color-brand-800)) 100%);
-	color: var(--nile-colors-white-base, var(--ng-color-base-white));
-	border-radius: 8px;
-	min-height: 200px;
-	text-align: center;
-}
-.carousel-slide-title {
-	margin: 0 0 1rem 0;
-	font-size: 1.5rem;
-	font-weight: bold;
-}
-.carousel-slide p {
-	margin: 0;
-	font-size: 1rem;
-}
     </style>
     <script type="module" src="index.js"></script>
   </head>
   <body>
-    <div class="container">
-      <nile-carousel loop navigation pagination slides-per-page="2" slides-per-move="1"  >
-        <nile-carousel-item>
-          <div class="carousel-slide">
-            <div class="carousel-slide-title">Slide 1</div>
-            <p>Multiple slides per page</p>
-          </div>
-        </nile-carousel-item>
-        <nile-carousel-item>
-          <div class="carousel-slide">
-            <div class="carousel-slide-title">Slide 2</div>
-            <p>Two slides visible at once</p>
-          </div>
-        </nile-carousel-item>
-        <nile-carousel-item>
-          <div class="carousel-slide">
-            <div class="carousel-slide-title">Slide 3</div>
-            <p>Perfect for product grids</p>
-          </div>
-        </nile-carousel-item>
-        <nile-carousel-item>
-          <div class="carousel-slide">
-            <div class="carousel-slide-title">Slide 4</div>
-            <p>Card layouts</p>
-          </div>
-        </nile-carousel-item>
-        <nile-carousel-item>
-          <div class="carousel-slide">
-            <div class="carousel-slide-title">Slide 5</div>
-            <p>And more</p>
-          </div>
-        </nile-carousel-item>
-        <nile-carousel-item>
-          <div class="carousel-slide">
-            <div class="carousel-slide-title">Slide 6</div>
-            <p>Content here</p>
-          </div>
-        </nile-carousel-item>
-      </nile-carousel>
-    </div>
+<!-- <nile-input
+  type="password"
+  canSavePassword>
+</nile-input>
+  -->
+  <nile-chip
+   autoCompleteOptions='["React", "Angular", "Vue", "Tailwind"]'
+   acceptUserInput
+   addOnBlur
+></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>
+<script>
+  const chip = document.querySelector('nile-chip');
+  chip.addEventListener('nile-chip-change', (event) => {
+    console.log(event.detail.value);
+  });
+</script>
   </body>
-</html>
+</html>

package/demo/nxtgen.css CHANGED Viewed

@@ -1263,6 +1263,7 @@
     --ng-icon-check-circle-broken: ng-check-circle-broken;
     --ng-icon-action: ng-action;
     --ng-icon-arrow-narrow-right: ng-arrow-narrow-right;
+    --ng-icon-arrow-narrow-left: ng-arrow-narrow-left;
     --ng-icon-chevron-left-double: ng-chevron-left-double;
     --ng-icon-chevron-right-double: ng-chevron-right-double;