tuix-webcomponents 0.69.0 → 0.70.0

package/dist/src/tuix-icon-button/TuixIconButton.js

@@ -1,17 +1,26 @@
 import { __decorate } from "tslib";
 import { css, html } from 'lit';
-import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
+import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums.js';
 import { customElement, property } from 'lit/decorators.js';
-import { ScreenSizes } from '../utils/screenSizes.enum';
-import { buttonColorStyles, hostButtonStyles, } from '../tuix-button/TuixButton.styles';
-import { TuixBaseButton } from '../tuix-button/TuixBaseButton';
+import { ScreenSizes } from '../utils/screenSizes.enum.js';
+import { buttonColorStyles, hostButtonStyles, } from '../tuix-button/TuixButton.styles.js';
+import { TuixBaseButton } from '../tuix-button/TuixBaseButton.js';
 let TuixIconButton = class TuixIconButton extends TuixBaseButton {
     constructor() {
         super(...arguments);
         this.icon = IconName.ARROW_DOWN;
     }
-    static { this.styles = [
-        css `
+    _updateIconColor() {
+        if (!this.icon)
+            return;
+        this.iconColor = this._getTextColor();
+    }
+    _buttonContent() {
+        return html `${this._iconTemplate(this.icon, IconSizeVariant.MEDIUM)}`;
+    }
+};
+TuixIconButton.styles = [
+    css `
       .button {
         padding: 16px;
         border-radius: 4px;
@@ -30,18 +39,9 @@ let TuixIconButton = class TuixIconButton extends TuixBaseButton {
         }
       }
     `,
-        hostButtonStyles,
-        buttonColorStyles,
-    ]; }
-    _updateIconColor() {
-        if (!this.icon)
-            return;
-        this.iconColor = this._getTextColor();
-    }
-    _buttonContent() {
-        return html `${this._iconTemplate(this.icon, IconSizeVariant.MEDIUM)}`;
-    }
-};
+    hostButtonStyles,
+    buttonColorStyles,
+];
 __decorate([
     property({ type: IconName })
 ], TuixIconButton.prototype, "icon", void 0);
@@ -49,3 +49,4 @@ TuixIconButton = __decorate([
     customElement('tuix-icon-button')
 ], TuixIconButton);
 export { TuixIconButton };
+//# sourceMappingURL=TuixIconButton.js.map

package/dist/src/tuix-icon-button/TuixIconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TuixIconButton.js","sourceRoot":"","sources":["../../../src/tuix-icon-button/TuixIconButton.ts"],"names":[],"mappings":";AAAA,OAAO,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EACL,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAG/D,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,cAAc;IAAlD;;QA0BE,SAAI,GAAG,QAAQ,CAAC,UAAU,CAAC;IAU7B,CAAC;IARoB,gBAAgB;QACjC,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO;QACvB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;IACxC,CAAC;IAEkB,cAAc;QAC/B,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,EAAE,CAAC;IACxE,CAAC;;AAlCM,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;2CAOoC,WAAW,CAAC,MAAM;;;;;;2CAMlB,WAAW,CAAC,MAAM;;;;;KAKxD;IACD,gBAAgB;IAChB,iBAAiB;CAClB,AAtBY,CAsBX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;4CACF;AA1BhB,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAoC1B;SApCY,cAAc","sourcesContent":["import { TemplateResult, css, html } from 'lit';\nimport { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport {\n  buttonColorStyles,\n  hostButtonStyles,\n} from '../tuix-button/TuixButton.styles';\nimport { TuixBaseButton } from '../tuix-button/TuixBaseButton';\n\n@customElement('tuix-icon-button')\nexport class TuixIconButton extends TuixBaseButton {\n  static styles = [\n    css`\n      .button {\n        padding: 16px;\n        border-radius: 4px;\n        border: none;\n      }\n\n      @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n        .button {\n          padding: 12px;\n        }\n      }\n\n      @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n        .button {\n          padding: 8px;\n        }\n      }\n    `,\n    hostButtonStyles,\n    buttonColorStyles,\n  ];\n\n  @property({ type: IconName })\n  icon = IconName.ARROW_DOWN;\n\n  protected override _updateIconColor() {\n    if (!this.icon) return;\n    this.iconColor = this._getTextColor();\n  }\n\n  protected override _buttonContent(): TemplateResult {\n    return html`${this._iconTemplate(this.icon, IconSizeVariant.MEDIUM)}`;\n  }\n}\n"]}

package/dist/src/tuix-input/TuixInput.d.ts

@@ -1,6 +1,6 @@
-import { LitElement, type TemplateResult, CSSResult, type PropertyValueMap } from 'lit';
+import { LitElement, TemplateResult, CSSResult, PropertyValueMap } from 'lit';
 import '../tuix-icon/TuixIcon.js';
-import { IconName } from '../tuix-icon/enums/tuix-icon.enums';
+import { IconName } from '../tuix-icon/enums/tuix-icon.enums.js';
 import { DescriptionType, InputType } from './enums/tuix-input.enums.js';
 export declare class TuixInput extends LitElement {
     _inputId: string;

package/dist/src/tuix-input/TuixInput.js

@@ -3,7 +3,7 @@ import { LitElement, html, nothing, } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import '../tuix-icon/TuixIcon.js';
-import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
+import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums.js';
 import { Palette } from '../utils/colors.js';
 import { DarkPalette } from '../utils/darkColors.js';
 import { hostStyles, inputColorStyles, inputComponentStyles, inputDescriptionStyles, inputFontStyles, inputIconStyles, inputSearchStyles, inputTitleStyles, } from './TuixInput.styles.js';
@@ -12,6 +12,7 @@ import { InputState, } from './interfaces/tuix-input.interface.js';
 import { v4 as uuidv4 } from 'uuid';
 let TuixInput = class TuixInput extends LitElement {
     constructor() {
+        var _a;
         super(...arguments);
         this._inputId = this._setIdInput();
         this.disabled = false;
@@ -24,7 +25,7 @@ let TuixInput = class TuixInput extends LitElement {
         this.readonly = false;
         this.autofocus = false;
         this._type = this.type;
-        this._letterCounter = this.value?.length || 0;
+        this._letterCounter = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0;
         this._previousType = this.type;
         this._previousValue = '';
         this._generalIconColorsLight = {
@@ -38,16 +39,6 @@ let TuixInput = class TuixInput extends LitElement {
             [InputState.DISABLED]: DarkPalette.PRIMARY_800,
         };
     }
-    static { this.styles = [
-        hostStyles,
-        inputComponentStyles,
-        inputFontStyles,
-        inputColorStyles,
-        inputTitleStyles,
-        inputIconStyles,
-        inputSearchStyles,
-        inputDescriptionStyles,
-    ]; }
     _handleInputBase(e, eventName) {
         this.dispatchEvent(new CustomEvent(eventName, {
             detail: {
@@ -101,8 +92,9 @@ let TuixInput = class TuixInput extends LitElement {
     </div>`;
     }
     _updateLetterCounter() {
+        var _a;
         if (this.maxlength != undefined && this.type === InputType.TEXT_AREA) {
-            this._letterCounter = Number(this._inputElement.value?.length);
+            this._letterCounter = Number((_a = this._inputElement.value) === null || _a === void 0 ? void 0 : _a.length);
         }
     }
     _getInputTextFeatureTemplate() {
@@ -252,6 +244,7 @@ let TuixInput = class TuixInput extends LitElement {
     </tuix-icon>`;
     }
     _getDescriptionTemplate() {
+        var _a;
         const isValidDescriptionType = this._hasValidDescriptionType();
         if (!isValidDescriptionType) {
             return html `<div></div>`;
@@ -266,7 +259,7 @@ let TuixInput = class TuixInput extends LitElement {
         return html `<div class="t-input-description">
       ${this._getIconDescriptionTemplate()}
       <span
-        >${this.description ?? defaultDescription[this.descriptionType]}</span
+        >${(_a = this.description) !== null && _a !== void 0 ? _a : defaultDescription[this.descriptionType]}</span
       >
     </div>`;
     }
@@ -319,6 +312,16 @@ let TuixInput = class TuixInput extends LitElement {
         }
     }
 };
+TuixInput.styles = [
+    hostStyles,
+    inputComponentStyles,
+    inputFontStyles,
+    inputColorStyles,
+    inputTitleStyles,
+    inputIconStyles,
+    inputSearchStyles,
+    inputDescriptionStyles,
+];
 __decorate([
     property({ type: Boolean, reflect: true })
 ], TuixInput.prototype, "disabled", void 0);
@@ -368,3 +371,4 @@ TuixInput = __decorate([
     customElement('tuix-input')
 ], TuixInput);
 export { TuixInput };
+//# sourceMappingURL=TuixInput.js.map

package/dist/src/tuix-input/TuixInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TuixInput.js","sourceRoot":"","sources":["../../../src/tuix-input/TuixInput.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  LitElement,\n  TemplateResult,\n  html,\n  nothing,\n  CSSResult,\n  PropertyValueMap,\n} from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport '../tuix-icon/TuixIcon.js';\nimport { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';\nimport { Palette } from '../utils/colors.js';\nimport { DarkPalette } from '../utils/darkColors.js';\nimport {\n  hostStyles,\n  inputColorStyles,\n  inputComponentStyles,\n  inputDescriptionStyles,\n  inputFontStyles,\n  inputIconStyles,\n  inputSearchStyles,\n  inputTitleStyles,\n} from './TuixInput.styles.js';\nimport {\n  DescriptionType,\n  IconByDescriptionType,\n  IconDescriptionColorDark,\n  IconDescriptionColorLight,\n  InputIconLocation,\n  InputType,\n} from './enums/tuix-input.enums.js';\nimport {\n  FormatIconSetParams,\n  InputState,\n} from './interfaces/tuix-input.interface.js';\nimport { v4 as uuidv4 } from 'uuid';\n\n@customElement('tuix-input')\nexport class TuixInput extends LitElement {\n  _inputId: string = this._setIdInput();\n\n  static styles: CSSResult[] = [\n    hostStyles,\n    inputComponentStyles,\n    inputFontStyles,\n    inputColorStyles,\n    inputTitleStyles,\n    inputIconStyles,\n    inputSearchStyles,\n    inputDescriptionStyles,\n  ];\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: IconName })\n  iconRight?: IconName;\n\n  @property({ type: String })\n  value = '';\n\n  @property({ type: String })\n  placeholder = '';\n\n  @property({ type: String })\n  title = '';\n\n  @property({ type: InputType })\n  type = InputType.TEXT;\n\n  @property({ type: Number })\n  maxlength?: number;\n\n  @property({ type: String })\n  description?: string;\n\n  @property({ type: DescriptionType })\n  descriptionType = DescriptionType.TEXT;\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  @property({ type: Boolean })\n  readonly = false;\n\n  @property({ type: Boolean, reflect: true })\n  autofocus = false;\n\n  @query('.t-input-container .t-input')\n  private _inputElement!: HTMLInputElement;\n\n  @state()\n  private _type = this.type;\n\n  @state()\n  private _letterCounter = this.value?.length || 0;\n\n  private _previousType = this.type;\n\n  private _previousValue = '';\n\n  private _generalIconColorsLight: Record<InputState, Palette> = {\n    [InputState.INACTIVE]: Palette.BLACK,\n    [InputState.ACTIVE]: Palette.MAIN,\n    [InputState.DISABLED]: Palette.PRIMARY_300,\n  };\n\n  private _generalIconColorsDark: Record<InputState, DarkPalette> = {\n    [InputState.INACTIVE]: DarkPalette.PRIMARY_100,\n    [InputState.ACTIVE]: DarkPalette.MAIN,\n    [InputState.DISABLED]: DarkPalette.PRIMARY_800,\n  };\n\n  private _handleInputBase(e: InputEvent, eventName: string) {\n    this.dispatchEvent(\n      new CustomEvent(eventName, {\n        detail: {\n          value:\n            (e.target instanceof HTMLInputElement ||\n              e.target instanceof HTMLTextAreaElement) &&\n            e.target.value,\n        },\n        bubbles: true,\n      })\n    );\n  }\n\n  private _handleClickOnInput() {\n    if (this.disabled) return;\n    this.dispatchEvent(\n      new CustomEvent('on-click', {\n        bubbles: true,\n      })\n    );\n  }\n\n  private _handleInput(e: InputEvent) {\n    this._handleInputBase(e, 'on-change');\n    this._updateLetterCounter();\n  }\n\n  private _handleBlur(e: InputEvent) {\n    this._handleInputBase(e, 'on-blur');\n  }\n\n  private _handlePasswordIconClick() {\n    if (this._type === InputType.PASSWORD) {\n      this._type = InputType.TEXT;\n      this._inputElement.setAttribute('type', InputType.TEXT);\n    } else {\n      this._type = InputType.PASSWORD;\n      this._inputElement.setAttribute('type', InputType.PASSWORD);\n    }\n  }\n\n  private _formatIconSet({\n    iconName,\n    colorByState,\n    location = InputIconLocation.RIGHT,\n    clickHandler = undefined,\n  }: FormatIconSetParams) {\n    const iconSetContainerClasses = {\n      't-icon-set-container': true,\n      't-icon-click': !!clickHandler,\n      [`t-icon-${location}`]: true,\n    };\n    return html`<div\n      class=\"${classMap(iconSetContainerClasses)}\"\n      @click=\"${clickHandler}\"\n    >\n      ${Object.entries(colorByState).map(\n        ([state, color]) => html`<tuix-icon\n          size=\"${IconSizeVariant.FULL}\"\n          name=\"${iconName}\"\n          color=\"${color}\"\n          class=\"t-icon-${state}\"\n        ></tuix-icon>`\n      )}\n    </div>`;\n  }\n\n  private _updateLetterCounter() {\n    if (this.maxlength != undefined && this.type === InputType.TEXT_AREA) {\n      this._letterCounter = Number(this._inputElement.value?.length);\n    }\n  }\n\n  private _getInputTextFeatureTemplate(): TemplateResult {\n    return html`${this.iconRight\n      ? this._formatIconSet({\n          iconName: this.iconRight,\n          colorByState: this.dark\n            ? this._generalIconColorsDark\n            : this._generalIconColorsLight,\n        })\n      : nothing}`;\n  }\n\n  private _getInputSearchFeatureTemplate(): TemplateResult {\n    const searchIconColorsLight: Record<InputState, Palette> = {\n      [InputState.INACTIVE]: Palette.BLACK,\n      [InputState.ACTIVE]: Palette.BLACK,\n      [InputState.DISABLED]: Palette.PRIMARY_300,\n    };\n\n    const searchIconColorsDark: Record<InputState, DarkPalette> = {\n      [InputState.INACTIVE]: DarkPalette.PRIMARY_100,\n      [InputState.ACTIVE]: DarkPalette.PRIMARY_100,\n      [InputState.DISABLED]: DarkPalette.PRIMARY_800,\n    };\n\n    return html`${this._formatIconSet({\n      iconName: IconName.SEARCH,\n      colorByState: this.dark ? searchIconColorsDark : searchIconColorsLight,\n      location: InputIconLocation.LEFT,\n    })}`;\n  }\n\n  private _getInputPasswordFeatureTemplate(): TemplateResult {\n    return html`${this._formatIconSet({\n      iconName:\n        this._type === InputType.PASSWORD\n          ? IconName.EYE_CLOSE_LINE\n          : IconName.EYE_ON,\n      colorByState: this.dark\n        ? this._generalIconColorsDark\n        : this._generalIconColorsLight,\n      clickHandler: this._handlePasswordIconClick,\n    })} `;\n  }\n\n  private _getFeatureTemplateByInputType(): TemplateResult {\n    switch (this.type) {\n      case InputType.SEARCH:\n        return this._getInputSearchFeatureTemplate();\n      case InputType.TEXT:\n        return this._getInputTextFeatureTemplate();\n      case InputType.PASSWORD:\n        return this._getInputPasswordFeatureTemplate();\n      default:\n        return html`${nothing}`;\n    }\n  }\n\n  private _getInputElementClasses() {\n    const hasIconRight =\n      this.type === InputType.PASSWORD || this.type === InputType.TEXT\n        ? !!this.iconRight\n        : false;\n    return {\n      't-input': true,\n      't-textarea': this.type === InputType.TEXT_AREA,\n      'with-title': !!this.title,\n      'with-icon-right': hasIconRight,\n      [`with-${this.descriptionType}`]:\n        this.descriptionType !== DescriptionType.TEXT,\n    };\n  }\n\n  private _getInputContainerClasses() {\n    return {\n      't-input-container': true,\n      't-textarea-container': this.type === InputType.TEXT_AREA,\n    };\n  }\n\n  private _getMainContainerClasses() {\n    return {\n      't-textarea-main-container': this.type === InputType.TEXT_AREA,\n    };\n  }\n\n  private _setIdInput() {\n    return uuidv4();\n  }\n\n  private _getInputTemplate(): TemplateResult {\n    return html`<input\n      id=${this._inputId}\n      type=\"text\"\n      class=\"${classMap(this._getInputElementClasses())}\"\n      ?disabled=\"${this.disabled}\"\n      ?readonly=\"${this.readonly}\"\n      .value=\"${this.value}\"\n      .type=\"${this.type}\"\n      placeholder=\"${this.placeholder || ' '}\"\n      maxlength=\"${this.maxlength}\"\n      @input=\"${this._handleInput}\"\n      @blur=\"${this._handleBlur}\"\n    >\n    </input>\n    ${\n      this.title\n        ? html`<label for=${this._inputId} class=\"t-title\"\n            >${this.title}</label\n          >`\n        : nothing\n    }\n    ${this._getFeatureTemplateByInputType()}\n    `;\n  }\n\n  private _getLetterCounterTemplate(): TemplateResult {\n    if (!this._hasLetterCounter()) {\n      return html`${nothing}`;\n    }\n    return html`<div class=\"t-letter-counter\">\n      ${this.maxlength\n        ? html`${this._letterCounter}/${this.maxlength}`\n        : nothing}\n    </div> `;\n  }\n\n  private _hasLetterCounter(): boolean {\n    return (\n      this.type === InputType.TEXT_AREA &&\n      typeof this.maxlength === 'number' &&\n      this.maxlength >= 0\n    );\n  }\n\n  private _getTextAreaTemplate(): TemplateResult {\n    return html`<textarea\n        id=\"${this._inputId}\"\n        class=\"${classMap(this._getInputElementClasses())}\"\n        ?disabled=\"${this.disabled}\"\n        ?readonly=\"${this.readonly}\"\n        .value=\"${this.value}\"\n        placeholder=\"${this.placeholder}\"\n        maxlength=\"${this.maxlength}\"\n        @input=\"${this._handleInput}\"\n        @blur=\"${this._handleBlur}\"\n      ></textarea>\n      ${this.title\n        ? html`<label for=${this._inputId} class=\"t-title\"\n            >${this.title}</label\n          >`\n        : nothing} `;\n  }\n\n  private _getIconDescriptionTemplate(): TemplateResult {\n    if (\n      !this.descriptionType ||\n      this.descriptionType === DescriptionType.TEXT\n    ) {\n      return html`${nothing}`;\n    }\n    return html`<tuix-icon\n      size=\"${IconSizeVariant.SMALL}\"\n      name=\"${IconByDescriptionType[this.descriptionType]}\"\n      color=\"${this.dark\n        ? IconDescriptionColorDark[this.descriptionType]\n        : IconDescriptionColorLight[this.descriptionType]}\"\n    >\n    </tuix-icon>`;\n  }\n\n  private _getDescriptionTemplate(): TemplateResult {\n    const isValidDescriptionType = this._hasValidDescriptionType();\n    if (!isValidDescriptionType) {\n      return html`<div></div>`;\n    }\n    const defaultDescription = {\n      [DescriptionType.WARNING]: 'Warning',\n      [DescriptionType.ERROR]: 'Error',\n      [DescriptionType.SUCCESS]: 'Success',\n      [DescriptionType.LOADING]: 'Loading',\n      [DescriptionType.TEXT]: '',\n    };\n    return html`<div class=\"t-input-description\">\n      ${this._getIconDescriptionTemplate()}\n      <span\n        >${this.description ?? defaultDescription[this.descriptionType]}</span\n      >\n    </div>`;\n  }\n\n  private _hasValidDescriptionType(): boolean {\n    return Object.values(DescriptionType).includes(this.descriptionType);\n  }\n\n  private _getDescriptionContainerTemplate(): TemplateResult {\n    const hasLetterCounter = this._hasLetterCounter();\n    const hasDescription =\n      this._hasValidDescriptionType() &&\n      (this.descriptionType === DescriptionType.TEXT\n        ? !!this.description\n        : true);\n    if (!hasLetterCounter && !hasDescription) {\n      return html`${nothing}`;\n    }\n    return html`<div class=\"t-input-description-container\">\n      ${this._getDescriptionTemplate()} ${this._getLetterCounterTemplate()}\n    </div>`;\n  }\n\n  protected render(): TemplateResult {\n    if (this._previousType !== this.type) {\n      this._previousType = this.type;\n      this._type = this.type;\n    }\n    if (this._previousValue !== this.value) {\n      this._previousValue = this.value;\n      this._letterCounter = this.value.length;\n    }\n    return html`<div class=\"${classMap(this._getMainContainerClasses())}\">\n      <div\n        class=\"${classMap(this._getInputContainerClasses())}\"\n        @click=\"${this._handleClickOnInput}\"\n      >\n        ${this.type === InputType.TEXT_AREA\n          ? this._getTextAreaTemplate()\n          : this._getInputTemplate()}\n      </div>\n      ${this._getDescriptionContainerTemplate()}\n    </div>`;\n  }\n\n  protected updated(changedProperties: PropertyValueMap<unknown>) {\n    for (const [propName] of changedProperties) {\n      if (this.disabled || this.readonly) break;\n      if (String(propName) !== 'autofocus') continue;\n      if (this.autofocus) {\n        this._inputElement.focus();\n      }\n    }\n  }\n}\n"]}

