npm - @ni/nimble-components - Versions diffs - 29.1.7 → 29.2.0 - Mend

@ni/nimble-components 29.1.7 → 29.2.0

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.

Files changed (71) hide show

package/dist/esm/all-components.d.ts CHANGED Viewed

@@ -24,6 +24,7 @@ import './icons/all-icons';
 import './label-provider/core';
 import './label-provider/table';
 import './list-option';
+import './list-option-group';
 import './mapping/empty';
 import './mapping/icon';
 import './mapping/spinner';

package/dist/esm/all-components.js CHANGED Viewed

@@ -24,6 +24,7 @@ import './icons/all-icons';
 import './label-provider/core';
 import './label-provider/table';
 import './list-option';
+import './list-option-group';
 import './mapping/empty';
 import './mapping/icon';
 import './mapping/spinner';

package/dist/esm/all-components.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,UAAU,CAAC;AAClB,OAAO,iBAAiB,CAAC;AACzB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,QAAQ,CAAC;AAChB,OAAO,eAAe,CAAC;AACvB,OAAO,YAAY,CAAC;AACpB,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,eAAe,CAAC;AACvB,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,gBAAgB,CAAC;AACxB,OAAO,QAAQ,CAAC;AAChB,OAAO,eAAe,CAAC;AACvB,OAAO,aAAa,CAAC;AACrB,OAAO,gBAAgB,CAAC;AACxB,OAAO,SAAS,CAAC;AACjB,OAAO,eAAe,CAAC;AACvB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,UAAU,CAAC;AAClB,OAAO,WAAW,CAAC;AACnB,OAAO,UAAU,CAAC;AAClB,OAAO,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AACrB,OAAO,SAAS,CAAC;AACjB,OAAO,uBAAuB,CAAC;AAC/B,OAAO,0BAA0B,CAAC;AAClC,OAAO,8BAA8B,CAAC;AACtC,OAAO,wBAAwB,CAAC;AAChC,OAAO,4BAA4B,CAAC;AACpC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,QAAQ,CAAC;AAChB,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC;AACrB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AACzB,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AACnB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC","sourcesContent":["/*\n Import of all the web components available in Nimble.\n * Production applications are encouraged to import only components\n * that are required instead of leveraging this file.\n */\n\nimport './anchor';\nimport './anchor-button';\nimport './anchor-menu-item';\nimport './anchor-tab';\nimport './anchor-tabs';\nimport './anchor-tree-item';\nimport './anchored-region';\nimport './banner';\nimport './breadcrumb';\nimport './breadcrumb-item';\nimport './button';\nimport './card';\nimport './card-button';\nimport './checkbox';\nimport './combobox';\nimport './dialog';\nimport './drawer';\nimport './icons/all-icons';\nimport './label-provider/core';\nimport './label-provider/table';\nimport './list-option';\nimport './mapping/empty';\nimport './mapping/icon';\nimport './mapping/spinner';\nimport './mapping/text';\nimport './menu';\nimport './menu-button';\nimport './menu-item';\nimport './number-field';\nimport './radio';\nimport './radio-group';\nimport './rich-text/editor';\nimport './rich-text/viewer';\nimport './select';\nimport './spinner';\nimport './switch';\nimport './tab';\nimport './tab-panel';\nimport './table';\nimport './table-column/anchor';\nimport './table-column/date-text';\nimport './table-column/duration-text';\nimport './table-column/mapping';\nimport './table-column/number-text';\nimport './table-column/text';\nimport './tabs';\nimport './tabs-toolbar';\nimport './text-area';\nimport './text-field';\nimport './theme-provider';\nimport './toggle-button';\nimport './toolbar';\nimport './tooltip';\nimport './tree-item';\nimport './tree-view';\nimport './unit/byte';\nimport './unit/volt';\nimport './wafer-map';\n"]}
1	+ {"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,UAAU,CAAC;AAClB,OAAO,iBAAiB,CAAC;AACzB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,QAAQ,CAAC;AAChB,OAAO,eAAe,CAAC;AACvB,OAAO,YAAY,CAAC;AACpB,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,eAAe,CAAC;AACvB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,gBAAgB,CAAC;AACxB,OAAO,QAAQ,CAAC;AAChB,OAAO,eAAe,CAAC;AACvB,OAAO,aAAa,CAAC;AACrB,OAAO,gBAAgB,CAAC;AACxB,OAAO,SAAS,CAAC;AACjB,OAAO,eAAe,CAAC;AACvB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,UAAU,CAAC;AAClB,OAAO,WAAW,CAAC;AACnB,OAAO,UAAU,CAAC;AAClB,OAAO,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AACrB,OAAO,SAAS,CAAC;AACjB,OAAO,uBAAuB,CAAC;AAC/B,OAAO,0BAA0B,CAAC;AAClC,OAAO,8BAA8B,CAAC;AACtC,OAAO,wBAAwB,CAAC;AAChC,OAAO,4BAA4B,CAAC;AACpC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,QAAQ,CAAC;AAChB,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC;AACrB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AACzB,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AACnB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC","sourcesContent":["/*\n Import of all the web components available in Nimble.\n * Production applications are encouraged to import only components\n * that are required instead of leveraging this file.\n */\n\nimport './anchor';\nimport './anchor-button';\nimport './anchor-menu-item';\nimport './anchor-tab';\nimport './anchor-tabs';\nimport './anchor-tree-item';\nimport './anchored-region';\nimport './banner';\nimport './breadcrumb';\nimport './breadcrumb-item';\nimport './button';\nimport './card';\nimport './card-button';\nimport './checkbox';\nimport './combobox';\nimport './dialog';\nimport './drawer';\nimport './icons/all-icons';\nimport './label-provider/core';\nimport './label-provider/table';\nimport './list-option';\nimport './list-option-group';\nimport './mapping/empty';\nimport './mapping/icon';\nimport './mapping/spinner';\nimport './mapping/text';\nimport './menu';\nimport './menu-button';\nimport './menu-item';\nimport './number-field';\nimport './radio';\nimport './radio-group';\nimport './rich-text/editor';\nimport './rich-text/viewer';\nimport './select';\nimport './spinner';\nimport './switch';\nimport './tab';\nimport './tab-panel';\nimport './table';\nimport './table-column/anchor';\nimport './table-column/date-text';\nimport './table-column/duration-text';\nimport './table-column/mapping';\nimport './table-column/number-text';\nimport './table-column/text';\nimport './tabs';\nimport './tabs-toolbar';\nimport './text-area';\nimport './text-field';\nimport './theme-provider';\nimport './toggle-button';\nimport './toolbar';\nimport './tooltip';\nimport './tree-item';\nimport './tree-view';\nimport './unit/byte';\nimport './unit/volt';\nimport './wafer-map';\n"]}

