'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-b499856a.js');

const ListVariants = {
  row: 'row',
  column: 'column',
};

const ListTags = {
  ul: 'ul',
  ol: 'ol',
  dl: 'dl',
};

const ListItemAlignments = {
  start: 'start',
  spaceAround: 'space-around',
  spaceBetween: 'space-between',
};

const teliaListCss = ".telia-list{display:flex;flex-wrap:wrap;list-style-type:none;margin:0;padding:0;}.telia-list--start{justify-content:start}.telia-list--space-between{justify-content:space-between}.telia-list--space-around{justify-content:space-around}.telia-list--row{flex-direction:row}.telia-list--column{flex-direction:column}.telia-list ::slotted(li),.telia-list ::slotted(dt),.telia-list ::slotted(dd){display:flex}.telia-list--navigation-row ::slotted(li:not(:nth-of-type(1))){margin-left:calc(2.4rem * var(--voca-rem-multiplier))}";

const TeliaList = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    /** List layout, it can be vertical or horizontal */
    this.variant = ListVariants.column;
    /** List tag to be used for rendering list items */
    this.listTag = ListTags.ul;
    /** Justify content along main axis of container */
    this.justifycontent = ListItemAlignments.start;
    /** Adds spacing between list items inside on navigation */
    /** Should be changed to string value and used for wider purpose */
    this.itemSpacing = false;
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-list';
  }
  componentWillLoad() {
    this.validateListTag(this.listTag);
  }
  /**
   * Validates list tag property for non-typescript env
   * @private
   */
  validateListTag(listTag) {
    const validListTags = Object.values(ListTags);
    if (validListTags.indexOf(listTag) === -1) {
      throw new Error(`Invalid list tag ${listTag} is used. Use one of: ${validListTags.join(', ')}`);
    }
  }
  render() {
    const containerClass = {
      'telia-list': true,
      ['telia-list--navigation-row']: !!this.itemSpacing,
      [`telia-list--${this.variant}`]: !!this.variant,
      [`telia-list--${this.justifycontent}`]: !!this.justifycontent,
    };
    const ListTag = this.listTag;
    return (index.h(ListTag, { class: containerClass, role: this.listTag === ListTags.ul ? 'list' : '' }, index.h("slot", null), index.h("telia-vst", { dataTrackingId: this.dataTrackingId })));
  }
  static get watchers() { return {
    "listTag": ["validateListTag"]
  }; }
};
TeliaList.style = teliaListCss;

exports.telia_list = TeliaList;
