tuix-webcomponents 0.0.20 → 0.0.22

package/README.md

@@ -10,12 +10,36 @@ npm i tuix-webcomponents
 
 ## Usage
 
-```html
-<script type="module">
-  import 'tuix-webcomponents/tuix-webcomponents.js';
-</script>
+### React .tsx with SSR
+
+```typescript jsx
+import { loadFonts } from 'tuix-webcomponents';
+
+function App() {
+  
+  // load fonts for SSR and CSR
+  useEffect(() => {
+    loadFonts()
+  }, [])
+  
+  return (
+    <tuix-text size="xl" type="headline" color="primary"></tuix-text>
+  )
+}
+```
+
+### React .tsx without SSR
+
+```typescript jsx
+import { loadFonts } from 'tuix-webcomponents';
+loadFonts()
 
-<tuix-webcomponents></tuix-webcomponents>
+function App() {
+  
+  return (
+    <tuix-text size="xl" type="headline" color="primary"></tuix-text>
+  )
+}
 ```
 
 ## Linting and formatting

package/dist/src/index.d.ts

@@ -1,2 +1,9 @@
 export { TuixText } from './tuix-text/TuixText.js';
+export { TuixIcon } from './tuix-icon/TuixIcon.js';
+export { TuixButton } from './tuix-button/TuixButton.js';
+export { TuixPaper } from './tuix-paper/TuixPaper.js';
+export { TuixIconButton } from './tuix-icon-button/TuixIconButton.js';
+export { TuixLink } from './tuix-link/TuixLink.js';
+export { TuixInput } from './tuix-input/TuixInput.js';
+export { TuixDropdown } from './tuix-dropdown/TuixDropdown.js';
 export declare function loadFonts(): void;

package/dist/src/index.js

@@ -1,9 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.loadFonts = exports.TuixText = void 0;
-var TuixText_js_1 = require("./tuix-text/TuixText.js");
-Object.defineProperty(exports, "TuixText", { enumerable: true, get: function () { return TuixText_js_1.TuixText; } });
-function loadFonts() {
+export { TuixText } from './tuix-text/TuixText.js';
+export { TuixIcon } from './tuix-icon/TuixIcon.js';
+export { TuixButton } from './tuix-button/TuixButton.js';
+export { TuixPaper } from './tuix-paper/TuixPaper.js';
+export { TuixIconButton } from './tuix-icon-button/TuixIconButton.js';
+export { TuixLink } from './tuix-link/TuixLink.js';
+export { TuixInput } from './tuix-input/TuixInput.js';
+export { TuixDropdown } from './tuix-dropdown/TuixDropdown.js';
+export function loadFonts() {
     const link1 = document.createElement('link');
     link1.rel = 'preconnect';
     link1.href = 'https://fonts.googleapis.com';
@@ -18,5 +21,4 @@ function loadFonts() {
     document.head.appendChild(link2);
     document.head.appendChild(link3);
 }
-exports.loadFonts = loadFonts;
 //# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;AAAA,uDAAmD;AAA1C,uGAAA,QAAQ,OAAA;AAEjB,SAAgB,SAAS;IACvB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7C,KAAK,CAAC,GAAG,GAAG,YAAY,CAAC;IACzB,KAAK,CAAC,IAAI,GAAG,8BAA8B,CAAC;IAC5C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7C,KAAK,CAAC,GAAG,GAAG,YAAY,CAAC;IACzB,KAAK,CAAC,IAAI,GAAG,2BAA2B,CAAC;IACzC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7C,KAAK,CAAC,GAAG,GAAG,YAAY,CAAC;IACzB,KAAK,CAAC,IAAI;QACR,2JAA2J,CAAC;IAC9J,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACjC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACjC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AACnC,CAAC;AAdD,8BAcC","sourcesContent":["export { TuixText } from './tuix-text/TuixText.js';\n\nexport function loadFonts() {\n  const link1 = document.createElement('link');\n  link1.rel = 'preconnect';\n  link1.href = 'https://fonts.googleapis.com';\n  const link2 = document.createElement('link');\n  link2.rel = 'preconnect';\n  link2.href = 'https://fonts.gstatic.com';\n  const link3 = document.createElement('link');\n  link3.rel = 'stylesheet';\n  link3.href =\n    'https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap';\n  document.head.appendChild(link1);\n  document.head.appendChild(link2);\n  document.head.appendChild(link3);\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAE/D,MAAM,UAAU,SAAS;IACvB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7C,KAAK,CAAC,GAAG,GAAG,YAAY,CAAC;IACzB,KAAK,CAAC,IAAI,GAAG,8BAA8B,CAAC;IAC5C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7C,KAAK,CAAC,GAAG,GAAG,YAAY,CAAC;IACzB,KAAK,CAAC,IAAI,GAAG,2BAA2B,CAAC;IACzC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7C,KAAK,CAAC,GAAG,GAAG,YAAY,CAAC;IACzB,KAAK,CAAC,IAAI;QACR,2JAA2J,CAAC;IAC9J,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACjC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACjC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AACnC,CAAC","sourcesContent":["export { TuixText } from './tuix-text/TuixText.js';\nexport { TuixIcon } from './tuix-icon/TuixIcon.js';\nexport { TuixButton } from './tuix-button/TuixButton.js';\nexport { TuixPaper } from './tuix-paper/TuixPaper.js';\nexport { TuixIconButton } from './tuix-icon-button/TuixIconButton.js';\nexport { TuixLink } from './tuix-link/TuixLink.js';\nexport { TuixInput } from './tuix-input/TuixInput.js';\nexport { TuixDropdown } from './tuix-dropdown/TuixDropdown.js';\n\nexport function loadFonts() {\n  const link1 = document.createElement('link');\n  link1.rel = 'preconnect';\n  link1.href = 'https://fonts.googleapis.com';\n  const link2 = document.createElement('link');\n  link2.rel = 'preconnect';\n  link2.href = 'https://fonts.gstatic.com';\n  const link3 = document.createElement('link');\n  link3.rel = 'stylesheet';\n  link3.href =\n    'https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap';\n  document.head.appendChild(link1);\n  document.head.appendChild(link2);\n  document.head.appendChild(link3);\n}\n"]}

package/dist/src/tuix-button/TuixButton.d.ts

@@ -0,0 +1,17 @@
+import { LitElement, TemplateResult } from 'lit';
+import { IconName } from '../tuix-icon/enums/tuix-icon.enums';
+import '../tuix-icon/TuixIcon.js';
+import { MainVariant } from '../utils/mainVariant.enum';
+export declare class TuixButton extends LitElement {
+    static styles: import("lit").CSSResult[];
+    iconColor: string;
+    variant: MainVariant;
+    disabled: boolean;
+    iconRight?: IconName;
+    iconLeft?: IconName;
+    private _getIconColor;
+    private _handleClick;
+    private _iconTemplate;
+    getButtonStyles(): string;
+    protected render(): TemplateResult;
+}

package/dist/src/tuix-button/TuixButton.js

@@ -0,0 +1,108 @@
+import { __decorate } from "tslib";
+import { LitElement, css, html, nothing } from 'lit';
+import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
+import { buttonSizeStyles, buttonColorStyles } from './TuixButton.styles';
+import { customElement, property } from 'lit/decorators.js';
+import '../tuix-icon/TuixIcon.js';
+import { palette } from '../utils/colors';
+import { MainVariant } from '../utils/mainVariant.enum';
+import { buttonTextColor } from './enums/tuix-button.enums';
+import { ScreenSizes } from '../utils/screenSizes.enum';
+let TuixButton = class TuixButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.iconColor = '';
+        this.variant = MainVariant.PRIMARY;
+        this.disabled = false;
+    }
+    _getIconColor() {
+        this.iconColor = buttonTextColor[this.variant];
+        if (this.disabled)
+            this.iconColor = palette.primary_300;
+        return this.iconColor;
+    }
+    _handleClick() {
+        this.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+    }
+    _iconTemplate(iconName) {
+        let iconSize = IconSizeVariant.MEDIUM;
+        if (screen.width <= ScreenSizes.TABLET) {
+            iconSize = IconSizeVariant.SMALL;
+        }
+        return html `<tuix-icon
+      size="${iconSize}"
+      name="${iconName}"
+      color="${this._getIconColor()}"
+    ></tuix-icon>`;
+    }
+    getButtonStyles() {
+        return `${this.variant}`;
+    }
+    render() {
+        return html `<button
+      @click=${this._handleClick}
+      class="button ${this.getButtonStyles()}"
+      ?disabled="${this.disabled}"
+    >
+      <div class="container">
+        ${this.iconLeft ? this._iconTemplate(this.iconLeft) : nothing}
+        <slot></slot>
+        ${this.iconRight ? this._iconTemplate(this.iconRight) : nothing}
+      </div>
+    </button>`;
+    }
+};
+TuixButton.styles = [
+    css `
+      .button {
+        padding: 16px 32px;
+        border-radius: 4px;
+        font-family: 'rubik', sans-serif;
+      }
+
+      @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
+        .button {
+          padding: 14px 32px;
+        }
+      }
+
+      @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
+        .button {
+          padding: 12px 24px;
+        }
+      }
+
+      .container {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        gap: 8px;
+      }
+
+      @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
+        .container {
+          gap: 6px;
+        }
+      }
+    `,
+    buttonColorStyles,
+    buttonSizeStyles,
+];
+__decorate([
+    property({ type: MainVariant })
+], TuixButton.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean })
+], TuixButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: IconName })
+], TuixButton.prototype, "iconRight", void 0);
+__decorate([
+    property({ type: IconName })
+], TuixButton.prototype, "iconLeft", void 0);
+TuixButton = __decorate([
+    customElement('tuix-button')
+], TuixButton);
+export { TuixButton };
+//# sourceMappingURL=TuixButton.js.map

package/dist/src/tuix-button/TuixButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TuixButton.js","sourceRoot":"","sources":["../../../src/tuix-button/TuixButton.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAC/E,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAGxD,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,UAAU;IAA1C;;QAuCE,cAAS,GAAG,EAAE,CAAC;QAGf,YAAO,GAAG,WAAW,CAAC,OAAO,CAAC;QAG9B,aAAQ,GAAG,KAAK,CAAC;IAkDnB,CAAC;IA1CS,aAAa;QACnB,IAAI,CAAC,SAAS,GAAG,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC/C,IAAI,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,WAAW,CAAC;QAExD,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IAClE,CAAC;IAEO,aAAa,CAAC,QAAkB;QACtC,IAAI,QAAQ,GAAG,eAAe,CAAC,MAAM,CAAC;QAEtC,IAAI,MAAM,CAAC,KAAK,IAAI,WAAW,CAAC,MAAM,EAAE;YACtC,QAAQ,GAAG,eAAe,CAAC,KAAK,CAAC;SAClC;QAED,OAAO,IAAI,CAAA;cACD,QAAQ;cACR,QAAoB;eACnB,IAAI,CAAC,aAAa,EAAE;kBACjB,CAAC;IACjB,CAAC;IAED,eAAe;QACb,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;IAC3B,CAAC;IAES,MAAM;QACd,OAAO,IAAI,CAAA;eACA,IAAI,CAAC,YAAY;sBACV,IAAI,CAAC,eAAe,EAAE;mBACzB,IAAI,CAAC,QAAQ;;;UAGtB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO;;UAE3D,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,OAAO;;cAEzD,CAAC;IACb,CAAC;;AA7FM,iBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;2CAOoC,WAAW,CAAC,MAAM;;;;;;2CAMlB,WAAW,CAAC,MAAM;;;;;;;;;;;;;;2CAclB,WAAW,CAAC,MAAM;;;;;KAKxD;IACD,iBAAiB;IACjB,gBAAgB;CACjB,AApCY,CAoCX;AAKF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;2CACF;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;6CACR;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;4CACT;AAnDT,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CA+FtB;SA/FY,UAAU","sourcesContent":["import { LitElement, TemplateResult, css, html, nothing } from 'lit';\nimport { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';\nimport { buttonSizeStyles, buttonColorStyles } from './TuixButton.styles';\nimport { customElement, property } from 'lit/decorators.js';\nimport '../tuix-icon/TuixIcon.js';\nimport { palette } from '../utils/colors';\nimport { MainVariant } from '../utils/mainVariant.enum';\nimport { buttonTextColor } from './enums/tuix-button.enums';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\n\n@customElement('tuix-button')\nexport class TuixButton extends LitElement {\n  static styles = [\n    css`\n      .button {\n        padding: 16px 32px;\n        border-radius: 4px;\n        font-family: 'rubik', sans-serif;\n      }\n\n      @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n        .button {\n          padding: 14px 32px;\n        }\n      }\n\n      @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n        .button {\n          padding: 12px 24px;\n        }\n      }\n\n      .container {\n        display: flex;\n        flex-direction: row;\n        justify-content: center;\n        align-items: center;\n        gap: 8px;\n      }\n\n      @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n        .container {\n          gap: 6px;\n        }\n      }\n    `,\n    buttonColorStyles,\n    buttonSizeStyles,\n  ];\n\n  iconColor = '';\n\n  @property({ type: MainVariant })\n  variant = MainVariant.PRIMARY;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: IconName })\n  iconRight?: IconName;\n\n  @property({ type: IconName })\n  iconLeft?: IconName;\n\n  private _getIconColor(): string {\n    this.iconColor = buttonTextColor[this.variant];\n    if (this.disabled) this.iconColor = palette.primary_300;\n\n    return this.iconColor;\n  }\n\n  private _handleClick() {\n    this.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n  }\n\n  private _iconTemplate(iconName: IconName): TemplateResult {\n    let iconSize = IconSizeVariant.MEDIUM;\n\n    if (screen.width <= ScreenSizes.TABLET) {\n      iconSize = IconSizeVariant.SMALL;\n    }\n\n    return html`<tuix-icon\n      size=\"${iconSize}\"\n      name=\"${iconName as IconName}\"\n      color=\"${this._getIconColor()}\"\n    ></tuix-icon>`;\n  }\n\n  getButtonStyles(): string {\n    return `${this.variant}`;\n  }\n\n  protected render(): TemplateResult {\n    return html`<button\n      @click=${this._handleClick}\n      class=\"button ${this.getButtonStyles()}\"\n      ?disabled=\"${this.disabled}\"\n    >\n      <div class=\"container\">\n        ${this.iconLeft ? this._iconTemplate(this.iconLeft) : nothing}\n        <slot></slot>\n        ${this.iconRight ? this._iconTemplate(this.iconRight) : nothing}\n      </div>\n    </button>`;\n  }\n}\n"]}

