@wavelengthusaf/web-components 1.13.0 → 1.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.cjs +123 -1
- package/dist/cjs/index.d.cts +22 -1
- package/dist/esm/index.d.ts +22 -1
- package/dist/esm/index.js +122 -0
- package/package.json +1 -1
package/dist/cjs/index.cjs
CHANGED
|
@@ -6783,6 +6783,128 @@ if (!customElements.get("wavelength-search")) {
|
|
|
6783
6783
|
customElements.define("wavelength-search", WavelengthSearch);
|
|
6784
6784
|
}
|
|
6785
6785
|
|
|
6786
|
+
// src/web-components/wavelength-switch.template.html
|
|
6787
|
+
var wavelength_switch_template_default = '<style>\n :host {\n display: block;\n --font-color: #333;\n --font-size: 20px;\n --font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;\n --switch-color: #2196f3;\n --label-font: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;\n\n /* Variable-based sizing */\n --container-width: 60px;\n --container-height: 34px;\n --track-height: 22px;\n --knob-size: 28px;\n\n /* Internal Calculations */\n --track-top: calc((var(--container-height) - var(--track-height)) / 2);\n --knob-top: calc((var(--container-height) - var(--knob-size)) / 2);\n --knob-translate: calc(var(--container-width) - var(--knob-size));\n }\n\n :host([size="small"]) {\n --container-width: 40px;\n --container-height: 24px;\n --track-height: 14px;\n --knob-size: 20px;\n --font-size: 16px;\n }\n\n :host([size="large"]) {\n --container-width: 80px;\n --container-height: 48px;\n --track-height: 30px;\n --knob-size: 40px;\n --font-size: 24px;\n }\n\n /* Switch Base Styles */\n .switch {\n position: relative;\n display: inline-block;\n width: var(--container-width);\n height: var(--container-height);\n }\n\n .switch input {\n opacity: 0;\n width: 0;\n height: 0;\n }\n\n /* Slider (The Track) */\n .slider {\n position: absolute;\n cursor: pointer;\n top: var(--track-top);\n left: 0;\n right: 0;\n bottom: var(--track-top);\n background-color: #ccc;\n -webkit-transition: 0.4s;\n transition: 0.4s;\n border-radius: var(--track-height);\n }\n\n .slider:hover {\n cursor: pointer;\n }\n\n /* Handle (The Slider Portion) */\n .slider:before {\n position: absolute;\n content: "";\n height: var(--knob-size);\n width: var(--knob-size);\n left: 0;\n top: calc((var(--track-height) - var(--knob-size)) / 2);\n background-color: white;\n -webkit-transition: 0.4s;\n transition: 0.4s;\n border-radius: var(--knob-size);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n z-index: 2;\n }\n\n .slider:hover:before {\n box-shadow:\n 0 2px 4px rgba(0, 0, 0, 0.3),\n 0 0 0 8px rgba(0, 0, 0, 0.1);\n }\n\n /* Input Checked State Styles */\n input:checked + .slider {\n background-color: var(--switch-color);\n }\n\n input:focus + .slider {\n box-shadow: 0 0 1px #2196f3;\n }\n\n input:checked + .slider:before {\n -webkit-transform: translateX(var(--knob-translate));\n -ms-transform: translateX(var(--knob-translate));\n transform: translateX(var(--knob-translate));\n }\n\n input:checked + .slider:hover:before {\n box-shadow:\n 0 2px 4px rgba(0, 0, 0, 0.3),\n 0 0 0 8px color-mix(in srgb, var(--switch-color), transparent 80%);\n }\n\n /* Disabled State Styles */\n input:disabled + .slider {\n background-color: #e0e0e0;\n cursor: not-allowed;\n }\n\n input:disabled + .slider:before {\n background-color: #f5f5f5;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n }\n\n input:disabled + .slider:hover:before {\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n }\n\n input:disabled:checked + .slider {\n background-color: color-mix(in srgb, var(--switch-color), white 50%);\n opacity: 0.8;\n }\n\n /* Label Styles */\n .label {\n font-size: var(--font-size);\n font-weight: 500;\n color: var(--font-color);\n font-family: var(--label-font);\n }\n\n :host([disabled]) .label {\n color: #9e9e9e;\n }\n\n .flex-container {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n }\n</style>\n\n<div class="flex-container">\n <span id="label-span" class="label"></span>\n <label class="switch">\n <input type="checkbox" aria-labelledby="label" />\n <div class="slider"></div>\n </label>\n</div>\n';
|
|
6788
|
+
|
|
6789
|
+
// src/web-components/wavelength-switch.ts
|
|
6790
|
+
var WavelengthSwitch = class extends HTMLElement {
|
|
6791
|
+
static get observedAttributes() {
|
|
6792
|
+
return ["checked", "label", "label-placement", "size", "disabled", "color", "label-font", "value"];
|
|
6793
|
+
}
|
|
6794
|
+
constructor() {
|
|
6795
|
+
super();
|
|
6796
|
+
this.shadow = this.attachShadow({ mode: "open" });
|
|
6797
|
+
this.shadow.innerHTML = wavelength_switch_template_default;
|
|
6798
|
+
}
|
|
6799
|
+
get checked() {
|
|
6800
|
+
return this.input.checked;
|
|
6801
|
+
}
|
|
6802
|
+
set checked(value) {
|
|
6803
|
+
this.input.checked = !!value;
|
|
6804
|
+
this.toggleAttribute("checked", this.input.checked);
|
|
6805
|
+
}
|
|
6806
|
+
connectedCallback() {
|
|
6807
|
+
this.input = this.shadow.querySelector("input");
|
|
6808
|
+
this.labelElement = this.shadow.querySelector(".label");
|
|
6809
|
+
this.flexContainer = this.shadow.querySelector(".flex-container");
|
|
6810
|
+
this._updateLabel();
|
|
6811
|
+
this._updateChecked();
|
|
6812
|
+
this._updateDisabled();
|
|
6813
|
+
this._updateColor();
|
|
6814
|
+
this._updateLabelFont();
|
|
6815
|
+
this.input.addEventListener("change", (e) => {
|
|
6816
|
+
this.dispatchEvent(
|
|
6817
|
+
new CustomEvent("wavelength-switch-change", {
|
|
6818
|
+
detail: {
|
|
6819
|
+
checked: e.target.checked,
|
|
6820
|
+
value: this.getAttribute("value")
|
|
6821
|
+
},
|
|
6822
|
+
bubbles: true,
|
|
6823
|
+
composed: true
|
|
6824
|
+
})
|
|
6825
|
+
);
|
|
6826
|
+
});
|
|
6827
|
+
}
|
|
6828
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
6829
|
+
if (oldValue === newValue) return;
|
|
6830
|
+
if (!this.input) return;
|
|
6831
|
+
switch (name) {
|
|
6832
|
+
case "checked":
|
|
6833
|
+
this._updateChecked();
|
|
6834
|
+
break;
|
|
6835
|
+
case "label":
|
|
6836
|
+
this._updateLabel();
|
|
6837
|
+
break;
|
|
6838
|
+
case "disabled":
|
|
6839
|
+
this._updateDisabled();
|
|
6840
|
+
break;
|
|
6841
|
+
case "label-placement":
|
|
6842
|
+
this._updateLabel();
|
|
6843
|
+
break;
|
|
6844
|
+
case "color":
|
|
6845
|
+
this._updateColor();
|
|
6846
|
+
break;
|
|
6847
|
+
case "label-font":
|
|
6848
|
+
this._updateLabelFont();
|
|
6849
|
+
break;
|
|
6850
|
+
case "value":
|
|
6851
|
+
this._updateValue();
|
|
6852
|
+
break;
|
|
6853
|
+
}
|
|
6854
|
+
}
|
|
6855
|
+
disconnectedCallback() {
|
|
6856
|
+
this.input.removeEventListener("change", this._updateChecked);
|
|
6857
|
+
}
|
|
6858
|
+
_updateChecked() {
|
|
6859
|
+
this.input.checked = this.hasAttribute("checked") && this.getAttribute("checked") !== "false";
|
|
6860
|
+
}
|
|
6861
|
+
_updateLabel() {
|
|
6862
|
+
if (this.labelElement) {
|
|
6863
|
+
this.labelElement.textContent = this.getAttribute("label") || "";
|
|
6864
|
+
this.labelElement.style.display = this.hasAttribute("label") ? "block" : "none";
|
|
6865
|
+
}
|
|
6866
|
+
this._updateLabelPlacement();
|
|
6867
|
+
}
|
|
6868
|
+
_updateDisabled() {
|
|
6869
|
+
if (this.input) {
|
|
6870
|
+
this.input.disabled = this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false";
|
|
6871
|
+
}
|
|
6872
|
+
}
|
|
6873
|
+
_updateColor() {
|
|
6874
|
+
if (this.hasAttribute("color")) {
|
|
6875
|
+
this.style.setProperty("--switch-color", this.getAttribute("color") || "");
|
|
6876
|
+
} else {
|
|
6877
|
+
this.style.removeProperty("--switch-color");
|
|
6878
|
+
}
|
|
6879
|
+
}
|
|
6880
|
+
_updateLabelFont() {
|
|
6881
|
+
if (this.hasAttribute("label-font")) {
|
|
6882
|
+
this.style.setProperty("--label-font", this.getAttribute("label-font") || "");
|
|
6883
|
+
} else {
|
|
6884
|
+
this.style.removeProperty("--label-font");
|
|
6885
|
+
}
|
|
6886
|
+
}
|
|
6887
|
+
_updateValue() {
|
|
6888
|
+
if (this.hasAttribute("value")) {
|
|
6889
|
+
this.input.value = this.getAttribute("value") || "";
|
|
6890
|
+
}
|
|
6891
|
+
}
|
|
6892
|
+
_updateLabelPlacement() {
|
|
6893
|
+
const placement = _nullishCoalesce(this.getAttribute("label-placement"), () => ( "left"));
|
|
6894
|
+
const directions = {
|
|
6895
|
+
left: "row",
|
|
6896
|
+
right: "row-reverse",
|
|
6897
|
+
top: "column",
|
|
6898
|
+
bottom: "column-reverse"
|
|
6899
|
+
};
|
|
6900
|
+
this.flexContainer.style.flexDirection = _nullishCoalesce(directions[placement], () => ( "row"));
|
|
6901
|
+
}
|
|
6902
|
+
};
|
|
6903
|
+
if (!customElements.get("wavelength-switch")) {
|
|
6904
|
+
customElements.define("wavelength-switch", WavelengthSwitch);
|
|
6905
|
+
}
|
|
6906
|
+
|
|
6907
|
+
|
|
6786
6908
|
|
|
6787
6909
|
|
|
6788
6910
|
|
|
@@ -6807,7 +6929,7 @@ if (!customElements.get("wavelength-search")) {
|
|
|
6807
6929
|
|
|
6808
6930
|
|
|
6809
6931
|
|
|
6810
|
-
exports.BaseWavelengthInput = BaseWavelengthInput; exports.BaseWavelengthMultiSelectAutocomplete = BaseWavelengthMultiSelectAutocomplete; exports.ChildDataTable = ChildDataTable; exports.SampleComponent = SampleComponent; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthButton = WavelengthButton; exports.WavelengthCheckbox = WavelengthCheckbox; exports.WavelengthDatePicker = WavelengthDatePicker; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthFileDropZone = WavelengthFileDropZone; exports.WavelengthForm = WavelengthForm; exports.WavelengthInput = WavelengthInput; exports.WavelengthManyPlanes = WavelengthManyPlanes; exports.WavelengthMenu = WavelengthMenu; exports.WavelengthMultiSelectAutocomplete = WavelengthMultiSelectAutocomplete; exports.WavelengthNavBar = WavelengthNavBar; exports.WavelengthNotificationPanel = WavelengthNotificationPanel; exports.WavelengthPagination = WavelengthPagination; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthTitleBar = WavelengthTitleBar; exports.WavelengthToolTip = WavelengthToolTip;
|
|
6932
|
+
exports.BaseWavelengthInput = BaseWavelengthInput; exports.BaseWavelengthMultiSelectAutocomplete = BaseWavelengthMultiSelectAutocomplete; exports.ChildDataTable = ChildDataTable; exports.SampleComponent = SampleComponent; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthButton = WavelengthButton; exports.WavelengthCheckbox = WavelengthCheckbox; exports.WavelengthDatePicker = WavelengthDatePicker; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthFileDropZone = WavelengthFileDropZone; exports.WavelengthForm = WavelengthForm; exports.WavelengthInput = WavelengthInput; exports.WavelengthManyPlanes = WavelengthManyPlanes; exports.WavelengthMenu = WavelengthMenu; exports.WavelengthMultiSelectAutocomplete = WavelengthMultiSelectAutocomplete; exports.WavelengthNavBar = WavelengthNavBar; exports.WavelengthNotificationPanel = WavelengthNotificationPanel; exports.WavelengthPagination = WavelengthPagination; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSwitch = WavelengthSwitch; exports.WavelengthTitleBar = WavelengthTitleBar; exports.WavelengthToolTip = WavelengthToolTip;
|
|
6811
6933
|
/*! Bundled license information:
|
|
6812
6934
|
|
|
6813
6935
|
react/cjs/react.production.min.js:
|
package/dist/cjs/index.d.cts
CHANGED
|
@@ -2340,4 +2340,25 @@ declare class WavelengthSearch extends HTMLElement {
|
|
|
2340
2340
|
private handleDocumentClick;
|
|
2341
2341
|
}
|
|
2342
2342
|
|
|
2343
|
-
|
|
2343
|
+
declare class WavelengthSwitch extends HTMLElement {
|
|
2344
|
+
static get observedAttributes(): string[];
|
|
2345
|
+
private shadow;
|
|
2346
|
+
private input;
|
|
2347
|
+
private labelElement;
|
|
2348
|
+
private flexContainer;
|
|
2349
|
+
constructor();
|
|
2350
|
+
get checked(): boolean;
|
|
2351
|
+
set checked(value: boolean);
|
|
2352
|
+
connectedCallback(): void;
|
|
2353
|
+
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
|
|
2354
|
+
disconnectedCallback(): void;
|
|
2355
|
+
private _updateChecked;
|
|
2356
|
+
private _updateLabel;
|
|
2357
|
+
private _updateDisabled;
|
|
2358
|
+
private _updateColor;
|
|
2359
|
+
private _updateLabelFont;
|
|
2360
|
+
private _updateValue;
|
|
2361
|
+
private _updateLabelPlacement;
|
|
2362
|
+
}
|
|
2363
|
+
|
|
2364
|
+
export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, type CheckboxElements, ChildDataTable, SampleComponent, WavelengthBanner, WavelengthButton, WavelengthCheckbox, WavelengthDatePicker, WavelengthDropdown, WavelengthFileDropZone, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMenu, WavelengthMultiSelectAutocomplete, WavelengthNavBar, WavelengthNotificationPanel, WavelengthPagination, WavelengthPlaneTrail, WavelengthProgressBar, WavelengthSearch, WavelengthSnackbar, WavelengthSwitch, WavelengthTitleBar, WavelengthToolTip };
|
package/dist/esm/index.d.ts
CHANGED
|
@@ -2340,4 +2340,25 @@ declare class WavelengthSearch extends HTMLElement {
|
|
|
2340
2340
|
private handleDocumentClick;
|
|
2341
2341
|
}
|
|
2342
2342
|
|
|
2343
|
-
|
|
2343
|
+
declare class WavelengthSwitch extends HTMLElement {
|
|
2344
|
+
static get observedAttributes(): string[];
|
|
2345
|
+
private shadow;
|
|
2346
|
+
private input;
|
|
2347
|
+
private labelElement;
|
|
2348
|
+
private flexContainer;
|
|
2349
|
+
constructor();
|
|
2350
|
+
get checked(): boolean;
|
|
2351
|
+
set checked(value: boolean);
|
|
2352
|
+
connectedCallback(): void;
|
|
2353
|
+
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
|
|
2354
|
+
disconnectedCallback(): void;
|
|
2355
|
+
private _updateChecked;
|
|
2356
|
+
private _updateLabel;
|
|
2357
|
+
private _updateDisabled;
|
|
2358
|
+
private _updateColor;
|
|
2359
|
+
private _updateLabelFont;
|
|
2360
|
+
private _updateValue;
|
|
2361
|
+
private _updateLabelPlacement;
|
|
2362
|
+
}
|
|
2363
|
+
|
|
2364
|
+
export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, type CheckboxElements, ChildDataTable, SampleComponent, WavelengthBanner, WavelengthButton, WavelengthCheckbox, WavelengthDatePicker, WavelengthDropdown, WavelengthFileDropZone, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMenu, WavelengthMultiSelectAutocomplete, WavelengthNavBar, WavelengthNotificationPanel, WavelengthPagination, WavelengthPlaneTrail, WavelengthProgressBar, WavelengthSearch, WavelengthSnackbar, WavelengthSwitch, WavelengthTitleBar, WavelengthToolTip };
|
package/dist/esm/index.js
CHANGED
|
@@ -6782,6 +6782,127 @@ var WavelengthSearch = class extends HTMLElement {
|
|
|
6782
6782
|
if (!customElements.get("wavelength-search")) {
|
|
6783
6783
|
customElements.define("wavelength-search", WavelengthSearch);
|
|
6784
6784
|
}
|
|
6785
|
+
|
|
6786
|
+
// src/web-components/wavelength-switch.template.html
|
|
6787
|
+
var wavelength_switch_template_default = '<style>\n :host {\n display: block;\n --font-color: #333;\n --font-size: 20px;\n --font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;\n --switch-color: #2196f3;\n --label-font: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;\n\n /* Variable-based sizing */\n --container-width: 60px;\n --container-height: 34px;\n --track-height: 22px;\n --knob-size: 28px;\n\n /* Internal Calculations */\n --track-top: calc((var(--container-height) - var(--track-height)) / 2);\n --knob-top: calc((var(--container-height) - var(--knob-size)) / 2);\n --knob-translate: calc(var(--container-width) - var(--knob-size));\n }\n\n :host([size="small"]) {\n --container-width: 40px;\n --container-height: 24px;\n --track-height: 14px;\n --knob-size: 20px;\n --font-size: 16px;\n }\n\n :host([size="large"]) {\n --container-width: 80px;\n --container-height: 48px;\n --track-height: 30px;\n --knob-size: 40px;\n --font-size: 24px;\n }\n\n /* Switch Base Styles */\n .switch {\n position: relative;\n display: inline-block;\n width: var(--container-width);\n height: var(--container-height);\n }\n\n .switch input {\n opacity: 0;\n width: 0;\n height: 0;\n }\n\n /* Slider (The Track) */\n .slider {\n position: absolute;\n cursor: pointer;\n top: var(--track-top);\n left: 0;\n right: 0;\n bottom: var(--track-top);\n background-color: #ccc;\n -webkit-transition: 0.4s;\n transition: 0.4s;\n border-radius: var(--track-height);\n }\n\n .slider:hover {\n cursor: pointer;\n }\n\n /* Handle (The Slider Portion) */\n .slider:before {\n position: absolute;\n content: "";\n height: var(--knob-size);\n width: var(--knob-size);\n left: 0;\n top: calc((var(--track-height) - var(--knob-size)) / 2);\n background-color: white;\n -webkit-transition: 0.4s;\n transition: 0.4s;\n border-radius: var(--knob-size);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n z-index: 2;\n }\n\n .slider:hover:before {\n box-shadow:\n 0 2px 4px rgba(0, 0, 0, 0.3),\n 0 0 0 8px rgba(0, 0, 0, 0.1);\n }\n\n /* Input Checked State Styles */\n input:checked + .slider {\n background-color: var(--switch-color);\n }\n\n input:focus + .slider {\n box-shadow: 0 0 1px #2196f3;\n }\n\n input:checked + .slider:before {\n -webkit-transform: translateX(var(--knob-translate));\n -ms-transform: translateX(var(--knob-translate));\n transform: translateX(var(--knob-translate));\n }\n\n input:checked + .slider:hover:before {\n box-shadow:\n 0 2px 4px rgba(0, 0, 0, 0.3),\n 0 0 0 8px color-mix(in srgb, var(--switch-color), transparent 80%);\n }\n\n /* Disabled State Styles */\n input:disabled + .slider {\n background-color: #e0e0e0;\n cursor: not-allowed;\n }\n\n input:disabled + .slider:before {\n background-color: #f5f5f5;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n }\n\n input:disabled + .slider:hover:before {\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n }\n\n input:disabled:checked + .slider {\n background-color: color-mix(in srgb, var(--switch-color), white 50%);\n opacity: 0.8;\n }\n\n /* Label Styles */\n .label {\n font-size: var(--font-size);\n font-weight: 500;\n color: var(--font-color);\n font-family: var(--label-font);\n }\n\n :host([disabled]) .label {\n color: #9e9e9e;\n }\n\n .flex-container {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n }\n</style>\n\n<div class="flex-container">\n <span id="label-span" class="label"></span>\n <label class="switch">\n <input type="checkbox" aria-labelledby="label" />\n <div class="slider"></div>\n </label>\n</div>\n';
|
|
6788
|
+
|
|
6789
|
+
// src/web-components/wavelength-switch.ts
|
|
6790
|
+
var WavelengthSwitch = class extends HTMLElement {
|
|
6791
|
+
static get observedAttributes() {
|
|
6792
|
+
return ["checked", "label", "label-placement", "size", "disabled", "color", "label-font", "value"];
|
|
6793
|
+
}
|
|
6794
|
+
constructor() {
|
|
6795
|
+
super();
|
|
6796
|
+
this.shadow = this.attachShadow({ mode: "open" });
|
|
6797
|
+
this.shadow.innerHTML = wavelength_switch_template_default;
|
|
6798
|
+
}
|
|
6799
|
+
get checked() {
|
|
6800
|
+
return this.input.checked;
|
|
6801
|
+
}
|
|
6802
|
+
set checked(value) {
|
|
6803
|
+
this.input.checked = !!value;
|
|
6804
|
+
this.toggleAttribute("checked", this.input.checked);
|
|
6805
|
+
}
|
|
6806
|
+
connectedCallback() {
|
|
6807
|
+
this.input = this.shadow.querySelector("input");
|
|
6808
|
+
this.labelElement = this.shadow.querySelector(".label");
|
|
6809
|
+
this.flexContainer = this.shadow.querySelector(".flex-container");
|
|
6810
|
+
this._updateLabel();
|
|
6811
|
+
this._updateChecked();
|
|
6812
|
+
this._updateDisabled();
|
|
6813
|
+
this._updateColor();
|
|
6814
|
+
this._updateLabelFont();
|
|
6815
|
+
this.input.addEventListener("change", (e) => {
|
|
6816
|
+
this.dispatchEvent(
|
|
6817
|
+
new CustomEvent("wavelength-switch-change", {
|
|
6818
|
+
detail: {
|
|
6819
|
+
checked: e.target.checked,
|
|
6820
|
+
value: this.getAttribute("value")
|
|
6821
|
+
},
|
|
6822
|
+
bubbles: true,
|
|
6823
|
+
composed: true
|
|
6824
|
+
})
|
|
6825
|
+
);
|
|
6826
|
+
});
|
|
6827
|
+
}
|
|
6828
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
6829
|
+
if (oldValue === newValue) return;
|
|
6830
|
+
if (!this.input) return;
|
|
6831
|
+
switch (name) {
|
|
6832
|
+
case "checked":
|
|
6833
|
+
this._updateChecked();
|
|
6834
|
+
break;
|
|
6835
|
+
case "label":
|
|
6836
|
+
this._updateLabel();
|
|
6837
|
+
break;
|
|
6838
|
+
case "disabled":
|
|
6839
|
+
this._updateDisabled();
|
|
6840
|
+
break;
|
|
6841
|
+
case "label-placement":
|
|
6842
|
+
this._updateLabel();
|
|
6843
|
+
break;
|
|
6844
|
+
case "color":
|
|
6845
|
+
this._updateColor();
|
|
6846
|
+
break;
|
|
6847
|
+
case "label-font":
|
|
6848
|
+
this._updateLabelFont();
|
|
6849
|
+
break;
|
|
6850
|
+
case "value":
|
|
6851
|
+
this._updateValue();
|
|
6852
|
+
break;
|
|
6853
|
+
}
|
|
6854
|
+
}
|
|
6855
|
+
disconnectedCallback() {
|
|
6856
|
+
this.input.removeEventListener("change", this._updateChecked);
|
|
6857
|
+
}
|
|
6858
|
+
_updateChecked() {
|
|
6859
|
+
this.input.checked = this.hasAttribute("checked") && this.getAttribute("checked") !== "false";
|
|
6860
|
+
}
|
|
6861
|
+
_updateLabel() {
|
|
6862
|
+
if (this.labelElement) {
|
|
6863
|
+
this.labelElement.textContent = this.getAttribute("label") || "";
|
|
6864
|
+
this.labelElement.style.display = this.hasAttribute("label") ? "block" : "none";
|
|
6865
|
+
}
|
|
6866
|
+
this._updateLabelPlacement();
|
|
6867
|
+
}
|
|
6868
|
+
_updateDisabled() {
|
|
6869
|
+
if (this.input) {
|
|
6870
|
+
this.input.disabled = this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false";
|
|
6871
|
+
}
|
|
6872
|
+
}
|
|
6873
|
+
_updateColor() {
|
|
6874
|
+
if (this.hasAttribute("color")) {
|
|
6875
|
+
this.style.setProperty("--switch-color", this.getAttribute("color") || "");
|
|
6876
|
+
} else {
|
|
6877
|
+
this.style.removeProperty("--switch-color");
|
|
6878
|
+
}
|
|
6879
|
+
}
|
|
6880
|
+
_updateLabelFont() {
|
|
6881
|
+
if (this.hasAttribute("label-font")) {
|
|
6882
|
+
this.style.setProperty("--label-font", this.getAttribute("label-font") || "");
|
|
6883
|
+
} else {
|
|
6884
|
+
this.style.removeProperty("--label-font");
|
|
6885
|
+
}
|
|
6886
|
+
}
|
|
6887
|
+
_updateValue() {
|
|
6888
|
+
if (this.hasAttribute("value")) {
|
|
6889
|
+
this.input.value = this.getAttribute("value") || "";
|
|
6890
|
+
}
|
|
6891
|
+
}
|
|
6892
|
+
_updateLabelPlacement() {
|
|
6893
|
+
const placement = this.getAttribute("label-placement") ?? "left";
|
|
6894
|
+
const directions = {
|
|
6895
|
+
left: "row",
|
|
6896
|
+
right: "row-reverse",
|
|
6897
|
+
top: "column",
|
|
6898
|
+
bottom: "column-reverse"
|
|
6899
|
+
};
|
|
6900
|
+
this.flexContainer.style.flexDirection = directions[placement] ?? "row";
|
|
6901
|
+
}
|
|
6902
|
+
};
|
|
6903
|
+
if (!customElements.get("wavelength-switch")) {
|
|
6904
|
+
customElements.define("wavelength-switch", WavelengthSwitch);
|
|
6905
|
+
}
|
|
6785
6906
|
export {
|
|
6786
6907
|
BaseWavelengthInput,
|
|
6787
6908
|
BaseWavelengthMultiSelectAutocomplete,
|
|
@@ -6805,6 +6926,7 @@ export {
|
|
|
6805
6926
|
WavelengthProgressBar,
|
|
6806
6927
|
WavelengthSearch,
|
|
6807
6928
|
WavelengthSnackbar,
|
|
6929
|
+
WavelengthSwitch,
|
|
6808
6930
|
WavelengthTitleBar,
|
|
6809
6931
|
WavelengthToolTip
|
|
6810
6932
|
};
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@wavelengthusaf/web-components",
|
|
3
3
|
"author": "563 EWS - Wavelength",
|
|
4
4
|
"license": "MIT",
|
|
5
|
-
"version": "1.
|
|
5
|
+
"version": "1.14.0",
|
|
6
6
|
"description": "Common component library used by Wavelength developers (NATIVE WEB COMPONENTS)",
|
|
7
7
|
"main": "/dist/cjs/index.cjs",
|
|
8
8
|
"module": "/dist/esm/index.js",
|