{"version":3,"file":"KeyValueCard-C8I_YyMO.js","sources":["../../src/components/elements/KeyValueCard.vue"],"sourcesContent":["<template>\n  <Card\n    :class=\"[\n      {\n        background: hasBackground,\n        inverted: inverted,\n        'align-right': alignRight,\n        'label-align-right': labelAlignRight,\n        'content-align-right': contentAlignRight,\n        small: isSmall,\n        large: isLarge,\n        inline: inline,\n        'full-width': fullWidth,\n        disabled: disabled,\n        wrap: wrap,\n        vertical: vertical,\n        'vertical-align': verticalAlign,\n        grid: grid,\n        outlined: outlined,\n        'label-align-top': labelAlignTop,\n        'label-align-baseline': labelAlignBaseline,\n      },\n    ]\"\n    :style=\"cardStyles\"\n    :aria-label=\"label || tag\"\n  >\n    <template #title v-if=\"label || tag\">\n      <span\n        class=\"label\"\n        :class=\"[{ 'p-text-nowrap': !labelWrap }, labelClass]\"\n        :style=\"{ color: labelColor }\"\n      >\n        {{ label }}\n      </span>\n      <Tag :value=\"tag\" severity=\"info\" class=\"p-tag-sm p-ml-2\" v-if=\"tag\" />\n    </template>\n    <template #content>\n      <span class=\"value\" :class=\"[{ 'p-text-nowrap': !contentWrap }, contentClass]\">\n        <slot v-if=\"!loading\" />\n      </span>\n      <Skeleton v-if=\"loading && !hasBackground\" height=\"1.15em\" :width=\"inline ? '10ch' : 'auto'\" />\n      <Skeleton\n        v-else-if=\"loading && hasBackground\"\n        class=\"foreground-skeleton\"\n        height=\"100%\"\n        borderRadius=\"var(--border-radius)\"\n      />\n    </template>\n  </Card>\n</template>\n\n<script>\nimport Card from \"primevue/card\";\nimport Skeleton from \"primevue/skeleton\";\nimport Tag from \"primevue/tag\";\n\nexport default {\n  name: \"KeyValueCard\",\n  components: {\n    Card,\n    Skeleton,\n    Tag,\n  },\n  props: {\n    label: String,\n    labelAlign: {\n      type: String,\n      default: \"left\",\n    },\n    labelWrap: {\n      type: Boolean,\n      default: false,\n    },\n    contentWrap: {\n      type: Boolean,\n      default: true,\n    },\n    labelColor: {\n      type: String,\n    },\n    labelClass: {\n      type: String,\n      default: \"\",\n    },\n    contentClass: {\n      type: String,\n      default: \"\",\n    },\n    background: {\n      type: [Boolean, String],\n      default: false,\n    },\n    inverted: Boolean,\n    align: {\n      type: String,\n      default: \"left\",\n    },\n    contentAlign: {\n      type: String,\n      default: \"right\",\n    },\n    size: {\n      type: String,\n      default: \"medium\",\n    },\n    inline: {\n      type: Boolean,\n      default: false,\n    },\n    fullWidth: {\n      type: Boolean,\n      default: false,\n    },\n    disabled: Boolean,\n    loading: Boolean,\n    wrap: Boolean,\n    vertical: Boolean,\n    tag: String,\n    verticalAlign: String,\n    grid: String,\n    outlined: Boolean,\n  },\n  computed: {\n    alignRight() {\n      return this.align === \"right\";\n    },\n    labelAlignRight() {\n      return this.labelAlign === \"right\";\n    },\n    labelAlignTop() {\n      return this.labelAlign === \"top\"\n    },\n    labelAlignBaseline() {\n      return this.labelAlign === \"baseline\"\n    },\n    contentAlignRight() {\n      return this.contentAlign === \"right\";\n    },\n    isSmall() {\n      return this.size === \"small\";\n    },\n    isLarge() {\n      return this.size === \"large\";\n    },\n    hasBackground() {\n      return !!this.background;\n    },\n    cardStyles() {\n      return {\n        ...(this.hasBackground && { background: this.background }),\n        ...(this.grid && { \"--grid-gutter\": this.grid }),\n      };\n    },\n  },\n};\n</script>\n\n<style scoped lang=\"scss\">\n.p-card {\n  display: inline-flex;\n  margin-right: 1em;\n  border: none;\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  &:last-child {\n    margin-right: 0 !important;\n  }\n\n  &.small {\n    font-size: 0.833334em;\n  }\n\n  &.large {\n    font-size: 1.3em;\n\n    :deep() {\n      .p-card-caption {\n        margin-bottom: 0.2em;\n      }\n    }\n  }\n \n  &.inline {\n    &.label-align-top {\n      :deep() {\n        .p-card-body {\n          align-items: flex-start;\n        }\n      }\n    }\n    &.label-align-baseline {\n      :deep() {\n        .p-card-body {\n          align-items: baseline;\n        }\n      }\n    }\n    :deep() {\n      .p-card-body {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n\n        .p-card-caption {\n          flex: 1;\n          margin: 0 0.5em 0 0;\n        }\n      }\n    }\n  }\n\n  &.full-width {\n    display: flex;\n    margin-right: 0 !important;\n    :deep() {\n      .p-card-body {\n        .p-card-caption {\n          flex: 0 1 30%;\n        }\n        .p-card-content {\n          flex: 1;\n        }\n      }\n    }\n  }\n\n  &.background {\n    background: var(--key-value-card-bg);\n    backdrop-filter: blur(12px);\n  }\n\n  &.inverted {\n    background: var(--primary-color);\n    color: white;\n\n    :deep() {\n      .p-card-title {\n        color: var(--white-gray);\n      }\n    }\n  }\n\n  &:not(.background):not(.inverted):not(.outlined) {\n    background: none;\n\n    &:not(.align-right) {\n      margin-right: 1.5em;\n    }\n\n    :deep() .p-card-body {\n      padding: 0;\n    }\n  }\n\n  &:not(.inverted) :deep() .p-card-title {\n    color: var(--key-value-card-title-color);\n  }\n\n  &.align-right {\n    margin-left: auto;\n    margin-right: 0;\n    text-align: right;\n  }\n\n  &.label-align-right {\n    :deep() .p-card-title {\n      justify-content: flex-end;\n      text-align: right;\n    }\n  }\n\n  &.content-align-right {\n    :deep() .p-card-content {\n      justify-content: flex-end;\n      text-align: right;\n    }\n  }\n\n  &.wrap {\n    :deep() {\n      .p-card-content {\n        white-space: initial;\n\n        .party {\n          align-items: baseline;\n        }\n      }\n    }\n  }\n\n  &.vertical {\n    :deep() {\n      .p-card-content {\n        flex-direction: column;\n        align-items: flex-start;\n      }\n    }\n    &.align-right,\n    &.content-align-right {\n      :deep() {\n        .p-card-content {\n          align-items: flex-end;\n\n          & > * {\n            margin-right: 0;\n          }\n        }\n      }\n    }\n  }\n\n  &.vertical-align {\n    :deep() {\n      .p-card-content {\n        align-items: baseline;\n      }\n    }\n  }\n\n  &.grid {\n    :deep() {\n      .p-card-body {\n        .p-card-caption {\n          flex: 0 0 var(--grid-gutter);\n          margin: 0;\n        }\n        .p-card-content {\n          width: calc(100% - var(--grid-gutter));\n        }\n      }\n    }\n  }\n\n  &.outlined {\n    background: transparent;\n    border: 1px solid var(--text-color-secondary);\n  }\n\n  :deep() {\n    .p-card-body {\n      flex: 1;\n      padding: 0.5em;\n    }\n    .p-card-caption {\n      margin-bottom: 0.4rem;\n    }\n    .p-card-title {\n      font-size: 1em;\n      font-weight: normal;\n      line-height: 1;\n    }\n    .p-card-content {\n      display: flex;\n      align-items: center;\n      font-size: 1em;\n      font-weight: 500;\n      padding: 0;\n      white-space: normal;\n\n      & > .value {\n        display: contents;\n\n        & > .avatar {\n          margin: -0.25em 0.5em -0.25em 0;\n        }\n      }\n\n      .p-skeleton {\n        font-size: 1em;\n        margin-top: 0.2em;\n        margin-bottom: 0.15em;\n      }\n    }\n  }\n}\n</style>\n"],"names":["_sfc_main","name","components","Card","Skeleton","Tag","props","label","String","labelAlign","type","default","labelWrap","Boolean","contentWrap","labelColor","labelClass","contentClass","background","inverted","align","contentAlign","size","inline","fullWidth","disabled","loading","wrap","vertical","tag","verticalAlign","grid","outlined","computed","alignRight","labelAlignRight","labelAlignTop","labelAlignBaseline","contentAlignRight","isSmall","isLarge","hasBackground","cardStyles","_createBlock","_component_Card","class","_normalizeClass","$options","$props","style","_normalizeStyle","_createSlots","content","_createElementVNode","_createCommentVNode","_renderSlot","_ctx","key","undefined","_component_Skeleton","height","width","borderRadius","_","fn","_withCtx","_component_Tag","value","severity"],"mappings":"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"}