udp-stencil-component-library 26.7.0-beta.0 → 26.7.0-beta.2
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/cjs/udp-vertical-timeline-dot.cjs.entry.js +1 -1
- 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/collection/components/vertical-timeline/udp-vertical-timeline-dot.css +6 -2
- package/dist/components/udp-list-item2.js +1 -1
- package/dist/components/udp-list2.js +1 -1
- package/dist/components/udp-vertical-timeline-dot.js +1 -1
- package/dist/docs.json +2 -2
- package/dist/esm/udp-fluent-list-item_2.entry.js +2 -2
- package/dist/esm/udp-vertical-timeline-dot.entry.js +1 -1
- package/dist/stencil-library/udp-fluent-list-item_2.entry.js +1 -1
- package/dist/stencil-library/udp-vertical-timeline-dot.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 {
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-G1ccGqOs.js');
|
|
4
4
|
|
|
5
|
-
const udpVerticalTimelineDotCss = () => `:host{--udp-vertical-timeline-dot-size-small:10px;--udp-vertical-timeline-dot-size-medium:14px;--udp-vertical-timeline-dot-size-large:20px;--udp-vertical-timeline-dot-icon-size:36px;--udp-vertical-timeline-dot-outlined-bg:var(--colorNeutralBackground1, #ffffff);--udp-vertical-timeline-dot-outline-width:2px;--udp-vertical-timeline-dot-bg:var(--colorNeutralStroke1, #8a8886);--udp-vertical-timeline-dot-outline-color:var(--colorNeutralStroke1, #8a8886);display:inline-flex;box-sizing:border-box;margin:0;padding:0}.dot-medium{width:var(--udp-vertical-timeline-dot-size-medium);height:var(--udp-vertical-timeline-dot-size-medium)
|
|
5
|
+
const udpVerticalTimelineDotCss = () => `:host{--udp-vertical-timeline-dot-size-small:10px;--udp-vertical-timeline-dot-size-medium:14px;--udp-vertical-timeline-dot-size-large:20px;--udp-vertical-timeline-dot-icon-size:36px;--udp-vertical-timeline-dot-outlined-bg:var(--colorNeutralBackground1, #ffffff);--udp-vertical-timeline-dot-outline-width:2px;--udp-vertical-timeline-dot-bg:var(--colorNeutralStroke1, #8a8886);--udp-vertical-timeline-dot-outline-color:var(--colorNeutralStroke1, #8a8886);display:inline-flex;box-sizing:border-box;margin:0;padding:0}.dot-medium{width:var(--udp-vertical-timeline-dot-size-medium);height:var(--udp-vertical-timeline-dot-size-medium);--udp-vertical-timeline-dot-size:var(--udp-vertical-timeline-dot-size-medium)}.dot-small{width:var(--udp-vertical-timeline-dot-size-small);height:var(--udp-vertical-timeline-dot-size-small);--udp-vertical-timeline-dot-size:var(--udp-vertical-timeline-dot-size-small)}.dot-large{width:var(--udp-vertical-timeline-dot-size-large);height:var(--udp-vertical-timeline-dot-size-large);--udp-vertical-timeline-dot-size:var(--udp-vertical-timeline-dot-size-large)}.dot-filled{background:var(--udp-vertical-timeline-dot-bg)}.dot-outlined{background:var(--udp-vertical-timeline-dot-outlined-bg);border:var(--udp-vertical-timeline-dot-outline-width) solid var(--udp-vertical-timeline-dot-outline-color);color:var(--udp-vertical-timeline-dot-outline-color)}.dot-medium,.dot-small,.dot-large{border-radius:50%;display:inline-block;box-sizing:border-box;margin:0}.dot-shape-icon{width:var(--udp-vertical-timeline-dot-icon-size);height:var(--udp-vertical-timeline-dot-icon-size);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;--udp-vertical-timeline-dot-size:var(--udp-vertical-timeline-dot-icon-size)}.dot-shape-icon.dot-outlined{background:var(--udp-vertical-timeline-dot-outlined-bg);border:var(--udp-vertical-timeline-dot-outline-width) solid var(--udp-vertical-timeline-dot-outline-color);color:var(--udp-vertical-timeline-dot-outline-color)}.dot-shape-icon.dot-filled{background:var(--udp-vertical-timeline-dot-bg);color:var(--colorNeutralForegroundOnBrand, #ffffff)}.dot-color-primary{--udp-vertical-timeline-dot-bg:var(--colorBrandBackground, #0f6cbd);--udp-vertical-timeline-dot-outline-color:var(--colorBrandStroke1, #0f6cbd)}.dot-color-secondary{--udp-vertical-timeline-dot-bg:var(--colorCompoundBrandBackground, #115ea3);--udp-vertical-timeline-dot-outline-color:var(--colorCompoundBrandStroke, #115ea3)}.dot-color-default{--udp-vertical-timeline-dot-bg:var(--colorNeutralStroke1, #8a8886);--udp-vertical-timeline-dot-outline-color:var(--colorNeutralStroke1, #8a8886)}.dot-color-error{--udp-vertical-timeline-dot-bg:var(--colorPaletteRedBackground3, #bc2f32);--udp-vertical-timeline-dot-outline-color:var(--colorPaletteRedBorderActive, #bc2f32)}.dot-color-info{--udp-vertical-timeline-dot-bg:var(--colorPaletteBlueForeground2, #2886de);--udp-vertical-timeline-dot-outline-color:var(--colorPaletteBlueBorderActive, #2886de)}.dot-color-success{--udp-vertical-timeline-dot-bg:var(--colorPaletteGreenBackground3, #0e700e);--udp-vertical-timeline-dot-outline-color:var(--colorPaletteGreenBorderActive, #0e700e)}.dot-color-warning{--udp-vertical-timeline-dot-bg:var(--colorPaletteYellowBackground3, #835c00);--udp-vertical-timeline-dot-outline-color:var(--colorPaletteYellowBorderActive, #835c00)}`;
|
|
6
6
|
|
|
7
7
|
const UdpVerticalTimelineDot = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -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
|
============================================ */
|
|
@@ -37,8 +37,6 @@
|
|
|
37
37
|
.dot-medium {
|
|
38
38
|
width: var(--udp-vertical-timeline-dot-size-medium);
|
|
39
39
|
height: var(--udp-vertical-timeline-dot-size-medium);
|
|
40
|
-
border-radius: 50%;
|
|
41
|
-
display: inline-block;
|
|
42
40
|
--udp-vertical-timeline-dot-size: var(--udp-vertical-timeline-dot-size-medium);
|
|
43
41
|
}
|
|
44
42
|
.dot-small {
|
|
@@ -62,9 +60,15 @@
|
|
|
62
60
|
color: var(--udp-vertical-timeline-dot-outline-color);
|
|
63
61
|
}
|
|
64
62
|
|
|
63
|
+
/* Shape and box model shared by all three sizes. border-radius and display used to
|
|
64
|
+
live on .dot-medium alone, so small and large computed to border-radius: 0 and
|
|
65
|
+
rendered as squares. They belong here — the dot is a circle at every size, in
|
|
66
|
+
both the filled and outlined variants. */
|
|
65
67
|
.dot-medium,
|
|
66
68
|
.dot-small,
|
|
67
69
|
.dot-large {
|
|
70
|
+
border-radius: 50%;
|
|
71
|
+
display: inline-block;
|
|
68
72
|
box-sizing: border-box; /* ensure borders don't shift center */
|
|
69
73
|
margin: 0;
|
|
70
74
|
}
|
|
@@ -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}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import "../stencil-library/stencil-library.css";
|
|
2
|
-
import{p as e,H as t,h as i,t as o}from"./index2.js";const l=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.color="primary",this.variant="filled",this.size="medium",this.shape="default"}render(){const e=!["primary","secondary","default","error","info","success","warning"].includes(this.color);return i("div",{key:"cb22d832d87ef4ece66fc5a2670150def602aadb",class:{["dot-"+this.size]:!0,["dot-"+this.variant]:!0,["dot-color-"+this.color]:!e,["dot-shape-"+this.shape]:!0},style:e?{"--udp-vertical-timeline-dot-bg":this.color,"--udp-vertical-timeline-dot-outline-color":this.color}:{}},i("slot",{key:"34c3a0dc6ff0d266c1bbffd0babfa36ad6416cb5"}))}static get style(){return":host{--udp-vertical-timeline-dot-size-small:10px;--udp-vertical-timeline-dot-size-medium:14px;--udp-vertical-timeline-dot-size-large:20px;--udp-vertical-timeline-dot-icon-size:36px;--udp-vertical-timeline-dot-outlined-bg:var(--colorNeutralBackground1, #ffffff);--udp-vertical-timeline-dot-outline-width:2px;--udp-vertical-timeline-dot-bg:var(--colorNeutralStroke1, #8a8886);--udp-vertical-timeline-dot-outline-color:var(--colorNeutralStroke1, #8a8886);display:inline-flex;box-sizing:border-box;margin:0;padding:0}.dot-medium{width:var(--udp-vertical-timeline-dot-size-medium);height:var(--udp-vertical-timeline-dot-size-medium)
|
|
2
|
+
import{p as e,H as t,h as i,t as o}from"./index2.js";const l=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.color="primary",this.variant="filled",this.size="medium",this.shape="default"}render(){const e=!["primary","secondary","default","error","info","success","warning"].includes(this.color);return i("div",{key:"cb22d832d87ef4ece66fc5a2670150def602aadb",class:{["dot-"+this.size]:!0,["dot-"+this.variant]:!0,["dot-color-"+this.color]:!e,["dot-shape-"+this.shape]:!0},style:e?{"--udp-vertical-timeline-dot-bg":this.color,"--udp-vertical-timeline-dot-outline-color":this.color}:{}},i("slot",{key:"34c3a0dc6ff0d266c1bbffd0babfa36ad6416cb5"}))}static get style(){return":host{--udp-vertical-timeline-dot-size-small:10px;--udp-vertical-timeline-dot-size-medium:14px;--udp-vertical-timeline-dot-size-large:20px;--udp-vertical-timeline-dot-icon-size:36px;--udp-vertical-timeline-dot-outlined-bg:var(--colorNeutralBackground1, #ffffff);--udp-vertical-timeline-dot-outline-width:2px;--udp-vertical-timeline-dot-bg:var(--colorNeutralStroke1, #8a8886);--udp-vertical-timeline-dot-outline-color:var(--colorNeutralStroke1, #8a8886);display:inline-flex;box-sizing:border-box;margin:0;padding:0}.dot-medium{width:var(--udp-vertical-timeline-dot-size-medium);height:var(--udp-vertical-timeline-dot-size-medium);--udp-vertical-timeline-dot-size:var(--udp-vertical-timeline-dot-size-medium)}.dot-small{width:var(--udp-vertical-timeline-dot-size-small);height:var(--udp-vertical-timeline-dot-size-small);--udp-vertical-timeline-dot-size:var(--udp-vertical-timeline-dot-size-small)}.dot-large{width:var(--udp-vertical-timeline-dot-size-large);height:var(--udp-vertical-timeline-dot-size-large);--udp-vertical-timeline-dot-size:var(--udp-vertical-timeline-dot-size-large)}.dot-filled{background:var(--udp-vertical-timeline-dot-bg)}.dot-outlined{background:var(--udp-vertical-timeline-dot-outlined-bg);border:var(--udp-vertical-timeline-dot-outline-width) solid var(--udp-vertical-timeline-dot-outline-color);color:var(--udp-vertical-timeline-dot-outline-color)}.dot-medium,.dot-small,.dot-large{border-radius:50%;display:inline-block;box-sizing:border-box;margin:0}.dot-shape-icon{width:var(--udp-vertical-timeline-dot-icon-size);height:var(--udp-vertical-timeline-dot-icon-size);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;--udp-vertical-timeline-dot-size:var(--udp-vertical-timeline-dot-icon-size)}.dot-shape-icon.dot-outlined{background:var(--udp-vertical-timeline-dot-outlined-bg);border:var(--udp-vertical-timeline-dot-outline-width) solid var(--udp-vertical-timeline-dot-outline-color);color:var(--udp-vertical-timeline-dot-outline-color)}.dot-shape-icon.dot-filled{background:var(--udp-vertical-timeline-dot-bg);color:var(--colorNeutralForegroundOnBrand, #ffffff)}.dot-color-primary{--udp-vertical-timeline-dot-bg:var(--colorBrandBackground, #0f6cbd);--udp-vertical-timeline-dot-outline-color:var(--colorBrandStroke1, #0f6cbd)}.dot-color-secondary{--udp-vertical-timeline-dot-bg:var(--colorCompoundBrandBackground, #115ea3);--udp-vertical-timeline-dot-outline-color:var(--colorCompoundBrandStroke, #115ea3)}.dot-color-default{--udp-vertical-timeline-dot-bg:var(--colorNeutralStroke1, #8a8886);--udp-vertical-timeline-dot-outline-color:var(--colorNeutralStroke1, #8a8886)}.dot-color-error{--udp-vertical-timeline-dot-bg:var(--colorPaletteRedBackground3, #bc2f32);--udp-vertical-timeline-dot-outline-color:var(--colorPaletteRedBorderActive, #bc2f32)}.dot-color-info{--udp-vertical-timeline-dot-bg:var(--colorPaletteBlueForeground2, #2886de);--udp-vertical-timeline-dot-outline-color:var(--colorPaletteBlueBorderActive, #2886de)}.dot-color-success{--udp-vertical-timeline-dot-bg:var(--colorPaletteGreenBackground3, #0e700e);--udp-vertical-timeline-dot-outline-color:var(--colorPaletteGreenBorderActive, #0e700e)}.dot-color-warning{--udp-vertical-timeline-dot-bg:var(--colorPaletteYellowBackground3, #835c00);--udp-vertical-timeline-dot-outline-color:var(--colorPaletteYellowBorderActive, #835c00)}"}},[257,"udp-vertical-timeline-dot",{color:[1],variant:[1],size:[1],shape:[1]}]),r=l,d=function(){"undefined"!=typeof customElements&&["udp-vertical-timeline-dot"].forEach((e=>{"udp-vertical-timeline-dot"===e&&(customElements.get(o(e))||customElements.define(o(e),l))}))};export{r as UdpVerticalTimelineDot,d as defineCustomElement}
|
package/dist/docs.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2026-09-
|
|
2
|
+
"timestamp": "2026-09-04T17:05:23",
|
|
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,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h } from './index-Cgpvu-iV.js';
|
|
2
2
|
|
|
3
|
-
const udpVerticalTimelineDotCss = () => `:host{--udp-vertical-timeline-dot-size-small:10px;--udp-vertical-timeline-dot-size-medium:14px;--udp-vertical-timeline-dot-size-large:20px;--udp-vertical-timeline-dot-icon-size:36px;--udp-vertical-timeline-dot-outlined-bg:var(--colorNeutralBackground1, #ffffff);--udp-vertical-timeline-dot-outline-width:2px;--udp-vertical-timeline-dot-bg:var(--colorNeutralStroke1, #8a8886);--udp-vertical-timeline-dot-outline-color:var(--colorNeutralStroke1, #8a8886);display:inline-flex;box-sizing:border-box;margin:0;padding:0}.dot-medium{width:var(--udp-vertical-timeline-dot-size-medium);height:var(--udp-vertical-timeline-dot-size-medium)
|
|
3
|
+
const udpVerticalTimelineDotCss = () => `:host{--udp-vertical-timeline-dot-size-small:10px;--udp-vertical-timeline-dot-size-medium:14px;--udp-vertical-timeline-dot-size-large:20px;--udp-vertical-timeline-dot-icon-size:36px;--udp-vertical-timeline-dot-outlined-bg:var(--colorNeutralBackground1, #ffffff);--udp-vertical-timeline-dot-outline-width:2px;--udp-vertical-timeline-dot-bg:var(--colorNeutralStroke1, #8a8886);--udp-vertical-timeline-dot-outline-color:var(--colorNeutralStroke1, #8a8886);display:inline-flex;box-sizing:border-box;margin:0;padding:0}.dot-medium{width:var(--udp-vertical-timeline-dot-size-medium);height:var(--udp-vertical-timeline-dot-size-medium);--udp-vertical-timeline-dot-size:var(--udp-vertical-timeline-dot-size-medium)}.dot-small{width:var(--udp-vertical-timeline-dot-size-small);height:var(--udp-vertical-timeline-dot-size-small);--udp-vertical-timeline-dot-size:var(--udp-vertical-timeline-dot-size-small)}.dot-large{width:var(--udp-vertical-timeline-dot-size-large);height:var(--udp-vertical-timeline-dot-size-large);--udp-vertical-timeline-dot-size:var(--udp-vertical-timeline-dot-size-large)}.dot-filled{background:var(--udp-vertical-timeline-dot-bg)}.dot-outlined{background:var(--udp-vertical-timeline-dot-outlined-bg);border:var(--udp-vertical-timeline-dot-outline-width) solid var(--udp-vertical-timeline-dot-outline-color);color:var(--udp-vertical-timeline-dot-outline-color)}.dot-medium,.dot-small,.dot-large{border-radius:50%;display:inline-block;box-sizing:border-box;margin:0}.dot-shape-icon{width:var(--udp-vertical-timeline-dot-icon-size);height:var(--udp-vertical-timeline-dot-icon-size);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;--udp-vertical-timeline-dot-size:var(--udp-vertical-timeline-dot-icon-size)}.dot-shape-icon.dot-outlined{background:var(--udp-vertical-timeline-dot-outlined-bg);border:var(--udp-vertical-timeline-dot-outline-width) solid var(--udp-vertical-timeline-dot-outline-color);color:var(--udp-vertical-timeline-dot-outline-color)}.dot-shape-icon.dot-filled{background:var(--udp-vertical-timeline-dot-bg);color:var(--colorNeutralForegroundOnBrand, #ffffff)}.dot-color-primary{--udp-vertical-timeline-dot-bg:var(--colorBrandBackground, #0f6cbd);--udp-vertical-timeline-dot-outline-color:var(--colorBrandStroke1, #0f6cbd)}.dot-color-secondary{--udp-vertical-timeline-dot-bg:var(--colorCompoundBrandBackground, #115ea3);--udp-vertical-timeline-dot-outline-color:var(--colorCompoundBrandStroke, #115ea3)}.dot-color-default{--udp-vertical-timeline-dot-bg:var(--colorNeutralStroke1, #8a8886);--udp-vertical-timeline-dot-outline-color:var(--colorNeutralStroke1, #8a8886)}.dot-color-error{--udp-vertical-timeline-dot-bg:var(--colorPaletteRedBackground3, #bc2f32);--udp-vertical-timeline-dot-outline-color:var(--colorPaletteRedBorderActive, #bc2f32)}.dot-color-info{--udp-vertical-timeline-dot-bg:var(--colorPaletteBlueForeground2, #2886de);--udp-vertical-timeline-dot-outline-color:var(--colorPaletteBlueBorderActive, #2886de)}.dot-color-success{--udp-vertical-timeline-dot-bg:var(--colorPaletteGreenBackground3, #0e700e);--udp-vertical-timeline-dot-outline-color:var(--colorPaletteGreenBorderActive, #0e700e)}.dot-color-warning{--udp-vertical-timeline-dot-bg:var(--colorPaletteYellowBackground3, #835c00);--udp-vertical-timeline-dot-outline-color:var(--colorPaletteYellowBorderActive, #835c00)}`;
|
|
4
4
|
|
|
5
5
|
const UdpVerticalTimelineDot = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -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}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as e,h as i}from"./index-Cgpvu-iV.js";const t=class{constructor(i){e(this,i),this.color="primary",this.variant="filled",this.size="medium",this.shape="default"}render(){const e=!["primary","secondary","default","error","info","success","warning"].includes(this.color);return i("div",{key:"cb22d832d87ef4ece66fc5a2670150def602aadb",class:{["dot-"+this.size]:!0,["dot-"+this.variant]:!0,["dot-color-"+this.color]:!e,["dot-shape-"+this.shape]:!0},style:e?{"--udp-vertical-timeline-dot-bg":this.color,"--udp-vertical-timeline-dot-outline-color":this.color}:{}},i("slot",{key:"34c3a0dc6ff0d266c1bbffd0babfa36ad6416cb5"}))}};t.style=":host{--udp-vertical-timeline-dot-size-small:10px;--udp-vertical-timeline-dot-size-medium:14px;--udp-vertical-timeline-dot-size-large:20px;--udp-vertical-timeline-dot-icon-size:36px;--udp-vertical-timeline-dot-outlined-bg:var(--colorNeutralBackground1, #ffffff);--udp-vertical-timeline-dot-outline-width:2px;--udp-vertical-timeline-dot-bg:var(--colorNeutralStroke1, #8a8886);--udp-vertical-timeline-dot-outline-color:var(--colorNeutralStroke1, #8a8886);display:inline-flex;box-sizing:border-box;margin:0;padding:0}.dot-medium{width:var(--udp-vertical-timeline-dot-size-medium);height:var(--udp-vertical-timeline-dot-size-medium)
|
|
1
|
+
import{r as e,h as i}from"./index-Cgpvu-iV.js";const t=class{constructor(i){e(this,i),this.color="primary",this.variant="filled",this.size="medium",this.shape="default"}render(){const e=!["primary","secondary","default","error","info","success","warning"].includes(this.color);return i("div",{key:"cb22d832d87ef4ece66fc5a2670150def602aadb",class:{["dot-"+this.size]:!0,["dot-"+this.variant]:!0,["dot-color-"+this.color]:!e,["dot-shape-"+this.shape]:!0},style:e?{"--udp-vertical-timeline-dot-bg":this.color,"--udp-vertical-timeline-dot-outline-color":this.color}:{}},i("slot",{key:"34c3a0dc6ff0d266c1bbffd0babfa36ad6416cb5"}))}};t.style=":host{--udp-vertical-timeline-dot-size-small:10px;--udp-vertical-timeline-dot-size-medium:14px;--udp-vertical-timeline-dot-size-large:20px;--udp-vertical-timeline-dot-icon-size:36px;--udp-vertical-timeline-dot-outlined-bg:var(--colorNeutralBackground1, #ffffff);--udp-vertical-timeline-dot-outline-width:2px;--udp-vertical-timeline-dot-bg:var(--colorNeutralStroke1, #8a8886);--udp-vertical-timeline-dot-outline-color:var(--colorNeutralStroke1, #8a8886);display:inline-flex;box-sizing:border-box;margin:0;padding:0}.dot-medium{width:var(--udp-vertical-timeline-dot-size-medium);height:var(--udp-vertical-timeline-dot-size-medium);--udp-vertical-timeline-dot-size:var(--udp-vertical-timeline-dot-size-medium)}.dot-small{width:var(--udp-vertical-timeline-dot-size-small);height:var(--udp-vertical-timeline-dot-size-small);--udp-vertical-timeline-dot-size:var(--udp-vertical-timeline-dot-size-small)}.dot-large{width:var(--udp-vertical-timeline-dot-size-large);height:var(--udp-vertical-timeline-dot-size-large);--udp-vertical-timeline-dot-size:var(--udp-vertical-timeline-dot-size-large)}.dot-filled{background:var(--udp-vertical-timeline-dot-bg)}.dot-outlined{background:var(--udp-vertical-timeline-dot-outlined-bg);border:var(--udp-vertical-timeline-dot-outline-width) solid var(--udp-vertical-timeline-dot-outline-color);color:var(--udp-vertical-timeline-dot-outline-color)}.dot-medium,.dot-small,.dot-large{border-radius:50%;display:inline-block;box-sizing:border-box;margin:0}.dot-shape-icon{width:var(--udp-vertical-timeline-dot-icon-size);height:var(--udp-vertical-timeline-dot-icon-size);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;--udp-vertical-timeline-dot-size:var(--udp-vertical-timeline-dot-icon-size)}.dot-shape-icon.dot-outlined{background:var(--udp-vertical-timeline-dot-outlined-bg);border:var(--udp-vertical-timeline-dot-outline-width) solid var(--udp-vertical-timeline-dot-outline-color);color:var(--udp-vertical-timeline-dot-outline-color)}.dot-shape-icon.dot-filled{background:var(--udp-vertical-timeline-dot-bg);color:var(--colorNeutralForegroundOnBrand, #ffffff)}.dot-color-primary{--udp-vertical-timeline-dot-bg:var(--colorBrandBackground, #0f6cbd);--udp-vertical-timeline-dot-outline-color:var(--colorBrandStroke1, #0f6cbd)}.dot-color-secondary{--udp-vertical-timeline-dot-bg:var(--colorCompoundBrandBackground, #115ea3);--udp-vertical-timeline-dot-outline-color:var(--colorCompoundBrandStroke, #115ea3)}.dot-color-default{--udp-vertical-timeline-dot-bg:var(--colorNeutralStroke1, #8a8886);--udp-vertical-timeline-dot-outline-color:var(--colorNeutralStroke1, #8a8886)}.dot-color-error{--udp-vertical-timeline-dot-bg:var(--colorPaletteRedBackground3, #bc2f32);--udp-vertical-timeline-dot-outline-color:var(--colorPaletteRedBorderActive, #bc2f32)}.dot-color-info{--udp-vertical-timeline-dot-bg:var(--colorPaletteBlueForeground2, #2886de);--udp-vertical-timeline-dot-outline-color:var(--colorPaletteBlueBorderActive, #2886de)}.dot-color-success{--udp-vertical-timeline-dot-bg:var(--colorPaletteGreenBackground3, #0e700e);--udp-vertical-timeline-dot-outline-color:var(--colorPaletteGreenBorderActive, #0e700e)}.dot-color-warning{--udp-vertical-timeline-dot-bg:var(--colorPaletteYellowBackground3, #835c00);--udp-vertical-timeline-dot-outline-color:var(--colorPaletteYellowBorderActive, #835c00)}";export{t as udp_vertical_timeline_dot}
|
|
@@ -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>;
|