package/dist/esm/combobox/template.js CHANGED Viewed

@@ -65,7 +65,7 @@ export const template = (context, definition) => html `
                 ?disabled="${x => x.disabled}"
                 ${ref('listbox')}
             >
-                <slot
+                <slot name="option"
                     ${slotted({
     filter: (n) => n instanceof HTMLElement && Listbox.slottedOptionFilter(n),
     flatten: true,

package/dist/esm/combobox/template.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/combobox/template.ts"],"names":[],"mappings":"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","sourcesContent":["import { type ViewTemplate, html, ref, slotted } from '@microsoft/fast-element';\nimport {\n type FoundationElementTemplate,\n type ComboboxOptions,\n startSlotTemplate,\n endSlotTemplate,\n Listbox\n} from '@microsoft/fast-foundation';\nimport type { Combobox } from '.';\nimport { anchoredRegionTag } from '../anchored-region';\nimport { DropdownPosition } from '../patterns/dropdown/types';\nimport { overflow } from '../utilities/directive/overflow';\n\n// prettier-ignore\nexport const template: FoundationElementTemplate<\nViewTemplate<Combobox>,\nComboboxOptions\n> = (context, definition) => html`\n <template\n aria-disabled=\"${x => x.ariaDisabled}\"\n autocomplete=\"${x => x.autocomplete}\"\n class=\"${x => (x.open ? 'open' : '')} ${x => (x.disabled ? 'disabled' : '')} ${x => x.position}\"\n ?open=\"${x => x.open}\"\n tabindex=\"${x => (!x.disabled ? '0' : null)}\"\n @click=\"${(x, c) => x.clickHandler(c.event as MouseEvent)}\"\n @focusout=\"${(x, c) => x.focusoutHandler(c.event as FocusEvent)}\"\n @keydown=\"${(x, c) => x.keydownHandler(c.event as KeyboardEvent)}\"\n >\n <div class=\"control\" part=\"control\" ${ref('controlWrapper')}>\n ${startSlotTemplate(context, definition)}\n <slot name=\"control\">\n <input\n aria-activedescendant=\"${x => (x.open ? x.ariaActiveDescendant : null)}\"\n aria-autocomplete=\"${x => x.ariaAutoComplete}\"\n aria-controls=\"${x => x.ariaControls}\"\n aria-disabled=\"${x => x.ariaDisabled}\"\n aria-expanded=\"${x => x.ariaExpanded}\"\n aria-haspopup=\"listbox\"\n class=\"selected-value\"\n part=\"selected-value\"\n placeholder=\"${x => x.placeholder}\"\n role=\"combobox\"\n type=\"text\"\n ?disabled=\"${x => x.disabled}\"\n :value=\"${x => x.value}\"\n @input=\"${(x, c) => x.inputHandler(c.event as InputEvent)}\"\n @keyup=\"${(x, c) => x.keyupHandler(c.event as KeyboardEvent)}\"\n ${ref('control')}\n ${overflow('hasOverflow')}\n title=${x => (x.hasOverflow && x.value ? x.value : null)}\n />\n <div class=\"indicator\" part=\"indicator\" aria-hidden=\"true\">\n <slot name=\"indicator\">\n ${definition.indicator \|\| ''}\n </slot>\n </div>\n </slot>\n ${endSlotTemplate(context, definition)}\n </div>\n <${anchoredRegionTag}\n ${ref('region')}\n class=\"anchored-region\"\n fixed-placement\n auto-update-mode=\"auto\"\n vertical-default-position=\"${x => (x.positionAttribute === DropdownPosition.above ? 'top' : 'bottom')}\"\n vertical-positioning-mode=\"${x => (!x.positionAttribute ? 'dynamic' : 'locktodefault')}\"\n horizontal-default-position=\"center\"\n horizontal-positioning-mode=\"locktodefault\"\n horizontal-scaling=\"anchor\"\n ?hidden=\"${x => !x.open}\">\n <div\n class=\"listbox\"\n id=\"${x => x.listboxId}\"\n part=\"listbox\"\n role=\"listbox\"\n ?disabled=\"${x => x.disabled}\"\n ${ref('listbox')}\n >\n <slot\n ${slotted({\n filter: (n: Node) => n instanceof HTMLElement && Listbox.slottedOptionFilter(n),\n flatten: true,\n property: 'slottedOptions',\n })}\n ></slot>\n </div>\n </${anchoredRegionTag}>\n </template>\n`;\n"]}
1	+ {"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/combobox/template.ts"],"names":[],"mappings":"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","sourcesContent":["import { type ViewTemplate, html, ref, slotted } from '@microsoft/fast-element';\nimport {\n type FoundationElementTemplate,\n type ComboboxOptions,\n startSlotTemplate,\n endSlotTemplate,\n Listbox\n} from '@microsoft/fast-foundation';\nimport type { Combobox } from '.';\nimport { anchoredRegionTag } from '../anchored-region';\nimport { DropdownPosition } from '../patterns/dropdown/types';\nimport { overflow } from '../utilities/directive/overflow';\n\n// prettier-ignore\nexport const template: FoundationElementTemplate<\nViewTemplate<Combobox>,\nComboboxOptions\n> = (context, definition) => html`\n <template\n aria-disabled=\"${x => x.ariaDisabled}\"\n autocomplete=\"${x => x.autocomplete}\"\n class=\"${x => (x.open ? 'open' : '')} ${x => (x.disabled ? 'disabled' : '')} ${x => x.position}\"\n ?open=\"${x => x.open}\"\n tabindex=\"${x => (!x.disabled ? '0' : null)}\"\n @click=\"${(x, c) => x.clickHandler(c.event as MouseEvent)}\"\n @focusout=\"${(x, c) => x.focusoutHandler(c.event as FocusEvent)}\"\n @keydown=\"${(x, c) => x.keydownHandler(c.event as KeyboardEvent)}\"\n >\n <div class=\"control\" part=\"control\" ${ref('controlWrapper')}>\n ${startSlotTemplate(context, definition)}\n <slot name=\"control\">\n <input\n aria-activedescendant=\"${x => (x.open ? x.ariaActiveDescendant : null)}\"\n aria-autocomplete=\"${x => x.ariaAutoComplete}\"\n aria-controls=\"${x => x.ariaControls}\"\n aria-disabled=\"${x => x.ariaDisabled}\"\n aria-expanded=\"${x => x.ariaExpanded}\"\n aria-haspopup=\"listbox\"\n class=\"selected-value\"\n part=\"selected-value\"\n placeholder=\"${x => x.placeholder}\"\n role=\"combobox\"\n type=\"text\"\n ?disabled=\"${x => x.disabled}\"\n :value=\"${x => x.value}\"\n @input=\"${(x, c) => x.inputHandler(c.event as InputEvent)}\"\n @keyup=\"${(x, c) => x.keyupHandler(c.event as KeyboardEvent)}\"\n ${ref('control')}\n ${overflow('hasOverflow')}\n title=${x => (x.hasOverflow && x.value ? x.value : null)}\n />\n <div class=\"indicator\" part=\"indicator\" aria-hidden=\"true\">\n <slot name=\"indicator\">\n ${definition.indicator \|\| ''}\n </slot>\n </div>\n </slot>\n ${endSlotTemplate(context, definition)}\n </div>\n <${anchoredRegionTag}\n ${ref('region')}\n class=\"anchored-region\"\n fixed-placement\n auto-update-mode=\"auto\"\n vertical-default-position=\"${x => (x.positionAttribute === DropdownPosition.above ? 'top' : 'bottom')}\"\n vertical-positioning-mode=\"${x => (!x.positionAttribute ? 'dynamic' : 'locktodefault')}\"\n horizontal-default-position=\"center\"\n horizontal-positioning-mode=\"locktodefault\"\n horizontal-scaling=\"anchor\"\n ?hidden=\"${x => !x.open}\">\n <div\n class=\"listbox\"\n id=\"${x => x.listboxId}\"\n part=\"listbox\"\n role=\"listbox\"\n ?disabled=\"${x => x.disabled}\"\n ${ref('listbox')}\n >\n <slot name=\"option\"\n ${slotted({\n filter: (n: Node) => n instanceof HTMLElement && Listbox.slottedOptionFilter(n),\n flatten: true,\n property: 'slottedOptions',\n })}\n ></slot>\n </div>\n </${anchoredRegionTag}>\n </template>\n`;\n"]}

