@fabric-msft/fabric-web 5.0.1 → 7.0.0

package/esm/components/spin-button/spin-button.styles.js

@@ -0,0 +1,15 @@
+import { css } from '@microsoft/fast-element';
+import { fontFamilyBase, fontSizeBase300, fontWeightRegular, lineHeightBase300, colorNeutralForeground1, spacingVerticalXS, spacingHorizontalXS, colorNeutralBackground1, strokeWidthThin, colorNeutralStroke1, colorNeutralStrokeAccessible, borderRadiusMedium, spacingHorizontalXXS, spacingHorizontalMNudge, colorCompoundBrandStroke, durationUltraFast, curveAccelerateMid, colorTransparentBackground, colorNeutralForeground4, colorNeutralForeground3, spacingHorizontalSNudge, colorNeutralBackground3, colorNeutralBackground3Pressed, colorNeutralForegroundDisabled, colorNeutralStroke1Hover, colorNeutralStrokeAccessibleHover, colorNeutralStroke1Pressed, durationNormal, curveDecelerateMid, colorCompoundBrandStrokePressed, colorNeutralStrokeDisabled, fontSizeBase200, lineHeightBase200, colorStatusDangerBorder2, colorNeutralStrokeAccessiblePressed, colorTransparentStroke, colorTransparentStrokeInteractive, display } from '@fluentui/web-components';
+import { sizeVerticalXXXL, sizeVerticalXXL } from '@fabric-msft/theme';
+
+/**
+ * Styles for the SpinButton component.
+ *
+ * @public
+ */
+const styles = css`
+  ${display("block")}
+
+  :host{font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};max-width:400px;}.label{display:flex;color:${colorNeutralForeground1};padding-bottom:${spacingVerticalXS};flex-shrink:0;padding-inline-end:${spacingHorizontalXS}}.label[hidden],:host(:empty) .label{display:none}.root{align-items:center;background-color:${colorNeutralBackground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};border-bottom-color:${colorNeutralStrokeAccessible};border-radius:${borderRadiusMedium};box-sizing:border-box;height:${sizeVerticalXXXL};display:inline-flex;flex-direction:row;gap:${spacingHorizontalXXS};padding:0 0 0 ${spacingHorizontalMNudge};position:relative;width:100%}.root::after{box-sizing:border-box;content:"";position:absolute;inset-inline-start:-1px;bottom:0px;inset-inline-end:-1px;height:max(2px,${borderRadiusMedium});border-radius:0 0 ${borderRadiusMedium} ${borderRadiusMedium};border-bottom:2px solid ${colorCompoundBrandStroke};clip-path:inset(calc(100% - 2px) 1px 0px);transform:scaleX(0);transition-property:transform;transition-duration:${durationUltraFast};transition-delay:${curveAccelerateMid}}.control{flex:1;min-width:0;height:100%;box-sizing:border-box;color:${colorNeutralForeground1};border-radius:${borderRadiusMedium};background:${colorTransparentBackground};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};font-size:${fontSizeBase300};line-height:${lineHeightBase300};border:none;padding:0;text-align:start}.control:focus-visible{outline:0;border:0}.control::placeholder{color:${colorNeutralForeground4}}:host ::slotted([slot="start"]),:host ::slotted([slot="end"]){display:flex;align-items:center;justify-content:center;color:${colorNeutralForeground3}}:host ::slotted([slot="start"]){padding-inline-end:${spacingHorizontalXXS}}:host ::slotted([slot="end"]){padding-inline-start:${spacingHorizontalXXS}}.buttons{display:flex;flex-direction:column;height:100%;flex-shrink:0}.increment-button,.decrement-button{display:flex;flex-direction:column;align-items:center;justify-content:center;border:none;background:${colorTransparentBackground};color:${colorNeutralForeground3};cursor:pointer;padding:0 ${spacingHorizontalSNudge};flex:1;min-height:0;box-sizing:border-box}.increment-button{justify-content:flex-end;border-start-end-radius:${borderRadiusMedium}}.decrement-button{justify-content:flex-start;border-end-end-radius:${borderRadiusMedium}}.increment-button:hover,.decrement-button:hover{background:${colorNeutralBackground3}}.increment-button:active,.increment-button.pressed,.decrement-button:active,.decrement-button.pressed{color:${colorNeutralForeground1};background:${colorNeutralBackground3Pressed}}.increment-button:disabled,.decrement-button:disabled{color:${colorNeutralForegroundDisabled};cursor:not-allowed;background:${colorTransparentBackground}}:host(:hover) .root{border-color:${colorNeutralStroke1Hover};border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .root{border-color:${colorNeutralStroke1Pressed}}:host(:focus-within) .root{outline:transparent solid 2px;border-bottom:0}:host(:focus-within) .root::after{transform:scaleX(1);transition-property:transform;transition-duration:${durationNormal};transition-delay:${curveDecelerateMid}}:host(:focus-within:active) .root::after{border-bottom-color:${colorCompoundBrandStrokePressed}}:host(:focus-within) .root{border:${strokeWidthThin} solid ${colorNeutralStroke1}}:host([disabled]) .root{background:${colorTransparentBackground};border:${strokeWidthThin} solid ${colorNeutralStrokeDisabled}}:host([disabled]) .control,:host([disabled]) .control::placeholder,:host([disabled]) ::slotted([slot="start"]),:host([disabled]) ::slotted([slot="end"]){color:${colorNeutralForegroundDisabled}}:host([control-size="small"]) .control{font-size:${fontSizeBase200};font-weight:${fontWeightRegular};line-height:${lineHeightBase200}}:host([control-size="small"]) .root{height:${sizeVerticalXXL};gap:${spacingHorizontalXXS};padding:0 0 0 ${spacingHorizontalSNudge}}.root.error,:host(:hover) .root.error,:host(:active) .root.error,:host(:focus-within) .root.error{border:${strokeWidthThin} solid ${colorStatusDangerBorder2}}:host(:has(.control:user-invalid)) .root{border:${strokeWidthThin} solid ${colorStatusDangerBorder2}}:host([appearance="underline"]) .root{background:${colorTransparentBackground};border:0;border-radius:0;border-bottom:${strokeWidthThin} solid ${colorNeutralStrokeAccessible}}:host([appearance="underline"]:hover) .root{border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host([appearance="underline"]:active) .root{border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance="underline"]:focus-within) .root{border:0;border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance="underline"][disabled]) .root{border-bottom-color:${colorNeutralStrokeDisabled}}:host([appearance="filled-lighter"]) .root,:host([appearance="filled-darker"]) .root{border:${strokeWidthThin} solid ${colorTransparentStroke}}:host([appearance="filled-lighter"]) .root{background:${colorNeutralBackground1}}:host([appearance="filled-darker"]) .root{background:${colorNeutralBackground3}}:host([appearance="filled-lighter"]:hover) .root,:host([appearance="filled-darker"]:hover) .root{border-color:${colorTransparentStrokeInteractive}}:host([appearance="filled-lighter"]:active) .root,:host([appearance="filled-darker"]:active) .root{border-color:${colorTransparentStrokeInteractive};background:${colorNeutralBackground3}}`;
+
+export { styles };

package/esm/components/spin-button/spin-button.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spin-button.styles.js","sourceRoot":"","sources":["../../../../src/components/spin-button/spin-button.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,wBAAwB,EACxB,+BAA+B,EAC/B,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,wBAAwB,EACxB,0BAA0B,EAC1B,sBAAsB,EACtB,iCAAiC,EACjC,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EACjB,eAAe,EACf,OAAO,EACR,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEvE;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAkB,GAAG,CAAA;IACpC,OAAO,CAAC,OAAO,CAAC;;;mBAGD,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;;aAMvB,uBAAuB;sBACd,iBAAiB;;0BAEb,mBAAmB;;;;;;;;;;wBAUrB,uBAAuB;cACjC,eAAe,UAAU,mBAAmB;2BAC/B,4BAA4B;qBAClC,kBAAkB;;cAEzB,gBAAgB;;;WAGnB,oBAAoB;qBACV,uBAAuB;;;;;;;;;;;;uBAYrB,kBAAkB;yBAChB,kBAAkB,IAAI,kBAAkB;+BAClC,wBAAwB;;;;2BAI5B,iBAAiB;wBACpB,kBAAkB;;;;;;;;aAQ7B,uBAAuB;qBACf,kBAAkB;kBACrB,0BAA0B;mBACzB,cAAc;mBACd,iBAAiB;iBACnB,eAAe;mBACb,iBAAiB;;;;;;;;;;;;aAYvB,uBAAuB;;;;;;;;aAQvB,uBAAuB;;;;0BAIV,oBAAoB;;;;4BAIlB,oBAAoB;;;;;;;;;;;;;;;;;kBAiB9B,0BAA0B;aAC/B,uBAAuB;;iBAEnB,uBAAuB;;;;;;;;+BAQT,kBAAkB;;;;;6BAKpB,kBAAkB;;;;;kBAK7B,uBAAuB;;;;;;;aAO5B,uBAAuB;kBAClB,8BAA8B;;;;;aAKnC,8BAA8B;;kBAEzB,0BAA0B;;;;;;oBAMxB,wBAAwB;2BACjB,iCAAiC;;;;oBAIxC,0BAA0B;;;;;;;;;;;2BAWnB,cAAc;wBACjB,kBAAkB;;;;2BAIf,+BAA+B;;;;cAI5C,eAAe,UAAU,mBAAmB;;;;;;kBAMxC,0BAA0B;cAC9B,eAAe,UAAU,0BAA0B;;;;;;;aAOpD,8BAA8B;;;;;;iBAM1B,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;cAItB,eAAe;WAClB,oBAAoB;qBACV,uBAAuB;;;;;;;;;cAS9B,eAAe,UAAU,wBAAwB;;;;cAIjD,eAAe,UAAU,wBAAwB;;;;;;kBAM7C,0BAA0B;;;qBAGvB,eAAe,UAAU,4BAA4B;;;;2BAI/C,iCAAiC;;;;2BAIjC,mCAAmC;;;;;2BAKnC,mCAAmC;;;;2BAInC,0BAA0B;;;;;;;cAOvC,eAAe,UAAU,sBAAsB;;;;kBAI3C,uBAAuB;;;;kBAIvB,uBAAuB;;;;;oBAKrB,iCAAiC;;;;;oBAKjC,iCAAiC;kBACnC,uBAAuB;;CAExC,CAAC"}

package/esm/components/spin-button/spin-button.template.js

@@ -0,0 +1,30 @@
+import { html, ref, slotted } from '@microsoft/fast-element';
+import { whitespaceFilter } from '../../util/whitespace-filter.js';
+
+/**
+ * Default increment chevron icon (ChevronUp12Regular from @fluentui/svg-icons).
+ * @internal
+ */
+const incrementIcon = html`<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M2.15 7.35c.2.2.5.2.7 0L6 4.21l3.15 3.14a.5.5 0 1 0 .7-.7l-3.5-3.5a.5.5 0 0 0-.7 0l-3.5 3.5a.5.5 0 0 0 0 .7Z" /></svg>`;
+/**
+ * Default decrement chevron icon (ChevronDown12Regular from @fluentui/svg-icons).
+ * @internal
+ */
+const decrementIcon = html`<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M2.15 4.65c.2-.2.5-.2.7 0L6 7.79l3.15-3.14a.5.5 0 1 1 .7.7l-3.5 3.5a.5.5 0 0 1-.7 0l-3.5-3.5a.5.5 0 0 1 0-.7Z" /></svg>`;
+/**
+ * Generates a template for the SpinButton component.
+ *
+ * @public
+ */
+function spinButtonTemplate() {
+  return html`<template @focusin="${(x, c) => x.focusinHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @keyup="${(x, c) => x.keyupHandler(c.event)}"><label class="label" ${ref("labelEl")}><slot ${slotted({
+    property: "defaultSlottedNodes",
+    filter: whitespaceFilter
+  })}></slot></label><div class="root ${x => x.error ? "error" : ""}"><slot name="start"></slot><input class="control" id="control" type="text" inputmode="decimal" ?disabled="${x => x.disabled}" ?required="${x => x.required}" placeholder="${x => x.placeholder}" @input="${x => x.inputHandler()}" @blur="${x => x.blurHandler()}" ${ref("control")} /><slot name="end"></slot><div class="buttons"><button aria-role="button" class="increment-button ${x => x.spinState === "up" ? "pressed" : ""}" tabindex="-1" type="button" ?disabled="${x => x.disabled}" @mousedown="${(_, c) => c.event.preventDefault()}" @click="${x => x.incrementHandler()}">${incrementIcon}</button><button aria-role="button" class="decrement-button ${x => x.spinState === "down" ? "pressed" : ""}" tabindex="-1" type="button" ?disabled="${x => x.disabled}" @mousedown="${(_, c) => c.event.preventDefault()}" @click="${x => x.decrementHandler()}">${decrementIcon}</button></div></div></template>`;
+}
+/**
+ * @internal
+ */
+const template = spinButtonTemplate();
+
+export { spinButtonTemplate, template };

