'use strict';

var swapModule_entry = require('./swap-module-BZ0C_ywD.js');
var index = require('./index-CAgSYWnN.js');
var ifDefined = require('./if-defined-C8-lLqpT.js');
var ref = require('./ref-DoziWPoT.js');

// -- State --------------------------------------------- //
const state = swapModule_entry.proxy({
    isLegalCheckboxChecked: false
});
// -- Controller ---------------------------------------- //
const OptionsStateController = {
    state,
    subscribe(callback) {
        return swapModule_entry.subscribe(state, () => callback(state));
    },
    subscribeKey(key, callback) {
        return swapModule_entry.subscribeKey(state, key, callback);
    },
    setIsLegalCheckboxChecked(isLegalCheckboxChecked) {
        state.isLegalCheckboxChecked = isLegalCheckboxChecked;
    }
};

var styles$2 = swapModule_entry.css `
  label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    column-gap: ${({ spacing }) => spacing[2]};
  }

  label > input[type='checkbox'] {
    height: 0;
    width: 0;
    opacity: 0;
    position: absolute;
  }

  label > span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    border: 1px solid ${({ colors }) => colors.neutrals400};
    color: ${({ colors }) => colors.white};
    background-color: transparent;
    will-change: border-color, background-color;
  }

  label > span > wui-icon {
    opacity: 0;
    will-change: opacity;
  }

  label > input[type='checkbox']:checked + span > wui-icon {
    color: ${({ colors }) => colors.white};
  }

  label > input[type='checkbox']:not(:checked) > span > wui-icon {
    color: ${({ colors }) => colors.neutrals900};
  }

  label > input[type='checkbox']:checked + span > wui-icon {
    opacity: 1;
  }

  /* -- Sizes --------------------------------------------------- */
  label[data-size='lg'] > span {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    border-radius: ${({ borderRadius }) => borderRadius[10]};
  }

  label[data-size='md'] > span {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    border-radius: ${({ borderRadius }) => borderRadius[2]};
  }

  label[data-size='sm'] > span {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    border-radius: ${({ borderRadius }) => borderRadius[1]};
  }

  /* -- Focus states --------------------------------------------------- */
  label > input[type='checkbox']:focus-visible + span,
  label > input[type='checkbox']:focus + span {
    border: 1px solid ${({ tokens }) => tokens.core.borderAccentPrimary};
    box-shadow: 0px 0px 0px 4px rgba(9, 136, 240, 0.2);
  }

  /* -- Checked states --------------------------------------------------- */
  label > input[type='checkbox']:checked + span {
    background-color: ${({ tokens }) => tokens.core.iconAccentPrimary};
    border: 1px solid transparent;
  }

  /* -- Hover states --------------------------------------------------- */
  input[type='checkbox']:not(:checked):not(:disabled) + span:hover {
    border: 1px solid ${({ colors }) => colors.neutrals700};
    background-color: ${({ colors }) => colors.neutrals800};
    box-shadow: none;
  }

  input[type='checkbox']:checked:not(:disabled) + span:hover {
    border: 1px solid transparent;
    background-color: ${({ colors }) => colors.accent080};
    box-shadow: none;
  }

  /* -- Disabled state --------------------------------------------------- */
  label > input[type='checkbox']:checked:disabled + span {
    border: 1px solid transparent;
    opacity: 0.3;
  }

  label > input[type='checkbox']:not(:checked):disabled + span {
    border: 1px solid ${({ colors }) => colors.neutrals700};
  }

  label:has(input[type='checkbox']:disabled) {
    cursor: auto;
  }

  label > input[type='checkbox']:disabled + span {
    cursor: not-allowed;
  }
`;

var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
const ICON_SIZE = {
    lg: 'md',
    md: 'sm',
    sm: 'sm'
};
let WuiCheckBox = class WuiCheckBox extends swapModule_entry.i {
    constructor() {
        super(...arguments);
        this.inputElementRef = ref.e();
        this.checked = undefined;
        this.disabled = false;
        this.size = 'md';
    }
    render() {
        const iconSize = ICON_SIZE[this.size];
        return swapModule_entry.b `
      <label data-size=${this.size}>
        <input
          ${ref.n(this.inputElementRef)}
          ?checked=${ifDefined.o(this.checked)}
          ?disabled=${this.disabled}
          type="checkbox"
          @change=${this.dispatchChangeEvent}
        />
        <span>
          <wui-icon name="checkmarkBold" size=${iconSize}></wui-icon>
        </span>
        <slot></slot>
      </label>
    `;
    }
    dispatchChangeEvent() {
        this.dispatchEvent(new CustomEvent('checkboxChange', {
            detail: this.inputElementRef.value?.checked,
            bubbles: true,
            composed: true
        }));
    }
};
WuiCheckBox.styles = [swapModule_entry.resetStyles, styles$2];
__decorate$2([
    index.n({ type: Boolean })
], WuiCheckBox.prototype, "checked", void 0);
__decorate$2([
    index.n({ type: Boolean })
], WuiCheckBox.prototype, "disabled", void 0);
__decorate$2([
    index.n()
], WuiCheckBox.prototype, "size", void 0);
WuiCheckBox = __decorate$2([
    index.customElement('wui-checkbox')
], WuiCheckBox);

