@xplor-education/core-stencil-components 3.1.1 → 3.1.3

package/dist/components/p-B5rS_jjI.js.map

@@ -1 +0,0 @@
-{"file":"p-B5rS_jjI.js","mappings":";;AAAA,MAAM,cAAc,GAAG,kywBAAkywB;;MCe5ywB,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;AAbxB,IAAA,WAAA,GAAA;;;AAeU,QAAA,IAAI,CAAA,IAAA,GAAoF,WAAW;AACnG,QAAA,IAAA,CAAA,IAAI,GAA8B,IAAI,CAAC;;AASvC,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAOjC;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAW,GAAG;AAgD3B;IA7CS,UAAU,GAAA;QAChB,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,OAAO,EAAE;AACvC,YAAA,QACE,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,+BAA+B,EAAC,SAAS,EAAE,IAAI,CAAC,OAAO,EAAA,CAAS;;AAGhF,QAAA,QACE,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,aAAa,EACtB,EAAA,IAAI,CAAC,IAAI,CACL;;IAIX,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI;AAC3D,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,KAAK,IAAI;QAE1C,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,KAAK,EACH,MAAA,CAAA,MAAA,CAAA,EAAA,UAAU,EAAE,IAAI,EAChB,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,EACjB,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EACzD,qBAAqB,EAAE,UAAU,EACjC,qBAAqB,EAAE,OAAO,IAAI,CAAC,UAAU,EAC7C,sBAAsB,EAAE,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,CAAC,UAAU,EACpE,oBAAoB,EAAE,IAAI,CAAC,YAAY,KAAK,KAAK,IAAI,CAAC,UAAU,EAAA,GAC5D,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,EAAC,EAEjD,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,EAAE,EAAA,YAAA,EACzC,IAAI,CAAC,SAAS,EAAA,eAAA,EACX,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,EAC5C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEtB,OAAO,IAAI,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CAAC,UAAU,EAAE,EAC7D,IAAI,CAAC,IAAI,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAE,EAAA,IAAI,CAAC,IAAI,CAAQ,EACzD,OAAO,IAAI,IAAI,CAAC,YAAY,KAAK,KAAK,IAAI,IAAI,CAAC,UAAU,EAAE,CACrD,CACJ,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-button/xplor-button.scss?tag=xplor-button&encapsulation=scoped","src/components/xplor-button/xplor-button.tsx"],"sourcesContent":["@use '../../styles/colours.scss' as colours-pg;\n@use '../../styles/spacing.scss' as spacing;\n\n:host {\n  display: block;\n}\n\n.x-button {\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n  -ms-flex-pack: center;\n  justify-content: center;\n  position: relative;\n  -webkit-align-items: center;\n  -webkit-box-align: center;\n  -ms-flex-align: center;\n  align-items: center;\n  border: 1px solid;\n  border-radius: 1rem;\n  cursor: pointer;\n  display: block;\n  -webkit-flex-direction: row;\n  -ms-flex-direction: row;\n  flex-direction: row;\n  font-size: 1rem;\n  font-weight: 500;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n  -ms-flex-pack: center;\n  justify-content: center;\n  -webkit-letter-spacing: 0.75px;\n  -moz-letter-spacing: 0.75px;\n  -ms-letter-spacing: 0.75px;\n  padding: spacing.$spacing-12 spacing.$spacing-24;\n  letter-spacing: 0.75px;\n  overflow: hidden;\n  position: relative;\n  -webkit-transition:\n    background-color 0.2s,\n    border-color 0.2s,\n    color 0.2s;\n  transition:\n    background-color 0.2s,\n    border-color 0.2s,\n    color 0.2s;\n\n  // Icon Only Button (Circular)\n  &.x-button--icon-only {\n    width: 48px;\n    height: 48px;\n    padding: 0;\n    border-radius: 50%;\n    min-width: 48px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    .button-icon {\n      font-size: 20px;\n      font-weight: 300;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      &.button-icon--svg {\n        svg {\n          width: spacing.$spacing-16;\n          height: spacing.$spacing-16;\n          display: block;\n        }\n      }\n    }\n  }\n\n  // Regular Button with Icon\n  &.x-button--with-icon {\n    .button-icon {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 18px;\n      line-height: 1;\n    }\n\n    // SVG icon styles\n    &.x-button--icon-start {\n      .button-icon--svg {\n        margin-right: spacing.$spacing-8 ;\n      }\n    }\n\n    &.x-button--icon-end {\n      .button-icon--svg {\n        margin-left: spacing.$spacing-8 ;\n      }\n    }\n\n    .button-icon--svg {\n\n\n      svg {\n        display: block;\n        width: 14px;\n        height: 14px;\n\n\n        path {\n          fill: currentColor;\n        }\n      }\n    }\n\n    .button-text {\n      line-height: 1;\n    }\n  }\n\n  // Icon positioning\n  &.x-button--icon-start {\n    flex-direction: row;\n  }\n\n  &.x-button--icon-end {\n    flex-direction: row;\n  }\n\n  &.shadow {\n    box-shadow:\n      0px 2.30969px 4.25707px rgba(20, 20, 21, 0.28),\n      0px 6.38599px 11.7703px rgba(20, 20, 21, 0.0521271),\n      0px 15.375px 28.3382px rgba(20, 20, 21, 0.04),\n      0px 32px 94px rgba(20, 20, 21, 0.0278729);\n  }\n\n  &.primary {\n    background-color: colours-pg.$primary;\n    border-color: colours-pg.$primary;\n    color: white;\n\n    &:hover {\n      background-color: colours-pg.$primary-50;\n      border-color: colours-pg.$primary-50;\n      color: white;\n    }\n  }\n\n  &.secondary {\n    background-color: colours-pg.$secondary;\n    border-color: colours-pg.$secondary;\n    color: white;\n\n    &:hover {\n      background-color: colours-pg.$secondary-50;\n      border-color: colours-pg.$secondary-50;\n      color: white;\n      ;\n    }\n  }\n\n  &.ghost {\n    background-color: #fff;\n    border-color: colours-pg.$secondary;\n    color: colours-pg.$secondary;\n\n    &:hover {\n      background-color: #DFF2F1;\n      border-color: colours-pg.$secondary;\n      color: colours-pg.$secondary;\n\n    }\n\n    &:active {\n      background-color: #BEE6E4;\n      border-color: colours-pg.$secondary;\n      color: colours-pg.$secondary;\n\n    }\n  }\n\n  &.minimal {\n    background-color: transparent;\n    border-color: transparent;\n    color: colours-pg.$primary;\n  }\n\n  &.success {\n    background-color: transparent;\n    border-color: colours-pg.$success;\n    color: colours-pg.$success;\n\n    &:hover {\n      background-color: colours-pg.$success-50;\n      border-color: colours-pg.$success;\n      color: colours-pg.$success;\n    }\n\n    &:active {\n      background-color: colours-pg.$success-100;\n    }\n  }\n\n  &.text {\n    background-color: transparent;\n    border-color: transparent;\n    color: colours-pg.$secondary;\n\n    &:hover {\n      background-color: colours-pg.$secondary-50;\n    }\n\n    &:active {\n      background-color: colours-pg.$secondary-100;\n    }\n  }\n\n  &.disabled {\n    background-color: #f6f6f6;\n    border-color: #a0a0a0;\n    color: #a0a0a0;\n  }\n}\n\n.icon {\n  background-color: #ffffff;\n  bottom: 0px;\n  left: 0px;\n  opacity: 0;\n  position: absolute;\n  right: 0px;\n  top: 0px;\n  -webkit-transition: opacity 0.2s;\n  transition: opacity 0.2s;\n}\n\n// Size variations for icon-only buttons\n.x-button--icon-only {\n  &.small {\n    width: 36px;\n    height: 36px;\n    padding: spacing.$spacing-4;\n\n    .button-icon {\n      font-size: 16px;\n    }\n  }\n\n  &.button-icon--svg {\n    padding: spacing.$spacing-4;\n\n    svg {\n      width: 16px;\n      height: 16px;\n\n    }\n  }\n\n  &.large {\n    width: 56px;\n    height: 56px;\n\n    .button-icon {\n      font-size: 24px;\n    }\n  }\n}\n\n// Ensure disabled state works with icon buttons\n.x-button.disabled {\n\n  &.x-button--icon-only,\n  &.x-button--with-icon {\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n}","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-button',\n  styleUrl: 'xplor-button.scss',\n  // we cant use multiple styleUrls because the mode property is not reactive only in stencilJS and once the component is rendered it wont change the css file\n  // so we are using only one styleUrl and changing the styles based on the mode property in the class\n  // styleUrls: {\n  //   default: 'xplor-button.scss',\n  //   dark: 'xplor-button-pg.scss',\n  //   pg: 'xplor-button-pg.scss',\n  //   office: 'xplor-button-office.scss',\n  // },\n  scoped: true,\n})\nexport class XplorButton {\n  @Prop() text: string;\n  @Prop() type: 'minimal' | 'primary' | 'secondary' | 'ghost' | 'disabled' | 'success' | 'text' = 'secondary';\n  @Prop() mode?: 'dark' | 'pg' | 'office' = 'pg'; // 'dark', 'pg', 'office' (default: 'dark')\n  @Prop() size?: string; // 'small', 'medium', 'large' (default:'medium')\n  @Prop() styles?: string;\n  @Prop() clickAction: () => void;\n\n  /** Accessible label for icon-only buttons */\n  @Prop() ariaLabel: string;\n\n  /** Whether the button is disabled */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Icon position: 'start' | 'end' | null\n   */\n  @Prop() iconPosition: 'start' | 'end' | null;\n\n  /**\n   * Icon to display (defaults to plus sign)\n   */\n  @Prop() icon: string = '+';\n  @Prop() iconSvg?: string;\n\n  private renderIcon() {\n    if (this.icon === 'svg' && this.iconSvg) {\n      return (\n        <span class=\"button-icon button-icon--svg \" innerHTML={this.iconSvg}></span>\n      );\n    }\n    return (\n      <span class=\"button-icon\">\n        {this.icon}\n      </span>\n    );\n  }\n\n  render() {\n    const isIconOnly = !this.text && this.iconPosition !== null;\n    const hasIcon = this.iconPosition !== null;\n\n    return (\n      <Host>\n        <slot>\n          <button\n            role=\"button\"\n            class={{\n              'x-button': true,\n              [this.type]: true,\n              'shadow': this.type !== 'minimal' && this.type !== 'text',\n              'x-button--icon-only': isIconOnly,\n              'x-button--with-icon': hasIcon && !isIconOnly,\n              'x-button--icon-start': this.iconPosition === 'start' && !isIconOnly,\n              'x-button--icon-end': this.iconPosition === 'end' && !isIconOnly,\n              ...(this.styles ? { [this.styles]: true } : {}),\n            }}\n            onClick={() => this.clickAction && this.clickAction()}\n            aria-label={this.ariaLabel}\n            aria-disabled={this.disabled ? 'true' : null}\n            disabled={this.disabled}\n          >\n            {hasIcon && this.iconPosition === 'start' && this.renderIcon()}\n            {this.text && <span class=\"button-text\">{this.text}</span>}\n            {hasIcon && this.iconPosition === 'end' && this.renderIcon()}\n          </button>\n        </slot>\n      </Host>\n    );\n  }\n}"],"version":3}