package/dist/src/tuix-button/TuixButton.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const buttonSizeStyles: import("lit").CSSResult;
+export declare const buttonColorStyles: import("lit").CSSResult;

package/dist/src/tuix-button/TuixButton.styles.js

@@ -0,0 +1,74 @@
+import { css, unsafeCSS } from 'lit';
+import { palette } from '../utils/colors';
+import { ScreenSizes } from '../utils/screenSizes.enum';
+export const buttonSizeStyles = css `
+  .button {
+    font-size: 1.25rem;
+    font-weight: 400;
+    line-height: 1.5rem;
+  }
+  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
+    .button {
+      font-size: 1rem;
+      font-weight: 400;
+      line-height: 1.25rem;
+    }
+  }
+  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
+    .button {
+      font-size: 0.875rem;
+      font-weight: 400;
+      line-height: 1rem;
+    }
+  }
+`;
+export const buttonColorStyles = css `
+  .button.primary {
+    background-color: ${unsafeCSS(palette.main)};
+    border: none;
+    color: ${unsafeCSS(palette.white)};
+  }
+  .button.primary:hover {
+    background-color: ${unsafeCSS(palette.primary_600)};
+    cursor: pointer;
+  }
+  .button.primary:focus {
+    background-color: ${unsafeCSS(palette.primary_600)};
+    border: 2px solid ${unsafeCSS(palette.secondary)};
+  }
+  .button.primary:active {
+    background-color: ${unsafeCSS(palette.primary_800)};
+    border: none;
+  }
+  .button.primary:disabled {
+    background-color: ${unsafeCSS(palette.primary_100)};
+    color: ${unsafeCSS(palette.primary_300)};
+    cursor: not-allowed;
+  }
+  .button.secondary {
+    background-color: ${unsafeCSS(palette.white)};
+    border: 2px solid ${unsafeCSS(palette.main)};
+    color: ${unsafeCSS(palette.main)};
+  }
+  .button.secondary:hover {
+    background-color: ${unsafeCSS(palette.primary_100)};
+    border: 2px solid ${unsafeCSS(palette.main)};
+    cursor: pointer;
+  }
+  .button.secondary:focus {
+    background-color: ${unsafeCSS(palette.primary_100)};
+    border: 2px solid ${unsafeCSS(palette.secondary)};
+  }
+  .button.secondary:active {
+    background-color: ${unsafeCSS(palette.primary_200)};
+    border: none;
+    color: ${unsafeCSS(palette.main)};
+  }
+  .button.secondary:disabled {
+    background-color: ${unsafeCSS(palette.primary_100)};
+    border: none;
+    color: ${unsafeCSS(palette.primary_300)};
+    cursor: not-allowed;
+  }
+`;
+//# sourceMappingURL=TuixButton.styles.js.map

