@dile/ui 2.1.4 → 2.1.5

package/components/button/src/DileButton.js

@@ -26,20 +26,20 @@ export class DileButton extends LitElement {
         padding-left: var(--dile-button-padding-x, 0.8rem);
         border-radius: var(--dile-button-border-radius, 2rem);
         border-width:  var(--dile-button-border-width, 3px);
-        border-color:  var(--dile-button-border-color, #07193b);
-        background-color: var(--dile-button-background-color, #7BB93D);
+        border-color:  var(--dile-primary-dark-color, #07193b);
+        background-color: var(--dile-primary-color, #7BB93D);
         transition-property: background-color, color;
         transition-duration: 0.3s;
         transition-timing-function: ease-in-out;
         border-style: solid;
-        color: var(--dile-button-text-color, #fff); 
+        color: var(--dile-on-primary-color, #fff); 
         font-size: var(--dile-button-font-size, 1rem);
         font-weight: var(--dile-button-font-weight, bold);
         text-transform: var(--dile-button-text-transform, none);
         letter-spacing: var(--dile-button-letter-spacing, 0);
       }
       button:hover {
-        background-color: var(--dile-button-hover-background-color, #f3f3ae);
+        background-color: var(--dile-primary-light-color, #f3f3ae);
         color: var(--dile-button-hover-text-color, #303030);
         border-color:  var(--dile-button-hover-border-color, #666666);
       }

package/components/chip/chip.js

@@ -0,0 +1,2 @@
+import { DileChip } from "./src/DileChip";
+customElements.define('dile-chip', DileChip);

package/components/chip/index.js

@@ -0,0 +1 @@
+export { DileChip } from "./src/DileChip";

package/components/chip/src/DileChip.js

@@ -0,0 +1,71 @@
+import { LitElement, html, css } from 'lit';
+import { clearIcon } from '@dile/icons';
+import '@dile/ui/components/icon/icon.js';
+
+export class DileChip  extends LitElement {
+
+  static get styles() {
+    return css`
+      :host {
+        display: inline-block;
+      }
+      div {
+        display: flex;
+        align-items: center;
+        background-color: var(--dile-chip-background-color, #e5e5e5);
+        padding-right: var(--dile-chip-padding-x, 0.5rem);
+        padding-left: var(--dile-chip-padding-x, 0.5rem);
+        padding-top: var(--dile-chip-padding-y, 0.3rem);
+        padding-bottom: var(--dile-chip-padding-y, 0.3rem);
+        border-radius: var(--dile-chip-border-radius, 0);
+      }
+      span {
+        font-size: var(--dile-chip-font-size, 1rem);
+        font-weight: var(--dile-chip-font-weight, bold);
+        color: var(--dile-chip-text-color, #303030);
+        display: inline-block;
+        margin-right: 20px;
+        transition: color 0.3s ease;
+      }
+      dile-icon {
+        --dile-icon-color: var(--dile-chip-icon-color, #303030);
+        --dile-icon-size: var(--dile-chip-icon-size, 16px);
+        cursor: pointer;
+      }
+      dile-icon:hover {
+        --dile-icon-color: var(--dile-chip-icon-hover-color, #d06060);
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      name: { type: String },
+      icon: { type: Object },
+    };
+  }
+
+  constructor() {
+    super();
+    this.icon = clearIcon;
+  }
+
+  render() {
+    return html`
+      <div>
+        <span><slot></slot></span>
+        <dile-icon .icon="${this.icon}" @click="${this.doClick}"></dile-icon>
+      </div>
+    `;
+  }
+
+  doClick() {
+    this.dispatchEvent(new CustomEvent('dile-chip-icon-click', {
+      bubbles: true,
+      composed: true,
+      detail: {
+          name: this.name,
+      }
+    }));
+  }
+}

package/components/select/src/DileSelect.js

@@ -97,13 +97,14 @@ export class DileSelect extends DileEmmitChange(LitElement) {
     this.quiet = false;
   }
 
+
+
   connectedCallback() {
     super.connectedCallback();
     if (!this.elselect) {
       throw new Error('Use dile-select with a select element in the slot "select"');
     } else {
       this.elselect.addEventListener("change", this.changeHandler);
-      this.value = this.elselect.value;
     }
   }
 
@@ -141,7 +142,6 @@ export class DileSelect extends DileEmmitChange(LitElement) {
   }
 
   firstUpdated() {
-    super.firstUpdated();
     this.quiet = this.quietOnStart;
     if(this.value) {
       this.elselect.value = this.value;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "2.1.4",
+  "version": "2.1.5",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "scripts": {
@@ -20,11 +20,11 @@
   },
   "homepage": "https://dile-components.polydile.com/",
   "dependencies": {
-    "@dile/icons": "^2.0.6",
+    "@dile/icons": "^2.0.7",
     "lit": "^2.7.0 || ^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "81e85018076f8977bbc17e45451caa5a0b7facfd"
+  "gitHead": "b7dce885ab28890d29fed46c918ffc2aa02c97b6"
 }

package/styles/colors.css

@@ -0,0 +1,33 @@
+:root {
+  /* Main colors */
+  --dile-background-color: #ffffff;
+  --dile-on-background-color: #303030;
+  --dile-primary-color: #f3f3ae;
+  --dile-on-primary-color: #303030;
+  --dile-secondary-color: #27a744;
+  --dile-on-secondary-color: #ffffff;
+  --dile-terciary-color: #2789a7;
+  --dile-on-terciary-color: #ffffff;
+  --dile-neutral-color: #f4f4f4;
+  --dile-on-neutral-color: #303030;
+  --dile-alert-error-color: #cf3535;
+  --dile-alert-success-color: #00900f;
+  --dile-alert-neutral-color: #2889a7;
+  --dile-on-alert-color: #ffffff;
+
+  /* Color variations */
+  --dile-primary-light-color: #fbfbe9;
+  --dile-on-primary-light-color: #303030;
+  --dile-primary-dark-color: #d7d353;
+  --dile-on-primary-dark-color: #303030;
+  --dile-secondary-light-color: #beed8e;
+  --dile-on-secondary-light-color: #303030;
+  --dile-secondary-dark-color: #43842e;
+  --dile-on-secondary-dark-color: #ffffff;
+  --dile-terciary-light-color: #85d4f0;
+  --dile-on-terciary-light-color: #303030;
+  --dile-terciary-dark-color: #125462;
+  --dile-on-terciary-dark-color: #ffffff;
+  --dile-gray-dark-color: #555555;
+  --dile-on-gray-dark-color: #ffffff;
+}