package/dist/src/tuix-input/TuixInput.styles.js

@@ -1,8 +1,8 @@
 import { css, unsafeCSS } from 'lit';
-import { ScreenSizes } from '../utils/screenSizes.enum';
-import { Palette } from '../utils/colors';
-import { DarkPalette } from '../utils/darkColors';
-import { hexToRgb } from '../utils/hex-rgb';
+import { ScreenSizes } from '../utils/screenSizes.enum.js';
+import { Palette } from '../utils/colors.js';
+import { DarkPalette } from '../utils/darkColors.js';
+import { hexToRgb } from '../utils/hex-rgb.js';
 const inputVars = {
     gapX: '10px',
     iconDesktopSize: '1.5rem',
@@ -293,3 +293,4 @@ export const inputDescriptionStyles = css `
     gap: 0.5rem;
   }
 `;
+//# sourceMappingURL=TuixInput.styles.js.map

package/dist/src/tuix-input/TuixInput.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TuixInput.styles.js","sourceRoot":"","sources":["../../../src/tuix-input/TuixInput.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { Palette } from '../utils/colors';\nimport { DarkPalette } from '../utils/darkColors';\nimport { hexToRgb } from '../utils/hex-rgb';\n\nconst inputVars = {\n  gapX: '10px',\n  iconDesktopSize: '1.5rem',\n  iconMobileSize: '1rem',\n  paddingX: '1.25rem',\n};\n\nconst rgbDarkValidation = hexToRgb(DarkPalette.VALIDATION);\nconst rgbDarkError = hexToRgb(DarkPalette.ERROR);\n\nexport const hostStyles = css`\n  :host {\n    --t-field-color-form: ${unsafeCSS(Palette.PRIMARY_50)};\n    --t-field-color-title: ${unsafeCSS(Palette.PRIMARY_600)};\n    --t-field-color-text: ${unsafeCSS(Palette.BLACK)};\n    --t-field-color-description: ${unsafeCSS(Palette.NEUTRAL_600)};\n    --t-field-color-stroke-hover: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-field-color-stroke-focus: ${unsafeCSS(Palette.MAIN)};\n    --t-field-color-text-disabled: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-field-color-stroke-validation: ${unsafeCSS(Palette.VALIDATION_200)};\n    --t-field-color-bg-validation: ${unsafeCSS(Palette.VALIDATION_50)};\n    --t-field-color-stroke-loading: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-field-color-bg-error: ${unsafeCSS(Palette.ERROR_50)};\n    --t-field-color-stroke-error: ${unsafeCSS(Palette.ERROR_200)};\n    --t-field-input-cursor: auto;\n    --t-field-font-size: 1rem;\n    --t-field-font-weight: 300;\n    --t-field-line-height: 1.25rem;\n    --t-field-padding-x: 1.25rem;\n    --t-field-padding-y: 1.125rem;\n    --t-field-padding-top: 1.625rem;\n    --t-field-padding-bottom: 0.625rem;\n    --t-field-title-left-position: 1.25rem;\n  }\n  :host([dark]) {\n    --t-field-color-form: ${unsafeCSS(DarkPalette.PRIMARY_950)};\n    --t-field-color-text: ${unsafeCSS(DarkPalette.PRIMARY_100)};\n    --t-field-color-description: ${unsafeCSS(DarkPalette.NEUTRAL_200)};\n    --t-field-color-stroke-focus: ${unsafeCSS(DarkPalette.SECONDARY)};\n    --t-field-color-text-disabled: ${unsafeCSS(DarkPalette.PRIMARY_800)};\n    --t-field-color-stroke-validation: ${unsafeCSS(DarkPalette.VALIDATION_200)};\n    --t-field-color-bg-validation: rgba(\n      ${rgbDarkValidation.r},\n      ${rgbDarkValidation.g},\n      ${rgbDarkValidation.b},\n      0.2\n    );\n    --t-field-color-bg-error: rgba(\n      ${rgbDarkError.r},\n      ${rgbDarkError.g},\n      ${rgbDarkError.b},\n      0.2\n    );\n    --t-field-color-stroke-error: ${unsafeCSS(DarkPalette.ERROR_200)};\n  }\n`;\n\nexport const inputComponentStyles = css`\n  .t-textarea-main-container {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n  }\n  .t-input-container {\n    position: relative;\n    --t-padding-x-desktop-with-icon: calc(\n      var(--t-field-padding-x) + ${unsafeCSS(inputVars.iconDesktopSize)} +\n        ${unsafeCSS(inputVars.gapX)}\n    );\n    --t-padding-x-mobile-with-icon: calc(\n      var(--t-field-padding-x) + ${unsafeCSS(inputVars.iconMobileSize)} +\n        ${unsafeCSS(inputVars.gapX)}\n    );\n    --t-border-size: 1px;\n  }\n  .t-input-container.t-textarea-container {\n    height: 100%;\n  }\n  .t-input {\n    padding: calc(var(--t-field-padding-y) - var(--t-border-size))\n      var(--t-field-padding-x);\n    border-radius: 4px;\n    font-family: 'Rubik', sans-serif;\n    cursor: var(--t-field-input-cursor);\n    width: 100%;\n    box-sizing: border-box;\n  }\n  .t-input.t-textarea {\n    height: 100%;\n    display: block;\n  }\n  .t-input.with-title {\n    padding-top: calc(var(--t-field-padding-top) - var(--t-border-size));\n    padding-bottom: calc(var(--t-field-padding-bottom) - var(--t-border-size));\n  }\n  .t-input.with-icon-right {\n    padding-right: var(--t-padding-x-desktop-with-icon);\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-input.with-icon-right {\n      padding-right: var(--t-padding-x-mobile-with-icon);\n    }\n  }\n`;\n\nexport const inputFontStyles = css`\n  .t-input::placeholder,\n  .t-input,\n  .t-title {\n    font-size: var(--t-field-font-size);\n    font-weight: var(--t-field-font-weight);\n    line-height: var(--t-field-line-height);\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    :host {\n      --t-field-font-size: 0.813rem;\n      --t-field-line-height: 1.125rem;\n      --t-field-padding-y: 1.063rem;\n      --t-field-padding-top: 1.5rem;\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    :host {\n      --t-field-font-size: 0.813rem;\n      --t-field-line-height: 1rem;\n      --t-field-padding-y: 1rem;\n      --t-field-padding-top: 1.375rem;\n    }\n  }\n`;\n\nexport const inputColorStyles = css`\n  .t-input {\n    background-color: var(--t-field-color-form);\n    border: 1px solid var(--t-field-color-form);\n    color: var(--t-field-color-text);\n  }\n  .t-input-container:hover .t-input,\n  .t-input:hover {\n    border: 1px solid var(--t-field-color-stroke-hover);\n  }\n  .t-input:focus {\n    border: 1px solid var(--t-field-color-stroke-focus);\n    outline: 1px solid var(--t-field-color-stroke-focus);\n  }\n  .t-input[disabled]:disabled {\n    cursor: not-allowed;\n    border: 1px solid var(--t-field-color-form);\n    color: var(--t-field-color-text-disabled);\n  }\n  .t-input.with-title::placeholder {\n    color: transparent;\n  }\n  .t-input::placeholder,\n  .t-input.with-title:focus::placeholder {\n    color: var(--t-field-color-title);\n  }\n  .t-input.with-warning {\n    border: 1px solid var(--t-field-color-stroke-validation);\n    background-color: var(--t-field-color-bg-validation);\n  }\n  .t-input.with-error {\n    border: 1px solid var(--t-field-color-stroke-error);\n    background-color: var(--t-field-color-bg-error);\n  }\n  .t-input.with-loading {\n    border: 1px solid var(--t-field-color-stroke-loading);\n  }\n`;\n\nexport const inputTitleStyles = css`\n  .t-title {\n    position: absolute;\n    top: 50%;\n    left: var(--t-field-title-left-position);\n    font-family: 'Rubik', sans-serif;\n    color: var(--t-field-color-title);\n    transform: translateY(-50%);\n    transition-duration: 0.3s;\n    pointer-events: none;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n  .t-textarea-container .t-title {\n    top: 1rem;\n    transform: none;\n  }\n  .t-input.with-title:focus + .t-title,\n  .t-input.with-title:not(:placeholder-shown) + .t-title {\n    font-size: 0.75rem;\n    font-weight: 300;\n    line-height: 0.875rem;\n    transform: translateY(0);\n    top: 0.5rem;\n  }\n`;\n\nexport const inputIconStyles = css`\n  .t-input-container .t-icon-set-container {\n    height: ${unsafeCSS(inputVars.iconDesktopSize)};\n    width: ${unsafeCSS(inputVars.iconDesktopSize)};\n    cursor: var(--t-field-input-cursor);\n  }\n  .t-icon-set-container.t-icon-click {\n    cursor: pointer;\n  }\n  .t-input-container .t-icon-set-container.t-icon-right {\n    position: absolute;\n    top: 50%;\n    right: var(--t-field-padding-x);\n    transform: translateY(-50%);\n  }\n  .t-input-container .t-icon-set-container.t-icon-left {\n    position: absolute;\n    top: 50%;\n    left: var(--t-field-padding-x);\n    transform: translateY(-50%);\n  }\n  .t-icon-inactive {\n    display: inline;\n  }\n  .t-icon-active {\n    display: none;\n  }\n  .t-icon-disabled {\n    display: none;\n  }\n  .t-input-container:hover .t-icon-set-container .t-icon-inactive,\n  .t-input:hover ~ .t-icon-set-container .t-icon-inactive,\n  .t-input:focus ~ .t-icon-set-container .t-icon-inactive {\n    display: none;\n  }\n  .t-input-container:hover .t-icon-set-container .t-icon-active,\n  .t-input:hover ~ .t-icon-set-container .t-icon-active,\n  .t-input:focus ~ .t-icon-set-container .t-icon-active {\n    display: inline;\n  }\n  .t-input[disabled] ~ .t-icon-set-container .t-icon-active {\n    display: none;\n  }\n  .t-input[disabled] ~ .t-icon-set-container .t-icon-inactive {\n    display: none;\n  }\n  .t-input[disabled] ~ .t-icon-set-container .t-icon-disabled {\n    display: inline;\n    cursor: not-allowed;\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-input-container .t-icon-set-container {\n      height: ${unsafeCSS(inputVars.iconMobileSize)};\n      width: ${unsafeCSS(inputVars.iconMobileSize)};\n    }\n  }\n`;\n\nexport const inputSearchStyles = css`\n  .t-input[type='search'] {\n    padding-left: var(--t-padding-x-desktop-with-icon);\n  }\n  .t-input[type='search'] + .t-title {\n    left: var(--t-padding-x-desktop-with-icon);\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-input[type='search'] {\n      padding-left: var(--t-padding-x-mobile-with-icon);\n    }\n    .t-input[type='search'] + .t-title {\n      left: var(--t-padding-x-mobile-with-icon);\n    }\n  }\n  input[type='search']::-webkit-search-decoration,\n  input[type='search']::-webkit-search-cancel-button,\n  input[type='search']::-webkit-search-results-button,\n  input[type='search']::-webkit-search-results-decoration {\n    display: none;\n  }\n`;\n\nexport const inputDescriptionStyles = css`\n  .t-input-description-container {\n    margin-top: 0.5rem;\n    font-family: 'Rubik', sans-serif;\n    font-size: 0.75rem;\n    line-height: 1rem;\n    color: var(--t-field-color-description);\n    display: flex;\n    justify-content: space-between;\n  }\n  .t-input-description-container .t-letter-counter {\n    align-self: flex-end;\n  }\n  .t-input-description-container .t-input-description {\n    display: flex;\n    gap: 0.5rem;\n  }\n`;\n"]}

package/dist/src/tuix-input/enums/tuix-input.enums.d.ts

@@ -1,6 +1,6 @@
-import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';
-import { Palette } from '../../utils/colors';
-import { DarkPalette } from '../../utils/darkColors';
+import { IconName } from '../../tuix-icon/enums/tuix-icon.enums.js';
+import { Palette } from '../../utils/colors.js';
+import { DarkPalette } from '../../utils/darkColors.js';
 export declare enum InputType {
     TEXT = "text",
     SEARCH = "search",

package/dist/src/tuix-input/enums/tuix-input.enums.js

@@ -1,6 +1,6 @@
-import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';
-import { Palette } from '../../utils/colors';
-import { DarkPalette } from '../../utils/darkColors';
+import { IconName } from '../../tuix-icon/enums/tuix-icon.enums.js';
+import { Palette } from '../../utils/colors.js';
+import { DarkPalette } from '../../utils/darkColors.js';
 export var InputType;
 (function (InputType) {
     InputType["TEXT"] = "text";
@@ -39,3 +39,4 @@ export const IconDescriptionColorDark = {
     [DescriptionType.SUCCESS]: DarkPalette.SUCCESS,
     [DescriptionType.LOADING]: DarkPalette.PRIMARY_300,
 };
+//# sourceMappingURL=tuix-input.enums.js.map

package/dist/src/tuix-input/enums/tuix-input.enums.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tuix-input.enums.js","sourceRoot":"","sources":["../../../../src/tuix-input/enums/tuix-input.enums.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,MAAM,CAAN,IAAY,SAKX;AALD,WAAY,SAAS;IACnB,0BAAa,CAAA;IACb,8BAAiB,CAAA;IACjB,kCAAqB,CAAA;IACrB,mCAAsB,CAAA;AACxB,CAAC,EALW,SAAS,KAAT,SAAS,QAKpB;AAED,MAAM,CAAN,IAAY,iBAGX;AAHD,WAAY,iBAAiB;IAC3B,kCAAa,CAAA;IACb,oCAAe,CAAA;AACjB,CAAC,EAHW,iBAAiB,KAAjB,iBAAiB,QAG5B;AAED,MAAM,CAAN,IAAY,eAMX;AAND,WAAY,eAAe;IACzB,gCAAa,CAAA;IACb,sCAAmB,CAAA;IACnB,kCAAe,CAAA;IACf,sCAAmB,CAAA;IACnB,sCAAmB,CAAA;AACrB,CAAC,EANW,eAAe,KAAf,eAAe,QAM1B;AAED,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,QAAQ,CAAC,oBAAoB;IACxD,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC,QAAQ;IAC1C,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,QAAQ,CAAC,YAAY;IAChD,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,QAAQ,CAAC,MAAM;CAC3C,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACvC,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU;IAC7C,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,KAAK;IACtC,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,OAAO;IAC1C,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,WAAW;CAC/C,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACtC,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,UAAU;IACjD,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,KAAK;IAC1C,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,OAAO;IAC9C,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,WAAW;CACnD,CAAC","sourcesContent":["import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';\nimport { Palette } from '../../utils/colors';\nimport { DarkPalette } from '../../utils/darkColors';\n\nexport enum InputType {\n  TEXT = 'text',\n  SEARCH = 'search',\n  PASSWORD = 'password',\n  TEXT_AREA = 'textarea',\n}\n\nexport enum InputIconLocation {\n  LEFT = 'left',\n  RIGHT = 'right',\n}\n\nexport enum DescriptionType {\n  TEXT = 'text',\n  WARNING = 'warning',\n  ERROR = 'error',\n  SUCCESS = 'success',\n  LOADING = 'loading',\n}\n\nexport const IconByDescriptionType = {\n  [DescriptionType.WARNING]: IconName.TRIANGLE_EXCLAMATION,\n  [DescriptionType.ERROR]: IconName.CIRCLE_X,\n  [DescriptionType.SUCCESS]: IconName.CIRCLE_CHECK,\n  [DescriptionType.LOADING]: IconName.LOADER,\n};\n\nexport const IconDescriptionColorLight = {\n  [DescriptionType.WARNING]: Palette.VALIDATION,\n  [DescriptionType.ERROR]: Palette.ERROR,\n  [DescriptionType.SUCCESS]: Palette.SUCCESS,\n  [DescriptionType.LOADING]: Palette.PRIMARY_300,\n};\n\nexport const IconDescriptionColorDark = {\n  [DescriptionType.WARNING]: DarkPalette.VALIDATION,\n  [DescriptionType.ERROR]: DarkPalette.ERROR,\n  [DescriptionType.SUCCESS]: DarkPalette.SUCCESS,\n  [DescriptionType.LOADING]: DarkPalette.PRIMARY_300,\n};\n"]}

package/dist/src/tuix-input/interfaces/tuix-input.interface.d.ts

@@ -1,14 +1,13 @@
-import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';
-import { type DetailValue } from '../../utils/interfaces/detail-value.interface';
-import { InputIconLocation } from '../enums/tuix-input.enums';
-import { DarkPalette } from '../../utils/darkColors';
-import { Palette } from '../../utils/colors';
-export declare const InputState: {
-    INACTIVE: string;
-    ACTIVE: string;
-    DISABLED: string;
-};
-export type InputState = (typeof InputState)[keyof typeof InputState];
+import { IconName } from '../../tuix-icon/enums/tuix-icon.enums.js';
+import { DetailValue } from '../../utils/interfaces/detail-value.interface.js';
+import { InputIconLocation } from '../enums/tuix-input.enums.js';
+import { DarkPalette } from '../../utils/darkColors.js';
+import { Palette } from '../../utils/colors.js';
+export declare enum InputState {
+    INACTIVE = "inactive",
+    ACTIVE = "active",
+    DISABLED = "disabled"
+}
 export interface FormatIconSetParams {
     iconName: IconName;
     colorByState: Record<InputState, DarkPalette | Palette>;

package/dist/src/tuix-input/interfaces/tuix-input.interface.js

@@ -1,5 +1,7 @@
-export const InputState = {
-    INACTIVE: 'inactive',
-    ACTIVE: 'active',
-    DISABLED: 'disabled',
-};
+export var InputState;
+(function (InputState) {
+    InputState["INACTIVE"] = "inactive";
+    InputState["ACTIVE"] = "active";
+    InputState["DISABLED"] = "disabled";
+})(InputState || (InputState = {}));
+//# sourceMappingURL=tuix-input.interface.js.map

package/dist/src/tuix-input/interfaces/tuix-input.interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tuix-input.interface.js","sourceRoot":"","sources":["../../../../src/tuix-input/interfaces/tuix-input.interface.ts"],"names":[],"mappings":"AAMA,MAAM,CAAN,IAAY,UAIX;AAJD,WAAY,UAAU;IACpB,mCAAqB,CAAA;IACrB,+BAAiB,CAAA;IACjB,mCAAqB,CAAA;AACvB,CAAC,EAJW,UAAU,KAAV,UAAU,QAIrB","sourcesContent":["import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';\nimport { DetailValue } from '../../utils/interfaces/detail-value.interface';\nimport { InputIconLocation } from '../enums/tuix-input.enums';\nimport { DarkPalette } from '../../utils/darkColors';\nimport { Palette } from '../../utils/colors';\n\nexport enum InputState {\n  INACTIVE = 'inactive',\n  ACTIVE = 'active',\n  DISABLED = 'disabled',\n}\nexport interface FormatIconSetParams {\n  iconName: IconName;\n  colorByState: Record<InputState, DarkPalette | Palette>;\n  location?: InputIconLocation;\n  clickHandler?: (e: MouseEvent) => void;\n}\n\nexport type CustomEventTuixInput = CustomEvent<DetailValue<string>>;\n"]}

package/dist/src/tuix-link/TuixLink.d.ts

@@ -1,6 +1,6 @@
-import { LitElement, type TemplateResult } from 'lit';
-import { MainVariant } from '../utils/mainVariant.enum';
-import { LinkTarget } from './enums/linkTarget.enum';
+import { LitElement, TemplateResult } from 'lit';
+import { MainVariant } from '../utils/mainVariant.enum.js';
+import { LinkTarget } from './enums/linkTarget.enum.js';
 export declare class TuixLink extends LitElement {
     static styles: import("lit").CSSResult[];
     href?: string;

package/dist/src/tuix-link/TuixLink.js

@@ -1,11 +1,11 @@
 import { __decorate } from "tslib";
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { MainVariant } from '../utils/mainVariant.enum';
-import { LinkTarget } from './enums/linkTarget.enum';
+import { MainVariant } from '../utils/mainVariant.enum.js';
+import { LinkTarget } from './enums/linkTarget.enum.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { linkStyles } from './TuixLink.styles';
-import { linkFontStyles } from '../tuix-text/TuixText.styles';
+import { linkStyles } from './TuixLink.styles.js';
+import { linkFontStyles } from '../tuix-text/TuixText.styles.js';
 let TuixLink = class TuixLink extends LitElement {
     constructor() {
         super(...arguments);
@@ -14,7 +14,6 @@ let TuixLink = class TuixLink extends LitElement {
         this.disabled = false;
         this.dark = false;
     }
-    static { this.styles = [linkStyles, linkFontStyles]; }
     _getClassMap() {
         return {
             link: true,
@@ -50,6 +49,7 @@ let TuixLink = class TuixLink extends LitElement {
         }
     }
 };
+TuixLink.styles = [linkStyles, linkFontStyles];
 __decorate([
     property({ type: String })
 ], TuixLink.prototype, "href", void 0);
@@ -69,3 +69,4 @@ TuixLink = __decorate([
     customElement('tuix-link')
 ], TuixLink);
 export { TuixLink };
+//# sourceMappingURL=TuixLink.js.map

package/dist/src/tuix-link/TuixLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TuixLink.js","sourceRoot":"","sources":["../../../src/tuix-link/TuixLink.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAG9D,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QAOE,WAAM,GAAG,UAAU,CAAC,KAAK,CAAC;QAG1B,YAAO,GAAG,WAAW,CAAC,OAAO,CAAC;QAG9B,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,KAAK,CAAC;IAsCf,CAAC;IApCS,YAAY;QAClB,OAAO;YACL,IAAI,EAAE,IAAI;YACV,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,SAAS;SAChE,CAAC;IACJ,CAAC;IAEO,eAAe;QACrB,OAAO,IAAI,CAAA;;kBAEG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM;iBAC9C,QAAQ,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;gBAC9B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI;;;;KAI3D,CAAC;IACJ,CAAC;IAEO,YAAY;QAClB,OAAO,IAAI,CAAA;oBACK,QAAQ,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;;;KAG5C,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;QAClD,IAAI,aAAa,EAAE;YACjB,OAAO,IAAI,CAAC,eAAe,EAAE,CAAC;SAC/B;aAAM;YACL,OAAO,IAAI,CAAC,YAAY,EAAE,CAAC;SAC5B;IACH,CAAC;;AApDM,eAAM,GAAG,CAAC,UAAU,EAAE,cAAc,CAAC,AAA/B,CAAgC;AAG7C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;wCACL;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCACjB;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAC9B;AAhBF,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAsDpB;SAtDY,QAAQ","sourcesContent":["import { html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MainVariant } from '../utils/mainVariant.enum';\nimport { LinkTarget } from './enums/linkTarget.enum';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\nimport { linkStyles } from './TuixLink.styles';\nimport { linkFontStyles } from '../tuix-text/TuixText.styles';\n\n@customElement('tuix-link')\nexport class TuixLink extends LitElement {\n  static styles = [linkStyles, linkFontStyles];\n\n  @property({ type: String })\n  href?: string;\n\n  @property({ type: LinkTarget })\n  target = LinkTarget.BLANK;\n\n  @property({ type: MainVariant, reflect: true })\n  variant = MainVariant.PRIMARY;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  private _getClassMap(): ClassInfo {\n    return {\n      link: true,\n      disabled: this.disabled,\n      [MainVariant.SECONDARY]: this.variant === MainVariant.SECONDARY,\n    };\n  }\n\n  private _anchorTemplate(): TemplateResult {\n    return html`\n      <a\n        target=\"${this.disabled ? LinkTarget.SELF : this.target}\"\n        class=\"${classMap(this._getClassMap())}\"\n        href=\"${this.disabled ? 'javascript:void(0)' : this.href}\"\n      >\n        <slot></slot>\n      </a>\n    `;\n  }\n\n  private _divTemplate(): TemplateResult {\n    return html`\n      <div class=\"${classMap(this._getClassMap())}\">\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  render() {\n    const isValidAnchor = this.href && !this.disabled;\n    if (isValidAnchor) {\n      return this._anchorTemplate();\n    } else {\n      return this._divTemplate();\n    }\n  }\n}\n"]}

package/dist/src/tuix-link/TuixLink.styles.js

@@ -1,7 +1,7 @@
 import { css, unsafeCSS } from 'lit';
-import { MainVariant } from '../utils/mainVariant.enum';
-import { Palette } from '../utils/colors';
-import { DarkPalette } from '../utils/darkColors';
+import { MainVariant } from '../utils/mainVariant.enum.js';
+import { Palette } from '../utils/colors.js';
+import { DarkPalette } from '../utils/darkColors.js';
 export const LINK_TEXT_COLOR_VAR_NAME = '--t-link-text-color';
 export const linkStyles = css `
   ${unsafeCSS(`
@@ -53,3 +53,4 @@ export const linkStyles = css `
   }  
 `)}
 `;
+//# sourceMappingURL=TuixLink.styles.js.map

package/dist/src/tuix-link/TuixLink.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TuixLink.styles.js","sourceRoot":"","sources":["../../../src/tuix-link/TuixLink.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,MAAM,CAAC,MAAM,wBAAwB,GAAG,qBAAqB,CAAC;AAE9D,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;IACzB,SAAS,CAAC;;6BAEe,OAAO,CAAC,IAAI;MACnC,wBAAwB,KAAK,OAAO,CAAC,IAAI;;;;6BAIlB,WAAW,CAAC,IAAI;MACvC,wBAAwB,KAAK,WAAW,CAAC,IAAI;;;mBAGhC,WAAW,CAAC,SAAS;6BACX,OAAO,CAAC,KAAK;MACpC,wBAAwB,KAAK,OAAO,CAAC,KAAK;;;mBAG7B,WAAW,CAAC,SAAS;6BACX,WAAW,CAAC,KAAK;MACxC,wBAAwB,KAAK,WAAW,CAAC,KAAK;;;;6BAIvB,OAAO,CAAC,WAAW;MAC1C,wBAAwB,KAAK,OAAO,CAAC,WAAW;;;;;;iBAMrC,wBAAwB;;;;;;;;iBAQxB,wBAAwB;;;;;;;iBAOxB,wBAAwB;;;CAGxC,CAAC;CACD,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { MainVariant } from '../utils/mainVariant.enum';\nimport { Palette } from '../utils/colors';\nimport { DarkPalette } from '../utils/darkColors';\n\nexport const LINK_TEXT_COLOR_VAR_NAME = '--t-link-text-color';\n\nexport const linkStyles = css`\n  ${unsafeCSS(`\n  :host {\n    --t-link-border-color: ${Palette.MAIN};\n    ${LINK_TEXT_COLOR_VAR_NAME}: ${Palette.MAIN}\n  }\n\n  :host([dark]) {\n    --t-link-border-color: ${DarkPalette.MAIN};\n    ${LINK_TEXT_COLOR_VAR_NAME}: ${DarkPalette.MAIN}\n  }\n\n  :host([variant=${MainVariant.SECONDARY}]) {\n    --t-link-border-color: ${Palette.WHITE};\n    ${LINK_TEXT_COLOR_VAR_NAME}: ${Palette.WHITE}\n  }\n\n  :host([variant=${MainVariant.SECONDARY}][dark]) {\n    --t-link-border-color: ${DarkPalette.WHITE};\n    ${LINK_TEXT_COLOR_VAR_NAME}: ${DarkPalette.WHITE}\n  }\n\n  :host([disabled]) .link.disabled {\n    --t-link-border-color: ${Palette.PRIMARY_300};\n    ${LINK_TEXT_COLOR_VAR_NAME}: ${Palette.PRIMARY_300}\n  }\n\n  .link {    \n    text-decoration: none;\n    display: inline;\n    color: var(${LINK_TEXT_COLOR_VAR_NAME});\n    border-bottom: solid 1px var(--t-link-border-active-color, transparent);\n  }\n  .link:hover {\n    border-bottom: solid 1px var(--t-link-border-color);\n    cursor: pointer;\n  }\n  .link.secondary {\n    color: var(${LINK_TEXT_COLOR_VAR_NAME});\n  }\n  .link.secondary:hover {\n    border-bottom: solid 1px var(--t-link-border-color);\n  }  \n  .link.disabled {\n    border-bottom: solid 1px var(--t-link-border-color);\n    color: var(${LINK_TEXT_COLOR_VAR_NAME});\n    cursor: not-allowed;\n  }  \n`)}\n`;\n"]}

package/dist/src/tuix-link/enums/linkTarget.enum.js

@@ -5,3 +5,4 @@ export var LinkTarget;
     LinkTarget["PARENT"] = "_parent";
     LinkTarget["TOP"] = "_top";
 })(LinkTarget || (LinkTarget = {}));
+//# sourceMappingURL=linkTarget.enum.js.map

package/dist/src/tuix-link/enums/linkTarget.enum.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"linkTarget.enum.js","sourceRoot":"","sources":["../../../../src/tuix-link/enums/linkTarget.enum.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,UAKX;AALD,WAAY,UAAU;IACpB,8BAAgB,CAAA;IAChB,4BAAc,CAAA;IACd,gCAAkB,CAAA;IAClB,0BAAY,CAAA;AACd,CAAC,EALW,UAAU,KAAV,UAAU,QAKrB","sourcesContent":["export enum LinkTarget {\n  BLANK = '_blank',\n  SELF = '_self',\n  PARENT = '_parent',\n  TOP = '_top',\n}\n"]}

package/dist/src/tuix-modal/TuixModal.js

@@ -12,7 +12,6 @@ let TuixModal = class TuixModal extends LitElement {
         this.dark = false;
         this.scrollable = false;
     }
-    static { this.styles = [commonModalStyles, mobileModalStyles]; }
     _onClose() {
         this.visible = false;
         this.dispatchEvent(new CustomEvent('on-close', { bubbles: true }));
@@ -48,6 +47,7 @@ let TuixModal = class TuixModal extends LitElement {
     `;
     }
 };
+TuixModal.styles = [commonModalStyles, mobileModalStyles];
 __decorate([
     property({ type: Boolean, reflect: true })
 ], TuixModal.prototype, "visible", void 0);
@@ -61,3 +61,4 @@ TuixModal = __decorate([
     customElement('tuix-modal')
 ], TuixModal);
 export { TuixModal };
+//# sourceMappingURL=TuixModal.js.map

package/dist/src/tuix-modal/TuixModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TuixModal.js","sourceRoot":"","sources":["../../../src/tuix-modal/TuixModal.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EACL,iBAAiB,EACjB,cAAc,GACf,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EACL,QAAQ,EACR,eAAe,GAChB,MAAM,uCAAuC,CAAC;AAG/C,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,UAAU;IAAzC;;QAIE,YAAO,GAAG,KAAK,CAAC;QAGhB,SAAI,GAAG,KAAK,CAAC;QAGb,eAAU,GAAG,KAAK,CAAC;IAqCrB,CAAC;IAnCW,QAAQ;QAChB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACrE,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;oBAGK,cAAc,CAAC,SAAS;wBACpB,iBAAiB,CAAC,IAAI;gBAC9B,IAAI,CAAC,IAAI;;;;;;uBAMF,IAAI,CAAC,QAAQ;;sBAEd,eAAe,CAAC,MAAM;sBACtB,QAAQ,CAAC,CAAC;uBACT,WAAW,CAAC,IAAI;sBACjB,IAAI,CAAC,IAAI;;;0CAGW,IAAI,CAAC,UAAU;;;;;;;;KAQpD,CAAC;IACJ,CAAC;;AA7CM,gBAAM,GAAG,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,AAAzC,CAA0C;AAGvD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAC3B;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAC9B;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACxB;AAVR,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA+CrB;SA/CY,SAAS","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport {\n  BorderRadiusPaper,\n  PaperElevation,\n} from '../tuix-paper/enums/tuix-paper.enum.js';\nimport { commonModalStyles, mobileModalStyles } from './TuixModal.styles.js';\nimport { TextVariant } from '../tuix-text/enums/tuix-text.enums.js';\nimport {\n  IconName,\n  IconSizeVariant,\n} from '../tuix-icon/enums/tuix-icon.enums.js';\n\n@customElement('tuix-modal')\nexport class TuixModal extends LitElement {\n  static styles = [commonModalStyles, mobileModalStyles];\n\n  @property({ type: Boolean, reflect: true })\n  visible = false;\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  @property({ type: Boolean, reflect: true })\n  scrollable = false;\n\n  protected _onClose() {\n    this.visible = false;\n    this.dispatchEvent(new CustomEvent('on-close', { bubbles: true }));\n  }\n\n  render() {\n    return html`\n      <tuix-paper\n        class=\"modal-container\"\n        elevation=${PaperElevation.VARIANT_4}\n        border-radius=${BorderRadiusPaper.SOFT}\n        ?dark=${this.dark}\n      >\n        <div class=\"content\">\n          <header>\n            <slot name=\"title\"></slot>\n            <tuix-icon\n              @click=${this._onClose}\n              class=\"close-icon\"\n              size=\"${IconSizeVariant.MEDIUM}\"\n              name=\"${IconName.X}\"\n              color=\"${TextVariant.MAIN}\"\n              ?dark=${this.dark}\n            ></tuix-icon>\n          </header>\n          <div class=\"body\" ?scrollable=${this.scrollable}>\n            <slot name=\"body\"></slot>\n          </div>\n          <div class=\"action-buttons\">\n            <slot name=\"actions\"></slot>\n          </div>\n        </div>\n      </tuix-paper>\n    `;\n  }\n}\n"]}

package/dist/src/tuix-modal/TuixModal.styles.js

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
-import { ScreenSizes } from '../utils/screenSizes.enum';
-import { Palette } from '../utils/colors';
+import { ScreenSizes } from '../utils/screenSizes.enum.js';
+import { Palette } from '../utils/colors.js';
 export const commonModalStyles = css `
   :host {
     display: none;
@@ -53,3 +53,4 @@ export const mobileModalStyles = css `
     }
   }
 `;
+//# sourceMappingURL=TuixModal.styles.js.map

package/dist/src/tuix-modal/TuixModal.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TuixModal.styles.js","sourceRoot":"","sources":["../../../src/tuix-modal/TuixModal.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE1C,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;wBASZ,SAAS,CAAC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCtD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;uCACG,WAAW,CAAC,MAAM;;;;;;CAMxD,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { Palette } from '../utils/colors';\n\nexport const commonModalStyles = css`\n  :host {\n    display: none;\n    position: fixed;\n    width: 100%;\n    height: 100vh;\n    align-items: center;\n    top: 0;\n    left: 0;\n    background-color: ${unsafeCSS(Palette.BLACK + '80')};\n  }\n\n  :host([visible]) {\n    display: flex;\n  }\n\n  .modal-container {\n    margin: auto;\n    max-width: 96%;\n    max-height: 96vh;\n\n    .content {\n      border-radius: 4px;\n\n      header {\n        display: flex;\n        justify-content: space-between;\n        padding: 16px 16px 8px;\n\n        .close-icon {\n          cursor: pointer;\n        }\n      }\n\n      div.body {\n        padding: 8px 16px 32px;\n      }\n\n      div.action-buttons {\n        padding: 8px 16px 16px 16px;\n      }\n    }\n  }\n`;\n\nexport const mobileModalStyles = css`\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .modal-container {\n      min-width: 100%;\n      max-height: 100%;\n    }\n  }\n`;\n"]}

package/dist/src/tuix-paper/TuixPaper.d.ts

@@ -1,5 +1,5 @@
-import { LitElement, type TemplateResult } from 'lit';
-import { BorderRadiusPaper, PaperElevation } from './enums/tuix-paper.enum';
+import { LitElement, TemplateResult } from 'lit';
+import { BorderRadiusPaper, PaperElevation } from './enums/tuix-paper.enum.js';
 export declare class TuixPaper extends LitElement {
     static styles: import("lit").CSSResult[];
     elevation: PaperElevation;

package/dist/src/tuix-paper/TuixPaper.js

@@ -1,10 +1,10 @@
 import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { BorderRadiusPaper, PaperElevation } from './enums/tuix-paper.enum';
+import { BorderRadiusPaper, PaperElevation } from './enums/tuix-paper.enum.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import { paperStyles } from './TuixPaper.styles';
+import { paperStyles } from './TuixPaper.styles.js';
 let TuixPaper = class TuixPaper extends LitElement {
     constructor() {
         super(...arguments);
@@ -12,7 +12,6 @@ let TuixPaper = class TuixPaper extends LitElement {
         this.borderRadius = BorderRadiusPaper.NONE;
         this.dark = false;
     }
-    static { this.styles = [paperStyles]; }
     _getOptionalClasses() {
         const variantClass = `variant_${this.elevation}`;
         const darkClass = `dark_${this.elevation}`;
@@ -31,6 +30,7 @@ let TuixPaper = class TuixPaper extends LitElement {
     </div>`;
     }
 };
+TuixPaper.styles = [paperStyles];
 __decorate([
     property({ type: PaperElevation })
 ], TuixPaper.prototype, "elevation", void 0);
@@ -44,3 +44,4 @@ TuixPaper = __decorate([
     customElement('tuix-paper')
 ], TuixPaper);
 export { TuixPaper };
+//# sourceMappingURL=TuixPaper.js.map

package/dist/src/tuix-paper/TuixPaper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TuixPaper.js","sourceRoot":"","sources":["../../../src/tuix-paper/TuixPaper.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC5E,OAAO,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAGjD,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,UAAU;IAAzC;;QAIE,cAAS,GAAG,cAAc,CAAC,SAAS,CAAC;QAGrC,iBAAY,GAAG,iBAAiB,CAAC,IAAI,CAAC;QAGtC,SAAI,GAAG,KAAK,CAAC;IAoBf,CAAC;IAlBS,mBAAmB;QACzB,MAAM,YAAY,GAAG,WAAW,IAAI,CAAC,SAAS,EAAE,CAAC;QACjD,MAAM,SAAS,GAAG,QAAQ,IAAI,CAAC,SAAS,EAAE,CAAC;QAC3C,OAAO;YACL,SAAS,EAAE,IAAI;YACf,CAAC,YAAY,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI;YAC1B,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI;SACvB,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;eACA,QAAQ,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;eACpC,QAAQ,CAAC,EAAE,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC;;;WAGjD,CAAC;IACV,CAAC;;AA5BM,gBAAM,GAAG,CAAC,WAAW,CAAC,AAAhB,CAAiB;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC;4CACE;AAGrC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;+CACjB;AAGtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAC9B;AAVF,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA8BrB;SA9BY,SAAS","sourcesContent":["import { LitElement, TemplateResult, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { BorderRadiusPaper, PaperElevation } from './enums/tuix-paper.enum';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { paperStyles } from './TuixPaper.styles';\n\n@customElement('tuix-paper')\nexport class TuixPaper extends LitElement {\n  static styles = [paperStyles];\n\n  @property({ type: PaperElevation })\n  elevation = PaperElevation.VARIANT_1;\n\n  @property({ type: String, attribute: 'border-radius' })\n  borderRadius = BorderRadiusPaper.NONE;\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  private _getOptionalClasses(): ClassInfo {\n    const variantClass = `variant_${this.elevation}`;\n    const darkClass = `dark_${this.elevation}`;\n    return {\n      elevation: true,\n      [variantClass]: !this.dark,\n      [darkClass]: this.dark,\n    };\n  }\n\n  render(): TemplateResult {\n    return html` <div\n      class=\"${classMap(this._getOptionalClasses())}\"\n      style=\"${styleMap({ borderRadius: this.borderRadius })}\"\n    >\n      <slot></slot>\n    </div>`;\n  }\n}\n"]}

package/dist/src/tuix-paper/TuixPaper.styles.js

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
-import { PaperElevation } from './enums/tuix-paper.enum';
-import { Palette } from '../utils/colors';
+import { PaperElevation } from './enums/tuix-paper.enum.js';
+import { Palette } from '../utils/colors.js';
 const calculatedStyles = Object.values(PaperElevation)
     .slice(1, -1)
     .map((variant, index) => `
@@ -28,3 +28,4 @@ export const paperStyles = css `
   }
 `)}
 `;
+//# sourceMappingURL=TuixPaper.styles.js.map

package/dist/src/tuix-paper/TuixPaper.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TuixPaper.styles.js","sourceRoot":"","sources":["../../../src/tuix-paper/TuixPaper.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE1C,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC;KACnD,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;KACZ,GAAG,CACF,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC;uBACD,OAAO;sBACR,CAAC,IAAI,KAAK,MAAM,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,OAAO,CAAC,MAAM;;oBAEtD,OAAO;2BACA,EAAE,GAAG,CAAC,GAAG,KAAK,IAAI,EAAE,GAAG,CAAC,GAAG,KAAK,IAAI,EAAE,GAAG,CAAC,GAAG,KAAK;IACzE,CACD;KACA,IAAI,CAAC,IAAI,CAAC,CAAC;AAEd,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;IAC1B,SAAS,CAAC;;wBAEU,OAAO,CAAC,KAAK;;oBAEjB,cAAc,CAAC,SAAS;wBACpB,OAAO,CAAC,KAAK;;IAEjC,gBAAgB;uBACG,cAAc,CAAC,SAAS;+BAChB,OAAO,CAAC,MAAM;;oBAEzB,cAAc,CAAC,SAAS;;;CAG3C,CAAC;CACD,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { PaperElevation } from './enums/tuix-paper.enum';\nimport { Palette } from '../utils/colors';\n\nconst calculatedStyles = Object.values(PaperElevation)\n  .slice(1, -1)\n  .map(\n    (variant, index) => `\n  .elevation.variant_${variant} {\n    box-shadow: 0px ${2 ** index}px ${2 ** (index + 2)}px ${Palette.SHADOW};\n  }\n  .elevation.dark_${variant} {\n    background-color:rgb(${23 + 3 * index},${23 + 3 * index},${26 + 5 * index});\n  }`\n  )\n  .join('\\n');\n\nexport const paperStyles = css`\n  ${unsafeCSS(`\n  .elevation {\n    background-color: ${Palette.WHITE};\n  }\n  .elevation.dark_${PaperElevation.VARIANT_0} {\n    background-color: ${Palette.BLACK};\n  }\n  ${calculatedStyles}\n  .elevation.variant_${PaperElevation.VARIANT_4} {\n    box-shadow: 0px 7px 24px ${Palette.SHADOW};\n  }\n  .elevation.dark_${PaperElevation.VARIANT_4} {\n    background-color: rgb(33, 33, 40);\n  }\n`)}\n`;\n"]}

package/dist/src/tuix-paper/enums/tuix-paper.enum.js

@@ -13,3 +13,4 @@ export var BorderRadiusPaper;
     BorderRadiusPaper["MEDIUM"] = "10px";
     BorderRadiusPaper["STRONG"] = "20px";
 })(BorderRadiusPaper || (BorderRadiusPaper = {}));
+//# sourceMappingURL=tuix-paper.enum.js.map

package/dist/src/tuix-paper/enums/tuix-paper.enum.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tuix-paper.enum.js","sourceRoot":"","sources":["../../../../src/tuix-paper/enums/tuix-paper.enum.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,cAMX;AAND,WAAY,cAAc;IACxB,iCAAe,CAAA;IACf,iCAAe,CAAA;IACf,iCAAe,CAAA;IACf,iCAAe,CAAA;IACf,iCAAe,CAAA;AACjB,CAAC,EANW,cAAc,KAAd,cAAc,QAMzB;AAED,MAAM,CAAN,IAAY,iBAKX;AALD,WAAY,iBAAiB;IAC3B,iCAAY,CAAA;IACZ,iCAAY,CAAA;IACZ,oCAAe,CAAA;IACf,oCAAe,CAAA;AACjB,CAAC,EALW,iBAAiB,KAAjB,iBAAiB,QAK5B","sourcesContent":["export enum PaperElevation {\n  VARIANT_0 = '0',\n  VARIANT_1 = '1',\n  VARIANT_2 = '2',\n  VARIANT_3 = '3',\n  VARIANT_4 = '4',\n}\n\nexport enum BorderRadiusPaper {\n  NONE = '0px',\n  SOFT = '4px',\n  MEDIUM = '10px',\n  STRONG = '20px',\n}\n"]}

package/dist/src/tuix-radio-button/TuixRadioButton.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
-import { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums';
-import type { TuixRadioButtonOption } from './interfaces/tuix-radio-button.interface';
+import { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums.js';
+import { TuixRadioButtonOption } from './interfaces/tuix-radio-button.interface.js';
 export declare class TuixRadioButton extends LitElement {
     static styles: import("lit").CSSResult[];
     disabled: boolean;