var styles$1 = swapModule_entry.css `
  :host {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  wui-checkbox {
    padding: ${({ spacing }) => spacing['3']};
  }
  a {
    text-decoration: none;
    color: ${({ tokens }) => tokens.theme.textSecondary};
    font-weight: 500;
  }
`;

var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
let W3mLegalCheckbox = class W3mLegalCheckbox extends swapModule_entry.i {
    constructor() {
        super();
        this.unsubscribe = [];
        this.checked = OptionsStateController.state.isLegalCheckboxChecked;
        this.unsubscribe.push(OptionsStateController.subscribeKey('isLegalCheckboxChecked', val => {
            this.checked = val;
        }));
    }
    disconnectedCallback() {
        this.unsubscribe.forEach(unsubscribe => unsubscribe());
    }
    render() {
        const { termsConditionsUrl, privacyPolicyUrl } = swapModule_entry.OptionsController.state;
        const legalCheckbox = swapModule_entry.OptionsController.state.features?.legalCheckbox;
        if (!termsConditionsUrl && !privacyPolicyUrl) {
            return null;
        }
        if (!legalCheckbox) {
            return null;
        }
        return swapModule_entry.b `
      <wui-checkbox
        ?checked=${this.checked}
        @checkboxChange=${this.onCheckboxChange.bind(this)}
        data-testid="wui-checkbox"
      >
        <wui-text color="secondary" variant="sm-regular" align="left">
          I agree to our ${this.termsTemplate()} ${this.andTemplate()} ${this.privacyTemplate()}
        </wui-text>
      </wui-checkbox>
    `;
    }
    andTemplate() {
        const { termsConditionsUrl, privacyPolicyUrl } = swapModule_entry.OptionsController.state;
        return termsConditionsUrl && privacyPolicyUrl ? 'and' : '';
    }
    termsTemplate() {
        const { termsConditionsUrl } = swapModule_entry.OptionsController.state;
        if (!termsConditionsUrl) {
            return null;
        }
        return swapModule_entry.b `<a rel="noreferrer" target="_blank" href=${termsConditionsUrl}>terms of service</a>`;
    }
    privacyTemplate() {
        const { privacyPolicyUrl } = swapModule_entry.OptionsController.state;
        if (!privacyPolicyUrl) {
            return null;
        }
        return swapModule_entry.b `<a rel="noreferrer" target="_blank" href=${privacyPolicyUrl}>privacy policy</a>`;
    }
    onCheckboxChange() {
        OptionsStateController.setIsLegalCheckboxChecked(!this.checked);
    }
};
W3mLegalCheckbox.styles = [styles$1];
__decorate$1([
    index.r()
], W3mLegalCheckbox.prototype, "checked", void 0);
W3mLegalCheckbox = __decorate$1([
    index.customElement('w3m-legal-checkbox')
], W3mLegalCheckbox);

var styles = swapModule_entry.css `
  :host {
    display: block;
    width: 100px;
    height: 100px;
  }

  svg {
    width: 100px;
    height: 100px;
  }

  rect {
    fill: none;
    stroke: ${tokens => tokens.colors.accent100};
    stroke-width: 3px;
    stroke-linecap: round;
    animation: dash 1s linear infinite;
  }

  @keyframes dash {
    to {
      stroke-dashoffset: 0px;
    }
  }
`;

var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
let WuiLoadingThumbnail = class WuiLoadingThumbnail extends swapModule_entry.i {
    constructor() {
        super(...arguments);
        this.radius = 36;
    }
    render() {
        return this.svgLoaderTemplate();
    }
    svgLoaderTemplate() {
        const radius = this.radius > 50 ? 50 : this.radius;
        const standardValue = 36;
        const radiusFactor = standardValue - radius;
        const dashArrayStart = 116 + radiusFactor;
        const dashArrayEnd = 245 + radiusFactor;
        const dashOffset = 360 + radiusFactor * 1.75;
        return swapModule_entry.b `
      <svg viewBox="0 0 110 110" width="110" height="110">
        <rect
          x="2"
          y="2"
          width="106"
          height="106"
          rx=${radius}
          stroke-dasharray="${dashArrayStart} ${dashArrayEnd}"
          stroke-dashoffset=${dashOffset}
        />
      </svg>
    `;
    }
};
WuiLoadingThumbnail.styles = [swapModule_entry.resetStyles, styles];
__decorate([
    index.n({ type: Number })
], WuiLoadingThumbnail.prototype, "radius", void 0);
WuiLoadingThumbnail = __decorate([
    index.customElement('wui-loading-thumbnail')
], WuiLoadingThumbnail);

exports.OptionsStateController = OptionsStateController;
//# sourceMappingURL=index-BO0YLwvx.js.map

//# sourceMappingURL=index-BO0YLwvx.js.map