v4web-components/dist/cjs/lab-ds-checkbox_4.cjs.entry.js

Stencil Component Starter

'use strict';

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

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

const labDsCheckboxCss = ".container{display:block;position:relative;padding-left:2.3rem;cursor:pointer;font-size:1.375rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.label-text{font:var(--lab-ds-semantic-typography-body-none-decoration-p2-regular);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.wrap-text .label-text{white-space:wrap}.label-text.checked{font:var(--lab-ds-semantic-typography-body-none-decoration-p2-bold)}.container-label{display:flex;gap:0.7rem;align-items:flex-start}.container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkmark{position:absolute;top:0;left:0;height:1.25rem;width:1.25rem;border-style:solid;border-color:var(--lab-ds-semantic-color-bg-cloudy);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);border-width:var(--lab-ds-semantic-selectable-border-width-m);background-color:var(--lab-ds-semantic-color-bg-default)}.error.checkmark{border-color:var(--lab-ds-semantic-selectable-color-border-dark-error);background-color:rgba(0, 0, 0, 0)}.container:hover input:not([disabled]):not(:checked)~.checkmark{background-color:var(--lab-ds-semantic-selectable-color-primary-hover)}.container:active input:not([disabled])~.checkmark{background-color:var(--lab-ds-semantic-selectable-color-primary-press)}.container:focus:not([disabled]){outline-style:solid;outline-color:var(--lab-ds-semantic-selectable-color-primary-focus);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);outline-width:var(--lab-ds-semantic-selectable-border-width-s);outline-offset:0.4rem}.container.disabled{opacity:var(--lab-ds-core-opacity-80)}.container input:checked~.checkmark{background-color:rgba(0, 0, 0, 0);border-style:solid;border-color:var(--lab-ds-semantic-selectable-color-primary-default)}.checkmark:after{content:'';position:absolute;display:none}.container input:checked~.checkmark:after{display:block}.container .checkmark:after{left:0.438rem;top:0.125rem;width:0.313rem;height:0.625rem;border:solid var(--lab-ds-semantic-selectable-color-primary-default);border-width:0 0.188rem 0.188rem 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}";

const LabDsCheckbox = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.handleCheckbox = index.createEvent(this, "handleCheckbox", 7);
    this.label = undefined;
    this.avatar = false;
    this.error = false;
    this.disabled = false;
    this.checked = false;
    this.wrapText = false;
  }
  handleClick() {
    this.handleCheckbox.emit(this.checked);
    this.checked = !this.checked;
  }
  render() {
    return (index.h("label", { class: `container ${this.disabled ? 'disabled' : ''} ${this.wrapText ? 'wrap-text' : ''}` }, (this.avatar || this.label) && (index.h("span", { class: "container-label" }, this.avatar ? index.h("lab-ds-avatar", { size: "small" }) : null, this.label && index.h("span", { class: `label-text ${this.checked ? 'checked' : ''}` }, this.label))), index.h("input", { checked: this.checked, onClick: () => this.handleClick(), disabled: this.disabled, type: "checkbox" }), index.h("span", { class: `${this.error && 'error'} checkmark` })));
  }
};
LabDsCheckbox.style = labDsCheckboxCss;

const labDsRadioButtonCss = ".container{display:flex;align-items:center;cursor:pointer;font-size:1.375rem;gap:var(--lab-ds-semantic-selectable-space-gap-s)}input[type='radio']{appearance:none;margin:0;font:inherit;color:currentColor;width:var(--lab-ds-semantic-selectable-size-xs);height:var(--lab-ds-semantic-selectable-size-xs);border:var(--lab-ds-semantic-selectable-border-width-s) solid var(--lab-ds-semantic-selectable-color-border-default);border-radius:50%;display:flex;justify-content:center;align-items:center}input[type='radio']::before{content:'';width:var(--lab-ds-semantic-selectable-size-xxs);height:var(--lab-ds-semantic-selectable-size-xxs);border-radius:50%;transform:scale(0);transition:120ms transform ease-in-out;border-color:var(--lab-ds-semantic-selectable-color-primary-default)}input[type='radio']:checked{border-color:var(--lab-ds-semantic-selectable-color-primary-default)}input[type='radio']:checked::before{background-color:var(--lab-ds-semantic-selectable-color-primary-default);transform:scale(1)}.label-text{font:var(--lab-ds-semantic-typography-body-none-decoration-p2-regular);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text.checked{font:var(--lab-ds-semantic-typography-body-none-decoration-p2-bold)}.error.checkmark{border-color:var(--lab-ds-semantic-selectable-color-border-error);background-color:rgba(0, 0, 0, 0)}.container:hover input:not([disabled]):not(:checked)~.checkmark{background-color:var(--lab-ds-semantic-selectable-color-primary-hover)}.container:active input:not([disabled])~.checkmark{background-color:var(--lab-ds-semantic-selectable-color-primary-press)}.container:focus-within:not([disabled]){outline-style:solid;outline-color:var(--lab-ds-semantic-selectable-color-primary-focus);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);outline-width:var(--lab-ds-semantic-selectable-border-width-s);outline-offset:0.4rem}.container.disabled{opacity:var(--lab-ds-core-opacity-80)}";

