vault/ui/lib/core/addon/components/toggle.js
Vault Automation 0c6c13dd38
license: update headers to IBM Corp. (#10229) (#10233)
* license: update headers to IBM Corp.
* `make proto`
* update offset because source file changed

Signed-off-by: Ryan Cragun <me@ryan.ec>
Co-authored-by: Ryan Cragun <me@ryan.ec>
2025-10-21 15:20:20 -06:00

45 lines
1.4 KiB
JavaScript

/**
* Copyright IBM Corp. 2016, 2025
* SPDX-License-Identifier: BUSL-1.1
*/
/**
* @module Toggle
* Toggle components are used to indicate boolean values which can be toggled on or off.
* They are a stylistic alternative to checkboxes, but still use the input[type="checkbox"] under the hood.
*
* @example
* <Toggle/>
*
* @param {function} onChange - onChange is triggered on checkbox change (select, deselect). Must manually mutate checked value
* @param {string} name - name is passed along to the form field, as well as to generate the ID of the input & "for" value of the label
* @param {boolean} [checked=false] - checked status of the input, and must be passed in and mutated from the parent
* @param {boolean} [disabled=false] - disabled makes the switch unclickable
*/
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
export default class ToggleComponent extends Component {
// tracked because the Input mutates the property and therefor cannot be a getter
@tracked
checked = this.args.checked || false;
get disabled() {
return this.args.disabled || false;
}
get name() {
return this.args.name || '';
}
get safeId() {
return `toggle-${this.name.replace(/\W/g, '')}`;
}
@action
handleChange(e) {
this.args.onChange(e.target.checked);
}
}