@dile/ui 2.0.6 → 2.0.7

package/components/avatar/src/DileAvatar.js

@@ -7,6 +7,7 @@ export class DileAvatar extends LitElement {
         display: inline-block;
       }
       div {
+        font-family: var(--dile-avatar-font-family, Arial, sans-serif);
         display: inline-block;
         background-repeat: no-repeat;
         background-position: center;
@@ -15,13 +16,18 @@ export class DileAvatar extends LitElement {
         height: var(--dile-avatar-size, 36px);
         border-radius: var(--dile-avatar-size, 36px);
         background-size: var(--dile-avatar-size, 36px);
-        background-color: var(--dile-avatar-background-color, #ddd);
+        background-color: var(--dile-avatar-background-color, var(--dile-primary-color, #ddd));
         color: var(--dile-avatar-color, #888);
         text-align: center;
-        font-size: calc(var(--dile-avatar-size, 36px) - 11px);
+        font-size: calc(var(--dile-avatar-size, 36px) - 14px);
         font-weight: bold;
         text-transform: uppercase;
       }
+      .initial {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
     `;
   }
   static get properties() {

package/components/hamburger/index.js

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

package/components/radio-group/radio-group.js

@@ -1,3 +1,4 @@
+import './radio.js';
 import { DileRadioGroup } from "./src/DileRadioGroup.js";
 
 window.customElements.define("dile-radio-group", DileRadioGroup);

package/components/rating-scale-question/rating-scale-question.js

@@ -1,3 +1,4 @@
+import './rating-scale-option.js';
 import { DileRatingScaleQuestion } from "./src/DileRatingScaleQuestion.js";
 
 window.customElements.define("dile-rating-scale-question", DileRatingScaleQuestion);

package/components/slide-menu/index.js

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

package/components/slide-menu/slide-menu.js

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

package/components/slide-menu/src/DileSlideMenu.js

@@ -0,0 +1,115 @@
+import { LitElement, html, css } from 'lit';
+import { DileSlideDown } from '../../../mixins/slide-down';
+import { arrowDropDownIcon } from '@dile/icons';
+import '@dile/ui/components/icon/icon.js';
+
+export class DileSlideMenu extends DileSlideDown(LitElement) {
+  static get properties() {
+    return {
+      opened: { type: Boolean },
+      label: { type: String },
+      icon: { type: Object },
+    }
+  }
+
+  constructor() {
+    super();
+    this.opened = false;
+    this.label = "Menu";
+    this.icon = arrowDropDownIcon;
+  }
+
+  static get styles() {
+    return css`
+      * {
+        box-sizing: border-box;
+      } 
+      :host {
+        display: block;
+      }
+
+      #content {
+        height: 0;
+        overflow: hidden;
+        transition: height 0.5s ease-in;
+        -webkit-transition: height 0.5s ease-in;
+        padding: 1px 0;
+      }
+      .container {
+        padding: 1px 0;
+      }
+      nav {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        font-size: var(--dile-slide-menu-font-size, 1em);
+        color: var(--dile-foreground-color, #303030);
+        font-weight: var(--dile-slide-menu-font-weight, bold);
+        text-decoration: var(--dile-slide-menu-text-decoration, none);
+        --dile-icon-color: var(--dile-foreground-color, #303030);
+        margin: var(--dile-slide-menu-control-margin, 0 0 0.25rem 0);
+      }
+      
+      dile-icon {
+        transform: var(--dile-slide-menu-closed-transform, rotate(-90deg));
+        transition: transform 0.5s ease;
+      }
+
+      nav.opened dile-icon {
+        transform: var(--dile-slide-menu-opened-transform, rotate(0deg));
+      }
+    `;
+  }
+
+  firstUpdated() {
+    this.content = this.shadowRoot.getElementById('content');
+  }
+
+  updated(changedProperties) {
+    if(changedProperties.has('opened') && this.opened != undefined) {
+      if(this.opened) {
+        this.slideShow(this.content);
+      } else {
+        this.slideHide(this.content);
+      }
+    }
+  }
+
+  render() {
+    return html`
+    <nav @click="${this.toggle}" class="${this.opened ? 'opened' : ''}">
+      <dile-icon .icon=${this.icon}></dile-icon>
+      <span>
+        ${this.label}
+      </span>
+    </nav>
+    <div id="content">
+      <div class="container">
+        <slot></slot>
+      </div>
+    </div> 
+    `;
+  }
+  
+  toggle() {
+    if (this.opened) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+
+  open() {
+    if(! this.opened) {
+      this.slideShow(this.content);
+      this.opened = true;
+    }
+  }
+  
+  close() {
+    if(this.opened) {
+      this.slideHide(this.content);
+      this.opened = false;
+    }
+  }
+}

package/components/slide-show/src/DileSlideShow.js

@@ -39,7 +39,7 @@ export class DileSlideShow extends DileSlideDown(LitElement) {
         padding-top: 0.5em;
         cursor: pointer;
         text-align: var(--dile-slide-show-align-control, left);
-        font-size: var(--dile-slide-down-font-size, 1em);
+        font-size: var(--dile-slide-show-font-size, 1em);
         color: var(--dile-slide-show-text-color, #39c);
         font-weight: var(--dile-slide-show-font-weight, bold);
         text-decoration: var(--dile-slide-show-text-decoration, none);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "scripts": {
@@ -20,11 +20,11 @@
   },
   "homepage": "https://github.com/Polydile/Components#readme",
   "dependencies": {
-    "@dile/icons": "^2.0.2",
+    "@dile/icons": "^2.0.3",
     "lit": "^2.7.0 || ^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4975cb82b260d73a7120d87755ed53b290ee881e"
+  "gitHead": "7d521acefdc4edef45f7f4c3dd0f454013a9e75a"
 }