@sula-tech/webcomponents 0.3.1 → 0.4.0

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

@@ -0,0 +1 @@
+{"file":"sula-tiles.js","mappings":"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","names":["SulaTiles","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sula-tiles/model/sula-tiles.model.ts","src/components/sula-tiles/sula-tiles.scss?tag=sula-tiles&encapsulation=shadow","src/components/sula-tiles/sula-tiles.tsx"],"sourcesContent":["export enum SulaTilesType {\n  Rounded = 'rounded',\n  Square = 'square',\n}\n\nexport enum SulaTilesSize {\n  Default = 'default',\n  Large = 'large',\n}\n",":host {\n  display: block;\n}\n","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"],"version":3}