@designbasekorea/ui-wc 0.5.6 → 0.6.1

package/dist/esm/components/db-share-icons.js

@@ -1,40 +1 @@
-/**
- * SVG paths synced from @designbasekorea/icons (packages/icons)
- */
-const SHARE_ICON_PATHS = {
-    facebook: '<path fill="currentColor" d="M2.002 12.001c0 4.99 3.656 9.126 8.437 9.879v-6.988h-2.54v-2.891h2.54V9.798c0-2.508 1.493-3.891 3.776-3.891q1.095 0 2.24.195V8.56h-1.264c-1.24 0-1.628.772-1.628 1.563v1.875h2.771l-.443 2.891h-2.328v6.988C18.344 21.129 22 16.992 22 12.001c0-5.522-4.477-10-9.999-10-5.522.001-10 4.478-10 10"/>',
-    x: '<path fill="currentColor" d="M17.801 3h3.066l-6.731 7.638L22 21h-6.171l-4.832-6.297L5.466 21H2.4l7.13-8.17L2 3h6.325l4.365 5.752zm-1.073 16.207h1.7L7.432 4.727H5.605z"/>',
-    instagram: '<path fill="currentColor" fill-rule="evenodd" d="M7.376 12a4.623 4.623 0 1 0 9.246.002A4.623 4.623 0 0 0 7.376 12m1.619 0a3.003 3.003 0 1 1 6.007.001 3.003 3.003 0 0 1-6.007 0m8.889-4.793a1.078 1.078 0 1 0-2.156 0 1.078 1.078 0 0 0 2.156 0m.016-3.728a6.6 6.6 0 0 0-2.186-.42c-.963-.042-1.268-.054-3.71-.054s-2.755 0-3.71.054a6.6 6.6 0 0 0-2.184.42A4.6 4.6 0 0 0 3.477 6.11a6.6 6.6 0 0 0-.419 2.186c-.043.962-.056 1.267-.056 3.71s0 2.753.056 3.71c.015.748.156 1.486.419 2.187a4.6 4.6 0 0 0 2.634 2.632 6.6 6.6 0 0 0 2.185.45c.963.042 1.268.055 3.71.055s2.755 0 3.71-.055a6.6 6.6 0 0 0 2.186-.42 4.61 4.61 0 0 0 2.633-2.632c.263-.7.404-1.438.419-2.186.043-.962.056-1.267.056-3.71s0-2.753-.056-3.71a6.6 6.6 0 0 0-.421-2.217A4.6 4.6 0 0 0 17.9 3.479m1.104 13.852a2.99 2.99 0 0 1-1.712 1.71 5 5 0 0 1-1.67.312c-.95.044-1.218.055-3.654.055-2.438 0-2.687 0-3.655-.055a5 5 0 0 1-1.67-.311 2.99 2.99 0 0 1-1.718-1.711 5.1 5.1 0 0 1-.311-1.67c-.043-.95-.053-1.217-.053-3.653s0-2.686.053-3.655a5 5 0 0 1 .311-1.687c.305-.79.93-1.41 1.719-1.712a5 5 0 0 1 1.669-.311c.95-.043 1.218-.055 3.655-.055s2.687 0 3.654.055a5 5 0 0 1 1.67.31 3 3 0 0 1 1.712 1.713 5.1 5.1 0 0 1 .311 1.669c.043.95.054 1.218.054 3.655s0 2.698-.043 3.654h-.011v-.001a5 5 0 0 1-.311 1.688" clip-rule="evenodd"/>',
-    linkedin: '<path fill="currentColor" fill-rule="evenodd" d="M17 21v-6.75c0-1.059-1.188-1.944-2.246-1.944-1.06 0-1.754.885-1.754 1.944V21H9V9h4v2c.662-1.071 2.356-1.763 3.525-1.763C18.997 9.237 21 11.28 21 13.75V21zM3 21V9h4v12zM7 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0" clip-rule="evenodd"/>',
-    youtube: '<path fill="currentColor" d="M23.498 6.186a3.02 3.02 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.02 3.02 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.02 3.02 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.02 3.02 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814M9.545 15.568V8.432L15.818 12z"/>',
-    pinterest: '<path fill="currentColor" d="M12 2C6.474 2 2 6.478 2 12.008a10 10 0 0 0 6.351 9.316c-.09-.797-.165-1.999.03-2.87.18-.782 1.172-4.974 1.172-4.974s-.3-.601-.3-1.488c0-1.397.81-2.434 1.801-2.434.856 0 1.261.646 1.261 1.413 0 .856-.54 2.149-.825 3.335-.24.992.495 1.804 1.486 1.804 1.772 0 3.138-1.879 3.138-4.583 0-2.39-1.727-4.072-4.174-4.072-2.838 0-4.52 2.133-4.52 4.342 0 .857.33 1.788.751 2.284.075.105.09.18.075.286-.075.315-.24.991-.27 1.127-.045.18-.15.225-.33.135-1.247-.586-2.027-2.404-2.027-3.877 0-3.155 2.297-6.056 6.606-6.056 3.469 0 6.156 2.48 6.156 5.77 0 3.442-2.177 6.222-5.18 6.222-1.006 0-1.967-.526-2.297-1.142l-.616 2.374c-.225.871-.84 1.953-1.246 2.63.931.285 1.922.45 2.958.45 5.526 0 10-4.478 10-10.007C22 6.478 17.526 2 12 2"/>',
-    whatsapp: '<path fill="currentColor" d="M12.042 2a9.92 9.92 0 0 1 7.044 2.906A9.83 9.83 0 0 1 22 11.918c-.003 5.464-4.47 9.91-9.958 9.91h-.005a10 10 0 0 1-4.758-1.206L2 22l1.413-5.136a9.86 9.86 0 0 1-1.329-4.954C2.086 6.446 6.553 2 12.042 2M8.516 7.333a.92.92 0 0 0-.663.31c-.228.249-.872.848-.872 2.066s.89 2.394 1.016 2.562c.124.165 1.722 2.746 4.251 3.739 2.101.825 2.53.661 2.985.62.457-.041 1.473-.6 1.68-1.178s.208-1.074.146-1.178-.229-.165-.478-.289-1.472-.723-1.7-.805-.394-.124-.56.124-.643.805-.788.97c-.145.166-.29.187-.539.063s-1.05-.386-2-1.23c-.74-.656-1.239-1.466-1.385-1.714s-.015-.383.11-.506c.111-.111.248-.29.373-.434.124-.144.166-.248.249-.413s.04-.31-.022-.434c-.062-.123-.545-1.348-.766-1.838-.187-.413-.383-.422-.56-.43z"/>',
-    telegram: '<path fill="currentColor" d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m4.08 6.012c-.375.008-.958.209-3.73 1.366-.975.408-2.915 1.248-5.829 2.514-.466.191-.716.375-.74.558-.042.35.457.458 1.081.657.517.167 1.2.358 1.558.367.325.008.682-.125 1.082-.4 2.72-1.838 4.118-2.77 4.213-2.789.066-.017.15-.033.208.017s.059.15.05.175c-.05.208-2.604 2.537-2.755 2.689-.566.583-1.208.94-.217 1.59.858.566 1.349.924 2.231 1.499.558.366 1 .799 1.583.749.266-.025.54-.275.682-1.024.333-1.765.982-5.603 1.132-7.185.017-.133 0-.308-.017-.392a.44.44 0 0 0-.141-.274c-.125-.1-.308-.117-.39-.117"/>',
-    mail: '<path fill="currentColor" fill-rule="evenodd" d="m1.665 8.67.67-1.34L12 12.161l9.665-4.833.67 1.342L12 13.839z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M4 5.75c-.69 0-1.25.56-1.25 1.25v10c0 .69.56 1.25 1.25 1.25h16c.69 0 1.25-.56 1.25-1.25V7c0-.69-.56-1.25-1.25-1.25zM1.25 7A2.75 2.75 0 0 1 4 4.25h16A2.75 2.75 0 0 1 22.75 7v10A2.75 2.75 0 0 1 20 19.75H4A2.75 2.75 0 0 1 1.25 17z" clip-rule="evenodd"/>',
-    link: '<path fill="currentColor" fill-rule="evenodd" d="m15.344 9.698-5.657 5.657-1.06-1.06 5.657-5.657z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M17.819 6.163a4.25 4.25 0 0 0-6.01 0l-1.415 1.414-1.06-1.06 1.414-1.414a5.75 5.75 0 0 1 8.132 8.132l-1.416 1.414-1.06-1.062 1.415-1.413a4.25 4.25 0 0 0 0-6.01M6.154 11.818l1.412-1.412-.53-.531-.53-.53-1.414 1.414-.003.003c-2.22 2.244-2.211 5.86.029 8.075 2.245 2.22 5.824 2.31 8.102.056l.003-.003 1.414-1.414-1.06-1.06-1.412 1.41v.002c-1.67 1.65-4.308 1.608-5.993-.057-1.645-1.627-1.659-4.293-.018-5.953" clip-rule="evenodd"/>',
-    copy: '<path fill="currentColor" fill-rule="evenodd" d="M8 3.75a.25.25 0 0 0-.25.25v12c0 .138.112.25.25.25h12a.25.25 0 0 0 .25-.25V4a.25.25 0 0 0-.25-.25zM6.25 4c0-.966.784-1.75 1.75-1.75h12c.966 0 1.75.784 1.75 1.75v12A1.75 1.75 0 0 1 20 17.75H8A1.75 1.75 0 0 1 6.25 16z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M3.75 9v9A2.25 2.25 0 0 0 6 20.25h9v1.5H6A3.75 3.75 0 0 1 2.25 18V9z" clip-rule="evenodd"/>',
-    'scan-qrcode': '<path fill="currentColor" d="M2.25 4c0-.964.786-1.75 1.75-1.75h3v1.5H4a.253.253 0 0 0-.25.25v3h-1.5zM20.25 4a.253.253 0 0 0-.25-.25h-3v-1.5h3c.964 0 1.75.786 1.75 1.75v3h-1.5zM20.25 20v-3h1.5v3c0 .964-.786 1.75-1.75 1.75h-3v-1.5h3c.136 0 .25-.114.25-.25M2.25 20v-3h1.5v3c0 .136.114.25.25.25h3v1.5H4c-.964 0-1.75-.786-1.75-1.75M9.5 7.5v2h-2v-2zM11 6H6v5h5zM16.5 7.5v2h-2v-2zM18 6h-5v5h5zM9.5 14.5v2h-2v-2zM11 13H6v5h5zM14.5 16.5H13V18h1.5zM18 15h-1.5v3H18z"/><path fill="currentColor" d="M18 15h-3v1.5h3zM14.5 13H13v1.5h1.5z"/>',
-    'share-alt': '<path fill="currentColor" fill-rule="evenodd" d="M13.69 3.317a.75.75 0 0 1 .804.119l8 7a.75.75 0 0 1 0 1.128l-8 7A.75.75 0 0 1 13.25 18v-3.24c-1.925.051-3.579.315-5.062.932-1.659.692-3.157 1.85-4.588 3.758A.75.75 0 0 1 2.25 19c0-4.145 1.147-6.888 3.291-8.698 1.96-1.655 4.655-2.437 7.709-2.943V4a.75.75 0 0 1 .44-.683m1.06 2.336V8a.75.75 0 0 1-.638.742c-3.283.497-5.85 1.225-7.603 2.706-1.359 1.147-2.303 2.812-2.631 5.39 1.153-1.15 2.386-1.969 3.734-2.53 1.928-.804 4.04-1.058 6.388-1.058a.75.75 0 0 1 .75.75v2.347L20.861 11z" clip-rule="evenodd"/>',
-};
-const PLATFORM_ICON_MAP = {
-    facebook: 'facebook',
-    x: 'x',
-    instagram: 'instagram',
-    linkedin: 'linkedin',
-    pinterest: 'pinterest',
-    whatsapp: 'whatsapp',
-    telegram: 'telegram',
-    email: 'mail',
-    link: 'link',
-    qr: 'scan-qrcode',
-};
-function createShareIcon(name, size = 24) {
-    const template = document.createElement('template');
-    template.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" width="${size}" height="${size}" aria-hidden="true" focusable="false" data-designbase-icon="${name}">${SHARE_ICON_PATHS[name]}</svg>`;
-    return template.content.firstElementChild;
-}
-function createSharePlatformIcon(platform, size = 24) {
-    return createShareIcon(PLATFORM_ICON_MAP[platform], size);
-}
-
-export { createShareIcon, createSharePlatformIcon };
+const l={facebook:'<path fill="currentColor" d="M2.002 12.001c0 4.99 3.656 9.126 8.437 9.879v-6.988h-2.54v-2.891h2.54V9.798c0-2.508 1.493-3.891 3.776-3.891q1.095 0 2.24.195V8.56h-1.264c-1.24 0-1.628.772-1.628 1.563v1.875h2.771l-.443 2.891h-2.328v6.988C18.344 21.129 22 16.992 22 12.001c0-5.522-4.477-10-9.999-10-5.522.001-10 4.478-10 10"/>',x:'<path fill="currentColor" d="M17.801 3h3.066l-6.731 7.638L22 21h-6.171l-4.832-6.297L5.466 21H2.4l7.13-8.17L2 3h6.325l4.365 5.752zm-1.073 16.207h1.7L7.432 4.727H5.605z"/>',instagram:'<path fill="currentColor" fill-rule="evenodd" d="M7.376 12a4.623 4.623 0 1 0 9.246.002A4.623 4.623 0 0 0 7.376 12m1.619 0a3.003 3.003 0 1 1 6.007.001 3.003 3.003 0 0 1-6.007 0m8.889-4.793a1.078 1.078 0 1 0-2.156 0 1.078 1.078 0 0 0 2.156 0m.016-3.728a6.6 6.6 0 0 0-2.186-.42c-.963-.042-1.268-.054-3.71-.054s-2.755 0-3.71.054a6.6 6.6 0 0 0-2.184.42A4.6 4.6 0 0 0 3.477 6.11a6.6 6.6 0 0 0-.419 2.186c-.043.962-.056 1.267-.056 3.71s0 2.753.056 3.71c.015.748.156 1.486.419 2.187a4.6 4.6 0 0 0 2.634 2.632 6.6 6.6 0 0 0 2.185.45c.963.042 1.268.055 3.71.055s2.755 0 3.71-.055a6.6 6.6 0 0 0 2.186-.42 4.61 4.61 0 0 0 2.633-2.632c.263-.7.404-1.438.419-2.186.043-.962.056-1.267.056-3.71s0-2.753-.056-3.71a6.6 6.6 0 0 0-.421-2.217A4.6 4.6 0 0 0 17.9 3.479m1.104 13.852a2.99 2.99 0 0 1-1.712 1.71 5 5 0 0 1-1.67.312c-.95.044-1.218.055-3.654.055-2.438 0-2.687 0-3.655-.055a5 5 0 0 1-1.67-.311 2.99 2.99 0 0 1-1.718-1.711 5.1 5.1 0 0 1-.311-1.67c-.043-.95-.053-1.217-.053-3.653s0-2.686.053-3.655a5 5 0 0 1 .311-1.687c.305-.79.93-1.41 1.719-1.712a5 5 0 0 1 1.669-.311c.95-.043 1.218-.055 3.655-.055s2.687 0 3.654.055a5 5 0 0 1 1.67.31 3 3 0 0 1 1.712 1.713 5.1 5.1 0 0 1 .311 1.669c.043.95.054 1.218.054 3.655s0 2.698-.043 3.654h-.011v-.001a5 5 0 0 1-.311 1.688" clip-rule="evenodd"/>',linkedin:'<path fill="currentColor" fill-rule="evenodd" d="M17 21v-6.75c0-1.059-1.188-1.944-2.246-1.944-1.06 0-1.754.885-1.754 1.944V21H9V9h4v2c.662-1.071 2.356-1.763 3.525-1.763C18.997 9.237 21 11.28 21 13.75V21zM3 21V9h4v12zM7 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0" clip-rule="evenodd"/>',youtube:'<path fill="currentColor" d="M23.498 6.186a3.02 3.02 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.02 3.02 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.02 3.02 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.02 3.02 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814M9.545 15.568V8.432L15.818 12z"/>',pinterest:'<path fill="currentColor" d="M12 2C6.474 2 2 6.478 2 12.008a10 10 0 0 0 6.351 9.316c-.09-.797-.165-1.999.03-2.87.18-.782 1.172-4.974 1.172-4.974s-.3-.601-.3-1.488c0-1.397.81-2.434 1.801-2.434.856 0 1.261.646 1.261 1.413 0 .856-.54 2.149-.825 3.335-.24.992.495 1.804 1.486 1.804 1.772 0 3.138-1.879 3.138-4.583 0-2.39-1.727-4.072-4.174-4.072-2.838 0-4.52 2.133-4.52 4.342 0 .857.33 1.788.751 2.284.075.105.09.18.075.286-.075.315-.24.991-.27 1.127-.045.18-.15.225-.33.135-1.247-.586-2.027-2.404-2.027-3.877 0-3.155 2.297-6.056 6.606-6.056 3.469 0 6.156 2.48 6.156 5.77 0 3.442-2.177 6.222-5.18 6.222-1.006 0-1.967-.526-2.297-1.142l-.616 2.374c-.225.871-.84 1.953-1.246 2.63.931.285 1.922.45 2.958.45 5.526 0 10-4.478 10-10.007C22 6.478 17.526 2 12 2"/>',whatsapp:'<path fill="currentColor" d="M12.042 2a9.92 9.92 0 0 1 7.044 2.906A9.83 9.83 0 0 1 22 11.918c-.003 5.464-4.47 9.91-9.958 9.91h-.005a10 10 0 0 1-4.758-1.206L2 22l1.413-5.136a9.86 9.86 0 0 1-1.329-4.954C2.086 6.446 6.553 2 12.042 2M8.516 7.333a.92.92 0 0 0-.663.31c-.228.249-.872.848-.872 2.066s.89 2.394 1.016 2.562c.124.165 1.722 2.746 4.251 3.739 2.101.825 2.53.661 2.985.62.457-.041 1.473-.6 1.68-1.178s.208-1.074.146-1.178-.229-.165-.478-.289-1.472-.723-1.7-.805-.394-.124-.56.124-.643.805-.788.97c-.145.166-.29.187-.539.063s-1.05-.386-2-1.23c-.74-.656-1.239-1.466-1.385-1.714s-.015-.383.11-.506c.111-.111.248-.29.373-.434.124-.144.166-.248.249-.413s.04-.31-.022-.434c-.062-.123-.545-1.348-.766-1.838-.187-.413-.383-.422-.56-.43z"/>',telegram:'<path fill="currentColor" d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m4.08 6.012c-.375.008-.958.209-3.73 1.366-.975.408-2.915 1.248-5.829 2.514-.466.191-.716.375-.74.558-.042.35.457.458 1.081.657.517.167 1.2.358 1.558.367.325.008.682-.125 1.082-.4 2.72-1.838 4.118-2.77 4.213-2.789.066-.017.15-.033.208.017s.059.15.05.175c-.05.208-2.604 2.537-2.755 2.689-.566.583-1.208.94-.217 1.59.858.566 1.349.924 2.231 1.499.558.366 1 .799 1.583.749.266-.025.54-.275.682-1.024.333-1.765.982-5.603 1.132-7.185.017-.133 0-.308-.017-.392a.44.44 0 0 0-.141-.274c-.125-.1-.308-.117-.39-.117"/>',mail:'<path fill="currentColor" fill-rule="evenodd" d="m1.665 8.67.67-1.34L12 12.161l9.665-4.833.67 1.342L12 13.839z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M4 5.75c-.69 0-1.25.56-1.25 1.25v10c0 .69.56 1.25 1.25 1.25h16c.69 0 1.25-.56 1.25-1.25V7c0-.69-.56-1.25-1.25-1.25zM1.25 7A2.75 2.75 0 0 1 4 4.25h16A2.75 2.75 0 0 1 22.75 7v10A2.75 2.75 0 0 1 20 19.75H4A2.75 2.75 0 0 1 1.25 17z" clip-rule="evenodd"/>',link:'<path fill="currentColor" fill-rule="evenodd" d="m15.344 9.698-5.657 5.657-1.06-1.06 5.657-5.657z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M17.819 6.163a4.25 4.25 0 0 0-6.01 0l-1.415 1.414-1.06-1.06 1.414-1.414a5.75 5.75 0 0 1 8.132 8.132l-1.416 1.414-1.06-1.062 1.415-1.413a4.25 4.25 0 0 0 0-6.01M6.154 11.818l1.412-1.412-.53-.531-.53-.53-1.414 1.414-.003.003c-2.22 2.244-2.211 5.86.029 8.075 2.245 2.22 5.824 2.31 8.102.056l.003-.003 1.414-1.414-1.06-1.06-1.412 1.41v.002c-1.67 1.65-4.308 1.608-5.993-.057-1.645-1.627-1.659-4.293-.018-5.953" clip-rule="evenodd"/>',copy:'<path fill="currentColor" fill-rule="evenodd" d="M8 3.75a.25.25 0 0 0-.25.25v12c0 .138.112.25.25.25h12a.25.25 0 0 0 .25-.25V4a.25.25 0 0 0-.25-.25zM6.25 4c0-.966.784-1.75 1.75-1.75h12c.966 0 1.75.784 1.75 1.75v12A1.75 1.75 0 0 1 20 17.75H8A1.75 1.75 0 0 1 6.25 16z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M3.75 9v9A2.25 2.25 0 0 0 6 20.25h9v1.5H6A3.75 3.75 0 0 1 2.25 18V9z" clip-rule="evenodd"/>',"scan-qrcode":'<path fill="currentColor" d="M2.25 4c0-.964.786-1.75 1.75-1.75h3v1.5H4a.253.253 0 0 0-.25.25v3h-1.5zM20.25 4a.253.253 0 0 0-.25-.25h-3v-1.5h3c.964 0 1.75.786 1.75 1.75v3h-1.5zM20.25 20v-3h1.5v3c0 .964-.786 1.75-1.75 1.75h-3v-1.5h3c.136 0 .25-.114.25-.25M2.25 20v-3h1.5v3c0 .136.114.25.25.25h3v1.5H4c-.964 0-1.75-.786-1.75-1.75M9.5 7.5v2h-2v-2zM11 6H6v5h5zM16.5 7.5v2h-2v-2zM18 6h-5v5h5zM9.5 14.5v2h-2v-2zM11 13H6v5h5zM14.5 16.5H13V18h1.5zM18 15h-1.5v3H18z"/><path fill="currentColor" d="M18 15h-3v1.5h3zM14.5 13H13v1.5h1.5z"/>',"share-alt":'<path fill="currentColor" fill-rule="evenodd" d="M13.69 3.317a.75.75 0 0 1 .804.119l8 7a.75.75 0 0 1 0 1.128l-8 7A.75.75 0 0 1 13.25 18v-3.24c-1.925.051-3.579.315-5.062.932-1.659.692-3.157 1.85-4.588 3.758A.75.75 0 0 1 2.25 19c0-4.145 1.147-6.888 3.291-8.698 1.96-1.655 4.655-2.437 7.709-2.943V4a.75.75 0 0 1 .44-.683m1.06 2.336V8a.75.75 0 0 1-.638.742c-3.283.497-5.85 1.225-7.603 2.706-1.359 1.147-2.303 2.812-2.631 5.39 1.153-1.15 2.386-1.969 3.734-2.53 1.928-.804 4.04-1.058 6.388-1.058a.75.75 0 0 1 .75.75v2.347L20.861 11z" clip-rule="evenodd"/>'},e={facebook:"facebook",x:"x",instagram:"instagram",linkedin:"linkedin",pinterest:"pinterest",whatsapp:"whatsapp",telegram:"telegram",email:"mail",link:"link",qr:"scan-qrcode"};function createShareIcon(e,r=24){const c=document.createElement("template");return c.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" width="${r}" height="${r}" aria-hidden="true" focusable="false" data-designbase-icon="${e}">${l[e]}</svg>`,c.content.firstElementChild}function createSharePlatformIcon(l,r=24){return createShareIcon(e[l],r)}export{createShareIcon,createSharePlatformIcon};

package/dist/esm/components/db-share.js

@@ -1,489 +1 @@
-import { createShareIcon, createSharePlatformIcon } from './db-share-icons.js';
-
-const DEFAULT_PLATFORMS = ['facebook', 'x', 'linkedin', 'whatsapp', 'email', 'link'];
-const PLATFORM_CONFIGS = {
-    facebook: {
-        name: 'Facebook',
-        color: '#1877f2',
-        shareUrl: 'https://www.facebook.com/sharer/sharer.php?u={url}',
-    },
-    x: {
-        name: 'X',
-        color: '#000000',
-        shareUrl: 'https://twitter.com/intent/tweet?url={url}&text={title}&hashtags={hashtags}',
-    },
-    instagram: {
-        name: 'Instagram',
-        color: '#e4405f',
-        shareUrl: 'https://www.instagram.com/',
-        customShare: () => {
-            window.alert('Instagram에 직접 공유하려면 링크를 복사하여 사용하세요.');
-        },
-    },
-    linkedin: {
-        name: 'LinkedIn',
-        color: '#0077b5',
-        shareUrl: 'https://www.linkedin.com/sharing/share-offsite/?url={url}',
-    },
-    pinterest: {
-        name: 'Pinterest',
-        color: '#bd081c',
-        shareUrl: 'https://pinterest.com/pin/create/button/?url={url}&description={title}&media={imageUrl}',
-    },
-    whatsapp: {
-        name: 'WhatsApp',
-        color: '#25d366',
-        shareUrl: 'https://wa.me/?text={title}%20{url}',
-    },
-    telegram: {
-        name: 'Telegram',
-        color: '#0088cc',
-        shareUrl: 'https://t.me/share/url?url={url}&text={title}',
-    },
-    email: {
-        name: '이메일',
-        color: '#ea4335',
-        shareUrl: 'mailto:?subject={title}&body={description}%20{url}',
-    },
-    link: {
-        name: '링크 복사',
-        color: '#6c757d',
-        shareUrl: '',
-    },
-    qr: {
-        name: 'QR 코드',
-        color: '#6c757d',
-        shareUrl: '',
-    },
-};
-class DbShare extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.isCopied = false;
-        this.qrCodeData = '';
-        this.copyResetTimer = null;
-        this.modalEl = null;
-        this.contentSlot = null;
-        this.dropdownEl = null;
-    }
-    static get observedAttributes() {
-        return [
-            'url',
-            'title',
-            'description',
-            'image-url',
-            'hashtags',
-            'variant',
-            'size',
-            'position',
-            'platforms',
-            'button-text',
-            'modal-title',
-            'show-qr-code',
-            'qr-code-size',
-            'copy-success-message',
-            'open',
-        ];
-    }
-    connectedCallback() {
-        this.render();
-    }
-    disconnectedCallback() {
-        if (this.copyResetTimer)
-            clearTimeout(this.copyResetTimer);
-    }
-    attributeChangedCallback(name) {
-        if (name === 'open' && this.getAttribute('variant') === 'modal' && this.modalEl) {
-            this.syncModalOpen();
-            return;
-        }
-        if (name === 'url' && this.contentSlot) {
-            this.refreshLinkInputValue();
-            return;
-        }
-        this.render();
-    }
-    get open() {
-        return this.hasAttribute('open') && this.getAttribute('open') !== 'false';
-    }
-    set open(value) {
-        if (value)
-            this.setAttribute('open', 'true');
-        else
-            this.removeAttribute('open');
-    }
-    parseListAttribute(name) {
-        const raw = this.getAttribute(name);
-        if (!raw)
-            return [];
-        try {
-            const parsed = JSON.parse(raw);
-            if (Array.isArray(parsed))
-                return parsed.map((item) => String(item).trim()).filter(Boolean);
-        }
-        catch {
-            // fall through to comma-separated parsing
-        }
-        return raw
-            .split(',')
-            .map((item) => item.trim())
-            .filter(Boolean);
-    }
-    getResolvedUrl() {
-        const explicit = this.getAttribute('url');
-        if (explicit)
-            return explicit;
-        if (typeof window !== 'undefined' && window.location?.href) {
-            return window.location.href;
-        }
-        return '';
-    }
-    getContext() {
-        return {
-            url: this.getResolvedUrl(),
-            title: this.getAttribute('share-title') || this.getAttribute('title') || '',
-            description: this.getAttribute('description') || '',
-            imageUrl: this.getAttribute('image-url') || '',
-            hashtags: this.parseListAttribute('hashtags'),
-            host: this,
-        };
-    }
-    getActivePlatforms() {
-        const platforms = this.parseListAttribute('platforms');
-        const resolved = platforms.length > 0 ? platforms : DEFAULT_PLATFORMS;
-        return resolved.filter((platform) => platform in PLATFORM_CONFIGS);
-    }
-    replaceUrlVariables(template, context) {
-        return template
-            .replace('{url}', encodeURIComponent(context.url))
-            .replace('{title}', encodeURIComponent(context.title))
-            .replace('{description}', encodeURIComponent(context.description))
-            .replace('{imageUrl}', encodeURIComponent(context.imageUrl))
-            .replace('{hashtags}', context.hashtags.join(','));
-    }
-    async handleCopyLink(context) {
-        try {
-            await navigator.clipboard.writeText(context.url);
-            this.isCopied = true;
-            this.dispatchEvent(new CustomEvent('db-copy-success', {
-                bubbles: true,
-                composed: true,
-                detail: { url: context.url },
-            }));
-            this.refreshContent();
-            if (this.copyResetTimer)
-                clearTimeout(this.copyResetTimer);
-            this.copyResetTimer = setTimeout(() => {
-                this.isCopied = false;
-                this.refreshContent();
-            }, 3000);
-        }
-        catch (error) {
-            this.dispatchEvent(new CustomEvent('db-copy-error', {
-                bubbles: true,
-                composed: true,
-                detail: { error },
-            }));
-        }
-    }
-    handleShowQrCode(context) {
-        this.qrCodeData = context.url;
-        if (this.getAttribute('variant') === 'modal') {
-            this.open = true;
-            this.refreshContent();
-            return;
-        }
-        this.refreshContent();
-    }
-    handlePlatformShare(platform) {
-        const context = this.getContext();
-        const config = PLATFORM_CONFIGS[platform];
-        if (!config)
-            return;
-        try {
-            if (platform === 'link') {
-                void this.handleCopyLink(context);
-            }
-            else if (platform === 'qr') {
-                this.handleShowQrCode(context);
-            }
-            else if (config.customShare) {
-                config.customShare(context);
-            }
-            else if (config.shareUrl) {
-                const shareUrl = this.replaceUrlVariables(config.shareUrl, context);
-                window.open(shareUrl, '_blank', 'width=600,height=400');
-            }
-            this.dispatchEvent(new CustomEvent('db-share', {
-                bubbles: true,
-                composed: true,
-                detail: { platform, url: context.url },
-            }));
-        }
-        catch (error) {
-            this.dispatchEvent(new CustomEvent('db-share-error', {
-                bubbles: true,
-                composed: true,
-                detail: { platform, error },
-            }));
-        }
-    }
-    getPlacement() {
-        const position = this.getAttribute('position') || 'bottom';
-        if (position === 'top')
-            return 'top-left';
-        if (position === 'left')
-            return 'top-left';
-        if (position === 'right')
-            return 'bottom-right';
-        return 'bottom-left';
-    }
-    mapButtonSize() {
-        const size = this.getAttribute('size') || 'm';
-        if (size === 's')
-            return 's';
-        if (size === 'l')
-            return 'l';
-        return 'm';
-    }
-    createTriggerButton(className) {
-        const button = document.createElement('db-button');
-        button.className = className || 'designbase-wc-share__trigger';
-        button.setAttribute('variant', 'secondary');
-        button.setAttribute('size', this.mapButtonSize());
-        button.textContent = this.getAttribute('button-text') || '공유';
-        button.prepend(createShareIcon('share-alt', 16));
-        button.addEventListener('db-click', () => {
-            const variant = this.getAttribute('variant');
-            if (variant === 'modal') {
-                this.open = true;
-                return;
-            }
-            this.open = !this.open;
-        });
-        return button;
-    }
-    createPlatformIcon(platform) {
-        const iconWrap = document.createElement('span');
-        iconWrap.className = 'designbase-wc-share__platform-icon';
-        iconWrap.append(createSharePlatformIcon(platform, 24));
-        return iconWrap;
-    }
-    createPlatformButton(platform) {
-        const config = PLATFORM_CONFIGS[platform];
-        const button = document.createElement('button');
-        button.type = 'button';
-        button.className = [
-            'designbase-wc-share__platform-button',
-            `designbase-wc-share__platform-button--${platform}`,
-            platform === 'link' && this.isCopied ? 'designbase-wc-share__platform-button--copied' : '',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        button.style.setProperty('--platform-color', config.color);
-        button.title = config.name;
-        button.setAttribute('aria-label', `${config.name}에 공유하기`);
-        button.append(this.createPlatformIcon(platform));
-        const name = document.createElement('span');
-        name.className = 'designbase-wc-share__platform-name';
-        name.textContent = config.name;
-        button.append(name);
-        if (platform === 'link' && this.isCopied) {
-            const success = document.createElement('span');
-            success.className = 'designbase-wc-share__copy-success';
-            success.append(createShareIcon('copy', 12));
-            const label = document.createElement('span');
-            label.textContent = '복사됨!';
-            success.append(label);
-            button.append(success);
-        }
-        button.addEventListener('click', () => this.handlePlatformShare(platform));
-        return button;
-    }
-    createLinkInput(url) {
-        const input = document.createElement('db-input');
-        input.className = 'designbase-wc-share__link-input';
-        input.setAttribute('type', 'text');
-        input.setAttribute('readonly', '');
-        input.setAttribute('size', 's');
-        input.setAttribute('full-width', '');
-        input.setAttribute('value', url);
-        customElements.whenDefined('db-input').then(() => {
-            input.setAttribute('value', url);
-            input.value = url;
-        });
-        return input;
-    }
-    refreshLinkInputValue() {
-        const url = this.getResolvedUrl();
-        const input = this.contentSlot?.querySelector('db-input.designbase-wc-share__link-input');
-        if (!input)
-            return;
-        input.setAttribute('value', url);
-        input.value = url;
-    }
-    createCopyButton(context) {
-        const copyButton = document.createElement('db-button');
-        copyButton.className = 'designbase-wc-share__copy-button';
-        copyButton.setAttribute('size', 's');
-        copyButton.setAttribute('variant', 'primary');
-        const iconWrap = document.createElement('span');
-        iconWrap.className = 'designbase-wc-button__start-icon';
-        iconWrap.setAttribute('aria-hidden', 'true');
-        iconWrap.append(createShareIcon(this.isCopied ? 'copy' : 'link', 16));
-        copyButton.append(iconWrap);
-        copyButton.append(document.createTextNode(this.isCopied ? '복사됨!' : '복사'));
-        copyButton.addEventListener('db-click', () => {
-            void this.handleCopyLink(context);
-        });
-        return copyButton;
-    }
-    generateQrCodeUrl() {
-        const qrCodeSize = Number(this.getAttribute('qr-code-size') || 200);
-        return `https://api.qrserver.com/v1/create-qr-code/?size=${qrCodeSize}x${qrCodeSize}&data=${encodeURIComponent(this.qrCodeData)}`;
-    }
-    createShareContent() {
-        const content = document.createElement('div');
-        content.className = 'designbase-wc-share__content';
-        this.populateShareContent(content);
-        return content;
-    }
-    populateShareContent(content) {
-        const platformsWrap = document.createElement('div');
-        platformsWrap.className = 'designbase-wc-share__platforms';
-        this.getActivePlatforms().forEach((platform) => {
-            platformsWrap.append(this.createPlatformButton(platform));
-        });
-        content.append(platformsWrap);
-        const showQrCode = this.getAttribute('show-qr-code') !== 'false';
-        if (showQrCode && this.qrCodeData) {
-            const qrSection = document.createElement('div');
-            qrSection.className = 'designbase-wc-share__qr-section';
-            const qrTitle = document.createElement('h4');
-            qrTitle.className = 'designbase-wc-share__qr-title';
-            qrTitle.textContent = 'QR 코드';
-            qrSection.append(qrTitle);
-            const qrCode = document.createElement('div');
-            qrCode.className = 'designbase-wc-share__qr-code';
-            const qrImage = document.createElement('img');
-            const qrCodeSize = Number(this.getAttribute('qr-code-size') || 200);
-            qrImage.src = this.generateQrCodeUrl();
-            qrImage.alt = 'QR Code';
-            qrImage.width = qrCodeSize;
-            qrImage.height = qrCodeSize;
-            qrCode.append(qrImage);
-            qrSection.append(qrCode);
-            const qrDescription = document.createElement('p');
-            qrDescription.className = 'designbase-wc-share__qr-description';
-            qrDescription.textContent = 'QR 코드를 스캔하여 링크에 접속하세요';
-            qrSection.append(qrDescription);
-            content.append(qrSection);
-        }
-        const context = this.getContext();
-        const linkPreview = document.createElement('div');
-        linkPreview.className = 'designbase-wc-share__link-preview';
-        const linkTitle = document.createElement('h4');
-        linkTitle.className = 'designbase-wc-share__link-title';
-        linkTitle.textContent = '공유 링크';
-        linkPreview.append(linkTitle);
-        const linkContainer = document.createElement('div');
-        linkContainer.className = 'designbase-wc-share__link-container';
-        linkContainer.append(this.createLinkInput(context.url));
-        linkContainer.append(this.createCopyButton(context));
-        linkPreview.append(linkContainer);
-        content.append(linkPreview);
-    }
-    refreshContent() {
-        const variant = this.getAttribute('variant');
-        if (variant === 'inline') {
-            const content = this.querySelector(':scope > .designbase-wc-share__content');
-            content?.replaceWith(this.createShareContent());
-            return;
-        }
-        if (variant === 'modal' && this.contentSlot) {
-            this.contentSlot.replaceChildren();
-            this.populateShareContent(this.contentSlot);
-        }
-    }
-    syncModalOpen() {
-        if (!this.modalEl)
-            return;
-        if (this.open) {
-            this.refreshLinkInputValue();
-            this.modalEl.setAttribute('open', 'true');
-        }
-        else {
-            this.modalEl.removeAttribute('open');
-        }
-    }
-    renderDropdown() {
-        const dropdown = document.createElement('db-dropdown');
-        dropdown.className = 'designbase-wc-share__dropdown';
-        dropdown.setAttribute('placement', this.getPlacement());
-        dropdown.setAttribute('label', this.getAttribute('button-text') || '공유');
-        dropdown.setAttribute('trigger-variant', 'secondary');
-        dropdown.setAttribute('trigger-icon', 'share-alt');
-        dropdown.setAttribute('size', this.mapButtonSize());
-        dropdown.setAttribute('items', JSON.stringify(this.getActivePlatforms().map((platform) => ({
-            id: platform,
-            label: PLATFORM_CONFIGS[platform].name,
-        }))));
-        dropdown.addEventListener('db-change', (event) => {
-            const detail = event.detail;
-            const platform = detail?.id;
-            if (platform)
-                this.handlePlatformShare(platform);
-        });
-        this.dropdownEl = dropdown;
-        this.append(dropdown);
-    }
-    renderModal() {
-        const trigger = this.createTriggerButton();
-        this.append(trigger);
-        const modal = document.createElement('db-modal');
-        modal.className = 'designbase-wc-share__modal';
-        modal.setAttribute('title', this.getAttribute('modal-title') || '공유하기');
-        modal.setAttribute('size', 'm');
-        this.contentSlot = document.createElement('div');
-        this.contentSlot.className = 'designbase-wc-share designbase-wc-share__content';
-        this.contentSlot.setAttribute('data-modal-part', 'body');
-        this.populateShareContent(this.contentSlot);
-        modal.append(this.contentSlot);
-        modal.addEventListener('db-close', () => {
-            this.open = false;
-            this.qrCodeData = '';
-            if (this.contentSlot) {
-                this.contentSlot.replaceChildren();
-                this.populateShareContent(this.contentSlot);
-            }
-        });
-        this.modalEl = modal;
-        this.append(modal);
-        this.syncModalOpen();
-    }
-    render() {
-        const variant = (this.getAttribute('variant') || 'button');
-        this.className = `designbase-wc-share designbase-wc-share--${variant}`;
-        this.replaceChildren();
-        this.modalEl = null;
-        this.contentSlot = null;
-        this.dropdownEl = null;
-        if (variant === 'inline') {
-            this.append(this.createShareContent());
-            return;
-        }
-        if (variant === 'dropdown') {
-            this.renderDropdown();
-            return;
-        }
-        if (variant === 'modal') {
-            this.renderModal();
-            return;
-        }
-        this.append(this.createTriggerButton());
-    }
-}
-if (!customElements.get('db-share'))
-    customElements.define('db-share', DbShare);
-
-export { DbShare };
+import{createShareIcon as t,createSharePlatformIcon as e}from"./db-share-icons.js";const s=["facebook","x","linkedin","whatsapp","email","link"],n={facebook:{name:"Facebook",color:"#1877f2",shareUrl:"https://www.facebook.com/sharer/sharer.php?u={url}"},x:{name:"X",color:"#000000",shareUrl:"https://twitter.com/intent/tweet?url={url}&text={title}&hashtags={hashtags}"},instagram:{name:"Instagram",color:"#e4405f",shareUrl:"https://www.instagram.com/",customShare:()=>{window.alert("Instagram에 직접 공유하려면 링크를 복사하여 사용하세요.")}},linkedin:{name:"LinkedIn",color:"#0077b5",shareUrl:"https://www.linkedin.com/sharing/share-offsite/?url={url}"},pinterest:{name:"Pinterest",color:"#bd081c",shareUrl:"https://pinterest.com/pin/create/button/?url={url}&description={title}&media={imageUrl}"},whatsapp:{name:"WhatsApp",color:"#25d366",shareUrl:"https://wa.me/?text={title}%20{url}"},telegram:{name:"Telegram",color:"#0088cc",shareUrl:"https://t.me/share/url?url={url}&text={title}"},email:{name:"이메일",color:"#ea4335",shareUrl:"mailto:?subject={title}&body={description}%20{url}"},link:{name:"링크 복사",color:"#6c757d",shareUrl:""},qr:{name:"QR 코드",color:"#6c757d",shareUrl:""}};class DbShare extends HTMLElement{constructor(){super(...arguments),this.isCopied=!1,this.qrCodeData="",this.copyResetTimer=null,this.modalEl=null,this.contentSlot=null,this.dropdownEl=null}static get observedAttributes(){return["url","title","description","image-url","hashtags","variant","size","position","platforms","button-text","modal-title","show-qr-code","qr-code-size","copy-success-message","open"]}connectedCallback(){this.render()}disconnectedCallback(){this.copyResetTimer&&clearTimeout(this.copyResetTimer)}attributeChangedCallback(t){"open"===t&&"modal"===this.getAttribute("variant")&&this.modalEl?this.syncModalOpen():"url"===t&&this.contentSlot?this.refreshLinkInputValue():this.render()}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(t){t?this.setAttribute("open","true"):this.removeAttribute("open")}parseListAttribute(t){const e=this.getAttribute(t);if(!e)return[];try{const t=JSON.parse(e);if(Array.isArray(t))return t.map(t=>String(t).trim()).filter(Boolean)}catch{}return e.split(",").map(t=>t.trim()).filter(Boolean)}getResolvedUrl(){const t=this.getAttribute("url");return t||("undefined"!=typeof window&&window.location?.href?window.location.href:"")}getContext(){return{url:this.getResolvedUrl(),title:this.getAttribute("share-title")||this.getAttribute("title")||"",description:this.getAttribute("description")||"",imageUrl:this.getAttribute("image-url")||"",hashtags:this.parseListAttribute("hashtags"),host:this}}getActivePlatforms(){const t=this.parseListAttribute("platforms");return(t.length>0?t:s).filter(t=>t in n)}replaceUrlVariables(t,e){return t.replace("{url}",encodeURIComponent(e.url)).replace("{title}",encodeURIComponent(e.title)).replace("{description}",encodeURIComponent(e.description)).replace("{imageUrl}",encodeURIComponent(e.imageUrl)).replace("{hashtags}",e.hashtags.join(","))}async handleCopyLink(t){try{await navigator.clipboard.writeText(t.url),this.isCopied=!0,this.dispatchEvent(new CustomEvent("db-copy-success",{bubbles:!0,composed:!0,detail:{url:t.url}})),this.refreshContent(),this.copyResetTimer&&clearTimeout(this.copyResetTimer),this.copyResetTimer=setTimeout(()=>{this.isCopied=!1,this.refreshContent()},3e3)}catch(t){this.dispatchEvent(new CustomEvent("db-copy-error",{bubbles:!0,composed:!0,detail:{error:t}}))}}handleShowQrCode(t){if(this.qrCodeData=t.url,"modal"===this.getAttribute("variant"))return this.open=!0,void this.refreshContent();this.refreshContent()}handlePlatformShare(t){const e=this.getContext(),s=n[t];if(s)try{if("link"===t)this.handleCopyLink(e);else if("qr"===t)this.handleShowQrCode(e);else if(s.customShare)s.customShare(e);else if(s.shareUrl){const t=this.replaceUrlVariables(s.shareUrl,e);window.open(t,"_blank","width=600,height=400")}this.dispatchEvent(new CustomEvent("db-share",{bubbles:!0,composed:!0,detail:{platform:t,url:e.url}}))}catch(e){this.dispatchEvent(new CustomEvent("db-share-error",{bubbles:!0,composed:!0,detail:{platform:t,error:e}}))}}getPlacement(){const t=this.getAttribute("position")||"bottom";return"top"===t||"left"===t?"top-left":"right"===t?"bottom-right":"bottom-left"}mapButtonSize(){const t=this.getAttribute("size")||"m";return"s"===t?"s":"l"===t?"l":"m"}createTriggerButton(e){const s=document.createElement("db-button");return s.className=e||"designbase-wc-share__trigger",s.setAttribute("variant","secondary"),s.setAttribute("size",this.mapButtonSize()),s.textContent=this.getAttribute("button-text")||"공유",s.prepend(t("share-alt",16)),s.addEventListener("db-click",()=>{"modal"!==this.getAttribute("variant")?this.open=!this.open:this.open=!0}),s}createPlatformIcon(t){const s=document.createElement("span");return s.className="designbase-wc-share__platform-icon",s.append(e(t,24)),s}createPlatformButton(e){const s=n[e],r=document.createElement("button");r.type="button",r.className=["designbase-wc-share__platform-button",`designbase-wc-share__platform-button--${e}`,"link"===e&&this.isCopied?"designbase-wc-share__platform-button--copied":""].filter(Boolean).join(" "),r.style.setProperty("--platform-color",s.color),r.title=s.name,r.setAttribute("aria-label",`${s.name}에 공유하기`),r.append(this.createPlatformIcon(e));const a=document.createElement("span");if(a.className="designbase-wc-share__platform-name",a.textContent=s.name,r.append(a),"link"===e&&this.isCopied){const e=document.createElement("span");e.className="designbase-wc-share__copy-success",e.append(t("copy",12));const s=document.createElement("span");s.textContent="복사됨!",e.append(s),r.append(e)}return r.addEventListener("click",()=>this.handlePlatformShare(e)),r}createLinkInput(t){const e=document.createElement("db-input");return e.className="designbase-wc-share__link-input",e.setAttribute("type","text"),e.setAttribute("readonly",""),e.setAttribute("size","s"),e.setAttribute("full-width",""),e.setAttribute("value",t),customElements.whenDefined("db-input").then(()=>{e.setAttribute("value",t),e.value=t}),e}refreshLinkInputValue(){const t=this.getResolvedUrl(),e=this.contentSlot?.querySelector("db-input.designbase-wc-share__link-input");e&&(e.setAttribute("value",t),e.value=t)}createCopyButton(e){const s=document.createElement("db-button");s.className="designbase-wc-share__copy-button",s.setAttribute("size","s"),s.setAttribute("variant","primary");const n=document.createElement("span");return n.className="designbase-wc-button__start-icon",n.setAttribute("aria-hidden","true"),n.append(t(this.isCopied?"copy":"link",16)),s.append(n),s.append(document.createTextNode(this.isCopied?"복사됨!":"복사")),s.addEventListener("db-click",()=>{this.handleCopyLink(e)}),s}generateQrCodeUrl(){const t=Number(this.getAttribute("qr-code-size")||200);return`https://api.qrserver.com/v1/create-qr-code/?size=${t}x${t}&data=${encodeURIComponent(this.qrCodeData)}`}createShareContent(){const t=document.createElement("div");return t.className="designbase-wc-share__content",this.populateShareContent(t),t}populateShareContent(t){const e=document.createElement("div");e.className="designbase-wc-share__platforms",this.getActivePlatforms().forEach(t=>{e.append(this.createPlatformButton(t))}),t.append(e);if("false"!==this.getAttribute("show-qr-code")&&this.qrCodeData){const e=document.createElement("div");e.className="designbase-wc-share__qr-section";const s=document.createElement("h4");s.className="designbase-wc-share__qr-title",s.textContent="QR 코드",e.append(s);const n=document.createElement("div");n.className="designbase-wc-share__qr-code";const r=document.createElement("img"),a=Number(this.getAttribute("qr-code-size")||200);r.src=this.generateQrCodeUrl(),r.alt="QR Code",r.width=a,r.height=a,n.append(r),e.append(n);const i=document.createElement("p");i.className="designbase-wc-share__qr-description",i.textContent="QR 코드를 스캔하여 링크에 접속하세요",e.append(i),t.append(e)}const s=this.getContext(),n=document.createElement("div");n.className="designbase-wc-share__link-preview";const r=document.createElement("h4");r.className="designbase-wc-share__link-title",r.textContent="공유 링크",n.append(r);const a=document.createElement("div");a.className="designbase-wc-share__link-container",a.append(this.createLinkInput(s.url)),a.append(this.createCopyButton(s)),n.append(a),t.append(n)}refreshContent(){const t=this.getAttribute("variant");if("inline"===t){const t=this.querySelector(":scope > .designbase-wc-share__content");return void t?.replaceWith(this.createShareContent())}"modal"===t&&this.contentSlot&&(this.contentSlot.replaceChildren(),this.populateShareContent(this.contentSlot))}syncModalOpen(){this.modalEl&&(this.open?(this.refreshLinkInputValue(),this.modalEl.setAttribute("open","true")):this.modalEl.removeAttribute("open"))}renderDropdown(){const t=document.createElement("db-dropdown");t.className="designbase-wc-share__dropdown",t.setAttribute("placement",this.getPlacement()),t.setAttribute("label",this.getAttribute("button-text")||"공유"),t.setAttribute("trigger-variant","secondary"),t.setAttribute("trigger-icon","share-alt"),t.setAttribute("size",this.mapButtonSize()),t.setAttribute("items",JSON.stringify(this.getActivePlatforms().map(t=>({id:t,label:n[t].name})))),t.addEventListener("db-change",t=>{const e=t.detail,s=e?.id;s&&this.handlePlatformShare(s)}),this.dropdownEl=t,this.append(t)}renderModal(){const t=this.createTriggerButton();this.append(t);const e=document.createElement("db-modal");e.className="designbase-wc-share__modal",e.setAttribute("title",this.getAttribute("modal-title")||"공유하기"),e.setAttribute("size","m"),this.contentSlot=document.createElement("div"),this.contentSlot.className="designbase-wc-share designbase-wc-share__content",this.contentSlot.setAttribute("data-modal-part","body"),this.populateShareContent(this.contentSlot),e.append(this.contentSlot),e.addEventListener("db-close",()=>{this.open=!1,this.qrCodeData="",this.contentSlot&&(this.contentSlot.replaceChildren(),this.populateShareContent(this.contentSlot))}),this.modalEl=e,this.append(e),this.syncModalOpen()}render(){const t=this.getAttribute("variant")||"button";this.className=`designbase-wc-share designbase-wc-share--${t}`,this.replaceChildren(),this.modalEl=null,this.contentSlot=null,this.dropdownEl=null,"inline"!==t?"dropdown"!==t?"modal"!==t?this.append(this.createTriggerButton()):this.renderModal():this.renderDropdown():this.append(this.createShareContent())}}customElements.get("db-share")||customElements.define("db-share",DbShare);export{DbShare};