const LabDsRadioButton = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.handleRadioButton = index.createEvent(this, "handleRadioButton", 7);
    this.label = undefined;
    this.avatar = false;
    this.error = false;
    this.disabled = false;
    this.checked = false;
  }
  handleClick() {
    this.handleRadioButton.emit(this.checked);
  }
  render() {
    return (index.h("label", { class: `container ${this.disabled ? 'disabled' : ''}` }, index.h("input", { checked: this.checked, onClick: () => this.handleClick(), disabled: this.disabled, type: "radio" }), this.avatar ? index.h("lab-ds-avatar", { size: "small" }) : null, index.h("span", { class: `label-text ${this.checked ? 'checked' : ''}` }, this.label)));
  }
};
LabDsRadioButton.style = labDsRadioButtonCss;

const labDsSearchBarCss = "input{border:none;outline:none;padding:0;background-color:rgba(0, 0, 0, 0);color:var(--lab-ds-semantic-color-fg-default)}.v4-input{display:flex;flex-direction:column;gap:var(--lab-ds-semantic-selectable-space-gap-xs);color:var(--lab-ds-semantic-color-fg-default);max-width:100%}.v4-input .title-text{text-align:left;font:var(--lab-ds-semantic-typography-heading-h7)}.v4-input .input-helper{display:flex;flex-direction:column;gap:var(--lab-ds-semantic-selectable-space-gap-s)}.v4-input .helper-text{display:flex;align-items:center;gap:var(--lab-ds-semantic-selectable-space-gap-xs);font:var(--lab-ds-semantic-typography-body-none-decoration-p3-regular)}.clean-visible{display:none}.input-field{width:100%}.input-icon{display:flex;align-items:center;border-style:solid;border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);border-width:var(--lab-ds-semantic-selectable-border-width-m);border-color:var(--lab-ds-semantic-selectable-color-border-default);background-color:var(--lab-ds-semantic-selectable-color-bg-default);padding-top:var(--lab-ds-semantic-selectable-space-padding-sm);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-sm);padding-left:var(--lab-ds-semantic-selectable-space-padding-m);padding-right:var(--lab-ds-semantic-selectable-space-padding-m);gap:var(--lab-ds-semantic-selectable-space-gap-xs);margin-bottom:0}.input-icon .input-field{color:var(--lab-ds-semantic-color-fg-enabled);font:var(--lab-ds-semantic-typography-body-none-decoration-p2-regular)}.input-icon .icon.right{cursor:pointer;margin-top:-0.5rem;margin-bottom:-0.5rem}.options{font:var(--lab-ds-semantic-typography-body-none-decoration-p2-regular);position:relative}.hints{max-height:21rem;overflow-y:auto;overflow-x:hidden;border-style:solid;border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);border-width:var(--lab-ds-semantic-selectable-border-width-m);padding-right:var(--lab-ds-semantic-selectable-space-padding-m);padding-left:var(--lab-ds-semantic-selectable-space-padding-m);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-sm);padding-top:var(--lab-ds-semantic-selectable-space-padding-sm);gap:var(--lab-ds-semantic-selectable-space-gap-s);background-color:var(--lab-ds-semantic-selectable-color-bg-pure);border-color:var(--lab-ds-semantic-selectable-color-primary-press);color:var(--lab-ds-semantic-color-fg-default)}.hint-container{display:flex;align-items:center;justify-content:left;gap:var(--lab-ds-semantic-selectable-space-gap-s);cursor:pointer}.input-icon:focus-within{box-shadow:var(--lab-ds-semantic-selectable-shadow-m);border-color:var(--lab-ds-semantic-selectable-color-primary-press)}.input-icon:hover{box-shadow:var(--lab-ds-semantic-selectable-shadow-s);border-color:var(--lab-ds-semantic-selectable-color-primary-hover)}.input-icon:active{box-shadow:var(--lab-ds-semantic-selectable-shadow-m);border-color:var(--lab-ds-semantic-selectable-color-primary-press)}.v4-input.disabled .input-icon{background-color:var(--lab-ds-semantic-selectable-color-bg-disabled);border-color:var(--lab-ds-semantic-selectable-color-border-disabled);color:var(--lab-ds-semantic-selectable-color-bg-dark-success);box-shadow:none}.v4-input.disabled .title-text{color:var(--lab-ds-semantic-color-fg-disabled)}.v4-input.disabled .input-field{color:var(--lab-ds-semantic-color-fg-disabled)}.v4-input.disabled .icon{color:var(--lab-ds-semantic-color-fg-disabled)}.v4-input.disabled .input-helper{color:var(--lab-ds-semantic-color-fg-disabled)}";