package/dist/src/tuix-button/TuixButton.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TuixButton.styles.js","sourceRoot":"","sources":["../../../src/tuix-button/TuixButton.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;uCAMI,WAAW,CAAC,MAAM;;;;;;;uCAOlB,WAAW,CAAC,MAAM;;;;;;;CAOxD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;wBAEZ,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;;aAElC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;;;wBAGb,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;;;wBAI9B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;wBAC9B,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC;;;wBAG5B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;;;wBAI9B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;aACzC,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;;;wBAInB,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;wBACxB,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;aAClC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;;;wBAGZ,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;wBAC9B,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;;;;wBAIvB,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;wBAC9B,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC;;;wBAG5B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;aAEzC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;;;wBAGZ,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;aAEzC,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;;CAG1C,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { palette } from '../utils/colors';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\n\nexport const buttonSizeStyles = css`\n  .button {\n    font-size: 1.25rem;\n    font-weight: 400;\n    line-height: 1.5rem;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .button {\n      font-size: 1rem;\n      font-weight: 400;\n      line-height: 1.25rem;\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .button {\n      font-size: 0.875rem;\n      font-weight: 400;\n      line-height: 1rem;\n    }\n  }\n`;\n\nexport const buttonColorStyles = css`\n  .button.primary {\n    background-color: ${unsafeCSS(palette.main)};\n    border: none;\n    color: ${unsafeCSS(palette.white)};\n  }\n  .button.primary:hover {\n    background-color: ${unsafeCSS(palette.primary_600)};\n    cursor: pointer;\n  }\n  .button.primary:focus {\n    background-color: ${unsafeCSS(palette.primary_600)};\n    border: 2px solid ${unsafeCSS(palette.secondary)};\n  }\n  .button.primary:active {\n    background-color: ${unsafeCSS(palette.primary_800)};\n    border: none;\n  }\n  .button.primary:disabled {\n    background-color: ${unsafeCSS(palette.primary_100)};\n    color: ${unsafeCSS(palette.primary_300)};\n    cursor: not-allowed;\n  }\n  .button.secondary {\n    background-color: ${unsafeCSS(palette.white)};\n    border: 2px solid ${unsafeCSS(palette.main)};\n    color: ${unsafeCSS(palette.main)};\n  }\n  .button.secondary:hover {\n    background-color: ${unsafeCSS(palette.primary_100)};\n    border: 2px solid ${unsafeCSS(palette.main)};\n    cursor: pointer;\n  }\n  .button.secondary:focus {\n    background-color: ${unsafeCSS(palette.primary_100)};\n    border: 2px solid ${unsafeCSS(palette.secondary)};\n  }\n  .button.secondary:active {\n    background-color: ${unsafeCSS(palette.primary_200)};\n    border: none;\n    color: ${unsafeCSS(palette.main)};\n  }\n  .button.secondary:disabled {\n    background-color: ${unsafeCSS(palette.primary_100)};\n    border: none;\n    color: ${unsafeCSS(palette.primary_300)};\n    cursor: not-allowed;\n  }\n`;\n"]}

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

