@aquera/nile-elements 0.1.28-beta-1.1 → 0.1.29-beta-1.2

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.28-beta-1.1",
+  "version": "0.1.29-beta-1.2",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-accordion/nile-accordion.ts

@@ -1,4 +1,4 @@
-/**
+ /**
  * Copyright Aquera Inc 2023
  *
  * This source code is licensed under the BSD-3-Clause license found in the
@@ -57,6 +57,7 @@ static styles: CSSResultGroup = styles;
 @query('.accordian__header') header: HTMLElement;
 @query('.accordian__body') body: HTMLElement;
 @query('.accordian__expand-icon-slot') expandIconSlot: HTMLSlotElement;
+@query('slot[name="summary"]') summarySlot: HTMLSlotElement;  
 
 /**
  * Indicates whether or not the accordian is open. You can toggle this attribute to show and hide the accordian, or you
@@ -93,7 +94,17 @@ firstUpdated() {
   this.body.style.height = this.open ? 'auto' : '0';
 }
 
-private handleSummaryClick() {
+  private handleSummaryClick(event: MouseEvent) {
+    const path = event.composedPath();
+    const slotIndex = path.indexOf(this.summarySlot);
+    if (slotIndex !== -1) {
+      for (let i = 0; i < slotIndex; i++) {
+        const el = path[i];
+        if (el instanceof Element && el.matches('input, button, select, textarea, a, label')) {
+          return;  
+        }
+      }
+    }
   if (!this.disabled) {
     if (this.open) {
       this.hide();

package/src/nile-circular-progressbar/nile-circular-progressbar.css.ts

@@ -11,53 +11,52 @@ import { css } from 'lit';
  * Progressbar CSS
  */
 export const styles = css`
-  :host{
-    
-  }
-
-  .track {
-    stroke-width: 4px;
-    stroke: var(--nile-colors-neutral-400);
-    opacity: 0.5;
-    fill: none;
-    height: 2px;
-  }
-
-  .progress {
-    stroke-width: 4px;
-    stroke: var(--nile-colors-primary-600);
-    stroke-linecap: round;
-    fill: none;
-    transform: rotate(270deg);
-    transform-origin: center;
-  }
-
-  .circle__text {
-    color: var(--nile-colors-dark-900);
-    text-align: center;
-    font-size: var(--nile-type-scale-1);
-    font-style: normal;
-    font-weight: var(--nile-font-weight-regular);
-    line-height: var(--nile-type-scale-1);
-    letter-spacing: 0.2px;
-     
-  }
-
-  
-  .nile-progress-bar__status {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 4px;  
-  }
-
-  .nile-progress-bar__message {
-    flex-grow: 1;
-  }
-
-  .nile-progress-bar__percentage {
-    white-space: nowrap;
-  }
-`;
 
