npm - @tmorrow/cre8-wc - Versions diffs - 1.2.2 → 1.2.3 - Mend

@tmorrow/cre8-wc 1.2.2 → 1.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (50) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../components/pagination/pagination.ts"],"names":[],"mappings":";;;;;;AAAA,iDAAiD;AACjD,wCAAwC;AACxC,OAAO,EACH,IAAI,EAAsB,OAAO,GACpC,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,YAAY,MAAM,wGAAwG,CAAC;AAClI,OAAO,YAAY,MAAM,+GAA+G,CAAC;AACzI,OAAO,WAAW,MAAM,gHAAgH,CAAC;AACzI,OAAO,aAAa,MAAM,yGAAyG,CAAC;AACpI,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAC,UAAU,EAAC,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,6BAA6B,CAAC;AACrC,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAE5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AAEH,MAAM,OAAO,cAAe,SAAQ,WAAW;IAA/C;;QAQM,iBAAY,GAAW,EAAE,CAAC;QA2B1B,cAAS,GAAG,EAAE,CAAC;QAGnB;;;;;WAKG;QAEC,iBAAY,GAAY,CAAC,CAAC;QAoItB,mBAAc,GAAG,CAAC,IAAY,EAAE,WAAoB,EAAE,EAAE,CAAC,CAAC,CAAgB,EAAE,EAAE;YAClF,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;gBACrB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,OAAO;YAC9C,CAAC;QACL,CAAC,CAAC;QAEM,cAAS,GAAG,CAAC,IAAY,EAAE,WAAoB,EAAE,EAAE,CAAC,GAAG,EAAE;YAC7D,MAAM,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC;YAC9B,IAAI,WAAuB,CAAC;YAC5B,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAoB,EAAE,EAAE;gBAC7C,MAAM,CAAC,GAAG,IAAI,UAAU,EAAE,CAAC;gBACxB,IAAI,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,CAAC,IAAI,KAAK,WAAW,CAAC,EAAE,CAAC;oBACzC,WAAW,GAAG,CAAC,CAAC;oBACf,WAAW,CAAC,UAAW,CAAC,aAAa,CAAC,gBAAgB,CAAuB,CAAC,IAAI,EAAE,CAAC;gBAC1F,CAAC;gBACD,OAAO,IAAI,CAAC;YAChB,CAAC,CAAC,CAAC;YACH,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;YACzB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC;YACrC,IAAI,CAAC,aAAa,CAAC,aAAa,EAAE,GAAG,CAAC,CAAC;YACvC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAC9B,kBAAkB,EAClB,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,CAClG,CAAC,CAAC;QACP,CAAC,CAAC;IAkJJ,CAAC;IAxUC;;;OAGG;IAEH,IAAI,QAAQ;QACR,OAAO,IAAI,CAAC,SAAS,CAAC;IAC1B,CAAC;IAED,IAAI,QAAQ,CAAC,OAAe;QACxB,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC;QAC/B,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC;QACzB,IAAI,CAAC,aAAa,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IAC5C,CAAC;IA6CD,IAAI,WAAW;QACX,OAAO,IAAI,CAAC,YAAY,CAAC;IAC7B,CAAC;IAED,IAAI,WAAW,CAAC,OAAe;QAC3B,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC;QAClC,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC;QAC5B,IAAI,CAAC,aAAa,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;IAC/C,CAAC;IAED,iBAAiB;QACb,KAAK,CAAC,iBAAiB,EAAE,CAAC;IAC9B,CAAC;IAED,IAAI,eAAe;QACf,MAAM,mBAAmB,GAAG;YACxB,EAAE,EAAE,CAAC;SACR,CAAC;QAEJ,YAAY;QAEV,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,CAAC;YACvC,OAAO,IAAI,CAAC,YAAY,CAAC;QAC7B,CAAC;QAED,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,CAAC;YACvC,OAAO,IAAI,CAAC,GAAG,CAAC,mBAAmB,CAAC,EAAE,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAC/D,CAAC;QACD,OAAO,CAAC,CAAC;IACb,CAAC;IAGD,IAAY,UAAU;QAClB,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;IACxD,CAAC;IAED,IAAY,iBAAiB;QACzB,OAAO,IAAI,CAAC,YAAY,IAAI,CAAC,CAAC;IAClC,CAAC;IAED,IAAY,aAAa;QACrB,OAAO,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,UAAU,CAAC;IAChD,CAAC;IAEO,eAAe;QACnB,IAAI,CAAC,aAAa,EAAE,CAAC;IACzB,CAAC;IAED,YAAY;QACR,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACpC,CAAC;IAED,wDAAwD;IACxD,IAAc,SAAS;QACnB,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC;QAClD,IAAI,SAAS,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxC,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC;QAC5E,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;QACnC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,GAAG,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QAChF,OAAO,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,GAAG,CAAC,EAAE,OAAO,CAAC,CAAC;IAClG,CAAC;IAES,KAAK,CAAC,YAAY;QACxB,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnC,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC;YAC3B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC/B,IAAI,CAAC,aAAa,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QACxC,CAAC;QACD,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;QACrC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;YACnC,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,CAAC,UAAU,EAAE,CAAC;gBACzC,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC;gBAClC,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;gBACrC,IAAI,CAAC,YAAY,EAAE,CAAC;gBACpB,IAAI,CAAC,aAAa,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;YACjD,CAAC;QACL,CAAC,CAAC,CAAC;QACH,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,WAAW,EAAE,CAAC;YACzC,MAAM,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC;YAC9B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC;YACrC,IAAI,CAAC,aAAa,CAAC,aAAa,EAAE,GAAG,CAAC,CAAC;QAC3C,CAAC;IACL,CAAC;IAED,oBAAoB;QAChB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QACxD,KAAK,CAAC,oBAAoB,EAAE,CAAC;IACjC,CAAC;IAED,YAAY;QACR,OAAO,IAAI,CAAA;4BACW,IAAI,CAAC,WAAW;+BACb,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;6BAC9C,IAAI,CAAC,YAAY;yBACrB,IAAI,CAAC,SAAS;wBACf,IAAI,CAAC,OAAO;mCACD,CAAC;IAClC,CAAC;IA4BM,QAAQ,CAAC,IAAY,EAAE,UAAmB;QAC7C,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACvD,CAAC;IAEM,aAAa,CAAC,IAAY,EAAE,UAAmB;QAClD,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;IACjD,CAAC;IAED,MAAM;QACF,MAAM,UAAU,GAAG,IAAI,CAAC,mBAAmB,CAAC,mBAAmB,EAAE;YAC7D,4BAA4B,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS;YACtF,8BAA8B,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW;SAC7F,CAAC,CAAC;QAGH,OAAO,IAAI,CAAA;;cAEH,UAAU;;UAEd,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;+BAMf,SAAS,CAAC,IAAI,CAAC,iBAAiB,CAAC;0BACtC,IAAI,CAAC,iBAAiB;uBACzB,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE,YAAY,CAAC;yBAC5B,IAAI,CAAC,aAAa,CAAC,CAAC,EAAE,YAAY,CAAC;;;;;;;kBAO1C,YAAY;;;;2BAIH,CAAC,CAAC,CAAC,OAAO;;;;;;;2BAOV,SAAS,CAAC,IAAI,CAAC,iBAAiB,CAAC;sBACtC,IAAI,CAAC,iBAAiB;mBACzB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,EAAE,eAAe,CAAC;qBACnD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,EAAE,eAAe,CAAC;;;;;;;;kBAQ5D,YAAY;;;;;;;;QAQtB,IAAI,CAAC,YAAY,EAAE;UACjB,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS;YAC7C,CAAC,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC;gBAC7E,CAAC,CAAC,IAAI,CAAA,kHAAkH;gBACxH,CAAC,CAAC,OAAO;cACP,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,WAAW;gBAC7D,CAAC,CAAC,IAAI,CAAA,wDAAwD,IAAI,4DAA4D;gBAC9H,CAAC,CAAC,IAAI,CAAA;;;8BAGgB,IAAI;;4BAEN,IAAI;+BACD,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;iCAClC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;qCACrC,CAChC,CAAC;cACQ,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,UAAU;gBACjE,CAAC,CAAC,IAAI,CAAA;;;;;;;;mCAQqB;gBAC3B,CAAC,CAAC,OAAO,EAAE;YACX,CAAC,CAAC,OAAO;;;;;;;2BAOU,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;sBAClC,IAAI,CAAC,aAAa;mBACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,EAAE,WAAW,CAAC;qBAC9C,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,EAAE,WAAW,CAAC;;;;;;;gCAO1C,aAAa;;;;;;UAMnC,CAAC,IAAI,CAAC,uBAAuB;YAC/B,CAAC,CAAC,IAAI,CAAA;;;;;;+BAMiB,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;0BAClC,IAAI,CAAC,aAAa;uBACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC;yBACzC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC;;;;;;;;sBAQnD,WAAW;;;;;2BAKN;YACnB,CAAC,CAAC,OAAO;;aAEJ,CAAC;IACZ,CAAC;;AAzVQ,qBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAElB,iCAAkB,GAAG;IACxB,aAAa,EAAE,UAAU;CAC5B,AAFwB,CAEvB;AAGA;IADH,KAAK,EAAE;oDACsB;AAQ1B;IADH,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAChB;AAQ1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAGzC;AASG;IADH,KAAK,EAAE;iDACW;AAUf;IADH,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDACZ;AAY1B;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACO;AAO7C;IADH,KAAK,EAAE;mDACiB;AAGrB;IADH,QAAQ,CAAC,aAAa,CAAC;+CACS;AAO7B;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+DACL;AAGtC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAGzC;AA8QH,IAAI,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,SAAS,EAAE,CAAC;IACtD,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,CAAC;AAC7D,CAAC","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"]}
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 svgEllipsis from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Regular/Ellipsis.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-icon\n aria-label=\"ellipsis\"\n className=\"cre8-c-pagination__icon\"\n slot=\"before\" svg=${svgEllipsis}\n size=\"24\">\n </cre8-icon>`\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-icon\n aria-label=\"ellipsis\"\n className=\"cre8-c-pagination__icon\"\n slot=\"before\" svg=${svgEllipsis}\n size=\"24\">\n </cre8-icon>`\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/progress-steps/progress-steps.d.ts CHANGED Viewed

