'use strict';

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

const index = require('./index-53b94a75.js');
const utils = require('./utils-f67712aa.js');
const statusNote = require('./status-note-b89242d6.js');

const checkboxCss = ":host,scale-checkbox{--spacing-x:var(--scl-spacing-8);--transition:all var(--scl-motion-duration-fast)\n    var(--scl-motion-easing-standard);--color-text:var(--scl-color-text-standard);--color-error:var(--scl-color-text-error);--color-disabled:var(--scl-color-background-disabled);--color-standard:var(--scl-color-background-standard);--background-disabled:var(--scl-color-white);--color-primary:var(--scl-color-primary, #e20074);--color-focus:var(--scl-color-focus);--color-primary-hover:var(--scl-color-primary-hover, #f90984);--color-primary-active:var(--scl-color-primary-active, #cb0068);--width-control:var(--scl-spacing-16);--height-control:var(--scl-spacing-16);--transition-control:var(--transition);--spacing-control:var(--scl-spacing-2);--spacing-left-control:var(--scl-spacing-4);--radius-control:var(--scl-radius-4);--border-width-control:var(--scl-spacing-1);--transition-helper-text:var(--transition);--spacing-left-helper-text:calc(var(--width-control) + var(--spacing-x));--font-size-helper-text:var(--scl-font-size-12);--font-weight-helper-text:var(--scl-font-weight-bold);--line-height-helper-text:var(--scl-font-line-height-133);--color-helper-text:var(--scl-color-blue-70);--font-weight-label:var(--scl-font-weight-medium);--transition-label:var(--transition);--color-icon-checked-disabled:var(--scl-color-grey-30);--color-icon-checked-active:var(--scl-color-white);--width-icon:var(--scl-spacing-12);--height-icon:var(--scl-spacing-12);--stroke-width:var(--stroke-width-checkbox, 0.5px)}:host,scale-checkbox{display:flex;width:fit-content;padding:0 2px 0 2px;flex-direction:column;color:var(--color-text)}scale-checkbox [part='icon'],scale-checkbox [part='checkbox'],scale-checkbox [part='label'],scale-checkbox [part='helper-text']{transition:var(--transition)}scale-checkbox [part='input'],scale-checkbox.hideLabel [part='label']{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}scale-checkbox [part='checkbox']{display:flex;flex:0 0 auto;justify-content:center;align-items:center;margin:var(--spacing-control) 0;width:var(--width-control);height:var(--height-control);border-radius:var(--radius-control);border:var(--border-width-control) solid var(--color-text)}scale-checkbox [part='label']{font-weight:var(--font-weight-label);margin-left:var(--spacing-x)}scale-checkbox [part='icon']{width:var(--width-icon);height:var(--height-icon);color:var(--color-icon-checked-active)}scale-checkbox [part='icon'] svg{width:100%;height:100%}scale-checkbox [part='icon'] svg rect,scale-checkbox [part='icon'] svg path{stroke:currentColor;stroke-width:var(--stroke-width)}scale-checkbox [part='container']{align-items:center;display:flex}scale-checkbox [part='helper-text']{font-size:var(--font-size-helper-text);font-weight:var(--font-weight-helper-text);color:var(--color-helper-text);padding-left:calc(\n    var(--width-control) + var(--spacing-x) + var(--border-width-control) * 2\n  )}scale-checkbox.checked [part='checkbox'],scale-checkbox.indeterminate [part='checkbox']{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-icon-checked-active)}scale-checkbox [part='input']:focus~[part='container'] [part='checkbox']{box-shadow:0 0 0 var(--scl-spacing-2) var(--color-focus)}scale-checkbox [part='container']:hover{color:var(--color-primary-hover);cursor:pointer}scale-checkbox.checked [part='container']:hover [part='checkbox'],scale-checkbox.indeterminate [part='container']:hover [part='checkbox']{background:var(--color-primary-hover);border-color:var(--color-primary-hover)}scale-checkbox [part='input']:active~[part='container'],scale-checkbox [part='container']:active{color:var(--color-primary-active)}scale-checkbox [part='input']:active~[part='container'] [part='checkbox'],scale-checkbox.checked [part='container']:active [part='checkbox'],scale-checkbox.indeterminate [part='container']:active [part='checkbox']{background:var(--color-primary-active);border-color:var(--color-primary-active)}scale-checkbox.error [part='helper-text']{color:var(--color-error)}scale-checkbox.error [part='checkbox']{border-color:var(--color-error);box-shadow:0 0 0 var(--scl-spacing-1) var(--color-error)}scale-checkbox.disabled{cursor:not-allowed}scale-checkbox.disabled [part='container'],scale-checkbox.disabled [part='helper-text']{color:var(--color-disabled);pointer-events:none}scale-checkbox.checked.disabled [part='checkbox']{background:var(--color-disabled);border-color:var(--color-disabled)}scale-checkbox.checked.disabled [part='icon']{color:var(--color-icon-checked-disabled)}";