+ :host {
+  display: inline-block;
+}
+
+.track {
+  stroke-width: 4px;
+  stroke: var(--nile-colors-neutral-400);
+  opacity: 0.5;
+  fill: none;
+}
+
+.progress {
+  stroke-width: 4px;
+  stroke: var(--nile-colors-primary-600);
+  stroke-linecap: round;
+  fill: none;
+  transform: rotate(270deg);
+  transform-origin: center;
+  transition: stroke-dashoffset 0.8s ease-in-out;  
+}
+
+.circle__text {
+  fill: var(--nile-colors-dark-900);
+  text-align: center;
+  font-size: var(--nile-type-scale-1);
+  font-style: normal;
+  font-weight: var(--nile-font-weight-regular);
+  line-height: var(--nile-type-scale-1);
+  letter-spacing: 0.2px;
+}
+
+.nile-progress-bar__status {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 4px;
+}
+
+.nile-progress-bar__message {
+  flex-grow: 1;
+}
+
+.nile-progress-bar__percentage {
+  white-space: nowrap;
+}
+
+`
 export default [styles];

package/src/nile-circular-progressbar/nile-circular-progressbar.ts

@@ -32,10 +32,10 @@ export class NileCircularProgressbar extends NileElement {
     return [styles];
   }
 
-  @query('.progress') progressCircle: any;
-  @property({ type: Number, reflect: true }) progress = 50;
-  @property({ reflect: true }) content: String;
-   /* #endregion */
+  @query('.progress') progressCircle!: SVGCircleElement;
+  
+  @property({ type: Number, reflect: true }) value = 0;
+/* #endregion */
 
   /* #region Methods */
 
@@ -44,43 +44,46 @@ export class NileCircularProgressbar extends NileElement {
    * @slot This is a slot test
    */
   // make reactive to pass through
-  @property({ type: String, reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';
+  @property({ type: String, reflect: true }) content?: string;
+  @property({ type: Number, reflect: true }) size = 40;  
 
   private get circleSize() {
-    switch (this.size) {
-      case 'sm':
-        return { radius: 9, viewBox: 24, fontSize: '5px' };
-      case 'lg':
-        return { radius: 28, viewBox: 64, fontSize: '10px' };
-      default:
-        return { radius: 18, viewBox: 40, fontSize: '10px' };
-    }
+    const radius = this.size / 2 - 4;  
+    return {
+      radius,
+      viewBox: this.size,
+      fontSize: `${this.size * 0.25}px`,  
+    };
   }
 
   connectedCallback() {
     super.connectedCallback();
     this.updateComplete.then(() => {
-      if (this.progress < 0) {
-        this.progress = 0;
-      }
-      if (this.progress > 100) {
-        this.progress = 100;
-      }
-      this.setProgress(this.progress);
+      this.value = Math.max(0, Math.min(100, this.value));
+      this.setProgress(this.value);
     });
   }
+
   private setProgress(percent: number) {
-    const circleRadius = this.progressCircle.r.baseVal.value;
-    let circumference = circleRadius * 2 * Math.PI;
-    this.progressCircle.style.strokeDasharray = circumference;
-    this.progressCircle.style.strokeDashoffset =
-      circumference - (percent / 100) * circumference;
+    if (this.progressCircle) {
+      const circleRadius = this.progressCircle.r.baseVal.value;
+      const circumference = circleRadius * 2 * Math.PI;
+
+      this.progressCircle.style.transition = 'stroke-dashoffset 0.8s ease-in-out'; 
+      this.progressCircle.style.strokeDasharray = `${circumference}`;
+      this.progressCircle.style.strokeDashoffset = `${circumference - (percent / 100) * circumference}`;
+    }
+  }
+
+  updated(changedProperties: Map<string, any>) {
+    if (changedProperties.has('value')) {
+      this.setProgress(this.value);
+    }
   }
 
   public render(): TemplateResult {
     const { radius, viewBox, fontSize } = this.circleSize;
-    const innerText = this.content === undefined ? `${Math.round(this.progress)}%` : this.content;
-
+    const innerText = this.content ?? `${Math.round(this.value)}%`;
 
     return html`
       <svg width="${viewBox}" height="${viewBox}" viewBox="0 0 ${viewBox} ${viewBox}">
@@ -96,13 +99,9 @@ export class NileCircularProgressbar extends NileElement {
             class="circle__text"
             style="font-size: ${fontSize};"
           >
-            ${innerText}
-          </text>
-        
-  </svg>
-
-
-  
+          ${innerText}
+        </text>
+      </svg>
     `;
   }
 

package/src/nile-progress-bar/nile-progress-bar.css.ts

@@ -22,6 +22,7 @@ export default css`
     width: 100%;
     height: 2px;
     background-color: var(--nile-colors-neutral-400);
+    transition:  stroke-dashoffset 0.8s ease-in-out
   }
 
  

package/src/nile-progress-bar/nile-progress-bar.ts

