@sula-tech/webcomponents 0.3.3 → 0.4.0

package/dist/collection/components/sula-tiles/sula-tiles.js

@@ -0,0 +1,316 @@
+import { Host, h } from "@stencil/core";
+import { SulaTilesSize, SulaTilesType } from "./model/sula-tiles.model";
+export class SulaTiles {
+    constructor() {
+        /**
+         * Tiles type
+         */
+        this.type = SulaTilesType.Rounded;
+        /**
+         * Tiles size
+         */
+        this.size = SulaTilesSize.Default;
+        /**
+         * Use ellipsis on tiles text
+         */
+        this.ellipsis = false;
+        /**
+         * Tiles icon
+         */
+        this.icon = '';
+        /**
+         * Tiles text
+         */
+        this.text = '';
+        /**
+         * Tiles subtext
+         */
+        this.subText = '';
+        /**
+         * Tiles is disabled
+         */
+        this.disabled = false;
+        this.TILE_SIZES = {
+            [SulaTilesSize.Default]: 'w-80 h-80',
+            [SulaTilesSize.Large]: 'w-120 h-120',
+        };
+        this.BASE_CLASSES = {
+            container: 'flex w-[167px]',
+            roundedContainer: 'flex-col justify-center items-center',
+            squareContainer: 'rounded-md p-20',
+            interactiveBackground: 'bg-surface-on-body hover:bg-states-empty-bg-hover active:bg-states-empty-bg-pressed outline-2 outline-offset-2 outline-feedback-informational cursor-pointer',
+            disabledBackground: 'bg-states-bg-disabled',
+            iconContainer: 'flex justify-center items-center leading-4',
+            roundedIcon: 'rounded-full',
+            textContainer: 'flex',
+            ellipsisText: 'truncate overflow-hidden whitespace-nowrap',
+        };
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            this.tileClicked.emit();
+        };
+    }
+    get isRounded() {
+        return this.type === SulaTilesType.Rounded;
+    }
+    get isSquare() {
+        return this.type === SulaTilesType.Square;
+    }
+    get hasSubText() {
+        return !!this.subText;
+    }
+    get isInteractive() {
+        return !this.disabled;
+    }
+    getRoundedTileSize() {
+        return this.TILE_SIZES[this.size] || this.TILE_SIZES[SulaTilesSize.Default];
+    }
+    getContainerClasses() {
+        return {
+            [this.BASE_CLASSES.container]: true,
+            [this.BASE_CLASSES.roundedContainer]: this.isRounded,
+            [this.BASE_CLASSES.squareContainer]: this.isSquare,
+            [this.BASE_CLASSES.interactiveBackground]: this.isSquare && this.isInteractive,
+            [this.BASE_CLASSES.disabledBackground]: this.disabled && this.isSquare,
+            'items-center': this.isSquare && !this.hasSubText,
+            'flex-col items-start justify-end': this.isSquare && this.hasSubText,
+        };
+    }
+    getIconContainerClasses() {
+        return {
+            [this.BASE_CLASSES.iconContainer]: true,
+            [this.BASE_CLASSES.roundedIcon]: this.isRounded,
+            [this.BASE_CLASSES.interactiveBackground]: this.isRounded && this.isInteractive,
+            [this.BASE_CLASSES.disabledBackground]: this.isRounded && this.disabled,
+            [this.getRoundedTileSize()]: this.isRounded,
+        };
+    }
+    getTextContainerClasses() {
+        return {
+            [this.BASE_CLASSES.textContainer]: true,
+            'mt-8': this.isRounded,
+            'ml-12': this.isSquare && !this.hasSubText,
+            'flex-col mt-36 space-y-4': this.isSquare && this.hasSubText,
+            'max-w-full': this.ellipsis,
+        };
+    }
+    getTextClasses(isPrimary = true) {
+        return {
+            'text-base leading-4': true,
+            'font-bold': isPrimary,
+            'text-text-primary': isPrimary && this.isInteractive,
+            'text-text-secondary': !isPrimary && this.isInteractive,
+            'text-icon-disabled': this.disabled,
+            [this.BASE_CLASSES.ellipsisText]: this.ellipsis,
+            'whitespace-normal': !this.ellipsis,
+        };
+    }
+    getIconClasses() {
+        const baseClass = 'text-3xl';
+        const colorClass = this.disabled ? 'text-icon-disabled' : 'text-icon-primary';
+        return `${baseClass} ${colorClass}`;
+    }
+    getTabIndex(condition) {
+        return condition && this.isInteractive ? 0 : null;
+    }
+    renderIcon() {
+        return (h("div", { class: this.getIconContainerClasses(), tabIndex: this.getTabIndex(this.isRounded) }, h("sula-icon", { icon: this.icon, customClass: this.getIconClasses() })));
+    }
+    renderText() {
+        return (h("div", { class: this.getTextContainerClasses() }, h("span", { class: this.getTextClasses(true), title: this.ellipsis ? this.text : undefined }, this.text), this.hasSubText && (h("span", { class: this.getTextClasses(false), title: this.ellipsis ? this.subText : undefined }, this.subText))));
+    }
+    render() {
+        return (h(Host, { key: '571dd0142465ec3483c7a460feedf63542836cfa' }, h("div", { key: '7bb61260329cbded9fb9a25201c74de94a060268', class: this.getContainerClasses(), tabIndex: this.getTabIndex(this.isSquare), onClick: this.handleClick }, this.renderIcon(), this.renderText())));
+    }
+    static get is() { return "sula-tiles"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sula-tiles.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sula-tiles.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "attribute": "type",
+                "mutable": false,
+                "complexType": {
+                    "original": "SulaTilesType",
+                    "resolved": "SulaTilesType.Rounded | SulaTilesType.Square",
+                    "references": {
+                        "SulaTilesType": {
+                            "location": "import",
+                            "path": "./model/sula-tiles.model",
+                            "id": "src/components/sula-tiles/model/sula-tiles.model.ts::SulaTilesType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tiles type"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "SulaTilesType.Rounded"
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "SulaTilesSize",
+                    "resolved": "SulaTilesSize.Default | SulaTilesSize.Large",
+                    "references": {
+                        "SulaTilesSize": {
+                            "location": "import",
+                            "path": "./model/sula-tiles.model",
+                            "id": "src/components/sula-tiles/model/sula-tiles.model.ts::SulaTilesSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tiles size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "SulaTilesSize.Default"
+            },
+            "ellipsis": {
+                "type": "boolean",
+                "attribute": "ellipsis",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use ellipsis on tiles text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "attribute": "icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tiles icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "text": {
+                "type": "string",
+                "attribute": "text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tiles text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "subText": {
+                "type": "string",
+                "attribute": "sub-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tiles subtext"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tiles is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tileClicked",
+                "name": "tileClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "note",
+                            "text": "If tile is disabled event won't be emitted"
+                        }],
+                    "text": "Event emitted when tile is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=sula-tiles.js.map

package/dist/collection/components/sula-tiles/sula-tiles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sula-tiles.js","sourceRoot":"","sources":["../../../src/components/sula-tiles/sula-tiles.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { SulaTilesSize, SulaTilesType } from './model/sula-tiles.model';\n\n@Component({\n  tag: 'sula-tiles',\n  styleUrl: 'sula-tiles.scss',\n  shadow: true,\n})\nexport class SulaTiles {\n  /**\n   * Tiles type\n   */\n  @Prop() type: SulaTilesType = SulaTilesType.Rounded;\n\n  /**\n   * Tiles size\n   */\n  @Prop() size: SulaTilesSize = SulaTilesSize.Default;\n\n  /**\n   * Use ellipsis on tiles text\n   */\n  @Prop() ellipsis: boolean = false;\n\n  /**\n   * Tiles icon\n   */\n  @Prop() icon: string = '';\n\n  /**\n   * Tiles text\n   */\n  @Prop() text: string = '';\n\n  /**\n   * Tiles subtext\n   */\n  @Prop() subText: string = '';\n\n  /**\n   * Tiles is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Event emitted when tile is clicked.\n   * @note If tile is disabled event won't be emitted\n   */\n  @Event()\n  tileClicked: EventEmitter<void>;\n\n  private readonly TILE_SIZES = {\n    [SulaTilesSize.Default]: 'w-80 h-80',\n    [SulaTilesSize.Large]: 'w-120 h-120',\n  } as const;\n\n  private readonly BASE_CLASSES = {\n    container: 'flex w-[167px]',\n    roundedContainer: 'flex-col justify-center items-center',\n    squareContainer: 'rounded-md p-20',\n    interactiveBackground:\n      'bg-surface-on-body hover:bg-states-empty-bg-hover active:bg-states-empty-bg-pressed outline-2 outline-offset-2 outline-feedback-informational cursor-pointer',\n    disabledBackground: 'bg-states-bg-disabled',\n    iconContainer: 'flex justify-center items-center leading-4',\n    roundedIcon: 'rounded-full',\n    textContainer: 'flex',\n    ellipsisText: 'truncate overflow-hidden whitespace-nowrap',\n  } as const;\n\n  private get isRounded(): boolean {\n    return this.type === SulaTilesType.Rounded;\n  }\n\n  private get isSquare(): boolean {\n    return this.type === SulaTilesType.Square;\n  }\n\n  private get hasSubText(): boolean {\n    return !!this.subText;\n  }\n\n  private get isInteractive(): boolean {\n    return !this.disabled;\n  }\n\n  private getRoundedTileSize(): string {\n    return this.TILE_SIZES[this.size] || this.TILE_SIZES[SulaTilesSize.Default];\n  }\n\n  private getContainerClasses(): Record<string, boolean> {\n    return {\n      [this.BASE_CLASSES.container]: true,\n      [this.BASE_CLASSES.roundedContainer]: this.isRounded,\n      [this.BASE_CLASSES.squareContainer]: this.isSquare,\n      [this.BASE_CLASSES.interactiveBackground]: this.isSquare && this.isInteractive,\n      [this.BASE_CLASSES.disabledBackground]: this.disabled && this.isSquare,\n      'items-center': this.isSquare && !this.hasSubText,\n      'flex-col items-start justify-end': this.isSquare && this.hasSubText,\n    };\n  }\n\n  private getIconContainerClasses(): Record<string, boolean> {\n    return {\n      [this.BASE_CLASSES.iconContainer]: true,\n      [this.BASE_CLASSES.roundedIcon]: this.isRounded,\n      [this.BASE_CLASSES.interactiveBackground]: this.isRounded && this.isInteractive,\n      [this.BASE_CLASSES.disabledBackground]: this.isRounded && this.disabled,\n      [this.getRoundedTileSize()]: this.isRounded,\n    };\n  }\n\n  private getTextContainerClasses(): Record<string, boolean> {\n    return {\n      [this.BASE_CLASSES.textContainer]: true,\n      'mt-8': this.isRounded,\n      'ml-12': this.isSquare && !this.hasSubText,\n      'flex-col mt-36 space-y-4': this.isSquare && this.hasSubText,\n      'max-w-full': this.ellipsis,\n    };\n  }\n\n  private getTextClasses(isPrimary: boolean = true): Record<string, boolean> {\n    return {\n      'text-base leading-4': true,\n      'font-bold': isPrimary,\n      'text-text-primary': isPrimary && this.isInteractive,\n      'text-text-secondary': !isPrimary && this.isInteractive,\n      'text-icon-disabled': this.disabled,\n      [this.BASE_CLASSES.ellipsisText]: this.ellipsis,\n      'whitespace-normal': !this.ellipsis,\n    };\n  }\n\n  private getIconClasses(): string {\n    const baseClass = 'text-3xl';\n    const colorClass = this.disabled ? 'text-icon-disabled' : 'text-icon-primary';\n    return `${baseClass} ${colorClass}`;\n  }\n\n  private getTabIndex(condition: boolean): number | null {\n    return condition && this.isInteractive ? 0 : null;\n  }\n\n  private renderIcon() {\n    return (\n      <div class={this.getIconContainerClasses()} tabIndex={this.getTabIndex(this.isRounded)}>\n        <sula-icon icon={this.icon} customClass={this.getIconClasses()} />\n      </div>\n    );\n  }\n\n  private renderText() {\n    return (\n      <div class={this.getTextContainerClasses()}>\n        <span class={this.getTextClasses(true)} title={this.ellipsis ? this.text : undefined}>\n          {this.text}\n        </span>\n        {this.hasSubText && (\n          <span class={this.getTextClasses(false)} title={this.ellipsis ? this.subText : undefined}>\n            {this.subText}\n          </span>\n        )}\n      </div>\n    );\n  }\n\n  handleClick = () => {\n    if (this.disabled) return;\n\n    this.tileClicked.emit();\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getContainerClasses()} tabIndex={this.getTabIndex(this.isSquare)} onClick={this.handleClick}>\n          {this.renderIcon()}\n          {this.renderText()}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}