const LabDsSearchBar = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.changeInput = index.createEvent(this, "changeInput", 7);
    this.value = undefined;
    this.hints = undefined;
    this.isHintVisible = false;
    this.valueState = this.value;
    this.label = '';
    this.disabled = false;
  }
  handleChange(event) {
    if (event === '') {
      this.changeInput.emit('');
      this.value = '';
      this.valueState = '';
    }
    else {
      this.changeInput.emit(event.value);
      this.valueState = event.value;
    }
  }
  checkForClickOutside(ev) {
    if (this.el.contains(ev.target)) {
      return;
    }
    this.isHintVisible = false;
  }
  render() {
    var _a, _b, _c;
    return (index.h("div", { class: `v4-input ${this.disabled && 'disabled'}` }, index.h("div", { onFocusin: () => (this.isHintVisible = true), class: "input-icon" }, index.h("lab-ds-icon-not-selectable", { class: "icon left", size: "small", icon: "search" }), index.h("input", { disabled: this.disabled, placeholder: this.label, class: "input-field", type: "text", value: this.value, onInput: event => this.handleChange(event.target) }), ((_a = this.valueState) === null || _a === void 0 ? void 0 : _a.length) > 0 && (index.h("lab-ds-icon-selectable", { onClick: () => {
        this.handleChange('');
      }, class: `icon right`, size: "small", icon: "close" }))), ((_b = this.hints) === null || _b === void 0 ? void 0 : _b.length) > 0 && this.isHintVisible && (index.h("div", { class: "options" }, index.h("div", { class: "hints" }, (_c = this.hints) === null || _c === void 0 ? void 0 : _c.map((hint, index$1) => {
      if (index$1 > 4)
        return null;
      return (index.h("div", { onClick: () => {
          this.handleChange({ value: hint.name });
          this.isHintVisible = false;
        }, class: 'hint-container' }, index.h("lab-ds-icon-not-selectable", { class: 'icon', size: "small", icon: "history" }), hint.name, ' '));
    }))))));
  }
  get el() { return index.getElement(this); }
};
LabDsSearchBar.style = labDsSearchBarCss;

const labDsSkeletonCss = ".v4-skeleton-square{min-height:var(--lab-ds-semantic-placeholder-size-l);max-height:var(--lab-ds-semantic-placeholder-size-l);background-color:var(--lab-ds-semantic-color-bg-cloudy);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);position:relative;overflow:hidden}.v4-skeleton-circle{position:relative;overflow:hidden;display:flex;aspect-ratio:1/1;min-height:var(--lab-ds-semantic-placeholder-size-xxs);max-height:var(--lab-ds-semantic-placeholder-size-xxl);min-width:var(--lab-ds-semantic-placeholder-size-xxs);max-width:var(--lab-ds-semantic-placeholder-size-xxl);background-color:var(--lab-ds-semantic-color-bg-cloudy);border-radius:var(--lab-ds-semantic-selectable-border-radius-pill)}.v4-skeleton-circle::after{position:absolute;top:0;right:0;bottom:0;left:0;transform:translateX(-100%);background-image:linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #ffffffb1 50%, rgba(0, 0, 0, 0) 100%);animation:shimmer 3s infinite;animation-timing-function:linear;content:''}.v4-skeleton-square::after{position:absolute;top:0;right:0;bottom:0;left:0;transform:translateX(-100%);background-image:linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #ffffffdd 50%, rgba(0, 0, 0, 0) 100%);animation:shimmer 3s infinite;animation-timing-function:linear;content:''}@keyframes shimmer{100%{transform:translateX(100%)}}";

const LabDsSkeleton = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.type = 'square';
    this.width = '100%';
    this.height = '100%';
  }
  render() {
    return (index.h("div", null, index.h("div", { style: { width: this.width, height: this.height }, class: `${this.type === 'square' ? 'v4-skeleton-square' : 'v4-skeleton-circle'}` })));
  }
};
LabDsSkeleton.style = labDsSkeletonCss;

exports.lab_ds_checkbox = LabDsCheckbox;
exports.lab_ds_radio_button = LabDsRadioButton;
exports.lab_ds_search_bar = LabDsSearchBar;
exports.lab_ds_skeleton = LabDsSkeleton;

//# sourceMappingURL=lab-ds-checkbox_4.cjs.entry.js.map