@tmorrow/cre8-wc 1.1.2 → 1.1.3

package/lib/components/pagination/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../components/pagination/pagination.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/prefer-default-export */\n/* eslint-disable lit/no-template-map */\nimport {\n    html, HTMLTemplateResult, nothing,\n} from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property, queryAll, state } from 'lit/decorators.js';\nimport svgCaretLeft from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Regular/Caret_Left.svg?raw';\nimport svgFirstPage from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Regular/Caret_Double_Left.svg?raw';\nimport svgLastPage from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Regular/Caret_Double_Right.svg?raw';\nimport svgCaretRight from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Regular/Caret_Right.svg?raw';\nimport { Cre8Element } from '../cre8-element';\nimport {Cre8Button} from '../button/button';\nimport { isMobile, screenSizes } from '../../utilities/is-mobile';\nimport './page-counter/page-counter';\nimport styles from './pagination.styles.js';\n\n/**\n * The Pagination component is used to split up a large amount of results\n *  by showing only a certain amount on each page. You can cycle through\n *  the pages using Page Numbers, Next and Previous Buttons, or optional\n *  First Page and Last Page Buttons. This component is also used by Table\n *  to cycle through rows of results. Pagination has 3 display options:\n *\n * **default**:  Can contain up to seven Page Numbers (ellipses included)\n *  at a time flanked by Next and Previous Buttons. When there are more than\n *  seven pages, numbers start getting replaced by ellipses. Use this option\n *  when you have a lot of horizontal space in a layout. It should not be used\n *  for mobile web layouts since its buttons are smaller than the minimum touch target of 44px.\n *  The component has built in responsivity to mobile page size so you dont have tohandle this\n *  seperately\n *\n *\n * **compact** : Best used as a summary of where you are among pages or table rows flanked by\n * Previous and Next Buttons. Use this option when you have limited horizontal space but still\n * need to show where users are among results. Great for mobile layouts.\n *\n *\n * **icon-only** : Use this option in very tight spaces when it’s not required to show users\n * where they are among results. Great for mobile layouts.\n *\n *\n * ## HOW TO USE\n *\n * Select an option from the “display” dropdown depending on layout width\n * Select where your current page is from the “Page” dropdown\n * To show less pages when using Full Numbers, use the \"visiblePages” toggles\n * To hide the First Page and Last Page Buttons, turn on the “hideFirstLastButton” toggle\n * To change the states of page numbers or buttons, interact with the buttond to invoke each “State”\n * When using Compact Numbers, you can choose between “compact” and “icon-only” formats\n *\n *\n * ## ACCESSIBILITY NOTE\n *\n * To best orient people using screen readers, push focus to the top of\n * the list of results after any of the pagination buttons have been triggered,\n * **except for the currently selected one**. Focus target could be a visual results heading,\n * or the top heading of the results container of the page selected\n * via a programmatic selector, e.g. < section id=“results” aria-label=\"results-section\" > or\n * < div role= “group” aria-label=“results” >.\n *\n * @dependency cre8-button, cre8-icon, cre8-pagination-counter\n * @csspart icon - distinguishes the page buttons from the icon buttons\n * @cssproperty \"--pagination-display\" - controls the display css property\n * @cssproperty \"--pagination-justify-content\" - controls horizontal alignment of pagination\n * @cssproperty \"--pagination-align-items\" - controls vertical alignment of pagination\n */\n\nexport class Cre8Pagination extends Cre8Element {\n    static styles = [styles];\n\n    static elementDefinitions = {\n        'cre8-button': Cre8Button,\n    };\n\n  @state()\n      _currentPage: number = 99;\n\n  /**\n   * Input the total number of elements are returned from consuming app e.g. search results\n   * @attr number\n   * @required\n   */\n  @property({ reflect: true, type: Number })\n      totalResults!: number;\n\n\n  /**\n   * how many elements will displayVariant per page, indicated by business to typically be 20\n   * @attr number\n   */\n  @property({ type: Number, reflect: true })\n  get pageSize() {\n      return this._pageSize;\n  }\n\n  set pageSize(newSize: number) {\n      const oldSize = this._pageSize;\n      this._pageSize = newSize;\n      this.requestUpdate('pageSize', oldSize);\n  }\n\n  @state()\n      _pageSize = 10;\n\n\n  /**\n   * Controls how many page buttons are displayVarianted on the page\n   * at once, if container size permits. recommended max = 5 pages\n   *\n   * @attr number\n   */\n  @property({ reflect: true, type: Number })\n      visiblePages?: number = 5;\n\n  /**\n   * (optional) prop that allows for a compact and icon-only variant both\n   * for mobile screen-sizes and for use in certain contexts as guided by design,\n   * the component size will show 'default' in the absence of a value on desktop and\n   * 'compact' on smaller views.\n   *\n   * @attr 'compact' | 'icon-only' | 'default'\n   * @optional\n   */\n  @property({ type: String, reflect: true })\n      display?: 'compact' | 'icon-only'| 'default';\n\n  /**\n   *\n   *@state watches the width of the window and responds to show the accessibility approved variant.\n   */\n  @state()\n      windowWidth!: number;\n\n  @queryAll('cre8-button')\n      buttons: typeof Cre8Button[];\n\n  /**\n  *\n  * @optional\n  */\n  @property({ type: Boolean, reflect: true })\n      hideLastAndFirstButtons?: boolean;\n\n  @property({ reflect: true, type: Number })\n  get currentPage() {\n      return this._currentPage;\n  }\n\n  set currentPage(newPage: number) {\n      const oldPage = this._currentPage;\n      this._currentPage = newPage;\n      this.requestUpdate('currentPage', oldPage);\n  }\n\n  connectedCallBack() {\n      super.connectedCallback();\n  }\n\n  get maxVisiblePages() {\n      const allowedVisiblePages = {\n          md: 5,\n      };\n\n    // lg and up\n\n      if (!isMobile(screenSizes.lg.toString())) {\n          return this.visiblePages;\n      }\n\n      if (!isMobile(screenSizes.md.toString())) {\n          return Math.min(allowedVisiblePages.md, this.visiblePages);\n      }\n      return 0;\n  }\n\n\n  private get totalPages(): number {\n      return Math.ceil(this.totalResults / this.pageSize);\n  }\n\n  private get hasNoPreviousPage() {\n      return this._currentPage <= 1;\n  }\n\n  private get hasNoNextPage() {\n      return this._currentPage >= this.totalPages;\n  }\n\n  private _onHandleResize() {\n      this.requestUpdate();\n  }\n\n  handleResize() {\n      this._onHandleResize.bind(this);\n  }\n\n  // get range of pages to display [3, 4, 5], [2, 3, 4, 5]\n  protected get pageRange():number[] {\n      const left = Math.floor(this.maxVisiblePages / 2);\n      let startPage = this.currentPage - left;\n      startPage = Math.min(startPage, this.totalPages - this.maxVisiblePages + 1);\n      startPage = Math.max(startPage, 1);\n      const endPage = Math.min(startPage + this.maxVisiblePages - 1, this.totalPages);\n      return [...Array(this.totalPages)].map((_, index) => index + 1).slice(startPage - 1, endPage);\n  }\n\n  protected async firstUpdated() {\n      await this.updateComplete;\n      if (this._pageSize !== this.pageSize) {\n          const old = this._pageSize;\n          this._pageSize = this.pageSize;\n          this.requestUpdate('pageSize', old);\n      }\n      this.windowWidth = window.innerWidth;\n      window.addEventListener('resize', () => {\n          if (this.windowWidth !== window.innerWidth) {\n              const oldWidth = this.windowWidth;\n              this.windowWidth = window.innerWidth;\n              this.handleResize();\n              this.requestUpdate('isResponsive', oldWidth);\n          }\n      });\n      if (this._currentPage !== this.currentPage) {\n          const old = this._currentPage;\n          this._currentPage = this.currentPage;\n          this.requestUpdate('currentPage', old);\n      }\n  }\n\n  disconnectedCallback() {\n      window.removeEventListener('resize', this.handleResize);\n      super.disconnectedCallback();\n  }\n\n  displayTypes(): HTMLTemplateResult {\n      return html`<cre8-page-counter\n              currentPage=${this.currentPage}\n              style=\"display:${this.display === 'compact' ? 'flex' : 'none'};\"\n              totalResults=${this.totalResults}\n              pageSize=${this._pageSize}\n              display=${this.display}>\n              </cre8-page-counter>`;\n  }\n\n  private _handleKeydown = (page: number, _buttonName?: string) => (e: KeyboardEvent) => {\n      if (e.code === 'Enter') {\n          this._goToPage(page, _buttonName); /* 2 */\n      }\n  };\n\n  private _goToPage = (page: number, _buttonName?: string) => () => {\n      const old = this._currentPage;\n      let focusButton: Cre8Button;\n      this.buttons.forEach((_: typeof Cre8Button) => {\n       const b = new Cre8Button();\n          if (b.hideText && (b.text === _buttonName)) {\n              focusButton = b;\n              (focusButton.shadowRoot!.querySelector('.cre8-c-button') as HTMLButtonElement).blur();\n          }\n          return null;\n      });\n      this._currentPage = page;\n      this.currentPage = this._currentPage;\n      this.requestUpdate('currentPage', old);\n      this.dispatchEvent(new CustomEvent(\n          'pagination.click',\n          { detail: { buttonName: _buttonName ?? this.currentPage.toString(), value: this.currentPage } }\n      ));\n  };\n\n  public goToPage(page: number, buttonName?: string) {\n      return this._goToPage(page, buttonName).bind(this);\n  }\n\n  public handleKeydown(page: number, buttonName?: string) {\n      return this._handleKeydown(page, buttonName);\n  }\n\n  render() {\n      const classNames = this.componentClassNames('cre8-c-pagination', {\n          'cre8-c-pagination--compact': this.display !== undefined && this.display === 'compact',\n          'cre8-c-pagination--icon-only': this.display !== undefined && this.display === 'icon-only',\n      });\n\n\n      return html`<nav\n      aria-label=\"pagination\"\n      class=${classNames}>\n        <slot></slot>\n        ${!this.hideLastAndFirstButtons ? html` <cre8-button\n              variant=\"tertiary\"\n              size=\"sm\"\n              text=\"\"\n              hideText\n              part=\"icon\"\n              aria-disabled=\"${ifDefined(this.hasNoPreviousPage)}\"\n              ?disabled=${this.hasNoPreviousPage}\n              @click=${this.goToPage(1, 'First Page')}\n              @keydown=${this.handleKeydown(1, 'First Page')}\n\n            >\n        <span slot=\"before\">\n          <cre8-icon\n            className=\"cre8-c-pagination__icon\"\n            aria-label=\"First Page\"\n            svg=${svgFirstPage}\n            size=\"24\">\n          </cre8-icon>\n        </span>\n            </cre8-button>` : nothing}\n        <cre8-button\n          variant=\"tertiary\"\n          size=\"sm\"\n          hideText\n          text=\"\"\n          part=\"icon\"\n          aria-disabled=\"${ifDefined(this.hasNoPreviousPage)}\"\n          ?disabled=${this.hasNoPreviousPage}\n          @click=${this.goToPage(this._currentPage - 1, 'Previous Page')}\n          @keydown=${this.handleKeydown(this.currentPage - 1, 'Previous Page')}\n\n        >\n          <span slot=\"before\">\n            <cre8-icon\n            className=\"cre8-c-pagination__icon\"\n            aria-label=\"Previous Page\"\n            slot=\"before\"\n            svg=${svgCaretLeft}\n            size=\"24\"\n\n            >\n            </cre8-icon>\n          </span>\n        </cre8-button>\n\n      ${this.displayTypes()}\n        ${!this.display || this.display === 'default'\n        ? html`${this.pageRange[this.pageRange.length - 1] > 1 && this.pageRange[0] !== 1\n            ? html`<cre8-button hideText iconName=\"ellipsis\" variant=\"tertiary\" size=\"sm\" aria-disabled=\"true\" inert></cre8-button>`\n            : nothing}\n            ${this.pageRange.map((page) => (page === this.currentPage\n        ? html`<cre8-button variant=\"tertiary\" tab-index=\"-1\" text=\"${page}\"  class=\"icon-only\" size=\"sm\" id=\"current\"></cre8-button>`\n        : html`<cre8-button\n                      variant=\"tertiary\"\n                      size=\"sm\"\n                      text=\"${page}\"\n                      class=\"icon-only\"\n                      id=\"${page}\"\n                      @click=${this.goToPage(page, page.toString())}\n                      @keydown=${this.handleKeydown(page, page.toString())}>\n                      </cre8-button>`\n    ))}\n            ${this.pageRange[this.pageRange.length - 1] < this.totalPages\n        ? html`<cre8-button\n                      hideText\n                      iconName=\"ellipsis\"\n                      text=\"ellipsis\"\n                      variant=\"tertiary\"\n                      size=\"sm\"\n                      aria-disabled=\"true\"\n                      inert>\n                    </cre8-button>`\n        : nothing}`\n        : nothing}\n        <cre8-button\n          variant=\"tertiary\"\n          size=\"sm\"\n          part=\"icon\"\n          hideText\n          text=\"\"\n          aria-disabled=\"${ifDefined(this.hasNoNextPage)}\"\n          ?disabled=${this.hasNoNextPage}\n          @click=${this.goToPage(this.currentPage + 1, 'Next Page')}\n          @keydown=${this.handleKeydown(this.currentPage + 1, 'Next Page')}\n\n        >\n          <span slot=\"before\">\n            <cre8-icon\n            aria-label=\"Next Page\"\n            className=\"cre8-c-pagination__icon\"\n            slot=\"before\" svg=${svgCaretRight}\n            size=\"24\">\n            </cre8-icon>\n          </span>\n        </cre8-button>\n\n        ${!this.hideLastAndFirstButtons\n        ? html` <cre8-button\n              variant=\"tertiary\"\n              size=\"sm\"\n              hideText\n              text=\"\"\n              part=\"icon\"\n              aria-disabled=\"${ifDefined(this.hasNoNextPage)}\"\n              ?disabled=${this.hasNoNextPage}\n              @click=${this.goToPage(this.totalPages, 'Last Page')}\n              @keydown=${this.handleKeydown(this.totalPages, 'Last Page')}\n\n            >\n              <span slot=\"before\">\n                <cre8-icon\n                aria-label=\"Last Page\"\n                className=\"cre8-c-pagination__icon\"\n                slot=\"before\"\n                svg=${svgLastPage}\n                size=\"24\"\n                >\n                </cre8-icon>\n              </span>\n            </cre8-button>`\n        : nothing}\n\n      </nav>`;\n  }\n}\n\nif (customElements.get('cre8-pagination') === undefined) {\n    customElements.define('cre8-pagination', Cre8Pagination);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-pagination': Cre8Pagination;\n  }\n}\n"]}

package/lib/components/pagination/pagination.styles.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:var(--pagination-display, inline-flex);justify-content:var(--pagination-justify-content, center);align-items:var(--pagination-align-items, center);--cre8-button-width: 2rem;--cre8-button-height: 2rem;--cre8-button-min-width: 2rem;--cre8-button-min-height: 2rem;--cre8-button-padding-horizontal-small: 0px;--cre8-button-padding-vertical-small: 0px}*,::slotted(*),*:before,*:after{box-sizing:border-box;width:auto;height:auto;display:flex;justify-content:center;--cre8-button-margin-right: var(--cre8-spacing-2);--cre8-button-margin-left: var(--cre8-spacing-2);margin-right:var(--cre8-button-margin-right);margin-left:var(--cre8-button-margin-left);align-items:center}[aria-current=true],#current{--cre8-color-button-tertiary-bg: var( --cre8-color-bg-strong);--cre8-color-button-tertiary-content: var(--cre8-color-content-knockout);--cre8-color-button-tertiary-border: var(--cre8-color-border-transparent)}[aria-current=true]:hover,[aria-current=true]:active,#current:hover,#current:active{border-radius:var(--cre8-border-radius-button);--cre8-color-button-tertiary-bg-hover: var(--cre8-color-bg-strong);--cre8-color-button-tertiary-content-hover: var(--cre8-color-content-knockout)}[aria-current=true]:hover:focus,[aria-current=true]:hover:focus-visible,[aria-current=true]:hover:focus-within,[aria-current=true]:active:focus,[aria-current=true]:active:focus-visible,[aria-current=true]:active:focus-within,#current:hover:focus,#current:hover:focus-visible,#current:hover:focus-within,#current:active:focus,#current:active:focus-visible,#current:active:focus-within{border-radius:var(--cre8-border-radius-button);--cre8-color-button-tertiary-bg-active: var(--cre8-color-bg-strong);--cre8-color-button-tertiary-content-active: var(--cre8-color-content-knockout);outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-pagination--compact,.cre8-c-pagination--icon-only,.cre8-c-pagination--range{--cre8-button-width: 3rem;--cre8-button-height: 3rem;--cre8-button-min-width: 3rem;--cre8-button-min-height: 3rem}.cre8-c-pagionation__icon{fill:var(--cre8-color-button-tertiary-content)}.cre8-c-pagination__icon:has(cre8-button:disabled){color:var(--cre8-color-button-tertiary-content-disabled)}.cre8-c-pagination [aria-disabled=true]{fill:var(--cre8-color-content-default);--cre8-color-button-tertiary-content: var(--cre8-color-content-default)}`;
+export default styles;
+//# sourceMappingURL=pagination.styles.js.map

package/lib/components/pagination/pagination.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.styles.js","sourceRoot":"","sources":["../../../components/pagination/pagination.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,unIAAunI,CAAC;AAC1oI,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:var(--pagination-display, inline-flex);justify-content:var(--pagination-justify-content, center);align-items:var(--pagination-align-items, center);--cre8-button-width: 2rem;--cre8-button-height: 2rem;--cre8-button-min-width: 2rem;--cre8-button-min-height: 2rem;--cre8-button-padding-horizontal-small: 0px;--cre8-button-padding-vertical-small: 0px}*,::slotted(*),*:before,*:after{box-sizing:border-box;width:auto;height:auto;display:flex;justify-content:center;--cre8-button-margin-right: var(--cre8-spacing-2);--cre8-button-margin-left: var(--cre8-spacing-2);margin-right:var(--cre8-button-margin-right);margin-left:var(--cre8-button-margin-left);align-items:center}[aria-current=true],#current{--cre8-color-button-tertiary-bg: var( --cre8-color-bg-strong);--cre8-color-button-tertiary-content: var(--cre8-color-content-knockout);--cre8-color-button-tertiary-border: var(--cre8-color-border-transparent)}[aria-current=true]:hover,[aria-current=true]:active,#current:hover,#current:active{border-radius:var(--cre8-border-radius-button);--cre8-color-button-tertiary-bg-hover: var(--cre8-color-bg-strong);--cre8-color-button-tertiary-content-hover: var(--cre8-color-content-knockout)}[aria-current=true]:hover:focus,[aria-current=true]:hover:focus-visible,[aria-current=true]:hover:focus-within,[aria-current=true]:active:focus,[aria-current=true]:active:focus-visible,[aria-current=true]:active:focus-within,#current:hover:focus,#current:hover:focus-visible,#current:hover:focus-within,#current:active:focus,#current:active:focus-visible,#current:active:focus-within{border-radius:var(--cre8-border-radius-button);--cre8-color-button-tertiary-bg-active: var(--cre8-color-bg-strong);--cre8-color-button-tertiary-content-active: var(--cre8-color-content-knockout);outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-pagination--compact,.cre8-c-pagination--icon-only,.cre8-c-pagination--range{--cre8-button-width: 3rem;--cre8-button-height: 3rem;--cre8-button-min-width: 3rem;--cre8-button-min-height: 3rem}.cre8-c-pagionation__icon{fill:var(--cre8-color-button-tertiary-content)}.cre8-c-pagination__icon:has(cre8-button:disabled){color:var(--cre8-color-button-tertiary-content-disabled)}.cre8-c-pagination [aria-disabled=true]{fill:var(--cre8-color-content-default);--cre8-color-button-tertiary-content: var(--cre8-color-content-default)}`;\nexport default styles;\n"]}