@@ -1,3 +1,33 @@
-declare const styles: import("lit").CSSResult;
-export default styles;
+import { Cre8Element } from '../cre8-element';
+/**
+ * The Progress Steps component is used to display where a user is in a multistep process.
+ * It clearly indicates the total number of steps, which steps are complete and incomplete,
+ * and which step you’re currently on. They help users estimate how long a task will take and can be
+ * used to track status on orders.
+ *
+ * The Progress Steps component should be used as a parent component for `cre8-progress-steps-item` components.
+ * These Components serve a contextual purpose and don't provide any functionality.
+ *
+ * # How to Use
+ *
+ * Progress Steps is used when there is ample horizontal space and two to six steps. It displays each step by name
+ * and number to help users understand exactly where they are in a process. It is the preferred option for desktop.
+ * Progress Steps should change to Compact Steps on mobile web to conserve space.
+ *
+ * Progress Steps can also be used to track order status. It provides a quick visual of how an order is progressing
+ * with options to alert users of any problems along the way. When used for order status, Progress Steps should
+ * change to Vertical Steps on mobile web to conserve space while allowing alerts and messages to remain visible.
+ *
+ * @slot - The Progress Steps Item components that represent the steps in the multistep process.
+ */
+export declare class Cre8ProgressSteps extends Cre8Element {
+    static get styles(): import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cre8-progress-steps': Cre8ProgressSteps;
+    }
+}
+export default Cre8ProgressSteps;
 //# sourceMappingURL=progress-steps.d.ts.map

