{"version":3,"file":"CpSkeleton.mztK6Wye.js","sources":["../../../../components/cp/skeleton/CpSkeleton/CpSkeleton.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import {SkeletonBlock} from '@skeleton-elements/vue';\n  import useCpBem from '~/composables/useCpBem';\n  import '@skeleton-elements/vue/skeleton-elements.css';\n\n  withDefaults(defineProps<{\n    kind: 'article-card-vertical' | 'brands' | 'card-catalog-simple' | 'banner' | 'button' | 'card-catalog' | 'section' | 'categories' | 'order' | 'recent-order' | 'title' |\n    'card-navigate-to' | 'simple-block' | 'article-card-vertical-rai' | 'gallery' | 'my-reviews' | 'product-details-status-card' | 'product-row-standard' | 'block'\n    effect: 'fade' | 'pulse' | 'none',\n    withoutBorder?: boolean,\n    // These props are string cause percentages are valid\n    height?: string\n    width?: string\n    applyAspectRatio?: boolean\n    af?: boolean\n  }>(), {\n    withoutBorder: false,\n    effect: 'none',\n    af: false,\n  });\n\n  const {bm, e, em} = useCpBem('cp-skeleton');\n\n</script>\n\n<template>\n    <div :class=\"bm({ withBorder: !withoutBorder, af })\">\n        <div v-if=\"kind === 'article-card-vertical'\" :class=\"e('article-card-vertical')\">\n            <div :class=\"e('pill-container')\">\n                <skeleton-block :effect=\"effect\" width=\"47px\" height=\"20px\" :class=\"e('pill')\" />\n            </div>\n            <skeleton-block :effect=\"effect\" width=\"140px\" height=\"140px\" />\n            <div :class=\"e('elements')\">\n                <skeleton-block :effect=\"effect\" width=\"80px\" />\n                <skeleton-block :effect=\"effect\" width=\"100%\" height=\"40px\" />\n            </div>\n            <div :class=\"em('elements', { 'right': true })\">\n                <skeleton-block :effect=\"effect\" width=\"47px\" />\n                <skeleton-block :effect=\"effect\" width=\"65px\" />\n            </div>\n        </div>\n        <div v-if=\"kind === 'article-card-vertical-rai'\" :class=\"e('article-card-vertical-rai')\">\n            <div :class=\"e('pill-container')\">\n                <skeleton-block :effect=\"effect\" width=\"47px\" height=\"20px\" :class=\"e('pill')\" />\n            </div>\n            <div :class=\"e('center-content')\">\n                <skeleton-block :effect=\"effect\" width=\"100px\" height=\"100px\" />\n            </div>\n            <div :class=\"e('elements')\">\n                <skeleton-block :effect=\"effect\" width=\"80px\" />\n                <skeleton-block :effect=\"effect\" width=\"120px\" height=\"30px\" />\n            </div>\n            <div :class=\"em('elements', { 'right': true })\">\n                <skeleton-block :effect=\"effect\" width=\"47px\" />\n                <skeleton-block :effect=\"effect\" width=\"65px\" />\n            </div>\n        </div>\n        <div v-if=\"kind === 'card-catalog-simple'\" :class=\"e('card-catalog-simple')\">\n            <div>\n                <skeleton-block :effect=\"effect\" width=\"120px\" height=\"120px\" />\n            </div>\n            <div :class=\"e('info-container')\">\n                <div :class=\"e('elements')\">\n                    <skeleton-block :effect=\"effect\" width=\"100%\" />\n                    <skeleton-block :effect=\"effect\" width=\"100%\" />\n                </div>\n                <div :class=\"em('elements', { 'right': true })\">\n                    <skeleton-block :effect=\"effect\" width=\"71px\" />\n                </div>\n            </div>\n        </div>\n        <skeleton-block v-if=\"kind === 'banner'\"\n            :effect=\"effect\"\n            width=\"100%\"\n            height=\"100%\"\n            :class=\"applyAspectRatio ? e('banner') : ''\"\n        />\n        <div v-if=\"kind === 'button'\">\n            <skeleton-block :effect=\"effect\" width=\"100%\" height=\"48px\" />\n        </div>\n        <div v-if=\"kind === 'card-catalog'\" :class=\"em('card-catalog', {af})\">\n            <div>\n                <skeleton-block :effect=\"effect\" width=\"120px\" height=\"120px\" :class=\"em('skeleton-border', {af})\" />\n            </div>\n            <div :class=\"e('description')\">\n                <div>\n                    <skeleton-block :effect=\"effect\" height=\"16px\" :class=\"em('skeleton-border-top', {af})\" />\n                    <skeleton-block :effect=\"effect\" height=\"16px\" width=\"55%\" :class=\"em('skeleton-border-bottom', {af})\" />\n                </div>\n                <skeleton-block :effect=\"effect\" height=\"20px\" width=\"40%\" :class=\"em('skeleton-border', {af})\" />\n                <div>\n                    <skeleton-block :effect=\"effect\" height=\"16px\" :class=\"em('skeleton-border-top', {af})\" />\n                    <skeleton-block :effect=\"effect\" height=\"16px\" width=\"40%\" :class=\"e('skeleton-border-bottom', {af})\" />\n                </div>\n                <div :class=\"e('price')\">\n                    <skeleton-block :effect=\"effect\" height=\"24px\" :class=\"em('skeleton-border', {af})\" />\n                </div>\n            </div>\n        </div>\n        <div v-if=\"kind === 'section'\" :class=\"e('section')\">\n            <skeleton-block :effect=\"effect\" width=\"32px\" height=\"32px\" />\n            <skeleton-block :effect=\"effect\" width=\"100%\" />\n        </div>\n        <div v-if=\"kind === 'categories'\" :class=\"e('categories')\">\n            <skeleton-block :effect=\"effect\" width=\"90%\" height=\"40px\" />\n            <skeleton-block :effect=\"effect\" width=\"100%\" />\n        </div>\n        <div v-if=\"kind === 'order'\">\n            <div :class=\"e('order-section')\">\n                <div :class=\"e('elements')\">\n                    <skeleton-block :effect=\"effect\" width=\"100%\" />\n                    <skeleton-block :effect=\"effect\" width=\"100%\" />\n                </div>\n                <div>\n                    <skeleton-block :effect=\"effect\" width=\"20px\" height=\"20px\" />\n                </div>\n            </div>\n            <div :class=\"e('order-section')\">\n                <skeleton-block :effect=\"effect\" width=\"80px\" height=\"80px\" :class=\"e('skeleton-border')\" />\n                <div :class=\"e('elements')\">\n                    <skeleton-block :effect=\"effect\" width=\"100%\" />\n                    <skeleton-block :effect=\"effect\" width=\"100%\" />\n                </div>\n            </div>\n            <div :class=\"e('skeleton-padding')\">\n                <skeleton-block :effect=\"effect\" width=\"100%\" />\n            </div>\n        </div>\n        <div v-if=\"kind === 'recent-order'\">\n            <div :class=\"e('card-container')\">\n                <div>\n                    <skeleton-block :effect=\"effect\" height=\"16px\" width=\"65%\" :class=\"e('skeleton-border-top')\" />\n                    <skeleton-block :effect=\"effect\" height=\"16px\" width=\"75%\" :class=\"e('skeleton-border-bottom')\" />\n                </div>\n                <div :class=\"e('items-center')\">\n                    <skeleton-block :effect=\"effect\" width=\"48px\" height=\"48px\" :class=\"e('skeleton-border')\" />\n                    <skeleton-block :effect=\"effect\" width=\"48px\" height=\"48px\" :class=\"e('skeleton-border')\" />\n                    <skeleton-block :effect=\"effect\" width=\"48px\" height=\"48px\" :class=\"e('skeleton-border')\" />\n                </div>\n                <div>\n                    <skeleton-block :effect=\"effect\" width=\"100%\" height=\"48px\" :class=\"e('skeleton-border')\" />\n                </div>\n            </div>\n        </div>\n        <div v-if=\"kind === 'title'\" :class=\"e('skeleton-title-container')\">\n            <skeleton-block effect=\"fade\" width=\"55%\" height=\"24px\" :class=\"e('skeleton-title')\" />\n        </div>\n        <div v-if=\"kind === 'card-navigate-to'\" :class=\"e('card-navigate-to')\">\n            <skeleton-block effect=\"fade\" width=\"80px\" height=\"32px\" :class=\"e('skeleton-title')\" />\n            <div :class=\"e('skeleton-row-style')\">\n                <skeleton-block effect=\"fade\" width=\"48px\" height=\"16px\" :class=\"e('skeleton-title')\" />\n                <skeleton-block effect=\"fade\" width=\"20px\" height=\"16px\" :class=\"e('skeleton-title')\" />\n            </div>\n        </div>\n        <div v-if=\"kind === 'brands'\">\n            <div :class=\"e('skeleton-title-container')\">\n                <skeleton-block effect=\"fade\" width=\"18px\" height=\"24px\" :class=\"e('skeleton-title')\" />\n            </div>\n            <div style=\"display: flex; flex-direction: row; gap: 16px; flex-wrap: wrap; justify-content: center; padding: 16px\">\n                <skeleton-block\n                    v-for=\"i in 24\"\n                    :key=\"i\"\n                    effect=\"fade\"\n                    width=\"calc((100% - 32px) / 3)\"\n                    height=\"74px\"\n                    :class=\"e('skeleton-title')\"\n                />\n            </div>\n        </div>\n        <div v-if=\"kind === 'my-reviews'\">\n            <div :class=\"e('skeleton-my-reviews')\">\n                <div :class=\"e('skeleton-search')\">\n                    <skeleton-block effect=\"fade\" height=\"34px\" :class=\"e('skeleton-border')\" />\n                    <skeleton-block effect=\"fade\" width=\"160px\" height=\"16px\" :class=\"e('skeleton-border')\" />\n                </div>\n                <skeleton-block effect=\"fade\" width=\"80%\" height=\"18px\" :class=\"e('skeleton-border')\" />\n                <div v-for=\"n in 3\" :key=\"n\" :class=\"e('border')\">\n                    <div :class=\"e('order-section')\">\n                        <div :class=\"e('elements')\">\n                            <skeleton-block :effect=\"effect\" width=\"100%\" />\n                            <skeleton-block :effect=\"effect\" width=\"100%\" />\n                        </div>\n                        <div>\n                            <skeleton-block :effect=\"effect\" width=\"20px\" height=\"20px\" />\n                        </div>\n                    </div>\n                    <div :class=\"e('order-section')\">\n                        <skeleton-block :effect=\"effect\" width=\"80px\" height=\"80px\" :class=\"e('skeleton-border')\" />\n                        <div :class=\"e('elements')\">\n                            <skeleton-block :effect=\"effect\" width=\"100%\" />\n                            <skeleton-block :effect=\"effect\" width=\"100%\" />\n                        </div>\n                    </div>\n                    <div :class=\"e('skeleton-padding')\">\n                        <skeleton-block :effect=\"effect\" width=\"100%\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <skeleton-block v-if=\"kind === 'simple-block'\" :effect=\"effect\" :width=\"width\" :height=\"height\" />\n        <div v-if=\"kind === 'gallery'\" style=\"height: 100%; padding: 16px\">\n            <div style=\"display:flex; flex-direction: column; gap: 16px; width: 100%; height: 100%;\">\n                <div style=\"display:flex; flex-direction: row; gap: 16px; width: 100%; flex: 1\">\n                    <skeleton-block :effect=\"effect\" width=\"100%\" height=\"100%\" />\n                </div>\n                <div style=\"display:flex; flex-direction: row; gap: 16px; width: 100%\">\n                    <skeleton-block :effect=\"effect\" width=\"33%\" style=\"padding-top: 33%;\" />\n                    <skeleton-block :effect=\"effect\" width=\"33%\" style=\"padding-top: 33%;\" />\n                    <skeleton-block :effect=\"effect\" width=\"33%\" style=\"padding-top: 33%;\" />\n                </div>\n            </div>\n        </div>\n        <div v-if=\"kind === 'product-details-status-card'\" :class=\"e('details-status-card')\">\n            <skeleton-block :effect=\"effect\" width=\"33%\" />\n            <skeleton-block :effect=\"effect\" width=\"70%\" />\n            <skeleton-block :effect=\"effect\" width=\"50%\" />\n            <div :class=\"e('details-status-card-date')\">\n                <skeleton-block :effect=\"effect\" width=\"20%\" />\n                <skeleton-block :effect=\"effect\" width=\"20%\" />\n            </div>\n        </div>\n        <div v-if=\"kind === 'product-row-standard'\" :class=\"e('product-row-standard')\">            \n                <skeleton-block :effect=\"effect\" width=\"80px\" height=\"70px\" />\n                <div :class=\"e('product-row-standard-text')\">\n                    <skeleton-block :effect=\"effect\" width=\"100%\" height=\"42px\" />\n                    <skeleton-block :effect=\"effect\" width=\"20%\" height=\"12px\" />\n                </div>\n            \n        </div>\n\n    </div>\n</template>\n\n<style scoped lang=\"scss\">\n  .cp-skeleton {\n\n    &--with-border {\n      border: $cp-border-standard;\n      border-radius: $cp-border-radius;\n    }\n\n    &__article-card-vertical {\n      display: flex;\n      flex-direction: column;\n      gap: $cp-gutter-small;\n      justify-content: center;\n      padding: $cp-gutter-large $cp-gutter-small $cp-gutter-small $cp-gutter-small;\n      align-items: center;\n      position: relative;\n      // min-width: 172px;\n    }\n\n    &__article-card-vertical-rai {\n      display: flex;\n      flex-direction: column;\n      gap: $cp-gutter-small;\n      justify-content: center;\n      padding: $cp-gutter-large $cp-gutter-small $cp-gutter-small $cp-gutter-small;\n      align-items: center;\n      position: relative;\n      height: 100%;\n    }\n\n    &__skeleton-title-container {\n      padding: 16px;\n      border-top: $cp-border-standard;\n      border-bottom: $cp-border-standard;\n    }\n\n    &__skeleton-title {\n      border-radius: $cp-gutter-small;\n    }\n\n    &__elements {\n      display: flex;\n      flex-direction: column;\n      gap: $cp-gutter-small;\n      width: 100%;\n      &--right {\n        align-items: flex-end;\n      }\n    }\n\n    &__card-catalog-simple {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      padding: $cp-gutter-small;\n      gap: $cp-gutter-small;\n    }\n\n    &__info-container {\n      width: 100%;\n      flex-direction: column;\n      display: flex;\n      gap: $cp-gutter-small;\n      height: 120px;\n      justify-content: space-between;\n    }\n\n    &:deep(.skeleton-block) {\n      border-radius: $cp-border-radius;\n      --skeleton-color: var(--color-neutral-extra-light);\n    }\n\n    &--af:deep(.skeleton-block) {\n      --skeleton-color: var(--color-neutral);\n    }\n\n    &:deep(.skeleton-avatar) {\n      --skeleton-color: var(--color-neutral-extra-light);\n    }\n\n    &__card-catalog {\n      display: flex;\n      align-items: center;\n      border: $cp-border-standard;\n      border-radius: $cp-border-radius;\n      gap: $cp-gutter-xsmall;\n      padding: $cp-gutter;\n\n      &--af {\n        background-color: var(--color-neutral-dark);\n        border-color: var(--color-neutral);\n      }\n    }\n\n    &__skeleton-border {\n      border-radius: $cp-gutter-xsmall;\n\n      &--af {\n        --skeleton-color: var(--color-neutral);\n      }\n    }\n\n    &__skeleton-border-top {\n      border-radius: $cp-gutter-xsmall $cp-gutter-xsmall $cp-gutter-xsmall 0;\n    }\n\n    &__skeleton-border-bottom {\n      border-radius: 0 0 $cp-gutter-xsmall $cp-gutter-xsmall;\n    }\n\n    &__description {\n      display: flex;\n      flex-direction: column;\n      gap: $cp-gutter-small;\n      width: 100%;\n      > * {\n        display: flex;\n      flex-direction: column;\n      gap: $cp-gutter-xsmall;\n      }\n    }\n\n    &__card-container {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      > * {\n        display: flex;\n        flex-direction: column;\n        padding: $cp-gutter;\n        gap: $cp-gutter-xsmall;\n      }\n    }\n\n    &__items-center {\n      display: flex;\n      flex-direction: row;\n      align-self: center;\n      justify-content: center;\n      width: 100%;\n      border-top: $cp-border-standard;\n      border-bottom: $cp-border-standard;\n    }\n\n    &__center-content {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      height: 100%;\n    }\n\n    &__price {\n      align-self: flex-end;\n      width: 60%;\n    }\n\n    &__pill-container {\n      display: flex;\n      position: absolute;\n      top: 0;\n      left: 0;\n      margin-top: -1px;\n      margin-left: -1px;\n    }\n\n    &__pill {\n      border-radius: $cp-border-radius 0 !important;\n    }\n\n    &__section {\n      display: flex;\n      gap: $cp-gutter-small;\n      align-items: center;\n      padding: $cp-gutter-xsmall;\n    }\n\n    &__categories {\n      display: flex;\n      padding: $cp-gutter-small;\n      gap: $cp-gutter-small;\n      flex-direction: column;\n      align-items: center;\n    }\n\n    &__order-section {\n      display: flex;\n      flex-direction: row;\n      padding: $cp-gutter;\n      gap: $cp-gutter-small;\n      border-bottom: $cp-border-standard;\n      > * {\n        display: flex;\n        align-items: center;\n      }\n    }\n\n    &__skeleton-padding {\n      padding: $cp-gutter;\n    }\n\n    &__card-navigate-to {\n      border: $cp-border-standard;\n      border-radius: $cp-gutter-small;\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      padding: $cp-gutter;\n      justify-content: space-between;\n      gap: $cp-gutter-small;\n    }\n\n    &__skeleton-row-style {\n      display: flex;\n      flex-direction: row;\n      gap: $cp-gutter-small\n    }\n\n    &__banner {\n      width: 100%;\n      aspect-ratio: 413 / 163;\n    }\n\n    &__skeleton-my-reviews {\n      display: flex;\n      padding: $cp-gutter;\n      flex-direction: column;\n      gap: $cp-gutter;\n    }\n\n    &__skeleton-search {\n      display: flex;\n      flex-direction: column;\n      gap: $cp-gutter-xsmall;\n    }\n\n    &__border {\n      border: $cp-border-standard;\n      border-radius: $cp-border-radius;\n    }\n    &__product-row-standard {\n      display: flex;\n      flex-direction: row;\n      \n      gap: $cp-gutter-small;\n      padding: $cp-gutter;\n    }\n    &__product-row-standard-text {\n      width: 100%;\n      display: flex;\n      flex-direction: column;\n      gap: $cp-gutter-xsmall;\n      justify-content: space-between;\n    }\n    &__block-simple {\n     width: 100%;\n     min-height: 12px;\n    }\n}\n</style>\n"],"names":["bm","e","em","useCpBem"],"mappings":"stCAqBE,KAAM,CAAC,GAAAA,EAAI,EAAAC,EAAG,GAAAC,CAAE,EAAIC,EAAS,aAAa"}