@hashicorp/design-system-components/dist/components/hds/layout/flex/item.js

Helios Design System Components

import Component from '@glimmer/component';
import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';

var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n{{!\n  Dynamically generating an HTML tag in Ember creates a dynamic component class (with the corresponding tagName), while rendering\n  a plain HTML element requires less computing cycles for Ember (you will notice it doesn\'t add the `ember-view` class to it).\n}}\n{{#if (eq this.componentTag \"div\")}}\n  <div class={{this.classNames}} {{style this.inlineStyles}} ...attributes>{{yield}}</div>\n{{else}}\n  {{#let (element this.componentTag) as |Tag|}}<Tag\n      class={{this.classNames}}\n      {{style this.inlineStyles}}\n      ...attributes\n    >{{yield}}</Tag>{{/let}}\n{{/if}}");

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */

class HdsLayoutFlexItem extends Component {
  get componentTag() {
    return this.args.tag ?? 'div';
  }
  get inlineStyles() {
    const inlineStyles = {};

    // we handle all non-zero cases of `basis` values via inline styles
    if (typeof this.args.basis === 'string') {
      inlineStyles['flex-basis'] = this.args.basis;
    }

    // we handle non-standard cases of `grow` values via inline styles
    if (typeof this.args.grow === 'number' && this.args.grow > 1) {
      // the `{{style}}` modifier accepts only strings
      inlineStyles['flex-grow'] = this.args.grow.toString();
    } else if (typeof this.args.grow === 'string') {
      inlineStyles['flex-grow'] = this.args.grow;
    }

    // we handle non-standard cases of `shrink` values via inline styles
    if (typeof this.args.shrink === 'number' && this.args.shrink > 1) {
      // the `{{style}}` modifier accepts only strings
      inlineStyles['flex-shrink'] = this.args.shrink.toString();
    } else if (typeof this.args.shrink === 'string') {
      inlineStyles['flex-shrink'] = this.args.shrink;
    }
    return inlineStyles;
  }
  get classNames() {
    const classes = ['hds-layout-flex-item'];

    // add a class based on the @basis argument (if set to `0`)
    if (this.args.basis === 0) {
      classes.push('hds-layout-flex-item--basis-0');
    }

    // add a class based on the @grow argument (if set to `0/1` or `true/false`)
    if (this.args.grow === 0 || this.args.grow === false) {
      classes.push('hds-layout-flex-item--grow-0');
    } else if (this.args.grow === 1 || this.args.grow === true) {
      classes.push('hds-layout-flex-item--grow-1');
    }

    // add a class based on the @shrink argument (if set to `0/1` or `true/false`)
    if (this.args.shrink === 0 || this.args.shrink === false) {
      classes.push('hds-layout-flex-item--shrink-0');
    } else if (this.args.shrink === 1 || this.args.shrink === true) {
      classes.push('hds-layout-flex-item--shrink-1');
    }

    // add a class based on the @enableCollapseBelowContentSize argument (applies a `min-width: 0`)
    if (this.args.enableCollapseBelowContentSize) {
      classes.push('hds-layout-flex-item--enable-collapse-below-content-size');
    }
    return classes.join(' ');
  }
}
setComponentTemplate(TEMPLATE, HdsLayoutFlexItem);

export { HdsLayoutFlexItem as default };
//# sourceMappingURL=item.js.map