let i = 0;
const Checkbox = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.scaleChange = index.createEvent(this, "scale-change", 7);
    this.scaleChangeLegacy = index.createEvent(this, "scaleChange", 7);
    /** (optional) Input label */
    this.label = '';
    /** (optional) Hides the specified label visually */
    this.hideLabel = false;
    /** @deprecated - invalid should replace status */
    this.status = '';
    /** (optional) Input status */
    this.invalid = false;
    /** (optional) Input disabled */
    this.disabled = false;
    /** (optional) Active switch */
    this.checked = false;
    /** (optional) indeterminate */
    this.indeterminate = false;
    /** (optional) Input value */
    this.value = '';
    this.id = i++;
    this.handleChange = (ev) => {
      if (this.indeterminate) {
        this.indeterminate = false;
        this.checked = true;
        ev.target.checked = true;
      }
      else {
        this.checked = ev.target.checked;
      }
      const { checked, indeterminate, value, disabled } = this;
      utils.emitEvent(this, 'scaleChange', { checked, indeterminate, value, disabled });
    };
  }
  componentDidRender() {
    if (this.status !== '') {
      statusNote.statusNote({
        tag: 'deprecated',
        message: 'Property "status" is deprecated. Please use the "invalid" property!',
        type: 'warn',
        source: this.host,
      });
    }
  }
  connectedCallback() {
    if (!this.inputId) {
      this.inputId = 'input-checkbox-' + this.id;
    }
  }
  /* Accessibility: rendering the icon *only* when checked, otherwise is always visible in HCM */
  renderIcon() {
    if (this.indeterminate) {
      return (index.h("scale-icon-action-indeterminate", { part: "icon", decorative: true }));
    }
    if (this.checked) {
      return (index.h("scale-icon-action-success", { part: "icon", decorative: true }));
    }
  }
  renderHelperText(text) {
    if (this.helperText && this.helperText !== '') {
      return (index.h("div", { part: "helper-text", id: text.id, "aria-live": "polite", "aria-relevant": "additions removals" }, text.content));
    }
  }
  render() {
    const helperText = {
      id: this.helperText ? `helper-text-${this.id}` : null,
      content: this.helperText,
    };
    return (index.h(index.Host, { class: {
        checked: this.checked,
        indeterminate: this.indeterminate,
        disabled: this.disabled,
        error: this.status === 'error' || this.invalid,
        hideLabel: this.hideLabel,
      } }, index.h("input", { type: "checkbox", part: "input", name: this.name || null, id: this.inputId, value: this.value, checked: this.checked, indeterminate: this.indeterminate, "aria-label": this.ariaLabel, "aria-checked": this.indeterminate ? 'mixed' : false, "aria-invalid": this.status === 'error' || this.invalid, "aria-describedBy": helperText.id, disabled: this.disabled, onChange: this.handleChange }), index.h("label", { part: "container", htmlFor: this.inputId }, index.h("div", { part: "checkbox" }, this.renderIcon()), index.h("div", { part: "label" }, this.label || index.h("slot", null))), this.renderHelperText(helperText)));
  }
  get host() { return index.getElement(this); }
};
Checkbox.style = checkboxCss;

const iconCss = "scale-icon{--display:inline-flex;--transition:all var(--scl-motion-duration-fast)\n    var(--scl-motion-easing-standard);display:var(--display)}scale-icon path{transition:var(--transition)}@media screen and (forced-colors: active), (-ms-high-contrast: active){scale-icon svg,.scale-icon{color:white;stroke:white}}";

const ActionIndeterminate = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    /** (optional) The width and height in pixels */
    this.size = 24;
    /** (optional) Sets the icon color via the `fill` attribute */
    this.fill = 'currentColor';
    /** (optional) Alias for `fill` */
    this.color = 'currentColor';
    /** (optional) If `true`, the icon changes visually */
    this.selected = false;
    /** (optional) If `true` the SVG element will get `aria-hidden="true"` */
    this.decorative = false;
  }
  connectedCallback() {
    if (!this.hostElement.hasAttribute('styles')) {
      this.hostElement.style.display = 'inline-flex';
    }
  }
  render() {
    const ariaHidden = this.decorative ? { 'aria-hidden': 'true' } : {};
    return (index.h(index.Host, null, index.h("svg", Object.assign({ class: "scale-icon", xmlns: "http://www.w3.org/2000/svg", width: this.size, height: this.size, viewBox: "0 0 24 24" }, ariaHidden), this.accessibilityTitle && index.h("title", null, this.accessibilityTitle), index.h("g", { fill: ((this.fill === 'currentColor') ? this.color : this.fill) }, this.selected ? (index.h("g", null, index.h("rect", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "2", rx: "0.75", "fill-rule": "evenodd", x: "4", y: "11.25" }))) : (index.h("g", null, index.h("rect", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "2", rx: "0.75", "fill-rule": "evenodd", x: "4", y: "11.25" })))))));
  }
  get hostElement() { return index.getElement(this); }
};
ActionIndeterminate.style = iconCss;

exports.scale_checkbox = Checkbox;
exports.scale_icon_action_indeterminate = ActionIndeterminate;
