tuix-webcomponents 0.0.22 → 0.0.25

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

@@ -0,0 +1,65 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import '../tuix-icon/TuixIcon.js';
+import '../tuix-paper/TuixPaper.js';
+import { BorderRadiusPaper, PaperElevation, } from '../tuix-paper/enums/tuix-paper.enum.js';
+import { commonModalStyles, mobileModalStyles } from './TuixModal.styles.js';
+import { TextVariant } from '../tuix-text/enums/tuix-text.enums.js';
+import { IconName, IconSizeVariant, } from '../tuix-icon/enums/tuix-icon.enums.js';
+let TuixModal = class TuixModal extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.visible = false;
+        this.dark = false;
+        this.scrollable = false;
+    }
+    static { this.styles = [commonModalStyles, mobileModalStyles]; }
+    _onClose() {
+        this.visible = false;
+        this.dispatchEvent(new CustomEvent('on-close', { bubbles: true }));
+    }
+    render() {
+        return html `
+      <tuix-paper
+        class="modal-container"
+        elevation=${PaperElevation.VARIANT_4}
+        border-radius=${BorderRadiusPaper.SOFT}
+        ?dark=${this.dark}
+      >
+        <div class="content">
+          <header>
+            <slot name="title"></slot>
+            <tuix-icon
+              @click=${this._onClose}
+              class="close-icon"
+              size="${IconSizeVariant.MEDIUM}"
+              name="${IconName.X}"
+              color="${TextVariant.MAIN}"
+              ?dark=${this.dark}
+            ></tuix-icon>
+          </header>
+          <div class="body" ?scrollable=${this.scrollable}>
+            <slot name="body"></slot>
+          </div>
+          <div class="action-buttons">
+            <slot name="actions"></slot>
+          </div>
+        </div>
+      </tuix-paper>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TuixModal.prototype, "visible", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TuixModal.prototype, "dark", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TuixModal.prototype, "scrollable", void 0);
+TuixModal = __decorate([
+    customElement('tuix-modal')
+], TuixModal);
+export { TuixModal };

package/dist/src/tuix-modal/TuixModal.styles.d.ts

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

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

@@ -0,0 +1,55 @@
+import { css, unsafeCSS } from 'lit';
+import { ScreenSizes } from '../utils/screenSizes.enum';
+import { Palette } from '../utils/colors';
+export const commonModalStyles = css `
+  :host {
+    display: none;
+    position: fixed;
+    width: 100%;
+    height: 100vh;
+    align-items: center;
+    top: 0;
+    left: 0;
+    background-color: ${unsafeCSS(Palette.BLACK + '80')};
+  }
+
+  :host([visible]) {
+    display: flex;
+  }
+
+  .modal-container {
+    margin: auto;
+    max-width: 96%;
+    max-height: 96vh;
+
+    .content {
+      border-radius: 4px;
+
+      header {
+        display: flex;
+        justify-content: space-between;
+        padding: 16px 16px 8px;
+
+        .close-icon {
+          cursor: pointer;
+        }
+      }
+
+      div.body {
+        padding: 8px 16px 32px;
+      }
+
+      div.action-buttons {
+        padding: 8px 16px 16px 16px;
+      }
+    }
+  }
+`;
+export const mobileModalStyles = css `
+  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
+    .modal-container {
+      min-width: 100%;
+      max-height: 100%;
+    }
+  }
+`;

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

@@ -1,7 +1,10 @@
-import { LitElement, TemplateResult } from 'lit';
-import { ShadowVariants } from './enums/tuix-paper.enum';
+import { LitElement, type TemplateResult } from 'lit';
+import { BorderRadiusPaper, PaperElevation } from './enums/tuix-paper.enum';
 export declare class TuixPaper extends LitElement {
-    elevation: ShadowVariants;
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
+    elevation: PaperElevation;
+    borderRadius: BorderRadiusPaper;
+    dark: boolean;
+    private _getOptionalClasses;
     render(): TemplateResult;
 }

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

@@ -1,40 +1,46 @@
 import { __decorate } from "tslib";
-import { LitElement, css, html, unsafeCSS } from 'lit';
+import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { ShadowVariants } from './enums/tuix-paper.enum';
+import { BorderRadiusPaper, PaperElevation } from './enums/tuix-paper.enum';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { paperStyles } from './TuixPaper.styles';
 let TuixPaper = class TuixPaper extends LitElement {
     constructor() {
         super(...arguments);
-        this.elevation = ShadowVariants.Variant_1;
+        this.elevation = PaperElevation.VARIANT_1;
+        this.borderRadius = BorderRadiusPaper.NONE;
+        this.dark = false;
+    }
+    static { this.styles = [paperStyles]; }
+    _getOptionalClasses() {
+        const variantClass = `variant_${this.elevation}`;
+        const darkClass = `dark_${this.elevation}`;
+        return {
+            elevation: true,
+            [variantClass]: !this.dark,
+            [darkClass]: this.dark,
+        };
     }
     render() {
-        return html ` <div class="elevation variant_${this.elevation}">
+        return html ` <div
+      class="${classMap(this._getOptionalClasses())}"
+      style="${styleMap({ borderRadius: this.borderRadius })}"
+    >
       <slot></slot>
     </div>`;
     }
 };
