@limetech/lime-elements 35.0.0-next.7 → 35.0.0

package/dist/cjs/limel-switch.cjs.entry.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e63a89d7.js');
+const index = require('./index-2a28697b.js');
 const randomString = require('./random-string-4c3b7f1c.js');
-const component = require('./component-f532119f.js');
-const component$1 = require('./component-2faaa141.js');
-const ponyfill = require('./ponyfill-98ca4766.js');
+const component = require('./component-67144c1c.js');
+const component$1 = require('./component-cf490570.js');
+require('./ponyfill-98ca4766.js');
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -48,38 +48,237 @@ var __assign = function() {
         return t;
     };
     return __assign.apply(this, arguments);
-};
-
-function __read(o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-}
-
-function __spreadArray(to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || from);
+};
+
+/**
+ * @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 = component.__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 = component.__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 2018 Google Inc.
+ * 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
@@ -99,26 +298,124 @@ function __spreadArray(to, from, pack) {
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */
-/** CSS classes used by the switch. */
-var cssClasses = {
-    /** Class used for a switch that is in the "checked" (on) position. */
-    CHECKED: 'mdc-switch--checked',
-    /** Class used for a switch that is disabled. */
-    DISABLED: 'mdc-switch--disabled',
-};
-/** String constants used by the switch. */
-var strings = {
-    /** Aria attribute for checked or unchecked state of switch */
-    ARIA_CHECKED_ATTR: 'aria-checked',
-    /** A CSS selector used to locate the native HTML control for the switch.  */
-    NATIVE_CONTROL_SELECTOR: '.mdc-switch__native-control',
-    /** A CSS selector used to locate the ripple surface element for the switch. */
-    RIPPLE_SURFACE_SELECTOR: '.mdc-switch__thumb-underlay',
-};
+var MDCObserverFoundation = /** @class */ (function (_super) {
+    component.__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 = component.__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 = component.__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 = component.__values(component.__spreadArray([], component.__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;
+}(component.MDCFoundation));
 
 /**
  * @license
- * Copyright 2018 Google Inc.
+ * 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
@@ -138,81 +435,116 @@ var strings = {
  * 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) {
-        return _super.call(this, __assign(__assign({}, MDCSwitchFoundation.defaultAdapter), adapter)) || this;
+        var _this = _super.call(this, adapter) || this;
+        _this.handleClick = _this.handleClick.bind(_this);
+        return _this;
     }
-    Object.defineProperty(MDCSwitchFoundation, "strings", {
-        /** The string constants used by the switch. */
-        get: function () {
-            return strings;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCSwitchFoundation, "cssClasses", {
-        /** The CSS classes used by the switch. */
-        get: function () {
-            return cssClasses;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCSwitchFoundation, "defaultAdapter", {
-        /** The default Adapter for the switch. */
-        get: function () {
-            return {
-                addClass: function () { return undefined; },
-                removeClass: function () { return undefined; },
-                setNativeControlChecked: function () { return undefined; },
-                setNativeControlDisabled: function () { return undefined; },
-                setNativeControlAttr: function () { return undefined; },
-            };
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /** Sets the checked state of the switch. */
-    MDCSwitchFoundation.prototype.setChecked = function (checked) {
-        this.adapter.setNativeControlChecked(checked);
-        this.updateAriaChecked_(checked);
-        this.updateCheckedStyling_(checked);
+    /**
+     * Initializes the foundation and starts observing state changes.
+     */
+    MDCSwitchFoundation.prototype.init = function () {
+        this.observe(this.adapter.state, {
+            disabled: this.stopProcessingIfDisabled,
+            processing: this.stopProcessingIfDisabled,
+        });
     };
-    /** Sets the disabled state of the switch. */
-    MDCSwitchFoundation.prototype.setDisabled = function (disabled) {
-        this.adapter.setNativeControlDisabled(disabled);
-        if (disabled) {
-            this.adapter.addClass(cssClasses.DISABLED);
+    /**
+     * 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;
         }
-        else {
-            this.adapter.removeClass(cssClasses.DISABLED);
+        this.adapter.state.selected = !this.adapter.state.selected;
+    };
+    MDCSwitchFoundation.prototype.stopProcessingIfDisabled = function () {
+        if (this.adapter.state.disabled) {
+            this.adapter.state.processing = false;
         }
     };
-    /** Handles the change event for the switch native control. */
-    MDCSwitchFoundation.prototype.handleChange = function (evt) {
-        var nativeControl = evt.target;
-        this.updateAriaChecked_(nativeControl.checked);
-        this.updateCheckedStyling_(nativeControl.checked);
+    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);
     };
-    /** Updates the styling of the switch based on its checked state. */
-    MDCSwitchFoundation.prototype.updateCheckedStyling_ = function (checked) {
-        if (checked) {
-            this.adapter.addClass(cssClasses.CHECKED);
+    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(cssClasses.CHECKED);
+            this.adapter.removeClass(className);
         }
     };
-    MDCSwitchFoundation.prototype.updateAriaChecked_ = function (checked) {
-        this.adapter.setNativeControlAttr(strings.ARIA_CHECKED_ATTR, "" + !!checked);
-    };
-    return MDCSwitchFoundation;
-}(component.MDCFoundation));
+    return MDCSwitchRenderFoundation;
+}(MDCSwitchFoundation));
 
 /**
  * @license
- * Copyright 2018 Google Inc.
+ * 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
@@ -232,112 +564,77 @@ var MDCSwitchFoundation = /** @class */ (function (_super) {
  * 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() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.ripple_ = _this.createRipple_();
+    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.destroy = function () {
-        _super.prototype.destroy.call(this);
-        this.ripple_.destroy();
-        this.nativeControl_.removeEventListener('change', this.changeHandler_);
+    MDCSwitch.prototype.initialize = function () {
+        this.ripple = new component$1.MDCRipple(this.root, this.createRippleFoundation());
     };
     MDCSwitch.prototype.initialSyncWithDOM = function () {
-        var _this = this;
-        this.changeHandler_ = function () {
-            var _a;
-            var args = [];
-            for (var _i = 0; _i < arguments.length; _i++) {
-                args[_i] = arguments[_i];
-            }
-            return (_a = _this.foundation).handleChange.apply(_a, __spreadArray([], __read(args)));
-        };
-        this.nativeControl_.addEventListener('change', this.changeHandler_);
-        // Sometimes the checked state of the input element is saved in the history.
-        // The switch styling should match the checked state of the input element.
-        // Do an initial sync between the native control and the foundation.
-        this.checked = this.checked;
+        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;
-        // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
-        // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
-        var adapter = {
-            addClass: function (className) { return _this.root.classList.add(className); },
-            removeClass: function (className) { return _this.root.classList.remove(className); },
-            setNativeControlChecked: function (checked) { return _this.nativeControl_.checked =
-                checked; },
-            setNativeControlDisabled: function (disabled) { return _this.nativeControl_.disabled =
-                disabled; },
-            setNativeControlAttr: function (attr, value) {
-                return _this.nativeControl_.setAttribute(attr, value);
+        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,
         };
-        return new MDCSwitchFoundation(adapter);
     };
-    Object.defineProperty(MDCSwitch.prototype, "ripple", {
-        get: function () {
-            return this.ripple_;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCSwitch.prototype, "checked", {
-        get: function () {
-            return this.nativeControl_.checked;
-        },
-        set: function (checked) {
-            this.foundation.setChecked(checked);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCSwitch.prototype, "disabled", {
-        get: function () {
-            return this.nativeControl_.disabled;
-        },
-        set: function (disabled) {
-            this.foundation.setDisabled(disabled);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    MDCSwitch.prototype.createRipple_ = function () {
+    MDCSwitch.prototype.createRippleFoundation = function () {
+        return new component$1.MDCRippleFoundation(this.createRippleAdapter());
+    };
+    MDCSwitch.prototype.createRippleAdapter = function () {
         var _this = this;
-        var RIPPLE_SURFACE_SELECTOR = MDCSwitchFoundation.strings.RIPPLE_SURFACE_SELECTOR;
-        var rippleSurface = this.root.querySelector(RIPPLE_SURFACE_SELECTOR);
-        // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
-        // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
-        var adapter = __assign(__assign({}, component$1.MDCRipple.createAdapter(this)), { addClass: function (className) { return rippleSurface.classList.add(className); }, computeBoundingRect: function () { return rippleSurface.getBoundingClientRect(); }, deregisterInteractionHandler: function (evtType, handler) {
-                _this.nativeControl_.removeEventListener(evtType, handler, component$1.applyPassive());
-            }, isSurfaceActive: function () { return ponyfill.matches(_this.nativeControl_, ':active'); }, isUnbounded: function () { return true; }, registerInteractionHandler: function (evtType, handler) {
-                _this.nativeControl_.addEventListener(evtType, handler, component$1.applyPassive());
-            }, removeClass: function (className) {
-                rippleSurface.classList.remove(className);
-            }, updateCssVariable: function (varName, value) {
-                rippleSurface.style.setProperty(varName, value);
-            } });
-        return new component$1.MDCRipple(this.root, new component$1.MDCRippleFoundation(adapter));
+        return __assign(__assign({}, component$1.MDCRipple.createAdapter(this)), { computeBoundingRect: function () { return _this.rippleElement.getBoundingClientRect(); }, isUnbounded: function () { return true; } });
     };
-    Object.defineProperty(MDCSwitch.prototype, "nativeControl_", {
-        get: function () {
-            var NATIVE_CONTROL_SELECTOR = MDCSwitchFoundation.strings.NATIVE_CONTROL_SELECTOR;
-            return this.root.querySelector(NATIVE_CONTROL_SELECTOR);
-        },
-        enumerable: false,
-        configurable: true
-    });
     return MDCSwitch;
 }(component.MDCComponent));
 
-const switchCss = ":host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      var(--lime-text-primary-on-background-color)\n  )}.mdc-switch__thumb-underlay{left:-14px;right:initial;top:-17px;width:48px;height:48px}[dir=rtl] .mdc-switch__thumb-underlay,.mdc-switch__thumb-underlay[dir=rtl]{left:initial;right:-14px}.mdc-switch__native-control{width:64px;height:48px}.mdc-switch{display:inline-block;position:relative;outline:none;user-select:none}.mdc-switch.mdc-switch--checked .mdc-switch__track{background-color:#575756;background-color:var(--mdc-theme-secondary, #575756)}.mdc-switch.mdc-switch--checked .mdc-switch__thumb{background-color:#575756;background-color:var(--mdc-theme-secondary, #575756);border-color:#575756;border-color:var(--mdc-theme-secondary, #575756)}.mdc-switch:not(.mdc-switch--checked) .mdc-switch__track{background-color:#000;background-color:var(--mdc-theme-on-surface, #000)}.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb{background-color:#fff;background-color:var(--mdc-theme-surface, #fff);border-color:#fff;border-color:var(--mdc-theme-surface, #fff)}.mdc-switch__native-control{left:0;right:initial;position:absolute;top:0;margin:0;opacity:0;cursor:pointer;pointer-events:auto;transition:transform 90ms cubic-bezier(0.4, 0, 0.2, 1)}[dir=rtl] .mdc-switch__native-control,.mdc-switch__native-control[dir=rtl]{left:initial;right:0}.mdc-switch__track{box-sizing:border-box;width:36px;height:14px;border:1px solid transparent;border-radius:7px;opacity:0.38;transition:opacity 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), border-color 90ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-switch__thumb-underlay{display:flex;position:absolute;align-items:center;justify-content:center;transform:translateX(0);transition:transform 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), border-color 90ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-switch__thumb{box-shadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);box-sizing:border-box;width:20px;height:20px;border:10px solid;border-radius:50%;pointer-events:none;z-index:1}.mdc-switch--checked .mdc-switch__track{opacity:0.54}.mdc-switch--checked .mdc-switch__thumb-underlay{transform:translateX(16px)}[dir=rtl] .mdc-switch--checked .mdc-switch__thumb-underlay,.mdc-switch--checked .mdc-switch__thumb-underlay[dir=rtl]{transform:translateX(-16px)}.mdc-switch--checked .mdc-switch__native-control{transform:translateX(-16px)}[dir=rtl] .mdc-switch--checked .mdc-switch__native-control,.mdc-switch--checked .mdc-switch__native-control[dir=rtl]{transform:translateX(16px)}.mdc-switch--disabled{opacity:0.38;pointer-events:none}.mdc-switch--disabled .mdc-switch__thumb{border-width:1px}.mdc-switch--disabled .mdc-switch__native-control{cursor:default;pointer-events:none}@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:not(.mdc-switch--checked) .mdc-switch__thumb-underlay::before,.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay::after{background-color:#9e9e9e;background-color:var(--mdc-ripple-color, #9e9e9e)}.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay:hover::before,.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay.mdc-ripple-surface--hover::before{opacity:0.08;opacity:var(--mdc-ripple-hover-opacity, 0.08)}.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay.mdc-ripple-upgraded--background-focused::before,.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.24;opacity:var(--mdc-ripple-focus-opacity, 0.24)}.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.24;opacity:var(--mdc-ripple-press-opacity, 0.24)}.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.24)}.mdc-switch__thumb-underlay{--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}.mdc-switch__thumb-underlay::before,.mdc-switch__thumb-underlay::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-switch__thumb-underlay::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-switch__thumb-underlay::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-switch__thumb-underlay.mdc-ripple-upgraded::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-switch__thumb-underlay.mdc-ripple-upgraded::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-switch__thumb-underlay.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-switch__thumb-underlay.mdc-ripple-upgraded--foreground-activation::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-switch__thumb-underlay.mdc-ripple-upgraded--foreground-deactivation::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__thumb-underlay::before,.mdc-switch__thumb-underlay::after{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-switch__thumb-underlay.mdc-ripple-upgraded::before,.mdc-switch__thumb-underlay.mdc-ripple-upgraded::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__thumb-underlay.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-switch__thumb-underlay::before,.mdc-switch__thumb-underlay::after{background-color:#575756;background-color:var(--mdc-ripple-color, var(--mdc-theme-secondary, #575756))}.mdc-switch__thumb-underlay:hover::before,.mdc-switch__thumb-underlay.mdc-ripple-surface--hover::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-switch__thumb-underlay.mdc-ripple-upgraded--background-focused::before,.mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-switch__thumb-underlay.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}:host{display:inline-flex;align-items:center}.mdc-switch{margin-right:0.5rem}.mdc-switch.mdc-switch--checked .mdc-switch__track{background-color:#26a69a;background-color:var(--mdc-theme-primary, #26a69a)}.mdc-switch.mdc-switch--checked .mdc-switch__thumb{background-color:#26a69a;background-color:var(--mdc-theme-primary, #26a69a);border-color:#26a69a;border-color:var(--mdc-theme-primary, #26a69a)}.mdc-switch.mdc-switch--checked .mdc-switch__thumb-underlay::before,.mdc-switch.mdc-switch--checked .mdc-switch__thumb-underlay::after{background-color:#26a69a;background-color:var(--mdc-ripple-color, var(--mdc-theme-primary, #26a69a))}.mdc-switch.mdc-switch--checked .mdc-switch__thumb-underlay:hover::before,.mdc-switch.mdc-switch--checked .mdc-switch__thumb-underlay.mdc-ripple-surface--hover::before{opacity:0.08;opacity:var(--mdc-ripple-hover-opacity, 0.08)}.mdc-switch.mdc-switch--checked .mdc-switch__thumb-underlay.mdc-ripple-upgraded--background-focused::before,.mdc-switch.mdc-switch--checked .mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.24;opacity:var(--mdc-ripple-focus-opacity, 0.24)}.mdc-switch.mdc-switch--checked .mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-switch.mdc-switch--checked .mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.24;opacity:var(--mdc-ripple-press-opacity, 0.24)}.mdc-switch.mdc-switch--checked .mdc-switch__thumb-underlay.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.24)}label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.8125rem;font-size:var(--mdc-typography-body2-font-size, 0.8125rem);line-height:1.625rem;line-height:var(--mdc-typography-body2-line-height, 1.625rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight, 400);letter-spacing:0.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, 0.0178571429em);text-decoration:inherit;text-decoration:var(--mdc-typography-body2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform, inherit);cursor:pointer}label.disabled{cursor:not-allowed;pointer-events:none;opacity:0.4}.mdc-switch.lime-switch--readonly{opacity:1}.mdc-switch.lime-switch--readonly .mdc-switch__track{opacity:1;border:none}.mdc-switch.lime-switch--readonly .mdc-switch__thumb{background-color:transparent !important;border:none;box-shadow:none}.mdc-switch.lime-switch--readonly .mdc-switch__thumb:after{content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;opacity:0.8;background-repeat:no-repeat;background-position:center;background-size:0.5rem}.mdc-switch.lime-switch--readonly.mdc-switch--checked .mdc-switch__track{background-color:var(--mdc-theme-primary)}.mdc-switch.lime-switch--readonly.mdc-switch--checked .mdc-switch__thumb:after{background-image:url(\"data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='none' stroke='rgb(255,255,255)' stroke-width='7' stroke-miterlimit='10' d='M29 7L11 25l-8-8'/></svg>\")}.mdc-switch.lime-switch--readonly:not(.mdc-switch--checked) .mdc-switch__track{background-color:rgb(var(--color-red-default))}.mdc-switch.lime-switch--readonly:not(.mdc-switch--checked) .mdc-switch__thumb:after{background-image:url(\"data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='none' stroke='rgb(255,255,255)' stroke-width='7' stroke-miterlimit='10' d='M8 8l16 16M24 8L8 24'/></svg>\")}.mdc-switch.lime-switch--readonly+label.disabled{cursor:default;opacity:1}";
+const switchCss = ":host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      var(--lime-text-primary-on-background-color)\n  )}.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:#26a69a;background:var(--mdc-switch-selected-handle-color, var(--mdc-theme-primary, #26a69a))}.mdc-switch.mdc-switch--selected:enabled:hover:not(:focus):not(:active) .mdc-switch__handle::after{background:#26534f;background:var(--mdc-switch-selected-hover-handle-color, #26534f)}.mdc-switch.mdc-switch--selected:enabled:focus:not(:active) .mdc-switch__handle::after{background:#26534f;background:var(--mdc-switch-selected-focus-handle-color, #26534f)}.mdc-switch.mdc-switch--selected:enabled:active .mdc-switch__handle::after{background:#26534f;background:var(--mdc-switch-selected-pressed-handle-color, #26534f)}.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:#26a69a;background-color:var(--mdc-switch-selected-hover-state-layer-color, var(--mdc-theme-primary, #26a69a))}.mdc-switch.mdc-switch--selected:enabled:focus .mdc-switch__ripple::before,.mdc-switch.mdc-switch--selected:enabled:focus .mdc-switch__ripple::after{background-color:#26a69a;background-color:var(--mdc-switch-selected-focus-state-layer-color, var(--mdc-theme-primary, #26a69a))}.mdc-switch.mdc-switch--selected:enabled:active .mdc-switch__ripple::before,.mdc-switch.mdc-switch--selected:enabled:active .mdc-switch__ripple::after{background-color:#26a69a;background-color:var(--mdc-switch-selected-pressed-state-layer-color, var(--mdc-theme-primary, #26a69a))}.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:#c1f1ec;background:var(--mdc-switch-selected-track-color, #c1f1ec)}.mdc-switch:enabled:hover:not(:focus):not(:active) .mdc-switch__track::after{background:#c1f1ec;background:var(--mdc-switch-selected-hover-track-color, #c1f1ec)}.mdc-switch:enabled:focus:not(:active) .mdc-switch__track::after{background:#c1f1ec;background:var(--mdc-switch-selected-focus-track-color, #c1f1ec)}.mdc-switch:enabled:active .mdc-switch__track::after{background:#c1f1ec;background:var(--mdc-switch-selected-pressed-track-color, #c1f1ec)}.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{display:inline-flex;align-items:center;--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{margin-right:0.5rem}label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.8125rem;font-size:var(--mdc-typography-body2-font-size, 0.8125rem);line-height:1.625rem;line-height:var(--mdc-typography-body2-line-height, 1.625rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight, 400);letter-spacing:0.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, 0.0178571429em);text-decoration:inherit;text-decoration:var(--mdc-typography-body2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform, inherit);cursor:pointer}label.disabled{cursor:not-allowed;pointer-events:none;opacity:0.4}.mdc-switch.lime-switch--readonly{--mdc-switch-disabled-selected-track-color:var(--mdc-theme-primary);--mdc-switch-disabled-unselected-track-color:rgb(\n      var(--color-red-default)\n  );--mdc-switch-handle-surface-color:transparent;--mdc-switch-disabled-selected-handle-color:transparent;--mdc-switch-disabled-unselected-handle-color:transparent;--mdc-switch-disabled-track-opacity:1}.mdc-switch.lime-switch--readonly+label.disabled{cursor:default;opacity:1}";
 
-let Switch = class {
+const Switch = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.change = index.createEvent(this, "change", 7);
@@ -359,9 +656,9 @@ let Switch = class {
      */
     this.value = false;
     this.fieldId = randomString.createRandomString();
-    this.onChange = (event) => {
+    this.handleClick = (event) => {
       event.stopPropagation();
-      this.change.emit(event.target.checked);
+      this.change.emit(!this.value);
     };
   }
   connectedCallback() {
@@ -383,21 +680,20 @@ let Switch = class {
   }
   render() {
     return [
-      index.h("div", { class: {
+      index.h("button", { id: this.fieldId, class: {
           'mdc-switch': true,
-          'mdc-switch--disabled': this.disabled || this.readonly,
           'lime-switch--readonly': this.readonly,
-        } }, index.h("div", { class: "mdc-switch__track" }), index.h("div", { class: "mdc-switch__thumb-underlay" }, index.h("div", { class: "mdc-switch__thumb" }, index.h("input", { type: "checkbox", class: "mdc-switch__native-control", id: this.fieldId, role: "switch", onChange: this.onChange, disabled: this.disabled || this.readonly, checked: this.value })))),
+          'mdc-switch--unselected': !this.value,
+          'mdc-switch--selected': this.value,
+        }, type: "button", role: "switch", "aria-checked": this.value, disabled: this.disabled || this.readonly, onClick: this.handleClick }, index.h("div", { class: "mdc-switch__track" }), index.h("div", { class: "mdc-switch__handle-track" }, index.h("div", { class: "mdc-switch__handle" }, index.h("div", { class: "mdc-switch__shadow" }, index.h("div", { class: "mdc-elevation-overlay" })), index.h("div", { class: "mdc-switch__ripple" }), index.h("div", { class: "mdc-switch__icons" }, index.h("svg", { class: "mdc-switch__icon mdc-switch__icon--on", viewBox: "0 0 24 24" }, index.h("path", { d: "M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z" })), index.h("svg", { class: "mdc-switch__icon mdc-switch__icon--off", viewBox: "0 0 24 24" }, index.h("path", { d: "M20 13H4v-2h16v2z" })))))),
       index.h("label", { class: `${this.disabled || this.readonly ? 'disabled' : ''}`, htmlFor: this.fieldId }, this.label),
     ];
   }
-  valueWatcher(newValue, oldValue) {
+  valueWatcher(newValue) {
     if (!this.mdcSwitch) {
       return;
     }
-    if (newValue !== oldValue) {
-      this.mdcSwitch.checked = newValue;
-    }
+    this.mdcSwitch.selected = newValue;
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {