diff --git a/CHANGELOG.md b/CHANGELOG.md index 3d0a6acb..8a83b359 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,7 +5,8 @@ Changelog ## v8.0.0 *(2023-07-?)* - **New:** `Label` component. - **New icons:** `sun` and `moon` for the dark-theme switchers. -- **Improved:** `info`, `error` and `label` attributes are now supported on other inputs (`Autocomplete`, `InputDate`, `Select`, `ButtonToggle`, and `Toggle`). +- **Improvement:** `info`, `error` and `label` attributes are now supported on other inputs (`Autocomplete`, `InputDate`, `Select`, `ButtonToggle`, and `Toggle`). +- **Improvement:** all components now expose `element` on the main html element, and `inputElement` on the input, if there is one (and only one). The exception is `NotificationCenter` and `MessageBox`, due to it's implementation. - Added `title` attribute to `ButtonToggle`. - Fixed `selectable=false` not working on `Table`. @@ -16,7 +17,7 @@ Changelog - `Select` - HTML structure changed: `.select-wrap select` --> `.select .input-inner .input-row select` - `Table` - CSS classes changed from `.table-wrapper table.table` --> `.table table` - `Toggle` - HTML structure changed from `.toggle .toggle-inner .toggle-scroller input` --> `.toggle .toggle-inner .toggle-label .toggle-scroller input` - +- These components previously exposed `_this` on the main html element, which is now renamed to `element`: `Button`, `Checkbox`, `InputMath`, `PushButton`, `Table` ---- diff --git a/docs-src/components/autocomplete/Autocomplete.svelte b/docs-src/components/autocomplete/Autocomplete.svelte index f7b6ca10..d7a7c915 100644 --- a/docs-src/components/autocomplete/Autocomplete.svelte +++ b/docs-src/components/autocomplete/Autocomplete.svelte @@ -88,6 +88,8 @@ const apiProps = [ { name: 'showOnFocus', type: ['true', 'false'], default: 'false', description: 'If true - the popup will be automatically open when the autocomplete gets focus (as opposed to, when the user starts typing).' }, { name: 'title', type: 'string', description: 'Assign title to the underlying input.' }, { name: 'value', type: ['string', 'number'], description: 'Initial value of the autocomplete.' }, + { name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' }, + { name: 'bind:inputElement', type: 'element', description: 'Exposes the HTML element of the underlying input.' }, { name: 'on:change', type: 'function', description: 'Triggered when the value changes.' }, { name: 'on:keydown', type: 'function', description: 'Triggered when a key is down.' }, ]; diff --git a/docs-src/components/button-group/ButtonGroup.svelte b/docs-src/components/button-group/ButtonGroup.svelte index 1e2f8466..07d3eb9d 100644 --- a/docs-src/components/button-group/ButtonGroup.svelte +++ b/docs-src/components/button-group/ButtonGroup.svelte @@ -90,6 +90,7 @@ import { CodeExample } from '../../code-example'; const apiProps = [ { name: 'class', type: 'string', description: 'Additional css class name to be added to the component.' }, { name: 'round', description: 'Makes the buttons, on both sides of the group, round.' }, + { name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' }, ]; diff --git a/docs-src/components/button-toggle/ButtonToggle.svelte b/docs-src/components/button-toggle/ButtonToggle.svelte index 1d40b117..ed5524c0 100644 --- a/docs-src/components/button-toggle/ButtonToggle.svelte +++ b/docs-src/components/button-toggle/ButtonToggle.svelte @@ -71,6 +71,8 @@ const apiProps = [ { name: 'round', description: 'Makes the buttons, on both sides of the group, round.' }, { name: 'title', type: 'string', description: 'Assign title to the component' }, { name: 'value', type: ['string', 'number'], description: 'Assign initial value to the underlying radio group' }, + { name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' }, + { name: 'on:change', type: 'function', description: 'Triggered when the value changes.' }, ]; const exampleHtml = ` diff --git a/docs-src/components/button/Button.svelte b/docs-src/components/button/Button.svelte index cc7197c4..540f640a 100644 --- a/docs-src/components/button/Button.svelte +++ b/docs-src/components/button/Button.svelte @@ -47,6 +47,7 @@ const apiProps = [ { name: 'text', description: 'Button style: text' }, { name: 'title', type: 'string', description: 'Assign title to the underlying button' }, { name: 'warning', description: 'Button type: warning' }, + { name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' }, { name: 'on:click', type: 'function', description: 'Triggered when the button is clicked.' } ]; diff --git a/docs-src/components/checkbox/Checkbox.svelte b/docs-src/components/checkbox/Checkbox.svelte index 601ff655..2fff11af 100644 --- a/docs-src/components/checkbox/Checkbox.svelte +++ b/docs-src/components/checkbox/Checkbox.svelte @@ -49,6 +49,9 @@ const apiProps = [ { name: 'label', type: 'string', description: 'Label for the input.' }, { name: 'name', type: 'string', description: 'Assign title to the underlying input.' }, { name: 'title', type: 'string', description: 'Assign title to the component.' }, + { name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' }, + { name: 'bind:inputElement', type: 'element', description: 'Exposes the HTML element of the underlying input.' }, + { name: 'on:change', type: 'function', description: 'Triggered when the value changes.' }, ]; const exampleHtml = ` diff --git a/docs-src/components/dialog/Dialog.svelte b/docs-src/components/dialog/Dialog.svelte index 39598c2f..2264e0d5 100644 --- a/docs-src/components/dialog/Dialog.svelte +++ b/docs-src/components/dialog/Dialog.svelte @@ -64,6 +64,8 @@ const apiProps = [ { name: 'opened', type: ['true' , 'false'], default: 'false', description: 'Set dialog\'s open state.' }, { name: 'skipFirstFocus', type: ['true', 'false'], default: 'false', description: 'If true - the dialog will not set focus to the first focusable element in the dialog.
This is useful if another element in the dialog should be focused first.' }, { name: 'title', type: 'string', description: 'Set title for the dialog.' }, + { name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' }, + { name: 'bind:this', type: 'object', description: 'Exposes the component instance.' }, { name: 'on:close', type: 'function', description: 'Triggered after the dialog is closed.' }, { name: 'on:open', type: 'function', description: 'Triggered after the dialog is opened.' }, ]; diff --git a/docs-src/components/drawer/Drawer.svelte b/docs-src/components/drawer/Drawer.svelte index a3e68e6a..e36f00eb 100644 --- a/docs-src/components/drawer/Drawer.svelte +++ b/docs-src/components/drawer/Drawer.svelte @@ -30,6 +30,8 @@ import { CodeExample } from '../../code-example'; const apiProps = [ { name: 'class', type: 'string', description: 'Additional css class name to be added to the component container.' }, { name: 'title', type: 'string', description: 'Set title for the drawer.' }, + { name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' }, + { name: 'bind:this', type: 'object', description: 'Exposes the component instance.' }, { name: 'on:close', type: 'function', description: 'Triggered after the drawer is closed.' }, { name: 'on:open', type: 'function', description: 'Triggered after the drawer is opened.' }, ]; diff --git a/docs-src/components/info-bar/InfoBar.svelte b/docs-src/components/info-bar/InfoBar.svelte index cb10296d..e3b6d266 100644 --- a/docs-src/components/info-bar/InfoBar.svelte +++ b/docs-src/components/info-bar/InfoBar.svelte @@ -32,6 +32,7 @@ const apiProps = [ { name: 'id', type: 'string', description: 'Assign ID to the message paragraph.' }, { name: 'msg', type: 'string', description: 'Message to display. It can use simple html for formatting (message is wrapped in <p> tag).' }, { name: 'type', type: ['info', 'warning', 'error', 'success'], default: 'info', description: 'Type of the info-bar. This property only exists on the <InfoBar> component, not on the shortcut-components.' }, + { name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' }, ]; diff --git a/docs-src/components/input-date/InputDate.svelte b/docs-src/components/input-date/InputDate.svelte index 53803320..df7bb572 100644 --- a/docs-src/components/input-date/InputDate.svelte +++ b/docs-src/components/input-date/InputDate.svelte @@ -64,6 +64,8 @@ const apiProps = [ { name: 'showOnFocus', type: ['true', 'false'], default: 'false', description: 'If true - the datepicker will be automatically open when the input gets focus (normally opens on click).' }, { name: 'title', type: 'string', description: 'Assign title to the underlying input.' }, { name: 'value', type: 'string', description: 'Initial value of the input.' }, + { name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' }, + { name: 'bind:inputElement', type: 'element', description: 'Exposes the HTML element of the underlying input.' }, { name: 'on:change', type: 'function', description: 'Triggered when the value changes.' }, { name: 'on:keydown', type: 'function', description: 'Triggered when a key is down.' }, ]; diff --git a/docs-src/components/input-math/InputMath.svelte b/docs-src/components/input-math/InputMath.svelte index d049380c..cbe4fda7 100644 --- a/docs-src/components/input-math/InputMath.svelte +++ b/docs-src/components/input-math/InputMath.svelte @@ -37,6 +37,8 @@ const apiProps = [ { name: 'required', description: 'Mark the input as aria-required.' }, { name: 'title', type: 'string', description: 'Assign title to the underlying input.' }, { name: 'value', type: ['string', 'number'], description: 'Initial value of the input.' }, + { name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' }, + { name: 'bind:inputElement', type: 'element', description: 'Exposes the HTML element of the underlying input.' }, { name: 'on:change', type: 'function', description: 'Triggered when the value changes.' }, { name: 'on:keydown', type: 'function', description: 'Triggered when a key is down.' }, ]; diff --git a/docs-src/components/input-number/InputNumber.svelte b/docs-src/components/input-number/InputNumber.svelte index 4767bf94..001050bf 100644 --- a/docs-src/components/input-number/InputNumber.svelte +++ b/docs-src/components/input-number/InputNumber.svelte @@ -41,6 +41,8 @@ const apiProps = [ { name: 'separator', type: 'string', default: '.', description: 'Custom decimal separator.' }, { name: 'title', type: 'string', description: 'Assign title to the underlying input.' }, { name: 'value', type: ['string', 'number'], description: 'Initial value of the input.' }, + { name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' }, + { name: 'bind:inputElement', type: 'element', description: 'Exposes the HTML element of the underlying input.' }, { name: 'on:change', type: 'function', description: 'Triggered after the value changes and the focus leaves the input.' }, { name: 'on:input', type: 'function', description: 'Triggered as soon as the input value changes.' }, ]; diff --git a/docs-src/components/input-password/InputPassword.svelte b/docs-src/components/input-password/InputPassword.svelte index b705ab27..a8ab6b41 100644 --- a/docs-src/components/input-password/InputPassword.svelte +++ b/docs-src/components/input-password/InputPassword.svelte @@ -49,6 +49,8 @@ const apiProps = [ { name: 'strength', description: 'Provide the password strength UI (zxcvbn lib must be loaded).' }, { name: 'title', type: 'string', description: 'Assign title to the underlying input.' }, { name: 'value', type: ['string', 'number'], description: 'Initial value of the input.' }, + { name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' }, + { name: 'bind:inputElement', type: 'element', description: 'Exposes the HTML element of the underlying input.' }, { name: 'on:change', type: 'function', description: 'Triggered when the value changes.' }, { name: 'on:keydown', type: 'function', description: 'Triggered when a key is down.' }, ]; diff --git a/docs-src/components/input-text/InputText.svelte b/docs-src/components/input-text/InputText.svelte index 2dcb3793..85baafa5 100644 --- a/docs-src/components/input-text/InputText.svelte +++ b/docs-src/components/input-text/InputText.svelte @@ -56,6 +56,8 @@ const apiProps = [ { name: 'required', description: 'Mark the input as aria-required. The actual validation must be done in the consumer.' }, { name: 'title', type: 'string', description: 'Assign title to the underlying input.' }, { name: 'value', type: ['string', 'number'], description: 'Initial value of the input.' }, + { name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' }, + { name: 'bind:inputElement', type: 'element', description: 'Exposes the HTML element of the underlying input.' }, { name: 'on:change', type: 'function', description: 'Triggered after the value changes and the focus leaves the input.' }, { name: 'on:input', type: 'function', description: 'Triggered as soon as the input value changes.' }, ]; diff --git a/docs-src/components/menu/Menu.svelte b/docs-src/components/menu/Menu.svelte index 321922db..9e5a4381 100644 --- a/docs-src/components/menu/Menu.svelte +++ b/docs-src/components/menu/Menu.svelte @@ -112,6 +112,7 @@ const apiProps = [ { name: 'elevate', type: ['true', 'false'], default: 'false', description: 'If true - the menu will be rendered into the body, to ensure it\'s not hidden under some elements (see example above).' }, { name: 'targetSelector', type: 'string', required: true, description: 'This is only required when menu type is context.
It provides a selector to an element, in which the menu will appear (on mouse right-click).' }, { name: 'type', type: 'context', description: 'If type is set to context the menu will behave as context-menu.' }, + { name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' }, { name: 'on:close', type: 'function', description: 'Triggered after the menu is closed.' }, { name: 'on:open', type: 'function', description: 'Triggered after the menu is opened.' }, ]; @@ -132,6 +133,7 @@ const itemApiProps = [ { name: 'success', description: 'Button type: success' }, { name: 'title', type: 'string', description: 'Assign title to the underlying button' }, { name: 'warning', description: 'Button type: warning' }, + { name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' }, { name: 'on:click', type: 'function', description: 'Triggered when the menu item was clicked.
The event handler function receives 1 argument - the click event.
By calling event.preventDefault(); it is possible to prevent menu from auto closing when the item was clicked.
event.detail will contain a button and target properties, that are references to the corresponding html elements.
It is possible to pass the data using data- attributes on the target element and on the MenuItem.' }, ]; diff --git a/docs-src/components/panel/Panel.svelte b/docs-src/components/panel/Panel.svelte index 25d345b7..27c4efdf 100644 --- a/docs-src/components/panel/Panel.svelte +++ b/docs-src/components/panel/Panel.svelte @@ -51,6 +51,7 @@ const apiProps = [ { name: 'open', description: 'Panel initial open state.' }, { name: 'round', description: 'Adds rounded corners to the panel.' }, { name: 'title', type: 'string', description: 'Panel title.' }, + { name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' }, { name: 'on:close', type: 'function', description: 'Triggered after the panel is closed.' }, { name: 'on:open', type: 'function', description: 'Triggered after the panel is opened.' }, ]; diff --git a/docs-src/components/push-button/PushButton.svelte b/docs-src/components/push-button/PushButton.svelte index 2d4c26fc..d9b2240d 100644 --- a/docs-src/components/push-button/PushButton.svelte +++ b/docs-src/components/push-button/PushButton.svelte @@ -100,6 +100,7 @@ const apiProps = [ { name: 'success', description: 'Button type: success' }, { name: 'title', type: 'string', description: 'Assign title to the underlying button' }, { name: 'warning', description: 'Button type: warning' }, + { name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' }, { name: 'on:click', type: 'function', description: 'Triggered when the button is clicked.' } ]; diff --git a/docs-src/components/radio/Radio.svelte b/docs-src/components/radio/Radio.svelte index f66196b5..2528bb15 100644 --- a/docs-src/components/radio/Radio.svelte +++ b/docs-src/components/radio/Radio.svelte @@ -45,6 +45,7 @@ const apiProps = [ { name: 'label', type: 'string', description: 'Label for the whole component.' }, { name: 'title', type: 'string', description: 'Assign title to whole component.' }, { name: 'value', type: ['string', 'number'], description: 'Value of the component (=value of the checked item).' }, + { name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' }, { name: 'on:change', type: 'function', description: 'Triggered when the value changes.' }, ]; diff --git a/docs-src/components/select/Select.svelte b/docs-src/components/select/Select.svelte index 05545236..28de5326 100644 --- a/docs-src/components/select/Select.svelte +++ b/docs-src/components/select/Select.svelte @@ -54,6 +54,8 @@ const apiProps = [ { name: 'required', description: 'Mark the select as aria-required.' }, { name: 'title', type: 'string', description: 'Assign title to the underlying select.' }, { name: 'value', type: ['string', 'number'], description: 'Initial value of the select.
If the list is an array of strings - it would match the item,
if the list is an array of objects - it should match the id of the item. ' }, + { name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' }, + { name: 'bind:inputElement', type: 'element', description: 'Exposes the HTML element of the underlying select.' }, { name: 'on:change', type: 'function', description: 'Triggered when the value changes.' }, ]; diff --git a/docs-src/components/splitter/Splitter.svelte b/docs-src/components/splitter/Splitter.svelte index 653ebc90..2aedbabc 100644 --- a/docs-src/components/splitter/Splitter.svelte +++ b/docs-src/components/splitter/Splitter.svelte @@ -33,6 +33,7 @@ import { CodeExample } from '../../code-example'; const apiProps = [ { name: 'class', type: 'string', description: 'Additional css class name to be added to the component.' }, + { name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' }, { name: 'on:change', type: 'function', description: 'Triggered during the resizing (mousemove).' }, { name: 'on:changed', type: 'function', description: 'Triggered when resizing finished (mouseup).' }, ]; diff --git a/docs-src/components/table/Table.svelte b/docs-src/components/table/Table.svelte index 747da9f7..f986614f 100644 --- a/docs-src/components/table/Table.svelte +++ b/docs-src/components/table/Table.svelte @@ -125,6 +125,7 @@ const apiProps = [ { name: 'scrollContainer', type: ['string','Element'], default: 'table wrapper', description: 'Selector or HTML Element to the scroll container. If table wrapper\'s height is not set to 100% of the container, and is taller than the container - the container will have to be scrollable, and in this case it must be provided here.' }, { name: 'scrollCorrectionOffset', type: 'number', default: '0', description: 'If an external scrollContainer is used - it is possible that it will have non-zero padding set, thus the table wrapper will be offset from the beginning of the container. This offset should be set here, so that the sticky headers work correctly.' }, { name: 'selectable', type: ['true', 'false'], description: 'Makes table rows selectable with mouse and adds keyboard navigation.' }, + { name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' }, { name: 'on:click', type: 'function', description: 'Triggered after a row has been clicked.' }, { name: 'on:dblclick', type: 'function', description: 'Triggered after a row has been double-clicked.' }, { name: 'on:keydown', type: 'function', description: 'Triggered after key has been pressed.' }, diff --git a/docs-src/components/text-fit/TextFit.svelte b/docs-src/components/text-fit/TextFit.svelte index 2bd7a6cb..9e7b3025 100644 --- a/docs-src/components/text-fit/TextFit.svelte +++ b/docs-src/components/text-fit/TextFit.svelte @@ -22,6 +22,7 @@ import { CodeExample } from '../../code-example'; const apiProps = [ { name: 'class', type: 'string', description: 'Additional css class name to be added to the component.' }, { name: 'margin', type: 'number', default: '0', description: 'Margin around the text (in px).' }, + { name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' }, ]; const exampleHtml = ` diff --git a/docs-src/components/textarea/Textarea.svelte b/docs-src/components/textarea/Textarea.svelte index cd219f0c..05b8867e 100644 --- a/docs-src/components/textarea/Textarea.svelte +++ b/docs-src/components/textarea/Textarea.svelte @@ -48,6 +48,8 @@ const apiProps = [ { name: 'required', description: 'Mark the textarea as aria-required.' }, { name: 'title', type: 'string', description: 'Assign title to the underlying textarea.' }, { name: 'value', type: 'string', description: 'Initial value of the textarea.' }, + { name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' }, + { name: 'bind:inputElement', type: 'element', description: 'Exposes the HTML element of the underlying input.' }, { name: 'on:change', type: 'function', description: 'Triggered when the value changes.' }, { name: 'on:input', type: 'function', description: 'Triggered when textarea value is edited.' }, ]; diff --git a/docs-src/components/toggle/Toggle.svelte b/docs-src/components/toggle/Toggle.svelte index c09acbd7..726eea36 100644 --- a/docs-src/components/toggle/Toggle.svelte +++ b/docs-src/components/toggle/Toggle.svelte @@ -52,6 +52,8 @@ const apiProps = [ { name: 'required', description: 'Mark the input as aria-required.' }, { name: 'title', type: 'string', description: 'Assign title to the underlying input.' }, { name: 'value', type: ['true', 'false'], description: 'Initial value of the toggle.' }, + { name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' }, + { name: 'bind:inputElement', type: 'element', description: 'Exposes the HTML element of the underlying input.' }, { name: 'on:change', type: 'function', description: 'Triggered when the value changes.' }, ]; diff --git a/docs-src/components/tooltip/Tooltip.svelte b/docs-src/components/tooltip/Tooltip.svelte index f6c5b6c8..e970b8a4 100644 --- a/docs-src/components/tooltip/Tooltip.svelte +++ b/docs-src/components/tooltip/Tooltip.svelte @@ -86,6 +86,7 @@ const apiProps = [ { name: 'success', description: 'Tooltip type: success' }, { name: 'target', required: true, type: 'string', description: 'ID of the target element.' }, { name: 'warning', description: 'Tooltip type: warning' }, + { name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' }, ]; diff --git a/docs-src/components/tree/Tree.svelte b/docs-src/components/tree/Tree.svelte index 89918623..b42b8d39 100644 --- a/docs-src/components/tree/Tree.svelte +++ b/docs-src/components/tree/Tree.svelte @@ -16,6 +16,7 @@ import { CodeExample } from '../../code-example'; const apiProps = [ { name: 'class', type: 'string', description: 'Additional css class name to be added to the component.' }, { name: 'title', type: 'string', description: 'Title of the component.' }, + { name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' }, { name: 'on:select', type: 'function', description: 'Triggered after an item was selected.' }, ]; diff --git a/docs-src/pages/changelog.svelte b/docs-src/pages/changelog.svelte index f844e326..5fdec6d7 100644 --- a/docs-src/pages/changelog.svelte +++ b/docs-src/pages/changelog.svelte @@ -3,7 +3,8 @@ @@ -14,6 +15,7 @@
  • Select - HTML structure changed: .select-wrap select --> .select .input-inner .input-row select
  • Table - CSS classes changed from .table-wrapper table.table --> .table table
  • Toggle - HTML structure changed from .toggle .toggle-inner .toggle-scroller input --> .toggle .toggle-inner .toggle-label .toggle-scroller input
    • +
  • These components previously exposed _this on the main html element, which is now renamed to element: Button, Checkbox, InputMath, PushButton, Table

    • v7.1.2 (2023-07-05)

    diff --git a/docs/docs.js b/docs/docs.js index a6ee448b..0cea9c5d 100644 --- a/docs/docs.js +++ b/docs/docs.js @@ -1,24 +1,24 @@ -var J1=Object.create;var ba=Object.defineProperty;var Z1=Object.getOwnPropertyDescriptor;var Q1=Object.getOwnPropertyNames;var e_=Object.getPrototypeOf,t_=Object.prototype.hasOwnProperty;var Bi=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),n_=(t,e)=>{for(var n in e)ba(t,n,{get:e[n],enumerable:!0})},i_=(t,e,n,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of Q1(e))!t_.call(t,s)&&s!==n&&ba(t,s,{get:()=>e[s],enumerable:!(i=Z1(e,s))||i.enumerable});return t};var ze=(t,e,n)=>(n=t!=null?J1(e_(t)):{},i_(e||!t||!t.__esModule?ba(n,"default",{value:t,enumerable:!0}):n,t));var ft=Bi(ie=>{"use strict";Object.defineProperty(ie,"__esModule",{value:!0});function ei(){}var no=t=>t;function yc(t,e){for(let n in e)t[n]=e[n];return t}function kc(t){return!!t&&(typeof t=="object"||typeof t=="function")&&typeof t.then=="function"}function s_(t,e,n,i,s){t.__svelte_meta={loc:{file:e,line:n,column:i,char:s}}}function Jl(t){return t()}function jl(){return Object.create(null)}function _i(t){t.forEach(Jl)}function Ai(t){return typeof t=="function"}function o_(t,e){return t!=t?e==e:t!==e||t&&typeof t=="object"||typeof t=="function"}var Rl;function l_(t,e){return Rl||(Rl=document.createElement("a")),Rl.href=e,t===Rl.href}function r_(t,e){return t!=t?e==e:t!==e}function Ma(t){return Object.keys(t).length===0}function u_(t,e){if(t!=null&&typeof t.subscribe!="function")throw new Error(`'${e}' is not a store with a 'subscribe' method`)}function Ta(t,...e){if(t==null)return ei;let n=t.subscribe(...e);return n.unsubscribe?()=>n.unsubscribe():n}function a_(t){let e;return Ta(t,n=>e=n)(),e}function f_(t,e,n){t.$$.on_destroy.push(Ta(e,n))}function m_(t,e,n,i){if(t){let s=Mc(t,e,n,i);return t[0](s)}}function Mc(t,e,n,i){return t[1]&&i?yc(n.ctx.slice(),t[1](i(e))):n.ctx}function Tc(t,e,n,i){if(t[2]&&i){let s=t[2](i(n));if(e.dirty===void 0)return s;if(typeof s=="object"){let o=[],r=Math.max(e.dirty.length,s.length);for(let l=0;l32){let e=[],n=t.ctx.length/32;for(let i=0;iObject.prototype.hasOwnProperty.call(t,e);function v_(t){return t&&Ai(t.destroy)?t.destroy:ei}function w_(t){let e=typeof t=="string"&&t.match(/^\s*(-?[\d.]+)([^\s]*)\s*$/);return e?[parseFloat(e[1]),e[2]||"px"]:[t,"px"]}var Ca=["",!0,1,"true","contenteditable"],Sa=typeof window<"u";ie.now=Sa?()=>window.performance.now():()=>Date.now();ie.raf=Sa?t=>requestAnimationFrame(t):ei;function y_(t){ie.now=t}function k_(t){ie.raf=t}var os=new Set;function Ac(t){os.forEach(e=>{e.c(t)||(os.delete(e),e.f())}),os.size!==0&&ie.raf(Ac)}function M_(){os.clear()}function io(t){let e;return os.size===0&&ie.raf(Ac),{promise:new Promise(n=>{os.add(e={c:t,f:n})}),abort(){os.delete(e)}}}var Aa=typeof window<"u"?window:typeof globalThis<"u"?globalThis:global,rs=class t{constructor(e){this.options=e,this._listeners="WeakMap"in Aa?new WeakMap:void 0}observe(e,n){return this._listeners.set(e,n),this._getObserver().observe(e,this.options),()=>{this._listeners.delete(e),this._observer.unobserve(e)}}_getObserver(){var e;return(e=this._observer)!==null&&e!==void 0?e:this._observer=new ResizeObserver(n=>{var i;for(let s of n)t.entries.set(s.target,s),(i=this._listeners.get(s.target))===null||i===void 0||i(s)})}};rs.entries="WeakMap"in Aa?new WeakMap:void 0;var Zl=!1;function Dc(){Zl=!0}function Ec(){Zl=!1}function T_(t,e,n,i){for(;t>1);n(s)<=i?t=s+1:e=s}return t}function C_(t){if(t.hydrate_init)return;t.hydrate_init=!0;let e=t.childNodes;if(t.nodeName==="HEAD"){let a=[];for(let u=0;u0&&e[n[s]].claim_order<=u?s+1:T_(1,s,d=>e[n[d]].claim_order,u))-1;i[a]=n[f]+1;let p=f+1;n[p]=a,s=Math.max(p,s)}let o=[],r=[],l=e.length-1;for(let a=n[s]+1;a!=0;a=i[a-1]){for(o.push(e[a-1]);l>=a;l--)r.push(e[l]);l--}for(;l>=0;l--)r.push(e[l]);o.reverse(),r.sort((a,u)=>a.claim_order-u.claim_order);for(let a=0,u=0;a=o[u].claim_order;)u++;let f=ut.removeEventListener(e,n,i)}function L_(t){return function(e){return e.preventDefault(),t.call(this,e)}}function F_(t){return function(e){return e.stopPropagation(),t.call(this,e)}}function O_(t){return function(e){return e.stopImmediatePropagation(),t.call(this,e)}}function H_(t){return function(e){e.target===this&&t.call(this,e)}}function N_(t){return function(e){e.isTrusted&&t.call(this,e)}}function so(t,e,n){n==null?t.removeAttribute(e):t.getAttribute(e)!==n&&t.setAttribute(e,n)}var P_=["width","height"];function Fc(t,e){let n=Object.getOwnPropertyDescriptors(t.__proto__);for(let i in e)e[i]==null?t.removeAttribute(i):i==="style"?t.style.cssText=e[i]:i==="__value"?t.value=t[i]=e[i]:n[i]&&n[i].set&&P_.indexOf(i)===-1?t[i]=e[i]:so(t,i,e[i])}function q_(t,e){for(let n in e)so(t,n,e[n])}function Oc(t,e){Object.keys(e).forEach(n=>{Hc(t,n,e[n])})}function Hc(t,e,n){e in t?t[e]=typeof t[e]=="boolean"&&n===""?!0:n:so(t,e,n)}function B_(t){return/-/.test(t)?Oc:Fc}function R_(t,e,n){t.setAttributeNS("http://www.w3.org/1999/xlink",e,n)}function z_(t,e,n){let i=new Set;for(let s=0;st.push(i))},r(){e.forEach(n=>t.splice(t.indexOf(n),1))}}}function j_(t,e){let n=s(t),i;function s(l){for(let a=0;an.push(l))}function r(){i.forEach(l=>n.splice(n.indexOf(l),1))}return{u(l){e=l;let a=s(t);a!==n&&(r(),n=a,o())},p(...l){i=l,o()},r}}function G_(t){return t===""?null:+t}function V_(t){let e=[];for(let n=0;n{for(let r=t.claim_info.last_index;r=0;r--){let l=t[r];if(e(l)){let a=n(l);return a===void 0?t.splice(r,1):t[r]=a,s?a===void 0&&t.claim_info.last_index--:t.claim_info.last_index=r,l}}return i()})();return o.claim_order=t.claim_info.total_claimed,t.claim_info.total_claimed+=1,o}function qc(t,e,n,i){return La(t,s=>s.nodeName===e,s=>{let o=[];for(let r=0;rs.removeAttribute(r))},()=>i(e))}function Y_(t,e,n){return qc(t,e,n,Ls)}function U_(t,e,n){return qc(t,e,n,xa)}function Bc(t,e){return La(t,n=>n.nodeType===3,n=>{let i=""+e;if(n.data.startsWith(i)){if(n.data.length!==i.length)return n.splitText(i.length)}else n.data=i},()=>tr(e),!0)}function K_(t){return Bc(t," ")}function X_(t,e){return La(t,n=>n.nodeType===8,n=>{n.data=""+e},()=>Lc(e),!0)}function wc(t,e,n){for(let i=n;ie.__value)}var zl;function Wc(){if(zl===void 0){zl=!1;try{typeof window<"u"&&window.parent&&window.parent.document}catch{zl=!0}}return zl}function lb(t,e){getComputedStyle(t).position==="static"&&(t.style.position="relative");let i=Ls("iframe");i.setAttribute("style","display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; border: 0; opacity: 0; pointer-events: none; z-index: -1;"),i.setAttribute("aria-hidden","true"),i.tabIndex=-1;let s=Wc(),o;return s?(i.src="data:text/html,\";\n unsubscribe = listen(window, 'message', (event) => {\n if (event.source === iframe.contentWindow)\n fn();\n });\n }\n else {\n iframe.src = 'about:blank';\n iframe.onload = () => {\n unsubscribe = listen(iframe.contentWindow, 'resize', fn);\n // make sure an initial resize event is fired _after_ the iframe is loaded (which is asynchronous)\n // see https://github.com/sveltejs/svelte/issues/4233\n fn();\n };\n }\n append(node, iframe);\n return () => {\n if (crossorigin) {\n unsubscribe();\n }\n else if (unsubscribe && iframe.contentWindow) {\n unsubscribe();\n }\n detach(iframe);\n };\n}\nconst resize_observer_content_box = /* @__PURE__ */ new ResizeObserverSingleton({ box: 'content-box' });\nconst resize_observer_border_box = /* @__PURE__ */ new ResizeObserverSingleton({ box: 'border-box' });\nconst resize_observer_device_pixel_content_box = /* @__PURE__ */ new ResizeObserverSingleton({ box: 'device-pixel-content-box' });\nfunction toggle_class(element, name, toggle) {\n element.classList[toggle ? 'add' : 'remove'](name);\n}\nfunction custom_event(type, detail, { bubbles = false, cancelable = false } = {}) {\n const e = document.createEvent('CustomEvent');\n e.initCustomEvent(type, bubbles, cancelable, detail);\n return e;\n}\nfunction query_selector_all(selector, parent = document.body) {\n return Array.from(parent.querySelectorAll(selector));\n}\nfunction head_selector(nodeId, head) {\n const result = [];\n let started = 0;\n for (const node of head.childNodes) {\n if (node.nodeType === 8 /* comment node */) {\n const comment = node.textContent.trim();\n if (comment === `HEAD_${nodeId}_END`) {\n started -= 1;\n result.push(node);\n }\n else if (comment === `HEAD_${nodeId}_START`) {\n started += 1;\n result.push(node);\n }\n }\n else if (started > 0) {\n result.push(node);\n }\n }\n return result;\n}\nclass HtmlTag {\n constructor(is_svg = false) {\n this.is_svg = false;\n this.is_svg = is_svg;\n this.e = this.n = null;\n }\n c(html) {\n this.h(html);\n }\n m(html, target, anchor = null) {\n if (!this.e) {\n if (this.is_svg)\n this.e = svg_element(target.nodeName);\n /** #7364 target for