{"file":"vds-horizontal-icon-list.vds-horizontal-icon-list-item.entry.js","mappings":"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","names":[],"sources":["src/components/vds-horizontal-icon-list/vds-horizontal-icon-list.scss?tag=vds-horizontal-icon-list&encapsulation=shadow","src/components/vds-horizontal-icon-list/vds-horizontal-icon-list.tsx","src/components/vds-horizontal-icon-list-item/vds-horizontal-icon-list-item.scss?tag=vds-horizontal-icon-list-item&encapsulation=shadow","src/components/vds-horizontal-icon-list-item/vds-horizontal-icon-list-item.tsx"],"sourcesContent":[":host {\r\n  @apply block;\r\n}\r\n\r\n:host([grid-cols=\"1\"]) {\r\n  div.grid {\r\n    @apply grid-cols-1;\r\n  }\r\n}\r\n\r\n:host([grid-cols=\"2\"]) {\r\n  div.grid {\r\n    @apply grid-cols-2;\r\n  }\r\n}\r\n\r\n:host([grid-cols=\"3\"]) {\r\n  div.grid {\r\n    @apply grid-cols-3;\r\n  }\r\n}\r\n\r\n:host([grid-cols=\"4\"]) {\r\n  div.grid {\r\n    @apply grid-cols-4;\r\n  }\r\n}\r\n\r\n:host([grid-cols=\"5\"]) {\r\n  div.grid {\r\n    @apply grid-cols-5;\r\n  }\r\n}\r\n\r\n:host([grid-cols=\"6\"]) {\r\n  div.grid {\r\n    @apply grid-cols-6;\r\n  }\r\n}\r\n\r\n:host([grid-cols=\"7\"]) {\r\n  div.grid {\r\n    @apply grid-cols-7;\r\n  }\r\n}\r\n\r\n:host([grid-cols=\"8\"]) {\r\n  div.grid {\r\n    @apply grid-cols-8;\r\n  }\r\n}\r\n\r\n:host([grid-cols=\"9\"]) {\r\n  div.grid {\r\n    @apply grid-cols-9;\r\n  }\r\n}\r\n\r\n:host([grid-cols=\"10\"]) {\r\n  div.grid {\r\n    @apply grid-cols-10;\r\n  }\r\n}\r\n\r\n:host([grid-cols=\"11\"]) {\r\n  div.grid {\r\n    @apply grid-cols-11;\r\n  }\r\n}\r\n\r\n:host([grid-cols=\"12\"]) {\r\n  div.grid {\r\n    @apply grid-cols-12;\r\n  }\r\n}\r\n\r\n:host([sm-grid-cols=\"1\"]) {\r\n  div.grid {\r\n    @apply sm:grid-cols-1;\r\n  }\r\n}\r\n\r\n:host([sm-grid-cols=\"2\"]) {\r\n  div.grid {\r\n    @apply sm:grid-cols-2;\r\n  }\r\n}\r\n\r\n:host([sm-grid-cols=\"3\"]) {\r\n  div.grid {\r\n    @apply sm:grid-cols-3;\r\n  }\r\n}\r\n\r\n:host([sm-grid-cols=\"4\"]) {\r\n  div.grid {\r\n    @apply sm:grid-cols-4;\r\n  }\r\n}\r\n\r\n:host([sm-grid-cols=\"5\"]) {\r\n  div.grid {\r\n    @apply sm:grid-cols-5;\r\n  }\r\n}\r\n\r\n:host([sm-grid-cols=\"6\"]) {\r\n  div.grid {\r\n    @apply sm:grid-cols-6;\r\n  }\r\n}\r\n\r\n:host([sm-grid-cols=\"7\"]) {\r\n  div.grid {\r\n    @apply sm:grid-cols-7;\r\n  }\r\n}\r\n\r\n:host([sm-grid-cols=\"8\"]) {\r\n  div.grid {\r\n    @apply sm:grid-cols-8;\r\n  }\r\n}\r\n\r\n:host([sm-grid-cols=\"9\"]) {\r\n  div.grid {\r\n    @apply sm:grid-cols-9;\r\n  }\r\n}\r\n\r\n:host([sm-grid-cols=\"10\"]) {\r\n  div.grid {\r\n    @apply sm:grid-cols-10;\r\n  }\r\n}\r\n\r\n:host([sm-grid-cols=\"11\"]) {\r\n  div.grid {\r\n    @apply sm:grid-cols-11;\r\n  }\r\n}\r\n\r\n:host([sm-grid-cols=\"12\"]) {\r\n  div.grid {\r\n    @apply sm:grid-cols-12;\r\n  }\r\n}\r\n\r\n:host([md-grid-cols=\"1\"]) {\r\n  div.grid {\r\n    @apply md:grid-cols-1;\r\n  }\r\n}\r\n\r\n:host([md-grid-cols=\"2\"]) {\r\n  div.grid {\r\n    @apply md:grid-cols-2;\r\n  }\r\n}\r\n\r\n:host([md-grid-cols=\"3\"]) {\r\n  div.grid {\r\n    @apply md:grid-cols-3;\r\n  }\r\n}\r\n\r\n:host([md-grid-cols=\"4\"]) {\r\n  div.grid {\r\n    @apply md:grid-cols-4;\r\n  }\r\n}\r\n\r\n:host([md-grid-cols=\"5\"]) {\r\n  div.grid {\r\n    @apply md:grid-cols-5;\r\n  }\r\n}\r\n\r\n:host([md-grid-cols=\"6\"]) {\r\n  div.grid {\r\n    @apply md:grid-cols-6;\r\n  }\r\n}\r\n\r\n:host([md-grid-cols=\"7\"]) {\r\n  div.grid {\r\n    @apply md:grid-cols-7;\r\n  }\r\n}\r\n\r\n:host([md-grid-cols=\"8\"]) {\r\n  div.grid {\r\n    @apply md:grid-cols-8;\r\n  }\r\n}\r\n\r\n:host([md-grid-cols=\"9\"]) {\r\n  div.grid {\r\n    @apply md:grid-cols-9;\r\n  }\r\n}\r\n\r\n:host([md-grid-cols=\"10\"]) {\r\n  div.grid {\r\n    @apply md:grid-cols-10;\r\n  }\r\n}\r\n\r\n:host([md-grid-cols=\"11\"]) {\r\n  div.grid {\r\n    @apply md:grid-cols-11;\r\n  }\r\n}\r\n\r\n:host([md-grid-cols=\"12\"]) {\r\n  div.grid {\r\n    @apply md:grid-cols-12;\r\n  }\r\n}\r\n","import { Component, h, Host, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'vds-horizontal-icon-list',\r\n  styleUrl: 'vds-horizontal-icon-list.scss',\r\n  shadow: true,\r\n})\r\nexport class VdsHorizontalIconList {\r\n\r\n  /**\r\n   * Sets the columns in a grid layout\r\n   * (value must be between 1 and 12)\r\n   */\r\n  @Prop({ reflect: true }) gridCols: number = 2;\r\n  /**\r\n   * Sets the columns in a grid layout for tablet portrait\r\n   * (value must be between 1 and 12)\r\n   */\r\n  @Prop({ reflect: true }) smGridCols: number = 3;\r\n  /**\r\n   * Sets the columns in a grid layout for tablet horizontal\r\n   * (value must be between 1 and 12)\r\n   */\r\n  @Prop({ reflect: true }) mdGridCols: number = 8;\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"grid gap-3\">\r\n          <slot></slot>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n}\r\n",":host {\r\n  @apply block flex-1 min-w-[1px] w-full;\r\n}\r\n","import { Component, Host, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\r\nimport { getAriaLabel, getParentForm, renderHiddenInput, addEventListener, removeEventListener } from '../../utils/helpers';\r\nimport { HorizontalIconListItemChangeEventDetail } from './vds-horizontal-icon-list-item.interface';\r\n\r\n@Component({\r\n  tag: 'vds-horizontal-icon-list-item',\r\n  styleUrl: 'vds-horizontal-icon-list-item.scss',\r\n  shadow: true,\r\n})\r\nexport class VdsHorizontalIconListItem {\r\n\r\n  private inputId = `vds-horizontal-icon-list-item-${listItemIds++}`;\r\n  private focusEl?: HTMLElement;\r\n  private form: HTMLFormElement | null = null;\r\n\r\n  @Element() el!: HTMLVdsHorizontalIconListItemElement;\r\n\r\n  /**\r\n   * Text underneath the icon\r\n   */\r\n  @Prop() label: string;\r\n\r\n  /**\r\n   * If true the item has a border\r\n   */\r\n  @Prop() border: boolean = false;\r\n\r\n  /**\r\n   * Hover effect\r\n   */\r\n  @Prop() hover: boolean = false;\r\n\r\n  /**\r\n   * URL to open on click\r\n   */\r\n  @Prop() href?: string = undefined;\r\n\r\n  /**\r\n   * Disables the interaction\r\n   */\r\n  @Prop() disabled: boolean = false;\r\n\r\n  /**\r\n   * Sets the interaction mode\r\n   * determines wether or not the component can be clicked\r\n   */\r\n  @Prop() mode: 'default' | 'link' | 'form-control' = 'default';\r\n\r\n  /**\r\n   * The name of the control, which is submitted with the form data.\r\n   */\r\n  @Prop() name: string = this.inputId;\r\n\r\n  /**\r\n   * Hidden value of the checkbox\r\n   */\r\n  @Prop() value: any | null = 'on';\r\n\r\n  /**\r\n   * If `true`, the item is selected.\r\n   */\r\n  @Prop({ mutable: true }) selected = false;\r\n\r\n  /**\r\n   * Emitted when the checked property has changed.\r\n   */\r\n  @Event() vdsChange!: EventEmitter<HorizontalIconListItemChangeEventDetail>;\r\n\r\n  /**\r\n   * Emitted when the checkbox has focus.\r\n   */\r\n  @Event() vdsFocus!: EventEmitter<void>;\r\n\r\n  /**\r\n   * Emitted when the checkbox loses focus.\r\n   */\r\n  @Event() vdsBlur!: EventEmitter<void>;\r\n\r\n  render() {\r\n    const { selected, disabled, border, hover, el, inputId, name, value, label } = this;\r\n    const { labelId, labelText } = getAriaLabel(el, inputId, label);\r\n\r\n    renderHiddenInput(true, el, name, (selected ? value : ''), disabled);\r\n\r\n    return (\r\n      <Host\r\n        aria-labelledby={label ? labelId : null}\r\n        aria-checked={`${selected}`}\r\n        aria-hidden={disabled ? 'true' : null}\r\n        role=\"checkbox\">\r\n        <div\r\n          id=\"itemContainer\"\r\n          class={{\r\n            \"relative grid h-full text-grey bg-white\": true,\r\n            \"opacity-25 pointer-events-none\": disabled,\r\n            \"border-2\": border,\r\n            \"hover:shadow-[0_14px_25px_rgba(0,0,0,.16)]\": hover,\r\n            \"border-berry\": selected,\r\n            \"border-grey-lighter\": !selected\r\n          }}>\r\n          { this.renderItemContent(labelId, labelText) }\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private renderItemContent(labelId, labelText): string {\r\n    if(this.mode == 'link') {\r\n      return (\r\n        <a href={ this.href } class=\"h-full\">\r\n          <div class=\"text-center py-[15px] px-[10px]\">\r\n            <div class=\"block mx-auto\">\r\n              <slot name=\"icon\"></slot>\r\n            </div>\r\n            <p class=\"text-sm mt-[30px]\">{ this.label }</p>\r\n          </div>\r\n        </a>\r\n      );\r\n    }\r\n    else if(this.mode == 'form-control') {\r\n      const { selected, disabled, inputId } = this;\r\n\r\n      return (\r\n        <label id={labelId} htmlFor={inputId} class=\"h-full cursor-pointer\">\r\n          <input\r\n          onClick={this.handleClick}\r\n          type=\"checkbox\"\r\n          class=\"hidden\"\r\n          aria-checked={`${selected}`}\r\n          disabled={disabled}\r\n          id={inputId}\r\n          onFocus={() => this.onFocus()}\r\n          onBlur={() => this.onBlur()}\r\n          ref={focusEl => (this.focusEl = focusEl)}\r\n          checked={selected}/>\r\n          <div class=\"text-center py-[15px] px-[10px]\">\r\n            <div\r\n              class={{\r\n                \"block mx-auto\": true,\r\n                \"text-berry\": selected\r\n              }}>\r\n              <slot name=\"icon\"></slot>\r\n            </div>\r\n            <p\r\n              class={{\r\n              \"text-sm mt-[30px]\": true,\r\n              \"text-berry\": selected\r\n              }}>\r\n              { labelText }\r\n            </p>\r\n          </div>\r\n        </label>\r\n      );\r\n    }\r\n    else if(this.mode == 'default') {\r\n      return (\r\n        <span class=\"h-full\">\r\n          <div class=\"text-center py-[15px] px-[10px]\">\r\n            <div class=\"block mx-auto\">\r\n              <slot name=\"icon\"></slot>\r\n            </div>\r\n            <p class=\"text-sm mt-[30px]\">{ this.label }</p>\r\n          </div>\r\n        </span>\r\n      );\r\n    }\r\n  }\r\n\r\n  connectedCallback() {\r\n    if(this.mode == 'form-control') {\r\n      const form = this.form = getParentForm(this.el);\r\n      if (form) {\r\n        addEventListener(form, 'reset', this.onReset);\r\n      }\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    if(this.mode == 'form-control') {\r\n      const form = this.form;\r\n      if (form) {\r\n        removeEventListener(form, 'reset', this.onReset)\r\n      }\r\n    }\r\n  }\r\n\r\n  private handleClick = (ev: any) => {\r\n    ev.preventDefault();\r\n    this.setFocus();\r\n    this.selected = !this.selected;\r\n  }\r\n\r\n  private setFocus() {\r\n    if (this.focusEl) {\r\n      this.focusEl.focus();\r\n    }\r\n  }\r\n\r\n  private onFocus = () => {\r\n    this.vdsFocus.emit();\r\n  };\r\n\r\n  private onBlur = () => {\r\n    this.vdsBlur.emit();\r\n  };\r\n\r\n  private onReset = () => {\r\n    this.selected = false;\r\n  }\r\n\r\n}\r\n\r\nlet listItemIds = 0;\r\n"],"version":3}