`: ""} ${this.label ? n.d`
${this.label}
` : ""} `} `} attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")) } handleLogoClick() { this.dispatchEvent(new Event("logo-clicked")) } }; __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "label", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "logo", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "mobile", void 0), i = __decorate([Object(n.c)("magicbooksio-app-bar")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioAvatar extends n.a { static get styles() { return [r.a, n.b` :host, .image { display: flex; align-items: center; } .text { display: flex; flex-direction: column; justify-content: center; flex: 1; margin-left: 8px; overflow: hidden; } .label, .info { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .label { font-weight: bold; } .image { overflow: hidden; justify-content: center; font: var(--header-2); color: var(--text-1); height: 32px; width: 32px; border-radius: 50%; background: rgba(var(--neutral-1), 0.1); } .image > img { width: 100%; height: 100%; object-fit: cover; } :host-context(magicbooksio-app-bar) { max-width: 288px; } /* condensed */ :host([condensed]) .image { height: 24px; width: 24px; } `] } render() { return n.d` ${this.image ? n.d`
` : n.d` ${this.label ? n.d` ${this.getInitials(this.label)} ` : n.d`
`} `}
${this.label || this.info ? n.d` ${this.label ? n.d`${this.label}`: ""} ${this.info ? n.d`${this.info}`: ""}
`: ""} `} attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")) } getInitials(e) { var t = e.match(/\b\w/g) || []; return t = ((t.shift() || "") + (t.pop() || "")).toUpperCase() } }; __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "label", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "info", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "image", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "condensed", void 0), i = __decorate([Object(n.c)("magicbooksio-avatar")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioBadge extends n.a { static get styles() { return [r.a, n.b` :host { display: flex; justify-content: center; box-sizing: border-box; width: max-content; min-width: 16px; padding: 0 4px; border-radius: 8px; background: rgb(var(--functional-blue)); } :host(:not([label])) { padding: 4px; min-width: unset; } magicbooksio-text { color: white; font-weight: bold; } /* status */ :host([status]) { background: transparent; padding: 0px; } .status-icon[icon='cancel'] { color: rgb(var(--functional-red)); } .status-icon[icon='error'] { color: rgb(var(--functional-yellow)); } .status-icon[icon='check_circle'] { color: rgb(var(--functional-green)); } `] } render() { return n.d` ${this.status ? n.d` ${this.status ? n.d` `: ""} `: n.d` ${this.label ? n.d` ${this.label > 999 ? n.d` 999+ ` : n.d` ${this.label} `} `: ""} `} `} attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")) } getStatusIcon() { let e; switch (this.status) { case "error": e = "cancel"; break; case "warning": e = "error"; break; case "success": e = "check_circle" }return e } }; __decorate([Object(n.e)({ type: Number, reflect: !0 })], i.prototype, "label", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "status", void 0), i = __decorate([Object(n.c)("magicbooksio-badge")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioBreadcrumbs extends n.a { static get styles() { return [r.a, n.b` :host { display: flex; width: 100%; height: max-content; } `] } render() { return n.d` ` } }; i = __decorate([Object(n.c)("magicbooksio-breadcrumbs")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioBreadcrumbItem extends n.a { constructor() { super(...arguments), this.label = "Label", this.active = !1 } static get styles() { return [r.a, n.b` :host { display: flex; align-items: center; } magicbooksio-icon { pointer-events: none; margin: 0 4px; } magicbooksio-text { color: var(--text-2); cursor: pointer; font-weight: bold; } :host([active]) magicbooksio-text { color: var(--text-1); } /* hover inputs */ @media (hover: hover) { magicbooksio-text:hover:not(:active) { color: var(--text-1); } } `] } render() { return n.d` ${this.firstItem() ? "" : n.d` `} ${this.label} `} attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")) } firstItem() { let e, t; return t = Array.prototype.slice.call(this.parentElement.children), e = 0 == t.indexOf(this), e } }; __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "label", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "active", void 0), i = __decorate([Object(n.c)("magicbooksio-breadcrumb-item")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioButton extends n.a { constructor() { super(...arguments), this.label = "Label", this.color = "primary" } static get styles() { return [r.a, n.b` :host { font: var(--header-2); color: var(--text-1); display: flex; height: max-content; width: max-content; border-radius: 4px; cursor: pointer; transition: var(--transition-1); justify-content: center; user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :host(:not([icon])) { min-width: 56px; max-width: 160px; padding: 4px 12px; } :host([color='tertiary']:not([icon])) { padding: 3px 11px; } :host([icon]) { padding: 4px; } :host([color='tertiary'][icon]) { padding: 3px; } /* idle */ :host([color='primary']) { background-color: rgb(var(--accent-1)); } :host([color='secondary']) { background-color: rgba(var(--neutral-1), 0.1); } :host([color='tertiary']) { border-width: 1px; border-style: solid; border-color: rgba(var(--neutral-1), 0.25); } /* disabled */ :host([disabled]) { pointer-events: none; opacity: 0.2; } /* text and icon colors */ magicbooksio-icon { color: unset; } :host([color='primary']) { color: rgba(255, 255, 255, 0.9); } /* hover inputs */ @media (hover: hover) { :host([color='primary']:not(:active):hover) { background-color: rgb(var(--accent-1b)); } :host([color='secondary']:not(:active):hover) { background-color: rgba(var(--neutral-1), 0.15); } :host([color='tertiary']:not(:active):hover) { border-color: rgba(var(--neutral-1), 0.3); background-color: rgba(var(--neutral-1), 0.05); } } `] } render() { return n.d` ${this.icon ? n.d` ` : n.d` ${this.label} `} `} attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")) } }; __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "label", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "icon", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "color", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "disabled", void 0), i = __decorate([Object(n.c)("magicbooksio-button")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioCard extends n.a { constructor() { super(...arguments), this.flexDirection = "column", this.flat = !1, this.emptyHeader = !0, this.emptyFunctions = !0, this.emptyFooter = !0 } static get styles() { return [r.a, n.b` :host { display: flex; flex-direction: column; flex: 1; border-radius: 20px; box-sizing: border-box; overflow: hidden; } :host(:not([flat])) { background-color: rgb(var(--base-3)); box-shadow: var(--shadow-1); padding: 20px; } /* header */ slot, .header, .top { display: flex; overflow: visible; } .header, slot[name='functions'] { height: max-content; } .header { flex: 1; } .top:not(.empty) { padding-bottom: 16px; } slot[name='footer']:not(.empty) { padding-top: 16px; } .label { flex: 1; display: flex; } .label p { font: var(--header-1); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; } .label magicbooksio-icon { margin-right: 8px; } slot[name='footer']::slotted(*:not(:first-child)), slot[name='functions']::slotted(*) { margin-left: 12px; } /* content */ slot:not([name]) { flex: 1; width: 100%; padding: 0 16px; margin-right: -16px; margin-left: -16px; } :host([flex-direction='column']) slot:not([name]), .header { flex-direction: column; } :host([flex-direction='column']) slot:not([name])::slotted(*:not(:last-child)) { margin-bottom: 12px; } :host([flex-direction='row']) slot:not([name])::slotted(*:not(:last-child)) { margin-right: 12px; } /* footer */ slot[name='footer'] { justify-content: flex-end; } slot[name='header'], slot[name='functions'], slot[name='footer'] { align-items: center; } /* image */ .image { width: calc(100% + 32px); margin: -16px -16px 16px -16px; } `] } render() { return n.d` ${this.image ? n.d` ` : ""} this.emptyFooter = 0 === e.target.assignedNodes().length}" class="${this.emptyFooter ? "empty" : ""}" > `} attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")) } }; __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "label", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "icon", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "image", void 0), __decorate([Object(n.e)({ type: String, reflect: !0, attribute: "flex-direction" })], i.prototype, "flexDirection", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "flat", void 0), __decorate([Object(n.e)({ type: Boolean })], i.prototype, "emptyHeader", void 0), __decorate([Object(n.e)({ type: Boolean })], i.prototype, "emptyFunctions", void 0), __decorate([Object(n.e)({ type: Boolean })], i.prototype, "emptyFooter", void 0), i = __decorate([Object(n.c)("magicbooksio-card")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioCheckbox extends n.a { static get styles() { return [r.a, n.b` :host { display: flex; cursor: pointer; } input { display: none; } /* box */ .box { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin: 4px; border-radius: 2px; box-sizing: border-box; border: 2px solid rgba(var(--neutral-1), 0.35); transition: var(--transition-1); } :host([active]) .box { border-color: transparent; background: rgb(var(--accent-1)); } /* label */ magicbooksio-text { flex: 1; margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } /* disabled */ :host([disabled]) { pointer-events: none; opacity: 0.2; } /* hover inputs */ @media (hover: hover) { :host(:hover:not([active]):not(:active)) .box { border-color: rgba(var(--neutral-1), 0.3); } } `] } render() { return n.d` ${this.active ? n.d` ` : ""}
${this.label ? n.d` ${this.label} ` : ""} `} attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")) } connectedCallback() { super.connectedCallback(), this.addEventListener("click", () => { this.active = !this.active }) } }; __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "label", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "active", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "disabled", void 0), i = __decorate([Object(n.c)("magicbooksio-checkbox")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioDivider extends n.a { constructor() { super(...arguments), this.spacing = "m", this.orientation = "horizontal" } static get styles() { return [r.a, n.b` :host([orientation='horizontal']) { width: 100%; } :host([orientation='vertical']) { height: 100%; } .line { background: rgba(var(--neutral-1), 0.25); } :host([orientation='horizontal']) .line { height: 1px; width: 100%; } :host([orientation='vertical']) .line { width: 1px; height: 100%; } /* spacing */ :host([spacing='s'][orientation='horizontal']) { padding: 8px 0; } :host([spacing='m'][orientation='horizontal']) { padding: 16px 0; } :host([spacing='l'][orientation='horizontal']) { padding: 32px 0; } :host([spacing='s'][orientation='vertical']) { padding: 0 8px; } :host([spacing='m'][orientation='vertical']) { padding: 0 16px; } :host([spacing='l'][orientation='vertical']) { padding: 0 32px; } `] } render() { return n.d` ` } attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")) } }; __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "spacing", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "orientation", void 0), i = __decorate([Object(n.c)("magicbooksio-divider")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioDrawer extends n.a { constructor() { super(...arguments), this.position = "left", this.height = "320px", this.width = "320px", this.flexDirection = "column", this.visible = !1, this.emptyHeader = !0, this.emptyFunctions = !0, this.emptyFooter = !0 } static get styles() { return [r.a, n.b` :host { transition: var(--transition-1), 0s top, 0s left; position: fixed; opacity: 1; z-index: 5; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); } :host(:not([visible])) { opacity: 0; pointer-events: none; } magicbooksio-card { position: absolute; border-radius: 0px; background-color: rgb(var(--base-0)); box-shadow: var(--shadow-1); transition: 0.2s all ease-in-out, 0s top, 0s left; } /* position */ :host([position='left']) magicbooksio-card { left: 0; } :host([position='right']) magicbooksio-card { right: 0; } :host([position='top']) magicbooksio-card { top: 0; } :host([position='bottom']) magicbooksio-card { bottom: 0; } /* animations */ :host([position='left']:not([visible])) magicbooksio-card { margin-left: -40px; } :host([position='right']:not([visible])) magicbooksio-card { margin-right: -40px; } :host([position='top']:not([visible])) magicbooksio-card { margin-top: -40px; } :host([position='bottom']:not([visible])) magicbooksio-card { margin-bottom: -40px; } `] } render() { return n.d` e.stopPropagation()}" style="height: ${this.getCardSize().height}; width: ${this.getCardSize().width}; max-height: ${this.getCardSize().height}; max-width: ${this.getCardSize().width}" .label="${this.label}" .icon="${this.icon}" flex-direction="${this.flexDirection}" > this.emptyHeader = 0 === e.target.assignedNodes().length}" > ${this.sticky ? "" : n.d` this.visible = !1}" > `} this.emptyFooter = 0 === e.target.assignedNodes().length}" > `} attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")), "visible" === e && this.visible && this.addEventListener("click", () => this.sticky ? "" : this.visible = !1) } getCardSize() { let e = { height: void 0, width: void 0 }; switch (this.position) { case "left": case "right": e.height = "100%", e.width = this.width; break; case "top": case "bottom": e.height = this.height, e.width = "100%" }return e } }; __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "label", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "icon", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "position", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "height", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "width", void 0), __decorate([Object(n.e)({ type: String, reflect: !0, attribute: "flex-direction" })], i.prototype, "flexDirection", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "visible", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "sticky", void 0), __decorate([Object(n.e)({ type: Boolean })], i.prototype, "emptyHeader", void 0), __decorate([Object(n.e)({ type: Boolean })], i.prototype, "emptyFunctions", void 0), __decorate([Object(n.e)({ type: Boolean })], i.prototype, "emptyFooter", void 0), i = __decorate([Object(n.c)("magicbooksio-drawer")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioEmptyState extends n.a { static get styles() { return [r.a, n.b` :host { height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } slot[name='footer'] { display: flex; margin-top: 16px; } slot[name='footer']::slotted(*) { margin: 0 8px; } magicbooksio-icon + magicbooksio-text { margin-top: 8px; } magicbooksio-text { text-align: center; } `] } render() { return n.d` ${this.icon ? n.d` `: ""} ${this.label ? n.d` ${this.label} ` : ""} `} attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")) } }; __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "label", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "icon", void 0), i = __decorate([Object(n.c)("magicbooksio-empty-state")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioGrid extends n.a { constructor() { super(...arguments), this.columns = 12, this.spacing = "m" } static get styles() { return [r.a, n.b` :host { display: grid; grid-template-columns: repeat(12, 1fr); } :host(:not([fit-content])) { height: 100%; width: 100%; } ::slotted(*) { width: auto; min-width: 0; min-height: 0; } /* spacing */ :host([spacing='s']) { grid-gap: 8px; } :host([spacing='m']) { grid-gap: 12px; } :host([spacing='l']) { grid-gap: 16px; } /* columns and rows */ ::slotted(*[grid-cols='0']) { display: none; } ::slotted(*:not([grid-cols])), ::slotted(*[grid-cols='1']) { grid-column: span 1; } ::slotted(*[grid-cols='2']) { grid-column: span 2; } ::slotted(*[grid-cols='3']) { grid-column: span 3; } ::slotted(*[grid-cols='4']) { grid-column: span 4; } ::slotted(*[grid-cols='5']) { grid-column: span 5; } ::slotted(*[grid-cols='6']) { grid-column: span 6; } ::slotted(*[grid-cols='7']) { grid-column: span 7; } ::slotted(*[grid-cols='8']) { grid-column: span 8; } ::slotted(*[grid-cols='9']) { grid-column: span 9; } ::slotted(*[grid-cols='10']) { grid-column: span 10; } ::slotted(*[grid-cols='11']) { grid-column: span 11; } ::slotted(*[grid-cols='12']) { grid-column: span 12; } ::slotted(*:not([grid-rows])), ::slotted(*[grid-rows='1']) { grid-row: span 1; } ::slotted(*[grid-rows='2']) { grid-row: span 2; } ::slotted(*[grid-rows='3']) { grid-row: span 3; } ::slotted(*[grid-rows='4']) { grid-row: span 4; } ::slotted(*[grid-rows='5']) { grid-row: span 5; } ::slotted(*[grid-rows='6']) { grid-row: span 6; } ::slotted(*[grid-rows='7']) { grid-row: span 7; } ::slotted(*[grid-rows='8']) { grid-row: span 8; } ::slotted(*[grid-rows='9']) { grid-row: span 9; } ::slotted(*[grid-rows='10']) { grid-row: span 10; } ::slotted(*[grid-rows='11']) { grid-row: span 11; } ::slotted(*[grid-rows='12']) { grid-row: span 12; } /* tablet */ @media only screen and (max-width: 1025px) { ::slotted(*[grid-cols-m='0']) { display: none; } ::slotted(*[grid-cols-m='1']) { grid-column: span 1; } ::slotted(*[grid-cols-m='2']) { grid-column: span 2; } ::slotted(*[grid-cols-m='3']) { grid-column: span 3; } ::slotted(*[grid-cols-m='4']) { grid-column: span 4; } ::slotted(*[grid-cols-m='5']) { grid-column: span 5; } ::slotted(*[grid-cols-m='6']) { grid-column: span 6; } ::slotted(*[grid-cols-m='7']) { grid-column: span 7; } ::slotted(*[grid-cols-m='8']) { grid-column: span 8; } ::slotted(*[grid-cols-m='9']) { grid-column: span 9; } ::slotted(*[grid-cols-m='10']) { grid-column: span 10; } ::slotted(*[grid-cols-m='11']) { grid-column: span 11; } ::slotted(*[grid-cols-m='12']) { grid-column: span 12; } ::slotted(*[grid-rows-m='1']) { grid-row: span 1; } ::slotted(*[grid-rows-m='2']) { grid-row: span 2; } ::slotted(*[grid-rows-m='3']) { grid-row: span 3; } ::slotted(*[grid-rows-m='4']) { grid-row: span 4; } ::slotted(*[grid-rows-m='5']) { grid-row: span 5; } ::slotted(*[grid-rows-m='6']) { grid-row: span 6; } ::slotted(*[grid-rows-m='7']) { grid-row: span 7; } ::slotted(*[grid-rows-m='8']) { grid-row: span 8; } ::slotted(*[grid-rows-m='9']) { grid-row: span 9; } ::slotted(*[grid-rows-m='10']) { grid-row: span 10; } ::slotted(*[grid-rows-m='11']) { grid-row: span 11; } ::slotted(*[grid-rows-m='12']) { grid-row: span 12; } } /* tablet */ @media only screen and (max-width: 767px) { ::slotted(*[grid-cols-s='0']) { display: none; } ::slotted(*[grid-cols-s='1']) { grid-column: span 1; } ::slotted(*[grid-cols-s='2']) { grid-column: span 2; } ::slotted(*[grid-cols-s='3']) { grid-column: span 3; } ::slotted(*[grid-cols-s='4']) { grid-column: span 4; } ::slotted(*[grid-cols-s='5']) { grid-column: span 5; } ::slotted(*[grid-cols-s='6']) { grid-column: span 6; } ::slotted(*[grid-cols-s='7']) { grid-column: span 7; } ::slotted(*[grid-cols-s='8']) { grid-column: span 8; } ::slotted(*[grid-cols-s='9']) { grid-column: span 9; } ::slotted(*[grid-cols-s='10']) { grid-column: span 10; } ::slotted(*[grid-cols-s='11']) { grid-column: span 11; } ::slotted(*[grid-cols-s='12']) { grid-column: span 12; } ::slotted(*[grid-rows-s='1']) { grid-row: span 1; } ::slotted(*[grid-rows-s='2']) { grid-row: span 2; } ::slotted(*[grid-rows-s='3']) { grid-row: span 3; } ::slotted(*[grid-rows-s='4']) { grid-row: span 4; } ::slotted(*[grid-rows-s='5']) { grid-row: span 5; } ::slotted(*[grid-rows-s='6']) { grid-row: span 6; } ::slotted(*[grid-rows-s='7']) { grid-row: span 7; } ::slotted(*[grid-rows-s='8']) { grid-row: span 8; } ::slotted(*[grid-rows-s='9']) { grid-row: span 9; } ::slotted(*[grid-rows-s='10']) { grid-row: span 10; } ::slotted(*[grid-rows-s='11']) { grid-row: span 11; } ::slotted(*[grid-rows-s='12']) { grid-row: span 12; } } `] } render() { return n.d` ` } attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")), "columns" === e ? this.style.gridTemplateColumns = `repeat(${this.columns}, 1fr)` : "rows" === e && (this.style.gridTemplateRows = `repeat(${this.rows}, 1fr)`) } }; __decorate([Object(n.e)({ type: Number, reflect: !0 })], i.prototype, "columns", void 0), __decorate([Object(n.e)({ type: Number, reflect: !0 })], i.prototype, "rows", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "spacing", void 0), i = __decorate([Object(n.c)("magicbooksio-grid")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioImage extends n.a { constructor() { super(...arguments), this.width = "100%", this.fit = "contain" } static get styles() { return [r.a, n.b` :host { position: relative; max-width: max-content; display: flex; flex-direction: column; font: var(--body-2); color: var(--text-1); } /* legend */ magicbooksio-text { width: 100%; color: unset; font: unset; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :host(:not([legend-position])) magicbooksio-text { margin-top: 8px; } :host([legend-position^="inner-"]) magicbooksio-text { position: absolute; padding: 8px; box-sizing: border-box; } :host([legend-position="inner-top"]) magicbooksio-text { top: 0; background-image: linear-gradient( rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) ); } :host([legend-position="inner-bottom"]) magicbooksio-text { bottom: 0; background-image: linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8) ); } /* slots */ slot { display: flex; justify-content: flex-end; gap: 8px; position: absolute; padding: 4px; box-sizing: border-box; width: 100%; overflow: hidden; } slot[name="top"] { top: 0; } :host([legend][legend-position="inner-top"]) slot[name="top"] { top: 24px; } slot[name="bottom"] { bottom: 0; } :host([legend]:not([legend-position])) slot[name="bottom"], :host([legend][legend-position="inner-bottom"]) slot[name="bottom"] { bottom: 24px; } `] } render() { return n.d` ${this.legend ? n.d` ${this.legend} ` : ""} `} attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")) } }; __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "src", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "alt", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "width", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "height", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "fit", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "legend", void 0), __decorate([Object(n.e)({ type: String, reflect: !0, attribute: "legend-position" })], i.prototype, "legendPosition", void 0), i = __decorate([Object(n.c)("magicbooksio-image")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioIcon extends n.a { constructor() { super(...arguments), this.size = "m" } static get styles() { return [r.a, n.b` :host { font-family: 'md-icons'; line-height: 1; -webkit-font-smoothing: auto; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; opacity: 0.9; color: var(--text-1); transition: var(--transition-1); height: max-content; width: max-content; min-height: max-content; min-width: max-content; overflow: hidden; background-repeat: no-repeat; background-position: center; background-size: contain; } :host([button]) { opacity: 0.6; cursor: pointer; } :host([disabled]) { pointer-events: none; opacity: 0.2; } /* size */ :host([size='xl']) { height: 48px; width: 48px; font-size: 48px; } :host([size='l']) { height: 32px; width: 32px; font-size: 32px; } :host([size='m']) { height: 24px; width: 24px; font-size: 24px; } :host([size='s']) { height: 16px; width: 16px; font-size: 16px; } /* hover inputs */ @media (hover: hover) { :host([button]:hover:not(:active)) { opacity: 0.9; } } :host([icon='3d_rotation']):before { content: '\\e84d'; } :host([icon='ac_unit']):before { content: '\\eb3b'; } :host([icon='access_alarm']):before { content: '\\e190'; } :host([icon='access_alarms']):before { content: '\\e191'; } :host([icon='access_time']):before { content: '\\e192'; } :host([icon='accessibility']):before { content: '\\e84e'; } :host([icon='accessible']):before { content: '\\e914'; } :host([icon='account_balance']):before { content: '\\e84f'; } :host([icon='account_balance_wallet']):before { content: '\\e850'; } :host([icon='account_box']):before { content: '\\e851'; } :host([icon='account_circle']):before { content: '\\e853'; } :host([icon='adb']):before { content: '\\e60e'; } :host([icon='add']):before { content: '\\e145'; } :host([icon='add_a_photo']):before { content: '\\e439'; } :host([icon='add_alarm']):before { content: '\\e193'; } :host([icon='add_alert']):before { content: '\\e003'; } :host([icon='add_box']):before { content: '\\e146'; } :host([icon='add_circle']):before { content: '\\e147'; } :host([icon='add_circle_outline']):before { content: '\\e148'; } :host([icon='add_location']):before { content: '\\e567'; } :host([icon='add_shopping_cart']):before { content: '\\e854'; } :host([icon='add_to_photos']):before { content: '\\e39d'; } :host([icon='add_to_queue']):before { content: '\\e05c'; } :host([icon='adjust']):before { content: '\\e39e'; } :host([icon='airline_seat_flat']):before { content: '\\e630'; } :host([icon='airline_seat_flat_angled']):before { content: '\\e631'; } :host([icon='airline_seat_individual_suite']):before { content: '\\e632'; } :host([icon='airline_seat_legroom_extra']):before { content: '\\e633'; } :host([icon='airline_seat_legroom_normal']):before { content: '\\e634'; } :host([icon='airline_seat_legroom_reduced']):before { content: '\\e635'; } :host([icon='airline_seat_recline_extra']):before { content: '\\e636'; } :host([icon='airline_seat_recline_normal']):before { content: '\\e637'; } :host([icon='airplanemode_active']):before { content: '\\e195'; } :host([icon='airplanemode_inactive']):before { content: '\\e194'; } :host([icon='airplay']):before { content: '\\e055'; } :host([icon='airport_shuttle']):before { content: '\\eb3c'; } :host([icon='alarm']):before { content: '\\e855'; } :host([icon='alarm_add']):before { content: '\\e856'; } :host([icon='alarm_off']):before { content: '\\e857'; } :host([icon='alarm_on']):before { content: '\\e858'; } :host([icon='album']):before { content: '\\e019'; } :host([icon='all_inclusive']):before { content: '\\eb3d'; } :host([icon='all_out']):before { content: '\\e90b'; } :host([icon='android']):before { content: '\\e859'; } :host([icon='announcement']):before { content: '\\e85a'; } :host([icon='apps']):before { content: '\\e5c3'; } :host([icon='archive']):before { content: '\\e149'; } :host([icon='arrow_back']):before { content: '\\e5c4'; } :host([icon='arrow_downward']):before { content: '\\e5db'; } :host([icon='arrow_drop_down']):before { content: '\\e5c5'; } :host([icon='arrow_drop_down_circle']):before { content: '\\e5c6'; } :host([icon='arrow_drop_up']):before { content: '\\e5c7'; } :host([icon='arrow_forward']):before { content: '\\e5c8'; } :host([icon='arrow_upward']):before { content: '\\e5d8'; } :host([icon='art_track']):before { content: '\\e060'; } :host([icon='aspect_ratio']):before { content: '\\e85b'; } :host([icon='assessment']):before { content: '\\e85c'; } :host([icon='assignment']):before { content: '\\e85d'; } :host([icon='assignment_ind']):before { content: '\\e85e'; } :host([icon='assignment_late']):before { content: '\\e85f'; } :host([icon='assignment_return']):before { content: '\\e860'; } :host([icon='assignment_returned']):before { content: '\\e861'; } :host([icon='assignment_turned_in']):before { content: '\\e862'; } :host([icon='assistant']):before { content: '\\e39f'; } :host([icon='assistant_photo']):before { content: '\\e3a0'; } :host([icon='attach_file']):before { content: '\\e226'; } :host([icon='attach_money']):before { content: '\\e227'; } :host([icon='attachment']):before { content: '\\e2bc'; } :host([icon='audiotrack']):before { content: '\\e3a1'; } :host([icon='autorenew']):before { content: '\\e863'; } :host([icon='av_timer']):before { content: '\\e01b'; } :host([icon='backspace']):before { content: '\\e14a'; } :host([icon='backup']):before { content: '\\e864'; } :host([icon='battery_alert']):before { content: '\\e19c'; } :host([icon='battery_charging_full']):before { content: '\\e1a3'; } :host([icon='battery_full']):before { content: '\\e1a4'; } :host([icon='battery_std']):before { content: '\\e1a5'; } :host([icon='battery_unknown']):before { content: '\\e1a6'; } :host([icon='beach_access']):before { content: '\\eb3e'; } :host([icon='beenhere']):before { content: '\\e52d'; } :host([icon='block']):before { content: '\\e14b'; } :host([icon='bluetooth']):before { content: '\\e1a7'; } :host([icon='bluetooth_audio']):before { content: '\\e60f'; } :host([icon='bluetooth_connected']):before { content: '\\e1a8'; } :host([icon='bluetooth_disabled']):before { content: '\\e1a9'; } :host([icon='bluetooth_searching']):before { content: '\\e1aa'; } :host([icon='blur_circular']):before { content: '\\e3a2'; } :host([icon='blur_linear']):before { content: '\\e3a3'; } :host([icon='blur_off']):before { content: '\\e3a4'; } :host([icon='blur_on']):before { content: '\\e3a5'; } :host([icon='book']):before { content: '\\e865'; } :host([icon='bookmark']):before { content: '\\e866'; } :host([icon='bookmark_border']):before { content: '\\e867'; } :host([icon='border_all']):before { content: '\\e228'; } :host([icon='border_bottom']):before { content: '\\e229'; } :host([icon='border_clear']):before { content: '\\e22a'; } :host([icon='border_color']):before { content: '\\e22b'; } :host([icon='border_horizontal']):before { content: '\\e22c'; } :host([icon='border_inner']):before { content: '\\e22d'; } :host([icon='border_left']):before { content: '\\e22e'; } :host([icon='border_outer']):before { content: '\\e22f'; } :host([icon='border_right']):before { content: '\\e230'; } :host([icon='border_style']):before { content: '\\e231'; } :host([icon='border_top']):before { content: '\\e232'; } :host([icon='border_vertical']):before { content: '\\e233'; } :host([icon='branding_watermark']):before { content: '\\e06b'; } :host([icon='brightness_1']):before { content: '\\e3a6'; } :host([icon='brightness_2']):before { content: '\\e3a7'; } :host([icon='brightness_3']):before { content: '\\e3a8'; } :host([icon='brightness_4']):before { content: '\\e3a9'; } :host([icon='brightness_5']):before { content: '\\e3aa'; } :host([icon='brightness_6']):before { content: '\\e3ab'; } :host([icon='brightness_7']):before { content: '\\e3ac'; } :host([icon='brightness_auto']):before { content: '\\e1ab'; } :host([icon='brightness_high']):before { content: '\\e1ac'; } :host([icon='brightness_low']):before { content: '\\e1ad'; } :host([icon='brightness_medium']):before { content: '\\e1ae'; } :host([icon='broken_image']):before { content: '\\e3ad'; } :host([icon='brush']):before { content: '\\e3ae'; } :host([icon='bubble_chart']):before { content: '\\e6dd'; } :host([icon='bug_report']):before { content: '\\e868'; } :host([icon='build']):before { content: '\\e869'; } :host([icon='burst_mode']):before { content: '\\e43c'; } :host([icon='business']):before { content: '\\e0af'; } :host([icon='business_center']):before { content: '\\eb3f'; } :host([icon='cached']):before { content: '\\e86a'; } :host([icon='cake']):before { content: '\\e7e9'; } :host([icon='call']):before { content: '\\e0b0'; } :host([icon='call_end']):before { content: '\\e0b1'; } :host([icon='call_made']):before { content: '\\e0b2'; } :host([icon='call_merge']):before { content: '\\e0b3'; } :host([icon='call_missed']):before { content: '\\e0b4'; } :host([icon='call_missed_outgoing']):before { content: '\\e0e4'; } :host([icon='call_received']):before { content: '\\e0b5'; } :host([icon='call_split']):before { content: '\\e0b6'; } :host([icon='call_to_action']):before { content: '\\e06c'; } :host([icon='camera']):before { content: '\\e3af'; } :host([icon='camera_alt']):before { content: '\\e3b0'; } :host([icon='camera_enhance']):before { content: '\\e8fc'; } :host([icon='camera_front']):before { content: '\\e3b1'; } :host([icon='camera_rear']):before { content: '\\e3b2'; } :host([icon='camera_roll']):before { content: '\\e3b3'; } :host([icon='cancel']):before { content: '\\e5c9'; } :host([icon='card_giftcard']):before { content: '\\e8f6'; } :host([icon='card_membership']):before { content: '\\e8f7'; } :host([icon='card_travel']):before { content: '\\e8f8'; } :host([icon='casino']):before { content: '\\eb40'; } :host([icon='cast']):before { content: '\\e307'; } :host([icon='cast_connected']):before { content: '\\e308'; } :host([icon='center_focus_strong']):before { content: '\\e3b4'; } :host([icon='center_focus_weak']):before { content: '\\e3b5'; } :host([icon='change_history']):before { content: '\\e86b'; } :host([icon='chat']):before { content: '\\e0b7'; } :host([icon='chat_bubble']):before { content: '\\e0ca'; } :host([icon='chat_bubble_outline']):before { content: '\\e0cb'; } :host([icon='check']):before { content: '\\e5ca'; } :host([icon='check_box']):before { content: '\\e834'; } :host([icon='check_box_outline_blank']):before { content: '\\e835'; } :host([icon='check_circle']):before { content: '\\e86c'; } :host([icon='chevron_left']):before { content: '\\e5cb'; } :host([icon='chevron_right']):before { content: '\\e5cc'; } :host([icon='child_care']):before { content: '\\eb41'; } :host([icon='child_friendly']):before { content: '\\eb42'; } :host([icon='chrome_reader_mode']):before { content: '\\e86d'; } :host([icon='class']):before { content: '\\e86e'; } :host([icon='clear']):before { content: '\\e14c'; } :host([icon='clear_all']):before { content: '\\e0b8'; } :host([icon='close']):before { content: '\\e5cd'; } :host([icon='closed_caption']):before { content: '\\e01c'; } :host([icon='cloud']):before { content: '\\e2bd'; } :host([icon='cloud_circle']):before { content: '\\e2be'; } :host([icon='cloud_done']):before { content: '\\e2bf'; } :host([icon='cloud_download']):before { content: '\\e2c0'; } :host([icon='cloud_off']):before { content: '\\e2c1'; } :host([icon='cloud_queue']):before { content: '\\e2c2'; } :host([icon='cloud_upload']):before { content: '\\e2c3'; } :host([icon='code']):before { content: '\\e86f'; } :host([icon='collections']):before { content: '\\e3b6'; } :host([icon='collections_bookmark']):before { content: '\\e431'; } :host([icon='color_lens']):before { content: '\\e3b7'; } :host([icon='colorize']):before { content: '\\e3b8'; } :host([icon='comment']):before { content: '\\e0b9'; } :host([icon='compare']):before { content: '\\e3b9'; } :host([icon='compare_arrows']):before { content: '\\e915'; } :host([icon='computer']):before { content: '\\e30a'; } :host([icon='confirmation_number']):before { content: '\\e638'; } :host([icon='contact_mail']):before { content: '\\e0d0'; } :host([icon='contact_phone']):before { content: '\\e0cf'; } :host([icon='contacts']):before { content: '\\e0ba'; } :host([icon='content_copy']):before { content: '\\e14d'; } :host([icon='content_cut']):before { content: '\\e14e'; } :host([icon='content_paste']):before { content: '\\e14f'; } :host([icon='control_point']):before { content: '\\e3ba'; } :host([icon='control_point_duplicate']):before { content: '\\e3bb'; } :host([icon='copyright']):before { content: '\\e90c'; } :host([icon='create']):before { content: '\\e150'; } :host([icon='create_new_folder']):before { content: '\\e2cc'; } :host([icon='credit_card']):before { content: '\\e870'; } :host([icon='crop']):before { content: '\\e3be'; } :host([icon='crop_16_9']):before { content: '\\e3bc'; } :host([icon='crop_3_2']):before { content: '\\e3bd'; } :host([icon='crop_5_4']):before { content: '\\e3bf'; } :host([icon='crop_7_5']):before { content: '\\e3c0'; } :host([icon='crop_din']):before { content: '\\e3c1'; } :host([icon='crop_free']):before { content: '\\e3c2'; } :host([icon='crop_landscape']):before { content: '\\e3c3'; } :host([icon='crop_original']):before { content: '\\e3c4'; } :host([icon='crop_portrait']):before { content: '\\e3c5'; } :host([icon='crop_rotate']):before { content: '\\e437'; } :host([icon='crop_square']):before { content: '\\e3c6'; } :host([icon='dashboard']):before { content: '\\e871'; } :host([icon='data_usage']):before { content: '\\e1af'; } :host([icon='date_range']):before { content: '\\e916'; } :host([icon='dehaze']):before { content: '\\e3c7'; } :host([icon='delete']):before { content: '\\e872'; } :host([icon='delete_forever']):before { content: '\\e92b'; } :host([icon='delete_sweep']):before { content: '\\e16c'; } :host([icon='description']):before { content: '\\e873'; } :host([icon='desktop_mac']):before { content: '\\e30b'; } :host([icon='desktop_windows']):before { content: '\\e30c'; } :host([icon='details']):before { content: '\\e3c8'; } :host([icon='developer_board']):before { content: '\\e30d'; } :host([icon='developer_mode']):before { content: '\\e1b0'; } :host([icon='device_hub']):before { content: '\\e335'; } :host([icon='devices']):before { content: '\\e1b1'; } :host([icon='devices_other']):before { content: '\\e337'; } :host([icon='dialer_sip']):before { content: '\\e0bb'; } :host([icon='dialpad']):before { content: '\\e0bc'; } :host([icon='directions']):before { content: '\\e52e'; } :host([icon='directions_bike']):before { content: '\\e52f'; } :host([icon='directions_boat']):before { content: '\\e532'; } :host([icon='directions_bus']):before { content: '\\e530'; } :host([icon='directions_car']):before { content: '\\e531'; } :host([icon='directions_railway']):before { content: '\\e534'; } :host([icon='directions_run']):before { content: '\\e566'; } :host([icon='directions_subway']):before { content: '\\e533'; } :host([icon='directions_transit']):before { content: '\\e535'; } :host([icon='directions_walk']):before { content: '\\e536'; } :host([icon='disc_full']):before { content: '\\e610'; } :host([icon='dns']):before { content: '\\e875'; } :host([icon='do_not_disturb']):before { content: '\\e612'; } :host([icon='do_not_disturb_alt']):before { content: '\\e611'; } :host([icon='do_not_disturb_off']):before { content: '\\e643'; } :host([icon='do_not_disturb_on']):before { content: '\\e644'; } :host([icon='dock']):before { content: '\\e30e'; } :host([icon='domain']):before { content: '\\e7ee'; } :host([icon='done']):before { content: '\\e876'; } :host([icon='done_all']):before { content: '\\e877'; } :host([icon='donut_large']):before { content: '\\e917'; } :host([icon='donut_small']):before { content: '\\e918'; } :host([icon='drafts']):before { content: '\\e151'; } :host([icon='drag_handle']):before { content: '\\e25d'; } :host([icon='drive_eta']):before { content: '\\e613'; } :host([icon='dvr']):before { content: '\\e1b2'; } :host([icon='edit']):before { content: '\\e3c9'; } :host([icon='edit_location']):before { content: '\\e568'; } :host([icon='eject']):before { content: '\\e8fb'; } :host([icon='email']):before { content: '\\e0be'; } :host([icon='enhanced_encryption']):before { content: '\\e63f'; } :host([icon='equalizer']):before { content: '\\e01d'; } :host([icon='error']):before { content: '\\e000'; } :host([icon='error_outline']):before { content: '\\e001'; } :host([icon='euro_symbol']):before { content: '\\e926'; } :host([icon='ev_station']):before { content: '\\e56d'; } :host([icon='event']):before { content: '\\e878'; } :host([icon='event_available']):before { content: '\\e614'; } :host([icon='event_busy']):before { content: '\\e615'; } :host([icon='event_note']):before { content: '\\e616'; } :host([icon='event_seat']):before { content: '\\e903'; } :host([icon='exit_to_app']):before { content: '\\e879'; } :host([icon='expand_less']):before { content: '\\e5ce'; } :host([icon='expand_more']):before { content: '\\e5cf'; } :host([icon='explicit']):before { content: '\\e01e'; } :host([icon='explore']):before { content: '\\e87a'; } :host([icon='exposure']):before { content: '\\e3ca'; } :host([icon='exposure_neg_1']):before { content: '\\e3cb'; } :host([icon='exposure_neg_2']):before { content: '\\e3cc'; } :host([icon='exposure_plus_1']):before { content: '\\e3cd'; } :host([icon='exposure_plus_2']):before { content: '\\e3ce'; } :host([icon='exposure_zero']):before { content: '\\e3cf'; } :host([icon='extension']):before { content: '\\e87b'; } :host([icon='face']):before { content: '\\e87c'; } :host([icon='fast_forward']):before { content: '\\e01f'; } :host([icon='fast_rewind']):before { content: '\\e020'; } :host([icon='favorite']):before { content: '\\e87d'; } :host([icon='favorite_border']):before { content: '\\e87e'; } :host([icon='featured_play_list']):before { content: '\\e06d'; } :host([icon='featured_video']):before { content: '\\e06e'; } :host([icon='feedback']):before { content: '\\e87f'; } :host([icon='fiber_dvr']):before { content: '\\e05d'; } :host([icon='fiber_manual_record']):before { content: '\\e061'; } :host([icon='fiber_new']):before { content: '\\e05e'; } :host([icon='fiber_pin']):before { content: '\\e06a'; } :host([icon='fiber_smart_record']):before { content: '\\e062'; } :host([icon='file_download']):before { content: '\\e2c4'; } :host([icon='file_upload']):before { content: '\\e2c6'; } :host([icon='filter']):before { content: '\\e3d3'; } :host([icon='filter_1']):before { content: '\\e3d0'; } :host([icon='filter_2']):before { content: '\\e3d1'; } :host([icon='filter_3']):before { content: '\\e3d2'; } :host([icon='filter_4']):before { content: '\\e3d4'; } :host([icon='filter_5']):before { content: '\\e3d5'; } :host([icon='filter_6']):before { content: '\\e3d6'; } :host([icon='filter_7']):before { content: '\\e3d7'; } :host([icon='filter_8']):before { content: '\\e3d8'; } :host([icon='filter_9']):before { content: '\\e3d9'; } :host([icon='filter_9_plus']):before { content: '\\e3da'; } :host([icon='filter_b_and_w']):before { content: '\\e3db'; } :host([icon='filter_center_focus']):before { content: '\\e3dc'; } :host([icon='filter_drama']):before { content: '\\e3dd'; } :host([icon='filter_frames']):before { content: '\\e3de'; } :host([icon='filter_hdr']):before { content: '\\e3df'; } :host([icon='filter_list']):before { content: '\\e152'; } :host([icon='filter_none']):before { content: '\\e3e0'; } :host([icon='filter_tilt_shift']):before { content: '\\e3e2'; } :host([icon='filter_vintage']):before { content: '\\e3e3'; } :host([icon='find_in_page']):before { content: '\\e880'; } :host([icon='find_replace']):before { content: '\\e881'; } :host([icon='fingerprint']):before { content: '\\e90d'; } :host([icon='first_page']):before { content: '\\e5dc'; } :host([icon='fitness_center']):before { content: '\\eb43'; } :host([icon='flag']):before { content: '\\e153'; } :host([icon='flare']):before { content: '\\e3e4'; } :host([icon='flash_auto']):before { content: '\\e3e5'; } :host([icon='flash_off']):before { content: '\\e3e6'; } :host([icon='flash_on']):before { content: '\\e3e7'; } :host([icon='flight']):before { content: '\\e539'; } :host([icon='flight_land']):before { content: '\\e904'; } :host([icon='flight_takeoff']):before { content: '\\e905'; } :host([icon='flip']):before { content: '\\e3e8'; } :host([icon='flip_to_back']):before { content: '\\e882'; } :host([icon='flip_to_front']):before { content: '\\e883'; } :host([icon='folder']):before { content: '\\e2c7'; } :host([icon='folder_open']):before { content: '\\e2c8'; } :host([icon='folder_shared']):before { content: '\\e2c9'; } :host([icon='folder_special']):before { content: '\\e617'; } :host([icon='font_download']):before { content: '\\e167'; } :host([icon='format_align_center']):before { content: '\\e234'; } :host([icon='format_align_justify']):before { content: '\\e235'; } :host([icon='format_align_left']):before { content: '\\e236'; } :host([icon='format_align_right']):before { content: '\\e237'; } :host([icon='format_bold']):before { content: '\\e238'; } :host([icon='format_clear']):before { content: '\\e239'; } :host([icon='format_color_fill']):before { content: '\\e23a'; } :host([icon='format_color_reset']):before { content: '\\e23b'; } :host([icon='format_color_text']):before { content: '\\e23c'; } :host([icon='format_indent_decrease']):before { content: '\\e23d'; } :host([icon='format_indent_increase']):before { content: '\\e23e'; } :host([icon='format_italic']):before { content: '\\e23f'; } :host([icon='format_line_spacing']):before { content: '\\e240'; } :host([icon='format_list_bulleted']):before { content: '\\e241'; } :host([icon='format_list_numbered']):before { content: '\\e242'; } :host([icon='format_paint']):before { content: '\\e243'; } :host([icon='format_quote']):before { content: '\\e244'; } :host([icon='format_shapes']):before { content: '\\e25e'; } :host([icon='format_size']):before { content: '\\e245'; } :host([icon='format_strikethrough']):before { content: '\\e246'; } :host([icon='format_textdirection_l_to_r']):before { content: '\\e247'; } :host([icon='format_textdirection_r_to_l']):before { content: '\\e248'; } :host([icon='format_underlined']):before { content: '\\e249'; } :host([icon='forum']):before { content: '\\e0bf'; } :host([icon='forward']):before { content: '\\e154'; } :host([icon='forward_10']):before { content: '\\e056'; } :host([icon='forward_30']):before { content: '\\e057'; } :host([icon='forward_5']):before { content: '\\e058'; } :host([icon='free_breakfast']):before { content: '\\eb44'; } :host([icon='fullscreen']):before { content: '\\e5d0'; } :host([icon='fullscreen_exit']):before { content: '\\e5d1'; } :host([icon='functions']):before { content: '\\e24a'; } :host([icon='g_translate']):before { content: '\\e927'; } :host([icon='gamepad']):before { content: '\\e30f'; } :host([icon='games']):before { content: '\\e021'; } :host([icon='gavel']):before { content: '\\e90e'; } :host([icon='gesture']):before { content: '\\e155'; } :host([icon='get_app']):before { content: '\\e884'; } :host([icon='gif']):before { content: '\\e908'; } :host([icon='golf_course']):before { content: '\\eb45'; } :host([icon='gps_fixed']):before { content: '\\e1b3'; } :host([icon='gps_not_fixed']):before { content: '\\e1b4'; } :host([icon='gps_off']):before { content: '\\e1b5'; } :host([icon='grade']):before { content: '\\e885'; } :host([icon='gradient']):before { content: '\\e3e9'; } :host([icon='grain']):before { content: '\\e3ea'; } :host([icon='graphic_eq']):before { content: '\\e1b8'; } :host([icon='grid_off']):before { content: '\\e3eb'; } :host([icon='grid_on']):before { content: '\\e3ec'; } :host([icon='group']):before { content: '\\e7ef'; } :host([icon='group_add']):before { content: '\\e7f0'; } :host([icon='group_work']):before { content: '\\e886'; } :host([icon='hd']):before { content: '\\e052'; } :host([icon='hdr_off']):before { content: '\\e3ed'; } :host([icon='hdr_on']):before { content: '\\e3ee'; } :host([icon='hdr_strong']):before { content: '\\e3f1'; } :host([icon='hdr_weak']):before { content: '\\e3f2'; } :host([icon='headset']):before { content: '\\e310'; } :host([icon='headset_mic']):before { content: '\\e311'; } :host([icon='healing']):before { content: '\\e3f3'; } :host([icon='hearing']):before { content: '\\e023'; } :host([icon='help']):before { content: '\\e887'; } :host([icon='help_outline']):before { content: '\\e8fd'; } :host([icon='high_quality']):before { content: '\\e024'; } :host([icon='highlight']):before { content: '\\e25f'; } :host([icon='highlight_off']):before { content: '\\e888'; } :host([icon='history']):before { content: '\\e889'; } :host([icon='home']):before { content: '\\e88a'; } :host([icon='hot_tub']):before { content: '\\eb46'; } :host([icon='hotel']):before { content: '\\e53a'; } :host([icon='hourglass_empty']):before { content: '\\e88b'; } :host([icon='hourglass_full']):before { content: '\\e88c'; } :host([icon='http']):before { content: '\\e902'; } :host([icon='https']):before { content: '\\e88d'; } :host([icon='image']):before { content: '\\e3f4'; } :host([icon='image_aspect_ratio']):before { content: '\\e3f5'; } :host([icon='import_contacts']):before { content: '\\e0e0'; } :host([icon='import_export']):before { content: '\\e0c3'; } :host([icon='important_devices']):before { content: '\\e912'; } :host([icon='inbox']):before { content: '\\e156'; } :host([icon='indeterminate_check_box']):before { content: '\\e909'; } :host([icon='info']):before { content: '\\e88e'; } :host([icon='info_outline']):before { content: '\\e88f'; } :host([icon='input']):before { content: '\\e890'; } :host([icon='insert_chart']):before { content: '\\e24b'; } :host([icon='insert_comment']):before { content: '\\e24c'; } :host([icon='insert_drive_file']):before { content: '\\e24d'; } :host([icon='insert_emoticon']):before { content: '\\e24e'; } :host([icon='insert_invitation']):before { content: '\\e24f'; } :host([icon='insert_link']):before { content: '\\e250'; } :host([icon='insert_photo']):before { content: '\\e251'; } :host([icon='invert_colors']):before { content: '\\e891'; } :host([icon='invert_colors_off']):before { content: '\\e0c4'; } :host([icon='iso']):before { content: '\\e3f6'; } :host([icon='keyboard']):before { content: '\\e312'; } :host([icon='keyboard_arrow_down']):before { content: '\\e313'; } :host([icon='keyboard_arrow_left']):before { content: '\\e314'; } :host([icon='keyboard_arrow_right']):before { content: '\\e315'; } :host([icon='keyboard_arrow_up']):before { content: '\\e316'; } :host([icon='keyboard_backspace']):before { content: '\\e317'; } :host([icon='keyboard_capslock']):before { content: '\\e318'; } :host([icon='keyboard_hide']):before { content: '\\e31a'; } :host([icon='keyboard_return']):before { content: '\\e31b'; } :host([icon='keyboard_tab']):before { content: '\\e31c'; } :host([icon='keyboard_voice']):before { content: '\\e31d'; } :host([icon='kitchen']):before { content: '\\eb47'; } :host([icon='label']):before { content: '\\e892'; } :host([icon='label_outline']):before { content: '\\e893'; } :host([icon='landscape']):before { content: '\\e3f7'; } :host([icon='language']):before { content: '\\e894'; } :host([icon='laptop']):before { content: '\\e31e'; } :host([icon='laptop_chromebook']):before { content: '\\e31f'; } :host([icon='laptop_mac']):before { content: '\\e320'; } :host([icon='laptop_windows']):before { content: '\\e321'; } :host([icon='last_page']):before { content: '\\e5dd'; } :host([icon='launch']):before { content: '\\e895'; } :host([icon='layers']):before { content: '\\e53b'; } :host([icon='layers_clear']):before { content: '\\e53c'; } :host([icon='leak_add']):before { content: '\\e3f8'; } :host([icon='leak_remove']):before { content: '\\e3f9'; } :host([icon='lens']):before { content: '\\e3fa'; } :host([icon='library_add']):before { content: '\\e02e'; } :host([icon='library_books']):before { content: '\\e02f'; } :host([icon='library_music']):before { content: '\\e030'; } :host([icon='lightbulb_outline']):before { content: '\\e90f'; } :host([icon='line_style']):before { content: '\\e919'; } :host([icon='line_weight']):before { content: '\\e91a'; } :host([icon='linear_scale']):before { content: '\\e260'; } :host([icon='link']):before { content: '\\e157'; } :host([icon='linked_camera']):before { content: '\\e438'; } :host([icon='list']):before { content: '\\e896'; } :host([icon='live_help']):before { content: '\\e0c6'; } :host([icon='live_tv']):before { content: '\\e639'; } :host([icon='local_activity']):before { content: '\\e53f'; } :host([icon='local_airport']):before { content: '\\e53d'; } :host([icon='local_atm']):before { content: '\\e53e'; } :host([icon='local_bar']):before { content: '\\e540'; } :host([icon='local_cafe']):before { content: '\\e541'; } :host([icon='local_car_wash']):before { content: '\\e542'; } :host([icon='local_convenience_store']):before { content: '\\e543'; } :host([icon='local_dining']):before { content: '\\e556'; } :host([icon='local_drink']):before { content: '\\e544'; } :host([icon='local_florist']):before { content: '\\e545'; } :host([icon='local_gas_station']):before { content: '\\e546'; } :host([icon='local_grocery_store']):before { content: '\\e547'; } :host([icon='local_hospital']):before { content: '\\e548'; } :host([icon='local_hotel']):before { content: '\\e549'; } :host([icon='local_laundry_service']):before { content: '\\e54a'; } :host([icon='local_library']):before { content: '\\e54b'; } :host([icon='local_mall']):before { content: '\\e54c'; } :host([icon='local_movies']):before { content: '\\e54d'; } :host([icon='local_offer']):before { content: '\\e54e'; } :host([icon='local_parking']):before { content: '\\e54f'; } :host([icon='local_pharmacy']):before { content: '\\e550'; } :host([icon='local_phone']):before { content: '\\e551'; } :host([icon='local_pizza']):before { content: '\\e552'; } :host([icon='local_play']):before { content: '\\e553'; } :host([icon='local_post_office']):before { content: '\\e554'; } :host([icon='local_printshop']):before { content: '\\e555'; } :host([icon='local_see']):before { content: '\\e557'; } :host([icon='local_shipping']):before { content: '\\e558'; } :host([icon='local_taxi']):before { content: '\\e559'; } :host([icon='location_city']):before { content: '\\e7f1'; } :host([icon='location_disabled']):before { content: '\\e1b6'; } :host([icon='location_off']):before { content: '\\e0c7'; } :host([icon='location_on']):before { content: '\\e0c8'; } :host([icon='location_searching']):before { content: '\\e1b7'; } :host([icon='lock']):before { content: '\\e897'; } :host([icon='lock_open']):before { content: '\\e898'; } :host([icon='lock_outline']):before { content: '\\e899'; } :host([icon='looks']):before { content: '\\e3fc'; } :host([icon='looks_3']):before { content: '\\e3fb'; } :host([icon='looks_4']):before { content: '\\e3fd'; } :host([icon='looks_5']):before { content: '\\e3fe'; } :host([icon='looks_6']):before { content: '\\e3ff'; } :host([icon='looks_one']):before { content: '\\e400'; } :host([icon='looks_two']):before { content: '\\e401'; } :host([icon='loop']):before { content: '\\e028'; } :host([icon='loupe']):before { content: '\\e402'; } :host([icon='low_priority']):before { content: '\\e16d'; } :host([icon='loyalty']):before { content: '\\e89a'; } :host([icon='mail']):before { content: '\\e158'; } :host([icon='mail_outline']):before { content: '\\e0e1'; } :host([icon='map']):before { content: '\\e55b'; } :host([icon='markunread']):before { content: '\\e159'; } :host([icon='markunread_mailbox']):before { content: '\\e89b'; } :host([icon='memory']):before { content: '\\e322'; } :host([icon='menu']):before { content: '\\e5d2'; } :host([icon='merge_type']):before { content: '\\e252'; } :host([icon='message']):before { content: '\\e0c9'; } :host([icon='mic']):before { content: '\\e029'; } :host([icon='mic_none']):before { content: '\\e02a'; } :host([icon='mic_off']):before { content: '\\e02b'; } :host([icon='mms']):before { content: '\\e618'; } :host([icon='mode_comment']):before { content: '\\e253'; } :host([icon='mode_edit']):before { content: '\\e254'; } :host([icon='monetization_on']):before { content: '\\e263'; } :host([icon='money_off']):before { content: '\\e25c'; } :host([icon='monochrome_photos']):before { content: '\\e403'; } :host([icon='mood']):before { content: '\\e7f2'; } :host([icon='mood_bad']):before { content: '\\e7f3'; } :host([icon='more']):before { content: '\\e619'; } :host([icon='more_horiz']):before { content: '\\e5d3'; } :host([icon='more_vert']):before { content: '\\e5d4'; } :host([icon='motorcycle']):before { content: '\\e91b'; } :host([icon='mouse']):before { content: '\\e323'; } :host([icon='move_to_inbox']):before { content: '\\e168'; } :host([icon='movie']):before { content: '\\e02c'; } :host([icon='movie_creation']):before { content: '\\e404'; } :host([icon='movie_filter']):before { content: '\\e43a'; } :host([icon='multiline_chart']):before { content: '\\e6df'; } :host([icon='music_note']):before { content: '\\e405'; } :host([icon='music_video']):before { content: '\\e063'; } :host([icon='my_location']):before { content: '\\e55c'; } :host([icon='nature']):before { content: '\\e406'; } :host([icon='nature_people']):before { content: '\\e407'; } :host([icon='navigate_before']):before { content: '\\e408'; } :host([icon='navigate_next']):before { content: '\\e409'; } :host([icon='navigation']):before { content: '\\e55d'; } :host([icon='near_me']):before { content: '\\e569'; } :host([icon='network_cell']):before { content: '\\e1b9'; } :host([icon='network_check']):before { content: '\\e640'; } :host([icon='network_locked']):before { content: '\\e61a'; } :host([icon='network_wifi']):before { content: '\\e1ba'; } :host([icon='new_releases']):before { content: '\\e031'; } :host([icon='next_week']):before { content: '\\e16a'; } :host([icon='nfc']):before { content: '\\e1bb'; } :host([icon='no_encryption']):before { content: '\\e641'; } :host([icon='no_sim']):before { content: '\\e0cc'; } :host([icon='not_interested']):before { content: '\\e033'; } :host([icon='note']):before { content: '\\e06f'; } :host([icon='note_add']):before { content: '\\e89c'; } :host([icon='notifications']):before { content: '\\e7f4'; } :host([icon='notifications_active']):before { content: '\\e7f7'; } :host([icon='notifications_none']):before { content: '\\e7f5'; } :host([icon='notifications_off']):before { content: '\\e7f6'; } :host([icon='notifications_paused']):before { content: '\\e7f8'; } :host([icon='offline_pin']):before { content: '\\e90a'; } :host([icon='ondemand_video']):before { content: '\\e63a'; } :host([icon='opacity']):before { content: '\\e91c'; } :host([icon='open_in_browser']):before { content: '\\e89d'; } :host([icon='open_in_new']):before { content: '\\e89e'; } :host([icon='open_with']):before { content: '\\e89f'; } :host([icon='pages']):before { content: '\\e7f9'; } :host([icon='pageview']):before { content: '\\e8a0'; } :host([icon='palette']):before { content: '\\e40a'; } :host([icon='pan_tool']):before { content: '\\e925'; } :host([icon='panorama']):before { content: '\\e40b'; } :host([icon='panorama_fish_eye']):before { content: '\\e40c'; } :host([icon='panorama_horizontal']):before { content: '\\e40d'; } :host([icon='panorama_vertical']):before { content: '\\e40e'; } :host([icon='panorama_wide_angle']):before { content: '\\e40f'; } :host([icon='party_mode']):before { content: '\\e7fa'; } :host([icon='pause']):before { content: '\\e034'; } :host([icon='pause_circle_filled']):before { content: '\\e035'; } :host([icon='pause_circle_outline']):before { content: '\\e036'; } :host([icon='payment']):before { content: '\\e8a1'; } :host([icon='people']):before { content: '\\e7fb'; } :host([icon='people_outline']):before { content: '\\e7fc'; } :host([icon='perm_camera_mic']):before { content: '\\e8a2'; } :host([icon='perm_contact_calendar']):before { content: '\\e8a3'; } :host([icon='perm_data_setting']):before { content: '\\e8a4'; } :host([icon='perm_device_information']):before { content: '\\e8a5'; } :host([icon='perm_identity']):before { content: '\\e8a6'; } :host([icon='perm_media']):before { content: '\\e8a7'; } :host([icon='perm_phone_msg']):before { content: '\\e8a8'; } :host([icon='perm_scan_wifi']):before { content: '\\e8a9'; } :host([icon='person']):before { content: '\\e7fd'; } :host([icon='person_add']):before { content: '\\e7fe'; } :host([icon='person_outline']):before { content: '\\e7ff'; } :host([icon='person_pin']):before { content: '\\e55a'; } :host([icon='person_pin_circle']):before { content: '\\e56a'; } :host([icon='personal_video']):before { content: '\\e63b'; } :host([icon='pets']):before { content: '\\e91d'; } :host([icon='phone']):before { content: '\\e0cd'; } :host([icon='phone_android']):before { content: '\\e324'; } :host([icon='phone_bluetooth_speaker']):before { content: '\\e61b'; } :host([icon='phone_forwarded']):before { content: '\\e61c'; } :host([icon='phone_in_talk']):before { content: '\\e61d'; } :host([icon='phone_iphone']):before { content: '\\e325'; } :host([icon='phone_locked']):before { content: '\\e61e'; } :host([icon='phone_missed']):before { content: '\\e61f'; } :host([icon='phone_paused']):before { content: '\\e620'; } :host([icon='phonelink']):before { content: '\\e326'; } :host([icon='phonelink_erase']):before { content: '\\e0db'; } :host([icon='phonelink_lock']):before { content: '\\e0dc'; } :host([icon='phonelink_off']):before { content: '\\e327'; } :host([icon='phonelink_ring']):before { content: '\\e0dd'; } :host([icon='phonelink_setup']):before { content: '\\e0de'; } :host([icon='photo']):before { content: '\\e410'; } :host([icon='photo_album']):before { content: '\\e411'; } :host([icon='photo_camera']):before { content: '\\e412'; } :host([icon='photo_filter']):before { content: '\\e43b'; } :host([icon='photo_library']):before { content: '\\e413'; } :host([icon='photo_size_select_actual']):before { content: '\\e432'; } :host([icon='photo_size_select_large']):before { content: '\\e433'; } :host([icon='photo_size_select_small']):before { content: '\\e434'; } :host([icon='picture_as_pdf']):before { content: '\\e415'; } :host([icon='picture_in_picture']):before { content: '\\e8aa'; } :host([icon='picture_in_picture_alt']):before { content: '\\e911'; } :host([icon='pie_chart']):before { content: '\\e6c4'; } :host([icon='pie_chart_outlined']):before { content: '\\e6c5'; } :host([icon='pin_drop']):before { content: '\\e55e'; } :host([icon='place']):before { content: '\\e55f'; } :host([icon='play_arrow']):before { content: '\\e037'; } :host([icon='play_circle_filled']):before { content: '\\e038'; } :host([icon='play_circle_outline']):before { content: '\\e039'; } :host([icon='play_for_work']):before { content: '\\e906'; } :host([icon='playlist_add']):before { content: '\\e03b'; } :host([icon='playlist_add_check']):before { content: '\\e065'; } :host([icon='playlist_play']):before { content: '\\e05f'; } :host([icon='plus_one']):before { content: '\\e800'; } :host([icon='poll']):before { content: '\\e801'; } :host([icon='polymer']):before { content: '\\e8ab'; } :host([icon='pool']):before { content: '\\eb48'; } :host([icon='portable_wifi_off']):before { content: '\\e0ce'; } :host([icon='portrait']):before { content: '\\e416'; } :host([icon='power']):before { content: '\\e63c'; } :host([icon='power_input']):before { content: '\\e336'; } :host([icon='power_settings_new']):before { content: '\\e8ac'; } :host([icon='pregnant_woman']):before { content: '\\e91e'; } :host([icon='present_to_all']):before { content: '\\e0df'; } :host([icon='print']):before { content: '\\e8ad'; } :host([icon='priority_high']):before { content: '\\e645'; } :host([icon='public']):before { content: '\\e80b'; } :host([icon='publish']):before { content: '\\e255'; } :host([icon='query_builder']):before { content: '\\e8ae'; } :host([icon='question_answer']):before { content: '\\e8af'; } :host([icon='queue']):before { content: '\\e03c'; } :host([icon='queue_music']):before { content: '\\e03d'; } :host([icon='queue_play_next']):before { content: '\\e066'; } :host([icon='radio']):before { content: '\\e03e'; } :host([icon='radio_button_checked']):before { content: '\\e837'; } :host([icon='radio_button_unchecked']):before { content: '\\e836'; } :host([icon='rate_review']):before { content: '\\e560'; } :host([icon='receipt']):before { content: '\\e8b0'; } :host([icon='recent_actors']):before { content: '\\e03f'; } :host([icon='record_voice_over']):before { content: '\\e91f'; } :host([icon='redeem']):before { content: '\\e8b1'; } :host([icon='redo']):before { content: '\\e15a'; } :host([icon='refresh']):before { content: '\\e5d5'; } :host([icon='remove']):before { content: '\\e15b'; } :host([icon='remove_circle']):before { content: '\\e15c'; } :host([icon='remove_circle_outline']):before { content: '\\e15d'; } :host([icon='remove_from_queue']):before { content: '\\e067'; } :host([icon='remove_red_eye']):before { content: '\\e417'; } :host([icon='remove_shopping_cart']):before { content: '\\e928'; } :host([icon='reorder']):before { content: '\\e8fe'; } :host([icon='repeat']):before { content: '\\e040'; } :host([icon='repeat_one']):before { content: '\\e041'; } :host([icon='replay']):before { content: '\\e042'; } :host([icon='replay_10']):before { content: '\\e059'; } :host([icon='replay_30']):before { content: '\\e05a'; } :host([icon='replay_5']):before { content: '\\e05b'; } :host([icon='reply']):before { content: '\\e15e'; } :host([icon='reply_all']):before { content: '\\e15f'; } :host([icon='report']):before { content: '\\e160'; } :host([icon='report_problem']):before { content: '\\e8b2'; } :host([icon='restaurant']):before { content: '\\e56c'; } :host([icon='restaurant_menu']):before { content: '\\e561'; } :host([icon='restore']):before { content: '\\e8b3'; } :host([icon='restore_page']):before { content: '\\e929'; } :host([icon='ring_volume']):before { content: '\\e0d1'; } :host([icon='room']):before { content: '\\e8b4'; } :host([icon='room_service']):before { content: '\\eb49'; } :host([icon='rotate_90_degrees_ccw']):before { content: '\\e418'; } :host([icon='rotate_left']):before { content: '\\e419'; } :host([icon='rotate_right']):before { content: '\\e41a'; } :host([icon='rounded_corner']):before { content: '\\e920'; } :host([icon='router']):before { content: '\\e328'; } :host([icon='rowing']):before { content: '\\e921'; } :host([icon='rss_feed']):before { content: '\\e0e5'; } :host([icon='rv_hookup']):before { content: '\\e642'; } :host([icon='satellite']):before { content: '\\e562'; } :host([icon='save']):before { content: '\\e161'; } :host([icon='scanner']):before { content: '\\e329'; } :host([icon='schedule']):before { content: '\\e8b5'; } :host([icon='school']):before { content: '\\e80c'; } :host([icon='screen_lock_landscape']):before { content: '\\e1be'; } :host([icon='screen_lock_portrait']):before { content: '\\e1bf'; } :host([icon='screen_lock_rotation']):before { content: '\\e1c0'; } :host([icon='screen_rotation']):before { content: '\\e1c1'; } :host([icon='screen_share']):before { content: '\\e0e2'; } :host([icon='sd_card']):before { content: '\\e623'; } :host([icon='sd_storage']):before { content: '\\e1c2'; } :host([icon='search']):before { content: '\\e8b6'; } :host([icon='security']):before { content: '\\e32a'; } :host([icon='select_all']):before { content: '\\e162'; } :host([icon='send']):before { content: '\\e163'; } :host([icon='sentiment_dissatisfied']):before { content: '\\e811'; } :host([icon='sentiment_neutral']):before { content: '\\e812'; } :host([icon='sentiment_satisfied']):before { content: '\\e813'; } :host([icon='sentiment_very_dissatisfied']):before { content: '\\e814'; } :host([icon='sentiment_very_satisfied']):before { content: '\\e815'; } :host([icon='settings']):before { content: '\\e8b8'; } :host([icon='settings_applications']):before { content: '\\e8b9'; } :host([icon='settings_backup_restore']):before { content: '\\e8ba'; } :host([icon='settings_bluetooth']):before { content: '\\e8bb'; } :host([icon='settings_brightness']):before { content: '\\e8bd'; } :host([icon='settings_cell']):before { content: '\\e8bc'; } :host([icon='settings_ethernet']):before { content: '\\e8be'; } :host([icon='settings_input_antenna']):before { content: '\\e8bf'; } :host([icon='settings_input_component']):before { content: '\\e8c0'; } :host([icon='settings_input_composite']):before { content: '\\e8c1'; } :host([icon='settings_input_hdmi']):before { content: '\\e8c2'; } :host([icon='settings_input_svideo']):before { content: '\\e8c3'; } :host([icon='settings_overscan']):before { content: '\\e8c4'; } :host([icon='settings_phone']):before { content: '\\e8c5'; } :host([icon='settings_power']):before { content: '\\e8c6'; } :host([icon='settings_remote']):before { content: '\\e8c7'; } :host([icon='settings_system_daydream']):before { content: '\\e1c3'; } :host([icon='settings_voice']):before { content: '\\e8c8'; } :host([icon='share']):before { content: '\\e80d'; } :host([icon='shop']):before { content: '\\e8c9'; } :host([icon='shop_two']):before { content: '\\e8ca'; } :host([icon='shopping_basket']):before { content: '\\e8cb'; } :host([icon='shopping_cart']):before { content: '\\e8cc'; } :host([icon='short_text']):before { content: '\\e261'; } :host([icon='show_chart']):before { content: '\\e6e1'; } :host([icon='shuffle']):before { content: '\\e043'; } :host([icon='signal_cellular_4_bar']):before { content: '\\e1c8'; } :host([icon='signal_cellular_connected_no_internet_4_bar']):before { content: '\\e1cd'; } :host([icon='signal_cellular_no_sim']):before { content: '\\e1ce'; } :host([icon='signal_cellular_null']):before { content: '\\e1cf'; } :host([icon='signal_cellular_off']):before { content: '\\e1d0'; } :host([icon='signal_wifi_4_bar']):before { content: '\\e1d8'; } :host([icon='signal_wifi_4_bar_lock']):before { content: '\\e1d9'; } :host([icon='signal_wifi_off']):before { content: '\\e1da'; } :host([icon='sim_card']):before { content: '\\e32b'; } :host([icon='sim_card_alert']):before { content: '\\e624'; } :host([icon='skip_next']):before { content: '\\e044'; } :host([icon='skip_previous']):before { content: '\\e045'; } :host([icon='slideshow']):before { content: '\\e41b'; } :host([icon='slow_motion_video']):before { content: '\\e068'; } :host([icon='smartphone']):before { content: '\\e32c'; } :host([icon='smoke_free']):before { content: '\\eb4a'; } :host([icon='smoking_rooms']):before { content: '\\eb4b'; } :host([icon='sms']):before { content: '\\e625'; } :host([icon='sms_failed']):before { content: '\\e626'; } :host([icon='snooze']):before { content: '\\e046'; } :host([icon='sort']):before { content: '\\e164'; } :host([icon='sort_by_alpha']):before { content: '\\e053'; } :host([icon='spa']):before { content: '\\eb4c'; } :host([icon='space_bar']):before { content: '\\e256'; } :host([icon='speaker']):before { content: '\\e32d'; } :host([icon='speaker_group']):before { content: '\\e32e'; } :host([icon='speaker_notes']):before { content: '\\e8cd'; } :host([icon='speaker_notes_off']):before { content: '\\e92a'; } :host([icon='speaker_phone']):before { content: '\\e0d2'; } :host([icon='spellcheck']):before { content: '\\e8ce'; } :host([icon='star']):before { content: '\\e838'; } :host([icon='star_border']):before { content: '\\e83a'; } :host([icon='star_half']):before { content: '\\e839'; } :host([icon='stars']):before { content: '\\e8d0'; } :host([icon='stay_current_landscape']):before { content: '\\e0d3'; } :host([icon='stay_current_portrait']):before { content: '\\e0d4'; } :host([icon='stay_primary_landscape']):before { content: '\\e0d5'; } :host([icon='stay_primary_portrait']):before { content: '\\e0d6'; } :host([icon='stop']):before { content: '\\e047'; } :host([icon='stop_screen_share']):before { content: '\\e0e3'; } :host([icon='storage']):before { content: '\\e1db'; } :host([icon='store']):before { content: '\\e8d1'; } :host([icon='store_mall_directory']):before { content: '\\e563'; } :host([icon='straighten']):before { content: '\\e41c'; } :host([icon='streetview']):before { content: '\\e56e'; } :host([icon='strikethrough_s']):before { content: '\\e257'; } :host([icon='style']):before { content: '\\e41d'; } :host([icon='subdirectory_arrow_left']):before { content: '\\e5d9'; } :host([icon='subdirectory_arrow_right']):before { content: '\\e5da'; } :host([icon='subject']):before { content: '\\e8d2'; } :host([icon='subscriptions']):before { content: '\\e064'; } :host([icon='subtitles']):before { content: '\\e048'; } :host([icon='subway']):before { content: '\\e56f'; } :host([icon='supervisor_account']):before { content: '\\e8d3'; } :host([icon='surround_sound']):before { content: '\\e049'; } :host([icon='swap_calls']):before { content: '\\e0d7'; } :host([icon='swap_horiz']):before { content: '\\e8d4'; } :host([icon='swap_vert']):before { content: '\\e8d5'; } :host([icon='swap_vertical_circle']):before { content: '\\e8d6'; } :host([icon='switch_camera']):before { content: '\\e41e'; } :host([icon='switch_video']):before { content: '\\e41f'; } :host([icon='sync']):before { content: '\\e627'; } :host([icon='sync_disabled']):before { content: '\\e628'; } :host([icon='sync_problem']):before { content: '\\e629'; } :host([icon='system_update']):before { content: '\\e62a'; } :host([icon='system_update_alt']):before { content: '\\e8d7'; } :host([icon='tab']):before { content: '\\e8d8'; } :host([icon='tab_unselected']):before { content: '\\e8d9'; } :host([icon='tablet']):before { content: '\\e32f'; } :host([icon='tablet_android']):before { content: '\\e330'; } :host([icon='tablet_mac']):before { content: '\\e331'; } :host([icon='tag_faces']):before { content: '\\e420'; } :host([icon='tap_and_play']):before { content: '\\e62b'; } :host([icon='terrain']):before { content: '\\e564'; } :host([icon='text_fields']):before { content: '\\e262'; } :host([icon='text_format']):before { content: '\\e165'; } :host([icon='textsms']):before { content: '\\e0d8'; } :host([icon='texture']):before { content: '\\e421'; } :host([icon='theaters']):before { content: '\\e8da'; } :host([icon='thumb_down']):before { content: '\\e8db'; } :host([icon='thumb_up']):before { content: '\\e8dc'; } :host([icon='thumbs_up_down']):before { content: '\\e8dd'; } :host([icon='time_to_leave']):before { content: '\\e62c'; } :host([icon='timelapse']):before { content: '\\e422'; } :host([icon='timeline']):before { content: '\\e922'; } :host([icon='timer']):before { content: '\\e425'; } :host([icon='timer_10']):before { content: '\\e423'; } :host([icon='timer_3']):before { content: '\\e424'; } :host([icon='timer_off']):before { content: '\\e426'; } :host([icon='title']):before { content: '\\e264'; } :host([icon='toc']):before { content: '\\e8de'; } :host([icon='today']):before { content: '\\e8df'; } :host([icon='toll']):before { content: '\\e8e0'; } :host([icon='tonality']):before { content: '\\e427'; } :host([icon='touch_app']):before { content: '\\e913'; } :host([icon='toys']):before { content: '\\e332'; } :host([icon='track_changes']):before { content: '\\e8e1'; } :host([icon='traffic']):before { content: '\\e565'; } :host([icon='train']):before { content: '\\e570'; } :host([icon='tram']):before { content: '\\e571'; } :host([icon='transfer_within_a_station']):before { content: '\\e572'; } :host([icon='transform']):before { content: '\\e428'; } :host([icon='translate']):before { content: '\\e8e2'; } :host([icon='trending_down']):before { content: '\\e8e3'; } :host([icon='trending_flat']):before { content: '\\e8e4'; } :host([icon='trending_up']):before { content: '\\e8e5'; } :host([icon='tune']):before { content: '\\e429'; } :host([icon='turned_in']):before { content: '\\e8e6'; } :host([icon='turned_in_not']):before { content: '\\e8e7'; } :host([icon='tv']):before { content: '\\e333'; } :host([icon='unarchive']):before { content: '\\e169'; } :host([icon='undo']):before { content: '\\e166'; } :host([icon='unfold_less']):before { content: '\\e5d6'; } :host([icon='unfold_more']):before { content: '\\e5d7'; } :host([icon='update']):before { content: '\\e923'; } :host([icon='usb']):before { content: '\\e1e0'; } :host([icon='verified_user']):before { content: '\\e8e8'; } :host([icon='vertical_align_bottom']):before { content: '\\e258'; } :host([icon='vertical_align_center']):before { content: '\\e259'; } :host([icon='vertical_align_top']):before { content: '\\e25a'; } :host([icon='vibration']):before { content: '\\e62d'; } :host([icon='video_call']):before { content: '\\e070'; } :host([icon='video_label']):before { content: '\\e071'; } :host([icon='video_library']):before { content: '\\e04a'; } :host([icon='videocam']):before { content: '\\e04b'; } :host([icon='videocam_off']):before { content: '\\e04c'; } :host([icon='videogame_asset']):before { content: '\\e338'; } :host([icon='view_agenda']):before { content: '\\e8e9'; } :host([icon='view_array']):before { content: '\\e8ea'; } :host([icon='view_carousel']):before { content: '\\e8eb'; } :host([icon='view_column']):before { content: '\\e8ec'; } :host([icon='view_comfy']):before { content: '\\e42a'; } :host([icon='view_compact']):before { content: '\\e42b'; } :host([icon='view_day']):before { content: '\\e8ed'; } :host([icon='view_headline']):before { content: '\\e8ee'; } :host([icon='view_list']):before { content: '\\e8ef'; } :host([icon='view_module']):before { content: '\\e8f0'; } :host([icon='view_quilt']):before { content: '\\e8f1'; } :host([icon='view_stream']):before { content: '\\e8f2'; } :host([icon='view_week']):before { content: '\\e8f3'; } :host([icon='vignette']):before { content: '\\e435'; } :host([icon='visibility']):before { content: '\\e8f4'; } :host([icon='visibility_off']):before { content: '\\e8f5'; } :host([icon='voice_chat']):before { content: '\\e62e'; } :host([icon='voicemail']):before { content: '\\e0d9'; } :host([icon='volume_down']):before { content: '\\e04d'; } :host([icon='volume_mute']):before { content: '\\e04e'; } :host([icon='volume_off']):before { content: '\\e04f'; } :host([icon='volume_up']):before { content: '\\e050'; } :host([icon='vpn_key']):before { content: '\\e0da'; } :host([icon='vpn_lock']):before { content: '\\e62f'; } :host([icon='wallpaper']):before { content: '\\e1bc'; } :host([icon='warning']):before { content: '\\e002'; } :host([icon='watch']):before { content: '\\e334'; } :host([icon='watch_later']):before { content: '\\e924'; } :host([icon='wb_auto']):before { content: '\\e42c'; } :host([icon='wb_cloudy']):before { content: '\\e42d'; } :host([icon='wb_incandescent']):before { content: '\\e42e'; } :host([icon='wb_iridescent']):before { content: '\\e436'; } :host([icon='wb_sunny']):before { content: '\\e430'; } :host([icon='wc']):before { content: '\\e63d'; } :host([icon='web']):before { content: '\\e051'; } :host([icon='web_asset']):before { content: '\\e069'; } :host([icon='weekend']):before { content: '\\e16b'; } :host([icon='whatshot']):before { content: '\\e80e'; } :host([icon='widgets']):before { content: '\\e1bd'; } :host([icon='wifi']):before { content: '\\e63e'; } :host([icon='wifi_lock']):before { content: '\\e1e1'; } :host([icon='wifi_tethering']):before { content: '\\e1e2'; } :host([icon='work']):before { content: '\\e8f9'; } :host([icon='wrap_text']):before { content: '\\e25b'; } :host([icon='youtube_searched_for']):before { content: '\\e8fa'; } :host([icon='zoom_in']):before { content: '\\e8ff'; } :host([icon='zoom_out']):before { content: '\\e900'; } :host([icon='zoom_out_map']):before { content: '\\e56b'; } `] } render() { return n.d`` } attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")), "color" == e ? this.style.color = this.color : "icon" == e && o.indexOf("url") > -1 && this.handleIcon(o) } handleIcon(e) { this.style.backgroundImage = e } }; __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "icon", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "size", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "color", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "button", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "disabled", void 0), i = __decorate([Object(n.c)("magicbooksio-icon")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioInput extends n.a { constructor() { super(), this.type = "text", this.step = 1, this.addEventListener("click", () => { this.active = !0, this.shadowRoot.querySelector("input").focus() }) } static get styles() { return [r.a, n.b` :host { display: flex; align-items: center; min-height: 40px; border-width: 0px 0px 1px 0px; border-style: solid; border-color: rgba(var(--neutral-1), 0.2); border-radius: 2px; box-sizing: border-box; padding: 0 8px; width: 100%; overflow: visible; background-color: rgba(var(--neutral-1), 0.03); position: relative; } :host, .label, input { transition: var(--transition-1); } .center { flex: 1; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } input { background: none; border: none; box-shadow: none; padding: 0px; outline: none; -webkit-appearance: none; font: var(--body-1); color: var(--text-1); max-height: 16px; } input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type='number'] { -moz-appearance: textfield; } /* active */ :host([active]) { border-color: rgba(var(--neutral-1), 0.6); } :host([active]) .label { color: rgb(var(--accent-1)); } /* disabled */ :host([disabled]) { opacity: 0.2; } :host([disabled]), :host([readonly]) { pointer-events: none; } /* readonly */ :host([readonly]) { background: transparent; } /* condensed */ :host([condensed]) { min-height: 32px; } :host([condensed][value]) .label, :host([condensed][active]) .label { display: none; } /* icon */ :host([icon]) .icon { margin-right: 8px; } /* label */ .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: var(--body-1); color: var(--text-2); pointer-events: none; } :host([value]) .label, :host([active]) .label { font: var(--body-2); } :host(:not([value]):not([active])) input { max-height: 0px; } input, .label { line-height: 16px; } /* clear */ .clear-icon { transition: var(--transition-1), 0.1s opacity ease-in-out 0.1s; } :host(:not(:hover):not([active])) .clear-icon { transition: var(--transition-1), 0.1s width ease-in-out 0.1s, 0.1s margin ease-in-out 0.1s; font-size: 0; max-width: 0px; max-height: 0px; opacity: 0; margin-left: 0; } /* status */ .clear-icon, .status-icon, .increment-icon, .select-icon, slot[name='functions']::slotted(*) { margin-left: 8px; } .status-icon[icon='cancel'] { color: rgb(var(--functional-red)); } .status-icon[icon='error'] { color: rgb(var(--functional-yellow)); } .status-icon[icon='check_circle'] { color: rgb(var(--functional-green)); } /* select */ :host([type='select']), :host([type='select']) * { cursor: pointer !important; } :host([type='text']) .center, :host([type='number']) .center { cursor: text; } :host([active]) .select-icon { transform: rotate(180deg); } .select-menu { position: fixed; max-height: 240px; z-index: 3; padding: 0px 16px; background-color: rgb(var(--base-4)); } slot:not([name]) { display: block; margin: 0 -8px; } slot:not([name])::slotted(*) { margin-bottom: 0; } /* hover inputs */ @media (hover: hover) { :host(:hover:not([active])) { border-color: rgba(var(--neutral-1), 0.3); } } `] } render() { return n.d` ${this.icon ? n.d` ` : ""} ${this.label ? n.d` ` : ""} e.target.value ? "number" !== this.type ? this.value = e.target.value : "" : this.removeAttribute("value")}" @focus="${() => this.active = !0}" @blur="${e => this.handleBlur(e)}" />
${this.disabled || this.readonly || !this.value || this.noClear || "select" === this.type ? "" : n.d` this.handleClear()}" > `} ${this.status ? n.d` `: ""} ${"number" !== this.type || this.readonly ? "" : n.d` this.handleIncrement("left")}" > this.handleIncrement("right")}" > `} ${"select" === this.type ? n.d` ${this.active ? n.d` e.stopPropagation()}" class="select-menu" .style="top: ${this.getMenuStyles().top}; left: ${this.getMenuStyles().left}; width: ${this.getMenuStyles().width};" > this.handleItems(e)}"> `: ""} `: ""} `} handleClear() { this.value = void 0, this.removeAttribute("value") } handleBlur(e) { "number" === this.type && this.validateMinMax(e.target.value), "select" !== this.type && (this.active = !1) } handleIncrement(e) { "left" === e ? this.validateMinMax(parseInt(this.value ? this.value : this.min ? this.min : 0) - this.step) : "right" === e && this.validateMinMax(parseInt(this.value ? this.value : this.min ? this.min : 0) + this.step) } handleItems(e) { const t = e.target.assignedNodes(); t.forEach(e => { "magicbooksio-MENU-ITEM" === e.tagName && e.addEventListener("active-changed", o => { o.target.active && (t.forEach(e => { e.active = !1 }), o.target.active = !0, this.value = e.label, this.active = !1) }) }) } attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")), "active" == e && this.active && "select" == this.type && this.handleMenu() } handleMenu() { const e = this, closePopover = function (t) { ("click" === t.type && t.target !== e || "wheel" === t.type) && (e.active = !1, document.removeEventListener("click", closePopover), document.removeEventListener("wheel", closePopover)) }; document.addEventListener("click", closePopover), document.addEventListener("wheel", closePopover) } validateMinMax(e) { e && (this.min && e < this.min ? this.value = this.min : e > this.max ? this.value = this.max : this.value = e) } getStatusIcon() { let e; switch (this.status) { case "error": e = "cancel"; break; case "warning": e = "error"; break; case "success": e = "check_circle" }return e } getMenuStyles() { return { top: this.getBoundingClientRect().top + this.clientHeight + 1 + "px", left: this.getBoundingClientRect().left + "px", width: this.clientWidth + "px" } } }; __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "label", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "icon", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "value", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "type", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "status", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "condensed", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "active", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "disabled", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "readonly", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0, attribute: "no-clear" })], i.prototype, "noClear", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "pattern", void 0), __decorate([Object(n.e)({ type: Number, reflect: !0 })], i.prototype, "min", void 0), __decorate([Object(n.e)({ type: Number, reflect: !0 })], i.prototype, "max", void 0), __decorate([Object(n.e)({ type: Number, reflect: !0 })], i.prototype, "step", void 0), i = __decorate([Object(n.c)("magicbooksio-input")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioMenuItem extends n.a { constructor() { super(...arguments), this.label = "Label", this.toggle = !0 } static get styles() { return [r.a, n.b` :host { padding: 8px 0; border-radius: 4px; display: flex; cursor: pointer; transition: var(--transition-1); overflow: visible; } magicbooksio-icon { margin-right: 8px; } .label { flex: 1; } /* label */ magicbooksio-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } slot[name='functions']::slotted(*) { margin-left: 8px; } :host([active]) { padding: 8px; margin-left: -8px; margin-right: -8px; background: rgba(var(--neutral-1), 0.03); } /* disabled */ :host([disabled]) { opacity: 0.2; pointer-events: none; } /* hover inputs */ @media (hover: hover) { :host(:not([active]):hover) { padding: 8px; margin-left: -8px; margin-right: -8px; background: rgba(var(--neutral-1), 0.03); } } `] } render() { return n.d` ${this.icon ? n.d` ` : ""} ${this.label ? n.d` ${this.label} ` : ""} `} attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")), "toggle" == e && this.toggle && this.addEventListener("click", () => { this.active = !this.active }) } }; __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "label", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "icon", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "active", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "toggle", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "disabled", void 0), i = __decorate([Object(n.c)("magicbooksio-menu-item")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioModal extends n.a { constructor() { super(...arguments), this.height = "400px", this.width = "600px", this.flexDirection = "column", this.visible = !1, this.emptyHeader = !0, this.emptyFunctions = !0, this.emptyFooter = !0 } static get styles() { return [r.a, n.b` :host { transition: var(--transition-1), 0s top, 0s left; position: fixed; opacity: 1; z-index: 5; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; } :host(:not([visible])) { opacity: 0; pointer-events: none; } :host(:not([visible])) magicbooksio-card { margin-bottom: -40px; } magicbooksio-card { background-color: rgb(var(--base-3)); box-shadow: var(--shadow-1); transition: 0.2s all ease-in-out, 0s top, 0s left; } `] } render() { return n.d` e.stopPropagation()}" style="height: ${this.height}; width: ${this.width}; max-height: ${this.height}; max-width: ${this.width}" .label="${this.label}" .icon="${this.icon}" flex-direction="${this.flexDirection}" > this.emptyHeader = 0 === e.target.assignedNodes().length}" > ${this.sticky ? "" : n.d` this.visible = !1}" > `} this.emptyFooter = 0 === e.target.assignedNodes().length}" > `} attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")), "visible" === e && this.visible && this.addEventListener("click", () => this.sticky ? "" : this.visible = !1) } }; __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "label", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "icon", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "height", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "width", void 0), __decorate([Object(n.e)({ type: String, reflect: !0, attribute: "flex-direction" })], i.prototype, "flexDirection", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "visible", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "sticky", void 0), __decorate([Object(n.e)({ type: Boolean })], i.prototype, "emptyHeader", void 0), __decorate([Object(n.e)({ type: Boolean })], i.prototype, "emptyFunctions", void 0), __decorate([Object(n.e)({ type: Boolean })], i.prototype, "emptyFooter", void 0), i = __decorate([Object(n.c)("magicbooksio-modal")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioNavbar extends n.a { static get styles() { return [r.a, n.b` :host { z-index: 2; } magicbooksio-app-bar { background-color: rgb(var(--base-full)); } `] } render() { return n.d` `} }; i = __decorate([Object(n.c)("magicbooksio-nav-bar")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioNotifications extends n.a { constructor() { super(...arguments), this.position = "top-right" } static get styles() { return [r.a, n.b` :host { position: fixed; display: flex; flex-direction: column; max-height: 100%; box-sizing: border-box; padding: 16px; margin: 0; width: 320px; z-index: 6; pointer-events: none; } ::slotted(*) { pointer-events: all; } :host([position^='top']) { top: 0px; } :host([position^='bottom']) { flex-flow: column-reverse; bottom: 0px; } :host([position$='left']) { left: 0px; } :host([position$='right']) { right: 0px; } :host([position^='top']) ::slotted(magicbooksio-notification-item[visible]) { margin-bottom: 12px; } :host([position^='bottom']) ::slotted(magicbooksio-notification-item[visible]) { margin-top: 12px; } `] } render() { return n.d` ` } attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")) } }; __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "position", void 0), i = __decorate([Object(n.c)("magicbooksio-notifications")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioNotificationItem extends n.a { constructor() { super(...arguments), this.flexDirection = "column", this.visible = !1, this.emptyHeader = !0, this.emptyFunctions = !0, this.emptyFooter = !0 } static get styles() { return [r.a, n.b` :host { transition: var(--transition-1); opacity: 1; } :host(:not([visible])) { opacity: 0; pointer-events: none; max-height: 0px; overflow: visible; margin-top: 0; margin-bottom: 0; } magicbooksio-card { background: rgb(var(--base-4)); } :host(:not([visible]):host-context([position$='right'])) { margin-left: 8px; margin-right: -8px; } :host(:not([visible]):host-context([position$='left'])) { margin-left: -8px; margin-right: 8px; } `] } render() { return n.d` e.stopPropagation()}" .label="${this.label}" .icon="${this.icon}" flex-direction="${this.flexDirection}" > this.emptyHeader = 0 === e.target.assignedNodes().length}" > ${this.sticky ? "" : n.d` this.visible = !1}" > `} this.emptyFooter = 0 === e.target.assignedNodes().length}" > `} attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")) } }; __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "label", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "icon", void 0), __decorate([Object(n.e)({ type: String, reflect: !0, attribute: "flex-direction" })], i.prototype, "flexDirection", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "visible", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "sticky", void 0), __decorate([Object(n.e)({ type: Boolean })], i.prototype, "emptyHeader", void 0), __decorate([Object(n.e)({ type: Boolean })], i.prototype, "emptyFunctions", void 0), __decorate([Object(n.e)({ type: Boolean })], i.prototype, "emptyFooter", void 0), i = __decorate([Object(n.c)("magicbooksio-notification-item")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioPage extends n.a { constructor() { super(...arguments), this.flexDirection = "row", this.flat = !1, this.scrollable = !1 } static get styles() { return [r.a, n.b` :host { height: 100%; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; background-color: rgb(var(--base-1)); } :host([flat]) { background-color: rgb(var(--base-3)); } .center-wrapper, slot { display: flex; } .center-wrapper, slot:not([name]) { flex: 1; overflow: hidden; } slot:not([name]) { padding: 0px; } :host([scrollable]) slot:not([name]) { overflow: auto; } slot[name='top'], slot[name='bottom'], :host([flex-direction='column']) slot:not([name]) { flex-direction: column; } `] } render() { return n.d`
`} attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")) } }; __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "theme", void 0), __decorate([Object(n.e)({ type: String, reflect: !0, attribute: "flex-direction" })], i.prototype, "flexDirection", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "flat", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "scrollable", void 0), i = __decorate([Object(n.c)("magicbooksio-page")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioPane extends n.a { constructor() { super(...arguments), this.flexDirection = "column", this.size = "l", this.emptyHeader = !0, this.emptyFunctions = !0, this.emptyFooter = !0 } static get styles() { return [r.a, n.b` :host { background-color: rgb(var(--base-2)); display: flex; box-shadow: var(--shadow-1); transition: 0.1s width ease-in-out; } :host([size='l']) { width: 320px; } :host([size='m']) { width: 120px; } :host([size='s']) { width: 80px; } magicbooksio-card { background-color: transparent; box-shadow: none; } `] } render() { return n.d` this.emptyHeader = 0 === e.target.assignedNodes().length}" > this.emptyFunctions = 0 === e.target.assignedNodes().length}" > this.emptyFooter = 0 === e.target.assignedNodes().length}" > `} attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")) } }; __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "label", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "icon", void 0), __decorate([Object(n.e)({ type: String, reflect: !0, attribute: "flex-direction" })], i.prototype, "flexDirection", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "size", void 0), __decorate([Object(n.e)({ type: Boolean })], i.prototype, "emptyHeader", void 0), __decorate([Object(n.e)({ type: Boolean })], i.prototype, "emptyFunctions", void 0), __decorate([Object(n.e)({ type: Boolean })], i.prototype, "emptyFooter", void 0), i = __decorate([Object(n.c)("magicbooksio-pane")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioPopover extends n.a { constructor() { super(...arguments), this.flexDirection = "column", this.position = "bottom", this.visible = !1, this.emptyHeader = !0, this.emptyFunctions = !0, this.emptyFooter = !0 } static get styles() { return [r.a, n.b` :host { background-color: rgb(var(--base-4)); border-radius: 4px; display: flex; box-shadow: var(--shadow-1); transition: var(--transition-1), 0s top, 0s left; position: fixed; opacity: 1; z-index: 4; width: 240px; } :host(:not([visible])) { opacity: 0; pointer-events: none; } :host([position^='bottom']:not([visible])) { margin-top: -8px; } :host([position^='top']:not([visible])) { margin-top: 8px; } :host([position^='right']:not([visible])) { margin-left: -8px; } :host([position^='left']:not([visible])) { margin-left: 8px; } magicbooksio-card { background-color: transparent; box-shadow: none; } `] } render() { return n.d` e.stopPropagation()}" @wheel="${e => e.stopPropagation()}" .label="${this.label}" .icon="${this.icon}" flex-direction="${this.flexDirection}" > this.emptyHeader = 0 === e.target.assignedNodes().length}" > this.emptyFunctions = 0 === e.target.assignedNodes().length}" > this.emptyFooter = 0 === e.target.assignedNodes().length}" > `} attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")), "target" === e && this.target ? this.targetObserver() : "visible" === e && this.visible && this.visibleObserver() } targetObserver() { const e = "string" == typeof this.target ? document.querySelector(this.target) : this.target; e && e.addEventListener("click", () => this.handlePosition(e)) } visibleObserver() { const e = "string" == typeof this.target ? document.querySelector(this.target) : this.target; e && this.handlePosition(e), !this.sticky && this.target && this.addDocListener(e) } handlePosition(e) { if (!e) return; let t = this, o = e.getBoundingClientRect(); t.visible = !0, t.position.startsWith("bottom") ? t.style.top = o.top + o.height + 8 + "px" : t.position.startsWith("top") ? t.style.top = o.top - t.clientHeight - 8 + "px" : t.style.top = o.top + o.height / 2 - t.clientHeight / 2 + "px", t.position.startsWith("right") ? t.style.left = o.left + o.width + 8 + "px" : t.position.startsWith("left") ? t.style.left = o.left - t.clientWidth - 8 + "px" : t.style.left = o.left + o.width / 2 - t.clientWidth / 2 + "px" } addDocListener(e) { let t = this, closePopover = function (o) { (o.target !== e && "click" === o.type || "wheel" === o.type) && (t.visible = !1, document.removeEventListener("click", closePopover), document.removeEventListener("wheel", closePopover)) }; document.addEventListener("click", closePopover), document.addEventListener("wheel", closePopover) } }; __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "label", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "icon", void 0), __decorate([Object(n.e)({ type: String, reflect: !0, attribute: "flex-direction" })], i.prototype, "flexDirection", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "position", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "target", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "visible", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "sticky", void 0), __decorate([Object(n.e)({ type: Boolean })], i.prototype, "emptyHeader", void 0), __decorate([Object(n.e)({ type: Boolean })], i.prototype, "emptyFunctions", void 0), __decorate([Object(n.e)({ type: Boolean })], i.prototype, "emptyFooter", void 0), i = __decorate([Object(n.c)("magicbooksio-popover")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioProgressBar extends n.a { constructor() { super(...arguments), this.size = "m", this.radial = !1, this.showProgress = !1 } static get styles() { return [r.a, n.b` :host { width: 100%; display: flex; flex-direction: column; } .header, .footer { display: flex; align-items: center; } .label, .info { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header { margin-bottom: 8px; } .footer { margin-top: 8px; } /* radial */ :host([radial]) { align-items: center; justify-content: center; } .radial-wrapper { display: flex; align-items: center; justify-content: center; position: relative; } .radial-wrapper magicbooksio-text { position: absolute; width: 100%; text-align: center; } .radial { transform: rotate(-90deg); } circle { fill: transparent; stroke-width: 8px; } /* status */ .status-icon { margin-right: 8px; } .status-icon[icon='cancel'] { color: rgb(var(--functional-red)); } .status-icon[icon='error'] { color: rgb(var(--functional-yellow)); } .status-icon[icon='check_circle'] { color: rgb(var(--functional-green)); } `] } render() { return n.d` ${this.label || this.showProgress ? n.d` `: ""} ${this.radial ? n.d` ${this.showProgress ? n.d` ${this.value}% ` : ""}
`: n.d` `} ${this.info || this.status ? n.d` `: ""} `} attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")) } getStatusIcon() { let e; switch (this.status) { case "error": e = "cancel"; break; case "warning": e = "error"; break; case "success": e = "check_circle" }return e } getSize() { let e; switch (this.size) { case "s": e = 48; break; case "m": e = 64; break; case "l": e = 80 }return e } }; __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "label", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "info", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "status", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "color", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "size", void 0), __decorate([Object(n.e)({ type: Number, reflect: !0 })], i.prototype, "value", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "radial", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0, attribute: "show-progress" })], i.prototype, "showProgress", void 0), i = __decorate([Object(n.c)("magicbooksio-progress-bar")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioRadioButton extends n.a { static get styles() { return [r.a, n.b` :host { display: flex; cursor: pointer; } input { display: none; } /* box */ .circle { transition: var(--transition-1); display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin: 4px; border-radius: 50%; box-sizing: border-box; border: 2px solid rgba(var(--neutral-1), 0.25); } :host([active]) .circle { border-color: transparent; border: 5px solid rgb(var(--accent-1)); } /* label */ magicbooksio-text { flex: 1; margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } /* disabled */ :host([disabled]) { pointer-events: none; opacity: 0.2; } /* hover inputs */ @media (hover: hover) { :host(:hover:not([active])) .circle { border-color: rgba(var(--neutral-1), 0.3); } } `] } render() { return n.d` ${this.label ? n.d` ${this.label} ` : ""} `} attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")) } connectedCallback() { super.connectedCallback(), this.addEventListener("click", () => this.handleActive()) } handleActive() { this.parentElement.childNodes.forEach(e => { e.active = !1 }), this.active = !0 } }; __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "label", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "active", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "disabled", void 0), i = __decorate([Object(n.c)("magicbooksio-radio-button")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioSlider extends n.a { constructor() { super(...arguments), this.value = 50, this.min = 0, this.max = 100, this.step = 1 } static get styles() { return [r.a, n.b` .track { width: 100%; height: 2px; margin: 16px 0; background-color: rgba(var(--neutral-1), 0.2); position: relative; } .thumb { padding: 10px; position: absolute; top: -15px; margin-left: -16px; cursor: pointer; } .thumb > div { height: 12px; width: 12px; border-radius: 50%; background-color: rgb(var(--accent-1)); transition: 0.1s all ease-in-out; } .thumb:hover > div { background-color: rgb(var(--accent-1b)); } /* input */ input { background: none; border: none; outline: none; -webkit-appearance: none; font: var(--body-1); color: var(--text-1); background-color: rgba(var(--neutral-1), 0.05); border-radius: 2px; box-sizing: border-box; padding: 0 4px; width: 40px; } input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type='number'] { -moz-appearance: textfield; } .label { display: flex; } .label magicbooksio-text { flex: 1; } .label > * + * { margin-left: 8px; } `] } render() { return n.d` ${this.label ? n.d` ${this.label} ${this.input ? n.d` this.handleInput(parseFloat(e.target.value))}" @keypress="${e => "Enter" === e.key ? this.handleInput(parseFloat(e.target.value)) : ""}" /> `: ""}
`: ""} this.handleThumbDrag(e)}" @touchstart="${e => this.handleThumbDrag(e)}" >
`} attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")), "value" !== e && "min" !== e && "max" !== e || this.handleThumbPosition() } firstUpdated() { this.handleThumbPosition() } handleInput(e) { e >= this.min && e <= this.max ? this.value = e : e < this.min ? this.value = this.min : e > this.max && (this.value = this.max) } handleThumbPosition() { const e = this.shadowRoot.querySelector(".thumb"), t = (this.value - this.min) / (this.max - this.min) * 100; e && t >= 0 && t <= 100 && (e.style.left = t + "%") } handleThumbDrag(e) { const t = this.shadowRoot.querySelector(".track").clientWidth / (this.max - this.min) * this.step; let o = "mousedown" === e.type ? e.clientX : e.touches[0].clientX; const getDeltaX = e => { e.preventDefault(); const n = "mousemove" === e.type ? e.clientX : e.touches[0].clientX, r = n - o; if (r > t || -1 * r > t) { const e = Math.floor(r < 0 ? -1 * r : r), i = Math.round(e / t), c = r > 0 ? this.value + this.step * i : this.value - this.step * i; c <= this.max && c >= this.min && (this.value = c, o = n) } }, removeListeners = () => { window.removeEventListener("mousemove", getDeltaX), window.removeEventListener("touchmove", getDeltaX), window.removeEventListener("mouseup", removeListeners), window.removeEventListener("touchend", removeListeners) }; window.addEventListener("mousemove", getDeltaX), window.addEventListener("touchmove", getDeltaX), window.addEventListener("mouseup", removeListeners), window.addEventListener("touchend", removeListeners) } }; __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "label", void 0), __decorate([Object(n.e)({ type: Number, reflect: !0 })], i.prototype, "value", void 0), __decorate([Object(n.e)({ type: Number, reflect: !0 })], i.prototype, "min", void 0), __decorate([Object(n.e)({ type: Number, reflect: !0 })], i.prototype, "max", void 0), __decorate([Object(n.e)({ type: Number, reflect: !0 })], i.prototype, "step", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "input", void 0), i = __decorate([Object(n.c)("magicbooksio-slider")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioSpinner extends n.a { constructor() { super(...arguments), this.size = "m" } static get styles() { return [r.a, n.b` :host { width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; } svg { animation: 1s linear infinite svg-animation; } @keyframes svg-animation { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg); } } circle { fill: transparent; stroke: rgb(var(--accent-1)); stroke-linecap: round; stroke-width: 4px; } /* label */ magicbooksio-text { margin-top: 8px; text-align: center; max-width: 240px; } `] } render() { return n.d` ${this.label ? n.d` ${this.label} ` : ""} `} attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")) } getSize() { let e; switch (this.size) { case "s": e = 24; break; case "m": e = 32; break; case "l": e = 40 }return e } }; __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "size", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "label", void 0), i = __decorate([Object(n.c)("magicbooksio-spinner")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioStepper extends n.a { constructor() { super(...arguments), this.orientation = "horizontal" } static get styles() { return [r.a, n.b` :host { display: flex; width: 100%; height: max-content; overflow: auto; } /* vertical */ :host([orientation='vertical']) { flex-direction: column; } `] } render() { return n.d` { this.handleOrientation(), this.handleItems() }}" > `} attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")) } handleOrientation() { this.childNodes.forEach(e => { e.orientation = this.orientation }) } handleItems() { let e, t; e = Array.prototype.slice.call(this.children), t = this.children.length, e.forEach(e => { e.first = 1 == e.index, e.last = e.index == t }) } }; __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "orientation", void 0), i = __decorate([Object(n.c)("magicbooksio-stepper")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioStepperItem extends n.a { constructor() { super(...arguments), this.orientation = "horizontal" } static get styles() { return [r.a, n.b` :host { position: relative; flex: 1; display: flex; align-items: center; box-sizing: border-box; transition: var(--transition-1); cursor: pointer; } .circle { height: 40px; width: 40px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 8px; border-radius: 50%; background-color: rgba(var(--neutral-1), 0.1); transition: var(--transition-1); } .text { display: flex; flex-direction: column; } .label { font-weight: bold; } .info { color: var(--text-2); } .label, .info { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .label, .number, magicbooksio-icon { color: var(--text-2); } /* line */ .line { background-color: rgba(var(--neutral-1), 0.1); position: absolute; } /* horizontal */ :host([orientation='horizontal']) { justify-content: center; flex-direction: column; padding: 0 16px; } :host([orientation='horizontal']) .label, :host([orientation='horizontal']) .info { text-align: center; } :host([orientation='horizontal']) .circle + .text { margin-top: 4px; } :host([orientation='horizontal']) .line { height: 2px; width: calc(50% - 28px); top: 19px; } :host([orientation='horizontal']) .line.before { left: 0px; } :host([orientation='horizontal']) .line.after { right: 0px; } /* vertical */ :host([orientation='vertical']) { justify-content: flex-start; flex-direction: row; width: 100%; height: max-content; padding: 16px 0; } :host([orientation='vertical']) .label, :host([orientation='vertical']) .info { text-align: left; } :host([orientation='vertical']) .circle + .text { margin-left: 8px; } :host([orientation='vertical']) .line { width: 2px; height: calc(50% - 28px); left: 19px; } :host([orientation='vertical']) .line.before { top: 0px; } :host([orientation='vertical']) .line.after { bottom: 0px; } /* active */ :host([active]) .circle { background-color: rgb(var(--accent-1)); } :host([active]) .label { color: var(--text-1); } :host([active]) .number, :host([active]) magicbooksio-icon { color: rgba(255, 255, 255, 0.9); } /* disabled */ :host([disabled]) { pointer-events: none; } :host([disabled]) .circle, :host([disabled]) .text { opacity: 0.2; } /* hover inputs */ @media (hover: hover) { :host(:hover:not([active])) .label, :host(:hover:not([active])) .number, :host(:hover:not([active])) magicbooksio-icon { color: var(--text-1); } :host(:not([active]):not(:active):hover) .circle { background-color: rgba(var(--neutral-1), 0.03); } :host([active]:not(:active):hover) .circle { background-color: rgb(var(--accent-1b)); } } `] } render() { return n.d` ${this.icon ? n.d` ` : n.d` ${this.index} `}
${this.label ? n.d` ${this.label} ` : ""} ${this.info ? n.d` ${this.info} ` : ""}
${this.first ? "" : n.d` `} ${this.last ? "" : n.d` `} `} attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")) } connectedCallback() { super.connectedCallback(), this.getIndex(), this.addEventListener("click", () => { this.parentElement.childNodes.forEach(e => { e.active = !1 }), this.active = !0 }) } getIndex() { let e; e = Array.prototype.slice.call(this.parentElement.children), this.index = e.indexOf(this) + 1 } }; __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "label", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "info", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "icon", void 0), __decorate([Object(n.e)({ type: Number, reflect: !0 })], i.prototype, "index", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "active", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "disabled", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "first", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "last", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "orientation", void 0), i = __decorate([Object(n.c)("magicbooksio-stepper-item")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioSwitch extends n.a { static get styles() { return [r.a, n.b` :host { background-color: rgba(var(--neutral-1), 0.1); display: flex; width: max-content; height: max-content; border-radius: 4px; } `] } render() { return n.d` ` } attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")) } }; i = __decorate([Object(n.c)("magicbooksio-switch")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioSwitchItem extends n.a { static get styles() { return [r.a, n.b` :host { display: flex; width: max-content; min-width: 40px; max-width: 120px; padding: 4px 12px; border-radius: 4px; cursor: pointer; align-items: center; justify-content: center; transition: var(--transition-1); } .label { user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .label, magicbooksio-icon { color: var(--text-2); } /* active */ :host([active]) .label, :host([active]) magicbooksio-icon { color: var(--text-1); } :host([active]) { background: rgba(var(--neutral-1), 0.1); } /* disabled */ :host([disabled]) { pointer-events: none; opacity: 0.2; } /* hover inputs */ @media (hover: hover) { :host(:not([active]):hover) { background: rgba(var(--neutral-1), 0.05); } :host([active]:hover) { background: rgba(var(--neutral-1), 0.03); } } `] } render() { return n.d` ${this.icon ? n.d` ` : ""} ${this.label && !this.icon ? n.d` ${this.label} ` : ""} `} attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")) } connectedCallback() { super.connectedCallback(), this.addEventListener("click", () => this.handleActive()) } handleActive() { this.parentElement.childNodes.forEach(e => { e.active = !1 }), this.active = !0 } }; __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "label", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "icon", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "active", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "disabled", void 0), i = __decorate([Object(n.c)("magicbooksio-switch-item")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioTabItem extends n.a { constructor() { super(...arguments), this.orientation = "horizontal" } static get styles() { return [r.a, n.b` :host { display: flex; align-items: center; box-sizing: border-box; transition: var(--transition-1); cursor: pointer; border-color: transparent; border-style: solid; color: var(--text-2); } .label { line-height: 24px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .label, magicbooksio-icon { color: unset; } /* horizontal */ :host([orientation='horizontal']) { flex-direction: column; justify-content: center; width: max-content; min-width: 72px; max-width: 240px; height: 56px; padding: 0px 16px; border-width: 0px 0px 2px 0px; } :host([orientation='horizontal']) .label { text-align: center; } /* vertical */ :host([orientation='vertical']) .label { text-align: left; } :host([orientation='vertical']) { justify-content: flex-start; flex-direction: row; width: 100%; min-width: unset; max-width: 100%; height: max-content; padding: 8px 8px 8px 14px; border-width: 0px 0px 0px 2px; } :host([orientation='vertical']) magicbooksio-icon + .label { margin-left: 8px; } /* active */ :host([active]) { border-color: rgb(var(--accent-1)); background-color: rgb(0 ,0, 0, .04); } :host([active]) { color: var(--text-1); } /* disabled */ :host([disabled]) { pointer-events: none; opacity: 0.2; } /* hover inputs */ @media (hover: hover) { :host(:hover) .label { color: var(--text-1); } } `] } render() { return n.d` ${this.icon ? n.d` ` : ""} ${this.label ? n.d` ${this.label} ` : ""} `} attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")) } connectedCallback() { super.connectedCallback(), this.addEventListener("click", () => this.handleActive()) } handleActive() { this.parentElement.childNodes.forEach(e => { e.active = !1 }), this.active = !0 } }; __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "label", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "icon", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "active", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "disabled", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "orientation", void 0), i = __decorate([Object(n.c)("magicbooksio-tab-item")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioTable extends n.a { constructor() { super(...arguments), this.columns = "repeat(24, 1fr)" } static get styles() { return [r.a, n.b` :host { display: flex; flex-direction: column; max-height: 100%; margin: 0 !important; } slot { display: block; } slot:not([name]) { flex: 1; overflow: auto; } `] } render() { return n.d` `} attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")) } }; __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "readonly", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "condensed", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "columns", void 0), i = __decorate([Object(n.c)("magicbooksio-table")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioTabs extends n.a { constructor() { super(...arguments), this.orientation = "horizontal" } static get styles() { return [r.a, n.b` :host { display: flex; width: 100%; height: max-content; } :host([slot='header']) { margin-top: -16px; } :host(:not([orientation='vertical'])) { border-bottom: 1px solid rgba(var(--neutral-1), 0.1); } /* vertical */ :host([orientation='vertical']) { flex-direction: column; } `] } render() { return n.d` this.handleOrientation()}"> `} handleOrientation() { this.childNodes.forEach(e => { e.orientation = this.orientation }) } attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")) } }; __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "orientation", void 0), i = __decorate([Object(n.c)("magicbooksio-tabs")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioTag extends n.a { constructor() { super(...arguments), this.label = "Label" } static get styles() { return [r.a, n.b` :host { padding: 4px; display: flex; height: max-content; width: max-content; max-width: 160px; border-radius: 20px; border: 1px solid rgba(var(--neutral-1), 0.25); transition: var(--transition-1); } .label { margin: 0 4px; } /* button */ :host([button]) { cursor: pointer; } /* hover inputs */ @media (hover: hover) { :host([button]:not(:active):hover) { border-color: rgba(var(--neutral-1), 0.3); background-color: rgba(var(--neutral-1), 0.05); } } `] } render() { return n.d` ${this.icon ? n.d` ` : ""} ${this.label ? n.d` ${this.label} ` : ""} ${this.removable ? n.d` this.handleRemove()}" > `: ""} `} attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")) } handleRemove() { this.dispatchEvent(new Event("remove")) } }; __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "label", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "icon", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "button", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "removable", void 0), i = __decorate([Object(n.c)("magicbooksio-tag")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioText extends n.a { constructor() { super(...arguments), this.size = "body-1" } static get styles() { return [r.a, n.b` :host { color: var(--text-1); transition: var(--transition-1); } :host([size='body-1']) { font: var(--body-1); } :host([size='body-2']) { font: var(--body-2); } :host([size='header-1']) { font: var(--header-1); } :host([size='header-2']) { font: var(--header-2); } `] } render() { return n.d` ` } attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")), "color" == e && (this.style.color = this.color) } }; __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "size", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "color", void 0), i = __decorate([Object(n.c)("magicbooksio-text")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioToggle extends n.a { static get styles() { return [r.a, n.b` :host { display: flex; cursor: pointer; } input { display: none; } /* toggle */ .bg { width: 32px; height: 20px; margin: 2px; padding: 2px; border-radius: 12px; box-sizing: border-box; border: 2px solid rgba(var(--neutral-1), 0.25); transition: var(--transition-1); } :host([active]) .bg { border-color: transparent; background: rgb(var(--accent-1)); } .dot { display: flex; transition: var(--transition-1); height: 12px; width: 12px; border-radius: 50%; background: rgba(var(--neutral-1), 0.6); } :host([active]) .dot { transform: translateX(12px); background: white; } /* label */ magicbooksio-text { flex: 1; margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } /* disabled */ :host([disabled]) { pointer-events: none; opacity: 0.2; } /* hover inputs */ @media (hover: hover) { :host(:hover:not(:active):not([active])) .bg { border-color: rgba(var(--neutral-1), 0.3); } :host(:hover:not(:active):not([active])) .dot { background: rgba(var(--neutral-1), 0.9); } } `] } render() { return n.d` ${this.label ? n.d` ${this.label} ` : ""} `} attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")) } connectedCallback() { super.connectedCallback(), this.addEventListener("click", () => { this.active = !this.active }) } }; __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "label", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "active", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "disabled", void 0), i = __decorate([Object(n.c)("magicbooksio-toggle")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioTool extends n.a { constructor() { super(...arguments), this.size = "m", this.disabled = !1 } static get styles() { return [r.a, n.b` :host { display: flex; flex-direction: column; align-items: center; justify-content: center; width: max-content; padding: 4px; box-sizing: border-box; transition: var(--transition-1); cursor: pointer; border-radius: 4px; } .label { display: -webkit-box; width: 100%; line-height: 12px; text-align: center; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* size */ :host([size='m']) { height: 56px; width: 56px; } :host([size='s']) { height: 32px; width: 32px; } /* active */ :host([active]) { background-color: rgba(var(--neutral-1), 0.1); } /* disabled */ :host([disabled]) { pointer-events: none; opacity: 0.2; } /* hover inputs */ @media (hover: hover) { :host(:not(:active):not([active]):hover) { background-color: rgba(var(--neutral-1), 0.05); } } `] } render() { return n.d` ${this.icon ? n.d` ` : ""} ${!this.label || this.icon && "s" == this.size ? "" : n.d` ${this.label} `} `} attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")), "toggle" == e && this.toggle && this.addEventListener("click", () => { this.active = !this.active }) } }; __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "label", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "icon", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "size", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "toggle", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "active", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "disabled", void 0), i = __decorate([Object(n.c)("magicbooksio-tool")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioTooltip extends n.a { constructor() { super(...arguments), this.flexDirection = "column", this.position = "bottom", this.visible = !1, this.emptyHeader = !0, this.emptyFunctions = !0, this.emptyFooter = !0 } static get styles() { return [r.a, n.b` :host { position: fixed; z-index: 4; } `] } render() { return n.d` this.emptyHeader = 0 === e.target.assignedNodes().length}" > this.emptyFunctions = 0 === e.target.assignedNodes().length}" > this.emptyFooter = 0 === e.target.assignedNodes().length}" > `} attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")), "target" === e && this.target && this.targetObserver() } targetObserver() { let e; const t = "string" == typeof this.target ? document.querySelector(this.target) : this.target; t && (t.addEventListener("mouseover", () => { e = setTimeout(() => this.visible = !0, 500) }), t.addEventListener("mouseout", () => { this.visible = !1, clearTimeout(e) })) } }; __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "label", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "icon", void 0), __decorate([Object(n.e)({ type: String, reflect: !0, attribute: "flex-direction" })], i.prototype, "flexDirection", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "position", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "target", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "visible", void 0), __decorate([Object(n.e)({ type: Boolean })], i.prototype, "emptyHeader", void 0), __decorate([Object(n.e)({ type: Boolean })], i.prototype, "emptyFunctions", void 0), __decorate([Object(n.e)({ type: Boolean })], i.prototype, "emptyFooter", void 0), i = __decorate([Object(n.c)("magicbooksio-tooltip")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioTableRow extends n.a { static get styles() { return [r.a, n.b` :host { display: grid; border-bottom: 1px solid rgba(var(--neutral-1), 0.12); transition: var(--transition-1); } /* header */ :host([slot='header']) { border-color: rgba(var(--neutral-1), 0.2); } /* active */ :host([active]) { background-color: rgba(var(--neutral-1), 0.1); } /* hover inputs */ @media (hover: hover) { :host(:hover:not([active]):not([slot='header'])) { background-color: rgba(var(--neutral-1), 0.05); } :host(:hover:not([active])):host-context(magicbooksio-table[readonly]) { background-color: transparent; } } `] } render() { return n.d` ` } attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")) } connectedCallback() { super.connectedCallback(), this.addEventListener("click", () => this.handleActive()), this.handleColumns() } handleActive() { let e, t; e = this.closest("magicbooksio-table"), e.readonly || "header" == this.slot || (t = this.parentElement.childNodes, t.forEach(e => { e.active = !1 }), this.active = !0) } handleColumns() { const e = this.closest("magicbooksio-table"); this.style.gridTemplateColumns = e.columns, e.addEventListener("columns-changed", () => { this.style.gridTemplateColumns = e.columns }) } }; __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "active", void 0), i = __decorate([Object(n.c)("magicbooksio-table-row")], i) }, function (e, t, o) { "use strict"; o.d(t, "a", (function () { return i })); var n = o(0), r = o(1), __decorate = function (e, t, o, n) { var r, i = arguments.length, c = i < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n; if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) c = Reflect.decorate(e, t, o, n); else for (var s = e.length - 1; s >= 0; s--)(r = e[s]) && (c = (i < 3 ? r(c) : i > 3 ? r(t, o, c) : r(t, o)) || c); return i > 3 && c && Object.defineProperty(t, o, c), c }; let i = class magicbooksioTableCell extends n.a { constructor() { super(...arguments), this.alignment = "left" } static get styles() { return [r.a, n.b` :host { display: flex; align-items: center; padding: 12px 8px; font: var(--body-1); overflow: hidden; cursor: default; } magicbooksio-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* condensed */ :host:host-context(magicbooksio-table[condensed]) { padding: 8px 8px; } /* head */ :host([head]) magicbooksio-text { font-weight: bold; } /* align */ :host([alignment='center']) { justify-content: center; } :host([alignment='right']) { justify-content: flex-end; } /* sortable */ :host([sortable]) { cursor: pointer; } :host([sort-direction='desc']) .sort { transform: rotate(180deg); } .sort { margin: 4px 0px 4px 4px; color: var(--text-2); } `] } render() { return n.d` ${this.head && this.sorted ? n.d` `: ""} `} attributeChangedCallback(e, t, o) { super.attributeChangedCallback(e, t, o), this.dispatchEvent(new Event(e + "-changed")), "grid-cols" == e && (this.style.gridColumn = "span " + this.gridCols), "sortable" == e && this.sortable && (this.sortDirection || (this.sortDirection = "asc"), this.addEventListener("click", () => { this.handleSort() })) } handleSort() { if (this.sorted) this.sortDirection = "asc" == this.sortDirection ? "desc" : "asc"; else { this.parentElement.childNodes.forEach(e => { e.sorted = !1 }), this.sorted = !0, this.sortDirection = "asc" } } }; __decorate([Object(n.e)({ type: Number, reflect: !0, attribute: "grid-cols" })], i.prototype, "gridCols", void 0), __decorate([Object(n.e)({ type: String, reflect: !0 })], i.prototype, "alignment", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "head", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "sorted", void 0), __decorate([Object(n.e)({ type: Boolean, reflect: !0 })], i.prototype, "sortable", void 0), __decorate([Object(n.e)({ type: String, reflect: !0, attribute: "sort-direction" })], i.prototype, "sortDirection", void 0), i = __decorate([Object(n.c)("magicbooksio-table-cell")], i) }, function (e, t, o) { "use strict"; o.r(t); var n = o(2); o.d(t, "magicbooksioAccordion", (function () { return n.a })); var r = o(3); o.d(t, "magicbooksioAppBar", (function () { return r.a })); var i = o(4); o.d(t, "magicbooksioAvatar", (function () { return i.a })); var c = o(5); o.d(t, "magicbooksioBadge", (function () { return c.a })); var s = o(6); o.d(t, "magicbooksioBreadcrumbs", (function () { return s.a })); var a = o(7); o.d(t, "magicbooksioBreadcrumbItem", (function () { return a.a })); var l = o(8); o.d(t, "magicbooksioButton", (function () { return l.a })); var h = o(9); o.d(t, "magicbooksioCard", (function () { return h.a })); var d = o(10); o.d(t, "magicbooksioCheckbox", (function () { return d.a })); var p = o(11); o.d(t, "magicbooksioDivider", (function () { return p.a })); var b = o(12); o.d(t, "magicbooksioDrawer", (function () { return b.a })); var f = o(13); o.d(t, "magicbooksioEmptyState", (function () { return f.a })); var u = o(14); o.d(t, "magicbooksioGrid", (function () { return u.a })); var g = o(15); o.d(t, "magicbooksioImage", (function () { return g.a })); var v = o(16); o.d(t, "magicbooksioIcon", (function () { return v.a })); var m = o(17); o.d(t, "magicbooksioInput", (function () { return m.a })); var y = o(18); o.d(t, "magicbooksioMenuItem", (function () { return y.a })); var _ = o(19); o.d(t, "magicbooksioModal", (function () { return _.a })); var x = o(20); o.d(t, "magicbooksioNavbar", (function () { return x.a })); var w = o(21); o.d(t, "magicbooksioNotifications", (function () { return w.a })); var k = o(22); o.d(t, "magicbooksioNotificationItem", (function () { return k.a })); var j = o(23); o.d(t, "magicbooksioPage", (function () { return j.a })); var O = o(24); o.d(t, "magicbooksioPane", (function () { return O.a })); var S = o(25); o.d(t, "magicbooksioPopover", (function () { return S.a })); var C = o(26); o.d(t, "magicbooksioProgressBar", (function () { return C.a })); var $ = o(27); o.d(t, "magicbooksioRadioButton", (function () { return $.a })); var P = o(28); o.d(t, "magicbooksioSlider", (function () { return P.a })); var E = o(29); o.d(t, "magicbooksioSpinner", (function () { return E.a })); var R = o(30); o.d(t, "magicbooksioStepper", (function () { return R.a })); var z = o(31); o.d(t, "magicbooksioStepperItem", (function () { return z.a })); var N = o(32); o.d(t, "magicbooksioSwitch", (function () { return N.a })); var B = o(33); o.d(t, "magicbooksioSwitchItem", (function () { return B.a })); var T = o(34); o.d(t, "magicbooksioTabItem", (function () { return T.a })); var D = o(35); o.d(t, "magicbooksioTable", (function () { return D.a })); var A = o(42); o.d(t, "magicbooksioTableRow", (function () { return A.a })); var F = o(43); o.d(t, "magicbooksioTableCell", (function () { return F.a })); var I = o(36); o.d(t, "magicbooksioTabs", (function () { return I.a })); var L = o(37); o.d(t, "magicbooksioTag", (function () { return L.a })); var q = o(38); o.d(t, "magicbooksioText", (function () { return q.a })); var M = o(39); o.d(t, "magicbooksioToggle", (function () { return M.a })); var H = o(40); o.d(t, "magicbooksioTool", (function () { return H.a })); var V = o(41); o.d(t, "magicbooksioTooltip", (function () { return V.a })) }]);