@dile/ui 2.5.3 → 2.5.5

package/components/spinner/spinner-block.js

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

package/components/spinner/src/DileSpinnerBlock.js

@@ -0,0 +1,25 @@
+import { LitElement, html, css } from "lit";
+
+export class DileSpinnerBlock extends LitElement {
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+      .loading {
+        height: var(--dile-spinner-block-height, 120px); 
+        display: flex; 
+        justify-content: var(--dile-spinner-block-justify-content, center); 
+        align-items: var(--dile-spinner-block-align-items, center); 
+      }
+    `;
+  }
+
+  render() {
+    return html`
+      <section class="loading">
+        <dile-spinner active></dile-spinner>
+      </section>
+    `;
+  }
+}

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.3",
+  "version": "2.5.5",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "scripts": {
@@ -26,5 +26,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "213421f317cd0fcaa7b6ca20834d292fce8ded7f"
+  "gitHead": "dc75b0e2d5e2c20dcee71f1bf857947a31370836"
 }

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();
-  }  
-}