@coyalabs/bts-style 1.3.14 → 1.3.17

package/dist/Components/Popup/popupStore.d.ts

@@ -1,10 +1,18 @@
 export namespace popupStore {
     let subscribe: (this: void, run: import("svelte/store").Subscriber<{
+        isOpen: boolean;
+        title: string;
+        subtitle: string;
+        component: any;
+        props: {};
+        widthRatio?: undefined;
+    } | {
         isOpen: boolean;
         title: string;
         subtitle: string;
         component: any;
         props: any;
+        widthRatio: number;
     }>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
     namespace stack {
         let subscribe_1: (this: void, run: import("svelte/store").Subscriber<PopupState[]>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
@@ -18,10 +26,12 @@ export namespace popupStore {
         onCancel?: (() => void) | undefined;
         confirmText?: string | undefined;
         cancelText?: string | undefined;
+        popupWidthRatio?: number | undefined;
     }): void;
     function alert(title: string, message: string, options?: {
         onOk?: (() => void) | undefined;
         okText?: string | undefined;
+        popupWidthRatio?: number | undefined;
     }): void;
     function prompt(title: string, message: string, options?: {
         onSubmit?: ((value: string) => void) | undefined;
@@ -30,6 +40,7 @@ export namespace popupStore {
         submitText?: string | undefined;
         cancelText?: string | undefined;
         label?: string | undefined;
+        popupWidthRatio?: number | undefined;
     }): void;
 }
 export type PopupState = {
@@ -38,4 +49,5 @@ export type PopupState = {
     component: any;
     props: any;
     id: string;
+    widthRatio: number;
 };

package/dist/Components/Popup/popupStore.js

@@ -10,8 +10,56 @@ import PromptPopup from './PromptPopup.svelte';
  * @property {any} component
  * @property {any} props
  * @property {string} id
+ * @property {number} widthRatio
  */
 
+/**
+ * @param {unknown} value
+ */
+function normalizePopupWidthRatio(value) {
+  const ratio = Number(value);
+  return Number.isFinite(ratio) && ratio > 0 ? ratio : 1;
+}
+
+/**
+ * @param {any} rawProps
+ */
+function splitPopupProps(rawProps = {}) {
+  if (!rawProps || typeof rawProps !== 'object' || Array.isArray(rawProps)) {
+    return {
+      props: {},
+      widthRatio: 1
+    };
+  }
+
+  const { popupWidthRatio, ...props } = rawProps;
+
+  return {
+    props,
+    widthRatio: normalizePopupWidthRatio(popupWidthRatio)
+  };
+}
+
+/**
+ * @param {string} title
+ * @param {string} subtitle
+ * @param {any} component
+ * @param {any} rawProps
+ * @returns {PopupState}
+ */
+function createPopupEntry(title, subtitle, component, rawProps = {}) {
+  const { props, widthRatio } = splitPopupProps(rawProps);
+
+  return {
+    id: crypto.randomUUID(),
+    title,
+    subtitle,
+    component,
+    props,
+    widthRatio
+  };
+}
+
 function createPopupStore() {
   /** @type {import('svelte/store').Writable<PopupState[]>} */
   const stack = writable([]);
@@ -33,7 +81,8 @@ function createPopupStore() {
       title: top.title,
       subtitle: top.subtitle || '',
       component: top.component,
-      props: top.props
+      props: top.props,
+      widthRatio: top.widthRatio
     };
   });
 
@@ -44,13 +93,7 @@ function createPopupStore() {
     stack: { subscribe: stack.subscribe },
 
     open: (/** @type {string} */ title, /** @type {any} */ component, props = {}, subtitle = '') => {
-      stack.update(s => [...s, {
-        id: crypto.randomUUID(),
-        title,
-        subtitle,
-        component,
-        props
-      }]);
+      stack.update(s => [...s, createPopupEntry(title, subtitle, component, props)]);
     },
 
     close: () => {
@@ -70,15 +113,10 @@ function createPopupStore() {
      * @param {() => void} [options.onCancel]
      * @param {string} [options.confirmText]
      * @param {string} [options.cancelText]
+     * @param {number} [options.popupWidthRatio]
      */
     confirm: (title, message, options = {}) => {
-      stack.update(s => [...s, {
-        id: crypto.randomUUID(),
-        title,
-        subtitle: message,
-        component: ConfirmPopup,
-        props: options
-      }]);
+      stack.update(s => [...s, createPopupEntry(title, message, ConfirmPopup, options)]);
     },
 
     /**
@@ -88,15 +126,10 @@ function createPopupStore() {
      * @param {Object} options
      * @param {() => void} [options.onOk]
      * @param {string} [options.okText]
+     * @param {number} [options.popupWidthRatio]
      */
     alert: (title, message, options = {}) => {
-      stack.update(s => [...s, {
-        id: crypto.randomUUID(),
-        title,
-        subtitle: message,
-        component: AlertPopup,
-        props: options
-      }]);
+      stack.update(s => [...s, createPopupEntry(title, message, AlertPopup, options)]);
     },
 
     /**
@@ -110,15 +143,10 @@ function createPopupStore() {
      * @param {string} [options.submitText]
      * @param {string} [options.cancelText]
      * @param {string} [options.label]
+     * @param {number} [options.popupWidthRatio]
      */
     prompt: (title, message, options = {}) => {
-      stack.update(s => [...s, {
-        id: crypto.randomUUID(),
-        title,
-        subtitle: message,
-        component: PromptPopup,
-        props: options
-      }]);
+      stack.update(s => [...s, createPopupEntry(title, message, PromptPopup, options)]);
     }
   };
 }

package/dist/Components/ScrollContainer.svelte

@@ -1,4 +1,6 @@
 <script>
+  import { onMount, tick } from 'svelte';
+
   /**
    * @type {'auto' | 'scroll' | 'hidden' | 'visible'}
    */
@@ -53,11 +55,74 @@
    * @type {string}
    */
   export let borderRadius = '4px';
+
+  /**
+   * Hide scrollbars until the container has been scrolled away from its initial position.
+   * @type {boolean}
+   */
+  export let hideScrollbarUntilScroll = false;
+
+  /** @type {HTMLDivElement | null} */
+  let containerRef = null;
+
+  let hasBeenScrolled = false;
+
+  $: scrollbarsHidden = hideScrollbarUntilScroll && !hasBeenScrolled;
+
+  function updateScrolledState() {
+    if (!hideScrollbarUntilScroll || !containerRef) {
+      return;
+    }
+
+    if (containerRef.scrollTop > 0 || containerRef.scrollLeft > 0) {
+      hasBeenScrolled = true;
+    }
+  }
+
+  function handleScroll() {
+    updateScrolledState();
+  }
+
+  /**
+   * Reveal the scrollbars and replay the first wheel delta so the first scroll
+   * interaction still moves content even though overflow starts hidden.
+   * @param {WheelEvent} event
+   */
+  function handleInitialWheel(event) {
+    if (!scrollbarsHidden || !containerRef) {
+      return;
+    }
+
+    if (event.deltaX === 0 && event.deltaY === 0) {
+      return;
+    }
+
+    event.preventDefault();
+    hasBeenScrolled = true;
+
+    void tick().then(() => {
+      containerRef?.scrollBy({ left: event.deltaX, top: event.deltaY });
+    });
+  }
+
+  onMount(() => {
+    void tick().then(() => {
+      updateScrolledState();
+    });
+  });
+
+  $: if (!hideScrollbarUntilScroll) {
+    hasBeenScrolled = false;
+  }
 </script>
 
 <div
   class="scroll-container"
-  style="--overflow-x: {overflowX}; --overflow-y: {overflowY}; --width: {width}; --height: {height}; --max-width: {maxWidth}; --max-height: {maxHeight}; --scrollbar-size: {scrollbarSize}; --scroll-track-color: {trackColor}; --scroll-thumb-color: {thumbColor}; --scroll-thumb-hover-color: {thumbHoverColor}; --scroll-radius: {borderRadius};"
+  class:hidden-scrollbar-until-scroll={scrollbarsHidden}
+  bind:this={containerRef}
+  on:scroll={handleScroll}
+  on:wheel={handleInitialWheel}
+  style="--effective-overflow-x: {scrollbarsHidden ? 'hidden' : overflowX}; --effective-overflow-y: {scrollbarsHidden ? 'hidden' : overflowY}; --width: {width}; --height: {height}; --max-width: {maxWidth}; --max-height: {maxHeight}; --scrollbar-size: {scrollbarSize}; --scroll-track-color: {trackColor}; --scroll-thumb-color: {thumbColor}; --scroll-thumb-hover-color: {thumbHoverColor}; --scroll-radius: {borderRadius};"
 >
   <slot />
 </div>
@@ -68,17 +133,37 @@
     height: var(--height);
     max-width: var(--max-width);
     max-height: var(--max-height);
-    overflow-x: var(--overflow-x);
-    overflow-y: var(--overflow-y);
+    overflow-x: var(--effective-overflow-x);
+    overflow-y: var(--effective-overflow-y);
     scrollbar-color: var(--scroll-thumb-color) var(--scroll-track-color);
     scrollbar-width: thin;
   }
 
+  .scroll-container.hidden-scrollbar-until-scroll {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    scrollbar-color: transparent transparent;
+  }
+
   .scroll-container::-webkit-scrollbar {
     width: var(--scrollbar-size);
     height: var(--scrollbar-size);
   }
 
+  .scroll-container.hidden-scrollbar-until-scroll::-webkit-scrollbar {
+    display: none;
+    width: 0;
+    height: 0;
+    background: transparent;
+  }
+
+  .scroll-container.hidden-scrollbar-until-scroll::-webkit-scrollbar-track,
+  .scroll-container.hidden-scrollbar-until-scroll::-webkit-scrollbar-thumb,
+  .scroll-container.hidden-scrollbar-until-scroll::-webkit-scrollbar-corner {
+    background: transparent;
+    border-radius: 0;
+  }
+
   .scroll-container::-webkit-scrollbar-track {
     background: var(--scroll-track-color);
     border-radius: var(--scroll-radius);

package/dist/Components/ScrollContainer.svelte.d.ts

@@ -11,6 +11,7 @@ type ScrollContainer = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
     thumbColor?: string | undefined;
     thumbHoverColor?: string | undefined;
     borderRadius?: string | undefined;
+    hideScrollbarUntilScroll?: boolean | undefined;
 }, {
     default: {};
 }>, {
@@ -32,6 +33,7 @@ declare const ScrollContainer: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2
     thumbColor?: string | undefined;
     thumbHoverColor?: string | undefined;
     borderRadius?: string | undefined;
+    hideScrollbarUntilScroll?: boolean | undefined;
 }, {
     default: {};
 }>, {

package/dist/icons.d.ts

@@ -19,4 +19,5 @@ export namespace icons {
     let copy: string;
     let warning: string;
     let globe: string;
+    let share: string;
 }

package/dist/icons.js

@@ -15,8 +15,9 @@ export const icons = {
   statistics: '<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.16125 8.83871C6.16125 7.27093 5.04197 6 3.66125 6C2.28054 6 1.16125 7.27093 1.16125 8.83871V11.1613C1.16125 12.7291 2.28054 14 3.66125 14C5.04197 14 6.16125 12.7291 6.16125 11.1613V8.83871Z" stroke-width="1.5"/><path d="M14.1613 3.86C14.1613 2.28047 13.042 1 11.6613 1C10.2805 1 9.16125 2.28047 9.16125 3.86V11.14C9.16125 12.7195 10.2805 14 11.6613 14C13.042 14 14.1613 12.7195 14.1613 11.14V3.86Z" stroke-width="1.5"/></svg>',
   restart: '<svg width="21" height="16" viewBox="0 0 21 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.042 1.87012L15.9668 1.90332L18.4326 1.9248L16.6484 3.62695L16.2246 4.03125C17.2954 5.19269 17.953 6.7371 17.9531 8.43652C17.9531 12.0772 14.9522 15 11.29 15C11.1834 15 11.0803 14.9958 10.9951 14.9922L10.0381 14.9512V10.7988L11.1084 10.874C11.1793 10.879 11.2374 10.8808 11.29 10.8809C12.6912 10.8809 13.7969 9.77025 13.7969 8.43652C13.7968 7.85203 13.5852 7.31302 13.2285 6.88965L12.6416 7.4502L10.9004 9.1084L10.9512 6.70508L11.0332 2.84863L11.0547 1.8623L12.042 1.87012ZM10.8682 5.20117L9.79785 5.12598C9.72692 5.12102 9.66883 5.11915 9.61621 5.11914C8.21502 5.11914 7.10938 6.22975 7.10938 7.56348C7.10945 8.14749 7.32058 8.68616 7.67676 9.10938L8.26465 8.5498L10.0059 6.8916L9.95508 9.29492L9.87305 13.1514L9.85156 14.1377L8.86426 14.1299L4.93945 14.0967L2.47363 14.0752L4.25781 12.373L4.68066 11.9678C3.61042 10.8064 2.9532 9.26241 2.95312 7.56348C2.95312 3.9228 5.95402 1 9.61621 1C9.72288 1.00001 9.82593 1.00416 9.91113 1.00781L10.8682 1.04883V5.20117Z" stroke-width="2"/></svg>',
   lines: '<svg width="17" height="15" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 1H3.4C2.07452 1 1 2.10612 1 3.47059C1 4.83506 2.07452 5.94118 3.4 5.94118H13C14.3255 5.94118 15.4 4.83506 15.4 3.47059C15.4 2.10612 14.3255 1 13 1Z" stroke-width="1.5"/><path d="M7.4 8.41174H3.4C2.07452 8.41174 1 9.51786 1 10.8823C1 12.2468 2.07452 13.3529 3.4 13.3529H7.4C8.72548 13.3529 9.8 12.2468 9.8 10.8823C9.8 9.51786 8.72548 8.41174 7.4 8.41174Z" stroke-width="1.5"/></svg>',
-  add: '<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 1C8.47276 1 9.66667 2.19391 9.66667 3.66667V4.33333H10.3333C11.8061 4.33333 13 5.52724 13 7C13 8.47276 11.8061 9.66667 10.3333 9.66667H9.66667V10.3333C9.66667 11.8061 8.47276 13 7 13C5.52724 13 4.33333 11.8061 4.33333 10.3333V9.66667H3.66667C2.19391 9.66667 1 8.47276 1 7C1 5.52724 2.19391 4.33333 3.66667 4.33333H4.33333V3.66667C4.33333 2.19391 5.52724 1 7 1Z" stroke-width="2"/></svg>',
+  add: '<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 1C8.47276 1 9.66667 2.19391 9.66667 3.66667V4.33333H10.3333C11.8061 4.33333 13 5.52724 13 7C13 8.47276 11.8061 9.66667 10.3333 9.66667H9.66667V10.3333C9.66667 11.8061 8.47276 13 7 13C5.52724 13 4.33333 11.8061 4.33333 10.3333V9.66667H3.66667C2.19391 9.66667 1 8.47276 1 7C1 5.52724 2.19391 4.33333 3.66667 4.33333H4.33333V3.66667C4.33333 2.19391 5.52724 1 7 1Z" stroke-width="1.75"/></svg>',
   copy: '<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_2405_287)"><path d="M4.59998 6.7373V11.2178C4.59998 12.6165 5.76404 13.7503 7.19998 13.7503H11.2C12.6359 13.7503 13.8 12.6165 13.8 11.2178V6.7373C13.8 5.33866 12.6359 4.20483 11.2 4.20483H7.19998C5.76404 4.20483 4.59998 5.33866 4.59998 6.7373Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.29995 10.7143H3.79995C2.36401 10.7143 1.19995 9.58045 1.19995 8.18181V3.70129C1.19995 2.30265 2.36401 1.16882 3.79995 1.16882H7.99995C9.32543 1.16882 10.4 2.21543 10.4 3.50649" stroke-width="1.5" stroke-linejoin="round"/></g><defs><clipPath id="clip0_2405_287"><rect width="15" height="15" /></clipPath></defs></svg>',
   warning: '<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_2446_239)"><path d="M3.73917 12.9058C1.65966 12.9058 0.380245 10.6945 1.46017 8.96679L5.63794 2.28311C6.67655 0.621614 9.15698 0.621615 10.1956 2.28311L14.3734 8.96679C15.4533 10.6945 14.1739 12.9058 12.0944 12.9058H3.73917Z" stroke-width="1.5"/><path d="M8.62167 8.00578C8.56795 8.35633 8.25141 8.60315 7.88688 8.60315C7.51627 8.60315 7.19632 8.34819 7.14711 7.99107C7.03741 7.19469 6.9707 6.17663 6.9707 5.18229V4.45801C6.9707 3.96168 7.38455 3.55933 7.89508 3.55933C8.40558 3.55933 8.81945 3.96168 8.81945 4.45801V5.18229C8.81945 6.2047 8.74098 7.22714 8.62167 8.00578ZM7.88514 10.8772C7.37822 10.8772 6.9707 10.4788 6.9707 10.0026C6.9707 9.51669 7.37822 9.11823 7.88514 9.11823C8.37218 9.11823 8.79957 9.51669 8.79957 10.0026C8.79957 10.4788 8.37218 10.8772 7.88514 10.8772Z" /></g><defs><clipPath id="clip0_2446_239"><rect width="16" height="14" "/></clipPath></defs></svg>',
   globe: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.261 1.21603C13.0417 0.802801 14.0107 0.996383 14.5725 1.67795L14.6868 1.83224L14.7844 1.99631C15.1298 2.64899 15.0489 3.43138 14.6155 3.99924C14.8643 4.71807 15.0002 5.48894 15.0002 6.28928C15.0002 8.56895 13.9094 10.5915 12.2229 11.8694C12.5296 12.2021 12.719 12.6448 12.719 13.133C12.7188 14.1643 11.8829 15.0001 10.8518 15.0002H5.14868C4.18186 15.0001 3.3868 14.2652 3.29126 13.3235L3.28149 13.133L3.29126 12.9416C3.33317 12.5295 3.50996 12.158 3.77563 11.8694C3.62723 11.7569 3.48371 11.6385 3.34497 11.5149C2.59429 11.7135 1.76855 11.4294 1.31372 10.7473C0.741714 9.88919 0.9741 8.72956 1.83228 8.15744L2.68774 7.58713L2.80981 7.51193C2.99465 7.40815 3.1917 7.33997 3.39185 7.30392C3.32022 6.97709 3.2815 6.63761 3.28149 6.28928C3.2816 3.68322 5.39417 1.57053 8.00024 1.57053C9.00867 1.57053 9.94236 1.88812 10.7092 2.42697C10.8438 2.21793 11.0211 2.03095 11.2415 1.884L12.0969 1.31369L12.261 1.21603ZM8.00024 5.30588C7.45692 5.30588 7.01597 5.74596 7.01587 6.28928C7.01588 6.8326 7.4568 7.27365 8.00024 7.27365C8.54367 7.27364 8.98461 6.8326 8.98462 6.28928C8.98452 5.74596 8.54356 5.30588 8.00024 5.30588Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+  share: '<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.66088 6.1963L5.58773 11.1778C5.7627 12.1184 6.95764 12.3055 7.38291 11.459L11.8855 2.49607C12.0597 2.14932 12.0233 1.76608 11.8491 1.4743M4.66088 6.1963L1.2945 2.74997C0.672697 2.1134 1.09882 1 1.96426 1H11.0351C11.3901 1 11.6826 1.19536 11.8491 1.4743M4.66088 6.1963L11.8491 1.4743M11.8491 1.4743L11.9119 1.43302" stroke-width="1.5"/></svg>',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coyalabs/bts-style",
-  "version": "1.3.14",
+  "version": "1.3.17",
   "description": "BTS Theme Svelte component templates",
   "type": "module",
   "exports": {
@@ -21,7 +21,7 @@
   ],
   "scripts": {
     "build": "svelte-kit sync && svelte-package -o dist",
-    "package": "npm run build && echo Copying package to node_modules... && xcopy /E /I /Y dist C:\\Users\\Alan\\Documents\\GitHub\\coya-server-bck\\src\\subservice\\subservice_api\\cpaas_frontend\\node_modules\\@coyalabs\\bts-style\\dist && xcopy /E /I /Y public C:\\Users\\Alan\\Documents\\GitHub\\coya-server-bck\\src\\subservice\\subservice_api\\cpaas_frontend\\node_modules\\@coyalabs\\bts-style\\public && copy /Y package.json C:\\Users\\Alan\\Documents\\GitHub\\coya-server-bck\\src\\subservice\\subservice_api\\cpaas_frontend\\node_modules\\@coyalabs\\bts-style\\ && echo Copy complete!",
+    "package": "npm run build && echo Copying package to node_modules... && xcopy /E /I /Y dist C:\\Users\\Alan\\Documents\\GitHub\\coya-server-bck\\work-services\\bark-backend\\frontend\\node_modules\\@coyalabs\\bts-style\\dist && xcopy /E /I /Y public C:\\Users\\Alan\\Documents\\GitHub\\coya-server-bck\\work-services\\bark-backend\\frontend\\node_modules\\@coyalabs\\bts-style\\public && copy /Y package.json C:\\Users\\Alan\\Documents\\GitHub\\coya-server-bck\\work-services\\bark-backend\\frontend\\node_modules\\@coyalabs\\bts-style\\ && echo Copy complete!",
     "prepublishOnly": "npm run build",
     "release": "npm version patch && npm publish --access public"
   },