@digithia/ui/buttons/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 o,a,u=e[0],d=e[1],s=e[2],c=0,g=[];c<u.length;c++)a=u[c],Object.prototype.hasOwnProperty.call(n,a)&&n[a]&&g.push(n[a][0]),n[a]=0;for(o in d)Object.prototype.hasOwnProperty.call(d,o)&&(t[o]=d[o]);for(l&&l(e);g.length;)g.shift()();return r.push.apply(r,s||[]),i()}function i(){for(var t,e=0;e<r.length;e++){for(var i=r[e],o=!0,u=1;u<i.length;u++){var d=i[u];0!==n[d]&&(o=!1)}o&&(r.splice(e--,1),t=a(a.s=i[0]))}return t}var o={},n={2:0},r=[];function a(e){if(o[e])return o[e].exports;var i=o[e]={i:e,l:!1,exports:{}};return t[e].call(i.exports,i,i.exports,a),i.l=!0,i.exports}a.m=t,a.c=o,a.d=function(t,e,i){a.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},a.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},a.t=function(t,e){if(1&e&&(t=a(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(a.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)a.d(i,o,function(e){return t[e]}.bind(null,o));return i},a.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return a.d(e,"a",e),e},a.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},a.p="";var u=window.webpackJsonpdigithiaUi=window.webpackJsonpdigithiaUi||[],d=u.push.bind(u);u.push=e,u=u.slice();for(var s=0;s<u.length;s++)e(u[s]);var l=d;return r.push([102,0]),i()}({1:function(t,e,i){"use strict";i.r(e);var o=i(0);e.default=o.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,o=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 o(){this.constructor=t}i(t,e),t.prototype=null===e?Object.create(e):(o.prototype=e.prototype,new o)});Object.defineProperty(e,"__esModule",{value:!0}),e.DigUtils=e.DigInputError=void 0;var n=function(t){function e(e){return t.call(this,"DigInputError : "+e)||this}return o(e,t),e}(Error);e.DigInputError=n;var r=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 o=new RegExp("(\\s|^)"+i+"(\\s|$)");e.className=e.className.replace(o," ")}},t.wrap=function(t,e,i,o){for(var n=0,r=e;n<r.length;n++){var a=r[n];t.appendChild(a)}o?null==i||i.insertBefore(t,o):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/),o=0;return i&&(i=i[0]),"s"===i?o=1e3*e:"ms"===i&&(o=e),o},t}();e.DigUtils=r}},e={};return function i(o){if(e[o])return e[o].exports;var n=e[o]={exports:{}};return t[o].call(n.exports,n,n.exports,i),n.exports}(607)})()},102:function(t,e,i){i(5),t.exports=i(20)},16:function(t,e,i){"use strict";var o=this&&this.__decorate||function(t,e,i,o){var n,r=arguments.length,a=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,o);else for(var u=t.length-1;u>=0;u--)(n=t[u])&&(a=(r<3?n(a):r>3?n(e,i,a):n(e,i))||a);return r>3&&a&&Object.defineProperty(e,i,a),a};Object.defineProperty(e,"__esModule",{value:!0}),e.DigUiToggleButton=void 0;const n=i(0);class r extends n.LitElement{constructor(){super(...arguments),this.toggled=!1}toggle(){this.toggled=!this.toggled;const t=new CustomEvent("toggle",{detail:this.toggled});this.dispatchEvent(t)}}o([n.property({type:Boolean,converter:{fromAttribute:t=>"false"!==t&&!!t}})],r.prototype,"toggled",void 0),e.DigUiToggleButton=r},20:function(t,e,i){"use strict";var o=this&&this.__createBinding||(Object.create?function(t,e,i,o){void 0===o&&(o=i),Object.defineProperty(t,o,{enumerable:!0,get:function(){return e[i]}})}:function(t,e,i,o){void 0===o&&(o=i),t[o]=e[i]}),n=this&&this.__exportStar||function(t,e){for(var i in t)"default"===i||Object.prototype.hasOwnProperty.call(e,i)||o(e,t,i)};Object.defineProperty(e,"__esModule",{value:!0}),n(i(21),e),n(i(23),e),n(i(25),e)},21:function(t,e,i){"use strict";var o=this&&this.__decorate||function(t,e,i,o){var n,r=arguments.length,a=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,o);else for(var u=t.length-1;u>=0;u--)(n=t[u])&&(a=(r<3?n(a):r>3?n(e,i,a):n(e,i))||a);return r>3&&a&&Object.defineProperty(e,i,a),a},n=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0}),e.DigUiMenuButton=void 0;const r=i(0),a=i(2),u=i(16),d=n(i(1)),s=n(i(22));let l=class extends u.DigUiToggleButton{constructor(){super(),this.toggled=!1,this.addEventListener("click",this.toggle)}render(){return r.html`
      <div class="menu-button ${a.classMap({toggled:this.toggled})}"></div>
    `}};l.styles=r.css`
    ${d.default}
    ${s.default}
  `,o([r.property({type:Boolean})],l.prototype,"toggled",void 0),l=o([r.customElement("dig-ui-menu-button")],l),e.DigUiMenuButton=l},22:function(t,e,i){"use strict";i.r(e);var o=i(0);e.default=o.css`:host{--dig-ui-menu-button-icon-size:30px;--dig-ui-menu-button-color:var(--dig-ui-global-button-color);--dig-ui-menu-button-animation-duration:0.3s;--dig-ui-menu-button-transform-offset:calc(var(--dig-ui-menu-button-icon-size)/3*2);--dig-ui-menu-button-transform-offset-neg:calc(0px - var(--dig-ui-menu-button-icon-size)/3*2);--dig-ui-menu-button-transform-left:calc(0px - var(--dig-ui-menu-button-icon-size));--dig-ui-menu-button-line-height:calc(var(--dig-ui-menu-button-icon-size)/8);--dig-ui-menu-button-line-radius:calc(var(--dig-ui-menu-button-icon-size)/10);--dig-ui-menu-button-line-space-up:calc(0px - var(--dig-ui-menu-button-icon-size)/3);--dig-ui-menu-button-line-space-down:calc(var(--dig-ui-menu-button-icon-size)/3);position:relative;display:inline-flex;justify-content:center;align-items:center;width:var(--dig-ui-menu-button-icon-size);height:var(--dig-ui-menu-button-icon-size);cursor:pointer}.menu-button,.menu-button:after,.menu-button:before{background-color:var(--dig-ui-menu-button-color);width:var(--dig-ui-menu-button-icon-size);height:var(--dig-ui-menu-button-line-height);border-radius:var(--dig-ui-menu-button-line-radius);transition:all var(--dig-ui-menu-button-animation-duration) ease-in-out;transition-property:transform,background-color}.menu-button:after,.menu-button:before{content:"";position:absolute;left:0}.menu-button:before{transform:translateY(var(--dig-ui-menu-button-line-space-up))}.menu-button:after{transform:translateY(var(--dig-ui-menu-button-line-space-down))}.menu-button.toggled{transform:translateX(var(--dig-ui-menu-button-transform-left));background-color:transparent}.menu-button.toggled:before{transform:rotate(-45deg) translate(var(--dig-ui-menu-button-transform-offset),var(--dig-ui-menu-button-transform-offset))}.menu-button.toggled:after{transform:rotate(45deg) translate(var(--dig-ui-menu-button-transform-offset),var(--dig-ui-menu-button-transform-offset-neg))}`},23:function(t,e,i){"use strict";var o=this&&this.__decorate||function(t,e,i,o){var n,r=arguments.length,a=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,o);else for(var u=t.length-1;u>=0;u--)(n=t[u])&&(a=(r<3?n(a):r>3?n(e,i,a):n(e,i))||a);return r>3&&a&&Object.defineProperty(e,i,a),a},n=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0}),e.DigUiStandardButton=void 0;const r=i(10),a=i(0),u=n(i(1)),d=n(i(24));let s=class extends a.LitElement{constructor(){super(),this.disabled=!1,this.waves=!0,this.triggerWaves=(t,e)=>{var i;const o=this.buttonEl,n=document.createElement("div");n.classList.add("ripple");const a=Math.max(o.clientWidth,o.clientHeight),u=o.getBoundingClientRect();n.style.height=a+"px",n.style.width=a+"px",n.style.left=t-u.left-a/2+"px",n.style.top=e-u.top-a/2+"px",o.appendChild(n);const d=getComputedStyle(null===(i=this.shadowRoot)||void 0===i?void 0:i.host).getPropertyValue("--dig-ui-standard-button-wave-duration");setTimeout(()=>{o.removeChild(n)},r.DigUtils.cssTimeToMilliseconds(d))}}render(){return a.html`
      <button ?disabled="${this.disabled}" @click="${this.onClick}">
        <slot></slot>
      </button>
    `}onClick(t){this.trigger(t.clientX,t.clientY)}trigger(t,e){this.dispatchEvent(new CustomEvent("trigger")),this.waves&&this.triggerWaves(t||this.buttonEl.clientWidth/2+this.buttonEl.offsetLeft,e||this.buttonEl.clientHeight/2+this.buttonEl.offsetTop)}};s.styles=a.css`
    ${u.default}
    ${d.default}
  `,o([a.property({type:Boolean})],s.prototype,"disabled",void 0),o([a.property({type:Boolean})],s.prototype,"waves",void 0),o([a.query("button")],s.prototype,"buttonEl",void 0),s=o([a.customElement("dig-ui-standard-button")],s),e.DigUiStandardButton=s},24:function(t,e,i){"use strict";i.r(e);var o=i(0);e.default=o.css`:host{--dig-ui-standard-button-font-color:#fff;--dig-ui-standard-button-font-size:16px;--dig-ui-standard-button-font-family:inherit;--dig-ui-standard-button-background-color:green;--dig-ui-standard-button-padding-vertical:10px;--dig-ui-standard-button-padding-horizontal:10px;--dig-ui-standard-button-border-radius:4px;--dig-ui-standard-button-hover-filter:brightness(110%);--dig-ui-standard-button-hover-duration:0.3s;--dig-ui-standard-button-wave-color:hsla(0,0%,100%,0.4);--dig-ui-standard-button-wave-duration:0.7s;--dig-ui-standard-button-focus-color:#00f;--dig-ui-standard-button-focus-width:2px;--dig-ui-standard-button-text-align:center;display:inline-flex}:host(:disabled){pointer-events:none}button{position:relative;border:0;outline:0;width:100%;display:flex;align-items:center;justify-content:var(--dig-ui-standard-button-text-align);color:var(--dig-ui-standard-button-font-color);background-color:var(--dig-ui-standard-button-background-color);padding:var(--dig-ui-standard-button-padding-vertical) var(--dig-ui-standard-button-padding-horizontal);font-size:var(--dig-ui-standard-button-font-size);font-family:var(--dig-ui-standard-button-font-family);border-radius:var(--dig-ui-standard-button-border-radius);transition:filter var(--dig-ui-standard-button-hover-duration);cursor:pointer;overflow:hidden}button:hover{filter:var(--dig-ui-standard-button-hover-filter)}button:focus{box-shadow:0 0 0 var(--dig-ui-standard-button-focus-width) var(--dig-ui-standard-button-focus-color) inset}button:disabled{filter:grayscale(90%);cursor:default}.ripple{pointer-events:none;position:absolute;border-radius:50%;opacity:0;background-color:var(--dig-ui-standard-button-wave-color);-webkit-animation:wave var(--dig-ui-standard-button-wave-duration) linear;animation:wave var(--dig-ui-standard-button-wave-duration) linear}@-webkit-keyframes wave{0%{opacity:.3;transform:scale(0)}50%{opacity:1}to{opacity:0;transform:scale(2.2)}}@keyframes wave{0%{opacity:.3;transform:scale(0)}50%{opacity:1}to{opacity:0;transform:scale(2.2)}}`},25:function(t,e,i){"use strict";var o=this&&this.__decorate||function(t,e,i,o){var n,r=arguments.length,a=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,o);else for(var u=t.length-1;u>=0;u--)(n=t[u])&&(a=(r<3?n(a):r>3?n(e,i,a):n(e,i))||a);return r>3&&a&&Object.defineProperty(e,i,a),a},n=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0}),e.DigUiValidateButton=void 0;const r=i(0),a=i(2),u=i(16),d=n(i(1)),s=n(i(26));let l=class extends u.DigUiToggleButton{constructor(){super(),this.addEventListener("click",this.toggle)}render(){return r.html`
      <div class="icon ${a.classMap({toggled:this.toggled})}"></div>
    `}};l.styles=r.css`
    ${d.default}
    ${s.default}
  `,l=o([r.customElement("dig-ui-validate-button")],l),e.DigUiValidateButton=l},26:function(t,e,i){"use strict";i.r(e);var o=i(0);e.default=o.css`:host{--dig-ui-validate-button-size:30px;--dig-ui-validate-button-border-width:4px;--dig-ui-validate-button-border-radius:30px;--dig-ui-validate-button-color-valid:var(--dig-ui-global-valid-color);--dig-ui-validate-button-color-invalid:var(--dig-ui-global-invalid-color);--dig-ui-validate-button-animation-duration:0.3s;--dig-ui-validate-button-cross-width:calc(var(--dig-ui-validate-button-size)*1.4142);--dig-ui-validate-button-before-left:calc(var(--dig-ui-validate-button-border-width)/3);--dig-ui-validate-button-before-top:calc(0px - var(--dig-ui-validate-button-border-width)/3);--dig-ui-validate-button-after-right:calc(var(--dig-ui-validate-button-border-width)/3);--dig-ui-validate-button-after-top:calc(0px - var(--dig-ui-validate-button-border-width)/3);--dig-ui-validate-button-validate-before-width:calc(var(--dig-ui-validate-button-size)*0.575);--dig-ui-validate-button-validate-after-width:calc(var(--dig-ui-validate-button-size)*1.15);--dig-ui-validate-button-before-validate-top:calc(0px - var(--dig-ui-validate-button-border-width)/3 + var(--dig-ui-validate-button-size)*0.5);--dig-ui-validate-button-before-validate-left:calc(var(--dig-ui-validate-button-size)*0.15 + var(--dig-ui-validate-button-border-width)*0.7);position:relative;display:inline-flex;justify-content:center;align-items:center;width:var(--dig-ui-validate-button-size);height:var(--dig-ui-validate-button-size);cursor:pointer}:host(:disabled){cursor:not-allowed;opacity:.3}.icon{width:var(--dig-ui-validate-button-size);height:var(--dig-ui-validate-button-size);transform:scale(.7)}.icon:after,.icon:before{content:"";position:absolute;width:var(--dig-ui-validate-button-cross-width);height:var(--dig-ui-validate-button-border-width);background-color:var(--dig-ui-validate-button-color-invalid);border-radius:var(--dig-ui-validate-button-border-radius);transition:all var(--dig-ui-validate-button-animation-duration)}.icon:before{transform:rotate(45deg);transform-origin:top left;left:var(--dig-ui-validate-button-before-left);top:var(--dig-ui-validate-button-before-top)}.icon:after{transform:rotate(-45deg);transform-origin:top right;right:var(--dig-ui-validate-button-after-right);top:var(--dig-ui-validate-button-after-top)}.icon.toggled:after,.icon.toggled:before{background-color:var(--dig-ui-validate-button-color-valid)}.icon.toggled:before{left:var(--dig-ui-validate-button-before-validate-left);top:var(--dig-ui-validate-button-before-validate-top);transform:rotate(60deg);width:var(--dig-ui-validate-button-validate-before-width)}.icon.toggled:after{right:var(--dig-ui-validate-button-after-right);top:var(--dig-ui-validate-button-after-top);transform:rotate(-60deg);width:var(--dig-ui-validate-button-validate-after-width)}`},5:function(e,i){e.exports=t}})}));