@dile/ui 2.0.1

package/components/checkbox/src/DileCheckbox.js

@@ -0,0 +1,154 @@
+import { html, css, LitElement } from "lit";
+import { DileEmmitChange } from '../../../mixins/form/index.js'; 
+
+export class DileCheckbox extends DileEmmitChange(LitElement) {
+  static get properties() {
+    return {
+      checked: { type: Boolean },
+      disabled: { type: Boolean },
+      _hasInner: { type: Boolean },
+      name: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.checked = false;
+    this.name = '';
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: inline-block;
+      }
+      div {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+      }
+      div.disabled {
+        opacity: 0.5;
+        cursor: auto;
+      }
+      .checkbox {
+        display: flex;
+        background-color: var(--dile-checkbox-checked-color, #30a030);
+        border-radius: 4px;
+        width: var(--dile-checkbox-size, 20px);
+        height: var(--dile-checkbox-size, 20px);
+        line-height: 0;
+        align-items: center;
+        justify-content: center;
+      }
+      .isUnchecked {
+        background-color: var(--dile-checkbox-unchecked-color, #ccc);
+      }
+      path[fill="none"],
+      .checked path[fill="none"] {
+        fill: transparent;
+      }
+      path {
+        fill: var(--dile-checkbox-fill-color, #fff);
+      }
+      .checked path {
+        fill: var(--dile-checkbox-unchecked-fill-color, #fff);
+      }
+      svg {
+        width: var(--dile-checkbox-size, 20px);
+        height: var(--dile-checkbox-size, 20px);
+        line-height: var(--dile-checkbox-size, 20px);
+      }
+      .label {
+        margin-left: 10px;
+        font-weight: var(--dile-checkbox-font-weight, normal);
+        color: var(--dile-checkbox-label-color, #303030);
+      }
+      .disabled .label {
+        color: var(--dile-checkbox-label-disabled-color, #303030);
+      }
+    `;
+  }
+
+  firstUpdated() {
+    this._hasInner = this.innerHTML.trim().length ? true : false;
+  }
+
+  get value() {
+    return this.checked;
+  }
+
+  set value(value) {
+    this.checked = value;
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has("checked")) {
+      this.emmitChange();
+    }
+  }
+
+  render() {
+    return html`
+      <div @click="${this.doClick}" class="${this.disabled ? "disabled" : ""}">
+        <a href="#" @click="${this.linkClick}" @keypress="${this.doKeyPress}" class="checkbox ${this.checked ? "isChecked" : "isUnchecked"}">
+          ${this.checked ? this.checkedIcon : this.unCheckedIcon}
+        </a>
+        ${this._hasInner
+          ? html` <span class="label">
+              <slot></slot>
+            </span>`
+          : ""}
+      </div>
+    `;
+  }
+
+  doClick() {
+    if (this.disabled) {
+      return;
+    }
+    this.checked = !this.checked;
+    this.dispatchEvent(
+      new CustomEvent("dile-checkbox-changed", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          checked: this.checked,
+          name: this.name,
+        }
+      })
+    );
+  }
+
+  get checkedIcon() {
+    return html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path
+        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+      />
+    </svg>`;
+  }
+  get unCheckedIcon() {
+    return html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+      />
+      <path d="M0 0h24v24H0z" fill="none" />
+    </svg>`;
+  }
+
+  doKeyPress(e) {
+    e.preventDefault();
+    if (e.keyCode == 32 || e.code == "Space") {
+      this.doClick();
+    }
+  }
+  
+  linkClick(e) {
+    e.preventDefault();
+  }
+
+  clear() {
+    this.checked = false;
+  }
+}

package/components/confirm/confirm.js

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

package/components/confirm/index.js

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

package/components/confirm/src/DileConfirm.js

@@ -0,0 +1,121 @@
+import { LitElement, html, css } from "lit";
+import "../../modal/modal.js";
+
+export class DileConfirm extends LitElement {
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+      .button {
+        border-radius: var(--dile-confirm-border-radius-button, 5px);
+        padding: var(--dile-confirm-padding-button, 7px);
+        font-size: var(--dile-confirm-font-size-button, 1em);
+        text-transform: var(--dile-confirm-text-transform, uppercase);
+        text-decoration: none;
+      }
+      .cancel {
+        background-color: var(--dile-confirm-cancel-button-color, #dc3545);
+        color: var(--dile-confirm-cancel-text-button-color, #fff);
+        font-weight: var(--dile-confirm-font-weight-cancel-button, var(--dile-confirm-font-weight-button, normal));
+      }
+      .accept {
+        background-color: var(--dile-confirm-accept-button-color, #007bff);
+        color: var(--dile-confirm-accept-text-button-color, #fff);
+        font-weight: var(--dile-confirm-font-weight-accept-button, var(--dile-confirm-font-weight-button, normal));
+
+      }
+      .actions {
+        margin-top: var(--dile-confirm-buttons-margin-top, 10px);
+        margin-bottom: var(--dile-confirm-buttons-margin-bottom, 10px);
+        margin-right: var(--dile-confirm-buttons-margin-right, 0);
+        margin-left: var(--dile-confirm-buttons-margin-left, 0);
+        text-align: var(--dile-confirm-buttons-text-align, right);
+      }
+      .actions a {
+        margin: 4px;
+        white-space: nowrap;
+        display: inline-block;
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      opened: { type: Boolean },
+      acceptLabel: { type: String },
+      cancelLabel: { type: String },
+      blocking: { type: Boolean },
+    };
+  }
+
+  constructor() {
+    super();
+    this.acceptLabel = "Accept";
+    this.cancelLabel = "Cancell";
+    this.opened = false;
+    this.blocking = false;
+  }
+
+  render() {
+    return html`
+      <dile-modal
+        ?blocking="${this.blocking}"
+        ?opened="${this.opened}"
+        id="modal"
+        @dile-modal-background-closed="${this.cancel}"
+      >
+        <slot></slot>
+        <div class="actions">
+          <a href="#" class="button cancel" @click="${this._cancelHandler}"
+            >${this.cancelLabel}</a
+          >
+          <a href="#" class="button accept" @click="${this._acceptHandler}"
+            >${this.acceptLabel}</a
+          >
+        </div>
+      </dile-modal>
+    `;
+  }
+
+  _cancelHandler(e) {
+    e.preventDefault();
+    this.cancel();
+  }
+  _acceptHandler(e) {
+    e.preventDefault();
+    this.accept();
+  }
+
+  open() {
+    this.opened = true;
+  }
+
+  close() {
+    this.opened = false;
+  }
+
+  firstUpdated() {
+    this.modal = this.shadowRoot.getElementById("modal");
+  }
+
+  accept() {
+    this.close();
+    this.dispatchEvent(
+      new CustomEvent("dile-confirm-accepted", {
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  cancel() {
+    this.close();
+    this.dispatchEvent(
+      new CustomEvent("dile-confirm-cancelled", {
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+}

package/components/datepicker/calendar.js

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

package/components/datepicker/datepicker.js

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

package/components/datepicker/index.js

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

package/components/datepicker/src/DileCalendar.js

@@ -0,0 +1,72 @@
+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

@@ -0,0 +1,114 @@
+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();
+  }  
+}

package/components/hamburger/hamburger.js

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

package/components/hamburger/index.js

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

package/components/hamburger/src/DileHamburger.js

@@ -0,0 +1,129 @@
+import { html, css, LitElement } from "lit";
+
+export class DileHamburger extends LitElement {
+  static get properties() {
+    return {
+      active: { type: Boolean },
+    };
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: inline-block;
+      }
+      .hamburger {
+        padding: var(--dile-hamburger-padding-y, 15px) var(--dile-hamburger-padding-x, 15px);
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        transition-property: opacity, filter;
+        transition-duration: 0.15s;
+        transition-timing-function: linear;
+        font: inherit;
+        color: inherit;
+        text-transform: none;
+        background-color: transparent;
+        border: 0;
+        margin: 0;
+        overflow: visible;
+      }
+      .hamburger:hover {
+        opacity: 0.7;
+      }
+      .hamburger.is-active:hover {
+        opacity: 0.7;
+      }
+      .hamburger.is-active .hamburger-inner,
+      .hamburger.is-active .hamburger-inner::before,
+      .hamburger.is-active .hamburger-inner::after {
+        background-color: var(--dile-hamburger-active-color, #000);
+      }
+
+      .hamburger-box {
+        width: var(--dile-hamburger-width, 24px);
+        height: var(--dile-hamburger-height, 24px);
+        display: inline-block;
+        position: relative;
+      }
+
+      .hamburger-inner {
+        display: block;
+        top: 50%;
+        margin-top: 0px;
+      }
+      .hamburger-inner,
+      .hamburger-inner::before,
+      .hamburger-inner::after {
+        width: var(--dile-hamburger-width, 24px);
+        height: var(--dile-hamburger-line-size, 3px);
+        background-color: var(--dile-hamburger-color, #000);
+        border-radius: var(--dile-hamburger-line-size, 3px);
+        position: absolute;
+        transition-property: transform;
+        transition-duration: 0.15s;
+        transition-timing-function: ease;
+      }
+      .hamburger-inner::before,
+      .hamburger-inner::after {
+        content: "";
+        display: block;
+      }
+      .hamburger-inner::before {
+        top: var(--dile-hamburger-line-separation, -6px);
+      }
+      .hamburger-inner::after {
+        bottom: var(--dile-hamburger-line-separation, -6px);
+      }
+
+      /*
+        * Squeeze
+        */
+      .hamburger--squeeze .hamburger-inner {
+        transition-duration: 0.075s;
+        transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+      }
+      .hamburger--squeeze .hamburger-inner::before {
+        transition: top 0.075s 0.12s ease, opacity 0.075s ease;
+      }
+      .hamburger--squeeze .hamburger-inner::after {
+        transition: bottom 0.075s 0.12s ease,
+          transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+      }
+
+      .hamburger--squeeze.is-active .hamburger-inner {
+        transform: rotate(45deg);
+        transition-delay: 0.12s;
+        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+      }
+      .hamburger--squeeze.is-active .hamburger-inner::before {
+        top: 0;
+        opacity: 0;
+        transition: top 0.075s ease, opacity 0.075s 0.12s ease;
+      }
+      .hamburger--squeeze.is-active .hamburger-inner::after {
+        bottom: 0;
+        transform: rotate(-90deg);
+        transition: bottom 0.075s ease,
+          transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
+      }
+
+      button:focus {
+        outline: none;
+      }
+    `;
+  }
+
+  render() {
+    return html`
+      <button
+        class="hamburger hamburger--squeeze ${this.active ? "is-active" : ""}"
+        type="button"
+      >
+        <span class="hamburger-box">
+          <span class="hamburger-inner"></span>
+        </span>
+      </button>
+    `;
+  }
+}

package/components/icon/icon.js

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

package/components/icon/index.js

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

package/components/icon/src/DileIcon.js

@@ -0,0 +1,40 @@
+import { html, css, LitElement } from "lit";
+import { iconStyles } from '@dile/icons/index.js';
+
+export class DileIcon extends LitElement {
+  static get properties() {
+    return {
+      icon: { type: Object },
+    };
+  }
+
+  static get styles() {
+    return [
+      iconStyles,
+      css`
+        :host {
+          display: inline-block;
+        }
+        span {
+          display: flex;
+          align-items: center;
+        }
+        path {
+          transition-duration: 0.3s;
+          transition-timing-function: ease-in-out;
+          transition-property: fill;
+        }
+        :host([rounded]) {
+          background-color: var(--dile-icon-rounded-background-color, #eee);
+          border-radius: 50%;
+          padding: var(--dile-icon-rounded-padding, 0.5rem);
+        }
+    `];
+  }
+
+  render() {
+    return html`
+      <span>${this.icon}</span>
+    `;
+  }
+}

package/components/icon-switch/icon-switch-group.js

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

package/components/icon-switch/icon-switch.js

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

package/components/icon-switch/index.js

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