@spw-ds/spw-stencil-library 1.3.0 → 1.3.2

package/dist/spw-stencil-library/p-d02b077c.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["spwTableHeaderCss","SpwTableHeader","constructor","hostRef","this","isHighlighted","textAlign","verticalAlign","padding","sortable","isSorted","sticky","stickyPosition","stickyOffset","handleClick","event","target","closest","stopPropagation","spwHeaderClick","emit","columnId","elementClass","tooltipTitle","tooltipText","render","attrs","sortDirection","onClick","class","colSpan","colspan","headers","part","rowSpan","rowspan","stickyStyles","position","zIndex","left","right","style","h","Object","assign","key","name","variant","icon"],"sources":["src/components/spw-table/spw-table-header/spw-table-header.scss?tag=spw-table-header&encapsulation=shadow","src/components/spw-table/spw-table-header/spw-table-header.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n:host(.--is-sticky) {\n  .spw-table-header {\n    position: sticky;\n    top: 0;\n    z-index: 50;\n  }\n}\n\n.spw-table-header {\n  border: 1px solid var(--spw-color-themes-grey-grey-300);\n  color: var(--spw-color-themes-grey-grey-800);\n  font-size: 14px;\n  text-align: left;\n  font-weight: 700;\n  transition: all 0.2s linear;\n  background: var(--spw-color-themes-grey-grey-200);\n  white-space: nowrap;\n  border-top: none !important;\n  border-bottom: none !important;\n  box-shadow:\n    inset 0 1px 0 var(--spw-color-themes-grey-grey-300),\n    inset 0 -1px 0 var(--spw-color-themes-grey-grey-300);\n\n  background-clip: padding-box;\n\n  &--text-align-left {\n    text-align: left;\n  }\n  &--text-align-center {\n    text-align: center;\n  }\n  &--text-align-right {\n    text-align: right;\n  }\n  &--vertical-align-top {\n    vertical-align: top;\n  }\n  &--vertical-align-bottom {\n    vertical-align: bottom;\n  }\n  &--vertical-align-middle {\n    vertical-align: middle;\n  }\n\n  &--sortable {\n    user-select: none;\n    cursor: pointer;\n    &:hover {\n      background: var(--spw-color-themes-grey-grey-300);\n    }\n  }\n  &__content {\n    display: flex;\n    gap: 16px;\n    justify-content: space-between;\n    align-items: center;\n    spw-icon {\n      color: var(--spw-color-themes-grey-grey-500);\n      &:hover {\n        color: var(--spw-color-themes-grey-grey-900);\n      }\n    }\n    &--is-sorted {\n      .spw-table-header__sort-icon {\n        color: var(--spw-color-themes-grey-grey-900);\n      }\n    }\n  }\n  &__sort-icons {\n    display: flex;\n    gap: 0;\n  }\n  &--padding-small {\n    padding: 8px;\n  }\n  &--padding-medium {\n    padding: 16px;\n  }\n  &__icons {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    color: var(--spw-color-themes-grey-grey-500);\n  }\n  ::slotted(spw-checkbox) {\n    --spw-ds-checkbox-checked-color: #000;\n  }\n\n  &--sticky {\n    position: sticky;\n    background-color: var(--spw-color-themes-grey-grey-200);\n\n    &::after {\n      content: '';\n      position: absolute;\n      top: 0;\n      bottom: -1px;\n      width: 8px;\n      pointer-events: none;\n      transition: opacity 0.2s;\n    }\n\n    &-start::after {\n      right: -8px;\n      box-shadow: inset 8px 0 8px -8px rgba(0, 0, 0, 0.15);\n    }\n\n    &-end::after {\n      left: -8px;\n      box-shadow: inset -8px 0 8px -8px rgba(0, 0, 0, 0.15);\n    }\n  }\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n@Component({\n  tag: 'spw-table-header',\n  styleUrl: 'spw-table-header.scss',\n  shadow: true,\n})\nexport class SpwTableHeader {\n  /** Définit un colspan pour la cellule (à appliquer sur spw-table-cell ou spw-table-header) */\n  @Prop() colspan?: HTMLTableCellElement['colSpan'];\n  /** Définit un header relationnel pour la cellule, à des fins d'accessibilité (à appliquer sur spw-table-cell ou spw-table-header) */\n  @Prop() headers?: HTMLTableCellElement['headers'];\n  /** Définit un rowspan pour la cellule (à appliquer sur spw-table-cell ou spw-table-header) */\n  @Prop() rowspan?: HTMLTableCellElement['rowSpan'];\n  /** Définit un style visuel qui met en avant la cellule (à appliquer sur spw-table-cell ou spw-table-header) */\n  @Prop() isHighlighted?: boolean = false;\n  /** Définit un alignement de texte pour la cellule (à appliquer sur spw-table-cell ou spw-table-header) */\n  @Prop() textAlign?: 'center' | 'left' | 'right' = 'left';\n  /** Définit un alignement vertical pour la cellule (à appliquer sur spw-table-cell ou spw-table-header) */\n  @Prop() verticalAlign?: 'top' | 'bottom' | 'middle' = 'top';\n  /** Définit le padding pour la cellule (à appliquer sur spw-table-cell ou spw-table-header) */\n  @Prop() padding?: 'small' | 'medium' = 'medium';\n  /** Définit id pour la colonne (en cas de tri) (à appliquer sur spw-table-header) */\n  @Prop() columnId: string;\n  /** Définit si la colonne est triable (à appliquer sur spw-table-header) */\n  @Prop() sortable?: boolean = false;\n  /** Définit la direction pour le tri sur la colonne (ascendant ou descendant) (à appliquer sur spw-table-header) */\n  @Prop() sortDirection?: 'asc' | 'desc';\n  /** Définit si la colonne est triée ou non (à appliquer sur spw-table-header) */\n  @Prop() isSorted?: boolean = false;\n  /** Définit un titre pour le tooltip (à appliquer sur spw-table-header) */\n  @Prop() tooltipTitle?: string;\n  /** Définit un contenu pour le tooltip (à appliquer sur spw-table-header) */\n  @Prop() tooltipText?: string;\n  /** Rend la cellule sticky lors du défilement horizontal  (à appliquer sur spw-table-header ou spw-table-cell) */\n  @Prop() sticky?: boolean = false;\n  /** Position du sticky : 'start' (left: 0) ou 'end' (right: 0)  (à appliquer sur spw-table-header ou spw-table-cell) */\n  @Prop() stickyPosition?: 'start' | 'end' = 'start';\n  /** Décalage en pixels pour le sticky (utile pour empiler plusieurs colonnes sticky)  (à appliquer sur spw-table-header ou spw-table-cell) */\n  @Prop() stickyOffset?: number = 0;\n\n  @Event() spwHeaderClick: EventEmitter<string>;\n\n  private handleClick = (event: MouseEvent) => {\n    if ((event.target as HTMLElement).closest('[slot=\"filters\"]')) {\n      event.stopPropagation();\n      return;\n    }\n    if (this.sortable) {\n      this.spwHeaderClick.emit(this.columnId);\n    }\n  };\n\n  private get elementClass(): { [className: string]: boolean } {\n    return {\n      'spw-table-header': true,\n      'spw-table-header--sortable': this.sortable,\n      'spw-table-header--is-sorted': this.isSorted,\n      'spw-table-header--has-tooltip': !!(this.tooltipTitle || this.tooltipText),\n      [`spw-table-header--padding-${this.padding}`]: true,\n      [`spw-table-header--text-align-${this.textAlign}`]: true,\n      [`spw-table-header--vertical-align-${this.verticalAlign}`]: true,\n      'spw-table-header--sticky': this.sticky,\n      [`spw-table-header--sticky-${this.stickyPosition}`]: this.sticky,\n    };\n  }\n\n  render() {\n    const attrs: { [key: string]: any } = {\n      'aria-sort': this.isSorted ? this.sortDirection : 'none',\n      'onClick': this.handleClick,\n      'class': this.elementClass,\n      'colSpan': this.colspan,\n      'headers': this.headers,\n      'part': 'cell',\n      'rowSpan': this.rowspan,\n    };\n\n    if (this.sticky) {\n      const stickyStyles: { [key: string]: string } = {\n        position: 'sticky',\n        zIndex: '60',\n      };\n\n      if (this.stickyPosition === 'start') {\n        stickyStyles.left = `${this.stickyOffset}px`;\n      } else {\n        stickyStyles.right = `${this.stickyOffset}px`;\n      }\n\n      attrs.style = stickyStyles;\n    }\n\n    return (\n      <th {...attrs}>\n        <div\n          class={{\n            'spw-table-header__content': true,\n            'spw-table-header__content--is-sorted': this.isSorted,\n          }}\n        >\n          <slot />\n          <div class=\"spw-table-header__icons\">\n            <slot name=\"filters\"></slot>\n            {(this.tooltipTitle || this.tooltipText) && (\n              <spw-tooltip tooltip-title={this.tooltipTitle} tooltip-text={this.tooltipText}>\n                <spw-icon variant=\"fa-regular\" icon=\"fa-circle-question\"></spw-icon>\n              </spw-tooltip>\n            )}\n            {this.sortable && (\n              <spw-icon\n                class=\"spw-table-header__sort-icon\"\n                icon={this.isSorted ? (this.sortDirection === 'asc' ? 'fa-arrow-up-short-wide' : 'fa-arrow-down-wide-short') : 'fa-arrow-up-arrow-down'}\n              ></spw-icon>\n            )}\n          </div>\n        </div>\n      </th>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAoB,6qJ,MCObC,EAAc,MAL3B,WAAAC,CAAAC,G,yDAaUC,KAAaC,cAAa,MAE1BD,KAASE,UAAiC,OAE1CF,KAAaG,cAAiC,MAE9CH,KAAOI,QAAwB,SAI/BJ,KAAQK,SAAa,MAIrBL,KAAQM,SAAa,MAMrBN,KAAMO,OAAa,MAEnBP,KAAcQ,eAAqB,QAEnCR,KAAYS,aAAY,EAIxBT,KAAAU,YAAeC,IACrB,GAAKA,EAAMC,OAAuBC,QAAQ,oBAAqB,CAC7DF,EAAMG,kBACN,M,CAEF,GAAId,KAAKK,SAAU,CACjBL,KAAKe,eAAeC,KAAKhB,KAAKiB,S,EAuEnC,CAnEC,gBAAYC,GACV,MAAO,CACL,mBAAoB,KACpB,6BAA8BlB,KAAKK,SACnC,8BAA+BL,KAAKM,SACpC,mCAAoCN,KAAKmB,cAAgBnB,KAAKoB,aAC9D,CAAC,6BAA6BpB,KAAKI,WAAY,KAC/C,CAAC,gCAAgCJ,KAAKE,aAAc,KACpD,CAAC,oCAAoCF,KAAKG,iBAAkB,KAC5D,2BAA4BH,KAAKO,OACjC,CAAC,4BAA4BP,KAAKQ,kBAAmBR,KAAKO,O,CAI9D,MAAAc,GACE,MAAMC,EAAgC,CACpC,YAAatB,KAAKM,SAAWN,KAAKuB,cAAgB,OAClDC,QAAWxB,KAAKU,YAChBe,MAASzB,KAAKkB,aACdQ,QAAW1B,KAAK2B,QAChBC,QAAW5B,KAAK4B,QAChBC,KAAQ,OACRC,QAAW9B,KAAK+B,SAGlB,GAAI/B,KAAKO,OAAQ,CACf,MAAMyB,EAA0C,CAC9CC,SAAU,SACVC,OAAQ,MAGV,GAAIlC,KAAKQ,iBAAmB,QAAS,CACnCwB,EAAaG,KAAO,GAAGnC,KAAKS,gB,KACvB,CACLuB,EAAaI,MAAQ,GAAGpC,KAAKS,gB,CAG/Ba,EAAMe,MAAQL,C,CAGhB,OACEM,EAAA,KAAAC,OAAAC,OAAA,CAAAC,IAAA,4CAAQnB,GACNgB,EAAA,OAAAG,IAAA,2CACEhB,MAAO,CACL,4BAA6B,KAC7B,uCAAwCzB,KAAKM,WAG/CgC,EAAQ,QAAAG,IAAA,6CACRH,EAAK,OAAAG,IAAA,2CAAAhB,MAAM,2BACTa,EAAM,QAAAG,IAAA,2CAAAC,KAAK,aACT1C,KAAKmB,cAAgBnB,KAAKoB,cAC1BkB,EAAA,eAAAG,IAAA,2DAA4BzC,KAAKmB,aAA4B,eAAAnB,KAAKoB,aAChEkB,EAAU,YAAAG,IAAA,2CAAAE,QAAQ,aAAaC,KAAK,wBAGvC5C,KAAKK,UACJiC,EACE,YAAAG,IAAA,2CAAAhB,MAAM,8BACNmB,KAAM5C,KAAKM,SAAYN,KAAKuB,gBAAkB,MAAQ,yBAA2B,2BAA8B,6B","ignoreList":[]}