-// prettier-ignore
-TuixPaper.styles = css `
-    .elevation {
-      border-radius: 20px;
-      padding: 16px 32px;
-    }
-
-    ${unsafeCSS(Object.values(ShadowVariants).slice(1)
-    .map((variant, index) => {
-    return `
-            .elevation.variant_${variant} {
-              box-shadow: 0px ${Math.pow(2, index)}px ${Math.pow(2, (index + 2))}px rgba(66, 79, 101, 0.16);
-            }
-          `;
-})
-    .join('\n'))}
-  `;
 __decorate([
-    property({ type: ShadowVariants })
+    property({ type: PaperElevation })
 ], TuixPaper.prototype, "elevation", void 0);
+__decorate([
+    property({ type: String, attribute: 'border-radius' })
+], TuixPaper.prototype, "borderRadius", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TuixPaper.prototype, "dark", void 0);
 TuixPaper = __decorate([
     customElement('tuix-paper')
 ], TuixPaper);
 export { TuixPaper };
-//# sourceMappingURL=TuixPaper.js.map

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

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

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

@@ -0,0 +1,30 @@
+import { css, unsafeCSS } from 'lit';
+import { PaperElevation } from './enums/tuix-paper.enum';
+import { Palette } from '../utils/colors';
+const calculatedStyles = Object.values(PaperElevation)
+    .slice(1, -1)
+    .map((variant, index) => `
+  .elevation.variant_${variant} {
+    box-shadow: 0px ${2 ** index}px ${2 ** (index + 2)}px ${Palette.SHADOW};
+  }
+  .elevation.dark_${variant} {
+    background-color:rgb(${23 + 3 * index},${23 + 3 * index},${26 + 5 * index});
+  }`)
+    .join('\n');
+export const paperStyles = css `
+  ${unsafeCSS(`
+  .elevation {
+    background-color: ${Palette.WHITE};
+  }
+  .elevation.dark_${PaperElevation.VARIANT_0} {
+    background-color: ${Palette.BLACK};
+  }
+  ${calculatedStyles}
+  .elevation.variant_${PaperElevation.VARIANT_4} {
+    box-shadow: 0px 7px 24px ${Palette.SHADOW};
+  }
+  .elevation.dark_${PaperElevation.VARIANT_4} {
+    background-color: rgb(33, 33, 40);
+  }
+`)}
+`;

package/dist/src/tuix-paper/enums/tuix-paper.enum.d.ts