@@ -0,0 +1,2 @@
+import { MainVariant } from '../../utils/mainVariant.enum';
+export declare const buttonTextColor: Record<MainVariant, string>;

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

@@ -0,0 +1,7 @@
+import { palette } from '../../utils/colors';
+import { MainVariant } from '../../utils/mainVariant.enum';
+export const buttonTextColor = {
+    [MainVariant.PRIMARY]: palette.white,
+    [MainVariant.SECONDARY]: palette.main,
+};
+//# sourceMappingURL=tuix-button.enums.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tuix-button.enums.js","sourceRoot":"","sources":["../../../../src/tuix-button/enums/tuix-button.enums.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAE3D,MAAM,CAAC,MAAM,eAAe,GAAgC;IAC1D,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,KAAK;IACpC,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,IAAI;CACtC,CAAC","sourcesContent":["import { palette } from '../../utils/colors';\nimport { MainVariant } from '../../utils/mainVariant.enum';\n\nexport const buttonTextColor: Record<MainVariant, string> = {\n  [MainVariant.PRIMARY]: palette.white,\n  [MainVariant.SECONDARY]: palette.main,\n};\n"]}

package/dist/src/tuix-dropdown/TuixDropdown.d.ts

@@ -0,0 +1,46 @@
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { TuixDropdownOption } from './interfaces/tuix-dropdown.interface';
+import { DescriptionType } from '../tuix-input/enums/tuix-input.enums';
+import { DropdownType } from './enums/tuix-dropdown.enums';
+export declare class TuixDropdown extends LitElement {
+    static styles: import("lit").CSSResult[];
+    value?: TuixDropdownOption;
+    options: TuixDropdownOption[];
+    placeholder: string;
+    title: string;
+    disabled: boolean;
+    dark: boolean;
+    description: undefined;
+    descriptionType: DescriptionType;
+    type: DropdownType;
+    private _value;
+    private _isOptionsVisible;
+    private _optionsContainer;
+    private _inputDropdown;
+    private _previousSelectedOption;
+    private _previousFocusedOption;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _onEnterPress;
+    private _onKeyDownOption;
+    private _onKeyPressOption;
+    private _onMouseOverOption;
+    private _onClickOption;
+    protected _onInputSingle(e: CustomEvent): void;
+    protected _handleSelectEvent(event: MouseEvent | KeyboardEvent): void;
+    private _handleInputBase;
+    private _handleArrowDown;
+    private _handleArrowUp;
+    private _handleClickOutside;
+    private _focusTargetOption;
+    private _toggleOptions;
+    private _focusOptionsContainer;
+    private _unselectPreviousOption;
+    private _getOptionsContainerClasses;
+    private _triggerUpdateByExternalValueChange;
+    private _resetPreviousSelection;
+    private _getOptionsTemplate;
+    protected updated(changedProperties: Map<string, any>): void;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected render(): TemplateResult;
+}

