first commit

This commit is contained in:
Stefan Hacker
2026-04-03 09:38:48 +02:00
commit 37ad745546
47450 changed files with 3120798 additions and 0 deletions
@@ -0,0 +1,6 @@
import * as React from 'react';
import type { IShimmerProps } from './Shimmer.types';
/**
* {@docCategory Shimmer}
*/
export declare const ShimmerBase: React.FunctionComponent<IShimmerProps>;
+57
View File
@@ -0,0 +1,57 @@
import { __assign } from "tslib";
import * as React from 'react';
import { classNamesFunction, DelayedRender, getNativeProps, divProperties } from '../../Utilities';
import { ShimmerElementsGroup } from './ShimmerElementsGroup/ShimmerElementsGroup';
import { useSetTimeout, useConst } from '@fluentui/react-hooks';
var TRANSITION_ANIMATION_INTERVAL = 200; /* ms */
var COMPONENT_NAME = 'Shimmer';
var getClassNames = classNamesFunction();
/**
* {@docCategory Shimmer}
*/
export var ShimmerBase = React.forwardRef(function (props, ref) {
var styles = props.styles, shimmerElements = props.shimmerElements, children = props.children, width = props.width, className = props.className, customElementsGroup = props.customElementsGroup, theme = props.theme, ariaLabel = props.ariaLabel, shimmerColors = props.shimmerColors, _a = props.isDataLoaded, isDataLoaded = _a === void 0 ? false : _a, improveCSSPerformance = props.improveCSSPerformance;
var divProps = getNativeProps(props, divProperties);
var classNames = getClassNames(styles, {
theme: theme,
isDataLoaded: isDataLoaded,
className: className,
transitionAnimationInterval: TRANSITION_ANIMATION_INTERVAL,
shimmerColor: shimmerColors && shimmerColors.shimmer,
shimmerWaveColor: shimmerColors && shimmerColors.shimmerWave,
improveCSSPerformance: improveCSSPerformance || !customElementsGroup,
});
var internalState = useConst({
lastTimeoutId: 0,
});
var _b = useSetTimeout(), setTimeout = _b.setTimeout, clearTimeout = _b.clearTimeout;
/**
* Flag for knowing when to remove the shimmerWrapper from the DOM.
*/
var _c = React.useState(isDataLoaded), contentLoaded = _c[0], setContentLoaded = _c[1];
var divStyleProp = { width: width ? width : '100%' };
React.useEffect(function () {
if (isDataLoaded !== contentLoaded) {
if (isDataLoaded) {
internalState.lastTimeoutId = setTimeout(function () {
setContentLoaded(true);
}, TRANSITION_ANIMATION_INTERVAL);
return function () { return clearTimeout(internalState.lastTimeoutId); };
}
else {
setContentLoaded(false);
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps -- Should only run when isDataLoaded changes.
}, [isDataLoaded]);
return (React.createElement("div", __assign({}, divProps, { className: classNames.root, ref: ref }),
!contentLoaded && (React.createElement("div", { style: divStyleProp, className: classNames.shimmerWrapper },
React.createElement("div", { className: classNames.shimmerGradient }),
customElementsGroup ? (customElementsGroup) : (React.createElement(ShimmerElementsGroup, { shimmerElements: shimmerElements, backgroundColor: shimmerColors && shimmerColors.background })))),
children && React.createElement("div", { className: classNames.dataWrapper }, children),
ariaLabel && !isDataLoaded && (React.createElement("div", { role: "status", "aria-live": "polite" },
React.createElement(DelayedRender, null,
React.createElement("div", { className: classNames.screenReaderText }, ariaLabel))))));
});
ShimmerBase.displayName = COMPONENT_NAME;
//# sourceMappingURL=Shimmer.base.js.map
File diff suppressed because one or more lines are too long
+3
View File
@@ -0,0 +1,3 @@
import * as React from 'react';
import type { IShimmerProps } from './Shimmer.types';
export declare const Shimmer: React.FunctionComponent<IShimmerProps>;
+7
View File
@@ -0,0 +1,7 @@
import { styled } from '../../Utilities';
import { getStyles } from './Shimmer.styles';
import { ShimmerBase } from './Shimmer.base';
export var Shimmer = styled(ShimmerBase, getStyles, undefined, {
scope: 'Shimmer',
});
//# sourceMappingURL=Shimmer.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"Shimmer.js","sourceRoot":"../src/","sources":["components/Shimmer/Shimmer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,MAAM,CAAC,IAAM,OAAO,GAA2C,MAAM,CAInE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE;IACnC,KAAK,EAAE,SAAS;CACjB,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { getStyles } from './Shimmer.styles';\nimport { ShimmerBase } from './Shimmer.base';\nimport type { IShimmerProps, IShimmerStyleProps, IShimmerStyles } from './Shimmer.types';\n\nexport const Shimmer: React.FunctionComponent<IShimmerProps> = styled<\n IShimmerProps,\n IShimmerStyleProps,\n IShimmerStyles\n>(ShimmerBase, getStyles, undefined, {\n scope: 'Shimmer',\n});\n"]}
@@ -0,0 +1,2 @@
import type { IShimmerStyleProps, IShimmerStyles } from './Shimmer.types';
export declare function getStyles(props: IShimmerStyleProps): IShimmerStyles;
+122
View File
@@ -0,0 +1,122 @@
import { __assign } from "tslib";
import { keyframes, getGlobalClassNames, hiddenContentStyle, HighContrastSelector, getHighContrastNoAdjustStyle, } from '../../Styling';
import { getRTL, memoizeFunction } from '../../Utilities';
var GlobalClassNames = {
root: 'ms-Shimmer-container',
shimmerWrapper: 'ms-Shimmer-shimmerWrapper',
shimmerGradient: 'ms-Shimmer-shimmerGradient',
dataWrapper: 'ms-Shimmer-dataWrapper',
};
var BACKGROUND_OFF_SCREEN_POSITION = '100%';
var shimmerAnimation = memoizeFunction(function () {
return keyframes({
'0%': {
transform: "translateX(-".concat(BACKGROUND_OFF_SCREEN_POSITION, ")"),
},
'100%': {
transform: "translateX(".concat(BACKGROUND_OFF_SCREEN_POSITION, ")"),
},
});
});
var shimmerAnimationRTL = memoizeFunction(function () {
return keyframes({
'100%': {
transform: "translateX(-".concat(BACKGROUND_OFF_SCREEN_POSITION, ")"),
},
'0%': {
transform: "translateX(".concat(BACKGROUND_OFF_SCREEN_POSITION, ")"),
},
});
});
export function getStyles(props) {
var _a;
var isDataLoaded = props.isDataLoaded, className = props.className, theme = props.theme, transitionAnimationInterval = props.transitionAnimationInterval, shimmerColor = props.shimmerColor, shimmerWaveColor = props.shimmerWaveColor, improveCSSPerformance = props.improveCSSPerformance;
var semanticColors = theme.semanticColors;
var classNames = getGlobalClassNames(GlobalClassNames, theme);
var isRTL = getRTL(theme);
return {
root: [
classNames.root,
theme.fonts.medium,
{
position: 'relative',
height: 'auto',
},
className,
],
shimmerWrapper: [
classNames.shimmerWrapper,
{
position: 'relative',
overflow: 'hidden',
transform: 'translateZ(0)',
backgroundColor: shimmerColor || semanticColors.disabledBackground,
transition: "opacity ".concat(transitionAnimationInterval, "ms"),
selectors: (_a = {},
_a[HighContrastSelector] = __assign({ background: "WindowText\n linear-gradient(\n to right,\n transparent 0%,\n Window 50%,\n transparent 100%)\n 0 0 / 90% 100%\n no-repeat" }, getHighContrastNoAdjustStyle()),
_a),
},
isDataLoaded && {
opacity: '0',
position: 'absolute',
top: '0',
bottom: '0',
left: '0',
right: '0',
},
improveCSSPerformance
? {
selectors: {
'> div:last-child': {
transform: 'translateZ(0)',
},
},
}
: {
selectors: {
'> *': {
transform: 'translateZ(0)',
},
},
},
],
shimmerGradient: [
classNames.shimmerGradient,
{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
background: "".concat(shimmerColor || semanticColors.disabledBackground, "\n linear-gradient(\n to right,\n ").concat(shimmerColor || semanticColors.disabledBackground, " 0%,\n ").concat(shimmerWaveColor || semanticColors.bodyDivider, " 50%,\n ").concat(shimmerColor || semanticColors.disabledBackground, " 100%)\n 0 0 / 90% 100%\n no-repeat"),
transform: "translateX(-".concat(BACKGROUND_OFF_SCREEN_POSITION, ")"),
animationDuration: '2s',
animationTimingFunction: 'ease-in-out',
animationDirection: 'normal',
animationIterationCount: 'infinite',
animationName: isRTL ? shimmerAnimationRTL() : shimmerAnimation(),
},
],
dataWrapper: [
classNames.dataWrapper,
{
position: 'absolute',
top: '0',
bottom: '0',
left: '0',
right: '0',
opacity: '0',
background: 'none',
backgroundColor: 'transparent',
border: 'none',
transition: "opacity ".concat(transitionAnimationInterval, "ms"),
},
isDataLoaded && {
opacity: '1',
position: 'static',
},
],
screenReaderText: hiddenContentStyle,
};
}
//# sourceMappingURL=Shimmer.styles.js.map
File diff suppressed because one or more lines are too long
+216
View File
@@ -0,0 +1,216 @@
import * as React from 'react';
import type { IStyle, ITheme } from '../../Styling';
import type { IStyleFunctionOrObject } from '../../Utilities';
/**
* Shimmer component props.
* {@docCategory Shimmer}
*/
export interface IShimmerProps extends React.AllHTMLAttributes<HTMLElement>, React.RefAttributes<HTMLElement> {
/**
* Sets the width value of the shimmer wave wrapper.
* @defaultvalue 100%
*/
width?: number | string;
/**
* Controls when the shimmer is swapped with actual data through an animated transition.
* @defaultvalue false
*/
isDataLoaded?: boolean;
/**
* Elements to render in one line of the Shimmer.
*/
shimmerElements?: IShimmerElement[];
/**
* Custom elements when necessary to build complex placeholder skeletons.
*/
customElementsGroup?: React.ReactNode;
/**
* Localized string of the status label for screen reader
*/
ariaLabel?: string;
/**
* Call to provide customized styling that will layer on top of the variant rules.
*/
styles?: IStyleFunctionOrObject<IShimmerStyleProps, IShimmerStyles>;
/**
* Additional CSS class(es) to apply to the Shimmer container.
*/
className?: string;
/**
* Theme provided by High-Order Component.
*/
theme?: ITheme;
/**
* Defines an object with possible colors to pass for Shimmer customization used on different backgrounds.
*/
shimmerColors?: IShimmerColors;
/**
* Only use if `customElementsGroup` has a single parent `div`. If a custom element is not provided, defaults to true.
*/
improveCSSPerformance?: boolean;
}
/**
* Shimmer Elements Interface representing all common properties between Gap, Circle and Line.
* {@docCategory Shimmer}
*/
export interface IShimmerElement {
/**
* Represents the possible type of the shimmer elements: Gap, Circle, Line.
* Required for every element you intend to use.
*/
type: ShimmerElementType;
/**
* Sets the height of the element (ICircle, ILine, IGap) in pixels.
* Read more details for each specific element.
*/
height?: number;
/**
* Sets the width value of the element (ILine, IGap) in pixels.
* Read more details for each specific element.
*/
width?: number | string;
/**
* Sets vertical alignment of the element (ICircle, ILine).
* @defaultvalue center
*/
verticalAlign?: 'top' | 'center' | 'bottom';
}
/**
* Line element interface
* {@docCategory Shimmer}
*/
export interface ILine extends IShimmerElement {
/**
* Sets the height of the shimmer line in pixels.
* @defaultvalue 16px
*/
height?: number;
/**
* Line width value.
* @defaultvalue 100%
*/
width?: number | string;
}
/**
* Circle element interface
* {@docCategory Shimmer}
*/
export interface ICircle extends IShimmerElement {
/**
* Sets the height of the shimmer circle in pixels.
* Minimum supported 10px.
* @defaultvalue 24px
*/
height?: number;
}
/**
* Gap element interface
* {@docCategory Shimmer}
*/
export interface IGap extends IShimmerElement {
/**
* Sets the height of the shimmer gap in pixels.
* @defaultvalue 16px
*/
height?: number;
/**
* Gap width value.
* @defaultvalue 10px
*/
width?: number | string;
}
/**
* Defines props needed to construct styles.
* This represents the simplified set of immutable things which control the class names.
* {@docCategory Shimmer}
*/
export interface IShimmerStyleProps {
/** Boolean flag to trigger fadeIn/fadeOut transition animation when content is loaded. */
isDataLoaded?: boolean;
/** Optional CSS class name for the component attached to the root stylable area. */
className?: string;
/** Theme provided by High-Order Component. */
theme: ITheme;
/** Interval in milliseconds for the adeIn/fadeOut transition animation. */
transitionAnimationInterval?: number;
/** Color to be used as the main background color of Shimmer when not animating. */
shimmerColor?: string;
/** Tip color of the shimmer wave which gradually gets from and to `shimmerColor`. */
shimmerWaveColor?: string;
/** Boolean flag to apply a more efficient CSS selector */
improveCSSPerformance?: boolean;
}
/**
* Represents the stylable areas of the control.
* {@docCategory Shimmer}
*/
export interface IShimmerStyles {
/** Refers to the root wrapper element. */
root?: IStyle;
/** Refers to wrapper element of the shimmer only. */
shimmerWrapper?: IStyle;
/** Refers to gradient element of the shimmer animation only. */
shimmerGradient?: IStyle;
/** Refers to wrapper element of the children only. */
dataWrapper?: IStyle;
/** Styles for the hidden helper element to aid with screen readers. */
screenReaderText?: IStyle;
}
/**
* Describes the possible types for shimmer elements used.
* {@docCategory Shimmer}
*/
export declare enum ShimmerElementType {
/**
* Line element type
*/
line = 1,
/**
* Circle element type
*/
circle = 2,
/**
* Gap element type
*/
gap = 3
}
/**
* Describes the default heights for shimmer elements when omitted in implementation.
* {@docCategory Shimmer}
*/
export declare enum ShimmerElementsDefaultHeights {
/**
* Default height of the line element when not provided by user: 16px
*/
line = 16,
/**
* Default height of the gap element when not provided by user: 16px
*/
gap = 16,
/**
* Default height of the circle element when not provided by user: 24px
*/
circle = 24
}
/**
* Interface describing the possible color customizations of Shimmer.
* {@docCategory Shimmer}
*/
export interface IShimmerColors {
/**
* Defines the main background color which is the color you see when the wave is not animating.
* @defaultvalue theme.palette.neutralLight
*/
shimmer?: string;
/**
* Defines the tip color of the shimmer wave which gradually gets from and to `shimmer` color.
* @defaultvalue theme.palette.neutralLighter
*/
shimmerWave?: string;
/**
* Defines the background color of the space in between and around shimmer elements (borders, gaps and
* rounded corners).
* @defaultvalue theme.palette.white
*/
background?: string;
}
+39
View File
@@ -0,0 +1,39 @@
/**
* Describes the possible types for shimmer elements used.
* {@docCategory Shimmer}
*/
export var ShimmerElementType;
(function (ShimmerElementType) {
/**
* Line element type
*/
ShimmerElementType[ShimmerElementType["line"] = 1] = "line";
/**
* Circle element type
*/
ShimmerElementType[ShimmerElementType["circle"] = 2] = "circle";
/**
* Gap element type
*/
ShimmerElementType[ShimmerElementType["gap"] = 3] = "gap";
})(ShimmerElementType || (ShimmerElementType = {}));
/**
* Describes the default heights for shimmer elements when omitted in implementation.
* {@docCategory Shimmer}
*/
export var ShimmerElementsDefaultHeights;
(function (ShimmerElementsDefaultHeights) {
/**
* Default height of the line element when not provided by user: 16px
*/
ShimmerElementsDefaultHeights[ShimmerElementsDefaultHeights["line"] = 16] = "line";
/**
* Default height of the gap element when not provided by user: 16px
*/
ShimmerElementsDefaultHeights[ShimmerElementsDefaultHeights["gap"] = 16] = "gap";
/**
* Default height of the circle element when not provided by user: 24px
*/
ShimmerElementsDefaultHeights[ShimmerElementsDefaultHeights["circle"] = 24] = "circle";
})(ShimmerElementsDefaultHeights || (ShimmerElementsDefaultHeights = {}));
//# sourceMappingURL=Shimmer.types.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
import * as React from 'react';
import type { IShimmerCircleProps } from './ShimmerCircle.types';
export declare const ShimmerCircleBase: React.FunctionComponent<IShimmerCircleProps>;
@@ -0,0 +1,16 @@
import * as React from 'react';
import { classNamesFunction } from '../../../Utilities';
var getClassNames = classNamesFunction();
export var ShimmerCircleBase = function (props) {
// eslint-disable-next-line @typescript-eslint/no-deprecated
var height = props.height, styles = props.styles, borderStyle = props.borderStyle, theme = props.theme;
var classNames = getClassNames(styles, {
theme: theme,
height: height,
borderStyle: borderStyle,
});
return (React.createElement("div", { className: classNames.root },
React.createElement("svg", { viewBox: "0 0 10 10", width: height, height: height, className: classNames.svg },
React.createElement("path", { d: "M0,0 L10,0 L10,10 L0,10 L0,0 Z M0,5 C0,7.76142375 2.23857625,10 5,10 C7.76142375,10 10,7.76142375 10,5 C10,2.23857625 7.76142375,2.22044605e-16 5,0 C2.23857625,-2.22044605e-16 0,2.23857625 0,5 L0,5 Z" }))));
};
//# sourceMappingURL=ShimmerCircle.base.js.map
@@ -0,0 +1 @@
{"version":3,"file":"ShimmerCircle.base.js","sourceRoot":"../src/","sources":["components/Shimmer/ShimmerCircle/ShimmerCircle.base.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAGxD,IAAM,aAAa,GAAG,kBAAkB,EAAkD,CAAC;AAE3F,MAAM,CAAC,IAAM,iBAAiB,GAAiD,UAAA,KAAK;IAClF,4DAA4D;IACpD,IAAA,MAAM,GAAiC,KAAK,OAAtC,EAAE,MAAM,GAAyB,KAAK,OAA9B,EAAE,WAAW,GAAY,KAAK,YAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;IACrD,IAAM,UAAU,GAAG,aAAa,CAAC,MAAO,EAAE;QACxC,KAAK,EAAE,KAAM;QACb,MAAM,QAAA;QACN,WAAW,aAAA;KACZ,CAAC,CAAC;IAEH,OAAO,CACL,6BAAK,SAAS,EAAE,UAAU,CAAC,IAAI;QAC7B,6BAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,CAAC,GAAG;YAC/E,8BAAM,CAAC,EAAC,yMAAyM,GAAG,CAChN,CACF,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction } from '../../../Utilities';\nimport type { IShimmerCircleProps, IShimmerCircleStyleProps, IShimmerCircleStyles } from './ShimmerCircle.types';\n\nconst getClassNames = classNamesFunction<IShimmerCircleStyleProps, IShimmerCircleStyles>();\n\nexport const ShimmerCircleBase: React.FunctionComponent<IShimmerCircleProps> = props => {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n const { height, styles, borderStyle, theme } = props;\n const classNames = getClassNames(styles!, {\n theme: theme!,\n height,\n borderStyle,\n });\n\n return (\n <div className={classNames.root}>\n <svg viewBox=\"0 0 10 10\" width={height} height={height} className={classNames.svg}>\n <path d=\"M0,0 L10,0 L10,10 L0,10 L0,0 Z M0,5 C0,7.76142375 2.23857625,10 5,10 C7.76142375,10 10,7.76142375 10,5 C10,2.23857625 7.76142375,2.22044605e-16 5,0 C2.23857625,-2.22044605e-16 0,2.23857625 0,5 L0,5 Z\" />\n </svg>\n </div>\n );\n};\n"]}
@@ -0,0 +1,3 @@
import * as React from 'react';
import type { IShimmerCircleProps } from './ShimmerCircle.types';
export declare const ShimmerCircle: React.FunctionComponent<IShimmerCircleProps>;
@@ -0,0 +1,5 @@
import { styled } from '../../../Utilities';
import { getStyles } from './ShimmerCircle.styles';
import { ShimmerCircleBase } from './ShimmerCircle.base';
export var ShimmerCircle = styled(ShimmerCircleBase, getStyles, undefined, { scope: 'ShimmerCircle' });
//# sourceMappingURL=ShimmerCircle.js.map
@@ -0,0 +1 @@
{"version":3,"file":"ShimmerCircle.js","sourceRoot":"../src/","sources":["components/Shimmer/ShimmerCircle/ShimmerCircle.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAGzD,MAAM,CAAC,IAAM,aAAa,GAAiD,MAAM,CAI/E,iBAAiB,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,eAAe,EAAE,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '../../../Utilities';\nimport { getStyles } from './ShimmerCircle.styles';\nimport { ShimmerCircleBase } from './ShimmerCircle.base';\nimport type { IShimmerCircleProps, IShimmerCircleStyleProps, IShimmerCircleStyles } from './ShimmerCircle.types';\n\nexport const ShimmerCircle: React.FunctionComponent<IShimmerCircleProps> = styled<\n IShimmerCircleProps,\n IShimmerCircleStyleProps,\n IShimmerCircleStyles\n>(ShimmerCircleBase, getStyles, undefined, { scope: 'ShimmerCircle' });\n"]}
@@ -0,0 +1,2 @@
import type { IShimmerCircleStyleProps, IShimmerCircleStyles } from './ShimmerCircle.types';
export declare function getStyles(props: IShimmerCircleStyleProps): IShimmerCircleStyles;
@@ -0,0 +1,47 @@
import { getGlobalClassNames, HighContrastSelector } from '../../../Styling';
var GlobalClassNames = {
root: 'ms-ShimmerCircle-root',
svg: 'ms-ShimmerCircle-svg',
};
export function getStyles(props) {
var _a, _b;
// eslint-disable-next-line @typescript-eslint/no-deprecated
var height = props.height, borderStyle = props.borderStyle, theme = props.theme;
var semanticColors = theme.semanticColors;
var globalClassNames = getGlobalClassNames(GlobalClassNames, theme);
var borderStyles = borderStyle || {};
return {
root: [
globalClassNames.root,
theme.fonts.medium,
{
width: "".concat(height, "px"),
height: "".concat(height, "px"),
minWidth: "".concat(height, "px"), // Fix for IE11 flex items
boxSizing: 'content-box',
borderTopStyle: 'solid',
borderBottomStyle: 'solid',
borderColor: semanticColors.bodyBackground,
selectors: (_a = {},
_a[HighContrastSelector] = {
borderColor: 'Window',
},
_a),
},
borderStyles,
],
svg: [
globalClassNames.svg,
{
display: 'block',
fill: semanticColors.bodyBackground,
selectors: (_b = {},
_b[HighContrastSelector] = {
fill: 'Window',
},
_b),
},
],
};
}
//# sourceMappingURL=ShimmerCircle.styles.js.map
@@ -0,0 +1 @@
{"version":3,"file":"ShimmerCircle.styles.js","sourceRoot":"../src/","sources":["components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAI7E,IAAM,gBAAgB,GAAG;IACvB,IAAI,EAAE,uBAAuB;IAC7B,GAAG,EAAE,sBAAsB;CAC5B,CAAC;AAEF,MAAM,UAAU,SAAS,CAAC,KAA+B;;IACvD,4DAA4D;IACpD,IAAA,MAAM,GAAyB,KAAK,OAA9B,EAAE,WAAW,GAAY,KAAK,YAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;IAErC,IAAA,cAAc,GAAK,KAAK,eAAV,CAAW;IACjC,IAAM,gBAAgB,GAAG,mBAAmB,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;IAEtE,IAAM,YAAY,GAAc,WAAW,IAAI,EAAE,CAAC;IAElD,OAAO;QACL,IAAI,EAAE;YACJ,gBAAgB,CAAC,IAAI;YACrB,KAAK,CAAC,KAAK,CAAC,MAAM;YAClB;gBACE,KAAK,EAAE,UAAG,MAAM,OAAI;gBACpB,MAAM,EAAE,UAAG,MAAM,OAAI;gBACrB,QAAQ,EAAE,UAAG,MAAM,OAAI,EAAE,0BAA0B;gBACnD,SAAS,EAAE,aAAa;gBACxB,cAAc,EAAE,OAAO;gBACvB,iBAAiB,EAAE,OAAO;gBAC1B,WAAW,EAAE,cAAc,CAAC,cAAc;gBAC1C,SAAS;oBACP,GAAC,oBAAoB,IAAG;wBACtB,WAAW,EAAE,QAAQ;qBACtB;uBACF;aACF;YACD,YAAY;SACb;QACD,GAAG,EAAE;YACH,gBAAgB,CAAC,GAAG;YACpB;gBACE,OAAO,EAAE,OAAO;gBAChB,IAAI,EAAE,cAAc,CAAC,cAAc;gBACnC,SAAS;oBACP,GAAC,oBAAoB,IAAG;wBACtB,IAAI,EAAE,QAAQ;qBACf;uBACF;aACF;SACF;KACF,CAAC;AACJ,CAAC","sourcesContent":["import { getGlobalClassNames, HighContrastSelector } from '../../../Styling';\nimport type { IShimmerCircleStyleProps, IShimmerCircleStyles } from './ShimmerCircle.types';\nimport type { IRawStyle } from '../../../Styling';\n\nconst GlobalClassNames = {\n root: 'ms-ShimmerCircle-root',\n svg: 'ms-ShimmerCircle-svg',\n};\n\nexport function getStyles(props: IShimmerCircleStyleProps): IShimmerCircleStyles {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n const { height, borderStyle, theme } = props;\n\n const { semanticColors } = theme;\n const globalClassNames = getGlobalClassNames(GlobalClassNames, theme);\n\n const borderStyles: IRawStyle = borderStyle || {};\n\n return {\n root: [\n globalClassNames.root,\n theme.fonts.medium,\n {\n width: `${height}px`,\n height: `${height}px`,\n minWidth: `${height}px`, // Fix for IE11 flex items\n boxSizing: 'content-box',\n borderTopStyle: 'solid',\n borderBottomStyle: 'solid',\n borderColor: semanticColors.bodyBackground,\n selectors: {\n [HighContrastSelector]: {\n borderColor: 'Window',\n },\n },\n },\n borderStyles,\n ],\n svg: [\n globalClassNames.svg,\n {\n display: 'block',\n fill: semanticColors.bodyBackground,\n selectors: {\n [HighContrastSelector]: {\n fill: 'Window',\n },\n },\n },\n ],\n };\n}\n"]}
@@ -0,0 +1,70 @@
import * as React from 'react';
import type { IStyle, ITheme, IRawStyle } from '../../../Styling';
import type { IStyleFunctionOrObject, IRefObject } from '../../../Utilities';
/**
* {@docCategory Shimmer}
*/
export interface IShimmerCircle {
}
/**
* ShimmerCircle component props.
* {@docCategory Shimmer}
*/
export interface IShimmerCircleProps extends React.AllHTMLAttributes<HTMLElement> {
/**
* Optional callback to access the IShimmerCircle interface. Use this instead of ref for accessing
* the public methods and properties of the component.
*/
componentRef?: IRefObject<IShimmerCircle>;
/**
* Sets the height of the circle.
* @defaultvalue 24px
*/
height?: number;
/**
* Theme provided by High-Order Component.
*/
theme?: ITheme;
/**
* Call to provide customized styling that will layer on top of the variant rules.
*/
styles?: IStyleFunctionOrObject<IShimmerCircleStyleProps, IShimmerCircleStyles>;
/**
* Use to set custom styling of the shimmerCircle borders.
* @deprecated Use `styles.root` instead.
*/
borderStyle?: IRawStyle;
}
/**
* Props needed to construct styles.
* {@docCategory Shimmer}
*/
export type IShimmerCircleStyleProps = {
/**
* Theme values passed to the component.
*/
theme: ITheme;
/**
* Needed to provide a height to the root of the control.
*/
height?: number;
/**
* Styles to override borderStyles with custom ones.
* @deprecated Deprecated in favor of mergeStyles API.
*/
borderStyle?: IRawStyle;
};
/**
* Represents the stylable areas of the control.
* {@docCategory Shimmer}
*/
export interface IShimmerCircleStyles {
/**
* Root of the ShimmerCircle component.
*/
root?: IStyle;
/**
* Style for the circle SVG of the ShimmerCircle component.
*/
svg?: IStyle;
}
@@ -0,0 +1,2 @@
export {};
//# sourceMappingURL=ShimmerCircle.types.js.map
@@ -0,0 +1 @@
{"version":3,"file":"ShimmerCircle.types.js","sourceRoot":"../src/","sources":["components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { IStyle, ITheme, IRawStyle } from '../../../Styling';\nimport type { IStyleFunctionOrObject, IRefObject } from '../../../Utilities';\n\n/**\n * {@docCategory Shimmer}\n */\nexport interface IShimmerCircle {}\n\n/**\n * ShimmerCircle component props.\n * {@docCategory Shimmer}\n */\nexport interface IShimmerCircleProps extends React.AllHTMLAttributes<HTMLElement> {\n /**\n * Optional callback to access the IShimmerCircle interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n */\n componentRef?: IRefObject<IShimmerCircle>;\n\n /**\n * Sets the height of the circle.\n * @defaultvalue 24px\n */\n height?: number;\n\n /**\n * Theme provided by High-Order Component.\n */\n theme?: ITheme;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: IStyleFunctionOrObject<IShimmerCircleStyleProps, IShimmerCircleStyles>;\n\n /**\n * Use to set custom styling of the shimmerCircle borders.\n * @deprecated Use `styles.root` instead.\n */\n borderStyle?: IRawStyle;\n}\n\n/**\n * Props needed to construct styles.\n * {@docCategory Shimmer}\n */\nexport type IShimmerCircleStyleProps = {\n /**\n * Theme values passed to the component.\n */\n theme: ITheme;\n\n /**\n * Needed to provide a height to the root of the control.\n */\n height?: number;\n\n /**\n * Styles to override borderStyles with custom ones.\n * @deprecated Deprecated in favor of mergeStyles API.\n */\n borderStyle?: IRawStyle;\n};\n\n/**\n * Represents the stylable areas of the control.\n * {@docCategory Shimmer}\n */\nexport interface IShimmerCircleStyles {\n /**\n * Root of the ShimmerCircle component.\n */\n root?: IStyle;\n\n /**\n * Style for the circle SVG of the ShimmerCircle component.\n */\n svg?: IStyle;\n}\n"]}
@@ -0,0 +1,6 @@
import * as React from 'react';
import type { IShimmerElementsGroupProps } from './ShimmerElementsGroup.types';
/**
* {@docCategory Shimmer}
*/
export declare const ShimmerElementsGroupBase: React.FunctionComponent<IShimmerElementsGroupProps>;
@@ -0,0 +1,115 @@
import { __assign, __rest } from "tslib";
import * as React from 'react';
import { classNamesFunction, memoizeFunction } from '../../../Utilities';
import { ShimmerElementType, ShimmerElementsDefaultHeights } from '../Shimmer.types';
import { ShimmerLine } from '../ShimmerLine/ShimmerLine';
import { ShimmerGap } from '../ShimmerGap/ShimmerGap';
import { ShimmerCircle } from '../ShimmerCircle/ShimmerCircle';
var getClassNames = classNamesFunction();
/**
* {@docCategory Shimmer}
*/
export var ShimmerElementsGroupBase = function (props) {
var styles = props.styles, _a = props.width, width = _a === void 0 ? 'auto' : _a, shimmerElements = props.shimmerElements, _b = props.rowHeight, rowHeight = _b === void 0 ? findMaxElementHeight(shimmerElements || []) : _b, _c = props.flexWrap, flexWrap = _c === void 0 ? false : _c, theme = props.theme, backgroundColor = props.backgroundColor;
var classNames = getClassNames(styles, {
theme: theme,
flexWrap: flexWrap,
});
return (React.createElement("div", { style: { width: width }, className: classNames.root }, getRenderedElements(shimmerElements, backgroundColor, rowHeight)));
};
function getRenderedElements(shimmerElements, backgroundColor, rowHeight) {
var renderedElements = shimmerElements ? (shimmerElements.map(
// false positive
// eslint-disable-next-line array-callback-return
function (element, index) {
var type = element.type, filteredElem = __rest(element, ["type"]);
var verticalAlign = filteredElem.verticalAlign, height = filteredElem.height;
var styles = getElementStyles(verticalAlign, type, height, backgroundColor, rowHeight);
switch (element.type) {
case ShimmerElementType.circle:
return React.createElement(ShimmerCircle, __assign({ key: index }, filteredElem, { styles: styles }));
case ShimmerElementType.gap:
return React.createElement(ShimmerGap, __assign({ key: index }, filteredElem, { styles: styles }));
case ShimmerElementType.line:
return React.createElement(ShimmerLine, __assign({ key: index }, filteredElem, { styles: styles }));
}
})) : (React.createElement(ShimmerLine, { height: ShimmerElementsDefaultHeights.line }));
return renderedElements;
}
var getElementStyles = memoizeFunction(function (verticalAlign, elementType, elementHeight, backgroundColor, rowHeight) {
var dif = rowHeight && elementHeight ? rowHeight - elementHeight : 0;
var borderStyle;
if (!verticalAlign || verticalAlign === 'center') {
borderStyle = {
borderBottomWidth: "".concat(dif ? Math.floor(dif / 2) : 0, "px"),
borderTopWidth: "".concat(dif ? Math.ceil(dif / 2) : 0, "px"),
};
}
else if (verticalAlign && verticalAlign === 'top') {
borderStyle = {
borderBottomWidth: "".concat(dif, "px"),
borderTopWidth: "0px",
};
}
else if (verticalAlign && verticalAlign === 'bottom') {
borderStyle = {
borderBottomWidth: "0px",
borderTopWidth: "".concat(dif, "px"),
};
}
if (backgroundColor) {
switch (elementType) {
case ShimmerElementType.circle:
return {
root: __assign(__assign({}, borderStyle), { borderColor: backgroundColor }),
svg: { fill: backgroundColor },
};
case ShimmerElementType.gap:
return {
root: __assign(__assign({}, borderStyle), { borderColor: backgroundColor, backgroundColor: backgroundColor }),
};
case ShimmerElementType.line:
return {
root: __assign(__assign({}, borderStyle), { borderColor: backgroundColor }),
topLeftCorner: { fill: backgroundColor },
topRightCorner: { fill: backgroundColor },
bottomLeftCorner: { fill: backgroundColor },
bottomRightCorner: { fill: backgroundColor },
};
}
}
return {
root: borderStyle,
};
});
/**
* User should not worry to provide which of the elements is the highest so we do the calculation for him.
* Plus if user forgot to specify the height we assign their defaults.
*/
function findMaxElementHeight(shimmerElements) {
var shimmerElementsDefaulted = shimmerElements.map(function (element) {
switch (element.type) {
case ShimmerElementType.circle:
if (!element.height) {
element.height = ShimmerElementsDefaultHeights.circle;
}
break;
case ShimmerElementType.line:
if (!element.height) {
element.height = ShimmerElementsDefaultHeights.line;
}
break;
case ShimmerElementType.gap:
if (!element.height) {
element.height = ShimmerElementsDefaultHeights.gap;
}
break;
}
return element;
});
var rowHeight = shimmerElementsDefaulted.reduce(function (acc, next) {
return next.height ? (next.height > acc ? next.height : acc) : acc;
}, 0);
return rowHeight;
}
//# sourceMappingURL=ShimmerElementsGroup.base.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
import * as React from 'react';
import type { IShimmerElementsGroupProps } from './ShimmerElementsGroup.types';
export declare const ShimmerElementsGroup: React.FunctionComponent<IShimmerElementsGroupProps>;
@@ -0,0 +1,5 @@
import { styled } from '../../../Utilities';
import { ShimmerElementsGroupBase } from './ShimmerElementsGroup.base';
import { getStyles } from './ShimmerElementsGroup.styles';
export var ShimmerElementsGroup = styled(ShimmerElementsGroupBase, getStyles, undefined, { scope: 'ShimmerElementsGroup' });
//# sourceMappingURL=ShimmerElementsGroup.js.map
@@ -0,0 +1 @@
{"version":3,"file":"ShimmerElementsGroup.js","sourceRoot":"../src/","sources":["components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAO1D,MAAM,CAAC,IAAM,oBAAoB,GAAwD,MAAM,CAI7F,wBAAwB,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,sBAAsB,EAAE,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '../../../Utilities';\nimport { ShimmerElementsGroupBase } from './ShimmerElementsGroup.base';\nimport { getStyles } from './ShimmerElementsGroup.styles';\nimport type {\n IShimmerElementsGroupProps,\n IShimmerElementsGroupStyleProps,\n IShimmerElementsGroupStyles,\n} from './ShimmerElementsGroup.types';\n\nexport const ShimmerElementsGroup: React.FunctionComponent<IShimmerElementsGroupProps> = styled<\n IShimmerElementsGroupProps,\n IShimmerElementsGroupStyleProps,\n IShimmerElementsGroupStyles\n>(ShimmerElementsGroupBase, getStyles, undefined, { scope: 'ShimmerElementsGroup' });\n"]}
@@ -0,0 +1,2 @@
import type { IShimmerElementsGroupStyleProps, IShimmerElementsGroupStyles } from './ShimmerElementsGroup.types';
export declare function getStyles(props: IShimmerElementsGroupStyleProps): IShimmerElementsGroupStyles;
@@ -0,0 +1,21 @@
import { getGlobalClassNames } from '../../../Styling';
var GlobalClassNames = {
root: 'ms-ShimmerElementsGroup-root',
};
export function getStyles(props) {
var flexWrap = props.flexWrap, theme = props.theme;
var classNames = getGlobalClassNames(GlobalClassNames, theme);
return {
root: [
classNames.root,
theme.fonts.medium,
{
display: 'flex',
alignItems: 'center',
flexWrap: flexWrap ? 'wrap' : 'nowrap',
position: 'relative',
},
],
};
}
//# sourceMappingURL=ShimmerElementsGroup.styles.js.map
@@ -0,0 +1 @@
{"version":3,"file":"ShimmerElementsGroup.styles.js","sourceRoot":"../src/","sources":["components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAGvD,IAAM,gBAAgB,GAAG;IACvB,IAAI,EAAE,8BAA8B;CACrC,CAAC;AAEF,MAAM,UAAU,SAAS,CAAC,KAAsC;IACtD,IAAA,QAAQ,GAAY,KAAK,SAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;IAElC,IAAM,UAAU,GAAG,mBAAmB,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;IAEhE,OAAO;QACL,IAAI,EAAE;YACJ,UAAU,CAAC,IAAI;YACf,KAAK,CAAC,KAAK,CAAC,MAAM;YAClB;gBACE,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;gBACpB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;gBACtC,QAAQ,EAAE,UAAU;aACrB;SACF;KACF,CAAC;AACJ,CAAC","sourcesContent":["import { getGlobalClassNames } from '../../../Styling';\nimport type { IShimmerElementsGroupStyleProps, IShimmerElementsGroupStyles } from './ShimmerElementsGroup.types';\n\nconst GlobalClassNames = {\n root: 'ms-ShimmerElementsGroup-root',\n};\n\nexport function getStyles(props: IShimmerElementsGroupStyleProps): IShimmerElementsGroupStyles {\n const { flexWrap, theme } = props;\n\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n return {\n root: [\n classNames.root,\n theme.fonts.medium,\n {\n display: 'flex',\n alignItems: 'center',\n flexWrap: flexWrap ? 'wrap' : 'nowrap',\n position: 'relative',\n },\n ],\n };\n}\n"]}
@@ -0,0 +1,72 @@
import * as React from 'react';
import type { IStyle, ITheme } from '../../../Styling';
import type { IRefObject, IStyleFunctionOrObject } from '../../../Utilities';
import type { IShimmerElement } from '../Shimmer.types';
/**
* {@docCategory Shimmer}
*/
export interface IShimmerElementsGroup {
}
/**
* ShimmerElementsGroup component props.
* {@docCategory Shimmer}
*/
export interface IShimmerElementsGroupProps extends React.AllHTMLAttributes<HTMLElement> {
/**
* Optional callback to access the IShimmerElementsGroup interface. Use this instead of ref for accessing
* the public methods and properties of the component.
*/
componentRef?: IRefObject<IShimmerElementsGroup>;
/**
* Optional maximum row height of the shimmerElements container.
*/
rowHeight?: number;
/**
* Elements to render in one group of the Shimmer.
*/
shimmerElements?: IShimmerElement[];
/**
* Optional boolean for enabling flexWrap of the container containing the shimmerElements.
* @defaultvalue false
*/
flexWrap?: boolean;
/**
* Optional width for ShimmerElements container.
*/
width?: string;
/**
* Theme provided by High-Order Component.
*/
theme?: ITheme;
/**
* Defines the background color of the space in between and around shimmer elements.
* @defaultvalue theme.palette.white
*/
backgroundColor?: string;
/**
* Call to provide customized styling that will layer on top of the variant rules.
*/
styles?: IStyleFunctionOrObject<IShimmerElementsGroupStyleProps, IShimmerElementsGroupStyles>;
}
/**
* Props needed to construct styles.
* {@docCategory Shimmer}
*/
export interface IShimmerElementsGroupStyleProps {
/**
* Boolean flag to notify whether the root element needs to flex wrap.
*/
flexWrap?: boolean;
/** Theme provided by High-Order Component. */
theme: ITheme;
}
/**
* Represents the stylable areas of the control.
* {@docCategory Shimmer}
*/
export interface IShimmerElementsGroupStyles {
/**
* Represents the wrapper root element holding all elements inside.
*/
root?: IStyle;
}
@@ -0,0 +1,2 @@
export {};
//# sourceMappingURL=ShimmerElementsGroup.types.js.map
@@ -0,0 +1 @@
{"version":3,"file":"ShimmerElementsGroup.types.js","sourceRoot":"../src/","sources":["components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { IStyle, ITheme } from '../../../Styling';\nimport type { IRefObject, IStyleFunctionOrObject } from '../../../Utilities';\nimport type { IShimmerElement } from '../Shimmer.types';\n\n/**\n * {@docCategory Shimmer}\n */\nexport interface IShimmerElementsGroup {}\n\n/**\n * ShimmerElementsGroup component props.\n * {@docCategory Shimmer}\n */\nexport interface IShimmerElementsGroupProps extends React.AllHTMLAttributes<HTMLElement> {\n /**\n * Optional callback to access the IShimmerElementsGroup interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n */\n componentRef?: IRefObject<IShimmerElementsGroup>;\n\n /**\n * Optional maximum row height of the shimmerElements container.\n */\n rowHeight?: number;\n\n /**\n * Elements to render in one group of the Shimmer.\n */\n shimmerElements?: IShimmerElement[];\n\n /**\n * Optional boolean for enabling flexWrap of the container containing the shimmerElements.\n * @defaultvalue false\n */\n flexWrap?: boolean;\n\n /**\n * Optional width for ShimmerElements container.\n */\n width?: string;\n\n /**\n * Theme provided by High-Order Component.\n */\n theme?: ITheme;\n\n /**\n * Defines the background color of the space in between and around shimmer elements.\n * @defaultvalue theme.palette.white\n */\n backgroundColor?: string;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: IStyleFunctionOrObject<IShimmerElementsGroupStyleProps, IShimmerElementsGroupStyles>;\n}\n\n/**\n * Props needed to construct styles.\n * {@docCategory Shimmer}\n */\nexport interface IShimmerElementsGroupStyleProps {\n /**\n * Boolean flag to notify whether the root element needs to flex wrap.\n */\n flexWrap?: boolean;\n\n /** Theme provided by High-Order Component. */\n theme: ITheme;\n}\n\n/**\n * Represents the stylable areas of the control.\n * {@docCategory Shimmer}\n */\nexport interface IShimmerElementsGroupStyles {\n /**\n * Represents the wrapper root element holding all elements inside.\n */\n root?: IStyle;\n}\n"]}
@@ -0,0 +1,6 @@
import * as React from 'react';
import type { IShimmerGapProps } from './ShimmerGap.types';
/**
* {@docCategory Shimmer}
*/
export declare const ShimmerGapBase: React.FunctionComponent<IShimmerGapProps>;
@@ -0,0 +1,17 @@
import * as React from 'react';
import { classNamesFunction } from '../../../Utilities';
var getClassNames = classNamesFunction();
/**
* {@docCategory Shimmer}
*/
export var ShimmerGapBase = function (props) {
// eslint-disable-next-line @typescript-eslint/no-deprecated
var height = props.height, styles = props.styles, _a = props.width, width = _a === void 0 ? '10px' : _a, borderStyle = props.borderStyle, theme = props.theme;
var classNames = getClassNames(styles, {
theme: theme,
height: height,
borderStyle: borderStyle,
});
return (React.createElement("div", { style: { width: width, minWidth: typeof width === 'number' ? "".concat(width, "px") : 'auto' }, className: classNames.root }));
};
//# sourceMappingURL=ShimmerGap.base.js.map
@@ -0,0 +1 @@
{"version":3,"file":"ShimmerGap.base.js","sourceRoot":"../src/","sources":["components/Shimmer/ShimmerGap/ShimmerGap.base.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAGxD,IAAM,aAAa,GAAG,kBAAkB,EAA4C,CAAC;AAErF;;GAEG;AACH,MAAM,CAAC,IAAM,cAAc,GAA8C,UAAA,KAAK;IAC5E,4DAA4D;IACpD,IAAA,MAAM,GAAiD,KAAK,OAAtD,EAAE,MAAM,GAAyC,KAAK,OAA9C,EAAE,KAAuC,KAAK,MAA9B,EAAd,KAAK,mBAAG,MAAM,KAAA,EAAE,WAAW,GAAY,KAAK,YAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;IAErE,IAAM,UAAU,GAAG,aAAa,CAAC,MAAO,EAAE;QACxC,KAAK,EAAE,KAAM;QACb,MAAM,QAAA;QACN,WAAW,aAAA;KACZ,CAAC,CAAC;IAEH,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,KAAK,OAAA,EAAE,QAAQ,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAG,KAAK,OAAI,CAAC,CAAC,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,UAAU,CAAC,IAAI,GAAI,CACnH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction } from '../../../Utilities';\nimport type { IShimmerGapProps, IShimmerGapStyleProps, IShimmerGapStyles } from './ShimmerGap.types';\n\nconst getClassNames = classNamesFunction<IShimmerGapStyleProps, IShimmerGapStyles>();\n\n/**\n * {@docCategory Shimmer}\n */\nexport const ShimmerGapBase: React.FunctionComponent<IShimmerGapProps> = props => {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n const { height, styles, width = '10px', borderStyle, theme } = props;\n\n const classNames = getClassNames(styles!, {\n theme: theme!,\n height,\n borderStyle,\n });\n\n return (\n <div style={{ width, minWidth: typeof width === 'number' ? `${width}px` : 'auto' }} className={classNames.root} />\n );\n};\n"]}
@@ -0,0 +1,3 @@
import * as React from 'react';
import type { IShimmerGapProps } from './ShimmerGap.types';
export declare const ShimmerGap: React.FunctionComponent<IShimmerGapProps>;
@@ -0,0 +1,7 @@
import { styled } from '../../../Utilities';
import { ShimmerGapBase } from './ShimmerGap.base';
import { getStyles } from './ShimmerGap.styles';
export var ShimmerGap = styled(ShimmerGapBase, getStyles, undefined, {
scope: 'ShimmerGap',
});
//# sourceMappingURL=ShimmerGap.js.map
@@ -0,0 +1 @@
{"version":3,"file":"ShimmerGap.js","sourceRoot":"../src/","sources":["components/Shimmer/ShimmerGap/ShimmerGap.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAGhD,MAAM,CAAC,IAAM,UAAU,GAA8C,MAAM,CAIzE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE;IACtC,KAAK,EAAE,YAAY;CACpB,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '../../../Utilities';\nimport { ShimmerGapBase } from './ShimmerGap.base';\nimport { getStyles } from './ShimmerGap.styles';\nimport type { IShimmerGapProps, IShimmerGapStyleProps, IShimmerGapStyles } from './ShimmerGap.types';\n\nexport const ShimmerGap: React.FunctionComponent<IShimmerGapProps> = styled<\n IShimmerGapProps,\n IShimmerGapStyleProps,\n IShimmerGapStyles\n>(ShimmerGapBase, getStyles, undefined, {\n scope: 'ShimmerGap',\n});\n"]}
@@ -0,0 +1,2 @@
import type { IShimmerGapStyleProps, IShimmerGapStyles } from './ShimmerGap.types';
export declare function getStyles(props: IShimmerGapStyleProps): IShimmerGapStyles;
@@ -0,0 +1,34 @@
import { getGlobalClassNames, HighContrastSelector } from '../../../Styling';
var GlobalClassNames = {
root: 'ms-ShimmerGap-root',
};
export function getStyles(props) {
var _a;
// eslint-disable-next-line @typescript-eslint/no-deprecated
var height = props.height, borderStyle = props.borderStyle, theme = props.theme;
var semanticColors = theme.semanticColors;
var globalClassNames = getGlobalClassNames(GlobalClassNames, theme);
var borderStyles = borderStyle || {};
return {
root: [
globalClassNames.root,
theme.fonts.medium,
{
backgroundColor: semanticColors.bodyBackground,
height: "".concat(height, "px"),
boxSizing: 'content-box',
borderTopStyle: 'solid',
borderBottomStyle: 'solid',
borderColor: semanticColors.bodyBackground,
selectors: (_a = {},
_a[HighContrastSelector] = {
backgroundColor: 'Window',
borderColor: 'Window',
},
_a),
},
borderStyles,
],
};
}
//# sourceMappingURL=ShimmerGap.styles.js.map
@@ -0,0 +1 @@
{"version":3,"file":"ShimmerGap.styles.js","sourceRoot":"../src/","sources":["components/Shimmer/ShimmerGap/ShimmerGap.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAI7E,IAAM,gBAAgB,GAAG;IACvB,IAAI,EAAE,oBAAoB;CAC3B,CAAC;AAEF,MAAM,UAAU,SAAS,CAAC,KAA4B;;IACpD,4DAA4D;IACpD,IAAA,MAAM,GAAyB,KAAK,OAA9B,EAAE,WAAW,GAAY,KAAK,YAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;IAErC,IAAA,cAAc,GAAK,KAAK,eAAV,CAAW;IACjC,IAAM,gBAAgB,GAAG,mBAAmB,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;IAEtE,IAAM,YAAY,GAAc,WAAW,IAAI,EAAE,CAAC;IAElD,OAAO;QACL,IAAI,EAAE;YACJ,gBAAgB,CAAC,IAAI;YACrB,KAAK,CAAC,KAAK,CAAC,MAAM;YAClB;gBACE,eAAe,EAAE,cAAc,CAAC,cAAc;gBAC9C,MAAM,EAAE,UAAG,MAAM,OAAI;gBACrB,SAAS,EAAE,aAAa;gBACxB,cAAc,EAAE,OAAO;gBACvB,iBAAiB,EAAE,OAAO;gBAC1B,WAAW,EAAE,cAAc,CAAC,cAAc;gBAC1C,SAAS;oBACP,GAAC,oBAAoB,IAAG;wBACtB,eAAe,EAAE,QAAQ;wBACzB,WAAW,EAAE,QAAQ;qBACtB;uBACF;aACF;YACD,YAAY;SACb;KACF,CAAC;AACJ,CAAC","sourcesContent":["import { getGlobalClassNames, HighContrastSelector } from '../../../Styling';\nimport type { IShimmerGapStyleProps, IShimmerGapStyles } from './ShimmerGap.types';\nimport type { IRawStyle } from '../../../Styling';\n\nconst GlobalClassNames = {\n root: 'ms-ShimmerGap-root',\n};\n\nexport function getStyles(props: IShimmerGapStyleProps): IShimmerGapStyles {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n const { height, borderStyle, theme } = props;\n\n const { semanticColors } = theme;\n const globalClassNames = getGlobalClassNames(GlobalClassNames, theme);\n\n const borderStyles: IRawStyle = borderStyle || {};\n\n return {\n root: [\n globalClassNames.root,\n theme.fonts.medium,\n {\n backgroundColor: semanticColors.bodyBackground,\n height: `${height}px`,\n boxSizing: 'content-box',\n borderTopStyle: 'solid',\n borderBottomStyle: 'solid',\n borderColor: semanticColors.bodyBackground,\n selectors: {\n [HighContrastSelector]: {\n backgroundColor: 'Window',\n borderColor: 'Window',\n },\n },\n },\n borderStyles,\n ],\n };\n}\n"]}
@@ -0,0 +1,71 @@
import * as React from 'react';
import type { IStyle, IRawStyle, ITheme } from '../../../Styling';
import type { IStyleFunctionOrObject, IRefObject } from '../../../Utilities';
/**
* {@docCategory Shimmer}
*/
export interface IShimmerGap {
}
/**
* ShimmerGap component props.
* {@docCategory Shimmer}
*/
export interface IShimmerGapProps extends React.AllHTMLAttributes<HTMLElement> {
/**
* Optional callback to access the IShimmerGap interface. Use this instead of ref for accessing
* the public methods and properties of the component.
*/
componentRef?: IRefObject<IShimmerGap>;
/**
* Sets the height of the gap.
* @defaultvalue 16px
*/
height?: number;
/**
* Sets width value of the gap.
* @defaultvalue 10px
*/
width?: number | string;
/**
* Theme provided by High-Order Component.
*/
theme?: ITheme;
/**
* Call to provide customized styling that will layer on top of the variant rules.
*/
styles?: IStyleFunctionOrObject<IShimmerGapStyleProps, IShimmerGapStyles>;
/**
* Use to set custom styling of the shimmerGap borders.
* @deprecated Use `styles.root` instead.
*/
borderStyle?: IRawStyle;
}
/**
* Props needed to construct styles.
* {@docCategory Shimmer}
*/
export type IShimmerGapStyleProps = {
/**
* Theme values passed to the component.
*/
theme: ITheme;
/**
* Needed to provide a height to the root of the control.
*/
height?: number;
/**
* Styles to override borderStyles with custom ones.
* @deprecated Use `styles.root` instead.
*/
borderStyle?: IRawStyle;
};
/**
* Represents the stylable areas of the control.
* {@docCategory Shimmer}
*/
export interface IShimmerGapStyles {
/**
* Root of the ShimmerGap component.
*/
root?: IStyle;
}
@@ -0,0 +1,2 @@
export {};
//# sourceMappingURL=ShimmerGap.types.js.map
@@ -0,0 +1 @@
{"version":3,"file":"ShimmerGap.types.js","sourceRoot":"../src/","sources":["components/Shimmer/ShimmerGap/ShimmerGap.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { IStyle, IRawStyle, ITheme } from '../../../Styling';\nimport type { IStyleFunctionOrObject, IRefObject } from '../../../Utilities';\n\n/**\n * {@docCategory Shimmer}\n */\nexport interface IShimmerGap {}\n\n/**\n * ShimmerGap component props.\n * {@docCategory Shimmer}\n */\nexport interface IShimmerGapProps extends React.AllHTMLAttributes<HTMLElement> {\n /**\n * Optional callback to access the IShimmerGap interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n */\n componentRef?: IRefObject<IShimmerGap>;\n\n /**\n * Sets the height of the gap.\n * @defaultvalue 16px\n */\n height?: number;\n\n /**\n * Sets width value of the gap.\n * @defaultvalue 10px\n */\n width?: number | string;\n\n /**\n * Theme provided by High-Order Component.\n */\n theme?: ITheme;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: IStyleFunctionOrObject<IShimmerGapStyleProps, IShimmerGapStyles>;\n\n /**\n * Use to set custom styling of the shimmerGap borders.\n * @deprecated Use `styles.root` instead.\n */\n borderStyle?: IRawStyle;\n}\n\n/**\n * Props needed to construct styles.\n * {@docCategory Shimmer}\n */\nexport type IShimmerGapStyleProps = {\n /**\n * Theme values passed to the component.\n */\n theme: ITheme;\n\n /**\n * Needed to provide a height to the root of the control.\n */\n height?: number;\n\n /**\n * Styles to override borderStyles with custom ones.\n * @deprecated Use `styles.root` instead.\n */\n borderStyle?: IRawStyle;\n};\n\n/**\n * Represents the stylable areas of the control.\n * {@docCategory Shimmer}\n */\nexport interface IShimmerGapStyles {\n /**\n * Root of the ShimmerGap component.\n */\n root?: IStyle;\n}\n"]}
@@ -0,0 +1,6 @@
import * as React from 'react';
import type { IShimmerLineProps } from './ShimmerLine.types';
/**
* {@docCategory Shimmer}
*/
export declare const ShimmerLineBase: React.FunctionComponent<IShimmerLineProps>;
@@ -0,0 +1,25 @@
import * as React from 'react';
import { classNamesFunction } from '../../../Utilities';
var getClassNames = classNamesFunction();
/**
* {@docCategory Shimmer}
*/
export var ShimmerLineBase = function (props) {
// eslint-disable-next-line @typescript-eslint/no-deprecated
var height = props.height, styles = props.styles, _a = props.width, width = _a === void 0 ? '100%' : _a, borderStyle = props.borderStyle, theme = props.theme;
var classNames = getClassNames(styles, {
theme: theme,
height: height,
borderStyle: borderStyle,
});
return (React.createElement("div", { style: { width: width, minWidth: typeof width === 'number' ? "".concat(width, "px") : 'auto' }, className: classNames.root },
React.createElement("svg", { width: "2", height: "2", className: classNames.topLeftCorner },
React.createElement("path", { d: "M0 2 A 2 2, 0, 0, 1, 2 0 L 0 0 Z" })),
React.createElement("svg", { width: "2", height: "2", className: classNames.topRightCorner },
React.createElement("path", { d: "M0 0 A 2 2, 0, 0, 1, 2 2 L 2 0 Z" })),
React.createElement("svg", { width: "2", height: "2", className: classNames.bottomRightCorner },
React.createElement("path", { d: "M2 0 A 2 2, 0, 0, 1, 0 2 L 2 2 Z" })),
React.createElement("svg", { width: "2", height: "2", className: classNames.bottomLeftCorner },
React.createElement("path", { d: "M2 2 A 2 2, 0, 0, 1, 0 0 L 0 2 Z" }))));
};
//# sourceMappingURL=ShimmerLine.base.js.map
@@ -0,0 +1 @@
{"version":3,"file":"ShimmerLine.base.js","sourceRoot":"../src/","sources":["components/Shimmer/ShimmerLine/ShimmerLine.base.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAGxD,IAAM,aAAa,GAAG,kBAAkB,EAA8C,CAAC;AAEvF;;GAEG;AACH,MAAM,CAAC,IAAM,eAAe,GAA+C,UAAA,KAAK;IAC9E,4DAA4D;IACpD,IAAA,MAAM,GAAiD,KAAK,OAAtD,EAAE,MAAM,GAAyC,KAAK,OAA9C,EAAE,KAAuC,KAAK,MAA9B,EAAd,KAAK,mBAAG,MAAM,KAAA,EAAE,WAAW,GAAY,KAAK,YAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;IAErE,IAAM,UAAU,GAAG,aAAa,CAAC,MAAO,EAAE;QACxC,KAAK,EAAE,KAAM;QACb,MAAM,QAAA;QACN,WAAW,aAAA;KACZ,CAAC,CAAC;IAEH,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,KAAK,OAAA,EAAE,QAAQ,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAG,KAAK,OAAI,CAAC,CAAC,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,UAAU,CAAC,IAAI;QAC5G,6BAAK,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,GAAG,EAAC,SAAS,EAAE,UAAU,CAAC,aAAa;YAC3D,8BAAM,CAAC,EAAC,kCAAkC,GAAG,CACzC;QACN,6BAAK,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,GAAG,EAAC,SAAS,EAAE,UAAU,CAAC,cAAc;YAC5D,8BAAM,CAAC,EAAC,kCAAkC,GAAG,CACzC;QACN,6BAAK,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,GAAG,EAAC,SAAS,EAAE,UAAU,CAAC,iBAAiB;YAC/D,8BAAM,CAAC,EAAC,kCAAkC,GAAG,CACzC;QACN,6BAAK,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,GAAG,EAAC,SAAS,EAAE,UAAU,CAAC,gBAAgB;YAC9D,8BAAM,CAAC,EAAC,kCAAkC,GAAG,CACzC,CACF,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction } from '../../../Utilities';\nimport type { IShimmerLineProps, IShimmerLineStyleProps, IShimmerLineStyles } from './ShimmerLine.types';\n\nconst getClassNames = classNamesFunction<IShimmerLineStyleProps, IShimmerLineStyles>();\n\n/**\n * {@docCategory Shimmer}\n */\nexport const ShimmerLineBase: React.FunctionComponent<IShimmerLineProps> = props => {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n const { height, styles, width = '100%', borderStyle, theme } = props;\n\n const classNames = getClassNames(styles!, {\n theme: theme!,\n height,\n borderStyle,\n });\n\n return (\n <div style={{ width, minWidth: typeof width === 'number' ? `${width}px` : 'auto' }} className={classNames.root}>\n <svg width=\"2\" height=\"2\" className={classNames.topLeftCorner}>\n <path d=\"M0 2 A 2 2, 0, 0, 1, 2 0 L 0 0 Z\" />\n </svg>\n <svg width=\"2\" height=\"2\" className={classNames.topRightCorner}>\n <path d=\"M0 0 A 2 2, 0, 0, 1, 2 2 L 2 0 Z\" />\n </svg>\n <svg width=\"2\" height=\"2\" className={classNames.bottomRightCorner}>\n <path d=\"M2 0 A 2 2, 0, 0, 1, 0 2 L 2 2 Z\" />\n </svg>\n <svg width=\"2\" height=\"2\" className={classNames.bottomLeftCorner}>\n <path d=\"M2 2 A 2 2, 0, 0, 1, 0 0 L 0 2 Z\" />\n </svg>\n </div>\n );\n};\n"]}
@@ -0,0 +1,3 @@
import * as React from 'react';
import type { IShimmerLineProps } from './ShimmerLine.types';
export declare const ShimmerLine: React.FunctionComponent<IShimmerLineProps>;
@@ -0,0 +1,7 @@
import { styled } from '../../../Utilities';
import { ShimmerLineBase } from './ShimmerLine.base';
import { getStyles } from './ShimmerLine.styles';
export var ShimmerLine = styled(ShimmerLineBase, getStyles, undefined, {
scope: 'ShimmerLine',
});
//# sourceMappingURL=ShimmerLine.js.map
@@ -0,0 +1 @@
{"version":3,"file":"ShimmerLine.js","sourceRoot":"../src/","sources":["components/Shimmer/ShimmerLine/ShimmerLine.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGjD,MAAM,CAAC,IAAM,WAAW,GAA+C,MAAM,CAI3E,eAAe,EAAE,SAAS,EAAE,SAAS,EAAE;IACvC,KAAK,EAAE,aAAa;CACrB,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '../../../Utilities';\nimport { ShimmerLineBase } from './ShimmerLine.base';\nimport { getStyles } from './ShimmerLine.styles';\nimport type { IShimmerLineProps, IShimmerLineStyleProps, IShimmerLineStyles } from './ShimmerLine.types';\n\nexport const ShimmerLine: React.FunctionComponent<IShimmerLineProps> = styled<\n IShimmerLineProps,\n IShimmerLineStyleProps,\n IShimmerLineStyles\n>(ShimmerLineBase, getStyles, undefined, {\n scope: 'ShimmerLine',\n});\n"]}
@@ -0,0 +1,2 @@
import type { IShimmerLineStyleProps, IShimmerLineStyles } from './ShimmerLine.types';
export declare function getStyles(props: IShimmerLineStyleProps): IShimmerLineStyles;
@@ -0,0 +1,79 @@
import { getGlobalClassNames, HighContrastSelector } from '../../../Styling';
var GlobalClassNames = {
root: 'ms-ShimmerLine-root',
topLeftCorner: 'ms-ShimmerLine-topLeftCorner',
topRightCorner: 'ms-ShimmerLine-topRightCorner',
bottomLeftCorner: 'ms-ShimmerLine-bottomLeftCorner',
bottomRightCorner: 'ms-ShimmerLine-bottomRightCorner',
};
export function getStyles(props) {
var _a;
// eslint-disable-next-line @typescript-eslint/no-deprecated
var height = props.height, borderStyle = props.borderStyle, theme = props.theme;
var semanticColors = theme.semanticColors;
var globalClassNames = getGlobalClassNames(GlobalClassNames, theme);
var borderStyles = borderStyle || {};
var sharedCornerStyles = {
position: 'absolute',
fill: semanticColors.bodyBackground,
};
return {
root: [
globalClassNames.root,
theme.fonts.medium,
{
height: "".concat(height, "px"),
boxSizing: 'content-box',
position: 'relative',
borderTopStyle: 'solid',
borderBottomStyle: 'solid',
borderColor: semanticColors.bodyBackground,
borderWidth: 0,
selectors: (_a = {},
_a[HighContrastSelector] = {
borderColor: 'Window',
selectors: {
'> *': {
fill: 'Window',
},
},
},
_a),
},
borderStyles,
],
topLeftCorner: [
globalClassNames.topLeftCorner,
{
top: '0',
left: '0',
},
sharedCornerStyles,
],
topRightCorner: [
globalClassNames.topRightCorner,
{
top: '0',
right: '0',
},
sharedCornerStyles,
],
bottomRightCorner: [
globalClassNames.bottomRightCorner,
{
bottom: '0',
right: '0',
},
sharedCornerStyles,
],
bottomLeftCorner: [
globalClassNames.bottomLeftCorner,
{
bottom: '0',
left: '0',
},
sharedCornerStyles,
],
};
}
//# sourceMappingURL=ShimmerLine.styles.js.map
@@ -0,0 +1 @@
{"version":3,"file":"ShimmerLine.styles.js","sourceRoot":"../src/","sources":["components/Shimmer/ShimmerLine/ShimmerLine.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAI7E,IAAM,gBAAgB,GAAG;IACvB,IAAI,EAAE,qBAAqB;IAC3B,aAAa,EAAE,8BAA8B;IAC7C,cAAc,EAAE,+BAA+B;IAC/C,gBAAgB,EAAE,iCAAiC;IACnD,iBAAiB,EAAE,kCAAkC;CACtD,CAAC;AAEF,MAAM,UAAU,SAAS,CAAC,KAA6B;;IACrD,4DAA4D;IACpD,IAAA,MAAM,GAAyB,KAAK,OAA9B,EAAE,WAAW,GAAY,KAAK,YAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;IAErC,IAAA,cAAc,GAAK,KAAK,eAAV,CAAW;IACjC,IAAM,gBAAgB,GAAG,mBAAmB,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;IAEtE,IAAM,YAAY,GAAc,WAAW,IAAI,EAAE,CAAC;IAElD,IAAM,kBAAkB,GAAc;QACpC,QAAQ,EAAE,UAAU;QACpB,IAAI,EAAE,cAAc,CAAC,cAAc;KACpC,CAAC;IAEF,OAAO;QACL,IAAI,EAAE;YACJ,gBAAgB,CAAC,IAAI;YACrB,KAAK,CAAC,KAAK,CAAC,MAAM;YAClB;gBACE,MAAM,EAAE,UAAG,MAAM,OAAI;gBACrB,SAAS,EAAE,aAAa;gBACxB,QAAQ,EAAE,UAAU;gBACpB,cAAc,EAAE,OAAO;gBACvB,iBAAiB,EAAE,OAAO;gBAC1B,WAAW,EAAE,cAAc,CAAC,cAAc;gBAC1C,WAAW,EAAE,CAAC;gBACd,SAAS;oBACP,GAAC,oBAAoB,IAAG;wBACtB,WAAW,EAAE,QAAQ;wBACrB,SAAS,EAAE;4BACT,KAAK,EAAE;gCACL,IAAI,EAAE,QAAQ;6BACf;yBACF;qBACF;uBACF;aACF;YACD,YAAY;SACb;QACD,aAAa,EAAE;YACb,gBAAgB,CAAC,aAAa;YAC9B;gBACE,GAAG,EAAE,GAAG;gBACR,IAAI,EAAE,GAAG;aACV;YACD,kBAAkB;SACnB;QACD,cAAc,EAAE;YACd,gBAAgB,CAAC,cAAc;YAC/B;gBACE,GAAG,EAAE,GAAG;gBACR,KAAK,EAAE,GAAG;aACX;YACD,kBAAkB;SACnB;QACD,iBAAiB,EAAE;YACjB,gBAAgB,CAAC,iBAAiB;YAClC;gBACE,MAAM,EAAE,GAAG;gBACX,KAAK,EAAE,GAAG;aACX;YACD,kBAAkB;SACnB;QACD,gBAAgB,EAAE;YAChB,gBAAgB,CAAC,gBAAgB;YACjC;gBACE,MAAM,EAAE,GAAG;gBACX,IAAI,EAAE,GAAG;aACV;YACD,kBAAkB;SACnB;KACF,CAAC;AACJ,CAAC","sourcesContent":["import { getGlobalClassNames, HighContrastSelector } from '../../../Styling';\nimport type { IShimmerLineStyleProps, IShimmerLineStyles } from './ShimmerLine.types';\nimport type { IRawStyle } from '../../../Styling';\n\nconst GlobalClassNames = {\n root: 'ms-ShimmerLine-root',\n topLeftCorner: 'ms-ShimmerLine-topLeftCorner',\n topRightCorner: 'ms-ShimmerLine-topRightCorner',\n bottomLeftCorner: 'ms-ShimmerLine-bottomLeftCorner',\n bottomRightCorner: 'ms-ShimmerLine-bottomRightCorner',\n};\n\nexport function getStyles(props: IShimmerLineStyleProps): IShimmerLineStyles {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n const { height, borderStyle, theme } = props;\n\n const { semanticColors } = theme;\n const globalClassNames = getGlobalClassNames(GlobalClassNames, theme);\n\n const borderStyles: IRawStyle = borderStyle || {};\n\n const sharedCornerStyles: IRawStyle = {\n position: 'absolute',\n fill: semanticColors.bodyBackground,\n };\n\n return {\n root: [\n globalClassNames.root,\n theme.fonts.medium,\n {\n height: `${height}px`,\n boxSizing: 'content-box',\n position: 'relative',\n borderTopStyle: 'solid',\n borderBottomStyle: 'solid',\n borderColor: semanticColors.bodyBackground,\n borderWidth: 0,\n selectors: {\n [HighContrastSelector]: {\n borderColor: 'Window',\n selectors: {\n '> *': {\n fill: 'Window',\n },\n },\n },\n },\n },\n borderStyles,\n ],\n topLeftCorner: [\n globalClassNames.topLeftCorner,\n {\n top: '0',\n left: '0',\n },\n sharedCornerStyles,\n ],\n topRightCorner: [\n globalClassNames.topRightCorner,\n {\n top: '0',\n right: '0',\n },\n sharedCornerStyles,\n ],\n bottomRightCorner: [\n globalClassNames.bottomRightCorner,\n {\n bottom: '0',\n right: '0',\n },\n sharedCornerStyles,\n ],\n bottomLeftCorner: [\n globalClassNames.bottomLeftCorner,\n {\n bottom: '0',\n left: '0',\n },\n sharedCornerStyles,\n ],\n };\n}\n"]}
@@ -0,0 +1,87 @@
import * as React from 'react';
import type { IStyle, IRawStyle, ITheme } from '../../../Styling';
import type { IStyleFunctionOrObject, IRefObject } from '../../../Utilities';
/**
* {@docCategory Shimmer}
*/
export interface IShimmerLine {
}
/**
* ShimmerLine component props.
* {@docCategory Shimmer}
*/
export interface IShimmerLineProps extends React.AllHTMLAttributes<HTMLElement> {
/**
* Optional callback to access the IShimmerLine interface. Use this instead of ref for accessing
* the public methods and properties of the component.
*/
componentRef?: IRefObject<IShimmerLine>;
/**
* Sets the height of the rectangle.
* @defaultvalue 16px
*/
height?: number;
/**
* Sets width value of the line.
* @defaultvalue 100%
*/
width?: number | string;
/**
* Theme provided by High-Order Component.
*/
theme?: ITheme;
/**
* Call to provide customized styling that will layer on top of the variant rules.
*/
styles?: IStyleFunctionOrObject<IShimmerLineStyleProps, IShimmerLineStyles>;
/**
* Use to set custom styling of the shimmerLine borders.
* @deprecated Use `styles.root` instead.
*/
borderStyle?: IRawStyle;
}
/**
* Props needed to construct styles.
* {@docCategory Shimmer}
*/
export type IShimmerLineStyleProps = {
/**
* Theme values passed to the component.
*/
theme: ITheme;
/**
* Needed to provide a height to the root of the control.
*/
height?: number;
/**
* Styles to override borderStyles with custom ones.
* @deprecated Use `styles.root` instead.
*/
borderStyle?: IRawStyle;
};
/**
* Represents the stylable areas of the control.
* {@docCategory Shimmer}
*/
export interface IShimmerLineStyles {
/**
* Root of the ShimmerLine component.
*/
root?: IStyle;
/**
* Top-left corner SVG of the ShimmerLine component.
*/
topLeftCorner?: IStyle;
/**
* Top-right corner SVG of the ShimmerLine component.
*/
topRightCorner?: IStyle;
/**
* Bottom-right corner SVG of the ShimmerLine component.
*/
bottomRightCorner?: IStyle;
/**
* Bottom-left corner SVG of the ShimmerLine component.
*/
bottomLeftCorner?: IStyle;
}
@@ -0,0 +1,2 @@
export {};
//# sourceMappingURL=ShimmerLine.types.js.map
@@ -0,0 +1 @@
{"version":3,"file":"ShimmerLine.types.js","sourceRoot":"../src/","sources":["components/Shimmer/ShimmerLine/ShimmerLine.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { IStyle, IRawStyle, ITheme } from '../../../Styling';\nimport type { IStyleFunctionOrObject, IRefObject } from '../../../Utilities';\n\n/**\n * {@docCategory Shimmer}\n */\nexport interface IShimmerLine {}\n\n/**\n * ShimmerLine component props.\n * {@docCategory Shimmer}\n */\nexport interface IShimmerLineProps extends React.AllHTMLAttributes<HTMLElement> {\n /**\n * Optional callback to access the IShimmerLine interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n */\n componentRef?: IRefObject<IShimmerLine>;\n\n /**\n * Sets the height of the rectangle.\n * @defaultvalue 16px\n */\n height?: number;\n\n /**\n * Sets width value of the line.\n * @defaultvalue 100%\n */\n width?: number | string;\n\n /**\n * Theme provided by High-Order Component.\n */\n theme?: ITheme;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: IStyleFunctionOrObject<IShimmerLineStyleProps, IShimmerLineStyles>;\n\n /**\n * Use to set custom styling of the shimmerLine borders.\n * @deprecated Use `styles.root` instead.\n */\n borderStyle?: IRawStyle;\n}\n\n/**\n * Props needed to construct styles.\n * {@docCategory Shimmer}\n */\nexport type IShimmerLineStyleProps = {\n /**\n * Theme values passed to the component.\n */\n theme: ITheme;\n\n /**\n * Needed to provide a height to the root of the control.\n */\n height?: number;\n\n /**\n * Styles to override borderStyles with custom ones.\n * @deprecated Use `styles.root` instead.\n */\n borderStyle?: IRawStyle;\n};\n\n/**\n * Represents the stylable areas of the control.\n * {@docCategory Shimmer}\n */\nexport interface IShimmerLineStyles {\n /**\n * Root of the ShimmerLine component.\n */\n root?: IStyle;\n\n /**\n * Top-left corner SVG of the ShimmerLine component.\n */\n topLeftCorner?: IStyle;\n\n /**\n * Top-right corner SVG of the ShimmerLine component.\n */\n topRightCorner?: IStyle;\n\n /**\n * Bottom-right corner SVG of the ShimmerLine component.\n */\n bottomRightCorner?: IStyle;\n\n /**\n * Bottom-left corner SVG of the ShimmerLine component.\n */\n bottomLeftCorner?: IStyle;\n}\n"]}
+15
View File
@@ -0,0 +1,15 @@
export * from './Shimmer';
export * from './Shimmer.base';
export * from './Shimmer.types';
export * from './ShimmerLine/ShimmerLine';
export * from './ShimmerLine/ShimmerLine.base';
export * from './ShimmerLine/ShimmerLine.types';
export * from './ShimmerCircle/ShimmerCircle';
export * from './ShimmerCircle/ShimmerCircle.base';
export * from './ShimmerCircle/ShimmerCircle.types';
export * from './ShimmerGap/ShimmerGap';
export * from './ShimmerGap/ShimmerGap.base';
export * from './ShimmerGap/ShimmerGap.types';
export * from './ShimmerElementsGroup/ShimmerElementsGroup';
export * from './ShimmerElementsGroup/ShimmerElementsGroup.base';
export * from './ShimmerElementsGroup/ShimmerElementsGroup.types';
+16
View File
@@ -0,0 +1,16 @@
export * from './Shimmer';
export * from './Shimmer.base';
export * from './Shimmer.types';
export * from './ShimmerLine/ShimmerLine';
export * from './ShimmerLine/ShimmerLine.base';
export * from './ShimmerLine/ShimmerLine.types';
export * from './ShimmerCircle/ShimmerCircle';
export * from './ShimmerCircle/ShimmerCircle.base';
export * from './ShimmerCircle/ShimmerCircle.types';
export * from './ShimmerGap/ShimmerGap';
export * from './ShimmerGap/ShimmerGap.base';
export * from './ShimmerGap/ShimmerGap.types';
export * from './ShimmerElementsGroup/ShimmerElementsGroup';
export * from './ShimmerElementsGroup/ShimmerElementsGroup.base';
export * from './ShimmerElementsGroup/ShimmerElementsGroup.types';
//# sourceMappingURL=index.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Shimmer/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,iCAAiC,CAAC;AAChD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,oCAAoC,CAAC;AACnD,cAAc,qCAAqC,CAAC;AACpD,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,kDAAkD,CAAC;AACjE,cAAc,mDAAmD,CAAC","sourcesContent":["export * from './Shimmer';\nexport * from './Shimmer.base';\nexport * from './Shimmer.types';\nexport * from './ShimmerLine/ShimmerLine';\nexport * from './ShimmerLine/ShimmerLine.base';\nexport * from './ShimmerLine/ShimmerLine.types';\nexport * from './ShimmerCircle/ShimmerCircle';\nexport * from './ShimmerCircle/ShimmerCircle.base';\nexport * from './ShimmerCircle/ShimmerCircle.types';\nexport * from './ShimmerGap/ShimmerGap';\nexport * from './ShimmerGap/ShimmerGap.base';\nexport * from './ShimmerGap/ShimmerGap.types';\nexport * from './ShimmerElementsGroup/ShimmerElementsGroup';\nexport * from './ShimmerElementsGroup/ShimmerElementsGroup.base';\nexport * from './ShimmerElementsGroup/ShimmerElementsGroup.types';\n"]}