package/lib/components/percent-bar/percent-bar.js

@@ -1,41 +1,50 @@
-import { css as p, nothing as h, html as d } from "lit";
-import { a as m } from "../../icon-D22g8aWB.js";
-import { property as a } from "lit/decorators.js";
-import { Cre8Element as f } from "../cre8-element.js";
-import "../button/button.js";
-import "../text-passage/text-passage.js";
-import "../progress-meter/progress-meter.js";
-const x = p`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-percent-bar__controls{display:flex;flex-direction:row;justify-content:space-between;align-items:center;min-height:2.25rem}.cre8-c-percent-bar__button{size:var(--cre8-icon-size-default)}.cre8-c-percent-bar__text-passage{color:var(--cre8-color-content-default);font-family:var(--cre8-typography-body-small-font-family);font-size:var(--cre8-typography-body-small-font-size);font-weight:var(--cre8-typography-body-small-font-weight);line-height:var(--cre8-typography-body-small-line-height);text-decoration:var(--cre8-typography-body-small-text-decoration);text-transform:var(--cre8-typography-body-small-text-transform)}.cre8-c-percent-bar__p{width:fit-content}`;
-var g = Object.defineProperty, s = (n, e, l, y) => {
-  for (var t = void 0, i = n.length - 1, c; i >= 0; i--)
-    (c = n[i]) && (t = c(e, l, t) || t);
-  return t && g(e, l, t), t;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const o = class o extends f {
-  _handleClick(e) {
-    this.dispatchEvent(new Event("leftActionButtonClick", e));
-  }
-  fractionAsPercent() {
-    return Math.round(this.value / this.max * 100);
-  }
-  isFirstStep() {
-    return this.value > 1;
-  }
-  render() {
-    const e = this.componentClassNames("cre8-c-percent-bar", {});
-    return d`
-      <div class="${e}">
+/* eslint-disable indent */
+import { html, nothing, } from 'lit';
+import svgCaretUp from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Regular/Caret_Up.svg?raw';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import '../button/button';
+import '../text-passage/text-passage';
+import '../progress-meter/progress-meter';
+import styles from './percent-bar.styles.js';
+/**
+ * The percent bar visually indicates a user's current progress and has a few features: a basic display bar with
+ * a percentage, an actionable icon that allows a user to revisit a prior step and an actionable link that
+ * allows a user save their progress before exiting.
+ */
+export class Cre8PercentBar extends Cre8Element {
+    _handleClick(e) {
+        this.dispatchEvent(new Event('leftActionButtonClick', e));
+    }
+    fractionAsPercent() {
+        return Math.round((this.value / this.max) * 100);
+    }
+    isFirstStep() {
+        return this.value > 1;
+    }
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-percent-bar', {});
+        return html `
+      <div class="${componentClassNames}">
           <div class="cre8-c-percent-bar__controls">
               <div lass="cre8-c-percent-bar__left-controls">
-                ${this.isFirstStep() ? d` <cre8-button
-                      ?hideText=${!0}
-                      svg="${m}"
+                ${this.isFirstStep()
+            ? html ` <cre8-button
+                      ?hideText=${true}
+                      svg="${svgCaretUp}"
                       iconRotateDegree="-90"
                       variant="tertiary"
                       ?disabled=${this.disableActionLeft}
                       @click="${this._handleClick}"
                     >
-                    </cre8-button>` : h}
+                    </cre8-button>`
+            : nothing}
               </div>
               <div class="cre8-c-percent-bar__right-controls">
                 <cre8-text-passage
@@ -52,21 +61,20 @@ const o = class o extends f {
         ></cre8-progress-meter>
       </div>
     `;
-  }
-};
-o.styles = [x];
-let r = o;
-s([
-  a()
-], r.prototype, "value");
-s([
-  a()
-], r.prototype, "max");
-s([
-  a({ type: Boolean, reflect: !0 })
-], r.prototype, "disableActionLeft");
-customElements.get("cre8-percent-bar") === void 0 && customElements.define("cre8-percent-bar", r);
-export {
-  r as Cre8PercentBar,
-  r as default
-};
+    }
+}
+Cre8PercentBar.styles = [styles];
+__decorate([
+    property()
+], Cre8PercentBar.prototype, "value", void 0);
+__decorate([
+    property()
+], Cre8PercentBar.prototype, "max", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8PercentBar.prototype, "disableActionLeft", void 0);
+if (customElements.get('cre8-percent-bar') === undefined) {
+    customElements.define('cre8-percent-bar', Cre8PercentBar);
+}
+export default Cre8PercentBar;
+//# sourceMappingURL=percent-bar.js.map

package/lib/components/percent-bar/percent-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"percent-bar.js","sourceRoot":"","sources":["../../../components/percent-bar/percent-bar.ts"],"names":[],"mappings":";;;;;;AAAA,2BAA2B;AAC3B,OAAO,EAAE,IAAI,EAAE,OAAO,GAAI,MAAM,KAAK,CAAC;AACtC,OAAO,UAAU,MAAM,sGAAsG,CAAC;AAC9H,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,8BAA8B,CAAC;AACtC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAE7C;;;;GAIG;AACH,MAAM,OAAO,cAAe,SAAQ,WAAW;IAsBrC,YAAY,CAAC,CAAa;QAChC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,uBAAuB,EAAE,CAAC,CAAC,CAAC,CAAC;IAC5D,CAAC;IAEO,iBAAiB;QACvB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC;IACnD,CAAC;IAEO,WAAW;QACjB,OAAO,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;IACxB,CAAC;IAED,MAAM;QACJ,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC;QAE/E,OAAO,IAAI,CAAA;oBACK,mBAAmB;;;kBAGrB,IAAI,CAAC,WAAW,EAAE;YAClB,CAAC,CAAC,IAAI,CAAA;kCACU,IAAI;6BACT,UAAU;;;kCAGL,IAAI,CAAC,iBAAiB;gCACxB,IAAI,CAAC,YAAY;;mCAEd;YACjB,CAAC,CAAC,OAAO;;;;;;;oBAOP,IAAI,CAAC,iBAAiB,EAAE;;;;;mBAKzB,IAAI,CAAC,KAAK;iBACZ,IAAI,CAAC,GAAG;;;KAGpB,CAAC;IACJ,CAAC;;AAnEM,qBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAOzB;IADC,QAAQ,EAAE;6CACG;AAMd;IADC,QAAQ,EAAE;2CACC;AAMZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yDACf;AAmD9B,IAAI,cAAc,CAAC,GAAG,CAAC,kBAAkB,CAAC,KAAK,SAAS,EAAE,CAAC;IACzD,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC;AAC5D,CAAC;AAQD,eAAe,cAAc,CAAC","sourcesContent":["/* eslint-disable indent */\nimport { html, nothing,  } from 'lit';\nimport svgCaretUp from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Regular/Caret_Up.svg?raw';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport '../button/button';\nimport '../text-passage/text-passage';\nimport '../progress-meter/progress-meter';\nimport styles from './percent-bar.styles.js';\n\n/**\n * The percent bar visually indicates a user's current progress and has a few features: a basic display bar with\n * a percentage, an actionable icon that allows a user to revisit a prior step and an actionable link that\n * allows a user save their progress before exiting.\n */\nexport class Cre8PercentBar extends Cre8Element {\n  static styles = [styles];\n\n\n  /*\n   * The current step the user is on.\n   */\n  @property()\n  value: number;\n\n  /*\n   * The total number of steps in the multistep process.\n   */\n  @property()\n  max: number;\n\n  /*\n   * The action-left icon-only tertiary button in the percent bar controls can be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disableActionLeft?: boolean;\n\n  private _handleClick(e: MouseEvent) {\n    this.dispatchEvent(new Event('leftActionButtonClick', e));\n  }\n\n  private fractionAsPercent(): number {\n    return Math.round((this.value / this.max) * 100);\n  }\n\n  private isFirstStep(): boolean {\n    return this.value > 1;\n  }\n\n  render() {\n    const componentClassNames = this.componentClassNames('cre8-c-percent-bar', {});\n\n    return html`\n      <div class=\"${componentClassNames}\">\n          <div class=\"cre8-c-percent-bar__controls\">\n              <div lass=\"cre8-c-percent-bar__left-controls\">\n                ${this.isFirstStep()\n                  ? html` <cre8-button\n                      ?hideText=${true}\n                      svg=\"${svgCaretUp}\"\n                      iconRotateDegree=\"-90\"\n                      variant=\"tertiary\"\n                      ?disabled=${this.disableActionLeft}\n                      @click=\"${this._handleClick}\"\n                    >\n                    </cre8-button>`\n                  : nothing}\n              </div>\n              <div class=\"cre8-c-percent-bar__right-controls\">\n                <cre8-text-passage\n                  size=\"small\"\n                  class=\"cre8-c-percent-bar__text-passage\"\n                >\n                  ${this.fractionAsPercent()}%\n                </cre8-text-passage>\n              </div>\n            </div>\n        <cre8-progress-meter\n          value=\"${this.value}\"\n          max=\"${this.max}\"\n        ></cre8-progress-meter>\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-percent-bar') === undefined) {\n  customElements.define('cre8-percent-bar', Cre8PercentBar);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-percent-bar': Cre8PercentBar;\n  }\n}\n\nexport default Cre8PercentBar;\n"]}

package/lib/components/percent-bar/percent-bar.styles.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-percent-bar__controls{display:flex;flex-direction:row;justify-content:space-between;align-items:center;min-height:2.25rem}.cre8-c-percent-bar__button{size:var(--cre8-icon-size-default)}.cre8-c-percent-bar__text-passage{color:var(--cre8-color-content-default);font-family:var(--cre8-typography-body-small-font-family);font-size:var(--cre8-typography-body-small-font-size);font-weight:var(--cre8-typography-body-small-font-weight);line-height:var(--cre8-typography-body-small-line-height);text-decoration:var(--cre8-typography-body-small-text-decoration);text-transform:var(--cre8-typography-body-small-text-transform)}.cre8-c-percent-bar__p{width:fit-content}`;
+export default styles;
+//# sourceMappingURL=percent-bar.styles.js.map

package/lib/components/percent-bar/percent-bar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"percent-bar.styles.js","sourceRoot":"","sources":["../../../components/percent-bar/percent-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,o6EAAo6E,CAAC;AACv7E,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-percent-bar__controls{display:flex;flex-direction:row;justify-content:space-between;align-items:center;min-height:2.25rem}.cre8-c-percent-bar__button{size:var(--cre8-icon-size-default)}.cre8-c-percent-bar__text-passage{color:var(--cre8-color-content-default);font-family:var(--cre8-typography-body-small-font-family);font-size:var(--cre8-typography-body-small-font-size);font-weight:var(--cre8-typography-body-small-font-weight);line-height:var(--cre8-typography-body-small-line-height);text-decoration:var(--cre8-typography-body-small-text-decoration);text-transform:var(--cre8-typography-body-small-text-transform)}.cre8-c-percent-bar__p{width:fit-content}`;\nexport default styles;\n"]}