package/dist/esm/list-option/template.js CHANGED Viewed

@@ -18,6 +18,7 @@ export const template = (context, definition) => html `
     .filter(Boolean)
     .join(' ')}"
         role="option"
+        slot="option"
     >
         ${startSlotTemplate(context, definition)}
         <span

package/dist/esm/list-option/template.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/list-option/template.ts"],"names":[],"mappings":"AAAA,wMAAwM;AACxM,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,EACH,iBAAiB,EAGjB,eAAe,EAClB,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAE3D;;;GAGG;AACH,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAGjB,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC,IAAI,CAAA;;wBAET,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;yBACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;yBACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;yBACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;wBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;iBACzB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,SAAS,EAAE,CAAC,CAAC,QAAQ,IAAI,UAAU,EAAE,CAAC,CAAC,QAAQ,IAAI,UAAU,CAAC;KACzF,MAAM,CAAC,OAAO,CAAC;KACf,IAAI,CAAC,GAAG,CAAC~~;;;UAGR~~,iBAAiB,CAAC,OAAO,EAAE,UAAU,CAAC;;;;cAIlC,QAAQ,CAAC,aAAa,CAAC;oBACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC;;oBAE1E,GAAG,CAAC,aAAa,CAAC,IAAI,OAAO,CAAC,SAAS,CAAC;;UAElD,eAAe,CAAC,OAAO,EAAE,UAAU,CAAC;;CAE7C,CAAC","sourcesContent":["// Based on template in FAST repo: https://github.com/microsoft/fast/blob/2ea80697bc3a5193e6123fb08ac3be2a76571aeb/packages/web-components/fast-foundation/src/listbox-option/listbox-option.template.ts\nimport { html, ref, slotted } from '@microsoft/fast-element';\nimport type { ViewTemplate } from '@microsoft/fast-element';\nimport {\n startSlotTemplate,\n type FoundationElementTemplate,\n type ListboxOptionOptions,\n endSlotTemplate\n} from '@microsoft/fast-foundation';\nimport type { ListOption } from '.';\nimport { overflow } from '../utilities/directive/overflow';\n\n/*\n The template for the {@link @microsoft/fast-foundation#(ListboxOption:class)} component.\n * @public\n */\n// prettier-ignore\nexport const template: FoundationElementTemplate<\nViewTemplate<ListOption>,\nListboxOptionOptions\n> = (context, definition) => html`\n <template\n aria-checked=\"${x => x.ariaChecked}\"\n aria-disabled=\"${x => x.ariaDisabled}\"\n aria-posinset=\"${x => x.ariaPosInSet}\"\n aria-selected=\"${x => x.ariaSelected}\"\n aria-setsize=\"${x => x.ariaSetSize}\"\n class=\"${x => [x.checked && 'checked', x.selected && 'selected', x.disabled && 'disabled']\n .filter(Boolean)\n .join(' ')}\"\n role=\"option\"\n >\n ${startSlotTemplate(context, definition)}\n <span\n class=\"content\"\n part=\"content\"\n ${overflow('hasOverflow')}\n title=${x => (x.hasOverflow && x.elementTextContent ? x.elementTextContent : null)}\n >\n <slot ${ref('contentSlot')} ${slotted('content')}></slot>\n </span>\n ${endSlotTemplate(context, definition)}\n </template>\n`;\n"]}
1	+ {"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/list-option/template.ts"],"names":[],"mappings":"AAAA,wMAAwM;AACxM,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,EACH,iBAAiB,EAGjB,eAAe,EAClB,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAE3D;;;GAGG;AACH,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAGjB,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC,IAAI,CAAA;;wBAET,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;yBACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;yBACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;yBACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;wBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;iBACzB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,SAAS,EAAE,CAAC,CAAC,QAAQ,IAAI,UAAU,EAAE,CAAC,CAAC,QAAQ,IAAI,UAAU,CAAC;KACzF,MAAM,CAAC,OAAO,CAAC;KACf,IAAI,CAAC,GAAG,CAAC;;;;UAIR,iBAAiB,CAAC,OAAO,EAAE,UAAU,CAAC;;;;cAIlC,QAAQ,CAAC,aAAa,CAAC;oBACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC;;oBAE1E,GAAG,CAAC,aAAa,CAAC,IAAI,OAAO,CAAC,SAAS,CAAC;;UAElD,eAAe,CAAC,OAAO,EAAE,UAAU,CAAC;;CAE7C,CAAC","sourcesContent":["// Based on template in FAST repo: https://github.com/microsoft/fast/blob/2ea80697bc3a5193e6123fb08ac3be2a76571aeb/packages/web-components/fast-foundation/src/listbox-option/listbox-option.template.ts\nimport { html, ref, slotted } from '@microsoft/fast-element';\nimport type { ViewTemplate } from '@microsoft/fast-element';\nimport {\n startSlotTemplate,\n type FoundationElementTemplate,\n type ListboxOptionOptions,\n endSlotTemplate\n} from '@microsoft/fast-foundation';\nimport type { ListOption } from '.';\nimport { overflow } from '../utilities/directive/overflow';\n\n/*\n The template for the {@link @microsoft/fast-foundation#(ListboxOption:class)} component.\n * @public\n */\n// prettier-ignore\nexport const template: FoundationElementTemplate<\nViewTemplate<ListOption>,\nListboxOptionOptions\n> = (context, definition) => html`\n <template\n aria-checked=\"${x => x.ariaChecked}\"\n aria-disabled=\"${x => x.ariaDisabled}\"\n aria-posinset=\"${x => x.ariaPosInSet}\"\n aria-selected=\"${x => x.ariaSelected}\"\n aria-setsize=\"${x => x.ariaSetSize}\"\n class=\"${x => [x.checked && 'checked', x.selected && 'selected', x.disabled && 'disabled']\n .filter(Boolean)\n .join(' ')}\"\n role=\"option\"\n slot=\"option\"\n >\n ${startSlotTemplate(context, definition)}\n <span\n class=\"content\"\n part=\"content\"\n ${overflow('hasOverflow')}\n title=${x => (x.hasOverflow && x.elementTextContent ? x.elementTextContent : null)}\n >\n <slot ${ref('contentSlot')} ${slotted('content')}></slot>\n </span>\n ${endSlotTemplate(context, definition)}\n </template>\n`;\n"]}

package/dist/esm/list-option-group/index.d.ts ADDED Viewed

@@ -0,0 +1,65 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { ListOption } from '../list-option';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-list-option-group': ListOptionGroup;
+    }
+}
+/**
+ * A nimble-styled HTML listbox option group
+ */
+export declare class ListOptionGroup extends FoundationElement {
+    /**
+     * The label for the group.
+     *
+     * @public
+     * @remarks
+     * If a label is also provided via slotted content, the label attribute
+     * will have precedence.
+     */
+    label?: string;
+    /**
+     * The hidden state of the element.
+     *
+     * @public
+     * @defaultValue - false
+     * @remarks
+     * HTML Attribute: hidden
+     */
+    hidden: boolean;
+    /**
+     * @internal
+     * This attribute is required to allow use-cases that offer dynamic filtering
+     * (like the Select) to visually hide groups that are filtered out, but still
+     * allow users to use the native 'hidden' attribute without it being affected
+     * by the filtering process.
+     */
+    visuallyHidden: boolean;
+    /**
+     * @internal
+     */
+    topSeparatorVisible: boolean;
+    /**
+     * @internal
+     */
+    bottomSeparatorVisible: boolean;
+    /** @internal */
+    hasOverflow: boolean;
+    /** @internal */
+    labelSlot: HTMLSlotElement;
+    /** @internal */
+    listOptions: ListOption[];
+    /** @internal */
+    get labelContent(): string;
+    private readonly hiddenOptions;
+    /**
+     * @internal
+     */
+    clickHandler(e: MouseEvent): void;
+    /**
+     * @internal
+     */
+    handleChange(source: unknown, propertyName: string): void;
+    private listOptionsChanged;
+}
+export declare const listOptionGroupTag = "nimble-list-option-group";