package/lib/components/progress-steps/progress-steps.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"progress-steps.d.ts","sourceRoot":"","sources":["../../../components/progress-steps/progress-steps.ts"],"names":[],"mappings":"AACA,~~QAAA~~,MAAM,MAAM,~~yBAeX~~,CAAC;~~AACF~~,eAAe,~~MAAM~~,CAAC"}
1	+ {"version":3,"file":"progress-steps.d.ts","sourceRoot":"","sources":["../../../components/progress-steps/progress-steps.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAAa,iBAAkB,SAAQ,WAAW;IAChD,MAAM,KAAK,MAAM,4BAEhB;IAED,MAAM;CAOP;AAMD,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,qBAAqB,EAAE,iBAAiB,CAAC;KAAE;CAAE;AAEhG,eAAe,iBAAiB,CAAC"}

package/lib/components/progress-steps/progress-steps.js CHANGED Viewed

@@ -1,19 +1,40 @@
-import { css } from 'lit';
-const styles = css `@import '/design-tokens/core/scss/theming/component';
-::slotted(*) {
-  flex: 1;
+import { html, unsafeCSS } from 'lit';
+import { Cre8Element } from '../cre8-element';
+import styles from './progress-steps.styles.js';
+/**
+ * The Progress Steps component is used to display where a user is in a multistep process.
+ * It clearly indicates the total number of steps, which steps are complete and incomplete,
+ * and which step you’re currently on. They help users estimate how long a task will take and can be
+ * used to track status on orders.
+ *
+ * The Progress Steps component should be used as a parent component for `cre8-progress-steps-item` components.
+ * These Components serve a contextual purpose and don't provide any functionality.
+ *
+ * # How to Use
+ *
+ * Progress Steps is used when there is ample horizontal space and two to six steps. It displays each step by name
+ * and number to help users understand exactly where they are in a process. It is the preferred option for desktop.
+ * Progress Steps should change to Compact Steps on mobile web to conserve space.
+ *
+ * Progress Steps can also be used to track order status. It provides a quick visual of how an order is progressing
+ * with options to alert users of any problems along the way. When used for order status, Progress Steps should
+ * change to Vertical Steps on mobile web to conserve space while allowing alerts and messages to remain visible.
+ *
+ * @slot - The Progress Steps Item components that represent the steps in the multistep process.
+ */
+export class Cre8ProgressSteps extends Cre8Element {
+    static get styles() {
+        return unsafeCSS(styles.toString());
+    }
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-progress-steps');
+        return html `<div class='${componentClassNames}'>
+            <slot></slot>
+        </div>`;
+    }
 }
-.cre8-c-progress-steps {
-  display: flex;
-  flex-direction: row;
-  margin: var(--cre8-spacing-24);
-  @media (max-width: component.$cre8-breakpoint-md) {
-    flex-direction: column;
-  }
+if (customElements.get('cre8-progress-steps') === undefined) {
+    customElements.define('cre8-progress-steps', Cre8ProgressSteps);
 }
-`;
-export default styles;
+export default Cre8ProgressSteps;
 //# sourceMappingURL=progress-steps.js.map

package/lib/components/progress-steps/progress-steps.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"progress-steps.js","sourceRoot":"","sources":["../../../components/progress-steps/progress-steps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,~~GAAG~~,EAAE,MAAM,KAAK,CAAC;~~AAC1B~~,MAAM,MAAM,~~GAAG~~,GAAG,~~CAAA;;;;;;;;;;;;;;;CAejB~~,CAAC;~~AACF~~,eAAe,MAAM,CAAC","sourcesContent":["import { ~~css~~ } from 'lit';\~~nconst~~ ~~styles~~ = ~~css`@import~~ '~~/design~~-~~tokens/core/scss/theming/component~~';\n\n~~::slotted(~~*) {\n ~~flex:~~ ~~1;\~~n}\n\n.cre8-c-progress-steps {\n ~~display:~~ ~~flex;\~~n ~~flex-direction:~~ ~~row~~;\n ~~margin:~~ ~~var~~(--cre8-~~spacing~~-24);\n\n ~~@media~~ (~~max-width: component.$~~cre8-~~breakpoint~~-md) {\n ~~flex~~-~~direction:~~ ~~column~~;\n }\n}\n~~`;\~~nexport default ~~styles~~;\n"]}
1	+ {"version":3,"file":"progress-steps.js","sourceRoot":"","sources":["../../../components/progress-steps/progress-steps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,OAAO,iBAAkB,SAAQ,WAAW;IAChD,MAAM,KAAK,MAAM;QACf,OAAO,SAAS,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC;IACtC,CAAC;IAED,MAAM;QACJ,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,uBAAuB,CAAC,CAAC;QAE9E,OAAO,IAAI,CAAA,eAAe,mBAAmB;;eAElC,CAAC;IACd,CAAC;CACF;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,qBAAqB,CAAC,KAAK,SAAS,EAAE,CAAC;IAC5D,cAAc,CAAC,MAAM,CAAC,qBAAqB,EAAE,iBAAiB,CAAC,CAAC;AAClE,CAAC;AAID,eAAe,iBAAiB,CAAC","sourcesContent":["import { html, unsafeCSS } from 'lit';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './progress-steps.styles.js';\n\n/*\n The Progress Steps component is used to display where a user is in a multistep process.\n * It clearly indicates the total number of steps, which steps are complete and incomplete,\n * and which step you’re currently on. They help users estimate how long a task will take and can be\n * used to track status on orders.\n \n The Progress Steps component should be used as a parent component for `cre8-progress-steps-item` components.\n * These Components serve a contextual purpose and don't provide any functionality.\n \n # How to Use\n \n Progress Steps is used when there is ample horizontal space and two to six steps. It displays each step by name\n * and number to help users understand exactly where they are in a process. It is the preferred option for desktop.\n * Progress Steps should change to Compact Steps on mobile web to conserve space.\n \n Progress Steps can also be used to track order status. It provides a quick visual of how an order is progressing\n * with options to alert users of any problems along the way. When used for order status, Progress Steps should\n * change to Vertical Steps on mobile web to conserve space while allowing alerts and messages to remain visible.\n \n @slot - The Progress Steps Item components that represent the steps in the multistep process.\n */\nexport class Cre8ProgressSteps extends Cre8Element {\n static get styles() {\n return unsafeCSS(styles.toString());\n }\n\n render() {\n const componentClassNames = this.componentClassNames('cre8-c-progress-steps');\n\n return html`<div class='${componentClassNames}'>\n <slot></slot>\n </div>`;\n }\n}\n\nif (customElements.get('cre8-progress-steps') === undefined) {\n customElements.define('cre8-progress-steps', Cre8ProgressSteps);\n}\n\ndeclare global { interface HTMLElementTagNameMap { 'cre8-progress-steps': Cre8ProgressSteps; } }\n\nexport default Cre8ProgressSteps;\n"]}

package/lib/components/progress-steps/progress-steps.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"progress-steps.styles.d.ts","sourceRoot":"","sources":["../../../components/progress-steps/progress-steps.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,~~yBAolBV~~,CAAC;AACH,eAAe,MAAM,CAAC"}
1	+ {"version":3,"file":"progress-steps.styles.d.ts","sourceRoot":"","sources":["../../../components/progress-steps/progress-steps.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAwlBV,CAAC;AACH,eAAe,MAAM,CAAC"}

package/lib/components/progress-steps/progress-steps.styles.js CHANGED Viewed

@@ -582,6 +582,10 @@ span.ripple {
 /**
  * Visually hidden from display
  */
+:host {
+  display: flex;
+}
 ::slotted(*) {
   flex: 1;
 }

package/lib/components/progress-steps/progress-steps.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"progress-steps.styles.js","sourceRoot":"","sources":["../../../components/progress-steps/progress-steps.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAolBhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.cre8-u-content-knockout-brand {\n color: var(----cre8-color-content-knockout-brand);\n}\n\n.cre8-u-is-hidden {\n display: none !important;\n visibility: hidden !important;\n}\n\n.cre8-u-is-vishidden {\n position: absolute !important;\n overflow: hidden;\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n clip: rect(1px, 1px, 1px, 1px);\n}\n\n@media all and (min-width: 23.4375rem) {\n .cre8-u-hide-sm {\n display: none !important;\n }\n}\n@media all and (min-width: 35rem) {\n .cre8-u-hide-sm-2 {\n display: none !important;\n }\n}\n@media all and (min-width: 48rem) {\n .cre8-u-hide-md {\n display: none !important;\n }\n}\n@media all and (min-width: 60rem) {\n .cre8-u-hide-lg {\n display: none !important;\n }\n}\n@media all and (min-width: 75rem) {\n .cre8-u-hide-xl {\n display: none !important;\n }\n}\n@media all and (max-width: 23.4375rem) {\n .cre8-u-show-sm {\n display: none !important;\n }\n}\n@media all and (max-width: 35rem) {\n .cre8-u-show-sm-2 {\n display: none !important;\n }\n}\n@media all and (max-width: 48rem) {\n .cre8-u-show-md {\n display: none !important;\n }\n}\n@media all and (max-width: 60rem) {\n .cre8-u-show-lg {\n display: none !important;\n }\n}\n@media all and (max-width: 75rem) {\n .cre8-u-show-xl {\n display: none !important;\n }\n}\n.cre8-u-margin-none {\n margin: 0 !important;\n}\n\n.cre8-u-margin-sm {\n margin: size(1) !important;\n}\n\n.cre8-u-margin-md {\n margin: size(2) !important;\n}\n\n.cre8-u-margin-lg {\n margin: size(3) !important;\n}\n\n.cre8-u-margin-xl {\n margin: size(4) !important;\n}\n\n.cre8-u-margin-xxl {\n margin: size(8) !important;\n}\n\n.cre8-u-margin-top-none {\n margin-top: 0 !important;\n}\n\n.cre8-u-margin-top-sm {\n margin-top: size(1) !important;\n}\n\n.cre8-u-margin-top-md {\n margin-top: size(2) !important;\n}\n\n.cre8-u-margin-top-lg {\n margin-top: size(3) !important;\n}\n\n.cre8-u-margin-top-xl {\n margin-top: size(4) !important;\n}\n\n.cre8-u-margin-top-xxl {\n margin-top: size(8) !important;\n}\n\n.cre8-u-margin-right-none {\n margin-right: 0 !important;\n}\n\n.cre8-u-margin-right-sm {\n margin-right: size(1) !important;\n}\n\n.cre8-u-margin-right-md {\n margin-right: size(2) !important;\n}\n\n.cre8-u-margin-right-lg {\n margin-right: size(3) !important;\n}\n\n.cre8-u-margin-right-xl {\n margin-right: size(4) !important;\n}\n\n.cre8-u-margin-right-xxl {\n margin-right: size(8) !important;\n}\n\n.cre8-u-margin-bottom-none {\n margin-bottom: 0 !important;\n}\n\n.cre8-u-margin-bottom-sm {\n margin-bottom: size(1) !important;\n}\n\n.cre8-u-margin-bottom-md {\n margin-bottom: size(2) !important;\n}\n\n.cre8-u-margin-bottom-lg {\n margin-bottom: size(3) !important;\n}\n\n.cre8-u-margin-bottom-xl {\n margin-bottom: size(4) !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n margin-bottom: size(8) !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n margin-bottom: size(4) !important;\n}\n\n@media all and (min-width: 768px) {\n .cre8-u-margin-bottom-xl-xxl {\n margin-bottom: size(8) !important;\n }\n}\n.cre8-u-margin-left-none {\n margin-left: 0 !important;\n}\n\n.cre8-u-margin-left-sm {\n margin-left: size(1) !important;\n}\n\n.cre8-u-margin-left-md {\n margin-left: size(2) !important;\n}\n\n.cre8-u-margin-left-lg {\n margin-left: size(3) !important;\n}\n\n.cre8-u-margin-left-xl {\n margin-left: size(4) !important;\n}\n\n.cre8-u-margin-left-xxl {\n margin-left: size(8) !important;\n}\n\n.cre8-u-padding-none {\n padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n padding: size(1) !important;\n}\n\n.cre8-u-padding-md {\n padding: size(2) !important;\n}\n\n.cre8-u-padding-lg {\n padding: size(3) !important;\n}\n\n.cre8-u-padding-xl {\n padding: size(4) !important;\n}\n\n.cre8-u-padding-xxl {\n padding: size(8) !important;\n}\n\n.cre8-u-padding-top-none {\n padding-top: 0 !important;\n}\n\n.cre8-u-padding-top-sm {\n padding-top: size(1) !important;\n}\n\n.cre8-u-padding-top-md {\n padding-top: size(2) !important;\n}\n\n.cre8-u-padding-top-lg {\n padding-top: size(3) !important;\n}\n\n.cre8-u-padding-top-xl {\n padding-top: size(4) !important;\n}\n\n.cre8-u-padding-top-xxl {\n padding-top: size(8) !important;\n}\n\n.cre8-u-padding-right-none {\n padding-right: 0 !important;\n}\n\n.cre8-u-padding-right-sm {\n padding-right: size(1) !important;\n}\n\n.cre8-u-padding-right-md {\n padding-right: size(2) !important;\n}\n\n.cre8-u-padding-right-lg {\n padding-right: size(3) !important;\n}\n\n.cre8-u-padding-right-xl {\n padding-right: size(4) !important;\n}\n\n.cre8-u-padding-right-xxl {\n padding-right: size(8) !important;\n}\n\n.cre8-u-padding-bottom-none {\n padding-bottom: 0 !important;\n}\n\n.cre8-u-padding-bottom-sm {\n padding-bottom: size(1) !important;\n}\n\n.cre8-u-padding-bottom-md {\n padding-bottom: size(2) !important;\n}\n\n.cre8-u-padding-bottom-lg {\n padding-bottom: size(3) !important;\n}\n\n.cre8-u-padding-bottom-xl {\n padding-bottom: size(4) !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n padding-bottom: size(8) !important;\n}\n\n.cre8-u-padding-left-none {\n padding-left: 0 !important;\n}\n\n.cre8-u-padding-left-sm {\n padding-left: size(1) !important;\n}\n\n.cre8-u-padding-left-md {\n padding-left: size(2) !important;\n}\n\n.cre8-u-padding-left-lg {\n padding-left: size(3) !important;\n}\n\n.cre8-u-padding-left-xl {\n padding-left: size(4) !important;\n}\n\n.cre8-u-padding-left-xxl {\n padding-left: size(8) !important;\n}\n\n.cre8-u-display-flex {\n display: flex !important;\n}\n\n.cre8-u-display-block {\n display: block !important;\n}\n\nbody {\n font-family: var(--cre8-typography-body-default-font-family);\n font-size: var(--cre8-typography-body-default-font-size);\n font-weight: var(--cre8-typography-body-default-font-weight);\n line-height: var(--cre8-typography-body-default-line-height);\n -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);\n text-decoration: var(--cre8-typography-body-default-text-decoration);\n text-transform: var(--cre8-typography-body-default-text-transform);\n display: flex;\n flex-direction: column;\n padding: 0;\n margin: 0;\n color: var(--cre8-color-content-default);\n background: var(--background-default);\n}\n\n@media all and (min-width: 60rem) {\n .page-container {\n background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);\n }\n}\n.band__inner {\n margin-left: 2rem;\n margin-right: 2rem;\n}\n\n@media all and (min-width: 60rem) {\n .band__inner {\n margin-right: 0;\n }\n}\nimg {\n max-width: 100%;\n height: auto;\n}\n\n/*\n Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n /\n,\n::slotted(),\n:before,\n:after {\n box-sizing: border-box;\n}\n\n:root {\n --size-base-unit: 0.5rem;\n}\n\n/\n RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n /\n[dir=rtl] {\n --rtlTranslateX: 50%;\n / 1 /\n --rtlGradientToRight: 270deg;\n / 2 /\n --rtlRotate45Inverse: -45deg;\n / 3 /\n}\n\n/\n Visible focus outline for elements on a light background\n /\n/\n Visible focus outline for elements with an error status\n /\n/\n Visible focus outline for elements on a dark background\n /\n/\n Focus state for themes that need a dashed outline for focus\n* state\n/\n/\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n /\n/\n Visually hidden from display\n /\n/\n=======\nAnimations\n=======\n/\n:host {\n --cre8-z-index-1: 1;\n --cre8-z-index-50: 50;\n --cre8-z-index-100: 100;\n --cre8-z-index-200: 200;\n --cre8-z-index-1030: 1030;\n --cre8-anim-fade-quick: 0.35s;\n --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n 100% {\n opacity: 1;\n }\n}\n@keyframes slideIn {\n 100% {\n transform: translateX(0);\n }\n}\n@keyframes slideInFwd {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideOutRight {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideUp {\n 100% {\n transform: translateY(0);\n }\n}\n@media (width >= 481px) {\n @keyframes slideInFwd {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n}\n@media (width >= 48rem) {\n @keyframes slideInFwd {\n 100% {\n width: 330px;\n height: 330px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 330px;\n height: 330px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 60rem) {\n @keyframes slideInFwd {\n 100% {\n width: 460px;\n height: 460px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 460px;\n height: 460px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 75rem) {\n @keyframes slideInFwd {\n 100% {\n width: 592px;\n height: 591px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 87.5rem) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 120px));\n }\n }\n}\n@media (width >= 2200px) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 592px));\n }\n }\n}\nspan.ripple {\n position: absolute;\n border-radius: 50%;\n transform: scale(0);\n animation: ripple 600ms linear;\n background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n to {\n transform: scale(4);\n opacity: 1;\n }\n}\n:root {\n --size-base-unit: 0.5rem;\n}\n\n/\n RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n /\n[dir=rtl] {\n --rtlTranslateX: 50%;\n / 1 /\n --rtlGradientToRight: 270deg;\n / 2 /\n --rtlRotate45Inverse: -45deg;\n / 3 /\n}\n\n/\n Visible focus outline for elements on a light background\n /\n/\n Visible focus outline for elements with an error status\n /\n/\n Visible focus outline for elements on a dark background\n /\n/\n Focus state for themes that need a dashed outline for focus\n* state\n/\n/\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n /\n/\n Visually hidden from display\n /\n::slotted() {\n flex: 1;\n}\n\n.cre8-c-progress-steps {\n display: flex;\n flex-direction: row;\n margin: var(--cre8-spacing-24);\n}\n@media (max-width: 768px) {\n .cre8-c-progress-steps {\n flex-direction: column;\n }\n}`;\nexport default styles;\n"]}
1	+ {"version":3,"file":"progress-steps.styles.js","sourceRoot":"","sources":["../../../components/progress-steps/progress-steps.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwlBhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.cre8-u-content-knockout-brand {\n color: var(----cre8-color-content-knockout-brand);\n}\n\n.cre8-u-is-hidden {\n display: none !important;\n visibility: hidden !important;\n}\n\n.cre8-u-is-vishidden {\n position: absolute !important;\n overflow: hidden;\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n clip: rect(1px, 1px, 1px, 1px);\n}\n\n@media all and (min-width: 23.4375rem) {\n .cre8-u-hide-sm {\n display: none !important;\n }\n}\n@media all and (min-width: 35rem) {\n .cre8-u-hide-sm-2 {\n display: none !important;\n }\n}\n@media all and (min-width: 48rem) {\n .cre8-u-hide-md {\n display: none !important;\n }\n}\n@media all and (min-width: 60rem) {\n .cre8-u-hide-lg {\n display: none !important;\n }\n}\n@media all and (min-width: 75rem) {\n .cre8-u-hide-xl {\n display: none !important;\n }\n}\n@media all and (max-width: 23.4375rem) {\n .cre8-u-show-sm {\n display: none !important;\n }\n}\n@media all and (max-width: 35rem) {\n .cre8-u-show-sm-2 {\n display: none !important;\n }\n}\n@media all and (max-width: 48rem) {\n .cre8-u-show-md {\n display: none !important;\n }\n}\n@media all and (max-width: 60rem) {\n .cre8-u-show-lg {\n display: none !important;\n }\n}\n@media all and (max-width: 75rem) {\n .cre8-u-show-xl {\n display: none !important;\n }\n}\n.cre8-u-margin-none {\n margin: 0 !important;\n}\n\n.cre8-u-margin-sm {\n margin: size(1) !important;\n}\n\n.cre8-u-margin-md {\n margin: size(2) !important;\n}\n\n.cre8-u-margin-lg {\n margin: size(3) !important;\n}\n\n.cre8-u-margin-xl {\n margin: size(4) !important;\n}\n\n.cre8-u-margin-xxl {\n margin: size(8) !important;\n}\n\n.cre8-u-margin-top-none {\n margin-top: 0 !important;\n}\n\n.cre8-u-margin-top-sm {\n margin-top: size(1) !important;\n}\n\n.cre8-u-margin-top-md {\n margin-top: size(2) !important;\n}\n\n.cre8-u-margin-top-lg {\n margin-top: size(3) !important;\n}\n\n.cre8-u-margin-top-xl {\n margin-top: size(4) !important;\n}\n\n.cre8-u-margin-top-xxl {\n margin-top: size(8) !important;\n}\n\n.cre8-u-margin-right-none {\n margin-right: 0 !important;\n}\n\n.cre8-u-margin-right-sm {\n margin-right: size(1) !important;\n}\n\n.cre8-u-margin-right-md {\n margin-right: size(2) !important;\n}\n\n.cre8-u-margin-right-lg {\n margin-right: size(3) !important;\n}\n\n.cre8-u-margin-right-xl {\n margin-right: size(4) !important;\n}\n\n.cre8-u-margin-right-xxl {\n margin-right: size(8) !important;\n}\n\n.cre8-u-margin-bottom-none {\n margin-bottom: 0 !important;\n}\n\n.cre8-u-margin-bottom-sm {\n margin-bottom: size(1) !important;\n}\n\n.cre8-u-margin-bottom-md {\n margin-bottom: size(2) !important;\n}\n\n.cre8-u-margin-bottom-lg {\n margin-bottom: size(3) !important;\n}\n\n.cre8-u-margin-bottom-xl {\n margin-bottom: size(4) !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n margin-bottom: size(8) !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n margin-bottom: size(4) !important;\n}\n\n@media all and (min-width: 768px) {\n .cre8-u-margin-bottom-xl-xxl {\n margin-bottom: size(8) !important;\n }\n}\n.cre8-u-margin-left-none {\n margin-left: 0 !important;\n}\n\n.cre8-u-margin-left-sm {\n margin-left: size(1) !important;\n}\n\n.cre8-u-margin-left-md {\n margin-left: size(2) !important;\n}\n\n.cre8-u-margin-left-lg {\n margin-left: size(3) !important;\n}\n\n.cre8-u-margin-left-xl {\n margin-left: size(4) !important;\n}\n\n.cre8-u-margin-left-xxl {\n margin-left: size(8) !important;\n}\n\n.cre8-u-padding-none {\n padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n padding: size(1) !important;\n}\n\n.cre8-u-padding-md {\n padding: size(2) !important;\n}\n\n.cre8-u-padding-lg {\n padding: size(3) !important;\n}\n\n.cre8-u-padding-xl {\n padding: size(4) !important;\n}\n\n.cre8-u-padding-xxl {\n padding: size(8) !important;\n}\n\n.cre8-u-padding-top-none {\n padding-top: 0 !important;\n}\n\n.cre8-u-padding-top-sm {\n padding-top: size(1) !important;\n}\n\n.cre8-u-padding-top-md {\n padding-top: size(2) !important;\n}\n\n.cre8-u-padding-top-lg {\n padding-top: size(3) !important;\n}\n\n.cre8-u-padding-top-xl {\n padding-top: size(4) !important;\n}\n\n.cre8-u-padding-top-xxl {\n padding-top: size(8) !important;\n}\n\n.cre8-u-padding-right-none {\n padding-right: 0 !important;\n}\n\n.cre8-u-padding-right-sm {\n padding-right: size(1) !important;\n}\n\n.cre8-u-padding-right-md {\n padding-right: size(2) !important;\n}\n\n.cre8-u-padding-right-lg {\n padding-right: size(3) !important;\n}\n\n.cre8-u-padding-right-xl {\n padding-right: size(4) !important;\n}\n\n.cre8-u-padding-right-xxl {\n padding-right: size(8) !important;\n}\n\n.cre8-u-padding-bottom-none {\n padding-bottom: 0 !important;\n}\n\n.cre8-u-padding-bottom-sm {\n padding-bottom: size(1) !important;\n}\n\n.cre8-u-padding-bottom-md {\n padding-bottom: size(2) !important;\n}\n\n.cre8-u-padding-bottom-lg {\n padding-bottom: size(3) !important;\n}\n\n.cre8-u-padding-bottom-xl {\n padding-bottom: size(4) !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n padding-bottom: size(8) !important;\n}\n\n.cre8-u-padding-left-none {\n padding-left: 0 !important;\n}\n\n.cre8-u-padding-left-sm {\n padding-left: size(1) !important;\n}\n\n.cre8-u-padding-left-md {\n padding-left: size(2) !important;\n}\n\n.cre8-u-padding-left-lg {\n padding-left: size(3) !important;\n}\n\n.cre8-u-padding-left-xl {\n padding-left: size(4) !important;\n}\n\n.cre8-u-padding-left-xxl {\n padding-left: size(8) !important;\n}\n\n.cre8-u-display-flex {\n display: flex !important;\n}\n\n.cre8-u-display-block {\n display: block !important;\n}\n\nbody {\n font-family: var(--cre8-typography-body-default-font-family);\n font-size: var(--cre8-typography-body-default-font-size);\n font-weight: var(--cre8-typography-body-default-font-weight);\n line-height: var(--cre8-typography-body-default-line-height);\n -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);\n text-decoration: var(--cre8-typography-body-default-text-decoration);\n text-transform: var(--cre8-typography-body-default-text-transform);\n display: flex;\n flex-direction: column;\n padding: 0;\n margin: 0;\n color: var(--cre8-color-content-default);\n background: var(--background-default);\n}\n\n@media all and (min-width: 60rem) {\n .page-container {\n background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);\n }\n}\n.band__inner {\n margin-left: 2rem;\n margin-right: 2rem;\n}\n\n@media all and (min-width: 60rem) {\n .band__inner {\n margin-right: 0;\n }\n}\nimg {\n max-width: 100%;\n height: auto;\n}\n\n/*\n Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n /\n,\n::slotted(),\n:before,\n:after {\n box-sizing: border-box;\n}\n\n:root {\n --size-base-unit: 0.5rem;\n}\n\n/\n RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n /\n[dir=rtl] {\n --rtlTranslateX: 50%;\n / 1 /\n --rtlGradientToRight: 270deg;\n / 2 /\n --rtlRotate45Inverse: -45deg;\n / 3 /\n}\n\n/\n Visible focus outline for elements on a light background\n /\n/\n Visible focus outline for elements with an error status\n /\n/\n Visible focus outline for elements on a dark background\n /\n/\n Focus state for themes that need a dashed outline for focus\n* state\n/\n/\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n /\n/\n Visually hidden from display\n /\n/\n=======\nAnimations\n=======\n/\n:host {\n --cre8-z-index-1: 1;\n --cre8-z-index-50: 50;\n --cre8-z-index-100: 100;\n --cre8-z-index-200: 200;\n --cre8-z-index-1030: 1030;\n --cre8-anim-fade-quick: 0.35s;\n --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n 100% {\n opacity: 1;\n }\n}\n@keyframes slideIn {\n 100% {\n transform: translateX(0);\n }\n}\n@keyframes slideInFwd {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideOutRight {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideUp {\n 100% {\n transform: translateY(0);\n }\n}\n@media (width >= 481px) {\n @keyframes slideInFwd {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n}\n@media (width >= 48rem) {\n @keyframes slideInFwd {\n 100% {\n width: 330px;\n height: 330px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 330px;\n height: 330px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 60rem) {\n @keyframes slideInFwd {\n 100% {\n width: 460px;\n height: 460px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 460px;\n height: 460px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 75rem) {\n @keyframes slideInFwd {\n 100% {\n width: 592px;\n height: 591px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 87.5rem) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 120px));\n }\n }\n}\n@media (width >= 2200px) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 592px));\n }\n }\n}\nspan.ripple {\n position: absolute;\n border-radius: 50%;\n transform: scale(0);\n animation: ripple 600ms linear;\n background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n to {\n transform: scale(4);\n opacity: 1;\n }\n}\n:root {\n --size-base-unit: 0.5rem;\n}\n\n/\n RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n /\n[dir=rtl] {\n --rtlTranslateX: 50%;\n / 1 /\n --rtlGradientToRight: 270deg;\n / 2 /\n --rtlRotate45Inverse: -45deg;\n / 3 /\n}\n\n/\n Visible focus outline for elements on a light background\n /\n/\n Visible focus outline for elements with an error status\n /\n/\n Visible focus outline for elements on a dark background\n /\n/\n Focus state for themes that need a dashed outline for focus\n* state\n/\n/\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n /\n/\n Visually hidden from display\n /\n:host {\n display: flex;\n}\n\n::slotted() {\n flex: 1;\n}\n\n.cre8-c-progress-steps {\n display: flex;\n flex-direction: row;\n margin: var(--cre8-spacing-24);\n}\n@media (max-width: 768px) {\n .cre8-c-progress-steps {\n flex-direction: column;\n }\n}`;\nexport default styles;\n"]}

package/lib/components/select-tile/select-tile.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"select-tile.d.ts","sourceRoot":"","sources":["../../../components/select-tile/select-tile.ts"],"names":[],"mappings":"AACA,OAAO,EACS,cAAc,EAC7B,MAAM,KAAK,CAAC;AAKb,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,cAAc,CAAC;~~AAMlB~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCE;~~AACN~~,qBAAa,cAAe,SAAQ,eAAe;IAC/C,MAAM,CAAC,iBAAiB;;;;;;;MAA6D;IAErF,OAAO,CAAC,WAAW,CAAmF;IAEtG;;OAEG;~~IAEC~~,IAAI,EAAE,OAAO,GAAG,UAAU,CAAW;~~IAEzC~~;;OAEG;~~IAEC~~,KAAK,EAAG,gBAAgB,CAAC;~~IAE7B~~,MAAM,CAAC,MAAM,4BAAY;IAEzB;;;;;;OAMG;~~IAEC~~,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,iBAAiB,CAAC;~~IAExD~~;;;OAGG;~~IAEC~~,sBAAsB,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAQ;~~IAEvF~~;;;OAGG;~~IAEC~~,aAAa,EAAE,MAAM,GAAG,OAAO,GAAG,WAAW,GAAG,MAAM,CAAW;~~IAErE~~;;OAEG;~~IAEC~~,YAAY,EAAE,KAAK,GAAG,OAAO,CAAS;~~IAE1C~~;;;;;;;OAOG;~~IAEC~~,KAAK,CAAC,EAAE,QAAQ,CAAC;~~IAErB~~;;OAEG;~~IAEC~~,OAAO,CAAC,EAAE,OAAO,CAAC;~~IAEtB~~;;OAEG;~~IAEC~~,QAAQ,CAAC,EAAE,OAAO,CAAC;~~IAEvB~~;;OAEG;~~IAEC~~,QAAQ,CAAC,EAAE,OAAO,CAAC;~~IAEvB~~;;;;OAIG;~~IAEC~~,OAAO,CAAC,EAAE,OAAO,CAAC;~~IAEtB~~;;;;;OAKG;~~IAEC~~,cAAc,EAAE,OAAO,CAAC;~~IAE5B~~;;OAEG;~~IAEC~~,OAAO,CAAC,EAAE,MAAM,CAAC;~~IAErB~~;;OAEG;IAEH,OAAO,CAAC,eAAe,CAAC,CAAS;IAEjC;;OAEG;~~IAEC~~,SAAS,CAAC,EAAE,OAAO,CAAC;~~IAExB~~;;;;OAIG;IACH,IAAI,IAAI,oBAEP;IAED;;;;OAIG;IACH,iBAAiB;IAWjB;;;;;OAKG;IACH,iBAAiB,IAAI,IAAI;IAMzB;;;;OAIG;IACH,OAAO,CAAC,YAAY,EAAE,cAAc;IAwBpC,WAAW;IAgBX,kBAAkB;IASlB,MAAM;~~CA8DT~~;AAMD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,kBAAkB,EAAE,cAAc,CAAC;KACtC;CACJ;AAED,eAAe,cAAc,CAAC"}
1	+ {"version":3,"file":"select-tile.d.ts","sourceRoot":"","sources":["../../../components/select-tile/select-tile.ts"],"names":[],"mappings":"AACA,OAAO,EACS,cAAc,EAC7B,MAAM,KAAK,CAAC;AAKb,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,cAAc,CAAC;AAMtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCE;AACF,qBAAa,cAAe,SAAQ,eAAe;IAC/C,MAAM,CAAC,iBAAiB;;;;;;;MAA6D;IAErF,OAAO,CAAC,WAAW,CAAmF;IAEtG;;OAEG;IAEH,IAAI,EAAE,OAAO,GAAG,UAAU,CAAW;IAErC;;OAEG;IAEH,KAAK,EAAG,gBAAgB,CAAC;IAEzB,MAAM,CAAC,MAAM,4BAAY;IAEzB;;;;;;OAMG;IAEH,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,iBAAiB,CAAC;IAEpD;;;OAGG;IAEH,sBAAsB,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAQ;IAEnF;;;OAGG;IAEH,aAAa,EAAE,MAAM,GAAG,OAAO,GAAG,WAAW,GAAG,MAAM,CAAW;IAEjE;;OAEG;IAEH,YAAY,EAAE,KAAK,GAAG,OAAO,CAAS;IAEtC;;;;;;;OAOG;IAEH,KAAK,CAAC,EAAE,QAAQ,CAAC;IAEjB;;OAEG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;;OAKG;IAEH,cAAc,EAAE,OAAO,CAAC;IAExB;;OAEG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IAEH,OAAO,CAAC,eAAe,CAAC,CAAS;IAEjC;;OAEG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,IAAI,IAAI,oBAEP;IAED;;;;OAIG;IACH,iBAAiB;IAWjB;;;;;OAKG;IACH,iBAAiB,IAAI,IAAI;IAMzB;;;;OAIG;IACH,OAAO,CAAC,YAAY,EAAE,cAAc;IAwBpC,WAAW;IAgBX,kBAAkB;IASlB,MAAM;CAgET;AAMD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,kBAAkB,EAAE,cAAc,CAAC;KACtC;CACJ;AAED,eAAe,cAAc,CAAC"}

package/lib/components/select-tile/select-tile.js CHANGED Viewed

@@ -178,6 +178,7 @@ export class Cre8SelectTile extends Cre8FormElement {
         });
         const labelTabIndex = this.disabled ? undefined : '0';
         return html `
+        <div class="cre8-c-select-tile__container" part="container">
         ${this.renderInput()}
         <label class="${componentClassNames}" part="select-tile" for=${this.fieldId} tabindex=${labelTabIndex}>
             ${this.slotNotEmpty('header') && html `
@@ -207,7 +208,8 @@ export class Cre8SelectTile extends Cre8FormElement {
                     <cre8-icon svg="${svgCheck}" class="cre8-c-select-tile__icon"></cre8-icon>
                 </div>
             </div>
-        </label>`;
+        </label>
+        </div>`;
     }
 }
 Cre8SelectTile.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };

