mwcpl/dist/mwcpl/p-3b2c2c47.entry.js

Master's Web Component Pattern Library

import{r as o,h as t,H as e,g as l}from"./p-89872e9a.js";const r=class{constructor(t){o(this,t),this.label="",this.uppercase=!1,this.fullwidth=!1,this.outlined=!1,this.disabled=!1,this.rounded=!1,this.loading=!1}render(){return t("button",{type:"button",disabled:this.disabled},t("span",{class:"loading"},t("span",{class:"line"})),t("slot",{name:"leading-icon"}),t("span",{class:"label"},this.label),t("slot",{name:"trailing-icon"}))}};r.style=":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}";const i=class{constructor(t){o(this,t)}render(){if(this.open)return t(e,null,t("div",{class:"dialog"},t("div",{class:"backdrop",onClick:()=>this.dismiss()}),t("div",{class:"container"},t("h2",{class:"heading"},this.heading),t("div",{class:"content"},t("slot",null)),t("div",{class:"actions",onClick:o=>this.handleClick(o)},t("slot",{name:"secondary-action"}),t("div",{class:"spacer"}),t("slot",{name:"primary-action"})))))}dismiss(){this.dismissable&&(this.open=!1)}handleClick(o){o&&""==o.target.getAttribute("closeDialog")&&(this.open=!1)}};i.style=":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}";const a=class{constructor(t){o(this,t),this.label="",this.mini=!1}render(){return t("button",null,t("slot",{name:"icon"}),t("span",null,this.label))}};a.style=":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}";const n=class{constructor(t){o(this,t),this.label="",this.fullwidth=!1}render(){return t(e,null,t("div",{class:"form-field-wrapper"},t("label",null,this.label),t("div",{class:"input-wrapper"},t("slot",{name:"input"}),t("slot",{name:"icon"}))),t("slot",{name:"hint"}))}};n.style=":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}";const s=class{constructor(t){o(this,t),this.clickable=!1}render(){return t("ul",null,t("slot",null))}};s.style=":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)}";const c=class{constructor(t){o(this,t)}render(){return t("li",null,t("slot",{name:"leading-icon"}),t("slot",null),t("span",{class:"spacer"}),t("slot",{name:"trailing-icon"}))}};c.style=":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}";const d=class{constructor(t){o(this,t)}render(){return t("nav",{onMouseEnter:()=>this.enter(),onMouseLeave:()=>this.leave()},t("ul",null,t("slot",null)))}enter(){this.element.shadowRoot.querySelector("slot").assignedNodes().forEach(o=>{"mwcpl-navbar-item"===o.nodeName.toLowerCase()&&o.setAttribute("open","")})}leave(){this.element.shadowRoot.querySelector("slot").assignedNodes().forEach(o=>{"mwcpl-navbar-item"===o.nodeName.toLowerCase()&&o.removeAttribute("open")})}get element(){return l(this)}};d.style=":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}}";const m=class{constructor(t){o(this,t),this.active=!1,this.label="",this.href="#",this.spacer=!1,this.open=!1,this.header=!1,this.iconless=!1}render(){return t("li",null,t("a",{href:this.href},t("slot",{name:"icon"}),t("span",{class:"label"},this.label)))}};m.style=":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)}";const p=class{constructor(t){o(this,t),this.label="",this.show=!1}render(){return t(e,{onClick:o=>this.handleClick(o)},t("slot",{name:"icon"}),t("span",null,this.label),t("slot",{name:"action"}))}handleClick(o){o&&""==o.target.getAttribute("closeNotification")&&(this.show=!1)}};p.style=":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}";const f=class{constructor(t){o(this,t)}render(){return t("ul",null,t("slot",null))}};f.style=":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)}";const b=class{constructor(t){o(this,t),this.hasChildren=!1}componentDidLoad(){this.hasChildren=this.element.shadowRoot.querySelector("slot").assignedNodes().length>0,this.open&&!this.hasChildren&&(this.open=!1)}render(){return t(e,null,t("li",null,t("div",{onClick:()=>this.toggle()},this.hasChildren?t("svg",{class:this.open?"":"collapsed",focusable:"false",viewBox:"0 0 24 24","aria-hidden":"true"},t("path",{d:"M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"})):t("svg",{viewBox:"0 0 24 24"}),t("span",null,this.label)),t("ul",null,t("slot",null))))}toggle(){this.hasChildren&&(this.open=!this.open)}get element(){return l(this)}};b.style=":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}";export{r as mwcpl_button,i as mwcpl_dialog,a as mwcpl_fab,n as mwcpl_form_field,s as mwcpl_list,c as mwcpl_list_item,d as mwcpl_navbar,m as mwcpl_navbar_item,p as mwcpl_notification,f as mwcpl_tree_view,b as mwcpl_tree_view_item}