@aquera/nile-elements 0.1.40-beta-1.9 → 0.1.40-beta-2.1

package/package.json

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

package/src/nile-card/nile-card.css.ts

@@ -40,7 +40,7 @@ export const styles = css`
     flex-direction: column;
     justify-items: stretch;
     background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    outline: var(--ng-colors-border-secondary) solid  var(--nile-outline-0-5px, var(--ng-outline-1px)); 
+    outline: solid var(--nile-outline-0-5px, var(--ng-outline-1px)) var(--border-color);
     outline-offset: var(--nile-outline-none, --ng-outline-neg-1);  
     border-radius: var(--border-radius);
     min-width: 273px;

package/src/nile-icon/index.ts

@@ -68,9 +68,6 @@ export class NileIcon extends LitElement {
   @property({ type: String, reflect: true })
   public size = SMALL_ICON_SIZE;
 
-  @property({ type: String, reflect: true })
-  public size_token = '';
-
   @state()
   private _svg = '';
 
@@ -117,7 +114,7 @@ export class NileIcon extends LitElement {
       stroke: var(--nile-svg-stroke);
     }
 
-    .nds-icon svg path {
+    .nds-icon svg * {
       fill: var(--nile-svg-fill);
     }
 
@@ -148,11 +145,6 @@ export class NileIcon extends LitElement {
       this.style.setProperty('--nile-svg-height', `${this.size}px`);
       this.style.setProperty('--nile-svg-width', `${this.size}px`);
     }
-
-    if (changedProperties.has('size_token')) {
-      this.style.setProperty('--nile-svg-height', `${this.size_token}`);
-      this.style.setProperty('--nile-svg-width', `${this.size_token}`);
-    }
  
     if (changedProperties.has('color')) {
       this.style.setProperty('--nile-svg-fill', `${this.color}`);

package/src/nile-icon-button/nile-icon-button.ts

@@ -122,6 +122,16 @@ export class NileIconButton extends NileElement {
     this.ishovered = false;
   }
 
+  private getTokenValueResolved(): any {
+    const thisValue = this; 
+  
+    const value = Number(getComputedStyle(thisValue).getPropertyValue('--nile-width-14px').trim().split('px')[0]);
+    if (!value) {
+      return Number(getComputedStyle(thisValue).getPropertyValue('--ng-height-12px').trim().split('px')[0]);
+    }
+    return value;
+  }
+
   render(): TemplateResult {
     const isLink = this.href ? true : false;
     const tag = isLink ? literal`a` : literal`button`;
@@ -161,7 +171,7 @@ export class NileIconButton extends NileElement {
             src=${ifDefined(this.src)}
             .color=${this.color}
             aria-hidden="true"
-            size_token="var(--nile-width-14px, var(--ng-width-2-5))"
+            size="${this.getTokenValueResolved()}"
           ></nile-icon>
         </a>
       `;
@@ -201,7 +211,7 @@ export class NileIconButton extends NileElement {
             src=${ifDefined(this.src)}
             .color=${this.color}
             aria-hidden="true"
-            size_token="var(--nile-width-14px, var(--ng-width-2-5))"
+            size="${this.getTokenValueResolved()}"
           ></nile-icon>
         </button>
       `;

package/vscode-html-custom-data.json

@@ -1960,7 +1960,7 @@
     },
     {
       "name": "nile-icon",
-      "description": "Nile icon component.\n\nAttributes:\n\n  * `set` {IconName | undefined} - The name of the icon set\n\n  * `name` {IconName | undefined} - The name of the icon\n\n  * `description` {`string`} - A description of what the icon represents\n\n  * `method` {`string`} - \n\n  * `customSvgPath` {`string | undefined`} - A path to a custom SVG file to display as the icon\n\n  * `size` {`number`} - A size of what the icon represents\n\n  * `size_token` {`string`} - \n\n  * `color` - Color\n\n  * `push` {`boolean`} - \n\n  * `noFill` {`boolean`} - \n\n  * `frame` - Retain Viewbox\n\n  * `override` - \n\nProperties:\n\n  * `set` {IconName | undefined} - The name of the icon set\n\n  * `name` {IconName | undefined} - The name of the icon\n\n  * `description` {`string`} - A description of what the icon represents\n\n  * `method` {`string`} - \n\n  * `customSvgPath` {`string | undefined`} - A path to a custom SVG file to display as the icon\n\n  * `size` {`number`} - A size of what the icon represents\n\n  * `size_token` {`string`} - \n\n  * `_svg` {`string`} - \n\n  * `title` {`string`} - \n\n  * `color` - Color\n\n  * `push` {`boolean`} - \n\n  * `noFill` {`boolean`} - \n\n  * `frame` - Retain Viewbox\n\n  * `styles` - \n\n  * `buttonClassMap` {`ButtonClassMap`} - \n\n  * `override` - ",
+      "description": "Nile icon component.\n\nAttributes:\n\n  * `set` {IconName | undefined} - The name of the icon set\n\n  * `name` {IconName | undefined} - The name of the icon\n\n  * `description` {`string`} - A description of what the icon represents\n\n  * `method` {`string`} - \n\n  * `customSvgPath` {`string | undefined`} - A path to a custom SVG file to display as the icon\n\n  * `size` {`number`} - A size of what the icon represents\n\n  * `color` - Color\n\n  * `push` {`boolean`} - \n\n  * `noFill` {`boolean`} - \n\n  * `frame` - Retain Viewbox\n\n  * `override` - \n\nProperties:\n\n  * `set` {IconName | undefined} - The name of the icon set\n\n  * `name` {IconName | undefined} - The name of the icon\n\n  * `description` {`string`} - A description of what the icon represents\n\n  * `method` {`string`} - \n\n  * `customSvgPath` {`string | undefined`} - A path to a custom SVG file to display as the icon\n\n  * `size` {`number`} - A size of what the icon represents\n\n  * `_svg` {`string`} - \n\n  * `title` {`string`} - \n\n  * `color` - Color\n\n  * `push` {`boolean`} - \n\n  * `noFill` {`boolean`} - \n\n  * `frame` - Retain Viewbox\n\n  * `styles` - \n\n  * `buttonClassMap` {`ButtonClassMap`} - \n\n  * `override` - ",
       "attributes": [
         {
           "name": "set",
@@ -1989,10 +1989,6 @@
           "name": "size",
           "description": "`size` {`number`} - A size of what the icon represents\n\nProperty: size\n\nDefault: 16"
         },
-        {
-          "name": "size_token",
-          "description": "`size_token` {`string`} - \n\nProperty: size_token\n\nDefault: "
-        },
         {
           "name": "color",
           "description": "`color` - Color\n\nProperty: color"