@dile/ui 2.0.1

package/components/message/src/DileMessage.js

@@ -0,0 +1,166 @@
+import { html, css, LitElement } from "lit";
+import { DileSlideDown } from "../../../mixins/slide-down/index.js";
+import '../../icon/icon.js';
+import { closeIcon } from '@dile/icons/index.js'
+
+export class DileMessage extends DileSlideDown(LitElement) {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: block;
+          --dile-close-icon-template-color: var(--dile-message-icon-color, #fff);
+        }
+        #message {
+          height: 0;
+          overflow: hidden;
+          transition: height 0.3s ease-in;
+          -webkit-transition: height 0.3s ease-in;
+          position: fixed;
+          width: 100%;
+          z-index: var(--dile-message-z-index, 1);
+        }
+        section {
+          display: flex;
+          align-items: center;
+          background-color: var(--dile-message-background-color, #666);
+          color: var(--dile-message-color, #fff);
+          padding: var(--dile-message-padding, 15px);
+        }
+        .content {
+          flex-grow: 1;
+          margin-right: 5px;
+        }
+        @media (min-width: 420px) {
+          .content {
+            margin-right: 15px;
+          }
+        }
+        .icon {
+          cursor: pointer;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+        }
+
+        :host([hideCloseIcon]) .icon {
+          display: none;
+        }
+        :host([position='top']) #message {
+          top: 0;
+          left: 0;
+        }
+        :host([position='bottom']) #message {
+          bottom: 0;
+          left: 0;
+        }
+        :host([position='relative']) #message {
+          position: relative;
+        }
+        :host([position='right-bottom']) #message {
+          bottom: var(--dile-message-right-bottom-separation, 1.5rem);
+          right: var(--dile-message-right-bottom-separation, 1.5rem);
+          width: var(--dile-message-right-bottom-width, 80vw);
+          max-width: var(--dile-message-right-bottom-max-width, 400px);
+        }
+      `,
+    ];
+  }
+  static get properties() {
+    return {
+      /**
+       * If true the feedbak box is in opened status.
+       */
+      opened: { type: Boolean },
+
+      /**
+       * Message to display. If message='' then the component will display the content comming from the slot.
+       */
+      message: { type: String },
+      
+      /**
+       * Position between top, bottom, right-bottom.
+       */
+      position: {
+         type: String,
+         reflect: true,
+      },
+
+      /**
+       * If true the close icon will be hidden.
+       */
+      hideCloseIcon: { 
+        type: Boolean,
+        reflect: true 
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.opened = false;
+    this.position = 'bottom';
+    this.message = "";
+  }
+
+  firstUpdated() {
+    this.display = this.shadowRoot.getElementById("message");
+    if (this.opened) {
+      this.slideShow(this.display);
+    }
+  }
+
+  render() {
+    return html`
+      <div id="message">
+        <section>
+          <div class="content">
+            ${
+              this.message != "" && this.message != undefined
+                ? this.message
+                : html`<slot></slot>`
+            }
+          </div>
+          <dile-icon .icon="${closeIcon}" class="icon" @click="${this.closeByUser}">
+            
+          </dile-icon>
+        </section>
+      </div>
+    `;
+  }
+
+  close() {
+    if (this.opened) {
+      this.slideHide(this.display);
+      this.opened = false;
+    }
+  }
+
+  closeByUser() {
+    this.dispatchEvent(
+      new CustomEvent("dile-message-closed-by-user", {
+        detail: this,
+      })
+    );
+    this.close();
+  }
+
+  open() {
+    if(! this.opened ) {
+      this.slideShow(this.display);
+      this.opened = true;
+    }
+  }
+
+  openMessage(msg) {
+    this.message = msg;
+    this.open();
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has("opened") && this.opened) {
+      this.open();
+    }
+  }
+
+}

package/components/modal/index.js

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

package/components/modal/modal.js

@@ -0,0 +1,3 @@
+import { DileModal } from './src/DileModal.js';
+
+customElements.define("dile-modal", DileModal);

package/components/modal/src/DileModal.js

@@ -0,0 +1,194 @@
+import { LitElement, html, css } from "lit";
+import '../../icon/icon.js';
+import { closeIcon } from '@dile/icons/index.js'
+import { DileCloseOnEscPressed } from '../../../mixins/close-on-esc-pressed/index.js'
+
+export class DileModal extends DileCloseOnEscPressed(LitElement) {
+  static get properties() {
+    return {
+      _toChange: { type: Boolean },
+      /**
+       * If true the modal box is in opened status.
+       */
+      opened: { type: Boolean },
+      /**
+       * If true the modal box displays a close icon
+       */
+      showCloseIcon: { type: Boolean },
+      /**
+       * If true the modal box blocks the screen. That is, when you click in the background layer, the modal box do not close.
+       */
+      blocking: { type: Boolean },
+    };
+  }
+
+  constructor() {
+    super();
+    this._toChange = false;
+    this.opened = false;
+    this.showCloseIcon = false;
+    this.blocking = false;
+  }
+
+  static get styles() {
+    return [
+      css`
+        * {
+          box-sizing: border-box;
+        }
+        :host {
+          display: block;
+          --dile-close-icon-template-color: var(
+            --dile-modal-close-icon-color,
+            #888
+          );
+        }
+        .closeicon {
+          --dile-icon-color: var( --dile-modal-close-icon-color, #888);
+        }
+        section {
+          position: fixed;
+          left: 0;
+          top: 0;
+          height: 100vh;
+          width: 100vw;
+          display: none;
+          transition: opacity var(--dile-modal-animation-duration, 0.3s) ease-in;
+          -webkit-transition: opacity var(--dile-modal-animation-duration, 0.3s)
+            ease-in;
+          align-items: center;
+          justify-content: center;
+          z-index: var(--dile-modal-z-index, 100);
+          background-color: var(
+            --dile-modal-background-color,
+            rgba(30, 30, 30, 0.8)
+          );
+        }
+        .content {
+          display: block;
+          position: relative;
+          z-index: var(--dile-modal-content-z-index, 101);
+          width: var(--dile-modal-width, 280px);
+          min-width: var(--dile-modal-min-width, 250px);
+          max-width: var(--dile-modal-max-width, 100vw);
+          height: var(--dile-modal-height, auto);
+          min-height: var(--dile-modal-min-height, auto);
+          max-height: var(--dile-modal-max-height, 100vh);
+          background-color: var(--dile-modal-content-background-color, #fff);
+          box-shadow: var(--dile-modal-content-shadow-displacement, 6px)
+            var(--dile-modal-content-shadow-displacement, 6px)
+            var(--dile-modal-content-shadow-blur, 16px)
+            var(--dile-modal-content-shadow-color, #000);
+          border-radius: var(--dile-modal-border-radius, 15px);
+          padding: var(--dile-modal-content-padding, 1em) 0
+            var(--dile-modal-content-padding, 1em)
+            var(--dile-modal-content-padding, 1em);
+        }
+        article {
+          overflow: auto;
+          max-height: 100%;
+          height: 100%;
+          padding-right: var(--dile-modal-content-padding, 1em);
+        }
+        .transparent {
+          opacity: 0;
+        }
+        .opaque {
+          opacity: 1;
+          display: flex !important;
+        }
+        .opened {
+          display: flex !important;
+        }
+        dile-icon {
+          position: absolute;
+          display: inline-block;
+          top: var(--dile-modal-close-icon-top, 5px);
+          right: var(--dile-modal-close-icon-right, 18px);
+          z-index: 1002;
+          width: var(--dile-modal-close-icon-size, 24px);
+          height: var(--dile-modal-close-icon-size, 24px);
+          cursor: var(--dile-modal-close-icon-cursor, pointer);
+        }
+        .contentIconSeparation {
+          padding-top: var(--dile-modal-extra-top-separation-when-icon, 10px);
+        }
+      `,
+    ];
+  }
+
+  render() {
+    return html`
+      <section
+        class="${this.getModalClass(this.opened, this._toChange)}"
+        @click="${this._backgroundModalClick}"
+        @transitionend="${this.animationEnd}"
+        id="backgroundmodal"
+      >
+        <div class="content" @click="${this.contentClick}">
+          ${this.showCloseIcon
+            ? html`<dile-icon .icon="${closeIcon}" @click="${this.close}" class="closeicon"></dile-icon>`
+            : ""}
+          <article class="${this.showCloseIcon ? "contentIconSeparation" : ""}">
+            <slot></slot>
+          </article>
+        </div>
+      </section>
+    `;
+  }
+
+  getModalClass(opened, _toChange) {
+    if (!opened && !_toChange) {
+      return "transparent";
+    }
+    if (opened && _toChange) {
+      return "transparent opened";
+    }
+    if (opened && !_toChange) {
+      return "opaque";
+    }
+    if (!opened && _toChange) {
+      return "transparent opened";
+    }
+    return '';
+  }
+
+  open() {
+    this.opened = true;
+    this._toChange = true;
+    setTimeout(() => {
+      this._toChange = false;
+    }, 50);
+  }
+
+  _backgroundModalClick(e) {
+    if (!this.blocking && e.target && e.target.getAttribute("id") === "backgroundmodal") {
+      this.close();
+      this.dispatchEvent(
+        new CustomEvent("dile-modal-background-closed", {
+          bubbles: true,
+          composed: true,
+          detail: this,
+        })
+      );
+    }
+  }
+
+  close() {
+    this.opened = false;
+    this._toChange = true;
+    this.dispatchEvent(
+      new CustomEvent("dile-modal-closed", {
+        bubbles: true,
+        composed: true,
+        detail: this,
+      })
+    );
+  }
+
+  animationEnd() {
+    this._toChange = false;
+  }
+
+  
+}

package/components/nav/index.js

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

package/components/nav/nav.js

@@ -0,0 +1,3 @@
+import { DileNav } from './src/DileNav.js';
+
+window.customElements.define('dile-nav', DileNav);

package/components/nav/src/DileNav.js

@@ -0,0 +1,68 @@
+import { html, css, LitElement } from "lit";
+
+export class DileNav extends LitElement {
+  static get styles() {
+    return css`
+        :host {
+          display: grid;
+          grid-template-columns: auto 1fr auto;
+          color: var(--dile-nav-color, #fff);
+          background-color: var(--dile-nav-background-color, #666);
+          align-items: var(--dile-nav-align-items, center);
+          column-gap: var(--dile-nav-column-gap, 1rem);
+          padding: var(--dile-nav-padding-y, 0.8rem) var(--dile-nav-padding-x, 0.6rem);
+        }
+        
+        :host([menu="right"]) {
+          grid-template-columns: 1fr auto auto;
+        }
+
+        :host([menu="right"]) .menu {
+          grid-row-start: 1;
+          grid-row-end: 2;
+          grid-column-start: 3;
+          grid-column-end: 4;
+        }
+
+        :host([menu="right"]) .title {
+          grid-row-start: 1;
+          grid-row-end: 2;
+          grid-column-start: 1;
+          grid-column-end: 2;
+        }
+
+        :host([menu="right"]) .actions {
+          grid-row-start: 1;
+          grid-row-end: 2;
+          grid-column-start: 2;
+          grid-column-end: 3;
+        }
+
+        .title {
+          overflow: hidden;
+        }
+      `
+  }
+  static get properties() {
+    return {
+      menu: {
+        type: String,
+        reflect: true
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.menu = "left"
+  }
+
+  render() {
+    return html`
+      <div class="menu"><slot name="menu"></slot></div>
+      <div class="title"><slot name="title"></slot></div>
+      <div class="actions"><slot name="actions"></slot></div>
+    `;
+  }
+
+}

package/components/order-switch/index.js

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

package/components/order-switch/order-switch.js

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

package/components/order-switch/src/DileOrderSwitch.js

@@ -0,0 +1,74 @@
+import { html, css, LitElement } from "lit";
+import { DileEmmitChange } from '../../../mixins/form/index.js';
+import { switchLeftIcon } from '@dile/icons/index.js';
+import '../../icon/icon.js';
+
+
+export class DileOrderSwitch extends DileEmmitChange(LitElement) {
+  static get properties() {
+    return {
+      value: { type: String },
+      name: { type: String },
+      label: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.value = "asc";
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        margin-bottom: 10px;
+      }
+      div {
+        align-items: center;
+        display: flex;
+      }
+      span {
+        cursor: pointer;
+      }
+      dile-icon {
+        cursor: pointer;
+        transform: rotate(-90deg);
+        margin-right: 0.4rem;
+        transition: transform 0.3s ease-in-out;
+      }
+      .desc {
+        transform: rotate(90deg);
+      }
+    `;
+  }
+
+  render() {
+    return html`
+      <div @click=${this.toggle}>
+        <dile-icon .icon="${switchLeftIcon}" class="${this.value}"></dile-icon>
+        <span>
+          ${this.label}
+        </span>
+      </div>
+    `;
+  }
+
+  updated(changedProperties) {
+    if(changedProperties.has('value')) {
+      if(this.value != "asc" && this.value != "desc") {
+        this.value = "asc";
+      } else if(changedProperties.get('value')) {
+        this.emmitChange();
+      }
+    }
+  }
+
+  toggle() {
+    if (this.value === "asc") {
+      this.value = "desc";
+    } else {
+      this.value = "asc";
+    }
+  }
+}

package/components/pages/index.js

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

package/components/pages/pages.js

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