@gem-sdk/components 3.0.0-pre-production.14 → 3.0.0

package/dist/cjs/product/setting/ProductTag.js

@@ -1,347 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const config = {
-    tag: 'ProductTag',
-    label: 'Discount Tag',
-    icon: `<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19.75 2A2.25 2.25 0 0 1 22 4.25v5.462a3.25 3.25 0 0 1-.952 2.298l-8.5 8.503a3.255 3.255 0 0 1-4.597.001L3.489 16.06a3.25 3.25 0 0 1-.003-4.596l8.5-8.51A3.25 3.25 0 0 1 14.284 2h5.465Zm0 1.5h-5.465c-.465 0-.91.185-1.239.513l-8.512 8.523a1.75 1.75 0 0 0 .015 2.462l4.461 4.454a1.755 1.755 0 0 0 2.477 0l8.5-8.503a1.75 1.75 0 0 0 .513-1.237V4.25a.75.75 0 0 0-.75-.75ZM17 5.502a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z"/></svg>`,
-    settings: [
-        {
-            id: 'setting',
-            // note: 'Product Tag won’t display on live page if Compare at price field is empty or lower than Price.',
-            controls: [
-                {
-                    id: 'customContent',
-                    label: 'Custom Content',
-                    type: 'custom-content',
-                    default: {
-                        prefix: 'SALE',
-                        suffix: 'OFF',
-                        unit: 'percentage'
-                    }
-                },
-                {
-                    id: 'translate',
-                    type: 'input',
-                    default: 'customContent'
-                }
-            ]
-        },
-        {
-            id: 'style',
-            controls: [
-                {
-                    id: 'size',
-                    type: 'size-setting',
-                    devices: {
-                        desktop: {
-                            default: {
-                                width: 'Auto',
-                                height: 'Auto',
-                                padding: {
-                                    type: 'small',
-                                    top: '4px',
-                                    left: '16px',
-                                    bottom: '4px',
-                                    right: '16px'
-                                }
-                            }
-                        }
-                    },
-                    settingConfig: {
-                        width: {
-                            displayOptions: [
-                                'full',
-                                'auto',
-                                'default'
-                            ]
-                        },
-                        padding: {
-                            paddingConfig: {
-                                small: {
-                                    vertical: '4px',
-                                    horizontal: '16px'
-                                },
-                                medium: {
-                                    vertical: '8px',
-                                    horizontal: '24px'
-                                },
-                                large: {
-                                    vertical: '16px',
-                                    horizontal: '32px'
-                                },
-                                custom: {
-                                    vertical: '0px',
-                                    horizontal: '0px'
-                                }
-                            }
-                        }
-                    },
-                    hiddenSettings: [
-                        'shape',
-                        'gap'
-                    ]
-                },
-                {
-                    id: 'textContentAlign',
-                    label: 'Alignment',
-                    type: 'segment',
-                    options: [
-                        {
-                            label: 'Left',
-                            value: 'left',
-                            type: 'text',
-                            tooltip: 'Align left'
-                        },
-                        {
-                            label: 'Center',
-                            value: 'center',
-                            type: 'text',
-                            tooltip: 'Align center'
-                        },
-                        {
-                            label: 'Right',
-                            value: 'right',
-                            type: 'text',
-                            tooltip: 'Align right'
-                        },
-                        {
-                            label: 'Justify',
-                            value: 'justify',
-                            type: 'text',
-                            tooltip: 'Align justify'
-                        }
-                    ],
-                    devices: {
-                        desktop: {
-                            default: 'center'
-                        }
-                    }
-                },
-                {
-                    id: 'backgroundColor',
-                    type: 'colorpicker',
-                    label: 'Background Color',
-                    default: '#3C67FF'
-                },
-                {
-                    id: 'borderTag',
-                    type: 'border',
-                    label: 'Border',
-                    default: {
-                        borderType: 'none',
-                        border: 'none',
-                        borderWidth: '1px',
-                        width: '1px 1px 1px 1px',
-                        color: '#000000',
-                        isCustom: false
-                    }
-                },
-                {
-                    id: 'roundedTag',
-                    type: 'radius-preset',
-                    label: 'Border Radius',
-                    default: {
-                        radiusType: 'large'
-                    }
-                },
-                {
-                    id: 'textAlign',
-                    label: 'Alignment',
-                    type: 'segment',
-                    options: [
-                        {
-                            label: 'Left',
-                            value: 'left',
-                            type: 'align',
-                            tooltip: 'Align left'
-                        },
-                        {
-                            label: 'Center',
-                            value: 'center',
-                            type: 'align',
-                            tooltip: 'Align center'
-                        },
-                        {
-                            label: 'Right',
-                            value: 'right',
-                            type: 'align',
-                            tooltip: 'Align right'
-                        }
-                    ],
-                    devices: {
-                        desktop: {
-                            default: 'left'
-                        }
-                    }
-                },
-                {
-                    id: 'typo',
-                    type: 'typography-v2',
-                    default: {
-                        type: 'subheading-2',
-                        attrs: {
-                            color: '#FFFFFF'
-                        }
-                    },
-                    ignoreReRender: true
-                }
-            ]
-        }
-    ],
-    ui: [
-        {
-            type: 'group',
-            controls: [
-                {
-                    type: 'control',
-                    label: {
-                        en: 'Tag'
-                    },
-                    options: {
-                        label: 'large'
-                    },
-                    setting: {
-                        id: 'customContent'
-                    },
-                    layout: 'vertical'
-                }
-            ]
-        },
-        {
-            type: 'group',
-            label: {
-                en: 'Size'
-            },
-            controls: [
-                {
-                    type: 'control',
-                    setting: {
-                        id: 'size'
-                    },
-                    layout: 'vertical'
-                }
-            ]
-        },
-        {
-            type: 'control',
-            label: {
-                en: 'Text align'
-            },
-            setting: {
-                id: 'textContentAlign'
-            }
-        },
-        {
-            type: 'control',
-            label: {
-                en: 'Background color'
-            },
-            options: {
-                label: 'large'
-            },
-            setting: {
-                id: 'backgroundColor'
-            }
-        },
-        {
-            type: 'group',
-            options: {
-                labelPosition: 'start'
-            },
-            label: {
-                en: 'Border'
-            },
-            controls: [
-                {
-                    type: 'control',
-                    options: {
-                        labelPosition: 'start'
-                    },
-                    label: {
-                        en: 'Border'
-                    },
-                    setting: {
-                        id: 'borderTag'
-                    }
-                },
-                {
-                    type: 'control',
-                    label: {
-                        en: 'Corner'
-                    },
-                    setting: {
-                        id: 'roundedTag'
-                    }
-                }
-            ]
-        },
-        {
-            type: 'group',
-            label: {
-                en: 'Text'
-            },
-            controls: [
-                {
-                    type: 'control',
-                    setting: {
-                        id: 'typo'
-                    },
-                    layout: 'vertical'
-                }
-            ]
-        },
-        {
-            type: 'control',
-            label: {
-                en: 'Align'
-            },
-            options: {
-                label: 'large'
-            },
-            setting: {
-                id: 'textAlign'
-            }
-        }
-    ],
-    presets: [
-        {
-            id: 'product-tag',
-            name: {
-                en: 'Discount Tag'
-            },
-            icon: {
-                desktop: `
-          <svg width="96" height="48" viewBox="0 0 96 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 15C13 13.3431 14.3431 12 16 12H80C81.6569 12 83 13.3431 83 15V33C83 34.6569 81.6569 36 80 36H16C14.3431 36 13 34.6569 13 33V15Z" fill="#424242"/>
-<path d="M27.2188 21.5653C27.1733 21.1619 26.9858 20.8494 26.6562 20.6278C26.3267 20.4034 25.9119 20.2912 25.4119 20.2912C25.054 20.2912 24.7443 20.348 24.483 20.4616C24.2216 20.5724 24.0185 20.7259 23.8736 20.9219C23.7315 21.1151 23.6605 21.3352 23.6605 21.5824C23.6605 21.7898 23.7088 21.9687 23.8054 22.1193C23.9048 22.2699 24.0341 22.3963 24.1932 22.4986C24.3551 22.598 24.5284 22.6818 24.7131 22.75C24.8977 22.8153 25.0753 22.8693 25.2457 22.9119L26.098 23.1335C26.3764 23.2017 26.6619 23.294 26.9545 23.4105C27.2472 23.527 27.5185 23.6804 27.7685 23.8707C28.0185 24.0611 28.2202 24.2969 28.3736 24.5781C28.5298 24.8594 28.608 25.196 28.608 25.5881C28.608 26.0824 28.4801 26.5213 28.2244 26.9048C27.9716 27.2884 27.6037 27.5909 27.1207 27.8125C26.6406 28.0341 26.0597 28.1449 25.3778 28.1449C24.7244 28.1449 24.1591 28.0412 23.6818 27.8338C23.2045 27.6264 22.831 27.3324 22.5611 26.9517C22.2912 26.5682 22.142 26.1136 22.1136 25.5881H23.4347C23.4602 25.9034 23.5625 26.1662 23.7415 26.3764C23.9233 26.5838 24.1548 26.7386 24.4361 26.8409C24.7202 26.9403 25.0312 26.9901 25.3693 26.9901C25.7415 26.9901 26.0724 26.9318 26.3622 26.8153C26.6548 26.696 26.8849 26.5312 27.0526 26.321C27.2202 26.108 27.304 25.8594 27.304 25.5753C27.304 25.3168 27.2301 25.1051 27.0824 24.9403C26.9375 24.7756 26.7401 24.6392 26.4901 24.5312C26.2429 24.4233 25.9631 24.3281 25.6506 24.2457L24.6193 23.9645C23.9205 23.7741 23.3665 23.4943 22.9574 23.125C22.5511 22.7557 22.348 22.267 22.348 21.6591C22.348 21.1562 22.4844 20.7173 22.7571 20.3423C23.0298 19.9673 23.3991 19.6761 23.8651 19.4688C24.331 19.2585 24.8565 19.1534 25.4418 19.1534C26.0327 19.1534 26.554 19.2571 27.0057 19.4645C27.4602 19.6719 27.8182 19.9574 28.0795 20.321C28.3409 20.6818 28.4773 21.0966 28.4886 21.5653H27.2188ZM31.984 28.1449C31.5692 28.1449 31.1942 28.0682 30.859 27.9148C30.5238 27.7585 30.2582 27.5327 30.0621 27.2372C29.869 26.9418 29.7724 26.5795 29.7724 26.1506C29.7724 25.7812 29.8434 25.4773 29.9854 25.2386C30.1275 25 30.3192 24.8111 30.5607 24.6719C30.8022 24.5327 31.0721 24.4276 31.3704 24.3565C31.6687 24.2855 31.9727 24.2315 32.2823 24.1946C32.6744 24.1491 32.9925 24.1122 33.2369 24.0838C33.4812 24.0526 33.6587 24.0028 33.7695 23.9347C33.8803 23.8665 33.9357 23.7557 33.9357 23.6023V23.5724C33.9357 23.2003 33.8306 22.9119 33.6204 22.7074C33.413 22.5028 33.1033 22.4006 32.6914 22.4006C32.2624 22.4006 31.9244 22.4957 31.6772 22.6861C31.4329 22.8736 31.2638 23.0824 31.1701 23.3125L29.9727 23.0398C30.1147 22.642 30.3221 22.321 30.5948 22.0767C30.8704 21.8295 31.1871 21.6506 31.5451 21.5398C31.9031 21.4261 32.2795 21.3693 32.6744 21.3693C32.9357 21.3693 33.2127 21.4006 33.5053 21.4631C33.8008 21.5227 34.0763 21.6335 34.332 21.7955C34.5906 21.9574 34.8022 22.1889 34.967 22.4901C35.1317 22.7884 35.2141 23.1761 35.2141 23.6534V28H33.9698V27.1051H33.9187C33.8363 27.2699 33.7127 27.4318 33.5479 27.5909C33.3832 27.75 33.1715 27.8821 32.913 27.9872C32.6545 28.0923 32.3448 28.1449 31.984 28.1449ZM32.261 27.1222C32.6133 27.1222 32.9144 27.0526 33.1644 26.9134C33.4173 26.7741 33.609 26.5923 33.7397 26.3679C33.8732 26.1406 33.94 25.8977 33.94 25.6392V24.7955C33.8945 24.8409 33.8065 24.8835 33.6758 24.9233C33.5479 24.9602 33.4016 24.9929 33.2369 25.0213C33.0721 25.0469 32.9116 25.071 32.7553 25.0938C32.5991 25.1136 32.4684 25.1307 32.3633 25.1449C32.1161 25.1761 31.8903 25.2287 31.6857 25.3026C31.484 25.3764 31.3221 25.483 31.1999 25.6222C31.0806 25.7585 31.021 25.9403 31.021 26.1676C31.021 26.483 31.1374 26.7216 31.3704 26.8835C31.6033 27.0426 31.9002 27.1222 32.261 27.1222ZM38.1854 19.2727V28H36.9112V19.2727H38.1854ZM42.7205 28.1321C42.0756 28.1321 41.5202 27.9943 41.0543 27.7188C40.5913 27.4403 40.2333 27.0497 39.9805 26.5469C39.7305 26.0412 39.6055 25.4489 39.6055 24.7699C39.6055 24.0994 39.7305 23.5085 39.9805 22.9972C40.2333 22.4858 40.5856 22.0866 41.0373 21.7997C41.4918 21.5128 42.0231 21.3693 42.631 21.3693C43.0004 21.3693 43.3583 21.4304 43.7049 21.5526C44.0515 21.6747 44.3626 21.8665 44.6381 22.1278C44.9137 22.3892 45.131 22.7287 45.2901 23.1463C45.4492 23.5611 45.5288 24.0653 45.5288 24.6591V25.1108H40.3256V24.1562H44.2802C44.2802 23.821 44.212 23.5241 44.0756 23.2656C43.9393 23.0043 43.7475 22.7983 43.5004 22.6477C43.256 22.4972 42.9691 22.4219 42.6396 22.4219C42.2816 22.4219 41.9691 22.5099 41.7021 22.6861C41.4379 22.8594 41.2333 23.0866 41.0884 23.3679C40.9464 23.6463 40.8754 23.9489 40.8754 24.2756V25.0213C40.8754 25.4588 40.9521 25.831 41.1055 26.1378C41.2617 26.4446 41.479 26.679 41.7575 26.8409C42.0359 27 42.3612 27.0795 42.7333 27.0795C42.9748 27.0795 43.195 27.0455 43.3938 26.9773C43.5927 26.9062 43.7646 26.8011 43.9094 26.6619C44.0543 26.5227 44.1651 26.3509 44.2418 26.1463L45.4478 26.3636C45.3512 26.7187 45.1779 27.0298 44.9279 27.2969C44.6808 27.5611 44.3697 27.767 43.9947 27.9148C43.6225 28.0597 43.1978 28.1321 42.7205 28.1321ZM52.9819 28.1193C52.4478 28.1193 51.9677 28.017 51.5415 27.8125C51.1183 27.6051 50.7802 27.321 50.5273 26.9602C50.2745 26.5994 50.1396 26.1875 50.1225 25.7244H51.4009C51.4322 26.0994 51.5984 26.4077 51.8995 26.6491C52.2006 26.8906 52.5614 27.0114 52.9819 27.0114C53.3171 27.0114 53.614 26.9347 53.8725 26.7812C54.1339 26.625 54.3384 26.4105 54.4862 26.1378C54.6367 25.8651 54.712 25.554 54.712 25.2045C54.712 24.8494 54.6353 24.5327 54.4819 24.2543C54.3285 23.9759 54.1168 23.7571 53.8469 23.598C53.5799 23.4389 53.2731 23.358 52.9265 23.3551C52.6623 23.3551 52.3967 23.4006 52.1296 23.4915C51.8626 23.5824 51.6467 23.7017 51.4819 23.8494L50.2759 23.6705L50.766 19.2727H55.5643V20.402H51.8612L51.5842 22.8438H51.6353C51.8058 22.679 52.0316 22.5412 52.3129 22.4304C52.5969 22.3196 52.9009 22.2642 53.2248 22.2642C53.756 22.2642 54.229 22.3906 54.6438 22.6435C55.0614 22.8963 55.3896 23.2415 55.6282 23.679C55.8697 24.1136 55.989 24.6136 55.9862 25.179C55.989 25.7443 55.8612 26.2486 55.6026 26.6918C55.3469 27.1349 54.9918 27.4844 54.5373 27.7401C54.0856 27.9929 53.5671 28.1193 52.9819 28.1193ZM60.581 28.1449C59.9077 28.142 59.3324 27.9645 58.8551 27.6122C58.3778 27.2599 58.0128 26.7472 57.7599 26.0739C57.5071 25.4006 57.3807 24.5895 57.3807 23.6406C57.3807 22.6946 57.5071 21.8864 57.7599 21.2159C58.0156 20.5455 58.3821 20.0341 58.8594 19.6818C59.3395 19.3295 59.9134 19.1534 60.581 19.1534C61.2486 19.1534 61.821 19.331 62.2983 19.6861C62.7756 20.0384 63.1406 20.5497 63.3935 21.2202C63.6491 21.8878 63.777 22.6946 63.777 23.6406C63.777 24.5923 63.6506 25.4048 63.3977 26.0781C63.1449 26.7486 62.7798 27.2614 62.3026 27.6165C61.8253 27.9688 61.2514 28.1449 60.581 28.1449ZM60.581 27.0071C61.1719 27.0071 61.6335 26.7188 61.9659 26.142C62.3011 25.5653 62.4688 24.7315 62.4688 23.6406C62.4688 22.9162 62.392 22.304 62.2386 21.804C62.0881 21.3011 61.8707 20.9205 61.5866 20.6619C61.3054 20.4006 60.9702 20.2699 60.581 20.2699C59.9929 20.2699 59.5313 20.5597 59.196 21.1392C58.8608 21.7187 58.6918 22.5526 58.6889 23.6406C58.6889 24.3679 58.7642 24.983 58.9148 25.4858C59.0682 25.9858 59.2855 26.3651 59.5668 26.6236C59.848 26.8793 60.1861 27.0071 60.581 27.0071ZM69.8441 26.3636V25.9034C69.8441 25.5739 69.9123 25.2727 70.0487 25C70.1879 24.7244 70.3896 24.5043 70.6538 24.3395C70.9208 24.1719 71.2433 24.0881 71.6211 24.0881C72.0075 24.0881 72.3313 24.1705 72.5927 24.3352C72.854 24.5 73.0515 24.7202 73.185 24.9957C73.3214 25.2713 73.3896 25.5739 73.3896 25.9034V26.3636C73.3896 26.6932 73.3214 26.9957 73.185 27.2713C73.0487 27.544 72.8484 27.7642 72.5842 27.9318C72.3228 28.0966 72.0018 28.179 71.6211 28.179C71.2376 28.179 70.9137 28.0966 70.6495 27.9318C70.3853 27.7642 70.185 27.544 70.0487 27.2713C69.9123 26.9957 69.8441 26.6932 69.8441 26.3636ZM70.837 25.9034V26.3636C70.837 26.608 70.8952 26.8295 71.0117 27.0284C71.1282 27.2273 71.3313 27.3267 71.6211 27.3267C71.908 27.3267 72.1083 27.2273 72.2219 27.0284C72.3356 26.8295 72.3924 26.608 72.3924 26.3636V25.9034C72.3924 25.6591 72.337 25.4375 72.2262 25.2386C72.1183 25.0398 71.9165 24.9403 71.6211 24.9403C71.337 24.9403 71.1353 25.0398 71.016 25.2386C70.8967 25.4375 70.837 25.6591 70.837 25.9034ZM65.4549 21.3693V20.9091C65.4549 20.5795 65.5231 20.277 65.6594 20.0014C65.7987 19.7259 66.0004 19.5057 66.2646 19.3409C66.5316 19.1761 66.854 19.0938 67.2319 19.0938C67.6183 19.0938 67.9421 19.1761 68.2035 19.3409C68.4648 19.5057 68.6623 19.7259 68.7958 20.0014C68.9293 20.277 68.9961 20.5795 68.9961 20.9091V21.3693C68.9961 21.6989 68.9279 22.0014 68.7915 22.277C68.658 22.5497 68.4592 22.7699 68.195 22.9375C67.9336 23.1023 67.6126 23.1847 67.2319 23.1847C66.8455 23.1847 66.5202 23.1023 66.256 22.9375C65.9947 22.7699 65.7958 22.5497 65.6594 22.277C65.5231 22.0014 65.4549 21.6989 65.4549 21.3693ZM66.4521 20.9091V21.3693C66.4521 21.6136 66.5089 21.8352 66.6225 22.0341C66.739 22.233 66.9421 22.3324 67.2319 22.3324C67.516 22.3324 67.7148 22.233 67.8285 22.0341C67.945 21.8352 68.0032 21.6136 68.0032 21.3693V20.9091C68.0032 20.6648 67.9478 20.4432 67.837 20.2443C67.7262 20.0455 67.5245 19.946 67.2319 19.946C66.9478 19.946 66.7461 20.0455 66.6268 20.2443C66.5103 20.4432 66.4521 20.6648 66.4521 20.9091ZM65.8597 28L71.8597 19.2727H72.8782L66.8782 28H65.8597Z" fill="#AAAAAA"/>
-</svg>
-        `
-            },
-            components: [
-                {
-                    tag: 'ProductTag',
-                    advanced: {
-                        'spacing-setting': {
-                            desktop: {
-                                margin: {
-                                    bottom: 'var(--g-s-l)'
-                                }
-                            }
-                        }
-                    }
-                }
-            ]
-        }
-    ],
-    editorConfigs: {
-        placeholder: {
-            flowTag: [
-                'Product'
-            ]
-        }
-    }
-};
-
-exports.default = config;