mwcpl
Version:
Master's Web Component Pattern Library
284 lines (260 loc) • 21 kB
JavaScript
import { r as registerInstance, h, H as Host, g as getElement } from './index-e40c6465.js';
const mwcplButtonCss = ":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 MwcplButton = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/**
* Label for the button.
*/
this.label = '';
/**
* Makes the button text uppercase.
*/
this.uppercase = false;
/**
* Creates a fullwidth button.
*/
this.fullwidth = false;
/**
* Creates an outlined button.
*/
this.outlined = false;
/**
* Makes the button non interactive.
*/
this.disabled = false;
/**
* Creates a button with rounded corners.
*/
this.rounded = false;
/**
* Adds a loading indicator.
*/
this.loading = false;
}
render() {
return (h("button", { type: "button", disabled: this.disabled }, h("span", { class: "loading" }, h("span", { class: "line" })), h("slot", { name: "leading-icon" }), h("span", { class: "label" }, this.label), h("slot", { name: "trailing-icon" })));
}
};
MwcplButton.style = mwcplButtonCss;
const mwcplDialogCss = ":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 MwcplDialog = class {
constructor(hostRef) {
registerInstance(this, hostRef);
}
render() {
if (this.open) {
return (h(Host, null, h("div", { class: "dialog" }, h("div", { class: "backdrop", onClick: () => this.dismiss() }), h("div", { class: "container" }, h("h2", { class: "heading" }, this.heading), h("div", { class: "content" }, h("slot", null)), h("div", { class: "actions", onClick: (e) => this.handleClick(e) }, h("slot", { name: "secondary-action" }), h("div", { class: "spacer" }), h("slot", { name: "primary-action" }))))));
}
}
dismiss() {
if (this.dismissable) {
this.open = false;
}
}
handleClick(event) {
if (event) {
const target = event.target;
if (target.getAttribute('closeDialog') == '') {
this.open = false;
}
}
}
};
MwcplDialog.style = mwcplDialogCss;
const mwcplFabCss = ":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 MwcplFab = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/**
* Label for the FAB.
*/
this.label = '';
/**
* Creates a smaller of FAB.
*/
this.mini = false;
}
render() {
return (h("button", null, h("slot", { name: "icon" }), h("span", null, this.label)));
}
};
MwcplFab.style = mwcplFabCss;
const mwcplFormFieldCss = ":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 MwcplFormField = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/**
* Label for the form field.
*/
this.label = '';
/**
* Creates a fullwidth form field.
*/
this.fullwidth = false;
}
render() {
return (h(Host, null, h("div", { class: "form-field-wrapper" }, h("label", null, this.label), h("div", { class: "input-wrapper" }, h("slot", { name: "input" }), h("slot", { name: "icon" }))), h("slot", { name: "hint" })));
}
};
MwcplFormField.style = mwcplFormFieldCss;
const mwcplListCss = ":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 MwcplList = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/**
* Makes the list clickable.
*/
this.clickable = false;
}
render() {
return (h("ul", null, h("slot", null)));
}
};
MwcplList.style = mwcplListCss;
const mwcplListItemCss = ":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 MwcplListItem = class {
constructor(hostRef) {
registerInstance(this, hostRef);
}
render() {
return (h("li", null, h("slot", { name: "leading-icon" }), h("slot", null), h("span", { class: "spacer" }), h("slot", { name: "trailing-icon" })));
}
};
MwcplListItem.style = mwcplListItemCss;
const mwcplNavbarCss = ":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 MwcplNavbar = class {
constructor(hostRef) {
registerInstance(this, hostRef);
}
render() {
return (h("nav", { onMouseEnter: () => this.enter(), onMouseLeave: () => this.leave() }, h("ul", null, h("slot", null))));
}
enter() {
this.element.shadowRoot
.querySelector('slot')
.assignedNodes()
.forEach(node => {
if (node.nodeName.toLowerCase() === 'mwcpl-navbar-item') {
node.setAttribute('open', '');
}
});
}
leave() {
this.element.shadowRoot
.querySelector('slot')
.assignedNodes()
.forEach(node => {
if (node.nodeName.toLowerCase() === 'mwcpl-navbar-item') {
node.removeAttribute('open');
}
});
}
get element() { return getElement(this); }
};
MwcplNavbar.style = mwcplNavbarCss;
const mwcplNavbarItemCss = ":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 MwcplNavbarItem = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/**
* Selects the text, icon and background.
*/
this.active = false;
/**
* The label of the navigation item.
*/
this.label = '';
/**
* `href` of the navigation item.
*/
this.href = '#';
/**
* Pushes the element to the bottom of the navigation bar.
*/
this.spacer = false;
/**
* Extends the navigation item.
*/
this.open = false;
/**
* Makes the font larger and bolder.
*/
this.header = false;
/**
* Hides the header icon.
*/
this.iconless = false;
}
render() {
return (h("li", null, h("a", { href: this.href }, h("slot", { name: "icon" }), h("span", { class: "label" }, this.label))));
}
};
MwcplNavbarItem.style = mwcplNavbarItemCss;
const mwcplNotificationCss = ":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 MwcplNotification = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/**
* The text of the notification.
*/
this.label = '';
/**
* Makes the notification visible.
*/
this.show = false;
}
render() {
return (h(Host, { onClick: (e) => this.handleClick(e) }, h("slot", { name: "icon" }), h("span", null, this.label), h("slot", { name: "action" })));
}
handleClick(event) {
if (event) {
const target = event.target;
if (target.getAttribute('closeNotification') == '') {
this.show = false;
}
}
}
};
MwcplNotification.style = mwcplNotificationCss;
const mwcplTreeViewCss = ":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 MwcplTreeView = class {
constructor(hostRef) {
registerInstance(this, hostRef);
}
render() {
return (h("ul", null, h("slot", null)));
}
};
MwcplTreeView.style = mwcplTreeViewCss;
const mwcplTreeViewItemCss = ":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}";
const MwcplTreeViewItem = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/**
* Helper variable which indicates if this tree view item
* has any children
*/
this.hasChildren = false;
}
componentDidLoad() {
this.hasChildren = this.element.shadowRoot.querySelector('slot').assignedNodes().length > 0;
if (this.open && !this.hasChildren) {
this.open = false;
}
}
render() {
return (h(Host, null, h("li", null, h("div", { onClick: () => this.toggle() }, this.hasChildren ?
(h("svg", { class: this.open ? '' : 'collapsed', focusable: "false", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" })))
:
h("svg", { viewBox: "0 0 24 24" }), h("span", null, this.label)), h("ul", null, h("slot", null)))));
}
toggle() {
if (this.hasChildren) {
this.open = !this.open;
}
}
get element() { return getElement(this); }
};
MwcplTreeViewItem.style = mwcplTreeViewItemCss;
export { MwcplButton as mwcpl_button, MwcplDialog as mwcpl_dialog, MwcplFab as mwcpl_fab, MwcplFormField as mwcpl_form_field, MwcplList as mwcpl_list, MwcplListItem as mwcpl_list_item, MwcplNavbar as mwcpl_navbar, MwcplNavbarItem as mwcpl_navbar_item, MwcplNotification as mwcpl_notification, MwcplTreeView as mwcpl_tree_view, MwcplTreeViewItem as mwcpl_tree_view_item };