package/dist/src/tuix-dropdown/TuixDropdown.js

@@ -0,0 +1,275 @@
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { IconName } from '../tuix-icon/enums/tuix-icon.enums';
+import { dropdownHostStyles, dropdownMainContainerStyles, dropdownOptionStyles, } from './TuixDropdown.styles';
+import { DescriptionType } from '../tuix-input/enums/tuix-input.enums';
+import { DropdownType } from './enums/tuix-dropdown.enums';
+let TuixDropdown = class TuixDropdown extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = undefined;
+        this.options = [];
+        this.placeholder = '';
+        this.title = '';
+        this.disabled = false;
+        this.dark = false;
+        this.description = undefined;
+        this.descriptionType = DescriptionType.TEXT;
+        this.type = DropdownType.SINGLE;
+        this._value = '';
+        this._isOptionsVisible = false;
+        this._previousSelectedOption = null;
+        this._previousFocusedOption = null;
+        this._handleClickOutside = (event) => {
+            if (!event.composedPath().includes(this)) {
+                this._isOptionsVisible = false;
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('click', this._handleClickOutside);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('click', this._handleClickOutside);
+        super.disconnectedCallback();
+    }
+    _onEnterPress(event) {
+        if (event.key === 'Enter') {
+            this._toggleOptions();
+        }
+    }
+    _onKeyDownOption(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+                return this._handleArrowDown();
+            case 'ArrowUp':
+                return this._handleArrowUp();
+            case 'Escape':
+                this._isOptionsVisible = false;
+                break;
+        }
+    }
+    _onKeyPressOption(event) {
+        if (event.key === 'Enter') {
+            this._onClickOption(event);
+        }
+    }
+    _onMouseOverOption(event) {
+        const optionTarget = event.target;
+        this._focusTargetOption(optionTarget);
+    }
+    _onClickOption(event) {
+        const optionTarget = event.target;
+        this._value = optionTarget.innerText;
+        this._isOptionsVisible = false;
+        this._unselectPreviousOption();
+        optionTarget.classList.add('t-option-selected');
+        this._previousSelectedOption = optionTarget;
+        this._handleSelectEvent(event);
+    }
+    _onInputSingle(e) {
+        this._handleInputBase(e, 'input-single');
+    }
+    _handleSelectEvent(event) {
+        const optionIndex = event.target.getAttribute('data-value');
+        const selectedValue = this.options[Number(optionIndex)];
+        this.dispatchEvent(new CustomEvent('select', {
+            detail: {
+                value: selectedValue,
+            },
+            bubbles: true,
+        }));
+    }
+    _handleInputBase(e, eventName) {
+        var _a;
+        this.dispatchEvent(new CustomEvent(eventName, {
+            detail: {
+                value: (_a = e.detail) === null || _a === void 0 ? void 0 : _a.value,
+            },
+            bubbles: true,
+        }));
+    }
+    _handleArrowDown() {
+        var _a;
+        const nextOption = (_a = this._previousFocusedOption) === null || _a === void 0 ? void 0 : _a.nextElementSibling;
+        if (nextOption) {
+            this._focusTargetOption(nextOption);
+        }
+    }
+    _handleArrowUp() {
+        var _a;
+        const previousOption = (_a = this._previousFocusedOption) === null || _a === void 0 ? void 0 : _a.previousElementSibling;
+        if (previousOption) {
+            this._focusTargetOption(previousOption);
+        }
+    }
+    _focusTargetOption(targetOption) {
+        var _a, _b;
+        (_b = (_a = this._previousFocusedOption) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.remove('t-option-hover');
+        targetOption === null || targetOption === void 0 ? void 0 : targetOption.classList.add('t-option-hover');
+        targetOption === null || targetOption === void 0 ? void 0 : targetOption.focus();
+        this._previousFocusedOption = targetOption;
+    }
+    _toggleOptions() {
+        if (this.disabled) {
+            return;
+        }
+        this._isOptionsVisible = !this._isOptionsVisible;
+    }
+    _focusOptionsContainer() {
+        var _a, _b, _c;
+        if (!this._isOptionsVisible || !this._optionsContainer) {
+            (_c = (_b = (_a = this._inputDropdown) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input')) === null || _c === void 0 ? void 0 : _c.focus();
+            return;
+        }
+        if (this._previousSelectedOption) {
+            this._focusTargetOption(this._previousSelectedOption);
+        }
+        else {
+            const firstOption = this._optionsContainer
+                .firstElementChild;
+            if (firstOption) {
+                this._focusTargetOption(firstOption);
+            }
+        }
+    }
+    _unselectPreviousOption() {
+        var _a;
+        if (this._previousSelectedOption) {
+            (_a = this._previousSelectedOption.classList) === null || _a === void 0 ? void 0 : _a.remove('t-option-selected');
+            this._previousSelectedOption = null;
+        }
+    }
+    _getOptionsContainerClasses() {
+        return {
+            't-options-container': true,
+            show: this._isOptionsVisible,
+            't-with-description': !!this.descriptionType,
+        };
+    }
+    _triggerUpdateByExternalValueChange() {
+        var _a;
+        this._unselectPreviousOption();
+        if (!this.value) {
+            this._value = '';
+            return;
+        }
+        const index = this.options.indexOf(this.value);
+        const optionTarget = (_a = this._optionsContainer) === null || _a === void 0 ? void 0 : _a.children[index];
+        optionTarget === null || optionTarget === void 0 ? void 0 : optionTarget.classList.add('t-option-selected');
+        this._previousSelectedOption = optionTarget || null;
+        this._value = optionTarget ? String(this.value) : '';
+    }
+    _resetPreviousSelection() {
+        this._value = '';
+        this._unselectPreviousOption();
+    }
+    _getOptionsTemplate() {
+        var _a;
+        return (_a = this.options) === null || _a === void 0 ? void 0 : _a.map((option, index) => {
+            return html `<div
+        class="t-dropdown-option"
+        @click="${this._onClickOption}"
+        data-value="${index}"
+        tabindex="0"
+        @keydown="${this._onKeyDownOption}"
+        @keypress="${this._onKeyPressOption}"
+        @mouseover="${this._onMouseOverOption}"
+      >
+        ${option}
+      </div>`;
+        });
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('_isOptionsVisible')) {
+            this._focusOptionsContainer();
+        }
+        else if (changedProperties.has('value')) {
+            this._triggerUpdateByExternalValueChange();
+        }
+    }
+    willUpdate(changedProperties) {
+        if (changedProperties.has('options')) {
+            this._resetPreviousSelection();
+        }
+    }
+    render() {
+        return html `<div class="t-dropdown-full-container">
+      <div class="t-dropdown-container">
+        <tuix-input
+          .value="${this._value}"
+          class="t-input-dropdown"
+          iconRight="${this._isOptionsVisible
+            ? IconName.CHEVRON_UP
+            : IconName.CHEVRON_DOWN}"
+          placeholder="${this.placeholder}"
+          title="${this.title}"
+          .description="${this.description}"
+          descriptionType="${this.descriptionType}"
+          ?disabled="${this.disabled}"
+          ?dark="${this.dark}"
+          ?readonly="${this.type !== DropdownType.SEARCH}"
+          @click="${this._toggleOptions}"
+          @keypress="${this._onEnterPress}"
+          @input-single="${this._onInputSingle}"
+        >
+        </tuix-input>
+      </div>
+      <div class="${classMap(this._getOptionsContainerClasses())}">
+        ${this._getOptionsTemplate()}
+      </div>
+    </div>`;
+    }
+};
+TuixDropdown.styles = [
+    dropdownHostStyles,
+    dropdownMainContainerStyles,
+    dropdownOptionStyles,
+];
+__decorate([
+    property({ type: Object, reflect: true })
+], TuixDropdown.prototype, "value", void 0);
+__decorate([
+    property({ type: Array })
+], TuixDropdown.prototype, "options", void 0);
+__decorate([
+    property({ type: String })
+], TuixDropdown.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String })
+], TuixDropdown.prototype, "title", void 0);
+__decorate([
+    property({ type: Boolean })
+], TuixDropdown.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], TuixDropdown.prototype, "dark", void 0);
+__decorate([
+    property({ type: String })
+], TuixDropdown.prototype, "description", void 0);
+__decorate([
+    property({ type: DescriptionType })
+], TuixDropdown.prototype, "descriptionType", void 0);
+__decorate([
+    property({ type: String })
+], TuixDropdown.prototype, "type", void 0);
+__decorate([
+    state()
+], TuixDropdown.prototype, "_value", void 0);
+__decorate([
+    state()
+], TuixDropdown.prototype, "_isOptionsVisible", void 0);
+__decorate([
+    query('.t-options-container')
+], TuixDropdown.prototype, "_optionsContainer", void 0);
+__decorate([
+    query('.t-dropdown-container .t-input-dropdown')
+], TuixDropdown.prototype, "_inputDropdown", void 0);
+TuixDropdown = __decorate([
+    customElement('tuix-dropdown')
+], TuixDropdown);
+export { TuixDropdown };
+//# sourceMappingURL=TuixDropdown.js.map