@@ -1,7 +1,13 @@
-export declare enum ShadowVariants {
-    Variant_0 = "0",
-    Variant_1 = "1",
-    Variant_2 = "2",
-    Variant_3 = "3",
-    Variant_4 = "4"
+export declare enum PaperElevation {
+    VARIANT_0 = "0",
+    VARIANT_1 = "1",
+    VARIANT_2 = "2",
+    VARIANT_3 = "3",
+    VARIANT_4 = "4"
+}
+export declare enum BorderRadiusPaper {
+    NONE = "0px",
+    SOFT = "4px",
+    MEDIUM = "10px",
+    STRONG = "20px"
 }

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

@@ -1,9 +1,15 @@
-export var ShadowVariants;
-(function (ShadowVariants) {
-    ShadowVariants["Variant_0"] = "0";
-    ShadowVariants["Variant_1"] = "1";
-    ShadowVariants["Variant_2"] = "2";
-    ShadowVariants["Variant_3"] = "3";
-    ShadowVariants["Variant_4"] = "4";
-})(ShadowVariants || (ShadowVariants = {}));
-//# sourceMappingURL=tuix-paper.enum.js.map
+export var PaperElevation;
+(function (PaperElevation) {
+    PaperElevation["VARIANT_0"] = "0";
+    PaperElevation["VARIANT_1"] = "1";
+    PaperElevation["VARIANT_2"] = "2";
+    PaperElevation["VARIANT_3"] = "3";
+    PaperElevation["VARIANT_4"] = "4";
+})(PaperElevation || (PaperElevation = {}));
+export var BorderRadiusPaper;
+(function (BorderRadiusPaper) {
+    BorderRadiusPaper["NONE"] = "0px";
+    BorderRadiusPaper["SOFT"] = "4px";
+    BorderRadiusPaper["MEDIUM"] = "10px";
+    BorderRadiusPaper["STRONG"] = "20px";
+})(BorderRadiusPaper || (BorderRadiusPaper = {}));

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

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+import '../tuix-text/TuixText.js';
+import { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums';
+import type { TuixRadioButtonOption } from './interfaces/tuix-radio-button.interface';
+export declare class TuixRadioButton extends LitElement {
+    static styles: import("lit").CSSResult[];
+    disabled: boolean;
+    dark: boolean;
+    error: boolean;
+    options: TuixRadioButtonOption[];
+    labelSide: CheckboxLabelSide;
+    selectedOption: TuixRadioButtonOption | null;
+    private _onRadioButtonChange;
+    private _getFullContainerClasses;
+    private _formatTemplate;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/tuix-radio-button/TuixRadioButton.js

@@ -0,0 +1,96 @@
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import '../tuix-text/TuixText.js';
+import { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums';
+import { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums';
+import { radioButtonContainerStyles, radioButtonInnerStyles, radioButtonLabelStyles, radioButtonStyles, radioHostStyles, } from './TuixRadioButton.styles';
+let TuixRadioButton = class TuixRadioButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.dark = false;
+        this.error = false;
+        this.options = [];
+        this.labelSide = CheckboxLabelSide.RIGHT;
+        this.selectedOption = null;
+    }
+    static { this.styles = [
+        radioHostStyles,
+        radioButtonContainerStyles,
+        radioButtonStyles,
+        radioButtonInnerStyles,
+        radioButtonLabelStyles,
+    ]; }
+    _onRadioButtonChange(event) {
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: {
+                value: event.target.value,
+            },
+            bubbles: true,
+        }));
+    }
+    _getFullContainerClasses() {
+        return {
+            't-radio-button-full-container': true,
+            't-with-error': this.error && !this.disabled,
+            't-with-label-left': this.labelSide === CheckboxLabelSide.LEFT,
+            't-multiple-options': this.options.length > 1,
+        };
+    }
+    _formatTemplate(option, index) {
+        return html `<label class="${classMap(this._getFullContainerClasses())}">
+      <div class="t-radio-button-container">
+        <input
+          type="radio"
+          class="t-radio-button"
+          ?disabled="${this.disabled}"
+          .value="${option}"
+          name="tuix-radio-button"
+          ?checked="${this.selectedOption === option}"
+          @change="${this._onRadioButtonChange}"
+        />
+        <div class="t-radio-button-checkmark">
+          <div class="t-radio-button-inner"></div>
+        </div>
+      </div>
+      <div class="t-radio-button-label">
+        <slot name="label-${index}">
+          <tuix-text
+            size="${TextSize.FieldPlaceholder}"
+            color="${TextVariant.PRIMARY}"
+            ?dark="${this.dark}"
+          >
+            ${option}
+          </tuix-text>
+        </slot>
+      </div>
+    </label>`;
+    }
+    render() {
+        return html `${this.options.map((option, index) => this._formatTemplate(option, index))}`;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TuixRadioButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TuixRadioButton.prototype, "dark", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TuixRadioButton.prototype, "error", void 0);
+__decorate([
+    property({ type: Array })
+], TuixRadioButton.prototype, "options", void 0);
+__decorate([
+    property({ type: String })
+], TuixRadioButton.prototype, "labelSide", void 0);
+__decorate([
+    property({ type: String })
+], TuixRadioButton.prototype, "selectedOption", void 0);
+TuixRadioButton = __decorate([
+    customElement('tuix-radio-button')
+], TuixRadioButton);
+export { TuixRadioButton };

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

@@ -0,0 +1,5 @@
+export declare const radioHostStyles: import("lit").CSSResult;
+export declare const radioButtonContainerStyles: import("lit").CSSResult;
+export declare const radioButtonStyles: import("lit").CSSResult;
+export declare const radioButtonInnerStyles: import("lit").CSSResult;
+export declare const radioButtonLabelStyles: import("lit").CSSResult;

package/dist/src/tuix-radio-button/TuixRadioButton.styles.js

@@ -0,0 +1,135 @@
+import { css, unsafeCSS } from 'lit';
+import { hostStyles } from '../tuix-checkbox/TuixCheckbox.styles';
+import { Palette } from '../utils/colors';
+import { ScreenSizes } from '../utils/screenSizes.enum';
+export const radioHostStyles = css `
+  ${hostStyles}
+  :host {
+    --t-margin-between-radio-buttons: 1rem;
+    --t-radio-button-inner-color-disabled: ${unsafeCSS(Palette.PRIMARY_300)};
+  }
+`;
+export const radioButtonContainerStyles = css `
+  .t-radio-button-full-container {
+    display: flex;
+    justify-content: var(--t-label-right-default-justify, flex-start);
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+  :host([disabled]) .t-radio-button-full-container {
+    cursor: not-allowed;
+  }
+  .t-radio-button-container {
+    --t-radio-button-size-box: 1.5rem;
+    --t-radio-button-shadow-width: 2px;
+    display: block;
+    position: relative;
+    height: var(--t-radio-button-size-box);
+    width: var(--t-radio-button-size-box);
+    min-width: var(--t-radio-button-size-box);
+  }
+  .t-radio-button-container .t-radio-button {
+    position: absolute;
+    opacity: 0;
+    height: 0;
+    width: 0;
+  }
+  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
+    .t-radio-button-container {
+      --t-radio-button-size-box: 1rem;
+      --t-radio-button-shadow-width: 1px;
+      margin-top: 1px;
+    }
+  }
+`;
+export const radioButtonStyles = css `
+  .t-radio-button-full-container.t-multiple-options {
+    margin-bottom: var(--t-margin-between-radio-buttons);
+  }
+  .t-radio-button-container .t-radio-button-checkmark {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    height: var(--t-radio-button-size-box);
+    width: var(--t-radio-button-size-box);
+    background-color: var(--t-bg-color-primary);
+    border: 1px solid var(--t-stroke-color-grey);
+    box-sizing: border-box;
+    border-radius: 50%;
+  }
+  .t-radio-button-container
+    .t-radio-button:checked
+    ~ .t-radio-button-checkmark {
+    border: 1px solid var(--t-main-color-tuix);
+  }
+  .t-radio-button-container .t-radio-button:focus ~ .t-radio-button-checkmark {
+    box-shadow: 0 0 0px var(--t-radio-button-shadow-width)
+      var(--t-stroke-color-focus);
+  }
+  .t-radio-button-full-container:hover
+    .t-radio-button-container
+    .t-radio-button-checkmark {
+    border: 1px solid var(--t-main-color-tuix);
+  }
+  .t-radio-button-full-container.t-with-error
+    .t-radio-button-container
+    .t-radio-button-checkmark {
+    border: 1px solid var(--t-text-color-error);
+  }
+
+  .t-radio-button-container
+    .t-radio-button:disabled
+    ~ .t-radio-button-checkmark {
+    background-color: var(--t-bg-color-disabled);
+    border: none;
+    box-shadow: none;
+  }
+`;
+export const radioButtonInnerStyles = css `
+  .t-radio-button-container .t-radio-button-checkmark .t-radio-button-inner {
+    background-color: var(--t-main-color-tuix);
+    margin: auto;
+    height: calc(var(--t-radio-button-size-box) / 2 - 2px);
+    width: calc(var(--t-radio-button-size-box) / 2 - 2px);
+    border-radius: 50%;
+    display: none;
+  }
+  .t-radio-button-container
+    .t-radio-button:checked
+    ~ .t-radio-button-checkmark
+    .t-radio-button-inner {
+    display: block;
+  }
+  :host([error])
+    .t-radio-button-container
+    .t-radio-button-checkmark
+    .t-radio-button-inner {
+    background-color: var(--t-text-color-error);
+  }
+  :host([disabled])
+    .t-radio-button-container
+    .t-radio-button-checkmark
+    .t-radio-button-inner {
+    background-color: var(--t-radio-button-inner-color-disabled);
+    cursor: not-allowed;
+  }
+`;
+export const radioButtonLabelStyles = css `
+  .t-radio-button-label {
+    display: block;
+    color: var(--t-text-color-label);
+    margin-left: 0.625rem;
+  }
+  .t-radio-button-full-container.t-with-label-left {
+    flex-direction: row-reverse;
+    justify-content: var(--t-label-left-default-justify, space-between);
+  }
+  .t-radio-button-full-container.t-with-label-left .t-radio-button-label {
+    margin-right: 0.625rem;
+    margin-left: 0;
+  }
+`;

package/dist/src/tuix-radio-button/interfaces/tuix-radio-button.interface.d.ts

@@ -0,0 +1,3 @@
+import { type DetailValue } from '../../utils/interfaces/detail-value.interface';
+export type TuixRadioButtonOption = string | number;
+export type CustomEventTuixRadioButton<T extends TuixRadioButtonOption = TuixRadioButtonOption> = CustomEvent<DetailValue<T>>;

package/dist/src/tuix-radio-button/interfaces/tuix-radio-button.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/src/tuix-table/TuixTable.d.ts

@@ -0,0 +1,48 @@
+import { LitElement } from 'lit';
+import '../tuix-icon/TuixIcon.js';
+import '../tuix-text/TuixText.js';
+import type { IDataTableHeader, ThreeDotsLoaderConfig } from './interfaces/tuix-table.interface.js';
+export declare class TuixTable extends LitElement {
+    static styles: import("lit").CSSResult[];
+    paginated: boolean;
+    disableMobileTable: boolean;
+    showMobileTableInTablet: boolean;
+    loader?: ThreeDotsLoaderConfig;
+    data: Record<string, any>[];
+    headers: IDataTableHeader<any>[];
+    pageSizeOptions: number[];
+    totalItems?: number;
+    currentPage?: number;
+    currentSize?: number;
+    isLoadingData: boolean;
+    private _isTabletView;
+    private _isMobileView;
+    private _headerPercents;
+    private _mqTablet?;
+    private _mqMobile?;
+    private _onScreenSizeChange;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProps: Map<string, any>): void;
+    private get _effectiveTotalItems();
+    private get _effectiveCurrentPage();
+    private get _effectivePageSize();
+    private get totalPages();
+    private get _paginationProps();
+    private _nextPage;
+    private _prevPage;
+    private _setPageSize;
+    private _computeHeaderPercents;
+    private _cellStyleString;
+    private _textVariantColor;
+    private _renderHeaderCells;
+    private _renderCell;
+    private _renderRows;
+    private _onPageSizeChange;
+    private _renderPageSizeOptions;
+    private _renderSpinner;
+    private _renderPagination;
+    private _renderTable;
+    private _renderCards;
+    render(): import("lit-html").TemplateResult<1>;
+}