@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
134 lines (128 loc) • 8.6 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-8313e72a.js');
const dom = require('./dom-117fbac1.js');
const form = require('./form-432ae178.js');
const guid = require('./guid-4637ad8f.js');
const key = require('./key-f470de4c.js');
const calciteSwitchCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host([scale=s]) .track{width:1.5rem;height:0.75rem}:host([scale=s]) .handle{width:0.5rem;height:0.5rem}:host([scale=m]) .track{width:2rem;height:1rem}:host([scale=m]) .handle{width:0.75rem;height:0.75rem}:host([scale=l]) .track{width:3rem;height:1.5rem}:host([scale=l]) .handle{width:1.25rem;height:1.25rem}:host{display:inline-block;position:relative;width:auto;cursor:pointer;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;tap-highlight-color:transparent}:host([disabled]){opacity:var(--calcite-ui-opacity-disabled);pointer-events:none;cursor:default}:host{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;width:auto}:host(:focus){outline:2px solid var(--calcite-ui-brand);outline-offset:2px}.track{position:relative;display:inline-block;vertical-align:top;background-color:var(--calcite-ui-foreground-2);border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-2);-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:none;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);border-radius:9999px}.handle{position:absolute;display:block;right:auto;background-color:var(--calcite-ui-foreground-1);border-width:2px;border-style:solid;border-color:var(--calcite-ui-border-input);-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);border-radius:9999px;pointer-events:none;top:-1px;left:-1px}:host(:hover) .handle,:host(:focus) .handle{border-color:var(--calcite-ui-brand);-webkit-box-shadow:0 0 0 1px var(--calcite-ui-brand);box-shadow:0 0 0 1px var(--calcite-ui-brand);right:auto}:host([switched]) .track{background-color:var(--calcite-ui-brand);border-color:var(--calcite-ui-brand)}:host([switched]) .handle{left:auto;border-color:var(--calcite-ui-brand);right:-1px}:host([switched]:hover) .track{background-color:var(--calcite-ui-brand);border-color:var(--calcite-ui-brand)}:host([switched]:hover) .handle{border-color:var(--calcite-ui-brand);-webkit-box-shadow:0 0 0 1px var(--calcite-ui-brand);box-shadow:0 0 0 1px var(--calcite-ui-brand)}.calcite--rtl .handle{left:auto;right:-1px}:host([switched]) .calcite--rtl .handle{right:auto;left:-1px}:host([switched]:active) .calcite--rtl .handle{right:auto;left:-1px}:host([switched]:focus) .calcite--rtl .handle{right:auto;left:-1px}";
const CalciteSwitch = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.calciteSwitchChange = index.createEvent(this, "calciteSwitchChange", 7);
//--------------------------------------------------------------------------
//
// Properties
//
//--------------------------------------------------------------------------
/** True if the switch is disabled */
this.disabled = false;
/** The scale of the switch */
this.scale = "m";
/** True if the switch is initially on */
this.switched = false;
//--------------------------------------------------------------------------
//
// Private Properties
//
//--------------------------------------------------------------------------
this.inputEl = document.createElement("input");
}
disabledWatcher(newDisabled) {
this.inputEl.disabled = newDisabled;
this.tabindex = newDisabled ? -1 : 0;
}
nameChanged(newName) {
this.inputEl.name = newName;
}
switchedWatcher(newSwitched) {
this.inputEl.checked = newSwitched;
}
//--------------------------------------------------------------------------
//
// Public Methods
//
//--------------------------------------------------------------------------
async setFocus() {
dom.focusElement(this.inputEl);
}
//--------------------------------------------------------------------------
//
// Private Methods
//
//--------------------------------------------------------------------------
setupInput() {
this.switched && this.inputEl.setAttribute("checked", "");
this.inputEl.disabled = this.disabled;
this.inputEl.id = `${this.guid}-input`;
this.inputEl.name = this.name;
this.inputEl.style.cssText = form.hiddenInputStyle;
this.inputEl.type = "checkbox";
if (this.value) {
this.inputEl.value = this.value != null ? this.value.toString() : "";
}
this.el.appendChild(this.inputEl);
}
toggle() {
this.switched = !this.switched;
this.calciteSwitchChange.emit({
switched: this.switched
});
}
//--------------------------------------------------------------------------
//
// Event Listeners
//
//--------------------------------------------------------------------------
handleLabelFocus(e) {
if (!this.disabled &&
!this.el.contains(e.detail.interactedEl) &&
dom.hasLabel(e.detail.labelEl, this.el)) {
this.el.focus();
}
else {
return;
}
}
onClick(e) {
// prevent duplicate click events that occur
// when the component is wrapped in a label and checkbox is clicked
if ((!this.disabled && this.el.closest("label") && e.target === this.inputEl) ||
(!this.el.closest("label") && e.target === this.el)) {
this.toggle();
}
}
keyDownHandler(e) {
const key$1 = key.getKey(e.key);
if (!this.disabled && (key$1 === " " || key$1 === "Enter")) {
this.toggle();
}
}
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
componentWillLoad() {
this.guid = this.el.id || `calcite-switch-${guid.guid()}`;
this.tabindex = this.el.getAttribute("tabindex") || this.disabled ? -1 : 0;
this.setupInput();
}
// --------------------------------------------------------------------------
//
// Render Methods
//
// --------------------------------------------------------------------------
render() {
const dir = dom.getElementDir(this.el);
return (index.h(index.Host, { tabindex: this.tabindex }, index.h("div", { "aria-checked": this.switched.toString(), class: { container: true, [dom.CSS_UTILITY.rtl]: dir === "rtl" } }, index.h("div", { class: "track" }, index.h("div", { class: "handle" })))));
}
get el() { return index.getElement(this); }
static get watchers() { return {
"disabled": ["disabledWatcher"],
"name": ["nameChanged"],
"switched": ["switchedWatcher"]
}; }
};
CalciteSwitch.style = calciteSwitchCss;
exports.calcite_switch = CalciteSwitch;