@digithia/ui/nav/index.js

Digithia ui package.

!function(i,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("./vendors.js")):"function"==typeof define&&define.amd?define("digithiaUi",["./vendors.js"],e):"object"==typeof exports?exports.digithiaUi=e(require("./vendors.js")):i.digithiaUi=e(i["./vendors.js"])}(window,(function(i){return function(i){function e(e){for(var o,n,d=e[0],s=e[1],l=e[2],g=0,c=[];g<d.length;g++)n=d[g],Object.prototype.hasOwnProperty.call(r,n)&&r[n]&&c.push(r[n][0]),r[n]=0;for(o in s)Object.prototype.hasOwnProperty.call(s,o)&&(i[o]=s[o]);for(u&&u(e);c.length;)c.shift()();return a.push.apply(a,l||[]),t()}function t(){for(var i,e=0;e<a.length;e++){for(var t=a[e],o=!0,d=1;d<t.length;d++){var s=t[d];0!==r[s]&&(o=!1)}o&&(a.splice(e--,1),i=n(n.s=t[0]))}return i}var o={},r={8:0},a=[];function n(e){if(o[e])return o[e].exports;var t=o[e]={i:e,l:!1,exports:{}};return i[e].call(t.exports,t,t.exports,n),t.l=!0,t.exports}n.m=i,n.c=o,n.d=function(i,e,t){n.o(i,e)||Object.defineProperty(i,e,{enumerable:!0,get:t})},n.r=function(i){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(i,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(i,"__esModule",{value:!0})},n.t=function(i,e){if(1&e&&(i=n(i)),8&e)return i;if(4&e&&"object"==typeof i&&i&&i.__esModule)return i;var t=Object.create(null);if(n.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:i}),2&e&&"string"!=typeof i)for(var o in i)n.d(t,o,function(e){return i[e]}.bind(null,o));return t},n.n=function(i){var e=i&&i.__esModule?function(){return i.default}:function(){return i};return n.d(e,"a",e),e},n.o=function(i,e){return Object.prototype.hasOwnProperty.call(i,e)},n.p="";var d=window.webpackJsonpdigithiaUi=window.webpackJsonpdigithiaUi||[],s=d.push.bind(d);d.push=e,d=d.slice();for(var l=0;l<d.length;l++)e(d[l]);var u=s;return a.push([107,0]),t()}({1:function(i,e,t){"use strict";t.r(e);var o=t(0);e.default=o.css`:host{--dig-ui-global-button-color:grey;--dig-ui-global-valid-color:#0f990f;--dig-ui-global-invalid-color:red}`},107:function(i,e,t){t(5),i.exports=t(67)},5:function(e,t){e.exports=i},67:function(i,e,t){"use strict";var o=this&&this.__createBinding||(Object.create?function(i,e,t,o){void 0===o&&(o=t),Object.defineProperty(i,o,{enumerable:!0,get:function(){return e[t]}})}:function(i,e,t,o){void 0===o&&(o=t),i[o]=e[t]}),r=this&&this.__exportStar||function(i,e){for(var t in i)"default"===t||Object.prototype.hasOwnProperty.call(e,t)||o(e,i,t)};Object.defineProperty(e,"__esModule",{value:!0}),r(t(68),e),r(t(70),e),r(t(72),e)},68:function(i,e,t){"use strict";var o=this&&this.__decorate||function(i,e,t,o){var r,a=arguments.length,n=a<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,t):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(i,e,t,o);else for(var d=i.length-1;d>=0;d--)(r=i[d])&&(n=(a<3?r(n):a>3?r(e,t,n):r(e,t))||n);return a>3&&n&&Object.defineProperty(e,t,n),n},r=this&&this.__importDefault||function(i){return i&&i.__esModule?i:{default:i}};Object.defineProperty(e,"__esModule",{value:!0}),e.DigUiNavBarItem=void 0;const a=t(0),n=r(t(1)),d=r(t(69));let s=class extends a.LitElement{render(){return a.html`
      <div class="item">
        <slot></slot>
      </div>
    `}};s.styles=a.css`
    ${n.default}
    ${d.default}
  `,s=o([a.customElement("dig-ui-nav-bar-item")],s),e.DigUiNavBarItem=s},69:function(i,e,t){"use strict";t.r(e);var o=t(0);e.default=o.css`:host{--dig-ui-nav-bar-item-padding:10px;--dig-ui-nav-bar-item-color:#616161;--dig-ui-nav-bar-item-font-size:var(--dig-ui-nav-bar-font-size);--dig-ui-nav-bar-item-font-weight:var(--dig-ui-nav-bar-font-weight);--dig-ui-nav-bar-item-text-decoration:none;--dig-ui-nav-bar-item-hover-animation-duration:0.1s;--dig-ui-nav-bar-item-hover-color:#616161;--dig-ui-nav-bar-item-hover-background-color:#ddd;--dig-ui-nav-bar-item-hover-text-decoration:underline;display:table-cell;cursor:pointer;vertical-align:middle;padding:var(--dig-ui-nav-bar-item-padding);font-size:var(--dig-ui-nav-bar-item-font-size);font-weight:var(--dig-ui-nav-bar-item-font-weight);-webkit-text-decoration:var(--dig-ui-nav-bar-item-text-decoration);text-decoration:var(--dig-ui-nav-bar-item-text-decoration);transition:all var(--dig-ui-nav-bar-item-hover-animation-duration)}:host(:hover){background-color:var(--dig-ui-nav-bar-item-hover-background-color);color:var(--dig-ui-nav-bar-item-hover-color);-webkit-text-decoration:var(--dig-ui-nav-bar-item-hover-text-decoration);text-decoration:var(--dig-ui-nav-bar-item-hover-text-decoration)}::slotted(img){display:block}.item{white-space:nowrap;color:var(--dig-ui-nav-bar-item-color)}`},70:function(i,e,t){"use strict";var o=this&&this.__decorate||function(i,e,t,o){var r,a=arguments.length,n=a<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,t):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(i,e,t,o);else for(var d=i.length-1;d>=0;d--)(r=i[d])&&(n=(a<3?r(n):a>3?r(e,t,n):r(e,t))||n);return a>3&&n&&Object.defineProperty(e,t,n),n},r=this&&this.__importDefault||function(i){return i&&i.__esModule?i:{default:i}};Object.defineProperty(e,"__esModule",{value:!0}),e.DigUiSideBarItem=void 0;const a=t(0),n=t(2),d=r(t(1)),s=r(t(71));let l=class extends a.LitElement{render(){return a.html`
      <div class="${n.classMap({item:!0})}" @click="${this.toggle}">
        <slot></slot>
      </div>
    `}toggle(){this.dispatchEvent(new CustomEvent("toggle",{bubbles:!0}))}attributeChangedCallback(i,e,t){super.attributeChangedCallback(i,e,t)}};l.styles=a.css`
    ${d.default}
    ${s.default}
  `,l=o([a.customElement("dig-ui-side-bar-item")],l),e.DigUiSideBarItem=l},71:function(i,e,t){"use strict";t.r(e);var o=t(0);e.default=o.css`:host{--dig-ui-side-bar-item-color:#616161;--dig-ui-side-bar-item-hover-color:#616161;--dig-ui-side-bar-item-hover-background-color:#ddd;--dig-ui-side-bar-item-padding:10px;--dig-ui-side-bar-item-padding-depth:10px;--dig-ui-side-bar-item-font-size:var(--dig-ui-side-bar-font-size);--dig-ui-side-bar-item-font-weight:var(--dig-ui-side-bar-font-weight);--dig-ui-side-bar-item-font:var(--dig-ui-side-bar-font);--dig-ui-side-bar-item-text-decoration:none;--dig-ui-side-bar-item-hover-animation-duration:0.1s;--dig-ui-side-bar-item-hover-text-decoration:underline;display:block;cursor:pointer;width:100%;font-size:var(--dig-ui-side-bar-item-font-size);font-weight:var(--dig-ui-side-bar-item-font-weight);-webkit-text-decoration:var(--dig-ui-side-bar-item-text-decoration);text-decoration:var(--dig-ui-side-bar-item-text-decoration);transition:all var(--dig-ui-side-bar-item-hover-animation-duration)}:host(:hover){background-color:var(--dig-ui-side-bar-item-hover-background-color);color:var(--dig-ui-side-bar-item-hover-color);-webkit-text-decoration:var(--dig-ui-side-bar-item-hover-text-decoration);text-decoration:var(--dig-ui-side-bar-item-hover-text-decoration)}.item{padding:var(--dig-ui-side-bar-item-padding);color:var(--dig-ui-side-bar-item-color)}`},72:function(i,e,t){"use strict";var o=this&&this.__decorate||function(i,e,t,o){var r,a=arguments.length,n=a<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,t):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(i,e,t,o);else for(var d=i.length-1;d>=0;d--)(r=i[d])&&(n=(a<3?r(n):a>3?r(e,t,n):r(e,t))||n);return a>3&&n&&Object.defineProperty(e,t,n),n},r=this&&this.__importDefault||function(i){return i&&i.__esModule?i:{default:i}};Object.defineProperty(e,"__esModule",{value:!0}),e.DigUiView=void 0;const a=t(0),n=t(2),d=r(t(1)),s=r(t(73));let l=class extends a.LitElement{constructor(){super(),this.toggled=!1,this.closeMenu=!1,this.resize=()=>{var i;const e=null===(i=this.shadowRoot)||void 0===i?void 0:i.host.clientWidth;e&&e<=600&&this.toggled?(this.toggled=!1,this.dispatchEvent(new CustomEvent("toggle",{detail:!1}))):e&&e>600&&!this.toggled&&(this.toggled=!0,this.dispatchEvent(new CustomEvent("toggle",{detail:!0})))},window.addEventListener("resize",this.resize)}render(){return a.html`
      <div class="nav-bar">
        ${this.closeMenu?a.html` <dig-ui-nav-bar-item
              slot="nav-bar"
              class="dig-ui-nav-bar-item-menu-button"
              @click="${()=>{this.toggle()}}"
            >
              <dig-ui-menu-button
                ?toggled="${this.toggled}"
              ></dig-ui-menu-button>
            </dig-ui-nav-bar-item>`:""}
        <slot name="nav-bar"></slot>
      </div>
      <div class="main">
        <div class="${n.classMap({"side-bar":!0,toggled:this.toggled})}">
          <slot
            id="dig-ui-side-bar"
            name="side-bar"
            @slotchange="${this.slotChangeSideBar}"
            @toggle="${this.closeMobileSideBar}"
          ></slot>
        </div>
        <div class="content" @click="${this.closeMobileSideBar}">
          <div class="filter"></div>
          <slot name="content"></slot>
          <slot name="footer"></slot>
        </div>
      </div>
    `}slotChangeSideBar(i){this.resize(),this.refreshSideBar()}refreshSideBar(){var i,e;const t=null===(i=this.shadowRoot)||void 0===i?void 0:i.querySelector(".nav-bar"),o=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".side-bar"),r=null==t?void 0:t.clientHeight,a=null==o?void 0:o.clientWidth;this.style.setProperty("--dig-ui-nav-bar-height",r+1+"px"),this.style.setProperty("--dig-ui-side-bar-width",a+1+"px")}toggle(){this.toggled=!this.toggled}closeMobileSideBar(){var i;const e=null===(i=this.shadowRoot)||void 0===i?void 0:i.host.clientWidth;e&&e<=600&&this.toggled&&(this.toggled=!1,this.dispatchEvent(new CustomEvent("toggle",{detail:!1})))}};l.styles=a.css`
    ${d.default}
    ${s.default}
  `,o([a.property({type:Boolean,reflect:!0})],l.prototype,"toggled",void 0),o([a.property({type:Boolean,attribute:"close-menu"})],l.prototype,"closeMenu",void 0),o([a.query("#dig-ui-side-bar")],l.prototype,"slotNavSideEl",void 0),l=o([a.customElement("dig-ui-view")],l),e.DigUiView=l},73:function(i,e,t){"use strict";t.r(e);var o=t(0);e.default=o.css`:host{--dig-ui-content-background-color:#fff;--dig-ui-nav-bar-padding:10px;--dig-ui-nav-bar-background-color:#ebebeb;--dig-ui-nav-bar-border-color:#ccc;--dig-ui-nav-bar-icon-size:25px;--dig-ui-side-bar-max-width:min(80%,400px);--dig-ui-side-bar-background-color:#ebebeb;--dig-ui-side-bar-border-color:#ccc;--dig-ui-footer-color:#616161;--dig-ui-footer-background-color:#dbdbdb;--dig-ui-side-bar-animation-duration:0.3s;--dig-ui-content-mobile-opacity:0.5;--dig-ui-content-margin:30px;--dig-ui-border-width:1px;--dig-ui-view-font-size:18px;--dig-ui-view-font-weight:500;--dig-ui-view-font:default;--dig-ui-footer-font-size:var(--dig-ui-view-font-size);--dig-ui-footer-font-weight:var(--dig-ui-view-font-weight);--dig-ui-footer-font:var(--dig-ui-view-font);--dig-ui-content-font-size:var(--dig-ui-view-font-size);--dig-ui-content-font-weight:var(--dig-ui-view-font-weight);--dig-ui-content-font:var(--dig-ui-view-font);--dig-ui-nav-bar-font-size:var(--dig-ui-view-font-size);--dig-ui-nav-bar-font-weight:var(--dig-ui-view-font-weight);--dig-ui-nav-bar-font:var(--dig-ui-view-font);--dig-ui-side-bar-font-size:var(--dig-ui-view-font-size);--dig-ui-side-bar-font-weight:var(--dig-ui-view-font-weight);--dig-ui-side-bar-font:var(--dig-ui-view-font);box-sizing:border-box;display:flex;flex-flow:column;height:100vh;font-size:var(--dig-ui-view-font-size);font-weight:var(--dig-ui-view-font-weight);overflow:hidden}.nav-bar{z-index:7;position:fixed;top:0;width:100%;display:block;flex-shrink:0;overflow-x:scroll;background-color:var(--dig-ui-nav-bar-background-color);border-bottom:var(--dig-ui-border-width) solid var(--dig-ui-nav-bar-border-color);font-size:var(--dig-ui-nav-bar-font-size);font-weight:var(--dig-ui-nav-bar-font-weight)}.main{position:relative;overflow-x:hidden;overflow-y:auto;display:flex;flex-grow:1;flex-flow:column;padding-top:var(--dig-ui-nav-bar-height)}.side-bar{position:fixed;overflow:auto;border:0;height:100%;opacity:0;max-width:var(--dig-ui-side-bar-max-width);background-color:var(--dig-ui-side-bar-background-color);border-right:var(--dig-ui-border-width) solid var(--dig-ui-side-bar-border-color);transition:transform var(--dig-ui-side-bar-animation-duration),opacity var(--dig-ui-side-bar-animation-duration);height:calc(100% - var(--dig-ui-nav-bar-height));transform:translateX(calc(0px - var(--dig-ui-side-bar-width)));font-size:var(--dig-ui-side-bar-font-size);font-weight:var(--dig-ui-side-bar-font-weight)}.side-bar.toggled{transform:translateX(0);opacity:1;z-index:10}.content{padding-left:0;transition:padding-left var(--dig-ui-side-bar-animation-duration),width var(--dig-ui-side-bar-animation-duration);display:flex;flex-grow:1;flex-flow:column;position:fixed;overflow:auto;border:0;width:100%;height:calc(100% - var(--dig-ui-nav-bar-height));font-size:var(--dig-ui-side-bar-font-size);font-weight:var(--dig-ui-side-bar-font-weight)}.side-bar.toggled+.content{padding-left:var(--dig-ui-side-bar-width);width:calc(100% - var(--dig-ui-side-bar-width))}::slotted([slot=content]){margin:var(--dig-ui-content-margin);flex-grow:1}::slotted([slot=footer]){flex-shrink:0;display:flex;background-color:var(--dig-ui-footer-background-color);color:var(--dig-ui-footer-color);font-size:var(--dig-ui-footer-font-size);font-weight:var(--dig-ui-footer-font-weight)}.dig-ui-nav-bar-item-menu-button{display:table-cell!important}.filter{z-index:8;position:fixed;height:100%;width:100%;display:none;overflow:hidden;top:var(--dig-ui-nav-bar-height);background-color:#fff;cursor:pointer;opacity:var(--dig-ui-content-mobile-opacity)}@media only screen and (max-width:600px){.side-bar{z-index:10}.side-bar.toggled+.content{padding-left:0;width:100%}.side-bar.toggled+.content .filter{display:flex}::slotted([slot=footer]){flex-direction:column}}`}})}));