udp-stencil-component-library 26.7.0-beta.0 → 26.7.0-beta.1
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/udp-fluent-list-item_2.cjs.entry.js +2 -2
- package/dist/collection/components/fluent-ui/list/udp-list.js +8 -2
- package/dist/collection/components/fluent-ui/list-item/udp-list-item.css +21 -0
- package/dist/components/udp-list-item2.js +1 -1
- package/dist/components/udp-list2.js +1 -1
- package/dist/docs.json +2 -2
- package/dist/esm/udp-fluent-list-item_2.entry.js +2 -2
- package/dist/stencil-library/udp-fluent-list-item_2.entry.js +1 -1
- package/dist/types/components/fluent-ui/list/udp-list.d.ts +7 -1
- package/dist/types/components.d.ts +24 -4
- package/package.json +1 -1
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var index = require('./index-G1ccGqOs.js');
|
|
4
4
|
require('@fluentui/web-components/checkbox.js');
|
|
5
5
|
|
|
6
|
-
const udpListItemCss = () => `:host{display:flex;align-items:center;gap:var(--spacingHorizontalS);padding:var(--udp-list-item-padding-y, var(--spacingVerticalS)) var(--spacingHorizontalM);box-sizing:border-box;color:var(--colorNeutralForeground1);background-color:transparent;border-radius:var(--borderRadiusMedium);cursor:pointer;outline:none;user-select:none;list-style-type:none;margin:0;transition:background-color 100ms ease}:host(:hover:not(.is-disabled)){background-color:var(--colorNeutralBackground1Hover)}:host(:active:not(.is-disabled)){background-color:var(--colorNeutralBackground1Pressed)}:host(.is-disabled){cursor:default;opacity:0.4}:host(:not([interactive])),:host(:not([interactive]):hover),:host(:not([interactive]):active){cursor:default;background-color:transparent}:host(:focus-visible){outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);outline-offset:-2px;border-radius:var(--borderRadiusMedium)}:host(.show-divider){background-image:linear-gradient(var(--colorNeutralStroke2), var(--colorNeutralStroke2));background-repeat:no-repeat;background-position:0 bottom;background-size:100% 1px}.checkmark{display:flex;align-items:center;flex-shrink:0}.checkmark fluent-checkbox{pointer-events:none;}.content{display:flex;flex-direction:column;gap:1px;flex-grow:1;min-width:0;}.end{display:flex;align-items:center;flex-shrink:0}::slotted(*){min-width:0}.prop-label{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);min-width:0}.prop-subtitle{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground2);min-width:0}`;
|
|
6
|
+
const udpListItemCss = () => `:host{display:flex;align-items:center;gap:var(--spacingHorizontalS);padding:var(--udp-list-item-padding-y, var(--spacingVerticalS)) var(--spacingHorizontalM);box-sizing:border-box;color:var(--colorNeutralForeground1);background-color:transparent;border-radius:var(--borderRadiusMedium);cursor:pointer;outline:none;user-select:none;list-style-type:none;margin:0;transition:background-color 100ms ease}:host(:hover:not(.is-disabled)){background-color:var(--colorNeutralBackground1Hover)}:host(:active:not(.is-disabled)){background-color:var(--colorNeutralBackground1Pressed)}:host(.is-disabled){cursor:default;opacity:0.4}:host(:not([interactive])),:host(:not([interactive]):hover),:host(:not([interactive]):active){cursor:default;background-color:transparent}:host(:focus-visible){outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);outline-offset:-2px;border-radius:var(--borderRadiusMedium)}:host(.is-selected){background-color:var(--colorNeutralBackground1Selected);box-shadow:inset var(--strokeWidthThicker) 0 0 0 var(--colorCompoundBrandStroke)}:host(.show-divider){background-image:linear-gradient(var(--colorNeutralStroke2), var(--colorNeutralStroke2));background-repeat:no-repeat;background-position:0 bottom;background-size:100% 1px}.checkmark{display:flex;align-items:center;flex-shrink:0}.checkmark fluent-checkbox{pointer-events:none;}.content{display:flex;flex-direction:column;gap:1px;flex-grow:1;min-width:0;}.end{display:flex;align-items:center;flex-shrink:0}::slotted(*){min-width:0}::slotted([slot='start']),slot[name='start']>*{flex-shrink:0}.prop-label{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);min-width:0}.prop-subtitle{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground2);min-width:0}`;
|
|
7
7
|
|
|
8
8
|
const UdpListItem = class {
|
|
9
9
|
constructor(hostRef) {
|
|
@@ -307,7 +307,7 @@ const UdpList = class {
|
|
|
307
307
|
role: listRole,
|
|
308
308
|
'aria-multiselectable': this.selectionMode === 'multiselect' ? 'true' : undefined,
|
|
309
309
|
};
|
|
310
|
-
return (index.h(index.Host, { key: '
|
|
310
|
+
return (index.h(index.Host, { key: 'bd99a46895438c6f0bae981b17d701cc349275b3' }, isUl ? (index.h("ul", Object.assign({}, sharedProps), index.h("slot", null))) : (index.h("div", Object.assign({}, sharedProps), index.h("slot", null)))));
|
|
311
311
|
}
|
|
312
312
|
get el() { return index.getElement(this); }
|
|
313
313
|
static get watchers() { return {
|
|
@@ -3,7 +3,13 @@ import { h, Host } from "@stencil/core";
|
|
|
3
3
|
* List container component. Place udp-fluent-list-item elements as direct children.
|
|
4
4
|
*
|
|
5
5
|
* Selection and keyboard navigation are managed automatically.
|
|
6
|
-
* Use `selectionMode` to enable item selection
|
|
6
|
+
* Use `selectionMode` to enable item selection.
|
|
7
|
+
*
|
|
8
|
+
* Selection affordances by mode:
|
|
9
|
+
* - `none` — no checkmark and no selected styling.
|
|
10
|
+
* - `single` — every item carries a checkmark, and the selected item also gets a
|
|
11
|
+
* selected background plus a brand accent bar on its leading edge.
|
|
12
|
+
* - `multiselect` — the same affordances as `single`, applied to each selected item.
|
|
7
13
|
*
|
|
8
14
|
* @slot - udp-fluent-list-item elements
|
|
9
15
|
*/
|
|
@@ -187,7 +193,7 @@ export class UdpList {
|
|
|
187
193
|
role: listRole,
|
|
188
194
|
'aria-multiselectable': this.selectionMode === 'multiselect' ? 'true' : undefined,
|
|
189
195
|
};
|
|
190
|
-
return (h(Host, { key: '
|
|
196
|
+
return (h(Host, { key: 'bd99a46895438c6f0bae981b17d701cc349275b3' }, isUl ? (h("ul", Object.assign({}, sharedProps), h("slot", null))) : (h("div", Object.assign({}, sharedProps), h("slot", null)))));
|
|
191
197
|
}
|
|
192
198
|
static get is() { return "udp-list"; }
|
|
193
199
|
static get encapsulation() { return "shadow"; }
|
|
@@ -49,6 +49,17 @@
|
|
|
49
49
|
border-radius: var(--borderRadiusMedium);
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
+
/* Selected. The neutral selected background is very close to the hover and
|
|
53
|
+
pressed backgrounds (in the dark theme they are near identical), so the
|
|
54
|
+
inline-start brand bar carries the cue on hue rather than lightness. It
|
|
55
|
+
persists through hover, press and focus, and reads in both single and
|
|
56
|
+
multiselect modes. box-shadow is used so the bar adds no layout width and
|
|
57
|
+
does not collide with the .show-divider background-image. */
|
|
58
|
+
:host(.is-selected) {
|
|
59
|
+
background-color: var(--colorNeutralBackground1Selected);
|
|
60
|
+
box-shadow: inset var(--strokeWidthThicker) 0 0 0 var(--colorCompoundBrandStroke);
|
|
61
|
+
}
|
|
62
|
+
|
|
52
63
|
/* ============================================
|
|
53
64
|
Divider
|
|
54
65
|
============================================ */
|
|
@@ -107,6 +118,16 @@
|
|
|
107
118
|
min-width: 0;
|
|
108
119
|
}
|
|
109
120
|
|
|
121
|
+
/* The start slot has no wrapper element, so it needs the same flex-shrink
|
|
122
|
+
guard that .checkmark and .end wrappers carry — otherwise ::slotted(*)
|
|
123
|
+
min-width: 0 above lets fixed-size content (avatar, icon, image) collapse.
|
|
124
|
+
The second selector covers the startIconName fallback rendered inside the
|
|
125
|
+
slot, which is not reachable via ::slotted. */
|
|
126
|
+
::slotted([slot='start']),
|
|
127
|
+
slot[name='start'] > * {
|
|
128
|
+
flex-shrink: 0;
|
|
129
|
+
}
|
|
130
|
+
|
|
110
131
|
/* ============================================
|
|
111
132
|
Prop-based fallback content (label / subtitle / startIconName)
|
|
112
133
|
============================================ */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as t,c as i,h as s,d as a,t as o}from"./index2.js";import"@fluentui/web-components/checkbox.js";import{d as r}from"./udp-fluent-icon2.js";const n=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.itemAction=i(this,"itemAction",7),this.itemSelect=i(this,"itemSelect",7),this.selected=!1,this.disabled=!1,this.interactive=!1,this.disabledSelection=!1,this.selectable=!1,this.selectionAsSecondaryAction=!1,this.itemRole="listitem",this.itemTabIndex=-1,this.showDivider=!1,this.size="medium",this.handleClick=e=>{!this.disabled&&this.interactive&&(this.isCheckmarkAreaClick(e)?this.selectable&&!this.disabledSelection&&this.itemSelect.emit({value:this.value,selected:!this.selected}):this.isEndSlotClick(e)||(!this.selectable||this.disabledSelection||this.selectionAsSecondaryAction?this.itemAction.emit({value:this.value}):this.itemSelect.emit({value:this.value,selected:!this.selected})))},this.handleKeyDown=e=>{if(!this.disabled&&this.interactive&&("Enter"===e.key||" "===e.key)){e.preventDefault();const t=this.selectable&&!this.disabledSelection;t&&this.selectionAsSecondaryAction?"Enter"===e.key?this.itemAction.emit({value:this.value}):this.itemSelect.emit({value:this.value,selected:!this.selected}):t?this.itemSelect.emit({value:this.value,selected:!this.selected}):this.itemAction.emit({value:this.value})}},this.handleCheckboxChange=e=>{e.stopPropagation(),this.disabled||this.disabledSelection||this.itemSelect.emit({value:this.value,selected:!!e.target.checked})}}componentDidRender(){this.checkboxEl&&this.checkboxEl.toggleAttribute("disabled",this.disabled||this.disabledSelection)}isCheckmarkAreaClick(e){return e.composedPath().some((e=>{var t;return"FLUENT-CHECKBOX"===e.tagName||(null===(t=e.classList)||void 0===t?void 0:t.contains("checkmark"))}))}isEndSlotClick(e){return e.composedPath().some((e=>{var t,i;return"end"===(null===(i=(t=e).getAttribute)||void 0===i?void 0:i.call(t,"slot"))}))}render(){return s(a,{key:"b2f1dbbfd83f4346655c8b972a38bc1ecb881feb",role:this.itemRole,"aria-selected":this.selectable?String(this.selected):void 0,"aria-disabled":this.disabled?"true":void 0,tabIndex:this.disabled?-1:this.itemTabIndex,class:{"is-selected":this.selected,"is-disabled":this.disabled,"is-selectable":this.selectable,"show-divider":this.showDivider},style:{"--udp-list-item-padding-y":{small:"var(--spacingVerticalXS)",medium:"var(--spacingVerticalS)",large:"var(--spacingVerticalL)"}[this.size]},onClick:this.handleClick,onKeyDown:this.handleKeyDown},this.selectable&&s("div",{key:"cb6cb22372b1751fde2eba99584303fb82c1d610",class:"checkmark"},s("fluent-checkbox",{key:"dd5e0f982357edfaf972b316451555fc925eaf06",ref:e=>this.checkboxEl=e,tabindex:"-1","aria-hidden":"true",checked:this.selected,onChange:this.handleCheckboxChange})),s("slot",{key:"3569720c0cbd426447ce9dc7d7982c33ba1b3d80",name:"start"},this.startIconName&&s("udp-fluent-icon",{key:"60632439b4c5e1e2d916f5527d167be7251a6086",name:this.startIconName,size:"sm"})),s("div",{key:"8b3d54649fd37b85a1c4fbe13016f05b28a434b2",class:"content"},s("slot",{key:"ad8b5271dd1b19b71f6882b864b09b151422df98",name:"title"},this.label&&s("span",{key:"0fdfad5b47b1a441a9bdf58c297c3834d3f1aad2",class:"prop-label"},this.label)),s("slot",{key:"27fc615dbea344c3ae00ac9f5e8797d7ba327a08",name:"subtitle"},this.subtitle&&s("span",{key:"6c9dcd72c6f6c07efa4d4f36e11d86693dd22749",class:"prop-subtitle"},this.subtitle)),s("slot",{key:"ddf6c3487ea2579bbf5d0a6c7a5643f56ed33360"})),s("div",{key:"24ece9e3b1960b0ae6ac627814becd9873d453df",class:"end"},s("slot",{key:"2c766090f9a509249b9815174f83cd48fa08b02c",name:"end"})))}get el(){return this}static get style(){return":host{display:flex;align-items:center;gap:var(--spacingHorizontalS);padding:var(--udp-list-item-padding-y, var(--spacingVerticalS)) var(--spacingHorizontalM);box-sizing:border-box;color:var(--colorNeutralForeground1);background-color:transparent;border-radius:var(--borderRadiusMedium);cursor:pointer;outline:none;user-select:none;list-style-type:none;margin:0;transition:background-color 100ms ease}:host(:hover:not(.is-disabled)){background-color:var(--colorNeutralBackground1Hover)}:host(:active:not(.is-disabled)){background-color:var(--colorNeutralBackground1Pressed)}:host(.is-disabled){cursor:default;opacity:0.4}:host(:not([interactive])),:host(:not([interactive]):hover),:host(:not([interactive]):active){cursor:default;background-color:transparent}:host(:focus-visible){outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);outline-offset:-2px;border-radius:var(--borderRadiusMedium)}:host(.show-divider){background-image:linear-gradient(var(--colorNeutralStroke2), var(--colorNeutralStroke2));background-repeat:no-repeat;background-position:0 bottom;background-size:100% 1px}.checkmark{display:flex;align-items:center;flex-shrink:0}.checkmark fluent-checkbox{pointer-events:none;}.content{display:flex;flex-direction:column;gap:1px;flex-grow:1;min-width:0;}.end{display:flex;align-items:center;flex-shrink:0}::slotted(*){min-width:0}.prop-label{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);min-width:0}.prop-subtitle{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground2);min-width:0}"}},[257,"udp-fluent-list-item",{value:[8],selected:[4],disabled:[4],interactive:[516],disabledSelection:[4,"disabled-selection"],selectable:[4],selectionAsSecondaryAction:[4,"selection-as-secondary-action"],itemRole:[1,"item-role"],itemTabIndex:[2,"item-tab-index"],showDivider:[4,"show-divider"],size:[1],startIconName:[1,"start-icon-name"],label:[1],subtitle:[1]}]);function d(){"undefined"!=typeof customElements&&["udp-fluent-list-item","udp-fluent-icon"].forEach((e=>{switch(e){case"udp-fluent-list-item":customElements.get(o(e))||customElements.define(o(e),n);break;case"udp-fluent-icon":customElements.get(o(e))||r()}}))}export{n as U,d}
|
|
1
|
+
import{p as e,H as t,c as i,h as s,d as a,t as o}from"./index2.js";import"@fluentui/web-components/checkbox.js";import{d as r}from"./udp-fluent-icon2.js";const n=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.itemAction=i(this,"itemAction",7),this.itemSelect=i(this,"itemSelect",7),this.selected=!1,this.disabled=!1,this.interactive=!1,this.disabledSelection=!1,this.selectable=!1,this.selectionAsSecondaryAction=!1,this.itemRole="listitem",this.itemTabIndex=-1,this.showDivider=!1,this.size="medium",this.handleClick=e=>{!this.disabled&&this.interactive&&(this.isCheckmarkAreaClick(e)?this.selectable&&!this.disabledSelection&&this.itemSelect.emit({value:this.value,selected:!this.selected}):this.isEndSlotClick(e)||(!this.selectable||this.disabledSelection||this.selectionAsSecondaryAction?this.itemAction.emit({value:this.value}):this.itemSelect.emit({value:this.value,selected:!this.selected})))},this.handleKeyDown=e=>{if(!this.disabled&&this.interactive&&("Enter"===e.key||" "===e.key)){e.preventDefault();const t=this.selectable&&!this.disabledSelection;t&&this.selectionAsSecondaryAction?"Enter"===e.key?this.itemAction.emit({value:this.value}):this.itemSelect.emit({value:this.value,selected:!this.selected}):t?this.itemSelect.emit({value:this.value,selected:!this.selected}):this.itemAction.emit({value:this.value})}},this.handleCheckboxChange=e=>{e.stopPropagation(),this.disabled||this.disabledSelection||this.itemSelect.emit({value:this.value,selected:!!e.target.checked})}}componentDidRender(){this.checkboxEl&&this.checkboxEl.toggleAttribute("disabled",this.disabled||this.disabledSelection)}isCheckmarkAreaClick(e){return e.composedPath().some((e=>{var t;return"FLUENT-CHECKBOX"===e.tagName||(null===(t=e.classList)||void 0===t?void 0:t.contains("checkmark"))}))}isEndSlotClick(e){return e.composedPath().some((e=>{var t,i;return"end"===(null===(i=(t=e).getAttribute)||void 0===i?void 0:i.call(t,"slot"))}))}render(){return s(a,{key:"b2f1dbbfd83f4346655c8b972a38bc1ecb881feb",role:this.itemRole,"aria-selected":this.selectable?String(this.selected):void 0,"aria-disabled":this.disabled?"true":void 0,tabIndex:this.disabled?-1:this.itemTabIndex,class:{"is-selected":this.selected,"is-disabled":this.disabled,"is-selectable":this.selectable,"show-divider":this.showDivider},style:{"--udp-list-item-padding-y":{small:"var(--spacingVerticalXS)",medium:"var(--spacingVerticalS)",large:"var(--spacingVerticalL)"}[this.size]},onClick:this.handleClick,onKeyDown:this.handleKeyDown},this.selectable&&s("div",{key:"cb6cb22372b1751fde2eba99584303fb82c1d610",class:"checkmark"},s("fluent-checkbox",{key:"dd5e0f982357edfaf972b316451555fc925eaf06",ref:e=>this.checkboxEl=e,tabindex:"-1","aria-hidden":"true",checked:this.selected,onChange:this.handleCheckboxChange})),s("slot",{key:"3569720c0cbd426447ce9dc7d7982c33ba1b3d80",name:"start"},this.startIconName&&s("udp-fluent-icon",{key:"60632439b4c5e1e2d916f5527d167be7251a6086",name:this.startIconName,size:"sm"})),s("div",{key:"8b3d54649fd37b85a1c4fbe13016f05b28a434b2",class:"content"},s("slot",{key:"ad8b5271dd1b19b71f6882b864b09b151422df98",name:"title"},this.label&&s("span",{key:"0fdfad5b47b1a441a9bdf58c297c3834d3f1aad2",class:"prop-label"},this.label)),s("slot",{key:"27fc615dbea344c3ae00ac9f5e8797d7ba327a08",name:"subtitle"},this.subtitle&&s("span",{key:"6c9dcd72c6f6c07efa4d4f36e11d86693dd22749",class:"prop-subtitle"},this.subtitle)),s("slot",{key:"ddf6c3487ea2579bbf5d0a6c7a5643f56ed33360"})),s("div",{key:"24ece9e3b1960b0ae6ac627814becd9873d453df",class:"end"},s("slot",{key:"2c766090f9a509249b9815174f83cd48fa08b02c",name:"end"})))}get el(){return this}static get style(){return":host{display:flex;align-items:center;gap:var(--spacingHorizontalS);padding:var(--udp-list-item-padding-y, var(--spacingVerticalS)) var(--spacingHorizontalM);box-sizing:border-box;color:var(--colorNeutralForeground1);background-color:transparent;border-radius:var(--borderRadiusMedium);cursor:pointer;outline:none;user-select:none;list-style-type:none;margin:0;transition:background-color 100ms ease}:host(:hover:not(.is-disabled)){background-color:var(--colorNeutralBackground1Hover)}:host(:active:not(.is-disabled)){background-color:var(--colorNeutralBackground1Pressed)}:host(.is-disabled){cursor:default;opacity:0.4}:host(:not([interactive])),:host(:not([interactive]):hover),:host(:not([interactive]):active){cursor:default;background-color:transparent}:host(:focus-visible){outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);outline-offset:-2px;border-radius:var(--borderRadiusMedium)}:host(.is-selected){background-color:var(--colorNeutralBackground1Selected);box-shadow:inset var(--strokeWidthThicker) 0 0 0 var(--colorCompoundBrandStroke)}:host(.show-divider){background-image:linear-gradient(var(--colorNeutralStroke2), var(--colorNeutralStroke2));background-repeat:no-repeat;background-position:0 bottom;background-size:100% 1px}.checkmark{display:flex;align-items:center;flex-shrink:0}.checkmark fluent-checkbox{pointer-events:none;}.content{display:flex;flex-direction:column;gap:1px;flex-grow:1;min-width:0;}.end{display:flex;align-items:center;flex-shrink:0}::slotted(*){min-width:0}::slotted([slot='start']),slot[name='start']>*{flex-shrink:0}.prop-label{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);min-width:0}.prop-subtitle{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground2);min-width:0}"}},[257,"udp-fluent-list-item",{value:[8],selected:[4],disabled:[4],interactive:[516],disabledSelection:[4,"disabled-selection"],selectable:[4],selectionAsSecondaryAction:[4,"selection-as-secondary-action"],itemRole:[1,"item-role"],itemTabIndex:[2,"item-tab-index"],showDivider:[4,"show-divider"],size:[1],startIconName:[1,"start-icon-name"],label:[1],subtitle:[1]}]);function d(){"undefined"!=typeof customElements&&["udp-fluent-list-item","udp-fluent-icon"].forEach((e=>{switch(e){case"udp-fluent-list-item":customElements.get(o(e))||customElements.define(o(e),n);break;case"udp-fluent-icon":customElements.get(o(e))||r()}}))}export{n as U,d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as t,H as e,c as s,h as i,d as l,t as n}from"./index2.js";const o=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.listSelectionChange=s(this,"listSelectionChange",7),this.interactive=!1,this.selectionMode="none",this.defaultSelectedItems=[],this.showDivider=!1,this.selectionAsSecondaryAction=!1,this.internalSelectedItems=[],this.focusedIndex=0}componentWillLoad(){this.internalSelectedItems=null!=this.selectedItems?[...this.selectedItems]:[...this.defaultSelectedItems];const t=this.getItems().findIndex((t=>this.internalSelectedItems.includes(t.value)));this.focusedIndex=t>=0?t:0}componentDidLoad(){var t;const e=null===(t=this.el.shadowRoot)||void 0===t?void 0:t.querySelector("slot");this.handleSlotChange=()=>this.syncChildren(),null==e||e.addEventListener("slotchange",this.handleSlotChange),this.syncChildren()}disconnectedCallback(){var t;const e=null===(t=this.el.shadowRoot)||void 0===t?void 0:t.querySelector("slot");this.handleSlotChange&&(null==e||e.removeEventListener("slotchange",this.handleSlotChange))}componentDidUpdate(){this.syncChildren()}handleSelectedItemsChange(t){this.internalSelectedItems=null!=t?[...t]:[];const e=this.getItems(),s=null!=t?e.findIndex((e=>t.includes(e.value))):-1;s>=0&&(this.focusedIndex=s)}getItems(){return Array.from(this.el.querySelectorAll(":scope > udp-fluent-list-item"))}getListRole(){return"none"!==this.selectionMode?"listbox":"list"}getItemRole(t){return"listbox"===t?"option":"listitem"}syncChildren(){const t=this.getItems(),e=this.getListRole(),s=this.getItemRole(e);t.forEach(((e,i)=>{const l="none"!==this.selectionMode,n=this.interactive||l,o=this.internalSelectedItems.includes(e.value),h=this.showDivider&&i<t.length-1,c=n&&i===this.focusedIndex?0:-1;e.interactive!==n&&(e.interactive=n),e.selectable!==l&&(e.selectable=l),e.selected!==o&&(e.selected=o),e.itemRole!==s&&(e.itemRole=s),e.showDivider!==h&&(e.showDivider=h),e.itemTabIndex!==c&&(e.itemTabIndex=c),e.selectionAsSecondaryAction!==this.selectionAsSecondaryAction&&(e.selectionAsSecondaryAction=this.selectionAsSecondaryAction)}))}handleItemSelect(t){t.stopPropagation();const{value:e,selected:s}=t.detail;let i;if("single"===this.selectionMode)i=s?[e]:[];else{if("multiselect"!==this.selectionMode)return;i=s?[...this.internalSelectedItems,e]:this.internalSelectedItems.filter((t=>t!==e))}this.internalSelectedItems=i,this.listSelectionChange.emit({selectedItems:i})}handleKeyDown(t){const e="ArrowUp"===t.key,s="Home"===t.key,i="End"===t.key;if(!(e||"ArrowDown"===t.key||s||i))return;t.preventDefault();const l=this.getItems(),n=l.filter((t=>!t.disabled&&t.interactive));if(0===n.length)return;const o=this.el.querySelector("udp-fluent-list-item:focus"),h=o?n.indexOf(o):-1;let c;c=s?0:i?n.length-1:e?h<=0?n.length-1:h-1:h>=n.length-1?0:h+1;const d=n[c];this.focusedIndex=l.indexOf(d),this.syncChildren(),d.focus()}render(){const t=this.getListRole();return i(l,{key:"
|
|
1
|
+
import{p as t,H as e,c as s,h as i,d as l,t as n}from"./index2.js";const o=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.listSelectionChange=s(this,"listSelectionChange",7),this.interactive=!1,this.selectionMode="none",this.defaultSelectedItems=[],this.showDivider=!1,this.selectionAsSecondaryAction=!1,this.internalSelectedItems=[],this.focusedIndex=0}componentWillLoad(){this.internalSelectedItems=null!=this.selectedItems?[...this.selectedItems]:[...this.defaultSelectedItems];const t=this.getItems().findIndex((t=>this.internalSelectedItems.includes(t.value)));this.focusedIndex=t>=0?t:0}componentDidLoad(){var t;const e=null===(t=this.el.shadowRoot)||void 0===t?void 0:t.querySelector("slot");this.handleSlotChange=()=>this.syncChildren(),null==e||e.addEventListener("slotchange",this.handleSlotChange),this.syncChildren()}disconnectedCallback(){var t;const e=null===(t=this.el.shadowRoot)||void 0===t?void 0:t.querySelector("slot");this.handleSlotChange&&(null==e||e.removeEventListener("slotchange",this.handleSlotChange))}componentDidUpdate(){this.syncChildren()}handleSelectedItemsChange(t){this.internalSelectedItems=null!=t?[...t]:[];const e=this.getItems(),s=null!=t?e.findIndex((e=>t.includes(e.value))):-1;s>=0&&(this.focusedIndex=s)}getItems(){return Array.from(this.el.querySelectorAll(":scope > udp-fluent-list-item"))}getListRole(){return"none"!==this.selectionMode?"listbox":"list"}getItemRole(t){return"listbox"===t?"option":"listitem"}syncChildren(){const t=this.getItems(),e=this.getListRole(),s=this.getItemRole(e);t.forEach(((e,i)=>{const l="none"!==this.selectionMode,n=this.interactive||l,o=this.internalSelectedItems.includes(e.value),h=this.showDivider&&i<t.length-1,c=n&&i===this.focusedIndex?0:-1;e.interactive!==n&&(e.interactive=n),e.selectable!==l&&(e.selectable=l),e.selected!==o&&(e.selected=o),e.itemRole!==s&&(e.itemRole=s),e.showDivider!==h&&(e.showDivider=h),e.itemTabIndex!==c&&(e.itemTabIndex=c),e.selectionAsSecondaryAction!==this.selectionAsSecondaryAction&&(e.selectionAsSecondaryAction=this.selectionAsSecondaryAction)}))}handleItemSelect(t){t.stopPropagation();const{value:e,selected:s}=t.detail;let i;if("single"===this.selectionMode)i=s?[e]:[];else{if("multiselect"!==this.selectionMode)return;i=s?[...this.internalSelectedItems,e]:this.internalSelectedItems.filter((t=>t!==e))}this.internalSelectedItems=i,this.listSelectionChange.emit({selectedItems:i})}handleKeyDown(t){const e="ArrowUp"===t.key,s="Home"===t.key,i="End"===t.key;if(!(e||"ArrowDown"===t.key||s||i))return;t.preventDefault();const l=this.getItems(),n=l.filter((t=>!t.disabled&&t.interactive));if(0===n.length)return;const o=this.el.querySelector("udp-fluent-list-item:focus"),h=o?n.indexOf(o):-1;let c;c=s?0:i?n.length-1:e?h<=0?n.length-1:h-1:h>=n.length-1?0:h+1;const d=n[c];this.focusedIndex=l.indexOf(d),this.syncChildren(),d.focus()}render(){const t=this.getListRole();return i(l,{key:"bd99a46895438c6f0bae981b17d701cc349275b3"},i("list"===t?"ul":"div",Object.assign({},{class:"list-root",role:t,"aria-multiselectable":"multiselect"===this.selectionMode?"true":void 0}),i("slot",null)))}get el(){return this}static get watchers(){return{selectedItems:[{handleSelectedItemsChange:0}]}}static get style(){return":host{display:block}.list-root{display:flex;flex-direction:column;padding:0;margin:0;list-style-type:none}"}},[257,"udp-list",{interactive:[4],selectionMode:[1,"selection-mode"],selectedItems:[16],defaultSelectedItems:[16],showDivider:[4,"show-divider"],selectionAsSecondaryAction:[4,"selection-as-secondary-action"],internalSelectedItems:[32]},[[0,"itemSelect","handleItemSelect"],[0,"keydown","handleKeyDown"]],{selectedItems:[{handleSelectedItemsChange:0}]}]);function h(){"undefined"!=typeof customElements&&["udp-list"].forEach((t=>{"udp-list"===t&&(customElements.get(n(t))||customElements.define(n(t),o))}))}export{o as U,h as d}
|
package/dist/docs.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2026-09-
|
|
2
|
+
"timestamp": "2026-09-04T16:32:11",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "@stencil/core",
|
|
5
5
|
"version": "4.41.3",
|
|
@@ -65235,7 +65235,7 @@
|
|
|
65235
65235
|
"encapsulation": "shadow",
|
|
65236
65236
|
"tag": "udp-list",
|
|
65237
65237
|
"readme": "# udp-list\n\n\n",
|
|
65238
|
-
"docs": "List container component. Place udp-fluent-list-item elements as direct children.\n\nSelection and keyboard navigation are managed automatically.\nUse `selectionMode` to enable item selection
|
|
65238
|
+
"docs": "List container component. Place udp-fluent-list-item elements as direct children.\n\nSelection and keyboard navigation are managed automatically.\nUse `selectionMode` to enable item selection.\n\nSelection affordances by mode:\n- `none` — no checkmark and no selected styling.\n- `single` — every item carries a checkmark, and the selected item also gets a\n selected background plus a brand accent bar on its leading edge.\n- `multiselect` — the same affordances as `single`, applied to each selected item.",
|
|
65239
65239
|
"docsTags": [
|
|
65240
65240
|
{
|
|
65241
65241
|
"name": "slot",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Cgpvu-iV.js';
|
|
2
2
|
import '@fluentui/web-components/checkbox.js';
|
|
3
3
|
|
|
4
|
-
const udpListItemCss = () => `:host{display:flex;align-items:center;gap:var(--spacingHorizontalS);padding:var(--udp-list-item-padding-y, var(--spacingVerticalS)) var(--spacingHorizontalM);box-sizing:border-box;color:var(--colorNeutralForeground1);background-color:transparent;border-radius:var(--borderRadiusMedium);cursor:pointer;outline:none;user-select:none;list-style-type:none;margin:0;transition:background-color 100ms ease}:host(:hover:not(.is-disabled)){background-color:var(--colorNeutralBackground1Hover)}:host(:active:not(.is-disabled)){background-color:var(--colorNeutralBackground1Pressed)}:host(.is-disabled){cursor:default;opacity:0.4}:host(:not([interactive])),:host(:not([interactive]):hover),:host(:not([interactive]):active){cursor:default;background-color:transparent}:host(:focus-visible){outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);outline-offset:-2px;border-radius:var(--borderRadiusMedium)}:host(.show-divider){background-image:linear-gradient(var(--colorNeutralStroke2), var(--colorNeutralStroke2));background-repeat:no-repeat;background-position:0 bottom;background-size:100% 1px}.checkmark{display:flex;align-items:center;flex-shrink:0}.checkmark fluent-checkbox{pointer-events:none;}.content{display:flex;flex-direction:column;gap:1px;flex-grow:1;min-width:0;}.end{display:flex;align-items:center;flex-shrink:0}::slotted(*){min-width:0}.prop-label{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);min-width:0}.prop-subtitle{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground2);min-width:0}`;
|
|
4
|
+
const udpListItemCss = () => `:host{display:flex;align-items:center;gap:var(--spacingHorizontalS);padding:var(--udp-list-item-padding-y, var(--spacingVerticalS)) var(--spacingHorizontalM);box-sizing:border-box;color:var(--colorNeutralForeground1);background-color:transparent;border-radius:var(--borderRadiusMedium);cursor:pointer;outline:none;user-select:none;list-style-type:none;margin:0;transition:background-color 100ms ease}:host(:hover:not(.is-disabled)){background-color:var(--colorNeutralBackground1Hover)}:host(:active:not(.is-disabled)){background-color:var(--colorNeutralBackground1Pressed)}:host(.is-disabled){cursor:default;opacity:0.4}:host(:not([interactive])),:host(:not([interactive]):hover),:host(:not([interactive]):active){cursor:default;background-color:transparent}:host(:focus-visible){outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);outline-offset:-2px;border-radius:var(--borderRadiusMedium)}:host(.is-selected){background-color:var(--colorNeutralBackground1Selected);box-shadow:inset var(--strokeWidthThicker) 0 0 0 var(--colorCompoundBrandStroke)}:host(.show-divider){background-image:linear-gradient(var(--colorNeutralStroke2), var(--colorNeutralStroke2));background-repeat:no-repeat;background-position:0 bottom;background-size:100% 1px}.checkmark{display:flex;align-items:center;flex-shrink:0}.checkmark fluent-checkbox{pointer-events:none;}.content{display:flex;flex-direction:column;gap:1px;flex-grow:1;min-width:0;}.end{display:flex;align-items:center;flex-shrink:0}::slotted(*){min-width:0}::slotted([slot='start']),slot[name='start']>*{flex-shrink:0}.prop-label{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);min-width:0}.prop-subtitle{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground2);min-width:0}`;
|
|
5
5
|
|
|
6
6
|
const UdpListItem = class {
|
|
7
7
|
constructor(hostRef) {
|
|
@@ -305,7 +305,7 @@ const UdpList = class {
|
|
|
305
305
|
role: listRole,
|
|
306
306
|
'aria-multiselectable': this.selectionMode === 'multiselect' ? 'true' : undefined,
|
|
307
307
|
};
|
|
308
|
-
return (h(Host, { key: '
|
|
308
|
+
return (h(Host, { key: 'bd99a46895438c6f0bae981b17d701cc349275b3' }, isUl ? (h("ul", Object.assign({}, sharedProps), h("slot", null))) : (h("div", Object.assign({}, sharedProps), h("slot", null)))));
|
|
309
309
|
}
|
|
310
310
|
get el() { return getElement(this); }
|
|
311
311
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as t,c as e,h as i,H as s,a as o}from"./index-Cgpvu-iV.js";import"@fluentui/web-components/checkbox.js";const a=class{constructor(i){t(this,i),this.itemAction=e(this,"itemAction",7),this.itemSelect=e(this,"itemSelect",7),this.selected=!1,this.disabled=!1,this.interactive=!1,this.disabledSelection=!1,this.selectable=!1,this.selectionAsSecondaryAction=!1,this.itemRole="listitem",this.itemTabIndex=-1,this.showDivider=!1,this.size="medium",this.handleClick=t=>{!this.disabled&&this.interactive&&(this.isCheckmarkAreaClick(t)?this.selectable&&!this.disabledSelection&&this.itemSelect.emit({value:this.value,selected:!this.selected}):this.isEndSlotClick(t)||(!this.selectable||this.disabledSelection||this.selectionAsSecondaryAction?this.itemAction.emit({value:this.value}):this.itemSelect.emit({value:this.value,selected:!this.selected})))},this.handleKeyDown=t=>{if(!this.disabled&&this.interactive&&("Enter"===t.key||" "===t.key)){t.preventDefault();const e=this.selectable&&!this.disabledSelection;e&&this.selectionAsSecondaryAction?"Enter"===t.key?this.itemAction.emit({value:this.value}):this.itemSelect.emit({value:this.value,selected:!this.selected}):e?this.itemSelect.emit({value:this.value,selected:!this.selected}):this.itemAction.emit({value:this.value})}},this.handleCheckboxChange=t=>{t.stopPropagation(),this.disabled||this.disabledSelection||this.itemSelect.emit({value:this.value,selected:!!t.target.checked})}}componentDidRender(){this.checkboxEl&&this.checkboxEl.toggleAttribute("disabled",this.disabled||this.disabledSelection)}isCheckmarkAreaClick(t){return t.composedPath().some((t=>{var e;return"FLUENT-CHECKBOX"===t.tagName||(null===(e=t.classList)||void 0===e?void 0:e.contains("checkmark"))}))}isEndSlotClick(t){return t.composedPath().some((t=>{var e,i;return"end"===(null===(i=(e=t).getAttribute)||void 0===i?void 0:i.call(e,"slot"))}))}render(){return i(s,{key:"b2f1dbbfd83f4346655c8b972a38bc1ecb881feb",role:this.itemRole,"aria-selected":this.selectable?String(this.selected):void 0,"aria-disabled":this.disabled?"true":void 0,tabIndex:this.disabled?-1:this.itemTabIndex,class:{"is-selected":this.selected,"is-disabled":this.disabled,"is-selectable":this.selectable,"show-divider":this.showDivider},style:{"--udp-list-item-padding-y":{small:"var(--spacingVerticalXS)",medium:"var(--spacingVerticalS)",large:"var(--spacingVerticalL)"}[this.size]},onClick:this.handleClick,onKeyDown:this.handleKeyDown},this.selectable&&i("div",{key:"cb6cb22372b1751fde2eba99584303fb82c1d610",class:"checkmark"},i("fluent-checkbox",{key:"dd5e0f982357edfaf972b316451555fc925eaf06",ref:t=>this.checkboxEl=t,tabindex:"-1","aria-hidden":"true",checked:this.selected,onChange:this.handleCheckboxChange})),i("slot",{key:"3569720c0cbd426447ce9dc7d7982c33ba1b3d80",name:"start"},this.startIconName&&i("udp-fluent-icon",{key:"60632439b4c5e1e2d916f5527d167be7251a6086",name:this.startIconName,size:"sm"})),i("div",{key:"8b3d54649fd37b85a1c4fbe13016f05b28a434b2",class:"content"},i("slot",{key:"ad8b5271dd1b19b71f6882b864b09b151422df98",name:"title"},this.label&&i("span",{key:"0fdfad5b47b1a441a9bdf58c297c3834d3f1aad2",class:"prop-label"},this.label)),i("slot",{key:"27fc615dbea344c3ae00ac9f5e8797d7ba327a08",name:"subtitle"},this.subtitle&&i("span",{key:"6c9dcd72c6f6c07efa4d4f36e11d86693dd22749",class:"prop-subtitle"},this.subtitle)),i("slot",{key:"ddf6c3487ea2579bbf5d0a6c7a5643f56ed33360"})),i("div",{key:"24ece9e3b1960b0ae6ac627814becd9873d453df",class:"end"},i("slot",{key:"2c766090f9a509249b9815174f83cd48fa08b02c",name:"end"})))}get el(){return o(this)}};a.style=":host{display:flex;align-items:center;gap:var(--spacingHorizontalS);padding:var(--udp-list-item-padding-y, var(--spacingVerticalS)) var(--spacingHorizontalM);box-sizing:border-box;color:var(--colorNeutralForeground1);background-color:transparent;border-radius:var(--borderRadiusMedium);cursor:pointer;outline:none;user-select:none;list-style-type:none;margin:0;transition:background-color 100ms ease}:host(:hover:not(.is-disabled)){background-color:var(--colorNeutralBackground1Hover)}:host(:active:not(.is-disabled)){background-color:var(--colorNeutralBackground1Pressed)}:host(.is-disabled){cursor:default;opacity:0.4}:host(:not([interactive])),:host(:not([interactive]):hover),:host(:not([interactive]):active){cursor:default;background-color:transparent}:host(:focus-visible){outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);outline-offset:-2px;border-radius:var(--borderRadiusMedium)}:host(.show-divider){background-image:linear-gradient(var(--colorNeutralStroke2), var(--colorNeutralStroke2));background-repeat:no-repeat;background-position:0 bottom;background-size:100% 1px}.checkmark{display:flex;align-items:center;flex-shrink:0}.checkmark fluent-checkbox{pointer-events:none;}.content{display:flex;flex-direction:column;gap:1px;flex-grow:1;min-width:0;}.end{display:flex;align-items:center;flex-shrink:0}::slotted(*){min-width:0}.prop-label{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);min-width:0}.prop-subtitle{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground2);min-width:0}";const
|
|
1
|
+
import{r as t,c as e,h as i,H as s,a as o}from"./index-Cgpvu-iV.js";import"@fluentui/web-components/checkbox.js";const a=class{constructor(i){t(this,i),this.itemAction=e(this,"itemAction",7),this.itemSelect=e(this,"itemSelect",7),this.selected=!1,this.disabled=!1,this.interactive=!1,this.disabledSelection=!1,this.selectable=!1,this.selectionAsSecondaryAction=!1,this.itemRole="listitem",this.itemTabIndex=-1,this.showDivider=!1,this.size="medium",this.handleClick=t=>{!this.disabled&&this.interactive&&(this.isCheckmarkAreaClick(t)?this.selectable&&!this.disabledSelection&&this.itemSelect.emit({value:this.value,selected:!this.selected}):this.isEndSlotClick(t)||(!this.selectable||this.disabledSelection||this.selectionAsSecondaryAction?this.itemAction.emit({value:this.value}):this.itemSelect.emit({value:this.value,selected:!this.selected})))},this.handleKeyDown=t=>{if(!this.disabled&&this.interactive&&("Enter"===t.key||" "===t.key)){t.preventDefault();const e=this.selectable&&!this.disabledSelection;e&&this.selectionAsSecondaryAction?"Enter"===t.key?this.itemAction.emit({value:this.value}):this.itemSelect.emit({value:this.value,selected:!this.selected}):e?this.itemSelect.emit({value:this.value,selected:!this.selected}):this.itemAction.emit({value:this.value})}},this.handleCheckboxChange=t=>{t.stopPropagation(),this.disabled||this.disabledSelection||this.itemSelect.emit({value:this.value,selected:!!t.target.checked})}}componentDidRender(){this.checkboxEl&&this.checkboxEl.toggleAttribute("disabled",this.disabled||this.disabledSelection)}isCheckmarkAreaClick(t){return t.composedPath().some((t=>{var e;return"FLUENT-CHECKBOX"===t.tagName||(null===(e=t.classList)||void 0===e?void 0:e.contains("checkmark"))}))}isEndSlotClick(t){return t.composedPath().some((t=>{var e,i;return"end"===(null===(i=(e=t).getAttribute)||void 0===i?void 0:i.call(e,"slot"))}))}render(){return i(s,{key:"b2f1dbbfd83f4346655c8b972a38bc1ecb881feb",role:this.itemRole,"aria-selected":this.selectable?String(this.selected):void 0,"aria-disabled":this.disabled?"true":void 0,tabIndex:this.disabled?-1:this.itemTabIndex,class:{"is-selected":this.selected,"is-disabled":this.disabled,"is-selectable":this.selectable,"show-divider":this.showDivider},style:{"--udp-list-item-padding-y":{small:"var(--spacingVerticalXS)",medium:"var(--spacingVerticalS)",large:"var(--spacingVerticalL)"}[this.size]},onClick:this.handleClick,onKeyDown:this.handleKeyDown},this.selectable&&i("div",{key:"cb6cb22372b1751fde2eba99584303fb82c1d610",class:"checkmark"},i("fluent-checkbox",{key:"dd5e0f982357edfaf972b316451555fc925eaf06",ref:t=>this.checkboxEl=t,tabindex:"-1","aria-hidden":"true",checked:this.selected,onChange:this.handleCheckboxChange})),i("slot",{key:"3569720c0cbd426447ce9dc7d7982c33ba1b3d80",name:"start"},this.startIconName&&i("udp-fluent-icon",{key:"60632439b4c5e1e2d916f5527d167be7251a6086",name:this.startIconName,size:"sm"})),i("div",{key:"8b3d54649fd37b85a1c4fbe13016f05b28a434b2",class:"content"},i("slot",{key:"ad8b5271dd1b19b71f6882b864b09b151422df98",name:"title"},this.label&&i("span",{key:"0fdfad5b47b1a441a9bdf58c297c3834d3f1aad2",class:"prop-label"},this.label)),i("slot",{key:"27fc615dbea344c3ae00ac9f5e8797d7ba327a08",name:"subtitle"},this.subtitle&&i("span",{key:"6c9dcd72c6f6c07efa4d4f36e11d86693dd22749",class:"prop-subtitle"},this.subtitle)),i("slot",{key:"ddf6c3487ea2579bbf5d0a6c7a5643f56ed33360"})),i("div",{key:"24ece9e3b1960b0ae6ac627814becd9873d453df",class:"end"},i("slot",{key:"2c766090f9a509249b9815174f83cd48fa08b02c",name:"end"})))}get el(){return o(this)}};a.style=":host{display:flex;align-items:center;gap:var(--spacingHorizontalS);padding:var(--udp-list-item-padding-y, var(--spacingVerticalS)) var(--spacingHorizontalM);box-sizing:border-box;color:var(--colorNeutralForeground1);background-color:transparent;border-radius:var(--borderRadiusMedium);cursor:pointer;outline:none;user-select:none;list-style-type:none;margin:0;transition:background-color 100ms ease}:host(:hover:not(.is-disabled)){background-color:var(--colorNeutralBackground1Hover)}:host(:active:not(.is-disabled)){background-color:var(--colorNeutralBackground1Pressed)}:host(.is-disabled){cursor:default;opacity:0.4}:host(:not([interactive])),:host(:not([interactive]):hover),:host(:not([interactive]):active){cursor:default;background-color:transparent}:host(:focus-visible){outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);outline-offset:-2px;border-radius:var(--borderRadiusMedium)}:host(.is-selected){background-color:var(--colorNeutralBackground1Selected);box-shadow:inset var(--strokeWidthThicker) 0 0 0 var(--colorCompoundBrandStroke)}:host(.show-divider){background-image:linear-gradient(var(--colorNeutralStroke2), var(--colorNeutralStroke2));background-repeat:no-repeat;background-position:0 bottom;background-size:100% 1px}.checkmark{display:flex;align-items:center;flex-shrink:0}.checkmark fluent-checkbox{pointer-events:none;}.content{display:flex;flex-direction:column;gap:1px;flex-grow:1;min-width:0;}.end{display:flex;align-items:center;flex-shrink:0}::slotted(*){min-width:0}::slotted([slot='start']),slot[name='start']>*{flex-shrink:0}.prop-label{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);min-width:0}.prop-subtitle{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground2);min-width:0}";const r=class{constructor(i){t(this,i),this.listSelectionChange=e(this,"listSelectionChange",7),this.interactive=!1,this.selectionMode="none",this.defaultSelectedItems=[],this.showDivider=!1,this.selectionAsSecondaryAction=!1,this.internalSelectedItems=[],this.focusedIndex=0}componentWillLoad(){this.internalSelectedItems=null!=this.selectedItems?[...this.selectedItems]:[...this.defaultSelectedItems];const t=this.getItems().findIndex((t=>this.internalSelectedItems.includes(t.value)));this.focusedIndex=t>=0?t:0}componentDidLoad(){var t;const e=null===(t=this.el.shadowRoot)||void 0===t?void 0:t.querySelector("slot");this.handleSlotChange=()=>this.syncChildren(),null==e||e.addEventListener("slotchange",this.handleSlotChange),this.syncChildren()}disconnectedCallback(){var t;const e=null===(t=this.el.shadowRoot)||void 0===t?void 0:t.querySelector("slot");this.handleSlotChange&&(null==e||e.removeEventListener("slotchange",this.handleSlotChange))}componentDidUpdate(){this.syncChildren()}handleSelectedItemsChange(t){this.internalSelectedItems=null!=t?[...t]:[];const e=this.getItems(),i=null!=t?e.findIndex((e=>t.includes(e.value))):-1;i>=0&&(this.focusedIndex=i)}getItems(){return Array.from(this.el.querySelectorAll(":scope > udp-fluent-list-item"))}getListRole(){return"none"!==this.selectionMode?"listbox":"list"}getItemRole(t){return"listbox"===t?"option":"listitem"}syncChildren(){const t=this.getItems(),e=this.getListRole(),i=this.getItemRole(e);t.forEach(((e,s)=>{const o="none"!==this.selectionMode,a=this.interactive||o,r=this.internalSelectedItems.includes(e.value),l=this.showDivider&&s<t.length-1,n=a&&s===this.focusedIndex?0:-1;e.interactive!==a&&(e.interactive=a),e.selectable!==o&&(e.selectable=o),e.selected!==r&&(e.selected=r),e.itemRole!==i&&(e.itemRole=i),e.showDivider!==l&&(e.showDivider=l),e.itemTabIndex!==n&&(e.itemTabIndex=n),e.selectionAsSecondaryAction!==this.selectionAsSecondaryAction&&(e.selectionAsSecondaryAction=this.selectionAsSecondaryAction)}))}handleItemSelect(t){t.stopPropagation();const{value:e,selected:i}=t.detail;let s;if("single"===this.selectionMode)s=i?[e]:[];else{if("multiselect"!==this.selectionMode)return;s=i?[...this.internalSelectedItems,e]:this.internalSelectedItems.filter((t=>t!==e))}this.internalSelectedItems=s,this.listSelectionChange.emit({selectedItems:s})}handleKeyDown(t){const e="ArrowUp"===t.key,i="Home"===t.key,s="End"===t.key;if(!(e||"ArrowDown"===t.key||i||s))return;t.preventDefault();const o=this.getItems(),a=o.filter((t=>!t.disabled&&t.interactive));if(0===a.length)return;const r=this.el.querySelector("udp-fluent-list-item:focus"),l=r?a.indexOf(r):-1;let n;n=i?0:s?a.length-1:e?l<=0?a.length-1:l-1:l>=a.length-1?0:l+1;const h=a[n];this.focusedIndex=o.indexOf(h),this.syncChildren(),h.focus()}render(){const t=this.getListRole();return i(s,{key:"bd99a46895438c6f0bae981b17d701cc349275b3"},i("list"===t?"ul":"div",Object.assign({},{class:"list-root",role:t,"aria-multiselectable":"multiselect"===this.selectionMode?"true":void 0}),i("slot",null)))}get el(){return o(this)}static get watchers(){return{selectedItems:[{handleSelectedItemsChange:0}]}}};r.style=":host{display:block}.list-root{display:flex;flex-direction:column;padding:0;margin:0;list-style-type:none}";export{a as udp_fluent_list_item,r as udp_list}
|
|
@@ -5,7 +5,13 @@ export type SelectionMode = 'none' | 'single' | 'multiselect';
|
|
|
5
5
|
* List container component. Place udp-fluent-list-item elements as direct children.
|
|
6
6
|
*
|
|
7
7
|
* Selection and keyboard navigation are managed automatically.
|
|
8
|
-
* Use `selectionMode` to enable item selection
|
|
8
|
+
* Use `selectionMode` to enable item selection.
|
|
9
|
+
*
|
|
10
|
+
* Selection affordances by mode:
|
|
11
|
+
* - `none` — no checkmark and no selected styling.
|
|
12
|
+
* - `single` — every item carries a checkmark, and the selected item also gets a
|
|
13
|
+
* selected background plus a brand accent bar on its leading edge.
|
|
14
|
+
* - `multiselect` — the same affordances as `single`, applied to each selected item.
|
|
9
15
|
*
|
|
10
16
|
* @slot - udp-fluent-list-item elements
|
|
11
17
|
*/
|
|
@@ -7970,7 +7970,12 @@ export namespace Components {
|
|
|
7970
7970
|
/**
|
|
7971
7971
|
* List container component. Place udp-fluent-list-item elements as direct children.
|
|
7972
7972
|
* Selection and keyboard navigation are managed automatically.
|
|
7973
|
-
* Use `selectionMode` to enable item selection
|
|
7973
|
+
* Use `selectionMode` to enable item selection.
|
|
7974
|
+
* Selection affordances by mode:
|
|
7975
|
+
* - `none` — no checkmark and no selected styling.
|
|
7976
|
+
* - `single` — every item carries a checkmark, and the selected item also gets a
|
|
7977
|
+
* selected background plus a brand accent bar on its leading edge.
|
|
7978
|
+
* - `multiselect` — the same affordances as `single`, applied to each selected item.
|
|
7974
7979
|
*/
|
|
7975
7980
|
interface UdpList {
|
|
7976
7981
|
/**
|
|
@@ -13745,7 +13750,12 @@ declare global {
|
|
|
13745
13750
|
/**
|
|
13746
13751
|
* List container component. Place udp-fluent-list-item elements as direct children.
|
|
13747
13752
|
* Selection and keyboard navigation are managed automatically.
|
|
13748
|
-
* Use `selectionMode` to enable item selection
|
|
13753
|
+
* Use `selectionMode` to enable item selection.
|
|
13754
|
+
* Selection affordances by mode:
|
|
13755
|
+
* - `none` — no checkmark and no selected styling.
|
|
13756
|
+
* - `single` — every item carries a checkmark, and the selected item also gets a
|
|
13757
|
+
* selected background plus a brand accent bar on its leading edge.
|
|
13758
|
+
* - `multiselect` — the same affordances as `single`, applied to each selected item.
|
|
13749
13759
|
*/
|
|
13750
13760
|
interface HTMLUdpListElement extends Components.UdpList, HTMLStencilElement {
|
|
13751
13761
|
addEventListener<K extends keyof HTMLUdpListElementEventMap>(type: K, listener: (this: HTMLUdpListElement, ev: UdpListCustomEvent<HTMLUdpListElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
|
@@ -23166,7 +23176,12 @@ declare namespace LocalJSX {
|
|
|
23166
23176
|
/**
|
|
23167
23177
|
* List container component. Place udp-fluent-list-item elements as direct children.
|
|
23168
23178
|
* Selection and keyboard navigation are managed automatically.
|
|
23169
|
-
* Use `selectionMode` to enable item selection
|
|
23179
|
+
* Use `selectionMode` to enable item selection.
|
|
23180
|
+
* Selection affordances by mode:
|
|
23181
|
+
* - `none` — no checkmark and no selected styling.
|
|
23182
|
+
* - `single` — every item carries a checkmark, and the selected item also gets a
|
|
23183
|
+
* selected background plus a brand accent bar on its leading edge.
|
|
23184
|
+
* - `multiselect` — the same affordances as `single`, applied to each selected item.
|
|
23170
23185
|
*/
|
|
23171
23186
|
interface UdpList {
|
|
23172
23187
|
/**
|
|
@@ -27190,7 +27205,12 @@ declare module "@stencil/core" {
|
|
|
27190
27205
|
/**
|
|
27191
27206
|
* List container component. Place udp-fluent-list-item elements as direct children.
|
|
27192
27207
|
* Selection and keyboard navigation are managed automatically.
|
|
27193
|
-
* Use `selectionMode` to enable item selection
|
|
27208
|
+
* Use `selectionMode` to enable item selection.
|
|
27209
|
+
* Selection affordances by mode:
|
|
27210
|
+
* - `none` — no checkmark and no selected styling.
|
|
27211
|
+
* - `single` — every item carries a checkmark, and the selected item also gets a
|
|
27212
|
+
* selected background plus a brand accent bar on its leading edge.
|
|
27213
|
+
* - `multiselect` — the same affordances as `single`, applied to each selected item.
|
|
27194
27214
|
*/
|
|
27195
27215
|
"udp-list": LocalJSX.UdpList & JSXBase.HTMLAttributes<HTMLUdpListElement>;
|
|
27196
27216
|
"udp-list-item": LocalJSX.UdpListItem & JSXBase.HTMLAttributes<HTMLUdpListItemElement>;
|