UNPKG

@limetech/lime-elements

Version:
678 lines (669 loc) • 48.4 kB
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-2714248e.js'; import { c as createRandomString } from './random-string-355331d3.js'; import { m as makeEnterClickable, r as removeEnterClickable } from './make-enter-clickable-e0d24198.js'; import { a as __assign, c as __values, _ as __extends, f as __spreadArray, g as __read, M as MDCFoundation, b as MDCComponent } from './ponyfill-9f1f6cd2.js'; import { M as MDCRipple, b as MDCRippleFoundation } from './component-a531729c.js'; /** * @license * Copyright 2021 Google Inc. * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. */ /** * CSS classes used for switch. */ var CssClasses; (function (CssClasses) { CssClasses["PROCESSING"] = "mdc-switch--processing"; CssClasses["SELECTED"] = "mdc-switch--selected"; CssClasses["UNSELECTED"] = "mdc-switch--unselected"; })(CssClasses || (CssClasses = {})); /** * Query selectors used for switch. */ var Selectors; (function (Selectors) { Selectors["RIPPLE"] = ".mdc-switch__ripple"; })(Selectors || (Selectors = {})); /** * @license * Copyright 2021 Google Inc. * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. */ /** * Observe a target's property for changes. When a property changes, the * provided `Observer` function will be invoked with the properties current and * previous values. * * The returned cleanup function will stop listening to changes for the * provided `Observer`. * * @template T The observed target type. * @template K The observed property. * @param target - The target to observe. * @param property - The property of the target to observe. * @param observer - An observer function to invoke each time the property * changes. * @return A cleanup function that will stop observing changes for the provided * `Observer`. */ function observeProperty(target, property, observer) { var targetObservers = installObserver(target, property); var observers = targetObservers.getObservers(property); observers.push(observer); return function () { observers.splice(observers.indexOf(observer), 1); }; } /** * A Map of all `TargetObservers` that have been installed. */ var allTargetObservers = new WeakMap(); /** * Installs a `TargetObservers` for the provided target (if not already * installed), and replaces the given property with a getter and setter that * will respond to changes and call `TargetObservers`. * * Subsequent calls to `installObserver()` with the same target and property * will not override the property's previously installed getter/setter. * * @template T The observed target type. * @template K The observed property to create a getter/setter for. * @param target - The target to observe. * @param property - The property to create a getter/setter for, if needed. * @return The installed `TargetObservers` for the provided target. */ function installObserver(target, property) { var observersMap = new Map(); if (!allTargetObservers.has(target)) { allTargetObservers.set(target, { isEnabled: true, getObservers: function (key) { var observers = observersMap.get(key) || []; if (!observersMap.has(key)) { observersMap.set(key, observers); } return observers; }, installedProperties: new Set() }); } var targetObservers = allTargetObservers.get(target); if (targetObservers.installedProperties.has(property)) { // The getter/setter has already been replaced for this property return targetObservers; } // Retrieve (or create if it's a plain property) the original descriptor from // the target... var descriptor = getDescriptor(target, property) || { configurable: true, enumerable: true, value: target[property], writable: true }; // ...and create a copy that will be used for the observer. var observedDescriptor = __assign({}, descriptor); var descGet = descriptor.get, descSet = descriptor.set; if ('value' in descriptor) { // The descriptor is a simple value (not a getter/setter). // For our observer descriptor that we copied, delete the value/writable // properties, since they are incompatible with the get/set properties // for descriptors. delete observedDescriptor.value; delete observedDescriptor.writable; // Set up a simple getter... var value_1 = descriptor.value; descGet = function () { return value_1; }; // ...and setter (if the original property was writable). if (descriptor.writable) { descSet = function (newValue) { value_1 = newValue; }; } } if (descGet) { observedDescriptor.get = function () { // `this as T` needed for closure conformance return descGet.call(this); }; } if (descSet) { observedDescriptor.set = function (newValue) { var e_4, _a; // `thus as T` needed for closure conformance var previous = descGet ? descGet.call(this) : newValue; descSet.call(this, newValue); if (targetObservers.isEnabled && (!descGet || newValue !== previous)) { try { for (var _b = __values(targetObservers.getObservers(property)), _c = _b.next(); !_c.done; _c = _b.next()) { var observer = _c.value; observer(newValue, previous); } } catch (e_4_1) { e_4 = { error: e_4_1 }; } finally { try { if (_c && !_c.done && (_a = _b.return)) _a.call(_b); } finally { if (e_4) throw e_4.error; } } } }; } targetObservers.installedProperties.add(property); Object.defineProperty(target, property, observedDescriptor); return targetObservers; } /** * Retrieves the descriptor for a property from the provided target. This * function will walk up the target's prototype chain to search for the * descriptor. * * @template T The target type. * @template K The property type. * @param target - The target to retrieve a descriptor from. * @param property - The name of the property to retrieve a descriptor for. * @return the descriptor, or undefined if it does not exist. Keep in mind that * plain properties may not have a descriptor defined. */ function getDescriptor(target, property) { var descriptorTarget = target; var descriptor; while (descriptorTarget) { descriptor = Object.getOwnPropertyDescriptor(descriptorTarget, property); if (descriptor) { break; } // Walk up the instance's prototype chain in case the property is declared // on a superclass. descriptorTarget = Object.getPrototypeOf(descriptorTarget); } return descriptor; } /** * Enables or disables all observers for a provided target. Changes to observed * properties will not call any observers when disabled. * * @template T The observed target type. * @param target - The target to enable or disable observers for. * @param enabled - True to enable or false to disable observers. */ function setObserversEnabled(target, enabled) { var targetObservers = allTargetObservers.get(target); if (targetObservers) { targetObservers.isEnabled = enabled; } } /** * @license * Copyright 2021 Google Inc. * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. */ var MDCObserverFoundation = /** @class */ (function (_super) { __extends(MDCObserverFoundation, _super); function MDCObserverFoundation(adapter) { var _this = _super.call(this, adapter) || this; /** A set of cleanup functions to unobserve changes. */ _this.unobserves = new Set(); return _this; } MDCObserverFoundation.prototype.destroy = function () { _super.prototype.destroy.call(this); this.unobserve(); }; /** * Observe a target's properties for changes using the provided map of * property names and observer functions. * * @template T The target type. * @param target - The target to observe. * @param observers - An object whose keys are target properties and values * are observer functions that are called when the associated property * changes. * @return A cleanup function that can be called to unobserve the * target. */ MDCObserverFoundation.prototype.observe = function (target, observers) { var e_1, _a; var _this = this; var cleanup = []; try { for (var _b = __values(Object.keys(observers)), _c = _b.next(); !_c.done; _c = _b.next()) { var property = _c.value; var observer = observers[property].bind(this); cleanup.push(this.observeProperty(target, property, observer)); } } catch (e_1_1) { e_1 = { error: e_1_1 }; } finally { try { if (_c && !_c.done && (_a = _b.return)) _a.call(_b); } finally { if (e_1) throw e_1.error; } } var unobserve = function () { var e_2, _a; try { for (var cleanup_1 = __values(cleanup), cleanup_1_1 = cleanup_1.next(); !cleanup_1_1.done; cleanup_1_1 = cleanup_1.next()) { var cleanupFn = cleanup_1_1.value; cleanupFn(); } } catch (e_2_1) { e_2 = { error: e_2_1 }; } finally { try { if (cleanup_1_1 && !cleanup_1_1.done && (_a = cleanup_1.return)) _a.call(cleanup_1); } finally { if (e_2) throw e_2.error; } } _this.unobserves.delete(unobserve); }; this.unobserves.add(unobserve); return unobserve; }; /** * Observe a target's property for changes. When a property changes, the * provided `Observer` function will be invoked with the properties current * and previous values. * * The returned cleanup function will stop listening to changes for the * provided `Observer`. * * @template T The observed target type. * @template K The observed property. * @param target - The target to observe. * @param property - The property of the target to observe. * @param observer - An observer function to invoke each time the property * changes. * @return A cleanup function that will stop observing changes for the * provided `Observer`. */ MDCObserverFoundation.prototype.observeProperty = function (target, property, observer) { return observeProperty(target, property, observer); }; /** * Enables or disables all observers for the provided target. Disabling * observers will prevent them from being called until they are re-enabled. * * @param target - The target to enable or disable observers for. * @param enabled - Whether or not observers should be called. */ MDCObserverFoundation.prototype.setObserversEnabled = function (target, enabled) { setObserversEnabled(target, enabled); }; /** * Clean up all observers and stop listening for property changes. */ MDCObserverFoundation.prototype.unobserve = function () { var e_3, _a; try { // Iterate over a copy since unobserve() will remove themselves from the set for (var _b = __values(__spreadArray([], __read(this.unobserves))), _c = _b.next(); !_c.done; _c = _b.next()) { var unobserve = _c.value; unobserve(); } } catch (e_3_1) { e_3 = { error: e_3_1 }; } finally { try { if (_c && !_c.done && (_a = _b.return)) _a.call(_b); } finally { if (e_3) throw e_3.error; } } }; return MDCObserverFoundation; }(MDCFoundation)); /** * @license * Copyright 2021 Google Inc. * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. */ /** * `MDCSwitchFoundation` provides a state-only foundation for a switch * component. * * State observers and event handler entrypoints update a component's adapter's * state with the logic needed for switch to function. */ var MDCSwitchFoundation = /** @class */ (function (_super) { __extends(MDCSwitchFoundation, _super); function MDCSwitchFoundation(adapter) { var _this = _super.call(this, adapter) || this; _this.handleClick = _this.handleClick.bind(_this); return _this; } /** * Initializes the foundation and starts observing state changes. */ MDCSwitchFoundation.prototype.init = function () { this.observe(this.adapter.state, { disabled: this.stopProcessingIfDisabled, processing: this.stopProcessingIfDisabled, }); }; /** * Event handler for switch click events. Clicking on a switch will toggle its * selected state. */ MDCSwitchFoundation.prototype.handleClick = function () { if (this.adapter.state.disabled) { return; } this.adapter.state.selected = !this.adapter.state.selected; }; MDCSwitchFoundation.prototype.stopProcessingIfDisabled = function () { if (this.adapter.state.disabled) { this.adapter.state.processing = false; } }; return MDCSwitchFoundation; }(MDCObserverFoundation)); /** * `MDCSwitchRenderFoundation` provides a state and rendering foundation for a * switch component. * * State observers and event handler entrypoints update a component's * adapter's state with the logic needed for switch to function. * * In response to state changes, the rendering foundation uses the component's * render adapter to keep the component's DOM updated with the state. */ var MDCSwitchRenderFoundation = /** @class */ (function (_super) { __extends(MDCSwitchRenderFoundation, _super); function MDCSwitchRenderFoundation() { return _super !== null && _super.apply(this, arguments) || this; } /** * Initializes the foundation and starts observing state changes. */ MDCSwitchRenderFoundation.prototype.init = function () { _super.prototype.init.call(this); this.observe(this.adapter.state, { disabled: this.onDisabledChange, processing: this.onProcessingChange, selected: this.onSelectedChange, }); }; /** * Initializes the foundation from a server side rendered (SSR) component. * This will sync the adapter's state with the current state of the DOM. * * This method should be called after `init()`. */ MDCSwitchRenderFoundation.prototype.initFromDOM = function () { // Turn off observers while setting state this.setObserversEnabled(this.adapter.state, false); this.adapter.state.selected = this.adapter.hasClass(CssClasses.SELECTED); // Ensure aria-checked is set if attribute is not present this.onSelectedChange(); this.adapter.state.disabled = this.adapter.isDisabled(); this.adapter.state.processing = this.adapter.hasClass(CssClasses.PROCESSING); // Re-observe state this.setObserversEnabled(this.adapter.state, true); this.stopProcessingIfDisabled(); }; MDCSwitchRenderFoundation.prototype.onDisabledChange = function () { this.adapter.setDisabled(this.adapter.state.disabled); }; MDCSwitchRenderFoundation.prototype.onProcessingChange = function () { this.toggleClass(this.adapter.state.processing, CssClasses.PROCESSING); }; MDCSwitchRenderFoundation.prototype.onSelectedChange = function () { this.adapter.setAriaChecked(String(this.adapter.state.selected)); this.toggleClass(this.adapter.state.selected, CssClasses.SELECTED); this.toggleClass(!this.adapter.state.selected, CssClasses.UNSELECTED); }; MDCSwitchRenderFoundation.prototype.toggleClass = function (addClass, className) { if (addClass) { this.adapter.addClass(className); } else { this.adapter.removeClass(className); } }; return MDCSwitchRenderFoundation; }(MDCSwitchFoundation)); /** * @license * Copyright 2021 Google Inc. * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. */ /** * `MDCSwitch` provides a component implementation of a Material Design switch. */ var MDCSwitch = /** @class */ (function (_super) { __extends(MDCSwitch, _super); function MDCSwitch(root, foundation) { var _this = _super.call(this, root, foundation) || this; _this.root = root; return _this; } /** * Creates a new `MDCSwitch` and attaches it to the given root element. * @param root The root to attach to. * @return the new component instance. */ MDCSwitch.attachTo = function (root) { return new MDCSwitch(root); }; MDCSwitch.prototype.initialize = function () { this.ripple = new MDCRipple(this.root, this.createRippleFoundation()); }; MDCSwitch.prototype.initialSyncWithDOM = function () { var rippleElement = this.root.querySelector(Selectors.RIPPLE); if (!rippleElement) { throw new Error("Switch " + Selectors.RIPPLE + " element is required."); } this.rippleElement = rippleElement; this.root.addEventListener('click', this.foundation.handleClick); this.foundation.initFromDOM(); }; MDCSwitch.prototype.destroy = function () { _super.prototype.destroy.call(this); this.ripple.destroy(); this.root.removeEventListener('click', this.foundation.handleClick); }; MDCSwitch.prototype.getDefaultFoundation = function () { return new MDCSwitchRenderFoundation(this.createAdapter()); }; MDCSwitch.prototype.createAdapter = function () { var _this = this; return { addClass: function (className) { _this.root.classList.add(className); }, hasClass: function (className) { return _this.root.classList.contains(className); }, isDisabled: function () { return _this.root.disabled; }, removeClass: function (className) { _this.root.classList.remove(className); }, setAriaChecked: function (ariaChecked) { return _this.root.setAttribute('aria-checked', ariaChecked); }, setDisabled: function (disabled) { _this.root.disabled = disabled; }, state: this, }; }; MDCSwitch.prototype.createRippleFoundation = function () { return new MDCRippleFoundation(this.createRippleAdapter()); }; MDCSwitch.prototype.createRippleAdapter = function () { var _this = this; return __assign(__assign({}, MDCRipple.createAdapter(this)), { computeBoundingRect: function () { return _this.rippleElement.getBoundingClientRect(); }, isUnbounded: function () { return true; } }); }; return MDCSwitch; }(MDCComponent)); const switchCss = "@charset \"UTF-8\";.mdc-elevation-overlay{position:absolute;border-radius:inherit;pointer-events:none;opacity:0;opacity:var(--mdc-elevation-overlay-opacity, 0);transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);background-color:#fff;background-color:var(--mdc-elevation-overlay-color, #fff)}.mdc-switch{align-items:center;background:none;border:none;cursor:pointer;display:inline-flex;flex-shrink:0;margin:0;outline:none;overflow:visible;padding:0;position:relative}.mdc-switch:disabled{cursor:default;pointer-events:none}.mdc-switch__track{overflow:hidden;position:relative;width:100%}.mdc-switch__track::before,.mdc-switch__track::after{border:1px solid transparent;border-radius:inherit;box-sizing:border-box;content:\"\";height:100%;left:0;position:absolute;width:100%}.mdc-switch__track::before{transition:transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);transform:translateX(0)}.mdc-switch__track::after{transition:transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);transform:translateX(-100%)}[dir=rtl] .mdc-switch__track::after,.mdc-switch__track[dir=rtl]::after{transform:translateX(100%);}.mdc-switch--selected .mdc-switch__track::before{transition:transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);transform:translateX(100%)}[dir=rtl] .mdc-switch--selected .mdc-switch__track::before,.mdc-switch--selected .mdc-switch__track[dir=rtl]::before{transform:translateX(-100%);}.mdc-switch--selected .mdc-switch__track::after{transition:transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);transform:translateX(0)}.mdc-switch__handle-track{height:100%;pointer-events:none;position:absolute;top:0;transition:transform 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);left:0;right:auto;transform:translateX(0)}[dir=rtl] .mdc-switch__handle-track,.mdc-switch__handle-track[dir=rtl]{left:auto;right:0;}.mdc-switch--selected .mdc-switch__handle-track{transform:translateX(100%)}[dir=rtl] .mdc-switch--selected .mdc-switch__handle-track,.mdc-switch--selected .mdc-switch__handle-track[dir=rtl]{transform:translateX(-100%);}.mdc-switch__handle{display:flex;pointer-events:auto;position:absolute;top:50%;transform:translateY(-50%);left:0;right:auto}[dir=rtl] .mdc-switch__handle,.mdc-switch__handle[dir=rtl]{left:auto;right:0;}.mdc-switch__handle::before,.mdc-switch__handle::after{border:1px solid transparent;border-radius:inherit;box-sizing:border-box;content:\"\";width:100%;height:100%;left:0;position:absolute;top:0;transition:background-color 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1), border-color 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);z-index:-1}.mdc-switch__shadow{border-radius:inherit;bottom:0;left:0;position:absolute;right:0;top:0}.mdc-elevation-overlay{bottom:0;left:0;right:0;top:0}.mdc-switch__ripple{left:50%;position:absolute;top:50%;transform:translate(-50%, -50%);z-index:-1}.mdc-switch:disabled .mdc-switch__ripple{display:none}.mdc-switch__icons{height:100%;position:relative;width:100%;z-index:1}.mdc-switch__icon{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0;opacity:0;transition:opacity 30ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mdc-switch--selected .mdc-switch__icon--on,.mdc-switch--unselected .mdc-switch__icon--off{opacity:1;transition:opacity 45ms 30ms cubic-bezier(0, 0, 0.2, 1)}.mdc-switch{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);will-change:transform, opacity}@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-switch .mdc-switch__ripple::before,.mdc-switch .mdc-switch__ripple::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-switch .mdc-switch__ripple::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-switch .mdc-switch__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-switch.mdc-ripple-upgraded--unbounded .mdc-switch__ripple::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-switch.mdc-ripple-upgraded--foreground-activation .mdc-switch__ripple::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-switch.mdc-ripple-upgraded--foreground-deactivation .mdc-switch__ripple::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-switch .mdc-switch__ripple::before,.mdc-switch .mdc-switch__ripple::after{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::before,.mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::after{top:var(--mdc-ripple-top, calc(50% - 50%));left:var(--mdc-ripple-left, calc(50% - 50%));width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-switch{width:36px;width:var(--mdc-switch-track-width, 36px)}.mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle::after{background:#6200ee;background:var(--mdc-switch-selected-handle-color, var(--mdc-theme-primary, #6200ee))}.mdc-switch.mdc-switch--selected:enabled:hover:not(:focus):not(:active) .mdc-switch__handle::after{background:#310077;background:var(--mdc-switch-selected-hover-handle-color, #310077)}.mdc-switch.mdc-switch--selected:enabled:focus:not(:active) .mdc-switch__handle::after{background:#310077;background:var(--mdc-switch-selected-focus-handle-color, #310077)}.mdc-switch.mdc-switch--selected:enabled:active .mdc-switch__handle::after{background:#310077;background:var(--mdc-switch-selected-pressed-handle-color, #310077)}.mdc-switch.mdc-switch--selected:disabled .mdc-switch__handle::after{background:#424242;background:var(--mdc-switch-disabled-selected-handle-color, #424242)}.mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle::after{background:#616161;background:var(--mdc-switch-unselected-handle-color, #616161)}.mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus):not(:active) .mdc-switch__handle::after{background:#212121;background:var(--mdc-switch-unselected-hover-handle-color, #212121)}.mdc-switch.mdc-switch--unselected:enabled:focus:not(:active) .mdc-switch__handle::after{background:#212121;background:var(--mdc-switch-unselected-focus-handle-color, #212121)}.mdc-switch.mdc-switch--unselected:enabled:active .mdc-switch__handle::after{background:#212121;background:var(--mdc-switch-unselected-pressed-handle-color, #212121)}.mdc-switch.mdc-switch--unselected:disabled .mdc-switch__handle::after{background:#424242;background:var(--mdc-switch-disabled-unselected-handle-color, #424242)}.mdc-switch .mdc-switch__handle::before{background:#fff;background:var(--mdc-switch-handle-surface-color, var(--mdc-theme-surface, #fff))}.mdc-switch:enabled .mdc-switch__shadow{box-shadow:0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);box-shadow:var(--mdc-switch-handle-elevation, var(--mdc-elevation-box-shadow-for-gss));--mdc-elevation-box-shadow-for-gss:0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)}.mdc-switch:disabled .mdc-switch__shadow{box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);box-shadow:var(--mdc-switch-disabled-handle-elevation, var(--mdc-elevation-box-shadow-for-gss));--mdc-elevation-box-shadow-for-gss:0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)}.mdc-switch .mdc-switch__handle{height:20px;height:var(--mdc-switch-handle-height, 20px)}.mdc-switch:disabled .mdc-switch__handle::after{opacity:0.38;opacity:var(--mdc-switch-disabled-handle-opacity, 0.38)}.mdc-switch .mdc-switch__handle{border-radius:10px;border-radius:var(--mdc-switch-handle-shape, 10px)}.mdc-switch .mdc-switch__handle{width:20px;width:var(--mdc-switch-handle-width, 20px)}.mdc-switch .mdc-switch__handle-track{width:calc(100% - 20px);width:calc(100% - var(--mdc-switch-handle-width, 20px))}.mdc-switch.mdc-switch--selected:enabled .mdc-switch__icon{fill:#fff;fill:var(--mdc-switch-selected-icon-color, var(--mdc-theme-on-primary, #fff))}.mdc-switch.mdc-switch--selected:disabled .mdc-switch__icon{fill:#fff;fill:var(--mdc-switch-disabled-selected-icon-color, var(--mdc-theme-on-primary, #fff))}.mdc-switch.mdc-switch--unselected:enabled .mdc-switch__icon{fill:#fff;fill:var(--mdc-switch-unselected-icon-color, var(--mdc-theme-on-primary, #fff))}.mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icon{fill:#fff;fill:var(--mdc-switch-disabled-unselected-icon-color, var(--mdc-theme-on-primary, #fff))}.mdc-switch.mdc-switch--selected:disabled .mdc-switch__icons{opacity:0.38;opacity:var(--mdc-switch-disabled-selected-icon-opacity, 0.38)}.mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icons{opacity:0.38;opacity:var(--mdc-switch-disabled-unselected-icon-opacity, 0.38)}.mdc-switch.mdc-switch--selected .mdc-switch__icon{width:18px;width:var(--mdc-switch-selected-icon-size, 18px);height:18px;height:var(--mdc-switch-selected-icon-size, 18px)}.mdc-switch.mdc-switch--unselected .mdc-switch__icon{width:18px;width:var(--mdc-switch-unselected-icon-size, 18px);height:18px;height:var(--mdc-switch-unselected-icon-size, 18px)}.mdc-switch.mdc-switch--selected:enabled:hover:not(:focus) .mdc-switch__ripple::before,.mdc-switch.mdc-switch--selected:enabled:hover:not(:focus) .mdc-switch__ripple::after{background-color:#6200ee;background-color:var(--mdc-switch-selected-hover-state-layer-color, var(--mdc-theme-primary, #6200ee))}.mdc-switch.mdc-switch--selected:enabled:focus .mdc-switch__ripple::before,.mdc-switch.mdc-switch--selected:enabled:focus .mdc-switch__ripple::after{background-color:#6200ee;background-color:var(--mdc-switch-selected-focus-state-layer-color, var(--mdc-theme-primary, #6200ee))}.mdc-switch.mdc-switch--selected:enabled:active .mdc-switch__ripple::before,.mdc-switch.mdc-switch--selected:enabled:active .mdc-switch__ripple::after{background-color:#6200ee;background-color:var(--mdc-switch-selected-pressed-state-layer-color, var(--mdc-theme-primary, #6200ee))}.mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus) .mdc-switch__ripple::before,.mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus) .mdc-switch__ripple::after{background-color:#424242;background-color:var(--mdc-switch-unselected-hover-state-layer-color, #424242)}.mdc-switch.mdc-switch--unselected:enabled:focus .mdc-switch__ripple::before,.mdc-switch.mdc-switch--unselected:enabled:focus .mdc-switch__ripple::after{background-color:#424242;background-color:var(--mdc-switch-unselected-focus-state-layer-color, #424242)}.mdc-switch.mdc-switch--unselected:enabled:active .mdc-switch__ripple::before,.mdc-switch.mdc-switch--unselected:enabled:active .mdc-switch__ripple::after{background-color:#424242;background-color:var(--mdc-switch-unselected-pressed-state-layer-color, #424242)}.mdc-switch.mdc-switch--selected:enabled:hover:not(:focus):hover .mdc-switch__ripple::before,.mdc-switch.mdc-switch--selected:enabled:hover:not(:focus).mdc-ripple-surface--hover .mdc-switch__ripple::before{opacity:0.04;opacity:var(--mdc-switch-selected-hover-state-layer-opacity, 0.04)}.mdc-switch.mdc-switch--selected:enabled:focus.mdc-ripple-upgraded--background-focused .mdc-switch__ripple::before,.mdc-switch.mdc-switch--selected:enabled:focus:not(.mdc-ripple-upgraded):focus .mdc-switch__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-switch-selected-focus-state-layer-opacity, 0.12)}.mdc-switch.mdc-switch--selected:enabled:active:not(.mdc-ripple-upgraded) .mdc-switch__ripple::after{transition:opacity 150ms linear}.mdc-switch.mdc-switch--selected:enabled:active:not(.mdc-ripple-upgraded):active .mdc-switch__ripple::after{transition-duration:75ms;opacity:0.1;opacity:var(--mdc-switch-selected-pressed-state-layer-opacity, 0.1)}.mdc-switch.mdc-switch--selected:enabled:active.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-switch-selected-pressed-state-layer-opacity, 0.1)}.mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus):hover .mdc-switch__ripple::before,.mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus).mdc-ripple-surface--hover .mdc-switch__ripple::before{opacity:0.04;opacity:var(--mdc-switch-unselected-hover-state-layer-opacity, 0.04)}.mdc-switch.mdc-switch--unselected:enabled:focus.mdc-ripple-upgraded--background-focused .mdc-switch__ripple::before,.mdc-switch.mdc-switch--unselected:enabled:focus:not(.mdc-ripple-upgraded):focus .mdc-switch__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-switch-unselected-focus-state-layer-opacity, 0.12)}.mdc-switch.mdc-switch--unselected:enabled:active:not(.mdc-ripple-upgraded) .mdc-switch__ripple::after{transition:opacity 150ms linear}.mdc-switch.mdc-switch--unselected:enabled:active:not(.mdc-ripple-upgraded):active .mdc-switch__ripple::after{transition-duration:75ms;opacity:0.1;opacity:var(--mdc-switch-unselected-pressed-state-layer-opacity, 0.1)}.mdc-switch.mdc-switch--unselected:enabled:active.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-switch-unselected-pressed-state-layer-opacity, 0.1)}.mdc-switch .mdc-switch__ripple{height:48px;height:var(--mdc-switch-state-layer-size, 48px);width:48px;width:var(--mdc-switch-state-layer-size, 48px)}.mdc-switch .mdc-switch__track{height:14px;height:var(--mdc-switch-track-height, 14px)}.mdc-switch:disabled .mdc-switch__track{opacity:0.12;opacity:var(--mdc-switch-disabled-track-opacity, 0.12)}.mdc-switch:enabled .mdc-switch__track::after{background:#d7bbff;background:var(--mdc-switch-selected-track-color, #d7bbff)}.mdc-switch:enabled:hover:not(:focus):not(:active) .mdc-switch__track::after{background:#d7bbff;background:var(--mdc-switch-selected-hover-track-color, #d7bbff)}.mdc-switch:enabled:focus:not(:active) .mdc-switch__track::after{background:#d7bbff;background:var(--mdc-switch-selected-focus-track-color, #d7bbff)}.mdc-switch:enabled:active .mdc-switch__track::after{background:#d7bbff;background:var(--mdc-switch-selected-pressed-track-color, #d7bbff)}.mdc-switch:disabled .mdc-switch__track::after{background:#424242;background:var(--mdc-switch-disabled-selected-track-color, #424242)}.mdc-switch:enabled .mdc-switch__track::before{background:#e0e0e0;background:var(--mdc-switch-unselected-track-color, #e0e0e0)}.mdc-switch:enabled:hover:not(:focus):not(:active) .mdc-switch__track::before{background:#e0e0e0;background:var(--mdc-switch-unselected-hover-track-color, #e0e0e0)}.mdc-switch:enabled:focus:not(:active) .mdc-switch__track::before{background:#e0e0e0;background:var(--mdc-switch-unselected-focus-track-color, #e0e0e0)}.mdc-switch:enabled:active .mdc-switch__track::before{background:#e0e0e0;background:var(--mdc-switch-unselected-pressed-track-color, #e0e0e0)}.mdc-switch:disabled .mdc-switch__track::before{background:#424242;background:var(--mdc-switch-disabled-unselected-track-color, #424242)}.mdc-switch .mdc-switch__track{border-radius:7px;border-radius:var(--mdc-switch-track-shape, 7px)}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-switch:enabled .mdc-switch__shadow{}.mdc-switch:disabled .mdc-switch__shadow{}.mdc-switch:disabled .mdc-switch__handle::after{opacity:1;opacity:var(--mdc-switch-disabled-handle-opacity, 1)}.mdc-switch.mdc-switch--selected:enabled .mdc-switch__icon{fill:ButtonText;fill:var(--mdc-switch-selected-icon-color, ButtonText)}.mdc-switch.mdc-switch--selected:disabled .mdc-switch__icon{fill:GrayText;fill:var(--mdc-switch-disabled-selected-icon-color, GrayText)}.mdc-switch.mdc-switch--unselected:enabled .mdc-switch__icon{fill:ButtonText;fill:var(--mdc-switch-unselected-icon-color, ButtonText)}.mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icon{fill:GrayText;fill:var(--mdc-switch-disabled-unselected-icon-color, GrayText)}.mdc-switch.mdc-switch--selected:disabled .mdc-switch__icons{opacity:1;opacity:var(--mdc-switch-disabled-selected-icon-opacity, 1)}.mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icons{opacity:1;opacity:var(--mdc-switch-disabled-unselected-icon-opacity, 1)}.mdc-switch:disabled .mdc-switch__track{opacity:1;opacity:var(--mdc-switch-disabled-track-opacity, 1)}}:host(limel-switch){isolation:isolate;min-height:1.75rem;display:flex;align-items:flex-start;gap:0.5rem;--mdc-switch-selected-icon-color:transparent;--mdc-switch-unselected-icon-color:transparent;--mdc-switch-disabled-selected-icon-opacity:1;--mdc-switch-disabled-unselected-icon-opacity:1;--mdc-switch-selected-icon-size:0.75rem;--mdc-switch-unselected-icon-size:0.75rem;--mdc-switch-track-height:1.25rem;--mdc-switch-track-shape:var(--mdc-switch-track-height);--mdc-switch-unselected-focus-handle-color:var(\n --lime-elevated-surface-background-color\n );--mdc-switch-selected-focus-handle-color:var(\n --lime-elevated-surface-background-color\n );--mdc-switch-unselected-pressed-handle-color:var(\n --lime-elevated-surface-background-color\n );--mdc-switch-selected-pressed-handle-color:var(\n --lime-elevated-surface-background-color\n );--mdc-switch-unselected-handle-color:var(\n --lime-elevated-surface-background-color\n );--mdc-switch-unselected-hover-handle-color:var(\n --lime-elevated-surface-background-color\n );--mdc-switch-selected-handle-color:var(\n --lime-elevated-surface-background-color\n );--mdc-switch-selected-hover-handle-color:var(\n --lime-elevated-surface-background-color\n );--mdc-switch-unselected-track-color:rgb(var(--contrast-700));--mdc-switch-unselected-focus-track-color:rgb(var(--contrast-800));--mdc-switch-unselected-pressed-track-color:rgb(var(--contrast-800));--mdc-switch-unselected-hover-track-color:rgb(var(--contrast-800));--mdc-switch-selected-focus-track-color:var(\n --lime-primary-color,\n var(--limel-theme-primary-color)\n );--mdc-switch-selected-pressed-track-color:var(\n --lime-primary-color,\n var(--limel-theme-primary-color)\n );--mdc-switch-selected-track-color:var(\n --lime-primary-color,\n var(--limel-theme-primary-color)\n );--mdc-switch-selected-hover-track-color:var(\n --lime-primary-color,\n var(--limel-theme-primary-color)\n );--mdc-switch-handle-elevation:var(--button-shadow-normal);--mdc-switch-disabled-track-opacity:0.4;--mdc-switch-disabled-selected-handle-color:rgb(var(--contrast-1000));--mdc-switch-disabled-unselected-handle-color:rgb(var(--contrast-1000))}.mdc-switch{margin-top:0.25rem}.mdc-switch:hover{--mdc-switch-handle-elevation:var(--button-shadow-hovered)}label{padding-top:0.25rem;font-size:var(--limel-theme-default-font-size)}label:not(.disabled){cursor:pointer}label{font-family:inherit}.mdc-switch.mdc-switch--selected .mdc-switch__handle:after,.mdc-switch.mdc-switch--selected .mdc-switch__handle:before,.mdc-switch.mdc-switch.mdc-switch--unselected .mdc-switch__handle:after,.mdc-switch.mdc-switch.mdc-switch--unselected .mdc-switch__handle:before{transform:scale(0.8)}.mdc-switch .mdc-switch__shadow{transform:scale(0.8)}:host(limel-switch:focus),:host(limel-switch:focus-visible),:host(limel-switch:focus-within){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-switch){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-switch:focus) limel-helper-line,:host(limel-switch:focus-visible) limel-helper-line,:host(limel-switch:focus-within) limel-helper-line,:host(limel-switch:hover) limel-helper-line{will-change:grid-template-rows}"; const Switch = class { constructor(hostRef) { registerInstance(this, hostRef); this.change = createEvent(this, "change", 7); this.helperTextId = createRandomString(); this.renderHelperLine = () => { if (!this.hasHelperText()) { return; } return (h("limel-helper-line", { helperTextId: this.helperTextId, helperText: this.helperText, invalid: this.invalid })); }; this.hasHelperText = () => { return this.helperText !== null && this.helperText !== undefined; }; this.handleClick = (event) => { event.stopPropagation(); this.change.emit(!this.value); }; this.label = undefined; this.disabled = false; this.readonly = false; this.invalid = undefined; this.value = false; this.helperText = undefined; this.readonlyLabels = []; this.fieldId = createRandomString(); } connectedCallback() { this.initialize(); } componentWillLoad() { makeEnterClickable(this.host); } componentDidLoad() { this.initialize(); } initialize() { const element = this.host.shadowRoot.querySelector('.mdc-switch'); if (!element) { return; } this.mdcSwitch = new MDCSwitch(element); } disconnectedCallback() { var _a; removeEnterClickable(this.host); (_a = this.mdcSwitch) === null || _a === void 0 ? void 0 : _a.destroy(); } render() { if (this.readonly) { let icon = 'minus'; if (this.value) { icon = { name: 'ok', color: 'var(--lime-primary-color, var(--limel-theme-primary-color))', }; } return [ h("limel-dynamic-label", { value: this.value, "aria-controls": this.helperText ? this.helperTextId : undefined, defaultLabel: { text: this.label, icon: icon }, labels: this.readonlyLabels }), this.renderHelperLine(), ]; } return [ h("button", { id: this.fieldId, class: { 'mdc-switch': true, 'mdc-switch--unselected': !this.value, 'mdc-switch--selected': this.value, }, type: "button", role: "switch", "aria-checked": this.value, disabled: this.disabled, onClick: this.handleClick, "aria-controls": this.helperText ? this.helperTextId : undefined }, h("div", { class: "mdc-switch__track" }), h("div", { class: "mdc-switch__handle-track" }, h("div", { class: "mdc-switch__handle" }, h("div", { class: "mdc-switch__shadow" }, h("div", { class: "mdc-elevation-overlay" })), h("div", { class: "mdc-switch__ripple" }), h("div", { class: "mdc-switch__icons" }, h("svg", { class: "mdc-switch__icon mdc-switch__icon--on", viewBox: "0 0 24 24" }, h("path", { d: "M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z" })), h("svg", { class: "mdc-switch__icon mdc-switch__icon--off", viewBox: "0 0 24 24" }, h("path", { d: "M20 13H4v-2h16v2z" })))))), h("label", { class: `${this.disabled ? 'disabled' : ''}`, htmlFor: this.fieldId }, this.label), this.renderHelperLine(), ]; } valueWatcher(newValue) { if (!this.mdcSwitch) { return; } this.mdcSwitch.selected = newValue; } get host() { return getElement(this); } static get watchers() { return { "value": ["valueWatcher"] }; } }; Switch.style = switchCss; export { Switch as limel_switch }; //# sourceMappingURL=limel-switch.entry.js.map