package/lib/components/select-tile/select-tile.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"select-tile.js","sourceRoot":"","sources":["../../../components/select-tile/select-tile.ts"],"names":[],"mappings":"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","sourcesContent":["import svgCheck from '../../icons/System/Regular/Check.svg?raw';\nimport {\n LitElement, PropertyValues, html,\n} from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { nanoid } from 'nanoid';\n\nimport { Cre8FormElement } from '../cre8-form-element';\nimport '../icon/icon';\n\nimport styles from './select-tile.styles.js';\nimport { SelectTileRadioController } from './select-tile-radio-controller';\nimport { SelectTileCheckboxController } from './select-tile-checkbox-controller';\n\n /*\n The Select Tile component is a short block of content inside a visual\n * container that can be used in place of checkboxes, radio buttons, and\n * links. It allows you to add more descriptive and visually appealing\n * content for these actions while letting you compare different choices\n * either side-by-side or on top of each other.\n \n Typically you could use the \"header\" slot for an icon, and the \"title\"\n * and \"body\" slots for a content title and body text below it.\n \n The css parts are shown here wrapped in ::part() because otherwise Storybook\n * won't render them and the slots if they have the same name.\n * See https://developer.mozilla.org/en-US/docs/Web/CSS/::part\n \n @fires change\n * @fires input\n * @slot \"\" - The default slot goes into the center, main part of the Select Tile.\n * Consider using title and body instead.\n * @slot \"header\" - The top or left part of the Select Tile\n * @slot footer - The bottom or right part of the Select Tile\n * @slot title - The title part of the Select Tile, use with body slot and\n * instead of the default slot for appropriate typography.\n * @slot \"body\" - The \"body\" part of the Select Tile, which appears under\n * the title slot and receives apporpriate typography.\n \n @csspart ::part(select-tile) - The main wrapping element\n * @csspart ::part(header) - The header element wrapping the left or top element\n * @csspart ::part(footer) - The footer element wrapping the right element\n * @csspart ::part(body) - The main body of the select-tile, wrapper around the default slot\n * @csspart ::part(body-title) - The element that wraps the \"title\" slot\n * @csspart ::part(body-body) - The element that wraps the \"body\" slot\n \n /\nexport class Cre8SelectTile extends Cre8FormElement {\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n private _controller: SelectTileRadioController \| SelectTileCheckboxController \| undefined = undefined;\n\n /*\n Should this Select Tile behave as a radio button or a checkbox?\n /\n @property({ reflect: true })\n type: 'radio' \| 'checkbox' = 'radio';\n\n /\n Get the radio field item input\n /\n @query('input')\n field!: HTMLInputElement;\n\n static styles = [styles];\n\n /\n Style variants\n * - bare renders a select-tile without a border and without padding around the content\n * - horizontal renders a select-tile with header, body, footer oriented in a row rather than a column\n * - horizontal-bare renders a select-tile with header, body, footer\n * oriented in a row rather than a column without a border and without padding around the content\n /\n @property({ reflect: true })\n variant?: 'bare' \| 'horizontal' \| 'horizontal-bare';\n\n /\n Which breakpoint, if any, to switch to verticial.\n * Only useful for horizontal variants. Defaults to 'sm'.\n /\n @property({ reflect: true })\n variantBreakToVertical: 'sm' \| 'sm-2' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'none' = 'sm';\n\n /\n Where does the checkmark or radio button go?\n * It disappears on 'none'. Only top-right is supported for vertical variants.\n /\n @property({ reflect: true })\n checkPosition: 'left' \| 'right' \| 'top-right' \| 'none' = 'right';\n\n /\n In radio mode, whether to use the circle with the dot, or the rounded check.\n /\n @property({ reflect: true })\n radioVariant: 'dot' \| 'check' = 'dot';\n\n /\n Align variants\n * <cre8-text-passage size=\"sm\">\n * <ul>\n * <li>center renders a select-tile that has center aligned content/text</li>\n * </ul>\n * </cre8-text-passage>\n /\n @property({ reflect: true })\n align?: 'center';\n\n /\n Error State\n /\n @property({ type: Boolean, reflect: true })\n isError?: boolean;\n\n /\n Disabled State\n /\n @property({ type: Boolean, reflect: true })\n disabled?: boolean;\n\n /\n Required attribute\n /\n @property({ type: Boolean, reflect: true })\n required?: boolean;\n\n /\n Checked State.\n * Note: the `checked` attribute sets the `defaultChecked` property, as well\n * as sets the initial value for the `checked` property.\n /\n @property({ type: Boolean, reflect: true })\n checked?: boolean;\n\n /\n The default checked state when the element first renders or is reset.\n \n Note: the attribute is named `checked` and the property is\n * named `defaultChecked`. This is the same as a regular radio button.\n /\n @property({ attribute: 'checked', type: Boolean, reflect: true })\n defaultChecked: boolean;\n\n /\n Select Tile FieldId\n /\n @property()\n fieldId?: string;\n\n /\n Radio item fieldnote aria describe by\n /\n @property()\n private ariaDescribedBy?: string;\n\n /\n Radio item fieldnote isSuccess\n /\n @property({ type: Boolean, reflect: true })\n isSuccess?: boolean;\n\n /\n The form associated with this field\n \n TOOD: maybe this goes on Cre8FormElement\n /\n get form() {\n return this._internals.form;\n }\n\n /\n Connected callback lifecycle\n * 1) Auto-generate the fieldId if a user doesn't provided so that the form field is accessible\n * 2) Initialize the correct controller\n /\n connectedCallback() {\n super.connectedCallback();\n this.fieldId = this.fieldId \|\| nanoid(); / 1 /\n this._controller = this.type === 'radio'\n ? new SelectTileRadioController(this)\n : new SelectTileCheckboxController(this);\n if (this.disabled) {\n this._internals.ariaDisabled = 'true';\n }\n }\n\n /\n Reset form callback\n * 1) Remove the checked state from all radio elements\n * 2) Set the checked state to the initial checked state\n * 3) Set the radio field input checked attribute to the initial checked state\n /\n formResetCallback(): void {\n this.checked = this.defaultChecked;\n this.field.checked = this.defaultChecked;\n }\n\n\n /\n Whenever the \"checked\" property changes, update our form value, aria-checked,\n * and the checked property of `this.field`.\n \n /\n updated(changedProps: PropertyValues) {\n super.updated(changedProps);\n\n if (changedProps.has('checked')) {\n // this.field.checked = this.checked;\n // this.field.checked ? this._internals.setFormValue(this.value \|\| 'on') : this._internals.setFormValue(null);\n this.setAttribute('aria-checked', this.checked ? 'true' : 'false');\n }\n if (changedProps.has('type')) {\n this._controller.hostDisconnected();\n this._controller = this.type === 'radio'\n ? new SelectTileRadioController(this)\n : new SelectTileCheckboxController(this);\n }\n if (changedProps.has('disabled')) {\n if (this.disabled) {\n this._internals.ariaDisabled = 'true';\n } else {\n this._internals.ariaDisabled = 'false';\n }\n }\n }\n\n\n renderInput() {\n return html`\n <input\n class=\"cre8-c-select-tile__input\"\n type=${this.type}\n id=${this.fieldId}\n aria-describedby=\"${ifDefined(this.ariaDescribedBy)}\"\n ?required=${this.required}\n name=${this.name}\n .value=${this.value}\n ?disabled=\"${this.disabled}\"\n .checked=\"${this.checked}\"\n />\n `;\n }\n\n renderCheckboxIcon() {\n if (this.type === 'checkbox') {\n return html`\n <cre8-icon svg=\"${svgCheck}\" class=\"cre8-c-select-tile__icon\" aria-hidden=\"${!this.checked}\"></cre8-icon>\n `;\n }\n return null;\n }\n\n render() {\n const componentClassNames = this.componentClassNames('cre8-c-select-tile', {\n 'cre8-c-select-tile--bare': this.variant === 'bare',\n 'cre8-c-select-tile--horizontal': this.variant === 'horizontal',\n 'cre8-c-select-tile--horizontal-bare': this.variant === 'horizontal-bare',\n 'cre8-c-select-tile--vertical-at-sm': this.variantBreakToVertical === 'sm',\n 'cre8-c-select-tile--vertical-at-sm-2': this.variantBreakToVertical === 'sm-2',\n 'cre8-c-select-tile--vertical-at-md': this.variantBreakToVertical === 'md',\n 'cre8-c-select-tile--vertical-at-lg': this.variantBreakToVertical === 'lg',\n 'cre8-c-select-tile--vertical-at-xl': this.variantBreakToVertical === 'xl',\n 'cre8-c-select-tile--vertical-at-xxl': this.variantBreakToVertical === 'xxl',\n 'cre8-c-select-tile--align-center': this.align === 'center',\n 'cre8-c-select-tile--error': this.isError,\n 'cre8-c-select-tile--success': this.isSuccess,\n 'cre8-c-select-tile--disabled': this.disabled,\n });\n\n const checkboxClassNames = this.componentClassNames(\n this.type === 'radio' ? 'cre8-c-select-tile__custom-radio' : 'cre8-c-select-tile__custom-checkbox',\n {\n 'cre8-c-select-tile__custom-radio-top-right': !this.variant\n \|\| this.variant === 'bare' \|\| this.checkPosition === 'top-right',\n 'cre8-c-select-tile__custom-radio-left': this.checkPosition === 'left',\n 'cre8-c-select-tile__custom-radio-none': this.checkPosition === 'none',\n 'cre8-c-select-tile__custom-radio-check': this.radioVariant === 'check',\n }\n );\n\n const labelTabIndex = this.disabled ? undefined : '0';\n\n return html`\n ${this.renderInput()}\n <label class=\"${componentClassNames}\" part=\"select-tile\" for=${this.fieldId} tabindex=${labelTabIndex}>\n ${this.slotNotEmpty('header') && html`\n <div class=\"cre8-c-select-tile__header\" part=\"header\">\n <slot name=\"header\"></slot>\n </div>\n `}\n <div part=\"body\" class=\"cre8-c-select-tile__body\">\n <slot></slot>\n ${this.slotNotEmpty('title') && html`\n <div part=\"body-title\" class=\"cre8-c-select-tile__body_title\">\n <slot name=\"title\"></slot>\n </div>\n `}\n ${this.slotNotEmpty('body') && html`\n <div part=\"body-body\" class=\"cre8-c-select-tile__body_body\">\n <slot name=\"body\"></slot>\n </div>\n `}\n </div>\n <div part=\"footer\" class=\"cre8-c-select-tile__footer\">\n <slot name=\"footer\"></slot>\n </div>\n <div class=\"${checkboxClassNames}\">\n ${this.renderCheckboxIcon()}\n <div class=\"cre8-c-select-tile__inner-circle\">\n <cre8-icon svg=\"${svgCheck}\" class=\"cre8-c-select-tile__icon\"></cre8-icon>\n </div>\n </div>\n </label>`;\n }\n}\n\nif (customElements.get('cre8-select-tile') === undefined) {\n customElements.define('cre8-select-tile', Cre8SelectTile);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cre8-select-tile': Cre8SelectTile;\n }\n}\n\nexport default Cre8SelectTile;\n"]}
1	+ {"version":3,"file":"select-tile.js","sourceRoot":"","sources":["../../../components/select-tile/select-tile.ts"],"names":[],"mappings":"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","sourcesContent":["import svgCheck from '../../icons/System/Regular/Check.svg?raw';\nimport {\n LitElement, PropertyValues, html,\n} from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { nanoid } from 'nanoid';\n\nimport { Cre8FormElement } from '../cre8-form-element';\nimport '../icon/icon';\n\nimport styles from './select-tile.styles.js';\nimport { SelectTileRadioController } from './select-tile-radio-controller';\nimport { SelectTileCheckboxController } from './select-tile-checkbox-controller';\n\n/*\n The Select Tile component is a short block of content inside a visual\n * container that can be used in place of checkboxes, radio buttons, and\n * links. It allows you to add more descriptive and visually appealing\n * content for these actions while letting you compare different choices\n * either side-by-side or on top of each other.\n \n Typically you could use the \"header\" slot for an icon, and the \"title\"\n * and \"body\" slots for a content title and body text below it.\n \n The css parts are shown here wrapped in ::part() because otherwise Storybook\n * won't render them and the slots if they have the same name.\n * See https://developer.mozilla.org/en-US/docs/Web/CSS/::part\n \n @fires change\n * @fires input\n * @slot \"\" - The default slot goes into the center, main part of the Select Tile.\n * Consider using title and body instead.\n * @slot \"header\" - The top or left part of the Select Tile\n * @slot footer - The bottom or right part of the Select Tile\n * @slot title - The title part of the Select Tile, use with body slot and\n * instead of the default slot for appropriate typography.\n * @slot \"body\" - The \"body\" part of the Select Tile, which appears under\n * the title slot and receives apporpriate typography.\n \n @csspart ::part(select-tile) - The main wrapping element\n * @csspart ::part(header) - The header element wrapping the left or top element\n * @csspart ::part(footer) - The footer element wrapping the right element\n * @csspart ::part(body) - The main body of the select-tile, wrapper around the default slot\n * @csspart ::part(body-title) - The element that wraps the \"title\" slot\n * @csspart ::part(body-body) - The element that wraps the \"body\" slot\n \n/\nexport class Cre8SelectTile extends Cre8FormElement {\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n private _controller: SelectTileRadioController \| SelectTileCheckboxController \| undefined = undefined;\n\n /*\n Should this Select Tile behave as a radio button or a checkbox?\n /\n @property({ reflect: true })\n type: 'radio' \| 'checkbox' = 'radio';\n\n /\n Get the radio field item input\n /\n @query('input')\n field!: HTMLInputElement;\n\n static styles = [styles];\n\n /\n Style variants\n * - bare renders a select-tile without a border and without padding around the content\n * - horizontal renders a select-tile with header, body, footer oriented in a row rather than a column\n * - horizontal-bare renders a select-tile with header, body, footer\n * oriented in a row rather than a column without a border and without padding around the content\n /\n @property({ reflect: true })\n variant?: 'bare' \| 'horizontal' \| 'horizontal-bare';\n\n /\n Which breakpoint, if any, to switch to verticial.\n * Only useful for horizontal variants. Defaults to 'sm'.\n /\n @property({ reflect: true })\n variantBreakToVertical: 'sm' \| 'sm-2' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'none' = 'sm';\n\n /\n Where does the checkmark or radio button go?\n * It disappears on 'none'. Only top-right is supported for vertical variants.\n /\n @property({ reflect: true })\n checkPosition: 'left' \| 'right' \| 'top-right' \| 'none' = 'right';\n\n /\n In radio mode, whether to use the circle with the dot, or the rounded check.\n /\n @property({ reflect: true })\n radioVariant: 'dot' \| 'check' = 'dot';\n\n /\n Align variants\n * <cre8-text-passage size=\"sm\">\n * <ul>\n * <li>center renders a select-tile that has center aligned content/text</li>\n * </ul>\n * </cre8-text-passage>\n /\n @property({ reflect: true })\n align?: 'center';\n\n /\n Error State\n /\n @property({ type: Boolean, reflect: true })\n isError?: boolean;\n\n /\n Disabled State\n /\n @property({ type: Boolean, reflect: true })\n disabled?: boolean;\n\n /\n Required attribute\n /\n @property({ type: Boolean, reflect: true })\n required?: boolean;\n\n /\n Checked State.\n * Note: the `checked` attribute sets the `defaultChecked` property, as well\n * as sets the initial value for the `checked` property.\n /\n @property({ type: Boolean, reflect: true })\n checked?: boolean;\n\n /\n The default checked state when the element first renders or is reset.\n \n Note: the attribute is named `checked` and the property is\n * named `defaultChecked`. This is the same as a regular radio button.\n /\n @property({ attribute: 'checked', type: Boolean, reflect: true })\n defaultChecked: boolean;\n\n /\n Select Tile FieldId\n /\n @property()\n fieldId?: string;\n\n /\n Radio item fieldnote aria describe by\n /\n @property()\n private ariaDescribedBy?: string;\n\n /\n Radio item fieldnote isSuccess\n /\n @property({ type: Boolean, reflect: true })\n isSuccess?: boolean;\n\n /\n The form associated with this field\n \n TOOD: maybe this goes on Cre8FormElement\n /\n get form() {\n return this._internals.form;\n }\n\n /\n Connected callback lifecycle\n * 1) Auto-generate the fieldId if a user doesn't provided so that the form field is accessible\n * 2) Initialize the correct controller\n /\n connectedCallback() {\n super.connectedCallback();\n this.fieldId = this.fieldId \|\| nanoid(); / 1 /\n this._controller = this.type === 'radio'\n ? new SelectTileRadioController(this)\n : new SelectTileCheckboxController(this);\n if (this.disabled) {\n this._internals.ariaDisabled = 'true';\n }\n }\n\n /\n Reset form callback\n * 1) Remove the checked state from all radio elements\n * 2) Set the checked state to the initial checked state\n * 3) Set the radio field input checked attribute to the initial checked state\n /\n formResetCallback(): void {\n this.checked = this.defaultChecked;\n this.field.checked = this.defaultChecked;\n }\n\n\n /\n Whenever the \"checked\" property changes, update our form value, aria-checked,\n * and the checked property of `this.field`.\n \n /\n updated(changedProps: PropertyValues) {\n super.updated(changedProps);\n\n if (changedProps.has('checked')) {\n // this.field.checked = this.checked;\n // this.field.checked ? this._internals.setFormValue(this.value \|\| 'on') : this._internals.setFormValue(null);\n this.setAttribute('aria-checked', this.checked ? 'true' : 'false');\n }\n if (changedProps.has('type')) {\n this._controller.hostDisconnected();\n this._controller = this.type === 'radio'\n ? new SelectTileRadioController(this)\n : new SelectTileCheckboxController(this);\n }\n if (changedProps.has('disabled')) {\n if (this.disabled) {\n this._internals.ariaDisabled = 'true';\n } else {\n this._internals.ariaDisabled = 'false';\n }\n }\n }\n\n\n renderInput() {\n return html`\n <input\n class=\"cre8-c-select-tile__input\"\n type=${this.type}\n id=${this.fieldId}\n aria-describedby=\"${ifDefined(this.ariaDescribedBy)}\"\n ?required=${this.required}\n name=${this.name}\n .value=${this.value}\n ?disabled=\"${this.disabled}\"\n .checked=\"${this.checked}\"\n />\n `;\n }\n\n renderCheckboxIcon() {\n if (this.type === 'checkbox') {\n return html`\n <cre8-icon svg=\"${svgCheck}\" class=\"cre8-c-select-tile__icon\" aria-hidden=\"${!this.checked}\"></cre8-icon>\n `;\n }\n return null;\n }\n\n render() {\n const componentClassNames = this.componentClassNames('cre8-c-select-tile', {\n 'cre8-c-select-tile--bare': this.variant === 'bare',\n 'cre8-c-select-tile--horizontal': this.variant === 'horizontal',\n 'cre8-c-select-tile--horizontal-bare': this.variant === 'horizontal-bare',\n 'cre8-c-select-tile--vertical-at-sm': this.variantBreakToVertical === 'sm',\n 'cre8-c-select-tile--vertical-at-sm-2': this.variantBreakToVertical === 'sm-2',\n 'cre8-c-select-tile--vertical-at-md': this.variantBreakToVertical === 'md',\n 'cre8-c-select-tile--vertical-at-lg': this.variantBreakToVertical === 'lg',\n 'cre8-c-select-tile--vertical-at-xl': this.variantBreakToVertical === 'xl',\n 'cre8-c-select-tile--vertical-at-xxl': this.variantBreakToVertical === 'xxl',\n 'cre8-c-select-tile--align-center': this.align === 'center',\n 'cre8-c-select-tile--error': this.isError,\n 'cre8-c-select-tile--success': this.isSuccess,\n 'cre8-c-select-tile--disabled': this.disabled,\n });\n\n const checkboxClassNames = this.componentClassNames(\n this.type === 'radio' ? 'cre8-c-select-tile__custom-radio' : 'cre8-c-select-tile__custom-checkbox',\n {\n 'cre8-c-select-tile__custom-radio-top-right': !this.variant\n \|\| this.variant === 'bare' \|\| this.checkPosition === 'top-right',\n 'cre8-c-select-tile__custom-radio-left': this.checkPosition === 'left',\n 'cre8-c-select-tile__custom-radio-none': this.checkPosition === 'none',\n 'cre8-c-select-tile__custom-radio-check': this.radioVariant === 'check',\n }\n );\n\n const labelTabIndex = this.disabled ? undefined : '0';\n\n return html`\n <div class=\"cre8-c-select-tile__container\" part=\"container\">\n ${this.renderInput()}\n <label class=\"${componentClassNames}\" part=\"select-tile\" for=${this.fieldId} tabindex=${labelTabIndex}>\n ${this.slotNotEmpty('header') && html`\n <div class=\"cre8-c-select-tile__header\" part=\"header\">\n <slot name=\"header\"></slot>\n </div>\n `}\n <div part=\"body\" class=\"cre8-c-select-tile__body\">\n <slot></slot>\n ${this.slotNotEmpty('title') && html`\n <div part=\"body-title\" class=\"cre8-c-select-tile__body_title\">\n <slot name=\"title\"></slot>\n </div>\n `}\n ${this.slotNotEmpty('body') && html`\n <div part=\"body-body\" class=\"cre8-c-select-tile__body_body\">\n <slot name=\"body\"></slot>\n </div>\n `}\n </div>\n <div part=\"footer\" class=\"cre8-c-select-tile__footer\">\n <slot name=\"footer\"></slot>\n </div>\n <div class=\"${checkboxClassNames}\">\n ${this.renderCheckboxIcon()}\n <div class=\"cre8-c-select-tile__inner-circle\">\n <cre8-icon svg=\"${svgCheck}\" class=\"cre8-c-select-tile__icon\"></cre8-icon>\n </div>\n </div>\n </label>\n </div>`;\n }\n}\n\nif (customElements.get('cre8-select-tile') === undefined) {\n customElements.define('cre8-select-tile', Cre8SelectTile);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cre8-select-tile': Cre8SelectTile;\n }\n}\n\nexport default Cre8SelectTile;\n"]}