package/dist/esm/list-option-group/index.js ADDED Viewed

@@ -0,0 +1,130 @@
+import { __decorate } from "tslib";
+import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
+import { observable, attr, volatile, Observable } from '@microsoft/fast-element';
+import { styles } from './styles';
+import { template } from './template';
+import { ListOption } from '../list-option';
+/**
+ * A nimble-styled HTML listbox option group
+ */
+export class ListOptionGroup extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The hidden state of the element.
+         *
+         * @public
+         * @defaultValue - false
+         * @remarks
+         * HTML Attribute: hidden
+         */
+        this.hidden = false;
+        /**
+         * @internal
+         * This attribute is required to allow use-cases that offer dynamic filtering
+         * (like the Select) to visually hide groups that are filtered out, but still
+         * allow users to use the native 'hidden' attribute without it being affected
+         * by the filtering process.
+         */
+        this.visuallyHidden = false;
+        /**
+         * @internal
+         */
+        this.topSeparatorVisible = false;
+        /**
+         * @internal
+         */
+        this.bottomSeparatorVisible = false;
+        /** @internal */
+        this.hasOverflow = false;
+        this.hiddenOptions = new Set();
+    }
+    /** @internal */
+    get labelContent() {
+        if (this.label) {
+            return this.label;
+        }
+        if (!this.$fastController.isConnected) {
+            return '';
+        }
+        const nodes = this.labelSlot.assignedNodes();
+        return nodes
+            .filter(node => node.textContent?.trim() !== '')
+            .map(node => node.textContent?.trim())
+            .join(' ');
+    }
+    /**
+     * @internal
+     */
+    clickHandler(e) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+    }
+    /**
+     * @internal
+     */
+    handleChange(source, propertyName) {
+        if (source instanceof ListOption
+            && (propertyName === 'hidden' || propertyName === 'visuallyHidden')) {
+            if (source.hidden || source.visuallyHidden) {
+                this.hiddenOptions.add(source);
+            }
+            else {
+                this.hiddenOptions.delete(source);
+            }
+            this.visuallyHidden = this.hiddenOptions.size === this.listOptions.length;
+        }
+    }
+    listOptionsChanged(prev, next) {
+        this.hiddenOptions.clear();
+        next.filter(o => o.hidden || o.visuallyHidden).forEach(o => this.hiddenOptions.add(o));
+        prev?.forEach(o => {
+            const notifier = Observable.getNotifier(o);
+            notifier.unsubscribe(this, 'hidden');
+            notifier.unsubscribe(this, 'visuallyHidden');
+        });
+        let allOptionsHidden = true;
+        next?.forEach(o => {
+            const notifier = Observable.getNotifier(o);
+            notifier.subscribe(this, 'hidden');
+            notifier.subscribe(this, 'visuallyHidden');
+            allOptionsHidden = allOptionsHidden && (o.hidden || o.visuallyHidden);
+        });
+        this.visuallyHidden = next.length === 0 || allOptionsHidden;
+    }
+}
+__decorate([
+    attr
+], ListOptionGroup.prototype, "label", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], ListOptionGroup.prototype, "hidden", void 0);
+__decorate([
+    attr({ attribute: 'visually-hidden', mode: 'boolean' })
+], ListOptionGroup.prototype, "visuallyHidden", void 0);
+__decorate([
+    attr({ attribute: 'top-separator-visible', mode: 'boolean' })
+], ListOptionGroup.prototype, "topSeparatorVisible", void 0);
+__decorate([
+    attr({ attribute: 'bottom-separator-visible', mode: 'boolean' })
+], ListOptionGroup.prototype, "bottomSeparatorVisible", void 0);
+__decorate([
+    observable
+], ListOptionGroup.prototype, "hasOverflow", void 0);
+__decorate([
+    observable
+], ListOptionGroup.prototype, "listOptions", void 0);
+__decorate([
+    volatile
+], ListOptionGroup.prototype, "labelContent", null);
+const nimbleListOptionGroup = ListOptionGroup.compose({
+    baseName: 'list-option-group',
+    baseClass: FoundationElement,
+    template,
+    styles
+});
+DesignSystem.getOrCreate()
+    .withPrefix('nimble')
+    .register(nimbleListOptionGroup());
+export const listOptionGroupTag = 'nimble-list-option-group';
+//# sourceMappingURL=index.js.map