package/esm/components/spin-button/spin-button.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spin-button.template.js","sourceRoot":"","sources":["../../../../src/components/spin-button/spin-button.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAGnE;;;GAGG;AACH,MAAM,aAAa,GAAG,IAAI,CAAA;;;;;;;;;;;;;CAazB,CAAC;AAEF;;;GAGG;AACH,MAAM,aAAa,GAAG,IAAI,CAAA;;;;;;;;;;;;;CAazB,CAAC;AAEF;;;;GAIG;AACH,MAAM,UAAU,kBAAkB;IAGhC,OAAO,IAAI,CAAG;;kBAEE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAmB,CAAC;kBACjD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;gBACtD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAsB,CAAC;;6BAErC,GAAG,CAAC,SAAS,CAAC;;YAE/B,OAAO,CAAC;QACR,QAAQ,EAAE,qBAAqB;QAC/B,MAAM,EAAE,gBAAgB;KACzB,CAAC;;;yBAGa,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;;;;;;;uBAOjC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;uBACjB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;yBACf,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW;oBACzB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE;mBACxB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE;YAC7B,GAAG,CAAC,SAAS,CAAC;;;;;;sCAMY,CAAC,CAAC,EAAE,EAAE,CAC9B,CAAC,CAAC,SAAS,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;;;yBAG1B,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;0BAChB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,EAAE;sBACtC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,gBAAgB,EAAE;;cAEnC,aAAa;;;;sCAIW,CAAC,CAAC,EAAE,EAAE,CAC9B,CAAC,CAAC,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;;;yBAG5B,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;0BAChB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,EAAE;sBACtC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,gBAAgB,EAAE;;cAEnC,aAAa;;;;;GAKxB,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAoC,kBAAkB,EAAE,CAAC"}

package/esm/components/spinner/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../src/components/spinner/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}

package/esm/components/spinner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/spinner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAExE,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC"}

package/esm/components/spinner/spinner.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.definition.js","sourceRoot":"","sources":["../../../../src/components/spinner/spinner.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC;IACxC,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,UAAU;IACtC,QAAQ,EAAE,eAAe;IACzB,MAAM,EAAE,aAAa;IACrB,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}

package/esm/components/spinner/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../../src/components/spinner/spinner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,OAAO,OAAQ,SAAQ,aAAa;CAAG"}

package/esm/components/spinner/spinner.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.options.js","sourceRoot":"","sources":["../../../../src/components/spinner/spinner.options.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,IAAI,uBAAuB,EAC5C,WAAW,IAAI,iBAAiB,EACjC,MAAM,0BAA0B,CAAC;AAGlC,6CAA6C;AAC7C,MAAM,CAAC,MAAM,kBAAkB,GAAG,EAAE,GAAG,uBAAuB,EAAW,CAAC;AAG1E,uCAAuC;AACvC,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,GAAG,iBAAiB,EAAW,CAAC"}

package/esm/components/styles/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}