@vcita/design-system 1.3.6 → 1.3.7

package/dist/@vcita/design-system.esm.js

@@ -16729,7 +16729,8 @@ var script$6 = {
   name: "VcGalleryItem",
   components: {
     VcIcon,
-    VcButton
+    VcButton,
+    VcLayout
   },
   props: {
     dataQa: {
@@ -16751,7 +16752,7 @@ var script$6 = {
     },
     campaignUrl: {
       type: String,
-      required: true
+      required: false
     },
     color: {
       type: String,
@@ -16779,6 +16780,14 @@ var script$6 = {
     ctaLabel: {
       type: String,
       default: 'click Here'
+    },
+    selected: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false
     }
   },
 
@@ -16844,7 +16853,9 @@ var __vue_render__$5 = function () {
       'vc-gallery-item--is-create': _vm.isCreate,
       'vc-gallery-item--is-pro': _vm.isPro,
       'vc-gallery-item--is-basic': _vm.isBasic,
-      'vc-gallery-item--mobile': _vm.isMobile
+      'vc-gallery-item--mobile': _vm.isMobile,
+      'vc-gallery-item--selected': _vm.selected,
+      'vc-gallery-item--disabled': _vm.disabled
     },
     attrs: {
       "data-qa": _vm.itemDataQa
@@ -16914,7 +16925,19 @@ var __vue_render__$5 = function () {
     attrs: {
       "size": "60"
     }
-  }, [_vm._v("$gallery_fallback")])], 1) : _vm._e(), _vm._v(" "), !_vm.isMobile || _vm.isCreate ? _c('div', {
+  }, [_vm._v("$gallery_fallback")]), _vm._v(" "), _vm.selected ? _c('VcLayout', {
+    staticClass: "selected-indicator",
+    attrs: {
+      "align-center": "",
+      "justify-center": ""
+    }
+  }, [_c('VcIcon', {
+    attrs: {
+      "color": "white",
+      "size": "16",
+      "data-qa": _vm.dataQa + "-selected-icon"
+    }
+  }, [_vm._v("$success")])], 1) : _vm._e()], 1) : _vm._e(), _vm._v(" "), !_vm.isMobile || _vm.isCreate ? _c('div', {
     staticClass: "buttons flex-column align-center justify-center"
   }, [_vm._t("actions", function () {
     return [_c('div', {
@@ -16924,7 +16947,8 @@ var __vue_render__$5 = function () {
       attrs: {
         "pill": "",
         "label": _vm.$dst('ds.gallery_item.select'),
-        "data-qa": _vm.dataQa + "-select-btn"
+        "data-qa": _vm.dataQa + "-select-btn",
+        "disabled": _vm.disabled
       },
       on: {
         "click": function ($event) {
@@ -16971,7 +16995,9 @@ var __vue_render__$5 = function () {
     attrs: {
       "data-qa": _vm.dataQa + "-label"
     }
-  }, [_vm._v("\n    " + _vm._s(_vm.bottomLabel) + "\n  ")])]);
+  }, [_vm._t("label", function () {
+    return [_vm._v("\n      " + _vm._s(_vm.bottomLabel) + "\n    ")];
+  })], 2)]);
 };
 
 var __vue_staticRenderFns__$5 = [];
@@ -16979,8 +17005,8 @@ var __vue_staticRenderFns__$5 = [];
 
 const __vue_inject_styles__$6 = function (inject) {
   if (!inject) return;
-  inject("data-v-242837a2_0", {
-    source: "[data-v-242837a2]:root{--primary-font-family:Montserrat;--font-size-xxx-small:9px;--font-size-xx-small:12px;--font-size-x-small:13px;--font-size-small:14px;--font-size-small2:15px;--font-size-small3:17px;--font-size-medium:18px;--font-size-medium0:20px;--font-size-medium1:22px;--font-size-medium2:24px;--font-size-large:28px;--font-weight-light:300;--font-weight-medium:400;--font-weight-medium2:500;--font-weight-large:600;--font-weight-large2:700;--font-weight-xl:800;--letter-spacing:0.003em;--size-value0:0px;--size-value1:4px;--size-value2:8px;--size-value3:12px;--size-value4:16px;--size-value5:20px;--size-value6:24px;--size-value7:28px;--size-value8:32px;--size-value9:36px;--size-value10:40px;--size-value11:44px;--size-value12:48px;--size-value13:52px;--size-value14:56px;--size-value15:60px;--size-value16:64px;--size-value17:68px;--size-value18:72px;--size-value19:76px;--size-value20:80px;--border-radius:6px;--border-radius-circle:50%;--border-frame:1px solid #e0e0e0;--border-focused-frame:1px solid var(--v-secondary-base);--shadow-focused-frame:0px 0px 0px 3px var(--v-secondary-lighten1);--centered-layout-min-width:708px;--centered-layout-max-width:1316px;--popover-width:360px;--popover-max-height:464px;--popover-border-radius:10px;--modal-desktop-offset:0;--modal-bg-color:#ffffff;--modal-box-shadow:0px 7px 8px -4px rgba(0, 0, 0, 0.2),2px 13px 19px 2px rgba(0, 0, 0, 0.14),0px 5px 24px rgba(0, 0, 0, 0.12);--modal-border-radius:10px;--modal-width-small:384px;--modal-width-medium:576px;--modal-width-large:816px;--modal-width-x-large:972px;--avatar-x-sm:24px;--avatar-sm:32px;--avatar-md:40px;--avatar-lg:48px;--dropzone-active-border-color:#1e93b7;--dropzone-active-second-border-color:#95cddb;--select-field-height:52px;--gray-darken-5:#212121;--gray-darken-4:#616161;--gray-darken-3:#757575;--gray-darken-2:#999999;--gray-darken-1:#b3b3b3;--gray:#cccccc;--gray-lighten-1:#e0e0e0;--gray-lighten-2:#ededed;--gray-lighten-3:#f7f7f7;--gray-lighten-4:#fafafa;--neutral:#586E8C;--neutral-lighten-1:#D6DBE6;--neutral-lighten-2:#EAEDF2;--neutral-lighten-3:#F8F9FB;--red:#F2514A;--red-lighten-1:#F79792;--red-lighten-2:#FBCBC9;--red-lighten-3:#FDE8E7;--yellow:#FFC511;--yellow-lighten-1:#FFDC70;--yellow-lighten-2:#FFEDB8;--yellow-lighten-3:#FFF7E0;--green:#54D28C;--green-lighten-1:#98E4BA;--green-lighten-2:#CFF8E1;--green-lighten-3:#EAFCF2;--blue:#478FFF;--blue-lighten-1:#91BCFF;--blue-lighten-2:#C8DDFF;--blue-lighten-3:#E7F0FF;--orange:#FF8F00;--orange-lighten-1:#FCB965;--orange-lighten-2:#FAD9B0;--orange-lighten-3:#F9EBDA;--shadow-1:0px 1px 4px rgba(0, 0, 0, 0.11);--shadow-2:0px 2px 5px rgba(0, 0, 0, 0.1),0px 2px 2px rgba(0, 0, 0, 0.06),0px 3px 1px -2px rgba(0, 0, 0, 0.06);--shadow-3:0px 3px 2px rgba(0, 0, 0, 0.101961);--shadow-4:0px 1px 1px rgba(0, 0, 0, 0.06),0px 3px 8px rgba(0, 0, 0, 0.15);--shadow-5:0px 4px 18px rgba(0, 0, 0, 0.1);--shadow-6:0px 1px 10px rgba(0, 0, 0, 0.12),0px 4px 7px rgba(0, 0, 0, 0.14),0px 2px 4px -1px rgba(0, 0, 0, 0.2);--shadow-7:0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);--shadow-8:0px 5px 7px 3px rgba(0, 0, 0, 0.26);--shadow-9:0px 7px 8px -4px rgba(0, 0, 0, 0.2),2px 13px 19px 2px rgba(0, 0, 0, 0.14),0px 5px 24px rgba(0, 0, 0, 0.12);--shadow-10:0px 4px 8px #cccccc}.vc-gallery-item[data-v-242837a2]{max-width:252px}.vc-gallery-item__thumbnail[data-v-242837a2]{position:relative;height:0;padding-bottom:133%;border-radius:var(--border-radius);box-shadow:var(--shadow-4);overflow:hidden;background-color:var(--modal-bg-color);transition:background-color .1s ease-out}.vc-gallery-item--is-create .vc-gallery-item__thumbnail[data-v-242837a2]:hover{background-color:var(--v-secondary-lighten3)}.vc-gallery-item--is-create .vc-gallery-item__thumbnail[data-v-242837a2]{background-color:transparent;border:1px dashed var(--v-secondary-base);box-shadow:none}.vc-gallery-item--is-mobile .vc-gallery-item__thumbnail .vc-gallery-item__thumbnail[data-v-242837a2]{filter:none}.vc-gallery-item__top[data-v-242837a2]{height:0;padding-bottom:80%;position:relative}.vc-gallery-item__bottom[data-v-242837a2]{height:0;padding-bottom:54%;background-size:cover;background-repeat:no-repeat;background-position:top center}.vc-gallery-item__bottom--full-height[data-v-242837a2]{padding-bottom:inherit}.vc-gallery-item__bottom--fallback[data-v-242837a2]{display:flex;justify-content:center;position:relative;background-color:var(--neutral-lighten-3)}.vc-gallery-item__bottom--fallback[data-v-242837a2]  .v-icon{top:50%;position:absolute;transform:translateY(-50%)}.vc-gallery-item__thumbnail:hover .vc-gallery-item__bottom[data-v-242837a2]{filter:blur(5px);transition:filter .3s ease-out}.vc-gallery-item__image[data-v-242837a2]{width:100%}.vc-gallery-item .cta-button[data-v-242837a2]{font-size:7px;color:#fff;padding:var(--size-value1) var(--size-value8);border-radius:var(--border-radius);font-weight:var(--font-weight-large);margin-top:0}.vc-gallery-item .VcButton.secondary__text[data-v-242837a2]{background-color:var(--v-secondary-lighten2);color:var(--v-secondary-base)!important}.vc-gallery-item .align-buttons[data-v-242837a2]{min-width:50%;text-align:center}.vc-gallery-item__top-wrap[data-v-242837a2]{height:100%;width:100%;position:absolute;overflow:hidden;padding:0 var(--size-value5)}.vc-gallery-item__label-wrap[data-v-242837a2]{flex:0 1 140px;padding-top:var(--size-value4)}.vc-gallery-item__label[data-v-242837a2]{font-weight:var(--font-weight-large2);font-size:var(--font-size-x-small);line-height:1.5;text-align:center;color:var(--gray-darken-5);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3}.vc-gallery-item--is-create .vc-gallery-item__label[data-v-242837a2]{color:var(--v-secondary-base)}.vc-gallery-item--mobile .vc-gallery-item__label[data-v-242837a2]{line-height:1.2;-webkit-line-clamp:2;line-clamp:2;font-size:var(--font-size-xx-small)}.vc-gallery-item__skeleton[data-v-242837a2]{width:90%;margin:0 auto;background-position:center;flex:1 1 auto}.vc-gallery-item--mobile .vc-gallery-item__skeleton[data-v-242837a2]{width:75%;margin:6px auto 0}.vc-gallery-item__skeleton[data-v-242837a2]  .v-icon__component{height:100%;width:100%}.vc-gallery-item__skeleton[data-v-242837a2]  .v-icon.v-icon{width:100%}.vc-gallery-item__cta[data-v-242837a2]{flex:0 1 100px}.vc-gallery-item__bottom_label[data-v-242837a2]{font-weight:var(--font-weight-medium2);font-size:var(--font-size-small);line-height:1.5;text-align:center;color:var(--gray-darken-5);margin-top:var(--size-value3)}.vc-gallery-item--is-create .vc-gallery-item__bottom_label[data-v-242837a2]{color:var(--v-secondary-base)}.buttons[data-v-242837a2]{position:absolute;width:100%;height:100%;left:0;top:0;background-color:rgba(0,0,0,.7);display:none}.vc-gallery-item--is-create .buttons[data-v-242837a2]{display:flex;background-color:transparent;cursor:pointer}.vc-gallery-item__thumbnail:hover .buttons[data-v-242837a2]{display:flex}.buttons__select[data-v-242837a2]{margin-bottom:var(--size-value4)}",
+  inject("data-v-611719ac_0", {
+    source: "[data-v-611719ac]:root{--primary-font-family:Montserrat;--font-size-xxx-small:9px;--font-size-xx-small:12px;--font-size-x-small:13px;--font-size-small:14px;--font-size-small2:15px;--font-size-small3:17px;--font-size-medium:18px;--font-size-medium0:20px;--font-size-medium1:22px;--font-size-medium2:24px;--font-size-large:28px;--font-weight-light:300;--font-weight-medium:400;--font-weight-medium2:500;--font-weight-large:600;--font-weight-large2:700;--font-weight-xl:800;--letter-spacing:0.003em;--size-value0:0px;--size-value1:4px;--size-value2:8px;--size-value3:12px;--size-value4:16px;--size-value5:20px;--size-value6:24px;--size-value7:28px;--size-value8:32px;--size-value9:36px;--size-value10:40px;--size-value11:44px;--size-value12:48px;--size-value13:52px;--size-value14:56px;--size-value15:60px;--size-value16:64px;--size-value17:68px;--size-value18:72px;--size-value19:76px;--size-value20:80px;--border-radius:6px;--border-radius-circle:50%;--border-frame:1px solid #e0e0e0;--border-focused-frame:1px solid var(--v-secondary-base);--shadow-focused-frame:0px 0px 0px 3px var(--v-secondary-lighten1);--centered-layout-min-width:708px;--centered-layout-max-width:1316px;--popover-width:360px;--popover-max-height:464px;--popover-border-radius:10px;--modal-desktop-offset:0;--modal-bg-color:#ffffff;--modal-box-shadow:0px 7px 8px -4px rgba(0, 0, 0, 0.2),2px 13px 19px 2px rgba(0, 0, 0, 0.14),0px 5px 24px rgba(0, 0, 0, 0.12);--modal-border-radius:10px;--modal-width-small:384px;--modal-width-medium:576px;--modal-width-large:816px;--modal-width-x-large:972px;--avatar-x-sm:24px;--avatar-sm:32px;--avatar-md:40px;--avatar-lg:48px;--dropzone-active-border-color:#1e93b7;--dropzone-active-second-border-color:#95cddb;--select-field-height:52px;--gray-darken-5:#212121;--gray-darken-4:#616161;--gray-darken-3:#757575;--gray-darken-2:#999999;--gray-darken-1:#b3b3b3;--gray:#cccccc;--gray-lighten-1:#e0e0e0;--gray-lighten-2:#ededed;--gray-lighten-3:#f7f7f7;--gray-lighten-4:#fafafa;--neutral:#586E8C;--neutral-lighten-1:#D6DBE6;--neutral-lighten-2:#EAEDF2;--neutral-lighten-3:#F8F9FB;--red:#F2514A;--red-lighten-1:#F79792;--red-lighten-2:#FBCBC9;--red-lighten-3:#FDE8E7;--yellow:#FFC511;--yellow-lighten-1:#FFDC70;--yellow-lighten-2:#FFEDB8;--yellow-lighten-3:#FFF7E0;--green:#54D28C;--green-lighten-1:#98E4BA;--green-lighten-2:#CFF8E1;--green-lighten-3:#EAFCF2;--blue:#478FFF;--blue-lighten-1:#91BCFF;--blue-lighten-2:#C8DDFF;--blue-lighten-3:#E7F0FF;--orange:#FF8F00;--orange-lighten-1:#FCB965;--orange-lighten-2:#FAD9B0;--orange-lighten-3:#F9EBDA;--shadow-1:0px 1px 4px rgba(0, 0, 0, 0.11);--shadow-2:0px 2px 5px rgba(0, 0, 0, 0.1),0px 2px 2px rgba(0, 0, 0, 0.06),0px 3px 1px -2px rgba(0, 0, 0, 0.06);--shadow-3:0px 3px 2px rgba(0, 0, 0, 0.101961);--shadow-4:0px 1px 1px rgba(0, 0, 0, 0.06),0px 3px 8px rgba(0, 0, 0, 0.15);--shadow-5:0px 4px 18px rgba(0, 0, 0, 0.1);--shadow-6:0px 1px 10px rgba(0, 0, 0, 0.12),0px 4px 7px rgba(0, 0, 0, 0.14),0px 2px 4px -1px rgba(0, 0, 0, 0.2);--shadow-7:0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);--shadow-8:0px 5px 7px 3px rgba(0, 0, 0, 0.26);--shadow-9:0px 7px 8px -4px rgba(0, 0, 0, 0.2),2px 13px 19px 2px rgba(0, 0, 0, 0.14),0px 5px 24px rgba(0, 0, 0, 0.12);--shadow-10:0px 4px 8px #cccccc}.vc-gallery-item[data-v-611719ac]{max-width:252px}.vc-gallery-item__thumbnail[data-v-611719ac]{position:relative;height:0;padding-bottom:133%;border-radius:var(--border-radius);box-shadow:var(--shadow-4);overflow:hidden;background-color:var(--modal-bg-color);transition:background-color .1s ease-out}.vc-gallery-item--disabled .vc-gallery-item__thumbnail[data-v-611719ac]{filter:grayscale(100%)}.vc-gallery-item--selected .vc-gallery-item__thumbnail[data-v-611719ac]{outline:2px solid var(--v-secondary-base)}.vc-gallery-item--selected.vc-gallery-item--disabled .vc-gallery-item__thumbnail[data-v-611719ac]{outline:2px solid var(--gray-darken-1)}.vc-gallery-item--is-create .vc-gallery-item__thumbnail[data-v-611719ac]:hover{background-color:var(--v-secondary-lighten3)}.vc-gallery-item--is-create .vc-gallery-item__thumbnail[data-v-611719ac]{background-color:transparent;border:1px dashed var(--v-secondary-base);box-shadow:none}.vc-gallery-item--is-mobile .vc-gallery-item__thumbnail .vc-gallery-item__thumbnail[data-v-611719ac]{filter:none}.vc-gallery-item__top[data-v-611719ac]{height:0;padding-bottom:80%;position:relative}.vc-gallery-item__bottom[data-v-611719ac]{height:0;padding-bottom:54%;background-size:cover;background-repeat:no-repeat;background-position:top center}.vc-gallery-item__bottom--full-height[data-v-611719ac]{padding-bottom:inherit}.vc-gallery-item__bottom--fallback[data-v-611719ac]{display:flex;justify-content:center;position:relative;background-color:var(--neutral-lighten-3)}.vc-gallery-item__bottom--fallback[data-v-611719ac]  .v-icon{top:50%;position:absolute;transform:translateY(-50%)}@media screen and (min-width:960px){.vc-gallery-item__thumbnail:hover .vc-gallery-item__bottom[data-v-611719ac]{filter:blur(5px);transition:filter .3s ease-out}}.vc-gallery-item__image[data-v-611719ac]{width:100%}.vc-gallery-item .cta-button[data-v-611719ac]{font-size:7px;color:#fff;padding:var(--size-value1) var(--size-value8);border-radius:var(--border-radius);font-weight:var(--font-weight-large);margin-top:0}.vc-gallery-item .VcButton.secondary__text[data-v-611719ac]{background-color:var(--v-secondary-lighten2);color:var(--v-secondary-base)!important}.vc-gallery-item .align-buttons[data-v-611719ac]{min-width:50%;text-align:center}.vc-gallery-item__top-wrap[data-v-611719ac]{height:100%;width:100%;position:absolute;overflow:hidden;padding:0 var(--size-value5)}.vc-gallery-item__label-wrap[data-v-611719ac]{flex:0 1 140px;padding-top:var(--size-value4)}.vc-gallery-item__label[data-v-611719ac]{font-weight:var(--font-weight-large2);font-size:var(--font-size-x-small);line-height:1.5;text-align:center;color:var(--gray-darken-5);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3}.vc-gallery-item--is-create .vc-gallery-item__label[data-v-611719ac]{color:var(--v-secondary-base)}.vc-gallery-item--mobile .vc-gallery-item__label[data-v-611719ac]{line-height:1.2;-webkit-line-clamp:2;line-clamp:2;font-size:var(--font-size-xx-small)}.vc-gallery-item__skeleton[data-v-611719ac]{width:90%;margin:0 auto;background-position:center;flex:1 1 auto}.vc-gallery-item--mobile .vc-gallery-item__skeleton[data-v-611719ac]{width:75%;margin:6px auto 0}.vc-gallery-item__skeleton[data-v-611719ac]  .v-icon__component{height:100%;width:100%}.vc-gallery-item__skeleton[data-v-611719ac]  .v-icon.v-icon{width:100%}.vc-gallery-item__cta[data-v-611719ac]{flex:0 1 100px}.vc-gallery-item__bottom_label[data-v-611719ac]{font-weight:var(--font-weight-medium2);font-size:var(--font-size-small);line-height:1.5;text-align:center;color:var(--gray-darken-5);margin-top:var(--size-value3)}.vc-gallery-item--is-create .vc-gallery-item__bottom_label[data-v-611719ac]{color:var(--v-secondary-base)}.buttons[data-v-611719ac]{position:absolute;width:100%;height:100%;left:0;top:0;background-color:rgba(0,0,0,.7);display:none}.vc-gallery-item--is-create .buttons[data-v-611719ac]{display:flex;background-color:transparent;cursor:pointer}.vc-gallery-item__thumbnail:hover .buttons[data-v-611719ac]{display:flex}.buttons__select[data-v-611719ac]{margin-bottom:var(--size-value4)}.selected-indicator[data-v-611719ac]{position:absolute;top:0;inset-inline-end:0;background:var(--v-secondary-base);border-radius:0 0 0 var(--border-radius);width:var(--size-value6);height:var(--size-value6)}.vc-gallery-item--disabled .selected-indicator[data-v-611719ac]{background:var(--gray-darken-1)}",
     map: undefined,
     media: undefined
   });
@@ -16988,7 +17014,7 @@ const __vue_inject_styles__$6 = function (inject) {
 /* scoped */
 
 
-const __vue_scope_id__$6 = "data-v-242837a2";
+const __vue_scope_id__$6 = "data-v-611719ac";
 /* module identifier */
 
 const __vue_module_identifier__$6 = undefined;