package/dist/esm/list-option-group/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/list-option-group/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';\nimport {\n observable,\n attr,\n volatile,\n Observable\n} from '@microsoft/fast-element';\nimport { styles } from './styles';\nimport { template } from './template';\nimport { ListOption } from '../list-option';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-list-option-group': ListOptionGroup;\n }\n}\n\n/**\n * A nimble-styled HTML listbox option group\n */\nexport class ListOptionGroup extends FoundationElement {\n /**\n * The label for the group.\n *\n * @public\n * @remarks\n * If a label is also provided via slotted content, the label attribute\n * will have precedence.\n */\n @attr\n public label?: string;\n\n /**\n * The hidden state of the element.\n *\n * @public\n * @defaultValue - false\n * @remarks\n * HTML Attribute: hidden\n */\n @attr({ mode: 'boolean' })\n public override hidden = false;\n\n /**\n * @internal\n * This attribute is required to allow use-cases that offer dynamic filtering\n * (like the Select) to visually hide groups that are filtered out, but still\n * allow users to use the native 'hidden' attribute without it being affected\n * by the filtering process.\n */\n @attr({ attribute: 'visually-hidden', mode: 'boolean' })\n public visuallyHidden = false;\n\n /**\n * @internal\n */\n @attr({ attribute: 'top-separator-visible', mode: 'boolean' })\n public topSeparatorVisible = false;\n\n /**\n * @internal\n */\n @attr({ attribute: 'bottom-separator-visible', mode: 'boolean' })\n public bottomSeparatorVisible = false;\n\n /** @internal */\n @observable\n public hasOverflow = false;\n\n /** @internal */\n public labelSlot!: HTMLSlotElement;\n\n /** @internal */\n @observable\n public listOptions!: ListOption[];\n\n /** @internal */\n @volatile\n public get labelContent(): string {\n if (this.label) {\n return this.label;\n }\n\n if (!this.$fastController.isConnected) {\n return '';\n }\n\n const nodes = this.labelSlot.assignedNodes();\n return nodes\n .filter(node => node.textContent?.trim() !== '')\n .map(node => node.textContent?.trim())\n .join(' ');\n }\n\n private readonly hiddenOptions: Set<ListOption> = new Set();\n\n /**\n * @internal\n */\n public clickHandler(e: MouseEvent): void {\n e.preventDefault();\n e.stopImmediatePropagation();\n }\n\n /**\n * @internal\n */\n public handleChange(source: unknown, propertyName: string): void {\n if (\n source instanceof ListOption\n && (propertyName === 'hidden' || propertyName === 'visuallyHidden')\n ) {\n if (source.hidden || source.visuallyHidden) {\n this.hiddenOptions.add(source);\n } else {\n this.hiddenOptions.delete(source);\n }\n\n this.visuallyHidden = this.hiddenOptions.size === this.listOptions.length;\n }\n }\n\n private listOptionsChanged(\n prev: ListOption[] | undefined,\n next: ListOption[]\n ): void {\n this.hiddenOptions.clear();\n next.filter(o => o.hidden || o.visuallyHidden).forEach(o => this.hiddenOptions.add(o));\n prev?.forEach(o => {\n const notifier = Observable.getNotifier(o);\n notifier.unsubscribe(this, 'hidden');\n notifier.unsubscribe(this, 'visuallyHidden');\n });\n\n let allOptionsHidden = true;\n next?.forEach(o => {\n const notifier = Observable.getNotifier(o);\n notifier.subscribe(this, 'hidden');\n notifier.subscribe(this, 'visuallyHidden');\n allOptionsHidden = allOptionsHidden && (o.hidden || o.visuallyHidden);\n });\n\n this.visuallyHidden = next.length === 0 || allOptionsHidden;\n }\n}\n\nconst nimbleListOptionGroup = ListOptionGroup.compose({\n baseName: 'list-option-group',\n baseClass: FoundationElement,\n template,\n styles\n});\n\nDesignSystem.getOrCreate()\n .withPrefix('nimble')\n .register(nimbleListOptionGroup());\nexport const listOptionGroupTag = 'nimble-list-option-group';\n"]}

package/dist/esm/list-option-group/styles.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/list-option-group/styles.js ADDED Viewed

@@ -0,0 +1,62 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '../utilities/style/display';
+import { borderColor, fillHoverColor, fillHoverSelectedColor, fillSelectedColor, groupHeaderFont, groupHeaderFontColor, groupHeaderTextTransform, smallPadding } from '../theme-provider/design-tokens';
+export const styles = css `
+    ${display('flex')}
+    :host {
+        cursor: default;
+        flex-direction: column;
+    }
+    :host([visually-hidden]) {
+        display: none;
+    }
+    :host::after,
+    :host::before {
+        content: ' ';
+        margin-top: ${smallPadding};
+        margin-bottom: ${smallPadding};
+        border-bottom: ${borderColor} 2px solid;
+        opacity: 0.1;
+        display: none;
+    }
+    :host([top-separator-visible])::before,
+    :host([bottom-separator-visible])::after {
+        display: block;
+    }
+    slot[name='option']::slotted([role='option']) {
+        background-color: transparent;
+    }
+    slot[name='option']::slotted([role='option']:hover) {
+        background-color: ${fillHoverColor};
+    }
+    slot[name='option']::slotted([role='option'][active-option]) {
+        background-color: ${fillSelectedColor};
+    }
+    slot[name='option']::slotted([role='option'][active-option]:hover) {
+        background-color: ${fillHoverSelectedColor};
+    }
+    .label-display {
+        font: ${groupHeaderFont};
+        text-transform: ${groupHeaderTextTransform};
+        color: ${groupHeaderFontColor};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-left: ${smallPadding};
+        margin-bottom: ${smallPadding};
+    }
+    .label-slot.hidden {
+        display: none;
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/list-option-group/styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/list-option-group/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,WAAW,EACX,cAAc,EACd,sBAAsB,EACtB,iBAAiB,EACjB,eAAe,EACf,oBAAoB,EACpB,wBAAwB,EACxB,YAAY,EACf,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;;;;;sBAcC,YAAY;yBACT,YAAY;yBACZ,WAAW;;;;;;;;;;;;;;;4BAeR,cAAc;;;;4BAId,iBAAiB;;;;4BAIjB,sBAAsB;;;;gBAIlC,eAAe;0BACL,wBAAwB;iBACjC,oBAAoB;;;;uBAId,YAAY;yBACV,YAAY;;;;;;CAMpC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\n\nimport {\n borderColor,\n fillHoverColor,\n fillHoverSelectedColor,\n fillSelectedColor,\n groupHeaderFont,\n groupHeaderFontColor,\n groupHeaderTextTransform,\n smallPadding\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n ${display('flex')}\n\n :host {\n cursor: default;\n flex-direction: column;\n }\n\n :host([visually-hidden]) {\n display: none;\n }\n\n :host::after,\n :host::before {\n content: ' ';\n margin-top: ${smallPadding};\n margin-bottom: ${smallPadding};\n border-bottom: ${borderColor} 2px solid;\n opacity: 0.1;\n display: none;\n }\n\n :host([top-separator-visible])::before,\n :host([bottom-separator-visible])::after {\n display: block;\n }\n\n slot[name='option']::slotted([role='option']) {\n background-color: transparent;\n }\n\n slot[name='option']::slotted([role='option']:hover) {\n background-color: ${fillHoverColor};\n }\n\n slot[name='option']::slotted([role='option'][active-option]) {\n background-color: ${fillSelectedColor};\n }\n\n slot[name='option']::slotted([role='option'][active-option]:hover) {\n background-color: ${fillHoverSelectedColor};\n }\n\n .label-display {\n font: ${groupHeaderFont};\n text-transform: ${groupHeaderTextTransform};\n color: ${groupHeaderFontColor};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-left: ${smallPadding};\n margin-bottom: ${smallPadding};\n }\n\n .label-slot.hidden {\n display: none;\n }\n`;\n"]}

