@fluentui/web-components 2.5.8 → 2.5.9
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/CHANGELOG.json +31 -1
- package/CHANGELOG.md +11 -2
- package/dist/esm/tooltip/tooltip.styles.js +20 -20
- package/dist/web-components.js +387 -5007
- package/dist/web-components.min.js +2 -2
- package/package.json +1 -1
|
@@ -245,8 +245,8 @@ ${rn("inline-block")} :host{--calendar-cell-size:calc((${or} + 2 + ${nr}) * ${rr
|
|
|
245
245
|
width:16px;height:16px}`.withBehaviors(sn(ft`
|
|
246
246
|
:host(:${an}){outline-color:${Ge.Highlight};color:${Ge.ButtonText};forced-color-adjust:none}`))});class wg extends Zs{connectedCallback(){super.connectedCallback(),el.setValueFor(this,Ga)}}const kg=wg.compose({baseName:"tooltip",baseClass:Zs,template:(t,e)=>_` ${Tt(t=>t.tooltipVisible,_`<${t.tagFor(ei)} fixed-placement="true" auto-update-mode="${t=>t.autoUpdateMode}" vertical-positioning-mode="${t=>t.verticalPositioningMode}" vertical-default-position="${t=>t.verticalDefaultPosition}" vertical-inset="${t=>t.verticalInset}" vertical-scaling="${t=>t.verticalScaling}" horizontal-positioning-mode="${t=>t.horizontalPositioningMode}" horizontal-default-position="${t=>t.horizontalDefaultPosition}" horizontal-scaling="${t=>t.horizontalScaling}" horizontal-inset="${t=>t.horizontalInset}" vertical-viewport-lock="${t=>t.horizontalViewportLock}" horizontal-viewport-lock="${t=>t.verticalViewportLock}" dir="${t=>t.currentDirection}" ${Dt("region")}><div class="tooltip" part="tooltip" role="tooltip"><slot></slot></div></${t.tagFor(ei)}>`)} `,styles:(t,e)=>ft`
|
|
247
247
|
:host{position:relative;contain:layout;overflow:visible;height:0;width:0;z-index:10000}.tooltip{box-sizing:border-box;border-radius:calc(${ar} * 1px);border:calc(${cr} * 1px) solid ${Oc};background:${el};color:${rc};padding:4px 12px;height:fit-content;width:fit-content;${Hh}
|
|
248
|
-
white-space:nowrap;box-shadow:${$d}}
|
|
249
|
-
:host([disabled]){opacity:1}
|
|
248
|
+
white-space:nowrap;box-shadow:${$d}}${t.tagFor(ei)}{display:flex;justify-content:center;align-items:center;overflow:visible;flex-direction:row}${t.tagFor(ei)}.right,${t.tagFor(ei)}.left{flex-direction:column}${t.tagFor(ei)}.top .tooltip::after,${t.tagFor(ei)}.bottom .tooltip::after,${t.tagFor(ei)}.left .tooltip::after,${t.tagFor(ei)}.right .tooltip::after{content:'';width:12px;height:12px;background:${el};border-top:calc(${cr} * 1px) solid ${Oc};border-left:calc(${cr} * 1px) solid ${Oc};position:absolute}${t.tagFor(ei)}.top .tooltip::after{transform:translateX(-50%) rotate(225deg);bottom:5px;left:50%}${t.tagFor(ei)}.top .tooltip{margin-bottom:12px}${t.tagFor(ei)}.bottom .tooltip::after{transform:translateX(-50%) rotate(45deg);top:5px;left:50%}${t.tagFor(ei)}.bottom .tooltip{margin-top:12px}${t.tagFor(ei)}.left .tooltip::after{transform:translateY(-50%) rotate(135deg);top:50%;right:5px}${t.tagFor(ei)}.left .tooltip{margin-right:12px}${t.tagFor(ei)}.right .tooltip::after{transform:translateY(-50%) rotate(-45deg);top:50%;left:5px}${t.tagFor(ei)}.right .tooltip{margin-left:12px}`.withBehaviors(sn(ft`
|
|
249
|
+
:host([disabled]){opacity:1}${t.tagFor(ei)}.top .tooltip::after,${t.tagFor(ei)}.bottom .tooltip::after,${t.tagFor(ei)}.left .tooltip::after,${t.tagFor(ei)}.right .tooltip::after{content:'';width:unset;height:unset}`))}),Cg=(t,e)=>ft`
|
|
250
250
|
:host([hidden]){display:none}${rn("flex")} :host{flex-direction:column;align-items:stretch;min-width:fit-content;font-size:0}`,Ig=en.compose({baseName:"tree-view",template:(t,e)=>_`<template role="tree" ${Dt("treeView")} @keydown="${(t,e)=>t.handleKeyDown(e.event)}" @focusin="${(t,e)=>t.handleFocus(e.event)}" @focusout="${(t,e)=>t.handleBlur(e.event)}" @click="${(t,e)=>t.handleClick(e.event)}" @selected-change="${(t,e)=>t.handleSelectedChange(e.event)}"><slot ${Ht("slottedTreeItems")}></slot></template>`,styles:Cg}),Fg=Cg,Dg=ft`
|
|
251
251
|
.expand-collapse-button svg{transform:rotate(0deg)}:host(.nested) .expand-collapse-button{left:var(--expand-collapse-button-nested-width,calc(${Yh} * -1px))}:host([selected])::after{left:calc(${hr} * 1px)}:host([expanded]) > .positioning-region .expand-collapse-button svg{transform:rotate(90deg)}`,Tg=ft`
|
|
252
252
|
.expand-collapse-button svg{transform:rotate(180deg)}:host(.nested) .expand-collapse-button{right:var(--expand-collapse-button-nested-width,calc(${Yh} * -1px))}:host([selected])::after{right:calc(${hr} * 1px)}:host([expanded]) > .positioning-region .expand-collapse-button svg{transform:rotate(90deg)}`,Sg=vt`((${or} / 2) * ${rr}) + ((${rr} * ${nr}) / 2)`,Og=fo.create("tree-item-expand-collapse-hover").withDefault(t=>{const e=Xl.getValueFor(t);return e.evaluate(t,e.evaluate(t).hover).hover}),Eg=fo.create("tree-item-expand-collapse-selected-hover").withDefault(t=>{const e=ql.getValueFor(t);return Xl.getValueFor(t).evaluate(t,e.evaluate(t).rest).hover}),Vg=(t,e)=>ft`
|