@dile/ui 2.23.12 → 2.24.1

package/components/app-drawer/src/DileAppDrawer.js

@@ -33,13 +33,15 @@ export class DileAppDrawer extends DileCloseOnEscPressed(LitElement) {
     return css`
       :host {
         display: block;
+        overflow-x: hidden;
       }
 
       .modal {
         display: none;
         position: fixed;
-        width: 100vw;
+        width: 100%;
         height: 100vh;
+        left: 0;
         top: 0;
         left: 0;
         z-index: var(--dile-app-drawer-modal-z-index, var(--dile-app-drawer-z-index, 98));
@@ -61,8 +63,8 @@ export class DileAppDrawer extends DileCloseOnEscPressed(LitElement) {
       }
 
       section {
-        transform: translateX(-100vw);
-        transition: transform 0.2s ease 0.3s;
+        transform: none;
+        transition: none;
       }
 
       :host([opened]) .modal {
@@ -88,10 +90,11 @@ export class DileAppDrawer extends DileCloseOnEscPressed(LitElement) {
 
       :host([direction="left"]) .menu {
         top: var(--dile-app-drawer-closed-top, 0);
-        left: var(--dile-app-drawer-closed-left, -100vw);
+        left: var(--dile-app-drawer-closed-left, 0);
         height: var(--dile-app-drawer-content-height, 100vh);
         width: var(--dile-app-drawer-content-width, auto);
         box-shadow: var(--dile-app-drawer-box-shadow, 1px 0 8px #000);
+        transform: translateX(-100%);
       }
 
       :host([direction="top"][opened]) .menu {
@@ -99,7 +102,7 @@ export class DileAppDrawer extends DileCloseOnEscPressed(LitElement) {
       }
 
       :host([direction="left"][opened]) .menu {
-        transform: translateX(100vw);
+        transform: translateX(0);
       }
     `;
   }

package/components/select/index.js

@@ -1,2 +1,3 @@
 export { DileSelect } from './src/DileSelect.js';
-export { DileSelectAjax } from './src/DileSelectAjax.js';
+export { DileSelectAjax } from './src/DileSelectAjax.js';
+export { DileSelectBoolean } from './src/DileSelectBoolean.js';

package/components/select/select-boolean.js

@@ -0,0 +1,3 @@
+import { DileSelectBoolean } from "./src/DileSelectBoolean.js";
+
+window.customElements.define("dile-select-boolean", DileSelectBoolean);

package/components/select/src/DileSelectBoolean.js

@@ -0,0 +1,112 @@
+import { html, css, LitElement } from "lit";
+import { DileEmmitChange } from '../../../mixins/form/index.js';
+import '../select.js';
+
+export class DileSelectBoolean extends DileEmmitChange(LitElement) {
+  static get formAssociated() {
+    return true;
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      label: { type: String },
+      value: {},
+      name: { type: String },
+      disabled: { type: Boolean },
+      errored: { type: Boolean },
+      message: { type: String },
+      hideErrorOnInput: { type: Boolean },
+      quietOnStart: { type: Boolean },
+      trueOption: { type: String },
+      falseOption: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.trueOption = 'Yes';
+    this.falseOption = 'No';
+    this.errored = false;
+    this.hideErrorOnInput = false;
+    this.quiet = false;
+    this.internals = this.attachInternals();
+  }
+
+  render() {
+    return html`
+      <dile-select
+        label="${this.label || ''}"
+        ?errored="${this.errored}"
+        message="${this.message || ''}"
+        ?disabled="${this.disabled}"
+        quietOnStart
+        @element-changed="${this._onInnerChange}"
+      >
+        <select slot="select">
+          <option value="true">${this.trueOption}</option>
+          <option value="false">${this.falseOption}</option>
+        </select>
+      </dile-select>
+    `;
+  }
+
+  get _innerSelect() {
+    return this.shadowRoot.querySelector('dile-select');
+  }
+
+  firstUpdated() {
+    this.quiet = this.quietOnStart;
+    const inner = this._innerSelect;
+    if (this.value !== undefined && this.value !== null) {
+      inner.quietChange(this.value ? 'true' : 'false');
+    }
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('value')) {
+      const inner = this._innerSelect;
+      if (inner) {
+        if (this.value !== undefined && this.value !== null) {
+          inner.quietChange(this.value ? 'true' : 'false');
+        } else {
+          inner.clear();
+        }
+      }
+      this.internals.setFormValue(this.value ? 'on' : null);
+      if (this.quiet) {
+        this.quiet = false;
+      } else {
+        this.emmitChange();
+      }
+    }
+  }
+
+  _onInnerChange(e) {
+    e.stopPropagation();
+    const boolValue = e.detail.value === 'true';
+    if (boolValue !== this.value) {
+      this.value = boolValue;
+      if (this.hideErrorOnInput && this.errored) {
+        this.errored = false;
+        this.message = '';
+      }
+    }
+  }
+
+  clear() {
+    this.value = undefined;
+  }
+
+  clearError() {
+    this.errored = false;
+    this.message = '';
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "2.23.12",
+  "version": "2.24.1",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "scripts": {
@@ -26,5 +26,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8ed3ed0cd454dddf99c948baa272aac242e90030"
+  "gitHead": "8ea1cf2ade8eae87a385e7eb77d45601879bee20"
 }