@dile/ui 2.1.6 → 2.1.8

package/components/box-selector/box-selector-item.js

@@ -0,0 +1,2 @@
+import { DileBoxSelectorItem } from './src/DileBoxSelectorItem.js';
+customElements.define("dile-box-selector-item", DileBoxSelectorItem);

package/components/box-selector/box-selector.js

@@ -0,0 +1,2 @@
+import { DileBoxSelector } from './src/DileBoxSelector.js'
+customElements.define("dile-box-selector", DileBoxSelector);

package/components/box-selector/index.js

@@ -0,0 +1,2 @@
+export { DileBoxSelector } from './src/DileBoxSelector.js'
+export { DileBoxSelectorItem } from './src/DileBoxSelectorItem.js'

package/components/box-selector/src/DileBoxSelector.js

@@ -0,0 +1,13 @@
+import { html, css, LitElement } from "lit";
+import { DileSelectable } from "../../../mixins/selectable";
+
+export class DileBoxSelector extends DileSelectable(LitElement) {
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+    `;
+  }
+}
+

package/components/box-selector/src/DileBoxSelectorItem.js

@@ -0,0 +1,52 @@
+import { html, css, LitElement } from "lit";
+import { DileSelectableItem } from "../../../mixins/selectable";
+
+export class DileBoxSelectorItem extends DileSelectableItem(LitElement) {
+
+  static get styles() {
+    return css`
+      :host {
+        cursor: pointer;
+        background-color: var(--dile-primary-color, #fff);
+        color: var(--dile-on-primary-color, #303030);
+        border: var(--dile-primary-dark-color, 1px solid #ccc);
+        border-radius: var(--dile-box-selector-item-border-radius, 0.5rem);
+        padding: var(--dile-box-selector-item-padding, 0.8rem);
+        text-align: var(--dile-box-selector-item-text-align, center);
+        font-weight: var(--dile-box-selector-item-font-weight, normal);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      label: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.label = '';
+    this.onClick = this.select.bind(this);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('click', this.onClick);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('click', this.onClick);
+  }
+
+  render() {
+    return html`
+        ${this.label}
+    `;
+  }
+
+}

package/components/button/src/DileButtonIcon.js

@@ -16,7 +16,7 @@ export class DileButtonIcon extends DileButton {
         button {
           display: flex;
           align-items: center;
-          --dile-icon-color: var(--dile-on-primary-color, #303030);
+          --dile-icon-color: var(--dile-on-primary-color, #ffffff);
         }
         dile-icon {
           margin-right: var(--dile-button-icon-separation, 0.3rem);

package/components/modal/src/DileModalHelp.js

@@ -12,7 +12,7 @@ export class DileModalHelp extends LitElement {
                 --dile-modal-width: var(--dile-modal-help-width, 95vw);
                 --dile-modal-height: auto;
                 --dile-modal-max-height: 95vh;
-                color: #303030;
+                color: var(--dile-on-primary-color, #303030);
                 --dile-icon-rounded-background-color: var(--dile-primary-color, #2962FF);
                 --dile-icon-color: var(--dile-modal-help-icon-color, #fff);
             }

package/components/select/src/DileSelectAjax.js

@@ -151,6 +151,7 @@ export class DileSelectAjax  extends DileEmmitChange(LitElement) {
   }
   
   registerText(json) {
+    console.log('json', json);
     this.selectedText = json[this.displayProperty]; 
     this.loading = false;
   }
@@ -287,12 +288,16 @@ export class DileSelectAjax  extends DileEmmitChange(LitElement) {
   }
   
   registerData(json) {
-    if(this.resultDataProperty === undefined || this.resultDataProperty === '') {
-      this.data = json;
+    this.data = this.getResultData(json);
+    this.updateComplete.then( () => this.loading = false )
+  }
+  
+  getResultData(json) {
+    if (this.resultDataProperty === undefined || this.resultDataProperty === '') {
+      return json;
     } else {
-      this.data = json[this.resultDataProperty];
+      return json[this.resultDataProperty];
     }
-    this.updateComplete.then( () => this.loading = false )
   }
 
   doSelected(e) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "2.1.6",
+  "version": "2.1.8",
   "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.8",
+    "@dile/icons": "^2.0.10",
     "lit": "^2.7.0 || ^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6256ff8646362029e31aba8006ea935bdde14396"
+  "gitHead": "e3ddacef52e67cdc9c6b0f6e1beda9aa15aeb0f0"
 }

package/styles/colors.css

@@ -14,6 +14,8 @@
   --dile-alert-success-color: #00900f;
   --dile-alert-neutral-color: #2889a7;
   --dile-on-alert-color: #ffffff;
+  --dile-danger-color: #e31e1b;
+  --dile-on-danger-color: #ffffff;
 
   /* Color variations */
   --dile-primary-light-color: #fbfbe9;