@digithia/ui/tabs/index.js

Digithia ui package.

!function(t,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")):t.digithiaUi=e(t["./vendors.js"])}(window,(function(t){return function(t){function e(e){for(var a,o,s=e[0],d=e[1],u=e[2],c=0,b=[];c<s.length;c++)o=s[c],Object.prototype.hasOwnProperty.call(r,o)&&r[o]&&b.push(r[o][0]),r[o]=0;for(a in d)Object.prototype.hasOwnProperty.call(d,a)&&(t[a]=d[a]);for(l&&l(e);b.length;)b.shift()();return n.push.apply(n,u||[]),i()}function i(){for(var t,e=0;e<n.length;e++){for(var i=n[e],a=!0,s=1;s<i.length;s++){var d=i[s];0!==r[d]&&(a=!1)}a&&(n.splice(e--,1),t=o(o.s=i[0]))}return t}var a={},r={11:0},n=[];function o(e){if(a[e])return a[e].exports;var i=a[e]={i:e,l:!1,exports:{}};return t[e].call(i.exports,i,i.exports,o),i.l=!0,i.exports}o.m=t,o.c=a,o.d=function(t,e,i){o.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},o.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(o.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var a in t)o.d(i,a,function(e){return t[e]}.bind(null,a));return i},o.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(e,"a",e),e},o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.p="";var s=window.webpackJsonpdigithiaUi=window.webpackJsonpdigithiaUi||[],d=s.push.bind(s);s.push=e,s=s.slice();for(var u=0;u<s.length;u++)e(s[u]);var l=d;return n.push([110,0]),i()}({1:function(t,e,i){"use strict";i.r(e);var a=i(0);e.default=a.css`:host{--dig-ui-global-button-color:grey;--dig-ui-global-valid-color:#0f990f;--dig-ui-global-invalid-color:red}`},10:function(t,e,i){t.exports=(()=>{"use strict";var t={607:function(t,e){var i,a=this&&this.__extends||(i=function(t,e){return(i=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])})(t,e)},function(t,e){function a(){this.constructor=t}i(t,e),t.prototype=null===e?Object.create(e):(a.prototype=e.prototype,new a)});Object.defineProperty(e,"__esModule",{value:!0}),e.DigUtils=e.DigInputError=void 0;var r=function(t){function e(e){return t.call(this,"DigInputError : "+e)||this}return a(e,t),e}(Error);e.DigInputError=r;var n=function(){function t(){}return t.generateUniqueId=function(){return""+Math.random()},t.hasClass=function(t,e){return!!t.className.match(new RegExp("(\\s|^)"+e+"(\\s|$)"))},t.addClass=function(e,i){t.hasClass(e,i)||(e.className+=" "+i)},t.removeClass=function(e,i){if(t.hasClass(e,i)){var a=new RegExp("(\\s|^)"+i+"(\\s|$)");e.className=e.className.replace(a," ")}},t.wrap=function(t,e,i,a){for(var r=0,n=e;r<n.length;r++){var o=n[r];t.appendChild(o)}a?null==i||i.insertBefore(t,a):null==i||i.appendChild(t)},t.firstLetterUppercase=function(t){return t?t.charAt(0).toUpperCase()+t.slice(1):""},t.cssTimeToMilliseconds=function(t){var e=parseFloat(t),i=t.match(/m?s/),a=0;return i&&(i=i[0]),"s"===i?a=1e3*e:"ms"===i&&(a=e),a},t}();e.DigUtils=n}},e={};return function i(a){if(e[a])return e[a].exports;var r=e[a]={exports:{}};return t[a].call(r.exports,r,r.exports,i),r.exports}(607)})()},110:function(t,e,i){i(5),t.exports=i(80)},5:function(e,i){e.exports=t},80:function(t,e,i){"use strict";var a=this&&this.__createBinding||(Object.create?function(t,e,i,a){void 0===a&&(a=i),Object.defineProperty(t,a,{enumerable:!0,get:function(){return e[i]}})}:function(t,e,i,a){void 0===a&&(a=i),t[a]=e[i]}),r=this&&this.__exportStar||function(t,e){for(var i in t)"default"===i||Object.prototype.hasOwnProperty.call(e,i)||a(e,t,i)};Object.defineProperty(e,"__esModule",{value:!0}),r(i(81),e),r(i(83),e)},81:function(t,e,i){"use strict";var a=this&&this.__decorate||function(t,e,i,a){var r,n=arguments.length,o=n<3?e:null===a?a=Object.getOwnPropertyDescriptor(e,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,i,a);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(o=(n<3?r(o):n>3?r(e,i,o):r(e,i))||o);return n>3&&o&&Object.defineProperty(e,i,o),o},r=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0}),e.DigUiTab=void 0;const n=i(0),o=i(2),s=r(i(1)),d=r(i(82));let u=class extends n.LitElement{constructor(){super(...arguments),this.tabTitle="New Tab",this.selected=!1}updated(){this.dispatchEvent(new CustomEvent("updated",{bubbles:!0}))}render(){return n.html`
      <div class="dig-ui-tab ${o.classMap({selected:this.selected})}">
        <slot></slot>
      </div>
    `}};u.styles=n.css`
    ${s.default}
    ${d.default}
  `,a([n.property({type:String,attribute:"tab-title",reflect:!0})],u.prototype,"tabTitle",void 0),a([n.property({type:Boolean,reflect:!0})],u.prototype,"selected",void 0),u=a([n.customElement("dig-ui-tab")],u),e.DigUiTab=u},82:function(t,e,i){"use strict";i.r(e);var a=i(0);e.default=a.css`.dig-ui-tab{display:none}.dig-ui-tab.selected{display:block}`},83:function(t,e,i){"use strict";var a=this&&this.__decorate||function(t,e,i,a){var r,n=arguments.length,o=n<3?e:null===a?a=Object.getOwnPropertyDescriptor(e,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,i,a);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(o=(n<3?r(o):n>3?r(e,i,o):r(e,i))||o);return n>3&&o&&Object.defineProperty(e,i,o),o},r=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0}),e.DigUiTabset=void 0;const n=i(0),o=i(2),s=r(i(1)),d=r(i(84)),u=i(10);var l;!function(t){t.backwardOut="animateBackwardsOut",t.backwardIn="animateBackwardsIn",t.forwardOut="animateForwardsOut",t.forwardIn="animateForwardsIn"}(l||(l={}));let c=class extends n.LitElement{constructor(){super(...arguments),this.tabs=[],this.titles=[],this.selectedTabIndex=0,this.animateClass=""}render(){return n.html`
      <div class="dig-ui-tabset">
        <div class="dig-ui-tabset-titles">
          ${this.titles.map((t,e)=>n.html`
              <div
                class="dig-ui-tabset-title ${o.classMap({selected:e===this.selectedTabIndex})}"
                @click="${()=>{this.changeTab(e)}}"
                @keydown="${t=>{"Enter"===t.key&&this.changeTab(e)}}"
                tabindex="${e+1}"
              >
                ${t}
              </div>
            `)}
        </div>
        <div class="dig-ui-tabset-content ${this.animateClass}">
          <slot
            @slotchange="${this.slotChange}"
            @updated="${this.slotChange}"
          ></slot>
        </div>
      </div>
    `}slotChange(){var t;this.tabs=(null===(t=this.slotEl)||void 0===t?void 0:t.assignedElements())||[],this.titles=this.tabs.map(t=>t.getAttribute("tab-title")),this.selectedTabIndex=this.tabs.map(t=>t.getAttribute("selected")).reduce((t,e,i)=>null!==e?i:t,0)}changeTab(t){const e=this.selectedTabIndex;if(e===t)return;this.animateClass=t>e?l.backwardOut:l.forwardOut;const i=getComputedStyle(this).getPropertyValue("--dig-ui-tabset-animation-duration"),a=u.DigUtils.cssTimeToMilliseconds(i);this.selectedTabIndex=t;for(const t of this.tabs)t.removeAttribute("selected");this.tabs[t].setAttribute("selected",""),this.animateClass=t>e?l.backwardIn:l.forwardIn,setTimeout(()=>{this.animateClass=""},a),this.dispatchEvent(new CustomEvent("select",{detail:this.selectedTabIndex}))}};c.styles=n.css`
    ${s.default}
    ${d.default}
  `,a([n.internalProperty()],c.prototype,"tabs",void 0),a([n.internalProperty()],c.prototype,"titles",void 0),a([n.internalProperty()],c.prototype,"selectedTabIndex",void 0),a([n.internalProperty()],c.prototype,"animateClass",void 0),a([n.query("slot")],c.prototype,"slotEl",void 0),c=a([n.customElement("dig-ui-tabset")],c),e.DigUiTabset=c},84:function(t,e,i){"use strict";i.r(e);var a=i(0);e.default=a.css`:host{--dig-ui-tabset-title-height:40px;--dig-ui-tabset-title-selected-background:rgba(0,0,255,0.0365);--dig-ui-tabset-title-hover-background:rgba(0,0,255,0.0665);--dig-ui-tabset-title-hover-selected-background:rgba(0,0,255,0.0765);--dig-ui-tabset-title-hover-animation-duration:0.1s;--dig-ui-tabset-title-padding:2px;--dig-ui-tabset-border-radius:6px;--dig-ui-tabset-border-width:1px;--dig-ui-tabset-border-color:rgba(0,0,0,0.2);--dig-ui-tabset-title-border-width:1px;--dig-ui-tabset-title-border-color:rgba(0,0,0,0.125);--dig-ui-tabset-content-padding:5px;--dig-ui-tabset-width:100%;--dig-ui-tabset-animation-duration:0.25s}.dig-ui-tabset,:host{display:flex;width:var(--dig-ui-tabset-width)}.dig-ui-tabset{flex-flow:column;border:var(--dig-ui-tabset-border-color) var(--dig-ui-tabset-border-width) solid;border-radius:var(--dig-ui-tabset-border-radius);overflow-x:hidden}.dig-ui-tabset-titles{display:flex;border-bottom:var(--dig-ui-tabset-title-border-color) var(--dig-ui-tabset-title-border-width) solid;overflow:scroll}.dig-ui-tabset-title{flex:1;justify-content:center;align-items:center;min-height:var(--dig-ui-tabset-title-height);padding:var(--dig-ui-tabset-title-padding);display:flex;transition:background-color var(--dig-ui-tabset-title-hover-animation-duration)}.dig-ui-tabset-title:not(:last-child){border-right:var(--dig-ui-tabset-title-border-color) var(--dig-ui-tabset-title-border-width) solid}.dig-ui-tabset-title:hover{cursor:pointer;background-color:var(--dig-ui-tabset-title-hover-background)}.dig-ui-tabset-title.selected{background-color:var(--dig-ui-tabset-title-selected-background)}.dig-ui-tabset-title:hover.selected{background-color:var(--dig-ui-tabset-title-hover-selected-background)}.dig-ui-tabset-content{padding:var(--dig-ui-tabset-content-padding);overflow:scroll}.animateForwardsOut{-webkit-animation-name:contentForwardsOut;animation-name:contentForwardsOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:var(--dig-ui-tabset-animation-duration);animation-duration:var(--dig-ui-tabset-animation-duration)}.animateBackwardsOut{-webkit-animation-name:contentBackwardsOut;animation-name:contentBackwardsOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:var(--dig-ui-tabset-animation-duration);animation-duration:var(--dig-ui-tabset-animation-duration)}.animateForwardsIn{-webkit-animation-name:contentForwardsIn;animation-name:contentForwardsIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:var(--dig-ui-tabset-animation-duration);animation-duration:var(--dig-ui-tabset-animation-duration)}.animateBackwardsIn{-webkit-animation-name:contentBackwardsIn;animation-name:contentBackwardsIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:var(--dig-ui-tabset-animation-duration);animation-duration:var(--dig-ui-tabset-animation-duration)}@-webkit-keyframes contentForwardsOut{to{transform:translateX(50%);opacity:0}}@keyframes contentForwardsOut{to{transform:translateX(50%);opacity:0}}@-webkit-keyframes contentBackwardsOut{to{transform:translateX(-50%);opacity:0}}@keyframes contentBackwardsOut{to{transform:translateX(-50%);opacity:0}}@-webkit-keyframes contentForwardsIn{0%{transform:translateX(-50%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes contentForwardsIn{0%{transform:translateX(-50%);opacity:0}to{transform:translateX(0);opacity:1}}@-webkit-keyframes contentBackwardsIn{0%{transform:translateX(50%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes contentBackwardsIn{0%{transform:translateX(50%);opacity:0}to{transform:translateX(0);opacity:1}}`}})}));