@@ -11,6 +11,8 @@ export class NileProgressBar extends LitElement {
 
   override render() {
     const variantClass = this.variant === 'rounded' ? 'rounded' : '';
+    
+    
 
     return html`
       <div class="nile-progress-bar__container">

package/vscode-html-custom-data.json

@@ -3,7 +3,7 @@
   "tags": [
     {
       "name": "nile-accordion",
-      "description": "Nile detail component.\n\nAttributes:\n\n  * `open` {`boolean`} - Indicates whether or not the accordian is open. You can toggle this attribute to show and hide the accordian, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the accordian' open state.\n\n  * `variant` {`\"dark\" | \"light\"`} - Indicates the visual style of the accordian component. Accepted values are `'dark'` or `'light'`.\nDefaults to `'light'`.\n\n  * `expandIconPlacement` {`\"left\" | \"right\"`} - Specifies the direction of the arrow indicator. Accepted values are `'left'` or `'right'`.\nDefaults to `'right'`.\n\n  * `size` {`\"sm\" | \"md\" | \"lg\"`} - Specifies the size of the accordian component. Accepted values are `'sm'`, `'md'`, or `'lg'`.\nDefaults to `'md'`.\n\n  * `summary` {`string`} - The summary to show in the header. If you need to display HTML, use the `summary` slot instead.\n\n  * `disabled` {`boolean`} - Disables the accordian so it can't be toggled.\n\nProperties:\n\n  * `styles` - \n\n  * `accordian` {`HTMLElement`} - \n\n  * `header` {`HTMLElement`} - \n\n  * `body` {`HTMLElement`} - \n\n  * `expandIconSlot` {`HTMLSlotElement`} - \n\n  * `open` {`boolean`} - Indicates whether or not the accordian is open. You can toggle this attribute to show and hide the accordian, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the accordian' open state.\n\n  * `variant` {`\"dark\" | \"light\"`} - Indicates the visual style of the accordian component. Accepted values are `'dark'` or `'light'`.\nDefaults to `'light'`.\n\n  * `expandIconPlacement` {`\"left\" | \"right\"`} - Specifies the direction of the arrow indicator. Accepted values are `'left'` or `'right'`.\nDefaults to `'right'`.\n\n  * `size` {`\"sm\" | \"md\" | \"lg\"`} - Specifies the size of the accordian component. Accepted values are `'sm'`, `'md'`, or `'lg'`.\nDefaults to `'md'`.\n\n  * `summary` {`string`} - The summary to show in the header. If you need to display HTML, use the `summary` slot instead.\n\n  * `disabled` {`boolean`} - Disables the accordian so it can't be toggled.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile detail component.\n\nAttributes:\n\n  * `open` {`boolean`} - Indicates whether or not the accordian is open. You can toggle this attribute to show and hide the accordian, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the accordian' open state.\n\n  * `variant` {`\"dark\" | \"light\"`} - Indicates the visual style of the accordian component. Accepted values are `'dark'` or `'light'`.\nDefaults to `'light'`.\n\n  * `expandIconPlacement` {`\"left\" | \"right\"`} - Specifies the direction of the arrow indicator. Accepted values are `'left'` or `'right'`.\nDefaults to `'right'`.\n\n  * `size` {`\"sm\" | \"md\" | \"lg\"`} - Specifies the size of the accordian component. Accepted values are `'sm'`, `'md'`, or `'lg'`.\nDefaults to `'md'`.\n\n  * `summary` {`string`} - The summary to show in the header. If you need to display HTML, use the `summary` slot instead.\n\n  * `disabled` {`boolean`} - Disables the accordian so it can't be toggled.\n\nProperties:\n\n  * `styles` - \n\n  * `accordian` {`HTMLElement`} - \n\n  * `header` {`HTMLElement`} - \n\n  * `body` {`HTMLElement`} - \n\n  * `expandIconSlot` {`HTMLSlotElement`} - \n\n  * `summarySlot` {`HTMLSlotElement`} - \n\n  * `open` {`boolean`} - Indicates whether or not the accordian is open. You can toggle this attribute to show and hide the accordian, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the accordian' open state.\n\n  * `variant` {`\"dark\" | \"light\"`} - Indicates the visual style of the accordian component. Accepted values are `'dark'` or `'light'`.\nDefaults to `'light'`.\n\n  * `expandIconPlacement` {`\"left\" | \"right\"`} - Specifies the direction of the arrow indicator. Accepted values are `'left'` or `'right'`.\nDefaults to `'right'`.\n\n  * `size` {`\"sm\" | \"md\" | \"lg\"`} - Specifies the size of the accordian component. Accepted values are `'sm'`, `'md'`, or `'lg'`.\nDefaults to `'md'`.\n\n  * `summary` {`string`} - The summary to show in the header. If you need to display HTML, use the `summary` slot instead.\n\n  * `disabled` {`boolean`} - Disables the accordian so it can't be toggled.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "open",
@@ -799,30 +799,20 @@
     },
     {
       "name": "nile-circular-progressbar",
-      "description": "Nile icon component.\n\nAttributes:\n\n  * `progress` {`number`} - \n\n  * `content` {`String`} - \n\n  * `size` {`\"sm\" | \"md\" | \"lg\"`} - Render method\n\nProperties:\n\n  * `progressCircle` - \n\n  * `progress` {`number`} - \n\n  * `content` {`String`} - \n\n  * `size` {`\"sm\" | \"md\" | \"lg\"`} - Render method\n\n  * `circleSize` {`{ radius: number; viewBox: number; fontSize: string; }`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile icon component.\n\nAttributes:\n\n  * `value` {`number`} - \n\n  * `content` {`string | undefined`} - Render method\n\n  * `size` {`number`} - \n\nProperties:\n\n  * `progressCircle` {`SVGCircleElement`} - \n\n  * `value` {`number`} - \n\n  * `content` {`string | undefined`} - Render method\n\n  * `size` {`number`} - \n\n  * `circleSize` {`{ radius: number; viewBox: number; fontSize: string; }`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
-          "name": "progress",
-          "description": "`progress` {`number`} - \n\nProperty: progress\n\nDefault: 50"
+          "name": "value",
+          "description": "`value` {`number`} - \n\nProperty: value\n\nDefault: 0"
         },
         {
           "name": "content",
-          "description": "`content` {`String`} - \n\nProperty: content"
+          "description": "`content` {`string | undefined`} - Render method\n\nProperty: content",
+          "values": []
         },
         {
           "name": "size",
-          "description": "`size` {`\"sm\" | \"md\" | \"lg\"`} - Render method\n\nProperty: size\n\nDefault: md",
-          "values": [
-            {
-              "name": "sm"
-            },
-            {
-              "name": "md"
-            },
-            {
-              "name": "lg"
-            }
-          ]
+          "description": "`size` {`number`} - \n\nProperty: size\n\nDefault: 40"
         }
       ]
     },