soft-components
Version:
Simple soft flexible set of web components
706 lines (655 loc) • 101 kB
JavaScript
import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-d081c54b.js';
const scAccordionCss = ":host{--sc-accordion-animation-duration:var(--sc-animation-duration, 0.2s);--sc-accordion-animation-timing-function:var(\n --sc-animation-timing-function,\n ease-in-out\n );--sc-accordion-item-heading-padding-x:calc(var(--sc-root-spacing, 8px) * 2);--sc-accordion-item-heading-padding-x:calc(var(--sc-root-spacing, 0.5rem) * 2);--sc-accordion-item-heading-padding-y:calc(var(--sc-root-spacing, 8px) * 2);--sc-accordion-item-heading-padding-y:calc(var(--sc-root-spacing, 0.5rem) * 2);--sc-accordion-item-body-padding-x:calc(var(--sc-root-spacing, 8px) * 2);--sc-accordion-item-body-padding-x:calc(var(--sc-root-spacing, 0.5rem) * 2);--sc-accordion-item-body-padding-y:calc(var(--sc-root-spacing, 8px) * 2);--sc-accordion-item-body-padding-y:calc(var(--sc-root-spacing, 0.5rem) * 2);--sc-accordion-item-body-max-height:100vh;--sc-accordion-item-heading-text-color:var(--sc-text-color, #333333);--sc-accordion-item-heading-bg-color:var(--sc-bg-color, #f1f1f1);--sc-accordion-item-body-bg-color:var(--sc-bg-color, #f1f1f1);--sc-accordion-item-heading-border-bottom:1px solid\n var(--sc-shadow-color, rgba(0, 0, 0, 0.2));--sc-accordion-item-heading-border-bottom:0.0625rem solid\n var(--sc-shadow-color, rgba(0, 0, 0, 0.2))}";
const ScAccordion = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/**
* If multiple `<sc-accordion-item>`s can open at the same time
*/
this.multiple = false;
}
componentWillLoad() {
this.items = this.el.querySelectorAll(':scope > sc-accordion-item');
if (!this.multiple) {
this.activeItem = this.el.querySelector(':scope > sc-accordion-item[active]');
if (this.activeItem) {
this.activeItem.open();
}
this.closeNonActive();
}
}
openHandler(e) {
e.stopPropagation();
const eventTarget = e.target;
if (!this.multiple) {
this.activeItem = eventTarget;
this.closeNonActive();
}
}
closeNonActive() {
this.items.forEach(item => {
if (!item.isEqualNode(this.activeItem)) {
item.close();
}
});
}
render() {
return (h(Host, null, h("slot", null)));
}
get el() { return getElement(this); }
};
ScAccordion.style = scAccordionCss;
const hasSlot = (parentEl, slotName) => {
return !!parentEl.querySelector(':scope > [slot="' + slotName + '"'); // cast boolean
};
const scAccordionItemCss = ":host{display:block}:host .heading{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;-webkit-box-shadow:calc(var(--sc-highlight-dist-x) * 0.2) calc(var(--sc-highlight-dist-y) * 0.2) calc(30px * 0.2) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 0.2) calc(var(--sc-shadow-dist-y) * 0.2) calc(30px * 0.2) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:calc(var(--sc-highlight-dist-x) * 0.2) calc(var(--sc-highlight-dist-y) * 0.2) calc(30px * 0.2) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 0.2) calc(var(--sc-shadow-dist-y) * 0.2) calc(30px * 0.2) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));-webkit-box-shadow:calc(var(--sc-highlight-dist-x) * 0.2) calc(var(--sc-highlight-dist-y) * 0.2) calc(1.875rem * 0.2) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 0.2) calc(var(--sc-shadow-dist-y) * 0.2) calc(1.875rem * 0.2) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:calc(var(--sc-highlight-dist-x) * 0.2) calc(var(--sc-highlight-dist-y) * 0.2) calc(1.875rem * 0.2) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 0.2) calc(var(--sc-shadow-dist-y) * 0.2) calc(1.875rem * 0.2) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));border-radius:var(--sc-border-radius, 1em);border:none;text-align:left;padding:var(--sc-accordion-item-heading-padding-y) var(--sc-accordion-item-heading-padding-x);cursor:pointer;-webkit-transition:border-radius var(--sc-accordion-animation-duration) ease var(--sc-accordion-animation-duration);transition:border-radius var(--sc-accordion-animation-duration) ease var(--sc-accordion-animation-duration);background:var(--sc-accordion-item-heading-bg-color)}:host .heading .heading-text{color:var(--sc-accordion-item-heading-text-color);margin:0;-ms-flex:1;flex:1}:host .heading .arrow{color:var(--sc-text-color);-webkit-transition:-webkit-transform var(--sc-accordion-animation-duration) var(--sc-accordion-animation-timing-function);transition:-webkit-transform var(--sc-accordion-animation-duration) var(--sc-accordion-animation-timing-function);transition:transform var(--sc-accordion-animation-duration) var(--sc-accordion-animation-timing-function);transition:transform var(--sc-accordion-animation-duration) var(--sc-accordion-animation-timing-function), -webkit-transform var(--sc-accordion-animation-duration) var(--sc-accordion-animation-timing-function)}:host .heading .arrow svg{width:calc(var(--sc-root-spacing, 8px) * 4);width:calc(var(--sc-root-spacing, 0.5rem) * 4);height:calc(var(--sc-root-spacing, 8px) * 4);height:calc(var(--sc-root-spacing, 0.5rem) * 4)}:host .heading .arrow svg path{fill:currentColor}:host .body-container{overflow:hidden;max-height:0;-webkit-transition:max-height var(--sc-accordion-animation-duration) var(--sc-accordion-animation-timing-function);transition:max-height var(--sc-accordion-animation-duration) var(--sc-accordion-animation-timing-function);background:var(--sc-accordion-item-body-bg-color)}:host .body-container .body{border-radius:var(--sc-border-radius, 1em);-webkit-box-shadow:inset calc(var(--sc-highlight-dist-x) * 0.2) calc(var(--sc-highlight-dist-y) * 0.2) calc(30px * 0.2) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 0.2) calc(var(--sc-shadow-dist-y) * 0.2) calc(30px * 0.2) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:inset calc(var(--sc-highlight-dist-x) * 0.2) calc(var(--sc-highlight-dist-y) * 0.2) calc(30px * 0.2) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 0.2) calc(var(--sc-shadow-dist-y) * 0.2) calc(30px * 0.2) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));border-top-left-radius:0;border-top-right-radius:0;overflow:hidden;padding:var(--sc-accordion-item-body-padding-y) var(--sc-accordion-item-body-padding-x)}:host(.autoHeight) .body-container{overflow:hidden}:host(.active) .heading{border-bottom-left-radius:0;border-bottom-right-radius:0;-webkit-transition:border-radius 0s ease;transition:border-radius 0s ease;border-bottom:var(--sc-accordion-item-heading-border-bottom)}:host(.active) .heading .arrow{-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host(.active) .body-container{max-height:var(--sc-accordion-item-body-max-height)}";
const ScAccordionItem = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.opened = createEvent(this, "opened", 7);
this.opening = createEvent(this, "opening", 7);
this.closed = createEvent(this, "closed", 7);
this.closing = createEvent(this, "closing", 7);
/**
* Heading text.
* This will be overwritten by `heading` slot
*/
this.heading = null;
/**
* The HTML tag to be applied to the heading text.
* This will be overwritten by `heading` slot
*/
this.headingTag = 'h3';
/**
* If expanded height should be automatically calculated. If set, the `--sc-accordion-item-body-max-height` CSS variable will be set automatically to the content height
*/
this.autoHeight = true;
/**
* If the accordion item should be opened by default
*/
this.active = false;
this.hasHeadingSlot = true;
this.hasArrowSlot = true;
}
componentWillLoad() {
this.hasHeadingSlot = hasSlot(this.el, 'heading');
this.hasArrowSlot = hasSlot(this.el, 'arrow');
}
componentDidLoad() {
if (this.autoHeight) {
this.bodyEl.style.setProperty('--sc-accordion-item-body-max-height', this.bodyEl.scrollHeight + 2 + 'px');
}
this.onTransitionEnd();
this.bodyEl.addEventListener('transitionstart', () => {
this.onTransitionStart();
});
this.bodyEl.addEventListener('transitionend', () => {
this.onTransitionEnd();
});
}
onTransitionEnd() {
if (this.active) {
this.bodyEl.style.overflow = 'auto';
this.opened.emit();
}
else {
this.bodyEl.style.overflow = 'hidden';
this.bodyEl.style.visibility = 'hidden';
this.closed.emit();
}
}
onTransitionStart() {
if (this.active) {
this.bodyEl.style.visibility = 'visible';
this.opening.emit();
}
else {
this.closing.emit();
}
}
/**
* Toggle open state of accordion item
*/
async toggle() {
if (this.active) {
this.close();
}
else {
this.open();
}
}
/**
* Closes the accordion item
*/
async close() {
this.active = false;
}
/**
* Opens the accordion item.
*/
async open() {
this.active = true;
}
render() {
const { active, autoHeight, headingTag: HeadingTag } = this;
return (h(Host, { class: { active, autoHeight } }, h("button", { class: "heading", role: "button", onClick: () => this.toggle() }, this.hasHeadingSlot ? (h("slot", { name: "heading" })) : (h(HeadingTag, { class: "heading-text" }, this.heading)), h("span", { class: "arrow" }, this.hasArrowSlot ? (h("slot", { name: "arrow" })) : (h("svg", { focusable: "false", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" }))))), h("div", { class: "body-container", ref: el => (this.bodyEl = el) }, h("div", { class: "body" }, h("slot", null)))));
}
get el() { return getElement(this); }
};
ScAccordionItem.style = scAccordionItemCss;
const scButtonCss = "sc-button{--sc-button-bg-color:var(--sc-bg-color, #f6f6f8);--sc-button-text-color:var(--sc-text-color, #333333);--sc-button-border-radius:var(--sc-border-radius, 1em);--sc-button-padding-y:calc(var(--sc-root-spacing, 8px) * 2);--sc-button-padding-y:calc(var(--sc-root-spacing, 0.5rem) * 2);--sc-button-padding-x:calc(var(--sc-root-spacing, 8px) * 4);--sc-button-padding-x:calc(var(--sc-root-spacing, 0.5rem) * 4);--sc-button-icon-size:calc(var(--sc-root-spacing, 8px) * 6);--sc-button-icon-size:calc(var(--sc-root-spacing, 0.5rem) * 6);--sc-button-circle-size:calc(var(--sc-root-spacing, 8px) * 6);--sc-button-circle-size:calc(var(--sc-root-spacing, 0.5rem) * 6);--sc-button-bordered-border-radius:var(--sc-button-border-radius);--sc-button-bordered-border-width:2px;--sc-button-bordered-border-width:0.125rem;--sc-button-text-hover-color:var(--sc-secondary-color, #646695);--sc-button-text-active-color:var(--sc-active-color, #c586c0);--sc-button-width:auto;--sc-button-edge-width:4px;--sc-button-edge-width:0.25rem;--sc-button-vertical-align:top;display:inline-block;vertical-align:var(--sc-button-vertical-align)}sc-button[type]{-webkit-appearance:none}sc-button *{-webkit-box-sizing:border-box;box-sizing:border-box}sc-button:not(.flat) a,sc-button:not(.flat) button{-webkit-box-shadow:calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(30px * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(30px * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(30px * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(30px * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));-webkit-box-shadow:calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2))}sc-button a,sc-button button{cursor:pointer;border:none;text-decoration:none;display:block;background-color:var(--sc-button-bg-color);color:var(--sc-button-text-color);border-radius:var(--sc-button-border-radius);position:relative;padding:var(--sc-button-edge-width);font-size:1em;font-family:inherit;width:var(--sc-button-width)}sc-button a .button-inner,sc-button button .button-inner{overflow:hidden;-webkit-transition:all 0.4s ease;transition:all 0.4s ease;display:block;padding:var(--sc-button-padding-y) var(--sc-button-padding-x);border-radius:calc(var(--sc-button-border-radius) - 4px);border-radius:calc(var(--sc-button-border-radius) - 0.25rem);width:var(--sc-button-width)}sc-button a:hover,sc-button a:focus,sc-button button:hover,sc-button button:focus{color:var(--sc-button-text-hover-color)}sc-button a:hover .button-inner,sc-button a:focus .button-inner,sc-button button:hover .button-inner,sc-button button:focus .button-inner{-webkit-box-shadow:inset calc(var(--sc-highlight-dist-x) * 0.5) calc(var(--sc-highlight-dist-y) * 0.5) calc(30px * 0.5) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 0.5) calc(var(--sc-shadow-dist-y) * 0.5) calc(30px * 0.5) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:inset calc(var(--sc-highlight-dist-x) * 0.5) calc(var(--sc-highlight-dist-y) * 0.5) calc(30px * 0.5) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 0.5) calc(var(--sc-shadow-dist-y) * 0.5) calc(30px * 0.5) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));-webkit-box-shadow:inset calc(var(--sc-highlight-dist-x) * 0.5) calc(var(--sc-highlight-dist-y) * 0.5) calc(1.875rem * 0.5) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 0.5) calc(var(--sc-shadow-dist-y) * 0.5) calc(1.875rem * 0.5) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:inset calc(var(--sc-highlight-dist-x) * 0.5) calc(var(--sc-highlight-dist-y) * 0.5) calc(1.875rem * 0.5) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 0.5) calc(var(--sc-shadow-dist-y) * 0.5) calc(1.875rem * 0.5) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2))}sc-button a:active .button-inner,sc-button button:active .button-inner{-webkit-box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(30px * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(30px * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(30px * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(30px * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));-webkit-box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2))}sc-button.block{display:block}sc-button.block a,sc-button.block button{width:100%}sc-button.block a .button-inner,sc-button.block button .button-inner{width:100%;text-align:center;-ms-flex-pack:center;justify-content:center}sc-button.icon a,sc-button.icon button{width:var(--sc-button-icon-size);height:var(--sc-button-icon-size);padding:var(--sc-button-edge-width);font-size:calc(var(--sc-button-icon-size) * 0.4)}sc-button.icon a .button-inner,sc-button.icon button .button-inner{padding:0;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}sc-button.icon-text .button-inner{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}sc-button.bordered a,sc-button.bordered button{position:relative;padding:calc( var(--sc-button-edge-width) + var(--sc-button-bordered-border-width) )}sc-button.bordered a::before,sc-button.bordered button::before{content:\"\";position:absolute;top:calc(var(--sc-button-edge-width) - 1px);top:calc(var(--sc-button-edge-width) - 0.0625rem);left:calc(var(--sc-button-edge-width) - 1px);left:calc(var(--sc-button-edge-width) - 0.0625rem);bottom:calc(var(--sc-button-edge-width) - 1px);bottom:calc(var(--sc-button-edge-width) - 0.0625rem);right:calc(var(--sc-button-edge-width) - 1px);right:calc(var(--sc-button-edge-width) - 0.0625rem);border-radius:var(--sc-button-bordered-border-radius);background-image:-webkit-gradient(linear, left top, right bottom, color-stop(-10%, var(--sc-border-color, var(--sc-shadow-color, rgba(0, 0, 0, 0.2)))), color-stop(55%, var(--sc-highlight-color, rgba(255, 255, 255, 0.2)))), -webkit-gradient(linear, left top, right bottom, color-stop(55%, var(--sc-highlight-color, rgba(255, 255, 255, 0.2))), color-stop(70%, var(--sc-border-color, var(--sc-shadow-color, rgba(0, 0, 0, 0.2)))));background-image:linear-gradient(to bottom right, var(--sc-border-color, var(--sc-shadow-color, rgba(0, 0, 0, 0.2))) -10%, var(--sc-highlight-color, rgba(255, 255, 255, 0.2)) 55%), linear-gradient(to bottom right, var(--sc-highlight-color, rgba(255, 255, 255, 0.2)) 55%, var(--sc-border-color, var(--sc-shadow-color, rgba(0, 0, 0, 0.2))) 70%)}sc-button.bordered a .button-inner,sc-button.bordered button .button-inner{position:relative;background-color:var(--sc-button-bg-color);border-radius:calc(var(--sc-button-bordered-border-radius) - 1px);border-radius:calc(var(--sc-button-bordered-border-radius) - 0.0625rem)}sc-button.bordered.icon a,sc-button.bordered.icon button{--sc-button-bordered-border-radius:50%;line-height:calc( var(--sc-button-icon-size) - (var(--sc-button-edge-width) * 2) - var(--sc-button-bordered-border-width) - var(--sc-button-bordered-border-width) )}sc-button.circle a,sc-button.circle button{width:var(--sc-button-circle-size);height:var(--sc-button-circle-size);border-radius:50%;padding:var(--sc-button-edge-width)}sc-button.circle a::before,sc-button.circle button::before{border-radius:50%}sc-button.circle a .button-inner,sc-button.circle button .button-inner{padding:0;width:100%;height:100%;display:-ms-flexbox;display:flex;border-radius:50%}sc-button.circle.bordered a,sc-button.circle.bordered button{padding:calc( var(--sc-button-edge-width) + var(--sc-button-bordered-border-width) )}sc-button.active a,sc-button.active button{color:var(--sc-button-text-active-color)}sc-button.active a .button-inner,sc-button.active button .button-inner{-webkit-box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(30px * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(30px * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(30px * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(30px * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));-webkit-box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2))}sc-button.disabled a,sc-button.disabled button{-webkit-box-shadow:none;box-shadow:none;color:#999}sc-button.disabled a:hover .button-inner,sc-button.disabled a:focus .button-inner,sc-button.disabled button:hover .button-inner,sc-button.disabled button:focus .button-inner{-webkit-box-shadow:none;box-shadow:none}";
const ScButton = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.focusEvent = createEvent(this, "focusEvent", 7);
this.blurEvent = createEvent(this, "blurEvent", 7);
this.clickEvent = createEvent(this, "clickEvent", 7);
/**
* If `true`, the user cannot interact with the button.
*/
this.disabled = false;
/**
* Make button `display: block`
*/
this.block = false;
/**
* Icon only button
*/
this.icon = false;
/**
* If prop exists, button will have an engraved-styled border
*/
this.bordered = false;
/**
* The type of the button.
*/
this.type = 'button';
/**
* If this button has both icon and text
*/
this.iconText = false;
/**
* Set active state for the button
*/
this.active = false;
/**
* Make button flat
*/
this.flat = false;
/**
* Make button circle shaped
*/
this.circle = false;
/**
* Use mouse as the light source (ray-tracing)
*/
this.rayTracing = false;
this.onFocus = () => {
this.focusEvent.emit();
};
this.onBlur = () => {
this.blurEvent.emit();
};
this.onClick = () => {
this.clickEvent.emit();
};
}
render() {
const { type, disabled, rel, target, href, icon, block, bordered, iconText, flat, circle, } = this;
const TagType = href === undefined ? 'button' : 'a';
const attrs = TagType === 'button'
? { type }
: {
download: this.download,
href,
rel,
target,
};
return (h(Host, { "aria-disabled": disabled ? 'true' : null, role: "button", class: {
icon,
block,
bordered,
'icon-text': iconText,
flat,
circle,
disabled,
} }, this.rayTracing && h("sc-ray-tracer", { element: this.el }), h(TagType, Object.assign({}, attrs, { disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }), h("span", { class: "button-inner" }, h("slot", { name: "start" }), h("slot", null), h("slot", { name: "end" })))));
}
get el() { return getElement(this); }
};
ScButton.style = scButtonCss;
const scCardCss = ":host{--sc-card-outer-padding-x:calc(var(--sc-root-spacing) * 4);--sc-card-outer-padding-y:calc(var(--sc-root-spacing) * 4);--sc-card-inner-padding-y:calc(var(--sc-root-spacing) * 2);--sc-card-bg-color:var(--sc-bg-color, #f1f1f1);--sc-card-title-font-size:calc(var(--sc-root-spacing) * 3);--sc-card-title-font-weight:700;--sc-card-title-text-color:var(--sc-text-color, #333333);--sc-card-subtitle-font-size:calc(var(--sc-root-spacing) * 2);--sc-card-subtitle-font-weight:400;--sc-card-subtitle-text-color:var(--sc-text-color, #696969);--sc-card-border-width:2px;--sc-card-border-width:0.125rem;--sc-card-media-width:100%;--sc-card-media-height:calc(var(--sc-root-spacing, 8px) * 20);--sc-card-media-height:calc(var(--sc-root-spacing, 0.5rem) * 20);--sc-card-media-height:calc(var(--sc-root-spacing, 8px) * 20);--sc-card-media-object-position:center;display:block;-webkit-box-shadow:calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(30px * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(30px * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(30px * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(30px * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));-webkit-box-shadow:calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));background:var(--sc-card-bg-color);border-radius:var(--sc-border-radius, 1em);overflow:hidden}:host a{display:block;color:currentColor;text-decoration:none;-webkit-transition:-webkit-box-shadow 0.3s ease;transition:-webkit-box-shadow 0.3s ease;transition:box-shadow 0.3s ease;transition:box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease}:host a:hover,:host a:focus{border-radius:var(--sc-border-radius, 1em);-webkit-box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(30px * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(30px * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(30px * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(30px * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));-webkit-box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2))}:host .card-inner{border-radius:var(--sc-border-radius, 1em);padding:var(--sc-card-outer-padding-y) var(--sc-card-outer-padding-x);overflow:auto}:host .card-inner .card-title-container{padding-bottom:var(--sc-card-inner-padding-y)}:host .card-inner .card-title-container .card-title{font-size:var(--sc-card-title-font-size);font-weight:var(--sc-card-title-font-weight);color:var(--sc-card-title-text-color);line-height:1.5}:host .card-inner .card-title-container .card-subtitle{font-size:var(--sc-card-subtitle-font-size);font-weight:var(--sc-card-subtitle-font-weight);color:var(--sc-card-subtitle-text-color);line-height:1.5}:host .card-media{overflow:hidden;-ms-flex-negative:0;flex-shrink:0;-ms-flex-preferred-size:40%;flex-basis:40%}:host .card-media ::slotted(*){width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:var(--sc-card-media-object-position);object-position:var(--sc-card-media-object-position)}:host([media-position]){display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host([media-position=top]){-ms-flex-direction:column;flex-direction:column}:host([media-position=top]) .card-inner{border-top-left-radius:0;border-top-right-radius:0}:host([media-position=top]) .card-media{width:100%;height:var(--sc-card-media-height)}:host([media-position=bottom]){-ms-flex-direction:column-reverse;flex-direction:column-reverse}:host([media-position=bottom]) .card-inner{border-bottom-left-radius:0;border-bottom-right-radius:0}:host([media-position=bottom]) .card-media{width:100%;height:var(--sc-card-media-height)}:host([media-position=left]){-ms-flex-direction:row;flex-direction:row;-ms-flex-align:stretch;align-items:stretch}:host([media-position=left]) .card-media{width:var(--sc-card-media-width)}:host([media-position=right]){-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-align:stretch;align-items:stretch}:host([media-position=right]) .card-media{width:var(--sc-card-media-width)}:host(.engraved){-webkit-box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(30px * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(30px * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(30px * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(30px * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));-webkit-box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2))}:host(.hoverable):hover{-webkit-box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(30px * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(30px * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(30px * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(30px * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));-webkit-box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2))}:host(.bordered){background-image:-webkit-gradient(linear, left top, right bottom, color-stop(-10%, var(--sc-border-color, var(--sc-shadow-color, rgba(0, 0, 0, 0.2)))), color-stop(55%, var(--sc-highlight-color, rgba(255, 255, 255, 0.2)))), -webkit-gradient(linear, left top, right bottom, color-stop(55%, var(--sc-highlight-color, rgba(255, 255, 255, 0.2))), color-stop(70%, var(--sc-border-color, var(--sc-shadow-color, rgba(0, 0, 0, 0.2)))));background-image:linear-gradient(to bottom right, var(--sc-border-color, var(--sc-shadow-color, rgba(0, 0, 0, 0.2))) -10%, var(--sc-highlight-color, rgba(255, 255, 255, 0.2)) 55%), linear-gradient(to bottom right, var(--sc-highlight-color, rgba(255, 255, 255, 0.2)) 55%, var(--sc-border-color, var(--sc-shadow-color, rgba(0, 0, 0, 0.2))) 70%);padding:var(--sc-card-border-width)}:host(.bordered) .card-inner{background-color:var(--sc-card-bg-color)}:host(.ray-tracing){-webkit-transition:-webkit-box-shadow 0.1s ease;transition:-webkit-box-shadow 0.1s ease;transition:box-shadow 0.1s ease;transition:box-shadow 0.1s ease, -webkit-box-shadow 0.1s ease}";
const Card = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/**
* if true, card will appear engraved instead of raised by default.
*/
this.engraved = false;
/**
* If this card has bordered style
*/
this.bordered = false;
/**
* Position of featured media in the card
*/
this.mediaPosition = null;
/**
* Use mouse as the light source (ray-tracing)
*/
this.rayTracing = false;
}
componentWillLoad() {
this.hasCustomTitle = hasSlot(this.el, 'custom-title');
this.hasOverflowMenu = hasSlot(this.el, 'overflow-menu');
this.hasMedia = hasSlot(this.el, 'media-content');
}
render() {
const { engraved, bordered } = this;
return (h(Host, { class: { engraved, bordered } }, this.rayTracing && h("sc-ray-tracer", { element: this.el }), this.hasMedia && (h("div", { class: "card-media" }, h("slot", { name: "media-content" }))), h("div", { class: "card-inner" }, h("div", { class: "overflow-menu" }, h("slot", { name: "overflow-menu" })), this.hasCustomTitle || this.cardTitle || this.cardSubtitle ? (h("div", { class: "card-title-container" }, this.hasCustomTitle ? (h("slot", { name: "custom-title" })) : (h("div", null, this.cardTitle && (h("div", { class: "card-title" }, this.cardTitle)), this.cardSubtitle && (h("div", { class: "card-subtitle" }, this.cardSubtitle)))))) : null, h("div", { class: "card-content" }, h("slot", null)))));
}
get el() { return getElement(this); }
};
Card.style = scCardCss;
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
/**
* lodash (Custom Build) <https://lodash.com/>
* Build: `lodash modularize exports="npm" -o ./`
* Copyright jQuery Foundation and other contributors <https://jquery.org/>
* Released under MIT license <https://lodash.com/license>
* Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
* Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
*/
/** Used as the `TypeError` message for "Functions" methods. */
var FUNC_ERROR_TEXT = 'Expected a function';
/** Used as references for various `Number` constants. */
var NAN = 0 / 0;
/** `Object#toString` result references. */
var symbolTag = '[object Symbol]';
/** Used to match leading and trailing whitespace. */
var reTrim = /^\s+|\s+$/g;
/** Used to detect bad signed hexadecimal string values. */
var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
/** Used to detect binary string values. */
var reIsBinary = /^0b[01]+$/i;
/** Used to detect octal string values. */
var reIsOctal = /^0o[0-7]+$/i;
/** Built-in method references without a dependency on `root`. */
var freeParseInt = parseInt;
/** Detect free variable `global` from Node.js. */
var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
/** Detect free variable `self`. */
var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
/** Used as a reference to the global object. */
var root = freeGlobal || freeSelf || Function('return this')();
/** Used for built-in method references. */
var objectProto = Object.prototype;
/**
* Used to resolve the
* [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
* of values.
*/
var objectToString = objectProto.toString;
/* Built-in method references for those with the same name as other `lodash` methods. */
var nativeMax = Math.max,
nativeMin = Math.min;
/**
* Gets the timestamp of the number of milliseconds that have elapsed since
* the Unix epoch (1 January 1970 00:00:00 UTC).
*
* @static
* @memberOf _
* @since 2.4.0
* @category Date
* @returns {number} Returns the timestamp.
* @example
*
* _.defer(function(stamp) {
* console.log(_.now() - stamp);
* }, _.now());
* // => Logs the number of milliseconds it took for the deferred invocation.
*/
var now = function() {
return root.Date.now();
};
/**
* Creates a debounced function that delays invoking `func` until after `wait`
* milliseconds have elapsed since the last time the debounced function was
* invoked. The debounced function comes with a `cancel` method to cancel
* delayed `func` invocations and a `flush` method to immediately invoke them.
* Provide `options` to indicate whether `func` should be invoked on the
* leading and/or trailing edge of the `wait` timeout. The `func` is invoked
* with the last arguments provided to the debounced function. Subsequent
* calls to the debounced function return the result of the last `func`
* invocation.
*
* **Note:** If `leading` and `trailing` options are `true`, `func` is
* invoked on the trailing edge of the timeout only if the debounced function
* is invoked more than once during the `wait` timeout.
*
* If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
* until to the next tick, similar to `setTimeout` with a timeout of `0`.
*
* See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
* for details over the differences between `_.debounce` and `_.throttle`.
*
* @static
* @memberOf _
* @since 0.1.0
* @category Function
* @param {Function} func The function to debounce.
* @param {number} [wait=0] The number of milliseconds to delay.
* @param {Object} [options={}] The options object.
* @param {boolean} [options.leading=false]
* Specify invoking on the leading edge of the timeout.
* @param {number} [options.maxWait]
* The maximum time `func` is allowed to be delayed before it's invoked.
* @param {boolean} [options.trailing=true]
* Specify invoking on the trailing edge of the timeout.
* @returns {Function} Returns the new debounced function.
* @example
*
* // Avoid costly calculations while the window size is in flux.
* jQuery(window).on('resize', _.debounce(calculateLayout, 150));
*
* // Invoke `sendMail` when clicked, debouncing subsequent calls.
* jQuery(element).on('click', _.debounce(sendMail, 300, {
* 'leading': true,
* 'trailing': false
* }));
*
* // Ensure `batchLog` is invoked once after 1 second of debounced calls.
* var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
* var source = new EventSource('/stream');
* jQuery(source).on('message', debounced);
*
* // Cancel the trailing debounced invocation.
* jQuery(window).on('popstate', debounced.cancel);
*/
function debounce(func, wait, options) {
var lastArgs,
lastThis,
maxWait,
result,
timerId,
lastCallTime,
lastInvokeTime = 0,
leading = false,
maxing = false,
trailing = true;
if (typeof func != 'function') {
throw new TypeError(FUNC_ERROR_TEXT);
}
wait = toNumber(wait) || 0;
if (isObject(options)) {
leading = !!options.leading;
maxing = 'maxWait' in options;
maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
trailing = 'trailing' in options ? !!options.trailing : trailing;
}
function invokeFunc(time) {
var args = lastArgs,
thisArg = lastThis;
lastArgs = lastThis = undefined;
lastInvokeTime = time;
result = func.apply(thisArg, args);
return result;
}
function leadingEdge(time) {
// Reset any `maxWait` timer.
lastInvokeTime = time;
// Start the timer for the trailing edge.
timerId = setTimeout(timerExpired, wait);
// Invoke the leading edge.
return leading ? invokeFunc(time) : result;
}
function remainingWait(time) {
var timeSinceLastCall = time - lastCallTime,
timeSinceLastInvoke = time - lastInvokeTime,
result = wait - timeSinceLastCall;
return maxing ? nativeMin(result, maxWait - timeSinceLastInvoke) : result;
}
function shouldInvoke(time) {
var timeSinceLastCall = time - lastCallTime,
timeSinceLastInvoke = time - lastInvokeTime;
// Either this is the first call, activity has stopped and we're at the
// trailing edge, the system time has gone backwards and we're treating
// it as the trailing edge, or we've hit the `maxWait` limit.
return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
(timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
}
function timerExpired() {
var time = now();
if (shouldInvoke(time)) {
return trailingEdge(time);
}
// Restart the timer.
timerId = setTimeout(timerExpired, remainingWait(time));
}
function trailingEdge(time) {
timerId = undefined;
// Only invoke if we have `lastArgs` which means `func` has been
// debounced at least once.
if (trailing && lastArgs) {
return invokeFunc(time);
}
lastArgs = lastThis = undefined;
return result;
}
function cancel() {
if (timerId !== undefined) {
clearTimeout(timerId);
}
lastInvokeTime = 0;
lastArgs = lastCallTime = lastThis = timerId = undefined;
}
function flush() {
return timerId === undefined ? result : trailingEdge(now());
}
function debounced() {
var time = now(),
isInvoking = shouldInvoke(time);
lastArgs = arguments;
lastThis = this;
lastCallTime = time;
if (isInvoking) {
if (timerId === undefined) {
return leadingEdge(lastCallTime);
}
if (maxing) {
// Handle invocations in a tight loop.
timerId = setTimeout(timerExpired, wait);
return invokeFunc(lastCallTime);
}
}
if (timerId === undefined) {
timerId = setTimeout(timerExpired, wait);
}
return result;
}
debounced.cancel = cancel;
debounced.flush = flush;
return debounced;
}
/**
* Creates a throttled function that only invokes `func` at most once per
* every `wait` milliseconds. The throttled function comes with a `cancel`
* method to cancel delayed `func` invocations and a `flush` method to
* immediately invoke them. Provide `options` to indicate whether `func`
* should be invoked on the leading and/or trailing edge of the `wait`
* timeout. The `func` is invoked with the last arguments provided to the
* throttled function. Subsequent calls to the throttled function return the
* result of the last `func` invocation.
*
* **Note:** If `leading` and `trailing` options are `true`, `func` is
* invoked on the trailing edge of the timeout only if the throttled function
* is invoked more than once during the `wait` timeout.
*
* If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
* until to the next tick, similar to `setTimeout` with a timeout of `0`.
*
* See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
* for details over the differences between `_.throttle` and `_.debounce`.
*
* @static
* @memberOf _
* @since 0.1.0
* @category Function
* @param {Function} func The function to throttle.
* @param {number} [wait=0] The number of milliseconds to throttle invocations to.
* @param {Object} [options={}] The options object.
* @param {boolean} [options.leading=true]
* Specify invoking on the leading edge of the timeout.
* @param {boolean} [options.trailing=true]
* Specify invoking on the trailing edge of the timeout.
* @returns {Function} Returns the new throttled function.
* @example
*
* // Avoid excessively updating the position while scrolling.
* jQuery(window).on('scroll', _.throttle(updatePosition, 100));
*
* // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.
* var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
* jQuery(element).on('click', throttled);
*
* // Cancel the trailing throttled invocation.
* jQuery(window).on('popstate', throttled.cancel);
*/
function throttle(func, wait, options) {
var leading = true,
trailing = true;
if (typeof func != 'function') {
throw new TypeError(FUNC_ERROR_TEXT);
}
if (isObject(options)) {
leading = 'leading' in options ? !!options.leading : leading;
trailing = 'trailing' in options ? !!options.trailing : trailing;
}
return debounce(func, wait, {
'leading': leading,
'maxWait': wait,
'trailing': trailing
});
}
/**
* Checks if `value` is the
* [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
* of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
*
* @static
* @memberOf _
* @since 0.1.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is an object, else `false`.
* @example
*
* _.isObject({});
* // => true
*
* _.isObject([1, 2, 3]);
* // => true
*
* _.isObject(_.noop);
* // => true
*
* _.isObject(null);
* // => false
*/
function isObject(value) {
var type = typeof value;
return !!value && (type == 'object' || type == 'function');
}
/**
* Checks if `value` is object-like. A value is object-like if it's not `null`
* and has a `typeof` result of "object".
*
* @static
* @memberOf _
* @since 4.0.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is object-like, else `false`.
* @example
*
* _.isObjectLike({});
* // => true
*
* _.isObjectLike([1, 2, 3]);
* // => true
*
* _.isObjectLike(_.noop);
* // => false
*
* _.isObjectLike(null);
* // => false
*/
function isObjectLike(value) {
return !!value && typeof value == 'object';
}
/**
* Checks if `value` is classified as a `Symbol` primitive or object.
*
* @static
* @memberOf _
* @since 4.0.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
* @example
*
* _.isSymbol(Symbol.iterator);
* // => true
*
* _.isSymbol('abc');
* // => false
*/
function isSymbol(value) {
return typeof value == 'symbol' ||
(isObjectLike(value) && objectToString.call(value) == symbolTag);
}
/**
* Converts `value` to a number.
*
* @static
* @memberOf _
* @since 4.0.0
* @category Lang
* @param {*} value The value to process.
* @returns {number} Returns the number.
* @example
*
* _.toNumber(3.2);
* // => 3.2
*
* _.toNumber(Number.MIN_VALUE);
* // => 5e-324
*
* _.toNumber(Infinity);
* // => Infinity
*
* _.toNumber('3.2');
* // => 3.2
*/
function toNumber(value) {
if (typeof value == 'number') {
return value;
}
if (isSymbol(value)) {
return NAN;
}
if (isObject(value)) {
var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
value = isObject(other) ? (other + '') : other;
}
if (typeof value != 'string') {
return value === 0 ? value : +value;
}
value = value.replace(reTrim, '');
var isBinary = reIsBinary.test(value);
return (isBinary || reIsOctal.test(value))
? freeParseInt(value.slice(2), isBinary ? 2 : 8)
: (reIsBadHex.test(value) ? NAN : +value);
}
var lodash_throttle = throttle;
const scDialCss = ":host{--sc-dial-angle:0deg;--sc-dial-size:80px;--sc-dial-size:5rem;display:inline-block;height:var(--sc-dial-size);width:var(--sc-dial-size);-webkit-box-shadow:calc(var(--sc-highlight-dist-x) * 0.6) calc(var(--sc-highlight-dist-y) * 0.6) calc(30px * 0.6) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 0.6) calc(var(--sc-shadow-dist-y) * 0.6) calc(30px * 0.6) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:calc(var(--sc-highlight-dist-x) * 0.6) calc(var(--sc-highlight-dist-y) * 0.6) calc(30px * 0.6) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 0.6) calc(var(--sc-shadow-dist-y) * 0.6) calc(30px * 0.6) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));-webkit-box-shadow:calc(var(--sc-highlight-dist-x) * 0.6) calc(var(--sc-highlight-dist-y) * 0.6) calc(1.875rem * 0.6) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 0.6) calc(var(--sc-shadow-dist-y) * 0.6) calc(1.875rem * 0.6) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:calc(var(--sc-highlight-dist-x) * 0.6) calc(var(--sc-highlight-dist-y) * 0.6) calc(1.875rem * 0.6) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 0.6) calc(var(--sc-shadow-dist-y) * 0.6) calc(1.875rem * 0.6) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));border-radius:50%}:host .dial-circle{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;-webkit-transform:rotate(-180deg);transform:rotate(-180deg);position:relative;width:100%;height:100%;cursor:pointer}:host .dial-circle .temp{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%) rotate(180deg);transform:translate(-50%, -50%) rotate(180deg)}:host .dial-circle .pointer{position:absolute;border-radius:50%;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(var(--sc-dial-angle));transform:rotate(var(--sc-dial-angle));will-change:transform}:host .dial-circle .pointer-circle{margin:20px;margin:1.25rem;width:30px;width:1.875rem;height:30px;height:1.875rem;border-radius:50%;-webkit-box-shadow:inset calc(var(--sc-highlight-dist-x) * 0.15) calc(var(--sc-highlight-dist-y) * 0.15) calc(30px * 0.15) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 0.15) calc(var(--sc-shadow-dist-y) * 0.15) calc(30px * 0.15) 0 var(--s