package/dist/esm/components/db-sidebar.d.ts

@@ -7,11 +7,19 @@ interface DbSidebarItem {
     disabled?: boolean;
     badge?: string | number;
     badgeColor?: string;
+    /** 프로필 메뉴 우측에 표시할 현재 값 (예: "System", "한국어") */
+    value?: string;
+    /** 2depth 선택 상태. 선택된 항목에는 체크 아이콘이 표시됩니다. */
+    selected?: boolean;
+    /** 프로필 메뉴에서 이 항목 앞에 구분선을 표시합니다. */
+    dividerBefore?: boolean;
     children?: DbSidebarItem[];
 }
 interface DbSidebarSection {
     id: string;
     title?: string;
+    /** 이전 섹션과의 간격 */
+    gap?: 'none' | 's' | 'm' | 'l';
     items: DbSidebarItem[];
 }
 interface DbSidebarUserProfile {
@@ -42,7 +50,9 @@ declare class DbSidebar extends HTMLElement {
     private userMenuOpen;
     private projectMenuOpen;
     private flyoutItemId;
+    private userFlyoutItemId;
     private flyoutCloseTimer;
+    private userFlyoutCloseTimer;
     private outsideHandler;
     static get observedAttributes(): string[];
     connectedCallback(): void;
@@ -77,6 +87,12 @@ declare class DbSidebar extends HTMLElement {
     set bottomSections(value: DbSidebarSection[] | string);
     get promoBanner(): DbSidebarPromoBanner | null;
     set promoBanner(value: DbSidebarPromoBanner | string | null);
+    get headerType(): 'default' | 'back';
+    set headerType(value: 'default' | 'back');
+    get backLabel(): string;
+    set backLabel(value: string);
+    get backHref(): string;
+    set backHref(value: string);
     private parseSections;
     private parseUserMenuItems;
     private parseUserProfile;
@@ -92,9 +108,13 @@ declare class DbSidebar extends HTMLElement {
     private cancelFlyoutClose;
     private showFlyout;
     private scheduleFlyoutClose;
+    private cancelUserFlyoutClose;
+    private setUserFlyout;
+    private scheduleUserFlyoutClose;
     private syncHostClasses;
     private dispatchItemClick;
     private dispatchUserMenuItemClick;
+    private dispatchBackClick;
     private dispatchProjectChange;
     private dispatchProjectManage;
     private dispatchPromoCtaClick;