@dile/ui 2.5.2 → 2.5.4

package/components/select/src/DileSelectAjax.js

@@ -107,6 +107,8 @@ export class DileSelectAjax  extends DileEmmitChange(LitElement) {
       message: { type: String },
       /** Hide errors on input */
       hideErrorOnInput: { type: Boolean },
+      /** Additional query string data */
+      additionalQueryString: {type: Object },
     };
   }
 
@@ -294,7 +296,6 @@ export class DileSelectAjax  extends DileEmmitChange(LitElement) {
   }
 
   onTextInput(e) {
-    console.log('onTextInput', e);
     this.keyword = e.detail.keyword;
     this.loadData();
     this.hideErrorOnInteraction();
@@ -309,11 +310,28 @@ export class DileSelectAjax  extends DileEmmitChange(LitElement) {
   loadData() {
     this.loading = true;
     this.ajaxError = false;
-    fetch(`${this.endpoint}?${this.queryStringVariable}=${this.keyword}`)
+    const url = this.computeRequestURL();
+    
+    fetch(url)
       .then(response => response.json())
       .then(json => this.registerData(json))
       .catch(error => this.registerError(error));
   }
+  
+  computeRequestURL() {
+    const baseUrl = `${this.endpoint}?${this.queryStringVariable}=${this.keyword}`;
+    
+    if (this.additionalQueryString && typeof this.additionalQueryString === 'object') {
+      const additionalParams = Object.entries(this.additionalQueryString)
+        .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
+        .join('&');
+        
+      return `${baseUrl}&${additionalParams}`;
+    }
+    
+    return baseUrl;
+  }
+  
 
   registerError(err) {
     this.ajaxError = true;

package/mixins/close-document-click/src/DileCloseDocumentClick.js

@@ -11,15 +11,18 @@
  */
 export const DileCloseDocumentClick = (SuperClass) =>
   class extends SuperClass {
+
     constructor() {
-      super();
+      super()
+      if(!DileCloseDocumentClick.elements) {
+        DileCloseDocumentClick.elements = [];
+      }
       this.closeDocumentHandler = this.closeAll.bind(this);
     }
 
     connectedCallback() {
       super.connectedCallback();
-      if (!DileCloseDocumentClick.elements) {
-        DileCloseDocumentClick.elements = [];
+      if (!DileCloseDocumentClick.elements.length) {
         document.addEventListener("click", this.closeDocumentHandler);
       }
       DileCloseDocumentClick.elements.push(this);
@@ -40,8 +43,10 @@ export const DileCloseDocumentClick = (SuperClass) =>
      * Close all the elements of this type
      */
     closeAll() {
-      for (let ele of DileCloseDocumentClick.elements) {
-        ele.close();
+      if(DileCloseDocumentClick.elements) {
+        for (let ele of DileCloseDocumentClick.elements) {
+          ele.close();
+        }
       }
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "2.5.2",
+  "version": "2.5.4",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "scripts": {
@@ -26,5 +26,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddbdaed2692688f0fcdb6d30bfae38fcda5a1e0c"
+  "gitHead": "e2cdce49c83224ee59eae32515eb30ffd2913bb2"
 }

package/components/datepicker/calendar.js

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

package/components/datepicker/datepicker.js

@@ -1,4 +0,0 @@
-import './calendar.js';
-import { DileDatepicker } from "./src/DileDatepicker.js";
-
-window.customElements.define("dile-datepicker", DileDatepicker);

package/components/datepicker/index.js

@@ -1,2 +0,0 @@
-export { DileDatepicker } from './src/DileDatepicker.js';
-export { DileCalendar } from './src/DileCalendar.js';

package/components/datepicker/src/DileCalendar.js

@@ -1,72 +0,0 @@
-import { css } from 'lit';
-import { LionCalendar } from '@lion/calendar';
-
-export class DileCalendar extends LionCalendar {
-    static get styles() {
-        return [
-            super.styles,
-            css`
-                .calendar__navigation {
-                    display: flex;
-                    justify-content: var(--dile-calendar-navigation-justify-content, space-between);
-                    align-items: center;
-                    margin-top: 0.4rem;
-                }
-                 .calendar__navigation button {
-                    min-height: auto;
-                    min-width: 30px;
-                 }
-                .calendar__navigation h2 {
-                    margin: 0;
-                    display: flex;
-                    align-items: center;
-                    min-height: auto;
-                    font-size: 0.9rem;
-                    
-                }
-                @media(min-width: 400px) {
-                    .calendar__navigation h2 {
-                        font-size: var(--dile-calendar-navigation-text-size, 1.1rem);
-                    }
-                }
-                .calendar__day-button {
-                    min-width: 26px;
-                    min-height: 26px;
-                    background-color: var(--dile-calendar-day-background-color, rgba(90, 90, 90, 0.08));
-                    color: var(--dile-calendar-day-text-color, #303030);
-                    border-radius: var(--dile-calendar-day-border-radius, 2px);
-                }
-                .calendar__day-button[today] {
-                    background-color: var(--dile-calendar-today-background-color, rgba(90, 90, 90, 0.20));
-                }
-                .calendar__day-button[next-month], .calendar__day-button[previous-month] {
-                    color: var(--dile-calendar-out-day-text-color, #777);
-                    opacity: 0.6;
-                }
-                .calendar__next-button , .calendar__previous-button{
-                    background-color: transparent;
-                    color: var(--dile-calendar-nav-buttons-color, #303030);
-                    font-size: 1.1em;
-                }
-                @media(min-width: 350px) {
-                    .calendar__day-button {
-                        min-width: var(--dile-calendar-day-size, 28px);
-                        min-height: var(--dile-calendar-day-size, 28px);
-                    }
-                }
-                @media(min-width: 400px) {
-                    .calendar__day-button {
-                        min-width: var(--dile-calendar-day-size, 32px);
-                        min-height: var(--dile-calendar-day-size, 32px);
-                    } 
-                }
-                @media(min-width: 500px) {
-                    .calendar__day-button {
-                        min-width: var(--dile-calendar-day-size, 36px);
-                        min-height: var(--dile-calendar-day-size, 36px);
-                    } 
-                }
-            `
-        ];
-    }
-}

package/components/datepicker/src/DileDatepicker.js

@@ -1,114 +0,0 @@
-import { html, css, LitElement } from "lit";
-import { DileInput } from '../../input/index.js';
-import '../../icon/icon.js';
-import { calendarIcon } from '@dile/icons/index.js';
-import '../../menu-overlay/menu-overlay.js';
-import { formatDate } from '@lion/localize';
-
-export class DileDatepicker extends DileInput {
-  static get styles() {
-    return [
-      super.styles,
-      css`
-      div.container {
-        display: flex;
-        align-items: flex-end;
-      }
-      section.input {
-        flex-grow: 1;
-        margin-right: 10px;
-      }
-      dile-icon {
-        cursor: pointer;
-        --dile-icon-size: var(--dile-datepicker-trigger-size, 36px);
-      }
-      dile-calendar {
-        font-size: var(--dile-datepicker-font-size, 0.9rem); 
-      }
-      dile-menu-overlay {
-        --dile-menu-overlay-width: var(--dile-datepicker-width, 280px);
-      }
-      dile-icon {
-        --dile-icon-color: var(--dile-datepicker-trigger-color, #39c);
-      }
-      dile-icon.trigger-disabled {
-        --dile-icon-color: var(--dile-datepicker-trigger-disabled-color, #ccc);
-      }
-      span {
-        display: flex;
-        margin-bottom: var(--dile-datepicker-trigger-margin-bottom, 0.2em);
-      }
-      @media(min-width: 350px) {
-        dile-menu-overlay {
-          --dile-menu-overlay-width: var(--dile-datepicker-width, 300px);
-          --dile-menu-overlay-max-width: var(--dile-datepicker-width, 300px);
-        } 
-      }
-      @media(min-width: 450px) {
-        dile-menu-overlay {
-          --dile-menu-overlay-width: var(--dile-datepicker-width, 320px);
-          --dile-menu-overlay-max-width: var(--dile-datepicker-width, 320px);
-        } 
-      }
-      @media(min-width: 500px) {
-        dile-menu-overlay {
-          --dile-menu-overlay-width: var(--dile-datepicker-width, 350px);
-          --dile-menu-overlay-max-width: var(--dile-datepicker-width, 350px);
-        } 
-      }
-    `];
-  }
-  
-  static get properties() {
-    return {
-      firstDayOfWeek: { type: Number },
-      horizontalAlign: { type: String },
-      verticalAlign: { type: String },
-      moveTop: { type: Number },
-      moveLeft: { type: Number },
-    };
-  }
-
-  constructor() {
-    super();
-    this.firstDayOfWeek = 0;
-    this.horizontalAlign = 'under_right';
-    this.verticalAlign = 'center';
-    this.moveTop = 0;
-    this.moveLeft = 0;
-  }
-
-
-  render() {
-    return html`
-      <div class="container">
-        <section class="input">
-          ${super.render()}
-        </section>
-        <span>
-          ${this.disabled 
-            ? html`<dile-icon class="trigger-disabled" .icon="${calendarIcon}"></dile-icon>`
-            : html`
-              <dile-menu-overlay moveTop="${this.moveTop}" moveLeft="${this.moveLeft}" verticalAlign="${this.verticalAlign}" horizontalAlign="${this.horizontalAlign}" id="menu">
-                <dile-icon .icon="${calendarIcon}" slot="trigger"></dile-icon>
-                <div slot="content" class="calendar">
-                  <dile-calendar 
-                    class="demo-calendar"
-                    .firstDayOfWeek="${this.firstDayOfWeek}"
-                    @user-selected-date-changed=${this.showDate} 
-                  ></dile-calendar> 
-                </div>
-              </dile-menu-overlay>
-            `
-          }
-        </span>
-      </div>
-    `;
-  }
-
-  showDate(e) {
-    let date = formatDate(e.detail.selectedDate);
-    this.value = date;
-    this.shadowRoot.getElementById('menu').close();
-  }  
-}