mwcpl/dist/mwcpl/p-04286066.system.entry.js

Master's Web Component Pattern Library

System.register(["./p-2340bb01.system.js"],(function(o){"use strict";var t,e,r,n;return{setters:[function(o){t=o.r;e=o.h;r=o.H;n=o.g}],execute:function(){var l=":host{display:-ms-inline-flexbox;display:inline-flex}button{border:none;outline:none;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-family:Roboto, sans-serif;-webkit-transition:all 100ms ease;transition:all 100ms ease;padding:var(--mwcpl-button-padding, 0.75rem 1.5rem);border-radius:var(--mwcpl-button-border-radius, 4px);background-color:lightgrey}:host([rounded]) button{border-radius:290486px}button:not([disabled]){background-color:var(--mwcpl-button-background-color, #3f51b5);color:var(--mwcpl-button-color, #ffffff)}button:not([disabled]):hover{background-color:var(--mwcpl-button-background-color-hover, #5262bc)}button:not([disabled]):active{background-color:var(--mwcpl-button-background-color-active, #6574c4)}button:not([disabled]):active,button:not([disabled]):focus{-webkit-box-shadow:0 0 0 2px var(--mwcpl-button-background-color-box-shadow, #d9dcf0);box-shadow:0 0 0 2px var(--mwcpl-button-background-color-box-shadow, #d9dcf0)}:host([outlined]) button:not([disabled]){color:var(--mwcpl-button-background-color, #3f51b5);background-color:transparent;-webkit-box-shadow:inset 0 0 0 1px var(--mwcpl-button-background-color, #3f51b5);box-shadow:inset 0 0 0 1px var(--mwcpl-button-background-color, #3f51b5)}:host([outlined]) button:not([disabled]):active,:host([outlined]) button:not([disabled]):hover,:host([outlined]) button:not([disabled]):focus{color:white;background-color:var(--mwcpl-button-background-color, #3f51b5)}:host([outlined]) button:not([disabled]):active,:host([outlined]) button:not([disabled]):focus{-webkit-box-shadow:0 0 0 2px var(--mwcpl-button-background-color-box-shadow, #d9dcf0);box-shadow:0 0 0 2px var(--mwcpl-button-background-color-box-shadow, #d9dcf0)}:host([outlined]) button[disabled]{-webkit-box-shadow:0 0 0 1px lightgrey;box-shadow:0 0 0 1px lightgrey;background-color:transparent}:host([disabled]){pointer-events:none}:host([uppercase]) button{text-transform:uppercase}:host([fullwidth]){width:100%}:host([fullwidth]) button,:host([fullwidth]) button .label{-ms-flex:1 1 auto;flex:1 1 auto}:host([loading]) button{position:relative;overflow:hidden}:host([loading]) button .loading{position:absolute;top:0;left:0;width:100%;height:4px;background-color:var(--mwcpl-button-background-color-loading, #d9dcf0)}:host([loading]) button .loading .line{position:absolute;height:4px;background-color:var(--mwcpl-button-background-color, #3f51b5);-webkit-animation:loading 2s infinite;animation:loading 2s infinite}@-webkit-keyframes loading{from{left:-15%;width:15%}to{left:100%;width:100%}}@keyframes loading{from{left:-15%;width:15%}to{left:100%;width:100%}}slot[name=leading-icon]::slotted(*){margin-right:0.5rem;font-size:1rem}slot[name=trailing-icon]::slotted(*){margin-left:0.5rem;font-size:1rem}";var i=o("mwcpl_button",function(){function o(o){t(this,o);this.label="";this.uppercase=false;this.fullwidth=false;this.outlined=false;this.disabled=false;this.rounded=false;this.loading=false}o.prototype.render=function(){return e("button",{type:"button",disabled:this.disabled},e("span",{class:"loading"},e("span",{class:"line"})),e("slot",{name:"leading-icon"}),e("span",{class:"label"},this.label),e("slot",{name:"trailing-icon"}))};return o}());i.style=l;var a=":host{display:block;font-family:Roboto, sans-serif}.backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:var(--mwcpl-dialog-backdrop-color, rgba(0, 0, 0, 0.25))}.dialog{position:fixed;top:0;left:0;width:100vw;height:100vh;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.container{z-index:1;overflow:auto;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border-radius:8px;max-height:calc(100vh - 2rem);margin:1rem;max-width:var(--mwcpl-dialog-max-width, 600px);background-color:var(--mwcpl-dialog-background-color, #ffffff);color:var(--mwcpl-dialog-color, #000000)}.container .heading,.container .content{padding:0 1rem}.container .heading{-ms-flex:1 0 auto;flex:1 0 auto;margin:0.75rem 0;font-size:1.25rem}.container .content{-ms-flex:1 1 auto;flex:1 1 auto;overflow:auto;border-top:1px solid var(--mwcpl-dialog-border-color, #f5f5f5);border-bottom:1px solid var(--mwcpl-dialog-border-color, #f5f5f5)}.container .actions{display:-ms-flexbox;display:flex;padding:0.5rem}.container .actions .spacer{margin:0 1rem;-ms-flex:1 1 auto;flex:1 1 auto}";var s=o("mwcpl_dialog",function(){function o(o){t(this,o)}o.prototype.render=function(){var o=this;if(this.open){return e(r,null,e("div",{class:"dialog"},e("div",{class:"backdrop",onClick:function(){return o.dismiss()}}),e("div",{class:"container"},e("h2",{class:"heading"},this.heading),e("div",{class:"content"},e("slot",null)),e("div",{class:"actions",onClick:function(t){return o.handleClick(t)}},e("slot",{name:"secondary-action"}),e("div",{class:"spacer"}),e("slot",{name:"primary-action"})))))}};o.prototype.dismiss=function(){if(this.dismissable){this.open=false}};o.prototype.handleClick=function(o){if(o){var t=o.target;if(t.getAttribute("closeDialog")==""){this.open=false}}};return o}());s.style=a;var c=":host{display:-ms-inline-flexbox;display:inline-flex}button{border:none;outline:none;cursor:pointer;height:56px;width:56px;font-family:Roboto, sans-serif;border-radius:290486px;background-color:var(--mwcpl-fab-background-color, #3f51b5);color:var(--mwcpl-fab-color, #ffffff);text-transform:uppercase;letter-spacing:2px;-webkit-box-shadow:0px 4px 8px 0px rgba(0, 0, 0, 0.35);box-shadow:0px 4px 8px 0px rgba(0, 0, 0, 0.35)}button:hover{background-color:var(--mwcpl-fab-background-color-hover, #5262bc)}button:active{background-color:var(--mwcpl-fab-background-color-active, #6574c4)}slot[name=icon]::slotted(*){font-size:20px}:host([mini]) button{height:40px;width:40px}:host([mini]) button slot[name=icon]::slotted(*){font-size:16px}:host([label]) button{width:auto;padding:0 1rem;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}:host([label]) button span:last-child{margin-left:1rem}";var d=o("mwcpl_fab",function(){function o(o){t(this,o);this.label="";this.mini=false}o.prototype.render=function(){return e("button",null,e("slot",{name:"icon"}),e("span",null,this.label))};return o}());d.style=c;var f=":host{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;font-family:Roboto, sans-serif}:host([fullwidth]){width:100%}:host([fullwidth]) .form-field-wrapper{-ms-flex:1 1 auto;flex:1 1 auto}.form-field-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:var(--mwcpl-form-field-background-color, #f5f5f5);border-top-left-radius:var(--mwcpl-form-field-border-radius, 4px);border-top-right-radius:var(--mwcpl-form-field-border-radius, 4px);padding:0.5rem;-webkit-box-shadow:0 1px 0 var(--mwcpl-form-field-color, #000000);box-shadow:0 1px 0 var(--mwcpl-form-field-color, #000000)}.input-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end}label{-webkit-transition:color 100ms ease;transition:color 100ms ease;font-size:0.75rem;margin-bottom:0.25rem;color:var(--mwcpl-form-field-color, #000000)}.form-field-wrapper:focus-within{-webkit-box-shadow:0 2px 0 var(--mwcpl-form-field-color-active, #3f51b5);box-shadow:0 2px 0 var(--mwcpl-form-field-color-active, #3f51b5)}.form-field-wrapper:focus-within label{color:var(--mwcpl-form-field-color-active, #3f51b5)}slot[name=input]::slotted(*){font-family:Roboto, sans-serif;-ms-flex:1 1 auto;flex:1 1 auto;border:none;color:var(--mwcpl-form-field-color, #000000);outline:none;background-color:var(--mwcpl-form-field-background-color, #f5f5f5);font-size:1rem}slot[name=icon]::slotted(*){color:var(--mwcpl-form-field-color, #000000);font-size:1rem}slot[name=hint]::slotted(*){font-size:0.75rem;color:var(--mwcpl-form-field-hint-color, #808080);margin-left:0.5rem;margin-top:0.5rem}";var p=o("mwcpl_form_field",function(){function o(o){t(this,o);this.label="";this.fullwidth=false}o.prototype.render=function(){return e(r,null,e("div",{class:"form-field-wrapper"},e("label",null,this.label),e("div",{class:"input-wrapper"},e("slot",{name:"input"}),e("slot",{name:"icon"}))),e("slot",{name:"hint"}))};return o}());p.style=f;var m=":host{display:block;font-family:Roboto, sans-serif}:host(:not([clickable])){pointer-events:none}ul{padding:0;border:1px solid var(--mwcpl-list-border-color, #d3d3d3);border-radius:var(--mwcpl-list-border-radius, 4px)}::slotted(li[role=separator]:not([group])){list-style-type:none;margin:0 1rem;border-bottom:1px solid var(--mwcpl-list-border-color, #d3d3d3)}::slotted(li[role=separator][group]){list-style-type:none;font-size:0.75rem;font-weight:bold;text-transform:uppercase;margin:0.5rem 1rem;color:var(--mwcpl-list-group-color, #808080)}";var u=o("mwcpl_list",function(){function o(o){t(this,o);this.clickable=false}o.prototype.render=function(){return e("ul",null,e("slot",null))};return o}());u.style=m;var b=":host{display:block}li{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;list-style-type:none;padding:1rem;-webkit-transition:all 100ms ease;transition:all 100ms ease;background-color:var(--mwcpl-list-item-background-color, #ffffff);border-radius:var(--mwcpl-list-border-radius, 4px);color:var(--mwcpl-list-item-color, #000000);cursor:pointer}li .spacer{-ms-flex:1 1 auto;flex:1 1 auto}li:hover{background-color:var(--mwcpl-list-item-background-color-hover, #f5f5f5)}li:active{background-color:var(--mwcpl-list-item-background-color-active, #e9e9e9)}slot[name=trailing-icon]::slotted(*){color:var(--mwcpl-list-item-trailing-icon-color, #808080);font-size:1rem;margin-left:1rem}slot[name=leading-icon]::slotted(*){color:var(--mwcpl-list-item-leading-icon-color, #808080);font-size:1rem;margin-right:1rem}";var h=o("mwcpl_list_item",function(){function o(o){t(this,o)}o.prototype.render=function(){return e("li",null,e("slot",{name:"leading-icon"}),e("slot",null),e("span",{class:"spacer"}),e("slot",{name:"trailing-icon"}))};return o}());h.style=b;var w=":host{display:block;font-family:Roboto, sans-serif}nav{width:5rem;overflow-y:auto;overflow-x:hidden;height:100%;-webkit-box-shadow:var(--mwcpl-navbar-shadow, 1px 0 0 #d3d3d3);box-shadow:var(--mwcpl-navbar-shadow, 1px 0 0 #d3d3d3);-webkit-transition:width 100ms ease;transition:width 100ms ease}:host([fixed]) nav{height:100vh;position:fixed;top:0;left:0}ul{list-style:none;padding:0;margin:0;display:-ms-flexbox;display:flex;height:100%;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}@media only screen and (min-width: 600px){nav:hover{width:16rem}}@media only screen and (max-width: 599px){nav{top:unset;height:3rem;-webkit-box-shadow:var(--mwcpl-navbar-shadow-mobile, 0 -1px 0 #d3d3d3);box-shadow:var(--mwcpl-navbar-shadow-mobile, 0 -1px 0 #d3d3d3);overflow-x:auto;width:100%}:host([fixed]){bottom:0;width:100vw}ul{-ms-flex-direction:row;flex-direction:row}}";var g=o("mwcpl_navbar",function(){function o(o){t(this,o)}o.prototype.render=function(){var o=this;return e("nav",{onMouseEnter:function(){return o.enter()},onMouseLeave:function(){return o.leave()}},e("ul",null,e("slot",null)))};o.prototype.enter=function(){this.element.shadowRoot.querySelector("slot").assignedNodes().forEach((function(o){if(o.nodeName.toLowerCase()==="mwcpl-navbar-item"){o.setAttribute("open","")}}))};o.prototype.leave=function(){this.element.shadowRoot.querySelector("slot").assignedNodes().forEach((function(o){if(o.nodeName.toLowerCase()==="mwcpl-navbar-item"){o.removeAttribute("open")}}))};Object.defineProperty(o.prototype,"element",{get:function(){return n(this)},enumerable:true,configurable:true});return o}());g.style=w;var v=":host{display:block;width:100%}:host([spacer]){margin-top:auto}a{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:3rem;text-decoration:none;color:var(--mwcpl-navbar-item-color, #000000);background-color:var(--mwcpl-navbar-background-color, #ffffff);-webkit-transition:all 100ms ease;transition:all 100ms ease}a:hover{color:var(--mwcpl-navbar-item-color-hover, #5262bc);background-color:var(--mwcpl-navbar-item-background-color-hover, #f5f5f5)}.label{display:none;white-space:nowrap}slot[name=icon]::slotted(*){font-size:1.5rem;-ms-flex-negative:0;flex-shrink:0;margin:0 1.5rem;width:2rem;display:-ms-flexbox !important;display:flex !important;-ms-flex-pack:center;justify-content:center}:host([header]){pointer-events:none;background-color:var(--mwcpl-navbar-item-header-background-color, #f5f5f5)}:host([header]) .label{font-weight:bold;font-size:1.2rem}:host([iconless]) slot[name=icon]::slotted(*){display:none !important}:host([iconless]) .label{margin-left:1.5rem}@media only screen and (min-width: 600px){:host([open]) .label{display:inline}}@media only screen and (max-width: 599px){:host([header]){display:none}:host([spacer]){margin-top:unset}:host([open]) .label{display:none}a{-ms-flex-pack:center;justify-content:center}}:host([active]) a{color:var(--mwcpl-navbar-item-color-active, #3f51b5);background-color:var(--mwcpl-navbar-item-background-color-active, #f5f5f5)}";var x=o("mwcpl_navbar_item",function(){function o(o){t(this,o);this.active=false;this.label="";this.href="#";this.spacer=false;this.open=false;this.header=false;this.iconless=false}o.prototype.render=function(){return e("li",null,e("a",{href:this.href},e("slot",{name:"icon"}),e("span",{class:"label"},this.label)))};return o}());x.style=v;var y=":host{display:none;font-family:Roboto, sans-serif;background-color:var(--mwcpl-notification-background-color, #323232);color:var(--mwcpl-notification-color, #ffffff);padding:1rem 1.5rem;min-width:var(--mwcpl-notification-min-width, 16rem);border-radius:var(--mwcpl-notification-border-radius, 4px);-webkit-box-shadow:var(--mwcpl-notification-box-shadow, 0px 2px 4px 0px rgba(0, 0, 0, 0.35));box-shadow:var(--mwcpl-notification-box-shadow, 0px 2px 4px 0px rgba(0, 0, 0, 0.35))}slot[name=icon]::slotted(*){font-size:1rem;margin-right:1rem}slot[name=action]::slotted(*){--mwcpl-button-padding:0.5rem 1rem;--mwcpl-button-background-color:var(--mwcpl-notification-action-background-color, transparent);--mwcpl-button-background-color-hover:var(--mwcpl-notification-action-background-hover, rgba(255, 255, 255, .2));--mwcpl-button-background-color-active:var(--mwcpl-notification-action-background-hover, rgba(255, 255, 255, .3));--mwcpl-button-background-color-box-shadow:none;--mwcpl-button-color:var(--mwcpl-notification-color, #ffffff)}span{-ms-flex:1 1 auto;flex:1 1 auto;word-wrap:anywhere}:host([show]){display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}";var k=o("mwcpl_notification",function(){function o(o){t(this,o);this.label="";this.show=false}o.prototype.render=function(){var o=this;return e(r,{onClick:function(t){return o.handleClick(t)}},e("slot",{name:"icon"}),e("span",null,this.label),e("slot",{name:"action"}))};o.prototype.handleClick=function(o){if(o){var t=o.target;if(t.getAttribute("closeNotification")==""){this.show=false}}};return o}());k.style=y;var z=":host{display:block;overflow:auto;font-family:Roboto, sans-serif}ul{list-style:none;padding:0;margin:0;border:1px solid var(--mwcpl-tree-view-border-color, #d3d3d3);background-color:var(--mwcpl-tree-view-background-color, #ffffff);border-radius:var(--mwcpl-tree-view-border-radius, 4px)}";var _=o("mwcpl_tree_view",function(){function o(o){t(this,o)}o.prototype.render=function(){return e("ul",null,e("slot",null))};return o}());_.style=z;var C=":host{display:block}ul{margin:0;display:none;list-style:none}svg{width:1.5rem;margin:0 0.25rem}svg.collapsed{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}svg{fill:var(--mwcpl-tree-view-color, #000000)}div{padding:1rem;border-radius:var(--mwcpl-tree-view-border-radius, 4px);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;color:var(--mwcpl-tree-view-color, #000000);-webkit-transition:all 100ms ease;transition:all 100ms ease}div:hover{background-color:var(--mwcpl-tree-view-item-background-color-hover, #f5f5f5);cursor:pointer}:host([open]) ul{display:block}";var R=o("mwcpl_tree_view_item",function(){function o(o){t(this,o);this.hasChildren=false}o.prototype.componentDidLoad=function(){this.hasChildren=this.element.shadowRoot.querySelector("slot").assignedNodes().length>0;if(this.open&&!this.hasChildren){this.open=false}};o.prototype.render=function(){var o=this;return e(r,null,e("li",null,e("div",{onClick:function(){return o.toggle()}},this.hasChildren?e("svg",{class:this.open?"":"collapsed",focusable:"false",viewBox:"0 0 24 24","aria-hidden":"true"},e("path",{d:"M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"})):e("svg",{viewBox:"0 0 24 24"}),e("span",null,this.label)),e("ul",null,e("slot",null))))};o.prototype.toggle=function(){if(this.hasChildren){this.open=!this.open}};Object.defineProperty(o.prototype,"element",{get:function(){return n(this)},enumerable:true,configurable:true});return o}());R.style=C}}}));