{"version":3,"names":["Object","defineProperty","exports","value","prefix","iconName","width","height","aliases","unicode","svgPathData","definition","icon","faXmark","ligatures","source","require$$0","faTimes","adsCheckboxCss","AdsCheckboxStyle0","AdsCheckbox","constructor","hostRef","this","setChecked","checked","isCheckedInternal","handleCheckboxChange","evt","readonly","disabled","checkToggle","emit","checkToggleHandler","undefined","handleCheckboxFocus","checkFocus","id","identifier","checkFocusHandler","handleCheckboxBlur","checkBlur","checkBlurHandler","handleCheckboxKeyDown","key","preventDefault","getTooltipPosition","isReversed","getIsElementRTL","el","Positions","LEFT","RIGHT","setAttribute","generateId","component","handleIdentifierChange","newValue","onCheckedChange","Promise","resolve","componentWillLoad","componentDidLoad","Pipeline.addComponent","disconnectedCallback","Pipeline.removeComponent","renderInputElement","inputAttributes","name","tabIndex","required","h","assign","class","type","renderContentContainer","checkboxClasses","push","classList","contains","labelText","isNullOrUndefinedOrEmpty","label","childNodes","length","labelClasses","labelAttributes","role","toString","isNullOrUndefined","srLabel","$contentEls","join","generateSVGImage","data","reverse","onBlur","onFocus","onKeyDown","onClick","render","$tooltipEl","tooltip","theme","onOpenChange","target","position","text","helperLabel","helperText","htmlFor","$elements","Fragment"],"sources":["node_modules/@fortawesome/pro-regular-svg-icons/faXmark.js","node_modules/@fortawesome/pro-regular-svg-icons/faTimes.js","src/components/ads-checkbox/ads-checkbox.scss?tag=ads-checkbox&encapsulation=shadow","src/components/ads-checkbox/ads-checkbox.tsx"],"sourcesContent":["'use strict';\nObject.defineProperty(exports, '__esModule', { value: true });\nvar prefix = 'far';\nvar iconName = 'xmark';\nvar width = 384;\nvar height = 512;\nvar aliases = [128473,10005,10006,10060,215,\"close\",\"multiply\",\"remove\",\"times\"];\nvar unicode = 'f00d';\nvar svgPathData = 'M345 137c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-119 119L73 103c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l119 119L39 375c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l119-119L311 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-119-119L345 137z';\n\nexports.definition = {\n  prefix: prefix,\n  iconName: iconName,\n  icon: [\n    width,\n    height,\n    aliases,\n    unicode,\n    svgPathData\n  ]};\n\nexports.faXmark = exports.definition;\nexports.prefix = prefix;\nexports.iconName = iconName;\nexports.width = width;\nexports.height = height;\nexports.ligatures = aliases;\nexports.unicode = unicode;\nexports.svgPathData = svgPathData;\nexports.aliases = aliases;","'use strict';\nObject.defineProperty(exports, '__esModule', { value: true });\nvar source = require('./faXmark');\nexports.definition = {\n  prefix: source.prefix,\n  iconName: source.iconName,\n  icon: [\n    source.width,\n    source.height,\n    source.aliases,\n    source.unicode,\n    source.svgPathData\n  ]};\n\nexports.faTimes = exports.definition;\nexports.prefix = source.prefix;\nexports.iconName = source.iconName;\nexports.width = source.width;\nexports.height = source.height;\nexports.ligatures = source.aliases;\nexports.unicode = source.unicode;\nexports.svgPathData = source.svgPathData;\nexports.aliases = source.aliases;","@import 'core';\n\n/**\n * @prop --ads-checkbox-background-color: Default background color\n * @prop --ads-checkbox-background-color-disabled: Disabled background color\n * @prop --ads-checkbox-background-color-readonly: Readonly background color\n *\n * @prop --ads-checkbox-border-color: Default border color\n * @prop --ads-checkbox-border-color-checked: Checked border color\n * @prop --ads-checkbox-border-color-disabled: Disabled border color\n * @prop --ads-checkbox-border-color-readonly: Readonly border color\n *\n * @prop --ads-checkbox-cross-color-checked: Default cross color\n * @prop --ads-checkbox-cross-color-hover: Hovered cross color\n * @prop --ads-checkbox-cross-color-disabled: Disabled cross color\n * @prop --ads-checkbox-cross-color-readonly: Readonly cross color\n *\n * @prop --ads-checkbox-margin-left: Default margin-left\n * @prop --ads-checkbox-margin-right: Default margin-right\n *\n * @prop --ads-checkbox-helper-offset-margin: Helper offset margin\n * @prop --ads-checkbox-helper-offset-small-margin: Helper small offset margin\n *\n * @prop --ads-checkbox-label-color: Default label color\n * @prop --ads-checkbox-label-color-hover: Hovered label color\n * @prop --ads-checkbox-label-color-required: Required label color\n * @prop --ads-checkbox-label-margin-left: Default label margin-left\n * @prop --ads-checkbox-label-margin-right: Default label margin-right\n * @prop --ads-checkbox-label-text-align: Default label text-align\n */\n\n$ads-checkbox-border-color: #a3a8ae;\n$ads-checkbox-size-default: 22px;\n$ads-checkbox-size-small: 16px;\n\n:host {\n  display: inline-block;\n}\n\n:host([theme='default']) .c-checkbox {\n  // Background\n\n  --ads-checkbox-background-color: #{$ads-checkbox-background-color};\n  --ads-checkbox-background-color-disabled: #{$ads-checkbox-background-color-disabled};\n  --ads-checkbox-background-color-readonly: #{$ads-checkbox-background-color-readonly};\n\n  // Border\n\n  --ads-checkbox-border-color: #{$ads-checkbox-border-color};\n  --ads-checkbox-border-color-checked: #{$ads-checkbox-border-color-checked};\n  --ads-checkbox-border-color-disabled: #{$ads-checkbox-border-color-disabled};\n  --ads-checkbox-border-color-readonly: #{$ads-checkbox-border-color-readonly};\n\n  // Cross\n\n  --ads-checkbox-cross-color-checked: #{$ads-checkbox-cross-color-checked};\n  --ads-checkbox-cross-color-hover: #{$ads-checkbox-cross-color-hover};\n  --ads-checkbox-cross-color-disabled: #{$ads-checkbox-cross-color-disabled};\n  --ads-checkbox-cross-color-readonly: #{$ads-checkbox-cross-color-readonly};\n\n  // Label\n\n  --ads-checkbox-label-color: #{$ads-checkbox-label-color};\n  --ads-checkbox-label-color-hover: #{$ads-checkbox-label-color-hover};\n  --ads-checkbox-label-color-required: #{$ads-checkbox-label-color-required};\n}\n\n:host([theme='dark']) .c-checkbox {\n  // Background\n\n  --ads-checkbox-background-color: #{$ads-checkbox-background-color-dark};\n  --ads-checkbox-background-color-disabled: #{$ads-checkbox-background-color-disabled-dark};\n  --ads-checkbox-background-color-readonly: #{$ads-checkbox-background-color-readonly-dark};\n\n  // Border\n\n  --ads-checkbox-border-color: #{$ads-checkbox-border-color-dark};\n  --ads-checkbox-border-color-checked: #{$ads-checkbox-border-color-checked-dark};\n  --ads-checkbox-border-color-disabled: #{$ads-checkbox-border-color-disabled-dark};\n  --ads-checkbox-border-color-readonly: #{$ads-checkbox-border-color-readonly-dark};\n\n  // Cross\n\n  --ads-checkbox-cross-color-checked: #{$ads-checkbox-cross-color-checked-dark};\n  --ads-checkbox-cross-color-hover: #{$ads-checkbox-cross-color-hover-dark};\n  --ads-checkbox-cross-color-disabled: #{$ads-checkbox-cross-color-disabled-dark};\n  --ads-checkbox-cross-color-readonly: #{$ads-checkbox-cross-color-readonly-dark};\n\n  // Label\n\n  --ads-checkbox-label-color: #{$ads-checkbox-label-color-dark};\n  --ads-checkbox-label-color-hover: #{$ads-checkbox-label-color-hover-dark};\n  --ads-checkbox-label-color-required: #{$ads-checkbox-label-color-required-dark};\n}\n\n:host([dir='ltr']) {\n  @include ads-vars-component-checkbox-ltr;\n}\n\n:host([dir='rtl']) {\n  @include ads-vars-component-checkbox-rtl;\n}\n\n:host(:first-child) {\n  * {\n    box-sizing: border-box;\n  }\n}\n\n.c-checkbox {\n  align-items: center;\n  display: inline-flex;\n  font-family: var(--ads-font-family);\n  font-size: unset;\n  margin-left: var(--ads-checkbox-margin-left, $ads-checkbox-margin-left-ltr);\n  margin-right: var(--ads-checkbox-margin-right, $ads-checkbox-margin-right-ltr);\n\n  &__box {\n    cursor: pointer;\n    display: inline-flex;\n    flex-direction: row-reverse;\n    margin: 5px 0;\n  }\n\n  &__cross {\n    align-items: center;\n    display: flex;\n    height: var(--ads-checkbox-size-normal, $ads-checkbox-size-normal);\n    justify-content: center;\n    position: relative;\n    top: 1px;\n    width: var(--ads-checkbox-size-normal, $ads-checkbox-size-normal);\n\n    &::before {\n      background-color: var(--ads-checkbox-background-color, $ads-checkbox-background-color);\n      border-color: var(--ads-checkbox-border-color, $ads-checkbox-border-color);\n      border-radius: 2px;\n      border-style: solid;\n      border-width: $ads-checkbox-border-width;\n      box-sizing: border-box;\n      content: '';\n      display: block;\n      height: inherit;\n      position: relative;\n      width: inherit;\n    }\n\n    svg {\n      display: none;\n      height: 98%;\n      position: absolute;\n      width: 98%;\n    }\n  }\n\n  &__box:not(.is-readonly):not(.is-disabled):hover &__cross,\n  &__box.is-checked &__cross {\n    svg {\n      display: block;\n    }\n  }\n\n  &__box:not(.is-readonly):not(.is-disabled):not(.is-checked) {\n    > .c-checkbox__label:hover {\n      color: var(--ads-checkbox-label-color-hover, $ads-checkbox-label-color-hover);\n      fill: var(--ads-checkbox-label-color-hover, $ads-checkbox-label-color-hover);\n    }\n\n    &:hover .c-checkbox__cross {\n      svg {\n        fill: var(--ads-checkbox-cross-color-hover, $ads-checkbox-cross-color-hover);\n      }\n    }\n  }\n\n  &__box.is-checked .c-checkbox__cross {\n    &::before {\n      border-color: var(--ads-checkbox-border-color-checked, $ads-checkbox-border-color-checked);\n    }\n\n    svg {\n      color: var(--ads-checkbox-cross-color-checked, $ads-checkbox-cross-color-checked);\n      fill: var(--ads-checkbox-cross-color-checked, $ads-checkbox-cross-color-checked);\n    }\n  }\n\n  &__box.is-readonly .c-checkbox__cross {\n    &::before {\n      background-color: var(--ads-checkbox-background-color-readonly, $ads-checkbox-background-color-readonly);\n      border-color: var(--ads-checkbox-border-color-readonly, $ads-checkbox-border-color-readonly);\n    }\n\n    svg {\n      fill: var(--ads-checkbox-cross-color-readonly, $ads-checkbox-cross-color-readonly);\n    }\n  }\n\n  &__box.is-disabled .c-checkbox__cross {\n    &::before {\n      background-color: var(--ads-checkbox-background-color-disabled, $ads-checkbox-background-color-disabled);\n      border-color: var(--ads-checkbox-border-color-disabled, $ads-checkbox-border-color-disabled);\n    }\n\n    svg {\n      fill: var(--ads-checkbox-cross-color-disabled, $ads-checkbox-cross-color-disabled);\n    }\n  }\n\n  &__box.is-readonly,\n  &__box.is-disabled {\n    cursor: default;\n  }\n\n  &__box > &__label {\n    color: var(--ads-checkbox-label-color, $ads-checkbox-label-color);\n    font-family: var(--ads-font-family);\n    margin-left: var(--ads-checkbox-label-margin-left, $ads-checkbox-label-margin-left-ltr);\n    margin-right: var(--ads-checkbox-label-margin-right, $ads-checkbox-label-margin-right-ltr);\n\n    &:empty {\n      margin-left: 0;\n      margin-right: 0;\n    }\n  }\n\n  &__box.is-reversed &__label:not(:empty) {\n    text-align: right;\n    // Variables flipped to support reversed variant\n    margin-left: var(--ads-checkbox-label-margin-right, $ads-checkbox-label-margin-right-ltr);\n    margin-right: var(--ads-checkbox-label-margin-left, $ads-checkbox-label-margin-left-ltr);\n  }\n\n  &__label.is-required::after {\n    color: var(--ads-checkbox-label-color-required, $ads-checkbox-label-color-required);\n    content: '*';\n    margin: 0 2px;\n  }\n\n  &__box.is-small &__cross {\n    height: var(--ads-checkbox-size-small, $ads-checkbox-size-small);\n    top: 3px;\n    width: var(--ads-checkbox-size-small, $ads-checkbox-size-small);\n  }\n\n  &__box:hover.is-small &__cross,\n  &__box.is-small &__cross {\n    &::before {\n      height: var(--ads-checkbox-size-small, $ads-checkbox-size-small);\n      width: var(--ads-checkbox-size-small, $ads-checkbox-size-small);\n    }\n\n    svg {\n      font-size: var(--ads-checkbox-size-small, $ads-checkbox-size-small);\n    }\n  }\n\n  &__input {\n    border: 0;\n    clip: rect(0 0 0 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    width: 1px;\n  }\n\n  &__tooltip {\n    height: auto;\n    margin: 0 5px;\n    width: auto;\n  }\n\n  &__helper {\n    color: var(--arm-dark-grey);\n    font-size: 0.7rem;\n    margin: var(--ads-checkbox-helper-offset-margin, $ads-checkbox-helper-offset-margin-ltr);\n\n    &.is-small {\n      margin: var(--ads-checkbox-helper-offset-small-margin, $ads-checkbox-helper-offset-small-margin-ltr);\n    }\n  }\n}\n","import * as Pipeline from '../core/utils/pipeline';\nimport { Component, Element, Event, EventEmitter, Fragment, Method, Prop, State, VNode, Watch, h } from '@stencil/core';\nimport { BaseComponent } from '../core/interfaces/BaseComponent';\nimport { CheckBlurEvent, CheckBlurHandler, CheckFocusEvent, CheckFocusHandler, CheckToggleEvent, CheckToggleHandler } from './ads-checkbox.types';\nimport { Positions, Theme } from '../core/types/globalTypes';\nimport { generateId } from '../core/utils/components';\nimport { generateSVGImage, getIsElementRTL, isNullOrUndefined, isNullOrUndefinedOrEmpty } from 'utils/index';\nimport { height, svgPathData, width } from '@fortawesome/pro-regular-svg-icons/faTimes';\n\n/**\n * Checkboxes are used to toggling single or multiple options on or off. The checkbox list contains options that are not mutually exclusive, and the default state should be unchecked. The text labels on check boxes are sentence case capitalized.\n * @tag `<ads-checkbox>`\n * @slot - Content rendered as the label text\n * @example\n * <ads-checkbox>Default</ads-checkbox>\n * <ads-checkbox checked>Checked</ads-checkbox>\n * <ads-checkbox disabled>Disabled</ads-checkbox>\n * <ads-checkbox checked disabled>Checked + Disabled</ads-checkbox>\n * <ads-checkbox readonly>Readonly</ads-checkbox>\n * <ads-checkbox checked readonly>Checked + Readonly</ads-checkbox>\n * <ads-checkbox class=\"is-reversed\">Reversed</ads-checkbox>\n * <ads-checkbox class=\"is-small\">Small</ads-checkbox>\n */\n@Component({\n  tag: 'ads-checkbox',\n  styleUrl: 'ads-checkbox.scss',\n  shadow: true,\n})\nexport class AdsCheckbox implements BaseComponent {\n  /**\n   * @hidden\n   */\n  public component: string;\n\n  constructor() {\n    this.el.setAttribute('id', this.identifier || generateId('ads-checkbox'));\n    this.component = 'ads-checkbox';\n  }\n\n  @Element() private el: HTMLAdsCheckboxElement;\n\n  /**\n   * @hidden\n   */\n  @State() isCheckedInternal = false;\n\n  /**\n   * The unique identifier (optional)\n   */\n  @Prop({ attribute: 'id' }) identifier?: string;\n\n  /**\n   * The theme for this component instance (optional)\n   * Values: \"default\", \"dark\"\n   */\n  @Prop({ reflect: true }) theme?: Theme;\n\n  /**\n   * Whether or not the checkbox is checked (optional)\n   */\n  @Prop({ reflect: true }) checked?: boolean;\n\n  /**\n   * Whether or not the checkbox is readonly (optional)\n   * @default false\n   */\n  @Prop({ reflect: true }) readonly = false;\n\n  /**\n   * Whether or not the checkbox is required (optional)\n   * @default false\n   */\n  @Prop({ reflect: true }) required = false;\n\n  /**\n   * The checkbox label (optional)\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /**\n   * The value for the aria-label of the checkbox, only used if the `label` property is not provided (optional)\n   */\n  @Prop({ reflect: true }) srLabel?: string;\n\n  /**\n   * The checkbox name (optional)\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * The checkbox tooltip (optional)\n   */\n  @Prop({ reflect: true }) tooltip?: string;\n\n  /**\n   * The checkbox helper text (optional)\n   */\n  @Prop({ reflect: true }) helperText?: string;\n\n  /**\n   * Whether or not the toggle is disabled (optional)\n   * @default false\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Callback function triggered on checkbox change (optional)<br/>\n   * Usage: `document.querySelector('ads-checkbox').checkToggleHandler = ({evt: Event, checked: boolean}) => {};`\n   */\n  @Prop() checkToggleHandler?: CheckToggleHandler;\n\n  /**\n   * Callback function triggered on checkbox focus (optional)<br/>\n   * Usage: `document.querySelector('ads-checkbox').checkFocusHandler = ({evt: Event, id: string}) => {};`\n   */\n  @Prop() checkFocusHandler?: CheckFocusHandler;\n\n  /**\n   * Emits the `checkToggle` custom event.<br/>\n   * Usage: `document.querySelector('ads-checkbox').addEventListener('checkToggle', function({evt: Event, checked: boolean}) { });`\n   * @event\n   */\n  @Event({ bubbles: false }) checkToggle: EventEmitter<CheckToggleEvent>;\n\n  /**\n   * Emits the `checkBlur` custom event.<br/>\n   * Usage: `document.querySelector('ads-checkbox').addEventListener('checkBlur', function({evt: Event, id: string}) { });`\n   * @event\n   */\n  @Event({ bubbles: false }) checkBlur: EventEmitter<CheckBlurEvent>;\n\n  /**\n   * Callback function triggered on checkbox blur\n   * Usage: document.querySelector('ads-checkbox').checkBlurHandler = ({evt: Event, id: string}) => {};`\n   */\n  @Prop() checkBlurHandler?: CheckBlurHandler;\n\n  /**\n   * Emits the `checkFocus` custom event.<br/>\n   * Usage: `document.querySelector('ads-checkbox').addEventListener('checkFocus', function(evt, id) { });`\n   * @event\n   */\n  @Event({ bubbles: false }) checkFocus: EventEmitter<CheckFocusEvent>;\n\n  /**\n   * Handle identifier property changes\n   * @param {string} newValue The new value for \"identifier\"\n   * @hidden\n   */\n  @Watch('identifier')\n  handleIdentifierChange(newValue: string): void {\n    this.el.setAttribute('id', newValue || generateId('ads-checkbox'));\n  }\n\n  /**\n   * Watch for checked prop change\n   * @param {boolean}   newValue  The new value for 'checked'\n   * @private\n   * @hidden\n   */\n  @Watch('checked')\n  onCheckedChange(newValue: boolean): void {\n    if (typeof newValue === 'boolean') {\n      this.setChecked(newValue);\n    }\n  }\n\n  /**\n   * Returns value of checkbox\n   * @return {Promise<boolean>}  The checkbox value\n   */\n  @Method()\n  value(): Promise<boolean> {\n    return Promise.resolve(this.isCheckedInternal);\n  }\n\n  /**\n   * Sets internal state of checkbox\n   * @param {boolean} checked the checkbox state\n   */\n  private setChecked = (checked: boolean): void => {\n    this.isCheckedInternal = checked;\n  };\n\n  /**\n   * Handle change events\n   * @param {Event} evt   The original change event\n   * @return {void}\n   * @private\n   * @hidden\n   */\n  private handleCheckboxChange = (evt: Event): void => {\n    if (this.readonly || this.disabled) {\n      return;\n    }\n    this.checkToggle.emit({ evt, checked: !this.isCheckedInternal });\n\n    if (this.checkToggleHandler !== undefined) {\n      this.checkToggleHandler({ evt, checked: !this.isCheckedInternal });\n    }\n    if (typeof this.checked !== 'boolean') {\n      this.setChecked(!this.isCheckedInternal);\n    }\n  };\n\n  /**\n   * Handle focus events\n   * @param {FocusEvent}   evt   The original focus event\n   * @return {void}\n   * @private\n   * @hidden\n   */\n  private handleCheckboxFocus = (evt: FocusEvent): void => {\n    if (this.disabled) {\n      return;\n    }\n    this.checkFocus.emit({ evt, id: this.identifier });\n    if (this.checkFocusHandler !== undefined) {\n      this.checkFocusHandler({ evt, id: this.identifier });\n    }\n  };\n\n  /**\n   * Handle blur events\n   * @param {Event} evt   The original blur event\n   * @return {void}\n   * @private\n   * @hidden\n   */\n  private handleCheckboxBlur = (evt: FocusEvent): void => {\n    if (this.disabled) {\n      return;\n    }\n    this.checkBlur.emit({ evt, id: this.identifier });\n    if (this.checkBlurHandler !== undefined) {\n      this.checkBlurHandler({ evt, id: this.identifier });\n    }\n  };\n\n  /**\n   * Handle key up events\n   * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role#Keyboard_interactions\n   * @param  {KeyboardEvent}    evt   The original keyboard event\n   * @return {void}\n   * @private\n   * @hidden\n   */\n  private handleCheckboxKeyDown = (evt: KeyboardEvent): void => {\n    if (evt.key === 'Enter' || evt.key === ' ') {\n      evt.preventDefault();\n      this.handleCheckboxChange(evt);\n    }\n  };\n\n  protected componentWillLoad(): void {\n    if (this.checked === true || this.checked === false) {\n      this.setChecked(this.checked);\n    }\n  }\n\n  protected componentDidLoad(): void {\n    Pipeline.addComponent(this.el);\n  }\n\n  protected disconnectedCallback(): void {\n    Pipeline.removeComponent(this.el);\n  }\n\n  /**\n   * Handle rendering the input element\n   * @returns {HTMLElement} the input element for the checkbox\n   */\n  private renderInputElement(): HTMLElement {\n    const inputAttributes: {\n      id: string;\n      name: string;\n      tabIndex: number;\n      'aria-hidden': string;\n      checked?: boolean;\n      disabled?: boolean;\n      readonly?: boolean;\n      required?: boolean;\n    } = {\n      id: `ads:checkbox:${this.identifier}:input`,\n      name: this.name,\n      tabIndex: -1,\n      'aria-hidden': 'true',\n    };\n\n    if (this.isCheckedInternal) {\n      inputAttributes['checked'] = true;\n    }\n    if (this.disabled) {\n      inputAttributes['disabled'] = true;\n    }\n    if (this.readonly) {\n      inputAttributes['readonly'] = true;\n    }\n    if (this.required) {\n      inputAttributes['required'] = true;\n    }\n\n    return (<input {...inputAttributes} class=\"c-checkbox__input\" type=\"checkbox\" />) as HTMLElement;\n  }\n\n  /**\n   * Handle rendering the label and cross elements\n   * @param {boolean} isReversed Whether the content is reversed\n   * @returns {VNode} the label and cross elements for the checkbox\n   */\n  private renderContentContainer(isReversed: boolean): VNode {\n    const checkboxClasses = ['c-checkbox__box'];\n    if (isReversed) {\n      checkboxClasses.push('is-reversed');\n    }\n    if (this.isCheckedInternal) {\n      checkboxClasses.push('is-checked');\n    }\n    if (this.disabled) {\n      checkboxClasses.push('is-disabled');\n    }\n    if (this.readonly) {\n      checkboxClasses.push('is-readonly');\n    }\n    if (this.el.classList.contains('is-small')) {\n      checkboxClasses.push('is-small');\n    }\n    const labelText = !isNullOrUndefinedOrEmpty(this.label) ? this.label : this.el.childNodes.length > 0 ? ((<slot />) as HTMLElement) : null;\n    const labelClasses = ['c-checkbox__label'];\n    if (this.required) {\n      labelClasses.push('is-required');\n    }\n\n    // Generate the label\n    const labelAttributes = {\n      tabIndex: this.disabled ? -1 : 0,\n      role: 'checkbox',\n      'aria-checked': this.isCheckedInternal.toString(),\n      'aria-labelledby': !isNullOrUndefined(labelText) ? `ads:checkbox:${this.identifier}:label` : null,\n      'aria-label': isNullOrUndefined(labelText) ? (!isNullOrUndefined(this.srLabel) ? this.srLabel : null) : null,\n      'aria-readonly': this.readonly.toString(),\n      'aria-required': this.required.toString(),\n    };\n\n    const $contentEls = [\n      !isNullOrUndefined(labelText)\n        ? ((\n            <span class={labelClasses.join(' ')} aria-hidden=\"true\" id={`ads:checkbox:${this.identifier}:label`}>\n              {labelText}\n            </span>\n          ) as HTMLElement)\n        : null,\n      <span class=\"c-checkbox__cross\" role=\"presentation\">\n        {generateSVGImage({ data: svgPathData, height, width })}\n      </span>,\n    ];\n\n    if (isReversed) {\n      $contentEls.reverse();\n    }\n\n    return (\n      <div\n        class={checkboxClasses.join(' ')}\n        {...labelAttributes}\n        onBlur={this.handleCheckboxBlur}\n        onFocus={this.handleCheckboxFocus}\n        onKeyDown={this.handleCheckboxKeyDown}\n        onClick={this.handleCheckboxChange}\n      >\n        {$contentEls}\n      </div>\n    ) as VNode;\n  }\n  private getTooltipPosition = (isReversed: boolean) =>\n    isReversed ? (!getIsElementRTL(this.el) ? Positions.LEFT : Positions.RIGHT) : !getIsElementRTL(this.el) ? Positions.RIGHT : Positions.LEFT;\n\n  protected render(): VNode {\n    const isReversed = this.el.classList.contains('is-reversed');\n\n    // Generate the tooltip\n    const $tooltipEl = !isNullOrUndefinedOrEmpty(this.tooltip)\n      ? ((\n          <ads-tooltip\n            theme={this.theme}\n            class=\"c-checkbox__tooltip\"\n            /* eslint-disable */\n            onOpenChange={(evt) => ((evt.target as HTMLAdsTooltipElement).position = this.getTooltipPosition(isReversed))}\n            /* eslint-enable */\n            text={this.tooltip}\n            position={this.getTooltipPosition(isReversed)}\n          />\n        ) as HTMLElement)\n      : null;\n\n    // Generate the helper text\n    const helperLabel = !isNullOrUndefinedOrEmpty(this.helperText)\n      ? ((\n          <div class={`c-checkbox__helper ${this.el.classList.contains('is-small') ? 'is-small' : ''}`}>\n            <label htmlFor={this.name}>{this.helperText}</label>\n          </div>\n        ) as HTMLElement)\n      : null;\n\n    const $elements = [this.renderContentContainer(isReversed), $tooltipEl, this.renderInputElement()];\n    isReversed ? $elements.reverse() : null;\n\n    return (\n      <Fragment>\n        <div id={`ads:checkbox:${this.identifier}`} class=\"c-checkbox\">\n          {$elements}\n        </div>\n        {helperLabel}\n      </Fragment>\n    ) as VNode;\n  }\n}\n"],"mappings":"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","ignoreList":[]}