@hashicorp/design-system-components
Version:
Helios Design System Components
104 lines (101 loc) • 4.21 kB
JavaScript
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { assert } from '@ember/debug';
import { tracked } from '@glimmer/tracking';
import { on } from '@ember/modifier';
import didUpdate from '@ember/render-modifiers/modifiers/did-update';
import HdsIcon from '../../icon/index.js';
import HdsDropdownToggleChevron from './chevron.js';
import { HdsDropdownToggleIconSizeValues, HdsDropdownToggleIconAllowedIconValues } from './types.js';
import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';
import { g, i, n } from 'decorator-transforms/runtime';
/**
* Copyright IBM Corp. 2021, 2025
* SPDX-License-Identifier: MPL-2.0
*/
const DEFAULT_SIZE = HdsDropdownToggleIconSizeValues.Medium;
const SIZES = Object.values(HdsDropdownToggleIconSizeValues);
const ALLOWED_ICON_LIST = Object.values(HdsDropdownToggleIconAllowedIconValues);
class HdsDropdownToggleIcon extends Component {
static {
g(this.prototype, "_hasImage", [tracked], function () {
return true;
});
}
#_hasImage = (i(this, "_hasImage"), void 0);
constructor(owner, args) {
super(owner, args);
if (!(this.args.icon || this.args.imageSrc)) {
assert('@icon or @imageSrc must be defined for "Hds::Dropdown::Toggle::Icon"');
}
}
onDidUpdateImageSrc() {
this._hasImage = true;
}
static {
n(this.prototype, "onDidUpdateImageSrc", [action]);
}
onImageLoadError() {
this._hasImage = false;
}
static {
n(this.prototype, "onImageLoadError", [action]);
}
get text() {
const {
text
} = this.args;
assert('@text for "Hds::Dropdown::Toggle::Icon" must have a valid value', text !== undefined);
return text;
}
get size() {
const {
size = DEFAULT_SIZE
} = this.args;
assert(` for "Hds::Dropdown::Toggle::Icon" must be one of the following: ${SIZES.join(', ')}; received: ${size}`, SIZES.includes(size));
return size;
}
get iconSize() {
if (this.args.size === 'medium' && !this.hasChevron) {
// in this special case we use a larger SVG
return '24';
} else {
// this is the default size (notice: for the "small" variant with chevron, we set the actual size to `12px` via CSS)
return '16';
}
}
get hasChevron() {
if (this.args.icon && !ALLOWED_ICON_LIST.includes(this.args.icon) && this.args.hasChevron === false) {
assert(` for "Hds::Dropdown::Toggle::Icon" must be true unless the icon is one of the following: ${ALLOWED_ICON_LIST.join(', ')}; received: ${this.args.icon}`);
}
return this.args.hasChevron ?? true;
}
get classNames() {
const classes = ['hds-dropdown-toggle-icon'];
// add a class based on the @size argument
classes.push(`hds-dropdown-toggle-icon--size-${this.size}`);
// add a class based on the @isOpen argument
if (this.args.isOpen) {
classes.push('hds-dropdown-toggle-icon--is-open');
}
// add a class based on the @hasChevron argument
if (this.hasChevron) {
classes.push('hds-dropdown-toggle-icon--has-chevron');
}
return classes.join(' ');
}
static {
setComponentTemplate(precompileTemplate("<button class={{this.classNames}} aria-label={{this.text}} ...attributes aria-expanded={{if @isOpen \"true\" \"false\"}} {{@setupPrimitiveToggle}} {{didUpdate this.onDidUpdateImageSrc @imageSrc}} type=\"button\">\n <div class=\"hds-dropdown-toggle-icon__wrapper\">\n {{#if @imageSrc}}\n {{#if this._hasImage}}\n <img src={{@imageSrc}} alt role=\"presentation\" {{on \"error\" this.onImageLoadError}} />\n {{else}}\n <HdsIcon @name=\"user\" @size={{this.iconSize}} />\n {{/if}}\n {{else if @icon}}\n <HdsIcon @name={{@icon}} @size={{this.iconSize}} />\n {{/if}}\n </div>\n {{#if this.hasChevron}}\n <HdsDropdownToggleChevron />\n {{/if}}\n</button>", {
strictMode: true,
scope: () => ({
didUpdate,
on,
HdsIcon,
HdsDropdownToggleChevron
})
}), this);
}
}
export { ALLOWED_ICON_LIST, DEFAULT_SIZE, SIZES, HdsDropdownToggleIcon as default };
//# sourceMappingURL=icon.js.map