{"version":3,"names":["scLineItemCss","ScLineItemStyle0","ScLineItem","componentWillLoad","this","hasImageSlot","hostElement","querySelector","hasTitleSlot","hasDescriptionSlot","hasPriceSlot","hasPriceDescriptionSlot","hasCurrencySlot","render","h","key","part","class","item","isRtl","name"],"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"],"mappings":"sFAAA,MAAMA,EAAgB,g4EACtB,MAAAC,EAAeD,E,MCyBFE,EAAU,M,kQAgBrB,iBAAAC,GACEC,KAAKC,eAAiBD,KAAKE,YAAYC,cAAc,kBACrDH,KAAKI,eAAiBJ,KAAKE,YAAYC,cAAc,kBACrDH,KAAKK,qBAAuBL,KAAKE,YAAYC,cAAc,wBAC3DH,KAAKM,eAAiBN,KAAKE,YAAYC,cAAc,kBACrDH,KAAKO,0BAA4BP,KAAKE,YAAYC,cAAc,8BAChEH,KAAKQ,kBAAoBR,KAAKE,YAAYC,cAAc,oB,CAG1D,MAAAM,GACE,OACEC,EAAA,OAAAC,IAAA,2CACEC,KAAK,OACLC,MAAO,CACLC,KAAQ,KACR,kBAAmBd,KAAKC,aACxB,kBAAmBD,KAAKI,aACxB,wBAAyBJ,KAAKK,mBAC9B,kBAAmBL,KAAKM,aACxB,8BAA+BN,KAAKO,wBACpC,2BAA4BP,KAAKQ,gBACjC,eAAgBO,MAGlBL,EAAA,OAAAC,IAAA,2CAAKE,MAAM,cAAcD,KAAK,SAC5BF,EAAA,QAAAC,IAAA,2CAAMK,KAAK,WAGbN,EAAA,OAAAC,IAAA,2CAAKE,MAAM,aAAaD,KAAK,QAC3BF,EAAA,OAAAC,IAAA,2CAAKE,MAAM,cAAcD,KAAK,SAC5BF,EAAA,QAAAC,IAAA,2CAAMK,KAAK,WAEbN,EAAA,OAAAC,IAAA,2CAAKE,MAAM,oBAAoBD,KAAK,eAClCF,EAAA,QAAAC,IAAA,2CAAMK,KAAK,kBAIfN,EAAA,OAAAC,IAAA,2CAAKE,MAAM,YAAYD,KAAK,SAC1BF,EAAA,OAAAC,IAAA,2CAAKE,MAAM,uBAAuBD,KAAK,YACrCF,EAAA,QAAAC,IAAA,2CAAMK,KAAK,cAGbN,EAAA,OAAAC,IAAA,2CAAKE,MAAM,mBAAmBD,KAAK,cACjCF,EAAA,OAAAC,IAAA,2CAAKE,MAAM,cAAcD,KAAK,SAC5BF,EAAA,QAAAC,IAAA,2CAAMK,KAAK,WAEbN,EAAA,OAAAC,IAAA,2CAAKE,MAAM,0BAA0BD,KAAK,qBACxCF,EAAA,QAAAC,IAAA,2CAAMK,KAAK,yB","ignoreList":[]}