package/dist/esm/list-option-group/template.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import type { ListOptionGroup } from '.';
2	+ export declare const template: import("@microsoft/fast-element").ViewTemplate<ListOptionGroup, any>;

package/dist/esm/list-option-group/template.js ADDED Viewed

@@ -0,0 +1,37 @@
+import { html, ref, slotted, when } from '@microsoft/fast-element';
+import { overflow } from '../utilities/directive/overflow';
+import { ListOption } from '../list-option';
+const isListOption = (n) => {
+    return n instanceof ListOption;
+};
+// prettier-ignore
+export const template = html `
+<template
+    role="group"
+    aria-label="${x => x.labelContent}"
+    slot="option"
+>
+    <span ${overflow('hasOverflow')}
+        class="label-display"
+        aria-hidden="true"
+        title=${x => (x.hasOverflow && x.labelContent ? x.labelContent : null)}
+        @click="${(x, c) => x.clickHandler(c.event)}"
+    >
+        ${when(x => (typeof x.label === 'string'), html `${x => x.label}`)}
+        <slot ${ref('labelSlot')}
+            class="label-slot ${x => (typeof x.label === 'string' ? 'hidden' : '')}"
+        >
+        </slot>
+    </span>
+    <span class="content" part="content" role="none">
+        <slot name="option"
+        ${slotted({
+    flatten: true,
+    filter: (n) => isListOption(n),
+    property: 'listOptions'
+})}
+></slot>
+    </span>
+</template>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/list-option-group/template.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/list-option-group/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,YAAY,GAAG,CAAC,CAAO,EAAW,EAAE;IACtC,OAAO,CAAC,YAAY,UAAU,CAAC;AACnC,CAAC,CAAC;AAEF,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAiB;;;kBAG3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;;;YAGzB,QAAQ,CAAC,aAAa,CAAC;;;gBAGnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC;kBAC5D,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;;UAEvD,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,KAAK,QAAQ,CAAC,EAAE,IAAI,CAAiB,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;gBAC1E,GAAG,CAAC,WAAW,CAAC;gCACA,CAAC,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;;;;;;UAMxE,OAAO,CAAC;IACV,OAAO,EAAE,IAAI;IACb,MAAM,EAAE,CAAC,CAAO,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IACpC,QAAQ,EAAE,aAAa;CAC1B,CAAC;;;;CAIL,CAAC","sourcesContent":["import { html, ref, slotted, when } from '@microsoft/fast-element';\nimport type { ListOptionGroup } from '.';\nimport { overflow } from '../utilities/directive/overflow';\nimport { ListOption } from '../list-option';\n\nconst isListOption = (n: Node): boolean => {\n return n instanceof ListOption;\n};\n\n// prettier-ignore\nexport const template = html<ListOptionGroup>`\n<template\n role=\"group\"\n aria-label=\"${x => x.labelContent}\"\n slot=\"option\"\n>\n <span ${overflow('hasOverflow')} \n class=\"label-display\"\n aria-hidden=\"true\"\n title=${x => (x.hasOverflow && x.labelContent ? x.labelContent : null)}\n @click=\"${(x, c) => x.clickHandler(c.event as MouseEvent)}\"\n >\n ${when(x => (typeof x.label === 'string'), html<ListOptionGroup>`${x => x.label}`)} \n <slot ${ref('labelSlot')}\n class=\"label-slot ${x => (typeof x.label === 'string' ? 'hidden' : '')}\"\n >\n </slot>\n </span>\n <span class=\"content\" part=\"content\" role=\"none\">\n <slot name=\"option\"\n ${slotted({\n flatten: true,\n filter: (n: Node) => isListOption(n),\n property: 'listOptions'\n })}\n></slot>\n </span>\n</template>\n`;\n"]}

package/dist/esm/rich-text/mention-listbox/template.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { html, ref, slotted } from '@microsoft/fast-element';
-import { ListboxElement } from '@microsoft/fast-foundation';
+import { Listbox } from '@microsoft/fast-foundation';
 import { anchoredRegionTag } from '../../anchored-region';
 // prettier-ignore
 export const template = html `
@@ -22,8 +22,8 @@ export const template = html `
                 @click="${(x, c) => x.clickHandler(c.event)}"
                 ?disabled="${x => x.disabled}"
             >
