JezK

Edit File: sc-line-item.entry.js.map

{"file":"sc-line-item.entry.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,+3EAA+3E,CAAC;AACt5E,yBAAe,aAAa;;MCyBf,UAAU;;;;;;;;;;;;IAgBrB,iBAAiB;QACf,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QACvE,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QACvE,IAAI,CAAC,kBAAkB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;QACnF,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QACvE,IAAI,CAAC,uBAAuB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,4BAA4B,CAAC,CAAC;QAC9F,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;KAC9E;IAED,MAAM;QACJ,QACE,4DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI;gBACZ,iBAAiB,EAAE,IAAI,CAAC,YAAY;gBACpC,iBAAiB,EAAE,IAAI,CAAC,YAAY;gBACpC,uBAAuB,EAAE,IAAI,CAAC,kBAAkB;gBAChD,iBAAiB,EAAE,IAAI,CAAC,YAAY;gBACpC,6BAA6B,EAAE,IAAI,CAAC,uBAAuB;gBAC3D,0BAA0B,EAAE,IAAI,CAAC,eAAe;gBAChD,cAAc,EAAE,KAAK,EAAE;aACxB,IAED,4DAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,OAAO,IACnC,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,EAEN,4DAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,IACjC,4DAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,OAAO,IACnC,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,EACN,4DAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,aAAa,IAC/C,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,CACF,EAEN,4DAAK,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,OAAO,IACjC,4DAAK,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAC,UAAU,IAC/C,6DAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,EAEN,4DAAK,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,YAAY,IAC7C,4DAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,OAAO,IACnC,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,EACN,4DAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,mBAAmB,IAC3D,6DAAM,IAAI,EAAC,mBAAmB,GAAQ,CAClC,CACF,CACF,CACF,EACN;KACH;;;;;;;","names":[],"sources":["src/components/ui/line-item/sc-line-item.scss?tag=sc-line-item&encapsulation=shadow","src/components/ui/line-item/sc-line-item.tsx"],"sourcesContent":[":host {\n display: block;\n\n --mobile-size: 380px;\n --price-size: var(--sc-font-size-medium);\n --line-item-grid-template-columns: auto 1fr 1fr;\n line-height: var(--sc-line-height-dense);\n}\n\n.item {\n display: grid;\n align-items: center;\n grid-template-columns: var(--line-item-grid-template-columns);\n}\n\n@media screen and (min-width: var(--mobile-size)) {\n .item {\n flex-wrap: no-wrap;\n }\n}\n\n.item__title {\n color: var(--sc-line-item-title-color);\n}\n.item__price {\n color: var(--sc-input-label-color);\n}\n\n.item__title,\n.item__price {\n font-size: var(--sc-font-size-medium);\n font-weight: var(--sc-font-weight-semibold);\n}\n\n.item__description,\n.item__price-description {\n font-size: var(--sc-font-size-small);\n line-height: var(--sc-line-height-dense);\n color: var(--sc-input-label-color);\n}\n\n::slotted([slot='price-description']) {\n margin-top: var(--sc-line-item-text-margin, 5px);\n color: var(--sc-input-label-color);\n text-decoration: none;\n}\n\n.item__end {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n flex-wrap: wrap;\n align-self: flex-end;\n width: 100%;\n margin-top: 20px;\n}\n\n@media screen and (min-width: 280px) {\n .item__end {\n width: auto;\n text-align: right;\n margin-left: 20px;\n margin-top: 0;\n }\n\n .item--is-rtl .item__end {\n margin-left: 0;\n margin-right: 20px;\n }\n .item__price-text {\n text-align: right;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n }\n}\n\n.item__price-currency {\n font-size: var(--sc-font-size-small);\n color: var(--sc-input-label-color);\n text-transform: var(--sc-currency-transform, uppercase);\n margin-right: 8px;\n}\n\n.item__text {\n flex: 1;\n}\n\n.item__price-description {\n display: -webkit-box;\n}\n\n::slotted([slot='image']) {\n margin-right: 20px;\n width: 50px;\n height: 50px;\n object-fit: cover;\n border-radius: 4px;\n border: 1px solid var(--sc-color-gray-200);\n display: block;\n box-shadow: var(--sc-input-box-shadow);\n}\n\n::slotted([slot='price-description']) {\n display: inline-block;\n width: 100%;\n line-height: 1;\n}\n\n.item__price-layout {\n font-size: var(--sc-font-size-x-large);\n font-weight: var(--sc-font-weight-semibold);\n display: flex;\n align-items: center;\n}\n\n.item__price {\n font-size: var(--price-size);\n}\n\n.item_currency {\n font-weight: var(--sc-font-weight-normal);\n font-size: var(--sc-font-size-xx-small);\n color: var(--sc-input-label-color);\n margin-right: var(--sc-spacing-small);\n text-transform: var(--sc-currency-text-transform, uppercase);\n}\n\n.item--is-rtl {\n &.item__description,\n &.item__price-description {\n text-align: right;\n }\n\n .item__text {\n text-align: right;\n }\n\n @media screen and (min-width: 280px) {\n .item__end {\n width: auto;\n text-align: left;\n margin-left: 0;\n margin-top: 0;\n }\n\n .item__price-text {\n text-align: left;\n }\n }\n}\n","import { Component, Prop, h, Element, State } from '@stencil/core';\nimport { isRtl } from '../../../functions/page-align';\n\n/**\n * @slot image - Line item image\n * @slot title - Line item title.\n * @slot description - Line item description (below the title)\n * @slot currency - Used for the 3 character currency code.\n * @slot price - Price amount, including currency sign.\n * @slot price-description - Description for the price (i.e. monthly)\n *\n * @part base - The elements base wrapper.\n * @part image - The image wrapper.\n * @part text - The text.\n * @part title - The title.\n * @part description - Line item description (below the title)\n * @part currency - Used for the 3 character currency code.\n * @part price - Price amount, including currency sign.\n * @part price-text - The price text.\n * @part price-description - Description for the price (i.e. monthly)\n */\n@Component({\n tag: 'sc-line-item',\n styleUrl: 'sc-line-item.scss',\n shadow: true,\n})\nexport class ScLineItem {\n @Element() hostElement: HTMLScLineItemElement;\n\n /** Price of the item */\n @Prop() price: string;\n\n /** Currency symbol */\n @Prop() currency: string;\n\n @State() hasImageSlot: boolean;\n @State() hasTitleSlot: boolean;\n @State() hasDescriptionSlot: boolean;\n @State() hasPriceSlot: boolean;\n @State() hasPriceDescriptionSlot: boolean;\n @State() hasCurrencySlot: boolean;\n\n componentWillLoad() {\n this.hasImageSlot = !!this.hostElement.querySelector('[slot=\"image\"]');\n this.hasTitleSlot = !!this.hostElement.querySelector('[slot=\"title\"]');\n this.hasDescriptionSlot = !!this.hostElement.querySelector('[slot=\"description\"]');\n this.hasPriceSlot = !!this.hostElement.querySelector('[slot=\"price\"]');\n this.hasPriceDescriptionSlot = !!this.hostElement.querySelector('[slot=\"price-description\"]');\n this.hasCurrencySlot = !!this.hostElement.querySelector('[slot=\"currency\"]');\n }\n\n render() {\n return (\n <div\n part=\"base\"\n class={{\n 'item': true,\n 'item--has-image': this.hasImageSlot,\n 'item--has-title': this.hasTitleSlot,\n 'item--has-description': this.hasDescriptionSlot,\n 'item--has-price': this.hasPriceSlot,\n 'item--has-price-description': this.hasPriceDescriptionSlot,\n 'item--has-price-currency': this.hasCurrencySlot,\n 'item--is-rtl': isRtl(),\n }}\n >\n <div class=\"item__image\" part=\"image\">\n <slot name=\"image\"></slot>\n </div>\n\n <div class=\"item__text\" part=\"text\">\n <div class=\"item__title\" part=\"title\">\n <slot name=\"title\"></slot>\n </div>\n <div class=\"item__description\" part=\"description\">\n <slot name=\"description\"></slot>\n </div>\n </div>\n\n <div class=\"item__end\" part=\"price\">\n <div class=\"item__price-currency\" part=\"currency\">\n <slot name=\"currency\"></slot>\n </div>\n\n <div class=\"item__price-text\" part=\"price-text\">\n <div class=\"item__price\" part=\"price\">\n <slot name=\"price\"></slot>\n </div>\n <div class=\"item__price-description\" part=\"price-description\">\n <slot name=\"price-description\"></slot>\n </div>\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}