@digdir/designsystemet-web 0.0.0-fix-css-component-variables-20260521102027 → 0.0.0-fix-missing-react-types-20260611075117
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/cjs/popover/popover.cjs +1 -1
- package/dist/cjs/popover/popover.cjs.map +1 -1
- package/dist/cjs/suggestion/suggestion.cjs +1 -1
- package/dist/cjs/suggestion/suggestion.cjs.map +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/popover/popover.js +1 -1
- package/dist/esm/popover/popover.js.map +1 -1
- package/dist/esm/suggestion/suggestion.js +1 -1
- package/dist/esm/suggestion/suggestion.js.map +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +9 -6
- package/dist/index.js.map +1 -1
- package/dist/umd/index.js +5 -5
- package/dist/umd/index.js.map +1 -1
- package/package.json +3 -3
package/dist/cjs/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","names":["isBrowser","isSupported"],"sources":["../../src/index.ts"],"sourcesContent":["import { isSupported, apply as polyfillInvokers } from 'invokers-polyfill/fn';\nimport { isBrowser } from './utils/utils';\nimport '@u-elements/u-details/polyfill'; // Polyfill for <details> element for Android Firefox + Talkback\nimport './clickdelegatefor/clickdelegatefor';\nimport './dialog/dialog';\nimport './fieldset/fieldset';\nimport './popover/popover';\nimport './readonly/readonly';\nimport './toggle-group/toggle-group';\nimport './tooltip/tooltip';\n\nexport * from '@u-elements/u-datalist'; // Re-export u-datalist since this is a pure polyfill and not custom Designsystemet elements\nexport * from './breadcrumbs/breadcrumbs';\nexport * from './error-summary/error-summary';\nexport * from './field/field';\nexport * from './pagination/pagination';\nexport * from './suggestion/suggestion';\nexport * from './tabs/tabs';\nexport * from './tooltip/tooltip';\n\nif (isBrowser() && !isSupported()) polyfillInvokers(); // Ensure invoker commands polyfill is loaded in browser environment only\n"],"mappings":"6rBAoBIA,EAAAA,UAAU,GAAK,CAACC,EAAAA,YAAY,GAAG,EAAA,MAAiB"}
|
|
1
|
+
{"version":3,"file":"index.cjs","names":["isBrowser","isSupported"],"sources":["../../src/index.ts"],"sourcesContent":["import { isSupported, apply as polyfillInvokers } from 'invokers-polyfill/fn';\nimport { isBrowser } from './utils/utils';\nimport '@u-elements/u-details/polyfill'; // Polyfill for <details> element for Android Firefox + Talkback\nimport './clickdelegatefor/clickdelegatefor';\nimport './dialog/dialog';\nimport './fieldset/fieldset';\nimport './popover/popover';\nimport './readonly/readonly';\nimport './toggle-group/toggle-group';\nimport './tooltip/tooltip';\n\nexport * from '@u-elements/u-datalist'; // Re-export u-datalist since this is a pure polyfill and not custom Designsystemet elements, should run before suggestion\nexport * from './breadcrumbs/breadcrumbs';\nexport * from './error-summary/error-summary';\nexport * from './field/field';\nexport * from './pagination/pagination';\nexport * from './suggestion/suggestion';\nexport * from './tabs/tabs';\nexport * from './tooltip/tooltip';\n\nif (isBrowser() && !isSupported()) polyfillInvokers(); // Ensure invoker commands polyfill is loaded in browser environment only\n"],"mappings":"6rBAoBIA,EAAAA,UAAU,GAAK,CAACC,EAAAA,YAAY,GAAG,EAAA,MAAiB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
require(`../_virtual/_rolldown/runtime.cjs`);const e=require(`../utils/utils.cjs`);let t=require(`@floating-ui/dom`);const n=`data-placement`,r=`data-autoplacement`,i=new Map;function a(a){let{newState:o,oldState:s,target:l,source:u=a.detail}=a,d=l instanceof HTMLElement&&e.attr(l,`popover`)!==null&&e.getCSSProp(l,`--_ds-floating`);if(!d)return;if(o===`closed`)return i.get(l)?.();if(!u){let e=l.getRootNode(),t=`[popovertarget="${l.id}"],[commandfor="${l.id}"]`;u=l.id&&e?.querySelector?.(t)||void 0}if(!u||u===l||s&&s===o)return;let f=e.getCSSProp(l,`--_ds-floating-overscroll`),p=e.attr(l,n)||e.attr(u,n)||d,m=e.attr(l,r)||e.attr(u,r),h=parseFloat(
|
|
1
|
+
require(`../_virtual/_rolldown/runtime.cjs`);const e=require(`../utils/utils.cjs`);let t=require(`@floating-ui/dom`);const n=`data-placement`,r=`data-autoplacement`,i=new Map;function a(a){let{newState:o,oldState:s,target:l,source:u=a.detail}=a,d=l instanceof HTMLElement&&e.attr(l,`popover`)!==null&&e.getCSSProp(l,`--_ds-floating`);if(!d)return;if(o===`closed`)return i.get(l)?.();if(!u){let e=l.getRootNode(),t=`[popovertarget="${l.id}"],[commandfor="${l.id}"]`;u=l.id&&e?.querySelector?.(t)||void 0}if(!u||u===l||s&&s===o)return;l.style.scrollMarginBottom=`var(--_ds-floating-arrow-size)`;let f=e.getCSSProp(l,`--_ds-floating-overscroll`),p=e.attr(l,n)||e.attr(u,n)||d,m=e.attr(l,r)||e.attr(u,r),h=parseFloat(e.getCSSProp(l,`scroll-margin-bottom`))||0,g=p.match(/left|right/gi)?`Height`:`Width`,_=u[`offset${g}`]/2+h;if(p===`none`)return;let v={strategy:`absolute`,placement:p,middleware:[(0,t.offset)(h),(0,t.shift)({padding:10,limiter:(0,t.limitShift)({offset:{mainAxis:_}})}),c(),...m===`false`?[]:[(0,t.flip)({padding:10,crossAxis:!1})],...f?[(0,t.size)({apply({availableHeight:e}){f===`fit`&&(l.style.width=`${u.offsetWidth}px`),l.style.maxHeight=`${Math.max(50,e-20)}px`}})]:[]]},y=(0,t.autoUpdate)(u,l,async()=>{if(!u?.isConnected)return i.get(l)?.();let{x:e,y:n}=await(0,t.computePosition)(u,l,v);l.style.translate=`${e}px ${n}px`});i.set(l,()=>i.delete(l)&&y())}let o;const s=({type:e})=>{if(e===`mousedown`&&(o=!1),e===`scroll`&&o===!1&&(o=!0),e===`mouseup`&&o)for(let[e]of i)e.showPopover()};e.onHotReload(`popover`,()=>[e.on(document,`mousedown scroll mouseup`,s,!0),e.on(document,`toggle ds-toggle-source`,a,e.QUICK_EVENT)]);const c=()=>({name:`arrowPseudo`,fn(t){let n=t.elements.floating,r=t.rects.reference,i=`${Math.round(r.width/2+r.x-t.x)}px`,a=`${Math.round(r.height/2+r.y-t.y)}px`;return n.style.setProperty(`--_ds-floating-arrow-x`,i),n.style.setProperty(`--_ds-floating-arrow-y`,a),e.attr(n,`data-floating`,t.placement),t}});
|
|
2
2
|
//# sourceMappingURL=popover.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.cjs","names":["attr","getCSSProp","onHotReload","on","QUICK_EVENT"],"sources":["../../../src/popover/popover.ts"],"sourcesContent":["import type { ComputePositionConfig, MiddlewareState } from '@floating-ui/dom';\nimport {\n autoUpdate,\n computePosition,\n flip,\n limitShift,\n offset,\n shift,\n size,\n} from '@floating-ui/dom';\nimport { attr, getCSSProp, on, onHotReload, QUICK_EVENT } from '../utils/utils';\n\ndeclare global {\n interface GlobalEventHandlersEventMap {\n 'ds-toggle-source': CustomEvent<Element>;\n }\n}\n\nconst ATTR_PLACE = 'data-placement';\nconst ATTR_AUTO = 'data-autoplacement';\nconst POPOVERS = new Map<HTMLElement, () => void>();\n\n// Sometimes use \"ds-toggle\" event while waiting for better support of\n// event.source (https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/source)\nfunction handleToggle(\n event: Partial<ToggleEvent> & {\n detail?: HTMLElement;\n source?: HTMLElement;\n },\n) {\n let { newState, oldState, target: el, source = event.detail } = event;\n const isPopover = el instanceof HTMLElement && attr(el, 'popover') !== null;\n const float = isPopover && getCSSProp(el, '--_ds-floating');\n\n if (!float) return;\n if (newState === 'closed') return POPOVERS.get(el)?.(); // Cleanup on close\n if (!source) {\n const root = el.getRootNode() as Document; // Support shadow DOM\n const css = `[popovertarget=\"${el.id}\"],[commandfor=\"${el.id}\"]`;\n source = (el.id && root?.querySelector?.<HTMLElement>(css)) || undefined; // Polyfill ToggleEvent .source for older browsers\n }\n if (!source || source === el || (oldState && oldState === newState)) return; // No need to update\n const padding = 10;\n const overscroll = getCSSProp(el, '--_ds-floating-overscroll');\n const placement = attr(el, ATTR_PLACE) || attr(source, ATTR_PLACE) || float;\n const auto = attr(el, ATTR_AUTO) || attr(source, ATTR_AUTO);\n const arrowSize = parseFloat(
|
|
1
|
+
{"version":3,"file":"popover.cjs","names":["attr","getCSSProp","onHotReload","on","QUICK_EVENT"],"sources":["../../../src/popover/popover.ts"],"sourcesContent":["import type { ComputePositionConfig, MiddlewareState } from '@floating-ui/dom';\nimport {\n autoUpdate,\n computePosition,\n flip,\n limitShift,\n offset,\n shift,\n size,\n} from '@floating-ui/dom';\nimport { attr, getCSSProp, on, onHotReload, QUICK_EVENT } from '../utils/utils';\n\ndeclare global {\n interface GlobalEventHandlersEventMap {\n 'ds-toggle-source': CustomEvent<Element>;\n }\n}\n\nconst ATTR_PLACE = 'data-placement';\nconst ATTR_AUTO = 'data-autoplacement';\nconst POPOVERS = new Map<HTMLElement, () => void>();\n\n// Sometimes use \"ds-toggle\" event while waiting for better support of\n// event.source (https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/source)\nfunction handleToggle(\n event: Partial<ToggleEvent> & {\n detail?: HTMLElement;\n source?: HTMLElement;\n },\n) {\n let { newState, oldState, target: el, source = event.detail } = event;\n const isPopover = el instanceof HTMLElement && attr(el, 'popover') !== null;\n const float = isPopover && getCSSProp(el, '--_ds-floating');\n\n if (!float) return;\n if (newState === 'closed') return POPOVERS.get(el)?.(); // Cleanup on close\n if (!source) {\n const root = el.getRootNode() as Document; // Support shadow DOM\n const css = `[popovertarget=\"${el.id}\"],[commandfor=\"${el.id}\"]`;\n source = (el.id && root?.querySelector?.<HTMLElement>(css)) || undefined; // Polyfill ToggleEvent .source for older browsers\n }\n if (!source || source === el || (oldState && oldState === newState)) return; // No need to update\n\n // Use scroll-margin-bottom to measure computed arrow-size property as this does\n // not affect layout or position, makes the browser calculate the pixel value instead\n // of returning the calc() (as it would if reading the --_ds-floating-arrow-size directly)\n // and makes it possible to read the value even if ::before is not used to draw the arrow.\n el.style.scrollMarginBottom = `var(--_ds-floating-arrow-size)`;\n\n const padding = 10;\n const overscroll = getCSSProp(el, '--_ds-floating-overscroll');\n const placement = attr(el, ATTR_PLACE) || attr(source, ATTR_PLACE) || float;\n const auto = attr(el, ATTR_AUTO) || attr(source, ATTR_AUTO);\n const arrowSize = parseFloat(getCSSProp(el, 'scroll-margin-bottom')) || 0;\n const shiftProp = placement.match(/left|right/gi) ? 'Height' : 'Width';\n const shiftLimit = source[`offset${shiftProp}`] / 2 + arrowSize;\n\n if (placement === 'none') return; // No need to position\n\n const options = {\n strategy: 'absolute',\n placement,\n middleware: [\n offset(arrowSize),\n shift({\n padding,\n limiter: limitShift({ offset: { mainAxis: shiftLimit } }), // Prevent from shifing away from source\n }),\n arrowPseudo(),\n ...(auto !== 'false' ? [flip({ padding, crossAxis: false })] : []),\n ...(overscroll\n ? [\n size({\n apply({ availableHeight }) {\n if (overscroll === 'fit')\n el.style.width = `${source.offsetWidth}px`; // Use offsetWidth to include padding, matching the width of the source element\n el.style.maxHeight = `${Math.max(50, availableHeight - padding * 2)}px`;\n },\n }),\n ]\n : []),\n ],\n } as ComputePositionConfig;\n const unfloat = autoUpdate(source, el, async () => {\n if (!source?.isConnected) return POPOVERS.get(el)?.(); // Cleanup if source element is removed\n const { x, y } = await computePosition(source, el, options);\n el.style.translate = `${x}px ${y}px`;\n });\n POPOVERS.set(el, () => POPOVERS.delete(el) && unfloat());\n}\n\n// Prevent closing when mouse interacts with scrollbar\nlet IS_SCROLL: boolean | undefined;\nconst handleScrollbar = ({ type }: Event) => {\n if (type === 'mousedown') IS_SCROLL = false;\n if (type === 'scroll' && IS_SCROLL === false) IS_SCROLL = true;\n if (type === 'mouseup' && IS_SCROLL)\n for (const [popover] of POPOVERS) popover.showPopover(); // Immediately show again to prevent flicker\n};\n\nonHotReload('popover', () => [\n on(document, 'mousedown scroll mouseup', handleScrollbar, true),\n on(document, 'toggle ds-toggle-source', handleToggle, QUICK_EVENT), // Use capture since the toggle event does not bubble\n]);\n\nconst arrowPseudo = () => ({\n name: 'arrowPseudo',\n fn(data: MiddlewareState) {\n const target = data.elements.floating;\n const source = data.rects.reference;\n const x = `${Math.round(source.width / 2 + source.x - data.x)}px`;\n const y = `${Math.round(source.height / 2 + source.y - data.y)}px`;\n\n target.style.setProperty('--_ds-floating-arrow-x', x);\n target.style.setProperty('--_ds-floating-arrow-y', y);\n attr(target, 'data-floating', data.placement);\n return data;\n },\n});\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
require(`../_virtual/_rolldown/runtime.cjs`);const e=require(`../utils/utils.cjs`);let t=require(`@u-elements/u-combobox`);var n=class extends t.UHTMLComboboxElement{_unmutate;connectedCallback(){super.connectedCallback(),this._unmutate=e.onMutation(this,r,{childList:!0}),e.on(this,`toggle`,i,e.QUICK_EVENT)}disconnectedCallback(){super.disconnectedCallback(),this._unmutate?.(),this._unmutate=void 0,e.off(this,`toggle`,i,e.QUICK_EVENT)}};const r=
|
|
1
|
+
require(`../_virtual/_rolldown/runtime.cjs`);const e=require(`../utils/utils.cjs`);let t=require(`@u-elements/u-combobox`);var n=class extends t.UHTMLComboboxElement{_unmutate;connectedCallback(){super.connectedCallback(),this._unmutate=e.onMutation(this,r,{childList:!0}),e.on(this,`toggle`,i,e.QUICK_EVENT)}disconnectedCallback(){super.disconnectedCallback(),this._unmutate?.(),this._unmutate=void 0,e.off(this,`toggle`,i,e.QUICK_EVENT)}};const r=t=>{let{control:n,list:r}=t,i=r||t.querySelector(`u-datalist`);n&&!n.placeholder&&e.attr(n,`placeholder`,` `),n&&e.attr(n,`popovertarget`,e.useId(r)||null),i&&e.attr(i,`popover`,`manual`),i&&e.attr(i,`data-is-floating`,`true`)},i=e=>{let t=e.currentTarget,n=e.newState===`open`&&t.control;n&&t.list?.dispatchEvent(new CustomEvent(`ds-toggle-source`,{detail:n}))};e.customElements.define(`ds-suggestion`,n),exports.DSSuggestionElement=n;
|
|
2
2
|
//# sourceMappingURL=suggestion.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"suggestion.cjs","names":["UHTMLComboboxElement","onMutation","QUICK_EVENT","useId","customElements"],"sources":["../../../src/suggestion/suggestion.ts"],"sourcesContent":["import { UHTMLComboboxElement } from '@u-elements/u-combobox';\nimport {\n attr,\n customElements,\n off,\n on,\n onMutation,\n QUICK_EVENT,\n useId,\n} from '../utils/utils';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ds-suggestion': DSSuggestionElement;\n }\n}\n\nexport class DSSuggestionElement extends UHTMLComboboxElement {\n _unmutate?: ReturnType<typeof onMutation>; // Using underscore instead of private fields for backwards compatibility\n\n connectedCallback() {\n super.connectedCallback();\n this._unmutate = onMutation(this, render, { childList: true }); // .control and .list are direct children of the custom element\n on(this, 'toggle', polyfillToggleSource, QUICK_EVENT);\n }\n disconnectedCallback() {\n super.disconnectedCallback();\n this._unmutate?.();\n this._unmutate = undefined;\n off(this, 'toggle', polyfillToggleSource, QUICK_EVENT);\n }\n}\n\n// A non-empty placeholder attribute is required to activate the :placeholder-shown pseudo selector used in our chevron styling\nconst render = ({ control, list }
|
|
1
|
+
{"version":3,"file":"suggestion.cjs","names":["UHTMLComboboxElement","onMutation","QUICK_EVENT","useId","customElements"],"sources":["../../../src/suggestion/suggestion.ts"],"sourcesContent":["import { UHTMLComboboxElement } from '@u-elements/u-combobox';\nimport {\n attr,\n customElements,\n off,\n on,\n onMutation,\n QUICK_EVENT,\n useId,\n} from '../utils/utils';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ds-suggestion': DSSuggestionElement;\n }\n}\n\nexport class DSSuggestionElement extends UHTMLComboboxElement {\n _unmutate?: ReturnType<typeof onMutation>; // Using underscore instead of private fields for backwards compatibility\n\n connectedCallback() {\n super.connectedCallback();\n this._unmutate = onMutation(this, render, { childList: true }); // .control and .list are direct children of the custom element\n on(this, 'toggle', polyfillToggleSource, QUICK_EVENT);\n }\n disconnectedCallback() {\n super.disconnectedCallback();\n this._unmutate?.();\n this._unmutate = undefined;\n off(this, 'toggle', polyfillToggleSource, QUICK_EVENT);\n }\n}\n\n// A non-empty placeholder attribute is required to activate the :placeholder-shown pseudo selector used in our chevron styling\nconst render = (self: DSSuggestionElement) => {\n const { control, list } = self;\n const datalist = list || self.querySelector('u-datalist'); // Fallback to u-datalist since React can render the ds-suggestion before u-datalist is connected\n\n if (control && !control.placeholder) attr(control, 'placeholder', ' '); // .control comes from UHTMLComboboxElement\n if (control) attr(control, 'popovertarget', useId(list) || null);\n if (datalist) attr(datalist, 'popover', 'manual'); // Ensure popover attribute is set on the list\n if (datalist) attr(datalist, 'data-is-floating', 'true'); // identifier for css to toggle opacity when it is placed by floating-ui.\n};\n\n// Since showPopover({ source }) is not supported in all browsers yet:\nconst polyfillToggleSource = (event: Partial<ToggleEvent>) => {\n const self = event.currentTarget as DSSuggestionElement;\n const detail = event.newState === 'open' && self.control; // .control comes from UHTMLComboboxElement\n\n if (detail)\n self.list?.dispatchEvent(new CustomEvent('ds-toggle-source', { detail }));\n};\n\n// Ensure u-datalist is defined before ds-suggestion\ncustomElements.define('ds-suggestion', DSSuggestionElement);\n"],"mappings":"2HAiBA,IAAa,EAAb,cAAyCA,EAAAA,oBAAqB,CAC5D,UAEA,mBAAoB,CAClB,MAAM,kBAAkB,EACxB,KAAK,UAAYC,EAAAA,WAAW,KAAM,EAAQ,CAAE,UAAW,EAAK,CAAC,EAC7D,EAAA,GAAG,KAAM,SAAU,EAAsBC,EAAAA,WAAW,CACtD,CACA,sBAAuB,CACrB,MAAM,qBAAqB,EAC3B,KAAK,YAAY,EACjB,KAAK,UAAY,IAAA,GACjB,EAAA,IAAI,KAAM,SAAU,EAAsBA,EAAAA,WAAW,CACvD,CACF,EAGA,MAAM,EAAU,GAA8B,CAC5C,GAAM,CAAE,UAAS,QAAS,EACpB,EAAW,GAAQ,EAAK,cAAc,YAAY,EAEpD,GAAW,CAAC,EAAQ,aAAa,EAAA,KAAK,EAAS,cAAe,GAAG,EACjE,GAAS,EAAA,KAAK,EAAS,gBAAiBC,EAAAA,MAAM,CAAI,GAAK,IAAI,EAC3D,GAAU,EAAA,KAAK,EAAU,UAAW,QAAQ,EAC5C,GAAU,EAAA,KAAK,EAAU,mBAAoB,MAAM,CACzD,EAGM,EAAwB,GAAgC,CAC5D,IAAM,EAAO,EAAM,cACb,EAAS,EAAM,WAAa,QAAU,EAAK,QAE7C,GACF,EAAK,MAAM,cAAc,IAAI,YAAY,mBAAoB,CAAE,QAAO,CAAC,CAAC,CAC5E,EAGAC,EAAAA,eAAe,OAAO,gBAAiB,CAAmB"}
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["import { isSupported, apply as polyfillInvokers } from 'invokers-polyfill/fn';\nimport { isBrowser } from './utils/utils';\nimport '@u-elements/u-details/polyfill'; // Polyfill for <details> element for Android Firefox + Talkback\nimport './clickdelegatefor/clickdelegatefor';\nimport './dialog/dialog';\nimport './fieldset/fieldset';\nimport './popover/popover';\nimport './readonly/readonly';\nimport './toggle-group/toggle-group';\nimport './tooltip/tooltip';\n\nexport * from '@u-elements/u-datalist'; // Re-export u-datalist since this is a pure polyfill and not custom Designsystemet elements\nexport * from './breadcrumbs/breadcrumbs';\nexport * from './error-summary/error-summary';\nexport * from './field/field';\nexport * from './pagination/pagination';\nexport * from './suggestion/suggestion';\nexport * from './tabs/tabs';\nexport * from './tooltip/tooltip';\n\nif (isBrowser() && !isSupported()) polyfillInvokers(); // Ensure invoker commands polyfill is loaded in browser environment only\n"],"mappings":"64BAoBI,EAAU,GAAK,CAAC,EAAY,GAAG,EAAiB"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["import { isSupported, apply as polyfillInvokers } from 'invokers-polyfill/fn';\nimport { isBrowser } from './utils/utils';\nimport '@u-elements/u-details/polyfill'; // Polyfill for <details> element for Android Firefox + Talkback\nimport './clickdelegatefor/clickdelegatefor';\nimport './dialog/dialog';\nimport './fieldset/fieldset';\nimport './popover/popover';\nimport './readonly/readonly';\nimport './toggle-group/toggle-group';\nimport './tooltip/tooltip';\n\nexport * from '@u-elements/u-datalist'; // Re-export u-datalist since this is a pure polyfill and not custom Designsystemet elements, should run before suggestion\nexport * from './breadcrumbs/breadcrumbs';\nexport * from './error-summary/error-summary';\nexport * from './field/field';\nexport * from './pagination/pagination';\nexport * from './suggestion/suggestion';\nexport * from './tabs/tabs';\nexport * from './tooltip/tooltip';\n\nif (isBrowser() && !isSupported()) polyfillInvokers(); // Ensure invoker commands polyfill is loaded in browser environment only\n"],"mappings":"64BAoBI,EAAU,GAAK,CAAC,EAAY,GAAG,EAAiB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{QUICK_EVENT as e,attr as t,getCSSProp as n,on as r,onHotReload as i}from"../utils/utils.js";import{autoUpdate as a,computePosition as o,flip as s,limitShift as c,offset as l,shift as u,size as d}from"@floating-ui/dom";const f=`data-placement`,p=`data-autoplacement`,m=new Map;function h(e){let{newState:r,oldState:i,target:h,source:g=e.detail}=e,_=h instanceof HTMLElement&&t(h,`popover`)!==null&&n(h,`--_ds-floating`);if(!_)return;if(r===`closed`)return m.get(h)?.();if(!g){let e=h.getRootNode(),t=`[popovertarget="${h.id}"],[commandfor="${h.id}"]`;g=h.id&&e?.querySelector?.(t)||void 0}if(!g||g===h||i&&i===r)return;let y=n(h,`--_ds-floating-overscroll`),b=t(h,f)||t(g,f)||_,x=t(h,p)||t(g,p),S=parseFloat(
|
|
1
|
+
import{QUICK_EVENT as e,attr as t,getCSSProp as n,on as r,onHotReload as i}from"../utils/utils.js";import{autoUpdate as a,computePosition as o,flip as s,limitShift as c,offset as l,shift as u,size as d}from"@floating-ui/dom";const f=`data-placement`,p=`data-autoplacement`,m=new Map;function h(e){let{newState:r,oldState:i,target:h,source:g=e.detail}=e,_=h instanceof HTMLElement&&t(h,`popover`)!==null&&n(h,`--_ds-floating`);if(!_)return;if(r===`closed`)return m.get(h)?.();if(!g){let e=h.getRootNode(),t=`[popovertarget="${h.id}"],[commandfor="${h.id}"]`;g=h.id&&e?.querySelector?.(t)||void 0}if(!g||g===h||i&&i===r)return;h.style.scrollMarginBottom=`var(--_ds-floating-arrow-size)`;let y=n(h,`--_ds-floating-overscroll`),b=t(h,f)||t(g,f)||_,x=t(h,p)||t(g,p),S=parseFloat(n(h,`scroll-margin-bottom`))||0,C=b.match(/left|right/gi)?`Height`:`Width`,w=g[`offset${C}`]/2+S;if(b===`none`)return;let T={strategy:`absolute`,placement:b,middleware:[l(S),u({padding:10,limiter:c({offset:{mainAxis:w}})}),v(),...x===`false`?[]:[s({padding:10,crossAxis:!1})],...y?[d({apply({availableHeight:e}){y===`fit`&&(h.style.width=`${g.offsetWidth}px`),h.style.maxHeight=`${Math.max(50,e-20)}px`}})]:[]]},E=a(g,h,async()=>{if(!g?.isConnected)return m.get(h)?.();let{x:e,y:t}=await o(g,h,T);h.style.translate=`${e}px ${t}px`});m.set(h,()=>m.delete(h)&&E())}let g;const _=({type:e})=>{if(e===`mousedown`&&(g=!1),e===`scroll`&&g===!1&&(g=!0),e===`mouseup`&&g)for(let[e]of m)e.showPopover()};i(`popover`,()=>[r(document,`mousedown scroll mouseup`,_,!0),r(document,`toggle ds-toggle-source`,h,e)]);const v=()=>({name:`arrowPseudo`,fn(e){let n=e.elements.floating,r=e.rects.reference,i=`${Math.round(r.width/2+r.x-e.x)}px`,a=`${Math.round(r.height/2+r.y-e.y)}px`;return n.style.setProperty(`--_ds-floating-arrow-x`,i),n.style.setProperty(`--_ds-floating-arrow-y`,a),t(n,`data-floating`,e.placement),e}});
|
|
2
2
|
//# sourceMappingURL=popover.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.js","names":[],"sources":["../../../src/popover/popover.ts"],"sourcesContent":["import type { ComputePositionConfig, MiddlewareState } from '@floating-ui/dom';\nimport {\n autoUpdate,\n computePosition,\n flip,\n limitShift,\n offset,\n shift,\n size,\n} from '@floating-ui/dom';\nimport { attr, getCSSProp, on, onHotReload, QUICK_EVENT } from '../utils/utils';\n\ndeclare global {\n interface GlobalEventHandlersEventMap {\n 'ds-toggle-source': CustomEvent<Element>;\n }\n}\n\nconst ATTR_PLACE = 'data-placement';\nconst ATTR_AUTO = 'data-autoplacement';\nconst POPOVERS = new Map<HTMLElement, () => void>();\n\n// Sometimes use \"ds-toggle\" event while waiting for better support of\n// event.source (https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/source)\nfunction handleToggle(\n event: Partial<ToggleEvent> & {\n detail?: HTMLElement;\n source?: HTMLElement;\n },\n) {\n let { newState, oldState, target: el, source = event.detail } = event;\n const isPopover = el instanceof HTMLElement && attr(el, 'popover') !== null;\n const float = isPopover && getCSSProp(el, '--_ds-floating');\n\n if (!float) return;\n if (newState === 'closed') return POPOVERS.get(el)?.(); // Cleanup on close\n if (!source) {\n const root = el.getRootNode() as Document; // Support shadow DOM\n const css = `[popovertarget=\"${el.id}\"],[commandfor=\"${el.id}\"]`;\n source = (el.id && root?.querySelector?.<HTMLElement>(css)) || undefined; // Polyfill ToggleEvent .source for older browsers\n }\n if (!source || source === el || (oldState && oldState === newState)) return; // No need to update\n const padding = 10;\n const overscroll = getCSSProp(el, '--_ds-floating-overscroll');\n const placement = attr(el, ATTR_PLACE) || attr(source, ATTR_PLACE) || float;\n const auto = attr(el, ATTR_AUTO) || attr(source, ATTR_AUTO);\n const arrowSize = parseFloat(
|
|
1
|
+
{"version":3,"file":"popover.js","names":[],"sources":["../../../src/popover/popover.ts"],"sourcesContent":["import type { ComputePositionConfig, MiddlewareState } from '@floating-ui/dom';\nimport {\n autoUpdate,\n computePosition,\n flip,\n limitShift,\n offset,\n shift,\n size,\n} from '@floating-ui/dom';\nimport { attr, getCSSProp, on, onHotReload, QUICK_EVENT } from '../utils/utils';\n\ndeclare global {\n interface GlobalEventHandlersEventMap {\n 'ds-toggle-source': CustomEvent<Element>;\n }\n}\n\nconst ATTR_PLACE = 'data-placement';\nconst ATTR_AUTO = 'data-autoplacement';\nconst POPOVERS = new Map<HTMLElement, () => void>();\n\n// Sometimes use \"ds-toggle\" event while waiting for better support of\n// event.source (https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/source)\nfunction handleToggle(\n event: Partial<ToggleEvent> & {\n detail?: HTMLElement;\n source?: HTMLElement;\n },\n) {\n let { newState, oldState, target: el, source = event.detail } = event;\n const isPopover = el instanceof HTMLElement && attr(el, 'popover') !== null;\n const float = isPopover && getCSSProp(el, '--_ds-floating');\n\n if (!float) return;\n if (newState === 'closed') return POPOVERS.get(el)?.(); // Cleanup on close\n if (!source) {\n const root = el.getRootNode() as Document; // Support shadow DOM\n const css = `[popovertarget=\"${el.id}\"],[commandfor=\"${el.id}\"]`;\n source = (el.id && root?.querySelector?.<HTMLElement>(css)) || undefined; // Polyfill ToggleEvent .source for older browsers\n }\n if (!source || source === el || (oldState && oldState === newState)) return; // No need to update\n\n // Use scroll-margin-bottom to measure computed arrow-size property as this does\n // not affect layout or position, makes the browser calculate the pixel value instead\n // of returning the calc() (as it would if reading the --_ds-floating-arrow-size directly)\n // and makes it possible to read the value even if ::before is not used to draw the arrow.\n el.style.scrollMarginBottom = `var(--_ds-floating-arrow-size)`;\n\n const padding = 10;\n const overscroll = getCSSProp(el, '--_ds-floating-overscroll');\n const placement = attr(el, ATTR_PLACE) || attr(source, ATTR_PLACE) || float;\n const auto = attr(el, ATTR_AUTO) || attr(source, ATTR_AUTO);\n const arrowSize = parseFloat(getCSSProp(el, 'scroll-margin-bottom')) || 0;\n const shiftProp = placement.match(/left|right/gi) ? 'Height' : 'Width';\n const shiftLimit = source[`offset${shiftProp}`] / 2 + arrowSize;\n\n if (placement === 'none') return; // No need to position\n\n const options = {\n strategy: 'absolute',\n placement,\n middleware: [\n offset(arrowSize),\n shift({\n padding,\n limiter: limitShift({ offset: { mainAxis: shiftLimit } }), // Prevent from shifing away from source\n }),\n arrowPseudo(),\n ...(auto !== 'false' ? [flip({ padding, crossAxis: false })] : []),\n ...(overscroll\n ? [\n size({\n apply({ availableHeight }) {\n if (overscroll === 'fit')\n el.style.width = `${source.offsetWidth}px`; // Use offsetWidth to include padding, matching the width of the source element\n el.style.maxHeight = `${Math.max(50, availableHeight - padding * 2)}px`;\n },\n }),\n ]\n : []),\n ],\n } as ComputePositionConfig;\n const unfloat = autoUpdate(source, el, async () => {\n if (!source?.isConnected) return POPOVERS.get(el)?.(); // Cleanup if source element is removed\n const { x, y } = await computePosition(source, el, options);\n el.style.translate = `${x}px ${y}px`;\n });\n POPOVERS.set(el, () => POPOVERS.delete(el) && unfloat());\n}\n\n// Prevent closing when mouse interacts with scrollbar\nlet IS_SCROLL: boolean | undefined;\nconst handleScrollbar = ({ type }: Event) => {\n if (type === 'mousedown') IS_SCROLL = false;\n if (type === 'scroll' && IS_SCROLL === false) IS_SCROLL = true;\n if (type === 'mouseup' && IS_SCROLL)\n for (const [popover] of POPOVERS) popover.showPopover(); // Immediately show again to prevent flicker\n};\n\nonHotReload('popover', () => [\n on(document, 'mousedown scroll mouseup', handleScrollbar, true),\n on(document, 'toggle ds-toggle-source', handleToggle, QUICK_EVENT), // Use capture since the toggle event does not bubble\n]);\n\nconst arrowPseudo = () => ({\n name: 'arrowPseudo',\n fn(data: MiddlewareState) {\n const target = data.elements.floating;\n const source = data.rects.reference;\n const x = `${Math.round(source.width / 2 + source.x - data.x)}px`;\n const y = `${Math.round(source.height / 2 + source.y - data.y)}px`;\n\n target.style.setProperty('--_ds-floating-arrow-x', x);\n target.style.setProperty('--_ds-floating-arrow-y', y);\n attr(target, 'data-floating', data.placement);\n return data;\n },\n});\n"],"mappings":"iOAkBA,MAAM,EAAa,iBACb,EAAY,qBACZ,EAAW,IAAI,IAIrB,SAAS,EACP,EAIA,CACA,GAAI,CAAE,WAAU,WAAU,OAAQ,EAAI,SAAS,EAAM,QAAW,EAE1D,EADY,aAAc,aAAe,EAAK,EAAI,SAAS,IAAM,MAC5C,EAAW,EAAI,gBAAgB,EAE1D,GAAI,CAAC,EAAO,OACZ,GAAI,IAAa,SAAU,OAAO,EAAS,IAAI,CAAE,IAAI,EACrD,GAAI,CAAC,EAAQ,CACX,IAAM,EAAO,EAAG,YAAY,EACtB,EAAM,mBAAmB,EAAG,GAAG,kBAAkB,EAAG,GAAG,IAC7D,EAAU,EAAG,IAAM,GAAM,gBAA6B,CAAG,GAAM,IAAA,EACjE,CACA,GAAI,CAAC,GAAU,IAAW,GAAO,GAAY,IAAa,EAAW,OAMrE,EAAG,MAAM,mBAAqB,iCAE9B,IACM,EAAa,EAAW,EAAI,2BAA2B,EACvD,EAAY,EAAK,EAAI,CAAU,GAAK,EAAK,EAAQ,CAAU,GAAK,EAChE,EAAO,EAAK,EAAI,CAAS,GAAK,EAAK,EAAQ,CAAS,EACpD,EAAY,WAAW,EAAW,EAAI,sBAAsB,CAAC,GAAK,EAClE,EAAY,EAAU,MAAM,cAAc,EAAI,SAAW,QACzD,EAAa,EAAO,SAAS,KAAe,EAAI,EAEtD,GAAI,IAAc,OAAQ,OAE1B,IAAM,EAAU,CACd,SAAU,WACV,YACA,WAAY,CACV,EAAO,CAAS,EAChB,EAAM,CACJ,WACA,QAAS,EAAW,CAAE,OAAQ,CAAE,SAAU,CAAW,CAAE,CAAC,CAC1D,CAAC,EACD,EAAY,EACZ,GAAI,IAAS,QAAkD,CAAC,EAAzC,CAAC,EAAK,CAAE,WAAS,UAAW,EAAM,CAAC,CAAC,EAC3D,GAAI,EACA,CACE,EAAK,CACH,MAAM,CAAE,mBAAmB,CACrB,IAAe,QACjB,EAAG,MAAM,MAAQ,GAAG,EAAO,YAAY,KACzC,EAAG,MAAM,UAAY,GAAG,KAAK,IAAI,GAAI,EAAkB,EAAW,EAAE,GACtE,CACF,CAAC,CACH,EACA,CAAC,CACP,CACF,EACM,EAAU,EAAW,EAAQ,EAAI,SAAY,CACjD,GAAI,CAAC,GAAQ,YAAa,OAAO,EAAS,IAAI,CAAE,IAAI,EACpD,GAAM,CAAE,IAAG,KAAM,MAAM,EAAgB,EAAQ,EAAI,CAAO,EAC1D,EAAG,MAAM,UAAY,GAAG,EAAE,KAAK,EAAE,GACnC,CAAC,EACD,EAAS,IAAI,MAAU,EAAS,OAAO,CAAE,GAAK,EAAQ,CAAC,CACzD,CAGA,IAAI,EACJ,MAAM,GAAmB,CAAE,UAAkB,CAG3C,GAFI,IAAS,cAAa,EAAY,IAClC,IAAS,UAAY,IAAc,KAAO,EAAY,IACtD,IAAS,WAAa,EACxB,IAAK,GAAM,CAAC,KAAY,EAAU,EAAQ,YAAY,CAC1D,EAEA,EAAY,cAAiB,CAC3B,EAAG,SAAU,2BAA4B,EAAiB,EAAI,EAC9D,EAAG,SAAU,0BAA2B,EAAc,CAAW,CACnE,CAAC,EAED,MAAM,OAAqB,CACzB,KAAM,cACN,GAAG,EAAuB,CACxB,IAAM,EAAS,EAAK,SAAS,SACvB,EAAS,EAAK,MAAM,UACpB,EAAI,GAAG,KAAK,MAAM,EAAO,MAAQ,EAAI,EAAO,EAAI,EAAK,CAAC,EAAE,IACxD,EAAI,GAAG,KAAK,MAAM,EAAO,OAAS,EAAI,EAAO,EAAI,EAAK,CAAC,EAAE,IAK/D,OAHA,EAAO,MAAM,YAAY,yBAA0B,CAAC,EACpD,EAAO,MAAM,YAAY,yBAA0B,CAAC,EACpD,EAAK,EAAQ,gBAAiB,EAAK,SAAS,EACrC,CACT,CACF"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{QUICK_EVENT as e,attr as t,customElements as n,off as r,on as i,onMutation as a,useId as o}from"../utils/utils.js";import{UHTMLComboboxElement as s}from"@u-elements/u-combobox";var c=class extends s{_unmutate;connectedCallback(){super.connectedCallback(),this._unmutate=a(this,l,{childList:!0}),i(this,`toggle`,u,e)}disconnectedCallback(){super.disconnectedCallback(),this._unmutate?.(),this._unmutate=void 0,r(this,`toggle`,u,e)}};const l=
|
|
1
|
+
import{QUICK_EVENT as e,attr as t,customElements as n,off as r,on as i,onMutation as a,useId as o}from"../utils/utils.js";import{UHTMLComboboxElement as s}from"@u-elements/u-combobox";var c=class extends s{_unmutate;connectedCallback(){super.connectedCallback(),this._unmutate=a(this,l,{childList:!0}),i(this,`toggle`,u,e)}disconnectedCallback(){super.disconnectedCallback(),this._unmutate?.(),this._unmutate=void 0,r(this,`toggle`,u,e)}};const l=e=>{let{control:n,list:r}=e,i=r||e.querySelector(`u-datalist`);n&&!n.placeholder&&t(n,`placeholder`,` `),n&&t(n,`popovertarget`,o(r)||null),i&&t(i,`popover`,`manual`),i&&t(i,`data-is-floating`,`true`)},u=e=>{let t=e.currentTarget,n=e.newState===`open`&&t.control;n&&t.list?.dispatchEvent(new CustomEvent(`ds-toggle-source`,{detail:n}))};n.define(`ds-suggestion`,c);export{c as DSSuggestionElement};
|
|
2
2
|
//# sourceMappingURL=suggestion.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"suggestion.js","names":[],"sources":["../../../src/suggestion/suggestion.ts"],"sourcesContent":["import { UHTMLComboboxElement } from '@u-elements/u-combobox';\nimport {\n attr,\n customElements,\n off,\n on,\n onMutation,\n QUICK_EVENT,\n useId,\n} from '../utils/utils';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ds-suggestion': DSSuggestionElement;\n }\n}\n\nexport class DSSuggestionElement extends UHTMLComboboxElement {\n _unmutate?: ReturnType<typeof onMutation>; // Using underscore instead of private fields for backwards compatibility\n\n connectedCallback() {\n super.connectedCallback();\n this._unmutate = onMutation(this, render, { childList: true }); // .control and .list are direct children of the custom element\n on(this, 'toggle', polyfillToggleSource, QUICK_EVENT);\n }\n disconnectedCallback() {\n super.disconnectedCallback();\n this._unmutate?.();\n this._unmutate = undefined;\n off(this, 'toggle', polyfillToggleSource, QUICK_EVENT);\n }\n}\n\n// A non-empty placeholder attribute is required to activate the :placeholder-shown pseudo selector used in our chevron styling\nconst render = ({ control, list }
|
|
1
|
+
{"version":3,"file":"suggestion.js","names":[],"sources":["../../../src/suggestion/suggestion.ts"],"sourcesContent":["import { UHTMLComboboxElement } from '@u-elements/u-combobox';\nimport {\n attr,\n customElements,\n off,\n on,\n onMutation,\n QUICK_EVENT,\n useId,\n} from '../utils/utils';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ds-suggestion': DSSuggestionElement;\n }\n}\n\nexport class DSSuggestionElement extends UHTMLComboboxElement {\n _unmutate?: ReturnType<typeof onMutation>; // Using underscore instead of private fields for backwards compatibility\n\n connectedCallback() {\n super.connectedCallback();\n this._unmutate = onMutation(this, render, { childList: true }); // .control and .list are direct children of the custom element\n on(this, 'toggle', polyfillToggleSource, QUICK_EVENT);\n }\n disconnectedCallback() {\n super.disconnectedCallback();\n this._unmutate?.();\n this._unmutate = undefined;\n off(this, 'toggle', polyfillToggleSource, QUICK_EVENT);\n }\n}\n\n// A non-empty placeholder attribute is required to activate the :placeholder-shown pseudo selector used in our chevron styling\nconst render = (self: DSSuggestionElement) => {\n const { control, list } = self;\n const datalist = list || self.querySelector('u-datalist'); // Fallback to u-datalist since React can render the ds-suggestion before u-datalist is connected\n\n if (control && !control.placeholder) attr(control, 'placeholder', ' '); // .control comes from UHTMLComboboxElement\n if (control) attr(control, 'popovertarget', useId(list) || null);\n if (datalist) attr(datalist, 'popover', 'manual'); // Ensure popover attribute is set on the list\n if (datalist) attr(datalist, 'data-is-floating', 'true'); // identifier for css to toggle opacity when it is placed by floating-ui.\n};\n\n// Since showPopover({ source }) is not supported in all browsers yet:\nconst polyfillToggleSource = (event: Partial<ToggleEvent>) => {\n const self = event.currentTarget as DSSuggestionElement;\n const detail = event.newState === 'open' && self.control; // .control comes from UHTMLComboboxElement\n\n if (detail)\n self.list?.dispatchEvent(new CustomEvent('ds-toggle-source', { detail }));\n};\n\n// Ensure u-datalist is defined before ds-suggestion\ncustomElements.define('ds-suggestion', DSSuggestionElement);\n"],"mappings":"wLAiBA,IAAa,EAAb,cAAyC,CAAqB,CAC5D,UAEA,mBAAoB,CAClB,MAAM,kBAAkB,EACxB,KAAK,UAAY,EAAW,KAAM,EAAQ,CAAE,UAAW,EAAK,CAAC,EAC7D,EAAG,KAAM,SAAU,EAAsB,CAAW,CACtD,CACA,sBAAuB,CACrB,MAAM,qBAAqB,EAC3B,KAAK,YAAY,EACjB,KAAK,UAAY,IAAA,GACjB,EAAI,KAAM,SAAU,EAAsB,CAAW,CACvD,CACF,EAGA,MAAM,EAAU,GAA8B,CAC5C,GAAM,CAAE,UAAS,QAAS,EACpB,EAAW,GAAQ,EAAK,cAAc,YAAY,EAEpD,GAAW,CAAC,EAAQ,aAAa,EAAK,EAAS,cAAe,GAAG,EACjE,GAAS,EAAK,EAAS,gBAAiB,EAAM,CAAI,GAAK,IAAI,EAC3D,GAAU,EAAK,EAAU,UAAW,QAAQ,EAC5C,GAAU,EAAK,EAAU,mBAAoB,MAAM,CACzD,EAGM,EAAwB,GAAgC,CAC5D,IAAM,EAAO,EAAM,cACb,EAAS,EAAM,WAAa,QAAU,EAAK,QAE7C,GACF,EAAK,MAAM,cAAc,IAAI,YAAY,mBAAoB,CAAE,QAAO,CAAC,CAAC,CAC5E,EAGA,EAAe,OAAO,gBAAiB,CAAmB"}
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","names":[],"sources":["../src/popover/popover.ts","../src/tooltip/tooltip.ts","../src/utils/utils.ts","../src/breadcrumbs/breadcrumbs.ts","../src/error-summary/error-summary.ts","../src/field/field.ts","../src/pagination/pagination.ts","../src/suggestion/suggestion.ts","../src/tabs/tabs.ts"],"mappings":";;;;;QAYQ,MAAA;EAAA,UACI,2BAAA;IACR,kBAAA,EAAoB,WAAW,CAAC,OAAA;EAAA;AAAA;;;;;;;;cCsBvB,iBAAA,GAAqB,EAAuB,GAAlB,WAAW;;;cCxBrC,SAAA;EAAA,QAGI,WAAA;aAAA,WAAA;AAAA;;;;;QAkBT,MAAA;EAAA,UACI,MAAA;IACR,UAAA;EAAA;AAAA;AAAA,QAqFI,MAAA;EAAA,UACI,MAAA;IACR,mBAAA,GAAsB,GAAG,SAAS,KAAA;EAAA;AAAA;;;;;;;;;;;cAsBzB,UAAA,aAAwB,IAAA,EACnC,EAAA,EAAI,CAAA,EACJ,QAAA,GAAW,EAAA,EAAI,CAAA,EAAG,OAAA,GAAU,cAAA,aAC5B,OAAA,EAAS,oBAAA;AAgDA;;;;AAAA,QAFH,MAAA;EAAA,UACI,MAAA;IACR,OAAA;EAAA;AAAA;;;QCzLI,MAAA;EAAA,UACI,qBAAA;IACR,gBAAA,EAAkB,oBAAoB;EAAA;AAAA;AAAA,cAM7B,oBAAA,SAA6B,SAAA;EACxC,MAAA,GAAS,gBAAA,CAAiB,iBAAA;EAC1B,MAAA;EACA,SAAA;EACA,SAAA;EAAA,WAEW,kBAAA
|
|
1
|
+
{"version":3,"file":"index.d.ts","names":[],"sources":["../src/popover/popover.ts","../src/tooltip/tooltip.ts","../src/utils/utils.ts","../src/breadcrumbs/breadcrumbs.ts","../src/error-summary/error-summary.ts","../src/field/field.ts","../src/pagination/pagination.ts","../src/suggestion/suggestion.ts","../src/tabs/tabs.ts"],"mappings":";;;;;QAYQ,MAAA;EAAA,UACI,2BAAA;IACR,kBAAA,EAAoB,WAAW,CAAC,OAAA;EAAA;AAAA;;;;;;;;cCsBvB,iBAAA,GAAqB,EAAuB,GAAlB,WAAW;;;cCxBrC,SAAA;EAAA,QAGI,WAAA;aAAA,WAAA;AAAA;;;;;QAkBT,MAAA;EAAA,UACI,MAAA;IACR,UAAA;EAAA;AAAA;AAAA,QAqFI,MAAA;EAAA,UACI,MAAA;IACR,mBAAA,GAAsB,GAAG,SAAS,KAAA;EAAA;AAAA;;;;;;;;;;;cAsBzB,UAAA,aAAwB,IAAA,EACnC,EAAA,EAAI,CAAA,EACJ,QAAA,GAAW,EAAA,EAAI,CAAA,EAAG,OAAA,GAAU,cAAA,aAC5B,OAAA,EAAS,oBAAA;AAgDA;;;;AAAA,QAFH,MAAA;EAAA,UACI,MAAA;IACR,OAAA;EAAA;AAAA;;;QCzLI,MAAA;EAAA,UACI,qBAAA;IACR,gBAAA,EAAkB,oBAAoB;EAAA;AAAA;AAAA,cAM7B,oBAAA,SAA6B,SAAA;EACxC,MAAA,GAAS,gBAAA,CAAiB,iBAAA;EAC1B,MAAA;EACA,SAAA;EACA,SAAA;EAAA,WAEW,kBAAA;EAGX,iBAAA;EAUA,wBAAA,CAAyB,KAAA,UAAe,KAAA,WAAgB,IAAA;EAKxD,oBAAA;AAAA;;;QC9BM,MAAA;EAAA,UACI,qBAAA;IACR,kBAAA,EAAoB,qBAAqB;EAAA;AAAA;AAAA,cAIhC,qBAAA,SAA8B,SAAA;EACzC,SAAA;EAEA,iBAAA;EAUA,WAAA;IAAc;EAAA,GAAU,KAAA;EAGxB,oBAAA;AAAA;;;QCjBM,MAAA;EAAA,UACI,qBAAA;IACR,UAAA,EAAY,cAAc;EAAA;AAAA;AAAA,cAsIjB,cAAA,SAAuB,SAAS;EAC3C,iBAAA;EAIA,oBAAA;AAAA;;;QCrJM,MAAA;EAAA,UACI,qBAAA;IACR,eAAA,EAAiB,mBAAmB;EAAA;AAAA;AAAA,cAU3B,UAAA;EAAc,OAAA;EAAA,KAAA;EAAA;AAAA;;;;;;;;;;;;;cAUd,mBAAA,SAA4B,SAAS;EAChD,SAAA;EACA,OAAA;EAAA,WAEW,kBAAA;EAGX,iBAAA;EAcA,wBAAA;EAGA,oBAAA;AAAA;;;QC5CM,MAAA;EAAA,UACI,qBAAA;IACR,eAAA,EAAiB,mBAAmB;EAAA;AAAA;AAAA,cAI3B,mBAAA,SAA4B,oBAAA;EACvC,SAAA,GAAY,UAAA,QAAkB,UAAA;EAE9B,iBAAA;EAKA,oBAAA;AAAA;;;QCtBM,MAAA;EAAA,UACI,qBAAA;IACR,SAAA,EAAW,aAAA;IACX,YAAA,EAAc,gBAAA;IACd,QAAA,EAAU,YAAA;IACV,aAAA,EAAe,iBAAA;EAAA;AAAA;AAAA,cAIN,aAAA,SAAsB,KAAA,CAAM,gBAAgB;AAAA,cAC5C,gBAAA,SAAyB,KAAA,CAAM,mBAAmB;AAAA,cAClD,YAAA,SAAqB,KAAA,CAAM,eAAe;AAAA,cAC1C,iBAAA,SAA0B,KAAA,CAAM,oBAAoB"}
|
package/dist/index.js
CHANGED
|
@@ -462,11 +462,12 @@ function handleToggle(event) {
|
|
|
462
462
|
source = el.id && root?.querySelector?.(css) || void 0;
|
|
463
463
|
}
|
|
464
464
|
if (!source || source === el || oldState && oldState === newState) return;
|
|
465
|
+
el.style.scrollMarginBottom = `var(--_ds-floating-arrow-size)`;
|
|
465
466
|
const padding = 10;
|
|
466
467
|
const overscroll = getCSSProp(el, "--_ds-floating-overscroll");
|
|
467
468
|
const placement = attr(el, ATTR_PLACE) || attr(source, ATTR_PLACE) || float;
|
|
468
469
|
const auto = attr(el, ATTR_AUTO) || attr(source, ATTR_AUTO);
|
|
469
|
-
const arrowSize = parseFloat(
|
|
470
|
+
const arrowSize = parseFloat(getCSSProp(el, "scroll-margin-bottom")) || 0;
|
|
470
471
|
const shiftProp = placement.match(/left|right/gi) ? "Height" : "Width";
|
|
471
472
|
const shiftLimit = source[`offset${shiftProp}`] / 2 + arrowSize;
|
|
472
473
|
if (placement === "none") return;
|
|
@@ -474,7 +475,7 @@ function handleToggle(event) {
|
|
|
474
475
|
strategy: "absolute",
|
|
475
476
|
placement,
|
|
476
477
|
middleware: [
|
|
477
|
-
offset(arrowSize
|
|
478
|
+
offset(arrowSize),
|
|
478
479
|
shift({
|
|
479
480
|
padding,
|
|
480
481
|
limiter: limitShift({ offset: { mainAxis: shiftLimit } })
|
|
@@ -485,7 +486,7 @@ function handleToggle(event) {
|
|
|
485
486
|
crossAxis: false
|
|
486
487
|
})] : [],
|
|
487
488
|
...overscroll ? [size({ apply({ availableHeight }) {
|
|
488
|
-
if (overscroll === "fit") el.style.width = `${source.
|
|
489
|
+
if (overscroll === "fit") el.style.width = `${source.offsetWidth}px`;
|
|
489
490
|
el.style.maxHeight = `${Math.max(50, availableHeight - padding * 2)}px`;
|
|
490
491
|
} })] : []
|
|
491
492
|
]
|
|
@@ -958,11 +959,13 @@ var DSSuggestionElement = class extends UHTMLComboboxElement {
|
|
|
958
959
|
off(this, "toggle", polyfillToggleSource, QUICK_EVENT);
|
|
959
960
|
}
|
|
960
961
|
};
|
|
961
|
-
const render = (
|
|
962
|
+
const render = (self) => {
|
|
963
|
+
const { control, list } = self;
|
|
964
|
+
const datalist = list || self.querySelector("u-datalist");
|
|
962
965
|
if (control && !control.placeholder) attr(control, "placeholder", " ");
|
|
963
966
|
if (control) attr(control, "popovertarget", useId(list) || null);
|
|
964
|
-
if (
|
|
965
|
-
if (
|
|
967
|
+
if (datalist) attr(datalist, "popover", "manual");
|
|
968
|
+
if (datalist) attr(datalist, "data-is-floating", "true");
|
|
966
969
|
};
|
|
967
970
|
const polyfillToggleSource = (event) => {
|
|
968
971
|
const self = event.currentTarget;
|