-                <slot
-                    ${slotted({ filter: (n) => n instanceof HTMLElement && ListboxElement.slottedOptionFilter(n), flatten: true, property: 'slottedOptions' })}
+                <slot name="option"
+                    ${slotted({ filter: (n) => n instanceof HTMLElement && Listbox.slottedOptionFilter(n), flatten: true, property: 'slottedOptions' })}
                 >
                 </slot>
             </div>

package/dist/esm/rich-text/mention-listbox/template.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/rich-text/mention-listbox/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,~~cAAc~~,EAAE,MAAM,4BAA4B,CAAC;~~AAE5D~~,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAwB;;WAEzC,iBAAiB;cACd,GAAG,CAAC,QAAQ,CAAC;;;;;;;;;uBASJ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI;;;;;0BAKT,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;6BAC5C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;;sBAGtB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC,CAAO,EAAE,EAAE,CAAC,CAAC,YAAY,WAAW,IAAI,~~cAAc~~,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAC;;;;~~YAIxJ~~,iBAAiB;;CAE5B,CAAC","sourcesContent":["import { html, ref, slotted } from '@microsoft/fast-element';\nimport { ~~ListboxElement~~ } from '@microsoft/fast-foundation';\nimport type { RichTextMentionListbox } from '.';\nimport { anchoredRegionTag } from '../../anchored-region';\n\n// prettier-ignore\nexport const template = html<RichTextMentionListbox>`\n <template>\n <${anchoredRegionTag}\n ${ref('region')}\n class=\"anchored-region\"\n fixed-placement\n auto-update-mode=\"auto\"\n vertical-default-position=\"bottom\"\n vertical-positioning-mode=\"locktodefault\"\n horizontal-default-position=\"center\"\n horizontal-positioning-mode=\"locktodefault\"\n horizontal-scaling=\"anchor\"\n ?hidden=\"${x => !x.open}\">\n <div\n class=\"listbox\"\n part=\"listbox\"\n role=\"listbox\"\n @click=\"${(x, c) => x.clickHandler(c.event as MouseEvent)}\"\n ?disabled=\"${x => x.disabled}\"\n >\n <slot\n ${slotted({ filter: (n: Node) => n instanceof HTMLElement && ~~ListboxElement~~.slottedOptionFilter(n), flatten: true, property: 'slottedOptions' })}\n >\n </slot>\n </div>\n </${anchoredRegionTag}>\n </template>\n`;\n"]}
1	+ {"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/rich-text/mention-listbox/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAwB;;WAEzC,iBAAiB;cACd,GAAG,CAAC,QAAQ,CAAC;;;;;;;;;uBASJ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI;;;;;0BAKT,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;6BAC5C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;;sBAGtB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC,CAAO,EAAE,EAAE,CAAC,CAAC,YAAY,WAAW,IAAI,OAAO,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAC;;;;YAIjJ,iBAAiB;;CAE5B,CAAC","sourcesContent":["import { html, ref, slotted } from '@microsoft/fast-element';\nimport { Listbox } from '@microsoft/fast-foundation';\nimport type { RichTextMentionListbox } from '.';\nimport { anchoredRegionTag } from '../../anchored-region';\n\n// prettier-ignore\nexport const template = html<RichTextMentionListbox>`\n <template>\n <${anchoredRegionTag}\n ${ref('region')}\n class=\"anchored-region\"\n fixed-placement\n auto-update-mode=\"auto\"\n vertical-default-position=\"bottom\"\n vertical-positioning-mode=\"locktodefault\"\n horizontal-default-position=\"center\"\n horizontal-positioning-mode=\"locktodefault\"\n horizontal-scaling=\"anchor\"\n ?hidden=\"${x => !x.open}\">\n <div\n class=\"listbox\"\n part=\"listbox\"\n role=\"listbox\"\n @click=\"${(x, c) => x.clickHandler(c.event as MouseEvent)}\"\n ?disabled=\"${x => x.disabled}\"\n >\n <slot name=\"option\"\n ${slotted({ filter: (n: Node) => n instanceof HTMLElement && Listbox.slottedOptionFilter(n), flatten: true, property: 'slottedOptions' })}\n >\n </slot>\n </div>\n </${anchoredRegionTag}>\n </template>\n`;\n"]}

package/dist/esm/select/index.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { AnchoredRegion, ListboxOption, SelectPosition } from '@microsoft/fast-foundation';
 import { DropdownAppearance, ListOptionOwner } from '../patterns/dropdown/types';
 import type { ErrorPattern } from '../patterns/error/types';
-import { ListOption } from '../list-option';
+import type { ListOption } from '../list-option';
 import { FilterMode } from './types';
 import { FormAssociatedSelect } from './models/select-form-associated';
 declare global {
@@ -122,7 +122,7 @@ export declare class Select extends FormAssociatedSelect implements ErrorPattern
     /**
      * @internal
      */
-    slottedOptionsChanged(prev: Element[], next: Element[]): void;
+    slottedOptionsChanged(prev: Element[] | undefined, next: Element[] | undefined): void;
     /**
      * @internal
      */
@@ -267,16 +267,25 @@ export declare class Select extends FormAssociatedSelect implements ErrorPattern
      * @internal
      */
     protected setDefaultSelectedOption(): void;
+    private getSlottedOptions;
     private setActiveOption;
     private focusAndScrollActiveOptionIntoView;
     private getPlaceholderOption;
     private setPositioning;
+    private updateAdjacentSeparatorState;
+    private setTopSeparatorState;
+    private setBottomSeparatorState;
+    private getPreviousVisibleOptionOrGroup;
+    private getNextVisibleOptionOrGroup;
+    private isOptionHiddenOrFilteredOut;
+    private filterMatchesText;
     /**
      * Filter available options by text value.
      *
      * @public
      */
     private filterOptions;
+    private getGroupOptions;
     /**
      * Sets the value and display value to match the first selected option.
      *