text: import * as tslib_1 from "tslib";
  import * as React from 'react';
  import { Shimmer, ShimmerElementsGroup, ShimmerElementType as ElemType } from 'office-ui-fabric-react/lib/Shimmer';
  import { Persona, PersonaSize, PersonaPresence } from 'office-ui-fabric-react/lib/Persona';
  import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
  import { PersonaDetails } from './ExampleHelper';
  import * as ShimmerExampleStyles from './Shimmer.Example.scss';
  var ShimmerLoadDataExample = /** @class */ (function (_super) {
      tslib_1.__extends(ShimmerLoadDataExample, _super);
      function ShimmerLoadDataExample(props) {
          var _this = _super.call(this, props) || this;
          _this._getContentOne = function (ev, checked) {
              var isDataLoadedOne = _this.state.isDataLoadedOne;
              _this.setState({
                  isDataLoadedOne: checked,
                  contentOne: !isDataLoadedOne ? 'Congratulations!!! You have successfully loaded the content. ' : ''
              });
          };
          _this._getContentTwo = function (ev, checked) {
              var isDataLoadedTwo = _this.state.isDataLoadedTwo;
              _this.setState({
                  isDataLoadedTwo: checked,
                  examplePersona: !isDataLoadedTwo ? tslib_1.__assign({}, PersonaDetails) : {}
              });
          };
          _this._getCustomElements = function () {
              return (React.createElement("div", { 
                  // tslint:disable-next-line:jsx-ban-props
                  style: { display: 'flex' } },
                  React.createElement(ShimmerElementsGroup, { shimmerElements: [{ type: ElemType.circle, height: 40 }, { type: ElemType.gap, width: 16, height: 40 }] }),
                  React.createElement(ShimmerElementsGroup, { flexWrap: true, width: '100%', shimmerElements: [
                          { type: ElemType.line, width: '100%', height: 10, verticalAlign: 'bottom' },
                          { type: ElemType.line, width: '90%', height: 8 },
                          { type: ElemType.gap, width: '10%', height: 20 }
                      ] })));
          };
          _this.state = {
              isDataLoadedOne: false,
              isDataLoadedTwo: false,
              contentOne: '',
              examplePersona: {}
          };
          return _this;
      }
      ShimmerLoadDataExample.prototype.render = function () {
          var _a = this.state, isDataLoadedOne = _a.isDataLoadedOne, isDataLoadedTwo = _a.isDataLoadedTwo, contentOne = _a.contentOne, examplePersona = _a.examplePersona;
          return (React.createElement("div", { className: ShimmerExampleStyles.shimmerExampleContainer },
              React.createElement(Toggle, { checked: isDataLoadedOne, onChange: this._getContentOne, onText: "Toggle to show shimmer", offText: "Toggle to load content" }),
              React.createElement(Shimmer, { isDataLoaded: isDataLoadedOne, ariaLabel: 'Loading content' },
                  React.createElement("div", { 
                      // tslint:disable-next-line:jsx-ban-props
                      style: {
                          overflow: 'hidden',
                          textOverflow: 'ellipsis',
                          whiteSpace: 'nowrap',
                          lineHeight: '1',
                          minHeight: '16px' // Default height of Shimmer when no elements being provided.
                      } },
                      contentOne,
                      contentOne,
                      contentOne)),
              React.createElement(Toggle, { checked: isDataLoadedTwo, onChange: this._getContentTwo, onText: "Toggle to show shimmer", offText: "Toggle to load content" }),
              React.createElement(Shimmer, { customElementsGroup: this._getCustomElements(), width: 300, isDataLoaded: isDataLoadedTwo },
                  React.createElement(Persona, tslib_1.__assign({}, examplePersona, { size: PersonaSize.size40, presence: PersonaPresence.away })))));
      };
      return ShimmerLoadDataExample;
  }(React.Component));
  export { ShimmerLoadDataExample };
  //# sourceMappingURL=Shimmer.LoadData.Example.js.map