@hashicorp/design-system-components
Version:
Helios Design System Components
106 lines (103 loc) • 3.93 kB
JavaScript
import Component from '@glimmer/component';
import { assert } from '@ember/debug';
import { element } from 'ember-element-helper';
import { hash } from '@ember/helper';
import { HdsLayoutFlexDirectionValues, HdsLayoutFlexGapValues, HdsLayoutFlexJustifyValues, HdsLayoutFlexAlignValues } from './types.js';
import HdsLayoutFlexItem from './item.js';
import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';
/**
* Copyright IBM Corp. 2021, 2025
* SPDX-License-Identifier: MPL-2.0
*/
const DEFAULT_DIRECTION = HdsLayoutFlexDirectionValues.Row;
const DIRECTIONS = Object.values(HdsLayoutFlexDirectionValues);
const JUSTIFYS = Object.values(HdsLayoutFlexJustifyValues);
const ALIGNS = Object.values(HdsLayoutFlexAlignValues);
const DEFAULT_GAP = HdsLayoutFlexGapValues.Zero;
const GAPS = Object.values(HdsLayoutFlexGapValues);
class HdsLayoutFlex extends Component {
get componentTag() {
return this.args.tag ?? 'div';
}
get direction() {
const {
direction = DEFAULT_DIRECTION
} = this.args;
assert(`@direction for "Hds::Layout::Flex" must be one of the following: ${DIRECTIONS.join(', ')}; received: ${direction}`, DIRECTIONS.includes(direction));
return direction;
}
get justify() {
const {
justify
} = this.args;
if (justify) {
assert(`@justify for "Hds::Layout::Flex" must be one of the following: ${JUSTIFYS.join(', ')}; received: ${justify}`, JUSTIFYS.includes(justify));
}
return justify;
}
get align() {
const {
align
} = this.args;
if (align) {
assert(`@align for "Hds::Layout::Flex" must be one of the following: ${ALIGNS.join(', ')}; received: ${align}`, ALIGNS.includes(align));
}
return align;
}
get gap() {
const {
gap = DEFAULT_GAP
} = this.args;
if (gap) {
assert(`@gap for "Hds::Layout::Flex" must be a single value or an array of two values of one of the following: ${GAPS.join(', ')}; received: ${gap}`, !Array.isArray(gap) && GAPS.includes(gap) || Array.isArray(gap) && gap.length === 2 && GAPS.includes(gap[0]) && GAPS.includes(gap[1]));
return Array.isArray(gap) ? gap : [gap];
} else {
return undefined;
}
}
get classNames() {
const classes = ['hds-layout-flex'];
// add a class based on the @direction argument
classes.push(`hds-layout-flex--direction-${this.direction}`);
// add a class based on the @justify argument
if (this.justify) {
classes.push(`hds-layout-flex--justify-content-${this.justify}`);
}
// add a class based on the @align argument
if (this.align) {
classes.push(`hds-layout-flex--align-items-${this.align}`);
}
// add a class based on the @gap argument
if (this.gap) {
if (this.gap.length === 2) {
classes.push(`hds-layout-flex--row-gap-${this.gap[0]}`);
classes.push(`hds-layout-flex--column-gap-${this.gap[1]}`);
} else if (this.gap.length === 1) {
classes.push(`hds-layout-flex--row-gap-${this.gap[0]}`);
classes.push(`hds-layout-flex--column-gap-${this.gap[0]}`);
}
}
// add a class based on the @wrap argument
if (this.args.wrap) {
classes.push('hds-layout-flex--has-wrapping');
}
// add a class based on the @isInline argument
if (this.args.isInline) {
classes.push('hds-layout-flex--is-inline');
}
return classes.join(' ');
}
static {
setComponentTemplate(precompileTemplate("{{#let (element this.componentTag) as |Tag|}}\n <Tag class={{this.classNames}} ...attributes>{{yield (hash Item=HdsLayoutFlexItem)}}</Tag>\n{{/let}}", {
strictMode: true,
scope: () => ({
element,
hash,
HdsLayoutFlexItem
})
}), this);
}
}
export { ALIGNS, DEFAULT_DIRECTION, DEFAULT_GAP, DIRECTIONS, GAPS, JUSTIFYS, HdsLayoutFlex as default };
//# sourceMappingURL=index.js.map